feat: 实现深度模式质检员功能

- 新增质检阶段 (inspect):生成初稿后根据专家指令逐条检查
- AI 输出 JSON 格式质检报告,包含每项检查的 pass/warning/fail 状态
- MainContent.vue:新增质检报告卡片,可折叠展示检查结果
- 质检报告显示整体评价(通过/需关注/未通过)和详细评语
- 生成阶段指示器新增 inspect 状态(琥珀色)
This commit is contained in:
empty
2026-01-08 11:56:58 +08:00
parent 67758a7fff
commit 7bc886a32e
2 changed files with 114 additions and 2 deletions

View File

@@ -70,11 +70,64 @@
</div>
</div>
<!-- 质检报告卡片深度模式 + 范式预设时显示 -->
<div v-if="qualityReport" class="bg-slate-800/50 rounded-lg border border-slate-600 overflow-hidden">
<div class="px-4 py-3 border-b border-slate-700 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-lg">🔍</span>
<span class="text-sm font-medium text-slate-200">质检报告</span>
<span
class="text-xs px-2 py-0.5 rounded"
:class="{
'bg-green-500/20 text-green-400': qualityReport.overall === 'pass',
'bg-yellow-500/20 text-yellow-400': qualityReport.overall === 'warning',
'bg-red-500/20 text-red-400': qualityReport.overall === 'fail'
}"
>
{{ qualityReport.overall === 'pass' ? '通过' : qualityReport.overall === 'warning' ? '需关注' : '未通过' }}
</span>
</div>
<button
@click="isQualityReportExpanded = !isQualityReportExpanded"
class="text-slate-400 hover:text-white transition"
>
<span class="transition-transform inline-block" :class="{ 'rotate-180': isQualityReportExpanded }"></span>
</button>
</div>
<div v-show="isQualityReportExpanded" class="p-4 space-y-3">
<div
v-for="check in qualityReport.checks"
:key="check.key"
class="flex items-start gap-3 text-sm"
>
<span class="shrink-0 mt-0.5">
<span v-if="check.status === 'pass'" class="text-green-400"></span>
<span v-else-if="check.status === 'warning'" class="text-yellow-400"></span>
<span v-else class="text-red-400"></span>
</span>
<div>
<span class="font-medium" :class="{
'text-green-300': check.status === 'pass',
'text-yellow-300': check.status === 'warning',
'text-red-300': check.status === 'fail'
}">{{ check.title }}</span>
<p class="text-xs text-slate-500 mt-0.5">{{ check.message }}</p>
</div>
</div>
<div v-if="qualityReport.summary" class="pt-3 border-t border-slate-700">
<p class="text-xs text-slate-400 italic">📝 {{ qualityReport.summary }}</p>
</div>
</div>
</div>
<!-- 生成阶段指示器 -->
<div v-if="isGenerating && generationStage" class="flex items-center gap-2 text-xs text-slate-500">
<span class="w-2 h-2 rounded-full animate-pulse" :class="{
'bg-indigo-500': generationStage === 'thinking',
'bg-blue-500': generationStage === 'draft',
'bg-amber-500': generationStage === 'inspect',
'bg-yellow-500': generationStage === 'critique',
'bg-green-500': generationStage === 'refine'
}"></span>
@@ -178,6 +231,7 @@ const {
generatedContent,
thinkingContent,
generationStage,
qualityReport,
isGenerating,
analysisResult,
inputTask,
@@ -189,6 +243,7 @@ const {
// AI 思考过程折叠状态
import { ref } from 'vue'
const isThinkingExpanded = ref(false)
const isQualityReportExpanded = ref(true) // 质检报告默认展开
// 范式定义
const paradigms = [
@@ -272,6 +327,7 @@ const stageLabel = computed(() => {
const labels = {
'thinking': '🧠 风格解构 & 大纲规划中...',
'draft': '✍️ 正在撰写初稿...',
'inspect': '🔍 正在进行质量检查...',
'critique': '💡 AI 深度反思中...',
'refine': '✨ 深度润色中...'
}