封装获取数据列表逻辑

src/api/Article.ts

@@ -1,5 +1,6 @@
 import Request from "@/utils/request";
-import { Article } from "@/types/article";
+import { Article } from "@/types/app/article";
+import { getListAPI } from '@/utils'
 
 // 新增文章
 export const addArticleDataAPI = (data: Article) =>
@@ -17,11 +18,22 @@ export const editArticleDataAPI = (data: Article) =>
 export const getArticleDataAPI = (id?: number) => Request<Article>("GET", `/article/${id}`)
 
 // 获取文章列表
-export const getArticleListAPI = (pagination?: Page) => {
+export const getArticleListAPI = getListAPI<Article>("/article")
-  if (pagination) {
+
-    const { page, size } = pagination
+// export const getArticleListAPI = (data?: QueryData) => {
-    return Request<Paginate<Article[]>>("GET", `/article?page=${page}&size=${size}`);
+//   if (data?.pagination) {
-  } else {
+//     let sort = data?.sort ? `?sort=${data?.sort}` : '?'
-    return Request<Article[]>("GET", `/article/all`);
+//     const query = ObjectToUrlParam(data?.query as FilterData) ? "&" + ObjectToUrlParam(data?.query as FilterData) : ''
-  }
+//     const { page, size } = data.pagination
-};
+//     const pagination = page && size ? `&page=${page}&size=${size}` : page && !size ? `&page=${page}` : size && !page ? `&size=${size}` : ''
+//     if (!query && !pagination) sort = ''
+
+//     return Request<Paginate<Article[]>>("GET", `/article${sort}${pagination}${query}`);
+//   } else {
+//     let sort = data?.sort ? `?sort=${data?.sort}` : '?'
+//     const query = ObjectToUrlParam(data?.query as FilterData) ? "&" + ObjectToUrlParam(data?.query as FilterData) : ''
+//     if (!query) sort = ''
+
+//     return Request<Article[]>("GET", `/article/all${sort}${query}`);
+//   }
+// };

src/api/Comment.ts

@@ -24,4 +24,4 @@ export const getCommentListAPI = (pattern?: "list" | "recursion", pagination?: P
     } else {
         return Request<Comment[]>("GET", `/comment/all?pattern=${pattern ? pattern : "recursion"}`);
     }
-};
+};

src/api/Web.ts

@@ -1,5 +1,6 @@
 import Request from '@/utils/request'
 import { Web, LinkType } from '@/types/app/web'
+import { getListAPI } from '@/utils'
 
 // 新增网站
 export const addLinkDataAPI = (data: Web) => Request<Web>("POST", "/link", data)
