feat: add layer update eslint FormItem (#24)

* feat: update FormItem

* feat: add layer update eslint

* feat: update dark-mode style

Author: wanpan11

.vscode/settings.json

@@ -2,6 +2,7 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "cSpell.words": [
     "attributify",
+    "cssinjs",
     "cssnano",
     "datetime",
     "ianvs",

eslint.config.mjs

@@ -3,7 +3,24 @@ import tailwind from "eslint-plugin-tailwindcss";
 
 export default antfu(
   {
-    formatters: false,
+    formatters: {
+      /**
+       * Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
+       * By default uses Prettier
+       */
+      css: true,
+      /**
+       * Format HTML files
+       * By default uses Prettier
+       */
+      html: true,
+      /**
+       * Format Markdown files
+       * Supports Prettier and dprint
+       * By default uses Prettier
+       */
+      markdown: "prettier"
+    },
     react: true,
     ignores: ["**/*.md"],
     typescript: {

package.json

@@ -21,6 +21,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^2.0.1",
     "@ant-design/icons": "^6.1.0",
     "@babel/runtime": "^7.24.0",
     "@wanp/use-swr-data": "^1.0.6",
@@ -58,9 +59,9 @@
     "dotenv": "^16.4.5",
     "eslint": "^9.39.1",
     "eslint-plugin-format": "^1.0.2",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-tailwindcss": "^3.18.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-tailwindcss": "^3.18.2",
     "html-webpack-plugin": "^5.6.0",
     "husky": "^8.0.3",
     "less": "^4.2.0",

src/assets/css/init.css

@@ -1,4 +1,9 @@
-@tailwind base;
+@layer tailwind-base, antd;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+
 @tailwind components;
 @tailwind utilities;
 
@@ -8,17 +13,3 @@ body,
   height: 100%;
   width: 100%;
 }
-
-body,
-ul,
-li {
-  margin: 0;
-  padding: 0;
-}
-
-*,
-::before,
-::after {
-  border-width: 0;
-  border-style: solid;
-}

src/components/FormList/index.tsx

@@ -1,7 +1,7 @@
 import type { FormInstance, FormProps } from "antd";
 import type { ReactElement } from "react";
 import { Button, Form } from "antd";
-import { memo, useEffect, useMemo } from "react";
+import { Fragment, memo, useEffect, useMemo } from "react";
 
 import { getFormElement } from "../tools";
 
@@ -111,7 +111,7 @@ function FormList(props: FormListProps) {
         }
 
         if (e.type === "blockNode") {
-          return <span key={key}>{e.label}</span>;
+          return <Fragment key={key}>{e.label}</Fragment>;
         }
 
         return (

src/components/FormModal/index.tsx

@@ -50,7 +50,7 @@ function FormModal(props: FormModalProps) {
       footer={noFooter ? null : undefined}
       classNames={classNames || {
         body: "pt-6",
-        header: "border-b border-black/10 border-solid pb-3",
+        header: "border-b border-black/10 border-solid pb-3 dark:border-white/20",
       }}
       afterClose={() => {
         formInstance.current && formInstance.current.resetFields();

src/components/LazyLoadSelect.tsx

@@ -35,6 +35,7 @@ export default function LazyLoadSelect<P extends AnyObject, R extends ResponseLi
       return;
 
     if (data?.pageNum > 1) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setList(draft => [...draft, ...data.list]);
     }
     else {

src/components/tools.tsx

@@ -19,8 +19,8 @@ export function getFormElement(type: FormItem["type"], info: FormItem): ReactNod
     case "checkbox":
       return <Checkbox.Group style={{ width: "100%" }} options={info.options || []} {...info.otherOptions} />;
 
-    case "node":
-      return info.rightNode;
+    case "inputNode":
+      return info.inputNode;
 
     case "switch":
       return <Switch size="small" disabled={info.disable} {...info.otherOptions} />;

src/formIten.d.ts

@@ -8,11 +8,24 @@ declare interface FormItem {
   visible?: boolean;
   disable?: boolean;
   extra?: string | React.ReactNode;
-  type: "input" | "numberInput" | "select" | "treeSelect" | "datePick" | "rangePick" | "radio" | "checkbox" | "textArea" | "switch" | "blockNode" | "node";
+  type:
+    "input"
+    | "textArea"
+    | "numberInput"
+    | "select"
+    | "treeSelect"
+    | "radio"
+    | "switch"
+    | "checkbox"
+    | "datePick"
+    | "rangePick"
+  // 特有属性
+    | "blockNode"
+    | "inputNode";
   valuePropName?: import("antd").FormItemProps["valuePropName"];
   formItemProps?: import("antd").FormItemProps;
   // 特有属性
-  rightNode?: React.ReactNode; // node
+  inputNode?: React.ReactNode; // 输入组件
   options?: { label: string | React.ReactNode; value: any }[];
   otherOptions?: Record<string, any>; // 组件额外属性
 }

src/layout/index.tsx

@@ -2,7 +2,7 @@ import BreadCrumb from "&src/components/BreadCrumb";
 import { COLOR_PRIMARY, SPLIT_FLAG } from "&src/config";
 import useRootStore, { useGetRouterConfig } from "&src/store";
 import { ConfigProvider, Layout, theme } from "antd";
-import { useMemo } from "react";
+import { useLayoutEffect, useMemo } from "react";
 import { Link, useLocation } from "react-router-dom";
 import MenuHeader from "./header";
 import SiderCom from "./sider";
@@ -88,9 +88,19 @@ function AppLayout({ children }: { children: React.ReactNode }) {
     token: { colorPrimary: COLOR_PRIMARY },
   };
 
+  // 设置 body 的 className 以应用暗黑模式样式
+  useLayoutEffect(() => {
+    if (darkMode) {
+      document.body.className = "dark";
+    }
+    else {
+      document.body.className = "";
+    }
+  }, [darkMode]);
+
   return (
     <ConfigProvider theme={currentThem}>
-      <Layout className={darkMode ? "dark" : ""}>
+      <Layout>
         <MenuHeader tabId={tabId} tabList={routerMenu} />
 
         <Layout className="h-[calc(100vh-3.5rem)] overflow-hidden">