tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(platform): 用户工作台 - 收敛无框视觉并统一导航图标与列表间距

Browse Source
This commit is contained in:
ddCat
2026-08-14 15:17:25 +08:00
parent 3c0a3cd849
commit 5aeaef8642
5 changed files with 168 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/layout/app-top-nav.tsx
View File

@@ -65,7 +65,7 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
active ? "is-active font-medium" : "",
)}
>
<Icon className="size-5 shrink-0" />
<Icon className="app-workspace-nav-icon shrink-0" strokeWidth={1.8} />
</Link>
);
};
@@ -118,7 +118,7 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
<div className="app-workspace-rail hidden min-h-0 flex-col overflow-y-auto lg:flex">
<div className="app-workspace-rail-header flex h-16 shrink-0 items-center justify-center">
<Link to="/home" className="grid size-10 shrink-0 place-items-center rounded-md text-foreground/55 transition-colors hover:bg-surface-hover hover:text-foreground" title="工作台首页">
<Home className="size-4" />
<Home className="app-workspace-nav-icon" strokeWidth={1.8} />
</Link>
</div>
<div className="app-workspace-rail-middle flex min-h-0 w-full flex-1 flex-col items-center justify-start overflow-y-auto px-3 pt-3">
@@ -141,7 +141,7 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
{/* 移动端：抽屉完整导航 */}
<div className="app-workspace-mobile-nav flex min-h-0 flex-1 flex-col overflow-hidden lg:hidden">
<div className="flex h-14 shrink-0 items-center gap-2 border-b border-border/55 px-3">
<div className="flex h-14 shrink-0 items-center gap-2 px-3">
<Link to="/" className="flex min-w-0 items-center gap-2" title="影策">
<span className="app-workspace-brand-mark grid size-7 shrink-0 place-items-center rounded-md bg-foreground text-background"><InfinityIcon className="size-4" /></span>
<span className="truncate text-[var(--fs-body)] font-semibold">影策</span>
@@ -169,14 +169,14 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
onClick={handleNavClick}
className={cn("app-workspace-nav-link relative mb-1 flex h-11 shrink-0 items-center gap-3 rounded-md px-2.5 text-[var(--fs-body)] transition-colors", active ? "is-active font-medium" : "text-foreground/55 hover:bg-surface-hover hover:text-foreground/85")}
>
<Icon className="size-4 shrink-0" />
<Icon className="app-workspace-nav-icon shrink-0" strokeWidth={1.8} />
<span className="truncate">{tool.label}</span>
</Link>
</Fragment>
);
})}
</nav>
<div className="shrink-0 border-t border-border/55 p-2">
<div className="shrink-0 p-2">
<WorkspaceSidebarFooter
expandedClassName="flex"
collapsedClassName="hidden"

6
web/src/components/layout/workspace-page.tsx
View File

@@ -31,7 +31,7 @@ export function PageHeader({ title, description, meta, actions }: { title: strin
export function ListToolbar({ children, trailing, active, onReset, className }: { children: ReactNode; trailing?: ReactNode; active?: boolean; onReset?: () => void; className?: string }) {
return (
<div className={cn("mt-3 flex min-h-12 flex-col gap-2 border-b border-border/75 pb-3 lg:flex-row lg:items-center lg:justify-between", className)}>
<div className={cn("mt-3 flex min-h-12 flex-col gap-2 pb-3 lg:flex-row lg:items-center lg:justify-between", className)}>
<div className="flex min-w-0 flex-1 flex-wrap items-center gap-2.5">{children}</div>
<div className="flex shrink-0 flex-wrap items-center gap-2">
{active && onReset ? <Button type="text" icon={<RotateCcw className="size-3.5" />} onClick={onReset}>重置</Button> : null}
@@ -46,13 +46,13 @@ export function TableSurface({ children, className }: { children: ReactNode; cla
}
export function CollectionGrid({ children, className }: { children: ReactNode; className?: string }) {
return <div className={cn("mt-4 grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-[repeat(auto-fill,minmax(248px,1fr))]", className)}>{children}</div>;
return <div className={cn("mt-4 grid grid-cols-1 gap-4 sm:grid-cols-[repeat(auto-fill,minmax(248px,1fr))]", className)}>{children}</div>;
}
export function PaginationBar({ current, pageSize, total, onChange, pageSizeOptions = [20, 50, 100] }: { current: number; pageSize: number; total: number; onChange: (page: number, pageSize: number) => void; pageSizeOptions?: number[] }) {
if (total <= pageSize && current === 1) return null;
return (
<div className="app-pagination-bar mt-4 flex min-h-10 min-w-0 items-center justify-end border-t border-border/70 px-2 py-1.5">
<div className="app-pagination-bar mt-4 flex min-h-10 min-w-0 items-center justify-end px-2 py-1.5">
<Pagination
size="small"
current={current}

6
web/src/components/layout/workspace-top-bar.tsx
View File

@@ -1,4 +1,4 @@
import { Infinity as InfinityIcon, PanelLeftClose, PanelLeftOpen, Settings2 } from "lucide-react";
import { Infinity as InfinityIcon, PanelLeftClose, PanelLeftOpen, Settings } from "lucide-react";
import { Link } from "react-router";
import { SystemAnnouncementCenter } from "@/components/layout/system-announcement-center";
@@ -12,7 +12,7 @@ export function WorkspaceTopBar({ sidebarOpen, onToggleSidebar }: { sidebarOpen:
const user = useUserStore((state) => state.user);
return (
<header className="app-workspace-topbar flex shrink-0 items-center justify-between gap-3 border-b px-4 sm:px-5">
<header className="app-workspace-topbar flex shrink-0 items-center justify-between gap-3 px-4 sm:px-5">
<div className="flex min-w-0 items-center gap-2">
<button type="button" className="app-workspace-topbar-icon-button" aria-label={sidebarOpen ? "收起侧栏" : "展开侧栏"} onClick={onToggleSidebar}>
{sidebarOpen ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
@@ -28,7 +28,7 @@ export function WorkspaceTopBar({ sidebarOpen, onToggleSidebar }: { sidebarOpen:
{user ? <SystemAnnouncementCenter userId={user.id} className="app-workspace-topbar-icon-button" /> : null}
<AnimatedThemeToggler className="app-workspace-topbar-icon-button" theme={theme} onThemeChange={setTheme} aria-label="切换主题" />
<Link to="/settings" className="app-workspace-topbar-icon-button" aria-label="设置" title="设置">
<Settings2 className="size-4" />
<Settings className="size-4" />
</Link>
</div>
</header>