@liujitcn/kratos-taro-app-system 0.0.78 → 0.0.80

package/src/views/pagesMember/ai/components/model-picker.scss

@@ -4,7 +4,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 100;
+  z-index: 1000;
 }
 
 .model-picker__mask {
@@ -13,7 +13,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba(15, 23, 42, 0.45);
+  background: var(--kratos-color-mask, rgba(2, 6, 12, 0.55));
 }
 
 .model-picker__sheet {
@@ -25,7 +25,9 @@
   flex-direction: column;
   max-height: 68vh;
   overflow: hidden;
-  background-color: #fff;
+  background: var(--kratos-color-surface-solid, #070d18);
+  border: 1PX solid var(--kratos-color-border-accent, rgba(120, 230, 215, 0.16));
+  border-bottom: 0;
   border-radius: 32px 32px 0 0;
   box-shadow: 0 -24px 80px rgba(15, 23, 42, 0.16);
   box-sizing: border-box;
@@ -36,7 +38,7 @@
   width: 72px;
   height: 8px;
   margin: 16px auto 8px;
-  background-color: #e2e5ea;
+  background: var(--kratos-color-track, rgba(255, 255, 255, 0.06));
   border-radius: 4px;
 }
 
@@ -51,14 +53,15 @@
 }
 
 .model-picker__title {
-  color: #111;
+  color: var(--kratos-color-text, #e9f4f6);
   font-size: 32px;
-  font-weight: 600;
+  font-weight: 700;
 }
 
 .model-picker__count {
-  color: #8a8f99;
+  color: var(--kratos-color-text-muted, #8aa0b4);
   font-size: 20px;
+  font-family: var(--kratos-font-mono, monospace);
 }
 
 .model-picker__close {
@@ -70,7 +73,7 @@
   justify-content: center;
   width: 56px;
   height: 56px;
-  color: #8a8f99;
+  color: var(--kratos-color-text-muted, #8aa0b4);
   font-size: 28px;
 }
 
@@ -84,8 +87,9 @@
 
 .model-picker__group {
   padding: 24px 8px 12px;
-  color: #8a8f99;
+  color: var(--kratos-color-text-muted, #8aa0b4);
   font-size: 22px;
+  font-family: var(--kratos-font-mono, monospace);
   line-height: 32px;
 }
 
@@ -95,16 +99,17 @@
   min-height: 88px;
   padding: 16px 28px;
   margin-bottom: 12px;
-  border: 2px solid #eef0f4;
-  border-radius: 24px;
+  border: 1PX solid var(--kratos-color-border, rgba(255, 255, 255, 0.08));
+  background: var(--kratos-color-surface, rgba(255, 255, 255, 0.035));
+  border-radius: 20px;
   box-sizing: border-box;
 }
 
 .model-picker__row.is-selected {
-  color: #0f7a62;
-  font-weight: 500;
-  background-color: #e8f8f4;
-  border-color: #d5efe7;
+  color: var(--kratos-color-primary, #28f0d4);
+  font-weight: 600;
+  background: var(--kratos-color-primary-soft, rgba(40, 240, 212, 0.08));
+  border-color: var(--kratos-color-primary-edge, rgba(40, 240, 212, 0.3));
 }
 
 .model-picker__row-main {
@@ -121,7 +126,8 @@
 }
 
 .model-picker__row-raw {
-  color: #a7acb5;
+  color: var(--kratos-color-text-dim, #4e6378);
+  font-family: var(--kratos-font-mono, monospace);
   font-size: 22px;
   font-weight: 400;
   line-height: 30px;
@@ -129,13 +135,13 @@
 
 .model-picker__row-check {
   margin-left: auto;
-  color: #00a96b;
+  color: var(--kratos-color-primary, #28f0d4);
   font-size: 32px;
 }
 
 .model-picker__empty {
   padding: 64px 0;
-  color: #8a8f99;
+  color: var(--kratos-color-text-dim, #4e6378);
   font-size: 26px;
   text-align: center;
 }

package/src/views/pagesMember/ai/components/session-drawer.scss

@@ -14,8 +14,8 @@
   right: 0;
   bottom: 0;
   left: 560px;
-  z-index: 20;
-  background-color: rgba(0, 0, 0, 0.18);
+  z-index: 1000;
+  background: var(--kratos-color-mask, rgba(2, 6, 12, 0.55));
 }
 
 .session-drawer {
@@ -25,10 +25,11 @@
   top: 0;
   left: 0;
   bottom: 0;
-  z-index: 21;
+  z-index: 1001;
   width: 560px;
   padding: 0 24px 36px;
-  background-color: #fff;
+  background: var(--kratos-color-surface-solid, #070d18);
+  border-right: 1PX solid var(--kratos-color-border-accent, rgba(120, 230, 215, 0.16));
   box-shadow: none;
   box-sizing: border-box;
   transform: translateX(-100%);
@@ -36,7 +37,7 @@
 }
 
 .session-drawer.is-open {
-  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.12);
+  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.3);
   transform: translateX(0);
 }
 
@@ -49,7 +50,12 @@
   margin-bottom: 18px;
 }
 
-.session-drawer__title { color: #333; font-size: 32px; font-weight: 700; line-height: 40px; }
+.session-drawer__title {
+  color: var(--kratos-color-text, #e9f4f6);
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 40px;
+}
 
 .session-create {
   display: flex;
@@ -58,11 +64,12 @@
   gap: 4px;
   width: 112px;
   height: 52px;
-  border-radius: 8px;
-  color: #27ba9b;
+  border: 1PX solid var(--kratos-color-primary-edge, rgba(40, 240, 212, 0.3));
+  border-radius: 12px;
+  color: var(--kratos-color-primary, #28f0d4);
   font-size: 24px;
-  line-height: 52px;
-  background-color: #e8f8f4;
+  line-height: 50px;
+  background: var(--kratos-color-primary-soft, rgba(40, 240, 212, 0.08));
 }
 
 .session-search {
@@ -73,13 +80,19 @@
   height: 64px;
   padding: 0 18px;
   margin-bottom: 18px;
-  border-radius: 10px;
-  background-color: #f6f7f9;
+  border: 1PX solid var(--kratos-color-border, rgba(255, 255, 255, 0.08));
+  border-radius: 12px;
+  background: var(--kratos-color-surface-2, rgba(255, 255, 255, 0.06));
   box-sizing: border-box;
 }
 
-.session-search-input { flex: 1; min-width: 0; color: #333; font-size: 24px; }
-.session-search-placeholder { color: #b8bcc5; }
+.session-search-input {
+  flex: 1;
+  min-width: 0;
+  color: var(--kratos-color-text, #e9f4f6);
+  font-size: 24px;
+}
+.session-search-placeholder { color: var(--kratos-color-text-dim, #4e6378); }
 .session-list { flex: 1; min-height: 0; }
 
 .session-item {
@@ -87,13 +100,16 @@
   align-items: center;
   gap: 12px;
   padding: 22px 16px 22px 22px;
-  border: 1px solid #eee;
-  border-radius: 10px;
-  background-color: #fff;
+  border: 1PX solid var(--kratos-color-border, rgba(255, 255, 255, 0.08));
+  border-radius: 14px;
+  background: var(--kratos-color-surface, rgba(255, 255, 255, 0.035));
 }
 
 .session-item + .session-item { margin-top: 18px; }
-.session-item.is-active { border-color: #c7eee4; background-color: #e8f8f4; }
+.session-item.is-active {
+  border-color: var(--kratos-color-primary-edge, rgba(40, 240, 212, 0.3));
+  background: var(--kratos-color-primary-soft, rgba(40, 240, 212, 0.08));
+}
 .session-content { flex: 1; min-width: 0; }
 .session-row { display: flex; align-items: center; gap: 14px; }
 
@@ -103,20 +119,26 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #333;
+  color: var(--kratos-color-text, #e9f4f6);
   font-size: 26px;
   font-weight: 600;
   line-height: 34px;
 }
 
-.session-time { flex-shrink: 0; color: #a6abb3; font-size: 20px; line-height: 30px; }
+.session-time {
+  flex-shrink: 0;
+  color: var(--kratos-color-text-dim, #4e6378);
+  font-size: 20px;
+  font-family: var(--kratos-font-mono, monospace);
+  line-height: 30px;
+}
 
 .session-summary {
   margin-top: 10px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: #777;
+  color: var(--kratos-color-text-muted, #8aa0b4);
   font-size: 22px;
   line-height: 32px;
 }
@@ -132,4 +154,4 @@
   background-color: transparent;
 }
 
-.session-empty { padding: 60px 0; color: #999; font-size: 24px; text-align: center; }
+.session-empty { padding: 60px 0; color: var(--kratos-color-text-dim, #4e6378); font-size: 24px; text-align: center; }

package/src/views/pagesMember/ai/components/welcome-panel.scss

@@ -175,9 +175,9 @@
 }
 
 .welcome-bubble {
-  color: #111;
-  background-color: #fff;
-  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.04);
+  color: var(--kratos-color-text, #e9f4f6);
+  background: var(--kratos-color-surface, #fff);
+  border: 1PX solid var(--kratos-color-border, rgba(255, 255, 255, 0.08));
   box-sizing: border-box;
 }
 
@@ -204,10 +204,10 @@
 .prompt-card {
   margin-top: 34px;
   padding: 30px 28px 24px;
-  border: 1px solid #e7ecef;
-  border-radius: 10px;
-  background: linear-gradient(180deg, rgba(0, 169, 107, 0.05), rgba(255, 255, 255, 0) 38%), #fff;
-  box-shadow: 0 10px 34px rgba(15, 23, 42, 0.05);
+  border: 1PX solid var(--kratos-color-border-accent, rgba(120, 230, 215, 0.16));
+  border-radius: 16px;
+  background: var(--kratos-color-surface, #fff);
+  box-shadow: var(--kratos-glow-soft, none);
   box-sizing: border-box;
 }
 
@@ -219,8 +219,19 @@
   margin-bottom: 18px;
 }
 
-.prompt-card__eyebrow { color: #00a96b; font-size: 22px; font-weight: 600; line-height: 30px; }
-.prompt-card__title { color: #111; font-size: 31px; font-weight: 700; line-height: 42px; }
+.prompt-card__eyebrow {
+  color: var(--kratos-color-primary, #28f0d4);
+  font-size: 22px;
+  font-family: var(--kratos-font-mono, monospace);
+  font-weight: 600;
+  line-height: 30px;
+}
+.prompt-card__title {
+  color: var(--kratos-color-text, #e9f4f6);
+  font-size: 31px;
+  font-weight: 700;
+  line-height: 42px;
+}
 
 .prompt-refresh {
   flex-shrink: 0;
@@ -228,12 +239,12 @@
   align-items: center;
   gap: 14px;
   height: 50px;
-  color: #00a96b;
+  color: var(--kratos-color-primary, #28f0d4);
   font-size: 25px;
   line-height: 50px;
 }
 
-.prompt-loading { padding: 32px 0; color: #8d929c; font-size: 26px; line-height: 38px; }
+.prompt-loading { padding: 32px 0; color: var(--kratos-color-text-muted, #8aa0b4); font-size: 26px; line-height: 38px; }
 
 .prompt-item {
   display: flex;
@@ -241,8 +252,8 @@
   width: 100%;
   min-height: 96px;
   padding: 16px 16px 16px 0;
-  border-top: 1px solid #edf0f2;
-  color: #111;
+  border-top: 1PX solid var(--kratos-color-border, rgba(255, 255, 255, 0.08));
+  color: var(--kratos-color-text, #e9f4f6);
   text-align: left;
   box-sizing: border-box;
 }
@@ -255,12 +266,12 @@
   height: 36px;
   margin-right: 24px;
   border-radius: 8px;
-  color: #00a96b;
+  color: var(--kratos-color-primary, #28f0d4);
   font-size: 24px;
   font-weight: 700;
   line-height: 34px;
   text-align: center;
-  background-color: #e7f7f2;
+  background: var(--kratos-color-primary-soft, rgba(40, 240, 212, 0.08));
   box-sizing: border-box;
 }
 
@@ -280,5 +291,5 @@
   white-space: nowrap;
 }
 
-.prompt-text { color: #111; font-size: 29px; line-height: 40px; }
-.prompt-meta { color: #8d929c; font-size: 22px; line-height: 30px; }
+.prompt-text { color: var(--kratos-color-text, #e9f4f6); font-size: 29px; line-height: 40px; }
+.prompt-meta { color: var(--kratos-color-text-muted, #8aa0b4); font-size: 22px; line-height: 30px; }

package/src/views/pagesMember/ai/index.scss

@@ -1,7 +1,7 @@
 page {
   height: 100%;
   overflow: hidden;
-  background-color: #f6f6f6;
+  background-color: #eef3f8;
 }
 
 .ai-page {
@@ -12,68 +12,13 @@ page {
   height: 100vh;
   height: 100dvh;
   overflow: hidden;
-  color: #333;
-  background-color: #f6f6f6;
+  color: var(--kratos-color-text);
+  background: var(--kratos-bg-gradient);
 }
 
 .ai-navbar {
   flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  background-color: #fff;
-  border-bottom: 1px solid #eceef1;
-  height: 44PX;
-}
-
-.ai-navbar.is-weapp {
-  position: relative;
-  height: 88PX;
-  padding-top: 44PX;
-}
-
-.ai-navbar.is-weapp .nav-back-button,
-.ai-navbar.is-weapp .nav-menu-button {
-  position: absolute;
-  bottom: 0;
-  height: 44PX;
-}
-
-.ai-navbar.is-weapp .nav-back-button { left: 0; }
-.ai-navbar.is-weapp .nav-menu-button {
-  left: 56px;
-  right: auto;
-}
-.ai-navbar.is-weapp .ai-navbar__title {
-  width: 100%;
-  height: 44PX;
-  line-height: 44PX;
-}
-
-.nav-back-button,
-.nav-menu-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 88px;
-  height: 44PX;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  line-height: normal;
-}
-
-.nav-back-button::after,
-.nav-menu-button::after { border: 0; }
-
-.ai-navbar__title {
-  flex: 1;
-  color: #111;
-  font-size: 32px;
-  font-weight: 600;
-  text-align: center;
+  padding: 0 24px;
 }
 
 .ai-body {
@@ -95,8 +40,18 @@ page {
   word-break: break-word;
 }
 
-.user-bubble { color: #fff; background-color: #27ba9b; border-bottom-right-radius: 6px; }
-.ai-bubble { color: #333; background-color: #fff; border-bottom-left-radius: 6px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); }
+.user-bubble {
+  color: var(--kratos-color-on-primary);
+  background: linear-gradient(135deg, var(--kratos-color-primary-deep) 0%, var(--kratos-color-primary) 100%);
+  border-bottom-right-radius: 6px;
+  box-shadow: var(--kratos-glow);
+}
+.ai-bubble {
+  color: var(--kratos-color-text);
+  background: var(--kratos-color-surface);
+  border: 1PX solid var(--kratos-color-border);
+  border-bottom-left-radius: 6px;
+}
 .bubble.is-streaming { opacity: 0.72; }
 .bubble-content { white-space: pre-wrap; font-size: 28px; line-height: 1.65; }
 
@@ -105,11 +60,12 @@ page {
   align-items: center;
   gap: 12px;
   margin-bottom: 8px;
-  color: #8a8f99;
+  color: var(--kratos-color-text-muted);
   font-size: 20px;
+  font-family: var(--kratos-font-mono);
 }
 
-.reply-tag { color: #16806d; }
+.reply-tag { color: var(--kratos-color-primary); }
 .attachment-list { margin-top: 16px; }
 
 .attachment-card {
@@ -119,8 +75,9 @@ page {
   max-width: 100%;
   padding: 12px;
   margin-top: 8px;
-  border-radius: 10px;
-  background-color: rgba(255, 255, 255, 0.72);
+  border: 1PX solid var(--kratos-color-border);
+  border-radius: 12px;
+  background: var(--kratos-color-surface-2);
   box-sizing: border-box;
 }
 
@@ -128,22 +85,28 @@ page {
   flex-shrink: 0;
   width: 48px;
   height: 48px;
-  border-radius: 8px;
-  color: #16806d;
-  font-size: 22px;
-  line-height: 48px;
+  border: 1PX solid var(--kratos-color-primary-edge);
+  border-radius: 10px;
+  color: var(--kratos-color-primary);
+  font-size: 20px;
+  line-height: 46px;
   text-align: center;
-  background-color: #e8f8f4;
+  background: var(--kratos-color-primary-soft);
 }
 
 .attachment-info { min-width: 0; }
 .attachment-name,
 .attachment-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .attachment-name { max-width: 320px; font-size: 22px; }
-.attachment-meta { margin-top: 4px; color: #8a8f99; font-size: 19px; }
+.attachment-meta { margin-top: 4px; color: var(--kratos-color-text-muted); font-size: 19px; font-family: var(--kratos-font-mono); }
 
 .tool-row,
-.loading-session { color: #8a8f99; font-size: 22px; line-height: 34px; }
+.loading-session {
+  color: var(--kratos-color-text-muted);
+  font-size: 22px;
+  font-family: var(--kratos-font-mono);
+  line-height: 34px;
+}
 .tool-row { margin-top: 12px; }
 .loading-session { padding: 20px 0; text-align: center; }
 .chat-bottom { width: 2px; height: 2px; }

package/src/views/pagesMember/ai/index.tsx

@@ -1,4 +1,4 @@
-import { Button, ScrollView, Text, View } from '@tarojs/components'
+import { ScrollView, Text, View } from '@tarojs/components'
 import Taro, { getCurrentPages, useLoad } from '@tarojs/taro'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
@@ -8,6 +8,7 @@ import {
   t,
   uploadFile,
   useI18n,
+  useThemeStore,
 } from '@liujitcn/kratos-taro-app-core'
 import { UniIcon } from '@liujitcn/kratos-taro-app-ui'
 import { isAuthExpiredError } from '@liujitcn/kratos-taro-app-core/utils/http'
@@ -15,8 +16,10 @@ import { defAiMessageService, StreamAiMessageByChunkedRequest } from '../../../a
 import { defAiSessionService } from '../../../api/base/v1/ai_session'
 import { defAiToolService } from '../../../api/base/v1/ai_tool'
 import { defAiModelService } from '../../../api/base/v1/ai_provider'
+import { defAiKnowledgeService } from '../../../api/base/v1/ai_knowledge'
 import type { AiAttachment, AiMessage, AiSession } from '../../../rpc/base/v1/ai_session'
 import type { AiProviderModelOption } from '../../../rpc/base/v1/ai_provider'
+import type { AiKnowledgeOption } from '../../../rpc/base/v1/ai_knowledge'
 import type { AiShortcut, AiToolCall } from '../../../rpc/base/v1/ai_tool'
 import { AiMessageStatus } from '../../../rpc/base/v1/ai_session'
 import { Terminal } from '../../../rpc/base/v1/ai_tool'
@@ -67,6 +70,9 @@ const STARTER_PROMPT_PAGE_SIZE = 4
 /** AI 助手页面。 */
 export default function AiPage() {
   const { locale } = useI18n()
+  const themeStore = useThemeStore()
+  /** 导航图标随主题取色，UniIcon 的 color 属性不接受 CSS 变量。 */
+  const navIconColor = themeStore.theme === 'light' ? '#102232' : '#e9f4f6'
   const windowInfo = Taro.getWindowInfo() as ReturnType<typeof Taro.getWindowInfo> & {
     safeAreaInsets?: { top?: number; bottom?: number }
   }
@@ -100,6 +106,8 @@ export default function AiPage() {
   const [modelProviders, setModelProviders] = useState<AiProviderModelOption[]>([])
   const [selectedProviderId, setSelectedProviderId] = useState(0)
   const [selectedModelName, setSelectedModelName] = useState('')
+  const [knowledgeOptions, setKnowledgeOptions] = useState<AiKnowledgeOption[]>([])
+  const [selectedKnowledgeIds, setSelectedKnowledgeIds] = useState<number[]>([])
   const [starterShortcuts, setStarterShortcuts] = useState<AiShortcut[]>(createDefaultShortcuts)
 
   const activeSessionIDRef = useRef('')
@@ -359,13 +367,24 @@ export default function AiPage() {
     if (loadingShortcutsRef.current) return
     setLoadingShortcuts(true)
     try {
-      const [response, providerResponse] = await Promise.all([
+      const [shortcutResult, providerResult, knowledgeResult] = await Promise.allSettled([
         defAiToolService.ListAiShortcut({ terminal: AI_TERMINAL }),
         defAiModelService.ListAiProviderModelOptions({}),
+        defAiKnowledgeService.ListAiKnowledgeOptions({}),
       ])
+      if (shortcutResult.status === 'rejected') throw shortcutResult.reason
+      if (providerResult.status === 'rejected') throw providerResult.reason
+      if (knowledgeResult.status === 'rejected' && isAuthExpiredError(knowledgeResult.reason)) {
+        throw knowledgeResult.reason
+      }
+      const response = shortcutResult.value
+      const providerResponse = providerResult.value
       const shortcuts = normalizeStarterShortcuts(response.shortcuts).filter((item) => !item.action)
       const providers = providerResponse.providers ?? []
       setModelProviders(providers)
+      const options = knowledgeResult.status === 'fulfilled' ? knowledgeResult.value.options ?? [] : []
+      setKnowledgeOptions(options)
+      setSelectedKnowledgeIds((ids) => ids.filter((id) => options.some((option) => option.id === id)))
       applyModelSelection(providers)
       if (shortcuts.length) {
         setStarterShortcuts(shortcuts)
@@ -375,6 +394,8 @@ export default function AiPage() {
       setModelProviders([])
       setSelectedProviderId(0)
       setSelectedModelName('')
+      setKnowledgeOptions([])
+      setSelectedKnowledgeIds([])
       showError(error, t('system.ai.load_shortcuts_failed'))
     } finally {
       setLoadingShortcuts(false)
@@ -387,6 +408,11 @@ export default function AiPage() {
     saveModelSelection({ provider_id: providerId, model_name: modelName })
   }
 
+  /** 更新当前聊天检索注入的知识库选择。 */
+  const handleKnowledgeChange = (knowledgeIds: number[]) => {
+    setSelectedKnowledgeIds(knowledgeIds)
+  }
+
   /** 优先恢复本地缓存的模型选择，缓存失效时回退到首个可用模型。 */
   const applyModelSelection = (providers: AiProviderModelOption[]) => {
     const stored = loadStoredModelSelection()
@@ -417,7 +443,7 @@ export default function AiPage() {
       content: payload.text,
       provider_id: selectedProviderId,
       model_name: selectedModelName,
-      knowledge_base_ids: [],
+      knowledge_base_ids: selectedKnowledgeIds,
       attachments: payload.attachments,
       action: undefined,
     }
@@ -506,7 +532,6 @@ export default function AiPage() {
   })
 
   useEffect(() => {
-    void Taro.setNavigationBarTitle({ title: t('system.ai.chat_title') })
     setStarterShortcuts(createDefaultShortcuts())
     setStarterPromptGroupIndex(0)
   }, [locale])
@@ -558,7 +583,8 @@ export default function AiPage() {
         title: session?.title || t('system.ai.current_session'),
       }),
       confirmText: t('common.action.delete'),
-      confirmColor: '#cf4444',
+      confirmColor: themeStore.theme === 'light' ? '#e0324f' : '#ff4d6d',
+      cancelColor: themeStore.theme === 'light' ? '#5a7083' : '#8aa0b4',
     })
     if (!result.confirm) return
     try {
@@ -695,15 +721,19 @@ export default function AiPage() {
   }
 
   return (
-    <View className='ai-page'>
-      <View className={`ai-navbar${process.env.TARO_ENV === 'weapp' ? ' is-weapp' : ''}`}>
-        <Button className='nav-back-button' hoverClass='none' onClick={navigateBack}>
-          <UniIcon type='left' size={24} color='#111' />
-        </Button>
-        <View className='ai-navbar__title'>{t('system.ai.chat_title')}</View>
-        <Button className='nav-menu-button' hoverClass='none' onClick={() => setShowSessionDrawer((open) => !open)}>
-          <UniIcon type='bars' size={24} color='#111' />
-        </Button>
+    <View
+      className={`ai-page ${themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'}`}
+    >
+      <View className={`ai-navbar k-page-nav ${process.env.TARO_ENV === 'weapp' ? 'k-page-nav--weapp' : ''}`}>
+        <View className='k-page-nav__back' aria-label={t('common.action.back')} onClick={navigateBack} />
+        <View className='k-page-nav__title'>{t('system.ai.chat_title')}</View>
+        <View
+          className='k-page-nav__side k-ic'
+          aria-label={t('system.ai.history')}
+          onClick={() => setShowSessionDrawer((open) => !open)}
+        >
+          <UniIcon type='bars' size={22} color={navIconColor} />
+        </View>
       </View>
       <ScrollView
         className='ai-body'
@@ -773,6 +803,8 @@ export default function AiPage() {
         modelProviders={modelProviders}
         providerId={selectedProviderId}
         modelName={selectedModelName}
+        knowledgeOptions={knowledgeOptions}
+        knowledgeIds={selectedKnowledgeIds}
         modelPlaceholder={t('system.ai.model.model_placeholder')}
         placeholder={composerPlaceholder}
         bottom={composerBottom}
@@ -792,6 +824,7 @@ export default function AiPage() {
         }}
         onSend={() => void handleSend()}
         onModelChange={handleModelChange}
+        onKnowledgeChange={handleKnowledgeChange}
         onRemoveAttachment={(attachment) => setSelectedAttachments((current) => current.filter((item) => item !== attachment))}
       />
       <SessionDrawer