zant-admin 1.0.0

package/src/components/edit/SysDictItemEdit.vue

@@ -0,0 +1,134 @@
+<template>
+  <a-drawer
+    :title="editTitle"
+    :width="540"
+    :open="open"
+    :body-style="{ paddingBottom: '80px' }"
+    :footer-style="{ textAlign: 'right' }"
+    @close="onClose"
+    :destroyOnClose="true"
+  >
+    <a-form :model="formInfo" ref="formRef" layout="vertical">
+      <a-form-item
+        label="字典标签"
+        name="label"
+        :rules="[{ required: true, message: '字典标签不能为空' }]"
+      >
+        <a-input
+          :class="formInfo.colorClass"
+          v-model:value="formInfo.label"
+          placeholder="请输入"
+        />
+      </a-form-item>
+      <a-form-item label="字典值" name="value">
+        <a-input-number v-model:value="formInfo.value" placeholder="请输入" />
+      </a-form-item>
+      <a-form-item label="颜色样式" name="colorClass">
+        <a-select v-model:value="formInfo.colorClass" @change="selectColor">
+          <a-select-option value="default">default</a-select-option>
+          <a-select-option value="text-color-primary">primary</a-select-option>
+          <a-select-option value="text-color-success">success</a-select-option>
+          <a-select-option value="text-color-warning">warning</a-select-option>
+          <a-select-option value="text-color-error">error</a-select-option>
+          <a-select-option value="text-color-gray">gray</a-select-option>
+          <a-select-option value="text-color-textgray"
+            >textgray</a-select-option
+          >
+        </a-select>
+      </a-form-item>
+      <a-form-item label="排序" name="sort">
+        <a-input-number v-model:value="formInfo.sort" placeholder="请输入" />
+      </a-form-item>
+      <a-form-item label="是否启用" name="isEnable">
+        <a-switch v-model:checked="formInfo.isEnable" />
+      </a-form-item>
+      <a-form-item label="备注" name="remark">
+        <a-textarea v-model:value="formInfo.remark" />
+      </a-form-item>
+    </a-form>
+    <template #extra>
+      <a-space>
+        <a-button type="primary" @click="onSave" :loading="loading">保存</a-button>
+        <a-button @click="resetForm">重置</a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>
+<script setup>
+import { defineProps, defineEmits, ref, reactive } from 'vue'
+import { message } from 'ant-design-vue'
+import sysDictItem from '@/api/methods/sysDictItem'
+import useFormCRUD from '@/utils/useFormCRUD'
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+  recordwhere: {
+    type: Object,
+    default: {},
+  },
+})
+const defaultformInfo = {
+  id: null,
+  dictId: props.recordwhere.dictId,
+  label: '',
+  colorClass: 'default',
+  value: 0,
+  sort: 0,
+  isEnable: true,
+  remark: '',
+}
+// 使用 reactive 定义表单状态
+const formInfo = reactive({ ...defaultformInfo })
+const editTitle = ref('新增')
+const formRef = ref(null)
+// 定义 emits，用于触发关闭事件
+const emit = defineEmits(['close', 'updateData'])
+/**
+ * 重置表单到默认值
+ */
+const resetForm = () => {
+  Object.assign(formInfo, defaultformInfo)
+  formRef.value?.resetFields()
+}
+const { loading, save } = useFormCRUD(sysDictItem)
+
+const init = async id => {
+   const isEdit = !!id
+  editTitle.value = isEdit ? '修改' : '新增'
+if (isEdit) {
+    try {
+      const res = await sysDictItem.get({ id })
+      Object.assign(formInfo, res.data)
+    } catch (error) {
+      message.error('获取信息失败，请重试')
+    }
+  } else {
+    console.log("ss"+props.recordwhere)
+    resetForm()
+  }
+}
+
+const onSave = async() => {
+  await save(formRef.value, formInfo, {
+    onSuccess: () => {
+      emit('updateData')
+      onClose()
+    }
+  })
+}
+
+const selectColor = e => {
+  console.log(e)
+  formInfo.colorClass = e
+}
+
+const onClose = () => {
+  emit('close')
+}
+// 使用 defineExpose 暴露方法
+defineExpose({
+  init,
+})
+</script>

package/src/components/edit/SysRoleEdit.vue

