sdaduanbilei/cc-haha
1
0
Fork 0
mirror of https://github.com/NanmiCoder/cc-haha synced 2026-07-16 13:03:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: improve TabBar visual design and Settings sidebar alignment

Browse Source 
- TabBar: darker background (surface-container), active tab uses top brand
  accent + lighter bg, consistent bottom border, draggable empty area
- Settings sidebar width matches TAB_WIDTH (180px) for vertical alignment
- Remove rounded corners and side borders from tabs for cleaner look

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
程序员阿江(Relakkes) 2026-04-09 10:26:38 +08:00
parent e249c7ab76
commit 5c4a1e8994
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
desktop/src/components/layout/TabBar.tsx
View File

@ -99,14 +99,15 @@ export function TabBar() {
if (tabs.length === 0) return null
return (
<div className="flex items-center border-b border-[var(--color-border)] bg-[var(--color-surface)] min-h-[36px] select-none" data-tauri-drag-region>
<div className="flex items-center bg-[var(--color-surface-container)] min-h-[37px] select-none border-b border-[var(--color-border)]" data-tauri-drag-region>
{canScrollLeft && (
<button onClick={() => scroll('left')} className="flex-shrink-0 w-7 h-full flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
<button onClick={() => scroll('left')} className="flex-shrink-0 w-7 h-[37px] flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
<span className="material-symbols-outlined text-[16px]">chevron_left</span>
</button>
)}
<div ref={scrollRef} className="flex-1 flex overflow-x-hidden">
<div ref={scrollRef} className="flex-1 flex items-center overflow-x-hidden" data-tauri-drag-region>
{tabs.map((tab) => (
<TabItem
key={tab.sessionId}
@ -120,7 +121,7 @@ export function TabBar() {
</div>
{canScrollRight && (
<button onClick={() => scroll('right')} className="flex-shrink-0 w-7 h-full flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
<button onClick={() => scroll('right')} className="flex-shrink-0 w-7 h-[37px] flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
<span className="material-symbols-outlined text-[16px]">chevron_right</span>
</button>
)}
@ -197,10 +198,10 @@ function TabItem({ tab, isActive, onClick, onClose, onContextMenu }: {
onClick={onClick}
onContextMenu={onContextMenu}
className={`
flex-shrink-0 flex items-center gap-1.5 px-3 h-[36px] border-r border-[var(--color-border)] cursor-pointer group transition-colors
flex-shrink-0 flex items-center gap-1.5 px-3 cursor-pointer group transition-colors
${isActive
? 'bg-[var(--color-surface)] border-b-2 border-b-[var(--color-brand)]'
: 'bg-[var(--color-surface-container-low)] hover:bg-[var(--color-surface-hover)]'
? 'h-[37px] bg-[var(--color-surface)] border-t-2 border-t-[var(--color-brand)]'
: 'h-[37px] bg-transparent hover:bg-[var(--color-surface-hover)]'
}
`}
style={{ width: TAB_WIDTH, maxWidth: TAB_WIDTH }}

2
desktop/src/pages/Settings.tsx
View File

@ -22,7 +22,7 @@ export function Settings() {
<div className="flex-1 flex flex-col overflow-hidden bg-[var(--color-surface)]">
<div className="flex-1 flex overflow-hidden">
{/* Tab navigation */}
<div className="w-48 border-r border-[var(--color-border)] py-3 flex-shrink-0">
<div className="w-[180px] border-r border-[var(--color-border)] py-3 flex-shrink-0">
<TabButton icon="dns" label={t('settings.tab.providers')} active={activeTab === 'providers'} onClick={() => setActiveTab('providers')} />
<TabButton icon="shield" label={t('settings.tab.permissions')} active={activeTab === 'permissions'} onClick={() => setActiveTab('permissions')} />
<TabButton icon="tune" label={t('settings.tab.general')} active={activeTab === 'general'} onClick={() => setActiveTab('general')} />