Saas-voc/src/modules/system/pages/api-management/api-management.component.html

<section class="api-management-page">
  <app-page-header
    title="API 管理"
    eyebrow="System / API"
    description="查看国内 VOC Cloud Function 的 AI 网关配置与实时连通状态。"
    icon="◇"
    [crumbs]="crumbs">
    <app-neu-button pageHeaderActions size="sm" (btnClick)="loadStatus()" [disabled]="loading">刷新状态</app-neu-button>
    <app-neu-button pageHeaderActions size="sm" color="primary" (btnClick)="openPromptSettings()">AI 提示词</app-neu-button>
  </app-page-header>

  <app-page-toolbar [fields]="toolbarFields">
    <div pageToolbarActions>
      <app-neu-button size="sm" (btnClick)="loadStatus()" [disabled]="loading">刷新状态</app-neu-button>
      <app-neu-button size="sm" color="primary" (btnClick)="openPromptSettings()">AI 提示词</app-neu-button>
    </div>
  </app-page-toolbar>

  <div class="api-metric-grid">
    <app-summary-metric-card
      label="AI 服务"
      [value]="status?.configured ? '已配置' : '未配置'"
      icon="✦"
      [tone]="status?.configured ? 'green' : 'amber'"
      description="密钥仅保存在 Cloud Function 环境">
    </app-summary-metric-card>
    <app-summary-metric-card
      label="默认模型"
      [value]="modelLabel(status?.defaultModel)"
      icon="□"
      tone="blue"
      description="由提示词管理页覆盖">
    </app-summary-metric-card>
    <app-summary-metric-card
      label="最近测试"
      [value]="testResult?.ok ? '正常' : (testResult ? '异常' : '未测试')"
      icon="↗"
      [tone]="testResult?.ok ? 'green' : 'purple'"
      [description]="testResult?.latencyMs ? testResult?.latencyMs + ' ms' : '点击下方按钮执行真实请求'">
    </app-summary-metric-card>
  </div>

  <app-content-card title="AI 分析网关" subtitle="浏览器调用白名单 Cloud action，由服务端转发到 Fmode AI" tone="blue">
    <div class="gateway-layout">
      <dl class="gateway-fields">
        <div><dt>服务名称</dt><dd>{{ status?.service || (loading ? '读取中...' : '-') }}</dd></div>
        <div><dt>上游地址</dt><dd>{{ status?.baseUrl || '-' }}</dd></div>
        <div><dt>Cloud action</dt><dd>{{ status?.proxyEndpoint || 'ai.chat' }}</dd></div>
        <div><dt>默认模型</dt><dd>{{ modelLabel(status?.defaultModel) }}</dd></div>
        <div><dt>服务端密钥</dt><dd>{{ status?.configured ? '已配置' : '未配置' }}</dd></div>
      </dl>

      <div class="gateway-actions">
        <app-neu-button color="primary" (btnClick)="testConnection()" [disabled]="testing || !status?.configured">
          {{ testing ? '测试中...' : '测试 AI 服务' }}
        </app-neu-button>
        @if (testResult) {
          <div class="test-result" [class.success]="testResult.ok" [class.failed]="!testResult.ok">
            <strong>{{ testResult.ok ? '连接正常' : '连接失败' }}</strong>
            <span>{{ testResult.ok ? (modelLabel(testResult.model || status?.defaultModel) + ' · ' + (testResult.latencyMs || 0) + ' ms') : testResult.error }}</span>
          </div>
        }
        @if (error) {
          <div class="test-result failed"><strong>后端不可用</strong><span>{{ error }}</span></div>
        }
      </div>
    </div>
  </app-content-card>

  <app-content-card title="链路边界" subtitle="国内版采用服务端代理，不向浏览器暴露上游凭证" tone="green" variant="dashed">
    <div class="request-flow" aria-label="AI 请求链路">
      <span>竞品评论</span><i>→</i><span>共享 AI 组件</span><i>→</i><span>Cloud Function</span><i>→</i><span>Fmode AI</span>
    </div>
  </app-content-card>
</section>