From fb5f3089e222b6b686fb0e8b6b5f50f03e3ce30d Mon Sep 17 00:00:00 2001
From: huazhongmin <peanut_hzm@163.com>
Date: Sat, 7 Mar 2026 19:10:59 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=89=A7=E6=9C=AC?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E5=99=A8=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=EF=BC=88=E6=96=B9=E6=A1=88=20A=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../2026-03-07-script-view-optimization.md    | 185 ++++++++++++++
 mini-program/src/pages/main/ScriptView.vue    | 234 ++++++++++--------
 2 files changed, 315 insertions(+), 104 deletions(-)
 create mode 100644 docs/plans/2026-03-07-script-view-optimization.md

diff --git a/docs/plans/2026-03-07-script-view-optimization.md b/docs/plans/2026-03-07-script-view-optimization.md
new file mode 100644
index 0000000..71efa6c
--- /dev/null
+++ b/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 表单有明显的容器边框和背景
+- [ ] 字体大小适配移动端，无明显过大
+- [ ] 圆角与原型一致，视觉精致
+- [ ] 整体布局紧凑，层次分明
diff --git a/mini-program/src/pages/main/ScriptView.vue b/mini-program/src/pages/main/ScriptView.vue
index 3e86a65..fc3003c 100644
--- a/mini-program/src/pages/main/ScriptView.vue
+++ b/mini-program/src/pages/main/ScriptView.vue
@@ -1,13 +1,13 @@
 <template>
   <view class="script-view">
     <text class="page-title font-serif">剧本生成器</text>
-    
+
     <view class="section-card glass-card">
       <view class="section-header">
         <text class="section-title">我的基础人设</text>
         <text class="section-hint">可自由修改</text>
       </view>
-      
+
       <view class="profile-grid">
         <input
           class="glass-input"
@@ -27,44 +27,46 @@
         />
       </view>
     </view>
-    
-    <view class="section-card glass-card">
+
+    <view class="section-card glass-card-main">
       <view class="input-group">
         <text class="label">剧本主题</text>
         <input
-          class="glass-input"
+          class="glass-input theme-input"
           placeholder="如：巅峰重现、治愈之旅、赛博觉醒..."
           v-model="scriptConfig.theme"
         />
       </view>
-      
+
       <view class="input-group">
         <view class="npc-header">
           <text class="label">关键配角/新的人设</text>
           <button class="add-btn" @click="addNpc">+ 添加</button>
         </view>
-        
-        <view class="npc-form">
-          <input
-            class="glass-input npc-input"
-            placeholder="姓名"
-            v-model="npcConfig.name"
+
+        <view class="npc-container">
+          <view class="npc-form">
+            <input
+              class="glass-input npc-input"
+              placeholder="姓名"
+              v-model="npcConfig.name"
+            />
+            <picker class="glass-picker npc-picker" mode="selector" :range="npcRoleOptions" :value="npcRoleIndex" @change="onNpcRoleChange">
+              <view class="picker-value">{{ npcConfig.role || '角色' }}</view>
+            </picker>
+            <picker class="glass-picker npc-picker" mode="selector" :range="npcRelationOptions" :value="npcRelationIndex" @change="onNpcRelationChange">
+              <view class="picker-value">{{ npcConfig.relation || '关系' }}</view>
+            </picker>
+          </view>
+
+          <textarea
+            class="glass-textarea"
+            placeholder="自由描述 TA 的人设特点或关键剧情点..."
+            v-model="npcConfig.desc"
+            rows="2"
           />
-          <picker class="glass-picker npc-picker" mode="selector" :range="npcRoleOptions" :value="npcRoleIndex" @change="onNpcRoleChange">
-            <view class="picker-value">{{ npcConfig.role || '角色' }}</view>
-          </picker>
-          <picker class="glass-picker npc-picker" mode="selector" :range="npcRelationOptions" :value="npcRelationIndex" @change="onNpcRelationChange">
-            <view class="picker-value">{{ npcConfig.relation || '关系' }}</view>
-          </picker>
         </view>
-        
-        <textarea
-          class="glass-textarea"
-          placeholder="自由描述TA的人设特点或关键剧情点..."
-          v-model="npcConfig.desc"
-          rows="2"
-        />
-        
+
         <view class="npc-list">
           <view
             v-for="(npc, index) in customNpcs"
@@ -76,9 +78,9 @@
           </view>
         </view>
       </view>
-      
-      <view class="params-row">
-        <view class="param-group">
+
+      <view class="params-section">
+        <view class="param-row">
           <text class="param-label">叙事风格</text>
           <view class="param-options">
             <text
@@ -92,8 +94,10 @@
             </text>
           </view>
         </view>
-        
-        <view class="param-group">
+      </view>
+
+      <view class="params-section">
+        <view class="param-row">
           <text class="param-label">故事篇幅</text>
           <view class="param-options">
             <text
@@ -108,7 +112,7 @@
           </view>
         </view>
       </view>
