BearJia Admin：一套基于 Vue3 全家桶+ Antdv 的高颜值现代化后台管理框架！

市面上有这么多管理系统的UI，你为什么还要单独开发一套，重复造轮子，确实是的，我自己本身也是若依的忠实粉丝，可以说是若依上学习了很多设计理念和思想吧，但用多了之后发现，有些地方可能少了点功能，有些 UI 不喜欢，知道我看到了ant design的 UI，当时候是有关于这套UI的若依前端，但是后来发现很多地方很鸡肋，好看一点的 UI 没有开源，也没有进行更新了，知道去年 AI 的普及和使用，我开始慢慢着手去改，去设计学习和优化，怎么更简单的使用

于是这套UI 的前端慢慢有了雏形，虽然可能还存在一些bug 或者页面的问题，但也是自己一手一手去设计优化，封装查询组件，表格配置统一化等，后续也会不断的完善，大家且看介绍吧！！！

📖 项目简介

仓库地址：https://gitee.com/javaxiaobear_admin/bear-jia-vue3.git

BearJia Vue3 前端框架是一个基于 Vue3 + Composition API + Vite + Ant Design Vue 实现的现代化管理后台系统，数据原始参考若依的开发。采用最新的前端技术栈，使用 <script setup> 语法糖，代码结构清晰，开发效率高。

✨ 技术特色

• 🚀 最新技术栈：Vue3.4 + Composition API + Vite5 + Pinia
• 📝 语法糖：使用 <script setup> 语法，代码量减少30%+
• 🎨 现代化UI：Ant Design Vue 4.x，组件丰富，样式美观
• 🔧 工程化：ESLint + Prettier + Husky，代码质量保证
• 📱 响应式：完美适配桌面端、平板、手机等设备
• 🎯 组件化：高度封装的业务组件，开箱即用
• 🌙 主题系统：支持亮色/暗色主题，多种布局模式

🎯 核心功能

🔐 权限管理

• 用户管理：用户信息维护、角色分配、状态管理、批量操作
• 角色管理：角色权限配置、数据权限设置、角色分配
• 菜单管理：动态菜单配置、权限控制、图标管理
• 部门管理：组织架构管理、树形结构展示、层级管理
• 岗位管理：岗位信息维护、人员分配、岗位层级

📊 系统监控

• 在线用户：实时在线用户监控、强制下线、会话管理
• 服务监控：服务器性能监控、JVM监控、系统信息
• 缓存监控：Redis缓存监控、缓存管理、性能统计
• 操作日志：用户操作记录、系统访问日志、日志分析
• 登录日志：用户登录记录、异常登录监控、IP追踪

🛠️ 系统工具

• 代码生成：一键生成前后端代码、支持自定义模板、预览功能
• 系统配置：动态配置管理、参数设置、配置热更新
• 字典管理：数据字典维护、下拉选项配置、字典缓存
• 通知公告：系统通知发布、富文本编辑、消息推送

🎨 界面特色

• 多布局模式：侧边栏、顶部菜单、混合布局、分栏布局、抽屉布局
• 主题切换：亮色/暗色主题、主题色自定义、布局配置
• 工作台：数据统计、快捷操作、更新日志、网站展示
• 历史导航：智能标签页管理、快速页面切换、右键菜单

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0 或 yarn >= 1.22.0
• 现代浏览器（Chrome 88+、Firefox 78+、Safari 14+、Edge 88+）

安装依赖

# 克隆项目
git clone https://github.com/javaxiaobear/BearJia.git

# 进入前端目录
cd BearJia/bearjia-ui

# 安装依赖
npm install
# 或使用 yarn
yarn install

开发环境

# 启动开发服务器
npm run dev
# 或
yarn dev

# 访问地址
http://localhost:5173

生产构建

# 构建生产版本
npm run build
# 或
yarn build

# 预览构建结果
npm run preview
# 或
yarn preview

代码检查

# ESLint 检查
npm run lint
# 或
yarn lint

# 代码格式化
npm run format
# 或
yarn format

🔧 配置说明

环境变量

项目支持多环境配置，通过 .env 文件管理：

• .env.development – 开发环境配置
• .env.production – 生产环境配置
• .env.staging – 预发布环境配置

