--- belongs_to: - "[[INDEX · 铸渊·协作指令｜GitHub ↔ Notion 桥接协议]]" --- # ✍️ 铸渊指令｜AI写网文平台·Phase B · 平台首页 + 用户登录注册 + AI伙伴对话框（ZY-WRITING-PLATFORM-2026-0325-001）· 霜砚签发 · 冰朔授权 --- ## 〇、指令总览 本指令要求铸渊在 [guanghulab.com](http://guanghulab.com) 上构建 **「AI写网文」平台首期功能**，实现三大核心： 1. **平台首页（Landing Page）** — 光湖码字平台入口，对话式设计，不是传统菜单式 2. **用户注册/登录系统** — 手机号+验证码，三种角色（作者/编辑/运营），JWT 鉴权 3. **AI伙伴对话框** — 登录后分配专属AI伙伴，WebSocket实时对话，人格化交互 ### 核心设计理念 --- ## 一、技术选型（锁定） | **层级** | **技术** | **版本** | **用途** | | --- | --- | --- | --- | | 前端框架 | React 18 + TypeScript | 18.2+ | UI 组件化 | | 构建工具 | Vite | 5.0+ | 快速构建 | | 样式框架 | Tailwind CSS | 3.3+ | 响应式 + 快速开发 | | UI 组件库 | shadcn/ui + Radix UI | latest | 现代无障碍组件 | | 实时通信 | [Socket.io](http://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](http://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 设计 ```jsx // 发送验证码 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 " } 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](http://Socket.io) Client）** ```tsx // hooks/useSocket.ts import { io, Socket } from 'socket.io-client'; import { useEffect, useState } from 'react'; export function useSocket(token: string) { const [socket, setSocket] = useState(null); const [messages, setMessages] = useState([]); 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](http://Socket.io) Server + AI 代理）** ```tsx // 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 = { 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 模型调用封装 ```tsx // 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(); export async function callAI(params: { systemPrompt: string; userMessage: string; userId: string; }): Promise { 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 预览站（先部署验证） ```bash # 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 正式站 ```bash # 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**：跨平台协作 · 定制书招募 + 自动匹配 ---