# toolry

社区驱动的工具榜单站（**界面为英文**）：按日 / 周 / 月 / 年发现、投票并提交 **AI 工具** 与 **MCP 服务器**。

- 产品形态参考 [uneed.best](https://www.uneed.best/)（工具投票目录）
- 视觉风格参考 [deepseek.com](https://www.deepseek.com/)：悬浮药丸导航（滚动后玻璃化并弹性收缩居中）、品牌蓝 `#4D6BFE`、蓝紫渐变点缀、全站药丸控件、大圆角卡片
- 技术栈：**纯 HTML + CSS + JavaScript**，零依赖、零构建，双击 `index.html` 即可运行

## 功能

| 模块 | 说明 |
| --- | --- |
| Launchpad 榜单 | 垂直列表布局（细分隔线），Daily / Weekly / Monthly / Yearly 四档周期按投票数排名，前三名序号高亮 |
| MCP Hub | 一键切换到 MCP 服务器专属榜单（`?view=mcphub`），同样支持周期与分类筛选 |
| 导航 | 左→右：Launchpad（rocket）、MCP Hub（bolt）、分类（category，二级下拉菜单）、搜索、Submit、Account；无边框、图标前置，全部 Tabler Icons |
| 分类下拉 | 二级菜单选择分类，与周期、搜索叠加筛选 |
| 搜索 | 导航栏内搜索框，名称 / 简介 / 标签模糊匹配，支持 `/` 快捷键聚焦 |
| 投票 | 行内投票 / 撤票，状态持久化，行与弹窗同步 |
| 详情弹窗 | 完整介绍、票数、外链；MCP 额外展示安装命令（一键复制）与传输类型 |
| 提交页 | 工具 / MCP 双类型表单，MCP 专属字段（安装命令、传输类型），内联校验 + 字数统计 + 标签建议 |
| 站点认证 | 提交前必须在对方站点挂 toolry 徽章：表单生成与 URL 绑定的专属校验码（`data-toolry-badge`）与嵌入代码，点 Verify 抓取对方页面校验（同源直连，跨站走公共 CORS 代理），未认证不可提交；通过的条目在列表与弹窗显示蓝色 ✓ Verified 徽标 |
| 深浅色 | 跟随系统 + 手动切换，全站持久化 |
| 可访问性 | 键盘导航、焦点圈定、aria 标签、reduced-motion 适配 |

## 目录结构

```
toolry/
├── index.html      # 榜单首页
├── submit.html     # 提交页（含站点认证）
├── badge.svg       # 外站嵌入的 "Featured on toolry" 徽章
├── DESIGN.md       # 设计系统契约（字体/字号/圆角/颜色/动效刻度，改动样式前先读）
├── css/
│   └── style.css   # 样式（令牌与 DESIGN.md 一一对应）
└── js/
    ├── common.js   # 主题 / Toast / 格式化 / 剪贴板 / 徽章校验码
    ├── data.js     # 种子数据（12 个工具 + 6 个 MCP）与分类表
    ├── app.js      # 首页：榜单 / 筛选 / 搜索 / 投票 / 弹窗
    └── submit.js   # 提交表单：校验 / 标签 / 站点认证 / 存储
```

## 设计审计

按 [impeccable.style](https://impeccable.style/) 的 66 条 slop 规则与 WCAG AA 做过一轮系统审计并修复：

- 移除 Hero 眉标药丸、统计数字行、渐变文字、径向光晕背景（四条 AI 味高发规则）
- 全站字号 / 圆角归一到 `DESIGN.md` 刻度（功能文本 ≥12px，卡片圆角上限 16px，药丸仅用于交互件）
- 颜色全部实测对比度：白字按钮底改 `#3D5AF5`（5.28:1）、辅助文字 `#5F6B7C`（5.4:1）、错误 `#C93A3F`、新徽标 `#0A7A54`
- 收缩动画去掉过冲（deepseek 的 spring 阻尼比 >1，原贝塞尔曲线过冲是错的）
- 触屏交互目标 ≥44px、`prefers-reduced-transparency` 降级、标题层级不跳级、文案去 em-dash
- 回归测试 43 项断言全过、控制台零报错（Playwright + Chromium）

## 本地运行

任意静态服务器均可：

```bash
# 方式一：Python
python3 -m http.server 8080
# 打开 http://localhost:8080

# 方式二：Node
npx serve .
```

也可以直接双击 `index.html` 用浏览器打开（全部功能可用，脚本为传统非模块加载，无 CORS 问题）。

## 数据说明

纯前端演示方案，数据分两层：

- **种子数据**：`js/data.js` 中的 `TOOLRY_SEED`，改这里即可自定义收录内容
- **用户数据**：浏览器 `localStorage`
  - `toolry:subs` — 社区提交的条目（提交后立即出现在列表，带「社区提交 / 新」标记）
  - `toolry:votes` — 投票状态（`{ id: 1 }`）
  - `toolry:theme` — 主题偏好

接入真实后端时，把 `app.js` / `submit.js` 里的 `localStorage` 读写替换为 API 调用即可，渲染层不用动。

## 深链

- `index.html#seed-deepseek` — 直接打开某条目的详情弹窗
- `index.html?view=mcphub` — 首屏即进入 MCP Hub 榜单
- 种子数据的日期按「相对今天 N 天」生成（`daysAgo` 字段），保证任意时间打开 Daily / Weekly / Monthly / Yearly 各档榜单都有内容可排名