# gbolt-frontend

**Repository Path**: gbolt/gbolt-frontend

## Basic Information

- **Project Name**: gbolt-frontend
- **Description**: gbolt-frontend
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: prod
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-25
- **Last Updated**: 2026-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GBolt 前端管理系统

## 项目简介

GBolt Frontend 是一个基于 Vue 3 + Element Plus 的现代化管理系统前端，与 GBolt 后端完美配合，提供美观、高效的用户界面。项目采用最新的前端技术栈，支持响应式设计，提供优秀的用户体验。

## 技术栈

### 核心技术
- **框架**: Vue 3.4.21 (Composition API)
- **构建工具**: Vite 4.4.6
- **UI组件库**: Element Plus 2.7.0
- **路由**: Vue Router 4.3.2
- **状态管理**: Pinia 2.1.4
- **HTTP客户端**: Axios 1.4.0
- **样式预处理**: Sass
- **CSS框架**: Tailwind CSS 3.3.3

### 功能组件
- **图表**: ECharts 5.4.3 + Vue-ECharts 6.7.2
- **富文本编辑器**: WangEditor 5.1.23
- **文档预览**: @vue-office (Word/Excel/PDF)
- **代码高亮**: Highlight.js 11.8.0
- **拖拽排序**: Sortable.js 1.15.2 + VueDraggable 4.1.0
- **工具库**: @vueuse/core 10.7.2
- **加载进度**: NProgress 0.2.0
- **全屏功能**: Screenfull 6.0.2

## 项目结构

```
gbolt-frontend/
├── public/                 # 静态资源
├── src/                   # 源代码
│   ├── api/              # API接口
│   │   ├── index.js     # API入口
│   │   └── *.js         # 各模块API
│   ├── assets/           # 静态资源
│   │   ├── images/      # 图片资源
│   │   └── styles/      # 全局样式
│   ├── components/       # 全局组件
│   ├── core/            # 核心配置
│   │   ├── config.js    # 项目配置
│   │   ├── global.js    # 全局导入
│   │   └── gbolt-admin.js # 注册文件
│   ├── directive/       # 自定义指令
│   ├── pinia/           # 状态管理
│   │   ├── index.js     # 入口文件
│   │   └── modules/     # 模块状态
│   │       ├── dictionary.js # 字典管理
│   │       ├── router.js     # 路由状态
│   │       └── user.js       # 用户状态
│   ├── router/          # 路由配置
│   │   └── index.js    # 路由定义
│   ├── style/           # 全局样式
│   │   ├── base.scss   # 基础样式
│   │   ├── main.scss   # 主样式
│   │   └── element_visiable.scss # Element样式覆盖
│   ├── utils/           # 工具函数
│   │   ├── request.js  # HTTP请求封装
│   │   ├── asyncRouter.js # 动态路由
│   │   ├── dictionary.js  # 字典工具
│   │   ├── date.js     # 日期工具
│   │   ├── format.js   # 格式化工具
│   │   └── *.js        # 其他工具
│   ├── view/            # 页面组件
│   │   ├── about/      # 关于页面
│   │   ├── dashboard/  # 仪表板
│   │   ├── error/      # 错误页面
│   │   ├── example/    # 示例页面
│   │   ├── layout/     # 布局组件
│   │   │   ├── aside/  # 侧边栏
│   │   │   ├── topMenu/ # 顶部菜单
│   │   │   └── index.vue # 主布局
│   │   ├── login/      # 登录页面
│   │   ├── person/     # 个人中心
│   │   ├── superAdmin/ # 超级管理
│   │   ├── system/     # 系统管理
│   │   └── systemTools/ # 系统工具
│   ├── App.vue         # 根组件
│   ├── main.js         # 入口文件
│   └── permission.js   # 路由权限控制
├── .env.development     # 开发环境配置
├── .env.production      # 生产环境配置
├── vite.config.js       # Vite配置
├── tailwind.config.js   # Tailwind配置
├── babel.config.js      # Babel配置
├── package.json         # 项目依赖
└── Dockerfile          # Docker构建文件
```

## 核心功能

### 1. 权限管理系统
- **用户认证**: JWT Token认证机制
- **角色权限**: 基于RBAC的权限控制
- **动态路由**: 根据权限动态生成路由
- **按钮级权限**: 支持按钮级别的权限控制

### 2. 系统管理
- **用户管理**: 用户信息的增删改查
- **角色管理**: 角色权限配置管理
- **菜单管理**: 菜单的动态配置和模块关联
- **部门管理**: 组织架构管理
- **字典管理**: 系统字典数据维护

