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 重构
```css
/* 原方案：并排 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 表单添加容器
```html
<!-- 新增 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 结构变更
```html
<!-- 原结构 -->
<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 容器添加
```html
<view class="npc-container">
  <view class="npc-form">
    <!-- 三列输入 -->
  </view>
  <textarea class="glass-textarea">...</textarea>
</view>
```

### 3. CSS 关键修改
```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 表单有明显的容器边框和背景
- [ ] 字体大小适配移动端，无明显过大
- [ ] 圆角与原型一致，视觉精致
- [ ] 整体布局紧凑，层次分明