# pc_nuxt 奇想宇宙 PC 端站点，基于 Nuxt 4 重构，支持 SSR / SEO。 ## 技术栈 | 类别 | 技术 | | --- | --- | | 框架 | Nuxt 4.5 + Vue 3.5 | | 渲染 | SSR（服务端渲染，开箱即用） | | 样式 | TailwindCSS | | 包管理 | pnpm | | 语言 | JavaScript（无 TypeScript） | | 后端 | ThinkJS（ai_api / ai_server，不动） | ## 前置条件 - **Node.js** >= 22.19.0（Nuxt 4.5 强制要求） - **pnpm**（全局安装：`npm install -g pnpm`） ```bash # 安装/切换 Node（如用 nvm-windows） nvm install 22.19.0 nvm use 22.19.0 ``` ## 快速开始 ```bash # 安装依赖 pnpm install # 启动开发服务器（监听局域网，端口 6888） pnpm run dev # → http://localhost:6888 # → http://<你的局域网IP>:6888 # 生产构建 pnpm run build # 预览生产构建 pnpm run preview ``` ## 目录结构 ``` pc_nuxt/ ├── app/ │ ├── app.vue # 根组件 │ ├── assets/css/main.css # TailwindCSS 入口 │ ├── composables/useApi.js # ai_api 接口封装（自动导入） │ ├── layouts/default.vue # 默认布局 │ └── pages/ # 页面（文件路由） │ └── index.vue # 首页 ├── server/api/[...].js # 服务端 API 代理 → ai_api ├── nuxt.config.js # Nuxt 4 配置 ├── package.json └── pnpm-lock.yaml ``` ## 项目关系 ``` aionline/ ├── pc_nuxt/ ← 本仓库（PC 端 Nuxt 4 重构） ├── ai_api/ ← 主 API 后端（ThinkJS，不修改） ├── ai_server/ ← AI 能力后端（ThinkJS，不修改） ├── pc/ ← 原 PC 端（Vue2 + Webpack4，逐步废弃） ├── m/ ← 移动端 H5 ├── ai_admin/ ← 管理后台 ├── ai_uniapp/ ← 跨端应用 └── ws/ ← 设备管理 ``` 各子项目**相互独立**，不共享 `node_modules`。 ## 对接后端 ### 接口封装：useApi() ```js const api = useApi() // GET 请求 const res = await api.get('/user/info', { id: 1 }) // res = { code: 0, data: {...}, list: [...], msg: 'ok' } // POST 请求（自动转 x-www-form-urlencoded） const res = await api.post('/user/login', { username, password }) ``` ### 响应约定（沿用 ThinkJS） | code | 含义 | | --- | --- | | `0` | 成功，数据在 `data` / `list` 字段 | | `1000` | 业务异常，错误信息在 `msg` | | `1009` | 登录失效，客户端清除登录态并打开当前页面的登录弹窗 | ### 配置后端地址 ```bash # 环境变量（优先级最高） NUXT_PUBLIC_API_BASE=http://192.168.1.100:8360 pnpm run dev # 未设置时，开发环境默认使用 http://192.168.31.168:16888 # 也可以复制 .env.example 为 .env 后修改；不要直接修改 nuxt.config.js ``` 生产环境默认使用 `https://api.aionline.cc`。如需覆盖，必须使用公开的 HTTP(S) 地址： ```bash NUXT_PUBLIC_API_BASE=https://api.aionline.cc ./restart.sh ``` `restart.sh` 会在拉取和构建前校验该地址，拒绝 localhost、环回地址和局域网地址；同一变量会同时传入 Nuxt 构建、Nitro 运行时和 PM2，避免 SSR 与浏览器代理使用不同后端。 发布脚本也会拒绝 `NODE_TLS_REJECT_UNAUTHORIZED=0`，生产机应保持 TLS 证书校验开启。 ### 服务端代理 前端调 `/api/**` 会自动代理到 `ai_api`，路径示例： ``` $fetch('/api/user/info') → server/api/[...].js 代理转发 → http://localhost:8360/user/info（自动附带 cookie） ``` ## 主题（亮色 / 暗色） 亮色是基准，暗色是同一套结构换一套取值，切换由页头的 `ThemeToggle` 组件完成。 - 颜色令牌集中在 `app/assets/css/theme.css`：`:root` 是亮色（取值与改造前的硬编码色值完全一致），`html.dark` 是暗色。 - 切换基于 `@nuxtjs/color-mode`（`@nuxt/ui` 自带）：在 `` 上加 `.dark` 类，偏好写入 cookie `ai-color-mode`；默认亮色、不跟随系统（见 `nuxt.config.js` 的 `colorMode`）。 - **写样式时不要再写死色值**，用令牌： ```html
``` 常用令牌：`--c-ffffff` 面板底、`--c-f3f7fb` 页面底、`--c-e8eef7` 边框、`--c-172033` 标题、`--c-4b5b70` 正文、`--c-8a97a8` 弱文字、`--c-0b8cff` 品牌色、`--c-eef7ff` 品牌浅底、`--c-ink` 亮暗一致的深色实底。阴影颜色用 `--sh-*`。 - 如果新页面不小心又写了硬编码色值才，跑一次 codemod 补齐： ```bash node scripts/gen-theme.mjs # 替换源码 + 重新生成 theme.css（可重复执行） node scripts/gen-theme.mjs --dry # 只看影响范围 ``` 脚本按「该色值主要当文字（text）、当描边（border / ring / divide）还是当底色（surface）」决定暗色映射方向 —— 描边必须映射成比面板更亮的线色，否则暗色下边框会和面板同色、直接看不见。关键层级的暗色取值在脚本的 `CURATED` 里人工校准（品牌蓝钉死不变）。 - 阴影：亮色是「浅灰蓝 + 极低透明度」，暗色下换成近黑并提高透明度；卡片边缘主要靠描边和「面板 / 页面底」明度差来区分。`main.css` 里还给「有投影的白底卡片」在暗色下补了一条 `outline` 内描边，补回亮色靠投影撑出的那圈边缘。 - `text-white`、`bg-white/10`~`/30`、`bg-black/*` 这类叠在品牌渐变上的装饰色不参与换算，保持原样。 ## 约定 - **纯 JS**：不用 TypeScript，`.vue` 文件使用 `