@wwkit/freetoken 1.0.1

package/client/src/views/DocsView.vue

@@ -0,0 +1,1604 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { docsModules } from '../data/docs/index.js'
+import PageHeader from '../components/PageHeader.vue'
+import CodeBlock from '../components/CodeBlock.vue'
+import DetailBlock from '../components/DetailBlock.vue'
+
+const { t } = useI18n()
+
+const chatModule = docsModules.find(m => m.id === 'chat')
+const agentModule = docsModules.find(m => m.id === 'agent')
+const specModule = docsModules.find(m => m.id === 'spec-conversion')
+const authModule = docsModules.find(m => m.id === 'auth')
+const skillsModule = docsModules.find(m => m.id === 'skills')
+
+const activeModule = ref('chat')
+const activeChatSection = ref(chatModule.sections[0].id)
+const activeAgentTab = ref('tool-defs')
+const activeExampleId = ref(agentModule.examples[0].id)
+const activeSpecTab = ref('overview')
+const activeAuthTab = ref(authModule.subModules[0].id)
+const activeSkillsTab = ref(skillsModule.subModules[0].id)
+
+// Agent tab 切换时同步示例选中
+const agentTabs = computed(() => [
+  { id: 'tool-defs', label: t('docs.agent.toolDefs') },
+  ...agentModule.examples.map(ex => ({ id: ex.id, label: ex.title })),
+  { id: 'builtin', label: t('docs.agent.builtin') },
+  { id: 'summary', label: t('docs.agent.summary') },
+])
+
+function switchAgentTab(tabId) {
+  activeAgentTab.value = tabId
+  const ex = agentModule.examples.find(e => e.id === tabId)
+  if (ex) {
+    activeExampleId.value = ex.id
+  }
+}
+
+// 步骤图标映射
+const stepIcons = {
+  'user-message': '💬',
+  request: '📤',
+  'tool-call': '🤖',
+  execution: '⚙️',
+  'tool-result': '📥',
+  'final-response': '✅',
+}
+
+const labelTagType = {
+  primary: '',
+  info: 'info',
+  warning: 'warning',
+  success: 'success',
+}
+</script>
+
+<template>
+  <div class="docs-page">
+    <PageHeader
+      :title="t('docs.pageTitle')"
+      :description="t('docs.pageDesc')"
+    />
+
+    <!-- 顶层模块切换：Chat | Agent -->
+    <el-tabs v-model="activeModule" class="module-tabs">
+      <el-tab-pane :label="t('docs.chat.tabLabel')" name="chat">
+        <!-- Chat 子模块 -->
+        <div v-if="activeModule === 'chat'" class="chat-section">
+          <div class="module-intro">
+            <h2>{{ chatModule.name }}</h2>
+            <el-tag>{{ chatModule.badge }}</el-tag>
+            <p class="module-tagline">{{ chatModule.tagline }}</p>
+            <p class="module-desc">{{ chatModule.description }}</p>
+          </div>
+
+          <el-tabs v-model="activeChatSection" class="sub-tabs">
+            <el-tab-pane
+              v-for="section in chatModule.sections"
+              :key="section.id"
+              :label="section.title"
+              :name="section.id"
+            >
+              <!-- 非流式 / 流式 -->
+              <template v-if="section.id === 'non-streaming' || section.id === 'streaming'">
+                <DetailBlock :title="t('docs.chat.request')" :description="section.description">
+                  <CodeBlock :code="section.request" lang="json" filename="request.http" />
+                </DetailBlock>
+
+                <DetailBlock :title="t('docs.chat.response')" style="margin-top: 16px;">
+                  <CodeBlock :code="section.response" lang="json" filename="response.json" />
+                </DetailBlock>
+
+                <DetailBlock :title="t('docs.chat.notes')" style="margin-top: 16px;">
+                  <ul class="notes-list">
+                    <li v-for="(note, i) in section.notes" :key="i">{{ note }}</li>
+                  </ul>
+                </DetailBlock>
+              </template>
+
+              <!-- 核心参数 -->
+              <template v-else-if="section.id === 'parameters'">
+                <DetailBlock :title="section.title" :description="section.description">
+                  <el-table :data="section.params" border stripe>
+                    <el-table-column prop="name" :label="t('docs.chat.paramName')" width="140">
+                      <template #default="scope">
+                        <code class="param-name">{{ scope.row.name }}</code>
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="type" :label="t('docs.chat.paramType')" width="120" />
+                    <el-table-column :label="t('docs.chat.paramRequired')" width="80">
+                      <template #default="scope">
+                        <el-tag :type="scope.row.required ? 'danger' : 'info'" size="small">
+                          {{ scope.row.required ? t('docs.chat.yes') : t('docs.chat.no') }}
+                        </el-tag>
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="description" :label="t('docs.chat.paramDesc')" />
+                  </el-table>
+                </DetailBlock>
+              </template>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane :label="t('docs.agent.tabLabel')" name="agent">
+        <!-- Agent 子模块 -->
+        <div v-if="activeModule === 'agent'" class="agent-section">
+          <div class="module-intro">
+            <h2>{{ agentModule.name }}</h2>
+            <el-tag type="warning">{{ agentModule.badge }}</el-tag>
+            <p class="module-tagline">{{ agentModule.tagline }}</p>
+            <p class="module-desc">{{ agentModule.description }}</p>
+          </div>
+
+          <el-tabs
+            v-model="activeAgentTab"
+            class="sub-tabs"
+            @tab-change="switchAgentTab"
+          >
+            <!-- 工具定义 -->
+            <el-tab-pane :label="t('docs.agent.toolDefs')" name="tool-defs">
+              <DetailBlock :title="agentModule.toolDefs.title" :description="agentModule.toolDefs.description">
+                <CodeBlock
+                  :code="JSON.stringify(agentModule.toolDefs.tools, null, 2)"
+                  lang="json"
+                  filename="tools-definition.json"
+                />
+              </DetailBlock>
+              <DetailBlock :title="t('docs.chat.notes')" style="margin-top: 16px;">
+                <ul class="notes-list">
+                  <li v-for="(note, i) in agentModule.toolDefs.notes" :key="i">{{ note }}</li>
+                </ul>
+              </DetailBlock>
+            </el-tab-pane>
+
+            <!-- 各示例 -->
+            <el-tab-pane
+              v-for="example in agentModule.examples"
+              :key="example.id"
+              :label="example.title"
+              :name="example.id"
+            >
+              <div class="example-header">
+                <p class="example-scenario">
+                  <strong>{{ t('docs.agent.scenario') }}：</strong>{{ example.scenario }}
+                </p>
+                <p class="example-desc">{{ example.description }}</p>
+              </div>
+
+              <!-- Timeline 步骤 -->
+              <div class="flow-timeline">
+                <div
+                  v-for="step in example.steps"
+                  :key="step.step"
+                  class="flow-step"
+                >
+                  <!-- 步骤连接线 -->
+                  <div class="step-marker">
+                    <span class="step-icon">{{ stepIcons[step.type] || '📌' }}</span>
+                    <span class="step-number">{{ step.step }}</span>
+                    <div v-if="step.step < example.steps.length" class="step-line" />
+                  </div>
+
+                  <!-- 步骤内容 -->
+                  <div class="step-body">
+                    <div class="step-header">
+                      <span class="step-title">{{ step.title }}</span>
+                      <el-tag
+                        v-if="step.label"
+                        :type="labelTagType[step.labelType] || ''"
+                        size="small"
+                      >
+                        {{ step.label }}
+                      </el-tag>
+                    </div>
+
+                    <!-- 用户消息 -->
+                    <div v-if="step.type === 'user-message'" class="user-bubble">
+                      {{ step.content }}
+                    </div>
+
+                    <!-- 描述文字 -->
+                    <p v-if="step.description" class="step-desc">{{ step.description }}</p>
+
+                    <!-- 代码块 -->
+                    <CodeBlock
+                      v-if="step.code"
+                      :code="step.code"
+                      :lang="step.codeLang || 'json'"
+                      :filename="step.type === 'request' ? 'request.http' : step.type === 'tool-call' ? 'response.json' : step.type === 'tool-result' ? 'request-with-result.http' : step.type === 'final-response' ? 'final-response.json' : ''"
+                    />
+
+                    <!-- 单工具执行 -->
+                    <div v-if="step.type === 'execution' && step.toolName && !step.parallelTools" class="tool-exec">
+                      <div class="tool-exec-block">
+                        <div class="tool-exec-label">
+                          <el-tag type="success" size="small">{{ step.toolName }}</el-tag>
+                          <span class="tool-exec-arrow">→</span>
+                          <span class="tool-exec-text">{{ t('docs.agent.execution') }}</span>
+                        </div>
+                        <div v-if="step.accumulate" class="accumulate-section">
+                          <div class="tool-output-label">客户端拼接逻辑</div>
+                          <CodeBlock :code="step.accumulate" lang="javascript" filename="accumulate.js" />
+                        </div>
+                        <CodeBlock :code="step.toolInput" lang="bash" filename="tool-input" />
+                        <div class="tool-output-label">{{ t('docs.agent.output') }}</div>
+                        <CodeBlock :code="step.toolOutput" lang="bash" filename="tool-output" />
+                      </div>
+                    </div>
+
+                    <!-- 并行工具执行 -->
+                    <div v-if="step.parallelTools" class="parallel-exec">
+                      <div class="parallel-grid">
+                        <div v-for="(pt, pi) in step.parallelTools" :key="pi" class="parallel-card">
+                          <div class="parallel-card-header">
+                            <el-tag type="success" size="small">{{ pt.toolName }}</el-tag>
+                          </div>
+                          <CodeBlock :code="pt.toolInput" lang="bash" :filename="`input-${pi + 1}`" />
+                          <div class="tool-output-label">{{ t('docs.agent.output') }}</div>
+                          <CodeBlock :code="pt.toolOutput" lang="bash" :filename="`output-${pi + 1}`" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+
+            <!-- 内置工具完整描述 -->
+            <el-tab-pane :label="t('docs.agent.builtin')" name="builtin">
+              <DetailBlock
+                :title="t('docs.agent.builtinTitle')"
+                :description="t('docs.agent.builtinDesc')"
+              >
+                <el-collapse class="builtin-collapse">
+                  <el-collapse-item
+                    v-for="tool in agentModule.builtinTools"
+                    :key="tool.name"
+                    :name="tool.name"
+                  >
+                    <template #title>
+                      <div class="builtin-tool-header">
+                        <code class="builtin-tool-name">{{ tool.name }}</code>
+                        <span class="builtin-tool-summary">{{ tool.summary }}</span>
+                      </div>
+                    </template>
+                    <div class="builtin-tool-body">
+                      <div class="builtin-section-label">{{ t('docs.agent.description') }}</div>
+                      <pre class="builtin-desc-text">{{ tool.description }}</pre>
+                      <div class="builtin-section-label" style="margin-top: 16px;">{{ t('docs.agent.parameters') }}</div>
+                      <CodeBlock
+                        :code="JSON.stringify(tool.parameters, null, 2)"
+                        lang="json"
+                        :filename="`${tool.name}-params.json`"
+                      />
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+              </DetailBlock>
+            </el-tab-pane>
+
+            <!-- 总结 -->
+            <el-tab-pane :label="t('docs.agent.summary')" name="summary">
+              <DetailBlock :title="agentModule.summary.title" :description="agentModule.summary.description">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in agentModule.summary.flow" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.phase }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+              </DetailBlock>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-tab-pane>
+
+      <!-- 规格转换模块 -->
+      <el-tab-pane :label="t('docs.spec.tabLabel')" name="spec">
+        <div v-if="activeModule === 'spec'" class="spec-section">
+          <div class="module-intro">
+            <h2>{{ specModule.name }}</h2>
+            <el-tag type="info">{{ specModule.badge }}</el-tag>
+            <p class="module-tagline">{{ specModule.tagline }}</p>
+            <p class="module-desc">{{ specModule.description }}</p>
+          </div>
+
+          <el-tabs v-model="activeSpecTab" class="sub-tabs">
+            <!-- 概览 -->
+            <el-tab-pane :label="t('docs.spec.overview')" name="overview">
+              <el-row :gutter="16">
+                <el-col v-for="spec in specModule.specs" :key="spec.id" :xs="24" :sm="8">
+                  <el-card shadow="hover" class="spec-card">
+                    <h3 class="spec-name">{{ spec.name }}</h3>
+                    <code class="spec-endpoint">{{ spec.endpoint }}</code>
+                    <p class="spec-desc">{{ spec.description }}</p>
+                    <div class="spec-fields">
+                      <div v-for="f in spec.keyFields" :key="f.field" class="spec-field">
+                        <code class="field-name">{{ f.field }}</code>
+                        <span class="field-type">{{ f.type }}</span>
+                        <span class="field-note">{{ f.note }}</span>
+                      </div>
+                    </div>
+                  </el-card>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+
+            <!-- 差异对比表 -->
+            <el-tab-pane :label="t('docs.spec.comparison')" name="comparison">
+              <DetailBlock :title="t('docs.spec.comparison')">
+                <el-table :data="specModule.comparisonTable" border stripe>
+                  <el-table-column prop="aspect" :label="t('docs.spec.aspect')" width="130" fixed />
+                  <el-table-column prop="openai" label="OpenAI Chat" min-width="200" />
+                  <el-table-column prop="claude" label="Claude Messages" min-width="200" />
+                  <el-table-column prop="codex" label="Codex Responses" min-width="200" />
+                </el-table>
+              </DetailBlock>
+            </el-tab-pane>
+
+            <!-- 请求体转换 -->
+            <el-tab-pane :label="specModule.requestConversion.title" name="request">
+              <DetailBlock :title="specModule.requestConversion.title" :description="specModule.requestConversion.description">
+                <el-tabs type="card">
+                  <el-tab-pane
+                    v-for="ex in specModule.requestConversion.examples"
+                    :key="ex.spec"
+                    :label="ex.label"
+                  >
+                    <CodeBlock :code="ex.code" lang="json" :filename="`${ex.spec}-request.http`" />
+                  </el-tab-pane>
+                </el-tabs>
+              </DetailBlock>
+              <DetailBlock :title="t('docs.spec.mappings')" style="margin-top: 16px;">
+                <el-table :data="specModule.requestConversion.mappings" border stripe>
+                  <el-table-column prop="from" label="OpenAI Chat" width="200" />
+                  <el-table-column prop="to_claude" label="→ Claude" width="200" />
+                  <el-table-column prop="to_codex" label="→ Codex" width="200" />
+                  <el-table-column prop="note" :label="t('docs.spec.note')" />
+                </el-table>
+              </DetailBlock>
+            </el-tab-pane>
+
+            <!-- 响应体转换 -->
+            <el-tab-pane :label="specModule.responseConversion.title" name="response">
+              <DetailBlock :title="specModule.responseConversion.title" :description="specModule.responseConversion.description">
+                <el-tabs type="card">
+                  <el-tab-pane
+                    v-for="ex in specModule.responseConversion.examples"
+                    :key="ex.spec"
+                    :label="ex.label"
+                  >
+                    <CodeBlock :code="ex.code" lang="json" :filename="`${ex.spec}-response.json`" />
+                  </el-tab-pane>
+                </el-tabs>
+              </DetailBlock>
+              <DetailBlock :title="t('docs.spec.mappings')" style="margin-top: 16px;">
+                <el-table :data="specModule.responseConversion.mappings" border stripe>
+                  <el-table-column prop="from" label="OpenAI Chat" width="220" />
+                  <el-table-column prop="to_claude" label="→ Claude" width="200" />
+                  <el-table-column prop="to_codex" label="→ Codex" width="200" />
+                  <el-table-column prop="note" :label="t('docs.spec.note')" />
+                </el-table>
+              </DetailBlock>
+            </el-tab-pane>
+
+            <!-- 流式事件转换 -->
+            <el-tab-pane :label="specModule.streamConversion.title" name="stream">
+              <DetailBlock :title="specModule.streamConversion.title" :description="specModule.streamConversion.description">
+                <el-table :data="specModule.streamConversion.eventMapping" border stripe>
+                  <el-table-column prop="phase" :label="t('docs.spec.phase')" width="100" fixed />
+                  <el-table-column label="OpenAI Chat" min-width="220">
+                    <template #default="scope"><pre class="sse-pre">{{ scope.row.openai }}</pre></template>
+                  </el-table-column>
+                  <el-table-column label="Claude Messages" min-width="220">
+                    <template #default="scope"><pre class="sse-pre">{{ scope.row.claude }}</pre></template>
+                  </el-table-column>
+                  <el-table-column label="Codex Responses" min-width="220">
+                    <template #default="scope"><pre class="sse-pre">{{ scope.row.codex }}</pre></template>
+                  </el-table-column>
+                </el-table>
+              </DetailBlock>
+              <DetailBlock :title="t('docs.chat.notes')" style="margin-top: 16px;">
+                <ul class="notes-list">
+                  <li v-for="(note, i) in specModule.streamConversion.notes" :key="i">{{ note }}</li>
+                </ul>
+              </DetailBlock>
+            </el-tab-pane>
+
+            <!-- 转换架构 -->
+            <el-tab-pane :label="specModule.architecture.title" name="architecture">
+              <DetailBlock :title="specModule.architecture.title" :description="specModule.architecture.description">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in specModule.architecture.flow" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.step }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+              </DetailBlock>
+              <DetailBlock :title="t('docs.spec.configExample')" style="margin-top: 16px;">
+                <CodeBlock :code="specModule.architecture.configExample" lang="json" filename="base.json" />
+              </DetailBlock>
+            </el-tab-pane>
+
+            <!-- 已知问题 -->
+            <el-tab-pane :label="specModule.knownIssues.title" name="issues">
+              <DetailBlock :title="specModule.knownIssues.title" :description="specModule.knownIssues.description">
+                <div v-for="(issue, i) in specModule.knownIssues.issues" :key="i" class="issue-item">
+                  <div class="issue-header">
+                    <el-tag
+                      :type="issue.severity === 'high' ? 'danger' : issue.severity === 'medium' ? 'warning' : 'info'"
+                      size="small"
+                    >
+                      {{ issue.severity }}
+                    </el-tag>
+                    <span class="issue-title">{{ issue.title }}</span>
+                  </div>
+                  <p class="issue-detail">{{ issue.detail }}</p>
+                  <p class="issue-location">
+                    <strong>{{ t('docs.spec.location') }}：</strong>
+                    <code>{{ issue.location }}</code>
+                  </p>
+                  <div v-if="issue.fix" class="issue-fix">
+                    <div class="tool-output-label">{{ t('docs.spec.suggestedFix') }}</div>
+                    <CodeBlock :code="issue.fix" lang="javascript" filename="fix.js" />
+                  </div>
+                </div>
+              </DetailBlock>
+            </el-tab-pane>
+
+            <!-- 协议桥接 -->
+            <el-tab-pane :label="t('docs.spec.toolBridge')" name="bridge">
+              <DetailBlock :title="specModule.toolBridge.title" :description="specModule.toolBridge.description">
+                <!-- 与 bluesllm 对比表 -->
+                <el-table :data="specModule.toolBridge.comparison.rows" border stripe style="margin-bottom: 16px;">
+                  <el-table-column prop="aspect" :label="t('docs.spec.aspect')" width="120" fixed />
+                  <el-table-column prop="bluesllm" label="bluesllm translator.js" min-width="200" />
+                  <el-table-column prop="toolBridge" label="openai-tool-bridge" min-width="200" />
+                </el-table>
+              </DetailBlock>
+
+              <!-- 桥接流程 -->
+              <DetailBlock :title="t('docs.spec.bridgeFlow')" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in specModule.toolBridge.flow" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.phase }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+              </DetailBlock>
+
+              <!-- 请求桥接 -->
+              <DetailBlock :title="specModule.toolBridge.requestBridge.title" :description="specModule.toolBridge.requestBridge.description" style="margin-top: 16px;">
+                <div v-for="(s, i) in specModule.toolBridge.requestBridge.steps" :key="i" class="bridge-step">
+                  <div class="bridge-step-header">
+                    <span class="summary-num">{{ i + 1 }}</span>
+                    <strong>{{ s.step }}</strong>
+                  </div>
+                  <p class="step-desc">{{ s.detail }}</p>
+                  <CodeBlock v-if="s.code" :code="s.code" lang="javascript" :filename="`step-${i + 1}.js`" />
+                </div>
+              </DetailBlock>
+
+              <!-- 响应还原 -->
+              <DetailBlock :title="specModule.toolBridge.responseBridge.title" :description="specModule.toolBridge.responseBridge.description" style="margin-top: 16px;">
+                <div v-for="(s, i) in specModule.toolBridge.responseBridge.steps" :key="i" class="bridge-step">
+                  <div class="bridge-step-header">
+                    <span class="summary-num">{{ i + 1 }}</span>
+                    <strong>{{ s.step }}</strong>
+                  </div>
+                  <p class="step-desc">{{ s.detail }}</p>
+                  <CodeBlock v-if="s.code" :code="s.code" lang="json" :filename="`response-step-${i + 1}.json`" />
+                </div>
+              </DetailBlock>
+
+              <!-- 伪工具调用格式 -->
+              <DetailBlock :title="specModule.toolBridge.pseudoFormats.title" :description="specModule.toolBridge.pseudoFormats.description" style="margin-top: 16px;">
+                <el-table :data="specModule.toolBridge.pseudoFormats.formats" border stripe>
+                  <el-table-column prop="name" :label="t('docs.spec.formatName')" width="180" />
+                  <el-table-column prop="pattern" :label="t('docs.spec.pattern')" min-width="250">
+                    <template #default="scope"><code class="param-name">{{ scope.row.pattern }}</code></template>
+                  </el-table-column>
+                  <el-table-column prop="note" :label="t('docs.spec.note')" />
+                </el-table>
+              </DetailBlock>
+
+              <!-- 流式桥接 -->
+              <DetailBlock :title="specModule.toolBridge.streaming.title" :description="specModule.toolBridge.streaming.description" style="margin-top: 16px;">
+                <ul class="notes-list">
+                  <li v-for="(note, i) in specModule.toolBridge.streaming.notes" :key="i">{{ note }}</li>
+                </ul>
+              </DetailBlock>
+            </el-tab-pane>
+
+            <!-- OpenCode 网关 -->
+            <el-tab-pane :label="t('docs.spec.gateway')" name="gateway">
+              <DetailBlock :title="specModule.openCodeProxy.title" :description="specModule.openCodeProxy.description">
+                <p class="step-desc" style="margin-top: 8px;">{{ specModule.openCodeProxy.positioning }}</p>
+              </DetailBlock>
+
+              <!-- 三方对比 -->
+              <DetailBlock :title="specModule.openCodeProxy.threeWayComparison.title" style="margin-top: 16px;">
+                <el-table :data="specModule.openCodeProxy.threeWayComparison.rows" border stripe>
+                  <el-table-column prop="aspect" :label="t('docs.spec.aspect')" width="100" fixed />
+                  <el-table-column prop="bluesllm" label="bluesllm" min-width="180" />
+                  <el-table-column prop="toolBridge" label="openai-tool-bridge" min-width="180" />
+                  <el-table-column prop="openCodeProxy" label="opencode-llm-proxy" min-width="180" />
+                </el-table>
+              </DetailBlock>
+
+              <!-- 架构设计 -->
+              <DetailBlock :title="specModule.openCodeProxy.architecture.title" :description="specModule.openCodeProxy.architecture.description" style="margin-top: 16px;">
+                <el-table :data="specModule.openCodeProxy.architecture.endpoints" border stripe>
+                  <el-table-column prop="method" :label="t('docs.spec.method')" width="80" />
+                  <el-table-column prop="path" :label="t('docs.spec.path')" min-width="280">
+                    <template #default="scope"><code class="param-name">{{ scope.row.path }}</code></template>
+                  </el-table-column>
+                  <el-table-column prop="format" :label="t('docs.spec.formatLabel')" />
+                </el-table>
+              </DetailBlock>
+
+              <!-- 工作原理 -->
+              <DetailBlock :title="specModule.openCodeProxy.howItWorks.title" :description="specModule.openCodeProxy.howItWorks.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in specModule.openCodeProxy.howItWorks.steps" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.step }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+              </DetailBlock>
+
+              <!-- MCP 桥接 -->
+              <DetailBlock :title="specModule.openCodeProxy.mcpBridge.title" :description="specModule.openCodeProxy.mcpBridge.description" style="margin-top: 16px;">
+                <div v-for="(item, i) in specModule.openCodeProxy.mcpBridge.trick" :key="i" class="bridge-step">
+                  <div class="bridge-step-header">
+                    <span class="summary-num">{{ i + 1 }}</span>
+                    <strong>{{ item.step }}</strong>
+                  </div>
+                  <p class="step-desc">{{ item.detail }}</p>
+                </div>
+                <div style="margin-top: 16px;">
+                  <CodeBlock :code="specModule.openCodeProxy.mcpBridge.mcpBridgeCode" lang="javascript" filename="mcp-tool-bridge.js" />
+                </div>
+                <div style="margin-top: 16px;">
+                  <ul class="notes-list">
+                    <li v-for="(note, i) in specModule.openCodeProxy.mcpBridge.notes" :key="i">{{ note }}</li>
+                  </ul>
+                </div>
+              </DetailBlock>
+
+              <!-- 关键特性 -->
+              <DetailBlock :title="specModule.openCodeProxy.features.title" style="margin-top: 16px;">
+                <el-row :gutter="12">
+                  <el-col v-for="(f, i) in specModule.openCodeProxy.features.items" :key="i" :xs="24" :sm="12">
+                    <div class="feature-card">
+                      <strong class="feature-name">{{ f.name }}</strong>
+                      <p class="feature-desc">{{ f.description }}</p>
+                    </div>
+                  </el-col>
+                </el-row>
+              </DetailBlock>
+
+              <!-- 兼容客户端 -->
+              <DetailBlock :title="specModule.openCodeProxy.clients.title" :description="specModule.openCodeProxy.clients.description" style="margin-top: 16px;">
+                <el-table :data="specModule.openCodeProxy.clients.items" border stripe>
+                  <el-table-column prop="name" :label="t('docs.spec.clientName')" width="220" />
+                  <el-table-column prop="format" :label="t('docs.spec.formatLabel')" />
+                  <el-table-column prop="toolCalling" :label="t('docs.spec.toolCalling')" width="120">
+                    <template #default="scope">
+                      <el-tag :type="scope.row.toolCalling === true ? 'success' : scope.row.toolCalling === 'partial' ? 'warning' : 'info'" size="small">
+                        {{ scope.row.toolCalling === true ? t('docs.spec.yes') : scope.row.toolCalling === 'partial' ? t('docs.spec.partial') : t('docs.spec.notPrimary') }}
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </DetailBlock>
+            </el-tab-pane>
+
+            <!-- DeepSeek 逆向代理 -->
+            <el-tab-pane :label="t('docs.spec.dsProxy')" name="ds-proxy">
+              <DetailBlock :title="specModule.dsFreeApi.title" :description="specModule.dsFreeApi.description">
+                <p class="step-desc" style="margin-top: 8px;">{{ specModule.dsFreeApi.positioning }}</p>
+              </DetailBlock>
+
+              <!-- 四方对比 -->
+              <DetailBlock :title="specModule.dsFreeApi.fourWayComparison.title" style="margin-top: 16px;">
+                <el-table :data="specModule.dsFreeApi.fourWayComparison.rows" border stripe>
+                  <el-table-column prop="aspect" :label="t('docs.spec.aspect')" width="100" fixed />
+                  <el-table-column prop="bluesllm" label="bluesllm" min-width="160" />
+                  <el-table-column prop="toolBridge" label="tool-bridge" min-width="160" />
+                  <el-table-column prop="openCodeProxy" label="llm-proxy" min-width="160" />
+                  <el-table-column prop="dsFreeApi" label="ds-free-api" min-width="160" />
+                </el-table>
+              </DetailBlock>
+
+              <!-- 登录认证 -->
+              <DetailBlock :title="specModule.dsFreeApi.auth.title" :description="specModule.dsFreeApi.auth.description" style="margin-top: 16px;">
+                <div v-for="(layer, li) in specModule.dsFreeApi.auth.layers" :key="li" class="bridge-step">
+                  <div class="bridge-step-header">
+                    <el-tag size="small" :type="li === 0 ? 'danger' : 'primary'">{{ layer.type }}</el-tag>
+                    <strong>{{ layer.name }}</strong>
+                  </div>
+                  <div v-for="(s, si) in layer.steps" :key="si" class="summary-item" style="padding: 4px 0;">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ s.step.split('.')[0] }}</span>
+                      <span>{{ s.step.replace(/^\d+\.\s*/, '') }}</span>
+                    </div>
+                    <p class="summary-detail">{{ s.detail }}</p>
+                  </div>
+                </div>
+                <div style="margin-top: 16px;">
+                  <CodeBlock :code="specModule.dsFreeApi.auth.powCode" lang="javascript" filename="pow-flow.js" />
+                </div>
+                <el-alert :title="specModule.dsFreeApi.auth.wafNote" type="warning" :closable="false" style="margin-top: 12px;" />
+              </DetailBlock>
+
+              <!-- 协议转换分析 -->
+              <DetailBlock :title="specModule.dsFreeApi.protocolConversion.title" :description="specModule.dsFreeApi.protocolConversion.description" style="margin-top: 16px;">
+                <div v-for="(item, i) in specModule.dsFreeApi.protocolConversion.analysis" :key="i" class="bridge-step">
+                  <div class="bridge-step-header">
+                    <span class="summary-num">{{ i + 1 }}</span>
+                    <strong>{{ item.aspect }}</strong>
+                  </div>
+                  <p class="step-desc">{{ item.detail }}</p>
+                  <p class="step-desc" style="color: var(--el-color-primary); margin-top: 4px;">
+                    <strong>{{ t('docs.spec.comparison') }}：</strong>{{ item.comparison }}
+                  </p>
+                </div>
+              </DetailBlock>
+
+              <!-- Tool Calling -->
+              <DetailBlock :title="specModule.dsFreeApi.toolCalling.title" :description="specModule.dsFreeApi.toolCalling.description" style="margin-top: 16px;">
+                <div v-for="(item, i) in specModule.dsFreeApi.toolCalling.mechanism" :key="i" class="summary-item">
+                  <div class="summary-phase">
+                    <span class="summary-num">{{ i + 1 }}</span>
+                    <strong>{{ item.step.replace(/^\d+\.\s*/, '') }}</strong>
+                  </div>
+                  <p class="summary-detail">{{ item.detail }}</p>
+                </div>
+                <p class="step-desc" style="margin-top: 12px; color: var(--el-color-primary);">
+                  {{ specModule.dsFreeApi.toolCalling.comparison }}
+                </p>
+              </DetailBlock>
+
+              <!-- 关键特性 -->
+              <DetailBlock :title="specModule.dsFreeApi.features.title" style="margin-top: 16px;">
+                <el-row :gutter="12">
+                  <el-col v-for="(f, i) in specModule.dsFreeApi.features.items" :key="i" :xs="24" :sm="12">
+                    <div class="feature-card">
+                      <strong class="feature-name">{{ f.name }}</strong>
+                      <p class="feature-desc">{{ f.description }}</p>
+                    </div>
+                  </el-col>
+                </el-row>
+              </DetailBlock>
+            </el-tab-pane>
+
+            <!-- llmproxy 认证代理 -->
+            <el-tab-pane :label="t('docs.spec.llmproxy')" name="llmproxy">
+              <DetailBlock :title="specModule.llmproxyCodearts.title" :description="specModule.llmproxyCodearts.description">
+                <p class="step-desc" style="margin-top: 8px;">{{ specModule.llmproxyCodearts.positioning }}</p>
+              </DetailBlock>
+
+              <!-- 五方对比 -->
+              <DetailBlock :title="specModule.llmproxyCodearts.fiveWayComparison.title" style="margin-top: 16px;">
+                <el-table :data="specModule.llmproxyCodearts.fiveWayComparison.rows" border stripe>
+                  <el-table-column prop="aspect" :label="t('docs.spec.aspect')" width="100" fixed />
+                  <el-table-column prop="bluesllm" label="bluesllm" min-width="140" />
+                  <el-table-column prop="toolBridge" label="tool-bridge" min-width="140" />
+                  <el-table-column prop="openCodeProxy" label="llm-proxy" min-width="140" />
+                  <el-table-column prop="dsFreeApi" label="ds-free-api" min-width="140" />
+                  <el-table-column prop="llmproxy" label="llmproxy" min-width="140" />
+                </el-table>
+              </DetailBlock>
+
+              <!-- 为什么不做协议转换 -->
+              <DetailBlock :title="specModule.llmproxyCodearts.noConversionAnalysis.title" :description="specModule.llmproxyCodearts.noConversionAnalysis.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in specModule.llmproxyCodearts.noConversionAnalysis.flow" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.phase.replace(/^\d+\.\s*/, '') }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+                <div style="margin-top: 16px;">
+                  <CodeBlock :code="specModule.llmproxyCodearts.noConversionAnalysis.sseGuard" lang="javascript" filename="sse-guard.js" />
+                </div>
+              </DetailBlock>
+
+              <!-- Provider 插件架构 -->
+              <DetailBlock :title="specModule.llmproxyCodearts.providerArchitecture.title" :description="specModule.llmproxyCodearts.providerArchitecture.description" style="margin-top: 16px;">
+                <CodeBlock :code="specModule.llmproxyCodearts.providerArchitecture.structure" lang="bash" filename="providers-structure.txt" />
+                <ul class="notes-list" style="margin-top: 12px;">
+                  <li v-for="(note, i) in specModule.llmproxyCodearts.providerArchitecture.notes" :key="i">{{ note }}</li>
+                </ul>
+              </DetailBlock>
+            </el-tab-pane>
+
+            <!-- CodeArts 接口转换 -->
+            <el-tab-pane :label="t('docs.spec.codeartsConv')" name="codearts-conv">
+              <DetailBlock :title="specModule.codeartsConversion.title" :description="specModule.codeartsConversion.description">
+              </DetailBlock>
+
+              <!-- 上游接口规格 -->
+              <DetailBlock :title="specModule.codeartsConversion.upstreamSpec.title" :description="specModule.codeartsConversion.upstreamSpec.description" style="margin-top: 16px;">
+                <el-table :data="specModule.codeartsConversion.upstreamSpec.endpoints" border stripe style="margin-bottom: 16px;">
+                  <el-table-column prop="name" :label="t('docs.spec.endpointName')" width="180" />
+                  <el-table-column prop="url" :label="t('docs.spec.path')" min-width="300">
+                    <template #default="scope"><code class="param-name">{{ scope.row.url }}</code></template>
+                  </el-table-column>
+                  <el-table-column prop="auth" :label="t('docs.auth.tabLabel')" />
+                  <el-table-column prop="used" :label="t('docs.spec.used')" />
+                </el-table>
+                <p class="step-desc"><strong>{{ t('docs.spec.formatLabel') }}：</strong>{{ specModule.codeartsConversion.upstreamSpec.format }}</p>
+                <el-table :data="specModule.codeartsConversion.upstreamSpec.models" border stripe style="margin: 8px 0;">
+                  <el-table-column prop="id" :label="t('docs.spec.modelId')" />
+                  <el-table-column prop="display" :label="t('docs.spec.modelDisplay')" />
+                  <el-table-column prop="context" :label="t('docs.spec.context')" width="100" />
+                </el-table>
+                <div class="tool-output-label">{{ t('docs.spec.requestHeaders') }}</div>
+                <CodeBlock :code="specModule.codeartsConversion.upstreamSpec.requestHeaders" lang="json" filename="request-headers.json" />
+                <div class="tool-output-label" style="margin-top: 12px;">{{ t('docs.spec.requestBody') }}</div>
+                <CodeBlock :code="specModule.codeartsConversion.upstreamSpec.requestBody" lang="json" filename="body-inject.json" />
+              </DetailBlock>
+
+              <!-- 转换流程 -->
+              <DetailBlock :title="specModule.codeartsConversion.conversionFlow.title" :description="specModule.codeartsConversion.conversionFlow.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in specModule.codeartsConversion.conversionFlow.steps" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.phase.replace(/^\d+\.\s*/, '') }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+                <div style="margin-top: 16px;">
+                  <CodeBlock :code="specModule.codeartsConversion.conversionFlow.configExample" lang="json" filename="base.json" />
+                </div>
+              </DetailBlock>
+
+              <!-- 转换对 -->
+              <DetailBlock :title="specModule.codeartsConversion.conversionPairs.title" :description="specModule.codeartsConversion.conversionPairs.description" style="margin-top: 16px;">
+                <el-table :data="specModule.codeartsConversion.conversionPairs.pairs" border stripe>
+                  <el-table-column prop="from" :label="t('docs.spec.from')" width="140" />
+                  <el-table-column prop="to" :label="t('docs.spec.to')" width="140" />
+                  <el-table-column prop="function" :label="t('docs.spec.function')" min-width="220">
+                    <template #default="scope"><code class="param-name">{{ scope.row.function }}</code></template>
+                  </el-table-column>
+                  <el-table-column prop="note" :label="t('docs.spec.note')" />
+                </el-table>
+              </DetailBlock>
+
+              <!-- 关键字段映射 -->
+              <DetailBlock :title="specModule.codeartsConversion.keyMappings.title" :description="specModule.codeartsConversion.keyMappings.description" style="margin-top: 16px;">
+                <div class="tool-output-label">{{ t('docs.spec.requestMappings') }}</div>
+                <el-table :data="specModule.codeartsConversion.keyMappings.requestMappings" border stripe style="margin-bottom: 16px;">
+                  <el-table-column prop="claudeField" label="Claude 字段" min-width="200" />
+                  <el-table-column prop="openaiField" label="OpenAI 字段" min-width="200" />
+                  <el-table-column prop="note" :label="t('docs.spec.note')" />
+                </el-table>
+                <div class="tool-output-label">{{ t('docs.spec.responseMappings') }}</div>
+                <el-table :data="specModule.codeartsConversion.keyMappings.responseMappings" border stripe>
+                  <el-table-column prop="openaiField" label="OpenAI 字段" min-width="220" />
+                  <el-table-column prop="claudeField" label="Claude 字段" min-width="220" />
+                  <el-table-column prop="note" :label="t('docs.spec.note')" />
+                </el-table>
+              </DetailBlock>
+
+              <!-- 流式转换 -->
+              <DetailBlock :title="specModule.codeartsConversion.streamConversion.title" :description="specModule.codeartsConversion.streamConversion.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in specModule.codeartsConversion.streamConversion.flow" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.phase }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+              </DetailBlock>
+
+              <!-- bluesllm vs llmproxy -->
+              <DetailBlock :title="specModule.codeartsConversion.vsLlmproxy.title" :description="specModule.codeartsConversion.vsLlmproxy.description" style="margin-top: 16px;">
+                <el-table :data="specModule.codeartsConversion.vsLlmproxy.table" border stripe>
+                  <el-table-column prop="aspect" :label="t('docs.spec.aspect')" width="120" fixed />
+                  <el-table-column prop="bluesllm" label="bluesllm" min-width="220" />
+                  <el-table-column prop="llmproxy" label="llmproxy" min-width="220" />
+                </el-table>
+              </DetailBlock>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-tab-pane>
+
+      <!-- 登录认证模块 -->
+      <el-tab-pane :label="t('docs.auth.tabLabel')" name="auth">
+        <div v-if="activeModule === 'auth'" class="auth-section">
+          <div class="module-intro">
+            <h2>{{ authModule.name }}</h2>
+            <el-tag type="danger">{{ authModule.badge }}</el-tag>
+            <p class="module-tagline">{{ authModule.tagline }}</p>
+            <p class="module-desc">{{ authModule.description }}</p>
+          </div>
+
+          <el-tabs v-model="activeAuthTab" class="sub-tabs">
+            <!-- DeepSeek 网页端认证 -->
+            <el-tab-pane
+              v-for="sub in authModule.subModules"
+              :key="sub.id"
+              :label="sub.name"
+              :name="sub.id"
+            >
+              <div class="sub-module-intro">
+                <h3>{{ sub.name }}</h3>
+                <el-tag>{{ sub.badge }}</el-tag>
+                <p class="module-tagline">{{ sub.tagline }}</p>
+                <p class="module-desc">{{ sub.description }}</p>
+              </div>
+
+              <!-- 认证架构 -->
+              <DetailBlock v-if="sub.architecture" :title="sub.architecture.title" :description="sub.architecture.description" style="margin-top: 16px;">
+                <el-table :data="sub.architecture.layers" border stripe style="margin-bottom: 16px;">
+                  <el-table-column prop="name" :label="t('docs.auth.layer')" width="160" />
+                  <el-table-column prop="file" :label="t('docs.auth.file')" width="220">
+                    <template #default="scope"><code class="param-name">{{ scope.row.file }}</code></template>
+                  </el-table-column>
+                  <el-table-column prop="role" :label="t('docs.auth.role')" />
+                </el-table>
+                <CodeBlock :code="sub.architecture.codeStructure" lang="bash" filename="ds_core-structure.txt" />
+              </DetailBlock>
+
+              <!-- 账号池初始化（DeepSeek） -->
+              <DetailBlock v-if="sub.poolInit" :title="sub.poolInit.title" :description="sub.poolInit.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in sub.poolInit.steps" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.step }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+                <el-alert :title="sub.poolInit.retry" type="warning" :closable="false" style="margin-top: 12px;" />
+                <p class="step-desc" style="margin-top: 8px;">{{ sub.poolInit.concurrency }}</p>
+              </DetailBlock>
+
+              <!-- PoW 挑战求解（DeepSeek） -->
+              <DetailBlock v-if="sub.pow" :title="sub.pow.title" :description="sub.pow.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in sub.pow.mechanism" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.step.replace(/^\d+\.\s*/, '') }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+                <div style="margin-top: 16px;">
+                  <CodeBlock :code="sub.pow.codeExample" lang="javascript" filename="pow-solver.rs" />
+                </div>
+                <ul class="notes-list" style="margin-top: 12px;">
+                  <li v-for="(note, i) in sub.pow.notes" :key="i">{{ note }}</li>
+                </ul>
+              </DetailBlock>
+
+              <!-- WAF 绕过（DeepSeek） -->
+              <DetailBlock v-if="sub.waf" :title="sub.waf.title" :description="sub.waf.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in sub.waf.mechanism" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.step.replace(/^\d+\.\s*/, '') }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+                <div style="margin-top: 12px;">
+                  <CodeBlock :code="sub.waf.configExample" lang="toml" filename="config.toml" />
+                </div>
+                <ul class="notes-list" style="margin-top: 12px;">
+                  <li v-for="(note, i) in sub.waf.notes" :key="i">{{ note }}</li>
+                </ul>
+              </DetailBlock>
+
+              <!-- Session 管理（DeepSeek） -->
+              <DetailBlock v-if="sub.session" :title="sub.session.title" :description="sub.session.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in sub.session.lifecycle" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.phase.replace(/^\d+\.\s*/, '') }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+                <div style="margin-top: 16px;">
+                  <CodeBlock :code="sub.session.accountGuard" lang="javascript" filename="account-guard.rs" />
+                </div>
+                <ul class="notes-list" style="margin-top: 12px;">
+                  <li v-for="(note, i) in sub.session.notes" :key="i">{{ note }}</li>
+                </ul>
+              </DetailBlock>
+
+              <!-- 客户端认证（DeepSeek） -->
+              <DetailBlock v-if="sub.clientAuth" :title="sub.clientAuth.title" :description="sub.clientAuth.description" style="margin-top: 16px;">
+                <div v-for="(layer, li) in sub.clientAuth.layers" :key="li" class="bridge-step">
+                  <div class="bridge-step-header">
+                    <el-tag size="small" :type="li === 0 ? 'primary' : 'success'">{{ layer.name }}</el-tag>
+                  </div>
+                  <div v-for="(s, si) in layer.steps" :key="si" class="summary-item" style="padding: 4px 0;">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ s.step.split('.')[0] }}</span>
+                      <span>{{ s.step.replace(/^\d+\.\s*/, '') }}</span>
+                    </div>
+                    <p class="summary-detail">{{ s.detail }}</p>
+                  </div>
+                </div>
+                <ul class="notes-list" style="margin-top: 12px;">
+                  <li v-for="(note, i) in sub.clientAuth.securityNotes" :key="i">{{ note }}</li>
+                </ul>
+              </DetailBlock>
+
+              <!-- 对比表（通用：根据列名动态渲染） -->
+              <DetailBlock v-if="sub.comparison" :title="sub.comparison.title" :description="sub.comparison.description" style="margin-top: 16px;">
+                <el-table :data="sub.comparison.table" border stripe>
+                  <el-table-column prop="aspect" :label="t('docs.spec.aspect')" width="120" fixed />
+                  <el-table-column v-if="sub.comparison.table[0]?.standard" prop="standard" :label="t('docs.auth.standardApi')" min-width="200" />
+                  <el-table-column v-if="sub.comparison.table[0]?.deepseek" prop="deepseek" :label="t('docs.auth.deepseekWeb')" min-width="250" />
+                  <el-table-column v-if="sub.comparison.table[0]?.codearts" prop="codearts" label="CodeArts OAuth" min-width="250" />
+                </el-table>
+              </DetailBlock>
+
+              <!-- OAuth 认证流程（CodeArts） -->
+              <DetailBlock v-if="sub.oauthFlow" :title="sub.oauthFlow.title" :description="sub.oauthFlow.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in sub.oauthFlow.steps" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.step.replace(/^\d+\.\s*/, '') }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+                <div style="margin-top: 16px;">
+                  <CodeBlock :code="sub.oauthFlow.codeExample" lang="javascript" filename="oauth-flow.js" />
+                </div>
+                <ul class="notes-list" style="margin-top: 12px;">
+                  <li v-for="(note, i) in sub.oauthFlow.notes" :key="i">{{ note }}</li>
+                </ul>
+              </DetailBlock>
+
+              <!-- SDK 签名（CodeArts） -->
+              <DetailBlock v-if="sub.sdkSign" :title="sub.sdkSign.title" :description="sub.sdkSign.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in sub.sdkSign.mechanism" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.step.replace(/^\d+\.\s*/, '') }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+                <div style="margin-top: 16px;">
+                  <CodeBlock :code="sub.sdkSign.codeExample" lang="javascript" filename="sdk-sign.js" />
+                </div>
+                <ul class="notes-list" style="margin-top: 12px;">
+                  <li v-for="(note, i) in sub.sdkSign.notes" :key="i">{{ note }}</li>
+                </ul>
+              </DetailBlock>
+
+              <!-- 请求发送流程（CodeArts） -->
+              <DetailBlock v-if="sub.requestFlow" :title="sub.requestFlow.title" :description="sub.requestFlow.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in sub.requestFlow.steps" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.step.replace(/^\d+\.\s*/, '') }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+              </DetailBlock>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-tab-pane>
+
+      <!-- Skills 模块 -->
+      <el-tab-pane :label="t('docs.skills.tabLabel')" name="skills">
+        <div v-if="activeModule === 'skills'" class="skills-section">
+          <div class="module-intro">
+            <h2>{{ skillsModule.name }}</h2>
+            <el-tag type="success">{{ skillsModule.badge }}</el-tag>
+            <p class="module-tagline">{{ skillsModule.tagline }}</p>
+            <p class="module-desc">{{ skillsModule.description }}</p>
+          </div>
+
+          <el-tabs v-model="activeSkillsTab" class="sub-tabs">
+            <el-tab-pane
+              v-for="sub in skillsModule.subModules"
+              :key="sub.id"
+              :label="sub.name"
+              :name="sub.id"
+            >
+              <div class="sub-module-intro">
+                <h3>{{ sub.name }}</h3>
+                <el-tag>{{ sub.badge }}</el-tag>
+                <p class="module-tagline">{{ sub.tagline }}</p>
+                <p class="module-desc">{{ sub.description }}</p>
+              </div>
+
+              <!-- 核心机制 -->
+              <DetailBlock v-if="sub.coreMechanism" :title="sub.coreMechanism.title" :description="sub.coreMechanism.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in sub.coreMechanism.flow" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.phase.replace(/^\d+\.\s*/, '') }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+                <div style="margin-top: 16px;">
+                  <CodeBlock :code="sub.coreMechanism.hookCode" lang="javascript" filename="session-start-hook.js" />
+                </div>
+                <ul class="notes-list" style="margin-top: 12px;">
+                  <li v-for="(note, i) in sub.coreMechanism.notes" :key="i">{{ note }}</li>
+                </ul>
+              </DetailBlock>
+
+              <!-- 技能库 -->
+              <DetailBlock v-if="sub.skillLibrary" :title="sub.skillLibrary.title" :description="sub.skillLibrary.description" style="margin-top: 16px;">
+                <div v-for="(cat, ci) in sub.skillLibrary.categories" :key="ci" style="margin-bottom: 16px;">
+                  <h4 class="category-title">{{ cat.name }}</h4>
+                  <div v-for="(skill, si) in cat.skills" :key="si" class="bridge-step">
+                    <div class="bridge-step-header">
+                      <code class="param-name">{{ skill.name }}</code>
+                    </div>
+                    <p class="step-desc">{{ skill.desc }}</p>
+                  </div>
+                </div>
+              </DetailBlock>
+
+              <!-- 基本工作流 -->
+              <DetailBlock v-if="sub.workflow" :title="sub.workflow.title" :description="sub.workflow.description" style="margin-top: 16px;">
+                <div class="summary-flow">
+                  <div v-for="(item, i) in sub.workflow.stages" :key="i" class="summary-item">
+                    <div class="summary-phase">
+                      <span class="summary-num">{{ i + 1 }}</span>
+                      <strong>{{ item.step.replace(/^\d+\.\s*/, '') }}</strong>
+                    </div>
+                    <p class="summary-detail">{{ item.detail }}</p>
+                  </div>
+                </div>
+              </DetailBlock>
+
+              <!-- 铁律 -->
+              <DetailBlock v-if="sub.ironRule" :title="sub.ironRule.title" :description="sub.ironRule.description" style="margin-top: 16px;">
+                <el-alert :title="sub.ironRule.rule" type="error" :closable="false" style="margin-bottom: 16px;" />
+                <el-table :data="sub.ironRule.redFlags" border stripe>
+                  <el-table-column prop="thought" :label="t('docs.skills.thought')" min-width="250" />
+                  <el-table-column prop="reality" :label="t('docs.skills.reality')" min-width="200" />
+                </el-table>
+                <p class="step-desc" style="margin-top: 12px;"><strong>{{ t('docs.skills.priority') }}：</strong>{{ sub.ironRule.priority }}</p>
+              </DetailBlock>
+
+              <!-- subagent 核心设计 -->
+              <DetailBlock v-if="sub.subagentDesign" :title="sub.subagentDesign.title" :description="sub.subagentDesign.description" style="margin-top: 16px;">
+                <div v-for="(p, i) in sub.subagentDesign.principles" :key="i" class="bridge-step">
+                  <div class="bridge-step-header">
+                    <span class="summary-num">{{ i + 1 }}</span>
+                    <strong>{{ p.name }}</strong>
+                  </div>
+                  <p class="step-desc">{{ p.detail }}</p>
+                </div>
+                <el-alert :title="sub.subagentDesign.stopConditions" type="warning" :closable="false" style="margin-top: 12px;" />
+              </DetailBlock>
+
+              <!-- writing-skills TDD -->
+              <DetailBlock v-if="sub.writingSkills" :title="sub.writingSkills.title" :description="sub.writingSkills.description" style="margin-top: 16px;">
+                <el-table :data="sub.writingSkills.tddMapping" border stripe>
+                  <el-table-column prop="tdd" :label="t('docs.skills.tdd')" width="180" />
+                  <el-table-column prop="skillCreation" :label="t('docs.skills.skillCreation')" />
+                </el-table>
+              </DetailBlock>
+
+              <!-- 多平台支持 -->
+              <DetailBlock v-if="sub.platforms" :title="sub.platforms.title" :description="sub.platforms.description" style="margin-top: 16px;">
+                <el-table :data="sub.platforms.items" border stripe>
+                  <el-table-column prop="name" :label="t('docs.skills.platform')" width="180" />
+                  <el-table-column prop="install" :label="t('docs.skills.install')" min-width="250" />
+                  <el-table-column prop="hook" :label="t('docs.skills.hookFormat')" />
+                </el-table>
+              </DetailBlock>
+
+              <!-- 哲学 -->
+              <DetailBlock v-if="sub.philosophy" :title="sub.philosophy.title" style="margin-top: 16px;">
+                <el-row :gutter="12">
+                  <el-col v-for="(p, i) in sub.philosophy.principles" :key="i" :xs="24" :sm="12">
+                    <div class="feature-card">
+                      <strong class="feature-name">{{ p.name }}</strong>
+                      <p class="feature-desc">{{ p.desc }}</p>
+                    </div>
+                  </el-col>
+                </el-row>
+              </DetailBlock>
+
+              <!-- Subagent: 六维度对比表 -->
+              <DetailBlock v-if="sub.comparison" :title="sub.comparison.title" style="margin-top: 16px;">
+                <el-table :data="sub.comparison.rows" border stripe>
+                  <el-table-column prop="dimension" :label="t('docs.skills.dimension')" width="140" fixed />
+                  <el-table-column prop="superpowers" label="Superpowers" min-width="200" />
+                  <el-table-column prop="claude" label="Claude Code" min-width="200" />
+                  <el-table-column prop="opencode" label="opencode" min-width="200" />
+                  <el-table-column prop="codex" label="Codex CLI" min-width="200" />
+                </el-table>
+              </DetailBlock>
+
+              <!-- Subagent: Superpowers 示例详解 -->
+              <DetailBlock v-if="sub.superpowersExample" :title="sub.superpowersExample.title" :description="sub.superpowersExample.description" style="margin-top: 16px;">
+                <div class="tool-output-label">{{ t('docs.skills.promptTemplate') }}</div>
+                <CodeBlock :code="sub.superpowersExample.promptTemplate" lang="text" filename="implementer-prompt.md" />
+                <div class="tool-output-label" style="margin-top: 12px;">{{ t('docs.skills.outputContract') }}</div>
+                <CodeBlock :code="sub.superpowersExample.outputContract" lang="text" filename="output-contract.txt" />
+                <div class="tool-output-label" style="margin-top: 12px;">{{ t('docs.skills.fileMechanism') }}</div>
+                <CodeBlock :code="sub.superpowersExample.fileMechanism" lang="bash" filename="workspace-structure.txt" />
+                <div class="tool-output-label" style="margin-top: 12px;">{{ t('docs.skills.lifecycle') }}</div>
+                <CodeBlock :code="sub.superpowersExample.lifecycle" lang="text" filename="lifecycle.txt" />
+              </DetailBlock>
+
+              <!-- Subagent: 关键差异要点 -->
+              <DetailBlock v-if="sub.keyDifferences" :title="sub.keyDifferences.title" style="margin-top: 16px;">
+                <div v-for="(item, i) in sub.keyDifferences.items" :key="i" class="bridge-step">
+                  <div class="bridge-step-header">
+                    <el-tag size="small">{{ item.tool }}</el-tag>
+                  </div>
+                  <p class="step-desc">{{ item.point }}</p>
+                </div>
+              </DetailBlock>
+
+              <!-- Subagent: 最佳实践 -->
+              <DetailBlock v-if="sub.bestPractices" :title="sub.bestPractices.title" style="margin-top: 16px;">
+                <div v-for="(item, i) in sub.bestPractices.items" :key="i" class="bridge-step">
+                  <div class="bridge-step-header">
+                    <span class="summary-num">{{ i + 1 }}</span>
+                    <strong>{{ item.practice }}</strong>
+                  </div>
+                  <p class="step-desc">{{ item.detail }}</p>
+                </div>
+              </DetailBlock>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<style scoped>
+.module-tabs {
+  margin-bottom: 24px;
+}
+.module-intro {
+  margin-bottom: 24px;
+}
+.module-intro h2 {
+  display: inline;
+  margin: 0 12px 0 0;
+  font-size: 22px;
+  font-weight: 600;
+}
+.module-tagline {
+  margin: 8px 0 4px;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+}
+.module-desc {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.8;
+  color: var(--el-text-color-primary);
+}
+.sub-tabs {
+  margin-bottom: 24px;
+}
+.notes-list {
+  margin: 0;
+  padding-left: 20px;
+}
+.notes-list li {
+  margin: 4px 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--el-text-color-regular);
+}
+.param-name {
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 13px;
+  color: var(--el-color-primary);
+}
+
+/* ── Agent Timeline ── */
+.example-header {
+  margin-bottom: 24px;
+}
+.example-scenario {
+  margin: 0 0 4px;
+  font-size: 14px;
+}
+.example-desc {
+  margin: 0;
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.6;
+}
+.flow-timeline {
+  display: flex;
+  flex-direction: column;
+}
+.flow-step {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 8px;
+}
+.step-marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+.step-icon {
+  font-size: 20px;
+  line-height: 1;
+}
+.step-number {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--el-color-primary);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 4px;
+}
+.step-line {
+  flex: 1;
+  width: 2px;
+  background: var(--el-border-color);
+  margin-top: 4px;
+  min-height: 20px;
+}
+.step-body {
+  flex: 1;
+  min-width: 0;
+  padding-bottom: 20px;
+}
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.step-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.step-desc {
+  margin: 0 0 8px;
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.6;
+}
+.user-bubble {
+  display: inline-block;
+  padding: 8px 16px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  border-radius: 8px;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+/* ── Tool Execution ── */
+.tool-exec {
+  margin-top: 8px;
+}
+.accumulate-section {
+  margin-bottom: 12px;
+}
+.tool-exec-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+.tool-exec-arrow {
+  color: var(--el-text-color-placeholder);
+}
+.tool-output-label {
+  margin-top: 12px;
+  margin-bottom: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--el-text-color-secondary);
+}
+
+/* ── Parallel Tools ── */
+.parallel-exec {
+  margin-top: 8px;
+}
+.parallel-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  gap: 16px;
+}
+.parallel-card {
+  display: flex;
+  flex-direction: column;
+}
+.parallel-card-header {
+  margin-bottom: 8px;
+}
+
+/* ── Summary ── */
+.summary-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.summary-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.summary-phase {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  min-width: 160px;
+}
+.summary-num {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--el-color-primary);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.summary-detail {
+  margin: 0;
+  font-size: 13px;
+  color: var(--el-text-color-regular);
+  line-height: 1.6;
+  padding-top: 2px;
+}
+
+/* ── Builtin Tools ── */
+.builtin-collapse {
+  border: none;
+}
+.builtin-tool-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.builtin-tool-name {
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+.builtin-tool-summary {
+  font-size: 13px;
+  color: var(--el-text-color-secondary);
+}
+.builtin-tool-body {
+  padding: 8px 0 16px;
+}
+.builtin-section-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--el-text-color-secondary);
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.builtin-desc-text {
+  margin: 0 0 8px;
+  padding: 12px 16px;
+  background: #1e1e1e;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #d4d4d4;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ── Spec Conversion ── */
+.spec-card {
+  height: 100%;
+  margin-bottom: 16px;
+}
+.spec-name {
+  margin: 0 0 4px;
+  font-size: 16px;
+  font-weight: 600;
+}
+.spec-endpoint {
+  font-size: 12px;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+.spec-desc {
+  margin: 8px 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--el-text-color-secondary);
+}
+.spec-fields {
+  border-top: 1px solid var(--el-border-color-lighter);
+  padding-top: 8px;
+}
+.spec-field {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 3px 0;
+}
+.field-name {
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 12px;
+  color: var(--el-color-primary);
+  flex-shrink: 0;
+  min-width: 100px;
+}
+.field-type {
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  flex-shrink: 0;
+  min-width: 60px;
+}
+.field-note {
+  font-size: 12px;
+  color: var(--el-text-color-regular);
+  line-height: 1.4;
+}
+.sse-pre {
+  margin: 0;
+  padding: 4px 8px;
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--el-text-color-regular);
+}
+
+/* ── Known Issues ── */
+.issue-item {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+.issue-item:last-child {
+  border-bottom: none;
+}
+.issue-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.issue-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+.issue-detail {
+  margin: 0 0 8px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--el-text-color-regular);
+}
+.issue-location {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+.issue-location code {
+  font-family: ui-monospace, Consolas, monospace;
+  font-size: 11px;
+  color: var(--el-color-danger);
+}
+.issue-fix {
+  margin-top: 8px;
+}
+
+/* ── Tool Bridge ── */
+.bridge-step {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+.bridge-step:last-child {
+  border-bottom: none;
+}
+.bridge-step-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+/* ── Feature Cards ── */
+.feature-card {
+  padding: 12px 16px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  margin-bottom: 12px;
+}
+.feature-name {
+  font-size: 14px;
+  color: var(--el-color-primary);
+}
+.feature-desc {
+  margin: 4px 0 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--el-text-color-regular);
+}
+
+/* ── Auth Module ── */
+.sub-module-intro {
+  margin-bottom: 16px;
+}
+.sub-module-intro h3 {
+  display: inline;
+  margin: 0 12px 0 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+.category-title {
+  margin: 0 0 8px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--el-color-primary);
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  padding-bottom: 4px;
+}
+</style>