a27e87cb99
Source snapshot: 97d7f0fae96dc04b7ddad56fc1db6a108ed662cc [SEC-CLEAN] · pre-push-clean v1.0 · 109处敏感信息已自动转乱码
27 KiB
27 KiB
belongs_to
| belongs_to | |
|---|---|
|
✍️ 铸渊指令｜AI写网文平台·Phase B · 平台首页 + 用户登录注册 + AI伙伴对话框（ZY-WRITING-PLATFORM-2026-0325-001）· 霜砚签发 · 冰朔授权
〇、指令总览
本指令要求铸渊在 guanghulab.com 上构建 「AI写网文」平台首期功能，实现三大核心：
- 平台首页（Landing Page） — 光湖码字平台入口，对话式设计，不是传统菜单式
- 用户注册/登录系统 — 手机号+验证码，三种角色（作者/编辑/运营），JWT 鉴权
- AI伙伴对话框 — 登录后分配专属AI伙伴，WebSocket实时对话，人格化交互
核心设计理念
一、技术选型（锁定）
| 层级 | 技术 | 版本 | 用途 |
|---|---|---|---|
| 前端框架 | React 18 + TypeScript | 18.2+ | UI 组件化 |
| 构建工具 | Vite | 5.0+ | 快速构建 |
| 样式框架 | Tailwind CSS | 3.3+ | 响应式 + 快速开发 |
| UI 组件库 | shadcn/ui + Radix UI | latest | 现代无障碍组件 |
| 实时通信 | Socket.io | 4.x | AI伙伴实时对话 |
| 后端框架 | Node.js + Express | 20 LTS + 4.18 | API 服务 |
| 身份认证 | JWT + Passport.js | latest | Token 鉴权 |
| AI 接入 | OpenAI SDK + Anthropic SDK | latest | GPT-4 / Claude |
| 数据库 | Notion API（主）+ Redis（缓存） | latest | 数据存储 + 会话缓存 |
| 部署 | 阿里云 ECS（8.155.62.235） | - | 正式站 guanghulab.com |
二、仓库路径规划
在主仓库 qinfendebingshuo/guanghulab 下新建以下目录：
guanghulab/
└── writing-platform/ ← AI写网文平台根目录
├── frontend/ ← 前端（React + Vite）
│ ├── src/
│ │ ├── pages/
│ │ │ ├── LandingPage.tsx ← 平台首页
│ │ │ ├── LoginPage.tsx ← 登录页
│ │ │ ├── RegisterPage.tsx ← 注册页
│ │ │ └── DashboardPage.tsx ← 登录后主界面（AI伙伴）
│ │ ├── components/
│ │ │ ├── AICompanion.tsx ← AI伙伴头像 + 对话框组件
│ │ │ ├── ChatBubble.tsx ← 聊天气泡
│ │ │ ├── RoleSelector.tsx ← 角色选择器（作者/编辑/运营）
│ │ │ ├── PhoneLogin.tsx ← 手机号登录组件
│ │ │ └── Navbar.tsx ← 导航栏
│ │ ├── hooks/
│ │ │ ├── useAuth.ts ← 认证状态管理
│ │ │ └── useSocket.ts ← WebSocket 连接
│ │ ├── services/
│ │ │ ├── api.ts ← API 调用封装
│ │ │ └── socket.ts ← Socket.io 客户端
│ │ ├── stores/
│ │ │ └── authStore.ts ← Zustand 状态管理
│ │ ├── App.tsx
│ │ └── main.tsx
│ ├── public/
│ │ └── assets/ ← 静态资源（AI伙伴头像等）
│ ├── index.html
│ ├── vite.config.ts
│ ├── tailwind.config.ts
│ ├── tsconfig.json
│ └── package.json
│
├── backend/ ← 后端（Express）
│ ├── src/
│ │ ├── routes/
│ │ │ ├── auth.ts ← 注册/登录/验证码
│ │ │ ├── user.ts ← 用户信息
│ │ │ └── ai.ts ← AI对话代理
│ │ ├── middleware/
│ │ │ ├── authMiddleware.ts ← JWT 验证中间件
│ │ │ └── rateLimiter.ts ← 限流
│ │ ├── services/
│ │ │ ├── smsService.ts ← 短信验证码（阿里云SMS）
│ │ │ ├── aiService.ts ← AI模型调用封装
│ │ │ ├── notionService.ts ← Notion API 封装
│ │ │ └── socketService.ts ← WebSocket 服务
│ │ ├── models/
│ │ │ └── userModel.ts ← 用户数据模型
│ │ └── server.ts ← 入口
│ ├── tsconfig.json
│ └── package.json
│
└── README.md ← 模块说明
三、Phase 0 · 平台首页（Landing Page）
3.1 设计要求
3.2 页面结构
┌─────────────────────────────────────────────────────────┐
│ 🌟 光湖码字 · AI创作伙伴平台 [登录] [注册] │
├─────────────────────────────────────────────────────────┤
│ │
│ 🤖 │
│ AI伙伴头像（动态） │
│ │
│ "你好！我是你的AI创作伙伴。 │
│ 无论你是作者、编辑还是运营， │
│ 我都能陪你一起工作。" │
│ │
│ [我是作者] [我是编辑] [我是运营] │
│ │
├─────────────────────────────────────────────────────────┤
│ │
│ ✨ 三大核心能力 │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 🖊️ AI码字 │ │ 📊 透明追踪│ │ 🤝 跨平台 │ │
│ │ AI陪你写 │ │ 全程留痕 │ │ 自由合作 │ │
│ │ 不代替你写 │ │ 创意归你 │ │ 信誉说话 │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
├─────────────────────────────────────────────────────────┤
│ │
│ 📈 平台数据（实时） │
│ 注册作者: XXX | 今日新作: XXX | AI使用透明度: 100% │
│ │
├─────────────────────────────────────────────────────────┤
│ © 2026 光湖纪元 · 国作登字-2026-A-00037559 │
└─────────────────────────────────────────────────────────┘
3.3 技术实现要点
- 响应式设计（移动端优先）
- AI伙伴头像：使用 CSS 动画实现呼吸效果（发光 + 微浮动）
- 欢迎语：打字机效果逐字显示
- 角色选择按钮：点击后跳转到注册页，自动填入角色
- 底部平台数据：从 Notion API 读取真实数据（通过后端代理）
- 路由：
guanghulab.com/writing/为入口
四、Phase 1 · 用户注册/登录系统
4.1 注册流程
用户点击 [注册]
↓
选择角色：[作者] / [编辑] / [运营]
↓
填写信息：
- 手机号（必填）
- 短信验证码（必填）
- 笔名/昵称（必填）
- 真实姓名（选填，编辑/运营必填）
↓
验证通过 → 创建账号 → 分配专属AI伙伴
↓
跳转到主界面（Dashboard）
4.2 登录流程
用户点击 [登录]
↓
输入手机号 + 短信验证码
↓
验证通过 → 返回 JWT Token
↓
跳转到主界面（Dashboard）
4.3 API 设计
// 发送验证码
POST /api/writing/auth/send-code
Body: { phone: "13800138000" }
Response: { success: true, message: "验证码已发送" }
// 注册
POST /api/writing/auth/register
Body: {
phone: "13800138000",
code: "123456",
nickname: "小红",
realName: "张小红", // 选填
role: "author" // author / editor / operator
}
Response: {
success: true,
token: "eyJhbGciOiJI...",
user: {
id: "user_001",
nickname: "小红",
role: "author",
aiCompanion: {
name: "笔灵",
avatar: "/assets/ai-companion-author.png"
}
}
}
// 登录
POST /api/writing/auth/login
Body: { phone: "13800138000", code: "123456" }
Response: { success: true, token: "...", user: {...} }
// 获取当前用户
GET /api/writing/user/me
Headers: { Authorization: "Bearer <token>" }
Response: { user: {...} }
4.4 数据存储（Notion 数据库）
在 Notion 中新建 「AI写网文·用户表」 数据库：
| 字段名 | 类型 | 说明 |
|---|---|---|
| 用户ID | title | 唯一标识（系统生成） |
| 手机号 | text | 登录凭证（加密存储） |
| 笔名 | text | 用户昵称 |
| 真实姓名 | text | 可选 |
| 角色 | select | author / editor / operator |
| AI伙伴名称 | text | 系统分配的AI伙伴名字 |
| 信誉分 | number | 初始 60 分 |
| 注册时间 | date | 注册时间 |
| 最后登录 | date | 最后登录时间 |
| 状态 | select | active / suspended / deleted |
4.5 AI伙伴分配规则
| 角色 | AI伙伴名 | 人设 | System Prompt 核心 |
|---|---|---|---|
| 作者 | 笔灵 | 温暖的创作伙伴，擅长灵感激发、扩写、节奏把控 | 你是作者的AI创作伙伴，名叫笔灵。帮助作者提高效率、激发灵感。 |
| 编辑 | 慧眼 | 专业的审稿助手，擅长筛选、评估、数据分析 | 你是编辑的AI审稿助手，名叫慧眼。帮助编辑高效筛选和评估稿件。 |
| 运营 | 星图 | 敏锐的数据分析师，擅长趋势洞察、策略建议 | 你是运营的AI数据助手，名叫星图。帮助运营洞察数据趋势、制定策略。 |
五、Phase 2 · AI伙伴对话框
5.1 界面设计
登录后进入 Dashboard，核心界面如下：
┌─────────────────────────────────────────────────────────┐
│ 🌟 光湖码字 小红（作者） [设置] [退出] │
├─────────────────────────────────────────────────────────┤
│ │
│ 🤖 笔灵 │
│ （呼吸发光动画） │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 笔灵：早上好，小红！你已经连续写作3天了！ │ │
│ │ 今天想继续写《霸总的小娇妻》吗？ │ │
│ │ │ │
│ │ 小红：是的，帮我打开第8章 │ │
│ │ │ │
│ │ 笔灵：好的！第8章已打开，上次写到2567字。 │ │
│ │ 今天的目标是写完3000字吗？ │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────┐ [发送] │
│ │ 和笔灵说点什么... │ │
│ └─────────────────────────────────────────┘ │
│ │
│ ───────────────────────────────────────────── │
│ 快捷操作： │
│ [📝 开始写作] [📊 查看数据] [📢 看定制书需求] [💬 讨论区]│
│ │
└─────────────────────────────────────────────────────────┘
5.2 WebSocket 对话系统
前端（Socket.io Client）
// hooks/useSocket.ts
import { io, Socket } from 'socket.io-client';
import { useEffect, useState } from 'react';
export function useSocket(token: string) {
const [socket, setSocket] = useState<Socket | null>(null);
const [messages, setMessages] = useState<Message[]>([]);
useEffect(() => {
const newSocket = io('/writing-ai', {
auth: { token },
transports: ['websocket']
});
newSocket.on('ai_response', (data: { message: string; suggestions?: string[] }) => {
setMessages(prev => [...prev, {
role: 'assistant',
content: data.message,
timestamp: Date.now()
}]);
});
setSocket(newSocket);
return () => { newSocket.close(); };
}, [token]);
const sendMessage = (message: string) => {
if (!socket) return;
setMessages(prev => [...prev, {
role: 'user',
content: message,
timestamp: Date.now()
}]);
socket.emit('user_message', { message });
};
return { messages, sendMessage };
}
后端（Socket.io Server + AI 代理）
// services/socketService.ts
import { Server } from 'socket.io';
import { verifyToken } from '../middleware/authMiddleware';
import { callAI } from './aiService';
import { saveConversation } from './notionService';
export function setupSocketService(httpServer: any) {
const io = new Server(httpServer, {
path: '/writing-ai',
cors: { origin: process.env.FRONTEND_URL }
});
// JWT 鉴权
io.use((socket, next) => {
const token = socket.handshake.auth.token;
try {
const user = verifyToken(token);
socket.data.user = user;
next();
} catch (err) {
next(new Error('认证失败'));
}
});
io.on('connection', (socket) => {
const user = socket.data.user;
console.log(`[AI伙伴] ${user.aiCompanion.name} 已连接 · 用户: ${user.nickname}`);
// 发送欢迎消息
socket.emit('ai_response', {
message: getWelcomeMessage(user)
});
socket.on('user_message', async (data: { message: string }) => {
try {
// 1. 构建 system prompt（注入角色 + AI伙伴人设）
const systemPrompt = buildSystemPrompt(user);
// 2. 调用 AI
const aiResponse = await callAI({
systemPrompt,
userMessage: data.message,
userId: user.id
});
// 3. 保存对话到 Notion
await saveConversation({
userId: user.id,
userMessage: data.message,
aiResponse: aiResponse,
timestamp: new Date().toISOString()
});
// 4. 返回 AI 响应
socket.emit('ai_response', {
message: aiResponse
});
} catch (error) {
socket.emit('ai_response', {
message: '抱歉，我遇到了一些问题，请稍后再试。'
});
}
});
});
}
function getWelcomeMessage(user: any): string {
const name = user.aiCompanion.name;
const nick = user.nickname;
const role = user.role;
if (role === 'author') {
return `早上好，${nick}！我是${name}，你的AI创作伙伴。\n\n今天想做什么？写作、看数据、还是找合作机会？`;
} else if (role === 'editor') {
return `早上好，${nick}！我是${name}，你的AI审稿助手。\n\n今天有新投稿等你审核，要看看吗？`;
} else {
return `早上好，${nick}！我是${name}，你的AI数据助手。\n\n今天的数据已更新，要看看趋势分析吗？`;
}
}
function buildSystemPrompt(user: any): string {
const companionPrompts: Record<string, string> = {
author: `你是用户的AI创作伙伴，名字叫「笔灵」。
用户信息：昵称=${user.nickname}，角色=作者。
你的职责：
1. 帮助用户创作（提供灵感、扩写、优化文笔）
2. 管理写作项目（打开文档、查看进度）
3. 提醒和建议（写作时间、字数目标、市场趋势）
4. 记住用户的写作风格和习惯
语气：温暖、鼓励、专业。像一个懂你的创作搭档。`,
editor: `你是用户的AI审稿助手，名字叫「慧眼」。
用户信息：昵称=${user.nickname}，角色=编辑。
你的职责：
1. 帮助筛选和评估投稿
2. 分析AI使用报告
3. 提供审稿建议
4. 管理审核工作流
语气：专业、精准、高效。`,
operator: `你是用户的AI数据助手，名字叫「星图」。
用户信息：昵称=${user.nickname}，角色=运营。
你的职责：
1. 分析平台数据趋势
2. 提供运营策略建议
3. 管理跨平台合作
4. 生成数据报告
语气：敏锐、有洞察力、数据驱动。`
};
return companionPrompts[user.role] || companionPrompts.author;
}
5.3 AI 模型调用封装
// services/aiService.ts
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.LLM_API_KEY,
baseURL: process.env.LLM_BASE_URL // 使用仓库已配置的 LLM 端点
});
// 每个用户的对话历史缓存（Redis）
const conversationCache = new Map<string, any[]>();
export async function callAI(params: {
systemPrompt: string;
userMessage: string;
userId: string;
}): Promise<string> {
const { systemPrompt, userMessage, userId } = params;
// 获取最近 10 轮对话历史
const history = conversationCache.get(userId) || [];
const messages = [
{ role: 'system' as const, content: systemPrompt },
...history.slice(-20), // 最近10轮 = 20条消息
{ role: 'user' as const, content: userMessage }
];
const completion = await openai.chat.completions.create({
model: 'gpt-4',
messages,
temperature: 0.7,
max_tokens: 800
});
const aiResponse = completion.choices[0].message.content || '...';
// 更新对话缓存
const updatedHistory = [
...history,
{ role: 'user', content: userMessage },
{ role: 'assistant', content: aiResponse }
].slice(-20); // 保留最近10轮
conversationCache.set(userId, updatedHistory);
return aiResponse;
}
六、Nginx 路由配置
在现有 Nginx 配置中增加 writing-platform 路由：
# /etc/nginx/conf.d/hololake.conf 新增
# AI写网文平台前端
location /writing/ {
alias /var/www/guanghulab/writing-platform/frontend/dist/;
try_files $uri $uri/ /writing/index.html;
}
# AI写网文平台后端 API
location /api/writing/ {
proxy_pass http://127.0.0.1:3100/api/writing/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
# WebSocket（AI伙伴对话）
location /writing-ai/ {
proxy_pass http://127.0.0.1:3100/writing-ai/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
后端服务端口：3100（写网文平台独立端口，不与现有服务冲突）
七、部署流程
7.1 预览站（先部署验证）
# 1. 构建前端
cd writing-platform/frontend
npm install
npm run build
# 2. 构建后端
cd ../backend
npm install
npm run build
# 3. 部署到 GitHub Pages 预览
# 前端 dist 目录推到 docs/writing/ 下
7.2 正式站
# CD 自动部署（deploy-to-server.yml 扩展）
# 1. SSH 到服务器
# 2. git pull
# 3. cd writing-platform/frontend && npm install && npm run build
# 4. cd ../backend && npm install && npm run build
# 5. pm2 restart writing-platform-backend (或新启动)
# 6. nginx -s reload
八、环境变量
以下环境变量需要在服务器和 GitHub Secrets 中配置：
| 变量名 | 用途 | 来源 |
|---|---|---|
LLM_API_KEY |
AI 模型 API Key | ✅ 已有 |
LLM_BASE_URL |
AI 模型端点 | ✅ 已有 |
NOTION_TOKEN |
Notion API Token | ✅ 已有 |
JWT_SECRET |
JWT 签名密钥 | ⭕ 需新增（铸渊自动生成随机字符串） |
SMS_ACCESS_KEY |
阿里云短信 Key | ⏳ 需冰朔配置 |
SMS_ACCESS_SECRET |
阿里云短信 Secret | ⏳ 需冰朔配置 |
WRITING_DB_ID |
Notion 用户表 Database ID | ⭕ 铸渊创建后填入 |
REDIS_URL |
Redis 连接地址 | ⭕ 需配置（可先用内存缓存降级） |
九、人类侧操作（冰朔待办）
十、验收标准
| 验收项 | 标准 |
|---|---|
| 首页可访问 | guanghulab.com/writing/ 打开显示完整首页 |
| AI伙伴头像动画 | 中央头像有呼吸发光效果 |
| 欢迎语显示 | 打字机效果逐字显示 |
| 角色选择 | 三个按钮可点击，跳转到注册 |
| 注册功能 | 填写信息 → 创建账号 → 分配AI伙伴 → 跳转Dashboard |
| 登录功能 | 手机号+验证码 → JWT Token → 跳转Dashboard |
| AI伙伴对话 | 登录后可与AI伙伴实时对话，响应流畅 |
| 角色区分 | 不同角色登录后AI伙伴名称和行为不同 |
| 移动端适配 | 手机浏览器正常显示和操作 |
| 数据持久化 | 用户数据写入 Notion 数据库，对话记录可追溯 |
十一、执行时序
Phase 0: 搭建项目骨架 + 前端首页（预计 2h）
↓
Phase 1: 后端注册/登录 API + Notion 用户表（预计 2h）
↓
Phase 2: AI伙伴对话系统（WebSocket + AI调用）（预计 3h）
↓
Phase 3: 前后端联调 + Nginx 路由配置（预计 1h）
↓
Phase 4: 部署到预览站 → 测试
↓
→ 人类验收 → 正式站上线
十二、后续扩展预留
本期完成后，后续 Phase 可继续扩展（不在本指令范围内）：
- Phase C：码字台 · AI辅助写作编辑器 + 全程留痕 + AI使用报告
- Phase D：审核系统 · AI初筛 + 人工复审 + 数字签名
- Phase E：信誉系统 · 四维动态评分 + 信誉曲线
- Phase F：模块市场 · Prompt 打包 + 分润
- Phase G：跨平台协作 · 定制书招募 + 自动匹配