-      
+
       <button
         class="btn-primary generate-btn"
         :loading="isGenerating"
@@ -119,7 +123,7 @@
         <text v-else>生成平行人生剧本</text>
       </button>
     </view>
-    
+
     <view v-if="scripts.length > 0" class="scripts-list">
       <view
         v-for="script in scripts"
@@ -131,9 +135,9 @@
           <text class="script-title">{{ script.title }}</text>
           <text class="script-persona">{{ script.theme || '追光者' }}</text>
         </view>
-        
+
         <text class="script-summary" lines="3">{{ getScriptSummary(script) }}</text>
-        
+
         <view class="script-footer">
           <text class="script-style">{{ script.style || '风格' }}</text>
           <button class="select-btn" @click="selectScript(script.id)">
@@ -142,12 +146,12 @@
         </view>
       </view>
     </view>
-    
+
     <view v-else-if="!isGenerating" class="empty-state glass-card">
       <text class="empty-icon">🎬</text>
       <text class="empty-text">尚未生成剧本，定义你的未来篇章</text>
     </view>
-    
+
     <view v-if="isGenerating" class="generating-state glass-card">
       <view class="spinner"></view>
       <text class="generating-text">正在采集星海中的深紫色碎屑...</text>
@@ -233,9 +237,9 @@ const removeNpc = (index) => {
 
 const generateScript = async () => {
   if (!scriptConfig.theme || isGenerating.value) return
-  
+
   isGenerating.value = true
-  
+
   try {
     await store.createScript({
       theme: scriptConfig.theme,
@@ -271,39 +275,44 @@ onMounted(async () => {
 .script-view {
   display: flex;
   flex-direction: column;
-  gap: 32rpx;
+  gap: 24rpx;
   min-height: 100%;
 }
 
 .page-title {
-  font-size: 36rpx;
-  font-weight: 400;
+  font-size: 32rpx;
+  font-weight: 300;
   color: rgba(255, 255, 255, 0.9);
-  margin-bottom: 8rpx;
   letter-spacing: 4rpx;
 }
 
 .section-card {
+  padding: 24rpx;
+  border-radius: 32rpx;
+}
+
+.glass-card-main {
   padding: 32rpx;
+  border-radius: 48rpx;
 }
 
 .section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24rpx;
+  margin-bottom: 20rpx;
 }
 
 .section-title {
-  font-size: 22rpx;
+  font-size: 18rpx;
   color: rgba(192, 132, 252, 0.6);
   font-weight: 600;
-  letter-spacing: 4rpx;
+  letter-spacing: 3rpx;
   text-transform: uppercase;
 }
 
 .section-hint {
-  font-size: 16rpx;
+  font-size: 14rpx;
   color: rgba(255, 255, 255, 0.35);
   font-style: italic;
 }
@@ -311,59 +320,73 @@ onMounted(async () => {
 .profile-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 16rpx;
+  gap: 12rpx;
 }
 
 .glass-input, .glass-picker {
   width: 100%;
-  height: 80rpx;
+  height: 72rpx;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 16rpx;
-  padding: 0 24rpx;
+  border-radius: 24rpx;
+  padding: 0 20rpx;
   color: rgba(255, 255, 255, 0.9);
-  font-size: 26rpx;
+  font-size: 22rpx;
+  box-sizing: border-box;
 }
 
 .glass-input::placeholder {
   color: rgba(255, 255, 255, 0.3);
 }
 
+.theme-input {
+  height: 80rpx;
+  font-size: 24rpx;
+}
+
 .picker-value {
-  line-height: 80rpx;
+  line-height: 72rpx;
   color: rgba(255, 255, 255, 0.9);
 }
 
 .input-group {
-  margin-bottom: 24rpx;
+  margin-bottom: 28rpx;
 }
 
 .label {
   display: block;
-  font-size: 18rpx;
+  font-size: 16rpx;
   color: rgba(255, 255, 255, 0.35);
   font-weight: 600;
-  letter-spacing: 4rpx;
+  letter-spacing: 3rpx;
   text-transform: uppercase;
-  margin-bottom: 16rpx;
+  margin-bottom: 12rpx;
 }
 
 .npc-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16rpx;
+  margin-bottom: 12rpx;
 }
 
 .add-btn {
-  font-size: 20rpx;
+  font-size: 18rpx;
   color: #C084FC;
   border: 1px solid rgba(192, 132, 252, 0.3);
-  padding: 8rpx 16rpx;
+  padding: 6rpx 12rpx;
   border-radius: 12rpx;
   background: transparent;
 }
 
+.npc-container {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 32rpx;
+  padding: 24rpx;
+  margin-bottom: 16rpx;
+}
+
 .npc-form {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -372,26 +395,26 @@ onMounted(async () => {
 }
 
 .npc-input, .npc-picker {
-  height: 72rpx;
+  height: 64rpx;
   padding: 0 16rpx;
-  font-size: 24rpx;
+  font-size: 20rpx;
 }
 
 .npc-picker .picker-value {
-  line-height: 72rpx;
-  font-size: 24rpx;
+  line-height: 64rpx;
+  font-size: 20rpx;
 }
 
 .glass-textarea {
   width: 100%;
-  height: 120rpx;
+  height: 100rpx;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 16rpx;
-  padding: 20rpx;
+  border-radius: 24rpx;
+  padding: 16rpx;
   color: rgba(255, 255, 255, 0.9);
-  font-size: 24rpx;
-  margin-bottom: 16rpx;
+  font-size: 20rpx;
+  box-sizing: border-box;
 }
 
 .npc-list {
@@ -414,41 +437,38 @@ onMounted(async () => {
 
 .delete-btn {
   color: rgba(255, 255, 255, 0.4);
-  font-size: 28rpx;
+  font-size: 24rpx;
   padding: 0 4rpx;
 }
 
-.params-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 24rpx;
-  margin-bottom: 32rpx;
+.params-section {
+  margin-bottom: 24rpx;
 }
 
-.param-group {
+.param-row {
   display: flex;
   flex-direction: column;
   gap: 12rpx;
 }
 
 .param-label {
-  font-size: 18rpx;
+  font-size: 16rpx;
   color: rgba(255, 255, 255, 0.35);
-  margin-left: 8rpx;
+  margin-left: 4rpx;
 }
 
 .param-options {
   display: flex;
   flex-wrap: wrap;
-  gap: 12rpx;
+  gap: 8rpx;
 }
 
 .param-option {
-  padding: 10rpx 20rpx;
+  padding: 8rpx 16rpx;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 16rpx;
-  font-size: 22rpx;
+  border-radius: 20rpx;
+  font-size: 18rpx;
   color: rgba(255, 255, 255, 0.5);
 }
 
@@ -460,19 +480,21 @@ onMounted(async () => {
 
 .generate-btn {
   width: 100%;
-  height: 96rpx;
-  box-shadow: 0 8rpx 40rpx rgba(168, 85, 247, 0.3);
+  height: 88rpx;
+  border-radius: 32rpx;
+  box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
 }
 
 .scripts-list {
   display: flex;
   flex-direction: column;
-  gap: 24rpx;
+  gap: 20rpx;
 }
 
 .script-card {
-  padding: 32rpx;
+  padding: 24rpx;
   border-left: 4rpx solid transparent;
+  border-radius: 32rpx;
 }
 
 .script-card.selected {
@@ -483,30 +505,30 @@ onMounted(async () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16rpx;
+  margin-bottom: 12rpx;
 }
 
 .script-title {
-  font-size: 32rpx;
+  font-size: 28rpx;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.9);
 }
 
 .script-persona {
-  font-size: 18rpx;
+  font-size: 16rpx;
   color: rgba(168, 85, 247, 0.6);
   background: rgba(168, 85, 247, 0.1);
-  padding: 6rpx 16rpx;
+  padding: 6rpx 12rpx;
   border-radius: 12rpx;
   border: 1px solid rgba(168, 85, 247, 0.2);
 }
 
 .script-summary {
   display: block;
-  font-size: 24rpx;
+  font-size: 22rpx;
   color: rgba(255, 255, 255, 0.5);
   line-height: 1.6;
-  margin-bottom: 24rpx;
+  margin-bottom: 16rpx;
 }
 
 .script-footer {
@@ -516,48 +538,52 @@ onMounted(async () => {
 }
 
 .script-style {
-  font-size: 20rpx;
+  font-size: 18rpx;
   color: #C084FC;
 }
 
 .select-btn {
-  font-size: 24rpx;
+  font-size: 20rpx;
   color: #C084FC;
   font-weight: 600;
   background: transparent;
+  border: none;
+  padding: 0;
 }
 
 .empty-state {
-  padding: 80rpx 48rpx;
+  padding: 64rpx 40rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 24rpx;
+  gap: 20rpx;
   opacity: 0.5;
+  border-radius: 48rpx;
 }
 
 .empty-icon {
-  font-size: 64rpx;
+  font-size: 56rpx;
 }
 
 .empty-text {
-  font-size: 24rpx;
+  font-size: 22rpx;
   color: rgba(255, 255, 255, 0.5);
   text-align: center;
 }
 
 .generating-state {
-  padding: 80rpx 48rpx;
+  padding: 64rpx 40rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 32rpx;
+  gap: 24rpx;
+  border-radius: 48rpx;
 }
 
 .spinner {
-  width: 64rpx;
-  height: 64rpx;
-  border: 4rpx solid #A855F7;
+  width: 56rpx;
+  height: 56rpx;
+  border: 3rpx solid #A855F7;
   border-top-color: transparent;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
@@ -569,7 +595,7 @@ onMounted(async () => {
 }
 
 .generating-text {
-  font-size: 26rpx;
+  font-size: 24rpx;
   color: rgba(192, 132, 252, 0.6);
   font-style: italic;
   letter-spacing: 2rpx;