更新网站页面布局

src/pages/Web/index.scss

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

src/pages/Web/index.tsx

@@ -15,7 +15,7 @@ export default () => {
     const [form] = Form.useForm();
 
     const [tab, setTab] = useState<string>('list');
-    const [list, setList] = useState<Web[]>([]);
+    const [list, setList] = useState<{ [key: string]: Web[] }>({});
     const [listTemp, setListTemp] = useState<Web[]>([]);
     const [typeList, setTypeList] = useState<WebType[]>([]);
     const [search, setSearch] = useState<string>('');
@@ -33,9 +33,18 @@ export default () => {
             data.sort((a, b) => a.order - b.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)
         } catch (error) {
             setLoading(false);
@@ -45,6 +54,8 @@ export default () => {
     // 获取网站类型列表
     const getWebTypeList = async () => {
         const { data } = await getWebTypeListAPI();
+        console.log("typeList：", { data });
+
         setTypeList(data);
     };
 
@@ -54,7 +65,7 @@ export default () => {
     }, []);
 
     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]);
 
     const deleteLinkData = async (id: number) => {
@@ -77,8 +88,8 @@ export default () => {
 
             const { data } = await getLinkDataAPI(record.id)
             setLink(data);
-            form.setFieldsValue(data);
 
+            form.setFieldsValue(data);
             setEditLoading(false)
         } catch (error) {
             setEditLoading(false)
@@ -138,7 +149,7 @@ export default () => {
             key: 'list',
             children: (
                 <div>
-                    <div className="w-[300px] mx-auto">
+                    <div className="w-[300px] mx-auto mb-10">
                         <Input
                             size="large"
                             placeholder="请输入网站名称或描述信息进行查询"
@@ -149,10 +160,17 @@ export default () => {
                     </div>
 
                     <Spin spinning={loading}>
-                        {listTemp.length > 0 ? (
+                        <div className='space-y-8'>
+                            {
+                                Object.keys(list).map((key) => (
+                                    <div>
+                                        <Card className="[&>.ant-card-body]:!py-2 [&>.ant-card-body]:!px-4 my-2 ml-1.5 text-base">{key}</Card>
+
+                                        {
+                                            Object.values(list[key]).length ? (
                                                 <div className="list">
                                                     {
-                                    listTemp.map(item => (
+                                                        Object.values(list[key]).map(item => (
                                                             <div key={item.id} className="item">
                                                                 <div className="avatar">
                                                                     <img src={item.image} alt="" className="avatar-img" />
@@ -175,9 +193,12 @@ export default () => {
                                                         ))
                                                     }
                                                 </div>
-                        ) : (
+                                            ) : <Empty description="暂无数据" className='my-7' />
-                            <Empty description="暂无数据" className='my-7' />
+                                        }
-                        )}
+                                    </div>
+                                ))
+                            }
+                        </div>
                     </Spin>
                 </div>
             ),