feat: 添加全局人设与头像设置并优化对话及弹窗交互

frontend/src/features/chat/ChatPersonaDialog.spec.ts

@@ -0,0 +1,46 @@
+// @vitest-environment happy-dom
+import { beforeEach, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import ChatPersonaDialog from './ChatPersonaDialog.vue'
+import { useChatPreferences } from '@/stores/chatPreferences'
+
+import { apiClient } from '@/services/apiClient'
+vi.mock('@/services/apiClient', () => ({apiClient:{get:vi.fn(),put:vi.fn()}}))
+beforeEach(() => { vi.mocked(apiClient.get).mockResolvedValue({version:0,name:'',system_prompt:'',dialogue_pairs:[]}); vi.mocked(apiClient.put).mockImplementation(async (_url, value) => ({...(value as object),version:1})); localStorage.removeItem('chat-persona-preferences-v1'); setActivePinia(createPinia()) })
+
+it('saves global prompt and structured dialogue pairs to the AI Core', async () => {
+  const wrapper = mount(ChatPersonaDialog)
+  await flushPromises()
+  await wrapper.get('.persona-prompt').setValue('耐心的老师')
+  await wrapper.findAll('button').find(b => b.text().includes('添加对话对'))!.trigger('click')
+  const inputs = wrapper.findAll('.dialogue-pairs textarea')
+  await inputs[0]!.setValue('你好')
+  await inputs[1]!.setValue('你好，我是老师')
+  await wrapper.get('form').trigger('submit')
+  await flushPromises()
+  expect(apiClient.put).toHaveBeenCalledWith('/api/settings/persona', expect.objectContaining({system_prompt:'耐心的老师',dialogue_pairs:[{user:'你好',assistant:'你好，我是老师'}]}))
+  expect(wrapper.emitted('close')).toHaveLength(1)
+  wrapper.unmount()
+})
+
+it('keeps unsaved edits out of active preferences', async () => {
+  const wrapper = mount(ChatPersonaDialog)
+  await flushPromises()
+  await wrapper.findAll('textarea')[0]!.setValue('未保存人设')
+  await wrapper.get('dialog').trigger('cancel')
+  expect(useChatPreferences().settings.persona).toBe('')
+  expect(wrapper.emitted('close')).toHaveLength(1)
+  wrapper.unmount()
+})
+
+it('persists separate local avatars and rejects remote avatar URLs', () => {
+  const preferences = useChatPreferences()
+  const aiAvatar = 'data:image/png;base64,aGVsbG8='
+  const userAvatar = 'data:image/webp;base64,d29ybGQ='
+  preferences.save({...preferences.settings,aiAvatar,userAvatar})
+  setActivePinia(createPinia())
+  expect(useChatPreferences().settings).toMatchObject({aiAvatar,userAvatar})
+  expect(() => useChatPreferences().save({...preferences.settings,aiAvatar:'https://example.com/avatar.png'})).toThrow()
+  expect(useChatPreferences().settings.aiAvatar).toBe(aiAvatar)
+})

frontend/src/features/chat/ChatPersonaDialog.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, reactive, ref } from 'vue'
+import { useChatPreferences, validAvatar } from '@/stores/chatPreferences'
+import { t } from '@/i18n'
+import { apiClient } from '@/services/apiClient'
+interface GlobalPersona { version: number; name: string; system_prompt: string; dialogue_pairs: Array<{user:string;assistant:string}> }
+const emit = defineEmits<{ close: [] }>()
+const preferences = useChatPreferences()
+const draft = reactive({ ...preferences.settings })
+const error = ref('')
+const remote = reactive<GlobalPersona>({version:0,name:'',system_prompt:'',dialogue_pairs:[]})
+const ready = ref(false)
+const saving = ref(false)
+const loading = ref(0)
+const dialog = ref<HTMLDialogElement>()
+const previousFocus = document.activeElement as HTMLElement | null
+let active = true
+const generations = { aiAvatar: 0, userAvatar: 0 }
+async function loadGlobal() {
+  error.value = ''; ready.value = false
+  try { const result = await apiClient.get<GlobalPersona>('/api/settings/persona'); if (active) { Object.assign(remote,result); ready.value = true } }
+  catch { if (active) error.value = t('无法加载全局人设，请重试。', 'Could not load global persona. Retry.') }
+}
+onMounted(() => { dialog.value?.showModal(); void loadGlobal() })
+onBeforeUnmount(() => { active = false; dialog.value?.close(); previousFocus?.focus() })
+async function chooseAvatar(event: Event, field: 'aiAvatar' | 'userAvatar') {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (!file) return
+  const generation = ++generations[field]
+  error.value = ''
+  if (!['image/png','image/jpeg','image/webp'].includes(file.type) || file.size > 512 * 1024) {
+    error.value = t('请选择不超过 512 KB 的 PNG、JPEG 或 WebP 图片。', 'Choose a PNG, JPEG or WebP image up to 512 KB.'); return
+  }
+  loading.value++
+  try {
+    const data = await new Promise<string>((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(String(reader.result)); reader.onerror = () => reject(new Error('read')); reader.readAsDataURL(file) })
+    if (!validAvatar(data)) throw new Error('format')
+    const image = new Image()
+    image.src = data
+    await image.decode()
+    if (active && generation === generations[field]) draft[field] = data
+  } catch { if (active && generation === generations[field]) error.value = t('图片无法读取，请重新选择。', 'Could not read the image. Choose another file.') }
+  finally { loading.value-- }
+}
+function clearAvatar(field: 'aiAvatar' | 'userAvatar') { generations[field]++; draft[field] = '' }
+async function save() {
+  if (loading.value || saving.value || !ready.value) return
+  saving.value = true; error.value = ''
+  try {
+    const updated = await apiClient.put<GlobalPersona>('/api/settings/persona', JSON.parse(JSON.stringify(remote)))
+    Object.assign(remote, updated)
+    if (!active) return
+    try { preferences.save({...draft,persona:'',presetDialogue:''}) }
+    catch { error.value = t('全局人设已保存，但本机头像存储失败，请缩小图片后重试。', 'Global persona saved, but local avatars could not be saved. Reduce image sizes and retry.'); return }
+    emit('close')
+  } catch (reason) { if (active) error.value = reason instanceof Error ? reason.message : t('全局人设保存失败。', 'Could not save global persona.') }
+  finally { saving.value = false }
+}
+</script>
+
+<template>
+  <dialog ref="dialog" class="modal persona-dialog" aria-labelledby="persona-title" @cancel.prevent="emit('close')" @click="($event.target === dialog) && emit('close')">
+    <form @submit.prevent="save">
+      <div class="persona-heading"><h2 id="persona-title">{{ t('人设与头像', 'Persona and avatars') }}</h2><button type="button" class="button-secondary" @click="emit('close')">{{ t('关闭', 'Close') }}</button></div>
+      <p class="notice-banner">{{ t('全局人设 · 应用于连接此 AI Core 的所有对话与智能体。留空的提示词和对话示例不会拼入请求。', 'Global persona · Applies to all chats and agents connected to this AI Core. Empty prompts and examples are omitted.') }}</p>
+      <p v-if="!ready" role="status">{{ t('正在加载全局设置', 'Loading global settings') }} <button type="button" class="button-secondary" @click="loadGlobal">{{ t('重试', 'Retry') }}</button></p>
+      <fieldset :disabled="!ready || saving" class="persona-columns">
+        <div class="persona-primary">
+          <label class="field"><span>{{ t('人设名称', 'Persona name') }}</span><input v-model="remote.name" class="input" maxlength="128" :placeholder="t('例如：知识助理', 'For example: Knowledge assistant')" /></label>
+          <label class="field"><span>{{ t('全局系统提示词', 'Global system prompt') }}</span><textarea v-model="remote.system_prompt" class="textarea persona-prompt" maxlength="16000" :placeholder="t('描述 AI 的身份、语气及回答要求；留空则不添加', 'Identity, tone and response requirements; leave blank to omit')" /></label>
+        </div>
+        <div class="persona-secondary">
+          <details open class="ui-disclosure"><summary>{{ t('预设对话', 'Example dialogue') }}</summary>
+            <div class="dialogue-pairs">
+              <p class="subtle">{{ t('用成对对话示范回答风格，作为全局系统提示词的一部分。', 'Use dialogue pairs to demonstrate response style as part of the global system prompt.') }}</p>
+              <article v-for="(pair,index) in remote.dialogue_pairs" :key="index" class="item-card">
+                <label class="field"><span>{{ t('我', 'Me') }}</span><textarea v-model="pair.user" class="textarea" maxlength="8000" rows="2" /></label>
+                <label class="field"><span>AI</span><textarea v-model="pair.assistant" class="textarea" maxlength="8000" rows="2" /></label>
+                <button type="button" class="button-secondary" @click="remote.dialogue_pairs.splice(index,1)">{{ t('删除对话对', 'Remove pair') }}</button>
+              </article>
+              <button type="button" class="button-secondary" :disabled="remote.dialogue_pairs.length >= 20" @click="remote.dialogue_pairs.push({user:'',assistant:''})">＋ {{ t('添加对话对', 'Add dialogue pair') }}</button>
+            </div>
+          </details>
+          <h3>{{ t('本机头像', 'Local avatars') }}</h3>
+      <div class="persona-avatars">
+        <div v-for="field in (['aiAvatar', 'userAvatar'] as const)" :key="field" class="item-card avatar-setting">
+          <strong>{{ field === 'aiAvatar' ? t('AI 头像', 'AI avatar') : t('我的头像', 'My avatar') }}</strong>
+          <img v-if="draft[field]" :src="draft[field]" :alt="field === 'aiAvatar' ? 'AI' : t('我', 'Me')" /><span v-else class="avatar-placeholder">{{ field === 'aiAvatar' ? 'AI' : t('我', 'Me') }}</span>
+          <label class="button-secondary avatar-upload">{{ t('选择图片', 'Choose image') }}<input type="file" accept="image/png,image/jpeg,image/webp" :aria-label="field === 'aiAvatar' ? t('选择 AI 头像', 'Choose AI avatar') : t('选择我的头像', 'Choose my avatar')" @change="chooseAvatar($event, field)" /></label>
+          <button type="button" class="button-secondary" @click="clearAvatar(field)">{{ t('恢复默认', 'Reset') }}</button>
+        </div>
+      </div>
+        </div>
+      </fieldset>
+      <p v-if="error" class="error-banner" role="alert">{{ error }}</p>
+      <div class="inline-actions persona-footer"><button class="button-primary" :disabled="loading > 0 || !ready || saving">{{ saving ? t('保存中…', 'Saving…') : loading ? t('读取图片中…', 'Reading image…') : t('保存', 'Save') }}</button><button type="button" class="button-secondary" @click="emit('close')">{{ t('取消', 'Cancel') }}</button></div>
+    </form>
+  </dialog>
+</template>
+
+<style scoped>
+.persona-dialog { width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-sizing: border-box; margin: auto; overflow: auto; color: var(--color-text-primary); background: var(--color-surface-primary); }
+.persona-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; border: 0; margin: 0; padding: 0; min-width: 0; }
+.persona-primary, .persona-secondary { min-width: 0; }
+.persona-prompt { min-height: 420px; }
+.dialogue-pairs { padding: 12px; display: grid; gap: 12px; max-height: 480px; overflow: auto; }
+.persona-footer { position: sticky; bottom: -24px; padding: 16px 0; background: var(--color-surface-primary); justify-content: flex-end; border-top: 1px solid var(--color-border-default); }
+@media (max-width: 760px) { .persona-columns { grid-template-columns: 1fr; } .persona-prompt { min-height: 240px; } }
+.persona-dialog::backdrop { background: var(--color-background-overlay); }
+.persona-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.persona-dialog .field { margin-block: 16px; }
+.persona-avatars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 16px; }
+.avatar-setting { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
+.avatar-setting strong { width: 100%; }
+.avatar-setting img, .avatar-placeholder { width: 48px; height: 48px; border-radius: var(--radius-full); object-fit: cover; background: var(--color-accent-soft); display: grid; place-items: center; }
+.avatar-upload { position: relative; overflow: hidden; cursor: pointer; }
+.avatar-upload input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
+.avatar-upload:focus-within { outline: 2px solid var(--color-border-focus); }
+@media (max-width: 520px) { .persona-avatars { grid-template-columns: 1fr; } }
+</style>

frontend/src/features/chat/ChatView.spec.ts

@@ -29,12 +29,23 @@ beforeEach(() => {
   vi.spyOn(useSkillStore(), 'loadSkills').mockResolvedValue(undefined)
 })
 
+it('reuses the settings model cache and renders the shared select style', async () => {
+  const providers = useProviderStore()
+  providers.modelsByProvider.a = [{model_id:'a-default',name:'A model',capabilities:{chat:true}}]
+  const wrapper = mount(ChatView)
+  await flushPromises()
+  expect(providers.loadModels).not.toHaveBeenCalled()
+  expect(wrapper.get('select#chat-model-select').classes()).toContain('select')
+  expect(wrapper.get('select#chat-model-select').text()).toContain('A model')
+  wrapper.unmount()
+})
+
 it('preserves the selected provider and manual model after leaving and returning to chat', async () => {
   const chat = useChatStore()
   const first = mount(ChatView)
   await flushPromises()
   await first.get('select').setValue('b')
-  await first.get('input[list="chat-models"]').setValue('b-manual')
+  await first.get('input[data-field="manual-model"]').setValue('b-manual')
   first.unmount()
   const returned = mount(ChatView)
   await flushPromises()

frontend/src/features/chat/ChatView.vue

@@ -7,8 +7,12 @@ import { useSkillStore } from '@/stores/skill'
 import MarkdownContent from '@/components/common/MarkdownContent.vue'
 import { useCitationNavigation } from '@/composables/useCitationNavigation'
 import { t } from '@/i18n'
+import ChatPersonaDialog from './ChatPersonaDialog.vue'
+import { useChatPreferences } from '@/stores/chatPreferences'
 
 const chatStore = useChatStore()
+const preferences = useChatPreferences()
+const showPersona = ref(false)
 const providerStore = useProviderStore()
 const skillStore = useSkillStore()
 const { openCitation } = useCitationNavigation()
@@ -36,7 +40,7 @@ onMounted(async () => {
 
 async function refreshModels(providerId: string) {
   loadError.value = ''
-  if (!providerId) return
+  if (!providerId || providerStore.modelsByProvider[providerId] !== undefined) return
   try { await providerStore.loadModels(providerId) }
   catch (error) { if (!disposed && chatStore.selectedProviderId === providerId) loadError.value = error instanceof Error ? error.message : t('模型列表加载失败，请手动填写模型 ID。', 'Unable to load models. Enter a model ID manually.') }
 }
@@ -69,7 +73,14 @@ async function openCitationCard(citation: Citation) {
       <div class="field compact"><label>Provider</label><select v-model="chatStore.selectedProviderId" class="select">
         <option v-for="provider in providerStore.enabledProviders" :key="provider.provider_id" :value="provider.provider_id">{{ provider.name }}</option>
       </select></div>
-      <div class="field compact"><label>{{ t('模型 ID', 'Model ID') }}</label><input v-model="chatStore.selectedModel" class="input" list="chat-models" :placeholder="t('填写模型 ID', 'Enter model ID')" /><datalist id="chat-models"><option v-for="model in availableModels" :key="model.model_id" :value="model.model_id">{{ model.name }}</option></datalist></div>
+      <div class="field compact"><label for="chat-model-select">{{ t('模型 ID', 'Model ID') }}</label>
+        <select v-if="availableModels.length" id="chat-model-select" v-model="chatStore.selectedModel" class="select">
+          <option v-if="!availableModels.some(m => m.model_id === chatStore.selectedModel)" :value="chatStore.selectedModel">{{ chatStore.selectedModel || t('选择模型', 'Select model') }}</option>
+          <option v-for="model in availableModels" :key="model.model_id" :value="model.model_id">{{ model.name }}</option>
+        </select>
+        <input v-else id="chat-model-select" v-model="chatStore.selectedModel" class="input" data-field="manual-model" :placeholder="t('填写模型 ID', 'Enter model ID')" />
+      </div>
+      <button type="button" class="button-secondary" @click="showPersona = true">{{ t('人设与头像', 'Persona and avatars') }}</button>
       <label class="rag-toggle"><input v-model="chatStore.useRag" type="checkbox" :disabled="chatStore.isStreaming" />{{ t('检索知识库', 'Search knowledge base') }}</label>
       <span class="subtle">{{ t('开启后，将相关笔记片段发送给所选模型，并显示来源。技能调用请使用智能体。', 'When enabled, relevant note excerpts are sent to the selected model and citations are shown. Use Agent for skills.') }}</span>
     </header>
@@ -78,9 +89,9 @@ async function openCitationCard(citation: Citation) {
     <main class="message-timeline">
       <div v-if="!chatStore.messages.length" class="empty-state"><div><strong>{{ t('开始一段知识对话', 'Start a knowledge conversation') }}</strong><p>{{ t('请先配置模型提供商。聊天记录保存在本地数据库中。', 'Configure a model provider first. Messages are saved in the local database.') }}</p></div></div>
       <article v-for="message in chatStore.messages" :key="message.message_id" class="message" :class="message.role">
-        <div class="avatar">{{ message.role === 'user' ? t('你', 'You') : 'AI' }}</div>
+        <div class="avatar"><img v-if="message.role === 'user' ? preferences.settings.userAvatar : preferences.settings.aiAvatar" :src="message.role === 'user' ? preferences.settings.userAvatar : preferences.settings.aiAvatar" :alt="message.role === 'user' ? t('我', 'Me') : 'AI'" /><span v-else>{{ message.role === 'user' ? t('你', 'You') : 'AI' }}</span></div>
         <div class="message-body">
-          <details v-if="message.thinking" class="thinking"><summary>{{ t('思考过程', 'Reasoning') }}</summary><p>{{ message.thinking }}</p></details>
+          <details v-if="message.thinking" class="thinking ui-disclosure"><summary>{{ t('思考过程', 'Reasoning') }}</summary><p>{{ message.thinking }}</p></details>
           <MarkdownContent v-if="message.content" class="message-content" :source="message.content" />
           <div v-else-if="chatStore.isStreaming" class="message-content">{{ t('正在思考…', 'Thinking…') }}</div>
           <div v-if="message.tool_calls?.length" class="tool-calls"><div v-for="call in message.tool_calls" :key="call.tool_call_id" class="item-card"><span class="badge info">{{ call.status }}</span><strong>{{ call.name }}</strong><pre>{{ JSON.stringify(call.parameters, null, 2) }}</pre></div></div>
@@ -102,17 +113,19 @@ async function openCitationCard(citation: Citation) {
         <button v-else class="button-primary" :disabled="!chatStore.canSend || !chatStore.inputText.trim() || !chatStore.selectedProviderId || !chatStore.selectedModel.trim()" @click="send">{{ t('发送', 'Send') }}</button>
       </div>
     </footer>
+    <ChatPersonaDialog v-if="showPersona" @close="showPersona = false" />
   </section>
 </template>
 
 <style scoped>
-.chat-page { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; min-height: 0; background: radial-gradient(circle at 85% -10%, var(--color-accent-soft), transparent 30%), var(--color-background-primary); }
+.chat-page { display: flex; flex-direction: column; height: 100%; min-height: 0; background: radial-gradient(circle at 85% -10%, var(--color-accent-soft), transparent 30%), var(--color-background-primary); }
 .chat-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-md); padding: var(--space-md) var(--space-xl); border-bottom: 1px solid var(--color-border-default); background: var(--color-surface-secondary); box-shadow: var(--shadow-sm); z-index: 1; }
 .compact { min-width: 160px; }
 .rag-toggle { display: flex; align-items: center; gap: var(--space-xs); min-height: 36px; color: var(--color-text-secondary); }
 .chat-error { margin: var(--space-md) var(--space-xl) 0; }
-.message-timeline { min-height: 0; overflow: auto; padding: var(--space-xl) max(var(--space-xl), calc((100% - 820px) / 2)); user-select: text; }
+.message-timeline { flex: 1; min-height: 0; overflow: auto; padding: var(--space-xl) max(var(--space-xl), calc((100% - 820px) / 2)); user-select: text; }
 .message { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-md); margin-bottom: var(--space-xl); animation: message-in var(--motion-normal) both; }
+.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
 .avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--color-border-default); border-radius: var(--radius-full); background: var(--color-background-tertiary); box-shadow: var(--shadow-sm); font-weight: 700; }
 .assistant .avatar { background: var(--color-accent-soft); color: var(--color-accent-primary); }
 .message-body { min-width: 0; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-border-subtle); border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg); background: color-mix(in srgb, var(--color-surface-primary) 88%, transparent); box-shadow: var(--shadow-sm); }
@@ -126,7 +139,7 @@ async function openCitationCard(citation: Citation) {
 .citation-card { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface-primary); text-align: left; transition: border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast); }
 .citation-card:hover { border-color: var(--color-accent-secondary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
 .citation-card small { display: block; margin-top: 2px; color: var(--color-text-secondary); }
-.composer { padding: var(--space-md) max(var(--space-xl), calc((100% - 820px) / 2)); border-top: 1px solid var(--color-border-default); background: var(--color-surface-secondary); box-shadow: 0 -8px 24px color-mix(in srgb, var(--color-text-primary) 5%, transparent); }
+.composer { flex-shrink: 0; padding: var(--space-md) max(var(--space-xl), calc((100% - 820px) / 2)); border-top: 1px solid var(--color-border-default); background: var(--color-surface-secondary); box-shadow: 0 -8px 24px color-mix(in srgb, var(--color-text-primary) 5%, transparent); }
 .composer .textarea { min-height: 72px; }
 .composer-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-sm); }