layout

src/components/ui/Card.tsx

@@ -0,0 +1,73 @@
+/**
+ * Card - 可复用的卡片组件
+ *
+ * 提供应用统一的标准白色卡片样式：
+ * - 白色背景
+ * - 圆角 (rounded-2xl)
+ * - 阴影 (shadow-xl)
+ * - 可配置内边距
+ * - 多种样式变体
+ *
+ * @example
+ * ```tsx
+ * // 默认卡片
+ * <Card>
+ *   <p>卡片内容</p>
+ * </Card>
+ *
+ * // 带边框的卡片
+ * <Card variant="bordered" padding="lg">
+ *   <p>带边框的内容</p>
+ * </Card>
+ *
+ * // 无内边距卡片
+ * <Card padding="none">
+ *   <img src="image.jpg" alt="完全填充的图片" />
+ * </Card>
+ * ```
+ */
+export type CardVariant = "default" | "bordered" | "elevated";
+export type CardPadding = "none" | "sm" | "md" | "lg" | "xl";
+
+export interface CardProps {
+  children: React.ReactNode;
+  /** 额外的 CSS 类名，用于自定义样式 */
+  className?: string;
+  /** 卡片样式变体 */
+  variant?: CardVariant;
+  /** 内边距大小 */
+  padding?: CardPadding;
+}
+
+// 变体样式映射
+const variantClasses: Record<CardVariant, string> = {
+  default: "bg-white shadow-xl",
+  bordered: "bg-white border-2 border-gray-200",
+  elevated: "bg-white shadow-2xl",
+};
+
+// 内边距映射
+const paddingClasses: Record<CardPadding, string> = {
+  none: "",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8",
+  xl: "p-8 md:p-12",
+};
+
+export function Card({
+  children,
+  className = "",
+  variant = "default",
+  padding = "md",
+}: CardProps) {
+  const baseClasses = "rounded-2xl";
+  const variantClass = variantClasses[variant];
+  const paddingClass = paddingClasses[padding];
+
+  return (
+    <div className={`${baseClasses} ${variantClass} ${paddingClass} ${className}`}>
+      {children}
+    </div>
+  );
+}

src/components/ui/PageLayout.tsx

@@ -3,31 +3,103 @@
  *
  * 提供应用统一的标准页面布局：
  * - 绿色背景 (#35786f)
- * - 居中的白色圆角卡片
- * - 响应式内边距
+ * - 最小高度 min-h-[calc(100vh-64px)]
+ * - 支持多种布局变体
  *
  * @example
  * ```tsx
+ * // 默认：居中白色卡片布局
  * <PageLayout>
  *   <PageHeader title="标题" subtitle="副标题" />
  *   <div>页面内容</div>
  * </PageLayout>
+ *
+ * // 全宽布局（无白色卡片）
+ * <PageLayout variant="full-width" maxWidth="3xl">
+ *   <div>页面内容</div>
+ * </PageLayout>
+ *
+ * // 全屏布局（用于 translator 等）
+ * <PageLayout variant="fullscreen">
+ *   <div>全屏内容</div>
+ * </PageLayout>
  * ```
  */
+import { Card } from "./Card";
+
+type PageLayoutVariant = "centered-card" | "full-width" | "fullscreen";
+type MaxWidth = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
+type AlignItems = "center" | "start" | "end";
+
 interface PageLayoutProps {
   children: React.ReactNode;
   /** 额外的 CSS 类名，用于自定义布局行为 */
   className?: string;
+  /** 布局变体 */
+  variant?: PageLayoutVariant;
+  /** 最大宽度（仅对 full-width 变体有效） */
+  maxWidth?: MaxWidth;
+  /** 内容垂直对齐方式（仅对 centered-card 变体有效） */
+  align?: AlignItems;
 }
 
-export function PageLayout({ children, className = "" }: PageLayoutProps) {
-  return (
-    <div className={`min-h-[calc(100vh-64px)] bg-[#35786f] flex items-center justify-center px-4 py-8 ${className}`}>
-      <div className="w-full max-w-2xl">
-        <div className="bg-white rounded-2xl shadow-xl p-6 md:p-8">
+// 最大宽度映射
+const maxWidthClasses: Record<MaxWidth, string> = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  full: "max-w-full",
+};
+
+// 对齐方式映射
+const alignClasses: Record<AlignItems, string> = {
+  center: "items-center",
+  start: "items-start",
+  end: "items-end",
+};
+
+export function PageLayout({
+  children,
+  className = "",
+  variant = "centered-card",
+  maxWidth = "2xl",
+  align = "center",
+}: PageLayoutProps) {
+  // 默认变体：居中白色卡片布局
+  if (variant === "centered-card") {
+    return (
+      <div className={`min-h-[calc(100vh-64px)] bg-[#35786f] flex ${alignClasses[align]} justify-center px-4 py-8 ${className}`}>
+        <div className="w-full max-w-2xl">
+          <Card padding="lg" className="p-6 md:p-8">
+            {children}
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  // 全宽布局：绿色背景，最大宽度容器，无白色卡片
+  if (variant === "full-width") {
+    return (
+      <div className={`min-h-[calc(100vh-64px)] bg-[#35786f] px-4 py-8 ${className}`}>
+        <div className={`w-full ${maxWidthClasses[maxWidth]} mx-auto`}>
           {children}
         </div>
       </div>
-    </div>
-  );
+    );
+  }
+
+  // 全屏布局：仅绿色背景，无其他限制
+  if (variant === "fullscreen") {
+    return (
+      <div className={`min-h-[calc(100vh-64px)] bg-[#35786f] ${className}`}>
+        {children}
+      </div>
+    );
+  }
+
+  return null;
 }

src/components/ui/index.ts

@@ -31,6 +31,8 @@ export { Container } from './Container';
 export { PageLayout } from './PageLayout';
 export { PageHeader } from './PageHeader';
 export { CardList } from './CardList';
+export { Card } from './Card';
+export type { CardProps, CardVariant, CardPadding } from './Card';
 
 // 复合组件
 export { LocaleSelector } from './LocaleSelector';