peanut
02f4de9d7f
设计内容:
- NPC 表单改为三列等分布局（姓名 | 角色 | 关系）
- 核心参数容器间距调整为 24rpx
- 参数选项按钮间距调整为 10rpx
解决 issues: 小程序"创造未来"页面关键配角区域两列布局导致
关系选择器换行，与原型三列布局不一致
153 lines
3.2 KiB
Markdown
153 lines
3.2 KiB
Markdown
---
|
||
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>
|
||
```
|