互选平台设计系统 — 入口

所有涉及互选平台（fe_free_trade）的用户请求都从这里进入。本 skill 负责：

1. 解析用户意图
2. 立即加载并执行对应的子 skill / 知识包（不是回答用户问题）
3. 在 readonly 模式下防止修改组件库与页面知识

> 知识分层：通用流水线与 ODN 设计知识位于 shared/p1-design-analyst、shared/p1-design-spec、shared/p2-one-design、shared/p3-page-implement、shared/p4-audit、shared/p4-polish。本目录只放互选专属知识：SKILL.md、p2-page-catalog、p2-block-catalog、references/。

⚠️ 写代码前必读的硬约束

1. 单次 Write 行数上限 800——估算 > 800 行时先拆文件（详见 shared/p3-page-implement/GUIDE.md#单次-writeedit-的物理限制）。历史 trace 多次出现 1700 行 Write 被截断 → 重写又截断 → 浪费 40% 时间。
2. 按需复制依赖表——只复制用户要的 slug，不要"为保险全拷"（详见下方「按需复制」章节的 slug 依赖表）。huxuan-project-delivery 自带 echarts-for-react 依赖，不要它就别复制。
3. 修代码报错必须先跑 tsc——禁止凭空通读规则猜（详见 constraints.md#错误排查铁律）。
4. install 只需公网 npm——不依赖腾讯内部 npm 源。

产品 Layout

互选平台 Layout 组件：HuxuanLayout（one-design-next 已导出）。

HuxuanLayout 是完整顶栏 + 内容区方案：

• 白色 sticky 顶栏：Logo + 一级导航 Tabs（含 Popover 下拉子菜单）+ 右侧 Action 按钮（含 Popover 弹层）+ 账号面板
• 内置 DEFAULT_NAV 6 项导航：home、creator（含 4 子项：creator-finder / creator-mp / creator-weapp / creator-qq）、trending、mcn、calendar、manage（含 5 子项：manage-order / manage-report / manage-promotion / manage-recruitment / manage-project）
• 内置 DEFAULT_ACTIONS 2 项：recruitment（发布招募任务，子菜单 recruitment-finder / recruitment-mp）、collection（达人名单 popup）
• 灰色背景内容区（#f1f2f6）

禁止用 RuyiLayout 套互选页面，不要自己写顶栏。

强制依赖

互选 workshop 只依赖 one-design-next（公网 npm）+ 自有 blocks/ 目录下的独立区块。

npm install one-design-next
# 或
pnpm add one-design-next

各页面用的 block：

• huxuan-home：blocks/dhx-show-case-card（营销案例卡）
• huxuan-calendar：blocks/dhx-marketing-calendar（营销活动日历）
• huxuan-selection-list：blocks/card-tabs + blocks/check-tags（卡片式 Tab + 标签多选）

强制路由规则

**当用户请求匹配任何子 skill 时，必须立即加载该 skill 的 GUIDE.md 并按其流程执行。

不要直接回答用户问题。**

路由表

路由消歧规则

1. "创建模板" / "直接用 workshop" → 走「创建项目」（从 references/ 组装）
2. "做一个 XX 互选页面" 但当前不在 ODN 项目中 → 先 scaffold，再进 design-analyst
3. "做一个 XX 互选页面" 且已在 ODN 项目中 → 直接进 design-analyst
4. 不确定 → 问用户，不猜：

"您想要 (A) 创建新互选项目、(B) 改已有的 huxuan workshop 页、(C) 做新页面/区块、(D) 审查代码、(E) 查组件用法、(F) 还原现网页面？"

项目环境检查（前置步骤）

在执行 design-analyst / design-spec / page-implement 之前，先检查：

1. 当前目录有 package.json 且 dependencies 含 one-design-next？
2. 不在 ODN 项目中 → 先执行「创建项目」（从 references/ 组装），再继续
3. 已在 ODN 项目中 → 直接进对应 skill

设计底线

继承 ODN 全局铁律，见 shared/p2-one-design/rules/design-paradigm.md。

互选专属补充（与全局铁律同级）：

顶栏铁律

头部导航跳转模板（多 demo 间互通）

互选所有 workshop demo 之间应能通过 HuxuanLayout 顶栏互相跳转。每个 demo 文件内置：

// 头部导航跳转映射（workshop demo 间跳转，无对应页的 key 不跳）
const NAV_PAGE_MAP: Record<string, string> = {
  home: 'huxuan-home',
  creator: 'huxuan-selection-list',
  'creator-finder': 'huxuan-selection-list',
  'creator-mp': 'huxuan-selection-list',
  'creator-weapp': 'huxuan-selection-list',
  'creator-qq': 'huxuan-selection-list',
  manage: 'huxuan-project-manage',
  'manage-project': 'huxuan-project-manage',
  'manage-order': 'huxuan-finder-manage',
  calendar: 'huxuan-calendar',
};
const CURRENT_SLUG = 'huxuan-<本页 slug>';

function goToWorkshopDemo(slug: string) {
  if (typeof window === 'undefined') return;
  const { pathname, search } = window.location;
  const target = new RegExp(`/${CURRENT_SLUG}/?$`);
  const nextPath = target.test(pathname)
    ? pathname.replace(target, `/${slug}`)
    : `/${slug}`;
  window.location.href = `${nextPath}${search}`;
}

