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

package/src/views/pages/my/my.tsx

@@ -1,29 +1,39 @@
-import { Image, ScrollView, Text, View } from '@tarojs/components'
-import centerBackground from '@liujitcn/kratos-taro-app-core/static/images/center_bg.png'
+import type { CSSProperties } from 'react'
+import { Image, ScrollView, View } from '@tarojs/components'
 import defaultAvatar from '@liujitcn/kratos-taro-app-core/static/images/avatar.png'
 import {
   formatSrc,
+  getMpCapsuleRightGap,
   navigateAppRoute,
   navigateToLogin,
   useI18n,
   useSettingStore,
+  useThemeStore,
   useUserStore,
 } from '@liujitcn/kratos-taro-app-core'
-import Taro from '@tarojs/taro'
-import { useEffect } from 'react'
 import './my.scss'
 
 /** 个人中心首页。 */
 export default function MyPage() {
-  const { locale, t } = useI18n()
+  const { t } = useI18n()
+  const themeStore = useThemeStore()
   const profile = useUserStore((state) => state.userInfo)
   const isLoggedIn = useUserStore((state) => state.isAuthenticated())
   const ensureAuthenticated = useUserStore((state) => state.ensureAuthenticated)
   const aiEnabled = useSettingStore((state) => state.aiEnabled)
-
-  useEffect(() => {
-    void Taro.setNavigationBarTitle({ title: t('core.navigation.my') })
-  }, [locale, t])
+  const avatarText = (profile?.nick_name || 'U').slice(0, 1)
+  /** MP-WEIXIN 原生胶囊按钮右侧避让宽度，写入 --mp-capsule-gap 供 .k-top 预留空间。 */
+  const capsuleGap = getMpCapsuleRightGap()
+  const topNavStyle = { '--mp-capsule-gap': `${capsuleGap}px` } as CSSProperties
+  /** 设计稿齿轮线稿，随主题取色的 data URI，替代 CSS 手绘图标。 */
+  const gearIcon = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${
+      themeStore.theme === 'light' ? '#102232' : '#e9f4f6'
+    }" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8 2 2 0 1 1-2.8 2.8 1.6 1.6 0 0 0-2.7 1.1 2 2 0 1 1-4 0 1.6 1.6 0 0 0-2.6-1.1 2 2 0 1 1-2.8-2.8A1.6 1.6 0 0 0 3 13.9a2 2 0 1 1 0-4 1.6 1.6 0 0 0 1.5-2.7 2 2 0 1 1 2.8-2.8A1.6 1.6 0 0 0 10 4.6a2 2 0 1 1 4 0 1.6 1.6 0 0 0 2.7.6 2 2 0 1 1 2.8 2.8 1.6 1.6 0 0 0-.1 2.6"/></svg>`,
+  )}`
+  /** 个人卡账号行：登录展示账号，未登录提示去登录。 */
+  const accountText =
+    isLoggedIn && profile ? profile.user_name || profile.nick_name || '' : t('system.profile.login_prompt')
 
   const openAuthenticatedPage = (route: string) => {
     if (!ensureAuthenticated()) {
@@ -37,54 +47,57 @@ export default function MyPage() {
     <ScrollView
       enableBackToTop
       scrollY
-      className='my-viewport'
-      style={{ backgroundImage: `url(${centerBackground})` }}
+      className={`my-viewport${process.env.TARO_ENV === 'weapp' ? ' my-viewport--weapp' : ''} ${
+        themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'
+      }`}
     >
-      <View className={`my-profile${process.env.TARO_ENV === 'weapp' ? ' my-profile--weapp' : ''}`}>
-        {isLoggedIn && profile ? (
-          <View className='my-overview'>
-            <View onClick={() => navigateAppRoute('app/profile')}>
-              <Image
-                className='my-avatar'
-                src={profile.avatar ? formatSrc(profile.avatar) : defaultAvatar}
-                mode='aspectFill'
-              />
-            </View>
-            <View className='my-meta'>
-              <View className='my-nickname'>{profile.nick_name}</View>
-              <View className='my-extra' onClick={() => navigateAppRoute('app/profile')}>
-                <Text className='my-update'>{t('system.profile.avatar_update')}</Text>
+      <View className='my-content'>
+        <View className='k-top' style={topNavStyle}>
+          <View className='k-top__title'>{t('core.navigation.my')}</View>
+          <View className='k-ic' onClick={() => openAuthenticatedPage('app/settings')}>
+            <Image className='my-gear' src={gearIcon} mode='aspectFit' />
+          </View>
+        </View>
+
+        <View className='my-stack'>
+          <View
+            className='k-glass k-glass--lit k-pfx my-profile'
+            onClick={() => navigateAppRoute('app/profile')}
+          >
+            <View className='k-cnr k-cnr--tr' aria-hidden />
+            <View className='k-cnr k-cnr--bl' aria-hidden />
+            <View className='my-pfx-main'>
+              {isLoggedIn && profile ? (
+                <Image
+                  className='k-pfx__av'
+                  src={profile.avatar ? formatSrc(profile.avatar) : defaultAvatar}
+                  mode='aspectFill'
+                />
+              ) : (
+                <View className='k-pfx__av'>{avatarText}</View>
+              )}
+              <View className='my-pfx-meta'>
+                <View className='k-pfx__nm'>
+                  {isLoggedIn && profile ? profile.nick_name : t('system.profile.not_logged_in')}
+                </View>
+                <View className='k-pfx__ac'>{accountText}</View>
               </View>
             </View>
+            <View className='k-pfx__ent'>{t('system.profile.title')} ›</View>
           </View>
-        ) : (
-          <View className='my-overview'>
-            <View onClick={() => navigateToLogin()}>
-              <Image className='my-avatar my-avatar--gray' src={defaultAvatar} mode='aspectFill' />
-            </View>
-            <View className='my-meta'>
-              <View className='my-nickname' onClick={() => navigateToLogin()}>
-                {t('system.profile.not_logged_in')}
-              </View>
-              <View className='my-extra'>
-                <Text className='my-tips'>{t('system.profile.login_prompt')}</Text>
+
+          {aiEnabled ? (
+            <View className='k-aix' onClick={() => openAuthenticatedPage('app/ai')}>
+              <View className='k-aix__ic'>AI</View>
+              <View className='my-aix-copy'>
+                <View className='k-aix__t'>{t('system.settings.ai_title')}</View>
+                <View className='k-aix__d'>{t('system.settings.ai_description')}</View>
               </View>
+              <View className='k-aix__b'>{t('system.settings.go_ask')}</View>
             </View>
-          </View>
-        )}
-        <View className='my-settings' onClick={() => openAuthenticatedPage('app/settings')}>
-          {t('system.settings.title')}
+          ) : null}
         </View>
       </View>
-
-      {aiEnabled ? <View className='my-ai-entry' onClick={() => openAuthenticatedPage('app/ai')}>
-        <View className='my-ai-entry__icon'>AI</View>
-        <View className='my-ai-entry__content'>
-          <View className='my-ai-entry__title'>{t('system.settings.ai_title')}</View>
-          <View className='my-ai-entry__desc'>{t('system.settings.ai_description')}</View>
-        </View>
-        <View className='my-ai-entry__action'>{t('system.settings.go_ask')}</View>
-      </View> : null}
     </ScrollView>
   )
 }

package/src/views/pagesMember/ai/components/Composer.tsx

@@ -1,9 +1,12 @@
 import { Button, Text, Textarea, View } from '@tarojs/components'
 import { useMemo, useState } from 'react'
+import { t, useThemeStore } from '@liujitcn/kratos-taro-app-core'
 import { UniIcon } from '@liujitcn/kratos-taro-app-ui'
 import type { AiAttachment } 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 { fallbackModelDisplayName } from '../modelDisplay'
+import KnowledgePicker from './KnowledgePicker'
 import ModelPicker from './ModelPicker'
 import './composer.scss'
 
@@ -16,6 +19,9 @@ type ComposerProps = {
   /** 当前选中的供应商编号和模型名称。 */
   providerId: number
   modelName: string
+  /** 当前可供选择的知识库及已选择编号。 */
+  knowledgeOptions: AiKnowledgeOption[]
+  knowledgeIds: number[]
   /** 选择器未配置时显示的本地化占位文字。 */
   modelPlaceholder: string
   placeholder: string
@@ -29,11 +35,16 @@ type ComposerProps = {
   onSend: () => void
   onRemoveAttachment: (attachment: AiAttachment) => void
   onModelChange: (providerId: number, modelName: string) => void
+  onKnowledgeChange: (knowledgeIds: number[]) => void
 }
 
 /** AI 助手消息输入器。 */
 export default function Composer(props: ComposerProps) {
   const [showModelPicker, setShowModelPicker] = useState(false)
+  const [showKnowledgePicker, setShowKnowledgePicker] = useState(false)
+  const themeStore = useThemeStore()
+  const iconColor = themeStore.theme === 'light' ? '#5a7083' : '#8aa0b4'
+  const primaryIconColor = themeStore.theme === 'light' ? '#039e8c' : '#28f0d4'
 
   const selectedModelDisplayName = useMemo(() => {
     const provider = props.modelProviders.find((item) => item.provider_id === props.providerId)
@@ -53,6 +64,20 @@ export default function Composer(props: ComposerProps) {
     props.onModelChange(providerId, modelName)
   }
 
+  /** 打开可用知识库选择器。 */
+  const openKnowledgePicker = () => {
+    if (props.sending || !props.knowledgeOptions.length) return
+    setShowKnowledgePicker(true)
+  }
+
+  /** 切换知识库选择并通知页面。 */
+  const handleKnowledgeToggle = (knowledgeId: number) => {
+    const current = new Set(props.knowledgeIds)
+    if (current.has(knowledgeId)) current.delete(knowledgeId)
+    else current.add(knowledgeId)
+    props.onKnowledgeChange([...current])
+  }
+
   return (
     <View className='composer' style={{ paddingBottom: props.bottom }}>
       <View
@@ -65,9 +90,21 @@ export default function Composer(props: ComposerProps) {
         </Text>
         <Text className='composer-model-chip__chevron'>▾</Text>
       </View>
+      <View
+        className={`composer-model-chip${props.sending || !props.knowledgeOptions.length ? ' is-disabled' : ''}${props.knowledgeIds.length ? ' is-selected' : ''}`}
+        onClick={openKnowledgePicker}
+      >
+        <Text className='composer-model-chip__spark'>📚</Text>
+        <Text className='composer-model-chip__label'>
+          {props.knowledgeIds.length
+            ? t('system.ai.knowledge.selected_count', { count: props.knowledgeIds.length })
+            : t('system.ai.knowledge.title')}
+        </Text>
+        <Text className='composer-model-chip__chevron'>▾</Text>
+      </View>
       <View className='composer-main'>
         <Button className='attach-button' hoverClass='none' onClick={props.onAttach}>
-          <UniIcon type='plusempty' size={30} color='#111' />
+          <UniIcon type='plusempty' size={30} color={iconColor} />
         </Button>
         <View className='composer-card'>
           {props.attachments.length ? (
@@ -97,7 +134,7 @@ export default function Composer(props: ComposerProps) {
             hoverClass='none'
             onClick={props.onRecord}
           >
-            <UniIcon type='mic' size={28} color={props.recording ? '#00a96b' : '#111'} />
+            <UniIcon type='mic' size={28} color={props.recording ? primaryIconColor : iconColor} />
           </Button>
         </View>
         <Button
@@ -106,7 +143,11 @@ export default function Composer(props: ComposerProps) {
           hoverClass='none'
           onClick={props.onSend}
         >
-          <UniIcon type='paperplane' size={28} color={props.disabled ? '#111' : '#00a96b'} />
+          <UniIcon
+            type='paperplane'
+            size={28}
+            color={props.disabled ? iconColor : primaryIconColor}
+          />
         </Button>
       </View>
 
@@ -119,6 +160,14 @@ export default function Composer(props: ComposerProps) {
           onClose={() => setShowModelPicker(false)}
         />
       ) : null}
+      {showKnowledgePicker ? (
+        <KnowledgePicker
+          options={props.knowledgeOptions}
+          selectedIds={props.knowledgeIds}
+          onToggle={handleKnowledgeToggle}
+          onClose={() => setShowKnowledgePicker(false)}
+        />
+      ) : null}
     </View>
   )
 }

package/src/views/pagesMember/ai/components/KnowledgePicker.tsx

@@ -0,0 +1,58 @@
+import { ScrollView, Text, View } from '@tarojs/components'
+import { t } from '@liujitcn/kratos-taro-app-core'
+import type { AiKnowledgeOption } from '../../../../rpc/base/v1/ai_knowledge'
+import './knowledge-picker.scss'
+
+type KnowledgePickerProps = {
+  options: AiKnowledgeOption[]
+  selectedIds: number[]
+  onToggle: (knowledgeId: number) => void
+  onClose: () => void
+}
+
+/** AI 知识库多选底部弹层。 */
+export default function KnowledgePicker(props: KnowledgePickerProps) {
+  return (
+    <View className='knowledge-picker' catchMove>
+      <View className='knowledge-picker__mask' onClick={props.onClose} />
+      <View className='knowledge-picker__sheet'>
+        <View className='knowledge-picker__handle' />
+        <View className='knowledge-picker__head'>
+          <Text className='knowledge-picker__title'>{t('system.ai.knowledge.title')}</Text>
+          <Text className='knowledge-picker__count'>
+            {t('system.ai.knowledge.selected_count', { count: props.selectedIds.length })}
+          </Text>
+          <View className='knowledge-picker__close' onClick={props.onClose}>✕</View>
+        </View>
+        <Text className='knowledge-picker__hint'>{t('system.ai.knowledge.select_hint')}</Text>
+        <ScrollView className='knowledge-picker__body' scrollY>
+          {props.options.map((option) => {
+            const selected = props.selectedIds.includes(option.id)
+            return (
+              <View
+                key={option.id}
+                className={`knowledge-picker__row${selected ? ' is-selected' : ''}`}
+                onClick={() => props.onToggle(option.id)}
+              >
+                <View className='knowledge-picker__row-main'>
+                  <Text className='knowledge-picker__row-name'>{option.name}</Text>
+                  {option.doc_count ? (
+                    <Text className='knowledge-picker__row-meta'>
+                      {t('system.ai.knowledge.doc_count', { count: option.doc_count })}
+                    </Text>
+                  ) : null}
+                </View>
+                <View className={`knowledge-picker__check${selected ? ' is-checked' : ''}`}>
+                  {selected ? <Text>✓</Text> : null}
+                </View>
+              </View>
+            )
+          })}
+          {!props.options.length ? (
+            <View className='knowledge-picker__empty'>{t('system.ai.knowledge.empty')}</View>
+          ) : null}
+        </ScrollView>
+      </View>
+    </View>
+  )
+}

package/src/views/pagesMember/ai/components/SessionDrawer.tsx

@@ -1,6 +1,6 @@
 import { Button, Input, ScrollView, Text, View } from '@tarojs/components'
-import { More, Plus, Search } from '@liujitcn/kratos-taro-app-ui'
-import { t, useI18n } from '@liujitcn/kratos-taro-app-core'
+import { UniIcon } from '@liujitcn/kratos-taro-app-ui'
+import { t, useI18n, useThemeStore } from '@liujitcn/kratos-taro-app-core'
 import type { AiSession } from '../../../../rpc/base/v1/ai_session'
 import './session-drawer.scss'
 
@@ -39,6 +39,9 @@ function formatSessionTime(session: AiSession) {
 /** AI 助手历史会话抽屉。 */
 export default function SessionDrawer(props: SessionDrawerProps) {
   useI18n()
+  const themeStore = useThemeStore()
+  const primaryIconColor = themeStore.theme === 'light' ? '#039e8c' : '#28f0d4'
+  const mutedIconColor = themeStore.theme === 'light' ? '#5a7083' : '#8aa0b4'
   return (
     <>
       {props.open ? <View className='session-mask' onClick={props.onClose} /> : null}
@@ -49,12 +52,12 @@ export default function SessionDrawer(props: SessionDrawerProps) {
         <View className='session-drawer__head'>
           <View className='session-drawer__title'>{t('system.ai.history')}</View>
           <Button className='session-create' hoverClass='none' onClick={props.onCreate}>
-            <Plus size={16} color='#27ba9b' />
+            <UniIcon type='plusempty' size={16} color={primaryIconColor} />
             <Text>{t('common.action.new')}</Text>
           </Button>
         </View>
         <View className='session-search'>
-          <Search size={16} color='#898b94' />
+          <UniIcon type='search' size={16} color={mutedIconColor} />
           <Input
             className='session-search-input'
             confirmType='search'
@@ -88,7 +91,7 @@ export default function SessionDrawer(props: SessionDrawerProps) {
                   props.onAction(session)
                 }}
               >
-                <More size={22} color='#9ca3af' />
+                <UniIcon type='more' size={22} color={mutedIconColor} />
               </Button>
             </View>
           ))}

package/src/views/pagesMember/ai/components/WelcomePanel.tsx

@@ -1,6 +1,6 @@
 import { Button, Text, View } from '@tarojs/components'
-import { ArrowRight, Refresh } from '@liujitcn/kratos-taro-app-ui'
-import { t, useI18n } from '@liujitcn/kratos-taro-app-core'
+import { UniIcon } from '@liujitcn/kratos-taro-app-ui'
+import { t, useI18n, useThemeStore } from '@liujitcn/kratos-taro-app-core'
 import type { AiShortcut } from '../../../../rpc/base/v1/ai_tool'
 import './welcome-panel.scss'
 
@@ -16,6 +16,9 @@ type WelcomePanelProps = {
 /** AI 助手空会话欢迎面板。 */
 export default function WelcomePanel(props: WelcomePanelProps) {
   useI18n()
+  const themeStore = useThemeStore()
+  const primaryIconColor = themeStore.theme === 'light' ? '#039e8c' : '#28f0d4'
+  const mutedIconColor = themeStore.theme === 'light' ? '#9aabbb' : '#8aa0b4'
   return (
     <View className='welcome-panel'>
       <View className='welcome-row is-hello'>
@@ -46,7 +49,7 @@ export default function WelcomePanel(props: WelcomePanelProps) {
           </View>
           {props.canRefresh ? (
             <Button className='prompt-refresh' hoverClass='none' onClick={props.onRefresh}>
-              <Text>{t('system.ai.refresh')}</Text><Refresh size={25} color='#00a96b' />
+              <Text>{t('system.ai.refresh')}</Text><UniIcon type='refresh' size={25} color={primaryIconColor} />
             </Button>
           ) : null}
         </View>
@@ -67,7 +70,7 @@ export default function WelcomePanel(props: WelcomePanelProps) {
                   <Text className='prompt-text'>{shortcut.title}</Text>
                   <Text className='prompt-meta'>{shortcut.group || t('system.ai.general_assistant')}</Text>
                 </View>
-                <ArrowRight size={20} color='#9aa0aa' />
+                <UniIcon type='right' size={20} color={mutedIconColor} />
               </Button>
             ))
           : null}

package/src/views/pagesMember/ai/components/composer.scss

@@ -13,9 +13,10 @@
 .composer {
   flex-shrink: 0;
   width: 100%;
-  padding: 14px 24px 18px;
+  padding: 14px 24px calc(18px + env(safe-area-inset-bottom));
   overflow: hidden;
-  background-color: transparent;
+  background: var(--kratos-color-surface, #fff);
+  border-top: 1PX solid var(--kratos-color-border-accent, rgba(0, 150, 134, 0.28));
   box-sizing: border-box;
 }
 
@@ -27,11 +28,10 @@
   height: 56px;
   padding: 0 24px;
   margin: 0 8px 12px;
-  color: #1f2937;
-  background: #fff;
-  border: 2px solid #d6dae2;
+  color: var(--kratos-color-text, #102232);
+  background: var(--kratos-color-surface, #fff);
+  border: 1PX solid var(--kratos-color-border-accent, rgba(0, 150, 134, 0.28));
   border-radius: 28px;
-  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
   box-sizing: border-box;
 }
 
@@ -41,7 +41,7 @@
 
 .composer-model-chip__spark {
   flex-shrink: 0;
-  color: #00a96b;
+  color: var(--kratos-color-primary, #039e8c);
   font-size: 26px;
   line-height: 26px;
 }
@@ -59,7 +59,7 @@
 
 .composer-model-chip__chevron {
   flex-shrink: 0;
-  color: #8a8f99;
+  color: var(--kratos-color-text-muted, #5a7083);
   font-size: 22px;
   line-height: 22px;
 }
@@ -70,9 +70,9 @@
   gap: 16px;
   min-height: 124px;
   padding: 22px 18px;
+  border: 1PX solid var(--kratos-color-border, #e3eaf2);
   border-radius: 24px;
-  background-color: #fff;
-  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
+  background: var(--kratos-color-surface, #fff);
   box-sizing: border-box;
 }
 
@@ -83,9 +83,10 @@
   justify-content: center;
   width: 72px;
   height: 72px;
-  border: 2px solid #d6dae2;
+  border: 1PX solid var(--kratos-color-border, #e3eaf2);
   border-radius: 50%;
-  background-color: #fff;
+  background: var(--kratos-color-surface, #fff);
+  color: var(--kratos-color-text-muted, #5a7083);
   box-shadow: none;
   box-sizing: border-box;
 }
@@ -99,9 +100,9 @@
   gap: 10px;
   min-height: 72px;
   padding: 0 12px 0 28px;
-  border: 2px solid #d6dae2;
+  border: 1PX solid var(--kratos-color-border, #e3eaf2);
   border-radius: 38px;
-  background-color: #fff;
+  background: var(--kratos-color-surface-2, #eef4fa);
   box-shadow: none;
   box-sizing: border-box;
 }
@@ -120,11 +121,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 6px 12px;
+  border: 1PX solid var(--kratos-color-primary-edge, rgba(0, 150, 134, 0.3));
   border-radius: 8px;
-  color: #16806d;
+  color: var(--kratos-color-primary, #039e8c);
   font-size: 20px;
   line-height: 28px;
-  background-color: #e8f8f4;
+  background: var(--kratos-color-primary-soft, rgba(3, 158, 140, 0.08));
 }
 
 .composer-input {
@@ -134,14 +136,14 @@
   max-height: 126px;
   padding: 14px 0;
   box-sizing: border-box;
-  color: #333;
+  color: var(--kratos-color-text, #102232);
   font-size: 29px;
   line-height: 42px;
   overflow-y: auto;
-  background-color: transparent;
+  background: transparent;
 }
 
-.composer-placeholder { color: #8d929c; font-size: 29px; }
+.composer-placeholder { color: var(--kratos-color-text-dim, #9aabbb); font-size: 29px; }
 
 .voice-button,
 .send-button {
@@ -153,7 +155,10 @@
 }
 
 .voice-button { width: 60px; height: 60px; background-color: transparent; }
-.voice-button.active { background-color: #e8f8f4; }
-.send-button { width: 74px; height: 74px; background-color: #f2f2f2; }
-.send-button.is-disabled { background-color: #f2f2f2; }
-.send-button:not(.is-disabled) { background-color: #e7f7f2; }
+.voice-button.active { background: var(--kratos-color-primary-soft, rgba(3, 158, 140, 0.08)); }
+.send-button { width: 74px; height: 74px; background: var(--kratos-color-track, #e8eef5); }
+.send-button.is-disabled { background: var(--kratos-color-track, #e8eef5); }
+.send-button:not(.is-disabled) {
+  background: var(--kratos-color-primary-soft-2, rgba(3, 158, 140, 0.1));
+  border: 1PX solid var(--kratos-color-primary-edge, rgba(0, 150, 134, 0.3));
+}

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

@@ -0,0 +1,139 @@
+.knowledge-picker {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+}
+
+.knowledge-picker__mask {
+  position: absolute;
+  inset: 0;
+  background: var(--kratos-color-mask, rgba(2, 6, 12, 0.55));
+}
+
+.knowledge-picker__sheet {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  max-height: 62vh;
+  padding: 20px 40px calc(40px + env(safe-area-inset-bottom));
+  overflow: hidden;
+  background: var(--kratos-color-surface-solid, #070d18);
+  border-radius: 40px 40px 0 0;
+  box-sizing: border-box;
+}
+
+.knowledge-picker__handle {
+  flex-shrink: 0;
+  width: 72px;
+  height: 8px;
+  margin: 0 auto 20px;
+  background: var(--kratos-color-track, rgba(255, 255, 255, 0.06));
+  border-radius: 4px;
+}
+
+.knowledge-picker__head {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.knowledge-picker__title {
+  flex-shrink: 0;
+  color: var(--kratos-color-text, #e9f4f6);
+  font-size: 34px;
+  font-weight: 600;
+}
+
+.knowledge-picker__count {
+  flex: 1;
+  min-width: 0;
+  color: var(--kratos-color-text-muted, #8aa0b4);
+  font-size: 24px;
+}
+
+.knowledge-picker__close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  color: var(--kratos-color-text-muted, #8aa0b4);
+  font-size: 32px;
+}
+
+.knowledge-picker__hint {
+  flex-shrink: 0;
+  margin-top: 12px;
+  color: var(--kratos-color-text-muted, #8aa0b4);
+  font-size: 24px;
+}
+
+.knowledge-picker__body {
+  flex: 1;
+  min-height: 0;
+  margin-top: 20px;
+}
+
+.knowledge-picker__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  min-height: 92px;
+  padding: 24px 8px;
+  border-bottom: 1PX solid var(--kratos-color-border, #e3eaf2);
+  box-sizing: border-box;
+}
+
+.knowledge-picker__row-main {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.knowledge-picker__row-name {
+  overflow: hidden;
+  color: var(--kratos-color-text, #e9f4f6);
+  font-size: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.knowledge-picker__row-meta {
+  color: var(--kratos-color-text-muted, #8aa0b4);
+  font-size: 24px;
+}
+
+.knowledge-picker__check {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: 1PX solid var(--kratos-color-border, #d0d2d6);
+  border-radius: 50%;
+  color: var(--kratos-color-on-primary, #031513);
+  font-size: 26px;
+  box-sizing: border-box;
+}
+
+.knowledge-picker__check.is-checked {
+  background: var(--kratos-color-primary, #28f0d4);
+  border-color: var(--kratos-color-primary, #28f0d4);
+}
+
+.knowledge-picker__empty {
+  padding: 48px 0;
+  color: var(--kratos-color-text-muted, #8aa0b4);
+  font-size: 26px;
+  text-align: center;
+}