style: 优化剧本生成器页面布局（方案 A）

主要变更:
- 修复输入框溢出问题，添加 box-sizing: border-box
- 重构参数区域为垂直堆叠布局，匹配原型图
- 添加 NPC 容器背景和边框，增强视觉层次
- 优化字体大小和间距，适配移动端屏幕
- 调整圆角尺寸，与原型保持一致

设计文档: docs/plans/2026-03-07-script-view-optimization.md

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

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

@@ -0,0 +1,185 @@
+# 剧本生成器页面优化设计
+
+## 概述
+
+优化小程序剧本生成器页面（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 表单有明显的容器边框和背景
+- [ ] 字体大小适配移动端，无明显过大
+- [ ] 圆角与原型一致，视觉精致
+- [ ] 整体布局紧凑，层次分明