# 开发环境示例 (.env.development)
VITE_APP_TITLE = BearJia Admin
VITE_APP_BASE_API = http://localhost:8080
VITE_APP_UPLOAD_URL = http://localhost:8080/common/upload

后端对接

本项目可以对接多种后端框架：

1. 推荐：BearJia SpringBoot
   • 仓库地址：bearjia-admin-backend
   • 完美适配，功能齐全
2. 兼容：RuoYi-Vue
   • 仓库地址：RuoYi-Vue
   • 需要少量配置调整

📁 项目结构

bearjia-ui/
├── public/                 # 静态资源
│   └── favicon.ico        # 网站图标
├── src/
│   ├── api/               # API接口
│   │   ├── demo/          # 演示接口
│   │   ├── login.js       # 登录接口
│   │   ├── system/        # 系统管理接口
│   │   ├── monitor/       # 系统监控接口
│   │   └── tool/          # 系统工具接口
│   ├── assets/            # 资源文件
│   │   ├── antIconSet.ts  # Ant Design 图标集
│   │   ├── icons/         # 图标资源
│   │   └── images/        # 图片资源
│   ├── components/        # 公共组件
│   │   ├── BearJiaProTable/  # 专业表格组件
│   │   ├── DictTag/          # 字典标签组件
│   │   ├── Ellipsis/         # 文本省略组件
│   │   ├── IconSelector/     # 图标选择器
│   │   ├── PageContainer/    # 页面容器
│   │   ├── SearchForm/       # 搜索表单
│   │   ├── TableActionBar/   # 表格操作栏
│   │   ├── editor/           # 富文本编辑器
│   │   ├── layout/           # 布局组件
│   │   ├── common/           # 通用组件
│   │   └── _util/            # 工具组件
│   ├── composables/       # 组合式函数
│   │   ├── useTable.js    # 表格逻辑
│   │   └── useDict.js     # 字典逻辑
│   ├── directive/         # 自定义指令
│   │   ├── index.js       # 指令入口
│   │   └── permission/    # 权限指令
│   ├── layout/            # 布局文件
│   │   ├── BaseLayout.vue    # 基础布局
│   │   ├── FrontendLayout.vue # 前台布局
│   │   ├── InnerLink/        # 内链组件
│   │   └── ParentView/       # 父级视图
│   ├── plugins/           # 插件配置
│   │   ├── auth.js        # 认证插件
│   │   ├── cache.js       # 缓存插件
│   │   ├── modal.js       # 弹窗插件
│   │   ├── tab.js         # 标签页插件
│   │   ├── table.js       # 表格插件
│   │   └── index.js       # 插件入口
│   ├── router/            # 路由配置
│   │   ├── index.js       # 路由入口
│   │   ├── routes.js      # 路由配置
│   │   ├── frontend.js    # 前台路由
│   │   └── vueRouter.js   # Vue Router 配置
│   ├── stores/            # 状态管理 (Pinia)
│   │   ├── app.js         # 应用状态
│   │   ├── user.js        # 用户状态
│   │   ├── permission.js  # 权限状态
│   │   ├── tagsView.js    # 标签页状态
│   │   └── tableConfig.js # 表格配置状态
│   ├── style/             # 样式文件
│   │   ├── components/    # 组件样式
│   │   ├── pages/         # 页面样式
│   │   ├── global.less    # 全局样式
│   │   ├── theme.less     # 主题样式
│   │   └── layout-modes.less # 布局模式样式
│   ├── types/             # TypeScript 类型定义
│   │   └── router.d.ts    # 路由类型
│   ├── utils/             # 工具函数
│   │   ├── BearJiaIcon.js    # 图标工具
│   │   ├── BearJiaUtil.js    # 通用工具
│   │   ├── auth.js           # 认证工具
│   │   ├── bearjia.js        # 核心工具
│   │   ├── configInit.js     # 配置初始化
│   │   ├── errorCode.js      # 错误码定义
│   │   ├── performance.js    # 性能监控
│   │   ├── request.js        # HTTP请求
│   │   └── security.js       # 安全工具
│   ├── views/             # 页面组件
│   │   ├── LoginPage.vue     # 登录页面
│   │   ├── RegisterPage.vue  # 注册页面
│   │   ├── 404.vue           # 404页面
│   │   ├── system/           # 系统管理页面
│   │   ├── monitor/          # 系统监控页面
│   │   ├── tool/             # 系统工具页面
│   │   ├── workbench/        # 工作台页面
│   │   ├── frontend/         # 前台页面
│   │   ├── error/            # 错误页面
│   │   └── test/             # 测试页面
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── index.html             # HTML模板
├── jsconfig.json          # JS配置
├── vite.config.js         # Vite配置
└── package.json           # 项目配置

