xiaokeer-a-vue

项目简介

xiaokeer-a-vue 是一个基于若依框架的企业级后台管理系统前端项目，采用 Vue 3 + Vite + Element Plus 技术栈。项目在若依框架基础上进行了深度定制，核心创新是实现了 XiaokeerElPageContainer 通用 CRUD 页面容器组件，通过配置化方式动态生成表单、表格和查询条件，大幅提升开发效率。

主要特性

• 🔐 完善权限体系：路由权限 + 菜单权限 + 按钮权限 + 角色权限
• 🛣️ 动态路由：后端返回菜单配置，前端动态注册路由
• 📝 配置化 CRUD：一行代码生成完整 CRUD 页面
• 🎨 多种数据视图：表格、分组列表、Excel、卡片四种展示模式
• ⭐ 星星选择机制：单击单选、双击全选的交互设计
• 📊 多种导入方式：表单新增、Excel 导入、图片识别新增

技术栈

类别	技术
核心框架	Vue 3.4
路由管理	Vue Router 4.2
状态管理	Pinia 2.1
构建工具	Vite 5.0
UI 组件库	Element Plus 2.4
HTTP 请求	Axios
数据可视化	ECharts
工具库	@vueuse/core, Hutool

技术亮点

亮点一：动态路由 + 动态表单双重动态化

实现了两层动态化架构：

第一层: 动态路由
后端菜单 → 路由配置解析 → 动态注册路由

第二层: 动态表单
后端配置 → 字段结构解析 → 动态渲染页面

优势：新增业务表只需后端配置，前端零代码

亮点二：XiaokeerElPageContainer 配置化组件

高度抽象的通用 CRUD 页面容器组件：

<!-- 传统方式: 需要编写完整页面代码 -->
<template>
  <el-form>...</el-form>
  <el-table>...</el-table>
</template>

<!-- 本项目方式: 一行代码搞定 -->
<XiaokeerElPageContainer topic="sys_user" />

六大功能模块：

模块	功能说明
custom	插槽扩展，支持父组件自定义内容
link	展示关联的其他资源链接
insert	表单新增、Excel导入、图片识别新增
events	批量操作事件（服务端/前端事件）
query	动态查询条件、分页、导出
data	数据展示（表格/分组列表/Excel/卡片）

亮点三：按钮级权限控制

通过自定义指令实现按钮级权限：

// v-hasPermi 操作权限处理
export default {
  mounted(el, binding, vnode) {
    const { value } = binding;
    const permissions = useUserStore().permissions;

    const hasPermissions = permissions.some((permission) => {
      return (
        all_permission === permission || permissionFlag.includes(permission)
      );
    });

    if (!hasPermissions) {
      el.parentNode && el.parentNode.removeChild(el); // 无权限则移除元素
    }
  },
};

亮点四：星星选择机制

独特的交互设计，支持单选和批量选择：

<xiaokeer-n-click
  :click-event-array="[
    {
      clickCount: 2,
      event: () => {
        /* 双击全选 */
      },
    },
    {
      clickCount: 1,
      event: () => {
        /* 单击单选 */
      },
    },
  ]"
  :timeout="200"
>
  <StarFilled v-if="selectGet(row)===true" class="clazz" />
  <StarFilled v-else style="width: 30px;" />
</xiaokeer-n-click>

亮点五：动态表单渲染

根据后端返回的字段结构动态渲染不同类型的表单控件：

字段类型	渲染方式	样式特点
input	文本显示	绿色加粗
number	数字显示	黄色加粗，支持排序标记
time	日期显示	黄色斜体
json	JSON 显示	橙色加粗
select	标签显示	Element Tag 组件
files	图片显示	图片预览组件

亮点六：前后端事件统一管理

支持服务端事件和前端事件：

interfaceMap.value = [
  { type: 'serverIdsEvent', path: '/api/delete', name: '删除' },
  { type: 'frontIdsEvent', name: '自定义操作', value: (ids) => {...} }
]

相关链接

• 代码仓库：GitHub