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

backend/app/providers/factory.py

@@ -22,6 +22,7 @@ class ProviderFactory:
         from contextlib import aclosing
         from uuid import uuid4
         from app.providers.context_budget import prepare_context
+        from app.services.persona_settings import apply_global_persona
         from app.providers.base import ProviderError
         from app.contracts import ModelEvent, ModelEventType
         from datetime import datetime, timezone
@@ -29,7 +30,7 @@ class ProviderFactory:
         async def complete_with_trace(request):
             token = usage_context.set({"request_id": uuid4().hex, "run_id": request.metadata.get("run_id")})
             try:
-                request = await prepare_context(request, config, complete)
+                request = await prepare_context(apply_global_persona(request), config, complete)
                 return await complete(request)
             finally:
                 usage_context.reset(token)
@@ -38,7 +39,7 @@ class ProviderFactory:
             token = usage_context.set({"request_id": uuid4().hex, "run_id": request.metadata.get("run_id")})
             try:
                 original = request
-                request = await prepare_context(request, config, complete, stream=True)
+                request = await prepare_context(apply_global_persona(request), config, complete, stream=True)
                 if request.messages != original.messages:
                     yield ModelEvent(event=ModelEventType.context_status, sequence=sequence, timestamp=datetime.now(timezone.utc), data={"message": "本次请求已压缩旧对话；原始记录保留，摘要生成计入用量。"})
                     sequence += 1

backend/app/routes.py

@@ -10,6 +10,7 @@ from fastapi.responses import StreamingResponse
 
 from app.agent import AgentCapacityError, AgentRunNotFoundError
 from app.container import container
+from app.services.persona_settings import PersonaSettings, load_persona, save_persona
 from app.contracts import (
     AgentRun,
     AgentRunCreateRequest,
@@ -102,6 +103,7 @@ from app.agent import AgentCapacityError, AgentRunNotFoundError
 from app.benchmarks import datasets as benchmark_datasets
 from app.benchmarks import service as benchmark_service
 from app.container import container
+from app.services.persona_settings import PersonaSettings, load_persona, save_persona
 from app.errors import ApiError
 from app.extensions import ExtensionError
 from app.extensions.mcp_registry import McpRegistryError
@@ -1469,3 +1471,15 @@ async def get_benchmark_report(run_id: str) -> BenchmarkReport:
             404, "BENCHMARK_RUN_NOT_FOUND", "benchmark report not found", {"run_id": run_id}
         )
     return report
+
+
+
+
+@router.get("/settings/persona", response_model=PersonaSettings, tags=["Settings"])
+async def get_global_persona():
+    return load_persona()
+
+
+@router.put("/settings/persona", response_model=PersonaSettings, tags=["Settings"])
+async def put_global_persona(request: PersonaSettings):
+    return save_persona(request)

backend/app/services/persona_settings.py

