ColoringStore 迁移中的 Blocks 与 Components

如果产品文案、路由装配和可复用 UI 基础组件都堆在同一个文件里，框架迁移会很快变得混乱。ColoringStore 保持一个简单切分：

Block 负责把产品内容装配进页面，component 只渲染传入的 props。

Block 是页面装配层

Block 放在 src/blocks/。它们读取 Paraglide 文案、选择链接、组合共享组件。当产品页面需要不同导航、不同 CTA 或不同信息层级时，block 应该很容易替换。

// src/blocks/header.tsx -- block：读取 i18n，选择产品链接
export function Header() {
  const navLinks = [
    { href: '/text-to-coloring', label: m['coloring.nav.text_to_coloring']() },
    { href: '/gallery', label: m['coloring.nav.gallery']() },
  ];
  return <SiteHeader navLinks={navLinks} />;
}

Component 是耐用基础设施

Component 放在 src/components/。SiteHeader、SiteFooter、PricingTable、弹窗、表格和 shadcn/ui primitives 不应该提前知道具体产品文案。所有标签、链接和内容都通过 props 传入，所以它们能跨过迁移继续复用。

为什么这个切分重要

ColoringStore 可以保留 upstream 的认证、支付、积分、RBAC、管理后台和存储能力，同时把产品表层重写成涂色页体验。迁移主要触碰 src/routes/、src/blocks/、src/components/coloring/ 和 messages/，不会把每个基础组件都改成一次性项目代码。