fix: 修复管理端前端 lint 与构建问题

- 收敛 easyflow-ui-admin 的 lint、格式和类型问题 - 修正 demo 页面与管理端前端构建失败点 - 验证 pnpm lint 与 pnpm build 均已通过
2026-04-05 21:39:13 +08:00
parent bb72e19c84
commit 7e7c236c2a
240 changed files with 5151 additions and 4701 deletions
--- 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 {
--- 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';
--- 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'),
--- 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) {
--- 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';
--- 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
--- 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>
--- 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) {
--- 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;
 }
--- 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>
--- 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>
--- 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);
 }

--- 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) {
--- 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,
--- 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 {
--- 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>
--- 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>
--- 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>
--- 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;
 }

--- 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']);

--- 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';

--- 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;
 }

--- 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 {
--- 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,
--- 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',
--- 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>
--- 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>
--- 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>
--- 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;
  }
--- 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>
--- 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;
 }
--- 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>
--- 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>
--- 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>
--- 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,
--- 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}`)
--- 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>
--- 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)">
--- 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 {
--- 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%);
 }

--- 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>
--- 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>
--- 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>
--- 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 {
--- 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 {
--- 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) {
--- 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>
--- 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>
--- 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 {
--- 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>
--- 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) {
--- 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>
--- 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>
--- 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 {