Files

T

2026-04-08 22:40:21 +08:00

6.0 KiB

Raw Blame History

author, created_at, purpose

author	created_at	purpose
Claude	2026-04-07	小程序创造未来页面样式优化设计规范

小程序创造未来页面设计规格说明书

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 星芒加载动画

双环旋转动画，用于"命运编织中"状态：

.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. 验收标准

视觉还原度 ≥95%（与原型对比）
动画流畅，无明显卡顿
各尺寸屏幕正常显示
无控制台错误

6.0 KiB Raw Blame History