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

frontend/src/pages/studio/AgentWorkspacePage.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ChatDotRound, Coin, Timer } from '@element-plus/icons-vue';
+
+import { chatMessages, citations, traceSteps } from '@/data/studioMock';
+</script>
+
+<template>
+  <section class="studio-page agent-page">
+    <header class="page-title-row">
+      <div>
+        <p class="studio-kicker">AgentWorkspaceView</p>
+        <h1>Agent 对话调试</h1>
+      </div>
+      <el-button type="primary">发布 Agent</el-button>
+    </header>
+
+    <div class="agent-layout">
+      <section class="studio-panel chat-panel">
+        <div class="panel-heading">
+          <div>
+            <h2>售前问答 Agent</h2>
+            <span>POST /api/agents/1001/runs</span>
+          </div>
+          <el-tag>Draft</el-tag>
+        </div>
+        <div class="message-list">
+          <article v-for="message in chatMessages" :key="message.content" :class="message.role">
+            <strong>{{ message.role === 'user' ? '用户' : 'Agent' }}</strong>
+            <p>{{ message.content }}</p>
+          </article>
+        </div>
+        <div class="chat-composer">
+          <span>输入调试问题，运行会写入 agent_session / agent_message 草案</span>
+          <el-button type="primary"><el-icon><ChatDotRound /></el-icon> 发送</el-button>
+        </div>
+      </section>
+
+      <aside class="studio-panel citation-panel">
+        <div class="panel-heading compact">
+          <h2>引用切片</h2>
+          <span>3 个来源</span>
+        </div>
+        <article v-for="citation in citations" :key="citation.title" class="citation-card">
+          <strong>{{ citation.title }}</strong>
+          <el-tag type="success">score {{ citation.score }}</el-tag>
+          <p>{{ citation.text }}</p>
+        </article>
+      </aside>
+
+      <aside class="studio-panel run-inspector">
+        <div class="panel-heading compact">
+          <h2>运行追踪</h2>
+          <span>modelRequestId: f4215d</span>
+        </div>
+        <div class="metric-mini">
+          <span><el-icon><Timer /></el-icon> 1.42s</span>
+          <span><el-icon><Coin /></el-icon> ¥0.018</span>
+          <span>1,248 tokens</span>
+        </div>
+        <ol class="log-list">
+          <li v-for="step in traceSteps" :key="step.node">
+            <time>{{ step.duration }}</time>
+            <span>{{ step.node }} · {{ step.output }}</span>
+          </li>
+        </ol>
+      </aside>
+    </div>
+  </section>
+</template>