ViperEkura
/
Luxx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化前端样式

This commit is contained in:
ViperEkura 2026-04-21 18:19:33 +08:00
parent 29fe4b6e6f
commit 1ebb6454e0
3 changed files with 15 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
dashboard/src/components/RoomMessageBubble.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="message-bubble" :class="message.sender_type">
<div class="message-avatar">
<div class="avatar">
{{ message.sender_name?.charAt(0).toUpperCase() }}
</div>
<div class="message-container">
@ -9,10 +9,9 @@
v-if="message.process_steps && message.process_steps.length > 0"
:process-steps="message.process_steps"
/>
<div v-else class="md-content message-text" v-html="renderedContent"></div>
<div v-else class="md-content" v-html="renderedContent"></div>
</div>
<div class="message-footer">
<span class="sender-name">{{ message.sender_name }}</span>
<span class="message-time">{{ formatTime(message.created_at) }}</span>
<button class="ghost-btn accent" @click="copyContent" title="复制">
<span v-html="copyIcon"></span>
@ -57,75 +56,16 @@ const copyIcon = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" st
</script>
<style scoped>
.message-bubble {
display: flex;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.message-bubble.user {
flex-direction: row-reverse;
}
.message-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
flex-shrink: 0;
}
.message-bubble.user .message-avatar {
background: linear-gradient(135deg, #11998e, #38ef7d);
}
.message-container {
max-width: 70%;
}
.message-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.message-text {
padding: 0.75rem 1rem;
background: var(--bg-primary);
border-radius: 12px;
border: 1px solid var(--border-light);
line-height: 1.6;
}
.message-bubble.user .message-text {
background: var(--accent-primary);
color: white;
border: none;
}
/* 组件只需要 message-footer 和 ghost-btn 样式，其他依赖全局样式 */
.message-footer {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.25rem;
font-size: 0.75rem;
gap: 8px;
padding: 6px 0 0;
font-size: 12px;
color: var(--text-tertiary);
}
.message-bubble.user .message-footer {
flex-direction: row-reverse;
}
.sender-name {
font-weight: 500;
color: var(--text-secondary);
}
.ghost-btn {
background: transparent;
border: none;

3
dashboard/src/style.css
View File

@ -370,7 +370,8 @@ body {
font-size: 12px;
}
.assistant .avatar {
.assistant .avatar,
.agent .avatar {
background: var(--avatar-gradient);
color: white;
font-size: 12px;

96
dashboard/src/views/RoomView.vue
View File

@ -143,16 +143,18 @@
<!-- 正在输入的流式消息 -->
<div v-for="(stream, agentId) in streamingMessages" :key="'stream-' + agentId"
class="message-wrapper agent streaming">
<div class="message-avatar">
class="message-bubble assistant streaming">
<div class="avatar">
{{ stream.agentName?.charAt(0).toUpperCase() }}
</div>
<div class="message-content">
<div class="message-meta">
<div class="message-container">
<div class="message-body">
<div class="md-content" v-html="renderMarkdown(stream.content)"></div>
</div>
<div class="message-footer">
<span class="sender-name">{{ stream.agentName }}</span>
<span class="typing-indicator">正在输入...</span>
</div>
<div class="message-text" v-html="renderMarkdown(stream.content)"></div>
</div>
</div>
</div>
@ -768,90 +770,6 @@ onUnmounted(() => {
padding: 1.5rem;
}
/* 流式消息（未使用组件的部分） */
.message-wrapper {
display: flex;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.message-wrapper.user {
flex-direction: row-reverse;
}
.message-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
flex-shrink: 0;
}
.message-wrapper.user .message-avatar {
background: linear-gradient(135deg, #11998e, #38ef7d);
}
.message-content {
max-width: 70%;
}
.message-meta {
display: flex;
gap: 0.5rem;
margin-bottom: 0.25rem;
font-size: 0.75rem;
}
.message-wrapper.user .message-meta {
flex-direction: row-reverse;
}
.message-text {
padding: 0.75rem 1rem;
background: var(--bg-primary);
border-radius: 12px;
border: 1px solid var(--border-light);
line-height: 1.6;
}
.message-wrapper.user .message-text {
background: var(--accent-primary);
color: white;
border: none;
}
.message-footer {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--text-tertiary);
}
.ghost-btn {
background: transparent;
border: none;
cursor: pointer;
padding: 4px;
border-radius: 4px;
color: var(--text-tertiary);
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.ghost-btn:hover {
background: var(--bg-hover);
color: var(--accent-primary);
}
/* Input */
.input-area {
padding: 1rem 1.5rem;