achenc1013/ThriveX-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新网站页面布局

Browse Source
This commit is contained in:
宇阳
2025-01-19 20:09:04 +08:00
parent 07af30b649
commit 7c72dcd434
2 changed files with 52 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/Web/index.scss
View File

@@ -5,7 +5,6 @@
gap: 20px; gap: 20px;
justify-items: center; justify-items: center;
min-height: 100px; min-height: 100px;
margin-top: 40px;
.item { .item {
overflow: hidden; overflow: hidden;

83
src/pages/Web/index.tsx
View File

@@ -15,7 +15,7 @@ export default () => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [tab, setTab] = useState<string>('list'); const [tab, setTab] = useState<string>('list');
const [list, setList] = useState<Web[]>([]); const [list, setList] = useState<{ [key: string]: Web[] }>({});
const [listTemp, setListTemp] = useState<Web[]>([]); const [listTemp, setListTemp] = useState<Web[]>([]);
const [typeList, setTypeList] = useState<WebType[]>([]); const [typeList, setTypeList] = useState<WebType[]>([]);
const [search, setSearch] = useState<string>(''); const [search, setSearch] = useState<string>('');
@@ -33,9 +33,18 @@ export default () => {
data.sort((a, b) => a.order - b.order) data.sort((a, b) => a.order - b.order)
data.sort((a, b) => a.type.order - b.type.order) data.sort((a, b) => a.type.order - b.type.order)
setList(data); const grouped = data.reduce((acc, item) => {
setListTemp(data); const groupName = item.type.name;
if (!acc[groupName]) {
acc[groupName] = [];
}
acc[groupName].push(item);
return acc;
}, {} as { [key: string]: Web[] });
console.log("grouped：", grouped);
setList(grouped);
setListTemp(data);
setLoading(false) setLoading(false)
} catch (error) { } catch (error) {
setLoading(false); setLoading(false);
@@ -45,6 +54,8 @@ export default () => {
// 获取网站类型列表 // 获取网站类型列表
const getWebTypeList = async () => { const getWebTypeList = async () => {
const { data } = await getWebTypeListAPI(); const { data } = await getWebTypeListAPI();
console.log("typeList：", { data });
setTypeList(data); setTypeList(data);
}; };
@@ -54,7 +65,7 @@ export default () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
setListTemp(list.filter(item => item.title.includes(search) || item.description.includes(search))); // setListTemp(list.filter(item => item.title.includes(search) || item.description.includes(search)));
}, [search, list]); }, [search, list]);
const deleteLinkData = async (id: number) => { const deleteLinkData = async (id: number) => {
@@ -77,8 +88,8 @@ export default () => {
const { data } = await getLinkDataAPI(record.id) const { data } = await getLinkDataAPI(record.id)
setLink(data); setLink(data);
form.setFieldsValue(data);
form.setFieldsValue(data);
setEditLoading(false) setEditLoading(false)
} catch (error) { } catch (error) {
setEditLoading(false) setEditLoading(false)
@@ -138,7 +149,7 @@ export default () => {
key: 'list', key: 'list',
children: ( children: (
<div> <div>
<div className="w-[300px] mx-auto"> <div className="w-[300px] mx-auto mb-10">
<Input <Input
size="large" size="large"
placeholder="请输入网站名称或描述信息进行查询" placeholder="请输入网站名称或描述信息进行查询"
@@ -149,35 +160,45 @@ export default () => {
</div> </div>
<Spin spinning={loading}> <Spin spinning={loading}>
{listTemp.length > 0 ? ( <div className='space-y-8'>
<div className="list"> {
{ Object.keys(list).map((key) => (
listTemp.map(item => ( <div>
<div key={item.id} className="item"> <Card className="[&>.ant-card-body]:!py-2 [&>.ant-card-body]:!px-4 my-2 ml-1.5 text-base">{key}</Card>
<div className="avatar">
<img src={item.image} alt="" className="avatar-img" />
</div>
<div className="name">{item.title}</div> {
<div className="description">{item.description}</div> Object.values(list[key]).length ? (
<div className="type">{item.type.name}</div> <div className="list">
{
Object.values(list[key]).map(item => (
<div key={item.id} className="item">
<div className="avatar">
<img src={item.image} alt="" className="avatar-img" />
</div>
<div className="operate"> <div className="name">{item.title}</div>
<div onClick={() => editLinkData(item)} className="edit">修改</div> <div className="description">{item.description}</div>
<div className="type">{item.type.name}</div>
<Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => deleteLinkData(item.id!)}> <div className="operate">
<div className="delete">删除</div> <div onClick={() => editLinkData(item)} className="edit">修改</div>
</Popconfirm>
</div>
<div onClick={() => toHref(item.url)} className="headFor">前往该网站 &rarr;</div> <Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => deleteLinkData(item.id!)}>
</div> <div className="delete">删除</div>
)) </Popconfirm>
} </div>
</div>
) : ( <div onClick={() => toHref(item.url)} className="headFor">前往该网站 &rarr;</div>
<Empty description="暂无数据" className='my-7' /> </div>
)} ))
}
</div>
) : <Empty description="暂无数据" className='my-7' />
}
</div>
))
}
</div>
</Spin> </Spin>
</div> </div>
), ),