components/ui/layout.tsx

@@ -0,0 +1,84 @@
+import type { HTMLAttributes, ElementType } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+/**
+ * 容器：统一站点内容宽度与左右留白。
+ * DESIGN.md：营销页面 1280px 最大宽度 + 32px 沟槽。
+ */
+const containerVariants = cva("mx-auto w-full", {
+	variants: {
+		size: {
+			// 文章正文最舒适的阅读宽度
+			prose: "max-w-[720px]",
+			default: "max-w-[1280px]",
+			narrow: "max-w-[960px]",
+		},
+		gutter: {
+			default: "px-lg sm:px-xxl",
+			none: "px-0",
+		},
+	},
+	defaultVariants: {
+		size: "default",
+		gutter: "default",
+	},
+});
+
+export type ContainerProps = HTMLAttributes<HTMLElement> &
+	VariantProps<typeof containerVariants> & {
+		/** 渲染的语义化标签，默认 div */
+		as?: ElementType;
+	};
+
+export function Container({
+	className,
+	size,
+	gutter,
+	as: Component = "div",
+	...props
+}: ContainerProps) {
+	return (
+		<Component
+			className={cn(containerVariants({ size, gutter }), className)}
+			{...props}
+		/>
+	);
+}
+
+/**
+ * 区块：负责垂直节奏。
+ * DESIGN.md：营销页区块之间 96px，文档面 32–64px。
+ */
+const sectionVariants = cva("w-full", {
+	variants: {
+		spacing: {
+			none: "py-0",
+			sm: "py-section-sm",
+			default: "py-section",
+			lg: "py-section-lg",
+		},
+	},
+	defaultVariants: {
+		spacing: "default",
+	},
+});
+
+export type SectionProps = HTMLAttributes<HTMLElement> &
+	VariantProps<typeof sectionVariants> & {
+		as?: ElementType;
+	};
+
+export function Section({
+	className,
+	spacing,
+	as: Component = "section",
+	...props
+}: SectionProps) {
+	return (
+		<Component
+			className={cn(sectionVariants({ spacing }), className)}
+			{...props}
+		/>
+	);
+}