🔧 核心组件

ProTable 表格组件

统一的表格组件，集成搜索、分页、导出等功能：

<template>
  <ProTable
    :api="tableApi"
    :columns="columns"
    :searchFields="searchFields"
    :isTreeTable="true"
    :exportConfig="exportConfig"
    rowKey="id"
  >
    <template #bodyCell="{ column, record }">
      <!-- 自定义单元格内容 -->
    </template>
  </ProTable>
</template>

特性：

• ✅ 统一的表格布局和样式
• ✅ 集成搜索、分页、导出功能
• ✅ 支持树形表格和可展开行
• ✅ 自定义操作按钮和单元格渲染
• ✅ 响应式设计，移动端友好

WangEditor 富文本编辑器

基于 WangEditor v5 的富文本编辑器组件：

<template>
  <WangEditor
    v-model:value="content"
    :height="400"
    :imageSize="5"
    :videoSize="50"
    placeholder="请输入内容..."
  />
</template>

特性：

• ✅ 基于 WangEditor v5 最新版本
• ✅ 支持图片、视频上传
• ✅ 丰富的文本格式化功能
• ✅ 自定义工具栏配置
• ✅ 完美的Vue3集成

HistoryNav 历史导航

智能的标签页管理组件：

<template>
  <HistoryNav />
</template>

特性：

• ✅ 智能标签页管理
• ✅ 工作台默认不显示
• ✅ 支持标签页关闭和刷新
• ✅ 右键菜单操作
• ✅ 路由状态同步

🏗️ 技术栈

核心技术

技术	版本	描述
Vue	3.4.21	渐进式JavaScript框架
Vite	5.1.4	下一代前端构建工具
Ant Design Vue	4.1.2	企业级UI组件库
Vue Router	4.3.0	Vue.js官方路由管理器
Pinia	2.1.7	Vue状态管理库
Axios	1.6.7	HTTP客户端

开发工具

工具	版本	描述
ESLint	8.57.0	代码质量检查
Prettier	3.2.5	代码格式化
Husky	9.0.11	Git钩子管理
Sass	1.71.1	CSS预处理器

功能库

库	版本	描述
WangEditor	5.1.23	富文本编辑器
ECharts	5.6.0	数据可视化图表库
Day.js	1.11.10	日期处理库
Lodash	4.17.21	实用工具库

项目预览

功能跟若依是雷同的，所以功能上没啥好看的哈，主要看页面吧

BearJia Admin：一套基于 Vue3 全家桶+ Antdv 的高颜值现代化后台管理框架！

预告

你的系统不仅仅是一个传统的管理系统，它更是一个 AI 调用系统 —— 一个基于 Spring Boot 3 与 Spring AI 构建的智能化企业级 AI Agent 框架。 它能够让 AI 模型智能地调用系统内部的业务函数，实现 自然语言到系统操作的无缝转换。用户只需通过自然语言下达指令，系统即可自动完成复杂的业务流程，真正实现了 “人说话，系统做事” 的交互模式。

• AI Agent：一个能够理解用户意图、制定执行计划、调用系统工具并返回结果的智能代理。
• 函数调用：AI 模型根据用户需求，自动选择并调用预定义的系统函数来完成具体任务。
• 智能编排：系统能够将复杂的用户请求分解为多个步骤，并智能地编排执行顺序。
• Server-Sent Events (SSE) 是一种允许服务器向客户端推送数据的 Web 标准。与 WebSocket 相比，SSE 更简单，适合单向数据流场景。

还在不断完善优化ing，相信不久也会一起出来了

bug/更好的建议

欢迎大家提出bug 和建议，不仅仅是关于这个后台管理，包括 AI 方面也可以提出，一起完善