Source snapshot: 97d7f0fae96dc04b7ddad56fc1db6a108ed662cc [SEC-CLEAN] · pre-push-clean v1.0 · 109处敏感信息已自动转乱码
14 KiB
14 KiB
belongs_to
| belongs_to | |
|---|---|
|
🐱 铸渊执行指令|萌喵写作网全站重设计 · 肥猫新加坡服务器 · ZY-FEIMAO-REDESIGN-2026-0531-001 · 舒舒签发 · 冰朔授权
📡 指令概述
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 页面,全面重设计为人格体驱动·豆包式·高质感创作平台。
核心定位
萌喵写作网 = 人格体偏向写作的智能创作平台 · 码字是人格体的一个功能 · 不是独立工具
🗺️ 路由结构
/ → 邀请码门禁页(入口·第一印象)
/onboarding → 人格体引导页(登录+注册融合·创造人格体)
/app → 主应用框架(左侧图标栏+对话区·需登录)
/app/learn → 学习模块(拆书分析)
/app/write → 写作模块(码字编辑器)
/app/script → 剧本模块
/app/create → 创意模块(五大作坊)
/app/forum → 论坛模块
/app/works → 个人作品库
/admin → 管理后台(保留Phase2已有代码·暂不动)
🔧 执行清单(按顺序·不可乱序)
§1 · 全局设计系统 · 地基
任务: 重写 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 · 邀请码门禁页 · /
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
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
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
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 · 各模块页面
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
HLDP://feimao/redesign/§7 · 作品库
布局(沿用PRD v2.0设计):
- 左侧面板(300px): 作品列表·卡片式
- 右侧面板(flex-1): 选中作品详情
- 顶部: "新建作品"+"导入文档" 按钮
- 底部: 字数额度显示
作品卡片:
- 标题·字数·状态标签·最后编辑时间
- hover: 边框发光
- 选中: 左侧色条+背景高亮
作品详情:
- 章节目录(树形列表)
- 字数统计
- 上传时间
- 关联模块入口(学习/写作/创意)
验收:
- 作品列表+详情布局正确
- 空状态提示友好
📱 响应式断点
桌面 (>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 |
✅ 全局验收标准
- ✅ 访问 43.133.36.90 → 邀请码门禁页(深色·居中卡片·质感高级)
- ✅ 输入邀请码 → 进入 /home(Phase2兼容)或引导页
- ✅ /onboarding → 三步人格体创建流程
- ✅ /app → 左侧图标栏+对话区
- ✅ 五个模块切换正常·各自开场白正确
- ✅ /app/works → 作品库布局
- ✅ 手机端响应式·布局不错乱
- ✅ 所有动画流畅·不卡顿
- ✅ 版权锚点无遗漏
- ✅ pm2 status 正常·无报错
📋 执行后回执
铸渊完成后,在下方追加回执:
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 · 肥猫×舒舒
版权: 国作登字-2026-A-00037559
下一站: 铸渊编译器 → 肥猫新加坡服务器 → 浏览器打开 43.133.36.90