// HuxuanLayout 上：
<HuxuanLayout
  activeNav="<本页 nav key>"
  onNavChange={(key) => {
    const slug = NAV_PAGE_MAP[key];
    if (slug && slug !== CURRENT_SLUG) goToWorkshopDemo(slug);
  }}
>
  ...
</HuxuanLayout>

> dumi 文档站路由是 /workshop/，独立模板路由是 /。goToWorkshopDemo 同时兼容这两种环境。

接口约定（来自 huxuan.qq.com）

互选所有接口都需要 Account_id HTTP header（不是 cookie），光有 cookie 调用会报 ret: 100012。

curl -H "Cookie: <cookie>" \
     -H "Account_id: <账号id>" \
     -H "Referer: https://huxuan.qq.com/trade/<...>" \
     -H "Origin: https://huxuan.qq.com" \
     "https://huxuan.qq.com/cgi-bin/<path>"

• base 路径：/cgi-bin/
• 大多数读接口是 GET（如 /advertiser/marketing_activity/map）
• 列表/详情接口是 POST，body 为 JSON（如 /advertiser/marketing_activity/list_published_marketing_activities）
• ret: 100005 = 未登录，ret: 100012 = 登录态变化（缺 Account_id、cookie 失效或 IP 变化）

知识查询

当用户只是提问（不是要创建/审查/修复），本 skill 直接回答，不转发。

已有 huxuan workshop 页面

slug 与文件名一一对应（都以 huxuan- 前缀），见 references/workshop/workshopModules.ts：

每个页面完全自包含：内置 HuxuanLayout + 业务内容 + mock 数据（小数据 inline / 大数据 CDN fetch）。详见 p2-page-catalog/GUIDE.md。

创建项目

当用户意图为创建新项目时，从 references/ 目录组装一个基于 one-design-next 的完整项目。

**强制规则：必须使用 Vite + React + TypeScript + Tailwind CSS + one-design-next。

所有互选页面必须以 HuxuanLayout 组件为页面壳。**

处理流程

1. 读取 MANIFEST：第一步 Read references/MANIFEST.json，里面有完整的 scaffold / pages / requiredDeps 清单
2. 推断项目名：从用户描述提取（如"创建互选首页"→ huxuan-app），无法推断时用 huxuan-app
3. 判断复制范围：
• 用户要全部页面 → 复制全部 7 个 huxuan workshop（见「全量复制」）
• 用户指定了具体页面（如"营销日历"）→ 按 MANIFEST 只复制该页面（见「按需复制」）
4. 创建项目目录，组装 scaffold + 选定的 workshop
5. 安装依赖：pnpm install（只需公网 npm，无腾讯内部源依赖）
6. 告知用户：
• npm run dev 启动
• 访问 http://localhost:5173/（如 /huxuan-home）

组装注意事项

1. 复制 7 个 huxuan workshop：references/workshop/huxuan-*.tsx → src/workshop/
2. 复制 workshopModules.ts：references/workshop/workshopModules.ts → src/workshop/
3. 复制全部 blocks：references/blocks/ → src/blocks/（CardTabs / CheckTags / DhxShowCaseCard / DhxMarketingCalendar / CustomColumnDrawer）
4. 不需要复制 data（小数据 inline；大数据用 CDN fetch，运行时拉取）
5. 不需要复制 data（小数据 inline；大数据用 CDN fetch，运行时拉取）

全量复制（一键命令）

SKILLS_DIR="<skills目录路径>/huxuan"

cp "$SKILLS_DIR/references/scaffold/vite.config.ts" .
cat > .npmrc << 'EOF'
auto-install-peers=true
strict-peer-dependencies=false
EOF
mkdir -p src/pages src/workshop src/blocks

cp "$SKILLS_DIR/references/scaffold/main.tsx" src/
cp "$SKILLS_DIR/references/scaffold/app.css" src/
cp "$SKILLS_DIR/references/scaffold/App.tsx" src/
cp "$SKILLS_DIR/references/scaffold/vite-env.d.ts" src/
cp "$SKILLS_DIR/references/scaffold/pages/"*.tsx src/pages/

cp "$SKILLS_DIR/references/workshop/"*.tsx src/workshop/
cp "$SKILLS_DIR/references/workshop/"*.ts src/workshop/
cp "$SKILLS_DIR/references/blocks/"*.tsx src/blocks/

按需复制（用户只要某些页面）

1. 读 references/MANIFEST.json → 找到 pages.huxuan-
2. scaffold 全部复制（同上）
3. 只复制 workshop/huxuan-.tsx
4. 根据 MANIFEST 里的 pages..usesBlocks 复制对应 block 到 src/blocks/
5. 修剪 workshopModules.ts 只保留这个 slug

> 互选页面间互不依赖，删一个不影响别的。

slug 依赖表（按需复制时务必参考）

> ⚠️ 不要"为保险全拷"——历史 trace 多次出现「cp 全部 7 个 workshop → echarts-for-react 没装 → vite 启动失败 → kill 重启 → 删文件 → 再启动」的循环，浪费 3+ 分钟。

> 用户明确只要某 slug 时，按表精准 cp。

完成状态协议

每个 skill 完成后，报告以下状态之一：

涉及代码产出时的强约束 + 熔断机制 + 错误处理详见 constraints.md。