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 卡片容器

/* 当前 → 目标 */
.section-card {
- padding: 20rpx;
+ padding: 32rpx;
- border-radius: 28rpx;
+ border-radius: 40rpx;
  margin-bottom: 32rpx; /* 新增 */
}

2.2.2 输入框样式

/* 当前 → 目标 */
.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 网格布局

/* 当前 → 目标 */
.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 标签和字体

/* 当前 → 目标 */
.label, .section-title {
- font-size: 17rpx;
+ font-size: 20rpx;
  letter-spacing: 3rpx;
}

.section-hint {
- font-size: 13rpx;
+ font-size: 15rpx;
}

2.2.5 NPC 描述区域

/* 当前 → 目标 */
.glass-textarea {
- height: 88rpx;
+ height: 120rpx;
- font-size: 17rpx;
+ font-size: 24rpx;
  padding: 20rpx; /* 新增 */
}

2.2.6 参数选择区域

/* 当前 → 目标 */
.param-option {
- padding: 6rpx 12rpx;
+ padding: 12rpx 20rpx;
- font-size: 17rpx;
+ font-size: 20rpx;
  border-radius: 20rpx; /* 新增 */
}

.params-container {
  gap: 24rpx; /* 新增 */
}

2.2.7 生成按钮

/* 当前 → 目标 */
.generate-btn {
- height: 80rpx;
+ height: 96rpx;
- border-radius: 28rpx;
+ border-radius: 40rpx;
  margin-top: 24rpx; /* 新增 */
}

2.2.8 剧本卡片

/* 当前 → 目标 */
.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 列布局实现

<!-- 模板结构 -->
<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 列布局