duanshuwen/zn-ai
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 消息页面的样式调整

Browse Source
This commit is contained in:
zoujing
2026-01-13 22:45:03 +08:00
parent b47565bdfc
commit 023d556977
1 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/renderer/views/home/ChatBox.vue
View File

@@ -6,26 +6,40 @@
<div ref="listRef" class="flex-1 overflow-y-auto px-6 py-6 space-y-6">
<div v-for="msg in messages" :key="msg.id" class="flex items-start gap-3"
:class="msg.role === 'user' ? 'justify-end' : 'justify-start'">
<!-- AI avatar -->
<div v-if="msg.role === 'ai'"
class="w-9 h-9 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold shrink-0">
N
</div>
<!-- 气泡 -->
<!-- AI avatar -->
<img v-if="msg.role === 'ai'" class="w-9 h-9 rounded-full shrink-0" src="@assets/images/login/blue_logo.png" />
<!-- 消息气泡 -->
<div class="max-w-[70%]">
<div class="px-4 py-3 text-sm text-gray-700" :class="msg.role === 'user' ? 'bg-[#f7f9fc] rounded-md' : ''">
<div class="flex items-start gap-2 pt-0.5 mb-2" :class="msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'">
<span class="text-xs text-[#4E5969]"> ZHINIAN</span>
<span class="text-xs text-[#86909C]"> 20:30</span>
</div>
<div class="text-sm text-gray-700" :class="msg.role === 'user' ? 'bg-[#f7f9fc] rounded-md px-2 py-2' : ''">
{{ msg.content }}
</div>
<!-- AI 标识 -->
<div v-if="msg.role === 'ai'" class="mt-1 text-xs text-gray-400 ">
<div v-if="msg.role === 'ai'" class="mt-2 text-xs text-gray-400 ">
本回答由 AI 生成
</div>
<!-- AI 操作按钮 -->
<div v-if="msg.role === 'ai'" class="mt-4 text-gray-500 flex items-center justify-between gap-4 ">
<RiFileCopyLine size="16px" @click="copyFileClick(msg)" />
<div class="flex items-center gap-4">
<RiShareForwardLine size="16px" @click="shareForwardClick(msg)"/>
<RiDownload2Line size="16px" @click="downloadClick(msg)" />
<RiThumbUpLine size="16px" @click="thumbUpClick(msg)" />
<RiThumbDownLine size="16px" @click="thumbDownClick(msg)" />
</div>
</div>
</div>
<!-- User avatar -->
<div v-if="msg.role === 'user'" class="w-9 h-9 rounded-full bg-blue-200 shrink-0"></div>
<img v-if="msg.role === 'user'" class="w-9 h-9 rounded-full shrink-0" src="@assets/images/login/user_icon.png" />
</div>
</div>
@@ -58,8 +72,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import { RiLink, RiSendPlaneFill } from '@remixicon/vue'
import { RiLink, RiSendPlaneFill, RiFileCopyLine, RiShareForwardLine, RiDownload2Line, RiThumbUpLine, RiThumbDownLine } from '@remixicon/vue'
type Message = {
id: number
@@ -81,4 +94,23 @@ const messages = ref<Message[]>(
),
}))
)
/// actions 实现复制、分享、下载、点赞等功能
const copyFileClick = (msg: Message) => {
console.log('copy file', msg)
}
const shareForwardClick = (msg: Message) => {
console.log('share forward', msg)
}
const downloadClick = (msg: Message) => {
console.log('download', msg)
}
const thumbUpClick = (msg: Message) => {
console.log('thumb up', msg)
}
const thumbDownClick = (msg: Message) => {
console.log('thumb down', msg)
}
</script>