feat: 实现写作第一性原理相关功能

- 语义锚定：新增大纲模式输入 (WriterPanel.vue, appStore.js) - 风格对齐：实现参考案例风格提取与可视化 (DeepSeekAPI.js, appStore.js, WriterPanel.vue) - 认知模拟：引入深度模式 Agentic Workflow (Draft->Critique->Refine) - 优化 Prompt 构建：支持风格标签注入 (promptBuilder.js) - 更新文档：添加第一性原理功能说明 (README.md)
2026-01-08 11:11:28 +08:00
parent 3d0d16a3e5
commit 3a2d2c6f0c
5 changed files with 206 additions and 27 deletions
--- a/README.md
+++ b/README.md
@@ -44,6 +44,22 @@ src/
 ### 3. 深度集成
 - **应用到写作**：实现了从"范式分析"到"写作工坊"的深度数据迁移，包括原文引用、风格约束注入和范式模板自动匹配。

+## 核心功能升级：写作第一性原理
+
+本项目已基于写作的"第一性原理"进行了深度重构，旨在解决 AI 写作的本质矛盾：
+
+### 1. 语义锚定 (Semantic Anchoring) - 解决"写什么"
+- **大纲模式 (Outline Mode)**：提供结构化输入（核心主题、目标受众、关键观点），强制用户提供逻辑骨架，有效防止 AI 幻觉和跑题。
+- **原理**：通过高确定性的逻辑约束（Logic）来引导 AI 的概率采样，实现熵减。
+
+### 2. 风格对齐 (Style Alignment) - 解决"怎么写"
+- **风格显性化**：自动分析参考案例，提取关键风格标签（如 #短句为主 #语气犀利），并在 UI 中可视化展示。
+- **向量特征注入**：将提取的风格标签作为显性特征注入 Prompt，强迫 AI 输出向参考案例的向量空间偏移。
+
+### 3. 认知模拟 (Cognition Simulation) - 解决"深度"
+- **深度模式 (Deep Mode)**：引入 Agentic Workflow（智能体工作流），模拟人类"初稿 -> 批判 -> 润色"的思维链。
+- **过程可视化**：在界面上实时展示 AI 的"反思"（Critique）和"修正"（Refine）过程，用计算换质量。
+
 ## 功能特性

 ### 1. AI 写作工坊
--- a/src/api/deepseek.js
+++ b/src/api/deepseek.js
@@ -111,6 +111,19 @@ class DeepSeekAPI {
      }
    ], { temperature: 0.3 }, onContent)
  }
+
+  async extractStyle(text, onContent) {
+    return this._streamRequest([
+      {
+        role: 'system',
+        content: '你是一个专业的语言风格分析师。请分析给定文本的语言风格，并提取3-5个关键风格标签（如：#短句为主 #语气犀利 #大量隐喻 #数据支撑）。请直接输出标签，用空格分隔，不要有其他解释。'
+      },
+      {
+        role: 'user',
+        content: `请分析以下文本的风格：\n\n${text.substring(0, 2000)}` // Limit context length
+      }
+    ], { temperature: 0.2 }, onContent)
+  }
 }

 export default DeepSeekAPI
--- a/src/components/WriterPanel.vue
+++ b/src/components/WriterPanel.vue
@@ -20,15 +20,36 @@
    <div class="flex-1 overflow-y-auto p-4 space-y-6">
      <!-- 写作任务 -->
      <section>