@@ -0,0 +1,109 @@
+<template>
+  <a-drawer
+    :title="editTitle"
+    :width="540"
+    :open="open"
+    :body-style="{ paddingBottom: '80px' }"
+    :footer-style="{ textAlign: 'right' }"
+    @close="onClose"
+    :destroyOnClose="true"
+  >
+    <a-form :model="formInfo" ref="formRef" layout="vertical">
+      <a-form-item
+        label="角色名称"
+        name="name"
+        :rules="[{ required: true, message: '角色名称不能为空' }]"
+      >
+        <a-input v-model:value="formInfo.name" placeholder="请输入" />
+      </a-form-item>
+      <a-form-item label="是否启用" name="isEnable">
+        <a-switch v-model:checked="formInfo.isEnable" />
+      </a-form-item>
+      <a-form-item label="备注" name="remark">
+        <a-textarea v-model:value="formInfo.remark" />
+      </a-form-item>
+    </a-form>
+    <template #extra>
+      <a-space>
+        <a-button type="primary" @click="onSave" :loading="loading">保存</a-button>
+        <a-button @click="resetForm">重置</a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>
+<script setup>
+import { defineProps, defineEmits, ref, reactive } from 'vue'
+import { message } from 'ant-design-vue'
+import sysRole from '@/api/methods/sysRole'
+import useFormCRUD from '@/utils/useFormCRUD'
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+})
+// 表单字段的默认值
+const defaultformInfo = {
+  id: null,
+  name: '',
+  isEnable: true,
+  remark: '',
+}
+// 响应式数据
+const formInfo = reactive({ ...defaultformInfo })
+const editTitle = ref('新增')
+const formRef = ref(null)
+// 定义 emits，用于触发关闭事件
+const emit = defineEmits(['close', 'updateData'])
+
+/**
+ * 重置表单到默认值
+ */
+const resetForm = () => {
+  Object.assign(formInfo, defaultformInfo)
+  formRef.value?.resetFields()
+}
+const { loading, save } = useFormCRUD(sysRole)
+/**
+ * 初始化角色编辑表单
+ * @param {number} id - 角色ID，如果为0或空则表示新增角色
+ */
+const init = async id => {
+  const isEdit = !!id
+  editTitle.value = isEdit ? '修改' : '新增'
+
+  if (isEdit) {
+    try {
+      const res = await sysRole.get({ id })
+      Object.assign(formInfo, res.data)
+    } catch (error) {
+      message.error('获取信息失败，请重试')
+    }
+  } else {
+    resetForm()
+  }
+}
+
+/**
+ * 保存角色信息
+ * 处理表单验证和角色新增/修改操作
+ */
+const onSave = async () => {
+   await save(formRef.value, formInfo, {
+    onSuccess: () => {
+      emit('updateData')
+      onClose()
+    }
+  })
+}
+/**
+ * 关闭抽屉组件
+ * 触发关闭事件并通知父组件
+ */
+const onClose = () => {
+  resetForm()
+  emit('close')
+}
+// 使用 defineExpose 暴露方法
+defineExpose({ init })
+</script>

package/src/components/edit/sysMenuEdit.vue

