diff --git a/package.json b/package.json
index b8fea0929..1ee2259c7 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
     "story:dev": "histoire dev --port 4000",
-    "story:build": "histoire build"
+    "story:build": "histoire build",
+    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'"
   },
   "dependencies": {
     "@halo-dev/admin-api": "^1.0.0",
@@ -53,6 +54,7 @@
     "jsdom": "^19.0.0",
     "postcss": "^8.4.14",
     "prettier": "^2.6.2",
+    "prettier-plugin-tailwindcss": "^0.1.11",
     "sass": "^1.52.1",
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^3.0.24",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0aaa73e66..d29b04642 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,6 +30,7 @@ specifiers:
   pinia: ^2.0.14
   postcss: ^8.4.14
   prettier: ^2.6.2
+  prettier-plugin-tailwindcss: ^0.1.11
   sass: ^1.52.1
   start-server-and-test: ^1.14.0
   tailwindcss: ^3.0.24
@@ -84,6 +85,7 @@ devDependencies:
   jsdom: 19.0.0
   postcss: 8.4.14
   prettier: 2.6.2
+  prettier-plugin-tailwindcss: 0.1.11_prettier@2.6.2
   sass: 1.52.1
   start-server-and-test: 1.14.0
   tailwindcss: 3.0.24
@@ -5620,6 +5622,15 @@ packages:
       fast-diff: 1.2.0
     dev: true
 
+  /prettier-plugin-tailwindcss/0.1.11_prettier@2.6.2:
+    resolution: {integrity: sha512-a28+1jvpIZQdZ/W97wOXb6VqI762MKE/TxMMuibMEHhyYsSxQA8Ek30KObd5kJI2HF1ldtSYprFayXJXi3pz8Q==}
+    engines: {node: '>=12.17.0'}
+    peerDependencies:
+      prettier: '>=2.2.0'
+    dependencies:
+      prettier: 2.6.2
+    dev: true
+
   /prettier/2.6.2:
     resolution: {integrity: sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==}
     engines: {node: '>=10.13.0'}
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 000000000..f01cc7a68
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("prettier-plugin-tailwindcss")],
+};
diff --git a/src/components/base/alert/Alert.story.vue b/src/components/base/alert/Alert.story.vue
index c5c2108be..f4441989c 100644
--- a/src/components/base/alert/Alert.story.vue
+++ b/src/components/base/alert/Alert.story.vue
@@ -18,22 +18,22 @@ function initState() {
     <Variant title="Show Cases">
       <template #default>
         <div class="p-3">
-          <VAlert type="default" title="default" />
+          <VAlert title="default" type="default" />
         </div>
         <div class="p-3">
-          <VAlert type="success" title="default" />
+          <VAlert title="default" type="success" />
         </div>
         <div class="p-3">
-          <VAlert type="info" title="default" />
+          <VAlert title="default" type="info" />
         </div>
         <div class="p-3">
-          <VAlert type="warning" title="default" />
+          <VAlert title="default" type="warning" />
         </div>
         <div class="p-3">
-          <VAlert type="error" title="default" />
+          <VAlert title="default" type="error" />
         </div>
         <div class="p-3">
-          <VAlert type="default" title="提示">
+          <VAlert title="提示" type="default">
             <template #description>
               目前仅支持远程 Git 仓库和 ZIP 下载链接。更多主题可以访问：
               <a href="https://halo.run/themes">https://halo.run/themes</a>
@@ -48,14 +48,14 @@ function initState() {
       </template>
     </Variant>
 
-    <Variant title="Playground" :init-state="initState">
+    <Variant :init-state="initState" title="Playground">
       <template #default="{ state }">
         <div class="p-3">
           <VAlert
-            :type="state.type"
-            :title="state.title"
-            :description="state.description"
             :closable="state.closable"
+            :description="state.description"
+            :title="state.title"
+            :type="state.type"
           />
         </div>
       </template>
@@ -71,7 +71,7 @@ function initState() {
     <Variant title="Slots">
       <template #default>
         <div class="p-3">
-          <VAlert type="default" title="你有新的消息">
+          <VAlert title="你有新的消息" type="default">
             <template #icon>
               <IconMessage />
             </template>
diff --git a/src/components/base/alert/Alert.vue b/src/components/base/alert/Alert.vue
index f5c0eae20..74101c22f 100644
--- a/src/components/base/alert/Alert.vue
+++ b/src/components/base/alert/Alert.vue
@@ -119,7 +119,7 @@ const handleClose = () => {
 
   .alert-actions {
     @apply border-t;
-    @apply pt-2 mt-3;
+    @apply mt-3 pt-2;
   }
 
   &.alert-default {
diff --git a/src/components/base/button/Button.story.vue b/src/components/base/button/Button.story.vue
index ecc82b5c2..0d8839014 100644
--- a/src/components/base/button/Button.story.vue
+++ b/src/components/base/button/Button.story.vue
@@ -3,75 +3,75 @@
     <Variant title="Type">
       <template #default>
         <VSpace>
-          <VButton type="primary"> primary </VButton>
-          <VButton type="secondary"> secondary </VButton>
-          <VButton type="danger"> danger </VButton>
-          <VButton type="default"> default </VButton>
+          <VButton type="primary"> primary</VButton>
+          <VButton type="secondary"> secondary</VButton>
+          <VButton type="danger"> danger</VButton>
+          <VButton type="default"> default</VButton>
         </VSpace>
       </template>
     </Variant>
     <Variant title="Size">
       <template #default>
         <VSpace>
-          <VButton type="secondary" size="lg"> Large </VButton>
-          <VButton type="secondary"> default </VButton>
-          <VButton type="secondary" size="sm"> sm </VButton>
-          <VButton type="secondary" size="xs"> xs </VButton>
+          <VButton size="lg" type="secondary"> Large</VButton>
+          <VButton type="secondary"> default</VButton>
+          <VButton size="sm" type="secondary"> sm</VButton>
+          <VButton size="xs" type="secondary"> xs</VButton>
         </VSpace>
       </template>
     </Variant>
     <Variant title="Circle">
       <template #default>
         <VSpace>
-          <VButton type="secondary" size="lg" circle> lg </VButton>
-          <VButton type="secondary" circle> d </VButton>
-          <VButton type="secondary" size="sm" circle> sm </VButton>
-          <VButton type="secondary" size="xs" circle> xs </VButton>
+          <VButton circle size="lg" type="secondary"> lg</VButton>
+          <VButton circle type="secondary"> d</VButton>
+          <VButton circle size="sm" type="secondary"> sm</VButton>
+          <VButton circle size="xs" type="secondary"> xs</VButton>
         </VSpace>
       </template>
     </Variant>
     <Variant title="Block">
       <template #default>
-        <VSpace direction="column" class="w-full">
-          <VButton type="primary" block> primary </VButton>
-          <VButton type="secondary" block> secondary </VButton>
-          <VButton type="danger" block> danger </VButton>
-          <VButton type="default" block> default </VButton>
+        <VSpace class="w-full" direction="column">
+          <VButton block type="primary"> primary</VButton>
+          <VButton block type="secondary"> secondary</VButton>
+          <VButton block type="danger"> danger</VButton>
+          <VButton block type="default"> default</VButton>
         </VSpace>
       </template>
     </Variant>
-    <Variant title="Disabled" :init-state="disabledState">
+    <Variant :init-state="disabledState" title="Disabled">
       <template #default="{ state }">
         <VSpace>
-          <VButton type="primary" :disabled="state.disabled"> primary </VButton>
-          <VButton type="secondary" :disabled="state.disabled">
+          <VButton :disabled="state.disabled" type="primary"> primary</VButton>
+          <VButton :disabled="state.disabled" type="secondary">
             secondary
           </VButton>
-          <VButton type="danger" :disabled="state.disabled"> danger </VButton>
-          <VButton type="default" :disabled="state.disabled"> default </VButton>
+          <VButton :disabled="state.disabled" type="danger"> danger</VButton>
+          <VButton :disabled="state.disabled" type="default"> default</VButton>
         </VSpace>
       </template>
       <template #controls="{ state }">
         <HstCheckbox v-model="state.disabled" title="Disabled" />
       </template>
     </Variant>
-    <Variant title="Loading" :init-state="loadingState">
+    <Variant :init-state="loadingState" title="Loading">
       <template #default="{ state }">
         <VSpace>
-          <VButton type="primary" :loading="state.loading"> Primary </VButton>
-          <VButton type="secondary" :loading="state.loading">
+          <VButton :loading="state.loading" type="primary"> Primary</VButton>
+          <VButton :loading="state.loading" type="secondary">
             Secondary
           </VButton>
-          <VButton type="danger" :loading="state.loading"> Danger </VButton>
-          <VButton type="default" :loading="state.loading"> Default </VButton>
-          <VButton size="lg" type="secondary" :loading="state.loading">
+          <VButton :loading="state.loading" type="danger"> Danger</VButton>
+          <VButton :loading="state.loading" type="default"> Default</VButton>
+          <VButton :loading="state.loading" size="lg" type="secondary">
             Large
           </VButton>
-          <VButton type="secondary" :loading="state.loading">Default</VButton>
-          <VButton size="sm" type="secondary" :loading="state.loading">
+          <VButton :loading="state.loading" type="secondary">Default</VButton>
+          <VButton :loading="state.loading" size="sm" type="secondary">
             sm
           </VButton>
-          <VButton size="xs" type="secondary" :loading="state.loading">
+          <VButton :loading="state.loading" size="xs" type="secondary">
             xs
           </VButton>
         </VSpace>
@@ -80,49 +80,49 @@
         <HstCheckbox v-model="state.loading" title="Loading" />
       </template>
     </Variant>
-    <Variant title="Icon" :init-state="iconState">
+    <Variant :init-state="iconState" title="Icon">
       <template #default="{ state }">
         <VSpace>
           <VButton
+            :disabled="state.disabled"
+            :loading="state.loading"
             size="lg"
             type="primary"
-            :loading="state.loading"
-            :disabled="state.disabled"
           >
             <template #icon>
-              <IconSettings class="w-full h-full" />
+              <IconSettings class="h-full w-full" />
             </template>
             Large
           </VButton>
           <VButton
-            type="secondary"
-            :loading="state.loading"
             :disabled="state.disabled"
+            :loading="state.loading"
+            type="secondary"
           >
             <template #icon>
-              <IconSettings class="w-full h-full" />
+              <IconSettings class="h-full w-full" />
             </template>
             Default
           </VButton>
           <VButton
+            :disabled="state.disabled"
+            :loading="state.loading"
             size="sm"
             type="danger"
-            :loading="state.loading"
-            :disabled="state.disabled"
           >
             <template #icon>
-              <IconSettings class="w-full h-full" />
+              <IconSettings class="h-full w-full" />
             </template>
             sm
           </VButton>
           <VButton
+            :disabled="state.disabled"
+            :loading="state.loading"
             size="xs"
             type="default"
-            :loading="state.loading"
-            :disabled="state.disabled"
           >
             <template #icon>
-              <IconSettings class="w-full h-full" />
+              <IconSettings class="h-full w-full" />
             </template>
             xs
           </VButton>
diff --git a/src/components/base/card/Card.story.vue b/src/components/base/card/Card.story.vue
index 396d7de14..2a2feca74 100644
--- a/src/components/base/card/Card.story.vue
+++ b/src/components/base/card/Card.story.vue
@@ -11,7 +11,7 @@ import { IconSettings } from "@/core/icons";
     <template #default>
       <div class="p-3">
         <VCard title="登录">
-          <VSpace direction="column" class="w-full">
+          <VSpace class="w-full" direction="column">
             <VInput placeholder="用户名"></VInput>
             <VInput placeholder="密码"></VInput>
           </VSpace>
@@ -33,260 +33,260 @@ import { IconSettings } from "@/core/icons";
       <!--      https://lofiui.co/-->
       <div class="p-3">
         <VCard title="Page Views">
-          <div class="flex flex-col items-center w-full bg-white">
-            <div class="flex items-end flex-grow w-full space-x-2 sm:space-x-3">
+          <div class="flex w-full flex-col items-center bg-white">
+            <div class="flex w-full flex-grow items-end space-x-2 sm:space-x-3">
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$37,500</span
                 >
-                <div class="flex items-end w-full">
+                <div class="flex w-full items-end">
                   <div
-                    class="relative flex justify-center flex-grow h-8 bg-indigo-200"
+                    class="relative flex h-8 flex-grow justify-center bg-indigo-200"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-6 bg-indigo-300"
+                    class="relative flex h-6 flex-grow justify-center bg-indigo-300"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-16 bg-indigo-400"
+                    class="relative flex h-16 flex-grow justify-center bg-indigo-400"
                   ></div>
                 </div>
                 <span class="absolute bottom-0 text-xs font-bold">Jan</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$45,000</span
                 >
-                <div class="flex items-end w-full">
+                <div class="flex w-full items-end">
                   <div
-                    class="relative flex justify-center flex-grow h-10 bg-indigo-200"
+                    class="relative flex h-10 flex-grow justify-center bg-indigo-200"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-6 bg-indigo-300"
+                    class="relative flex h-6 flex-grow justify-center bg-indigo-300"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-20 bg-indigo-400"
+                    class="relative flex h-20 flex-grow justify-center bg-indigo-400"
                   ></div>
                 </div>
                 <span class="absolute bottom-0 text-xs font-bold">Feb</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$47,500</span
                 >
-                <div class="flex items-end w-full">
+                <div class="flex w-full items-end">
                   <div
-                    class="relative flex justify-center flex-grow h-10 bg-indigo-200"
+                    class="relative flex h-10 flex-grow justify-center bg-indigo-200"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-8 bg-indigo-300"
+                    class="relative flex h-8 flex-grow justify-center bg-indigo-300"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-20 bg-indigo-400"
+                    class="relative flex h-20 flex-grow justify-center bg-indigo-400"
                   ></div>
                 </div>
                 <span class="absolute bottom-0 text-xs font-bold">Mar</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$50,000</span
                 >
-                <div class="flex items-end w-full">
+                <div class="flex w-full items-end">
                   <div
-                    class="relative flex justify-center flex-grow h-10 bg-indigo-200"
+                    class="relative flex h-10 flex-grow justify-center bg-indigo-200"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-6 bg-indigo-300"
+                    class="relative flex h-6 flex-grow justify-center bg-indigo-300"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-24 bg-indigo-400"
+                    class="relative flex h-24 flex-grow justify-center bg-indigo-400"
                   ></div>
                 </div>
                 <span class="absolute bottom-0 text-xs font-bold">Apr</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$47,500</span
                 >
-                <div class="flex items-end w-full">
+                <div class="flex w-full items-end">
                   <div
-                    class="relative flex justify-center flex-grow h-10 bg-indigo-200"
+                    class="relative flex h-10 flex-grow justify-center bg-indigo-200"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-8 bg-indigo-300"
+                    class="relative flex h-8 flex-grow justify-center bg-indigo-300"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-20 bg-indigo-400"
+                    class="relative flex h-20 flex-grow justify-center bg-indigo-400"
                   ></div>
                 </div>
                 <span class="absolute bottom-0 text-xs font-bold">May</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$55,000</span
                 >
-                <div class="flex items-end w-full">
+                <div class="flex w-full items-end">
                   <div
-                    class="relative flex justify-center flex-grow h-12 bg-indigo-200"
+                    class="relative flex h-12 flex-grow justify-center bg-indigo-200"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-8 bg-indigo-300"
+                    class="relative flex h-8 flex-grow justify-center bg-indigo-300"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-24 bg-indigo-400"
+                    class="relative flex h-24 flex-grow justify-center bg-indigo-400"
                   ></div>
                 </div>
                 <span class="absolute bottom-0 text-xs font-bold">Jun</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$60,000</span
                 >
-                <div class="flex items-end w-full">
+                <div class="flex w-full items-end">
                   <div
-                    class="relative flex justify-center flex-grow h-12 bg-indigo-200"
+                    class="relative flex h-12 flex-grow justify-center bg-indigo-200"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-16 bg-indigo-300"
+                    class="relative flex h-16 flex-grow justify-center bg-indigo-300"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-20 bg-indigo-400"
+                    class="relative flex h-20 flex-grow justify-center bg-indigo-400"
                   ></div>
                 </div>
                 <span class="absolute bottom-0 text-xs font-bold">Jul</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$57,500</span
                 >
-                <div class="flex items-end w-full">
+                <div class="flex w-full items-end">
                   <div
-                    class="relative flex justify-center flex-grow h-12 bg-indigo-200"
+                    class="relative flex h-12 flex-grow justify-center bg-indigo-200"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-10 bg-indigo-300"
+                    class="relative flex h-10 flex-grow justify-center bg-indigo-300"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-24 bg-indigo-400"
+                    class="relative flex h-24 flex-grow justify-center bg-indigo-400"
                   ></div>
                 </div>
                 <span class="absolute bottom-0 text-xs font-bold">Aug</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$67,500</span
                 >
-                <div class="flex items-end w-full">
+                <div class="flex w-full items-end">
                   <div
-                    class="relative flex justify-center flex-grow h-12 bg-indigo-200"
+                    class="relative flex h-12 flex-grow justify-center bg-indigo-200"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-10 bg-indigo-300"
+                    class="relative flex h-10 flex-grow justify-center bg-indigo-300"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-32 bg-indigo-400"
+                    class="relative flex h-32 flex-grow justify-center bg-indigo-400"
                   ></div>
                 </div>
                 <span class="absolute bottom-0 text-xs font-bold">Sep</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$65,000</span
                 >
-                <div class="flex items-end w-full">
+                <div class="flex w-full items-end">
                   <div
-                    class="relative flex justify-center flex-grow h-12 bg-indigo-200"
+                    class="relative flex h-12 flex-grow justify-center bg-indigo-200"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-12 bg-indigo-300"
+                    class="relative flex h-12 flex-grow justify-center bg-indigo-300"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow bg-indigo-400 h-28"
+                    class="relative flex h-28 flex-grow justify-center bg-indigo-400"
                   ></div>
                 </div>
                 <span class="absolute bottom-0 text-xs font-bold">Oct</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$70,000</span
                 >
-                <div class="flex items-end w-full">
+                <div class="flex w-full items-end">
                   <div
-                    class="relative flex justify-center flex-grow h-8 bg-indigo-200"
+                    class="relative flex h-8 flex-grow justify-center bg-indigo-200"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-8 bg-indigo-300"
+                    class="relative flex h-8 flex-grow justify-center bg-indigo-300"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-40 bg-indigo-400"
+                    class="relative flex h-40 flex-grow justify-center bg-indigo-400"
                   ></div>
                 </div>
                 <span class="absolute bottom-0 text-xs font-bold">Nov</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$75,000</span
                 >
-                <div class="flex items-end w-full">
+                <div class="flex w-full items-end">
                   <div
-                    class="relative flex justify-center flex-grow h-12 bg-indigo-200"
+                    class="relative flex h-12 flex-grow justify-center bg-indigo-200"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-8 bg-indigo-300"
+                    class="relative flex h-8 flex-grow justify-center bg-indigo-300"
                   ></div>
                   <div
-                    class="relative flex justify-center flex-grow h-40 bg-indigo-400"
+                    class="relative flex h-40 flex-grow justify-center bg-indigo-400"
                   ></div>
                 </div>
                 <span class="absolute bottom-0 text-xs font-bold">Dec</span>
               </div>
             </div>
-            <div class="flex w-full mt-3">
-              <div class="flex items-center ml-auto">
-                <span class="block w-4 h-4 bg-indigo-400"></span>
+            <div class="mt-3 flex w-full">
+              <div class="ml-auto flex items-center">
+                <span class="block h-4 w-4 bg-indigo-400"></span>
                 <span class="ml-1 text-xs font-medium">Existing</span>
               </div>
-              <div class="flex items-center ml-4">
-                <span class="block w-4 h-4 bg-indigo-300"></span>
+              <div class="ml-4 flex items-center">
+                <span class="block h-4 w-4 bg-indigo-300"></span>
                 <span class="ml-1 text-xs font-medium">Upgrades</span>
               </div>
-              <div class="flex items-center ml-4">
-                <span class="block w-4 h-4 bg-indigo-200"></span>
+              <div class="ml-4 flex items-center">
+                <span class="block h-4 w-4 bg-indigo-200"></span>
                 <span class="ml-1 text-xs font-medium">New</span>
               </div>
             </div>
@@ -297,236 +297,236 @@ import { IconSettings } from "@/core/icons";
       <!--      https://lofiui.co/-->
       <div class="p-3">
         <VCard title="Page Views">
-          <div class="flex flex-col items-center w-full bg-white">
-            <div class="flex items-end flex-grow w-full space-x-2 sm:space-x-3">
+          <div class="flex w-full flex-col items-center bg-white">
+            <div class="flex w-full flex-grow items-end space-x-2 sm:space-x-3">
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$37,500</span
                 >
                 <div
-                  class="relative flex justify-center w-full h-8 bg-indigo-200"
+                  class="relative flex h-8 w-full justify-center bg-indigo-200"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-6 bg-indigo-300"
+                  class="relative flex h-6 w-full justify-center bg-indigo-300"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-16 bg-indigo-400"
+                  class="relative flex h-16 w-full justify-center bg-indigo-400"
                 ></div>
                 <span class="absolute bottom-0 text-xs font-bold">Jan</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$45,000</span
                 >
                 <div
-                  class="relative flex justify-center w-full h-10 bg-indigo-200"
+                  class="relative flex h-10 w-full justify-center bg-indigo-200"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-6 bg-indigo-300"
+                  class="relative flex h-6 w-full justify-center bg-indigo-300"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-20 bg-indigo-400"
+                  class="relative flex h-20 w-full justify-center bg-indigo-400"
                 ></div>
                 <span class="absolute bottom-0 text-xs font-bold">Feb</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$47,500</span
                 >
                 <div
-                  class="relative flex justify-center w-full h-10 bg-indigo-200"
+                  class="relative flex h-10 w-full justify-center bg-indigo-200"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-8 bg-indigo-300"
+                  class="relative flex h-8 w-full justify-center bg-indigo-300"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-20 bg-indigo-400"
+                  class="relative flex h-20 w-full justify-center bg-indigo-400"
                 ></div>
                 <span class="absolute bottom-0 text-xs font-bold">Mar</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$50,000</span
                 >
                 <div
-                  class="relative flex justify-center w-full h-10 bg-indigo-200"
+                  class="relative flex h-10 w-full justify-center bg-indigo-200"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-6 bg-indigo-300"
+                  class="relative flex h-6 w-full justify-center bg-indigo-300"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-24 bg-indigo-400"
+                  class="relative flex h-24 w-full justify-center bg-indigo-400"
                 ></div>
                 <span class="absolute bottom-0 text-xs font-bold">Apr</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$47,500</span
                 >
                 <div
-                  class="relative flex justify-center w-full h-10 bg-indigo-200"
+                  class="relative flex h-10 w-full justify-center bg-indigo-200"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-8 bg-indigo-300"
+                  class="relative flex h-8 w-full justify-center bg-indigo-300"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-20 bg-indigo-400"
+                  class="relative flex h-20 w-full justify-center bg-indigo-400"
                 ></div>
                 <span class="absolute bottom-0 text-xs font-bold">May</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$55,000</span
                 >
                 <div
-                  class="relative flex justify-center w-full h-12 bg-indigo-200"
+                  class="relative flex h-12 w-full justify-center bg-indigo-200"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-8 bg-indigo-300"
+                  class="relative flex h-8 w-full justify-center bg-indigo-300"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-24 bg-indigo-400"
+                  class="relative flex h-24 w-full justify-center bg-indigo-400"
                 ></div>
                 <span class="absolute bottom-0 text-xs font-bold">Jun</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$60,000</span
                 >
                 <div
-                  class="relative flex justify-center w-full h-12 bg-indigo-200"
+                  class="relative flex h-12 w-full justify-center bg-indigo-200"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-16 bg-indigo-300"
+                  class="relative flex h-16 w-full justify-center bg-indigo-300"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-20 bg-indigo-400"
+                  class="relative flex h-20 w-full justify-center bg-indigo-400"
                 ></div>
                 <span class="absolute bottom-0 text-xs font-bold">Jul</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$57,500</span
                 >
                 <div
-                  class="relative flex justify-center w-full h-12 bg-indigo-200"
+                  class="relative flex h-12 w-full justify-center bg-indigo-200"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-10 bg-indigo-300"
+                  class="relative flex h-10 w-full justify-center bg-indigo-300"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-24 bg-indigo-400"
+                  class="relative flex h-24 w-full justify-center bg-indigo-400"
                 ></div>
                 <span class="absolute bottom-0 text-xs font-bold">Aug</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$67,500</span
                 >
                 <div
-                  class="relative flex justify-center w-full h-12 bg-indigo-200"
+                  class="relative flex h-12 w-full justify-center bg-indigo-200"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-10 bg-indigo-300"
+                  class="relative flex h-10 w-full justify-center bg-indigo-300"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-32 bg-indigo-400"
+                  class="relative flex h-32 w-full justify-center bg-indigo-400"
                 ></div>
                 <span class="absolute bottom-0 text-xs font-bold">Sep</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$65,000</span
                 >
                 <div
-                  class="relative flex justify-center w-full h-12 bg-indigo-200"
+                  class="relative flex h-12 w-full justify-center bg-indigo-200"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-12 bg-indigo-300"
+                  class="relative flex h-12 w-full justify-center bg-indigo-300"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full bg-indigo-400 h-28"
+                  class="relative flex h-28 w-full justify-center bg-indigo-400"
                 ></div>
                 <span class="absolute bottom-0 text-xs font-bold">Oct</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$70,000</span
                 >
                 <div
-                  class="relative flex justify-center w-full h-8 bg-indigo-200"
+                  class="relative flex h-8 w-full justify-center bg-indigo-200"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-8 bg-indigo-300"
+                  class="relative flex h-8 w-full justify-center bg-indigo-300"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-40 bg-indigo-400"
+                  class="relative flex h-40 w-full justify-center bg-indigo-400"
                 ></div>
                 <span class="absolute bottom-0 text-xs font-bold">Nov</span>
               </div>
               <div
-                class="relative flex flex-col items-center flex-grow pb-5 group"
+                class="group relative flex flex-grow flex-col items-center pb-5"
               >
                 <span
-                  class="absolute top-0 hidden -mt-6 text-xs font-bold group-hover:block"
+                  class="absolute top-0 -mt-6 hidden text-xs font-bold group-hover:block"
                   >$75,000</span
                 >
                 <div
-                  class="relative flex justify-center w-full h-12 bg-indigo-200"
+                  class="relative flex h-12 w-full justify-center bg-indigo-200"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-8 bg-indigo-300"
+                  class="relative flex h-8 w-full justify-center bg-indigo-300"
                 ></div>
                 <div
-                  class="relative flex justify-center w-full h-40 bg-indigo-400"
+                  class="relative flex h-40 w-full justify-center bg-indigo-400"
                 ></div>
                 <span class="absolute bottom-0 text-xs font-bold">Dec</span>
               </div>
             </div>
-            <div class="flex w-full mt-3">
-              <div class="flex items-center ml-auto">
-                <span class="block w-4 h-4 bg-indigo-400"></span>
+            <div class="mt-3 flex w-full">
+              <div class="ml-auto flex items-center">
+                <span class="block h-4 w-4 bg-indigo-400"></span>
                 <span class="ml-1 text-xs font-medium">Existing</span>
               </div>
-              <div class="flex items-center ml-4">
-                <span class="block w-4 h-4 bg-indigo-300"></span>
+              <div class="ml-4 flex items-center">
+                <span class="block h-4 w-4 bg-indigo-300"></span>
                 <span class="ml-1 text-xs font-medium">Upgrades</span>
               </div>
-              <div class="flex items-center ml-4">
-                <span class="block w-4 h-4 bg-indigo-200"></span>
+              <div class="ml-4 flex items-center">
+                <span class="block h-4 w-4 bg-indigo-200"></span>
                 <span class="ml-1 text-xs font-medium">New</span>
               </div>
             </div>
@@ -535,30 +535,30 @@ import { IconSettings } from "@/core/icons";
       </div>
 
       <div class="p-3">
-        <div class="grid lg:grid-cols-3 md:grid-cols-2 gap-6 w-full">
+        <div class="grid w-full gap-6 md:grid-cols-2 lg:grid-cols-3">
           <VCard>
             <div class="flex items-center bg-white">
               <div
-                class="flex flex-shrink-0 items-center justify-center bg-green-200 h-16 w-16 rounded"
+                class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-green-200"
               >
                 <svg
-                  class="w-6 h-6 fill-current text-green-700"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
+                  class="h-6 w-6 fill-current text-green-700"
                   fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    fill-rule="evenodd"
-                    d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
                     clip-rule="evenodd"
+                    d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
+                    fill-rule="evenodd"
                   />
                 </svg>
               </div>
-              <div class="flex-grow flex flex-col ml-4">
+              <div class="ml-4 flex flex-grow flex-col">
                 <span class="text-xl font-bold">$8,430</span>
                 <div class="flex items-center justify-between">
                   <span class="text-gray-500">Revenue last 30 days</span>
-                  <span class="text-green-500 text-sm font-semibold ml-2"
+                  <span class="ml-2 text-sm font-semibold text-green-500"
                     >+12.6%</span
                   >
                 </div>
@@ -569,26 +569,26 @@ import { IconSettings } from "@/core/icons";
           <VCard>
             <div class="flex items-center bg-white">
               <div
-                class="flex flex-shrink-0 items-center justify-center bg-red-200 h-16 w-16 rounded"
+                class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-red-200"
               >
                 <svg
-                  class="w-6 h-6 fill-current text-red-700"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
+                  class="h-6 w-6 fill-current text-red-700"
                   fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    fill-rule="evenodd"
-                    d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
                     clip-rule="evenodd"
+                    d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
+                    fill-rule="evenodd"
                   />
                 </svg>
               </div>
-              <div class="flex-grow flex flex-col ml-4">
+              <div class="ml-4 flex flex-grow flex-col">
                 <span class="text-xl font-bold">211</span>
                 <div class="flex items-center justify-between">
                   <span class="text-gray-500">Sales last 30 days</span>
-                  <span class="text-red-500 text-sm font-semibold ml-2"
+                  <span class="ml-2 text-sm font-semibold text-red-500"
                     >-8.1%</span
                   >
                 </div>
@@ -599,26 +599,26 @@ import { IconSettings } from "@/core/icons";
           <VCard>
             <div class="flex items-center bg-white">
               <div
-                class="flex flex-shrink-0 items-center justify-center bg-green-200 h-16 w-16 rounded"
+                class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded bg-green-200"
               >
                 <svg
-                  class="w-6 h-6 fill-current text-green-700"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
+                  class="h-6 w-6 fill-current text-green-700"
                   fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    fill-rule="evenodd"
-                    d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
                     clip-rule="evenodd"
+                    d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
+                    fill-rule="evenodd"
                   />
                 </svg>
               </div>
-              <div class="flex-grow flex flex-col ml-4">
+              <div class="ml-4 flex flex-grow flex-col">
                 <span class="text-xl font-bold">140</span>
                 <div class="flex items-center justify-between">
                   <span class="text-gray-500">Customers last 30 days</span>
-                  <span class="text-green-500 text-sm font-semibold ml-2"
+                  <span class="ml-2 text-sm font-semibold text-green-500"
                     >+28.4%</span
                   >
                 </div>
diff --git a/src/components/base/card/Card.vue b/src/components/base/card/Card.vue
index ede7cbf85..aecc8257f 100644
--- a/src/components/base/card/Card.vue
+++ b/src/components/base/card/Card.vue
@@ -33,7 +33,7 @@ defineProps({
 </template>
 <style lang="scss">
 .card-wrapper {
-  @apply flex flex-col box-border;
+  @apply box-border flex flex-col;
   @apply bg-white;
   @apply shadow-sm;
   @apply overflow-hidden;
diff --git a/src/components/base/checkbox/CheckBox.story.vue b/src/components/base/checkbox/CheckBox.story.vue
index 2c8fe2973..99eae791d 100644
--- a/src/components/base/checkbox/CheckBox.story.vue
+++ b/src/components/base/checkbox/CheckBox.story.vue
@@ -1,5 +1,5 @@
 <template>
-  <Story title="CheckBox" :init-state="initState">
+  <Story :init-state="initState" title="CheckBox">
     <template #default="{ state }">
       <VCheckboxGroup
         v-model="state.value"
diff --git a/src/components/base/header/PageHeader.vue b/src/components/base/header/PageHeader.vue
index 21e10358f..fbf167509 100644
--- a/src/components/base/header/PageHeader.vue
+++ b/src/components/base/header/PageHeader.vue
@@ -6,9 +6,9 @@ defineProps({
 });
 </script>
 <template>
-  <div class="flex items-center justify-between p-4 bg-white">
-    <div class="flex-1 self-center min-w-0">
-      <h2 class="flex text-xl font-bold text-gray-800 truncate items-center">
+  <div class="flex items-center justify-between bg-white p-4">
+    <div class="min-w-0 flex-1 self-center">
+      <h2 class="flex items-center truncate text-xl font-bold text-gray-800">
         <slot name="icon" />
         <span>{{ title }}</span>
       </h2>
diff --git a/src/components/base/input/Input.story.vue b/src/components/base/input/Input.story.vue
index d431698ec..5de1287d9 100644
--- a/src/components/base/input/Input.story.vue
+++ b/src/components/base/input/Input.story.vue
@@ -1,5 +1,5 @@
 <template>
-  <Story title="Input" :init-state="initState">
+  <Story :init-state="initState" title="Input">
     <template #default="{ state }">
       <div class="w-1/2">
         <VInput
diff --git a/src/components/base/menu/Menu.story.vue b/src/components/base/menu/Menu.story.vue
index 0cd6fd395..de7a3ba49 100644
--- a/src/components/base/menu/Menu.story.vue
+++ b/src/components/base/menu/Menu.story.vue
@@ -4,7 +4,7 @@
       <template #default>
         <div class="w-1/3">
           <VMenu>
-            <VMenuItem title="仪表盘" active>
+            <VMenuItem active title="仪表盘">
               <template #icon>
                 <Component :is="IconDashboard" />
               </template>
@@ -39,10 +39,10 @@
 <script lang="ts" setup>
 import { VMenu, VMenuItem, VMenuLabel } from "./index";
 import {
-  IconDashboard,
   IconBookRead,
-  IconPages,
-  IconMessage,
+  IconDashboard,
   IconFolder,
+  IconMessage,
+  IconPages,
 } from "@/core/icons";
 </script>
diff --git a/src/components/base/menu/Menu.vue b/src/components/base/menu/Menu.vue
index 22428ed71..0653185e7 100644
--- a/src/components/base/menu/Menu.vue
+++ b/src/components/base/menu/Menu.vue
@@ -13,7 +13,7 @@ provide<string[] | undefined>("openIds", props.openIds);
 </script>
 
 <template>
-  <div class="menu-container p-3 w-full">
+  <div class="menu-container w-full p-3">
     <ul>
       <slot />
     </ul>
diff --git a/src/components/base/menu/MenuItem.vue b/src/components/base/menu/MenuItem.vue
index f65716912..59d581fb1 100644
--- a/src/components/base/menu/MenuItem.vue
+++ b/src/components/base/menu/MenuItem.vue
@@ -49,10 +49,10 @@ function handleClick() {
     @click.stop="handleClick"
   >
     <div :class="{ active }" class="menu-item-title">
-      <span v-if="$slots.icon" class="menu-icon self-center mr-3">
+      <span v-if="$slots.icon" class="menu-icon mr-3 self-center">
         <slot name="icon" />
       </span>
-      <span class="menu-title self-center flex-1">
+      <span class="menu-title flex-1 self-center">
         {{ title }}
       </span>
       <span
diff --git a/src/components/base/menu/RoutesMenu.tsx b/src/components/base/menu/RoutesMenu.tsx
index 9aae9ad2b..dc14e8434 100644
--- a/src/components/base/menu/RoutesMenu.tsx
+++ b/src/components/base/menu/RoutesMenu.tsx
@@ -1,9 +1,9 @@
+import type { Component, PropType } from "vue";
 import { computed, defineComponent } from "vue";
-import type { PropType, Component } from "vue";
 import type { MenuGroupType, MenuItemType } from "@/router/menus.config";
 import { VMenu, VMenuItem, VMenuLabel } from "@/components/base/menu/index";
-import { useRoute, useRouter } from "vue-router";
 import type { RouteLocationMatched } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 
 const VRoutesMenu = defineComponent({
   name: "VRoutesMenu",
diff --git a/src/components/base/menu/__tests__/__snapshots__/Menu.spec.tsx.snap b/src/components/base/menu/__tests__/__snapshots__/Menu.spec.tsx.snap
index ba2d4ce79..57db19cca 100644
--- a/src/components/base/menu/__tests__/__snapshots__/Menu.spec.tsx.snap
+++ b/src/components/base/menu/__tests__/__snapshots__/Menu.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`Menu > should render 1`] = `
-"<div class=\\"menu-container p-3 w-full\\">
+"<div class=\\"menu-container w-full p-3\\">
   <ul></ul>
 </div>"
 `;
@@ -9,7 +9,7 @@ exports[`Menu > should render 1`] = `
 exports[`Menu > should render 2`] = `
 "<li class=\\"menu-item\\">
   <div class=\\"menu-item-title\\">
-    <!--v-if--><span class=\\"menu-title self-center flex-1\\"></span>
+    <!--v-if--><span class=\\"menu-title flex-1 self-center\\"></span>
     <!--v-if-->
   </div>
   <transition-stub>
@@ -19,11 +19,11 @@ exports[`Menu > should render 2`] = `
 `;
 
 exports[`Menu > should work with openIds prop 1`] = `
-"<div class=\\"menu-container p-3 w-full\\">
+"<div class=\\"menu-container w-full p-3\\">
   <ul>
     <li class=\\"menu-item\\">
       <div class=\\"menu-item-title\\">
-        <!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 1</span>
+        <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 1</span>
         <!--v-if-->
       </div>
       <transition-stub>
@@ -32,7 +32,7 @@ exports[`Menu > should work with openIds prop 1`] = `
     </li>
     <li class=\\"menu-item\\">
       <div class=\\"menu-item-title\\">
-        <!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 2</span>
+        <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 2</span>
         <!--v-if-->
       </div>
       <transition-stub>
@@ -41,13 +41,13 @@ exports[`Menu > should work with openIds prop 1`] = `
     </li>
     <li class=\\"has-submenus menu-item\\">
       <div class=\\"menu-item-title\\">
-        <!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 3</span><span class=\\"open menu-icon-collapse self-center transition-all\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"m13.172 12l-4.95-4.95l1.414-1.414L16 12l-6.364 6.364l-1.414-1.414z\\"></path></svg></span>
+        <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 3</span><span class=\\"open menu-icon-collapse self-center transition-all\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"m13.172 12l-4.95-4.95l1.414-1.414L16 12l-6.364 6.364l-1.414-1.414z\\"></path></svg></span>
       </div>
       <transition-stub>
         <ul class=\\"sub-menu-items transition-all\\">
           <li class=\\"menu-item\\">
             <div class=\\"menu-item-title\\">
-              <!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 4</span>
+              <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 4</span>
               <!--v-if-->
             </div>
             <transition-stub>
@@ -62,11 +62,11 @@ exports[`Menu > should work with openIds prop 1`] = `
 `;
 
 exports[`Menu > should work with sub menus 1`] = `
-"<div class=\\"menu-container p-3 w-full\\">
+"<div class=\\"menu-container w-full p-3\\">
   <ul>
     <li class=\\"menu-item\\">
       <div class=\\"menu-item-title\\">
-        <!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 1</span>
+        <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 1</span>
         <!--v-if-->
       </div>
       <transition-stub>
@@ -75,7 +75,7 @@ exports[`Menu > should work with sub menus 1`] = `
     </li>
     <li class=\\"menu-item\\">
       <div class=\\"menu-item-title\\">
-        <!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 2</span>
+        <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 2</span>
         <!--v-if-->
       </div>
       <transition-stub>
@@ -84,13 +84,13 @@ exports[`Menu > should work with sub menus 1`] = `
     </li>
     <li class=\\"has-submenus menu-item\\">
       <div class=\\"menu-item-title\\">
-        <!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 3</span><span class=\\"open menu-icon-collapse self-center transition-all\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"m13.172 12l-4.95-4.95l1.414-1.414L16 12l-6.364 6.364l-1.414-1.414z\\"></path></svg></span>
+        <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 3</span><span class=\\"open menu-icon-collapse self-center transition-all\\"><svg preserveAspectRatio=\\"xMidYMid meet\\" viewBox=\\"0 0 24 24\\" width=\\"1.2em\\" height=\\"1.2em\\"><path fill=\\"currentColor\\" d=\\"m13.172 12l-4.95-4.95l1.414-1.414L16 12l-6.364 6.364l-1.414-1.414z\\"></path></svg></span>
       </div>
       <transition-stub>
         <ul class=\\"sub-menu-items transition-all\\">
           <li class=\\"menu-item\\">
             <div class=\\"menu-item-title\\">
-              <!--v-if--><span class=\\"menu-title self-center flex-1\\">Menu Item 4</span>
+              <!--v-if--><span class=\\"menu-title flex-1 self-center\\">Menu Item 4</span>
               <!--v-if-->
             </div>
             <transition-stub>
diff --git a/src/components/base/modal/Modal.story.vue b/src/components/base/modal/Modal.story.vue
index aaf0a894b..8e46e97ee 100644
--- a/src/components/base/modal/Modal.story.vue
+++ b/src/components/base/modal/Modal.story.vue
@@ -23,16 +23,16 @@ function initState() {
         :width="state.width"
       >
         <div class="flex flex-col">
-          <img src="https://ryanc.cc/avatar" class="w-full" />
-          <img src="https://ryanc.cc/avatar" class="w-full" />
-          <img src="https://halo.run/logo" class="w-full" />
+          <img class="w-full" src="https://ryanc.cc/avatar" />
+          <img class="w-full" src="https://ryanc.cc/avatar" />
+          <img class="w-full" src="https://halo.run/logo" />
         </div>
 
         <template #footer>
           <VSpace>
-            <VButton type="primary" @click="state.visible = false" loading
-              >确定</VButton
-            >
+            <VButton loading type="primary" @click="state.visible = false"
+              >确定
+            </VButton>
             <VButton @click="state.visible = false">取消</VButton>
           </VSpace>
         </template>
diff --git a/src/components/base/modal/Modal.vue b/src/components/base/modal/Modal.vue
index fb3f549e8..268ec0ede 100644
--- a/src/components/base/modal/Modal.vue
+++ b/src/components/base/modal/Modal.vue
@@ -102,7 +102,7 @@ function handleClose() {
 .modal-wrapper {
   @apply fixed;
   @apply top-0 left-0;
-  @apply w-full h-full;
+  @apply h-full w-full;
   @apply flex flex-row;
   @apply items-center justify-center;
   z-index: 99999;
@@ -111,7 +111,7 @@ function handleClose() {
     @apply flex-none;
     @apply absolute;
     @apply top-0 left-0;
-    @apply w-full h-full;
+    @apply h-full w-full;
     @apply transition-opacity;
     @apply bg-gray-500;
     @apply bg-opacity-75;
@@ -155,7 +155,7 @@ function handleClose() {
     }
 
     .modal-body {
-      @apply overflow-x-hidden overflow-y-auto;
+      @apply overflow-y-auto overflow-x-hidden;
       @apply flex-1;
       word-wrap: break-word;
       padding: 12px 16px;
diff --git a/src/components/base/radio/Radio.story.vue b/src/components/base/radio/Radio.story.vue
index ff9582483..da3f97435 100644
--- a/src/components/base/radio/Radio.story.vue
+++ b/src/components/base/radio/Radio.story.vue
@@ -1,5 +1,5 @@
 <template>
-  <Story title="Radio" :init-state="initState">
+  <Story :init-state="initState" title="Radio">
     <template #default="{ state }">
       <VRadioGroup v-model="state.value" :options="radioData"></VRadioGroup>
 
@@ -15,7 +15,7 @@
   </Story>
 </template>
 <script lang="ts" setup>
-import { VRadioGroup, VRadio } from "@/components/base/radio/index";
+import { VRadio, VRadioGroup } from "@/components/base/radio/index";
 
 function initState() {
   return {
diff --git a/src/components/base/radio/RadioGroup.vue b/src/components/base/radio/RadioGroup.vue
index 5c4b29be2..9719d14b3 100644
--- a/src/components/base/radio/RadioGroup.vue
+++ b/src/components/base/radio/RadioGroup.vue
@@ -36,8 +36,8 @@ function handleChange(value: string | number | boolean) {
       :key="index"
       :label="option[labelKey] + ''"
       :model-value="modelValue"
-      :value="option[valueKey]"
       :name="name"
+      :value="option[valueKey]"
       @change="handleChange"
     />
   </div>
diff --git a/src/components/base/select/Select.vue b/src/components/base/select/Select.vue
index 3c5ce10d3..809982a83 100644
--- a/src/components/base/select/Select.vue
+++ b/src/components/base/select/Select.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import type { Size } from "./interface";
 import { computed } from "vue";
+import type { Size } from "./interface";
 
 const props = defineProps({
   modelValue: {
@@ -34,12 +34,12 @@ function handleChange(e: Event) {
 <template>
   <div class="select-wrapper">
     <select
+      :class="classes"
+      :disabled="disabled"
       :value="modelValue"
       @change="handleChange"
-      :disabled="disabled"
-      :class="classes"
     >
-      <option v-if="placeholder" value="" key="placeholder" disabled hidden>
+      <option v-if="placeholder" key="placeholder" disabled hidden value="">
         {{ placeholder }}
       </option>
       <slot />
diff --git a/src/components/base/space/Space.story.vue b/src/components/base/space/Space.story.vue
index 6d24ab67c..e974132c9 100644
--- a/src/components/base/space/Space.story.vue
+++ b/src/components/base/space/Space.story.vue
@@ -1,5 +1,5 @@
 <template>
-  <Story title="Space" :init-state="initState">
+  <Story :init-state="initState" title="Space">
     <template #default="{ state }">
       <VRadio
         v-for="(option, index) in ['row', 'column']"
@@ -26,9 +26,9 @@
         name="spacing"
       ></VRadio>
       <VSpace
+        :align="state.align"
         :direction="state.direction"
         :spacing="state.spacing"
-        :align="state.align"
       >
         <div>Control：</div>
         <VButton type="primary">确定</VButton>
diff --git a/src/components/base/space/Space.vue b/src/components/base/space/Space.vue
index ab41b2b50..c00f3dd96 100644
--- a/src/components/base/space/Space.vue
+++ b/src/components/base/space/Space.vue
@@ -26,9 +26,9 @@ const wrapperClasses = computed(() => {
 </script>
 <template>
   <div
-    class="space-wrapper"
     :class="wrapperClasses"
     :style="`gap: ${SpacingSize[spacing]}px`"
+    class="space-wrapper"
   >
     <slot />
   </div>
diff --git a/src/components/base/tabs/TabItem.vue b/src/components/base/tabs/TabItem.vue
index 74a1fe2cc..9fe182e0f 100644
--- a/src/components/base/tabs/TabItem.vue
+++ b/src/components/base/tabs/TabItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { computed, inject } from "vue";
 import type { ComputedRef } from "vue";
+import { computed, inject } from "vue";
 
 const props = defineProps({
   id: {
diff --git a/src/components/base/tabs/Tabbar.story.vue b/src/components/base/tabs/Tabbar.story.vue
index e6faa8ab7..71122c095 100644
--- a/src/components/base/tabs/Tabbar.story.vue
+++ b/src/components/base/tabs/Tabbar.story.vue
@@ -13,23 +13,23 @@ function initState() {
 }
 </script>
 <template>
-  <Story title="Tabbar" :init-state="initState">
+  <Story :init-state="initState" title="Tabbar">
     <template #default="{ state }">
       <div class="p-3">
-        <VTabbar :items="state.items" v-model:activeId="state.activeId" />
+        <VTabbar v-model:activeId="state.activeId" :items="state.items" />
       </div>
       <div class="p-3">
         <VTabbar
-          type="pills"
-          :items="state.items"
           v-model:activeId="state.activeId"
+          :items="state.items"
+          type="pills"
         />
       </div>
       <div class="p-3">
         <VTabbar
-          type="outline"
-          :items="state.items"
           v-model:activeId="state.activeId"
+          :items="state.items"
+          type="outline"
         />
       </div>
     </template>
diff --git a/src/components/base/tabs/Tabs.story.vue b/src/components/base/tabs/Tabs.story.vue
index 664b4a8fb..66fc16737 100644
--- a/src/components/base/tabs/Tabs.story.vue
+++ b/src/components/base/tabs/Tabs.story.vue
@@ -1,45 +1,45 @@
 <script lang="ts" setup>
-import { VTabs, VTabItem } from "./index";
+import { VTabItem, VTabs } from "./index";
 </script>
 
 <template>
-  <Story title="Tabs" :init-state="() => ({ activeId: 'ryanwang' })">
+  <Story :init-state="() => ({ activeId: 'ryanwang' })" title="Tabs">
     <template #default="{ state }">
       <div class="p-3">
         <VTabs v-model:activeId="state.activeId">
-          <VTabItem label="JohnNiang" id="johnniang">
+          <VTabItem id="johnniang" label="JohnNiang">
             This is JohnNiang's Item
           </VTabItem>
-          <VTabItem label="Ryan Wang" id="ryanwang">
+          <VTabItem id="ryanwang" label="Ryan Wang">
             This is Ryan Wang's Item
           </VTabItem>
-          <VTabItem label="guqing" id="guqing">
+          <VTabItem id="guqing" label="guqing">
             This is guqing's Item
           </VTabItem>
         </VTabs>
       </div>
       <div class="p-3">
         <VTabs v-model:activeId="state.activeId" type="pills">
-          <VTabItem label="JohnNiang" id="johnniang">
+          <VTabItem id="johnniang" label="JohnNiang">
             This is JohnNiang's Item
           </VTabItem>
-          <VTabItem label="Ryan Wang" id="ryanwang">
+          <VTabItem id="ryanwang" label="Ryan Wang">
             This is Ryan Wang's Item
           </VTabItem>
-          <VTabItem label="guqing" id="guqing">
+          <VTabItem id="guqing" label="guqing">
             This is guqing's Item
           </VTabItem>
         </VTabs>
       </div>
       <div class="p-3">
         <VTabs v-model:activeId="state.activeId" type="outline">
-          <VTabItem label="JohnNiang" id="johnniang">
+          <VTabItem id="johnniang" label="JohnNiang">
             This is JohnNiang's Item
           </VTabItem>
-          <VTabItem label="Ryan Wang" id="ryanwang">
+          <VTabItem id="ryanwang" label="Ryan Wang">
             This is Ryan Wang's Item
           </VTabItem>
-          <VTabItem label="guqing" id="guqing">
+          <VTabItem id="guqing" label="guqing">
             This is guqing's Item
           </VTabItem>
         </VTabs>
diff --git a/src/components/base/tabs/Tabs.vue b/src/components/base/tabs/Tabs.vue
index 56b2320da..e1b9fa449 100644
--- a/src/components/base/tabs/Tabs.vue
+++ b/src/components/base/tabs/Tabs.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import type { ComputedRef, PropType } from "vue";
 import { computed, provide, useSlots } from "vue";
-import type { PropType, ComputedRef } from "vue";
 import { VTabbar } from "./index";
-import type { Type, Direction } from "@/components/base/tabs/interface";
+import type { Direction, Type } from "@/components/base/tabs/interface";
 
 const props = defineProps({
   activeId: {
@@ -54,13 +54,13 @@ const handleChange = (id: string | number) => {
 };
 </script>
 <template>
-  <div class="tabs-wrapper" :class="classes">
+  <div :class="classes" class="tabs-wrapper">
     <div class="tabs-bar-wrapper">
       <VTabbar
         :activeId="activeId"
+        :direction="direction"
         :items="tabItems"
         :type="type"
-        :direction="direction"
         @change="handleChange"
       />
     </div>
@@ -80,6 +80,7 @@ const handleChange = (id: string | number) => {
       @apply mt-2;
     }
   }
+
   &.tabs-direction-column {
     .tabs-items-wrapper {
       @apply ml-2;
diff --git a/src/components/base/tag/Tag.story.vue b/src/components/base/tag/Tag.story.vue
index 2e2cf374e..365285fb1 100644
--- a/src/components/base/tag/Tag.story.vue
+++ b/src/components/base/tag/Tag.story.vue
@@ -13,13 +13,13 @@
     <Variant title="Icon">
       <template #default>
         <VSpace>
-          <VTag theme="default" rounded>
+          <VTag rounded theme="default">
             <template #leftIcon>
               <IconSettings />
             </template>
             Halo
           </VTag>
-          <VTag theme="primary" rounded>
+          <VTag rounded theme="primary">
             <template #leftIcon>
               <IconSettings />
             </template>
diff --git a/src/components/base/tag/Tag.vue b/src/components/base/tag/Tag.vue
index f697a4380..8d45e48d5 100644
--- a/src/components/base/tag/Tag.vue
+++ b/src/components/base/tag/Tag.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import type { Theme } from "@/components/base/tag/interface";
 import { computed } from "vue";
+import type { Theme } from "@/components/base/tag/interface";
 
 const props = defineProps({
   theme: {
@@ -19,7 +19,7 @@ const classes = computed(() => {
 });
 </script>
 <template>
-  <div class="tag-wrapper" :class="classes">
+  <div :class="classes" class="tag-wrapper">
     <div v-if="$slots.leftIcon" class="tag-left-icon">
       <slot name="leftIcon" />
     </div>
diff --git a/src/components/base/textarea/Textarea.story.vue b/src/components/base/textarea/Textarea.story.vue
index 1f79b09d8..0e35649df 100644
--- a/src/components/base/textarea/Textarea.story.vue
+++ b/src/components/base/textarea/Textarea.story.vue
@@ -1,13 +1,13 @@
 <template>
-  <Story title="Textarea" :init-state="initState">
+  <Story :init-state="initState" title="Textarea">
     <template #default="{ state }">
       <div class="w-1/2">
         <VTextarea
           v-model="state.value"
           :disabled="state.disabled"
           :placeholder="state.placeholder"
-          :size="state.size"
           :rows="state.rows"
+          :size="state.size"
         />
       </div>
     </template>
diff --git a/src/components/base/textarea/Textarea.vue b/src/components/base/textarea/Textarea.vue
index 51339ab46..c26796b3a 100644
--- a/src/components/base/textarea/Textarea.vue
+++ b/src/components/base/textarea/Textarea.vue
@@ -26,11 +26,11 @@ function handleInput(e: Event) {
 <template>
   <div class="textarea-wrapper">
     <textarea
+      :disabled="disabled"
       :placeholder="placeholder"
+      :rows="rows"
       :value="modelValue"
       @input="handleInput"
-      :disabled="disabled"
-      :rows="rows"
     >
     </textarea>
   </div>
diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index f96290788..db65aa47d 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-full">
     <aside
-      class="hidden md:block navbar fixed h-full overflow-y-auto"
+      class="navbar fixed hidden h-full overflow-y-auto md:block"
       style="background: #fff"
     >
       <div class="logo flex justify-center py-5">
@@ -9,12 +9,12 @@
       </div>
       <div class="px-3">
         <div
-          class="flex p-2 text-gray-400 items-center transition-all bg-gray-100 rounded cursor-pointer hover:text-gray-900"
+          class="flex cursor-pointer items-center rounded bg-gray-100 p-2 text-gray-400 transition-all hover:text-gray-900"
         >
           <span class="mr-3">
             <IconSearch />
           </span>
-          <span class="flex-1 text-base select-none font-normal">搜索</span>
+          <span class="flex-1 select-none text-base font-normal">搜索</span>
           <div class="text-sm">⌘+K</div>
         </div>
       </div>
@@ -24,7 +24,7 @@
           <img class="h-11 w-11 rounded-full" src="https://ryanc.cc/avatar" />
         </div>
         <div class="profile-name">
-          <div class="flex font-medium text-sm">Ryan Wang</div>
+          <div class="flex text-sm font-medium">Ryan Wang</div>
           <div class="flex">
             <VTag>
               <template #leftIcon>
@@ -35,21 +35,21 @@
           </div>
         </div>
         <div
-          class="profile-control transition-all hover:bg-gray-100 rounded cursor-pointer p-1"
+          class="profile-control cursor-pointer rounded p-1 transition-all hover:bg-gray-100"
           @click="handleRouteToProfile"
         >
           <IconMore />
         </div>
       </div>
     </aside>
-    <main class="content w-full overflow-y-auto mb-safe pb-12 md:pb-0">
+    <main class="content w-full overflow-y-auto pb-12 mb-safe md:pb-0">
       <slot v-if="$slots.default" />
       <RouterView v-else />
     </main>
 
     <!--bottom nav bar-->
     <div
-      class="md:hidden bottom-nav-bar grid grid-cols-6 fixed left-0 bottom-0 right-0 border-t-2 border-black drop-shadow-2xl pb-safe mt-safe"
+      class="bottom-nav-bar fixed left-0 bottom-0 right-0 grid grid-cols-6 border-t-2 border-black drop-shadow-2xl mt-safe pb-safe md:hidden"
       style="background: #0e1731"
     >
       <div
@@ -60,15 +60,15 @@
         @click="router.push(menu.path)"
       >
         <div
-          class="p-1 w-full cursor-pointer flex items-center justify-center text-white"
+          class="flex w-full cursor-pointer items-center justify-center p-1 text-white"
         >
           <div
-            class="w-10 h-10 flex flex-col justify-center items-center is-active is-active0"
+            class="is-active is-active0 flex h-10 w-10 flex-col items-center justify-center"
           >
             <div class="text-base">
               <Component :is="menu.icon" />
             </div>
-            <div class="text-xs mt-0.5">
+            <div class="mt-0.5 text-xs">
               {{ menu.name }}
             </div>
           </div>
@@ -76,15 +76,15 @@
       </div>
       <div class="nav-item" @click="moreMenuVisible = true">
         <div
-          class="p-1 w-full cursor-pointer flex items-center justify-center text-white"
+          class="flex w-full cursor-pointer items-center justify-center p-1 text-white"
         >
           <div
-            class="w-10 h-10 flex flex-col justify-center items-center is-active is-active0"
+            class="is-active is-active0 flex h-10 w-10 flex-col items-center justify-center"
           >
             <div class="text-base">
               <IconMore />
             </div>
-            <div class="text-xs mt-0.5">更多</div>
+            <div class="mt-0.5 text-xs">更多</div>
           </div>
         </div>
       </div>
@@ -92,7 +92,7 @@
       <Teleport to="body">
         <div
           v-show="moreMenuRootVisible"
-          class="drawer-wrapper fixed top-0 left-0 w-full h-full flex flex-row items-end justify-center z-[99999]"
+          class="drawer-wrapper fixed top-0 left-0 z-[99999] flex h-full w-full flex-row items-end justify-center"
         >
           <transition
             enter-active-class="ease-out duration-200"
@@ -106,7 +106,7 @@
           >
             <div
               v-show="moreMenuVisible"
-              class="drawer-layer flex-none absolute top-0 left-0 w-full h-full transition-opacity bg-gray-500 bg-opacity-75"
+              class="drawer-layer absolute top-0 left-0 h-full w-full flex-none bg-gray-500 bg-opacity-75 transition-opacity"
               @click="moreMenuVisible = false"
             ></div>
           </transition>
@@ -120,7 +120,7 @@
           >
             <div
               v-show="moreMenuVisible"
-              class="drawer-content flex flex-col relative bg-white items-stretch shadow-xl w-screen h-3/4 rounded-t-md overflow-y-auto"
+              class="drawer-content relative flex h-3/4 w-screen flex-col items-stretch overflow-y-auto rounded-t-md bg-white shadow-xl"
             >
               <div class="drawer-body">
                 <VRoutesMenu
diff --git a/src/layouts/SystemSettingsLayout.vue b/src/layouts/SystemSettingsLayout.vue
index 23bb8ea62..41ccacba2 100644
--- a/src/layouts/SystemSettingsLayout.vue
+++ b/src/layouts/SystemSettingsLayout.vue
@@ -5,7 +5,7 @@ import { VButton } from "@/components/base/button";
 import { VTabbar } from "@/components/base/tabs";
 import { IconSettings } from "@/core/icons";
 import { onMounted, ref } from "vue";
-import { useRouter, RouterView, useRoute } from "vue-router";
+import { RouterView, useRoute, useRouter } from "vue-router";
 
 const SettingTabs = [
   {
@@ -42,7 +42,7 @@ const handleTabChange = (id: string) => {
   <BasicLayout>
     <VPageHeader title="设置">
       <template #icon>
-        <IconSettings class="self-center mr-2" />
+        <IconSettings class="mr-2 self-center" />
       </template>
       <template #actions>
         <VButton type="secondary">安装</VButton>
@@ -53,8 +53,8 @@ const handleTabChange = (id: string) => {
       <VTabbar
         v-model:active-id="activeTab"
         :items="SettingTabs"
-        @change="handleTabChange"
         type="outline"
+        @change="handleTabChange"
       ></VTabbar>
 
       <div>
diff --git a/src/views/contents/attachments/AttachmentList.vue b/src/views/contents/attachments/AttachmentList.vue
index 40418c391..b99c4e098 100644
--- a/src/views/contents/attachments/AttachmentList.vue
+++ b/src/views/contents/attachments/AttachmentList.vue
@@ -74,7 +74,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
 <template>
   <VPageHeader title="附件库">
     <template #icon>
-      <IconPalette class="self-center mr-2" />
+      <IconPalette class="mr-2 self-center" />
     </template>
     <template #actions>
       <VSpace>
@@ -90,23 +90,23 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
     <div class="w-full sm:w-96">
       <VCard :bodyClass="['!p-0']" title="存储策略">
         <fieldset>
-          <div class="bg-white -space-y-px divide-y divide-gray-100">
+          <div class="-space-y-px divide-y divide-gray-100 bg-white">
             <label
               v-for="(strategy, index) in strategies"
               :key="index"
               :class="{
                 'bg-gray-50': selected === strategy.id,
               }"
-              class="relative p-4 flex cursor-pointer focus:outline-none"
+              class="relative flex cursor-pointer p-4 focus:outline-none"
             >
               <input
                 v-model="selected"
                 :value="strategy.id"
-                class="h-4 w-4 mt-0.5 cursor-pointer shrink-0 text-indigo-600 border-gray-300 focus:ring-indigo-500"
+                class="mt-0.5 h-4 w-4 shrink-0 cursor-pointer border-gray-300 text-indigo-600 focus:ring-indigo-500"
                 name="privacy"
                 type="radio"
               />
-              <span class="ml-3 flex flex-col flex-1">
+              <span class="ml-3 flex flex-1 flex-col">
                 <span
                   :class="{ 'font-bold': selected === strategy.id }"
                   class="block text-sm font-medium"
@@ -119,7 +119,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
               </span>
               <div class="self-center">
                 <IconSettings
-                  class="hover:text-blue-600 cursor-pointer transition-all"
+                  class="cursor-pointer transition-all hover:text-blue-600"
                   @click.stop="strategyVisible = true"
                 />
               </div>
@@ -147,16 +147,16 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
         <IconArrowRight />
       </div>
     </template>
-    <div class="bg-white overflow-hidden">
+    <div class="overflow-hidden bg-white">
       <div>
         <dl>
           <div
             class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">原始内容</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               <img
-                class="w-full sm:w-1/2 rounded"
+                class="w-full rounded sm:w-1/2"
                 src="https://picsum.photos/1000/700?random=1"
               />
             </dd>
@@ -165,7 +165,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
             class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">存储策略</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               阿里云/bucket/blog-attachments
             </dd>
           </div>
@@ -173,7 +173,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
             class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">文件名称</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               attachment-0
             </dd>
           </div>
@@ -181,7 +181,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
             class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">文件类型</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               image/jpeg
             </dd>
           </div>
@@ -189,7 +189,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
             class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">文件大小</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               1.2 MB
             </dd>
           </div>
@@ -197,7 +197,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
             class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">上传者</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               Ryan Wang
             </dd>
           </div>
@@ -205,7 +205,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
             class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">上传时间</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               2020-01-01 12:00:00
             </dd>
           </div>
@@ -213,7 +213,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
             class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">原始链接</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               https://picsum.photos/1000/700?random=1
             </dd>
           </div>
@@ -221,7 +221,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
             class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">引用位置</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               https://picsum.photos/1000/700?random=1
             </dd>
           </div>
@@ -250,16 +250,16 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
         >
           <VCard :body-class="['!p-0']">
             <div
-              class="group block w-full aspect-w-10 aspect-h-7 bg-gray-100 overflow-hidden cursor-pointer"
+              class="group aspect-w-10 aspect-h-7 block w-full cursor-pointer overflow-hidden bg-gray-100"
             >
               <img
                 :src="attachment.url"
                 alt=""
-                class="object-cover pointer-events-none group-hover:opacity-75"
+                class="pointer-events-none object-cover group-hover:opacity-75"
               />
             </div>
             <p
-              class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1"
+              class="pointer-events-none block truncate px-2 py-1 text-sm font-medium text-gray-700"
             >
               {{ attachment.name }}
             </p>
@@ -273,22 +273,22 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
   </VModal>
 
   <div class="m-0 md:m-4">
-    <div class="flex-col flex sm:flex-row gap-2">
+    <div class="flex flex-col gap-2 sm:flex-row">
       <div class="w-full">
         <VCard :body-class="[viewType === 'list' ? '!p-0' : '']">
           <template #header>
-            <div class="px-4 py-3 block w-full bg-gray-50">
+            <div class="block w-full bg-gray-50 px-4 py-3">
               <div
-                class="flex flex-col sm:flex-row items-start sm:items-center relative"
+                class="relative flex flex-col items-start sm:flex-row sm:items-center"
               >
-                <div class="hidden sm:flex items-center mr-4">
+                <div class="mr-4 hidden items-center sm:flex">
                   <input
                     v-model="checkAll"
-                    class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                    class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                     type="checkbox"
                   />
                 </div>
-                <div class="w-full sm:w-auto flex flex-1">
+                <div class="flex w-full flex-1 sm:w-auto">
                   <VInput
                     v-if="!checkAll"
                     class="w-full sm:w-72"
@@ -299,11 +299,11 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                     <VButton type="danger">删除</VButton>
                   </VSpace>
                 </div>
-                <div class="mt-4 sm:mt-0 flex">
+                <div class="mt-4 flex sm:mt-0">
                   <VSpace spacing="lg">
                     <FloatingDropdown>
                       <div
-                        class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                        class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                       >
                         <span class="mr-0.5">上传者</span>
                         <span>
@@ -311,7 +311,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                         </span>
                       </div>
                       <template #popper>
-                        <div class="p-4 w-80 h-96">
+                        <div class="h-96 w-80 p-4">
                           <div class="bg-white">
                             <!--TODO: Auto Focus-->
                             <VInput placeholder="根据关键词搜索"></VInput>
@@ -321,12 +321,12 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                               <li
                                 v-for="(user, index) in users"
                                 :key="index"
-                                class="py-4 cursor-pointer hover:bg-gray-50"
+                                class="cursor-pointer py-4 hover:bg-gray-50"
                               >
                                 <div class="flex items-center space-x-4">
                                   <div class="flex items-center">
                                     <input
-                                      class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                                      class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                                       type="checkbox"
                                     />
                                   </div>
@@ -337,13 +337,13 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                                       class="h-10 w-10 rounded"
                                     />
                                   </div>
-                                  <div class="flex-1 min-w-0">
+                                  <div class="min-w-0 flex-1">
                                     <p
-                                      class="text-sm font-medium text-gray-900 truncate"
+                                      class="truncate text-sm font-medium text-gray-900"
                                     >
                                       {{ user.name }}
                                     </p>
-                                    <p class="text-sm text-gray-500 truncate">
+                                    <p class="truncate text-sm text-gray-500">
                                       @{{ user.username }}
                                     </p>
                                   </div>
@@ -358,7 +358,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                       </template>
                     </FloatingDropdown>
                     <div
-                      class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                      class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
                     >
                       <span class="mr-0.5">引用位置</span>
                       <span>
@@ -366,7 +366,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                       </span>
                     </div>
                     <div
-                      class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                      class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
                     >
                       <span class="mr-0.5">标签</span>
                       <span>
@@ -375,7 +375,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                     </div>
                     <FloatingDropdown>
                       <div
-                        class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                        class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                       >
                         <span class="mr-0.5">排序</span>
                         <span>
@@ -383,25 +383,25 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                         </span>
                       </div>
                       <template #popper>
-                        <div class="p-4 w-72">
+                        <div class="w-72 p-4">
                           <ul class="space-y-1">
                             <li
-                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">较近上传</span>
                             </li>
                             <li
-                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">较晚上传</span>
                             </li>
                             <li
-                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">文件大小降序</span>
                             </li>
                             <li
-                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">文件大小升序</span>
                             </li>
@@ -414,10 +414,10 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                         v-for="(item, index) in viewTypes"
                         :key="index"
                         :class="{
-                          'bg-gray-200 text-black font-bold':
+                          'bg-gray-200 font-bold text-black':
                             viewType === item.name,
                         }"
-                        class="p-1 rounded cursor-pointer hover:bg-gray-200"
+                        class="cursor-pointer rounded p-1 hover:bg-gray-200"
                         @click="viewType = item.name"
                       >
                         <component :is="item.icon" />
@@ -431,7 +431,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
 
           <div
             v-if="viewType === 'grid'"
-            class="grid grid-cols-3 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-12 mt-2"
+            class="mt-2 grid grid-cols-3 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-12"
             role="list"
           >
             <VCard
@@ -443,16 +443,16 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
             >
               <div class="relative bg-white">
                 <div
-                  class="group block w-full h-full aspect-w-10 aspect-h-8 bg-gray-100 overflow-hidden cursor-pointer"
+                  class="group aspect-w-10 aspect-h-8 block h-full w-full cursor-pointer overflow-hidden bg-gray-100"
                 >
                   <img
                     :src="attachment.url"
                     alt=""
-                    class="object-cover pointer-events-none group-hover:opacity-75"
+                    class="pointer-events-none object-cover group-hover:opacity-75"
                   />
                 </div>
                 <p
-                  class="block text-xs font-medium text-gray-700 truncate text-center pointer-events-none px-2 py-1"
+                  class="pointer-events-none block truncate px-2 py-1 text-center text-xs font-medium text-gray-700"
                 >
                   {{ attachment.name }}
                 </p>
@@ -467,7 +467,7 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
 
           <ul
             v-if="viewType === 'list'"
-            class="divide-y divide-gray-100 box-border w-full h-full"
+            class="box-border h-full w-full divide-y divide-gray-100"
             role="list"
           >
             <li v-for="(attachment, index) in attachments" :key="index">
@@ -475,29 +475,29 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                 :class="{
                   'bg-gray-100': checkAll,
                 }"
-                class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
+                class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
               >
                 <div
                   v-show="checkAll"
                   class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
                 ></div>
-                <div class="flex flex-row items-center relative">
-                  <div class="hidden mr-4 sm:flex items-center">
+                <div class="relative flex flex-row items-center">
+                  <div class="mr-4 hidden items-center sm:flex">
                     <input
                       v-model="checkAll"
-                      class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                       type="checkbox"
                     />
                   </div>
                   <div class="flex-1">
                     <div class="flex flex-col sm:flex-row">
                       <span
-                        class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
+                        class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
                       >
                         {{ attachment.name }}
                       </span>
                     </div>
-                    <div class="flex mt-1">
+                    <div class="mt-1 flex">
                       <VSpace>
                         <span class="text-xs text-gray-500">image/png</span>
                         <span class="text-xs text-gray-500">1.2 MB</span>
@@ -506,10 +506,10 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                   </div>
                   <div class="flex">
                     <div
-                      class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                      class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                     >
                       <img
-                        class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                        class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
                         src="https://ryanc.cc/avatar"
                       />
                       <time class="text-sm text-gray-500" datetime="2020-01-07">
@@ -526,15 +526,15 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
           </ul>
 
           <template #footer>
-            <div class="bg-white flex items-center justify-end">
-              <div class="flex-1 flex items-center justify-end">
+            <div class="flex items-center justify-end bg-white">
+              <div class="flex flex-1 items-center justify-end">
                 <div>
                   <nav
                     aria-label="Pagination"
-                    class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+                    class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
                   >
                     <a
-                      class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                      class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                       href="#"
                     >
                       <span class="sr-only">Previous</span>
@@ -554,30 +554,30 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                     </a>
                     <a
                       aria-current="page"
-                      class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                      class="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
                       href="#"
                     >
                       1
                     </a>
                     <a
-                      class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                      class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                       href="#"
                     >
                       2
                     </a>
                     <span
-                      class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+                      class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
                     >
                       ...
                     </span>
                     <a
-                      class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                      class="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
                       href="#"
                     >
                       4
                     </a>
                     <a
-                      class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                      class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                       href="#"
                     >
                       <span class="sr-only">Next</span>
diff --git a/src/views/contents/comments/CommentList.vue b/src/views/contents/comments/CommentList.vue
index dfca5dd14..b28b860e2 100644
--- a/src/views/contents/comments/CommentList.vue
+++ b/src/views/contents/comments/CommentList.vue
@@ -12,7 +12,7 @@ const checkAll = ref(false);
 <template>
   <VPageHeader title="评论">
     <template #icon>
-      <IconMessage class="self-center mr-2" />
+      <IconMessage class="mr-2 self-center" />
     </template>
     <template #actions>
       <VSpace>
@@ -24,18 +24,18 @@ const checkAll = ref(false);
   <div class="m-0 md:m-4">
     <VCard :body-class="['!p-0']">
       <template #header>
-        <div class="px-4 py-3 block w-full bg-gray-50">
+        <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="flex flex-col sm:flex-row items-start sm:items-center relative"
+            class="relative flex flex-col items-start sm:flex-row sm:items-center"
           >
-            <div class="hidden sm:flex items-center mr-4">
+            <div class="mr-4 hidden items-center sm:flex">
               <input
                 v-model="checkAll"
-                class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
               />
             </div>
-            <div class="w-full sm:w-auto flex flex-1">
+            <div class="flex w-full flex-1 sm:w-auto">
               <VInput
                 v-if="!checkAll"
                 class="w-full sm:w-72"
@@ -46,10 +46,10 @@ const checkAll = ref(false);
                 <VButton type="danger">删除</VButton>
               </VSpace>
             </div>
-            <div class="mt-4 sm:mt-0 flex">
+            <div class="mt-4 flex sm:mt-0">
               <VSpace spacing="lg">
                 <div
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                  class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
                 >
                   <span class="mr-0.5">状态</span>
                   <span>
@@ -57,7 +57,7 @@ const checkAll = ref(false);
                   </span>
                 </div>
                 <div
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                  class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
                 >
                   <span class="mr-0.5">评论者</span>
                   <span>
@@ -65,7 +65,7 @@ const checkAll = ref(false);
                   </span>
                 </div>
                 <div
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                  class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
                 >
                   <span class="mr-0.5">排序</span>
                   <span>
@@ -77,35 +77,35 @@ const checkAll = ref(false);
           </div>
         </div>
       </template>
-      <ul class="divide-y divide-gray-100 box-border w-full h-full" role="list">
+      <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
         <li v-for="index in 10" :key="index">
           <div
             :class="{
               'bg-gray-100': checkAll,
             }"
-            class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
+            class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
           >
             <div
               v-show="checkAll"
               class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
             ></div>
-            <div class="flex flex-row items-center relative">
-              <div class="hidden mr-4 sm:flex items-center">
+            <div class="relative flex flex-row items-center">
+              <div class="mr-4 hidden items-center sm:flex">
                 <input
                   v-model="checkAll"
-                  class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                   type="checkbox"
                 />
               </div>
               <div class="flex-1">
                 <div class="flex flex-col sm:flex-row">
                   <span
-                    class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
+                    class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
                   >
                     Ryan Wang
                   </span>
                 </div>
-                <div class="flex mt-1">
+                <div class="mt-1 flex">
                   <VSpace>
                     <p class="text-xs text-gray-500">评论测试</p>
                   </VSpace>
@@ -113,10 +113,10 @@ const checkAll = ref(false);
               </div>
               <div class="flex">
                 <div
-                  class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                  class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                 >
                   <img
-                    class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                    class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
                     src="https://ryanc.cc/avatar"
                   />
                   <time class="text-sm text-gray-500" datetime="2020-01-07">
@@ -133,15 +133,15 @@ const checkAll = ref(false);
       </ul>
 
       <template #footer>
-        <div class="bg-white flex items-center justify-end">
-          <div class="flex-1 flex items-center justify-end">
+        <div class="flex items-center justify-end bg-white">
+          <div class="flex flex-1 items-center justify-end">
             <div>
               <nav
                 aria-label="Pagination"
-                class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+                class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
               >
                 <a
-                  class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                   href="#"
                 >
                   <span class="sr-only">Previous</span>
@@ -161,30 +161,30 @@ const checkAll = ref(false);
                 </a>
                 <a
                   aria-current="page"
-                  class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                  class="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
                   href="#"
                 >
                   1
                 </a>
                 <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                  class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                   href="#"
                 >
                   2
                 </a>
                 <span
-                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+                  class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
                 >
                   ...
                 </span>
                 <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                  class="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
                   href="#"
                 >
                   4
                 </a>
                 <a
-                  class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                   href="#"
                 >
                   <span class="sr-only">Next</span>
diff --git a/src/views/contents/posts/PostEditor.vue b/src/views/contents/posts/PostEditor.vue
index 5153cd5de..adacae977 100644
--- a/src/views/contents/posts/PostEditor.vue
+++ b/src/views/contents/posts/PostEditor.vue
@@ -7,12 +7,12 @@ import { IconBookRead, IconSave } from "@/core/icons";
 <template>
   <VPageHeader title="文章">
     <template #icon>
-      <IconBookRead class="self-center mr-2" />
+      <IconBookRead class="mr-2 self-center" />
     </template>
     <template #actions>
       <VButton :route="{ name: 'PostEditor' }" type="secondary">
         <template #icon>
-          <IconSave class="w-full h-full" />
+          <IconSave class="h-full w-full" />
         </template>
         发布
       </VButton>
@@ -21,7 +21,7 @@ import { IconBookRead, IconSave } from "@/core/icons";
   <div class="editor">
     <!--mock-->
     <iframe
-      class="w-full h-screen border-0"
+      class="h-screen w-full border-0"
       src="https://stackedit.io/app"
     ></iframe>
   </div>
diff --git a/src/views/contents/posts/PostList.vue b/src/views/contents/posts/PostList.vue
index 1594db973..2a19d0335 100644
--- a/src/views/contents/posts/PostList.vue
+++ b/src/views/contents/posts/PostList.vue
@@ -94,57 +94,57 @@ const handleRouteToEditor = (post: any) => {
     <VTabs v-model:active-id="settingActiveId" type="outline">
       <VTabItem id="general" label="常规">
         <form>
-          <div class="divide-y-0 sm:divide-y sm:divide-gray-200 space-y-6">
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+          <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 标题
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VInput v-model="selected.title"></VInput>
               </div>
             </div>
 
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 别名
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VInput v-model="selected.slug"></VInput>
               </div>
             </div>
 
             <div
-              class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-center sm:pt-5"
+              class="sm:grid sm:grid-cols-3 sm:items-center sm:gap-4 sm:pt-5"
             >
               <label class="block text-sm font-medium text-gray-700">
                 分类目录
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VInput></VInput>
               </div>
             </div>
 
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 标签
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VInput></VInput>
               </div>
             </div>
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 摘要
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VTextarea v-model="selected.summary"></VTextarea>
               </div>
             </div>
@@ -153,74 +153,74 @@ const handleRouteToEditor = (post: any) => {
       </VTabItem>
       <VTabItem id="advanced" label="高级">
         <form>
-          <div class="divide-y-0 sm:divide-y sm:divide-gray-200 space-y-6">
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+          <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 禁止评论
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VInput v-model="selected.disallowComment"></VInput>
               </div>
             </div>
 
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 是否置顶
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VInput v-model="selected.topPriority"></VInput>
               </div>
             </div>
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 发表时间
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VInput></VInput>
               </div>
             </div>
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 自定义模板
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VInput v-model="selected.template"></VInput>
               </div>
             </div>
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 访问密码
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VInput v-model="selected.password"></VInput>
               </div>
             </div>
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 封面图
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VSpace align="start" class="w-full" direction="column">
                   <div class="w-full sm:w-1/2">
                     <div
-                      class="block aspect-w-10 aspect-h-7 bg-gray-100 overflow-hidden cursor-pointer rounded"
+                      class="aspect-w-10 aspect-h-7 block cursor-pointer overflow-hidden rounded bg-gray-100"
                     >
                       <img
                         :src="selected.thumbnail"
                         alt=""
-                        class="object-cover pointer-events-none"
+                        class="pointer-events-none object-cover"
                       />
                     </div>
                   </div>
@@ -233,14 +233,14 @@ const handleRouteToEditor = (post: any) => {
       </VTabItem>
       <VTabItem id="seo" label="SEO">
         <form>
-          <div class="divide-y-0 sm:divide-y sm:divide-gray-200 space-y-6">
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+          <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 自定义关键词
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VTextarea
                   v-model="selected.metaKeywords"
                   :rows="5"
@@ -248,13 +248,13 @@ const handleRouteToEditor = (post: any) => {
               </div>
             </div>
 
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 自定义描述
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VTextarea
                   v-model="selected.metaDescription"
                   :rows="5"
@@ -267,25 +267,25 @@ const handleRouteToEditor = (post: any) => {
       <VTabItem id="metas" label="元数据"></VTabItem>
       <VTabItem id="inject-code" label="代码注入">
         <form>
-          <div class="divide-y-0 sm:divide-y sm:divide-gray-200 space-y-6">
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+          <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 CSS
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VTextarea :rows="5"></VTextarea>
               </div>
             </div>
 
-            <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
               <label
                 class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
               >
                 JavaScript
               </label>
-              <div class="mt-1 sm:mt-0 sm:col-span-2">
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
                 <VTextarea :rows="5"></VTextarea>
               </div>
             </div>
@@ -305,12 +305,12 @@ const handleRouteToEditor = (post: any) => {
   </VModal>
   <VPageHeader title="文章">
     <template #icon>
-      <IconBookRead class="self-center mr-2" />
+      <IconBookRead class="mr-2 self-center" />
     </template>
     <template #actions>
       <VButton :route="{ name: 'PostEditor' }" type="secondary">
         <template #icon>
-          <IconAddCircle class="w-full h-full" />
+          <IconAddCircle class="h-full w-full" />
         </template>
         新建
       </VButton>
@@ -320,19 +320,19 @@ const handleRouteToEditor = (post: any) => {
   <div class="m-0 md:m-4">
     <VCard :body-class="['!p-0']">
       <template #header>
-        <div class="px-4 py-3 block w-full bg-gray-50">
+        <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="flex flex-col sm:flex-row items-start sm:items-center relative"
+            class="relative flex flex-col items-start sm:flex-row sm:items-center"
           >
-            <div class="hidden sm:flex items-center mr-4">
+            <div class="mr-4 hidden items-center sm:flex">
               <input
                 v-model="checkAll"
-                class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
                 @change="handleCheckAll()"
               />
             </div>
-            <div class="w-full sm:w-auto flex flex-1">
+            <div class="flex w-full flex-1 sm:w-auto">
               <VInput
                 v-if="checkedCount <= 0"
                 class="w-full sm:w-72"
@@ -343,11 +343,11 @@ const handleRouteToEditor = (post: any) => {
                 <VButton type="danger">删除</VButton>
               </VSpace>
             </div>
-            <div class="mt-4 sm:mt-0 flex">
+            <div class="mt-4 flex sm:mt-0">
               <VSpace spacing="lg">
                 <FloatingDropdown>
                   <div
-                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                   >
                     <span class="mr-0.5">分类</span>
                     <span>
@@ -355,14 +355,14 @@ const handleRouteToEditor = (post: any) => {
                     </span>
                   </div>
                   <template #popper>
-                    <div class="p-4 w-80 h-96">
+                    <div class="h-96 w-80 p-4">
                       <VInput placeholder="根据关键词搜索"></VInput>
                     </div>
                   </template>
                 </FloatingDropdown>
                 <FloatingDropdown>
                   <div
-                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                   >
                     <span class="mr-0.5">标签</span>
                     <span>
@@ -370,14 +370,14 @@ const handleRouteToEditor = (post: any) => {
                     </span>
                   </div>
                   <template #popper>
-                    <div class="p-4 w-80 h-96">
+                    <div class="h-96 w-80 p-4">
                       <VInput placeholder="根据关键词搜索"></VInput>
                     </div>
                   </template>
                 </FloatingDropdown>
                 <FloatingDropdown>
                   <div
-                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                   >
                     <span class="mr-0.5">作者</span>
                     <span>
@@ -385,7 +385,7 @@ const handleRouteToEditor = (post: any) => {
                     </span>
                   </div>
                   <template #popper>
-                    <div class="p-4 w-80 h-96">
+                    <div class="h-96 w-80 p-4">
                       <div class="bg-white">
                         <!--TODO: Auto Focus-->
                         <VInput placeholder="根据关键词搜索"></VInput>
@@ -395,12 +395,12 @@ const handleRouteToEditor = (post: any) => {
                           <li
                             v-for="(user, index) in users"
                             :key="index"
-                            class="py-4 cursor-pointer hover:bg-gray-50"
+                            class="cursor-pointer py-4 hover:bg-gray-50"
                           >
                             <div class="flex items-center space-x-4">
                               <div class="flex items-center">
                                 <input
-                                  class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                                   type="checkbox"
                                 />
                               </div>
@@ -411,13 +411,13 @@ const handleRouteToEditor = (post: any) => {
                                   class="h-10 w-10 rounded"
                                 />
                               </div>
-                              <div class="flex-1 min-w-0">
+                              <div class="min-w-0 flex-1">
                                 <p
-                                  class="text-sm font-medium text-gray-900 truncate"
+                                  class="truncate text-sm font-medium text-gray-900"
                                 >
                                   {{ user.name }}
                                 </p>
-                                <p class="text-sm text-gray-500 truncate">
+                                <p class="truncate text-sm text-gray-500">
                                   @{{ user.username }}
                                 </p>
                               </div>
@@ -433,7 +433,7 @@ const handleRouteToEditor = (post: any) => {
                 </FloatingDropdown>
                 <FloatingDropdown>
                   <div
-                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                   >
                     <span class="mr-0.5">排序</span>
                     <span>
@@ -441,35 +441,35 @@ const handleRouteToEditor = (post: any) => {
                     </span>
                   </div>
                   <template #popper>
-                    <div class="p-4 w-72">
+                    <div class="w-72 p-4">
                       <ul class="space-y-1">
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">较近发布</span>
                         </li>
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">较晚发布</span>
                         </li>
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">浏览量最多</span>
                         </li>
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">浏览量最少</span>
                         </li>
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">评论量最多</span>
                         </li>
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">评论量最少</span>
                         </li>
@@ -482,7 +482,7 @@ const handleRouteToEditor = (post: any) => {
           </div>
         </div>
       </template>
-      <ul class="divide-y divide-gray-100 box-border w-full h-full" role="list">
+      <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
         <li
           v-for="(post, index) in postsRef"
           :key="index"
@@ -492,24 +492,24 @@ const handleRouteToEditor = (post: any) => {
             :class="{
               'bg-gray-100': selected.id === post.id || post.checked,
             }"
-            class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
+            class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
           >
             <div
               v-show="selected.id === post.id || post.checked"
               class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
             ></div>
-            <div class="flex flex-row items-center relative">
-              <div class="hidden mr-4 sm:flex items-center">
+            <div class="relative flex flex-row items-center">
+              <div class="mr-4 hidden items-center sm:flex">
                 <input
                   v-model="post.checked"
-                  class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                   type="checkbox"
                 />
               </div>
               <div class="flex-1">
                 <div class="flex flex-col sm:flex-row">
                   <span
-                    class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
+                    class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
                   >
                     {{ post.title }}
                   </span>
@@ -519,7 +519,7 @@ const handleRouteToEditor = (post: any) => {
                     </VTag>
                   </VSpace>
                 </div>
-                <div class="flex mt-1">
+                <div class="mt-1 flex">
                   <VSpace>
                     <span class="text-xs text-gray-500"
                       >访问量 {{ post.visits }}</span
@@ -532,10 +532,10 @@ const handleRouteToEditor = (post: any) => {
               </div>
               <div class="flex">
                 <div
-                  class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                  class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                 >
                   <img
-                    class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                    class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
                     src="https://ryanc.cc/avatar"
                   />
                   <time class="text-sm text-gray-500" datetime="2020-01-07">
@@ -552,15 +552,15 @@ const handleRouteToEditor = (post: any) => {
       </ul>
 
       <template #footer>
-        <div class="bg-white flex items-center justify-end">
-          <div class="flex-1 flex items-center justify-end">
+        <div class="flex items-center justify-end bg-white">
+          <div class="flex flex-1 items-center justify-end">
             <div>
               <nav
                 aria-label="Pagination"
-                class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+                class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
               >
                 <a
-                  class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                   href="#"
                 >
                   <span class="sr-only">Previous</span>
@@ -580,30 +580,30 @@ const handleRouteToEditor = (post: any) => {
                 </a>
                 <a
                   aria-current="page"
-                  class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                  class="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
                   href="#"
                 >
                   1
                 </a>
                 <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                  class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                   href="#"
                 >
                   2
                 </a>
                 <span
-                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+                  class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
                 >
                   ...
                 </span>
                 <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                  class="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
                   href="#"
                 >
                   4
                 </a>
                 <a
-                  class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                   href="#"
                 >
                   <span class="sr-only">Next</span>
diff --git a/src/views/contents/sheets/SheetList.vue b/src/views/contents/sheets/SheetList.vue
index 9ce34d78c..8725aa269 100644
--- a/src/views/contents/sheets/SheetList.vue
+++ b/src/views/contents/sheets/SheetList.vue
@@ -59,7 +59,7 @@ const activeId = ref("advanced");
 <template>
   <VPageHeader title="页面">
     <template #icon>
-      <IconPages class="self-center mr-2" />
+      <IconPages class="mr-2 self-center" />
     </template>
     <template #actions>
       <VButton type="secondary">发布</VButton>
@@ -71,18 +71,18 @@ const activeId = ref("advanced");
       <VTabItem id="advanced" label="功能页面">
         <VCard :body-class="['!p-0']">
           <ul
-            class="divide-y divide-gray-100 box-border w-full h-full"
+            class="box-border h-full w-full divide-y divide-gray-100"
             role="list"
           >
             <li v-for="(sheet, index) in advancedSheets" :key="index">
               <div
-                class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
+                class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
               >
-                <div class="flex flex-row items-center relative">
+                <div class="relative flex flex-row items-center">
                   <div class="flex-1">
                     <div class="flex flex-row">
                       <span
-                        class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
+                        class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
                       >
                         {{ sheet.name }}
                       </span>
@@ -91,12 +91,12 @@ const activeId = ref("advanced");
                   </div>
                   <div class="flex">
                     <div
-                      class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                      class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                     >
                       <img
                         v-tooltip="`由${sheet.name}插件提供`"
                         :src="sheet.logo"
-                        class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                        class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
                       />
                       <span class="cursor-pointer">
                         <IconSettings />
@@ -112,18 +112,18 @@ const activeId = ref("advanced");
       <VTabItem id="custom" label="自定义页面">
         <VCard :body-class="['!p-0']">
           <template #header>
-            <div class="px-4 py-3 block w-full bg-gray-50">
+            <div class="block w-full bg-gray-50 px-4 py-3">
               <div
-                class="flex flex-col sm:flex-row items-start sm:items-center relative"
+                class="relative flex flex-col items-start sm:flex-row sm:items-center"
               >
-                <div class="hidden sm:flex items-center mr-4">
+                <div class="mr-4 hidden items-center sm:flex">
                   <input
                     v-model="checkAll"
-                    class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                    class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                     type="checkbox"
                   />
                 </div>
-                <div class="w-full sm:w-auto flex flex-1">
+                <div class="flex w-full flex-1 sm:w-auto">
                   <VInput
                     v-if="!checkAll"
                     class="w-full sm:w-72"
@@ -134,11 +134,11 @@ const activeId = ref("advanced");
                     <VButton type="danger">删除</VButton>
                   </VSpace>
                 </div>
-                <div class="mt-4 sm:mt-0 flex">
+                <div class="mt-4 flex sm:mt-0">
                   <VSpace spacing="lg">
                     <FloatingDropdown>
                       <div
-                        class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                        class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                       >
                         <span class="mr-0.5">作者</span>
                         <span>
@@ -146,7 +146,7 @@ const activeId = ref("advanced");
                         </span>
                       </div>
                       <template #popper>
-                        <div class="p-4 w-80 h-96">
+                        <div class="h-96 w-80 p-4">
                           <div class="bg-white">
                             <!--TODO: Auto Focus-->
                             <VInput placeholder="根据关键词搜索"></VInput>
@@ -156,12 +156,12 @@ const activeId = ref("advanced");
                               <li
                                 v-for="(user, index) in users"
                                 :key="index"
-                                class="py-4 cursor-pointer hover:bg-gray-50"
+                                class="cursor-pointer py-4 hover:bg-gray-50"
                               >
                                 <div class="flex items-center space-x-4">
                                   <div class="flex items-center">
                                     <input
-                                      class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                                      class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                                       type="checkbox"
                                     />
                                   </div>
@@ -172,13 +172,13 @@ const activeId = ref("advanced");
                                       class="h-10 w-10 rounded"
                                     />
                                   </div>
-                                  <div class="flex-1 min-w-0">
+                                  <div class="min-w-0 flex-1">
                                     <p
-                                      class="text-sm font-medium text-gray-900 truncate"
+                                      class="truncate text-sm font-medium text-gray-900"
                                     >
                                       {{ user.name }}
                                     </p>
-                                    <p class="text-sm text-gray-500 truncate">
+                                    <p class="truncate text-sm text-gray-500">
                                       @{{ user.username }}
                                     </p>
                                   </div>
@@ -194,7 +194,7 @@ const activeId = ref("advanced");
                     </FloatingDropdown>
                     <FloatingDropdown>
                       <div
-                        class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                        class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                       >
                         <span class="mr-0.5">排序</span>
                         <span>
@@ -202,35 +202,35 @@ const activeId = ref("advanced");
                         </span>
                       </div>
                       <template #popper>
-                        <div class="p-4 w-72">
+                        <div class="w-72 p-4">
                           <ul class="space-y-1">
                             <li
-                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">较近发布</span>
                             </li>
                             <li
-                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">较晚发布</span>
                             </li>
                             <li
-                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">浏览量最多</span>
                             </li>
                             <li
-                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">浏览量最少</span>
                             </li>
                             <li
-                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">评论量最多</span>
                             </li>
                             <li
-                              class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                              class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                             >
                               <span class="truncate">评论量最少</span>
                             </li>
@@ -244,7 +244,7 @@ const activeId = ref("advanced");
             </div>
           </template>
           <ul
-            class="divide-y divide-gray-100 box-border w-full h-full"
+            class="box-border h-full w-full divide-y divide-gray-100"
             role="list"
           >
             <li v-for="(sheet, index) in sheetsRef" :key="index">
@@ -252,30 +252,30 @@ const activeId = ref("advanced");
                 :class="{
                   'bg-gray-100': checkAll,
                 }"
-                class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
+                class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
               >
                 <div
                   v-show="checkAll"
                   class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
                 ></div>
-                <div class="flex flex-row items-center relative">
-                  <div class="hidden mr-4 sm:flex items-center">
+                <div class="relative flex flex-row items-center">
+                  <div class="mr-4 hidden items-center sm:flex">
                     <input
                       v-model="checkAll"
-                      class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                      class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                       type="checkbox"
                     />
                   </div>
                   <div class="flex-1">
                     <div class="flex flex-row">
                       <span
-                        class="mr-0 sm:mr-2 text-sm font-medium truncate text-gray-900"
+                        class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
                       >
                         {{ sheet.title }}
                       </span>
                       <VTag>{{ sheet.url }}</VTag>
                     </div>
-                    <div class="flex mt-1">
+                    <div class="mt-1 flex">
                       <VSpace>
                         <span class="text-xs text-gray-500">
                           访问量 {{ sheet.views }}
@@ -288,10 +288,10 @@ const activeId = ref("advanced");
                   </div>
                   <div class="flex">
                     <div
-                      class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                      class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                     >
                       <img
-                        class="hidden sm:inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                        class="hidden h-6 w-6 rounded-full ring-2 ring-white sm:inline-block"
                         src="https://ryanc.cc/avatar"
                       />
                       <time class="text-sm text-gray-500" datetime="2020-01-07">
@@ -308,15 +308,15 @@ const activeId = ref("advanced");
           </ul>
 
           <template #footer>
-            <div class="bg-white flex items-center justify-end">
-              <div class="flex-1 flex items-center justify-end">
+            <div class="flex items-center justify-end bg-white">
+              <div class="flex flex-1 items-center justify-end">
                 <div>
                   <nav
                     aria-label="Pagination"
-                    class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+                    class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
                   >
                     <a
-                      class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                      class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                       href="#"
                     >
                       <span class="sr-only">Previous</span>
@@ -336,30 +336,30 @@ const activeId = ref("advanced");
                     </a>
                     <a
                       aria-current="page"
-                      class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                      class="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
                       href="#"
                     >
                       1
                     </a>
                     <a
-                      class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                      class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                       href="#"
                     >
                       2
                     </a>
                     <span
-                      class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+                      class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
                     >
                       ...
                     </span>
                     <a
-                      class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                      class="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
                       href="#"
                     >
                       4
                     </a>
                     <a
-                      class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                      class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                       href="#"
                     >
                       <span class="sr-only">Next</span>
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 894e5ecfe..d4ddf519b 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -1,20 +1,20 @@
 <template>
   <VPageHeader title="仪表盘">
     <template #icon>
-      <IconDashboard class="self-center mr-2" />
+      <IconDashboard class="mr-2 self-center" />
     </template>
     <template #actions>
       <VSpace>
         <VButton v-if="settings" @click="widgetsModal = true">
           <template #icon>
-            <IconAddCircle class="w-full h-full" />
+            <IconAddCircle class="h-full w-full" />
           </template>
           添加组件
         </VButton>
         <VButton type="secondary" @click="settings = !settings">
           <template #icon>
-            <IconSettings v-if="!settings" class="w-full h-full" />
-            <IconSave v-else class="w-full h-full" />
+            <IconSettings v-if="!settings" class="h-full w-full" />
+            <IconSave v-else class="h-full w-full" />
           </template>
           {{ settings ? "完成" : "设置" }}
         </VButton>
@@ -22,7 +22,7 @@
     </template>
   </VPageHeader>
 
-  <div class="m-4 dashboard">
+  <div class="dashboard m-4">
     <grid-layout
       v-model:layout="layout"
       :col-num="12"
@@ -46,7 +46,7 @@
         <component :is="item.widget" />
         <div v-if="settings" class="absolute top-2 right-2">
           <IconCloseCircle
-            class="text-gray-500 hover:text-gray-900 cursor-pointer text-lg"
+            class="cursor-pointer text-lg text-gray-500 hover:text-gray-900"
             @click="handleRemove(item)"
           />
         </div>
diff --git a/src/views/dashboard/widgets/CommentStatsWidget.vue b/src/views/dashboard/widgets/CommentStatsWidget.vue
index de59a1815..1af0fc32d 100644
--- a/src/views/dashboard/widgets/CommentStatsWidget.vue
+++ b/src/views/dashboard/widgets/CommentStatsWidget.vue
@@ -3,7 +3,7 @@ import { VCard } from "@/components/base/card";
 </script>
 <template>
   <VCard class="h-full">
-    <dt class="text-sm font-medium text-gray-500 truncate">评论</dt>
+    <dt class="truncate text-sm font-medium text-gray-500">评论</dt>
     <dd class="mt-1 text-3xl font-semibold text-gray-900">53</dd>
   </VCard>
 </template>
diff --git a/src/views/dashboard/widgets/PostStatsWidget.vue b/src/views/dashboard/widgets/PostStatsWidget.vue
index 5e0e6dc3b..3b188559e 100644
--- a/src/views/dashboard/widgets/PostStatsWidget.vue
+++ b/src/views/dashboard/widgets/PostStatsWidget.vue
@@ -3,7 +3,7 @@ import { VCard } from "@/components/base/card";
 </script>
 <template>
   <VCard class="h-full">
-    <dt class="text-sm font-medium text-gray-500 truncate">文章</dt>
+    <dt class="truncate text-sm font-medium text-gray-500">文章</dt>
     <dd class="mt-1 text-3xl font-semibold text-gray-900">123</dd>
   </VCard>
 </template>
diff --git a/src/views/dashboard/widgets/RecentLoginWidget.vue b/src/views/dashboard/widgets/RecentLoginWidget.vue
index 47be556d2..531bdc453 100644
--- a/src/views/dashboard/widgets/RecentLoginWidget.vue
+++ b/src/views/dashboard/widgets/RecentLoginWidget.vue
@@ -8,12 +8,12 @@ import { users } from "@/views/system/users/users-mock";
     class="h-full"
     title="最近登录"
   >
-    <div class="p-4 h-full">
+    <div class="h-full p-4">
       <ul class="divide-y divide-gray-200" role="list">
         <li
           v-for="(user, index) in users"
           :key="index"
-          class="py-4 cursor-pointer hover:bg-gray-50"
+          class="cursor-pointer py-4 hover:bg-gray-50"
         >
           <div class="flex items-center space-x-4">
             <div class="flex-shrink-0">
@@ -23,11 +23,11 @@ import { users } from "@/views/system/users/users-mock";
                 class="h-10 w-10 rounded"
               />
             </div>
-            <div class="flex-1 min-w-0">
-              <p class="text-sm font-medium text-gray-900 truncate">
+            <div class="min-w-0 flex-1">
+              <p class="truncate text-sm font-medium text-gray-900">
                 {{ user.name }}
               </p>
-              <p class="text-sm text-gray-500 truncate">@{{ user.username }}</p>
+              <p class="truncate text-sm text-gray-500">@{{ user.username }}</p>
             </div>
             <div>
               <time class="text-sm text-gray-500" datetime="2020-01-07 20:00">
diff --git a/src/views/dashboard/widgets/RecentPublishedWidget.vue b/src/views/dashboard/widgets/RecentPublishedWidget.vue
index b2a374cbc..c620d0947 100644
--- a/src/views/dashboard/widgets/RecentPublishedWidget.vue
+++ b/src/views/dashboard/widgets/RecentPublishedWidget.vue
@@ -9,19 +9,19 @@ import { posts } from "@/views/contents/posts/posts-mock";
     class="h-full"
     title="最近发布"
   >
-    <div class="p-4 h-full">
+    <div class="h-full p-4">
       <ul class="divide-y divide-gray-200" role="list">
         <li
           v-for="(post, index) in posts"
           :key="index"
-          class="py-4 cursor-pointer hover:bg-gray-50"
+          class="cursor-pointer py-4 hover:bg-gray-50"
         >
           <div class="flex items-center space-x-4">
-            <div class="flex-1 min-w-0">
-              <p class="text-sm font-medium text-gray-900 truncate">
+            <div class="min-w-0 flex-1">
+              <p class="truncate text-sm font-medium text-gray-900">
                 {{ post.title }}
               </p>
-              <div class="flex mt-1">
+              <div class="mt-1 flex">
                 <VSpace>
                   <span class="text-xs text-gray-500">
                     阅读 {{ post.visits }}
diff --git a/src/views/dashboard/widgets/UserStatsWidget.vue b/src/views/dashboard/widgets/UserStatsWidget.vue
index d0a3f4945..2c6fc6b83 100644
--- a/src/views/dashboard/widgets/UserStatsWidget.vue
+++ b/src/views/dashboard/widgets/UserStatsWidget.vue
@@ -3,7 +3,7 @@ import { VCard } from "@/components/base/card";
 </script>
 <template>
   <VCard class="h-full">
-    <dt class="text-sm font-medium text-gray-500 truncate">用户</dt>
+    <dt class="truncate text-sm font-medium text-gray-500">用户</dt>
     <dd class="mt-1 text-3xl font-semibold text-gray-900">5</dd>
   </VCard>
 </template>
diff --git a/src/views/dashboard/widgets/ViewsStatsWidget.vue b/src/views/dashboard/widgets/ViewsStatsWidget.vue
index 7ebca237e..488c666b8 100644
--- a/src/views/dashboard/widgets/ViewsStatsWidget.vue
+++ b/src/views/dashboard/widgets/ViewsStatsWidget.vue
@@ -3,7 +3,7 @@ import { VCard } from "@/components/base/card";
 </script>
 <template>
   <VCard class="h-full">
-    <dt class="text-sm font-medium text-gray-500 truncate">浏览量</dt>
+    <dt class="truncate text-sm font-medium text-gray-500">浏览量</dt>
     <dd class="mt-1 text-3xl font-semibold text-gray-900">123,321</dd>
   </VCard>
 </template>
diff --git a/src/views/interface/menus/MenuList.vue b/src/views/interface/menus/MenuList.vue
index f900f5d6e..de6ec2589 100644
--- a/src/views/interface/menus/MenuList.vue
+++ b/src/views/interface/menus/MenuList.vue
@@ -80,14 +80,14 @@ const menus = ref([
 <template>
   <VPageHeader title="菜单">
     <template #icon>
-      <IconListSettings class="self-center mr-2" />
+      <IconListSettings class="mr-2 self-center" />
     </template>
     <template #actions>
       <VButton type="secondary">重建索引</VButton>
     </template>
   </VPageHeader>
   <div class="m-0 md:m-4">
-    <div class="flex-col flex sm:flex-row gap-4">
+    <div class="flex flex-col gap-4 sm:flex-row">
       <div class="w-full sm:w-96">
         <VCard title="分组">
           <VMenu class="!p-0">
@@ -102,14 +102,14 @@ const menus = ref([
       <div class="flex-1">
         <VCard :body-class="['!p-0']">
           <template #header>
-            <div class="px-4 py-3 block w-full bg-gray-50">
+            <div class="block w-full bg-gray-50 px-4 py-3">
               <div
-                class="flex flex-col sm:flex-row items-start sm:items-center relative"
+                class="relative flex flex-col items-start sm:flex-row sm:items-center"
               >
-                <div class="w-full sm:w-auto flex flex-1">
+                <div class="flex w-full flex-1 sm:w-auto">
                   <span class="text-base font-medium">未分组</span>
                 </div>
-                <div class="mt-4 sm:mt-0 flex">
+                <div class="mt-4 flex sm:mt-0">
                   <VSpace>
                     <VButton size="xs" type="primary">保存</VButton>
                     <VButton size="xs" type="default">新增</VButton>
@@ -119,27 +119,27 @@ const menus = ref([
             </div>
           </template>
           <ul
-            class="divide-y divide-gray-100 box-border w-full h-full"
+            class="box-border h-full w-full divide-y divide-gray-100"
             role="list"
           >
             <li v-for="(menu, index) in menus" :key="index">
               <div
-                class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
+                class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
               >
-                <div class="flex flex-row items-center relative">
-                  <div class="hidden mr-4 sm:flex items-center cursor-move">
+                <div class="relative flex flex-row items-center">
+                  <div class="mr-4 hidden cursor-move items-center sm:flex">
                     <IconListSettings />
                   </div>
                   <div class="flex-1">
                     <div class="flex flex-row items-center">
                       <span
-                        class="mr-2 text-sm font-medium truncate text-gray-900"
+                        class="mr-2 truncate text-sm font-medium text-gray-900"
                       >
                         {{ menu.name }}
                       </span>
                       <VTag class="sm:hidden">asd</VTag>
                     </div>
-                    <div class="flex mt-1">
+                    <div class="mt-1 flex">
                       <VSpace align="start" direction="column" spacing="xs">
                         <a
                           :href="menu.url"
@@ -153,7 +153,7 @@ const menus = ref([
                   </div>
                   <div class="flex">
                     <div
-                      class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                      class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                     >
                       <span class="cursor-pointer text-sm hover:text-red-600">
                         <IconDeleteBin />
diff --git a/src/views/interface/themes/ThemeList.vue b/src/views/interface/themes/ThemeList.vue
index 195ae3817..e5a7282ff 100644
--- a/src/views/interface/themes/ThemeList.vue
+++ b/src/views/interface/themes/ThemeList.vue
@@ -8,7 +8,7 @@ import { themes } from "@/views/interface/themes/themes-mock";
 <template>
   <VPageHeader title="主题">
     <template #icon>
-      <IconPalette class="self-center mr-2" />
+      <IconPalette class="mr-2 self-center" />
     </template>
     <template #actions>
       <VButton type="secondary">安装</VButton>
@@ -23,16 +23,16 @@ import { themes } from "@/views/interface/themes/themes-mock";
       <li v-for="(theme, index) in themes" :key="index" class="relative">
         <VCard :body-class="['!p-0']">
           <div
-            class="group block w-full aspect-w-10 aspect-h-7 bg-gray-100 overflow-hidden cursor-pointer"
+            class="group aspect-w-10 aspect-h-7 block w-full cursor-pointer overflow-hidden bg-gray-100"
           >
             <img
               :src="theme.screenshots"
               alt=""
-              class="object-cover pointer-events-none group-hover:opacity-75"
+              class="pointer-events-none object-cover group-hover:opacity-75"
             />
           </div>
           <p
-            class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1"
+            class="pointer-events-none block truncate px-2 py-1 text-sm font-medium text-gray-700"
           >
             {{ theme.name }}
           </p>
diff --git a/src/views/interface/visual/Visual.vue b/src/views/interface/visual/Visual.vue
index ecaab9afb..67f87e7c9 100644
--- a/src/views/interface/visual/Visual.vue
+++ b/src/views/interface/visual/Visual.vue
@@ -22,8 +22,8 @@ const iframeClasses = computed(() => {
 });
 </script>
 <template>
-  <div class="h-screen flex">
-    <div class="h-full bg-white w-96 drop-shadow-sm overflow-y-auto">
+  <div class="flex h-screen">
+    <div class="h-full w-96 overflow-y-auto bg-white drop-shadow-sm">
       <VTabs v-model:active-id="activeId">
         <VTabItem id="general" class="p-3" label="基础设置">
           <form>
@@ -36,7 +36,7 @@ const iframeClasses = computed(() => {
                   >
                     Halo 当前版本：
                   </label>
-                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                  <div class="mt-1 sm:col-span-2 sm:mt-0">
                     <VInput model-value="1.5.3"></VInput>
                   </div>
                 </div>
@@ -48,7 +48,7 @@ const iframeClasses = computed(() => {
                   >
                     首页图片：
                   </label>
-                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                  <div class="mt-1 sm:col-span-2 sm:mt-0">
                     <VInput
                       model-value="https://halo.run/upload/2022/03/support-team.svg"
                     ></VInput>
@@ -69,7 +69,7 @@ const iframeClasses = computed(() => {
                   >
                     文章代码高亮语言：
                   </label>
-                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                  <div class="mt-1 sm:col-span-2 sm:mt-0">
                     <VTextarea></VTextarea>
                   </div>
                 </div>
@@ -81,7 +81,7 @@ const iframeClasses = computed(() => {
                   >
                     文章代码高亮主题：
                   </label>
-                  <div class="mt-1 sm:mt-0 sm:col-span-2">
+                  <div class="mt-1 sm:col-span-2 sm:mt-0">
                     <VSelect>
                       <VOption value="java">Java</VOption>
                       <VOption value="c">C</VOption>
@@ -98,10 +98,10 @@ const iframeClasses = computed(() => {
     </div>
     <div class="flex-1">
       <div
-        class="flex items-center justify-between p-2 bg-white h-16 drop-shadow-sm"
+        class="flex h-16 items-center justify-between bg-white p-2 drop-shadow-sm"
       >
         <div>
-          <h2 class="text-xl font-bold text-gray-800 truncate">
+          <h2 class="truncate text-xl font-bold text-gray-800">
             <span>Anatole</span>
           </h2>
         </div>
@@ -130,12 +130,12 @@ const iframeClasses = computed(() => {
         </div>
       </div>
       <div
-        class="h-full flex justify-center items-center"
+        class="flex h-full items-center justify-center"
         style="height: calc(100vh - 4rem)"
       >
         <iframe
           :class="iframeClasses"
-          class="border-none"
+          class="border-none transition-all duration-200"
           src="http://localhost:8090"
         ></iframe>
       </div>
diff --git a/src/views/system/plugins/PluginDetail.vue b/src/views/system/plugins/PluginDetail.vue
index 114f2621c..1540acec8 100644
--- a/src/views/system/plugins/PluginDetail.vue
+++ b/src/views/system/plugins/PluginDetail.vue
@@ -18,7 +18,7 @@ console.log(plugin);
 <template>
   <VPageHeader :title="plugin.metadata.name">
     <template #icon>
-      <img :src="plugin.spec.logo" class="w-8 h-8 mr-2" />
+      <img :src="plugin.spec.logo" class="mr-2 h-8 w-8" />
     </template>
     <template #actions>
       <VButton type="secondary"> 安装</VButton>
@@ -28,8 +28,8 @@ console.log(plugin);
   <div class="m-0 md:m-4">
     <VCard :body-class="['!p-0']">
       <div class="px-4 py-5 sm:px-6">
-        <h3 class="text-lg leading-6 font-medium text-gray-900">插件信息</h3>
-        <p class="mt-1 max-w-2xl text-sm text-gray-500 flex items-center gap-2">
+        <h3 class="text-lg font-medium leading-6 text-gray-900">插件信息</h3>
+        <p class="mt-1 flex max-w-2xl items-center gap-2 text-sm text-gray-500">
           <span>{{ plugin.spec.version }}</span>
           <VTag>
             {{ plugin.metadata.enabled ? "已启用" : "未启用" }}
@@ -42,7 +42,7 @@ console.log(plugin);
             class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">名称</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               {{ plugin.metadata.name }}
             </dd>
           </div>
@@ -50,7 +50,7 @@ console.log(plugin);
             class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">插件类别</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               <VTag>
                 extensions.halo.run/category/{{
                   plugin.metadata.labels["extensions.halo.run/category"]
@@ -62,7 +62,7 @@ console.log(plugin);
             class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">版本</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               {{ plugin.spec.version }}
             </dd>
           </div>
@@ -70,7 +70,7 @@ console.log(plugin);
             class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">Halo 版本要求</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               {{ plugin.spec.requires }}
             </dd>
           </div>
@@ -78,7 +78,7 @@ console.log(plugin);
             class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">提供方</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               <a :href="plugin.spec.homepage" target="_blank">
                 @{{ plugin.spec.author }}
               </a>
@@ -88,7 +88,7 @@ console.log(plugin);
             class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">协议</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
               {{ plugin.spec.license }}
             </dd>
           </div>
@@ -96,7 +96,7 @@ console.log(plugin);
             class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
           >
             <dt class="text-sm font-medium text-gray-900">模型定义</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">无</dd>
+            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">无</dd>
           </div>
         </dl>
       </div>
diff --git a/src/views/system/plugins/PluginList.vue b/src/views/system/plugins/PluginList.vue
index 9fee8a678..5b2df27d3 100644
--- a/src/views/system/plugins/PluginList.vue
+++ b/src/views/system/plugins/PluginList.vue
@@ -30,12 +30,12 @@ const handleRouteToDetail = (plugin: any) => {
 <template>
   <VPageHeader title="插件">
     <template #icon>
-      <IconPlug class="self-center mr-2" />
+      <IconPlug class="mr-2 self-center" />
     </template>
     <template #actions>
       <VButton type="secondary">
         <template #icon>
-          <IconAddCircle class="w-full h-full" />
+          <IconAddCircle class="h-full w-full" />
         </template>
         安装
       </VButton>
@@ -45,18 +45,18 @@ const handleRouteToDetail = (plugin: any) => {
   <div class="m-0 md:m-4">
     <VCard :body-class="['!p-0']">
       <template #header>
-        <div class="px-4 py-3 block w-full bg-gray-50">
+        <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="flex flex-col sm:flex-row items-start sm:items-center relative"
+            class="relative flex flex-col items-start sm:flex-row sm:items-center"
           >
-            <div class="hidden sm:flex items-center mr-4">
+            <div class="mr-4 hidden items-center sm:flex">
               <input
                 v-model="checkAll"
-                class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
               />
             </div>
-            <div class="w-full sm:w-auto flex flex-1">
+            <div class="flex w-full flex-1 sm:w-auto">
               <VInput
                 v-if="!checkAll"
                 class="w-full sm:w-72"
@@ -67,11 +67,11 @@ const handleRouteToDetail = (plugin: any) => {
                 <VButton type="danger">卸载</VButton>
               </VSpace>
             </div>
-            <div class="mt-4 sm:mt-0 flex">
+            <div class="mt-4 flex sm:mt-0">
               <VSpace spacing="lg">
                 <FloatingDropdown>
                   <div
-                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                   >
                     <span class="mr-0.5">启用状态</span>
                     <span>
@@ -79,15 +79,15 @@ const handleRouteToDetail = (plugin: any) => {
                     </span>
                   </div>
                   <template #popper>
-                    <div class="p-4 w-52">
+                    <div class="w-52 p-4">
                       <ul class="space-y-1">
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">已启用</span>
                         </li>
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">未启用</span>
                         </li>
@@ -96,7 +96,7 @@ const handleRouteToDetail = (plugin: any) => {
                   </template>
                 </FloatingDropdown>
                 <div
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                  class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                 >
                   <span class="mr-0.5">类别</span>
                   <span>
@@ -105,7 +105,7 @@ const handleRouteToDetail = (plugin: any) => {
                 </div>
                 <FloatingDropdown>
                   <div
-                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                   >
                     <span class="mr-0.5">提供方</span>
                     <span>
@@ -113,18 +113,18 @@ const handleRouteToDetail = (plugin: any) => {
                     </span>
                   </div>
                   <template #popper>
-                    <div class="p-4 w-80 h-96">
+                    <div class="h-96 w-80 p-4">
                       <div class="bg-white">
                         <!--TODO: Auto Focus-->
                         <VInput placeholder="根据关键词搜索"></VInput>
                       </div>
                       <div class="mt-2">
                         <ul class="divide-y divide-gray-200" role="list">
-                          <li class="py-4 cursor-pointer hover:bg-gray-50">
+                          <li class="cursor-pointer py-4 hover:bg-gray-50">
                             <div class="flex items-center space-x-4">
                               <div class="flex items-center">
                                 <input
-                                  class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                                   type="checkbox"
                                 />
                               </div>
@@ -135,13 +135,13 @@ const handleRouteToDetail = (plugin: any) => {
                                   src="https://halo.run/logo"
                                 />
                               </div>
-                              <div class="flex-1 min-w-0">
+                              <div class="min-w-0 flex-1">
                                 <p
-                                  class="text-sm font-medium text-gray-900 truncate"
+                                  class="truncate text-sm font-medium text-gray-900"
                                 >
                                   Halo
                                 </p>
-                                <p class="text-sm text-gray-500 truncate">
+                                <p class="truncate text-sm text-gray-500">
                                   https://halo.run
                                 </p>
                               </div>
@@ -157,7 +157,7 @@ const handleRouteToDetail = (plugin: any) => {
                 </FloatingDropdown>
                 <FloatingDropdown>
                   <div
-                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                   >
                     <span class="mr-0.5">排序</span>
                     <span>
@@ -165,15 +165,15 @@ const handleRouteToDetail = (plugin: any) => {
                     </span>
                   </div>
                   <template #popper>
-                    <div class="p-4 w-72">
+                    <div class="w-72 p-4">
                       <ul class="space-y-1">
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">较近安装</span>
                         </li>
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">较晚安装</span>
                         </li>
@@ -186,7 +186,7 @@ const handleRouteToDetail = (plugin: any) => {
           </div>
         </div>
       </template>
-      <ul class="divide-y divide-gray-100 box-border w-full h-full" role="list">
+      <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
         <li
           v-for="(plugin, index) in plugins"
           :key="index"
@@ -196,34 +196,34 @@ const handleRouteToDetail = (plugin: any) => {
             :class="{
               'bg-gray-100': checkAll,
             }"
-            class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
+            class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
           >
             <div
               v-show="checkAll"
               class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
             ></div>
-            <div class="flex flex-row items-center relative">
-              <div class="hidden mr-4 sm:flex items-center">
+            <div class="relative flex flex-row items-center">
+              <div class="mr-4 hidden items-center sm:flex">
                 <input
                   v-model="checkAll"
-                  class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                   type="checkbox"
                 />
               </div>
               <div v-if="plugin.spec.logo" class="mr-4">
                 <div
-                  class="w-12 h-12 border rounded p-1 hover:shadow-sm bg-white"
+                  class="h-12 w-12 rounded border bg-white p-1 hover:shadow-sm"
                 >
                   <img
                     :alt="plugin.metadata.name"
                     :src="plugin.spec.logo"
-                    class="w-full h-full"
+                    class="h-full w-full"
                   />
                 </div>
               </div>
               <div class="flex-1">
                 <div class="flex flex-row items-center">
-                  <span class="mr-2 text-sm font-medium truncate text-gray-900">
+                  <span class="mr-2 truncate text-sm font-medium text-gray-900">
                     {{ plugin.metadata.name }}
                   </span>
                   <VSpace>
@@ -232,12 +232,12 @@ const handleRouteToDetail = (plugin: any) => {
                     </VTag>
                   </VSpace>
                 </div>
-                <div class="flex mt-2">
+                <div class="mt-2 flex">
                   <VSpace align="start" direction="column" spacing="xs">
                     <span class="text-xs text-gray-500">
                       {{ plugin.spec.description }}
                     </span>
-                    <span class="sm:hidden text-xs text-gray-500">
+                    <span class="text-xs text-gray-500 sm:hidden">
                       @{{ plugin.spec.author }} {{ plugin.spec.version }}
                     </span>
                   </VSpace>
@@ -245,16 +245,16 @@ const handleRouteToDetail = (plugin: any) => {
               </div>
               <div class="flex">
                 <div
-                  class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                  class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                 >
                   <a
                     :href="plugin.spec.homepage"
-                    class="hidden sm:block text-sm text-gray-500 hover:text-gray-900"
+                    class="hidden text-sm text-gray-500 hover:text-gray-900 sm:block"
                     target="_blank"
                   >
                     @{{ plugin.spec.author }}
                   </a>
-                  <span class="hidden sm:block text-sm text-gray-500">
+                  <span class="hidden text-sm text-gray-500 sm:block">
                     {{ plugin.spec.version }}
                   </span>
                   <time class="text-sm text-gray-500" datetime="2020-01-07">
@@ -271,15 +271,15 @@ const handleRouteToDetail = (plugin: any) => {
       </ul>
 
       <template #footer>
-        <div class="bg-white flex items-center justify-end">
-          <div class="flex-1 flex items-center justify-end">
+        <div class="flex items-center justify-end bg-white">
+          <div class="flex flex-1 items-center justify-end">
             <div>
               <nav
                 aria-label="Pagination"
-                class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+                class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
               >
                 <a
-                  class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                   href="#"
                 >
                   <span class="sr-only">Previous</span>
@@ -299,30 +299,30 @@ const handleRouteToDetail = (plugin: any) => {
                 </a>
                 <a
                   aria-current="page"
-                  class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                  class="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
                   href="#"
                 >
                   1
                 </a>
                 <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                  class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                   href="#"
                 >
                   2
                 </a>
                 <span
-                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+                  class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
                 >
                   ...
                 </span>
                 <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                  class="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
                   href="#"
                 >
                   4
                 </a>
                 <a
-                  class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                   href="#"
                 >
                   <span class="sr-only">Next</span>
diff --git a/src/views/system/settings/GeneralSettings.vue b/src/views/system/settings/GeneralSettings.vue
index 719df229c..79cae699c 100644
--- a/src/views/system/settings/GeneralSettings.vue
+++ b/src/views/system/settings/GeneralSettings.vue
@@ -5,60 +5,60 @@ import { VButton } from "@/components/base/button";
 <template>
   <form class="space-y-8 divide-y divide-gray-200">
     <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-      <div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
+      <div class="mt-6 space-y-6 sm:mt-5 sm:space-y-5">
         <div
-          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
         >
           <label
             class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
           >
             站点地址
           </label>
-          <div class="mt-1 sm:mt-0 sm:col-span-2">
-            <div class="max-w-lg flex shadow-sm">
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <div class="flex max-w-lg shadow-sm">
               <VInput modelValue="https://halo.run" />
             </div>
           </div>
         </div>
         <div
-          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
         >
           <label
             class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
           >
             站点标题
           </label>
-          <div class="mt-1 sm:mt-0 sm:col-span-2">
-            <div class="max-w-lg flex shadow-sm">
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <div class="flex max-w-lg shadow-sm">
               <VInput modelValue="Halo" />
             </div>
           </div>
         </div>
         <div
-          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
         >
           <label
             class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
           >
             站点副标题
           </label>
-          <div class="mt-1 sm:mt-0 sm:col-span-2">
-            <div class="max-w-lg flex shadow-sm">
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <div class="flex max-w-lg shadow-sm">
               <VInput modelValue="开源的现代化 CMS 应用" />
             </div>
           </div>
         </div>
 
         <div
-          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
         >
           <label
             class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
           >
             Logo
           </label>
-          <div class="mt-1 sm:mt-0 sm:col-span-2">
-            <div class="max-w-lg flex shadow-sm">
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <div class="flex max-w-lg shadow-sm">
               <VInput modelValue="https://halo.run/logo" />
             </div>
           </div>
diff --git a/src/views/system/settings/NotificationSettings.vue b/src/views/system/settings/NotificationSettings.vue
index 719df229c..79cae699c 100644
--- a/src/views/system/settings/NotificationSettings.vue
+++ b/src/views/system/settings/NotificationSettings.vue
@@ -5,60 +5,60 @@ import { VButton } from "@/components/base/button";
 <template>
   <form class="space-y-8 divide-y divide-gray-200">
     <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-      <div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
+      <div class="mt-6 space-y-6 sm:mt-5 sm:space-y-5">
         <div
-          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
         >
           <label
             class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
           >
             站点地址
           </label>
-          <div class="mt-1 sm:mt-0 sm:col-span-2">
-            <div class="max-w-lg flex shadow-sm">
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <div class="flex max-w-lg shadow-sm">
               <VInput modelValue="https://halo.run" />
             </div>
           </div>
         </div>
         <div
-          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
         >
           <label
             class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
           >
             站点标题
           </label>
-          <div class="mt-1 sm:mt-0 sm:col-span-2">
-            <div class="max-w-lg flex shadow-sm">
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <div class="flex max-w-lg shadow-sm">
               <VInput modelValue="Halo" />
             </div>
           </div>
         </div>
         <div
-          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
         >
           <label
             class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
           >
             站点副标题
           </label>
-          <div class="mt-1 sm:mt-0 sm:col-span-2">
-            <div class="max-w-lg flex shadow-sm">
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <div class="flex max-w-lg shadow-sm">
               <VInput modelValue="开源的现代化 CMS 应用" />
             </div>
           </div>
         </div>
 
         <div
-          class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+          class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
         >
           <label
             class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
           >
             Logo
           </label>
-          <div class="mt-1 sm:mt-0 sm:col-span-2">
-            <div class="max-w-lg flex shadow-sm">
+          <div class="mt-1 sm:col-span-2 sm:mt-0">
+            <div class="flex max-w-lg shadow-sm">
               <VInput modelValue="https://halo.run/logo" />
             </div>
           </div>
diff --git a/src/views/system/users/Profile.vue b/src/views/system/users/Profile.vue
index 1b30a5339..d9730b183 100644
--- a/src/views/system/users/Profile.vue
+++ b/src/views/system/users/Profile.vue
@@ -24,19 +24,19 @@ if (route.params.username) {
   <header class="bg-white">
     <div :class="user.cover" class="h-48 bg-gradient-to-r"></div>
     <div class="px-4 sm:px-6 lg:px-8">
-      <div class="-mt-12 sm:-mt-16 flex items-end space-x-5">
+      <div class="-mt-12 flex items-end space-x-5 sm:-mt-16">
         <div class="flex">
           <img
             :src="user.avatar"
             alt="Avatar"
-            class="h-24 w-24 rounded-full ring-4 ring-white sm:h-32 sm:w-32 drop-shadow-lg"
+            class="h-24 w-24 rounded-full ring-4 ring-white drop-shadow-lg sm:h-32 sm:w-32"
           />
         </div>
         <div
-          class="mt-6 sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1"
+          class="mt-6 sm:flex sm:min-w-0 sm:flex-1 sm:items-center sm:justify-end sm:space-x-6 sm:pb-1"
         >
-          <div class="block mt-6 min-w-0 flex-1">
-            <h1 class="text-xl font-bold text-gray-900 truncate">
+          <div class="mt-6 block min-w-0 flex-1">
+            <h1 class="truncate text-xl font-bold text-gray-900">
               <span class="mr-1">{{ user.name }}</span>
               <VTag theme="default">
                 <template #leftIcon>
@@ -47,7 +47,7 @@ if (route.params.username) {
             </h1>
           </div>
           <div
-            class="hidden mt-6 md:flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4"
+            class="justify-stretch mt-6 hidden flex-col space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4 md:flex"
           >
             <VButton type="default">退出登录</VButton>
           </div>
@@ -60,60 +60,60 @@ if (route.params.username) {
       <VTabItem id="general" label="基本资料">
         <form class="space-y-8 divide-y divide-gray-200">
           <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-            <div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
+            <div class="mt-6 space-y-6 sm:mt-5 sm:space-y-5">
               <div
-                class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
               >
                 <label
                   class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
                 >
                   用户名
                 </label>
-                <div class="mt-1 sm:mt-0 sm:col-span-2">
-                  <div class="max-w-lg flex shadow-sm">
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <div class="flex max-w-lg shadow-sm">
                     <VInput :modelValue="user.username" />
                   </div>
                 </div>
               </div>
               <div
-                class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
               >
                 <label
                   class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
                 >
                   昵称
                 </label>
-                <div class="mt-1 sm:mt-0 sm:col-span-2">
-                  <div class="max-w-lg flex shadow-sm">
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <div class="flex max-w-lg shadow-sm">
                     <VInput :modelValue="user.name" />
                   </div>
                 </div>
               </div>
 
               <div
-                class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
               >
                 <label
                   class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
                 >
                   电子邮箱
                 </label>
-                <div class="mt-1 sm:mt-0 sm:col-span-2">
-                  <div class="max-w-lg flex shadow-sm">
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <div class="flex max-w-lg shadow-sm">
                     <VInput :modelValue="user.email" />
                   </div>
                 </div>
               </div>
               <div
-                class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
               >
                 <label
                   class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
                 >
                   个人说明
                 </label>
-                <div class="mt-1 sm:mt-0 sm:col-span-2">
-                  <div class="max-w-lg flex shadow-sm">
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <div class="flex max-w-lg shadow-sm">
                     <VTextarea modelValue="Halo" />
                   </div>
                 </div>
@@ -131,46 +131,46 @@ if (route.params.username) {
       <VTabItem id="password" label="密码">
         <form class="space-y-8 divide-y divide-gray-200">
           <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
-            <div class="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
+            <div class="mt-6 space-y-6 sm:mt-5 sm:space-y-5">
               <div
-                class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
               >
                 <label
                   class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
                 >
                   原密码
                 </label>
-                <div class="mt-1 sm:mt-0 sm:col-span-2">
-                  <div class="max-w-lg flex shadow-sm">
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <div class="flex max-w-lg shadow-sm">
                     <VInput />
                   </div>
                 </div>
               </div>
               <div
-                class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
               >
                 <label
                   class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
                 >
                   新密码
                 </label>
-                <div class="mt-1 sm:mt-0 sm:col-span-2">
-                  <div class="max-w-lg flex shadow-sm">
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <div class="flex max-w-lg shadow-sm">
                     <VInput />
                   </div>
                 </div>
               </div>
 
               <div
-                class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
+                class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5"
               >
                 <label
                   class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
                 >
                   确认密码
                 </label>
-                <div class="mt-1 sm:mt-0 sm:col-span-2">
-                  <div class="max-w-lg flex shadow-sm">
+                <div class="mt-1 sm:col-span-2 sm:mt-0">
+                  <div class="flex max-w-lg shadow-sm">
                     <VInput />
                   </div>
                 </div>
diff --git a/src/views/system/users/UserList.vue b/src/views/system/users/UserList.vue
index b372d0192..3631ced83 100644
--- a/src/views/system/users/UserList.vue
+++ b/src/views/system/users/UserList.vue
@@ -27,19 +27,19 @@ const handleRouteToDetail = (username: string) => {
 <template>
   <VPageHeader title="用户">
     <template #icon>
-      <IconUserSettings class="self-center mr-2" />
+      <IconUserSettings class="mr-2 self-center" />
     </template>
     <template #actions>
       <VSpace>
         <VButton size="sm" type="default">
           <template #icon>
-            <IconUserFollow class="w-full h-full" />
+            <IconUserFollow class="h-full w-full" />
           </template>
           角色管理
         </VButton>
         <VButton type="secondary">
           <template #icon>
-            <IconAddCircle class="w-full h-full" />
+            <IconAddCircle class="h-full w-full" />
           </template>
           添加用户
         </VButton>
@@ -50,18 +50,18 @@ const handleRouteToDetail = (username: string) => {
   <div class="m-0 md:m-4">
     <VCard :body-class="['!p-0']">
       <template #header>
-        <div class="px-4 py-3 block w-full bg-gray-50">
+        <div class="block w-full bg-gray-50 px-4 py-3">
           <div
-            class="flex flex-col sm:flex-row items-start sm:items-center relative"
+            class="relative flex flex-col items-start sm:flex-row sm:items-center"
           >
-            <div class="hidden sm:flex items-center mr-4">
+            <div class="mr-4 hidden items-center sm:flex">
               <input
                 v-model="checkAll"
-                class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
               />
             </div>
-            <div class="w-full sm:w-auto flex flex-1">
+            <div class="flex w-full flex-1 sm:w-auto">
               <VInput
                 v-if="!checkAll"
                 class="w-full sm:w-72"
@@ -72,11 +72,11 @@ const handleRouteToDetail = (username: string) => {
                 <VButton type="danger">删除</VButton>
               </VSpace>
             </div>
-            <div class="mt-4 sm:mt-0 flex">
+            <div class="mt-4 flex sm:mt-0">
               <VSpace spacing="lg">
                 <FloatingDropdown>
                   <div
-                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                   >
                     <span class="mr-0.5">状态</span>
                     <span>
@@ -84,15 +84,15 @@ const handleRouteToDetail = (username: string) => {
                     </span>
                   </div>
                   <template #popper>
-                    <div class="p-4 w-52">
+                    <div class="w-52 p-4">
                       <ul class="space-y-1">
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">正常</span>
                         </li>
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">已禁用</span>
                         </li>
@@ -101,7 +101,7 @@ const handleRouteToDetail = (username: string) => {
                   </template>
                 </FloatingDropdown>
                 <div
-                  class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm"
+                  class="flex cursor-pointer items-center text-sm text-gray-700 hover:text-black"
                 >
                   <span class="mr-0.5">角色</span>
                   <span>
@@ -110,7 +110,7 @@ const handleRouteToDetail = (username: string) => {
                 </div>
                 <FloatingDropdown>
                   <div
-                    class="text-gray-700 hover:text-black cursor-pointer flex items-center text-sm select-none"
+                    class="flex cursor-pointer select-none items-center text-sm text-gray-700 hover:text-black"
                   >
                     <span class="mr-0.5">排序</span>
                     <span>
@@ -118,15 +118,15 @@ const handleRouteToDetail = (username: string) => {
                     </span>
                   </div>
                   <template #popper>
-                    <div class="p-4 w-72">
+                    <div class="w-72 p-4">
                       <ul class="space-y-1">
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">较近登录</span>
                         </li>
                         <li
-                          class="cursor-pointer text-gray-600 hover:bg-gray-100 hover:text-gray-900 flex items-center px-3 py-2 text-sm rounded"
+                          class="flex cursor-pointer items-center rounded px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                         >
                           <span class="truncate">较晚登录</span>
                         </li>
@@ -139,7 +139,7 @@ const handleRouteToDetail = (username: string) => {
           </div>
         </div>
       </template>
-      <ul class="divide-y divide-gray-100 box-border w-full h-full" role="list">
+      <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
         <li
           v-for="(user, index) in users"
           :key="index"
@@ -149,39 +149,39 @@ const handleRouteToDetail = (username: string) => {
             :class="{
               'bg-gray-100': checkAll,
             }"
-            class="px-4 py-3 block hover:bg-gray-50 cursor-pointer transition-all relative"
+            class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
           >
             <div
               v-show="checkAll"
               class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
             ></div>
-            <div class="flex flex-row items-center relative">
-              <div class="hidden mr-4 sm:flex items-center">
+            <div class="relative flex flex-row items-center">
+              <div class="mr-4 hidden items-center sm:flex">
                 <input
                   v-model="checkAll"
-                  class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                   type="checkbox"
                 />
               </div>
               <div v-if="user.avatar" class="mr-4">
                 <div
-                  class="w-12 h-12 border rounded hover:shadow-sm bg-white overflow-hidden"
+                  class="h-12 w-12 overflow-hidden rounded border bg-white hover:shadow-sm"
                 >
                   <img
                     :alt="user.name"
                     :src="user.avatar"
-                    class="w-full h-full"
+                    class="h-full w-full"
                   />
                 </div>
               </div>
               <div class="flex-1">
                 <div class="flex flex-row items-center">
-                  <span class="mr-2 text-sm font-medium truncate text-gray-900">
+                  <span class="mr-2 truncate text-sm font-medium text-gray-900">
                     {{ user.name }}
                   </span>
                   <VTag class="sm:hidden">{{ user.role }}</VTag>
                 </div>
-                <div class="flex mt-1">
+                <div class="mt-1 flex">
                   <VSpace align="start" direction="column" spacing="xs">
                     <span class="text-xs text-gray-500">
                       {{ user.username }}
@@ -191,7 +191,7 @@ const handleRouteToDetail = (username: string) => {
               </div>
               <div class="flex">
                 <div
-                  class="inline-flex flex-col items-end gap-4 flex-col-reverse sm:flex-row sm:items-center sm:gap-6"
+                  class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                 >
                   <span class="hidden sm:block">
                     <VTag>
@@ -212,15 +212,15 @@ const handleRouteToDetail = (username: string) => {
       </ul>
 
       <template #footer>
-        <div class="bg-white flex items-center justify-end">
-          <div class="flex-1 flex items-center justify-end">
+        <div class="flex items-center justify-end bg-white">
+          <div class="flex flex-1 items-center justify-end">
             <div>
               <nav
                 aria-label="Pagination"
-                class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+                class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
               >
                 <a
-                  class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  class="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                   href="#"
                 >
                   <span class="sr-only">Previous</span>
@@ -240,30 +240,30 @@ const handleRouteToDetail = (username: string) => {
                 </a>
                 <a
                   aria-current="page"
-                  class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                  class="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
                   href="#"
                 >
                   1
                 </a>
                 <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+                  class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                   href="#"
                 >
                   2
                 </a>
                 <span
-                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+                  class="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
                 >
                   ...
                 </span>
                 <a
-                  class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
+                  class="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
                   href="#"
                 >
                   4
                 </a>
                 <a
-                  class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                   href="#"
                 >
                   <span class="sr-only">Next</span>