leiyun 64b466469e feat: migrate PC Nuxt AI tool pages		1 month ago
app	feat: migrate PC Nuxt AI tool pages	1 month ago
public	feat: migrate PC Nuxt AI tool pages	1 month ago
scripts	feat: migrate PC Nuxt AI tool pages	1 month ago
server/api	feat: migrate PC Nuxt AI tool pages	1 month ago
.gitignore	init: pc_nuxt initial commit	1 month ago
README.md	feat: migrate PC Nuxt AI tool pages	1 month ago
mise.toml	feat: migrate PC Nuxt AI tool pages	1 month ago
nuxt.config.js	feat: migrate PC Nuxt AI tool pages	1 month ago
package.json	init: pc_nuxt initial commit	1 month ago
pnpm-lock.yaml	init: pc_nuxt initial commit	1 month ago
pnpm-workspace.yaml	init: pc_nuxt initial commit	1 month ago

README.md

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）

# 安装/切换 Node（如用 nvm-windows）
nvm install 22.19.0
nvm use 22.19.0

快速开始

# 安装依赖
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()

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`	登录失效，客户端自动跳转 `/login`

配置后端地址

# 环境变量（优先级最高）
API_BASE=http://192.168.1.100:8360 pnpm run dev

# 或直接修改 nuxt.config.js 中的 runtimeConfig.public.apiBase

服务端代理

前端调 /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 自带）：在 <html> 上加 .dark 类，偏好写入 cookie ai-color-mode；默认亮色、不跟随系统（见 nuxt.config.js 的 colorMode）。
写样式时不要再写死色值，用令牌：
```

<div class="bg-[var(--c-ffffff)] text-[var(--c-172033)] border-[var(--c-e8eef7)]">

<div class="bg-white text-[#172033] border-[#e8eef7]">
```
常用令牌：--c-ffffff 面板底、--c-f3f7fb 页面底、--c-e8eef7 边框、--c-172033 标题、--c-4b5b70 正文、--c-8a97a8 弱文字、--c-0b8cff 品牌色、--c-eef7ff 品牌浅底、--c-ink 亮暗一致的深色实底。阴影颜色用 --sh-*。
如果新页面不小心又写了硬编码色值才，跑一次 codemod 补齐：
```
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 文件使用 <script setup>
SEO：每个页面必须写 useSeoMeta() 设置 title / description
样式：统一用 TailwindCSS utility class，避免写裸 CSS；颜色一律走上面的主题令牌
就近一致：复用 composables / 组件，不引入功能重复的新库
端口 6888：开发服务器，监听所有网口（支持局域网访问）