@@ -0,0 +1,305 @@
+<template>
+  <a-drawer
+    :title="editTitle"
+    :width="640"
+    :open="open"
+    :body-style="{ paddingBottom: '80px' }"
+    :footer-style="{ textAlign: 'right' }"
+    @close="onClose"
+    :destroyOnClose="true"
+  >
+    <a-skeleton :loading="initloading" active>
+      <a-form :model="formInfo" ref="formRef" layout="vertical">
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="菜单名称" name="title">
+              <a-input v-model:value="formInfo.title" placeholder="请输入" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="类型">
+              <a-radio-group v-model:value="formInfo.type">
+                <a-radio :value="1">目录</a-radio>
+                <a-radio :value="2">菜单</a-radio>
+                <a-radio :value="3">链接</a-radio>
+                <a-radio :value="4">按钮</a-radio>
+              </a-radio-group>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="上级目录" name="parentId">
+              <a-tree-select
+                v-model:value="formInfo.parentId"
+                show-search
+                style="width: 100%"
+                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+                placeholder="请选择"
+                allow-clear
+                tree-default-expand-all
+                :tree-data="menuList"
+                tree-node-filter-prop="label"
+                @change="selecthandleChange"
+              >
+              </a-tree-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item
+              label="命名路由"
+              name="path"
+            >
+              <a-input v-model:value="formInfo.path" placeholder="请输入" />
+            </a-form-item>
+
+
+          </a-col>
+        </a-row>
+           <a-row :gutter="16"   v-if="formInfo.type == 3" >
+          <a-col :span="12">
+            <a-form-item label="是否外链" name="cache">
+              <a-switch v-model:checked="formInfo.isExternalLink" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="链接" name="url">
+              <a-input v-model:value="formInfo.url" placeholder="请输入" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="12">
+           <a-form-item label="权限标识" name="perms">
+              <a-input v-model:value="formInfo.perms" placeholder="请输入" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+
+            <a-form-item label="排序" name="Sort">
+              <a-input-number
+                v-model:value="formInfo.sort"
+                style="width: 100%"
+                placeholder="请输入"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="图标" name="icon">
+              <IconPicker v-model:value="formInfo.icon" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16" v-if="formInfo.type == 2">
+          <a-col :span="24">
+            <a-form-item label="预置按钮">
+              <a-checkbox-group
+                v-model:value="formInfo.btnoptions"
+                name="checkboxgroup"
+                :options="btnoptions"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="是否启用" name="isEnable">
+              <a-switch v-model:checked="formInfo.isEnable" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item
+              label="是否开启缓存"
+              name="cache"
+
+            >
+              <a-switch v-model:checked="formInfo.cache" />
+            </a-form-item>
+          </a-col>
+           <a-col :span="12">
+            <a-form-item
+              label="显示系统菜单栏"
+              name="isShowMenu"
+
+            >
+              <a-switch v-model:checked="formInfo.isShowMenu" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-skeleton>
+    <template #extra>
+      <a-space>
+        <a-button type="primary" @click="onSave" :loading="loading"
+          >保存</a-button
+        >
+        <a-button @click="resetForm">重置</a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>
+<script setup>
+import { defineProps, defineEmits, ref, reactive, computed } from 'vue'
+import { message } from 'ant-design-vue'
+import sysMenu from '@/api/methods/sysMenu'
+import useFormCRUD from '@/utils/useFormCRUD'
+import IconPicker from '@/components/IconPicker.vue'
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+})
+// 根据权限标识动态生成按钮选项
+const btnoptions = computed(() => {
+  const basePerms = formInfo.perms || '';
+  return [
+    {
+      label: '详情',
+      value: basePerms ? `${basePerms}:details` : 'details',
+    },
+    {
+      label: '新增',
+      value: basePerms ? `${basePerms}:add` : 'add',
+    },
+    {
+      label: '修改',
+      value: basePerms ? `${basePerms}:update` : 'update',
+    },
+    {
+      label: '删除',
+      value: basePerms ? `${basePerms}:delete` : 'delete',
+    },
+    {
+      label: '导入',
+      value: basePerms ? `${basePerms}:import` : 'import',
+    },
+    {
+      label: '导出',
+      value: basePerms ? `${basePerms}:export` : 'export',
+    },
+  ];
+});
+//表单字段的默认值
+const defaultformInfo = {
+  id: null,
+  parentId: '0',
+  title: '',
+  path: '/',
+  icon: '',
+  url: '',
+  sort: 0,
+  isEnable: true,
+  cache: true,
+  isShowMenu: true,
+  type: 1,
+  isExternalLink: false,
+  perms:'',
+  btnoptions: [],
+}
+// 使用 reactive 定义表单状态
+const formInfo = reactive({ ...defaultformInfo })
+const editTitle = ref('新增')
+const formRef = ref(null)
+const menuList = ref([])
+// 定义 emits，用于触发关闭事件
+const emit = defineEmits(['close', 'updateData'])
+
+/**
+ * 重置表单到默认值
+ */
+const resetForm = () => {
+  Object.assign(formInfo, defaultformInfo)
+  formRef.value?.resetFields()
+}
+const { loading, save } = useFormCRUD(sysMenu)
+
+// 获取菜单树数据
+const getMenuTree = async () => {
+  try {
+    const res = await sysMenu.getTreeSelectMenu()
+    menuList.value = res.data
+  } catch (error) {}
+}
+const initloading = ref(false)
+// 初始化方法
+const init = async id => {
+  initloading.value = true
+  const isEdit = !!id
+  editTitle.value = isEdit ? '修改' : '新增'
+
+  if (isEdit) {
+    try {
+      const res = await sysMenu.get({ id })
+      initloading.value = false
+      Object.assign(formInfo, res.data)
+
+    } catch (error) {
+      message.error('获取信息失败，请重试')
+    }
+  } else {
+    initloading.value = false
+    resetForm()
+  }
+}
+
+// 保存操作
+const onSave = async () => {
+  await save(formRef.value, formInfo, {
+    onSuccess: () => {
+      emit('updateData')
+      onClose()
+    },
+  })
+}
+
+// 选择处理变化
+const selecthandleChange = value => {
+  if (value == '0') {
+    formInfo.path = '/'
+  } else {
+    menuList.value.forEach(item => {
+      if (item.value == value) {
+        formInfo.path = item.path + '/'
+      }
+    })
+  }
+}
+
+// 添加子菜单
+const addSubmenu = record => {
+  editTitle.value = '新增子菜单'
+  resetForm()
+  formInfo.id = null
+  formInfo.parentId = record.id
+  formInfo.path = record.path + '/'
+  formInfo.sort = record.sort
+}
+const addSubtn = record => {
+  editTitle.value = '新增按照'
+  resetForm()
+  formInfo.id = null
+  formInfo.parentId = record.id
+  formInfo.path = ''
+  formInfo.perms = record.perms
+  formInfo.sort = record.sort
+  formInfo.type = 4
+}
+// 关闭处理
+const onClose = () => {
+  resetForm()
+  emit('close')
+}
+
+// 使用 defineExpose 暴露方法
+defineExpose({
+  init,
+  getMenuTree,
+  addSubmenu,
+  addSubtn,
+})
+</script>

