# rocks-ui

**Repository Path**: liye233/rocks-ui

## Basic Information

- **Project Name**: rocks-ui
- **Description**: rocks开发平台前端项目
https://gitee.com/rocksdev/rocks-ui (前端)
https://gitee.com/rocksdev/rocks （后端）
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://rocksdev.top/app/rocks/login
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2025-06-06
- **Last Updated**: 2025-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
    <div align="center">
      <img src="https://rocksdev.top/app/rocks-minio/logo/logo.png" width="100">
      <h1 align="center">Rocks（前端）</h1>
    </div>
    <br>      
    <p align="center">
        Rocks是基于Springboot3 + JDK21 + Vue3 + Element-plus构建的中后台系统快速开发平台,目的是提高开发人员开发效率，降低企业信息化、数字化开发成本。
        <br>
        <br>
        <a href="http://spring.io/projects/spring-boot">
            <img src="https://img.shields.io/badge/spring--boot-3.4.1-green.svg" alt="spring-boot">
        </a>
        <a href="http://mp.baomidou.com">
            <img src="https://img.shields.io/badge/mybatis--plus-3.5.10.1-blue.svg" alt="mybatis-plus">
        </a>  
        <a href="https://www.hutool.cn/">
            <img src="https://img.shields.io/badge/hutool-6.0.0-blue.svg" alt="hutool">
        </a>
    </p>
</p>

### 在线体验
演示地址：https://rocksdev.top/app/rocks/login （点击头像-后台管理 可进入系统后台）

`rocks将前后台功能集成到一个项目中，通过权限控制用户是否具有后台管理权限，不需要再访问新的地址即可进入系统后台管理
登录后默认进入前台系统（业务功能），点击头像-后台管理（权限控制），进入系统后台管理。`

### 内置功能

1.  用户管理：用户是系统操作者，该功能主要完成系统用户配置。
2.  部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。
3.  岗位管理：配置系统用户所属担任职务。
4.  菜单管理：配置系统菜单，操作权限，按钮权限标识等。
5.  角色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。
6.  字典管理：对系统中经常使用的一些较为固定的数据进行维护。
7.  参数管理：对系统动态配置常用参数。
8.  通知公告：系统通知公告信息发布维护。
9.  操作日志：系统正常操作日志记录和查询；系统异常信息日志记录和查询。
10. 登录日志：系统登录日志记录查询包含登录异常。
11. 在线用户：当前系统中活跃用户状态监控。
12. 定时任务：在线（添加、修改、删除)任务调度包含执行结果日志。
13. 代码生成：前后端代码的生成（java、html、xml、sql）支持CRUD下载 。
14. 系统接口：根据业务代码自动生成相关的api接口文档。
15. 服务监控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。
16. 缓存监控：对系统的缓存信息查询，命令统计等。
17. 在线构建器：拖动表单元素生成相应的HTML代码。
18. 工作流（开发中）

## 技术栈
分类                |	内容
-------------------|-------------------------------------------------------------------------------
框架                |	Vue 3、TypeScript
CSS 框架	           |	Sass、TailwindCSS、Daisyui
组件库              |		ElementPlus*
打包构建工具         |		Vite
状态管理            |		Pinia

