fix(frontend): 移除运行时演示数据并接入真实后端状态

frontend/src/features/agent/AgentView.vue

@@ -14,7 +14,7 @@ const providerStore = useProviderStore()
 const skillStore = useSkillStore()
 const pageError = ref('')
 const form = reactive({
-  input: '', provider_id: 'mock', model: 'mock-1', skill_id: '', max_steps: 10,
+  input: '', provider_id: '', model: '', skill_id: '', max_steps: 10,
   tool_timeout_seconds: 30, run_timeout_seconds: 300, token_budget: 8000,
   allow_network: false, max_concurrent_tools: 1, allowed_tools: [] as string[],
 })
@@ -25,7 +25,7 @@ const isNewRun = computed(() => !route.params.runId)
 onMounted(async () => {
   try {
     await Promise.all([providerStore.loadProviders(), skillStore.loadSkills(), agentStore.loadTools()])
-    await providerStore.loadModels(form.provider_id)
+    form.provider_id = providerStore.defaultProviderId
   } catch (error) { pageError.value = error instanceof Error ? error.message : '智能体配置加载失败' }
 })
 
@@ -35,7 +35,10 @@ watch(() => route.params.runId, async (runId) => {
 }, { immediate: true })
 
 watch(() => form.provider_id, async (providerId) => {
-  try { await providerStore.loadModels(providerId); form.model = models.value[0]?.model_id ?? '' } catch { /* page keeps current selection */ }
+  form.model = providerStore.providers.find(p => p.provider_id === providerId)?.default_model ?? ''
+  if (!providerId) return
+  try { await providerStore.loadModels(providerId) }
+  catch (error) { if (form.provider_id === providerId) pageError.value = error instanceof Error ? error.message : '模型列表加载失败，请手动填写模型 ID。' }
 })
 
 function toggleTool(name: string) {
@@ -47,6 +50,7 @@ function toggleTool(name: string) {
 async function createRun() {
   pageError.value = ''
   try {
+    if (!form.provider_id || !form.model.trim()) throw new Error('请选择提供商并填写模型 ID。')
     const run = await agentStore.createRun({
       input: form.input, provider_id: form.provider_id, model: form.model,
       skill_id: form.skill_id || undefined, allowed_tools: form.allowed_tools,
@@ -71,12 +75,12 @@ function eventText(event: AgentEvent) {
   <section class="feature-page agent-page">
     <header class="feature-header"><div><h1>{{ isNewRun ? '创建智能体运行' : '智能体执行轨迹' }}</h1><p>配置执行边界，并实时查看模型、工具和权限事件。</p></div>
       <button v-if="!isNewRun" class="button-secondary" @click="router.push({ name: 'agent' })">新建运行</button></header>
-    <div v-if="pageError || agentStore.error" class="error-banner">{{ pageError || agentStore.error }}</div>
+    <div v-if="pageError || agentStore.error || providerStore.error" class="error-banner">{{ pageError || agentStore.error || providerStore.error }}</div>
     <form v-if="isNewRun" class="panel run-form" @submit.prevent="createRun">
       <div class="field"><label>任务</label><textarea v-model="form.input" class="textarea" required placeholder="描述希望智能体完成的任务" /></div>
       <div class="form-grid">
         <div class="field"><label>模型提供商</label><select v-model="form.provider_id" class="select"><option v-for="p in providerStore.enabledProviders" :key="p.provider_id" :value="p.provider_id">{{ p.name }}</option></select></div>
-        <div class="field"><label>模型</label><select v-model="form.model" class="select"><option v-for="m in models" :key="m.model_id" :value="m.model_id">{{ m.name }}</option></select></div>
+        <div class="field"><label>模型</label><input v-model="form.model" class="input" list="agent-models" placeholder="填写模型 ID" required /><datalist id="agent-models"><option v-for="m in models" :key="m.model_id" :value="m.model_id">{{ m.name }}</option></datalist></div>
         <div class="field"><label>技能</label><select v-model="form.skill_id" class="select"><option value="">不使用技能</option><option v-for="s in skillStore.readySkills" :key="s.skill_id" :value="s.skill_id">{{ s.name }}</option></select></div>
         <div class="field"><label>最大步骤</label><input v-model.number="form.max_steps" class="input" type="number" min="1" max="100" /></div>
         <div class="field"><label>工具超时（秒）</label><input v-model.number="form.tool_timeout_seconds" class="input" type="number" min="1" /></div>
@@ -86,7 +90,7 @@ function eventText(event: AgentEvent) {
       </div>
       <div class="field"><label>允许使用的工具</label><div class="tool-grid"><label v-for="tool in agentStore.tools" :key="tool.name" class="tool-option"><input type="checkbox" :checked="form.allowed_tools.includes(tool.name)" @change="toggleTool(tool.name)" /><span><strong>{{ toolLabel(tool.name) }}</strong><code>{{ tool.name }}</code><small>{{ toolDescription(tool.name, tool.description) }}</small></span></label></div></div>
       <label class="network"><input v-model="form.allow_network" type="checkbox" /> 允许本次运行调用网络工具</label>
-      <div class="inline-actions"><button class="button-primary" :disabled="agentStore.isCreating || !form.input.trim()">{{ agentStore.isCreating ? '创建中…' : '创建并运行' }}</button></div>
+      <div class="inline-actions"><button class="button-primary" :disabled="agentStore.isCreating || !form.input.trim() || !form.provider_id || !form.model.trim()">{{ agentStore.isCreating ? '创建中…' : '创建并运行' }}</button></div>
     </form>
 
     <div v-else class="trace-layout">

frontend/src/features/chat/ChatView.vue

@@ -22,20 +22,18 @@ const availableModels = computed(() => providerStore.modelsByProvider[chatStore.
 onMounted(async () => {
   try {
     await Promise.all([providerStore.loadProviders(), skillStore.loadSkills()])
-    await providerStore.loadModels(chatStore.selectedProviderId)
+    chatStore.selectedProviderId = providerStore.defaultProviderId
   } catch (error) {
-    loadError.value = error instanceof Error ? error.message : '无法加载 AI 配置，当前展示本地数据。'
+    loadError.value = error instanceof Error ? error.message : '无法加载 AI 配置，请检查后端连接。'
   }
 })
 
 watch(() => chatStore.selectedProviderId, async (providerId) => {
-  try {
-    await providerStore.loadModels(providerId)
-    const firstModel = providerStore.modelsByProvider[providerId]?.[0]
-    if (firstModel) chatStore.selectedModel = firstModel.model_id
-  } catch (error) {
-    loadError.value = error instanceof Error ? error.message : '模型列表加载失败'
-  }
+  chatStore.selectedModel = providerStore.providers.find(p => p.provider_id === providerId)?.default_model ?? ''
+  loadError.value = ''
+  if (!providerId) return
+  try { await providerStore.loadModels(providerId) }
+  catch (error) { if (chatStore.selectedProviderId === providerId) loadError.value = error instanceof Error ? error.message : '模型列表加载失败，请手动填写模型 ID。' }
 })
 
 function send() { void chatStore.sendMessage(chatStore.inputText) }
@@ -54,17 +52,12 @@ async function openCitation(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>Model</label><select v-model="chatStore.selectedModel" class="select">
-        <option v-for="model in availableModels" :key="model.model_id" :value="model.model_id">{{ model.name }}</option>
-      </select></div>
-      <div class="field compact"><label>Skill</label><select v-model="chatStore.selectedSkillId" class="select">
-        <option :value="null">不使用 Skill</option><option v-for="skill in skillStore.enabledSkills" :key="skill.skill_id" :value="skill.skill_id">{{ skill.name }}</option>
-      </select></div>
-      <label class="rag-toggle"><input v-model="chatStore.useRag" type="checkbox" /> 使用知识库</label>
+      <div class="field compact"><label>模型 ID</label><input v-model="chatStore.selectedModel" class="input" list="chat-models" placeholder="填写模型 ID" /><datalist id="chat-models"><option v-for="model in availableModels" :key="model.model_id" :value="model.model_id">{{ model.name }}</option></datalist></div>
+      <span class="subtle">知识库问答与技能请使用智能体；普通聊天尚未接入这些能力。</span>
     </header>
-    <div v-if="loadError" class="error-banner chat-error">{{ loadError }}</div>
+    <div v-if="loadError || providerStore.error" class="error-banner chat-error">{{ loadError || providerStore.error }}</div>
     <main class="message-timeline">
-      <div v-if="!chatStore.messages.length" class="empty-state"><div><strong>开始一段知识对话</strong><p>可以直接提问，也可以打开 RAG 让模型基于当前 Vault 回答。</p></div></div>
+      <div v-if="!chatStore.messages.length" class="empty-state"><div><strong>开始一段知识对话</strong><p>请先配置模型提供商。聊天记录仅保留在本次页面会话中。</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' ? '你' : 'AI' }}</div>
         <div class="message-body">
@@ -78,7 +71,7 @@ async function openCitation(citation: Citation) {
             </button>
           </div>
           <time>{{ new Date(message.created_at).toLocaleTimeString() }}</time>
-          <small v-if="message.usage" class="usage">Token {{ message.usage.total_tokens }}（输入 {{ message.usage.input_tokens }} / 输出 {{ message.usage.output_tokens }}）</small>
+          <small v-if="message.usage" class="usage">Token {{ message.usage.total_tokens }}<span v-if="message.usage.input_tokens !== undefined && message.usage.output_tokens !== undefined">（输入 {{ message.usage.input_tokens }} / 输出 {{ message.usage.output_tokens }}）</span></small>
         </div>
       </article>
     </main>
@@ -87,7 +80,7 @@ async function openCitation(citation: Citation) {
         @keydown.ctrl.enter.prevent="send" />
       <div class="composer-actions"><span class="subtle">回答可能包含错误，请核对 Citation。</span>
         <button v-if="chatStore.isStreaming" class="button-danger" @click="chatStore.stopGeneration">停止</button>
-        <button v-else class="button-primary" :disabled="!chatStore.inputText.trim()" @click="send">发送</button>
+        <button v-else class="button-primary" :disabled="!chatStore.inputText.trim() || !chatStore.selectedProviderId || !chatStore.selectedModel.trim()" @click="send">发送</button>
       </div>
     </footer>
   </section>

frontend/src/features/plugins/PluginsView.vue

@@ -27,6 +27,7 @@ async function uninstall(id: string, name: string) { if (!confirm(`卸载“${na
       <div v-if="pluginStore.selectedPlugin.dependent_skills?.length" class="notice-banner last-error">依赖此插件的 Skill：{{ pluginStore.selectedPlugin.dependent_skills.join('、') }}</div>
       <PluginMcpPanel :plugin="pluginStore.selectedPlugin" />
     </div>
+    <div v-else-if="!pluginStore.plugins.length" class="empty-state"><div><strong>{{ pluginStore.isLoading ? '正在加载…' : pluginStore.error ? '加载失败' : '尚未安装' }}</strong><button class="button-secondary" @click="pluginStore.loadPlugins">重新加载</button></div></div>
     <div v-else class="feature-grid"><article v-for="plugin in pluginStore.plugins" :key="plugin.plugin_id" class="item-card extension-card" @click="pluginStore.selectPlugin(plugin.plugin_id)"><div class="extension-title"><AppIcon :icon="Connection" :size="22" /><div><strong>{{ plugin.name }}</strong><p>v{{ plugin.version }}</p></div><span class="badge" :class="{ success: plugin.status === 'ready', error: plugin.status === 'error', warning: plugin.status === 'permission_required' }">{{ plugin.status }}</span></div><p class="muted">{{ plugin.description }}</p><p class="subtle">{{ plugin.permissions.length }} 项权限 · {{ plugin.contributions.length }} 项 Contribution</p></article></div>
   </section>
 </template>

frontend/src/features/settings/ProviderForm.vue

@@ -109,7 +109,7 @@ async function save() {
   error.value = ''
   saving.value = true
   try {
-    if (!form.name.trim() || (form.provider_type !== 'mock' && !form.base_url.trim())) throw new Error('请填写名称和 Base URL。')
+    if (!form.name.trim() || !form.base_url.trim()) throw new Error('请填写名称和 Base URL。')
     if (selectedPreset.value?.requires_credential && !apiKey.value.trim() && !configured.value) throw new Error('请输入 API Key。密钥将由后端加密保存。')
     // Snapshot before awaiting: closing/unmounting must never create a provider with a changed draft.
     const data = { provider_type: form.provider_type, name: form.name.trim(), base_url: form.base_url.trim() || undefined, default_model: form.default_model.trim(), enabled: form.enabled, capabilities: {}, has_credential: false }
@@ -147,9 +147,9 @@ async function save() {
           <ProviderPresetSelector :presets="presets" :model-value="form.preset_id" @update:model-value="applyPreset" />
           <p v-if="selectedPreset?.description" class="subtle">{{ selectedPreset.description }}</p>
           <div class="form-grid">
-            <label class="field"><span>接入协议</span><select v-model="form.provider_type" class="select" data-field="protocol" @change="changeConnection"><option value="openai_compatible">OpenAI Compatible</option><option value="openai_chat">OpenAI Chat</option><option value="openai_responses">OpenAI Responses</option><option value="anthropic_messages">Anthropic Messages</option><option value="ollama">Ollama</option><option v-if="provider?.provider_type === 'mock'" value="mock">Mock</option></select></label>
+            <label class="field"><span>接入协议</span><select v-model="form.provider_type" class="select" data-field="protocol" @change="changeConnection"><option value="openai_compatible">OpenAI Compatible</option><option value="openai_chat">OpenAI Chat</option><option value="openai_responses">OpenAI Responses</option><option value="anthropic_messages">Anthropic Messages</option><option value="ollama">Ollama</option></select></label>
             <label class="field"><span>名称</span><input v-model="form.name" class="input" data-field="name" required /></label>
-            <label class="field wide"><span>Base URL</span><input v-model="form.base_url" class="input" data-field="base-url" placeholder="https://api.example.com/v1" :required="form.provider_type !== 'mock'" @change="changeConnection" /></label>
+            <label class="field wide"><span>Base URL</span><input v-model="form.base_url" class="input" data-field="base-url" placeholder="https://api.example.com/v1" required @change="changeConnection" /></label>
             <label class="field wide"><span>API Key</span><input v-model="apiKey" class="input" type="password" autocomplete="new-password" spellcheck="false" :placeholder="configured ? '已配置，留空表示不修改' : '请输入 API Key（无鉴权服务可留空）'" /><small class="subtle">密钥由本地 AI Core 加密保存；提供商配置仅保存独立的凭据引用。</small></label>
             <p v-if="credentialLoading" class="subtle wide" role="status">正在检查凭据状态…</p>
             <p v-if="credentialError" class="error-text wide" role="alert">{{ credentialError }}</p>

frontend/src/features/settings/SettingsView.vue

@@ -70,6 +70,7 @@ async function chooseDefaultModel(provider: ProviderConfig, event: Event) {
         <button class="button-primary" @click="openProvider()">新增 Provider</button>
       </div>
       <div v-if="providerStore.error || providerAction" class="error-banner">{{ providerStore.error || providerAction }}</div>
+      <p v-if="!providerStore.providers.length" class="subtle">{{ providerStore.isLoading ? '正在加载提供商…' : '尚无可用提供商，请添加真实 API 或本地 Ollama 配置。' }}</p>
       <div class="provider-list">
         <article v-for="provider in providerStore.providers" :key="provider.provider_id" class="item-card provider-card">
           <div class="provider-main">
@@ -91,17 +92,17 @@ async function chooseDefaultModel(provider: ProviderConfig, event: Event) {
             <button class="button-secondary" :disabled="providerStore.modelLoadingByProvider[provider.provider_id]" @click="refreshModels(provider)">{{ providerStore.modelLoadingByProvider[provider.provider_id] ? '获取中…' : '刷新模型' }}</button>
             <button class="button-secondary" @click="testProvider(provider)">测试</button>
             <button class="button-secondary" @click="openProvider(provider)">编辑</button>
-            <button class="button-danger" :disabled="provider.provider_id === 'mock'" @click="removeProvider(provider)">删除</button>
+            <button class="button-danger" @click="removeProvider(provider)">删除</button>
           </div>
         </article>
       </div>
     </div>
 
-    <div v-else-if="activeSection === 'index'" class="panel settings-section"><h2>索引与模型</h2><div class="index-summary"><div><span class="badge" :class="{ success: settingsStore.indexStatus.status === 'idle', error: settingsStore.indexStatus.status === 'error' }">{{ settingsStore.indexStatus.status }}</span><p>待处理任务 {{ settingsStore.indexStatus.pending_jobs }}</p></div><div><strong>{{ settingsStore.indexStatus.total_notes }}</strong><small>笔记</small></div><div><strong>{{ settingsStore.indexStatus.total_blocks }}</strong><small>Block</small></div></div><div v-if="settingsStore.indexStatus.error" class="error-banner">{{ settingsStore.indexStatus.error }}</div><div class="inline-actions"><button class="button-primary" @click="settingsStore.rebuildIndex('full')">重建全部</button><button class="button-secondary" @click="settingsStore.rebuildIndex('fts')">重建文本索引</button><button class="button-secondary" @click="settingsStore.rebuildIndex('vector')">重建向量索引</button></div><ModelRoutingSettings /></div>
+    <div v-else-if="activeSection === 'index'" class="panel settings-section"><h2>索引与模型</h2><div class="index-summary"><div><span class="badge" :class="{ success: settingsStore.indexStatus.status === 'idle', error: settingsStore.indexStatus.status === 'error' }">{{ settingsStore.indexStatus.status }}</span><p>待处理任务 {{ settingsStore.indexStatus.pending_jobs }}</p></div><div><strong>{{ settingsStore.indexStatus.total_notes ?? '未获取' }}</strong><small>笔记</small></div><div><strong>{{ settingsStore.indexStatus.total_blocks ?? '未获取' }}</strong><small>Block</small></div></div><div v-if="settingsStore.indexStatus.error" class="error-banner">{{ settingsStore.indexStatus.error }}</div><div class="inline-actions"><button class="button-primary" @click="settingsStore.rebuildIndex('full')">重建全部</button><span class="subtle">当前后端支持全量重建。</span></div><ModelRoutingSettings /></div>
 
-    <div v-else-if="activeSection === 'permissions'" class="panel settings-section"><h2>权限策略</h2><p class="muted section-description">高影响能力默认需要确认。未知权限由后端拒绝。</p><div class="permission-list"><div v-for="(policy, permission) in settingsStore.permissionPolicy" :key="permission" class="setting-row"><span><strong>{{ permission }}</strong></span><select :value="policy" class="select short" @change="settingsStore.setPermission(String(permission), ($event.target as HTMLSelectElement).value as 'allow' | 'confirm' | 'deny')"><option value="allow">允许</option><option value="confirm">每次确认</option><option value="deny">拒绝</option></select></div></div></div>
+    <div v-else-if="activeSection === 'permissions'" class="panel settings-section"><h2>权限策略</h2><p class="muted section-description">以下为后端当前生效的权限策略；全局策略编辑尚未开放，运行时按实际权限请求确认。</p><p v-if="!Object.keys(settingsStore.permissionPolicy).length" class="subtle">尚未获取权限策略，请检查后端连接并重新检测。</p><div class="permission-list"><div v-for="(policy, permission) in settingsStore.permissionPolicy" :key="permission" class="setting-row"><span><strong>{{ permission }}</strong></span><span>{{ policy === 'allow' ? '允许' : policy === 'confirm' ? '每次确认' : '拒绝' }}</span></div></div></div>
 
-    <div v-else class="panel settings-section"><h2>AI Core 诊断</h2><div v-if="settingsStore.diagnosticsError" class="error-banner">{{ settingsStore.diagnosticsError }}</div><div class="diagnostic-grid"><div class="item-card"><span class="badge" :class="{ success: settingsStore.aiCoreStatus === 'running', error: settingsStore.aiCoreStatus === 'error' }">{{ settingsStore.aiCoreStatus }}</span><h3>Sidecar 状态</h3><p class="subtle">AI Core 不可用时，Markdown 编辑仍可继续使用。</p></div><div class="item-card"><strong>{{ settingsStore.aiCoreAddress }}</strong><h3>开发 API 地址</h3><p class="subtle">正式桌面环境由 Sidecar Manager 动态提供。</p></div></div><div class="inline-actions diagnostic-actions"><button class="button-primary" @click="settingsStore.loadDiagnostics">重新检测</button><button class="button-secondary" @click="settingsStore.restartAiCore">重启 AI Core</button></div></div>
+    <div v-else class="panel settings-section"><h2>AI Core 诊断</h2><div v-if="settingsStore.diagnosticsError" class="error-banner">{{ settingsStore.diagnosticsError }}</div><div class="diagnostic-grid"><div class="item-card"><span class="badge" :class="{ success: settingsStore.aiCoreStatus === 'running', error: settingsStore.aiCoreStatus === 'error' }">{{ settingsStore.aiCoreStatus }}</span><h3>AI Core 连接状态</h3><p class="subtle">AI Core 不可用时，Markdown 编辑仍可继续使用。</p></div><div class="item-card"><strong>{{ settingsStore.aiCoreAddress }}</strong><h3>开发 API 地址</h3><p class="subtle">正式桌面环境由 Sidecar Manager 动态提供。</p></div></div><div class="inline-actions diagnostic-actions"><button class="button-primary" @click="settingsStore.loadDiagnostics">重新检测</button><span class="subtle">当前 Web 端不支持重启后端进程，请在运行后端的终端中操作。</span></div></div>
 
     <ProviderForm v-if="showProviderForm" :provider="editingProvider" :models="editingProvider ? providerStore.modelsByProvider[editingProvider.provider_id] : []" @close="showProviderForm = false" @saved="providerSaved" />
   </section>

frontend/src/features/skills/SkillsView.vue

@@ -32,6 +32,7 @@ async function uninstall(skillId: string, name: string) {
       <div class="detail-grid"><div><h3>工具</h3><div class="tag-list"><span v-for="tool in skillStore.selectedSkill.tools" :key="tool" class="badge info">{{ tool }}</span></div></div><div><h3>权限</h3><div class="tag-list"><span v-for="permission in skillStore.selectedSkill.permissions" :key="permission" class="badge warning">{{ permission }}</span></div></div><div><h3>检索配置</h3><pre>{{ JSON.stringify(skillStore.selectedSkill.retrieval_config, null, 2) }}</pre></div><div><h3>模型能力</h3><div class="tag-list"><span v-for="cap in skillStore.selectedSkill.model_requirements?.capabilities" :key="cap" class="badge">{{ cap }}</span></div></div></div>
       <div v-if="skillStore.selectedSkill.missing_dependencies?.length" class="error-banner dependencies">缺失依赖：{{ skillStore.selectedSkill.missing_dependencies.join('、') }}</div>
     </div>
+    <div v-else-if="!skillStore.skills.length" class="empty-state"><div><strong>{{ skillStore.isLoading ? '正在加载…' : skillStore.error ? '加载失败' : '尚未安装' }}</strong><button class="button-secondary" @click="skillStore.loadSkills">重新加载</button></div></div>
     <div v-else class="feature-grid"><article v-for="skill in skillStore.skills" :key="skill.skill_id" class="item-card extension-card" @click="skillStore.selectSkill(skill.skill_id)"><div class="extension-title"><AppIcon :icon="Lightning" :size="22" /><div><strong>{{ skill.name }}</strong><p>v{{ skill.version }}</p></div><span class="badge" :class="{ success: skill.status === 'ready', warning: skill.status === 'dependency_missing' }">{{ skill.status }}</span></div><p class="muted">{{ skill.description }}</p><div class="tag-list"><span v-for="permission in skill.permissions.slice(0, 3)" :key="permission" class="badge">{{ permission }}</span></div></article></div>
   </section>
 </template>

frontend/src/features/vault/VaultEntry.vue

@@ -23,13 +23,13 @@ onMounted(async () => {
       await openVault(lastVaultPath)
       return
     } catch {
-      // Mock 阶段保存的旧路径可能与当前后端 Vault 不同，清除后让用户重新选择。
+      // 历史保存的旧路径可能与当前后端 Vault 不同，清除后让用户重新选择。
       localStorage.removeItem('last-vault-path')
     }
   }
-  setTimeout(() => {
+  {
     aiCoreStatus.value = settingsStore.aiCoreStatus === 'running' ? 'running' : 'stopped'
-  }, 800)
+  }
 })
 
 async function openVault(path: string) {