From 2efbed882af04739a8c5f49739ecd502e1651670 Mon Sep 17 00:00:00 2001
From: opsx <opsx@local>
Date: Sun, 1 Nov 2026 00:26:22 +0800
Subject: [PATCH] =?UTF-8?q?fix(aiops):=20=E4=BF=9D=E5=AD=98=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=90=8E=E5=88=86=E6=9E=90=E9=A1=B5=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E5=8D=B3=E6=97=B6=E5=90=8C=E6=AD=A5;=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E9=A1=B5=E5=B8=83=E5=B1=80=E9=87=8D=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- enabled 状态在 saveConfig 成功后立即 setEnabled(此前只更新 config,
  导致'AI 分析未启用'横幅要等下次请求才消失)
- 布局:工具栏改 4 列网格(数据源/时间/应用/问题),执行按钮与提示移到
  分隔线下右对齐;未启用横幅加 ✦ 图标 + 「去配置」直达按钮;空态/加载态
  加图标居中;消耗行改统计卡风格(数值 tabular 高亮)
---
 frontend/src/i18n/locales/en/aiops.ts |  1 +
 frontend/src/i18n/locales/zh/aiops.ts |  1 +
 frontend/src/pages/aiops/index.tsx    | 64 ++++++++++++++++-----------
 3 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/frontend/src/i18n/locales/en/aiops.ts b/frontend/src/i18n/locales/en/aiops.ts
