Frontend Static Build · v1
供需匹配智能体 · 前端静态页面
依据《产品方案》《UI 设计规范》《页面设计稿》实现。纯 HTML + CSS + 原生 JS，零依赖、零构建，双击任意页面即可打开； 移动端优先，≥768px 两列，≥1024px 重排为桌面端（左侧筛选栏 / 右侧固定操作卡）。
搜索 + 分类横滚 Chip + 筛选抽屉 + 已选条件行 + 卡片流 + FAB。支持四态、加载更多、移动端滑动取消收藏。
正文 + 发布者卡 + 结构化信息卡 + 标签全量展示 + 底部操作栏三态（需申请 / 收藏后可见 / 公开）、额度用尽、已关闭。
Step 1 只写一段大白话 → 「AI 帮我整理」→ Step 2 字段逐条出现并带「AI 建议」标记，改动即去标记；含完整校验与提交结果。
状态 Tab + 备注块 + 双操作按钮 + 管理模式（多选、批量取消收藏、移动分组）+ 3 秒撤销。
三宫格统计条 + 状态 Tab + 数据条 + 编辑/刷新/关闭/删除（含状态 × 可用操作矩阵与确认弹窗）+ 草稿卡样式。
今日额度条 + 推荐理由条（必含具体事实）+ 不感兴趣（滑出折叠 + 撤销）+ 看完 / 无标签 / 无匹配三种收尾态。
状态调试器：四态可演示
每个页面右下角都有「四态调试」按钮，可即时切换：
- 加载中 — 骨架屏（
aria-busy+aria-live），筛选栏保留 - 有数据 — 正常列表 / 详情 / 表单
- 空态 — 分场景文案（广场还区分「筛选无结果」与「全站无需求」）
- 错误 — 整区错误 + 「重新加载」，列表页底部另有底部错误条 + 「点击重试」
- 未登录 — 收藏 / 建联 / 发布时唤起登录拦截半屏弹窗
页面级专有开关：详情页联系方式三态与建联额度用尽 / 需求已关闭；发布页提交成功 / 失败 / AI 不可用；收藏与我的发布空态；匹配推荐无兴趣标签 / 今日无匹配。
布局与配色
- 主色
--brand-700 #0F766E（深青）+ 强调色--accent #F59E0B（琥珀，仅收藏激活态） - 中性色 9 阶；正文
--n-700，辅助--n-500，--n-400只允许出现在 placeholder 与禁用态 - 分类色板 8 色一色一分类，且始终「颜色 + 文字」双通道，不靠颜色单独传达信息
- 间距 4px 基准（4/8/12/16/20/24/32/40），无 13px、17px 等非标值
- 圆角 / 阴影
--r-xs…--r-xl / --r-full、--sh-xs…--sh-lg，同层级不混用两种阴影 - 断点 320–767 单列 → ≥768 两列 → ≥1024 桌面侧栏（240px）→ ≥1440 三列
- 热区 所有可点元素 ≥44×44px（收藏图标视觉 22px，热区用 padding 撑到 44px）
- 动效 120 / 200 / 280 / 400ms，只动 transform 与 opacity，并整体尊重
prefers-reduced-motion
文件结构
frontend/ ├─ index.html 本页（页面导航与规范速查） ├─ pages/ P1–P6 六个页面 │ ├─ square.html detail.html publish.html │ └─ favorites.html my-demands.html match.html ├─ styles/ │ ├─ tokens.css 设计 Token（唯一事实来源，无硬编码色值） │ ├─ base.css reset + 全局排版 + 滚动条 + 无障碍工具类 │ ├─ components.css 组件库（按钮 / 表单 / Chip / Badge / 卡片 / 弹层 / 骨架 / 空错态） │ └─ pages.css 页面级布局与响应式重排 └─ js/ ├─ data.js 演示数据 + 图标 + 状态枚举（与后端枚举一致） ├─ ui.js 组件渲染器 + Toast / 抽屉 / 弹窗 / 登录拦截 ├─ app.js 应用外壳（导航 / TabBar / FAB / 筛选栏 / 调试器）+ 广场页 └─ pages2.js 详情 / 发布 / 收藏 / 我的发布 / 匹配推荐 preview/ 资源内联的评审版（由 frontend/ 生成，可单文件双击打开）
开发与联调请用 pages/ 下的模块化页面（共用 styles/ 与 js/）；
需要单独发给他人预览时用 preview/ 下的内联版。
组件复用要点
DemandCard 用同一套结构承载四种场景，靠 variant 开关差异，避免后期视觉碎片化：
- square 广场：标签最多 3 个 + 收藏按钮 + 时间与收藏数
- fav 收藏：隐藏标签行与收藏按钮，新增备注块与「加备注 / 获取联系方式」按钮组
- mine 我的发布：底部时间换成浏览 / 收藏 / 被匹配三项数据 + 编辑 / 刷新 / 关闭按钮组
- match 匹配推荐：理由条与卡片拼接为一体，底部换「不感兴趣 / 查看并联系」
状态徽章、分类角标、收藏按钮同样是跨页复用组件，颜色与文案一一固定映射，不自增不轮换。
仍未确认的问题（沿用设计文档标注，未自行假设）
- Q1 品牌色：现用深青 #0F766E，替换
tokens.css的--brand-*十个变量即可全局生效 - Q2 一级分类清单：现用 8 个通用分类占位，需替换为真实分类
- Q3 标签机制：按「预设词库 + 允许自定义」实现，需确认
- Q4 建联额度：按「每日免费 3 次、超出置灰并说明原因」实现
- Q5 游客权限：按「可浏览列表与详情，收藏与建联时拦截登录」实现
- Q6 运营后台：未纳入本次范围
- Q15 技术栈：本次交付为标准 H5 静态页；若最终为微信小程序，顶部导航与安全区需按小程序规范二次适配