---
## ✨ 特性
- 🚀 **现代技术栈** - Vue 3 + TypeScript + Vite 5，享受最新的开发体验
- 🎨 **科技感 UI** - 精心设计的科技主题，支持暗色/亮色/科技蓝三种主题
- 🔌 **双数据引擎** - Mock 数据 + API 接口无缝切换，开发调试更便捷
- 📱 **响应式布局** - 完美适配 PC、平板、移动端
- 🎯 **TypeScript** - 完整的类型定义，智能提示，提升开发效率
- 🔐 **权限管理** - 基于 JWT 的认证授权系统，开箱即用
- 📦 **开箱即用** - 内置系统管理模块，快速开始业务开发
## 📸 预览
## 🏗️ 项目结构
```
├── src/
│ ├── api/ # API 接口定义
│ ├── components/ # 公共组件
│ ├── composables/ # 组合式函数
│ ├── layout/ # 布局组件
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia 状态管理
│ ├── styles/ # 全局样式
│ ├── types/ # TypeScript 类型定义
│ ├── utils/ # 工具函数
│ ├── views/ # 页面组件
│ │ ├── login/ # 登录页
│ │ ├── error/ # 错误页
│ │ └── system/ # 系统管理模块
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── mock/ # Mock 数据
├── public/ # 公共资源
└── ...配置文件
```
## 🔥 内置功能
### 系统管理
- **用户管理** - CRUD、状态管理、角色分配
- **角色管理** - CRUD、权限配置
- **权限管理** - 菜单权限、按钮权限、API 权限
- **数据字典** - 字典类型、字典数据管理
### 通用组件
- `Modal` - 弹框组件
- `ConfirmDialog` / `ConfirmModal` - 确认对话框
- `EmptyState` - 空状态组件
- `LoadingOverlay` - 加载遮罩
- `PageHeader` - 页面标题组件
### 工具函数
- `date.ts` - 日期处理
- `format.ts` - 数据格式化
- `validate.ts` - 表单验证
- `storage.ts` - 本地存储封装
- `request.ts` - HTTP 请求封装
## 🚀 快速开始
### 环境要求
- Node.js >= 18.0.0
- pnpm >= 8.0.0（推荐）
### 安装
```bash
# 克隆项目
git clone https://github.com/iotsink/admin-template.git
# 进入项目目录
cd admin-template
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
```
启动后访问 http://localhost:5173
**默认账号：** `admin` / `admin123`
### 构建
```bash
# 生产构建
pnpm build
# 预览构建结果
pnpm preview
```
## 🔧 配置说明
### 环境变量
创建 `.env.development` 文件：
```bash
VITE_APP_TITLE=IoTSink Admin
VITE_APP_ENV=development
VITE_USE_MOCK=true
VITE_API_BASE_URL=http://localhost:3000
```
生产环境 `.env.production`：
```bash
VITE_APP_TITLE=IoTSink Admin
VITE_APP_ENV=production
VITE_USE_MOCK=false
VITE_API_BASE_URL=https://api.yoursite.com
```
### Mock 数据
通过 `VITE_USE_MOCK` 环境变量控制：
- `true` - 使用 Mock 数据（开发调试）
- `false` - 使用真实 API（生产环境）
## 📦 技术栈
| 分类 | 技术 |
|------|------|
| **框架** | Vue 3.4、TypeScript 5.4、Vite 5.1 |
| **状态管理** | Pinia 2.1 |
| **路由** | Vue Router 4.3 |
| **UI 组件** | Element Plus 2.6 |
| **HTTP** | Axios 1.6 |
| **工具** | Day.js、Lodash-es、VueUse |
| **样式** | Sass、CSS Variables |
| **Mock** | Mock.js、vite-plugin-mock |
## 🎨 主题定制
系统内置三种主题，可在登录页或顶部栏切换：
- **科技蓝** - 默认主题，科技感十足
- **暗色** - 护眼暗色主题
- **亮色** - 清爽亮色主题
自定义主题变量：
```scss
// src/styles/variables.scss
:root {
--tech-blue: #00d4ff;
--tech-purple: #8b5cf6;
--tech-green: #00ff88;
--tech-orange: #ff6b35;
}
```
## 🔐 权限控制
基于 JWT Token 的认证授权：
- ✅ 路由守卫控制页面访问
- ✅ API 请求自动携带 Token
- ✅ Token 过期处理
- ✅ 退出登录清除凭证
## 🌐 浏览器支持
| Chrome | Firefox | Safari | Edge |
|--------|---------|--------|------|
| >= 90 | >= 88 | >= 14 | >= 90 |
## 📝 开发规范
### 命名规范
- 组件文件：`PascalCase`（如 `MyComponent.vue`）
- 工具文件：`camelCase`（如 `myUtil.ts`）
- 样式文件：`kebab-case`（如 `my-style.scss`）
### Git 提交规范
```
feat: 新功能
fix: 修复 bug
docs: 文档更新
style: 代码格式调整
refactor: 重构
perf: 性能优化
test: 测试
chore: 构建/工具链更新
```
## 🤝 贡献
欢迎提交 Issue 和 Pull Request！
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'feat: Add AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request
## 📄 许可证
[MIT License](./LICENSE) © 2024 [IoTSink](https://iotsink.com)
---
