feat: rich chat simulation (think/approval/image/collapse) + scroll container; fix slider progress

This commit is contained in:
2026-09-01 22:42:58 +08:00
parent 8c45a15913
commit 7e78d8d142
+32 -14
View File
@@ -19,21 +19,22 @@
</div>
<!-- 消息流 -->
<div class="chat-list">
<scroll class="chat-scroll" scroll-y="true">
<div class="chat-msg {{$item.role === 'user' ? 'msg-user' : 'msg-assistant'}}" for="{{messages}}">
<div class="think-chip" if="{{$item.think}}" onclick="toggleThink($index)">
<div class="think-chip" if="{{$item.think}}">
<text>💭 思考…</text>
</div>
<text class="think-text fl{{fontLevel}}" if="{{$item.showThink}}">{{$item.think}}</text>
<text class="chat-text fl{{fontLevel}}">{{$item.collapsed ? $item.preview : $item.text}}</text>
<text class="expand-chip" if="{{$item.collapsed}}" onclick="toggleCollapse($index)">展开 ▾</text>
<text class="expand-chip" if="{{!$item.collapsed}}" onclick="toggleCollapse($index)">收起 ▴</text>
<text class="expand-chip" if="{{$item.collapsed}}">展开 ▾</text>
<text class="expand-chip" if="{{!$item.collapsed}}">收起 ▴</text>
<image class="chat-img" src="/common/dsniang.png" if="{{$item.kind === 'image'}}" />
<div class="approve-box" if="{{$item.kind === 'approval'}}">
<input class="approve-btn allow" type="button" value="允许" onclick="approve($index)" />
<input class="approve-btn deny" type="button" value="拒绝" onclick="deny($index)" />
</div>
<input class="approve-btn allow" type="button" value="允许" />
<input class="approve-btn deny" type="button" value="拒绝" />
</div>
</div>
</scroll>
<!-- 底部输入栏 -->
<div class="input-bar">
@@ -146,8 +147,16 @@ export default {
currentIndex: 1,
messages: [
{ role:'user', text:'帮我看看今天有什么任务', preview:'', think:null, kind:'normal', showThink:false, collapsed:false },
{ role:'assistant', text:'好的,今天三件事:1) 回复 DSHWatch 进度;2) 调整手环 UI;3) 准备部署。', preview:'好的,今天三件事:1) 回复 DSHWatch 进度;2) 调整手环…', think:'正在从工作区任务列表整理…', kind:'normal', showThink:true, collapsed:true },
{ role:'assistant', text:'需要一个权限:允许运行网络请求到 https://api.deepseek.com/user/balance', preview:'', think:null, kind:'approval', showThink:false, collapsed:false }
{ role:'assistant', text:'好的,今天三件事:1) 回复 DSHWatch 进度;2) 调整手环 UI;3) 准备部署。', preview:'好的,今天三件事:1) 回复 DSHWatch 进度;2) 调整手环…', think:'正在从工作区任务列表整理,并对比上次状态…', kind:'normal', showThink:true, collapsed:true },
{ role:'user', text:'第一件事具体说说', preview:'', think:null, kind:'normal', showThink:false, collapsed:false },
{ role:'assistant', text:'已把进度整理成:1)修复白屏(已提交) 2)布局放大(已提交) 3)待真机验证', preview:'已把进度整理成:1)修复白屏…', think:'汇总最近 5 次提交…', kind:'normal', showThink:true, collapsed:true },
{ role:'assistant', text:'需要一个权限:允许运行网络请求到 https://api.deepseek.com/user/balance', preview:'', think:null, kind:'approval', showThink:false, collapsed:false },
{ role:'user', text:'允许', preview:'', think:null, kind:'normal', showThink:false, collapsed:false },
{ role:'assistant', text:'已查询到余额 ¥6.20,今日已用 ¥12.08。', preview:'', think:'正在调用 DeepSeek user/balance…', kind:'normal', showThink:true, collapsed:false },
{ role:'user', text:'帮我生成一张手环 UI 草图', preview:'', think:null, kind:'normal', showThink:false, collapsed:false },
{ role:'assistant', text:'生成了一张「手表主界面」草图,点击可放大。', preview:'生成了一张「手表主界面」草图…', think:'正在渲染图像…', kind:'image', showThink:true, collapsed:false },
{ role:'assistant', text:'另外建议把左边做成对话流、右边放设置,中间吉祥物可交互——这样最贴合你说的“把 Harness 串流过来”。', preview:'另外建议把左边做成对话流、右边放设置…', think:'正在思考布局建议…', kind:'normal', showThink:true, collapsed:true },
{ role:'system', text:'会话已切换工作区:reactor', preview:'', think:null, kind:'normal', showThink:false, collapsed:false }
],
workspaces: [
{ name:'DeepSeek_Harness_Watch', conversations:['小米手环10 Pro远程控制','DSHWatch 验收'] },
@@ -274,8 +283,12 @@ export default {
},
onFontChange(e) {
if (e && typeof e.value === 'number') {
this.fontValue = e.value
let v = e && typeof e.progress === 'number' ? e.progress : (e && typeof e.value === 'number' ? e.value : 18)
// 兼容 progress 是 0-100 百分比的情况
if (v >= 10 && v <= 24) {
this.fontValue = v
} else {
this.fontValue = Math.round(14 + (v / 100) * (22 - 14))
}
const lv = Math.round((this.fontValue - 14) / 4)
this.fontLevel = Math.max(0, Math.min(2, lv))
@@ -535,11 +548,16 @@ export default {
}
/* ===== 左页:对话 ===== */
.chat-list {
.chat-scroll {
flex: 1;
width: 100%;
flex-direction: column;
overflow: hidden;
}
.chat-img {
width: 100%;
height: 150px;
border-radius: 8px;
margin-top: 4px;
}
.chat-msg {