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

frontend/src/pages/studio/WorkflowBuilderPage.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { Connection, Cpu, VideoPlay } from '@element-plus/icons-vue';
+
+import { traceSteps, workflowEdges, workflowNodes } from '@/data/studioMock';
+
+const nodeById = Object.fromEntries(workflowNodes.map((node) => [node.id, node]));
+const canvasEdges = workflowEdges.flatMap((edge) => {
+  const from = nodeById[edge.from];
+  const to = nodeById[edge.to];
+
+  if (!from || !to) {
+    return [];
+  }
+
+  return [
+    {
+      id: `${edge.from}-${edge.to}`,
+      x1: from.x + 5,
+      y1: from.y + 4,
+      x2: to.x,
+      y2: to.y + 4,
+    },
+  ];
+});
+</script>
+
+<template>
+  <section class="studio-page workflow-page">
+    <header class="page-title-row">
+      <div>
+        <p class="studio-kicker">WorkflowBuilderView · Draft / Published</p>
+        <h1>Workflow 图形化编排</h1>
+      </div>
+      <div class="toolbar-actions">
+        <el-button>保存草稿</el-button>
+        <el-button type="primary"><el-icon><VideoPlay /></el-icon> 运行测试</el-button>
+      </div>
+    </header>
+
+    <div class="workflow-layout">
+      <aside class="studio-panel node-library">
+        <div class="panel-heading compact">
+          <h2>节点库</h2>
+          <span>JSON Graph</span>
+        </div>
+        <button>Start</button>
+        <button>LLM</button>
+        <button>Knowledge Retrieval</button>
+        <button>MCP Tool</button>
+        <button>Skill</button>
+        <button>Condition</button>
+        <button>Answer</button>
+      </aside>
+
+      <main class="studio-panel workflow-canvas">
+        <div class="canvas-toolbar">
+          <span><el-icon><Connection /></el-icon> workflow-support-rag</span>
+          <span>版本快照 v7</span>
+          <span>环境: Dev</span>
+        </div>
+        <div class="canvas-surface">
+          <svg class="edge-layer" viewBox="0 0 100 100" preserveAspectRatio="none">
+            <line
+              v-for="edge in canvasEdges"
+              :key="edge.id"
+              :x1="edge.x1"
+              :y1="edge.y1"
+              :x2="edge.x2"
+              :y2="edge.y2"
+            />
+          </svg>
+          <article
+            v-for="node in workflowNodes"
+            :key="node.id"
+            class="workflow-node"
+            :class="{ selected: node.id === 'llm' }"
+            :style="{ left: `${node.x}%`, top: `${node.y}%` }"
+          >
+            <span>{{ node.type }}</span>
+            <strong>{{ node.label }}</strong>
+            <em>{{ node.description }}</em>
+          </article>
+        </div>
+        <div class="run-trace-drawer">
+          <strong>Run Trace</strong>
+          <div v-for="step in traceSteps" :key="step.node">
+            <span>{{ step.node }}</span>
+            <em>{{ step.status }} · {{ step.duration }} · {{ step.output }}</em>
+          </div>
+        </div>
+      </main>
+
+      <aside class="studio-panel inspector-panel">
+        <div class="panel-heading compact">
+          <h2>节点 Inspector</h2>
+          <span>LLM</span>
+        </div>
+        <dl class="inspector-list">
+          <dt>任务类型</dt>
+          <dd>RAG_ANSWER</dd>
+          <dt>输入 Schema</dt>
+          <dd>question, retrieved_chunks, conversation</dd>
+          <dt>输出 Schema</dt>
+          <dd>answer, citations, safety_flags</dd>
+          <dt>路由策略</dt>
+          <dd>primary qwen-plus / fallback deepseek-v3</dd>
+        </dl>
+        <button class="blue-command"><el-icon><Cpu /></el-icon> 打开模型路由</button>
+      </aside>
+    </div>
+  </section>
+</template>