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

- 语义锚定：新增大纲模式输入 (WriterPanel.vue, appStore.js)
- 风格对齐：实现参考案例风格提取与可视化 (DeepSeekAPI.js, appStore.js, WriterPanel.vue)
- 认知模拟：引入深度模式 Agentic Workflow (Draft->Critique->Refine)
- 优化 Prompt 构建：支持风格标签注入 (promptBuilder.js)
- 更新文档：添加第一性原理功能说明 (README.md)

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>