@@ -0,0 +1,65 @@
+"""One persistent persona for all configured chat/agent providers on this AI Core."""
+from contextlib import closing
+from pydantic import BaseModel, ConfigDict, Field
+from app.database.db import connect
+
+
+class DialoguePair(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+    user: str = Field(default="", max_length=8000)
+    assistant: str = Field(default="", max_length=8000)
+
+
+class PersonaSettings(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+    version: int = Field(default=0, ge=0)
+    name: str = Field(default="", max_length=128)
+    system_prompt: str = Field(default="", max_length=16000)
+    dialogue_pairs: list[DialoguePair] = Field(default_factory=list, max_length=20)
+
+
+def connection():
+    conn = connect()
+    conn.execute("CREATE TABLE IF NOT EXISTS global_persona (id INTEGER PRIMARY KEY CHECK(id=1), data TEXT NOT NULL)")
+    return conn
+
+
+def load_persona():
+    with closing(connection()) as conn:
+        row = conn.execute("SELECT data FROM global_persona WHERE id=1").fetchone()
+        return PersonaSettings.model_validate_json(row[0]) if row else PersonaSettings()
+
+
+def save_persona(settings):
+    from app.errors import ApiError
+    with closing(connection()) as conn:
+        conn.execute("BEGIN IMMEDIATE")
+        try:
+            row = conn.execute("SELECT data FROM global_persona WHERE id=1").fetchone()
+            current = PersonaSettings.model_validate_json(row[0]) if row else PersonaSettings()
+            if current.version != settings.version:
+                raise ApiError(409, "PERSONA_VERSION_CONFLICT", "全局人设已被修改，请重新打开表单后保存。")
+            updated = settings.model_copy(update={"version": current.version + 1})
+            conn.execute("INSERT OR REPLACE INTO global_persona(id,data) VALUES(1,?)", (updated.model_dump_json(),))
+            conn.commit()
+            return updated
+        except BaseException:
+            conn.rollback()
+            raise
+
+
+def apply_global_persona(request):
+    settings = load_persona()
+    parts = [request.system or ""]
+    if settings.system_prompt.strip():
+        parts.append("全局人设 / Global persona\n" + settings.system_prompt.strip())
+    examples = []
+    for pair in settings.dialogue_pairs:
+        lines = []
+        if pair.user.strip(): lines.append("User: " + pair.user.strip())
+        if pair.assistant.strip(): lines.append("Assistant: " + pair.assistant.strip())
+        if lines: examples.append("\n".join(lines))
+    if examples:
+        parts.append("预设对话示例 / Example dialogue\n" + "\n\n".join(examples))
+    system = "\n\n".join(part for part in parts if part.strip())
+    return request.model_copy(update={"system": system or None})

backend/tests/test_global_persona.py

@@ -0,0 +1,48 @@
+import asyncio
+import pytest
+from app.contracts import ModelRequest, Message, ProviderConfig
+from app.errors import ApiError
+from app.services.persona_settings import PersonaSettings, DialoguePair, save_persona, load_persona, apply_global_persona
+
+
+def request():
+    return ModelRequest(provider_id="p", model="test", system="任务要求", messages=[Message(role="user", content="hello")])
+
+
+def test_global_persona_persists_and_keeps_task_prompt():
+    save_persona(PersonaSettings(name="老师", system_prompt="耐心解释", dialogue_pairs=[DialoguePair(user="问题", assistant="回答"), DialoguePair()]))
+    assert load_persona().version == 1
+    original = request()
+    assembled = apply_global_persona(original)
+    assert assembled.system == "任务要求\n\n全局人设 / Global persona\n耐心解释\n\n预设对话示例 / Example dialogue\nUser: 问题\nAssistant: 回答"
+    assert original.system == "任务要求"
+    with pytest.raises(ApiError):
+        save_persona(PersonaSettings())
+
+
+def test_empty_persona_omits_all_global_sections():
+    save_persona(PersonaSettings(system_prompt="  ", dialogue_pairs=[DialoguePair(user=" ")]))
+    assert apply_global_persona(request()).system == "任务要求"
+
+
+def test_existing_provider_reads_latest_global_persona_for_complete_and_stream(monkeypatch):
+    from app.providers.factory import ProviderFactory
+    from app.providers.base import ProviderTurn
+    seen = []
+    class Adapter:
+        async def complete(self, req):
+            seen.append(req.system)
+            return ProviderTurn(text="ok")
+        async def stream(self, req):
+            seen.append(req.system)
+            if False: yield
+    factory = ProviderFactory(None)
+    monkeypatch.setattr(factory, "_build", lambda _: Adapter())
+    adapter = factory.build(ProviderConfig(provider_id="p",name="test",provider_type="openai_compatible"))
+    save_persona(PersonaSettings(system_prompt="全局人设"))
+    async def run():
+        await adapter.complete(request())
+        async for _ in adapter.stream(request()): pass
+    asyncio.run(run())
+    assert len(seen) == 2
+    assert all(text.count("全局人设 / Global persona") == 1 for text in seen)

docs/development/模型上下文管理.md

@@ -36,3 +36,10 @@ Provider 表单按精确模型 ID 保存 `context_policies`，包含窗口、输
 ## 验证范围
 
 离线测试覆盖预算触发、模型隔离、无副作用压缩、工具历史保护、单条输入超限、无效摘要、输出覆盖参数、流式错误事件以及配置校验。前端覆盖保存恢复与切换地址清理配置。没有调用用户的真实厂商账号进行收费验收。
+
+
+## 全局人设
+
+`GET /api/settings/persona` 和 `PUT /api/settings/persona` 管理此 AI Core 的唯一全局人设，保存在 SQLite 中。包含名称、系统提示词、结构化 user/assistant 对话对和乐观锁版本。设置页“通用”及聊天页均可打开同一表单。头像仍仅保存在本机浏览器。
+
+所有通过 ProviderFactory 创建的模型调用（普通对话与智能体、流式与非流式）在上下文预算检查前读取最新全局配置，将非空系统人设与对话示例追加到调用方原有系统提示词，保留 RAG 和任务约束。浏览器不再拼接本地人设，因此不会因更换浏览器丢失或重复注入。清空并保存后不再注入。厂商测试推理同样经过此边界；应用内部的历史摘要生成使用独立摘要提示词，避免人设干扰摘要格式。Mock 演示适配器不模拟真实系统提示词执行效果。

frontend/src/components/common/SecondarySidebar.spec.ts

@@ -4,6 +4,25 @@ import { mount } from '@vue/test-utils'
 import { createRouter, createMemoryHistory } from 'vue-router'
 import SecondarySidebar from './SecondarySidebar.vue'
 
+it('keeps conversation and file widths separate across route changes', async () => {
+  localStorage.setItem('chat-sidebar-width', '320')
+  localStorage.setItem('workspace-sidebar-width', '240')
+  const router = createRouter({ history: createMemoryHistory(), routes: [{ path: '/', component: { template: '<div />' } }] })
+  await router.push('/')
+  const wrapper = mount(SecondarySidebar, {props:{component:'conversation-list'}, global:{plugins:[router],stubs:{ConversationListPanel:true,FileTreePanel:true}}})
+  await wrapper.vm.$nextTick()
+  expect(wrapper.get('aside').attributes('style')).toContain('320px')
+  await wrapper.get('[role="separator"]').trigger('keydown', {key:'ArrowRight'})
+  expect(localStorage.getItem('chat-sidebar-width')).toBe('336')
+  await wrapper.setProps({component:'file-tree'})
+  expect(wrapper.get('aside').attributes('style')).toContain('240px')
+  await wrapper.setProps({component:'conversation-list'})
+  expect(wrapper.get('aside').attributes('style')).toContain('336px')
+  wrapper.unmount()
+  localStorage.removeItem('chat-sidebar-width')
+  localStorage.removeItem('workspace-sidebar-width')
+})
+
 it('resizes by keyboard, clamps bounds and restores the saved width', async () => {
   localStorage.removeItem('workspace-sidebar-width')
   const router = createRouter({ history: createMemoryHistory(), routes: [{ path: '/', component: { template: '<div />' } }] })

frontend/src/components/common/SecondarySidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import FileTreePanel from '@/features/workspace/FileTreePanel.vue'
 import ConversationListPanel from '@/features/chat/ConversationListPanel.vue'
 import RunListPanel from '@/features/agent/RunListPanel.vue'
@@ -16,10 +16,12 @@ const props = defineProps<{
 const route = useRoute()
 const routeName = computed(() => route.name as string)
 const sidebar = ref<HTMLElement | null>(null)
+const resizable = computed(() => ['file-tree', 'conversation-list'].includes(props.component ?? ''))
+const storageKey = computed(() => props.component === 'conversation-list' ? 'chat-sidebar-width' : 'workspace-sidebar-width')
 const width = ref(272)
 const maxWidth = ref(520)
 let dragging = false
-function saveWidth() { try { localStorage.setItem('workspace-sidebar-width', String(width.value)) } catch { /* Keep resizing available when storage is unavailable. */ } }
+function saveWidth() { try { localStorage.setItem(storageKey.value, String(width.value)) } catch { /* Keep resizing available when storage is unavailable. */ } }
 function clampWidth(value: number) { return Math.max(200, Math.min(maxWidth.value, value)) }
 function updateBounds() {
   maxWidth.value = Math.max(200, Math.min(520, window.innerWidth - (sidebar.value?.getBoundingClientRect().left ?? 0) - 320))
@@ -43,9 +45,14 @@ function resizeWithKeyboard(event: KeyboardEvent) {
   width.value = event.key === 'Home' ? 200 : event.key === 'End' ? maxWidth.value : clampWidth(width.value + (event.key === 'ArrowLeft' ? -16 : 16))
   saveWidth()
 }
-onMounted(() => {
+function restoreWidth() {
-  try { const saved = Number(localStorage.getItem('workspace-sidebar-width')); if (saved >= 200 && Number.isFinite(saved)) width.value = saved } catch { /* Use default width. */ }
+  width.value = 272
+  try { const saved = Number(localStorage.getItem(storageKey.value)); if (saved >= 200 && Number.isFinite(saved)) width.value = saved } catch { /* Use default width. */ }
   updateBounds()
+}
+watch(() => props.component, () => { dragging = false; restoreWidth() })
+onMounted(() => {
+  restoreWidth()
   window.addEventListener('resize', updateBounds)
 })
 onBeforeUnmount(() => { endResize(); window.removeEventListener('resize', updateBounds) })
@@ -66,7 +73,7 @@ const showSkillToggle = computed(() => routeName.value === 'skills' || routeName
 </script>
 
 <template>
-  <aside ref="sidebar" class="secondary-sidebar" :style="component === 'file-tree' ? { width: `${width}px` } : undefined">
+  <aside ref="sidebar" class="secondary-sidebar" :style="resizable ? { width: `${width}px` } : undefined">
     <div v-if="component !== 'file-tree'" class="sidebar-header">
       <h3 class="sidebar-title">{{ sidebarTitle }}</h3>
       <div v-if="showSkillToggle" class="sidebar-tabs">
@@ -82,7 +89,7 @@ const showSkillToggle = computed(() => routeName.value === 'skills' || routeName
       <TaskFiltersPanel v-else-if="component === 'task-filters'" />
       <ExtensionListPanel v-else-if="component === 'extension-list'" />
     </div>
-    <div v-if="component === 'file-tree'" class="sidebar-resizer" role="separator" aria-orientation="vertical" :aria-label="t('调整文件侧栏宽度', 'Resize file sidebar')" :aria-valuenow="width" :aria-valuemin="200" :aria-valuemax="maxWidth" tabindex="0" @pointerdown="beginResize" @pointermove="resize" @pointerup="endResize" @pointercancel="endResize" @lostpointercapture="endResize" @keydown="resizeWithKeyboard" @dblclick="width = clampWidth(272); saveWidth()" />
+    <div v-if="resizable" class="sidebar-resizer" role="separator" aria-orientation="vertical" :aria-label="t('调整侧栏宽度', 'Resize sidebar')" :aria-valuenow="width" :aria-valuemin="200" :aria-valuemax="maxWidth" tabindex="0" @pointerdown="beginResize" @pointermove="resize" @pointerup="endResize" @pointercancel="endResize" @lostpointercapture="endResize" @keydown="resizeWithKeyboard" @dblclick="width = clampWidth(272); saveWidth()" />
   </aside>
 </template>
 

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); }
 

frontend/src/features/settings/ProviderForm.spec.ts

@@ -33,6 +33,18 @@ beforeEach(() => {
 afterEach(() => { wrappers.splice(0).forEach(wrapper => wrapper.unmount()) })
 
 describe('ProviderForm', () => {
+  it('uses a top-layer dialog and restores the underlying scroll container', async () => {
+    const host = document.createElement('div')
+    host.style.overflow = 'auto'
+    document.body.appendChild(host)
+    const wrapper = mount(ProviderForm, {attachTo:host})
+    await flushPromises()
+    expect(wrapper.get('dialog').element.open).toBe(true)
+    expect(host.style.overflow).toBe('hidden')
+    wrapper.unmount()
+    expect(host.style.overflow).toBe('auto')
+    host.remove()
+  })
   it('saves model-scoped context settings and restores them on edit', async () => {
     const policy = {model:'old-model',context_window:65536,output_reserve:8192,threshold:0.8,mode:'detect' as const,prompt:'保留已确认事实'}
     const wrapper = await render({...existing,context_policies:[policy]})

frontend/src/features/settings/ProviderForm.vue

@@ -67,6 +67,8 @@ async function probeRequest() {
 }
 const contextChanged = ref(false)
 const dialog = ref<HTMLElement>()
+const backdrop = ref<HTMLDialogElement>()
+const scrollLocks: Array<{element: HTMLElement; overflow: string}> = []
 const previousFocus = document.activeElement as HTMLElement | null
 let active = true
 let credentialGeneration = 0
@@ -84,6 +86,11 @@ async function loadPresets() {
 }
 
 onMounted(async () => {
+  backdrop.value?.showModal()
+  for (let element = backdrop.value?.parentElement; element; element = element.parentElement) {
+    scrollLocks.push({element, overflow: element.style.overflow})
+    element.style.overflow = 'hidden'
+  }
   void loadPresets()
   if (props.provider?.credential_id) {
     const generation = credentialGeneration
@@ -134,6 +141,8 @@ function close() {
 }
 
 onBeforeUnmount(() => {
+  backdrop.value?.close()
+  for (const lock of scrollLocks) lock.element.style.overflow = lock.overflow
   active = false
   apiKey.value = ''
   previousFocus?.focus()
@@ -182,7 +191,7 @@ async function save() {
 </script>
 
 <template>
-  <div class="modal-backdrop provider-backdrop" @click.self="close" @keydown="handleKeydown">
+  <dialog ref="backdrop" class="provider-backdrop" @click.self="close" @keydown="handleKeydown" @cancel.prevent="close">
     <div ref="dialog" class="modal provider-modal" role="dialog" aria-modal="true" aria-labelledby="provider-form-title" :aria-busy="saving">
       <div class="form-heading"><h2 id="provider-form-title">{{ provider ? t('编辑 Provider', 'Edit Provider') : t('新增 Provider', 'Add Provider') }}</h2><button type="button" class="button-secondary" :aria-label="t('关闭提供商表单', 'Close provider form')" @click="close">{{ t('关闭', 'Close') }}</button></div>
       <p v-if="presetsLoading" class="subtle" role="status">{{ t('正在加载提供商预设…', 'Loading provider presets…') }}</p>
@@ -213,10 +222,14 @@ async function save() {
         <div class="inline-actions form-footer"><button class="button-primary" type="submit" :disabled="saving || credentialLoading">{{ saving ? t('保存中…', 'Saving…') : t('保存提供商', 'Save provider') }}</button><button type="button" class="button-secondary" @click="close">{{ t('取消', 'Cancel') }}</button></div>
       </form>
     </div>
-  </div>
+  </dialog>
 </template>
 
 <style scoped>
+.provider-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; box-sizing: border-box; background: transparent; overflow: hidden; overscroll-behavior: contain; }
+.provider-backdrop[open] { display: grid; place-items: center; }
+.provider-backdrop::backdrop { background: var(--color-background-overlay); }
+.provider-modal { overflow-y: auto; overscroll-behavior: contain; }
 .provider-modal { width: min(820px, 100%); max-height: 90dvh; }
 .form-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
 .form-heading h2 { margin: 0; }

frontend/src/features/settings/SettingsView.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import type { ProviderConfig } from '@/contracts'
 import ProviderForm from './ProviderForm.vue'
+import ChatPersonaDialog from '@/features/chat/ChatPersonaDialog.vue'
 import ProviderLogo from './ProviderLogo.vue'
 import ModelRoutingSettings from './ModelRoutingSettings.vue'
 import LocalModelSettings from './LocalModelSettings.vue'
@@ -17,6 +18,7 @@ const sections = computed<Array<{ id: Section; label: string }>>(() => [
   { id: 'index', label: t('索引与模型', 'Index and Models') }, { id: 'permissions', label: t('权限', 'Permissions') }, { id: 'ai-core', label: t('AI Core 诊断', 'AI Core Diagnostics') },
 ])
 const activeSection = ref<Section>('general')
+const showPersona = ref(false)
 const settingsStore = useSettingsStore()
 const providerStore = useProviderStore()
 const themeStore = useThemeStore()
@@ -75,6 +77,8 @@ async function chooseDefaultModel(provider: ProviderConfig, event: Event) {
     <header class="feature-header"><div><h1>{{ t('设置', 'Settings') }}</h1><p>{{ t('管理应用偏好、模型、索引、权限和本地 AI Core。', 'Manage application preferences, models, indexing, permissions, and the local AI Core.') }}</p></div></header>
     <nav class="settings-nav"><button v-for="section in sections" :key="section.id" :class="{ active: activeSection === section.id }" @click="activeSection = section.id">{{ section.label }}</button></nav>
 
+    <section v-if="activeSection === 'general'" class="panel settings-section"><div class="setting-row"><span><strong>{{ t('全局人设', 'Global persona') }}</strong><small>{{ t('统一设置所有 AI 对话和智能体的系统人设与对话示例', 'System persona and examples for all AI chats and agents') }}</small></span><button class="button-secondary" @click="showPersona = true">{{ t('编辑人设与头像', 'Edit persona and avatars') }}</button></div></section>
+    <ChatPersonaDialog v-if="showPersona" @close="showPersona = false" />
     <div v-if="activeSection === 'general'" class="panel settings-section"><h2>{{ t('通用', 'General') }}</h2><label class="setting-row"><span><strong>{{ t('恢复上次 Vault', 'Restore last Vault') }}</strong><small>{{ t('启动后自动打开最近使用的知识库', 'Open the most recently used knowledge base at startup') }}</small></span><input v-model="settingsStore.restoreLastVault" type="checkbox" /></label><div class="setting-row"><span><strong>{{ t('自动保存间隔', 'Autosave interval') }}</strong><small>{{ t('编辑停止后等待多久写入文件', 'How long to wait after editing before saving') }}</small></span><select v-model.number="settingsStore.autoSaveInterval" class="select short"><option :value="500">0.5 {{ t('秒', 'sec') }}</option><option :value="1500">1.5 {{ t('秒', 'sec') }}</option><option :value="3000">3 {{ t('秒', 'sec') }}</option></select></div><div class="setting-row"><span><strong>{{ t('界面语言', 'Interface language') }}</strong><small>{{ t('切换后立即应用到界面', 'Applied to the interface immediately') }}</small></span><select v-model="settingsStore.language" class="select short"><option value="zh-CN">简体中文</option><option value="en">English</option></select></div><div class="setting-row"><span><strong>{{ t('版本', 'Version') }}</strong><small>Desktop / AI Core</small></span><span>{{ settingsStore.appVersion }} / {{ settingsStore.aiCoreVersion }}</span></div></div>
 
     <div v-else-if="activeSection === 'editor'" class="panel settings-section"><h2>{{ t('编辑器', 'Editor') }}</h2><div class="setting-row"><span><strong>{{ t('默认模式', 'Default mode') }}</strong><small>{{ t('新打开文件使用的编辑器模式', 'Editor mode used for newly opened files') }}</small></span><select v-model="settingsStore.defaultEditorMode" class="select short"><option value="wysiwyg">{{ t('写作与预览', 'Writing and preview') }}</option><option value="source">{{ t('Markdown 源码', 'Markdown source') }}</option></select></div><div class="setting-row"><span><strong>{{ t('字号', 'Font size') }}</strong></span><input v-model.number="themeStore.fontEditorSize" class="input short" type="number" min="12" max="32" /></div><div class="setting-row"><span><strong>{{ t('行高', 'Line height') }}</strong></span><input v-model.number="themeStore.lineHeight" class="input short" type="number" min="1.2" max="2.4" step="0.1" /></div><div class="setting-row"><span><strong>{{ t('行宽', 'Line width') }}</strong><small>{{ t('Markdown 预览最大字符宽度', 'Maximum character width for Markdown preview') }}</small></span><input v-model.number="settingsStore.editorLineWidth" class="input short" type="number" min="40" max="140" /></div><label class="setting-row"><span><strong>{{ t('拼写检查', 'Spell check') }}</strong><small>{{ t('在写作与源码编辑器中使用系统拼写检查', 'Use system spell checking in visual and source editors') }}</small></span><input v-model="settingsStore.spellCheck" type="checkbox" /></label></div>

frontend/src/features/settings/UsageChart.spec.ts

@@ -21,7 +21,7 @@ it('distinguishes unreported tokens from zero and switches to request counts', a
 })
 
 
-it('stacks models inside the source column and keeps their shades distinct', () => {
+it('shades by consumed metric and gives equal usage equal shades', async () => {
   const models = [100, 200].map((count, index) => ({ key: `m${index}`, provider_id: 'p', model: `model-${index}`, requests: 1, totals: { input_tokens: count }, coverage: { input_tokens: 1 } }))
   const wrapper = mount(UsageChart, { props: { buckets: [{ date: '2026-09-05', end_date: '2026-09-05', local: { requests: 0, totals: {}, coverage: {} }, api: { requests: 2, totals: { input_tokens: 300 }, coverage: { input_tokens: 2 }, models } }] } })
   const segments = wrapper.findAll('.model-segment')
@@ -29,5 +29,11 @@ it('stacks models inside the source column and keeps their shades distinct', ()
   expect(segments[0]!.attributes('style')).not.toBe(segments[1]!.attributes('style'))
   expect(wrapper.get('.model-legend').text()).toContain('model-1')
   expect(segments[0]!.attributes('title')).toContain('100')
+  // happy-dom drops color-mix declarations; inspect the bound color values.
+  const colors = wrapper.vm as unknown as {modelColor:(key:string,source:'api') => string}
+  expect(colors.modelColor('m0','api')).toContain('67.5%')
+  expect(colors.modelColor('m1','api')).toContain('95%')
+  await wrapper.get('select').setValue('requests')
+  expect(colors.modelColor('m0','api')).toBe(colors.modelColor('m1','api'))
   wrapper.unmount()
 })

frontend/src/features/settings/UsageChart.vue

@@ -25,9 +25,13 @@ function value(bucket: UsageBucket, source: 'local' | 'api') {
   return metric.value === 'requests' ? item.requests : item.requests === 0 ? 0 : item.totals[metric.value] ?? null
 }
 const modelLegend = computed(() => sources.flatMap(source => {
-  const entries = new Map<string, ModelUsage>()
+  const entries = new Map<string, ModelUsage & { consumed: number }>()
-  for (const bucket of props.buckets) for (const item of bucket[source].models ?? []) entries.set(item.key, item)
+  for (const bucket of props.buckets) for (const item of bucket[source].models ?? []) {
-  return [...entries.values()].sort((a, b) => a.key.localeCompare(b.key)).map((item, index, all) => ({ ...item, source, shade: all.length === 1 ? 85 : 40 + index / (all.length - 1) * 55 }))
+    const previous = entries.get(item.key)
+    entries.set(item.key, {...item, consumed: (previous?.consumed ?? 0) + modelValue(item)})
+  }
+  const peak = Math.max(1, ...[...entries.values()].map(item => item.consumed))
+  return [...entries.values()].sort((a, b) => b.consumed - a.consumed || a.key.localeCompare(b.key)).map(item => ({ ...item, source, shade: 40 + item.consumed / peak * 55 }))
 }))
 function modelColor(key: string, source: 'local' | 'api') {
   const shade = modelLegend.value.find(item => item.key === key && item.source === source)?.shade ?? 85
@@ -76,6 +80,7 @@ const maximum = computed(() => Math.max(1, ...props.buckets.flatMap(bucket => so
       <div v-for="item in sums" :key="item.source" class="pie-value" :class="item.source"><AppIcon :icon="item.source === 'local' ? Cpu : Connection" :size="16" /><span>{{ labels[item.source] }}</span><strong>{{ item.coverage ? item.value.toLocaleString() : item.requests ? t('未提供', 'Unavailable') : '0' }} · {{ total ? (item.value / total * 100).toFixed(1) + '%' : '—' }}</strong><small>{{ t('覆盖', 'Coverage') }} {{ item.coverage }}/{{ item.requests }}</small></div>
       <p class="subtle">{{ t('占比仅基于已报告值；缺失指标不计入分母。', 'Shares use reported values only; missing counters are excluded.') }}</p>
     </aside></div>
+    <p v-if="modelLegend.length" class="subtle">{{ t('同一来源内，颜色越深表示所选时段该模型的累计消耗越多。', 'Within each source, darker shades indicate greater model usage over the selected period.') }}</p>
     <div class="model-legend"><span v-for="item in modelLegend" :key="`${item.source}:${item.key}`" :title="item.provider_id"><i :style="{ background: modelColor(item.key, item.source) }" />{{ item.model }}</span></div>
     <p class="subtle">{{ t('按本机时区分组；柱高仅汇总已报告值，悬停可查看覆盖请求数。虚线表示有请求但未提供该指标，不作为零消耗。', 'Grouped by your local UTC offset. Bars sum reported values; hover for coverage. Dashed markers mean requests with unavailable counters, not zero usage.') }}</p>
     <details class="ui-disclosure"><summary>{{ t('查看图表数据', 'View chart data') }}</summary><div class="chart-scroll"><table><thead><tr><th>{{ t('日期', 'Date') }}</th><th>{{ labels.local }}</th><th>{{ labels.api }}</th></tr></thead><tbody><tr v-for="bucket in buckets" :key="bucket.date"><th>{{ bucket.date }}<template v-if="bucket.date !== bucket.end_date"> – {{ bucket.end_date }}</template></th><td v-for="source in sources" :key="source">{{ description(bucket, source) }}</td></tr></tbody></table></div></details>

frontend/src/stores/chat.spec.ts

@@ -10,6 +10,7 @@ import {
 } from '@/services/chatService'
 import type { ChatMessage, Conversation } from '@/contracts'
 import type { SseClient } from '@/services/sseClient'
+import { useChatPreferences } from './chatPreferences'
 
 vi.mock('@/services/chatService', () => ({
   createConversation: vi.fn(),
@@ -63,6 +64,17 @@ it('sends persistent message ids and restores messages from the backend', async
   expect(store.messages[1]?.citations?.[0]?.heading_path).toBe('Heading')
 })
 
+it('leaves global persona assembly to the backend', async () => {
+  useChatPreferences().settings = {persona:'stale browser persona',presetDialogue:'old example',aiAvatar:'',userAvatar:''}
+  const store = useChatStore()
+  store.selectedProviderId = 'real'
+  store.selectedModel = 'configured-model'
+  await store.sendMessage('hello')
+  const request = vi.mocked(streamChat).mock.calls[0]![0]
+  expect(request).not.toHaveProperty('system')
+  expect(request).not.toHaveProperty('aiAvatar')
+})
+
 it('loads the newest persisted conversation on initialization', async () => {
   const conversation: Conversation = {
     conversation_id: 'persisted', title: 'Saved', created_at: '2026-01-01T00:00:00Z',

frontend/src/stores/chatPreferences.ts

@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface ChatPreferences { persona: string; presetDialogue: string; aiAvatar: string; userAvatar: string }
+const storageKey = 'chat-persona-preferences-v1'
+const empty = (): ChatPreferences => ({ persona: '', presetDialogue: '', aiAvatar: '', userAvatar: '' })
+export function validAvatar(value: unknown): value is string {
+  return typeof value === 'string' && (value === '' || (value.length <= 710000 && /^data:image\/(png|jpeg|webp);base64,[A-Za-z0-9+/=]+$/.test(value)))
+}
+function validate(value: ChatPreferences) {
+  if (typeof value.persona !== 'string' || typeof value.presetDialogue !== 'string' || value.persona.length > 16000 || value.presetDialogue.length > 32000 || !validAvatar(value.aiAvatar) || !validAvatar(value.userAvatar)) throw new Error('人设、预设对话或头像格式无效 / Invalid chat preferences')
+  return {persona:value.persona, presetDialogue:value.presetDialogue, aiAvatar:value.aiAvatar, userAvatar:value.userAvatar}
+}
+export const useChatPreferences = defineStore('chatPreferences', () => {
+  const settings = ref<ChatPreferences>(empty())
+  try { const stored = localStorage.getItem(storageKey); if (stored) settings.value = validate(JSON.parse(stored)) } catch { /* Invalid or unavailable local settings use defaults. */ }
+  function save(value: ChatPreferences) {
+    const next = validate(value)
+    localStorage.setItem(storageKey, JSON.stringify(next))
+    settings.value = next
+  }
+  return { settings, save }
+})