style(ui): 收窄宽屏留白——作品库加宽到 max-w-7xl + xl 四列,写作正文 720→768px
- PageContainer wide 档 max-w-6xl→max-w-7xl;作品库改用 wide 档 - 作品库卡片网格 lg 三列基础上加 xl:grid-cols-4,宽屏铺满少留白 - 写作台正文测量 720→768px(约 42 中文字/行,仍舒适),收窄两侧空档
This commit is contained in:
@@ -23,7 +23,7 @@ export default async function DashboardPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<AppShell>
|
<AppShell>
|
||||||
<PageContainer>
|
<PageContainer width="wide">
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="我的作品"
|
title="我的作品"
|
||||||
description="从一个灵感进入正文、设定、审稿与验收闭环。"
|
description="从一个灵感进入正文、设定、审稿与验收闭环。"
|
||||||
|
|||||||
@@ -150,7 +150,7 @@ export function ProjectLibrary({ projects }: ProjectLibraryProps) {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
) : viewMode === "cards" ? (
|
) : viewMode === "cards" ? (
|
||||||
<ul className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
<ul className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||||
{visibleProjects.map((p) => (
|
{visibleProjects.map((p) => (
|
||||||
<li key={p.id}>
|
<li key={p.id}>
|
||||||
<ProjectCard project={p} />
|
<ProjectCard project={p} />
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ export type PageWidth = "prose" | "default" | "wide";
|
|||||||
const widths: Record<PageWidth, string> = {
|
const widths: Record<PageWidth, string> = {
|
||||||
prose: "max-w-3xl",
|
prose: "max-w-3xl",
|
||||||
default: "max-w-5xl",
|
default: "max-w-5xl",
|
||||||
wide: "max-w-6xl",
|
wide: "max-w-7xl",
|
||||||
};
|
};
|
||||||
|
|
||||||
interface PageContainerProps {
|
interface PageContainerProps {
|
||||||
|
|||||||
@@ -88,7 +88,7 @@ const config: Config = {
|
|||||||
transitionTimingFunction: {
|
transitionTimingFunction: {
|
||||||
standard: "var(--ease-standard)",
|
standard: "var(--ease-standard)",
|
||||||
},
|
},
|
||||||
maxWidth: { prose: "720px" },
|
maxWidth: { prose: "768px" },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
|
|||||||
Reference in New Issue
Block a user