@@ -14,14 +15,15 @@ export const editLinkDataAPI = (data: Web) => Request<Web>("PATCH", "/link", dat
 export const getLinkDataAPI = (id?: number) => Request<Web>("GET", `/link/${id}`)
 
 // 获取网站列表
-export const getLinkListAPI = (pagination?: Page) => {
+// export const getLinkListAPI = (pagination?: Page) => {
-    if (pagination) {
+//     if (pagination) {
-        const { page, size } = pagination
+//         const { page, size } = pagination
-        return Request<Paginate<Web[]>>("GET", `/link?page=${page}&size=${size}`);
+//         return Request<Paginate<Web[]>>("GET", `/link?page=${page}&size=${size}`);
-    } else {
+//     } else {
-        return Request<Web[]>("GET", `/link/all`);
+//         return Request<Web[]>("GET", `/link/all`);
-    }
+//     }
-};
+// };
+export const getLinkListAPI = getListAPI<Web>("/link")
 
 // 获取网站类型列表
 export const getLinkTypeListAPI = () => {

src/components/Sidebar/index.tsx

@@ -5,7 +5,8 @@ import { BiEditAlt, BiFolderOpen, BiHomeSmile, BiSliderAlt } from "react-icons/b
 import { LuCrown } from "react-icons/lu";
 import { BiCategoryAlt, BiBug } from "react-icons/bi";
 import { LiaRssSolid } from "react-icons/lia";
-import { IoIosStats } from "react-icons/io";
+import { BiLineChart } from "react-icons/bi";
+import { BiShieldQuarter } from "react-icons/bi";
 
 interface SidebarProps {
   sidebarOpen: boolean;
@@ -245,6 +246,30 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                               轮播图管理
                             </NavLink>
                           </li>
+
+                          <li>
+                            <NavLink
+                              to="/user"
+                              className={({ isActive }) =>
+                                'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +
+                                (isActive && '!text-white')
+                              }
+                            >
+                              用户管理
+                            </NavLink>
+                          </li>
+
+                          <li>
+                            <NavLink
+                              to="/role"
+                              className={({ isActive }) =>
+                                'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +
+                                (isActive && '!text-white')
+                              }
+                            >
+                              角色管理
+                            </NavLink>
+                          </li>
                         </ul>
                       </div>
                       {/* <!-- Dropdown Menu End --> */}
@@ -253,6 +278,16 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                 }}
               </SidebarLinkGroup>
 
+              <li>
+                <NavLink
+                  to="/rights"
+                  className={`${sidebarItemSty} ${pathname.includes('rights') && sidebarItemActiveSty}`}
+                >
+                  <BiShieldQuarter className='text-[22px]' />
+                  权限
+                </NavLink>
+              </li>
+
               <li>
                 <NavLink
                   to="/setup"
@@ -299,7 +334,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                   className={`${sidebarItemSty} ${pathname.includes('stats') && 'bg-graydark dark:bg-meta-4'
                     }`}
                 >
-                  <IoIosStats className='text-[22px]' />
+                  <BiLineChart className='text-[22px]' />
                   数据可视化
                 </NavLink>
               </li>

src/pages/Article/index.tsx

@@ -29,7 +29,8 @@ const Article: React.FC = () => {
     };
 
     useEffect(() => {
-        getArticleList();
+        // getArticleList();
+        getArticleList()
     }, []);
 
     const delArticleData = async (id: number) => {

src/types/response.d.ts

@@ -17,4 +17,16 @@ interface Paginate<T> {
 interface Page {
     page?: number,
     size?: number,
-}
+}
+
+interface FilterData {
+    key?: string,
+    startDate?: number,
+    endDate?: number
+  }
+  
+  interface QueryData {
+    sort?: "asc" | "desc",
+    query?: FilterData,
+    pagination?: Page
+  }

src/utils/index.ts

@@ -0,0 +1,33 @@
+import Request from "@/utils/request";
+import { Article } from "@/types/app/article";
+
+// 对象转url参数
+export const ObjectToUrlParam = (obj: Object): string => {
+    return obj && new URLSearchParams(
+        Object.keys(obj).reduce((acc, key) => {
+            acc[key] = String(obj[key as keyof Object]);
+            return acc;
+        }, {} as Record<string, string>)
+    ).toString();
+}
+
+// 查询数据相关逻辑
+export const getListAPI = <T>(api: string) => {
+    return (data?: QueryData) => {
+        if (data?.pagination) {
+            let sort = data?.sort ? `?sort=${data?.sort}` : '?'
+            const query = ObjectToUrlParam(data?.query as FilterData) ? "&" + ObjectToUrlParam(data?.query as FilterData) : ''
+            const { page, size } = data.pagination
+            const pagination = page && size ? `&page=${page}&size=${size}` : page && !size ? `&page=${page}` : size && !page ? `&size=${size}` : ''
+            if (!query && !pagination) sort = ''
+
+            return Request<Paginate<T[]>>("GET", `${api}${sort}${pagination}${query}`);
+        } else {
+            let sort = data?.sort ? `?sort=${data?.sort}` : '?'
+            const query = ObjectToUrlParam(data?.query as FilterData) ? "&" + ObjectToUrlParam(data?.query as FilterData) : ''
+            if (!query) sort = ''
+
+            return Request<T[]>("GET", `${api}/all${sort}${query}`);
+        }
+    }
+};