accompany_admin_pc/src/views/system/menu/index.vue

<template>
  <n-layout class="menu-management">
    <n-layout-header bordered class="menu-management__header">
      <div class="title">菜单管理</div>
      <n-button type="primary" @click="handleAddParent" size="small">
        <template #icon>
          <n-icon>
            <Add />
          </n-icon>
        </template>
        添加父级菜单
      </n-button>
    </n-layout-header>

    <n-layout-content class="menu-management__content">
      <n-spin :show="loading">
        <n-tree block-line :data="menuTree" :renderLabel="renderTreeLabel" :selectable="false">
          <template #empty>
            <ls-empty type="no-data" description="Not Found 404" title="无数据"></ls-empty>
          </template>
        </n-tree>
      </n-spin>
    </n-layout-content>

    <!-- 父级菜单表单弹窗 -->
    <n-modal v-model:show="showParentModal" preset="dialog" style="width:640px" :title="parentModalTitle">
      <n-card style="width: 600px;">
        <n-form ref="parentFormRef" :model="parentForm" :rules="parentRules" label-placement="left" label-width="auto"
          require-mark-placement="right-hanging">
          <n-form-item label="菜单名称" path="label">
            <n-input v-model:value="parentForm.label" placeholder="请输入菜单名称" />
          </n-form-item>
          <n-form-item path="path">
            <template #label>
              菜单路径
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-icon size="16">
                    <HelpCircle />
                  </n-icon>
                </template>
                前缀不要加 “/”，代码已经统一处理，请勿加“/”
              </n-tooltip>
            </template>
            <n-input v-model:value="parentForm.path" placeholder="请输入菜单路径" />
          </n-form-item>
          <n-form-item label="菜单编码" path="menuCode">
            <n-input v-model:value="parentForm.menuCode" placeholder="请输入菜单编码" />
          </n-form-item>
          <n-form-item label="菜单图标" path="icon">
            <n-select v-model:value="parentForm.icon" :options="iconOptions" filterable clearable placeholder="请选择图标名称"
              :render-label="renderLabel" />
          </n-form-item>
          <n-form-item label="组件路径" path="component">
            <template #label>
              组件路径
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-icon size="16">
                    <HelpCircle />
                  </n-icon>
                </template>
                /src/views/下的组件，比如/src/views/home/index.vue，就填写home/index.vue
              </n-tooltip>
            </template>
            <n-input-group>
              <n-input :style="{ width: '60%' }" v-model:value="parentForm.component" placeholder="请输入组件路径"
                :disabled="menuType === 'list'" />
              <n-radio-group :style="{ width: '40%' }" v-model:value="menuType">
                <n-radio-button label="菜单" value="menu" />
                <n-radio-button label="目录" value="list"></n-radio-button>
              </n-radio-group>
            </n-input-group>
          </n-form-item>
          <n-form-item label="适配方式" path="adaptability">
            <n-select v-model:value="parentForm.adaptability" :options="adaptabilityOptions" placeholder="请选择适配方式" />
          </n-form-item>
          <n-form-item label="排序" path="sort">
            <n-input-number v-model:value="parentForm.sort" :min="0" />
          </n-form-item>
          <n-form-item label="状态" path="status">
            <n-radio-group v-model:value="parentForm.status">
              <n-space>
                <n-radio value="enable">启用</n-radio>
                <n-radio value="disabled">禁用</n-radio>
              </n-space>
            </n-radio-group>
          </n-form-item>
          <n-form-item label="查询参数" path="query">
            <n-input v-model:value="parentForm.query" type="textarea" placeholder="请输入查询参数(JSON格式)" />
          </n-form-item>
        </n-form>
      </n-card>
      <template #action>
        <n-space justify="end">
          <n-button @click="showParentModal = false">取消</n-button>
          <n-button type="primary" @click="handleSubmitParent">确认</n-button>
        </n-space>
      </template>
    </n-modal>

    <!-- 子级菜单表单弹窗 -->
    <n-modal v-model:show="showChildModal" preset="dialog" :title="childModalTitle" style="width:680px">
      <n-card style="width: 640px;">
        <n-form ref="childFormRef" :model="childForm" :rules="childRules" label-placement="left" label-width="auto"
          require-mark-placement="right-hanging">
          <n-form-item label="父级菜单" path="parentId">
            <n-select v-model:value="childForm.parentId" :options="parentMenuOptions" placeholder="请选择父级菜单"
              :disabled="isEditChild" />
          </n-form-item>
          <n-form-item label="菜单名称" path="label">
            <n-input v-model:value="childForm.label" placeholder="请输入菜单名称" />
          </n-form-item>
          <n-form-item path="path">
            <template #label>
              菜单路径
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-icon size="16">
                    <HelpCircle />
                  </n-icon>
                </template>
                前缀不要加 “/”，代码已经统一处理，请勿加“/”
              </n-tooltip>
            </template>
            <n-input v-model:value="childForm.path" placeholder="请输入菜单路径" />
          </n-form-item>
          <n-form-item label="菜单编码" path="menuCode">
            <n-input v-model:value="childForm.menuCode" placeholder="请输入菜单编码" />
          </n-form-item>
          <n-form-item label="菜单图标" path="icon">
            <n-select v-model:value="childForm.icon" :options="iconOptions" filterable clearable placeholder="请选择图标名称"
              :render-label="renderLabel" />
          </n-form-item>
          <n-form-item path="component">
            <template #label>
              组件路径
              <n-tooltip trigger="hover">
                <template #trigger>
                  <n-icon size="16">
                    <HelpCircle />
                  </n-icon>
                </template>
                /src/views/下的组件，比如/src/views/home/index.vue，就填写home/index.vue
              </n-tooltip>
            </template>
            <n-input :style="{ width: '60%' }" v-model:value="childForm.component" placeholder="请输入组件路径"
              :disabled="menuType === 'list'" />
            <n-radio-group :style="{ width: '40%' }" v-model:value="menuType">
              <n-radio-button label="菜单" value="menu" />
              <n-radio-button label="目录" value="list"></n-radio-button>
            </n-radio-group>
          </n-form-item>
          <n-form-item label="适配方式" path="adaptability">
            <n-select v-model:value="childForm.adaptability" :options="adaptabilityOptions" placeholder="请选择适配方式" />
          </n-form-item>
          <n-form-item label="排序" path="sort">
            <n-input-number v-model:value="childForm.sort" :min="0" />
          </n-form-item>
          <n-form-item label="状态" path="status">
            <n-radio-group v-model:value="childForm.status">
              <n-space>
                <n-radio value="enable">启用</n-radio>
                <n-radio value="disabled">禁用</n-radio>
              </n-space>
            </n-radio-group>
          </n-form-item>
          <n-form-item label="查询参数" path="query">
            <n-input v-model:value="childForm.query" type="textarea" placeholder="请输入查询参数(JSON格式)" />
          </n-form-item>
        </n-form>
      </n-card>
      <template #action>
        <n-space justify="end">
          <n-button @click="showChildModal = false">取消</n-button>
          <n-button type="primary" @click="handleSubmitChild">确认</n-button>
        </n-space>
      </template>
    </n-modal>
  </n-layout>
