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

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>()
-  for (const bucket of props.buckets) for (const item of bucket[source].models ?? []) entries.set(item.key, item)
-  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 entries = new Map<string, ModelUsage & { consumed: number }>()
+  for (const bucket of props.buckets) for (const item of bucket[source].models ?? []) {
+    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>