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

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

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

- 验证 pnpm lint 与 pnpm build 均已通过

easyflow-ui-admin/app/index.html

@@ -16,9 +16,9 @@
     <script>
       var _hmt = _hmt || [];
       (function () {
-        var hm = document.createElement("script");
-        hm.src = "https://hm.baidu.com/hm.js?42639a1503843c26bc4d8b35185616d9";
-        var s = document.getElementsByTagName("script")[0];
+        var hm = document.createElement('script');
+        hm.src = 'https://hm.baidu.com/hm.js?42639a1503843c26bc4d8b35185616d9';
+        var s = document.getElementsByTagName('script')[0];
         s.parentNode.insertBefore(hm, s);
       })();
     </script>

easyflow-ui-admin/app/package.json

@@ -29,10 +29,10 @@
     "@easyflow/types": "workspace:*",
     "@easyflow/utils": "workspace:*",
     "@element-plus/icons-vue": "^2.3.2",
-    "@wangeditor/editor": "^5.1.23",
-    "@wangeditor/editor-for-vue": "^5.1.12",
     "@tinyflow-ai/vue": "workspace:*",
     "@vueuse/core": "catalog:",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "dayjs": "catalog:",
     "dompurify": "^3.3.1",
     "element-plus": "catalog:",

easyflow-ui-admin/app/src/adapter/component/index.ts

@@ -10,7 +10,11 @@ import type { Recordable } from '@easyflow/types';
 
 import { defineAsyncComponent, defineComponent, h, ref } from 'vue';
 
-import { ApiComponent, globalShareState, IconPicker } from '@easyflow/common-ui';
+import {
+  ApiComponent,
+  globalShareState,
+  IconPicker,
+} from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 
 import { ElNotification } from 'element-plus';

easyflow-ui-admin/app/src/adapter/form.ts

@@ -1,11 +1,15 @@
 import type {
-  EasyFlowFormSchema as FormSchema,
   EasyFlowFormProps,
+  EasyFlowFormSchema as FormSchema,
 } from '@easyflow/common-ui';
 
 import type { ComponentType } from './component';
 
