refactor: 重新设计对照检查页面架构

1. 左侧改为「要求原文」- 用户粘贴红头文件等原始要求
2. 新增范式上下文提示条 - 显示当前加载的写作范式
3. 支持展开/收起查看范式规则列表
4. Prompt 构建时自动合并:要求原文 + 范式专家规则
5. AI 同时对照两套依据进行检查
This commit is contained in:
empty
2026-01-08 16:20:51 +08:00
parent 05664047e4
commit e30906855d

View File

@@ -16,37 +16,46 @@
</button>
</header>
<!-- 范式上下文提示条 -->
<div v-if="hasParadigmRules" class="px-4 py-2 bg-indigo-900/30 border-b border-indigo-700/50 flex items-center justify-between shrink-0">
<div class="flex items-center gap-2">
<span class="text-indigo-400 text-sm">📚 当前写作范式</span>
<span class="text-white text-sm font-medium">{{ activeParadigmName }}</span>
<span class="text-xs text-indigo-300/70">{{ paradigmRulesCount }} 条专家规则将自动纳入对照依据</span>
</div>
<button
@click="showParadigmRules = !showParadigmRules"
class="text-xs px-2 py-1 rounded bg-indigo-800/50 text-indigo-300 hover:bg-indigo-700/50 transition"
>
{{ showParadigmRules ? '收起规则' : '查看规则' }}
</button>
</div>
<!-- 范式规则展开区 -->
<div v-if="showParadigmRules && hasParadigmRules" class="px-4 py-3 bg-indigo-950/50 border-b border-indigo-800/30 max-h-48 overflow-y-auto shrink-0">
<div class="grid grid-cols-2 gap-2">
<div v-for="(rule, idx) in paradigmRulesList" :key="idx" class="text-xs text-indigo-200/80 bg-indigo-900/30 px-2 py-1 rounded">
{{ rule }}
</div>
</div>
</div>
<!-- 主体内容区 -->
<div class="flex-1 flex min-h-0">
<!-- 左侧写作要求 -->
<!-- 左侧要求原文 -->
<div class="flex-1 flex flex-col border-r border-slate-700">
<div class="p-3 bg-slate-800 border-b border-slate-700 flex items-center justify-between">
<h2 class="text-sm font-medium text-amber-400 flex items-center gap-2">
📋 写作要求
📋 要求原文
</h2>
<div class="flex items-center gap-2">
<button
v-if="hasParadigmRules"
@click="importParadigmRules"
class="text-xs px-2 py-1 rounded bg-amber-900/50 text-amber-300 border border-amber-700/50 hover:bg-amber-800/50 transition flex items-center gap-1"
>
📥 导入范式要求
</button>
<span class="text-xs text-slate-500">{{ leftParagraphs.length }} </span>
</div>
<span class="text-xs text-slate-500">{{ leftParagraphs.length }} </span>
</div>
<div class="flex-1 overflow-y-auto p-4 space-y-3 min-h-0">
<div v-if="!leftContent" class="h-full flex items-center justify-center">
<div class="text-center">
<span class="text-4xl opacity-20 block mb-2">📝</span>
<p class="text-slate-600 text-sm mb-3">请在下方输入写作要求</p>
<button
v-if="hasParadigmRules"
@click="importParadigmRules"
class="text-xs px-3 py-1.5 rounded bg-amber-600 text-white hover:bg-amber-500 transition"
>
📥 {{ activeParadigmName }}导入
</button>
<p class="text-slate-600 text-sm">请在下方粘贴写作要求的原文</p>
<p class="text-slate-700 text-xs mt-1">红头文件通知要求等</p>
</div>
</div>
<div
@@ -227,7 +236,9 @@ const isComparing = ref(false)
const lastCheckResult = ref(null)
const checkResults = ref({})
// 范式相关activeParadigm 是对象,不是 ID
// 范式相关
const showParadigmRules = ref(false)
const hasParadigmRules = computed(() => {
const p = activeParadigm.value
return p && (p.expertGuidelines || p.systemConstraints || p.validationRules)
@@ -237,28 +248,25 @@ const activeParadigmName = computed(() => {
return activeParadigm.value?.name || ''
})
// 导入范式写作要求
const importParadigmRules = () => {
// 提取范式规则列表
const paradigmRulesList = computed(() => {
const paradigm = activeParadigm.value
if (!paradigm) return
if (!paradigm) return []
const rules = []
// 从 expertGuidelines 提取
if (paradigm.expertGuidelines) {
paradigm.expertGuidelines.forEach(g => {
rules.push(`${g.title}${g.description}`)
})
}
// 从 systemConstraints 提取
if (paradigm.systemConstraints) {
paradigm.systemConstraints.forEach(c => {
rules.push(c)
})
}
// 从 validationRules 提取
if (paradigm.validationRules) {
Object.values(paradigm.validationRules).forEach(rule => {
if (rule.name && rule.failMessage) {
@@ -267,7 +275,15 @@ const importParadigmRules = () => {
})
}
leftContent.value = rules.join('\n\n')
return rules
})
const paradigmRulesCount = computed(() => paradigmRulesList.value.length)
// 获取范式规则文本(用于 Prompt 构建)
const getParadigmRulesText = () => {
if (paradigmRulesList.value.length === 0) return ''
return paradigmRulesList.value.join('\n')
}
// 解析段落
@@ -342,26 +358,43 @@ const runCompare = async () => {
const requirement = getSelectedLeftText()
const content = getSelectedRightText()
const paradigmRules = getParadigmRulesText()
isComparing.value = true
lastCheckResult.value = null
try {
const prompt = `你是一个严格的写作质检专家。请对比以下"写作要求"和"写作内容",判断内容是否符合要求。
// 构建包含要求原文 + 范式规则的完整对照依据
let prompt = `你是一个严格的写作质检专家。请对比以下"对照依据"和"写作内容",判断内容是否符合要求。
# 写作要求(共 ${selectedLeftIdxs.value.length} 段)
# 对照依据
## 一、要求原文(共 ${selectedLeftIdxs.value.length} 段)
${requirement}
`
// 如果有范式规则,追加到对照依据中
if (paradigmRules) {
prompt += `
## 二、写作范式专家规则(共 ${paradigmRulesCount.value} 条)
${paradigmRules}
`
}
prompt += `
# 写作内容(共 ${selectedRightIdxs.value.length} 段)
${content}
# 检查说明
请综合"要求原文"${paradigmRules ? '和"写作范式专家规则"' : ''},对写作内容进行全面检查。
# 输出要求
请严格按照以下 JSON 格式输出检查结果(不要输出其他内容):
{
"overall": "pass|warning|fail",
"summary": "一句话总结检查结果",
"details": [
{"aspect": "检查维度", "status": "pass|warning|fail", "message": "具体说明"}
{"aspect": "检查维度(如:内容完整性/篇幅占比/关键词覆盖)", "status": "pass|warning|fail", "message": "具体说明"}
],
"suggestions": ["改进建议1", "改进建议2"]
}`