切换到 pnpm 工作流,补齐 .gitignore 与 vendor 拆分

- 根目录、zhican/、miniprogram/ 三层 .gitignore 就位
- 删除 package-lock.json,仓库统一追踪 pnpm-lock.yaml
- vite.config.ts 拆出 vue-vendor(vue/vue-router/pinia);
  ant-design-vue 体积~1MB,继续按路由 code-split,不入 manualChunks
- 新增根 CLAUDE.md 记录仓库结构、常用命令、antd 类型陷阱、
  构建门禁、vendor 拆分策略等

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
SkyJourney
2026-04-08 17:25:26 +08:00
co-authored by Claude Opus 4.6
parent 077495a401
commit c8a18c9ec3
7 changed files with 2259 additions and 3239 deletions
+23
View File
@@ -0,0 +1,23 @@
# ============ OS / 系统垃圾 ============
.DS_Store
Thumbs.db
desktop.ini
# ============ 编辑器 / IDE ============
.vscode/
.idea/
*.swp
*.swo
*~
# ============ 工具本地数据 ============
# Claude Code 个人设置(共享设置可放 .claude/settings.json
.claude/settings.local.json
# Serena MCP 工具数据
.serena/
# ============ 临时/备份 ============
*.bak
*.orig
*.tmp
*.log
+132
View File
@@ -0,0 +1,132 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## 仓库结构
这是一个**多端单仓**项目,git 根目录下包含:
- `tcm-diagnosis.html` — 独立的中医诊断单页 HTML(与下面项目无依赖关系)
- `zhican/` — 智能餐养系统主项目,使用 npm workspaces 管理
- `admin/` — Vue 3 + Vite + TypeScript 后台管理端(workspace 成员)
- `miniprogram/` — 原生微信小程序(无构建步骤,由微信开发者工具直接打开 `project.config.json`
注意:执行 npm 脚本前必须先 `cd zhican/`,根目录没有 `package.json`
## 常用命令
**包管理器统一使用 pnpm**`package-lock.json` 已被 `.gitignore`,禁止提交 npm/yarn 锁文件。仓库追踪的锁文件是 `zhican/admin/pnpm-lock.yaml`
进入 `zhican/admin/` 目录执行(推荐):
```bash
pnpm install # 安装依赖
pnpm run dev # 启动开发服务器(vite,端口 3000)
pnpm run build # 类型检查 + 构建(vue-tsc --noEmit && vite build),产物在 dist/
pnpm run preview # 本地预览构建产物
```
也可在 `zhican/` 根目录用 workspace 命令 `pnpm run admin:dev` / `admin:build`
> 由于 `zhican/package.json` 用的是 npm workspaces 字段而非 `pnpm-workspace.yaml`,跨 workspace 命令的稳定性不如直接进 admin 子目录。一般操作建议进 `zhican/admin/`。
小程序端无构建步骤,使用微信开发者工具导入 `zhican/miniprogram/` 目录调试。
## 部署形态(H5 构建能力)
- **admin**:标准 Vite 项目,`npm run admin:build` 输出 `admin/dist/``index.html` + 静态 chunk),可直接部署到任意静态服务器/Nginx/对象存储
- **miniprogram****原生微信小程序,无法直接构建为 H5**。它使用 `.wxml` / `.wxss` / `wx.*` API 和 `app.json` tabBar,运行时绑定在微信宿主上。要得到浏览器可访问的 H5 版本必须迁移到 uni-app / Taro 等跨端框架重写,不是"加个构建脚本"就能完成
- **`tcm-diagnosis.html`**:单文件 HTML,无构建,直接打开或托管即可
## admin 后台架构
技术栈:Vue 3 (`<script setup>`) + Vite 6 + TypeScript + Pinia + vue-router 4 + Ant Design Vue 4。
### 自动导入与按需组件
`vite.config.ts` 配置了两个 unplugin
- `unplugin-auto-import`:自动注入 `vue` / `vue-router` / `pinia` 的 API`ref``useRouter``defineStore` 等无需手动 import),类型声明写入 `src/auto-imports.d.ts`
- `unplugin-vue-components` + `AntDesignVueResolver`:按需注册 ant-design-vue 组件,类型声明写入 `src/components.d.ts``importStyle: false`,依赖 antd 自带样式)
新增第三方库的全局 API 时需要在 `vite.config.ts``imports` 数组里登记,否则 TS 会报未定义。
### 路径与代理
- 别名 `@``src`(在 `vite.config.ts``tsconfig.json` 同步配置)
- dev server 代理 `/api``http://localhost:8080`,所以前端请求都写相对路径
- **vendor 拆分**`build.rollupOptions.output.manualChunks` 仅把 vue 全家桶(vue/vue-router/pinia)单独打包成 `vue-vendor`,其余依赖(尤其是 ant-design-vue)维持按路由代码分割。**不要把 ant-design-vue 写进 manualChunks**——它体积约 1MB,强行单 chunk 会拖累首屏;按路由懒加载更优
### 路由组织(关键)
`src/router/index.ts` 采用**扁平注册**:所有业务页平铺在 `modules` 数组里,按注释分为 5 大业务域:
- 数据概览(dashboard / business-flow
- 绿色种采(land-env、planting-monitor、harvest-storage、supplier-mgmt、procurement-mgmt
- 卫生供应(hygiene-test、raw-storage、clean-process、clean-storage、clean-internal、clean-external
- 健康生产(food-safety、recipe-plan、clean-order、clean-cabinet、clean-assemble、cook-by-order、serving-monitor、surplus-disposal、production-stats
- 营养用餐(nutrition-test、food-composition、dish-inventory、algorithm-standard、recipe-mgmt、nutrition-order、user-mgmt、meal-line、pickup-mgmt、consumption-mgmt、nutrition-mgmt、ingredient-benefit、terminal-mgmt、model-mgmt、flavor-innovation
- 系统管理(org-structure、employee-mgmt、role-mgmt、canteen-mgmt
所有业务页都是 `MainLayout.vue` 的子路由,路径无前缀(`/dashboard` 而非 `/green-planting/land-env`)。每条路由通过 `meta.menuKey` 与侧边栏菜单联动,`meta.title` 用于 `document.title`
**新增页面流程**
1.`src/views/<业务域>/<功能>/index.vue` 创建组件
2.`src/router/index.ts``modules` 数组中追加一行(保持按业务域注释分组)
3. 同步在 `MainLayout.vue` 的菜单结构里加入对应 `menuKey`
### 路由守卫与登录
`router.beforeEach` 检查 `localStorage.token`,未登录访问非 login 页则重定向到 `/login`。token 由 `src/stores/user.ts` 管理。
### 数据来源现状(重要)
**当前项目是纯交互原型,没有任何真实后端调用**。各 view 全部使用 `src/mock/data.ts` 的静态数据驱动界面。原本预留的 `src/utils/request.ts`axios 封装)和 `src/api/index.ts`(业务 API 聚合)已经清除——它们当时未被任何 view 引用,属于无主死代码。
登录流程也是原型:`router.beforeEach` 只检查 `localStorage.token` 是否存在,没有真正的鉴权请求。
**未来对接后端时**:建议沿用以下契约(这是被删除的脚手架原本约定的,可作为参考):
- 统一 axios 封装放 `src/utils/request.ts`baseURL `/api`(配合 vite `server.proxy``localhost:8080`),自动注入 `Bearer token`
- 响应拦截器统一解包后端格式 `{ code, msg, data }``code === 0` 时直接返回 `data`,否则 `message.error(msg)` 并 rejectHTTP 401 清 token + 跳 `/login`
- API 按业务域聚合到 `src/api/<域>.ts`view 里 `import { xxxApi } from '@/api/...'`**不要**在 view 里直接 import `request`,也**不要**再 `.data.data` 解包(拦截器已经解一次)
### antd-vue 4.x 类型陷阱(踩坑警示)
`vue-tsc` 在严格模式下与 antd-vue 4.x 有几个高频冲突,新增页面时请提前避开:
1. **`a-table``columns` 必须显式注解**。`fixed: 'left' | 'right'` 字面量字段不加类型会被推为宽 `string` 类型,匹配不上 antd 的 `FixedType`。规范写法:
```ts
import type { ColumnsType } from 'ant-design-vue/es/table'
const columns: ColumnsType<any> = [ /* ... */ ]
```
2. **`a-tree` 的 `tree-data` 即使配了 `field-names` 映射,静态类型也仍然要求 `DataNode` 形状(必须有 `key`**。这是 antd-vue 类型限制,运行时 fieldNames 是有效的。已采用的解法:在绑定处加 `as any` 断言(`:tree-data="(myData as any)"`),不要去污染数据结构
3. **`a-tree` 的 `@select` 回调签名**是 `(keys: Key[], info) => void`,其中 `Key = string | number`。若声明 `(keys: string[]) => void` 会编译失败,需要 `Array<string | number>` 并按需 `String(keys[0])`
4. **`a-range-picker` / `a-date-picker` 的 `v-model` 不要用 `null` 初值**。antd 类型是 `[Dayjs, Dayjs] | undefined` 而非 `| null`,写 `ref<...>(null)` 会编译失败。规范写法:`const dateRange = ref<[Dayjs, Dayjs]>()`,表单字段用 `entryDate: undefined as Dayjs | undefined`
5. **`a-progress` 的 `format` 回调参数是 `percent?: number`**,必须接受 `undefined`。写 `(p: number) => ...` 会失败,应写 `(p?: number) => (p ?? 0) + '...'`
### 构建质量门禁
- **`vue-tsc --noEmit` 是构建管线的硬性步骤**`pnpm run build` 会在 `vite build` 之前先跑),这意味着任何类型错误都会阻止构建。新增/修改代码后请本地跑一遍构建确认
- **git 钩子**:仓库根目录配置了 `.githooks/pre-commit`,当本次暂存的文件涉及 `zhican/admin/` 时自动运行 `pnpm run build`。**首次 clone 仓库后需要手动启用一次**:
```bash
cd <repo-root> && git config core.hooksPath .githooks
```
钩子若检测不到 `pnpm` 会跳过(不阻塞提交),但会在 stderr 提醒。Windows 用户需用 Git Bash 或确保 `bash` 可用
### 自动生成的类型声明(不要提交)
`src/auto-imports.d.ts` 和 `src/components.d.ts` 由 unplugin 在 dev/build 时**重新生成**,已加入 `.gitignore`。它们会随业务代码变化频繁更新,提交进 git 会反复制造无意义 diff 和合并冲突。如果发现这两个文件被意外提交,使用 `git rm --cached` 移除追踪。
## miniprogram 小程序
原生微信小程序结构(无构建链)。`app.json` 定义 4 个 tabBar 页面:吃 (`eat`) / 问 (`ask`) / 做 (`cook`) / 我 (`profile`),对应 `pages/<name>/index.{js,wxml,wxss,json}`。
小程序端目前也是纯交互原型,无任何真实接口调用。原本预留的 `utils/request.js` 同样属于无主死代码已清除。
## 业务上下文
「智能餐养系统」覆盖从种植采购到用餐消费的全链路:绿色种采 → 卫生供应(净菜加工) → 健康生产(按单烹制) → 营养用餐(点餐、取餐、营养分析)。理解某个页面的职责时优先按这条业务流向上下游追溯。
+32 -2
View File
@@ -1,7 +1,37 @@
# ============ 依赖 ============
node_modules node_modules
# 统一使用 pnpm,禁止意外提交 npm/yarn 锁文件
package-lock.json
yarn.lock
# ============ 构建产物 ============
dist dist
.DS_Store dist-ssr
*.local *.tsbuildinfo
# ============ 测试/覆盖率 ============
coverage
.nyc_output
# ============ 日志 ============
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
# ============ 环境变量 ============
.env .env
.env.* .env.*
!.env.example !.env.example
*.local
# ============ 系统垃圾 ============
.DS_Store
# ============ unplugin 自动生成的类型声明 ============
# 这些文件由 unplugin-auto-import / unplugin-vue-components 在 dev/build 时重新生成
# 提交进 git 会反复制造无意义 diff,且容易合并冲突
admin/src/auto-imports.d.ts
admin/src/components.d.ts
+2051
View File
File diff suppressed because it is too large Load Diff
+12
View File
@@ -35,4 +35,16 @@ export default defineConfig({
}, },
}, },
}, },
build: {
rollupOptions: {
output: {
// 拆分 vendor chunk
// 只提取所有路由都用到的"foundation"依赖,让 ant-design-vue 维持按路由代码分割
// —— antd 体积巨大(~1MB),强行打成单 chunk 反而拖累首屏;按路由 lazy 加载更优
manualChunks: {
'vue-vendor': ['vue', 'vue-router', 'pinia'],
},
},
},
},
}) })
+9
View File
@@ -0,0 +1,9 @@
# 微信开发者工具个人设置(每个开发者机器各异)
project.private.config.json
# 小程序 npm 构建产物
miniprogram_npm/
node_modules/
# 系统垃圾
.DS_Store
-3237
View File
File diff suppressed because it is too large Load Diff