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>
<!-- 消息流 --> <!-- 消息流 -->
<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="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> <text>💭 思考…</text>
</div> </div>
<text class="think-text fl{{fontLevel}}" if="{{$item.showThink}}">{{$item.think}}</text> <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="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}}">展开 ▾</text>
<text class="expand-chip" if="{{!$item.collapsed}}" onclick="toggleCollapse($index)">收起 ▴</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'}}"> <div class="approve-box" if="{{$item.kind === 'approval'}}">
<input class="approve-btn allow" type="button" value="允许" onclick="approve($index)" /> <input class="approve-btn allow" type="button" value="允许" />
<input class="approve-btn deny" type="button" value="拒绝" onclick="deny($index)" /> <input class="approve-btn deny" type="button" value="拒绝" />
</div>
</div> </div>
</div> </div>
</scroll>
<!-- 底部输入栏 --> <!-- 底部输入栏 -->
<div class="input-bar"> <div class="input-bar">
@@ -146,8 +147,16 @@ export default {
currentIndex: 1, currentIndex: 1,
messages: [ messages: [
{ role:'user', text:'帮我看看今天有什么任务', preview:'', think:null, kind:'normal', showThink:false, collapsed:false }, { 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:'好的,今天三件事: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:'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: [ workspaces: [
{ name:'DeepSeek_Harness_Watch', conversations:['小米手环10 Pro远程控制','DSHWatch 验收'] }, { name:'DeepSeek_Harness_Watch', conversations:['小米手环10 Pro远程控制','DSHWatch 验收'] },
@@ -274,8 +283,12 @@ export default {
}, },
onFontChange(e) { onFontChange(e) {
if (e && typeof e.value === 'number') { let v = e && typeof e.progress === 'number' ? e.progress : (e && typeof e.value === 'number' ? e.value : 18)
this.fontValue = e.value // 兼容 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) const lv = Math.round((this.fontValue - 14) / 4)
this.fontLevel = Math.max(0, Math.min(2, lv)) this.fontLevel = Math.max(0, Math.min(2, lv))
@@ -535,11 +548,16 @@ export default {
} }
/* ===== 左页:对话 ===== */ /* ===== 左页:对话 ===== */
.chat-list { .chat-scroll {
flex: 1; flex: 1;
width: 100%; width: 100%;
flex-direction: column; }
overflow: hidden;
.chat-img {
width: 100%;
height: 150px;
border-radius: 8px;
margin-top: 4px;
} }
.chat-msg { .chat-msg {