组件概览

CmdAdmin 提供了一系列实用的 Vue 组件和组合式函数，帮助开发者快速构建管理后台。

基础组件

字典组件

基于系统字典数据自动渲染的表单组件，支持字典数据的自动加载和缓存。

组件名	说明	用途
DictSelect	字典下拉选择器	表单中的下拉选择
DictRadio	字典单选组	表单中的单选选项
DictTag	字典标签	表格中显示字典值

字典组件示例

<template>
  <el-form>
    <!-- 字典下拉选择 -->
    <el-form-item label="用户状态">
      <DictSelect v-model="form.status" dictType="sys_user_status" />
    </el-form-item>
    
    <!-- 字典单选 -->
    <el-form-item label="性别">
      <DictRadio v-model="form.gender" dictType="sys_user_gender" />
    </el-form-item>
  </el-form>
  
  <!-- 表格中显示字典值 -->
  <el-table :data="tableData">
    <el-table-column prop="status" label="状态">
      <template #default="{ row }">
        <DictTag :value="row.status" dictType="sys_user_status" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { DictSelect, DictRadio, DictTag } from '@/components/Dict'

const form = ref({
  status: '',
  gender: ''
})
</script>

组合式函数

函数名	说明	用途
useCrud	通用 CRUD 操作	封装列表查询、分页、删除等操作

useCrud 示例

<script setup>
import { useCrud } from '@/composables/useCrud'
import { userApi } from '@/services/modules/user'

const {
  loading,
  tableData,
  total,
  queryParams,
  fetchList,
  handleQuery,
  resetQuery,
  handleDelete,
  handleBatchDelete
} = useCrud({
  api: userApi,
  defaultQuery: {
    username: ''
  }
})
</script>

指令

指令名	说明	用途
v-permission	权限控制	按钮级别的权限控制

v-permission 示例

<template>
  <!-- 有权限时显示，无权限时移除元素 -->
  <el-button v-permission="'system:user:add'">新增用户</el-button>
  
  <!-- 有权限时显示，无权限时禁用 -->
  <el-button v-permission:disabled="'system:user:edit'">编辑</el-button>
  
  <!-- 有权限时显示，无权限时隐藏 -->
  <el-button v-permission.hide="'system:user:delete'">删除</el-button>
</template>

功能模块

个人中心

个人中心模块提供用户信息管理功能：

• 修改个人信息：昵称、邮箱、手机号
• 修改头像：支持图片裁剪上传
• 修改密码：需要验证原密码
• 登录历史：查看近期登录记录

相关页面位于 views/profile/ 目录。

系统设置

系统设置模块提供系统级配置：

• 主题设置：暗黑/亮色模式切换
• 布局设置：侧边栏/顶部导航布局
• 系统参数：运行时参数配置

相关页面位于 views/settings/ 目录。

定时任务

定时任务模块基于 Quartz 实现：

• 任务管理：Cron 表达式配置
• 任务控制：启动、暂停、恢复、立即执行
• 执行日志：记录每次执行结果

相关页面位于 views/system/job/ 目录。

系统监控

系统监控模块提供实时监控功能：

• 服务器监控：CPU、内存、磁盘、JVM
• 缓存监控：Redis 连接状态、Key 管理
• 在线用户：当前在线用户列表

相关页面位于 views/monitor/ 目录。

第三方组件集成

CmdAdmin 集成了多种优秀的第三方组件：

组件	说明	文档
WangEditor	富文本编辑器	查看示例
FormCreate	动态表单设计器	查看示例
LuckySheet	在线 Excel 表格	查看示例
Monaco Editor	代码编辑器	查看示例
Vue Cropper	图片裁剪	查看示例
ECharts	图表库	查看示例

路由加载优化

CmdAdmin 使用 import.meta.glob 自动扫描视图组件，无需手动维护组件映射表：

// stores/auth.ts
const modules = import.meta.glob('@/views/**/*.vue')

const registerRoutes = (menus: Menu[]) => {
  menus.forEach(menu => {
    const component = modules[`/src/views/${menu.component}.vue`]
    if (component) {
      // 动态注册路由
    }
  })
}

优势：

• ✅ 无需手动维护组件映射表
• ✅ 新增页面自动识别
• ✅ 减少维护成本
• ✅ 解决刷新后动态路由丢失问题