happy-life-star/docs/plans/2026-03-07-script-view-optimization.md

剧本生成器页面优化设计

概述

优化小程序剧本生成器页面（ScriptView.vue）的布局和样式，解决以下问题：

1. 输入框宽度过大导致超出屏幕
2. 叙事风格和篇幅参数排列过于紧凑（原型为上下两行，实现为并排）
3. NPC 表单缺少外层容器和 padding
4. 字体大小、间距与原型不一致
5. 整体视觉不够精致

问题清单

1. 输入框溢出

• 问题：.glass-input 和 .glass-picker 设置 width: 100% 但未正确处理 box-sizing
• 影响：在小屏幕设备上输入框可能超出容器

2. 参数行布局错误

• 当前实现：.params-row 使用 grid-template-columns: 1fr 1fr 并排显示
• 原型设计：使用两个独立的 space-y-2 垂直堆叠区域
• 差异：原型中"叙事风格"和"故事篇幅"是上下两个独立区域，每个区域内标签和选项垂直排列

3. NPC 表单缺少容器

• 当前实现：.npc-form 直接裸露，无边框背景
• 原型设计：使用带 bg-white/5 border border-white/10 rounded-2xl p-4 的容器包裹
• 影响：视觉层次感缺失，与原型不一致

4. 字体尺寸过大

元素	当前	原型	建议
section-title	22rpx	~10px (约 18rpx)	18rpx
label	18rpx	~10px (约 18rpx)	16rpx
input text	26rpx	~11px (约 20rpx)	22rpx
param-label	18rpx	~9px (约 16rpx)	16rpx
param-option	22rpx	~10px (约 18rpx)	18rpx

5. 圆角不一致

元素	当前	原型	建议
section-card	默认	rounded-3xl (约 48rpx)	48rpx
主容器	默认	rounded-[2rem] (约 64rpx)	64rpx
输入框	16rpx	rounded-xl (约 24rpx)	24rpx
参数选项	16rpx	rounded-xl	24rpx

设计方案

1. 布局结构调整

params-row 重构

/* 原方案：并排 grid */
.params-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* 新方案：垂直堆叠 */
.params-section {
  margin-bottom: 24rpx;
}

.param-row {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

NPC 表单添加容器

<!-- 新增 wrapper -->
<view class="npc-container">
  <view class="npc-form">
    <!-- 原有内容 -->
  </view>
</view>

2. 尺寸优化

属性	原值	新值
.section-card padding	32rpx	40rpx
.section-card border-radius	默认	48rpx
主容器 border-radius	默认	64rpx
.glass-input height	80rpx	72rpx
.glass-input font-size	26rpx	22rpx
.glass-input padding	0 24rpx	0 20rpx
.label font-size	18rpx	16rpx
.param-label font-size	18rpx	16rpx
.param-option font-size	22rpx	18rpx
.param-option padding	10rpx 20rpx	8rpx 16rpx

3. 间距优化

元素	原间距	新间距
.section-card gap	32rpx	40rpx
.input-group margin-bottom	24rpx	32rpx
.label margin-bottom	16rpx	12rpx
.param-option gap	12rpx	8rpx
NPC 容器内间距	无	16rpx

4. 视觉优化

• 添加 box-sizing: border-box 到所有输入元素
• NPC 容器添加玻璃态背景边框
• 参数选项使用更紧凑的排列
• 调整生成按钮高度：96rpx → 88rpx

修改文件

• mini-program/src/pages/main/ScriptView.vue

关键代码变更

1. params-row 结构变更

<!-- 原结构 -->
<view class="params-row">
  <view class="param-group">...</view>
  <view class="param-group">...</view>
</view>

<!-- 新结构 -->
<view class="params-section">
  <view class="param-row">
    <text class="param-label">叙事风格</text>
    <view class="param-options">...</view>
  </view>
</view>
<view class="params-section">
  <view class="param-row">
    <text class="param-label">故事篇幅</text>
    <view class="param-options">...</view>
  </view>
</view>

2. NPC 容器添加

<view class="npc-container">
  <view class="npc-form">
    <!-- 三列输入 -->
  </view>
  <textarea class="glass-textarea">...</textarea>
</view>

3. CSS 关键修改

/* 所有输入元素添加 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* NPC 容器样式 */
.npc-container {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 32rpx;
  padding: 32rpx;
  margin-bottom: 16rpx;
}

/* 参数行垂直排列 */
.params-section {
  margin-bottom: 24rpx;
}

.param-row {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

验收标准

• 所有输入框在小屏幕（320px 宽度）下不溢出
• 叙事风格和篇幅参数垂直排列，各有独立标签
• NPC 表单有明显的容器边框和背景
• 字体大小适配移动端，无明显过大
• 圆角与原型一致，视觉精致
• 整体布局紧凑，层次分明