### 3. 模块化系统
- **顶部菜单**: 支持从tb_module表动态加载
- **模块关联**: 菜单与模块的灵活关联
- **图标支持**: 支持自定义模块图标

### 4. 数据展示
- **仪表板**: 数据可视化展示
- **图表组件**: 基于ECharts的丰富图表
- **表格组件**: 支持分页、排序、筛选的表格

### 5. 工具功能
- **代码生成**: 配合后端实现代码自动生成
- **文件管理**: 支持文件上传、预览、下载
- **系统监控**: 服务器状态监控展示
- **操作日志**: 用户操作记录查看

## 快速开始

### 环境要求
- Node.js 16+
- npm 7+ 或 yarn 1.22+

### 安装依赖

```bash
# 使用 npm
npm install

# 或使用 yarn
yarn install
```

### 开发环境

```bash
# 启动开发服务器
npm run dev

# 或
yarn dev
```

访问 `http://localhost:8080` 查看应用

### 生产构建

```bash
# 构建生产版本
npm run build

# 或
yarn build
```

### 预览构建结果

```bash
# 预览生产构建
npm run preview

# 或
yarn preview
```

## 环境配置

### 开发环境 (.env.development)

```env
# API接口地址
VITE_APP_BASE_API = 'http://localhost:9200/api/v1'

# 其他开发配置
```

### 生产环境 (.env.production)

```env
# API接口地址
VITE_APP_BASE_API = '/api/v1'

# 其他生产配置
```

## 开发指南

### 1. 添加新页面

1. **创建页面组件**
```javascript
// src/view/example/NewPage.vue
<template>
  <div>
    <h1>新页面</h1>
  </div>
</template>

<script setup>
// 页面逻辑
</script>
```

2. **添加路由配置**
```javascript
// src/router/index.js
{
  path: '/example',
  name: 'Example',
  component: () => import('@/view/example/index.vue'),
  meta: {
    title: '示例页面',
    icon: 'example'
  }
}
```

3. **添加菜单**
在系统管理 -> 菜单管理中添加对应菜单项

### 2. API调用

```javascript
// src/api/example.js
import request from '@/utils/request'

// 获取示例列表
export const getExampleList = (params) => {
  return request({
    url: '/example/list',
    method: 'get',
    params
  })
}

// 创建示例
export const createExample = (data) => {
  return request({
    url: '/example/create',
    method: 'post',
    data
  })
}
```

### 3. 状态管理

```javascript
// src/pinia/modules/example.js
import { defineStore } from 'pinia'

export const useExampleStore = defineStore('example', {
  state: () => ({
    exampleList: []
  }),
  actions: {
    setExampleList(list) {
      this.exampleList = list
    }
  }
})
```

### 4. 权限控制

#### 路由权限
```javascript
// 路由配置中的meta字段
meta: {
  title: '页面标题',
  icon: '图标',
  roles: ['admin', 'editor'] // 权限角色
}
```

#### 按钮权限
```vue
<template>
  <el-button v-auth="['admin']">管理员可见</el-button>
</template>
```

## 组件库使用

### Element Plus 组件

项目集成了Element Plus组件库，支持：

- **表单组件**: Form, Input, Select, DatePicker等
- **数据展示**: Table, Tree, Timeline等
- **导航组件**: Menu, Tabs, Breadcrumb等
- **反馈组件**: Dialog, Message, Notification等

### 自定义组件

- **TablePagination**: 分页表格组件
- **FileUpload**: 文件上传组件
- **IconSelect**: 图标选择组件
- **DictSelect**: 字典选择组件

## 主题定制

### 1. Element Plus主题

在 `src/style/element_visiable.scss` 中自定义Element Plus样式：

```scss
// 自定义主题色
$--color-primary: #409EFF;

// 导入样式
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': $--color-primary,
    ),
  ),
);
```

### 2. 全局样式

在 `src/style/main.scss` 中定义全局样式：

```scss
// 全局样式
body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

// 自定义工具类
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

## 优化配置

### Vite配置优化

```javascript
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: true
    })
  ],
  build: {
    // 生产环境构建配置
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true, // 移除console
      },
    },
  },
  server: {
    host: '0.0.0.0',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:9200',
        changeOrigin: true,
      }
    }
  }
})
```

## 部署

### Docker部署

```bash
# 构建镜像
docker build -t gbolt-frontend .

# 运行容器
docker run -d -p 8080:80 --name gbolt-frontend gbolt-frontend
```

### Nginx配置

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:9200;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](../LICENSE) 文件了解详情

## 支持

如有问题或建议，请提交 Issue 或联系开发团队。