index 38ae7ea..59b86b0 100644
--- a/frontend/src/i18n/locales/en/aiops.ts
+++ b/frontend/src/i18n/locales/en/aiops.ts
@@ -20,6 +20,7 @@ export default {
   },
 
   analyze: {
+    goConfig: 'Open config',
     appScope: 'App scope',
     allApps: 'All apps',
     appRequired: 'Required (over 1h)',
diff --git a/frontend/src/i18n/locales/zh/aiops.ts b/frontend/src/i18n/locales/zh/aiops.ts
index 349c76e..8129aa2 100644
--- a/frontend/src/i18n/locales/zh/aiops.ts
+++ b/frontend/src/i18n/locales/zh/aiops.ts
@@ -20,6 +20,7 @@ export default {
   },
 
   analyze: {
+    goConfig: '去配置',
     appScope: '应用范围',
     allApps: '全部应用',
     appRequired: '必选(超过 1 小时)',
diff --git a/frontend/src/pages/aiops/index.tsx b/frontend/src/pages/aiops/index.tsx
index 8316bc4..02e579c 100644
--- a/frontend/src/pages/aiops/index.tsx
+++ b/frontend/src/pages/aiops/index.tsx
@@ -190,6 +190,7 @@ export default function AiopsPage() {
           .filter(Boolean),
       })
       setConfig(res.config)
+      setEnabled(Boolean(res.config?.enabled))
       setApiKeyInput('')
       toast.success('配置已保存')
     } catch (err) {
@@ -245,13 +246,16 @@ export default function AiopsPage() {
         {/* ─────────── 分析 ─────────── */}
         <TabsContent value="analyze" className="space-y-4">
           {!enabled && (
-            <div className="rounded-md border border-warning/40 bg-warning/10 px-3 py-2 text-sm">
-              {t('analyze.notEnabled')}
+            <div className="flex flex-wrap items-center gap-3 rounded-lg border border-warning/40 bg-warning/10 px-4 py-3 text-sm">
+              <Sparkles className="size-4 shrink-0 text-warning" />
+              <span className="flex-1">{t('analyze.notEnabled')}</span>
+              <Button size="sm" variant="outline" onClick={() => setTab('config')}>{t('analyze.goConfig')}</Button>
             </div>
           )}
 
           <Card>
-            <CardContent className="flex flex-wrap items-end gap-3 pt-4">
+            <CardContent className="pt-4">
+              <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
               <div className="min-w-40 space-y-1">
                 <Label className="text-xs">{t('analyze.source')}</Label>
                 <select
@@ -299,34 +303,41 @@ export default function AiopsPage() {
                 </select>
                 {needApp && <p className="text-[11px] text-warning">{t('analyze.appScopeHint')}</p>}
               </div>
-              <div className="min-w-64 flex-1 space-y-1">
-                <Label className="text-xs">{t('analyze.question')}</Label>
-                <Input
-                  value={question}
-                  placeholder={t('analyze.questionPlaceholder')}
-                  onChange={e => setQuestion(e.target.value)}
-                  className="h-9"
-                />
+                <div className="space-y-1 xl:col-span-2">
+                  <Label className="text-xs">{t('analyze.question')}</Label>
+                  <Input
+                    value={question}
+                    placeholder={t('analyze.questionPlaceholder')}
+                    onChange={e => setQuestion(e.target.value)}
+                    className="h-9"
+                  />
+                </div>
+              </div>
+              <div className="mt-4 flex flex-wrap items-center justify-between gap-2 border-t pt-3">
+                <p className="text-xs text-muted-foreground">{t('analyze.runHint')}</p>
+                <Button onClick={runAnalysis} disabled={running || !enabled || (needApp && !app)} className="h-9">
+                  {running ? <Loader2 className="mr-1.5 h-4 w-4 animate-spin" /> : <Play className="mr-1.5 h-4 w-4" />}
+                  {running ? t('analyze.running') : t('analyze.run')}
+                </Button>
               </div>
-              <Button onClick={runAnalysis} disabled={running || !enabled || (needApp && !app)} className="h-9">
-                {running ? <Loader2 className="mr-1.5 h-4 w-4 animate-spin" /> : <Play className="mr-1.5 h-4 w-4" />}
-                {running ? t('analyze.running') : t('analyze.run')}
-              </Button>
             </CardContent>
-            <div className="px-4 pb-3 text-xs text-muted-foreground">{t('analyze.runHint')}</div>
           </Card>
 
           {!outcome && !running && (
             <Card>
-              <CardContent className="py-10 text-center text-sm text-muted-foreground">{t('analyze.empty')}</CardContent>
+              <CardContent className="flex flex-col items-center justify-center gap-2 py-14 text-center">
+                <Sparkles className="size-8 text-muted-foreground/40" />
+                <p className="text-sm text-muted-foreground">{t('analyze.empty')}</p>
+              </CardContent>
             </Card>
           )}
 
           {running && (
             <Card>
-              <CardContent className="flex items-center justify-center gap-2 py-10 text-sm text-muted-foreground">
-                <Loader2 className="h-4 w-4 animate-spin" />
-                {t('analyze.running')}
+              <CardContent className="flex flex-col items-center justify-center gap-2 py-14 text-center">
+                <Loader2 className="size-7 animate-spin text-primary" />
+                <p className="text-sm font-medium">{t('analyze.running')}</p>
+                <p className="text-xs text-muted-foreground">{t('analyze.runHint')}</p>
               </CardContent>
             </Card>
           )}
@@ -334,13 +345,12 @@ export default function AiopsPage() {
           {outcome && (
             <>
               {/* 本次消耗：让成本和延迟是可见的 */}
-              <div className="flex flex-wrap items-center gap-4 rounded-md border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
-                <span>
-                  {t('analyze.lastRun')}：{t('analyze.promptTokens')} {fmtNum(outcome.run.promptTokens)} ·{' '}
-                  {t('analyze.completionTokens')} {fmtNum(outcome.run.completionTokens)} · {t('analyze.duration')}{' '}
-                  {(outcome.run.durationMs / 1000).toFixed(1)}s
-                </span>
-                <Button variant="link" size="sm" className="h-auto p-0 text-xs" onClick={() => setPromptOpen(true)}>
+              <div className="flex flex-wrap items-center gap-x-5 gap-y-1 rounded-lg border bg-muted/30 px-4 py-2.5 text-xs">
+                <span className="font-medium text-foreground">{t('analyze.lastRun')}</span>
+                <span className="text-muted-foreground">{t('analyze.promptTokens')} <span className="tabular-nums text-foreground">{fmtNum(outcome.run.promptTokens)}</span></span>
+                <span className="text-muted-foreground">{t('analyze.completionTokens')} <span className="tabular-nums text-foreground">{fmtNum(outcome.run.completionTokens)}</span></span>
+                <span className="text-muted-foreground">{t('analyze.duration')} <span className="tabular-nums text-foreground">{(outcome.run.durationMs / 1000).toFixed(1)}s</span></span>
+                <Button variant="link" size="sm" className="ml-auto h-auto p-0 text-xs" onClick={() => setPromptOpen(true)}>
                   {t('analyze.viewPrompt')}
                 </Button>
               </div>