统一PC前端布局密度(05-28-pc-frontend-layout-unification)
这个提交包含在:
@@ -18,7 +18,7 @@ export function EntityOverviewHero({
|
||||
{subtitle ? <p className="workbench-hero__subtitle">{subtitle}</p> : null}
|
||||
{meta ? <div className="mt-3 flex flex-wrap gap-2">{meta}</div> : null}
|
||||
</div>
|
||||
{actions ? <div className="shrink-0 rounded-2xl border border-white/70 bg-white/55 p-2 shadow-sm backdrop-blur">{actions}</div> : null}
|
||||
{actions ? <div className="shrink-0 rounded-lg border border-white/70 bg-white/55 p-2 shadow-sm backdrop-blur">{actions}</div> : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -21,20 +21,20 @@ export function ListWorkspace({ className, children }: WorkspaceChildrenProps) {
|
||||
|
||||
export function WorkspaceHeader({ eyebrow, title, subtitle, meta, actions, className }: WorkspaceHeaderProps) {
|
||||
return (
|
||||
<header className={cn("flex flex-col gap-4 md:flex-row md:items-end md:justify-between", className)}>
|
||||
<header className={cn("flex flex-col gap-3 md:flex-row md:items-end md:justify-between", className)}>
|
||||
<div className="min-w-0 max-w-3xl">
|
||||
{eyebrow ? <div className="text-xs font-bold uppercase text-primary">{eyebrow}</div> : null}
|
||||
<h1 className="mt-1 text-2xl font-semibold text-[var(--color-text-primary)] md:text-3xl">{title}</h1>
|
||||
{subtitle ? <div className="mt-2 text-sm leading-6 text-[var(--color-text-secondary)]">{subtitle}</div> : null}
|
||||
{meta ? <div className="mt-3 flex flex-wrap gap-2">{meta}</div> : null}
|
||||
<h1 className="mt-1 text-2xl font-semibold text-[var(--color-text-primary)] md:text-[1.65rem]">{title}</h1>
|
||||
{subtitle ? <div className="mt-1.5 text-sm leading-6 text-[var(--color-text-secondary)]">{subtitle}</div> : null}
|
||||
{meta ? <div className="mt-2.5 flex flex-wrap gap-2">{meta}</div> : null}
|
||||
</div>
|
||||
{actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
|
||||
{actions ? <div className="flex shrink-0 flex-wrap items-center gap-2 md:justify-end">{actions}</div> : null}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export function FilterBar({ className, children }: WorkspaceChildrenProps) {
|
||||
return <section className={cn("card-std p-4 md:p-5", className)}>{children}</section>;
|
||||
return <section className={cn("card-std p-3 md:p-3.5", className)}>{children}</section>;
|
||||
}
|
||||
|
||||
export function FilterGrid({ className, children }: WorkspaceChildrenProps) {
|
||||
@@ -66,7 +66,7 @@ export function WorkspaceSection({
|
||||
actions?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className={cn("card-std space-y-4 p-4 md:p-5", className)}>
|
||||
<section className={cn("card-std space-y-3 p-3.5 md:p-4", className)}>
|
||||
{title || description || actions ? (
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
||||
<div className="min-w-0">
|
||||
@@ -86,7 +86,7 @@ export function ActionToolbar({ className, children }: WorkspaceChildrenProps) {
|
||||
}
|
||||
|
||||
export function PrimaryTable({ className, children }: WorkspaceChildrenProps) {
|
||||
return <section className={cn("table-container p-0", className)}>{children}</section>;
|
||||
return <section className={cn("table-container ops-table-focus p-0", className)}>{children}</section>;
|
||||
}
|
||||
|
||||
export function WorkspaceEmptyState({
|
||||
@@ -97,7 +97,7 @@ export function WorkspaceEmptyState({
|
||||
children?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("rounded-xl border border-dashed border-zinc-300 px-4 py-8 text-center text-sm text-zinc-500", className)}>
|
||||
<div className={cn("rounded-lg border border-dashed border-zinc-300 px-4 py-7 text-center text-sm text-zinc-500", className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
@@ -123,7 +123,7 @@ export function WorkspaceNotice({
|
||||
}[tone];
|
||||
|
||||
return (
|
||||
<section className={cn("rounded-xl border px-4 py-3 text-sm", toneClass, className)}>
|
||||
<section className={cn("rounded-lg border px-4 py-3 text-sm", toneClass, className)}>
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="font-semibold">{title}</div>
|
||||
|
||||
在新工单中引用
屏蔽一个用户