create-simpleadmin-ui 2.0.0

package/template/src/views/system/menu/index.vue

@@ -0,0 +1,822 @@
+<script setup lang="ts">
+defineOptions({ name: 'SaMenuPage' })
+
+import { computed, nextTick, onActivated, onMounted, reactive, ref } from 'vue'
+import type { TableInstance } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Refresh, Folder, Menu as MenuIcon, Key } from '@element-plus/icons-vue'
+import { get, post, put, del } from '@/utils/request'
+import AppPage from '@/components/AppPage.vue'
+import { resolveMenuIcon, resolveMenuIconOptions } from '@/constants/menuIcons'
+
+interface MenuNode {
+  id: number
+  parentId: number
+  menuName: string
+  menuType: string
+  orderNum: number
+  path?: string
+  component?: string
+  perms?: string
+  icon?: string
+  status: number
+  isVisible: boolean
+  children?: MenuNode[]
+}
+
+interface MenuForm {
+  id?: number
+  parentId: number
+  menuName: string
+  menuType: string
+  orderNum: number
+  path: string
+  component: string
+  query: string
+  isFrame: boolean
+  isCache: boolean
+  isVisible: boolean
+  status: number
+  perms: string
+  icon: string
+  remark: string
+}
+
+const MENU_TYPES = [
+  { value: 'M', label: '目录', tip: '侧栏分组' },
+  { value: 'C', label: '菜单', tip: '可路由页面' },
+  { value: 'F', label: '按钮', tip: '接口权限' },
+]
+
+const TYPE_META: Record<string, { label: string; tone: string; icon: typeof Folder }> = {
+  M: { label: '目录', tone: 'dir', icon: Folder },
+  C: { label: '菜单', tone: 'menu', icon: MenuIcon },
+  F: { label: '按钮', tone: 'btn', icon: Key },
+}
+
+const loading = ref(false)
+const saving = ref(false)
+const tree = ref<MenuNode[]>([])
+const keyword = ref('')
+const dialogVisible = ref(false)
+/** 默认折叠，避免一次展开上百个按钮节点导致卡顿 */
+const expandAll = ref(false)
+/** 默认不展示按钮权限行，显著减少表格 DOM */
+const showButtons = ref(false)
+const tableRef = ref<TableInstance>()
+
+const form = reactive<MenuForm>({
+  id: undefined,
+  parentId: 0,
+  menuName: '',
+  menuType: 'C',
+  orderNum: 0,
+  path: '',
+  component: '',
+  query: '',
+  isFrame: false,
+  isCache: true,
+  isVisible: true,
+  status: 0,
+  perms: '',
+  icon: '',
+  remark: '',
+})
+
+/**
+ * 去掉按钮节点（保留目录/菜单树结构）。
+ */
+function stripButtons(nodes: MenuNode[]): MenuNode[] {
+  const out: MenuNode[] = []
+  for (const n of nodes) {
+    if (n.menuType === 'F') continue
+    const kids = n.children?.length ? stripButtons(n.children) : []
+    out.push(kids.length ? { ...n, children: kids } : { ...n, children: undefined })
+  }
+  return out
+}
+
+/**
+ * 按关键字过滤树（命中自身或子节点则保留）。
+ */
+function filterTree(nodes: MenuNode[], q: string): MenuNode[] {
+  const out: MenuNode[] = []
+  for (const n of nodes) {
+    const kids = n.children?.length ? filterTree(n.children, q) : []
+    const hit =
+      n.menuName?.toLowerCase().includes(q) ||
+      n.path?.toLowerCase().includes(q) ||
+      n.perms?.toLowerCase().includes(q) ||
+      n.component?.toLowerCase().includes(q)
+    if (hit || kids.length) {
+      out.push({ ...n, children: kids.length ? kids : undefined })
+    }
+  }
+  return out
+}
+
+const displayTree = computed(() => {
+  let nodes = tree.value
+  if (!showButtons.value) nodes = stripButtons(nodes)
+  const q = keyword.value.trim().toLowerCase()
+  if (q) nodes = filterTree(nodes, q)
+  return nodes
+})
+
+const parentOptions = computed(() => {
+  const opts: { id: number; label: string }[] = [{ id: 0, label: '顶级菜单' }]
+  const walk = (nodes: MenuNode[], prefix = '') => {
+    for (const n of nodes) {
+      if (n.menuType === 'F') continue
+      if (form.id && n.id === form.id) continue
+      opts.push({ id: n.id, label: `${prefix}${n.menuName}` })
+      if (n.children?.length) walk(n.children, `${prefix}${n.menuName} / `)
+    }
+  }
+  walk(tree.value)
+  return opts
+})
+
+const stats = computed(() => {
+  let m = 0
+  let c = 0
+  let f = 0
+  const walk = (nodes: MenuNode[]) => {
+    for (const n of nodes) {
+      if (n.menuType === 'M') m++
+      else if (n.menuType === 'C') c++
+      else if (n.menuType === 'F') f++
+      if (n.children?.length) walk(n.children)
+    }
+  }
+  walk(tree.value)
+  return { m, c, f, total: m + c + f }
+})
+
+/** 图标下拉选项（含当前值兜底）；仅弹窗打开时计算 */
+const iconOptions = computed(() =>
+  dialogVisible.value ? resolveMenuIconOptions(form.icon) : [],
+)
+
+function typeMeta(t: string) {
+  return TYPE_META[t] || TYPE_META.C
+}
+
+/**
+ * 遍历树节点。
+ */
+function walkRows(nodes: MenuNode[], fn: (n: MenuNode) => void) {
+  for (const n of nodes) {
+    fn(n)
+    if (n.children?.length) walkRows(n.children, fn)
+  }
+}
+
+/**
+ * 按 expandAll 同步展开状态（不销毁表格）。
+ */
+function applyExpandState() {
+  nextTick(() => {
+    const table = tableRef.value
+    if (!table) return
+    walkRows(displayTree.value, (row) => {
+      if (row.children?.length) {
+        table.toggleRowExpansion(row, expandAll.value)
+      }
+    })
+  })
+}
+
+function toggleExpandAll() {
+  expandAll.value = !expandAll.value
+  applyExpandState()
+}
+
+async function load() {
+  if (loading.value) return
+  loading.value = true
+  try {
+    tree.value = (await get<MenuNode[]>('/menus/tree')) || []
+    // 加载后保持当前展开策略（默认折叠）
+    if (expandAll.value) applyExpandState()
+  } finally {
+    loading.value = false
+  }
+}
+
+let loadedOnce = false
+
+onMounted(() => {
+  loadedOnce = true
+  load()
+})
+
+/** keep-alive 再次激活时不重复拉树，避免请求风暴 */
+onActivated(() => {
+  if (!loadedOnce) {
+    loadedOnce = true
+    load()
+  }
+})
+
+function resetForm(parentId = 0, menuType = 'C') {
+  Object.assign(form, {
+    id: undefined,
+    parentId,
+    menuName: '',
+    menuType,
+    orderNum: 0,
+    path: '',
+    component: '',
+    query: '',
+    isFrame: false,
+    isCache: true,
+    isVisible: true,
+    status: 0,
+    perms: '',
+    icon: '',
+    remark: '',
+  })
+}
+
+function openCreate(parentId = 0, menuType = 'M') {
+  const type = parentId === 0 ? 'M' : menuType
+  resetForm(parentId, type)
+  dialogVisible.value = true
+}
+
+async function openEdit(row: MenuNode) {
+  const detail = await get<MenuForm>(`/menus/${row.id}`)
+  Object.assign(form, {
+    id: detail.id,
+    parentId: detail.parentId ?? 0,
+    menuName: detail.menuName || '',
+    menuType: detail.menuType || 'C',
+    orderNum: detail.orderNum ?? 0,
+    path: detail.path || '',
+    component: detail.component || '',
+    query: detail.query || '',
+    isFrame: !!detail.isFrame,
+    isCache: detail.isCache !== false,
+    isVisible: detail.isVisible !== false,
+    status: detail.status ?? 0,
+    perms: detail.perms || '',
+    icon: detail.icon || '',
+    remark: detail.remark || '',
+  })
+  dialogVisible.value = true
+}
+
+async function save() {
+  if (!form.menuName.trim()) {
+    ElMessage.warning('请填写菜单名称')
+    return
+  }
+  if (!form.menuType) {
+    ElMessage.warning('请选择菜单类型')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = {
+      ...form,
+      menuName: form.menuName.trim(),
+      path: form.path.trim() || null,
+      component: form.component.trim() || null,
+      query: form.query.trim() || null,
+      perms: form.perms.trim() || null,
+      icon: form.icon.trim() || null,
+      remark: form.remark.trim() || null,
+    }
+    if (form.id) await put('/menus', payload)
+    else await post('/menus', payload)
+    ElMessage.success('保存成功')
+    dialogVisible.value = false
+    load()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function remove(row: MenuNode) {
+  if (row.children?.length) {
+    ElMessage.warning('请先删除子菜单')
+    return
+  }
+  // 隐藏按钮视图时，目录/菜单下可能仍有按钮子节点
+  if (!showButtons.value && row.menuType !== 'F') {
+    const hasBtnChild = (nodes?: MenuNode[]): boolean => {
+      if (!nodes?.length) return false
+      return nodes.some((n) => n.menuType === 'F' || hasBtnChild(n.children))
+    }
+    const full = findNode(tree.value, row.id)
+    if (full && hasBtnChild(full.children)) {
+      ElMessage.warning('请先删除子菜单（含按钮权限），或开启「显示按钮」后操作')
+      return
+    }
+  }
+  await ElMessageBox.confirm(`确认删除「${row.menuName}」？`, '提示', { type: 'warning' })
+  await del('/menus', { ids: [row.id] })
+  ElMessage.success('已删除')
+  load()
+}
+
+function findNode(nodes: MenuNode[], id: number): MenuNode | null {
+  for (const n of nodes) {
+    if (n.id === id) return n
+    if (n.children?.length) {
+      const hit = findNode(n.children, id)
+      if (hit) return hit
+    }
+  }
+  return null
+}
+</script>
+
+<template>
+  <AppPage title="菜单管理" description="维护目录、页面菜单与按钮权限，支持树形展开与图标预览">
+    <div class="menu-stats">
+      <div class="menu-stats__item">
+        <span class="menu-stats__num">{{ stats.total }}</span>
+        <span class="menu-stats__label">全部节点</span>
+      </div>
+      <div class="menu-stats__item menu-stats__item--dir">
+        <span class="menu-stats__num">{{ stats.m }}</span>
+        <span class="menu-stats__label">目录</span>
+      </div>
+      <div class="menu-stats__item menu-stats__item--menu">
+        <span class="menu-stats__num">{{ stats.c }}</span>
+        <span class="menu-stats__label">菜单</span>
+      </div>
+      <div class="menu-stats__item menu-stats__item--btn">
+        <span class="menu-stats__num">{{ stats.f }}</span>
+        <span class="menu-stats__label">按钮</span>
+      </div>
+    </div>
+
+    <div class="toolbar">
+      <el-input
+        v-model="keyword"
+        clearable
+        placeholder="搜索名称 / 路由 / 权限标识"
+        style="width: 260px"
+      />
+      <el-button type="primary" :icon="Refresh" @click="load">刷新</el-button>
+      <el-button @click="toggleExpandAll">{{ expandAll ? '全部折叠' : '全部展开' }}</el-button>
+      <el-checkbox v-model="showButtons" border>显示按钮</el-checkbox>
+      <div class="toolbar__spacer" />
+      <el-button type="success" :icon="Plus" v-permission="'system:menu:add'" @click="openCreate(0, 'M')">
+        新增目录
+      </el-button>
+    </div>
+
+    <div class="menu-table-wrap" v-loading="loading">
+      <el-table
+        ref="tableRef"
+        :data="displayTree"
+        row-key="id"
+        border
+        stripe
+        :tree-props="{ children: 'children' }"
+        class="menu-table"
+      >
+        <el-table-column label="菜单名称" min-width="220" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div class="name-cell">
+              <span class="name-cell__icon" :class="`is-${typeMeta(row.menuType).tone}`">
+                <el-icon :size="14">
+                  <component :is="row.icon ? resolveMenuIcon(row.icon) : typeMeta(row.menuType).icon" />
+                </el-icon>
+              </span>
+              <strong>{{ row.menuName }}</strong>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="类型" width="88" align="center">
+          <template #default="{ row }">
+            <span class="type-pill" :class="`is-${typeMeta(row.menuType).tone}`">
+              {{ typeMeta(row.menuType).label }}
+            </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="icon" label="图标" width="72" align="center">
+          <template #default="{ row }">
+            <el-icon v-if="row.icon" :size="16" class="icon-only">
+              <component :is="resolveMenuIcon(row.icon)" />
+            </el-icon>
+            <span v-else class="muted">—</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="orderNum" label="排序" width="72" align="center" />
+
+        <el-table-column prop="path" label="路由" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            <code v-if="row.path" class="mono">{{ row.path }}</code>
+            <span v-else class="muted">—</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="component" label="组件" min-width="140" show-overflow-tooltip>
+          <template #default="{ row }">
+            <code v-if="row.component" class="mono">{{ row.component }}</code>
+            <span v-else class="muted">—</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="perms" label="权限标识" min-width="150" show-overflow-tooltip>
+          <template #default="{ row }">
+            <code v-if="row.perms" class="mono mono--perm">{{ row.perms }}</code>
+            <span v-else class="muted">—</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="可见" width="72" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" :type="row.isVisible ? 'success' : 'info'" effect="light">
+              {{ row.isVisible ? '是' : '否' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="状态" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" :type="row.status === 0 ? 'success' : 'danger'">
+              {{ row.status === 0 ? '正常' : '停用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="260" fixed="right" align="center">
+          <template #default="{ row }">
+            <div class="row-actions">
+              <el-button
+                v-if="row.menuType !== 'F'"
+                size="small"
+                type="primary"
+                v-permission="'system:menu:add'"
+                @click="openCreate(row.id, row.menuType === 'M' ? 'C' : 'F')"
+              >
+                新增
+              </el-button>
+              <el-button
+                size="small"
+                type="primary"
+                v-permission="'system:menu:edit'"
+                @click="openEdit(row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                size="small"
+                type="danger"
+                v-permission="'system:menu:remove'"
+                @click="remove(row)"
+              >
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="form.id ? '编辑菜单' : '新增菜单'"
+      width="640px"
+      class="menu-dialog"
+      append-to-body
+      align-center
+      destroy-on-close
+    >
+      <el-form label-width="96px" class="menu-form">
+        <el-form-item label="上级菜单">
+          <el-select v-model="form.parentId" filterable style="width: 100%">
+            <el-option v-for="o in parentOptions" :key="o.id" :label="o.label" :value="o.id" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="菜单类型" required>
+          <div class="type-cards">
+            <button
+              v-for="t in MENU_TYPES"
+              :key="t.value"
+              type="button"
+              class="type-card"
+              :class="{ 'is-active': form.menuType === t.value }"
+              @click="form.menuType = t.value"
+            >
+              <strong>{{ t.label }}</strong>
+              <small>{{ t.tip }}</small>
+            </button>
+          </div>
+        </el-form-item>
+
+        <el-row :gutter="0">
+          <el-col :span="12" class="menu-form__col-l">
+            <el-form-item label="菜单名称" required>
+              <el-input v-model="form.menuName" maxlength="64" placeholder="显示名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="menu-form__col-r">
+            <el-form-item label="显示排序">
+              <el-input-number v-model="form.orderNum" :min="0" controls-position="right" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item v-if="form.menuType !== 'F'" label="图标">
+          <el-select
+            v-model="form.icon"
+            clearable
+            filterable
+            placeholder="请选择图标"
+            style="width: 100%"
+            popper-class="menu-icon-select-popper"
+          >
+            <template #prefix>
+              <el-icon v-if="form.icon"><component :is="resolveMenuIcon(form.icon)" /></el-icon>
+            </template>
+            <el-option v-for="name in iconOptions" :key="name" :label="name" :value="name">
+              <span class="icon-option">
+                <el-icon :size="16"><component :is="resolveMenuIcon(name)" /></el-icon>
+                <span>{{ name }}</span>
+              </span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-row v-if="form.menuType !== 'F'" :gutter="0">
+          <el-col :span="12" class="menu-form__col-l">
+            <el-form-item label="路由地址">
+              <el-input v-model="form.path" placeholder="如 system/user" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="menu-form__col-r">
+            <el-form-item label="组件路径">
+              <el-input v-model="form.component" placeholder="如 system/user/index" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item v-if="form.menuType === 'C'" label="路由参数">
+          <el-input v-model="form.query" placeholder="可选，如 id=1" />
+        </el-form-item>
+
+        <el-form-item v-if="form.menuType !== 'M'" label="权限标识">
+          <el-input v-model="form.perms" placeholder="如 system:user:list" />
+        </el-form-item>
+
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.status">
+            <el-radio :value="0">正常</el-radio>
+            <el-radio :value="1">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item v-if="form.menuType !== 'F'" label="显示">
+          <el-switch v-model="form.isVisible" active-text="显示" inactive-text="隐藏" />
+        </el-form-item>
+
+        <el-form-item v-if="form.menuType === 'C'" label="缓存">
+          <el-switch v-model="form.isCache" active-text="缓存" inactive-text="不缓存" />
+        </el-form-item>
+
+        <el-form-item v-if="form.menuType === 'C'" label="外链">
+          <el-switch v-model="form.isFrame" active-text="是" inactive-text="否" />
+        </el-form-item>
+
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" :rows="2" maxlength="200" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="save">保存</el-button>
+      </template>
+    </el-dialog>
+  </AppPage>
+</template>
+
+<style scoped lang="scss">
+.menu-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.menu-stats__item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 1px solid var(--sa-border);
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+
+.menu-stats__num {
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--sa-ink);
+  font-variant-numeric: tabular-nums;
+}
+
+.menu-stats__label {
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+}
+
+.menu-stats__item--dir .menu-stats__num { color: #0369a1; }
+.menu-stats__item--menu .menu-stats__num { color: var(--sa-accent); }
+.menu-stats__item--btn .menu-stats__num { color: #b45309; }
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+  padding: 12px 14px;
+  background: var(--sa-toolbar-bg);
+  border: 1px solid var(--sa-border);
+  border-radius: var(--sa-radius-sm);
+}
+
+.toolbar__spacer {
+  flex: 1;
+}
+
+.menu-table-wrap {
+  border: 1px solid var(--sa-border);
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--sa-panel);
+  box-shadow: var(--sa-shadow);
+}
+
+.menu-table {
+  width: 100%;
+}
+
+.name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.name-cell__icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.name-cell__icon.is-dir {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+.name-cell__icon.is-menu {
+  background: var(--sa-accent-soft);
+  color: var(--sa-accent);
+}
+.name-cell__icon.is-btn {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.name-cell strong {
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.type-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.type-pill.is-dir {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+.type-pill.is-menu {
+  background: var(--sa-accent-soft);
+  color: var(--sa-accent);
+}
+.type-pill.is-btn {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.icon-only {
+  color: var(--sa-ink-secondary);
+}
+
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--sa-ink-secondary);
+  background: var(--sa-toolbar-bg);
+  padding: 1px 6px;
+  border-radius: 6px;
+}
+.mono--perm {
+  color: var(--sa-accent);
+}
+
+.muted {
+  color: var(--sa-ink-muted);
+}
+
+.type-cards {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  width: 100%;
+}
+
+.type-card {
+  text-align: left;
+  border: 1px solid var(--sa-border);
+  background: var(--sa-toolbar-bg);
+  border-radius: 12px;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s, transform 0.2s;
+  strong {
+    display: block;
+    font-size: 13px;
+  }
+  small {
+    display: block;
+    margin-top: 2px;
+    font-size: 11px;
+    color: var(--sa-ink-muted);
+  }
+  &:hover {
+    transform: translateY(-1px);
+    border-color: color-mix(in srgb, var(--sa-accent) 40%, var(--sa-border));
+  }
+  &.is-active {
+    border-color: var(--sa-accent);
+    background: var(--sa-accent-soft);
+    strong {
+      color: var(--sa-accent);
+    }
+  }
+}
+
+.menu-form__col-l {
+  padding-right: 8px;
+}
+.menu-form__col-r {
+  padding-left: 8px;
+}
+
+.icon-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+@media (max-width: 900px) {
+  .menu-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>
+
+<style>
+.menu-dialog.el-dialog {
+  width: min(640px, calc(100vw - 32px)) !important;
+  max-height: 88vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.menu-dialog .el-dialog__body {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc(88vh - 140px);
+}
+.menu-icon-select-popper .el-select-dropdown__item {
+  padding: 0 12px;
+  height: 36px;
+  line-height: 36px;
+}
+</style>