feat: sync update

Author: wanpan11

.vscode/settings.json

@@ -5,6 +5,7 @@
     "cssnano",
     "datetime",
     "ianvs",
+    "Sider",
     "tailwindcss",
     "unocss"
   ]

src/components/FormFilter/index.tsx

@@ -1,7 +1,6 @@
 import type { FormInstance } from "antd";
 import type { FormListProps } from "../FormList";
 import { Button, Card } from "antd";
-
 import { memo, useRef } from "react";
 import FormList from "../FormList";
 
@@ -12,10 +11,11 @@ export interface FormFilterProps extends Pick<FormListProps, "form" | "onOk" | "
   loading?: boolean;
   compact?: boolean;
   searchBtn?: boolean;
+  onRefresh?: () => void;
 }
 
 function FormFilter(props: FormFilterProps) {
-  const { className, filterInfo, reset, loading, compact = false, searchBtn = true, onForm, ...resetProps } = props;
+  const { className, filterInfo, reset, loading, compact = false, searchBtn = true, onForm, onRefresh, ...resetProps } = props;
 
   const formInstance = useRef<FormInstance<any> | null>(null);
 
@@ -28,6 +28,12 @@ function FormFilter(props: FormFilterProps) {
     <div className={compact ? "ml-10" : "absolute bottom-0 right-0"}>
       {reset ? <Button htmlType="reset">重置</Button> : null}
 
+      {onRefresh && (
+        <Button className="ml-6" loading={loading} onClick={onRefresh}>
+          刷新
+        </Button>
+      )}
+
       <Button className="ml-6" htmlType="submit" type="primary" loading={loading}>
         查询
       </Button>

src/components/LazyLoadSelect.tsx

@@ -1,28 +1,24 @@
 import type { ResponseList } from "&src/types/api";
-import type { AnyObject, PagingSwrProps } from "@wanp/use-swr-data";
+import type { PagingSwrProps } from "@wanp/use-swr-data";
 import type { SelectProps } from "antd";
-
 import useSwrData from "@wanp/use-swr-data";
 import { Select, Spin } from "antd";
 import debounce from "lodash/debounce";
 import { useEffect, useMemo, useState } from "react";
 
-interface LazyLoadSelectProps<P extends AnyObject, R extends ResponseList<any>> {
-  value?: SelectProps["value"];
-  searchKey: string;
+interface LazyLoadSelectProps<P extends AnyObject, R extends ResponseList<any>> extends Pick<SelectProps, "fieldNames" | "onChange" | "value" | "disabled"> {
+  reqKey: string;
   reqFunc: PagingSwrProps<R, P>["req"];
-  fieldNames?: SelectProps["fieldNames"];
   reqParams?: PagingSwrProps<R, P>["params"];
-  onChange?: SelectProps["onChange"];
+  searchKey?: string;
 }
 
 export default function LazyLoadSelect<P extends AnyObject, R extends ResponseList<any>>(props: LazyLoadSelectProps<P, R>) {
-  const { value, fieldNames, searchKey = "name", reqParams, reqFunc, onChange } = props;
-
+  const { reqKey, reqFunc, reqParams, searchKey, onChange, ...reset } = props;
   const [list, setList] = useState<any[]>([]);
 
   const { data, pageInfo, onSearch, setPage } = useSwrData({
-    reqKey: reqFunc.name,
+    reqKey,
     req: reqFunc,
     params: reqParams,
     paging: true,
@@ -66,6 +62,9 @@ export default function LazyLoadSelect<P extends AnyObject, R extends ResponseLi
   }, [list, data, pageInfo]);
 
   const onSearchData = debounce((value) => {
+    if (!searchKey)
+      return;
+
     onSearch({ [searchKey]: value } as PagingSwrProps["defaultSearch"]);
     setList([]);
   }, 500);
@@ -75,13 +74,11 @@ export default function LazyLoadSelect<P extends AnyObject, R extends ResponseLi
 
   return (
     <Select
-      showSearch
       allowClear
-      value={value}
       filterOption={false}
       options={displayList}
-      fieldNames={fieldNames}
-      onSearch={onSearchData}
+      showSearch={!!searchKey}
+      onSearch={searchKey ? onSearchData : undefined}
       onPopupScroll={(e) => {
         const container = e.target as HTMLDivElement;
         const scrollTop = container?.scrollTop;
@@ -91,9 +88,10 @@ export default function LazyLoadSelect<P extends AnyObject, R extends ResponseLi
           onloadData();
       }}
       onChange={(value) => {
-        onSearch({ [searchKey]: "" } as PagingSwrProps["defaultSearch"]);
+        onSearch({});
         onChange?.(value);
       }}
+      {...reset}
     />
   );
 }

src/components/Loading/index.tsx

@@ -1,4 +1,4 @@
-import { Layout, Spin } from "antd";
+import { Spin } from "antd";
 import classnames from "classnames";
 import { memo } from "react";
 
@@ -11,15 +11,10 @@ interface LoadingProps {
 
 function Loading({ full, text, size, className }: LoadingProps) {
   return (
-    <Layout
-      className={classnames(className, "flex items-center justify-center", {
-        "h-screen": full,
-        "bg-transparent": !full,
-      })}
-    >
+    <div className={classnames({ "size-full": full }, "flex items-center justify-center", className)}>
       <Spin size={size} />
       <div className="mt-3 text-primary">{text}</div>
-    </Layout>
+    </div>
   );
 }
 

src/components/tools.tsx

@@ -1,8 +1,9 @@
+import type { ReactNode } from "react";
 import { Checkbox, DatePicker, Input, InputNumber, Radio, Select, Switch, TreeSelect } from "antd";
 
 const { RangePicker } = DatePicker;
 
-export function getFormElement(type: FormItem["type"], info: FormItem) {
+export function getFormElement(type: FormItem["type"], info: FormItem): ReactNode {
   switch (type) {
     case "radio":
       return (
@@ -35,11 +36,11 @@ export function getFormElement(type: FormItem["type"], info: FormItem) {
         <Select
           showSearch
           allowClear
+          className="min-w-36"
           mode={info.otherOptions?.mode}
           placeholder={info.placeholder}
           disabled={info.disable}
           options={info.options as { value: string }[]}
-          className="min-w-[150px]"
           filterOption={(input, option: any) => {
             if (typeof option.label === "string") {
               return option.label.includes(input);
@@ -82,5 +83,8 @@ export function getFormElement(type: FormItem["type"], info: FormItem) {
           {...info.otherOptions}
         />
       );
+
+    default:
+      return null;
   }
 }

src/layout/header.tsx

@@ -3,20 +3,21 @@ import dark_img from "&src/assets/images/dark.svg";
 import light_img from "&src/assets/images/light.svg";
 import useRootStore from "&src/store";
 import { UserOutlined } from "@ant-design/icons";
-import { Avatar, Dropdown, Layout } from "antd";
+import { Avatar, Dropdown } from "antd";
 
 import classnames from "classnames";
 import { useNavigate } from "react-router-dom";
 import { useShallow } from "zustand/react/shallow";
 import lessStyle from "./index.module.less";
 
-const { Header } = Layout;
-
 interface MenuHeaderProps {
   tabId: string;
   tabList: MenuItem[];
 }
 
+const headClass = "z-[999] box-border flex h-14 items-center justify-between p-7 py-3 shadow-ch";
+const tabItemClass = "relative mx-4 h-14 cursor-pointer select-none px-3 text-base leading-[3.5rem]";
+
 function MenuHeader({ tabId, tabList }: MenuHeaderProps) {
   const navigate = useNavigate();
   const { userInfo, darkMode, setLogin, setDarkMode } = useRootStore(
@@ -52,66 +53,66 @@ function MenuHeader({ tabId, tabList }: MenuHeaderProps) {
   };
 
   return (
-    <Header className={`relative z-[999] box-border flex h-14 items-center justify-between p-7 py-3 shadow-ch ${darkMode ? "bg-slate-900" : "bg-white"} `}>
+    <div className={classnames(headClass, darkMode ? "bg-slate-900 text-white" : "bg-white")}>
       <div className="flex items-center">
         <h1 className="mr-28 flex items-center text-lg">
           <img alt="logo" className="mr-2 w-8" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
-          管理系统
+          <span>管理系统</span>
         </h1>
 
         {tabList.map((e) => {
           return (
-            <div
+            <ul
               key={e.key}
               onClick={() => {
                 itemClick(e.path);
               }}
-              className={classnames("relative mx-4 h-14 cursor-pointer select-none px-3 text-base leading-[56px]", {
+              className={classnames(tabItemClass, {
                 [`${lessStyle.tabItem_active} text-primary`]: e.key === tabId,
               })}
             >
-              {e.label}
+              <li>{e.label}</li>
 
               <div className={lessStyle.line}></div>
-            </div>
+            </ul>
           );
         })}
       </div>
 
-      <div className="flex items-center">
-        <div className="mr-10 flex w-5 cursor-pointer items-center">
+      <div className="flex items-center gap-10">
+        <div className="flex w-5 cursor-pointer items-center">
           {darkMode
             ? (
                 <img
+                  alt="暗黑模式"
                   src={dark_img}
                   className="w-full"
-                  alt="暗黑模式"
                   onClick={() => {
                     setDarkMode(false);
                   }}
                 />
               )
             : (
                 <img
+                  alt="明亮模式"
                   src={light_img}
                   className="w-full"
-                  alt="明亮模式"
                   onClick={() => {
                     setDarkMode(true);
                   }}
                 />
               )}
         </div>
 
-        <Dropdown menu={{ items }} placement="bottomRight" className="cursor-pointer" arrow={{ pointAtCenter: false }}>
-          <div className="flex items-center leading-[32px]">
-            <div className="mr-3">{userInfo?.account}</div>
+        <Dropdown menu={{ items }} placement="bottomRight" arrow={{ pointAtCenter: false }}>
+          <div className="flex h-8 cursor-pointer items-center gap-3">
+            <div>{userInfo?.account}</div>
 
             <Avatar icon={<UserOutlined />} />
           </div>
         </Dropdown>
       </div>
-    </Header>
+    </div>
   );
 }
 

src/layout/index.tsx

@@ -99,7 +99,7 @@ function AppLayout({ children }: { children: React.ReactNode }) {
             {sideMenu.length ? <SiderCom selectKey={menuId} menu={sideMenu} /> : null}
 
             <Layout>
-              <Content className="m-3 my-0">
+              <Content className="mx-3">
                 <BreadCrumb routerPath={routerPathMapping} />
 
                 <div className="h-[calc(100%-4.5rem)] overflow-auto">{children}</div>
@@ -112,4 +112,8 @@ function AppLayout({ children }: { children: React.ReactNode }) {
   );
 }
 
+if (process.env.PUBLIC_ENV === "development") {
+  AppLayout.displayName = "AppLayout";
+}
+
 export default AppLayout;

src/main.tsx

@@ -12,5 +12,5 @@ const root = createRoot(dom);
 root.render(
   <StrictMode>
     <AppRouter />
-  </StrictMode>
+  </StrictMode>,
 );

src/pages/index.tsx

@@ -4,4 +4,8 @@ function System({ children }: RoutePageProps) {
   return <Layout>{children}</Layout>;
 }
 
+if (process.env.PUBLIC_ENV === "development") {
+  System.displayName = "System";
+}
+
 export default System;

src/pages/login/index.tsx

@@ -13,29 +13,40 @@ import lessStyle from "./index.module.less";
 
 function Login() {
   const navigate = useNavigate();
-  const { setLogin, setDynamicRoutes } = useRootStore(useShallow(store => ({ setLogin: store.setLogin, setDynamicRoutes: store.setDynamicRoutes })));
-
-  const [loading, loadingHandle] = useState(false);
+  const { setLogin, setDynamicRoutes } = useRootStore(
+    useShallow(store => ({
+      setLogin: store.setLogin,
+      setDynamicRoutes: store.setDynamicRoutes,
+    }))
+  );
 
+  const [loading, setLoading] = useState(false);
   const onFinish = async (values: AccountApi.Login) => {
-    loadingHandle(true);
-    const res = await loginReq(values);
-    localStorage.setItem(LOCAL_TOKEN, res.data.token);
-    localStorage.setItem(LOCAL_USER_INFO, JSON.stringify(res.data.userInfo));
-    localStorage.setItem(LOCAL_DYNAMIC_ROUTER, JSON.stringify(GLOBAL_ROUTERS.APP_PAGE));
+    try {
+      setLoading(true);
+      const res = await loginReq(values);
+      localStorage.setItem(LOCAL_TOKEN, res.data.token);
+      localStorage.setItem(LOCAL_USER_INFO, JSON.stringify(res.data.userInfo));
+      localStorage.setItem(LOCAL_DYNAMIC_ROUTER, JSON.stringify(GLOBAL_ROUTERS.APP_PAGE));
 
-    // 设置登录态 用户信息 动态路由配置
-    setLogin({ login: true, userInfo: res.data.userInfo });
-    setDynamicRoutes(GLOBAL_ROUTERS.APP_PAGE);
-    loadingHandle(false);
-    navigate("/");
+      // 设置登录态 用户信息 动态路由配置
+      setLogin({ login: true, userInfo: res.data.userInfo });
+      setDynamicRoutes(GLOBAL_ROUTERS.APP_PAGE);
+      setLoading(false);
+      navigate("/");
+    }
+    catch {
+      setLoading(false);
+    }
   };
 
+  // 已登录则跳转到首页
   useEffect(() => {
     if (getLocalStorage(LOCAL_TOKEN)) {
       navigate("/");
     }
-  }, [navigate]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <Layout className={lessStyle.content}>
@@ -44,7 +55,14 @@ function Login() {
 
         <h1 className="mb-9 text-center text-2xl">欢迎登录</h1>
 
-        <Form name="basic" layout="vertical" onFinish={onFinish} requiredMark="optional" initialValues={{ account: "管理小明", password: "123" }} className="w-80">
+        <Form
+          name="basic"
+          className="w-80"
+          layout="vertical"
+          onFinish={onFinish}
+          requiredMark="optional"
+          initialValues={{ account: "管理小明", password: "123" }}
+        >
           <Form.Item label="账号" name="account" rules={[{ required: true, message: "请输入你的账号!" }]}>
             <Input className={lessStyle.login_input} placeholder="请输入你的账号" />
           </Form.Item>