docs: 添加 ScriptView 移动端优化设计文档

设计方案:
- 参数区域改为并排两列布局
- 字体尺寸全面调小匹配原型图
- 间距紧凑化优化
- 移动端小屏幕适配策略

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

@@ -0,0 +1,177 @@
+# 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)