From 3a0c099704fbeab85b91a374a0e2a1091e51c921 Mon Sep 17 00:00:00 2001
From: weicw1996 <weicw1996@qq.com>
Date: Tue, 13 Oct 2026 20:32:20 +0800
Subject: [PATCH] =?UTF-8?q?style(ai):=20=E5=8A=A9=E6=89=8B=E9=A1=B5?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E9=9D=A2=E6=9D=BF=E6=94=B9=E4=B8=BA=E3=80=8C?=
 =?UTF-8?q?=E6=AF=8F=E7=BB=84=E9=80=89=E9=A1=B9=E5=90=84=E5=8D=A0=E4=B8=80?=
 =?UTF-8?q?=E8=A1=8C=E3=80=8D=E6=A8=AA=E5=90=91=E6=BB=91=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

上一版把文体+字数、参考素材+比例各塞进同一个 scroll-view，靠后那组会被
滑出屏幕外；且在 375px 小屏上文体/字数仍会换行堆叠成 3 行，把消息区挤掉
小半屏。改为**每组选项各自一个 scroll-x 行**：

- 写作：文体一行、字数一行
- 图片：参考素材一行（「添加附件」放最左，保证不被滑出屏幕）、比例一行
- 删掉不再需要的竖分隔线 .option-sep
- 同步收紧 mode-tags 间距（16rpx → 12rpx）

实测（375×667 复刻页，见 probe/layout-preview.html）：

| | 参数区 | composer 总高 | 占屏 |
| --- | --- | --- | --- |
| 写作 改版前 | 118.2px（3 行） | 185.4px | 28% |
| 写作 改版后 | 86.6px（2 行） | 153.8px | 23% |
| 图片 改版前 | 149.8px | 217.0px | 33% |
| 图片 改版后 | 120.6px | 187.8px | 28% |

横向轨道实测：文体 356px / 字数 381px 超出 331px 可用宽 → 确实滚动而非换行；
参考素材 163px、比例 242px 均在 331px 内，无需滑动即可看全。

验证：verify-uniapp-assistant-template.js 新增 4 项布局断言（每组恰好独占一个
option-scroll、无混行、chip/label 有 flex-shrink:0、旧版布局无残留），全绿；
判别力经 5 处变异测试证伪（删整行 / 去 flex-shrink / 加回分隔线 /
混入别组选项 / 退回换行堆叠）。

Refs: .scratch/ai-assistant/issues/15-uniapp-assistant-modes-align-web.md
---
 pages/assistant/index.vue | 174 ++++++++++++++++++++++++--------------
 1 file changed, 109 insertions(+), 65 deletions(-)

diff --git a/pages/assistant/index.vue b/pages/assistant/index.vue
index 32489bb..efef659 100644
--- a/pages/assistant/index.vue
+++ b/pages/assistant/index.vue
@@ -112,51 +112,86 @@
 						{{ item.label }}
 					</view>
 				</view>
-				<view v-if="activeChatMode === 'writing'" class="option-panel">
-					<text class="option-label">文体</text>
-					<view
-						v-for="item in writingDocTypeOptions"
-						:key="item.value"
-						class="option-chip"
-						:class="{ 'option-chip--active': writingDocType === item.value, 'option-chip--disabled': loading }"
-						@tap="pickWritingDocType(item.value)"
-					>{{ item.label }}</view>
-					<text class="option-label">字数</text>
-					<view
-						v-for="item in writingWordCountOptions"
-						:key="item.value"
-						class="option-chip"
-						:class="{ 'option-chip--active': writingWordCount === item.value, 'option-chip--disabled': loading }"
-						@tap="pickWritingWordCount(item.value)"
-					>{{ item.label }}</view>
-				</view>
+				<!--
+					参数面板：手机屏窄，**每组选项各占一行、单行横向滑动**，不换行堆叠。
+					换行版在写作模式下要占 4 行（文体 2 行 + 字数 2 行），把消息区挤掉小半屏。
+				-->
+				<scroll-view
+					v-if="activeChatMode === 'writing'"
+					scroll-x
+					:show-scrollbar="false"
+					class="option-scroll"
+				>
+					<view class="option-track">
+						<text class="option-label">文体</text>
+						<view
+							v-for="item in writingDocTypeOptions"
+							:key="item.value"
+							class="option-chip"
+							:class="{ 'option-chip--active': writingDocType === item.value, 'option-chip--disabled': loading }"
+							@tap="pickWritingDocType(item.value)"
+						>{{ item.label }}</view>
+					</view>
+				</scroll-view>
 
-				<view v-if="activeChatMode === 'image'" class="option-panel">
-					<text class="option-label">图片比例</text>
-					<view
-						v-for="item in imageRatioOptions"
-						:key="item.value"
-						class="option-chip"
-						:class="{ 'option-chip--active': imageRatio === item.value, 'option-chip--disabled': loading }"
-						@tap="pickImageRatio(item.value)"
-					>{{ item.label }}</view>
-				</view>
+				<scroll-view
+					v-if="activeChatMode === 'writing'"
+					scroll-x
+					:show-scrollbar="false"
+					class="option-scroll"
+				>
+					<view class="option-track">
+						<text class="option-label">字数</text>
+						<view
+							v-for="item in writingWordCountOptions"
+							:key="item.value"
+							class="option-chip"
+							:class="{ 'option-chip--active': writingWordCount === item.value, 'option-chip--disabled': loading }"
+							@tap="pickWritingWordCount(item.value)"
+						>{{ item.label }}</view>
+					</view>
+				</scroll-view>
 
