快速开始
环境要求
- Node.js >= 18
- npm >= 9 或 pnpm >= 8
- Git
安装
克隆仓库
bash
git clone https://github.com/gitcoffee-os/airadmin.git
cd airadmin安装依赖
bash
npm install
# 或
pnpm install开发
启动开发服务器
bash
npm run dev
# 或
pnpm dev开发服务器启动后，访问 http://localhost:5173 即可预览。
构建生产版本
bash
npm run build
# 或
pnpm build构建产物将输出到 dist 目录。
项目结构
airadmin/
├── public/ # 静态资源
│ └── logo.svg # 应用 Logo
├── src/ # 源代码
│ ├── components/ # 公共组件
│ │ ├── Icon/ # 图标组件
│ │ └── AirTabsBar.vue # 标签栏组件
│ ├── composables/ # 组合式函数
│ │ └── useECharts.ts # ECharts 组合式函数
│ ├── directives/ # 自定义指令
│ │ ├── v-auth.ts # 权限指令
│ │ ├── v-loading.ts # 加载指令
│ │ └── v-permission.ts # 权限判断指令
│ ├── enums/ # 枚举定义
│ ├── layouts/ # 布局组件
│ │ └── AppLayout.vue # 应用布局
│ ├── router/ # 路由配置
│ │ └── modules/ # 路由模块
│ ├── utils/ # 工具函数
│ │ ├── clone.ts # 深拷贝
│ │ ├── crypto-storage.ts # 加密存储
│ │ ├── date.ts # 日期工具
│ │ ├── echarts.ts # ECharts 工具
│ │ ├── is.ts # 类型判断
│ │ ├── pinia-persist.ts # 状态持久化
│ │ └── storage.ts # 本地存储
│ ├── views/ # 页面视图
│ │ ├── AnalyticsView.vue # 数据分析
│ │ ├── DashboardView.vue # 仪表盘
│ │ ├── DemoPageView.vue # 示例页面
│ │ ├── ExceptionView.vue # 异常页面
│ │ ├── NotFoundView.vue # 404 页面
│ │ ├── ProfileView.vue # 个人中心
│ │ ├── SettingsView.vue # 系统设置
│ │ └── UsersView.vue # 用户管理
│ ├── App.vue # 根组件
│ ├── env.d.ts # 环境类型声明
│ ├── init.ts # 初始化逻辑
│ └── main.ts # 入口文件
├── index.html # HTML 模板
├── package.json # 项目配置
├── tsconfig.json # TypeScript 配置
├── uno.config.ts # UnoCSS 配置
└── vite.config.ts # Vite 配置配置说明
基础配置
在项目根目录创建 .env 文件：
env
# API 服务端地址
VITE_API_BASE_URL=http://localhost:8080
# 应用名称
VITE_APP_NAME=AirAdmin
# 应用标题
VITE_APP_TITLE=AirAdmin AI 中后台管理系统开发环境配置
env
# .env.development
VITE_API_BASE_URL=http://localhost:8080
VITE_ENABLE_MOCK=true生产环境配置
env
# .env.production
VITE_API_BASE_URL=https://api.example.com
VITE_ENABLE_MOCK=falseAI 命令面板使用
呼出命令面板
使用快捷键 Ctrl + K（macOS: Cmd + K）呼出 AI 命令面板。
常用命令
| 命令 | 说明 |
|---|---|
| 打开仪表盘 | 跳转到仪表盘页面 |
| 查看用户管理 | 跳转到用户管理页面 |
| 切换暗色主题 | 切换到暗色模式 |
| 切换亮色主题 | 切换到亮色模式 |
| 锁屏 | 锁定当前屏幕 |
自定义命令
可以通过注册自定义命令来扩展 AI 命令面板：
typescript
import { registerCommand } from '@gitcoffee/air-engine'
registerCommand({
id: 'my-custom-command',
label: '我的自定义命令',
trigger: ['自定义命令', '我的命令'],
handler: () => {
console.log('执行自定义命令')
}
})常见问题
Q: 如何切换开发环境？
A: 使用 .env.development、.env.production 等文件来配置不同环境。
Q: 如何添加新的页面？
A: 在 src/views/ 目录下创建 Vue 组件，并在 src/router/modules/ 中注册路由。
Q: 如何自定义主题？
A: 修改 UnoCSS 配置和 CSS 变量来自定义主题颜色和样式。
Q: 如何配置权限？
A: 使用 v-auth 和 v-permission 指令控制元素级别的权限，路由级别权限在路由配置中设置。