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