From 81eee81f15aa86a85610c53d909020e7158d01a1 Mon Sep 17 00:00:00 2001 From: gitee-bot Date: Thu, 31 Jul 2025 09:36:28 +0000 Subject: [PATCH] Update README.md --- README.en.md | 142 ++++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 144 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 286 insertions(+) create mode 100644 README.en.md create mode 100644 README.md diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000..45c252b --- /dev/null +++ b/README.en.md @@ -0,0 +1,142 @@ +# IOT Admin Web + +A background management system template based on Vue 3 and TypeScript, suitable for Internet of Things (IOT) management platforms. + +## Project Overview + +This project is a backend system template for an IoT management platform, developed using Vue 3 + Vite + TypeScript, offering all the advantages of a modern frontend technology stack. The system integrates basic modules such as user permission management, data dictionary, department management, and log management, making it suitable for quickly building backend systems for IoT-related business. + +Main technology stack: +- Vue 3 (Composition API) +- TypeScript +- Element Plus +- Vite +- Vue Router +- Pinia (state management) +- VxeTable (table component) +- ECharts (chart support) + +## Functional Modules + +- **User Management**: User list, role assignment, department affiliation, user import. +- **Role Permissions**: Role definition, permission assignment, menu permission management. +- **Department Management**: Tree-structured department management, supporting multi-level display. +- **Menu Management**: Dynamic menu configuration, supporting permission control. +- **System Logs**: Records user operation logs for audit tracking. +- **Data Dictionary**: General data dictionary management, supports label component linkage. +- **Notifications and Announcements**: System-level notification and announcement configuration. +- **Configuration Management**: System parameter configuration, supports switching between multiple environments. +- **Device Management**: IoT device management and monitoring. +- **Internationalization Support**: Switching between Chinese and English. + +## Installation Instructions + +### Development Environment Requirements +- Node.js >= 16.x +- pnpm or npm / yarn + +### Install Dependencies + +```bash +pnpm install +``` + +### Start Development Server + +```bash +pnpm dev +``` + +### Build Production Version + +```bash +pnpm build +``` + +## Usage Instructions + +### Route Configuration +All routes are managed by `src/router/index.ts`. The permission module implements dynamic route loading via `src/store/modules/permission.store.ts`. + +### API Calls +The system uses a wrapped `axios` request located in `src/utils/request.ts`. All API interfaces are centralized in the `src/api` directory: +- `auth.api.ts`: Login and authentication interfaces +- `user.api.ts`: User management interface +- `role.api.ts`: Role management interface +- `dept.api.ts`: Department management interface +- `menu.api.ts`: Menu management interface +- `log.api.ts`: Log management interface +- `dict.api.ts`: Data dictionary interface +- `notice.api.ts`: Notification and announcement interface + +### Mock Data +All mock data is located in the `mock/` directory, supporting local development and debugging: +- `auth.mock.ts`: Login authentication mock +- `user.mock.ts`: User data mock +- `role.mock.ts`: Role data mock +- `dept.mock.ts`: Department data mock +- `menu.mock.ts`: Menu data mock +- `log.mock.ts`: Log data mock +- `dict.mock.ts`: Dictionary data mock +- `notice.mock.ts`: Notification data mock + +### Styles and Themes +- Theme variables are defined in `src/styles/variables.scss` +- Dark mode is supported, configured in `src/styles/dark/css-vars.css` +- Atomic styling is configured using `unocss` + +### Multilingual Support +Multilingual configuration is located in the `src/lang/` directory, supporting switching between Chinese and English. + +## Core Components + +- **CURD Template Components**: + - `PageContent.vue`: Data display list + - `PageSearch.vue`: Query form + - `PageModal.vue`: Popup editing component + - `usePage.ts`: Custom Hook encapsulating CURD logic + +- **Permission Control**: + - `directive/permission/index.ts`: Custom permission directive + - `plugins/permission.ts`: Route guards and permission control logic + +- **WebSocket Support**: + - Real-time online user synchronization and other functions are implemented using `plugins/websocket.ts` + +- **Dictionary Synchronization**: + - `composables/useDictSync.ts`: Provides dictionary synchronization Hook + - `store/modules/dict.store.ts`: Dictionary state management + +## Project Structure + +``` +src/ +├── api/ // Interface definitions +├── assets/ // Static resources +├── components/ // General components (CURD, dictionary, upload, icons, etc.) +├── composables/ // Vue3 Composition API modules +├── constants/ // Constant definitions +├── directive/ // Custom directives (permission control) +├── enums/ // Enumeration definitions +├── lang/ // Multilingual support +├── layouts/ // Page layouts +├── plugins/ // Plugin integrations (permissions, WebSocket, icons, etc.) +├── router/ // Route configuration +├── store/ // Pinia state management +├── styles/ // Style files +├── types/ // TypeScript type definitions +├── utils/ // Utility functions (authentication, requests, internationalization, etc.) +└── views/ // Page views +``` + +## Contribution Guide + +We welcome PRs and issues. Please follow these steps to contribute code: +1. Fork the project +2. Create a new branch +3. Commit your code +4. Create a Pull Request + +## License + +This project is licensed under the MIT License. For details, please refer to the [LICENSE](LICENSE) file. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..48d83f5 --- /dev/null +++ b/README.md @@ -0,0 +1,144 @@ + + +# IOT Admin Web + +一个基于 Vue 3 和 TypeScript 的后台管理系统模板，适用于物联网（IOT）管理平台。 + +## 项目简介 + +本项目是一个物联网管理平台的后台系统模板，采用 Vue 3 + Vite + TypeScript 开发，具备现代前端技术栈的所有优势。系统集成了用户权限管理、数据字典、部门管理、日志管理等基础模块，适用于快速搭建物联网相关业务后台。 + +主要技术栈： +- Vue 3（组合式 API） +- TypeScript +- Element Plus +- Vite +- Vue Router +- Pinia（状态管理） +- VxeTable（表格组件） +- ECharts（图表支持） + +## 功能模块 + +- **用户管理**：用户列表、角色分配、部门归属、用户导入。 +- **角色权限**：角色定义、权限分配、菜单权限管理。 +- **部门管理**：树形结构部门管理，支持多层级展示。 +- **菜单管理**：动态菜单配置，支持权限控制。 +- **系统日志**：记录用户操作日志，便于审计追踪。 +- **数据字典**：通用数据字典管理，支持标签组件联动。 +- **通知公告**：系统级通知与公告配置。 +- **配置管理**：系统参数配置，支持多环境切换。 +- **设备管理**：物联网设备的管理与监控。 +- **国际化支持**：中英文切换。 + +## 安装说明 + +### 开发环境要求 +- Node.js >= 16.x +- pnpm 或 npm / yarn + +### 安装依赖 + +```bash +pnpm install +``` + +### 启动开发服务器 + +```bash +pnpm dev +``` + +### 构建生产版本 + +```bash +pnpm build +``` + +## 使用说明 + +### 路由配置 +所有路由由 `src/router/index.ts` 管理，权限模块通过 `src/store/modules/permission.store.ts` 实现动态路由加载。 + +### 接口调用 +系统使用封装的 `axios` 请求，位于 `src/utils/request.ts`，所有 API 接口集中于 `src/api` 目录下： +- `auth.api.ts`：登录、鉴权接口 +- `user.api.ts`：用户管理接口 +- `role.api.ts`：角色管理接口 +- `dept.api.ts`：部门管理接口 +- `menu.api.ts`：菜单管理接口 +- `log.api.ts`：日志管理接口 +- `dict.api.ts`：数据字典接口 +- `notice.api.ts`：通知公告接口 + +### mock 数据 +所有 mock 数据位于 `mock/` 目录，支持本地开发调试： +- `auth.mock.ts`：登录鉴权 mock +- `user.mock.ts`：用户数据 mock +- `role.mock.ts`：角色数据 mock +- `dept.mock.ts`：部门数据 mock +- `menu.mock.ts`：菜单数据 mock +- `log.mock.ts`：日志数据 mock +- `dict.mock.ts`：字典数据 mock +- `notice.mock.ts`：通知数据 mock + +### 样式与主题 +- 主题变量定义在 `src/styles/variables.scss` +- 支持暗黑模式，配置在 `src/styles/dark/css-vars.css` +- 使用 `unocss` 进行原子化样式配置 + +### 多语言支持 +多语言配置位于 `src/lang/` 目录，支持中英文切换。 + +## 核心组件 + +- **CURD 模板组件**： + - `PageContent.vue`：数据展示列表 + - `PageSearch.vue`：查询表单 + - `PageModal.vue`：弹窗编辑组件 + - `usePage.ts`：封装 CURD 逻辑的自定义 Hook + +- **权限控制**： + - `directive/permission/index.ts`：自定义权限指令 + - `plugins/permission.ts`：路由守卫和权限控制逻辑 + +- **WebSocket 支持** + - 使用 `plugins/websocket.ts` 实现实时在线人数同步等功能 + +- **字典同步** + - `composables/useDictSync.ts`：提供字典同步 Hook + - `store/modules/dict.store.ts`：字典状态管理 + +## 项目结构 + +``` +src/ +├── api/ // 接口定义 +├── assets/ // 静态资源 +├── components/ // 通用组件（CURD、字典、上传、图标等） +├── composables/ // Vue3 Composition API 模块 +├── constants/ // 常量定义 +├── directive/ // 自定义指令（权限控制） +├── enums/ // 枚举定义 +├── lang/ // 多语言支持 +├── layouts/ // 页面布局 +├── plugins/ // 插件集成（权限、WebSocket、图标等） +├── router/ // 路由配置 +├── store/ // Pinia 状态管理 +├── styles/ // 样式文件 +├── types/ // TypeScript 类型定义 +├── utils/ // 工具函数（鉴权、请求、国际化等） +└── views/ // 页面视图 +``` + +## 贡献指南 + +欢迎提交 PR 和 issue，贡献代码请遵循以下步骤： +1. Fork 项目 +2. 创建新分支 +3. 提交代码 +4. 创建 Pull Request + +## 协议 + +本项目采用 MIT 许可协议，详细信息请查看 [LICENSE](LICENSE) 文件。 \ No newline at end of file -- Gitee