chore: 批量提交未提交的更改

2026-04-08 22:40:21 +08:00
parent 59503d05a5
commit f4f8aab22a
13 changed files with 275 additions and 316 deletions
@@ -0,0 +1,167 @@
+---
+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. 无控制台错误