</template>

<script setup lang="ts">
import { Add, Create, Trash, HelpCircle } from '@vicons/ionicons5'
import {
  addParentMenu,
  editParentMenu,
  addChildMenu,
  eidtChildMenu,
  getAllMenu,
  deleteMenu,
  type MenuNode,
  type RawMenu
} from '@/api/menu'
import { FormInst, FormRules, NButton, NIcon, NSpace, NTag, SelectOption, TreeOption, useDialog, useMessage } from 'naive-ui'
import SvgIcon from '@/components/SvgIcon.vue'

// 状态管理
const loading = ref(false)
const menuTree = ref<TreeOption[]>([])

// 父级菜单表单相关
const showParentModal = ref(false);
const parentFormRef = ref<FormInst | null>(null);
const menuType = ref<'menu' | 'list'>('menu'); //菜单类型
const parentForm = ref<Omit<RawMenu, 'uuid' | 'parentId'>>({
  path: '',
  label: '',
  icon: '',
  menuCode: '',
  menuName: '',
  adaptability: 'pc',
  component: '',
  sort: 0,
  status: 'enable',
  query: ''
})
const parentRules: FormRules = {
  label: { required: true, message: '请输入菜单名称', trigger: 'blur' },
  path: { required: true, message: '请输入菜单路径', trigger: 'blur' },
  component: { required: true, message: '请输入组件路径', trigger: 'blur' },
  icon: { required: true, message: '请选择菜单图标', trigger: 'blur' }
}
const isEditParent = ref(false)
const currentParentId = ref('')
const message = useMessage();
const dialog = useDialog();
// 定义图标选项类型
interface IconOption extends SelectOption {
  value: string
  label: string
  icon: string
}
const svgIcons = ref<string[]>([])
// 加载 SVG 图标文件列表
const loadSvgIcons = async () => {
  try {
    // 使用 import.meta.glob 获取所有 SVG 文件
    const svgModules = import.meta.glob('/src/assets/icons/*.svg', { eager: true })

    // 提取文件名（不带后缀）
    svgIcons.value = Object.keys(svgModules).map(path => {
      const fileName = path.split('/').pop() || ''
      return fileName.replace('.svg', '')
    })
  } catch (error) {
    console.error('加载图标失败:', error)
    svgIcons.value = []
  }
}
// 转换为选择器选项
const iconOptions = computed<IconOption[]>(() => {
  return svgIcons.value.map(icon => ({
    value: icon,
    label: icon,
    icon: icon
  }))
})
// 自定义渲染选项
const renderLabel = (option: IconOption) => {
  return h('div', { class: 'flex-content between' }, [
    h('span', { class: 'mr-2' }, option.label),
    h(SvgIcon, {
      'icon-class': option.icon,
      width: '16',
      height: '16',
      color: '#4090EF'
    })
  ])
}
// 子级菜单表单相关
const showChildModal = ref(false)
const childFormRef = ref<FormInst | null>(null)
const childForm = ref<Omit<RawMenu, 'uuid'>>({
  parentId: '',
  path: '',
  label: '',
  icon: '',
  menuCode: '',
  menuName: '',
  adaptability: 'pc',
  component: '',
  sort: 0,
  status: 'enable',
  query: ''
})
const childRules: FormRules = {
  parentId: { required: true, message: '请选择父级菜单', trigger: 'blur' },
  label: { required: true, message: '请输入菜单名称', trigger: 'blur' },
  path: { required: true, message: '请输入菜单路径', trigger: 'blur' },
  component: { required: true, message: '请输入组件路径', trigger: 'blur' },
  icon: { required: true, message: '请选择菜单图标', trigger: 'blur' }
}
const isEditChild = ref(false)
const currentChildId = ref('')