-				<view v-if="activeChatMode === 'image'" class="option-panel">
-					<text class="option-label">参考素材</text>
-					<view
-						class="option-chip"
-						:class="{ 'option-chip--disabled': !canPickImageFiles }"
-						@tap="chooseImageFiles"
-					>{{ uploadingFiles ? '上传中...' : '添加附件' }}</view>
-					<text class="attach-hint">
-						最多 {{ IMAGE_FILE_LIMIT }} 个，支持图片 / 视频 / 音频 / 文档
-					</text>
-					<view v-if="imageFiles.length" class="attach-list">
-						<view v-for="(item, index) in imageFiles" :key="item.id" class="attach-item">
-							<text class="attach-name">{{ item.name }}</text>
-							<view class="attach-remove" @tap="removeImageFile(index)">移除</view>
-						</view>
+				<!-- 「添加附件」放在最左：它是要点的主操作，不能被滑到屏幕外 -->
+				<scroll-view
+					v-if="activeChatMode === 'image'"
+					scroll-x
+					:show-scrollbar="false"
+					class="option-scroll"
+				>
+					<view class="option-track">
+						<text class="option-label">参考素材</text>
+						<view
+							class="option-chip"
+							:class="{ 'option-chip--disabled': !canPickImageFiles }"
+							@tap="chooseImageFiles"
+						>{{ uploadingFiles ? '上传中...' : '添加附件' }}</view>
+						<text class="option-hint">最多 {{ IMAGE_FILE_LIMIT }} 个</text>
+					</view>
+				</scroll-view>
+
+				<scroll-view
+					v-if="activeChatMode === 'image'"
+					scroll-x
+					:show-scrollbar="false"
+					class="option-scroll"
+				>
+					<view class="option-track">
+						<text class="option-label">比例</text>
+						<view
+							v-for="item in imageRatioOptions"
+							:key="item.value"
+							class="option-chip"
+							:class="{ 'option-chip--active': imageRatio === item.value, 'option-chip--disabled': loading }"
+							@tap="pickImageRatio(item.value)"
+						>{{ item.label }}</view>
+					</view>
+				</scroll-view>
+
+				<view v-if="activeChatMode === 'image' && imageFiles.length" class="attach-list">
+					<view v-for="(item, index) in imageFiles" :key="item.id" class="attach-item">
+						<text class="attach-name">{{ item.name }}</text>
+						<view class="attach-remove" @tap="removeImageFile(index)">移除</view>
 					</view>
 				</view>
 
@@ -1103,7 +1138,8 @@
 					return
 				}
 				uni.showActionSheet({
-					itemList: ['从相册选择图片', '从聊天记录选择文件'],
+					// 支持的类型写在选项里（面板上那行 hint 只留「最多 5 个」，省横向空间）
+					itemList: ['从相册选择图片', '从聊天记录选文件（视频/音频/文档）'],
 					success: (result) => {
 						if (result.tapIndex === 0) {
 							this.pickLocalImages()
@@ -1784,8 +1820,8 @@
 	.mode-tags {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 14rpx;
-		margin-bottom: 16rpx;
+		gap: 12rpx;
+		margin-bottom: 12rpx;
 	}
 
 	.mode-tag {
@@ -1807,29 +1843,44 @@
 		opacity: 0.6;
 	}
 
-	/* 写作 / 图片模式的参数面板（文体、字数、图片比例、参考素材） */
-	.option-panel {
-		display: flex;
-		flex-wrap: wrap;
+	/*
+		写作 / 图片模式的参数面板。
+		手机屏窄，选项一律**单行横向滑动**（scroll-view + 不换行的 inline-flex 轨道），
+		不换行堆叠 —— 换行版在写作模式下要占 4 行，把消息区挤掉小半屏。
+	*/
+	.option-scroll {
+		width: 100%;
+		white-space: nowrap;
+		margin-bottom: 12rpx;
+	}
+
+	.option-track {
+		display: inline-flex;
 		align-items: center;
-		gap: 12rpx;
-		margin-bottom: 16rpx;
+		gap: 10rpx;
 	}
 
 	.option-label {
-		margin-right: 2rpx;
+		flex-shrink: 0;
 		font-size: 22rpx;
 		color: #8a7f79;
 	}
 
+	.option-hint {
+		flex-shrink: 0;
+		font-size: 20rpx;
+		color: #a59a94;
+	}
+
 	.option-chip {
-		padding: 8rpx 20rpx;
+		flex-shrink: 0;
+		padding: 10rpx 18rpx;
 		border-radius: 999rpx;
 		border: 1rpx solid rgba(20, 150, 242, 0.18);
 		background: rgba(255, 255, 255, 0.9);
 		color: #1496f2;
 		font-size: 22rpx;
-		line-height: 1.4;
+		line-height: 1.3;
 	}
 
 	.option-chip--active {
@@ -1842,28 +1893,21 @@
 		opacity: 0.5;
 	}
 
-	.attach-hint {
-		width: 100%;
-		font-size: 20rpx;
-		line-height: 1.5;
-		color: #a59a94;
-	}
-
 	.attach-list {
-		width: 100%;
+		margin-bottom: 12rpx;
 	}
 
 	.attach-item {
 		display: flex;
 		align-items: center;
 		gap: 12rpx;
-		padding: 10rpx 16rpx;
+		padding: 8rpx 14rpx;
 		border-radius: 16rpx;
 		background: rgba(20, 150, 242, 0.06);
 	}
 
 	.attach-item + .attach-item {
-		margin-top: 10rpx;
+		margin-top: 8rpx;
 	}
 
 	.attach-name {