package/src/config/index.js

@@ -0,0 +1,74 @@
+/**
+ * 全局配置文件
+ * 用于定义项目的全局配置信息
+ */
+
+// 项目基本信息
+export const projectConfig = {
+  // 项目名称
+  name: 'ZAntAdmin',
+  // 项目版本
+  version: '1.0.0',
+  // 项目描述
+  description: '基于 Vue 3.5 + Ant Design Vue 的管理系统',
+  // 项目作者
+  author: 'ZC',
+  // 项目主页
+  homepage: '',
+  // 项目仓库
+  repository: '',
+}
+
+// API 配置
+export const apiConfig = {
+  // API 基础路径
+  baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
+  // 请求超时时间
+  timeout: 10000,
+  // 请求头
+  headers: {
+    'Content-Type': 'application/json',
+  },
+}
+
+// 应用配置
+export const appConfig = {
+  // 应用标题
+  title: projectConfig.name,
+  // 应用图标
+  icon: '/logo.png',
+  // 默认语言
+  defaultLanguage: 'zh-cn',
+  // 默认主题
+  defaultTheme: 'dark',
+  // 默认导航模式
+  defaultNavigationMode: 'side',
+  // 默认表格大小
+  defaultTableSize: 'middle',
+  // 默认表格边框
+  defaultTableBordered: true,
+  // 是否显示页脚
+  showFooter: true,
+  // 页脚文本
+  footerText: `© ${new Date().getFullYear()} ${projectConfig.name}`,
+}
+
+// 路由配置
+export const routerConfig = {
+  // 首页路径
+  homePath: '/console',
+  // 登录页路径
+  loginPath: '/login',
+  // 404 页面路径
+  notFoundPath: '/404',
+  // 是否开启路由守卫
+  guard: true,
+}
+
+// 默认导出所有配置
+export default {
+  project: projectConfig,
+  api: apiConfig,
+  app: appConfig,
+  router: routerConfig,
+}

package/src/directives/permission.js

@@ -0,0 +1,45 @@
+import { menuStore } from '@/stores/menu'
+
+/**
+ * 按钮权限指令
+ * 使用方式：v-permission="'user:add'" 或 v-permission="['user:add', 'user:edit']"
+ */
+const permission = {
+  mounted(el, binding) {
+    const { value } = binding
+    const store = menuStore()
+    const { permissions } = store
+
+    if (value && value instanceof Array) {
+      // 多个权限，满足其中一个即可
+      const hasPermission = value.some(permission => permissions.includes(permission))
+      if (!hasPermission) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    } else if (value && typeof value === 'string') {
+      // 单个权限
+      if (!permissions.includes(value)) {
+        el.parentNode && el.parentNode.removeChild(el)
+      }
+    }
+  },
+  updated(el, binding) {
+    // 更新时重新检查权限
+    const { value } = binding
+    const store = menuStore()
+    const { permissions } = store
+
+    if (value && value instanceof Array) {
+      const hasPermission = value.some(permission => permissions.includes(permission))
+      if (!hasPermission && el.parentNode) {
+        el.parentNode.removeChild(el)
+      }
+    } else if (value && typeof value === 'string') {
+      if (!permissions.includes(value) && el.parentNode) {
+        el.parentNode.removeChild(el)
+      }
+    }
+  }
+}
+
+export default permission

package/src/main.js

@@ -0,0 +1,38 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import piniaPersist from 'pinia-plugin-persist'
+import Antd from 'ant-design-vue'
+import App from './App.vue'
+import router from './router'
+import './assets/css/style.css'
+import './assets/css/zcui.css'
+import * as Icons from '@ant-design/icons-vue'
+// 引入权限指令
+import permission from './directives/permission'
+// 引入 Ant Design Vue 的语言包
+
+const app = createApp(App)
+// 注册所有图标为全局组件
+Object.keys(Icons).forEach(key => {
+  app.component(key, Icons[key])
+})
+// 将图标注册为全局变量
+app.config.globalProperties.$icons = Icons
+
+const pinia = createPinia()
+// 配置 Pinia 持久化插件
+pinia.use(piniaPersist)
+// 使用 Pinia
+app.use(pinia)
+//使用 Ant Design
+app.use(Antd)
+
+ // 使用路由
+app.use(router)
+
+// 注册权限指令
+app.directive('permission', permission)
+
+    // 挂载应用
+app.mount('#app')
+