From abd2b4bac0d2f7d28e8041b5b89641454f4773a5 Mon Sep 17 00:00:00 2001
From: "meilin.huang" <954537473@qq.com>
Date: Fri, 18 Apr 2025 22:07:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=BC=95=E5=85=A5tailwind=20css=20?=
 =?UTF-8?q?&=20=E5=90=8E=E7=AB=AF=E9=83=A8=E5=88=86=E9=9D=9E=E5=85=AC?=
 =?UTF-8?q?=E5=85=B1=E5=8C=85=E4=BD=8D=E7=BD=AE=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |  12 +-
 frontend/postcss.config.js                    |   6 +
 frontend/src/App.vue                          |   4 +-
 frontend/src/components/SearchForm/index.vue  |   1 -
 .../src/components/crontab/CrontabDay.vue     |   6 +-
 .../src/components/crontab/CrontabHour.vue    |   6 +-
 .../src/components/crontab/CrontabMin.vue     |   6 +-
 .../src/components/crontab/CrontabMouth.vue   |   6 +-
 .../src/components/crontab/CrontabSecond.vue  |   6 +-
 .../src/components/crontab/CrontabWeek.vue    |   6 +-
 .../src/components/crontab/CrontabYear.vue    |   6 +-
 .../dynamic-form/DynamicFormEdit.vue          |   6 +-
 .../src/components/iconSelector/index.vue     |   6 +-
 .../src/components/pagetable/PageTable.vue    | 229 ++++++++++--------
 frontend/src/components/pagetable/index.ts    |   6 +-
 .../components/terminal-rdp/MachineRdp.vue    |  10 +-
 .../terminal-rdp/MachineRdpDialog.vue         |   2 +-
 .../components/terminal/TerminalDialog.vue    |  14 +-
 .../src/components/terminal/TerminalLog.vue   |   6 +-
 frontend/src/layout/component/aside.vue       |   2 +-
 .../src/layout/component/columnsAside.vue     |  30 ++-
 frontend/src/layout/component/main.vue        |   8 +-
 .../src/layout/navBars/breadcrumb/search.vue  |   2 +-
 .../src/layout/navBars/breadcrumb/setings.vue |  44 ++--
 .../src/layout/navBars/breadcrumb/user.vue    |   6 +-
 .../src/layout/navBars/tagsView/tagsView.vue  |  11 +-
 frontend/src/layout/routerView/iframes.vue    |   2 +-
 frontend/src/main.ts                          |   1 +
 frontend/src/theme/app.scss                   | 137 -----------
 frontend/src/theme/element.scss               |  15 +-
 frontend/src/theme/index.scss                 |   4 +-
 frontend/src/theme/other.scss                 |  31 ---
 frontend/src/theme/splitpanes.scss            |  36 +++
 frontend/src/theme/tailwind.css               |   2 +
 frontend/src/views/flow/ProcdefEdit.vue       |   8 +-
 frontend/src/views/flow/ProcdefList.vue       |   2 +-
 frontend/src/views/flow/ProcinstList.vue      |   2 +-
 frontend/src/views/flow/ProcinstTaskList.vue  |   2 +-
 .../flowbiz/dbms/DbSqlExecFlowBizForm.vue     |   2 +-
 frontend/src/views/home/Home.vue              |  26 +-
 .../views/login/component/AccountLogin.vue    |   2 +-
 frontend/src/views/login/index.vue            |   2 +-
 .../src/views/msg/channel/ChannelList.vue     |   2 +-
 frontend/src/views/msg/tmpl/TmplEdit.vue      |   2 +-
 frontend/src/views/msg/tmpl/TmplList.vue      |   2 +-
 .../ops/component/ResourceAuthCertEdit.vue    |   2 +-
 .../component/ResourceAuthCertTableEdit.vue   |   4 +-
 .../src/views/ops/component/ResourceTags.vue  |   6 +-
 .../src/views/ops/component/TagCodePath.vue   |  10 +-
 frontend/src/views/ops/component/TagTree.vue  |   8 +-
 .../src/views/ops/component/TagTreeCheck.vue  |   6 +-
 .../ops/component/TagTreeResourceSelect.vue   |   2 +-
 .../src/views/ops/component/TagTreeSelect.vue |   2 +-
 frontend/src/views/ops/db/DbList.vue          |   4 +-
 frontend/src/views/ops/db/DbRestoreEdit.vue   |   4 +-
 frontend/src/views/ops/db/DbTransferEdit.vue  |  12 +-
 frontend/src/views/ops/db/DbTransferList.vue  |   2 +-
 frontend/src/views/ops/db/InstanceList.vue    |   2 +-
 frontend/src/views/ops/db/SqlExec.vue         |  10 +-
 frontend/src/views/ops/db/SyncTaskList.vue    |   2 +-
 frontend/src/views/ops/db/SyncTaskLog.vue     |   4 +-
 .../db/component/sqleditor/DbSqlEditor.vue    |  26 +-
 .../db/component/sqleditor/SqlExecDialog.vue  |   2 +-
 .../ops/db/component/table/ColumnFormItem.vue |  10 +-
 .../ops/db/component/table/DbTableData.vue    |  16 +-
 .../db/component/table/DbTableDataForm.vue    |   4 +-
 .../ops/db/component/table/DbTableDataOp.vue  |  20 +-
 .../ops/db/component/table/DbTablesOp.vue     |  10 +-
 .../src/views/ops/machine/MachineList.vue     |  12 +-
 frontend/src/views/ops/machine/MachineOp.vue  |  15 +-
 .../src/views/ops/machine/ProcessList.vue     |  12 +-
 frontend/src/views/ops/machine/ScriptEdit.vue |   2 +-
 .../views/ops/machine/cronjob/CronJobList.vue |   2 +-
 .../views/ops/machine/file/FileConfList.vue   |   2 +-
 .../views/ops/machine/file/MachineFile.vue    |  24 +-
 .../ops/machine/security/CmdConfList.vue      |  10 +-
 .../ops/machine/security/SecurityConfList.vue |   2 +-
 frontend/src/views/ops/mongo/MongoDataOp.vue  |  10 +-
 frontend/src/views/ops/mongo/MongoDbs.vue     |   4 +-
 frontend/src/views/ops/mongo/MongoList.vue    |   2 +-
 .../src/views/ops/mongo/MongoRunCommand.vue   |   8 +-
 .../src/views/ops/redis/DataOperation.vue     |  16 +-
 frontend/src/views/ops/redis/FormatViewer.vue |   4 +-
 frontend/src/views/ops/redis/KeyHeader.vue    |   4 +-
 frontend/src/views/ops/redis/KeyValueHash.vue |   6 +-
 frontend/src/views/ops/redis/KeyValueList.vue |   6 +-
 frontend/src/views/ops/redis/KeyValueSet.vue  |   6 +-
 .../src/views/ops/redis/KeyValueString.vue    |   2 +-
 frontend/src/views/ops/redis/KeyValueZset.vue |   6 +-
 frontend/src/views/ops/redis/RedisList.vue    |   4 +-
 .../ops/redis/components/CmdExecDialog.vue    |   4 +-
 frontend/src/views/ops/tag/AuthCertList.vue   |   2 +-
 frontend/src/views/ops/tag/TagTreeList.vue    |  10 +-
 frontend/src/views/ops/tag/TeamList.vue       |   2 +-
 frontend/src/views/personal/index.vue         |   8 +-
 .../src/views/system/account/AccountList.vue  |   2 +-
 .../views/system/account/RoleAllocation.vue   |   2 +-
 .../system/account/components/AccountInfo.vue |   2 +-
 .../src/views/system/config/ConfigEdit.vue    |   2 +-
 .../src/views/system/config/ConfigList.vue    |   2 +-
 .../views/system/resource/ResourceEdit.vue    |  35 +--
 .../views/system/resource/ResourceList.vue    |   8 +-
 .../src/views/system/role/ResourceEdit.vue    |   2 +-
 frontend/src/views/system/role/RoleList.vue   |   2 +-
 .../src/views/system/role/ShowResource.vue    |   2 +-
 .../src/views/system/syslog/SyslogList.vue    |   2 +-
 frontend/tailwind.config.js                   |  11 +
 frontend/vite.config.ts                       |   2 +
 server/go.mod                                 |   2 +-
 server/initialize/router.go                   |  60 +----
 server/internal/auth/imsg/imsg.go             |   2 +-
 server/internal/db/api/db_instance.go         |   2 +-
 server/internal/db/application/db_instance.go |   2 +-
 server/internal/db/dbm/dbm.go                 |   2 +-
 server/internal/db/dbm/sqlparser/sqlparser.go |   2 +-
 server/internal/db/imsg/imsg.go               |   2 +-
 server/internal/flow/api/procinst.go          |   2 +-
 server/internal/flow/application/procinst.go  |   3 +-
 server/internal/flow/imsg/imsg.go             |   2 +-
 server/internal/machine/api/machine.go        |   2 +-
 server/internal/machine/imsg/imsg.go          |   2 +-
 server/internal/machine/mcm/client_cache.go   |   2 +-
 server/internal/mongo/api/mongo.go            |   2 +-
 server/internal/mongo/application/mongo.go    |   2 +-
 server/internal/mongo/imsg/imsg.go            |   2 +-
 server/internal/mongo/mgm/conn_cache.go       |   2 +-
 server/internal/msg/api/msg_tmpl.go           |   3 +-
 server/internal/msg/imsg/imsg.go              |   2 +-
 server/{ => internal}/pkg/config/aes.go       |   0
 server/{ => internal}/pkg/config/app.go       |   0
 server/{ => internal}/pkg/config/config.go    |   0
 server/{ => internal}/pkg/config/jwt.go       |   0
 server/{ => internal}/pkg/config/log.go       |   0
 server/{ => internal}/pkg/config/mysql.go     |   0
 server/{ => internal}/pkg/config/redis.go     |   0
 server/{ => internal}/pkg/config/server.go    |   0
 server/{ => internal}/pkg/config/sqlite.go    |   0
 .../internal/{common => pkg}/consts/consts.go |   0
 server/{ => internal}/pkg/starter/banner.go   |   2 +-
 server/{ => internal}/pkg/starter/gorm.go     |   2 +-
 server/{ => internal}/pkg/starter/redis.go    |   2 +-
 server/{ => internal}/pkg/starter/run.go      |  11 +-
 server/internal/pkg/starter/web-server.go     | 126 ++++++++++
 server/internal/{common => pkg}/utils/pwd.go  |   2 +-
 server/internal/{common => pkg}/utils/stmt.go |   0
 server/internal/redis/api/redis.go            |   4 +-
 server/internal/redis/application/redis.go    |   4 +-
 .../internal/redis/application/redis_test.go  |   2 +-
 server/internal/redis/domain/entity/redis.go  |   2 +-
 server/internal/redis/imsg/imsg.go            |   2 +-
 server/internal/redis/rdm/conn_cache.go       |   2 +-
 server/internal/sys/api/account.go            |   2 +-
 server/internal/sys/api/config.go             |   2 +-
 server/internal/sys/application/resource.go   |   2 +-
 server/internal/sys/domain/entity/account.go  |   2 +-
 server/internal/sys/imsg/imsg.go              |   2 +-
 server/internal/tag/application/tag_tree.go   |   2 +-
 .../tag/application/tag_tree_relate.go        |   2 +-
 .../tag/domain/entity/resource_auth_cert.go   |   2 +-
 server/internal/tag/domain/entity/tag_tree.go |   2 +-
 server/internal/tag/imsg/imsg.go              |   2 +-
 server/main.go                                |   2 +-
 server/pkg/ioc/ioc.go                         |  14 +-
 server/pkg/req/permission_handler.go          |   5 +-
 server/pkg/req/token.go                       |  24 +-
 server/pkg/starter/web-server.go              |  66 -----
 server/pkg/validatorx/pattern.go              |   7 -
 server/pkg/validatorx/validatorx.go           |   3 -
 168 files changed, 763 insertions(+), 793 deletions(-)
 create mode 100644 frontend/postcss.config.js
 delete mode 100644 frontend/src/theme/other.scss
 create mode 100644 frontend/src/theme/splitpanes.scss
 create mode 100644 frontend/src/theme/tailwind.css
 create mode 100644 frontend/tailwind.config.js
 rename server/{ => internal}/pkg/config/aes.go (100%)
 rename server/{ => internal}/pkg/config/app.go (100%)
 rename server/{ => internal}/pkg/config/config.go (100%)
 rename server/{ => internal}/pkg/config/jwt.go (100%)
 rename server/{ => internal}/pkg/config/log.go (100%)
 rename server/{ => internal}/pkg/config/mysql.go (100%)
 rename server/{ => internal}/pkg/config/redis.go (100%)
 rename server/{ => internal}/pkg/config/server.go (100%)
 rename server/{ => internal}/pkg/config/sqlite.go (100%)
 rename server/internal/{common => pkg}/consts/consts.go (100%)
 rename server/{ => internal}/pkg/starter/banner.go (94%)
 rename server/{ => internal}/pkg/starter/gorm.go (98%)
 rename server/{ => internal}/pkg/starter/redis.go (96%)
 rename server/{ => internal}/pkg/starter/run.go (69%)
 create mode 100644 server/internal/pkg/starter/web-server.go
 rename server/internal/{common => pkg}/utils/pwd.go (97%)
 rename server/internal/{common => pkg}/utils/stmt.go (100%)
 delete mode 100644 server/pkg/starter/web-server.go

diff --git a/frontend/package.json b/frontend/package.json
index 91571362..92e989f0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -44,6 +44,7 @@
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
+        "@tailwindcss/vite": "^4.1.4",
         "@types/crypto-js": "^4.2.2",
         "@types/node": "^18.14.0",
         "@types/nprogress": "^0.2.0",
@@ -52,14 +53,17 @@
         "@typescript-eslint/parser": "^6.7.4",
         "@vitejs/plugin-vue": "^5.2.3",
         "@vue/compiler-sfc": "^3.5.13",
-        "code-inspector-plugin": "^0.4.5",
+        "autoprefixer": "^10.4.21",
+        "code-inspector-plugin": "^0.20.9",
         "dotenv": "^16.3.1",
-        "eslint": "^8.35.0",
+        "eslint": "^9.24.0",
         "eslint-plugin-vue": "^10.0.0",
-        "prettier": "^3.2.5",
+        "postcss": "^8.5.3",
+        "prettier": "^3.5.3",
         "sass": "^1.86.3",
+        "tailwindcss": "^4.1.4",
         "typescript": "^5.8.2",
-        "vite": "^6.2.6",
+        "vite": "^6.3.2",
         "vite-plugin-progress": "0.0.7",
         "vue-eslint-parser": "^10.1.3"
     },
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 00000000..67cdf1a5
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f12b60c7..9cd39012 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,13 +1,13 @@
 <template>
     <el-config-provider :size="getGlobalComponentSize" :locale="getGlobalI18n">
-        <div class="h100">
+        <div class="!h-full">
             <el-watermark
                 :zIndex="10000000"
                 :width="210"
                 v-if="themeConfig.isWatermark"
                 :font="{ color: 'rgba(180, 180, 180, 0.3)' }"
                 :content="themeConfig.watermarkText"
-                class="h100"
+                class="!h-full"
             >
                 <router-view v-show="themeConfig.lockScreenTime !== 0" />
             </el-watermark>
