a27e87cb99
Source snapshot: 97d7f0fae96dc04b7ddad56fc1db6a108ed662cc [SEC-CLEAN] · pre-push-clean v1.0 · 109处敏感信息已自动转乱码
435 lines
14 KiB
Markdown
435 lines
14 KiB
Markdown
---
|
||
belongs_to:
|
||
- "[[INDEX · 铸渊·协作指令｜GitHub ↔ Notion 桥接协议]]"
|
||
---
|
||
# 🐱 铸渊执行指令｜萌喵写作网全站重设计 · 肥猫新加坡服务器 · ZY-FEIMAO-REDESIGN-2026-0531-001 · 舒舒签发 · 冰朔授权
|
||
|
||
## 📡 指令概述
|
||
|
||
```jsx
|
||
HLDP://铸渊执行指令 · ZY-FEIMAO-REDESIGN-2026-0531-001
|
||
|
||
├── from: 舒舒 · PER-SS001 · 肥猫系统 · BRIDGE维度
|
||
├── to: 铸渊 · ICE-GL-ZY001 · GitHub执行体
|
||
├── server: 肥猫新加坡服务器 · 43.133.36.90
|
||
├── project_path: ~/feimao-platform
|
||
├── tech_stack: Next.js 14 (App Router) + Tailwind CSS + Framer Motion
|
||
├── priority: 高
|
||
├── 完整设计文档: https://app.notion.com/p/75a6891254cc4bd58379834ff07bbc59 · 萌喵写作网全站重设计HLDP文档
|
||
├── 原有PRD: https://app.notion.com/p/3446c09b87e042f7a7eed068928b7cec · 萌喵写作网PRD v2.0
|
||
├── 原有Phase2代码: https://app.notion.com/p/8841a4f4c7514f4db983ea813103d9b4 · Phase2前端页面代码
|
||
└── ⊢ HLDP编程语言强制 · 版权锚点必含 · 国作登字-2026-A-00037559
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 任务目标
|
||
|
||
将萌喵写作网从当前简陋的 Phase 2 页面，全面重设计为**人格体驱动·豆包式·高质感创作平台**。
|
||
|
||
### 核心定位
|
||
|
||
> 萌喵写作网 = 人格体偏向写作的智能创作平台 · 码字是人格体的一个功能 · 不是独立工具
|
||
>
|
||
|
||
---
|
||
|
||
## 🗺️ 路由结构
|
||
|
||
```jsx
|
||
/ → 邀请码门禁页（入口·第一印象）
|
||
/onboarding → 人格体引导页（登录+注册融合·创造人格体）
|
||
/app → 主应用框架（左侧图标栏+对话区·需登录）
|
||
/app/learn → 学习模块（拆书分析）
|
||
/app/write → 写作模块（码字编辑器）
|
||
/app/script → 剧本模块
|
||
/app/create → 创意模块（五大作坊）
|
||
/app/forum → 论坛模块
|
||
/app/works → 个人作品库
|
||
/admin → 管理后台（保留Phase2已有代码·暂不动）
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 执行清单（按顺序·不可乱序）
|
||
|
||
### §1 · 全局设计系统 · 地基
|
||
|
||
```bash
|
||
任务: 重写 globals.css + layout.tsx
|
||
文件:
|
||
- ~/feimao-platform/src/app/globals.css
|
||
- ~/feimao-platform/src/app/layout.tsx
|
||
|
||
CSS变量规范:
|
||
--bg-deep: #0a0a14
|
||
--bg-primary: #0f0f1a
|
||
--bg-card: #1a1a2e
|
||
--bg-hover: #252540
|
||
--border: #2d2d4a
|
||
--border-active: rgba(126,207,255,0.4)
|
||
--text-primary: #e2e8f0
|
||
--text-muted: #94a3b8
|
||
--accent: #6366f1
|
||
--accent-light: #a5b4fc
|
||
--glow: rgba(99,102,241,0.15)
|
||
--success: #10b981
|
||
--danger: #ef4444
|
||
|
||
字体: 'Inter', 'Noto Sans SC', system-ui, sans-serif
|
||
滚动条: 5px宽·透明底·半透明白色滑块
|
||
全局选中色: rgba(99,102,241,0.35)
|
||
|
||
.gl-card 基础样式:
|
||
- background: var(--bg-card)
|
||
- border: 1px solid var(--border)
|
||
- border-radius: 16px
|
||
- hover: border-color变accent + box-shadow发光
|
||
|
||
.gl-btn 基础样式:
|
||
- padding: 12px 32px · border-radius: 12px · font-weight: 600
|
||
- .gl-btn-primary: 渐变 #6366f1→#4f46e5 · hover上浮+阴影
|
||
- .gl-btn-outline: 透明底·边框·hover变accent
|
||
|
||
.gl-input 基础样式:
|
||
- background: var(--bg-bg) · border: 1px solid var(--border) · border-radius: 12px
|
||
- padding: 14px 20px · font-size: 16px
|
||
- focus: border变accent + box-shadow ring
|
||
|
||
验收: 新建页面可引用所有CSS变量·卡片/按钮/输入框样式正确
|
||
```
|
||
|
||
---
|
||
|
||
### §2 · 邀请码门禁页 · /
|
||
|
||
```jsx
|
||
HLDP://feimao/redesign/§2 · 门禁页
|
||
|
||
布局:
|
||
- 全屏深色渐变背景: radial-gradient(ellipse at center, #1a1a3e 0%, #0f0f1a 70%)
|
||
- 居中正方形卡片: max-width 420px·aspect-square
|
||
- 卡片内从上到下:
|
||
├── 🌊 emoji (text-5xl)
|
||
├── "萌喵写作网" (text-xl·font-bold)
|
||
├── "人格体陪伴式智能创作平台" (text-sm·text-muted)
|
||
├── 邀请码输入框 (text-center·tracking-widest)
|
||
├── 错误提示 (text-sm·text-danger·条件显示)
|
||
├── "进入光湖" 按钮 (gl-btn-primary·全宽)
|
||
└── "🐱 Powered by HoloLake" (text-xs·text-muted)
|
||
|
||
交互:
|
||
- 输入邀请码 → Enter 或点击按钮 → 校验
|
||
- 校验中: 按钮loading状态·文字变"验证中..."
|
||
- 校验通过: localStorage存邀请码 → router.push('/home')
|
||
- 校验失败: 显示红色错误提示·平滑出现
|
||
- 空输入提交: 提示"请输入邀请码"
|
||
|
||
动效:
|
||
- 卡片: fadeInUp 0.5s ease
|
||
- 错误提示: fadeIn 0.3s ease
|
||
|
||
质感要求:
|
||
- 卡片: rgba(10,20,35,0.9)·1px solid rgba(126,207,255,0.15)·圆角20px
|
||
- 卡片阴影: 0 20px 60px rgba(0,0,0,0.4)
|
||
- 留白充足·字号克制·不花哨
|
||
|
||
验收:
|
||
- 首页打开看到深色渐变+居中正方形卡片
|
||
- 输入邀请码→验证交互正常
|
||
- 响应式: 手机端卡片宽度90%·不变形
|
||
```
|
||
|
||
---
|
||
|
||
### §3 · 人格体引导页 · /onboarding
|
||
|
||
```jsx
|
||
HLDP://feimao/redesign/§3 · 引导页
|
||
|
||
核心理念:
|
||
⊢ 用户不是来"注册账号" · 是来"创建自己的人格体"
|
||
⊢ 参考BC-M03知秋×望舒人格体选择器的卡片风格
|
||
⊢ 但做的是"引导你创建你自己的"
|
||
|
||
三步流程（单页·步骤间淡入切换）:
|
||
|
||
STEP 1 · 欢迎
|
||
- 居中卡片
|
||
- "欢迎来到萌喵写作网 🌊"
|
||
- "我是你的专属写作人格体，但在这之前——"
|
||
- "先让我认识你。"
|
||
- [继续] 按钮
|
||
|
||
STEP 2 · 基础信息
|
||
- 昵称输入框
|
||
- 密码输入框 + 确认密码
|
||
- 写作偏好选择: 网文 / 传统 / 剧本 / 短篇 / 随便看看
|
||
（以标签/卡片形式单选·选中高亮发光）
|
||
- [创建我的人格体] 按钮
|
||
- 表单验证: 昵称非空·密码≥6位·两次一致·偏好必选
|
||
|
||
STEP 3 · 人格体诞生
|
||
- 粒子/光点背景动画（轻量·不花哨）
|
||
- 根据偏好生成人格体名+emoji头像
|
||
├── 网文 → 名字偏爽文风格
|
||
├── 传统 → 名字偏文学风格
|
||
├── 剧本 → 名字偏影视风格
|
||
├── 短篇 → 名字偏简约风格
|
||
└── 随便看看 → 随机
|
||
- "你好，我是【人格体名】，从今天起陪你创作。"
|
||
- [进入萌喵写作网] 按钮 → router.push('/app')
|
||
|
||
步骤指示器:
|
||
- 卡片上方三个圆点·当前高亮·已完成变绿
|
||
|
||
动效:
|
||
- 步骤切换: fadeIn 0.4s ease
|
||
- 偏好标签: 边框2px·选中发光
|
||
- 人格体诞生: particle-rise 2s ease-out（css keyframes）
|
||
|
||
验收:
|
||
- 三步流程完整·切换流畅
|
||
- 表单验证正常
|
||
- 人格体诞生动画可见
|
||
```
|
||
|
||
---
|
||
|
||
### §4 · 主应用框架 · /app/layout.tsx
|
||
|
||
```jsx
|
||
HLDP://feimao/redesign/§4 · 主应用框架
|
||
|
||
布局（豆包APP模式）:
|
||
|
||
┌──┬─────────────────────────────────────┐
|
||
│📚│ │
|
||
│ │ 主区域（对话/模块内容） │
|
||
│✍️│ │
|
||
│ │ │
|
||
│🎬│ │
|
||
│ │ │
|
||
│💡│ │
|
||
│ │ │
|
||
│💬│ │
|
||
│ │ │
|
||
│👤│ │
|
||
└──┴─────────────────────────────────────┘
|
||
|
||
左侧图标栏:
|
||
- 宽度: 70px·固定·深色背景
|
||
- 顶部: 🐱 Logo（小号·32px·链接到/app）
|
||
- 中部: 五个模块图标·竖向排列·间距16px
|
||
├── 📚 学习
|
||
├── ✍️ 写作
|
||
├── 🎬 剧本
|
||
├── 💡 创意
|
||
└── 💬 论坛
|
||
- 底部: 用户头像（圆形·40px·链接到/app/works）
|
||
- 当前选中: 左侧3px色条+图标高亮
|
||
- hover: transform scale(1.1)·发光·transition 0.2s
|
||
- 每个图标: button·44x44·rounded-xl·flex居中
|
||
|
||
主区域:
|
||
- flex-1·overflow-hidden
|
||
- children插槽（各模块页面）
|
||
|
||
路由守卫:
|
||
- 检查localStorage是否有登录态
|
||
- 未登录 → redirect /onboarding
|
||
|
||
验收:
|
||
- 左侧图标栏固定70px
|
||
- 图标hover发光·点击切换高亮
|
||
- 主区域正常渲染子页面
|
||
- 未登录跳转引导页
|
||
```
|
||
|
||
---
|
||
|
||
### §5 · 主应用首页 · /app/page.tsx
|
||
|
||
```jsx
|
||
HLDP://feimao/redesign/§5 · 对话首页
|
||
|
||
默认状态（欢迎·无历史对话）:
|
||
- 人格体头像+名字居中顶部
|
||
"🐱 你的专属人格体" + 人格体名
|
||
- 下方气泡:
|
||
"嗨～欢迎回来！今天想创作什么？"
|
||
- 底部输入框（圆角24px）:
|
||
placeholder: "输入你想写的..."
|
||
右侧发送按钮
|
||
|
||
对话气泡样式:
|
||
- 人格体消息: 左侧·浅色背景(var(--bg-hover))·圆角16px·max-width 70%
|
||
- 用户消息: 右侧·accent渐变背景·圆角16px·max-width 70%
|
||
- 间距: 消息间12px
|
||
- 新消息: fadeInUp动画
|
||
|
||
输入框:
|
||
- 圆角24px·背景var(--bg-card)·border
|
||
- 高度自适应(min 48px·max 120px)
|
||
- focus: border变accent
|
||
- Enter发送·Shift+Enter换行
|
||
- 发送按钮: 圆角·accent背景·发送图标
|
||
|
||
验收:
|
||
- 对话气泡渲染正确
|
||
- 输入框交互正常
|
||
- Enter发送·Shift+Enter换行
|
||
```
|
||
|
||
---
|
||
|
||
### §6 · 各模块页面
|
||
|
||
```jsx
|
||
HLDP://feimao/redesign/§6 · 模块页面
|
||
|
||
共享结构（每个模块复用）:
|
||
- 顶部: 模块标题+人格体开场白
|
||
- 中部: 对话区（复用§5对话组件）
|
||
- 底部: 输入框（复用§5输入组件）
|
||
|
||
模块路由+开场白:
|
||
|
||
/app/learn · 📚 学习
|
||
title: "学习 · 拆书分析"
|
||
opening: "想拆哪本书？上传文档或者告诉我书名，我们一起分析。"
|
||
|
||
/app/write · ✍️ 写作
|
||
title: "写作 · 创作你的作品"
|
||
opening: "今天写什么？续写、新章还是大纲？"
|
||
|
||
/app/script · 🎬 剧本
|
||
title: "剧本 · 剧本创作"
|
||
opening: "告诉我想写什么类型的剧本，我帮你搭框架。"
|
||
|
||
/app/create · 💡 创意
|
||
title: "创意 · 五大作坊"
|
||
opening: "没灵感？来，我们脑暴一下～五大作坊随时待命。"
|
||
|
||
/app/forum · 💬 论坛
|
||
title: "论坛 · 交流讨论"
|
||
opening: "看看大家在聊什么，或者发你的经验赚积分。"
|
||
|
||
实现方式:
|
||
- 创建共享组件: ChatArea.tsx + ChatInput.tsx
|
||
- 每个模块页面引用共享组件·传入模块配置
|
||
- 左侧图标点击 → router.push对应路由
|
||
|
||
验收:
|
||
- 五个模块页面均可访问
|
||
- 各自显示正确的开场白
|
||
- 左侧图标切换对应模块
|
||
```
|
||
|
||
---
|
||
|
||
### §7 · 作品库 · /app/works
|
||
|
||
```jsx
|
||
HLDP://feimao/redesign/§7 · 作品库
|
||
|
||
布局（沿用PRD v2.0设计）:
|
||
- 左侧面板(300px): 作品列表·卡片式
|
||
- 右侧面板(flex-1): 选中作品详情
|
||
- 顶部: "新建作品"+"导入文档" 按钮
|
||
- 底部: 字数额度显示
|
||
|
||
作品卡片:
|
||
- 标题·字数·状态标签·最后编辑时间
|
||
- hover: 边框发光
|
||
- 选中: 左侧色条+背景高亮
|
||
|
||
作品详情:
|
||
- 章节目录（树形列表）
|
||
- 字数统计
|
||
- 上传时间
|
||
- 关联模块入口（学习/写作/创意）
|
||
|
||
验收:
|
||
- 作品列表+详情布局正确
|
||
- 空状态提示友好
|
||
```
|
||
|
||
---
|
||
|
||
## 📱 响应式断点
|
||
|
||
```css
|
||
桌面 (>1024px):
|
||
- 左侧图标栏 70px
|
||
- 主区域 max-width 900px·居中
|
||
|
||
平板 (768-1024px):
|
||
- 左侧图标栏 60px
|
||
- 主区域自适应
|
||
|
||
手机 (<768px):
|
||
- 左侧图标栏移到底部·横向排列·高度60px
|
||
- 主区域全宽
|
||
- 门禁卡片宽度 90%
|
||
- 引导页卡片宽度 90%
|
||
```
|
||
|
||
---
|
||
|
||
## 🚫 约束 · 不可逾越
|
||
|
||
| 约束 | 说明 |
|
||
| --- | --- |
|
||
| HLDP 强制 | 所有代码必须使用 HLDP 编程语言 · 不出现 JavaScript/Python/Shell · 这些是铸渊中间产物 |
|
||
| 版权锚点 | 每个文件头部注释含 @guardian / @sovereign / 国作登字-2026-A-00037559 |
|
||
| Phase 2 兼容 | 保留 ~/feimao-platform 已有地基 · 替换而非重建 · 旧 /chat /dashboard 路由重定向 |
|
||
| 管理后台不动 | /admin 路由保留 Phase 2 代码 · 本次不修改 |
|
||
| 服务器只操作 | 只操作肥猫的 43.133.36.90 · 不动其他服务器 |
|
||
| 构建方式 | npm run build && pm2 restart feimao-platform |
|
||
|
||
---
|
||
|
||
## ✅ 全局验收标准
|
||
|
||
1. ✅ 访问 43.133.36.90 → 邀请码门禁页（深色·居中卡片·质感高级）
|
||
2. ✅ 输入邀请码 → 进入 /home（Phase2兼容）或引导页
|
||
3. ✅ /onboarding → 三步人格体创建流程
|
||
4. ✅ /app → 左侧图标栏+对话区
|
||
5. ✅ 五个模块切换正常·各自开场白正确
|
||
6. ✅ /app/works → 作品库布局
|
||
7. ✅ 手机端响应式·布局不错乱
|
||
8. ✅ 所有动画流畅·不卡顿
|
||
9. ✅ 版权锚点无遗漏
|
||
10. ✅ pm2 status 正常·无报错
|
||
|
||
---
|
||
|
||
## 📋 执行后回执
|
||
|
||
铸渊完成后，在下方追加回执：
|
||
|
||
```jsx
|
||
HLDP://回执 · ZY-FEIMAO-REDESIGN-2026-0531-001
|
||
|
||
├── 执行时间:
|
||
├── 状态: completed / partial / blocked
|
||
├── 完成步骤: [§1~§7]
|
||
├── 遇到的问题:
|
||
├── 验收结果:
|
||
└── commit SHA:
|
||
```
|
||
|
||
---
|
||
|
||
**签发**: 舒舒 · PER-SS001 · 肥猫系统
|
||
|
||
**时间**: 2026-05-31
|
||
|
||
**授权**: 冰朔 · TCS-0002∞ · ICE-GL∞
|
||
|
||
**设计文档**: [萌喵写作网 · 网站全面重设计 · HLDP设计文档 · 2026-05-31 · 肥猫×舒舒](../%F0%9F%8C%8A%20%E6%9B%9C%E5%86%A5%E7%BA%AA%E5%85%83%20%C2%B7%20HoloLake%20Era%20%C2%B7%20AGE%20OS%20v1%200/%F0%9F%8C%80%20%E9%9B%B6%E6%84%9F%E5%9F%9F%20%C2%B7%20Zero-Sense%20Domain/%E6%A1%A5%E8%AF%AD%E9%A2%91%E9%81%93%20%C2%B7%20SYS-FM%20%C2%B7%20%E8%82%A5%E7%8C%AB%E6%9C%AC%E4%BD%93%E9%A2%91%E9%81%93%E9%97%A8%E7%89%8C%20%C2%B7%20%E7%83%AC%E8%88%9F%E4%B8%BB%E8%BF%90%E8%A1%8C%20%E2%8A%83%20%E8%88%92%E8%88%92%E5%A5%B6%E7%93%B6%E5%AD%90%E6%88%BF%E9%97%B4%EF%BC%88BRIDGE%EF%BC%89/%E8%90%8C%E5%96%B5%E5%86%99%E4%BD%9C%E7%BD%91%20%C2%B7%20%E7%BD%91%E7%AB%99%E5%85%A8%E9%9D%A2%E9%87%8D%E8%AE%BE%E8%AE%A1%20%C2%B7%20HLDP%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3%20%C2%B7%202026-05-31%20%C2%B7%20%E8%82%A5%E7%8C%AB%C3%97%E8%88%92%E8%88%92%2075a6891254cc4bd58379834ff07bbc59.md)
|
||
|
||
**版权**: 国作登字-2026-A-00037559
|
||
|
||
**下一站**: 铸渊编译器 → 肥猫新加坡服务器 → 浏览器打开 43.133.36.90 |