-        <label class="block text-sm font-medium text-slate-400 mb-2 flex justify-between">
-          1. 写作任务 (User Input)
-          <span class="text-xs text-slate-500">{{ inputTask.length }} 字</span>
-        </label>
-        <textarea 
-          v-model="inputTask" 
-          class="w-full h-32 bg-slate-900 border border-slate-700 rounded-lg p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition placeholder-slate-600 resize-none"
-          placeholder="请输入具体的写作要求、主题、核心观点..."
-        ></textarea>
+        <div class="flex justify-between items-center mb-2">
+          <label class="text-sm font-medium text-slate-400">1. 写作任务 (User Input)</label>
+          <div class="flex bg-slate-900 rounded p-0.5 border border-slate-700">
+            <button 
+              @click="inputType = 'text'"
+              :class="['text-xs px-2 py-0.5 rounded transition', inputType === 'text' ? 'bg-slate-700 text-white' : 'text-slate-500 hover:text-slate-300']"
+            >自由文本</button>
+            <button 
+              @click="inputType = 'outline'"
+              :class="['text-xs px-2 py-0.5 rounded transition', inputType === 'outline' ? 'bg-slate-700 text-white' : 'text-slate-500 hover:text-slate-300']"
+            >大纲模式</button>
+          </div>
+        </div>
+        
+        <div v-if="inputType === 'text'">
+          <textarea 
+            v-model="inputTask" 
+            class="w-full h-32 bg-slate-900 border border-slate-700 rounded-lg p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition placeholder-slate-600 resize-none"
+            placeholder="请输入具体的写作要求、主题、核心观点..."
+          ></textarea>
+          <div class="text-right mt-1">
+             <span class="text-xs text-slate-500">{{ inputTask.length }} 字</span>
+          </div>
+        </div>
+
+        <div v-else class="space-y-2">
+          <input v-model="outlinePoints.topic" placeholder="核心主题" class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs outline-none focus:border-blue-500">
+          <input v-model="outlinePoints.audience" placeholder="目标受众" class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs outline-none focus:border-blue-500">
+          <textarea v-model="outlinePoints.keyPoints" placeholder="关键观点（每行一个）" class="w-full h-20 bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs outline-none focus:border-blue-500 resize-none"></textarea>
+        </div>
      </section>

      <!-- 参考案例 -->
@@ -47,15 +68,33 @@
        </div>

        <div class="space-y-2">
-          <div v-for="(ref, index) in references" :key="index" class="group flex items-center justify-between bg-slate-700/50 p-2 rounded border border-slate-700 hover:border-slate-600">
-            <div class="flex items-center gap-2 overflow-hidden">
-              <span class="text-lg">📄</span>
-              <div class="flex flex-col min-w-0">
+          <div v-for="(ref, index) in references" :key="index" class="group flex flex-col bg-slate-700/50 p-2 rounded border border-slate-700 hover:border-slate-600 transition">
+            <div class="flex items-center justify-between mb-1">
+              <div class="flex items-center gap-2 overflow-hidden">
+                <span class="text-lg">📄</span>
                <span class="text-xs font-medium text-slate-200 truncate">{{ ref.title }}</span>
-                <span class="text-[10px] text-slate-500 truncate">{{ ref.content.substring(0, 20) }}...</span>
+              </div>
+              <button @click="removeReference(index)" class="text-slate-500 hover:text-red-400 opacity-0 group-hover:opacity-100 transition px-2">×</button>
+            </div>
+            
+            <div class="pl-7">
+              <p class="text-[10px] text-slate-500 truncate mb-1.5">{{ ref.content.substring(0, 30) }}...</p>
+              
+              <!-- 风格分析结果 -->
+              <div v-if="ref.isAnalyzing" class="flex items-center gap-1 text-[10px] text-indigo-400 animate-pulse">
+                <span class="w-1 h-1 rounded-full bg-indigo-400"></span>
+                正在分析风格特征...
+              </div>
+              <div v-else-if="ref.styleTags && ref.styleTags.length > 0" class="flex flex-wrap gap-1">
+                <span 
+                  v-for="tag in ref.styleTags" 
+                  :key="tag"
+                  class="text-[10px] px-1.5 py-0.5 rounded bg-indigo-500/20 text-indigo-300 border border-indigo-500/30"
+                >
+                  {{ tag }}
+                </span>
              </div>
            </div>
-            <button @click="removeReference(index)" class="text-slate-500 hover:text-red-400 opacity-0 group-hover:opacity-100 transition px-2">×</button>
          </div>
        </div>
      </section>
@@ -82,6 +121,20 @@
          class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs focus:border-blue-500 outline-none"
          placeholder="补充其他要求"
        >
+        
+        <!-- 深度模式开关 -->
+        <div class="mt-4 flex items-center justify-between bg-slate-900/50 p-3 rounded border border-indigo-500/30">
+          <div class="flex flex-col">
+            <span class="text-sm font-bold text-indigo-300 flex items-center gap-1">
+              🧠 深度模式 (Deep Mode)
+            </span>
+            <span class="text-[10px] text-slate-500">模拟人类“初稿-反思-润色”的思维链</span>
+          </div>
+          <label class="relative inline-flex items-center cursor-pointer">
+            <input type="checkbox" v-model="isDeepMode" class="sr-only peer">
+            <div class="w-9 h-5 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
+          </label>
+        </div>
      </section>
    </div>