diff --git a/frontend/src/components/SearchForm/index.vue b/frontend/src/components/SearchForm/index.vue
index 4550152e..1961448c 100644
--- a/frontend/src/components/SearchForm/index.vue
+++ b/frontend/src/components/SearchForm/index.vue
@@ -107,7 +107,6 @@ const handleItemKeyupEnter = (item: SearchItem) => {
     margin-bottom: 10px;
 
     box-sizing: border-box;
-    overflow-x: hidden;
     background-color: var(--el-bg-color);
     border: 1px solid var(--el-border-color-light);
     border-radius: 6px;
diff --git a/frontend/src/components/crontab/CrontabDay.vue b/frontend/src/components/crontab/CrontabDay.vue
index e245e61f..a4f928ae 100644
--- a/frontend/src/components/crontab/CrontabDay.vue
+++ b/frontend/src/components/crontab/CrontabDay.vue
@@ -37,9 +37,9 @@
         </el-form-item>
 
         <el-form-item>
-            <div class="flex-align-center w100">
-                <el-radio v-model="radioValue" :label="7" class="mr5"> {{ $t('components.crontab.appoint') }} </el-radio>
-                <el-select @click="radioValue = 7" class="w100" clearable v-model="checkboxList" multiple>
+            <div class="flex items-center w-full">
+                <el-radio v-model="radioValue" :label="7" class="mr-1"> {{ $t('components.crontab.appoint') }} </el-radio>
+                <el-select @click="radioValue = 7" class="!w-full" clearable v-model="checkboxList" multiple>
                     <el-option v-for="item in 31" :key="item" :value="`${item}`">{{ item }}</el-option>
                 </el-select>
             </div>
diff --git a/frontend/src/components/crontab/CrontabHour.vue b/frontend/src/components/crontab/CrontabHour.vue
index b07bc93e..d536fb6b 100644
--- a/frontend/src/components/crontab/CrontabHour.vue
+++ b/frontend/src/components/crontab/CrontabHour.vue
@@ -22,9 +22,9 @@
         </el-form-item>
 
         <el-form-item>
-            <div class="flex-align-center w100">
-                <el-radio v-model="radioValue" :label="4" class="mr5"> {{ $t('components.crontab.appoint') }} </el-radio>
-                <el-select @click="radioValue = 4" class="w100" clearable v-model="checkboxList" multiple>
+            <div class="flex items-center w-full">
+                <el-radio v-model="radioValue" :label="4" class="mr-1"> {{ $t('components.crontab.appoint') }} </el-radio>
+                <el-select @click="radioValue = 4" class="!w-full" clearable v-model="checkboxList" multiple>
                     <el-option v-for="item in 60" :key="item" :value="`${item - 1}`">{{ item - 1 }}</el-option>
                 </el-select>
             </div>
diff --git a/frontend/src/components/crontab/CrontabMin.vue b/frontend/src/components/crontab/CrontabMin.vue
index e063cf64..1035ab26 100644
--- a/frontend/src/components/crontab/CrontabMin.vue
+++ b/frontend/src/components/crontab/CrontabMin.vue
@@ -22,9 +22,9 @@
         </el-form-item>
 
         <el-form-item>
-            <div class="flex-align-center w100">
-                <el-radio v-model="radioValue" :label="4" class="mr5"> {{ $t('components.crontab.appoint') }} </el-radio>
-                <el-select @click="radioValue = 4" class="w100" clearable v-model="checkboxList" multiple>
+            <div class="flex items-center w-full">
+                <el-radio v-model="radioValue" :label="4" class="mr-1"> {{ $t('components.crontab.appoint') }} </el-radio>
+                <el-select @click="radioValue = 4" class="!w-full" clearable v-model="checkboxList" multiple>
                     <el-option v-for="item in 60" :key="item" :value="`${item - 1}`">{{ item - 1 }}</el-option>
                 </el-select>
             </div>
diff --git a/frontend/src/components/crontab/CrontabMouth.vue b/frontend/src/components/crontab/CrontabMouth.vue
index f90441c7..bbf8e907 100644
--- a/frontend/src/components/crontab/CrontabMouth.vue
+++ b/frontend/src/components/crontab/CrontabMouth.vue
@@ -22,9 +22,9 @@
         </el-form-item>
 
         <el-form-item>
-            <div class="flex-align-center w100">
-                <el-radio v-model="radioValue" :label="4" class="mr5"> {{ $t('components.crontab.appoint') }} </el-radio>
-                <el-select @click="radioValue = 4" class="w100" clearable v-model="checkboxList" multiple>
+            <div class="flex items-center w-full">
+                <el-radio v-model="radioValue" :label="4" class="mr-1"> {{ $t('components.crontab.appoint') }} </el-radio>
+                <el-select @click="radioValue = 4" class="!w-full" clearable v-model="checkboxList" multiple>
                     <el-option v-for="item in 12" :key="item" :value="`${item}`">{{ item }}</el-option>
                 </el-select>
             </div>
diff --git a/frontend/src/components/crontab/CrontabSecond.vue b/frontend/src/components/crontab/CrontabSecond.vue
index d0812c40..ca86bd57 100644
--- a/frontend/src/components/crontab/CrontabSecond.vue
+++ b/frontend/src/components/crontab/CrontabSecond.vue
@@ -22,9 +22,9 @@
         </el-form-item>
 
         <el-form-item>
-            <div class="flex-align-center w100">
-                <el-radio v-model="radioValue" :label="4" class="mr5"> {{ $t('components.crontab.appoint') }} </el-radio>
-                <el-select @click="radioValue = 4" class="w100" clearable v-model="checkboxList" multiple>
+            <div class="flex items-center w-full">
+                <el-radio v-model="radioValue" :label="4" class="mr-1"> {{ $t('components.crontab.appoint') }} </el-radio>
+                <el-select @click="radioValue = 4" class="!w-full" clearable v-model="checkboxList" multiple>
                     <el-option v-for="item in 60" :key="item" :value="`${item - 1}`">{{ item - 1 }}</el-option>
                 </el-select>
             </div>
diff --git a/frontend/src/components/crontab/CrontabWeek.vue b/frontend/src/components/crontab/CrontabWeek.vue
index deef4d53..e41bb962 100644
--- a/frontend/src/components/crontab/CrontabWeek.vue
+++ b/frontend/src/components/crontab/CrontabWeek.vue
@@ -32,9 +32,9 @@
         </el-form-item> -->
 
         <el-form-item>
-            <div class="flex-align-center w100">
-                <el-radio v-model="radioValue" :label="6" class="mr5"> {{ $t('components.crontab.appoint') }} </el-radio>
-                <el-select @click="radioValue = 6" class="w100" clearable v-model="checkboxList" multiple>
+            <div class="flex items-center w-full">
+                <el-radio v-model="radioValue" :label="6" class="mr-1"> {{ $t('components.crontab.appoint') }} </el-radio>
+                <el-select @click="radioValue = 6" class="!w-full" clearable v-model="checkboxList" multiple>
                     <el-option v-for="(item, index) of weekList" :label="item" :key="index" :value="`${index + 1}`">{{ $t(item) }}</el-option>
                 </el-select>
             </div>
diff --git a/frontend/src/components/crontab/CrontabYear.vue b/frontend/src/components/crontab/CrontabYear.vue
index fedcc24e..093e531c 100644
--- a/frontend/src/components/crontab/CrontabYear.vue
+++ b/frontend/src/components/crontab/CrontabYear.vue
@@ -26,9 +26,9 @@
         </el-form-item>
 
         <el-form-item>
-            <div class="flex-align-center w100">
-                <el-radio v-model="radioValue" :label="5" class="mr5"> {{ $t('components.crontab.appoint') }} </el-radio>
-                <el-select @click="radioValue = 5" class="w100" clearable v-model="checkboxList" multiple>
+            <div class="flex items-center w-full">
+                <el-radio v-model="radioValue" :label="5" class="mr-1"> {{ $t('components.crontab.appoint') }} </el-radio>
+                <el-select @click="radioValue = 5" class="!w-full" clearable v-model="checkboxList" multiple>
                     <el-option v-for="item in 9" :key="item" :value="`${item - 1 + fullYear}`" :label="item - 1 + fullYear" />
                 </el-select>
             </div>
diff --git a/frontend/src/components/dynamic-form/DynamicFormEdit.vue b/frontend/src/components/dynamic-form/DynamicFormEdit.vue
index 4ffb918e..0aff174b 100644
--- a/frontend/src/components/dynamic-form/DynamicFormEdit.vue
+++ b/frontend/src/components/dynamic-form/DynamicFormEdit.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="dynamic-form-edit w100">
-        <el-table :data="formItems" stripe class="w100">
+    <div class="dynamic-form-edit !w-full">
+        <el-table :data="formItems" stripe class="!w-full">
             <el-table-column prop="name" label="model" min-width="100px">
                 <template #header>
                     <el-button class="ml0" type="primary" circle size="small" icon="Plus" @click="addItem()"> </el-button>
-                    <span class="ml10">model field</span>
+                    <span class="ml-2">model field</span>
                 </template>
                 <template #default="scope">
                     <el-input v-model="scope.row['model']" :placeholder="$t('components.df.fieldModelPlaceholder')" clearable> </el-input>
diff --git a/frontend/src/components/iconSelector/index.vue b/frontend/src/components/iconSelector/index.vue
index 6864bdc1..db1cf664 100644
--- a/frontend/src/components/iconSelector/index.vue
+++ b/frontend/src/components/iconSelector/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="icon-selector w100 h100">
+    <div class="icon-selector !w-full !h-full">
         <el-input
             v-model="state.fontIconSearch"
             :placeholder="state.fontIconPlaceholder"
@@ -12,7 +12,7 @@
             @blur="onIconBlur"
         >
             <template #prepend>
-                <SvgIcon :name="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix" class="font14" />
+                <SvgIcon :name="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix" class="!text-[14px]" />
             </template>
         </el-input>
         <el-popover
@@ -25,7 +25,7 @@
             virtual-triggering
         >
             <template #default>
-                <div class="ml5 mt5">{{ $t(title) }}</div>
+                <div class="ml-1 mt-1">{{ $t(title) }}</div>
                 <div class="icon-selector-warp">
                     <el-tabs v-model="state.fontIconTabActive" @tab-click="onIconClick">
                         <el-tab-pane lazy label="ele" name="ele">
diff --git a/frontend/src/components/pagetable/PageTable.vue b/frontend/src/components/pagetable/PageTable.vue
index a5032790..28c04feb 100644
--- a/frontend/src/components/pagetable/PageTable.vue
+++ b/frontend/src/components/pagetable/PageTable.vue
@@ -1,9 +1,8 @@
 <template>
-    <div>
+    <div class="h-full flex flex-col flex-1 overflow-hidden">
         <transition name="el-zoom-in-top">
             <!-- 查询表单 -->
-            <SearchForm v-if="isShowSearch" :items="tableSearchItems" v-model="queryForm" :search="search"
-                :reset="reset" :search-col="searchCol">
+            <SearchForm v-if="isShowSearch" :items="tableSearchItems" v-model="queryForm" :search="search" :reset="reset" :search-col="searchCol">
                 <!-- 遍历父组件传入的 solts 透传给子组件 -->
                 <template v-for="(_, key) in useSlots()" v-slot:[key]>
                     <slot :name="key"></slot>
@@ -11,7 +10,7 @@
             </SearchForm>
         </transition>
 
-        <div class="card">
+        <el-card class="h-full" body-class="h-full">
             <div class="table-main">
                 <!-- 表格头部 操作按钮 -->
                 <div class="table-header">
@@ -25,48 +24,57 @@
                                 <!-- 简易单个搜索项 -->
                                 <div v-if="nowSearchItem" class="simple-search-form">
                                     <el-dropdown v-if="searchItems?.length > 1">
-                                        <SvgIcon :size="16" name="CaretBottom" class="mr4 mt6 simple-search-form-btn" />
+                                        <SvgIcon :size="16" name="CaretBottom" class="!mr-1 !mt-1.5 simple-search-form-btn" />
                                         <template #dropdown>
                                             <el-dropdown-menu>
-                                                <el-dropdown-item v-for="searchItem in searchItems"
-                                                    :key="searchItem.prop" @click="changeSimpleFormItem(searchItem)">
+                                                <el-dropdown-item
+                                                    v-for="searchItem in searchItems"
+                                                    :key="searchItem.prop"
+                                                    @click="changeSimpleFormItem(searchItem)"
+                                                >
                                                     {{ $t(searchItem.label) }}
                                                 </el-dropdown-item>
                                             </el-dropdown-menu>
                                         </template>
                                     </el-dropdown>
 
-                                    <div class="simple-search-form-label mt5">
+                                    <div class="simple-search-form-label mt-1">
                                         <el-text truncated tag="b">{{ `${$t(nowSearchItem?.label)} : ` }}</el-text>
                                     </div>
 
                                     <el-form-item style="width: 200px" :key="nowSearchItem.prop">
-                                        <SearchFormItem @keyup.enter.native="searchFormItemKeyUpEnter"
-                                            v-if="!nowSearchItem.slot" :item="nowSearchItem"
-                                            v-model="queryForm[nowSearchItem.prop]" />
+                                        <SearchFormItem
+                                            @keyup.enter.native="searchFormItemKeyUpEnter"
+                                            v-if="!nowSearchItem.slot"
+                                            :item="nowSearchItem"
+                                            v-model="queryForm[nowSearchItem.prop]"
+                                        />
 
-                                        <slot @keyup.enter.native="searchFormItemKeyUpEnter" v-else
-                                            :name="nowSearchItem.slot">
-                                        </slot>
+                                        <slot @keyup.enter.native="searchFormItemKeyUpEnter" v-else :name="nowSearchItem.slot"> </slot>
                                     </el-form-item>
                                 </div>
 
                                 <div>
-                                    <el-button v-if="showToolButton('search') && searchItems?.length" icon="Search"
-                                        circle @click="search" />
+                                    <el-button v-if="showToolButton('search') && searchItems?.length" icon="Search" circle @click="search" />
 
                                     <!-- <el-button v-if="showToolButton('refresh')" icon="Refresh" circle @click="execQuery()" /> -->
 
-                                    <el-button v-if="showToolButton('search') && searchItems?.length > 1"
-                                        :icon="isShowSearch ? 'ArrowDown' : 'ArrowUp'" circle
-                                        @click="isShowSearch = !isShowSearch" />
+                                    <el-button
+                                        v-if="showToolButton('search') && searchItems?.length > 1"
+                                        :icon="isShowSearch ? 'ArrowDown' : 'ArrowUp'"
+                                        circle
+                                        @click="isShowSearch = !isShowSearch"
+                                    />
 
-                                    <el-popover placement="bottom" title="表格配置"
-                                        popper-style="max-height: 550px; overflow: auto; max-width: 450px" width="auto"
-                                        trigger="click">
+                                    <el-popover
+                                        placement="bottom"
+                                        title="表格配置"
+                                        popper-style="max-height: 550px; overflow: auto; max-width: 450px"
+                                        width="auto"
+                                        trigger="click"
+                                    >
                                         <div v-for="(item, index) in tableColumns" :key="index">
-                                            <el-checkbox v-model="item.show" :label="item.label" :true-value="true"
-                                                :false-value="false" />
+                                            <el-checkbox v-model="item.show" :label="$t(item.label)" :true-value="true" :false-value="false" />
                                         </div>
                                         <template #reference>
                                             <el-button icon="Operation" circle :size="props.size"></el-button>
@@ -78,55 +86,103 @@
                     </div>
                 </div>
 
-                <el-table ref="tableRef" v-bind="$attrs" :max-height="tableMaxHeight"
-                    @selection-change="handleSelectionChange" :data="tableData" highlight-current-row
-                    v-loading="loading" :size="props.size as any" :border="border">
-                    <el-table-column v-if="props.showSelection" :selectable="selectable" type="selection" width="40" />
+                <div class="h-[calc(100%-100px)]">
+                    <el-table
+                        ref="tableRef"
+                        v-bind="$attrs"
+                        height="100%"
+                        @selection-change="handleSelectionChange"
+                        :data="tableData"
+                        highlight-current-row
+                        v-loading="loading"
+                        :size="props.size as any"
+                        :border="border"
+                    >
+                        <el-table-column v-if="props.showSelection" :selectable="selectable" type="selection" width="40" />
 
-                    <template v-for="(item, index) in tableColumns">
-                        <el-table-column :key="index" v-if="item.show" :prop="item.prop" :label="$t(item.label)"
-                            :fixed="item.fixed" :align="item.align" :show-overflow-tooltip="item.showOverflowTooltip"
-                            :min-width="item.minWidth" :sortable="item.sortable || false" :type="item.type"
-                            :width="item.width">
-                            <!-- 插槽：预留功能 -->
-                            <template #default="scope" v-if="item.slot">
-                                <slot :name="item.slotName ? item.slotName : item.prop" :data="scope.row"></slot>
-                            </template>
+                        <template v-for="(item, index) in tableColumns">
+                            <el-table-column
+                                :key="index"
+                                v-if="item.show"
+                                :prop="item.prop"
+                                :label="$t(item.label)"
+                                :fixed="item.fixed"
+                                :align="item.align"
+                                :show-overflow-tooltip="item.showOverflowTooltip"
+                                :min-width="item.minWidth"
+                                :sortable="item.sortable || false"
+                                :type="item.type"
+                                :width="item.width"
+                            >
+                                <!-- 插槽：预留功能 -->
+                                <template #default="scope" v-if="item.slot">
+                                    <slot :name="item.slotName ? item.slotName : item.prop" :data="scope.row"></slot>
+                                </template>
 
-                            <!-- 枚举类型使用tab展示 -->
-                            <template #default="scope" v-else-if="item.type == 'tag'">
-                                <enum-tag :size="props.size" :enums="item.typeParam"
-                                    :value="item.getValueByData(scope.row)"></enum-tag>
-                            </template>
+                                <!-- 枚举类型使用tab展示 -->
+                                <template #default="scope" v-else-if="item.type == 'tag'">
+                                    <enum-tag :size="props.size" :enums="item.typeParam" :value="item.getValueByData(scope.row)"></enum-tag>
+                                </template>
 
-                            <template #default="scope" v-else>
-                                <!-- 配置了美化文本按钮以及文本内容大于指定长度，则显示美化按钮 -->
-                                <el-popover v-if="item.isBeautify && item.getValueByData(scope.row)?.length > 35"
-                                    effect="light" trigger="click" placement="top" width="600px">
-                                    <template #default>
-                                        <el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal"
-                                            type="textarea" />
-                                    </template>
-                                    <template #reference>
-                                        <el-link @click="formatText(item.getValueByData(scope.row))" :underline="false"
-                                            type="success" icon="MagicStick" class="mr5"></el-link>
-                                    </template>
-                                </el-popover>
+                                <template #default="scope" v-else>
+                                    <!-- 配置了美化文本按钮以及文本内容大于指定长度，则显示美化按钮 -->
+                                    <el-popover
+                                        v-if="item.isBeautify && item.getValueByData(scope.row)?.length > 35"
+                                        effect="light"
+                                        trigger="click"
+                                        placement="top"
+                                        width="600px"
+                                    >
+                                        <template #default>
+                                            <el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal" type="textarea" />
+                                        </template>
+                                        <template #reference>
+                                            <el-link
+                                                @click="formatText(item.getValueByData(scope.row))"
+                                                :underline="false"
+                                                type="success"
+                                                icon="MagicStick"
+                                                class="mr-1"
+                                            ></el-link>
+                                        </template>
+                                    </el-popover>
 
-                                <span>{{ item.getValueByData(scope.row) }}</span>
-                            </template>
-                        </el-table-column>
-                    </template>
-                </el-table>
+                                    <span>{{ item.getValueByData(scope.row) }}</span>
+                                </template>
+                            </el-table-column>
+                        </template>
+                    </el-table>
+                </div>
+
+                <el-row v-if="props.pageable" class="!mt-4" type="flex" justify="end">
+                    <el-pagination
+                        :small="props.size == 'small'"
+                        @current-change="pageNumChange"
+                        @size-change="pageSizeChange"
+                        style="text-align: right"
+                        layout="prev, pager, next, total, sizes"
+                        :total="total"
+                        v-model:current-page="queryForm.pageNum"
+                        v-model:page-size="queryForm.pageSize"
+                        :page-sizes="pageSizes"
+                    />
+                </el-row>
             </div>
 
-            <el-row v-if="props.pageable" class="mt20" type="flex" justify="end">
-                <el-pagination :small="props.size == 'small'" @current-change="pageNumChange"
-                    @size-change="pageSizeChange" style="text-align: right" layout="prev, pager, next, total, sizes"
-                    :total="total" v-model:current-page="queryForm.pageNum" v-model:page-size="queryForm.pageSize"
-                    :page-sizes="pageSizes" />
-            </el-row>
-        </div>
+            <!-- <el-row v-if="props.pageable" class="!mt-4" type="flex" justify="end">
+                <el-pagination
+                    :small="props.size == 'small'"
+                    @current-change="pageNumChange"
+                    @size-change="pageSizeChange"
+                    style="text-align: right"
+                    layout="prev, pager, next, total, sizes"
+                    :total="total"
+                    v-model:current-page="queryForm.pageNum"
+                    v-model:page-size="queryForm.pageSize"
+                    :page-sizes="pageSizes"
+                />
+            </el-row> -->
+        </el-card>
     </div>
 </template>
 
@@ -145,13 +201,12 @@ import SvgIcon from '@/components/svgIcon/index.vue';
 import { usePageTable } from '@/hooks/usePageTable';
 import { ElTable } from 'element-plus';
 
-
 const emit = defineEmits(['update:selectionData', 'pageSizeChange', 'pageNumChange']);
 
 export interface PageTableProps {
     size?: string;
     pageApi?: Api; // 请求表格数据的 api
-    columns: TableColumn[]; // 列配置项  ==> 必传
+    columns: TableColumn[] | any[]; // 列配置项  ==> 必传
     showSelection?: boolean;
     selectable?: (row: any) => boolean; // 是否可选
     pageable?: boolean;
@@ -385,45 +440,11 @@ defineExpose({
             width: 100%;
         }
 
-        // .el-table__header th {
-        //     height: 45px;
-        //     font-size: 15px;
-        //     font-weight: bold;
-        //     color: var(--el-text-color-primary);
-        //     background: var(--el-fill-color-light);
-        // }
-
-        // .el-table__row {
-        //     height: 45px;
-        //     font-size: 14px;
-
-        //     .move {
-        //         cursor: move;
-
-        //         .el-icon {
-        //             cursor: move;
-        //         }
-        //     }
-        // }
-
         // 设置 el-table 中 header 文字不换行，并省略
-        .el-table__header .el-table__cell>.cell {
-            // white-space: nowrap;
+        .el-table__header .el-table__cell > .cell {
             white-space: wrap;
         }
 
-        // 解决表格数据为空时样式不居中问题(仅在element-plus中)
-        // .el-table__empty-block {
-        //     position: absolute;
-        //     top: 50%;
-        //     left: 50%;
-        //     transform: translate(-50%, -50%);
-
-        //     .table-empty {
-        //         line-height: 30px;
-        //     }
-        // }
-
         // table 中 image 图片样式
         .table-image {
             width: 50px;
diff --git a/frontend/src/components/pagetable/index.ts b/frontend/src/components/pagetable/index.ts
index f08628d4..e5c4ce65 100644
--- a/frontend/src/components/pagetable/index.ts
+++ b/frontend/src/components/pagetable/index.ts
@@ -38,7 +38,7 @@ export class TableColumn {
     /**
      * 插槽名，
      */
-    private slotName: string = '';
+    slotName: string = '';
 
     showOverflowTooltip: boolean = true;
 
@@ -73,12 +73,12 @@ export class TableColumn {
     /**
      * 是否显示该列
      */
-    private show: boolean = true;
+    show: boolean = true;
 
     /**
      * 是否展示美化按钮（主要用于美化json文本等）
      */
-    private isBeautify: boolean = false;
+    isBeautify: boolean = false;
 
     constructor(prop: string, label: string) {
         this.prop = prop;
diff --git a/frontend/src/components/terminal-rdp/MachineRdp.vue b/frontend/src/components/terminal-rdp/MachineRdp.vue
index fb915aea..c15d393d 100644
--- a/frontend/src/components/terminal-rdp/MachineRdp.vue
+++ b/frontend/src/components/terminal-rdp/MachineRdp.vue
@@ -3,12 +3,12 @@
         <div ref="viewportRef" class="viewport" :style="{ width: state.size.width + 'px', height: state.size.height + 'px' }">
             <div ref="displayRef" class="display" tabindex="0" />
             <div class="btn-box">
-                <SvgIcon name="DocumentCopy" @click="openPaste" :size="20" class="pointer-icon mr10" title="剪贴板" />
-                <SvgIcon name="FolderOpened" @click="openFilesystem" :size="20" class="pointer-icon mr10" title="文件管理" />
-                <SvgIcon name="FullScreen" @click="state.fullscreen ? closeFullScreen() : openFullScreen()" :size="20" class="pointer-icon mr10" title="全屏" />
+                <SvgIcon name="DocumentCopy" @click="openPaste" :size="20" class="pointer-icon mr-2" title="剪贴板" />
+                <SvgIcon name="FolderOpened" @click="openFilesystem" :size="20" class="pointer-icon mr-2" title="文件管理" />
+                <SvgIcon name="FullScreen" @click="state.fullscreen ? closeFullScreen() : openFullScreen()" :size="20" class="pointer-icon mr-2" title="全屏" />
 
                 <el-dropdown>
-                    <SvgIcon name="Monitor" :size="20" class="pointer-icon mr10" title="发送快捷键" style="color: #fff" />
+                    <SvgIcon name="Monitor" :size="20" class="pointer-icon mr-2" title="发送快捷键" style="color: #fff" />
                     <template #dropdown>
                         <el-dropdown-menu>
                             <el-dropdown-item @click="openSendKeyboard(['65507', '65513', '65535'])"> Ctrl + Alt + Delete </el-dropdown-item>
@@ -21,7 +21,7 @@
                     </template>
                 </el-dropdown>
 
-                <SvgIcon name="Refresh" @click="connect(0, 0)" :size="20" class="pointer-icon mr10" title="重新连接" />
+                <SvgIcon name="Refresh" @click="connect(0, 0)" :size="20" class="pointer-icon mr-2" title="重新连接" />
             </div>
             <clipboard-dialog ref="clipboardRef" v-model:visible="state.clipboardDialog.visible" @close="closePaste" @submit="onsubmitClipboard" />
 
diff --git a/frontend/src/components/terminal-rdp/MachineRdpDialog.vue b/frontend/src/components/terminal-rdp/MachineRdpDialog.vue
index 48a971a9..7d556720 100644
--- a/frontend/src/components/terminal-rdp/MachineRdpDialog.vue
+++ b/frontend/src/components/terminal-rdp/MachineRdpDialog.vue
@@ -24,7 +24,7 @@
                     <div class="title-right-fixed">
                         <el-popconfirm @confirm="connect(true)" title="确认重新连接?">
                             <template #reference>
-                                <div class="mr10 pointer">
+                                <div class="mr-2 cursor-pointer">
                                     <el-tag v-if="state.status == TerminalStatus.Connected" type="success" effect="light" round> 已连接 </el-tag>
                                     <el-tag v-else type="danger" effect="light" round> 未连接，点击重连 </el-tag>
                                 </div>
diff --git a/frontend/src/components/terminal/TerminalDialog.vue b/frontend/src/components/terminal/TerminalDialog.vue
index 1458aadd..d19cf65f 100644
--- a/frontend/src/components/terminal/TerminalDialog.vue
+++ b/frontend/src/components/terminal/TerminalDialog.vue
@@ -28,7 +28,7 @@
                         <div class="title-right-fixed">
                             <el-popconfirm @confirm="reConnect(openTerminal.terminalId)" :title="$t('components.terminal.connConfirm')">
                                 <template #reference>
-                                    <div class="mr15 pointer">
+                                    <div class="mr-4 cursor-pointer">
                                         <el-tag v-if="openTerminal.status == TerminalStatus.Connected" type="success" effect="light" round>
                                             {{ $t('components.terminal.connected') }}
                                         </el-tag>
@@ -39,10 +39,10 @@
 
                             <el-popover placement="bottom" :width="200" trigger="hover">
                                 <template #reference>
-                                    <SvgIcon name="QuestionFilled" :size="20" class="pointer-icon mr10" />
+                                    <SvgIcon name="QuestionFilled" :size="20" class="pointer-icon !mr-2" />
                                 </template>
                                 <div>ctrl | command + f ({{ $t('components.terminal.search') }})</div>
-                                <div class="mt5">{{ $t('components.terminal.reConnTips') }}</div>
+                                <div class="mt-1">{{ $t('components.terminal.reConnTips') }}</div>
                             </el-popover>
 
                             <SvgIcon
@@ -50,7 +50,7 @@
                                 v-if="props.visibleMinimize"
                                 @click="minimize(openTerminal.terminalId)"
                                 :size="20"
-                                class="pointer-icon mr10"
+                                class="pointer-icon mr-2"
                                 :title="$t('components.terminal.minimize')"
                             />
 
@@ -58,7 +58,7 @@
                                 name="FullScreen"
                                 @click="handlerFullScreen(openTerminal)"
                                 :size="20"
-                                class="pointer-icon mr10"
+                                class="pointer-icon mr-2"
                                 :title="$t('components.terminal.fullScreenTitle')"
                             />
 
@@ -88,7 +88,7 @@
             <el-card
                 v-for="minimizeTerminal of minimizeTerminals"
                 :key="minimizeTerminal.terminalId"
-                :class="`terminal-minimize-item pointer ${minimizeTerminal.styleClass}`"
+                :class="`terminal-minimize-item cursor-pointer ${minimizeTerminal.styleClass}`"
                 size="small"
                 @click="maximize(minimizeTerminal.terminalId)"
             >
@@ -99,7 +99,7 @@
                 </el-tooltip>
 
                 <!-- 关闭按钮 -->
-                <SvgIcon name="CloseBold" @click.stop="closeMinimizeTerminal(minimizeTerminal.terminalId)" class="ml10 pointer-icon fr" :size="20" />
+                <SvgIcon name="CloseBold" @click.stop="closeMinimizeTerminal(minimizeTerminal.terminalId)" class="ml-2 pointer-icon float-right" :size="20" />
             </el-card>
         </div>
     </div>
diff --git a/frontend/src/components/terminal/TerminalLog.vue b/frontend/src/components/terminal/TerminalLog.vue
index 1e396d47..1485b004 100644
--- a/frontend/src/components/terminal/TerminalLog.vue
+++ b/frontend/src/components/terminal/TerminalLog.vue
@@ -4,16 +4,16 @@
             <template #header>
                 <DrawerHeader :header="props.title" :back="cancel">
                     <template #extra>
-                        <EnumTag :enums="LogTypeEnum" :value="log?.type" class="mr20" />
+                        <EnumTag :enums="LogTypeEnum" :value="log?.type" class="mr-4.5" />
                     </template>
                 </DrawerHeader>
             </template>
 
-            <el-descriptions class="mb10" :column="1" border v-if="extra">
+            <el-descriptions class="mb-2" :column="1" border v-if="extra">
                 <el-descriptions-item v-for="(value, key) in extra" :key="key" :span="1" :label="key">{{ value }}</el-descriptions-item>
             </el-descriptions>
 
-            <TerminalBody class="mb10" ref="terminalRef" height="calc(100vh - 220px)" />
+            <TerminalBody class="mb-2" ref="terminalRef" height="calc(100vh - 220px)" />
         </el-drawer>
     </div>
 </template>
diff --git a/frontend/src/layout/component/aside.vue b/frontend/src/layout/component/aside.vue
index 60aa6c55..9bdd17ae 100644
--- a/frontend/src/layout/component/aside.vue
+++ b/frontend/src/layout/component/aside.vue
@@ -6,7 +6,7 @@
         </el-scrollbar>
     </el-aside>
     <el-drawer v-model="themeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
-        <el-aside class="layout-aside w100 h100">
+        <el-aside class="layout-aside !w-full !h-full">
             <Logo v-if="setShowLogo" />
             <el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
                 <Vertical :menuList="state.menuList" />
diff --git a/frontend/src/layout/component/columnsAside.vue b/frontend/src/layout/component/columnsAside.vue
index 57fa371e..2051e261 100644
--- a/frontend/src/layout/component/columnsAside.vue
+++ b/frontend/src/layout/component/columnsAside.vue
@@ -2,25 +2,29 @@
     <div class="layout-columns-aside">
         <el-scrollbar>
             <ul>
-                <li v-for="(v, k) in state.columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v, k)" :ref="(el) => {
-                    if (el) columnsAsideOffsetTopRefs[k] = el;
-                }
-                    " :class="{ 'layout-columns-active': state.liIndex === k }" :title="$t(v.meta.title)">
-                    <div class="layout-columns-aside-li-box"
-                        v-if="!v.meta.link || (v.meta.link && v.meta.linkType == 1)">
+                <li
+                    v-for="(v, k) in state.columnsAsideList"
+                    :key="k"
+                    @click="onColumnsAsideMenuClick(v, k)"
+                    :ref="
+                        (el) => {
+                            if (el) columnsAsideOffsetTopRefs[k] = el;
+                        }
+                    "
+                    :class="{ 'layout-columns-active': state.liIndex === k }"
+                    :title="$t(v.meta.title)"
+                >
+                    <div class="layout-columns-aside-li-box" v-if="!v.meta.link || (v.meta.link && v.meta.linkType == 1)">
                         <i :class="v.meta.icon"></i>
-                        <div class="layout-columns-aside-li-box-title font12">
-                            {{ $t(v.meta.title) && $t(v.meta.title).length >= 4 ? $t(v.meta.title).substr(0, 4) :
-                                $t(v.meta.title) }}
+                        <div class="layout-columns-aside-li-box-title !text-[12px]">
+                            {{ $t(v.meta.title) && $t(v.meta.title).length >= 4 ? $t(v.meta.title).substr(0, 4) : $t(v.meta.title) }}
                         </div>
                     </div>
                     <div class="layout-columns-aside-li-box" v-else>
                         <a :href="v.meta.link" target="_blank">
                             <i :class="v.meta.icon"></i>
-                            <div class="layout-columns-aside-li-box-title font12">
-                                {{ $t(v.meta.title) && $t(v.meta.title).length >= 4 ? $t(v.meta.title).substr(0, 4) :
-                                    $t(v.meta.title)
-                                }}
+                            <div class="layout-columns-aside-li-box-title !text-[12px]">
+                                {{ $t(v.meta.title) && $t(v.meta.title).length >= 4 ? $t(v.meta.title).substr(0, 4) : $t(v.meta.title) }}
                             </div>
                         </a>
                     </div>
diff --git a/frontend/src/layout/component/main.vue b/frontend/src/layout/component/main.vue
index e2161580..f414e46a 100644
--- a/frontend/src/layout/component/main.vue
+++ b/frontend/src/layout/component/main.vue
@@ -1,13 +1,13 @@
 <template>
-    <el-main class="layout-main">
-        <el-scrollbar ref="layoutScrollbarRef" v-show="!state.currentRouteMeta.link && state.currentRouteMeta.linkType != 1">
+    <el-main class="layout-main !h-full">
+        <el-scrollbar ref="layoutScrollbarRef" view-class="!h-full" v-show="!state.currentRouteMeta.link && state.currentRouteMeta.linkType != 1">
             <LayoutParentView />
         </el-scrollbar>
 
-        <Link class="h100" :meta="state.currentRouteMeta" v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 2" />
+        <Link class="!h-full" :meta="state.currentRouteMeta" v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 2" />
 
         <Iframes
-            class="h100"
+            class="!h-full"
             :meta="state.currentRouteMeta"
             v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 1 && state.isShowLink"
             @getCurrentRouteMeta="onGetCurrentRouteMeta"
diff --git a/frontend/src/layout/navBars/breadcrumb/search.vue b/frontend/src/layout/navBars/breadcrumb/search.vue
index 3f8393b3..c4c1216a 100644
--- a/frontend/src/layout/navBars/breadcrumb/search.vue
+++ b/frontend/src/layout/navBars/breadcrumb/search.vue
@@ -16,7 +16,7 @@
                     </el-icon>
                 </template>
                 <template #default="{ item }">
-                    <div><SvgIcon :name="item.meta.icon" class="mr5" />{{ $t(item.meta.title) }}</div>
+                    <div><SvgIcon :name="item.meta.icon" class="mr-1" />{{ $t(item.meta.title) }}</div>
                 </template>
             </el-autocomplete>
         </el-dialog>
diff --git a/frontend/src/layout/navBars/breadcrumb/setings.vue b/frontend/src/layout/navBars/breadcrumb/setings.vue
index 508719e6..a6857425 100644
--- a/frontend/src/layout/navBars/breadcrumb/setings.vue
+++ b/frontend/src/layout/navBars/breadcrumb/setings.vue
@@ -14,7 +14,7 @@
                     </div>
                 </div>
                 <template v-if="themeConfig.terminalTheme == 'custom'">
-                    <div class="layout-breadcrumb-seting-bar-flex mt10">
+                    <div class="layout-breadcrumb-seting-bar-flex !mt-2">
                         <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.config.fontColor') }}</div>
                         <div class="layout-breadcrumb-seting-bar-flex-value">
                             <el-color-picker v-model="themeConfig.terminalForeground" size="small" @change="onColorPickerChange('terminalForeground')">
@@ -37,14 +37,14 @@
                     </div>
                 </template>
 
-                <div class="layout-breadcrumb-seting-bar-flex mt10">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-2">
                     <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.config.fontSize') }}</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
                         <el-input-number v-model="themeConfig.terminalFontSize" controls-position="right" :min="12" :max="24" size="small" style="width: 90px">
                         </el-input-number>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt10">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-2">
                     <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.config.fontWeight') }}</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
                         <el-select v-model="themeConfig.terminalFontWeight" size="small" style="width: 90px">
@@ -68,7 +68,7 @@
 
                 <!-- 全局设置 -->
                 <el-divider content-position="left">{{ $t('layout.config.globalSetting') }}</el-divider>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.config.pagesize') }}</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
                         <el-input-number
@@ -185,7 +185,7 @@
                         </el-color-picker>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt10">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-2">
                     <div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景渐变</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
                         <el-switch v-model="themeConfig.isTopBarColorGradual"
@@ -211,7 +211,7 @@
                         <el-switch v-model="themeConfig.isCollapse" @change="onThemeConfigChange"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">
                         {{ $t('layout.config.isUniqueOpened') }}
                     </div>
@@ -219,7 +219,7 @@
                         <el-switch v-model="themeConfig.isUniqueOpened"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">
                         {{ $t('layout.config.isFixedHeader') }}
                     </div>
@@ -227,7 +227,7 @@
                         <el-switch v-model="themeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: themeConfig.layout !== 'classic' ? 0.5 : 1 }">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5" :style="{ opacity: themeConfig.layout !== 'classic' ? 0.5 : 1 }">
                     <div class="layout-breadcrumb-seting-bar-flex-label">
                         {{ $t('layout.config.isClassicSplitMenu') }}
                     </div>
@@ -236,7 +236,7 @@
                         </el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">
                         {{ $t('layout.config.isLockScreen') }}
                     </div>
@@ -256,13 +256,13 @@
 
                 <!-- 界面显示 -->
                 <el-divider content-position="left">{{ $t('layout.config.interfaceDisplay') }}</el-divider>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.config.isShowLogo') }}</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
                         <el-switch v-model="themeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: themeConfig.layout === 'transverse' ? 0.5 : 1 }">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5" :style="{ opacity: themeConfig.layout === 'transverse' ? 0.5 : 1 }">
                     <div class="layout-breadcrumb-seting-bar-flex-label">
                         {{ $t('layout.config.isBreadcrumb') }}
                     </div>
@@ -274,7 +274,7 @@
                         ></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">
                         {{ $t('layout.config.isBreadcrumbIcon') }}
                     </div>
@@ -282,13 +282,13 @@
                         <el-switch v-model="themeConfig.isBreadcrumbIcon"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.config.isTagsview') }}</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
                         <el-switch v-model="themeConfig.isTagsview"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">
                         {{ $t('layout.config.isTagsviewIcon') }}
                     </div>
@@ -296,7 +296,7 @@
                         <el-switch v-model="themeConfig.isTagsviewIcon"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">
                         {{ $t('layout.config.isCacheTagsView') }}
                     </div>
@@ -304,7 +304,7 @@
                         <el-switch v-model="themeConfig.isCacheTagsView"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">
                         {{ $t('layout.config.isSortableTagsView') }}
                     </div>
@@ -312,19 +312,19 @@
                         <el-switch v-model="themeConfig.isSortableTagsView" @change="onSortableTagsViewChange"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.config.isFooter') }}</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
                         <el-switch v-model="themeConfig.isFooter"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.config.isGrayscale') }}</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
                         <el-switch v-model="themeConfig.isGrayscale" @change="onAddFilterChange('grayscale')"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.config.isInvert') }}</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
                         <el-switch v-model="themeConfig.isInvert" @change="onAddFilterChange('invert')"></el-switch>
@@ -333,7 +333,7 @@
 
                 <!-- 其它设置 -->
                 <el-divider content-position="left">{{ $t('layout.config.otherSetting') }}</el-divider>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.config.tagsStyle') }}</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
                         <el-select v-model="themeConfig.tagsStyle" placeholder="请选择" size="small" style="width: 90px">
@@ -343,7 +343,7 @@
                         </el-select>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.config.animation') }}</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
                         <el-select v-model="themeConfig.animation" size="small" style="width: 90px">
@@ -353,7 +353,7 @@
                         </el-select>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15 mb28">
+                <div class="layout-breadcrumb-seting-bar-flex !mt-3.5 !mb-5.5">
                     <div class="layout-breadcrumb-seting-bar-flex-label">
                         {{ $t('layout.config.columnsAsideStyle') }}
                     </div>
diff --git a/frontend/src/layout/navBars/breadcrumb/user.vue b/frontend/src/layout/navBars/breadcrumb/user.vue
index c9b4984f..cbbf64b0 100644
--- a/frontend/src/layout/navBars/breadcrumb/user.vue
+++ b/frontend/src/layout/navBars/breadcrumb/user.vue
@@ -56,13 +56,13 @@
                 </transition>
             </el-popover>
         </div>
-        <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
+        <div class="layout-navbars-breadcrumb-user-icon mr-2" @click="onScreenfullClick">
             <SvgIcon v-if="!state.isScreenfull" name="full-screen" :title="$t('layout.user.fullScreenOff')" />
             <SvgIcon v-else name="crop" />
         </div>
         <el-dropdown trigger="click" :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
-            <span class="layout-navbars-breadcrumb-user-link" style="cursor: pointer">
-                <img :src="userInfo.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+            <span class="layout-navbars-breadcrumb-user-link cursor-pointer">
+                <img :src="userInfo.photo" class="layout-navbars-breadcrumb-user-link-photo mr-1" />
                 {{ userInfo.name || userInfo.username }}
                 <i class="el-icon-arrow-down el-icon--right"></i>
             </span>
diff --git a/frontend/src/layout/navBars/tagsView/tagsView.vue b/frontend/src/layout/navBars/tagsView/tagsView.vue
index 45775c64..2259c18e 100644
--- a/frontend/src/layout/navBars/tagsView/tagsView.vue
+++ b/frontend/src/layout/navBars/tagsView/tagsView.vue
@@ -16,18 +16,18 @@
                         }
                     "
                 >
-                    <SvgIcon name="icon layout/tag-view-active" class="layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v)" />
+                    <SvgIcon name="icon layout/tag-view-active" class="layout-navbars-tagsview-ul-li-iconfont !text-[14px]" v-if="isActive(v)" />
                     <SvgIcon :name="v.icon" class="layout-navbars-tagsview-ul-li-iconfont" v-if="!isActive(v) && themeConfig.isTagsviewIcon" />
                     <span>{{ $t(v.title) }}</span>
                     <template v-if="isActive(v)">
                         <SvgIcon
                             name="RefreshRight"
-                            class="font14 ml5 layout-navbars-tagsview-ul-li-refresh"
+                            class="!text-[14px] ml-1 layout-navbars-tagsview-ul-li-refresh"
                             @click.stop="refreshCurrentTagsView($route.fullPath)"
                         />
                         <SvgIcon
                             name="Close"
-                            class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-active"
+                            class="!text-[14px] layout-navbars-tagsview-ul-li-icon layout-icon-active"
                             v-if="!v.isAffix"
                             @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)"
                         />
@@ -35,7 +35,7 @@
 
                     <SvgIcon
                         name="Close"
-                        class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-three"
+                        class="!text-[14px] layout-navbars-tagsview-ul-li-icon layout-icon-three"
                         v-if="!v.isAffix"
                         @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)"
                     />
@@ -521,7 +521,8 @@ onBeforeRouteUpdate((to) => {
         align-items: flex-end;
 
         .tgs-style-three-svg {
-            -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKC0wLjEzMzUwNiA1MC4xMTkyIDUwKSIgaWQ9InN2Z18xIiBkPSJtMTAwLjExOTE5LDEwMGMtNTUuMjI4LDAgLTEwMCwtNDQuNzcyIC0xMDAsLTEwMGwwLDEwMGwxMDAsMHoiIG9wYWNpdHk9InVuZGVmaW5lZCIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjRjhFQUU3Ii8+CiAgPHBhdGggZD0ibS0wLjYzNzY2LDcuMzEyMjhjMC4xMTkxOSwwIDAuMjE3MzcsMC4wNTc5NiAwLjQ3Njc2LDAuMTE5MTljMC4yMzIsMC4wNTQ3NyAwLjI3MzI5LDAuMDM0OTEgMC4zNTc1NywwLjExOTE5YzAuMDg0MjgsMC4wODQyOCAwLjM1NzU3LDAgMC40NzY3NiwwbDAuMTE5MTksMGwwLjIzODM4LDAiIGlkPSJzdmdfMiIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0ibTI4LjkyMTM0LDY5LjA1MjQ0YzAsMC4xMTkxOSAwLDAuMjM4MzggMCwwLjM1NzU3bDAsMC4xMTkxOWwwLDAuMTE5MTkiIGlkPSJzdmdfMyIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z180IiBoZWlnaHQ9IjAiIHdpZHRoPSIxLjMxMTA4IiB5PSI2LjgzNTUyIiB4PSItMC4wNDE3MSIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjEuNzg3ODQiIHdpZHRoPSIwLjExOTE5IiB5PSI2OC40NTY1IiB4PSIyOC45MjEzNCIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z182IiBoZWlnaHQ9IjQuODg2NzciIHdpZHRoPSIxOS4wNzAzMiIgeT0iNTEuMjkzMjEiIHg9IjM2LjY2ODY2IiBzdHJva2U9Im51bGwiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+'),
+            -webkit-mask-image:
+                url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKC0wLjEzMzUwNiA1MC4xMTkyIDUwKSIgaWQ9InN2Z18xIiBkPSJtMTAwLjExOTE5LDEwMGMtNTUuMjI4LDAgLTEwMCwtNDQuNzcyIC0xMDAsLTEwMGwwLDEwMGwxMDAsMHoiIG9wYWNpdHk9InVuZGVmaW5lZCIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjRjhFQUU3Ii8+CiAgPHBhdGggZD0ibS0wLjYzNzY2LDcuMzEyMjhjMC4xMTkxOSwwIDAuMjE3MzcsMC4wNTc5NiAwLjQ3Njc2LDAuMTE5MTljMC4yMzIsMC4wNTQ3NyAwLjI3MzI5LDAuMDM0OTEgMC4zNTc1NywwLjExOTE5YzAuMDg0MjgsMC4wODQyOCAwLjM1NzU3LDAgMC40NzY3NiwwbDAuMTE5MTksMGwwLjIzODM4LDAiIGlkPSJzdmdfMiIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0ibTI4LjkyMTM0LDY5LjA1MjQ0YzAsMC4xMTkxOSAwLDAuMjM4MzggMCwwLjM1NzU3bDAsMC4xMTkxOWwwLDAuMTE5MTkiIGlkPSJzdmdfMyIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z180IiBoZWlnaHQ9IjAiIHdpZHRoPSIxLjMxMTA4IiB5PSI2LjgzNTUyIiB4PSItMC4wNDE3MSIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjEuNzg3ODQiIHdpZHRoPSIwLjExOTE5IiB5PSI2OC40NTY1IiB4PSIyOC45MjEzNCIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z182IiBoZWlnaHQ9IjQuODg2NzciIHdpZHRoPSIxOS4wNzAzMiIgeT0iNTEuMjkzMjEiIHg9IjM2LjY2ODY2IiBzdHJva2U9Im51bGwiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+'),
                 url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoLTg5Ljc2MjQgNy4zMzAxNCA1NS4xMjUyKSIgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzEiIGZpbGw9IiNGOEVBRTciIGQ9Im02Mi41NzQ0OSwxMTcuNTIwODZjLTU1LjIyOCwwIC0xMDAsLTQ0Ljc3MiAtMTAwLC0xMDBsMCwxMDBsMTAwLDB6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgogIDxwYXRoIGQ9Im0tMC42Mzc2Niw3LjMxMjI4YzAuMTE5MTksMCAwLjIxNzM3LDAuMDU3OTYgMC40NzY3NiwwLjExOTE5YzAuMjMyLDAuMDU0NzcgMC4yNzMyOSwwLjAzNDkxIDAuMzU3NTcsMC4xMTkxOWMwLjA4NDI4LDAuMDg0MjggMC4zNTc1NywwIDAuNDc2NzYsMGwwLjExOTE5LDBsMC4yMzgzOCwwIiBpZD0ic3ZnXzIiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxwYXRoIGQ9Im0yOC45MjEzNCw2OS4wNTI0NGMwLDAuMTE5MTkgMCwwLjIzODM4IDAsMC4zNTc1N2wwLDAuMTE5MTlsMCwwLjExOTE5IiBpZD0ic3ZnXzMiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNCIgaGVpZ2h0PSIwIiB3aWR0aD0iMS4zMTEwOCIgeT0iNi44MzU1MiIgeD0iLTAuMDQxNzEiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNSIgaGVpZ2h0PSIxLjc4Nzg0IiB3aWR0aD0iMC4xMTkxOSIgeT0iNjguNDU2NSIgeD0iMjguOTIxMzQiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNiIgaGVpZ2h0PSI0Ljg4Njc3IiB3aWR0aD0iMTkuMDcwMzIiIHk9IjUxLjI5MzIxIiB4PSIzNi42Njg2NiIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiA8L2c+Cjwvc3ZnPg=='),
                 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='8' width='100%' height='100%' fill='%23F8EAE7'/></svg>");
             -webkit-mask-size:
diff --git a/frontend/src/layout/routerView/iframes.vue b/frontend/src/layout/routerView/iframes.vue
index e9587c57..05793710 100644
--- a/frontend/src/layout/routerView/iframes.vue
+++ b/frontend/src/layout/routerView/iframes.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="layout-view-bg-white flex h100" v-loading="iframeLoading">
+        <div class="layout-view-bg-white flex !h-full" v-loading="iframeLoading">
             <iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" v-show="!iframeLoading"></iframe>
         </div>
     </div>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 9d34b870..af5265e6 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -15,6 +15,7 @@ import { i18n } from '@/i18n/index';
 import 'splitpanes/dist/splitpanes.css';
 
 import '@/theme/index.scss';
+import '@/theme/tailwind.css';
 import '@/assets/font/font.css';
 import '@/assets/icon/icon.js';
 import { getThemeConfig } from './common/utils/storage';
diff --git a/frontend/src/theme/app.scss b/frontend/src/theme/app.scss
index c79c416f..9e769dcf 100644
--- a/frontend/src/theme/app.scss
+++ b/frontend/src/theme/app.scss
@@ -1,11 +1,5 @@
 /* 初始化样式
 ------------------------------- */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    outline: none !important;
-}
 
 :root {
     --color-white: #ffffff;
@@ -191,45 +185,12 @@ body,
     }
 }
 
-.flex-justify-between {
-    display: flex;
-    align-items: center; // 垂直方向水平居中
-    justify-content: space-between; // 使第一个子元素靠近父容器的起始位置，最后一个子元素靠近终止位置，而其他子元素均匀分布在它们之间
-}
-
 .flex-all-center {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.flex-align-center {
-    display: flex;
-    align-items: center; // 垂直方向水平居中
-}
-
-/* 宽高 100%
-------------------------------- */
-.w100 {
-    width: 100% !important;
-}
-
-.h100 {
-    height: 100% !important;
-}
-
-.vh100 {
-    height: 100vh !important;
-}
-
-.max100vh {
-    max-height: 100vh !important;
-}
-
-.min100vh {
-    min-height: 100vh !important;
-}
-
 /* 颜色值
 ------------------------------- */
 .color-primary {
@@ -252,54 +213,6 @@ body,
     color: var(--el-color-info);
 }
 
-/* 字体大小全局样式
-------------------------------- */
-@for $i from 8 through 32 {
-    .font#{$i} {
-        font-size: #{$i}px !important;
-    }
-}
-
-/* 外边距、内边距全局样式
-------------------------------- */
-@for $i from 1 through 35 {
-    .mt#{$i} {
-        margin-top: #{$i}px !important;
-    }
-
-    .mr#{$i} {
-        margin-right: #{$i}px !important;
-    }
-
-    .mb#{$i} {
-        margin-bottom: #{$i}px !important;
-    }
-
-    .ml#{$i} {
-        margin-left: #{$i}px !important;
-    }
-
-    .pt#{$i} {
-        padding-top: #{$i}px !important;
-    }
-
-    .pr#{$i} {
-        padding-right: #{$i}px !important;
-    }
-
-    .pb#{$i} {
-        padding-bottom: #{$i}px !important;
-    }
-
-    .pl#{$i} {
-        padding-left: #{$i}px !important;
-    }
-
-    .pd#{$i} {
-        padding: #{$i}px !important;
-    }
-}
-
 
 ::-webkit-scrollbar {
     width: 4px;
@@ -376,14 +289,6 @@ body,
     height: 100%;
 }
 