// 适配方式选项
const adaptabilityOptions = [
  { label: 'PC端', value: 'pc' },
  { label: '移动端', value: 'mobile' },
  { label: '响应式', value: 'responsive' }
]

// 计算属性
const parentModalTitle = computed(() => (isEditParent.value ? '编辑父级菜单' : '添加父级菜单'))
const childModalTitle = computed(() => (isEditChild.value ? '编辑子级菜单' : '添加子级菜单'))

// 父级菜单选项
const parentMenuOptions = computed<SelectOption[]>(() => {
  console.log(menuTree.value, 'menuTree.value');
  return menuTree.value.map(menu => ({
    label: menu.label,
    value: menu.key
  }))
})


const { stop } = watch(menuType, (newVal) => {
  if (newVal === 'list') {
    parentForm.value.component = 'view-router';
    childForm.value.component = 'view-router';
  } else {
    parentForm.value.component = '';
    childForm.value.component = '';
  }
})
// 生命周期钩子
onMounted(() => {
  loadSvgIcons();
  fetchMenuData();
});
onBeforeUnmount(() => {
  stop();
})

const renderTreeLabel = ({ option }) => {
  console.log(option,'option');
  return h('div', {
    style: {
      display: 'flex',
      alignItems: 'center',
      // justifyContent: 'space-between',
      width: '100%'
    }
  }, [
    h('span', {
      style: {
        fontSize: '14px',
        color: '#808080',
        fontWeight: 'bold',
        marginRight: '12px'
      }
    }, option.label),
    h(NTag, {
      type: option?.rawData.status === 'enable' ? 'success' : 'error',
      size: 'small'
    }, option?.rawData.status === 'enable' ? 'Enabled' : 'Disabled')
  ])
}
/**
 * 将菜单数据转换为树形组件所需的数据结构
 * @param data 原始菜单数据
 * @returns 转换后的树形数据
 */
