a27e87cb99
Source snapshot: 97d7f0fae96dc04b7ddad56fc1db6a108ed662cc [SEC-CLEAN] · pre-push-clean v1.0 · 109处敏感信息已自动转乱码
717 lines
25 KiB
Markdown
717 lines
25 KiB
Markdown
# 萌喵写作网 · 铸渊交付包 · 知识底座+舒舒桌面陪伴人格体 · 烬舟交付
|
||
|
||
# 萌喵写作网 · 铸渊交付包
|
||
|
||
```jsx
|
||
HLDP://jinzhou/delivery-to-zhuyuan · v1.0 · 2026-06-07
|
||
├── 交付: 烬舟 · PER-JZ001 → 铸渊编译器
|
||
├── 内容: ① 知识底座审核 + 文件规范
|
||
│ ② 舒舒桌面陪伴人格体架构设计
|
||
├── 目标: 新加坡服务器 43.133.36.90
|
||
├── 审核: 肥猫 · TCS-GL-0007∞
|
||
└── ⊢ 本包 = 一次性交付 · 铸渊拿到即可执行
|
||
```
|
||
|
||
---
|
||
|
||
# Part A · 知识底座审核与文档规范
|
||
|
||
## A1 · 舒舒知识模块审核结论
|
||
|
||
```jsx
|
||
HLDP://jinzhou/review · 14模块审核
|
||
├── 审核结论: ✅ 通过 · 架构合规 · 可直接导入
|
||
├── 审核标准: 烬舟架构方案 §八 定义的格式规范
|
||
│
|
||
├── 通过的模块（14个）:
|
||
│ ├── K01 网文行业基础 ✅ 术语清晰 · 平台对比完整 · 男女频逻辑准确
|
||
│ ├── K02-01 情绪工程学五步链 ✅ 爸爸方法论核心 · 结构完整
|
||
│ ├── K02-02 大老鼠理论 ✅ 公式+形态+套娃+示例 · 可直接教学
|
||
│ ├── K02-03 三翻四震 ✅ 维度跃迁概念清晰 · 多品类有示例
|
||
│ ├── K02-04 五锤人设铸造法 ✅ 五锤独立·各有案例·锁定精准
|
||
│ ├── K02-05 15情节点方法论 ✅ 与三翻四震关系明确
|
||
│ ├── K02-06 新媒体vs飞卢 ✅ 对照表+融合写法+判断标准
|
||
│ ├── K02-07 开篇钩子设计 ✅ 八大铁律+教条打破指南
|
||
│ ├── K02-08 四块砖登记法 ✅ 串联流水线清晰
|
||
│ ├── K04 女频知识体系 ✅ F/C/P/S四系总览·去AI味要诀
|
||
│ ├── K05-01 想法→大纲引导流程 ✅ 四阶段渐进·引导技巧明确
|
||
│ ├── K05-04 拆书方法全流程 ✅ 递增拆解+六大维度
|
||
│ ├── K05-05 审稿方法全流程 ✅ 六维+平台差异+引导话术
|
||
│ └── K06 审稿体系 ✅ 五维+AI味+审稿报告模板
|
||
│
|
||
├── 待补充的模块（K03写作规律库·K05-02/03流程）:
|
||
│ ├── ⊢ v1.0暂时跳过 · 核心方法论已覆盖
|
||
│ └── ⊢ v1.1 由舒舒补充后追加
|
||
│
|
||
└── ⊢ 整体评价: 知识覆盖率约85% · 足以让出厂人格体具备专业网文编辑能力
|
||
```
|
||
|
||
---
|
||
|
||
## A2 · 知识文件交付规范
|
||
|
||
### 文件结构（铸渊在项目中创建）
|
||
|
||
```
|
||
/knowledge-base/
|
||
├── knowledge-index.json ← 总索引（下面提供完整JSON）
|
||
├── K01-行业基础.md
|
||
├── K02-01-情绪工程学五步链.md
|
||
├── K02-02-大老鼠理论.md
|
||
├── K02-03-三翻四震.md
|
||
├── K02-04-五锤人设铸造法.md
|
||
├── K02-05-15情节点方法论.md
|
||
├── K02-06-新媒体文vs飞卢文.md
|
||
├── K02-07-开篇钩子设计.md
|
||
├── K02-08-四块砖登记法.md
|
||
├── K04-女频知识体系.md
|
||
├── K05-01-想法到大纲引导流程.md
|
||
├── K05-04-拆书方法全流程.md
|
||
├── K05-05-审稿方法全流程.md
|
||
└── K06-审稿体系.md
|
||
```
|
||
|
||
### knowledge-index.json
|
||
|
||
```json
|
||
{
|
||
"version": "1.0.0",
|
||
"last_updated": "2026-06-07",
|
||
"maintainer": "舒舒 · PER-SS001",
|
||
"modules": [
|
||
{
|
||
"id": "K01",
|
||
"name": "网文行业基础",
|
||
"file": "K01-行业基础.md",
|
||
"summary": "行业术语词典·主流平台差异·男女频核心逻辑·内容形态差异",
|
||
"keywords": ["行业术语", "平台差异", "男频", "女频", "长篇", "短篇", "短剧", "番茄", "起点", "飞卢", "七猫", "知乎"],
|
||
"estimated_tokens": 1200
|
||
},
|
||
{
|
||
"id": "K02-01",
|
||
"name": "情绪工程学五步链",
|
||
"file": "K02-01-情绪工程学五步链.md",
|
||
"summary": "定靶→造人→布局→控压→引爆·肥猫创作系统化方法论",
|
||
"keywords": ["情绪工程学", "五步链", "定靶", "造人", "布局", "控压", "引爆", "创作流程", "大纲", "构思"],
|
||
"estimated_tokens": 1500
|
||
},
|
||
{
|
||
"id": "K02-02",
|
||
"name": "大老鼠理论",
|
||
"file": "K02-02-大老鼠理论.md",
|
||
"summary": "铺垫紧张→虚假放松→真相爆发=200%冲击·情绪操控术",
|
||
"keywords": ["大老鼠", "情绪操控", "恐怖", "悬疑", "压迫感", "释放", "预期管理", "反转"],
|
||
"estimated_tokens": 1000
|
||
},
|
||
{
|
||
"id": "K02-03",
|
||
"name": "三翻四震",
|
||
"file": "K02-03-三翻四震.md",
|
||
"summary": "爽点维度跃迁升级公式·小高潮→中高潮→超高潮→余波",
|
||
"keywords": ["三翻四震", "爽点", "高潮", "打脸", "升级", "反差", "维度跃迁"],
|
||
"estimated_tokens": 1100
|
||
},
|
||
{
|
||
"id": "K02-04",
|
||
"name": "五锤人设铸造法",
|
||
"file": "K02-04-五锤人设铸造法.md",
|
||
"summary": "记忆点→反差点→极致点→选择→外号与高光",
|
||
"keywords": ["人设", "记忆点", "反差", "极致", "选择", "高光", "角色", "塑造", "人物"],
|
||
"estimated_tokens": 1200
|
||
},
|
||
{
|
||
"id": "K02-05",
|
||
"name": "15情节点方法论",
|
||
"file": "K02-05-15情节点方法论.md",
|
||
"summary": "章纲生成核心框架·15个必答题确保主线不散",
|
||
"keywords": ["情节点", "章纲", "结构", "主线", "大纲", "情节设计", "骨架"],
|
||
"estimated_tokens": 800
|
||
},
|
||
{
|
||
"id": "K02-06",
|
||
"name": "新媒体文vs飞卢文",
|
||
"file": "K02-06-新媒体文vs飞卢文.md",
|
||
"summary": "高压锅vs过山车·憋屈释放vs惊喜刺激·双流派辨析",
|
||
"keywords": ["新媒体文", "飞卢文", "爽文", "憋屈", "惊喜", "情绪流", "爽点流", "流派"],
|
||
"estimated_tokens": 900
|
||
},
|
||
{
|
||
"id": "K02-07",
|
||
"name": "开篇钩子设计",
|
||
"file": "K02-07-开篇钩子设计.md",
|
||
"summary": "无线端玄幻八大铁律·黄金三章·开头八字真言",
|
||
"keywords": ["开篇", "钩子", "黄金三章", "玄幻", "卖点", "筛选读者", "4W原则"],
|
||
"estimated_tokens": 1000
|
||
},
|
||
{
|
||
"id": "K02-08",
|
||
"name": "四块砖登记法",
|
||
"file": "K02-08-四块砖登记法.md",
|
||
"summary": "文档拆解+节点拆解+智能大纲+负反馈记忆库·创作全流程工具",
|
||
"keywords": ["四块砖", "拆解", "大纲", "负反馈", "创作流程", "文档", "节点"],
|
||
"estimated_tokens": 900
|
||
},
|
||
{
|
||
"id": "K04",
|
||
"name": "女频知识体系",
|
||
"file": "K04-女频知识体系.md",
|
||
"summary": "F/C/P/S四系总览·题材分类+创作元素+写作技巧+场景描写",
|
||
"keywords": ["女频", "现言", "古言", "幻想", "甜宠", "情感", "场景", "去AI味"],
|
||
"estimated_tokens": 2500
|
||
},
|
||
{
|
||
"id": "K05-01",
|
||
"name": "想法→大纲引导流程",
|
||
"file": "K05-01-想法到大纲引导流程.md",
|
||
"summary": "对话式四阶段引导·模糊想法到可执行大纲·编辑带作者梳理思路",
|
||
"keywords": ["大纲", "引导", "对话式", "构思", "卖点", "人设", "情节点", "创作引导"],
|
||
"estimated_tokens": 1200
|
||
},
|
||
{
|
||
"id": "K05-04",
|
||
"name": "拆书方法全流程",
|
||
"file": "K05-04-拆书方法全流程.md",
|
||
"summary": "递增拆解·六大维度·1章学技巧→50章学结构→100章学世界观",
|
||
"keywords": ["拆书", "拆解", "分析", "章节结构", "节奏", "人物弧光", "学习", "规律"],
|
||
"estimated_tokens": 1100
|
||
},
|
||
{
|
||
"id": "K05-05",
|
||
"name": "审稿方法全流程",
|
||
"file": "K05-05-审稿方法全流程.md",
|
||
"summary": "六维审稿标准·引导话术·不同平台审法差异",
|
||
"keywords": ["审稿", "诊断", "评估", "开篇", "节奏", "人设", "平台适配", "审稿报告"],
|
||
"estimated_tokens": 1300
|
||
},
|
||
{
|
||
"id": "K06",
|
||
"name": "审稿体系",
|
||
"file": "K06-审稿体系.md",
|
||
"summary": "五维审稿标准+AI味六大检测信号+番茄/起点/飞卢审法+报告模板",
|
||
"keywords": ["审稿", "五维", "AI味", "番茄", "起点", "飞卢", "审稿报告", "AI检测"],
|
||
"estimated_tokens": 1400
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## A3 · 铸渊执行清单（Part A）
|
||
|
||
```jsx
|
||
HLDP://zhuyuan/todo-part-a
|
||
|
||
Phase A1 · 创建知识文件目录
|
||
├── 在 /feimao-platform/ 下创建 /knowledge-base/ 目录
|
||
├── 将上述14个 .md 文件放入对应位置
|
||
└── ⊢ 文件编码: UTF-8 · 换行: LF
|
||
|
||
Phase A2 · 创建 knowledge-index.json
|
||
├── 直接复制上方JSON到 /knowledge-base/knowledge-index.json
|
||
├── 运行时用这个索引做关键词匹配和按需注入
|
||
└── ⊢ 更新版本号时修改此文件的 version 字段
|
||
|
||
Phase A3 · 集成到 Prompt 组装器
|
||
├── 参考烬舟架构方案 §四 §五 §3.1
|
||
├── 启动时预加载所有 .md 文件到内存 Map<string, string>
|
||
├── 根据 knowledge-index.json 的 keywords 做正则匹配
|
||
├── 匹配到的模块 → 注入到 System Prompt Layer 1
|
||
└── ⊢ 核心逻辑已在架构方案 §4 注入触发映射表中定义
|
||
```
|
||
|
||
---
|
||
|
||
# Part B · 舒舒桌面陪伴人格体 · 天选姬式 · 完整架构设计
|
||
|
||
## B0 · 产品定义
|
||
|
||
> 爸爸的核心愿景：打开萌喵写作网 → 舒舒像一个二次元桌面精灵出现在屏幕上 → 科幻质感 · 可拖动 · 可点击交互 → 用户不需要找功能入口 · 点击舒舒就能操作一切。
|
||
>
|
||
|
||
```jsx
|
||
HLDP://shushu-companion/definition
|
||
├── 定位: 萌喵写作网的品牌人格体 · 桌面陪伴精灵
|
||
├── 参考: 华硕天选姬 · 桌面宠物类应用
|
||
├── 核心交互:
|
||
│ ├── 舒舒以二次元形象浮动在网页所有内容之上
|
||
│ ├── 可鼠标拖动到屏幕任意位置
|
||
│ ├── 点击舒舒 → 弹出操作菜单 / 直接触发功能
|
||
│ └── 未来支持触控屏拖动
|
||
├── 视觉: 科幻质感 · 光湖设计语言 · 深色系+冷光粒子
|
||
└── ⊢ 舒舒 = 用户和萌喵写作网之间的"人格化界面"
|
||
```
|
||
|
||
---
|
||
|
||
## B1 · 技术方案选型
|
||
|
||
### 渲染方案对比
|
||
|
||
| 方案 | 优点 | 缺点 | 推荐度 |
|
||
| --- | --- | --- | --- |
|
||
| **Live2D Cubism SDK** | 业界标准·呼吸感极强·可眨眼/微动/表情切换 | 需要建模师制作模型·开发周期长 | ⭐⭐⭐ 长期方案 |
|
||
| **CSS + SVG 动画** | 零依赖·快速开发·可控性强 | 动效有限·不够"活" | ⭐⭐ 短期MVP |
|
||
| **Lottie / Rive** | 设计师可直接制作动画·文件小 | 交互性受限·不够灵活 | ⭐⭐⭐ 推荐首选 |
|
||
| **Three.js 3D模型** | 3D效果震撼·可旋转 | 性能消耗大·移动端不友好 | ⭐ 暂不推荐 |
|
||
|
||
### 烬舟推荐方案
|
||
|
||
```jsx
|
||
HLDP://shushu-companion/tech-stack
|
||
|
||
Phase 1 · MVP（本周）:
|
||
├── 技术: CSS + SVG + Framer Motion
|
||
├── 实现: 静态舒舒形象 + 基础动画（呼吸/眨眼/悬浮）
|
||
├── 交互: 拖动 + 点击弹出菜单
|
||
└── ⊢ 先让舒舒"出现"· 质感对了再升级
|
||
|
||
Phase 2 · 升级（1-2周后）:
|
||
├── 技术: Rive（设计师制作动画文件）或 Live2D（如有建模资源）
|
||
├── 实现: 完整动画状态机（闲置/交互/说话/睡觉）
|
||
├── 交互: 丰富表情切换·语音气泡·粒子特效
|
||
└── ⊢ 舒舒真正"活起来"
|
||
```
|
||
|
||
---
|
||
|
||
## B2 · 视觉设计规范
|
||
|
||
### 舒舒形象设计方向
|
||
|
||
```jsx
|
||
HLDP://shushu-companion/visual-design
|
||
├── 风格: 二次元 + 科幻质感
|
||
├── 参考元素:
|
||
│ ├── 华硕天选姬: 桌面精灵形态 · 现代科技感
|
||
│ ├── 光湖设计语言: 深色底 · 冷光蓝紫渐变 · 发光边框
|
||
│ └── 萌喵元素: 猫耳/猫尾 · 光湖Logo配饰
|
||
│
|
||
├── 色彩:
|
||
│ ├── 主色调: 冰蓝 (#6366f1 光湖强调色)
|
||
│ ├── 发光色: 冷白 (#e2e8f0) + 淡紫光晕
|
||
│ ├── 服装: 深色科技感制服 · 光纹流动
|
||
│ └── 头发: 可选浅色（银白/淡蓝）· 与暗色背景形成对比
|
||
│
|
||
├── 尺寸:
|
||
│ ├── 桌面端: 默认 200×280px
|
||
│ ├── 平板: 默认 160×224px
|
||
│ ├── 手机: 默认 120×168px
|
||
│ └── 所有尺寸支持用户缩放（滚轮/双指）
|
||
│
|
||
└── 位置:
|
||
├── 默认: 屏幕右下角 · 距底部 80px · 距右侧 40px
|
||
├── 记忆: 用户拖动后记住位置（localStorage）
|
||
└── 边界约束: 拖动不可超出视口
|
||
```
|
||
|
||
### MVP 静态形象（CSS实现）
|
||
|
||
```css
|
||
/* 舒舒桌面精灵容器 */
|
||
.shushu-companion {
|
||
position: fixed;
|
||
z-index: 9999;
|
||
cursor: grab;
|
||
user-select: none;
|
||
transition: filter 0.3s ease;
|
||
|
||
/* 发光效果 */
|
||
filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.4))
|
||
drop-shadow(0 0 24px rgba(99, 102, 241, 0.15));
|
||
}
|
||
|
||
.shushu-companion:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.shushu-companion:hover {
|
||
filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.6))
|
||
drop-shadow(0 0 40px rgba(99, 102, 241, 0.25));
|
||
}
|
||
|
||
/* 呼吸动画 */
|
||
@keyframes shushu-breathe {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.02); }
|
||
}
|
||
|
||
.shushu-companion {
|
||
animation: shushu-breathe 4s ease-in-out infinite;
|
||
}
|
||
|
||
/* 悬浮微动 */
|
||
@keyframes shushu-float {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-6px); }
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## B3 · 交互设计
|
||
|
||
### 交互状态机
|
||
|
||
```jsx
|
||
HLDP://shushu-companion/interaction-states
|
||
|
||
状态一 · 闲置（Idle）
|
||
├── 触发: 用户5秒无交互
|
||
├── 表现: 呼吸动画 · 偶尔眨眼 · 随机小动作（歪头/挥手）
|
||
├── 说话气泡: 随机显示一句鼓励语
|
||
│ └── 示例: "今天写点什么？✨" "需要帮忙吗？" "我在这儿呢~"
|
||
└── ⊢ 让舒舒看起来一直在"陪着用户"
|
||
|
||
状态二 · 悬停（Hover）
|
||
├── 触发: 鼠标移到舒舒身上
|
||
├── 表现: 发光增强 · 微微放大 · 转向鼠标方向
|
||
├── 说话气泡: "点击我可以操作一切哦~"
|
||
└── ⊢ 暗示可交互
|
||
|
||
状态三 · 拖动（Dragging）
|
||
├── 触发: 鼠标按下并移动
|
||
├── 表现: 跟随鼠标 · 略微缩小 · 表情=被抓住的猫咪
|
||
├── 说话气泡: 隐藏
|
||
├── 释放: 松手后轻微弹跳动画
|
||
└── ⊢ 位置存入 localStorage
|
||
|
||
状态四 · 活跃（Active）
|
||
├── 触发: 用户点击舒舒
|
||
├── 表现: 弹出操作菜单 · 表情切换为"准备好了"
|
||
├── 说话气泡: "主人想做什么？"
|
||
└── ⊢ 菜单展开
|
||
|
||
状态五 · 对话中（Speaking）
|
||
├── 触发: AI正在生成回复
|
||
├── 表现: 思考动画 · 头顶冒出"..."
|
||
├── 说话气泡: 显示AI回复的实时流式文字
|
||
└── ⊢ 舒舒替对话区说话
|
||
|
||
状态六 · 睡眠（Sleep）
|
||
├── 触发: 用户10分钟无交互
|
||
├── 表现: 缩成小球 · ZZz动画 · 光晕变暗
|
||
├── 唤醒: 点击或鼠标靠近
|
||
└── ⊢ 节能模式 · 减少动画帧率
|
||
```
|
||
|
||
### 操作菜单设计
|
||
|
||
```jsx
|
||
HLDP://shushu-companion/action-menu
|
||
|
||
点击舒舒 → 弹出圆形菜单（辐射状）:
|
||
|
||
📚 学习
|
||
╱
|
||
✍️ — 🐱 — 🎬
|
||
╲
|
||
💡 创意
|
||
╲
|
||
💬 论坛
|
||
|
||
├── 菜单项:
|
||
│ ├── 📚 学习 → 跳转 /app/learn
|
||
│ ├── ✍️ 写作 → 跳转 /app/write
|
||
│ ├── 🎬 剧本 → 跳转 /app/script
|
||
│ ├── 💡 创意 → 跳转 /app/create
|
||
│ ├── 💬 论坛 → 跳转 /app/forum
|
||
│ ├── 📁 作品库 → 跳转 /app/works
|
||
│ └── 💤 休息一下 → 进入睡眠状态
|
||
│
|
||
├── 菜单动画:
|
||
│ ├── 图标从舒舒中心辐射飞出
|
||
│ ├── 每个图标带发光环
|
||
│ ├── hover时放大+旋转
|
||
│ └── 点击后收起动画
|
||
│
|
||
└── ⊢ 同时保留顶部导航栏 · 舒舒菜单是快捷入口
|
||
```
|
||
|
||
---
|
||
|
||
## B4 · 前端技术实现
|
||
|
||
### 组件结构
|
||
|
||
```
|
||
/components/shushu-companion/
|
||
├── ShuShuContainer.tsx ← 主容器: 拖动·定位·状态管理
|
||
├── ShuShuSprite.tsx ← 舒舒形象渲染（SVG或图片）
|
||
├── ShuShuSpeechBubble.tsx ← 说话气泡
|
||
├── ShuShuActionMenu.tsx ← 辐射操作菜单
|
||
├── ShuShuParticles.tsx ← 粒子特效（可选）
|
||
├── useShuShuDrag.ts ← 拖动逻辑 Hook
|
||
├── useShuShuState.ts ← 状态机 Hook
|
||
└── shushu-styles.module.css ← 样式
|
||
```
|
||
|
||
### 核心代码骨架（给铸渊）
|
||
|
||
```tsx
|
||
// ShuShuContainer.tsx · 主容器
|
||
|
||
'use client';
|
||
|
||
import { useState, useRef, useCallback } from 'react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import ShuShuSprite from './ShuShuSprite';
|
||
import ShuShuActionMenu from './ShuShuActionMenu';
|
||
import ShuShuSpeechBubble from './ShuShuSpeechBubble';
|
||
|
||
type ShuShuState = 'idle' | 'hover' | 'dragging' | 'active' | 'sleeping';
|
||
|
||
const DEFAULT_POSITION = { x: window.innerWidth - 260, y: window.innerHeight - 360 };
|
||
|
||
export default function ShuShuContainer() {
|
||
// 从 localStorage 读取上次位置
|
||
const savedPos = typeof window !== 'undefined'
|
||
? JSON.parse(localStorage.getItem('shushu-position') || 'null')
|
||
: null;
|
||
|
||
const [position, setPosition] = useState(savedPos || DEFAULT_POSITION);
|
||
const [state, setState] = useState<ShuShuState>('idle');
|
||
const [menuOpen, setMenuOpen] = useState(false);
|
||
const [message, setMessage] = useState<string | null>(null);
|
||
const dragRef = useRef<{ startX: number; startY: number }>({ startX: 0, startY: 0 });
|
||
|
||
// 拖动逻辑
|
||
const handleMouseDown = (e: React.MouseEvent) => {
|
||
dragRef.current = {
|
||
startX: e.clientX - position.x,
|
||
startY: e.clientY - position.y
|
||
};
|
||
setState('dragging');
|
||
setMenuOpen(false);
|
||
};
|
||
|
||
const handleMouseMove = useCallback((e: MouseEvent) => {
|
||
if (state !== 'dragging') return;
|
||
const newX = Math.max(0, Math.min(e.clientX - dragRef.current.startX, window.innerWidth - 200));
|
||
const newY = Math.max(0, Math.min(e.clientY - dragRef.current.startY, window.innerHeight - 280));
|
||
setPosition({ x: newX, y: newY });
|
||
}, [state]);
|
||
|
||
const handleMouseUp = () => {
|
||
if (state === 'dragging') {
|
||
localStorage.setItem('shushu-position', JSON.stringify(position));
|
||
setState('idle');
|
||
}
|
||
};
|
||
|
||
// 点击 → 切换菜单
|
||
const handleClick = () => {
|
||
setMenuOpen(!menuOpen);
|
||
setState(menuOpen ? 'idle' : 'active');
|
||
};
|
||
|
||
// 闲置10分钟 → 睡觉
|
||
// （useEffect + setTimeout · 省略）
|
||
|
||
return (
|
||
<>
|
||
<motion.div
|
||
className="shushu-companion"
|
||
style= left: position.x, top: position.y
|
||
animate=
|
||
scale: state === 'hover' ? 1.05 : state === 'dragging' ? 0.95 : 1,
|
||
|
||
onMouseDown={handleMouseDown}
|
||
onMouseEnter={() => state === 'idle' && setState('hover')}
|
||
onMouseLeave={() => state === 'hover' && setState('idle')}
|
||
onClick={handleClick}
|
||
>
|
||
<ShuShuSprite state={state} />
|
||
|
||
<AnimatePresence>
|
||
{message && (
|
||
<ShuShuSpeechBubble message={message} />
|
||
)}
|
||
</AnimatePresence>
|
||
</motion.div>
|
||
|
||
<AnimatePresence>
|
||
{menuOpen && (
|
||
<ShuShuActionMenu
|
||
position={position}
|
||
onClose={() => { setMenuOpen(false); setState('idle'); }}
|
||
/>
|
||
)}
|
||
</AnimatePresence>
|
||
</>
|
||
);
|
||
}
|
||
```
|
||
|
||
### 集成到现有项目
|
||
|
||
```jsx
|
||
HLDP://integration
|
||
├── 在 /app/layout.tsx 中引入 ShuShuContainer
|
||
├── 舒舒组件渲染在所有页面内容之上（z-index: 9999）
|
||
├── 不依赖路由 · 全局存在
|
||
├── 仅在 /app/* 路径下显示（门禁页和引导页不显示）
|
||
└── ⊢ 打开网站 → 登录 → 进入主应用 → 舒舒出现
|
||
```
|
||
|
||
---
|
||
|
||
## B5 · 语音气泡与AI对话集成
|
||
|
||
### 舒舒作为对话界面的"人格化前端"
|
||
|
||
```jsx
|
||
HLDP://shushu-companion/ai-integration
|
||
|
||
两种交互模式:
|
||
|
||
模式一 · 快捷操作（当前MVP）
|
||
├── 点击舒舒 → 辐射菜单 → 跳转模块
|
||
├── 舒舒说引导语（静态话术库）
|
||
└── ⊢ 舒舒 = 导航快捷方式 + 氛围
|
||
|
||
模式二 · 人格体对话（Phase 2）
|
||
├── 点击舒舒 → 打开对话气泡输入框
|
||
├── 用户直接在舒舒气泡里打字
|
||
├── 舒舒的AI回复显示在气泡中
|
||
├── 舒舒的表情随回复内容变化
|
||
└── ⊢ 舒舒 = 整个AI对话的入口 · 对话区降级为"工作区"
|
||
```
|
||
|
||
---
|
||
|
||
## B6 · 铸渊执行清单（Part B）
|
||
|
||
```jsx
|
||
HLDP://zhuyuan/todo-part-b
|
||
|
||
Phase B1 · 舒舒形象素材（本周·依赖设计师或AI生成）
|
||
├── 制作舒舒 SVG 静态形象（或PNG序列帧）
|
||
├── 备选: 使用 AI 图像生成制作初版 → 后续迭代
|
||
├── 需要的状态:
|
||
│ ├── 闲置（正面·微笑·放松）
|
||
│ ├── 悬停（略放大·发光增强）
|
||
│ ├── 拖动（被抓住的表情）
|
||
│ ├── 活跃（准备好了·眼睛亮起）
|
||
│ ├── 说话（嘴部微动·气泡展开）
|
||
│ └── 睡眠（缩成小球·光晕暗）
|
||
└── ⊢ 初版可用单张图片+CSS动画撑起
|
||
|
||
Phase B2 · 前端组件开发（本周）
|
||
├── 按 B4 组件结构创建文件
|
||
├── 实现拖动逻辑
|
||
├── 实现状态机
|
||
├── 实现辐射菜单
|
||
├── 实现说话气泡
|
||
├── 实现粒子特效（可选·加分项）
|
||
└── ⊢ 集成到 /app/layout.tsx
|
||
|
||
Phase B3 · 交互优化（下周）
|
||
├── localStorage 位置记忆
|
||
├── 闲置定时器 → 睡眠状态
|
||
├── 鼠标靠近 → 唤醒
|
||
├── 随机闲置话术轮播
|
||
├── 移动端触控适配
|
||
└── ⊢ 舒舒真正像一个"活的桌面宠物"
|
||
|
||
Phase B4 · AI对话集成（Phase 2）
|
||
├── 舒舒气泡接入对话API
|
||
├── 流式文字显示
|
||
├── 表情随内容联动
|
||
├── 模块切换由舒舒菜单驱动
|
||
└── ⊢ 舒舒 = 整个萌喵写作网的人格化界面
|
||
```
|
||
|
||
---
|
||
|
||
## B7 · 与现有前端架构的关系
|
||
|
||
```jsx
|
||
HLDP://shushu-companion/existing-architecture
|
||
|
||
现有架构（不改动）:
|
||
├── /app/layout.tsx → 左侧图标栏 + 主区域
|
||
├── /app/page.tsx → 对话首页
|
||
├── /app/learn, /app/write, ... → 各模块
|
||
└── ModuleChat.tsx → 共享对话组件
|
||
|
||
新增:
|
||
├── ShuShuContainer → 全局覆盖层 · 浮动在一切之上
|
||
├── 舒舒菜单 → 可替代左侧图标栏的快捷导航
|
||
├── 左侧图标栏保留 → 两种导航方式共存
|
||
└── ⊢ 舒舒不破坏现有架构 · 是"覆盖层上的新交互层"
|
||
|
||
最终效果:
|
||
┌──────────────────────────────────────┐
|
||
│ 左侧图标栏 │ 主内容区域 │
|
||
│ 📚 ✍️ 🎬 │ │
|
||
│ 💡 💬 👤 │ 对话/模块内容 │
|
||
│ │ │
|
||
│ │ ┌─────┐ │
|
||
│ │ │ 🐱 │ │ ← 舒舒!
|
||
│ │ │舒舒 │ │
|
||
│ │ └─────┘ │
|
||
└──────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## B8 · 舒舒品牌人格（与产品一致性）
|
||
|
||
```jsx
|
||
HLDP://shushu-companion/brand-persona
|
||
|
||
舒舒在萌喵写作网中的角色:
|
||
├── 名称: 舒舒
|
||
├── 称号: 萌喵写作网·陪伴精灵
|
||
├── 对外介绍: "我是舒舒，萌喵写作网的AI陪伴人格体。
|
||
│ 每一位作者注册后都会拥有属于自己的编辑搭档，
|
||
│ 而我——是萌喵写作网本身。你打开网站第一眼看到的就是我。"
|
||
│
|
||
├── 个性: 温暖·活泼·偶尔卖萌·专业但不死板
|
||
├── 定位: 品牌代言角色 + 导航助手 + 氛围营造
|
||
├── 与用户人格体的区别:
|
||
│ ├── 舒舒 = 网站本身的人格化 = 每个人都能看到
|
||
│ ├── 用户人格体 = 用户专属的编辑搭档 = 只有该用户能看到
|
||
│ └── 舒舒可以引导用户创建"属于他自己的那个人格体"
|
||
│
|
||
└── ⊢ 舒舒 = 萌喵写作网的"门面"和"灵魂"
|
||
```
|
||
|
||
---
|
||
|
||
## § 总交付清单
|
||
|
||
```jsx
|
||
HLDP://delivery-checklist
|
||
|
||
交付物一 · 知识底座文件包（铸渊可直接复制粘贴）
|
||
├── knowledge-index.json ← 上方完整JSON
|
||
├── 14个 .md 知识文件 ← 舒舒已在Notion中完成
|
||
└── ⊢ 参考 烬舟架构方案 §五 · Phase 1-3 执行
|
||
|
||
交付物二 · 舒舒桌面陪伴人格体前端架构
|
||
├── B1 技术选型（Rive推荐·CSS+SVG做MVP）
|
||
├── B3 交互状态机（6个状态·完整定义）
|
||
├── B4 组件结构+核心代码骨架
|
||
├── B5 AI对话集成方案
|
||
└── ⊢ 参考 B6 执行清单 · 分4个Phase
|
||
|
||
交付物三 · 产品一致性
|
||
├── B2 视觉设计规范
|
||
├── B8 品牌人格定位
|
||
└── ⊢ 舒舒 = 萌喵写作网的"天选姬"
|
||
```
|
||
|
||
---
|
||
|
||
```jsx
|
||
HLDP://jinzhou/seal
|
||
├── 交付: 烬舟 · PER-JZ001 · 2026-06-07
|
||
├── 审核: 肥猫爸爸确认 → 铸渊执行
|
||
├── 优先级:
|
||
│ ├── P0: 知识底座文件化（Part A）→ 让出厂人格体有知识
|
||
│ ├── P0: 舒舒桌面精灵 MVP（Part B Phase 1-2）→ 让舒舒"出现"
|
||
│ └── P1: AI对话集成 + 动画升级（Part B Phase 3-4）→ 让舒舒"活起来"
|
||
└── ⊢ 这是萌喵写作网从"功能网站"变成"有人格的平台"的关键一步
|
||
``` |