feat(audit): connect rule center to live asset APIs

This commit is contained in:
caoxiaozhu
2026-05-11 06:32:38 +00:00
parent 9b39df6277
commit e9eeb2e41d
4 changed files with 2099 additions and 839 deletions

View File

@@ -7,59 +7,144 @@
<div class="hero-title">
<div class="skill-badge" :class="selectedSkill.badgeTone">{{ selectedSkill.typeLabel }}</div>
<h2>{{ selectedSkill.name }}</h2>
<p>{{ selectedSkill.summary }}</p>
<div v-if="selectedSkill.type === 'rules'" class="hero-review-meta">
<p>{{ selectedSkill.summary || '当前资产尚未补充说明。' }}</p>
<div class="hero-review-meta">
<span>
<i class="mdi mdi-code-tags"></i>
{{ selectedSkill.code }}
</span>
<span>
<i class="mdi mdi-account-outline"></i>
负责人{{ selectedSkill.owner }}
</span>
<span>
<i class="mdi mdi-account-check-outline"></i>
审核人{{ selectedSkill.reviewer }}
</span>
<b :class="['status-pill', selectedSkill.statusTone]">{{ selectedSkill.status }}</b>
<span>{{ selectedSkill.status === '已上线' ? '审核通过,可上线' : '待审核通过后上线' }}</span>
<b
v-if="selectedSkillIsRule"
:class="['status-pill', selectedSkill.reviewStatusTone]"
>
{{ selectedSkill.reviewStatusLabel }}
</b>
</div>
<div v-if="selectedSkillIsRule" class="review-note-block">
<strong>上线约束</strong>
<p>{{ activateBlockedReason || '当前规则版本审核通过后可正式上线。' }}</p>
<span v-if="showReviewNote">
审核时间{{ selectedSkill.reviewTimeLabel }}
<template v-if="selectedSkill.reviewNote"> · 审核意见{{ selectedSkill.reviewNote }}</template>
</span>
</div>
</div>
<div class="hero-stats">
<div class="hero-stat">
<span>资产编码</span>
<strong>{{ selectedSkill.code }}</strong>
</div>
<div class="hero-stat">
<span>业务域</span>
<strong>{{ selectedSkill.category }}</strong>
</div>
<div class="hero-stat">
<span>{{ selectedSkillIsRule ? '当前展示版本' : '当前版本' }}</span>
<strong>{{ selectedSkill.displayVersion || selectedSkill.version }}</strong>
</div>
<div class="hero-stat">
<span>最近更新</span>
<strong>{{ selectedSkill.updatedAt }}</strong>
</div>
</div>
</section>
<div class="detail-grid" :class="{ 'skill-md-detail-grid': selectedSkill.type === 'rules' }">
<section v-if="detailError" class="detail-inline-state panel error">
<i class="mdi mdi-alert-circle-outline"></i>
<div>
<strong>资产详情加载失败</strong>
<p>{{ detailError }}</p>
</div>
<button class="state-action" type="button" @click="openAssetDetail(selectedSkill)">重新加载</button>
</section>
<section v-else-if="detailLoading && selectedSkill.loading" class="detail-inline-state panel">
<i class="mdi mdi-loading mdi-spin"></i>
<div>
<strong>正在加载资产详情</strong>
<p>列表数据已就绪正在补充版本审核和运行信息</p>
</div>
</section>
<div
v-else
class="detail-grid"
:class="{ 'skill-md-detail-grid': selectedSkill.type === 'rules' }"
>
<section class="detail-main">
<article v-if="selectedSkill.type === 'rules'" class="detail-card panel markdown-card">
<div class="card-head">
<div>
<h3>Markdown 规则内容</h3>
<p>管理员直接编辑该规则对应的 .md 审查规则文件内容</p>
<p>当前展示版本{{ selectedSkill.displayVersion }}保存后会生成新的版本快照</p>
</div>
<button class="mini-btn">
<button
class="mini-btn primary"
type="button"
:disabled="!canEditMarkdown || detailBusy"
@click="saveRuleMarkdown"
>
<i class="mdi mdi-content-save-outline"></i>
<span>保存 .md</span>
<span>{{ actionState === 'save-markdown' ? '保存中...' : '保存 Markdown' }}</span>
</button>
</div>
<div v-if="detailLoading" class="subtle-banner">
<i class="mdi mdi-loading mdi-spin"></i>
<span>正在刷新规则详情...</span>
</div>
<label class="field">
<span>{{ selectedSkill.fields.find((field) => field.label === '文件路径')?.value }}</span>
<span>{{ selectedSkill.code }}</span>
<textarea
v-model="selectedSkill.markdownContent"
class="markdown-editor"
:class="{ disabled: !canEditMarkdown }"
spellcheck="false"
:readonly="!canEditMarkdown || detailBusy"
></textarea>
</label>
<div class="editor-foot">
<span>版本说明{{ selectedSkill.currentVersionChangeNote }}</span>
<span>最近保存{{ selectedSkill.updatedAt }}</span>
</div>
<div v-if="!canEditMarkdown" class="review-note-block muted">
<strong>只读模式</strong>
<p>当前账号没有规则编辑权限Markdown 仅可查看</p>
</div>
</article>
<article v-else class="detail-card panel">
<article class="detail-card panel">
<div class="card-head">
<div>
<h3>{{ selectedSkill.configTitle }}</h3>
<p>{{ selectedSkill.configDesc }}</p>
</div>
<button class="mini-btn">保存草稿</button>
<span class="edit-badge">{{ selectedSkill.version }}</span>
</div>
<div class="form-grid">
<label v-for="field in selectedSkill.fields" :key="field.label" class="field">
<span>{{ field.label }}</span>
<input :value="field.value" />
<input :value="field.value" readonly />
</label>
<label class="field span-2">
<span>说明</span>
<textarea rows="3" :value="selectedSkill.summary"></textarea>
<span>适用场景</span>
<textarea rows="3" :value="selectedSkill.scope" readonly></textarea>
</label>
</div>
</article>
@@ -74,23 +159,29 @@
</div>
<div class="prompt-stack">
<section v-for="section in selectedSkill.promptSections" :key="section.title" class="prompt-block">
<section
v-for="section in selectedSkill.promptSections"
:key="section.title"
class="prompt-block"
>
<header>
<strong>{{ section.title }}</strong>
<span>{{ section.intent }}</span>
</header>
<textarea rows="5" :value="section.content"></textarea>
<textarea rows="5" :value="section.content" readonly></textarea>
</section>
</div>
</article>
<article v-if="selectedSkill.type !== 'rules'" class="detail-card panel">
<article class="detail-card panel">
<div class="card-head">
<div>
<h3>{{ selectedSkill.outputTitle }}</h3>
<p>{{ selectedSkill.outputDesc }}</p>
</div>
<button class="mini-btn primary">运行测试</button>
<span class="edit-badge">
{{ selectedSkill.type === 'rules' ? selectedSkill.reviewStatusLabel : selectedSkill.publishState }}
</span>
</div>
<div class="contract-grid">
@@ -100,6 +191,7 @@
<li v-for="rule in selectedSkill.outputRules" :key="rule">{{ rule }}</li>
</ul>
</div>
<div class="contract-panel">
<h4>{{ selectedSkill.checkListTitle }}</h4>
<div v-for="test in selectedSkill.tests" :key="test.name" class="test-row">
@@ -111,6 +203,40 @@
</div>
</div>
</div>
<div v-if="selectedSkillIsRule" class="review-action-strip">
<button
class="minor-action"
type="button"
:disabled="!canManageSelected || detailBusy"
@click="reviewSelectedRule('pending')"
>
<i class="mdi mdi-send-outline"></i>
<span>{{ actionState === 'review-pending' ? '提交中...' : '提交审核' }}</span>
</button>
<button
class="minor-action success-action"
type="button"
:disabled="!canManageSelected || detailBusy"
@click="reviewSelectedRule('approved')"
>
<i class="mdi mdi-check-decagram-outline"></i>
<span>{{ actionState === 'review-approved' ? '处理中...' : '审核通过' }}</span>
</button>
<button
class="minor-action danger-action"
type="button"
:disabled="!canManageSelected || detailBusy"
@click="reviewSelectedRule('rejected')"
>
<i class="mdi mdi-close-octagon-outline"></i>
<span>{{ actionState === 'review-rejected' ? '处理中...' : '驳回版本' }}</span>
</button>
</div>
<p v-if="selectedSkillIsRule && activateBlockedReason" class="action-help">
{{ activateBlockedReason }}
</p>
</article>
</section>
@@ -119,29 +245,34 @@
<div class="card-head">
<div>
<h3>版本信息</h3>
<p>最近 5 个规则版本</p>
<p>最近 5 个规则版本仅切换当前展示内容</p>
</div>
</div>
<div class="version-list">
<div v-if="selectedSkill.history.length" 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 }"
:class="{ active: item.version === selectedSkill.displayVersion }"
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>
<b v-if="item.version === selectedSkill.currentVersion" class="current-version">当前</b>
</span>
<span>{{ item.time }}</span>
</div>
<p>{{ item.note }}</p>
</button>
</div>
<div v-else class="empty-side-note">
<i class="mdi mdi-history"></i>
<span>暂无版本历史</span>
</div>
</article>
</aside>
@@ -165,8 +296,8 @@
<p>{{ selectedSkill.toolDesc }}</p>
</div>
</div>
<div class="tool-list">
<div v-for="tool in selectedSkill.tools" :key="tool.name" class="tool-row">
<div v-if="selectedSkill.tools.length" class="tool-list">
<div v-for="tool in selectedSkill.tools" :key="tool.name + tool.scope" class="tool-row">
<div>
<strong>{{ tool.name }}</strong>
<span>{{ tool.scope }}</span>
@@ -174,6 +305,10 @@
<b :class="['tool-state', tool.tone]">{{ tool.mode }}</b>
</div>
</div>
<div v-else class="empty-side-note">
<i class="mdi mdi-connection"></i>
<span>暂无依赖信息</span>
</div>
</article>
<article class="side-card panel">
@@ -183,13 +318,17 @@
<p>{{ selectedSkill.historyDesc }}</p>
</div>
</div>
<div class="history-list">
<div v-for="item in selectedSkill.history" :key="item.version" class="history-row">
<div v-if="selectedSkill.history.length" class="history-list">
<div v-for="item in selectedSkill.history" :key="item.version + item.time" class="history-row">
<strong>{{ item.version }}</strong>
<span>{{ item.note }}</span>
<small>{{ item.time }}</small>
</div>
</div>
<div v-else class="empty-side-note">
<i class="mdi mdi-clock-outline"></i>
<span>暂无版本记录</span>
</div>
</article>
<article class="side-card panel publish-card">
@@ -207,25 +346,36 @@
</div>
<footer class="detail-actions">
<button class="back-action" type="button" @click="selectedSkill = null">
<button class="back-action" type="button" @click="closeDetail">
<i class="mdi mdi-arrow-left"></i>
<span>返回能力列表</span>
</button>
<div class="detail-action-group">
<button class="minor-action" type="button">
<div v-if="selectedSkillIsRule" class="detail-action-group">
<button
class="minor-action"
type="button"
:disabled="!canEditMarkdown || detailBusy"
@click="saveRuleMarkdown"
>
<i class="mdi mdi-content-save-outline"></i>
<span>保存草稿</span>
<span>{{ actionState === 'save-markdown' ? '保存中...' : '保存 Markdown' }}</span>
</button>
<button class="minor-action" type="button">
<i class="mdi mdi-flask-outline"></i>
<span>运行测试</span>
</button>
<button class="major-action" type="button">
<button
class="major-action"
type="button"
:disabled="!canActivateSelected"
:title="activateBlockedReason"
@click="activateSelectedRule"
>
<i class="mdi mdi-rocket-launch-outline"></i>
<span>正式上线</span>
<span>{{ actionState === 'activate' ? '上线中...' : selectedSkill.statusValue === 'active' ? '已上线' : '正式上线' }}</span>
</button>
</div>
<div v-else class="detail-action-group detail-meta-actions">
<span class="footer-note">{{ selectedSkill.publishMeta }}</span>
</div>
</footer>
</article>
@@ -252,21 +402,161 @@
:placeholder="searchPlaceholder"
/>
</label>
<button v-for="filter in filters" :key="filter" type="button" class="filter-btn">
<span>{{ filter }}</span>
<i class="mdi mdi-chevron-down"></i>
<div class="picker-filter" :class="{ open: activeFilterPopover === 'domain' }">
<button
class="picker-trigger"
type="button"
:aria-expanded="activeFilterPopover === 'domain'"
aria-haspopup="dialog"
@click="toggleFilterPopover('domain')"
>
<span class="picker-label">{{ selectedDomainLabel }}</span>
<i class="mdi mdi-chevron-down"></i>
</button>
<div
v-if="activeFilterPopover === 'domain'"
class="picker-popover"
role="dialog"
aria-label="选择业务域"
>
<header>
<strong>选择业务域</strong>
<button type="button" aria-label="关闭业务域选择" @click="closeFilterPopover">
<i class="mdi mdi-close"></i>
</button>
</header>
<div class="picker-option-list">
<button
v-for="option in domainOptions"
:key="option.value || 'all-domain'"
type="button"
class="picker-option"
:class="{ active: selectedDomain === option.value }"
@click="selectFilter('domain', option.value)"
>
{{ option.label }}
</button>
</div>
</div>
</div>
<div class="picker-filter" :class="{ open: activeFilterPopover === 'owner' }">
<button
class="picker-trigger"
type="button"
:aria-expanded="activeFilterPopover === 'owner'"
aria-haspopup="dialog"
@click="toggleFilterPopover('owner')"
>
<span class="picker-label">{{ selectedOwnerLabel }}</span>
<i class="mdi mdi-chevron-down"></i>
</button>
<div
v-if="activeFilterPopover === 'owner'"
class="picker-popover"
role="dialog"
aria-label="选择负责人"
>
<header>
<strong>选择负责人</strong>
<button type="button" aria-label="关闭负责人选择" @click="closeFilterPopover">
<i class="mdi mdi-close"></i>
</button>
</header>
<div class="picker-option-list">
<button
v-for="option in ownerOptions"
:key="option.value || 'all-owner'"
type="button"
class="picker-option"
:class="{ active: selectedOwner === option.value }"
@click="selectFilter('owner', option.value)"
>
{{ option.label }}
</button>
</div>
</div>
</div>
<div class="picker-filter" :class="{ open: activeFilterPopover === 'status' }">
<button
class="picker-trigger"
type="button"
:aria-expanded="activeFilterPopover === 'status'"
aria-haspopup="dialog"
@click="toggleFilterPopover('status')"
>
<span class="picker-label">{{ selectedStatusLabel }}</span>
<i class="mdi mdi-chevron-down"></i>
</button>
<div
v-if="activeFilterPopover === 'status'"
class="picker-popover"
role="dialog"
aria-label="选择状态"
>
<header>
<strong>选择状态</strong>
<button type="button" aria-label="关闭状态选择" @click="closeFilterPopover">
<i class="mdi mdi-close"></i>
</button>
</header>
<div class="picker-option-list">
<button
v-for="option in statusOptions"
:key="option.value || 'all-status'"
type="button"
class="picker-option"
:class="{ active: selectedStatus === option.value }"
@click="selectFilter('status', option.value)"
>
{{ option.label }}
</button>
</div>
</div>
</div>
</div>
<div class="toolbar-actions">
<button v-if="activeFilterTokens.length" class="ghost-filter-btn" type="button" @click="resetFilters">
<i class="mdi mdi-filter-remove-outline"></i>
<span>清空筛选</span>
</button>
<button class="create-btn" type="button" disabled>
<i class="mdi mdi-plus"></i>
<span>{{ createButtonLabel }}</span>
</button>
</div>
<button class="create-btn" type="button">
<i class="mdi mdi-plus"></i>
<span>{{ createButtonLabel }}</span>
</button>
</div>
<p class="hint"><i class="mdi mdi-information-outline"></i> {{ hintText }}</p>
<div v-if="activeFilterTokens.length" class="active-filter-strip">
<span v-for="token in activeFilterTokens" :key="token" class="active-filter-chip">
{{ token }}
</span>
</div>
<div class="table-wrap">
<table>
<div v-if="loading" class="table-state">
<i class="mdi mdi-loading mdi-spin"></i>
<p>正在加载{{ activeTabLabel }}资产...</p>
</div>
<div v-else-if="errorMessage" class="table-state error">
<i class="mdi mdi-alert-circle-outline"></i>
<p>{{ errorMessage }}</p>
<button type="button" class="state-action" @click="loadAssets">重新加载</button>
</div>
<div v-else-if="!visibleSkills.length" class="table-state empty">
<i class="mdi mdi-database-search-outline"></i>
<p>没有匹配的资产数据</p>
</div>
<table v-else>
<thead>
<tr>
<th>{{ tableColumns.name }}</th>
@@ -286,7 +576,7 @@
v-for="skill in visibleSkills"
:key="skill.id"
:class="{ spotlight: skill.spotlight }"
@click="selectedSkill = skill"
@click="openAssetDetail(skill)"
>
<td>
<div class="skill-name-cell">
@@ -306,14 +596,18 @@
<td>{{ skill.hitRate }}</td>
<td>{{ skill.updatedAt }}</td>
<td>
<button class="row-action" type="button" @click.stop="selectedSkill = skill">
编辑
<button class="row-action" type="button" @click.stop="openAssetDetail(skill)">
查看详情
</button>
</td>
</tr>
</tbody>
</table>
</div>
<footer v-if="!loading && !errorMessage" class="list-foot">
<span class="page-summary">当前展示 {{ visibleSkills.length }} 条资产</span>
</footer>
</article>
</Transition>
@@ -323,14 +617,14 @@
<div class="card-head">
<div>
<h3 id="version-switch-title">切换规则版本</h3>
<p>切换后编辑器会加载该版本的 .md 内容当前未保存内容不会自动发布</p>
<p>切换后编辑器只会替换当前展示内容不会直接回滚后端当前版本</p>
</div>
</div>
<div class="version-modal-summary">
<div>
<span>当前版本</span>
<strong>{{ selectedSkill?.version }}</strong>
<span>当前展示版本</span>
<strong>{{ selectedSkill?.displayVersion }}</strong>
</div>
<i class="mdi mdi-arrow-right"></i>
<div>