From 255b99e967494ac7ebdd60a426a91502df0069c3 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 6 Nov 2026 17:09:10 +0800
Subject: [PATCH] feat: chat theme

---
 ui/src/api/chat/README.md                     |  6 ++--
 ui/src/api/types/chat-auth.ts                 |  1 +
 .../components/content/items/form.vue         | 11 +++---
 .../items/tool/components/ScrollDiff.vue      |  2 +-
 .../components/header/debug/index.vue         |  2 +-
 ui/src/conversation-panel/index.scss          |  6 ++--
 .../left-sidebar/conversation-list/index.vue  |  7 ++--
 .../conversation-panel/view/debug/index.vue   |  4 +--
 ui/src/stores/chat/auth.ts                    | 17 +++++++---
 ui/src/stores/chat/index.ts                   |  4 +++
 ui/src/stores/chat/theme.ts                   | 34 +++++++++++++++++++
 ui/src/styles/STYLE_README.md                 |  8 +++++
 ui/src/styles/element-plus.scss               |  6 ++--
 .../components/DisplaySettingPreview.vue      |  6 ++--
 .../components/ButtonCreateApplication.vue    |  4 +--
 .../components/ButtonCreateKnowledge.vue      |  8 ++---
 .../ai-generate/panel/AiGeneratePanel.vue     |  2 +-
 .../execution-details/DetailContainer.vue     |  2 +-
 ui/src/workflow-canvas/index.vue              |  2 +-
 19 files changed, 95 insertions(+), 37 deletions(-)
 create mode 100644 ui/src/stores/chat/theme.ts

diff --git a/ui/src/api/chat/README.md b/ui/src/api/chat/README.md
index 00fb0355d5d..a0105c0e673 100644
--- a/ui/src/api/chat/README.md
+++ b/ui/src/api/chat/README.md
@@ -19,8 +19,10 @@ Chat 业务接口统一调用后端 v3 路由（`/chat/api/v3/...`）；文件
 可选进度回调及取消，统一返回 `{ request, abort }`。`request` 解包得到文件地址；
 取消仍拒绝 Promise，但不弹出通用错误提示。loading 由调用方管理。
 
-`auth.ts` 维护门户与单应用的认证：`getApplicationAuthProfile(accessToken)` 请求 `/profile`，
-`getPortalAuthProfile()` 请求 `/portal/profile`，两者返回结构相同的 `AuthProfile`，差异字段在 `meta`。
+`auth.ts` 维护门户与单应用的认证：`getApplicationAuthProfile(accessToken)` 请求 `/v3/profile`，
+`getPortalAuthProfile()` 请求 `/v3/portal/profile`，两者返回结构相同的 `AuthProfile`，差异字段在 `meta`。
+主题配置位于响应顶层 `custom_theme`，不在 `meta` 内；Chat Auth Store 获取或复用该配置后，
+显式应用 `custom_theme.theme_color`，登录页与正式对话共用此主题。
 `postAnonymousAuth(accessToken?)` 与 `postLogin(loginRequest, accessToken?)` 传入 accessToken 时为应用认证，
 否则为门户认证。`getCaptcha(username, accessToken)` 获取应用登录验证码，后端以 `accessToken`
 查询参数接收应用令牌，暂不支持门户。`chat-user.ts` 的 `getChatUserProfile()` 获取当前对话用户。
diff --git a/ui/src/api/types/chat-auth.ts b/ui/src/api/types/chat-auth.ts
index aeef796485f..1cef88a07ab 100644
--- a/ui/src/api/types/chat-auth.ts
+++ b/ui/src/api/types/chat-auth.ts
@@ -10,6 +10,7 @@ export interface AuthProfile<Meta = Record<string, never>> {
   login_value: LoginMethod[]
   rsa_key: string
   logo: string
+  custom_theme?: { theme_color?: string; header_font_color?: string } | null
   meta: Meta
 }
 
