全球网站汇总工具：设计说明

目标

在 JiangYu 网站新增“全球网站汇总”工具。访客可以按国家/地区和分类查找知名、常用的网站，也可以按公司查看其子公司和产品网站。第一版使用随站点发布的本地目录数据，不依赖第三方 API 或服务端。

首批国家/地区为：中国、美国、日本、韩国、英国、法国、德国、新加坡、印度、加拿大、澳大利亚。首批分类包括影视、网络购物、找工作、AI、云计算、短视频与直播、社交与搜索。中国的网络购物分类不收录京东。

用户体验

工具页提供两个互斥的浏览视图：

1. 按国家找网站：国家选择器默认中国；分类标签默认“全部”；关键词可匹配站点名、说明和所属公司。结果卡显示站点、简介、分类与公司，并在新标签页打开官网。
2. 按公司找产品：公司选择器展示 Google、Meta、Microsoft、Amazon、字节跳动、阿里巴巴、腾讯等首批公司。选中后以一层清晰的树展示母公司、子公司（如适用）和产品官网链接。

两个视图均在浏览器本地过滤，切换语言时保留当前国家、分类、关键词和公司选择。站点链接统一使用 target="_blank" 和 rel="noopener noreferrer"。

数据模型

新增 assets/js/global-sites-data.js，使用一个独立、可被 Node 测试的 UMD 数据模块。模块导出以下只读集合：

• countries：id、中文/英文名称；
• categories：稳定 id、中文/英文名称；
• companies：id、中文/英文名称、官网；
• sites：id、countryIds、categoryIds、中文/英文名称与说明、URL、可选 companyId；
• companyProducts：companyId、产品/子公司名称、说明、URL、可选父级名称。

网站记录可以属于多个国家或分类，因此不会为同一官网复制数据。新国家、分类、公司或产品只需添加记录；页面逻辑不依赖硬编码的站点名称。

数据只收录用户可公开访问的官方网站和产品官网。站点“知名/流行”是编辑精选，不表示实时排名或商业背书。数据页面会显示相应说明。

页面与组件

新增以下文件：

• tools/global-sites.md：页面结构、工具说明和两个浏览视图；
• assets/js/global-sites.js：筛选、渲染、状态保存和语言切换处理；
• assets/js/global-sites-data.js：目录数据与数据查询辅助方法；
• tests/global-sites.test.js：关键目录约束测试。

现有文件将最小化更新：

• assets/js/i18n.js：工具文案的中文与英文，并让其他现有语言回退为英文；
• assets/css/style.css：筛选栏、分类标签、网站卡片与公司树的响应式样式；
• index.md、tools.md：新增工具入口。

状态、异常与边界

筛选状态使用 localStorage 保存；读取损坏数据时回退到默认状态。没有匹配站点时显示清楚的空状态，而不是空白页面。无效 URL 不渲染为可点击链接。数据模块在加载失败时显示可理解的错误状态。

第一版不提供用户投稿、实时访问量/排名、登录、收藏同步、外部爬取或广告排序。这些能力会引入服务端、审核或合规要求，超出静态 GitHub Pages 工具的当前范围。

验证标准

实现前先编写数据测试，并先观察其因模块不存在而失败。完成后至少验证：

1. 每个首批国家有网站记录；
2. 每个首批分类有网站记录；
3. 中国网络购物记录中不含京东域名；
4. 核心公司都有至少一个产品记录；
5. 数据去重、筛选和 URL 安全校验通过；
6. JavaScript 语法、页面脚本接入、首页与工具箱入口、国际化接入通过检查；
7. Git diff 无空白错误。

交付

完成后将新增工具和测试提交到 main 并推送，由 GitHub Pages 自动部署。交付信息会说明数据为首批精选目录，并注明后续扩展只需修改数据模块。