From e403d5d038cf3067dc8d187689e2bc757e756c49 Mon Sep 17 00:00:00 2001
From: allence <lizhenq2009@gmail.com>
Date: Fri, 31 Mar 2023 11:18:52 +0800
Subject: [PATCH] refactor(web): sort tailwind css classname

---
 web/package-lock.json                         | 112 ++++++++++++++++--
 web/package.json                              |   4 +-
 web/prettier.config.cjs                       |   1 +
 web/src/components/ChargeButton/index.tsx     |  10 +-
 web/src/components/Content/index.tsx          |   2 +-
 web/src/components/DotBadge/index.tsx         |   2 +-
 web/src/components/EditableTable/index.tsx    |   2 +-
 web/src/components/Editor/JSONViewer.tsx      |  19 ++-
 web/src/components/FileTypeIcon/index.tsx     |   2 +-
 web/src/components/Grid/index.tsx             |   4 +-
 web/src/components/IconText/index.tsx         |   2 +-
 web/src/components/IconWrap/index.tsx         |   2 +-
 web/src/components/InputTag/index.tsx         |   2 +-
 web/src/components/Panel/index.tsx            |   2 +-
 web/src/components/Resize/index.tsx           |  12 +-
 web/src/layouts/Auth/index.tsx                |   4 +-
 web/src/layouts/Basic.tsx                     |   2 +-
 web/src/layouts/Function.tsx                  |   2 +-
 web/src/layouts/Header/index.tsx              |   4 +-
 web/src/pages/403.tsx                         |   6 +-
 web/src/pages/404.tsx                         |   6 +-
 .../pages/app/database/BottomPanel/index.tsx  |   2 +-
 .../app/database/CollectionDataList/index.tsx |   2 +-
 .../mods/ColPanel/index.tsx                   |   6 +-
 .../mods/DataPanel/index.tsx                  |  12 +-
 .../mods/IndexPanel/index.tsx                 |   4 +-
 .../database/CollectionListPanel/index.tsx    |  12 +-
 .../app/database/PolicyDataList/index.tsx     |  22 ++--
 .../app/database/PolicyListPanel/index.tsx    |   4 +-
 .../database/RightComponent/DeleteButton.tsx  |   2 +-
 .../app/database/RightComponent/EditBox.tsx   |   6 +-
 .../app/database/RightComponent/List.tsx      |   6 +-
 web/src/pages/app/database/index.tsx          |   2 +-
 .../mods/DeleteCollectionModal/index.tsx      |   2 +-
 .../app/functions/mods/BottomPanel/index.tsx  |   2 +-
 .../app/functions/mods/ConsolePanel/index.tsx |   4 +-
 .../mods/DebugPanel/BodyParamsTab/index.tsx   |   4 +-
 .../mods/DebugPanel/HeaderParamsTab/index.tsx |   2 +-
 .../mods/DebugPanel/QueryParamsTab/index.tsx  |   2 +-
 .../app/functions/mods/DebugPanel/index.tsx   |   6 +-
 .../AddDependenceModal/index.tsx              |   4 +-
 .../functions/mods/DependencePanel/index.tsx  |  14 +--
 .../EditorPanel/FunctionDetailPopOver.tsx     |   4 +-
 .../app/functions/mods/EditorPanel/index.tsx  |  12 +-
 .../FunctionPanel/CreateModal/PromptModal.tsx |   2 +-
 .../functions/mods/FunctionPanel/index.tsx    |  10 +-
 .../TriggerModal/AddTriggerModal/index.tsx    |   2 +-
 .../app/functions/mods/TriggerModal/index.tsx |   8 +-
 web/src/pages/app/logs/index.tsx              |  18 +--
 .../pages/app/setting/AppEnvList/index.tsx    |   4 +-
 .../setting/AppInfoList/InfoDetail/index.tsx  |   6 +-
 .../pages/app/setting/AppInfoList/index.tsx   |   6 +-
 web/src/pages/app/setting/PATList/index.tsx   |   2 +-
 .../app/setting/UserInfo/AuthDetail/index.tsx |  12 +-
 web/src/pages/app/setting/UserInfo/index.tsx  |  12 +-
 web/src/pages/app/setting/index.tsx           |   2 +-
 web/src/pages/app/storages/index.tsx          |   4 +-
 .../mods/CreateWebsiteModal/index.tsx         |   6 +-
 .../storages/mods/DeleteBucketModal/index.tsx |   4 +-
 .../app/storages/mods/FileList/index.tsx      |  10 +-
 .../storages/mods/StorageListPanel/index.tsx  |   6 +-
 .../app/storages/mods/UploadButton/index.tsx  |   2 +-
 web/src/pages/auth/reset-password/index.tsx   |  10 +-
 web/src/pages/auth/signin/index.tsx           |   6 +-
 .../mods/LoginByPasswordPanel/index.tsx       |   4 +-
 .../signin/mods/LoginByPhonePanel/index.tsx   |   4 +-
 web/src/pages/auth/signup/index.tsx           |  16 +--
 web/src/pages/home/index.tsx                  |   2 +-
 .../mods/CreateAppModal/BundleItem/index.tsx  |   8 +-
 .../mods/CreateAppModal/RuntimeItem/index.tsx |   2 +-
 .../pages/home/mods/CreateAppModal/index.tsx  |   8 +-
 web/src/pages/home/mods/Empty/index.tsx       |   8 +-
 web/src/pages/home/mods/List/index.tsx        |  22 ++--
 73 files changed, 326 insertions(+), 218 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index ba5593f0ee..5aeca8593b 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -52,9 +52,11 @@
         "eslint-config-react-app": "^7.0.1",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "husky": "^8.0.3",
+        "install": "^0.13.0",
         "lint-staged": "^13.2.0",
         "postcss": "^8.4.21",
-        "prettier": "^2.8.6",
+        "prettier": "^2.8.7",
+        "prettier-plugin-tailwindcss": "^0.2.6",
         "tailwindcss": "^3.2.7",
         "typescript": "4.9.5",
         "vite": "^4.2.1"
@@ -6913,6 +6915,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/install": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmmirror.com/install/-/install-0.13.0.tgz",
+      "integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.4.tgz",
@@ -8329,9 +8340,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.6",
-      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.6.tgz",
-      "integrity": "sha512-mtuzdiBbHwPEgl7NxWlqOkithPyp4VN93V7VeHVWBF+ad3I5avc0RVDT4oImXQy9H/AqxA2NSQH8pSxHW6FYbQ==",
+      "version": "2.8.7",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.7.tgz",
+      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -8340,6 +8351,80 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmmirror.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.6.tgz",
+      "integrity": "sha512-F+7XCl9RLF/LPrGdUMHWpsT6TM31JraonAUyE6eBmpqymFvDwyl0ETHsKFHP1NG+sEfv8bmKqnTxEbWQbHPlBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-php": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@shufo/prettier-plugin-blade": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": ">=2.2.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*",
+        "prettier-plugin-twig-melody": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-php": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@shufo/prettier-plugin-blade": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
@@ -14754,6 +14839,12 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "install": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmmirror.com/install/-/install-0.13.0.tgz",
+      "integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==",
+      "dev": true
+    },
     "internal-slot": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.4.tgz",
@@ -15776,11 +15867,18 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.8.6",
-      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.6.tgz",
-      "integrity": "sha512-mtuzdiBbHwPEgl7NxWlqOkithPyp4VN93V7VeHVWBF+ad3I5avc0RVDT4oImXQy9H/AqxA2NSQH8pSxHW6FYbQ==",
+      "version": "2.8.7",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.7.tgz",
+      "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==",
       "dev": true
     },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmmirror.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.6.tgz",
+      "integrity": "sha512-F+7XCl9RLF/LPrGdUMHWpsT6TM31JraonAUyE6eBmpqymFvDwyl0ETHsKFHP1NG+sEfv8bmKqnTxEbWQbHPlBA==",
+      "dev": true,
+      "requires": {}
+    },
     "prismjs": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
diff --git a/web/package.json b/web/package.json
index f0fee58c1d..4c67d38e54 100644
--- a/web/package.json
+++ b/web/package.json
@@ -57,9 +57,11 @@
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
+    "install": "^0.13.0",
     "lint-staged": "^13.2.0",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.6",
+    "prettier": "^2.8.7",
+    "prettier-plugin-tailwindcss": "^0.2.6",
     "tailwindcss": "^3.2.7",
     "typescript": "4.9.5",
     "vite": "^4.2.1"
diff --git a/web/prettier.config.cjs b/web/prettier.config.cjs
index 1e262534c1..b2048cc562 100644
--- a/web/prettier.config.cjs
+++ b/web/prettier.config.cjs
@@ -3,4 +3,5 @@ module.exports = {
   tabWidth: 2,
   trailingComma: "all",
   semi: true,
+  plugins: [require("prettier-plugin-tailwindcss")],
 };
