Não pode escolher mais do que 25 tópicos
Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
leiyun
94b8265a85
|
há 1 mês | |
|---|---|---|
| app | há 1 mês | |
| public | há 1 mês | |
| scripts | há 1 mês | |
| server/api | há 1 mês | |
| .env.example | há 1 mês | |
| .gitignore | há 1 mês | |
| README.md | há 1 mês | |
| ecosystem.config.cjs | há 1 mês | |
| mise.toml | há 1 mês | |
| nuxt.config.js | há 1 mês | |
| package.json | há 1 mês | |
| pnpm-lock.yaml | há 1 mês | |
| pnpm-workspace.yaml | há 1 mês | |
| restart.sh | há 1 mês | |
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 |
登录失效，客户端清除登录态并打开当前页面的登录弹窗 |
配置后端地址
# 环境变量（优先级最高）
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) 地址：
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自带）：在<html>上加.dark类，偏好写入 cookieai-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：开发服务器，监听所有网口（支持局域网访问）