-.fl {
-    float: left;
-}
-
-.fr {
-    float: right;
-}
-
 .search-form {
     .el-form-item {
         margin-bottom: 3px;
@@ -394,10 +299,6 @@ body,
     z-index: inherit !important;
 }
 
-.pointer {
-    cursor: pointer;
-}
-
 .pointer-icon {
     cursor: pointer;
     transition: color 0.3s;
@@ -406,42 +307,4 @@ body,
 .pointer-icon:hover {
     color: var(--el-color-primary);
     /* 鼠标移动到图标时的颜色 */
-}
-
-
-/**   splitpanes  **/
-.splitpanes.default-theme .splitpanes {
-    background: transparent !important;
-}
-
-.splitpanes.default-theme .splitpanes__pane {
-    background: transparent !important;
-}
-
-.default-theme.splitpanes--vertical>.splitpanes__splitter {
-    border-left: 1px solid var(--bg-main-color);
-}
-
-.default-theme.splitpanes--horizontal>.splitpanes__splitter {
-    border-top: 1px solid var(--bg-main-color);
-}
-
-// 竖线样式
-.splitpanes.default-theme .splitpanes__splitter::before,
-.splitpanes.default-theme .splitpanes__splitter::after {
-    background-color: var(--el-color-info-light-5);
-}
-
-.splitpanes.default-theme .splitpanes__splitter:hover::before,
-.splitpanes.default-theme .splitpanes__splitter:hover::after {
-    background-color: var(--el-color-success);
-}
-
-.splitpanes.default-theme .splitpanes__splitter {
-    min-width: 6px;
-    background: var(--el-color-info-light-8) !important;
-}
-
-.splitpanes.default-theme .splitpanes__splitter:hover {
-    background: var(--el-color-success-light-8) !important;
 }
\ No newline at end of file
diff --git a/frontend/src/theme/element.scss b/frontend/src/theme/element.scss
index 541d2761..2ff80a8b 100644
--- a/frontend/src/theme/element.scss
+++ b/frontend/src/theme/element.scss
@@ -52,6 +52,9 @@
 
 /* NavMenu 导航菜单
 ------------------------------- */
+$radius: 6px;
+$menuHeight: 46px !important;
+
 // 鼠标 hover 时颜色
 .el-menu-hover-bg-color {
     background-color: var(--bg-menuBarActiveColor) !important;
@@ -64,13 +67,15 @@
 }
 
 .el-menu-item {
-    height: 56px !important;
-    line-height: 56px !important;
+    height: $menuHeight;
+    line-height: $menuHeight;
+    border-radius: $radius;
 }
 
 .el-menu-item,
 .el-sub-menu__title {
     color: var(--bg-menuBarColor);
+    height: $menuHeight;
 }
 
 // 修复点击左侧菜单折叠再展开时，宽度不跟随问题
@@ -100,20 +105,18 @@
 .el-sub-menu.is-active .el-sub-menu__title,
 .el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
     @extend .el-menu-hover-bg-color;
+    border-radius: $radius;
 }
 
 .el-menu-item:hover {
     @extend .el-menu-hover-bg-color;
+    border-radius: $radius;
 }
 
 .el-sub-menu.is-active.is-opened .el-sub-menu__title {
     background-color: unset !important;
 }
 
-// 子级菜单背景颜色
-// .el-menu--inline {
-// 	background: var(--next-bg-menuBar-light-1);
-// }
 // 水平菜单、横向菜单折叠 a 标签
 .el-popper.is-dark a {
     color: var(--el-color-white) !important;
diff --git a/frontend/src/theme/index.scss b/frontend/src/theme/index.scss
index 5193085a..07973d46 100644
--- a/frontend/src/theme/index.scss
+++ b/frontend/src/theme/index.scss
@@ -1,8 +1,8 @@
 @use './app.scss';
 @use './base.scss';
-@use './other.scss';
 @use './element.scss';
 @use './media/media.scss';
 @use './waves.scss';
 @use './dark.scss';
-@use './iconSelector.scss';
\ No newline at end of file
+@use './iconSelector.scss';
+@use './splitpanes.scss';
\ No newline at end of file
diff --git a/frontend/src/theme/other.scss b/frontend/src/theme/other.scss
deleted file mode 100644
index 05fb26ee..00000000
--- a/frontend/src/theme/other.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/* wangeditor富文本编辑器
-------------------------------- */
-.w-e-toolbar {
-    border: 1px solid #ebeef5 !important;
-    border-bottom: 1px solid #ebeef5 !important;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    z-index: 2 !important;
-}
-
-.w-e-text-container {
-    border: 1px solid #ebeef5 !important;
-    border-top: none !important;
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-    z-index: 1 !important;
-}
-
-/* web端自定义截屏
-------------------------------- */
-#screenShotContainer {
-    z-index: 9998 !important;
-}
-
-#toolPanel {
-    height: 42px !important;
-}
-
-#optionPanel {
-    height: 37px !important;
-}
\ No newline at end of file
diff --git a/frontend/src/theme/splitpanes.scss b/frontend/src/theme/splitpanes.scss
new file mode 100644
index 00000000..1cd54fd2
--- /dev/null
+++ b/frontend/src/theme/splitpanes.scss
@@ -0,0 +1,36 @@
+/**   splitpanes  **/
+.splitpanes.default-theme .splitpanes {
+    background: transparent !important;
+}
+
+.splitpanes.default-theme .splitpanes__pane {
+    background: transparent !important;
+}
+
+.default-theme.splitpanes--vertical>.splitpanes__splitter {
+    border-left: 1px solid var(--bg-main-color);
+}
+
+.default-theme.splitpanes--horizontal>.splitpanes__splitter {
+    border-top: 1px solid var(--bg-main-color);
+}
+
+// 竖线样式
+.splitpanes.default-theme .splitpanes__splitter::before,
+.splitpanes.default-theme .splitpanes__splitter::after {
+    background-color: var(--el-color-info-light-5);
+}
+
+.splitpanes.default-theme .splitpanes__splitter:hover::before,
+.splitpanes.default-theme .splitpanes__splitter:hover::after {
+    background-color: var(--el-color-success);
+}
+
+.splitpanes.default-theme .splitpanes__splitter {
+    min-width: 6px;
+    background: var(--el-color-info-light-8) !important;
+}
+
+.splitpanes.default-theme .splitpanes__splitter:hover {
+    background: var(--el-color-success-light-8) !important;
+}
\ No newline at end of file
diff --git a/frontend/src/theme/tailwind.css b/frontend/src/theme/tailwind.css
new file mode 100644
index 00000000..022157d5
--- /dev/null
+++ b/frontend/src/theme/tailwind.css
@@ -0,0 +1,2 @@
+
+@import "tailwindcss";
\ No newline at end of file
diff --git a/frontend/src/views/flow/ProcdefEdit.vue b/frontend/src/views/flow/ProcdefEdit.vue
index d9b15c23..b91ee27c 100755
--- a/frontend/src/views/flow/ProcdefEdit.vue
+++ b/frontend/src/views/flow/ProcdefEdit.vue
@@ -45,9 +45,9 @@
                     <el-table-column prop="name" min-width="100px">
                         <template #header>
                             <el-button class="ml0" type="primary" circle size="small" icon="Plus" @click="addTask()"> </el-button>
-                            <span class="ml10">{{ $t('flow.nodeName') }}<span class="ml5" style="color: red">*</span></span>
+                            <span class="ml-2">{{ $t('flow.nodeName') }}<span class="ml-1" style="color: red">*</span></span>
                             <el-tooltip :content="$t('flow.nodeNameTips')" placement="top">
-                                <SvgIcon class="ml5" name="question-filled" />
+                                <SvgIcon class="ml-1" name="question-filled" />
                             </el-tooltip>
                         </template>
                         <template #default="scope">
@@ -57,7 +57,7 @@
 
                     <el-table-column prop="userId" min-width="150px" show-overflow-tooltip>
                         <template #header>
-                            <span class="ml10">{{ $t('flow.auditor') }}<span class="ml5" style="color: red">*</span></span>
+                            <span class="ml-2">{{ $t('flow.auditor') }}<span class="ml-1" style="color: red">*</span></span>
                         </template>
 
                         <template #default="scope">
@@ -67,7 +67,7 @@
 
                     <el-table-column :label="$t('common.operation')" width="110px">
                         <template #default="scope">
-                            <el-link @click="deleteTask(scope.$index)" class="ml5" type="danger" icon="delete" plain></el-link>
+                            <el-link @click="deleteTask(scope.$index)" class="ml-1" type="danger" icon="delete" plain></el-link>
                         </template>
                     </el-table-column>
                 </el-table>
diff --git a/frontend/src/views/flow/ProcdefList.vue b/frontend/src/views/flow/ProcdefList.vue
index 03214e76..ac48ca8c 100644
--- a/frontend/src/views/flow/ProcdefList.vue
+++ b/frontend/src/views/flow/ProcdefList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="procdefApi.list"
diff --git a/frontend/src/views/flow/ProcinstList.vue b/frontend/src/views/flow/ProcinstList.vue
index e03d8dc5..08b58cc4 100644
--- a/frontend/src/views/flow/ProcinstList.vue
+++ b/frontend/src/views/flow/ProcinstList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="procinstApi.list"
diff --git a/frontend/src/views/flow/ProcinstTaskList.vue b/frontend/src/views/flow/ProcinstTaskList.vue
index a237763d..7aa3b0cf 100644
--- a/frontend/src/views/flow/ProcinstTaskList.vue
+++ b/frontend/src/views/flow/ProcinstTaskList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="procinstApi.tasks"
diff --git a/frontend/src/views/flow/flowbiz/dbms/DbSqlExecFlowBizForm.vue b/frontend/src/views/flow/flowbiz/dbms/DbSqlExecFlowBizForm.vue
index 8a39aca4..596fa5e6 100755
--- a/frontend/src/views/flow/flowbiz/dbms/DbSqlExecFlowBizForm.vue
+++ b/frontend/src/views/flow/flowbiz/dbms/DbSqlExecFlowBizForm.vue
@@ -11,7 +11,7 @@
         </el-form-item>
 
         <el-form-item prop="sql" label="SQL" required>
-            <div class="w100">
+            <div class="!w-full">
                 <monaco-editor height="300px" language="sql" v-model="bizForm.sql" />
             </div>
         </el-form-item>
diff --git a/frontend/src/views/home/Home.vue b/frontend/src/views/home/Home.vue
index 8153c2cf..7a604ecf 100644
--- a/frontend/src/views/home/Home.vue
+++ b/frontend/src/views/home/Home.vue
@@ -7,7 +7,7 @@
                     <div class="personal-user">
                         <div class="personal-user-left">
                             <el-upload
-                                class="h100 personal-user-left-upload"
+                                class="!h-full personal-user-left-upload"
                                 :action="getUploadFileUrl(`avatar_${userInfo.username}`)"
                                 :limit="1"
                                 :show-file-list="false"
@@ -20,16 +20,16 @@
                         </div>
                         <div class="personal-user-right">
                             <el-row>
-                                <el-col :span="24" class="personal-title mb18">
+                                <el-col :span="24" class="personal-title mb-4">
                                     {{ $t('home.welcomeMsg', { name: userInfo.name }) }}
                                 </el-col>
                                 <el-col :span="24">
                                     <el-row>
-                                        <el-col :xs="24" :sm="12" class="personal-item mb6">
+                                        <el-col :xs="24" :sm="12" class="personal-item !mb-1.5">
                                             <div class="personal-item-label">{{ $t('common.username') }}：</div>
                                             <div class="personal-item-value">{{ userInfo.username }}</div>
                                         </el-col>
-                                        <el-col :xs="24" :sm="12" class="personal-item mb6">
+                                        <el-col :xs="24" :sm="12" class="personal-item !mb-1.5">
                                             <div class="personal-item-label">{{ $t('common.role') }}：</div>
                                             <div class="personal-item-value">{{ roleInfo }}</div>
                                         </el-col>
@@ -37,11 +37,11 @@
                                 </el-col>
                                 <el-col :span="24">
                                     <el-row>
-                                        <el-col :xs="24" :sm="12" class="personal-item mb6">
+                                        <el-col :xs="24" :sm="12" class="personal-item !mb-1.5">
                                             <div class="personal-item-label">{{ $t('home.lastLoginIp') }}：</div>
                                             <div class="personal-item-value">{{ userInfo.lastLoginIp }}</div>
                                         </el-col>
-                                        <el-col :xs="24" :sm="12" class="personal-item mb6">
+                                        <el-col :xs="24" :sm="12" class="personal-item !mb-1.5">
                                             <div class="personal-item-label">{{ $t('home.lastLoginTime') }}：</div>
                                             <div class="personal-item-value">{{ formatDate(userInfo.lastLoginTime) }}</div>
                                         </el-col>
@@ -71,14 +71,14 @@
             </el-col>
         </el-row>
 
-        <el-row :gutter="20" class="mt20 resource-info">
+        <el-row :gutter="20" class="!mt-4 resource-info">
             <el-col :sm="12">
                 <el-card shadow="hover">
                     <template #header>
                         <el-row justify="center">
                             <div class="resource-num pointer-icon" @click="toPage('machine')">
                                 <SvgIcon
-                                    class="mb5 mr5"
+                                    class="mb-1 mr-1"
                                     :size="28"
                                     :name="TagResourceTypeEnum.Machine.extra.icon"
                                     :color="TagResourceTypeEnum.Machine.extra.iconColor"
@@ -123,7 +123,7 @@
                         <el-row justify="center">
                             <div class="resource-num pointer-icon" @click="toPage('db')">
                                 <SvgIcon
-                                    class="mb5 mr5"
+                                    class="mb-1 mr-1"
                                     :size="28"
                                     :name="TagResourceTypeEnum.DbInstance.extra.icon"
                                     :color="TagResourceTypeEnum.DbInstance.extra.iconColor"
@@ -157,14 +157,14 @@
             </el-col>
         </el-row>
 
-        <el-row :gutter="20" class="mt20 resource-info">
+        <el-row :gutter="20" class="!mt-4 resource-info">
             <el-col :sm="12">
                 <el-card shadow="hover">
                     <template #header>
                         <el-row justify="center">
                             <div class="resource-num pointer-icon" @click="toPage('redis')">
                                 <SvgIcon
-                                    class="mb5 mr5"
+                                    class="mb-1 mr-1"
                                     :size="28"
                                     :name="TagResourceTypeEnum.Redis.extra.icon"
                                     :color="TagResourceTypeEnum.Redis.extra.iconColor"
@@ -203,7 +203,7 @@
                         <el-row justify="center">
                             <div class="resource-num pointer-icon" @click="toPage('mongo')">
                                 <SvgIcon
