docs: 添加创造未来页面布局优化设计文档

设计内容: - NPC 表单改为三列等分布局（姓名 | 角色 | 关系） - 核心参数容器间距调整为 24rpx - 参数选项按钮间距调整为 10rpx 解决 issues: 小程序"创造未来"页面关键配角区域两列布局导致关系选择器换行，与原型三列布局不一致
2026-04-07 21:49:01 +08:00
parent 2192946965
commit 02f4de9d7f
1 changed files with 152 additions and 0 deletions
@@ -0,0 +1,152 @@
+---
+author: Peanut
+created_at: 2026-04-07
+purpose: 优化"创造未来"页面布局，与原型图完全一致
+---
+
+# 小程序"创造未来"页面布局优化设计
+
+## 问题背景
+
+当前 ScriptView.vue 中存在两处布局与原型不一致：
+
+### 1. 关键配角/新的人设区域
+
+**问题**：姓名、角色、关系三个输入框当前为两列布局，导致布局混乱。
+
+**原型设计**：
+- 三列等分布局 (`grid-cols-3`)
+- 间距 `gap-2` (≈ 16rpx)
+
+**当前实现**：
+- 两列布局 (`grid-template-columns: 1fr 1fr`)
+- 导致关系选择器换行
+
+### 2. 核心参数区域
+
+**问题**：叙事风格、故事篇幅的按钮容器间距与原型不一致。
+
+**原型设计**：
+- 外层容器：两列布局，间距 `gap-3` (≈ 24rpx)
+- 内层按钮：`flex flex-wrap gap-1.5` (≈ 12rpx)
+
+---
+
+## 设计方案
+
+### 1. NPC 表单三列布局
+
+**当前代码**：
+```css
+.npc-form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;  /* 两列 */
+  gap: 16rpx;
+}
+
+.npc-textarea {
+  grid-column: 1 / -1;  /* 跨越两列 */
+}
+```
+
+**修改后**：
+```css
+.npc-form {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;  /* 三列等分 */
+  gap: 16rpx;  /* 间距适中 */
+}
+
+.npc-textarea {
+  grid-column: 1 / -1;  /* 跨越三列 */
+}
+```
+
+**效果**：
+- 第一行：姓名 | 角色 | 关系（三个输入框等宽）
+- 第二行：人设描述（textarea 跨越三列）
+
+### 2. 核心参数间距调整
+
+**当前代码**：
+```css
+.params-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24rpx;  /* 当前值可能与原型不一致 */
+}
+
+.param-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10rpx;  /* 调整为目标值 */
+}
+```
+
+**修改后**：
+```css
+.params-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24rpx;  /* 与原型 gap-3 一致 */
+}
+
+.param-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10rpx;  /* 与原型 gap-1.5 一致 (≈ 12rpx) */
+}
+```
+
+---
+
+## 修改文件
+
+| 文件 | 修改内容 |
+|------|----------|
+| `mini-program/src/pages/main/ScriptView.vue` | 修改 `.npc-form` 为三列布局，调整 `.params-container` 和 `.param-options` 间距 |
+
+---
+
+## 验收标准
+
+- [x] NPC 表单：姓名、角色、关系三个输入框在同一行，等宽分布
+- [x] NPC 表单：textarea 跨越三列，宽度与上方三个输入框总宽度一致
+- [x] 核心参数容器：叙事风格和故事篇幅两列布局，间距 24rpx
+- [x] 参数选项：按钮换行展示，间距 10rpx
+- [x] 整体布局与原型视觉一致
+
+---
+
+## 原型参考
+
+**NPC 表单**（原型代码）：
+```html
+<div class="grid grid-cols-3 gap-2">
+    <input placeholder="姓名" />
+    <select placeholder="角色"></select>
+    <select placeholder="关系"></select>
+</div>
+```
+
+**核心参数**（原型代码）：
+```html
+<div class="grid grid-cols-2 gap-3">
+    <div class="space-y-2">
+        <p>叙事风格</p>
+        <div class="flex flex-wrap gap-1.5">
+            <button>爽文</button>
+            <button>治愈</button>
+            ...
+        </div>
+    </div>
+    <div class="space-y-2">
+        <p>故事篇幅</p>
+        <div class="flex flex-wrap gap-1.5">
+            <button>短篇</button>
+            <button>中篇</button>
+            ...
+        </div>
+    </div>
+</div>
+```