feat(frontend): 重设计Common Agent Studio原型

frontend/src/pages/studio/StudioDashboardPage.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ArrowRight, Check, Warning } from '@element-plus/icons-vue';
+
+import { lifecycleSteps, readinessChecklist, recentRuns } from '@/data/studioMock';
+</script>
+
+<template>
+  <section class="studio-page dashboard-page">
+    <header class="studio-hero">
+      <div>
+        <p class="studio-kicker">项目 / Common Agent Studio</p>
+        <h1>从知识接入到 Agent 发布的一体化工作台</h1>
+        <p>
+          使用新的聚合 ViewModel 驱动原型：知识资产、Workflow、MCP、Skill、Agent 调试与观测都围绕一次发布旅程组织。
+        </p>
+      </div>
+      <div class="hero-actions">
+        <el-button type="primary">新建 Workflow</el-button>
+        <el-button>导入 MCP</el-button>
+      </div>
+    </header>
+
+    <div class="lifecycle-strip">
+      <article v-for="(step, index) in lifecycleSteps" :key="step.name" class="lifecycle-step" :class="`is-${step.status}`">
+        <div class="step-index">{{ index + 1 }}</div>
+        <div>
+          <strong>{{ step.name }}</strong>
+          <span>{{ step.description }}</span>
+        </div>
+        <el-icon v-if="index < lifecycleSteps.length - 1"><ArrowRight /></el-icon>
+      </article>
+    </div>
+
+    <div class="dashboard-grid">
+      <section class="studio-panel readiness-panel">
+        <div class="panel-heading">
+          <div>
+            <h2>发布就绪检查</h2>
+            <span>ViewModel: StudioDashboardView</span>
+          </div>
+          <el-tag type="warning">Draft</el-tag>
+        </div>
+        <ul class="check-list">
+          <li v-for="item in readinessChecklist" :key="item.label" :class="{ done: item.done }">
+            <el-icon>
+              <Check v-if="item.done" />
+              <span v-else class="pending-dot" />
+            </el-icon>
+            <span>{{ item.label }}</span>
+          </li>
+        </ul>
+      </section>
+
+      <section class="studio-panel metrics-panel">
+        <div class="panel-heading">
+          <h2>运行概览</h2>
+          <span>环境: Dev</span>
+        </div>
+        <div class="metric-row">
+          <div><strong>27</strong><span>今日运行</span></div>
+          <div><strong>96.4%</strong><span>成功率</span></div>
+          <div><strong>1.28s</strong><span>P50 延迟</span></div>
+          <div><strong>¥4.82</strong><span>预估成本</span></div>
+        </div>
+      </section>
+
+      <section class="studio-panel recent-panel">
+        <div class="panel-heading">
+          <h2>最近运行</h2>
+          <span>Run Trace</span>
+        </div>
+        <div class="run-table">
+          <div class="run-row run-head">
+            <span>名称</span><span>类型</span><span>状态</span><span>延迟</span><span>成本</span>
+          </div>
+          <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>{{ run.latency }}</span>
+            <span>{{ run.cost }}</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="studio-panel warning-panel">
+        <el-icon><Warning /></el-icon>
+        <div>
+          <h2>生产发布前仍需确认路由兜底</h2>
+          <p>AGENT_PLAN 任务当前只有草稿路由，建议补齐 fallback 模型和最大延迟阈值。</p>
+        </div>
+      </section>
+    </div>
+  </section>
+</template>