From f63bdee88caa4e74ecc93925ffb66872ceb6ffd4 Mon Sep 17 00:00:00 2001
From: bruce <sunzhiye01@outlook.com>
Date: Mon, 1 Jun 2026 00:11:10 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BF=AE=E5=A4=8DStudio?=
 =?UTF-8?q?=E5=8E=9F=E5=9E=8B=E8=A1=A8=E6=A0=BC=E4=B8=8E=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E7=BA=BF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/studio/IngestionPipelinePage.vue    |  6 ++-
 .../src/pages/studio/ObservabilityPage.vue    |  6 ++-
 .../src/pages/studio/StudioDashboardPage.vue  |  6 ++-
 frontend/src/styles/global.css                | 48 +++++++++++++++++++
 4 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/studio/IngestionPipelinePage.vue b/frontend/src/pages/studio/IngestionPipelinePage.vue
index 546bc39..bd71041 100644
--- a/frontend/src/pages/studio/IngestionPipelinePage.vue
+++ b/frontend/src/pages/studio/IngestionPipelinePage.vue
@@ -25,8 +25,10 @@ import { ingestionSteps } from '@/data/studioMock';
         <div class="pipeline-timeline">
           <article v-for="step in ingestionSteps" :key="step.name" :class="`is-${step.status}`">
             <div class="timeline-dot" />
-            <strong>{{ step.name }}</strong>
-            <span>{{ step.description }}</span>
+            <div class="timeline-content">
+              <strong>{{ step.name }}</strong>
+              <span>{{ step.description }}</span>
+            </div>
           </article>
         </div>
       </section>
diff --git a/frontend/src/pages/studio/ObservabilityPage.vue b/frontend/src/pages/studio/ObservabilityPage.vue
index bd6d58b..ec87537 100644
--- a/frontend/src/pages/studio/ObservabilityPage.vue
+++ b/frontend/src/pages/studio/ObservabilityPage.vue
@@ -25,7 +25,11 @@ import { recentRuns, traceSteps } from '@/data/studioMock';
           <div v-for="run in recentRuns" :key="run.id" class="run-row">
             <strong>{{ run.name }}</strong>
             <span>{{ run.type }}</span>
-            <el-tag :type="run.status === '成功' ? 'success' : 'warning'">{{ run.status }}</el-tag>
+            <span class="status-cell">
+              <span class="status-pill" :class="run.status === '成功' ? 'is-success' : 'is-warning'">
+                {{ run.status }}
+              </span>
+            </span>
             <span>{{ run.latency }}</span>
             <span>{{ run.cost }}</span>
           </div>
diff --git a/frontend/src/pages/studio/StudioDashboardPage.vue b/frontend/src/pages/studio/StudioDashboardPage.vue
index ae01a87..2bb19bc 100644
--- a/frontend/src/pages/studio/StudioDashboardPage.vue
+++ b/frontend/src/pages/studio/StudioDashboardPage.vue
@@ -76,7 +76,11 @@ import { lifecycleSteps, readinessChecklist, recentRuns } from '@/data/studioMoc
           <div v-for="run in recentRuns" :key="run.id" class="run-row">
             <strong>{{ run.name }}</strong>
             <span>{{ run.type }}</span>
-            <el-tag :type="run.status === '成功' ? 'success' : 'warning'">{{ run.status }}</el-tag>
+            <span class="status-cell">
+              <span class="status-pill" :class="run.status === '成功' ? 'is-success' : 'is-warning'">
+                {{ run.status }}
+              </span>
+            </span>
             <span>{{ run.latency }}</span>
             <span>{{ run.cost }}</span>
           </div>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 5bb59a4..9655f29 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -412,6 +412,7 @@ a {
   display: grid;
   grid-template-columns: 1.5fr 0.7fr 0.7fr 0.7fr 0.7fr;
   align-items: center;
+  column-gap: 14px;
   min-height: 44px;
   border-bottom: 1px solid var(--app-border-soft);
   color: #334155;
@@ -425,6 +426,14 @@ a {
   font-weight: 800;
 }
 
+.status-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-self: start;
+  min-width: 74px;
+  max-width: 100%;
+}
+
 .warning-panel {
   display: flex;
   gap: 14px;
@@ -562,18 +571,57 @@ a {
   padding: 0 20px 18px;
 }
 
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 54px;
+  height: 24px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 750;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.status-pill.is-success {
+  border-color: #bbf7d0;
+  color: #15803d;
+  background: #f0fdf4;
+}
+
+.status-pill.is-warning {
+  border-color: #fed7aa;
+  color: #c2410c;
+  background: #fff7ed;
+}
+
 .pipeline-timeline article {
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 10px;
+  align-items: start;
   color: var(--app-text-muted);
 }
 
+.timeline-content {
+  min-width: 0;
+}
+
 .pipeline-timeline strong {
+  display: block;
   color: var(--app-text);
   font-size: 13px;
 }
 
+.pipeline-timeline span {
+  display: block;
+  margin-top: 4px;
+  line-height: 1.45;
+}
+
 .timeline-dot {
   width: 12px;
   height: 12px;