## 项目结构
```
rocks-ui
  |-public                               # 静态资源
  |   |-tinymce                          # tinymce 编辑器静态资源
  |   |-ele-file-list                    # 文件列表图标资源
  |   |-json
  |   |   |-regions-data.json            # 省市区数据
  |   |   |-china-provinces.geo.json     # 地图轮廓数据
  |   |-favicon.ico                      # favicon 图标
  |-src
  |   |-api                              # API 接口
  |   |-assets                           # 图片等静态资源
  |   |-components                       # 公共组件
  |   |   |-ByteMdEditor                 # markdown 编辑器组件
  |   |   |-ByteMdViewer                 # markdown 解析器组件
  |   |   |-CommonUpload                 # 公共文件上传组件
  |   |   |-CronBuilder                  # cron 表达式生成器组件
  |   |   |-DictData                     # 字典翻译字典表单组件
  |   |   |-FilePicker                   # 文件选择组件
  |   |   |-FileUpload                   # 公共附件上传组件
  |   |   |-icons                        # 公共 svg 图标组件
  |   |   |-IconSelect                   # 公共图标选择组件
  |   |   |-ImageUpload                  # 公用图片上传组件
  |   |   |-MonacoEditor                 # 代码编辑器组件
  |   |   |-ProForm                      # 高级表单组件
  |   |   |-ProFormBuilder               # 表单构建器组件
  |   |   |-RedirectLayout               # 用于刷新路由组件
  |   |   |-RegionsSelect                # 省市区级联选择组件
  |   |   |-RouterLayout                 # 主体区路由出口组件
  |   |   |-TinymceEditor                # 富文本编辑器组件
  |   |-config
  |   |   |-setting.ts                   # 项目全局配置
  |   |-i18n                             # 多语言配置
  |   |   |-lang
  |   |   |   |-en.ts                    # 英文语言
  |   |   |   |-zh_CN.ts                 # 简体中文语言
  |   |   |   |-zh_TW.ts                 # 繁体中文语言
  |   |   |-index.ts                     # vue-i18n 插件集成
  |   |   |-use-locale.ts                # ElementPlus/Dayjs 国际化统一配置
  |   |-layout                           # 外层布局
  |   |   |-components
  |   |   |   |-header-user.vue          # 顶栏用户信息
  |   |   |   |-header-notice.vue        # 顶栏消息通知
  |   |   |   |-page-footer.vue          # 全局页脚
  |   |   |   |-password-modal.vue       # 修改密码弹窗
  |   |   |   |-setting-drawer.vue       # 主题设置抽屉
  |   |   |   |-i18n-icon.vue            # 多语言切换图标
  |   |   |-index.vue
  |   |-router                           # 路由配置
  |   |-store                            # 状态管理
  |   |   |-modules
  |   |   |   |-user.ts                  # 登录状态管理, 用户信息、菜单、权限、角色
  |   |   |   |-theme.ts                 # 主题风格相关的状态管理, 页签数据管理
  |   |   |-index.ts
  |   |-styles
  |   |   |-themes
  |   |   |   |-dark.scss                # 引入暗黑主题变量
  |   |   |   |-rounded.scss             # 引入圆角主题变量
  |   |   |-transition.scss              # 路由切换动画
  |   |   |-variables.scss               # 组件库的样式变量修改
  |   |   |-index.scss                   # 全局样式
  |   |-utils
  |   |   |-common.ts                    # 常用公共方法
  |   |   |-permission.ts                # 按钮级权限控制指令
  |   |   |-request.ts                   # axios 实例
  |   |   |-token-util.ts                # token 操作方法
  |   |   |-page-title-util.ts           # 浏览器标题修改方法
  |   |   |-use-body-resize.ts           # 监听主体区尺寸改变 hook
  |   |   |-use-dict-data.ts             # 字典数据获取 hook
  |   |   |-use-echarts.ts               # echarts 自动切换主题/重置尺寸 hook
  |   |   |-use-form-data.ts             # 表单数据 hook
  |   |   |-use-mobile.ts                # 监听 PC 移动设备尺寸切换 hook
  |   |   |-use-page-tab.ts              # 页签 tab 操作 hook
  |   |   |-use-permission.ts            # 按钮级权限判断 hook
  |   |-views                            # 页面
  |   |   |-dashboard                    # 控制台
  |   |   |-system                       # 系统管理
  |   |   |   |-user                     # 用户管理
  |   |   |   |   |-components           # 页面组件拆分
  |   |   |   |   |   |-user-search.vue  # 表格顶部搜索表单
  |   |   |   |   |   |-user-edit.vue    # 用户添加、修改弹窗
  |   |   |   |   |   |-user-import.vue  # 用户导入弹窗
  |   |   |   |   |-index.vue
  |   |   |   |-xxxx                     # 其它模块页面等
  |   |   |-exception                    # 异常页面
  |   |   |-xxxxxx                       # 其它模板页面等
  |   |-App.vue                          # 入口页面
  |   |-main.ts                          # 入口
  |-components                           # 尊享版扩展组件
  |   |-ele-admin-layout                 # 布局组件
  |   |-xxxxxxxx                         # 其它组件等
  |-.env                                 # 多环境配置
  |-.env.development                     # 开发环境配置
  |-.env.production                      # 生产环境配置
  |-.env.staging                         # 预发布环境配置
  |-.eslintignore                        # eslint 忽略配置
  |-.eslintrc.json                       # eslint 配置
  |-.prettierignore                      # prettier 忽略配置
  |-prettier.config.js                   # prettier 配置
  |-postcss.config.js                    # postcss 配置
  |-package.json
  |-tsconfig.json
  |-vite.config.ts                       # vite 配置
  |-components.d.ts                      # 组件类型提示
  |-index.html


```
## 环境准备

- **Node.js**: 版本 18.0.0
- **npm**: 版本 8.0.0 或更高
- **pnpm**: 版本 9.13.0 或更高

## 快速开始
### 1. 安装依赖：
```bash
pnpm install 
```
### 3. 开发环境运行：
```bash
pnpm run dev
```
### 4. 生产环境构建：
```bash
pnpm run build
```
## 浏览器支持
- 现代浏览器的最后两个版本。
- 不支持 IE 11 及更低版本。

## 联系作者
<img src="https://rocksdev.top/app/rocks-minio/qrcode/wechat.jpg" width="100">
<img src="https://rocksdev.top/app/rocks-minio/qrcode/qq.jpg" width="100">