feat: P0b Design Token + 共享组件库

- docs/design-tokens.md — 完整 Token 规范（色彩/间距/圆角/排版/组件模式）
- 新增 PageLayout 组件（封装 26+ 页面的重复容器模式）
- 新增 Card / StatCard 组件
- 补充 Mobile (Vue) 迁移清单和 CSS 变量映射

frontend/src/components/ui/page-layout.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+
+interface PageLayoutProps {
+  title: string
+  description?: string
+  backHref?: string
+  children: ReactNode
+}
+
+export function PageLayout({ title, description, backHref, children }: PageLayoutProps) {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-8">
+        {backHref && (
+          <a href={backHref} className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">
+            &larr; 返回
+          </a>
+        )}
+        <h1 className="text-3xl font-bold text-foreground">{title}</h1>
+        {description && <p className="mt-2 text-muted-foreground">{description}</p>}
+      </div>
+      {children}
+    </div>
+  )
+}

frontend/src/components/ui/section-card.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+
+interface CardProps {
+  children: ReactNode
+  className?: string
+  padding?: 'sm' | 'md' | 'lg'
+}
+
+export function Card({ children, className = '', padding = 'md' }: CardProps) {
+  const pads = { sm: 'p-4', md: 'p-6', lg: 'p-8' }
+  return (
+    <div className={`bg-card rounded-2xl border border-border shadow-sm ${pads[padding]} ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+interface StatCardProps {
+  label: string
+  value: string | number
+}
+
+export function StatCard({ label, value }: StatCardProps) {
+  return (
+    <div className="bg-card rounded-xl border border-border p-6">
+      <div className="text-sm text-muted-foreground mb-1">{label}</div>
+      <div className="text-2xl font-bold text-foreground">{value}</div>
+    </div>
+  )
+}