@liujitcn/kratos-uni-app-system 0.0.62 → 0.0.65

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

@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import type { AiAttachment } from '../../../../rpc/base/v1/ai_session'
+import type { AiProviderModelOption } from '../../../../rpc/base/v1/ai_provider'
+import { fallbackModelDisplayName } from '../modelDisplay'
+import ModelPicker from './ModelPicker.vue'
 
 type InputEventValue = {
   detail: {
@@ -7,9 +11,15 @@ type InputEventValue = {
   }
 }
 
-defineProps<{
+const props = defineProps<{
   modelValue: string
   attachments: AiAttachment[]
+  /** 当前可供选择的供应商与模型。 */
+  modelProviders: AiProviderModelOption[]
+  /** 当前选中的供应商编号和模型名称。 */
+  providerId: number
+  modelName: string
+  modelPlaceholder: string
   placeholder: string
   bottom: string
   recording: boolean
@@ -23,15 +33,45 @@ const emit = defineEmits<{
   record: []
   send: []
   'remove-attachment': [attachment: AiAttachment]
+  'model-change': [providerId: number, modelName: string]
 }>()
 
+const showModelPicker = ref(false)
+
+const selectedModelDisplayName = computed(() => {
+  const provider = props.modelProviders.find((item) => item.provider_id === props.providerId)
+  const matched = provider?.models.find((model) => model.model_name === props.modelName)
+  return matched?.display_name || fallbackModelDisplayName(props.modelName)
+})
+
 function handleInput(event: Event) {
   emit('update:modelValue', ((event as unknown as InputEventValue).detail?.value || '').toString())
 }
+
+function openModelPicker() {
+  if (props.sending || !props.modelProviders.length) {
+    return
+  }
+  showModelPicker.value = true
+}
+
+function handleModelSelect(providerId: number, modelName: string) {
+  showModelPicker.value = false
+  emit('model-change', providerId, modelName)
+}
 </script>
 
 <template>
   <view class="composer" :style="{ paddingBottom: bottom }">
+    <view
+      class="composer-model-chip"
+      :class="{ 'is-disabled': sending || !modelProviders.length }"
+      @tap="openModelPicker"
+    >
+      <text class="composer-model-chip__spark">✦</text>
+      <text class="composer-model-chip__label">{{ selectedModelDisplayName || modelPlaceholder }}</text>
+      <uni-icons type="down" size="12" color="#8a8f99" />
+    </view>
     <view class="composer-main">
       <button class="attach-button" hover-class="none" @tap="emit('attach')">
         <uni-icons type="plusempty" size="30" color="#111" />
@@ -75,6 +115,15 @@ function handleInput(event: Event) {
         <uni-icons type="paperplane" size="28" :color="disabled ? '#111' : '#00a96b'" />
       </button>
     </view>
+
+    <ModelPicker
+      v-if="showModelPicker"
+      :providers="modelProviders"
+      :provider-id="providerId"
+      :model-name="modelName"
+      @select="handleModelSelect"
+      @close="showModelPicker = false"
+    />
   </view>
 </template>
 
@@ -114,6 +163,44 @@ function handleInput(event: Event) {
   box-sizing: border-box;
 }
 
+.composer-model-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 10rpx;
+  max-width: 100%;
+  height: 56rpx;
+  padding: 0 24rpx;
+  margin: 0 8rpx 12rpx;
+  color: #1f2937;
+  background: #fff;
+  border: 2rpx solid #d6dae2;
+  border-radius: 28rpx;
+  box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.04);
+  box-sizing: border-box;
+}
+
+.composer-model-chip.is-disabled {
+  opacity: 0.55;
+}
+
+.composer-model-chip__spark {
+  flex-shrink: 0;
+  color: #00a96b;
+  font-size: 26rpx;
+  line-height: 26rpx;
+}
+
+.composer-model-chip__label {
+  max-width: 320rpx;
+  overflow: hidden;
+  color: inherit;
+  font-size: 24rpx;
+  font-weight: 500;
+  line-height: 34rpx;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .attach-button {
   flex-shrink: 0;
   display: flex;

package/src/views/pagesMember/ai/components/ModelPicker.vue

@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from '@liujitcn/kratos-uni-app-core'
+import type { AiProviderModelOption } from '../../../../rpc/base/v1/ai_provider'
+import { fallbackModelDisplayName } from '../modelDisplay'
+
+type PickerModel = {
+  name: string
+  displayName: string
+}
+
+type PickerProvider = {
+  providerId: number
+  label: string
+  models: PickerModel[]
+}
+
+const props = defineProps<{
+  providers: AiProviderModelOption[]
+  providerId: number
+  modelName: string
+}>()
+
+const emit = defineEmits<{
+  select: [providerId: number, modelName: string]
+  close: []
+}>()
+
+const { t } = useI18n()
+
+const pickerProviders = computed<PickerProvider[]>(() =>
+  props.providers.map((provider) => ({
+    providerId: provider.provider_id,
+    label: provider.name,
+    models: provider.models.map((model) => ({
+      name: model.model_name,
+      displayName: model.display_name || fallbackModelDisplayName(model.model_name),
+    })),
+  })),
+)
+
+const modelCount = computed(() =>
+  pickerProviders.value.reduce((total, provider) => total + provider.models.length, 0),
+)
+
+function isSelected(providerId: number, modelName: string) {
+  return props.providerId === providerId && props.modelName === modelName
+}
+
+function handleSelect(providerId: number, modelName: string) {
+  emit('select', providerId, modelName)
+}
+</script>
+
+<template>
+  <view class="model-picker">
+    <view class="model-picker__mask" @tap="emit('close')" />
+    <view class="model-picker__sheet">
+      <view class="model-picker__handle" />
+      <view class="model-picker__head">
+        <text class="model-picker__title">{{ t('system.ai.model.title') }}</text>
+        <text class="model-picker__count">{{
+          t('system.ai.model.provider_model_count', {
+            providers: pickerProviders.length,
+            models: modelCount,
+          })
+        }}</text>
+        <button class="model-picker__close" hover-class="none" @tap="emit('close')">✕</button>
+      </view>
+      <scroll-view class="model-picker__body" scroll-y :show-scrollbar="true">
+        <block v-for="provider in pickerProviders" :key="provider.providerId">
+          <view class="model-picker__group">{{ provider.label }}</view>
+          <view
+            v-for="model in provider.models"
+            :key="model.name"
+            class="model-picker__row"
+            :class="{ 'is-selected': isSelected(provider.providerId, model.name) }"
+            @tap="handleSelect(provider.providerId, model.name)"
+          >
+            <view class="model-picker__row-main">
+              <text class="model-picker__row-name">{{ model.displayName }}</text>
+              <text v-if="model.displayName !== model.name" class="model-picker__row-raw">{{
+                model.name
+              }}</text>
+            </view>
+            <text v-if="isSelected(provider.providerId, model.name)" class="model-picker__row-check"
+              >✓</text
+            >
+          </view>
+        </block>
+        <view v-if="!pickerProviders.length" class="model-picker__empty">{{
+          t('system.ai.model.empty')
+        }}</view>
+      </scroll-view>
+      <view class="model-picker__safe" />
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.model-picker {
+  position: fixed;
+  inset: 0;
+  /* 高于 KratosTabBar 的 z-index:999,避免弹层被底部导航遮挡 */
+  z-index: 1000;
+}
+
+.model-picker__mask {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(15, 23, 42, 0.45);
+}
+
+.model-picker__sheet {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  max-height: 68vh;
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 32rpx 32rpx 0 0;
+  box-shadow: 0 -24rpx 80rpx rgba(15, 23, 42, 0.16);
+  box-sizing: border-box;
+}
+
+.model-picker__handle {
+  flex-shrink: 0;
+  width: 72rpx;
+  height: 8rpx;
+  margin: 16rpx auto 8rpx;
+  background-color: #e2e5ea;
+  border-radius: 4rpx;
+}
+
+.model-picker__head {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 12rpx;
+  padding: 0 96rpx 16rpx;
+}
+
+.model-picker__title {
+  color: #111;
+  font-size: 32rpx;
+  font-weight: 600;
+}
+
+.model-picker__count {
+  color: #8a8f99;
+  font-size: 20rpx;
+}
+
+.model-picker__close {
+  position: absolute;
+  top: -6rpx;
+  right: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56rpx;
+  height: 56rpx;
+  padding: 0;
+  margin: 0;
+  color: #8a8f99;
+  font-size: 28rpx;
+  line-height: normal;
+  background: transparent;
+  border-radius: 0;
+}
+
+.model-picker__close::after {
+  border: 0;
+}
+
+.model-picker__body {
+  flex: 1;
+  min-height: 0;
+  max-height: calc(68vh - 130rpx - env(safe-area-inset-bottom));
+  padding: 0 32rpx;
+  box-sizing: border-box;
+}
+
+/* #ifdef H5 */
+.model-picker__body :deep(::-webkit-scrollbar) {
+  width: 8rpx;
+  height: 8rpx;
+}
+
+.model-picker__body :deep(::-webkit-scrollbar-thumb) {
+  background-color: #c9ced6;
+  border-radius: 4rpx;
+}
+
+.model-picker__body :deep(::-webkit-scrollbar-track) {
+  background-color: transparent;
+}
+/* #endif */
+
+.model-picker__group {
+  padding: 24rpx 8rpx 12rpx;
+  color: #8a8f99;
+  font-size: 22rpx;
+  line-height: 32rpx;
+}
+
+.model-picker__row {
+  display: flex;
+  align-items: center;
+  min-height: 88rpx;
+  padding: 16rpx 28rpx;
+  margin-bottom: 12rpx;
+  border: 2rpx solid #eef0f4;
+  border-radius: 24rpx;
+  box-sizing: border-box;
+}
+
+.model-picker__row.is-selected {
+  color: #0f7a62;
+  font-weight: 500;
+  background-color: #e8f8f4;
+  border-color: #d5efe7;
+}
+
+.model-picker__row-main {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+  min-width: 0;
+}
+
+.model-picker__row-name {
+  color: inherit;
+  font-size: 28rpx;
+  line-height: 40rpx;
+}
+
+.model-picker__row-raw {
+  color: #a7acb5;
+  font-size: 22rpx;
+  font-weight: 400;
+  line-height: 30rpx;
+}
+
+.model-picker__row-check {
+  margin-left: auto;
+  color: #00a96b;
+  font-size: 32rpx;
+}
+
+.model-picker__empty {
+  padding: 64rpx 0;
+  color: #8a8f99;
+  font-size: 26rpx;
+  text-align: center;
+}
+
+.model-picker__safe {
+  flex-shrink: 0;
+  height: calc(18rpx + constant(safe-area-inset-bottom));
+  height: calc(18rpx + env(safe-area-inset-bottom));
+}
+</style>

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

@@ -140,7 +140,8 @@ function formatSessionTime(session: AiSession) {
   right: 0;
   bottom: 0;
   left: 560rpx;
-  z-index: 20;
+  /* 高于 KratosTabBar 的 z-index:999,避免抽屉被底部导航遮挡 */
+  z-index: 1000;
   background-color: rgba(0, 0, 0, 0.18);
 }
 
@@ -151,7 +152,7 @@ function formatSessionTime(session: AiSession) {
   top: 0;
   left: 0;
   bottom: 0;
-  z-index: 21;
+  z-index: 1001;
   width: 560rpx;
   padding: 0 24rpx 36rpx;
   background-color: #fff;

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

@@ -7,13 +7,16 @@ import {
 } from '../../../api/base/v1/ai_message'
 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 type { AiMessage } from '../../../rpc/base/v1/ai_session'
 import type { AiAttachment, AiSession } from '../../../rpc/base/v1/ai_session'
+import type { AiProviderModelOption } from '../../../rpc/base/v1/ai_provider'
 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'
 import { uploadFile } from '@liujitcn/kratos-uni-app-core/utils/file'
 import { formatSrc } from '@liujitcn/kratos-uni-app-core/utils/index'
+import { isAuthExpiredError } from '@liujitcn/kratos-uni-app-core/utils/http'
 import Composer from './components/Composer.vue'
 import SessionDrawer from './components/SessionDrawer.vue'
 import WelcomePanel from './components/WelcomePanel.vue'
@@ -25,6 +28,8 @@ import {
   parseAiEventStreamText,
   readAiEventStream,
 } from './stream'
+import { resolveModelDisplayName } from './modelDisplay'
+import { loadStoredModelSelection, saveModelSelection } from './modelSelection'
 
 type ChatRole = 'user' | 'ai'
 
@@ -92,6 +97,9 @@ const chatBottomAnchor = ref('')
 const sessions = ref<AiSession[]>([])
 const messages = ref<Record<string, ChatMessageItem[]>>({})
 const selectedAttachments = ref<AiAttachment[]>([])
+const modelProviders = ref<AiProviderModelOption[]>([])
+const selectedProviderId = ref(0)
+const selectedModelName = ref('')
 const runningStreamTaskMap = new Map<string, StreamTask>()
 const pendingDeltaMap = new Map<string, AiStreamPayload>()
 let pendingDeltaTimer = 0
@@ -464,21 +472,54 @@ async function loadAiShortcuts() {
   }
   loadingShortcuts.value = true
   try {
-    const response = await defAiToolService.ListAiShortcut({
-      terminal: AI_TERMINAL,
-    })
+    const [response, providerResponse] = await Promise.all([
+      defAiToolService.ListAiShortcut({ terminal: AI_TERMINAL }),
+      defAiModelService.ListAiProviderModelOptions({}),
+    ])
+    modelProviders.value = providerResponse.providers ?? []
+    applyModelSelection()
     const shortcuts = normalizeStarterShortcuts(response.shortcuts).filter((item) => !item.action)
     if (shortcuts.length) {
       starterShortcuts.value = shortcuts
       starterPromptGroupIndex.value = 0
     }
   } catch (error) {
+    modelProviders.value = []
+    selectedProviderId.value = 0
+    selectedModelName.value = ''
     showError(error, t('system.ai.load_shortcuts_failed'))
   } finally {
     loadingShortcuts.value = false
   }
 }
 
+/** 优先恢复本地缓存的模型选择，缓存失效时回退到首个可用模型。 */
+function applyModelSelection() {
+  const stored = loadStoredModelSelection()
+  const provider = stored
+    ? modelProviders.value.find(
+        (item) =>
+          item.provider_id === stored.provider_id &&
+          item.models.some((model) => model.model_name === stored.model_name),
+      )
+    : undefined
+  if (provider && stored) {
+    selectedProviderId.value = provider.provider_id
+    selectedModelName.value = stored.model_name
+    return
+  }
+  const firstProvider = modelProviders.value[0]
+  selectedProviderId.value = firstProvider?.provider_id ?? 0
+  selectedModelName.value = firstProvider?.models[0]?.model_name ?? ''
+}
+
+/** 更新当前聊天使用的供应商和模型并持久化到本地缓存。 */
+function handleModelChange(providerId: number, modelName: string) {
+  selectedProviderId.value = providerId
+  selectedModelName.value = modelName
+  saveModelSelection({ provider_id: providerId, model_name: modelName })
+}
+
 async function sendAiPayload(payload: { text: string; attachments: AiAttachment[] }) {
   const sessionID = await ensureActiveSession()
   if (!sessionID || isSessionSending(sessionID)) {
@@ -507,6 +548,8 @@ async function runAiTask(
   const request = {
     session_id: sessionID,
     content: payload.text,
+    provider_id: selectedProviderId.value,
+    model_name: selectedModelName.value,
     attachments: payload.attachments,
     action: undefined,
   }
@@ -897,6 +940,7 @@ async function waitForMessagesLoaded(sessionID: string) {
 function normalizeSession(session?: Partial<AiSession> | null): AiSession {
   return {
     id: String(session?.id ?? ''),
+    tenant_id: Number(session?.tenant_id ?? 0),
     title: String(session?.title ?? t('system.ai.new_session')),
     summary: String(session?.summary ?? ''),
     updated_at: session?.updated_at,
@@ -989,6 +1033,7 @@ function createLocalUserMessage(payload: { text: string; attachments: AiAttachme
   const message = mapMessageItem(
     {
       id: `${LOCAL_USER_MESSAGE_PREFIX}-${now}`,
+      tenant_id: 0,
       input_content: { kind: 'text', content: payload.text },
       output_content: undefined,
       attachments: payload.attachments,
@@ -1017,6 +1062,7 @@ function createThinkingMessage(options?: { sessionID?: string; messageID?: strin
   const message = mapMessageItem(
     {
       id: streamKey || `ai-thinking-${now}`,
+      tenant_id: 0,
       input_content: undefined,
       output_content: {
         kind: 'text',
@@ -1184,12 +1230,16 @@ function formatAttachmentMeta(attachment: AiAttachment) {
 
 function formatTools(tools: AiToolCall[]) {
   return tools
-    .map((item) => item.title || item.name)
+    .map((item) =>
+      item.name === 'web_search' ? t('system.ai.web_search') : item.title || item.name,
+    )
     .filter(Boolean)
     .join(' · ')
 }
 
 function showError(error: unknown, fallback: string) {
+  // 登录态失效时请求层已弹窗引导重新登录，不再叠加失败提示。
+  if (isAuthExpiredError(error)) return
   const message = error instanceof Error ? error.message : fallback
   uni.showToast({ icon: 'none', title: message || fallback })
 }
@@ -1243,7 +1293,7 @@ function showError(error: unknown, fallback: string) {
           >
             <view v-if="item.role === 'ai' && item.model" class="reply-meta">
               <text class="reply-tag">{{ t('system.ai.model_reply') }}</text>
-              <text class="reply-model">{{ item.model }}</text>
+              <text class="reply-model">{{ resolveModelDisplayName(modelProviders, item.model) }}</text>
             </view>
             <view class="bubble-content">{{ item.content }}</view>
             <view v-if="item.attachments.length" class="attachment-list">
@@ -1279,6 +1329,10 @@ function showError(error: unknown, fallback: string) {
     <Composer
       v-model="inputText"
       :attachments="selectedAttachments"
+      :model-providers="modelProviders"
+      :provider-id="selectedProviderId"
+      :model-name="selectedModelName"
+      :model-placeholder="t('system.ai.model.model_placeholder')"
       :placeholder="composerPlaceholder"
       :bottom="composerBottom"
       :recording="isRecording"
@@ -1287,6 +1341,7 @@ function showError(error: unknown, fallback: string) {
       @attach="handleAttachment"
       @record="handleToggleRecord"
       @send="handleSend"
+      @model-change="handleModelChange"
       @remove-attachment="removeSelectedAttachment"
     />
 

package/src/views/pagesMember/ai/modelDisplay.ts

@@ -0,0 +1,77 @@
+import type { AiProviderModelOption } from '../../../rpc/base/v1/ai_provider'
+
+/** 常见模型的展示名映射；未命中时按通用规则美化原始名。 */
+const MODEL_DISPLAY_NAMES: Record<string, string> = {
+  'deepseek-chat': 'DeepSeek Chat',
+  'deepseek-reasoner': 'DeepSeek Reasoner',
+  'deepseek-v3': 'DeepSeek V3',
+  'deepseek-r1': 'DeepSeek R1',
+  'gpt-4o': 'GPT-4o',
+  'gpt-4o-mini': 'GPT-4o mini',
+  'gpt-4.1': 'GPT-4.1',
+  'gpt-4.1-mini': 'GPT-4.1 mini',
+  'gpt-4-turbo': 'GPT-4 Turbo',
+  'o3-mini': 'O3-mini',
+  'claude-3-5-sonnet': 'Claude 3.5 Sonnet',
+  'claude-3-7-sonnet': 'Claude 3.7 Sonnet',
+  'qwen-max': 'Qwen Max',
+  'qwen-plus': 'Qwen Plus',
+}
+
+/** 需要整体大写的模型名片段。 */
+const UPPERCASE_TOKENS = new Set([
+  'gpt',
+  'llama',
+  'qwen',
+  'glm',
+  'kimi',
+  'gemini',
+  'claude',
+  'doubao',
+  'deepseek',
+  'moonshot',
+  'hunyuan',
+])
+
+/** 对未配置展示名的模型名做通用美化。 */
+export function fallbackModelDisplayName(modelName: string): string {
+  if (!modelName) {
+    return ''
+  }
+  const mapped = MODEL_DISPLAY_NAMES[modelName.toLowerCase()]
+  if (mapped) {
+    return mapped
+  }
+  return modelName
+    .split(/[-_]/)
+    .filter(Boolean)
+    .map((token) => {
+      const lower = token.toLowerCase()
+      if (UPPERCASE_TOKENS.has(lower)) {
+        return lower.toUpperCase()
+      }
+      return lower.charAt(0).toUpperCase() + lower.slice(1)
+    })
+    .join(' ')
+}
+
+/** 从供应商模型选项中解析模型展示名称，兼容历史消息中「供应商 / 模型」格式的原始值。 */
+export function resolveModelDisplayName(
+  providers: AiProviderModelOption[] | undefined,
+  modelName: string,
+): string {
+  if (!modelName) {
+    return ''
+  }
+  const separator = ' / '
+  const modelPart = modelName.includes(separator)
+    ? modelName.slice(modelName.lastIndexOf(separator) + separator.length)
+    : modelName
+  for (const provider of providers ?? []) {
+    const matched = provider.models.find((item) => item.model_name === modelPart)
+    if (matched?.display_name) {
+      return matched.display_name
+    }
+  }
+  return fallbackModelDisplayName(modelPart)
+}

package/src/views/pagesMember/ai/modelSelection.ts

@@ -0,0 +1,38 @@
+/** 用户最近一次选择的供应商与模型，仅保存在设备本地。 */
+export interface AiModelSelection {
+  provider_id: number
+  model_name: string
+}
+
+const MODEL_SELECTION_STORAGE_KEY = 'kratos-uni-app:ai:model-selection'
+
+/** 读取本地缓存的模型选择，缓存缺失或损坏时返回 undefined。 */
+export function loadStoredModelSelection(): AiModelSelection | undefined {
+  try {
+    const raw = uni.getStorageSync(MODEL_SELECTION_STORAGE_KEY) as unknown
+    if (!raw) {
+      return undefined
+    }
+    const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw
+    const value = parsed as Partial<AiModelSelection>
+    if (
+      typeof value.provider_id === 'number' &&
+      typeof value.model_name === 'string' &&
+      value.model_name
+    ) {
+      return { provider_id: value.provider_id, model_name: value.model_name }
+    }
+  } catch {
+    // 缓存损坏或存储不可用时忽略，回退到默认选择。
+  }
+  return undefined
+}
+
+/** 持久化模型选择，存储不可用时静默失败，选择仍对当前会话生效。 */
+export function saveModelSelection(selection: AiModelSelection): void {
+  try {
+    uni.setStorageSync(MODEL_SELECTION_STORAGE_KEY, JSON.stringify(selection))
+  } catch {
+    // 忽略存储失败，不影响当前会话内的选择。
+  }
+}