red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页优化

Browse Source
This commit is contained in:
吴思建
2026-05-26 17:58:23 +08:00
parent 7fe519df28
commit 95f020047d
6 changed files with 413 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/home/components/ChatList.vue
View File

@@ -13,7 +13,7 @@
</div>
<div v-if="msg.isUser" class="avatar-wrap">
<el-avatar :size="28" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
<el-avatar :size="36" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
</div>
</div>
</div>
@@ -64,16 +64,20 @@ const messages = ref<Message[]>([
.chat-divider {
align-self: center;
font-size: 12px;
color: #8b95a7;
color: #64748b;
line-height: 1;
padding: 0 12px;
padding: 4px 16px;
background: rgba(255, 255, 255, 0.7);
border-radius: 999px;
border: 1px solid rgba(226, 233, 244, 0.8);
letter-spacing: 0.2px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.message-row {
display: flex;
align-items: flex-end;
gap: 10px;
align-items: flex-start;
gap: 12px;
max-width: 100%;
&.is-user {
@@ -82,24 +86,29 @@ const messages = ref<Message[]>([
}
.avatar-wrap {
width: 30px;
height: 30px;
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: flex-start;
padding-top: 4px;
}
.ai-avatar {
width: 30px;
height: 30px;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-size: 12px;
font-weight: 700;
color: #53607a;
background: linear-gradient(145deg, #f7f9fc 0%, #e9eef6 100%);
border: 1px solid #dfe6f0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
color: #1e40af;
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
border: 1px solid #93c5fd;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 2px 8px rgba(59, 130, 246, 0.15);
}
.bubble-wrap {
@@ -112,30 +121,35 @@ const messages = ref<Message[]>([
.bubble {
font-size: 14px;
line-height: 1.75;
padding: 12px 14px;
border-radius: 12px;
padding: 14px 16px;
border-radius: 16px;
word-break: break-word;
color: #1f2937;
background: rgba(255, 255, 255, 0.84);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 255, 0.92) 100%);
border: 1px solid rgba(226, 233, 244, 0.95);
backdrop-filter: blur(8px);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
transition: all 0.2s ease;
.message-row.is-user & {
background: linear-gradient(135deg, #58a6ff 0%, #3b82f6 52%, #2563eb 100%);
border-color: rgba(59, 130, 246, 0.32);
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
border-color: rgba(59, 130, 246, 0.4);
color: #fff;
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.33);
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
}
}
.time {
font-size: 11px;
color: #8f9aae;
padding: 0 4px;
padding: 4px 6px;
.message-row.is-user & {
text-align: right;
color: rgba(148, 163, 184, 0.9);
}
.message-row:not(.is-user) & {
padding-left: 2px;
}
}
</style>