feat: 初始化AI写作工坊项目
- 实现基于Vue 3 + Vite的模块化架构 - 集成DeepSeek API进行内容生成 - 支持写作范式分析功能 - 添加环境变量配置支持 - 完整的项目结构和文档
This commit is contained in:
empty
302
src/components/AnalysisPanel.vue
Normal file
302
src/components/AnalysisPanel.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<aside class="w-[400px] flex flex-col border-r border-slate-700 bg-slate-800 shrink-0">
|
||||
<!-- 头部 -->
|
||||
<header class="p-4 border-b border-slate-700 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="font-bold text-lg text-white flex items-center gap-2">
|
||||
<span class="text-2xl">✍️</span> 写作范式分析
|
||||
</h1>
|
||||
<button
|
||||
@click="switchPage('writer')"
|
||||
class="text-xs px-2 py-1 rounded bg-slate-700 text-slate-300 hover:bg-slate-600 transition"
|
||||
>
|
||||
返回写作
|
||||
</button>
|
||||
</div>
|
||||
<span class="text-xs px-2 py-1 rounded bg-blue-900 text-blue-300 border border-blue-700">Pro版</span>
|
||||
</header>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="flex-1 overflow-y-auto p-4 space-y-6">
|
||||
<!-- 写作范式库 -->
|
||||
<section>
|
||||
<h3 class="text-sm font-medium text-slate-400 mb-4">📚 写作范式库</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="paradigm in paradigms"
|
||||
:key="paradigm.type"
|
||||
@click="selectParadigm(paradigm)"
|
||||
:class="['bg-slate-700/50 rounded-lg p-4 border transition cursor-pointer',
|
||||
selectedParadigm?.type === paradigm.type
|
||||
? 'border-blue-500 bg-blue-900/20'
|
||||
: 'border-slate-600 hover:border-blue-500']"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h4 class="font-medium text-white">{{ paradigm.icon }} {{ paradigm.name }}</h4>
|
||||
<button
|
||||
v-if="selectedParadigm?.type === paradigm.type"
|
||||
@click.stop="applyParadigm(paradigm)"
|
||||
class="text-xs px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-500 transition"
|
||||
>
|
||||
应用到写作
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-xs text-slate-400 mb-2">{{ paradigm.description }}</p>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span
|
||||
v-for="tag in paradigm.tags"
|
||||
:key="tag"
|
||||
:class="['text-xs px-2 py-1 rounded', paradigm.tagClass]"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 范式分析工具 -->
|
||||
<section>
|
||||
<h3 class="text-sm font-medium text-slate-400 mb-4">🔍 范式分析工具</h3>
|
||||
<textarea
|
||||
v-model="analysisText"
|
||||
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="mt-2 flex gap-2">
|
||||
<button
|
||||
@click="analyzeArticle"
|
||||
:disabled="isAnalyzing || !analysisText"
|
||||
class="flex-1 bg-blue-600 hover:bg-blue-500 text-white py-2 rounded-lg text-sm font-medium transition disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{{ isAnalyzing ? '正在分析...' : '分析文章范式' }}
|
||||
</button>
|
||||
<button
|
||||
@click="clearAnalysis"
|
||||
class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg text-sm font-medium transition"
|
||||
>
|
||||
清空
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 分析历史 -->
|
||||
<section v-if="analysisHistory.length > 0">
|
||||
<h3 class="text-sm font-medium text-slate-400 mb-4">📝 分析历史</h3>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="(item, index) in analysisHistory"
|
||||
:key="index"
|
||||
@click="loadHistoryItem(item)"
|
||||
class="bg-slate-700/30 rounded p-3 cursor-pointer hover:bg-slate-700/50 transition text-xs"
|
||||
>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-slate-300">{{ item.paradigm }}</span>
|
||||
<span class="text-slate-500">{{ formatDate(item.timestamp) }}</span>
|
||||
</div>
|
||||
<p class="text-slate-500 mt-1 truncate">{{ item.preview }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useAppStore } from '../stores/app'
|
||||
import DeepSeekAPI from '../api/deepseek.js'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const { analysisText, isAnalyzing, selectedTags, inputTask } = storeToRefs(appStore)
|
||||
|
||||
// 选中的范式
|
||||
const selectedParadigm = ref(null)
|
||||
|
||||
// 分析历史
|
||||
const analysisHistory = ref([])
|
||||
|
||||
const paradigms = [
|
||||
{
|
||||
type: 'tech',
|
||||
name: '技术博客范式',
|
||||
icon: '📝',
|
||||
description: '适用于技术分享、教程类文章',
|
||||
tags: ['问题引入', '解决方案', '代码示例', '总结'],
|
||||
tagClass: 'bg-blue-900/30 text-blue-300',
|
||||
prompt: '请按照技术博客的范式写作，包含：1) 问题背景引入 2) 具体解决方案 3) 代码示例说明 4) 总结与最佳实践',
|
||||
constraints: ['Markdown格式', '总分总结构', '数据支撑']
|
||||
},
|
||||
{
|
||||
type: 'business',
|
||||
name: '商业分析范式',
|
||||
icon: '📊',
|
||||
description: '适用于行业分析、市场报告',
|
||||
tags: ['背景介绍', '数据支撑', '趋势分析', '建议'],
|
||||
tagClass: 'bg-green-900/30 text-green-300',
|
||||
prompt: '请按照商业分析的范式写作，包含：1) 行业背景介绍 2) 数据分析与支撑 3) 趋势预测 4) 战略建议',
|
||||
constraints: ['Markdown格式', '数据支撑', '引用权威来源']
|
||||
},
|
||||
{
|
||||
type: 'marketing',
|
||||
name: '产品文案范式',
|
||||
icon: '🎯',
|
||||
description: '适用于产品介绍、营销文案',
|
||||
tags: ['痛点切入', '价值主张', '功能亮点', '行动号召'],
|
||||
tagClass: 'bg-purple-900/30 text-purple-300',
|
||||
prompt: '请按照产品文案的范式写作，包含：1) 用户痛点切入 2) 核心价值主张 3) 产品功能亮点 4) 明确的行动号召',
|
||||
constraints: ['语气幽默', '严禁被动语态']
|
||||
},
|
||||
{
|
||||
type: 'academic',
|
||||
name: '学术论文范式',
|
||||
icon: '📖',
|
||||
description: '适用于学术写作、研究报告',
|
||||
tags: ['摘要', '引言', '文献综述', '方法论', '结果'],
|
||||
tagClass: 'bg-orange-900/30 text-orange-300',
|
||||
prompt: '请按照学术论文的范式写作，包含：1) 摘要 2) 引言 3) 文献综述 4) 研究方法论 5) 结果与讨论 6) 结论',
|
||||
constraints: ['引用权威来源', '严禁被动语态']
|
||||
}
|
||||
]
|
||||
|
||||
// 选择范式
|
||||
const selectParadigm = (paradigm) => {
|
||||
selectedParadigm.value = paradigm
|
||||
}
|
||||
|
||||
// 应用范式到写作
|
||||
const applyParadigm = (paradigm) => {
|
||||
// 更新写作任务
|
||||
inputTask.value = paradigm.prompt
|
||||
|
||||
// 更新选中的约束标签
|
||||
selectedTags.value = [...paradigm.constraints]
|
||||
|
||||
// 切换到写作页面
|
||||
appStore.switchPage('writer')
|
||||
|
||||
// 显示提示
|
||||
alert(`已应用"${paradigm.name}"到写作任务`)
|
||||
}
|
||||
|
||||
// 分析文章
|
||||
const analyzeArticle = async () => {
|
||||
if (!analysisText.value.trim()) {
|
||||
alert('请输入要分析的文章内容')
|
||||
return
|
||||
}
|
||||
|
||||
isAnalyzing.value = true
|
||||
appStore.analysisResult = null
|
||||
|
||||
try {
|
||||
const api = new DeepSeekAPI({
|
||||
url: appStore.apiUrl,
|
||||
key: appStore.apiKey
|
||||
})
|
||||
|
||||
const result = await api.analyzeContent(analysisText.value)
|
||||
|
||||
// 解析分析结果，提取范式类型
|
||||
const analysisContent = result.choices[0].message.content
|
||||
const detectedParadigm = detectParadigm(analysisContent)
|
||||
|
||||
appStore.analysisResult = {
|
||||
paradigm: detectedParadigm.name,
|
||||
paradigmType: detectedParadigm.type,
|
||||
analysis: analysisContent,
|
||||
timestamp: new Date()
|
||||
}
|
||||
|
||||
// 添加到历史记录
|
||||
addToHistory(detectedParadigm.name, analysisText.value, analysisContent)
|
||||
} catch (error) {
|
||||
appStore.analysisResult = {
|
||||
error: true,
|
||||
message: error.message
|
||||
}
|
||||
} finally {
|
||||
isAnalyzing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 检测文章范式
|
||||
const detectParadigm = (analysis) => {
|
||||
const text = analysis.toLowerCase()
|
||||
|
||||
if (text.includes('技术') || text.includes('代码') || text.includes('问题')) {
|
||||
return paradigms[0] // 技术博客
|
||||
} else if (text.includes('商业') || text.includes('市场') || text.includes('数据')) {
|
||||
return paradigms[1] // 商业分析
|
||||
} else if (text.includes('产品') || text.includes('营销') || text.includes('用户')) {
|
||||
return paradigms[2] // 产品文案
|
||||
} else if (text.includes('学术') || text.includes('研究') || text.includes('文献')) {
|
||||
return paradigms[3] // 学术论文
|
||||
}
|
||||
|
||||
return paradigms[0] // 默认技术博客
|
||||
}
|
||||
|
||||
// 添加到历史记录
|
||||
const addToHistory = (paradigm, text, analysis) => {
|
||||
const historyItem = {
|
||||
paradigm,
|
||||
text,
|
||||
analysis,
|
||||
preview: text.substring(0, 50) + '...',
|
||||
timestamp: new Date()
|
||||
}
|
||||
|
||||
// 限制历史记录数量
|
||||
analysisHistory.value.unshift(historyItem)
|
||||
if (analysisHistory.value.length > 10) {
|
||||
analysisHistory.value = analysisHistory.value.slice(0, 10)
|
||||
}
|
||||
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('analysisHistory', JSON.stringify(analysisHistory.value))
|
||||
}
|
||||
|
||||
// 加载历史记录项
|
||||
const loadHistoryItem = (item) => {
|
||||
analysisText.value = item.text
|
||||
appStore.analysisResult = {
|
||||
paradigm: item.paradigm,
|
||||
analysis: item.analysis,
|
||||
timestamp: item.timestamp
|
||||
}
|
||||
}
|
||||
|
||||
// 清空分析
|
||||
const clearAnalysis = () => {
|
||||
analysisText.value = ''
|
||||
appStore.analysisResult = null
|
||||
selectedParadigm.value = null
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date) => {
|
||||
const now = new Date()
|
||||
const diff = now - new Date(date)
|
||||
const minutes = Math.floor(diff / 60000)
|
||||
const hours = Math.floor(diff / 3600000)
|
||||
const days = Math.floor(diff / 86400000)
|
||||
|
||||
if (minutes < 1) return '刚刚'
|
||||
if (minutes < 60) return `${minutes}分钟前`
|
||||
if (hours < 24) return `${hours}小时前`
|
||||
if (days < 7) return `${days}天前`
|
||||
|
||||
return new Date(date).toLocaleDateString()
|
||||
}
|
||||
|
||||
// 组件挂载时加载历史记录
|
||||
onMounted(() => {
|
||||
const saved = localStorage.getItem('analysisHistory')
|
||||
if (saved) {
|
||||
analysisHistory.value = JSON.parse(saved)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
239
src/components/MainContent.vue
Normal file
239
src/components/MainContent.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<main class="flex-1 flex flex-col bg-slate-950 relative">
|
||||
<!-- Prompt调试面板 -->
|
||||
<div v-if="showPromptDebug && currentPage === 'writer'" class="absolute inset-0 bg-slate-950/95 z-20 p-8 overflow-auto backdrop-blur-sm">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-bold text-yellow-500">🔧 构建的 Prompt 结构预览</h3>
|
||||
<button @click="showPromptDebug = false" class="text-sm text-slate-400 hover:text-white">关闭预览</button>
|
||||
</div>
|
||||
<div class="bg-black/50 p-6 rounded-lg border border-slate-700 font-mono text-sm text-green-400 whitespace-pre-wrap leading-relaxed shadow-inner">
|
||||
{{ constructedPrompt }}
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-slate-500 text-center">此内容将直接发送给 API 接口</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 顶部工具栏 -->
|
||||
<header class="h-14 border-b border-slate-800 flex items-center justify-between px-6 bg-slate-950">
|
||||
<span class="text-sm font-medium text-slate-400">
|
||||
{{ currentPage === 'writer' ? '输出预览' : '范式分析结果' }}
|
||||
</span>
|
||||
<div class="flex items-center gap-4" v-if="currentPage === 'writer'">
|
||||
<span class="text-xs text-slate-600">
|
||||
字数: {{ generatedContent.length }} {{ isGenerating ? '(生成中...)' : '' }}
|
||||
</span>
|
||||
<div class="flex gap-3">
|
||||
<button @click="copyContent" class="text-xs text-slate-400 hover:text-white flex items-center gap-1 transition">
|
||||
📋 复制 Markdown
|
||||
</button>
|
||||
<button @click="clearContent" class="text-xs text-slate-400 hover:text-red-400 flex items-center gap-1 transition">
|
||||
🗑️ 清空
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="flex-1 overflow-y-auto p-8 md:p-12">
|
||||
<div class="max-w-3xl mx-auto min-h-[500px]">
|
||||
<!-- 写作页面内容 -->
|
||||
<div v-if="currentPage === 'writer'">
|
||||
<div v-if="!generatedContent && !isGenerating" class="h-full flex flex-col items-center justify-center text-slate-700 mt-20">
|
||||
<span class="text-6xl mb-4 opacity-20">⌨️</span>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 范式分析页面内容 -->
|
||||
<div v-else class="space-y-8">
|
||||
<div v-if="!analysisResult" class="h-full flex flex-col items-center justify-center text-slate-700 mt-20">
|
||||
<span class="text-6xl mb-4 opacity-20">📊</span>
|
||||
<p>选择左侧的写作范式或使用分析工具</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-6">
|
||||
<div v-if="analysisResult.error" class="bg-red-900/20 rounded-lg p-6 border border-red-700">
|
||||
<h3 class="text-lg font-bold text-red-400 mb-4">分析失败</h3>
|
||||
<p class="text-red-300">{{ analysisResult.message }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-6">
|
||||
<!-- 分析结果头部 -->
|
||||
<div class="bg-slate-900 rounded-lg p-6 border border-slate-700">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-bold text-white">分析结果</h3>
|
||||
<span class="text-xs px-3 py-1 rounded-full bg-blue-900/30 text-blue-300 border border-blue-700">
|
||||
{{ analysisResult.paradigm }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 分析内容 -->
|
||||
<div class="prose prose-invert max-w-none">
|
||||
<div v-html="marked.parse(analysisResult.analysis)"></div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="mt-6 flex gap-3">
|
||||
<button
|
||||
@click="copyAnalysis"
|
||||
class="text-xs px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded transition"
|
||||
>
|
||||
📋 复制分析结果
|
||||
</button>
|
||||
<button
|
||||
@click="applyToWriting"
|
||||
class="text-xs px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded transition"
|
||||
>
|
||||
✍️ 应用到写作
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 范式详情卡片 -->
|
||||
<div v-if="getParadigmDetails()" class="bg-slate-900/50 rounded-lg p-6 border border-slate-700">
|
||||
<h4 class="text-md font-bold text-white mb-4">{{ getParadigmDetails().name }}特点</h4>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<h5 class="text-xs font-medium text-slate-400 mb-2">结构要素</h5>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span
|
||||
v-for="tag in getParadigmDetails().tags"
|
||||
:key="tag"
|
||||
:class="['text-xs px-2 py-1 rounded', getParadigmDetails().tagClass]"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-xs font-medium text-slate-400 mb-2">适用场景</h5>
|
||||
<p class="text-xs text-slate-300">{{ getParadigmDetails().description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useAppStore } from '../stores/app'
|
||||
import { buildPrompt } from '../utils/promptBuilder.js'
|
||||
import { marked } from 'marked'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const {
|
||||
currentPage,
|
||||
showPromptDebug,
|
||||
generatedContent,
|
||||
isGenerating,
|
||||
analysisResult,
|
||||
inputTask,
|
||||
selectedTags,
|
||||
customConstraint,
|
||||
references
|
||||
} = storeToRefs(appStore)
|
||||
|
||||
// 范式定义
|
||||
const paradigms = [
|
||||
{
|
||||
type: 'tech',
|
||||
name: '技术博客范式',
|
||||
description: '适用于技术分享、教程类文章',
|
||||
tags: ['问题引入', '解决方案', '代码示例', '总结'],
|
||||
tagClass: 'bg-blue-900/30 text-blue-300',
|
||||
prompt: '请按照技术博客的范式写作，包含：1) 问题背景引入 2) 具体解决方案 3) 代码示例说明 4) 总结与最佳实践',
|
||||
constraints: ['Markdown格式', '总分总结构', '数据支撑']
|
||||
},
|
||||
{
|
||||
type: 'business',
|
||||
name: '商业分析范式',
|
||||
description: '适用于行业分析、市场报告',
|
||||
tags: ['背景介绍', '数据支撑', '趋势分析', '建议'],
|
||||
tagClass: 'bg-green-900/30 text-green-300',
|
||||
prompt: '请按照商业分析的范式写作，包含：1) 行业背景介绍 2) 数据分析与支撑 3) 趋势预测 4) 战略建议',
|
||||
constraints: ['Markdown格式', '数据支撑', '引用权威来源']
|
||||
},
|
||||
{
|
||||
type: 'marketing',
|
||||
name: '产品文案范式',
|
||||
description: '适用于产品介绍、营销文案',
|
||||
tags: ['痛点切入', '价值主张', '功能亮点', '行动号召'],
|
||||
tagClass: 'bg-purple-900/30 text-purple-300',
|
||||
prompt: '请按照产品文案的范式写作，包含：1) 用户痛点切入 2) 核心价值主张 3) 产品功能亮点 4) 明确的行动号召',
|
||||
constraints: ['语气幽默', '严禁被动语态']
|
||||
},
|
||||
{
|
||||
type: 'academic',
|
||||
name: '学术论文范式',
|
||||
description: '适用于学术写作、研究报告',
|
||||
tags: ['摘要', '引言', '文献综述', '方法论', '结果'],
|
||||
tagClass: 'bg-orange-900/30 text-orange-300',
|
||||
prompt: '请按照学术论文的范式写作，包含：1) 摘要 2) 引言 3) 文献综述 4) 研究方法论 5) 结果与讨论 6) 结论',
|
||||
constraints: ['引用权威来源', '严禁被动语态']
|
||||
}
|
||||
]
|
||||
|
||||
// 计算构建的Prompt
|
||||
const constructedPrompt = computed(() => {
|
||||
return buildPrompt(
|
||||
inputTask.value,
|
||||
[...selectedTags.value, customConstraint.value].filter(Boolean),
|
||||
references.value
|
||||
)
|
||||
})
|
||||
|
||||
// 渲染Markdown
|
||||
const renderedMarkdown = computed(() => {
|
||||
return marked.parse(generatedContent.value)
|
||||
})
|
||||
|
||||
// 复制内容
|
||||
const copyContent = () => {
|
||||
navigator.clipboard.writeText(generatedContent.value)
|
||||
alert('已复制到剪贴板')
|
||||
}
|
||||
|
||||
// 清空内容
|
||||
const clearContent = () => {
|
||||
generatedContent.value = ''
|
||||
}
|
||||
|
||||
// 复制分析结果
|
||||
const copyAnalysis = () => {
|
||||
if (analysisResult.value) {
|
||||
navigator.clipboard.writeText(analysisResult.value.analysis)
|
||||
alert('分析结果已复制到剪贴板')
|
||||
}
|
||||
}
|
||||
|
||||
// 应用到写作
|
||||
const applyToWriting = () => {
|
||||
if (analysisResult.value) {
|
||||
const paradigm = getParadigmDetails()
|
||||
if (paradigm) {
|
||||
inputTask.value = paradigm.prompt
|
||||
selectedTags.value = [...paradigm.constraints]
|
||||
appStore.switchPage('writer')
|
||||
alert(`已应用"${paradigm.name}"到写作任务`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取范式详情
|
||||
const getParadigmDetails = () => {
|
||||
if (!analysisResult.value?.paradigmType) return null
|
||||
return paradigms.find(p => p.type === analysisResult.value.paradigmType)
|
||||
}
|
||||
</script>
|
||||
230
src/components/WriterPanel.vue
Normal file
230
src/components/WriterPanel.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<aside class="w-[400px] flex flex-col border-r border-slate-700 bg-slate-800 shrink-0">
|
||||
<!-- 头部 -->
|
||||
<header class="p-4 border-b border-slate-700 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="font-bold text-lg text-white flex items-center gap-2">
|
||||
<span class="text-2xl">✍️</span> AI 写作工坊
|
||||
</h1>
|
||||
</div>
|
||||
<span class="text-xs px-2 py-1 rounded bg-blue-900 text-blue-300 border border-blue-700">Pro版</span>
|
||||
</header>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- 参考案例 -->
|
||||
<section>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-sm font-medium text-slate-400">2. 参考案例 (Style Ref)</label>
|
||||
<button @click="showRefInput = !showRefInput" class="text-xs text-blue-400 hover:text-blue-300">
|
||||
{{ showRefInput ? '取消' : '+ 添加案例' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="showRefInput" class="mb-3 p-3 bg-slate-900 rounded-lg border border-blue-500/30">
|
||||
<input v-model="newRefTitle" placeholder="案例标题" class="w-full mb-2 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs outline-none">
|
||||
<textarea v-model="newRefContent" placeholder="粘贴优秀的参考文本..." class="w-full h-24 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs outline-none resize-none mb-2"></textarea>
|
||||
<button @click="addReference" class="w-full bg-blue-600 hover:bg-blue-500 text-xs py-1.5 rounded text-white">确认添加</button>
|
||||
</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">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<!-- 输出规范 -->
|
||||
<section>
|
||||
<label class="block text-sm font-medium text-slate-400 mb-2">3. 输出规范 (Constraints)</label>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<button
|
||||
v-for="tag in presetTags"
|
||||
:key="tag"
|
||||
@click="toggleTag(tag)"
|
||||
:class="['px-2 py-1 rounded text-xs border transition',
|
||||
selectedTags.includes(tag)
|
||||
? 'bg-blue-600/20 border-blue-500 text-blue-300'
|
||||
: 'bg-slate-900 border-slate-700 text-slate-500 hover:border-slate-500']"
|
||||
>
|
||||
{{ tag }}
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
v-model="customConstraint"
|
||||
type="text"
|
||||
class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs focus:border-blue-500 outline-none"
|
||||
placeholder="补充其他要求"
|
||||
>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作区 -->
|
||||
<footer class="p-4 bg-slate-800 border-t border-slate-700 space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" v-model="showPromptDebug" class="hidden">
|
||||
<div class="w-8 h-4 bg-slate-900 rounded-full border border-slate-600 relative transition-colors" :class="{'bg-blue-900 border-blue-500': showPromptDebug}">
|
||||
<div class="w-2 h-2 bg-slate-400 rounded-full absolute top-1 left-1 transition-transform" :class="{'translate-x-4 bg-blue-400': showPromptDebug}"></div>
|
||||
</div>
|
||||
<span class="text-xs text-slate-500 select-none">预览构建的 Prompt</span>
|
||||
</label>
|
||||
<span class="text-xs text-slate-600">deepseek</span>
|
||||
</div>
|
||||
|
||||
<!-- API配置 -->
|
||||
<div class="space-y-2">
|
||||
<input
|
||||
v-model="apiUrl"
|
||||
type="text"
|
||||
class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs focus:border-blue-500 outline-none"
|
||||
placeholder="API 地址"
|
||||
>
|
||||
<input
|
||||
v-model="apiKey"
|
||||
type="password"
|
||||
class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-xs focus:border-blue-500 outline-none"
|
||||
placeholder="API Key"
|
||||
>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="generateContent"
|
||||
:disabled="isGenerating || !inputTask"
|
||||
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'"
|
||||
>
|
||||
<span v-if="isGenerating" class="animate-spin text-lg">↻</span>
|
||||
{{ isGenerating ? '正在思考与撰写...' : '开始生成文稿' }}
|
||||
</button>
|
||||
</footer>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useAppStore } from '../stores/app'
|
||||
import { buildPrompt } from '../utils/promptBuilder.js'
|
||||
import DeepSeekAPI from '../api/deepseek.js'
|
||||
import { marked } from 'marked'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const {
|
||||
inputTask,
|
||||
references,
|
||||
showRefInput,
|
||||
newRefTitle,
|
||||
newRefContent,
|
||||
selectedTags,
|
||||
customConstraint,
|
||||
isGenerating,
|
||||
generatedContent,
|
||||
showPromptDebug,
|
||||
apiUrl,
|
||||
apiKey
|
||||
} = storeToRefs(appStore)
|
||||
|
||||
const presetTags = ['Markdown格式', '总分总结构', '数据支撑', '语气幽默', '严禁被动语态', '引用权威来源']
|
||||
|
||||
// 添加参考案例
|
||||
const addReference = () => {
|
||||
if (!newRefTitle.value || !newRefContent.value) return
|
||||
references.value.push({
|
||||
title: newRefTitle.value,
|
||||
content: newRefContent.value
|
||||
})
|
||||
newRefTitle.value = ''
|
||||
newRefContent.value = ''
|
||||
showRefInput.value = false
|
||||
}
|
||||
|
||||
// 删除参考案例
|
||||
const removeReference = (index) => {
|
||||
references.value.splice(index, 1)
|
||||
}
|
||||
|
||||
// 切换标签
|
||||
const toggleTag = (tag) => {
|
||||
if (selectedTags.value.includes(tag)) {
|
||||
selectedTags.value = selectedTags.value.filter(t => t !== tag)
|
||||
} else {
|
||||
selectedTags.value.push(tag)
|
||||
}
|
||||
}
|
||||
|
||||
// 生成内容
|
||||
const generateContent = async () => {
|
||||
if (!apiUrl.value || !apiKey.value || apiKey.value === 'YOUR_KEY') {
|
||||
alert('请先配置 API 地址和 API Key')
|
||||
return
|
||||
}
|
||||
|
||||
isGenerating.value = true
|
||||
generatedContent.value = ''
|
||||
|
||||
try {
|
||||
const api = new DeepSeekAPI({ url: apiUrl.value, key: apiKey.value })
|
||||
const prompt = buildPrompt(inputTask.value, [...selectedTags.value, customConstraint.value].filter(Boolean), references.value)
|
||||
|
||||
const response = await api.generateContent(prompt)
|
||||
const reader = response.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
|
||||
const chunk = decoder.decode(value)
|
||||
const content = parseStreamResponse(chunk)
|
||||
generatedContent.value += content
|
||||
}
|
||||
} catch (error) {
|
||||
generatedContent.value = `## 错误\n\n${error.message}\n\n请检查 API 配置是否正确。`
|
||||
} finally {
|
||||
isGenerating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 解析流式响应
|
||||
const parseStreamResponse = (chunk) => {
|
||||
const lines = chunk.split('\n').filter(line => line.trim())
|
||||
const contents = []
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('data: ')) {
|
||||
const data = line.slice(6)
|
||||
if (data === '[DONE]') continue
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(data)
|
||||
const content = parsed.choices?.[0]?.delta?.content || ''
|
||||
if (content) contents.push(content)
|
||||
} catch (e) {
|
||||
// 忽略解析错误
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return contents.join('')
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user