diff --git a/web/src/components/ChargeButton/index.tsx b/web/src/components/ChargeButton/index.tsx
index e5a52a5d99..483a9fc49c 100644
--- a/web/src/components/ChargeButton/index.tsx
+++ b/web/src/components/ChargeButton/index.tsx
@@ -75,10 +75,10 @@ export default function ChargeButton(props: { amount?: number; children: React.R
           <ModalBody px="10" pb="10">
             <div className="flex flex-col items-center text-xl">
               <h2 className="text-second">{t("Balance")}</h2>
-              <h3 className="text-3xl font-semibold mb-4">
+              <h3 className="mb-4 text-3xl font-semibold">
                 {formatPrice(accountQuery.data?.balance)}
               </h3>
-              <p className="text-second mb-2">{t("Recharge amount")}</p>
+              <p className="mb-2 text-second">{t("Recharge amount")}</p>
               <InputGroup>
                 <InputLeftAddon children="¥" />
                 <Input
@@ -107,17 +107,17 @@ export default function ChargeButton(props: { amount?: number; children: React.R
             </div>
 
             {createChargeOrder.data?.data?.result?.code_url && (
-              <div className="flex flex-col items-center text-xl mt-4">
+              <div className="mt-4 flex flex-col items-center text-xl ">
                 <h2 className="mb-2">{t("Scan with WeChat")}</h2>
                 <QRCodeSVG
                   value={createChargeOrder.data?.data?.result?.code_url}
                   width={180}
                   height={180}
                 />
-                <p className="text-base mt-4 text-second ">
+                <p className="mt-4 text-base text-second ">
                   {t("Order Number")}：{createChargeOrder.data?.data?.order?.id}
                 </p>
-                <p className="text-base mt-1 text-second ">
+                <p className="mt-1 text-base text-second ">
                   {t("payment status")}: {phaseStatus}
                 </p>
               </div>
diff --git a/web/src/components/Content/index.tsx b/web/src/components/Content/index.tsx
index 97e21757e8..32c86e01a7 100644
--- a/web/src/components/Content/index.tsx
+++ b/web/src/components/Content/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
 
 export default function Content(props: { children: React.ReactNode }) {
-  return <div className="flex-1 flex flex-col overflow-hidden space-y-2">{props.children}</div>;
+  return <div className="flex flex-1 flex-col space-y-2 overflow-hidden">{props.children}</div>;
 }
diff --git a/web/src/components/DotBadge/index.tsx b/web/src/components/DotBadge/index.tsx
index 5488214cba..dc2e3d91e9 100644
--- a/web/src/components/DotBadge/index.tsx
+++ b/web/src/components/DotBadge/index.tsx
@@ -31,7 +31,7 @@ export default function DotBadge({
   }
   return (
     <Box>
-      <span className={"inline-block w-[6px] h-[6px] rounded-full mr-1 " + bgColor}></span>
+      <span className={"mr-1 inline-block h-[6px] w-[6px] rounded-full " + bgColor}></span>
       <span className={color}>{text}</span>
     </Box>
   );
diff --git a/web/src/components/EditableTable/index.tsx b/web/src/components/EditableTable/index.tsx
index d2f4b3a5cb..79034eb951 100644
--- a/web/src/components/EditableTable/index.tsx
+++ b/web/src/components/EditableTable/index.tsx
@@ -80,7 +80,7 @@ const EditableTable = function (props: {
   return (
     <>
       <div
-        className={clsx("rounded-t-md relative border border-b-0", {
+        className={clsx("relative rounded-t-md border border-b-0", {
           "border-frostyNightfall-200": !darkMode,
         })}
       >
diff --git a/web/src/components/Editor/JSONViewer.tsx b/web/src/components/Editor/JSONViewer.tsx
index 474183c904..fb251df041 100644
--- a/web/src/components/Editor/JSONViewer.tsx
+++ b/web/src/components/Editor/JSONViewer.tsx
@@ -243,12 +243,19 @@ export default function JSONViewer(props: JSONViewerProps) {
   };
 
   return (
-    <SyntaxHighlighter
-      language={language}
-      style={colorMode === "dark" ? JSONViewerDarkStyle : JSONViewerStyle}
-      customStyle={colorMode === "dark" ? darkTheme : lightTheme}
+    <div
+      style={{
+        maxHeight: 100,
+        overflow: "hidden",
+      }}
     >
-      {code}
-    </SyntaxHighlighter>
+      <SyntaxHighlighter
+        language={language}
+        style={colorMode === "dark" ? JSONViewerDarkStyle : JSONViewerStyle}
+        customStyle={colorMode === "dark" ? darkTheme : lightTheme}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
   );
 }
diff --git a/web/src/components/FileTypeIcon/index.tsx b/web/src/components/FileTypeIcon/index.tsx
index 45d93915ba..c92c1b2dc7 100644
--- a/web/src/components/FileTypeIcon/index.tsx
+++ b/web/src/components/FileTypeIcon/index.tsx
@@ -38,7 +38,7 @@ export default function FileTypeIcon(props: { type: string; className?: string }
   switch (type) {
     case FileType.app:
       return (
-        <Icon viewBox="0 0 22 22" fontSize={24} className={clsx("align-middle ", className)}>
+        <Icon viewBox="0 0 22 22" fontSize={20} className={clsx("align-middle ", className)}>
           <mask
             id="mask0_2744_5395"
             style={{ maskType: "alpha" }}
diff --git a/web/src/components/Grid/index.tsx b/web/src/components/Grid/index.tsx
index 7cf4fc8aee..9d781cf29d 100644
--- a/web/src/components/Grid/index.tsx
+++ b/web/src/components/Grid/index.tsx
@@ -40,8 +40,8 @@ function Col(props: {
   return (
     <div
       className={clsx(
-        "flex flex-col h-full overflow-x-hidden",
-        style?.width ? "flex-none" : "flex-grow flex-1 overflow-hidden",
+        "flex h-full flex-col overflow-x-hidden",
+        style?.width ? "flex-none" : "flex-1 flex-grow overflow-hidden",
         className,
       )}
       style={style}
diff --git a/web/src/components/IconText/index.tsx b/web/src/components/IconText/index.tsx
index 02f87065e9..fd2a42425d 100644
--- a/web/src/components/IconText/index.tsx
+++ b/web/src/components/IconText/index.tsx
@@ -13,7 +13,7 @@ export default function IconText(props: {
   return (
     <div
       onClick={props.onClick}
-      className={clsx("text-grayIron-600 flex flex-col items-center", {
+      className={clsx("flex flex-col items-center text-grayIron-600", {
         "hover:text-black": !darkMode,
         "hover:text-white": darkMode,
       })}
diff --git a/web/src/components/IconWrap/index.tsx b/web/src/components/IconWrap/index.tsx
index 8e30640c0b..4af9b639cc 100644
--- a/web/src/components/IconWrap/index.tsx
+++ b/web/src/components/IconWrap/index.tsx
@@ -18,7 +18,7 @@ export default function IconWrap(props: {
     <Tooltip label={tooltip} placement={placement}>
       <Center
         onClick={props.onClick}
-        className={clsx("rounded-full inline-block cursor-pointer ", className, {
+        className={clsx("inline-block cursor-pointer rounded-full ", className, {
           "hover:bg-lafWhite-600": !darkMode && !showBg,
           "bg-lafWhite-600": !darkMode && showBg,
           "hover:bg-lafDark-300": darkMode && !showBg,
diff --git a/web/src/components/InputTag/index.tsx b/web/src/components/InputTag/index.tsx
index ed6a8ced1e..ac25d89855 100644
--- a/web/src/components/InputTag/index.tsx
+++ b/web/src/components/InputTag/index.tsx
@@ -24,7 +24,7 @@ export default function InputTag(props: { value: string[]; onChange: (value: str
   return (
     <div
       className={clsx(
-        "flex items-center p-2 rounded-md ",
+        "flex items-center rounded-md p-2 ",
         darkMode ? "bg-gray-800" : "bg-gray-100",
       )}
     >
diff --git a/web/src/components/Panel/index.tsx b/web/src/components/Panel/index.tsx
index 4b221e1c6b..2a89fe8d62 100644
--- a/web/src/components/Panel/index.tsx
+++ b/web/src/components/Panel/index.tsx
@@ -17,7 +17,7 @@ const Panel = (props: {
       style={style}
       bg={bg}
       onClick={onClick}
-      className={clsx("rounded px-4 flex flex-col w-full", className)}
+      className={clsx("flex w-full flex-col rounded px-4", className)}
     >
       {props.children}
     </Box>
diff --git a/web/src/components/Resize/index.tsx b/web/src/components/Resize/index.tsx
index 0e4d05db5f..77e42e4f9c 100644
--- a/web/src/components/Resize/index.tsx
+++ b/web/src/components/Resize/index.tsx
@@ -41,16 +41,16 @@ export default function Resize(props: {
       {display === "none" ? null : (
         <div
           className={
-            type === "x" ? "h-full w-2 cursor-col-resize group" : "h-2 w-full cursor-row-resize"
+            type === "x" ? "group h-full w-2 cursor-col-resize" : "h-2 w-full cursor-row-resize"
           }
           {...separatorProps}
         >
-          <Center className="w-full h-full relative">
+          <Center className="relative h-full w-full">
             {type === "x" && width <= 20 ? (
               <div
                 className={clsx(
                   reverse ? "rounded-l-lg" : "rounded-r-lg",
-                  "w-2 h-[30px] bg-grayIron-300 group-hover:bg-grayIron-400 transition-colors leading-loose text-lafWhite-600",
+                  "h-[30px] w-2 bg-grayIron-300 leading-loose text-lafWhite-600 transition-colors group-hover:bg-grayIron-400",
                 )}
               >
                 {reverse ? <ChevronLeftIcon fontSize={10} /> : <ChevronRightIcon fontSize={10} />}
@@ -61,15 +61,15 @@ export default function Resize(props: {
                   className={clsx(
                     type === "x" && isDragging ? "h-full " : "h-0",
                     type === "y" && isDragging ? "w-full " : "w-0",
-                    isDragging ? " border-primary-400 border" : "",
-                    "transition-all absolute z-10 overflow-hidden",
+                    isDragging ? " border border-primary-400" : "",
+                    "absolute z-10 overflow-hidden transition-all",
                   )}
                 ></div>
                 <Box
                   borderColor={borderColor}
                   className={clsx(
                     type === "x" ? "h-[18px]" : "w-[18px]",
-                    "border rounded absolute",
+                    "absolute rounded border",
                   )}
                 ></Box>
               </>
diff --git a/web/src/layouts/Auth/index.tsx b/web/src/layouts/Auth/index.tsx
index db4b31714b..4caa72c90c 100644
--- a/web/src/layouts/Auth/index.tsx
+++ b/web/src/layouts/Auth/index.tsx
@@ -6,8 +6,8 @@ export default function LoginReg() {
   return (
     <div className={styles.container}>
       <div className="absolute top-[120px] left-[120px]">
-        <div className="text-primary-600 text-[36px]">Welcome to laf !</div>
-        <div className="text-grayModern-500 text-[20px]">life is short, you need laf.</div>
+        <div className="text-[36px] text-primary-600">Welcome to laf !</div>
+        <div className="text-[20px] text-grayModern-500">life is short, you need laf.</div>
       </div>
       <Outlet />
     </div>
diff --git a/web/src/layouts/Basic.tsx b/web/src/layouts/Basic.tsx
index abf37f5b9a..110418fa4f 100644
--- a/web/src/layouts/Basic.tsx
+++ b/web/src/layouts/Basic.tsx
@@ -24,7 +24,7 @@ export default function BasicLayout() {
           <Outlet />
         )}
       </div>
-      <div className="text-center fixed -z-10 bottom-0 py-4 w-full">
+      <div className="fixed bottom-0 -z-10 w-full py-4 text-center">
         Made with <AiFillHeart className="inline text-red-500" />️ by laf team
       </div>
     </div>
diff --git a/web/src/layouts/Function.tsx b/web/src/layouts/Function.tsx
index fffd9bceec..8456e74baa 100644
--- a/web/src/layouts/Function.tsx
+++ b/web/src/layouts/Function.tsx
@@ -67,7 +67,7 @@ export default function FunctionLayout() {
             currentApp?.phase !== APP_PHASE_STATUS.Deleted ? (
               <div
                 className={clsx(
-                  "absolute top-0 bottom-0 left-0 right-0 z-[999] flex flex-col justify-center items-center  opacity-70 ",
+                  "absolute top-0 bottom-0 left-0 right-0 z-[999] flex flex-col items-center justify-center  opacity-70 ",
                   darkMode ? "bg-lafDark-100" : "bg-lafWhite-600",
                 )}
               >
diff --git a/web/src/layouts/Header/index.tsx b/web/src/layouts/Header/index.tsx
index d81c32d54a..07e7fb592d 100644
--- a/web/src/layouts/Header/index.tsx
+++ b/web/src/layouts/Header/index.tsx
@@ -16,7 +16,7 @@ export default function Header(props: { size: "sm" | "lg" }) {
   const { colorMode } = useColorMode();
 
   return (
-    <div className="flex justify-between px-10 py-4 h-[60px]">
+    <div className="flex h-[60px] justify-between px-10 py-4">
       <div className="flex items-center">
         <img
           src={colorMode === "dark" ? "/logo_light.png" : "/logo_text.png"}
@@ -26,7 +26,7 @@ export default function Header(props: { size: "sm" | "lg" }) {
         />
         <a
           href="https://github.com/labring/laf"
-          className="flex items-center ml-2 p-2 py-1 text-base text-gray-700 hover:text-black bg-white rounded-md"
+          className="ml-2 flex items-center rounded-md bg-white p-2 py-1 text-base text-gray-700 hover:text-black"
           target={"_blank"}
           rel="noreferrer"
         >
diff --git a/web/src/pages/403.tsx b/web/src/pages/403.tsx
index 3a4baf1e4b..79a01a8f41 100644
--- a/web/src/pages/403.tsx
+++ b/web/src/pages/403.tsx
@@ -6,10 +6,10 @@ import { t } from "i18next";
 export default function Index() {
   const navigate = useNavigate();
   return (
-    <div className=" bg-white h-screen">
-      <Center h="80vh" w="80vw" className="flex-col !items-start m-auto">
+    <div className=" h-screen bg-white">
+      <Center h="80vh" w="80vw" className="m-auto flex-col !items-start">
         <h1 style={{ fontSize: 38 }}>403</h1>
-        <p className="font-semibold mb-8" style={{ fontSize: 50 }}>
+        <p className="mb-8 font-semibold" style={{ fontSize: 50 }}>
           {t(`403Message`)}
         </p>
         <HStack spacing={6}>
diff --git a/web/src/pages/404.tsx b/web/src/pages/404.tsx
index 3ca1725260..3a4e834465 100644
--- a/web/src/pages/404.tsx
+++ b/web/src/pages/404.tsx
@@ -6,10 +6,10 @@ import { t } from "i18next";
 export default function Index() {
   const navigate = useNavigate();
   return (
-    <div className=" bg-white h-screen">
-      <Center h="80vh" w="80vw" className="flex-col !items-start m-auto">
+    <div className=" h-screen bg-white">
+      <Center h="80vh" w="80vw" className="m-auto flex-col !items-start">
         <h1 style={{ fontSize: 38 }}>404</h1>
-        <p className="font-semibold mb-8" style={{ fontSize: 60 }}>
+        <p className="mb-8 font-semibold" style={{ fontSize: 60 }}>
           {t(`404Message`)}
         </p>
         <HStack spacing={6}>
diff --git a/web/src/pages/app/database/BottomPanel/index.tsx b/web/src/pages/app/database/BottomPanel/index.tsx
index 36c568b06a..d10b6d6bee 100644
--- a/web/src/pages/app/database/BottomPanel/index.tsx
+++ b/web/src/pages/app/database/BottomPanel/index.tsx
@@ -9,7 +9,7 @@ function BottomPanel() {
   const store = useCustomSettingStore();
 
   return (
-    <Panel className=" justify-between !flex-row">
+    <Panel className=" !flex-row justify-between">
       <HStack spacing={2}>
         <Button
           size="xs"
diff --git a/web/src/pages/app/database/CollectionDataList/index.tsx b/web/src/pages/app/database/CollectionDataList/index.tsx
index 2a40a6a4f7..327d1fa1b8 100644
--- a/web/src/pages/app/database/CollectionDataList/index.tsx
+++ b/web/src/pages/app/database/CollectionDataList/index.tsx
@@ -17,7 +17,7 @@ export default function CollectionDataList() {
           <div>
             {t("CollectionPanel.EmptyCollectionText")}
             <CreateCollectionModal>
-              <span className="ml-2 text-primary-600 hover:border-b-2 hover:border-primary-600 cursor-pointer">
+              <span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
                 {t("CreateNow")}
               </span>
             </CreateCollectionModal>
diff --git a/web/src/pages/app/database/CollectionDataList/mods/ColPanel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/ColPanel/index.tsx
index 12c4175f64..de3670bce4 100644
--- a/web/src/pages/app/database/CollectionDataList/mods/ColPanel/index.tsx
+++ b/web/src/pages/app/database/CollectionDataList/mods/ColPanel/index.tsx
@@ -4,13 +4,13 @@ import { t } from "i18next";
 import JsonEditor from "@/components/Editor/JsonEditor";
 export default function ColPanel() {
   return (
-    <div className="h-full  relative group">
-      <div className="mb-2 justify-end flex">
+    <div className="group  relative h-full">
+      <div className="mb-2 flex justify-end">
         <Button size={"sm"} px="5" colorScheme="primary">
           {t("Save")}
         </Button>
       </div>
-      <div className="border p-2 rounded absolute top-12 bottom-0 left-0 right-0">
+      <div className="absolute top-12 bottom-0 left-0 right-0 rounded border p-2">
         <JsonEditor value={JSON.stringify({ name: "hello" })} />
       </div>
     </div>
diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
index 3fb5242479..aae00fa8d9 100644
--- a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
+++ b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
@@ -143,7 +143,7 @@ export default function DataPanel() {
 
   return (
     <>
-      <Panel.Header className="w-full h-[40px] flex-shrink-0">
+      <Panel.Header className="h-[40px] w-full flex-shrink-0">
         <div className="flex items-center">
           <AddDataModal
             schema={currentData.data ? currentData.data : {}}
@@ -188,7 +188,7 @@ export default function DataPanel() {
               refresh(search);
             }}
           >
-            <div className="flex justify-between my-4">
+            <div className="my-4 flex justify-between">
               <HStack spacing={2}>
                 <InputGroup className="mr-4" width="300px">
                   <InputLeftElement
@@ -223,13 +223,13 @@ export default function DataPanel() {
           }}
         />
       </Panel.Header>
-      <div className="w-full flex flex-grow overflow-hidden">
+      <div className="flex w-full flex-grow overflow-hidden">
         {entryDataQuery.status !== "loading" && entryDataQuery?.data?.list?.length! === 0 && (
           <EmptyBox>
             <div>
               <span>{t("CollectionPanel.EmptyDataText")}</span>
               <AddDataModal schema={{}}>
-                <span className="ml-2 text-primary-600 hover:border-b-2 hover:border-primary-600 cursor-pointer">
+                <span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
                   {t("CreateNow")}
                 </span>
               </AddDataModal>
@@ -263,7 +263,7 @@ export default function DataPanel() {
                   showBg
                   tooltip={t("Copy").toString()}
                   size={32}
-                  className="ml-2 hover:bg-gray-200 group/icon"
+                  className="group/icon ml-2 hover:bg-gray-200"
                 >
                   <CopyText
                     hideToolTip
@@ -282,7 +282,7 @@ export default function DataPanel() {
             isLoading={updateDataMutation.isLoading}
             onSave={handleData}
           >
-            <div className="flex-1 mb-4 rounded">
+            <div className="mb-4 flex-1 rounded">
               <JsonEditor
                 colorMode={colorMode}
                 value={JSON.stringify(currentData.data || {}, null, 2)}
diff --git a/web/src/pages/app/database/CollectionDataList/mods/IndexPanel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/IndexPanel/index.tsx
index 6821e93b3d..1549608c2b 100644
--- a/web/src/pages/app/database/CollectionDataList/mods/IndexPanel/index.tsx
+++ b/web/src/pages/app/database/CollectionDataList/mods/IndexPanel/index.tsx
@@ -6,10 +6,10 @@ import AddIndexModal from "./addIndexModal";
 export default function IndexPanel() {
   return (
     <div>
-      <div className="flex mt-2">
+      <div className="mt-2 flex">
         <AddIndexModal />
       </div>
-      <div className="rounded border border-slate-200 mt-4 ">
+      <div className="mt-4 rounded border border-slate-200 ">
         <TableContainer>
           <Table variant="striped" colorScheme="gray">
             <Thead>
diff --git a/web/src/pages/app/database/CollectionListPanel/index.tsx b/web/src/pages/app/database/CollectionListPanel/index.tsx
index 03296352e9..06cc2ad176 100644
--- a/web/src/pages/app/database/CollectionListPanel/index.tsx
+++ b/web/src/pages/app/database/CollectionListPanel/index.tsx
@@ -35,7 +35,7 @@ export default function CollectionListPanel() {
 
   return (
     <Panel
-      className="flex-grow overflow-hidden min-w-[200px]"
+      className="min-w-[200px] flex-grow overflow-hidden"
       onClick={() => {
         store.setCurrentShow("DB");
       }}
@@ -59,7 +59,7 @@ export default function CollectionListPanel() {
           </CreateCollectionModal>,
         ]}
       />
-      <div className="flex items-center mb-3 w-full">
+      <div className="mb-3 flex w-full items-center">
         <InputGroup>
           <InputLeftElement
             height={"8"}
@@ -75,9 +75,9 @@ export default function CollectionListPanel() {
         </InputGroup>
       </div>
 
-      <div className="overflow-auto flex-grow relative">
+      <div className="relative flex-grow overflow-auto">
         {collectionListQuery.isFetching ? (
-          <Center className="opacity-60 bg-white-200 absolute left-0 right-0 top-0 bottom-0 z-10">
+          <Center className="bg-white-200 absolute left-0 right-0 top-0 bottom-0 z-10 opacity-60">
             <Spinner />
           </Center>
         ) : null}
@@ -94,8 +94,8 @@ export default function CollectionListPanel() {
                       store.setCurrentDB(db);
                     }}
                   >
-                    <div className="w-full flex justify-between group">
-                      <div className="leading-loose font-semibold">
+                    <div className="group flex w-full justify-between">
+                      <div className="font-semibold leading-loose">
                         <FileTypeIcon type="db" />
                         <span className="ml-2 text-base">{db.name}</span>
                       </div>
diff --git a/web/src/pages/app/database/PolicyDataList/index.tsx b/web/src/pages/app/database/PolicyDataList/index.tsx
index fb5cc26111..9ea5d9d860 100644
--- a/web/src/pages/app/database/PolicyDataList/index.tsx
+++ b/web/src/pages/app/database/PolicyDataList/index.tsx
@@ -72,7 +72,7 @@ export default function PolicyDataList() {
           <div>
             {t("CollectionPanel.EmptyPolicyText")}
             <AddPolicyModal>
-              <span className="ml-2 text-primary-600 hover:border-b-2 hover:border-primary-600 cursor-pointer">
+              <span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
                 {t("CreateNow")}
               </span>
             </AddPolicyModal>
@@ -84,7 +84,7 @@ export default function PolicyDataList() {
 
   return (
     <>
-      <Panel.Header className="w-full pr-2 h-[60px] flex-shrink-0">
+      <Panel.Header className="h-[60px] w-full flex-shrink-0 pr-2">
         <AddRulesModal
           onSuccessSubmit={(data) => {
             setCurrentData(data);
@@ -106,9 +106,9 @@ export default function PolicyDataList() {
           {t("CollectionPanel.RulesNum")} : {rulesListQuery?.data?.data?.length || 0}
         </span>
       </Panel.Header>
-      <div className="w-full flex-grow flex overflow-hidden">
+      <div className="flex w-full flex-grow overflow-hidden">
         {rulesListQuery.isFetching ? (
-          <Center className="h-full w-full opacity-60 bg-white-200">
+          <Center className="bg-white-200 h-full w-full opacity-60">
             <Spinner size="lg" />
           </Center>
         ) : rulesListQuery?.data?.data.length ? (
@@ -127,11 +127,11 @@ export default function PolicyDataList() {
                 return (
                   <>
                     <div
-                      className={clsx("border-b-2 mb-4 p-2", {
+                      className={clsx("mb-4 border-b-2 p-2", {
                         "border-lafWhite-600": !darkMode,
                       })}
                     >
-                      <Text fontSize="md" className="leading-loose font-semibold">
+                      <Text fontSize="md" className="font-semibold leading-loose">
                         {t("CollectionPanel.Collection")}:{item.collectionName}
                       </Text>
                     </div>
@@ -145,7 +145,7 @@ export default function PolicyDataList() {
                     showBg
                     tooltip={t("Copy").toString()}
                     size={32}
-                    className="ml-2 hover:bg-rose-100 group/icon"
+                    className="group/icon ml-2 hover:bg-rose-100"
                   >
                     <CopyText
                       hideToolTip
@@ -165,14 +165,14 @@ export default function PolicyDataList() {
               isLoading={updateRulesMutation.isLoading}
               onSave={handleData}
             >
-              <Text fontSize="md" className="leading-loose font-semibold mb-2">
+              <Text fontSize="md" className="mb-2 font-semibold leading-loose">
                 {t("CollectionPanel.SelectCollection")}: {currentData?.collectionName}
               </Text>
-              <Text fontSize="md" className="leading-loose font-semibold mt-4 mb-2">
+              <Text fontSize="md" className="mt-4 mb-2 font-semibold leading-loose">
                 {t("CollectionPanel.RulesContent")}
               </Text>
               <div
-                className={clsx(" mb-4 pr-2 flex-1 rounded", {
+                className={clsx(" mb-4 flex-1 rounded pr-2", {
                   "bg-lafWhite-400": !darkMode,
                   "bg-lafDark-200": darkMode,
                 })}
@@ -198,7 +198,7 @@ export default function PolicyDataList() {
                   rulesListQuery.refetch();
                 }}
               >
-                <span className="ml-2 text-primary-600 hover:border-b-2 hover:border-primary-600 cursor-pointer">
+                <span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
                   {t("CreateNow")}
                 </span>
               </AddRulesModal>
diff --git a/web/src/pages/app/database/PolicyListPanel/index.tsx b/web/src/pages/app/database/PolicyListPanel/index.tsx
index 54eca9b3e1..ec43ea921f 100644
--- a/web/src/pages/app/database/PolicyListPanel/index.tsx
+++ b/web/src/pages/app/database/PolicyListPanel/index.tsx
@@ -55,8 +55,8 @@ export default function PolicyListPanel() {
                     store.setCurrentPolicy(item);
                   }}
                 >
-                  <div className="w-full flex justify-between group">
-                    <div className="leading-loose font-semibold">
+                  <div className="group flex w-full justify-between">
+                    <div className="font-semibold leading-loose">
                       <FileTypeIcon type="policy" />
                       <span className="ml-2 text-base">{item.name}</span>
                     </div>
diff --git a/web/src/pages/app/database/RightComponent/DeleteButton.tsx b/web/src/pages/app/database/RightComponent/DeleteButton.tsx
index adb01b0555..9f6ae86668 100644
--- a/web/src/pages/app/database/RightComponent/DeleteButton.tsx
+++ b/web/src/pages/app/database/RightComponent/DeleteButton.tsx
@@ -23,7 +23,7 @@ export default function DeleteButton(props: { data: any; deleteMethod: any }) {
         placement="left"
       >
         <IconWrap
-          className="hover:bg-rose-100 group/icon"
+          className="group/icon hover:bg-rose-100"
           showBg
           tooltip={t("Delete").toString()}
           size={32}
diff --git a/web/src/pages/app/database/RightComponent/EditBox.tsx b/web/src/pages/app/database/RightComponent/EditBox.tsx
index e14e0ea31e..d7cee6f827 100644
--- a/web/src/pages/app/database/RightComponent/EditBox.tsx
+++ b/web/src/pages/app/database/RightComponent/EditBox.tsx
@@ -17,7 +17,7 @@ const RightPanelEditBox: React.FC<{
 
   return (
     <div
-      className={clsx("border-2 flex-col ml-1 mb-3 rounded-xl px-4", {
+      className={clsx("ml-1 mb-3 flex-col rounded-xl border-2 px-4", {
         "border-lafWhite-600": !darkMode,
       })}
       style={{
@@ -26,11 +26,11 @@ const RightPanelEditBox: React.FC<{
       }}
     >
       <div
-        className={clsx("flex justify-between item-center border-b-2 mb-4 py-2", {
+        className={clsx("item-center mb-4 flex justify-between border-b-2 py-2", {
           "border-lafWhite-600": !darkMode,
         })}
       >
-        <Text fontSize="md" className="leading-loose font-semibold">
+        <Text fontSize="md" className="font-semibold leading-loose">
           {title}
         </Text>
         <Button
diff --git a/web/src/pages/app/database/RightComponent/List.tsx b/web/src/pages/app/database/RightComponent/List.tsx
index ee3b9a31e2..6129213d2f 100644
--- a/web/src/pages/app/database/RightComponent/List.tsx
+++ b/web/src/pages/app/database/RightComponent/List.tsx
@@ -26,12 +26,12 @@ const RightPanelList: React.FC<{
     customStyle,
   } = props;
   return (
-    <div className="overflow-y-auto flex-1 overflow-x-hidden pr-1">
+    <div className="flex-1 overflow-y-auto overflow-x-hidden pr-1">
       {(ListQuery || [])?.map((item: any, index: number) => {
         return (
           <div
             key={item[setKey]}
-            className={clsx("border-2 p-2 rounded-xl relative group/item", {
+            className={clsx("group/item relative rounded-xl border-2 p-2", {
               ...customStyle,
               shadow: isActive(item),
               "mb-2": index !== (ListQuery?.data?.data || []).length - 1,
@@ -41,7 +41,7 @@ const RightPanelList: React.FC<{
             }}
           >
             <div
-              className={clsx(" absolute right-2 top-2  group-hover/item:block z-50 ", {
+              className={clsx(" absolute right-2 top-2  z-50 group-hover/item:block ", {
                 hidden: !isActive(item),
               })}
               onClick={(e) => {
diff --git a/web/src/pages/app/database/index.tsx b/web/src/pages/app/database/index.tsx
index 086d6baf67..d90abfa010 100644
--- a/web/src/pages/app/database/index.tsx
+++ b/web/src/pages/app/database/index.tsx
@@ -38,7 +38,7 @@ function DatabasePage() {
         </Col>
         <Resize type="x" pageId="collectionPage" panelId="SideBar" containerRef={containerRef} />
         <Col>
-          <Panel className="items-center h-full">
+          <Panel className="h-full items-center">
             {store.currentShow === "DB" ? <CollectionDataList /> : <PolicyDataList />}
           </Panel>
         </Col>
diff --git a/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx b/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
index 0bdd0c9bae..b6bcb619c0 100644
--- a/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
+++ b/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
@@ -66,7 +66,7 @@ function DeleteCollectionModal(props: { database: any }) {
             </p>
             <p className="mb-4">
               {t("CollectionPanel.InputName")}
-              <span className=" text-red-500 mx-1 font-bold">{database.name}</span>
+              <span className="mx-1 font-bold text-red-500">{database.name}</span>
               {t("ToConfirm")}。
             </p>
             <FormControl>
diff --git a/web/src/pages/app/functions/mods/BottomPanel/index.tsx b/web/src/pages/app/functions/mods/BottomPanel/index.tsx
index cf4453338e..a5f8a0141c 100644
--- a/web/src/pages/app/functions/mods/BottomPanel/index.tsx
+++ b/web/src/pages/app/functions/mods/BottomPanel/index.tsx
@@ -9,7 +9,7 @@ function BottomPanel() {
   const store = useCustomSettingStore();
 
   return (
-    <Panel className=" justify-between !flex-row">
+    <Panel className=" !flex-row justify-between">
       <HStack spacing={2}>
         <Button
           size="xs"
diff --git a/web/src/pages/app/functions/mods/ConsolePanel/index.tsx b/web/src/pages/app/functions/mods/ConsolePanel/index.tsx
index 4a6035c6ed..e9c53718fe 100644
--- a/web/src/pages/app/functions/mods/ConsolePanel/index.tsx
+++ b/web/src/pages/app/functions/mods/ConsolePanel/index.tsx
@@ -31,7 +31,7 @@ function ConsolePanel() {
   return (
     <Panel className="flex-1">
       <Panel.Header title="Console"></Panel.Header>
-      <div className="relative overflow-y-auto px-2 font-mono text-sm " style={{ height: "100%" }}>
+      <div className="text-sm relative overflow-y-auto px-2 font-mono " style={{ height: "100%" }}>
         {currentRequestId && (
           <p className="mb-1 ml-1">
             RequestID: {currentRequestId} <CopyText text={String(currentRequestId)} />
@@ -45,7 +45,7 @@ function ConsolePanel() {
           cloneReverseArray.map((item: any) => {
             return (
               <div key={item._id} className="flex ">
-                <span className=" text-slate-500 min-w-[160px]">
+                <span className="min-w-[160px] text-slate-500">
                   [{formatDate(item.created_at, "YYYY-MM-DD hh:mm:ss")}]
                 </span>
                 <pre className="flex-1">{item.data}</pre>
diff --git a/web/src/pages/app/functions/mods/DebugPanel/BodyParamsTab/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/BodyParamsTab/index.tsx
index 33137dc987..059e5ca4dd 100644
--- a/web/src/pages/app/functions/mods/DebugPanel/BodyParamsTab/index.tsx
+++ b/web/src/pages/app/functions/mods/DebugPanel/BodyParamsTab/index.tsx
@@ -111,7 +111,7 @@ function BodyParamsTab(props: { onChange(values: { contentType: string; data: an
         <div>
           <form>
             <TableContainer>
-              <Table size="sm" className="border rounded border-grayModern-600">
+              <Table size="sm" className="rounded border border-grayModern-600">
                 <Thead>
                   <Tr>
                     <Th>{t("FunctionPanel.Name")}</Th>
@@ -153,7 +153,7 @@ function BodyParamsTab(props: { onChange(values: { contentType: string; data: an
                             <>
                               <label
                                 htmlFor={`params.${index}`}
-                                className="bg-slate-200 px-[4px] py-[2px] rounded cursor-pointer"
+                                className="cursor-pointer rounded bg-slate-200 px-[4px] py-[2px]"
                               >
                                 {t("FunctionPanel.UploadButton")}
                               </label>
diff --git a/web/src/pages/app/functions/mods/DebugPanel/HeaderParamsTab/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/HeaderParamsTab/index.tsx
index d7df03e0c9..9b3ee08e75 100644
--- a/web/src/pages/app/functions/mods/DebugPanel/HeaderParamsTab/index.tsx
+++ b/web/src/pages/app/functions/mods/DebugPanel/HeaderParamsTab/index.tsx
@@ -38,7 +38,7 @@ function HeaderParamsTab(props: { onChange(values: Params[]): void }) {
     <div>
       <form>
         <TableContainer>
-          <Table size="sm" className="border rounded  border-grayModern-600" variant={"unstyled"}>
+          <Table size="sm" className="rounded border  border-grayModern-600" variant={"unstyled"}>
             <Thead>
               <Tr>
                 <Th>{t("FunctionPanel.Name")}</Th>
diff --git a/web/src/pages/app/functions/mods/DebugPanel/QueryParamsTab/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/QueryParamsTab/index.tsx
index 5a4b79ff9f..c6b415c27a 100644
--- a/web/src/pages/app/functions/mods/DebugPanel/QueryParamsTab/index.tsx
+++ b/web/src/pages/app/functions/mods/DebugPanel/QueryParamsTab/index.tsx
@@ -38,7 +38,7 @@ function HeaderParamsTab(props: { onChange(values: Params[]): void }) {
     <div>
       <form>
         <TableContainer>
-          <Table size="sm" className="border rounded border-grayModern-600">
+          <Table size="sm" className="rounded border border-grayModern-600">
             <Thead>
               <Tr>
                 <Th>{t("FunctionPanel.Name")}</Th>
diff --git a/web/src/pages/app/functions/mods/DebugPanel/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/index.tsx
index 60a9b63457..9a82e3f33e 100644
--- a/web/src/pages/app/functions/mods/DebugPanel/index.tsx
+++ b/web/src/pages/app/functions/mods/DebugPanel/index.tsx
@@ -110,7 +110,7 @@ export default function DebugPanel(props: { containerRef: any }) {
 
   return (
     <>
-      <Panel className="flex-grow overflow-hidden min-w-[200px]">
+      <Panel className="min-w-[200px] flex-grow overflow-hidden">
         <Tabs width="100%" colorScheme={"primary"} display="flex" flexDirection={"column"} h="full">
           <TabList h={"50px"}>
             <Tab px="0">
@@ -128,8 +128,8 @@ export default function DebugPanel(props: { containerRef: any }) {
 
           <TabPanels flex={1} className="overflow-hidden">
             <TabPanel padding={0} h="full">
-              <div className="flex flex-col h-full">
-                <div className="flex-none flex py-4 px-2 items-center">
+              <div className="flex h-full flex-col">
+                <div className="flex flex-none items-center py-4 px-2">
                   <span className="mr-3 whitespace-nowrap">{t("FunctionPanel.Methods")}</span>
                   <Select
                     width="150px"
diff --git a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx
index 41d62c687e..8c2775456b 100644
--- a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx
+++ b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx
@@ -205,7 +205,7 @@ const AddDependenceModal = () => {
                 >
                   <Box ml={5} width="350px">
                     <b>{packageItem.package.name}</b>
-                    <p className="text-second text-base whitespace-nowrap overflow-hidden text-ellipsis ">
+                    <p className="overflow-hidden text-ellipsis whitespace-nowrap text-base text-second ">
                       {packageItem.package.description}
                     </p>
                   </Box>
@@ -313,7 +313,7 @@ const AddDependenceModal = () => {
           <ModalFooter>
             {checkList.length > 0 && (
               <span
-                className="mr-2 hover:cursor-pointer text-lg "
+                className="mr-2 text-lg hover:cursor-pointer "
                 onClick={() => {
                   if (!isEdit) {
                     setIsShowChecked((pre) => !pre);
diff --git a/web/src/pages/app/functions/mods/DependencePanel/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/index.tsx
index 7f7ff6d752..a5298c5f11 100644
--- a/web/src/pages/app/functions/mods/DependencePanel/index.tsx
+++ b/web/src/pages/app/functions/mods/DependencePanel/index.tsx
@@ -80,17 +80,17 @@ export default function DependenceList() {
                       className="group"
                     >
                       <FileTypeIcon type={FileType.npm} />
-                      <div className="w-[200px] overflow-hidden ml-2">
-                        <span className="w-full inline-block whitespace-nowrap overflow-hidden overflow-ellipsis">
+                      <div className="ml-2 w-[200px] overflow-hidden">
+                        <span className="inline-block w-full overflow-hidden overflow-ellipsis whitespace-nowrap">
                           {packageItem?.name}
                         </span>
                       </div>
-                      <div className=" w-[100px] flex">
-                        <span className="flex-grow inline-block whitespace-nowrap overflow-hidden overflow-ellipsis">
+                      <div className=" flex w-[100px]">
+                        <span className="inline-block flex-grow overflow-hidden overflow-ellipsis whitespace-nowrap">
                           {packageItem?.spec}
                         </span>
                         {!packageItem?.builtin ? (
-                          <span className=" w-[10px] ml-2 hidden group-hover:inline-block">
+                          <span className=" ml-2 hidden w-[10px] group-hover:inline-block">
                             <ConfirmButton
                               onSuccessAction={async () => {
                                 delPackageMutation.mutate({ name: packageItem?.name });
@@ -125,11 +125,11 @@ export default function DependenceList() {
                     className="group"
                   >
                     <div className=" text-second">
-                      <span className="w-40 inline-block whitespace-nowrap overflow-hidden overflow-ellipsis">
+                      <span className="inline-block w-40 overflow-hidden overflow-ellipsis whitespace-nowrap">
                         {packageItem?.name}
                       </span>
                     </div>
-                    <div className="text-second w-20 inline-block whitespace-nowrap overflow-hidden overflow-ellipsis">
+                    <div className="inline-block w-20 overflow-hidden overflow-ellipsis whitespace-nowrap text-second">
                       <span>{packageItem?.spec}</span>
                     </div>
                   </SectionList.Item>
diff --git a/web/src/pages/app/functions/mods/EditorPanel/FunctionDetailPopOver.tsx b/web/src/pages/app/functions/mods/EditorPanel/FunctionDetailPopOver.tsx
index e2c84d5672..a61519b524 100644
--- a/web/src/pages/app/functions/mods/EditorPanel/FunctionDetailPopOver.tsx
+++ b/web/src/pages/app/functions/mods/EditorPanel/FunctionDetailPopOver.tsx
@@ -29,7 +29,7 @@ const FunctionDetailPopOver = () => {
       <Portal>
         <PopoverContent width={"400px"}>
           <PopoverBody px="6" py="4">
-            <h2 className="text-2xl mb-1">
+            <h2 className="mb-1 text-2xl">
               <span className="align-middle">{currentFunction.name}</span>{" "}
               <FileTypeIcon type="ts" />
             </h2>
@@ -37,7 +37,7 @@ const FunctionDetailPopOver = () => {
               <span>更新于 {formatDate(currentFunction.updatedAt)}</span>
               <p className="mt-2">{currentFunction.desc}</p>
             </div>
-            <div className="w-full mt-2 flex flex-wrap justify-start items-center">
+            <div className="mt-2 flex w-full flex-wrap items-center justify-start">
               {currentFunction.tags.map((item: string) => (
                 <Tag className="mr-2 mb-2 cursor-pointer" key={item} variant="inputTag">
                   <TagLabel>{item}</TagLabel>
diff --git a/web/src/pages/app/functions/mods/EditorPanel/index.tsx b/web/src/pages/app/functions/mods/EditorPanel/index.tsx
index e866649fd6..47100d30d2 100644
--- a/web/src/pages/app/functions/mods/EditorPanel/index.tsx
+++ b/web/src/pages/app/functions/mods/EditorPanel/index.tsx
@@ -36,17 +36,17 @@ function EditorPanel() {
           })}
         >
           <HStack maxW={"55%"} spacing={2}>
-            <CopyText className="font-bold text-xl" text={currentFunction?.name}>
+            <CopyText className="text-xl font-bold" text={currentFunction?.name}>
               <span>{currentFunction?.name}</span>
             </CopyText>
             <FunctionDetailPopOver />
             {currentFunction?.id &&
               functionCache.getCache(currentFunction?.id, currentFunction?.source?.code) !==
                 currentFunction?.source?.code && (
-                <span className="flex-none inline-block w-2 h-2 rounded-full bg-warn-700"></span>
+                <span className="inline-block h-2 w-2 flex-none rounded-full bg-warn-700"></span>
               )}
             {currentFunction?.desc ? (
-              <span className="text-slate-400 font-normal whitespace-nowrap overflow-hidden text-ellipsis">
+              <span className="overflow-hidden text-ellipsis whitespace-nowrap font-normal text-slate-400">
                 {currentFunction?.desc}
               </span>
             ) : null}
@@ -65,9 +65,9 @@ function EditorPanel() {
       {!functionListQuery.isFetching && functionListQuery.data?.data?.length === 0 && (
         <EmptyBox>
           <>
-            <div className="flex justify-center items-center">
+            <div className="flex items-center justify-center">
               <CreateModal key="create_modal_new">
-                <span className="ml-2 text-primary-600 border-b-2 border-b-transparent hover:border-primary-600 cursor-pointer">
+                <span className="ml-2 cursor-pointer border-b-2 border-b-transparent text-primary-600 hover:border-primary-600">
                   {t("CreateNow")}
                 </span>
               </CreateModal>
@@ -75,7 +75,7 @@ function EditorPanel() {
               <p className="mx-2 mb-[2px]">{t("Or")}</p>
 
               <PromptModal>
-                <span className="text-primary-600 font-bold border-b-2 border-b-transparent hover:border-primary-600  cursor-pointer">
+                <span className="cursor-pointer border-b-2 border-b-transparent font-bold text-primary-600  hover:border-primary-600">
                   {t("TryLafAI")}
                 </span>
               </PromptModal>
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/PromptModal.tsx b/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/PromptModal.tsx
index 7f023dc139..c7e458040c 100644
--- a/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/PromptModal.tsx
+++ b/web/src/pages/app/functions/mods/FunctionPanel/CreateModal/PromptModal.tsx
@@ -199,7 +199,7 @@ const PromptModal = (props: { functionItem?: any; children?: React.ReactElement
                 />
               </FormControl>
 
-              <div className="w-full flex items-center justify-center">
+              <div className="flex w-full items-center justify-center">
                 <Button
                   disabled={generateCode.isLoading}
                   isLoading={generateCode.isLoading}
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
index cc6fff0c16..2471e2a525 100644
--- a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
+++ b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -95,14 +95,14 @@ export default function FunctionList() {
 
   const renderSelectedTags = () => {
     return tagsList.length > 0 ? (
-      <div className="w-full mt-2 mb-2 pb-1 flex flex-wrap justify-start border-b items-center min-w-[200px]">
+      <div className="mt-2 mb-2 flex w-full min-w-[200px] flex-wrap items-center justify-start border-b pb-1">
         <p className={clsx("mr-2 mb-1", darkMode ? "text-white-500" : "text-grayModern-500")}>
           {t("FunctionPanel.Tags")}
         </p>
         {tagsList.map((item) => (
           <span
             className={clsx(
-              "cursor-pointer px-2 mb-1 rounded mr-1",
+              "mb-1 mr-1 cursor-pointer rounded px-2",
               darkMode ? "bg-gray-700" : "bg-gray-100",
               {
                 "!bg-primary-400 text-white": item.tagName === currentTag?.tagName,
@@ -119,7 +119,7 @@ export default function FunctionList() {
   };
 
   return (
-    <Panel className="flex-grow overflow-hidden min-w-[250px]">
+    <Panel className="min-w-[250px] flex-grow overflow-hidden">
       <Panel.Header
         title={t`FunctionPanel.FunctionList`}
         actions={[
@@ -181,14 +181,14 @@ export default function FunctionList() {
                       navigate(`/app/${currentApp?.appid}/${Pages.function}/${func?.name}`);
                     }}
                   >
-                    <div className="leading-loose font-semibold">
+                    <div className="font-semibold leading-loose">
                       <FileTypeIcon type={FileType.ts} />
                       <span className="ml-2 text-base">{func?.name}</span>
                     </div>
                     <HStack spacing={1}>
                       {functionCache.getCache(func?.id, func?.source?.code) !==
                         func?.source?.code && (
-                        <span className="flex-none inline-block w-1 h-1 rounded-full bg-warn-700"></span>
+                        <span className="inline-block h-1 w-1 flex-none rounded-full bg-warn-700"></span>
                       )}
                       <MoreButton
                         isHidden={func.name !== currentFunction?.name}
diff --git a/web/src/pages/app/functions/mods/TriggerModal/AddTriggerModal/index.tsx b/web/src/pages/app/functions/mods/TriggerModal/AddTriggerModal/index.tsx
index 68608fdd65..45d462c423 100644
--- a/web/src/pages/app/functions/mods/TriggerModal/AddTriggerModal/index.tsx
+++ b/web/src/pages/app/functions/mods/TriggerModal/AddTriggerModal/index.tsx
@@ -142,7 +142,7 @@ const AddTriggerModal = (props: { children: React.ReactElement; targetFunc?: str
                   {CRON_TEMPLATE.map((item) => (
                     <span
                       key={item.label}
-                      className="text-blue-500 cursor-pointer ml-2"
+                      className="ml-2 cursor-pointer text-blue-500"
                       onClick={() => {
                         setValue("cron", item.value);
                       }}
diff --git a/web/src/pages/app/functions/mods/TriggerModal/index.tsx b/web/src/pages/app/functions/mods/TriggerModal/index.tsx
index f3f46aa5c8..8d4d4f517f 100644
--- a/web/src/pages/app/functions/mods/TriggerModal/index.tsx
+++ b/web/src/pages/app/functions/mods/TriggerModal/index.tsx
@@ -78,13 +78,13 @@ export default function TriggerModal(props: { children: React.ReactElement }) {
                 />
               </InputGroup>
             </div>
-            <div className="mt-4 rounded-md h-full relative">
+            <div className="relative mt-4 h-full rounded-md">
               {triggerListQuery.isFetching ? (
-                <Center className="opacity-60 bg-white absolute left-0 right-0 top-0 bottom-0 z-10">
+                <Center className="absolute left-0 right-0 top-0 bottom-0 z-10 bg-white opacity-60">
                   <Spinner size={"lg"} />
                 </Center>
               ) : null}
-              <div className="overflow-y-auto h-full mb-4">
+              <div className="mb-4 h-full overflow-y-auto">
                 {triggerListQuery.data?.data?.length ? (
                   <TableContainer minH={"400px"}>
                     <Table variant="simple">
@@ -149,7 +149,7 @@ export default function TriggerModal(props: { children: React.ReactElement }) {
                     <div>
                       <span>{t("TriggerPanel.EmptyTriggerTip")}</span>
                       <AddTriggerModal>
-                        <span className="ml-2 text-primary-600 hover:border-b-2 hover:border-primary-600 cursor-pointer">
+                        <span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
                           {t("CreateNow")}
                         </span>
                       </AddTriggerModal>
diff --git a/web/src/pages/app/logs/index.tsx b/web/src/pages/app/logs/index.tsx
index b9e598ffa3..4c828e8da5 100644
--- a/web/src/pages/app/logs/index.tsx
+++ b/web/src/pages/app/logs/index.tsx
@@ -130,38 +130,38 @@ export default function LogsPage() {
             />
           </Panel.Header>
         </form>
-        <div className="py-1 rounded-md h-full relative" style={{ paddingBottom: 100 }}>
+        <div className="relative h-full rounded-md py-1" style={{ paddingBottom: 100 }}>
           {logListQuery.isFetching ? (
-            <Center className="opacity-60 bg-white-200 absolute left-0 right-0 top-0 bottom-0 z-10">
+            <Center className="bg-white-200 absolute left-0 right-0 top-0 bottom-0 z-10 opacity-60">
               <Spinner size="lg" />
             </Center>
           ) : null}
-          <div className="overflow-y-auto h-full mb-4 ">
+          <div className="mb-4 h-full overflow-y-auto ">
             {logListQuery.data?.data?.list?.length ? (
               logListQuery.data?.data?.list.map((item: TLogItem) => {
                 return (
-                  <div key={item._id} className=" h-[22px] font-mono overflow-hidden">
-                    <span className="mr-2 text-grayIron-600 float-left">
+                  <div key={item._id} className=" h-[22px] overflow-hidden font-mono">
+                    <span className="float-left mr-2 text-grayIron-600">
                       [{formatDate(item.created_at, "YYYY-MM-DD HH:mm:ss")}]
                     </span>
 
-                    <CopyText text={item.request_id} className="mr-2 text-primary-600 float-left">
+                    <CopyText text={item.request_id} className="float-left mr-2 text-primary-600">
                       <span>{item.request_id.substring(0, 8)}</span>
                     </CopyText>
                     <CopyText
                       text={item.func}
-                      className="mr-2 w-[100px] text-purple-700 float-left"
+                      className="float-left mr-2 w-[100px] text-purple-700"
                     >
                       <span>{item.func}</span>
                     </CopyText>
                     <div
-                      className=" overflow-hidden mr-4"
+                      className=" mr-4 overflow-hidden"
                       onClick={() => {
                         setDetail(item);
                         onOpen();
                       }}
                     >
-                      <pre className="hover:text-blue-700 hover:underline max-h-[20px] overflow-hidden cursor-pointer whitespace-nowrap text-ellipsis">
+                      <pre className="max-h-[20px] cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap hover:text-blue-700 hover:underline">
                         {item.data.substring(0, 200)}
                       </pre>
                     </div>
diff --git a/web/src/pages/app/setting/AppEnvList/index.tsx b/web/src/pages/app/setting/AppEnvList/index.tsx
index d929cb1ca7..4c0ddea5b0 100644
--- a/web/src/pages/app/setting/AppEnvList/index.tsx
+++ b/web/src/pages/app/setting/AppEnvList/index.tsx
@@ -21,7 +21,7 @@ const AppEnvList = (props: { onClose?: () => {} }) => {
   const addEnvironmentMutation = useAddEnvironmentMutation();
   return (
     <>
-      <div className="flex-grow  flex flex-col">
+      <div className="flex  flex-grow flex-col">
         <EditableTable
           column={[
             {
@@ -84,7 +84,7 @@ const AppEnvList = (props: { onClose?: () => {} }) => {
           bodyText={String(t("SettingPanel.UpdateConfirm"))}
           confirmButtonText={String(t("Update"))}
         >
-          <Button className="w-28 h-8 self-end mt-4">{t("Update")}</Button>
+          <Button className="mt-4 h-8 w-28 self-end">{t("Update")}</Button>
         </ConfirmButton>
       </div>
     </>
diff --git a/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx b/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx
index e33f892942..a01ed1e015 100644
--- a/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx
+++ b/web/src/pages/app/setting/AppInfoList/InfoDetail/index.tsx
@@ -11,10 +11,10 @@ const InfoDetail = function (props: {
 }) {
   const { title, leftData, rightData, className } = props;
   return (
-    <div className={clsx("border border-grayModern-100 rounded px-4 py-4", className)}>
+    <div className={clsx("rounded border border-grayModern-100 px-4 py-4", className)}>
       <Content>
-        <Row className="h-[20px] flex-none mb-2">
-          <span className={clsx("inline-block relative text-primary-700 font-medium text-lg")}>
+        <Row className="mb-2 h-[20px] flex-none">
+          <span className={clsx("relative inline-block text-lg font-medium text-primary-700")}>
             {title}
           </span>
         </Row>
diff --git a/web/src/pages/app/setting/AppInfoList/index.tsx b/web/src/pages/app/setting/AppInfoList/index.tsx
index bdbe4b975d..2c8012f8db 100644
--- a/web/src/pages/app/setting/AppInfoList/index.tsx
+++ b/web/src/pages/app/setting/AppInfoList/index.tsx
@@ -28,7 +28,7 @@ const AppEnvList = () => {
 
   return (
     <>
-      <div className="h-full flex flex-col">
+      <div className="flex h-full flex-col">
         <div className="flex h-[50px] flex-none justify-between">
           <HStack spacing={2}>
             <Box
@@ -43,7 +43,7 @@ const AppEnvList = () => {
           <HStack
             spacing={2}
             divider={
-              <span className="inline-block mr-2 rounded h-[12px] border border-grayModern-500"></span>
+              <span className="mr-2 inline-block h-[12px] rounded border border-grayModern-500"></span>
             }
           >
             <Button
@@ -86,7 +86,7 @@ const AppEnvList = () => {
             </DeleteAppModal>
           </HStack>
         </div>
-        <div className="flex-grow flex overflow-auto flex-col">
+        <div className="flex flex-grow flex-col overflow-auto">
           <InfoDetail
             title={t("SettingPanel.BaseInfo")}
             leftData={[
diff --git a/web/src/pages/app/setting/PATList/index.tsx b/web/src/pages/app/setting/PATList/index.tsx
index 29abc71461..b2524c19f6 100644
--- a/web/src/pages/app/setting/PATList/index.tsx
+++ b/web/src/pages/app/setting/PATList/index.tsx
@@ -36,7 +36,7 @@ const PATList = () => {
   const dateList = formatDateOption();
   return (
     <>
-      <div className="flex-grow flex flex-col">
+      <div className="flex flex-grow flex-col">
         <EditableTable
           column={[
             {
diff --git a/web/src/pages/app/setting/UserInfo/AuthDetail/index.tsx b/web/src/pages/app/setting/UserInfo/AuthDetail/index.tsx
index d131850f93..177a1435e8 100644
--- a/web/src/pages/app/setting/UserInfo/AuthDetail/index.tsx
+++ b/web/src/pages/app/setting/UserInfo/AuthDetail/index.tsx
@@ -32,7 +32,7 @@ export default function AuthDetail(props: { onBack: () => void }) {
   const onSubmit = async (data: any) => {};
   return (
     <>
-      <p className="h-[40px] flex-none text-left w-full">
+      <p className="h-[40px] w-full flex-none text-left">
         <span
           className="cursor-pointer "
           onClick={() => {
@@ -44,17 +44,17 @@ export default function AuthDetail(props: { onBack: () => void }) {
           {t("Back")}
         </span>
       </p>
-      <div className="flex-grow w-full flex flex-col justify-around">
+      <div className="flex w-full flex-grow flex-col justify-around">
         <p
-          className={clsx("text-xl text-center mb-6", {
+          className={clsx("mb-6 text-center text-xl", {
             "text-grayModern-900": !darkMode,
           })}
         >
           {t("SettingPanel.Auth")}
         </p>
-        <VStack spacing={6} align="flex-start" className="w-[48%] mx-auto">
+        <VStack spacing={6} align="flex-start" className="mx-auto w-[48%]">
           <FormControl isRequired isInvalid={!!errors?.tel} className="relative">
-            <div className="flex relative">
+            <div className="relative flex">
               <FormLabel className="min-w-[120px]" htmlFor="tel">
                 {t("SettingPanel.Tel")}:
               </FormLabel>
@@ -134,7 +134,7 @@ export default function AuthDetail(props: { onBack: () => void }) {
             </FormErrorMessage>
           </FormControl>
         </VStack>
-        <div className="text-right mt-6 w-full">
+        <div className="mt-6 w-full text-right">
           <Button colorScheme="primary" type="submit" onClick={handleSubmit(onSubmit)}>
             {t("SettingPanel.ToAuth")}
           </Button>
diff --git a/web/src/pages/app/setting/UserInfo/index.tsx b/web/src/pages/app/setting/UserInfo/index.tsx
index fe9a8585ab..9f4d6c0f42 100644
--- a/web/src/pages/app/setting/UserInfo/index.tsx
+++ b/web/src/pages/app/setting/UserInfo/index.tsx
@@ -16,7 +16,7 @@ export default function UserInfo() {
   const darkMode = colorMode === "dark";
 
   return (
-    <div className="h-full flex flex-col items-center justify-center">
+    <div className="flex h-full flex-col items-center justify-center">
       {showAuth ? (
         <AuthDetail
           onBack={() => {
@@ -25,7 +25,7 @@ export default function UserInfo() {
         />
       ) : (
         <>
-          <Box className="text-center relative">
+          <Box className="relative text-center">
             <Avatar
               size="lg"
               name={userInfo?.username}
@@ -35,7 +35,7 @@ export default function UserInfo() {
               boxShadow="base"
             />
             <p
-              className={clsx("text-center text-3xl font-medium mb-2", {
+              className={clsx("mb-2 text-center text-3xl font-medium", {
                 "text-grayModern-900": !darkMode,
               })}
             >
@@ -53,13 +53,13 @@ export default function UserInfo() {
               {t("SettingPanel.showAuth")}
             </span> */}
           </Box>
-          <Box className="text-lg mt-8 mb-20">
+          <Box className="mt-8 mb-20 text-lg">
             <HStack spacing={8}>
-              <span className="text-grayModern-500 w-[80px]">{t("SettingPanel.Tel")}:</span>
+              <span className="w-[80px] text-grayModern-500">{t("SettingPanel.Tel")}:</span>
               <span>{userInfo?.phone ? userInfo.phone : t("NoInfo")}</span>
             </HStack>
             <HStack spacing={8} className="mt-2">
-              <span className="text-grayModern-500 w-[80px]">{t("SettingPanel.Registered")}:</span>
+              <span className="w-[80px] text-grayModern-500">{t("SettingPanel.Registered")}:</span>
               <span>{formatDate(userInfo?.createdAt)}</span>
             </HStack>
           </Box>
diff --git a/web/src/pages/app/setting/index.tsx b/web/src/pages/app/setting/index.tsx
index 03b0249831..b67dc0212a 100644
--- a/web/src/pages/app/setting/index.tsx
+++ b/web/src/pages/app/setting/index.tsx
@@ -59,7 +59,7 @@ const SettingModal = (props: {
           <ModalCloseButton />
           <ModalBody px={6} py={2} h="60vh" maxH="70vh" flex="none">
             <Box className="flex h-full" borderColor={borderColor}>
-              <SectionList className="w-[250px] mr-4 border-r-2 pr-4">
+              <SectionList className="mr-4 w-[250px] border-r-2 pr-4">
                 {tabMatch.map((tab) => {
                   return (
                     <SectionList.Item
diff --git a/web/src/pages/app/storages/index.tsx b/web/src/pages/app/storages/index.tsx
index 430a1752e7..5c2b751a63 100644
--- a/web/src/pages/app/storages/index.tsx
+++ b/web/src/pages/app/storages/index.tsx
@@ -28,12 +28,12 @@ export default function StoragePage() {
       <Resize type="x" pageId="storagePage" panelId="SideBar" containerRef={containerRef} />
       <Col>
         {currentStorage === undefined ? (
-          <Panel className="items-center h-full">
+          <Panel className="h-full items-center">
             <EmptyBox>
               <div>
                 {t("StoragePanel.EmptyText")}
                 <CreateBucketModal>
-                  <span className="ml-2 text-primary-600 hover:border-b-2 hover:border-primary-600 cursor-pointer">
+                  <span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
                     {t("CreateNow")}
                   </span>
                 </CreateBucketModal>
diff --git a/web/src/pages/app/storages/mods/CreateWebsiteModal/index.tsx b/web/src/pages/app/storages/mods/CreateWebsiteModal/index.tsx
index 86afcd7629..703d02c6c0 100644
--- a/web/src/pages/app/storages/mods/CreateWebsiteModal/index.tsx
+++ b/web/src/pages/app/storages/mods/CreateWebsiteModal/index.tsx
@@ -53,9 +53,9 @@ function CreateWebsiteModal() {
       {currentStorage?.websiteHosting &&
       currentStorage.websiteHosting.state === BUCKET_STATUS.Active ? (
         <div className="flex">
-          <span className="font-semibold mr-2">{t("StoragePanel.CurrentDomain")}</span>
+          <span className="mr-2 font-semibold">{t("StoragePanel.CurrentDomain")}</span>
           <Link
-            className="cursor-pointer mr-2"
+            className="mr-2 cursor-pointer"
             href={
               currentStorage?.websiteHosting?.isCustom
                 ? // custom domain don't support https currently
@@ -138,7 +138,7 @@ function CreateWebsiteModal() {
           <ModalBody pb={6}>
             <VStack spacing={6} align="flex-start">
               {currentStorage?.policy === BUCKET_POLICY_TYPE.private ? (
-                <p className="text-error-500 font-semibold">{t("StoragePanel.editHostTip")}</p>
+                <p className="font-semibold text-error-500">{t("StoragePanel.editHostTip")}</p>
               ) : null}
               <FormControl>
                 <FormLabel>CNAME</FormLabel>
diff --git a/web/src/pages/app/storages/mods/DeleteBucketModal/index.tsx b/web/src/pages/app/storages/mods/DeleteBucketModal/index.tsx
index 2079cc9e02..d07dad6d99 100644
--- a/web/src/pages/app/storages/mods/DeleteBucketModal/index.tsx
+++ b/web/src/pages/app/storages/mods/DeleteBucketModal/index.tsx
@@ -59,12 +59,12 @@ function DeleteBucketModal(props: { storage: TBucket; onSuccessAction?: () => vo
           <ModalBody pb={6}>
             <p className="mb-2">
               {t("StoragePanel.DeleteConfirm")}
-              <span className=" text-black mr-1 font-bold">{" " + storage.name}</span>
+              <span className=" mr-1 font-bold text-black">{" " + storage.name}</span>
               {t("DeleteTip")}。
             </p>
             <p className="mb-4">
               {t("StoragePanel.StorageNameTip")}
-              <span className=" text-red-500 mx-1 font-bold">{storage.name}</span>
+              <span className="mx-1 font-bold text-red-500">{storage.name}</span>
               {t("ToConfirm")}。
             </p>
             <FormControl>
diff --git a/web/src/pages/app/storages/mods/FileList/index.tsx b/web/src/pages/app/storages/mods/FileList/index.tsx
index 7923c68735..1ebb329ead 100644
--- a/web/src/pages/app/storages/mods/FileList/index.tsx
+++ b/web/src/pages/app/storages/mods/FileList/index.tsx
@@ -109,7 +109,7 @@ export default function FileList() {
       </Panel>
       <Panel className="flex-grow overflow-hidden">
         <Panel.Header
-          className={clsx("flex-none mb-4 ml-4", {
+          className={clsx("mb-4 ml-4 flex-none", {
             "border-b-2": !darkMode,
             "border-lafWhite-400": !darkMode,
           })}
@@ -119,9 +119,9 @@ export default function FileList() {
             TODO: 文件数： {currentStorage?.name}
           </span> */}
         </Panel.Header>
-        <div className="px-2 pb-2 flex-grow overflow-hidden">
+        <div className="flex-grow overflow-hidden px-2 pb-2">
           {query.isFetching ? (
-            <Center className="h-full opacity-60 bg-white-200">
+            <Center className="bg-white-200 h-full opacity-60">
               <Spinner size="lg" />
             </Center>
           ) : !query.data ||
@@ -131,7 +131,7 @@ export default function FileList() {
               <UploadButton onUploadSuccess={() => query.refetch()}>
                 <div className="text-lg">
                   <span>{t("StoragePanel.UploadTip")}</span>
-                  <span className="ml-2 text-primary-600 hover:border-b-2 hover:border-primary-600 cursor-pointer">
+                  <span className="ml-2 cursor-pointer text-primary-600 hover:border-b-2 hover:border-primary-600">
                     {t("StoragePanel.InstantUpload")}
                   </span>
                 </div>
@@ -183,7 +183,7 @@ export default function FileList() {
                             onClick={() =>
                               file.Prefix ? changeDirectory(file) : viewAppFile(file)
                             }
-                            className="font-bold cursor-pointer"
+                            className="cursor-pointer font-bold"
                           >
                             <FileTypeIcon type={fileType} />
                             {file.Prefix ? (
diff --git a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
index edc31b29f5..4745bea9c9 100644
--- a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
+++ b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
@@ -65,7 +65,7 @@ export default function StorageListPanel() {
           </CreateBucketModal>,
         ]}
       />
-      <div className="w-full flex flex-col" style={{ height: "calc(100% - 36px)" }}>
+      <div className="flex w-full flex-col" style={{ height: "calc(100% - 36px)" }}>
         <InputGroup className="mb-4">
           <InputLeftElement
             height={"8"}
@@ -79,9 +79,9 @@ export default function StorageListPanel() {
             onChange={(e) => setSearch(e.target.value)}
           />
         </InputGroup>
-        <div className="overflow-auto flex-grow relative">
+        <div className="relative flex-grow overflow-auto">
           {bucketListQuery.isFetching ? (
-            <Center className="opacity-60 bg-white-200 absolute left-0 right-0 top-0 bottom-0 z-10">
+            <Center className="bg-white-200 absolute left-0 right-0 top-0 bottom-0 z-10 opacity-60">
               <Spinner />
             </Center>
           ) : null}
diff --git a/web/src/pages/app/storages/mods/UploadButton/index.tsx b/web/src/pages/app/storages/mods/UploadButton/index.tsx
index 1c048f4bd7..26dcbc5f2c 100644
--- a/web/src/pages/app/storages/mods/UploadButton/index.tsx
+++ b/web/src/pages/app/storages/mods/UploadButton/index.tsx
@@ -75,7 +75,7 @@ function UploadButton(props: { onUploadSuccess: Function; children: React.ReactE
                 return (
                   <div
                     key={item.fileName}
-                    className="my-2 px-5 flex w-full h-10 justify-between items-center hover:bg-slate-100"
+                    className="my-2 flex h-10 w-full items-center justify-between px-5 hover:bg-slate-100"
                   >
                     <span className="text-slate-500">{item.fileName}</span>
                     {item.status ? <CheckCircleIcon color="green.500" fontSize={20} /> : ""}
diff --git a/web/src/pages/auth/reset-password/index.tsx b/web/src/pages/auth/reset-password/index.tsx
index 36ee923069..c6484ac04d 100644
--- a/web/src/pages/auth/reset-password/index.tsx
+++ b/web/src/pages/auth/reset-password/index.tsx
@@ -109,12 +109,12 @@ export default function ResetPassword() {
   };
 
   return (
-    <div className="bg-white absolute left-1/2 top-1/2 -translate-y-1/2 w-[560px] rounded-[10px] p-[65px]">
+    <div className="absolute left-1/2 top-1/2 w-[560px] -translate-y-1/2 rounded-[10px] bg-white p-[65px]">
       <div className="mb-[45px]">
         <img src="/logo.png" alt="logo" width={40} className="mr-4" />
       </div>
       <div className="mb-[65px]">
-        <FormControl isInvalid={!!errors?.phone} className="flex mb-6 items-center">
+        <FormControl isInvalid={!!errors?.phone} className="mb-6 flex items-center">
           <FormLabel className="w-20" htmlFor="phone">
             {t("AuthPanel.Phone")}
           </FormLabel>
@@ -142,7 +142,7 @@ export default function ResetPassword() {
             </InputRightElement>
           </InputGroup>
         </FormControl>
-        <FormControl isInvalid={!!errors.validationCode} className="flex mb-6 items-center">
+        <FormControl isInvalid={!!errors.validationCode} className="mb-6 flex items-center">
           <FormLabel className="w-20" htmlFor="validationCode">
             {t("AuthPanel.ValidationCode")}
           </FormLabel>
@@ -159,7 +159,7 @@ export default function ResetPassword() {
             placeholder={t("AuthPanel.ValidationCodePlaceholder") || ""}
           />
         </FormControl>
-        <FormControl isInvalid={!!errors.password} className="flex mb-6 items-center">
+        <FormControl isInvalid={!!errors.password} className="mb-6 flex items-center">
           <FormLabel className="w-20" htmlFor="password">
             {t("AuthPanel.NewPassword")}
           </FormLabel>
@@ -181,7 +181,7 @@ export default function ResetPassword() {
             </InputRightElement>
           </InputGroup>
         </FormControl>
-        <FormControl isInvalid={!!errors.confirmPassword} className="flex mb-6 items-center">
+        <FormControl isInvalid={!!errors.confirmPassword} className="mb-6 flex items-center">
           <FormLabel className="w-20" htmlFor="confirmPassword">
             {t("AuthPanel.ConfirmPassword")}
           </FormLabel>
diff --git a/web/src/pages/auth/signin/index.tsx b/web/src/pages/auth/signin/index.tsx
index 1a3a742066..5037ece76c 100644
--- a/web/src/pages/auth/signin/index.tsx
+++ b/web/src/pages/auth/signin/index.tsx
@@ -40,7 +40,7 @@ export default function SignIn() {
   }, [providers]);
 
   return (
-    <div className="bg-white absolute left-1/2 top-1/2 -translate-y-1/2 w-[560px] rounded-[10px] p-[65px] pb-[100px]">
+    <div className="absolute left-1/2 top-1/2 w-[560px] -translate-y-1/2 rounded-[10px] bg-white p-[65px] pb-[100px]">
       <div className="mb-[45px]">
         <img src="/logo.png" alt="logo" width={40} className="mr-4" />
       </div>
@@ -61,8 +61,8 @@ export default function SignIn() {
 
       {(githubProvider || wechatProvider) && (
         <div className="mt-20">
-          <div className="w-full text-center mb-5 relative before:content-[''] before:block before:w-full before:h-[1px] before:bg-slate-300 before:absolute before:top-1/2">
-            <span className="pl-5 pr-5 bg-white z-10 relative">or</span>
+          <div className="relative mb-5 w-full text-center before:absolute before:top-1/2 before:block before:h-[1px] before:w-full before:bg-slate-300 before:content-['']">
+            <span className="relative z-10 bg-white pl-5 pr-5">or</span>
           </div>
           {githubProvider && (
             <Button type="submit" className="w-full pt-5 pb-5" colorScheme="white" variant="plain">
diff --git a/web/src/pages/auth/signin/mods/LoginByPasswordPanel/index.tsx b/web/src/pages/auth/signin/mods/LoginByPasswordPanel/index.tsx
index 8935d64737..52c39a0f2c 100644
--- a/web/src/pages/auth/signin/mods/LoginByPasswordPanel/index.tsx
+++ b/web/src/pages/auth/signin/mods/LoginByPasswordPanel/index.tsx
@@ -51,7 +51,7 @@ export default function LoginByPasswordPanel({
 
   return (
     <div>
-      <FormControl isInvalid={!!errors?.account} className="flex mb-10 items-center">
+      <FormControl isInvalid={!!errors?.account} className="mb-10 flex items-center">
         <FormLabel className="w-20" htmlFor="account">
           {t("AuthPanel.Account")}
         </FormLabel>
@@ -62,7 +62,7 @@ export default function LoginByPasswordPanel({
           placeholder={t("AuthPanel.AccountPlaceholder") || ""}
         />
       </FormControl>
-      <FormControl isInvalid={!!errors.password} className="flex mb-10 items-center">
+      <FormControl isInvalid={!!errors.password} className="mb-10 flex items-center">
         <FormLabel className="w-20" htmlFor="phone">
           {t("AuthPanel.Password")}
         </FormLabel>
diff --git a/web/src/pages/auth/signin/mods/LoginByPhonePanel/index.tsx b/web/src/pages/auth/signin/mods/LoginByPhonePanel/index.tsx
index 02e1f3c1eb..ef60818e51 100644
--- a/web/src/pages/auth/signin/mods/LoginByPhonePanel/index.tsx
+++ b/web/src/pages/auth/signin/mods/LoginByPhonePanel/index.tsx
@@ -97,7 +97,7 @@ export default function LoginByPhonePanel({
 
   return (
     <div>
-      <FormControl isInvalid={!!errors?.phone} className="flex mb-10 items-center">
+      <FormControl isInvalid={!!errors?.phone} className="mb-10 flex items-center">
         <FormLabel className="w-20" htmlFor="phone">
           {t("AuthPanel.Phone")}
         </FormLabel>
@@ -126,7 +126,7 @@ export default function LoginByPhonePanel({
         </InputGroup>
       </FormControl>
 
-      <FormControl isInvalid={!!errors.validationCode} className="flex mb-10 items-center">
+      <FormControl isInvalid={!!errors.validationCode} className="mb-10 flex items-center">
         <FormLabel className="w-20" htmlFor="phone">
           {t("AuthPanel.ValidationCode")}
         </FormLabel>
diff --git a/web/src/pages/auth/signup/index.tsx b/web/src/pages/auth/signup/index.tsx
index 9632b74fc8..cff39f446c 100644
--- a/web/src/pages/auth/signup/index.tsx
+++ b/web/src/pages/auth/signup/index.tsx
@@ -140,12 +140,12 @@ export default function SignUp() {
   };
 
   return (
-    <div className="bg-white absolute left-1/2 top-1/2 -translate-y-1/2 w-[560px] rounded-[10px] p-[65px]">
+    <div className="absolute left-1/2 top-1/2 w-[560px] -translate-y-1/2 rounded-[10px] bg-white p-[65px]">
       <div className="mb-[45px]">
         <img src="/logo.png" alt="logo" width={40} className="mr-4" />
       </div>
       <div className="mb-[65px]">
-        <FormControl isInvalid={!!errors.account} className="flex mb-6 items-center">
+        <FormControl isInvalid={!!errors.account} className="mb-6 flex items-center">
           <FormLabel className="w-20" htmlFor="account">
             {t("AuthPanel.Account")}
           </FormLabel>
@@ -155,7 +155,7 @@ export default function SignUp() {
             placeholder={t("AuthPanel.AccountPlaceholder") || ""}
           />
         </FormControl>
-        <FormControl isInvalid={!!errors.password} className="flex mb-6 items-center">
+        <FormControl isInvalid={!!errors.password} className="mb-6 flex items-center">
           <FormLabel className="w-20" htmlFor="password">
             {t("AuthPanel.Password")}
           </FormLabel>
@@ -177,7 +177,7 @@ export default function SignUp() {
             </InputRightElement>
           </InputGroup>
         </FormControl>
-        <FormControl isInvalid={!!errors.confirmPassword} className="flex mb-6 items-center">
+        <FormControl isInvalid={!!errors.confirmPassword} className="mb-6 flex items-center">
           <FormLabel className="w-20" htmlFor="confirmPassword">
             {t("AuthPanel.ConfirmPassword")}
           </FormLabel>
@@ -200,7 +200,7 @@ export default function SignUp() {
           </InputGroup>
         </FormControl>
         {isNeedPhone && (
-          <FormControl isInvalid={!!errors?.phone} className="flex mb-6 items-center">
+          <FormControl isInvalid={!!errors?.phone} className="mb-6 flex items-center">
             <FormLabel className="w-20" htmlFor="phone">
               {t("AuthPanel.Phone")}
             </FormLabel>
@@ -230,7 +230,7 @@ export default function SignUp() {
           </FormControl>
         )}
         {isNeedPhone && (
-          <FormControl isInvalid={!!errors.validationCode} className="flex mb-10 items-center">
+          <FormControl isInvalid={!!errors.validationCode} className="mb-10 flex items-center">
             <FormLabel className="w-20" htmlFor="validationCode">
               {t("AuthPanel.ValidationCode")}
             </FormLabel>
@@ -249,7 +249,7 @@ export default function SignUp() {
           </FormControl>
         )}
         {false && (
-          <div className="flex items-center mb-6">
+          <div className="mb-6 flex items-center">
             <CheckboxGroup>
               <Checkbox
                 onChange={(e) => setAgreement(e.target.checked)}
@@ -257,7 +257,7 @@ export default function SignUp() {
                 colorScheme="primary"
               />
             </CheckboxGroup>
-            <span className="text-[14px] text-[#333333] ml-1">
+            <span className="ml-1 text-[14px] text-[#333333]">
               我已阅读并同意{" "}
               <a href="laf.dev" className="text-[#33BAB1]">
                 服务协议
diff --git a/web/src/pages/home/index.tsx b/web/src/pages/home/index.tsx
index 7798722390..ef93a49e82 100644
--- a/web/src/pages/home/index.tsx
+++ b/web/src/pages/home/index.tsx
@@ -45,7 +45,7 @@ function HomePage() {
   return (appListQuery.data?.data || []).length === 0 ? (
     <Empty />
   ) : (
-    <div className="w-11/12 lg:w-8/12 mt-10 mx-auto flex flex-col">
+    <div className="mx-auto mt-10 flex w-11/12 flex-col lg:w-8/12">
       <List
         appListQuery={appListQuery}
         setShouldRefetch={() => {
diff --git a/web/src/pages/home/mods/CreateAppModal/BundleItem/index.tsx b/web/src/pages/home/mods/CreateAppModal/BundleItem/index.tsx
index 732a141ae8..5a31368d88 100644
--- a/web/src/pages/home/mods/CreateAppModal/BundleItem/index.tsx
+++ b/web/src/pages/home/mods/CreateAppModal/BundleItem/index.tsx
@@ -16,7 +16,7 @@ import { TBundle } from "@/apis/typing";
 const ListItem = (props: { item: { key: string; value: string | number } }) => {
   const { item } = props;
   return (
-    <div className="flex justify-between text-second mb-1">
+    <div className="mb-1 flex justify-between text-second">
       <div>{item.key}</div>
       <div>{item.value}</div>
     </div>
@@ -43,13 +43,13 @@ export default function BundleItem(props: {
     <div
       onClick={() => onChange(bundle.id)}
       key={bundle.name}
-      className={clsx("min-w-[170px] border p-2 rounded-md cursor-pointer", {
+      className={clsx("min-w-[170px] cursor-pointer rounded-md border p-2", {
         "border-primary-500 bg-lafWhite-400": isActive && !darkMode,
         "bg-lafDark-400": isActive && darkMode,
       })}
     >
       <div
-        className={clsx("pb-2 border-b mb-2", {
+        className={clsx("mb-2 border-b pb-2", {
           "border-primary-500": isActive,
         })}
       >
@@ -60,7 +60,7 @@ export default function BundleItem(props: {
           ) : (
             <>
               {formatPrice(bundle.subscriptionOptions[durationIndex].specialPrice / months)}
-              <span className="text-base ml-1">/ {t("Monthly")}</span>
+              <span className="ml-1 text-base">/ {t("Monthly")}</span>
             </>
           )}
         </p>
diff --git a/web/src/pages/home/mods/CreateAppModal/RuntimeItem/index.tsx b/web/src/pages/home/mods/CreateAppModal/RuntimeItem/index.tsx
index fe0ff10b39..fca2080393 100644
--- a/web/src/pages/home/mods/CreateAppModal/RuntimeItem/index.tsx
+++ b/web/src/pages/home/mods/CreateAppModal/RuntimeItem/index.tsx
@@ -5,7 +5,7 @@ import { TBundle } from "@/apis/typing";
 
 export default function RuntimeItem(props: { bundle?: TBundle }) {
   return (
-    <div className="p-2 flex items-center bg-lafWhite-400 text-primary-500 font-semibold rounded border-primary-300 border">
+    <div className="flex items-center rounded border border-primary-300 bg-lafWhite-400 p-2 font-semibold text-primary-500">
       <CheckIcon className="mr-2" />
       <img src="/node.svg" alt="" className="mr-1" /> - latest
     </div>
diff --git a/web/src/pages/home/mods/CreateAppModal/index.tsx b/web/src/pages/home/mods/CreateAppModal/index.tsx
index fb825bb194..853d93b6ca 100644
--- a/web/src/pages/home/mods/CreateAppModal/index.tsx
+++ b/web/src/pages/home/mods/CreateAppModal/index.tsx
@@ -325,23 +325,23 @@ const CreateAppModal = (props: {
           <ModalFooter h={20}>
             {type === "edit" ? null : totalPrice <= 0 ? (
               <div className="mr-2">
-                <span className="ml-6 text-red-500 font-semibold text-xl">{t("Price.Free")}</span>
+                <span className="ml-6 text-xl font-semibold text-red-500">{t("Price.Free")}</span>
               </div>
             ) : (
               <div className="mr-2">
                 {t("TotalPrice")}:
-                <span className="ml-2 text-red-500 font-semibold text-xl">
+                <span className="ml-2 text-xl font-semibold text-red-500">
                   {formatPrice(totalPrice)}
                 </span>
                 <span className="ml-4 mr-2">
                   {t("Balance")}:
-                  <span className="text-xl ml-2">{formatPrice(accountQuery.data?.balance)}</span>
+                  <span className="ml-2 text-xl">{formatPrice(accountQuery.data?.balance)}</span>
                 </span>
                 {totalPrice > accountQuery.data?.balance ? (
                   <span className="mr-2">{t("balance is insufficient")}</span>
                 ) : null}
                 <ChargeButton amount={(totalPrice - accountQuery.data?.balance) / 100}>
-                  <span className="text-blue-800 text-lg cursor-pointer">{t("ChargeNow")}</span>
+                  <span className="cursor-pointer text-lg text-blue-800">{t("ChargeNow")}</span>
                 </ChargeButton>
               </div>
             )}
diff --git a/web/src/pages/home/mods/Empty/index.tsx b/web/src/pages/home/mods/Empty/index.tsx
index 00a3234eef..72d8df12ae 100644
--- a/web/src/pages/home/mods/Empty/index.tsx
+++ b/web/src/pages/home/mods/Empty/index.tsx
@@ -27,18 +27,18 @@ function Empty() {
 
   return (
     <div style={{ height: "75vh", minHeight: "500px" }}>
-      <div className="flex flex-col items-center justify-center h-full">
+      <div className="flex h-full flex-col items-center justify-center">
         <h2 className="text-3xl font-bold">
           {t("HomePanel.Hello")} 👋 ， {userInfo?.profile?.name || userInfo?.username} ，{" "}
           {t("HomePanel.Welcome")}
         </h2>
-        <p className="mt-10 text-xl w-[460px] mx-auto mb-8">{t("HomePanel.Introduction")}</p>
-        <div className="grid grid-cols-3 w-[722px]">
+        <p className="mx-auto mt-10 mb-8 w-[460px] text-xl">{t("HomePanel.Introduction")}</p>
+        <div className="grid w-[722px] grid-cols-3">
           {messageList.map((item, index) => {
             return (
               <div
                 key={index}
-                className={clsx("flex items-center pl-9 font-medium text-xl", styles.emptyItem, {
+                className={clsx("flex items-center pl-9 text-xl font-medium", styles.emptyItem, {
                   "bg-lafDark-300": darkMode,
                 })}
               >
diff --git a/web/src/pages/home/mods/List/index.tsx b/web/src/pages/home/mods/List/index.tsx
index 9da6296466..3944d38d79 100644
--- a/web/src/pages/home/mods/List/index.tsx
+++ b/web/src/pages/home/mods/List/index.tsx
@@ -49,8 +49,8 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
 
   return (
     <>
-      <div className="flex items-center justify-between mb-5">
-        <h2 className="font-semibold text-2xl flex items-center">
+      <div className="mb-5 flex items-center justify-between">
+        <h2 className="flex items-center text-2xl font-semibold">
           <FileTypeIcon type="app" className="mr-1 " />
           {t("HomePanel.MyApp")}
         </h2>
@@ -79,13 +79,13 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
       </div>
 
       <div className="flex flex-col overflow-auto">
-        <Box bg={bg} className="flex-none flex rounded-lg h-12 items-center px-3 lg:px-6 mb-3">
+        <Box bg={bg} className="mb-3 flex h-12 flex-none items-center rounded-lg px-3 lg:px-6">
           <div className="w-3/12 text-second ">{t("HomePanel.Application") + t("Name")}</div>
           <div className="w-2/12 text-second ">App ID</div>
-          <div className="w-2/12 text-second pl-2">{t("HomePanel.State")}</div>
+          <div className="w-2/12 pl-2 text-second">{t("HomePanel.State")}</div>
           <div className="w-2/12 text-second ">{t("HomePanel.Region")}</div>
           <div className="w-4/12 text-second ">{t("Time")}</div>
-          <div className="w-1/12 text-second pl-2 min-w-[100px]">{t("Operation")}</div>
+          <div className="w-1/12 min-w-[100px] pl-2 text-second">{t("Operation")}</div>
         </Box>
         <div className="flex-grow overflow-auto">
           {(appListQuery.data?.data || [])
@@ -95,12 +95,12 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
                 <Box
                   key={item?.appid}
                   bg={bg}
-                  className="flex rounded-lg py-4 items-center px-3 lg:px-6 mb-3 group"
+                  className="group mb-3 flex items-center rounded-lg py-4 px-3 lg:px-6"
                 >
                   <div className="w-3/12 ">
-                    <div className="font-bold text-lg">
+                    <div className="text-lg font-bold">
                       {item?.name}
-                      <span className="text-base text-second ml-2 border px-1 rounded">
+                      <span className="ml-2 rounded border px-1 text-base text-second">
                         {item?.bundle?.displayName}
                       </span>
                     </div>
@@ -123,7 +123,7 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
                       {t("EndTime")}: {formatDate(item.subscription.expiredAt)}
                       <CreateAppModal application={item} type="renewal">
                         <a
-                          className="text-primary-500 invisible group-hover:visible group-hover:inline-block ml-2"
+                          className="invisible ml-2 text-primary-500 group-hover:visible group-hover:inline-block"
                           href="/edit"
                         >
                           {t("Renew")}
@@ -131,7 +131,7 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
                       </CreateAppModal>
                     </p>
                   </div>
-                  <div className="w-1/12 flex min-w-[100px]">
+                  <div className="flex w-1/12 min-w-[100px]">
                     <Button
                       className="mr-2"
                       fontWeight={"semibold"}
@@ -199,7 +199,7 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
 
                         <DeleteAppModal item={item} onSuccess={() => setShouldRefetch(true)}>
                           <MenuItem minH="40px" display={"block"}>
-                            <a className="text-error-500 block" href="/delete">
+                            <a className="block text-error-500" href="/delete">
                               {t("DeleteApp")}
                             </a>
                           </MenuItem>