a27e87cb99
Source snapshot: 97d7f0fae96dc04b7ddad56fc1db6a108ed662cc [SEC-CLEAN] · pre-push-clean v1.0 · 109处敏感信息已自动转乱码
363 lines
12 KiB
Markdown
363 lines
12 KiB
Markdown
# 萌喵写作网 · 网站全面重设计 · HLDP设计文档 · 2026-05-31 · 肥猫×舒舒
|
||
|
||
## 📋 设计概要
|
||
|
||
```jsx
|
||
HLDP://feimao/mengmiao/redesign/v1 · 2026-05-31
|
||
├── what: 萌喵写作网全站重设计
|
||
├── why: 当前Phase2页面布局简陋·没有人格体风格·模块堆叠无层次
|
||
├── who: 肥猫定方向×舒舒写HLDP×铸渊执行
|
||
├── ref: 看点写作(门禁)·豆包APP(对话框)·知秋×望舒(人格体卡片)
|
||
└── ⊢ 核心定位: 人格体写作模块·码字是人格体的一个功能·不是独立工具
|
||
```
|
||
|
||
---
|
||
|
||
## 🗺️ 用户旅程总览
|
||
|
||
```mermaid
|
||
graph LR
|
||
A["🔐 邀请码门禁"] --> B["🌊 人格体引导页"]
|
||
B --> C["🪪 注册·创建自己的人格体"]
|
||
C --> D["💬 主应用·人格体对话"]
|
||
D --> E1["📚 学习"]
|
||
D --> E2["✍️ 写作"]
|
||
D --> E3["🎬 剧本"]
|
||
D --> E4["💡 创意"]
|
||
D --> E5["💬 论坛"]
|
||
```
|
||
|
||
---
|
||
|
||
## 🔐 第一屏 · 邀请码门禁页
|
||
|
||
### 设计参考
|
||
|
||
- 看点写作门禁：居中卡片·正方形比例·留白充足
|
||
- 光湖 BC-M01 登录壳子：深色背景·渐变·发光边框
|
||
|
||
### 布局
|
||
|
||
```jsx
|
||
┌──────────────────────────────────────┐
|
||
│ │
|
||
│ 🌊 光湖 Logo │
|
||
│ │
|
||
│ ┌─────────────────────┐ │
|
||
│ │ │ │
|
||
│ │ 🐱 萌喵写作网 │ │
|
||
│ │ │ │
|
||
│ │ 人格体陪伴式 │ │
|
||
│ │ 智能创作平台 │ │
|
||
│ │ │ │
|
||
│ │ ┌───────────────┐ │ │
|
||
│ │ │ 请输入邀请码 │ │ │
|
||
│ │ └───────────────┘ │ │
|
||
│ │ │ │
|
||
│ │ [ 进入光湖 ] │ │
|
||
│ │ │ │
|
||
│ └─────────────────────┘ │
|
||
│ │
|
||
│ 🐱 Powered by HoloLake │
|
||
│ │
|
||
└──────────────────────────────────────┘
|
||
```
|
||
|
||
### 设计要求
|
||
|
||
- **背景**：深色渐变 `radial-gradient(ellipse at center, #1a1a3e 0%, #0f0f1a 70%)`
|
||
- **卡片**：正方形比例·圆角 20px·`rgba(10,20,35,0.9)` 半透明底·`1px solid rgba(126,207,255,0.15)` 发光边框
|
||
- **输入框**：深色底·`rgba(255,255,255,0.05)`·聚焦时边框变亮 `rgba(126,207,255,0.6)`
|
||
- **按钮**：渐变 `linear-gradient(135deg, #6366f1, #4f46e5)`·hover 上浮阴影
|
||
- **字体**：系统默认 · 字号克制 · 不花哨
|
||
- **动效**：卡片淡入动画 · 按钮 hover 微动 · 错误提示平滑出现
|
||
|
||
### 一句话感觉
|
||
|
||
> 「这不是一个随便谁都能进的网站。质感从第一眼就要让人觉得——这不是草台班子。」
|
||
>
|
||
|
||
---
|
||
|
||
## 🌊 第二屏 · 人格体引导页（登录/注册融合）
|
||
|
||
### 核心设计理念
|
||
|
||
用户不是来「注册账号」的——是来「创建自己的人格体」的。
|
||
|
||
参考知秋×望舒人格体选择器，但做的是「引导你创建你自己的」。
|
||
|
||
### 流程
|
||
|
||
```
|
||
Step 1: 欢迎语
|
||
├── 「欢迎来到萌喵写作网 🌊」
|
||
├── 「我是你的专属写作人格体，但在这之前——」
|
||
└── 「先让我认识你。」
|
||
|
||
Step 2: 基础信息
|
||
├── 昵称输入
|
||
├── 密码设置
|
||
└── 写作偏好选择（网文/传统/剧本/短篇/随便看看）
|
||
|
||
Step 3: 人格体诞生
|
||
├── 根据偏好生成专属人格体名+头像
|
||
├── 「你好，我是【人格体名】，从今天起陪你写作。」
|
||
└── 进入主应用
|
||
```
|
||
|
||
### 视觉风格
|
||
|
||
- 延续深色光湖风格
|
||
- 每一步一张居中卡片·左右滑动或淡入切换
|
||
- 卡片之间用柔和过渡·不突兀
|
||
- 人格体诞生时有粒子/光点动画（轻量·不花哨）
|
||
|
||
### 参考
|
||
|
||
- BC-M03 人格体选择器：卡片的发光边框、悬停效果、选中状态
|
||
- BC-M01 登录界面：深色品牌风格、输入框样式
|
||
|
||
---
|
||
|
||
## 💬 第三屏 · 主应用（登录后）
|
||
|
||
### 布局结构（豆包APP模式）
|
||
|
||
```
|
||
┌──┬─────────────────────────────────────┐
|
||
│📚│ │
|
||
│ │ ┌───────────────────────────────┐ │
|
||
│✍️│ │ │ │
|
||
│ │ │ 🐱 和你的人格体对话区域 │ │
|
||
│🎬│ │ │ │
|
||
│ │ │ （对话气泡·滚动） │ │
|
||
│💡│ │ │ │
|
||
│ │ └───────────────────────────────┘ │
|
||
│💬│ │
|
||
│ │ ┌───────────────────────────────┐ │
|
||
│👤│ │ 💬 输入你想写的... [发送] │ │
|
||
│ │ └───────────────────────────────┘ │
|
||
│ │ │
|
||
└──┴─────────────────────────────────────┘
|
||
```
|
||
|
||
### 左侧图标栏（70px 宽）
|
||
|
||
- 固定左侧·深色背景·图标竖向排列
|
||
- 顶部：萌喵 Logo（小）
|
||
- 中部：五个功能模块图标
|
||
- 📚 学习
|
||
- ✍️ 写作
|
||
- 🎬 剧本
|
||
- 💡 创意
|
||
- 💬 论坛
|
||
- 底部：用户头像（个人后台入口）
|
||
- 当前选中图标：高亮·左侧色条指示
|
||
- 图标 hover：发光·缩放微动
|
||
|
||
### 主区域（对话区）
|
||
|
||
- 顶部：当前模块标题 + 人格体头像+名字
|
||
- 中部：对话流·浅色深底气泡
|
||
- 底部：输入框 + 发送按钮
|
||
- 输入框风格：圆角 24px·深色底·placeholder 引导文字
|
||
|
||
### 模块切换
|
||
|
||
- 点击左侧图标 → 主区域切换到对应模块的对话上下文
|
||
- 每个模块有自己的人格体开场白
|
||
- 人格体记忆跨模块保持
|
||
|
||
| 模块 | 人格体开场白 |
|
||
| --- | --- |
|
||
| 📚 学习 | 「想拆哪本书？上传文档或者告诉我书名，我们一起分析。」 |
|
||
| ✍️ 写作 | 「今天写什么？续写、新章还是大纲？」 |
|
||
| 🎬 剧本 | 「告诉我想写什么类型的剧本，我帮你搭框架。」 |
|
||
| 💡 创意 | 「没灵感？来，我们脑暴一下～五大作坊随时待命。」 |
|
||
| 💬 论坛 | 「看看大家在聊什么，或者发你的经验赚积分。」 |
|
||
|
||
---
|
||
|
||
## 🎨 设计语言系统
|
||
|
||
### 色彩
|
||
|
||
```css
|
||
:root {
|
||
--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`
|
||
- 标题：字重 600-700·字间距 2-4px
|
||
- 正文：字重 400·行高 1.6
|
||
- 代码/编号：monospace
|
||
|
||
### 圆角
|
||
|
||
- 卡片：16-20px
|
||
- 按钮：12px
|
||
- 输入框：12px（门禁）/ 24px（聊天框）
|
||
- 图标按钮：12px
|
||
|
||
### 阴影与发光
|
||
|
||
- 卡片基础：`box-shadow: 0 20px 60px rgba(0,0,0,0.4)`
|
||
- 卡片选中：`box-shadow: 0 0 30px rgba(99,102,241,0.25)`
|
||
- 按钮 hover：`box-shadow: 0 4px 15px rgba(99,102,241,0.4)`
|
||
|
||
### 动效
|
||
|
||
- 页面进入：淡入 + 轻微上移 `fadeInUp 0.5s ease`
|
||
- 卡片 hover：上移 4px + 边框增亮 `transition: all 0.3s ease`
|
||
- 模块切换：内容区淡入 `fadeIn 0.3s ease`
|
||
- 人格体诞生：光点粒子 `particle-rise 2s ease-out`
|
||
|
||
---
|
||
|
||
## 📱 响应式
|
||
|
||
### 桌面（>1024px）
|
||
|
||
- 左侧图标栏 70px·固定
|
||
- 主区域最大宽度 900px·居中
|
||
|
||
### 平板（768-1024px）
|
||
|
||
- 左侧图标栏 60px
|
||
- 主区域自适应
|
||
|
||
### 手机（<768px）
|
||
|
||
- 左侧图标栏移到底部·横向排列
|
||
- 主区域全宽·输入框适配
|
||
- 门禁卡片宽度 90%
|
||
|
||
---
|
||
|
||
## 🧩 技术实现
|
||
|
||
### 技术栈
|
||
|
||
- Next.js 14 (App Router) — 已有地基
|
||
- Tailwind CSS + 自定义 CSS 变量
|
||
- Framer Motion（动效）
|
||
- 后端 API 对接铸渊
|
||
|
||
### 路由结构
|
||
|
||
```
|
||
/ → 邀请码门禁页
|
||
/onboarding → 人格体引导页（登录+注册融合）
|
||
/app → 主应用（需登录）
|
||
/app/learn → 学习模块
|
||
/app/write → 写作模块
|
||
/app/script → 剧本模块
|
||
/app/create → 创意模块
|
||
/app/forum → 论坛模块
|
||
/app/works → 个人作品库
|
||
/admin → 管理后台
|
||
```
|
||
|
||
### 与 Phase 2 现有代码的关系
|
||
|
||
- Phase 2 的 Next.js 地基保留
|
||
- globals.css 替换为新的设计变量
|
||
- layout.tsx 替换为新的根布局
|
||
- 各页面全部重写
|
||
- /chat 和 /dashboard 旧路由废弃或重定向
|
||
|
||
---
|
||
|
||
## 🔧 HLDP 交给铸渊的执行清单
|
||
|
||
```jsx
|
||
HLDP://feimao/mengmiao/redesign/铸渊执行清单
|
||
|
||
§1 · 全局设计系统
|
||
├── globals.css 重写（CSS变量+基础样式）
|
||
├── layout.tsx 重写（引入字体+Metadata）
|
||
└── ⊢ 这是所有页面的地基·先做
|
||
|
||
§2 · 邀请码门禁页（/page.tsx）
|
||
├── 深色渐变背景
|
||
├── 居中正方形卡片
|
||
├── 光湖Logo+萌喵标题+副标题
|
||
├── 邀请码输入框+验证按钮
|
||
├── 错误提示动画
|
||
└── ⊢ 门禁是第一印象·质感优先于功能
|
||
|
||
§3 · 人格体引导页（/onboarding/page.tsx）
|
||
├── 三步卡片流程（欢迎→信息→诞生）
|
||
├── 步骤指示器
|
||
├── 表单验证
|
||
├── 人格体诞生动画（粒子效果）
|
||
└── ⊢ 注册不是填表·是创造人格体
|
||
|
||
§4 · 主应用框架（/app/layout.tsx）
|
||
├── 左侧图标栏（固定·70px宽）
|
||
├── 五模块图标+用户头像
|
||
├── 当前选中高亮+色条指示
|
||
└── ⊢ 这是所有模块的容器
|
||
|
||
§5 · 主应用对话区（/app/page.tsx）
|
||
├── 默认欢迎对话
|
||
├── 对话气泡样式
|
||
├── 输入框+发送按钮
|
||
└── ⊢ 豆包式核心交互
|
||
|
||
§6 · 各模块页面
|
||
├── /app/learn · 学习模块
|
||
├── /app/write · 写作模块
|
||
├── /app/script · 剧本模块
|
||
├── /app/create · 创意模块
|
||
├── /app/forum · 论坛模块
|
||
└── ⊢ 共享对话组件·模块间切换即换上下文
|
||
|
||
§7 · 作品库（/app/works）
|
||
├── 左侧作品列表
|
||
├── 右侧作品详情
|
||
├── 上传文档入口
|
||
└── ⊢ 沿用PRD v2.0设计
|
||
```
|
||
|
||
---
|
||
|
||
## ⊢ 锁定 · 爸爸的核心指令
|
||
|
||
> 「不要依次从上到下排列模块」 → 左侧图标栏 + 主区域
|
||
>
|
||
|
||
> 「核心是人格体偏向写作」 → 所有功能通过人格体对话驱动
|
||
>
|
||
|
||
> 「参考豆包APP」 → 聊天框是核心交互入口
|
||
>
|
||
|
||
> 「质感高级，不像草台班子」 → 深色光湖风格·克制·留白·动效精准
|
||
>
|
||
|
||
---
|
||
|
||
**编写**：舒舒 · PER-SS001 · 肥猫爸爸的宝宝
|
||
|
||
**时间**：2026-05-31
|
||
|
||
**编码**：HLDP-dual/v1
|
||
|
||
**下一站**：铸渊编译器 → 新加坡服务器 |