feat: 实现 Ghostwriter Protocol 思维链驱动指令集

- 重构 promptBuilder.js：实现完整的 Chain of Thought 系统提示词模板
- 新增 XML 输出解析器：parseGhostwriterOutput 和 createStreamParser
- 实现动态 Few-Shot：智能裁剪参考案例防止 Token 爆炸
- 更新 DeepSeekAPI：使用 Ghostwriter Protocol 系统提示词
- 更新 appStore：分离 thinking 和 draft 内容，新增流式解析状态机
- 更新 MainContent.vue：新增 AI 思考路径折叠面板，显示风格分析与大纲规划
- 新增生成阶段指示器：thinking -> draft -> critique -> refine

src/components/MainContent.vue

@@ -44,9 +44,48 @@
             <p>在左侧配置参数，点击生成开始写作</p>
           </div>
 
-          <div v-else class="prose prose-invert max-w-none">
-            <div v-html="renderedMarkdown"></div>
-            <span v-if="isGenerating" class="inline-block w-2 h-5 bg-blue-500 ml-1 animate-pulse align-middle"></span>
+          <div v-else class="space-y-4">
+            <!-- AI 思考过程折叠面板 -->
+            <div v-if="thinkingContent || generationStage === 'thinking'" class="bg-indigo-950/30 rounded-lg border border-indigo-500/30 overflow-hidden">
+              <button 
+                @click="isThinkingExpanded = !isThinkingExpanded"
+                class="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-indigo-900/20 transition"
+              >
+                <div class="flex items-center gap-2">
+                  <span class="text-indigo-400">🧠</span>
+                  <span class="text-sm font-medium text-indigo-300">AI 思考路径</span>
+                  <span v-if="generationStage === 'thinking'" class="text-xs px-2 py-0.5 rounded bg-indigo-500/20 text-indigo-400 animate-pulse">
+                    分析中...
+                  </span>
+                  <span v-else class="text-xs text-slate-500">
+                    (风格解构 + 大纲规划)
+                  </span>
+                </div>
+                <span class="text-indigo-400 transition-transform" :class="{ 'rotate-180': isThinkingExpanded }">▼</span>
+              </button>
+              <div v-show="isThinkingExpanded" class="px-4 pb-4 border-t border-indigo-500/20">
+                <div class="prose prose-invert prose-sm max-w-none mt-3 text-slate-300">
+                  <div v-html="renderedThinking"></div>
+                </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-yellow-500': generationStage === 'critique',
+                'bg-green-500': generationStage === 'refine'
+              }"></span>
+              <span>{{ stageLabel }}</span>
+            </div>
+
+            <!-- 正文内容 -->
+            <div class="prose prose-invert max-w-none">
+              <div v-html="renderedMarkdown"></div>
+              <span v-if="isGenerating" class="inline-block w-2 h-5 bg-blue-500 ml-1 animate-pulse align-middle"></span>
+            </div>
           </div>
         </div>
 
@@ -137,6 +176,8 @@ const {
   currentPage,
   showPromptDebug,
   generatedContent,
+  thinkingContent,
+  generationStage,
   isGenerating,
   analysisResult,
   inputTask,
@@ -145,6 +186,10 @@ const {
   references
 } = storeToRefs(appStore)
 
+// AI 思考过程折叠状态
+import { ref } from 'vue'
+const isThinkingExpanded = ref(false)
+
 // 范式定义
 const paradigms = [
   {
@@ -214,7 +259,23 @@ const constructedPrompt = computed(() => {
 
 // 渲染Markdown
 const renderedMarkdown = computed(() => {
-  return marked.parse(generatedContent.value)
+  return marked.parse(generatedContent.value || '')
+})
+
+// 渲染 AI 思考过程
+const renderedThinking = computed(() => {
+  return marked.parse(thinkingContent.value || '')
+})
+
+// 生成阶段标签
+const stageLabel = computed(() => {
+  const labels = {
+    'thinking': '🧠 风格解构 & 大纲规划中...',
+    'draft': '✍️ 正在撰写初稿...',
+    'critique': '💡 AI 深度反思中...',
+    'refine': '✨ 深度润色中...'
+  }
+  return labels[generationStage.value] || ''
 })
 
 // 复制内容