-                                    class="mb5 mr5"
+                                    class="mb-1 mr-1"
                                     :size="28"
                                     :name="TagResourceTypeEnum.Mongo.extra.icon"
                                     :color="TagResourceTypeEnum.Mongo.extra.iconColor"
@@ -251,7 +251,7 @@
                     </template>
                 </el-table-column>
             </el-table>
-            <el-row type="flex" class="mt5" justify="center">
+            <el-row type="flex" class="mt-1" justify="center">
                 <el-pagination
                     small
                     @current-change="searchMsg"
diff --git a/frontend/src/views/login/component/AccountLogin.vue b/frontend/src/views/login/component/AccountLogin.vue
index 51a4b72e..6afc97ab 100644
--- a/frontend/src/views/login/component/AccountLogin.vue
+++ b/frontend/src/views/login/component/AccountLogin.vue
@@ -35,7 +35,7 @@
                     </el-col>
                     <el-col :span="8">
                         <div class="login-content-code">
-                            <img class="login-content-code-img" @click="getCaptcha" width="130px" height="40px" :src="captchaImage" style="cursor: pointer" />
+                            <img class="login-content-code-img cursor-pointer" @click="getCaptcha" width="130px" height="40px" :src="captchaImage" />
                         </div>
                     </el-col>
                 </el-row>
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index 4e4f8e92..eb78e78c 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -63,7 +63,7 @@
                                 </el-tab-pane>
                             </el-tabs>
                         </div>
-                        <div class="mt20" v-if="state.oauth2LoginConfig.enable">
+                        <div class="!mt-4" v-if="state.oauth2LoginConfig.enable">
                             <el-text size="small">{{ $t('login.thirdPartyLogin') }}: </el-text>
                             <el-tooltip :content="state.oauth2LoginConfig.name" placement="bottom-start">
                                 <el-button link size="small" type="primary" @click="oauth2Login">
diff --git a/frontend/src/views/msg/channel/ChannelList.vue b/frontend/src/views/msg/channel/ChannelList.vue
index 12cb1397..c15282d4 100755
--- a/frontend/src/views/msg/channel/ChannelList.vue
+++ b/frontend/src/views/msg/channel/ChannelList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="channelApi.list"
diff --git a/frontend/src/views/msg/tmpl/TmplEdit.vue b/frontend/src/views/msg/tmpl/TmplEdit.vue
index bb5ffc88..233c8c06 100755
--- a/frontend/src/views/msg/tmpl/TmplEdit.vue
+++ b/frontend/src/views/msg/tmpl/TmplEdit.vue
@@ -40,7 +40,7 @@
 
                 <FormItemTooltip prop="tmpl" :label="$t('msg.tmpl')" :tooltip="$t('msg.msgTmplTooltip')">
                     <MonacoEditor
-                        class="w100"
+                        class="!w-full"
                         height="200px"
                         v-model="formData.tmpl"
                         :language="EnumValue.getLabelByValue(TmplTypeEnum, formData.msgType)"
diff --git a/frontend/src/views/msg/tmpl/TmplList.vue b/frontend/src/views/msg/tmpl/TmplList.vue
index b45e7038..655c1d21 100755
--- a/frontend/src/views/msg/tmpl/TmplList.vue
+++ b/frontend/src/views/msg/tmpl/TmplList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="tmplApi.list"
diff --git a/frontend/src/views/ops/component/ResourceAuthCertEdit.vue b/frontend/src/views/ops/component/ResourceAuthCertEdit.vue
index 0cbe07b3..88748c18 100644
--- a/frontend/src/views/ops/component/ResourceAuthCertEdit.vue
+++ b/frontend/src/views/ops/component/ResourceAuthCertEdit.vue
@@ -73,7 +73,7 @@
                     </el-form-item>
 
                     <el-form-item v-if="form.ciphertextType == AuthCertCiphertextTypeEnum.PrivateKey.value" prop="ciphertext" :label="$t('ac.privateKey')">
-                        <div class="w100" style="position: relative">
+                        <div class="!w-full" style="position: relative">
                             <SvgIcon
                                 v-if="form.id"
                                 v-auth="'authcert:showciphertext'"
diff --git a/frontend/src/views/ops/component/ResourceAuthCertTableEdit.vue b/frontend/src/views/ops/component/ResourceAuthCertTableEdit.vue
index 7672e1f1..77e345ae 100644
--- a/frontend/src/views/ops/component/ResourceAuthCertTableEdit.vue
+++ b/frontend/src/views/ops/component/ResourceAuthCertTableEdit.vue
@@ -7,13 +7,13 @@
                 </template>
                 <template #default="scope">
                     <el-button v-auth="'authcert:save'" @click="edit(scope.row, scope.$index)" type="primary" icon="edit" link></el-button>
-                    <el-button class="ml1" v-auth="'authcert:del'" type="danger" @click="deleteRow(scope.$index)" icon="delete" link></el-button>
+                    <el-button class="ml-0.5" v-auth="'authcert:del'" type="danger" @click="deleteRow(scope.$index)" icon="delete" link></el-button>
 
                     <el-button
                         :title="$t('ac.testConn')"
                         :loading="props.testConnBtnLoading && scope.$index == state.idx"
                         :disabled="props.testConnBtnLoading"
-                        class="ml1"
+                        class="ml-0.5"
                         type="success"
                         @click="testConn(scope.row, scope.$index)"
                         icon="Link"
diff --git a/frontend/src/views/ops/component/ResourceTags.vue b/frontend/src/views/ops/component/ResourceTags.vue
index 4a9582ff..2cf8d879 100644
--- a/frontend/src/views/ops/component/ResourceTags.vue
+++ b/frontend/src/views/ops/component/ResourceTags.vue
@@ -2,17 +2,17 @@
     <div v-if="props.tags">
         <el-row v-for="(tag, idx) in props.tags?.slice(0, 1)" :key="idx">
             <TagInfo :tag-path="tag.codePath" />
-            <span class="ml3">{{ tag.codePath }}</span>
+            <span class="ml-0.5">{{ tag.codePath }}</span>
 
             <!-- 展示剩余的标签信息 -->
             <el-popover :show-after="300" v-if="props.tags.length > 1 && idx == 0" placement="top-start" width="230" trigger="hover">
                 <template #reference>
-                    <SvgIcon class="mt5 ml5" color="var(--el-color-primary)" name="MoreFilled" />
+                    <SvgIcon class="mt-1 ml-1" color="var(--el-color-primary)" name="MoreFilled" />
                 </template>
 
                 <el-row v-for="i in props.tags.slice(1)" :key="i">
                     <TagInfo :tag-path="i.codePath" />
-                    <span class="ml3">{{ i.codePath }}</span>
+                    <span class="ml-0.5">{{ i.codePath }}</span>
                 </el-row>
             </el-popover>
         </el-row>
diff --git a/frontend/src/views/ops/component/TagCodePath.vue b/frontend/src/views/ops/component/TagCodePath.vue
index 8208856d..3cb5e0fe 100644
--- a/frontend/src/views/ops/component/TagCodePath.vue
+++ b/frontend/src/views/ops/component/TagCodePath.vue
@@ -5,16 +5,16 @@
                 <SvgIcon
                     :name="EnumValue.getEnumByValue(TagResourceTypeEnum, item.type)?.extra.icon"
                     :color="EnumValue.getEnumByValue(TagResourceTypeEnum, item.type)?.extra.iconColor"
-                    class="mr2"
+                    class="mr-0.5"
                 />
                 <span> {{ item.name ? item.name : item.code }}</span>
-                <SvgIcon v-if="!item.isEnd" class="mr5 ml5" name="arrow-right" />
+                <SvgIcon v-if="!item.isEnd" class="mr-1 ml-1" name="arrow-right" />
             </span>
 
             <!-- 展示剩余的标签信息 -->
             <el-popover :show-after="300" v-if="paths.length > 1 && idx == 0" placement="bottom" width="500" trigger="hover">
                 <template #reference>
-                    <SvgIcon class="mt5 ml5" color="var(--el-color-primary)" name="MoreFilled" />
+                    <SvgIcon class="mt-1 ml-1" color="var(--el-color-primary)" name="MoreFilled" />
                 </template>
 
                 <el-row v-for="i in paths.slice(1)" :key="i">
@@ -22,10 +22,10 @@
                         <SvgIcon
                             :name="EnumValue.getEnumByValue(TagResourceTypeEnum, item.type)?.extra.icon"
                             :color="EnumValue.getEnumByValue(TagResourceTypeEnum, item.type)?.extra.iconColor"
-                            class="mr2"
+                            class="mr-0.5"
                         />
                         <span> {{ item.name ? item.name : item.code }}</span>
-                        <SvgIcon v-if="!item.isEnd" class="mr5 ml5" name="arrow-right" />
+                        <SvgIcon v-if="!item.isEnd" class="mr-1 ml-1" name="arrow-right" />
                     </span>
                 </el-row>
             </el-popover>
diff --git a/frontend/src/views/ops/component/TagTree.vue b/frontend/src/views/ops/component/TagTree.vue
index 0cd2ddd8..0db84309 100644
--- a/frontend/src/views/ops/component/TagTree.vue
+++ b/frontend/src/views/ops/component/TagTree.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="card pd5">
-        <el-input v-model="filterText" :placeholder="$t('tag.tagFilterPlaceholder')" clearable size="small" class="mb5 w100" />
+    <div class="card !p-1">
+        <el-input v-model="filterText" :placeholder="$t('tag.tagFilterPlaceholder')" clearable size="small" class="!mb-1 w-full" />
         <el-scrollbar class="tag-tree">
             <el-tree
                 ref="treeRef"
@@ -30,7 +30,7 @@
 
                         <slot v-else :node="node" :data="data" name="prefix"></slot>
 
-                        <span class="ml3" :title="data.labelRemark">
+                        <span class="ml-0.5" :title="data.labelRemark">
                             <slot name="label" :data="data" v-if="!data.disabled"> {{ $t(data.label) }}</slot>
                             <!-- 禁用状态 -->
                             <slot name="disabledLabel" :data="data" v-else>
