jiangchen/DSHWatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: user/assistant alignment via outer row justify-content (reliable in Vela)

Browse Source
This commit is contained in:
jiangchen
2026-09-01 22:59:10 +08:00
parent 46a0523c65
commit ab41ff2943
1 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/index.ux
+28 -16
View File
@@ -20,18 +20,20 @@
<!-- 消息流 -->
<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}}">
<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.role === 'assistant' && $item.collapsed}}">展开 ▾</text>
<text class="expand-chip" if="{{$item.role === 'assistant' && !$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="允许" />
<input class="approve-btn deny" type="button" value="拒绝" />
<div class="msg-row {{$item.role === 'user' ? 'row-user' : 'row-assistant'}}" for="{{messages}}">
<div class="chat-msg {{$item.role === 'user' ? 'msg-user' : 'msg-assistant'}}">
<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.role === 'assistant' && $item.collapsed}}">展开 ▾</text>
<text class="expand-chip" if="{{$item.role === 'assistant' && !$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="允许" />
<input class="approve-btn deny" type="button" value="拒绝" />
</div>
</div>
</div>
</scroll>
@@ -667,25 +669,35 @@ export default {
margin-top: 4px;
}
.msg-row {
width: 100%;
flex-direction: row;
margin-bottom: 6px;
}
.row-user {
justify-content: flex-end;
}
.row-assistant {
justify-content: flex-start;
}
.chat-msg {
width: auto;
max-width: 84%;
flex-direction: column;
margin-bottom: 6px;
padding: 7px 10px;
border-radius: 12px;
}
.msg-user {
align-self: flex-end;
margin-left: auto;
margin-right: 12px;
background-color: rgba(51, 180, 255, 0.20);
border: 1px solid rgba(120, 200, 255, 0.30);
}
.msg-assistant {
align-self: flex-start;
margin-left: 12px;
margin-right: 12px;
background-color: rgba(58, 62, 70, 0.55);