---
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. 无控制台错误