---
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>
```