From 7e7c236c2ad7814cbc62a2191b1841a3db5c25c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=AD=90=E9=BB=98?= <925456043@qq.com>
Date: Sun, 5 Apr 2026 21:39:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=AB=AF=E5=89=8D=E7=AB=AF=20lint=20=E4=B8=8E=E6=9E=84?=
 =?UTF-8?q?=E5=BB=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 收敛 easyflow-ui-admin 的 lint、格式和类型问题

- 修正 demo 页面与管理端前端构建失败点

- 验证 pnpm lint 与 pnpm build 均已通过
---
 easyflow-ui-admin/app/index.html              |   8 +-
 easyflow-ui-admin/app/package.json            |   4 +-
 .../app/src/adapter/component/index.ts        |   6 +-
 easyflow-ui-admin/app/src/adapter/form.ts     |   8 +-
 .../app/src/adapter/vxe-table.ts              |   5 +-
 easyflow-ui-admin/app/src/api/ai/knowledge.ts |   1 +
 .../app/src/components/cardPage/CardPage.vue  | 291 ++++++------
 .../categoryPanel/CategoryCrudPanel.vue       |  12 +-
 .../categoryPanel/CategoryPanel.vue           |  98 ++--
 .../chat-history/ChatHistoryDetailDrawer.vue  | 113 +++--
 .../app/src/components/chat/chat.vue          |  33 +-
 .../components/collapse/CustomCoolapse.vue    | 314 ++++++-------
 .../components/headerSearch/HeaderSearch.vue  |  32 +-
 .../app/src/components/json/ShowJson.vue      |   3 +-
 .../app/src/components/page/CardList.vue      |  29 +-
 .../app/src/components/page/ListPageShell.vue |  55 ++-
 .../app/src/components/page/PageData.vue      |   2 +-
 .../app/src/components/page/PageSide.vue      |   2 +
 .../page/__tests__/CardList.test.ts           |   7 +-
 .../app/src/components/tree/Tree.vue          |  18 +-
 .../src/components/upload/DragFileUpload.vue  |   5 +-
 .../app/src/components/upload/Upload.vue      |   5 +-
 .../src/components/upload/UploadAvatar.vue    |  35 +-
 easyflow-ui-admin/app/src/locales/index.ts    |   5 +-
 .../src/locales/langs/en-US/aiResource.json   |  36 +-
 .../langs/en-US/aiWorkflowCategory.json       |  18 +-
 .../langs/en-US/aiWorkflowExecRecord.json     |  46 +-
 .../langs/en-US/aiWorkflowRecordStep.json     |  40 +-
 .../locales/langs/en-US/datacenterTable.json  |  62 +--
 .../langs/en-US/datacenterTableFields.json    |  22 +-
 .../en-US/sysApiKeyResourcePermission.json    |   8 +-
 .../app/src/locales/langs/en-US/sysDept.json  |  30 +-
 .../app/src/locales/langs/en-US/sysDict.json  |  20 +-
 .../app/src/locales/langs/en-US/sysJob.json   |  42 +-
 .../app/src/locales/langs/en-US/sysLog.json   |  24 +-
 .../app/src/locales/langs/en-US/sysMenu.json  |  36 +-
 .../app/src/locales/langs/en-US/sysRole.json  |  40 +-
 .../src/locales/langs/zh-CN/aiResource.json   |  36 +-
 .../langs/zh-CN/aiWorkflowCategory.json       |  18 +-
 .../langs/zh-CN/aiWorkflowExecRecord.json     |  46 +-
 .../langs/zh-CN/aiWorkflowRecordStep.json     |  40 +-
 .../locales/langs/zh-CN/datacenterTable.json  |  62 +--
 .../langs/zh-CN/datacenterTableFields.json    |  22 +-
 .../app/src/locales/langs/zh-CN/sysDept.json  |  30 +-
 .../app/src/locales/langs/zh-CN/sysDict.json  |  20 +-
 .../app/src/locales/langs/zh-CN/sysJob.json   |  42 +-
 .../app/src/locales/langs/zh-CN/sysLog.json   |  24 +-
 .../app/src/locales/langs/zh-CN/sysMenu.json  |  36 +-
 .../app/src/locales/langs/zh-CN/sysRole.json  |  40 +-
 easyflow-ui-admin/app/src/main.ts             |   6 +-
 easyflow-ui-admin/app/src/router/guard.ts     |  15 +-
 .../app/src/router/routes/core.ts             |   8 +-
 .../app/src/router/routes/modules/demos.ts    |   2 +
 easyflow-ui-admin/app/src/store/auth.ts       |   3 +-
 .../app/src/types/tinyflow-ai-vue.d.ts        |   6 +-
 .../app/src/types/vue-element-plus-x.d.ts     |   6 +-
 .../app/src/types/wangeditor.d.ts             |   2 +-
 .../app/src/utils/password-reset.ts           |   5 +-
 .../src/views/_core/authentication/login.vue  |  18 +-
 .../app/src/views/_core/profile/index.vue     |  10 +-
 .../views/_core/profile/password-setting.vue  |   8 +-
 .../app/src/views/ai/bots/modal.vue           |  30 +-
 .../app/src/views/ai/bots/pages/Run.vue       |   2 +-
 .../views/ai/bots/pages/setting/config.vue    |   2 +
 .../src/views/ai/bots/pages/setting/index.vue |  20 +-
 .../app/src/views/ai/chatHistory/index.vue    |  56 +--
 .../views/ai/documentCollection/Document.vue  |  92 ++--
 .../documentCollection/DocumentCollection.vue |  46 +-
 .../ai/documentCollection/DocumentTable.vue   |  10 +-
 .../ai/documentCollection/FaqEditDialog.vue   |  20 +-
 .../ai/documentCollection/FaqImportDialog.vue |  36 +-
 .../views/ai/documentCollection/FaqTable.vue  |  56 +--
 .../ImportKnowledgeDocFile.vue                |   6 +-
 .../ai/documentCollection/SegmenterDoc.vue    |  10 +-
 .../documentCollection/SplitterDocPreview.vue |  22 +-
 .../app/src/views/ai/mcp/McpModal.vue         |  49 +-
 .../app/src/views/ai/model/AddModelModal.vue  |  12 +-
 .../views/ai/model/AddModelProviderModal.vue  |  27 +-
 .../src/views/ai/model/ModelVerifyConfig.vue  |  18 +-
 .../views/ai/model/ModelViewItemOperation.vue |   9 +-
 .../ai/model/UnifiedGatewayWorkspace.vue      |  16 +-
 .../__tests__/providerDraft.test.ts           |   2 +-
 .../ai/model/modelUtils/providerDraft.ts      |   2 +-
 .../src/views/ai/plugin/AddPluginModal.vue    |  39 +-
 .../views/ai/plugin/PluginRunTestModal.vue    |  23 +-
 .../views/ai/plugin/PluginToolCollapse.vue    |   4 +-
 .../src/views/ai/workflow/WorkflowDesign.vue  |  75 +--
 .../src/views/ai/workflow/WorkflowList.vue    | 118 ++---
 .../src/views/ai/workflow/WorkflowModal.vue   |   2 +-
 .../ai/workflow/components/ConfirmItem.vue    |  42 +-
 .../workflow/components/ConfirmItemMulti.vue  |  42 +-
 .../ai/workflow/components/SingleRun.vue      |   4 +-
 .../customNode/datasetNodeRenderer.ts         |  34 +-
 .../ai/workflow/customNode/datasetOptions.ts  |  55 ++-
 .../app/src/views/config/apikey/SysApiKey.vue |   2 +-
 .../SysApiKeyResourcePermissionList.vue       |   6 +-
 .../src/views/config/settings/Settings.vue    |   6 +-
 .../views/datacenter/DatacenterWorkspace.vue  |  14 +-
 .../datacenter/components/ConnectionTree.vue  |  88 ++--
 .../components/ExcelActionDrawer.vue          |  72 ++-
 .../components/SourceFormDrawer.vue           |  30 +-
 .../datacenter/components/TableDetailView.vue |  47 +-
 .../datacenter/components/TableListView.vue   |  23 +-
 .../datacenter/composables/use-source-form.ts |   6 +-
 .../app/src/views/demos/cardTest/index.vue    | 105 +----
 .../src/views/demos/categoryPanel/index.vue   |  47 +-
 .../app/src/views/publicChat/index.vue        |  47 +-
 .../sysAccount/SysAccountImportModal.vue      |  48 +-
 .../system/sysAccount/SysAccountList.vue      |  24 +-
 .../system/sysAccount/SysAccountModal.vue     |   5 +-
 .../src/views/system/sysDept/SysDeptList.vue  |   2 +-
 .../src/views/system/sysRole/SysRoleModal.vue |  71 ++-
 easyflow-ui-admin/app/vite.config.mts         |   2 +-
 easyflow-ui-admin/eslint.config.mjs           |   2 +-
 .../internal/vite-config/package.json         |   2 +-
 .../vite-config/src/config/application.ts     |  20 +-
 .../default-loading-progress.html             |  56 ++-
 .../vite-config/src/plugins/vxe-table.ts      |   4 +-
 easyflow-ui-admin/package.json                |   4 +-
 .../@core/base/design/src/css/global.css      |  37 +-
 .../base/design/src/design-tokens/dark.css    |   9 +-
 .../base/design/src/design-tokens/default.css |  15 +-
 .../@core/base/shared/src/constants/index.ts  |   2 +-
 .../@core/base/shared/src/utils/util.ts       |   1 -
 .../form-ui/src/components/form-actions.vue   |   6 +-
 .../@core/ui-kit/form-ui/src/config.ts        |   2 +-
 .../ui-kit/form-ui/src/easyflow-use-form.vue  |   2 +-
 .../@core/ui-kit/form-ui/src/form-api.ts      |   6 +-
 .../form-ui/src/form-render/form-field.vue    |   7 +-
 .../form-ui/src/form-render/form-label.vue    |   2 +-
 .../@core/ui-kit/form-ui/src/index.ts         |   2 +-
 .../@core/ui-kit/form-ui/src/types.ts         |   2 +-
 .../ui-kit/form-ui/src/use-easyflow-form.ts   |   4 +-
 .../ui-kit/form-ui/src/use-form-context.ts    |   8 +-
 .../src/components/layout-content.vue         |  11 +-
 .../src/components/layout-header.vue          |   5 +-
 .../src/components/layout-sidebar.vue         |  32 +-
 .../src/components/layout-tabbar.vue          |   5 +-
 .../widgets/sidebar-collapse-button.vue       |   2 +-
 .../widgets/sidebar-fixed-button.vue          |   8 +-
 .../ui-kit/layout-ui/src/easyflow-layout.vue  |  54 +--
 .../ui-kit/menu-ui/src/components/menu.vue    |  95 ++--
 .../ui-kit/popup-ui/src/alert/AlertBuilder.ts |   2 +-
 .../@core/ui-kit/popup-ui/src/alert/alert.vue |   5 +-
 .../ui-kit/popup-ui/src/drawer/drawer.vue     |  27 +-
 .../ui-kit/popup-ui/src/drawer/use-drawer.ts  |   6 +-
 .../ui-kit/popup-ui/src/modal/use-modal.ts    |   6 +-
 .../src/components/breadcrumb/breadcrumb.vue  |  42 +-
 .../components/button/check-button-group.vue  |   2 +-
 .../src/components/spine-text/spine-text.vue  |   5 +-
 .../src/components/tabs-chrome/tabs.vue       |  16 +-
 .../tabs-ui/src/components/tabs/tabs.vue      |   6 +-
 .../src/components/widgets/tool-more.vue      |   2 +-
 .../src/components/widgets/tool-screen.vue    |   2 +-
 .../@core/ui-kit/tabs-ui/src/tabs-view.vue    |  20 +-
 .../tabs-ui/src/use-tabs-view-scroll.ts       |   6 +-
 .../api-component/api-component.vue           |   7 +-
 .../chat-thinking/ChatThinkingBlock.vue       |  61 ++-
 .../src/components/chat-thinking/index.ts     |   5 +-
 .../components/icon-picker/icon-picker.vue    |   2 +-
 .../common-ui/src/components/tree/tree.vue    |   2 +-
 .../ui/authentication/__tests__/login.test.ts |  12 +-
 .../src/ui/authentication/auth-title.vue      |   4 +-
 .../src/ui/authentication/code-login.vue      |  15 +-
 .../src/ui/authentication/forget-password.vue |  13 +-
 .../ui/authentication/login-expired-modal.vue |   2 +-
 .../common-ui/src/ui/authentication/login.vue |  55 +--
 .../src/ui/authentication/qrcode-login.vue    |  30 +-
 .../src/ui/authentication/register.vue        |  17 +-
 .../analysis/analysis-chart-card.vue          |   7 +-
 .../analysis/analysis-charts-tabs.vue         |   7 +-
 .../src/authentication/authentication.vue     | 186 +++++---
 .../layouts/src/authentication/form.vue       |  95 ++--
 .../layouts/src/authentication/toolbar.vue    |  18 +-
 .../layouts/src/basic/content/content.vue     |  13 +-
 .../layouts/src/basic/header/header.vue       |  38 +-
 .../layouts/src/basic/menu/use-mixed-menu.ts  |  14 +-
 .../widgets/global-search/search-panel.vue    |   5 +-
 .../layouts/src/widgets/language-toggle.vue   |   5 +-
 .../layouts/src/widgets/layout-toggle.vue     |   5 +-
 .../preferences/blocks/checkbox-item.vue      |   5 +-
 .../widgets/preferences/blocks/input-item.vue |   2 +-
 .../preferences/blocks/number-field-item.vue  |   2 +-
 .../preferences/blocks/select-item.vue        |   2 +-
 .../preferences/blocks/switch-item.vue        |   2 +-
 .../src/widgets/theme-toggle/theme-toggle.vue |   2 +-
 .../src/widgets/timezone/timezone-button.vue  |   2 +-
 .../effects/plugins/src/vxe-table/types.ts    |   5 +-
 .../packages/icons/src/svg/load.ts            |   1 +
 .../packages/locales/package.json             |   2 +-
 .../packages/styles/src/ele/index.css         |  14 +-
 .../packages/tinyflow-ui/.eslintrc.cjs        |   6 +-
 .../packages/tinyflow-ui/src/Tinyflow.ts      | 292 ++++++------
 .../tinyflow-ui/src/components/base/index.ts  |  26 +-
 .../src/components/nodes/LoopNode.svelte      |   5 +-
 .../tinyflow-ui/src/components/nodes/index.ts |  24 +-
 .../tinyflow-ui/src/components/utils/IdGen.ts |  18 +-
 .../src/components/utils/NodeUtils.ts         |  28 +-
 .../components/utils/codeCompletion.test.ts   | 162 ++++---
 .../src/components/utils/codeCompletion.ts    | 374 ++++++++-------
 .../src/components/utils/createFloating.ts    | 380 +++++++--------
 .../src/components/utils/deepClone.ts         |   2 +-
 .../src/components/utils/deepEqual.ts         |  69 +--
 .../components/utils/isInEditableElement.ts   |  18 +-
 .../src/components/utils/nodePalette.ts       | 243 +++++-----
 .../src/components/utils/paramToken.test.ts   | 330 ++++++-------
 .../src/components/utils/paramToken.ts        | 436 +++++++++---------
 .../utils/useAddParameter.svelte.ts           | 104 ++---
 .../components/utils/useCopyNode.svelte.ts    |  46 +-
 .../utils/useCopyPasteHandler.svelte.ts       | 427 +++++++++--------
 .../components/utils/useDeleteEdge.svelte.ts  |  14 +-
 .../components/utils/useDeleteNode.svelte.ts  |  18 +-
 .../useEnsureParentInNodesBefore.svelte.ts    |  74 +--
 .../utils/useGetEdgesBySource.svelte.ts       |  16 +-
 .../utils/useGetEdgesByTarget.svelte.ts       |  16 +-
 .../src/components/utils/useGetNode.svelte.ts |  14 +-
 .../useGetNodeRelativePosition.svelte.ts      |  36 +-
 .../utils/useGetNodesFromSource.svelte.ts     |  50 +-
 .../components/utils/useRefOptions.svelte.ts  | 294 ++++++------
 .../utils/useUpdateEdgeData.svelte.ts         |  47 +-
 .../packages/tinyflow-ui/src/consts.ts        | 131 +++---
 .../tinyflow-ui/src/store/stores.svelte.ts    | 136 +++---
 .../packages/tinyflow-ui/src/styles/base.less | 128 +++--
 .../tinyflow-ui/src/styles/tinyflow.less      | 192 ++++----
 .../tinyflow-ui/src/styles/variable.less      |  60 +--
 .../tinyflow-ui/src/tinyflow-theme.test.ts    | 102 ++--
 .../packages/tinyflow-ui/src/types.ts         | 218 ++++-----
 .../packages/tinyflow-ui/svelte.config.js     |  24 +-
 .../packages/tinyflow-ui/tsconfig.app.json    |  36 +-
 .../packages/tinyflow-ui/tsconfig.json        |   7 +-
 .../packages/tinyflow-ui/tsconfig.node.json   |  40 +-
 .../packages/tinyflow-ui/vite.config.ts       |  74 +--
 .../packages/tinyflow-vue/.eslintrc.cjs       |   6 +-
 .../packages/tinyflow-vue/src/Tinyflow.vue    | 114 ++---
 .../packages/tinyflow-vue/src/main.ts         |   6 +-
 .../packages/tinyflow-vue/tsconfig.app.json   |  40 +-
 .../packages/tinyflow-vue/tsconfig.json       |   7 +-
 .../packages/tinyflow-vue/tsconfig.node.json  |  40 +-
 .../packages/tinyflow-vue/vite.config.ts      |  64 +--
 easyflow-ui-admin/readme.md                   |   3 +
 240 files changed, 5151 insertions(+), 4701 deletions(-)

diff --git a/easyflow-ui-admin/app/index.html b/easyflow-ui-admin/app/index.html
index e622043..b642016 100644
--- a/easyflow-ui-admin/app/index.html
+++ b/easyflow-ui-admin/app/index.html
@@ -15,10 +15,10 @@
     <link rel="icon" href="/favicon.svg" />
     <script>
       var _hmt = _hmt || [];
-      (function() {
-        var hm = document.createElement("script");
-        hm.src = "https://hm.baidu.com/hm.js?42639a1503843c26bc4d8b35185616d9";
-        var s = document.getElementsByTagName("script")[0];
+      (function () {
+        var hm = document.createElement('script');
+        hm.src = 'https://hm.baidu.com/hm.js?42639a1503843c26bc4d8b35185616d9';
+        var s = document.getElementsByTagName('script')[0];
         s.parentNode.insertBefore(hm, s);
       })();
     </script>
diff --git a/easyflow-ui-admin/app/package.json b/easyflow-ui-admin/app/package.json
index 7fa4cb8..200d647 100644
--- a/easyflow-ui-admin/app/package.json
+++ b/easyflow-ui-admin/app/package.json
@@ -29,10 +29,10 @@
     "@easyflow/types": "workspace:*",
     "@easyflow/utils": "workspace:*",
     "@element-plus/icons-vue": "^2.3.2",
-    "@wangeditor/editor": "^5.1.23",
-    "@wangeditor/editor-for-vue": "^5.1.12",
     "@tinyflow-ai/vue": "workspace:*",
     "@vueuse/core": "catalog:",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "dayjs": "catalog:",
     "dompurify": "^3.3.1",
     "element-plus": "catalog:",
diff --git a/easyflow-ui-admin/app/src/adapter/component/index.ts b/easyflow-ui-admin/app/src/adapter/component/index.ts
index d8d83aa..31ed4ec 100644
--- a/easyflow-ui-admin/app/src/adapter/component/index.ts
+++ b/easyflow-ui-admin/app/src/adapter/component/index.ts
@@ -10,7 +10,11 @@ import type { Recordable } from '@easyflow/types';
 
 import { defineAsyncComponent, defineComponent, h, ref } from 'vue';
 
-import { ApiComponent, globalShareState, IconPicker } from '@easyflow/common-ui';
+import {
+  ApiComponent,
+  globalShareState,
+  IconPicker,
+} from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 
 import { ElNotification } from 'element-plus';
diff --git a/easyflow-ui-admin/app/src/adapter/form.ts b/easyflow-ui-admin/app/src/adapter/form.ts
index f4068ce..dbe04d0 100644
--- a/easyflow-ui-admin/app/src/adapter/form.ts
+++ b/easyflow-ui-admin/app/src/adapter/form.ts
@@ -1,11 +1,15 @@
 import type {
-  EasyFlowFormSchema as FormSchema,
   EasyFlowFormProps,
+  EasyFlowFormSchema as FormSchema,
 } from '@easyflow/common-ui';
 
 import type { ComponentType } from './component';
 
-import { setupEasyFlowForm, useEasyFlowForm as useForm, z } from '@easyflow/common-ui';
+import {
+  setupEasyFlowForm,
+  useEasyFlowForm as useForm,
+  z,
+} from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 
 async function initSetupEasyFlowForm() {
diff --git a/easyflow-ui-admin/app/src/adapter/vxe-table.ts b/easyflow-ui-admin/app/src/adapter/vxe-table.ts
index 1b73c06..3b98df3 100644
--- a/easyflow-ui-admin/app/src/adapter/vxe-table.ts
+++ b/easyflow-ui-admin/app/src/adapter/vxe-table.ts
@@ -2,7 +2,10 @@ import type { VxeTableGridOptions } from '@easyflow/plugins/vxe-table';
 
 import { h } from 'vue';
 
-import { setupEasyFlowVxeTable, useEasyFlowVxeGrid } from '@easyflow/plugins/vxe-table';
+import {
+  setupEasyFlowVxeTable,
+  useEasyFlowVxeGrid,
+} from '@easyflow/plugins/vxe-table';
 
 import { ElButton, ElImage } from 'element-plus';
 
diff --git a/easyflow-ui-admin/app/src/api/ai/knowledge.ts b/easyflow-ui-admin/app/src/api/ai/knowledge.ts
index e69de29..cb0ff5c 100644
--- a/easyflow-ui-admin/app/src/api/ai/knowledge.ts
+++ b/easyflow-ui-admin/app/src/api/ai/knowledge.ts
@@ -0,0 +1 @@
+export {};
diff --git a/easyflow-ui-admin/app/src/components/cardPage/CardPage.vue b/easyflow-ui-admin/app/src/components/cardPage/CardPage.vue
index b16053d..d377b5a 100644
--- a/easyflow-ui-admin/app/src/components/cardPage/CardPage.vue
+++ b/easyflow-ui-admin/app/src/components/cardPage/CardPage.vue
@@ -144,143 +144,8 @@ const filteredActions = computed(() => {
 </template>
 
 <style scoped>
-.card-list-container {
-  width: 100%;
-  height: 100%;
-}
-
-.card-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-:deep(.el-card__body) {
-  padding: 20px 0 0 0;
-}
-.card-item {
-  transition: all 0.3s ease;
-  border-radius: 8px;
-  flex-shrink: 0;
-  height: 165px;
-  min-width: 0;
-}
-:deep(.delete-dropdown-item) {
-  color: #ff4d4f !important;
-}
-:deep(.delete-dropdown-item:hover) {
-  color: #ff7875 !important;
-}
-:deep(.delete-dropdown-item .el-icon) {
-  color: inherit !important;
-}
-.card-item:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-}
-
-.card-content {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: var(--el-bg-color);
-  border-radius: 8px;
-}
-
-.card-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 15px;
-  margin-bottom: 15px;
-  flex: 1;
-  padding: 0 20px 0 20px;
-}
-
-.card-info {
-  flex: 1;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.card-title {
-  margin: 0 0 8px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  line-height: 1.4;
-}
-
-.card-desc {
-  margin: 0;
-  width: 100%;
-  font-size: 14px;
-  color: #606266;
-  line-height: 1.5;
-  height: 42px;
-  min-height: 42px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.card-actions {
-  display: flex;
-  align-items: center;
-  height: 48px;
-  background:
-    linear-gradient(
-      180deg,
-      var(--el-color-primary-light-9),
-      var(--el-bg-color)
-    ),
-    var(--el-bg-color);
-}
-
-.action-btn {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 0;
-  color: #acb7c6;
-  position: relative;
-  &:hover {
-    color: var(--el-color-primary);
-  }
-}
-
-.more-btn {
-  width: 100%;
-  justify-content: center;
-}
-
-.divider {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1px;
-  height: 20px;
-  background-color: #e0e0e0;
-}
-
-/* 确保按钮内容不换行 */
-.action-btn .el-button {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  justify-content: center;
-}
-.empty-state {
-  padding: 40px 0;
-  text-align: center;
-}
-
 /* 响应式设计 */
+
 /* 超大屏幕 */
 @media (min-width: 1920px) {
   .card-list {
@@ -305,8 +170,8 @@ const filteredActions = computed(() => {
   }
 
   .card-header {
-    padding: 0 16px 0 16px;
     gap: 12px;
+    padding: 0 16px;
   }
 
   .card-title {
@@ -314,9 +179,9 @@ const filteredActions = computed(() => {
   }
 
   .card-desc {
-    font-size: 13px;
     height: 36px;
     min-height: 36px;
+    font-size: 13px;
   }
 }
 
@@ -326,21 +191,22 @@ const filteredActions = computed(() => {
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 16px;
   }
+
   .card-header {
-    padding: 0 12px 0 12px;
     gap: 10px;
+    padding: 0 12px;
   }
 
   .card-title {
-    font-size: 14px;
     margin-bottom: 6px;
+    font-size: 14px;
   }
 
   .card-desc {
-    font-size: 12px;
     height: 32px;
     min-height: 32px;
     -webkit-line-clamp: 2;
+    font-size: 12px;
   }
 
   .card-actions {
@@ -351,4 +217,147 @@ const filteredActions = computed(() => {
     font-size: 11px;
   }
 }
+
+.card-list-container {
+  width: 100%;
+  height: 100%;
+}
+
+.card-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+:deep(.el-card__body) {
+  padding: 20px 0 0;
+}
+
+.card-item {
+  flex-shrink: 0;
+  min-width: 0;
+  height: 165px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+:deep(.delete-dropdown-item) {
+  color: #ff4d4f !important;
+}
+
+:deep(.delete-dropdown-item:hover) {
+  color: #ff7875 !important;
+}
+
+:deep(.delete-dropdown-item .el-icon) {
+  color: inherit !important;
+}
+
+.card-item:hover {
+  box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
+  transform: translateY(-5px);
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--el-bg-color);
+  border-radius: 8px;
+}
+
+.card-header {
+  display: flex;
+  flex: 1;
+  gap: 15px;
+  align-items: flex-start;
+  padding: 0 20px;
+  margin-bottom: 15px;
+}
+
+.card-info {
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.card-title {
+  margin: 0 0 8px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--el-text-color-primary);
+}
+
+.card-desc {
+  display: -webkit-box;
+  width: 100%;
+  height: 42px;
+  min-height: 42px;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #606266;
+  -webkit-box-orient: vertical;
+}
+
+.card-actions {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  background:
+    linear-gradient(
+      180deg,
+      var(--el-color-primary-light-9),
+      var(--el-bg-color)
+    ),
+    var(--el-bg-color);
+}
+
+.action-btn {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  color: #acb7c6;
+
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+
+.more-btn {
+  justify-content: center;
+  width: 100%;
+}
+
+.divider {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 1px;
+  height: 20px;
+  background-color: #e0e0e0;
+  transform: translateY(-50%);
+}
+
+/* 确保按钮内容不换行 */
+.action-btn .el-button {
+  justify-content: center;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.empty-state {
+  padding: 40px 0;
+  text-align: center;
+}
 </style>
diff --git a/easyflow-ui-admin/app/src/components/categoryPanel/CategoryCrudPanel.vue b/easyflow-ui-admin/app/src/components/categoryPanel/CategoryCrudPanel.vue
index 39465c9..6f9017e 100644
--- a/easyflow-ui-admin/app/src/components/categoryPanel/CategoryCrudPanel.vue
+++ b/easyflow-ui-admin/app/src/components/categoryPanel/CategoryCrudPanel.vue
@@ -283,28 +283,28 @@ const handleDeleteClick = (event: any, item: any) => {
 
 <style scoped>
 .crud-category-item:hover {
-  background-color: var(--el-color-primary-light-9);
   cursor: pointer;
+  background-color: var(--el-color-primary-light-9);
 }
 
 .crud-category-item.selected {
-  background-color: var(--el-color-primary-light-9);
   color: var(--el-color-primary);
+  background-color: var(--el-color-primary-light-9);
 }
 
 .no-data {
-  text-align: center;
   padding: 40px 0;
+  text-align: center;
 }
 
 .crud-category-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 12px;
   height: 40px;
-  border-radius: 8px;
+  padding: 8px 12px;
   font-size: 14px;
+  border-radius: 8px;
 }
 
 .crud-category-item :deep(.el-icon) {
@@ -316,8 +316,8 @@ const handleDeleteClick = (event: any, item: any) => {
   align-items: center;
   justify-content: center;
   padding: 4px;
-  border-radius: 4px;
   cursor: pointer;
+  border-radius: 4px;
   transition: background-color 0.3s;
 }
 
diff --git a/easyflow-ui-admin/app/src/components/categoryPanel/CategoryPanel.vue b/easyflow-ui-admin/app/src/components/categoryPanel/CategoryPanel.vue
index 4a32d23..daad036 100644
--- a/easyflow-ui-admin/app/src/components/categoryPanel/CategoryPanel.vue
+++ b/easyflow-ui-admin/app/src/components/categoryPanel/CategoryPanel.vue
@@ -10,7 +10,6 @@ const props = defineProps({
   categories: {
     type: Array,
     default: () => [],
-    required: true,
   },
   valueKey: {
     type: String,
@@ -125,6 +124,14 @@ const panelWidth = computed(() => {
   }
 });
 
+const categoryIconStyle = computed(() => ({
+  '--category-icon-color': props.iconColor,
+  '--category-icon-size':
+    typeof props.iconSize === 'number'
+      ? `${props.iconSize}px`
+      : `${props.iconSize}`,
+}));
+
 // 切换面板收缩状态
 const togglePanel = () => {
   isCollapsed.value = !isCollapsed.value;
@@ -177,18 +184,24 @@ onMounted(() => {
           @click="handleCategoryClick(category)"
         >
           <!-- 图标 -->
-          <div v-if="category[iconKey]" class="category-icon">
+          <div
+            v-if="category[iconKey]"
+            class="category-icon"
+            :style="categoryIconStyle"
+          >
             <!-- 1. 组件类型图标（Element Plus / 自定义 SVG 组件） -->
             <ElIcon v-if="isComponent(category[iconKey])">
               <component :is="category[iconKey]" />
             </ElIcon>
             <!-- 2. SVG 字符串：支持 v-html 或 img 两种渲染方式 -->
             <template v-else-if="isSvgString(category[iconKey])">
+              <!-- eslint-disable vue/no-v-html -->
               <div
                 v-if="!useImgForSvg"
                 v-html="category[iconKey]"
                 class="custom-svg"
               ></div>
+              <!-- eslint-enable vue/no-v-html -->
               <img
                 v-else
                 :src="svgToDataUrl(category[iconKey])"
@@ -221,14 +234,14 @@ onMounted(() => {
 <style scoped>
 .category-panel {
   position: relative; /* 相对定位，用于按钮绝对定位 */
-  overflow: hidden;
-  height: 100%;
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑宽度过渡 */
   box-sizing: border-box;
-  background: #ffffff;
-  border-radius: 8px;
-  border: 1px solid #f0f0f0;
+  height: 100%;
   padding: 20px;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑宽度过渡 */
 }
 
 /* 右上角收缩/展开按钮 */
@@ -242,18 +255,19 @@ onMounted(() => {
   justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: 50%;
+  cursor: pointer;
   background-color: var(--el-color-white);
   border: 1px solid #e5e7eb;
-  cursor: pointer;
-  transition: all 0.2s;
+  border-radius: 50%;
+
   /* 按钮不随面板收缩移动 */
   transform: translateX(0);
+  transition: all 0.2s;
 }
 
 .toggle-panel-btn:hover {
   background-color: #f3f4f6;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
 }
 
 .toggle-panel-btn .el-icon {
@@ -264,15 +278,12 @@ onMounted(() => {
 
 /* 分类列表容器 */
 .category-list {
-  overflow: hidden;
-  height: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 1px;
-}
-
-.category-item {
+  height: 100%;
+  overflow: hidden;
 }
 
 .category-item:last-child {
@@ -281,15 +292,15 @@ onMounted(() => {
 
 .category-item-content {
   display: flex;
+  gap: 12px;
   align-items: center;
+  padding: 6px 0 6px 14px;
   font-size: 14px;
   font-weight: 500;
   color: #333;
   cursor: pointer;
-  transition: background-color 0.2s;
-  gap: 12px;
-  padding: 6px 0 6px 14px;
   border-radius: 4px;
+  transition: background-color 0.2s;
 }
 
 .category-item-content:hover {
@@ -297,49 +308,36 @@ onMounted(() => {
 }
 
 .category-icon {
-  width: v-bind(iconSize);
-  height: v-bind(iconSize);
-  color: v-bind(iconColor);
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: var(--category-icon-size);
+  height: var(--category-icon-size);
   vertical-align: middle;
+  color: var(--category-icon-color);
 }
 
 .category-icon .el-icon {
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-.category-item-content {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  gap: 12px;
+  width: 100%;
+  height: 100%;
 }
 
 .category-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: PingFangSC, 'PingFang SC';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: left;
+  white-space: nowrap;
   transition:
     opacity 0.2s,
     transform 0.2s;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family:
-    PingFangSC,
-    PingFang SC;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  text-align: left;
-  font-style: normal;
 }
 
 /* 收缩状态样式 */
@@ -360,11 +358,11 @@ onMounted(() => {
 /* 新增：选中态样式 */
 .category-item-content.selected {
   font-weight: 600;
-  background: rgba(0, 102, 255, 0.06);
-  color: #0066ff;
+  color: #06f;
+  background: rgb(0 102 255 / 6%);
 }
 
 .category-item-content.selected:hover {
-  background: rgba(0, 102, 255, 0.06);
+  background: rgb(0 102 255 / 6%);
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/components/chat-history/ChatHistoryDetailDrawer.vue b/easyflow-ui-admin/app/src/components/chat-history/ChatHistoryDetailDrawer.vue
index 30186f5..bfe94e4 100644
--- a/easyflow-ui-admin/app/src/components/chat-history/ChatHistoryDetailDrawer.vue
+++ b/easyflow-ui-admin/app/src/components/chat-history/ChatHistoryDetailDrawer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ChatThinkingBlock } from '@easyflow/common-ui';
 import ElXMarkdown from 'vue-element-plus-x/es/XMarkdown/index.js';
 
+import { ChatThinkingBlock } from '@easyflow/common-ui';
 import { IconifyIcon } from '@easyflow/icons';
 
 import { CircleCheck, Close } from '@element-plus/icons-vue';
@@ -22,7 +22,7 @@ interface ChatHistoryDetailDrawerProps {
   session?: any;
   messages?: any[];
   hasMore?: boolean;
-  onLoadMore?: (() => void | Promise<void>) | undefined;
+  onLoadMore?: (() => Promise<void> | void) | undefined;
 }
 
 const props = withDefaults(defineProps<ChatHistoryDetailDrawerProps>(), {
@@ -128,12 +128,7 @@ async function handleLoadMore() {
 
     <div class="chat-history-detail__stream">
       <div class="chat-history-detail__stream-toolbar">
-        <ElButton
-          v-if="hasMore"
-          text
-          type="primary"
-          @click="handleLoadMore"
-        >
+        <ElButton v-if="hasMore" text type="primary" @click="handleLoadMore">
           加载更早消息
         </ElButton>
       </div>
@@ -233,48 +228,48 @@ async function handleLoadMore() {
 <style scoped>
 .chat-history-detail {
   display: flex;
+  flex-direction: column;
   height: 100%;
   min-height: 0;
-  flex-direction: column;
   background:
     radial-gradient(
       circle at top right,
-      hsl(var(--nav-ambient) / 0.1),
+      hsl(var(--nav-ambient) / 10%),
       transparent 26%
     ),
     linear-gradient(
       180deg,
-      hsl(var(--glass-border) / 0.18) 0%,
-      hsl(var(--glass-tint) / 0.34) 10%,
-      hsl(var(--surface-panel) / 0.88) 28%,
-      hsl(var(--surface-panel) / 0.96) 100%
+      hsl(var(--glass-border) / 18%) 0%,
+      hsl(var(--glass-tint) / 34%) 10%,
+      hsl(var(--surface-panel) / 88%) 28%,
+      hsl(var(--surface-panel) / 96%) 100%
     );
 }
 
 .chat-history-detail__summary {
   display: flex;
+  gap: 16px;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 16px;
   padding: 20px 24px 12px;
-  border-bottom: 1px solid hsl(var(--divider-faint) / 0.16);
+  border-bottom: 1px solid hsl(var(--divider-faint) / 16%);
 }
 
 .chat-history-detail__summary-main {
-  min-width: 0;
   flex: 1;
+  min-width: 0;
 }
 
 .chat-history-detail__title-row {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
   gap: 12px;
+  align-items: center;
 }
 
 .chat-history-detail__title {
-  margin: 0;
   min-width: 0;
+  margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: hsl(var(--text-strong));
@@ -285,19 +280,19 @@ async function handleLoadMore() {
   align-items: center;
   min-height: 26px;
   padding: 0 10px;
-  border: 1px solid hsl(var(--glass-border) / 0.38);
-  border-radius: 999px;
-  background: hsl(var(--glass-tint) / 0.54);
   font-size: 12px;
   font-weight: 600;
   color: hsl(var(--nav-item-active-foreground));
+  background: hsl(var(--glass-tint) / 54%);
+  border: 1px solid hsl(var(--glass-border) / 38%);
+  border-radius: 999px;
 }
 
 .chat-history-detail__meta-row {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
   gap: 10px;
+  align-items: center;
   margin-top: 10px;
 }
 
@@ -316,28 +311,28 @@ async function handleLoadMore() {
 
 .chat-history-detail__meta-inline {
   display: inline-flex;
-  min-width: 0;
-  align-items: center;
   gap: 6px;
+  align-items: center;
+  min-width: 0;
 }
 
 .chat-history-detail__meta-divider {
   display: inline-flex;
-  height: 12px;
   width: 1px;
-  background: hsl(var(--divider-faint) / 0.42);
+  height: 12px;
+  background: hsl(var(--divider-faint) / 42%);
 }
 
 .chat-history-detail__close {
   display: inline-flex;
-  height: 36px;
-  width: 36px;
   align-items: center;
   justify-content: center;
-  border: 1px solid hsl(var(--divider-faint) / 0.24);
-  border-radius: 999px;
-  background: hsl(var(--glass-tint) / 0.46);
+  width: 36px;
+  height: 36px;
   color: hsl(var(--text-muted));
+  background: hsl(var(--glass-tint) / 46%);
+  border: 1px solid hsl(var(--divider-faint) / 24%);
+  border-radius: 999px;
   transition:
     transform 0.18s ease,
     background-color 0.18s ease,
@@ -346,15 +341,15 @@ async function handleLoadMore() {
 
 .chat-history-detail__close:hover {
   color: hsl(var(--text-strong));
-  background: hsl(var(--surface-contrast-soft) / 0.92);
+  background: hsl(var(--surface-contrast-soft) / 92%);
   transform: translateY(-1px);
 }
 
 .chat-history-detail__stream {
   display: flex;
-  min-height: 0;
   flex: 1;
   flex-direction: column;
+  min-height: 0;
   padding: 14px 24px 20px;
 }
 
@@ -365,8 +360,8 @@ async function handleLoadMore() {
 }
 
 .chat-history-detail__scrollbar {
-  min-height: 0;
   flex: 1;
+  min-height: 0;
 }
 
 .chat-history-detail__message-list {
@@ -391,9 +386,9 @@ async function handleLoadMore() {
 
 .chat-history-detail__message-meta {
   display: inline-flex;
-  max-width: 88%;
-  align-items: center;
   gap: 10px;
+  align-items: center;
+  max-width: 88%;
   font-size: 11px;
   color: hsl(var(--text-muted));
 }
@@ -409,30 +404,30 @@ async function handleLoadMore() {
 
 .chat-history-detail__message-bubble {
   width: min(88%, 760px);
-  border: 1px solid hsl(var(--divider-faint) / 0.34);
-  border-radius: 22px;
   padding: 14px 16px;
   font-size: 14px;
   line-height: 1.72;
+  border: 1px solid hsl(var(--divider-faint) / 34%);
+  border-radius: 22px;
   backdrop-filter: blur(10px);
 }
 
 .chat-history-detail__message-bubble.is-assistant {
-  background: hsl(var(--glass-tint) / 0.88);
+  background: hsl(var(--glass-tint) / 88%);
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.48),
-    0 12px 26px -24px hsl(var(--foreground) / 0.18);
+    inset 0 1px 0 hsl(var(--glass-border) / 48%),
+    0 12px 26px -24px hsl(var(--foreground) / 18%);
 }
 
 .chat-history-detail__message-bubble.is-user {
   background: linear-gradient(
     180deg,
-    hsl(var(--primary) / 0.14) 0%,
-    hsl(var(--surface-panel) / 0.96) 100%
+    hsl(var(--primary) / 14%) 0%,
+    hsl(var(--surface-panel) / 96%) 100%
   );
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.42),
-    0 16px 30px -26px hsl(var(--primary) / 0.24);
+    inset 0 1px 0 hsl(var(--glass-border) / 42%),
+    0 16px 30px -26px hsl(var(--primary) / 24%);
 }
 
 .chat-history-detail__message-chains {
@@ -448,23 +443,23 @@ async function handleLoadMore() {
 
 .chat-history-detail__tool-panel {
   overflow: hidden;
-  border: 1px solid hsl(var(--divider-faint) / 0.24);
+  background: hsl(var(--surface-panel) / 68%);
+  border: 1px solid hsl(var(--divider-faint) / 24%);
   border-radius: 14px;
-  background: hsl(var(--surface-panel) / 0.68);
-  box-shadow: inset 0 1px 0 hsl(var(--glass-border) / 0.18);
+  box-shadow: inset 0 1px 0 hsl(var(--glass-border) / 18%);
 }
 
 .chat-history-detail__tool-title {
   display: flex;
-  min-width: 0;
-  align-items: center;
   gap: 8px;
+  align-items: center;
+  min-width: 0;
   padding-left: 6px;
 }
 
 .chat-history-detail__tool-name {
-  min-width: 0;
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -472,13 +467,13 @@ async function handleLoadMore() {
 
 .chat-history-detail__tool-status {
   display: inline-flex;
-  align-items: center;
   gap: 6px;
+  align-items: center;
   padding: 4px 8px;
-  border-radius: 999px;
-  background: hsl(var(--surface-contrast-soft) / 0.92);
   font-size: 12px;
   color: hsl(var(--text-muted));
+  background: hsl(var(--surface-contrast-soft) / 92%);
+  border-radius: 999px;
 }
 
 .chat-history-detail__markdown {
@@ -488,9 +483,9 @@ async function handleLoadMore() {
 }
 
 .chat-history-detail__markdown :deep(.markdown-body) {
-  background: transparent;
   font-size: inherit;
   line-height: inherit;
+  background: transparent;
 }
 
 .chat-history-detail__markdown :deep(.markdown-body > :first-child) {
@@ -508,8 +503,8 @@ async function handleLoadMore() {
 
 .chat-history-detail__markdown :deep(pre) {
   max-width: 100%;
-  overflow: auto;
   margin-top: 0;
+  overflow: auto;
 }
 
 .chat-history-detail__tool-panel :deep(.el-collapse-item__wrap) {
@@ -520,7 +515,7 @@ async function handleLoadMore() {
   min-height: 44px;
   padding-right: 14px;
   background: transparent;
-  border-bottom-color: hsl(var(--divider-faint) / 0.16);
+  border-bottom-color: hsl(var(--divider-faint) / 16%);
 }
 
 .chat-history-detail__message-bubble :deep(.el-collapse-item__content) {
@@ -550,8 +545,8 @@ async function handleLoadMore() {
 
   .chat-history-detail__message-bubble,
   .chat-history-detail__message-meta {
-    max-width: 100%;
     width: 100%;
+    max-width: 100%;
   }
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/components/chat/chat.vue b/easyflow-ui-admin/app/src/components/chat/chat.vue
index 9715550..19017c4 100644
--- a/easyflow-ui-admin/app/src/components/chat/chat.vue
+++ b/easyflow-ui-admin/app/src/components/chat/chat.vue
@@ -5,18 +5,23 @@ import type {
 } from 'vue-element-plus-x/types/BubbleList';
 import type { TypewriterInstance } from 'vue-element-plus-x/types/Typewriter';
 
-import {
-  ChatThinkingBlock,
-  type ChatThinkingBlockStatus,
-} from '@easyflow/common-ui';
+import type { ChatThinkingBlockStatus } from '@easyflow/common-ui';
 import type { BotInfo, ChatMessage } from '@easyflow/types';
 
-import { nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import {
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  watchEffect,
+} from 'vue';
 import ElBubbleList from 'vue-element-plus-x/es/BubbleList/index.js';
 import ElSender from 'vue-element-plus-x/es/Sender/index.js';
 import ElXMarkdown from 'vue-element-plus-x/es/XMarkdown/index.js';
+import { useRoute, useRouter } from 'vue-router';
 
+import { ChatThinkingBlock } from '@easyflow/common-ui';
 import { IconifyIcon } from '@easyflow/icons';
 import { $t } from '@easyflow/locales';
 import { useBotStore } from '@easyflow/stores';
@@ -51,8 +56,8 @@ import SendingIcon from '../icons/SendingIcon.vue';
 
 type Think = {
   reasoning_content?: string;
-  thinkingStatus?: ChatThinkingBlockStatus;
   thinkingExpanded?: boolean;
+  thinkingStatus?: ChatThinkingBlockStatus;
 };
 
 type Tool = {
@@ -168,7 +173,8 @@ const updateBackToBottomButtonVisible = () => {
     showBackToBottomButton.value = false;
     return;
   }
-  const { scrollTop, scrollHeight, clientHeight } = bubbleListScrollElement.value;
+  const { scrollTop, scrollHeight, clientHeight } =
+    bubbleListScrollElement.value;
   showBackToBottomButton.value =
     scrollHeight - (scrollTop + clientHeight) > BACK_TO_BOTTOM_THRESHOLD;
 };
@@ -571,7 +577,6 @@ onBeforeUnmount(() => {
                   </ElCollapse>
                 </template>
               </template>
-
             </div>
           </template>
           <!-- 自定义头像 -->
@@ -725,7 +730,7 @@ onBeforeUnmount(() => {
   background: var(--el-bg-color-overlay);
   border: 1px solid var(--el-border-color-light);
   border-radius: 999px;
-  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 6px 10px rgb(0 0 0 / 8%);
   transition: all 0.2s ease;
 }
 
@@ -775,10 +780,10 @@ onBeforeUnmount(() => {
 }
 
 :deep(.chat-tool-panel.el-collapse) {
-  border: 1px solid hsl(var(--divider-faint) / 0.26);
+  background: hsl(var(--surface-panel) / 70%);
+  border: 1px solid hsl(var(--divider-faint) / 26%);
   border-radius: 14px;
-  background: hsl(var(--surface-panel) / 0.7);
-  box-shadow: inset 0 1px 0 hsl(var(--glass-border) / 0.2);
+  box-shadow: inset 0 1px 0 hsl(var(--glass-border) / 20%);
 }
 
 :deep(.chat-tool-panel .el-collapse-item) {
@@ -794,7 +799,7 @@ onBeforeUnmount(() => {
   min-height: 44px;
   padding-right: 14px;
   background: transparent;
-  border-bottom-color: hsl(var(--divider-faint) / 0.16);
+  border-bottom-color: hsl(var(--divider-faint) / 16%);
 }
 
 :deep(.chat-tool-panel .el-collapse-item__content) {
diff --git a/easyflow-ui-admin/app/src/components/collapse/CustomCoolapse.vue b/easyflow-ui-admin/app/src/components/collapse/CustomCoolapse.vue
index 0ff32f2..0817262 100644
--- a/easyflow-ui-admin/app/src/components/collapse/CustomCoolapse.vue
+++ b/easyflow-ui-admin/app/src/components/collapse/CustomCoolapse.vue
@@ -122,162 +122,6 @@ const collapseAll = () => {
 </template>
 
 <style scoped>
-.accordion-container {
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 20px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-.title {
-  text-align: center;
-  color: var(--el-text-color-secondary);
-  margin-bottom: 8px;
-  font-size: 2rem;
-  font-weight: 600;
-}
-
-.subtitle {
-  text-align: center;
-  color: var(--el-text-color-secondary);
-  margin-bottom: 30px;
-  font-size: 1.1rem;
-}
-
-/* 控制面板样式 */
-.controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 30px;
-  padding: 20px;
-  background: var(--el-bg-color);
-  border-radius: 8px;
-  border: 1px solid #e9ecef;
-}
-
-.control-group {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: var(--el-text-color-secondary);
-  cursor: pointer;
-}
-
-.checkbox {
-  width: 16px;
-  height: 16px;
-}
-
-.control-btn {
-  padding: 8px 16px;
-  border: 1px solid #3498db;
-  background: var(--el-bg-color);
-  color: var(--el-text-color-secondary);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.3s ease;
-}
-
-.control-btn:hover {
-  background: #3498db;
-  background: var(--el-color-primary-light-9);
-}
-
-/* 折叠面板列表 */
-.accordion-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.accordion-item {
-  border: 1px solid #e1e5e9;
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--el-bg-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
-}
-
-.accordion-item:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.accordion-item--active {
-  border-color: #3498db;
-}
-
-/* 面板头部 */
-.accordion-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  background: var(--el-bg-color);
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  user-select: none;
-}
-
-.accordion-header:hover {
-  background: var(--el-color-primary-light-9);
-}
-
-.accordion-title {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 500;
-  color: var(--el-text-color-secondary);
-  padding-left: 12px;
-}
-
-.accordion-icon {
-  transition: transform 0.3s ease;
-  color: #7f8c8d;
-  font-size: 12px;
-}
-
-.accordion-icon--rotated {
-  transform: rotate(180deg);
-  color: #3498db;
-}
-
-.accordion-content {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.4s ease;
-  background: var(--el-bg-color);
-}
-
-.accordion-content--open {
-  max-height: 200px;
-}
-
-.accordion-content-inner {
-  padding: 20px;
-  border-top: 1px solid #e1e5e9;
-}
-
-.accordion-content-inner p {
-  margin: 0;
-  line-height: 1.6;
-  color: var(--el-text-color-secondary);
-  font-size: 14px;
-}
-.column-header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
 /* 响应式设计 */
 @media (max-width: 768px) {
   .accordion-container {
@@ -306,4 +150,162 @@ const collapseAll = () => {
     font-size: 1rem;
   }
 }
+
+.accordion-container {
+  max-width: 100%;
+  padding: 20px;
+  margin: 0 auto;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.title {
+  margin-bottom: 8px;
+  font-size: 2rem;
+  font-weight: 600;
+  color: var(--el-text-color-secondary);
+  text-align: center;
+}
+
+.subtitle {
+  margin-bottom: 30px;
+  font-size: 1.1rem;
+  color: var(--el-text-color-secondary);
+  text-align: center;
+}
+
+/* 控制面板样式 */
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  margin-bottom: 30px;
+  background: var(--el-bg-color);
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+}
+
+.control-group {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+
+.checkbox-label {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+  cursor: pointer;
+}
+
+.checkbox {
+  width: 16px;
+  height: 16px;
+}
+
+.control-btn {
+  padding: 8px 16px;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+  cursor: pointer;
+  background: var(--el-bg-color);
+  border: 1px solid #3498db;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.control-btn:hover {
+  background: #3498db;
+  background: var(--el-color-primary-light-9);
+}
+
+/* 折叠面板列表 */
+.accordion-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.accordion-item {
+  overflow: hidden;
+  background: var(--el-bg-color);
+  border: 1px solid #e1e5e9;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
+  transition: all 0.3s ease;
+}
+
+.accordion-item:hover {
+  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+}
+
+.accordion-item--active {
+  border-color: #3498db;
+}
+
+/* 面板头部 */
+.accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  cursor: pointer;
+  user-select: none;
+  background: var(--el-bg-color);
+  transition: background-color 0.3s ease;
+}
+
+.accordion-header:hover {
+  background: var(--el-color-primary-light-9);
+}
+
+.accordion-title {
+  padding-left: 12px;
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: var(--el-text-color-secondary);
+}
+
+.accordion-icon {
+  font-size: 12px;
+  color: #7f8c8d;
+  transition: transform 0.3s ease;
+}
+
+.accordion-icon--rotated {
+  color: #3498db;
+  transform: rotate(180deg);
+}
+
+.accordion-content {
+  max-height: 0;
+  overflow: hidden;
+  background: var(--el-bg-color);
+  transition: max-height 0.4s ease;
+}
+
+.accordion-content--open {
+  max-height: 200px;
+}
+
+.accordion-content-inner {
+  padding: 20px;
+  border-top: 1px solid #e1e5e9;
+}
+
+.accordion-content-inner p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--el-text-color-secondary);
+}
+
+.column-header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 </style>
diff --git a/easyflow-ui-admin/app/src/components/headerSearch/HeaderSearch.vue b/easyflow-ui-admin/app/src/components/headerSearch/HeaderSearch.vue
index a01af2c..a961003 100644
--- a/easyflow-ui-admin/app/src/components/headerSearch/HeaderSearch.vue
+++ b/easyflow-ui-admin/app/src/components/headerSearch/HeaderSearch.vue
@@ -171,9 +171,9 @@ const handleDropdownClick = (button) => {
 <style scoped>
 .custom-header {
   display: flex;
+  gap: 16px;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
   width: 100%;
 }
 
@@ -192,8 +192,8 @@ const handleDropdownClick = (button) => {
   display: flex;
   flex: 1;
   flex-wrap: wrap;
-  align-items: center;
   gap: 12px;
+  align-items: center;
 }
 
 .search-middle {
@@ -208,20 +208,20 @@ const handleDropdownClick = (button) => {
 
 .search-input :deep(.el-input__wrapper) {
   min-height: 40px;
-  background: hsl(var(--surface-contrast-soft) / 0.92);
+  background: hsl(var(--surface-contrast-soft) / 92%);
   border-radius: 14px;
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.44),
-    0 10px 24px -24px hsl(var(--foreground) / 0.24);
+    inset 0 1px 0 hsl(var(--glass-border) / 44%),
+    0 10px 24px -24px hsl(var(--foreground) / 24%);
 }
 
 .search-input :deep(.el-input__wrapper:hover),
 .search-input :deep(.el-input__wrapper.is-focus) {
-  background: hsl(var(--surface-subtle) / 0.98);
+  background: hsl(var(--surface-subtle) / 98%);
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.56),
-    0 0 0 3px hsl(var(--primary) / 0.08),
-    0 12px 24px -24px hsl(var(--foreground) / 0.24);
+    inset 0 1px 0 hsl(var(--glass-border) / 56%),
+    0 0 0 3px hsl(var(--primary) / 8%),
+    0 12px 24px -24px hsl(var(--foreground) / 24%);
 }
 
 .search-prefix {
@@ -231,8 +231,8 @@ const handleDropdownClick = (button) => {
 .header-right {
   flex-shrink: 0;
   flex-wrap: wrap;
-  justify-content: flex-end;
   gap: 12px;
+  justify-content: flex-end;
 }
 
 .header-right :deep(.el-button),
@@ -241,24 +241,24 @@ const handleDropdownClick = (button) => {
   height: 32px;
   min-height: 32px;
   padding-inline: 18px;
-  border-radius: 10px;
   border-color: transparent;
+  border-radius: 10px;
   box-shadow: none;
 }
 
 .header-right :deep(.el-button:not(.el-button--primary)),
 .search-group :deep(.el-button:not(.el-button--primary)) {
   color: hsl(var(--text-strong));
-  background: hsl(var(--surface-contrast-soft) / 0.86);
+  background: hsl(var(--surface-contrast-soft) / 86%);
   border-color: transparent;
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.34),
-    0 10px 24px -24px hsl(var(--foreground) / 0.2);
+    inset 0 1px 0 hsl(var(--glass-border) / 34%),
+    0 10px 24px -24px hsl(var(--foreground) / 20%);
 }
 
 .header-right :deep(.el-button--primary),
 .search-group :deep(.el-button--primary) {
-  box-shadow: 0 16px 28px -22px hsl(var(--primary) / 0.48);
+  box-shadow: 0 16px 28px -22px hsl(var(--primary) / 48%);
 }
 
 .dropdown-label {
@@ -268,8 +268,8 @@ const handleDropdownClick = (button) => {
 @media (max-width: 768px) {
   .custom-header {
     flex-direction: column;
-    align-items: stretch;
     gap: 12px;
+    align-items: stretch;
   }
 
   .header-right {
diff --git a/easyflow-ui-admin/app/src/components/json/ShowJson.vue b/easyflow-ui-admin/app/src/components/json/ShowJson.vue
index 3176932..04ab5b1 100644
--- a/easyflow-ui-admin/app/src/components/json/ShowJson.vue
+++ b/easyflow-ui-admin/app/src/components/json/ShowJson.vue
@@ -6,9 +6,10 @@ import { preferences } from '@easyflow/preferences';
 import { ElEmpty } from 'element-plus';
 import { JsonViewer } from 'vue3-json-viewer';
 
-import 'vue3-json-viewer/dist/vue3-json-viewer.css';
 import { getEmptyStateImageUrl } from '#/utils/assets';
 
+import 'vue3-json-viewer/dist/vue3-json-viewer.css';
+
 defineProps({
   value: {
     required: true,
diff --git a/easyflow-ui-admin/app/src/components/page/CardList.vue b/easyflow-ui-admin/app/src/components/page/CardList.vue
index 4f2f492..9c5f5b9 100644
--- a/easyflow-ui-admin/app/src/components/page/CardList.vue
+++ b/easyflow-ui-admin/app/src/components/page/CardList.vue
@@ -84,14 +84,25 @@ const resolvedPrimaryAction = computed(() => {
   return props.primaryAction;
 });
 
+function resolveActionPlacement(
+  action: ActionButton,
+  index: number,
+): ActionPlacement {
+  if (action.placement) {
+    return action.placement;
+  }
+  if (resolvedPrimaryAction.value) {
+    return 'menu';
+  }
+  return index < 3 ? 'inline' : 'menu';
+}
+
 const resolvedActions = computed<ResolvedActionButton[]>(() => {
   return props.actions
     .filter((action) => hasPermission(action.permission))
     .map((action, index) => ({
       ...action,
-      placement:
-        action.placement ||
-        (resolvedPrimaryAction.value ? 'menu' : index < 3 ? 'inline' : 'menu'),
+      placement: resolveActionPlacement(action, index),
       tone:
         action.tone ||
         (action.className?.includes('danger') ? 'danger' : 'default'),
@@ -111,8 +122,8 @@ const menuActions = computed(() => {
 const showFooter = computed(() => {
   return Boolean(
     resolvedPrimaryAction.value ||
-      inlineActions.value.length ||
-      menuActions.value.length,
+      inlineActions.value.length > 0 ||
+      menuActions.value.length > 0,
   );
 });
 
@@ -132,10 +143,8 @@ function handleActionClick(event: Event, action: ActionButton, item: any) {
       v-for="(item, index) in props.data"
       :key="item.id ?? index"
       shadow="never"
-      :class="[
-        'card-item',
-        { 'card-item--interactive': resolvedPrimaryAction },
-      ]"
+      class="card-item"
+      :class="[{ 'card-item--interactive': resolvedPrimaryAction }]"
       :role="resolvedPrimaryAction ? 'button' : undefined"
       :tabindex="resolvedPrimaryAction ? 0 : undefined"
       @click="handlePrimaryAction(item)"
@@ -201,7 +210,7 @@ function handleActionClick(event: Event, action: ActionButton, item: any) {
           </div>
 
           <div
-            v-if="inlineActions.length || menuActions.length"
+            v-if="inlineActions.length > 0 || menuActions.length > 0"
             class="card-actions"
             @click.stop
           >
diff --git a/easyflow-ui-admin/app/src/components/page/ListPageShell.vue b/easyflow-ui-admin/app/src/components/page/ListPageShell.vue
index 1e62cd1..b42d92b 100644
--- a/easyflow-ui-admin/app/src/components/page/ListPageShell.vue
+++ b/easyflow-ui-admin/app/src/components/page/ListPageShell.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type {CSSProperties} from 'vue';
-import {computed, useSlots} from 'vue';
+import type { CSSProperties } from 'vue';
+
+import { computed, useSlots } from 'vue';
 
 interface Props {
   contentPadding?: number | string;
@@ -67,8 +68,8 @@ const contentStyle = computed((): CSSProperties => {
   display: flex;
   flex: 1;
   flex-direction: column;
-  min-height: 0;
   gap: 16px;
+  min-height: 0;
 }
 
 .list-page-shell.is-dense {
@@ -78,9 +79,9 @@ const contentStyle = computed((): CSSProperties => {
 .list-page-shell__toolbar {
   position: relative;
   display: flex;
+  gap: 16px;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 16px;
   padding: 8px 6px 2px;
   background: transparent;
   border: none;
@@ -92,8 +93,8 @@ const contentStyle = computed((): CSSProperties => {
   top: 12px;
   z-index: 5;
   padding: 10px 10px 6px;
-  background: hsl(var(--glass-tint) / 0.7);
-  border: 1px solid hsl(var(--glass-border) / 0.44);
+  background: hsl(var(--glass-tint) / 70%);
+  border: 1px solid hsl(var(--glass-border) / 44%);
   border-radius: 20px;
   box-shadow: var(--shadow-toolbar);
   backdrop-filter: blur(var(--glass-blur)) saturate(155%);
@@ -110,40 +111,41 @@ const contentStyle = computed((): CSSProperties => {
 
 .list-page-shell__content {
   --list-page-shell-content-padding: 0px;
+
+  position: relative;
   display: flex;
   flex: 1;
   flex-direction: column;
   min-height: 0;
-  position: relative;
-  overflow: hidden;
   padding: var(--list-page-shell-content-padding);
+  overflow: hidden;
   background: linear-gradient(
     180deg,
-    hsl(var(--glass-border) / 0.84) 0%,
-    hsl(var(--surface-panel) / 0.94) 28%,
-    hsl(var(--surface-panel) / 0.97) 100%
+    hsl(var(--glass-border) / 84%) 0%,
+    hsl(var(--surface-panel) / 94%) 28%,
+    hsl(var(--surface-panel) / 97%) 100%
   );
-  border: 1px solid hsl(var(--glass-border) / 0.58);
+  border: 1px solid hsl(var(--glass-border) / 58%);
   border-radius: 24px;
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.72),
-    0 24px 54px -42px hsl(var(--primary) / 0.22),
-    0 18px 42px -34px hsl(var(--foreground) / 0.1);
+    inset 0 1px 0 hsl(var(--glass-border) / 72%),
+    0 24px 54px -42px hsl(var(--primary) / 22%),
+    0 18px 42px -34px hsl(var(--foreground) / 10%);
   backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(145%);
 }
 
 .list-page-shell.is-subtle .list-page-shell__content {
   background: linear-gradient(
     180deg,
-    hsl(var(--glass-tint) / 0.84) 0%,
-    hsl(var(--surface-contrast-soft) / 0.94) 100%
+    hsl(var(--glass-tint) / 84%) 0%,
+    hsl(var(--surface-contrast-soft) / 94%) 100%
   );
   box-shadow: none;
 }
 
 .list-page-shell.is-plain .list-page-shell__content {
-  background: hsl(var(--surface-panel) / 0.96);
-  border: 1px solid hsl(var(--divider-faint) / 0.58);
+  background: hsl(var(--surface-panel) / 96%);
+  border: 1px solid hsl(var(--divider-faint) / 58%);
   border-radius: 20px;
   box-shadow: none;
   backdrop-filter: none;
@@ -162,14 +164,10 @@ const contentStyle = computed((): CSSProperties => {
   background:
     radial-gradient(
       ellipse 84% 72% at 10% 0%,
-      hsl(var(--nav-ambient) / 0.18) 0%,
+      hsl(var(--nav-ambient) / 18%) 0%,
       transparent 68%
     ),
-    linear-gradient(
-      180deg,
-      hsl(var(--nav-flow-trace) / 0.08) 0%,
-      transparent 78%
-    );
+    linear-gradient(180deg, hsl(var(--nav-flow-trace) / 8%) 0%, transparent 78%);
 }
 
 .list-page-shell__content > * {
@@ -195,6 +193,7 @@ const contentStyle = computed((): CSSProperties => {
   --el-table-border-color: hsl(var(--table-row-border));
   --el-table-current-row-bg-color: hsl(var(--table-row-hover));
   --el-fill-color-blank: transparent;
+
   background: transparent;
 }
 
@@ -216,8 +215,8 @@ const contentStyle = computed((): CSSProperties => {
   font-size: 13px;
   font-weight: 600;
   color: hsl(var(--text-strong));
-  background: hsl(var(--table-header-bg) / 0.86);
-  border-bottom: 1px solid hsl(var(--divider-faint) / 0.38);
+  background: hsl(var(--table-header-bg) / 86%);
+  border-bottom: 1px solid hsl(var(--divider-faint) / 38%);
 }
 
 .list-page-shell__content :deep(.el-table th.el-table__cell:first-child) {
@@ -232,7 +231,7 @@ const contentStyle = computed((): CSSProperties => {
 .list-page-shell__content :deep(.el-table--border .el-table__cell) {
   padding: 14px 0;
   border-right: none;
-  border-bottom: 1px solid hsl(var(--divider-faint) / 0.46);
+  border-bottom: 1px solid hsl(var(--divider-faint) / 46%);
 }
 
 .list-page-shell__content :deep(.el-table__row:hover > td.el-table__cell) {
diff --git a/easyflow-ui-admin/app/src/components/page/PageData.vue b/easyflow-ui-admin/app/src/components/page/PageData.vue
index e52ba43..50c4aaa 100644
--- a/easyflow-ui-admin/app/src/components/page/PageData.vue
+++ b/easyflow-ui-admin/app/src/components/page/PageData.vue
@@ -138,7 +138,7 @@ onMounted(() => {
   flex: 1;
   flex-direction: column;
   min-height: 0;
-  padding: 18px 20px 18px;
+  padding: 18px 20px;
 }
 
 .page-data-container__body {
diff --git a/easyflow-ui-admin/app/src/components/page/PageSide.vue b/easyflow-ui-admin/app/src/components/page/PageSide.vue
index bcd9da1..0bd88ee 100644
--- a/easyflow-ui-admin/app/src/components/page/PageSide.vue
+++ b/easyflow-ui-admin/app/src/components/page/PageSide.vue
@@ -114,6 +114,7 @@ const isSvgString = (icon: any) => {
               v-if="item.icon"
               class="ml-[-3px] flex items-center justify-center"
             >
+              <!-- eslint-disable vue/no-v-html -->
               <div
                 v-if="isSvgString(item.icon)"
                 v-html="item.icon"
@@ -127,6 +128,7 @@ const isSvgString = (icon: any) => {
                 }"
                 class="svg-container"
               ></div>
+              <!-- eslint-enable vue/no-v-html -->
               <img
                 v-else-if="
                   typeof item.icon === 'string' && !isComponent(item.icon)
diff --git a/easyflow-ui-admin/app/src/components/page/__tests__/CardList.test.ts b/easyflow-ui-admin/app/src/components/page/__tests__/CardList.test.ts
index ef6629c..44965e2 100644
--- a/easyflow-ui-admin/app/src/components/page/__tests__/CardList.test.ts
+++ b/easyflow-ui-admin/app/src/components/page/__tests__/CardList.test.ts
@@ -1,6 +1,7 @@
-import {mount} from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+
+import { describe, expect, it, vi } from 'vitest';
 
-import {describe, expect, it, vi} from 'vitest';
 import CardList from '../CardList.vue';
 
 const { hasAccessByCodes } = vi.hoisted(() => ({
@@ -13,7 +14,7 @@ vi.mock('@easyflow/access', () => ({
   }),
 }));
 
-describe('CardList', () => {
+describe('cardList', () => {
   function mountCardList(props: Record<string, unknown>) {
     return mount(CardList, {
       props: {
diff --git a/easyflow-ui-admin/app/src/components/tree/Tree.vue b/easyflow-ui-admin/app/src/components/tree/Tree.vue
index 50d2bfa..913568d 100644
--- a/easyflow-ui-admin/app/src/components/tree/Tree.vue
+++ b/easyflow-ui-admin/app/src/components/tree/Tree.vue
@@ -233,14 +233,14 @@ onMounted(() => {
         v-loading="loading"
         :element-loading-text="loadingText"
       >
-        <template #default="{ node, data }">
+        <template #default="{ node, data: itemData }">
           <span class="tree-node">
             <span class="node-label">{{ $t(node.label) }}</span>
             <span
-              v-if="showCount && data[defaultProps.children]"
+              v-if="showCount && itemData[defaultProps.children]"
               class="node-count"
             >
-              ({{ data[defaultProps.children].length }})
+              ({{ itemData[defaultProps.children].length }})
             </span>
           </span>
         </template>
@@ -278,17 +278,17 @@ onMounted(() => {
 
 .tree-node {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   min-width: 0;
 }
 
 .node-label {
   overflow: hidden;
-  color: var(--el-text-color-primary);
+  text-overflow: ellipsis;
   font-size: 14px;
   font-weight: 500;
-  text-overflow: ellipsis;
+  color: var(--el-text-color-primary);
   white-space: nowrap;
 }
 
@@ -299,22 +299,22 @@ onMounted(() => {
   min-width: 22px;
   height: 20px;
   padding: 0 6px;
-  color: var(--el-text-color-secondary);
   font-size: 12px;
   line-height: 1;
+  color: var(--el-text-color-secondary);
   background: var(--el-fill-color);
   border-radius: 999px;
 }
 
 :deep(.el-tree) {
-  background: transparent;
   color: inherit;
+  background: transparent;
 }
 
 :deep(.el-tree-node__content) {
   height: 38px;
-  margin-bottom: 4px;
   padding: 0 10px;
+  margin-bottom: 4px;
   border-radius: 10px;
   transition:
     background-color 0.18s ease,
diff --git a/easyflow-ui-admin/app/src/components/upload/DragFileUpload.vue b/easyflow-ui-admin/app/src/components/upload/DragFileUpload.vue
index d563104..2ae7513 100644
--- a/easyflow-ui-admin/app/src/components/upload/DragFileUpload.vue
+++ b/easyflow-ui-admin/app/src/components/upload/DragFileUpload.vue
@@ -9,7 +9,10 @@ import { useAccessStore } from '@easyflow/stores';
 import { UploadFilled } from '@element-plus/icons-vue';
 import { ElIcon, ElMessage, ElUpload } from 'element-plus';
 
-import { normalizeUploadError, resolveUploadPath } from '#/utils/upload-response';
+import {
+  normalizeUploadError,
+  resolveUploadPath,
+} from '#/utils/upload-response';
 
 const props = defineProps({
   action: {
diff --git a/easyflow-ui-admin/app/src/components/upload/Upload.vue b/easyflow-ui-admin/app/src/components/upload/Upload.vue
index 7d8486a..7f9462d 100644
--- a/easyflow-ui-admin/app/src/components/upload/Upload.vue
+++ b/easyflow-ui-admin/app/src/components/upload/Upload.vue
@@ -8,8 +8,11 @@ import { useAccessStore } from '@easyflow/stores';
 
 import { ElButton, ElMessage, ElUpload } from 'element-plus';
 
-import { normalizeUploadError, resolveUploadPath } from '#/utils/upload-response';
 import { $t } from '#/locales';
+import {
+  normalizeUploadError,
+  resolveUploadPath,
+} from '#/utils/upload-response';
 
 const props = defineProps({
   action: {
diff --git a/easyflow-ui-admin/app/src/components/upload/UploadAvatar.vue b/easyflow-ui-admin/app/src/components/upload/UploadAvatar.vue
index 4dd7316..2f961e5 100644
--- a/easyflow-ui-admin/app/src/components/upload/UploadAvatar.vue
+++ b/easyflow-ui-admin/app/src/components/upload/UploadAvatar.vue
@@ -10,7 +10,10 @@ import { Plus } from '@element-plus/icons-vue';
 import { ElIcon, ElImage, ElMessage, ElUpload } from 'element-plus';
 
 import { $t } from '#/locales';
-import { normalizeUploadError, resolveUploadPath } from '#/utils/upload-response';
+import {
+  normalizeUploadError,
+  resolveUploadPath,
+} from '#/utils/upload-response';
 
 const props = defineProps({
   action: {
@@ -134,20 +137,20 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
 
 <style>
 .avatar-uploader .el-upload {
-  width: var(--avatar-size);
-  height: var(--avatar-size);
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
   overflow: hidden;
   cursor: pointer;
-  border: 1px solid hsl(var(--input) / 0.92);
+  background: hsl(var(--modal-surface-strong) / 92%);
+  border: 1px solid hsl(var(--input) / 92%);
   border-radius: 50%;
-  background: hsl(var(--modal-surface-strong) / 0.92);
   box-shadow:
-    inset 0 1px 0 hsl(0 0% 100% / 0.72),
-    0 16px 28px -24px hsl(var(--foreground) / 0.24);
+    inset 0 1px 0 hsl(0deg 0% 100% / 72%),
+    0 16px 28px -24px hsl(var(--foreground) / 24%);
   transition:
     transform var(--el-transition-duration-fast),
     border-color var(--el-transition-duration-fast),
@@ -155,26 +158,26 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
 }
 
 .avatar-uploader .el-upload:hover {
-  border-color: hsl(var(--primary) / 0.52);
-  transform: translateY(-1px);
+  border-color: hsl(var(--primary) / 52%);
   box-shadow:
-    inset 0 1px 0 hsl(0 0% 100% / 0.76),
-    0 20px 36px -26px hsl(var(--modal-preview-glow) / 0.3);
+    inset 0 1px 0 hsl(0deg 0% 100% / 76%),
+    0 20px 36px -26px hsl(var(--modal-preview-glow) / 30%);
+  transform: translateY(-1px);
 }
 
 .avatar-uploader--soft-panel .el-upload {
   background:
     radial-gradient(
       circle at top,
-      hsl(var(--modal-preview-glow) / 0.14),
+      hsl(var(--modal-preview-glow) / 14%),
       transparent 60%
     ),
     linear-gradient(
       145deg,
-      hsl(var(--modal-preview-surface) / 0.98),
-      hsl(var(--modal-preview-surface-strong) / 0.9)
+      hsl(var(--modal-preview-surface) / 98%),
+      hsl(var(--modal-preview-surface-strong) / 90%)
     );
-  border-color: hsl(var(--modal-preview-border) / 0.9);
+  border-color: hsl(var(--modal-preview-border) / 90%);
 }
 
 .avatar-uploader--rounded .el-upload {
diff --git a/easyflow-ui-admin/app/src/locales/index.ts b/easyflow-ui-admin/app/src/locales/index.ts
index d647d1b..f0c7e2a 100644
--- a/easyflow-ui-admin/app/src/locales/index.ts
+++ b/easyflow-ui-admin/app/src/locales/index.ts
@@ -2,7 +2,10 @@ import type { Language } from 'element-plus/es/locale';
 
 import type { App } from 'vue';
 
-import type { LocaleSetupOptions, SupportedLanguagesType } from '@easyflow/locales';
+import type {
+  LocaleSetupOptions,
+  SupportedLanguagesType,
+} from '@easyflow/locales';
 
 import { ref } from 'vue';
 
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/aiResource.json b/easyflow-ui-admin/app/src/locales/langs/en-US/aiResource.json
index f18527a..742011d 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/aiResource.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/aiResource.json
@@ -1,20 +1,20 @@
 {
-    "id": "Id",
-    "deptId": "DeptId",
-    "tenantId": "TenantId",
-    "resourceType": "ResourceType",
-    "resourceName": "ResourceName",
-    "suffix": "Suffix",
-    "resourceUrl": "ResourceUrl",
-    "origin": "Origin",
-    "status": "Status",
-    "created": "Created",
-    "createdBy": "CreatedBy",
-    "modified": "Modified",
-    "modifiedBy": "ModifiedBy",
-    "options": "Options",
-    "isDeleted": "IsDeleted",
-    "fileSize": "FileSize",
-    "categoryId": "Category",
-    "choose": "Choose"
+  "id": "Id",
+  "deptId": "DeptId",
+  "tenantId": "TenantId",
+  "resourceType": "ResourceType",
+  "resourceName": "ResourceName",
+  "suffix": "Suffix",
+  "resourceUrl": "ResourceUrl",
+  "origin": "Origin",
+  "status": "Status",
+  "created": "Created",
+  "createdBy": "CreatedBy",
+  "modified": "Modified",
+  "modifiedBy": "ModifiedBy",
+  "options": "Options",
+  "isDeleted": "IsDeleted",
+  "fileSize": "FileSize",
+  "categoryId": "Category",
+  "choose": "Choose"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflowCategory.json b/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflowCategory.json
index ed18a81..9f62653 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflowCategory.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflowCategory.json
@@ -1,10 +1,10 @@
 {
-    "id": "Id",
-    "categoryName": "CategoryName",
-    "sortNo": "SortNo",
-    "created": "Created",
-    "createdBy": "CreatedBy",
-    "modified": "Modified",
-    "modifiedBy": "ModifiedBy",
-    "status": "Status"
-}
\ No newline at end of file
+  "id": "Id",
+  "categoryName": "CategoryName",
+  "sortNo": "SortNo",
+  "created": "Created",
+  "createdBy": "CreatedBy",
+  "modified": "Modified",
+  "modifiedBy": "ModifiedBy",
+  "status": "Status"
+}
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflowExecRecord.json b/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflowExecRecord.json
index a568b58..860551d 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflowExecRecord.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflowExecRecord.json
@@ -1,25 +1,25 @@
 {
-    "id": "Id",
-    "execKey": "ExecKey",
-    "workflowId": "WorkflowId",
-    "title": "Title",
-    "description": "Description",
-    "input": "Input",
-    "output": "Output",
-    "workflowJson": "WorkflowJson",
-    "startTime": "StartTime",
-    "endTime": "EndTime",
-    "tokens": "Tokens",
-    "status": "Status",
-    "createdKey": "CreatedKey",
-    "createdBy": "CreatedBy",
-    "errorInfo": "ErrorInfo",
-    "moduleName": "ExecuteRecords",
-    "execTime": "TimeConsuming",
-    "status1": "Running",
-    "status5": "Suspend",
-    "status10": "Error",
-    "status20": "Success",
-    "status21": "Failed",
-    "status22": "Cancel"
+  "id": "Id",
+  "execKey": "ExecKey",
+  "workflowId": "WorkflowId",
+  "title": "Title",
+  "description": "Description",
+  "input": "Input",
+  "output": "Output",
+  "workflowJson": "WorkflowJson",
+  "startTime": "StartTime",
+  "endTime": "EndTime",
+  "tokens": "Tokens",
+  "status": "Status",
+  "createdKey": "CreatedKey",
+  "createdBy": "CreatedBy",
+  "errorInfo": "ErrorInfo",
+  "moduleName": "ExecuteRecords",
+  "execTime": "TimeConsuming",
+  "status1": "Running",
+  "status5": "Suspend",
+  "status10": "Error",
+  "status20": "Success",
+  "status21": "Failed",
+  "status22": "Cancel"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflowRecordStep.json b/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflowRecordStep.json
index 0aa8c11..7fd7fe9 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflowRecordStep.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/aiWorkflowRecordStep.json
@@ -1,22 +1,22 @@
 {
-    "id": "Id",
-    "recordId": "RecordId",
-    "execKey": "ExecKey",
-    "nodeId": "NodeId",
-    "nodeName": "NodeName",
-    "input": "Input",
-    "output": "Output",
-    "nodeData": "NodeData",
-    "startTime": "StartTime",
-    "endTime": "EndTime",
-    "tokens": "Tokens",
-    "status": "Status",
-    "errorInfo": "ErrorInfo",
-    "moduleName": "Steps",
-    "execTime": "TimeConsuming",
-    "status1": "Running",
-    "status6": "Suspend",
-    "status10": "Error",
-    "status20": "Success",
-    "status21": "Failed"
+  "id": "Id",
+  "recordId": "RecordId",
+  "execKey": "ExecKey",
+  "nodeId": "NodeId",
+  "nodeName": "NodeName",
+  "input": "Input",
+  "output": "Output",
+  "nodeData": "NodeData",
+  "startTime": "StartTime",
+  "endTime": "EndTime",
+  "tokens": "Tokens",
+  "status": "Status",
+  "errorInfo": "ErrorInfo",
+  "moduleName": "Steps",
+  "execTime": "TimeConsuming",
+  "status1": "Running",
+  "status6": "Suspend",
+  "status10": "Error",
+  "status20": "Success",
+  "status21": "Failed"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/datacenterTable.json b/easyflow-ui-admin/app/src/locales/langs/en-US/datacenterTable.json
index fa9c56d..afc1f38 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/datacenterTable.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/datacenterTable.json
@@ -1,33 +1,33 @@
 {
-    "title": "DataCenter",
-    "id": "Id",
-    "deptId": "DeptId",
-    "tenantId": "TenantId",
-    "tableName": "TableName",
-    "tableDesc": "TableDesc",
-    "actualTable": "ActualTable",
-    "status": "Status",
-    "created": "Created",
-    "createdBy": "CreatedBy",
-    "modified": "Modified",
-    "modifiedBy": "ModifiedBy",
-    "options": "Options",
-    "fields": "Fields",
-    "fieldName": "FiledName",
-    "fieldDesc": "Description",
-    "fieldType": "Type",
-    "required": "Required",
-    "noFieldError": "At least one field is required",
-    "fieldInfoError": "Field info is not completed",
-    "nameRegx": "It can only contain lowercase letters, numbers, and underscores, and must start with a lowercase letter",
-    "structure": "TableStructure",
-    "data": "Data",
-    "uploadTitle": "Click to upload",
-    "uploadDesc": "Choose an excel file to upload, file size limit 10MB.",
-    "downloadTemplate": "Download  template",
-    "importComplete": "Import is completed",
-    "totalNum": "Total Count",
-    "successNum": "Success Count",
-    "failNum": "Fail Count",
-    "failList": "Fail List"
+  "title": "DataCenter",
+  "id": "Id",
+  "deptId": "DeptId",
+  "tenantId": "TenantId",
+  "tableName": "TableName",
+  "tableDesc": "TableDesc",
+  "actualTable": "ActualTable",
+  "status": "Status",
+  "created": "Created",
+  "createdBy": "CreatedBy",
+  "modified": "Modified",
+  "modifiedBy": "ModifiedBy",
+  "options": "Options",
+  "fields": "Fields",
+  "fieldName": "FiledName",
+  "fieldDesc": "Description",
+  "fieldType": "Type",
+  "required": "Required",
+  "noFieldError": "At least one field is required",
+  "fieldInfoError": "Field info is not completed",
+  "nameRegx": "It can only contain lowercase letters, numbers, and underscores, and must start with a lowercase letter",
+  "structure": "TableStructure",
+  "data": "Data",
+  "uploadTitle": "Click to upload",
+  "uploadDesc": "Choose an excel file to upload, file size limit 10MB.",
+  "downloadTemplate": "Download  template",
+  "importComplete": "Import is completed",
+  "totalNum": "Total Count",
+  "successNum": "Success Count",
+  "failNum": "Fail Count",
+  "failList": "Fail List"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/datacenterTableFields.json b/easyflow-ui-admin/app/src/locales/langs/en-US/datacenterTableFields.json
index a125757..92078a6 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/datacenterTableFields.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/datacenterTableFields.json
@@ -1,13 +1,13 @@
 {
-    "id": "Id",
-    "tableId": "TableId",
-    "fieldName": "FieldName",
-    "fieldDesc": "FieldDesc",
-    "fieldType": "FieldType",
-    "required": "Required",
-    "created": "Created",
-    "createdBy": "CreatedBy",
-    "modified": "Modified",
-    "modifiedBy": "ModifiedBy",
-    "options": "Options"
+  "id": "Id",
+  "tableId": "TableId",
+  "fieldName": "FieldName",
+  "fieldDesc": "FieldDesc",
+  "fieldType": "FieldType",
+  "required": "Required",
+  "created": "Created",
+  "createdBy": "CreatedBy",
+  "modified": "Modified",
+  "modifiedBy": "ModifiedBy",
+  "options": "Options"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/sysApiKeyResourcePermission.json b/easyflow-ui-admin/app/src/locales/langs/en-US/sysApiKeyResourcePermission.json
index 484e442..ac1ff4b 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/sysApiKeyResourcePermission.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/sysApiKeyResourcePermission.json
@@ -1,6 +1,6 @@
 {
-    "id": "Id",
-    "requestInterface": "RequestInterface",
-    "title": "Title",
-    "addPermission": "AddRequestInterface"
+  "id": "Id",
+  "requestInterface": "RequestInterface",
+  "title": "Title",
+  "addPermission": "AddRequestInterface"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/sysDept.json b/easyflow-ui-admin/app/src/locales/langs/en-US/sysDept.json
index 9f9cbd4..2a2cae6 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/sysDept.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/sysDept.json
@@ -1,17 +1,17 @@
 {
-    "root": "Root",
-    "id": "Id",
-    "tenantId": "TenantId",
-    "parentId": "Parent",
-    "ancestors": "Ancestors",
-    "deptName": "DeptName",
-    "deptCode": "DeptCode",
-    "sortNo": "SortNo",
-    "status": "Status",
-    "created": "Created",
-    "createdBy": "CreatedBy",
-    "modified": "Modified",
-    "modifiedBy": "ModifiedBy",
-    "remark": "Remark",
-    "isDeleted": "IsDeleted"
+  "root": "Root",
+  "id": "Id",
+  "tenantId": "TenantId",
+  "parentId": "Parent",
+  "ancestors": "Ancestors",
+  "deptName": "DeptName",
+  "deptCode": "DeptCode",
+  "sortNo": "SortNo",
+  "status": "Status",
+  "created": "Created",
+  "createdBy": "CreatedBy",
+  "modified": "Modified",
+  "modifiedBy": "ModifiedBy",
+  "remark": "Remark",
+  "isDeleted": "IsDeleted"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/sysDict.json b/easyflow-ui-admin/app/src/locales/langs/en-US/sysDict.json
index 4d39378..cd70488 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/sysDict.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/sysDict.json
@@ -1,12 +1,12 @@
 {
-    "id": "Id",
-    "name": "Name",
-    "code": "Code",
-    "description": "Description",
-    "dictType": "DictType",
-    "sortNo": "SortNo",
-    "status": "Status",
-    "options": "Options",
-    "created": "Created",
-    "modified": "Modified"
+  "id": "Id",
+  "name": "Name",
+  "code": "Code",
+  "description": "Description",
+  "dictType": "DictType",
+  "sortNo": "SortNo",
+  "status": "Status",
+  "options": "Options",
+  "created": "Created",
+  "modified": "Modified"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/sysJob.json b/easyflow-ui-admin/app/src/locales/langs/en-US/sysJob.json
index 35437af..620acba 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/sysJob.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/sysJob.json
@@ -1,23 +1,23 @@
 {
-    "id": "Id",
-    "deptId": "DeptId",
-    "tenantId": "TenantId",
-    "jobName": "JobName",
-    "jobType": "JobType",
-    "jobParams": "JobParams",
-    "cronExpression": "CronExpression",
-    "allowConcurrent": "AllowConcurrent",
-    "misfirePolicy": "MisfirePolicy",
-    "options": "Options",
-    "status": "Status",
-    "created": "Created",
-    "createdBy": "CreatedBy",
-    "modified": "Modified",
-    "modifiedBy": "ModifiedBy",
-    "remark": "Remark",
-    "isDeleted": "IsDeleted",
-    "workflow": "Workflow",
-    "beanMethod": "BeanMethod",
-    "javaMethod": "JavaMethod",
-    "example": "example"
+  "id": "Id",
+  "deptId": "DeptId",
+  "tenantId": "TenantId",
+  "jobName": "JobName",
+  "jobType": "JobType",
+  "jobParams": "JobParams",
+  "cronExpression": "CronExpression",
+  "allowConcurrent": "AllowConcurrent",
+  "misfirePolicy": "MisfirePolicy",
+  "options": "Options",
+  "status": "Status",
+  "created": "Created",
+  "createdBy": "CreatedBy",
+  "modified": "Modified",
+  "modifiedBy": "ModifiedBy",
+  "remark": "Remark",
+  "isDeleted": "IsDeleted",
+  "workflow": "Workflow",
+  "beanMethod": "BeanMethod",
+  "javaMethod": "JavaMethod",
+  "example": "example"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/sysLog.json b/easyflow-ui-admin/app/src/locales/langs/en-US/sysLog.json
index 651d7be..8ab8788 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/sysLog.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/sysLog.json
@@ -1,14 +1,14 @@
 {
-    "id": "Id",
-    "accountId": "AccountId",
-    "actionName": "ActionName",
-    "actionType": "ActionType",
-    "actionClass": "ActionClass",
-    "actionMethod": "ActionMethod",
-    "actionUrl": "ActionUrl",
-    "actionIp": "ActionIp",
-    "actionParams": "ActionParams",
-    "actionBody": "ActionBody",
-    "status": "Status",
-    "created": "Created"
+  "id": "Id",
+  "accountId": "AccountId",
+  "actionName": "ActionName",
+  "actionType": "ActionType",
+  "actionClass": "ActionClass",
+  "actionMethod": "ActionMethod",
+  "actionUrl": "ActionUrl",
+  "actionIp": "ActionIp",
+  "actionParams": "ActionParams",
+  "actionBody": "ActionBody",
+  "status": "Status",
+  "created": "Created"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/sysMenu.json b/easyflow-ui-admin/app/src/locales/langs/en-US/sysMenu.json
index acda776..c08aa0d 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/sysMenu.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/sysMenu.json
@@ -1,20 +1,20 @@
 {
-"root":"Top",
-"id": "Id",
-"parentId": "Parent",
-"menuType": "MenuType",
-"menuTitle": "MenuTitle",
-"menuUrl": "MenuUrl",
-"component": "Component",
-"menuIcon": "MenuIcon",
-"isShow": "IsShow",
-"permissionTag": "PermissionTag",
-"sortNo": "SortNo",
-"status": "Status",
-"created": "Created",
-"createdBy": "CreatedBy",
-"modified": "Modified",
-"modifiedBy": "ModifiedBy",
-"remark": "Remark",
-"isDeleted": "IsDeleted"
+  "root": "Top",
+  "id": "Id",
+  "parentId": "Parent",
+  "menuType": "MenuType",
+  "menuTitle": "MenuTitle",
+  "menuUrl": "MenuUrl",
+  "component": "Component",
+  "menuIcon": "MenuIcon",
+  "isShow": "IsShow",
+  "permissionTag": "PermissionTag",
+  "sortNo": "SortNo",
+  "status": "Status",
+  "created": "Created",
+  "createdBy": "CreatedBy",
+  "modified": "Modified",
+  "modifiedBy": "ModifiedBy",
+  "remark": "Remark",
+  "isDeleted": "IsDeleted"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/en-US/sysRole.json b/easyflow-ui-admin/app/src/locales/langs/en-US/sysRole.json
index ab8a9d9..5645a21 100644
--- a/easyflow-ui-admin/app/src/locales/langs/en-US/sysRole.json
+++ b/easyflow-ui-admin/app/src/locales/langs/en-US/sysRole.json
@@ -1,22 +1,22 @@
 {
-    "id": "Id",
-    "tenantId": "TenantId",
-    "roleName": "RoleName",
-    "roleKey": "RoleKey",
-    "status": "Status",
-    "created": "Created",
-    "createdBy": "CreatedBy",
-    "modified": "Modified",
-    "modifiedBy": "ModifiedBy",
-    "remark": "Remark",
-    "isDeleted": "IsDeleted",
-    "menuPermission": "MenuPermission",
-    "dataPermission": "DataPermission",
-    "categoryPermission": "CategoryPermission",
-    "categoryPermissionHint": "Deny by default. Applies to resource visibility and selectors/binders only.",
-    "categoryScopeAll": "AllCategories",
-    "categoryScopeCustom": "CustomCategories",
-    "categoryScopePlaceholder": "Select categories",
-    "checkStrictlyTrue": "Linked",
-    "checkStrictlyFalse": "NotLinked"
+  "id": "Id",
+  "tenantId": "TenantId",
+  "roleName": "RoleName",
+  "roleKey": "RoleKey",
+  "status": "Status",
+  "created": "Created",
+  "createdBy": "CreatedBy",
+  "modified": "Modified",
+  "modifiedBy": "ModifiedBy",
+  "remark": "Remark",
+  "isDeleted": "IsDeleted",
+  "menuPermission": "MenuPermission",
+  "dataPermission": "DataPermission",
+  "categoryPermission": "CategoryPermission",
+  "categoryPermissionHint": "Deny by default. Applies to resource visibility and selectors/binders only.",
+  "categoryScopeAll": "AllCategories",
+  "categoryScopeCustom": "CustomCategories",
+  "categoryScopePlaceholder": "Select categories",
+  "checkStrictlyTrue": "Linked",
+  "checkStrictlyFalse": "NotLinked"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiResource.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiResource.json
index 999dc3e..f104858 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiResource.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiResource.json
@@ -1,20 +1,20 @@
 {
-    "id": "主键",
-    "deptId": "部门ID",
-    "tenantId": "租户ID",
-    "resourceType": "素材类型",
-    "resourceName": "素材名称",
-    "suffix": "后缀",
-    "resourceUrl": "素材地址",
-    "origin": "素材来源",
-    "status": "数据状态",
-    "created": "创建时间",
-    "createdBy": "创建者",
-    "modified": "修改时间",
-    "modifiedBy": "修改者",
-    "options": "扩展项",
-    "isDeleted": "删除标识",
-    "fileSize": "文件大小",
-    "categoryId": "分类",
-    "choose": "选择素材"
+  "id": "主键",
+  "deptId": "部门ID",
+  "tenantId": "租户ID",
+  "resourceType": "素材类型",
+  "resourceName": "素材名称",
+  "suffix": "后缀",
+  "resourceUrl": "素材地址",
+  "origin": "素材来源",
+  "status": "数据状态",
+  "created": "创建时间",
+  "createdBy": "创建者",
+  "modified": "修改时间",
+  "modifiedBy": "修改者",
+  "options": "扩展项",
+  "isDeleted": "删除标识",
+  "fileSize": "文件大小",
+  "categoryId": "分类",
+  "choose": "选择素材"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflowCategory.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflowCategory.json
index 45ce6ba..461710b 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflowCategory.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflowCategory.json
@@ -1,10 +1,10 @@
 {
-    "id": "主键",
-    "categoryName": "分类名称",
-    "sortNo": "排序",
-    "created": "创建时间",
-    "createdBy": "创建者",
-    "modified": "修改时间",
-    "modifiedBy": "修改者",
-    "status": "数据状态"
-}
\ No newline at end of file
+  "id": "主键",
+  "categoryName": "分类名称",
+  "sortNo": "排序",
+  "created": "创建时间",
+  "createdBy": "创建者",
+  "modified": "修改时间",
+  "modifiedBy": "修改者",
+  "status": "数据状态"
+}
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflowExecRecord.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflowExecRecord.json
index 25d4a6b..de66e64 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflowExecRecord.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflowExecRecord.json
@@ -1,25 +1,25 @@
 {
-    "id": "主键",
-    "execKey": "执行标识",
-    "workflowId": "工作流ID",
-    "title": "标题",
-    "description": "描述",
-    "input": "输入",
-    "output": "输出",
-    "workflowJson": "工作流执行时的配置",
-    "startTime": "开始时间",
-    "endTime": "结束时间",
-    "tokens": "消耗总token",
-    "status": "状态",
-    "createdKey": "执行人标识[有可能是用户|外部|定时任务等情况]",
-    "createdBy": "执行人",
-    "errorInfo": "错误信息",
-    "moduleName": "执行记录",
-    "execTime": "耗时",
-    "status1": "运行中",
-    "status5": "挂起",
-    "status10": "错误",
-    "status20": "成功",
-    "status21": "失败",
-    "status22": "取消"
+  "id": "主键",
+  "execKey": "执行标识",
+  "workflowId": "工作流ID",
+  "title": "标题",
+  "description": "描述",
+  "input": "输入",
+  "output": "输出",
+  "workflowJson": "工作流执行时的配置",
+  "startTime": "开始时间",
+  "endTime": "结束时间",
+  "tokens": "消耗总token",
+  "status": "状态",
+  "createdKey": "执行人标识[有可能是用户|外部|定时任务等情况]",
+  "createdBy": "执行人",
+  "errorInfo": "错误信息",
+  "moduleName": "执行记录",
+  "execTime": "耗时",
+  "status1": "运行中",
+  "status5": "挂起",
+  "status10": "错误",
+  "status20": "成功",
+  "status21": "失败",
+  "status22": "取消"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflowRecordStep.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflowRecordStep.json
index a4d0f12..45f53c2 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflowRecordStep.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/aiWorkflowRecordStep.json
@@ -1,22 +1,22 @@
 {
-    "id": "主键",
-    "recordId": "执行记录ID",
-    "execKey": "执行标识",
-    "nodeId": "节点ID",
-    "nodeName": "节点名称",
-    "input": "输入",
-    "output": "输出",
-    "nodeData": "节点信息",
-    "startTime": "开始时间",
-    "endTime": "结束时间",
-    "tokens": "消耗总token",
-    "status": "状态",
-    "errorInfo": "错误信息",
-    "moduleName": "步骤信息",
-    "execTime": "耗时",
-    "status1": "运行中",
-    "status6": "挂起",
-    "status10": "错误",
-    "status20": "成功",
-    "status21": "失败"
+  "id": "主键",
+  "recordId": "执行记录ID",
+  "execKey": "执行标识",
+  "nodeId": "节点ID",
+  "nodeName": "节点名称",
+  "input": "输入",
+  "output": "输出",
+  "nodeData": "节点信息",
+  "startTime": "开始时间",
+  "endTime": "结束时间",
+  "tokens": "消耗总token",
+  "status": "状态",
+  "errorInfo": "错误信息",
+  "moduleName": "步骤信息",
+  "execTime": "耗时",
+  "status1": "运行中",
+  "status6": "挂起",
+  "status10": "错误",
+  "status20": "成功",
+  "status21": "失败"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/datacenterTable.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/datacenterTable.json
index 4cbc381..5ddda98 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/datacenterTable.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/datacenterTable.json
@@ -1,33 +1,33 @@
 {
-    "title": "数据中枢",
-    "id": "主键",
-    "deptId": "部门ID",
-    "tenantId": "租户ID",
-    "tableName": "数据表名",
-    "tableDesc": "数据表描述",
-    "actualTable": "物理表名",
-    "status": "数据状态",
-    "created": "创建时间",
-    "createdBy": "创建者",
-    "modified": "修改时间",
-    "modifiedBy": "修改者",
-    "options": "扩展项",
-    "fields": "字段",
-    "fieldName": "字段名",
-    "fieldDesc": "字段描述",
-    "fieldType": "字段类型",
-    "required": "是否必填",
-    "noFieldError": "至少包含一个字段",
-    "fieldInfoError": "字段信息不完善",
-    "nameRegx": "只能包含小写字母、数字和下划线，且必须以小写字母开头",
-    "structure": "表结构",
-    "data": "数据",
-    "uploadTitle": "点击或将文件拖拽到这里上传",
-    "uploadDesc": "上传一份Excel文档，文件大小限制10MB以内。",
-    "downloadTemplate": "下载模板",
-    "importComplete": "导入完成",
-    "totalNum": "总数",
-    "successNum": "成功数",
-    "failNum": "失败数",
-    "failList": "失败记录"
+  "title": "数据中枢",
+  "id": "主键",
+  "deptId": "部门ID",
+  "tenantId": "租户ID",
+  "tableName": "数据表名",
+  "tableDesc": "数据表描述",
+  "actualTable": "物理表名",
+  "status": "数据状态",
+  "created": "创建时间",
+  "createdBy": "创建者",
+  "modified": "修改时间",
+  "modifiedBy": "修改者",
+  "options": "扩展项",
+  "fields": "字段",
+  "fieldName": "字段名",
+  "fieldDesc": "字段描述",
+  "fieldType": "字段类型",
+  "required": "是否必填",
+  "noFieldError": "至少包含一个字段",
+  "fieldInfoError": "字段信息不完善",
+  "nameRegx": "只能包含小写字母、数字和下划线，且必须以小写字母开头",
+  "structure": "表结构",
+  "data": "数据",
+  "uploadTitle": "点击或将文件拖拽到这里上传",
+  "uploadDesc": "上传一份Excel文档，文件大小限制10MB以内。",
+  "downloadTemplate": "下载模板",
+  "importComplete": "导入完成",
+  "totalNum": "总数",
+  "successNum": "成功数",
+  "failNum": "失败数",
+  "failList": "失败记录"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/datacenterTableFields.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/datacenterTableFields.json
index 55abd14..b11f117 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/datacenterTableFields.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/datacenterTableFields.json
@@ -1,13 +1,13 @@
 {
-    "id": "主键",
-    "tableId": "数据表ID",
-    "fieldName": "字段名称",
-    "fieldDesc": "字段描述",
-    "fieldType": "字段类型",
-    "required": "是否必填",
-    "created": "创建时间",
-    "createdBy": "创建者",
-    "modified": "修改时间",
-    "modifiedBy": "修改者",
-    "options": "扩展项"
+  "id": "主键",
+  "tableId": "数据表ID",
+  "fieldName": "字段名称",
+  "fieldDesc": "字段描述",
+  "fieldType": "字段类型",
+  "required": "是否必填",
+  "created": "创建时间",
+  "createdBy": "创建者",
+  "modified": "修改时间",
+  "modifiedBy": "修改者",
+  "options": "扩展项"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysDept.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysDept.json
index e1f5130..5642394 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysDept.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysDept.json
@@ -1,17 +1,17 @@
 {
-    "root": "根部门",
-    "id": "主键",
-    "tenantId": "租户ID",
-    "parentId": "父级",
-    "ancestors": "父级部门ID集合",
-    "deptName": "部门名称",
-    "deptCode": "部门编码",
-    "sortNo": "排序",
-    "status": "数据状态",
-    "created": "创建时间",
-    "createdBy": "创建者",
-    "modified": "修改时间",
-    "modifiedBy": "修改者",
-    "remark": "备注",
-    "isDeleted": "删除标识"
+  "root": "根部门",
+  "id": "主键",
+  "tenantId": "租户ID",
+  "parentId": "父级",
+  "ancestors": "父级部门ID集合",
+  "deptName": "部门名称",
+  "deptCode": "部门编码",
+  "sortNo": "排序",
+  "status": "数据状态",
+  "created": "创建时间",
+  "createdBy": "创建者",
+  "modified": "修改时间",
+  "modifiedBy": "修改者",
+  "remark": "备注",
+  "isDeleted": "删除标识"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysDict.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysDict.json
index f9db052..9f277ca 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysDict.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysDict.json
@@ -1,12 +1,12 @@
 {
-    "id": "主键",
-    "name": "数据字典名称",
-    "code": "字典编码",
-    "description": "字典描述或备注",
-    "dictType": "字典类型 1 自定义字典、2 数据表字典、 3 枚举类字典、 4 系统字典（自定义 DictLoader）",
-    "sortNo": "排序编号",
-    "status": "是否启用",
-    "options": "扩展字典  存放 json",
-    "created": "创建时间",
-    "modified": "修改时间"
+  "id": "主键",
+  "name": "数据字典名称",
+  "code": "字典编码",
+  "description": "字典描述或备注",
+  "dictType": "字典类型 1 自定义字典、2 数据表字典、 3 枚举类字典、 4 系统字典（自定义 DictLoader）",
+  "sortNo": "排序编号",
+  "status": "是否启用",
+  "options": "扩展字典  存放 json",
+  "created": "创建时间",
+  "modified": "修改时间"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysJob.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysJob.json
index 9813018..70de1fa 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysJob.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysJob.json
@@ -1,23 +1,23 @@
 {
-    "id": "主键",
-    "deptId": "部门ID",
-    "tenantId": "租户ID",
-    "jobName": "任务名称",
-    "jobType": "任务类型",
-    "jobParams": "任务参数",
-    "cronExpression": "cron表达式",
-    "allowConcurrent": "是否并发执行",
-    "misfirePolicy": "错过策略",
-    "options": "其他配置",
-    "status": "任务状态",
-    "created": "创建时间",
-    "createdBy": "创建者",
-    "modified": "修改时间",
-    "modifiedBy": "修改者",
-    "remark": "备注",
-    "isDeleted": "删除标识",
-    "workflow": "工作流",
-    "beanMethod": "bean方法",
-    "javaMethod": "java方法",
-    "example": "示例"
+  "id": "主键",
+  "deptId": "部门ID",
+  "tenantId": "租户ID",
+  "jobName": "任务名称",
+  "jobType": "任务类型",
+  "jobParams": "任务参数",
+  "cronExpression": "cron表达式",
+  "allowConcurrent": "是否并发执行",
+  "misfirePolicy": "错过策略",
+  "options": "其他配置",
+  "status": "任务状态",
+  "created": "创建时间",
+  "createdBy": "创建者",
+  "modified": "修改时间",
+  "modifiedBy": "修改者",
+  "remark": "备注",
+  "isDeleted": "删除标识",
+  "workflow": "工作流",
+  "beanMethod": "bean方法",
+  "javaMethod": "java方法",
+  "example": "示例"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysLog.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysLog.json
index 82fd4fe..0792150 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysLog.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysLog.json
@@ -1,14 +1,14 @@
 {
-    "id": "ID",
-    "accountId": "操作人",
-    "actionName": "操作名称",
-    "actionType": "操作的类型",
-    "actionClass": "操作涉及的类",
-    "actionMethod": "操作涉及的方法",
-    "actionUrl": "操作涉及的 URL 地址",
-    "actionIp": "操作涉及的用户 IP 地址",
-    "actionParams": "操作请求参数",
-    "actionBody": "操作请求body",
-    "status": "操作状态 1 成功 9 失败",
-    "created": "操作时间"
+  "id": "ID",
+  "accountId": "操作人",
+  "actionName": "操作名称",
+  "actionType": "操作的类型",
+  "actionClass": "操作涉及的类",
+  "actionMethod": "操作涉及的方法",
+  "actionUrl": "操作涉及的 URL 地址",
+  "actionIp": "操作涉及的用户 IP 地址",
+  "actionParams": "操作请求参数",
+  "actionBody": "操作请求body",
+  "status": "操作状态 1 成功 9 失败",
+  "created": "操作时间"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysMenu.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysMenu.json
index 6aee2d5..cd12f8d 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysMenu.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysMenu.json
@@ -1,20 +1,20 @@
 {
-"root":"顶级",
-"id": "主键",
-"parentId": "父菜单",
-"menuType": "菜单类型",
-"menuTitle": "菜单标题",
-"menuUrl": "菜单url",
-"component": "组件路径",
-"menuIcon": "图标",
-"isShow": "是否显示",
-"permissionTag": "权限标识",
-"sortNo": "排序",
-"status": "数据状态",
-"created": "创建时间",
-"createdBy": "创建者",
-"modified": "修改时间",
-"modifiedBy": "修改者",
-"remark": "备注",
-"isDeleted": "删除标识"
+  "root": "顶级",
+  "id": "主键",
+  "parentId": "父菜单",
+  "menuType": "菜单类型",
+  "menuTitle": "菜单标题",
+  "menuUrl": "菜单url",
+  "component": "组件路径",
+  "menuIcon": "图标",
+  "isShow": "是否显示",
+  "permissionTag": "权限标识",
+  "sortNo": "排序",
+  "status": "数据状态",
+  "created": "创建时间",
+  "createdBy": "创建者",
+  "modified": "修改时间",
+  "modifiedBy": "修改者",
+  "remark": "备注",
+  "isDeleted": "删除标识"
 }
diff --git a/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysRole.json b/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysRole.json
index 22e174f..7e3c6f1 100644
--- a/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysRole.json
+++ b/easyflow-ui-admin/app/src/locales/langs/zh-CN/sysRole.json
@@ -1,22 +1,22 @@
 {
-    "id": "主键",
-    "tenantId": "租户ID",
-    "roleName": "角色名称",
-    "roleKey": "角色标识",
-    "status": "是否启用",
-    "created": "创建时间",
-    "createdBy": "创建者",
-    "modified": "修改时间",
-    "modifiedBy": "修改者",
-    "remark": "备注",
-    "isDeleted": "删除标识",
-    "menuPermission": "菜单权限",
-    "dataPermission": "数据权限",
-    "categoryPermission": "分类权限",
-    "categoryPermissionHint": "未配置即拒绝，仅控制资源可见性与选择器/绑定器。",
-    "categoryScopeAll": "全部分类",
-    "categoryScopeCustom": "自定义分类",
-    "categoryScopePlaceholder": "请选择分类",
-    "checkStrictlyTrue": "联动",
-    "checkStrictlyFalse": "不联动"
+  "id": "主键",
+  "tenantId": "租户ID",
+  "roleName": "角色名称",
+  "roleKey": "角色标识",
+  "status": "是否启用",
+  "created": "创建时间",
+  "createdBy": "创建者",
+  "modified": "修改时间",
+  "modifiedBy": "修改者",
+  "remark": "备注",
+  "isDeleted": "删除标识",
+  "menuPermission": "菜单权限",
+  "dataPermission": "数据权限",
+  "categoryPermission": "分类权限",
+  "categoryPermissionHint": "未配置即拒绝，仅控制资源可见性与选择器/绑定器。",
+  "categoryScopeAll": "全部分类",
+  "categoryScopeCustom": "自定义分类",
+  "categoryScopePlaceholder": "请选择分类",
+  "checkStrictlyTrue": "联动",
+  "checkStrictlyFalse": "不联动"
 }
diff --git a/easyflow-ui-admin/app/src/main.ts b/easyflow-ui-admin/app/src/main.ts
index 7fe15ab..36fe0c5 100644
--- a/easyflow-ui-admin/app/src/main.ts
+++ b/easyflow-ui-admin/app/src/main.ts
@@ -1,4 +1,8 @@
-import { initPreferences, preferences, updatePreferences } from '@easyflow/preferences';
+import {
+  initPreferences,
+  preferences,
+  updatePreferences,
+} from '@easyflow/preferences';
 import { unmountGlobalLoading } from '@easyflow/utils';
 
 import {
diff --git a/easyflow-ui-admin/app/src/router/guard.ts b/easyflow-ui-admin/app/src/router/guard.ts
index aaf8a63..0efe946 100644
--- a/easyflow-ui-admin/app/src/router/guard.ts
+++ b/easyflow-ui-admin/app/src/router/guard.ts
@@ -7,6 +7,12 @@ import { startProgress, stopProgress } from '@easyflow/utils';
 
 import { accessRoutes, coreRouteNames } from '#/router/routes';
 import { useAuthStore } from '#/store';
+import {
+  buildForcePasswordRoute,
+  isForcePasswordRoute,
+  notifyForcePasswordChange,
+  shouldForcePasswordChange,
+} from '#/utils/password-reset';
 
 import { generateAccess } from './access';
 import {
@@ -14,12 +20,6 @@ import {
   removeDevLoginQuery,
   shouldAttemptDevLogin,
 } from './dev-login';
-import {
-  buildForcePasswordRoute,
-  isForcePasswordRoute,
-  notifyForcePasswordChange,
-  shouldForcePasswordChange,
-} from '#/utils/password-reset';
 
 interface NetworkConnectionLike {
   effectiveType?: string;
@@ -189,7 +189,8 @@ function setupAccessGuard(router: Router) {
     // 基本路由，这些路由不需要进入权限拦截
     if (coreRouteNames.includes(to.name as string)) {
       if (to.path === LOGIN_PATH && accessStore.accessToken) {
-        const currentUser = userStore.userInfo || (await authStore.fetchUserInfo());
+        const currentUser =
+          userStore.userInfo || (await authStore.fetchUserInfo());
         if (shouldForcePasswordChange(currentUser)) {
           return buildForcePasswordRoute();
         }
diff --git a/easyflow-ui-admin/app/src/router/routes/core.ts b/easyflow-ui-admin/app/src/router/routes/core.ts
index 549dda9..5d64c5f 100644
--- a/easyflow-ui-admin/app/src/router/routes/core.ts
+++ b/easyflow-ui-admin/app/src/router/routes/core.ts
@@ -1,9 +1,9 @@
-import type {RouteRecordRaw} from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
 
-import {LOGIN_PATH} from '@easyflow/constants';
-import {preferences} from '@easyflow/preferences';
+import { LOGIN_PATH } from '@easyflow/constants';
+import { preferences } from '@easyflow/preferences';
 
-import {$t} from '#/locales';
+import { $t } from '#/locales';
 
 const BasicLayout = () => import('#/layouts/basic.vue');
 const AuthPageLayout = () => import('#/layouts/auth.vue');
diff --git a/easyflow-ui-admin/app/src/router/routes/modules/demos.ts b/easyflow-ui-admin/app/src/router/routes/modules/demos.ts
index 4400576..2c0531e 100644
--- a/easyflow-ui-admin/app/src/router/routes/modules/demos.ts
+++ b/easyflow-ui-admin/app/src/router/routes/modules/demos.ts
@@ -50,3 +50,5 @@
 // ];
 //
 // export default routes;
+
+export {};
diff --git a/easyflow-ui-admin/app/src/store/auth.ts b/easyflow-ui-admin/app/src/store/auth.ts
index d2f7370..44a9044 100644
--- a/easyflow-ui-admin/app/src/store/auth.ts
+++ b/easyflow-ui-admin/app/src/store/auth.ts
@@ -95,7 +95,8 @@ export const useAuthStore = defineStore('auth', () => {
   ) {
     try {
       loginLoading.value = true;
-      const { forceChangePassword, token: accessToken } = await loginApi(params);
+      const { forceChangePassword, token: accessToken } =
+        await loginApi(params);
 
       if (accessToken) {
         return await finalizeLogin(accessToken, forceChangePassword, {
diff --git a/easyflow-ui-admin/app/src/types/tinyflow-ai-vue.d.ts b/easyflow-ui-admin/app/src/types/tinyflow-ai-vue.d.ts
index adccf58..e4f7f21 100644
--- a/easyflow-ui-admin/app/src/types/tinyflow-ai-vue.d.ts
+++ b/easyflow-ui-admin/app/src/types/tinyflow-ai-vue.d.ts
@@ -1,5 +1,9 @@
 declare module '@tinyflow-ai/vue' {
   import type { DefineComponent } from 'vue';
 
-  export const Tinyflow: DefineComponent<Record<string, any>, Record<string, any>, any>;
+  export const Tinyflow: DefineComponent<
+    Record<string, any>,
+    Record<string, any>,
+    any
+  >;
 }
diff --git a/easyflow-ui-admin/app/src/types/vue-element-plus-x.d.ts b/easyflow-ui-admin/app/src/types/vue-element-plus-x.d.ts
index db99992..7cd2c88 100644
--- a/easyflow-ui-admin/app/src/types/vue-element-plus-x.d.ts
+++ b/easyflow-ui-admin/app/src/types/vue-element-plus-x.d.ts
@@ -1,6 +1,10 @@
 declare module 'vue-element-plus-x/es/*/index.js' {
   import type { DefineComponent } from 'vue';
 
-  const component: DefineComponent<Record<string, any>, Record<string, any>, any>;
+  const component: DefineComponent<
+    Record<string, any>,
+    Record<string, any>,
+    any
+  >;
   export default component;
 }
diff --git a/easyflow-ui-admin/app/src/types/wangeditor.d.ts b/easyflow-ui-admin/app/src/types/wangeditor.d.ts
index 24b3099..9ce653b 100644
--- a/easyflow-ui-admin/app/src/types/wangeditor.d.ts
+++ b/easyflow-ui-admin/app/src/types/wangeditor.d.ts
@@ -1,5 +1,5 @@
 declare module '@wangeditor/editor-for-vue' {
-  import type {DefineComponent} from 'vue';
+  import type { DefineComponent } from 'vue';
 
   export const Editor: DefineComponent<any, any, any>;
   export const Toolbar: DefineComponent<any, any, any>;
diff --git a/easyflow-ui-admin/app/src/utils/password-reset.ts b/easyflow-ui-admin/app/src/utils/password-reset.ts
index 723799f..e699264 100644
--- a/easyflow-ui-admin/app/src/utils/password-reset.ts
+++ b/easyflow-ui-admin/app/src/utils/password-reset.ts
@@ -19,7 +19,10 @@ export function buildForcePasswordRoute() {
 }
 
 export function isForcePasswordRoute(
-  route: Pick<{ name?: string | symbol | null; query?: Record<string, any> }, 'name' | 'query'>,
+  route: Pick<
+    { name?: null | string | symbol; query?: Record<string, any> },
+    'name' | 'query'
+  >,
 ) {
   return route.name === 'Profile' && route.query?.tab === 'password';
 }
diff --git a/easyflow-ui-admin/app/src/views/_core/authentication/login.vue b/easyflow-ui-admin/app/src/views/_core/authentication/login.vue
index dae53a8..8dcf569 100644
--- a/easyflow-ui-admin/app/src/views/_core/authentication/login.vue
+++ b/easyflow-ui-admin/app/src/views/_core/authentication/login.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import type {EasyFlowFormSchema} from '@easyflow/common-ui';
-import {AuthenticationLogin, z} from '@easyflow/common-ui';
+import type { EasyFlowFormSchema } from '@easyflow/common-ui';
 
-import {computed, onMounted} from 'vue';
-import {useAppConfig} from '@easyflow/hooks';
-import {$t} from '@easyflow/locales';
-import {useAuthStore} from '#/store';
+import { computed, onMounted } from 'vue';
+
+import { AuthenticationLogin, z } from '@easyflow/common-ui';
+import { useAppConfig } from '@easyflow/hooks';
+import { $t } from '@easyflow/locales';
+
+import { useAuthStore } from '#/store';
 
 defineOptions({ name: 'Login' });
 onMounted(() => {});
@@ -109,10 +111,10 @@ function onSubmit(values: any) {
 }
 
 .captcha-anchor {
-  inset: 0;
-  pointer-events: none;
   position: absolute;
+  inset: 0;
   z-index: 30;
+  pointer-events: none;
 }
 
 .captcha-anchor:empty {
diff --git a/easyflow-ui-admin/app/src/views/_core/profile/index.vue b/easyflow-ui-admin/app/src/views/_core/profile/index.vue
index 8ecb487..7953985 100644
--- a/easyflow-ui-admin/app/src/views/_core/profile/index.vue
+++ b/easyflow-ui-admin/app/src/views/_core/profile/index.vue
@@ -18,7 +18,9 @@ const userStore = useUserStore();
 const tabsValue = ref<string>('basic');
 
 const forcePasswordChange = computed(() => {
-  return !!userStore.userInfo?.passwordResetRequired || route.query.force === '1';
+  return (
+    !!userStore.userInfo?.passwordResetRequired || route.query.force === '1'
+  );
 });
 
 const tabs = computed(() => {
@@ -43,7 +45,11 @@ const tabs = computed(() => {
 });
 
 watch(
-  () => [route.query.force, route.query.tab, userStore.userInfo?.passwordResetRequired],
+  () => [
+    route.query.force,
+    route.query.tab,
+    userStore.userInfo?.passwordResetRequired,
+  ],
   () => {
     if (forcePasswordChange.value) {
       tabsValue.value = 'password';
diff --git a/easyflow-ui-admin/app/src/views/_core/profile/password-setting.vue b/easyflow-ui-admin/app/src/views/_core/profile/password-setting.vue
index e6d512a..d6eb785 100644
--- a/easyflow-ui-admin/app/src/views/_core/profile/password-setting.vue
+++ b/easyflow-ui-admin/app/src/views/_core/profile/password-setting.vue
@@ -22,7 +22,9 @@ const router = useRouter();
 const userStore = useUserStore();
 
 const isForcedPasswordChange = computed(() => {
-  return !!userStore.userInfo?.passwordResetRequired || route.query.force === '1';
+  return (
+    !!userStore.userInfo?.passwordResetRequired || route.query.force === '1'
+  );
 });
 
 const formSchema = computed((): EasyFlowFormSchema[] => {
@@ -49,7 +51,9 @@ const formSchema = computed((): EasyFlowFormSchema[] => {
         };
       },
       rules: z
-        .string({ required_error: $t('sysAccount.newPwd') + $t('common.isRequired') })
+        .string({
+          required_error: $t('sysAccount.newPwd') + $t('common.isRequired'),
+        })
         .min(1, { message: $t('sysAccount.newPwd') + $t('common.isRequired') })
         .refine((value) => isStrongPassword(value), {
           message: $t('sysAccount.passwordStrongTip'),
diff --git a/easyflow-ui-admin/app/src/views/ai/bots/modal.vue b/easyflow-ui-admin/app/src/views/ai/bots/modal.vue
index a152e05..816cebe 100644
--- a/easyflow-ui-admin/app/src/views/ai/bots/modal.vue
+++ b/easyflow-ui-admin/app/src/views/ai/bots/modal.vue
@@ -210,11 +210,11 @@ defineExpose({
 }
 
 .bot-modal-section {
-  border-radius: 14px;
-  border: 1px solid hsl(var(--modal-divider));
-  background: hsl(var(--modal-content-surface-strong));
-  box-shadow: none;
   padding: 14px;
+  background: hsl(var(--modal-content-surface-strong));
+  border: 1px solid hsl(var(--modal-divider));
+  border-radius: 14px;
+  box-shadow: none;
 }
 
 .bot-modal-section--compact {
@@ -227,17 +227,17 @@ defineExpose({
 
 .bot-modal-section__title {
   margin: 0;
-  color: hsl(var(--text-strong));
   font-size: 14px;
   font-weight: 700;
   line-height: 1.4;
+  color: hsl(var(--text-strong));
 }
 
 .bot-modal-section__description {
   margin: 3px 0 0;
-  color: hsl(var(--text-muted));
   font-size: 11px;
   line-height: 1.45;
+  color: hsl(var(--text-muted));
 }
 
 .bot-modal-appearance-grid {
@@ -279,9 +279,9 @@ defineExpose({
 
 .bot-modal-field-tip {
   margin-top: 4px;
-  color: hsl(var(--text-muted));
   font-size: 11px;
   line-height: 1.5;
+  color: hsl(var(--text-muted));
 }
 
 .bot-modal-form :deep(.el-form-item) {
@@ -290,18 +290,18 @@ defineExpose({
 
 .bot-modal-form :deep(.el-form-item__label) {
   padding-bottom: 6px;
-  color: hsl(var(--text-strong));
   font-size: 12px;
   font-weight: 600;
   line-height: 1.4;
+  color: hsl(var(--text-strong));
 }
 
 .bot-modal-form :deep(.el-input__wrapper),
 .bot-modal-form :deep(.el-select__wrapper),
 .bot-modal-form :deep(.el-textarea__inner) {
-  border-radius: 12px;
   background: hsl(var(--input-background));
-  box-shadow: inset 0 0 0 1px hsl(var(--input) / 0.92);
+  border-radius: 12px;
+  box-shadow: inset 0 0 0 1px hsl(var(--input) / 92%);
   transition:
     box-shadow 0.2s ease,
     transform 0.2s ease,
@@ -316,15 +316,15 @@ defineExpose({
 .bot-modal-form :deep(.el-input__wrapper:hover),
 .bot-modal-form :deep(.el-select__wrapper:hover),
 .bot-modal-form :deep(.el-textarea__inner:hover) {
-  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.18);
+  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 18%);
 }
 
 .bot-modal-form :deep(.el-input__wrapper.is-focus),
 .bot-modal-form :deep(.el-select__wrapper.is-focused),
 .bot-modal-form :deep(.el-textarea__inner:focus) {
   box-shadow:
-    inset 0 0 0 1px hsl(var(--primary) / 0.72),
-    0 0 0 4px hsl(var(--primary) / 0.12);
+    inset 0 0 0 1px hsl(var(--primary) / 72%),
+    0 0 0 4px hsl(var(--primary) / 12%);
 }
 
 .bot-modal-form :deep(.el-textarea__inner) {
@@ -336,8 +336,8 @@ defineExpose({
 .bot-modal-form :deep(.el-form-item.is-error .el-select__wrapper),
 .bot-modal-form :deep(.el-form-item.is-error .el-textarea__inner) {
   box-shadow:
-    inset 0 0 0 1px hsl(var(--destructive) / 0.8),
-    0 0 0 4px hsl(var(--destructive) / 0.08);
+    inset 0 0 0 1px hsl(var(--destructive) / 80%),
+    0 0 0 4px hsl(var(--destructive) / 8%);
 }
 
 @media (max-width: 768px) {
diff --git a/easyflow-ui-admin/app/src/views/ai/bots/pages/Run.vue b/easyflow-ui-admin/app/src/views/ai/bots/pages/Run.vue
index e3dfd58..d0903fd 100644
--- a/easyflow-ui-admin/app/src/views/ai/bots/pages/Run.vue
+++ b/easyflow-ui-admin/app/src/views/ai/bots/pages/Run.vue
@@ -2,8 +2,8 @@
 import type { BotInfo, Session } from '@easyflow/types';
 
 import { onMounted, ref, watchEffect } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
 import ElConversations from 'vue-element-plus-x/es/Conversations/index.js';
+import { useRoute, useRouter } from 'vue-router';
 
 import { IconifyIcon } from '@easyflow/icons';
 import { preferences } from '@easyflow/preferences';
diff --git a/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/config.vue b/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/config.vue
index c9308b3..8c56958 100644
--- a/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/config.vue
+++ b/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/config.vue
@@ -1466,10 +1466,12 @@ const handleBasicInfoChange = async (
                 </label>
                 <div class="publish-external-code-preview">
                   <div class="publish-external-code-topbar">HTML</div>
+                  <!-- eslint-disable vue/no-v-html -->
                   <pre class="publish-external-code-block"><code
                     class="hljs language-xml"
                     v-html="iframeCodeHighlighted"
                   ></code></pre>
+                  <!-- eslint-enable vue/no-v-html -->
                 </div>
                 <div class="publish-external-actions">
                   <ElButton
diff --git a/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/index.vue b/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/index.vue
index e0eac0d..ee8fd3b 100644
--- a/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/index.vue
+++ b/easyflow-ui-admin/app/src/views/ai/bots/pages/setting/index.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type {BotInfo} from '@easyflow/types';
+import type { BotInfo } from '@easyflow/types';
 
-import {computed, onMounted, ref} from 'vue';
-import {useRoute, useRouter} from 'vue-router';
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
-import {tryit} from 'radash';
+import { tryit } from 'radash';
 
-import {getBotDetails} from '#/api';
-import {hasPermission} from '#/api/common/hasPermission';
+import { getBotDetails } from '#/api';
+import { hasPermission } from '#/api/common/hasPermission';
 
 import Config from './config.vue';
 import Preview from './preview.vue';
@@ -77,14 +77,16 @@ const fetchBotDetail = async (id: string) => {
   height: calc(100vh - 90px);
   padding: 20px;
 }
+
 .row-container {
-  height: 100%;
   display: flex;
   gap: 20px;
-}
-.row-item {
   height: 100%;
+}
+
+.row-item {
   flex: 1;
   min-width: 0;
+  height: 100%;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/chatHistory/index.vue b/easyflow-ui-admin/app/src/views/ai/chatHistory/index.vue
index 50f0d7c..5f6f7c7 100644
--- a/easyflow-ui-admin/app/src/views/ai/chatHistory/index.vue
+++ b/easyflow-ui-admin/app/src/views/ai/chatHistory/index.vue
@@ -442,8 +442,8 @@ function closeDetail() {
 .chat-history-page__filters {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
   gap: 12px;
+  align-items: center;
 }
 
 .chat-history-page__filter-control {
@@ -471,26 +471,26 @@ function closeDetail() {
 
 .chat-history-page__content {
   display: flex;
-  min-height: 0;
   flex: 1;
   flex-direction: column;
+  min-height: 0;
 }
 
 .chat-history-page__table-shell {
-  min-height: 0;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
-  border: 1px solid hsl(var(--glass-border) / 0.42);
-  border-radius: 24px;
   background: linear-gradient(
     180deg,
-    hsl(var(--glass-border) / 0.28) 0%,
-    hsl(var(--glass-tint) / 0.4) 14%,
-    hsl(var(--surface-panel) / 0.94) 100%
+    hsl(var(--glass-border) / 28%) 0%,
+    hsl(var(--glass-tint) / 40%) 14%,
+    hsl(var(--surface-panel) / 94%) 100%
   );
+  border: 1px solid hsl(var(--glass-border) / 42%);
+  border-radius: 24px;
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.54),
-    0 24px 42px -36px hsl(var(--foreground) / 0.16);
+    inset 0 1px 0 hsl(var(--glass-border) / 54%),
+    0 24px 42px -36px hsl(var(--foreground) / 16%);
 }
 
 .chat-history-page__table {
@@ -500,30 +500,30 @@ function closeDetail() {
 
 .chat-history-page__session-cell {
   display: flex;
-  min-width: 0;
   flex-direction: column;
   gap: 6px;
+  min-width: 0;
   padding: 2px 0;
 }
 
 .chat-history-page__session-title {
   overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 14px;
   font-weight: 600;
   color: hsl(var(--text-strong));
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .chat-history-page__session-preview {
   display: -webkit-box;
   overflow: hidden;
+  -webkit-line-clamp: 1;
   font-size: 12px;
   line-height: 1.5;
   color: hsl(var(--text-muted));
-  word-break: break-word;
+  overflow-wrap: anywhere;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
 }
 
 .chat-history-page__assistant-chip {
@@ -532,15 +532,15 @@ function closeDetail() {
   max-width: 100%;
   min-height: 28px;
   padding: 0 12px;
-  border: 1px solid hsl(var(--glass-border) / 0.48);
-  border-radius: 999px;
-  background: hsl(var(--glass-tint) / 0.76);
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 12px;
   font-weight: 600;
   color: hsl(var(--nav-item-active-foreground));
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
+  background: hsl(var(--glass-tint) / 76%);
+  border: 1px solid hsl(var(--glass-border) / 48%);
+  border-radius: 999px;
 }
 
 .chat-history-page__user-cell,
@@ -551,15 +551,15 @@ function closeDetail() {
 
 .chat-history-page__count-pill {
   display: inline-flex;
-  min-width: 42px;
   align-items: center;
   justify-content: center;
+  min-width: 42px;
   padding: 4px 10px;
-  border-radius: 999px;
-  background: hsl(var(--surface-contrast-soft) / 0.88);
   font-size: 12px;
   font-weight: 600;
   color: hsl(var(--text-strong));
+  background: hsl(var(--surface-contrast-soft) / 88%);
+  border-radius: 999px;
 }
 
 .chat-history-page__detail-action {
@@ -568,10 +568,10 @@ function closeDetail() {
 
 .chat-history-page__empty {
   display: flex;
-  min-height: 360px;
   flex: 1;
   align-items: center;
   justify-content: center;
+  min-height: 360px;
 }
 
 .chat-history-page__pagination {
@@ -599,27 +599,27 @@ function closeDetail() {
 
 .chat-history-page__content :deep(.el-table th.el-table__cell) {
   height: 48px;
-  background: hsl(var(--surface-contrast-soft) / 0.54);
-  border-bottom-color: hsl(var(--divider-faint) / 0.28);
   font-size: 12px;
   font-weight: 600;
   color: hsl(var(--text-muted));
+  background: hsl(var(--surface-contrast-soft) / 54%);
+  border-bottom-color: hsl(var(--divider-faint) / 28%);
 }
 
 .chat-history-page__content :deep(.el-table td.el-table__cell) {
   padding: 14px 0;
   background: transparent;
-  border-bottom-color: hsl(var(--divider-faint) / 0.22);
+  border-bottom-color: hsl(var(--divider-faint) / 22%);
 }
 
 .chat-history-page__content
   :deep(.el-table__body tr:hover > td.el-table__cell) {
-  background: hsl(var(--primary) / 0.04);
+  background: hsl(var(--primary) / 4%);
 }
 
 .chat-history-page__content
   :deep(.el-table__body tr.current-row > td.el-table__cell) {
-  background: hsl(var(--primary) / 0.08);
+  background: hsl(var(--primary) / 8%);
 }
 
 @media (max-width: 1024px) {
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/Document.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/Document.vue
index 2aa5b5d..ae0d319 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/Document.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/Document.vue
@@ -268,76 +268,85 @@ const backDoc = () => {
 
 <style scoped>
 .document-container {
-  width: 100%;
   display: flex;
-  height: 100%;
-  padding: 24px 24px 30px 24px;
-}
-.doc-container {
-  height: 100%;
   width: 100%;
+  height: 100%;
+  padding: 24px 24px 30px;
+}
+
+.doc-container {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
-}
-.doc-table-content {
-  border-radius: 8px;
   width: 100%;
-  box-sizing: border-box;
-  padding: 20px 14px 0 14px;
-  background-color: var(--el-bg-color);
-  flex: 1;
+  height: 100%;
 }
+
+.doc-table-content {
+  box-sizing: border-box;
+  flex: 1;
+  width: 100%;
+  padding: 20px 14px 0;
+  background-color: var(--el-bg-color);
+  border-radius: 8px;
+}
+
 .doc-header {
   width: 100%;
-  margin: 0 auto;
   padding-bottom: 21px;
+  margin: 0 auto;
 }
+
 .doc-content {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  width: 100%;
   gap: 12px;
+  width: 100%;
+  height: 100%;
 }
+
 .doc-top-menu {
-  flex: 1;
-  width: auto;
-  border-radius: 0;
-  background-color: transparent;
-  padding: 0;
   display: flex;
+  flex: 1;
   flex-wrap: wrap;
   gap: 6px;
-  min-height: 32px;
   align-items: center;
+  width: auto;
+  min-height: 32px;
+  padding: 0;
+  background-color: transparent;
+  border-radius: 0;
 }
+
 .doc-menu-item {
-  border: 1px solid transparent;
-  background: transparent;
   padding: 7px 14px;
-  border-radius: 8px;
   font-size: 14px;
-  color: var(--el-text-color-secondary);
   font-weight: 500;
+  color: var(--el-text-color-secondary);
   cursor: pointer;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 8px;
   transition:
     background-color 0.2s,
     color 0.2s,
     border-color 0.2s,
     box-shadow 0.2s;
 }
+
 .doc-menu-item:hover {
-  background-color: var(--el-fill-color-light);
   color: var(--el-text-color-primary);
+  background-color: var(--el-fill-color-light);
 }
+
 .doc-menu-item.active {
+  font-weight: 600;
   color: var(--el-color-primary);
   background-color: var(--el-color-primary-light-9);
   border-color: var(--el-color-primary-light-7);
   box-shadow: 0 2px 10px rgb(64 158 255 / 16%);
-  font-weight: 600;
 }
+
 .doc-menu-item:focus-visible {
   outline: 2px solid var(--el-color-primary-light-5);
   outline-offset: 1px;
@@ -353,52 +362,59 @@ const backDoc = () => {
 .doc-table {
   background-color: var(--el-bg-color);
 }
+
 .doc-imp-container {
+  box-sizing: border-box;
   flex: 1;
   width: 100%;
-  box-sizing: border-box;
 }
+
 .doc-header-container {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
+
 .doc-knowledge-container {
   display: flex;
   flex-direction: row;
+  gap: 8px;
   align-items: center;
   margin-bottom: 20px;
-  gap: 8px;
 }
+
 .knowledge-info-container {
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-width: 160px;
 }
+
 .title {
-  font-weight: 500;
   font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
   line-height: 24px;
   text-align: left;
-  font-style: normal;
   text-transform: none;
 }
 
 .description {
-  font-weight: 400;
   font-size: 14px;
-  color: #75808d;
-  line-height: 22px;
-  text-align: left;
   font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: #75808d;
+  text-align: left;
   text-transform: none;
 }
+
 .doc-search-container {
+  display: flex;
   width: 100%;
   height: 100%;
-  display: flex;
 }
+
 .menu-container {
   flex: 1;
 }
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollection.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollection.vue
index 8bb9529..d9ef487 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollection.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollection.vue
@@ -601,9 +601,9 @@ function changeCategory(category: any) {
 
 <style scoped>
 h1 {
-  text-align: center;
   margin-bottom: 30px;
   color: #303133;
+  text-align: center;
 }
 
 .knowledge-scope-chip {
@@ -616,7 +616,7 @@ h1 {
   font-weight: 600;
   line-height: 1;
   color: hsl(var(--text-strong));
-  background: hsl(var(--surface-subtle) / 0.92);
+  background: hsl(var(--surface-subtle) / 92%);
   border: 1px solid hsl(var(--line-subtle));
   border-radius: 999px;
   transition:
@@ -632,15 +632,15 @@ button.knowledge-scope-chip {
 }
 
 button.knowledge-scope-chip:hover {
+  box-shadow: 0 10px 22px -18px hsl(var(--foreground) / 32%);
   transform: translateY(-1px);
-  box-shadow: 0 10px 22px -18px hsl(var(--foreground) / 0.32);
 }
 
 button.knowledge-scope-chip:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 4px hsl(var(--primary) / 0.12),
-    0 10px 22px -18px hsl(var(--foreground) / 0.32);
+    0 0 0 4px hsl(var(--primary) / 12%),
+    0 10px 22px -18px hsl(var(--foreground) / 32%);
 }
 
 button.knowledge-scope-chip:disabled {
@@ -663,20 +663,20 @@ button.knowledge-scope-chip:disabled {
 
 .knowledge-scope-chip--private {
   color: hsl(var(--primary));
-  background: hsl(var(--primary) / 0.09);
-  border-color: hsl(var(--primary) / 0.2);
+  background: hsl(var(--primary) / 9%);
+  border-color: hsl(var(--primary) / 20%);
 }
 
 .knowledge-scope-chip--dept {
   color: hsl(var(--warning));
-  background: hsl(var(--warning) / 0.12);
-  border-color: hsl(var(--warning) / 0.2);
+  background: hsl(var(--warning) / 12%);
+  border-color: hsl(var(--warning) / 20%);
 }
 
 .knowledge-scope-chip--public {
   color: hsl(var(--success));
-  background: hsl(var(--success) / 0.12);
-  border-color: hsl(var(--success) / 0.2);
+  background: hsl(var(--success) / 12%);
+  border-color: hsl(var(--success) / 20%);
 }
 
 .knowledge-scope-panel {
@@ -687,9 +687,9 @@ button.knowledge-scope-chip:disabled {
 
 .knowledge-scope-option {
   display: flex;
+  gap: 10px;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
   width: 100%;
   padding: 10px 8px;
   text-align: left;
@@ -703,12 +703,12 @@ button.knowledge-scope-chip:disabled {
 }
 
 .knowledge-scope-option:hover {
-  background: hsl(var(--foreground) / 0.04);
+  background: hsl(var(--foreground) / 4%);
 }
 
 .knowledge-scope-option:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.12);
+  box-shadow: 0 0 0 4px hsl(var(--primary) / 12%);
 }
 
 .knowledge-scope-option:disabled {
@@ -729,8 +729,8 @@ button.knowledge-scope-chip:disabled {
   justify-content: center;
   width: 30px;
   height: 30px;
-  border-radius: 9px;
   background: transparent;
+  border-radius: 9px;
 }
 
 .knowledge-scope-option__icon {
@@ -764,29 +764,29 @@ button.knowledge-scope-chip:disabled {
 
 .knowledge-scope-option--private .knowledge-scope-option__icon-wrap {
   color: hsl(var(--primary));
-  background: hsl(var(--primary) / 0.1);
+  background: hsl(var(--primary) / 10%);
 }
 
 .knowledge-scope-option--dept .knowledge-scope-option__icon-wrap {
   color: hsl(var(--warning));
-  background: hsl(var(--warning) / 0.12);
+  background: hsl(var(--warning) / 12%);
 }
 
 .knowledge-scope-option--public .knowledge-scope-option__icon-wrap {
   color: hsl(var(--success));
-  background: hsl(var(--success) / 0.12);
+  background: hsl(var(--success) / 12%);
 }
 
 .knowledge-scope-option--private.knowledge-scope-option--active {
-  background: hsl(var(--primary) / 0.08);
+  background: hsl(var(--primary) / 8%);
 }
 
 .knowledge-scope-option--dept.knowledge-scope-option--active {
-  background: hsl(var(--warning) / 0.08);
+  background: hsl(var(--warning) / 8%);
 }
 
 .knowledge-scope-option--public.knowledge-scope-option--active {
-  background: hsl(var(--success) / 0.08);
+  background: hsl(var(--success) / 8%);
 }
 
 .knowledge-scope-option--private .knowledge-scope-option__check {
@@ -803,8 +803,8 @@ button.knowledge-scope-chip:disabled {
 
 :global(.knowledge-visibility-popover.el-popover.el-popper) {
   padding: 8px;
-  border-radius: 16px;
   border-color: hsl(var(--line-subtle));
-  box-shadow: 0 18px 34px -28px hsl(var(--foreground) / 0.2);
+  border-radius: 16px;
+  box-shadow: 0 18px 34px -28px hsl(var(--foreground) / 20%);
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentTable.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentTable.vue
index 9a4c2a1..8d4aebf 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentTable.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentTable.vue
@@ -162,17 +162,19 @@ const handleDelete = (row: any) => {
   flex-direction: column;
   justify-content: space-between;
 }
+
 .file-name-container {
   display: flex;
   align-items: center;
 }
+
 .title {
-  font-weight: 500;
   font-size: 14px;
-  color: #1a1a1a;
-  line-height: 20px;
-  text-align: left;
   font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  color: #1a1a1a;
+  text-align: left;
   text-transform: none;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/FaqEditDialog.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/FaqEditDialog.vue
index ef531a6..815a404 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/FaqEditDialog.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/FaqEditDialog.vue
@@ -252,8 +252,8 @@ onBeforeUnmount(() => {
 
 .faq-form :deep(.el-input__wrapper),
 .faq-form :deep(.el-select__wrapper) {
-  border-radius: 10px;
   min-height: 42px;
+  border-radius: 10px;
   transition: box-shadow 0.2s ease;
 }
 
@@ -264,17 +264,17 @@ onBeforeUnmount(() => {
 
 .field-tip {
   margin-top: 6px;
-  color: var(--el-text-color-secondary);
   font-size: 12px;
   line-height: 18px;
+  color: var(--el-text-color-secondary);
 }
 
 .editor-wrapper {
   width: 100%;
+  overflow: hidden;
+  background: var(--el-fill-color-blank);
   border: 1px solid var(--el-border-color-lighter);
   border-radius: 12px;
-  background: var(--el-fill-color-blank);
-  overflow: hidden;
   box-shadow: 0 8px 24px rgb(15 23 42 / 4%);
   transition:
     border-color 0.2s ease,
@@ -287,16 +287,16 @@ onBeforeUnmount(() => {
 }
 
 :deep(.w-e-toolbar) {
-  border-bottom: 1px solid var(--el-border-color-light);
-  background: var(--el-fill-color-blank);
   padding: 8px 10px;
+  background: var(--el-fill-color-blank);
+  border-bottom: 1px solid var(--el-border-color-light);
 }
 
 :deep(.w-e-text-container) {
   height: 340px;
   min-height: 340px;
-  background: var(--el-fill-color-blank);
   cursor: text;
+  background: var(--el-fill-color-blank);
 }
 
 :deep(.w-e-text-container .w-e-scroll) {
@@ -315,8 +315,8 @@ onBeforeUnmount(() => {
 
 .dialog-footer {
   display: flex;
-  justify-content: flex-end;
   gap: 12px;
+  justify-content: flex-end;
 }
 
 .footer-btn {
@@ -324,13 +324,13 @@ onBeforeUnmount(() => {
 }
 
 :deep(.faq-edit-dialog .el-dialog) {
-  border-radius: 14px;
   overflow: hidden;
+  border-radius: 14px;
 }
 
 :deep(.faq-edit-dialog .el-dialog__header) {
-  margin-right: 0;
   padding: 18px 22px;
+  margin-right: 0;
   border-bottom: 1px solid var(--el-border-color-lighter);
 }
 
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/FaqImportDialog.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/FaqImportDialog.vue
index f33a5f7..f778f78 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/FaqImportDialog.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/FaqImportDialog.vue
@@ -298,31 +298,31 @@ const handleImport = async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 10px 12px;
+  background: var(--el-fill-color-blank);
   border: 1px solid var(--el-border-color-light);
   border-radius: 10px;
-  background: var(--el-fill-color-blank);
-  padding: 10px 12px;
 }
 
 .selected-file-main {
   display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
   flex: 1;
+  gap: 10px;
+  align-items: center;
+  min-width: 0;
 }
 
 .selected-file-icon {
-  color: var(--el-text-color-secondary);
   font-size: 18px;
+  color: var(--el-text-color-secondary);
 }
 
 .selected-file-name {
-  color: var(--el-text-color-primary);
-  font-size: 14px;
-  font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--el-text-color-primary);
   white-space: nowrap;
 }
 
@@ -335,10 +335,10 @@ const handleImport = async () => {
 }
 
 .result-wrap {
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 12px;
   padding: 14px;
   background: var(--el-fill-color-light);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 12px;
 }
 
 .result-head {
@@ -350,8 +350,8 @@ const handleImport = async () => {
 
 .result-title-wrap {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
 }
 
 .result-state-icon {
@@ -371,24 +371,24 @@ const handleImport = async () => {
 }
 
 .stat-item {
+  padding: 10px 12px;
   background: var(--el-fill-color-blank);
   border: 1px solid var(--el-border-color-lighter);
   border-radius: 8px;
-  padding: 10px 12px;
 }
 
 .stat-label {
-  color: var(--el-text-color-secondary);
+  margin-bottom: 8px;
   font-size: 12px;
   line-height: 1;
-  margin-bottom: 8px;
+  color: var(--el-text-color-secondary);
 }
 
 .stat-value {
-  color: var(--el-text-color-primary);
   font-size: 22px;
   font-weight: 600;
   line-height: 1;
+  color: var(--el-text-color-primary);
 }
 
 .success-text {
@@ -414,14 +414,14 @@ const handleImport = async () => {
 
 :deep(.faq-upload-area .el-upload-dragger) {
   padding: 0;
-  border-radius: 10px;
   background-color: var(--el-fill-color-blank);
+  border-radius: 10px;
   transition: all 0.3s;
 }
 
 :deep(.faq-upload-area .el-upload-dragger:hover) {
-  border-color: var(--el-color-primary);
   background-color: var(--el-color-primary-light-9);
+  border-color: var(--el-color-primary);
 }
 
 @media (max-width: 768px) {
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/FaqTable.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/FaqTable.vue
index 4b5bc27..174b08d 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/FaqTable.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/FaqTable.vue
@@ -1000,37 +1000,37 @@ onMounted(() => {
 }
 
 .faq-category-pane {
-  width: 236px;
-  min-width: 236px;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 12px;
-  background: var(--el-fill-color-blank);
   display: flex;
   flex-direction: column;
+  width: 236px;
+  min-width: 236px;
   overflow: hidden;
+  background: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 12px;
 }
 
 .faq-category-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   padding: 10px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
   font-weight: 600;
+  border-bottom: 1px solid var(--el-border-color-lighter);
 }
 
 .faq-category-tree {
+  flex: 1;
   padding: 6px;
   overflow: auto;
-  flex: 1;
 }
 
 .faq-category-node {
+  display: flex;
+  gap: 6px;
+  align-items: center;
   width: 100%;
   min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 6px;
 }
 
 .faq-category-node.is-all-node .faq-category-node-label {
@@ -1053,12 +1053,12 @@ onMounted(() => {
 }
 
 .faq-content-pane {
+  flex: 1;
+  padding: 14px 16px 8px;
+  overflow: auto;
+  background: var(--el-fill-color-blank);
   border: 1px solid var(--el-border-color-lighter);
   border-radius: 12px;
-  padding: 14px 16px 8px;
-  background: var(--el-fill-color-blank);
-  flex: 1;
-  overflow: auto;
 }
 
 .faq-header {
@@ -1074,18 +1074,18 @@ onMounted(() => {
 
 .faq-toolbar {
   display: flex;
+  gap: 14px;
   align-items: center;
   justify-content: space-between;
-  gap: 14px;
   padding: 2px 0;
 }
 
 .faq-search-actions {
-  flex: 1;
-  min-width: 260px;
   display: flex;
-  align-items: center;
+  flex: 1;
   gap: 10px;
+  align-items: center;
+  min-width: 260px;
 }
 
 .faq-search-input {
@@ -1095,15 +1095,15 @@ onMounted(() => {
 .faq-primary-actions {
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-end;
   gap: 10px;
+  justify-content: flex-end;
 }
 
 :deep(.faq-toolbar .el-button) {
   height: 38px;
   padding: 0 16px;
-  border-radius: 10px;
   font-weight: 500;
+  border-radius: 10px;
   transition:
     border-color 0.2s ease,
     background-color 0.2s ease,
@@ -1112,15 +1112,15 @@ onMounted(() => {
 
 :deep(.faq-toolbar .el-button:not(.el-button--primary):hover) {
   color: hsl(var(--primary));
-  border-color: hsl(var(--primary) / 45%);
   background: hsl(var(--primary) / 7%);
+  border-color: hsl(var(--primary) / 45%);
 }
 
 :deep(.faq-search-input .el-input__wrapper) {
+  padding-right: 12px;
+  padding-left: 12px;
   border-radius: 10px;
   box-shadow: 0 0 0 1px var(--el-border-color) inset;
-  padding-left: 12px;
-  padding-right: 12px;
 }
 
 :deep(.faq-search-input .el-input__wrapper:hover) {
@@ -1142,8 +1142,8 @@ onMounted(() => {
 
 :deep(.faq-category-tree .el-tree-node__content) {
   height: 34px;
-  border-radius: 8px;
   padding-right: 4px;
+  border-radius: 8px;
 }
 
 :deep(.faq-category-tree .el-tree-node__content:hover) {
@@ -1157,8 +1157,8 @@ onMounted(() => {
 }
 
 :deep(.el-tree-node.is-current > .el-tree-node__content) {
-  background-color: hsl(var(--primary) / 15%);
   color: hsl(var(--primary));
+  background-color: hsl(var(--primary) / 15%);
 }
 
 :deep(
@@ -1168,8 +1168,8 @@ onMounted(() => {
 }
 
 :deep(.el-table) {
-  border-radius: 10px;
   overflow: hidden;
+  border-radius: 10px;
 }
 
 :deep(.el-table th.el-table__cell) {
@@ -1183,8 +1183,8 @@ onMounted(() => {
 
 @media (max-width: 1360px) {
   .faq-toolbar {
-    align-items: flex-start;
     flex-direction: column;
+    align-items: flex-start;
   }
 
   .faq-search-actions,
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/ImportKnowledgeDocFile.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/ImportKnowledgeDocFile.vue
index 10d768a..826424a 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/ImportKnowledgeDocFile.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/ImportKnowledgeDocFile.vue
@@ -221,11 +221,11 @@ async function confirmImport() {
 .imp-doc-kno-container {
   position: relative;
   display: flex;
-  height: 100%;
   flex-direction: column;
+  height: 100%;
   padding: 24px;
-  border-radius: 16px;
   background: var(--el-bg-color);
+  border-radius: 16px;
 }
 
 .imp-doc-kno-content {
@@ -239,9 +239,9 @@ async function confirmImport() {
 
 .step-card {
   padding: 20px 24px;
+  background: var(--el-fill-color-blank);
   border: 1px solid var(--el-border-color-light);
   border-radius: 16px;
-  background: var(--el-fill-color-blank);
 }
 
 .step-body {
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/SegmenterDoc.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/SegmenterDoc.vue
index fdb4606..9bc2c0d 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/SegmenterDoc.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/SegmenterDoc.vue
@@ -323,8 +323,8 @@ function showLengthSettings(strategyCode?: string) {
 
 .strategy-card__header {
   display: flex;
-  justify-content: space-between;
   gap: 16px;
+  justify-content: space-between;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--el-border-color-lighter);
 }
@@ -343,9 +343,9 @@ function showLengthSettings(strategyCode?: string) {
 
 .strategy-card__badges {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   align-items: flex-start;
-  flex-wrap: wrap;
 }
 
 .strategy-card__content {
@@ -369,10 +369,10 @@ function showLengthSettings(strategyCode?: string) {
 }
 
 .strategy-reason-list {
-  margin: 0;
   padding-left: 18px;
-  color: var(--el-text-color-regular);
+  margin: 0;
   line-height: 1.7;
+  color: var(--el-text-color-regular);
 }
 
 .strategy-reason-list__item {
@@ -387,7 +387,7 @@ function showLengthSettings(strategyCode?: string) {
 
 .strategy-form {
   padding: 16px;
-  border-radius: 12px;
   background: var(--el-fill-color-light);
+  border-radius: 12px;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/documentCollection/SplitterDocPreview.vue b/easyflow-ui-admin/app/src/views/ai/documentCollection/SplitterDocPreview.vue
index d17e1ec..f38903c 100644
--- a/easyflow-ui-admin/app/src/views/ai/documentCollection/SplitterDocPreview.vue
+++ b/easyflow-ui-admin/app/src/views/ai/documentCollection/SplitterDocPreview.vue
@@ -193,9 +193,9 @@ watch(
 
 .preview-panel {
   padding: 20px;
+  background: var(--el-bg-color);
   border: 1px solid var(--el-border-color-light);
   border-radius: 16px;
-  background: var(--el-bg-color);
 }
 
 .preview-summary {
@@ -212,16 +212,16 @@ watch(
 
 .chunk-card {
   padding: 16px;
+  background: var(--el-fill-color-blank);
   border: 1px solid var(--el-border-color-lighter);
   border-radius: 14px;
-  background: var(--el-fill-color-blank);
 }
 
 .chunk-card__header {
   display: flex;
+  gap: 12px;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
 }
 
 .chunk-card__title {
@@ -244,11 +244,11 @@ watch(
 
 .chunk-card__content {
   margin: 16px 0 0;
-  white-space: pre-wrap;
-  word-break: break-word;
   font-family: inherit;
   line-height: 1.7;
   color: var(--el-text-color-regular);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
 }
 
 .chunk-card__warnings {
@@ -262,10 +262,10 @@ watch(
   display: flex;
   flex-direction: column;
   gap: 12px;
-  margin-top: 16px;
   padding: 12px;
-  border-radius: 12px;
+  margin-top: 16px;
   background: var(--el-fill-color-light);
+  border-radius: 12px;
 }
 
 .qa-block__item {
@@ -276,11 +276,11 @@ watch(
 
 .qa-block__label {
   display: inline-flex;
-  width: 22px;
   justify-content: center;
-  border-radius: 999px;
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
+  width: 22px;
   font-weight: 600;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  border-radius: 999px;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/mcp/McpModal.vue b/easyflow-ui-admin/app/src/views/ai/mcp/McpModal.vue
index 4a6e8b5..ea690d1 100644
--- a/easyflow-ui-admin/app/src/views/ai/mcp/McpModal.vue
+++ b/easyflow-ui-admin/app/src/views/ai/mcp/McpModal.vue
@@ -262,50 +262,56 @@ const activeName = ref('config');
   display: flex;
   flex-direction: column;
 }
+
 .content-title {
+  font-size: 12px;
+  font-style: normal;
   font-weight: 500;
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.85);
   line-height: 24px;
+  color: rgb(0 0 0 / 85%);
   text-align: left;
-  font-style: normal;
   text-transform: none;
 }
+
 .content-desc {
-  font-weight: 400;
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
-  line-height: 22px;
-  text-align: left;
   font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: rgb(0 0 0 / 45%);
+  text-align: left;
   text-transform: none;
 }
+
 .params-name {
-  flex: 1;
-  background-color: #fafafa;
   display: flex;
+  flex: 1;
   align-items: center;
+  padding: 8px;
+  background-color: #fafafa;
   border: 1px solid #e6e9ee;
   border-radius: 8px;
-  padding: 8px;
 }
+
 .params-content-container {
   display: flex;
+  flex: 1;
   flex-direction: row;
   gap: 8px;
-  flex: 1;
-  border-radius: 8px;
   padding: 8px;
+  border-radius: 8px;
 }
+
 .params-desc-container {
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: 4px;
-  flex: 1;
-  border-radius: 8px;
-  border: 1px solid #e6e9ee;
   padding: 8px;
+  border: 1px solid #e6e9ee;
+  border-radius: 8px;
 }
+
 .params-list {
   display: flex;
   flex-direction: column;
@@ -313,18 +319,19 @@ const activeName = ref('config');
 
 .params-left-title-container {
   display: flex;
-  flex-direction: row;
-  background-color: #fafafa;
-  gap: 8px;
   flex: 1;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  padding: 8px;
+  background-color: #fafafa;
   border: 1px solid #e6e9ee;
   border-radius: 8px;
-  padding: 8px;
-  align-items: center;
 }
+
 .required-mark {
-  color: #f56c6c;
   margin-left: 2px;
   font-size: 14px;
+  color: #f56c6c;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/model/AddModelModal.vue b/easyflow-ui-admin/app/src/views/ai/model/AddModelModal.vue
index c7fa1bc..fa22240 100644
--- a/easyflow-ui-admin/app/src/views/ai/model/AddModelModal.vue
+++ b/easyflow-ui-admin/app/src/views/ai/model/AddModelModal.vue
@@ -408,8 +408,8 @@ const save = async () => {
 }
 
 .model-modal__ability-panel {
-  overflow: hidden;
   padding: 2px;
+  overflow: hidden;
   border-radius: 18px;
 }
 
@@ -421,8 +421,8 @@ const save = async () => {
 }
 
 .model-modal__ability-separator {
-  width: 1px;
   align-self: stretch;
+  width: 1px;
   min-height: 28px;
   background: hsl(var(--divider-faint) / 62%);
   border-radius: 999px;
@@ -430,9 +430,9 @@ const save = async () => {
 
 .model-modal__ability-chip {
   display: inline-flex;
+  gap: 8px;
   align-items: center;
   justify-content: center;
-  gap: 8px;
   min-height: 40px;
   padding: 9px 18px;
   font-size: 13px;
@@ -454,21 +454,21 @@ const save = async () => {
 .model-modal__ability-chip:hover:not(:disabled),
 .model-modal__ability-chip:focus-visible:not(:disabled) {
   color: hsl(var(--text-strong));
-  transform: translateY(-1px);
   box-shadow: 0 10px 18px -14px hsl(var(--foreground) / 28%);
+  transform: translateY(-1px);
 }
 
 .model-modal__ability-chip.is-active {
   color: hsl(var(--text-strong));
-  border-color: hsl(var(--primary) / 18%);
   background: hsl(var(--primary) / 10%);
+  border-color: hsl(var(--primary) / 18%);
   box-shadow: inset 0 0 0 1px hsl(var(--primary) / 14%);
 }
 
 .model-modal__ability-chip.is-disabled {
   cursor: not-allowed;
-  opacity: 0.56;
   box-shadow: none;
+  opacity: 0.56;
   transform: none;
 }
 
diff --git a/easyflow-ui-admin/app/src/views/ai/model/AddModelProviderModal.vue b/easyflow-ui-admin/app/src/views/ai/model/AddModelProviderModal.vue
index 5191b36..0edac41 100644
--- a/easyflow-ui-admin/app/src/views/ai/model/AddModelProviderModal.vue
+++ b/easyflow-ui-admin/app/src/views/ai/model/AddModelProviderModal.vue
@@ -1,17 +1,28 @@
 <script setup lang="ts">
-import {computed, reactive, ref} from 'vue';
+import { computed, reactive, ref } from 'vue';
 
-import {EasyFlowFormModal} from '@easyflow/common-ui';
+import { EasyFlowFormModal } from '@easyflow/common-ui';
 
-import {ArrowDown, ArrowUp} from '@element-plus/icons-vue';
-import {ElForm, ElFormItem, ElIcon, ElInput, ElMessage, ElOption, ElSelect,} from 'element-plus';
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
+import {
+  ElForm,
+  ElFormItem,
+  ElIcon,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
 
-import {api} from '#/api/request';
+import { api } from '#/api/request';
 import UploadAvatar from '#/components/upload/UploadAvatar.vue';
-import {$t} from '#/locales';
-import {syncProgrammaticFieldValidation} from '#/utils/form-validation';
+import { $t } from '#/locales';
+import { syncProgrammaticFieldValidation } from '#/utils/form-validation';
 import ModelProviderBadge from '#/views/ai/model/ModelProviderBadge.vue';
-import {getProviderPresetByValue, providerPresets,} from '#/views/ai/model/modelUtils/defaultIcon';
+import {
+  getProviderPresetByValue,
+  providerPresets,
+} from '#/views/ai/model/modelUtils/defaultIcon';
 
 const emit = defineEmits(['reload']);
 
diff --git a/easyflow-ui-admin/app/src/views/ai/model/ModelVerifyConfig.vue b/easyflow-ui-admin/app/src/views/ai/model/ModelVerifyConfig.vue
index c46f579..2f09e86 100644
--- a/easyflow-ui-admin/app/src/views/ai/model/ModelVerifyConfig.vue
+++ b/easyflow-ui-admin/app/src/views/ai/model/ModelVerifyConfig.vue
@@ -1,13 +1,19 @@
 <script setup lang="ts">
-import {computed, reactive, ref} from 'vue';
+import { computed, reactive, ref } from 'vue';
 
-import {EasyFlowFormModal} from '@easyflow/common-ui';
+import { EasyFlowFormModal } from '@easyflow/common-ui';
 
-import {CircleCheckFilled, WarningFilled} from '@element-plus/icons-vue';
-import {ElForm, ElFormItem, ElMessage, ElOption, ElSelect,} from 'element-plus';
+import { CircleCheckFilled, WarningFilled } from '@element-plus/icons-vue';
+import {
+  ElForm,
+  ElFormItem,
+  ElMessage,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
 
-import {api} from '#/api/request';
-import {$t} from '#/locales';
+import { api } from '#/api/request';
+import { $t } from '#/locales';
 
 type VerifyStatus = 'error' | 'idle' | 'success';
 
diff --git a/easyflow-ui-admin/app/src/views/ai/model/ModelViewItemOperation.vue b/easyflow-ui-admin/app/src/views/ai/model/ModelViewItemOperation.vue
index 047cd58..bd5cd53 100644
--- a/easyflow-ui-admin/app/src/views/ai/model/ModelViewItemOperation.vue
+++ b/easyflow-ui-admin/app/src/views/ai/model/ModelViewItemOperation.vue
@@ -263,16 +263,13 @@ const getSelectedAbilityTagsForLlm = (llm: llmType): ModelAbilityItem[] => {
 }
 
 .llm-item__description {
+  display: -webkit-box;
   margin: 0;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
   font-size: 13px;
   line-height: 1.5;
   color: hsl(var(--text-muted));
-}
-
-.llm-item__description {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 
diff --git a/easyflow-ui-admin/app/src/views/ai/model/UnifiedGatewayWorkspace.vue b/easyflow-ui-admin/app/src/views/ai/model/UnifiedGatewayWorkspace.vue
index 45d7607..4382c51 100644
--- a/easyflow-ui-admin/app/src/views/ai/model/UnifiedGatewayWorkspace.vue
+++ b/easyflow-ui-admin/app/src/views/ai/model/UnifiedGatewayWorkspace.vue
@@ -503,7 +503,7 @@ const handleToggleVisibleChecked = (checked: boolean | number | string) => {
   checkedModelIds.value = [...next];
 };
 
-const handlePublishToggle = async (nextValue: string | number | boolean) => {
+const handlePublishToggle = async (nextValue: boolean | number | string) => {
   if (!draft.id || !selectedModel.value || isPublishing.value) {
     return;
   }
@@ -978,9 +978,9 @@ defineExpose({
 
 .gateway-workspace__batch {
   display: flex;
+  gap: 12px;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
   padding: 10px 12px;
   background: hsl(var(--surface-contrast-soft) / 48%);
   border: 1px solid hsl(var(--divider-faint) / 40%);
@@ -1019,8 +1019,8 @@ defineExpose({
 }
 
 .gateway-model-item.is-active {
-  border-color: hsl(var(--primary) / 42%);
   background: hsl(var(--primary) / 7%);
+  border-color: hsl(var(--primary) / 42%);
 }
 
 .gateway-model-item__content {
@@ -1148,9 +1148,9 @@ defineExpose({
 
 .gateway-form__actions {
   display: flex;
+  flex-shrink: 0;
   gap: 12px;
   justify-content: flex-end;
-  flex-shrink: 0;
 }
 
 .gateway-info-grid {
@@ -1189,8 +1189,8 @@ defineExpose({
 }
 
 .gateway-example-item pre {
-  margin: 0;
   padding: 14px;
+  margin: 0;
   overflow: auto;
   font-size: 12px;
   line-height: 1.7;
@@ -1240,18 +1240,18 @@ defineExpose({
   }
 
   .gateway-form__switch-row {
-    align-items: flex-start;
     flex-direction: column;
+    align-items: flex-start;
   }
 
   .gateway-form__invoke-row {
-    align-items: stretch;
     flex-direction: column;
+    align-items: stretch;
   }
 
   .gateway-publish-inline {
-    align-items: flex-start;
     flex-direction: column;
+    align-items: flex-start;
   }
 
   .gateway-hero__title {
diff --git a/easyflow-ui-admin/app/src/views/ai/model/modelUtils/__tests__/providerDraft.test.ts b/easyflow-ui-admin/app/src/views/ai/model/modelUtils/__tests__/providerDraft.test.ts
index 97458f6..0d13303 100644
--- a/easyflow-ui-admin/app/src/views/ai/model/modelUtils/__tests__/providerDraft.test.ts
+++ b/easyflow-ui-admin/app/src/views/ai/model/modelUtils/__tests__/providerDraft.test.ts
@@ -1,4 +1,4 @@
-import {describe, expect, it} from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import {
   createProviderDraft,
diff --git a/easyflow-ui-admin/app/src/views/ai/model/modelUtils/providerDraft.ts b/easyflow-ui-admin/app/src/views/ai/model/modelUtils/providerDraft.ts
index 907a309..9e84075 100644
--- a/easyflow-ui-admin/app/src/views/ai/model/modelUtils/providerDraft.ts
+++ b/easyflow-ui-admin/app/src/views/ai/model/modelUtils/providerDraft.ts
@@ -1,4 +1,4 @@
-import type {ProviderPreset} from './defaultIcon';
+import type { ProviderPreset } from './defaultIcon';
 
 export const PROVIDER_EDITABLE_FIELDS = [
   'apiKey',
diff --git a/easyflow-ui-admin/app/src/views/ai/plugin/AddPluginModal.vue b/easyflow-ui-admin/app/src/views/ai/plugin/AddPluginModal.vue
index 29908f7..e15420e 100644
--- a/easyflow-ui-admin/app/src/views/ai/plugin/AddPluginModal.vue
+++ b/easyflow-ui-admin/app/src/views/ai/plugin/AddPluginModal.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
-import type {FormInstance} from 'element-plus';
+import type { FormInstance } from 'element-plus';
+
+import { onMounted, ref } from 'vue';
+
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
+import { Plus, Remove } from '@element-plus/icons-vue';
 import {
   ElForm,
   ElFormItem,
@@ -12,15 +18,9 @@ import {
   ElSelect,
 } from 'element-plus';
 
-import {onMounted, ref} from 'vue';
-
-import {EasyFlowFormModal} from '@easyflow/common-ui';
-
-import {Plus, Remove} from '@element-plus/icons-vue';
-
-import {api} from '#/api/request';
+import { api } from '#/api/request';
 import UploadAvatar from '#/components/upload/UploadAvatar.vue';
-import {$t} from '#/locales';
+import { $t } from '#/locales';
 
 const emit = defineEmits(['reload']);
 const embeddingLlmList = ref<any>([]);
@@ -44,9 +44,11 @@ onMounted(() => {
   api.get('/api/v1/plugin/modelList?supportEmbed=true').then((res) => {
     embeddingLlmList.value = res.data;
   });
-  api.get('/api/v1/plugin/modelList?supportRerankerLlmList=true').then((res) => {
-    rerankerLlmList.value = res.data;
-  });
+  api
+    .get('/api/v1/plugin/modelList?supportRerankerLlmList=true')
+    .then((res) => {
+      rerankerLlmList.value = res.data;
+    });
   api.get('/api/v1/pluginCategory/list').then((res) => {
     if (res.errorCode === 0) {
       categoryList.value = res.data;
@@ -145,7 +147,8 @@ function save() {
           })
           .then(async (res) => {
             if (res.errorCode === 0) {
-              const pluginId = res.data?.id || plainEntity.id || entity.value.id;
+              const pluginId =
+                res.data?.id || plainEntity.id || entity.value.id;
               if (!pluginId) {
                 throw new Error('插件保存成功，但未返回插件ID');
               }
@@ -330,15 +333,17 @@ function removeHeader(index: number) {
 .headers-container-reduce {
   align-items: center;
 }
+
 .addHeadersBtn {
   width: 100%;
-  border-style: dashed;
-  border-color: var(--el-color-primary);
-  border-radius: 8px;
   margin-top: 8px;
+  border-color: var(--el-color-primary);
+  border-style: dashed;
+  border-radius: 8px;
 }
+
 .head-con-content {
-  margin-bottom: 8px;
   align-items: center;
+  margin-bottom: 8px;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/plugin/PluginRunTestModal.vue b/easyflow-ui-admin/app/src/views/ai/plugin/PluginRunTestModal.vue
index 0b47117..2c21a01 100644
--- a/easyflow-ui-admin/app/src/views/ai/plugin/PluginRunTestModal.vue
+++ b/easyflow-ui-admin/app/src/views/ai/plugin/PluginRunTestModal.vue
@@ -82,7 +82,6 @@ function handleSubmitRun() {
     v-model:open="dialogVisible"
     width="80%"
     align-center
-    class="run-test-dialog"
     :title="$t('pluginItem.pluginToolEdit.trialRun')"
     :before-close="() => (dialogVisible = false)"
   >
@@ -157,32 +156,36 @@ function handleSubmitRun() {
   width: 100%;
   height: calc(100vh - 161px);
 }
-.run-test-dialog {
-}
+
 .run-test-params {
+  flex: 1;
   width: 100%;
   overflow: auto;
-  flex: 1;
 }
+
 .run-res-json {
-  width: 100%;
   flex: 1;
+  width: 100%;
   overflow: auto;
 }
+
 .run-test-result {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: column;
 }
+
 .name-cell {
   position: relative;
   min-width: 100%;
 }
+
 .run-title-style {
+  margin-bottom: 8px;
   font-size: 16px;
   font-weight: bold;
-  margin-bottom: 8px;
 }
+
 .editable-name {
   display: flex;
   flex-direction: column;
@@ -201,15 +204,15 @@ function handleSubmitRun() {
 }
 
 .error-message {
-  color: #ff4d4f;
-  font-size: 12px;
   margin-top: 2px;
+  font-size: 12px;
   line-height: 1.2;
+  color: #ff4d4f;
 }
 
 :deep(.el-table td.el-table__cell.first-column div) {
   display: flex;
-  align-items: center;
   gap: 2px;
+  align-items: center;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/plugin/PluginToolCollapse.vue b/easyflow-ui-admin/app/src/views/ai/plugin/PluginToolCollapse.vue
index d879ed0..1017376 100644
--- a/easyflow-ui-admin/app/src/views/ai/plugin/PluginToolCollapse.vue
+++ b/easyflow-ui-admin/app/src/views/ai/plugin/PluginToolCollapse.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts"></script>
 
-<template></template>
+<template>
+  <div></div>
+</template>
 
 <style scoped></style>
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesign.vue b/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesign.vue
index ff8a75a..fe3932c 100644
--- a/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesign.vue
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesign.vue
@@ -4,7 +4,6 @@ import { useRoute } from 'vue-router';
 
 import { usePreferences } from '@easyflow/preferences';
 import { getOptions, sortNodes } from '@easyflow/utils';
-import { getIconByValue } from '#/views/ai/model/modelUtils/defaultIcon';
 
 import { ArrowLeft, CircleCheck, Close } from '@element-plus/icons-vue';
 import { Tinyflow } from '@tinyflow-ai/vue';
@@ -14,6 +13,7 @@ import { api } from '#/api/request';
 import CommonSelectDataModal from '#/components/commonSelectModal/CommonSelectDataModal.vue';
 import { $t } from '#/locales';
 import { router } from '#/router';
+import { getIconByValue } from '#/views/ai/model/modelUtils/defaultIcon';
 import ExecResult from '#/views/ai/workflow/components/ExecResult.vue';
 import SingleRun from '#/views/ai/workflow/components/SingleRun.vue';
 import WorkflowForm from '#/views/ai/workflow/components/WorkflowForm.vue';
@@ -143,7 +143,7 @@ const issueFocusActive = ref(false);
 const focusedIssueKey = ref('');
 let focusPulseTimer: ReturnType<typeof setTimeout> | undefined;
 
-type WorkflowCheckStage = 'SAVE' | 'PRE_EXECUTE';
+type WorkflowCheckStage = 'PRE_EXECUTE' | 'SAVE';
 const builtInNodeIconMap: Record<string, string> = {
   startNode:
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"></path></svg>',
@@ -395,6 +395,15 @@ function checkStageText(stage?: string) {
   }
   return '-';
 }
+
+function checkStageSummaryText(stage?: string) {
+  return `${$t('aiWorkflow.checkStageLabel')}：${checkStageText(stage)}`;
+}
+
+function checkIssueCountText(count?: number) {
+  return `${$t('aiWorkflow.issueCount')}：${count || 0}`;
+}
+
 function issueKey(issue: any, index: number) {
   return `${issue.code || '-'}-${issue.nodeId || '-'}-${issue.edgeId || '-'}-${index}`;
 }
@@ -616,16 +625,8 @@ function onAsyncExecute(info: any) {
           />
         </div>
         <div class="check-summary">
-          <span
-            >{{ $t('aiWorkflow.checkStageLabel') }}：{{
-              checkStageText(checkResult?.stage)
-            }}</span
-          >
-          <span
-            >{{ $t('aiWorkflow.issueCount') }}：{{
-              checkResult?.issueCount || 0
-            }}</span
-          >
+          <span v-text="checkStageSummaryText(checkResult?.stage)"></span>
+          <span v-text="checkIssueCountText(checkResult?.issueCount)"></span>
         </div>
         <div class="checklist-body">
           <button
@@ -645,14 +646,16 @@ function onAsyncExecute(info: any) {
               <span
                 class="check-level"
                 :class="issueLevelClass(item.issue.level)"
-                >{{ item.issue.level || '-' }}</span
-              >
+                v-text="item.issue.level || '-'"
+              ></span>
               <span class="check-node-display">
+                <!-- eslint-disable vue/no-v-html -->
                 <span
                   v-if="item.nodeDisplay.icon"
                   class="check-node-icon"
                   v-html="item.nodeDisplay.icon"
-                />
+                ></span>
+                <!-- eslint-enable vue/no-v-html -->
                 <span v-else class="check-node-icon-fallback">N</span>
                 <span class="check-node-title">{{
                   item.nodeDisplay.title
@@ -676,23 +679,24 @@ function onAsyncExecute(info: any) {
 }
 
 :deep(.tf-bottom-dock) {
-  left: 50% !important;
   bottom: 16px !important;
-  transform: translateX(-50%) !important;
+  left: 50% !important;
   z-index: 46 !important;
+  transform: translateX(-50%) !important;
 }
 
 .head-div {
   --workflow-bottom-dock-height: 56px;
   --workflow-checklist-offset: calc(var(--workflow-bottom-dock-height) + 24px);
+
   position: relative;
   background-color: var(--el-bg-color);
 }
 
 .workflow-head-actions {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
 }
 
 .tiny-flow-container {
@@ -706,18 +710,18 @@ function onAsyncExecute(info: any) {
 
 .checklist-panel {
   position: absolute;
-  left: 20px;
   right: 20px;
   bottom: var(--workflow-checklist-offset);
+  left: 20px;
   z-index: 60;
-  max-height: min(320px, 42vh);
   display: flex;
   flex-direction: column;
+  max-height: min(320px, 42vh);
   padding: 12px;
+  background: var(--el-bg-color-overlay);
   border: 1px solid var(--el-border-color);
   border-radius: 12px;
-  background: var(--el-bg-color-overlay);
-  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 10px 28px rgb(0 0 0 / 12%);
 }
 
 .checklist-header {
@@ -742,18 +746,18 @@ function onAsyncExecute(info: any) {
 }
 
 .checklist-body {
-  overflow: auto;
   display: flex;
   flex-direction: column;
   gap: 8px;
+  overflow: auto;
 }
 
 .check-item {
+  padding: 10px 12px;
   text-align: left;
+  background: var(--el-fill-color-lighter);
   border: 1px solid var(--el-border-color-lighter);
   border-radius: 10px;
-  background: var(--el-fill-color-lighter);
-  padding: 10px 12px;
   transition:
     border-color 0.2s ease,
     box-shadow 0.2s ease,
@@ -765,8 +769,8 @@ function onAsyncExecute(info: any) {
 }
 
 .check-item.is-clickable:hover {
-  border-color: var(--el-color-primary-light-5);
   background: var(--el-fill-color-light);
+  border-color: var(--el-color-primary-light-5);
 }
 
 .check-item.is-active {
@@ -781,11 +785,11 @@ function onAsyncExecute(info: any) {
 
 .check-item-meta {
   display: flex;
-  align-items: center;
   gap: 10px;
+  align-items: center;
+  margin-bottom: 6px;
   font-size: 12px;
   line-height: 1.2;
-  margin-bottom: 6px;
 }
 
 .check-level {
@@ -795,10 +799,10 @@ function onAsyncExecute(info: any) {
   min-width: 56px;
   height: 20px;
   padding: 0 8px;
-  border-radius: 999px;
   font-weight: 600;
   color: var(--el-text-color-primary);
   background: var(--el-fill-color-dark);
+  border-radius: 999px;
 }
 
 .check-level.is-error {
@@ -818,8 +822,8 @@ function onAsyncExecute(info: any) {
 
 .check-node-display {
   display: inline-flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   min-width: 0;
 }
 
@@ -843,24 +847,24 @@ function onAsyncExecute(info: any) {
   justify-content: center;
   width: 18px;
   height: 18px;
-  border-radius: 50%;
   font-size: 10px;
   font-weight: 700;
   color: var(--el-color-primary);
   background: var(--el-color-primary-light-9);
+  border-radius: 50%;
 }
 
 .check-node-title {
   font-size: 14px;
-  color: var(--el-text-color-primary);
   font-weight: 500;
+  color: var(--el-text-color-primary);
 }
 
 .check-item-message {
   font-size: 13px;
   line-height: 1.45;
   color: var(--el-color-danger);
-  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .checklist-slide-enter-active,
@@ -876,14 +880,15 @@ function onAsyncExecute(info: any) {
 
 .workflow-issue-focus :deep(.svelte-flow__node.selected) {
   border-color: var(--el-color-danger) !important;
-  box-shadow: 0 0 0 3px rgba(245, 108, 108, 0.26);
+  box-shadow: 0 0 0 3px rgb(245 108 108 / 26%);
   animation: issue-node-pulse 1.2s ease-out 1;
 }
 
 @keyframes issue-node-pulse {
   0% {
-    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.42);
+    box-shadow: 0 0 0 0 rgb(245 108 108 / 42%);
   }
+
   100% {
     box-shadow: 0 0 0 10px transparent;
   }
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowList.vue b/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowList.vue
index b2cae53..70f26f0 100644
--- a/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowList.vue
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowList.vue
@@ -1,23 +1,15 @@
 <script setup lang="ts">
-import type {FormInstance} from 'element-plus';
-import {
-  ElForm,
-  ElFormItem,
-  ElIcon,
-  ElInput,
-  ElInputNumber,
-  ElMessage,
-  ElMessageBox,
-  ElPopover,
-} from 'element-plus';
+import type { FormInstance } from 'element-plus';
 
-import type {ActionButton, CardPrimaryAction,} from '#/components/page/CardList.vue';
-import CardList from '#/components/page/CardList.vue';
+import type {
+  ActionButton,
+  CardPrimaryAction,
+} from '#/components/page/CardList.vue';
 
-import {computed, markRaw, onMounted, ref} from 'vue';
+import { computed, markRaw, onMounted, ref } from 'vue';
 
-import {useAccess} from '@easyflow/access';
-import {EasyFlowFormModal} from '@easyflow/common-ui';
+import { useAccess } from '@easyflow/access';
+import { EasyFlowFormModal } from '@easyflow/common-ui';
 
 import {
   Check,
@@ -33,18 +25,29 @@ import {
   Upload,
   VideoPlay,
 } from '@element-plus/icons-vue';
-import {tryit} from 'radash';
+import {
+  ElForm,
+  ElFormItem,
+  ElIcon,
+  ElInput,
+  ElInputNumber,
+  ElMessage,
+  ElMessageBox,
+  ElPopover,
+} from 'element-plus';
+import { tryit } from 'radash';
 
-import {api} from '#/api/request';
+import { api } from '#/api/request';
 import workflowIcon from '#/assets/ai/workflow/workflowIcon.png';
 // import workflowSvg from '#/assets/workflow.svg';
 import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
 import DesignIcon from '#/components/icons/DesignIcon.vue';
+import CardList from '#/components/page/CardList.vue';
 import PageData from '#/components/page/PageData.vue';
 import PageSide from '#/components/page/PageSide.vue';
-import {$t} from '#/locales';
-import {router} from '#/router';
-import {useDictStore} from '#/store';
+import { $t } from '#/locales';
+import { router } from '#/router';
+import { useDictStore } from '#/store';
 
 import WorkflowModal from './WorkflowModal.vue';
 
@@ -61,7 +64,7 @@ interface FieldDefinition {
   placeholder?: string;
 }
 
-type VisibilityScope = 'PRIVATE' | 'DEPT' | 'PUBLIC';
+type VisibilityScope = 'DEPT' | 'PRIVATE' | 'PUBLIC';
 
 const primaryAction: CardPrimaryAction = {
   icon: DesignIcon,
@@ -72,11 +75,11 @@ const primaryAction: CardPrimaryAction = {
   },
 };
 
-const {hasAccessByCodes} = useAccess();
+const { hasAccessByCodes } = useAccess();
 const canManageWorkflow = computed(() =>
   hasAccessByCodes(['/api/v1/workflow/save']),
 );
-const updatingScopeId = ref<string | number | null>(null);
+const updatingScopeId = ref<null | number | string>(null);
 const visibilityScopePopoverRefs = ref<Record<string, any>>({});
 const visibilityScopeMeta = computed(() => ({
   PRIVATE: {
@@ -203,10 +206,12 @@ function initDict() {
   dictStore.fetchDictionary('dataStatus');
 }
 function resolveVisibilityScopeMeta(scope?: string) {
-  return visibilityScopeMeta.value[(scope || 'PRIVATE') as VisibilityScope] ||
-    visibilityScopeMeta.value.PRIVATE;
+  return (
+    visibilityScopeMeta.value[(scope || 'PRIVATE') as VisibilityScope] ||
+    visibilityScopeMeta.value.PRIVATE
+  );
 }
-function setVisibilityScopePopoverRef(id: string | number, el: any) {
+function setVisibilityScopePopoverRef(id: number | string, el: any) {
   const cacheKey = String(id);
   if (el) {
     visibilityScopePopoverRefs.value[cacheKey] = el;
@@ -214,7 +219,7 @@ function setVisibilityScopePopoverRef(id: string | number, el: any) {
   }
   delete visibilityScopePopoverRefs.value[cacheKey];
 }
-function closeVisibilityScopePopover(id: string | number) {
+function closeVisibilityScopePopover(id: number | string) {
   visibilityScopePopoverRefs.value[String(id)]?.hide?.();
 }
 async function updateVisibilityScope(
@@ -509,11 +514,16 @@ function handleHeaderButtonClick(data: any) {
                     >
                       <ElIcon class="workflow-scope-chip__icon">
                         <component
-                          :is="resolveVisibilityScopeMeta(item.visibilityScope).icon"
+                          :is="
+                            resolveVisibilityScopeMeta(item.visibilityScope)
+                              .icon
+                          "
                         />
                       </ElIcon>
                       <span class="workflow-scope-chip__label">
-                        {{ resolveVisibilityScopeMeta(item.visibilityScope).label }}
+                        {{
+                          resolveVisibilityScopeMeta(item.visibilityScope).label
+                        }}
                       </span>
                     </button>
                   </template>
@@ -564,7 +574,9 @@ function handleHeaderButtonClick(data: any) {
                 >
                   <ElIcon class="workflow-scope-chip__icon">
                     <component
-                      :is="resolveVisibilityScopeMeta(item.visibilityScope).icon"
+                      :is="
+                        resolveVisibilityScopeMeta(item.visibilityScope).icon
+                      "
                     />
                   </ElIcon>
                   <span class="workflow-scope-chip__label">
@@ -629,7 +641,7 @@ function handleHeaderButtonClick(data: any) {
   font-weight: 600;
   line-height: 1;
   color: hsl(var(--text-strong));
-  background: hsl(var(--surface-subtle) / 0.92);
+  background: hsl(var(--surface-subtle) / 92%);
   border: 1px solid hsl(var(--line-subtle));
   border-radius: 999px;
   transition:
@@ -645,15 +657,15 @@ button.workflow-scope-chip {
 }
 
 button.workflow-scope-chip:hover {
+  box-shadow: 0 10px 22px -18px hsl(var(--foreground) / 32%);
   transform: translateY(-1px);
-  box-shadow: 0 10px 22px -18px hsl(var(--foreground) / 0.32);
 }
 
 button.workflow-scope-chip:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 4px hsl(var(--primary) / 0.12),
-    0 10px 22px -18px hsl(var(--foreground) / 0.32);
+    0 0 0 4px hsl(var(--primary) / 12%),
+    0 10px 22px -18px hsl(var(--foreground) / 32%);
 }
 
 button.workflow-scope-chip:disabled {
@@ -676,20 +688,20 @@ button.workflow-scope-chip:disabled {
 
 .workflow-scope-chip--private {
   color: hsl(var(--primary));
-  background: hsl(var(--primary) / 0.09);
-  border-color: hsl(var(--primary) / 0.2);
+  background: hsl(var(--primary) / 9%);
+  border-color: hsl(var(--primary) / 20%);
 }
 
 .workflow-scope-chip--dept {
   color: hsl(var(--warning));
-  background: hsl(var(--warning) / 0.12);
-  border-color: hsl(var(--warning) / 0.2);
+  background: hsl(var(--warning) / 12%);
+  border-color: hsl(var(--warning) / 20%);
 }
 
 .workflow-scope-chip--public {
   color: hsl(var(--success));
-  background: hsl(var(--success) / 0.12);
-  border-color: hsl(var(--success) / 0.2);
+  background: hsl(var(--success) / 12%);
+  border-color: hsl(var(--success) / 20%);
 }
 
 .workflow-scope-panel {
@@ -700,9 +712,9 @@ button.workflow-scope-chip:disabled {
 
 .workflow-scope-option {
   display: flex;
+  gap: 10px;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
   width: 100%;
   padding: 10px 8px;
   text-align: left;
@@ -716,12 +728,12 @@ button.workflow-scope-chip:disabled {
 }
 
 .workflow-scope-option:hover {
-  background: hsl(var(--foreground) / 0.04);
+  background: hsl(var(--foreground) / 4%);
 }
 
 .workflow-scope-option:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.12);
+  box-shadow: 0 0 0 4px hsl(var(--primary) / 12%);
 }
 
 .workflow-scope-option:disabled {
@@ -742,8 +754,8 @@ button.workflow-scope-chip:disabled {
   justify-content: center;
   width: 30px;
   height: 30px;
-  border-radius: 9px;
   background: transparent;
+  border-radius: 9px;
 }
 
 .workflow-scope-option__icon {
@@ -776,29 +788,29 @@ button.workflow-scope-chip:disabled {
 
 .workflow-scope-option--private .workflow-scope-option__icon-wrap {
   color: hsl(var(--primary));
-  background: hsl(var(--primary) / 0.1);
+  background: hsl(var(--primary) / 10%);
 }
 
 .workflow-scope-option--dept .workflow-scope-option__icon-wrap {
   color: hsl(var(--warning));
-  background: hsl(var(--warning) / 0.12);
+  background: hsl(var(--warning) / 12%);
 }
 
 .workflow-scope-option--public .workflow-scope-option__icon-wrap {
   color: hsl(var(--success));
-  background: hsl(var(--success) / 0.12);
+  background: hsl(var(--success) / 12%);
 }
 
 .workflow-scope-option--private.workflow-scope-option--active {
-  background: hsl(var(--primary) / 0.08);
+  background: hsl(var(--primary) / 8%);
 }
 
 .workflow-scope-option--dept.workflow-scope-option--active {
-  background: hsl(var(--warning) / 0.08);
+  background: hsl(var(--warning) / 8%);
 }
 
 .workflow-scope-option--public.workflow-scope-option--active {
-  background: hsl(var(--success) / 0.08);
+  background: hsl(var(--success) / 8%);
 }
 
 .workflow-scope-option--private .workflow-scope-option__check {
@@ -815,8 +827,8 @@ button.workflow-scope-chip:disabled {
 
 :global(.workflow-visibility-popover.el-popover.el-popper) {
   padding: 8px;
-  border-radius: 16px;
   border-color: hsl(var(--line-subtle));
-  box-shadow: 0 18px 34px -28px hsl(var(--foreground) / 0.2);
+  border-radius: 16px;
+  box-shadow: 0 18px 34px -28px hsl(var(--foreground) / 20%);
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowModal.vue b/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowModal.vue
index f1ede0d..f67b8fc 100644
--- a/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowModal.vue
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/WorkflowModal.vue
@@ -84,7 +84,7 @@ function openDialog(row: any, importMode = false) {
   isAdd.value = !row?.id;
   entity.value = {
     ...createDefaultEntity(),
-    ...(row || {}),
+    ...row,
   };
   dialogVisible.value = true;
 }
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/components/ConfirmItem.vue b/easyflow-ui-admin/app/src/views/ai/workflow/components/ConfirmItem.vue
index a62db12..d491ba7 100644
--- a/easyflow-ui-admin/app/src/views/ai/workflow/components/ConfirmItem.vue
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/components/ConfirmItem.vue
@@ -65,7 +65,7 @@ const handleDownload = (url: string) => {
         v-if="selectionDataType === 'text'"
         class="custom-radio-option"
         :class="{ selected: isSelected(item) }"
-        style="width: 100%; flex-shrink: 0"
+        style="flex-shrink: 0; width: 100%"
         @click="changeValue(item)"
       >
         {{ item }}
@@ -82,7 +82,7 @@ const handleDownload = (url: string) => {
         <img
           :src="item"
           alt=""
-          style="width: 80px; height: 80px; border-radius: 8px; display: block"
+          style="display: block; width: 80px; height: 80px; border-radius: 8px"
         />
       </div>
 
@@ -101,7 +101,7 @@ const handleDownload = (url: string) => {
         v-else-if="selectionDataType === 'audio'"
         class="custom-radio-option"
         :class="{ selected: isSelected(item) }"
-        style="width: 100%; flex-shrink: 0"
+        style="flex-shrink: 0; width: 100%"
         @click="changeValue(item)"
       >
         <audio
@@ -118,17 +118,17 @@ const handleDownload = (url: string) => {
         "
         class="custom-radio-option"
         :class="{ selected: isSelected(item) }"
-        style="width: 100%; flex-shrink: 0"
+        style="flex-shrink: 0; width: 100%"
         @click="changeValue(item)"
       >
         <div
           style="
             display: flex;
-            justify-content: space-between;
             align-items: center;
+            justify-content: space-between;
           "
         >
-          <div style="width: 92%; display: flex; align-items: center">
+          <div style="display: flex; align-items: center; width: 92%">
             <img
               style="width: 20px; height: 20px; margin-right: 8px"
               alt=""
@@ -151,19 +151,19 @@ const handleDownload = (url: string) => {
 <style scoped>
 .custom-radio-group {
   display: flex;
-  gap: 12px;
   flex-wrap: wrap;
+  gap: 12px;
 }
 
 .custom-radio-option {
-  background-color: var(--el-bg-color);
-  padding: 8px;
-  border-radius: 8px;
-  cursor: pointer;
   position: relative;
+  box-sizing: border-box; /* 确保 padding 不会撑大宽度 */
+  padding: 8px;
+  cursor: pointer;
+  background-color: var(--el-bg-color);
+  border-radius: 8px;
   box-shadow: 0 0 0 1px var(--el-border-color);
   transition: all 0.2s;
-  box-sizing: border-box; /* 确保 padding 不会撑大宽度 */
 }
 
 .custom-radio-option:hover {
@@ -171,41 +171,41 @@ const handleDownload = (url: string) => {
 }
 
 .custom-radio-option.selected {
-  box-shadow: 0 0 0 1px var(--el-color-primary-light-3);
   padding: 8px;
   background: var(--el-color-primary-light-9);
+  box-shadow: 0 0 0 1px var(--el-color-primary-light-3);
 }
 
 .custom-radio-option.selected::after {
-  content: '';
   position: absolute;
   right: 0;
   bottom: 0;
+  box-sizing: border-box;
   width: 16px;
   height: 16px;
+  content: '';
   background-color: var(--el-color-primary);
   border-radius: 6px 2px;
-  box-sizing: border-box;
 }
 
 .custom-radio-option.selected::before {
-  content: '';
   position: absolute;
   right: 3px;
   bottom: 7px;
+  z-index: 1;
   width: 9px;
   height: 4px;
-  border-left: 1px solid white;
+  content: '';
   border-bottom: 1px solid white;
+  border-left: 1px solid white;
   transform: rotate(-45deg);
-  z-index: 1;
 }
 
 .download-icon-btn {
-  font-size: 18px;
-  cursor: pointer;
-  margin-right: 10px;
   display: flex; /* 为了对齐图标 */
   align-items: center;
+  margin-right: 10px;
+  font-size: 18px;
+  cursor: pointer;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/components/ConfirmItemMulti.vue b/easyflow-ui-admin/app/src/views/ai/workflow/components/ConfirmItemMulti.vue
index 42789f3..46c16d2 100644
--- a/easyflow-ui-admin/app/src/views/ai/workflow/components/ConfirmItemMulti.vue
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/components/ConfirmItemMulti.vue
@@ -73,7 +73,7 @@ const handleDownload = (url: string) => {
         v-if="selectionDataType === 'text'"
         class="custom-radio-option"
         :class="{ selected: isSelected(item) }"
-        style="width: 100%; flex-shrink: 0"
+        style="flex-shrink: 0; width: 100%"
         @click="changeValue(item)"
       >
         {{ item }}
@@ -90,7 +90,7 @@ const handleDownload = (url: string) => {
         <img
           :src="item"
           alt=""
-          style="width: 80px; height: 80px; border-radius: 8px; display: block"
+          style="display: block; width: 80px; height: 80px; border-radius: 8px"
         />
       </div>
 
@@ -109,7 +109,7 @@ const handleDownload = (url: string) => {
         v-else-if="selectionDataType === 'audio'"
         class="custom-radio-option"
         :class="{ selected: isSelected(item) }"
-        style="width: 300px; flex-shrink: 0"
+        style="flex-shrink: 0; width: 300px"
         @click="changeValue(item)"
       >
         <audio controls :src="item" style="width: 100%; height: 40px"></audio>
@@ -122,17 +122,17 @@ const handleDownload = (url: string) => {
         "
         class="custom-radio-option"
         :class="{ selected: isSelected(item) }"
-        style="width: 100%; flex-shrink: 0"
+        style="flex-shrink: 0; width: 100%"
         @click="changeValue(item)"
       >
         <div
           style="
             display: flex;
-            justify-content: space-between;
             align-items: center;
+            justify-content: space-between;
           "
         >
-          <div style="width: 92%; display: flex; align-items: center">
+          <div style="display: flex; align-items: center; width: 92%">
             <img
               style="width: 20px; height: 20px; margin-right: 8px"
               alt=""
@@ -156,19 +156,19 @@ const handleDownload = (url: string) => {
 /* 这里复用之前的 CSS，样式完全一致 */
 .custom-radio-group {
   display: flex;
-  gap: 12px;
   flex-wrap: wrap;
+  gap: 12px;
 }
 
 .custom-radio-option {
-  background-color: var(--el-bg-color);
-  padding: 8px;
-  border-radius: 8px;
-  cursor: pointer;
   position: relative;
+  box-sizing: border-box;
+  padding: 8px;
+  cursor: pointer;
+  background-color: var(--el-bg-color);
+  border-radius: 8px;
   box-shadow: 0 0 0 1px var(--el-border-color);
   transition: all 0.2s;
-  box-sizing: border-box;
 }
 
 .custom-radio-option:hover {
@@ -176,41 +176,41 @@ const handleDownload = (url: string) => {
 }
 
 .custom-radio-option.selected {
-  box-shadow: 0 0 0 1px var(--el-color-primary-light-3);
   padding: 8px;
   background: var(--el-color-primary-light-9);
+  box-shadow: 0 0 0 1px var(--el-color-primary-light-3);
 }
 
 .custom-radio-option.selected::after {
-  content: '';
   position: absolute;
   right: 0;
   bottom: 0;
+  box-sizing: border-box;
   width: 16px;
   height: 16px;
+  content: '';
   background-color: var(--el-color-primary);
   border-radius: 6px 2px;
-  box-sizing: border-box;
 }
 
 .custom-radio-option.selected::before {
-  content: '';
   position: absolute;
   right: 3px;
   bottom: 7px;
+  z-index: 1;
   width: 9px;
   height: 5px;
-  border-left: 1px solid white;
+  content: '';
   border-bottom: 1px solid white;
+  border-left: 1px solid white;
   transform: rotate(-45deg);
-  z-index: 1;
 }
 
 .download-icon-btn {
-  font-size: 18px;
-  cursor: pointer;
-  margin-right: 10px;
   display: flex;
   align-items: center;
+  margin-right: 10px;
+  font-size: 18px;
+  cursor: pointer;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/components/SingleRun.vue b/easyflow-ui-admin/app/src/views/ai/workflow/components/SingleRun.vue
index 0a1283b..9fd2459 100644
--- a/easyflow-ui-admin/app/src/views/ai/workflow/components/SingleRun.vue
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/components/SingleRun.vue
@@ -71,9 +71,7 @@ function submit() {
         </ElButton>
       </ElFormItem>
     </ElForm>
-    <div class="mb-2.5 mt-2.5 font-semibold">
-      {{ $t('workflow.result') }}：
-    </div>
+    <div class="mb-2.5 mt-2.5 font-semibold">{{ $t('workflow.result') }}：</div>
     <ShowJson :value="result" />
   </div>
 </template>
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/customNode/datasetNodeRenderer.ts b/easyflow-ui-admin/app/src/views/ai/workflow/customNode/datasetNodeRenderer.ts
index d3ee71a..1c66729 100644
--- a/easyflow-ui-admin/app/src/views/ai/workflow/customNode/datasetNodeRenderer.ts
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/customNode/datasetNodeRenderer.ts
@@ -3,9 +3,11 @@ import type {
   ManagedDatasetOption,
   ManagedDatasetSourceOption,
 } from './datasetOptions';
+
 import huaweiIcon from '#/assets/datacenter/huawei-icon.svg';
 import mysqlIcon from '#/assets/datacenter/mysql-icon.svg';
 import postgresqlIcon from '#/assets/datacenter/postgresql-icon.svg';
+
 import {
   groupManagedDatasetOptions,
   loadManagedDatasetOptions,
@@ -24,15 +26,15 @@ const SOURCE_LOGO_MAP: Record<string, string> = {
 };
 
 type NodeLike = {
-  id: string;
   data?: Record<string, any>;
+  id: string;
 };
 
 type UpdateNodeData = (
   nodeId: string,
   data:
-    | Record<string, any>
-    | ((node: Record<string, any>) => Record<string, any>),
+    | ((node: Record<string, any>) => Record<string, any>)
+    | Record<string, any>,
 ) => void;
 
 type FlowInstance = {
@@ -42,10 +44,10 @@ type FlowInstance = {
 type RenderContext = FlowInstance | undefined;
 
 type RendererState = {
-  pickerOpen: boolean;
   loadingOptions: boolean;
-  optionsLoaded: boolean;
   options: ManagedDatasetOption[];
+  optionsLoaded: boolean;
+  pickerOpen: boolean;
   sources: ManagedDatasetSourceOption[];
   tableSearchText: string;
   updateNodeData?: UpdateNodeData;
@@ -75,11 +77,13 @@ function getUpdateNodeData(parent: HTMLElement, flowInstance?: RenderContext) {
 }
 
 function getDatasetKey(datasetRef?: DatasetRefPayload | null) {
-  return datasetRef?.tableId == null ? '' : String(datasetRef.tableId);
+  const tableId = datasetRef?.tableId;
+  return tableId === null || tableId === undefined ? '' : String(tableId);
 }
 
 function getSourceKey(datasetRef?: DatasetRefPayload | null) {
-  return datasetRef?.sourceId == null ? '' : String(datasetRef.sourceId);
+  const sourceId = datasetRef?.sourceId;
+  return sourceId === null || sourceId === undefined ? '' : String(sourceId);
 }
 
 function createSourceOnlyDatasetRef(
@@ -95,7 +99,7 @@ function createSourceOnlyDatasetRef(
   };
 }
 
-function escapeHtml(value?: string | number | null) {
+function escapeHtml(value?: null | number | string) {
   return String(value ?? '')
     .replaceAll('&', '&amp;')
     .replaceAll('<', '&lt;')
@@ -410,7 +414,7 @@ function buildSourceList(
   activeKey: string,
   emptyText: string,
 ) {
-  if (!options.length) {
+  if (options.length === 0) {
     return `<div class="dataset-node-empty">${emptyText}</div>`;
   }
   return options
@@ -432,7 +436,7 @@ function buildTableList(
   activeKey: string,
   emptyText: string,
 ) {
-  if (!options.length) {
+  if (options.length === 0) {
     return `<div class="dataset-node-empty">${emptyText}</div>`;
   }
   return options
@@ -465,8 +469,10 @@ function bindInteractiveElements(parent: HTMLElement) {
   parent
     .querySelectorAll<HTMLElement>('button, input, select, textarea')
     .forEach((element) => {
-      element.onpointerdown = (event) => event.stopPropagation();
-      element.onmousedown = (event) => event.stopPropagation();
+      element.addEventListener('pointerdown', (event) =>
+        event.stopPropagation(),
+      );
+      element.addEventListener('mousedown', (event) => event.stopPropagation());
     });
 }
 
@@ -539,7 +545,7 @@ export function rerenderSearchNode(
         state.pickerOpen = false;
         const nextDatasetRef = createSourceOnlyDatasetRef(source);
         node.data = {
-          ...(node.data || {}),
+          ...node.data,
           datasetRef: nextDatasetRef,
           sourceName: source.sourceName,
           sourceType: source.sourceType,
@@ -606,7 +612,7 @@ export function rerenderSaveNode(
           return;
         }
         node.data = {
-          ...(node.data || {}),
+          ...node.data,
           datasetRef: option.datasetRef,
           sourceName: option.sourceName,
           sourceType: option.sourceType,
diff --git a/easyflow-ui-admin/app/src/views/ai/workflow/customNode/datasetOptions.ts b/easyflow-ui-admin/app/src/views/ai/workflow/customNode/datasetOptions.ts
index c768e94..83e597c 100644
--- a/easyflow-ui-admin/app/src/views/ai/workflow/customNode/datasetOptions.ts
+++ b/easyflow-ui-admin/app/src/views/ai/workflow/customNode/datasetOptions.ts
@@ -1,12 +1,12 @@
 import { api } from '#/api/request';
 
 export interface DatasetRefPayload {
-  sourceId: number | string | null;
-  catalogId?: number | string | null;
+  sourceId: null | number | string;
+  catalogId?: null | number | string;
   catalogName?: string;
-  tableId: number | string | null;
+  tableId: null | number | string;
   tableName: string;
-  versionId?: number | string | null;
+  versionId?: null | number | string;
 }
 
 export interface ManagedDatasetFieldOption {
@@ -57,21 +57,25 @@ function shouldSkipSourceError(error: any) {
 function dedupeManagedDatasetOptions(options: ManagedDatasetOption[]) {
   const uniqueOptions = new Map<string, ManagedDatasetOption>();
   for (const option of options || []) {
-    const key = option.datasetRef?.tableId != null
-      ? String(option.datasetRef.tableId)
-      : [
-          option.datasetRef?.sourceId ?? '',
-          option.datasetRef?.catalogId ?? '',
-          option.tableName ?? '',
-        ].join(':');
+    const tableId = option.datasetRef?.tableId;
+    const key =
+      tableId === null || tableId === undefined
+        ? [
+            option.datasetRef?.sourceId ?? '',
+            option.datasetRef?.catalogId ?? '',
+            option.tableName ?? '',
+          ].join(':')
+        : String(tableId);
     if (!uniqueOptions.has(key)) {
       uniqueOptions.set(key, option);
     }
   }
-  return Array.from(uniqueOptions.values());
+  return [...uniqueOptions.values()];
 }
 
-export async function loadManagedDatasetOptions(): Promise<ManagedDatasetOption[]> {
+export async function loadManagedDatasetOptions(): Promise<
+  ManagedDatasetOption[]
+> {
   const sourceRes = await api.get('/api/v1/datacenterSource/page', {
     params: {
       pageNumber: 1,
@@ -89,19 +93,23 @@ export async function loadManagedDatasetOptions(): Promise<ManagedDatasetOption[
       });
       const catalogs = catalogRes.data || [];
       for (const catalog of catalogs) {
-        const tableRes = await api.get('/api/v1/datacenterDataset/managedTables', {
-          params: {
-            sourceId: source.id,
-            catalogId: catalog.id,
+        const tableRes = await api.get(
+          '/api/v1/datacenterDataset/managedTables',
+          {
+            params: {
+              sourceId: source.id,
+              catalogId: catalog.id,
+            },
           },
-        });
+        );
         const tables = tableRes.data || [];
         for (const table of tables) {
           const label = `${source.sourceName} / ${catalog.catalogName} / ${table.tableName}`;
           options.push({
             label,
             value: table.id,
-            keywords: `${source.sourceName} ${catalog.catalogName} ${table.tableName}`.toLowerCase(),
+            keywords:
+              `${source.sourceName} ${catalog.catalogName} ${table.tableName}`.toLowerCase(),
             sourceName: source.sourceName,
             sourceType: source.sourceType,
             catalogName: catalog.catalogName,
@@ -132,7 +140,7 @@ export function groupManagedDatasetOptions(
   const grouped = new Map<number | string, ManagedDatasetSourceOption>();
   for (const option of dedupeManagedDatasetOptions(options || [])) {
     const sourceId = option.datasetRef?.sourceId;
-    if (sourceId == null) {
+    if (sourceId === null || sourceId === undefined) {
       continue;
     }
     if (!grouped.has(sourceId)) {
@@ -145,9 +153,12 @@ export function groupManagedDatasetOptions(
         tables: [],
       });
     }
-    grouped.get(sourceId)!.tables.push(option);
+    const group = grouped.get(sourceId);
+    if (group) {
+      group.tables.push(option);
+    }
   }
-  return Array.from(grouped.values()).map((item) => ({
+  return [...grouped.values()].map((item) => ({
     ...item,
     keywords: `${item.sourceName} ${item.tables
       .map((table) => `${table.catalogName} ${table.tableName}`)
diff --git a/easyflow-ui-admin/app/src/views/config/apikey/SysApiKey.vue b/easyflow-ui-admin/app/src/views/config/apikey/SysApiKey.vue
index ec4343d..e4a253f 100644
--- a/easyflow-ui-admin/app/src/views/config/apikey/SysApiKey.vue
+++ b/easyflow-ui-admin/app/src/views/config/apikey/SysApiKey.vue
@@ -25,7 +25,7 @@ const dialogVisible = ref(false);
 
 <style scoped>
 .sys-apikey-container {
-  height: 100%;
   width: 100%;
+  height: 100%;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyResourcePermissionList.vue b/easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyResourcePermissionList.vue
index fadbc68..5263f14 100644
--- a/easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyResourcePermissionList.vue
+++ b/easyflow-ui-admin/app/src/views/config/apikey/SysApiKeyResourcePermissionList.vue
@@ -128,7 +128,11 @@ function remove(row: any) {
                 {{ row.title }}
               </template>
             </ElTableColumn>
-            <ElTableColumn :label="$t('common.handle')" width="90" align="right">
+            <ElTableColumn
+              :label="$t('common.handle')"
+              width="90"
+              align="right"
+            >
               <template #default="{ row }">
                 <div class="flex items-center gap-3">
                   <ElButton link type="primary" @click="showDialog(row)">
diff --git a/easyflow-ui-admin/app/src/views/config/settings/Settings.vue b/easyflow-ui-admin/app/src/views/config/settings/Settings.vue
index 2b67804..5f17cc2 100644
--- a/easyflow-ui-admin/app/src/views/config/settings/Settings.vue
+++ b/easyflow-ui-admin/app/src/views/config/settings/Settings.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import {onMounted, ref} from 'vue';
+import { onMounted, ref } from 'vue';
 
-import {$t} from '@easyflow/locales';
+import { $t } from '@easyflow/locales';
 
 import {
   ElAlert,
@@ -14,7 +14,7 @@ import {
   ElSelect,
 } from 'element-plus';
 
-import {api} from '#/api/request.js';
+import { api } from '#/api/request.js';
 import providerList from '#/views/ai/model/modelUtils/providerList.json';
 
 interface ProviderOptionExtra {
diff --git a/easyflow-ui-admin/app/src/views/datacenter/DatacenterWorkspace.vue b/easyflow-ui-admin/app/src/views/datacenter/DatacenterWorkspace.vue
index 3bae09c..9a07325 100644
--- a/easyflow-ui-admin/app/src/views/datacenter/DatacenterWorkspace.vue
+++ b/easyflow-ui-admin/app/src/views/datacenter/DatacenterWorkspace.vue
@@ -475,24 +475,24 @@ onBeforeUnmount(() => {
   flex-direction: column;
   width: 100%;
   min-height: 0;
-  margin-top: 0;
   padding-top: 12px;
-  background: transparent;
+  margin-top: 0;
   overflow: hidden;
+  background: transparent;
 }
 
 .workspace-toolbar {
   display: flex;
+  gap: 12px;
   align-items: center;
   justify-content: flex-start;
-  gap: 12px;
   padding: 0 0 12px;
 }
 
 .toolbar-left {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
 }
 
 .toolbar-button {
@@ -501,8 +501,8 @@ onBeforeUnmount(() => {
 }
 
 .workspace-body {
-  width: 100%;
   flex: 1;
+  width: 100%;
   min-height: 0;
   overflow: hidden;
   background: transparent;
@@ -519,13 +519,13 @@ onBeforeUnmount(() => {
 }
 
 .workspace-body :deep([data-panel-resize-handle-enabled]::before) {
-  content: '';
   position: absolute;
   top: 20px;
   bottom: 20px;
   left: 50%;
   width: 1px;
-  background: hsl(var(--border) / 0.32);
+  content: '';
+  background: hsl(var(--border) / 32%);
   transform: translateX(-50%);
 }
 
diff --git a/easyflow-ui-admin/app/src/views/datacenter/components/ConnectionTree.vue b/easyflow-ui-admin/app/src/views/datacenter/components/ConnectionTree.vue
index a2c7199..99aa21c 100644
--- a/easyflow-ui-admin/app/src/views/datacenter/components/ConnectionTree.vue
+++ b/easyflow-ui-admin/app/src/views/datacenter/components/ConnectionTree.vue
@@ -237,8 +237,8 @@ onBeforeUnmount(() => {
 
 .search-actions {
   display: flex;
-  align-items: center;
   gap: 6px;
+  align-items: center;
 }
 
 .search-row :deep(.el-input) {
@@ -250,9 +250,9 @@ onBeforeUnmount(() => {
 }
 
 .action-icon {
+  flex-shrink: 0;
   width: 14px;
   height: 14px;
-  flex-shrink: 0;
 }
 
 .create-action {
@@ -266,22 +266,22 @@ onBeforeUnmount(() => {
   min-width: 36px;
   height: 36px;
   padding-inline: 0;
-  border-color: hsl(var(--border) / 0.9);
-  background: hsl(var(--card));
   color: hsl(var(--text-strong));
+  background: hsl(var(--card));
+  border-color: hsl(var(--border) / 90%);
   box-shadow: none;
 }
 
 .refresh-action:hover {
-  background: hsl(var(--surface-subtle));
   color: hsl(var(--foreground));
+  background: hsl(var(--surface-subtle));
 }
 
 .tree-scroll {
   flex: 1;
   min-height: 0;
-  overflow: auto;
   padding-right: 4px;
+  overflow: auto;
 }
 
 .tree-list {
@@ -293,17 +293,17 @@ onBeforeUnmount(() => {
 
 .tree-node {
   display: flex;
-  align-items: center;
   gap: 12px;
+  align-items: center;
   min-height: 62px;
   padding: 12px 14px;
-  border: 1px solid hsl(var(--border) / 0.52);
-  border-radius: 14px;
-  background: hsl(var(--card) / 0.92);
-  box-shadow: 0 10px 22px -22px hsl(var(--foreground) / 0.22);
+  color: hsl(var(--foreground));
   cursor: pointer;
   user-select: none;
-  color: hsl(var(--foreground));
+  background: hsl(var(--card) / 92%);
+  border: 1px solid hsl(var(--border) / 52%);
+  border-radius: 14px;
+  box-shadow: 0 10px 22px -22px hsl(var(--foreground) / 22%);
   transition:
     transform 0.16s,
     background-color 0.16s,
@@ -313,19 +313,19 @@ onBeforeUnmount(() => {
 }
 
 .tree-node:hover {
-  transform: translateY(-1px);
-  border-color: hsl(var(--border) / 0.74);
   background: hsl(var(--card));
-  box-shadow: 0 16px 30px -24px hsl(var(--foreground) / 0.22);
+  border-color: hsl(var(--border) / 74%);
+  box-shadow: 0 16px 30px -24px hsl(var(--foreground) / 22%);
+  transform: translateY(-1px);
 }
 
 .tree-node.is-selected {
-  border-color: hsl(var(--primary) / 0.24);
-  background: hsl(var(--primary) / 0.08);
   color: hsl(var(--foreground));
+  background: hsl(var(--primary) / 8%);
+  border-color: hsl(var(--primary) / 24%);
   box-shadow:
-    inset 0 0 0 1px hsl(var(--primary) / 0.12),
-    0 18px 34px -28px hsl(var(--primary) / 0.24);
+    inset 0 0 0 1px hsl(var(--primary) / 12%),
+    0 18px 34px -28px hsl(var(--primary) / 24%);
 }
 
 .tree-node--source {
@@ -333,17 +333,17 @@ onBeforeUnmount(() => {
 }
 
 .tree-node--table {
-  margin-left: 20px;
   align-items: center;
+  margin-left: 20px;
 }
 
 .node-arrow {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
-  flex-shrink: 0;
   transition: transform 0.15s;
 }
 
@@ -359,18 +359,18 @@ onBeforeUnmount(() => {
 
 .node-media {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
-  flex-shrink: 0;
   margin-top: 1px;
+  background: hsl(var(--surface-subtle) / 92%);
   border-radius: 11px;
-  background: hsl(var(--surface-subtle) / 0.92);
 }
 
 .tree-node.is-selected .node-media {
-  background: hsl(var(--primary) / 0.12);
+  background: hsl(var(--primary) / 12%);
 }
 
 .node-media :deep(svg) {
@@ -379,9 +379,9 @@ onBeforeUnmount(() => {
 }
 
 .node-icon {
+  flex-shrink: 0;
   width: 17px;
   height: 17px;
-  flex-shrink: 0;
   color: hsl(var(--text-muted));
 }
 
@@ -391,46 +391,46 @@ onBeforeUnmount(() => {
 
 .node-content {
   display: flex;
-  flex-direction: column;
   flex: 1;
-  min-width: 0;
-  align-items: flex-start;
+  flex-direction: column;
   gap: 4px;
+  align-items: flex-start;
+  min-width: 0;
 }
 
 .node-label {
   display: -webkit-box;
   overflow: hidden;
   -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  white-space: normal;
   font-size: 14px;
   line-height: 1.3;
   letter-spacing: 0.01em;
+  white-space: normal;
+  -webkit-box-orient: vertical;
 }
 
 .node-meta {
   font-size: 12px;
-  line-height: 1.2;
   font-weight: 500;
+  line-height: 1.2;
   color: hsl(var(--text-muted));
 }
 
 .node-status-dot {
+  flex-shrink: 0;
   width: 8px;
   height: 8px;
-  flex-shrink: 0;
   margin-left: auto;
-  border-radius: 999px;
   background: hsl(var(--destructive));
-  box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.12);
+  border-radius: 999px;
+  box-shadow: 0 0 0 3px hsl(var(--destructive) / 12%);
 }
 
 .tree-empty {
   padding: 32px 16px;
-  text-align: center;
   font-size: 13px;
   color: hsl(var(--text-muted));
+  text-align: center;
 }
 
 .connection-context-menu {
@@ -438,10 +438,10 @@ onBeforeUnmount(() => {
   z-index: 30;
   min-width: 136px;
   padding: 6px;
-  border: 1px solid hsl(var(--border) / 0.7);
-  border-radius: 12px;
   background: hsl(var(--popover));
-  box-shadow: 0 18px 34px -28px hsl(var(--foreground) / 0.26);
+  border: 1px solid hsl(var(--border) / 70%);
+  border-radius: 12px;
+  box-shadow: 0 18px 34px -28px hsl(var(--foreground) / 26%);
   backdrop-filter: blur(10px);
 }
 
@@ -451,17 +451,17 @@ onBeforeUnmount(() => {
   width: 100%;
   min-height: 34px;
   padding: 0 10px;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-  color: hsl(var(--foreground));
   font-size: 13px;
+  color: hsl(var(--foreground));
   text-align: left;
   cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 8px;
 }
 
 .context-menu-item:hover {
-  background: hsl(var(--accent) / 0.86);
+  background: hsl(var(--accent) / 86%);
 }
 
 .context-menu-item--danger {
@@ -469,6 +469,6 @@ onBeforeUnmount(() => {
 }
 
 .context-menu-item--danger:hover {
-  background: hsl(var(--destructive) / 0.1);
+  background: hsl(var(--destructive) / 10%);
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/datacenter/components/ExcelActionDrawer.vue b/easyflow-ui-admin/app/src/views/datacenter/components/ExcelActionDrawer.vue
index 02e8d6c..549eb91 100644
--- a/easyflow-ui-admin/app/src/views/datacenter/components/ExcelActionDrawer.vue
+++ b/easyflow-ui-admin/app/src/views/datacenter/components/ExcelActionDrawer.vue
@@ -14,8 +14,8 @@ import {
 
 defineProps<{
   actionLoading: boolean;
-  managedTables: any[];
   fieldOptions: { label: string; value: string }[];
+  managedTables: any[];
   pendingUploadFile: File | null;
 }>();
 
@@ -29,7 +29,9 @@ const emit = defineEmits<{
 }>();
 
 const visible = defineModel<boolean>('visible', { default: false });
-const activeAction = ref<'derive' | 'export' | 'import' | 'merge' | 'split'>('import');
+const activeAction = ref<'derive' | 'export' | 'import' | 'merge' | 'split'>(
+  'import',
+);
 
 const splitForm = defineModel<any>('splitForm', { required: true });
 const mergeForm = defineModel<any>('mergeForm', { required: true });
@@ -47,6 +49,10 @@ const drawerTitle = computed(() => {
   return titles[activeAction.value] || '数据操作';
 });
 
+const deriveRenamePlaceholder = '字段重命名 JSON，例如 {"old":"new"}';
+const deriveFilterPlaceholder =
+  '筛选条件 JSON，例如 [{"column":"status","operator":"EQ","value":"OPEN"}]';
+
 function open(action: 'derive' | 'export' | 'import' | 'merge' | 'split') {
   activeAction.value = action;
   visible.value = true;
@@ -58,11 +64,28 @@ function handleUploadChange(file: UploadUserFile) {
 
 function handleConfirm() {
   const action = activeAction.value;
-  if (action === 'import') emit('import');
-  else if (action === 'split') emit('split');
-  else if (action === 'merge') emit('merge');
-  else if (action === 'derive') emit('derive');
-  else if (action === 'export') emit('export');
+  switch (action) {
+    case 'derive': {
+      emit('derive');
+      break;
+    }
+    case 'export': {
+      emit('export');
+      break;
+    }
+    case 'import': {
+      emit('import');
+      break;
+    }
+    case 'merge': {
+      emit('merge');
+      break;
+    }
+    case 'split': {
+      emit('split');
+      break;
+    }
+  }
 }
 
 defineExpose({ open });
@@ -96,7 +119,10 @@ defineExpose({ open });
           <ElOption label="按字段值" value="BY_FIELD_VALUE" />
           <ElOption label="按工作表" value="BY_SHEET" />
         </ElSelect>
-        <ElInput v-model="splitForm.targetNamePrefix" placeholder="新表名前缀" />
+        <ElInput
+          v-model="splitForm.targetNamePrefix"
+          placeholder="新表名前缀"
+        />
         <ElInput
           v-if="splitForm.splitMode === 'BY_ROW_COUNT'"
           v-model="splitForm.rowBatchSize"
@@ -154,13 +180,13 @@ defineExpose({ open });
           v-model="deriveForm.renameMappingsText"
           type="textarea"
           :rows="4"
-          placeholder='字段重命名 JSON，例如 {"old":"new"}'
+          :placeholder="deriveRenamePlaceholder"
         />
         <ElInput
           v-model="deriveForm.filtersText"
           type="textarea"
           :rows="5"
-          placeholder='筛选条件 JSON，例如 [{"column":"status","operator":"EQ","value":"OPEN"}]'
+          :placeholder="deriveFilterPlaceholder"
         />
       </template>
 
@@ -177,12 +203,22 @@ defineExpose({ open });
     <template #footer>
       <div class="drawer-footer">
         <ElButton @click="visible = false">取消</ElButton>
-        <ElButton type="primary" :loading="actionLoading" @click="handleConfirm">
-          {{ activeAction === 'import' ? '开始导入' :
-             activeAction === 'split' ? '开始拆分' :
-             activeAction === 'merge' ? '开始合并' :
-             activeAction === 'derive' ? '开始生成' :
-             '生成并下载' }}
+        <ElButton
+          type="primary"
+          :loading="actionLoading"
+          @click="handleConfirm"
+        >
+          {{
+            activeAction === 'import'
+              ? '开始导入'
+              : activeAction === 'split'
+                ? '开始拆分'
+                : activeAction === 'merge'
+                  ? '开始合并'
+                  : activeAction === 'derive'
+                    ? '开始生成'
+                    : '生成并下载'
+          }}
         </ElButton>
       </div>
     </template>
@@ -198,13 +234,13 @@ defineExpose({ open });
 
 .upload-hint {
   padding: 24px;
-  color: hsl(var(--text-muted));
   font-size: 14px;
+  color: hsl(var(--text-muted));
 }
 
 .drawer-footer {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/datacenter/components/SourceFormDrawer.vue b/easyflow-ui-admin/app/src/views/datacenter/components/SourceFormDrawer.vue
index 8ea7d0a..3f014e0 100644
--- a/easyflow-ui-admin/app/src/views/datacenter/components/SourceFormDrawer.vue
+++ b/easyflow-ui-admin/app/src/views/datacenter/components/SourceFormDrawer.vue
@@ -280,24 +280,24 @@ defineExpose({ close, open, setTestResult });
 
 .source-type-select-label {
   display: inline-flex;
-  align-items: center;
   gap: 10px;
+  align-items: center;
 }
 
 .source-type-select-icon,
 .source-type-option__icon {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 18px;
   height: 18px;
-  flex-shrink: 0;
 }
 
 .source-type-option {
   display: inline-flex;
-  align-items: center;
   gap: 10px;
+  align-items: center;
 }
 
 .source-type-option__label {
@@ -313,16 +313,16 @@ defineExpose({ close, open, setTestResult });
   align-items: center;
   width: fit-content;
   padding: 0;
-  border: 0;
-  background: transparent;
-  color: hsl(var(--primary));
   font-size: 13px;
   font-weight: 500;
+  color: hsl(var(--primary));
   cursor: pointer;
+  background: transparent;
+  border: 0;
 }
 
 .toggle-advanced:hover {
-  color: hsl(var(--primary) / 0.86);
+  color: hsl(var(--primary) / 86%);
 }
 
 .test-button {
@@ -340,25 +340,25 @@ defineExpose({ close, open, setTestResult });
 
 .test-button.is-test-success {
   color: hsl(var(--success));
-  border-color: hsl(var(--success) / 0.24);
-  background: hsl(var(--success) / 0.08);
+  background: hsl(var(--success) / 8%);
+  border-color: hsl(var(--success) / 24%);
 }
 
 .test-button.is-test-success:hover {
   color: hsl(var(--success));
-  border-color: hsl(var(--success) / 0.28);
-  background: hsl(var(--success) / 0.12);
+  background: hsl(var(--success) / 12%);
+  border-color: hsl(var(--success) / 28%);
 }
 
 .test-button.is-test-failed {
   color: hsl(var(--destructive));
-  border-color: hsl(var(--destructive) / 0.22);
-  background: hsl(var(--destructive) / 0.08);
+  background: hsl(var(--destructive) / 8%);
+  border-color: hsl(var(--destructive) / 22%);
 }
 
 .test-button.is-test-failed:hover {
   color: hsl(var(--destructive));
-  border-color: hsl(var(--destructive) / 0.28);
-  background: hsl(var(--destructive) / 0.12);
+  background: hsl(var(--destructive) / 12%);
+  border-color: hsl(var(--destructive) / 28%);
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/datacenter/components/TableDetailView.vue b/easyflow-ui-admin/app/src/views/datacenter/components/TableDetailView.vue
index f170fe3..8c200e0 100644
--- a/easyflow-ui-admin/app/src/views/datacenter/components/TableDetailView.vue
+++ b/easyflow-ui-admin/app/src/views/datacenter/components/TableDetailView.vue
@@ -259,14 +259,14 @@ async function saveFieldDescription(field: any) {
 }
 
 .detail-header {
-  margin-bottom: 10px;
   padding: 0 0 4px;
+  margin-bottom: 10px;
 }
 
 .header-main {
   display: flex;
-  align-items: center;
   gap: 12px;
+  align-items: center;
 }
 
 .back-btn {
@@ -276,17 +276,17 @@ async function saveFieldDescription(field: any) {
   width: 28px;
   height: 28px;
   padding: 0;
-  border: 1px solid hsl(var(--border) / 0.7);
-  border-radius: 999px;
-  background: hsl(var(--surface-subtle) / 0.75);
-  cursor: pointer;
   color: hsl(var(--text-muted));
+  cursor: pointer;
+  background: hsl(var(--surface-subtle) / 75%);
+  border: 1px solid hsl(var(--border) / 70%);
+  border-radius: 999px;
   transition: all 0.15s;
 }
 
 .back-btn:hover {
-  background: hsl(var(--accent));
   color: hsl(var(--foreground));
+  background: hsl(var(--accent));
 }
 
 .back-icon {
@@ -300,11 +300,11 @@ async function saveFieldDescription(field: any) {
 
 .header-title {
   margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 15px;
   font-weight: 600;
   color: hsl(var(--text-strong));
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -313,12 +313,12 @@ async function saveFieldDescription(field: any) {
   font-size: 13px;
   line-height: 1.5;
   color: hsl(var(--text-muted));
-  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .detail-tabs {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: column;
   min-height: 0;
   padding: 0;
@@ -327,9 +327,9 @@ async function saveFieldDescription(field: any) {
 }
 
 .detail-tabs :deep(.el-tabs__header) {
-  margin: 0;
   padding: 0;
-  border-bottom: 1px solid hsl(var(--border) / 0.42);
+  margin: 0;
+  border-bottom: 1px solid hsl(var(--border) / 42%);
 }
 
 .detail-tabs :deep(.el-tabs__nav-wrap::after) {
@@ -339,23 +339,23 @@ async function saveFieldDescription(field: any) {
 .detail-tabs :deep(.el-tabs__content) {
   flex: 1;
   min-height: 0;
-  overflow: hidden;
   padding: 0;
+  overflow: hidden;
 }
 
 .detail-tabs :deep(.el-tab-pane) {
   display: flex;
   flex-direction: column;
-  min-height: 0;
   height: 100%;
+  min-height: 0;
   padding: 12px 0 0;
 }
 
 .detail-scroll-region {
   flex: 1;
   min-height: 0;
-  overflow: auto;
   padding-right: 4px;
+  overflow: auto;
 }
 
 .tag-flow {
@@ -367,20 +367,21 @@ async function saveFieldDescription(field: any) {
 .flat-table {
   --el-table-bg-color: transparent;
   --el-table-tr-bg-color: transparent;
-  --el-table-header-bg-color: hsl(var(--surface-subtle) / 0.72);
-  --el-table-border-color: hsl(var(--table-row-border) / 0.7);
+  --el-table-header-bg-color: hsl(var(--surface-subtle) / 72%);
+  --el-table-border-color: hsl(var(--table-row-border) / 70%);
   --el-table-current-row-bg-color: hsl(var(--table-row-hover));
   --el-fill-color-blank: transparent;
+
   overflow: hidden;
   border-radius: 0;
 }
 
 .field-name-cell {
   display: flex;
-  align-items: center;
   gap: 8px;
-  min-height: 28px;
+  align-items: center;
   min-width: 0;
+  min-height: 28px;
 }
 
 .field-name-text {
@@ -392,8 +393,8 @@ async function saveFieldDescription(field: any) {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   color: hsl(var(--text-muted));
+  white-space: nowrap;
 }
 
 .description-input {
@@ -402,9 +403,9 @@ async function saveFieldDescription(field: any) {
 
 .inline-actions {
   display: flex;
-  align-items: center;
-  gap: 4px;
   flex-shrink: 0;
+  gap: 4px;
+  align-items: center;
 }
 
 .icon-action {
diff --git a/easyflow-ui-admin/app/src/views/datacenter/components/TableListView.vue b/easyflow-ui-admin/app/src/views/datacenter/components/TableListView.vue
index 7aec115..3a7e3d9 100644
--- a/easyflow-ui-admin/app/src/views/datacenter/components/TableListView.vue
+++ b/easyflow-ui-admin/app/src/views/datacenter/components/TableListView.vue
@@ -293,11 +293,11 @@ async function handleSaveTableDescription(row: any) {
 
 .view-header {
   display: flex;
+  gap: 16px;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 10px;
   padding: 0 0 4px;
+  margin-bottom: 10px;
 }
 
 .view-title {
@@ -309,9 +309,9 @@ async function handleSaveTableDescription(row: any) {
 
 .view-toolbar {
   display: flex;
+  gap: 12px;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
   margin-bottom: 10px;
 }
 
@@ -325,8 +325,8 @@ async function handleSaveTableDescription(row: any) {
 
 .batch-actions {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
 }
 
 .selection-text {
@@ -343,10 +343,11 @@ async function handleSaveTableDescription(row: any) {
 .flat-table {
   --el-table-bg-color: transparent;
   --el-table-tr-bg-color: transparent;
-  --el-table-header-bg-color: hsl(var(--surface-subtle) / 0.72);
-  --el-table-border-color: hsl(var(--table-row-border) / 0.7);
+  --el-table-header-bg-color: hsl(var(--surface-subtle) / 72%);
+  --el-table-border-color: hsl(var(--table-row-border) / 70%);
   --el-table-current-row-bg-color: hsl(var(--table-row-hover));
   --el-fill-color-blank: transparent;
+
   height: 100%;
   overflow: hidden;
   border-radius: 0;
@@ -360,8 +361,8 @@ async function handleSaveTableDescription(row: any) {
 
 .name-cell {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   min-width: 0;
 }
 
@@ -374,8 +375,8 @@ async function handleSaveTableDescription(row: any) {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   color: hsl(var(--text-muted));
+  white-space: nowrap;
 }
 
 .description-input {
@@ -384,15 +385,15 @@ async function handleSaveTableDescription(row: any) {
 
 .row-actions {
   display: flex;
-  align-items: center;
   gap: 4px;
+  align-items: center;
 }
 
 .inline-actions {
   display: flex;
-  align-items: center;
-  gap: 4px;
   flex-shrink: 0;
+  gap: 4px;
+  align-items: center;
 }
 
 .icon-action {
diff --git a/easyflow-ui-admin/app/src/views/datacenter/composables/use-source-form.ts b/easyflow-ui-admin/app/src/views/datacenter/composables/use-source-form.ts
index 11a67a8..a847094 100644
--- a/easyflow-ui-admin/app/src/views/datacenter/composables/use-source-form.ts
+++ b/easyflow-ui-admin/app/src/views/datacenter/composables/use-source-form.ts
@@ -96,11 +96,7 @@ export function useSourceForm() {
       lastGeneratedJdbcUrl.value = '';
       return;
     }
-    if (
-      force ||
-      !form.jdbcUrl ||
-      form.jdbcUrl === lastGeneratedJdbcUrl.value
-    ) {
+    if (force || !form.jdbcUrl || form.jdbcUrl === lastGeneratedJdbcUrl.value) {
       form.jdbcUrl = generated;
       lastGeneratedJdbcUrl.value = generated;
     } else if (form.jdbcUrl === generated) {
diff --git a/easyflow-ui-admin/app/src/views/demos/cardTest/index.vue b/easyflow-ui-admin/app/src/views/demos/cardTest/index.vue
index c68984c..0b7ef06 100644
--- a/easyflow-ui-admin/app/src/views/demos/cardTest/index.vue
+++ b/easyflow-ui-admin/app/src/views/demos/cardTest/index.vue
@@ -1,19 +1,11 @@
-<!-- ParentComponent.vue -->
 <script setup>
-import { markRaw, onMounted, ref } from 'vue';
+import { markRaw, ref } from 'vue';
 
 import { Delete, Download, Edit, Share, View } from '@element-plus/icons-vue';
 
 import CardPage from '#/components/cardPage/CardPage.vue';
 import PageData from '#/components/page/PageData.vue';
 
-// 用户数据
-const userList = ref([]);
-
-// 分页状态
-const currentPage = ref(1);
-const pageSize = ref(5);
-
 // 操作按钮配置
 const actions = ref([
   {
@@ -54,97 +46,24 @@ const actions = ref([
   },
 ]);
 
-// 模拟数据加载
-onMounted(() => {
-  // 模拟异步数据加载
-  setTimeout(() => {
-    userList.value = [
-      {
-        id: 1,
-        avatar:
-          'https://copyright.bdstatic.com/vcg/creative/d90a05ca26b2ca79dc1cbaa4931b18ee.jpg@wm_1,k_cGljX2JqaHdhdGVyLmpwZw==',
-        title: '张三',
-        description:
-          '前端开发工程师，专注于Vue和React技术栈,前端开发工程师，专注于Vue和React技术栈',
-      },
-      {
-        id: 2,
-        avatar:
-          'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
-        title: '李四',
-        description: '后端开发工程师，擅长Java和Spring框架',
-      },
-      {
-        id: 3,
-        avatar:
-          'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
-        title: '王五',
-        description: 'UI设计师，专注于用户体验设计',
-      },
-      {
-        id: 4,
-        avatar:
-          'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
-        title: '赵六',
-        description: '全栈开发工程师，熟悉前后端技术',
-      },
-      {
-        id: 5,
-        avatar:
-          'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
-        title: '钱七',
-        description: '产品经理，负责产品规划和设计',
-      },
-      {
-        id: 6,
-        avatar:
-          'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
-        title: '孙八',
-        description: '测试工程师，确保产品质量',
-      },
-    ];
-  }, 500);
-});
-
-// 处理操作按钮点击
-const handleAction = ({ action, item }) => {
-  console.log('执行操作:', action.name, '数据:', item);
-  // 根据不同的操作执行不同的逻辑
+const handleAction = ({ action }) => {
   switch (action.name) {
     case 'delete': {
-      // 删除逻辑
       break;
     }
     case 'edit': {
-      // 编辑逻辑
       break;
     }
-    // 其他操作...
+    default: {
+      break;
+    }
   }
 };
-
-// 处理分页变化
-const handlePageChange = ({ currentPage: page, pageSize: size }) => {
-  console.log('分页变化:', { page, size });
-};
-
-// 处理当前页更新
-const handleCurrentPageUpdate = (page) => {
-  currentPage.value = page;
-  console.log('当前页更新:', page);
-};
-
-// 处理每页数量更新
-const handlePageSizeUpdate = (size) => {
-  pageSize.value = size;
-  console.log('每页数量更新:', size);
-};
 </script>
 
 <template>
   <div class="page-container">
     <PageData
-      ref="pageDataRef"
       page-url="/api/v1/sysAccount/page"
       :page-size="10"
       :init-query-params="{ status: 1 }"
@@ -161,17 +80,3 @@ const handlePageSizeUpdate = (size) => {
     </PageData>
   </div>
 </template>
-
-<style scoped>
-.parent-container {
-  padding: 20px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-h1 {
-  text-align: center;
-  margin-bottom: 30px;
-  color: #303133;
-}
-</style>
diff --git a/easyflow-ui-admin/app/src/views/demos/categoryPanel/index.vue b/easyflow-ui-admin/app/src/views/demos/categoryPanel/index.vue
index a569480..b7b3aa2 100644
--- a/easyflow-ui-admin/app/src/views/demos/categoryPanel/index.vue
+++ b/easyflow-ui-admin/app/src/views/demos/categoryPanel/index.vue
@@ -1,3 +1,27 @@
+<script setup lang="ts">
+import { Message, Setting, User } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+import CategoryPanel from '#/components/categoryPanel/CategoryPanel.vue';
+
+// 示例分类数据
+const categoryData = [
+  { name: '用户管理', icon1: User },
+  { name: '消息中心', icon1: Message },
+  { name: '系统设置', icon1: Setting },
+];
+
+// 处理分类点击
+const handleCategoryClick = (category: { name: string }) => {
+  ElMessage.info(`点击分类：${category.name}`);
+};
+
+// 处理面板收缩状态改变
+const handlePanelToggle = (collapsed: boolean) => {
+  ElMessage.info(`面板状态：${collapsed ? '已收缩' : '已展开'}`);
+};
+</script>
+
 <template>
   <div style="width: 300px; height: 100%">
     <CategoryPanel
@@ -8,27 +32,4 @@
       @panel-toggle="handlePanelToggle"
     />
   </div>
-
 </template>
-
-<script setup>
-import CategoryPanel from "#/components/categoryPanel/CategoryPanel.vue";
-import { User, Message, Setting } from '@element-plus/icons-vue'
-
-// 示例分类数据
-const categoryData = [
-  { name: '用户管理', icon1: User },
-  { name: '消息中心', icon1: Message },
-  { name: '系统设置', icon1: Setting },
-]
-
-// 处理分类点击
-const handleCategoryClick = (category) => {
-  console.log('点击分类:', category)
-}
-
-// 处理面板收缩状态改变
-const handlePanelToggle = (collapsed) => {
-  console.log('面板状态:', collapsed ? '已收缩' : '已展开')
-}
-</script>
diff --git a/easyflow-ui-admin/app/src/views/publicChat/index.vue b/easyflow-ui-admin/app/src/views/publicChat/index.vue
index 5d4bfdd..38e17a6 100644
--- a/easyflow-ui-admin/app/src/views/publicChat/index.vue
+++ b/easyflow-ui-admin/app/src/views/publicChat/index.vue
@@ -1453,12 +1453,12 @@ onBeforeUnmount(() => {
   --pc-ink-soft: #475569;
   --pc-line: #e2e8f0;
   --pc-line-soft: #edf2f7;
-  --pc-surface: #ffffff;
+  --pc-surface: #fff;
   --pc-surface-soft: #f8fbff;
   --pc-surface-muted: #f8fafc;
-  box-sizing: border-box;
+
   position: relative;
-  isolation: isolate;
+  box-sizing: border-box;
   min-height: 100vh;
   padding: 24px;
   overflow: hidden;
@@ -1474,6 +1474,7 @@ onBeforeUnmount(() => {
       transparent 62%
     ),
     linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
+  isolation: isolate;
 }
 
 .public-chat-page::before {
@@ -1482,8 +1483,8 @@ onBeforeUnmount(() => {
   z-index: -1;
   width: 440px;
   height: 440px;
-  content: '';
   pointer-events: none;
+  content: '';
   background: radial-gradient(
     circle,
     rgb(59 130 246 / 16%) 0%,
@@ -1553,8 +1554,8 @@ onBeforeUnmount(() => {
   font-size: 18px;
   font-weight: 700;
   line-height: 1.35;
-  letter-spacing: 0.01em;
   color: var(--pc-ink-strong);
+  letter-spacing: 0.01em;
 }
 
 .public-chat-subtitle {
@@ -1606,8 +1607,8 @@ onBeforeUnmount(() => {
 }
 
 .public-chat-message-row.is-assistant {
-  align-items: flex-start;
   gap: 10px;
+  align-items: flex-start;
   justify-content: flex-start;
 }
 
@@ -1633,7 +1634,7 @@ onBeforeUnmount(() => {
 }
 
 .public-chat-bubble-user {
-  color: #ffffff;
+  color: #fff;
   background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
   border-top-right-radius: 4px;
   box-shadow: 0 6px 16px rgb(37 99 235 / 24%);
@@ -1721,10 +1722,10 @@ onBeforeUnmount(() => {
 
 .public-chat-tool-item {
   width: 100%;
+  padding: 10px 12px;
   font-size: 12px;
   line-height: 1.45;
-  padding: 10px 12px;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
   border: 1px solid #d7e2f2;
   border-left: 3px solid var(--pc-primary);
   border-radius: 12px;
@@ -1753,8 +1754,8 @@ onBeforeUnmount(() => {
 
 .public-chat-markdown :deep(a) {
   color: var(--pc-primary);
-  text-decoration: underline;
   word-break: break-all;
+  text-decoration: underline;
 }
 
 .public-chat-markdown :deep(img) {
@@ -1777,9 +1778,9 @@ onBeforeUnmount(() => {
 
 .public-chat-tool-header {
   display: flex;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
 }
 
 .public-chat-tool-actions {
@@ -1793,10 +1794,10 @@ onBeforeUnmount(() => {
   gap: 6px;
   align-items: center;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 12px;
   font-weight: 600;
   color: var(--pc-ink-strong);
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -1827,7 +1828,7 @@ onBeforeUnmount(() => {
   line-height: 1.4;
   color: #334155;
   cursor: pointer;
-  background: #ffffff;
+  background: #fff;
   border: 1px solid #d7e2f2;
   border-radius: 999px;
   transition: all 0.15s ease;
@@ -1849,9 +1850,9 @@ onBeforeUnmount(() => {
   font-size: 12px;
   line-height: 1.5;
   color: #334155;
+  overflow-wrap: anywhere;
   white-space: pre-wrap;
-  word-break: break-word;
-  background: #ffffff;
+  background: #fff;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
 }
@@ -1870,7 +1871,7 @@ onBeforeUnmount(() => {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  padding: 0 4px 0;
+  padding: 0 4px;
   margin-bottom: 10px;
   pointer-events: auto;
   background: transparent;
@@ -1881,9 +1882,9 @@ onBeforeUnmount(() => {
   max-width: 100%;
   padding: 8px 14px;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 12px;
   color: #334155;
-  text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
   background: rgb(255 255 255 / 96%);
@@ -1925,8 +1926,8 @@ onBeforeUnmount(() => {
   z-index: 1;
   font-size: 12px;
   color: #94a3b8;
-  opacity: 0.9;
   pointer-events: none;
+  opacity: 0.9;
 }
 
 .public-chat-input-send-btn {
@@ -1946,12 +1947,12 @@ onBeforeUnmount(() => {
 
 .public-chat-input :deep(.el-textarea__inner) {
   min-height: 126px !important;
+  padding: 16px 124px 48px 18px;
   font-size: 14px;
   line-height: 1.6;
   background: rgb(255 255 255);
   border-color: transparent;
   border-radius: 20px;
-  padding: 16px 124px 48px 18px;
   box-shadow: none;
   transition:
     border-color 0.2s ease,
@@ -1972,6 +1973,7 @@ onBeforeUnmount(() => {
     opacity: 0;
     transform: translateY(8px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -1982,12 +1984,13 @@ onBeforeUnmount(() => {
   0%,
   80%,
   100% {
-    transform: scale(0.75);
     opacity: 0.5;
+    transform: scale(0.75);
   }
+
   40% {
-    transform: scale(1);
     opacity: 1;
+    transform: scale(1);
   }
 }
 
@@ -2023,9 +2026,9 @@ onBeforeUnmount(() => {
 
   .public-chat-preset-list {
     gap: 6px;
-    margin-bottom: 8px;
     padding-right: 2px;
     padding-left: 2px;
+    margin-bottom: 8px;
   }
 
   .public-chat-footer {
diff --git a/easyflow-ui-admin/app/src/views/system/sysAccount/SysAccountImportModal.vue b/easyflow-ui-admin/app/src/views/system/sysAccount/SysAccountImportModal.vue
index 26a9c99..1223e9d 100644
--- a/easyflow-ui-admin/app/src/views/system/sysAccount/SysAccountImportModal.vue
+++ b/easyflow-ui-admin/app/src/views/system/sysAccount/SysAccountImportModal.vue
@@ -76,7 +76,9 @@ function clearSelectedFile() {
 async function downloadTemplate() {
   downloadLoading.value = true;
   try {
-    const blob = await api.download('/api/v1/sysAccount/downloadImportTemplate');
+    const blob = await api.download(
+      '/api/v1/sysAccount/downloadImportTemplate',
+    );
     downloadFileFromBlob({
       fileName: 'user_import_template.xlsx',
       source: blob,
@@ -136,7 +138,9 @@ async function handleImport() {
           <ElIcon class="text-4xl text-[var(--el-text-color-secondary)]">
             <UploadFilled />
           </ElIcon>
-          <div class="text-[15px] font-semibold text-[var(--el-text-color-primary)]">
+          <div
+            class="text-[15px] font-semibold text-[var(--el-text-color-primary)]"
+          >
             {{ $t('sysAccount.importUploadTitle') }}
           </div>
           <div class="text-[13px] text-[var(--el-text-color-secondary)]">
@@ -182,17 +186,23 @@ async function handleImport() {
         </div>
         <div class="result-stats">
           <div class="stat-item">
-            <div class="stat-label">{{ $t('sysAccount.importTotalCount') }}</div>
+            <div class="stat-label">
+              {{ $t('sysAccount.importTotalCount') }}
+            </div>
             <div class="stat-value">{{ importResult.totalCount || 0 }}</div>
           </div>
           <div class="stat-item">
-            <div class="stat-label">{{ $t('sysAccount.importSuccessCount') }}</div>
+            <div class="stat-label">
+              {{ $t('sysAccount.importSuccessCount') }}
+            </div>
             <div class="stat-value success-text">
               {{ importResult.successCount || 0 }}
             </div>
           </div>
           <div class="stat-item">
-            <div class="stat-label">{{ $t('sysAccount.importErrorCount') }}</div>
+            <div class="stat-label">
+              {{ $t('sysAccount.importErrorCount') }}
+            </div>
             <div class="stat-value" :class="hasErrors ? 'danger-text' : ''">
               {{ importResult.errorCount || 0 }}
             </div>
@@ -267,25 +277,25 @@ async function handleImport() {
 }
 
 .sys-account-upload-area :deep(.el-upload-dragger) {
+  background: hsl(var(--surface) / 72%);
+  border-color: hsl(var(--border) / 68%);
   border-radius: 18px;
-  border-color: hsl(var(--border) / 0.68);
-  background: hsl(var(--surface) / 0.72);
 }
 
 .selected-file-card {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border: 1px solid hsl(var(--border) / 0.72);
-  border-radius: 16px;
   padding: 12px 16px;
-  background: hsl(var(--surface-subtle) / 0.95);
+  background: hsl(var(--surface-subtle) / 95%);
+  border: 1px solid hsl(var(--border) / 72%);
+  border-radius: 16px;
 }
 
 .selected-file-main {
   display: flex;
-  align-items: center;
   gap: 10px;
+  align-items: center;
   min-width: 0;
 }
 
@@ -296,15 +306,15 @@ async function handleImport() {
 .selected-file-name {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--el-text-color-primary);
+  white-space: nowrap;
 }
 
 .result-wrap {
-  border: 1px solid hsl(var(--border) / 0.72);
-  border-radius: 18px;
   padding: 18px;
-  background: hsl(var(--surface-subtle) / 0.94);
+  background: hsl(var(--surface-subtle) / 94%);
+  border: 1px solid hsl(var(--border) / 72%);
+  border-radius: 18px;
 }
 
 .result-head {
@@ -313,8 +323,8 @@ async function handleImport() {
 
 .result-title-wrap {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   font-weight: 600;
   color: var(--el-text-color-primary);
 }
@@ -327,9 +337,9 @@ async function handleImport() {
 }
 
 .stat-item {
-  border-radius: 14px;
   padding: 14px 16px;
-  background: hsl(var(--surface) / 0.95);
+  background: hsl(var(--surface) / 95%);
+  border-radius: 14px;
 }
 
 .stat-label {
@@ -354,9 +364,9 @@ async function handleImport() {
 
 .dialog-footer {
   display: flex;
+  gap: 12px;
   align-items: center;
   justify-content: flex-end;
-  gap: 12px;
   width: 100%;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/system/sysAccount/SysAccountList.vue b/easyflow-ui-admin/app/src/views/system/sysAccount/SysAccountList.vue
index c4fe0ab..12251e4 100644
--- a/easyflow-ui-admin/app/src/views/system/sysAccount/SysAccountList.vue
+++ b/easyflow-ui-admin/app/src/views/system/sysAccount/SysAccountList.vue
@@ -270,7 +270,9 @@ function isAdmin(data: any) {
           <template #middle>
             <div v-if="selectedCount > 0" class="sys-account-batch-inline">
               <span class="sys-account-batch-inline__count">
-                {{ $t('sysAccount.batchSelectedCount', { count: selectedCount }) }}
+                {{
+                  $t('sysAccount.batchSelectedCount', { count: selectedCount })
+                }}
               </span>
               <div class="sys-account-batch-inline__actions">
                 <div v-access:code="'/api/v1/sysAccount/save'">
@@ -427,9 +429,9 @@ function isAdmin(data: any) {
 <style scoped>
 .sys-account-batch-inline {
   display: flex;
-  align-items: center;
-  gap: 10px;
   flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
 }
 
 .sys-account-batch-inline__count {
@@ -444,9 +446,9 @@ function isAdmin(data: any) {
 
 .sys-account-batch-inline__actions {
   display: flex;
-  align-items: center;
-  gap: 8px;
   flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
 }
 
 .sys-account-batch-inline__actions :deep(.el-button) {
@@ -464,8 +466,8 @@ function isAdmin(data: any) {
 :deep(.sys-account-batch-inline__button:not(.is-disabled):hover),
 :deep(.sys-account-batch-inline__button:not(.is-disabled):focus-visible) {
   color: hsl(var(--primary));
-  background: hsl(var(--primary) / 0.08);
-  border-color: hsl(var(--primary) / 0.16);
+  background: hsl(var(--primary) / 8%);
+  border-color: hsl(var(--primary) / 16%);
 }
 
 :deep(.sys-account-batch-inline__button.is-danger) {
@@ -473,10 +475,12 @@ function isAdmin(data: any) {
 }
 
 :deep(.sys-account-batch-inline__button.is-danger:not(.is-disabled):hover),
-:deep(.sys-account-batch-inline__button.is-danger:not(.is-disabled):focus-visible) {
+:deep(
+  .sys-account-batch-inline__button.is-danger:not(.is-disabled):focus-visible
+) {
   color: hsl(var(--destructive));
-  background: hsl(var(--destructive) / 0.08);
-  border-color: hsl(var(--destructive) / 0.16);
+  background: hsl(var(--destructive) / 8%);
+  border-color: hsl(var(--destructive) / 16%);
 }
 
 @media (max-width: 640px) {
diff --git a/easyflow-ui-admin/app/src/views/system/sysAccount/SysAccountModal.vue b/easyflow-ui-admin/app/src/views/system/sysAccount/SysAccountModal.vue
index 30b07ff..b119185 100644
--- a/easyflow-ui-admin/app/src/views/system/sysAccount/SysAccountModal.vue
+++ b/easyflow-ui-admin/app/src/views/system/sysAccount/SysAccountModal.vue
@@ -153,10 +153,7 @@ function closeDialog() {
         :label="$t('sysAccount.password')"
       >
         <div class="w-full">
-          <EasyFlowInputPassword
-            v-model="entity.password"
-            password-strength
-          />
+          <EasyFlowInputPassword v-model="entity.password" password-strength />
           <div class="mt-2 text-xs text-[var(--el-text-color-secondary)]">
             {{ $t('sysAccount.passwordStrongTip') }}
           </div>
diff --git a/easyflow-ui-admin/app/src/views/system/sysDept/SysDeptList.vue b/easyflow-ui-admin/app/src/views/system/sysDept/SysDeptList.vue
index 2b9c689..16a0668 100644
--- a/easyflow-ui-admin/app/src/views/system/sysDept/SysDeptList.vue
+++ b/easyflow-ui-admin/app/src/views/system/sysDept/SysDeptList.vue
@@ -190,7 +190,7 @@ function getTree() {
 
 <style scoped>
 .search-input {
-  border-radius: 4px;
   width: 300px;
+  border-radius: 4px;
 }
 </style>
diff --git a/easyflow-ui-admin/app/src/views/system/sysRole/SysRoleModal.vue b/easyflow-ui-admin/app/src/views/system/sysRole/SysRoleModal.vue
index bdee69a..a25233a 100644
--- a/easyflow-ui-admin/app/src/views/system/sysRole/SysRoleModal.vue
+++ b/easyflow-ui-admin/app/src/views/system/sysRole/SysRoleModal.vue
@@ -5,12 +5,7 @@ import { computed, ref } from 'vue';
 
 import { EasyFlowFormModal } from '@easyflow/common-ui';
 
-import {
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElMessage,
-} from 'element-plus';
+import { ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus';
 
 import { api } from '#/api/request';
 import DictSelect from '#/components/dict/DictSelect.vue';
@@ -41,14 +36,16 @@ interface CategoryPermissionTreeNode {
   label: string;
 }
 
-const RESOURCE_SCOPE_GROUPS: Array<{ label: string; resourceType: ResourceType }> =
-  [
-    { resourceType: 'BOT', label: $t('bot.chatAssistant') },
-    { resourceType: 'PLUGIN', label: $t('menus.ai.plugin') },
-    { resourceType: 'WORKFLOW', label: $t('menus.ai.workflow') },
-    { resourceType: 'KNOWLEDGE', label: $t('menus.ai.documentCollection') },
-    { resourceType: 'RESOURCE', label: $t('menus.ai.resources') },
-  ];
+const RESOURCE_SCOPE_GROUPS: Array<{
+  label: string;
+  resourceType: ResourceType;
+}> = [
+  { resourceType: 'BOT', label: $t('bot.chatAssistant') },
+  { resourceType: 'PLUGIN', label: $t('menus.ai.plugin') },
+  { resourceType: 'WORKFLOW', label: $t('menus.ai.workflow') },
+  { resourceType: 'KNOWLEDGE', label: $t('menus.ai.documentCollection') },
+  { resourceType: 'RESOURCE', label: $t('menus.ai.resources') },
+];
 
 const saveForm = ref<FormInstance>();
 const dialogVisible = ref(false);
@@ -270,29 +267,31 @@ function buildScopeItemsFromTree(): CategoryScopeItem[] {
 }
 
 function getCategoryScopeDetail(roleId: number | string) {
-  api.get('/api/v1/sysRoleCategoryScope/detail', {
-    params: { roleId },
-  }).then((res) => {
-    if (res.errorCode !== 0) {
-      categoryScopeEditable.value = false;
+  api
+    .get('/api/v1/sysRoleCategoryScope/detail', {
+      params: { roleId },
+    })
+    .then((res) => {
+      if (res.errorCode !== 0) {
+        categoryScopeEditable.value = false;
+        categoryScopeDetail.value = {
+          roleId,
+          scopes: buildDefaultScopes(),
+        };
+        syncCategoryTreeCheckedKeys(categoryScopeDetail.value.scopes);
+        return;
+      }
+      categoryScopeEditable.value = !!res.data?.editable;
       categoryScopeDetail.value = {
         roleId,
-        scopes: buildDefaultScopes(),
+        scopes: (res.data?.scopes || buildDefaultScopes()).map((item: any) => ({
+          categoryIds: item.categoryIds || [],
+          resourceType: item.resourceType,
+          scopeMode: item.scopeMode || 'CUSTOM',
+        })),
       };
       syncCategoryTreeCheckedKeys(categoryScopeDetail.value.scopes);
-      return;
-    }
-    categoryScopeEditable.value = !!res.data?.editable;
-    categoryScopeDetail.value = {
-      roleId,
-      scopes: (res.data?.scopes || buildDefaultScopes()).map((item: any) => ({
-        categoryIds: item.categoryIds || [],
-        resourceType: item.resourceType,
-        scopeMode: item.scopeMode || 'CUSTOM',
-      })),
-    };
-    syncCategoryTreeCheckedKeys(categoryScopeDetail.value.scopes);
-  });
+    });
 }
 
 async function saveCategoryScope(roleId: number | string) {
@@ -375,9 +374,9 @@ async function saveCategoryScope(roleId: number | string) {
 <style scoped>
 .role-category-scope-panel {
   display: flex;
-  width: 100%;
   flex-direction: column;
   gap: 12px;
+  width: 100%;
 }
 
 .role-category-scope-group {
@@ -385,16 +384,16 @@ async function saveCategoryScope(roleId: number | string) {
   flex-direction: column;
   gap: 8px;
   padding: 12px;
+  background: var(--el-fill-color-extra-light);
   border: 1px solid var(--el-border-color-lighter);
   border-radius: 10px;
-  background: var(--el-fill-color-extra-light);
 }
 
 .role-category-scope-head {
   display: flex;
+  gap: 16px;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
 }
 
 .role-category-scope-title {
diff --git a/easyflow-ui-admin/app/vite.config.mts b/easyflow-ui-admin/app/vite.config.mts
index f769885..6696fc1 100644
--- a/easyflow-ui-admin/app/vite.config.mts
+++ b/easyflow-ui-admin/app/vite.config.mts
@@ -1,4 +1,4 @@
-import {defineConfig} from '@easyflow/vite-config';
+import { defineConfig } from '@easyflow/vite-config';
 
 import ElementPlus from 'unplugin-element-plus/vite';
 
diff --git a/easyflow-ui-admin/eslint.config.mjs b/easyflow-ui-admin/eslint.config.mjs
index 5f742df..46667ce 100644
--- a/easyflow-ui-admin/eslint.config.mjs
+++ b/easyflow-ui-admin/eslint.config.mjs
@@ -1,6 +1,6 @@
 // @ts-check
 
-import {defineConfig} from '@easyflow/eslint-config';
+import { defineConfig } from '@easyflow/eslint-config';
 
 export default defineConfig([
   {
diff --git a/easyflow-ui-admin/internal/vite-config/package.json b/easyflow-ui-admin/internal/vite-config/package.json
index 623755f..2517ca8 100644
--- a/easyflow-ui-admin/internal/vite-config/package.json
+++ b/easyflow-ui-admin/internal/vite-config/package.json
@@ -32,10 +32,10 @@
     "vite-plugin-vue-devtools": "catalog:"
   },
   "devDependencies": {
+    "@easyflow/node-utils": "workspace:*",
     "@pnpm/workspace.read-manifest": "catalog:",
     "@types/archiver": "catalog:",
     "@types/html-minifier-terser": "catalog:",
-    "@easyflow/node-utils": "workspace:*",
     "@vitejs/plugin-vue": "catalog:",
     "@vitejs/plugin-vue-jsx": "catalog:",
     "dayjs": "catalog:",
diff --git a/easyflow-ui-admin/internal/vite-config/src/config/application.ts b/easyflow-ui-admin/internal/vite-config/src/config/application.ts
index d92c0de..e90457d 100644
--- a/easyflow-ui-admin/internal/vite-config/src/config/application.ts
+++ b/easyflow-ui-admin/internal/vite-config/src/config/application.ts
@@ -1,18 +1,18 @@
-import type {CSSOptions, UserConfig} from 'vite';
-import {defineConfig, loadEnv, mergeConfig} from 'vite';
+import type { CSSOptions, UserConfig } from 'vite';
 
-import type {DefineApplicationOptions} from '../typing';
+import type { DefineApplicationOptions } from '../typing';
 
-import path, {relative} from 'node:path';
+import path, { relative } from 'node:path';
 
-import {findMonorepoRoot} from '@easyflow/node-utils';
+import { findMonorepoRoot } from '@easyflow/node-utils';
 
-import {NodePackageImporter} from 'sass';
+import { NodePackageImporter } from 'sass';
+import { defineConfig, loadEnv, mergeConfig } from 'vite';
 
-import {defaultImportmapOptions, getDefaultPwaOptions} from '../options';
-import {loadApplicationPlugins} from '../plugins';
-import {loadAndConvertEnv} from '../utils/env';
-import {getCommonConfig} from './common';
+import { defaultImportmapOptions, getDefaultPwaOptions } from '../options';
+import { loadApplicationPlugins } from '../plugins';
+import { loadAndConvertEnv } from '../utils/env';
+import { getCommonConfig } from './common';
 
 function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) {
   return defineConfig(async (config) => {
diff --git a/easyflow-ui-admin/internal/vite-config/src/plugins/inject-app-loading/default-loading-progress.html b/easyflow-ui-admin/internal/vite-config/src/plugins/inject-app-loading/default-loading-progress.html
index 7dec81b..4a594bf 100644
--- a/easyflow-ui-admin/internal/vite-config/src/plugins/inject-app-loading/default-loading-progress.html
+++ b/easyflow-ui-admin/internal/vite-config/src/plugins/inject-app-loading/default-loading-progress.html
@@ -100,38 +100,54 @@
 
   /* 动画效果 */
   @keyframes float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
   }
 
   @keyframes bounce {
-    0%, 80%, 100% {
+    0%,
+    80%,
+    100% {
       transform: scale(0);
     }
     40% {
-      transform: scale(1.0);
+      transform: scale(1);
     }
   }
 
   @keyframes progress {
-    0% { width: 0; left: 0; }
-    50% { width: 100%; left: 0; }
-    100% { width: 0; left: 100%; }
+    0% {
+      width: 0;
+      left: 0;
+    }
+    50% {
+      width: 100%;
+      left: 0;
+    }
+    100% {
+      width: 0;
+      left: 100%;
+    }
   }
 </style>
 <div class="loadingContainer" id="__app-loading__">
-    <div class="loadingContent">
-        <div class="logoAnimation">
-            <img src="/logo.svg" alt="品牌Logo" class="logo" />
-            <div class="loadingDots">
-                <span class="dot"></span>
-                <span class="dot"></span>
-                <span class="dot"></span>
-            </div>
-        </div>
-        <p class="loadingText">正在启动您的 AI 平台...</p>
-        <div class="progressBar">
-            <div class="progress"></div>
-        </div>
+  <div class="loadingContent">
+    <div class="logoAnimation">
+      <img src="/logo.svg" alt="品牌Logo" class="logo" />
+      <div class="loadingDots">
+        <span class="dot"></span>
+        <span class="dot"></span>
+        <span class="dot"></span>
+      </div>
     </div>
+    <p class="loadingText">正在启动您的 AI 平台...</p>
+    <div class="progressBar">
+      <div class="progress"></div>
+    </div>
+  </div>
 </div>
diff --git a/easyflow-ui-admin/internal/vite-config/src/plugins/vxe-table.ts b/easyflow-ui-admin/internal/vite-config/src/plugins/vxe-table.ts
index ff7cd24..cc00f21 100644
--- a/easyflow-ui-admin/internal/vite-config/src/plugins/vxe-table.ts
+++ b/easyflow-ui-admin/internal/vite-config/src/plugins/vxe-table.ts
@@ -1,6 +1,6 @@
-import type {PluginOption} from 'vite';
+import type { PluginOption } from 'vite';
 
-import {lazyImport, VxeResolver} from 'vite-plugin-lazy-import';
+import { lazyImport, VxeResolver } from 'vite-plugin-lazy-import';
 
 async function viteVxeTableImportsPlugin(): Promise<PluginOption> {
   return [
diff --git a/easyflow-ui-admin/package.json b/easyflow-ui-admin/package.json
index 7477f85..4bb9261 100644
--- a/easyflow-ui-admin/package.json
+++ b/easyflow-ui-admin/package.json
@@ -37,6 +37,8 @@
     "catalog": "pnpx codemod pnpm/catalog"
   },
   "devDependencies": {
+    "@changesets/changelog-github": "catalog:",
+    "@changesets/cli": "catalog:",
     "@easyflow/commitlint-config": "workspace:*",
     "@easyflow/eslint-config": "workspace:*",
     "@easyflow/prettier-config": "workspace:*",
@@ -46,8 +48,6 @@
     "@easyflow/turbo-run": "workspace:*",
     "@easyflow/vite-config": "workspace:*",
     "@easyflow/vsh": "workspace:*",
-    "@changesets/changelog-github": "catalog:",
-    "@changesets/cli": "catalog:",
     "@playwright/test": "catalog:",
     "@types/node": "catalog:",
     "@vitejs/plugin-vue": "catalog:",
diff --git a/easyflow-ui-admin/packages/@core/base/design/src/css/global.css b/easyflow-ui-admin/packages/@core/base/design/src/css/global.css
index 2703dbc..6c93b44 100644
--- a/easyflow-ui-admin/packages/@core/base/design/src/css/global.css
+++ b/easyflow-ui-admin/packages/@core/base/design/src/css/global.css
@@ -114,6 +114,12 @@
 }
 
 @layer components {
+  @media (max-width: 768px) {
+    .easyflow-modal-grid--2 {
+      grid-template-columns: 1fr;
+    }
+  }
+
   .flex-center {
     @apply flex items-center justify-center;
   }
@@ -161,11 +167,11 @@
   }
 
   .easyflow-modal-section {
+    padding: 14px;
     background: hsl(var(--modal-content-surface-strong));
     border: 1px solid hsl(var(--modal-divider));
     border-radius: 14px;
     box-shadow: none;
-    padding: 14px;
   }
 
   .easyflow-modal-grid {
@@ -178,10 +184,10 @@
   }
 
   .easyflow-modal-field-tip {
-    color: hsl(var(--text-muted));
+    margin-top: 4px;
     font-size: 11px;
     line-height: 1.5;
-    margin-top: 4px;
+    color: hsl(var(--text-muted));
   }
 
   .easyflow-modal-form .el-form-item {
@@ -189,11 +195,11 @@
   }
 
   .easyflow-modal-form .el-form-item__label {
-    color: hsl(var(--text-strong));
+    padding-bottom: 6px;
     font-size: 12px;
     font-weight: 600;
     line-height: 1.4;
-    padding-bottom: 6px;
+    color: hsl(var(--text-strong));
   }
 
   .easyflow-modal-form .el-input__wrapper,
@@ -202,7 +208,7 @@
   .easyflow-modal-form .el-date-editor.el-input__wrapper {
     background: hsl(var(--input-background));
     border-radius: 12px;
-    box-shadow: inset 0 0 0 1px hsl(var(--input) / 0.92);
+    box-shadow: inset 0 0 0 1px hsl(var(--input) / 92%);
     transition:
       box-shadow 0.2s ease,
       border-color 0.2s ease,
@@ -224,7 +230,7 @@
   .easyflow-modal-form .el-select__wrapper:hover,
   .easyflow-modal-form .el-textarea__inner:hover,
   .easyflow-modal-form .el-date-editor.el-input__wrapper:hover {
-    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.18);
+    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 18%);
   }
 
   .easyflow-modal-form .el-input__wrapper.is-focus,
@@ -232,8 +238,8 @@
   .easyflow-modal-form .el-textarea__inner:focus,
   .easyflow-modal-form .el-date-editor.el-input__wrapper.is-focus {
     box-shadow:
-      inset 0 0 0 1px hsl(var(--primary) / 0.72),
-      0 0 0 4px hsl(var(--primary) / 0.12);
+      inset 0 0 0 1px hsl(var(--primary) / 72%),
+      0 0 0 4px hsl(var(--primary) / 12%);
   }
 
   .easyflow-modal-form .el-form-item.is-error .el-input__wrapper,
@@ -243,14 +249,8 @@
     .el-form-item.is-error
     .el-date-editor.el-input__wrapper {
     box-shadow:
-      inset 0 0 0 1px hsl(var(--destructive) / 0.8),
-      0 0 0 4px hsl(var(--destructive) / 0.08);
-  }
-
-  @media (max-width: 768px) {
-    .easyflow-modal-grid--2 {
-      grid-template-columns: 1fr;
-    }
+      inset 0 0 0 1px hsl(var(--destructive) / 80%),
+      0 0 0 4px hsl(var(--destructive) / 8%);
   }
 }
 
@@ -263,11 +263,12 @@ html.grayscale-mode {
 }
 
 .page-container {
+  padding: 20px;
   margin: 20px;
   background-color: var(--el-bg-color);
   border-radius: var(--el-border-radius-base);
-  padding: 20px;
 }
+
 .handle-div {
   margin-bottom: 10px;
 }
diff --git a/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/dark.css b/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/dark.css
index 599d8f8..1f3e13a 100644
--- a/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/dark.css
+++ b/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/dark.css
@@ -141,7 +141,7 @@
   --modal-footer-surface: 220 13% 12%;
   --modal-border: 218 16% 24%;
   --modal-divider: 218 18% 24%;
-  --modal-shadow: 0 24px 60px -30px hsl(212 60% 2% / 0.58);
+  --modal-shadow: 0 24px 60px -30px hsl(212deg 60% 2% / 58%);
   --modal-shell-highlight: 0 0% 100% / 0;
   --modal-shell-border-soft: 218 16% 24% / 0.96;
   --modal-shell-shadow-near: 212 50% 2% / 0.38;
@@ -159,9 +159,9 @@
   --nav-flow-accent: 214 88% 70%;
   --nav-flow-trace: 189 62% 56%;
   --nav-sheen: 210 100% 96%;
-  --shadow-subtle: 0 18px 42px -30px hsl(212 100% 5% / 0.48);
-  --shadow-toolbar: 0 28px 54px -36px hsl(212 100% 4% / 0.58);
-  --shadow-float: 0 34px 70px -38px hsl(212 100% 3% / 0.68);
+  --shadow-subtle: 0 18px 42px -30px hsl(212deg 100% 5% / 48%);
+  --shadow-toolbar: 0 28px 54px -36px hsl(212deg 100% 4% / 58%);
+  --shadow-float: 0 34px 70px -38px hsl(212deg 100% 3% / 68%);
   --bot-back-item: hsl(0deg 0% 91.76%);
   --bot-collapse-itme-back: hsl(var(--background-deep));
   --bot-chat-message-container: hsl(var(--background-deep));
@@ -171,6 +171,7 @@
   --table-header-bg-color: hsl(var(--table-header-bg));
   --table-cell-shadow-color: hsl(var(--table-row-border));
   --bot-select-data-item-back: hsl(0deg 0% 98.04%);
+
   color-scheme: dark;
 }
 
diff --git a/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/default.css b/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/default.css
index 963d2d9..6252fb0 100644
--- a/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/default.css
+++ b/easyflow-ui-admin/packages/@core/base/design/src/design-tokens/default.css
@@ -141,7 +141,7 @@
   --modal-footer-surface: 210 20% 98.4%;
   --modal-border: 214 22% 86%;
   --modal-divider: 214 22% 89%;
-  --modal-shadow: 0 22px 54px -28px hsl(215 28% 18% / 0.18);
+  --modal-shadow: 0 22px 54px -28px hsl(215deg 28% 18% / 18%);
   --modal-shell-highlight: 0 0% 100% / 0;
   --modal-shell-border-soft: 214 22% 86% / 0.94;
   --modal-shell-shadow-near: 216 30% 18% / 0.08;
@@ -159,13 +159,9 @@
   --nav-flow-accent: 214 100% 88%;
   --nav-flow-trace: 191 78% 84%;
   --nav-sheen: 0 0% 100%;
-  --shadow-subtle: 0 18px 42px -30px hsl(211 78% 48% / 0.16);
-  --shadow-toolbar: 0 28px 54px -34px hsl(211 78% 48% / 0.2);
-  --shadow-float: 0 34px 68px -38px hsl(211 78% 48% / 0.24);
-
-  accent-color: var(--primary);
-  color-scheme: light;
-
+  --shadow-subtle: 0 18px 42px -30px hsl(211deg 78% 48% / 16%);
+  --shadow-toolbar: 0 28px 54px -34px hsl(211deg 78% 48% / 20%);
+  --shadow-float: 0 34px 68px -38px hsl(211deg 78% 48% / 24%);
   --bot-back-item: hsl(0deg 0% 91.76%);
   --bot-collapse-itme-back: hsl(0deg 0% 96.08%);
   --bot-chat-message-container: hsl(228deg 33.33% 97.06%);
@@ -175,6 +171,9 @@
   --table-header-bg-color: hsl(var(--table-header-bg));
   --table-cell-shadow-color: hsl(var(--table-row-border));
   --bot-select-data-item-back: hsl(0deg 0% 98.04%);
+
+  accent-color: var(--primary);
+  color-scheme: light;
 }
 
 [data-theme='violet'] {
diff --git a/easyflow-ui-admin/packages/@core/base/shared/src/constants/index.ts b/easyflow-ui-admin/packages/@core/base/shared/src/constants/index.ts
index 7c2da67..03d6bf8 100644
--- a/easyflow-ui-admin/packages/@core/base/shared/src/constants/index.ts
+++ b/easyflow-ui-admin/packages/@core/base/shared/src/constants/index.ts
@@ -1,2 +1,2 @@
-export * from './globals';
 export * from './easyflow';
+export * from './globals';
diff --git a/easyflow-ui-admin/packages/@core/base/shared/src/utils/util.ts b/easyflow-ui-admin/packages/@core/base/shared/src/utils/util.ts
index 765130c..cf9b3c2 100644
--- a/easyflow-ui-admin/packages/@core/base/shared/src/utils/util.ts
+++ b/easyflow-ui-admin/packages/@core/base/shared/src/utils/util.ts
@@ -263,4 +263,3 @@ export function sortNodes(nodesJson: any): any[] {
     extra: node.extra,
   }));
 }
-
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
index 02a58c0..7688bbb 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -3,7 +3,11 @@ import { computed, toRaw, unref, watch } from 'vue';
 
 import { useSimpleLocale } from '@easyflow-core/composables';
 import { EasyFlowExpandableArrow } from '@easyflow-core/shadcn-ui';
-import { cn, isFunction, triggerWindowResize } from '@easyflow-core/shared/utils';
+import {
+  cn,
+  isFunction,
+  triggerWindowResize,
+} from '@easyflow-core/shared/utils';
 
 import { COMPONENT_MAP } from '../config';
 import { injectFormProps } from '../use-form-context';
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/config.ts b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/config.ts
index 95aedf7..3b3f696 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/config.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/config.ts
@@ -2,8 +2,8 @@ import type { Component } from 'vue';
 
 import type {
   BaseFormComponentType,
-  FormCommonConfig,
   EasyFlowFormAdapterOptions,
+  FormCommonConfig,
 } from './types';
 
 import { h } from 'vue';
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/easyflow-use-form.vue b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/easyflow-use-form.vue
index 6cb2505..a201af4 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/easyflow-use-form.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/easyflow-use-form.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@easyflow-core/typings';
 
-import type { ExtendedFormApi, EasyFlowFormProps } from './types';
+import type { EasyFlowFormProps, ExtendedFormApi } from './types';
 
 // import { toRaw, watch } from 'vue';
 import { nextTick, onMounted, watch } from 'vue';
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-api.ts b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-api.ts
index 029cb06..feeccd7 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -9,7 +9,7 @@ import type { ComponentPublicInstance } from 'vue';
 
 import type { Recordable } from '@easyflow-core/typings';
 
-import type { FormActions, FormSchema, EasyFlowFormProps } from './types';
+import type { EasyFlowFormProps, FormActions, FormSchema } from './types';
 
 import { isRef, toRaw } from 'vue';
 
@@ -55,7 +55,7 @@ export class FormApi {
   public form = {} as FormActions;
   isMounted = false;
 
-  public state: null | EasyFlowFormProps = null;
+  public state: EasyFlowFormProps | null = null;
   stateHandler: StateHandler;
 
   public store: Store<EasyFlowFormProps>;
@@ -68,7 +68,7 @@ export class FormApi {
   // 最后一次点击提交时的表单值
   private latestSubmissionValues: null | Recordable<any> = null;
 
-  private prevState: null | EasyFlowFormProps = null;
+  private prevState: EasyFlowFormProps | null = null;
 
   constructor(options: EasyFlowFormProps = {}) {
     const { ...storeState } = options;
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
index 981bdfb..da0b9e1 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -15,7 +15,12 @@ import {
   FormItem,
   FormMessage,
 } from '@easyflow-core/shadcn-ui';
-import { cn, isFunction, isObject, isString } from '@easyflow-core/shared/utils';
+import {
+  cn,
+  isFunction,
+  isObject,
+  isString,
+} from '@easyflow-core/shared/utils';
 
 import { toTypedSchema } from '@vee-validate/zod';
 import { useFieldError, useFormValues } from 'vee-validate';
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
index 2bb2696..900d93d 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
@@ -2,9 +2,9 @@
 import type { CustomRenderType } from '../types';
 
 import {
-  FormLabel,
   EasyFlowHelpTooltip,
   EasyFlowRenderContent,
+  FormLabel,
 } from '@easyflow-core/shadcn-ui';
 import { cn } from '@easyflow-core/shared/utils';
 
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/index.ts b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/index.ts
index 29d8385..cf32b12 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/index.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/index.ts
@@ -2,9 +2,9 @@ export { setupEasyFlowForm } from './config';
 
 export type {
   BaseFormComponentType,
-  ExtendedFormApi,
   EasyFlowFormProps,
   FormSchema as EasyFlowFormSchema,
+  ExtendedFormApi,
 } from './types';
 
 export * from './use-easyflow-form';
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/types.ts b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/types.ts
index 8464457..63b53c1 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/types.ts
@@ -12,12 +12,12 @@ export type FormLayout = 'horizontal' | 'inline' | 'vertical';
 
 export type BaseFormComponentType =
   | 'DefaultButton'
-  | 'PrimaryButton'
   | 'EasyFlowCheckbox'
   | 'EasyFlowInput'
   | 'EasyFlowInputPassword'
   | 'EasyFlowPinInput'
   | 'EasyFlowSelect'
+  | 'PrimaryButton'
   | (Record<never, never> & string);
 
 type Breakpoints = '2xl:' | '3xl:' | '' | 'lg:' | 'md:' | 'sm:' | 'xl:';
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/use-easyflow-form.ts b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/use-easyflow-form.ts
index 9576a86..2df9f90 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/use-easyflow-form.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/use-easyflow-form.ts
@@ -1,15 +1,15 @@
 import type {
   BaseFormComponentType,
-  ExtendedFormApi,
   EasyFlowFormProps,
+  ExtendedFormApi,
 } from './types';
 
 import { defineComponent, h, isReactive, onBeforeUnmount, watch } from 'vue';
 
 import { useStore } from '@easyflow-core/shared/store';
 
-import { FormApi } from './form-api';
 import EasyFlowUseForm from './easyflow-use-form.vue';
+import { FormApi } from './form-api';
 
 export function useEasyFlowForm<
   T extends BaseFormComponentType = BaseFormComponentType,
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/use-form-context.ts b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/use-form-context.ts
index 2d0ee37..eb12803 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/use-form-context.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/use-form-context.ts
@@ -2,12 +2,16 @@ import type { ZodRawShape } from 'zod';
 
 import type { ComputedRef } from 'vue';
 
-import type { ExtendedFormApi, FormActions, EasyFlowFormProps } from './types';
+import type { EasyFlowFormProps, ExtendedFormApi, FormActions } from './types';
 
 import { computed, unref, useSlots } from 'vue';
 
 import { createContext } from '@easyflow-core/shadcn-ui';
-import { isString, mergeWithArrayOverride, set } from '@easyflow-core/shared/utils';
+import {
+  isString,
+  mergeWithArrayOverride,
+  set,
+} from '@easyflow-core/shared/utils';
 
 import { useForm } from 'vee-validate';
 import { object, ZodIntersection, ZodNumber, ZodObject, ZodString } from 'zod';
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
index 1313cce..3653cd4 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type {CSSProperties} from 'vue';
-import {computed} from 'vue';
+import type { CSSProperties } from 'vue';
 
-import type {ContentCompactType} from '@easyflow-core/typings';
+import type { ContentCompactType } from '@easyflow-core/typings';
 
-import {useLayoutContentStyle} from '@easyflow-core/composables';
-import {Slot} from '@easyflow-core/shadcn-ui';
+import { computed } from 'vue';
+
+import { useLayoutContentStyle } from '@easyflow-core/composables';
+import { Slot } from '@easyflow-core/shadcn-ui';
 
 interface Props {
   /**
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
index 44f6e4e..2e30ac0 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type {CSSProperties} from 'vue';
-import {computed, useSlots} from 'vue';
+import type { CSSProperties } from 'vue';
+
+import { computed, useSlots } from 'vue';
 
 interface Props {
   /**
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
index b49c988..96b27c6 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type {CSSProperties} from 'vue';
-import {computed, shallowRef, useSlots, watchEffect} from 'vue';
+import type { CSSProperties } from 'vue';
 
-import {EasyFlowScrollbar} from '@easyflow-core/shadcn-ui';
+import { computed, shallowRef, useSlots, watchEffect } from 'vue';
 
-import {useScrollLock} from '@vueuse/core';
+import { EasyFlowScrollbar } from '@easyflow-core/shadcn-ui';
 
-import {SidebarCollapseButton, SidebarFixedButton} from './widgets';
+import { useScrollLock } from '@vueuse/core';
+
+import { SidebarCollapseButton, SidebarFixedButton } from './widgets';
 
 interface Props {
   /**
@@ -295,15 +296,11 @@ function handleFixedToggle(nextValue: boolean) {
       },
     ]"
     :style="style"
-  class="fixed left-0 top-0 h-full overflow-hidden transition-all duration-150"
+    class="fixed left-0 top-0 h-full overflow-hidden transition-all duration-150"
     @mouseenter="handleMouseenter"
     @mouseleave="handleMouseleave"
   >
-    <div
-      v-if="slots.logo"
-      :style="headerStyle"
-      class="relative z-10 px-2 pt-2"
-    >
+    <div v-if="slots.logo" :style="headerStyle" class="relative z-10 px-2 pt-2">
       <slot name="logo"></slot>
     </div>
     <EasyFlowScrollbar :style="contentStyle" class="relative z-10">
@@ -333,17 +330,14 @@ function handleFixedToggle(nextValue: boolean) {
       >
         <slot name="extra-title"></slot>
       </div>
-      <EasyFlowScrollbar
-        :style="extraContentStyle"
-        class="relative z-10 py-2"
-      >
+      <EasyFlowScrollbar :style="extraContentStyle" class="relative z-10 py-2">
         <slot name="extra"></slot>
       </EasyFlowScrollbar>
       <div
-      v-if="expandOnHover || !extraCollapse"
-      :style="toolStyle"
-      class="absolute right-3 z-20 flex flex-col gap-2"
-    >
+        v-if="expandOnHover || !extraCollapse"
+        :style="toolStyle"
+        class="absolute right-3 z-20 flex flex-col gap-2"
+      >
         <SidebarCollapseButton
           v-if="expandOnHover"
           v-model:collapsed="extraCollapse"
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
index 616a5a9..3da88f8 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import type {CSSProperties} from 'vue';
-import {computed} from 'vue';
+import type { CSSProperties } from 'vue';
+
+import { computed } from 'vue';
 
 interface Props {
   /**
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
index 2ca6bc7..677abe3 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
@@ -21,7 +21,7 @@ function handleCollapsed() {
   <button
     aria-label="切换侧边栏折叠状态"
     :style="buttonStyle"
-    class="flex-center h-9 w-9 rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]"
+    class="flex-center hover:text-foreground h-9 w-9 rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]"
     @click.stop="handleCollapsed"
   >
     <ChevronsRight v-if="collapsed" class="size-4" />
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
index 916eaaf..7ee19e1 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type {CSSProperties} from 'vue';
+import type { CSSProperties } from 'vue';
 
-import {Pin, PinOff} from '@easyflow-core/icons';
+import { Pin, PinOff } from '@easyflow-core/icons';
 
-const expandOnHover = defineModel<boolean>('expandOnHover');
 const emit = defineEmits<{
   toggle: [value: boolean];
 }>();
+const expandOnHover = defineModel<boolean>('expandOnHover');
 const buttonStyle: CSSProperties = {
   backgroundColor: 'hsl(var(--nav-tool-bg) / 0.92)',
   backgroundImage:
@@ -26,7 +26,7 @@ function toggleFixed() {
   <button
     aria-label="切换侧边栏固定状态"
     :style="buttonStyle"
-    class="flex-center h-9 w-9 rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]"
+    class="flex-center hover:text-foreground h-9 w-9 rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]"
     @click="toggleFixed"
   >
     <PinOff v-if="!expandOnHover" class="size-3.5" />
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/easyflow-layout.vue b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/easyflow-layout.vue
index 274e3cb..7022d76 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/easyflow-layout.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/layout-ui/src/easyflow-layout.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
-import type {CSSProperties} from 'vue';
-import {computed, ref, watch} from 'vue';
+import type { CSSProperties } from 'vue';
 
-import type {EasyFlowLayoutProps} from './easyflow-layout';
+import type { EasyFlowLayoutProps } from './easyflow-layout';
+
+import { computed, ref, watch } from 'vue';
 
 import {
   SCROLL_FIXED_CLASS,
   useLayoutFooterStyle,
   useLayoutHeaderStyle,
 } from '@easyflow-core/composables';
-import {IconifyIcon} from '@easyflow-core/icons';
-import {EasyFlowIconButton} from '@easyflow-core/shadcn-ui';
-import {ELEMENT_ID_MAIN_CONTENT} from '@easyflow-core/shared/constants';
+import { IconifyIcon } from '@easyflow-core/icons';
+import { EasyFlowIconButton } from '@easyflow-core/shadcn-ui';
+import { ELEMENT_ID_MAIN_CONTENT } from '@easyflow-core/shared/constants';
 
-import {useMouse, useScroll, useThrottleFn} from '@vueuse/core';
+import { useMouse, useScroll, useThrottleFn } from '@vueuse/core';
 
 import {
   LayoutContent,
@@ -22,7 +23,7 @@ import {
   LayoutSidebar,
   LayoutTabbar,
 } from './components';
-import {useLayout} from './hooks/use-layout';
+import { useLayout } from './hooks/use-layout';
 
 interface Props extends EasyFlowLayoutProps {}
 
@@ -30,24 +31,6 @@ defineOptions({
   name: 'EasyFlowLayout',
 });
 
-const headerToggleButtonClass =
-  'my-0 mr-1 flex h-9 w-9 items-center justify-center rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] hover:-translate-y-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]';
-const headerToggleButtonStyle: CSSProperties = {
-  backgroundColor: 'hsl(var(--nav-tool-bg) / 0.92)',
-  backgroundImage:
-    'linear-gradient(180deg, hsl(var(--nav-tool-bg) / 0.96), hsl(var(--glass-tint) / 0.8))',
-  border: '1px solid hsl(var(--glass-border) / 0.2)',
-  boxShadow: '0 18px 36px -28px hsl(var(--primary) / 0.24)',
-};
-const layoutFlowFieldStyle: CSSProperties = {
-  backgroundImage:
-    'radial-gradient(ellipse 14% 18% at 5% 3%, hsl(var(--nav-flow-core) / 0.34) 0%, hsl(var(--nav-flow-core) / 0.14) 34%, transparent 74%), radial-gradient(ellipse 48% 18% at 16% 8%, hsl(var(--nav-flow-core) / 0.12) 0%, transparent 68%), radial-gradient(ellipse 68% 34% at 28% 18%, hsl(var(--nav-flow-secondary) / 0.1) 0%, transparent 70%), linear-gradient(122deg, hsl(var(--nav-flow-trace) / 0.13) 0%, hsl(var(--nav-flow-trace) / 0.1) 8%, hsl(var(--nav-flow-core) / 0.08) 14%, transparent 24%, transparent 42%, hsl(var(--nav-flow-secondary) / 0.06) 58%, hsl(var(--nav-flow-trace) / 0.04) 70%, transparent 88%), radial-gradient(ellipse 84% 34% at 34% 26%, hsl(var(--nav-flow-core) / 0.08) 0%, transparent 72%), radial-gradient(ellipse 74% 30% at 48% 38%, hsl(var(--nav-flow-secondary) / 0.06) 0%, transparent 74%), radial-gradient(ellipse 62% 26% at 60% 48%, hsl(var(--nav-flow-accent) / 0.04) 0%, transparent 76%)',
-};
-const layoutFlowGlowStyle: CSSProperties = {
-  backgroundImage:
-    'radial-gradient(ellipse 18% 20% at 6% 4%, hsl(var(--nav-flow-core) / 0.18) 0%, transparent 74%), radial-gradient(ellipse 72% 28% at 26% 16%, hsl(var(--nav-flow-trace) / 0.08) 0%, transparent 70%), radial-gradient(ellipse 68% 26% at 44% 28%, hsl(var(--nav-flow-secondary) / 0.05) 0%, transparent 72%), radial-gradient(ellipse 58% 22% at 62% 42%, hsl(var(--nav-flow-trace) / 0.04) 0%, transparent 74%)',
-};
-
 const props = withDefaults(defineProps<Props>(), {
   contentCompact: 'wide',
   contentCompactWidth: 1200,
@@ -79,8 +62,25 @@ const props = withDefaults(defineProps<Props>(), {
   tabbarHeight: 40,
   zIndex: 200,
 });
-
 const emit = defineEmits<{ sideMouseLeave: []; toggleSidebar: [] }>();
+const headerToggleButtonClass =
+  'my-0 mr-1 flex h-9 w-9 items-center justify-center rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] hover:-translate-y-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]';
+const headerToggleButtonStyle: CSSProperties = {
+  backgroundColor: 'hsl(var(--nav-tool-bg) / 0.92)',
+  backgroundImage:
+    'linear-gradient(180deg, hsl(var(--nav-tool-bg) / 0.96), hsl(var(--glass-tint) / 0.8))',
+  border: '1px solid hsl(var(--glass-border) / 0.2)',
+  boxShadow: '0 18px 36px -28px hsl(var(--primary) / 0.24)',
+};
+const layoutFlowFieldStyle: CSSProperties = {
+  backgroundImage:
+    'radial-gradient(ellipse 14% 18% at 5% 3%, hsl(var(--nav-flow-core) / 0.34) 0%, hsl(var(--nav-flow-core) / 0.14) 34%, transparent 74%), radial-gradient(ellipse 48% 18% at 16% 8%, hsl(var(--nav-flow-core) / 0.12) 0%, transparent 68%), radial-gradient(ellipse 68% 34% at 28% 18%, hsl(var(--nav-flow-secondary) / 0.1) 0%, transparent 70%), linear-gradient(122deg, hsl(var(--nav-flow-trace) / 0.13) 0%, hsl(var(--nav-flow-trace) / 0.1) 8%, hsl(var(--nav-flow-core) / 0.08) 14%, transparent 24%, transparent 42%, hsl(var(--nav-flow-secondary) / 0.06) 58%, hsl(var(--nav-flow-trace) / 0.04) 70%, transparent 88%), radial-gradient(ellipse 84% 34% at 34% 26%, hsl(var(--nav-flow-core) / 0.08) 0%, transparent 72%), radial-gradient(ellipse 74% 30% at 48% 38%, hsl(var(--nav-flow-secondary) / 0.06) 0%, transparent 74%), radial-gradient(ellipse 62% 26% at 60% 48%, hsl(var(--nav-flow-accent) / 0.04) 0%, transparent 76%)',
+};
+const layoutFlowGlowStyle: CSSProperties = {
+  backgroundImage:
+    'radial-gradient(ellipse 18% 20% at 6% 4%, hsl(var(--nav-flow-core) / 0.18) 0%, transparent 74%), radial-gradient(ellipse 72% 28% at 26% 16%, hsl(var(--nav-flow-trace) / 0.08) 0%, transparent 70%), radial-gradient(ellipse 68% 26% at 44% 28%, hsl(var(--nav-flow-secondary) / 0.05) 0%, transparent 72%), radial-gradient(ellipse 58% 22% at 62% 42%, hsl(var(--nav-flow-trace) / 0.04) 0%, transparent 74%)',
+};
+
 const sidebarCollapse = defineModel<boolean>('sidebarCollapse', {
   default: false,
 });
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/easyflow-ui-admin/packages/@core/ui-kit/menu-ui/src/components/menu.vue
index 9486046..7a3e31e 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -434,8 +434,8 @@ $namespace: easyflow;
 
   &:focus-visible {
     box-shadow:
-      0 0 0 1px hsl(var(--glass-border) / 0.72),
-      0 0 0 4px hsl(var(--ring) / 0.16);
+      0 0 0 1px hsl(var(--glass-border) / 72%),
+      0 0 0 4px hsl(var(--ring) / 16%);
   }
 
   * {
@@ -472,8 +472,8 @@ $namespace: easyflow;
   --menu-item-collapse-margin-x: 8px;
   --menu-item-radius: 14px;
   --menu-item-shadow:
-    inset 0 1px 0 hsl(var(--nav-sheen) / 0.54),
-    0 22px 40px -30px hsl(var(--primary) / 0.24);
+    inset 0 1px 0 hsl(var(--nav-sheen) / 54%),
+    0 22px 40px -30px hsl(var(--primary) / 24%);
   --menu-item-indent: 18px;
   --menu-font-size: 14px;
   --menu-item-indicator-width: 0px;
@@ -485,28 +485,28 @@ $namespace: easyflow;
     --menu-item-hover-color: hsl(var(--foreground));
     --menu-item-hover-background-color: linear-gradient(
       180deg,
-      hsl(var(--nav-item-hover) / 0.78),
-      hsl(var(--glass-tint) / 0.46)
+      hsl(var(--nav-item-hover) / 78%),
+      hsl(var(--glass-tint) / 46%)
     );
     --menu-item-active-color: hsl(var(--nav-item-active-foreground));
     --menu-item-active-background-color: linear-gradient(
       135deg,
-      hsl(var(--nav-item-active) / 0.92) 0%,
-      hsl(var(--nav-item-hover) / 0.72) 54%,
-      hsl(var(--glass-tint) / 0.52) 100%
+      hsl(var(--nav-item-active) / 92%) 0%,
+      hsl(var(--nav-item-hover) / 72%) 54%,
+      hsl(var(--glass-tint) / 52%) 100%
     );
     --menu-submenu-hover-color: hsl(var(--foreground));
     --menu-submenu-hover-background-color: linear-gradient(
       180deg,
-      hsl(var(--nav-item-hover) / 0.78),
-      hsl(var(--glass-tint) / 0.46)
+      hsl(var(--nav-item-hover) / 78%),
+      hsl(var(--glass-tint) / 46%)
     );
     --menu-submenu-active-color: hsl(var(--nav-item-active-foreground));
     --menu-submenu-active-background-color: linear-gradient(
       135deg,
-      hsl(var(--nav-item-active) / 0.92) 0%,
-      hsl(var(--nav-item-hover) / 0.72) 54%,
-      hsl(var(--glass-tint) / 0.52) 100%
+      hsl(var(--nav-item-active) / 92%) 0%,
+      hsl(var(--nav-item-hover) / 72%) 54%,
+      hsl(var(--glass-tint) / 52%) 100%
     );
     --menu-submenu-background-color: var(--menu-background-color);
   }
@@ -518,28 +518,28 @@ $namespace: easyflow;
     --menu-item-hover-color: hsl(var(--foreground));
     --menu-item-hover-background-color: linear-gradient(
       180deg,
-      hsl(var(--nav-item-hover) / 0.78),
-      hsl(var(--glass-tint) / 0.46)
+      hsl(var(--nav-item-hover) / 78%),
+      hsl(var(--glass-tint) / 46%)
     );
     --menu-item-active-color: hsl(var(--nav-item-active-foreground));
     --menu-item-active-background-color: linear-gradient(
       135deg,
-      hsl(var(--nav-item-active) / 0.92) 0%,
-      hsl(var(--nav-item-hover) / 0.72) 54%,
-      hsl(var(--glass-tint) / 0.52) 100%
+      hsl(var(--nav-item-active) / 92%) 0%,
+      hsl(var(--nav-item-hover) / 72%) 54%,
+      hsl(var(--glass-tint) / 52%) 100%
     );
     --menu-submenu-hover-color: hsl(var(--foreground));
     --menu-submenu-hover-background-color: linear-gradient(
       180deg,
-      hsl(var(--nav-item-hover) / 0.78),
-      hsl(var(--glass-tint) / 0.46)
+      hsl(var(--nav-item-hover) / 78%),
+      hsl(var(--glass-tint) / 46%)
     );
     --menu-submenu-active-color: hsl(var(--nav-item-active-foreground));
     --menu-submenu-active-background-color: linear-gradient(
       135deg,
-      hsl(var(--nav-item-active) / 0.92) 0%,
-      hsl(var(--nav-item-hover) / 0.72) 54%,
-      hsl(var(--glass-tint) / 0.52) 100%
+      hsl(var(--nav-item-active) / 92%) 0%,
+      hsl(var(--nav-item-hover) / 72%) 54%,
+      hsl(var(--glass-tint) / 52%) 100%
     );
     --menu-submenu-background-color: var(--menu-background-color);
   }
@@ -573,28 +573,28 @@ $namespace: easyflow;
       --menu-item-hover-color: hsl(var(--foreground));
       --menu-item-hover-background-color: linear-gradient(
         180deg,
-        hsl(var(--nav-item-hover) / 0.98),
-        hsl(var(--nav-surface-subtle) / 0.84)
+        hsl(var(--nav-item-hover) / 98%),
+        hsl(var(--nav-surface-subtle) / 84%)
       );
       --menu-item-active-color: hsl(var(--nav-item-active-foreground));
       --menu-item-active-background-color: linear-gradient(
         135deg,
         hsl(var(--nav-item-active)) 0%,
-        hsl(var(--nav-item-hover) / 0.98) 55%,
-        hsl(var(--glass-tint) / 0.98) 100%
+        hsl(var(--nav-item-hover) / 98%) 55%,
+        hsl(var(--glass-tint) / 98%) 100%
       );
       --menu-submenu-active-color: hsl(var(--nav-item-active-foreground));
       --menu-submenu-active-background-color: linear-gradient(
         135deg,
         hsl(var(--nav-item-active)) 0%,
-        hsl(var(--nav-item-hover) / 0.98) 55%,
-        hsl(var(--glass-tint) / 0.98) 100%
+        hsl(var(--nav-item-hover) / 98%) 55%,
+        hsl(var(--glass-tint) / 98%) 100%
       );
       --menu-submenu-hover-color: hsl(var(--foreground));
       --menu-submenu-hover-background-color: linear-gradient(
         180deg,
-        hsl(var(--nav-item-hover) / 0.98),
-        hsl(var(--nav-surface-subtle) / 0.84)
+        hsl(var(--nav-item-hover) / 98%),
+        hsl(var(--nav-surface-subtle) / 84%)
       );
     }
 
@@ -603,27 +603,27 @@ $namespace: easyflow;
       --menu-item-active-background-color: linear-gradient(
         135deg,
         hsl(var(--nav-item-active)) 0%,
-        hsl(var(--nav-item-hover) / 0.98) 55%,
-        hsl(var(--glass-tint) / 0.98) 100%
+        hsl(var(--nav-item-hover) / 98%) 55%,
+        hsl(var(--glass-tint) / 98%) 100%
       );
       --menu-item-hover-background-color: linear-gradient(
         180deg,
-        hsl(var(--nav-item-hover) / 0.98),
-        hsl(var(--nav-surface-subtle) / 0.84)
+        hsl(var(--nav-item-hover) / 98%),
+        hsl(var(--nav-surface-subtle) / 84%)
       );
       --menu-item-hover-color: hsl(var(--foreground));
       --menu-submenu-active-color: hsl(var(--nav-item-active-foreground));
       --menu-submenu-active-background-color: linear-gradient(
         135deg,
         hsl(var(--nav-item-active)) 0%,
-        hsl(var(--nav-item-hover) / 0.98) 55%,
-        hsl(var(--glass-tint) / 0.98) 100%
+        hsl(var(--nav-item-hover) / 98%) 55%,
+        hsl(var(--glass-tint) / 98%) 100%
       );
       --menu-submenu-hover-color: hsl(var(--foreground));
       --menu-submenu-hover-background-color: linear-gradient(
         180deg,
-        hsl(var(--nav-item-hover) / 0.98),
-        hsl(var(--nav-surface-subtle) / 0.84)
+        hsl(var(--nav-item-hover) / 98%),
+        hsl(var(--nav-surface-subtle) / 84%)
       );
     }
   }
@@ -829,10 +829,10 @@ $namespace: easyflow;
 
   &__content {
     display: inline-flex;
+    gap: 10px;
     align-items: center;
     width: 100%;
     height: var(--menu-item-height);
-    gap: 10px;
 
     span {
       @include menu-title;
@@ -867,7 +867,7 @@ $namespace: easyflow;
     text-decoration: none;
     cursor: pointer;
     background: var(--menu-item-hover-background-color) !important;
-    box-shadow: 0 18px 34px -30px hsl(var(--primary) / 0.18);
+    box-shadow: 0 18px 34px -30px hsl(var(--primary) / 18%);
     transform: translateX(2px);
   }
 
@@ -902,8 +902,8 @@ $namespace: easyflow;
       text-decoration: none;
       cursor: pointer;
       background: var(--menu-submenu-active-background-color);
-      fill: var(--menu-submenu-active-color);
       box-shadow: var(--menu-item-shadow);
+      fill: var(--menu-submenu-active-color);
     }
   }
 
@@ -914,8 +914,8 @@ $namespace: easyflow;
   &:focus-visible > .#{$namespace}-sub-menu-content,
   &:focus-within > .#{$namespace}-sub-menu-content {
     box-shadow:
-      0 0 0 1px hsl(var(--glass-border) / 0.72),
-      0 0 0 4px hsl(var(--ring) / 0.16);
+      0 0 0 1px hsl(var(--glass-border) / 72%),
+      0 0 0 4px hsl(var(--ring) / 16%);
   }
 }
 
@@ -938,8 +938,9 @@ $namespace: easyflow;
   }
 
   &__title {
-    @include menu-title;
     font-weight: 500;
+
+    @include menu-title;
   }
 
   &.is-collapse-show-title {
@@ -973,7 +974,7 @@ $namespace: easyflow;
     text-decoration: none;
     cursor: pointer;
     background: var(--menu-submenu-hover-background-color) !important;
-    box-shadow: 0 18px 34px -30px hsl(var(--primary) / 0.18);
+    box-shadow: 0 18px 34px -30px hsl(var(--primary) / 18%);
     transform: translateX(2px);
   }
 }
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts b/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts
index 8656523..f1f0e6d 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts
@@ -7,7 +7,7 @@ import type { AlertProps, BeforeCloseScope, PromptProps } from './alert';
 import { h, nextTick, ref, render } from 'vue';
 
 import { useSimpleLocale } from '@easyflow-core/composables';
-import { Input, EasyFlowRenderContent } from '@easyflow-core/shadcn-ui';
+import { EasyFlowRenderContent, Input } from '@easyflow-core/shadcn-ui';
 import { isFunction, isString } from '@easyflow-core/shared/utils';
 
 import Alert from './alert.vue';
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/alert/alert.vue b/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
index 71ff1ac..3618569 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
@@ -177,7 +177,10 @@ async function handleOpenChange(val: boolean) {
           <div class="m-4 min-h-[30px]">
             <EasyFlowRenderContent :content="content" render-br />
           </div>
-          <EasyFlowLoading v-if="loading && contentMasking" :spinning="loading" />
+          <EasyFlowLoading
+            v-if="loading && contentMasking"
+            :spinning="loading"
+          />
         </AlertDialogDescription>
         <div
           class="flex items-center justify-end gap-x-2"
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
index fc3c1db..7e5e21f 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -18,6 +18,10 @@ import {
 } from '@easyflow-core/composables';
 import { X } from '@easyflow-core/icons';
 import {
+  EasyFlowButton,
+  EasyFlowHelpTooltip,
+  EasyFlowIconButton,
+  EasyFlowLoading,
   Separator,
   Sheet,
   SheetClose,
@@ -26,10 +30,6 @@ import {
   SheetFooter,
   SheetHeader,
   SheetTitle,
-  EasyFlowButton,
-  EasyFlowHelpTooltip,
-  EasyFlowIconButton,
-  EasyFlowLoading,
   VisuallyHidden,
 } from '@easyflow-core/shadcn-ui';
 import { ELEMENT_ID_MAIN_CONTENT } from '@easyflow-core/shared/constants';
@@ -184,11 +184,16 @@ const getForceMount = computed(() => {
     <SheetContent
       :append-to="getAppendTo"
       :class="
-        cn('flex w-[520px] flex-col overflow-hidden border border-[hsl(var(--glass-border))/0.18] bg-[hsl(var(--glass-tint))/0.84] shadow-[var(--shadow-float)] supports-[backdrop-filter]:bg-[hsl(var(--glass-tint))/0.62]', drawerClass, {
-          '!w-full': isMobile || placement === 'bottom' || placement === 'top',
-          'max-h-[100vh]': placement === 'bottom' || placement === 'top',
-          hidden: isClosed,
-        })
+        cn(
+          'flex w-[520px] flex-col overflow-hidden border border-[hsl(var(--glass-border))/0.18] bg-[hsl(var(--glass-tint))/0.84] shadow-[var(--shadow-float)] supports-[backdrop-filter]:bg-[hsl(var(--glass-tint))/0.62]',
+          drawerClass,
+          {
+            '!w-full':
+              isMobile || placement === 'bottom' || placement === 'top',
+            'max-h-[100vh]': placement === 'bottom' || placement === 'top',
+            hidden: isClosed,
+          },
+        )
       "
       :modal="modal"
       :open="state?.isOpen"
@@ -223,7 +228,7 @@ const getForceMount = computed(() => {
             v-if="closable && closeIconPlacement === 'left'"
             as-child
             :disabled="submitting"
-            class="data-[state=open]:bg-[hsl(var(--surface-contrast-soft))/0.92] ml-[2px] cursor-pointer rounded-full opacity-84 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+            class="opacity-84 ml-[2px] cursor-pointer rounded-full transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-[hsl(var(--surface-contrast-soft))/0.92]"
           >
             <slot name="close-icon">
               <EasyFlowIconButton>
@@ -264,7 +269,7 @@ const getForceMount = computed(() => {
             v-if="closable && closeIconPlacement === 'right'"
             as-child
             :disabled="submitting"
-            class="data-[state=open]:bg-[hsl(var(--surface-contrast-soft))/0.92] ml-[2px] cursor-pointer rounded-full opacity-84 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+            class="opacity-84 ml-[2px] cursor-pointer rounded-full transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-[hsl(var(--surface-contrast-soft))/0.92]"
           >
             <slot name="close-icon">
               <EasyFlowIconButton>
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts b/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
index cb11872..2305116 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
@@ -105,7 +105,11 @@ export function useEasyFlowDrawer<
   const Drawer = defineComponent(
     (props: DrawerProps, { attrs, slots }) => {
       return () =>
-        h(EasyFlowDrawer, { ...props, ...attrs, drawerApi: extendedApi }, slots);
+        h(
+          EasyFlowDrawer,
+          { ...props, ...attrs, drawerApi: extendedApi },
+          slots,
+        );
     },
     // eslint-disable-next-line vue/one-component-per-file
     {
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts b/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
index 349dee6..7bea6bd 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -23,9 +23,9 @@ export function setDefaultModalProps(props: Partial<ModalProps>) {
   Object.assign(DEFAULT_MODAL_PROPS, props);
 }
 
-export function useEasyFlowModal<TParentModalProps extends ModalProps = ModalProps>(
-  options: ModalApiOptions = {},
-) {
+export function useEasyFlowModal<
+  TParentModalProps extends ModalProps = ModalProps,
+>(options: ModalApiOptions = {}) {
   // Modal一般会抽离出来，所以如果有传入 connectedComponent，则表示为外部调用，与内部组件进行连接
   // 外部的Modal通过provide/inject传递api
 
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue b/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
index f54f90a..fc297a3 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type {BreadcrumbProps} from './types';
+import type { BreadcrumbProps } from './types';
 
-import {ChevronDown} from '@easyflow-core/icons';
+import { ChevronDown } from '@easyflow-core/icons';
 
 import {
   Breadcrumb,
@@ -15,7 +15,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../../ui';
-import {EasyFlowIcon} from '../icon';
+import { EasyFlowIcon } from '../icon';
 
 interface Props extends BreadcrumbProps {}
 
@@ -106,18 +106,18 @@ function handleClick(path?: string) {
 <style scoped>
 .easyflow-breadcrumb {
   gap: 4px;
-  color: hsl(var(--breadcrumb-muted));
   font-size: 13px;
+  color: hsl(var(--breadcrumb-muted));
 }
 
 .easyflow-breadcrumb__link {
   display: inline-flex;
-  align-items: center;
   gap: 4px;
+  align-items: center;
   min-width: 0;
   padding: 4px 8px;
-  border-radius: 999px;
   color: hsl(var(--breadcrumb-muted));
+  border-radius: 999px;
   transition:
     color 0.16s ease,
     background-color 0.16s ease,
@@ -125,20 +125,20 @@ function handleClick(path?: string) {
 }
 
 .easyflow-breadcrumb__link:hover {
-  background: hsl(var(--nav-item-hover) / 0.7);
   color: hsl(var(--nav-item-active-foreground));
+  background: hsl(var(--nav-item-hover) / 70%);
   transform: translateY(-0.5px);
 }
 
 .easyflow-breadcrumb__current {
   position: relative;
   display: inline-flex;
-  align-items: center;
   gap: 4px;
+  align-items: center;
   min-width: 0;
   padding: 4px 8px 6px;
-  color: hsl(var(--breadcrumb-current));
   font-weight: 600;
+  color: hsl(var(--breadcrumb-current));
   letter-spacing: 0.01em;
   isolation: isolate;
 }
@@ -150,17 +150,17 @@ function handleClick(path?: string) {
   content: '';
   background: linear-gradient(
     180deg,
-    hsl(var(--nav-item-active) / 0.36) 0%,
-    hsl(var(--nav-item-active) / 0.18) 42%,
-    hsl(var(--glass-tint) / 0.08) 82%,
+    hsl(var(--nav-item-active) / 36%) 0%,
+    hsl(var(--nav-item-active) / 18%) 42%,
+    hsl(var(--glass-tint) / 8%) 82%,
     transparent 100%
   );
   border-radius: 14px 14px 10px 10px;
   box-shadow:
-    inset 1px 0 0 hsl(var(--nav-border) / 0.54),
-    inset -1px 0 0 hsl(var(--nav-border) / 0.54),
-    inset 0 1px 0 hsl(var(--nav-sheen) / 0.68),
-    0 10px 22px -22px hsl(var(--primary) / 0.2);
+    inset 1px 0 0 hsl(var(--nav-border) / 54%),
+    inset -1px 0 0 hsl(var(--nav-border) / 54%),
+    inset 0 1px 0 hsl(var(--nav-sheen) / 68%),
+    0 10px 22px -22px hsl(var(--primary) / 20%);
 }
 
 .easyflow-breadcrumb__current::after {
@@ -168,22 +168,22 @@ function handleClick(path?: string) {
   right: -6px;
   bottom: 0;
   left: -6px;
-  height: 1px;
   z-index: -1;
+  height: 1px;
   content: '';
   background: linear-gradient(
     90deg,
     transparent,
-    hsl(var(--nav-item-active) / 0.2) 22%,
-    hsl(var(--nav-item-active) / 0.26) 50%,
-    hsl(var(--nav-item-active) / 0.2) 78%,
+    hsl(var(--nav-item-active) / 20%) 22%,
+    hsl(var(--nav-item-active) / 26%) 50%,
+    hsl(var(--nav-item-active) / 20%) 78%,
     transparent
   );
   opacity: 0.72;
 }
 
 .easyflow-breadcrumb__separator {
-  color: hsl(var(--breadcrumb-muted) / 0.72);
+  color: hsl(var(--breadcrumb-muted) / 72%);
 }
 
 .easyflow-breadcrumb__separator :deep(svg) {
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue b/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
index 196dd76..bb529ed 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Arrayable } from '@vueuse/core';
 
-import type { ValueType, EasyFlowButtonGroupProps } from './button';
+import type { EasyFlowButtonGroupProps, ValueType } from './button';
 
 import { computed, ref, watch } from 'vue';
 
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue b/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
index 6b01867..173f9d3 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
@@ -16,7 +16,10 @@ const style = computed(() => {
 });
 </script>
 <template>
-  <div :style="style" class="easyflow-spine-text !bg-clip-text text-transparent">
+  <div
+    :style="style"
+    class="easyflow-spine-text !bg-clip-text text-transparent"
+  >
     <slot></slot>
   </div>
 </template>
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
index 0aaf421..b97efb5 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type {TabDefinition} from '@easyflow-core/typings';
+import type { TabDefinition } from '@easyflow-core/typings';
 
-import type {TabConfig, TabsProps} from '../../types';
+import type { TabConfig, TabsProps } from '../../types';
 
-import {computed, ref} from 'vue';
+import { computed, ref } from 'vue';
 
-import {Pin, X} from '@easyflow-core/icons';
-import {EasyFlowContextMenu, EasyFlowIcon} from '@easyflow-core/shadcn-ui';
+import { Pin, X } from '@easyflow-core/icons';
+import { EasyFlowContextMenu, EasyFlowIcon } from '@easyflow-core/shadcn-ui';
 
 interface Props extends TabsProps {}
 
@@ -167,10 +167,10 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
     inset: 1px -5px -1px;
     content: '';
     background: hsl(var(--background));
+    border-top: 2px solid hsl(var(--primary) / 38%);
+    border-right: 1px solid hsl(var(--primary) / 16%);
+    border-left: 1px solid hsl(var(--primary) / 16%);
     border-radius: 15px 15px 0 0;
-    border-top: 2px solid hsl(var(--primary) / 0.38);
-    border-right: 1px solid hsl(var(--primary) / 0.16);
-    border-left: 1px solid hsl(var(--primary) / 0.16);
   }
 
   &__background-content.is-active::after {
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
index aefae00..a7f5540 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -38,7 +38,7 @@ const typeWithClass = computed(() => {
     },
     plain: {
       content:
-        "h-[calc(100%-8px)] rounded-2xl border border-transparent bg-transparent transition-all duration-150 [&.is-active]:bg-[hsl(var(--glass-tint))/0.72] [&.is-active]:shadow-[0_16px_28px_-24px_hsl(var(--foreground)/0.34)] [&:not(.is-active)]:hover:bg-[hsl(var(--nav-item-hover))/0.9]",
+        'h-[calc(100%-8px)] rounded-2xl border border-transparent bg-transparent transition-all duration-150 [&.is-active]:bg-[hsl(var(--glass-tint))/0.72] [&.is-active]:shadow-[0_16px_28px_-24px_hsl(var(--foreground)/0.34)] [&:not(.is-active)]:hover:bg-[hsl(var(--nav-item-hover))/0.9]',
     },
   };
 
@@ -136,7 +136,9 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
                 fallback
               />
 
-              <span class="flex-1 overflow-hidden whitespace-nowrap text-[13px]">
+              <span
+                class="flex-1 overflow-hidden whitespace-nowrap text-[13px]"
+              >
                 {{ tab.title }}
               </span>
             </div>
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
index c2e42ac..9482f03 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
@@ -10,7 +10,7 @@ defineProps<DropdownMenuProps>();
 <template>
   <EasyFlowDropdownMenu :menus="menus" :modal="false">
     <div
-      class="flex-center mr-1 h-8 w-8 cursor-pointer rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.52] text-[hsl(var(--nav-item-muted-foreground))] shadow-[0_10px_24px_-24px_hsl(var(--foreground)/0.3)] backdrop-blur-xl transition-[background-color,color,transform] hover:-translate-y-0.5 hover:bg-[hsl(var(--surface-contrast-soft))/0.92] hover:text-foreground"
+      class="flex-center hover:text-foreground mr-1 h-8 w-8 cursor-pointer rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.52] text-[hsl(var(--nav-item-muted-foreground))] shadow-[0_10px_24px_-24px_hsl(var(--foreground)/0.3)] backdrop-blur-xl transition-[background-color,color,transform] hover:-translate-y-0.5 hover:bg-[hsl(var(--surface-contrast-soft))/0.92]"
     >
       <ChevronDown class="size-4" />
     </div>
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
index 59be417..e501f28 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
@@ -10,7 +10,7 @@ function toggleScreen() {
 
 <template>
   <div
-    class="flex-center h-8 w-8 cursor-pointer rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.52] text-[hsl(var(--nav-item-muted-foreground))] shadow-[0_10px_24px_-24px_hsl(var(--foreground)/0.3)] backdrop-blur-xl transition-[background-color,color,transform] hover:-translate-y-0.5 hover:bg-[hsl(var(--surface-contrast-soft))/0.92] hover:text-foreground"
+    class="flex-center hover:text-foreground h-8 w-8 cursor-pointer rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.52] text-[hsl(var(--nav-item-muted-foreground))] shadow-[0_10px_24px_-24px_hsl(var(--foreground)/0.3)] backdrop-blur-xl transition-[background-color,color,transform] hover:-translate-y-0.5 hover:bg-[hsl(var(--surface-contrast-soft))/0.92]"
     @click="toggleScreen"
   >
     <Minimize2 v-if="screen" class="size-4" />
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
index 93bf567..d72eedb 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
+++ b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type {TabsEmits, TabsProps} from './types';
+import type { TabsEmits, TabsProps } from './types';
 
-import {useForwardPropsEmits} from '@easyflow-core/composables';
-import {ChevronLeft, ChevronRight} from '@easyflow-core/icons';
-import {EasyFlowScrollbar} from '@easyflow-core/shadcn-ui';
+import { useForwardPropsEmits } from '@easyflow-core/composables';
+import { ChevronLeft, ChevronRight } from '@easyflow-core/icons';
+import { EasyFlowScrollbar } from '@easyflow-core/shadcn-ui';
 
-import {Tabs, TabsChrome} from './components';
-import {useTabsDrag} from './use-tabs-drag';
-import {useTabsViewScroll} from './use-tabs-view-scroll';
+import { Tabs, TabsChrome } from './components';
+import { useTabsDrag } from './use-tabs-drag';
+import { useTabsViewScroll } from './use-tabs-view-scroll';
 
 interface Props extends TabsProps {}
 
@@ -53,7 +53,8 @@ useTabsDrag(props, emit);
     <span
       v-show="showScrollButton"
       :class="{
-        'cursor-pointer text-[hsl(var(--nav-item-muted-foreground))] hover:bg-[hsl(var(--surface-contrast-soft))] hover:text-foreground': !scrollIsAtLeft,
+        'hover:text-foreground cursor-pointer text-[hsl(var(--nav-item-muted-foreground))] hover:bg-[hsl(var(--surface-contrast-soft))]':
+          !scrollIsAtLeft,
         'pointer-events-none opacity-30': scrollIsAtLeft,
       }"
       class="mx-1 my-1 flex items-center rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.18] px-2 shadow-none backdrop-blur-xl transition-[background-color,color,transform]"
@@ -94,7 +95,8 @@ useTabsDrag(props, emit);
     <span
       v-show="showScrollButton"
       :class="{
-        'cursor-pointer text-[hsl(var(--nav-item-muted-foreground))] hover:bg-[hsl(var(--surface-contrast-soft))] hover:text-foreground': !scrollIsAtRight,
+        'hover:text-foreground cursor-pointer text-[hsl(var(--nav-item-muted-foreground))] hover:bg-[hsl(var(--surface-contrast-soft))]':
+          !scrollIsAtRight,
         'pointer-events-none opacity-30': scrollIsAtRight,
       }"
       class="mx-1 my-1 flex items-center rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.18] px-2 shadow-none backdrop-blur-xl transition-[background-color,color,transform]"
diff --git a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
index 7d2a17c..41186b1 100644
--- a/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
+++ b/easyflow-ui-admin/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
@@ -1,7 +1,7 @@
-import type { TabsProps } from './types';
-
 import type { ComponentPublicInstance } from 'vue';
 
+import type { TabsProps } from './types';
+
 import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useDebounceFn } from '@vueuse/core';
@@ -13,7 +13,7 @@ export function useTabsViewScroll(props: TabsProps) {
   let resizeObserver: null | ResizeObserver = null;
   let mutationObserver: MutationObserver | null = null;
   let tabItemCount = 0;
-  const scrollbarRef = ref<ScrollbarInstance | null>(null);
+  const scrollbarRef = ref<null | ScrollbarInstance>(null);
   const scrollViewportEl = ref<DomElement>(null);
   const showScrollButton = ref(false);
   const scrollIsAtLeft = ref(true);
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/components/api-component/api-component.vue b/easyflow-ui-admin/packages/effects/common-ui/src/components/api-component/api-component.vue
index 14bd1ac..08c2dc6 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/components/api-component/api-component.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/components/api-component/api-component.vue
@@ -7,7 +7,12 @@ import { computed, nextTick, ref, unref, useAttrs, watch } from 'vue';
 
 import { LoaderCircle } from '@easyflow/icons';
 
-import { cloneDeep, get, isEqual, isFunction } from '@easyflow-core/shared/utils';
+import {
+  cloneDeep,
+  get,
+  isEqual,
+  isFunction,
+} from '@easyflow-core/shared/utils';
 
 import { objectOmit } from '@vueuse/core';
 
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-thinking/ChatThinkingBlock.vue b/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-thinking/ChatThinkingBlock.vue
index 2fcc4d1..9c00464 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-thinking/ChatThinkingBlock.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-thinking/ChatThinkingBlock.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
 import type { ChatThinkingBlockProps } from './types';
 
+import { computed } from 'vue';
+
 defineOptions({
   name: 'ChatThinkingBlock',
 });
@@ -24,8 +24,8 @@ const emit = defineEmits<{
 
 const normalizedContent = computed(() =>
   String(props.content || '')
-    .replace(/\r\n/g, '\n')
-    .replace(/^\s*\n+/, '')
+    .replaceAll('\r\n', '\n')
+    .replace(/^\s*\n/, '')
     .trimEnd(),
 );
 
@@ -131,27 +131,26 @@ function toggleExpanded() {
 
 <style scoped>
 .chat-thinking-block {
-  border: 1px solid hsl(var(--divider-faint) / 0.18);
+  background: linear-gradient(
+    180deg,
+    hsl(var(--glass-tint) / 48%) 0%,
+    hsl(var(--surface-panel) / 74%) 100%
+  );
+  border: 1px solid hsl(var(--divider-faint) / 18%);
   border-radius: 16px;
-  background:
-    linear-gradient(
-      180deg,
-      hsl(var(--glass-tint) / 0.48) 0%,
-      hsl(var(--surface-panel) / 0.74) 100%
-    );
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.24),
-    0 10px 24px -24px hsl(var(--foreground) / 0.18);
+    inset 0 1px 0 hsl(var(--glass-border) / 24%),
+    0 10px 24px -24px hsl(var(--foreground) / 18%);
   backdrop-filter: blur(12px);
 }
 
 .chat-thinking-block__trigger {
   display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
   width: 100%;
   min-width: 0;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 10px;
   padding: 9px 12px;
   color: inherit;
   text-align: left;
@@ -166,7 +165,7 @@ function toggleExpanded() {
 }
 
 .chat-thinking-block__trigger:not(:disabled):hover {
-  background: hsl(var(--surface-contrast-soft) / 0.34);
+  background: hsl(var(--surface-contrast-soft) / 34%);
 }
 
 .chat-thinking-block__trigger:disabled {
@@ -175,9 +174,9 @@ function toggleExpanded() {
 
 .chat-thinking-block__leading {
   display: inline-flex;
-  min-width: 0;
-  align-items: center;
   gap: 8px;
+  align-items: center;
+  min-width: 0;
 }
 
 .chat-thinking-block__indicator {
@@ -185,19 +184,19 @@ function toggleExpanded() {
   flex: 0 0 auto;
   width: 8px;
   height: 8px;
+  background: hsl(var(--text-muted) / 74%);
   border-radius: 999px;
-  background: hsl(var(--text-muted) / 0.74);
 }
 
 .chat-thinking-block.is-thinking .chat-thinking-block__indicator {
-  background: hsl(var(--primary) / 0.82);
-  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.12);
+  background: hsl(var(--primary) / 82%);
+  box-shadow: 0 0 0 4px hsl(var(--primary) / 12%);
   animation: chat-thinking-pulse 1.8s ease-in-out infinite;
 }
 
 .chat-thinking-block.is-error .chat-thinking-block__indicator {
-  background: hsl(var(--destructive) / 0.86);
-  box-shadow: 0 0 0 4px hsl(var(--destructive) / 0.1);
+  background: hsl(var(--destructive) / 86%);
+  box-shadow: 0 0 0 4px hsl(var(--destructive) / 10%);
 }
 
 .chat-thinking-block__label {
@@ -211,10 +210,10 @@ function toggleExpanded() {
 .chat-thinking-block__summary {
   min-width: 0;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 12px;
   line-height: 1.3;
   color: hsl(var(--text-muted));
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -236,15 +235,15 @@ function toggleExpanded() {
 }
 
 .chat-thinking-block__content {
-  margin: 0;
   padding: 10px 12px;
-  border-radius: 12px;
-  background: hsl(var(--surface-panel) / 0.72);
+  margin: 0;
   font-size: 12px;
   line-height: 1.68;
   color: hsl(var(--text-secondary));
+  overflow-wrap: anywhere;
   white-space: pre-wrap;
-  word-break: break-word;
+  background: hsl(var(--surface-panel) / 72%);
+  border-radius: 12px;
 }
 
 .chat-thinking-block.is-disabled {
@@ -267,12 +266,12 @@ function toggleExpanded() {
 @keyframes chat-thinking-pulse {
   0%,
   100% {
-    box-shadow: 0 0 0 4px hsl(var(--primary) / 0.12);
+    box-shadow: 0 0 0 4px hsl(var(--primary) / 12%);
     opacity: 0.92;
   }
 
   50% {
-    box-shadow: 0 0 0 7px hsl(var(--primary) / 0.04);
+    box-shadow: 0 0 0 7px hsl(var(--primary) / 4%);
     opacity: 1;
   }
 }
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-thinking/index.ts b/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-thinking/index.ts
index 4ad49ff..f28d311 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-thinking/index.ts
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/components/chat-thinking/index.ts
@@ -1,5 +1,2 @@
 export { default as ChatThinkingBlock } from './ChatThinkingBlock.vue';
-export type {
-  ChatThinkingBlockProps,
-  ChatThinkingBlockStatus,
-} from './types';
+export type { ChatThinkingBlockProps, ChatThinkingBlockStatus } from './types';
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue b/easyflow-ui-admin/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
index 6223a7e..86c34fb 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
@@ -8,10 +8,10 @@ import { EmptyIcon, Grip, listIcons } from '@easyflow/icons';
 import { $t } from '@easyflow/locales';
 
 import {
+  Button,
   EasyFlowIcon,
   EasyFlowIconButton,
   EasyFlowPopover,
-  Button,
   Input,
   Pagination,
   PaginationEllipsis,
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/components/tree/tree.vue b/easyflow-ui-admin/packages/effects/common-ui/src/components/tree/tree.vue
index 79e7573..e57742c 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/components/tree/tree.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/components/tree/tree.vue
@@ -4,7 +4,7 @@ import type { TreeProps } from '@easyflow-core/shadcn-ui';
 import { Inbox } from '@easyflow/icons';
 import { $t } from '@easyflow/locales';
 
-import { treePropsDefaults, EasyFlowTree } from '@easyflow-core/shadcn-ui';
+import { EasyFlowTree, treePropsDefaults } from '@easyflow-core/shadcn-ui';
 
 const props = withDefaults(defineProps<TreeProps>(), treePropsDefaults());
 </script>
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/__tests__/login.test.ts b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/__tests__/login.test.ts
index ae25abe..e87a837 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/__tests__/login.test.ts
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/__tests__/login.test.ts
@@ -1,7 +1,8 @@
-import {mount} from '@vue/test-utils';
-import {nextTick} from 'vue';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import {beforeEach, describe, expect, it, vi} from 'vitest';
 import AuthenticationLogin from '../login.vue';
 
 const { formApi, routerPush } = vi.hoisted(() => ({
@@ -41,7 +42,8 @@ vi.mock('@easyflow-core/form-ui', async () => {
 
 vi.mock('@easyflow-core/shadcn-ui', async (importOriginal) => {
   const vue = await import('vue');
-  const actual = await importOriginal<typeof import('@easyflow-core/shadcn-ui')>();
+  const actual =
+    await importOriginal<typeof import('@easyflow-core/shadcn-ui')>();
 
   return {
     ...actual,
@@ -102,7 +104,7 @@ vi.mock('@easyflow-core/shadcn-ui', async (importOriginal) => {
   };
 });
 
-describe('AuthenticationLogin', () => {
+describe('authenticationLogin', () => {
   const rememberKey = `REMEMBER_ME_ACCOUNT_${location.hostname}`;
 
   beforeEach(() => {
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/auth-title.vue b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/auth-title.vue
index 3bc41ab..4f7c1df 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/auth-title.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/auth-title.vue
@@ -6,7 +6,9 @@
       <slot></slot>
     </h2>
 
-    <p class="text-muted-foreground max-w-[34rem] text-[0.97rem] leading-7 sm:text-[1rem]">
+    <p
+      class="text-muted-foreground max-w-[34rem] text-[0.97rem] leading-7 sm:text-[1rem]"
+    >
       <slot name="desc"></slot>
     </p>
   </div>
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/code-login.vue b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/code-login.vue
index ced36b3..cb80f10 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/code-login.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/code-login.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type {Recordable} from '@easyflow/types';
+import type { Recordable } from '@easyflow/types';
 
-import type {EasyFlowFormSchema} from '@easyflow-core/form-ui';
-import {useEasyFlowForm} from '@easyflow-core/form-ui';
+import type { EasyFlowFormSchema } from '@easyflow-core/form-ui';
 
-import {computed, reactive} from 'vue';
-import {useRouter} from 'vue-router';
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
 
-import {$t} from '@easyflow/locales';
-import {EasyFlowButton} from '@easyflow-core/shadcn-ui';
+import { $t } from '@easyflow/locales';
+
+import { useEasyFlowForm } from '@easyflow-core/form-ui';
+import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
 
 import Title from './auth-title.vue';
 
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/forget-password.vue b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/forget-password.vue
index 30aee3a..f8d4328 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/forget-password.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/forget-password.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type {EasyFlowFormSchema} from '@easyflow-core/form-ui';
-import {useEasyFlowForm} from '@easyflow-core/form-ui';
+import type { EasyFlowFormSchema } from '@easyflow-core/form-ui';
 
-import {computed, reactive} from 'vue';
-import {useRouter} from 'vue-router';
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
 
-import {$t} from '@easyflow/locales';
-import {EasyFlowButton} from '@easyflow-core/shadcn-ui';
+import { $t } from '@easyflow/locales';
+
+import { useEasyFlowForm } from '@easyflow-core/form-ui';
+import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
 
 import Title from './auth-title.vue';
 
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
index ce4ada1..4e36277 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
@@ -6,7 +6,7 @@ import { computed, watch } from 'vue';
 import { $t } from '@easyflow/locales';
 
 import { useEasyFlowModal } from '@easyflow-core/popup-ui';
-import { Slot, EasyFlowAvatar } from '@easyflow-core/shadcn-ui';
+import { EasyFlowAvatar, Slot } from '@easyflow-core/shadcn-ui';
 
 interface Props extends AuthenticationProps {
   avatar?: string;
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/login.vue b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/login.vue
index 5221a1a..4376c86 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/login.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import type {Recordable} from '@easyflow/types';
+import type { Recordable } from '@easyflow/types';
 
-import type {EasyFlowFormSchema} from '@easyflow-core/form-ui';
-import {useEasyFlowForm} from '@easyflow-core/form-ui';
+import type { EasyFlowFormSchema } from '@easyflow-core/form-ui';
 
-import type {AuthenticationProps} from './types';
+import type { AuthenticationProps } from './types';
 
-import {computed, onMounted, reactive, ref} from 'vue';
-import {useRouter} from 'vue-router';
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
-import {$t} from '@easyflow/locales';
-import {EasyFlowButton, EasyFlowCheckbox} from '@easyflow-core/shadcn-ui';
+import { $t } from '@easyflow/locales';
+
+import { useEasyFlowForm } from '@easyflow-core/form-ui';
+import { EasyFlowButton, EasyFlowCheckbox } from '@easyflow-core/shadcn-ui';
 
 import Title from './auth-title.vue';
 import ThirdPartyLogin from './third-party-login.vue';
@@ -174,7 +175,10 @@ defineExpose({
     </slot>
 
     <slot name="to-register">
-      <div v-if="showRegister" class="auth-footer-copy mt-5 text-center text-sm">
+      <div
+        v-if="showRegister"
+        class="auth-footer-copy mt-5 text-center text-sm"
+      >
         {{ $t('authentication.accountTip') }}
         <button
           class="auth-inline-action"
@@ -198,8 +202,8 @@ defineExpose({
 }
 
 .auth-form-group :deep(.easyflow-form-ui .text-destructive) {
-  font-size: 0.84rem;
   margin-top: 0.45rem;
+  font-size: 0.84rem;
 }
 
 .auth-login-options {
@@ -207,14 +211,14 @@ defineExpose({
 }
 
 .auth-checkbox {
-  color: hsl(var(--text-muted));
   font-size: 0.92rem;
+  color: hsl(var(--text-muted));
 }
 
 .auth-inline-action {
-  color: hsl(var(--nav-item-active-foreground));
   font-size: 0.92rem;
   font-weight: 500;
+  color: hsl(var(--nav-item-active-foreground));
   transition: opacity 0.18s ease;
 }
 
@@ -228,20 +232,19 @@ defineExpose({
 }
 
 .auth-brand-submit {
-  background:
-    linear-gradient(
-      120deg,
-      rgb(11 111 211) 0%,
-      rgb(22 159 200) 38%,
-      rgb(38 199 193) 62%,
-      rgb(11 111 211) 100%
-    );
+  color: rgb(255 255 255);
+  background: linear-gradient(
+    120deg,
+    rgb(11 111 211) 0%,
+    rgb(22 159 200) 38%,
+    rgb(38 199 193) 62%,
+    rgb(11 111 211) 100%
+  );
   background-size: 200% 200%;
   border: none;
   box-shadow:
-    0 22px 34px -22px rgb(11 111 211 / 0.56),
-    inset 0 1px 0 rgb(255 255 255 / 0.24);
-  color: rgb(255 255 255);
+    0 22px 34px -22px rgb(11 111 211 / 56%),
+    inset 0 1px 0 rgb(255 255 255 / 24%);
   transition:
     transform 180ms ease,
     box-shadow 180ms ease,
@@ -251,8 +254,8 @@ defineExpose({
 
 .auth-brand-submit:hover {
   box-shadow:
-    0 24px 38px -22px rgb(11 111 211 / 0.62),
-    inset 0 1px 0 rgb(255 255 255 / 0.28);
+    0 24px 38px -22px rgb(11 111 211 / 62%),
+    inset 0 1px 0 rgb(255 255 255 / 28%);
   filter: saturate(1.04);
   transform: translateY(-1px);
 }
@@ -262,7 +265,7 @@ defineExpose({
 }
 
 .auth-brand-submit:focus-visible {
-  outline: 2px solid rgb(78 176 255 / 0.8);
+  outline: 2px solid rgb(78 176 255 / 80%);
   outline-offset: 2px;
 }
 
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
index 982c92f..900d556 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import {ref} from 'vue';
-import {useRouter} from 'vue-router';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
-import {$t} from '@easyflow/locales';
+import { $t } from '@easyflow/locales';
 
-import {EasyFlowButton} from '@easyflow-core/shadcn-ui';
+import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
 
-import {useQRCode} from '@vueuse/integrations/useQRCode';
+import { useQRCode } from '@vueuse/integrations/useQRCode';
 
 import Title from './auth-title.vue';
 
@@ -112,25 +112,29 @@ function goToLogin() {
 }
 
 .auth-qrcode-frame {
-  align-items: center;
-  background: linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(244 249 255 / 0.96));
-  border: 1px solid hsl(var(--line-subtle));
-  border-radius: 1.5rem;
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
   display: flex;
+  align-items: center;
   justify-content: center;
-  margin: 0 auto;
   max-width: 17rem;
   padding: 1rem;
+  margin: 0 auto;
+  background: linear-gradient(
+    180deg,
+    rgb(255 255 255 / 92%),
+    rgb(244 249 255 / 96%)
+  );
+  border: 1px solid hsl(var(--line-subtle));
+  border-radius: 1.5rem;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%);
 }
 
 .auth-qrcode-image {
+  width: min(100%, 13rem);
   aspect-ratio: 1;
   border-radius: 1rem;
-  width: min(100%, 13rem);
 }
 
 .dark .auth-qrcode-frame {
-  background: linear-gradient(180deg, rgb(14 22 36 / 0.92), rgb(11 19 31 / 0.96));
+  background: linear-gradient(180deg, rgb(14 22 36 / 92%), rgb(11 19 31 / 96%));
 }
 </style>
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/register.vue b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/register.vue
index 5761e0d..3187587 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/register.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/register.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type {Recordable} from '@easyflow/types';
+import type { Recordable } from '@easyflow/types';
 
-import type {EasyFlowFormSchema} from '@easyflow-core/form-ui';
-import {useEasyFlowForm} from '@easyflow-core/form-ui';
+import type { EasyFlowFormSchema } from '@easyflow-core/form-ui';
 
-import {computed, reactive} from 'vue';
-import {useRouter} from 'vue-router';
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
 
-import {$t} from '@easyflow/locales';
-import {EasyFlowButton} from '@easyflow-core/shadcn-ui';
+import { $t } from '@easyflow/locales';
+
+import { useEasyFlowForm } from '@easyflow-core/form-ui';
+import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
 
 import Title from './auth-title.vue';
 
@@ -127,9 +128,9 @@ defineExpose({
 }
 
 .auth-inline-action {
-  color: hsl(var(--nav-item-active-foreground));
   font-size: 0.92rem;
   font-weight: 500;
+  color: hsl(var(--nav-item-active-foreground));
   transition: opacity 0.18s ease;
 }
 
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue b/easyflow-ui-admin/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue
index a776da4..b818259 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { Card, CardContent, CardHeader, CardTitle } from '@easyflow-core/shadcn-ui';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@easyflow-core/shadcn-ui';
 
 interface Props {
   title: string;
diff --git a/easyflow-ui-admin/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue b/easyflow-ui-admin/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
index a20436e..35c5bda 100644
--- a/easyflow-ui-admin/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
+++ b/easyflow-ui-admin/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
@@ -3,7 +3,12 @@ import type { TabOption } from '@easyflow/types';
 
 import { computed } from 'vue';
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@easyflow-core/shadcn-ui';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@easyflow-core/shadcn-ui';
 
 interface Props {
   tabs?: TabOption[];
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/authentication/authentication.vue b/easyflow-ui-admin/packages/effects/layouts/src/authentication/authentication.vue
index 653f4e4..209b95d 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/authentication/authentication.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/authentication/authentication.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type {ToolbarType} from './types';
+import type { ToolbarType } from './types';
 
-import {computed, onBeforeUnmount, onMounted, ref} from 'vue';
-import {useRoute} from 'vue-router';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
 
-import {$t} from '@easyflow/locales';
-import {preferences, usePreferences} from '@easyflow/preferences';
+import { $t } from '@easyflow/locales';
+import { preferences, usePreferences } from '@easyflow/preferences';
 
-import {Copyright} from '../basic/copyright';
+import { Copyright } from '../basic/copyright';
 import AuthenticationFormView from './form.vue';
 import Toolbar from './toolbar.vue';
 
@@ -107,7 +107,9 @@ onBeforeUnmount(() => {
         class="absolute left-0 top-0 z-20 flex flex-1"
         @click="clickLogo"
       >
-        <div class="auth-brand-chip text-foreground ml-4 mt-4 flex items-center sm:ml-6 sm:mt-6">
+        <div
+          class="auth-brand-chip text-foreground ml-4 mt-4 flex items-center sm:ml-6 sm:mt-6"
+        >
           <img
             v-if="logoSrc"
             :key="logoSrc"
@@ -121,8 +123,12 @@ onBeforeUnmount(() => {
       </div>
     </slot>
 
-    <main class="auth-stage relative z-10 flex min-h-full w-full items-center justify-center px-6 pb-10 pt-28 sm:px-10 sm:pt-32">
-      <div class="auth-stage-inner mx-auto flex w-full max-w-[1080px] flex-col items-center">
+    <main
+      class="auth-stage relative z-10 flex min-h-full w-full items-center justify-center px-6 pb-10 pt-28 sm:px-10 sm:pt-32"
+    >
+      <div
+        class="auth-stage-inner mx-auto flex w-full max-w-[1080px] flex-col items-center"
+      >
         <div
           v-if="isLoginRoute"
           class="auth-stage-copy w-full max-w-[780px] text-center"
@@ -130,7 +136,10 @@ onBeforeUnmount(() => {
           <h1 class="auth-page-title text-foreground">
             {{ stageGreeting }}
           </h1>
-          <div class="auth-stage-switcher text-muted-foreground" aria-label="同一入口能力切换">
+          <div
+            class="auth-stage-switcher text-muted-foreground"
+            aria-label="同一入口能力切换"
+          >
             <span class="auth-stage-switcher-label">在同一入口管理</span>
             <span class="auth-stage-pill" aria-live="polite">
               <Transition mode="out-in" name="auth-pill">
@@ -146,8 +155,8 @@ onBeforeUnmount(() => {
         </div>
 
         <AuthenticationFormView
+          class="auth-window-host w-full"
           :class="[
-            'auth-window-host w-full',
             isLoginRoute ? 'max-w-[25rem] sm:max-w-[26rem]' : 'max-w-[31rem]',
             isLoginRoute ? 'mt-8 sm:mt-10' : 'mt-0 sm:mt-4',
           ]"
@@ -170,69 +179,100 @@ onBeforeUnmount(() => {
 <style scoped>
 .auth-shell {
   background:
-    radial-gradient(circle at top, rgb(255 255 255 / 78%), rgb(255 255 255 / 0) 36%),
+    radial-gradient(
+      circle at top,
+      rgb(255 255 255 / 78%),
+      rgb(255 255 255 / 0%) 36%
+    ),
     linear-gradient(180deg, #f7faff 0%, #eef4fd 55%, #edf3fb 100%);
 }
 
 .auth-shell-grid {
   background-image:
-    linear-gradient(rgb(13 74 160 / 0.06) 1px, transparent 1px),
-    linear-gradient(90deg, rgb(13 74 160 / 0.06) 1px, transparent 1px);
+    linear-gradient(rgb(13 74 160 / 6%) 1px, transparent 1px),
+    linear-gradient(90deg, rgb(13 74 160 / 6%) 1px, transparent 1px);
   background-position: center center;
   background-size: 120px 120px;
-  mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.28), transparent 75%);
   opacity: 0.42;
+  mask-image: linear-gradient(180deg, rgb(0 0 0 / 28%), transparent 75%);
 }
 
 .auth-shell-noise {
   background-image:
-    radial-gradient(circle at 20% 20%, rgb(255 255 255 / 0.35) 0 0.9px, transparent 1.2px),
-    radial-gradient(circle at 80% 30%, rgb(255 255 255 / 0.22) 0 1px, transparent 1.3px),
-    radial-gradient(circle at 40% 70%, rgb(11 111 211 / 0.08) 0 1px, transparent 1.4px);
-  background-size: 180px 180px, 240px 240px, 200px 200px;
+    radial-gradient(
+      circle at 20% 20%,
+      rgb(255 255 255 / 35%) 0 0.9px,
+      transparent 1.2px
+    ),
+    radial-gradient(
+      circle at 80% 30%,
+      rgb(255 255 255 / 22%) 0 1px,
+      transparent 1.3px
+    ),
+    radial-gradient(
+      circle at 40% 70%,
+      rgb(11 111 211 / 8%) 0 1px,
+      transparent 1.4px
+    );
+  background-size:
+    180px 180px,
+    240px 240px,
+    200px 200px;
   mix-blend-mode: soft-light;
   opacity: 0.65;
 }
 
 .auth-glow {
-  border-radius: 9999px;
-  pointer-events: none;
   position: absolute;
+  pointer-events: none;
+  border-radius: 9999px;
 }
 
 .auth-glow-primary {
-  background: radial-gradient(circle, rgb(87 150 255 / 0.24) 0%, rgb(87 150 255 / 0) 68%);
-  height: 26rem;
-  left: 50%;
   top: 4rem;
-  transform: translateX(-50%);
+  left: 50%;
   width: 26rem;
+  height: 26rem;
+  background: radial-gradient(
+    circle,
+    rgb(87 150 255 / 24%) 0%,
+    rgb(87 150 255 / 0%) 68%
+  );
+  transform: translateX(-50%);
 }
 
 .auth-glow-secondary {
-  background: radial-gradient(circle, rgb(36 189 211 / 0.18) 0%, rgb(36 189 211 / 0) 72%);
-  height: 20rem;
-  left: 14%;
   top: 46%;
+  left: 14%;
   width: 20rem;
+  height: 20rem;
+  background: radial-gradient(
+    circle,
+    rgb(36 189 211 / 18%) 0%,
+    rgb(36 189 211 / 0%) 72%
+  );
 }
 
 .auth-glow-tertiary {
-  background: radial-gradient(circle, rgb(66 116 255 / 0.14) 0%, rgb(66 116 255 / 0) 74%);
-  bottom: 8%;
-  height: 22rem;
   right: 10%;
+  bottom: 8%;
   width: 22rem;
+  height: 22rem;
+  background: radial-gradient(
+    circle,
+    rgb(66 116 255 / 14%) 0%,
+    rgb(66 116 255 / 0%) 74%
+  );
 }
 
 .auth-brand-chip {
-  backdrop-filter: blur(12px);
-  background: rgb(255 255 255 / 0.72);
-  border: 1px solid rgb(255 255 255 / 0.84);
-  border-radius: 9999px;
-  box-shadow: 0 20px 44px -32px rgb(11 59 132 / 0.26);
   min-height: 3rem;
   padding: 0.45rem 0.95rem;
+  background: rgb(255 255 255 / 72%);
+  border: 1px solid rgb(255 255 255 / 84%);
+  border-radius: 9999px;
+  box-shadow: 0 20px 44px -32px rgb(11 59 132 / 26%);
+  backdrop-filter: blur(12px);
 }
 
 .auth-brand-name {
@@ -242,19 +282,19 @@ onBeforeUnmount(() => {
 }
 
 .auth-page-title {
+  max-width: 16ch;
+  margin: 0 auto;
   font-size: clamp(2.1rem, 4vw, 3.7rem);
   font-weight: 700;
-  letter-spacing: -0.04em;
   line-height: 1.05;
-  margin: 0 auto;
-  max-width: 16ch;
+  letter-spacing: -0.04em;
 }
 
 .auth-stage-switcher {
-  align-items: center;
   display: inline-flex;
   flex-wrap: wrap;
   gap: 0.7rem;
+  align-items: center;
   justify-content: center;
   margin-top: 1rem;
 }
@@ -265,19 +305,19 @@ onBeforeUnmount(() => {
 }
 
 .auth-stage-pill {
-  align-items: center;
-  backdrop-filter: blur(10px);
-  background: rgb(255 255 255 / 0.74);
-  border: 1px solid rgb(255 255 255 / 0.9);
-  border-radius: 9999px;
-  box-shadow: 0 18px 34px -28px rgb(14 61 132 / 0.3);
-  color: hsl(var(--nav-item-active-foreground));
   display: inline-flex;
-  font-size: 0.95rem;
-  font-weight: 600;
+  align-items: center;
   justify-content: center;
   min-width: 6.5rem;
   padding: 0.55rem 1rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: hsl(var(--nav-item-active-foreground));
+  background: rgb(255 255 255 / 74%);
+  border: 1px solid rgb(255 255 255 / 90%);
+  border-radius: 9999px;
+  box-shadow: 0 18px 34px -28px rgb(14 61 132 / 30%);
+  backdrop-filter: blur(10px);
 }
 
 .auth-stage-pill-text {
@@ -310,13 +350,17 @@ onBeforeUnmount(() => {
 
 .dark.auth-shell {
   background:
-    radial-gradient(circle at top, rgb(35 66 114 / 0.32), rgb(15 22 35 / 0) 40%),
+    radial-gradient(
+      circle at top,
+      rgb(35 66 114 / 32%),
+      rgb(15 22 35 / 0%) 40%
+    ),
     linear-gradient(180deg, #06101b 0%, #08111d 52%, #09131f 100%);
 
   .auth-shell-grid {
     background-image:
-      linear-gradient(rgb(118 160 241 / 0.08) 1px, transparent 1px),
-      linear-gradient(90deg, rgb(118 160 241 / 0.08) 1px, transparent 1px);
+      linear-gradient(rgb(118 160 241 / 8%) 1px, transparent 1px),
+      linear-gradient(90deg, rgb(118 160 241 / 8%) 1px, transparent 1px);
     opacity: 0.36;
   }
 
@@ -325,32 +369,44 @@ onBeforeUnmount(() => {
   }
 
   .auth-brand-chip {
-    background: rgb(11 19 31 / 0.68);
-    border-color: rgb(138 174 255 / 0.18);
-    box-shadow: 0 24px 48px -34px rgb(0 0 0 / 0.52);
+    background: rgb(11 19 31 / 68%);
+    border-color: rgb(138 174 255 / 18%);
+    box-shadow: 0 24px 48px -34px rgb(0 0 0 / 52%);
   }
 
   .auth-stage-switcher-label {
-    color: rgb(195 206 230 / 0.8);
+    color: rgb(195 206 230 / 80%);
   }
 
   .auth-stage-pill {
-    background: rgb(11 19 31 / 0.7);
-    border-color: rgb(138 174 255 / 0.18);
-    box-shadow: 0 18px 34px -28px rgb(0 0 0 / 0.46);
-    color: rgb(144 196 255 / 0.92);
+    color: rgb(144 196 255 / 92%);
+    background: rgb(11 19 31 / 70%);
+    border-color: rgb(138 174 255 / 18%);
+    box-shadow: 0 18px 34px -28px rgb(0 0 0 / 46%);
   }
 
   .auth-glow-primary {
-    background: radial-gradient(circle, rgb(70 120 255 / 0.26) 0%, rgb(70 120 255 / 0) 70%);
+    background: radial-gradient(
+      circle,
+      rgb(70 120 255 / 26%) 0%,
+      rgb(70 120 255 / 0%) 70%
+    );
   }
 
   .auth-glow-secondary {
-    background: radial-gradient(circle, rgb(41 170 201 / 0.18) 0%, rgb(41 170 201 / 0) 72%);
+    background: radial-gradient(
+      circle,
+      rgb(41 170 201 / 18%) 0%,
+      rgb(41 170 201 / 0%) 72%
+    );
   }
 
   .auth-glow-tertiary {
-    background: radial-gradient(circle, rgb(95 128 255 / 0.16) 0%, rgb(95 128 255 / 0) 74%);
+    background: radial-gradient(
+      circle,
+      rgb(95 128 255 / 16%) 0%,
+      rgb(95 128 255 / 0%) 74%
+    );
   }
 }
 
@@ -370,9 +426,9 @@ onBeforeUnmount(() => {
   }
 
   .auth-page-title {
-    margin-left: 0;
-    margin-right: 0;
     max-width: none;
+    margin-right: 0;
+    margin-left: 0;
   }
 
   .auth-stage-switcher {
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/authentication/form.vue b/easyflow-ui-admin/packages/effects/layouts/src/authentication/form.vue
index e9a3310..99154cd 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/authentication/form.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/authentication/form.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import {computed} from 'vue';
-import {useRoute} from 'vue-router';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 
 defineOptions({
   name: 'AuthenticationFormView',
@@ -15,22 +15,23 @@ const isLoginRoute = computed(() => route.path === '/auth/login');
 </script>
 
 <template>
-  <div
-    class="auth-form-wrap relative min-h-full"
-  >
-    <div :class="['auth-window-shell', { 'auth-window-shell-plain': isLoginRoute }]">
+  <div class="auth-form-wrap relative min-h-full">
+    <div
+      class="auth-window-shell"
+      :class="[{ 'auth-window-shell-plain': isLoginRoute }]"
+    >
       <template v-if="!isLoginRoute">
         <div class="auth-window-edge auth-window-edge-top"></div>
         <div class="auth-window-edge auth-window-edge-bottom"></div>
       </template>
       <slot></slot>
 
-      <RouterView v-slot="{ Component, route }">
+      <RouterView v-slot="{ Component, route: currentRoute }">
         <Transition appear mode="out-in" name="slide-right">
           <KeepAlive :include="['Login']">
             <component
               :is="Component"
-              :key="route.fullPath"
+              :key="currentRoute.fullPath"
               class="side-content w-full"
               :data-side="dataSide"
             />
@@ -53,49 +54,60 @@ const isLoginRoute = computed(() => route.path === '/auth/login');
 }
 
 .auth-window-shell {
-  backdrop-filter: blur(22px);
-  background:
-    linear-gradient(180deg, rgb(255 255 255 / 0.96) 0%, rgb(248 251 255 / 0.98) 100%);
-  border: 1px solid rgb(255 255 255 / 0.82);
+  position: relative;
+  padding: 1.25rem;
+  overflow: hidden;
+  background: linear-gradient(
+    180deg,
+    rgb(255 255 255 / 96%) 0%,
+    rgb(248 251 255 / 98%) 100%
+  );
+  border: 1px solid rgb(255 255 255 / 82%);
   border-radius: 2rem;
   box-shadow:
-    0 40px 80px -48px rgb(13 61 132 / 0.38),
-    0 18px 36px -26px rgb(13 61 132 / 0.18);
-  overflow: hidden;
-  padding: 1.25rem;
-  position: relative;
+    0 40px 80px -48px rgb(13 61 132 / 38%),
+    0 18px 36px -26px rgb(13 61 132 / 18%);
+  backdrop-filter: blur(22px);
 }
 
 .auth-window-shell-plain {
-  backdrop-filter: none;
+  padding: 0;
+  overflow: visible;
   background: transparent;
   border: none;
   border-radius: 0;
   box-shadow: none;
-  overflow: visible;
-  padding: 0;
+  backdrop-filter: none;
 }
 
 .auth-window-edge {
-  border-radius: 9999px;
-  pointer-events: none;
   position: absolute;
+  pointer-events: none;
+  border-radius: 9999px;
 }
 
 .auth-window-edge-top {
-  background: linear-gradient(90deg, rgb(11 111 211 / 0.18), rgb(22 159 200 / 0.08));
-  height: 10rem;
-  left: -4rem;
   top: -6rem;
+  left: -4rem;
   width: 14rem;
+  height: 10rem;
+  background: linear-gradient(
+    90deg,
+    rgb(11 111 211 / 18%),
+    rgb(22 159 200 / 8%)
+  );
 }
 
 .auth-window-edge-bottom {
-  background: radial-gradient(circle, rgb(84 132 255 / 0.14) 0%, rgb(84 132 255 / 0) 72%);
-  bottom: -4rem;
-  height: 11rem;
   right: -4rem;
+  bottom: -4rem;
   width: 11rem;
+  height: 11rem;
+  background: radial-gradient(
+    circle,
+    rgb(84 132 255 / 14%) 0%,
+    rgb(84 132 255 / 0%) 72%
+  );
 }
 
 .auth-copyright {
@@ -104,12 +116,15 @@ const isLoginRoute = computed(() => route.path === '/auth/login');
 }
 
 .dark .auth-window-shell {
-  background:
-    linear-gradient(180deg, rgb(10 18 30 / 0.92) 0%, rgb(9 17 29 / 0.96) 100%);
-  border-color: rgb(136 168 235 / 0.16);
+  background: linear-gradient(
+    180deg,
+    rgb(10 18 30 / 92%) 0%,
+    rgb(9 17 29 / 96%) 100%
+  );
+  border-color: rgb(136 168 235 / 16%);
   box-shadow:
-    0 42px 84px -50px rgb(0 0 0 / 0.64),
-    0 18px 36px -28px rgb(0 0 0 / 0.42);
+    0 42px 84px -50px rgb(0 0 0 / 64%),
+    0 18px 36px -28px rgb(0 0 0 / 42%);
 }
 
 .dark .auth-window-shell-plain {
@@ -119,11 +134,19 @@ const isLoginRoute = computed(() => route.path === '/auth/login');
 }
 
 .dark .auth-window-edge-top {
-  background: linear-gradient(90deg, rgb(69 120 255 / 0.22), rgb(28 155 197 / 0.08));
+  background: linear-gradient(
+    90deg,
+    rgb(69 120 255 / 22%),
+    rgb(28 155 197 / 8%)
+  );
 }
 
 .dark .auth-window-edge-bottom {
-  background: radial-gradient(circle, rgb(92 136 255 / 0.16) 0%, rgb(92 136 255 / 0) 72%);
+  background: radial-gradient(
+    circle,
+    rgb(92 136 255 / 16%) 0%,
+    rgb(92 136 255 / 0%) 72%
+  );
 }
 
 @media (max-width: 640px) {
@@ -132,8 +155,8 @@ const isLoginRoute = computed(() => route.path === '/auth/login');
   }
 
   .auth-window-shell {
-    border-radius: 1.6rem;
     padding: 1rem;
+    border-radius: 1.6rem;
   }
 }
 </style>
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/authentication/toolbar.vue b/easyflow-ui-admin/packages/effects/layouts/src/authentication/toolbar.vue
index eaf825b..74a8995 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/authentication/toolbar.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/authentication/toolbar.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type {ToolbarType} from './types';
+import type { ToolbarType } from './types';
 
-import {computed} from 'vue';
+import { computed } from 'vue';
 
-import {preferences} from '@easyflow/preferences';
+import { preferences } from '@easyflow/preferences';
 
 import {
   AuthenticationColorToggle,
@@ -48,17 +48,17 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
 
 <style scoped>
 .auth-toolbar {
-  backdrop-filter: blur(10px);
-  background: rgb(255 255 255 / 0.72);
-  border: 1px solid rgb(255 255 255 / 0.78);
-  border-radius: 9999px;
-  box-shadow: 0 20px 42px -30px rgb(14 55 124 / 0.28);
   padding: 0.25rem 0.58rem;
+  background: rgb(255 255 255 / 72%);
+  border: 1px solid rgb(255 255 255 / 78%);
+  border-radius: 9999px;
+  box-shadow: 0 20px 42px -30px rgb(14 55 124 / 28%);
+  backdrop-filter: blur(10px);
 }
 
 :deep(.dark) .auth-toolbar {
   background: rgb(11 19 34 / 66%);
   border-color: rgb(122 167 255 / 18%);
-  box-shadow: 0 20px 40px -28px rgb(0 0 0 / 0.46);
+  box-shadow: 0 20px 40px -28px rgb(0 0 0 / 46%);
 }
 </style>
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/basic/content/content.vue b/easyflow-ui-admin/packages/effects/layouts/src/basic/content/content.vue
index 8a42b0f..c27660a 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/basic/content/content.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/basic/content/content.vue
@@ -1,16 +1,17 @@
 <script lang="ts" setup>
-import type {VNode} from 'vue';
-import {computed} from 'vue';
+import type { VNode } from 'vue';
 import type {
   RouteLocationNormalizedLoaded,
   RouteLocationNormalizedLoadedGeneric,
 } from 'vue-router';
-import {RouterView} from 'vue-router';
 
-import {preferences, usePreferences} from '@easyflow/preferences';
-import {getTabKey, storeToRefs, useTabbarStore} from '@easyflow/stores';
+import { computed } from 'vue';
+import { RouterView } from 'vue-router';
 
-import {IFrameRouterView} from '../../iframe';
+import { preferences, usePreferences } from '@easyflow/preferences';
+import { getTabKey, storeToRefs, useTabbarStore } from '@easyflow/stores';
+
+import { IFrameRouterView } from '../../iframe';
 
 defineOptions({ name: 'LayoutContent' });
 
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/basic/header/header.vue b/easyflow-ui-admin/packages/effects/layouts/src/basic/header/header.vue
index 7293446..ca800d9 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/basic/header/header.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/basic/header/header.vue
@@ -1,13 +1,17 @@
 <script lang="ts" setup>
-import type {CSSProperties} from 'vue';
-import {computed, useSlots} from 'vue';
+import type { CSSProperties } from 'vue';
 
-import {useRefresh} from '@easyflow/hooks';
-import {RotateCw} from '@easyflow/icons';
-import {preferences, usePreferences} from '@easyflow/preferences';
-import {useAccessStore} from '@easyflow/stores';
+import { computed, useSlots } from 'vue';
 
-import {EasyFlowFullScreen, EasyFlowIconButton} from '@easyflow-core/shadcn-ui';
+import { useRefresh } from '@easyflow/hooks';
+import { RotateCw } from '@easyflow/icons';
+import { preferences, usePreferences } from '@easyflow/preferences';
+import { useAccessStore } from '@easyflow/stores';
+
+import {
+  EasyFlowFullScreen,
+  EasyFlowIconButton,
+} from '@easyflow-core/shadcn-ui';
 
 import {
   GlobalSearch,
@@ -174,16 +178,28 @@ function clearPreferencesAndLogout() {
           />
         </template>
         <template v-else-if="slot.name === 'theme-toggle'">
-          <ThemeToggle :class="toolbarButtonClass" :style="toolbarButtonStyle" />
+          <ThemeToggle
+            :class="toolbarButtonClass"
+            :style="toolbarButtonStyle"
+          />
         </template>
         <template v-else-if="slot.name === 'language-toggle'">
-          <LanguageToggle :class="toolbarButtonClass" :style="toolbarButtonStyle" />
+          <LanguageToggle
+            :class="toolbarButtonClass"
+            :style="toolbarButtonStyle"
+          />
         </template>
         <template v-else-if="slot.name === 'fullscreen'">
-          <EasyFlowFullScreen :class="toolbarButtonClass" :style="toolbarButtonStyle" />
+          <EasyFlowFullScreen
+            :class="toolbarButtonClass"
+            :style="toolbarButtonStyle"
+          />
         </template>
         <template v-else-if="slot.name === 'timezone'">
-          <TimezoneButton :class="toolbarButtonClass" :style="toolbarButtonStyle" />
+          <TimezoneButton
+            :class="toolbarButtonClass"
+            :style="toolbarButtonStyle"
+          />
         </template>
       </slot>
     </template>
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts b/easyflow-ui-admin/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
index 50f1a1b..90cf62c 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
+++ b/easyflow-ui-admin/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
@@ -1,13 +1,13 @@
-import type {MenuRecordRaw} from '@easyflow/types';
+import type { MenuRecordRaw } from '@easyflow/types';
 
-import {computed, onBeforeMount, ref, watch} from 'vue';
-import {useRoute} from 'vue-router';
+import { computed, onBeforeMount, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
-import {preferences, usePreferences} from '@easyflow/preferences';
-import {useAccessStore} from '@easyflow/stores';
-import {findRootMenuByPath} from '@easyflow/utils';
+import { preferences, usePreferences } from '@easyflow/preferences';
+import { useAccessStore } from '@easyflow/stores';
+import { findRootMenuByPath } from '@easyflow/utils';
 
-import {useNavigation} from './use-navigation';
+import { useNavigation } from './use-navigation';
 
 function useMixedMenu() {
   const { navigation, prefetch, willOpenedByWindow } = useNavigation();
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/widgets/global-search/search-panel.vue b/easyflow-ui-admin/packages/effects/layouts/src/widgets/global-search/search-panel.vue
index 4bf581a..b538085 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/widgets/global-search/search-panel.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/widgets/global-search/search-panel.vue
@@ -237,10 +237,7 @@ onMounted(() => {
               class="block truncate text-sm font-medium leading-6 text-[hsl(var(--text-strong))]"
             >
               <template
-                v-for="chunk in getHighlightedChunks(
-                  item.name || '',
-                  keyword,
-                )"
+                v-for="chunk in getHighlightedChunks(item.name || '', keyword)"
                 :key="`${item.path}-${chunk.text}-${chunk.matched}`"
               >
                 <span
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/widgets/language-toggle.vue b/easyflow-ui-admin/packages/effects/layouts/src/widgets/language-toggle.vue
index 25f53e3..a6ac3f2 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/widgets/language-toggle.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/widgets/language-toggle.vue
@@ -6,7 +6,10 @@ import { Languages } from '@easyflow/icons';
 import { loadLocaleMessages } from '@easyflow/locales';
 import { preferences, updatePreferences } from '@easyflow/preferences';
 
-import { EasyFlowDropdownRadioMenu, EasyFlowIconButton } from '@easyflow-core/shadcn-ui';
+import {
+  EasyFlowDropdownRadioMenu,
+  EasyFlowIconButton,
+} from '@easyflow-core/shadcn-ui';
 
 defineOptions({
   name: 'LanguageToggle',
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/widgets/layout-toggle.vue b/easyflow-ui-admin/packages/effects/layouts/src/widgets/layout-toggle.vue
index b01d902..cbfd342 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/widgets/layout-toggle.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/widgets/layout-toggle.vue
@@ -13,7 +13,10 @@ import {
   usePreferences,
 } from '@easyflow/preferences';
 
-import { EasyFlowDropdownRadioMenu, EasyFlowIconButton } from '@easyflow-core/shadcn-ui';
+import {
+  EasyFlowDropdownRadioMenu,
+  EasyFlowIconButton,
+} from '@easyflow-core/shadcn-ui';
 
 defineOptions({
   name: 'AuthenticationLayoutToggle',
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/checkbox-item.vue b/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/checkbox-item.vue
index 227414c..944fa1a 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/checkbox-item.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/checkbox-item.vue
@@ -5,7 +5,10 @@ import { useSlots } from 'vue';
 
 import { CircleHelp } from '@easyflow/icons';
 
-import { EasyFlowCheckButtonGroup, EasyFlowTooltip } from '@easyflow-core/shadcn-ui';
+import {
+  EasyFlowCheckButtonGroup,
+  EasyFlowTooltip,
+} from '@easyflow-core/shadcn-ui';
 
 defineOptions({
   name: 'PreferenceCheckboxItem',
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue b/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
index 607b068..cf35985 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
@@ -5,7 +5,7 @@ import { useSlots } from 'vue';
 
 import { CircleHelp, CircleX } from '@easyflow/icons';
 
-import { Input, EasyFlowTooltip } from '@easyflow-core/shadcn-ui';
+import { EasyFlowTooltip, Input } from '@easyflow-core/shadcn-ui';
 
 defineOptions({
   name: 'PreferenceSelectItem',
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue b/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue
index 4987abf..d798793 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue
@@ -6,12 +6,12 @@ import { useSlots } from 'vue';
 import { CircleHelp } from '@easyflow/icons';
 
 import {
+  EasyFlowTooltip,
   NumberField,
   NumberFieldContent,
   NumberFieldDecrement,
   NumberFieldIncrement,
   NumberFieldInput,
-  EasyFlowTooltip,
 } from '@easyflow-core/shadcn-ui';
 
 defineOptions({
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue b/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue
index af27368..16e0981 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue
@@ -6,12 +6,12 @@ import { useSlots } from 'vue';
 import { CircleHelp } from '@easyflow/icons';
 
 import {
+  EasyFlowTooltip,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-  EasyFlowTooltip,
 } from '@easyflow-core/shadcn-ui';
 
 defineOptions({
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue b/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
index 224b601..00d78c4 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
@@ -3,7 +3,7 @@ import { useSlots } from 'vue';
 
 import { CircleHelp } from '@easyflow/icons';
 
-import { Switch, EasyFlowTooltip } from '@easyflow-core/shadcn-ui';
+import { EasyFlowTooltip, Switch } from '@easyflow-core/shadcn-ui';
 
 defineOptions({
   name: 'PreferenceSwitchItem',
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue b/easyflow-ui-admin/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue
index 10b394b..20887cc 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue
@@ -10,9 +10,9 @@ import {
 } from '@easyflow/preferences';
 
 import {
+  EasyFlowTooltip,
   ToggleGroup,
   ToggleGroupItem,
-  EasyFlowTooltip,
 } from '@easyflow-core/shadcn-ui';
 
 import ThemeButton from './theme-button.vue';
diff --git a/easyflow-ui-admin/packages/effects/layouts/src/widgets/timezone/timezone-button.vue b/easyflow-ui-admin/packages/effects/layouts/src/widgets/timezone/timezone-button.vue
index 57a32b2..0dff074 100644
--- a/easyflow-ui-admin/packages/effects/layouts/src/widgets/timezone/timezone-button.vue
+++ b/easyflow-ui-admin/packages/effects/layouts/src/widgets/timezone/timezone-button.vue
@@ -7,9 +7,9 @@ import { useTimezoneStore } from '@easyflow/stores';
 
 import { useEasyFlowModal } from '@easyflow-core/popup-ui';
 import {
+  EasyFlowIconButton,
   RadioGroup,
   RadioGroupItem,
-  EasyFlowIconButton,
 } from '@easyflow-core/shadcn-ui';
 
 const TimezoneIcon = createIconifyIcon('fluent-mdl2:world-clock');
diff --git a/easyflow-ui-admin/packages/effects/plugins/src/vxe-table/types.ts b/easyflow-ui-admin/packages/effects/plugins/src/vxe-table/types.ts
index dc90008..da0b47f 100644
--- a/easyflow-ui-admin/packages/effects/plugins/src/vxe-table/types.ts
+++ b/easyflow-ui-admin/packages/effects/plugins/src/vxe-table/types.ts
@@ -9,7 +9,10 @@ import type { Ref } from 'vue';
 
 import type { ClassType, DeepPartial } from '@easyflow/types';
 
-import type { BaseFormComponentType, EasyFlowFormProps } from '@easyflow-core/form-ui';
+import type {
+  BaseFormComponentType,
+  EasyFlowFormProps,
+} from '@easyflow-core/form-ui';
 
 import type { VxeGridApi } from './api';
 
diff --git a/easyflow-ui-admin/packages/icons/src/svg/load.ts b/easyflow-ui-admin/packages/icons/src/svg/load.ts
index ff18ecd..aa5f840 100644
--- a/easyflow-ui-admin/packages/icons/src/svg/load.ts
+++ b/easyflow-ui-admin/packages/icons/src/svg/load.ts
@@ -1,6 +1,7 @@
 import type { IconifyIconStructure } from '@easyflow-core/icons';
 
 import { addIcon } from '@easyflow-core/icons';
+
 import chatHistorySvg from './icons/chat-history.svg?raw';
 
 let loaded = false;
diff --git a/easyflow-ui-admin/packages/locales/package.json b/easyflow-ui-admin/packages/locales/package.json
index 8c0af8c..617c92e 100644
--- a/easyflow-ui-admin/packages/locales/package.json
+++ b/easyflow-ui-admin/packages/locales/package.json
@@ -13,8 +13,8 @@
     }
   },
   "dependencies": {
-    "@intlify/core-base": "catalog:",
     "@easyflow-core/composables": "workspace:*",
+    "@intlify/core-base": "catalog:",
     "vue": "catalog:",
     "vue-i18n": "catalog:"
   }
diff --git a/easyflow-ui-admin/packages/styles/src/ele/index.css b/easyflow-ui-admin/packages/styles/src/ele/index.css
index d388bd1..92c03bc 100644
--- a/easyflow-ui-admin/packages/styles/src/ele/index.css
+++ b/easyflow-ui-admin/packages/styles/src/ele/index.css
@@ -63,13 +63,13 @@ html .el-loading-mask {
 }
 
 .el-table td.el-table__cell {
-  box-shadow: inset 0px -1px 0px 0px var(--table-cell-shadow-color);
+  box-shadow: inset 0 -1px 0 0 var(--table-cell-shadow-color);
 }
 
-.el-table--border .el-table__inner-wrapper:after,
-.el-table--border:after,
-.el-table--border:before,
-.el-table__inner-wrapper:before {
+.el-table--border .el-table__inner-wrapper::after,
+.el-table--border::after,
+.el-table--border::before,
+.el-table__inner-wrapper::before {
   --el-table-border-color: transparent;
 }
 
@@ -84,13 +84,13 @@ html .el-loading-mask {
 }
 
 .el-button {
-  --el-color-primary: hsl(var(--primary))
+  --el-color-primary: hsl(var(--primary));
 }
 
 .el-tooltip {
   max-width: 50vw;
 }
 
-.el-table .el-button.is-link>span {
+.el-table .el-button.is-link > span {
   font-weight: 400;
 }
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/.eslintrc.cjs b/easyflow-ui-admin/packages/tinyflow-ui/.eslintrc.cjs
index a6e9733..1c6f6c4 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/.eslintrc.cjs
+++ b/easyflow-ui-admin/packages/tinyflow-ui/.eslintrc.cjs
@@ -1,5 +1,5 @@
 module.exports = {
-    rules: {
-        '@typescript-eslint/no-explicit-any': ['off']
-    }
+  rules: {
+    '@typescript-eslint/no-explicit-any': ['off'],
+  },
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/Tinyflow.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/Tinyflow.ts
index f1c75ae..9c4a0b8 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/Tinyflow.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/Tinyflow.ts
@@ -1,157 +1,163 @@
-import type {useSvelteFlow} from '@xyflow/svelte';
-import {componentName} from './consts';
-import type {TinyflowData, TinyflowOptions, TinyflowTheme} from './types';
+import type { useSvelteFlow } from '@xyflow/svelte';
+import { componentName } from './consts';
+import type { TinyflowData, TinyflowOptions, TinyflowTheme } from './types';
 
 type FlowInstance = ReturnType<typeof useSvelteFlow>;
 
 export class Tinyflow {
-    private options!: TinyflowOptions;
-    private rootEl!: Element;
-    private svelteFlowInstance!: FlowInstance;
-    private tinyflowEl!: HTMLElement & {
-        options: TinyflowOptions;
-        onInit: (svelteFlowInstance: FlowInstance) => void;
+  private options!: TinyflowOptions;
+  private rootEl!: Element;
+  private svelteFlowInstance!: FlowInstance;
+  private tinyflowEl!: HTMLElement & {
+    options: TinyflowOptions;
+    onInit: (svelteFlowInstance: FlowInstance) => void;
+  };
+
+  constructor(options: TinyflowOptions) {
+    if (
+      typeof options.element !== 'string' &&
+      !(options.element instanceof Element)
+    ) {
+      throw new Error('element must be a string or Element');
+    }
+    this._setOptions(options);
+    this._init();
+  }
+
+  private _init() {
+    if (typeof this.options.element === 'string') {
+      this.rootEl = document.querySelector(this.options.element)!;
+      if (!this.rootEl) {
+        throw new Error(
+          `element not found by document.querySelector('${this.options.element}')`,
+        );
+      }
+    } else if (this.options.element instanceof Element) {
+      this.rootEl = this.options.element;
+    } else {
+      throw new Error('element must be a string or Element');
+    }
+
+    this.tinyflowEl = this._createTinyflowElement();
+    this.rootEl.appendChild(this.tinyflowEl);
+  }
+
+  private _setOptions(options: TinyflowOptions) {
+    this.options = {
+      theme: options.theme || 'light',
+      ...options,
     };
+  }
 
-    constructor(options: TinyflowOptions) {
-        if (typeof options.element !== 'string' && !(options.element instanceof Element)) {
-            throw new Error('element must be a string or Element');
-        }
-        this._setOptions(options);
-        this._init();
+  private _getFlowInstance() {
+    if (!this.svelteFlowInstance) {
+      console.warn('Tinyflow instance is not initialized');
+      return null;
+    }
+    return this.svelteFlowInstance;
+  }
+
+  private _applyThemeClass(targetEl: Element, theme?: TinyflowTheme) {
+    targetEl.classList.remove('tf-theme-light', 'tf-theme-dark');
+    targetEl.classList.add(
+      theme === 'dark' ? 'tf-theme-dark' : 'tf-theme-light',
+    );
+  }
+
+  private _createTinyflowElement() {
+    const tinyflowEl = document.createElement(componentName) as HTMLElement & {
+      options: TinyflowOptions;
+      onInit: (svelteFlowInstance: FlowInstance) => void;
+    };
+    tinyflowEl.style.display = 'block';
+    tinyflowEl.style.width = '100%';
+    tinyflowEl.style.height = '100%';
+    this._applyThemeClass(tinyflowEl, this.options.theme);
+
+    tinyflowEl.options = this.options;
+    tinyflowEl.onInit = (svelteFlowInstance: FlowInstance) => {
+      this.svelteFlowInstance = svelteFlowInstance;
+    };
+    return tinyflowEl;
+  }
+
+  getOptions() {
+    return this.options;
+  }
+
+  getData() {
+    const flow = this._getFlowInstance();
+    if (!flow) {
+      return null;
+    }
+    return flow.toObject();
+  }
+
+  async focusNode(
+    nodeId: string,
+    options?: { duration?: number; zoom?: number },
+  ) {
+    const flow = this._getFlowInstance();
+    if (!flow) {
+      return false;
     }
 
-    private _init() {
-        if (typeof this.options.element === 'string') {
-            this.rootEl = document.querySelector(this.options.element)!;
-            if (!this.rootEl) {
-                throw new Error(
-                    `element not found by document.querySelector('${this.options.element}')`
-                );
-            }
-        } else if (this.options.element instanceof Element) {
-            this.rootEl = this.options.element;
-        } else {
-            throw new Error('element must be a string or Element');
-        }
-
-        this.tinyflowEl = this._createTinyflowElement();
-        this.rootEl.appendChild(this.tinyflowEl);
+    const targetNode = flow.getNode(nodeId);
+    if (!targetNode) {
+      return false;
     }
 
-    private _setOptions(options: TinyflowOptions) {
-        this.options = {
-            theme: options.theme || 'light',
-            ...options
-        };
+    // Keep only the target node selected so the canvas has a clear visual focus.
+    flow.getNodes().forEach((node) => {
+      flow.updateNode(node.id, { selected: node.id === nodeId });
+    });
+
+    const internalNode = flow.getInternalNode(nodeId) as any;
+    const absolutePosition = internalNode?.internals?.positionAbsolute ||
+      (targetNode as any)?.positionAbsolute ||
+      targetNode.position || { x: 0, y: 0 };
+    const width =
+      internalNode?.measured?.width ||
+      (targetNode as any)?.measured?.width ||
+      (targetNode as any)?.width ||
+      260;
+    const height =
+      internalNode?.measured?.height ||
+      (targetNode as any)?.measured?.height ||
+      (targetNode as any)?.height ||
+      120;
+
+    const centerX = absolutePosition.x + width / 2;
+    const centerY = absolutePosition.y + height / 2;
+    const nextZoom = options?.zoom ?? Math.max(flow.getZoom(), 1);
+
+    await flow.setCenter(centerX, centerY, {
+      zoom: nextZoom,
+      duration: options?.duration ?? 280,
+    });
+
+    return true;
+  }
+
+  setTheme(theme: TinyflowTheme) {
+    this.options.theme = theme;
+    if (this.tinyflowEl) {
+      this._applyThemeClass(this.tinyflowEl, theme);
     }
+  }
 
-    private _getFlowInstance() {
-        if (!this.svelteFlowInstance) {
-            console.warn('Tinyflow instance is not initialized');
-            return null;
-        }
-        return this.svelteFlowInstance;
-    }
-
-    private _applyThemeClass(targetEl: Element, theme?: TinyflowTheme) {
-        targetEl.classList.remove('tf-theme-light', 'tf-theme-dark');
-        targetEl.classList.add(theme === 'dark' ? 'tf-theme-dark' : 'tf-theme-light');
-    }
-
-    private _createTinyflowElement() {
-        const tinyflowEl = document.createElement(componentName) as HTMLElement & {
-            options: TinyflowOptions;
-            onInit: (svelteFlowInstance: FlowInstance) => void;
-        };
-        tinyflowEl.style.display = 'block';
-        tinyflowEl.style.width = '100%';
-        tinyflowEl.style.height = '100%';
-        this._applyThemeClass(tinyflowEl, this.options.theme);
-
-        tinyflowEl.options = this.options;
-        tinyflowEl.onInit = (svelteFlowInstance: FlowInstance) => {
-            this.svelteFlowInstance = svelteFlowInstance;
-        };
-        return tinyflowEl;
-    }
-
-    getOptions() {
-        return this.options;
-    }
-
-    getData() {
-        const flow = this._getFlowInstance();
-        if (!flow) {
-            return null;
-        }
-        return flow.toObject();
-    }
-
-    async focusNode(nodeId: string, options?: { duration?: number; zoom?: number }) {
-        const flow = this._getFlowInstance();
-        if (!flow) {
-            return false;
-        }
-
-        const targetNode = flow.getNode(nodeId);
-        if (!targetNode) {
-            return false;
-        }
-
-        // Keep only the target node selected so the canvas has a clear visual focus.
-        flow.getNodes().forEach((node) => {
-            flow.updateNode(node.id, { selected: node.id === nodeId });
-        });
-
-        const internalNode = flow.getInternalNode(nodeId) as any;
-        const absolutePosition =
-            internalNode?.internals?.positionAbsolute ||
-            (targetNode as any)?.positionAbsolute ||
-            targetNode.position ||
-            { x: 0, y: 0 };
-        const width =
-            internalNode?.measured?.width ||
-            (targetNode as any)?.measured?.width ||
-            (targetNode as any)?.width ||
-            260;
-        const height =
-            internalNode?.measured?.height ||
-            (targetNode as any)?.measured?.height ||
-            (targetNode as any)?.height ||
-            120;
-
-        const centerX = absolutePosition.x + width / 2;
-        const centerY = absolutePosition.y + height / 2;
-        const nextZoom = options?.zoom ?? Math.max(flow.getZoom(), 1);
-
-        await flow.setCenter(centerX, centerY, {
-            zoom: nextZoom,
-            duration: options?.duration ?? 280
-        });
-
-        return true;
-    }
-
-    setTheme(theme: TinyflowTheme) {
-        this.options.theme = theme;
-        if (this.tinyflowEl) {
-            this._applyThemeClass(this.tinyflowEl, theme);
-        }
-    }
-
-    setData(data: TinyflowData) {
-        this.options.data = data;
-
-        this.tinyflowEl = this._createTinyflowElement();
-
-        this.destroy();
-        this.rootEl.appendChild(this.tinyflowEl);
-    }
-
-    destroy() {
-        while (this.rootEl.firstChild) {
-            this.rootEl.removeChild(this.rootEl.firstChild);
-        }
+  setData(data: TinyflowData) {
+    this.options.data = data;
+
+    this.tinyflowEl = this._createTinyflowElement();
+
+    this.destroy();
+    this.rootEl.appendChild(this.tinyflowEl);
+  }
+
+  destroy() {
+    while (this.rootEl.firstChild) {
+      this.rootEl.removeChild(this.rootEl.firstChild);
     }
+  }
 }
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/base/index.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/base/index.ts
index 6222aa0..7b36fe7 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/base/index.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/base/index.ts
@@ -13,17 +13,17 @@ import MenuButton from './menu-button.svelte';
 import MixedInput from './mixed-input.svelte';
 
 export {
-    Button,
-    Checkbox,
-    Chosen,
-    Input,
-    Textarea,
-    Tabs,
-    Collapse,
-    Render,
-    Select,
-    FloatingTrigger,
-    Heading,
-    MenuButton,
-    MixedInput
+  Button,
+  Checkbox,
+  Chosen,
+  Input,
+  Textarea,
+  Tabs,
+  Collapse,
+  Render,
+  Select,
+  FloatingTrigger,
+  Heading,
+  MenuButton,
+  MixedInput,
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/nodes/LoopNode.svelte b/easyflow-ui-admin/packages/tinyflow-ui/src/components/nodes/LoopNode.svelte
index 413758f..c6e4cdb 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/nodes/LoopNode.svelte
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/nodes/LoopNode.svelte
@@ -39,7 +39,7 @@
 
     {#snippet handle()}
         <Handle type="source" position={Position.Bottom} id="loop_handle" style="bottom: -12px;width: 100px"
-                class="loop_handle_wrapper" />
+                class="loop-handle-wrapper" />
     {/snippet}
 
     <div class="heading">
@@ -75,7 +75,7 @@
     align-items: center;
   }
 
-  :global(.loop_handle_wrapper ) {
+  :global(.loop-handle-wrapper) {
     &::after {
       //display: none;
       content: '循环体';
@@ -92,4 +92,3 @@
   }
 
 </style>
-
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/nodes/index.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/nodes/index.ts
index df03e1f..e24f4b2 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/nodes/index.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/nodes/index.ts
@@ -1,4 +1,4 @@
-import type {NodeTypes} from '@xyflow/svelte';
+import type { NodeTypes } from '@xyflow/svelte';
 import StartNode from './StartNode.svelte';
 import EndNode from './EndNode.svelte';
 import LLMNode from './LLMNode.svelte';
@@ -15,15 +15,15 @@ import ConditionNode from './ConditionNode.svelte';
  * @description 节点类型（en: node type）
  */
 export const nodeTypes = {
-    startNode: StartNode,
-    codeNode: CodeNode,
-    confirmNode: ConfirmNode,
-    llmNode: LLMNode,
-    templateNode: TemplateNode,
-    httpNode: HttpNode,
-    knowledgeNode: KnowledgeNode,
-    searchEngineNode: SearchEngineNode,
-    loopNode: LoopNode,
-    conditionNode: ConditionNode,
-    endNode: EndNode
+  startNode: StartNode,
+  codeNode: CodeNode,
+  confirmNode: ConfirmNode,
+  llmNode: LLMNode,
+  templateNode: TemplateNode,
+  httpNode: HttpNode,
+  knowledgeNode: KnowledgeNode,
+  searchEngineNode: SearchEngineNode,
+  loopNode: LoopNode,
+  conditionNode: ConditionNode,
+  endNode: EndNode,
 } as any as NodeTypes;
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/IdGen.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/IdGen.ts
index ad0f550..0ff8cdc 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/IdGen.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/IdGen.ts
@@ -1,12 +1,16 @@
 export const genShortId = (length = 16) => {
-    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    const array = new Uint8Array(length);
-    crypto.getRandomValues(array);
-    return Array.from(array, (byte) => chars[byte % chars.length]).join('');
+  const chars =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const array = new Uint8Array(length);
+  crypto.getRandomValues(array);
+  return Array.from(array, (byte) => chars[byte % chars.length]).join('');
 };
 
 export const genUuid = () => {
-    return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c: any) =>
-        (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
-    );
+  return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c: any) =>
+    (
+      c ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+    ).toString(16),
+  );
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/NodeUtils.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/NodeUtils.ts
index 339dc87..c70b9c2 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/NodeUtils.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/NodeUtils.ts
@@ -1,26 +1,26 @@
-import {getContext} from 'svelte';
-import {useNodesData, useSvelteFlow} from '@xyflow/svelte';
-import type {TinyflowOptions} from '#types';
+import { getContext } from 'svelte';
+import { useNodesData, useSvelteFlow } from '@xyflow/svelte';
+import type { TinyflowOptions } from '#types';
 
 export const getCurrentNodeId = () => {
-    return getContext<string>('svelteflow__node_id');
+  return getContext<string>('svelteflow__node_id');
 };
 
 export const getOptions = () => {
-    return getContext<TinyflowOptions>('tinyflow_options');
+  return getContext<TinyflowOptions>('tinyflow_options');
 };
 
 export const useCurrentNodeData = () => {
-    const currentNodeId = getCurrentNodeId();
-    return useNodesData<any>(currentNodeId);
+  const currentNodeId = getCurrentNodeId();
+  return useNodesData<any>(currentNodeId);
 };
 
 export const useUpdateNodeData = () => {
-    const { updateNodeData } = useSvelteFlow();
-    const currentNodeId = getCurrentNodeId();
-    return {
-        updateNodeData: (data: any) => {
-            updateNodeData(currentNodeId, data);
-        }
-    };
+  const { updateNodeData } = useSvelteFlow();
+  const currentNodeId = getCurrentNodeId();
+  return {
+    updateNodeData: (data: any) => {
+      updateNodeData(currentNodeId, data);
+    },
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/codeCompletion.test.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/codeCompletion.test.ts
index f85fc92..ee179f8 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/codeCompletion.test.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/codeCompletion.test.ts
@@ -1,83 +1,109 @@
 import { describe, expect, it } from 'vitest';
 
 import {
-    createBusinessCompletions,
-    normalizeCodeEngine,
-    resolveBusinessCompletionContext,
-    shouldAutoAppendCallParens,
-    shouldSkipBusinessCompletion
+  createBusinessCompletions,
+  normalizeCodeEngine,
+  resolveBusinessCompletionContext,
+  shouldAutoAppendCallParens,
+  shouldSkipBusinessCompletion,
 } from './codeCompletion';
 
 describe('codeCompletion utils', () => {
-    it('should normalize engine aliases', () => {
-        expect(normalizeCodeEngine('py')).toBe('python');
-        expect(normalizeCodeEngine('python')).toBe('python');
-        expect(normalizeCodeEngine('js')).toBe('javascript');
-        expect(normalizeCodeEngine('javascript')).toBe('javascript');
-        expect(normalizeCodeEngine('')).toBe('javascript');
+  it('should normalize engine aliases', () => {
+    expect(normalizeCodeEngine('py')).toBe('python');
+    expect(normalizeCodeEngine('python')).toBe('python');
+    expect(normalizeCodeEngine('js')).toBe('javascript');
+    expect(normalizeCodeEngine('javascript')).toBe('javascript');
+    expect(normalizeCodeEngine('')).toBe('javascript');
+  });
+
+  it('should create business completion list with stable priority and dedupe', () => {
+    const completions = createBusinessCompletions('python', [
+      { name: 'input.text', resolved: true },
+      { name: 'input.text', resolved: false },
+      { name: 'question', resolved: false },
+    ]);
+
+    expect(completions[0]).toMatchObject({
+      label: '_result',
+      type: 'variable',
     });
 
-    it('should create business completion list with stable priority and dedupe', () => {
-        const completions = createBusinessCompletions('python', [
-            { name: 'input.text', resolved: true },
-            { name: 'input.text', resolved: false },
-            { name: 'question', resolved: false }
-        ]);
-
-        expect(completions[0]).toMatchObject({
-            label: '_result',
-            type: 'variable'
-        });
-
-        expect(completions.filter((item) => item.label === 'input.text').length).toBe(1);
-        expect(completions.find((item) => item.label === 'input.text')).toMatchObject({
-            apply: '{{input.text}}',
-            detail: '参数模板'
-        });
-        expect(completions.find((item) => item.label === 'question')).toMatchObject({
-            apply: '{{question}}',
-            detail: '参数模板（未映射）'
-        });
-
-        expect(completions.some((item) => item.type === 'snippet' && item.label === 'if-else')).toBe(true);
+    expect(
+      completions.filter((item) => item.label === 'input.text').length,
+    ).toBe(1);
+    expect(
+      completions.find((item) => item.label === 'input.text'),
+    ).toMatchObject({
+      apply: '{{input.text}}',
+      detail: '参数模板',
     });
+    expect(completions.find((item) => item.label === 'question')).toMatchObject(
+      {
+        apply: '{{question}}',
+        detail: '参数模板（未映射）',
+      },
+    );
 
-    it('should detect blocked nodes for comment/string/property contexts', () => {
-        expect(shouldSkipBusinessCompletion('Comment')).toBe(true);
-        expect(shouldSkipBusinessCompletion('LineComment')).toBe(true);
-        expect(shouldSkipBusinessCompletion('String')).toBe(true);
-        expect(shouldSkipBusinessCompletion('TemplateString')).toBe(true);
-        expect(shouldSkipBusinessCompletion('PropertyName')).toBe(true);
-        expect(shouldSkipBusinessCompletion('VariableName')).toBe(false);
-    });
+    expect(
+      completions.some(
+        (item) => item.type === 'snippet' && item.label === 'if-else',
+      ),
+    ).toBe(true);
+  });
 
-    it('should resolve template context for parameter token completion', () => {
-        const source = "value = {{input.use";
-        const pos = source.length;
-        const context = resolveBusinessCompletionContext(source, pos);
-        expect(context).toBeTruthy();
-        expect(context?.from).toBe(8);
-        expect(context?.validFor).toBeInstanceOf(RegExp);
-        expect(context?.validFor.source).toBe('^[\\w.]*$');
-    });
+  it('should detect blocked nodes for comment/string/property contexts', () => {
+    expect(shouldSkipBusinessCompletion('Comment')).toBe(true);
+    expect(shouldSkipBusinessCompletion('LineComment')).toBe(true);
+    expect(shouldSkipBusinessCompletion('String')).toBe(true);
+    expect(shouldSkipBusinessCompletion('TemplateString')).toBe(true);
+    expect(shouldSkipBusinessCompletion('PropertyName')).toBe(true);
+    expect(shouldSkipBusinessCompletion('VariableName')).toBe(false);
+  });
 
-    it('should resolve word context and skip property access context', () => {
-        const source = '_result.value';
-        expect(resolveBusinessCompletionContext(source, source.length)).toBeNull();
+  it('should resolve template context for parameter token completion', () => {
+    const source = 'value = {{input.use';
+    const pos = source.length;
+    const context = resolveBusinessCompletionContext(source, pos);
+    expect(context).toBeTruthy();
+    expect(context?.from).toBe(8);
+    expect(context?.validFor).toBeInstanceOf(RegExp);
+    expect(context?.validFor.source).toBe('^[\\w.]*$');
+  });
 
-        const wordSource = 'ret';
-        const context = resolveBusinessCompletionContext(wordSource, wordSource.length);
-        expect(context).toBeTruthy();
-        expect(context?.from).toBe(0);
-        expect(context?.validFor).toBeInstanceOf(RegExp);
-        expect(context?.validFor.source).toBe('^[\\w$]*$');
-    });
+  it('should resolve word context and skip property access context', () => {
+    const source = '_result.value';
+    expect(resolveBusinessCompletionContext(source, source.length)).toBeNull();
 
-    it('should auto append call parens for function/method completions only', () => {
-        expect(shouldAutoAppendCallParens({ label: 'print', type: 'function' }, '')).toBe(true);
-        expect(shouldAutoAppendCallParens({ label: 'run', type: 'method' }, '')).toBe(true);
-        expect(shouldAutoAppendCallParens({ label: 'count', type: 'variable' }, '')).toBe(false);
-        expect(shouldAutoAppendCallParens({ label: 'print', type: 'function' }, '(')).toBe(false);
-        expect(shouldAutoAppendCallParens({ label: 'call', type: 'function', apply: 'call()' }, '')).toBe(false);
-    });
+    const wordSource = 'ret';
+    const context = resolveBusinessCompletionContext(
+      wordSource,
+      wordSource.length,
+    );
+    expect(context).toBeTruthy();
+    expect(context?.from).toBe(0);
+    expect(context?.validFor).toBeInstanceOf(RegExp);
+    expect(context?.validFor.source).toBe('^[\\w$]*$');
+  });
+
+  it('should auto append call parens for function/method completions only', () => {
+    expect(
+      shouldAutoAppendCallParens({ label: 'print', type: 'function' }, ''),
+    ).toBe(true);
+    expect(
+      shouldAutoAppendCallParens({ label: 'run', type: 'method' }, ''),
+    ).toBe(true);
+    expect(
+      shouldAutoAppendCallParens({ label: 'count', type: 'variable' }, ''),
+    ).toBe(false);
+    expect(
+      shouldAutoAppendCallParens({ label: 'print', type: 'function' }, '('),
+    ).toBe(false);
+    expect(
+      shouldAutoAppendCallParens(
+        { label: 'call', type: 'function', apply: 'call()' },
+        '',
+      ),
+    ).toBe(false);
+  });
 });
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/codeCompletion.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/codeCompletion.ts
index 9cf5e22..448e92e 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/codeCompletion.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/codeCompletion.ts
@@ -1,217 +1,245 @@
-import type { Completion, CompletionResult, CompletionSource } from '@codemirror/autocomplete';
+import type {
+  Completion,
+  CompletionResult,
+  CompletionSource,
+} from '@codemirror/autocomplete';
 import { syntaxTree } from '@codemirror/language';
 import type { ParameterCandidate } from './paramToken';
 
 export type CodeEngine = 'javascript' | 'python';
 
 export interface BusinessCompletionConfig {
-    engine: CodeEngine;
-    paramCandidates: ParameterCandidate[];
+  engine: CodeEngine;
+  paramCandidates: ParameterCandidate[];
 }
 
 interface CompletionContextHint {
-    from: number;
-    validFor: RegExp;
+  from: number;
+  validFor: RegExp;
 }
 
 const BLOCKED_NODE_NAMES = new Set([
-    'String',
-    'TemplateString',
-    'FormatString',
-    'Comment',
-    'LineComment',
-    'BlockComment',
-    'PropertyName',
-    'PrivatePropertyName'
+  'String',
+  'TemplateString',
+  'FormatString',
+  'Comment',
+  'LineComment',
+  'BlockComment',
+  'PropertyName',
+  'PrivatePropertyName',
 ]);
 
 const JS_SNIPPETS: Array<{ label: string; insert: string; detail: string }> = [
-    {
-        label: 'if-else',
-        detail: '条件分支',
-        insert: "if (condition) {\n  _result.value = value;\n} else {\n  _result.value = null;\n}"
-    },
-    {
-        label: 'for-of',
-        detail: '遍历数组',
-        insert: "for (const item of items) {\n  // TODO\n}\n_result.done = true;"
-    },
-    {
-        label: 'result-object',
-        detail: '返回对象',
-        insert: "_result.message = 'ok';\n_result.data = data;"
-    }
+  {
+    label: 'if-else',
+    detail: '条件分支',
+    insert:
+      'if (condition) {\n  _result.value = value;\n} else {\n  _result.value = null;\n}',
+  },
+  {
+    label: 'for-of',
+    detail: '遍历数组',
+    insert: 'for (const item of items) {\n  // TODO\n}\n_result.done = true;',
+  },
+  {
+    label: 'result-object',
+    detail: '返回对象',
+    insert: "_result.message = 'ok';\n_result.data = data;",
+  },
 ];
 
-const PYTHON_SNIPPETS: Array<{ label: string; insert: string; detail: string }> = [
-    {
-        label: 'if-else',
-        detail: '条件分支',
-        insert: "if condition:\n    _result['value'] = value\nelse:\n    _result['value'] = None"
-    },
-    {
-        label: 'for-loop',
-        detail: '遍历数组',
-        insert: "for item in items:\n    # TODO\n    pass\n_result['done'] = True"
-    },
-    {
-        label: 'result-object',
-        detail: '返回对象',
-        insert: "_result['message'] = 'ok'\n_result['data'] = data"
-    }
+const PYTHON_SNIPPETS: Array<{
+  label: string;
+  insert: string;
+  detail: string;
+}> = [
+  {
+    label: 'if-else',
+    detail: '条件分支',
+    insert:
+      "if condition:\n    _result['value'] = value\nelse:\n    _result['value'] = None",
+  },
+  {
+    label: 'for-loop',
+    detail: '遍历数组',
+    insert: "for item in items:\n    # TODO\n    pass\n_result['done'] = True",
+  },
+  {
+    label: 'result-object',
+    detail: '返回对象',
+    insert: "_result['message'] = 'ok'\n_result['data'] = data",
+  },
 ];
 
 export function normalizeCodeEngine(rawEngine?: string): CodeEngine {
-    const normalized = (rawEngine || 'js').trim().toLowerCase();
-    if (normalized === 'python' || normalized === 'py') {
-        return 'python';
-    }
-    return 'javascript';
+  const normalized = (rawEngine || 'js').trim().toLowerCase();
+  if (normalized === 'python' || normalized === 'py') {
+    return 'python';
+  }
+  return 'javascript';
 }
 
 export function shouldSkipBusinessCompletion(nodeName: string): boolean {
-    if (!nodeName) {
-        return false;
-    }
-    if (BLOCKED_NODE_NAMES.has(nodeName)) {
-        return true;
-    }
-    if (nodeName.endsWith('Comment')) {
-        return true;
-    }
-    return nodeName.includes('String');
+  if (!nodeName) {
+    return false;
+  }
+  if (BLOCKED_NODE_NAMES.has(nodeName)) {
+    return true;
+  }
+  if (nodeName.endsWith('Comment')) {
+    return true;
+  }
+  return nodeName.includes('String');
 }
 
 export function createBusinessCompletions(
-    targetEngine: CodeEngine,
-    candidates: ParameterCandidate[]
+  targetEngine: CodeEngine,
+  candidates: ParameterCandidate[],
 ): Completion[] {
-    const resultCompletion: Completion = {
-        label: '_result',
-        type: 'variable',
-        detail: '代码节点输出对象',
-        boost: 900
-    };
+  const resultCompletion: Completion = {
+    label: '_result',
+    type: 'variable',
+    detail: '代码节点输出对象',
+    boost: 900,
+  };
 
-    const parameterCompletions: Completion[] = candidates.map((candidate) => ({
-        label: candidate.name,
-        type: 'variable',
-        detail: candidate.resolved ? '参数模板' : '参数模板（未映射）',
-        apply: `{{${candidate.name}}}`,
-        boost: 700
-    }));
+  const parameterCompletions: Completion[] = candidates.map((candidate) => ({
+    label: candidate.name,
+    type: 'variable',
+    detail: candidate.resolved ? '参数模板' : '参数模板（未映射）',
+    apply: `{{${candidate.name}}}`,
+    boost: 700,
+  }));
 
-    const snippetCompletions: Completion[] = (targetEngine === 'python' ? PYTHON_SNIPPETS : JS_SNIPPETS).map(
-        (snippet) => ({
-            label: snippet.label,
-            type: 'snippet',
-            detail: snippet.detail,
-            apply: snippet.insert,
-            boost: 500
-        })
-    );
+  const snippetCompletions: Completion[] = (
+    targetEngine === 'python' ? PYTHON_SNIPPETS : JS_SNIPPETS
+  ).map((snippet) => ({
+    label: snippet.label,
+    type: 'snippet',
+    detail: snippet.detail,
+    apply: snippet.insert,
+    boost: 500,
+  }));
 
-    return dedupeCompletions([resultCompletion, ...parameterCompletions, ...snippetCompletions]);
+  return dedupeCompletions([
+    resultCompletion,
+    ...parameterCompletions,
+    ...snippetCompletions,
+  ]);
 }
 
 function dedupeCompletions(items: Completion[]): Completion[] {
-    const seen = new Set<string>();
-    const deduped: Completion[] = [];
-    for (const item of items) {
-        const key = `${item.label}::${item.type || ''}`;
-        if (seen.has(key)) {
-            continue;
-        }
-        seen.add(key);
-        deduped.push(item);
+  const seen = new Set<string>();
+  const deduped: Completion[] = [];
+  for (const item of items) {
+    const key = `${item.label}::${item.type || ''}`;
+    if (seen.has(key)) {
+      continue;
     }
-    return deduped;
+    seen.add(key);
+    deduped.push(item);
+  }
+  return deduped;
 }
 
-function resolveTemplateContext(source: string, pos: number): CompletionContextHint | null {
-    const start = Math.max(0, pos - 300);
-    const prefix = source.slice(start, pos);
-    const match = /\{\{\s*([\w.]*)$/.exec(prefix);
-    if (!match) {
-        return null;
+function resolveTemplateContext(
+  source: string,
+  pos: number,
+): CompletionContextHint | null {
+  const start = Math.max(0, pos - 300);
+  const prefix = source.slice(start, pos);
+  const match = /\{\{\s*([\w.]*)$/.exec(prefix);
+  if (!match) {
+    return null;
+  }
+
+  return {
+    from: pos - match[0].length,
+    validFor: /^[\w.]*$/,
+  };
+}
+
+function resolveWordContext(
+  source: string,
+  pos: number,
+): CompletionContextHint | null {
+  let from = pos;
+  while (from > 0 && /[\w$]/.test(source[from - 1])) {
+    from -= 1;
+  }
+  if (from === pos) {
+    return null;
+  }
+
+  if (from > 0 && source[from - 1] === '.') {
+    return null;
+  }
+
+  return {
+    from,
+    validFor: /^[\w$]*$/,
+  };
+}
+
+export function resolveBusinessCompletionContext(
+  source: string,
+  pos: number,
+): CompletionContextHint | null {
+  return resolveTemplateContext(source, pos) || resolveWordContext(source, pos);
+}
+
+export function createBusinessCompletionSource(
+  config: BusinessCompletionConfig,
+): CompletionSource {
+  return (context) => {
+    const node = syntaxTree(context.state).resolveInner(context.pos, -1);
+    if (shouldSkipBusinessCompletion(node.name)) {
+      return null;
     }
 
-    return {
-        from: pos - match[0].length,
-        validFor: /^[\w.]*$/
+    const docText = context.state.doc.toString();
+    const resolved = resolveBusinessCompletionContext(docText, context.pos);
+    if (!resolved && !context.explicit) {
+      return null;
+    }
+
+    const result: CompletionResult = {
+      from: resolved?.from ?? context.pos,
+      options: createBusinessCompletions(config.engine, config.paramCandidates),
     };
+
+    if (resolved?.validFor) {
+      result.validFor = resolved.validFor;
+    }
+
+    return result;
+  };
 }
 
-function resolveWordContext(source: string, pos: number): CompletionContextHint | null {
-    let from = pos;
-    while (from > 0 && /[\w$]/.test(source[from - 1])) {
-        from -= 1;
-    }
-    if (from === pos) {
-        return null;
-    }
+export function shouldAutoAppendCallParens(
+  completion: Completion | null | undefined,
+  nextChar: string,
+): boolean {
+  if (!completion) {
+    return false;
+  }
 
-    if (from > 0 && source[from - 1] === '.') {
-        return null;
-    }
+  const completionType = (completion.type || '').toLowerCase();
+  if (completionType !== 'function' && completionType !== 'method') {
+    return false;
+  }
 
-    return {
-        from,
-        validFor: /^[\w$]*$/
-    };
-}
-
-export function resolveBusinessCompletionContext(source: string, pos: number): CompletionContextHint | null {
-    return resolveTemplateContext(source, pos) || resolveWordContext(source, pos);
-}
-
-export function createBusinessCompletionSource(config: BusinessCompletionConfig): CompletionSource {
-    return (context) => {
-        const node = syntaxTree(context.state).resolveInner(context.pos, -1);
-        if (shouldSkipBusinessCompletion(node.name)) {
-            return null;
-        }
-
-        const docText = context.state.doc.toString();
-        const resolved = resolveBusinessCompletionContext(docText, context.pos);
-        if (!resolved && !context.explicit) {
-            return null;
-        }
-
-        const result: CompletionResult = {
-            from: resolved?.from ?? context.pos,
-            options: createBusinessCompletions(config.engine, config.paramCandidates)
-        };
-
-        if (resolved?.validFor) {
-            result.validFor = resolved.validFor;
-        }
-
-        return result;
-    };
-}
-
-export function shouldAutoAppendCallParens(completion: Completion | null | undefined, nextChar: string): boolean {
-    if (!completion) {
-        return false;
-    }
-
-    const completionType = (completion.type || '').toLowerCase();
-    if (completionType !== 'function' && completionType !== 'method') {
-        return false;
-    }
-
-    if (nextChar === '(') {
-        return false;
-    }
-
-    if (typeof completion.apply === 'string' && completion.apply.includes('(')) {
-        return false;
-    }
-
-    if (typeof completion.apply === 'function') {
-        return false;
-    }
-
-    return true;
+  if (nextChar === '(') {
+    return false;
+  }
+
+  if (typeof completion.apply === 'string' && completion.apply.includes('(')) {
+    return false;
+  }
+
+  if (typeof completion.apply === 'function') {
+    return false;
+  }
+
+  return true;
 }
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/createFloating.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/createFloating.ts
index b01c23d..0b2b7d5 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/createFloating.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/createFloating.ts
@@ -7,212 +7,226 @@ import {
   type Placement,
   shift,
   type ShiftOptions,
-  size
+  size,
 } from '@floating-ui/dom';
 
 export type FloatingOptions = {
-    trigger: string | HTMLElement;
-    triggerEvent?: string[];
-    floatContent: string | HTMLElement;
-    placement?: Placement;
-    offsetOptions?: OffsetOptions;
-    flipOptions?: FlipOptions;
-    shiftOptions?: ShiftOptions;
-    interactive?: boolean;
-    showArrow?: boolean;
-    onShow?: () => void;
-    onHide?: () => void;
-    syncWidth?: boolean;
-    syncWidthMode?: 'min' | 'equal';
+  trigger: string | HTMLElement;
+  triggerEvent?: string[];
+  floatContent: string | HTMLElement;
+  placement?: Placement;
+  offsetOptions?: OffsetOptions;
+  flipOptions?: FlipOptions;
+  shiftOptions?: ShiftOptions;
+  interactive?: boolean;
+  showArrow?: boolean;
+  onShow?: () => void;
+  onHide?: () => void;
+  syncWidth?: boolean;
+  syncWidthMode?: 'min' | 'equal';
 };
 
 export type FloatingInstance = {
-    destroy: () => void;
-    hide: () => void;
-    isVisible: () => boolean;
+  destroy: () => void;
+  hide: () => void;
+  isVisible: () => boolean;
 };
 
 export const createFloating = ({
-    trigger,
-    triggerEvent,
-    floatContent,
-    placement = 'bottom',
-    offsetOptions,
-    flipOptions,
-    shiftOptions,
-    interactive,
-    showArrow,
-    onShow,
-    onHide,
-    syncWidth = false,
-    syncWidthMode = 'min'
+  trigger,
+  triggerEvent,
+  floatContent,
+  placement = 'bottom',
+  offsetOptions,
+  flipOptions,
+  shiftOptions,
+  interactive,
+  showArrow,
+  onShow,
+  onHide,
+  syncWidth = false,
+  syncWidthMode = 'min',
 }: FloatingOptions): FloatingInstance => {
-    if (typeof trigger === 'string') {
-        const triggerEl = document.querySelector(trigger);
-        if (!triggerEl) {
-            throw new Error("element not found by document.querySelector('" + trigger + "')");
-        } else {
-            trigger = triggerEl as HTMLElement;
-        }
-    }
-
-    let floating: HTMLElement;
-    if (typeof floatContent === 'string') {
-        const floatContentEl = document.querySelector(floatContent);
-        if (!floatContentEl) {
-            throw new Error("element not found by document.querySelector('" + floatContent + "')");
-        } else {
-            floating = floatContentEl as HTMLElement;
-        }
+  if (typeof trigger === 'string') {
+    const triggerEl = document.querySelector(trigger);
+    if (!triggerEl) {
+      throw new Error(
+        "element not found by document.querySelector('" + trigger + "')",
+      );
     } else {
-        floating = floatContent as HTMLElement;
+      trigger = triggerEl as HTMLElement;
     }
+  }
 
-    let arrowElement: HTMLElement;
-    if (showArrow) {
-        arrowElement = document.createElement('div');
-        arrowElement.style.position = 'absolute';
-        arrowElement.style.backgroundColor = '#222';
-        arrowElement.style.width = '8px';
-        arrowElement.style.height = '8px';
-        arrowElement.style.transform = 'rotate(45deg)';
-        arrowElement.style.display = 'none';
-
-        floating.firstElementChild!.before(arrowElement);
+  let floating: HTMLElement;
+  if (typeof floatContent === 'string') {
+    const floatContentEl = document.querySelector(floatContent);
+    if (!floatContentEl) {
+      throw new Error(
+        "element not found by document.querySelector('" + floatContent + "')",
+      );
+    } else {
+      floating = floatContentEl as HTMLElement;
     }
+  } else {
+    floating = floatContent as HTMLElement;
+  }
 
-    function updatePosition() {
-        computePosition(trigger as Element, floating, {
-            placement: placement,
-            middleware: [
-                offset(offsetOptions), // 手动偏移配置
-                // flip(flipOptions), // 注释掉自动翻转，强制向下弹出，避免遮挡顶部工具栏
-                shift(shiftOptions), //自动偏移（使得浮动元素能够进入视野）
-                ...(showArrow ? [arrow({ element: arrowElement })] : []),
-                ...(syncWidth ? [size({
-                    apply({ rects, elements }) {
-                        if (syncWidthMode === 'equal') {
-                            Object.assign(elements.floating.style, {
-                                width: `${rects.reference.width}px`,
-                                minWidth: `${rects.reference.width}px`
-                            });
-                        } else {
-                            Object.assign(elements.floating.style, {
-                                width: '',
-                                minWidth: `${rects.reference.width}px`
-                            });
-                        }
-                    }
-                })] : [])
+  let arrowElement: HTMLElement;
+  if (showArrow) {
+    arrowElement = document.createElement('div');
+    arrowElement.style.position = 'absolute';
+    arrowElement.style.backgroundColor = '#222';
+    arrowElement.style.width = '8px';
+    arrowElement.style.height = '8px';
+    arrowElement.style.transform = 'rotate(45deg)';
+    arrowElement.style.display = 'none';
+
+    floating.firstElementChild!.before(arrowElement);
+  }
+
+  function updatePosition() {
+    computePosition(trigger as Element, floating, {
+      placement: placement,
+      middleware: [
+        offset(offsetOptions), // 手动偏移配置
+        // flip(flipOptions), // 注释掉自动翻转，强制向下弹出，避免遮挡顶部工具栏
+        shift(shiftOptions), //自动偏移（使得浮动元素能够进入视野）
+        ...(showArrow ? [arrow({ element: arrowElement })] : []),
+        ...(syncWidth
+          ? [
+              size({
+                apply({ rects, elements }) {
+                  if (syncWidthMode === 'equal') {
+                    Object.assign(elements.floating.style, {
+                      width: `${rects.reference.width}px`,
+                      minWidth: `${rects.reference.width}px`,
+                    });
+                  } else {
+                    Object.assign(elements.floating.style, {
+                      width: '',
+                      minWidth: `${rects.reference.width}px`,
+                    });
+                  }
+                },
+              }),
             ]
-        }).then(({ x, y, placement, middlewareData }) => {
-            Object.assign(floating.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-                position: 'absolute'
-            });
+          : []),
+      ],
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(floating.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        position: 'absolute',
+      });
 
-            if (showArrow) {
-                const { x: arrowX, y: arrowY } = middlewareData.arrow as { x: number; y: number };
-                const staticSide = {
-                    top: 'bottom',
-                    right: 'left',
-                    bottom: 'top',
-                    left: 'right'
-                }[placement.split('-')[0]] as string;
+      if (showArrow) {
+        const { x: arrowX, y: arrowY } = middlewareData.arrow as {
+          x: number;
+          y: number;
+        };
+        const staticSide = {
+          top: 'bottom',
+          right: 'left',
+          bottom: 'top',
+          left: 'right',
+        }[placement.split('-')[0]] as string;
 
-                Object.assign(arrowElement.style, {
-                    zIndex: -1,
-                    left: arrowX != null ? `${arrowX}px` : '',
-                    top: arrowY != null ? `${arrowY}px` : '',
-                    right: '',
-                    bottom: '',
-                    [staticSide]: '2px'
-                });
-            }
+        Object.assign(arrowElement.style, {
+          zIndex: -1,
+          left: arrowX != null ? `${arrowX}px` : '',
+          top: arrowY != null ? `${arrowY}px` : '',
+          right: '',
+          bottom: '',
+          [staticSide]: '2px',
         });
-    }
-
-    let visible = false;
-
-    function showTooltip() {
-        floating.style.display = 'block';
-        floating.style.visibility = 'visible';
-        floating.style.position = 'absolute';
-
-        if (showArrow) {
-            arrowElement.style.display = 'block';
-        }
-
-        visible = true;
-        updatePosition();
-        onShow?.();
-    }
-
-    function hideTooltip() {
-        floating.style.display = 'none';
-        if (showArrow) {
-            arrowElement.style.display = 'none';
-        }
-        visible = false;
-        onHide?.();
-    }
-
-    function onTrigger(event: any) {
-        if (!visible) {
-            showTooltip();
-        } else {
-            hideTooltip();
-        }
-    }
-
-    function hideTooltipCompute(event: any) {
-        if (floating.contains(event.target as Node) || (trigger as Node).contains(event.target as Node)) {
-            return;
-        }
-        hideTooltip();
-    }
-
-    if (!triggerEvent || triggerEvent.length == 0) {
-        if (interactive) {
-            triggerEvent = ['click'];
-        } else {
-            triggerEvent = ['mouseenter', 'focus'];
-        }
-    }
-
-    triggerEvent.forEach((event) => {
-        (trigger as HTMLElement).addEventListener(event, onTrigger);
+      }
     });
+  }
 
-    if (interactive) {
-        document.addEventListener('click', hideTooltipCompute);
-    } else {
-        ['mouseleave', 'blur'].forEach((event) => {
-            trigger.addEventListener(event, hideTooltip);
-        });
+  let visible = false;
+
+  function showTooltip() {
+    floating.style.display = 'block';
+    floating.style.visibility = 'visible';
+    floating.style.position = 'absolute';
+
+    if (showArrow) {
+      arrowElement.style.display = 'block';
     }
 
-    return {
-        destroy() {
-            triggerEvent.forEach((event) => {
-                (trigger as HTMLElement).removeEventListener(event, onTrigger);
-            });
+    visible = true;
+    updatePosition();
+    onShow?.();
+  }
 
-            if (interactive) {
-                document.removeEventListener('click', hideTooltipCompute);
-            } else {
-                ['mouseleave', 'blur'].forEach((event) => {
-                    trigger.removeEventListener(event, hideTooltip);
-                });
-            }
-        },
-        hide() {
-            hideTooltip();
-        },
+  function hideTooltip() {
+    floating.style.display = 'none';
+    if (showArrow) {
+      arrowElement.style.display = 'none';
+    }
+    visible = false;
+    onHide?.();
+  }
 
-        isVisible() {
-            return visible;
-        }
-    };
+  function onTrigger(event: any) {
+    if (!visible) {
+      showTooltip();
+    } else {
+      hideTooltip();
+    }
+  }
+
+  function hideTooltipCompute(event: any) {
+    if (
+      floating.contains(event.target as Node) ||
+      (trigger as Node).contains(event.target as Node)
+    ) {
+      return;
+    }
+    hideTooltip();
+  }
+
+  if (!triggerEvent || triggerEvent.length == 0) {
+    if (interactive) {
+      triggerEvent = ['click'];
+    } else {
+      triggerEvent = ['mouseenter', 'focus'];
+    }
+  }
+
+  triggerEvent.forEach((event) => {
+    (trigger as HTMLElement).addEventListener(event, onTrigger);
+  });
+
+  if (interactive) {
+    document.addEventListener('click', hideTooltipCompute);
+  } else {
+    ['mouseleave', 'blur'].forEach((event) => {
+      trigger.addEventListener(event, hideTooltip);
+    });
+  }
+
+  return {
+    destroy() {
+      triggerEvent.forEach((event) => {
+        (trigger as HTMLElement).removeEventListener(event, onTrigger);
+      });
+
+      if (interactive) {
+        document.removeEventListener('click', hideTooltipCompute);
+      } else {
+        ['mouseleave', 'blur'].forEach((event) => {
+          trigger.removeEventListener(event, hideTooltip);
+        });
+      }
+    },
+    hide() {
+      hideTooltip();
+    },
+
+    isVisible() {
+      return visible;
+    },
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/deepClone.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/deepClone.ts
index 37932ca..2f882e7 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/deepClone.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/deepClone.ts
@@ -1,3 +1,3 @@
 export const deepClone = <T>(obj: T): T => {
-    return JSON.parse(JSON.stringify(obj));
+  return JSON.parse(JSON.stringify(obj));
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/deepEqual.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/deepEqual.ts
index 6508ff1..ec15ba6 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/deepEqual.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/deepEqual.ts
@@ -1,37 +1,42 @@
 export const deepEqual = <T>(obj1: T, obj2: T) => {
-    if (obj1 === obj2) return true;
+  if (obj1 === obj2) return true;
 
-    // 处理 null 和 object 类型
-    if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
-        return false;
+  // 处理 null 和 object 类型
+  if (
+    typeof obj1 !== 'object' ||
+    obj1 === null ||
+    typeof obj2 !== 'object' ||
+    obj2 === null
+  ) {
+    return false;
+  }
+
+  // 判断是否都是数组
+  const isArray1 = Array.isArray(obj1);
+  const isArray2 = Array.isArray(obj2);
+
+  if (isArray1 !== isArray2) return false; // 一个是数组另一个不是，不相等
+
+  // 数组的情况
+  if (isArray1 && isArray2) {
+    if (obj1.length !== obj2.length) return false;
+    for (let i = 0; i < obj1.length; i++) {
+      if (!deepEqual(obj1[i], obj2[i])) return false;
+    }
+    return true;
+  }
+  // 普通对象的情况
+  else {
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+
+    if (keys1.length !== keys2.length) return false;
+
+    for (const key of keys1) {
+      if (!(key in obj2)) return false;
+      if (!deepEqual((obj1 as any)[key], (obj2 as any)[key])) return false;
     }
 
-    // 判断是否都是数组
-    const isArray1 = Array.isArray(obj1);
-    const isArray2 = Array.isArray(obj2);
-
-    if (isArray1 !== isArray2) return false; // 一个是数组另一个不是，不相等
-
-    // 数组的情况
-    if (isArray1 && isArray2) {
-        if (obj1.length !== obj2.length) return false;
-        for (let i = 0; i < obj1.length; i++) {
-            if (!deepEqual(obj1[i], obj2[i])) return false;
-        }
-        return true;
-    }
-    // 普通对象的情况
-    else {
-        const keys1 = Object.keys(obj1);
-        const keys2 = Object.keys(obj2);
-
-        if (keys1.length !== keys2.length) return false;
-
-        for (const key of keys1) {
-            if (!(key in obj2)) return false;
-            if (!deepEqual((obj1 as any)[key], (obj2 as any)[key])) return false;
-        }
-
-        return true;
-    }
+    return true;
+  }
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/isInEditableElement.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/isInEditableElement.ts
index 80fa848..be1b1cb 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/isInEditableElement.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/isInEditableElement.ts
@@ -3,14 +3,14 @@
  * 适用于快捷键、全局事件监听等需要避免干扰用户输入的场景。
  */
 export const isInEditableElement = () => {
-    const el = document.activeElement;
-    if (!el || !(el instanceof HTMLElement)) {
-        return false;
-    }
+  const el = document.activeElement;
+  if (!el || !(el instanceof HTMLElement)) {
+    return false;
+  }
 
-    return (
-        el instanceof HTMLInputElement ||
-        el instanceof HTMLTextAreaElement ||
-        el.isContentEditable
-    );
+  return (
+    el instanceof HTMLInputElement ||
+    el instanceof HTMLTextAreaElement ||
+    el.isContentEditable
+  );
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/nodePalette.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/nodePalette.ts
index dccd1a8..79c1981 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/nodePalette.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/nodePalette.ts
@@ -1,136 +1,137 @@
-import type {Node} from '@xyflow/svelte';
+import type { Node } from '@xyflow/svelte';
 
-import type {TinyflowOptions} from '#types';
+import type { TinyflowOptions } from '#types';
 
 export type NodePaletteItem = {
-    icon?: string;
-    title: string;
-    type: string;
-    sortNo?: number;
-    description?: string;
-    category: string;
-    extra?: Partial<Node['data']>;
+  icon?: string;
+  title: string;
+  type: string;
+  sortNo?: number;
+  description?: string;
+  category: string;
+  extra?: Partial<Node['data']>;
 };
 
 const BUILT_IN_NODES: NodePaletteItem[] = [
-    {
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"></path></svg>',
-        title: '开始节点',
-        type: 'startNode',
-        sortNo: 100,
-        description: '开始定义输入参数',
-        category: '输入输出'
-    },
-    {
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path></svg>',
-        title: '循环',
-        type: 'loopNode',
-        sortNo: 200,
-        description: '用于循环执行任务',
-        category: '逻辑'
-    },
-    {
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4H10V10H4V4ZM14 4H20V10H14V4ZM4 14H10V20H4V14ZM14 14H20V20H14V14ZM10 7H14V9H10V7ZM7 10H9V14H7V10ZM15 10H17V14H15V10Z"></path></svg>',
-        title: '条件判断',
-        type: 'conditionNode',
-        sortNo: 250,
-        description: '根据参数值分流到不同分支',
-        category: '逻辑'
-    },
-    {
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.7134 7.12811L20.4668 7.69379C20.2864 8.10792 19.7136 8.10792 19.5331 7.69379L19.2866 7.12811C18.8471 6.11947 18.0555 5.31641 17.0677 4.87708L16.308 4.53922C15.8973 4.35653 15.8973 3.75881 16.308 3.57612L17.0252 3.25714C18.0384 2.80651 18.8442 1.97373 19.2761 0.930828L19.5293 0.319534C19.7058 -0.106511 20.2942 -0.106511 20.4706 0.319534L20.7238 0.930828C21.1558 1.97373 21.9616 2.80651 22.9748 3.25714L23.6919 3.57612C24.1027 3.75881 24.1027 4.35653 23.6919 4.53922L22.9323 4.87708C21.9445 5.31641 21.1529 6.11947 20.7134 7.12811ZM9 2C13.0675 2 16.426 5.03562 16.9337 8.96494L19.1842 12.5037C19.3324 12.7367 19.3025 13.0847 18.9593 13.2317L17 14.071V17C17 18.1046 16.1046 19 15 19H13.001L13 22H4L4.00025 18.3061C4.00033 17.1252 3.56351 16.0087 2.7555 15.0011C1.65707 13.6313 1 11.8924 1 10C1 5.58172 4.58172 2 9 2ZM9 4C5.68629 4 3 6.68629 3 10C3 11.3849 3.46818 12.6929 4.31578 13.7499C5.40965 15.114 6.00036 16.6672 6.00025 18.3063L6.00013 20H11.0007L11.0017 17H15V12.7519L16.5497 12.0881L15.0072 9.66262L14.9501 9.22118C14.5665 6.25141 12.0243 4 9 4ZM19.4893 16.9929L21.1535 18.1024C22.32 16.3562 23 14.2576 23 12.0001C23 11.317 22.9378 10.6486 22.8186 10L20.8756 10.5C20.9574 10.9878 21 11.489 21 12.0001C21 13.8471 20.4436 15.5642 19.4893 16.9929Z"></path></svg>',
-        title: '大模型',
-        type: 'llmNode',
-        sortNo: 300,
-        description: '使用大模型处理问题',
-        category: '模型与流程'
-    },
-    {
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 5C13.567 5 12 6.567 12 8.5C12 10.433 13.567 12 15.5 12C17.433 12 19 10.433 19 8.5C19 6.567 17.433 5 15.5 5ZM10 8.5C10 5.46243 12.4624 3 15.5 3C18.5376 3 21 5.46243 21 8.5C21 9.6575 20.6424 10.7315 20.0317 11.6175L22.7071 14.2929L21.2929 15.7071L18.6175 13.0317C17.7315 13.6424 16.6575 14 15.5 14C12.4624 14 10 11.5376 10 8.5ZM3 4H8V6H3V4ZM3 11H8V13H3V11ZM21 18V20H3V18H21Z"></path></svg>',
-        title: '知识库',
-        type: 'knowledgeNode',
-        sortNo: 400,
-        description: '通过知识库获取内容',
-        category: '数据与集成'
-    },
-    {
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
-        title: '搜索引擎',
-        type: 'searchEngineNode',
-        sortNo: 500,
-        description: '通过搜索引擎搜索内容',
-        category: '模型与流程'
-    },
-    {
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.23509 6.45329C4.85101 7.89148 4 9.84636 4 12C4 16.4183 7.58172 20 12 20C13.0808 20 14.1116 19.7857 15.0521 19.3972C15.1671 18.6467 14.9148 17.9266 14.8116 17.6746C14.582 17.115 13.8241 16.1582 12.5589 14.8308C12.2212 14.4758 12.2429 14.2035 12.3636 13.3943L12.3775 13.3029C12.4595 12.7486 12.5971 12.4209 14.4622 12.1248C15.4097 11.9746 15.6589 12.3533 16.0043 12.8777C16.0425 12.9358 16.0807 12.9928 16.1198 13.0499C16.4479 13.5297 16.691 13.6394 17.0582 13.8064C17.2227 13.881 17.428 13.9751 17.7031 14.1314C18.3551 14.504 18.3551 14.9247 18.3551 15.8472V15.9518C18.3551 16.3434 18.3168 16.6872 18.2566 16.9859C19.3478 15.6185 20 13.8854 20 12C20 8.70089 18.003 5.8682 15.1519 4.64482C14.5987 5.01813 13.8398 5.54726 13.575 5.91C13.4396 6.09538 13.2482 7.04166 12.6257 7.11976C12.4626 7.14023 12.2438 7.12589 12.012 7.11097C11.3905 7.07058 10.5402 7.01606 10.268 7.75495C10.0952 8.2232 10.0648 9.49445 10.6239 10.1543C10.7134 10.2597 10.7307 10.4547 10.6699 10.6735C10.59 10.9608 10.4286 11.1356 10.3783 11.1717C10.2819 11.1163 10.0896 10.8931 9.95938 10.7412C9.64554 10.3765 9.25405 9.92233 8.74797 9.78176C8.56395 9.73083 8.36166 9.68867 8.16548 9.64736C7.6164 9.53227 6.99443 9.40134 6.84992 9.09302C6.74442 8.8672 6.74488 8.55621 6.74529 8.22764C6.74529 7.8112 6.74529 7.34029 6.54129 6.88256C6.46246 6.70541 6.35689 6.56446 6.23509 6.45329ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z"></path></svg>',
-        title: 'Http 请求',
-        type: 'httpNode',
-        sortNo: 600,
-        description: '通过 HTTP 请求获取数据',
-        category: '数据与集成'
-    },
-    {
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12L15.9289 19.0711L14.5147 17.6569L20.1716 12L14.5147 6.34317L15.9289 4.92896L23 12ZM3.82843 12L9.48528 17.6569L8.07107 19.0711L1 12L8.07107 4.92896L9.48528 6.34317L3.82843 12Z"></path></svg>',
-        title: '动态代码',
-        type: 'codeNode',
-        sortNo: 700,
-        description: '动态执行代码',
-        category: '逻辑'
-    },
-    {
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4ZM4 5V19H20V5H4ZM7 8H17V11H15V10H13V14H14.5V16H9.5V14H11V10H9V11H7V8Z"></path></svg>',
-        title: '内容模板',
-        type: 'templateNode',
-        sortNo: 800,
-        description: '通过模板引擎生成内容',
-        category: '逻辑'
-    },
-    {
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.3873 13.4975L17.9403 20.5117L13.2418 22.2218L10.6889 15.2076L6.79004 17.6529L8.4086 1.63318L19.9457 12.8646L15.3873 13.4975ZM15.3768 19.3163L12.6618 11.8568L15.6212 11.4459L9.98201 5.9561L9.19088 13.7863L11.7221 12.1988L14.4371 19.6583L15.3768 19.3163Z"></path></svg>',
-        title: '用户确认',
-        type: 'confirmNode',
-        sortNo: 900,
-        description: '确认继续或选择内容',
-        category: '输入输出'
-    },
-    {
-        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 5.1438V16.0002H18.3391L6 5.1438ZM4 2.932C4 2.07155 5.01456 1.61285 5.66056 2.18123L21.6501 16.2494C22.3423 16.8584 21.9116 18.0002 20.9896 18.0002H6V22H4V2.932Z"></path></svg>',
-        title: '结束节点',
-        type: 'endNode',
-        sortNo: 1000,
-        description: '结束定义输出参数',
-        category: '输入输出'
-    }
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"></path></svg>',
+    title: '开始节点',
+    type: 'startNode',
+    sortNo: 100,
+    description: '开始定义输入参数',
+    category: '输入输出',
+  },
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path></svg>',
+    title: '循环',
+    type: 'loopNode',
+    sortNo: 200,
+    description: '用于循环执行任务',
+    category: '逻辑',
+  },
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4H10V10H4V4ZM14 4H20V10H14V4ZM4 14H10V20H4V14ZM14 14H20V20H14V14ZM10 7H14V9H10V7ZM7 10H9V14H7V10ZM15 10H17V14H15V10Z"></path></svg>',
+    title: '条件判断',
+    type: 'conditionNode',
+    sortNo: 250,
+    description: '根据参数值分流到不同分支',
+    category: '逻辑',
+  },
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.7134 7.12811L20.4668 7.69379C20.2864 8.10792 19.7136 8.10792 19.5331 7.69379L19.2866 7.12811C18.8471 6.11947 18.0555 5.31641 17.0677 4.87708L16.308 4.53922C15.8973 4.35653 15.8973 3.75881 16.308 3.57612L17.0252 3.25714C18.0384 2.80651 18.8442 1.97373 19.2761 0.930828L19.5293 0.319534C19.7058 -0.106511 20.2942 -0.106511 20.4706 0.319534L20.7238 0.930828C21.1558 1.97373 21.9616 2.80651 22.9748 3.25714L23.6919 3.57612C24.1027 3.75881 24.1027 4.35653 23.6919 4.53922L22.9323 4.87708C21.9445 5.31641 21.1529 6.11947 20.7134 7.12811ZM9 2C13.0675 2 16.426 5.03562 16.9337 8.96494L19.1842 12.5037C19.3324 12.7367 19.3025 13.0847 18.9593 13.2317L17 14.071V17C17 18.1046 16.1046 19 15 19H13.001L13 22H4L4.00025 18.3061C4.00033 17.1252 3.56351 16.0087 2.7555 15.0011C1.65707 13.6313 1 11.8924 1 10C1 5.58172 4.58172 2 9 2ZM9 4C5.68629 4 3 6.68629 3 10C3 11.3849 3.46818 12.6929 4.31578 13.7499C5.40965 15.114 6.00036 16.6672 6.00025 18.3063L6.00013 20H11.0007L11.0017 17H15V12.7519L16.5497 12.0881L15.0072 9.66262L14.9501 9.22118C14.5665 6.25141 12.0243 4 9 4ZM19.4893 16.9929L21.1535 18.1024C22.32 16.3562 23 14.2576 23 12.0001C23 11.317 22.9378 10.6486 22.8186 10L20.8756 10.5C20.9574 10.9878 21 11.489 21 12.0001C21 13.8471 20.4436 15.5642 19.4893 16.9929Z"></path></svg>',
+    title: '大模型',
+    type: 'llmNode',
+    sortNo: 300,
+    description: '使用大模型处理问题',
+    category: '模型与流程',
+  },
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 5C13.567 5 12 6.567 12 8.5C12 10.433 13.567 12 15.5 12C17.433 12 19 10.433 19 8.5C19 6.567 17.433 5 15.5 5ZM10 8.5C10 5.46243 12.4624 3 15.5 3C18.5376 3 21 5.46243 21 8.5C21 9.6575 20.6424 10.7315 20.0317 11.6175L22.7071 14.2929L21.2929 15.7071L18.6175 13.0317C17.7315 13.6424 16.6575 14 15.5 14C12.4624 14 10 11.5376 10 8.5ZM3 4H8V6H3V4ZM3 11H8V13H3V11ZM21 18V20H3V18H21Z"></path></svg>',
+    title: '知识库',
+    type: 'knowledgeNode',
+    sortNo: 400,
+    description: '通过知识库获取内容',
+    category: '数据与集成',
+  },
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
+    title: '搜索引擎',
+    type: 'searchEngineNode',
+    sortNo: 500,
+    description: '通过搜索引擎搜索内容',
+    category: '模型与流程',
+  },
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.23509 6.45329C4.85101 7.89148 4 9.84636 4 12C4 16.4183 7.58172 20 12 20C13.0808 20 14.1116 19.7857 15.0521 19.3972C15.1671 18.6467 14.9148 17.9266 14.8116 17.6746C14.582 17.115 13.8241 16.1582 12.5589 14.8308C12.2212 14.4758 12.2429 14.2035 12.3636 13.3943L12.3775 13.3029C12.4595 12.7486 12.5971 12.4209 14.4622 12.1248C15.4097 11.9746 15.6589 12.3533 16.0043 12.8777C16.0425 12.9358 16.0807 12.9928 16.1198 13.0499C16.4479 13.5297 16.691 13.6394 17.0582 13.8064C17.2227 13.881 17.428 13.9751 17.7031 14.1314C18.3551 14.504 18.3551 14.9247 18.3551 15.8472V15.9518C18.3551 16.3434 18.3168 16.6872 18.2566 16.9859C19.3478 15.6185 20 13.8854 20 12C20 8.70089 18.003 5.8682 15.1519 4.64482C14.5987 5.01813 13.8398 5.54726 13.575 5.91C13.4396 6.09538 13.2482 7.04166 12.6257 7.11976C12.4626 7.14023 12.2438 7.12589 12.012 7.11097C11.3905 7.07058 10.5402 7.01606 10.268 7.75495C10.0952 8.2232 10.0648 9.49445 10.6239 10.1543C10.7134 10.2597 10.7307 10.4547 10.6699 10.6735C10.59 10.9608 10.4286 11.1356 10.3783 11.1717C10.2819 11.1163 10.0896 10.8931 9.95938 10.7412C9.64554 10.3765 9.25405 9.92233 8.74797 9.78176C8.56395 9.73083 8.36166 9.68867 8.16548 9.64736C7.6164 9.53227 6.99443 9.40134 6.84992 9.09302C6.74442 8.8672 6.74488 8.55621 6.74529 8.22764C6.74529 7.8112 6.74529 7.34029 6.54129 6.88256C6.46246 6.70541 6.35689 6.56446 6.23509 6.45329ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z"></path></svg>',
+    title: 'Http 请求',
+    type: 'httpNode',
+    sortNo: 600,
+    description: '通过 HTTP 请求获取数据',
+    category: '数据与集成',
+  },
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12L15.9289 19.0711L14.5147 17.6569L20.1716 12L14.5147 6.34317L15.9289 4.92896L23 12ZM3.82843 12L9.48528 17.6569L8.07107 19.0711L1 12L8.07107 4.92896L9.48528 6.34317L3.82843 12Z"></path></svg>',
+    title: '动态代码',
+    type: 'codeNode',
+    sortNo: 700,
+    description: '动态执行代码',
+    category: '逻辑',
+  },
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4ZM4 5V19H20V5H4ZM7 8H17V11H15V10H13V14H14.5V16H9.5V14H11V10H9V11H7V8Z"></path></svg>',
+    title: '内容模板',
+    type: 'templateNode',
+    sortNo: 800,
+    description: '通过模板引擎生成内容',
+    category: '逻辑',
+  },
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.3873 13.4975L17.9403 20.5117L13.2418 22.2218L10.6889 15.2076L6.79004 17.6529L8.4086 1.63318L19.9457 12.8646L15.3873 13.4975ZM15.3768 19.3163L12.6618 11.8568L15.6212 11.4459L9.98201 5.9561L9.19088 13.7863L11.7221 12.1988L14.4371 19.6583L15.3768 19.3163Z"></path></svg>',
+    title: '用户确认',
+    type: 'confirmNode',
+    sortNo: 900,
+    description: '确认继续或选择内容',
+    category: '输入输出',
+  },
+  {
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 5.1438V16.0002H18.3391L6 5.1438ZM4 2.932C4 2.07155 5.01456 1.61285 5.66056 2.18123L21.6501 16.2494C22.3423 16.8584 21.9116 18.0002 20.9896 18.0002H6V22H4V2.932Z"></path></svg>',
+    title: '结束节点',
+    type: 'endNode',
+    sortNo: 1000,
+    description: '结束定义输出参数',
+    category: '输入输出',
+  },
 ];
 
 export function getAvailableNodes(options?: TinyflowOptions) {
-    const nodes: NodePaletteItem[] = [...BUILT_IN_NODES];
-    const customNodes = options?.customNodes;
+  const nodes: NodePaletteItem[] = [...BUILT_IN_NODES];
+  const customNodes = options?.customNodes;
 
-    if (customNodes) {
-        const keys = Object.keys(customNodes).sort((a, b) => {
-            return (customNodes[a].sortNo || 0) - (customNodes[b].sortNo || 0);
-        });
+  if (customNodes) {
+    const keys = Object.keys(customNodes).sort((a, b) => {
+      return (customNodes[a].sortNo || 0) - (customNodes[b].sortNo || 0);
+    });
 
-        for (let key of keys) {
-            const item = customNodes[key];
-            nodes.push({
-                icon: item.icon,
-                title: item.title,
-                type: key,
-                sortNo: item.sortNo,
-                description: item.description,
-                category: item.group === 'tools' ? '扩展工具' : '基础节点'
-            });
-        }
+    for (let key of keys) {
+      const item = customNodes[key];
+      nodes.push({
+        icon: item.icon,
+        title: item.title,
+        type: key,
+        sortNo: item.sortNo,
+        description: item.description,
+        category: item.group === 'tools' ? '扩展工具' : '基础节点',
+      });
     }
+  }
 
-    const hiddenNodes = typeof options?.hiddenNodes === 'function'
-        ? options?.hiddenNodes()
-        : options?.hiddenNodes;
+  const hiddenNodes =
+    typeof options?.hiddenNodes === 'function'
+      ? options?.hiddenNodes()
+      : options?.hiddenNodes;
 
-    const hiddenSet = new Set(Array.isArray(hiddenNodes) ? hiddenNodes : []);
-    const filtered = nodes.filter((node) => !hiddenSet.has(node.type));
-    filtered.sort((a, b) => (a.sortNo || 0) - (b.sortNo || 0));
-    return filtered;
+  const hiddenSet = new Set(Array.isArray(hiddenNodes) ? hiddenNodes : []);
+  const filtered = nodes.filter((node) => !hiddenSet.has(node.type));
+  filtered.sort((a, b) => (a.sortNo || 0) - (b.sortNo || 0));
+  return filtered;
 }
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/paramToken.test.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/paramToken.test.ts
index 236002d..52db6c9 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/paramToken.test.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/paramToken.test.ts
@@ -1,175 +1,175 @@
 import { describe, expect, it } from 'vitest';
 
 import {
-    flattenParameterCandidates,
-    findBackspaceTokenRange,
-    findTokenRangeAtCursor,
-    flattenParameterNames,
-    insertTextAtCursor,
-    parseTokenParts,
-    splitTokenDisplay
+  flattenParameterCandidates,
+  findBackspaceTokenRange,
+  findTokenRangeAtCursor,
+  flattenParameterNames,
+  insertTextAtCursor,
+  parseTokenParts,
+  splitTokenDisplay,
 } from './paramToken';
 
 describe('paramToken utils', () => {
-    it('should flatten parameter names with nested paths', () => {
-        const result = flattenParameterNames([
-            {
-                name: 'input'
-            },
-            {
-                name: 'documents',
-                children: [
-                    {
-                        name: 'title'
-                    },
-                    {
-                        name: 'meta',
-                        children: [
-                            {
-                                name: 'author'
-                            }
-                        ]
-                    }
-                ]
-            }
-        ]);
+  it('should flatten parameter names with nested paths', () => {
+    const result = flattenParameterNames([
+      {
+        name: 'input',
+      },
+      {
+        name: 'documents',
+        children: [
+          {
+            name: 'title',
+          },
+          {
+            name: 'meta',
+            children: [
+              {
+                name: 'author',
+              },
+            ],
+          },
+        ],
+      },
+    ]);
 
-        expect(result).toEqual([
-            'input',
-            'documents',
-            'documents.title',
-            'documents.meta',
-            'documents.meta.author'
-        ]);
+    expect(result).toEqual([
+      'input',
+      'documents',
+      'documents.title',
+      'documents.meta',
+      'documents.meta.author',
+    ]);
+  });
+
+  it('should keep unresolved candidates in parameter list', () => {
+    const result = flattenParameterCandidates([
+      {
+        name: 'input',
+        refType: 'ref',
+        ref: '',
+      },
+      {
+        name: 'docs',
+        refType: 'ref',
+        ref: 'documents',
+      },
+      {
+        name: 'runtimeInput',
+        refType: 'input',
+      },
+    ]);
+
+    expect(result).toEqual([
+      {
+        name: 'input',
+        resolved: false,
+      },
+      {
+        name: 'docs',
+        resolved: true,
+      },
+      {
+        name: 'runtimeInput',
+        resolved: true,
+      },
+    ]);
+  });
+
+  it('should insert token text in the middle by cursor range', () => {
+    const result = insertTextAtCursor('hello world', '{{input}}', 6, 11);
+    expect(result).toEqual({
+      value: 'hello {{input}}',
+      cursor: 15,
+    });
+  });
+
+  it('should append token text when cursor info is missing', () => {
+    const result = insertTextAtCursor('hello', '{{name}}');
+    expect(result).toEqual({
+      value: 'hello{{name}}',
+      cursor: 13,
+    });
+  });
+
+  it('should parse token parts and mark valid tokens', () => {
+    const parts = parseTokenParts('你好 {{ user.name }} 与 {{unknown}}', [
+      'user.name',
+      'docs',
+    ]);
+
+    expect(parts).toEqual([
+      {
+        type: 'text',
+        text: '你好 ',
+      },
+      {
+        type: 'token',
+        text: '{{ user.name }}',
+        key: 'user.name',
+        valid: true,
+      },
+      {
+        type: 'text',
+        text: ' 与 ',
+      },
+      {
+        type: 'token',
+        text: '{{unknown}}',
+        key: 'unknown',
+        valid: false,
+      },
+    ]);
+  });
+
+  it('should keep plain text when token syntax is invalid', () => {
+    const parts = parseTokenParts('abc {{}} def', ['a']);
+    expect(parts).toEqual([
+      {
+        type: 'text',
+        text: 'abc {{}} def',
+      },
+    ]);
+  });
+
+  it('should split token display and hide braces text', () => {
+    const result = splitTokenDisplay('{{ user.name }}', 'user.name');
+    expect(result).toEqual({
+      hiddenPrefix: '{{ ',
+      visibleText: 'user.name',
+      hiddenSuffix: ' }}',
+    });
+  });
+
+  it('should find full token range for backspace delete', () => {
+    const content = 'hello {{input}} world';
+    const tokenEndCursor = 'hello {{input}}'.length;
+    const range = findBackspaceTokenRange(content, tokenEndCursor);
+
+    expect(range).toEqual({
+      start: 6,
+      end: 15,
+      text: '{{input}}',
+      key: 'input',
+    });
+  });
+
+  it('should support boundary match for arrow skip behavior', () => {
+    const content = 'x{{docs}}y';
+    const tokenStart = 1;
+    const tokenEnd = 9;
+
+    const rightBoundary = findTokenRangeAtCursor(content, tokenStart, {
+      includeStart: true,
+      includeEnd: false,
+    });
+    const leftBoundary = findTokenRangeAtCursor(content, tokenEnd, {
+      includeStart: false,
+      includeEnd: true,
     });
 
-    it('should keep unresolved candidates in parameter list', () => {
-        const result = flattenParameterCandidates([
-            {
-                name: 'input',
-                refType: 'ref',
-                ref: ''
-            },
-            {
-                name: 'docs',
-                refType: 'ref',
-                ref: 'documents'
-            },
-            {
-                name: 'runtimeInput',
-                refType: 'input'
-            }
-        ]);
-
-        expect(result).toEqual([
-            {
-                name: 'input',
-                resolved: false
-            },
-            {
-                name: 'docs',
-                resolved: true
-            },
-            {
-                name: 'runtimeInput',
-                resolved: true
-            }
-        ]);
-    });
-
-    it('should insert token text in the middle by cursor range', () => {
-        const result = insertTextAtCursor('hello world', '{{input}}', 6, 11);
-        expect(result).toEqual({
-            value: 'hello {{input}}',
-            cursor: 15
-        });
-    });
-
-    it('should append token text when cursor info is missing', () => {
-        const result = insertTextAtCursor('hello', '{{name}}');
-        expect(result).toEqual({
-            value: 'hello{{name}}',
-            cursor: 13
-        });
-    });
-
-    it('should parse token parts and mark valid tokens', () => {
-        const parts = parseTokenParts(
-            '你好 {{ user.name }} 与 {{unknown}}',
-            ['user.name', 'docs']
-        );
-
-        expect(parts).toEqual([
-            {
-                type: 'text',
-                text: '你好 '
-            },
-            {
-                type: 'token',
-                text: '{{ user.name }}',
-                key: 'user.name',
-                valid: true
-            },
-            {
-                type: 'text',
-                text: ' 与 '
-            },
-            {
-                type: 'token',
-                text: '{{unknown}}',
-                key: 'unknown',
-                valid: false
-            }
-        ]);
-    });
-
-    it('should keep plain text when token syntax is invalid', () => {
-        const parts = parseTokenParts('abc {{}} def', ['a']);
-        expect(parts).toEqual([
-            {
-                type: 'text',
-                text: 'abc {{}} def'
-            }
-        ]);
-    });
-
-    it('should split token display and hide braces text', () => {
-        const result = splitTokenDisplay('{{ user.name }}', 'user.name');
-        expect(result).toEqual({
-            hiddenPrefix: '{{ ',
-            visibleText: 'user.name',
-            hiddenSuffix: ' }}'
-        });
-    });
-
-    it('should find full token range for backspace delete', () => {
-        const content = 'hello {{input}} world';
-        const tokenEndCursor = 'hello {{input}}'.length;
-        const range = findBackspaceTokenRange(content, tokenEndCursor);
-
-        expect(range).toEqual({
-            start: 6,
-            end: 15,
-            text: '{{input}}',
-            key: 'input'
-        });
-    });
-
-    it('should support boundary match for arrow skip behavior', () => {
-        const content = 'x{{docs}}y';
-        const tokenStart = 1;
-        const tokenEnd = 9;
-
-        const rightBoundary = findTokenRangeAtCursor(content, tokenStart, {
-            includeStart: true,
-            includeEnd: false
-        });
-        const leftBoundary = findTokenRangeAtCursor(content, tokenEnd, {
-            includeStart: false,
-            includeEnd: true
-        });
-
-        expect(rightBoundary?.key).toBe('docs');
-        expect(leftBoundary?.key).toBe('docs');
-    });
+    expect(rightBoundary?.key).toBe('docs');
+    expect(leftBoundary?.key).toBe('docs');
+  });
 });
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/paramToken.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/paramToken.ts
index 28033e8..e05e8dd 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/paramToken.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/paramToken.ts
@@ -1,272 +1,292 @@
 export interface ParameterLike {
-    name?: string;
-    ref?: string;
-    refType?: string;
-    children?: ParameterLike[];
+  name?: string;
+  ref?: string;
+  refType?: string;
+  children?: ParameterLike[];
 }
 
 export interface TokenRange {
-    start: number;
-    end: number;
-    text: string;
-    key: string;
+  start: number;
+  end: number;
+  text: string;
+  key: string;
 }
 
 export type TokenPart =
-    | {
-          type: 'text';
-          text: string;
-      }
-    | {
-          type: 'token';
-          text: string;
-          key: string;
-          valid: boolean;
-      };
+  | {
+      type: 'text';
+      text: string;
+    }
+  | {
+      type: 'token';
+      text: string;
+      key: string;
+      valid: boolean;
+    };
 
 export interface ParameterCandidate {
-    name: string;
-    resolved: boolean;
+  name: string;
+  resolved: boolean;
 }
 
 const TOKEN_PATTERN = /\{\{\s*([^{}]+?)\s*}}/g;
 
 export function normalizeTokenKey(tokenKey: string): string {
-    return tokenKey.trim();
+  return tokenKey.trim();
 }
 
-export function flattenParameterNames(parameters?: ParameterLike[] | null): string[] {
-    return flattenParameterCandidates(parameters).map((item) => item.name);
+export function flattenParameterNames(
+  parameters?: ParameterLike[] | null,
+): string[] {
+  return flattenParameterCandidates(parameters).map((item) => item.name);
 }
 
 function isParameterResolved(parameter?: ParameterLike): boolean {
-    if (!parameter) {
-        return false;
-    }
+  if (!parameter) {
+    return false;
+  }
 
-    const refType = (parameter.refType || '').trim();
-    if (refType === 'fixed' || refType === 'input') {
-        return true;
-    }
+  const refType = (parameter.refType || '').trim();
+  if (refType === 'fixed' || refType === 'input') {
+    return true;
+  }
 
-    const ref = (parameter.ref || '').trim();
-    return !!ref;
+  const ref = (parameter.ref || '').trim();
+  return !!ref;
 }
 
-export function flattenParameterCandidates(parameters?: ParameterLike[] | null): ParameterCandidate[] {
-    if (!parameters || parameters.length === 0) {
-        return [];
+export function flattenParameterCandidates(
+  parameters?: ParameterLike[] | null,
+): ParameterCandidate[] {
+  if (!parameters || parameters.length === 0) {
+    return [];
+  }
+
+  const candidates: ParameterCandidate[] = [];
+  const indexMap = new Map<string, number>();
+
+  const addCandidate = (name: string, resolved: boolean) => {
+    const normalized = name.trim();
+    if (!normalized) {
+      return;
+    }
+    const exists = indexMap.get(normalized);
+    if (exists === undefined) {
+      indexMap.set(normalized, candidates.length);
+      candidates.push({
+        name: normalized,
+        resolved,
+      });
+      return;
     }
 
-    const candidates: ParameterCandidate[] = [];
-    const indexMap = new Map<string, number>();
+    // 同名参数只要有一个可解析，就视为可解析
+    if (resolved) {
+      candidates[exists].resolved = true;
+    }
+  };
 
-    const addCandidate = (name: string, resolved: boolean) => {
-        const normalized = name.trim();
-        if (!normalized) {
-            return;
-        }
-        const exists = indexMap.get(normalized);
-        if (exists === undefined) {
-            indexMap.set(normalized, candidates.length);
-            candidates.push({
-                name: normalized,
-                resolved
-            });
-            return;
-        }
+  const walk = (
+    items: ParameterLike[],
+    parentPath = '',
+    inheritedResolved = true,
+  ) => {
+    for (const item of items) {
+      const rawName = item?.name?.trim();
+      if (!rawName) {
+        continue;
+      }
 
-        // 同名参数只要有一个可解析，就视为可解析
-        if (resolved) {
-            candidates[exists].resolved = true;
-        }
-    };
+      const currentPath = parentPath ? `${parentPath}.${rawName}` : rawName;
+      const currentResolved = inheritedResolved && isParameterResolved(item);
+      addCandidate(currentPath, currentResolved);
 
-    const walk = (items: ParameterLike[], parentPath = '', inheritedResolved = true) => {
-        for (const item of items) {
-            const rawName = item?.name?.trim();
-            if (!rawName) {
-                continue;
-            }
+      if (item.children && item.children.length > 0) {
+        walk(item.children, currentPath, currentResolved);
+      }
+    }
+  };
 
-            const currentPath = parentPath ? `${parentPath}.${rawName}` : rawName;
-            const currentResolved = inheritedResolved && isParameterResolved(item);
-            addCandidate(currentPath, currentResolved);
-
-            if (item.children && item.children.length > 0) {
-                walk(item.children, currentPath, currentResolved);
-            }
-        }
-    };
-
-    walk(parameters);
-    return candidates;
+  walk(parameters);
+  return candidates;
 }
 
-export function parseTokenParts(content: string, validParams: string[] = []): TokenPart[] {
-    const source = content ?? '';
-    const validSet = new Set(validParams.map(normalizeTokenKey));
-    const parts: TokenPart[] = [];
+export function parseTokenParts(
+  content: string,
+  validParams: string[] = [],
+): TokenPart[] {
+  const source = content ?? '';
+  const validSet = new Set(validParams.map(normalizeTokenKey));
+  const parts: TokenPart[] = [];
 
-    let lastIndex = 0;
-    TOKEN_PATTERN.lastIndex = 0;
-    let match: RegExpExecArray | null = TOKEN_PATTERN.exec(source);
+  let lastIndex = 0;
+  TOKEN_PATTERN.lastIndex = 0;
+  let match: RegExpExecArray | null = TOKEN_PATTERN.exec(source);
 
-    while (match) {
-        if (match.index > lastIndex) {
-            parts.push({
-                type: 'text',
-                text: source.slice(lastIndex, match.index)
-            });
-        }
-
-        const rawToken = match[0];
-        const tokenKey = normalizeTokenKey(match[1] || '');
-        parts.push({
-            type: 'token',
-            text: rawToken,
-            key: tokenKey,
-            valid: validSet.has(tokenKey)
-        });
-
-        lastIndex = match.index + rawToken.length;
-        match = TOKEN_PATTERN.exec(source);
+  while (match) {
+    if (match.index > lastIndex) {
+      parts.push({
+        type: 'text',
+        text: source.slice(lastIndex, match.index),
+      });
     }
 
-    if (lastIndex < source.length) {
-        parts.push({
-            type: 'text',
-            text: source.slice(lastIndex)
-        });
-    }
+    const rawToken = match[0];
+    const tokenKey = normalizeTokenKey(match[1] || '');
+    parts.push({
+      type: 'token',
+      text: rawToken,
+      key: tokenKey,
+      valid: validSet.has(tokenKey),
+    });
 
-    if (parts.length === 0) {
-        parts.push({
-            type: 'text',
-            text: source
-        });
-    }
+    lastIndex = match.index + rawToken.length;
+    match = TOKEN_PATTERN.exec(source);
+  }
 
-    return parts;
+  if (lastIndex < source.length) {
+    parts.push({
+      type: 'text',
+      text: source.slice(lastIndex),
+    });
+  }
+
+  if (parts.length === 0) {
+    parts.push({
+      type: 'text',
+      text: source,
+    });
+  }
+
+  return parts;
 }
 
 export function getTokenRanges(content: string): TokenRange[] {
-    const source = content ?? '';
-    const ranges: TokenRange[] = [];
-    TOKEN_PATTERN.lastIndex = 0;
-    let match: RegExpExecArray | null = TOKEN_PATTERN.exec(source);
+  const source = content ?? '';
+  const ranges: TokenRange[] = [];
+  TOKEN_PATTERN.lastIndex = 0;
+  let match: RegExpExecArray | null = TOKEN_PATTERN.exec(source);
 
-    while (match) {
-        const rawToken = match[0];
-        ranges.push({
-            start: match.index,
-            end: match.index + rawToken.length,
-            text: rawToken,
-            key: normalizeTokenKey(match[1] || '')
-        });
-        match = TOKEN_PATTERN.exec(source);
-    }
+  while (match) {
+    const rawToken = match[0];
+    ranges.push({
+      start: match.index,
+      end: match.index + rawToken.length,
+      text: rawToken,
+      key: normalizeTokenKey(match[1] || ''),
+    });
+    match = TOKEN_PATTERN.exec(source);
+  }
 
-    return ranges;
+  return ranges;
 }
 
 export function findTokenRangeAtCursor(
-    content: string,
-    cursor: number,
-    options?: {
-        includeStart?: boolean;
-        includeEnd?: boolean;
-    }
+  content: string,
+  cursor: number,
+  options?: {
+    includeStart?: boolean;
+    includeEnd?: boolean;
+  },
 ): TokenRange | null {
-    if (!Number.isInteger(cursor) || cursor < 0) {
-        return null;
-    }
-
-    const includeStart = options?.includeStart ?? false;
-    const includeEnd = options?.includeEnd ?? false;
-    const ranges = getTokenRanges(content);
-    for (const range of ranges) {
-        const leftValid = includeStart ? cursor >= range.start : cursor > range.start;
-        const rightValid = includeEnd ? cursor <= range.end : cursor < range.end;
-        if (leftValid && rightValid) {
-            return range;
-        }
-    }
-
+  if (!Number.isInteger(cursor) || cursor < 0) {
     return null;
+  }
+
+  const includeStart = options?.includeStart ?? false;
+  const includeEnd = options?.includeEnd ?? false;
+  const ranges = getTokenRanges(content);
+  for (const range of ranges) {
+    const leftValid = includeStart
+      ? cursor >= range.start
+      : cursor > range.start;
+    const rightValid = includeEnd ? cursor <= range.end : cursor < range.end;
+    if (leftValid && rightValid) {
+      return range;
+    }
+  }
+
+  return null;
 }
 
-export function findBackspaceTokenRange(content: string, cursor: number): TokenRange | null {
-    return findTokenRangeAtCursor(content, cursor, {
-        includeStart: false,
-        includeEnd: true
-    });
+export function findBackspaceTokenRange(
+  content: string,
+  cursor: number,
+): TokenRange | null {
+  return findTokenRangeAtCursor(content, cursor, {
+    includeStart: false,
+    includeEnd: true,
+  });
 }
 
-export function splitTokenDisplay(rawToken: string, normalizedKey?: string): {
-    hiddenPrefix: string;
-    visibleText: string;
-    hiddenSuffix: string;
+export function splitTokenDisplay(
+  rawToken: string,
+  normalizedKey?: string,
+): {
+  hiddenPrefix: string;
+  visibleText: string;
+  hiddenSuffix: string;
 } {
-    const source = rawToken ?? '';
-    if (!source.startsWith('{{') || !source.endsWith('}}')) {
-        return {
-            hiddenPrefix: '',
-            visibleText: normalizedKey || source,
-            hiddenSuffix: ''
-        };
-    }
-
-    const inner = source.slice(2, -2);
-    const visibleText = normalizeTokenKey(normalizedKey || inner);
-    if (!visibleText) {
-        return {
-            hiddenPrefix: '',
-            visibleText: source,
-            hiddenSuffix: ''
-        };
-    }
-
-    const innerStart = inner.indexOf(visibleText);
-    const leading = innerStart >= 0 ? inner.slice(0, innerStart) : '';
-    const trailing = innerStart >= 0 ? inner.slice(innerStart + visibleText.length) : '';
-
+  const source = rawToken ?? '';
+  if (!source.startsWith('{{') || !source.endsWith('}}')) {
     return {
-        hiddenPrefix: `{{${leading}`,
-        visibleText,
-        hiddenSuffix: `${trailing}}}`
+      hiddenPrefix: '',
+      visibleText: normalizedKey || source,
+      hiddenSuffix: '',
     };
+  }
+
+  const inner = source.slice(2, -2);
+  const visibleText = normalizeTokenKey(normalizedKey || inner);
+  if (!visibleText) {
+    return {
+      hiddenPrefix: '',
+      visibleText: source,
+      hiddenSuffix: '',
+    };
+  }
+
+  const innerStart = inner.indexOf(visibleText);
+  const leading = innerStart >= 0 ? inner.slice(0, innerStart) : '';
+  const trailing =
+    innerStart >= 0 ? inner.slice(innerStart + visibleText.length) : '';
+
+  return {
+    hiddenPrefix: `{{${leading}`,
+    visibleText,
+    hiddenSuffix: `${trailing}}}`,
+  };
 }
 
 export function insertTextAtCursor(
-    content: string,
-    insertedText: string,
-    selectionStart?: number | null,
-    selectionEnd?: number | null
+  content: string,
+  insertedText: string,
+  selectionStart?: number | null,
+  selectionEnd?: number | null,
 ): {
-    value: string;
-    cursor: number;
+  value: string;
+  cursor: number;
 } {
-    const source = content ?? '';
-    const start = Number.isInteger(selectionStart)
-        ? Math.max(0, Math.min(selectionStart as number, source.length))
-        : source.length;
-    const end = Number.isInteger(selectionEnd)
-        ? Math.max(start, Math.min(selectionEnd as number, source.length))
-        : start;
+  const source = content ?? '';
+  const start = Number.isInteger(selectionStart)
+    ? Math.max(0, Math.min(selectionStart as number, source.length))
+    : source.length;
+  const end = Number.isInteger(selectionEnd)
+    ? Math.max(start, Math.min(selectionEnd as number, source.length))
+    : start;
 
-    const nextValue = source.slice(0, start) + insertedText + source.slice(end);
-    return {
-        value: nextValue,
-        cursor: start + insertedText.length
-    };
+  const nextValue = source.slice(0, start) + insertedText + source.slice(end);
+  return {
+    value: nextValue,
+    cursor: start + insertedText.length,
+  };
 }
 
 export function escapeHtml(text: string): string {
-    return text
-        .replaceAll('&', '&amp;')
-        .replaceAll('<', '&lt;')
-        .replaceAll('>', '&gt;')
-        .replaceAll('"', '&quot;')
-        .replaceAll("'", '&#39;');
+  return text
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
 }
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useAddParameter.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useAddParameter.svelte.ts
index 24a1205..84e3670 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useAddParameter.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useAddParameter.svelte.ts
@@ -1,63 +1,63 @@
-import {genShortId} from './IdGen';
-import {useSvelteFlow} from '@xyflow/svelte';
-import type {Parameter} from '#types';
+import { genShortId } from './IdGen';
+import { useSvelteFlow } from '@xyflow/svelte';
+import type { Parameter } from '#types';
 
 export const fillParameterId = (parameters?: Parameter[]) => {
-    if (!parameters || parameters.length == 0) {
-        return parameters;
-    }
-    parameters.forEach((parameter) => {
-        if (!parameter.id) {
-            parameter.id = genShortId();
-        }
-        fillParameterId(parameter.children);
-    });
-
+  if (!parameters || parameters.length == 0) {
     return parameters;
+  }
+  parameters.forEach((parameter) => {
+    if (!parameter.id) {
+      parameter.id = genShortId();
+    }
+    fillParameterId(parameter.children);
+  });
+
+  return parameters;
 };
 
 export const useAddParameter = () => {
-    const { updateNodeData } = useSvelteFlow();
-    return {
-        addParameter: (
-            nodeId: string,
-            dataKey: string = 'parameters',
-            parameter?: Parameter | Parameter[]
-        ) => {
-            if (Array.isArray(parameter)) {
-                parameter.forEach((p) => fillParameterId(p?.children));
-            } else {
-                fillParameterId(parameter?.children);
-            }
+  const { updateNodeData } = useSvelteFlow();
+  return {
+    addParameter: (
+      nodeId: string,
+      dataKey: string = 'parameters',
+      parameter?: Parameter | Parameter[],
+    ) => {
+      if (Array.isArray(parameter)) {
+        parameter.forEach((p) => fillParameterId(p?.children));
+      } else {
+        fillParameterId(parameter?.children);
+      }
 
-            function createNewParameter(parameter: Parameter) {
-                return {
-                    name: '',
-                    dataType: 'String',
-                    refType: 'ref',
-                    ...parameter,
-                    id: genShortId()
-                };
-            }
+      function createNewParameter(parameter: Parameter) {
+        return {
+          name: '',
+          dataType: 'String',
+          refType: 'ref',
+          ...parameter,
+          id: genShortId(),
+        };
+      }
 
-            const newParameters: Parameter[] = [];
-            if (Array.isArray(parameter)) {
-                newParameters.push(...parameter.map(createNewParameter));
-            } else {
-                newParameters.push(createNewParameter(parameter as Parameter));
-            }
+      const newParameters: Parameter[] = [];
+      if (Array.isArray(parameter)) {
+        newParameters.push(...parameter.map(createNewParameter));
+      } else {
+        newParameters.push(createNewParameter(parameter as Parameter));
+      }
 
-            updateNodeData(nodeId, (node) => {
-                let parameters = node.data[dataKey] as Array<any>;
-                if (parameters) {
-                    parameters.push(...newParameters);
-                } else {
-                    parameters = [...newParameters];
-                }
-                return {
-                    [dataKey]: [...parameters]
-                };
-            });
+      updateNodeData(nodeId, (node) => {
+        let parameters = node.data[dataKey] as Array<any>;
+        if (parameters) {
+          parameters.push(...newParameters);
+        } else {
+          parameters = [...newParameters];
         }
-    };
+        return {
+          [dataKey]: [...parameters],
+        };
+      });
+    },
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useCopyNode.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useCopyNode.svelte.ts
index df15e35..b8f56d0 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useCopyNode.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useCopyNode.svelte.ts
@@ -1,27 +1,27 @@
-import {genShortId} from './IdGen';
-import {store} from '#store/stores.svelte';
+import { genShortId } from './IdGen';
+import { store } from '#store/stores.svelte';
 
 export const useCopyNode = () => {
-    const copyNode = (id: string) => {
-        const node = store.getNode(id);
-        if (node) {
-            const newNodeId = genShortId();
-            const newNode = {
-                ...node,
-                id: newNodeId,
-                position: {
-                    x: node.position.x + 50,
-                    y: node.position.y + 50
-                }
-            };
+  const copyNode = (id: string) => {
+    const node = store.getNode(id);
+    if (node) {
+      const newNodeId = genShortId();
+      const newNode = {
+        ...node,
+        id: newNodeId,
+        position: {
+          x: node.position.x + 50,
+          y: node.position.y + 50,
+        },
+      };
 
-            store.updateNodes((nodes) => {
-                const newNodes = nodes.map((n) => ({ ...n, selected: false }));
-                return [...newNodes, newNode];
-            });
-        }
-    };
-    return {
-        copyNode
-    };
+      store.updateNodes((nodes) => {
+        const newNodes = nodes.map((n) => ({ ...n, selected: false }));
+        return [...newNodes, newNode];
+      });
+    }
+  };
+  return {
+    copyNode,
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useCopyPasteHandler.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useCopyPasteHandler.svelte.ts
index f54060f..3e77ab0 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useCopyPasteHandler.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useCopyPasteHandler.svelte.ts
@@ -1,26 +1,26 @@
-import {store} from '#store/stores.svelte';
-import {genShortId} from '#components/utils/IdGen';
-import {type Edge, type Node, useSvelteFlow} from '@xyflow/svelte';
+import { store } from '#store/stores.svelte';
+import { genShortId } from '#components/utils/IdGen';
+import { type Edge, type Node, useSvelteFlow } from '@xyflow/svelte';
 
 interface ClipboardData {
-    tinyflowNodes: Node[];
-    tinyflowEdges?: Edge[];
-    version: string;
+  tinyflowNodes: Node[];
+  tinyflowEdges?: Edge[];
+  version: string;
 }
 
 /**
  * 清理节点中不可序列化的字段，确保可安全 JSON.stringify
  */
 function sanitizeNode(node: Node): Node {
-    const { id, type, position, data, parentId } = node;
-    return {
-        id,
-        type,
-        position: { x: position.x, y: position.y },
-        parentId: parentId ? parentId : undefined,
-        data: data ? JSON.parse(JSON.stringify(data)) : {},
-        ...(parentId !== undefined && { parentId })
-    };
+  const { id, type, position, data, parentId } = node;
+  return {
+    id,
+    type,
+    position: { x: position.x, y: position.y },
+    parentId: parentId ? parentId : undefined,
+    data: data ? JSON.parse(JSON.stringify(data)) : {},
+    ...(parentId !== undefined && { parentId }),
+  };
 }
 
 /**
@@ -28,255 +28,254 @@ function sanitizeNode(node: Node): Node {
  * 使用 Kahn 算法（拓扑排序）处理任意嵌套层级。
  */
 export function sortNodesForSvelteFlow(nodes: Node[]): Node[] {
-    const nodeMap = new Map<string, Node>();
-    const inDegree = new Map<string, number>(); // 每个节点的“依赖数”（即是否为子节点）
-    const childrenMap = new Map<string, string[]>(); // parentId -> childIds
+  const nodeMap = new Map<string, Node>();
+  const inDegree = new Map<string, number>(); // 每个节点的“依赖数”（即是否为子节点）
+  const childrenMap = new Map<string, string[]>(); // parentId -> childIds
 
-    // 初始化
-    for (const node of nodes) {
-        nodeMap.set(node.id, node);
-        inDegree.set(node.id, 0); // 默认无依赖
-        if (node.parentId) {
-            // 子节点依赖父节点
-            inDegree.set(node.id, 1);
-            if (!childrenMap.has(node.parentId)) {
-                childrenMap.set(node.parentId, []);
-            }
-            childrenMap.get(node.parentId)!.push(node.id);
-        }
+  // 初始化
+  for (const node of nodes) {
+    nodeMap.set(node.id, node);
+    inDegree.set(node.id, 0); // 默认无依赖
+    if (node.parentId) {
+      // 子节点依赖父节点
+      inDegree.set(node.id, 1);
+      if (!childrenMap.has(node.parentId)) {
+        childrenMap.set(node.parentId, []);
+      }
+      childrenMap.get(node.parentId)!.push(node.id);
     }
+  }
 
-    // 所有根节点（无 parentId 或父不存在）入队
-    const queue: Node[] = [];
-    for (const node of nodes) {
-        if (!node.parentId || !nodeMap.has(node.parentId)) {
-            queue.push(node);
-        }
+  // 所有根节点（无 parentId 或父不存在）入队
+  const queue: Node[] = [];
+  for (const node of nodes) {
+    if (!node.parentId || !nodeMap.has(node.parentId)) {
+      queue.push(node);
     }
+  }
 
-    const result: Node[] = [];
-    const visited = new Set<string>();
+  const result: Node[] = [];
+  const visited = new Set<string>();
 
-    // BFS 拓扑排序
-    while (queue.length > 0) {
-        const node = queue.shift()!;
-        if (visited.has(node.id)) continue;
-        visited.add(node.id);
-        result.push(node);
+  // BFS 拓扑排序
+  while (queue.length > 0) {
+    const node = queue.shift()!;
+    if (visited.has(node.id)) continue;
+    visited.add(node.id);
+    result.push(node);
 
-        // 将该节点的所有直接子节点入队（如果其父已处理）
-        const children = childrenMap.get(node.id) || [];
-        for (const childId of children) {
-            if (!visited.has(childId)) {
-                queue.push(nodeMap.get(childId)!);
-            }
-        }
+    // 将该节点的所有直接子节点入队（如果其父已处理）
+    const children = childrenMap.get(node.id) || [];
+    for (const childId of children) {
+      if (!visited.has(childId)) {
+        queue.push(nodeMap.get(childId)!);
+      }
     }
+  }
 
-    // 补充可能遗漏的节点（如循环引用或孤立子节点）
-    for (const node of nodes) {
-        if (!visited.has(node.id)) {
-            result.push(node);
-        }
+  // 补充可能遗漏的节点（如循环引用或孤立子节点）
+  for (const node of nodes) {
+    if (!visited.has(node.id)) {
+      result.push(node);
     }
+  }
 
-    return result;
+  return result;
 }
 
 /**
  * 清理边中不可序列化的字段
  */
 function sanitizeEdge(edge: Edge): Edge {
-    const { id, source, target, sourceHandle, targetHandle, type, data } = edge;
-    return {
-        id,
-        source,
-        target,
-        ...(sourceHandle !== undefined && { sourceHandle }),
-        ...(targetHandle !== undefined && { targetHandle }),
-        ...(type !== undefined && { type }),
-        data: data ? JSON.parse(JSON.stringify(data)) : {}
-    };
+  const { id, source, target, sourceHandle, targetHandle, type, data } = edge;
+  return {
+    id,
+    source,
+    target,
+    ...(sourceHandle !== undefined && { sourceHandle }),
+    ...(targetHandle !== undefined && { targetHandle }),
+    ...(type !== undefined && { type }),
+    data: data ? JSON.parse(JSON.stringify(data)) : {},
+  };
 }
 
 /**
  * 递归遍历对象，仅当遇到 { refType: 'ref', ref: string } 时重写 ref 的 id
  */
 function rewriteRefsInData(obj: any, idMap: Map<string, string>): any {
-    if (obj === null || obj === undefined) {
-        return obj;
-    }
-
-    // 如果是数组，递归处理每个元素
-    if (Array.isArray(obj)) {
-        return obj.map((item) => rewriteRefsInData(item, idMap));
-    }
-
-    // 如果是对象，检查是否为引用对象
-    if (typeof obj === 'object') {
-        // 检查是否是引用定义：refType === 'ref' 且有 ref 字段
-        if (obj.refType === 'ref' && typeof obj.ref === 'string') {
-            const match = obj.ref.match(/^([^.\s]+)\.(.+)$/);
-            if (match) {
-                const [_, oldNodeId, paramId] = match;
-                const newNodeId = idMap.get(oldNodeId);
-                if (newNodeId !== undefined) {
-                    // 返回新对象，避免修改原数据
-                    return {
-                        ...obj,
-                        ref: `${newNodeId}.${paramId}`
-                    };
-                }
-            }
-        }
-
-        // 递归处理所有子属性
-        const result: Record<string, any> = {};
-        for (const key in obj) {
-            if (Object.hasOwn(obj, key)) {
-                result[key] = rewriteRefsInData(obj[key], idMap);
-            }
-        }
-        return result;
-    }
-
-    // 原始类型（string/number/boolean）直接返回
+  if (obj === null || obj === undefined) {
     return obj;
+  }
+
+  // 如果是数组，递归处理每个元素
+  if (Array.isArray(obj)) {
+    return obj.map((item) => rewriteRefsInData(item, idMap));
+  }
+
+  // 如果是对象，检查是否为引用对象
+  if (typeof obj === 'object') {
+    // 检查是否是引用定义：refType === 'ref' 且有 ref 字段
+    if (obj.refType === 'ref' && typeof obj.ref === 'string') {
+      const match = obj.ref.match(/^([^.\s]+)\.(.+)$/);
+      if (match) {
+        const [_, oldNodeId, paramId] = match;
+        const newNodeId = idMap.get(oldNodeId);
+        if (newNodeId !== undefined) {
+          // 返回新对象，避免修改原数据
+          return {
+            ...obj,
+            ref: `${newNodeId}.${paramId}`,
+          };
+        }
+      }
+    }
+
+    // 递归处理所有子属性
+    const result: Record<string, any> = {};
+    for (const key in obj) {
+      if (Object.hasOwn(obj, key)) {
+        result[key] = rewriteRefsInData(obj[key], idMap);
+      }
+    }
+    return result;
+  }
+
+  // 原始类型（string/number/boolean）直接返回
+  return obj;
 }
 
 /**
  * 复制粘贴处理器 Hook
  */
 export const useCopyPasteHandler = () => {
-    const svelteFlow = useSvelteFlow();
+  const svelteFlow = useSvelteFlow();
 
-    const copyHandler = async (event: ClipboardEvent | KeyboardEvent) => {
-        const selectedNodes = store.getNodes().filter((node) => node.selected);
-        if (selectedNodes.length === 0) return;
+  const copyHandler = async (event: ClipboardEvent | KeyboardEvent) => {
+    const selectedNodes = store.getNodes().filter((node) => node.selected);
+    if (selectedNodes.length === 0) return;
 
-        // 获取完全包含在选中节点之间的边（起点和终点都被选中）
-        const allEdges = store.getEdges();
-        const relatedEdges = allEdges.filter(
-            (edge) =>
-                selectedNodes.some((n) => n.id === edge.source) &&
-                selectedNodes.some((n) => n.id === edge.target)
-        );
+    // 获取完全包含在选中节点之间的边（起点和终点都被选中）
+    const allEdges = store.getEdges();
+    const relatedEdges = allEdges.filter(
+      (edge) =>
+        selectedNodes.some((n) => n.id === edge.source) &&
+        selectedNodes.some((n) => n.id === edge.target),
+    );
 
-        const serializableNodes = selectedNodes.map(sanitizeNode);
-        const serializableEdges = relatedEdges.map(sanitizeEdge);
+    const serializableNodes = selectedNodes.map(sanitizeNode);
+    const serializableEdges = relatedEdges.map(sanitizeEdge);
 
-        const clipboardData: ClipboardData = {
-            tinyflowNodes: serializableNodes,
-            tinyflowEdges: serializableEdges,
-            version: '1.0'
-        };
-
-        const jsonStr = JSON.stringify(clipboardData, null, 0);
-
-        try {
-            // 优先使用 event.clipboardData（在 copy 事件中可用，无需权限）
-            if ('clipboardData' in event && event.clipboardData) {
-                event.clipboardData.setData('text/plain', jsonStr);
-                if (event instanceof ClipboardEvent) {
-                    event.preventDefault();
-                }
-            } else {
-                // 降级到 navigator.clipboard（需用户手势）
-                await navigator.clipboard.writeText(jsonStr);
-            }
-            console.log('Copied nodes and edges to clipboard');
-        } catch (err) {
-            console.error('Failed to copy:', err);
-            // 可选：同源降级存储
-            try {
-                sessionStorage.setItem('tinyflow_clipboard', jsonStr);
-            } catch {}
-        }
+    const clipboardData: ClipboardData = {
+      tinyflowNodes: serializableNodes,
+      tinyflowEdges: serializableEdges,
+      version: '1.0',
     };
 
+    const jsonStr = JSON.stringify(clipboardData, null, 0);
 
-    const pasteHandler = (event: ClipboardEvent) => {
-        const text = event.clipboardData?.getData('text/plain');
-        if (!text) return;
-
-        let parsed: ClipboardData | null = null;
-        try {
-            parsed = JSON.parse(text);
-        } catch {
-            return; // 忽略非 JSON 内容
+    try {
+      // 优先使用 event.clipboardData（在 copy 事件中可用，无需权限）
+      if ('clipboardData' in event && event.clipboardData) {
+        event.clipboardData.setData('text/plain', jsonStr);
+        if (event instanceof ClipboardEvent) {
+          event.preventDefault();
         }
+      } else {
+        // 降级到 navigator.clipboard（需用户手势）
+        await navigator.clipboard.writeText(jsonStr);
+      }
+      console.log('Copied nodes and edges to clipboard');
+    } catch (err) {
+      console.error('Failed to copy:', err);
+      // 可选：同源降级存储
+      try {
+        sessionStorage.setItem('tinyflow_clipboard', jsonStr);
+      } catch {}
+    }
+  };
 
-        if (!parsed?.tinyflowNodes || !Array.isArray(parsed.tinyflowNodes)) {
-            return;
-        }
+  const pasteHandler = (event: ClipboardEvent) => {
+    const text = event.clipboardData?.getData('text/plain');
+    if (!text) return;
 
-        event.preventDefault();
+    let parsed: ClipboardData | null = null;
+    try {
+      parsed = JSON.parse(text);
+    } catch {
+      return; // 忽略非 JSON 内容
+    }
 
-        const pastedNodes = sortNodesForSvelteFlow(parsed.tinyflowNodes);
-        const pastedEdges = parsed.tinyflowEdges || [];
+    if (!parsed?.tinyflowNodes || !Array.isArray(parsed.tinyflowNodes)) {
+      return;
+    }
 
-        // 创建新节点（带新 ID 和偏移）
-        const newNodeIdMap = new Map<string, string>();
-        const newNodes: Node[] = [];
+    event.preventDefault();
 
-        for (const node of pastedNodes) {
-            const newId = `node_${genShortId()}`;
-            newNodeIdMap.set(node.id, newId);
-        }
+    const pastedNodes = sortNodesForSvelteFlow(parsed.tinyflowNodes);
+    const pastedEdges = parsed.tinyflowEdges || [];
 
-        // 构建新节点（含重写后的 data）
-        for (const node of pastedNodes) {
-            const newId = newNodeIdMap.get(node.id)!;
+    // 创建新节点（带新 ID 和偏移）
+    const newNodeIdMap = new Map<string, string>();
+    const newNodes: Node[] = [];
 
-            const newParentId =
-                node.parentId !== undefined
-                    ? newNodeIdMap.get(node.parentId) // 安全：即使父不在粘贴范围内，也会是 undefined
-                    : undefined;
+    for (const node of pastedNodes) {
+      const newId = `node_${genShortId()}`;
+      newNodeIdMap.set(node.id, newId);
+    }
 
-            const newData = rewriteRefsInData(node.data, newNodeIdMap);
+    // 构建新节点（含重写后的 data）
+    for (const node of pastedNodes) {
+      const newId = newNodeIdMap.get(node.id)!;
 
-            newNodes.push({
-                ...node,
-                id: newId,
-                parentId: newParentId,
-                data: newData,
-                position: {
-                    x: (node.position?.x ?? 0) + 50,
-                    y: (node.position?.y ?? 0) + 50
-                },
-                selected: true
-            });
-        }
+      const newParentId =
+        node.parentId !== undefined
+          ? newNodeIdMap.get(node.parentId) // 安全：即使父不在粘贴范围内，也会是 undefined
+          : undefined;
 
-        // 创建新边（仅当两端都在粘贴范围内）
-        const newEdges: Edge[] = [];
-        for (const edge of pastedEdges) {
-            const newSource = newNodeIdMap.get(edge.source);
-            const newTarget = newNodeIdMap.get(edge.target);
-            if (newSource && newTarget) {
-                newEdges.push({
-                    ...edge,
-                    id: `edge_${genShortId()}`,
-                    source: newSource,
-                    target: newTarget
-                });
-            }
-        }
+      const newData = rewriteRefsInData(node.data, newNodeIdMap);
 
-        // 更新 store：取消其他节点选中，添加新内容
-        store.updateNodes((nodes) => {
-            const unselected = nodes.map((n) => ({ ...n, selected: false }));
-            return [...unselected, ...newNodes];
+      newNodes.push({
+        ...node,
+        id: newId,
+        parentId: newParentId,
+        data: newData,
+        position: {
+          x: (node.position?.x ?? 0) + 50,
+          y: (node.position?.y ?? 0) + 50,
+        },
+        selected: true,
+      });
+    }
+
+    // 创建新边（仅当两端都在粘贴范围内）
+    const newEdges: Edge[] = [];
+    for (const edge of pastedEdges) {
+      const newSource = newNodeIdMap.get(edge.source);
+      const newTarget = newNodeIdMap.get(edge.target);
+      if (newSource && newTarget) {
+        newEdges.push({
+          ...edge,
+          id: `edge_${genShortId()}`,
+          source: newSource,
+          target: newTarget,
         });
+      }
+    }
 
-        store.updateEdges((edges) => {
-            const unselected = edges.map((n) => ({ ...n, selected: false }));
-            return [...unselected, ...newEdges];
-        });
-    };
+    // 更新 store：取消其他节点选中，添加新内容
+    store.updateNodes((nodes) => {
+      const unselected = nodes.map((n) => ({ ...n, selected: false }));
+      return [...unselected, ...newNodes];
+    });
 
-    return {
-        copyHandler,
-        pasteHandler
-    };
+    store.updateEdges((edges) => {
+      const unselected = edges.map((n) => ({ ...n, selected: false }));
+      return [...unselected, ...newEdges];
+    });
+  };
+
+  return {
+    copyHandler,
+    pasteHandler,
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useDeleteEdge.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useDeleteEdge.svelte.ts
index bdb29d2..a5026b8 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useDeleteEdge.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useDeleteEdge.svelte.ts
@@ -1,10 +1,10 @@
-import {store} from '#store/stores.svelte';
+import { store } from '#store/stores.svelte';
 
 export const useDeleteEdge = () => {
-    const deleteEdge = (id: string) => {
-        store.removeEdge( id);
-    };
-    return {
-        deleteEdge
-    };
+  const deleteEdge = (id: string) => {
+    store.removeEdge(id);
+  };
+  return {
+    deleteEdge,
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useDeleteNode.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useDeleteNode.svelte.ts
index cd925cb..9ed0829 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useDeleteNode.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useDeleteNode.svelte.ts
@@ -1,11 +1,13 @@
-import {store} from '#store/stores.svelte';
+import { store } from '#store/stores.svelte';
 
 export const useDeleteNode = () => {
-    const deleteNode = (id: string) => {
-        store.removeNode(id);
-        store.updateEdges(edges => edges.filter(edge => edge.source !== id && edge.target !== id))
-    };
-    return {
-        deleteNode
-    };
+  const deleteNode = (id: string) => {
+    store.removeNode(id);
+    store.updateEdges((edges) =>
+      edges.filter((edge) => edge.source !== id && edge.target !== id),
+    );
+  };
+  return {
+    deleteNode,
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useEnsureParentInNodesBefore.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useEnsureParentInNodesBefore.svelte.ts
index f994223..3772130 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useEnsureParentInNodesBefore.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useEnsureParentInNodesBefore.svelte.ts
@@ -1,43 +1,49 @@
-import {store} from '../../store/stores.svelte';
+import { store } from '../../store/stores.svelte';
 
 export const useEnsureParentInNodesBefore = () => {
-    const ensureParentInNodesBefore = (parentNodeId: string, childNodeId: string) => {
-        store.updateNodes((nodeArray) => {
-            let parentIndex = -1;
-            for (let i = 0; i < nodeArray.length; i++) {
-                if (nodeArray[i].id === parentNodeId) {
-                    parentIndex = i;
-                    break;
-                }
-            }
+  const ensureParentInNodesBefore = (
+    parentNodeId: string,
+    childNodeId: string,
+  ) => {
+    store.updateNodes((nodeArray) => {
+      let parentIndex = -1;
+      for (let i = 0; i < nodeArray.length; i++) {
+        if (nodeArray[i].id === parentNodeId) {
+          parentIndex = i;
+          break;
+        }
+      }
 
-            if (parentIndex <= 0) {
-                return nodeArray;
-            }
+      if (parentIndex <= 0) {
+        return nodeArray;
+      }
 
-            let firstChildIndex = -1;
-            for (let i = 0; i < parentIndex; i++) {
-                if (nodeArray[i].parentId === parentNodeId || nodeArray[i].id === childNodeId) {
-                    firstChildIndex = i;
-                    break;
-                }
-            }
+      let firstChildIndex = -1;
+      for (let i = 0; i < parentIndex; i++) {
+        if (
+          nodeArray[i].parentId === parentNodeId ||
+          nodeArray[i].id === childNodeId
+        ) {
+          firstChildIndex = i;
+          break;
+        }
+      }
 
-            if (firstChildIndex == -1) {
-                return nodeArray;
-            }
+      if (firstChildIndex == -1) {
+        return nodeArray;
+      }
 
-            const parentNode = nodeArray[parentIndex];
-            for (let i = parentIndex; i > firstChildIndex; i--) {
-                nodeArray[i] = nodeArray[i - 1];
-            }
-            nodeArray[firstChildIndex] = parentNode;
+      const parentNode = nodeArray[parentIndex];
+      for (let i = parentIndex; i > firstChildIndex; i--) {
+        nodeArray[i] = nodeArray[i - 1];
+      }
+      nodeArray[firstChildIndex] = parentNode;
 
-            return nodeArray;
-        });
-    };
+      return nodeArray;
+    });
+  };
 
-    return {
-        ensureParentInNodesBefore
-    };
+  return {
+    ensureParentInNodesBefore,
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetEdgesBySource.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetEdgesBySource.svelte.ts
index 76eb4f3..310f40d 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetEdgesBySource.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetEdgesBySource.svelte.ts
@@ -1,11 +1,11 @@
-import {store} from '#store/stores.svelte';
+import { store } from '#store/stores.svelte';
 
 export const useGetEdgesBySource = () => {
-    const getEdgesBySource = (target: string) => {
-        const edges = store.getEdges();
-        return edges.filter((edge) => edge.source === target);
-    };
-    return {
-        getEdgesBySource
-    };
+  const getEdgesBySource = (target: string) => {
+    const edges = store.getEdges();
+    return edges.filter((edge) => edge.source === target);
+  };
+  return {
+    getEdgesBySource,
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetEdgesByTarget.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetEdgesByTarget.svelte.ts
index ffd4ae6..3bf660c 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetEdgesByTarget.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetEdgesByTarget.svelte.ts
@@ -1,11 +1,11 @@
-import {store} from '#store/stores.svelte';
+import { store } from '#store/stores.svelte';
 
 export const useGetEdgesByTarget = () => {
-    const getEdgesByTarget = (target: string) => {
-        const edges = store.getEdges();
-        return edges.filter((edge) => edge.target === target);
-    };
-    return {
-        getEdgesByTarget
-    };
+  const getEdgesByTarget = (target: string) => {
+    const edges = store.getEdges();
+    return edges.filter((edge) => edge.target === target);
+  };
+  return {
+    getEdgesByTarget,
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetNode.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetNode.svelte.ts
index 08027eb..2ec7e2f 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetNode.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetNode.svelte.ts
@@ -1,10 +1,10 @@
-import {store} from '#store/stores.svelte';
+import { store } from '#store/stores.svelte';
 
 export const useGetNode = () => {
-    const getNode = (id: string) => {
-        return store.getNode(id);
-    };
-    return {
-        getNode
-    };
+  const getNode = (id: string) => {
+    return store.getNode(id);
+  };
+  return {
+    getNode,
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetNodeRelativePosition.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetNodeRelativePosition.svelte.ts
index 87f3af9..2669fbe 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetNodeRelativePosition.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetNodeRelativePosition.svelte.ts
@@ -1,22 +1,22 @@
-import {store} from '#store/stores.svelte';
+import { store } from '#store/stores.svelte';
 
 export const useGetNodeRelativePosition = () => {
-    const getNodeRelativePosition = (parentNodeId: string) => {
-        let node = store.getNode(parentNodeId);
-        const position = { x: 0, y: 0 };
-        while (node) {
-            position.x += node.position.x;
-            position.y += node.position.y;
+  const getNodeRelativePosition = (parentNodeId: string) => {
+    let node = store.getNode(parentNodeId);
+    const position = { x: 0, y: 0 };
+    while (node) {
+      position.x += node.position.x;
+      position.y += node.position.y;
 
-            if (node.parentId) {
-                node = store.getNode(node.parentId);
-            } else {
-                node = undefined;
-            }
-        }
-        return position;
-    };
-    return {
-        getNodeRelativePosition
-    };
+      if (node.parentId) {
+        node = store.getNode(node.parentId);
+      } else {
+        node = undefined;
+      }
+    }
+    return position;
+  };
+  return {
+    getNodeRelativePosition,
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetNodesFromSource.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetNodesFromSource.svelte.ts
index 2258a7f..e02875a 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetNodesFromSource.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useGetNodesFromSource.svelte.ts
@@ -1,31 +1,31 @@
-import {store} from '#store/stores.svelte';
-import type {Edge, Node} from '@xyflow/svelte';
+import { store } from '#store/stores.svelte';
+import type { Edge, Node } from '@xyflow/svelte';
 
 export const useGetNodesFromSource = () => {
-    const getEdgesBySource = (target: string, edges: Edge[]) => {
-        return edges.filter(
-            // 排除循环节点的子节点，否则在多层循环嵌套时不正确
-            (edge) => edge.source === target && edge.sourceHandle !== 'loop_handle'
-        );
-    };
+  const getEdgesBySource = (target: string, edges: Edge[]) => {
+    return edges.filter(
+      // 排除循环节点的子节点，否则在多层循环嵌套时不正确
+      (edge) => edge.source === target && edge.sourceHandle !== 'loop_handle',
+    );
+  };
 
-    const getNodesFromSource = (sourceNodeId: string) => {
-        const edges = store.getEdges();
-        const result: Node[] = [];
+  const getNodesFromSource = (sourceNodeId: string) => {
+    const edges = store.getEdges();
+    const result: Node[] = [];
 
-        let edgesFromSource = getEdgesBySource(sourceNodeId, edges);
-        while (edgesFromSource.length > 0) {
-            const newEdgesFromSource: Edge[] = [];
-            edgesFromSource.forEach((edge) => {
-                result.push(store.getNode(edge.target)!);
-                newEdgesFromSource.push(...getEdgesBySource(edge.target, edges));
-            });
-            edgesFromSource = newEdgesFromSource;
-        }
+    let edgesFromSource = getEdgesBySource(sourceNodeId, edges);
+    while (edgesFromSource.length > 0) {
+      const newEdgesFromSource: Edge[] = [];
+      edgesFromSource.forEach((edge) => {
+        result.push(store.getNode(edge.target)!);
+        newEdgesFromSource.push(...getEdgesBySource(edge.target, edges));
+      });
+      edgesFromSource = newEdgesFromSource;
+    }
 
-        return result;
-    };
-    return {
-        getNodesFromSource
-    };
+    return result;
+  };
+  return {
+    getNodesFromSource,
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useRefOptions.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useRefOptions.svelte.ts
index 45d5f63..924caf2 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useRefOptions.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useRefOptions.svelte.ts
@@ -1,154 +1,172 @@
-import {type Edge, type Node, useNodesData, useStore} from '@xyflow/svelte';
-import type {Parameter} from '#types';
-import {getCurrentNodeId, getOptions} from '#components/utils/NodeUtils';
-import {nodeIcons} from '../../consts';
+import { type Edge, type Node, useNodesData, useStore } from '@xyflow/svelte';
+import type { Parameter } from '#types';
+import { getCurrentNodeId, getOptions } from '#components/utils/NodeUtils';
+import { nodeIcons } from '../../consts';
 
-const fillRefNodeIds = (refNodeIds: string[], currentNodeId: string, edges: Edge[]) => {
-    for (const edge of edges) {
-        if (edge.target === currentNodeId && edge.source) {
-            refNodeIds.push(edge.source);
-            fillRefNodeIds(refNodeIds, edge.source, edges);
-        }
+const fillRefNodeIds = (
+  refNodeIds: string[],
+  currentNodeId: string,
+  edges: Edge[],
+) => {
+  for (const edge of edges) {
+    if (edge.target === currentNodeId && edge.source) {
+      refNodeIds.push(edge.source);
+      fillRefNodeIds(refNodeIds, edge.source, edges);
     }
+  }
 };
 
-const getChildren = (params: any, parentId: string, nodeIsChildren: boolean, nodeType: string) => {
-    if (!params || params.length === 0) return [];
-    return params.map((param: any) => {
+const getChildren = (
+  params: any,
+  parentId: string,
+  nodeIsChildren: boolean,
+  nodeType: string,
+) => {
+  if (!params || params.length === 0) return [];
+  return params.map((param: any) => {
+    const dataType = nodeIsChildren
+      ? `Array<${param.dataType || 'String'}>`
+      : param.dataType || 'String';
+    return {
+      label: param.name,
+      dataType: dataType,
+      value: parentId + '.' + param.name,
+      selectable: true,
+      nodeType: nodeType,
+      children: getChildren(
+        param.children,
+        parentId + '.' + param.name,
+        nodeIsChildren,
+        nodeType,
+      ),
+    };
+  });
+};
+
+const nodeToOptions = (
+  node: Node,
+  nodeIsChildren: boolean,
+  currentNode: Node,
+) => {
+  const options = getOptions();
+  const nodeType = node.type || '';
+
+  let icon: string | undefined = nodeIcons[nodeType];
+  if (!icon && options?.customNodes && options.customNodes[nodeType]) {
+    icon = options.customNodes[nodeType].icon;
+  }
+
+  // 如果仍然获取不到，尝试使用 data.icon (作为回退)
+  if (!icon && node.data && node.data.icon) {
+    icon = node.data.icon as string;
+  }
+
+  const title = node.data.title;
+
+  if (nodeType === 'startNode') {
+    const parameters = node.data.parameters as Array<Parameter>;
+    const children = [];
+    if (parameters)
+      for (const parameter of parameters) {
         const dataType = nodeIsChildren
-            ? `Array<${param.dataType || 'String'}>`
-            : (param.dataType || 'String');
-        return {
-            label: param.name,
-            dataType: dataType,
-            value: parentId + '.' + param.name,
-            selectable: true,
-            nodeType: nodeType,
-            children: getChildren(param.children, parentId + '.' + param.name, nodeIsChildren, nodeType)
-        };
-    });
-};
-
-const nodeToOptions = (node: Node, nodeIsChildren: boolean, currentNode: Node) => {
-    const options = getOptions();
-    const nodeType = node.type || '';
-    
-    let icon: string | undefined = nodeIcons[nodeType];
-    if (!icon && options?.customNodes && options.customNodes[nodeType]) {
-        icon = options.customNodes[nodeType].icon;
-    }
-    
-    // 如果仍然获取不到，尝试使用 data.icon (作为回退)
-    if (!icon && node.data && node.data.icon) {
-        icon = node.data.icon as string;
-    }
-
-    const title = node.data.title;
-
-    if (nodeType === 'startNode') {
-        const parameters = node.data.parameters as Array<Parameter>;
-        const children = [];
-        if (parameters)
-            for (const parameter of parameters) {
-                const dataType = nodeIsChildren
-                    ? `Array<${parameter.dataType || 'String'}>`
-                    : (parameter.dataType || 'String');
-                children.push({
-                    label: parameter.name,
-                    dataType: dataType,
-                    value: node.id + '.' + parameter.name,
-                    selectable: true,
-                    nodeType: nodeType
-                });
-            }
-        return {
-            label: title,
-            icon: icon,
-            value: node.id,
-            selectable: false,
-            nodeType: nodeType,
-            children
-        };
-    } else if (nodeType === 'loopNode' && currentNode.parentId) {
-        return {
-            label: title,
-            icon: icon,
-            value: node.id,
-            selectable: false,
-            nodeType: nodeType,
-            children: [
-                {
-                    label: 'loopItem',
-                    dataType: 'Any',
-                    value: node.id + '.loopItem',
-                    selectable: true,
-                    nodeType: nodeType
-                },
-                {
-                    label: 'index',
-                    dataType: 'Number',
-                    value: node.id + '.index',
-                    selectable: true,
-                    nodeType: nodeType
-                }
-            ]
-        };
-    } else {
-        const outputDefs = node.data.outputDefs;
-        if (outputDefs) {
-            return {
-                label: title,
-                icon: icon,
-                value: node.id,
-                selectable: false,
-                nodeType: nodeType,
-                children: getChildren(outputDefs, node.id, nodeIsChildren, nodeType)
-            };
-        }
+          ? `Array<${parameter.dataType || 'String'}>`
+          : parameter.dataType || 'String';
+        children.push({
+          label: parameter.name,
+          dataType: dataType,
+          value: node.id + '.' + parameter.name,
+          selectable: true,
+          nodeType: nodeType,
+        });
+      }
+    return {
+      label: title,
+      icon: icon,
+      value: node.id,
+      selectable: false,
+      nodeType: nodeType,
+      children,
+    };
+  } else if (nodeType === 'loopNode' && currentNode.parentId) {
+    return {
+      label: title,
+      icon: icon,
+      value: node.id,
+      selectable: false,
+      nodeType: nodeType,
+      children: [
+        {
+          label: 'loopItem',
+          dataType: 'Any',
+          value: node.id + '.loopItem',
+          selectable: true,
+          nodeType: nodeType,
+        },
+        {
+          label: 'index',
+          dataType: 'Number',
+          value: node.id + '.index',
+          selectable: true,
+          nodeType: nodeType,
+        },
+      ],
+    };
+  } else {
+    const outputDefs = node.data.outputDefs;
+    if (outputDefs) {
+      return {
+        label: title,
+        icon: icon,
+        value: node.id,
+        selectable: false,
+        nodeType: nodeType,
+        children: getChildren(outputDefs, node.id, nodeIsChildren, nodeType),
+      };
     }
+  }
 };
 
 export const useRefOptions: any = (useChildrenOnly: boolean = false) => {
-    const currentNodeId = getCurrentNodeId();
-    const currentNode = useNodesData(currentNodeId);
-    const { nodes, edges, nodeLookup } = $derived(useStore());
+  const currentNodeId = getCurrentNodeId();
+  const currentNode = useNodesData(currentNodeId);
+  const { nodes, edges, nodeLookup } = $derived(useStore());
 
-    let selectItems = $derived.by(() => {
-        const resultOptions = [];
-        if (!currentNode.current) {
-            return [];
+  let selectItems = $derived.by(() => {
+    const resultOptions = [];
+    if (!currentNode.current) {
+      return [];
+    }
+
+    //通过 nodeLookup.get 才会得到有 parentId 的 node
+    const cNode = nodeLookup.get(currentNodeId)!;
+
+    if (useChildrenOnly) {
+      for (const node of nodes) {
+        const nodeIsChildren = node.parentId === currentNode.current.id;
+        if (nodeIsChildren) {
+          const nodeOptions = nodeToOptions(node, nodeIsChildren, cNode);
+          nodeOptions && resultOptions.push(nodeOptions);
         }
+      }
+    } else {
+      const refNodeIds: string[] = [];
+      fillRefNodeIds(refNodeIds, currentNodeId, edges);
 
-        //通过 nodeLookup.get 才会得到有 parentId 的 node
-        const cNode = nodeLookup.get(currentNodeId)!;
-
-        if (useChildrenOnly) {
-            for (const node of nodes) {
-                const nodeIsChildren = node.parentId === currentNode.current.id;
-                if (nodeIsChildren) {
-                    const nodeOptions = nodeToOptions(node, nodeIsChildren, cNode);
-                    nodeOptions && resultOptions.push(nodeOptions);
-                }
-            }
-        } else {
-            const refNodeIds: string[] = [];
-            fillRefNodeIds(refNodeIds, currentNodeId, edges);
-
-            for (const node of nodes) {
-                if (refNodeIds.includes(node.id)) {
-                    const nodeIsChildren = node.parentId === currentNode.current.id;
-                    const nodeOptions = nodeToOptions(node, nodeIsChildren, cNode);
-                    nodeOptions && resultOptions.push(nodeOptions);
-                }
-            }
+      for (const node of nodes) {
+        if (refNodeIds.includes(node.id)) {
+          const nodeIsChildren = node.parentId === currentNode.current.id;
+          const nodeOptions = nodeToOptions(node, nodeIsChildren, cNode);
+          nodeOptions && resultOptions.push(nodeOptions);
         }
+      }
+    }
 
-        return resultOptions;
-    });
+    return resultOptions;
+  });
 
-    return {
-        get current() {
-            return selectItems;
-        }
-    };
+  return {
+    get current() {
+      return selectItems;
+    },
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useUpdateEdgeData.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useUpdateEdgeData.svelte.ts
index b4c522d..921a267 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useUpdateEdgeData.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/useUpdateEdgeData.svelte.ts
@@ -1,25 +1,30 @@
-import {store} from '#store/stores.svelte';
+import { store } from '#store/stores.svelte';
 
 export const useUpdateEdgeData = () => {
-    const updateEdgeData = (id: string, dataUpdate: any, options?: { replace: boolean }) => {
-        const edge = store.getEdge(id);
-        if (!edge) {
-            return;
+  const updateEdgeData = (
+    id: string,
+    dataUpdate: any,
+    options?: { replace: boolean },
+  ) => {
+    const edge = store.getEdge(id);
+    if (!edge) {
+      return;
+    }
+
+    const nextData =
+      typeof dataUpdate === 'function' ? dataUpdate(edge) : dataUpdate;
+    edge.data = options?.replace ? nextData : { ...edge.data, ...nextData };
+
+    store.updateEdges((edges) => {
+      return edges.map((e) => {
+        if (e.id === id) {
+          return edge;
         }
-
-        const nextData = typeof dataUpdate === 'function' ? dataUpdate(edge) : dataUpdate;
-        edge.data = options?.replace ? nextData : { ...edge.data, ...nextData };
-
-        store.updateEdges((edges) => {
-            return edges.map((e) => {
-                if (e.id === id) {
-                    return edge;
-                }
-                return e;
-            });
-        });
-    };
-    return {
-        updateEdgeData
-    };
+        return e;
+      });
+    });
+  };
+  return {
+    updateEdgeData,
+  };
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/consts.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/consts.ts
index 6640460..3898013 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/consts.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/consts.ts
@@ -1,79 +1,90 @@
 export const componentName = 'tinyflow-component';
 
 export const nodeIcons: Record<string, string> = {
-    startNode: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"></path></svg>',
-    loopNode: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path></svg>',
-    conditionNode: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4H10V10H4V4ZM14 4H20V10H14V4ZM4 14H10V20H4V14ZM14 14H20V20H14V14ZM10 7H14V9H10V7ZM7 10H9V14H7V10ZM15 10H17V14H15V10Z"></path></svg>',
-    llmNode: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.7134 7.12811L20.4668 7.69379C20.2864 8.10792 19.7136 8.10792 19.5331 7.69379L19.2866 7.12811C18.8471 6.11947 18.0555 5.31641 17.0677 4.87708L16.308 4.53922C15.8973 4.35653 15.8973 3.75881 16.308 3.57612L17.0252 3.25714C18.0384 2.80651 18.8442 1.97373 19.2761 0.930828L19.5293 0.319534C19.7058 -0.106511 20.2942 -0.106511 20.4706 0.319534L20.7238 0.930828C21.1558 1.97373 21.9616 2.80651 22.9748 3.25714L23.6919 3.57612C24.1027 3.75881 24.1027 4.35653 23.6919 4.53922L22.9323 4.87708C21.9445 5.31641 21.1529 6.11947 20.7134 7.12811ZM9 2C13.0675 2 16.426 5.03562 16.9337 8.96494L19.1842 12.5037C19.3324 12.7367 19.3025 13.0847 18.9593 13.2317L17 14.071V17C17 18.1046 16.1046 19 15 19H13.001L13 22H4L4.00025 18.3061C4.00033 17.1252 3.56351 16.0087 2.7555 15.0011C1.65707 13.6313 1 11.8924 1 10C1 5.58172 4.58172 2 9 2ZM9 4C5.68629 4 3 6.68629 3 10C3 11.3849 3.46818 12.6929 4.31578 13.7499C5.40965 15.114 6.00036 16.6672 6.00025 18.3063L6.00013 20H11.0007L11.0017 17H15V12.7519L16.5497 12.0881L15.0072 9.66262L14.9501 9.22118C14.5665 6.25141 12.0243 4 9 4ZM19.4893 16.9929L21.1535 18.1024C22.32 16.3562 23 14.2576 23 12.0001C23 11.317 22.9378 10.6486 22.8186 10L20.8756 10.5C20.9574 10.9878 21 11.489 21 12.0001C21 13.8471 20.4436 15.5642 19.4893 16.9929Z"></path></svg>',
-    knowledgeNode: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 5C13.567 5 12 6.567 12 8.5C12 10.433 13.567 12 15.5 12C17.433 12 19 10.433 19 8.5C19 6.567 17.433 5 15.5 5ZM10 8.5C10 5.46243 12.4624 3 15.5 3C18.5376 3 21 5.46243 21 8.5C21 9.6575 20.6424 10.7315 20.0317 11.6175L22.7071 14.2929L21.2929 15.7071L18.6175 13.0317C17.7315 13.6424 16.6575 14 15.5 14C12.4624 14 10 11.5376 10 8.5ZM3 4H8V6H3V4ZM3 11H8V13H3V11ZM21 18V20H3V18H21Z"></path></svg>',
-    searchEngineNode: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
-    httpNode: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.23509 6.45329C4.85101 7.89148 4 9.84636 4 12C4 16.4183 7.58172 20 12 20C13.0808 20 14.1116 19.7857 15.0521 19.3972C15.1671 18.6467 14.9148 17.9266 14.8116 17.6746C14.582 17.115 13.8241 16.1582 12.5589 14.8308C12.2212 14.4758 12.2429 14.2035 12.3636 13.3943L12.3775 13.3029C12.4595 12.7486 12.5971 12.4209 14.4622 12.1248C15.4097 11.9746 15.6589 12.3533 16.0043 12.8777C16.0425 12.9358 16.0807 12.9928 16.1198 13.0499C16.4479 13.5297 16.691 13.6394 17.0582 13.8064C17.2227 13.881 17.428 13.9751 17.7031 14.1314C18.3551 14.504 18.3551 14.9247 18.3551 15.8472V15.9518C18.3551 16.3434 18.3168 16.6872 18.2566 16.9859C19.3478 15.6185 20 13.8854 20 12C20 8.70089 18.003 5.8682 15.1519 4.64482C14.5987 5.01813 13.8398 5.54726 13.575 5.91C13.4396 6.09538 13.2482 7.04166 12.6257 7.11976C12.4626 7.14023 12.2438 7.12589 12.012 7.11097C11.3905 7.07058 10.5402 7.01606 10.268 7.75495C10.0952 8.2232 10.0648 9.49445 10.6239 10.1543C10.7134 10.2597 10.7307 10.4547 10.6699 10.6735C10.59 10.9608 10.4286 11.1356 10.3783 11.1717C10.2819 11.1163 10.0896 10.8931 9.95938 10.7412C9.64554 10.3765 9.25405 9.92233 8.74797 9.78176C8.56395 9.73083 8.36166 9.68867 8.16548 9.64736C7.6164 9.53227 6.99443 9.40134 6.84992 9.09302C6.74442 8.8672 6.74488 8.55621 6.74529 8.22764C6.74529 7.8112 6.74529 7.34029 6.54129 6.88256C6.46246 6.70541 6.35689 6.56446 6.23509 6.45329ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z"></path></svg>',
-    codeNode: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12L15.9289 19.0711L14.5147 17.6569L20.1716 12L14.5147 6.34317L15.9289 4.92896L23 12ZM3.82843 12L9.48528 17.6569L8.07107 19.0711L1 12L8.07107 4.92896L9.48528 6.34317L3.82843 12Z"></path></svg>',
-    templateNode: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4ZM4 5V19H20V5H4ZM7 8H17V11H15V10H13V14H14.5V16H9.5V14H11V10H9V11H7V8Z"></path></svg>',
-    confirmNode: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.3873 13.4975L17.9403 20.5117L13.2418 22.2218L10.6889 15.2076L6.79004 17.6529L8.4086 1.63318L19.9457 12.8646L15.3873 13.4975ZM15.3768 19.3163L12.6618 11.8568L15.6212 11.4459L9.98201 5.9561L9.19088 13.7863L11.7221 12.1988L14.4371 19.6583L15.3768 19.3163Z"></path></svg>',
-    endNode: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 5.1438V16.0002H18.3391L6 5.1438ZM4 2.932C4 2.07155 5.01456 1.61285 5.66056 2.18123L21.6501 16.2494C22.3423 16.8584 21.9116 18.0002 20.9896 18.0002H6V22H4V2.932Z"></path></svg>'
+  startNode:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15Z"></path></svg>',
+  loopNode:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path></svg>',
+  conditionNode:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4H10V10H4V4ZM14 4H20V10H14V4ZM4 14H10V20H4V14ZM14 14H20V20H14V14ZM10 7H14V9H10V7ZM7 10H9V14H7V10ZM15 10H17V14H15V10Z"></path></svg>',
+  llmNode:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.7134 7.12811L20.4668 7.69379C20.2864 8.10792 19.7136 8.10792 19.5331 7.69379L19.2866 7.12811C18.8471 6.11947 18.0555 5.31641 17.0677 4.87708L16.308 4.53922C15.8973 4.35653 15.8973 3.75881 16.308 3.57612L17.0252 3.25714C18.0384 2.80651 18.8442 1.97373 19.2761 0.930828L19.5293 0.319534C19.7058 -0.106511 20.2942 -0.106511 20.4706 0.319534L20.7238 0.930828C21.1558 1.97373 21.9616 2.80651 22.9748 3.25714L23.6919 3.57612C24.1027 3.75881 24.1027 4.35653 23.6919 4.53922L22.9323 4.87708C21.9445 5.31641 21.1529 6.11947 20.7134 7.12811ZM9 2C13.0675 2 16.426 5.03562 16.9337 8.96494L19.1842 12.5037C19.3324 12.7367 19.3025 13.0847 18.9593 13.2317L17 14.071V17C17 18.1046 16.1046 19 15 19H13.001L13 22H4L4.00025 18.3061C4.00033 17.1252 3.56351 16.0087 2.7555 15.0011C1.65707 13.6313 1 11.8924 1 10C1 5.58172 4.58172 2 9 2ZM9 4C5.68629 4 3 6.68629 3 10C3 11.3849 3.46818 12.6929 4.31578 13.7499C5.40965 15.114 6.00036 16.6672 6.00025 18.3063L6.00013 20H11.0007L11.0017 17H15V12.7519L16.5497 12.0881L15.0072 9.66262L14.9501 9.22118C14.5665 6.25141 12.0243 4 9 4ZM19.4893 16.9929L21.1535 18.1024C22.32 16.3562 23 14.2576 23 12.0001C23 11.317 22.9378 10.6486 22.8186 10L20.8756 10.5C20.9574 10.9878 21 11.489 21 12.0001C21 13.8471 20.4436 15.5642 19.4893 16.9929Z"></path></svg>',
+  knowledgeNode:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 5C13.567 5 12 6.567 12 8.5C12 10.433 13.567 12 15.5 12C17.433 12 19 10.433 19 8.5C19 6.567 17.433 5 15.5 5ZM10 8.5C10 5.46243 12.4624 3 15.5 3C18.5376 3 21 5.46243 21 8.5C21 9.6575 20.6424 10.7315 20.0317 11.6175L22.7071 14.2929L21.2929 15.7071L18.6175 13.0317C17.7315 13.6424 16.6575 14 15.5 14C12.4624 14 10 11.5376 10 8.5ZM3 4H8V6H3V4ZM3 11H8V13H3V11ZM21 18V20H3V18H21Z"></path></svg>',
+  searchEngineNode:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>',
+  httpNode:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.23509 6.45329C4.85101 7.89148 4 9.84636 4 12C4 16.4183 7.58172 20 12 20C13.0808 20 14.1116 19.7857 15.0521 19.3972C15.1671 18.6467 14.9148 17.9266 14.8116 17.6746C14.582 17.115 13.8241 16.1582 12.5589 14.8308C12.2212 14.4758 12.2429 14.2035 12.3636 13.3943L12.3775 13.3029C12.4595 12.7486 12.5971 12.4209 14.4622 12.1248C15.4097 11.9746 15.6589 12.3533 16.0043 12.8777C16.0425 12.9358 16.0807 12.9928 16.1198 13.0499C16.4479 13.5297 16.691 13.6394 17.0582 13.8064C17.2227 13.881 17.428 13.9751 17.7031 14.1314C18.3551 14.504 18.3551 14.9247 18.3551 15.8472V15.9518C18.3551 16.3434 18.3168 16.6872 18.2566 16.9859C19.3478 15.6185 20 13.8854 20 12C20 8.70089 18.003 5.8682 15.1519 4.64482C14.5987 5.01813 13.8398 5.54726 13.575 5.91C13.4396 6.09538 13.2482 7.04166 12.6257 7.11976C12.4626 7.14023 12.2438 7.12589 12.012 7.11097C11.3905 7.07058 10.5402 7.01606 10.268 7.75495C10.0952 8.2232 10.0648 9.49445 10.6239 10.1543C10.7134 10.2597 10.7307 10.4547 10.6699 10.6735C10.59 10.9608 10.4286 11.1356 10.3783 11.1717C10.2819 11.1163 10.0896 10.8931 9.95938 10.7412C9.64554 10.3765 9.25405 9.92233 8.74797 9.78176C8.56395 9.73083 8.36166 9.68867 8.16548 9.64736C7.6164 9.53227 6.99443 9.40134 6.84992 9.09302C6.74442 8.8672 6.74488 8.55621 6.74529 8.22764C6.74529 7.8112 6.74529 7.34029 6.54129 6.88256C6.46246 6.70541 6.35689 6.56446 6.23509 6.45329ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22Z"></path></svg>',
+  codeNode:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12L15.9289 19.0711L14.5147 17.6569L20.1716 12L14.5147 6.34317L15.9289 4.92896L23 12ZM3.82843 12L9.48528 17.6569L8.07107 19.0711L1 12L8.07107 4.92896L9.48528 6.34317L3.82843 12Z"></path></svg>',
+  templateNode:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4ZM4 5V19H20V5H4ZM7 8H17V11H15V10H13V14H14.5V16H9.5V14H11V10H9V11H7V8Z"></path></svg>',
+  confirmNode:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.3873 13.4975L17.9403 20.5117L13.2418 22.2218L10.6889 15.2076L6.79004 17.6529L8.4086 1.63318L19.9457 12.8646L15.3873 13.4975ZM15.3768 19.3163L12.6618 11.8568L15.6212 11.4459L9.98201 5.9561L9.19088 13.7863L11.7221 12.1988L14.4371 19.6583L15.3768 19.3163Z"></path></svg>',
+  endNode:
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 5.1438V16.0002H18.3391L6 5.1438ZM4 2.932C4 2.07155 5.01456 1.61285 5.66056 2.18123L21.6501 16.2494C22.3423 16.8584 21.9116 18.0002 20.9896 18.0002H6V22H4V2.932Z"></path></svg>',
 };
 
 export const parameterDataTypes = [
-    {
-        value: 'String',
-        label: 'String'
-    },
-    {
-        value: 'Number',
-        label: 'Number'
-    },
-    {
-        value: 'Boolean',
-        label: 'Boolean'
-    },
-    {
-        value: 'File',
-        label: 'File'
-    },
-    {
-        value: 'Object',
-        label: 'Object'
-    },
-    {
-        value: 'Array',
-        label: 'Array'
-    }
+  {
+    value: 'String',
+    label: 'String',
+  },
+  {
+    value: 'Number',
+    label: 'Number',
+  },
+  {
+    value: 'Boolean',
+    label: 'Boolean',
+  },
+  {
+    value: 'File',
+    label: 'File',
+  },
+  {
+    value: 'Object',
+    label: 'Object',
+  },
+  {
+    value: 'Array',
+    label: 'Array',
+  },
 ];
 
 export const parameterRefTypes = [
-    {
-        value: 'ref',
-        label: '引用'
-    },
-    {
-        value: 'fixed',
-        label: '固定值'
-    }
-    // {
-    //     value: 'input',
-    //     label: '输入'
-    // }
+  {
+    value: 'ref',
+    label: '引用',
+  },
+  {
+    value: 'fixed',
+    label: '固定值',
+  },
+  // {
+  //     value: 'input',
+  //     label: '输入'
+  // }
 ];
 
 export const contentTypes = [
-    { label: '文字', value: 'text' },
-    { label: '图片', value: 'image' },
-    { label: '视频', value: 'video' },
-    { label: '音频', value: 'audio' },
-    { label: '文件', value: 'file' },
-    { label: '其他', value: 'other' }
+  { label: '文字', value: 'text' },
+  { label: '图片', value: 'image' },
+  { label: '视频', value: 'video' },
+  { label: '音频', value: 'audio' },
+  { label: '文件', value: 'file' },
+  { label: '其他', value: 'other' },
 ];
 
 export const startFormTypes = [
-    { label: '单行输入框', value: 'input' },
-    { label: '多行输入框', value: 'textarea' },
-    { label: '下拉菜单', value: 'select' },
-    { label: '单选', value: 'radio' },
-    { label: '多选', value: 'checkbox' }
+  { label: '单行输入框', value: 'input' },
+  { label: '多行输入框', value: 'textarea' },
+  { label: '下拉菜单', value: 'select' },
+  { label: '单选', value: 'radio' },
+  { label: '多选', value: 'checkbox' },
 ];
 
 export const confirmFormTypes = [
-    { label: '单选', value: 'radio' },
-    { label: '多选', value: 'checkbox' }
+  { label: '单选', value: 'radio' },
+  { label: '多选', value: 'checkbox' },
 ];
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/store/stores.svelte.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/store/stores.svelte.ts
index c6a7950..5b6ef18 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/store/stores.svelte.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/store/stores.svelte.ts
@@ -1,74 +1,78 @@
-import {type Edge, type Node, type Viewport} from '@xyflow/svelte';
+import { type Edge, type Node, type Viewport } from '@xyflow/svelte';
 
 const createStore = () => {
-    let nodesInternal = $state.raw([] as Node[]);
-    let edgesInternal = $state.raw([] as Edge[]);
-    let viewport = $state.raw({ x: 250, y: 100, zoom: 1 } as Viewport);
+  let nodesInternal = $state.raw([] as Node[]);
+  let edgesInternal = $state.raw([] as Edge[]);
+  let viewport = $state.raw({ x: 250, y: 100, zoom: 1 } as Viewport);
 
-    return {
-        // nodes: nodesInternal,
-        // edges: edgesInternal,
-        // viewport,
-        init: (nodes: Node[], edges: Edge[]) => {
-            nodesInternal = nodes;
-            edgesInternal = edges;
-        },
+  return {
+    // nodes: nodesInternal,
+    // edges: edgesInternal,
+    // viewport,
+    init: (nodes: Node[], edges: Edge[]) => {
+      nodesInternal = nodes;
+      edgesInternal = edges;
+    },
 
-        getNodes: () => nodesInternal,
-        setNodes: (nodes: Node[]) => {
-            nodesInternal = nodes;
-        },
-        getEdges: () => edgesInternal,
-        setEdges: (edges: Edge[]) => {
-            edgesInternal = edges;
-        },
-        getViewport: () => viewport,
-        setViewport: (v: Viewport) => {
-            viewport = v;
-        },
+    getNodes: () => nodesInternal,
+    setNodes: (nodes: Node[]) => {
+      nodesInternal = nodes;
+    },
+    getEdges: () => edgesInternal,
+    setEdges: (edges: Edge[]) => {
+      edgesInternal = edges;
+    },
+    getViewport: () => viewport,
+    setViewport: (v: Viewport) => {
+      viewport = v;
+    },
 
-        getNode: (id: string) => nodesInternal.find((node) => node.id === id),
-        addNode: (node: Node) => {
-            nodesInternal = [...nodesInternal, node];
-        },
-        removeNode: (id: string) => {
-            nodesInternal = nodesInternal.filter((node) => node.id !== id);
-        },
-        updateNode: (id: string, node: Node) => {
-            nodesInternal = nodesInternal.map((n) => (n.id === id ? { ...n, ...node } : n));
-        },
-        updateNodes: (update: (nodes: Node[]) => Node[]) => {
-            nodesInternal = update(nodesInternal);
-        },
-        updateNodeData: (id: string, data: Node['data']) => {
-            nodesInternal = nodesInternal.map((n) =>
-                n.id === id ? { ...n, data: { ...n.data, ...data } } : n
-            );
-        },
-        selectNodeOnly: (id: string) => {
-            nodesInternal = nodesInternal.map((n) =>
-                n.id === id ? { ...n, selected: true } : { ...n, selected: false }
-            );
-        },
-        getEdge: (id: string) => edgesInternal.find((edge) => edge.id === id),
-        addEdge: (edge: Edge) => {
-            edgesInternal = [...edgesInternal, edge];
-        },
-        removeEdge: (id: string) => {
-            edgesInternal = edgesInternal.filter((edge) => edge.id !== id);
-        },
-        updateEdge: (id: string, edge: Edge) => {
-            edgesInternal = edgesInternal.map((e) => (e.id === id ? { ...e, ...edge } : e));
-        },
-        updateEdges: (update: (edges: Edge[]) => Edge[]) => {
-            edgesInternal = update(edgesInternal);
-        },
-        updateEdgeData: (id: string, data: Edge['data']) => {
-            edgesInternal = edgesInternal.map((e) =>
-                e.id === id ? { ...e, data: { ...e.data, ...data } } : e
-            );
-        }
-    };
+    getNode: (id: string) => nodesInternal.find((node) => node.id === id),
+    addNode: (node: Node) => {
+      nodesInternal = [...nodesInternal, node];
+    },
+    removeNode: (id: string) => {
+      nodesInternal = nodesInternal.filter((node) => node.id !== id);
+    },
+    updateNode: (id: string, node: Node) => {
+      nodesInternal = nodesInternal.map((n) =>
+        n.id === id ? { ...n, ...node } : n,
+      );
+    },
+    updateNodes: (update: (nodes: Node[]) => Node[]) => {
+      nodesInternal = update(nodesInternal);
+    },
+    updateNodeData: (id: string, data: Node['data']) => {
+      nodesInternal = nodesInternal.map((n) =>
+        n.id === id ? { ...n, data: { ...n.data, ...data } } : n,
+      );
+    },
+    selectNodeOnly: (id: string) => {
+      nodesInternal = nodesInternal.map((n) =>
+        n.id === id ? { ...n, selected: true } : { ...n, selected: false },
+      );
+    },
+    getEdge: (id: string) => edgesInternal.find((edge) => edge.id === id),
+    addEdge: (edge: Edge) => {
+      edgesInternal = [...edgesInternal, edge];
+    },
+    removeEdge: (id: string) => {
+      edgesInternal = edgesInternal.filter((edge) => edge.id !== id);
+    },
+    updateEdge: (id: string, edge: Edge) => {
+      edgesInternal = edgesInternal.map((e) =>
+        e.id === id ? { ...e, ...edge } : e,
+      );
+    },
+    updateEdges: (update: (edges: Edge[]) => Edge[]) => {
+      edgesInternal = update(edgesInternal);
+    },
+    updateEdgeData: (id: string, data: Edge['data']) => {
+      edgesInternal = edgesInternal.map((e) =>
+        e.id === id ? { ...e, data: { ...e.data, ...data } } : e,
+      );
+    },
+  };
 };
 
 export const store = createStore();
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/styles/base.less b/easyflow-ui-admin/packages/tinyflow-ui/src/styles/base.less
index 781268e..44f24e7 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/styles/base.less
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/styles/base.less
@@ -1,22 +1,22 @@
 .tf-btn {
   display: flex;
+  gap: 2px;
   align-items: center;
   justify-content: center;
-  gap: 2px;
-  background: var(--tf-bg-surface);
-  border: 1px solid var(--tf-border-color-strong);
-  color: var(--tf-text-primary);
-  cursor: pointer;
-  border-radius: 5px;
+  width: fit-content;
+  height: fit-content;
   padding: 5px;
   margin: 0;
-  height: fit-content;
-  width: fit-content;
+  color: var(--tf-text-primary);
+  cursor: pointer;
+  background: var(--tf-bg-surface);
+  border: 1px solid var(--tf-border-color-strong);
+  border-radius: 5px;
 
   svg {
-    fill: currentColor;
     width: 16px;
     height: 16px;
+    fill: currentcolor;
   }
 
   &:hover {
@@ -25,49 +25,48 @@
 }
 
 .tf-btn.tf-btn-primary {
-  background: var(--tf-primary-color);
   color: var(--tf-loop-handle-text);
+  background: var(--tf-primary-color);
 
   &:hover {
-    border: 1px solid var(--tf-border-color-strong);
     background: var(--tf-primary-color-hover);
+    border: 1px solid var(--tf-border-color-strong);
   }
 }
 
-
-.tf-input, .tf-textarea {
-  display: flex;
-  border-radius: 5px;
-  border: 1px solid var(--tf-border-color-strong);
-  background: var(--tf-bg-input);
-  color: var(--tf-text-primary);
-  padding: 5px 8px;
+.tf-input,
+.tf-textarea {
   box-sizing: border-box;
+  display: flex;
+  padding: 5px 8px;
+  overflow-y: hidden;
+  line-height: normal;
+  color: var(--tf-text-primary);
   resize: vertical;
   outline: none;
-  line-height: normal;
-  overflow-y: hidden;
+  background: var(--tf-bg-input);
+  border: 1px solid var(--tf-border-color-strong);
+  border-radius: 5px;
 
   &::placeholder {
-    color: var(--tf-text-muted);
     font-size: 12px;
+    color: var(--tf-text-muted);
   }
 
-  // 获得焦点时的样式
+  /* 获得焦点时的样式 */
   &:focus {
     border-color: var(--tf-primary-color);
     box-shadow: var(--tf-focus-shadow);
   }
 
-  // 禁用时的样式
+  /* 禁用时的样式 */
   &[disabled] {
-    background-color: var(--tf-bg-input-disabled);
-    cursor: not-allowed;
     color: var(--tf-text-disabled);
+    cursor: not-allowed;
+    background-color: var(--tf-bg-input-disabled);
   }
 }
 
-
 .tf-select {
   display: flex;
   width: 100%;
@@ -75,47 +74,48 @@
 
   &-input {
     display: flex;
-    border: 1px solid var(--tf-border-color);
-    padding: 4px 10px;
-    border-radius: 6px;
-    font-size: 13px;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 32px;
+    padding: 4px 10px;
+    font-size: 13px;
+    color: var(--tf-text-primary);
     cursor: pointer;
     background: var(--tf-bg-input);
-    height: 32px;
+    border: 1px solid var(--tf-border-color);
+    border-radius: 6px;
     transition: all 0.2s;
-    width: 100%;
-    color: var(--tf-text-primary);
 
     &:hover {
       border-color: var(--tf-border-color-strong);
     }
 
-    &:focus, &.active {
+    &:focus,
+    &.active {
       border-color: var(--tf-primary-color);
       box-shadow: var(--tf-focus-shadow);
     }
 
     &-value {
-      height: 100%;
-      min-width: 0;
-      flex: 1;
-      font-size: 12px;
       display: flex;
+      flex: 1;
       align-items: center;
+      min-width: 0;
+      height: 100%;
       overflow: hidden;
-      white-space: nowrap;
       text-overflow: ellipsis;
+      font-size: 12px;
+      white-space: nowrap;
     }
 
     &-arrow {
       display: flex;
+      flex-shrink: 0;
       width: 16px;
       height: 16px;
-      color: var(--tf-text-secondary);
-      flex-shrink: 0;
       margin-left: 4px;
+      color: var(--tf-text-secondary);
     }
 
     &-placeholder {
@@ -124,7 +124,7 @@
   }
 
   &-content {
-    display: none; // 现在改用 .tf-select-wrapper
+    display: none; /* 现在改用 .tf-select-wrapper */
   }
 }
 
@@ -135,67 +135,66 @@
 
 .tf-tabs {
   display: flex;
+  gap: 5px;
   align-items: center;
   justify-content: center;
-  gap: 5px;
   padding: 5px;
-  border-radius: 5px;
-  border: none;
   background: var(--tf-bg-muted);
+  border: none;
+  border-radius: 5px;
 
   .tf-tabs-item {
-    flex-grow: 1;
-    padding: 5px 10px;
-    cursor: pointer;
-    border-radius: 5px;
     display: flex;
+    flex-grow: 1;
     align-items: center;
     justify-content: center;
+    padding: 5px 10px;
     font-size: 14px;
     color: var(--tf-text-secondary);
+    cursor: pointer;
+    border-radius: 5px;
   }
 
   .tf-tabs-item.active {
-    background: var(--tf-bg-surface);
-    color: var(--tf-text-primary);
     font-weight: 500;
+    color: var(--tf-text-primary);
+    background: var(--tf-bg-surface);
     box-shadow: var(--tf-shadow-soft);
   }
 }
 
 h3.tf-heading {
-  font-weight: 700;
-  font-size: 14px;
   margin-top: 2px;
   margin-bottom: 3px;
+  font-size: 14px;
+  font-weight: 700;
   color: var(--tf-text-primary);
 }
 
-
 .tf-collapse {
   border: none;
   border-radius: 5px;
-  //padding: 5px;
+
+  /* padding: 5px; */
 
   &-item {
-
     &-title {
       display: flex;
       align-items: center;
-      cursor: pointer;
       font-size: 14px;
+      cursor: pointer;
 
       &-icon {
         display: flex;
+        align-items: center;
+        justify-content: center;
         width: 26px;
         height: 26px;
+        padding: 3px;
+        margin-right: 10px;
         color: var(--tf-icon-color);
         background: var(--tf-icon-bg);
         border-radius: 5px;
-        padding: 3px;
-        justify-content: center;
-        align-items: center;
-        margin-right: 10px;
 
         svg {
           width: 22px;
@@ -212,10 +211,9 @@ h3.tf-heading {
       }
     }
 
-
     &-description {
-      font-size: 12px;
       margin: 10px 0;
+      font-size: 12px;
       color: var(--tf-text-muted);
     }
   }
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/styles/tinyflow.less b/easyflow-ui-admin/packages/tinyflow-ui/src/styles/tinyflow.less
index 106ee13..055cc6a 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/styles/tinyflow.less
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/styles/tinyflow.less
@@ -1,27 +1,27 @@
 .svelte-flow__nodes {
-
   .svelte-flow__node {
+    box-sizing: border-box;
     border: 3px solid transparent;
     border-radius: 5px;
-    box-sizing: border-box;
-
 
     .svelte-flow__handle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 16px;
       height: 16px;
       background: transparent;
-      display: flex;
-      justify-content: center;
-      align-items: center;
       border: none;
 
       &::after {
-        content: ' ';
-        background: var(--tf-primary-color);
         width: 8px;
         height: 8px;
+        content: ' ';
+        background: var(--tf-primary-color);
         border-radius: 100%;
-        transition: width 0.1s, height 0.1s;
+        transition:
+          width 0.1s,
+          height 0.1s;
       }
 
       &:hover {
@@ -32,17 +32,17 @@
       }
     }
 
-    div.loop_handle_wrapper {
+    div.loop-handle-wrapper {
       &::after {
-        content: '循环体';
-        background: var(--tf-primary-color);
+        display: flex;
+        align-items: center;
+        justify-content: center;
         width: 100px;
         height: 20px;
-        border-radius: 0;
-        display: flex;
         color: var(--tf-loop-handle-text);
-        justify-content: center;
-        align-items: center;
+        content: '循环体';
+        background: var(--tf-primary-color);
+        border-radius: 0;
       }
 
       &:hover {
@@ -53,15 +53,15 @@
       }
     }
 
-    &:after {
-      content: ' ';
+    &::after {
       position: absolute;
-      border-radius: 5px;
       top: -2px;
       left: -2px;
-      border: 1px solid var(--tf-node-outline-color);
-      height: calc(100% + 2px);
       width: calc(100% + 2px);
+      height: calc(100% + 2px);
+      content: ' ';
+      border: 1px solid var(--tf-node-outline-color);
+      border-radius: 5px;
     }
 
     &:hover {
@@ -73,11 +73,11 @@
       box-shadow: var(--xy-node-boxshadow-selected);
     }
 
-    &:hover:after {
+    &:hover::after {
       display: none;
     }
 
-    &.selectable.selected:after {
+    &.selectable.selected::after {
       display: none;
     }
   }
@@ -85,7 +85,10 @@
 
 .tf-flow-line-path {
   stroke: var(--xy-edge-stroke);
-  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
+  stroke-width: var(
+    --xy-edge-stroke-width,
+    var(--xy-edge-stroke-width-default)
+  );
 }
 
 .tf-flow-line-path--animated {
@@ -97,16 +100,16 @@
   from {
     stroke-dashoffset: 0;
   }
+
   to {
     stroke-dashoffset: -14;
   }
 }
 
-
 .tf-node-wrapper {
-  border-radius: 5px;
   min-width: 300px;
   background: var(--tf-bg-surface);
+  border-radius: 5px;
 
   &-body {
     padding: 10px;
@@ -118,67 +121,69 @@
 }
 
 .tf-bottom-dock {
-  z-index: 200;
   position: absolute;
-  left: 50%;
   bottom: var(--tf-toolbar-bottom, 20px);
-  transform: translateX(-50%);
+  left: 50%;
+  z-index: 200;
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
+  transform: translateX(-50%);
 }
 
-// 单行统一工具栏
+/* 单行统一工具栏 */
 .tf-unified-bar {
   display: inline-flex;
+  gap: 2px;
   align-items: center;
   height: 40px;
+  padding: 0 4px;
+  background: var(--tf-bg-surface);
   border: 1px solid var(--tf-border-color);
   border-radius: 10px;
-  background: var(--tf-bg-surface);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  padding: 0 4px;
-  gap: 2px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
 
   > * {
     flex-shrink: 0;
   }
 }
 
-// 分割线
+/* 分割线 */
 .tf-bar-divider {
+  flex-shrink: 0;
   width: 1px;
   height: 20px;
-  background: var(--tf-border-color);
   margin: 0 4px;
-  flex-shrink: 0;
+  background: var(--tf-border-color);
 }
 
-// 图标按钮
+/* 图标按钮 */
 .tf-bar-btn {
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: 7px;
   color: var(--tf-text-secondary);
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-  flex-shrink: 0;
+  border-radius: 7px;
+  transition:
+    background 0.15s,
+    color 0.15s;
 
   svg {
     width: 17px;
     height: 17px;
-    fill: currentColor;
     pointer-events: none;
+    fill: currentcolor;
   }
 
   &:hover {
-    background: var(--tf-bg-hover);
     color: var(--tf-text-primary);
+    background: var(--tf-bg-hover);
   }
 
   &.tf-bar-btn-active {
@@ -191,26 +196,26 @@
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
+  flex-shrink: 0;
+  gap: 6px;
   align-items: center;
   justify-content: center;
-  gap: 6px;
   height: 32px;
   padding: 0 14px;
-  border-radius: 8px;
-  background: #13b33f;
-  color: #fff;
   font-size: 14px;
   font-weight: 600;
   line-height: 1;
+  color: #fff;
   cursor: pointer;
-  flex-shrink: 0;
+  background: #13b33f;
+  border-radius: 8px;
   transition: filter 0.15s;
 
   svg {
     width: 14px;
     height: 14px;
-    fill: currentColor;
     pointer-events: none;
+    fill: currentcolor;
   }
 
   &:hover {
@@ -222,36 +227,38 @@
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
+  gap: 6px;
   align-items: center;
   justify-content: center;
-  gap: 6px;
   height: 32px;
   padding: 0 12px;
-  border-radius: 8px;
-  background: #e9edff;
-  color: var(--tf-primary-color);
   font-size: 13px;
   font-weight: 600;
   line-height: 1;
+  color: var(--tf-primary-color);
   cursor: pointer;
-  transition: filter 0.15s, background 0.15s;
+  background: #e9edff;
+  border-radius: 8px;
+  transition:
+    filter 0.15s,
+    background 0.15s;
 
   &:hover {
-    filter: brightness(0.98);
     background: #dde5ff;
+    filter: brightness(0.98);
   }
 }
 
-// 百分比缩放选择器单元
+/* 百分比缩放选择器单元 */
 .tf-zoom-select-wrap {
   position: relative;
   display: inline-flex;
-  align-items: center;
-  padding: 0 6px 0 8px;
   gap: 4px;
+  align-items: center;
   height: 32px;
-  border-radius: 7px;
+  padding: 0 6px 0 8px;
   cursor: pointer;
+  border-radius: 7px;
   transition: background 0.15s;
 
   &:hover {
@@ -259,83 +266,80 @@
   }
 
   .tf-zoom-icon {
+    flex-shrink: 0;
     width: 14px;
     height: 14px;
-    fill: var(--tf-text-secondary);
     pointer-events: none;
-    flex-shrink: 0;
+    fill: var(--tf-text-secondary);
   }
 
   .tf-zoom-select {
-    appearance: none;
-    -webkit-appearance: none;
-    border: none;
-    background: transparent;
+    min-width: 48px;
+    padding: 0;
     font-size: 13px;
     font-weight: 500;
+    line-height: 1;
     color: var(--tf-text-primary);
+    text-align: center;
+    appearance: none;
     cursor: pointer;
     outline: none;
-    padding: 0;
-    min-width: 48px;
-    text-align: center;
-    line-height: 1;
+    background: transparent;
+    border: none;
   }
 
   .tf-zoom-chevron {
+    flex-shrink: 0;
     width: 14px;
     height: 14px;
-    fill: var(--tf-text-secondary);
     pointer-events: none;
-    flex-shrink: 0;
+    fill: var(--tf-text-secondary);
   }
 }
 
 .tf-zoom-select-simple {
-  appearance: none;
-  -webkit-appearance: none;
-  border: none;
-  outline: none;
-  background: transparent;
-  height: 32px;
   min-width: 64px;
+  height: 32px;
   padding: 0 8px;
-  border-radius: 7px;
   font-size: 13px;
   font-weight: 500;
   line-height: 1;
   color: var(--tf-text-primary);
-  cursor: pointer;
   text-align: center;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+  background: transparent;
+  border: none;
+  border-radius: 7px;
 
   &:hover {
     background: var(--tf-bg-hover);
   }
 }
 
-
 .tf-toolbar {
   position: relative;
   display: inline-flex;
   align-items: center;
 
   &-panel {
-    width: min(520px, calc(100vw - 40px));
-    max-height: min(390px, calc(100vh - 220px));
-    border: 1px solid var(--tf-border-color);
-    border-radius: 12px;
-    background: var(--tf-bg-surface);
-    box-shadow: var(--tf-shadow-soft);
-    padding: 8px;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    z-index: 260;
     display: flex;
     flex-direction: column;
     gap: 10px;
-    position: absolute;
-    left: 50%;
-    bottom: calc(100% + 8px);
-    transform: translateX(-50%);
-    z-index: 260;
+    width: min(520px, calc(100vw - 40px));
+    max-height: min(390px, calc(100vh - 220px));
+    padding: 8px;
     overflow: hidden;
+    background: var(--tf-bg-surface);
+    border: 1px solid var(--tf-border-color);
+    border-radius: 12px;
+    box-shadow: var(--tf-shadow-soft);
+    transform: translateX(-50%);
   }
 
   &-trigger {
@@ -350,7 +354,7 @@
     svg {
       width: 16px;
       height: 16px;
-      fill: currentColor;
+      fill: currentcolor;
     }
   }
 }
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/styles/variable.less b/easyflow-ui-admin/packages/tinyflow-ui/src/styles/variable.less
index 1e0d46b..a854c46 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/styles/variable.less
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/styles/variable.less
@@ -4,7 +4,7 @@
   --tf-primary-color-hover: #3a6fe3;
   --tf-primary-soft-bg: #eff6ff;
   --tf-primary-soft-border: #bfdbfe;
-  --tf-primary-ghost-bg: rgba(37, 99, 235, 0.08);
+  --tf-primary-ghost-bg: rgb(37 99 235 / 8%);
   --tf-danger-color: #ef4444;
   --tf-danger-hover: #dc2626;
   --tf-danger-soft-bg: #fff1f1;
@@ -15,41 +15,35 @@
   --tf-warning-soft-border: #f7d79e;
   --tf-warning-soft-text: #92400e;
   --tf-warning-icon-color: #d97706;
-
   --tf-bg-canvas: #f8fafc;
-  --tf-bg-surface: #ffffff;
+  --tf-bg-surface: #fff;
   --tf-bg-surface-alt: #f9fafb;
   --tf-bg-muted: #f3f4f6;
   --tf-bg-hover: #f1f5f9;
   --tf-bg-active: #e2e8f0;
-  --tf-bg-input: #ffffff;
+  --tf-bg-input: #fff;
   --tf-bg-input-disabled: #f3f4f6;
-  --tf-bg-tag: rgba(0, 0, 0, 0.06);
-
+  --tf-bg-tag: rgb(0 0 0 / 6%);
   --tf-border-color: #e5e7eb;
   --tf-border-color-strong: #d1d5db;
   --tf-border-color-soft: #f3f4f6;
   --tf-node-outline-color: #d1d5db;
-  --tf-node-hover-border: rgba(186, 202, 239, 0.49);
-
+  --tf-node-hover-border: rgb(186 202 239 / 49%);
   --tf-text-primary: #111827;
   --tf-text-secondary: #6b7280;
   --tf-text-muted: #9ca3af;
   --tf-text-disabled: #9ca3af;
-
   --tf-icon-bg: #cedafb;
   --tf-icon-color: #3474ff;
-  --tf-loop-handle-text: #ffffff;
-
-  --tf-shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.08);
-  --tf-shadow-medium: 0 10px 25px rgba(0, 0, 0, 0.15);
-  --tf-focus-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
+  --tf-loop-handle-text: #fff;
+  --tf-shadow-soft: 0 2px 4px rgb(0 0 0 / 8%);
+  --tf-shadow-medium: 0 10px 25px rgb(0 0 0 / 15%);
+  --tf-focus-shadow: 0 0 0 2px rgb(37 99 235 / 12%);
   --tf-tip-bg: #0f172a;
   --tf-tip-text: #f8fafc;
   --tf-scrollbar-thumb: #d6dce8;
   --tf-slider-track-bg: #d1d5db;
   --tf-slider-thumb-bg: var(--tf-primary-color);
-
   --xy-node-boxshadow-selected: 0 0 0 1px var(--tf-primary-color);
   --xy-handle-background-color: var(--tf-primary-color);
   --xy-handle-border-color: var(--tf-bg-surface);
@@ -65,7 +59,7 @@
   --xy-controls-button-color-hover: var(--tf-text-primary);
   --xy-controls-button-border-color: var(--tf-border-color);
   --xy-minimap-background-color: var(--tf-bg-surface);
-  --xy-minimap-mask-background-color: rgba(241, 245, 249, 0.68);
+  --xy-minimap-mask-background-color: rgb(241 245 249 / 68%);
   --xy-minimap-node-background-color: #cbd5e1;
   --xy-edge-label-background-color: var(--tf-bg-surface);
   --xy-edge-label-color: var(--tf-text-primary);
@@ -74,20 +68,19 @@
 :root .tf-theme-dark {
   --tf-primary-color: #60a5fa;
   --tf-primary-color-hover: #93c5fd;
-  --tf-primary-soft-bg: rgba(96, 165, 250, 0.18);
-  --tf-primary-soft-border: rgba(96, 165, 250, 0.35);
-  --tf-primary-ghost-bg: rgba(96, 165, 250, 0.12);
+  --tf-primary-soft-bg: rgb(96 165 250 / 18%);
+  --tf-primary-soft-border: rgb(96 165 250 / 35%);
+  --tf-primary-ghost-bg: rgb(96 165 250 / 12%);
   --tf-danger-color: #f87171;
   --tf-danger-hover: #ef4444;
-  --tf-danger-soft-bg: rgba(248, 113, 113, 0.16);
-  --tf-danger-soft-border: rgba(248, 113, 113, 0.28);
+  --tf-danger-soft-bg: rgb(248 113 113 / 16%);
+  --tf-danger-soft-border: rgb(248 113 113 / 28%);
   --tf-danger-soft-text: #fca5a5;
   --tf-danger-icon-color: #f87171;
-  --tf-warning-soft-bg: rgba(217, 119, 6, 0.2);
-  --tf-warning-soft-border: rgba(217, 119, 6, 0.35);
+  --tf-warning-soft-bg: rgb(217 119 6 / 20%);
+  --tf-warning-soft-border: rgb(217 119 6 / 35%);
   --tf-warning-soft-text: #fbbf24;
   --tf-warning-icon-color: #f59e0b;
-
   --tf-bg-canvas: #0b1220;
   --tf-bg-surface: #111827;
   --tf-bg-surface-alt: #1f2937;
@@ -96,32 +89,27 @@
   --tf-bg-active: #3b4b63;
   --tf-bg-input: #0f172a;
   --tf-bg-input-disabled: #0b1324;
-  --tf-bg-tag: rgba(148, 163, 184, 0.2);
-
+  --tf-bg-tag: rgb(148 163 184 / 20%);
   --tf-border-color: #334155;
   --tf-border-color-strong: #475569;
   --tf-border-color-soft: #263449;
   --tf-node-outline-color: #475569;
-  --tf-node-hover-border: rgba(96, 165, 250, 0.38);
-
+  --tf-node-hover-border: rgb(96 165 250 / 38%);
   --tf-text-primary: #e5e7eb;
   --tf-text-secondary: #cbd5e1;
   --tf-text-muted: #94a3b8;
   --tf-text-disabled: #64748b;
-
-  --tf-icon-bg: rgba(96, 165, 250, 0.2);
+  --tf-icon-bg: rgb(96 165 250 / 20%);
   --tf-icon-color: #93c5fd;
   --tf-loop-handle-text: #f8fafc;
-
-  --tf-shadow-soft: 0 2px 8px rgba(2, 6, 23, 0.35);
-  --tf-shadow-medium: 0 10px 25px rgba(2, 6, 23, 0.48);
-  --tf-focus-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
+  --tf-shadow-soft: 0 2px 8px rgb(2 6 23 / 35%);
+  --tf-shadow-medium: 0 10px 25px rgb(2 6 23 / 48%);
+  --tf-focus-shadow: 0 0 0 2px rgb(96 165 250 / 20%);
   --tf-tip-bg: #020617;
   --tf-tip-text: #e2e8f0;
   --tf-scrollbar-thumb: #475569;
   --tf-slider-track-bg: #475569;
   --tf-slider-thumb-bg: #93c5fd;
-
   --xy-node-boxshadow-selected: 0 0 0 1px var(--tf-primary-color);
   --xy-handle-background-color: var(--tf-primary-color);
   --xy-handle-border-color: var(--tf-bg-canvas);
@@ -137,7 +125,7 @@
   --xy-controls-button-color-hover: var(--tf-text-primary);
   --xy-controls-button-border-color: var(--tf-border-color);
   --xy-minimap-background-color: var(--tf-bg-surface);
-  --xy-minimap-mask-background-color: rgba(15, 23, 42, 0.7);
+  --xy-minimap-mask-background-color: rgb(15 23 42 / 70%);
   --xy-minimap-node-background-color: #475569;
   --xy-edge-label-background-color: var(--tf-bg-surface);
   --xy-edge-label-color: var(--tf-text-primary);
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/tinyflow-theme.test.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/tinyflow-theme.test.ts
index 6279fa9..2b06fc4 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/tinyflow-theme.test.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/tinyflow-theme.test.ts
@@ -1,70 +1,70 @@
-import {beforeEach, describe, expect, it} from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import {componentName} from './consts';
-import {Tinyflow} from './Tinyflow';
+import { componentName } from './consts';
+import { Tinyflow } from './Tinyflow';
 
 describe('tinyflow theme', () => {
-    beforeEach(() => {
-        document.body.innerHTML = '';
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should use light theme by default', () => {
+    const container = document.createElement('div');
+    document.body.append(container);
+
+    const tinyflow = new Tinyflow({
+      element: container,
     });
 
-    it('should use light theme by default', () => {
-        const container = document.createElement('div');
-        document.body.append(container);
+    const tinyflowEl = container.querySelector(componentName);
+    expect(tinyflowEl).toBeTruthy();
+    expect(tinyflowEl?.classList.contains('tf-theme-light')).toBe(true);
+    expect(tinyflowEl?.classList.contains('tf-theme-dark')).toBe(false);
 
-        const tinyflow = new Tinyflow({
-            element: container
-        });
+    tinyflow.destroy();
+  });
 
-        const tinyflowEl = container.querySelector(componentName);
-        expect(tinyflowEl).toBeTruthy();
-        expect(tinyflowEl?.classList.contains('tf-theme-light')).toBe(true);
-        expect(tinyflowEl?.classList.contains('tf-theme-dark')).toBe(false);
+  it('should toggle theme class without remount', () => {
+    const container = document.createElement('div');
+    document.body.append(container);
 
-        tinyflow.destroy();
+    const tinyflow = new Tinyflow({
+      element: container,
+      theme: 'dark',
     });
 
-    it('should toggle theme class without remount', () => {
-        const container = document.createElement('div');
-        document.body.append(container);
+    const tinyflowEl = container.querySelector(componentName);
+    expect(tinyflowEl?.classList.contains('tf-theme-dark')).toBe(true);
 
-        const tinyflow = new Tinyflow({
-            element: container,
-            theme: 'dark'
-        });
+    tinyflow.setTheme('light');
 
-        const tinyflowEl = container.querySelector(componentName);
-        expect(tinyflowEl?.classList.contains('tf-theme-dark')).toBe(true);
+    expect(tinyflowEl?.classList.contains('tf-theme-light')).toBe(true);
+    expect(tinyflowEl?.classList.contains('tf-theme-dark')).toBe(false);
 
-        tinyflow.setTheme('light');
+    tinyflow.destroy();
+  });
 
-        expect(tinyflowEl?.classList.contains('tf-theme-light')).toBe(true);
-        expect(tinyflowEl?.classList.contains('tf-theme-dark')).toBe(false);
+  it('should keep theme when data is reset', () => {
+    const container = document.createElement('div');
+    document.body.append(container);
 
-        tinyflow.destroy();
+    const tinyflow = new Tinyflow({
+      element: container,
+      theme: 'dark',
     });
 
-    it('should keep theme when data is reset', () => {
-        const container = document.createElement('div');
-        document.body.append(container);
-
-        const tinyflow = new Tinyflow({
-            element: container,
-            theme: 'dark'
-        });
-
-        const firstRenderEl = container.querySelector(componentName);
-        tinyflow.setData({
-            nodes: [],
-            edges: []
-        });
-        const secondRenderEl = container.querySelector(componentName);
-
-        expect(firstRenderEl).toBeTruthy();
-        expect(secondRenderEl).toBeTruthy();
-        expect(secondRenderEl).not.toBe(firstRenderEl);
-        expect(secondRenderEl?.classList.contains('tf-theme-dark')).toBe(true);
-
-        tinyflow.destroy();
+    const firstRenderEl = container.querySelector(componentName);
+    tinyflow.setData({
+      nodes: [],
+      edges: [],
     });
+    const secondRenderEl = container.querySelector(componentName);
+
+    expect(firstRenderEl).toBeTruthy();
+    expect(secondRenderEl).toBeTruthy();
+    expect(secondRenderEl).not.toBe(firstRenderEl);
+    expect(secondRenderEl?.classList.contains('tf-theme-dark')).toBe(true);
+
+    tinyflow.destroy();
+  });
 });
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/src/types.ts b/easyflow-ui-admin/packages/tinyflow-ui/src/types.ts
index b1c7547..acd24b0 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/src/types.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/src/types.ts
@@ -1,125 +1,127 @@
-import type {Snippet} from 'svelte';
-import type {Node, useSvelteFlow} from '@xyflow/svelte';
+import type { Snippet } from 'svelte';
+import type { Node, useSvelteFlow } from '@xyflow/svelte';
 
-export type TinyflowData = Partial<ReturnType<ReturnType<typeof useSvelteFlow>['toObject']>>;
+export type TinyflowData = Partial<
+  ReturnType<ReturnType<typeof useSvelteFlow>['toObject']>
+>;
 export type TinyflowTheme = 'light' | 'dark';
 
 export type SelectItem = {
-    value: number | string;
-    label: string | Snippet;
-    description?: string;
-    selectable?: boolean;
-    icon?: string;
-    nodeType?: string;
-    dataType?: string;
-    displayLabel?: string;
-    tags?: string[];
-    children?: SelectItem[];
+  value: number | string;
+  label: string | Snippet;
+  description?: string;
+  selectable?: boolean;
+  icon?: string;
+  nodeType?: string;
+  dataType?: string;
+  displayLabel?: string;
+  tags?: string[];
+  children?: SelectItem[];
 };
 
 export type CustomNodeForm = {
-    type:
-        | 'input'
-        | 'textarea'
-        | 'select'
-        | 'chosen'
-        // | 'checkbox'
-        // | 'radio'
-        // | 'switch'
-        | 'slider'
-        // | 'number'
-        // | 'date'
-        // | 'time'
-        // | 'datetime'
-        // | 'color'
-        // | 'file'
-        // | 'range'
-        // | 'image'
-        // | 'password'
-        | 'heading';
-    label: string;
-    description?: string;
-    name: string;
-    placeholder?: string;
-    defaultValue?: string | number | boolean;
-    attrs?: Record<string, any>;
-    options?: SelectItem[];
-    templateSupport?: boolean;
-    chosen?: {
-        labelDataKey: string;
-        valueDataKey: string;
-        buttonText?: string;
-        onChosen?: (
-            updateNodeData: (data: Record<string, any>) => void,
-            value?: string,
-            label?: string,
-            event?: Event
-        ) => void;
-    };
+  type:
+    | 'input'
+    | 'textarea'
+    | 'select'
+    | 'chosen'
+    // | 'checkbox'
+    // | 'radio'
+    // | 'switch'
+    | 'slider'
+    // | 'number'
+    // | 'date'
+    // | 'time'
+    // | 'datetime'
+    // | 'color'
+    // | 'file'
+    // | 'range'
+    // | 'image'
+    // | 'password'
+    | 'heading';
+  label: string;
+  description?: string;
+  name: string;
+  placeholder?: string;
+  defaultValue?: string | number | boolean;
+  attrs?: Record<string, any>;
+  options?: SelectItem[];
+  templateSupport?: boolean;
+  chosen?: {
+    labelDataKey: string;
+    valueDataKey: string;
+    buttonText?: string;
+    onChosen?: (
+      updateNodeData: (data: Record<string, any>) => void,
+      value?: string,
+      label?: string,
+      event?: Event,
+    ) => void;
+  };
 };
 
 export type CustomNode = {
-    title: string;
-    description?: string;
-    icon?: string;
-    sortNo?: number;
-    group?: 'base' | 'tools';
-    rootClass?: string;
-    rootStyle?: string;
-    parameters?: Parameter[];
-    parametersEnable?: boolean;
-    parametersAddEnable?: boolean;
-    outputDefs?: Parameter[];
-    outputDefsEnable?: boolean;
-    outputDefsAddEnable?: boolean;
-    render?: (
-        parent: HTMLElement,
-        node: Node,
-        flowInstance: ReturnType<typeof useSvelteFlow>
-    ) => void;
-    onUpdate?: (parent: HTMLElement, node: Node) => void;
-    forms?: CustomNodeForm[];
+  title: string;
+  description?: string;
+  icon?: string;
+  sortNo?: number;
+  group?: 'base' | 'tools';
+  rootClass?: string;
+  rootStyle?: string;
+  parameters?: Parameter[];
+  parametersEnable?: boolean;
+  parametersAddEnable?: boolean;
+  outputDefs?: Parameter[];
+  outputDefsEnable?: boolean;
+  outputDefsAddEnable?: boolean;
+  render?: (
+    parent: HTMLElement,
+    node: Node,
+    flowInstance: ReturnType<typeof useSvelteFlow>,
+  ) => void;
+  onUpdate?: (parent: HTMLElement, node: Node) => void;
+  forms?: CustomNodeForm[];
 };
 
 export type TinyflowOptions = {
-    element: string | Element;
-    theme?: TinyflowTheme;
-    data?: TinyflowData | string;
-    provider?: {
-        llm?: () => SelectItem[] | Promise<SelectItem[]>;
-        knowledge?: () => SelectItem[] | Promise<SelectItem[]>;
-        searchEngine?: () => SelectItem[] | Promise<SelectItem[]>;
-        codeEngine?: () => SelectItem[] | Promise<SelectItem[]>;
-    } & Record<string, () => SelectItem[] | Promise<SelectItem[]>>;
-    //type : node
-    customNodes?: Record<string, CustomNode>;
-    onNodeExecute?: (node: Node) => void;
-    onRunTest?: () => void | Promise<void>;
-    hiddenNodes?: string[] | (() => string[]);
-    onDataChange?: (data: TinyflowData) => void;
+  element: string | Element;
+  theme?: TinyflowTheme;
+  data?: TinyflowData | string;
+  provider?: {
+    llm?: () => SelectItem[] | Promise<SelectItem[]>;
+    knowledge?: () => SelectItem[] | Promise<SelectItem[]>;
+    searchEngine?: () => SelectItem[] | Promise<SelectItem[]>;
+    codeEngine?: () => SelectItem[] | Promise<SelectItem[]>;
+  } & Record<string, () => SelectItem[] | Promise<SelectItem[]>>;
+  //type : node
+  customNodes?: Record<string, CustomNode>;
+  onNodeExecute?: (node: Node) => void;
+  onRunTest?: () => void | Promise<void>;
+  hiddenNodes?: string[] | (() => string[]);
+  onDataChange?: (data: TinyflowData) => void;
 };
 
 export type Parameter = {
-    id?: string;
-    name?: string;
-    nameDisabled?: boolean;
-    dataType?: string;
-    dataTypeItems?: SelectItem[];
-    dataTypeDisabled?: boolean;
-    contentType?: string; //数据内容类型
-    ref?: string;
-    refType?: string;
-    value?: string;
-    description?: string;
-    required?: boolean;
-    defaultValue?: string;
-    deleteDisabled?: boolean;
-    addChildDisabled?: boolean;
-    children?: Parameter[];
-    enums?: string[];
-    formType?: string;
-    formLabel?: string;
-    formDescription?: string;
-    formPlaceholder?: string;
-    formAttrs?: string;
+  id?: string;
+  name?: string;
+  nameDisabled?: boolean;
+  dataType?: string;
+  dataTypeItems?: SelectItem[];
+  dataTypeDisabled?: boolean;
+  contentType?: string; //数据内容类型
+  ref?: string;
+  refType?: string;
+  value?: string;
+  description?: string;
+  required?: boolean;
+  defaultValue?: string;
+  deleteDisabled?: boolean;
+  addChildDisabled?: boolean;
+  children?: Parameter[];
+  enums?: string[];
+  formType?: string;
+  formLabel?: string;
+  formDescription?: string;
+  formPlaceholder?: string;
+  formAttrs?: string;
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/svelte.config.js b/easyflow-ui-admin/packages/tinyflow-ui/svelte.config.js
index e46cd1d..fc48f6b 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/svelte.config.js
+++ b/easyflow-ui-admin/packages/tinyflow-ui/svelte.config.js
@@ -1,15 +1,15 @@
-import {vitePreprocess} from '@sveltejs/vite-plugin-svelte';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 export default {
-    // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
-    // for more information about preprocessors
-    preprocess: [
-        vitePreprocess({
-            script: true
-        })
-    ],
-    compilerOptions: {
-        // accessors: true,
-        customElement: true
-    }
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: [
+    vitePreprocess({
+      script: true,
+    }),
+  ],
+  compilerOptions: {
+    // accessors: true,
+    customElement: true,
+  },
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/tsconfig.app.json b/easyflow-ui-admin/packages/tinyflow-ui/tsconfig.app.json
index 1e25d20..55a2f9b 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/tsconfig.app.json
+++ b/easyflow-ui-admin/packages/tinyflow-ui/tsconfig.app.json
@@ -1,20 +1,20 @@
 {
-    "extends": "@tsconfig/svelte/tsconfig.json",
-    "compilerOptions": {
-        "target": "ESNext",
-        "useDefineForClassFields": true,
-        "module": "ESNext",
-        "resolveJsonModule": true,
-        /**
-         * Typecheck JS in `.svelte` and `.js` files by default.
-         * Disable checkJs if you'd like to use dynamic types in JS.
-         * Note that setting allowJs false does not prevent the use
-         * of JS in `.svelte` files.
-         */
-        "allowJs": true,
-        "checkJs": true,
-        "isolatedModules": true,
-        "moduleDetection": "force"
-    },
-    "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force"
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
 }
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/tsconfig.json b/easyflow-ui-admin/packages/tinyflow-ui/tsconfig.json
index eb69b0d..1ffef60 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/tsconfig.json
+++ b/easyflow-ui-admin/packages/tinyflow-ui/tsconfig.json
@@ -1,4 +1,7 @@
 {
-    "files": [],
-    "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/tsconfig.node.json b/easyflow-ui-admin/packages/tinyflow-ui/tsconfig.node.json
index ff0dc7d..db0becc 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/tsconfig.node.json
+++ b/easyflow-ui-admin/packages/tinyflow-ui/tsconfig.node.json
@@ -1,24 +1,24 @@
 {
-    "compilerOptions": {
-        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-        "target": "ES2022",
-        "lib": ["ES2023"],
-        "module": "ESNext",
-        "skipLibCheck": true,
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
 
-        /* Bundler mode */
-        "moduleResolution": "bundler",
-        "allowImportingTsExtensions": true,
-        "isolatedModules": true,
-        "moduleDetection": "force",
-        "noEmit": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
 
-        /* Linting */
-        "strict": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "noFallthroughCasesInSwitch": true,
-        "noUncheckedSideEffectImports": true
-    },
-    "include": ["vite.config.ts"]
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
 }
diff --git a/easyflow-ui-admin/packages/tinyflow-ui/vite.config.ts b/easyflow-ui-admin/packages/tinyflow-ui/vite.config.ts
index 2d6ad6a..15ca810 100644
--- a/easyflow-ui-admin/packages/tinyflow-ui/vite.config.ts
+++ b/easyflow-ui-admin/packages/tinyflow-ui/vite.config.ts
@@ -1,44 +1,44 @@
-import {defineConfig} from 'vite';
-import {resolve} from 'path';
-import {svelte} from '@sveltejs/vite-plugin-svelte';
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 import dts from 'vite-plugin-dts';
 import replace from '@rollup/plugin-replace';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    build: {
-        outDir: 'dist',
-        emptyOutDir: true,
-        minify: true,
-        sourcemap: true,
-        lib: {
-            entry: resolve(__dirname, 'src/index.ts'),
-            cssFileName: 'index',
-            fileName: (format) => {
-                return format === 'umd' ? 'index.umd.js' : 'index.js';
-            },
-            formats: ['es', 'umd'],
-            name: 'Tinyflow'
-        },
-        rollupOptions:{
-            output: {
-                // 确保所有依赖都被打包
-                inlineDynamicImports: true,
-                exports: 'named',
-            },
-            plugins: [
-                replace({
-                    preventAssignment: true,
-                    'process.env.NODE_ENV': JSON.stringify('production') // 替换为生产环境
-                })
-            ]
-        }
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    minify: true,
+    sourcemap: true,
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      cssFileName: 'index',
+      fileName: (format) => {
+        return format === 'umd' ? 'index.umd.js' : 'index.js';
+      },
+      formats: ['es', 'umd'],
+      name: 'Tinyflow',
     },
-    plugins: [
-        svelte({ emitCss: false }),
-        dts({
-            rollupTypes: true,
-            tsconfigPath: './tsconfig.app.json'
-        })
-    ]
+    rollupOptions: {
+      output: {
+        // 确保所有依赖都被打包
+        inlineDynamicImports: true,
+        exports: 'named',
+      },
+      plugins: [
+        replace({
+          preventAssignment: true,
+          'process.env.NODE_ENV': JSON.stringify('production'), // 替换为生产环境
+        }),
+      ],
+    },
+  },
+  plugins: [
+    svelte({ emitCss: false }),
+    dts({
+      rollupTypes: true,
+      tsconfigPath: './tsconfig.app.json',
+    }),
+  ],
 });
diff --git a/easyflow-ui-admin/packages/tinyflow-vue/.eslintrc.cjs b/easyflow-ui-admin/packages/tinyflow-vue/.eslintrc.cjs
index d9b1d5e..1c6f6c4 100644
--- a/easyflow-ui-admin/packages/tinyflow-vue/.eslintrc.cjs
+++ b/easyflow-ui-admin/packages/tinyflow-vue/.eslintrc.cjs
@@ -1,5 +1,5 @@
 module.exports = {
-    "rules": {
-        "@typescript-eslint/no-explicit-any": ["off"],
-    }
+  rules: {
+    '@typescript-eslint/no-explicit-any': ['off'],
+  },
 };
diff --git a/easyflow-ui-admin/packages/tinyflow-vue/src/Tinyflow.vue b/easyflow-ui-admin/packages/tinyflow-vue/src/Tinyflow.vue
index a478597..e3ab8fd 100644
--- a/easyflow-ui-admin/packages/tinyflow-vue/src/Tinyflow.vue
+++ b/easyflow-ui-admin/packages/tinyflow-vue/src/Tinyflow.vue
@@ -1,17 +1,17 @@
 <template>
-    <div ref="divRef" :class="['tinyflow', className]" :style="style" />
+  <div ref="divRef" :class="['tinyflow', className]" :style="style" />
 </template>
 
 <script setup lang="ts">
-import {Tinyflow as TinyflowNative, TinyflowOptions} from '@tinyflow-ai/ui';
+import { Tinyflow as TinyflowNative, TinyflowOptions } from '@tinyflow-ai/ui';
 import '@tinyflow-ai/ui/dist/index.css';
-import {onMounted, onUnmounted, ref, watch} from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 const props = defineProps<
-    {
-        className?: string;
-        style?: Record<string, string>;
-    } & Omit<TinyflowOptions, 'element'>
+  {
+    className?: string;
+    style?: Record<string, string>;
+  } & Omit<TinyflowOptions, 'element'>
 >();
 
 const divRef = ref<HTMLDivElement | null>(null);
@@ -19,78 +19,84 @@ let tinyflow: TinyflowNative | null = null;
 
 // 安全深拷贝工具函数
 function safeDeepClone<T>(obj: T): T {
-    if (obj === null || typeof obj !== 'object') return obj;
+  if (obj === null || typeof obj !== 'object') return obj;
 
+  try {
+    return structuredClone(obj);
+  } catch {
     try {
-        return structuredClone(obj);
+      return JSON.parse(JSON.stringify(obj));
     } catch {
-        try {
-            return JSON.parse(JSON.stringify(obj));
-        } catch {
-            console.warn('Failed to clone object, returning original (may cause issues)', obj);
-            return obj;
-        }
+      console.warn(
+        'Failed to clone object, returning original (may cause issues)',
+        obj,
+      );
+      return obj;
     }
+  }
 }
 
 onMounted(() => {
-    if (divRef.value) {
-        // 净化 props.data，避免响应式对象或函数污染
-        const cleanedProps = { ...props } as any;
-        if ('data' in cleanedProps && cleanedProps.data != null) {
-            cleanedProps.data = safeDeepClone(cleanedProps.data);
-        }
-
-        tinyflow = new TinyflowNative({
-            ...cleanedProps,
-            element: divRef.value
-        });
+  if (divRef.value) {
+    // 净化 props.data，避免响应式对象或函数污染
+    const cleanedProps = { ...props } as any;
+    if ('data' in cleanedProps && cleanedProps.data != null) {
+      cleanedProps.data = safeDeepClone(cleanedProps.data);
     }
+
+    tinyflow = new TinyflowNative({
+      ...cleanedProps,
+      element: divRef.value,
+    });
+  }
 });
 
 onUnmounted(() => {
-    if (tinyflow) {
-        tinyflow.destroy();
-        tinyflow = null;
-    }
+  if (tinyflow) {
+    tinyflow.destroy();
+    tinyflow = null;
+  }
 });
 
 watch(
-    () => props.theme,
-    (theme) => {
-        if (tinyflow) {
-            tinyflow.setTheme(theme || 'light');
-        }
+  () => props.theme,
+  (theme) => {
+    if (tinyflow) {
+      tinyflow.setTheme(theme || 'light');
     }
+  },
 );
 
 const getData = () => {
-    if (tinyflow) {
-        return tinyflow.getData();
-    }
-    console.warn('Tinyflow instance is not initialized');
-    return null;
+  if (tinyflow) {
+    return tinyflow.getData();
+  }
+  console.warn('Tinyflow instance is not initialized');
+  return null;
 };
 
 const getInstance = () => {
-    if (tinyflow) {
-        return tinyflow;
-    }
-    console.warn('Tinyflow instance is not initialized');
-    return null;
+  if (tinyflow) {
+    return tinyflow;
+  }
+  console.warn('Tinyflow instance is not initialized');
+  return null;
 };
 
-const focusNode = async (nodeId: string, options?: { duration?: number; zoom?: number }) => {
-    if (tinyflow) {
-        return tinyflow.focusNode(nodeId, options);
-    }
-    console.warn('Tinyflow instance is not initialized');
-    return false;
+const focusNode = async (
+  nodeId: string,
+  options?: { duration?: number; zoom?: number },
+) => {
+  if (tinyflow) {
+    return tinyflow.focusNode(nodeId, options);
+  }
+  console.warn('Tinyflow instance is not initialized');
+  return false;
 };
 
 defineExpose({
-    getData,
-    getInstance,
-    focusNode
+  getData,
+  getInstance,
+  focusNode,
 });
 </script>
diff --git a/easyflow-ui-admin/packages/tinyflow-vue/src/main.ts b/easyflow-ui-admin/packages/tinyflow-vue/src/main.ts
index 9f9cf13..23fae8a 100644
--- a/easyflow-ui-admin/packages/tinyflow-vue/src/main.ts
+++ b/easyflow-ui-admin/packages/tinyflow-vue/src/main.ts
@@ -1,4 +1,4 @@
-import {createApp} from 'vue'
-import App from './Tinyflow.vue'
+import { createApp } from 'vue';
+import App from './Tinyflow.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/easyflow-ui-admin/packages/tinyflow-vue/tsconfig.app.json b/easyflow-ui-admin/packages/tinyflow-vue/tsconfig.app.json
index fca7fe4..0b8e08b 100644
--- a/easyflow-ui-admin/packages/tinyflow-vue/tsconfig.app.json
+++ b/easyflow-ui-admin/packages/tinyflow-vue/tsconfig.app.json
@@ -1,24 +1,24 @@
 {
-    "compilerOptions": {
-        "target": "ES2020",
-        "useDefineForClassFields": true,
-        "module": "ESNext",
-        "lib": ["ES2020", "DOM", "DOM.Iterable"],
-        "skipLibCheck": true,
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
 
-        /* Bundler mode */
-        "moduleResolution": "bundler",
-        "allowImportingTsExtensions": true,
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "preserve",
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
 
-        /* Linting */
-        "strict": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "noFallthroughCasesInSwitch": true
-    },
-    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
diff --git a/easyflow-ui-admin/packages/tinyflow-vue/tsconfig.json b/easyflow-ui-admin/packages/tinyflow-vue/tsconfig.json
index eb69b0d..1ffef60 100644
--- a/easyflow-ui-admin/packages/tinyflow-vue/tsconfig.json
+++ b/easyflow-ui-admin/packages/tinyflow-vue/tsconfig.json
@@ -1,4 +1,7 @@
 {
-    "files": [],
-    "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }
diff --git a/easyflow-ui-admin/packages/tinyflow-vue/tsconfig.node.json b/easyflow-ui-admin/packages/tinyflow-vue/tsconfig.node.json
index a27b880..dabc497 100644
--- a/easyflow-ui-admin/packages/tinyflow-vue/tsconfig.node.json
+++ b/easyflow-ui-admin/packages/tinyflow-vue/tsconfig.node.json
@@ -1,24 +1,24 @@
 {
-    "compilerOptions": {
-        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-        "target": "ES2022",
-        "lib": ["ES2023"],
-        "module": "ESNext",
-        "skipLibCheck": true,
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
 
-        /* Bundler mode */
-        "moduleResolution": "node",
-        "allowImportingTsExtensions": true,
-        "isolatedModules": true,
-        "moduleDetection": "force",
-        "noEmit": true,
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
 
-        /* Linting */
-        "strict": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "noFallthroughCasesInSwitch": true,
-        "noUncheckedSideEffectImports": true,
-    },
-    "include": ["vite.config.ts"]
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
 }
diff --git a/easyflow-ui-admin/packages/tinyflow-vue/vite.config.ts b/easyflow-ui-admin/packages/tinyflow-vue/vite.config.ts
index 3463ed5..4db3178 100644
--- a/easyflow-ui-admin/packages/tinyflow-vue/vite.config.ts
+++ b/easyflow-ui-admin/packages/tinyflow-vue/vite.config.ts
@@ -1,39 +1,39 @@
-import {defineConfig} from 'vite';
-import {resolve} from 'path';
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
 import vue from '@vitejs/plugin-vue';
 import dts from 'vite-plugin-dts';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    build: {
-        outDir: 'dist',
-        emptyOutDir: true,
-        minify: true,
-        sourcemap: true,
-        cssCodeSplit: true,
-        lib: {
-            entry: resolve(__dirname, 'src/index.ts'),
-            cssFileName: 'index',
-            fileName: (format) => {
-                return format === 'umd' ? 'index.umd.js' : 'index.js';
-            },
-            formats: ['es', 'umd'],
-            name: 'Tinyflow'
-        },
-        rollupOptions: {
-            external: ['vue'], // 排除 Vue 作为外部依赖
-            output: {
-                globals: {
-                    vue: 'Vue'
-                }
-            }
-        }
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    minify: true,
+    sourcemap: true,
+    cssCodeSplit: true,
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      cssFileName: 'index',
+      fileName: (format) => {
+        return format === 'umd' ? 'index.umd.js' : 'index.js';
+      },
+      formats: ['es', 'umd'],
+      name: 'Tinyflow',
     },
-    plugins: [
-        vue(),
-        dts({
-            rollupTypes: true,
-            tsconfigPath: './tsconfig.app.json'
-        })
-    ]
+    rollupOptions: {
+      external: ['vue'], // 排除 Vue 作为外部依赖
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+  plugins: [
+    vue(),
+    dts({
+      rollupTypes: true,
+      tsconfigPath: './tsconfig.app.json',
+    }),
+  ],
 });
diff --git a/easyflow-ui-admin/readme.md b/easyflow-ui-admin/readme.md
index f065963..25a22a2 100644
--- a/easyflow-ui-admin/readme.md
+++ b/easyflow-ui-admin/readme.md
@@ -1,11 +1,14 @@
 # Admin
+
 正在进行中...
 
 ## Tinyflow Vendor Source
+
 - Vendor scope: `packages/tinyflow-ui`, `packages/tinyflow-vue`
 - Upstream repository: `https://github.com/tinyflow-ai/tinyflow`
 - Upstream commit: `1873200bd38b5d8765246b5afad18bb22e8faaf1`
 
 Notes:
+
 - Local workspace keeps package names as `@tinyflow-ai/ui` and `@tinyflow-ai/vue`.
 - Source is maintained locally in this repository.