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

frontend/src/pages/studio/ObservabilityPage.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { recentRuns, traceSteps } from '@/data/studioMock';
+</script>
+
+<template>
+  <section class="studio-page observability-page">
+    <header class="page-title-row">
+      <div>
+        <p class="studio-kicker">ObservabilityView</p>
+        <h1>运行观测</h1>
+      </div>
+      <el-button>导出日志</el-button>
+    </header>
+
+    <div class="observability-layout">
+      <section class="studio-panel">
+        <div class="panel-heading">
+          <h2>运行记录</h2>
+          <span>workflow_run / workflow_run_step / model_call_log</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>
+
+      <aside class="studio-panel">
+        <div class="panel-heading compact">
+          <h2>步骤日志</h2>
+          <span>run-1842</span>
+        </div>
+        <ol class="log-list">
+          <li v-for="step in traceSteps" :key="step.node">
+            <time>{{ step.duration }}</time>
+            <span>{{ step.node }} · {{ step.status }} · {{ step.output }}</span>
+          </li>
+        </ol>
+      </aside>
+    </div>
+  </section>
+</template>