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

# ScriptView 移动端优化设计

## 概述

优化剧本生成器页面（ScriptView.vue），使其与原型图保持一致，同时确保移动端屏幕适配。

## 问题分析

### 1. 布局差异
| 区域 | 原型图 | 当前实现 | 差异 |
|------|--------|----------|------|
| 参数区域 | grid-cols-2 并排 | 上下堆叠 | 布局结构不同 |
| NPC 容器 | p-4 (16rpx) | p-6 (24rpx) | padding 过大 |
| 主容器 | rounded-[2rem] | rounded-2xl/3xl | 圆角偏小 |

### 2. 字体尺寸过大
| 元素 | 原型图 | 当前 | 建议调整 |
|------|--------|------|----------|
| label | 10px (~18rpx) | 16rpx | → 17rpx |
| input | 11px (~20rpx) | 22rpx | → 19rpx |
| npc-input | 10px (~18rpx) | 20rpx | → 18rpx |
| param-option | 10px (~18rpx) | 18rpx | 保持 |
| param-label | 9px (~16rpx) | 16rpx | 保持 |

### 3. 间距问题
| 元素 | 原型图 | 当前 | 建议调整 |
|------|--------|------|----------|
| 主容器 padding | p-6 (24rpx) | 32rpx | → 24rpx |
| NPC 容器 padding | p-4 (16rpx) | 24rpx | → 16rpx |
| 卡片间距 | space-y-6 (24rpx) | 24rpx | 保持 |
| 参数选项 gap | gap-1.5 (6rpx) | 8rpx | → 6rpx |

## 设计方案

### 1. 参数区域布局重构

**当前结构：**
```vue
<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>
```

**新结构（并排）：**
```vue
<view class="params-container">
  <view class="param-group">
    <text class="param-label">叙事风格</text>
    <view class="param-options">...</view>
  </view>
  <view class="param-group">
    <text class="param-label">故事篇幅</text>
    <view class="param-options">...</view>
  </view>
</view>
```

**CSS：**
```css
.params-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.param-group {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  min-width: 0; /* 防止内容溢出 */
}

.param-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6rpx;
}

.param-option {
  padding: 6rpx 12rpx;
  font-size: 17rpx;
  white-space: nowrap; /* 防止文字换行 */
}
```

### 2. 移动端适配策略

**小屏幕适配（<375px 宽度）：**
- 参数区域保持并排，但减小 option 的 padding
- 使用 `min-width: 0` 和 `overflow: hidden` 防止溢出
- NPC 表单三列改为两列（极小屏幕）

**媒体查询模拟（rpx 已自动适配）：**
```css
/* 默认并排布局 */
.params-container {
  grid-template-columns: 1fr 1fr;
}

/* 超小屏幕堆叠 */
@media (max-width: 320px) {
  .params-container {
    grid-template-columns: 1fr;
  }

  .npc-form {
    grid-template-columns: 1fr 1fr;
  }
}
```

### 3. 尺寸优化表

| 元素 | 原尺寸 | 新尺寸 | 说明 |
|------|--------|--------|------|
| `.glass-card-main` padding | 32rpx | 24rpx | 匹配原型 p-6 |
| `.glass-card-main` border-radius | 48rpx | 56rpx | 接近 2rem |
| `.glass-input` height | 72rpx | 68rpx | 更紧凑 |
| `.glass-input` font-size | 22rpx | 19rpx | 匹配原型 11px |
| `.label` font-size | 16rpx | 17rpx | 匹配原型 10px |
| `.npc-container` padding | 24rpx | 16rpx | 匹配原型 p-4 |
| `.npc-input` height | 64rpx | 60rpx | 更紧凑 |
| `.npc-input` font-size | 20rpx | 18rpx | 匹配原型 10px |
| `.param-option` padding | 8rpx 16rpx | 6rpx 12rpx | 匹配原型 |
| `.param-option` font-size | 18rpx | 17rpx | 更精致 |
| `.param-options` gap | 8rpx | 6rpx | 更紧凑 |

### 4. 输入框溢出预防

```css
.glass-input, .glass-picker {
  width: 100%;
  max-width: 100%; /* 防止超出父容器 */
  box-sizing: border-box; /* 包含 padding 和 border */
  padding: 0 16rpx; /* 减小侧边 padding */
}

.npc-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10rpx; /* 减小 gap */
}

.npc-input, .npc-picker {
  min-width: 0; /* 允许缩小 */
}
```

## 修改文件

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

## 验收标准

- [ ] 参数区域（叙事风格、故事篇幅）左右并排显示
- [ ] 所有输入框在 iPhone SE（320px 宽度）下不溢出
- [ ] 字体尺寸视觉上更接近原型图的精致感
- [ ] NPC 容器 padding 紧凑，不浪费空间
- [ ] 主容器圆角接近原型图的 rounded-[2rem]
- [ ] 整体布局紧凑，与原型图视觉一致

## 移动端适配测试设备

- iPhone SE (320px × 568px)
- iPhone 12 mini (375px × 812px)
- iPhone 12/13/14 (390px × 844px)
- iPhone Plus/Max (428px × 926px)