docs: 创建剧本生成器间距优化设计文档（方案 C - 完全还原原型）

2026-03-15 20:34:00 +08:00
parent e146d4c159
commit 67dcfa15fb
1 changed files with 244 additions and 0 deletions
@@ -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
+<!-- 模板结构 -->
+<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 列布局