From 80d4f18e8b133ebcf1b6eafb7529362569c80ffd Mon Sep 17 00:00:00 2001
From: zhangtao <9480807882@qq.com>
Date: Mon, 11 May 2026 15:46:18 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=8D=87=E7=BA=A7Vue=20SFC?=
 =?UTF-8?q?=E6=B7=B1=E5=BA=A6=E9=80=89=E6=8B=A9=E5=99=A8=E8=AF=AD=E6=B3=95?=
 =?UTF-8?q?=E4=B8=BA::v-deep?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

本次提交将项目中所有使用`::deep`的CSS深度选择器统一替换为Vue 3官方推荐的`::v-deep`语法，修复了旧版语法在新版本Vue生态中的兼容性问题，同时修正了部分组件的响应式表单定义方式，将`reactive`配合`Object.assign`的写法调整为更符合Vue 3组合式API规范的`ref`响应式状态写法，整体优化了代码的可维护性和兼容性。
---
 frontend/web/eslint.config.mjs                | 256 +++++++++---------
 .../layouts/fa-global-search/index.vue        |  16 +-
 .../layouts/fa-header-bar/index.vue           |  16 +-
 .../fa-header-bar/widget/FaUserMenu.vue       |   2 +-
 .../fa-menus/fa-horizontal-menu/index.vue     |   6 +-
 .../widget/HorizontalSubmenu.vue              |   2 +-
 .../layouts/fa-menus/fa-mixed-menu/index.vue  |   6 +-
 .../fa-menus/fa-sidebar-menu/style.scss       |   6 +-
 .../layouts/fa-screen-lock/index.vue          |   9 +-
 .../layouts/fa-settings-panel/style.scss      |   2 +-
 .../web/src/components/layouts/style.scss     |   6 +-
 .../components/media/fa-cutter-img/index.vue  |  22 +-
 .../src/components/modal/fa-dialog/index.vue  |   2 +-
 .../src/components/modal/fa-drawer/index.vue  |   2 +-
 .../components/others/fa-calendar/index.vue   |  18 +-
 .../others/fa-icon-select/index.vue           |   4 +-
 .../others/fa-markdown-renderer/index.vue     |  18 +-
 .../components/others/fa-menu-right/index.vue |   2 +-
 .../others/fa-table-select/index.vue          |   6 +-
 .../src/components/others/fa-upload/index.vue |   2 +-
 .../src/components/tables/fa-table/style.scss |  10 +-
 .../components/theme/fa-theme-svg/index.vue   |   2 +-
 .../components/views/fa-login/AuthTopBar.vue  |   8 +-
 frontend/web/src/views/current/profile.vue    |   2 +-
 .../components/ArticleDetailDrawer.vue        |  10 +-
 .../dashboard/console/modules/new-user.vue    |   2 +-
 frontend/web/src/views/dashboard/index.vue    |  14 +-
 .../src/views/dashboard/tutorial/index.vue    |   2 +-
 .../module_ai/chat/components/ChatInput.vue   |   4 +-
 .../module_ai/chat/components/ChatNavbar.vue  |   4 +-
 .../module_ai/chat/components/MessageItem.vue |  22 +-
 .../module_ai/chat/components/Sidebar.vue     |   4 +-
 .../web/src/views/module_ai/memory/index.vue  |  12 +-
 .../views/module_application/portal/index.vue |  16 +-
 .../src/views/module_example/demo/index.vue   |  18 +-
 .../src/views/module_example/demo01/index.vue |  20 +-
 .../gencode/components/CreateTableDialog.vue  |  10 +-
 .../gencode/components/GenBasicStep.vue       |  14 +-
 .../gencode/components/GencodeHelpPanel.vue   |   8 +-
 .../views/module_generator/gencode/index.vue  |   8 +-
 .../src/views/module_monitor/cache/index.vue  |   4 +-
 .../views/module_monitor/resource/index.vue   |   4 +-
 .../login/components/LoginAuthLinkRow.vue     |   4 +-
 .../login/components/LoginMobilePanel.vue     |   4 +-
 .../auth/login/components/LoginQrPanel.vue    |   2 +-
 .../views/module_system/auth/login/index.vue  |  30 +-
 .../src/views/module_system/dept/index.vue    |  20 +-
 .../dict/components/DataDrawer.vue            |  26 +-
 .../src/views/module_system/dict/index.vue    |  20 +-
 .../web/src/views/module_system/log/index.vue |   4 +-
 .../src/views/module_system/menu/index.vue    |  34 +--
 .../src/views/module_system/notice/index.vue  |  36 +--
 .../src/views/module_system/param/index.vue   |  16 +-
 .../views/module_system/position/index.vue    |  18 +-
 .../src/views/module_system/role/index.vue    |  18 +-
 .../src/views/module_system/tenant/index.vue  |  28 +-
 .../user/components/UserTableSelect.vue       |   4 +-
 .../src/views/module_system/user/index.vue    |  20 +-
 .../views/module_task/cronjob/job/index.vue   |   4 +-
 .../views/module_task/cronjob/node/index.vue  |  48 ++--
 .../workflow/components/EdgeConfigPanel.vue   |   6 +-
 .../workflow/components/NodeConfigPanel.vue   |  10 +-
 .../components/WorkflowDesignDrawer.vue       |  22 +-
 .../module_task/workflow/node-type/index.vue  |  36 +--
 64 files changed, 510 insertions(+), 501 deletions(-)

diff --git a/frontend/web/eslint.config.mjs b/frontend/web/eslint.config.mjs
index 87c36094..a626bdbf 100644
--- a/frontend/web/eslint.config.mjs
+++ b/frontend/web/eslint.config.mjs
@@ -1,99 +1,99 @@
 // ESLint 配置文件
-import fs from 'fs'
-import path, { dirname } from 'path'
-import { fileURLToPath } from 'url'
+import fs from "fs"
+import path, { dirname } from "path"
+import { fileURLToPath } from "url"
 