const transformTreeData = (data: MenuNode[]): TreeOption[] => {
  return data.map((item) => {
    const treeNode: TreeOption = {
      label: item.label,
      key: item.uuid, // 使用 uuid 作为唯一标识
      icon: item.icon, // 保留图标信息
      isLeaf: item.component !== 'view-router',
      // 保留原始数据，方便后续操作
      rawData: {
        ...item,
        parentId: item.parentId
      },
      // 添加自定义前缀（图标）
      prefix: () =>
        item.icon
          ? h(SvgIcon, {
            'icon-class': item.icon,
            width: '16',
            height: '16',
            color: '#4090EF',
            style: 'margin-right:6px'
          })
          : null,
      // 添加自定义后缀（操作按钮）
      suffix: () =>
        h(
          NSpace,
          { justify: 'end', style: 'margin-left: 12px' },
          {
            default: () => [
              // 添加子菜单按钮（非叶子节点显示）
              !treeNode.isLeaf
                ? h(
                  NButton,
                  {
                    size: 'large',
                    text: true,
                    onClick: (e: MouseEvent) => {
                      e.stopPropagation()
                      handleAddChild(item.uuid)
                    }
                  },
                  { icon: () => h(NIcon, { color: 'green' }, { default: () => h(Add) }) }
                )
                : null,
              // 编辑按钮
              h(
                NButton,
                {
                  size: 'large',
                  text: true,
                  onClick: (e: MouseEvent) => {
                    e.stopPropagation()
                    item.parentId === null
                      ? handleEditParent(item)
                      : handleEditChild(item)
                  }
                },
                { icon: () => h(NIcon, { color: '#4090EF' }, { default: () => h(Create) }) }
              ),
              // 删除按钮
              h(
                NButton,
                {
                  size: 'large',
                  text: true,
                  type: 'error',
                  onClick: (e: MouseEvent) => {
                    e.stopPropagation()
                    handleDelete(item.uuid)
                  }
                },
                { icon: () => h(NIcon, null, { default: () => h(Trash) }) }
              )
            ]
          }
        )
    }

    // 递归处理子节点
    if (item.children && item.children.length > 0) {
      treeNode.children = transformTreeData(item.children)
    }

    return treeNode
  })
}

// 获取数据后
const fetchMenuData = async () => {
  try {
    loading.value = true
    const res = await getAllMenu()
    if (!Array.isArray(res) || !res) throw new Error('菜单数据格式错误！');
    menuTree.value = transformTreeData(res)
  } catch (error) {
    message.error(error.message || '获取菜单数据失败！');
  } finally {
    loading.value = false;
  }
}

