---
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