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"> <scroll class="chat-scroll" scroll-y="true">
<div class="chat-msg {{$item.role === 'user' ? 'msg-user' : 'msg-assistant'}}" for="{{messages}}"> <div class="msg-row {{$item.role === 'user' ? 'row-user' : 'row-assistant'}}" for="{{messages}}">
<div class="think-chip" if="{{$item.think}}"> <div class="chat-msg {{$item.role === 'user' ? 'msg-user' : 'msg-assistant'}}">
<text>💭 思考…</text> <div class="think-chip" if="{{$item.think}}">
</div> <text>💭 思考…</text>
<text class="think-text fl{{fontLevel}}" if="{{$item.showThink}}">{{$item.think}}</text> </div>
<text class="chat-text fl{{fontLevel}}">{{$item.collapsed ? $item.preview : $item.text}}</text> <text class="think-text fl{{fontLevel}}" if="{{$item.showThink}}">{{$item.think}}</text>
<text class="expand-chip" if="{{$item.role === 'assistant' && $item.collapsed}}">展开 ▾</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'}}" /> <text class="expand-chip" if="{{$item.role === 'assistant' && !$item.collapsed}}">收起 ▴</text>
<div class="approve-box" if="{{$item.kind === 'approval'}}"> <image class="chat-img" src="/common/dsniang.png" if="{{$item.kind === 'image'}}" />
<input class="approve-btn allow" type="button" value="允许" /> <div class="approve-box" if="{{$item.kind === 'approval'}}">
<input class="approve-btn deny" type="button" value="拒绝" /> <input class="approve-btn allow" type="button" value="允许" />
<input class="approve-btn deny" type="button" value="拒绝" />
</div>
</div> </div>
</div> </div>
</scroll> </scroll>
@@ -667,25 +669,35 @@ export default {
margin-top: 4px; 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 { .chat-msg {
width: auto; width: auto;
max-width: 84%; max-width: 84%;
flex-direction: column; flex-direction: column;
margin-bottom: 6px;
padding: 7px 10px; padding: 7px 10px;
border-radius: 12px; border-radius: 12px;
} }
.msg-user { .msg-user {
align-self: flex-end;
margin-left: auto;
margin-right: 12px; margin-right: 12px;
background-color: rgba(51, 180, 255, 0.20); background-color: rgba(51, 180, 255, 0.20);
border: 1px solid rgba(120, 200, 255, 0.30); border: 1px solid rgba(120, 200, 255, 0.30);
} }
.msg-assistant { .msg-assistant {
align-self: flex-start;
margin-left: 12px; margin-left: 12px;
margin-right: 12px; margin-right: 12px;
background-color: rgba(58, 62, 70, 0.55); background-color: rgba(58, 62, 70, 0.55);