# vue-demo

**Repository Path**: zxb4467/vue-demo

## Basic Information

- **Project Name**: vue-demo
- **Description**: 轻量级 Vue 2 MVP 项目骨架，用于快速验证新功能。依赖与主项目保持一致，便于迁移模块。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-23
- **Last Updated**: 2025-12-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-demo

轻量级 Vue 2 MVP 项目骨架，用于快速验证新功能。依赖与主项目保持一致，便于迁移模块。

vue2 + Element UI + ECharts + Leaflet

## 开发

```bash
npm install
npm run serve
```

## 构建

```bash
npm run build
```

## 现有模块说明

### 1. 认证与状态管理
- **登录页面** (`Login.vue`)：提供基础的身份验证界面，支持账号密码登录。
- **状态管理** (`Vuex`)：统一管理用户信息、登录状态及全局配置。
- **路由守卫**：实现基础的权限控制，未登录用户自动重定向至登录页。

### 2. 地图组件库 (`src/components/map`)
- **MapBase**：Leaflet 地图底图容器，统一管理底图加载与地图初始化。
- **MapPoint**：业务点位管理组件，支持自定义图标、弹窗绑定及图层自动清理。
- **MapRegion**：行政区划组件，支持 GeoJSON 边界绘制、区域背景填充及交互高亮。

### 3. 图表组件库 (`src/components/echarts`)
- **BaseChart**：基于 ECharts 的基础封装，自动处理容器缩放（Resize）与实例销毁。
- **BarChart / LineChart / PieChart / RadarChart**：配置驱动的业务图表组件，实现逻辑与渲染分离。

### 4. 通用基础组件 (`src/components/common`)
- **TablePage**：标准页面模板，集成搜索表单、操作工具栏、数据表格及分页器。
- **DynamicTable / DynamicForm**：配置驱动的表格与表单，通过 JSON 配置即可生成复杂交互界面。
- **CommonDialog**：统一规范的弹窗容器，支持固定高度滚动及标准操作按钮。
- **TreeSelector**：支持搜索过滤和复选框的树形选择组件，常用于权限分配。
- **DataOverview**：统计概览卡片组件，用于展示核心业务指标。

### 5. 表格模块 (`TableDemo.vue`)
- **基础表格**：展示 Element UI 表格的典型用法.
- **CRUD 交互**：包含关键字筛选、新增企业、编辑企业信息的弹窗交互逻辑。

### 6. 系统管理模块 (新)
- **用户管理**：展示用户信息列表，支持搜索与基础操作。
- **角色管理**：管理系统角色及权限分配（集成菜单树勾选）。
- **菜单管理**：维护系统菜单树，支持两级菜单结构。
- **动态菜单**：左侧菜单根据 Store 中的数据动态生成，支持多层级展示。

### 7. 布局与样式
- **响应式布局**：`BasicLayout` 提供固定头部、固定侧边栏、内容区独立滚动的后台管理系统布局。
- **统一视觉**：通过 `global.less` 统一全局圆角（4px）、颜色变量及组件样式。

### 8. 工程化规范
- **API 集中管理**：所有接口在 `src/api` 统一维护，挂载至 `this.$api` 全局调用，支持模块化扩展。
- **多环境支持**：通过 `.env.[mode]` 文件支持开发、测试、生产环境的 API 地址与代理配置切换。
- **代码规范**：集成 ESLint + Prettier，配置 VS Code 保存自动修复，确保代码风格严谨统一。
- **全局反馈**：内置全局路由守卫，页面切换自动触发 Loading 加载动画。