feat: 重构 AuditView 支持 Skills/MCP/定时任务三种类型管理
This commit is contained in:
caoxiaozhu
@@ -5,71 +5,70 @@
|
||||
<div class="detail-scroll">
|
||||
<section class="detail-hero panel">
|
||||
<div class="hero-title">
|
||||
<div class="skill-badge" :class="selectedSkill.badgeTone">{{ selectedSkill.scope }}</div>
|
||||
<div class="skill-badge" :class="selectedSkill.badgeTone">{{ selectedSkill.typeLabel }}</div>
|
||||
<h2>{{ selectedSkill.name }}</h2>
|
||||
<p>{{ selectedSkill.summary }}</p>
|
||||
</div>
|
||||
|
||||
<div class="hero-stats">
|
||||
<div class="hero-stat">
|
||||
<span>版本</span>
|
||||
<strong>{{ selectedSkill.version }}</strong>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<span>状态</span>
|
||||
<div v-if="selectedSkill.type === 'skills'" class="hero-review-meta">
|
||||
<span>
|
||||
<i class="mdi mdi-account-check-outline"></i>
|
||||
审核人：{{ selectedSkill.reviewer }}
|
||||
</span>
|
||||
<b :class="['status-pill', selectedSkill.statusTone]">{{ selectedSkill.status }}</b>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<span>触发命中率</span>
|
||||
<strong>{{ selectedSkill.hitRate }}</strong>
|
||||
</div>
|
||||
<div class="hero-stat">
|
||||
<span>负责人</span>
|
||||
<strong>{{ selectedSkill.owner }}</strong>
|
||||
<span>{{ selectedSkill.status === '已上线' ? '审核通过，可上线' : '待审核通过后上线' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="detail-grid">
|
||||
<div class="detail-grid" :class="{ 'skill-md-detail-grid': selectedSkill.type === 'skills' }">
|
||||
<section class="detail-main">
|
||||
<article class="detail-card panel">
|
||||
<article v-if="selectedSkill.type === 'skills'" class="detail-card panel markdown-card">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<h3>基础配置</h3>
|
||||
<p>定义 skill 的定位、适用场景和默认执行策略。</p>
|
||||
<h3>Markdown 规则内容</h3>
|
||||
<p>管理员直接编辑该 Skill 对应的 .md 审查规则文件内容。</p>
|
||||
</div>
|
||||
<button class="mini-btn">
|
||||
<i class="mdi mdi-content-save-outline"></i>
|
||||
<span>保存 .md</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="field">
|
||||
<span>{{ selectedSkill.fields.find((field) => field.label === '文件路径')?.value }}</span>
|
||||
<textarea
|
||||
v-model="selectedSkill.markdownContent"
|
||||
class="markdown-editor"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
</label>
|
||||
</article>
|
||||
|
||||
<article v-else class="detail-card panel">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<h3>{{ selectedSkill.configTitle }}</h3>
|
||||
<p>{{ selectedSkill.configDesc }}</p>
|
||||
</div>
|
||||
<button class="mini-btn">保存草稿</button>
|
||||
</div>
|
||||
|
||||
<div class="form-grid">
|
||||
<label class="field">
|
||||
<span>技能名称</span>
|
||||
<input :value="selectedSkill.name" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>技能分类</span>
|
||||
<input :value="selectedSkill.category" />
|
||||
<label v-for="field in selectedSkill.fields" :key="field.label" class="field">
|
||||
<span>{{ field.label }}</span>
|
||||
<input :value="field.value" />
|
||||
</label>
|
||||
<label class="field span-2">
|
||||
<span>适用描述</span>
|
||||
<span>说明</span>
|
||||
<textarea rows="3" :value="selectedSkill.summary"></textarea>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>触发方式</span>
|
||||
<input :value="selectedSkill.triggerMode" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>默认模型</span>
|
||||
<input :value="selectedSkill.model" />
|
||||
</label>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="detail-card panel">
|
||||
<article v-if="selectedSkill.type !== 'skills'" class="detail-card panel">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<h3>提示词结构</h3>
|
||||
<p>按系统约束、输入期望、输出格式三个层级组织 skill 行为。</p>
|
||||
<h3>{{ selectedSkill.detailTitle }}</h3>
|
||||
<p>{{ selectedSkill.detailDesc }}</p>
|
||||
</div>
|
||||
<span class="edit-badge">{{ selectedSkill.promptSections.length }} 段</span>
|
||||
</div>
|
||||
@@ -85,24 +84,24 @@
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="detail-card panel">
|
||||
<article v-if="selectedSkill.type !== 'skills'" class="detail-card panel">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<h3>输出契约与测试样例</h3>
|
||||
<p>确保 skill 在高频场景下输出稳定、格式清晰。</p>
|
||||
<h3>{{ selectedSkill.outputTitle }}</h3>
|
||||
<p>{{ selectedSkill.outputDesc }}</p>
|
||||
</div>
|
||||
<button class="mini-btn primary">运行测试</button>
|
||||
</div>
|
||||
|
||||
<div class="contract-grid">
|
||||
<div class="contract-panel">
|
||||
<h4>输出要求</h4>
|
||||
<h4>{{ selectedSkill.ruleListTitle }}</h4>
|
||||
<ul>
|
||||
<li v-for="rule in selectedSkill.outputRules" :key="rule">{{ rule }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="contract-panel">
|
||||
<h4>测试样例</h4>
|
||||
<h4>{{ selectedSkill.checkListTitle }}</h4>
|
||||
<div v-for="test in selectedSkill.tests" :key="test.name" class="test-row">
|
||||
<div>
|
||||
<strong>{{ test.name }}</strong>
|
||||
@@ -115,12 +114,43 @@
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<aside class="detail-side">
|
||||
<aside v-if="selectedSkill.type === 'skills'" class="detail-side skill-review-side">
|
||||
<article class="side-card panel review-card">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<h3>版本信息</h3>
|
||||
<p>最近 5 个规则版本</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="version-list">
|
||||
<button
|
||||
v-for="item in selectedSkill.history.slice(0, 5)"
|
||||
:key="item.version + item.time"
|
||||
class="version-row"
|
||||
:class="{ active: item.version === selectedSkill.version }"
|
||||
type="button"
|
||||
@click="openVersionSwitch(item)"
|
||||
>
|
||||
<div class="version-row-head">
|
||||
<strong>{{ item.version }}</strong>
|
||||
<span class="version-current-slot">
|
||||
<b v-if="item.version === selectedSkill.version" class="current-version">当前</b>
|
||||
</span>
|
||||
<span>{{ item.time }}</span>
|
||||
</div>
|
||||
<p>{{ item.note }}</p>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</aside>
|
||||
|
||||
<aside v-else class="detail-side">
|
||||
<article class="side-card panel">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<h3>触发规则</h3>
|
||||
<p>当前命中策略</p>
|
||||
<h3>{{ selectedSkill.triggerTitle }}</h3>
|
||||
<p>{{ selectedSkill.triggerDesc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-list">
|
||||
@@ -131,8 +161,8 @@
|
||||
<article class="side-card panel">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<h3>工具权限</h3>
|
||||
<p>可调用能力</p>
|
||||
<h3>{{ selectedSkill.toolTitle }}</h3>
|
||||
<p>{{ selectedSkill.toolDesc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tool-list">
|
||||
@@ -149,8 +179,8 @@
|
||||
<article class="side-card panel">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<h3>版本历史</h3>
|
||||
<p>最近变更</p>
|
||||
<h3>{{ selectedSkill.historyTitle }}</h3>
|
||||
<p>{{ selectedSkill.historyDesc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="history-list">
|
||||
@@ -164,12 +194,12 @@
|
||||
|
||||
<article class="side-card panel publish-card">
|
||||
<div>
|
||||
<h3>发布控制</h3>
|
||||
<p>当前配置已通过核心检查，可进入灰度或正式发布。</p>
|
||||
<h3>{{ selectedSkill.publishTitle }}</h3>
|
||||
<p>{{ selectedSkill.publishDesc }}</p>
|
||||
</div>
|
||||
<div class="publish-summary">
|
||||
<span>最近评审：2026-05-05 14:20</span>
|
||||
<strong>可发布</strong>
|
||||
<span>{{ selectedSkill.publishMeta }}</span>
|
||||
<strong>{{ selectedSkill.publishState }}</strong>
|
||||
</div>
|
||||
</article>
|
||||
</aside>
|
||||
@@ -179,7 +209,7 @@
|
||||
<footer class="detail-actions">
|
||||
<button class="back-action" type="button" @click="selectedSkill = null">
|
||||
<i class="mdi mdi-arrow-left"></i>
|
||||
<span>返回技能列表</span>
|
||||
<span>返回能力列表</span>
|
||||
</button>
|
||||
|
||||
<div class="detail-action-group">
|
||||
@@ -200,15 +230,15 @@
|
||||
</article>
|
||||
|
||||
<article v-else key="list" class="skill-list panel">
|
||||
<nav class="status-tabs" aria-label="技能状态">
|
||||
<nav class="status-tabs" aria-label="能力类型">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab"
|
||||
:key="tab.id"
|
||||
type="button"
|
||||
:class="{ active: activeTab === tab }"
|
||||
@click="activeTab = tab"
|
||||
:class="{ active: activeType === tab.id }"
|
||||
@click="activeType = tab.id"
|
||||
>
|
||||
{{ tab }}
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
@@ -221,24 +251,24 @@
|
||||
</div>
|
||||
<button class="create-btn" type="button">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
<span>新建 Skill</span>
|
||||
<span>{{ createButtonLabel }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="hint"><i class="mdi mdi-information-outline"></i> 点击任意技能行进入设计与编辑界面</p>
|
||||
<p class="hint"><i class="mdi mdi-information-outline"></i> {{ hintText }}</p>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>技能名称</th>
|
||||
<th>分类</th>
|
||||
<th>负责人</th>
|
||||
<th>适用范围</th>
|
||||
<th>模型</th>
|
||||
<th>版本</th>
|
||||
<th>{{ tableColumns.name }}</th>
|
||||
<th>{{ tableColumns.category }}</th>
|
||||
<th>{{ tableColumns.owner }}</th>
|
||||
<th>{{ tableColumns.scope }}</th>
|
||||
<th>{{ tableColumns.runtime }}</th>
|
||||
<th>{{ tableColumns.version }}</th>
|
||||
<th>状态</th>
|
||||
<th>命中率</th>
|
||||
<th>{{ tableColumns.metric }}</th>
|
||||
<th>最近更新</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
@@ -278,6 +308,41 @@
|
||||
</div>
|
||||
</article>
|
||||
</Transition>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="versionSwitchTarget" class="modal-backdrop" @click.self="cancelVersionSwitch">
|
||||
<section class="version-modal panel" role="dialog" aria-modal="true" aria-labelledby="version-switch-title">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<h3 id="version-switch-title">切换规则版本</h3>
|
||||
<p>切换后编辑器会加载该版本的 .md 内容，当前未保存内容不会自动发布。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="version-modal-summary">
|
||||
<div>
|
||||
<span>当前版本</span>
|
||||
<strong>{{ selectedSkill?.version }}</strong>
|
||||
</div>
|
||||
<i class="mdi mdi-arrow-right"></i>
|
||||
<div>
|
||||
<span>目标版本</span>
|
||||
<strong>{{ versionSwitchTarget.version }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="version-modal-note">
|
||||
<strong>{{ versionSwitchTarget.note }}</strong>
|
||||
<span>{{ versionSwitchTarget.time }}</span>
|
||||
</div>
|
||||
|
||||
<footer class="modal-actions">
|
||||
<button class="minor-action" type="button" @click="cancelVersionSwitch">取消</button>
|
||||
<button class="major-action" type="button" @click="confirmVersionSwitch">确认切换</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</Teleport>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user