优化网站管理页面

src/pages/Web/assets/svg/group.svg

@@ -0,0 +1 @@
+<svg t="1737289214739" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1760" width="200" height="200"><path d="M878.08 807.936l-192-92.16 8.192-190.464 194.56 82.432z" fill="#FF8F00" p-id="1761"></path><path d="M707.072 841.216l-186.88-96.256 165.888-29.184 192 92.16z" fill="#C16500" p-id="1762"></path><path d="M632.832 935.936l-183.296-101.888L459.264 481.28l188.416 82.944z" fill="#C16500" p-id="1763"></path><path d="M647.68 564.224L459.264 481.28l303.104-41.984 197.632 76.8z" fill="#FF8F00" p-id="1764"></path><path d="M647.68 564.224l312.832-48.128-19.968 357.376-306.688 62.464 13.824-371.712z m230.4 243.712l10.752-200.192-173.056 28.672-8.704 204.8 171.008-33.28" fill="#FFC107" p-id="1765"></path><path d="M650.752 479.232L461.824 400.896l10.24-371.2L665.6 87.04z" fill="#1E88E5" p-id="1766"></path><path d="M665.6 87.04L472.064 29.696 781.824 5.12l204.288 53.248z" fill="#90CAF9" p-id="1767"></path><path d="M986.112 58.368l-21.504 376.32-313.856 44.544L665.6 87.04z" fill="#2196F3" p-id="1768"></path><path d="M220.16 1020.416l-168.96-112.64 1.536-370.176 173.056 91.648z" fill="#64B5F6" p-id="1769"></path><path d="M225.792 629.248L52.736 537.6l335.872-46.592 185.344 84.48z" fill="#1976D2" p-id="1770"></path><path d="M573.952 575.488l-12.8 375.296L220.16 1020.416l5.632-391.168z" fill="#2196F3" p-id="1771"></path><path d="M504.832 413.184L319.488 336.896l4.096-210.432 187.904 64.512z" fill="#FF8F00" p-id="1772"></path><path d="M309.248 438.784L131.072 358.912l188.416-22.016 185.344 76.288z" fill="#C16500" p-id="1773"></path><path d="M226.816 539.648L53.248 453.12l1.536-390.144 178.176 62.976z" fill="#FFD366" p-id="1774"></path><path d="M232.96 125.952L54.784 62.976 399.36 35.328l191.488 58.368z" fill="#FFE5AB" p-id="1775"></path><path d="M232.96 125.952l357.888-31.744-13.824 395.776-350.208 49.664 6.144-413.696z m271.872 287.232l6.656-222.208-197.632 19.968-4.096 227.84 195.072-25.6" fill="#FFC107" p-id="1776"></path></svg>

src/pages/Web/index.tsx

@@ -5,6 +5,7 @@ import { getLinkListAPI, addLinkDataAPI, editLinkDataAPI, delLinkDataAPI, getWeb
 import { WebType, Web } from '@/types/app/web';
 import Title from '@/components/Title';
 import { RuleObject } from 'antd/es/form';
+import group from "./assets/svg/group.svg"
 import './index.scss';
 
 export default () => {
@@ -65,8 +66,23 @@ export default () => {
     }, []);
 
     useEffect(() => {
-        // setListTemp(list.filter(item => item.title.includes(search) || item.description.includes(search)));
-    }, [search, list]);
+        // 过滤出符合搜索条件的网站
+        const filteredList = listTemp.filter(item =>
+            item.title.includes(search) || item.description.includes(search)
+        );
+
+        // 按类型分组
+        const grouped = filteredList.reduce((acc, item) => {
+            const groupName = item.type.name;
+            if (!acc[groupName]) {
+                acc[groupName] = [];
+            }
+            acc[groupName].push(item);
+            return acc;
+        }, {} as { [key: string]: Web[] });
+
+        setList(grouped);
+    }, [search, listTemp]);
 
     const deleteLinkData = async (id: number) => {
         try {
@@ -149,13 +165,14 @@ export default () => {
             key: 'list',
             children: (
                 <div>
-                    <div className="w-[300px] mx-auto mb-10">
+                    <div className="flex justify-end w-full mb-8">
                         <Input
                             size="large"
                             placeholder="请输入网站名称或描述信息进行查询"
                             prefix={<SearchOutlined />}
                             value={search}
                             onChange={e => setSearch(e.target.value)}
+                            className='w-[400px]'
                         />
                     </div>
 
@@ -164,7 +181,10 @@ export default () => {
                             {
                                 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>
+                                        <Card className="[&>.ant-card-body]:flex [&>.ant-card-body]:py-2 [&>.ant-card-body]:px-4 my-2 ml-1.5 text-base bg-[#f5f6ff]">
+                                            <img src={group} alt="分组图标" className='w-6 h-6 mr-2' />
+                                            <span>{key}</span>
+                                        </Card>
 
                                         {
                                             Object.values(list[key]).length ? (