This commit is contained in:
lychang
2026-07-19 23:56:28 +08:00
parent 34bcd67682
commit 36969a4fa0
16 changed files with 1925 additions and 350 deletions

View File

@@ -107,30 +107,56 @@ input { font-family: inherit; }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .sidebar-section-title span,
.sidebar.collapsed .sidebar-section-title .section-arrow,
.sidebar.collapsed .sidebar-tags,
.sidebar.collapsed .collapse-btn span {
.sidebar.collapsed .sidebar-people,
.sidebar.collapsed .sidebar-section-content,
.sidebar.collapsed .sidebar-divider {
opacity: 0;
pointer-events: none;
display: none;
}
.sidebar.collapsed .sidebar-section {
padding: var(--spacer-md) 0;
gap: var(--spacer-xs);
}
.sidebar.collapsed .sidebar-section-title {
justify-content: center;
padding: var(--spacer-sm) 0;
margin-bottom: 0;
}
.sidebar.collapsed .sidebar-section-group {
margin-bottom: var(--spacer-sm);
}
.sidebar.collapsed .nav-item {
justify-content: center;
padding-left: 0;
padding-right: 0;
margin: 0 var(--spacer-xs);
}
.sidebar.collapsed .sidebar-brand {
padding: var(--spacer-lg) 0;
justify-content: center;
}
.sidebar.collapsed .collapse-btn {
justify-content: center;
padding: var(--spacer-md) 0;
}
.sidebar.collapsed .collapse-btn i {
transform: rotate(180deg);
}
.sidebar.collapsed .sidebar-nav {
padding: var(--spacer-md) var(--spacer-xs);
}
/* 品牌 Logo */
.sidebar-brand {
display: flex;
@@ -228,6 +254,7 @@ input { font-family: inherit; }
display: flex;
flex-direction: column;
min-height: 0;
gap: var(--spacer-sm);
}
.sidebar-section::-webkit-scrollbar {
@@ -238,6 +265,12 @@ input { font-family: inherit; }
border-radius: 2px;
}
/* 可折叠区块组 */
.sidebar-section-group {
display: flex;
flex-direction: column;
}
.sidebar-section-title {
display: flex;
align-items: center;
@@ -251,7 +284,49 @@ input { font-family: inherit; }
margin-bottom: var(--spacer-sm);
}
.sidebar-section-title i {
.sidebar-section-title.collapsible {
cursor: pointer;
border-radius: var(--radius);
transition: background var(--transition-fast);
user-select: none;
}
.sidebar-section-title.collapsible:hover {
background: var(--bg-hover);
color: var(--text-light);
}
.section-arrow {
margin-left: auto;
font-size: 0.7rem;
transition: transform var(--transition-base);
opacity: 0.6;
}
.sidebar-section-group.collapsed .section-arrow {
transform: rotate(-90deg);
}
.sidebar-section-content {
overflow: hidden;
max-height: 600px;
transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease,
margin 0.2s ease;
opacity: 1;
margin-bottom: var(--spacer-sm);
}
.sidebar-section-group.collapsed .sidebar-section-content {
max-height: 0;
opacity: 0;
margin-bottom: 0;
transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.15s ease,
margin 0.15s ease;
}
.sidebar-section-title i:first-child {
width: 20px;
text-align: center;
font-size: 0.85rem;
@@ -309,24 +384,95 @@ input { font-family: inherit; }
color: var(--white);
}
/* 侧边栏人物列表 */
.sidebar-people {
display: flex;
flex-direction: column;
gap: var(--spacer-xs);
transition: opacity var(--transition-base);
}
.sidebar-person {
display: flex;
align-items: center;
gap: var(--spacer-sm);
padding: var(--spacer-sm) var(--spacer-lg);
border-radius: var(--radius);
cursor: pointer;
transition: all var(--transition-fast);
font-size: 0.9rem;
color: var(--text-light);
}
.sidebar-person:hover {
background: var(--bg-hover);
color: var(--text-dark);
}
.sidebar-person.active {
background: rgba(139, 92, 246, 0.1);
color: var(--accent-purple);
font-weight: 500;
}
.sidebar-person-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: #6366f1;
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
flex-shrink: 0;
}
.sidebar-person-info {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.sidebar-person-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.9rem;
}
.sidebar-person-count {
font-size: 0.75rem;
color: var(--text-muted);
}
.sidebar-person.active .sidebar-person-count {
color: var(--accent-purple);
opacity: 0.8;
}
/* 侧边栏底部 */
.sidebar-footer {
padding: var(--spacer-md);
border-top: 1px solid var(--border-gray);
flex-shrink: 0;
margin-top: auto;
}
.collapse-btn {
display: flex;
align-items: center;
gap: var(--spacer-md);
justify-content: center;
width: 100%;
padding: var(--spacer-md) var(--spacer-lg);
padding: var(--spacer-md);
border-radius: var(--radius);
color: var(--text-light);
font-size: 0.9rem;
font-size: 1rem;
font-weight: 500;
transition: all var(--transition-fast);
cursor: pointer;
}
.collapse-btn:hover {
@@ -338,12 +484,6 @@ input { font-family: inherit; }
width: 20px;
text-align: center;
transition: transform var(--transition-base);
flex-shrink: 0;
}
.collapse-btn span {
transition: opacity var(--transition-base);
white-space: nowrap;
}
/* ============ 主内容区 ============ */