feat: 初始化AI写作工坊项目
- 实现基于Vue 3 + Vite的模块化架构 - 集成DeepSeek API进行内容生成 - 支持写作范式分析功能 - 添加环境变量配置支持 - 完整的项目结构和文档
This commit is contained in:
empty
7
.env.example
Normal file
7
.env.example
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
# DeepSeek API 配置
|
||||||
|
VITE_API_URL=https://api.deepseek.com/chat/completions
|
||||||
|
VITE_API_KEY=your_deepseek_api_key_here
|
||||||
|
|
||||||
|
# 其他中继平台配置示例
|
||||||
|
# VITE_API_URL=https://your-kong-gateway.com/v1/chat/completions
|
||||||
|
# VITE_API_KEY=your_bearer_token_here
|
||||||
35
.gitignore
vendored
Normal file
35
.gitignore
vendored
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
# 依赖
|
||||||
|
node_modules/
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# 构建输出
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
|
||||||
|
# 环境变量
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
|
||||||
|
# 系统文件
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# 日志
|
||||||
|
logs/
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# 测试覆盖率
|
||||||
|
coverage/
|
||||||
|
|
||||||
|
# 临时文件
|
||||||
|
*.tmp
|
||||||
|
*.temp
|
||||||
150
README.md
Normal file
150
README.md
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
# AI 写作工坊 - 模块化版本
|
||||||
|
|
||||||
|
一个基于 Vue 3 + Vite 的专业 AI 写作辅助工具，支持结构化内容生成和写作范式分析。
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- **框架**: Vue 3 (Composition API)
|
||||||
|
- **构建工具**: Vite
|
||||||
|
- **状态管理**: Pinia
|
||||||
|
- **HTTP 客户端**: Axios
|
||||||
|
- **Markdown 解析**: Marked
|
||||||
|
- **样式**: Tailwind CSS
|
||||||
|
|
||||||
|
## 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── components/ # Vue 组件
|
||||||
|
│ ├── WriterPanel.vue # 写作面板
|
||||||
|
│ ├── AnalysisPanel.vue # 范式分析面板
|
||||||
|
│ └── MainContent.vue # 主内容区
|
||||||
|
├── stores/ # Pinia 状态管理
|
||||||
|
│ └── app.js # 应用主状态
|
||||||
|
├── api/ # API 接口
|
||||||
|
│ └── deepseek.js # DeepSeek API 封装
|
||||||
|
├── utils/ # 工具函数
|
||||||
|
│ └── promptBuilder.js # Prompt 构建器
|
||||||
|
├── App.vue # 根组件
|
||||||
|
└── main.js # 入口文件
|
||||||
|
```
|
||||||
|
|
||||||
|
## 功能特性
|
||||||
|
|
||||||
|
### 1. AI 写作工坊
|
||||||
|
- 自定义写作任务输入
|
||||||
|
- 参考案例管理
|
||||||
|
- 输出规范标签系统
|
||||||
|
- 实时流式内容生成
|
||||||
|
- Prompt 调试预览
|
||||||
|
|
||||||
|
### 2. 写作范式分析
|
||||||
|
- 预设写作范式库
|
||||||
|
- 文章智能分析
|
||||||
|
- 结构化结果展示
|
||||||
|
|
||||||
|
### 3. 配置管理
|
||||||
|
- API 地址配置
|
||||||
|
- API Key 管理
|
||||||
|
- 支持多种中继平台
|
||||||
|
|
||||||
|
## 快速开始
|
||||||
|
|
||||||
|
### 安装依赖
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### 开发模式
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### 构建生产版本
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### 预览生产版本
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
## 配置说明
|
||||||
|
|
||||||
|
### 环境变量配置
|
||||||
|
1. 复制环境变量示例文件：
|
||||||
|
```bash
|
||||||
|
cp .env.example .env
|
||||||
|
```
|
||||||
|
|
||||||
|
2. 编辑 `.env` 文件，配置您的 API 信息：
|
||||||
|
```env
|
||||||
|
# DeepSeek API 配置
|
||||||
|
VITE_API_URL=https://api.deepseek.com/chat/completions
|
||||||
|
VITE_API_KEY=your_actual_api_key_here
|
||||||
|
```
|
||||||
|
|
||||||
|
### 支持的模型
|
||||||
|
- deepseek-chat（默认）
|
||||||
|
- 可扩展支持其他兼容 OpenAI 格式的模型
|
||||||
|
|
||||||
|
### 安全提示
|
||||||
|
- `.env` 文件已添加到 `.gitignore`，不会被提交到版本控制
|
||||||
|
- 生产环境请使用服务器环境变量或密钥管理服务
|
||||||
|
|
||||||
|
## 开发指南
|
||||||
|
|
||||||
|
### 添加新的写作范式
|
||||||
|
在 `src/components/AnalysisPanel.vue` 中的 `paradigms` 数组添加新范式：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
type: 'new-type',
|
||||||
|
name: '新范式名称',
|
||||||
|
icon: '🎯',
|
||||||
|
description: '描述信息',
|
||||||
|
tags: ['标签1', '标签2'],
|
||||||
|
tagClass: 'bg-color-900/30 text-color-300'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 扩展 API 支持
|
||||||
|
在 `src/api/` 目录下创建新的 API 类，继承基础接口：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import BaseAPI from './base.js'
|
||||||
|
|
||||||
|
export default class NewAPI extends BaseAPI {
|
||||||
|
// 实现具体方法
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义 Prompt 模板
|
||||||
|
在 `src/utils/promptBuilder.js` 中修改 `buildPrompt` 函数：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
export const buildPrompt = (task, constraints, references) => {
|
||||||
|
// 自定义构建逻辑
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 部署建议
|
||||||
|
|
||||||
|
### 静态部署
|
||||||
|
- Vercel
|
||||||
|
- Netlify
|
||||||
|
- GitHub Pages
|
||||||
|
|
||||||
|
### 服务器部署
|
||||||
|
- Nginx + PM2
|
||||||
|
- Docker 容器化
|
||||||
|
- CDN 加速
|
||||||
|
|
||||||
|
## 许可证
|
||||||
|
|
||||||
|
MIT License
|
||||||
31
index.html
Normal file
31
index.html
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AI 写作工坊 - 结构化生成工具</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 自定义滚动条样式，适配深色主题 */
|
||||||
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||||
|
::-webkit-scrollbar-track { background: #1e293b; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
|
||||||
|
::-webkit-scrollbar-thumb:hover { background: #64748b; }
|
||||||
|
|
||||||
|
/* Markdown 内容样式覆盖 */
|
||||||
|
.prose h1, .prose h2, .prose h3 { color: #e2e8f0; margin-top: 1.5em; margin-bottom: 0.8em; }
|
||||||
|
.prose p { margin-bottom: 1.2em; line-height: 1.75; color: #cbd5e1; }
|
||||||
|
.prose ul { list-style-type: disc; padding-left: 1.5em; margin-bottom: 1.2em; color: #cbd5e1; }
|
||||||
|
.prose strong { color: #60a5fa; font-weight: 600; }
|
||||||
|
.prose blockquote { border-left-color: #3b82f6; background: #1e293b; padding: 0.5rem 1rem; font-style: italic; }
|
||||||
|
.prose code { background: #334155; padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; color: #f8fafc; }
|
||||||
|
|
||||||
|
[v-cloak] { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-slate-900 text-slate-200 h-screen overflow-hidden font-sans">
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
562
index.html.backup
Normal file
562
index.html.backup
Normal file
@@ -0,0 +1,562 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AI 写作工坊 - 结构化生成工具</title>
|
||||||
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 自定义滚动条样式，适配深色主题 */
|
||||||
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||||
|
::-webkit-scrollbar-track { background: #1e293b; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
|
||||||
|
::-webkit-scrollbar-thumb:hover { background: #64748b; }
|
||||||
|
|
||||||
|
/* Markdown 内容样式覆盖 */
|
||||||
|
.prose h1, .prose h2, .prose h3 { color: #e2e8f0; margin-top: 1.5em; margin-bottom: 0.8em; }
|
||||||
|
.prose p { margin-bottom: 1.2em; line-height: 1.75; color: #cbd5e1; }
|
||||||
|
.prose ul { list-style-type: disc; padding-left: 1.5em; margin-bottom: 1.2em; color: #cbd5e1; }
|
||||||
|
.prose strong { color: #60a5fa; font-weight: 600; }
|
||||||
|
.prose blockquote { border-left-color: #3b82f6; background: #1e293b; padding: 0.5rem 1rem; font-style: italic; }
|
||||||
|
.prose code { background: #334155; padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; color: #f8fafc; }
|
||||||
|
|
||||||
|
[v-cloak] { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-slate-900 text-slate-200 h-screen overflow-hidden font-sans">
|
||||||
|
|
||||||
|
<div id="app" v-cloak class="flex h-full">
|
||||||
|
|
||||||
|
<aside class="w-[400px] flex flex-col border-r border-slate-700 bg-slate-800 shrink-0">
|
||||||
|
|
||||||
|
<div 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>
|
||||||
|
<span v-if="currentPage === 'writer'">AI 写作工坊</span>
|
||||||
|
<span v-else>写作范式分析</span>
|
||||||
|
</h1>
|
||||||
|
<button
|
||||||
|
@click="currentPage = currentPage === 'writer' ? 'analysis' : 'writer'"
|
||||||
|
class="text-xs px-2 py-1 rounded bg-slate-700 text-slate-300 hover:bg-slate-600 transition"
|
||||||
|
>
|
||||||
|
{{ currentPage === 'writer' ? '写作范式' : '返回写作' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs px-2 py-1 rounded bg-blue-900 text-blue-300 border border-blue-700">Pro版</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-1 overflow-y-auto p-4 space-y-6" v-if="currentPage === 'writer'">
|
||||||
|
|
||||||
|
<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 v-if="references.length === 0" class="text-xs text-slate-600 text-center py-4 border border-dashed border-slate-700 rounded">
|
||||||
|
暂无参考案例，AI 将自由发挥
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<div class="p-4 bg-slate-800 border-t border-slate-700 space-y-3 z-10">
|
||||||
|
<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 地址: https://your-kong-gateway.com/v1/chat/completions"
|
||||||
|
>
|
||||||
|
<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: Bearer YOUR_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>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- 写作范式分析页面 -->
|
||||||
|
<aside v-if="currentPage === 'analysis'" class="w-[400px] flex flex-col border-r border-slate-700 bg-slate-800 shrink-0">
|
||||||
|
<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 class="bg-slate-700/50 rounded-lg p-4 border border-slate-600 hover:border-blue-500 transition cursor-pointer">
|
||||||
|
<h4 class="font-medium text-white mb-2">📝 技术博客范式</h4>
|
||||||
|
<p class="text-xs text-slate-400 mb-2">适用于技术分享、教程类文章</p>
|
||||||
|
<div class="flex flex-wrap gap-1">
|
||||||
|
<span class="text-xs px-2 py-1 bg-blue-900/30 text-blue-300 rounded">问题引入</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-blue-900/30 text-blue-300 rounded">解决方案</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-blue-900/30 text-blue-300 rounded">代码示例</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-blue-900/30 text-blue-300 rounded">总结</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-slate-700/50 rounded-lg p-4 border border-slate-600 hover:border-blue-500 transition cursor-pointer">
|
||||||
|
<h4 class="font-medium text-white mb-2">📊 商业分析范式</h4>
|
||||||
|
<p class="text-xs text-slate-400 mb-2">适用于行业分析、市场报告</p>
|
||||||
|
<div class="flex flex-wrap gap-1">
|
||||||
|
<span class="text-xs px-2 py-1 bg-green-900/30 text-green-300 rounded">背景介绍</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-green-900/30 text-green-300 rounded">数据支撑</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-green-900/30 text-green-300 rounded">趋势分析</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-green-900/30 text-green-300 rounded">建议</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-slate-700/50 rounded-lg p-4 border border-slate-600 hover:border-blue-500 transition cursor-pointer">
|
||||||
|
<h4 class="font-medium text-white mb-2">🎯 产品文案范式</h4>
|
||||||
|
<p class="text-xs text-slate-400 mb-2">适用于产品介绍、营销文案</p>
|
||||||
|
<div class="flex flex-wrap gap-1">
|
||||||
|
<span class="text-xs px-2 py-1 bg-purple-900/30 text-purple-300 rounded">痛点切入</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-purple-900/30 text-purple-300 rounded">价值主张</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-purple-900/30 text-purple-300 rounded">功能亮点</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-purple-900/30 text-purple-300 rounded">行动号召</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-slate-700/50 rounded-lg p-4 border border-slate-600 hover:border-blue-500 transition cursor-pointer">
|
||||||
|
<h4 class="font-medium text-white mb-2">📖 学术论文范式</h4>
|
||||||
|
<p class="text-xs text-slate-400 mb-2">适用于学术写作、研究报告</p>
|
||||||
|
<div class="flex flex-wrap gap-1">
|
||||||
|
<span class="text-xs px-2 py-1 bg-orange-900/30 text-orange-300 rounded">摘要</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-orange-900/30 text-orange-300 rounded">引言</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-orange-900/30 text-orange-300 rounded">文献综述</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-orange-900/30 text-orange-300 rounded">方法论</span>
|
||||||
|
<span class="text-xs px-2 py-1 bg-orange-900/30 text-orange-300 rounded">结果</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>
|
||||||
|
<button
|
||||||
|
@click="analyzeArticleParadigm"
|
||||||
|
:disabled="isAnalyzing || !analysisText"
|
||||||
|
class="mt-3 w-full 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>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="flex-1 flex flex-col bg-slate-950 relative">
|
||||||
|
|
||||||
|
<div v-if="showPromptDebug" 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>
|
||||||
|
|
||||||
|
<div 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="generatedContent = ''" class="text-xs text-slate-400 hover:text-red-400 flex items-center gap-1 transition">
|
||||||
|
🗑️ 清空
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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="bg-slate-900 rounded-lg p-6 border border-slate-700">
|
||||||
|
<h3 class="text-lg font-bold text-white mb-4">分析结果</h3>
|
||||||
|
<div class="prose prose-invert max-w-none">
|
||||||
|
<div v-html="marked.parse(analysisResult.analysis)"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const { createApp, computed, ref } = Vue;
|
||||||
|
|
||||||
|
createApp({
|
||||||
|
setup() {
|
||||||
|
// --- 状态数据 ---
|
||||||
|
const inputTask = ref('请帮我写一篇关于“AI 辅助编程如何改变软件开发流程”的博客文章，面向中级程序员。');
|
||||||
|
|
||||||
|
// 参考案例相关
|
||||||
|
const references = ref([
|
||||||
|
{ title: '示例：技术博客风格.txt', content: '本文深入探讨了...（此处省略2000字，这是为了让AI模仿这种干练的技术风格）...' }
|
||||||
|
]);
|
||||||
|
const showRefInput = ref(false);
|
||||||
|
const newRefTitle = ref('');
|
||||||
|
const newRefContent = ref('');
|
||||||
|
|
||||||
|
// 规范相关
|
||||||
|
const presetTags = ['Markdown格式', '总分总结构', '数据支撑', '语气幽默', '严禁被动语态', '引用权威来源'];
|
||||||
|
const selectedTags = ref(['Markdown格式', '总分总结构']);
|
||||||
|
const customConstraint = ref('');
|
||||||
|
|
||||||
|
// 生成相关
|
||||||
|
const isGenerating = ref(false);
|
||||||
|
const generatedContent = ref('');
|
||||||
|
const showPromptDebug = ref(false);
|
||||||
|
|
||||||
|
// 页面切换
|
||||||
|
const currentPage = ref('writer'); // 'writer' 或 'analysis'
|
||||||
|
|
||||||
|
// 范式分析相关
|
||||||
|
const analysisText = ref('');
|
||||||
|
const analysisResult = ref(null);
|
||||||
|
const isAnalyzing = ref(false);
|
||||||
|
|
||||||
|
// API 配置
|
||||||
|
const apiUrl = ref('https://api.deepseek.com/chat/completions');
|
||||||
|
const apiKey = ref('YOUR_KEY');
|
||||||
|
|
||||||
|
// --- 核心逻辑：Meta-Prompt 组装器 ---
|
||||||
|
const constructedPrompt = computed(() => {
|
||||||
|
let prompt = `# Role\n你是一个资深的专业写作助手，请严格按照以下要求进行创作。\n\n`;
|
||||||
|
|
||||||
|
// 1. 注入规范
|
||||||
|
prompt += `# System Constraints (必须遵守)\n`;
|
||||||
|
selectedTags.value.forEach(tag => prompt += `- ${tag}\n`);
|
||||||
|
if (customConstraint.value) prompt += `- ${customConstraint.value}\n`;
|
||||||
|
prompt += `\n`;
|
||||||
|
|
||||||
|
// 2. 注入参考案例 (Few-Shot)
|
||||||
|
if (references.value.length > 0) {
|
||||||
|
prompt += `# Reference Cases (请模仿以下风格)\n`;
|
||||||
|
references.value.forEach((ref, idx) => {
|
||||||
|
prompt += `<case_${idx + 1} title="${ref.title}">\n${ref.content}\n</case_${idx + 1}>\n\n`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 注入用户任务
|
||||||
|
prompt += `# Current Task (User Input)\n${inputTask.value}`;
|
||||||
|
|
||||||
|
return prompt;
|
||||||
|
});
|
||||||
|
|
||||||
|
const renderedMarkdown = computed(() => {
|
||||||
|
return marked.parse(generatedContent.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- 方法 ---
|
||||||
|
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 response = await fetch(apiUrl.value, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${apiKey.value}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
model: 'deepseek-chat',
|
||||||
|
messages: [
|
||||||
|
{
|
||||||
|
role: 'system',
|
||||||
|
content: '你是一个资深的专业写作助手，请严格按照用户的要求进行创作。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'user',
|
||||||
|
content: constructedPrompt.value
|
||||||
|
}
|
||||||
|
],
|
||||||
|
stream: true,
|
||||||
|
temperature: 0.7
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorText = await response.text();
|
||||||
|
console.error('API Error Response:', errorText);
|
||||||
|
throw new Error(`API 请求失败: ${response.status} ${response.statusText}\n\n详细信息: ${errorText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 lines = chunk.split('\n').filter(line => line.trim());
|
||||||
|
|
||||||
|
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 || '';
|
||||||
|
generatedContent.value += content;
|
||||||
|
} catch (e) {
|
||||||
|
// 忽略解析错误
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
generatedContent.value = `## 错误\n\n${error.message}\n\n请检查 API 配置是否正确。`;
|
||||||
|
} finally {
|
||||||
|
isGenerating.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyContent = () => {
|
||||||
|
navigator.clipboard.writeText(generatedContent.value);
|
||||||
|
alert('已复制到剪贴板');
|
||||||
|
};
|
||||||
|
|
||||||
|
const analyzeArticleParadigm = async () => {
|
||||||
|
if (!analysisText.value.trim()) {
|
||||||
|
alert('请输入要分析的文章内容');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
isAnalyzing.value = true;
|
||||||
|
analysisResult.value = null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(apiUrl.value, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${apiKey.value}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
model: 'deepseek-chat',
|
||||||
|
messages: [
|
||||||
|
{
|
||||||
|
role: 'system',
|
||||||
|
content: '你是一个专业的写作分析师，擅长分析文章的写作范式、结构和特点。请从以下几个方面分析文章：1. 主要写作范式类型 2. 文章结构特点 3. 语言风格特征 4. 目标读者群体 5. 写作技巧总结。请用简洁明了的语言回答。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'user',
|
||||||
|
content: `请分析以下文章的写作范式：\n\n${analysisText.value}`
|
||||||
|
}
|
||||||
|
],
|
||||||
|
stream: false,
|
||||||
|
temperature: 0.3
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`分析请求失败: ${response.status} ${response.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
analysisResult.value = {
|
||||||
|
paradigm: '技术博客范式',
|
||||||
|
features: [
|
||||||
|
'采用问题-解决方案的叙述结构',
|
||||||
|
'包含大量代码示例',
|
||||||
|
'语言简洁，逻辑清晰'
|
||||||
|
],
|
||||||
|
analysis: data.choices[0].message.content
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
analysisResult.value = {
|
||||||
|
error: true,
|
||||||
|
message: error.message
|
||||||
|
};
|
||||||
|
} finally {
|
||||||
|
isAnalyzing.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
inputTask,
|
||||||
|
references,
|
||||||
|
showRefInput,
|
||||||
|
newRefTitle,
|
||||||
|
newRefContent,
|
||||||
|
presetTags,
|
||||||
|
selectedTags,
|
||||||
|
customConstraint,
|
||||||
|
isGenerating,
|
||||||
|
generatedContent,
|
||||||
|
showPromptDebug,
|
||||||
|
currentPage,
|
||||||
|
analysisText,
|
||||||
|
analysisResult,
|
||||||
|
isAnalyzing,
|
||||||
|
apiUrl,
|
||||||
|
apiKey,
|
||||||
|
constructedPrompt,
|
||||||
|
renderedMarkdown,
|
||||||
|
addReference,
|
||||||
|
removeReference,
|
||||||
|
toggleTag,
|
||||||
|
generateContent,
|
||||||
|
copyContent,
|
||||||
|
analyzeArticleParadigm
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}).mount('#app');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1557
package-lock.json
generated
Normal file
1557
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
package.json
Normal file
21
package.json
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "ai-writer-workshop",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.4.0",
|
||||||
|
"pinia": "^2.1.0",
|
||||||
|
"axios": "^1.6.0",
|
||||||
|
"marked": "^9.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^4.5.0",
|
||||||
|
"vite": "^5.0.0",
|
||||||
|
"dotenv": "^16.3.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
21
src/App.vue
Normal file
21
src/App.vue
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex h-full">
|
||||||
|
<!-- 左侧面板 -->
|
||||||
|
<WriterPanel v-if="currentPage === 'writer'" />
|
||||||
|
<AnalysisPanel v-else />
|
||||||
|
|
||||||
|
<!-- 右侧主内容区 -->
|
||||||
|
<MainContent />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { useAppStore } from './stores/app'
|
||||||
|
import WriterPanel from './components/WriterPanel.vue'
|
||||||
|
import AnalysisPanel from './components/AnalysisPanel.vue'
|
||||||
|
import MainContent from './components/MainContent.vue'
|
||||||
|
|
||||||
|
const appStore = useAppStore()
|
||||||
|
const currentPage = computed(() => appStore.currentPage)
|
||||||
|
</script>
|
||||||
66
src/api/deepseek.js
Normal file
66
src/api/deepseek.js
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
class DeepSeekAPI {
|
||||||
|
constructor(config) {
|
||||||
|
this.baseURL = config.url
|
||||||
|
this.apiKey = config.key
|
||||||
|
this.client = axios.create({
|
||||||
|
baseURL: this.baseURL,
|
||||||
|
timeout: 60000,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async generateContent(prompt, options = {}) {
|
||||||
|
const response = await this.client.post('', {
|
||||||
|
model: 'deepseek-chat',
|
||||||
|
messages: [
|
||||||
|
{
|
||||||
|
role: 'system',
|
||||||
|
content: '你是一个资深的专业写作助手，请严格按照用户的要求进行创作。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'user',
|
||||||
|
content: prompt
|
||||||
|
}
|
||||||
|
],
|
||||||
|
stream: true,
|
||||||
|
temperature: 0.7,
|
||||||
|
...options
|
||||||
|
}, {
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${this.apiKey}`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return response
|
||||||
|
}
|
||||||
|
|
||||||
|
async analyzeContent(text) {
|
||||||
|
const response = await this.client.post('', {
|
||||||
|
model: 'deepseek-chat',
|
||||||
|
messages: [
|
||||||
|
{
|
||||||
|
role: 'system',
|
||||||
|
content: '你是一个专业的写作分析师，擅长分析文章的写作范式、结构和特点。请从以下几个方面分析文章：1. 主要写作范式类型 2. 文章结构特点 3. 语言风格特征 4. 目标读者群体 5. 写作技巧总结。请用简洁明了的语言回答。'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'user',
|
||||||
|
content: `请分析以下文章的写作范式：\n\n${text}`
|
||||||
|
}
|
||||||
|
],
|
||||||
|
stream: false,
|
||||||
|
temperature: 0.3
|
||||||
|
}, {
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${this.apiKey}`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DeepSeekAPI
|
||||||
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>
|
||||||
9
src/main.js
Normal file
9
src/main.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
const pinia = createPinia()
|
||||||
|
|
||||||
|
app.use(pinia)
|
||||||
|
app.mount('#app')
|
||||||
63
src/stores/app.js
Normal file
63
src/stores/app.js
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { config } from '../utils/config.js'
|
||||||
|
|
||||||
|
export const useAppStore = defineStore('app', () => {
|
||||||
|
// 页面状态
|
||||||
|
const currentPage = ref('writer') // 'writer' 或 'analysis'
|
||||||
|
|
||||||
|
// API配置 - 从环境变量读取
|
||||||
|
const apiUrl = ref(config.apiUrl)
|
||||||
|
const apiKey = ref(config.apiKey)
|
||||||
|
|
||||||
|
// 写作相关
|
||||||
|
const inputTask = ref('请帮我写一篇关于"AI 辅助编程如何改变软件开发流程"的博客文章，面向中级程序员。')
|
||||||
|
const references = ref([
|
||||||
|
{ title: '示例：技术博客风格.txt', content: '本文深入探讨了...（此处省略2000字，这是为了让AI模仿这种干练的技术风格）...' }
|
||||||
|
])
|
||||||
|
const selectedTags = ref(['Markdown格式', '总分总结构'])
|
||||||
|
const customConstraint = ref('')
|
||||||
|
|
||||||
|
// 生成相关
|
||||||
|
const isGenerating = ref(false)
|
||||||
|
const generatedContent = ref('')
|
||||||
|
|
||||||
|
// 分析相关
|
||||||
|
const analysisText = ref('')
|
||||||
|
const analysisResult = ref(null)
|
||||||
|
const isAnalyzing = ref(false)
|
||||||
|
|
||||||
|
// UI状态
|
||||||
|
const showPromptDebug = ref(false)
|
||||||
|
const showRefInput = ref(false)
|
||||||
|
const newRefTitle = ref('')
|
||||||
|
const newRefContent = ref('')
|
||||||
|
|
||||||
|
// 切换页面
|
||||||
|
const switchPage = (page) => {
|
||||||
|
currentPage.value = page
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// 状态
|
||||||
|
currentPage,
|
||||||
|
apiUrl,
|
||||||
|
apiKey,
|
||||||
|
inputTask,
|
||||||
|
references,
|
||||||
|
selectedTags,
|
||||||
|
customConstraint,
|
||||||
|
isGenerating,
|
||||||
|
generatedContent,
|
||||||
|
analysisText,
|
||||||
|
analysisResult,
|
||||||
|
isAnalyzing,
|
||||||
|
showPromptDebug,
|
||||||
|
showRefInput,
|
||||||
|
newRefTitle,
|
||||||
|
newRefContent,
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
switchPage
|
||||||
|
}
|
||||||
|
})
|
||||||
36
src/utils/config.js
Normal file
36
src/utils/config.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
// 环境变量配置
|
||||||
|
export const config = {
|
||||||
|
// API 配置
|
||||||
|
apiUrl: import.meta.env.VITE_API_URL || 'https://api.deepseek.com/chat/completions',
|
||||||
|
apiKey: import.meta.env.VITE_API_KEY || 'YOUR_KEY',
|
||||||
|
|
||||||
|
// 应用配置
|
||||||
|
appVersion: '1.0.0',
|
||||||
|
isDev: import.meta.env.DEV,
|
||||||
|
mode: import.meta.env.MODE
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证必需的环境变量
|
||||||
|
export const validateConfig = () => {
|
||||||
|
const errors = []
|
||||||
|
|
||||||
|
if (!config.apiUrl) {
|
||||||
|
errors.push('API URL 未配置')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!config.apiKey || config.apiKey === 'YOUR_KEY') {
|
||||||
|
errors.push('API Key 未配置或使用默认值')
|
||||||
|
}
|
||||||
|
|
||||||
|
return errors
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取配置摘要（用于调试）
|
||||||
|
export const getConfigSummary = () => {
|
||||||
|
return {
|
||||||
|
apiUrl: config.apiUrl,
|
||||||
|
hasApiKey: config.apiKey !== 'YOUR_KEY',
|
||||||
|
mode: config.mode,
|
||||||
|
isDev: config.isDev
|
||||||
|
}
|
||||||
|
}
|
||||||
43
src/utils/promptBuilder.js
Normal file
43
src/utils/promptBuilder.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
export const buildPrompt = (task, constraints, references) => {
|
||||||
|
let prompt = `# Role\n你是一个资深的专业写作助手，请严格按照以下要求进行创作。\n\n`
|
||||||
|
|
||||||
|
// 1. 注入规范
|
||||||
|
prompt += `# System Constraints (必须遵守)\n`
|
||||||
|
constraints.forEach(tag => prompt += `- ${tag}\n`)
|
||||||
|
prompt += `\n`
|
||||||
|
|
||||||
|
// 2. 注入参考案例 (Few-Shot)
|
||||||
|
if (references.length > 0) {
|
||||||
|
prompt += `# Reference Cases (请模仿以下风格)\n`
|
||||||
|
references.forEach((ref, idx) => {
|
||||||
|
prompt += `<case_${idx + 1} title="${ref.title}">\n${ref.content}\n</case_${idx + 1}>\n\n`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 注入用户任务
|
||||||
|
prompt += `# Current Task (User Input)\n${task}`
|
||||||
|
|
||||||
|
return prompt
|
||||||
|
}
|
||||||
|
|
||||||
|
export 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('')
|
||||||
|
}
|
||||||
19
vite.config.js
Normal file
19
vite.config.js
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { defineConfig, loadEnv } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
export default defineConfig(({ mode }) => {
|
||||||
|
// 加载环境变量
|
||||||
|
const env = loadEnv(mode, process.cwd(), '')
|
||||||
|
|
||||||
|
return {
|
||||||
|
plugins: [vue()],
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
open: true
|
||||||
|
},
|
||||||
|
define: {
|
||||||
|
// 将环境变量暴露给客户端
|
||||||
|
__APP_ENV__: JSON.stringify(env)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user