diff --git a/ui/src/conversation-panel/components/content/items/form.vue b/ui/src/conversation-panel/components/content/items/form.vue
index 1d0ae4c910b..dbaaa4fbed6 100644
--- a/ui/src/conversation-panel/components/content/items/form.vue
+++ b/ui/src/conversation-panel/components/content/items/form.vue
@@ -4,7 +4,7 @@ import { MkDynamicsForm } from '@/components/mk-dynamics-form'
 import type { DynamicFormValue, FormField } from '@/components/mk-dynamics-form'
 import type { Dict } from '@/api/types'
 import { useSendMessageOptional } from '@/conversation-panel/components/message-list/index'
-import { useViewType, VIEW_TYPE, type ViewType } from "@/conversation-panel/view/index"
+import { useViewType, VIEW_TYPE, type ViewType } from '@/conversation-panel/view/index'
 defineOptions({ name: 'ConversationFormContent' })
 const viewType = useViewType()
 // 发送能力由消息列表或外部宿主 provide;拿不到 → 只读降级
@@ -57,17 +57,14 @@ const submit = async () => {
   }
 }
 const READONLY_VIEWS: readonly ViewType[] = [VIEW_TYPE.LOG, VIEW_TYPE.SHARE]
-
 </script>
 
 <template>
-  <div class="mk-gray-card-lg space-y-4 border border-N300">
+  <div class="mk-gray-card-lg space-y-4 border">
     <MdPreview class="!h-auto" editorId="conversation-text" :modelValue="leadingText || ''"></MdPreview>
-    <MkDynamicsForm ref="dynamicsFormRef" :view="is_submit || READONLY_VIEWS.includes(viewType)"
-      :render-data="form_field_list" v-model="form_data" />
+    <MkDynamicsForm ref="dynamicsFormRef" :view="is_submit || READONLY_VIEWS.includes(viewType)" :render-data="form_field_list" v-model="form_data" />
     <MdPreview class="!h-auto" editorId="conversation-text" :modelValue="trailingText || ''"></MdPreview>
-    <el-button :type="is_submit ? 'info' : 'primary'"
-      :disabled="is_submit || READONLY_VIEWS.includes(viewType) || !sendMessage" @click="submit">
+    <el-button :type="is_submit ? 'info' : 'primary'" :disabled="is_submit || READONLY_VIEWS.includes(viewType) || !sendMessage" @click="submit">
       {{ is_submit ? '已提交' : '提交' }}
     </el-button>
   </div>
diff --git a/ui/src/conversation-panel/components/content/items/tool/components/ScrollDiff.vue b/ui/src/conversation-panel/components/content/items/tool/components/ScrollDiff.vue
index 06f06ff1b7a..9c1402752cd 100644
--- a/ui/src/conversation-panel/components/content/items/tool/components/ScrollDiff.vue
+++ b/ui/src/conversation-panel/components/content/items/tool/components/ScrollDiff.vue
@@ -29,7 +29,7 @@ watch(
 </script>
 
 <template>
-  <div ref="diffScrollRef" class="max-h-[400px] overflow-y-auto rounded-md border border-N300">
+  <div ref="diffScrollRef" class="max-h-[400px] overflow-y-auto rounded-md border">
     <FileDiff :file="file" />
   </div>
 </template>
diff --git a/ui/src/conversation-panel/components/header/debug/index.vue b/ui/src/conversation-panel/components/header/debug/index.vue
index c3ab5755c66..0dadf9d7ba0 100644
--- a/ui/src/conversation-panel/components/header/debug/index.vue
+++ b/ui/src/conversation-panel/components/header/debug/index.vue
@@ -7,7 +7,7 @@ const debug = useDebugHeaderStore()
 </script>
 
 <template>
-  <header class="mk-conversation-debug-header flex-align-center h-header shrink-0 border-b border-N300 px-3">
+  <header class="mk-conversation-debug-header flex-align-center h-header shrink-0 border-b px-3">
     <!-- 左侧收起时才在顶部显示:展开左侧 + 新建对话 -->
     <template v-if="!leftSideOpen">
       <MkTooltip content="展开侧边栏">
diff --git a/ui/src/conversation-panel/index.scss b/ui/src/conversation-panel/index.scss
index a010387ab98..b607d42a0e6 100644
--- a/ui/src/conversation-panel/index.scss
+++ b/ui/src/conversation-panel/index.scss
@@ -88,11 +88,11 @@
   &.drawer,
   &.push.open {
     &.left {
-      border-right: 1px solid var(--mk-N350);
+      border-right: 1px solid var(--mk-N300);
     }
 
     &.right {
-      border-left: 1px solid var(--mk-N350);
+      border-left: 1px solid var(--mk-N300);
     }
   }
 }