@@ -242,7 +242,7 @@ defineExpose({
 
 <style lang="scss" scoped>
 .tag-tree {
-    height: calc(100vh - 148px);
+    height: calc(100vh - 143px);
 
     .el-tree {
         display: inline-block;
diff --git a/frontend/src/views/ops/component/TagTreeCheck.vue b/frontend/src/views/ops/component/TagTreeCheck.vue
index 81c4b255..83c91b1f 100755
--- a/frontend/src/views/ops/component/TagTreeCheck.vue
+++ b/frontend/src/views/ops/component/TagTreeCheck.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="w100 tag-tree-check">
+    <div class="!w-full tag-tree-check">
         <el-input v-model="filterTag" @input="onFilterValChanged" clearable :placeholder="$t('tag.keywordFilterPlaceholder')" size="small" />
-        <div class="mt3" style="border: 1px solid var(--el-border-color)">
+        <div class="mt-0.5" style="border: 1px solid var(--el-border-color)">
             <el-scrollbar :style="{ height: props.height }">
                 <el-tree
                     v-bind="$attrs"
@@ -30,7 +30,7 @@
                                 :color="EnumValue.getEnumByValue(TagResourceTypeEnum, data.type)?.extra.iconColor"
                             />
 
-                            <span class="font13 ml5">
+                            <span class="!text-[13px] ml-1">
                                 {{ data.name }}
                                 <span style="color: #3c8dbc">【</span>
                                 {{ data.code }}
diff --git a/frontend/src/views/ops/component/TagTreeResourceSelect.vue b/frontend/src/views/ops/component/TagTreeResourceSelect.vue
index 9bfc534e..7843729f 100644
--- a/frontend/src/views/ops/component/TagTreeResourceSelect.vue
+++ b/frontend/src/views/ops/component/TagTreeResourceSelect.vue
@@ -25,7 +25,7 @@
 
                 <slot v-else :node="node" :data="data" name="prefix"></slot>
 
-                <span class="ml3" :title="data.labelRemark">
+                <span class="ml-0.5" :title="data.labelRemark">
                     <slot name="label" :data="data"> {{ data.label }}</slot>
                 </span>
 
diff --git a/frontend/src/views/ops/component/TagTreeSelect.vue b/frontend/src/views/ops/component/TagTreeSelect.vue
index 5c446f8c..b73581d1 100644
--- a/frontend/src/views/ops/component/TagTreeSelect.vue
+++ b/frontend/src/views/ops/component/TagTreeSelect.vue
@@ -16,7 +16,7 @@
     >
         <template #default="{ data }">
             <span class="custom-tree-node">
-                <SvgIcon :name="EnumValue.getEnumByValue(TagResourceTypeEnum, data.type)?.extra.icon" class="mr2" />
+                <SvgIcon :name="EnumValue.getEnumByValue(TagResourceTypeEnum, data.type)?.extra.icon" class="mr-0.5" />
                 <span style="font-size: 13px">
                     {{ data.code }}
                     <span style="color: #3c8dbc">【</span>
diff --git a/frontend/src/views/ops/db/DbList.vue b/frontend/src/views/ops/db/DbList.vue
index ddf31608..0a0da9ef 100644
--- a/frontend/src/views/ops/db/DbList.vue
+++ b/frontend/src/views/ops/db/DbList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="db-list">
+    <div class="db-list h-full">
         <el-drawer
             :title="title"
             v-model="dialogVisible"
@@ -12,7 +12,7 @@
             <template #header>
                 <DrawerHeader :header="title" :back="cancel">
                     <template #extra>
-                        <div class="mr20">
+                        <div class="mr-4.5">
                             <span>{{ $props.instance?.tags?.[0]?.codePath }}</span>
                             <el-divider direction="vertical" border-style="dashed" />
                             <SvgIcon :name="getDbDialect($props.instance?.type).getInfo()?.icon" :size="20" />
diff --git a/frontend/src/views/ops/db/DbRestoreEdit.vue b/frontend/src/views/ops/db/DbRestoreEdit.vue
index 91d4ddaf..84fe8f06 100644
--- a/frontend/src/views/ops/db/DbRestoreEdit.vue
+++ b/frontend/src/views/ops/db/DbRestoreEdit.vue
@@ -16,7 +16,7 @@
                         placeholder="数据库名称"
                         filterable
                         clearable
-                        class="w100"
+                        class="!w-full"
                     >
                         <el-option v-for="item in props.dbNames" :key="item" :label="`${item}`" :value="item"> </el-option>
                     </el-select>
@@ -33,7 +33,7 @@
                         placeholder="数据库备份"
                         filterable
                         clearable
-                        class="w100"
+                        class="!w-full"
                     >
                         <el-option
                             v-for="item in state.histories"
diff --git a/frontend/src/views/ops/db/DbTransferEdit.vue b/frontend/src/views/ops/db/DbTransferEdit.vue
index 60bad60b..4ba9fd29 100644
--- a/frontend/src/views/ops/db/DbTransferEdit.vue
+++ b/frontend/src/views/ops/db/DbTransferEdit.vue
@@ -13,7 +13,7 @@
                 </el-form-item>
 
                 <el-form-item>
-                    <el-row class="w100">
+                    <el-row class="!w-full">
                         <el-col :span="12">
                             <el-form-item prop="status" :label="$t('common.status')">
                                 <el-switch
@@ -42,7 +42,7 @@
                     <CrontabInput v-model="form.cron" />
                 </el-form-item>
 
-                <el-form-item prop="srcDbId" :label="$t('db.srcDb')" class="w100" required>
+                <el-form-item prop="srcDbId" :label="$t('db.srcDb')" class="!w-full" required>
                     <db-select-tree
                         v-model:db-id="form.srcDbId"
                         v-model:inst-name="form.srcInstName"
@@ -61,7 +61,7 @@
                 </el-form-item>
 
                 <el-form-item v-if="form.mode === 2">
-                    <el-row class="w100">
+                    <el-row class="!w-full">
                         <el-col :span="12">
                             <el-form-item prop="targetFileDbType" :label="$t('db.dbFileType')" :required="form.mode === 2">
                                 <el-select v-model="form.targetFileDbType" clearable filterable>
@@ -100,7 +100,7 @@
                     </el-radio-group>
                 </el-form-item>
 
-                <el-form-item v-if="form.mode == 1" prop="targetDbId" :label="$t('db.targetDb')" class="w100" :required="form.mode === 1">
+                <el-form-item v-if="form.mode == 1" prop="targetDbId" :label="$t('db.targetDb')" class="!w-full" :required="form.mode === 1">
                     <db-select-tree
                         v-model:db-id="form.targetDbId"
                         v-model:inst-name="form.targetInstName"
@@ -123,10 +123,10 @@
                 <el-form-item>
                     <el-input v-model="state.filterSrcTableText" placeholder="filter table" size="small" />
                 </el-form-item>
-                <el-form-item class="w100">
+                <el-form-item class="!w-full">
                     <el-tree
                         ref="srcTreeRef"
-                        class="w100"
+                        class="!w-full"
                         style="max-height: 200px; overflow-y: auto"
                         default-expand-all
                         :expand-on-click-node="false"
diff --git a/frontend/src/views/ops/db/DbTransferList.vue b/frontend/src/views/ops/db/DbTransferList.vue
index 8ee7c944..f37dcd13 100644
--- a/frontend/src/views/ops/db/DbTransferList.vue
+++ b/frontend/src/views/ops/db/DbTransferList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="db-list">
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="dbApi.dbTransferTasks"
diff --git a/frontend/src/views/ops/db/InstanceList.vue b/frontend/src/views/ops/db/InstanceList.vue
index aebf1270..3d6fff79 100644
--- a/frontend/src/views/ops/db/InstanceList.vue
+++ b/frontend/src/views/ops/db/InstanceList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="db-list">
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="dbApi.instances"
diff --git a/frontend/src/views/ops/db/SqlExec.vue b/frontend/src/views/ops/db/SqlExec.vue
index ab26eaaa..347b0f01 100644
--- a/frontend/src/views/ops/db/SqlExec.vue
+++ b/frontend/src/views/ops/db/SqlExec.vue
@@ -54,7 +54,7 @@
             </template>
 
             <template #right>
-                <div class="card db-op pd5">
+                <div class="card db-op !p-1">
                     <el-row>
                         <el-col :span="24" v-if="state.db">
                             <el-descriptions :column="4" size="small" border>
@@ -145,7 +145,7 @@
                         </el-col>
                     </el-row>
 
-                    <div id="data-exec" class="mt5">
+                    <div id="data-exec" class="mt-1">
                         <el-tabs
                             v-if="state.tabs.size > 0"
                             type="card"
@@ -153,13 +153,13 @@
                             @tab-change="onTabChange"
                             style="width: 100%"
                             v-model="state.activeName"
-                            class="h100"
+                            class="!h-full"
                         >
-                            <el-tab-pane class="h100" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
+                            <el-tab-pane class="!h-full" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
                                 <template #label>
                                     <el-popover :show-after="1000" placement="bottom-start" trigger="hover" :width="250">
                                         <template #reference>
-                                            <span @contextmenu.prevent="onTabContextmenu(dt, $event)" class="font12">{{ dt.label }}</span>
+                                            <span @contextmenu.prevent="onTabContextmenu(dt, $event)" class="!text-[12px]">{{ dt.label }}</span>
                                         </template>
                                         <template #default>
                                             <el-descriptions :column="1" size="small">
diff --git a/frontend/src/views/ops/db/SyncTaskList.vue b/frontend/src/views/ops/db/SyncTaskList.vue
index bbb7c56a..d7607a2e 100644
--- a/frontend/src/views/ops/db/SyncTaskList.vue
+++ b/frontend/src/views/ops/db/SyncTaskList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="db-list">
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="dbApi.datasyncTasks"
diff --git a/frontend/src/views/ops/db/SyncTaskLog.vue b/frontend/src/views/ops/db/SyncTaskLog.vue
index 68a9c2be..168a7333 100644
--- a/frontend/src/views/ops/db/SyncTaskLog.vue
+++ b/frontend/src/views/ops/db/SyncTaskLog.vue
@@ -2,9 +2,9 @@
     <div class="sync-task-logs">
         <el-dialog v-model="dialogVisible" :before-close="cancel" :destroy-on-close="false" width="1120px">
             <template #header>
-                <span class="mr10">{{ $t('db.log') }}</span>
+                <span class="mr-2">{{ $t('db.log') }}</span>
                 <el-switch v-model="realTime" @change="watchPolling" inline-prompt :active-text="$t('db.realTime')" :inactive-text="$t('db.noRealTime')" />
-                <el-button @click="search" icon="Refresh" circle size="small" :loading="realTime" class="ml10"></el-button>
+                <el-button @click="search" icon="Refresh" circle size="small" :loading="realTime" class="ml-2"></el-button>
             </template>
             <page-table ref="logTableRef" :page-api="dbApi.datasyncLogs" v-model:query-form="query" :tool-button="false" :columns="columns" size="small">
             </page-table>
diff --git a/frontend/src/views/ops/db/component/sqleditor/DbSqlEditor.vue b/frontend/src/views/ops/db/component/sqleditor/DbSqlEditor.vue
index f01fcf34..5c1fac0c 100644
--- a/frontend/src/views/ops/db/component/sqleditor/DbSqlEditor.vue
+++ b/frontend/src/views/ops/db/component/sqleditor/DbSqlEditor.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
         <div>
-            <div class="card pd5 flex-justify-between">
+            <div class="card !p-1 flex items-center justify-between">
                 <div>
-                    <el-link @click="onRunSql()" :underline="false" class="ml15" icon="VideoPlay"> </el-link>
+                    <el-link @click="onRunSql()" :underline="false" class="ml-3.5" icon="VideoPlay"> </el-link>
                     <el-divider direction="vertical" border-style="dashed" />
 
                     <el-tooltip :show-after="1000" class="box-item" effect="dark" content="format sql" placement="top">
@@ -47,24 +47,30 @@
             style="height: calc(100vh - 233px)"
         >
             <Pane :size="state.editorSize" max-size="80">
-                <MonacoEditor ref="monacoEditorRef" class="mt5" v-model="state.sql" language="sql" height="100%" :id="'MonacoTextarea-' + getKey()" />
+                <MonacoEditor ref="monacoEditorRef" class="mt-1" v-model="state.sql" language="sql" height="100%" :id="'MonacoTextarea-' + getKey()" />
             </Pane>
 
             <Pane :size="100 - state.editorSize">
-                <div class="mt5 sql-exec-res h100">
-                    <el-tabs class="h100 w100" v-if="state.execResTabs.length > 0" @tab-remove="onRemoveTab" @tab-change="active" v-model="state.activeTab">
-                        <el-tab-pane class="h100" closable v-for="dt in state.execResTabs" :label="dt.id" :name="dt.id" :key="dt.id">
+                <div class="mt-1 sql-exec-res !h-full">
+                    <el-tabs
+                        class="!h-full !w-full"
+                        v-if="state.execResTabs.length > 0"
+                        @tab-remove="onRemoveTab"
+                        @tab-change="active"
+                        v-model="state.activeTab"
+                    >
+                        <el-tab-pane class="!h-full" closable v-for="dt in state.execResTabs" :label="dt.id" :name="dt.id" :key="dt.id">
                             <template #label>
                                 <el-popover :show-after="1000" placement="top-start" :title="$t('db.execInfo')" trigger="hover" :width="300">
                                     <template #reference>
                                         <div>
                                             <span>
                                                 <span v-if="dt.loading">
-                                                    <SvgIcon class="mb2 is-loading" name="Loading" color="var(--el-color-primary)" />
+                                                    <SvgIcon class="!mb-0.5 is-loading" name="Loading" color="var(--el-color-primary)" />
                                                 </span>
                                                 <span v-else>
-                                                    <SvgIcon class="mb2" v-if="!dt.errorMsg" name="CircleCheck" color="var(--el-color-success)" />
-                                                    <SvgIcon class="mb2" v-if="dt.errorMsg" name="CircleClose" color="var(--el-color-error)" />
+                                                    <SvgIcon class="!mb-0.5" v-if="!dt.errorMsg" name="CircleCheck" color="var(--el-color-success)" />
+                                                    <SvgIcon class="!mb-0.5" v-if="dt.errorMsg" name="CircleClose" color="var(--el-color-error)" />
                                                 </span>
                                             </span>
 
@@ -88,7 +94,7 @@
                             </template>
 
                             <el-row>
-                                <span v-if="dt.hasUpdatedFileds" class="mt5">
+                                <span v-if="dt.hasUpdatedFileds" class="mt-1">
                                     <span>
                                         <el-link type="success" :underline="false" @click="submitUpdateFields(dt)"
                                             ><span style="font-size: 12px">{{ $t('common.submit') }}</span></el-link
diff --git a/frontend/src/views/ops/db/component/sqleditor/SqlExecDialog.vue b/frontend/src/views/ops/db/component/sqleditor/SqlExecDialog.vue
index 8933cbfd..f4e17fa7 100644
--- a/frontend/src/views/ops/db/component/sqleditor/SqlExecDialog.vue
+++ b/frontend/src/views/ops/db/component/sqleditor/SqlExecDialog.vue
@@ -2,7 +2,7 @@
     <div>
         <el-dialog title="SQL" v-model="dialogVisible" :show-close="false" width="600px" :close-on-click-modal="false">
             <monaco-editor height="300px" class="codesql" language="sql" v-model="sqlValue" />
-            <el-input @keyup.enter="runSql" ref="remarkInputRef" v-model="remark" :placeholder="i18n.global.t('common.remark')" class="mt5" />
+            <el-input @keyup.enter="runSql" ref="remarkInputRef" v-model="remark" :placeholder="i18n.global.t('common.remark')" class="mt-1" />
 
             <template #footer>
                 <span class="dialog-footer">
diff --git a/frontend/src/views/ops/db/component/table/ColumnFormItem.vue b/frontend/src/views/ops/db/component/table/ColumnFormItem.vue
index 81bccbb9..08bdfde1 100644
--- a/frontend/src/views/ops/db/component/table/ColumnFormItem.vue
+++ b/frontend/src/views/ops/db/component/table/ColumnFormItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="string-input-container w100" v-if="dataType == DataType.String || dataType == DataType.Number">
+    <div class="string-input-container !w-full" v-if="dataType == DataType.String || dataType == DataType.Number">
         <el-input
             :ref="
                 (el: any) => {
@@ -10,7 +10,7 @@
             "
             :disabled="disabled"
             @blur="handleBlur"
-            :class="`w100 mb4 ${showEditorIcon ? 'string-input-container-show-icon' : ''}`"
+            :class="`!w-full !mb-1 ${showEditorIcon ? 'string-input-container-show-icon' : ''}`"
             size="small"
             v-model="itemValue"
             :placeholder="placeholder ?? $t('common.pleaseInput')"
@@ -30,7 +30,7 @@
         :disabled="disabled"
         @change="handleBlur"
         @blur="handleBlur"
-        class="edit-time-picker mb4"
+        class="edit-time-picker !mb-1"
         popper-class="edit-time-picker-popper"
         size="small"
         v-model="itemValue"
@@ -52,7 +52,7 @@
         :disabled="disabled"
         @change="handleBlur"
         @blur="handleBlur"
-        class="edit-time-picker mb4"
+        class="edit-time-picker !mb-1"
         popper-class="edit-time-picker-popper"
         size="small"
         v-model="itemValue"
@@ -74,7 +74,7 @@
         :disabled="disabled"
         @change="handleBlur"
         @blur="handleBlur"
-        class="edit-time-picker mb4"
+        class="edit-time-picker !mb-1"
         popper-class="edit-time-picker-popper"
         size="small"
         v-model="itemValue"
diff --git a/frontend/src/views/ops/db/component/table/DbTableData.vue b/frontend/src/views/ops/db/component/table/DbTableData.vue
index f2a60604..8ee6bca7 100644
--- a/frontend/src/views/ops/db/component/table/DbTableData.vue
+++ b/frontend/src/views/ops/db/component/table/DbTableData.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="db-table-data mt5" :style="{ height: tableHeight }">
+    <div class="db-table-data mt-1" :style="{ height: tableHeight }">
         <el-auto-resizer>
             <template #default="{ height, width }">
                 <el-table-v2
@@ -39,12 +39,12 @@
                                         <span v-if="column.dataTypeSubscript === 'icon-clock'">
                                             <SvgIcon :size="9" name="Clock" style="cursor: unset" />
                                         </span>
-                                        <span class="font8" v-else>{{ column.dataTypeSubscript }}</span>
+                                        <span class="!text-[8px]" v-else>{{ column.dataTypeSubscript }}</span>
                                     </div>
 
                                     <div v-if="showColumnTip">
                                         <div class="header-column-title">
-                                            <b :title="column.remark" class="el-text" style="cursor: pointer">
+                                            <b :title="column.remark" class="el-text cursor-pointer">
                                                 {{ column.title }}
                                             </b>
                                         </div>
@@ -53,7 +53,7 @@
                                         <span
                                             v-if="dbConfig.showColumnComment"
                                             style="color: var(--el-color-info-light-3)"
-                                            class="font10 el-text el-text--small is-truncated"
+                                            class="!text-[10px] el-text el-text--small is-truncated"
                                         >
                                             {{ column.columnComment }}
                                         </span>
@@ -95,7 +95,7 @@
                                     />
                                 </div>
 
-                                <div v-else :class="isUpdated(rowIndex, column.dataKey) ? 'update_field_active ml2 mr2' : 'ml2 mr2'">
+                                <div v-else :class="isUpdated(rowIndex, column.dataKey) ? 'update_field_active ml-0.5 mr-0.5' : 'ml-0.5 mr-0.5'">
                                     <span v-if="rowData[column.dataKey!] === null" style="color: var(--el-color-info-light-5)"> NULL </span>
 
                                     <span v-else :title="rowData[column.dataKey!]" class="el-text el-text--small is-truncated">
@@ -110,9 +110,9 @@
                         <div class="el-loading-mask" style="display: flex; flex-direction: column; align-items: center; justify-content: center">
                             <div>
                                 <SvgIcon class="is-loading" name="loading" color="var(--el-color-primary)" :size="28" />
-                                <el-text class="ml5" tag="b">{{ $t('db.execTime') }} - {{ state.execTime.toFixed(1) }}s</el-text>
+                                <el-text class="ml-1" tag="b">{{ $t('db.execTime') }} - {{ state.execTime.toFixed(1) }}s</el-text>
                             </div>
-                            <div v-if="loading && abortFn" class="mt10">
+                            <div v-if="loading && abortFn" class="!mt-2">
                                 <el-button @click="cancelLoading" type="info" size="small" plain>{{ $t('common.cancel') }}</el-button>
                             </div>
                         </div>
@@ -129,7 +129,7 @@
 
         <el-dialog @close="state.genTxtDialog.visible = false" v-model="state.genTxtDialog.visible" :title="state.genTxtDialog.title" width="1000px">
             <template #header>
-                <div class="mr15" style="display: flex; justify-content: flex-end">
+                <div class="mr-2" style="display: flex; justify-content: flex-end">
                     <el-button id="copyValue" @click="copyGenTxt(state.genTxtDialog.txt)" icon="CopyDocument" type="success" size="small">
                         {{ $t('db.oneClickCopy') }}
                     </el-button>
diff --git a/frontend/src/views/ops/db/component/table/DbTableDataForm.vue b/frontend/src/views/ops/db/component/table/DbTableDataForm.vue
index b189536a..ca4c51ad 100644
--- a/frontend/src/views/ops/db/component/table/DbTableDataForm.vue
+++ b/frontend/src/views/ops/db/component/table/DbTableDataForm.vue
@@ -4,12 +4,12 @@
             <el-form-item
                 v-for="column in columns"
                 :key="column.columnName"
-                class="w100 mb5"
+                class="mb-1 w-full"
                 :prop="column.columnName"
                 :required="props.tableName != '' && !column.nullable && !column.isPrimaryKey && !column.autoIncrement"
             >
                 <template #label>
-                    <span class="pointer" :title="column?.columnComment ? `${column.columnType} | ${column.columnComment}` : column.columnType">
+                    <span class="cursor-pointer" :title="column?.columnComment ? `${column.columnType} | ${column.columnComment}` : column.columnType">
                         {{ column.columnName }}
                     </span>
                 </template>
diff --git a/frontend/src/views/ops/db/component/table/DbTableDataOp.vue b/frontend/src/views/ops/db/component/table/DbTableDataOp.vue
index 9f409a70..c9be1c49 100644
--- a/frontend/src/views/ops/db/component/table/DbTableDataOp.vue
+++ b/frontend/src/views/ops/db/component/table/DbTableDataOp.vue
@@ -2,8 +2,8 @@
     <div>
         <el-row>
             <el-col :span="8">
-                <div class="mt5">
-                    <el-link :disabled="state.loading" @click="onRefresh()" icon="refresh" :underline="false" class="ml5"> </el-link>
+                <div class="mt-1">
+                    <el-link :disabled="state.loading" @click="onRefresh()" icon="refresh" :underline="false" class="ml-1"> </el-link>
                     <el-divider direction="vertical" border-style="dashed" />
 
                     <el-popover
@@ -51,11 +51,11 @@
                     <el-divider direction="vertical" border-style="dashed" />
 
                     <el-tooltip :show-after="500" v-if="hasUpdatedFileds" :content="$t('db.submitUpdate')" placement="top">
-                        <el-link @click="submitUpdateFields()" type="success" :underline="false" class="font12">{{ $t('common.submit') }}</el-link>
+                        <el-link @click="submitUpdateFields()" type="success" :underline="false" class="!text-[12px]">{{ $t('common.submit') }}</el-link>
                     </el-tooltip>
                     <el-divider v-if="hasUpdatedFileds" direction="vertical" border-style="dashed" />
                     <el-tooltip :show-after="500" v-if="hasUpdatedFileds" :content="$t('db.cancelUpdate')" placement="top">
-                        <el-link @click="cancelUpdateFields" type="warning" :underline="false" class="font12">{{ $t('common.cancel') }}</el-link>
+                        <el-link @click="cancelUpdateFields" type="warning" :underline="false" class="!text-[12px]">{{ $t('common.cancel') }}</el-link>
                     </el-tooltip>
                 </div>
             </el-col>
@@ -70,7 +70,7 @@
                     @clear="selectData"
                     size="small"
                     clearable
-                    class="w100"
+                    class="!w-full"
                     highlight-first-item
                     value-key="columnName"
                     ref="condInputRef"
@@ -110,7 +110,7 @@
                                         onConditionRowClick(event);
                                     }
                                 "
-                                style="cursor: pointer"
+                                class="cursor-pointer"
                             >
                                 <el-table-column property="columnName" :label="$t('db.columnName')" show-overflow-tooltip>
                                     <template #header>
@@ -147,12 +147,12 @@
             @data-delete="onRefresh"
         ></db-table-data>
 
-        <el-row type="flex" class="mt5" :gutter="10" justify="space-between" style="user-select: none">
+        <el-row type="flex" class="mt-2" :gutter="10" justify="space-between" style="user-select: none">
             <el-col :span="12">
                 <el-text
                     id="copyValue"
                     style="color: var(--el-color-info-light-3)"
-                    class="is-truncated font12 mt5"
+                    class="is-truncated !text-[12px] mt-1"
                     @click="copyToClipboard(sql)"
                     :title="sql"
                     >{{ sql }}</el-text
@@ -182,7 +182,7 @@
                     </div>
                     <el-link class="op-page" :underline="false" @click="++pageNum" :disabled="datas.length < pageSize" icon="Right" />
                     <el-link class="op-page" :underline="false" @click="handleEndPage" :disabled="datas.length < pageSize" icon="DArrowRight" />
-                    <div style="width: 90px" class="op-page ml10">
+                    <div style="width: 90px" class="op-page ml-2">
                         <el-select size="small" :default-first-option="true" v-model="pageSize" @change="handleSizeChange">
                             <el-option
                                 style="font-size: 12px; height: 24px; line-height: 24px"
@@ -194,7 +194,7 @@
                         </el-select>
                     </div>
 
-                    <el-button @click="handleCount" :loading="state.counting" class="ml10" text bg size="small">
+                    <el-button @click="handleCount" :loading="state.counting" class="ml-2" text bg size="small">
                         {{ state.showTotal ? `${state.total} ${$t('db.rows')}` : 'count' }}
                     </el-button>
                 </el-row>
diff --git a/frontend/src/views/ops/db/component/table/DbTablesOp.vue b/frontend/src/views/ops/db/component/table/DbTablesOp.vue
index 0eb5014c..5241bfea 100644
--- a/frontend/src/views/ops/db/component/table/DbTablesOp.vue
+++ b/frontend/src/views/ops/db/component/table/DbTablesOp.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="db-table">
-        <el-row class="mb5">
+        <el-row class="mb-1">
             <el-popover v-model:visible="state.dumpInfo.visible" trigger="click" :width="470" placement="right">
                 <template #reference>
-                    <el-button :disabled="state.dumpInfo.tables?.length == 0" class="ml5" type="success" size="small">{{ $t('db.dump') }}</el-button>
+                    <el-button :disabled="state.dumpInfo.tables?.length == 0" class="ml-1" type="success" size="small">{{ $t('db.dump') }}</el-button>
                 </template>
                 <el-form-item :label="$t('db.exportContent')">
                     <el-radio-group v-model="dumpInfo.type">
@@ -73,11 +73,11 @@
             <el-table-column :label="$t('common.more')" min-width="160">
                 <template #default="scope">
                     <el-link @click.prevent="showColumns(scope.row)" type="primary">{{ $t('db.column') }}</el-link>
-                    <el-link class="ml5" @click.prevent="showTableIndex(scope.row)" type="success">{{ $t('db.index') }}</el-link>
-                    <el-link class="ml5" v-if="editDbTypes.indexOf(dbType) > -1" @click.prevent="openEditTable(scope.row)" type="warning">
+                    <el-link class="ml-1" @click.prevent="showTableIndex(scope.row)" type="success">{{ $t('db.index') }}</el-link>
+                    <el-link class="ml-1" v-if="editDbTypes.indexOf(dbType) > -1" @click.prevent="openEditTable(scope.row)" type="warning">
                         {{ $t('db.editTable') }}
                     </el-link>
-                    <el-link class="ml5" @click.prevent="showCreateDdl(scope.row)" type="info">DDL</el-link>
+                    <el-link class="ml-1" @click.prevent="showCreateDdl(scope.row)" type="info">DDL</el-link>
                 </template>
             </el-table-column>
             <el-table-column :label="$t('common.operation')" min-width="80">
diff --git a/frontend/src/views/ops/machine/MachineList.vue b/frontend/src/views/ops/machine/MachineList.vue
index e4780ff2..21fd4968 100644
--- a/frontend/src/views/ops/machine/MachineList.vue
+++ b/frontend/src/views/ops/machine/MachineList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="machine-list">
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="machineApi.list"
@@ -29,7 +29,7 @@
                 <span v-if="!data.stat">-</span>
                 <div v-else>
                     <el-row>
-                        <el-text size="small" class="font11">
+                        <el-text size="small" class="!text-[11px]">
                             {{ $t('machine.memberInfo') }}:
                             <span :class="getStatsFontClass(data.stat.memAvailable, data.stat.memTotal)"
                                 >{{ formatByteSize(data.stat.memAvailable, 1) }}/{{ formatByteSize(data.stat.memTotal, 1) }}
@@ -37,7 +37,7 @@
                         </el-text>
                     </el-row>
                     <el-row>
-                        <el-text class="font11" size="small">
+                        <el-text class="!text-[11px]" size="small">
                             {{ $t('machine.cpuInfo') }}: <span :class="getStatsFontClass(data.stat.cpuIdle, 100)">{{ data.stat.cpuIdle.toFixed(0) }}%</span>
                         </el-text>
                     </el-row>
@@ -48,18 +48,18 @@
                 <span v-if="!data.stat?.fsInfos">-</span>
                 <div v-else>
                     <el-row v-for="(i, idx) in data.stat.fsInfos.slice(0, 2)" :key="i.mountPoint">
-                        <el-text class="font11" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
+                        <el-text class="!text-[11px]" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
                             {{ i.mountPoint }} => {{ formatByteSize(i.free, 0) }}/{{ formatByteSize(i.used + i.free, 0) }}
                         </el-text>
 
                         <!-- 展示剩余的磁盘信息 -->
                         <el-popover :show-after="300" v-if="data.stat.fsInfos.length > 2 && idx == 1" placement="top-start" width="230" trigger="hover">
                             <template #reference>
-                                <SvgIcon class="mt5 ml5" color="var(--el-color-primary)" name="MoreFilled" />
+                                <SvgIcon class="mt-1 ml-1" color="var(--el-color-primary)" name="MoreFilled" />
                             </template>
 
                             <el-row v-for="i in data.stat.fsInfos.slice(2)" :key="i.mountPoint">
-                                <el-text class="font11" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
+                                <el-text class="!text-[11px]" size="small" :class="getStatsFontClass(i.free, i.used + i.free)">
                                     {{ i.mountPoint }} => {{ formatByteSize(i.free, 0) }}/{{ formatByteSize(i.used + i.free, 0) }}
                                 </el-text>
                             </el-row>
diff --git a/frontend/src/views/ops/machine/MachineOp.vue b/frontend/src/views/ops/machine/MachineOp.vue
index b4daa474..ca11164e 100644
--- a/frontend/src/views/ops/machine/MachineOp.vue
+++ b/frontend/src/views/ops/machine/MachineOp.vue
@@ -32,14 +32,21 @@
             </template>
 
             <template #right>
-                <div class="machine-terminal-tabs card pd5">
-                    <el-tabs v-if="state.tabs.size > 0" type="card" @tab-remove="onRemoveTab" style="width: 100%" v-model="state.activeTermName" class="h100">
-                        <el-tab-pane class="h100" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
+                <div class="machine-terminal-tabs card !p-1">
+                    <el-tabs
+                        v-if="state.tabs.size > 0"
+                        type="card"
+                        @tab-remove="onRemoveTab"
+                        style="width: 100%"
+                        v-model="state.activeTermName"
+                        class="!h-full"
+                    >
+                        <el-tab-pane class="!h-full" closable v-for="dt in state.tabs.values()" :label="dt.label" :name="dt.key" :key="dt.key">
                             <template #label>
                                 <el-popconfirm @confirm="handleReconnect(dt, true)" :title="$t('machine.reConnTips')">
                                     <template #reference>
                                         <el-icon
-                                            class="mr5"
+                                            class="mr-1"
                                             :color="EnumValue.getEnumByValue(TerminalStatusEnum, dt.status)?.extra?.iconColor"
                                             :title="dt.status == TerminalStatusEnum.Connected.value ? '' : $t('machine.clickReConn')"
                                             ><Connection />
diff --git a/frontend/src/views/ops/machine/ProcessList.vue b/frontend/src/views/ops/machine/ProcessList.vue
index 2b53a785..87a6415f 100644
--- a/frontend/src/views/ops/machine/ProcessList.vue
+++ b/frontend/src/views/ops/machine/ProcessList.vue
@@ -1,19 +1,19 @@
 <template>
     <div class="file-manage">
         <el-dialog :title="$t('machine.process')" v-model="dialogVisible" :destroy-on-close="true" :show-close="true" :before-close="handleClose" width="65%">
-            <div class="card pd5">
+            <div class="card !p-1">
                 <el-row>
                     <el-col :span="4">
                         <el-input size="small" :placeholder="$t('machine.processName')" v-model="params.name" plain clearable></el-input>
                     </el-col>
-                    <el-col :span="4" class="ml5">
-                        <el-select class="w100" @change="getProcess" size="small" v-model="params.sortType" :placeholder="$t('machine.selectSortType')">
+                    <el-col :span="4" class="ml-1">
+                        <el-select class="!w-full" @change="getProcess" size="small" v-model="params.sortType" :placeholder="$t('machine.selectSortType')">
                             <el-option key="cpu" :label="$t('machine.cpuDesc')" value="1"> </el-option>
                             <el-option key="cpu" :label="$t('machine.memDesc')" value="2"> </el-option>
                         </el-select>
                     </el-col>
-                    <el-col :span="4" class="ml5">
-                        <el-select class="w100" @change="getProcess" size="small" v-model="params.count" :placeholder="$t('machine.selectProcessNum')">
+                    <el-col :span="4" class="ml-1">
+                        <el-select class="!w-full" @change="getProcess" size="small" v-model="params.count" :placeholder="$t('machine.selectProcessNum')">
                             <el-option key="10" label="10" value="10"> </el-option>
                             <el-option key="15" label="15" value="15"> </el-option>
                             <el-option key="20" label="20" value="20"> </el-option>
@@ -21,7 +21,7 @@
                         </el-select>
                     </el-col>
                     <el-col :span="6">
-                        <el-button class="ml5" @click="getProcess" type="primary" icon="refresh" size="small" plain>{{ $t('common.refresh') }}</el-button>
+                        <el-button class="ml-1" @click="getProcess" type="primary" icon="refresh" size="small" plain>{{ $t('common.refresh') }}</el-button>
                     </el-col>
                 </el-row>
             </div>
diff --git a/frontend/src/views/ops/machine/ScriptEdit.vue b/frontend/src/views/ops/machine/ScriptEdit.vue
index b52c63ab..97adac3c 100644
--- a/frontend/src/views/ops/machine/ScriptEdit.vue
+++ b/frontend/src/views/ops/machine/ScriptEdit.vue
@@ -22,7 +22,7 @@
                     <EnumSelect :enums="ScriptResultEnum" v-model="form.type" default-first-option />
                 </el-form-item>
 
-                <el-form-item class="w100">
+                <el-form-item class="!w-full">
                     <template #label>
                         <el-tooltip placement="top">
                             <template #content>
diff --git a/frontend/src/views/ops/machine/cronjob/CronJobList.vue b/frontend/src/views/ops/machine/cronjob/CronJobList.vue
index f4b456d4..c2bf094a 100644
--- a/frontend/src/views/ops/machine/cronjob/CronJobList.vue
+++ b/frontend/src/views/ops/machine/cronjob/CronJobList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="cronJobApi.list"
diff --git a/frontend/src/views/ops/machine/file/FileConfList.vue b/frontend/src/views/ops/machine/file/FileConfList.vue
index a4148949..1f601c95 100755
--- a/frontend/src/views/ops/machine/file/FileConfList.vue
+++ b/frontend/src/views/ops/machine/file/FileConfList.vue
@@ -5,7 +5,7 @@
                 <el-table-column prop="name" :label="$t('common.name')" min-width="100px">
                     <template #header>
                         <el-button class="ml0" type="primary" circle size="small" icon="Plus" @click="add()"> </el-button>
-                        <span class="ml10">{{ $t('common.name') }}</span>
+                        <span class="ml-2">{{ $t('common.name') }}</span>
                     </template>
                     <template #default="scope">
                         <el-input v-model="scope.row.name" :disabled="scope.row.id != null" clearable> </el-input>
diff --git a/frontend/src/views/ops/machine/file/MachineFile.vue b/frontend/src/views/ops/machine/file/MachineFile.vue
index 6fa279a1..eae4dd77 100755
--- a/frontend/src/views/ops/machine/file/MachineFile.vue
+++ b/frontend/src/views/ops/machine/file/MachineFile.vue
@@ -3,7 +3,7 @@
         <div>
             <el-progress v-if="uploadProgressShow" style="width: 90%; margin-left: 20px" :text-inside="true" :stroke-width="20" :percentage="progressNum" />
 
-            <el-row class="mb10">
+            <el-row class="mb-2">
                 <el-breadcrumb separator-icon="ArrowRight">
                     <el-breadcrumb-item v-for="path in filePathNav" :key="path">
                         <el-link @click="setFiles(path.path)" style="font-weight: bold">{{ path.name }}</el-link>
@@ -27,14 +27,14 @@
                         <div class="machine-file-table-header">
                             <div>
                                 <el-button :disabled="nowPath == basePath" type="primary" circle size="small" icon="Back" @click="back()"> </el-button>
-                                <el-button class="ml5" type="primary" circle size="small" icon="Refresh" @click="refresh()"> </el-button>
+                                <el-button class="!ml-1" type="primary" circle size="small" icon="Refresh" @click="refresh()"> </el-button>
 
                                 <!-- 文件&文件夹上传 -->
                                 <el-dropdown class="machine-file-upload-exec" trigger="click" size="small">
                                     <span>
                                         <el-button
                                             v-auth="'machine:file:upload'"
-                                            class="ml5"
+                                            class="!ml-1"
                                             type="primary"
                                             circle
                                             size="small"
@@ -81,7 +81,7 @@
                                     :disabled="state.selectionFiles.length == 0"
                                     v-auth="'machine:file:rm'"
                                     @click="copyFile(state.selectionFiles)"
-                                    class="ml5"
+                                    class="!ml-1"
                                     type="primary"
                                     circle
                                     size="small"
@@ -94,7 +94,7 @@
                                     :disabled="state.selectionFiles.length == 0"
                                     v-auth="'machine:file:rm'"
                                     @click="mvFile(state.selectionFiles)"
-                                    class="ml5"
+                                    class="!ml-1"
                                     type="primary"
                                     circle
                                     size="small"
@@ -106,7 +106,7 @@
                                 <el-button
                                     v-auth="'machine:file:write'"
                                     @click="showCreateFileDialog()"
-                                    class="ml5"
+                                    class="!ml-1"
                                     type="primary"
                                     circle
                                     size="small"
@@ -119,7 +119,7 @@
                                     :disabled="state.selectionFiles.length == 0"
                                     v-auth="'machine:file:rm'"
                                     @click="deleteFile(state.selectionFiles)"
-                                    class="ml5"
+                                    class="!ml-1"
                                     type="danger"
                                     circle
                                     size="small"
@@ -128,7 +128,7 @@
                                 >
                                 </el-button>
 
-                                <el-button-group v-if="state.copyOrMvFile.paths.length > 0" size="small" class="ml5">
+                                <el-button-group v-if="state.copyOrMvFile.paths.length > 0" size="small" class="!ml-1">
                                     <el-tooltip effect="customized" raw-content placement="top">
                                         <template #content>
                                             <div v-for="path in state.copyOrMvFile.paths" v-bind:key="path">{{ path }}</div>
@@ -158,7 +158,7 @@
                             <SvgIcon :size="15" :name="scope.row.icon" />
                         </span>
 
-                        <span class="ml5" style="display: inline-block; width: 90%">
+                        <span class="!ml-1" style="display: inline-block; width: 90%">
                             <div v-if="scope.row.nameEdit">
                                 <el-input
                                     @keyup.enter="fileRename(scope.row)"
@@ -204,7 +204,7 @@
                     <template #header>
                         <el-popover placement="top" :width="270" trigger="hover">
                             <template #reference>
-                                <SvgIcon name="QuestionFilled" :size="18" class="pointer-icon mr10" />
+                                <SvgIcon name="QuestionFilled" :size="18" class="pointer-icon mr-2" />
                             </template>
                             <div>{{ $t('machine.renameTips') }}</div>
                         </el-popover>
@@ -228,7 +228,7 @@
                             type="primary"
                             icon="download"
                             :underline="false"
-                            class="ml10"
+                            class="ml-2"
                             :title="$t('machine.download')"
                         ></el-link>
 
@@ -246,7 +246,7 @@
                                         icon="InfoFilled"
                                         :underline="false"
                                         link
-                                        class="ml10"
+                                        class="ml-2"
                                         :loading="scope.row.loadingStat"
                                     ></el-link>
                                 </span>
diff --git a/frontend/src/views/ops/machine/security/CmdConfList.vue b/frontend/src/views/ops/machine/security/CmdConfList.vue
index 977e6017..892def1b 100644
--- a/frontend/src/views/ops/machine/security/CmdConfList.vue
+++ b/frontend/src/views/ops/machine/security/CmdConfList.vue
@@ -4,7 +4,7 @@
             <el-table-column prop="name" :label="$t('common.name')" show-overflow-tooltip min-width="100px"> </el-table-column>
             <el-table-column prop="cmds" :label="$t('machine.filterCmds')" min-width="320px" show-overflow-tooltip>
                 <template #default="scope">
-                    <el-tag class="ml2 mt2" v-for="cmd in scope.row.cmds" :key="cmd" type="danger">
+                    <el-tag class="ml-0.5 mt-0.5" v-for="cmd in scope.row.cmds" :key="cmd" type="danger">
                         {{ cmd }}
                     </el-tag>
                 </template>
@@ -20,7 +20,7 @@
             <el-table-column :label="$t('common.operation')" min-width="120px">
                 <template #header>
                     <el-text tag="b">{{ $t('common.operation') }}</el-text>
-                    <el-button v-auth="'cmdconf:save'" class="ml5" type="primary" circle size="small" icon="Plus" @click="openFormDialog(false)"> </el-button>
+                    <el-button v-auth="'cmdconf:save'" class="ml-1" type="primary" circle size="small" icon="Plus" @click="openFormDialog(false)"> </el-button>
                 </template>
                 <template #default="scope">
                     <el-button v-auth="'cmdconf:save'" @click="openFormDialog(scope.row)" type="primary" link>{{ $t('common.edit') }}</el-button>
@@ -49,7 +49,7 @@
                 <el-form-item prop="cmds" :label="$t('machine.filterCmds')" required>
                     <el-row>
                         <el-tag
-                            class="ml2 mt2"
+                            class="ml-0.5 mt-0.5"
                             v-for="tag in form.cmds"
                             :key="tag"
                             closable
@@ -63,13 +63,13 @@
                             v-if="state.inputCmdVisible"
                             ref="cmdInputRef"
                             v-model="state.cmdInputValue"
-                            class="mt3"
+                            class="mt-0.5"
                             size="small"
                             @keyup.enter="handleCmdInputConfirm"
                             @blur="handleCmdInputConfirm"
                             :placeholder="$t('machine.cmdPlaceholder')"
                         />
-                        <el-button v-else class="ml2 mt2" size="small" @click="showCmdInput"> + {{ $t('machine.newCmd') }} </el-button>
+                        <el-button v-else class="ml-0.5 mt-0.5" size="small" @click="showCmdInput"> + {{ $t('machine.newCmd') }} </el-button>
                     </el-row>
                 </el-form-item>
 
diff --git a/frontend/src/views/ops/machine/security/SecurityConfList.vue b/frontend/src/views/ops/machine/security/SecurityConfList.vue
index a0d5b255..dc2ba19e 100644
--- a/frontend/src/views/ops/machine/security/SecurityConfList.vue
+++ b/frontend/src/views/ops/machine/security/SecurityConfList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="card">
+    <div class="card h-full">
         <el-tabs v-model="activeName" @tab-change="handleTabChange">
             <el-tab-pane :label="$t('machine.cmdConfig')" :name="CmdConfTab">
                 <CmdConfList />
diff --git a/frontend/src/views/ops/mongo/MongoDataOp.vue b/frontend/src/views/ops/mongo/MongoDataOp.vue
index c3d397f8..cf0bebd6 100644
--- a/frontend/src/views/ops/mongo/MongoDataOp.vue
+++ b/frontend/src/views/ops/mongo/MongoDataOp.vue
@@ -43,9 +43,9 @@
             </template>
 
             <template #right>
-                <div class="mongo-data-tab card pd5 w100">
+                <div class="mongo-data-tab card !p-1 !w-full">
                     <el-row v-if="nowColl">
-                        <el-descriptions class="w100" :column="10" size="small" border>
+                        <el-descriptions class="!w-full" :column="10" size="small" border>
                             <!-- <el-descriptions-item label-align="right" label="tag">xxx</el-descriptions-item> -->
 
                             <el-descriptions-item label="ns" label-align="right">
@@ -73,11 +73,11 @@
                     </el-row>
 
                     <el-row type="flex">
-                        <el-tabs @tab-remove="removeDataTab" class="w100 ml5" v-model="state.activeName">
+                        <el-tabs @tab-remove="removeDataTab" class="!w-full ml-1" v-model="state.activeName">
                             <el-tab-pane closable v-for="dt in state.dataTabs" :key="dt.key" :label="dt.label" :name="dt.key">
                                 <el-row>
                                     <el-col :span="2">
-                                        <div class="mt5">
+                                        <div class="mt-1">
                                             <el-link @click="findCommand(state.activeName)" icon="refresh" :underline="false" class=""> </el-link>
                                             <el-divider direction="vertical" border-style="dashed" />
                                             <el-link v-auth="perms.saveData" @click="onEditDoc(null)" type="primary" icon="plus" :underline="false"> </el-link>
@@ -99,7 +99,7 @@
                                         <el-col :span="6" v-for="item in dt.datas" :key="item">
                                             <el-card :body-style="{ padding: '0px', position: 'relative' }">
                                                 <el-input type="textarea" v-model="item.value" :rows="10" />
-                                                <div style="padding: 3px; float: right" class="mr5 mongo-doc-btns">
+                                                <div style="padding: 3px; float: right" class="mr-1 mongo-doc-btns">
                                                     <div>
                                                         <el-link @click="onEditDoc(item)" :underline="false" type="success" icon="MagicStick"></el-link>
 
diff --git a/frontend/src/views/ops/mongo/MongoDbs.vue b/frontend/src/views/ops/mongo/MongoDbs.vue
index a926b343..2c67c0de 100644
--- a/frontend/src/views/ops/mongo/MongoDbs.vue
+++ b/frontend/src/views/ops/mongo/MongoDbs.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <el-dialog width="800px" :title="$t('mongo.dbList')" :before-close="close" v-model="databaseDialog.visible">
-            <div class="mb5">
+            <div class="mb-1">
                 <el-button @click="showCreateDbDialog" type="primary" icon="plus" size="small">{{ $t('common.create') }}</el-button>
             </div>
             <el-table :data="databaseDialog.data" :max-height="500">
@@ -70,7 +70,7 @@
         </el-dialog>
 
         <el-dialog width="600px" :title="collectionsDialog.title" v-model="collectionsDialog.visible">
-            <div class="mb5">
+            <div class="mb-1">
                 <el-button @click="showCreateCollectionDialog" type="primary" icon="plus" size="small">{{ $t('common.create') }}</el-button>
             </div>
             <el-table stripe :data="collectionsDialog.data" :max-height="500">
diff --git a/frontend/src/views/ops/mongo/MongoList.vue b/frontend/src/views/ops/mongo/MongoList.vue
index 0fd8e85a..858987a2 100644
--- a/frontend/src/views/ops/mongo/MongoList.vue
+++ b/frontend/src/views/ops/mongo/MongoList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="mongoApi.mongoList"
diff --git a/frontend/src/views/ops/mongo/MongoRunCommand.vue b/frontend/src/views/ops/mongo/MongoRunCommand.vue
index 9553fa3a..79914556 100644
--- a/frontend/src/views/ops/mongo/MongoRunCommand.vue
+++ b/frontend/src/views/ops/mongo/MongoRunCommand.vue
@@ -2,11 +2,11 @@
     <div>
         <el-dialog width="750px" title="runCommand" v-model="runCmdDialog.visible" :before-close="close" :destroy-on-close="true">
             <el-form label-width="auto">
-                <el-row class="mb10">
+                <el-row class="mb-2">
                     <el-col :span="12">
                         <el-form-item :label="$t('mongo.template')">
                             <el-select
-                                class="w100"
+                                class="!w-full"
                                 @change="changeCmd"
                                 filterable
                                 v-model="runCmdDialog.cmdName"
@@ -24,11 +24,11 @@
                         </el-form-item>
                     </el-col>
                     <el-col :span="4">
-                        <el-form-item class="ml10">
+                        <el-form-item class="ml-2">
                             <el-button @click="onRunCommand" type="primary">Run</el-button>
                             <el-tooltip effect="dark" placement="top">
                                 <template #content> {{ $t('mongo.moreCmdTips') }}-> https://www.mongodb.com/docs/manual/reference/command/ </template>
-                                <span class="ml10">
+                                <span class="ml-2">
                                     <el-icon><InfoFilled /></el-icon>
                                 </span>
                             </el-tooltip>
diff --git a/frontend/src/views/ops/redis/DataOperation.vue b/frontend/src/views/ops/redis/DataOperation.vue
index 82e3b531..7db51d03 100644
--- a/frontend/src/views/ops/redis/DataOperation.vue
+++ b/frontend/src/views/ops/redis/DataOperation.vue
@@ -45,7 +45,7 @@
             <template #right>
                 <Splitpanes class="default-theme">
                     <Pane size="35" max-size="50">
-                        <div class="key-list-vtree card pd5">
+                        <div class="key-list-vtree card !p-1">
                             <el-scrollbar>
                                 <el-row :gutter="5">
                                     <el-col :span="2">
@@ -73,7 +73,7 @@
                                     </el-col>
                                 </el-row>
 
-                                <el-row :gutter="5" class="mb5 mt5">
+                                <el-row :gutter="5" class="mb-1 mt-1">
                                     <el-col :span="19">
                                         <el-button :disabled="!scanParam.id || !scanParam.db" @click="scan(true)" type="success" icon="more" size="small" plain>
                                             {{ $t('redis.loadMore') }}
@@ -87,7 +87,7 @@
                                             icon="plus"
                                             size="small"
                                             plain
-                                            class="ml5"
+                                            class="!ml-0.5"
                                         >
                                             {{ $t('redis.addKey') }}
                                         </el-button>
@@ -100,13 +100,13 @@
                                             v-auth="'redis:data:del'"
                                             size="small"
                                             icon="delete"
-                                            class="ml5"
+                                            class="!ml-0.5"
                                         >
                                             flush
                                         </el-button>
                                     </el-col>
                                     <el-col :span="5">
-                                        <span class="mt5" style="display: inline-block">keys:{{ state.dbsize }}</span>
+                                        <span class="mt-1" style="display: inline-block">keys:{{ state.dbsize }}</span>
                                     </el-col>
                                 </el-row>
 
@@ -129,11 +129,11 @@
                                             <span v-if="data.type == 1">
                                                 <SvgIcon :size="15" :name="node.expanded ? 'folder-opened' : 'folder'" />
                                             </span>
-                                            <span :class="'ml5 ' + (data.type == 1 ? 'folder-label' : 'key-label')">
+                                            <span :class="'ml-1 ' + (data.type == 1 ? 'folder-label' : 'key-label')">
                                                 {{ node.label }}
                                             </span>
 
-                                            <span v-if="!node.isLeaf" class="ml5" style="font-weight: bold"> ({{ data.keyCount }}) </span>
+                                            <span v-if="!node.isLeaf" class="ml-1" style="font-weight: bold"> ({{ data.keyCount }}) </span>
                                         </span>
                                     </template>
                                 </el-tree>
@@ -144,7 +144,7 @@
                     </Pane>
 
                     <Pane>
-                        <div class="key-detail card pd5">
+                        <div class="key-detail card !p-1">
                             <el-tabs @tab-remove="removeDataTab" v-model="state.activeName">
                                 <el-tab-pane closable v-for="dt in state.dataTabs" :key="dt.key" :label="dt.label" :name="dt.key">
                                     <key-detail :redis="redisInst" :key-info="dt.keyInfo" @change-key="searchKey()" @del-key="delKey" />
diff --git a/frontend/src/views/ops/redis/FormatViewer.vue b/frontend/src/views/ops/redis/FormatViewer.vue
index a3916887..fe742412 100644
--- a/frontend/src/views/ops/redis/FormatViewer.vue
+++ b/frontend/src/views/ops/redis/FormatViewer.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="format-viewer-container">
-        <div class="mb5 fr">
+        <div class="mb-1 float-right">
             <el-select v-model="selectedView" class="format-selector" size="small" placeholder="Text">
                 <template #prefix>
                     <SvgIcon name="view" />
                 </template>
                 <el-option v-for="item of Object.keys(viewers)" :key="item" :label="item" :value="item"> </el-option>
             </el-select>
-            <el-tag type="primary" :disable-transitions="true" class="ml10">Size: {{ formatByteSize(state.contentSize) }}</el-tag>
+            <el-tag type="primary" :disable-transitions="true" class="ml-2">Size: {{ formatByteSize(state.contentSize) }}</el-tag>
         </div>
 
         <component ref="viewerRef" :is="components[viewerComponent]" :content="state.content" :name="selectedView"> </component>
diff --git a/frontend/src/views/ops/redis/KeyHeader.vue b/frontend/src/views/ops/redis/KeyHeader.vue
index d2f3c8ad..68d61822 100644
--- a/frontend/src/views/ops/redis/KeyHeader.vue
+++ b/frontend/src/views/ops/redis/KeyHeader.vue
@@ -24,8 +24,8 @@
                     <!-- 时间转换 -->
                     <el-tooltip effect="dark" placement="top">
                         <template #content>{{ ttlConveter(ki.timed) }}</template>
-                        <span class="ml10">
-                            <el-icon class="mr5"><InfoFilled /></el-icon>
+                        <span class="ml-2">
+                            <el-icon class="mr-1"><InfoFilled /></el-icon>
                         </span>
                     </el-tooltip>
 
diff --git a/frontend/src/views/ops/redis/KeyValueHash.vue b/frontend/src/views/ops/redis/KeyValueHash.vue
index c8964ae7..8f3c9596 100644
--- a/frontend/src/views/ops/redis/KeyValueHash.vue
+++ b/frontend/src/views/ops/redis/KeyValueHash.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-button @click="showEditDialog(null)" icon="plus" size="small" plain type="primary" class="mb10">{{ $t('redis.addNewLine') }}</el-button>
+        <el-button @click="showEditDialog(null)" icon="plus" size="small" plain type="primary" class="mb-2">{{ $t('redis.addNewLine') }}</el-button>
         <el-table size="small" border :data="hashValues" height="500" min-height="300" stripe>
             <el-table-column type="index" :label="'ID (Total: ' + total + ')'" sortable width="100"> </el-table-column>
             <el-table-column resizable sortable prop="field" label="field" show-overflow-tooltip min-width="100"> </el-table-column>
@@ -20,7 +20,7 @@
                     <el-link @click="showEditDialog(scope.row)" :underline="false" type="primary" icon="edit" plain></el-link>
                     <el-popconfirm :title="$t('redis.deleteConfirm')" @confirm="hdel(scope.row.field, scope.$index)">
                         <template #reference>
-                            <el-link v-auth="'redis:data:del'" :underline="false" type="danger" icon="delete" size="small" plain class="ml5"></el-link>
+                            <el-link v-auth="'redis:data:del'" :underline="false" type="danger" icon="delete" size="small" plain class="ml-1"></el-link>
                         </template>
                     </el-popconfirm>
                 </template>
@@ -37,7 +37,7 @@
                     <el-input v-model="editDialog.field" placeholder="field" />
                 </el-form-item>
                 <el-form-item>
-                    <format-viewer class="w100" ref="formatViewerRef" :content="editDialog.value"></format-viewer>
+                    <format-viewer class="!w-full" ref="formatViewerRef" :content="editDialog.value"></format-viewer>
                 </el-form-item>
             </el-form>
 
diff --git a/frontend/src/views/ops/redis/KeyValueList.vue b/frontend/src/views/ops/redis/KeyValueList.vue
index 503bb7ba..9b720bc0 100644
--- a/frontend/src/views/ops/redis/KeyValueList.vue
+++ b/frontend/src/views/ops/redis/KeyValueList.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-button @click="showEditDialog(null, -1)" icon="plus" size="small" plain type="primary" class="mb10">{{ $t('redis.addNewLine') }}</el-button>
+        <el-button @click="showEditDialog(null, -1)" icon="plus" size="small" plain type="primary" class="mb-2">{{ $t('redis.addNewLine') }}</el-button>
         <el-table size="small" border :data="values" height="450" min-height="300" stripe>
             <el-table-column type="index" :label="'ID (Total: ' + total + ')'" sortable width="100"> </el-table-column>
             <el-table-column resizable sortable prop="value" label="value" show-overflow-tooltip min-width="200"> </el-table-column>
@@ -9,7 +9,7 @@
                     <el-link @click="showEditDialog(scope.row, scope.$index)" :underline="false" type="primary" icon="edit" plain></el-link>
                     <el-popconfirm :title="$t('redis.deleteConfirm')" @confirm="lrem(scope.row, scope.$index)">
                         <template #reference>
-                            <el-link v-auth="'redis:data:del'" :underline="false" type="danger" icon="delete" size="small" plain class="ml5"></el-link>
+                            <el-link v-auth="'redis:data:del'" :underline="false" type="danger" icon="delete" size="small" plain class="ml-1"></el-link>
                         </template>
                     </el-popconfirm>
                 </template>
@@ -23,7 +23,7 @@
         <el-dialog :title="$t('redis.addNewLine')" v-model="editDialog.visible" width="600px" :destroy-on-close="true" :close-on-click-modal="false">
             <el-form>
                 <el-form-item>
-                    <format-viewer class="w100" ref="formatViewerRef" :content="editDialog.content"></format-viewer>
+                    <format-viewer class="!w-full" ref="formatViewerRef" :content="editDialog.content"></format-viewer>
                 </el-form-item>
             </el-form>
 
diff --git a/frontend/src/views/ops/redis/KeyValueSet.vue b/frontend/src/views/ops/redis/KeyValueSet.vue
index 2075e635..7a9136e7 100644
--- a/frontend/src/views/ops/redis/KeyValueSet.vue
+++ b/frontend/src/views/ops/redis/KeyValueSet.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-button @click="showEditDialog(null)" icon="plus" size="small" plain type="primary" class="mb10">{{ $t('redis.addNewLine') }}</el-button>
+        <el-button @click="showEditDialog(null)" icon="plus" size="small" plain type="primary" class="mb-2">{{ $t('redis.addNewLine') }}</el-button>
         <el-table size="small" border :data="setDatas" height="450" min-height="300" stripe>
             <el-table-column type="index" :label="'ID (Total: ' + total + ')'" sortable width="100"> </el-table-column>
             <el-table-column resizable sortable prop="value" label="value" show-overflow-tooltip min-width="200"> </el-table-column>
@@ -19,7 +19,7 @@
                     <el-link @click="showEditDialog(scope.row)" :underline="false" type="primary" icon="edit" plain></el-link>
                     <el-popconfirm :title="$t('redis.deleteConfirm')" @confirm="srem(scope.row, scope.$index)">
                         <template #reference>
-                            <el-link v-auth="'redis:data:del'" :underline="false" type="danger" icon="delete" size="small" plain class="ml5"></el-link>
+                            <el-link v-auth="'redis:data:del'" :underline="false" type="danger" icon="delete" size="small" plain class="ml-1"></el-link>
                         </template>
                     </el-popconfirm>
                 </template>
@@ -33,7 +33,7 @@
         <el-dialog :title="$t('redis.addNewLine')" v-model="editDialog.visible" width="600px" :destroy-on-close="true" :close-on-click-modal="false">
             <el-form>
                 <el-form-item>
-                    <format-viewer class="w100" ref="formatViewerRef" :content="editDialog.content"></format-viewer>
+                    <format-viewer class="!w-full" ref="formatViewerRef" :content="editDialog.content"></format-viewer>
                 </el-form-item>
             </el-form>
 
diff --git a/frontend/src/views/ops/redis/KeyValueString.vue b/frontend/src/views/ops/redis/KeyValueString.vue
index 2119c96b..203de204 100644
--- a/frontend/src/views/ops/redis/KeyValueString.vue
+++ b/frontend/src/views/ops/redis/KeyValueString.vue
@@ -5,7 +5,7 @@
                 <format-viewer ref="formatViewerRef" height="250px" :content="string.value"></format-viewer>
             </div>
         </el-form>
-        <div class="mt10 fr">
+        <div class="!mt-2 float-right">
             <el-button @click="saveValue" type="primary" v-auth="'redis:data:save'">{{ $t('common.save') }}</el-button>
         </div>
     </div>
diff --git a/frontend/src/views/ops/redis/KeyValueZset.vue b/frontend/src/views/ops/redis/KeyValueZset.vue
index a6d8b932..5e52633d 100644
--- a/frontend/src/views/ops/redis/KeyValueZset.vue
+++ b/frontend/src/views/ops/redis/KeyValueZset.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-button @click="showEditDialog(null)" icon="plus" size="small" plain type="primary" class="mb10">{{ $t('redis.addNewLine') }}</el-button>
+        <el-button @click="showEditDialog(null)" icon="plus" size="small" plain type="primary" class="mb-2">{{ $t('redis.addNewLine') }}</el-button>
         <el-table size="small" border :data="values" height="450" min-height="300" stripe>
             <el-table-column type="index" :label="'ID (Total: ' + total + ')'" sortable width="100"> </el-table-column>
             <el-table-column resizable sortable prop="score" label="score" show-overflow-tooltip min-width="100"> </el-table-column>
@@ -20,7 +20,7 @@
                     <el-link @click="showEditDialog(scope.row)" :underline="false" type="primary" icon="edit" plain></el-link>
                     <el-popconfirm :title="$t('redis.deleteConfirm')" @confirm="zrem(scope.row, scope.$index)">
                         <template #reference>
-                            <el-link v-auth="'redis:data:del'" :underline="false" type="danger" icon="delete" size="small" plain class="ml5"></el-link>
+                            <el-link v-auth="'redis:data:del'" :underline="false" type="danger" icon="delete" size="small" plain class="ml-1"></el-link>
                         </template>
                     </el-popconfirm>
                 </template>
@@ -37,7 +37,7 @@
                     <el-input type="number" v-model.number="editDialog.score" placeholder="score" />
                 </el-form-item>
                 <el-form-item>
-                    <format-viewer class="w100" ref="formatViewerRef" :content="editDialog.content"></format-viewer>
+                    <format-viewer class="!w-full" ref="formatViewerRef" :content="editDialog.content"></format-viewer>
                 </el-form-item>
             </el-form>
 
diff --git a/frontend/src/views/ops/redis/RedisList.vue b/frontend/src/views/ops/redis/RedisList.vue
index b3b23888..86965119 100644
--- a/frontend/src/views/ops/redis/RedisList.vue
+++ b/frontend/src/views/ops/redis/RedisList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="redisApi.redisList"
@@ -63,7 +63,7 @@
                             effect="plain"
                             type="success"
                             size="small"
-                            style="cursor: pointer"
+                            class="cursor-pointer"
                             >{{ scope.row.ip }}
                         </el-tag>
                     </template>
diff --git a/frontend/src/views/ops/redis/components/CmdExecDialog.vue b/frontend/src/views/ops/redis/components/CmdExecDialog.vue
index f8512471..87197dbf 100644
--- a/frontend/src/views/ops/redis/components/CmdExecDialog.vue
+++ b/frontend/src/views/ops/redis/components/CmdExecDialog.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
         <el-dialog title="待执行cmd" v-model="dialogVisible" :show-close="false" width="600px" @close="cancel">
-            <el-input type="textarea" disabled v-model="state.cmdStr" class="mt5" :rows="5" />
-            <el-input @keyup.enter="runCmd" ref="remarkInputRef" v-model="remark" placeholder="请输入执行备注" class="mt5" />
+            <el-input type="textarea" disabled v-model="state.cmdStr" class="mt-1" :rows="5" />
+            <el-input @keyup.enter="runCmd" ref="remarkInputRef" v-model="remark" placeholder="请输入执行备注" class="mt-1" />
 
             <div v-if="props.flowProcdef">
                 <el-divider content-position="left">审批节点</el-divider>
diff --git a/frontend/src/views/ops/tag/AuthCertList.vue b/frontend/src/views/ops/tag/AuthCertList.vue
index 5e11d446..add5121e 100755
--- a/frontend/src/views/ops/tag/AuthCertList.vue
+++ b/frontend/src/views/ops/tag/AuthCertList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="resourceAuthCertApi.listByQuery"
diff --git a/frontend/src/views/ops/tag/TagTreeList.vue b/frontend/src/views/ops/tag/TagTreeList.vue
index 89cde773..966ffab6 100644
--- a/frontend/src/views/ops/tag/TagTreeList.vue
+++ b/frontend/src/views/ops/tag/TagTreeList.vue
@@ -2,7 +2,7 @@
     <div class="tag-tree-list card">
         <Splitpanes class="default-theme">
             <Pane size="30" min-size="25" max-size="35">
-                <div class="card pd5 mr5">
+                <div class="card !p-1 !mb-1 !mr-1">
                     <el-input v-model="filterTag" clearable :placeholder="$t('tag.nameFilterPlaceholder')" style="width: 200px; margin-right: 10px" />
                     <el-button
                         v-if="useUserInfo().userInfo.username == 'admin'"
@@ -11,7 +11,7 @@
                         icon="plus"
                         @click="showSaveTagDialog(null)"
                     ></el-button>
-                    <div style="float: right">
+                    <div class="float-right">
                         <el-tooltip placement="top">
                             <template #content>
                                 {{ $t('tag.tagTips1') }}
@@ -53,7 +53,7 @@
                                     :color="EnumValue.getEnumByValue(TagResourceTypeEnum, data.type)?.extra.iconColor"
                                 />
 
-                                <span class="ml5">
+                                <span class="ml-1">
                                     {{ data.name }}
                                     <span style="color: #3c8dbc">【</span>
                                     {{ data.code }}
@@ -66,8 +66,8 @@
                 </el-scrollbar>
             </Pane>
 
-            <Pane min-size="40">
-                <div class="ml10">
+            <Pane min-size="40" size="70">
+                <div class="ml-2">
                     <el-tabs @tab-change="tabChange" v-model="state.activeTabName" v-if="currentTag">
                         <el-tab-pane :label="$t('common.detail')" :name="TagDetail">
                             <el-descriptions :column="2" border>
diff --git a/frontend/src/views/ops/tag/TeamList.vue b/frontend/src/views/ops/tag/TeamList.vue
index bc15697b..a40004eb 100755
--- a/frontend/src/views/ops/tag/TeamList.vue
+++ b/frontend/src/views/ops/tag/TeamList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="tagApi.getTeams"
diff --git a/frontend/src/views/personal/index.vue b/frontend/src/views/personal/index.vue
index 5d743c09..a75f0a53 100644
--- a/frontend/src/views/personal/index.vue
+++ b/frontend/src/views/personal/index.vue
@@ -3,11 +3,11 @@
         <el-row>
             <!-- 更新信息 -->
             <el-col :span="24">
-                <el-card shadow="hover" class="mt15 personal-edit" :header="$t('personal.updateInfo')">
+                <el-card shadow="hover" class="!mt-3.5 personal-edit" :header="$t('personal.updateInfo')">
                     <div class="personal-edit-title">{{ $t('personal.basicInfo') }}</div>
-                    <el-form :model="accountForm" label-width="auto" class="mt35 mb35">
+                    <el-form :model="accountForm" label-width="auto" class="mt-8 mb-8">
                         <el-row :gutter="35">
-                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="!mb-4">
                                 <el-form-item :label="$t('common.password')">
                                     <el-input
                                         type="password"
@@ -28,7 +28,7 @@
                     </el-form>
 
                     <span v-show="authStatus.enable">
-                        <div class="personal-edit-title mb15">{{ $t('personal.accountInfo') }}</div>
+                        <div class="personal-edit-title mb-2">{{ $t('personal.accountInfo') }}</div>
                         <div class="personal-edit-safe-box">
                             <div class="personal-edit-safe-item">
                                 <div class="personal-edit-safe-item-left">
diff --git a/frontend/src/views/system/account/AccountList.vue b/frontend/src/views/system/account/AccountList.vue
index b3f931fd..8c945006 100755
--- a/frontend/src/views/system/account/AccountList.vue
+++ b/frontend/src/views/system/account/AccountList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :page-api="accountApi.list"
diff --git a/frontend/src/views/system/account/RoleAllocation.vue b/frontend/src/views/system/account/RoleAllocation.vue
index f6e5068f..4ca01c37 100755
--- a/frontend/src/views/system/account/RoleAllocation.vue
+++ b/frontend/src/views/system/account/RoleAllocation.vue
@@ -67,7 +67,7 @@
                 >
                     <template #default="{ node, data }">
                         <span class="custom-tree-node">
-                            <SvgIcon :name="getMenuIcon(data)" class="mb3 mr3" />
+                            <SvgIcon :name="getMenuIcon(data)" class="mb-0.5 mr-0.5" />
 
                             <span v-if="data.type == ResourceTypeEnum.Menu.value">{{ $t(node.label) }}</span>
                             <span v-if="data.type == ResourceTypeEnum.Permission.value" style="color: #67c23a">{{ $t(node.label) }}</span>
diff --git a/frontend/src/views/system/account/components/AccountInfo.vue b/frontend/src/views/system/account/components/AccountInfo.vue
index fd368f98..cc752bda 100644
--- a/frontend/src/views/system/account/components/AccountInfo.vue
+++ b/frontend/src/views/system/account/components/AccountInfo.vue
@@ -18,7 +18,7 @@
                 </el-descriptions-item>
 
                 <el-descriptions-item :span="2" :label="$t('common.role')">
-                    <el-tag v-for="role in account.roles" :key="role.code" class="ml5">
+                    <el-tag v-for="role in account.roles" :key="role.code" class="ml-1">
                         {{ role.roleName }}
                     </el-tag>
                 </el-descriptions-item>
diff --git a/frontend/src/views/system/config/ConfigEdit.vue b/frontend/src/views/system/config/ConfigEdit.vue
index 6a3eaaf6..0137826b 100755
--- a/frontend/src/views/system/config/ConfigEdit.vue
+++ b/frontend/src/views/system/config/ConfigEdit.vue
@@ -26,7 +26,7 @@
                     </el-select>
                 </el-form-item>
 
-                <el-form-item :label="$t('system.sysconf.confItem')" class="w100">
+                <el-form-item :label="$t('system.sysconf.confItem')" class="!w-full">
                     <dynamic-form-edit v-model="params" />
                 </el-form-item>
 
diff --git a/frontend/src/views/system/config/ConfigList.vue b/frontend/src/views/system/config/ConfigList.vue
index 6c704871..4761513a 100755
--- a/frontend/src/views/system/config/ConfigList.vue
+++ b/frontend/src/views/system/config/ConfigList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             ref="pageTableRef"
             :search-items="searchItems"
diff --git a/frontend/src/views/system/resource/ResourceEdit.vue b/frontend/src/views/system/resource/ResourceEdit.vue
index f1ef66dc..54e56447 100644
--- a/frontend/src/views/system/resource/ResourceEdit.vue
+++ b/frontend/src/views/system/resource/ResourceEdit.vue
@@ -4,33 +4,38 @@
             <el-form :model="form" :inline="true" ref="menuForm" :rules="rules" label-width="auto">
                 <el-row :gutter="35">
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-                        <el-form-item class="w100" prop="type" :label="$t('common.type')" required>
+                        <el-form-item class="!w-full" prop="type" :label="$t('common.type')" required>
                             <enum-select :enums="ResourceTypeEnum" v-model="form.type" :disabled="typeDisabled" />
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-                        <el-form-item class="w100" prop="name" :label="$t('common.name')" required>
+                        <el-form-item class="!w-full" prop="name" :label="$t('common.name')" required>
                             <el-input v-model.trim="form.name" auto-complete="off"></el-input>
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-                        <FormItemTooltip class="w100" label="path|code" prop="code" :tooltip="$t('system.menu.menuCodeTips')">
+                        <FormItemTooltip class="!w-full" label="path|code" prop="code" :tooltip="$t('system.menu.menuCodeTips')">
                             <el-input v-model.trim="form.code" :placeholder="$t('system.menu.menuCodePlaceholder')" auto-complete="off"></el-input>
                         </FormItemTooltip>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.type === menuTypeValue">
-                        <el-form-item class="w100" :label="$t('system.menu.icon')">
+                        <el-form-item class="!w-full" :label="$t('system.menu.icon')">
                             <icon-selector v-model="form.meta.icon" />
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.type === menuTypeValue">
-                        <FormItemTooltip class="w100" :label="$t('system.menu.routerName')" prop="meta.routeName" :tooltip="$t('system.menu.routerNameTips')">
+                        <FormItemTooltip
+                            class="!w-full"
+                            :label="$t('system.menu.routerName')"
+                            prop="meta.routeName"
+                            :tooltip="$t('system.menu.routerNameTips')"
+                        >
                             <el-input v-model.trim="form.meta.routeName"></el-input>
                         </FormItemTooltip>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.type === menuTypeValue">
                         <FormItemTooltip
-                            class="w100"
+                            class="!w-full"
                             :label="$t('system.menu.routerName')"
                             prop="meta.component"
                             :tooltip="$t('system.menu.componentPathTips')"
@@ -39,34 +44,34 @@
                         </FormItemTooltip>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.type === menuTypeValue">
-                        <FormItemTooltip class="w100" :label="$t('system.menu.isCache')" prop="meta.isKeepAlive" :tooltip="$t('system.menu.isCacheTips')">
-                            <el-select v-model="form.meta.isKeepAlive" class="w100">
+                        <FormItemTooltip class="!w-full" :label="$t('system.menu.isCache')" prop="meta.isKeepAlive" :tooltip="$t('system.menu.isCacheTips')">
+                            <el-select v-model="form.meta.isKeepAlive" class="!w-full">
                                 <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                             </el-select>
                         </FormItemTooltip>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.type === menuTypeValue">
-                        <FormItemTooltip class="w100" :label="$t('system.menu.isHide')" prop="meta.isHide" :tooltip="$t('system.menu.isHideTips')">
-                            <el-select v-model="form.meta.isHide" class="w100">
+                        <FormItemTooltip class="!w-full" :label="$t('system.menu.isHide')" prop="meta.isHide" :tooltip="$t('system.menu.isHideTips')">
+                            <el-select v-model="form.meta.isHide" class="!w-full">
                                 <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                             </el-select>
                         </FormItemTooltip>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.type === menuTypeValue">
-                        <el-form-item class="w100" prop="meta.isAffix" :label="$t('system.menu.tagIsDelete')">
-                            <el-select v-model="form.meta.isAffix" class="w100">
+                        <el-form-item class="!w-full" prop="meta.isAffix" :label="$t('system.menu.tagIsDelete')">
+                            <el-select v-model="form.meta.isAffix" class="!w-full">
                                 <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.type === menuTypeValue">
                         <FormItemTooltip
-                            class="w100"
+                            class="!w-full"
                             :label="$t('system.menu.externalLink')"
                             prop="meta.linkType"
                             :tooltip="$t('system.menu.externalLinkTips')"
                         >
-                            <el-select class="w100" @change="changeLinkType" v-model="form.meta.linkType">
+                            <el-select class="!w-full" @change="changeLinkType" v-model="form.meta.linkType">
                                 <el-option :key="0" :label="$t('system.menu.no')" :value="0"> </el-option>
                                 <el-option :key="1" :label="$t('system.menu.inline')" :value="1"> </el-option>
                                 <el-option :key="2" :label="$t('system.menu.externalLink')" :value="2"> </el-option>
@@ -74,7 +79,7 @@
                         </FormItemTooltip>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.type === menuTypeValue && form.meta.linkType > 0">
-                        <el-form-item prop="meta.link" :label="$t('system.menu.linkAddress')" class="w100">
+                        <el-form-item prop="meta.link" :label="$t('system.menu.linkAddress')" class="!w-full">
                             <el-input v-model.trim="form.meta.link" :placeholder="$t('system.menu.linkPlaceholder')"></el-input>
                         </el-form-item>
                     </el-col>
diff --git a/frontend/src/views/system/resource/ResourceList.vue b/frontend/src/views/system/resource/ResourceList.vue
index 776442c9..e0986114 100644
--- a/frontend/src/views/system/resource/ResourceList.vue
+++ b/frontend/src/views/system/resource/ResourceList.vue
@@ -2,11 +2,11 @@
     <div class="card system-resouce-list">
         <Splitpanes class="default-theme">
             <Pane size="25" min-size="20" max-size="30">
-                <div class="card pd5 mr5">
+                <div class="card !p-1 mr-1">
                     <el-input v-model="filterResource" clearable :placeholder="$t('system.menu.filterPlaceholder')" style="width: 200px; margin-right: 10px" />
                     <el-button v-auth="perms.addResource" type="primary" icon="plus" @click="addResource(false)"></el-button>
 
-                    <div class="fr">
+                    <div class="float-right">
                         <el-tooltip placement="top">
                             <template #content> {{ $t('system.menu.opTips') }} </template>
                             <span>
@@ -37,7 +37,7 @@
                     >
                         <template #default="{ data }">
                             <span class="custom-tree-node">
-                                <SvgIcon :name="getMenuIcon(data)" class="mb3" />
+                                <SvgIcon :name="getMenuIcon(data)" class="!mb-0.5" />
 
                                 <span style="font-size: 13px" v-if="data.type === menuTypeValue">
                                     <span style="color: #3c8dbc">【</span>
@@ -63,7 +63,7 @@
             </Pane>
 
             <Pane min-size="40">
-                <div class="ml10">
+                <div class="ml-2">
                     <el-tabs v-model="state.activeTabName" @tab-click="onTabClick" v-if="currentResource">
                         <el-tab-pane :label="$t('common.detail')" :name="ResourceDetail">
                             <el-descriptions :title="$t('system.menu.info')" :column="2" border>
diff --git a/frontend/src/views/system/role/ResourceEdit.vue b/frontend/src/views/system/role/ResourceEdit.vue
index cf487275..62e77850 100644
--- a/frontend/src/views/system/role/ResourceEdit.vue
+++ b/frontend/src/views/system/role/ResourceEdit.vue
@@ -18,7 +18,7 @@
             >
                 <template #default="{ node, data }">
                     <span class="custom-tree-node">
-                        <SvgIcon :name="getMenuIcon(data)" class="mb3 mr3" />
+                        <SvgIcon :name="getMenuIcon(data)" class="mb-0.5 mr-0.5" />
                         <span v-if="data.type == ResourceTypeEnum.Menu.value">{{ $t(node.label) }}</span>
                         <span v-if="data.type == ResourceTypeEnum.Permission.value" style="color: #67c23a">{{ $t(node.label) }}</span>
                     </span>
diff --git a/frontend/src/views/system/role/RoleList.vue b/frontend/src/views/system/role/RoleList.vue
index ab786016..ced9e7ba 100755
--- a/frontend/src/views/system/role/RoleList.vue
+++ b/frontend/src/views/system/role/RoleList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table
             :search-items="searchItems"
             v-model:query-form="query"
diff --git a/frontend/src/views/system/role/ShowResource.vue b/frontend/src/views/system/role/ShowResource.vue
index 02a30c47..2afee0d7 100644
--- a/frontend/src/views/system/role/ShowResource.vue
+++ b/frontend/src/views/system/role/ShowResource.vue
@@ -4,7 +4,7 @@
             <el-tree style="height: 50vh; overflow: auto" :data="resources" node-key="id" :props="defaultProps">
                 <template #default="{ node, data }">
                     <span class="custom-tree-node">
-                        <SvgIcon :name="getMenuIcon(data)" class="mb3 mr3" />
+                        <SvgIcon :name="getMenuIcon(data)" class="mb-0.5 mr-0.5" />
 
                         <span v-if="data.type == ResourceTypeEnum.Menu.value">{{ $t(node.label) }}</span>
                         <span v-if="data.type == ResourceTypeEnum.Permission.value" style="color: #67c23a">{{ $t(node.label) }}</span>
diff --git a/frontend/src/views/system/syslog/SyslogList.vue b/frontend/src/views/system/syslog/SyslogList.vue
index 79d7afa1..aa3c2500 100755
--- a/frontend/src/views/system/syslog/SyslogList.vue
+++ b/frontend/src/views/system/syslog/SyslogList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="h-full">
         <page-table :page-api="logApi.list" :search-items="searchItems" v-model:query-form="query" :columns="columns">
             <template #creator="{ data }">
                 <account-info :account-id="data.creatorId" :username="data.creator" />
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 00000000..b7ee9626
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+    corePlugins: {
+        preflight: false,
+    },
+};
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 1c9ff88f..8abed7b4 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -4,6 +4,7 @@ import type { UserConfig } from 'vite';
 import { loadEnv } from './src/common/utils/viteBuild';
 import { CodeInspectorPlugin } from 'code-inspector-plugin';
 import progress from 'vite-plugin-progress';
+import tailwindcss from '@tailwindcss/vite';
 
 const pathResolve = (dir: string): any => {
     return resolve(__dirname, '.', dir);
@@ -20,6 +21,7 @@ const alias: Record<string, string> = {
 const viteConfig: UserConfig = {
     plugins: [
         vue(),
+        tailwindcss(),
         CodeInspectorPlugin({
             bundler: 'vite',
             editor: VITE_EDITOR as any,
diff --git a/server/go.mod b/server/go.mod
index 493f2771..835e1305 100644
--- a/server/go.mod
+++ b/server/go.mod
@@ -9,7 +9,7 @@ require (
 	github.com/emirpasic/gods v1.18.1
 	github.com/gin-gonic/gin v1.10.0
 	github.com/glebarez/sqlite v1.11.0
-	github.com/go-gormigrate/gormigrate/v2 v2.1.3
+	github.com/go-gormigrate/gormigrate/v2 v2.1.4
 	github.com/go-ldap/ldap/v3 v3.4.8
 	github.com/go-playground/locales v0.14.1
 	github.com/go-playground/universal-translator v0.18.1
diff --git a/server/initialize/router.go b/server/initialize/router.go
index 37427eef..67acd82e 100644
--- a/server/initialize/router.go
+++ b/server/initialize/router.go
@@ -2,46 +2,33 @@ package initialize
 
 import (
 	"fmt"
-	"io/fs"
-	"mayfly-go/pkg/config"
 	"mayfly-go/pkg/ioc"
-	"mayfly-go/pkg/middleware"
 	"mayfly-go/pkg/req"
-	"mayfly-go/static"
 	"net/http"
 	"reflect"
 
 	"github.com/gin-gonic/gin"
 )
 
+// RouterApi
+// 该接口的实现类注册到ioc中，则会自动将请求配置注册到路由中
 type RouterApi interface {
 	// ReqConfs 获取请求配置信息
 	ReqConfs() *req.Confs
 }
 
-func InitRouter() *gin.Engine {
-	// server配置
-	serverConfig := config.Conf.Server
-	gin.SetMode(serverConfig.Model)
-
-	var router = gin.New()
-	router.MaxMultipartMemory = 8 << 20
+type RouterConfig struct {
+	ContextPath string // 请求路径上下文
+}
 
+func InitRouter(router *gin.Engine, conf RouterConfig) *gin.Engine {
 	// 没有路由即 404返回
 	router.NoRoute(func(g *gin.Context) {
 		g.JSON(http.StatusNotFound, gin.H{"code": 404, "msg": fmt.Sprintf("not found '%s:%s'", g.Request.Method, g.Request.URL.Path)})
 	})
 
-	// 设置静态资源
-	setStatic(serverConfig.ContextPath, router)
-
-	// 是否允许跨域
-	if serverConfig.Cors {
-		router.Use(middleware.Cors())
-	}
-
 	// 设置路由组
-	api := router.Group(serverConfig.ContextPath + "/api")
+	api := router.Group(conf.ContextPath + "/api")
 
 	// 获取所有实现了RouterApi接口的实例，并注册对应路由
 	ras := ioc.GetBeansByType[RouterApi](reflect.TypeOf((*RouterApi)(nil)).Elem())
@@ -56,36 +43,3 @@ func InitRouter() *gin.Engine {
 
 	return router
 }
-
-func setStatic(contextPath string, router *gin.Engine) {
-	// 使用embed打包静态资源至二进制文件中
-	fsys, _ := fs.Sub(static.Static, "static")
-	fileServer := http.FileServer(http.FS(fsys))
-	handler := WrapStaticHandler(http.StripPrefix(contextPath, fileServer))
-
-	router.GET(contextPath+"/", handler)
-	router.GET(contextPath+"/favicon.ico", handler)
-	router.GET(contextPath+"/config.js", handler)
-	// 所有/assets/**开头的都是静态资源文件
-	router.GET(contextPath+"/assets/*file", handler)
-
-	// 设置静态资源
-	if staticConfs := config.Conf.Server.Static; staticConfs != nil {
-		for _, scs := range *staticConfs {
-			router.StaticFS(scs.RelativePath, http.Dir(scs.Root))
-		}
-	}
-	// 设置静态文件
-	if staticFileConfs := config.Conf.Server.StaticFile; staticFileConfs != nil {
-		for _, sfs := range *staticFileConfs {
-			router.StaticFile(sfs.RelativePath, sfs.Filepath)
-		}
-	}
-}
-
-func WrapStaticHandler(h http.Handler) gin.HandlerFunc {
-	return func(c *gin.Context) {
-		c.Writer.Header().Set("Cache-Control", `public, max-age=31536000`)
-		h.ServeHTTP(c.Writer, c.Request)
-	}
-}
diff --git a/server/internal/auth/imsg/imsg.go b/server/internal/auth/imsg/imsg.go
index 8eaf8462..6f569227 100644
--- a/server/internal/auth/imsg/imsg.go
+++ b/server/internal/auth/imsg/imsg.go
@@ -1,7 +1,7 @@
 package imsg
 
 import (
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/i18n"
 )
 
diff --git a/server/internal/db/api/db_instance.go b/server/internal/db/api/db_instance.go
index 5ba2268a..f9441b52 100644
--- a/server/internal/db/api/db_instance.go
+++ b/server/internal/db/api/db_instance.go
@@ -1,13 +1,13 @@
 package api
 
 import (
-	"mayfly-go/internal/common/consts"
 	"mayfly-go/internal/db/api/form"
 	"mayfly-go/internal/db/api/vo"
 	"mayfly-go/internal/db/application"
 	"mayfly-go/internal/db/application/dto"
 	"mayfly-go/internal/db/domain/entity"
 	"mayfly-go/internal/db/imsg"
+	"mayfly-go/internal/pkg/consts"
 
 	tagapp "mayfly-go/internal/tag/application"
 	tagentity "mayfly-go/internal/tag/domain/entity"
diff --git a/server/internal/db/application/db_instance.go b/server/internal/db/application/db_instance.go
index 8f1a35ba..6d25ddc8 100644
--- a/server/internal/db/application/db_instance.go
+++ b/server/internal/db/application/db_instance.go
@@ -2,13 +2,13 @@ package application
 
 import (
 	"context"
-	"mayfly-go/internal/common/consts"
 	"mayfly-go/internal/db/application/dto"
 	"mayfly-go/internal/db/dbm"
 	"mayfly-go/internal/db/dbm/dbi"
 	"mayfly-go/internal/db/domain/entity"
 	"mayfly-go/internal/db/domain/repository"
 	"mayfly-go/internal/db/imsg"
+	"mayfly-go/internal/pkg/consts"
 	tagapp "mayfly-go/internal/tag/application"
 	tagdto "mayfly-go/internal/tag/application/dto"
 	tagentity "mayfly-go/internal/tag/domain/entity"
diff --git a/server/internal/db/dbm/dbm.go b/server/internal/db/dbm/dbm.go
index 717f4554..72055ac1 100644
--- a/server/internal/db/dbm/dbm.go
+++ b/server/internal/db/dbm/dbm.go
@@ -2,7 +2,6 @@ package dbm
 
 import (
 	"fmt"
-	"mayfly-go/internal/common/consts"
 	"mayfly-go/internal/db/dbm/dbi"
 	_ "mayfly-go/internal/db/dbm/dm"
 	_ "mayfly-go/internal/db/dbm/mssql"
@@ -11,6 +10,7 @@ import (
 	_ "mayfly-go/internal/db/dbm/postgres"
 	_ "mayfly-go/internal/db/dbm/sqlite"
 	"mayfly-go/internal/machine/mcm"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/cache"
 	"mayfly-go/pkg/logx"
 	"sync"
diff --git a/server/internal/db/dbm/sqlparser/sqlparser.go b/server/internal/db/dbm/sqlparser/sqlparser.go
index 1cd64530..ee0ec715 100644
--- a/server/internal/db/dbm/sqlparser/sqlparser.go
+++ b/server/internal/db/dbm/sqlparser/sqlparser.go
@@ -2,8 +2,8 @@ package sqlparser
 
 import (
 	"io"
-	"mayfly-go/internal/common/utils"
 	"mayfly-go/internal/db/dbm/sqlparser/sqlstmt"
+	"mayfly-go/internal/pkg/utils"
 )
 
 type DbDialect string
diff --git a/server/internal/db/imsg/imsg.go b/server/internal/db/imsg/imsg.go
index 6517798d..ae2f4a06 100644
--- a/server/internal/db/imsg/imsg.go
+++ b/server/internal/db/imsg/imsg.go
@@ -1,7 +1,7 @@
 package imsg
 
 import (
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/i18n"
 )
 
diff --git a/server/internal/flow/api/procinst.go b/server/internal/flow/api/procinst.go
index 45b0d521..f3f58148 100644
--- a/server/internal/flow/api/procinst.go
+++ b/server/internal/flow/api/procinst.go
@@ -2,7 +2,6 @@ package api
 
 import (
 	"fmt"
-	"mayfly-go/internal/common/consts"
 	"mayfly-go/internal/flow/api/form"
 	"mayfly-go/internal/flow/api/vo"
 	"mayfly-go/internal/flow/application"
@@ -10,6 +9,7 @@ import (
 	"mayfly-go/internal/flow/domain/entity"
 	"mayfly-go/internal/flow/domain/repository"
 	"mayfly-go/internal/flow/imsg"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/biz"
 	"mayfly-go/pkg/req"
 	"mayfly-go/pkg/utils/collx"
diff --git a/server/internal/flow/application/procinst.go b/server/internal/flow/application/procinst.go
index 5fcca094..2c791431 100644
--- a/server/internal/flow/application/procinst.go
+++ b/server/internal/flow/application/procinst.go
@@ -9,6 +9,7 @@ import (
 	"mayfly-go/internal/flow/domain/repository"
 	"mayfly-go/internal/flow/imsg"
 	msgdto "mayfly-go/internal/msg/application/dto"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/base"
 	"mayfly-go/pkg/contextx"
 	"mayfly-go/pkg/errorx"
@@ -108,7 +109,7 @@ func (p *procinstAppImpl) CancelProc(ctx context.Context, procinstId uint64) err
 	if la == nil {
 		return errorx.NewBiz("no login")
 	}
-	if procinst.CreatorId != la.Id {
+	if procinst.CreatorId != consts.AdminId && procinst.CreatorId != la.Id {
 		return errorx.NewBizI(ctx, imsg.ErrProcinstCancelSelf)
 	}
 	procinst.Status = entity.ProcinstStatusCancelled
diff --git a/server/internal/flow/imsg/imsg.go b/server/internal/flow/imsg/imsg.go
index 305749af..5f8dc921 100644
--- a/server/internal/flow/imsg/imsg.go
+++ b/server/internal/flow/imsg/imsg.go
@@ -1,7 +1,7 @@
 package imsg
 
 import (
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/i18n"
 )
 
diff --git a/server/internal/machine/api/machine.go b/server/internal/machine/api/machine.go
index 1f053b30..fd256e00 100644
--- a/server/internal/machine/api/machine.go
+++ b/server/internal/machine/api/machine.go
@@ -2,7 +2,6 @@ package api
 
 import (
 	"fmt"
-	"mayfly-go/internal/common/consts"
 	"mayfly-go/internal/event"
 	"mayfly-go/internal/machine/api/form"
 	"mayfly-go/internal/machine/api/vo"
@@ -12,6 +11,7 @@ import (
 	"mayfly-go/internal/machine/guac"
 	"mayfly-go/internal/machine/imsg"
 	"mayfly-go/internal/machine/mcm"
+	"mayfly-go/internal/pkg/consts"
 	tagapp "mayfly-go/internal/tag/application"
 	tagentity "mayfly-go/internal/tag/domain/entity"
 	"mayfly-go/pkg/biz"
diff --git a/server/internal/machine/imsg/imsg.go b/server/internal/machine/imsg/imsg.go
index 78edf4bb..33bf2fda 100644
--- a/server/internal/machine/imsg/imsg.go
+++ b/server/internal/machine/imsg/imsg.go
@@ -1,7 +1,7 @@
 package imsg
 
 import (
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/i18n"
 )
 
diff --git a/server/internal/machine/mcm/client_cache.go b/server/internal/machine/mcm/client_cache.go
index 8858e638..32727429 100644
--- a/server/internal/machine/mcm/client_cache.go
+++ b/server/internal/machine/mcm/client_cache.go
@@ -2,7 +2,7 @@ package mcm
 
 import (
 	"errors"
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	tagentity "mayfly-go/internal/tag/domain/entity"
 	"mayfly-go/pkg/cache"
 	"mayfly-go/pkg/logx"
diff --git a/server/internal/mongo/api/mongo.go b/server/internal/mongo/api/mongo.go
index 2a6bd7c2..b3e7dba2 100644
--- a/server/internal/mongo/api/mongo.go
+++ b/server/internal/mongo/api/mongo.go
@@ -2,13 +2,13 @@ package api
 
 import (
 	"context"
-	"mayfly-go/internal/common/consts"
 	"mayfly-go/internal/event"
 	"mayfly-go/internal/mongo/api/form"
 	"mayfly-go/internal/mongo/api/vo"
 	"mayfly-go/internal/mongo/application"
 	"mayfly-go/internal/mongo/domain/entity"
 	"mayfly-go/internal/mongo/imsg"
+	"mayfly-go/internal/pkg/consts"
 	tagapp "mayfly-go/internal/tag/application"
 	tagentity "mayfly-go/internal/tag/domain/entity"
 	"mayfly-go/pkg/biz"
diff --git a/server/internal/mongo/application/mongo.go b/server/internal/mongo/application/mongo.go
index 703e6a05..bfd41a8c 100644
--- a/server/internal/mongo/application/mongo.go
+++ b/server/internal/mongo/application/mongo.go
@@ -2,11 +2,11 @@ package application
 
 import (
 	"context"
-	"mayfly-go/internal/common/consts"
 	"mayfly-go/internal/mongo/domain/entity"
 	"mayfly-go/internal/mongo/domain/repository"
 	"mayfly-go/internal/mongo/imsg"
 	"mayfly-go/internal/mongo/mgm"
+	"mayfly-go/internal/pkg/consts"
 	tagapp "mayfly-go/internal/tag/application"
 	tagdto "mayfly-go/internal/tag/application/dto"
 	tagentity "mayfly-go/internal/tag/domain/entity"
diff --git a/server/internal/mongo/imsg/imsg.go b/server/internal/mongo/imsg/imsg.go
index 46bf2ad5..5a63c6e2 100644
--- a/server/internal/mongo/imsg/imsg.go
+++ b/server/internal/mongo/imsg/imsg.go
@@ -1,7 +1,7 @@
 package imsg
 
 import (
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/i18n"
 )
 
diff --git a/server/internal/mongo/mgm/conn_cache.go b/server/internal/mongo/mgm/conn_cache.go
index 1a015f1e..4c9f3ae5 100644
--- a/server/internal/mongo/mgm/conn_cache.go
+++ b/server/internal/mongo/mgm/conn_cache.go
@@ -1,8 +1,8 @@
 package mgm
 
 import (
-	"mayfly-go/internal/common/consts"
 	"mayfly-go/internal/machine/mcm"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/cache"
 	"mayfly-go/pkg/logx"
 	"sync"
diff --git a/server/internal/msg/api/msg_tmpl.go b/server/internal/msg/api/msg_tmpl.go
index 2192366d..b147b153 100644
--- a/server/internal/msg/api/msg_tmpl.go
+++ b/server/internal/msg/api/msg_tmpl.go
@@ -75,8 +75,7 @@ func (m *MsgTmpl) DelMsgTmpls(rc *req.Ctx) {
 
 func (m *MsgTmpl) SendMsg(rc *req.Ctx) {
 	code := rc.PathParam("code")
-	form := &form.SendMsg{}
-	req.BindJsonAndValid(rc, form)
+	form := req.BindJsonAndValid(rc, new(form.SendMsg))
 
 	rc.ReqParam = form
 
diff --git a/server/internal/msg/imsg/imsg.go b/server/internal/msg/imsg/imsg.go
index b95c9a9d..d9af0b79 100644
--- a/server/internal/msg/imsg/imsg.go
+++ b/server/internal/msg/imsg/imsg.go
@@ -1,7 +1,7 @@
 package imsg
 
 import (
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/i18n"
 )
 
diff --git a/server/pkg/config/aes.go b/server/internal/pkg/config/aes.go
similarity index 100%
rename from server/pkg/config/aes.go
rename to server/internal/pkg/config/aes.go
diff --git a/server/pkg/config/app.go b/server/internal/pkg/config/app.go
similarity index 100%
rename from server/pkg/config/app.go
rename to server/internal/pkg/config/app.go
diff --git a/server/pkg/config/config.go b/server/internal/pkg/config/config.go
similarity index 100%
rename from server/pkg/config/config.go
rename to server/internal/pkg/config/config.go
diff --git a/server/pkg/config/jwt.go b/server/internal/pkg/config/jwt.go
similarity index 100%
rename from server/pkg/config/jwt.go
rename to server/internal/pkg/config/jwt.go
diff --git a/server/pkg/config/log.go b/server/internal/pkg/config/log.go
similarity index 100%
rename from server/pkg/config/log.go
rename to server/internal/pkg/config/log.go
diff --git a/server/pkg/config/mysql.go b/server/internal/pkg/config/mysql.go
similarity index 100%
rename from server/pkg/config/mysql.go
rename to server/internal/pkg/config/mysql.go
diff --git a/server/pkg/config/redis.go b/server/internal/pkg/config/redis.go
similarity index 100%
rename from server/pkg/config/redis.go
rename to server/internal/pkg/config/redis.go
diff --git a/server/pkg/config/server.go b/server/internal/pkg/config/server.go
similarity index 100%
rename from server/pkg/config/server.go
rename to server/internal/pkg/config/server.go
diff --git a/server/pkg/config/sqlite.go b/server/internal/pkg/config/sqlite.go
similarity index 100%
rename from server/pkg/config/sqlite.go
rename to server/internal/pkg/config/sqlite.go
diff --git a/server/internal/common/consts/consts.go b/server/internal/pkg/consts/consts.go
similarity index 100%
rename from server/internal/common/consts/consts.go
rename to server/internal/pkg/consts/consts.go
diff --git a/server/pkg/starter/banner.go b/server/internal/pkg/starter/banner.go
similarity index 94%
rename from server/pkg/starter/banner.go
rename to server/internal/pkg/starter/banner.go
index 45bf3cf5..57b9fcb2 100644
--- a/server/pkg/starter/banner.go
+++ b/server/internal/pkg/starter/banner.go
@@ -2,7 +2,7 @@ package starter
 
 import (
 	"fmt"
-	"mayfly-go/pkg/config"
+	"mayfly-go/internal/pkg/config"
 	"mayfly-go/pkg/logx"
 	"os"
 	"runtime/debug"
diff --git a/server/pkg/starter/gorm.go b/server/internal/pkg/starter/gorm.go
similarity index 98%
rename from server/pkg/starter/gorm.go
rename to server/internal/pkg/starter/gorm.go
index 8a4a5d55..b5fbce58 100644
--- a/server/pkg/starter/gorm.go
+++ b/server/internal/pkg/starter/gorm.go
@@ -2,7 +2,7 @@ package starter
 
 import (
 	"log"
-	"mayfly-go/pkg/config"
+	"mayfly-go/internal/pkg/config"
 	"mayfly-go/pkg/global"
 	"mayfly-go/pkg/logx"
 	"time"
diff --git a/server/pkg/starter/redis.go b/server/internal/pkg/starter/redis.go
similarity index 96%
rename from server/pkg/starter/redis.go
rename to server/internal/pkg/starter/redis.go
index 1888b4e3..ca83a0ca 100644
--- a/server/pkg/starter/redis.go
+++ b/server/internal/pkg/starter/redis.go
@@ -3,7 +3,7 @@ package starter
 import (
 	"context"
 	"fmt"
-	"mayfly-go/pkg/config"
+	"mayfly-go/internal/pkg/config"
 	"mayfly-go/pkg/logx"
 	"mayfly-go/pkg/rediscli"
 
diff --git a/server/pkg/starter/run.go b/server/internal/pkg/starter/run.go
similarity index 69%
rename from server/pkg/starter/run.go
rename to server/internal/pkg/starter/run.go
index 26a635ac..cd7a394c 100644
--- a/server/pkg/starter/run.go
+++ b/server/internal/pkg/starter/run.go
@@ -3,8 +3,8 @@ package starter
 import (
 	"context"
 	"mayfly-go/initialize"
+	"mayfly-go/internal/pkg/config"
 	"mayfly-go/migration"
-	"mayfly-go/pkg/config"
 	"mayfly-go/pkg/global"
 	"mayfly-go/pkg/logx"
 	"mayfly-go/pkg/validatorx"
@@ -43,6 +43,8 @@ func RunWebServer() {
 
 	// 参数校验器初始化、如错误提示中文转译等
 	validatorx.Init()
+	// 注册自定义正则表达式校验规则
+	RegisterCustomPatterns()
 
 	// 初始化其他需要启动时运行的方法
 	initialize.InitOther()
@@ -50,3 +52,10 @@ func RunWebServer() {
 	// 运行web服务
 	runWebServer(ctx)
 }
+
+// 注册自定义正则表达式校验规则
+func RegisterCustomPatterns() {
+	// 账号用户名校验
+	validatorx.RegisterPattern("account_username", "^[a-zA-Z0-9_]{5,20}$", "只允许输入5-20位大小写字母、数字、下划线")
+	validatorx.RegisterPattern("resource_code", "^[a-zA-Z0-9_\\-.:]{1,32}$", "只允许输入1-32位大小写字母、数字、_-.:")
+}
diff --git a/server/internal/pkg/starter/web-server.go b/server/internal/pkg/starter/web-server.go
new file mode 100644
index 00000000..e3f82cb9
--- /dev/null
+++ b/server/internal/pkg/starter/web-server.go
@@ -0,0 +1,126 @@
+package starter
+
+import (
+	"context"
+	"errors"
+	"io/fs"
+	"mayfly-go/initialize"
+	"mayfly-go/internal/pkg/config"
+	"mayfly-go/pkg/i18n"
+	"mayfly-go/pkg/logx"
+	"mayfly-go/pkg/middleware"
+	"mayfly-go/pkg/req"
+	"mayfly-go/static"
+	"net/http"
+	"time"
+
+	sysapp "mayfly-go/internal/sys/application"
+
+	"github.com/gin-gonic/gin"
+)
+
+func runWebServer(ctx context.Context) {
+	// 设置gin日志输出器
+	logOut := logx.GetConfig().GetLogOut()
+	gin.DefaultErrorWriter = logOut
+	gin.DefaultWriter = logOut
+
+	// 权限处理器
+	req.UseBeforeHandlerInterceptor(req.PermissionHandler)
+	// 日志处理器
+	req.UseAfterHandlerInterceptor(req.LogHandler)
+	// 设置日志保存函数
+	req.SetSaveLogFunc(sysapp.GetSyslogApp().SaveFromReq)
+
+	// jwt配置
+	jwtConf := config.Conf.Jwt
+	req.SetJwtConf(req.JwtConf{
+		Key:                    jwtConf.Key,
+		ExpireTime:             jwtConf.ExpireTime,
+		RefreshTokenExpireTime: jwtConf.RefreshTokenExpireTime,
+	})
+
+	// i18n配置
+	i18n.SetLang(config.Conf.Server.Lang)
+
+	// server配置
+	serverConfig := config.Conf.Server
+	gin.SetMode(serverConfig.Model)
+
+	var router = gin.New()
+	router.MaxMultipartMemory = 8 << 20
+	// 初始化接口路由
+	initialize.InitRouter(router, initialize.RouterConfig{ContextPath: serverConfig.ContextPath})
+	// 设置静态资源
+	setStatic(serverConfig.ContextPath, router)
+	// 是否允许跨域
+	if serverConfig.Cors {
+		router.Use(middleware.Cors())
+	}
+
+	srv := http.Server{
+		Addr: config.Conf.Server.GetPort(),
+		// 注册路由
+		Handler: router,
+	}
+
+	go func() {
+		<-ctx.Done()
+		logx.Info("Shutdown HTTP Server ...")
+		timeout, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+		defer cancel()
+		err := srv.Shutdown(timeout)
+		if err != nil {
+			logx.Errorf("failed to Shutdown HTTP Server: %v", err)
+		}
+
+		initialize.Terminate()
+	}()
+
+	confSrv := config.Conf.Server
+	logx.Infof("Listening and serving HTTP on %s", srv.Addr+confSrv.ContextPath)
+	var err error
+	if confSrv.Tls != nil && confSrv.Tls.Enable {
+		err = srv.ListenAndServeTLS(confSrv.Tls.CertFile, confSrv.Tls.KeyFile)
+	} else {
+		err = srv.ListenAndServe()
+	}
+	if errors.Is(err, http.ErrServerClosed) {
+		logx.Info("HTTP Server Shutdown")
+	} else if err != nil {
+		logx.Errorf("Failed to Start HTTP Server: %v", err)
+	}
+}
+
+func setStatic(contextPath string, router *gin.Engine) {
+	// 使用embed打包静态资源至二进制文件中
+	fsys, _ := fs.Sub(static.Static, "static")
+	fileServer := http.FileServer(http.FS(fsys))
+	handler := WrapStaticHandler(http.StripPrefix(contextPath, fileServer))
+
+	router.GET(contextPath+"/", handler)
+	router.GET(contextPath+"/favicon.ico", handler)
+	router.GET(contextPath+"/config.js", handler)
+	// 所有/assets/**开头的都是静态资源文件
+	router.GET(contextPath+"/assets/*file", handler)
+
+	// 设置静态资源
+	if staticConfs := config.Conf.Server.Static; staticConfs != nil {
+		for _, scs := range *staticConfs {
+			router.StaticFS(scs.RelativePath, http.Dir(scs.Root))
+		}
+	}
+	// 设置静态文件
+	if staticFileConfs := config.Conf.Server.StaticFile; staticFileConfs != nil {
+		for _, sfs := range *staticFileConfs {
+			router.StaticFile(sfs.RelativePath, sfs.Filepath)
+		}
+	}
+}
+
+func WrapStaticHandler(h http.Handler) gin.HandlerFunc {
+	return func(c *gin.Context) {
+		c.Writer.Header().Set("Cache-Control", `public, max-age=31536000`)
+		h.ServeHTTP(c.Writer, c.Request)
+	}
+}
diff --git a/server/internal/common/utils/pwd.go b/server/internal/pkg/utils/pwd.go
similarity index 97%
rename from server/internal/common/utils/pwd.go
rename to server/internal/pkg/utils/pwd.go
index 15045cae..b37d31eb 100644
--- a/server/internal/common/utils/pwd.go
+++ b/server/internal/pkg/utils/pwd.go
@@ -1,7 +1,7 @@
 package utils
 
 import (
-	"mayfly-go/pkg/config"
+	"mayfly-go/internal/pkg/config"
 	"regexp"
 )
 
diff --git a/server/internal/common/utils/stmt.go b/server/internal/pkg/utils/stmt.go
similarity index 100%
rename from server/internal/common/utils/stmt.go
rename to server/internal/pkg/utils/stmt.go
diff --git a/server/internal/redis/api/redis.go b/server/internal/redis/api/redis.go
index 7f7e244a..4282d737 100644
--- a/server/internal/redis/api/redis.go
+++ b/server/internal/redis/api/redis.go
@@ -2,8 +2,8 @@ package api
 
 import (
 	"context"
-	"mayfly-go/internal/common/consts"
-	"mayfly-go/internal/common/utils"
+	"mayfly-go/internal/pkg/consts"
+	"mayfly-go/internal/pkg/utils"
 	"mayfly-go/internal/redis/api/form"
 	"mayfly-go/internal/redis/api/vo"
 	"mayfly-go/internal/redis/application"
diff --git a/server/internal/redis/application/redis.go b/server/internal/redis/application/redis.go
index 8deabdec..b32c55b0 100644
--- a/server/internal/redis/application/redis.go
+++ b/server/internal/redis/application/redis.go
@@ -2,10 +2,10 @@ package application
 
 import (
 	"context"
-	"mayfly-go/internal/common/consts"
-	"mayfly-go/internal/common/utils"
 	flowapp "mayfly-go/internal/flow/application"
 	flowentity "mayfly-go/internal/flow/domain/entity"
+	"mayfly-go/internal/pkg/consts"
+	"mayfly-go/internal/pkg/utils"
 	"mayfly-go/internal/redis/application/dto"
 	"mayfly-go/internal/redis/domain/entity"
 	"mayfly-go/internal/redis/domain/repository"
diff --git a/server/internal/redis/application/redis_test.go b/server/internal/redis/application/redis_test.go
index 4d34390e..28dfe52b 100644
--- a/server/internal/redis/application/redis_test.go
+++ b/server/internal/redis/application/redis_test.go
@@ -2,7 +2,7 @@ package application
 
 import (
 	"fmt"
-	"mayfly-go/internal/common/utils"
+	"mayfly-go/internal/pkg/utils"
 	"strings"
 	"testing"
 )
diff --git a/server/internal/redis/domain/entity/redis.go b/server/internal/redis/domain/entity/redis.go
index 131d9b5a..c7f7bc0a 100644
--- a/server/internal/redis/domain/entity/redis.go
+++ b/server/internal/redis/domain/entity/redis.go
@@ -1,7 +1,7 @@
 package entity
 
 import (
-	"mayfly-go/internal/common/utils"
+	"mayfly-go/internal/pkg/utils"
 	"mayfly-go/internal/redis/rdm"
 	tagentity "mayfly-go/internal/tag/domain/entity"
 	"mayfly-go/pkg/logx"
diff --git a/server/internal/redis/imsg/imsg.go b/server/internal/redis/imsg/imsg.go
index 0838ad3f..a9bf1a17 100644
--- a/server/internal/redis/imsg/imsg.go
+++ b/server/internal/redis/imsg/imsg.go
@@ -1,7 +1,7 @@
 package imsg
 
 import (
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/i18n"
 )
 
diff --git a/server/internal/redis/rdm/conn_cache.go b/server/internal/redis/rdm/conn_cache.go
index d96094e2..6f3db8bd 100644
--- a/server/internal/redis/rdm/conn_cache.go
+++ b/server/internal/redis/rdm/conn_cache.go
@@ -2,8 +2,8 @@ package rdm
 
 import (
 	"fmt"
-	"mayfly-go/internal/common/consts"
 	"mayfly-go/internal/machine/mcm"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/cache"
 	"mayfly-go/pkg/logx"
 	"sync"
diff --git a/server/internal/sys/api/account.go b/server/internal/sys/api/account.go
index 8bb5dd13..250b293f 100644
--- a/server/internal/sys/api/account.go
+++ b/server/internal/sys/api/account.go
@@ -1,7 +1,7 @@
 package api
 
 import (
-	"mayfly-go/internal/common/utils"
+	"mayfly-go/internal/pkg/utils"
 	"mayfly-go/internal/sys/api/form"
 	"mayfly-go/internal/sys/api/vo"
 	"mayfly-go/internal/sys/application"
diff --git a/server/internal/sys/api/config.go b/server/internal/sys/api/config.go
index 2518bfd9..541cd548 100644
--- a/server/internal/sys/api/config.go
+++ b/server/internal/sys/api/config.go
@@ -1,12 +1,12 @@
 package api
 
 import (
+	"mayfly-go/internal/pkg/config"
 	"mayfly-go/internal/sys/api/form"
 	"mayfly-go/internal/sys/application"
 	"mayfly-go/internal/sys/domain/entity"
 	"mayfly-go/internal/sys/imsg"
 	"mayfly-go/pkg/biz"
-	"mayfly-go/pkg/config"
 	"mayfly-go/pkg/req"
 	"mayfly-go/pkg/utils/collx"
 )
diff --git a/server/internal/sys/application/resource.go b/server/internal/sys/application/resource.go
index e4da6075..f281533e 100644
--- a/server/internal/sys/application/resource.go
+++ b/server/internal/sys/application/resource.go
@@ -2,7 +2,7 @@ package application
 
 import (
 	"context"
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/internal/sys/application/dto"
 	"mayfly-go/internal/sys/domain/entity"
 	"mayfly-go/internal/sys/domain/repository"
diff --git a/server/internal/sys/domain/entity/account.go b/server/internal/sys/domain/entity/account.go
index bb649e11..1f28e119 100644
--- a/server/internal/sys/domain/entity/account.go
+++ b/server/internal/sys/domain/entity/account.go
@@ -2,7 +2,7 @@ package entity
 
 import (
 	"errors"
-	"mayfly-go/internal/common/utils"
+	"mayfly-go/internal/pkg/utils"
 	"mayfly-go/pkg/enumx"
 	"mayfly-go/pkg/model"
 	"time"
diff --git a/server/internal/sys/imsg/imsg.go b/server/internal/sys/imsg/imsg.go
index ee7cd189..69731de0 100644
--- a/server/internal/sys/imsg/imsg.go
+++ b/server/internal/sys/imsg/imsg.go
@@ -1,7 +1,7 @@
 package imsg
 
 import (
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/i18n"
 )
 
diff --git a/server/internal/tag/application/tag_tree.go b/server/internal/tag/application/tag_tree.go
index 107a651c..cd3b6407 100644
--- a/server/internal/tag/application/tag_tree.go
+++ b/server/internal/tag/application/tag_tree.go
@@ -3,7 +3,7 @@ package application
 import (
 	"context"
 	"fmt"
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/internal/tag/application/dto"
 	"mayfly-go/internal/tag/domain/entity"
 	"mayfly-go/internal/tag/domain/repository"
diff --git a/server/internal/tag/application/tag_tree_relate.go b/server/internal/tag/application/tag_tree_relate.go
index fcc2b402..d25d2773 100644
--- a/server/internal/tag/application/tag_tree_relate.go
+++ b/server/internal/tag/application/tag_tree_relate.go
@@ -2,7 +2,7 @@ package application
 
 import (
 	"context"
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/internal/tag/domain/entity"
 	"mayfly-go/internal/tag/domain/repository"
 	"mayfly-go/internal/tag/imsg"
diff --git a/server/internal/tag/domain/entity/resource_auth_cert.go b/server/internal/tag/domain/entity/resource_auth_cert.go
index a21d13b0..65123a77 100644
--- a/server/internal/tag/domain/entity/resource_auth_cert.go
+++ b/server/internal/tag/domain/entity/resource_auth_cert.go
@@ -2,7 +2,7 @@ package entity
 
 import (
 	"errors"
-	"mayfly-go/internal/common/utils"
+	"mayfly-go/internal/pkg/utils"
 	"mayfly-go/pkg/model"
 )
 
diff --git a/server/internal/tag/domain/entity/tag_tree.go b/server/internal/tag/domain/entity/tag_tree.go
index 0bc53b57..e6e0d08f 100644
--- a/server/internal/tag/domain/entity/tag_tree.go
+++ b/server/internal/tag/domain/entity/tag_tree.go
@@ -2,7 +2,7 @@ package entity
 
 import (
 	"fmt"
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/model"
 	"mayfly-go/pkg/utils/collx"
 	"strings"
diff --git a/server/internal/tag/imsg/imsg.go b/server/internal/tag/imsg/imsg.go
index 0ead8f7b..e6888eb0 100644
--- a/server/internal/tag/imsg/imsg.go
+++ b/server/internal/tag/imsg/imsg.go
@@ -1,7 +1,7 @@
 package imsg
 
 import (
-	"mayfly-go/internal/common/consts"
+	"mayfly-go/internal/pkg/consts"
 	"mayfly-go/pkg/i18n"
 )
 
diff --git a/server/main.go b/server/main.go
index f2938451..0aed622e 100644
--- a/server/main.go
+++ b/server/main.go
@@ -9,10 +9,10 @@ import (
 	_ "mayfly-go/internal/machine/init"
 	_ "mayfly-go/internal/mongo/init"
 	_ "mayfly-go/internal/msg/init"
+	"mayfly-go/internal/pkg/starter"
 	_ "mayfly-go/internal/redis/init"
 	_ "mayfly-go/internal/sys/init"
 	_ "mayfly-go/internal/tag/init"
-	"mayfly-go/pkg/starter"
 )
 
 func main() {
diff --git a/server/pkg/ioc/ioc.go b/server/pkg/ioc/ioc.go
index 7e911da5..6f4cb4f7 100644
--- a/server/pkg/ioc/ioc.go
+++ b/server/pkg/ioc/ioc.go
@@ -17,6 +17,7 @@ import (
 
 const (
 	InjectTag           = "inject"
+	InjectMethodPrefix  = "Inject"
 	ByTypeComponentName = "T" // 根据类型注入的组件名
 )
 
@@ -74,14 +75,13 @@ func (c *Container) Inject(obj any) error {
 
 // 对所有组件实例执行Inject。即为实例字段注入依赖的组件实例
 func (c *Container) InjectComponents() error {
-	componentsGroups := collx.ArraySplit[*Component](collx.MapValues(c.components), 5)
+	componentsGroups := collx.ArraySplit[*Component](collx.MapValues(c.components), 10)
 
 	ctx, cancel := context.WithCancel(context.Background())
 	defer cancel()
 	errGroup, _ := errgroup.WithContext(ctx)
 
 	for _, components := range componentsGroups {
-		components := components // 创建局部变量以在闭包中使用
 		errGroup.Go(func() error {
 			for _, v := range components {
 				if err := c.Inject(v.Value); err != nil {
@@ -165,7 +165,7 @@ func (c *Container) GetComponentsByType(fieldType reflect.Type) []*Component {
 	return components
 }
 
-// injectWithField 根据实例字段的inject:"xxx"或injectByType:""标签进行依赖注入
+// injectWithField 根据实例字段的inject:"xxx"标签进行依赖注入
 func (c *Container) injectWithField(context context.Context, objValue reflect.Value) error {
 	objValue = structx.Indirect(objValue)
 	objType := objValue.Type()
@@ -224,7 +224,7 @@ func (c *Container) injectByName(context context.Context, structType reflect.Typ
 		return fmt.Errorf("%s error: injection types are inconsistent(Expected type -> %s.%s, Component type -> %s.%s)", injectInfo, field.Type.PkgPath(), field.Type.Name(), indirectComponentType.PkgPath(), indirectComponentType.Name())
 	}
 
-	logx.DebugfContext(context, fmt.Sprintf("ioc field inject by name => [%s (%s) -> %s.%s#%s]", componentName, getComponentValueDesc(componentType), structType.PkgPath(), structType.Name(), field.Name))
+	logx.DebugfContext(context, "ioc field inject by name => [%s (%s) -> %s.%s#%s]", componentName, getComponentValueDesc(componentType), structType.PkgPath(), structType.Name(), field.Name)
 
 	if err := setFieldValue(fieldValue, component.Value); err != nil {
 		return fmt.Errorf("%s error: %s", injectInfo, err.Error())
@@ -244,7 +244,7 @@ func (c *Container) injectByType(context context.Context, structType reflect.Typ
 		return fmt.Errorf("%s error: %s", injectInfo, err.Error())
 	}
 
-	logx.DebugfContext(context, fmt.Sprintf("ioc field inject by type => [%s.%s (%s) -> %s.%s#%s]", fieldType.PkgPath(), fieldType.Name(), getComponentValueDesc(component.GetType()), structType.PkgPath(), structType.Name(), field.Name))
+	logx.DebugfContext(context, "ioc field inject by type => [%s.%s (%s) -> %s.%s#%s]", fieldType.PkgPath(), fieldType.Name(), getComponentValueDesc(component.GetType()), structType.PkgPath(), structType.Name(), field.Name)
 
 	if err := setFieldValue(fieldValue, component.Value); err != nil {
 		return fmt.Errorf("%s error: %s", injectInfo, err.Error())
@@ -261,8 +261,8 @@ func (c *Container) injectWithMethod(context context.Context, objValue reflect.V
 		method := objType.Method(i)
 
 		methodName := method.Name
-		// 不是以Inject开头的函数，则默认跳过
-		if !strings.HasPrefix(methodName, "Inject") {
+		// 不是以指定方法名前缀开头的函数，则默认跳过
+		if !strings.HasPrefix(methodName, InjectMethodPrefix) {
 			continue
 		}
 
diff --git a/server/pkg/req/permission_handler.go b/server/pkg/req/permission_handler.go
index 261ae516..62e4ea29 100644
--- a/server/pkg/req/permission_handler.go
+++ b/server/pkg/req/permission_handler.go
@@ -4,7 +4,6 @@ import (
 	"encoding/json"
 	"fmt"
 	"mayfly-go/pkg/cache"
-	"mayfly-go/pkg/config"
 	"mayfly-go/pkg/contextx"
 	"mayfly-go/pkg/errorx"
 	"mayfly-go/pkg/model"
@@ -107,7 +106,7 @@ type DefaultPermissionCodeRegistry struct {
 
 func (r *DefaultPermissionCodeRegistry) SaveCodes(userId uint64, codes []string) {
 	if r.cache == nil {
-		r.cache = cache.NewTimedCache(time.Minute*time.Duration(config.Conf.Jwt.ExpireTime), 5*time.Second)
+		r.cache = cache.NewTimedCache(time.Minute*time.Duration(jwtConf.ExpireTime), 5*time.Second)
 	}
 	r.cache.Put(fmt.Sprintf("%v", userId), codes)
 }
@@ -138,7 +137,7 @@ type RedisPermissionCodeRegistry struct {
 }
 
 func (r *RedisPermissionCodeRegistry) SaveCodes(userId uint64, codes []string) {
-	rediscli.Set(fmt.Sprintf("mayfly:%v:codes", userId), anyx.ToString(codes), time.Minute*time.Duration(config.Conf.Jwt.ExpireTime))
+	rediscli.Set(fmt.Sprintf("mayfly:%v:codes", userId), anyx.ToString(codes), time.Minute*time.Duration(jwtConf.ExpireTime))
 }
 
 func (r *RedisPermissionCodeRegistry) HasCode(userId uint64, code string) bool {
diff --git a/server/pkg/req/token.go b/server/pkg/req/token.go
index 15dd1b47..40374491 100644
--- a/server/pkg/req/token.go
+++ b/server/pkg/req/token.go
@@ -2,15 +2,33 @@ package req
 
 import (
 	"errors"
-	"mayfly-go/pkg/config"
+	"mayfly-go/pkg/utils/stringx"
 	"time"
 
 	"github.com/golang-jwt/jwt/v5"
 )
 
+// JwtConf jwt配置
+type JwtConf struct {
+	Key                    string
+	ExpireTime             uint64 // 过期时间，单位分钟
+	RefreshTokenExpireTime uint64 // 刷新token的过期时间，单位分钟
+}
+
+// 默认jwt配置
+var jwtConf = JwtConf{
+	Key:                    stringx.RandUUID(),
+	ExpireTime:             60,
+	RefreshTokenExpireTime: 360,
+}
+
+// SetJwtConf 设置jwt配置
+func SetJwtConf(conf JwtConf) {
+	jwtConf = conf
+}
+
 // 创建用户token
 func CreateToken(userId uint64, username string) (accessToken string, refreshToken string, err error) {
-	jwtConf := config.Conf.Jwt
 	now := time.Now()
 
 	// 带权限创建令牌
@@ -46,7 +64,7 @@ func ParseToken(tokenStr string) (uint64, string, error) {
 
 	// Parse token
 	token, err := jwt.Parse(tokenStr, func(token *jwt.Token) (any, error) {
-		return []byte(config.Conf.Jwt.Key), nil
+		return []byte(jwtConf.Key), nil
 	})
 	if err != nil || token == nil {
 		return 0, "", err
diff --git a/server/pkg/starter/web-server.go b/server/pkg/starter/web-server.go
deleted file mode 100644
index 5c0b3e43..00000000
--- a/server/pkg/starter/web-server.go
+++ /dev/null
@@ -1,66 +0,0 @@
-package starter
-
-import (
-	"context"
-	"errors"
-	"mayfly-go/initialize"
-	"mayfly-go/pkg/config"
-	"mayfly-go/pkg/i18n"
-	"mayfly-go/pkg/logx"
-	"mayfly-go/pkg/req"
-	"net/http"
-	"time"
-
-	sysapp "mayfly-go/internal/sys/application"
-
-	"github.com/gin-gonic/gin"
-)
-
-func runWebServer(ctx context.Context) {
-	// 设置gin日志输出器
-	logOut := logx.GetConfig().GetLogOut()
-	gin.DefaultErrorWriter = logOut
-	gin.DefaultWriter = logOut
-
-	// 权限处理器
-	req.UseBeforeHandlerInterceptor(req.PermissionHandler)
-	// 日志处理器
-	req.UseAfterHandlerInterceptor(req.LogHandler)
-	// 设置日志保存函数
-	req.SetSaveLogFunc(sysapp.GetSyslogApp().SaveFromReq)
-
-	i18n.SetLang(config.Conf.Server.Lang)
-
-	srv := http.Server{
-		Addr: config.Conf.Server.GetPort(),
-		// 注册路由
-		Handler: initialize.InitRouter(),
-	}
-
-	go func() {
-		<-ctx.Done()
-		logx.Info("Shutdown HTTP Server ...")
-		timeout, cancel := context.WithTimeout(context.Background(), 5*time.Second)
-		defer cancel()
-		err := srv.Shutdown(timeout)
-		if err != nil {
-			logx.Errorf("failed to Shutdown HTTP Server: %v", err)
-		}
-
-		initialize.Terminate()
-	}()
-
-	confSrv := config.Conf.Server
-	logx.Infof("Listening and serving HTTP on %s", srv.Addr+confSrv.ContextPath)
-	var err error
-	if confSrv.Tls != nil && confSrv.Tls.Enable {
-		err = srv.ListenAndServeTLS(confSrv.Tls.CertFile, confSrv.Tls.KeyFile)
-	} else {
-		err = srv.ListenAndServe()
-	}
-	if errors.Is(err, http.ErrServerClosed) {
-		logx.Info("HTTP Server Shutdown")
-	} else if err != nil {
-		logx.Errorf("Failed to Start HTTP Server: %v", err)
-	}
-}
diff --git a/server/pkg/validatorx/pattern.go b/server/pkg/validatorx/pattern.go
index 199ca173..6006a17a 100644
--- a/server/pkg/validatorx/pattern.go
+++ b/server/pkg/validatorx/pattern.go
@@ -14,13 +14,6 @@ var (
 	patternErrMsg map[string]string
 )
 
-// 注册自定义正则表达式校验规则
-func RegisterCustomPatterns() {
-	// 账号用户名校验
-	RegisterPattern("account_username", "^[a-zA-Z0-9_]{5,20}$", "只允许输入5-20位大小写字母、数字、下划线")
-	RegisterPattern("resource_code", "^[a-zA-Z0-9_\\-.:]{1,32}$", "只允许输入1-32位大小写字母、数字、_-.:")
-}
-
 // 注册自定义正则表达式
 func RegisterPattern(patternName string, regexpStr string, errMsg string) {
 	if regexpMap == nil {
diff --git a/server/pkg/validatorx/validatorx.go b/server/pkg/validatorx/validatorx.go
index 5788de7e..7f80f4b4 100644
--- a/server/pkg/validatorx/validatorx.go
+++ b/server/pkg/validatorx/validatorx.go
@@ -50,9 +50,6 @@ func Init() {
 
 	// 注册自定义校验器
 	validate.RegisterValidation(CustomPatternTagName, patternValidFunc)
-
-	// 注册自定义正则校验规则
-	RegisterCustomPatterns()
 }
 
 // Translate 翻译错误信息