@@ -116,7 +169,7 @@

      <button 
        @click="generateContent" 
-        :disabled="isGenerating || !inputTask"
+        :disabled="!canGenerate"
        class="w-full py-3 rounded-lg font-bold text-white shadow-lg shadow-blue-900/20 flex items-center justify-center gap-2 transition-all transform active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
        :class="isGenerating ? 'bg-slate-700' : 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500'"
      >
@@ -128,6 +181,7 @@
 </template>

 <script setup>
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useAppStore } from '../stores/app'

@@ -143,7 +197,10 @@ const {
  isGenerating,
  showPromptDebug,
  apiUrl,
-  apiKey
+  apiKey,
+  isDeepMode,
+  inputType,
+  outlinePoints
 } = storeToRefs(appStore)

 const { switchPage } = appStore
@@ -181,4 +238,13 @@ const generateContent = async () => {
    alert(error.message)
  }
 }
+
+const canGenerate = computed(() => {
+  if (isGenerating.value) return false
+  if (inputType.value === 'text') {
+    return !!inputTask.value?.trim()
+  } else {
+    return !!outlinePoints.value?.topic?.trim()
+  }
+})
 </script>
--- a/src/stores/app.js
+++ b/src/stores/app.js
@@ -15,13 +15,19 @@ export const useAppStore = defineStore('app', () => {
  // 写作相关
  const inputTask = ref('请帮我写一篇关于"AI 辅助编程如何改变软件开发流程"的博客文章，面向中级程序员。')
  const references = ref([
-    { title: '示例：技术博客风格.txt', content: '本文深入探讨了...（此处省略2000字，这是为了让AI模仿这种干练的技术风格）...' }
+    { 
+      title: '示例：技术博客风格.txt', 
+      content: '本文深入探讨了...（此处省略2000字，这是为了让AI模仿这种干练的技术风格）...',
+      styleTags: ['#技术干货', '#逻辑严密', '#客观中立'] 
+    }
  ])
  const selectedTags = ref(['Markdown格式', '总分总结构'])
  const customConstraint = ref('')
  
  // 生成相关
  const isGenerating = ref(false)
+  const isDeepMode = ref(false)
+  const generationStage = ref('') // 'draft' | 'critique' | 'refine' | ''
  const generatedContent = ref('')
  
  // 分析相关
@@ -40,8 +46,46 @@ export const useAppStore = defineStore('app', () => {
  const addReferenceFromAnalysis = (title, content) => {
    references.value.push({
      title: title || `参考范文_${new Date().toLocaleDateString()}`,
-      content: content
+      content: content,
+      styleTags: [],
+      isAnalyzing: false
    })
+    // 自动触发风格分析
+    analyzeReferenceStyleAction(references.value.length - 1)
+  }
+
+  // 分析参考案例风格动作
+  const analyzeReferenceStyleAction = async (index) => {
+    const ref = references.value[index]
+    if (!ref || !ref.content) return
+
+    if (!apiUrl.value || !apiKey.value || apiKey.value === 'YOUR_KEY') {
+       console.warn('Store: Missing API Key for style analysis')
+       return
+    }
+    
+    // 如果已经有标签，跳过（或者强制刷新？这里假设自动触发仅一次）
+    if (ref.styleTags && ref.styleTags.length > 0) return
+
+    ref.isAnalyzing = true
+    try {
+      const api = new DeepSeekAPI({ url: apiUrl.value, key: apiKey.value })
+      let fullTags = ''
+      
+      console.log(`Store: Analyzing style for reference [${index}]...`)
+      await api.extractStyle(ref.content, (content) => {
+         fullTags += content
+      })
+      
+      // 提取标签 (假设返回格式为 "#标签1 #标签2")
+      const tags = fullTags.match(/#[\w\u4e00-\u9fa5]+/g) || []
+      ref.styleTags = tags
+      console.log('Store: Style tags extracted:', tags)
+    } catch (error) {
+      console.error('Store: Style analysis failed', error)
+    } finally {
+      ref.isAnalyzing = false
+    }
  }

  // 生成内容动作
@@ -50,29 +94,66 @@ export const useAppStore = defineStore('app', () => {
      throw new Error('请先配置 API 地址和 API Key')
    }

-    console.log('Store: generateContentAction 启动')
+    console.log('Store: generateContentAction 启动', { mode: isDeepMode.value ? 'Deep' : 'Standard' })
    isGenerating.value = true
    generatedContent.value = ''
+    generationStage.value = 'draft'

    try {
      const api = new DeepSeekAPI({ url: apiUrl.value, key: apiKey.value })
-      const prompt = buildPrompt(
-        inputTask.value, 
+      
+      // 构建初稿 Prompt
+      const taskContent = inputType.value === 'outline' 
+        ? `核心主题：${outlinePoints.value.topic}\n目标受众：${outlinePoints.value.audience}\n关键观点：\n${outlinePoints.value.keyPoints}`
+        : inputTask.value
+
+      const draftPrompt = buildPrompt(
+        taskContent, 
        [...selectedTags.value, customConstraint.value].filter(Boolean), 
        references.value
      )

-      console.log('Store: 调用 API 生成内容...')
-      await api.generateContent(prompt, (content) => {
-        // console.log('Store: 收到生成内容块', content.length) // Verbose
+      console.log('Store: 生成初稿...')
+      let draftContent = ''
+      await api.generateContent(draftPrompt, (content) => {
        generatedContent.value += content
+        draftContent += content
      })
-      console.log('Store: 生成内容完成')
+
+      // 如果是深度模式，进入 Agentic Workflow
+      if (isDeepMode.value) {
+        // 2. 批判阶段
+        generationStage.value = 'critique'
+        console.log('Store: 进入批判阶段...')
+        generatedContent.value += '\n\n---\n\n💡 **AI 深度反思 (Critique Stage)**：\n正在分析逻辑漏洞与改进空间...\n\n'
+        
+        const critiquePrompt = `你是一个严厉的主编。请分析以下文章的逻辑漏洞、论证强度和风格一致性。请列出3-5条具体的修改建议。不要重写文章，只提供建议。\n\n文章内容：\n${draftContent}`
+        
+        let critiqueContent = ''
+        await api.generateContent(critiquePrompt, (content) => {
+          generatedContent.value += content
+          critiqueContent += content
+        })
+
+        // 3. 修正阶段
+        generationStage.value = 'refine'
+        console.log('Store: 进入修正阶段...')
+        generatedContent.value += '\n\n---\n\n✨ **深度润色 (Refinement Stage)**：\n正在根据反思意见重写...\n\n'
+        
+        const refinePrompt = `你是一个专业的写作专家。请根据以下修改建议，重写这篇文章。保持原文的优秀风格，同时修复提到的问题。\n\n原文：\n${draftContent}\n\n修改建议：\n${critiqueContent}\n\n请直接输出重写后的正文：`
+        
+        await api.generateContent(refinePrompt, (content) => {
+          generatedContent.value += content
+        })
+      }
+
+      console.log('Store: 生成流程完成')
    } catch (error) {
      console.error('Store: 生成内容失败:', error)
      throw error
    } finally {
      isGenerating.value = false
+      generationStage.value = ''
      console.log('Store: isGenerating 重置为 false')
    }
  }
--- a/src/utils/promptBuilder.js
+++ b/src/utils/promptBuilder.js
@@ -12,7 +12,10 @@ export const buildPrompt = (task, constraints, references) => {
    prompt += `# Style Reference Cases\n`;
    prompt += `请深度学习并模仿以下参考资料的语调、用词习惯、句式结构和情感色彩：\n`;
    references.forEach((ref, idx) => {
-      prompt += `<case_${idx + 1} title="${ref.title}">\n${ref.content}\n</case_${idx + 1}>\n\n`;
+      const styleInfo = ref.styleTags && ref.styleTags.length > 0 
+        ? `\nStyle Tags: ${ref.styleTags.join(', ')}` 
+        : '';
+      prompt += `<case_${idx + 1} title="${ref.title}">${styleInfo}\n${ref.content}\n</case_${idx + 1}>\n\n`;
    });
  }