@@ -112,7 +112,7 @@
 
 /* 对话输入区：边框颜色随内部焦点平滑切换。 */
 .mk-conversation-message-input {
-  border: 1px solid rgb(var(--mk-N350-rgb) / 60%);
+  border: 1px solid var(--mk-N300);
   transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
   &:focus-within {
diff --git a/ui/src/conversation-panel/left-sidebar/conversation-list/index.vue b/ui/src/conversation-panel/left-sidebar/conversation-list/index.vue
index 2d3664c70ba..ed8cd5963b1 100644
--- a/ui/src/conversation-panel/left-sidebar/conversation-list/index.vue
+++ b/ui/src/conversation-panel/left-sidebar/conversation-list/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useStore } from '@/stores/chat'
 import { MsgConfirm } from '@/utils/message'
 import RenameConversation from '../../components/rename/index.vue'
 import { relativeTimeFormat } from '@/utils/time'
@@ -14,6 +15,8 @@ import { useViewType, VIEW_TYPE } from '../../view/index'
 defineOptions({ name: 'ConversationList' })
 
 const viewType = useViewType()
+const { auth } = useStore()
+const authProfile = computed(() => (viewType === VIEW_TYPE.CHAT ? auth.authProfile : null))
 const msgs = useMessageListStore()
 // 会话菜单分享不针对某一轮，进入后不预先勾选
 const shareLink = useShareLinkStoreOptional()
@@ -53,7 +56,7 @@ function handleClearConversations() {
 <template>
   <div class="flex-column h-full overflow-hidden p-4">
     <!-- 应用信息与收起侧栏 -->
-    <div class="mb-4 flex-between shrink-0 gap-2">
+    <div class="mb-4 flex-between shrink-0 gap-2" :style="{ color: authProfile?.custom_theme?.header_font_color || undefined }">
       <div class="min-w-0 flex-align-center gap-2">
         <ApplicationIcon :icon="appInfo?.icon" :size="24" class="shrink-0" />
         <h4 class="truncate" :title="appInfo?.name || 'AI 助手'">{{ appInfo?.name || 'AI 助手' }}</h4>
@@ -61,7 +64,7 @@ function handleClearConversations() {
       <!-- 收起左侧 -->
       <MkTooltip content="收起侧边栏">
         <el-button text @click="toggleLeftSide()" class="-mr-1">
-          <MkIcon name="icon_sidebar_outlined" :size="18" class="text-N900!" />
+          <MkIcon name="icon_sidebar_outlined" :size="18" :color="authProfile?.custom_theme?.header_font_color || 'var(--mk-N900)'" />
         </el-button>
       </MkTooltip>
     </div>
diff --git a/ui/src/conversation-panel/view/debug/index.vue b/ui/src/conversation-panel/view/debug/index.vue
index 07f1847ac87..283e81eed37 100644
--- a/ui/src/conversation-panel/view/debug/index.vue
+++ b/ui/src/conversation-panel/view/debug/index.vue
@@ -45,7 +45,7 @@ provide(CONVERSATION_LIST_KEY, bundle.list)
 provide(MESSAGE_LIST_KEY, bundle.msgs)
 provide(MESSAGE_INPUT_KEY, bundle.input)
 provide(EXECUTION_DETAIL_KEY, bundle.detail)
-provide(VIEW_KEY,VIEW_TYPE.DEBUG)
+provide(VIEW_KEY, VIEW_TYPE.DEBUG)
 const debug = createDebugHeaderStore()
 provide(DEBUG_HEADER_KEY, debug)
 // open/close 暴露给工作流页通过 ref 调用
@@ -79,7 +79,7 @@ watch([() => bundle.list.currentChatId.value, () => bundle.list.composerResetSig
     <transition name="debug-panel">
       <div
         v-if="debug.visible.value"
-        class="workflow-debug-panel overflow-hidden border border-N300 bg-white shadow-lg rounded-xl"
+        class="workflow-debug-panel overflow-hidden border bg-white shadow-lg rounded-xl"
         :class="{ expanded: debug.expanded.value }"
       >
         <ConversationLayout
diff --git a/ui/src/stores/chat/auth.ts b/ui/src/stores/chat/auth.ts
index c4ad7c79e12..3f8e224e477 100644
--- a/ui/src/stores/chat/auth.ts
+++ b/ui/src/stores/chat/auth.ts
@@ -9,6 +9,7 @@ import { defineStore } from 'pinia'
 import ChatAuthApi from '@/api/chat/auth'
 import type { ApplicationAuthProfileMeta, AuthProfile, ChatLoginRequest } from '@/api/types'
 import { useChatUserStore } from './user'
+import { useChatThemeStore } from './theme'
 
 /** 门户的认证场景；accessToken 为 16 位十六进制字符串，不会与之重名。 */
 export const PORTAL_AUTH_SCOPE = 'portal'
@@ -81,11 +82,19 @@ export const useChatAuthStore = defineStore('chat-auth', {
       return token === this.expiredToken ? '' : token
     },
 
-    /** 获取指定场景的认证前置配置；与当前场景相同时复用。 */
+    /** 获取并应用指定场景的认证前置主题；与当前场景相同时复用配置。 */
     fetchAuthProfile(scope: string): Promise<AuthProfile<unknown>> {
-      if (scope === this.scope && this.authProfile) return Promise.resolve(this.authProfile)
-
-      return isPortalScope(scope) ? ChatAuthApi.getPortalAuthProfile() : ChatAuthApi.getApplicationAuthProfile(scope)
+      const profileRequest =
+        scope === this.scope && this.authProfile
+          ? Promise.resolve(this.authProfile)
+          : isPortalScope(scope)
+            ? ChatAuthApi.getPortalAuthProfile()
+            : ChatAuthApi.getApplicationAuthProfile(scope)
+
+      return profileRequest.then((authProfile) => {
+        useChatThemeStore().setTheme(authProfile.custom_theme?.theme_color)
+        return authProfile
+      })
     },
 
     /** 切换当前场景，由守卫在放行前调用。 */
diff --git a/ui/src/stores/chat/index.ts b/ui/src/stores/chat/index.ts
index c930b22b3a9..128dd5a9153 100644
--- a/ui/src/stores/chat/index.ts
+++ b/ui/src/stores/chat/index.ts
@@ -3,6 +3,7 @@
 import { createPinia } from 'pinia'
 import { useChatAuthStore } from './auth'
 import { useChatUserStore } from './user'
+import { useChatThemeStore } from './theme'
 
 export const pinia = createPinia()
 
@@ -13,6 +14,9 @@ const stores = {
   get user() {
     return useChatUserStore(pinia)
   },
+  get theme() {
+    return useChatThemeStore(pinia)
+  },
 }
 
 /** 在 Router、Axios 等组件外代码中按需访问 Chat Store。 */
diff --git a/ui/src/stores/chat/theme.ts b/ui/src/stores/chat/theme.ts
new file mode 100644
index 00000000000..626323a3563
--- /dev/null
+++ b/ui/src/stores/chat/theme.ts
@@ -0,0 +1,34 @@
+/** 管理 Chat 入口的智能体主题色，并按需应用到当前文档。 */
+
+import { defineStore } from 'pinia'
+import { DEFAULT_THEME_COLOR } from '@/constants'
+
+export const useChatThemeStore = defineStore('chat-theme', {
+  state: () => ({ themeColor: DEFAULT_THEME_COLOR }),
+
+  actions: {
+    /** 配置缺失或非法时使用默认色；主题只保存在内存中。 */
+    setTheme(themeColor?: string) {
+      const normalizedColor = themeColor?.trim().toLowerCase()
+      this.themeColor = normalizedColor && /^#[\da-f]{6}$/.test(normalizedColor) ? normalizedColor : DEFAULT_THEME_COLOR
+
+      const rootStyle = document.documentElement.style
+      const hexColor = this.themeColor.slice(1)
+      const rgbChannels = [0, 2, 4].map((index) => Number.parseInt(hexColor.slice(index, index + 2), 16)).join(' ')
+      rootStyle.setProperty('--mk-primary', this.themeColor)
+      rootStyle.setProperty('--mk-primary-rgb', rgbChannels)
+      if (this.themeColor === DEFAULT_THEME_COLOR) {
+        rootStyle.removeProperty('--mk-primary-gradient')
+        rootStyle.removeProperty('--mk-primary-gradient-end')
+      } else {
+        rootStyle.setProperty('--mk-primary-gradient', this.themeColor)
+        rootStyle.setProperty('--mk-primary-gradient-end', this.themeColor)
+      }
+    },
+
+    /** 恢复默认主题色与默认蓝紫渐变。 */
+    resetTheme() {
+      this.setTheme()
+    },
+  },
+})
diff --git a/ui/src/styles/STYLE_README.md b/ui/src/styles/STYLE_README.md
index 9b77c6257d3..6521dd5f728 100644
--- a/ui/src/styles/STYLE_README.md
+++ b/ui/src/styles/STYLE_README.md
@@ -324,6 +324,14 @@ Tailwind 类。
 不要直接写这些变量，也不要绕过项目变量写入 Element Plus 的 `--el-*` 主题变量。Element Plus
 色阶继续由 `element-plus.scss` 基于 `--mk-primary` 映射生成。
 
+Chat 的主题能力由独立的 `src/stores/chat/theme.ts` 提供，通过 Chat 的 `useStore().theme`
+访问。`setTheme(themeColor)` 接收六位十六进制颜色，空值或非法值回退到默认色；
+`resetTheme()` 恢复默认主题。仅显式调用时更新当前文档根节点的项目颜色变量，不持久化，
+不加载 Admin 外观配置。Chat Auth Store 的 `fetchAuthProfile()` 在获取或复用认证前置配置后，
+显式应用顶层 `custom_theme.theme_color`，登录页和正式对话共用当前认证场景的主题。
+对话装配不从智能体 profile 设置主题，门户内切换智能体沿用门户认证配置中的主题。
+Admin 不调用该 Store。
+
 普通 CSS 使用 `color: var(--mk-primary)`。
 
 ### Tailwind
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index a26038e4b18..e78492e1131 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -31,7 +31,7 @@
   --el-color-success-dark-2: color-mix(in srgb, var(--mk-success) 85%, black);
   --el-color-warning: var(--mk-warning);
   --el-color-warning-dark-2: color-mix(in srgb, var(--mk-warning) 85%, black);
-  --el-border-color: var(--mk-N350);
+  --el-border-color: var(--mk-N300);
   --el-border-radius-base: 6px;
   --el-border-radius-round: 16px;
   --el-border-radius-small: 4px;
@@ -1147,7 +1147,7 @@
   --el-table-header-bg-color: var(--mk-N100);
   --el-table-text-color: var(--el-text-color-primary);
   --el-table-row-hover-bg-color: color-mix(in srgb, var(--el-color-primary) 4%, white);
-  --el-table-border-color: var(--mk-N300);
+  --el-table-border-color: var(--el-border-color);
   border-radius: var(--radius-xl) var(--radius-xl) 0 0;
 
   thead th {
@@ -1268,7 +1268,7 @@
   }
   &--plain {
     &.el-tag--info {
-      --el-tag-border-color: rgb(var(--mk-N900-rgb) / 15%) !important;
+      --el-tag-border-color: var(--el-border-color) !important;
       --el-tag-text-color: var(--mk-N600);
       font-weight: 500 !important;
     }
diff --git a/ui/src/views/application-detail/overview/display-setting/components/DisplaySettingPreview.vue b/ui/src/views/application-detail/overview/display-setting/components/DisplaySettingPreview.vue
index 50ca6507336..fbd52881250 100644
--- a/ui/src/views/application-detail/overview/display-setting/components/DisplaySettingPreview.vue
+++ b/ui/src/views/application-detail/overview/display-setting/components/DisplaySettingPreview.vue
@@ -32,8 +32,8 @@ const previewHeaderStyle = computed<CSSProperties>(() => ({
 
 <template>
   <div class="mk-gray-card-lg flex h-full items-end gap-2 overflow-hidden">
-    <div class="flex-column h-full min-w-0 flex-1 overflow-hidden border border-N300 bg-white shadow-lg rounded-xl">
-      <header class="flex-between h-header shrink-0 gap-4 border-b border-N300 p-4" :style="previewHeaderStyle">
+    <div class="flex-column h-full min-w-0 flex-1 overflow-hidden border bg-white shadow-lg rounded-xl">
+      <header class="flex-between h-header shrink-0 gap-4 border-b p-4" :style="previewHeaderStyle">
         <div class="flex-align-center min-w-0 flex-1 gap-2">
           <MkIcon name="icon_sidebar_outlined" :size="18" class="mr-2 shrink-0" />
           <ApplicationIcon :icon="previewImages.icon" :size="24" class="shrink-0" />
@@ -68,7 +68,7 @@ const previewHeaderStyle = computed<CSSProperties>(() => ({
           <div class="h-8.5 w-2/3 rounded-xl bg-N100"></div>
         </div>
         <div class="mt-auto space-y-2">
-          <div class="mk-input-box flex h-23 items-end justify-end border border-N350/60 shadow-lg">
+          <div class="mk-input-box flex h-23 items-end justify-end border shadow-lg">
             <!-- 预览发送按钮 -->
             <el-button circle disabled type="primary">
               <MkIcon name="icon_arrow-up_outlined" :size="18" />
diff --git a/ui/src/views/application/components/ButtonCreateApplication.vue b/ui/src/views/application/components/ButtonCreateApplication.vue
index b24a1843ea3..592c51cbff6 100644
--- a/ui/src/views/application/components/ButtonCreateApplication.vue
+++ b/ui/src/views/application/components/ButtonCreateApplication.vue
@@ -108,7 +108,7 @@ function handleRefresh() {
           </template>
           <div class="min-w-0">
             <p>简易智能体</p>
-            <p class="text-sm text-N500 whitespace-normal">通过表单设置方式，快速搭建基础功能的智能体</p>
+            <p class="text-sm text-N600 whitespace-normal">通过表单设置方式，快速搭建基础功能的智能体</p>
           </div>
         </MkDropdownItem>
         <MkDropdownItem class="py-2! items-start!" @click="handleOpenAdvancedApplicationCreate">
@@ -119,7 +119,7 @@ function handleRefresh() {
           </template>
           <div class="min-w-0">
             <p class="leading-5">高级智能体</p>
-            <p class="text-sm text-N500 whitespace-normal">使用低代码拖拉拽方式，灵活编排复杂逻辑、功能丰富的智能体</p>
+            <p class="text-sm text-N600 whitespace-normal">使用低代码拖拉拽方式，灵活编排复杂逻辑、功能丰富的智能体</p>
           </div>
         </MkDropdownItem>
 
diff --git a/ui/src/views/knowledge/components/ButtonCreateKnowledge.vue b/ui/src/views/knowledge/components/ButtonCreateKnowledge.vue
index 67bdaeb40b6..53dae8c9a3f 100644
--- a/ui/src/views/knowledge/components/ButtonCreateKnowledge.vue
+++ b/ui/src/views/knowledge/components/ButtonCreateKnowledge.vue
@@ -139,7 +139,7 @@ function handleImportCreate(file: UploadFile) {
           <template #icon><KnowledgeIcon :type="KNOWLEDGE_TYPE.BASE" /></template>
           <div class="min-w-0">
             <p>通用知识库</p>
-            <p class="text-sm text-N500 whitespace-normal">通过上传文件或手动录入构建知识库</p>
+            <p class="text-sm text-N600 whitespace-normal">通过上传文件或手动录入构建知识库</p>
           </div>
         </MkDropdownItem>
         <!-- 创建 Web 知识库 -->
@@ -147,7 +147,7 @@ function handleImportCreate(file: UploadFile) {
           <template #icon><KnowledgeIcon :type="KNOWLEDGE_TYPE.WEB" /></template>
           <div class="min-w-0">
             <p>Web 知识库</p>
-            <p class="text-sm text-N500 whitespace-normal">通过网站链接构建知识库</p>
+            <p class="text-sm text-N600 whitespace-normal">通过网站链接构建知识库</p>
           </div>
         </MkDropdownItem>
         <!-- 创建飞书知识库 -->
@@ -155,7 +155,7 @@ function handleImportCreate(file: UploadFile) {
           <template #icon><KnowledgeIcon :type="KNOWLEDGE_TYPE.LARK" /></template>
           <div class="min-w-0">
             <p>飞书知识库</p>
-            <p class="text-sm text-N500 whitespace-normal">通过飞书文档构建知识库</p>
+            <p class="text-sm text-N600 whitespace-normal">通过飞书文档构建知识库</p>
           </div>
         </MkDropdownItem>
         <!-- 创建工作流知识库 -->
@@ -163,7 +163,7 @@ function handleImportCreate(file: UploadFile) {
           <template #icon><KnowledgeIcon :type="KNOWLEDGE_TYPE.WORKFLOW" /></template>
           <div class="min-w-0">
             <p>工作流知识库</p>
-            <p class="text-sm text-N500 whitespace-normal">通过自定义工作流方式构建知识库</p>
+            <p class="text-sm text-N600 whitespace-normal">通过自定义工作流方式构建知识库</p>
           </div>
         </MkDropdownItem>
         <!-- 导入创建 -->
diff --git a/ui/src/workflow-canvas/ai-generate/panel/AiGeneratePanel.vue b/ui/src/workflow-canvas/ai-generate/panel/AiGeneratePanel.vue
index 27afb9f641d..6e54b5d5d9c 100644
--- a/ui/src/workflow-canvas/ai-generate/panel/AiGeneratePanel.vue
+++ b/ui/src/workflow-canvas/ai-generate/panel/AiGeneratePanel.vue
@@ -208,7 +208,7 @@ defineExpose({ open, close })
         </div>
       </el-scrollbar>
 
-      <div class="mk-input-box m-4 mt-0 border border-N350/60 shadow-lg transition-colors focus-within:border-primary/60">
+      <div class="mk-input-box m-4 mt-0 border shadow-lg transition-colors focus-within:border-primary/60">
         <el-input
           v-model="requirement"
           type="textarea"
diff --git a/ui/src/workflow-canvas/execution-details/DetailContainer.vue b/ui/src/workflow-canvas/execution-details/DetailContainer.vue
index dc65ca31ce6..ba9c3e76806 100644
--- a/ui/src/workflow-canvas/execution-details/DetailContainer.vue
+++ b/ui/src/workflow-canvas/execution-details/DetailContainer.vue
@@ -21,7 +21,7 @@ const showContent = computed(() => isSuccess.value || props.showContentOnError)
 </script>
 
 <template>
-  <el-card shadow="hover" class="border-N300! cursor-pointer" @click="show = !show">
+  <el-card shadow="hover" class="cursor-pointer" @click="show = !show">
     <MkCollapse v-model:expanded="show" trigger="indicator">
       <template #label>
         <slot name="header" />
diff --git a/ui/src/workflow-canvas/index.vue b/ui/src/workflow-canvas/index.vue
index d9760ed5506..9823c6b30da 100644
--- a/ui/src/workflow-canvas/index.vue
+++ b/ui/src/workflow-canvas/index.vue
@@ -60,7 +60,7 @@ function renderGraphData(data: LogicFlow.GraphConfigData = props.data ?? {}) {
   lf.value.setTheme({
     bezier: { stroke: '#afafaf', strokeWidth: 1 },
     edgeOutline: {
-      stroke: 'var(--mk-N350)',
+      stroke: 'var(--mk-N300)',
       strokeWidth: 1.5,
       strokeDasharray: '4,4', // 虚线长度和间隔
       hover: { stroke: 'var(--mk-primary)' },