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-27 11:24:51 +08:00
parent 95f020047d
commit 0d946c050e
6 changed files with 114 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/views/home/components/Sidebar.vue
View File

@@ -3,10 +3,12 @@
<div class="sidebar-header">
<div class="brand-dot"></div>
<div class="user-info">
<el-avatar :size="42" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
<div class="ai-avatar">
<span class="ai-icon">AI</span>
</div>
<div class="user-details">
<div class="user-name">助手</div>
<div class="user-status">在线</div>
<div class="user-name">AI 助手</div>
<div class="user-status"><span class="status-dot"></span>在线</div>
</div>
</div>
<el-button class="new-chat-btn" @click="handleNewChat">
@@ -124,12 +126,13 @@ const handleDeleteHistory = (id: number) => {
<style scoped lang="scss">
.sidebar {
width: 252px;
background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 251, 255, 0.92) 100%);
border-right: 1px solid #e7edf7;
display: flex;
flex-direction: column;
height: 100%;
box-shadow: 6px 0 20px rgba(15, 23, 42, 0.04);
box-shadow: 8px 0 30px rgba(15, 23, 42, 0.06);
backdrop-filter: blur(10px);
}
.sidebar-header {
@@ -139,20 +142,24 @@ const handleDeleteHistory = (id: number) => {
}
.new-chat-btn {
margin-top: 10px;
margin-top: 12px;
width: 100%;
height: 34px;
border-radius: 10px;
border: 1px solid #dbe7f7;
background: linear-gradient(135deg, #f8fbff 0%, #eff6ff 100%);
color: #1f4db8;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(59, 130, 246, 0.28);
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: #ffffff;
font-weight: 600;
letter-spacing: 0.2px;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.26);
transition: all 0.2s ease;
&:hover {
color: #1e40af;
border-color: #bfdbfe;
background: linear-gradient(135deg, #eff6ff 0%, #e0eeff 100%);
transform: translateY(-1px);
color: #ffffff;
border-color: rgba(59, 130, 246, 0.4);
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
}
}
@@ -171,10 +178,32 @@ const handleDeleteHistory = (id: number) => {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 8px 6px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(248, 251, 255, 0.92) 100%);
border: 1px solid #e7edf7;
padding: 10px 10px 8px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(147, 197, 253, 0.04) 100%);
border: 1px solid rgba(59, 130, 246, 0.18);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ai-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%);
box-shadow:
inset 0 2px 8px rgba(255, 255, 255, 0.35),
0 4px 12px rgba(37, 99, 235, 0.28);
flex-shrink: 0;
}
.ai-icon {
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
}
.user-details {
@@ -193,6 +222,23 @@ const handleDeleteHistory = (id: number) => {
font-size: 12px;
color: #10b981;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
}
.status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.sidebar-menu {