面向开发者的免费在线小工具集：JSON、颜色、时间戳、编解码、密码、UUID、文本处理等，单仓库维护，首页统一入口。深色界面，中英文切换，计算在浏览器本地完成，无需登录。
在线访问（GitHub Pages）：https://dsun6652-oss.github.io/easy-tools-hub/
（与 package.json 的 homepage 一致；若更换域名或子路径，请同步修改下方 SEO 相关文件。）
| 路径 | 说明 |
|---|---|
/ |
首页，全部工具入口 |
/json |
JSON 格式化、压缩、校验、转 CSV |
/color |
HEX / RGB / HSL 互转与取色 |
/timestamp |
时间戳 ↔ 北京时间 |
/url |
URL 组件编码 / 解码（encodeURIComponent） |
/base64 |
UTF-8 文本 ↔ Base64 |
/password |
随机密码（长度与字符集可选） |
/uuid |
UUID v4 批量生成（1～10 条） |
/text-case |
文本大小写：大写、小写、首字母、驼峰 |
/text-diff |
双栏文本对比（行级 + 词/字级高亮） |
生产环境 base 为 /easy-tools-hub/，完整 URL 形如：https://dsun6652-oss.github.io/easy-tools-hub/json。
- React 18、React Router 6、Vite 5、TypeScript
- 深色主题 CSS 变量（
theme.css） - 国际化：
I18nContext+ 各工具locales.ts+siteLocales.ts
src/pages/Home.tsx：首页与工具卡片src/toolsRegistry.tsx：路由注册表（路径、懒加载组件）src/tools/<工具名>/：各工具页面、locales.ts；仅在无可复用类名时再增加专属 CSS（如 JSON 高亮、颜色面板）src/shared/：公共能力styles/tool-page.css：工具页布局（main.tsx已引入）。根节点使用eth-tool-page，优先使用.toolbar、.editor-container、.panel*、.eth-tool-options、.eth-tool-check等（见该文件顶部注释）i18n/I18nContext.tsx：全局语言（localStorage键easy-tools-hub:lang）与I18nProvideri18n/siteLocales.ts：首页、顶栏、工具卡片等多语言文案i18n/useToolLocales.ts：各工具locales.ts与全局语言绑定，得到tcomponents/LangSwitch.tsx、ToolPageHeader.tsx、ToolFooter.tsx、ToolErrorBanner.tsxhooks/useCopyWithFeedback.tstheme.css：全局主题变量
public/robots.txt、public/sitemap.xml：爬虫与站点地图（见下文 SEO）index.html：标题、描述、Open Graph、Twitter Card、JSON-LD
为便于搜索引擎与社交预览，已做如下配置（站点根 URL 默认为 https://dsun6652-oss.github.io/easy-tools-hub/）：
| 文件 | 作用 |
|---|---|
index.html |
<title>、<meta name="description">、<meta name="keywords">、canonical、Open Graph、Twitter Card、JSON-LD（WebSite + ItemList 工具列表） |
public/robots.txt |
Allow 与 Sitemap 地址 |
public/sitemap.xml |
首页及各工具路径的 loc（构建后随 public/ 拷贝到 dist 根目录） |
更换部署地址时，请批量替换：
index.html内所有https://dsun6652-oss.github.io/easy-tools-hubpublic/robots.txt、public/sitemap.xmlpackage.json的homepage（若使用 gh-pages）
可选后续步骤：
- 在对应搜索引擎站长工具中提交
sitemap.xml - 如需验证站点所有权，在
index.html<head>中加入平台提供的meta标签 - 单页应用路由依赖前端渲染，重要着陆页可再考虑预渲染或静态快照（本仓库当前未接入）
npm install
npm run dev- 开发：
vite默认base为/ - 生产构建：
vite.config.ts中base为/easy-tools-hub/，与homepage一致（GitHub Pages 子路径）；npm run build会先执行tsc --noEmit做类型检查
npm run build
npm run preview部署：npm run deploy（依赖 gh-pages，将 dist 推到 gh-pages 分支）。
将同一套页面打成可离线使用的扩展：点击工具栏图标会在新标签页打开完整站点（HashRouter，路由形如 index.html#/json）。
npm run build:extension- 构建产物在
dist-extension/（含manifest.json、background.js与 Vite 输出）。 - 打开 Chrome → 扩展程序 → 加载已解压的扩展程序 → 选择
dist-extension文件夹。 - 点击扩展图标即可新开标签使用。
相关文件：
| 文件 | 说明 |
|---|---|
vite.extension.config.ts |
base: './'、outDir: dist-extension、不拷贝站点用 public |
.env.chrome |
VITE_CHROME_EXTENSION=true，触发 App.tsx 使用 HashRouter |
extension/manifest.json |
MV3；无 default_popup，由 background.js 响应点击开新标签 |
extension/background.js |
chrome.tabs.create 打开 index.html |
scripts/copy-extension-files.mjs |
构建后把 manifest / background 复制进 dist-extension |
上架 Chrome 网上应用店时需补充 icons、隐私说明等；本地加载可不配置图标（使用默认拼图图标）。扩展内若需自定义图标，可在 extension/icons/ 放置 PNG 并在 manifest.json 中声明。
- 新建目录
src/tools/my-tool/，默认导出页面组件（可参考现有工具）。 - 添加
locales.ts（zh/en），在组件内使用useToolLocales(locales)得到t。 - 在
src/shared/i18n/siteLocales.ts的zh.tools/en.tools下增加与路由path一致的 key 及title、description。 - 根节点使用
<div className="eth-tool-page">，配合ToolPageHeader/ToolFooter，并优先复用tool-page.css中的类名。 - 在
src/toolsRegistry.tsx的toolRoutes中增加path与lazy(() => import(...))。 - SEO：在
public/sitemap.xml与index.html的 JSON-LDItemList中追加新工具 URL（保持numberOfItems与实际条数一致）。 - 若需新的 npm 依赖，在本仓库根目录安装。
- Chrome 扩展：一般无需改扩展配置；若改
manifest版本号，请编辑extension/manifest.json后重新npm run build:extension。
与前端规范相关的 skills.sh 技能安装在 项目内 .agents/skills/，不使用 npx skills add … -g，避免与其它项目全局规范冲突。
在本仓库根目录执行 npx skills list 可查看当前技能；全局列表为 npx skills list -g（应为空）。