Files

T

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

设计内容:
- NPC 表单改为三列等分布局（姓名 | 角色 | 关系）
- 核心参数容器间距调整为 24rpx
- 参数选项按钮间距调整为 10rpx

解决 issues: 小程序"创造未来"页面关键配角区域两列布局导致
            关系选择器换行，与原型三列布局不一致

2026-04-07 21:49:01 +08:00

3.2 KiB

Raw Permalink Blame History

author, created_at, purpose

author	created_at	purpose
Peanut	2026-04-07	优化"创造未来"页面布局，与原型图完全一致

小程序"创造未来"页面布局优化设计

问题背景

当前 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 表单三列布局

当前代码：

.npc-form {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 两列 */
  gap: 16rpx;
}

.npc-textarea {
  grid-column: 1 / -1;  /* 跨越两列 */
}

修改后：

.npc-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 三列等分 */
  gap: 16rpx;  /* 间距适中 */
}

.npc-textarea {
  grid-column: 1 / -1;  /* 跨越三列 */
}

效果：

第一行：姓名 | 角色 | 关系（三个输入框等宽）
第二行：人设描述（textarea 跨越三列）

2. 核心参数间距调整

当前代码：

.params-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx;  /* 当前值可能与原型不一致 */
}

.param-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;  /* 调整为目标值 */
}

修改后：

.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` 间距

验收标准

NPC 表单：姓名、角色、关系三个输入框在同一行，等宽分布
NPC 表单：textarea 跨越三列，宽度与上方三个输入框总宽度一致
核心参数容器：叙事风格和故事篇幅两列布局，间距 24rpx
参数选项：按钮换行展示，间距 10rpx
整体布局与原型视觉一致

原型参考

NPC 表单（原型代码）：

<div class="grid grid-cols-3 gap-2">
    <input placeholder="姓名" />
    <select placeholder="角色"></select>
    <select placeholder="关系"></select>
</div>

核心参数（原型代码）：

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

3.2 KiB Raw Permalink Blame History Unescape Escape