-import { setupEasyFlowForm, useEasyFlowForm as useForm, z } from '@easyflow/common-ui';
+import {
+  setupEasyFlowForm,
+  useEasyFlowForm as useForm,
+  z,
+} from '@easyflow/common-ui';
 import { $t } from '@easyflow/locales';
 
 async function initSetupEasyFlowForm() {

easyflow-ui-admin/app/src/adapter/vxe-table.ts

@@ -2,7 +2,10 @@ import type { VxeTableGridOptions } from '@easyflow/plugins/vxe-table';
 
 import { h } from 'vue';
 
-import { setupEasyFlowVxeTable, useEasyFlowVxeGrid } from '@easyflow/plugins/vxe-table';
+import {
+  setupEasyFlowVxeTable,
+  useEasyFlowVxeGrid,
+} from '@easyflow/plugins/vxe-table';
 
 import { ElButton, ElImage } from 'element-plus';
 

easyflow-ui-admin/app/src/api/ai/knowledge.ts

@@ -0,0 +1 @@
+export {};

easyflow-ui-admin/app/src/components/cardPage/CardPage.vue

@@ -144,143 +144,8 @@ const filteredActions = computed(() => {
 </template>
 
 <style scoped>
-.card-list-container {
-  width: 100%;
-  height: 100%;
-}
-
-.card-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-:deep(.el-card__body) {
-  padding: 20px 0 0 0;
-}
-.card-item {
-  transition: all 0.3s ease;
-  border-radius: 8px;
-  flex-shrink: 0;
-  height: 165px;
-  min-width: 0;
-}
-:deep(.delete-dropdown-item) {
-  color: #ff4d4f !important;
-}
-:deep(.delete-dropdown-item:hover) {
-  color: #ff7875 !important;
-}
-:deep(.delete-dropdown-item .el-icon) {
-  color: inherit !important;
-}
-.card-item:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-}
-
-.card-content {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: var(--el-bg-color);
-  border-radius: 8px;
-}
-
-.card-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 15px;
-  margin-bottom: 15px;
-  flex: 1;
-  padding: 0 20px 0 20px;
-}
-
-.card-info {
-  flex: 1;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.card-title {
-  margin: 0 0 8px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  line-height: 1.4;
-}
-
-.card-desc {
-  margin: 0;
-  width: 100%;
-  font-size: 14px;
-  color: #606266;
-  line-height: 1.5;
-  height: 42px;
-  min-height: 42px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.card-actions {
-  display: flex;
-  align-items: center;
-  height: 48px;
-  background:
-    linear-gradient(
-      180deg,
-      var(--el-color-primary-light-9),
-      var(--el-bg-color)
-    ),
-    var(--el-bg-color);
-}
-
-.action-btn {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 0;
-  color: #acb7c6;
-  position: relative;
-  &:hover {
-    color: var(--el-color-primary);
-  }
-}
-
-.more-btn {
-  width: 100%;
-  justify-content: center;
-}
-
-.divider {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1px;
-  height: 20px;
-  background-color: #e0e0e0;
-}
-
-/* 确保按钮内容不换行 */
-.action-btn .el-button {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  justify-content: center;
-}
-.empty-state {
-  padding: 40px 0;
-  text-align: center;
-}
-
 /* 响应式设计 */
+
 /* 超大屏幕 */
 @media (min-width: 1920px) {
   .card-list {
@@ -305,8 +170,8 @@ const filteredActions = computed(() => {
   }
 
   .card-header {
-    padding: 0 16px 0 16px;
     gap: 12px;
+    padding: 0 16px;
   }
 
   .card-title {
@@ -314,9 +179,9 @@ const filteredActions = computed(() => {
   }
 
   .card-desc {
-    font-size: 13px;
     height: 36px;
     min-height: 36px;
+    font-size: 13px;
   }
 }
 
@@ -326,21 +191,22 @@ const filteredActions = computed(() => {
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 16px;
   }
+
   .card-header {
-    padding: 0 12px 0 12px;
     gap: 10px;
+    padding: 0 12px;
   }
 
   .card-title {
-    font-size: 14px;
     margin-bottom: 6px;
+    font-size: 14px;
   }
 
   .card-desc {
-    font-size: 12px;
     height: 32px;
     min-height: 32px;
     -webkit-line-clamp: 2;
+    font-size: 12px;
   }
 
   .card-actions {
@@ -351,4 +217,147 @@ const filteredActions = computed(() => {
     font-size: 11px;
   }
 }
+
+.card-list-container {
+  width: 100%;
+  height: 100%;
+}
+
+.card-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+:deep(.el-card__body) {
+  padding: 20px 0 0;
+}
+
+.card-item {
+  flex-shrink: 0;
+  min-width: 0;
+  height: 165px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+:deep(.delete-dropdown-item) {
+  color: #ff4d4f !important;
+}
+
+:deep(.delete-dropdown-item:hover) {
+  color: #ff7875 !important;
+}
+
+:deep(.delete-dropdown-item .el-icon) {
+  color: inherit !important;
+}
+
+.card-item:hover {
+  box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
+  transform: translateY(-5px);
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--el-bg-color);
+  border-radius: 8px;
+}
+
+.card-header {
+  display: flex;
+  flex: 1;
+  gap: 15px;
+  align-items: flex-start;
+  padding: 0 20px;
+  margin-bottom: 15px;
+}
+
+.card-info {
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.card-title {
+  margin: 0 0 8px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--el-text-color-primary);
+}
+
+.card-desc {
+  display: -webkit-box;
+  width: 100%;
+  height: 42px;
+  min-height: 42px;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #606266;
+  -webkit-box-orient: vertical;
+}
+
+.card-actions {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  background:
+    linear-gradient(
+      180deg,
+      var(--el-color-primary-light-9),
+      var(--el-bg-color)
+    ),
+    var(--el-bg-color);
+}
+
+.action-btn {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  color: #acb7c6;
+
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+
+.more-btn {
+  justify-content: center;
+  width: 100%;
+}
+
+.divider {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 1px;
+  height: 20px;
+  background-color: #e0e0e0;
+  transform: translateY(-50%);
+}
+
+/* 确保按钮内容不换行 */
+.action-btn .el-button {
+  justify-content: center;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.empty-state {
+  padding: 40px 0;
+  text-align: center;
+}
 </style>

easyflow-ui-admin/app/src/components/categoryPanel/CategoryCrudPanel.vue

@@ -283,28 +283,28 @@ const handleDeleteClick = (event: any, item: any) => {
 
 <style scoped>
 .crud-category-item:hover {
-  background-color: var(--el-color-primary-light-9);
   cursor: pointer;
+  background-color: var(--el-color-primary-light-9);
 }
 
 .crud-category-item.selected {
-  background-color: var(--el-color-primary-light-9);
   color: var(--el-color-primary);
+  background-color: var(--el-color-primary-light-9);
 }
 
 .no-data {
-  text-align: center;
   padding: 40px 0;
+  text-align: center;
 }
 
 .crud-category-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 12px;
   height: 40px;
-  border-radius: 8px;
+  padding: 8px 12px;
   font-size: 14px;
+  border-radius: 8px;
 }
 
 .crud-category-item :deep(.el-icon) {
@@ -316,8 +316,8 @@ const handleDeleteClick = (event: any, item: any) => {
   align-items: center;
   justify-content: center;
   padding: 4px;
-  border-radius: 4px;
   cursor: pointer;
+  border-radius: 4px;
   transition: background-color 0.3s;
 }
 

easyflow-ui-admin/app/src/components/categoryPanel/CategoryPanel.vue

@@ -10,7 +10,6 @@ const props = defineProps({
   categories: {
     type: Array,
     default: () => [],
-    required: true,
   },
   valueKey: {
     type: String,
@@ -125,6 +124,14 @@ const panelWidth = computed(() => {
   }
 });
 
+const categoryIconStyle = computed(() => ({
+  '--category-icon-color': props.iconColor,
+  '--category-icon-size':
+    typeof props.iconSize === 'number'
+      ? `${props.iconSize}px`
+      : `${props.iconSize}`,
+}));
+
 // 切换面板收缩状态
 const togglePanel = () => {
   isCollapsed.value = !isCollapsed.value;
@@ -177,18 +184,24 @@ onMounted(() => {
           @click="handleCategoryClick(category)"
         >
           <!-- 图标 -->
-          <div v-if="category[iconKey]" class="category-icon">
+          <div
+            v-if="category[iconKey]"
+            class="category-icon"
+            :style="categoryIconStyle"
+          >
             <!-- 1. 组件类型图标（Element Plus / 自定义 SVG 组件） -->
             <ElIcon v-if="isComponent(category[iconKey])">
               <component :is="category[iconKey]" />
             </ElIcon>
             <!-- 2. SVG 字符串：支持 v-html 或 img 两种渲染方式 -->
             <template v-else-if="isSvgString(category[iconKey])">
+              <!-- eslint-disable vue/no-v-html -->
               <div
                 v-if="!useImgForSvg"
                 v-html="category[iconKey]"
                 class="custom-svg"
               ></div>
+              <!-- eslint-enable vue/no-v-html -->
               <img
                 v-else
                 :src="svgToDataUrl(category[iconKey])"
@@ -221,14 +234,14 @@ onMounted(() => {
 <style scoped>
 .category-panel {
   position: relative; /* 相对定位，用于按钮绝对定位 */
-  overflow: hidden;
-  height: 100%;
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑宽度过渡 */
   box-sizing: border-box;
-  background: #ffffff;
-  border-radius: 8px;
-  border: 1px solid #f0f0f0;
+  height: 100%;
   padding: 20px;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑宽度过渡 */
 }
 
 /* 右上角收缩/展开按钮 */
@@ -242,18 +255,19 @@ onMounted(() => {
   justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: 50%;
+  cursor: pointer;
   background-color: var(--el-color-white);
   border: 1px solid #e5e7eb;
-  cursor: pointer;
-  transition: all 0.2s;
+  border-radius: 50%;
+
   /* 按钮不随面板收缩移动 */
   transform: translateX(0);
+  transition: all 0.2s;
 }
 
 .toggle-panel-btn:hover {
   background-color: #f3f4f6;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
 }
 
 .toggle-panel-btn .el-icon {
@@ -264,15 +278,12 @@ onMounted(() => {
 
 /* 分类列表容器 */
 .category-list {
-  overflow: hidden;
-  height: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 1px;
-}
-
-.category-item {
+  height: 100%;
+  overflow: hidden;
 }
 
 .category-item:last-child {
@@ -281,15 +292,15 @@ onMounted(() => {
 
 .category-item-content {
   display: flex;
+  gap: 12px;
   align-items: center;
+  padding: 6px 0 6px 14px;
   font-size: 14px;
   font-weight: 500;
   color: #333;
   cursor: pointer;
-  transition: background-color 0.2s;
-  gap: 12px;
-  padding: 6px 0 6px 14px;
   border-radius: 4px;
+  transition: background-color 0.2s;
 }
 
 .category-item-content:hover {
@@ -297,49 +308,36 @@ onMounted(() => {
 }
 
 .category-icon {
-  width: v-bind(iconSize);
-  height: v-bind(iconSize);
-  color: v-bind(iconColor);
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: var(--category-icon-size);
+  height: var(--category-icon-size);
   vertical-align: middle;
+  color: var(--category-icon-color);
 }
 
 .category-icon .el-icon {
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-.category-item-content {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  gap: 12px;
+  width: 100%;
+  height: 100%;
 }
 
 .category-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: PingFangSC, 'PingFang SC';
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: left;
+  white-space: nowrap;
   transition:
     opacity 0.2s,
     transform 0.2s;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family:
-    PingFangSC,
-    PingFang SC;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  text-align: left;
-  font-style: normal;
 }
 
 /* 收缩状态样式 */
@@ -360,11 +358,11 @@ onMounted(() => {
 /* 新增：选中态样式 */
 .category-item-content.selected {
   font-weight: 600;
-  background: rgba(0, 102, 255, 0.06);
-  color: #0066ff;
+  color: #06f;
+  background: rgb(0 102 255 / 6%);
 }
 
 .category-item-content.selected:hover {
-  background: rgba(0, 102, 255, 0.06);
+  background: rgb(0 102 255 / 6%);
 }
 </style>

easyflow-ui-admin/app/src/components/chat-history/ChatHistoryDetailDrawer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ChatThinkingBlock } from '@easyflow/common-ui';
 import ElXMarkdown from 'vue-element-plus-x/es/XMarkdown/index.js';
 
+import { ChatThinkingBlock } from '@easyflow/common-ui';
 import { IconifyIcon } from '@easyflow/icons';
 
 import { CircleCheck, Close } from '@element-plus/icons-vue';
@@ -22,7 +22,7 @@ interface ChatHistoryDetailDrawerProps {
   session?: any;
   messages?: any[];
   hasMore?: boolean;
-  onLoadMore?: (() => void | Promise<void>) | undefined;
+  onLoadMore?: (() => Promise<void> | void) | undefined;
 }
 
 const props = withDefaults(defineProps<ChatHistoryDetailDrawerProps>(), {
@@ -128,12 +128,7 @@ async function handleLoadMore() {
 
     <div class="chat-history-detail__stream">
       <div class="chat-history-detail__stream-toolbar">
-        <ElButton
-          v-if="hasMore"
-          text
-          type="primary"
-          @click="handleLoadMore"
-        >
+        <ElButton v-if="hasMore" text type="primary" @click="handleLoadMore">
           加载更早消息
         </ElButton>
       </div>
@@ -233,48 +228,48 @@ async function handleLoadMore() {
 <style scoped>
 .chat-history-detail {
   display: flex;
+  flex-direction: column;
   height: 100%;
   min-height: 0;
-  flex-direction: column;
   background:
     radial-gradient(
       circle at top right,
-      hsl(var(--nav-ambient) / 0.1),
+      hsl(var(--nav-ambient) / 10%),
       transparent 26%
     ),
     linear-gradient(
       180deg,
-      hsl(var(--glass-border) / 0.18) 0%,
-      hsl(var(--glass-tint) / 0.34) 10%,
-      hsl(var(--surface-panel) / 0.88) 28%,
-      hsl(var(--surface-panel) / 0.96) 100%
+      hsl(var(--glass-border) / 18%) 0%,
+      hsl(var(--glass-tint) / 34%) 10%,
+      hsl(var(--surface-panel) / 88%) 28%,
+      hsl(var(--surface-panel) / 96%) 100%
     );
 }
 
 .chat-history-detail__summary {
   display: flex;
+  gap: 16px;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 16px;
   padding: 20px 24px 12px;
-  border-bottom: 1px solid hsl(var(--divider-faint) / 0.16);
+  border-bottom: 1px solid hsl(var(--divider-faint) / 16%);
 }
 
 .chat-history-detail__summary-main {
-  min-width: 0;
   flex: 1;
+  min-width: 0;
 }
 
 .chat-history-detail__title-row {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
   gap: 12px;
+  align-items: center;
 }
 
 .chat-history-detail__title {
-  margin: 0;
   min-width: 0;
+  margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: hsl(var(--text-strong));
@@ -285,19 +280,19 @@ async function handleLoadMore() {
   align-items: center;
   min-height: 26px;
   padding: 0 10px;
-  border: 1px solid hsl(var(--glass-border) / 0.38);
-  border-radius: 999px;
-  background: hsl(var(--glass-tint) / 0.54);
   font-size: 12px;
   font-weight: 600;
   color: hsl(var(--nav-item-active-foreground));
+  background: hsl(var(--glass-tint) / 54%);
+  border: 1px solid hsl(var(--glass-border) / 38%);
+  border-radius: 999px;
 }
 
 .chat-history-detail__meta-row {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
   gap: 10px;
+  align-items: center;
   margin-top: 10px;
 }
 
@@ -316,28 +311,28 @@ async function handleLoadMore() {
 
 .chat-history-detail__meta-inline {
   display: inline-flex;
-  min-width: 0;
-  align-items: center;
   gap: 6px;
+  align-items: center;
+  min-width: 0;
 }
 
 .chat-history-detail__meta-divider {
   display: inline-flex;
-  height: 12px;
   width: 1px;
-  background: hsl(var(--divider-faint) / 0.42);
+  height: 12px;
+  background: hsl(var(--divider-faint) / 42%);
 }
 
 .chat-history-detail__close {
   display: inline-flex;
-  height: 36px;
-  width: 36px;
   align-items: center;
   justify-content: center;
-  border: 1px solid hsl(var(--divider-faint) / 0.24);
-  border-radius: 999px;
-  background: hsl(var(--glass-tint) / 0.46);
+  width: 36px;
+  height: 36px;
   color: hsl(var(--text-muted));
+  background: hsl(var(--glass-tint) / 46%);
+  border: 1px solid hsl(var(--divider-faint) / 24%);
+  border-radius: 999px;
   transition:
     transform 0.18s ease,
     background-color 0.18s ease,
@@ -346,15 +341,15 @@ async function handleLoadMore() {
 
 .chat-history-detail__close:hover {
   color: hsl(var(--text-strong));
-  background: hsl(var(--surface-contrast-soft) / 0.92);
+  background: hsl(var(--surface-contrast-soft) / 92%);
   transform: translateY(-1px);
 }
 
 .chat-history-detail__stream {
   display: flex;
-  min-height: 0;
   flex: 1;
   flex-direction: column;
+  min-height: 0;
   padding: 14px 24px 20px;
 }
 
@@ -365,8 +360,8 @@ async function handleLoadMore() {
 }
 
 .chat-history-detail__scrollbar {
-  min-height: 0;
   flex: 1;
+  min-height: 0;
 }
 
 .chat-history-detail__message-list {
@@ -391,9 +386,9 @@ async function handleLoadMore() {
 
 .chat-history-detail__message-meta {
   display: inline-flex;
-  max-width: 88%;
-  align-items: center;
   gap: 10px;
+  align-items: center;
+  max-width: 88%;
   font-size: 11px;
   color: hsl(var(--text-muted));
 }
@@ -409,30 +404,30 @@ async function handleLoadMore() {
 
 .chat-history-detail__message-bubble {
   width: min(88%, 760px);
-  border: 1px solid hsl(var(--divider-faint) / 0.34);
-  border-radius: 22px;
   padding: 14px 16px;
   font-size: 14px;
   line-height: 1.72;
+  border: 1px solid hsl(var(--divider-faint) / 34%);
+  border-radius: 22px;
   backdrop-filter: blur(10px);
 }
 
 .chat-history-detail__message-bubble.is-assistant {
-  background: hsl(var(--glass-tint) / 0.88);
+  background: hsl(var(--glass-tint) / 88%);
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.48),
-    0 12px 26px -24px hsl(var(--foreground) / 0.18);
+    inset 0 1px 0 hsl(var(--glass-border) / 48%),
+    0 12px 26px -24px hsl(var(--foreground) / 18%);
 }
 
 .chat-history-detail__message-bubble.is-user {
   background: linear-gradient(
     180deg,
-    hsl(var(--primary) / 0.14) 0%,
-    hsl(var(--surface-panel) / 0.96) 100%
+    hsl(var(--primary) / 14%) 0%,
+    hsl(var(--surface-panel) / 96%) 100%
   );
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.42),
-    0 16px 30px -26px hsl(var(--primary) / 0.24);
+    inset 0 1px 0 hsl(var(--glass-border) / 42%),
+    0 16px 30px -26px hsl(var(--primary) / 24%);
 }
 
 .chat-history-detail__message-chains {
@@ -448,23 +443,23 @@ async function handleLoadMore() {
 
 .chat-history-detail__tool-panel {
   overflow: hidden;
-  border: 1px solid hsl(var(--divider-faint) / 0.24);
+  background: hsl(var(--surface-panel) / 68%);
+  border: 1px solid hsl(var(--divider-faint) / 24%);
   border-radius: 14px;
-  background: hsl(var(--surface-panel) / 0.68);
-  box-shadow: inset 0 1px 0 hsl(var(--glass-border) / 0.18);
+  box-shadow: inset 0 1px 0 hsl(var(--glass-border) / 18%);
 }
 
 .chat-history-detail__tool-title {
   display: flex;
-  min-width: 0;
-  align-items: center;
   gap: 8px;
+  align-items: center;
+  min-width: 0;
   padding-left: 6px;
 }
 
 .chat-history-detail__tool-name {
-  min-width: 0;
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -472,13 +467,13 @@ async function handleLoadMore() {
 
 .chat-history-detail__tool-status {
   display: inline-flex;
-  align-items: center;
   gap: 6px;
+  align-items: center;
   padding: 4px 8px;
-  border-radius: 999px;
-  background: hsl(var(--surface-contrast-soft) / 0.92);
   font-size: 12px;
   color: hsl(var(--text-muted));
+  background: hsl(var(--surface-contrast-soft) / 92%);
+  border-radius: 999px;
 }
 
 .chat-history-detail__markdown {
@@ -488,9 +483,9 @@ async function handleLoadMore() {
 }
 
 .chat-history-detail__markdown :deep(.markdown-body) {
-  background: transparent;
   font-size: inherit;
   line-height: inherit;
+  background: transparent;
 }
 
 .chat-history-detail__markdown :deep(.markdown-body > :first-child) {
@@ -508,8 +503,8 @@ async function handleLoadMore() {
 
 .chat-history-detail__markdown :deep(pre) {
   max-width: 100%;
-  overflow: auto;
   margin-top: 0;
+  overflow: auto;
 }
 
 .chat-history-detail__tool-panel :deep(.el-collapse-item__wrap) {
@@ -520,7 +515,7 @@ async function handleLoadMore() {
   min-height: 44px;
   padding-right: 14px;
   background: transparent;
-  border-bottom-color: hsl(var(--divider-faint) / 0.16);
+  border-bottom-color: hsl(var(--divider-faint) / 16%);
 }
 
 .chat-history-detail__message-bubble :deep(.el-collapse-item__content) {
@@ -550,8 +545,8 @@ async function handleLoadMore() {
 
   .chat-history-detail__message-bubble,
   .chat-history-detail__message-meta {
-    max-width: 100%;
     width: 100%;
+    max-width: 100%;
   }
 }
 </style>

easyflow-ui-admin/app/src/components/chat/chat.vue

@@ -5,18 +5,23 @@ import type {
 } from 'vue-element-plus-x/types/BubbleList';
 import type { TypewriterInstance } from 'vue-element-plus-x/types/Typewriter';
 
-import {
-  ChatThinkingBlock,
-  type ChatThinkingBlockStatus,
-} from '@easyflow/common-ui';
+import type { ChatThinkingBlockStatus } from '@easyflow/common-ui';
 import type { BotInfo, ChatMessage } from '@easyflow/types';
 
-import { nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import {
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  watchEffect,
+} from 'vue';
 import ElBubbleList from 'vue-element-plus-x/es/BubbleList/index.js';
 import ElSender from 'vue-element-plus-x/es/Sender/index.js';
 import ElXMarkdown from 'vue-element-plus-x/es/XMarkdown/index.js';
+import { useRoute, useRouter } from 'vue-router';
 
+import { ChatThinkingBlock } from '@easyflow/common-ui';
 import { IconifyIcon } from '@easyflow/icons';
 import { $t } from '@easyflow/locales';
 import { useBotStore } from '@easyflow/stores';
@@ -51,8 +56,8 @@ import SendingIcon from '../icons/SendingIcon.vue';
 
 type Think = {
   reasoning_content?: string;
-  thinkingStatus?: ChatThinkingBlockStatus;
   thinkingExpanded?: boolean;
+  thinkingStatus?: ChatThinkingBlockStatus;
 };
 
 type Tool = {
@@ -168,7 +173,8 @@ const updateBackToBottomButtonVisible = () => {
     showBackToBottomButton.value = false;
     return;
   }
-  const { scrollTop, scrollHeight, clientHeight } = bubbleListScrollElement.value;
+  const { scrollTop, scrollHeight, clientHeight } =
+    bubbleListScrollElement.value;
   showBackToBottomButton.value =
     scrollHeight - (scrollTop + clientHeight) > BACK_TO_BOTTOM_THRESHOLD;
 };
@@ -571,7 +577,6 @@ onBeforeUnmount(() => {
                   </ElCollapse>
                 </template>
               </template>
-
             </div>
           </template>
           <!-- 自定义头像 -->
@@ -725,7 +730,7 @@ onBeforeUnmount(() => {
   background: var(--el-bg-color-overlay);
   border: 1px solid var(--el-border-color-light);
   border-radius: 999px;
-  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 6px 10px rgb(0 0 0 / 8%);
   transition: all 0.2s ease;
 }
 
@@ -775,10 +780,10 @@ onBeforeUnmount(() => {
 }
 
 :deep(.chat-tool-panel.el-collapse) {
-  border: 1px solid hsl(var(--divider-faint) / 0.26);
+  background: hsl(var(--surface-panel) / 70%);
+  border: 1px solid hsl(var(--divider-faint) / 26%);
   border-radius: 14px;
-  background: hsl(var(--surface-panel) / 0.7);
-  box-shadow: inset 0 1px 0 hsl(var(--glass-border) / 0.2);
+  box-shadow: inset 0 1px 0 hsl(var(--glass-border) / 20%);
 }
 
 :deep(.chat-tool-panel .el-collapse-item) {
@@ -794,7 +799,7 @@ onBeforeUnmount(() => {
   min-height: 44px;
   padding-right: 14px;
   background: transparent;
-  border-bottom-color: hsl(var(--divider-faint) / 0.16);
+  border-bottom-color: hsl(var(--divider-faint) / 16%);
 }
 
 :deep(.chat-tool-panel .el-collapse-item__content) {

easyflow-ui-admin/app/src/components/collapse/CustomCoolapse.vue

@@ -122,162 +122,6 @@ const collapseAll = () => {
 </template>
 
 <style scoped>
-.accordion-container {
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 20px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-.title {
-  text-align: center;
-  color: var(--el-text-color-secondary);
-  margin-bottom: 8px;
-  font-size: 2rem;
-  font-weight: 600;
-}
-
-.subtitle {
-  text-align: center;
-  color: var(--el-text-color-secondary);
-  margin-bottom: 30px;
-  font-size: 1.1rem;
-}
-
-/* 控制面板样式 */
-.controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 30px;
-  padding: 20px;
-  background: var(--el-bg-color);
-  border-radius: 8px;
-  border: 1px solid #e9ecef;
-}
-
-.control-group {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: var(--el-text-color-secondary);
-  cursor: pointer;
-}
-
-.checkbox {
-  width: 16px;
-  height: 16px;
-}
-
-.control-btn {
-  padding: 8px 16px;
-  border: 1px solid #3498db;
-  background: var(--el-bg-color);
-  color: var(--el-text-color-secondary);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.3s ease;
-}
-
-.control-btn:hover {
-  background: #3498db;
-  background: var(--el-color-primary-light-9);
-}
-
-/* 折叠面板列表 */
-.accordion-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.accordion-item {
-  border: 1px solid #e1e5e9;
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--el-bg-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
-}
-
-.accordion-item:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.accordion-item--active {
-  border-color: #3498db;
-}
-
-/* 面板头部 */
-.accordion-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  background: var(--el-bg-color);
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  user-select: none;
-}
-
-.accordion-header:hover {
-  background: var(--el-color-primary-light-9);
-}
-
-.accordion-title {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 500;
-  color: var(--el-text-color-secondary);
-  padding-left: 12px;
-}
-
-.accordion-icon {
-  transition: transform 0.3s ease;
-  color: #7f8c8d;
-  font-size: 12px;
-}
-
-.accordion-icon--rotated {
-  transform: rotate(180deg);
-  color: #3498db;
-}
-
-.accordion-content {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.4s ease;
-  background: var(--el-bg-color);
-}
-
-.accordion-content--open {
-  max-height: 200px;
-}
-
-.accordion-content-inner {
-  padding: 20px;
-  border-top: 1px solid #e1e5e9;
-}
-
-.accordion-content-inner p {
-  margin: 0;
-  line-height: 1.6;
-  color: var(--el-text-color-secondary);
-  font-size: 14px;
-}
-.column-header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
 /* 响应式设计 */
 @media (max-width: 768px) {
   .accordion-container {
@@ -306,4 +150,162 @@ const collapseAll = () => {
     font-size: 1rem;
   }
 }
+
+.accordion-container {
+  max-width: 100%;
+  padding: 20px;
+  margin: 0 auto;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.title {
+  margin-bottom: 8px;
+  font-size: 2rem;
+  font-weight: 600;
+  color: var(--el-text-color-secondary);
+  text-align: center;
+}
+
+.subtitle {
+  margin-bottom: 30px;
+  font-size: 1.1rem;
+  color: var(--el-text-color-secondary);
+  text-align: center;
+}
+
+/* 控制面板样式 */
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  margin-bottom: 30px;
+  background: var(--el-bg-color);
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+}
+
+.control-group {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+
+.checkbox-label {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+  cursor: pointer;
+}
+
+.checkbox {
+  width: 16px;
+  height: 16px;
+}
+
+.control-btn {
+  padding: 8px 16px;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+  cursor: pointer;
+  background: var(--el-bg-color);
+  border: 1px solid #3498db;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+}
+
+.control-btn:hover {
+  background: #3498db;
+  background: var(--el-color-primary-light-9);
+}
+
+/* 折叠面板列表 */
+.accordion-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.accordion-item {
+  overflow: hidden;
+  background: var(--el-bg-color);
+  border: 1px solid #e1e5e9;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
+  transition: all 0.3s ease;
+}
+
+.accordion-item:hover {
+  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+}
+
+.accordion-item--active {
+  border-color: #3498db;
+}
+
+/* 面板头部 */
+.accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  cursor: pointer;
+  user-select: none;
+  background: var(--el-bg-color);
+  transition: background-color 0.3s ease;
+}
+
+.accordion-header:hover {
+  background: var(--el-color-primary-light-9);
+}
+
+.accordion-title {
+  padding-left: 12px;
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: var(--el-text-color-secondary);
+}
+
+.accordion-icon {
+  font-size: 12px;
+  color: #7f8c8d;
+  transition: transform 0.3s ease;
+}
+
+.accordion-icon--rotated {
+  color: #3498db;
+  transform: rotate(180deg);
+}
+
+.accordion-content {
+  max-height: 0;
+  overflow: hidden;
+  background: var(--el-bg-color);
+  transition: max-height 0.4s ease;
+}
+
+.accordion-content--open {
+  max-height: 200px;
+}
+
+.accordion-content-inner {
+  padding: 20px;
+  border-top: 1px solid #e1e5e9;
+}
+
+.accordion-content-inner p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--el-text-color-secondary);
+}
+
+.column-header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 </style>

easyflow-ui-admin/app/src/components/headerSearch/HeaderSearch.vue

@@ -171,9 +171,9 @@ const handleDropdownClick = (button) => {
 <style scoped>
 .custom-header {
   display: flex;
+  gap: 16px;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
   width: 100%;
 }
 
@@ -192,8 +192,8 @@ const handleDropdownClick = (button) => {
   display: flex;
   flex: 1;
   flex-wrap: wrap;
-  align-items: center;
   gap: 12px;
+  align-items: center;
 }
 
 .search-middle {
@@ -208,20 +208,20 @@ const handleDropdownClick = (button) => {
 
 .search-input :deep(.el-input__wrapper) {
   min-height: 40px;
-  background: hsl(var(--surface-contrast-soft) / 0.92);
+  background: hsl(var(--surface-contrast-soft) / 92%);
   border-radius: 14px;
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.44),
-    0 10px 24px -24px hsl(var(--foreground) / 0.24);
+    inset 0 1px 0 hsl(var(--glass-border) / 44%),
+    0 10px 24px -24px hsl(var(--foreground) / 24%);
 }
 
 .search-input :deep(.el-input__wrapper:hover),
 .search-input :deep(.el-input__wrapper.is-focus) {
-  background: hsl(var(--surface-subtle) / 0.98);
+  background: hsl(var(--surface-subtle) / 98%);
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.56),
-    0 0 0 3px hsl(var(--primary) / 0.08),
-    0 12px 24px -24px hsl(var(--foreground) / 0.24);
+    inset 0 1px 0 hsl(var(--glass-border) / 56%),
+    0 0 0 3px hsl(var(--primary) / 8%),
+    0 12px 24px -24px hsl(var(--foreground) / 24%);
 }
 
 .search-prefix {
@@ -231,8 +231,8 @@ const handleDropdownClick = (button) => {
 .header-right {
   flex-shrink: 0;
   flex-wrap: wrap;
-  justify-content: flex-end;
   gap: 12px;
+  justify-content: flex-end;
 }
 
 .header-right :deep(.el-button),
@@ -241,24 +241,24 @@ const handleDropdownClick = (button) => {
   height: 32px;
   min-height: 32px;
   padding-inline: 18px;
-  border-radius: 10px;
   border-color: transparent;
+  border-radius: 10px;
   box-shadow: none;
 }
 
 .header-right :deep(.el-button:not(.el-button--primary)),
 .search-group :deep(.el-button:not(.el-button--primary)) {
   color: hsl(var(--text-strong));
-  background: hsl(var(--surface-contrast-soft) / 0.86);
+  background: hsl(var(--surface-contrast-soft) / 86%);
   border-color: transparent;
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.34),
-    0 10px 24px -24px hsl(var(--foreground) / 0.2);
+    inset 0 1px 0 hsl(var(--glass-border) / 34%),
+    0 10px 24px -24px hsl(var(--foreground) / 20%);
 }
 
 .header-right :deep(.el-button--primary),
 .search-group :deep(.el-button--primary) {
-  box-shadow: 0 16px 28px -22px hsl(var(--primary) / 0.48);
+  box-shadow: 0 16px 28px -22px hsl(var(--primary) / 48%);
 }
 
 .dropdown-label {
@@ -268,8 +268,8 @@ const handleDropdownClick = (button) => {
 @media (max-width: 768px) {
   .custom-header {
     flex-direction: column;
-    align-items: stretch;
     gap: 12px;
+    align-items: stretch;
   }
 
   .header-right {

easyflow-ui-admin/app/src/components/json/ShowJson.vue

@@ -6,9 +6,10 @@ import { preferences } from '@easyflow/preferences';
 import { ElEmpty } from 'element-plus';
 import { JsonViewer } from 'vue3-json-viewer';
 
-import 'vue3-json-viewer/dist/vue3-json-viewer.css';
 import { getEmptyStateImageUrl } from '#/utils/assets';
 
+import 'vue3-json-viewer/dist/vue3-json-viewer.css';
+
 defineProps({
   value: {
     required: true,

easyflow-ui-admin/app/src/components/page/CardList.vue

@@ -84,14 +84,25 @@ const resolvedPrimaryAction = computed(() => {
   return props.primaryAction;
 });
 
+function resolveActionPlacement(
+  action: ActionButton,
+  index: number,
+): ActionPlacement {
+  if (action.placement) {
+    return action.placement;
+  }
+  if (resolvedPrimaryAction.value) {
+    return 'menu';
+  }
+  return index < 3 ? 'inline' : 'menu';
+}
+
 const resolvedActions = computed<ResolvedActionButton[]>(() => {
   return props.actions
     .filter((action) => hasPermission(action.permission))
     .map((action, index) => ({
       ...action,
-      placement:
-        action.placement ||
-        (resolvedPrimaryAction.value ? 'menu' : index < 3 ? 'inline' : 'menu'),
+      placement: resolveActionPlacement(action, index),
       tone:
         action.tone ||
         (action.className?.includes('danger') ? 'danger' : 'default'),
@@ -111,8 +122,8 @@ const menuActions = computed(() => {
 const showFooter = computed(() => {
   return Boolean(
     resolvedPrimaryAction.value ||
-      inlineActions.value.length ||
-      menuActions.value.length,
+      inlineActions.value.length > 0 ||
+      menuActions.value.length > 0,
   );
 });
 
@@ -132,10 +143,8 @@ function handleActionClick(event: Event, action: ActionButton, item: any) {
       v-for="(item, index) in props.data"
       :key="item.id ?? index"
       shadow="never"
-      :class="[
-        'card-item',
-        { 'card-item--interactive': resolvedPrimaryAction },
-      ]"
+      class="card-item"
+      :class="[{ 'card-item--interactive': resolvedPrimaryAction }]"
       :role="resolvedPrimaryAction ? 'button' : undefined"
       :tabindex="resolvedPrimaryAction ? 0 : undefined"
       @click="handlePrimaryAction(item)"
@@ -201,7 +210,7 @@ function handleActionClick(event: Event, action: ActionButton, item: any) {
           </div>
 
           <div
-            v-if="inlineActions.length || menuActions.length"
+            v-if="inlineActions.length > 0 || menuActions.length > 0"
             class="card-actions"
             @click.stop
           >

easyflow-ui-admin/app/src/components/page/ListPageShell.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
+
 import { computed, useSlots } from 'vue';
 
 interface Props {
@@ -67,8 +68,8 @@ const contentStyle = computed((): CSSProperties => {
   display: flex;
   flex: 1;
   flex-direction: column;
-  min-height: 0;
   gap: 16px;
+  min-height: 0;
 }
 
 .list-page-shell.is-dense {
@@ -78,9 +79,9 @@ const contentStyle = computed((): CSSProperties => {
 .list-page-shell__toolbar {
   position: relative;
   display: flex;
+  gap: 16px;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 16px;
   padding: 8px 6px 2px;
   background: transparent;
   border: none;
@@ -92,8 +93,8 @@ const contentStyle = computed((): CSSProperties => {
   top: 12px;
   z-index: 5;
   padding: 10px 10px 6px;
-  background: hsl(var(--glass-tint) / 0.7);
-  border: 1px solid hsl(var(--glass-border) / 0.44);
+  background: hsl(var(--glass-tint) / 70%);
+  border: 1px solid hsl(var(--glass-border) / 44%);
   border-radius: 20px;
   box-shadow: var(--shadow-toolbar);
   backdrop-filter: blur(var(--glass-blur)) saturate(155%);
@@ -110,40 +111,41 @@ const contentStyle = computed((): CSSProperties => {
 
 .list-page-shell__content {
   --list-page-shell-content-padding: 0px;
+
+  position: relative;
   display: flex;
   flex: 1;
   flex-direction: column;
   min-height: 0;
-  position: relative;
-  overflow: hidden;
   padding: var(--list-page-shell-content-padding);
+  overflow: hidden;
   background: linear-gradient(
     180deg,
-    hsl(var(--glass-border) / 0.84) 0%,
-    hsl(var(--surface-panel) / 0.94) 28%,
-    hsl(var(--surface-panel) / 0.97) 100%
+    hsl(var(--glass-border) / 84%) 0%,
+    hsl(var(--surface-panel) / 94%) 28%,
+    hsl(var(--surface-panel) / 97%) 100%
   );
-  border: 1px solid hsl(var(--glass-border) / 0.58);
+  border: 1px solid hsl(var(--glass-border) / 58%);
   border-radius: 24px;
   box-shadow:
-    inset 0 1px 0 hsl(var(--glass-border) / 0.72),
-    0 24px 54px -42px hsl(var(--primary) / 0.22),
-    0 18px 42px -34px hsl(var(--foreground) / 0.1);
+    inset 0 1px 0 hsl(var(--glass-border) / 72%),
+    0 24px 54px -42px hsl(var(--primary) / 22%),
+    0 18px 42px -34px hsl(var(--foreground) / 10%);
   backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(145%);
 }
 
 .list-page-shell.is-subtle .list-page-shell__content {
   background: linear-gradient(
     180deg,
-    hsl(var(--glass-tint) / 0.84) 0%,
-    hsl(var(--surface-contrast-soft) / 0.94) 100%
+    hsl(var(--glass-tint) / 84%) 0%,
+    hsl(var(--surface-contrast-soft) / 94%) 100%
   );
   box-shadow: none;
 }
 
 .list-page-shell.is-plain .list-page-shell__content {
-  background: hsl(var(--surface-panel) / 0.96);
-  border: 1px solid hsl(var(--divider-faint) / 0.58);
+  background: hsl(var(--surface-panel) / 96%);
+  border: 1px solid hsl(var(--divider-faint) / 58%);
   border-radius: 20px;
   box-shadow: none;
   backdrop-filter: none;
@@ -162,14 +164,10 @@ const contentStyle = computed((): CSSProperties => {
   background:
     radial-gradient(
       ellipse 84% 72% at 10% 0%,
-      hsl(var(--nav-ambient) / 0.18) 0%,
+      hsl(var(--nav-ambient) / 18%) 0%,
       transparent 68%
     ),
-    linear-gradient(
-      180deg,
-      hsl(var(--nav-flow-trace) / 0.08) 0%,
-      transparent 78%
-    );
+    linear-gradient(180deg, hsl(var(--nav-flow-trace) / 8%) 0%, transparent 78%);
 }
 
 .list-page-shell__content > * {
@@ -195,6 +193,7 @@ const contentStyle = computed((): CSSProperties => {
   --el-table-border-color: hsl(var(--table-row-border));
   --el-table-current-row-bg-color: hsl(var(--table-row-hover));
   --el-fill-color-blank: transparent;
+
   background: transparent;
 }
 
@@ -216,8 +215,8 @@ const contentStyle = computed((): CSSProperties => {
   font-size: 13px;
   font-weight: 600;
   color: hsl(var(--text-strong));
-  background: hsl(var(--table-header-bg) / 0.86);
-  border-bottom: 1px solid hsl(var(--divider-faint) / 0.38);
+  background: hsl(var(--table-header-bg) / 86%);
+  border-bottom: 1px solid hsl(var(--divider-faint) / 38%);
 }
 
 .list-page-shell__content :deep(.el-table th.el-table__cell:first-child) {
@@ -232,7 +231,7 @@ const contentStyle = computed((): CSSProperties => {
 .list-page-shell__content :deep(.el-table--border .el-table__cell) {
   padding: 14px 0;
   border-right: none;
-  border-bottom: 1px solid hsl(var(--divider-faint) / 0.46);
+  border-bottom: 1px solid hsl(var(--divider-faint) / 46%);
 }
 
 .list-page-shell__content :deep(.el-table__row:hover > td.el-table__cell) {

easyflow-ui-admin/app/src/components/page/PageData.vue

@@ -138,7 +138,7 @@ onMounted(() => {
   flex: 1;
   flex-direction: column;
   min-height: 0;
-  padding: 18px 20px 18px;
+  padding: 18px 20px;
 }
 
 .page-data-container__body {

easyflow-ui-admin/app/src/components/page/PageSide.vue

@@ -114,6 +114,7 @@ const isSvgString = (icon: any) => {
               v-if="item.icon"
               class="ml-[-3px] flex items-center justify-center"
             >
+              <!-- eslint-disable vue/no-v-html -->
               <div
                 v-if="isSvgString(item.icon)"
                 v-html="item.icon"
@@ -127,6 +128,7 @@ const isSvgString = (icon: any) => {
                 }"
                 class="svg-container"
               ></div>
+              <!-- eslint-enable vue/no-v-html -->
               <img
                 v-else-if="
                   typeof item.icon === 'string' && !isComponent(item.icon)

easyflow-ui-admin/app/src/components/page/__tests__/CardList.test.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 
 import { describe, expect, it, vi } from 'vitest';
+
 import CardList from '../CardList.vue';
 
 const { hasAccessByCodes } = vi.hoisted(() => ({
@@ -13,7 +14,7 @@ vi.mock('@easyflow/access', () => ({
   }),
 }));
 
-describe('CardList', () => {
+describe('cardList', () => {
   function mountCardList(props: Record<string, unknown>) {
     return mount(CardList, {
       props: {

easyflow-ui-admin/app/src/components/tree/Tree.vue

@@ -233,14 +233,14 @@ onMounted(() => {
         v-loading="loading"
         :element-loading-text="loadingText"
       >
-        <template #default="{ node, data }">
+        <template #default="{ node, data: itemData }">
           <span class="tree-node">
             <span class="node-label">{{ $t(node.label) }}</span>
             <span
-              v-if="showCount && data[defaultProps.children]"
+              v-if="showCount && itemData[defaultProps.children]"
               class="node-count"
             >
-              ({{ data[defaultProps.children].length }})
+              ({{ itemData[defaultProps.children].length }})
             </span>
           </span>
         </template>
@@ -278,17 +278,17 @@ onMounted(() => {
 
 .tree-node {
   display: flex;
-  align-items: center;
   gap: 8px;
+  align-items: center;
   min-width: 0;
 }
 
 .node-label {
   overflow: hidden;
-  color: var(--el-text-color-primary);
+  text-overflow: ellipsis;
   font-size: 14px;
   font-weight: 500;
-  text-overflow: ellipsis;
+  color: var(--el-text-color-primary);
   white-space: nowrap;
 }
 
@@ -299,22 +299,22 @@ onMounted(() => {
   min-width: 22px;
   height: 20px;
   padding: 0 6px;
-  color: var(--el-text-color-secondary);
   font-size: 12px;
   line-height: 1;
+  color: var(--el-text-color-secondary);
   background: var(--el-fill-color);
   border-radius: 999px;
 }
 
 :deep(.el-tree) {
-  background: transparent;
   color: inherit;
+  background: transparent;
 }
 
 :deep(.el-tree-node__content) {
   height: 38px;
-  margin-bottom: 4px;
   padding: 0 10px;
+  margin-bottom: 4px;
   border-radius: 10px;
   transition:
     background-color 0.18s ease,

easyflow-ui-admin/app/src/components/upload/DragFileUpload.vue

@@ -9,7 +9,10 @@ import { useAccessStore } from '@easyflow/stores';
 import { UploadFilled } from '@element-plus/icons-vue';
 import { ElIcon, ElMessage, ElUpload } from 'element-plus';
 
-import { normalizeUploadError, resolveUploadPath } from '#/utils/upload-response';
+import {
+  normalizeUploadError,
+  resolveUploadPath,
+} from '#/utils/upload-response';
 
 const props = defineProps({
   action: {

easyflow-ui-admin/app/src/components/upload/Upload.vue

@@ -8,8 +8,11 @@ import { useAccessStore } from '@easyflow/stores';
 
 import { ElButton, ElMessage, ElUpload } from 'element-plus';
 
-import { normalizeUploadError, resolveUploadPath } from '#/utils/upload-response';
 import { $t } from '#/locales';
+import {
+  normalizeUploadError,
+  resolveUploadPath,
+} from '#/utils/upload-response';
 
 const props = defineProps({
   action: {

easyflow-ui-admin/app/src/components/upload/UploadAvatar.vue

@@ -10,7 +10,10 @@ import { Plus } from '@element-plus/icons-vue';
 import { ElIcon, ElImage, ElMessage, ElUpload } from 'element-plus';
 
 import { $t } from '#/locales';
-import { normalizeUploadError, resolveUploadPath } from '#/utils/upload-response';
+import {
+  normalizeUploadError,
+  resolveUploadPath,
+} from '#/utils/upload-response';
 
 const props = defineProps({
   action: {
@@ -134,20 +137,20 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
 
 <style>
 .avatar-uploader .el-upload {
-  width: var(--avatar-size);
-  height: var(--avatar-size);
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
   overflow: hidden;
   cursor: pointer;
-  border: 1px solid hsl(var(--input) / 0.92);
+  background: hsl(var(--modal-surface-strong) / 92%);
+  border: 1px solid hsl(var(--input) / 92%);
   border-radius: 50%;
-  background: hsl(var(--modal-surface-strong) / 0.92);
   box-shadow:
-    inset 0 1px 0 hsl(0 0% 100% / 0.72),
-    0 16px 28px -24px hsl(var(--foreground) / 0.24);
+    inset 0 1px 0 hsl(0deg 0% 100% / 72%),
+    0 16px 28px -24px hsl(var(--foreground) / 24%);
   transition:
     transform var(--el-transition-duration-fast),
     border-color var(--el-transition-duration-fast),
@@ -155,26 +158,26 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
 }
 
 .avatar-uploader .el-upload:hover {
-  border-color: hsl(var(--primary) / 0.52);
-  transform: translateY(-1px);
+  border-color: hsl(var(--primary) / 52%);
   box-shadow:
-    inset 0 1px 0 hsl(0 0% 100% / 0.76),
-    0 20px 36px -26px hsl(var(--modal-preview-glow) / 0.3);
+    inset 0 1px 0 hsl(0deg 0% 100% / 76%),
+    0 20px 36px -26px hsl(var(--modal-preview-glow) / 30%);
+  transform: translateY(-1px);
 }
 
 .avatar-uploader--soft-panel .el-upload {
   background:
     radial-gradient(
       circle at top,
-      hsl(var(--modal-preview-glow) / 0.14),
+      hsl(var(--modal-preview-glow) / 14%),
       transparent 60%
     ),
     linear-gradient(
       145deg,
-      hsl(var(--modal-preview-surface) / 0.98),
-      hsl(var(--modal-preview-surface-strong) / 0.9)
+      hsl(var(--modal-preview-surface) / 98%),
+      hsl(var(--modal-preview-surface-strong) / 90%)
     );
-  border-color: hsl(var(--modal-preview-border) / 0.9);
+  border-color: hsl(var(--modal-preview-border) / 90%);
 }
 
 .avatar-uploader--rounded .el-upload {

easyflow-ui-admin/app/src/locales/index.ts

@@ -2,7 +2,10 @@ import type { Language } from 'element-plus/es/locale';
 
 import type { App } from 'vue';
 
-import type { LocaleSetupOptions, SupportedLanguagesType } from '@easyflow/locales';
+import type {
+  LocaleSetupOptions,
+  SupportedLanguagesType,
+} from '@easyflow/locales';
 
 import { ref } from 'vue';
 

easyflow-ui-admin/app/src/main.ts

@@ -1,4 +1,8 @@
-import { initPreferences, preferences, updatePreferences } from '@easyflow/preferences';
+import {
+  initPreferences,
+  preferences,
+  updatePreferences,
+} from '@easyflow/preferences';
 import { unmountGlobalLoading } from '@easyflow/utils';
 
 import {

easyflow-ui-admin/app/src/router/guard.ts

@@ -7,6 +7,12 @@ import { startProgress, stopProgress } from '@easyflow/utils';
 
 import { accessRoutes, coreRouteNames } from '#/router/routes';
 import { useAuthStore } from '#/store';
+import {
+  buildForcePasswordRoute,
+  isForcePasswordRoute,
+  notifyForcePasswordChange,
+  shouldForcePasswordChange,
+} from '#/utils/password-reset';
 
 import { generateAccess } from './access';
 import {
@@ -14,12 +20,6 @@ import {
   removeDevLoginQuery,
   shouldAttemptDevLogin,
 } from './dev-login';
-import {
-  buildForcePasswordRoute,
-  isForcePasswordRoute,
-  notifyForcePasswordChange,
-  shouldForcePasswordChange,
-} from '#/utils/password-reset';
 
 interface NetworkConnectionLike {
   effectiveType?: string;
@@ -189,7 +189,8 @@ function setupAccessGuard(router: Router) {
     // 基本路由，这些路由不需要进入权限拦截
     if (coreRouteNames.includes(to.name as string)) {
       if (to.path === LOGIN_PATH && accessStore.accessToken) {
-        const currentUser = userStore.userInfo || (await authStore.fetchUserInfo());
+        const currentUser =
+          userStore.userInfo || (await authStore.fetchUserInfo());
         if (shouldForcePasswordChange(currentUser)) {
           return buildForcePasswordRoute();
         }

easyflow-ui-admin/app/src/router/routes/modules/demos.ts

@@ -50,3 +50,5 @@
 // ];
 //
 // export default routes;
+
+export {};

easyflow-ui-admin/app/src/store/auth.ts

@@ -95,7 +95,8 @@ export const useAuthStore = defineStore('auth', () => {
   ) {
     try {
       loginLoading.value = true;
-      const { forceChangePassword, token: accessToken } = await loginApi(params);
+      const { forceChangePassword, token: accessToken } =
+        await loginApi(params);
 
       if (accessToken) {
         return await finalizeLogin(accessToken, forceChangePassword, {

easyflow-ui-admin/app/src/types/tinyflow-ai-vue.d.ts

@@ -1,5 +1,9 @@
 declare module '@tinyflow-ai/vue' {
   import type { DefineComponent } from 'vue';
 
-  export const Tinyflow: DefineComponent<Record<string, any>, Record<string, any>, any>;
+  export const Tinyflow: DefineComponent<
+    Record<string, any>,
+    Record<string, any>,
+    any
+  >;
 }

easyflow-ui-admin/app/src/types/vue-element-plus-x.d.ts

@@ -1,6 +1,10 @@
 declare module 'vue-element-plus-x/es/*/index.js' {
   import type { DefineComponent } from 'vue';
 
-  const component: DefineComponent<Record<string, any>, Record<string, any>, any>;
+  const component: DefineComponent<
+    Record<string, any>,
+    Record<string, any>,
+    any
+  >;
   export default component;
 }

easyflow-ui-admin/app/src/utils/password-reset.ts

@@ -19,7 +19,10 @@ export function buildForcePasswordRoute() {
 }
 
 export function isForcePasswordRoute(
-  route: Pick<{ name?: string | symbol | null; query?: Record<string, any> }, 'name' | 'query'>,
+  route: Pick<
+    { name?: null | string | symbol; query?: Record<string, any> },
+    'name' | 'query'
+  >,
 ) {
   return route.name === 'Profile' && route.query?.tab === 'password';
 }

easyflow-ui-admin/app/src/views/_core/authentication/login.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import type { EasyFlowFormSchema } from '@easyflow/common-ui';
-import {AuthenticationLogin, z} from '@easyflow/common-ui';
 
 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' });
@@ -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 {

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

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'),

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

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

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

easyflow-ui-admin/app/src/views/ai/bots/pages/setting/index.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>

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

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

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>

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>

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

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

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,

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 {

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>

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>

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>

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

easyflow-ui-admin/app/src/views/ai/model/AddModelProviderModal.vue

@@ -4,14 +4,25 @@ import {computed, reactive, ref} from 'vue';
 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 {
+  ElForm,
+  ElFormItem,
+  ElIcon,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
 
 import { api } from '#/api/request';
 import UploadAvatar from '#/components/upload/UploadAvatar.vue';
 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']);
 

easyflow-ui-admin/app/src/views/ai/model/ModelVerifyConfig.vue

@@ -4,7 +4,13 @@ import {computed, reactive, ref} from 'vue';
 import { EasyFlowFormModal } from '@easyflow/common-ui';
 
 import { CircleCheckFilled, WarningFilled } from '@element-plus/icons-vue';
-import {ElForm, ElFormItem, ElMessage, ElOption, ElSelect,} from 'element-plus';
+import {
+  ElForm,
+  ElFormItem,
+  ElMessage,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
 
 import { api } from '#/api/request';
 import { $t } from '#/locales';

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

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 {

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 { onMounted, ref } from 'vue';
+
+import { EasyFlowFormModal } from '@easyflow/common-ui';
+
+import { Plus, Remove } from '@element-plus/icons-vue';
 import {
   ElForm,
   ElFormItem,
@@ -12,12 +18,6 @@ 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 UploadAvatar from '#/components/upload/UploadAvatar.vue';
 import { $t } from '#/locales';
@@ -44,7 +44,9 @@ 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) => {
+  api
+    .get('/api/v1/plugin/modelList?supportRerankerLlmList=true')
+    .then((res) => {
       rerankerLlmList.value = res.data;
     });
   api.get('/api/v1/pluginCategory/list').then((res) => {
@@ -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>

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>

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>

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

easyflow-ui-admin/app/src/views/ai/workflow/WorkflowList.vue

@@ -1,18 +1,10 @@
 <script setup lang="ts">
 import type { FormInstance } from 'element-plus';
-import {
-  ElForm,
-  ElFormItem,
-  ElIcon,
-  ElInput,
-  ElInputNumber,
-  ElMessage,
-  ElMessageBox,
-  ElPopover,
-} 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';
 
@@ -33,6 +25,16 @@ import {
   Upload,
   VideoPlay,
 } from '@element-plus/icons-vue';
+import {
+  ElForm,
+  ElFormItem,
+  ElIcon,
+  ElInput,
+  ElInputNumber,
+  ElMessage,
+  ElMessageBox,
+  ElPopover,
+} from 'element-plus';
 import { tryit } from 'radash';
 
 import { api } from '#/api/request';
@@ -40,6 +42,7 @@ 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';
@@ -61,7 +64,7 @@ interface FieldDefinition {
   placeholder?: string;
 }
 
-type VisibilityScope = 'PRIVATE' | 'DEPT' | 'PUBLIC';
+type VisibilityScope = 'DEPT' | 'PRIVATE' | 'PUBLIC';
 
 const primaryAction: CardPrimaryAction = {
   icon: DesignIcon,
@@ -76,7 +79,7 @@ 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>

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

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>

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>

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>

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,

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)
-      : [
+    const tableId = option.datasetRef?.tableId;
+    const key =
+      tableId === null || tableId === undefined
+        ? [
             option.datasetRef?.sourceId ?? '',
             option.datasetRef?.catalogId ?? '',
             option.tableName ?? '',
-        ].join(':');
+          ].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', {
+        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}`)

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>

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

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

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>

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>

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>

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 {

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 {

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

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>

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>

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 {

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>

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

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>

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>

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,8 +36,10 @@ interface CategoryPermissionTreeNode {
   label: string;
 }
 
-const RESOURCE_SCOPE_GROUPS: Array<{ label: string; resourceType: ResourceType }> =
-  [
+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') },
@@ -270,9 +267,11 @@ function buildScopeItemsFromTree(): CategoryScopeItem[] {
 }
 
 function getCategoryScopeDetail(roleId: number | string) {
-  api.get('/api/v1/sysRoleCategoryScope/detail', {
+  api
+    .get('/api/v1/sysRoleCategoryScope/detail', {
       params: { roleId },
-  }).then((res) => {
+    })
+    .then((res) => {
       if (res.errorCode !== 0) {
         categoryScopeEditable.value = false;
         categoryScopeDetail.value = {
@@ -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 {

easyflow-ui-admin/internal/vite-config/package.json

@@ -32,10 +32,10 @@
     "vite-plugin-vue-devtools": "catalog:"
   },
   "devDependencies": {
+    "@easyflow/node-utils": "workspace:*",
     "@pnpm/workspace.read-manifest": "catalog:",
     "@types/archiver": "catalog:",
     "@types/html-minifier-terser": "catalog:",
-    "@easyflow/node-utils": "workspace:*",
     "@vitejs/plugin-vue": "catalog:",
     "@vitejs/plugin-vue-jsx": "catalog:",
     "dayjs": "catalog:",

easyflow-ui-admin/internal/vite-config/src/config/application.ts

@@ -1,5 +1,4 @@
 import type { CSSOptions, UserConfig } from 'vite';
-import {defineConfig, loadEnv, mergeConfig} from 'vite';
 
 import type { DefineApplicationOptions } from '../typing';
 
@@ -8,6 +7,7 @@ import path, {relative} from 'node:path';
 import { findMonorepoRoot } from '@easyflow/node-utils';
 
 import { NodePackageImporter } from 'sass';
+import { defineConfig, loadEnv, mergeConfig } from 'vite';
 
 import { defaultImportmapOptions, getDefaultPwaOptions } from '../options';
 import { loadApplicationPlugins } from '../plugins';

easyflow-ui-admin/internal/vite-config/src/plugins/inject-app-loading/default-loading-progress.html

@@ -100,23 +100,39 @@
 
   /* 动画效果 */
   @keyframes float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
   }
 
   @keyframes bounce {
-    0%, 80%, 100% {
+    0%,
+    80%,
+    100% {
       transform: scale(0);
     }
     40% {
-      transform: scale(1.0);
+      transform: scale(1);
     }
   }
 
   @keyframes progress {
-    0% { width: 0; left: 0; }
-    50% { width: 100%; left: 0; }
-    100% { width: 0; left: 100%; }
+    0% {
+      width: 0;
+      left: 0;
+    }
+    50% {
+      width: 100%;
+      left: 0;
+    }
+    100% {
+      width: 0;
+      left: 100%;
+    }
   }
 </style>
 <div class="loadingContainer" id="__app-loading__">

easyflow-ui-admin/package.json

@@ -37,6 +37,8 @@
     "catalog": "pnpx codemod pnpm/catalog"
   },
   "devDependencies": {
+    "@changesets/changelog-github": "catalog:",
+    "@changesets/cli": "catalog:",
     "@easyflow/commitlint-config": "workspace:*",
     "@easyflow/eslint-config": "workspace:*",
     "@easyflow/prettier-config": "workspace:*",
@@ -46,8 +48,6 @@
     "@easyflow/turbo-run": "workspace:*",
     "@easyflow/vite-config": "workspace:*",
     "@easyflow/vsh": "workspace:*",
-    "@changesets/changelog-github": "catalog:",
-    "@changesets/cli": "catalog:",
     "@playwright/test": "catalog:",
     "@types/node": "catalog:",
     "@vitejs/plugin-vue": "catalog:",

easyflow-ui-admin/packages/@core/base/design/src/css/global.css

@@ -114,6 +114,12 @@
 }
 
 @layer components {
+  @media (max-width: 768px) {
+    .easyflow-modal-grid--2 {
+      grid-template-columns: 1fr;
+    }
+  }
+
   .flex-center {
     @apply flex items-center justify-center;
   }
@@ -161,11 +167,11 @@
   }
 
   .easyflow-modal-section {
+    padding: 14px;
     background: hsl(var(--modal-content-surface-strong));
     border: 1px solid hsl(var(--modal-divider));
     border-radius: 14px;
     box-shadow: none;
-    padding: 14px;
   }
 
   .easyflow-modal-grid {
@@ -178,10 +184,10 @@
   }
 
   .easyflow-modal-field-tip {
-    color: hsl(var(--text-muted));
+    margin-top: 4px;
     font-size: 11px;
     line-height: 1.5;
-    margin-top: 4px;
+    color: hsl(var(--text-muted));
   }
 
   .easyflow-modal-form .el-form-item {
@@ -189,11 +195,11 @@
   }
 
   .easyflow-modal-form .el-form-item__label {
-    color: hsl(var(--text-strong));
+    padding-bottom: 6px;
     font-size: 12px;
     font-weight: 600;
     line-height: 1.4;
-    padding-bottom: 6px;
+    color: hsl(var(--text-strong));
   }
 
   .easyflow-modal-form .el-input__wrapper,
@@ -202,7 +208,7 @@
   .easyflow-modal-form .el-date-editor.el-input__wrapper {
     background: hsl(var(--input-background));
     border-radius: 12px;
-    box-shadow: inset 0 0 0 1px hsl(var(--input) / 0.92);
+    box-shadow: inset 0 0 0 1px hsl(var(--input) / 92%);
     transition:
       box-shadow 0.2s ease,
       border-color 0.2s ease,
@@ -224,7 +230,7 @@
   .easyflow-modal-form .el-select__wrapper:hover,
   .easyflow-modal-form .el-textarea__inner:hover,
   .easyflow-modal-form .el-date-editor.el-input__wrapper:hover {
-    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.18);
+    box-shadow: inset 0 0 0 1px hsl(var(--primary) / 18%);
   }
 
   .easyflow-modal-form .el-input__wrapper.is-focus,
@@ -232,8 +238,8 @@
   .easyflow-modal-form .el-textarea__inner:focus,
   .easyflow-modal-form .el-date-editor.el-input__wrapper.is-focus {
     box-shadow:
-      inset 0 0 0 1px hsl(var(--primary) / 0.72),
-      0 0 0 4px hsl(var(--primary) / 0.12);
+      inset 0 0 0 1px hsl(var(--primary) / 72%),
+      0 0 0 4px hsl(var(--primary) / 12%);
   }
 
   .easyflow-modal-form .el-form-item.is-error .el-input__wrapper,
@@ -243,14 +249,8 @@
     .el-form-item.is-error
     .el-date-editor.el-input__wrapper {
     box-shadow:
-      inset 0 0 0 1px hsl(var(--destructive) / 0.8),
-      0 0 0 4px hsl(var(--destructive) / 0.08);
-  }
-
-  @media (max-width: 768px) {
-    .easyflow-modal-grid--2 {
-      grid-template-columns: 1fr;
-    }
+      inset 0 0 0 1px hsl(var(--destructive) / 80%),
+      0 0 0 4px hsl(var(--destructive) / 8%);
   }
 }
 
@@ -263,11 +263,12 @@ html.grayscale-mode {
 }
 
 .page-container {
+  padding: 20px;
   margin: 20px;
   background-color: var(--el-bg-color);
   border-radius: var(--el-border-radius-base);
-  padding: 20px;
 }
+
 .handle-div {
   margin-bottom: 10px;
 }

easyflow-ui-admin/packages/@core/base/design/src/design-tokens/dark.css

@@ -141,7 +141,7 @@
   --modal-footer-surface: 220 13% 12%;
   --modal-border: 218 16% 24%;
   --modal-divider: 218 18% 24%;
-  --modal-shadow: 0 24px 60px -30px hsl(212 60% 2% / 0.58);
+  --modal-shadow: 0 24px 60px -30px hsl(212deg 60% 2% / 58%);
   --modal-shell-highlight: 0 0% 100% / 0;
   --modal-shell-border-soft: 218 16% 24% / 0.96;
   --modal-shell-shadow-near: 212 50% 2% / 0.38;
@@ -159,9 +159,9 @@
   --nav-flow-accent: 214 88% 70%;
   --nav-flow-trace: 189 62% 56%;
   --nav-sheen: 210 100% 96%;
-  --shadow-subtle: 0 18px 42px -30px hsl(212 100% 5% / 0.48);
-  --shadow-toolbar: 0 28px 54px -36px hsl(212 100% 4% / 0.58);
-  --shadow-float: 0 34px 70px -38px hsl(212 100% 3% / 0.68);
+  --shadow-subtle: 0 18px 42px -30px hsl(212deg 100% 5% / 48%);
+  --shadow-toolbar: 0 28px 54px -36px hsl(212deg 100% 4% / 58%);
+  --shadow-float: 0 34px 70px -38px hsl(212deg 100% 3% / 68%);
   --bot-back-item: hsl(0deg 0% 91.76%);
   --bot-collapse-itme-back: hsl(var(--background-deep));
   --bot-chat-message-container: hsl(var(--background-deep));
@@ -171,6 +171,7 @@
   --table-header-bg-color: hsl(var(--table-header-bg));
   --table-cell-shadow-color: hsl(var(--table-row-border));
   --bot-select-data-item-back: hsl(0deg 0% 98.04%);
+
   color-scheme: dark;
 }
 

easyflow-ui-admin/packages/@core/base/design/src/design-tokens/default.css

@@ -141,7 +141,7 @@
   --modal-footer-surface: 210 20% 98.4%;
   --modal-border: 214 22% 86%;
   --modal-divider: 214 22% 89%;
-  --modal-shadow: 0 22px 54px -28px hsl(215 28% 18% / 0.18);
+  --modal-shadow: 0 22px 54px -28px hsl(215deg 28% 18% / 18%);
   --modal-shell-highlight: 0 0% 100% / 0;
   --modal-shell-border-soft: 214 22% 86% / 0.94;
   --modal-shell-shadow-near: 216 30% 18% / 0.08;
@@ -159,13 +159,9 @@
   --nav-flow-accent: 214 100% 88%;
   --nav-flow-trace: 191 78% 84%;
   --nav-sheen: 0 0% 100%;
-  --shadow-subtle: 0 18px 42px -30px hsl(211 78% 48% / 0.16);
-  --shadow-toolbar: 0 28px 54px -34px hsl(211 78% 48% / 0.2);
-  --shadow-float: 0 34px 68px -38px hsl(211 78% 48% / 0.24);
-
-  accent-color: var(--primary);
-  color-scheme: light;
-
+  --shadow-subtle: 0 18px 42px -30px hsl(211deg 78% 48% / 16%);
+  --shadow-toolbar: 0 28px 54px -34px hsl(211deg 78% 48% / 20%);
+  --shadow-float: 0 34px 68px -38px hsl(211deg 78% 48% / 24%);
   --bot-back-item: hsl(0deg 0% 91.76%);
   --bot-collapse-itme-back: hsl(0deg 0% 96.08%);
   --bot-chat-message-container: hsl(228deg 33.33% 97.06%);
@@ -175,6 +171,9 @@
   --table-header-bg-color: hsl(var(--table-header-bg));
   --table-cell-shadow-color: hsl(var(--table-row-border));
   --bot-select-data-item-back: hsl(0deg 0% 98.04%);
+
+  accent-color: var(--primary);
+  color-scheme: light;
 }
 
 [data-theme='violet'] {

easyflow-ui-admin/packages/@core/base/shared/src/constants/index.ts

@@ -1,2 +1,2 @@
-export * from './globals';
 export * from './easyflow';
+export * from './globals';

easyflow-ui-admin/packages/@core/base/shared/src/utils/util.ts

@@ -263,4 +263,3 @@ export function sortNodes(nodesJson: any): any[] {
     extra: node.extra,
   }));
 }
-

easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/components/form-actions.vue

@@ -3,7 +3,11 @@ import { computed, toRaw, unref, watch } from 'vue';
 
 import { useSimpleLocale } from '@easyflow-core/composables';
 import { EasyFlowExpandableArrow } from '@easyflow-core/shadcn-ui';
-import { cn, isFunction, triggerWindowResize } from '@easyflow-core/shared/utils';
+import {
+  cn,
+  isFunction,
+  triggerWindowResize,
+} from '@easyflow-core/shared/utils';
 
 import { COMPONENT_MAP } from '../config';
 import { injectFormProps } from '../use-form-context';

easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/config.ts

@@ -2,8 +2,8 @@ import type { Component } from 'vue';
 
 import type {
   BaseFormComponentType,
-  FormCommonConfig,
   EasyFlowFormAdapterOptions,
+  FormCommonConfig,
 } from './types';
 
 import { h } from 'vue';

easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/easyflow-use-form.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@easyflow-core/typings';
 
-import type { ExtendedFormApi, EasyFlowFormProps } from './types';
+import type { EasyFlowFormProps, ExtendedFormApi } from './types';
 
 // import { toRaw, watch } from 'vue';
 import { nextTick, onMounted, watch } from 'vue';

easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-api.ts

@@ -9,7 +9,7 @@ import type { ComponentPublicInstance } from 'vue';
 
 import type { Recordable } from '@easyflow-core/typings';
 
-import type { FormActions, FormSchema, EasyFlowFormProps } from './types';
+import type { EasyFlowFormProps, FormActions, FormSchema } from './types';
 
 import { isRef, toRaw } from 'vue';
 
@@ -55,7 +55,7 @@ export class FormApi {
   public form = {} as FormActions;
   isMounted = false;
 
-  public state: null | EasyFlowFormProps = null;
+  public state: EasyFlowFormProps | null = null;
   stateHandler: StateHandler;
 
   public store: Store<EasyFlowFormProps>;
@@ -68,7 +68,7 @@ export class FormApi {
   // 最后一次点击提交时的表单值
   private latestSubmissionValues: null | Recordable<any> = null;
 
-  private prevState: null | EasyFlowFormProps = null;
+  private prevState: EasyFlowFormProps | null = null;
 
   constructor(options: EasyFlowFormProps = {}) {
     const { ...storeState } = options;

easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

@@ -15,7 +15,12 @@ import {
   FormItem,
   FormMessage,
 } from '@easyflow-core/shadcn-ui';
-import { cn, isFunction, isObject, isString } from '@easyflow-core/shared/utils';
+import {
+  cn,
+  isFunction,
+  isObject,
+  isString,
+} from '@easyflow-core/shared/utils';
 
 import { toTypedSchema } from '@vee-validate/zod';
 import { useFieldError, useFormValues } from 'vee-validate';

easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue

@@ -2,9 +2,9 @@
 import type { CustomRenderType } from '../types';
 
 import {
-  FormLabel,
   EasyFlowHelpTooltip,
   EasyFlowRenderContent,
+  FormLabel,
 } from '@easyflow-core/shadcn-ui';
 import { cn } from '@easyflow-core/shared/utils';
 

easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/index.ts

@@ -2,9 +2,9 @@ export { setupEasyFlowForm } from './config';
 
 export type {
   BaseFormComponentType,
-  ExtendedFormApi,
   EasyFlowFormProps,
   FormSchema as EasyFlowFormSchema,
+  ExtendedFormApi,
 } from './types';
 
 export * from './use-easyflow-form';

easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/types.ts

@@ -12,12 +12,12 @@ export type FormLayout = 'horizontal' | 'inline' | 'vertical';
 
 export type BaseFormComponentType =
   | 'DefaultButton'
-  | 'PrimaryButton'
   | 'EasyFlowCheckbox'
   | 'EasyFlowInput'
   | 'EasyFlowInputPassword'
   | 'EasyFlowPinInput'
   | 'EasyFlowSelect'
+  | 'PrimaryButton'
   | (Record<never, never> & string);
 
 type Breakpoints = '2xl:' | '3xl:' | '' | 'lg:' | 'md:' | 'sm:' | 'xl:';

easyflow-ui-admin/packages/@core/ui-kit/form-ui/src/use-easyflow-form.ts

@@ -1,15 +1,15 @@
 import type {
   BaseFormComponentType,
-  ExtendedFormApi,
   EasyFlowFormProps,
+  ExtendedFormApi,
 } from './types';
 
 import { defineComponent, h, isReactive, onBeforeUnmount, watch } from 'vue';
 
 import { useStore } from '@easyflow-core/shared/store';
 
-import { FormApi } from './form-api';
 import EasyFlowUseForm from './easyflow-use-form.vue';
+import { FormApi } from './form-api';
 
 export function useEasyFlowForm<
   T extends BaseFormComponentType = BaseFormComponentType,