Skip to content

Commit 8f5e8f7

Browse files
aiprodcoderaiprodcoder
committed
修改侧边栏
修改侧边栏样式
1 parent 50e6bfd commit 8f5e8f7

2 files changed

Lines changed: 118 additions & 21 deletions

File tree

‎web/src/components/layout/SiderBar.js‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -276,17 +276,18 @@ const SiderBar = ({ onNavigate = () => { } }) => {
276276
itemKey={item.itemKey}
277277
text={
278278
<div className="flex items-center">
279-
<span className="truncate font-medium text-sm" style={{ color: textColor }}>
279+
<span className="truncate font-medium text-sm dark-sidebar-item-text" style={{ color: textColor }}>
280280
{item.text}
281281
</span>
282282
</div>
283283
}
284284
icon={
285-
<div className="sidebar-icon-container flex-shrink-0">
285+
<div className="sidebar-icon-container dark-sidebar-icon-container flex-shrink-0">
286286
{getLucideIcon(item.itemKey, isSelected)}
287287
</div>
288288
}
289289
className={item.className}
290+
style={isSelected ? { backgroundColor: '#0086ff', color: '#ffffff' } : {}}
290291
/>
291292
);
292293
};
@@ -303,16 +304,17 @@ const SiderBar = ({ onNavigate = () => { } }) => {
303304
itemKey={item.itemKey}
304305
text={
305306
<div className="flex items-center">
306-
<span className="truncate font-medium text-sm" style={{ color: textColor }}>
307+
<span className="truncate font-medium text-sm dark-sidebar-item-text" style={{ color: textColor }}>
307308
{item.text}
308309
</span>
309310
</div>
310311
}
311312
icon={
312-
<div className="sidebar-icon-container flex-shrink-0">
313+
<div className="sidebar-icon-container dark-sidebar-icon-container flex-shrink-0">
313314
{getLucideIcon(item.itemKey, isSelected)}
314315
</div>
315316
}
317+
style={isSelected ? { backgroundColor: '#0086ff', color: '#ffffff' } : {}}
316318
>
317319
{item.items.map((subItem) => {
318320
const isSubSelected = selectedKeys.includes(subItem.itemKey);
@@ -323,10 +325,11 @@ const SiderBar = ({ onNavigate = () => { } }) => {
323325
key={subItem.itemKey}
324326
itemKey={subItem.itemKey}
325327
text={
326-
<span className="truncate font-medium text-sm" style={{ color: subTextColor }}>
328+
<span className="truncate font-medium text-sm dark-sidebar-item-text" style={{ color: subTextColor }}>
327329
{subItem.text}
328330
</span>
329331
}
332+
style={isSubSelected ? { backgroundColor: '#0086ff', color: '#ffffff' } : {}}
330333
/>
331334
);
332335
})}
@@ -339,18 +342,18 @@ const SiderBar = ({ onNavigate = () => { } }) => {
339342

340343
return (
341344
<div
342-
className="sidebar-container"
345+
className="sidebar-container dark-sidebar"
343346
style={{ width: 'var(--sidebar-current-width)' }}
344347
>
345348
<Nav
346-
className="sidebar-nav"
349+
className="sidebar-nav dark-sidebar-nav"
347350
defaultIsCollapsed={collapsed}
348351
isCollapsed={collapsed}
349352
onCollapseChange={toggleCollapsed}
350353
selectedKeys={selectedKeys}
351-
itemStyle="sidebar-nav-item"
352-
hoverStyle="sidebar-nav-item:hover"
353-
selectedStyle="sidebar-nav-item-selected"
354+
itemStyle="sidebar-nav-item dark-sidebar-nav-item"
355+
hoverStyle="dark-sidebar-nav-item:hover"
356+
selectedStyle="dark-sidebar-nav-item-selected"
354357
renderWrapper={({ itemElement, props }) => {
355358
const to = routerMapState[props.itemKey] || routerMap[props.itemKey];
356359

@@ -381,62 +384,63 @@ const SiderBar = ({ onNavigate = () => { } }) => {
381384
}}
382385
>
383386
{/* 聊天区域 */}
384-
<div className="sidebar-section">
387+
<div className="sidebar-section dark-sidebar-section">
385388
{!collapsed && (
386-
<div className="sidebar-group-label">{t('聊天')}</div>
389+
<div className="sidebar-group-label dark-sidebar-group-label">{t('聊天')}</div>
387390
)}
388391
{chatMenuItems.map((item) => renderSubItem(item))}
389392
</div>
390393

391394
{/* 控制台区域 */}
392-
<Divider className="sidebar-divider" />
395+
<Divider className="sidebar-divider dark-sidebar-divider" />
393396
<div>
394397
{!collapsed && (
395-
<div className="sidebar-group-label">{t('控制台')}</div>
398+
<div className="sidebar-group-label dark-sidebar-group-label">{t('控制台')}</div>
396399
)}
397400
{workspaceItems.map((item) => renderNavItem(item))}
398401
</div>
399402

400403
{/* 管理员区域 - 只在管理员时显示 */}
401404
{isAdmin() && (
402405
<>
403-
<Divider className="sidebar-divider" />
406+
<Divider className="sidebar-divider dark-sidebar-divider" />
404407
<div>
405408
{!collapsed && (
406-
<div className="sidebar-group-label">{t('管理员')}</div>
409+
<div className="sidebar-group-label dark-sidebar-group-label">{t('管理员')}</div>
407410
)}
408411
{adminItems.map((item) => renderNavItem(item))}
409412
</div>
410413
</>
411414
)}
412415

413416
{/* 个人中心区域 */}
414-
<Divider className="sidebar-divider" />
417+
<Divider className="sidebar-divider dark-sidebar-divider" />
415418
<div>
416419
{!collapsed && (
417-
<div className="sidebar-group-label">{t('个人中心')}</div>
420+
<div className="sidebar-group-label dark-sidebar-group-label">{t('个人中心')}</div>
418421
)}
419422
{financeItems.map((item) => renderNavItem(item))}
420423
</div>
421424
</Nav>
422425

423426
{/* 底部折叠按钮 */}
424-
<div className="sidebar-collapse-button">
427+
<div className="sidebar-collapse-button dark-sidebar-collapse-button">
425428
<Button
426429
theme="outline"
427430
type="tertiary"
428431
size="small"
432+
429433
icon={
430434
<ChevronLeft
431435
size={16}
432436
strokeWidth={2.5}
433-
color="var(--semi-color-text-2)"
437+
color="gray"
434438
style={{ transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }}
435439
/>
436440
}
437441
onClick={toggleCollapsed}
438442
iconOnly={collapsed}
439-
style={collapsed ? { padding: '4px', width: '100%' } : { padding: '4px 12px', width: '100%' }}
443+
style={ collapsed ? { padding: '4px', width: '100%' ,color:"gray"} : { padding: '4px 12px', width: '100%',color:"gray" }}
440444
>
441445
{!collapsed ? t('收起侧边栏') : null}
442446
</Button>

‎web/src/index.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,99 @@ code {
222222
padding-top: 12px;
223223
}
224224

225+
/* ==================== 暗色侧边栏样式 (固定暗色，不随主题变化) ==================== */
226+
.dark-sidebar {
227+
background: #1e293b !important; /* slate-800 */
228+
}
229+
230+
.dark-sidebar-nav {
231+
background: #1e293b !important; /* slate-800 */
232+
color: #cbd5e1 !important; /* slate-300 */
233+
}
234+
235+
.dark-sidebar-nav-item {
236+
border-radius: 6px;
237+
margin: 3px 8px;
238+
transition: all 0.15s ease;
239+
padding: 8px 12px;
240+
color: #cbd5e1 !important; /* slate-300 */
241+
background-color: transparent !important;
242+
}
243+
244+
.dark-sidebar-nav-item:hover {
245+
background-color: #334155 !important; /* slate-700 */
246+
color: #ffffff !important;
247+
}
248+
249+
.dark-sidebar-nav-item-selected,
250+
.sidebar-nav .dark-sidebar-nav-item-selected,
251+
.sidebar-container .dark-sidebar-nav-item-selected,
252+
.sidebar-nav-item.dark-sidebar-nav-item-selected,
253+
.dark-sidebar-nav .dark-sidebar-nav-item-selected,
254+
.dark-sidebar .dark-sidebar-nav-item-selected {
255+
background-color: #0086ff !important; /* 将选中项背景色改为 #0086ff */
256+
color: #ffffff !important;
257+
font-weight: 500;
258+
}
259+
260+
.dark-sidebar-divider {
261+
margin: 4px 8px;
262+
border-color: #334155 !important; /* slate-700 */
263+
opacity: 1;
264+
}
265+
266+
.dark-sidebar-group-label {
267+
padding: 4px 15px 8px;
268+
color: #94a3b8 !important; /* slate-400 */
269+
font-size: 12px;
270+
text-transform: uppercase;
271+
letter-spacing: 0.5px;
272+
opacity: 1;
273+
}
274+
275+
.dark-sidebar-collapse-button {
276+
background-color: #1e293b !important; /* slate-800 */
277+
border-top: 1px solid #334155 !important; /* slate-700 */
278+
box-shadow: 0 -10px 10px -5px #1e293b !important; /* slate-800 */
279+
}
280+
281+
.dark-sidebar-section {
282+
padding-top: 12px;
283+
}
284+
285+
.dark-sidebar-icon-container {
286+
color: #94a3b8 !important; /* slate-400 */
287+
}
288+
289+
.dark-sidebar-item-text {
290+
color: #cbd5e1 !important; /* slate-300 */
291+
}
292+
293+
.dark-sidebar-nav-item:hover .dark-sidebar-item-text,
294+
.dark-sidebar-nav-item:hover .dark-sidebar-icon-container {
295+
color: #ffffff !important;
296+
}
297+
298+
.dark-sidebar-nav-item-selected .dark-sidebar-item-text,
299+
.dark-sidebar-nav-item-selected .dark-sidebar-icon-container,
300+
.sidebar-nav .dark-sidebar-nav-item-selected .dark-sidebar-item-text,
301+
.sidebar-nav .dark-sidebar-nav-item-selected .dark-sidebar-icon-container,
302+
.sidebar-container .dark-sidebar-nav-item-selected .dark-sidebar-item-text,
303+
.sidebar-container .dark-sidebar-nav-item-selected .dark-sidebar-icon-container {
304+
color: #ffffff !important;
305+
}
306+
307+
/* 确保在任何主题下都使用暗色侧边栏样式 */
308+
.sidebar-container.dark-sidebar,
309+
.sidebar-nav.dark-sidebar-nav,
310+
.dark-sidebar-nav-item,
311+
.dark-sidebar-divider,
312+
.dark-sidebar-group-label,
313+
.dark-sidebar-collapse-button,
314+
.dark-sidebar-section {
315+
/* 使用 !important 确保样式不被主题覆盖 */
316+
}
317+
225318
/* ==================== 聊天界面样式 ==================== */
226319
.semi-chat {
227320
padding-top: 0 !important;

0 commit comments

Comments
 (0)