first commit

src/views/permission/MenuManagementView.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { Plus } from '@element-plus/icons-vue'
+import { menuIconNames } from '@/data/customMenus'
+import { useMenuManagement } from '@/views/permission/composables/useMenuManagement'
+import PageHeading from '@/views/components/PageHeading.vue'
+
+const { selectedKey, selectedParent, form, menuTree, parentOptions, resetForm, selectNode, saveMenu, deleteMenu } = useMenuManagement()
+</script>
+
+<template>
+  <PageHeading eyebrow="后台管理" title="菜单管理" description="维护系统菜单结构、路由和按钮权限。" />
+
+  <div class="menu-editor-layout">
+    <section class="panel menu-tree-panel">
+      <div class="panel-heading">
+        <div><h2>系统菜单</h2></div>
+        <el-button type="primary" @click="resetForm(selectedParent)">
+          <el-icon><Plus /></el-icon>
+          新增菜单
+        </el-button>
+      </div>
+      <el-tree
+        :data="menuTree"
+        node-key="id"
+        default-expand-all
+        :expand-on-click-node="false"
+        @node-click="selectNode"
+      />
+    </section>
+
+    <section class="panel menu-form-panel">
+      <div class="panel-heading">
+        <div><h2>{{ selectedKey ? '编辑菜单权限' : '新增菜单权限' }}</h2></div>
+        <el-button v-if="selectedKey" type="danger" plain @click="deleteMenu">删除菜单</el-button>
+      </div>
+      <el-form label-width="110px" label-position="right" class="menu-editor-form">
+        <el-form-item label="菜单名称" required>
+          <el-input v-model="form.title" maxlength="30" />
+        </el-form-item>
+        <el-form-item label="对应路由" :required="form.type !== '按钮'">
+          <el-input v-model="form.route" placeholder="例如 /reports" />
+        </el-form-item>
+        <el-form-item label="菜单标识" required>
+          <el-input
+            v-model="form.permission"
+            :placeholder="`自动生成：访问菜单：${form.title || '菜单名'}`"
+          />
+        </el-form-item>
+        <el-form-item label="上级菜单">
+          <el-select v-model="form.parent">
+            <el-option v-for="item in parentOptions" :key="item" :label="item" :value="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="菜单类型">
+          <el-radio-group v-model="form.type">
+            <el-radio value="路径">路径</el-radio>
+            <el-radio value="页面">页面</el-radio>
+            <el-radio value="按钮">按钮</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="菜单图标">
+          <el-select v-model="form.icon" clearable placeholder="请选择">
+            <el-option v-for="icon in menuIconNames" :key="icon" :label="icon" :value="icon" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="使用方法">
+          <el-input v-model="form.method" type="textarea" :rows="3" placeholder="可填写按钮权限对应的操作说明" />
+        </el-form-item>
+        <el-form-item label="菜单排序">
+          <el-input-number v-model="form.sort" :min="1" :max="999" />
+        </el-form-item>
+      </el-form>
+      <div class="menu-form-footer">
+        <el-button type="primary" @click="saveMenu">保存菜单</el-button>
+      </div>
+    </section>
+  </div>
+</template>