-import pluginJs from '@eslint/js'
-import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
-import pluginVue from 'eslint-plugin-vue'
-import globals from 'globals'
-import tseslint from 'typescript-eslint'
+import pluginJs from "@eslint/js"
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended"
+import pluginVue from "eslint-plugin-vue"
+import globals from "globals"
+import tseslint from "typescript-eslint"
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
 const autoImportConfig = JSON.parse(
-  fs.readFileSync(path.resolve(__dirname, '.auto-import.json'), 'utf-8')
+  fs.readFileSync(path.resolve(__dirname, ".auto-import.json"), "utf-8")
 )
 
 // Element Plus 组件全局配置
 const elementPlusComponents = {
-  ElInput: 'readonly',
-  ElSelect: 'readonly',
-  ElSwitch: 'readonly',
-  ElCascader: 'readonly',
-  ElInputNumber: 'readonly',
-  ElTimePicker: 'readonly',
-  ElTimeSelect: 'readonly',
-  ElDatePicker: 'readonly',
-  ElTreeSelect: 'readonly',
-  ElText: 'readonly',
-  ElRadioGroup: 'readonly',
-  ElCheckboxGroup: 'readonly',
-  ElOption: 'readonly',
-  ElRadio: 'readonly',
-  ElCheckbox: 'readonly',
-  ElInputTag: 'readonly',
-  ElForm: 'readonly',
-  ElFormItem: 'readonly',
-  ElTable: 'readonly',
-  ElTableColumn: 'readonly',
-  ElButton: 'readonly',
-  ElDialog: 'readonly',
-  ElPagination: 'readonly',
-  ElMessage: 'readonly',
-  ElMessageBox: 'readonly',
-  ElNotification: 'readonly',
-  ElTree: 'readonly',
-  ElDropdown: 'readonly',
-  ElDropdownMenu: 'readonly',
-  ElDropdownItem: 'readonly',
-  ElAvatar: 'readonly',
-  ElBadge: 'readonly',
-  ElCard: 'readonly',
-  ElCol: 'readonly',
-  ElRow: 'readonly',
-  ElContainer: 'readonly',
-  ElHeader: 'readonly',
-  ElAside: 'readonly',
-  ElMain: 'readonly',
-  ElFooter: 'readonly',
-  ElLink: 'readonly',
-  ElDivider: 'readonly',
-  ElImage: 'readonly',
-  ElProgress: 'readonly',
-  ElSkeleton: 'readonly',
-  ElSlider: 'readonly',
-  ElSwitch: 'readonly',
-  ElTag: 'readonly',
-  ElTooltip: 'readonly',
-  ElPopover: 'readonly',
-  ElPopconfirm: 'readonly',
-  ElDrawer: 'readonly',
-  ElAlert: 'readonly',
-  ElLoading: 'readonly',
+  ElInput: "readonly",
+  ElSelect: "readonly",
+  ElSwitch: "readonly",
+  ElCascader: "readonly",
+  ElInputNumber: "readonly",
+  ElTimePicker: "readonly",
+  ElTimeSelect: "readonly",
+  ElDatePicker: "readonly",
+  ElTreeSelect: "readonly",
+  ElText: "readonly",
+  ElRadioGroup: "readonly",
+  ElCheckboxGroup: "readonly",
+  ElOption: "readonly",
+  ElRadio: "readonly",
+  ElCheckbox: "readonly",
+  ElInputTag: "readonly",
+  ElForm: "readonly",
+  ElFormItem: "readonly",
+  ElTable: "readonly",
+  ElTableColumn: "readonly",
+  ElButton: "readonly",
+  ElDialog: "readonly",
+  ElPagination: "readonly",
+  ElMessage: "readonly",
+  ElMessageBox: "readonly",
+  ElNotification: "readonly",
+  ElTree: "readonly",
+  ElDropdown: "readonly",
+  ElDropdownMenu: "readonly",
+  ElDropdownItem: "readonly",
+  ElAvatar: "readonly",
+  ElBadge: "readonly",
+  ElCard: "readonly",
+  ElCol: "readonly",
+  ElRow: "readonly",
+  ElContainer: "readonly",
+  ElHeader: "readonly",
+  ElAside: "readonly",
+  ElMain: "readonly",
+  ElFooter: "readonly",
+  ElLink: "readonly",
+  ElDivider: "readonly",
+  ElImage: "readonly",
+  ElProgress: "readonly",
+  ElSkeleton: "readonly",
+  ElSlider: "readonly",
+  ElSwitch: "readonly",
+  ElTag: "readonly",
+  ElTooltip: "readonly",
+  ElPopover: "readonly",
+  ElPopconfirm: "readonly",
+  ElDrawer: "readonly",
+  ElAlert: "readonly",
+  ElLoading: "readonly",
 }
 
 export default [
   // 忽略文件配置
   {
     ignores: [
-      'node_modules',
-      'dist',
-      'public',
-      '.vscode/**',
-      'src/assets/**',
-      'src/utils/console.ts',
-      '**/*.min.*',
-      '**/auto-imports.d.ts',
-      '**/components.d.ts',
-      '**/types/**/*.d.ts',
+      "node_modules",
+      "dist",
+      "public",
+      ".vscode/**",
+      "src/assets/**",
+      "src/utils/console.ts",
+      "**/*.min.*",
+      "**/auto-imports.d.ts",
+      "**/components.d.ts",
+      "**/types/**/*.d.ts",
     ],
   },
 
   // 基础配置
   {
-    files: ['**/*.{js,mjs,cjs,ts,tsx,vue}'],
+    files: ["**/*.{js,mjs,cjs,ts,tsx,vue}"],
   },
   {
     languageOptions: {
@@ -106,85 +106,85 @@ export default [
   },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
-  ...pluginVue.configs['flat/essential'],
+  ...pluginVue.configs["flat/essential"],
 
   // 全局配置
   {
-    files: ['**/*.{js,mjs,cjs,ts,tsx,vue}'],
+    files: ["**/*.{js,mjs,cjs,ts,tsx,vue}"],
 
     languageOptions: {
       globals: {
         ...autoImportConfig.globals,
-        Api: 'readonly',
+        Api: "readonly",
         ...elementPlusComponents,
         // 全局类型定义
-        PageQuery: 'readonly',
-        PageResult: 'readonly',
-        UserListItem: 'readonly',
-        UserSearchParams: 'readonly',
-        RoleListItem: 'readonly',
-        RoleSearchParams: 'readonly',
-        OptionType: 'readonly',
-        ApiResponse: 'readonly',
-        ExcelResult: 'readonly',
-        CommonType: 'readonly',
-        updatorType: 'readonly',
-        creatorType: 'readonly',
-        AppSettings: 'readonly',
-        __APP_INFO__: 'readonly',
-        UploadFilePath: 'readonly',
+        PageQuery: "readonly",
+        PageResult: "readonly",
+        UserListItem: "readonly",
+        UserSearchParams: "readonly",
+        RoleListItem: "readonly",
+        RoleSearchParams: "readonly",
+        OptionType: "readonly",
+        ApiResponse: "readonly",
+        ExcelResult: "readonly",
+        CommonType: "readonly",
+        updatorType: "readonly",
+        creatorType: "readonly",
+        AppSettings: "readonly",
+        __APP_INFO__: "readonly",
+        UploadFilePath: "readonly",
       },
     },
     rules: {
       // 代码风格
-      quotes: ['error', 'single'],
-      semi: ['error', 'never'],
-      'no-var': 'error',
-      'prefer-const': 'error',
-      'object-shorthand': 'error',
+      quotes: ["error", "single"],
+      semi: ["error", "never"],
+      "no-var": "error",
+      "prefer-const": "error",
+      "object-shorthand": "error",
 
       // 最佳实践
-      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-      'eqeqeq': 'off',
-      'no-multi-spaces': 'error',
-      'no-multiple-empty-lines': ['warn', { max: 1 }],
-      'no-unexpected-multiline': 'error',
+      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+      "eqeqeq": "off",
+      "no-multi-spaces": "error",
+      "no-multiple-empty-lines": ["warn", { max: 1 }],
+      "no-unexpected-multiline": "error",
 
       // TypeScript 规则
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/ban-ts-comment': 'off',
-      '@typescript-eslint/no-empty-function': 'off',
-      '@typescript-eslint/no-empty-object-type': 'off',
-      '@typescript-eslint/no-non-null-assertion': 'off',
-      '@typescript-eslint/no-unused-vars': 'warn',
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-empty-function": "off",
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-unused-vars": "warn",
 
       // Vue 规则
-      'vue/multi-word-component-names': 'off',
-      'vue/no-v-html': 'off',
-      'vue/require-default-prop': 'off',
-      'vue/require-explicit-emits': 'error',
-      'vue/no-unused-vars': 'error',
-      'vue/no-mutating-props': 'off',
-      'vue/valid-v-for': 'warn',
-      'vue/no-template-shadow': 'warn',
-      'vue/return-in-computed-property': 'warn',
-      'vue/block-order': ['error', { order: ['template', 'script', 'style'] }],
-      'vue/html-self-closing': [
-        'error',
+      "vue/multi-word-component-names": "off",
+      "vue/no-v-html": "off",
+      "vue/require-default-prop": "off",
+      "vue/require-explicit-emits": "error",
+      "vue/no-unused-vars": "error",
+      "vue/no-mutating-props": "off",
+      "vue/valid-v-for": "warn",
+      "vue/no-template-shadow": "warn",
+      "vue/return-in-computed-property": "warn",
+      "vue/block-order": ["error", { order: ["template", "script", "style"] }],
+      "vue/html-self-closing": [
+        "error",
         {
-          html: { void: 'always', normal: 'never', component: 'always' },
-          svg: 'always',
-          math: 'always',
+          html: { void: "always", normal: "never", component: "always" },
+          svg: "always",
+          math: "always",
         },
       ],
-      'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+      "vue/component-name-in-template-casing": ["error", "PascalCase"],
     },
   },
 
   // Pin TypeScript project root so @typescript-eslint/parser resolves tsconfig consistently.
   {
-    files: ['**/*.{ts,tsx,mts,cts}'],
+    files: ["**/*.{ts,tsx,mts,cts}"],
     languageOptions: {
       parserOptions: {
         tsconfigRootDir: __dirname,
@@ -194,7 +194,7 @@ export default [
 
   // Vue 文件特定配置
   {
-    files: ['**/*.vue'],
+    files: ["**/*.vue"],
     languageOptions: {
       parserOptions: {
         parser: tseslint.parser,
@@ -205,4 +205,4 @@ export default [
 
   // prettier 配置
   eslintPluginPrettierRecommended,
-]
+];
diff --git a/frontend/web/src/components/layouts/fa-global-search/index.vue b/frontend/web/src/components/layouts/fa-global-search/index.vue
index 876c514d..c1181258 100644
--- a/frontend/web/src/components/layouts/fa-global-search/index.vue
+++ b/frontend/web/src/components/layouts/fa-global-search/index.vue
@@ -367,27 +367,27 @@ const highlightOnHoverHistory = (index: number) => {
 </script>
 <style lang="scss" scoped>
 .layout-search {
-  ::deep(.search-modal) {
+  ::v-deep(.search-modal) {
     background-color: rgb(0 0 0 / 20%);
   }
 
-  ::deep(.el-dialog__body) {
+  ::v-deep(.el-dialog__body) {
     padding: 5px 0 0 !important;
   }
 
-  ::deep(.el-dialog__header) {
+  ::v-deep(.el-dialog__header) {
     padding: 0;
   }
 
   .el-input {
-    ::deep(.el-input__wrapper) {
+    ::v-deep(.el-input__wrapper) {
       background-color: var(--fa-gray-200);
       border: 1px solid var(--default-border-dashed);
       border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
       box-shadow: none;
     }
 
-    ::deep(.el-input__inner) {
+    ::v-deep(.el-input__inner) {
       color: var(--fa-gray-800) !important;
     }
   }
@@ -395,18 +395,18 @@ const highlightOnHoverHistory = (index: number) => {
 
 .dark .layout-search {
   .el-input {
-    ::deep(.el-input__wrapper) {
+    ::v-deep(.el-input__wrapper) {
       background-color: #333;
       border: 1px solid #4c4d50;
     }
   }
 
-  ::deep(.search-modal) {
+  ::v-deep(.search-modal) {
     background-color: rgb(23 23 26 / 60%);
     backdrop-filter: none;
   }
 
-  ::deep(.el-dialog) {
+  ::v-deep(.el-dialog) {
     background-color: #252526;
   }
 }
diff --git a/frontend/web/src/components/layouts/fa-header-bar/index.vue b/frontend/web/src/components/layouts/fa-header-bar/index.vue
index 82179246..b181232d 100755
--- a/frontend/web/src/components/layouts/fa-header-bar/index.vue
+++ b/frontend/web/src/components/layouts/fa-header-bar/index.vue
@@ -463,35 +463,35 @@ const openChat = (): void => {
 }
 
 /* Hover animation classes */
-.refresh-btn:hover ::deep(.fa-svg-icon) {
+.refresh-btn:hover ::v-deep(.fa-svg-icon) {
   animation: rotate180 0.5s;
 }
 
-.language-btn:hover ::deep(.fa-svg-icon) {
+.language-btn:hover ::v-deep(.fa-svg-icon) {
   animation: moveUp 0.4s;
 }
 
-.setting-btn:hover ::deep(.fa-svg-icon) {
+.setting-btn:hover ::v-deep(.fa-svg-icon) {
   animation: rotate180 0.5s;
 }
 
-.full-screen-btn:hover ::deep(.fa-svg-icon) {
+.full-screen-btn:hover ::v-deep(.fa-svg-icon) {
   animation: expand 0.6s forwards;
 }
 
-::deep(.size-select-btn:hover .fa-svg-icon) {
+::v-deep(.size-select-btn:hover .fa-svg-icon) {
   animation: expand 0.6s forwards;
 }
 
-.exit-full-screen-btn:hover ::deep(.fa-svg-icon) {
+.exit-full-screen-btn:hover ::v-deep(.fa-svg-icon) {
   animation: shrink 0.6s forwards;
 }
 
-.notice-button:hover ::deep(.fa-svg-icon) {
+.notice-button:hover ::v-deep(.fa-svg-icon) {
   animation: shake 0.5s ease-in-out;
 }
 
-.chat-button:hover ::deep(.fa-svg-icon) {
+.chat-button:hover ::v-deep(.fa-svg-icon) {
   animation: shake 0.5s ease-in-out;
 }
 
diff --git a/frontend/web/src/components/layouts/fa-header-bar/widget/FaUserMenu.vue b/frontend/web/src/components/layouts/fa-header-bar/widget/FaUserMenu.vue
index 198c51ed..19ccdf8b 100644
--- a/frontend/web/src/components/layouts/fa-header-bar/widget/FaUserMenu.vue
+++ b/frontend/web/src/components/layouts/fa-header-bar/widget/FaUserMenu.vue
@@ -247,7 +247,7 @@ function closeUserMenu(): void {
 }
 
 /* ElPopover 基于 Tooltip：触发层默认 inline-block，与顶栏 flex 图标中线对齐 */
-.fa-user-menu ::deep(.el-tooltip__trigger) {
+.fa-user-menu .el-tooltip__trigger {
   display: inline-flex !important;
   align-items: center;
   line-height: 1;
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/index.vue b/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/index.vue
index 0df8f3dc..d0c7896e 100644
--- a/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/index.vue
+++ b/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/index.vue
@@ -92,18 +92,18 @@ const filterMenuItems = (items: AppRouteRecord[]): AppRouteRecord[] => {
 
 <style scoped>
 /* Remove el-menu bottom border */
-::deep(.el-menu) {
+::v-deep(.el-menu) {
   border-bottom: none !important;
 }
 
 /* Remove default styles for first-level menu items */
-::deep(.el-menu-item[tabindex="0"]) {
+::v-deep(.el-menu-item[tabindex="0"]) {
   background-color: transparent !important;
   border: none !important;
 }
 
 /* Remove bottom border from submenu titles */
-::deep(.el-menu--horizontal .el-sub-menu__title) {
+::v-deep(.el-menu--horizontal .el-sub-menu__title) {
   padding: 0 30px 0 10px !important;
   border: 0 !important;
 }
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/widget/HorizontalSubmenu.vue b/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/widget/HorizontalSubmenu.vue
index 25a70669..719e788e 100644
--- a/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/widget/HorizontalSubmenu.vue
+++ b/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/widget/HorizontalSubmenu.vue
@@ -106,7 +106,7 @@ const closeMenu = () => {
 </script>
 
 <style scoped>
-::deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
+::v-deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
   right: 10px !important;
 }
 </style>
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-mixed-menu/index.vue b/frontend/web/src/components/layouts/fa-menus/fa-mixed-menu/index.vue
index 9092a096..5d6588ee 100644
--- a/frontend/web/src/components/layouts/fa-menus/fa-mixed-menu/index.vue
+++ b/frontend/web/src/components/layouts/fa-menus/fa-mixed-menu/index.vue
@@ -248,13 +248,13 @@ onMounted(initScrollState);
 </style>
 
 <style scoped>
-::deep(.el-scrollbar__bar.is-horizontal) {
+::v-deep(.el-scrollbar__bar.is-horizontal) {
   bottom: 5px;
   display: none;
   height: 2px;
 }
 
-::deep(.scrollbar-wrapper) {
+::v-deep(.scrollbar-wrapper) {
   flex: 1;
   min-width: 0;
   margin: 0 50px 0 30px;
@@ -273,7 +273,7 @@ onMounted(initScrollState);
 }
 
 @media (width <= 1440px) {
-  ::deep(.scrollbar-wrapper) {
+  ::v-deep(.scrollbar-wrapper) {
     margin: 0 45px;
   }
 }
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/style.scss b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/style.scss
index b7c8319e..8b6c241e 100755
--- a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/style.scss
+++ b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/style.scss
@@ -10,11 +10,11 @@
   }
 
   // 自定义滚动条宽度
-  ::deep(.el-scrollbar__bar.is-vertical) {
+  :deep(.el-scrollbar__bar.is-vertical) {
     width: 4px;
   }
 
-  ::deep(.el-scrollbar__thumb) {
+  :deep(.el-scrollbar__thumb) {
     right: -2px;
     background-color: #ccc;
     border-radius: 2px;
@@ -240,7 +240,7 @@
   .layout-sidebar {
     border-right: 1px solid rgb(255 255 255 / 13%);
 
-    ::deep(.el-scrollbar__thumb) {
+    :deep(.el-scrollbar__thumb) {
       background-color: #777;
     }
 
diff --git a/frontend/web/src/components/layouts/fa-screen-lock/index.vue b/frontend/web/src/components/layouts/fa-screen-lock/index.vue
index 81fca2c9..2bd5cef9 100644
--- a/frontend/web/src/components/layouts/fa-screen-lock/index.vue
+++ b/frontend/web/src/components/layouts/fa-screen-lock/index.vue
@@ -203,7 +203,7 @@ const unlockLoading = ref(false);
 
 const formRef = ref<FormInstance>();
 
-const formData = reactive({
+const formData = ref({
   password: "",
 });
 
@@ -388,11 +388,14 @@ const handleLock = async () => {
 
   await formRef.value.validate((valid, fields) => {
     if (valid) {
-      const encryptedPassword = CryptoJS.AES.encrypt(formData.password, ENCRYPT_KEY).toString();
+      const encryptedPassword = CryptoJS.AES.encrypt(
+        formData.value.password,
+        ENCRYPT_KEY
+      ).toString();
       userStore.setLockStatus(true);
       userStore.setLockPassword(encryptedPassword);
       visible.value = false;
-      formData.password = "";
+      formData.value.password = "";
       showClock.value = true;
       unlockPwd.value = "";
       unlockErrMsg.value = false;
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/style.scss b/frontend/web/src/components/layouts/fa-settings-panel/style.scss
index 25f559b4..0e01a3fe 100755
--- a/frontend/web/src/components/layouts/fa-settings-panel/style.scss
+++ b/frontend/web/src/components/layouts/fa-settings-panel/style.scss
@@ -80,7 +80,7 @@
 }
 
 // 去除火狐浏览器滚动条
-::deep(.el-drawer__body) {
+:deep(.el-drawer__body) {
   scrollbar-width: none;
 }
 
diff --git a/frontend/web/src/components/layouts/style.scss b/frontend/web/src/components/layouts/style.scss
index 8ace858b..b5c1ec20 100644
--- a/frontend/web/src/components/layouts/style.scss
+++ b/frontend/web/src/components/layouts/style.scss
@@ -33,7 +33,7 @@
       padding: 20px;
       overflow: auto;
 
-      ::deep(.layout-content) {
+      :deep(.layout-content) {
         box-sizing: border-box;
         width: 100%;
         min-width: 0;
@@ -80,7 +80,7 @@
       overflow: visible;
 
       #app-content {
-        ::deep(.layout-content) {
+        :deep(.layout-content) {
           width: calc(100% - 40px);
         }
       }
@@ -92,7 +92,7 @@
   .app-layout {
     #app-main {
       #app-content {
-        ::deep(.layout-content) {
+        :deep(.layout-content) {
           width: calc(100% - 30px);
         }
       }
diff --git a/frontend/web/src/components/media/fa-cutter-img/index.vue b/frontend/web/src/components/media/fa-cutter-img/index.vue
index 99478ae6..689a9aff 100644
--- a/frontend/web/src/components/media/fa-cutter-img/index.vue
+++ b/frontend/web/src/components/media/fa-cutter-img/index.vue
@@ -283,11 +283,11 @@ function downloadImg() {
     }
   }
 
-  ::deep(.toolBoxControl) {
+  ::v-deep(.toolBoxControl) {
     z-index: 100;
   }
 
-  ::deep(.dockMain) {
+  ::v-deep(.dockMain) {
     right: 0;
     bottom: -40px;
     left: 0;
@@ -297,15 +297,15 @@ function downloadImg() {
     opacity: 1;
   }
 
-  ::deep(.copyright) {
+  ::v-deep(.copyright) {
     display: none !important;
   }
 
-  ::deep(.i-dialog-footer) {
+  ::v-deep(.i-dialog-footer) {
     margin-top: 60px !important;
   }
 
-  ::deep(.dockBtn) {
+  ::v-deep(.dockBtn) {
     height: 26px;
     padding: 0 10px;
     font-size: 12px;
@@ -315,31 +315,31 @@ function downloadImg() {
     border: 1px solid var(--el-color-primary-light-4) !important;
   }
 
-  ::deep(.dockBtnScrollBar) {
+  ::v-deep(.dockBtnScrollBar) {
     margin: 0 10px 0 6px;
     background-color: var(--el-color-primary-light-1);
   }
 
-  ::deep(.scrollBarControl) {
+  ::v-deep(.scrollBarControl) {
     border-color: var(--el-color-primary);
   }
 
-  ::deep(.closeIcon) {
+  ::v-deep(.closeIcon) {
     line-height: 15px !important;
   }
 }
 
 .dark {
   .cutter-container {
-    ::deep(.toolBox) {
+    ::v-deep(.toolBox) {
       border: transparent;
     }
 
-    ::deep(.dialogMain) {
+    ::v-deep(.dialogMain) {
       background-color: transparent !important;
     }
 
-    ::deep(.i-dialog-footer) {
+    ::v-deep(.i-dialog-footer) {
       .btn {
         background-color: var(--el-color-primary) !important;
         border: transparent;
diff --git a/frontend/web/src/components/modal/fa-dialog/index.vue b/frontend/web/src/components/modal/fa-dialog/index.vue
index 3a12952f..29eb6b4d 100644
--- a/frontend/web/src/components/modal/fa-dialog/index.vue
+++ b/frontend/web/src/components/modal/fa-dialog/index.vue
@@ -119,7 +119,7 @@ const dialogAttrs = computed(() => {
   align-items: center;
   margin-left: auto;
 
-  ::deep(.core-overlay-icon-btn.el-button) {
+  ::v-deep(.core-overlay-icon-btn.el-button) {
     min-width: 32px;
     padding: 6px;
     border-radius: var(--el-border-radius-base);
diff --git a/frontend/web/src/components/modal/fa-drawer/index.vue b/frontend/web/src/components/modal/fa-drawer/index.vue
index 3953b9c4..10e28943 100644
--- a/frontend/web/src/components/modal/fa-drawer/index.vue
+++ b/frontend/web/src/components/modal/fa-drawer/index.vue
@@ -99,7 +99,7 @@ const drawerAttrs = computed(() => {
   align-items: center;
   margin-left: auto;
 
-  ::deep(.core-overlay-icon-btn.el-button) {
+  ::v-deep(.core-overlay-icon-btn.el-button) {
     min-width: 32px;
     padding: 6px;
     border-radius: var(--el-border-radius-base);
diff --git a/frontend/web/src/components/others/fa-calendar/index.vue b/frontend/web/src/components/others/fa-calendar/index.vue
index be6f70f7..a7461010 100644
--- a/frontend/web/src/components/others/fa-calendar/index.vue
+++ b/frontend/web/src/components/others/fa-calendar/index.vue
@@ -205,45 +205,45 @@ const handleDeleteEvent = () => {
   min-width: 0;
 }
 
-::deep(.el-calendar__header) {
+::v-deep(.el-calendar__header) {
   padding: 6px 4px;
   border-bottom: none;
 }
 
-::deep(.el-calendar__title) {
+::v-deep(.el-calendar__title) {
   font-size: 14px;
   font-weight: 600;
 }
 
-::deep(.el-calendar__header .el-button) {
+::v-deep(.el-calendar__header .el-button) {
   padding: 4px 8px;
 }
 
-::deep(.el-calendar__body) {
+::v-deep(.el-calendar__body) {
   padding: 2px 0 4px;
 }
 
-::deep(.el-calendar-table thead th) {
+::v-deep(.el-calendar-table thead th) {
   padding: 4px 0;
   font-size: 11px;
   font-weight: 500;
 }
 
-::deep(.is-selected) {
+::v-deep(.is-selected) {
   background-color: var(--el-color-warning-light-9) !important;
 }
 
-::deep(.el-calendar-day) {
+::v-deep(.el-calendar-day) {
   height: auto;
   min-height: 3rem;
   padding: 0;
 }
 
-::deep(.el-calendar-day:hover) {
+::v-deep(.el-calendar-day:hover) {
   background-color: transparent !important;
 }
 
-::deep(.el-dialog__body) {
+::v-deep(.el-dialog__body) {
   padding-top: 20px;
 }
 </style>
diff --git a/frontend/web/src/components/others/fa-icon-select/index.vue b/frontend/web/src/components/others/fa-icon-select/index.vue
index 8ab9aea0..a27f94dd 100644
--- a/frontend/web/src/components/others/fa-icon-select/index.vue
+++ b/frontend/web/src/components/others/fa-icon-select/index.vue
@@ -181,8 +181,8 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.reference ::deep(.el-input__wrapper),
-.reference ::deep(.el-input__inner) {
+.reference :deep(.el-input__wrapper),
+.reference :deep(.el-input__inner) {
   cursor: pointer;
 }
 
diff --git a/frontend/web/src/components/others/fa-markdown-renderer/index.vue b/frontend/web/src/components/others/fa-markdown-renderer/index.vue
index 48294ab5..b29a0519 100644
--- a/frontend/web/src/components/others/fa-markdown-renderer/index.vue
+++ b/frontend/web/src/components/others/fa-markdown-renderer/index.vue
@@ -70,7 +70,7 @@ const renderedContent = computed(() => {
   color: var(--el-text-color-primary);
   word-wrap: break-word;
 
-  ::deep(pre) {
+  ::v-deep(pre) {
     padding: 12px;
     margin: 12px 0;
     overflow-x: auto;
@@ -83,7 +83,7 @@ const renderedContent = computed(() => {
     }
   }
 
-  ::deep(code) {
+  ::v-deep(code) {
     padding: 2px 6px;
     font-family: "Courier New", Courier, monospace;
     font-size: 13px;
@@ -91,21 +91,21 @@ const renderedContent = computed(() => {
     border-radius: 3px;
   }
 
-  ::deep(p) {
+  ::v-deep(p) {
     margin: 8px 0;
   }
 
-  ::deep(ul),
-  ::deep(ol) {
+  ::v-deep(ul),
+  ::v-deep(ol) {
     padding-left: 24px;
     margin: 8px 0;
   }
 
-  ::deep(li) {
+  ::v-deep(li) {
     margin: 4px 0;
   }
 
-  ::deep(a) {
+  ::v-deep(a) {
     color: var(--el-color-primary);
     text-decoration: none;
 
@@ -114,14 +114,14 @@ const renderedContent = computed(() => {
     }
   }
 
-  ::deep(blockquote) {
+  ::v-deep(blockquote) {
     padding: 8px 16px;
     margin: 12px 0;
     background: var(--el-fill-color-light);
     border-left: 4px solid var(--el-color-primary);
   }
 
-  ::deep(table) {
+  ::v-deep(table) {
     width: 100%;
     margin: 12px 0;
     border-collapse: collapse;
diff --git a/frontend/web/src/components/others/fa-menu-right/index.vue b/frontend/web/src/components/others/fa-menu-right/index.vue
index 458b2e65..0a766412 100644
--- a/frontend/web/src/components/others/fa-menu-right/index.vue
+++ b/frontend/web/src/components/others/fa-menu-right/index.vue
@@ -384,7 +384,7 @@ defineExpose({
 }
 
 .menu-item.is-disabled i:not(.submenu-arrow),
-.menu-item.is-disabled ::deep(.fa-svg-icon) {
+.menu-item.is-disabled ::v-deep(.fa-svg-icon) {
   color: var(--el-text-color-disabled) !important;
 }
 
diff --git a/frontend/web/src/components/others/fa-table-select/index.vue b/frontend/web/src/components/others/fa-table-select/index.vue
index af008326..3dd36f82 100644
--- a/frontend/web/src/components/others/fa-table-select/index.vue
+++ b/frontend/web/src/components/others/fa-table-select/index.vue
@@ -352,8 +352,8 @@ const popoverContentRef = ref();
 </script>
 
 <style scoped lang="scss">
-.reference ::deep(.el-input__wrapper),
-.reference ::deep(.el-input__inner) {
+.reference ::v-deep(.el-input__wrapper),
+.reference ::v-deep(.el-input__inner) {
   cursor: pointer;
 }
 
@@ -363,7 +363,7 @@ const popoverContentRef = ref();
   margin-top: 6px;
 }
 // 隐藏全选按钮
-.radio ::deep(.el-table__header th.el-table__cell:nth-child(1) .el-checkbox) {
+.radio ::v-deep(.el-table__header th.el-table__cell:nth-child(1) .el-checkbox) {
   visibility: hidden;
 }
 </style>
diff --git a/frontend/web/src/components/others/fa-upload/index.vue b/frontend/web/src/components/others/fa-upload/index.vue
index 108ddcf7..34991428 100644
--- a/frontend/web/src/components/others/fa-upload/index.vue
+++ b/frontend/web/src/components/others/fa-upload/index.vue
@@ -464,7 +464,7 @@ const onError = (error: any) => {
   }
 }
 
-::deep(.el-upload--picture-card) {
+::v-deep(.el-upload--picture-card) {
   position: relative;
   width: v-bind("props.style.width ?? '150px'");
   height: v-bind("props.style.height ?? '150px'");
diff --git a/frontend/web/src/components/tables/fa-table/style.scss b/frontend/web/src/components/tables/fa-table/style.scss
index 00b6daff..c8062ef0 100644
--- a/frontend/web/src/components/tables/fa-table/style.scss
+++ b/frontend/web/src/components/tables/fa-table/style.scss
@@ -7,7 +7,7 @@
     margin-top: 10px;
   }
 
-  ::deep(.el-loading-mask) {
+  :deep(.el-loading-mask) {
     z-index: 100;
     background-color: var(--default-box-color) !important;
   }
@@ -23,7 +23,7 @@
 
   // 空状态垂直居中
   &.is-empty {
-    ::deep(.el-scrollbar__wrap) {
+    :deep(.el-scrollbar__wrap) {
       display: flex;
     }
   }
@@ -32,7 +32,7 @@
     display: flex;
     margin-top: 13px;
 
-    ::deep(.el-select) {
+    :deep(.el-select) {
       width: 102px !important;
     }
 
@@ -51,7 +51,7 @@
 
     // 自定义分页组件样式
     &.custom-pagination {
-      ::deep(.el-pagination) {
+      :deep(.el-pagination) {
         .btn-prev,
         .btn-next {
           background-color: transparent;
@@ -89,7 +89,7 @@
 
 // 移动端分页
 @media (width <= 640px) {
-  ::deep(.el-pagination) {
+  :deep(.el-pagination) {
     display: flex;
     flex-wrap: wrap;
     gap: 15px 0;
diff --git a/frontend/web/src/components/theme/fa-theme-svg/index.vue b/frontend/web/src/components/theme/fa-theme-svg/index.vue
index 8561eafe..83cab0f0 100644
--- a/frontend/web/src/components/theme/fa-theme-svg/index.vue
+++ b/frontend/web/src/components/theme/fa-theme-svg/index.vue
@@ -88,7 +88,7 @@ watchEffect(() => {
     width: 100%;
     height: 100%;
 
-    ::deep(svg) {
+    ::v-deep(svg) {
       width: 100%;
       height: 100%;
     }
diff --git a/frontend/web/src/components/views/fa-login/AuthTopBar.vue b/frontend/web/src/components/views/fa-login/AuthTopBar.vue
index 9ff3445f..b40dd0f1 100644
--- a/frontend/web/src/components/views/fa-login/AuthTopBar.vue
+++ b/frontend/web/src/components/views/fa-login/AuthTopBar.vue
@@ -256,7 +256,7 @@ const changeThemeColor = (color: string) => {
   transform: translateY(-2px);
 }
 
-.auth-top-bar__action:hover ::deep(.fa-svg-icon) {
+.auth-top-bar__action:hover ::v-deep(.fa-svg-icon) {
   color: var(--el-color-primary);
 }
 
@@ -314,15 +314,15 @@ const changeThemeColor = (color: string) => {
 }
 
 /* 调色盘：图标颜色与当前主题主色一致（含单独悬浮、整块调色区悬浮） */
-.palette-btn ::deep(.fa-svg-icon) {
+.palette-btn ::v-deep(.fa-svg-icon) {
   color: v-bind("themeColorForCss");
 }
 
-.auth-top-bar__action.palette-btn:hover ::deep(.fa-svg-icon) {
+.auth-top-bar__action.palette-btn:hover ::v-deep(.fa-svg-icon) {
   color: v-bind("themeColorForCss");
 }
 
-.color-picker-expandable:hover .palette-btn ::deep(.fa-svg-icon) {
+.color-picker-expandable:hover .palette-btn ::v-deep(.fa-svg-icon) {
   color: v-bind("themeColorForCss");
 }
 </style>
diff --git a/frontend/web/src/views/current/profile.vue b/frontend/web/src/views/current/profile.vue
index 45093b9b..030c02b2 100644
--- a/frontend/web/src/views/current/profile.vue
+++ b/frontend/web/src/views/current/profile.vue
@@ -609,7 +609,7 @@ onMounted(async () => {
   bottom: 0;
   z-index: 2;
 
-  ::deep(.el-upload) {
+  ::v-deep(.el-upload) {
     display: inline-flex;
   }
 
diff --git a/frontend/web/src/views/dashboard/article/components/ArticleDetailDrawer.vue b/frontend/web/src/views/dashboard/article/components/ArticleDetailDrawer.vue
index af423121..618fe8a1 100644
--- a/frontend/web/src/views/dashboard/article/components/ArticleDetailDrawer.vue
+++ b/frontend/web/src/views/dashboard/article/components/ArticleDetailDrawer.vue
@@ -127,12 +127,12 @@ watch(
 .article-detail-markdown {
   margin-top: 8px;
 
-  ::deep(img) {
+  ::v-deep(img) {
     width: 100%;
     border: 1px solid var(--fa-gray-200);
   }
 
-  ::deep(pre) {
+  ::v-deep(pre) {
     position: relative;
 
     &:hover {
@@ -152,11 +152,11 @@ watch(
     }
   }
 
-  ::deep(.code-wrapper) {
+  ::v-deep(.code-wrapper) {
     overflow-x: auto;
   }
 
-  ::deep(.line-number) {
+  ::v-deep(.line-number) {
     position: sticky;
     left: 0;
     z-index: 2;
@@ -169,7 +169,7 @@ watch(
     text-align: center;
   }
 
-  ::deep(.copy-button) {
+  ::v-deep(.copy-button) {
     position: absolute;
     top: 6px;
     right: 6px;
diff --git a/frontend/web/src/views/dashboard/console/modules/new-user.vue b/frontend/web/src/views/dashboard/console/modules/new-user.vue
index 48c8e736..1194f69c 100755
--- a/frontend/web/src/views/dashboard/console/modules/new-user.vue
+++ b/frontend/web/src/views/dashboard/console/modules/new-user.vue
@@ -164,7 +164,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .fa-card {
-  ::deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+  ::v-deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
     color: var(--el-color-primary) !important;
     background: transparent !important;
   }
diff --git a/frontend/web/src/views/dashboard/index.vue b/frontend/web/src/views/dashboard/index.vue
index 6db021f8..7edf200e 100644
--- a/frontend/web/src/views/dashboard/index.vue
+++ b/frontend/web/src/views/dashboard/index.vue
@@ -727,13 +727,13 @@ const currentUser = {
   border: 1px solid var(--el-border-color-lighter);
   border-radius: var(--workplace-radius);
 
-  ::deep(.el-card__header) {
+  ::v-deep(.el-card__header) {
     border-bottom-color: var(--el-border-color-extra-light);
   }
 }
 
 .workplace-calendar-card {
-  ::deep(.el-card__body) {
+  ::v-deep(.el-card__body) {
     padding: 8px 10px 10px;
   }
 }
@@ -756,7 +756,7 @@ const currentUser = {
 
 /* —— 顶栏 —— */
 .workplace-hero-card {
-  ::deep(.el-card__body) {
+  ::v-deep(.el-card__body) {
     padding: 20px 22px;
   }
 }
@@ -841,7 +841,7 @@ const currentUser = {
 }
 
 .workplace-modules-card {
-  ::deep(.el-card__body) {
+  ::v-deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -857,7 +857,7 @@ const currentUser = {
 }
 
 .workplace-bookmarks-card {
-  ::deep(.el-card__body) {
+  ::v-deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -937,7 +937,7 @@ const currentUser = {
 }
 
 .workplace-section-card {
-  ::deep(.el-card__body) {
+  ::v-deep(.el-card__body) {
     padding: 12px 18px 18px;
   }
 }
@@ -976,7 +976,7 @@ const currentUser = {
   width: 100%;
   min-width: 0;
 
-  ::deep(.el-card__body) {
+  ::v-deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
diff --git a/frontend/web/src/views/dashboard/tutorial/index.vue b/frontend/web/src/views/dashboard/tutorial/index.vue
index 934b0ee9..45de5887 100644
--- a/frontend/web/src/views/dashboard/tutorial/index.vue
+++ b/frontend/web/src/views/dashboard/tutorial/index.vue
@@ -1012,7 +1012,7 @@ function handleAnchorClick(ev: MouseEvent) {
   &__tabs {
     width: 100%;
 
-    ::deep(.el-tab-pane) {
+    ::v-deep(.el-tab-pane) {
       box-sizing: border-box;
     }
   }
diff --git a/frontend/web/src/views/module_ai/chat/components/ChatInput.vue b/frontend/web/src/views/module_ai/chat/components/ChatInput.vue
index 05dc8899..2fc8a4ce 100644
--- a/frontend/web/src/views/module_ai/chat/components/ChatInput.vue
+++ b/frontend/web/src/views/module_ai/chat/components/ChatInput.vue
@@ -225,7 +225,7 @@ defineExpose({
         flex: 1;
         min-width: 0;
 
-        ::deep(.el-textarea__inner) {
+        ::v-deep(.el-textarea__inner) {
           padding: 0;
           line-height: 1.6;
           color: var(--el-text-color-primary);
@@ -235,7 +235,7 @@ defineExpose({
           box-shadow: none;
         }
 
-        ::deep(.el-textarea) {
+        ::v-deep(.el-textarea) {
           padding: 0;
         }
       }
diff --git a/frontend/web/src/views/module_ai/chat/components/ChatNavbar.vue b/frontend/web/src/views/module_ai/chat/components/ChatNavbar.vue
index 2a78c2de..9d6cba44 100644
--- a/frontend/web/src/views/module_ai/chat/components/ChatNavbar.vue
+++ b/frontend/web/src/views/module_ai/chat/components/ChatNavbar.vue
@@ -145,7 +145,7 @@ const toggleSidebar = () => {
     align-items: center;
 
     /* EP 相邻按钮自带 margin-left，叠在 flex gap 上会导致间距忽大忽小 */
-    ::deep(.el-button) {
+    ::v-deep(.el-button) {
       margin: 0;
     }
 
@@ -159,7 +159,7 @@ const toggleSidebar = () => {
       font-size: 14px;
       line-height: 1;
 
-      ::deep(.el-tag__content) {
+      ::v-deep(.el-tag__content) {
         display: inline-flex;
         gap: 6px;
         align-items: center;
diff --git a/frontend/web/src/views/module_ai/chat/components/MessageItem.vue b/frontend/web/src/views/module_ai/chat/components/MessageItem.vue
index a83beb43..ba9c713f 100644
--- a/frontend/web/src/views/module_ai/chat/components/MessageItem.vue
+++ b/frontend/web/src/views/module_ai/chat/components/MessageItem.vue
@@ -371,7 +371,7 @@ const formatFileSize = (bytes: number): string => {
           }
         }
 
-        ::deep(pre) {
+        ::v-deep(pre) {
           padding: 12px;
           margin: 12px 0;
           overflow-x: auto;
@@ -384,7 +384,7 @@ const formatFileSize = (bytes: number): string => {
           }
         }
 
-        ::deep(code) {
+        ::v-deep(code) {
           padding: 2px 6px;
           font-family: "Courier New", Courier, monospace;
           font-size: 13px;
@@ -392,21 +392,21 @@ const formatFileSize = (bytes: number): string => {
           border-radius: 3px;
         }
 
-        ::deep(p) {
+        ::v-deep(p) {
           margin: 8px 0;
         }
 
-        ::deep(ul),
-        ::deep(ol) {
+        ::v-deep(ul),
+        ::v-deep(ol) {
           padding-left: 24px;
           margin: 8px 0;
         }
 
-        ::deep(li) {
+        ::v-deep(li) {
           margin: 4px 0;
         }
 
-        ::deep(a) {
+        ::v-deep(a) {
           color: var(--el-color-primary);
           text-decoration: none;
 
@@ -415,14 +415,14 @@ const formatFileSize = (bytes: number): string => {
           }
         }
 
-        ::deep(blockquote) {
+        ::v-deep(blockquote) {
           padding: 8px 16px;
           margin: 12px 0;
           background: var(--el-fill-color-light);
           border-left: 4px solid var(--el-color-primary);
         }
 
-        ::deep(table) {
+        ::v-deep(table) {
           width: 100%;
           margin: 12px 0;
           border-collapse: collapse;
@@ -501,11 +501,11 @@ const formatFileSize = (bytes: number): string => {
           background: linear-gradient(transparent, var(--el-color-primary-light-9));
         }
 
-        ::deep(pre) {
+        ::v-deep(pre) {
           border: 1px solid var(--el-border-color-lighter);
         }
 
-        ::deep(code:not(pre code)) {
+        ::v-deep(code:not(pre code)) {
           border: 1px solid var(--el-border-color-lighter);
         }
       }
diff --git a/frontend/web/src/views/module_ai/chat/components/Sidebar.vue b/frontend/web/src/views/module_ai/chat/components/Sidebar.vue
index fe1011b5..d78c6da1 100644
--- a/frontend/web/src/views/module_ai/chat/components/Sidebar.vue
+++ b/frontend/web/src/views/module_ai/chat/components/Sidebar.vue
@@ -400,7 +400,7 @@ defineExpose({
       .search-section {
         margin-bottom: 16px;
 
-        ::deep(.el-input__wrapper) {
+        ::v-deep(.el-input__wrapper) {
           border-radius: 20px;
           box-shadow: 0 0 0 1px var(--el-border-color) inset;
           transition: all 0.2s ease;
@@ -414,7 +414,7 @@ defineExpose({
           }
         }
 
-        ::deep(.el-input__inner) {
+        ::v-deep(.el-input__inner) {
           font-size: 13px;
         }
       }
diff --git a/frontend/web/src/views/module_ai/memory/index.vue b/frontend/web/src/views/module_ai/memory/index.vue
index a61db6b6..54169bcc 100644
--- a/frontend/web/src/views/module_ai/memory/index.vue
+++ b/frontend/web/src/views/module_ai/memory/index.vue
@@ -422,7 +422,7 @@ const {
   },
 });
 
-const formData = reactive({
+const formData = ref({
   id: undefined as string | undefined,
   title: "",
 });
@@ -486,7 +486,7 @@ async function handleOpenDialog(type: "create" | "detail", id?: string) {
     }
   } else {
     dialogVisible.title = "新增会话";
-    formData.id = undefined;
+    formData.value.id = undefined;
   }
   memoryFormRenderKey.value += 1;
   dialogVisible.visible = true;
@@ -560,7 +560,7 @@ async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
     try {
-      await AiChatAPI.createSession({ title: formData.title });
+      await AiChatAPI.createSession({ title: formData.value.title });
       dialogVisible.visible = false;
       await resetForm();
       await refreshCreate();
@@ -625,17 +625,17 @@ pre {
   border-radius: 4px;
 }
 
-::deep(.session-detail-dialog .el-dialog__body) {
+::v-deep(.session-detail-dialog .el-dialog__body) {
   max-height: 60vh;
   padding: 20px;
   overflow-y: auto;
 }
 
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/module_application/portal/index.vue b/frontend/web/src/views/module_application/portal/index.vue
index 21d04103..ac535223 100644
--- a/frontend/web/src/views/module_application/portal/index.vue
+++ b/frontend/web/src/views/module_application/portal/index.vue
@@ -343,7 +343,7 @@ const {
   },
 });
 
-const formData = reactive<ApplicationForm>({
+const formData = ref<ApplicationForm>({
   name: "",
   access_url: "",
   icon_url: "",
@@ -471,10 +471,10 @@ async function handleSubmit() {
     await formRef.value?.validate();
 
     if (dialogType.value === "create") {
-      await ApplicationAPI.createApp(formData);
+      await ApplicationAPI.createApp(formData.value);
       await refreshCreate();
     } else {
-      await ApplicationAPI.updateApp(currentApp.value!.id!, formData);
+      await ApplicationAPI.updateApp(currentApp.value!.id!, formData.value);
       await refreshUpdate();
     }
 
@@ -532,12 +532,12 @@ async function handleSubmit() {
     opacity: 0.55;
   }
 
-  ::deep(.el-card__header) {
+  ::v-deep(.el-card__header) {
     padding: 14px 14px 12px;
     border-bottom: none;
   }
 
-  ::deep(.el-card__body) {
+  ::v-deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -546,7 +546,7 @@ async function handleSubmit() {
     padding: 12px 14px;
   }
 
-  ::deep(.el-card__footer) {
+  ::v-deep(.el-card__footer) {
     padding: 10px 14px 14px;
     margin-top: auto;
   }
@@ -634,11 +634,11 @@ async function handleSubmit() {
   }
 }
 
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/module_example/demo/index.vue b/frontend/web/src/views/module_example/demo/index.vue
index f8c7a0c1..36c2b4e1 100644
--- a/frontend/web/src/views/module_example/demo/index.vue
+++ b/frontend/web/src/views/module_example/demo/index.vue
@@ -497,7 +497,7 @@ const dialogVisible = reactive({
 
 const detailFormData = ref<DemoTable>({});
 
-const formData = reactive<DemoForm>({
+const formData = ref<DemoForm>({
   id: undefined,
   name: "",
   status: "0",
@@ -620,15 +620,15 @@ async function openEditDialog(type: "add" | "edit", row?: DemoTable) {
   dialogVisible.type = type === "add" ? "create" : "update";
   if (type === "add") {
     dialogVisible.title = "新增示例";
-    Object.assign(formData, initialFormData);
-    formData.id = undefined;
+    Object.assign(formData.value, initialFormData);
+    formData.value.id = undefined;
     metadataList.value = [];
   } else if (row?.id) {
     dialogVisible.title = "修改";
     const response = await DemoAPI.getDemoDetail(row.id);
-    Object.assign(formData, response.data.data);
-    if (formData.i && typeof formData.i === "object") {
-      metadataList.value = Object.entries(formData.i).map(([key, value]) => ({
+    Object.assign(formData.value, response.data.data);
+    if (formData.value.i && typeof formData.value.i === "object") {
+      metadataList.value = Object.entries(formData.value.i).map(([key, value]) => ({
         key,
         value: String(value),
       }));
@@ -644,7 +644,7 @@ async function resetForm() {
     dataFormRef.value.resetFields();
     dataFormRef.value.clearValidate();
   }
-  Object.assign(formData, initialFormData);
+  Object.assign(formData.value, initialFormData);
   metadataList.value = [];
 }
 
@@ -656,7 +656,7 @@ async function handleCloseDialog() {
 async function handleSubmit() {
   dataFormRef.value.validate(async (valid: boolean) => {
     if (!valid) return;
-    const submitData = { ...formData };
+    const submitData = { ...formData.value };
     if (metadataList.value.length > 0) {
       const metadataObj: Record<string, string> = {};
       metadataList.value.forEach((item) => {
@@ -668,7 +668,7 @@ async function handleSubmit() {
     } else {
       submitData.i = undefined;
     }
-    const id = formData.id;
+    const id = formData.value.id;
     try {
       if (id) {
         await DemoAPI.updateDemo(id, { id, ...submitData });
diff --git a/frontend/web/src/views/module_example/demo01/index.vue b/frontend/web/src/views/module_example/demo01/index.vue
index 35939f7e..fcf65a3c 100644
--- a/frontend/web/src/views/module_example/demo01/index.vue
+++ b/frontend/web/src/views/module_example/demo01/index.vue
@@ -368,7 +368,7 @@ const dialogVisible = reactive({
 
 const detailFormData = ref<Demo01Table>({});
 
-const formData = reactive<Demo01Form>({
+const formData = ref<Demo01Form>({
   id: undefined,
   name: "",
   status: "0",
@@ -499,12 +499,12 @@ async function openEditDialog(type: "add" | "edit", row?: Demo01Table) {
   dialogVisible.type = type === "add" ? "create" : "update";
   if (type === "add") {
     dialogVisible.title = "新增示例01";
-    Object.assign(formData, initialFormData);
-    formData.id = undefined;
+    Object.assign(formData.value, initialFormData);
+    formData.value.id = undefined;
   } else if (row?.id) {
     dialogVisible.title = "修改";
     const response = await Demo01API.getDemo01Detail(row.id);
-    Object.assign(formData, response.data.data);
+    Object.assign(formData.value, response.data.data);
   }
   demo01FormRenderKey.value += 1;
   dialogVisible.visible = true;
@@ -513,7 +513,7 @@ async function openEditDialog(type: "add" | "edit", row?: Demo01Table) {
 async function resetForm() {
   dataFormRef.value?.ref?.resetFields();
   dataFormRef.value?.ref?.clearValidate();
-  Object.assign(formData, initialFormData);
+  Object.assign(formData.value, initialFormData);
 }
 
 async function handleCloseDialog() {
@@ -524,13 +524,13 @@ async function handleCloseDialog() {
 async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
-    const id = formData.id;
+    const id = formData.value.id;
     try {
       if (id) {
-        await Demo01API.updateDemo01(id, { id, ...formData });
+        await Demo01API.updateDemo01(id, { id, ...formData.value });
         await refreshUpdate();
       } else {
-        await Demo01API.createDemo01(formData);
+        await Demo01API.createDemo01(formData.value);
         await refreshCreate();
       }
       dialogVisible.visible = false;
@@ -627,11 +627,11 @@ function openExportModal() {
 </script>
 
 <style scoped lang="scss">
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue b/frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue
index 0f6afff4..b5d7aa95 100644
--- a/frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue
@@ -426,7 +426,7 @@ function handleCancel() {
   position: relative;
 }
 
-.visual-pane ::deep(.el-textarea__inner) {
+.visual-pane ::v-deep(.el-textarea__inner) {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
@@ -437,20 +437,20 @@ function handleCancel() {
 /* 表结构：描述列表表格化，标签列对齐、内容区可伸缩 */
 .visual-structure {
   .visual-desc {
-    ::deep(.el-descriptions__label) {
+    ::v-deep(.el-descriptions__label) {
       width: 108px;
       vertical-align: middle;
     }
 
-    ::deep(.el-descriptions__cell) {
+    ::v-deep(.el-descriptions__cell) {
       vertical-align: middle;
     }
 
-    ::deep(.el-descriptions__content) {
+    ::v-deep(.el-descriptions__content) {
       min-width: 0;
     }
 
-    ::deep(.el-descriptions__title) {
+    ::v-deep(.el-descriptions__title) {
       margin-bottom: 8px;
     }
   }
diff --git a/frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue b/frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue
index 8b9af147..5c52f85b 100644
--- a/frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue
@@ -352,15 +352,15 @@ onUnmounted(() => {
   min-width: 0;
 }
 
-.gen-basic-step ::deep(.el-col) {
+.gen-basic-step ::v-deep(.el-col) {
   min-width: 0;
 }
 
-.gen-basic-step ::deep(.el-form-item__content) {
+.gen-basic-step ::v-deep(.el-form-item__content) {
   min-width: 0;
 }
 
-.gen-basic-step ::deep(.el-input-group) {
+.gen-basic-step ::v-deep(.el-input-group) {
   width: 100%;
   min-width: 0;
   max-width: 100%;
@@ -383,11 +383,11 @@ onUnmounted(() => {
   border: 1px solid var(--el-border-color-lighter);
 }
 
-.master-sub-card ::deep(.el-card__header) {
+.master-sub-card ::v-deep(.el-card__header) {
   padding: 8px 10px;
 }
 
-.master-sub-card ::deep(.el-card__body) {
+.master-sub-card ::v-deep(.el-card__body) {
   padding: 10px;
 }
 
@@ -396,7 +396,7 @@ onUnmounted(() => {
   border: 1px solid var(--el-border-color-lighter);
 }
 
-.gen-form-card ::deep(.el-card__body) {
+.gen-form-card ::v-deep(.el-card__body) {
   overflow-x: hidden;
 }
 
@@ -425,7 +425,7 @@ onUnmounted(() => {
   border-bottom: 1px solid var(--el-border-color-lighter);
 }
 
-.gen-echo-card ::deep(.el-card__body) {
+.gen-echo-card ::v-deep(.el-card__body) {
   padding: 6px 8px;
 }
 
diff --git a/frontend/web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue b/frontend/web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue
index 92054f87..a9b0e2dd 100644
--- a/frontend/web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue
@@ -66,18 +66,18 @@ const rows = [
   border-radius: var(--el-border-radius-base);
 }
 
-.gencode-help-collapse ::deep(.el-collapse-item__header) {
+.gencode-help-collapse ::v-deep(.el-collapse-item__header) {
   padding: 8px 12px;
   font-size: 13px;
   font-weight: 500;
   background: var(--el-fill-color-light);
 }
 
-.gencode-help-collapse ::deep(.el-collapse-item__wrap) {
+.gencode-help-collapse ::v-deep(.el-collapse-item__wrap) {
   border-top: 1px solid var(--el-border-color-lighter);
 }
 
-.gencode-help-collapse ::deep(.el-collapse-item__content) {
+.gencode-help-collapse ::v-deep(.el-collapse-item__content) {
   padding: 10px 12px 12px;
 }
 
@@ -91,7 +91,7 @@ const rows = [
   flex-shrink: 0;
 }
 
-.gencode-rules-table ::deep(.el-table__cell) {
+.gencode-rules-table ::v-deep(.el-table__cell) {
   font-size: 12px;
 }
 
diff --git a/frontend/web/src/views/module_generator/gencode/index.vue b/frontend/web/src/views/module_generator/gencode/index.vue
index 48b097f0..71c77e1d 100644
--- a/frontend/web/src/views/module_generator/gencode/index.vue
+++ b/frontend/web/src/views/module_generator/gencode/index.vue
@@ -90,7 +90,7 @@
     <ImportDbTableDialog
       ref="importDbDialogRef"
       v-model="importVisible"
-      v-model:query="importQueryFormData"
+      v-model:query="formData"
       :data="dbTableList"
       :total="importTotal"
       :confirm-loading="importLoading"
@@ -216,7 +216,7 @@ const tableNames = ref<string[]>([]);
 // 导入弹窗专用状态
 const importLoading = ref(false);
 const importTotal = ref<number>(0);
-const importQueryFormData = ref<GenTablePageQuery>({
+const formData = ref<GenTablePageQuery>({
   page_no: 1,
   page_size: 10,
   table_name: undefined,
@@ -1009,7 +1009,7 @@ async function handleImportTable(): Promise<void> {
 async function getDbList(): Promise<void> {
   importLoading.value = true;
   try {
-    const res = await GencodeAPI.listDbTable(importQueryFormData.value);
+    const res = await GencodeAPI.listDbTable(formData.value);
     if (res.data && res.data.data) {
       dbTableList.value = res.data.data.items;
       importTotal.value = res.data.data.total;
@@ -1023,7 +1023,7 @@ async function getDbList(): Promise<void> {
 
 /** 导入弹窗搜索按钮操作 */
 async function handleImportQuery(): Promise<void> {
-  importQueryFormData.value.page_no = 1;
+  formData.value.page_no = 1;
   await getDbList();
 }
 
diff --git a/frontend/web/src/views/module_monitor/cache/index.vue b/frontend/web/src/views/module_monitor/cache/index.vue
index 46deaa81..9ad49061 100644
--- a/frontend/web/src/views/module_monitor/cache/index.vue
+++ b/frontend/web/src/views/module_monitor/cache/index.vue
@@ -567,7 +567,7 @@ onUnmounted(() => {
   flex-direction: column;
   min-height: 0;
 
-  ::deep(.el-card__body) {
+  ::v-deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -607,7 +607,7 @@ onUnmounted(() => {
   flex-direction: column;
   min-height: 0;
 
-  ::deep(.el-card__body) {
+  ::v-deep(.el-card__body) {
     display: flex;
     flex: 1;
     flex-direction: column;
diff --git a/frontend/web/src/views/module_monitor/resource/index.vue b/frontend/web/src/views/module_monitor/resource/index.vue
index 46e80f9a..a251f313 100644
--- a/frontend/web/src/views/module_monitor/resource/index.vue
+++ b/frontend/web/src/views/module_monitor/resource/index.vue
@@ -633,14 +633,14 @@ async function handleBatchDelete() {
 </script>
 
 <style lang="scss" scoped>
-.resource-monitor-page ::deep(.resource-monitor-card.el-card > .el-card__body) {
+.resource-monitor-page ::v-deep(.resource-monitor-card.el-card > .el-card__body) {
   display: flex;
   flex: 1;
   flex-direction: column;
   min-height: 0;
 }
 
-::deep(.el-breadcrumb__item) {
+::v-deep(.el-breadcrumb__item) {
   &.is-link {
     color: var(--el-color-primary);
     cursor: pointer;
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue b/frontend/web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue
index babf2e87..39c345c8 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue
+++ b/frontend/web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue
@@ -22,8 +22,8 @@ defineEmits<{ link: [] }>();
 
 <style scoped lang="scss">
 .login-auth-link-row {
-  ::deep(.el-link),
-  ::deep(.el-link__inner) {
+  ::v-deep(.el-link),
+  ::v-deep(.el-link__inner) {
     line-height: inherit;
   }
 }
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginMobilePanel.vue b/frontend/web/src/views/module_system/auth/login/components/LoginMobilePanel.vue
index 177d4190..4af259a3 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginMobilePanel.vue
+++ b/frontend/web/src/views/module_system/auth/login/components/LoginMobilePanel.vue
@@ -246,11 +246,11 @@ html.dark {
 
 /* EP 全局规则：相邻 .el-button { margin-left: 12px }，纵向叠放时仍会命中，导致第二颗按钮横向错位 */
 .login-mobile-actions {
-  ::deep(.el-button + .el-button) {
+  ::v-deep(.el-button + .el-button) {
     margin-left: 0 !important;
   }
 
-  ::deep(.el-button) {
+  ::v-deep(.el-button) {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginQrPanel.vue b/frontend/web/src/views/module_system/auth/login/components/LoginQrPanel.vue
index 702dc496..27539275 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginQrPanel.vue
+++ b/frontend/web/src/views/module_system/auth/login/components/LoginQrPanel.vue
@@ -78,7 +78,7 @@ const qrPayload = computed(() => {
 
 /* EP：相邻按钮横向间距；单列返回按钮无需处理 */
 .login-mobile-actions {
-  ::deep(.el-button) {
+  ::v-deep(.el-button) {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
diff --git a/frontend/web/src/views/module_system/auth/login/index.vue b/frontend/web/src/views/module_system/auth/login/index.vue
index 1f1111d2..efa36b09 100755
--- a/frontend/web/src/views/module_system/auth/login/index.vue
+++ b/frontend/web/src/views/module_system/auth/login/index.vue
@@ -661,68 +661,68 @@ async function submitForget() {
 
 <style lang="scss" scoped>
 .login-page-panel {
-  ::deep(.btn) {
+  ::v-deep(.btn) {
     border-radius: 8px;
   }
 }
 
 html.dark .login-page-panel {
-  ::deep(.text-g-800) {
+  ::v-deep(.text-g-800) {
     color: rgb(255 255 255 / 78%) !important;
   }
 }
 
 /* 副标题与表单块间距（login-page-form 在子组件内，须 :deep） */
-::deep(.login-page-form) {
+::v-deep(.login-page-form) {
   margin-top: 1rem;
 }
 
-::deep(.login-page-form .el-form-item) {
+::v-deep(.login-page-form .el-form-item) {
   margin-bottom: 1.1rem;
 }
 
-::deep(.el-select__wrapper) {
+::v-deep(.el-select__wrapper) {
   min-height: 42px !important;
 }
 
 /* 仅账号登录底部「手机号 / 扫码」双列按钮需要 42px；手机号登录页的返回钮与主按钮同为 h-11，勿全局压高度 */
-::deep(.login-secondary-actions .login-secondary-btn) {
+::v-deep(.login-secondary-actions .login-secondary-btn) {
   height: 42px;
   border-radius: 8px;
 }
 
 html.dark {
-  ::deep(.login-page-form .el-input__wrapper) {
+  ::v-deep(.login-page-form .el-input__wrapper) {
     background-color: rgb(255 255 255 / 6%) !important;
     box-shadow: 0 0 0 1px rgb(255 255 255 / 10%) inset !important;
   }
 
-  ::deep(.login-page-form .el-input__inner) {
+  ::v-deep(.login-page-form .el-input__inner) {
     color: rgb(255 255 255 / 92%);
   }
 
-  ::deep(.login-page-form .el-input__inner::placeholder) {
+  ::v-deep(.login-page-form .el-input__inner::placeholder) {
     color: rgb(255 255 255 / 35%);
   }
 
-  ::deep(.login-page-form .el-select .el-select__wrapper) {
+  ::v-deep(.login-page-form .el-select .el-select__wrapper) {
     background-color: rgb(255 255 255 / 6%) !important;
     box-shadow: 0 0 0 1px rgb(255 255 255 / 10%) inset !important;
   }
 
-  ::deep(.login-page-form .el-select__placeholder) {
+  ::v-deep(.login-page-form .el-select__placeholder) {
     color: rgb(255 255 255 / 40%);
   }
 
-  ::deep(.login-page-form .el-select__selected-item) {
+  ::v-deep(.login-page-form .el-select__selected-item) {
     color: rgb(255 255 255 / 92%);
   }
 
-  ::deep(.login-remember .el-checkbox__label) {
+  ::v-deep(.login-remember .el-checkbox__label) {
     color: rgb(255 255 255 / 65%);
   }
 
-  ::deep(.login-secondary-btn) {
+  ::v-deep(.login-secondary-btn) {
     color: rgb(255 255 255 / 85%) !important;
     background: transparent !important;
     border-color: rgb(255 255 255 / 22%) !important;
@@ -735,7 +735,7 @@ html.dark {
     }
   }
 
-  ::deep(.login-secondary-actions .login-secondary-btn) {
+  ::v-deep(.login-secondary-actions .login-secondary-btn) {
     height: 42px;
   }
 }
diff --git a/frontend/web/src/views/module_system/dept/index.vue b/frontend/web/src/views/module_system/dept/index.vue
index 95c80438..6bd7b24f 100644
--- a/frontend/web/src/views/module_system/dept/index.vue
+++ b/frontend/web/src/views/module_system/dept/index.vue
@@ -362,7 +362,7 @@ const { columnChecks, columns } = useTableColumns<DeptTable>(() => [
 
 const detailFormData = ref<DeptTable>({ code: "" });
 
-const formData = reactive<DeptForm>({
+const formData = ref<DeptForm>({
   id: undefined,
   name: undefined,
   code: "",
@@ -515,10 +515,10 @@ async function handleOpenDialog(
     }
   } else {
     dialogVisible.title = "新增部门";
-    Object.assign(formData, initialFormData);
-    formData.id = undefined;
+    Object.assign(formData.value, initialFormData);
+    formData.value.id = undefined;
     if (parentId) {
-      formData.parent_id = parentId;
+      formData.value.parent_id = parentId;
     }
   }
   deptFormRenderKey.value += 1;
@@ -528,12 +528,12 @@ async function handleOpenDialog(
 async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
-    const id = formData.id;
+    const id = formData.value.id;
     try {
       if (id) {
-        await DeptAPI.updateDept(id, { id, ...formData });
+        await DeptAPI.updateDept(id, { id, ...formData.value });
       } else {
-        await DeptAPI.createDept(formData);
+        await DeptAPI.createDept(formData.value);
       }
       dialogVisible.visible = false;
       await resetForm();
@@ -614,15 +614,15 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-::deep(.dept-table-actions .inline-flex) {
+::v-deep(.dept-table-actions .inline-flex) {
   vertical-align: middle;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/dict/components/DataDrawer.vue b/frontend/web/src/views/module_system/dict/components/DataDrawer.vue
index 01d9a91d..645e58ac 100644
--- a/frontend/web/src/views/module_system/dict/components/DataDrawer.vue
+++ b/frontend/web/src/views/module_system/dict/components/DataDrawer.vue
@@ -541,7 +541,7 @@ const dialogVisible = reactive({
 
 const detailFormData = ref<DictDataTable>({});
 
-const formData = reactive<DictDataForm>({
+const formData = ref<DictDataForm>({
   id: undefined,
   dict_sort: 1,
   dict_label: "",
@@ -715,11 +715,11 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     }
   } else {
     dialogVisible.title = "新增字典数据";
-    Object.assign(formData, initialFormData);
-    formData.dict_type = props.dictType;
-    formData.dict_type_id = props.dictTypeId;
-    formData.status = "0";
-    formData.id = undefined;
+    Object.assign(formData.value, initialFormData);
+    formData.value.dict_type = props.dictType;
+    formData.value.dict_type_id = props.dictTypeId;
+    formData.value.status = "0";
+    formData.value.id = undefined;
   }
   dictDataFormRenderKey.value += 1;
   dialogVisible.visible = true;
@@ -728,20 +728,20 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
 async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
-    const id = formData.id;
+    const id = formData.value.id;
     try {
       if (id) {
-        await DictAPI.updateDictData(id, { id, ...formData });
+        await DictAPI.updateDictData(id, { id, ...formData.value });
         await refreshUpdate();
       } else {
-        await DictAPI.createDictData(formData);
+        await DictAPI.createDictData(formData.value);
         await refreshCreate();
       }
       dialogVisible.visible = false;
       await resetForm();
       dictStore.clearDictData();
-      if (formData.dict_type) {
-        await dictStore.getDict([formData.dict_type]);
+      if (formData.value.dict_type) {
+        await dictStore.getDict([formData.value.dict_type]);
       }
     } catch (error: unknown) {
       console.error(error);
@@ -890,11 +890,11 @@ function openExportModal() {
   border-color: var(--el-border-color-lighter);
 }
 
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/dict/index.vue b/frontend/web/src/views/module_system/dict/index.vue
index 4fc38dde..b6a19a9f 100644
--- a/frontend/web/src/views/module_system/dict/index.vue
+++ b/frontend/web/src/views/module_system/dict/index.vue
@@ -359,7 +359,7 @@ const dialogVisible = reactive({
 
 const detailFormData = ref<DictTable>({});
 
-const formData = reactive<DictForm>({
+const formData = ref<DictForm>({
   id: undefined,
   dict_name: "",
   dict_type: "",
@@ -529,8 +529,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     }
   } else {
     dialogVisible.title = "新增字典";
-    Object.assign(formData, initialFormData);
-    formData.id = undefined;
+    Object.assign(formData.value, initialFormData);
+    formData.value.id = undefined;
   }
   dictFormRenderKey.value += 1;
   dialogVisible.visible = true;
@@ -539,20 +539,20 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
 async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
-    const id = formData.id;
+    const id = formData.value.id;
     try {
       if (id) {
-        await DictAPI.updateDictType(id, { id, ...formData });
+        await DictAPI.updateDictType(id, { id, ...formData.value });
         await refreshUpdate();
       } else {
-        await DictAPI.createDictType(formData);
+        await DictAPI.createDictType(formData.value);
         await refreshCreate();
       }
       dialogVisible.visible = false;
       await resetForm();
       dictStore.clearDictData();
-      if (formData.dict_type) {
-        await dictStore.getDict([formData.dict_type]);
+      if (formData.value.dict_type) {
+        await dictStore.getDict([formData.value.dict_type]);
       }
     } catch (error: unknown) {
       console.error(error);
@@ -636,11 +636,11 @@ function openExportModal() {
 </script>
 
 <style scoped lang="scss">
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/log/index.vue b/frontend/web/src/views/module_system/log/index.vue
index 531a1a6c..24e61634 100644
--- a/frontend/web/src/views/module_system/log/index.vue
+++ b/frontend/web/src/views/module_system/log/index.vue
@@ -446,7 +446,7 @@ function onResetSearch() {
 }
 
 async function resetForm() {
-  formData.value = {};
+  Object.assign(formData, {});
 }
 
 async function handleCloseDialog() {
@@ -457,7 +457,7 @@ async function handleCloseDialog() {
 async function handleOpenDialog(id: number) {
   dialogVisible.value.title = "日志详情";
   const response = await LogAPI.detailLog(id);
-  Object.assign(formData.value, response.data.data ?? {});
+  Object.assign(formData, response.data.data ?? {});
   dialogVisible.value.visible = true;
 }
 
diff --git a/frontend/web/src/views/module_system/menu/index.vue b/frontend/web/src/views/module_system/menu/index.vue
index 2531d9a7..f58fcbb8 100644
--- a/frontend/web/src/views/module_system/menu/index.vue
+++ b/frontend/web/src/views/module_system/menu/index.vue
@@ -692,7 +692,7 @@ const createParentLocked = ref(false);
 
 const detailFormData = ref<MenuTable>({});
 
-const formData = reactive<MenuForm>({
+const formData = ref<MenuForm>({
   id: undefined,
   name: undefined,
   type: MenuTypeEnum.CATALOG,
@@ -959,7 +959,7 @@ const rules = reactive({
   redirect: [
     {
       validator: (_rule: unknown, value: string | undefined, callback: (e?: Error) => void) => {
-        if (formData.type === MenuTypeEnum.CATALOG) {
+        if (formData.value.type === MenuTypeEnum.CATALOG) {
           if (value === undefined || value === null || String(value).trim() === "") {
             callback(new Error("目录类型必须填写重定向地址"));
             return;
@@ -1012,7 +1012,7 @@ async function handleRowClick(row: MenuTable) {
 }
 
 const allowedMenuTypeValues = computed(() => {
-  const pid = formData.parent_id;
+  const pid = formData.value.parent_id;
   const parentNode = findMenuNodeById(pid);
   if (!parentNode?.type) {
     return [MenuTypeEnum.CATALOG, MenuTypeEnum.MENU, MenuTypeEnum.EXTLINK];
@@ -1046,28 +1046,28 @@ async function handleOpenDialog(
     dialogVisible.title = "新增菜单";
     Object.assign(formData, initialFormData);
     if (parentRow?.id != null) {
-      formData.parent_id = parentRow.id;
-      formData.client = (parentRow.client as MenuClientEnum) || menuClientTab.value;
+      formData.value.parent_id = parentRow.id;
+      formData.value.client = (parentRow.client as MenuClientEnum) || menuClientTab.value;
       if (parentRow.type === MenuTypeEnum.MENU) {
         createParentLocked.value = true;
-        formData.type = MenuTypeEnum.BUTTON;
+        formData.value.type = MenuTypeEnum.BUTTON;
       } else if (parentRow.type === MenuTypeEnum.CATALOG) {
-        formData.type = MenuTypeEnum.MENU;
+        formData.value.type = MenuTypeEnum.MENU;
       }
     } else {
-      formData.client = menuClientTab.value;
+      formData.value.client = menuClientTab.value;
     }
   }
   dialogVisible.visible = true;
 }
 
 function handleMenuTypeChange() {
-  if (formData.type === MenuTypeEnum.MENU) {
-    formData.component_path = "";
+  if (formData.value.type === MenuTypeEnum.MENU) {
+    formData.value.component_path = "";
   }
   nextTick(() => {
     dataFormRef.value?.clearValidate("redirect");
-    if (formData.type === MenuTypeEnum.CATALOG) {
+    if (formData.value.type === MenuTypeEnum.CATALOG) {
       dataFormRef.value?.validateField("redirect").catch(() => {});
     }
   });
@@ -1076,19 +1076,19 @@ function handleMenuTypeChange() {
 async function handleSubmit() {
   const allowed = allowedMenuTypeValues.value;
   if (!allowed.length) return;
-  const t = formData.type as MenuTypeEnum;
+  const t = formData.value.type as MenuTypeEnum;
   if (!allowed.includes(t)) {
-    formData.type = allowed[0] as MenuForm["type"];
+    formData.value.type = allowed[0] as MenuForm["type"];
   }
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
     submitLoading.value = true;
-    const id = formData.id;
+    const id = formData.value.id;
     try {
       if (id) {
-        await MenuAPI.updateMenu(id, { id, ...formData });
+        await MenuAPI.updateMenu(id, { id, ...formData.value });
       } else {
-        await MenuAPI.createMenu(formData);
+        await MenuAPI.createMenu(formData.value);
       }
       dialogVisible.visible = false;
       await resetForm();
@@ -1153,7 +1153,7 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-::deep(.menu-table-actions .inline-flex) {
+::v-deep(.menu-table-actions .inline-flex) {
   vertical-align: middle;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/notice/index.vue b/frontend/web/src/views/module_system/notice/index.vue
index 4730dd15..64c54712 100644
--- a/frontend/web/src/views/module_system/notice/index.vue
+++ b/frontend/web/src/views/module_system/notice/index.vue
@@ -450,7 +450,7 @@ const detailHasRenderableContent = computed(() => {
   return plain.length > 0;
 });
 
-const formData = reactive<NoticeForm>({
+const formData = ref<NoticeForm>({
   id: undefined,
   notice_title: "",
   notice_type: "",
@@ -606,8 +606,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     }
   } else {
     dialogVisible.title = "新增公告通知";
-    Object.assign(formData, initialFormData);
-    formData.id = undefined;
+    Object.assign(formData.value, initialFormData);
+    formData.value.id = undefined;
   }
   noticeFormRenderKey.value += 1;
   dialogVisible.visible = true;
@@ -617,13 +617,13 @@ async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
     submitLoading.value = true;
-    const id = formData.id;
+    const id = formData.value.id;
     try {
       if (id) {
-        await NoticeAPI.updateNotice(id, { id, ...formData });
+        await NoticeAPI.updateNotice(id, { id, ...formData.value });
         await refreshUpdate();
       } else {
-        await NoticeAPI.createNotice(formData);
+        await NoticeAPI.createNotice(formData.value);
         await refreshCreate();
       }
       dialogVisible.visible = false;
@@ -747,11 +747,11 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 /* FaForm 底部预留的操作栏列在弹窗内不需要占位 */
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 
@@ -773,27 +773,27 @@ onMounted(async () => {
   color: var(--el-text-color-placeholder);
 }
 
-.notice-html-preview ::deep(h1),
-.notice-html-preview ::deep(h2),
-.notice-html-preview ::deep(h3) {
+.notice-html-preview ::v-deep(h1),
+.notice-html-preview ::v-deep(h2),
+.notice-html-preview ::v-deep(h3) {
   margin: 12px 0 8px;
 }
 
-.notice-html-preview ::deep(p) {
+.notice-html-preview ::v-deep(p) {
   margin: 8px 0;
   line-height: 1.6;
 }
 
-.notice-html-preview ::deep(table) {
+.notice-html-preview ::v-deep(table) {
   margin: 12px 0;
 }
 
-.notice-html-preview ::deep(table th),
-.notice-html-preview ::deep(table td) {
+.notice-html-preview ::v-deep(table th),
+.notice-html-preview ::v-deep(table td) {
   padding: 8px 12px;
 }
 
-.notice-html-preview ::deep(pre) {
+.notice-html-preview ::v-deep(pre) {
   padding: 12px;
   margin: 12px 0;
   overflow-x: auto;
@@ -801,14 +801,14 @@ onMounted(async () => {
   border-radius: 4px;
 }
 
-.notice-html-preview ::deep(blockquote) {
+.notice-html-preview ::v-deep(blockquote) {
   padding-left: 16px;
   margin: 12px 0;
   color: var(--el-text-color-regular);
   border-left: 4px solid var(--el-color-primary);
 }
 
-.notice-html-preview ::deep(img) {
+.notice-html-preview ::v-deep(img) {
   max-width: 100%;
   height: auto;
 }
diff --git a/frontend/web/src/views/module_system/param/index.vue b/frontend/web/src/views/module_system/param/index.vue
index 95958955..771b6989 100644
--- a/frontend/web/src/views/module_system/param/index.vue
+++ b/frontend/web/src/views/module_system/param/index.vue
@@ -357,7 +357,7 @@ const paramExportContentConfig = computed(() => ({
 
 const detailFormData = ref<ConfigTable>({} as ConfigTable);
 
-const formData = reactive<ConfigForm>({
+const formData = ref<ConfigForm>({
   id: undefined,
   config_name: "",
   config_key: "",
@@ -478,8 +478,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     }
   } else {
     dialogVisible.title = "新增系统配置";
-    Object.assign(formData, initialFormData);
-    formData.id = undefined;
+    Object.assign(formData.value, initialFormData);
+    formData.value.id = undefined;
   }
   paramFormRenderKey.value += 1;
   dialogVisible.visible = true;
@@ -489,13 +489,13 @@ async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
     submitLoading.value = true;
-    const id = formData.id;
+    const id = formData.value.id;
     try {
       if (id) {
-        await ParamsAPI.updateParams(id, { id, ...formData });
+        await ParamsAPI.updateParams(id, { id, ...formData.value });
         await refreshUpdate();
       } else {
-        await ParamsAPI.createParams(formData);
+        await ParamsAPI.createParams(formData.value);
         await refreshCreate();
       }
       dialogVisible.visible = false;
@@ -598,11 +598,11 @@ function openExportModal() {
 </script>
 
 <style scoped lang="scss">
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/position/index.vue b/frontend/web/src/views/module_system/position/index.vue
index 2dc1ad75..9ab55fdf 100644
--- a/frontend/web/src/views/module_system/position/index.vue
+++ b/frontend/web/src/views/module_system/position/index.vue
@@ -524,7 +524,7 @@ const positionExportContentConfig = computed(() => ({
 
 const detailFormData = ref<PositionTable>({});
 
-const formData = reactive<PositionForm>({
+const formData = ref<PositionForm>({
   id: undefined,
   name: undefined,
   order: 1,
@@ -649,8 +649,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     }
   } else {
     dialogVisible.title = "新增岗位";
-    Object.assign(formData, initialFormData);
-    formData.id = undefined;
+    Object.assign(formData.value, initialFormData);
+    formData.value.id = undefined;
   }
   positionFormRenderKey.value += 1;
   dialogVisible.visible = true;
@@ -660,13 +660,13 @@ async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
     submitLoading.value = true;
-    const id = formData.id;
+    const id = formData.value.id;
     try {
       if (id) {
-        await PositionAPI.updatePosition(id, { id, ...formData });
+        await PositionAPI.updatePosition(id, { id, ...formData.value });
         await refreshUpdate();
       } else {
-        await PositionAPI.createPosition(formData);
+        await PositionAPI.createPosition(formData.value);
         await refreshCreate();
       }
       dialogVisible.visible = false;
@@ -728,15 +728,15 @@ function handleMoreClick(status: string) {
 </script>
 
 <style scoped lang="scss">
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-::deep(.position-table-actions .inline-flex) {
+::v-deep(.position-table-actions .inline-flex) {
   vertical-align: middle;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/role/index.vue b/frontend/web/src/views/module_system/role/index.vue
index 4638524f..54f68786 100644
--- a/frontend/web/src/views/module_system/role/index.vue
+++ b/frontend/web/src/views/module_system/role/index.vue
@@ -547,7 +547,7 @@ const roleExportContentConfig = computed(() => ({
 
 const detailFormData = ref<RoleTable>({} as RoleTable);
 
-const formData = reactive<RoleForm>({
+const formData = ref<RoleForm>({
   id: undefined,
   name: undefined,
   order: 1,
@@ -684,8 +684,8 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
     }
   } else {
     dialogVisible.title = "新增角色";
-    Object.assign(formData, initialFormData);
-    formData.id = undefined;
+    Object.assign(formData.value, initialFormData);
+    formData.value.id = undefined;
   }
   roleFormRenderKey.value += 1;
   dialogVisible.visible = true;
@@ -695,13 +695,13 @@ async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (!valid) return;
     submitLoading.value = true;
-    const id = formData.id;
+    const id = formData.value.id;
     try {
       if (id) {
-        await RoleAPI.updateRole(id, { id, ...formData });
+        await RoleAPI.updateRole(id, { id, ...formData.value });
         await refreshUpdate();
       } else {
-        await RoleAPI.createRole(formData);
+        await RoleAPI.createRole(formData.value);
         await refreshCreate();
       }
       dialogVisible.visible = false;
@@ -766,15 +766,15 @@ function openExportModal() {
 </script>
 
 <style scoped lang="scss">
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-::deep(.role-table-actions .inline-flex) {
+::v-deep(.role-table-actions .inline-flex) {
   vertical-align: middle;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/tenant/index.vue b/frontend/web/src/views/module_system/tenant/index.vue
index 579cc65c..e58f2a83 100644
--- a/frontend/web/src/views/module_system/tenant/index.vue
+++ b/frontend/web/src/views/module_system/tenant/index.vue
@@ -440,7 +440,7 @@ const detailFormData = ref<TenantTable>({ code: "", name: "", status: "0" });
 
 const currentEditId = ref<number | null>(null);
 
-const formData = reactive<TenantForm>({
+const formData = ref<TenantForm>({
   name: "",
   code: "",
   status: "0",
@@ -458,7 +458,11 @@ const dialogVisible = reactive({
 const CODE_PATTERN = /^[A-Za-z0-9]+$/;
 
 const validateTimeRange = (rule: unknown, value: unknown, callback: (e?: Error) => void) => {
-  if (formData.start_time && formData.end_time && formData.start_time > formData.end_time) {
+  if (
+    formData.value.start_time &&
+    formData.value.end_time &&
+    formData.value.start_time > formData.value.end_time
+  ) {
     callback(new Error("结束时间不能早于开始时间"));
   } else {
     callback();
@@ -618,18 +622,18 @@ async function handleSubmit() {
     try {
       if (id) {
         const payload: TenantUpdateForm = {
-          name: formData.name,
-          start_time: formData.start_time,
-          end_time: formData.end_time,
+          name: formData.value.name,
+          start_time: formData.value.start_time,
+          end_time: formData.value.end_time,
         };
         await TenantAPI.updateTenant(id, payload);
         await refreshUpdate();
       } else {
         const payload: TenantCreateForm = {
-          name: formData.name as string,
-          code: formData.code as string,
-          start_time: formData.start_time,
-          end_time: formData.end_time,
+          name: formData.value.name as string,
+          code: formData.value.code as string,
+          start_time: formData.value.start_time,
+          end_time: formData.value.end_time,
         };
         await TenantAPI.createTenant(payload);
         await refreshCreate();
@@ -668,15 +672,15 @@ function handleBatchDelete() {
 </script>
 
 <style scoped lang="scss">
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-::deep(.tenant-table-actions .inline-flex) {
+::v-deep(.tenant-table-actions .inline-flex) {
   vertical-align: middle;
 }
 </style>
diff --git a/frontend/web/src/views/module_system/user/components/UserTableSelect.vue b/frontend/web/src/views/module_system/user/components/UserTableSelect.vue
index 93e06cea..675858ce 100644
--- a/frontend/web/src/views/module_system/user/components/UserTableSelect.vue
+++ b/frontend/web/src/views/module_system/user/components/UserTableSelect.vue
@@ -1,6 +1,6 @@
 <!-- 列表选择器 -->
 <template>
-  <table-select
+  <FaTableSelect
     :text="text"
     :select-config="selectConfig"
     @confirm-click="handleConfirm"
@@ -11,7 +11,7 @@
         {{ scope.row[scope.prop] === "0" ? "启用" : "停用" }}
       </ElTag>
     </template>
-  </table-select>
+  </FaTableSelect>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/web/src/views/module_system/user/index.vue b/frontend/web/src/views/module_system/user/index.vue
index 08414c05..d13ec797 100644
--- a/frontend/web/src/views/module_system/user/index.vue
+++ b/frontend/web/src/views/module_system/user/index.vue
@@ -731,7 +731,7 @@ const userExportContentConfig = computed(() => ({
   },
 }));
 
-const formData = reactive<UserForm>({
+const formData = ref<UserForm>({
   id: undefined,
   username: undefined,
   name: undefined,
@@ -882,13 +882,15 @@ async function handleOpenDialog(type: "create" | "update" | "detail", id?: numbe
       Object.assign(detailFormData.value, response.data.data ?? {});
     } else if (type === "update") {
       dialogVisible.title = "修改用户";
-      Object.assign(formData, response.data.data);
-      formData.role_ids = (response.data.data.roles || []).map((item) => item.id as number);
-      formData.position_ids = (response.data.data.positions || []).map((item) => item.id as number);
+      Object.assign(formData.value, response.data.data);
+      formData.value.role_ids = (response.data.data.roles || []).map((item) => item.id as number);
+      formData.value.position_ids = (response.data.data.positions || []).map(
+        (item) => item.id as number
+      );
     }
   } else {
     dialogVisible.title = "新增用户";
-    formData.id = undefined;
+    formData.value.id = undefined;
   }
   dialogVisible.visible = true;
   await nextTick();
@@ -926,13 +928,13 @@ async function handleSubmit() {
   dataFormRef.value.validate(async (valid: boolean) => {
     if (!valid) return;
     submitLoading.value = true;
-    const id = formData.id;
+    const id = formData.value.id;
     try {
       if (id) {
-        await UserAPI.updateUser(id, { id, ...formData });
+        await UserAPI.updateUser(id, { id, ...formData.value });
         await refreshUpdate();
       } else {
-        await UserAPI.createUser(formData);
+        await UserAPI.createUser(formData.value);
         await refreshCreate();
       }
       dialogVisible.visible = false;
@@ -1002,7 +1004,7 @@ function handleMoreClick(status: string) {
 
 <style lang="scss" scoped>
 /* 左侧部门树内容区：card body 纵向 flex + 滚动条占满剩余高度（布局在 index，内边距在 DeptTree） */
-.tree-card ::deep(.el-card__body) {
+.tree-card ::v-deep(.el-card__body) {
   display: flex;
   flex: 1;
   flex-direction: column;
diff --git a/frontend/web/src/views/module_task/cronjob/job/index.vue b/frontend/web/src/views/module_task/cronjob/job/index.vue
index 75c452ef..227a9c28 100644
--- a/frontend/web/src/views/module_task/cronjob/job/index.vue
+++ b/frontend/web/src/views/module_task/cronjob/job/index.vue
@@ -1039,7 +1039,7 @@ function handleViewJobState(row: JobLogTable) {
 </script>
 
 <style scoped>
-.job-page ::deep(.data-table) {
+.job-page ::v-deep(.data-table) {
   height: 100%;
 }
 
@@ -1151,7 +1151,7 @@ function handleViewJobState(row: JobLogTable) {
   min-height: 0;
 }
 
-.execution-log-drawer ::deep(.el-card.data-table) {
+.execution-log-drawer ::v-deep(.el-card.data-table) {
   flex: 1;
   min-height: 0;
 }
diff --git a/frontend/web/src/views/module_task/cronjob/node/index.vue b/frontend/web/src/views/module_task/cronjob/node/index.vue
index 3cac082f..b713fc1a 100644
--- a/frontend/web/src/views/module_task/cronjob/node/index.vue
+++ b/frontend/web/src/views/module_task/cronjob/node/index.vue
@@ -583,7 +583,7 @@ const defaultCodeBlock = `def handler(*args, **kwargs):
     }
 `;
 
-const formData = reactive<NodeForm>({
+const formData = ref<NodeForm>({
   id: undefined,
   name: "",
   code: undefined,
@@ -603,7 +603,7 @@ const kwargsList = ref<{ key: string; value: string }[]>([]);
 
 const executeDialogVisible = ref(false);
 const currentExecuteNode = ref<NodeTable | null>(null);
-const executeFormData = reactive<{
+const executeFormData = ref<{
   node_display_name: string;
   trigger: TriggerType;
   trigger_args?: string;
@@ -618,7 +618,7 @@ const executeFormData = reactive<{
 });
 
 const executeDialogFormItems = computed<FormItem[]>(() => {
-  const trig = executeFormData.trigger;
+  const trig = executeFormData.value.trigger;
   const showRange = !!trig && trig !== "now" && trig !== "date";
   let triggerArgsLabel = "执行参数";
   if (trig === "cron") triggerArgsLabel = "Cron表达式";
@@ -802,7 +802,7 @@ async function handleOpenDialog(type: "create" | "update", id?: number) {
       : [];
   } else {
     dialogVisible.title = "新增节点";
-    formData.id = undefined;
+    formData.value.id = undefined;
     argsList.value = [];
     kwargsList.value = [];
   }
@@ -822,10 +822,10 @@ async function handleSubmit() {
   dataFormRef.value?.validate(async (valid: any) => {
     if (valid) {
       submitLoading.value = true;
-      const id = formData.id;
+      const id = formData.value.id;
       try {
         const submitData = {
-          ...formData,
+          ...formData.value,
           args: argsList.value.filter((v) => v.trim()).join(",") || undefined,
           kwargs:
             kwargsList.value.filter((v) => v.key.trim()).length > 0
@@ -859,22 +859,22 @@ async function handleSubmit() {
 
 const handlechangeCron = (cronStr: string) => {
   if (typeof cronStr == "string") {
-    executeFormData.trigger_args = cronStr;
+    executeFormData.value.trigger_args = cronStr;
   }
 };
 
 const handleIntervalConfirm = (value: string) => {
-  executeFormData.trigger_args = value;
+  executeFormData.value.trigger_args = value;
   openInterval.value = false;
 };
 
 function handleOpenExecuteDialog(row: NodeTable) {
   currentExecuteNode.value = row;
-  executeFormData.node_display_name = row.name ?? "";
-  executeFormData.trigger = "now";
-  executeFormData.trigger_args = undefined;
-  executeFormData.start_date = undefined;
-  executeFormData.end_date = undefined;
+  executeFormData.value.node_display_name = row.name ?? "";
+  executeFormData.value.trigger = "now";
+  executeFormData.value.trigger_args = undefined;
+  executeFormData.value.start_date = undefined;
+  executeFormData.value.end_date = undefined;
   executeFormRenderKey.value += 1;
   executeDialogVisible.value = true;
 }
@@ -886,7 +886,7 @@ function handleCloseExecuteDialog() {
 }
 
 async function handleExecuteNode() {
-  if (executeFormData.trigger !== "now") {
+  if (executeFormData.value.trigger !== "now") {
     const execForm = executeFormRef.value;
     const elForm = execForm?.ref;
     if (!elForm) return;
@@ -897,13 +897,13 @@ async function handleExecuteNode() {
   try {
     submitLoading.value = true;
     const params: any = {
-      trigger: executeFormData.trigger,
+      trigger: executeFormData.value.trigger,
     };
 
-    if (executeFormData.trigger !== "now") {
-      params.trigger_args = executeFormData.trigger_args;
-      params.start_date = executeFormData.start_date;
-      params.end_date = executeFormData.end_date;
+    if (executeFormData.value.trigger !== "now") {
+      params.trigger_args = executeFormData.value.trigger_args;
+      params.start_date = executeFormData.value.start_date;
+      params.end_date = executeFormData.value.end_date;
     }
 
     await NodeAPI.executeNode(currentExecuteNode.value?.id as number, params);
@@ -986,17 +986,17 @@ onMounted(async () => {
   margin-top: 16px;
 }
 
-.node-splitter-art-form ::deep(.el-row > .el-col:last-child),
-.execute-debug-art-form ::deep(.el-row > .el-col:last-child) {
+.node-splitter-art-form ::v-deep(.el-row > .el-col:last-child),
+.execute-debug-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.node-splitter-art-form ::deep(.el-form-item__content),
-.execute-debug-art-form ::deep(.el-form-item__content) {
+.node-splitter-art-form ::v-deep(.el-form-item__content),
+.execute-debug-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-.node-splitter-art-form ::deep(section) {
+.node-splitter-art-form ::v-deep(section) {
   padding-right: 10px;
   padding-left: 10px;
 }
diff --git a/frontend/web/src/views/module_task/workflow/components/EdgeConfigPanel.vue b/frontend/web/src/views/module_task/workflow/components/EdgeConfigPanel.vue
index d08b28ae..70694ffc 100644
--- a/frontend/web/src/views/module_task/workflow/components/EdgeConfigPanel.vue
+++ b/frontend/web/src/views/module_task/workflow/components/EdgeConfigPanel.vue
@@ -193,15 +193,15 @@ function handleDelete() {
   flex: 1;
 }
 
-.panel-art-form ::deep(.el-row > .el-col:last-child) {
+.panel-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.panel-art-form ::deep(.el-form-item__content) {
+.panel-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-.panel-art-form ::deep(section) {
+.panel-art-form ::v-deep(section) {
   padding: 0;
 }
 </style>
diff --git a/frontend/web/src/views/module_task/workflow/components/NodeConfigPanel.vue b/frontend/web/src/views/module_task/workflow/components/NodeConfigPanel.vue
index 82fce6bd..16012672 100644
--- a/frontend/web/src/views/module_task/workflow/components/NodeConfigPanel.vue
+++ b/frontend/web/src/views/module_task/workflow/components/NodeConfigPanel.vue
@@ -159,13 +159,13 @@ watch(
         }
       }
 
-      formData.value = {
+      Object.assign(formData, {
         type: newNode.type || "",
         label: newNode.data?.label || "",
         args: newNode.data?.args || "",
         kwargsStr,
         description: newNode.data?.description || "",
-      };
+      });
     }
   },
   { deep: true, immediate: true }
@@ -250,15 +250,15 @@ onMounted(() => {
   flex: 1;
 }
 
-.panel-art-form ::deep(.el-row > .el-col:last-child) {
+.panel-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.panel-art-form ::deep(.el-form-item__content) {
+.panel-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-.panel-art-form ::deep(section) {
+.panel-art-form ::v-deep(section) {
   padding: 0;
 }
 </style>
diff --git a/frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue b/frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
index 20f73269..7f7ff8d8 100644
--- a/frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
+++ b/frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
@@ -183,7 +183,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, computed, onMounted, markRaw, type Component } from "vue";
+import { ref, watch, computed, onMounted, markRaw, type Component } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Panel, VueFlow, useVueFlow } from "@vue-flow/core";
 import { Background } from "@vue-flow/background";
@@ -230,7 +230,7 @@ const emit = defineEmits(["update:visible", "refresh"]);
 const formRef = ref<InstanceType<typeof FaForm> | null>(null);
 const workflowId = ref<number>();
 
-const formData = reactive<Partial<WorkflowForm>>({
+const formData = ref<Partial<WorkflowForm>>({
   code: "",
   name: "",
   description: "",
@@ -904,7 +904,7 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
 
 <style scoped lang="scss">
 .workflow-drawer {
-  ::deep(.el-drawer__body) {
+  ::v-deep(.el-drawer__body) {
     display: flex;
     flex-direction: column;
   }
@@ -916,11 +916,11 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
   height: 100%;
 }
 
-::deep(.el-splitter) {
+::v-deep(.el-splitter) {
   flex: 1;
 }
 
-::deep(.el-splitter-panel) {
+::v-deep(.el-splitter-panel) {
   overflow: hidden;
 }
 
@@ -961,12 +961,12 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
   overflow: hidden;
 }
 
-::deep(.vue-flow__controls) {
+::v-deep(.vue-flow__controls) {
   display: flex;
   flex-direction: column;
 }
 
-::deep(.vue-flow__controls-button) {
+::v-deep(.vue-flow__controls-button) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -978,7 +978,7 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
   border: none;
 }
 
-::deep(.el-dropdown) {
+::v-deep(.el-dropdown) {
   display: flex;
 }
 
@@ -996,15 +996,15 @@ function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Ed
   justify-content: flex-end;
 }
 
-.workflow-base-art-form ::deep(.el-row > .el-col:last-child) {
+.workflow-base-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.workflow-base-art-form ::deep(.el-form-item__content) {
+.workflow-base-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 
-.workflow-base-art-form ::deep(section) {
+.workflow-base-art-form ::v-deep(section) {
   padding: 0;
 }
 </style>
diff --git a/frontend/web/src/views/module_task/workflow/node-type/index.vue b/frontend/web/src/views/module_task/workflow/node-type/index.vue
index a3b1d6e9..e8c30217 100644
--- a/frontend/web/src/views/module_task/workflow/node-type/index.vue
+++ b/frontend/web/src/views/module_task/workflow/node-type/index.vue
@@ -84,7 +84,7 @@
       <FaForm
         :key="nodeTypeFormRenderKey"
         ref="formRef"
-        v-model="form"
+        v-model="formData"
         :items="nodeTypeDialogFormItems"
         :rules="rules"
         label-width="100px"
@@ -125,7 +125,7 @@ import { useTable } from "@/hooks/core/useTable";
 import type { ColumnOption } from "@/types/component";
 import { ElMessage, ElMessageBox, ElTag } from "element-plus";
 import type { FormRules } from "element-plus";
-import { computed, h, reactive, ref } from "vue";
+import { computed, h, ref } from "vue";
 
 const BATCH_DELETE_MSG = "确认删除选中的编排节点类型吗？";
 
@@ -438,7 +438,7 @@ const defaultForm = (): WorkflowNodeTypeForm => ({
   is_active: true,
 });
 
-const form = reactive<WorkflowNodeTypeForm>(defaultForm());
+const formData = ref<WorkflowNodeTypeForm>(defaultForm());
 
 const rules: FormRules = {
   name: [{ required: true, message: "请输入名称", trigger: "blur" }],
@@ -448,7 +448,7 @@ const rules: FormRules = {
 };
 
 function resetForm() {
-  Object.assign(form, defaultForm());
+  Object.assign(formData.value, defaultForm());
   editingId.value = null;
   formRef.value?.ref?.resetFields();
   formRef.value?.ref?.clearValidate();
@@ -467,14 +467,14 @@ async function openDialog(id?: number) {
       const res = await WorkflowNodeTypeAPI.getWorkflowNodeTypeDetail(id);
       const d = res.data?.data as WorkflowNodeTypeTable | undefined;
       if (d) {
-        form.name = d.name || "";
-        form.code = d.code || "";
-        form.category = (d.category as WorkflowNodeTypeForm["category"]) || "action";
-        form.func = d.func || "";
-        form.args = d.args || "";
-        form.kwargs = d.kwargs || "{}";
-        form.sort_order = d.sort_order ?? 0;
-        form.is_active = d.is_active ?? true;
+        formData.value.name = d.name || "";
+        formData.value.code = d.code || "";
+        formData.value.category = (d.category as WorkflowNodeTypeForm["category"]) || "action";
+        formData.value.func = d.func || "";
+        formData.value.args = d.args || "";
+        formData.value.kwargs = d.kwargs || "{}";
+        formData.value.sort_order = d.sort_order ?? 0;
+        formData.value.is_active = d.is_active ?? true;
       }
     } catch {
       ElMessage.error("加载详情失败");
@@ -488,9 +488,9 @@ async function openDialog(id?: number) {
 async function submitForm() {
   if (!formRef.value) return;
   await formRef.value.validate();
-  if (form.kwargs?.trim()) {
+  if (formData.value.kwargs?.trim()) {
     try {
-      JSON.parse(form.kwargs);
+      JSON.parse(formData.value.kwargs);
     } catch {
       ElMessage.error("关键字参数须为合法 JSON");
       return;
@@ -499,12 +499,12 @@ async function submitForm() {
   submitting.value = true;
   try {
     if (editingId.value) {
-      await WorkflowNodeTypeAPI.updateWorkflowNodeType(editingId.value, form);
+      await WorkflowNodeTypeAPI.updateWorkflowNodeType(editingId.value, formData.value);
       ElMessage.success("更新成功");
       dialogVisible.value = false;
       await refreshUpdate();
     } else {
-      await WorkflowNodeTypeAPI.createWorkflowNodeType(form);
+      await WorkflowNodeTypeAPI.createWorkflowNodeType(formData.value);
       ElMessage.success("创建成功");
       dialogVisible.value = false;
       await refreshCreate();
@@ -518,11 +518,11 @@ async function submitForm() {
 </script>
 
 <style scoped lang="scss">
-.crud-dialog-art-form ::deep(.el-row > .el-col:last-child) {
+.crud-dialog-art-form ::v-deep(.el-row > .el-col:last-child) {
   display: none;
 }
 
-.crud-dialog-art-form ::deep(.el-form-item__content) {
+.crud-dialog-art-form ::v-deep(.el-form-item__content) {
   max-width: 100%;
 }
 </style>