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. 参数区域布局重构

当前结构：

<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>

新结构（并排）：

<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：

.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 已自动适配）：

/* 默认并排布局 */
.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. 输入框溢出预防

.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)