feat: 实现深度模式质检员功能
- 新增质检阶段 (inspect):生成初稿后根据专家指令逐条检查 - AI 输出 JSON 格式质检报告,包含每项检查的 pass/warning/fail 状态 - MainContent.vue:新增质检报告卡片,可折叠展示检查结果 - 质检报告显示整体评价(通过/需关注/未通过)和详细评语 - 生成阶段指示器新增 inspect 状态(琥珀色)
This commit is contained in:
@@ -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': '✨ 深度润色中...'
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user