const handleAddParent = () => {
  isEditParent.value = false
  parentForm.value = {
    path: '',
    label: '',
    icon: '',
    menuCode: '',
    menuName: '',
    adaptability: 'pc',
    component: '',
    sort: 0,
    status: 'enable',
    query: ''
  }
  menuType.value = 'menu';
  showParentModal.value = true;
}

const handleEditParent = (menu: MenuNode) => {
  isEditParent.value = true
  currentParentId.value = menu.uuid
  parentForm.value = {
    path: menu.path,
    label: menu.label,
    icon: menu.icon,
    menuCode: menu.menuCode,
    menuName: menu.menuName,
    adaptability: menu.adaptability,
    component: menu.component,
    sort: menu.sort,
    status: menu.status,
    query: menu.query
  }
  menuType.value = menu.component === 'view-router' ? 'list' : 'menu';
  showParentModal.value = true
}

const handleSubmitParent = () => {
  parentFormRef.value?.validate(async errors => {
    if (!errors) {
      try {
        if (isEditParent.value) {
          await editParentMenu({
            uuid: currentParentId.value,
            ...parentForm.value
          })
        } else {
          await addParentMenu(parentForm.value)
        }
        showParentModal.value = false;
        message.success('操作成功！');
        await fetchMenuData()
      } catch (error) {
        message.error(error.message || '操作失败！');
      }
    }
  })
}

const handleAddChild = (parentId: string) => {
  isEditChild.value = false
  childForm.value = {
    parentId,
    path: '',
    label: '',
    icon: '',
    menuCode: '',
    menuName: '',
    adaptability: 'pc',
    component: '',
    sort: 0,
    status: 'enable',
    query: ''
  }
  menuType.value = 'menu';
  showChildModal.value = true
}

const handleEditChild = (menu: MenuNode) => {
  isEditChild.value = true
  currentChildId.value = menu.uuid
  childForm.value = {
    parentId: menu.parentId,
    path: menu.path,
    label: menu.label,
    icon: menu.icon,
    menuCode: menu.menuCode,
    menuName: menu.menuName,
    adaptability: menu.adaptability,
    component: menu.component,
    sort: menu.sort,
    status: menu.status,
    query: menu.query
  }
  menuType.value = menu.component === 'view-router' ? 'list' : 'menu';
  showChildModal.value = true
}

const handleSubmitChild = () => {
  childFormRef.value?.validate(async errors => {
    if (!errors) {
      try {
        if (isEditChild.value) {
          await eidtChildMenu({
            uuid: currentChildId.value,
            ...childForm.value
          })
        } else {
          await addChildMenu(childForm.value)
        }
        showChildModal.value = false;
        message.success('操作成功！');
        await fetchMenuData()
      } catch (error) {
        message.error(error.message || '删除失败!');
      }
    }
  })
}

const handleDelete = (uuid: string) => {
  dialog.warning({
    title: '警告',
    content: '你确定删除此菜单及下面的子菜单吗？',
    positiveText: '确定',
    negativeText: '不确定',
    draggable: true,
    onPositiveClick: async () => {
      try {
        await deleteMenu(uuid)
        await fetchMenuData()
      } catch (error) {
        message.error(error.message || '删除失败!');
      }
    },
    onNegativeClick: () => {
      message.info('取消操作')
    }
  })

}
</script>

<style lang="scss" scoped>
.menu-management {
  height: 100vh;
  display: flex;
  flex-direction: column;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--n-color);
    padding: $normolGap;

    .title {
      font-size: 18px;
      font-weight: bold;
      color: $titleTextColor;
    }
  }

  &__content {
    padding: 20px;
    flex: 1;
    overflow: auto;
  }

  &__tree-node {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 4px 0;

    &:hover {
      .menu-management__tree-actions {
        opacity: 1;
      }
    }
  }

  &__tree-label {
    flex: 1;
    margin-right: 8px;
  }

  &__tree-actions {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }
}
</style>