happy-life-star/docs/superpowers/specs/2026-03-15-script-generator-spacing-optimization.md

# 剧本生成器页面间距优化设计文档

> **设计目标**: 解决"创造未来"页面过于紧凑的问题，视觉还原度从 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
<!-- 模板结构 -->
<view class="npc-form">
  <input placeholder="姓名" v-model="npcConfig.name" />
  <picker placeholder="角色">...</picker>
  <picker placeholder="关系">...</picker>
  <textarea placeholder="描述" v-model="npcConfig.desc" rows="2" />
</view>

<!-- 样式 -->
<style scoped>
.npc-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
}
/* textarea 跨越两列 */
.npc-form textarea {
  grid-column: 1 / -1;
}
</style>
```

---

## 3. 修改文件清单

| 文件 | 修改内容 |
|------|---------|
| `mini-program/src/pages/main/ScriptView.vue` | 所有样式调整 |

---

## 4. 预期效果

### 4.1 视觉还原度

- **当前**: ~65%
- **目标**: 90%+

### 4.2 具体改善

- ✅ 输入框高度增加 37.5%，点击区域更大
- ✅ 字体大小增加 55.6%，可读性提升
- ✅ 卡片间距增加 60%，视觉呼吸感增强
- ✅ NPC 表单从 3 列改为 2 列，布局更清晰
- ✅ 圆角统一至原型标准，视觉一致性提升

### 4.3 验收标准

在微信开发者工具中验证：
1. 页面无报错，所有元素正常渲染
2. 输入框高度 ≥ 88rpx
3. 卡片圆角 ≥ 40rpx
4. NPC 表单为 2 列布局
5. 字体大小符合原型标准
6. 移动端适配正常，无溢出或重叠

---

## 5. 风险提示

1. **低端设备性能**: 增加间距可能导致页面总高度增加，需确保滚动流畅
2. **小屏幕适配**: 2 列布局在超窄屏幕（<320px）可能需要单列回退
3. **回归风险**: 样式调整后需验证所有交互状态正常

---

## 6. 参考资料

- 原型组件：`mini-program-prototype/components.js` - ScriptGenerator (lines 138-256)
- 实施计划：`docs/superpowers/plans/2026-03-15-mini-program-prototype-restoration.md`
- 视觉对比：`mini-program-prototype/script-view-spacing-compare.html`

---

**设计确认**: 用户已批准方案 C（完全还原原型）+ NPC 表单 2 列布局