diff --git a/docs/superpowers/specs/2026-03-15-script-generator-spacing-optimization.md b/docs/superpowers/specs/2026-03-15-script-generator-spacing-optimization.md new file mode 100644 index 0000000..ea23eeb --- /dev/null +++ b/docs/superpowers/specs/2026-03-15-script-generator-spacing-optimization.md @@ -0,0 +1,244 @@ +# 剧本生成器页面间距优化设计文档 + +> **设计目标**: 解决"创造未来"页面过于紧凑的问题,视觉还原度从 65% 提升至 90%+ + +--- + +## 1. 问题诊断 + +### 1.1 当前页面紧凑问题 + +| 元素 | 当前值 | 原型标准 | 差距 | +|------|--------|---------|------| +| 卡片 padding | 20rpx | 32rpx | -37.5% | +| 输入框高度 | 64rpx | 88rpx | -27.3% | +| 网格 gap | 10rpx | 24rpx | -58.3% | +| 输入框圆角 | 20rpx | 32rpx | -37.5% | +| 标签字体 | 17rpx | 20rpx | -15% | +| 输入框字体 | 18rpx | 28rpx | -35.7% | +| 卡片圆角 | 28rpx | 40rpx | -30% | +| section 间距 | 20rpx | 32rpx | -37.5% | + +### 1.2 视觉影响 + +- 输入框高度不足,点击区域小,交互体验差 +- 字体过小,可读性不佳 +- 间距过紧,视觉压力大,缺乏呼吸感 +- NPC 表单 3 列布局在小屏幕上过于拥挤 + +--- + +## 2. 设计方案 + +### 2.1 整体策略 + +采用**方案 C - 完全还原原型**,所有样式值对齐原型标准(`mini-program-prototype/components.js` 中的 `ScriptGenerator` 组件)。 + +### 2.2 具体调整 + +#### 2.2.1 卡片容器 + +```css +/* 当前 → 目标 */ +.section-card { +- padding: 20rpx; ++ padding: 32rpx; +- border-radius: 28rpx; ++ border-radius: 40rpx; + margin-bottom: 32rpx; /* 新增 */ +} +``` + +#### 2.2.2 输入框样式 + +```css +/* 当前 → 目标 */ +.glass-input, .glass-picker { +- height: 64rpx; ++ height: 88rpx; +- border-radius: 20rpx; ++ border-radius: 32rpx; +- padding: 0 16rpx; ++ padding: 0 24rpx; +- font-size: 18rpx; ++ font-size: 28rpx; +} +``` + +#### 2.2.3 网格布局 + +```css +/* 当前 → 目标 */ +.profile-grid { +- gap: 10rpx; ++ gap: 24rpx; +} + +.npc-form { +- grid-template-columns: 1fr 1fr 1fr; ++ grid-template-columns: 1fr 1fr; /* 2 列布局 */ + gap: 16rpx; /* 新增 */ +} +``` + +#### 2.2.4 标签和字体 + +```css +/* 当前 → 目标 */ +.label, .section-title { +- font-size: 17rpx; ++ font-size: 20rpx; + letter-spacing: 3rpx; +} + +.section-hint { +- font-size: 13rpx; ++ font-size: 15rpx; +} +``` + +#### 2.2.5 NPC 描述区域 + +```css +/* 当前 → 目标 */ +.glass-textarea { +- height: 88rpx; ++ height: 120rpx; +- font-size: 17rpx; ++ font-size: 24rpx; + padding: 20rpx; /* 新增 */ +} +``` + +#### 2.2.6 参数选择区域 + +```css +/* 当前 → 目标 */ +.param-option { +- padding: 6rpx 12rpx; ++ padding: 12rpx 20rpx; +- font-size: 17rpx; ++ font-size: 20rpx; + border-radius: 20rpx; /* 新增 */ +} + +.params-container { + gap: 24rpx; /* 新增 */ +} +``` + +#### 2.2.7 生成按钮 + +```css +/* 当前 → 目标 */ +.generate-btn { +- height: 80rpx; ++ height: 96rpx; +- border-radius: 28rpx; ++ border-radius: 40rpx; + margin-top: 24rpx; /* 新增 */ +} +``` + +#### 2.2.8 剧本卡片 + +```css +/* 当前 → 目标 */ +.script-card { +- padding: 20rpx; ++ padding: 32rpx; +- border-radius: 28rpx; ++ border-radius: 40rpx; + margin-top: 24rpx; +} + +.script-title { +- font-size: 26rpx; ++ font-size: 32rpx; +} + +.script-summary { +- font-size: 20rpx; ++ font-size: 24rpx; +} +``` + +### 2.3 NPC 表单 2 列布局实现 + +```vue + + + + ... + ... +