168 lines
6.0 KiB
Markdown
168 lines
6.0 KiB
Markdown
---
|
|
author: Claude
|
|
created_at: 2026-04-07
|
|
purpose: 小程序创造未来页面样式优化设计规范
|
|
---
|
|
|
|
# 小程序创造未来页面设计规格说明书
|
|
|
|
## 1. 概述
|
|
|
|
将小程序（mini-program）的"创造未来"页面（ScriptView.vue）的样式和布局优化至与原型（mini-program-prototype）完全一致。
|
|
|
|
## 2. 样式系统规范
|
|
|
|
### 2.1 玻璃态效果
|
|
|
|
| 元素类型 | 背景 | 边框 | 阴影 |
|
|
|---------|------|------|------|
|
|
| 主卡片（金色玻璃） | `linear-gradient(135deg, rgba(168,85,247,0.15), rgba(232,121,249,0.1))` | `1px solid rgba(168,85,247,0.3)` | `inset 0 0 30rpx rgba(168,85,247,0.08), 0 4rpx 20rpx rgba(168,85,247,0.1)` |
|
|
| 普通卡片 | `rgba(255,255,255,0.05)` | `1px solid rgba(255,255,255,0.1)` | 无 |
|
|
| AI 回复卡片 | `rgba(168,85,247,0.08)` | `1px solid rgba(168,85,247,0.25)` | `0 0 20rpx rgba(168,85,247,0.1)` |
|
|
|
|
### 2.2 圆角规范
|
|
|
|
| 元素 | 圆角值 |
|
|
|------|--------|
|
|
| 大卡片/章节卡片 | `40rpx` |
|
|
| 输入框/选择器 | `32rpx` |
|
|
| 按钮 | `40rpx` |
|
|
| 小标签/NPC 标签 | `24rpx` |
|
|
| 参数选项 | `20rpx` |
|
|
|
|
### 2.3 字体大小规范
|
|
|
|
| 元素 | 字体大小 | 颜色 | 字重 |
|
|
|------|----------|------|------|
|
|
| 页面标题 | `32rpx` | `rgba(255,255,255,0.9)` | `300` |
|
|
| 章节标题 | `20rpx` | `rgba(192,132,252,0.6)` | `600` |
|
|
| 输入框文字 | `28rpx` | `rgba(255,255,255,0.9)` | 正常 |
|
|
| 提示文字 | `15rpx` | `rgba(255,255,255,0.35)` | 斜体 |
|
|
| 参数子标签 | `17rpx` | `rgba(255,255,255,0.4)` | 正常 |
|
|
| 参数选项 | `20rpx` | `rgba(255,255,255,0.4)` | 正常 |
|
|
|
|
### 2.4 尺寸规范
|
|
|
|
| 元素 | 高度 | 内边距 |
|
|
|------|------|--------|
|
|
| 输入框/选择器 | `88rpx` | `0 24rpx` |
|
|
| 主生成按钮 | `96rpx` | - |
|
|
| 卡片内边距 | - | `32rpx` |
|
|
| 参数选项 | - | `12rpx 20rpx` |
|
|
|
|
### 2.5 间距规范
|
|
|
|
| 位置 | 间距值 |
|
|
|------|--------|
|
|
| 卡片之间 | `24rpx` |
|
|
| 输入组之间 | `24rpx` |
|
|
| 参数选项之间 | `10rpx` |
|
|
| NPC 标签之间 | `16rpx` |
|
|
| 章节标题底部 | `16rpx` |
|
|
|
|
## 3. 组件结构
|
|
|
|
### 3.1 基础人设卡片
|
|
|
|
```
|
|
┌─────────────────────────────────────┐
|
|
│ 我的基础人设 可自由修改 │
|
|
│ ┌──────────┐ ┌──────────┐ │
|
|
│ │ 姓名输入 │ │ 星座选择 │ │
|
|
│ └──────────┘ └──────────┘ │
|
|
│ ┌──────────┐ ┌──────────┐ │
|
|
│ │ MBTI 选择 │ │ 职业输入 │ │
|
|
│ └──────────┘ └──────────┘ │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
### 3.2 剧本配置卡片
|
|
|
|
```
|
|
┌─────────────────────────────────────┐
|
|
│ 1. 剧本主题 │
|
|
│ ┌─────────────────────────────────┐ │
|
|
│ │ 如：巅峰重现、治愈之旅... │ │
|
|
│ └─────────────────────────────────┘ │
|
|
│ │
|
|
│ 2. 关键配角/新的人设 [+ 添加] │
|
|
│ ┌──────────┐ ┌──────────┐ │
|
|
│ │ 姓名 │ │ 角色选择 │ │
|
|
│ └──────────┘ └──────────┘ │
|
|
│ ┌─────────────────────────────────┐ │
|
|
│ │ 人设描述 textarea │ │
|
|
│ └─────────────────────────────────┘ │
|
|
│ [标签 1] [标签 2] [标签 3] │
|
|
│ │
|
|
│ 3. 核心参数 │
|
|
│ 叙事风格 故事篇幅 │
|
|
│ [爽文][治愈] [短篇][中篇] │
|
|
│ [热血][玄幻] [长篇][史诗] │
|
|
│ [职场][赛博] │
|
|
│ │
|
|
│ ┌─────────────────────────────────┐ │
|
|
│ │ 生成平行人生剧本 │ │
|
|
│ └─────────────────────────────────┘ │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
## 4. 动画效果
|
|
|
|
### 4.1 星芒加载动画
|
|
|
|
双环旋转动画，用于"命运编织中"状态：
|
|
|
|
```css
|
|
.starlight-loader {
|
|
position: relative;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
/* 外环：1.5s cubic-bezier */
|
|
/* 内环：70% 大小，延迟 0.75s */
|
|
```
|
|
|
|
### 4.2 按钮点击反馈
|
|
|
|
- `transform: scale(0.98)`
|
|
- 阴影减弱
|
|
|
|
### 4.3 参数选项激活态
|
|
|
|
- 背景：`rgba(168,85,247,0.25)`
|
|
- 边框：`#C084FC`
|
|
- 阴影：`0 0 15px rgba(168,85,247,0.4)`
|
|
|
|
## 5. 响应式断点
|
|
|
|
| 断点 | 调整 |
|
|
|------|------|
|
|
| ≤375px | 参数容器改为单列 |
|
|
| ≤320px | 人设网格改为单列，输入框高度 80rpx |
|
|
|
|
## 6. 新增功能：灵感气泡
|
|
|
|
为剧本主题输入添加提示词功能：
|
|
|
|
提示词列表：`["觉醒时刻", "命运转折", "自我救赎", "巅峰重现", "治愈之旅", "星际穿越"]`
|
|
|
|
展示形式：可点击的芯片按钮，点击后将词汇追加到输入框。
|
|
|
|
## 7. 实现检查清单
|
|
|
|
- [ ] 更新全局样式变量（玻璃态、渐变）
|
|
- [ ] 调整圆角为 40rpx 统一标准
|
|
- [ ] 调整输入框高度为 88rpx
|
|
- [ ] 调整按钮高度为 96rpx
|
|
- [ ] 实现星芒加载动画
|
|
- [ ] 添加灵感气泡功能
|
|
- [ ] 优化参数选项激活态样式
|
|
- [ ] 添加响应式断点适配
|
|
|
|
## 8. 验收标准
|
|
|
|
1. 视觉还原度 ≥95%（与原型对比）
|
|
2. 动画流畅，无明显卡顿
|
|
3. 各尺寸屏幕正常显示
|
|
4. 无控制台错误
|