aicode — AI 工具展示页

基于 Vue 3 + Vite 的 AI 工具展示页：首页从 mock JSON 配置读取工具列表，以卡片网格展示；点击卡片跳转到对应的 AI 小工具页面（public/tools/ 下的静态 HTML）。

快速开始

npm install          # 安装依赖（Node >= 18）
npm run dev          # 开发预览，默认 http://localhost:5173
npm run build        # 生产构建（服务器部署）→ dist/
npm run build:docs   # 生产构建（GitHub Pages 部署）→ docs/
npm run preview      # 预览 dist 产物
npm run preview:docs # 预览 docs 产物

目录结构

├─ index.html                 # 入口 HTML
├─ vite.config.js             # Vite 配置（base '/'，docs 构建用相对 base）
├─ public/
│  ├─ mock/
│  │  └─ tools.json           # 工具配置（名称、路径等）
│  ├─ tools/                  # AI 小工具静态页面
│  │  ├─ common.css           # 工具页共享样式
│  │  ├─ common.js            # 共享脚本（sleep / typewriter / setStatus 等）
│  │  ├─ json-format.html     # JSON 格式化（真实功能）
│  │  ├─ prompt-generator.html# Prompt 生成器（真实功能）
│  │  ├─ text-summary.html    # 文本摘要（真实功能）
│  │  ├─ translate.html       # 翻译助手（模拟 AI 演示）
│  │  └─ miniapp/             # 网页小游戏与工具（每项一个子目录）
│  │     ├─ snake-game/       # 霓虹贪吃蛇
│  │     ├─ pushbox/          # 推箱子 · 一
│  │     ├─ pushbox-two/      # 推箱子 · 二
│  │     ├─ knowget/          # 终端四剑客
│  │     ├─ knowget-two/      # AI 编程 Agent 图鉴
│  │     ├─ clock/            # Canvas 时钟
│  │     └─ certutil/         # CertUtil 哈希工具
│  └─ .nojekyll               # 禁止 GitHub Pages 的 Jekyll 处理
└─ src/
   ├─ main.js                 # 应用入口
   ├─ style.css               # 全局样式（含暗色主题变量）
   ├─ App.vue                 # 根组件
   ├─ api/tools.js            # 读取 tools.json 的封装
   ├─ composables/useTheme.js # 暗色/浅色主题（跟随系统 + 本地持久化）
   ├─ components/ToolCard.vue # 工具卡片组件
   └─ views/Home.vue          # 展示页（顶部导航 / 分类列表 / 版权页脚）

部署

项目全部使用相对路径设计，两种构建产物分别在各自部署场景下开箱即用，无需改配置。

1. 服务器部署（Nginx 等静态服务器）

npm run build

把 dist/ 目录整体部署到任意静态服务器（放在域名根路径即可）。

2. GitHub Pages 部署

npm run build:docs

产物输出到 docs/（资源引用为相对路径，适配 https://<user>.github.io/<repo>/ 子路径）。

1. 提交并推送 docs/ 目录（dist/ 已在 .gitignore 中，docs/ 需要入库）。
2. 打开仓库 Settings → Pages → Build and deployment → Source 选择 Deploy from a branch。
3. 分支选 main，目录选 /docs，保存。
4. 等待几分钟后访问 https://<user>.github.io/<repo>/ 即可。

提示：docs/ 是构建产物，每次改动源码后请重新执行 npm run build:docs 并提交。

如何新增一个工具

三步即可：

1. 在 public/tools/ 下新建工具页面（如 my-tool.html），可引入共享的 ./common.css 与 ./common.js。

2. 在 public/mock/tools.json 的 tools 数组里加一条配置：

   {
     "id": "my-tool",
     "name": "我的工具",
     "desc": "一句话描述",
     "icon": "🛠️",
     "category": "开发工具",
     "path": "tools/my-tool.html",
     "tags": ["标签1", "标签2"]
   }

   path 使用相对路径（不带开头的 /），这样在根路径与 GitHub Pages 子路径下都能正确跳转。

3. 刷新首页即可看到新卡片（fetch 带 no-cache，开发期无需重启）。

id 用于稳定取图标底色与列表 key；path 留空时该卡片会显示为禁用态，避免坏链。

说明

• 首页为三段式布局：顶部导航（logo + 搜索 + 暗色/浅色切换）、中间分类与工具列表、底部版权（自动获取并显示当前站点 host）。
• 主题：首次访问跟随系统 prefers-color-scheme，手动切换后记住在 localStorage（aicode-theme），刷新不闪白/闪黑。
• 工具页是 public/ 下的静态 HTML（含 miniapp/ 小游戏与工具），点击卡片为整页跳转（Ctrl/Cmd + 点击可新窗口打开），未引入 vue-router。
• 工具页均为纯前端实现，无后端依赖；translate.html 为演示用途的 mock 输出，接入真实 API 时替换其中的 fakeTranslate() 即可。
• 无障碍：全局尊重 prefers-reduced-motion；首页支持按 / 键快速聚焦搜索框；工具页主输入框自动聚焦。