100 lines
3.5 KiB
Vue
100 lines
3.5 KiB
Vue
<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>
|
||
<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>
|
||
</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>
|