From d36574440b603ef155df74e5526c2bf8139b311d Mon Sep 17 00:00:00 2001 From: huazhongmin Date: Sat, 7 Mar 2026 19:29:35 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=20ScriptView=20?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=BC=98=E5=8C=96=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 设计方案: - 参数区域改为并排两列布局 - 字体尺寸全面调小匹配原型图 - 间距紧凑化优化 - 移动端小屏幕适配策略 Co-Authored-By: Claude Opus 4.6 --- ...6-03-07-script-view-mobile-optimization.md | 177 ++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 docs/plans/2026-03-07-script-view-mobile-optimization.md diff --git a/docs/plans/2026-03-07-script-view-mobile-optimization.md b/docs/plans/2026-03-07-script-view-mobile-optimization.md new file mode 100644 index 0000000..5c4da52 --- /dev/null +++ b/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 + + + 叙事风格 + ... + + + + + 故事篇幅 + ... + + +``` + +**新结构（并排）：** +```vue + + + 叙事风格 + ... + + + 故事篇幅 + ... + + +``` + +**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)