# platform **Repository Path**: wanghuachen/platform ## Basic Information - **Project Name**: platform - **Description**: 后台管理系统 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-11-04 - **Last Updated**: 2025-11-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Platform 管理平台前端 基于 **Vue 3 + TypeScript + Vite + Tailwind CSS + Shadcn/ui** 的中后台管理平台前端工程，提供登录认证、用户管理、菜单管理、权限组管理等功能，同时集成自动导入、主题系统和完整的 UI 组件库，适合作为业务项目或平台前端基座。 ## 🛠️ 技术栈 ### 核心框架 - **Vue 3.5.22** - 渐进式 JavaScript 框架 - **TypeScript 5.9.0** - JavaScript 的超集，提供静态类型检查 - **Vite** - 下一代前端构建工具（使用 rolldown-vite） ### UI 框架与样式 - **Shadcn/ui** - 基于 Radix UI 的 Vue 3 组件库 - **Tailwind CSS 4.1.16** - 原子化 CSS 框架 - **Reka UI 2.6.0** - 无样式、可访问的 UI 原语 - **Lucide Vue Next 0.552.0** - 美观的图标库 - **Tailwind Animate CSS** - 动画效果库 - **class-variance-authority** - 组件变体管理 - **clsx** - 条件类名工具 - **tailwind-merge** - Tailwind 类名合并 ### 状态管理与路由 - **Pinia 3.0.3** - Vue 的状态管理库 - **Vue Router 4.6.3** - Vue 的官方路由管理器 ### 表单处理与验证 - **VeeValidate 4.15.1** - Vue 的表单验证库 - **Zod 4.1.12** - TypeScript 优先的模式验证 - **@vee-validate/zod** - VeeValidate 与 Zod 的集成 ### 数据处理与展示 - **@tanstack/vue-table 8.21.3** - 表格组件库 - **Embla Carousel Vue 8.6.0** - 轮播图组件 - **Vaul Vue 0.4.1** - 抽屉组件 ### 网络请求 - **Alova 3.3.4** - 轻量级请求库 ### 工具库 - **@vueuse/core 14.0.0** - Vue 组合式 API 工具集 - **Vue Sonner 2.0.9** - 通知组件 - **crypto-js 4.2.0** - 加密工具 ### 开发工具 - **ESLint 9.37.0** - 代码质量检查工具 - **Oxlint 1.23.0** - 快速的 JavaScript/TypeScript linter - **Prettier 3.6.2** - 代码格式化工具 - **vue-tsc 3.1.1** - Vue TypeScript 编译器 - **Vue DevTools 8.0.3** - Vue 开发者工具 ### 自动导入 - **unplugin-vue-components** - Vue 组件自动导入 - **unplugin-auto-import** - Vue API 自动导入 ### 其他工具 - **npm-run-all2** - 并行/串行执行 npm 脚本 - **jiti** - 动态导入工具 ## 📁 项目结构 ``` platform/ ├── public/ # 静态资源 │ └── favicon.ico # 网站图标 ├── src/ │ ├── api/ # API 接口定义 │ │ ├── auth.ts # 认证相关 API │ │ ├── index.ts # API 通用方法封装 │ │ ├── menu.ts # 菜单相关 API │ │ └── users.ts # 用户相关 API │ ├── assets/ # 项目资源 │ ├── components/ # 组件 │ │ ├── ui/ # Shadcn/ui 基础组件 │ │ ├── menu/ # 菜单相关组件 │ │ └── user/ # 用户相关组件 │ ├── composables/ # 组合式函数 │ ├── layout/ # 布局组件 │ │ ├── DefaultLayout.vue │ │ └── components/ # 布局相关组件 │ ├── lib/ # 工具库 │ │ └── utils.ts # 通用工具函数 │ ├── mock/ # 模拟数据 │ │ └── user.ts # 用户模拟数据 │ ├── router/ # 路由配置 │ │ └── index.ts # 路由定义和守卫 │ ├── stores/ # Pinia 状态管理 │ │ ├── auth.ts # 认证状态 │ │ └── counter.ts # 示例状态 │ ├── styles/ # 全局样式 │ │ └── main.css # 主样式文件 │ ├── types/ # 类型定义 │ │ ├── menu.ts # 菜单类型 │ │ └── user.ts # 用户类型 │ ├── utils/ # 工具函数 │ │ ├── crypto.ts # 加密工具 │ │ ├── index.ts # 工具函数导出 │ │ └── request.ts # 请求工具 │ ├── views/ # 页面组件 │ │ ├── Home.vue # 首页 │ │ ├── Login.vue # 登录页 │ │ ├── menus/ # 菜单页面 │ │ └── users/ # 用户页面 │ ├── App.vue # 根组件 │ └── main.ts # 应用入口 ├── .env # 环境变量 ├── .editorconfig # 编辑器配置 ├── .eslintrc-auto-import.json # 自动导入配置 ├── .gitattributes # Git 属性 ├── .gitignore # Git 忽略文件 ├── .prettierrc.json # Prettier 配置 ├── .vscode/ │ └── extensions.json # VS Code 扩展推荐 ├── AUTO_IMPORT.md # 自动导入说明 ├── CHANGELOG.md # 更新日志 ├── components.json # Shadcn/ui 配置 ├── components.d.ts # 组件类型声明 ├── auto-imports.d.ts # 自动导入类型声明 ├── env.d.ts # 环境变量类型声明 ├── eslint.config.ts # ESLint 配置 ├── index.html # HTML 模板 ├── package.json # 项目配置和依赖 ├── pnpm-lock.yaml # pnpm 锁定文件 ├── tsconfig.app.json # TypeScript 应用配置 ├── tsconfig.json # TypeScript 基础配置 ├── tsconfig.node.json # TypeScript Node 配置 └── vite.config.ts # Vite 配置 ``` ## 🚀 快速开始 ### 环境要求 - **Node.js**: ^20.19.0 || >=22.12.0 - **包管理器**: pnpm (推荐) 或 npm/yarn - **操作系统**: Windows 10+, macOS 10.15+, Ubuntu 18.04+ ### 安装依赖 ```bash # 使用 pnpm (推荐) pnpm install # 或使用 npm npm install # 或使用 yarn yarn install ``` ### 开发服务器 ```bash # 使用 pnpm pnpm dev # 或使用 npm npm run dev # 或使用 yarn yarn dev ``` 应用将在 `http://localhost:5173` 上运行 ### 构建生产版本 ```bash # 使用 pnpm pnpm build # 或使用 npm npm run build # 或使用 yarn yarn build ``` ### 预览生产构建 ```bash # 使用 pnpm pnpm preview # 或使用 npm npm run preview # 或使用 yarn yarn preview ``` ### 代码检查和格式化 ```bash # 代码检查 pnpm lint # 代码格式化 pnpm format # 类型检查 pnpm type-check ``` ## 🧩 UI 组件 项目集成了丰富的 Shadcn/ui 组件，包括但不限于： - **基础组件**: Button, Input, Label, Badge, Avatar - **布局组件**: Card, Separator, Skeleton - **导航组件**: Navigation Menu, Breadcrumb, Menubar - **表单组件**: Form, Checkbox, Radio Group, Switch, Slider - **反馈组件**: Dialog, Drawer, Popover, Tooltip, Toast (Sonner) - **数据展示**: Table, Pagination, Progress, Calendar - **高级组件**: Carousel, Stepper, Tags Input, Number Field 所有组件都支持主题切换（亮色/暗色模式）和完整的 TypeScript 类型支持。 ## ⚡ 自动导入功能 项目已配置 `unplugin-vue-components` 和 `unplugin-auto-import` 插件，实现 Vue 组件和 API 的自动导入： - **Vue API 自动导入**: `ref`, `computed`, `onMounted` 等 Vue 核心 API 无需手动导入 - **UI 组件自动导入**: 所有 Shadcn/ui 组件无需手动导入，直接使用 - **第三方库 API 自动导入**: `vee-validate` 和 `vue-sonner` 的关键 API 自动导入 详细配置和使用方法请参考 [AUTO_IMPORT.md](./AUTO_IMPORT.md) 文档。 ## 🎨 主题定制 项目使用 Tailwind CSS 和 CSS 变量实现主题系统。主题配置位于 `src/styles/main.css`： - 支持亮色和暗色模式 - 使用 CSS 变量定义颜色系统 - 基于 oklch 颜色空间的现代色彩方案 切换主题只需在根元素添加/移除 `dark` 类名。 ## 📝 开发指南 ### 添加新组件 使用 Shadcn/ui CLI 添加新组件： ```bash npx shadcn-vue@latest add [component-name] ``` ### 状态管理 项目使用 Pinia 进行状态管理。示例 store 位于 `src/stores/counter.ts`。 ### 路由配置 路由配置位于 `src/router/index.ts`。当前包含以下路由： - 首页 (`/`) - 登录页 (`/login`) - 用户管理 (`/users`) - 菜单管理 (`/menus`) ### API 调用 项目使用 Alova 进行网络请求，API 定义位于 `src/api/` 目录： - `auth.ts` - 认证相关 API - `users.ts` - 用户相关 API - `menu.ts` - 菜单相关 API ### 代码规范 - 使用 TypeScript 进行类型检查 - 遵循 ESLint 和 Prettier 配置 - 组件使用 Composition API 和 `