添加系统管理、登录模块的接口、标准化开发流程

src/components/system/menu/MenuFormModal.vue

@@ -0,0 +1,172 @@
+<template>
+  <a-modal
+    :open="visible"
+    :title="title"
+    :confirm-loading="loading"
+    width="600px"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
+      <a-form-item label="上级菜单" name="parentId">
+        <a-tree-select
+          v-model:value="formData.parentId"
+          :tree-data="parentTreeData"
+          :field-names="{ label: 'name', value: 'id', children: 'children' }"
+          placeholder="请选择上级菜单（不选则为顶级）"
+          tree-default-expand-all
+          allow-clear
+        />
+      </a-form-item>
+      <a-form-item label="菜单类型" name="type">
+        <a-radio-group v-model:value="formData.type">
+          <a-radio value="directory">目录</a-radio>
+          <a-radio value="menu">菜单</a-radio>
+          <a-radio value="button">按钮</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="菜单名称" name="name">
+        <a-input v-model:value="formData.name" placeholder="请输入菜单名称" />
+      </a-form-item>
+      <a-form-item label="菜单编码" name="code">
+        <a-input v-model:value="formData.code" placeholder="请输入菜单编码（唯一标识）" />
+      </a-form-item>
+      <a-form-item v-if="formData.type !== 'button'" label="路由路径" name="path">
+        <a-input v-model:value="formData.path" placeholder="请输入路由路径，如 /system/users" />
+      </a-form-item>
+      <a-form-item v-if="formData.type === 'menu'" label="组件路径" name="component">
+        <a-input v-model:value="formData.component" placeholder="请输入组件路径" />
+      </a-form-item>
+      <a-form-item v-if="formData.type !== 'button'" label="图标" name="icon">
+        <IconPicker v-model:value="formData.icon" />
+      </a-form-item>
+      <a-form-item v-if="formData.type === 'button'" label="权限标识" name="permission">
+        <a-input v-model:value="formData.permission" placeholder="请输入权限标识，如 system:user:add" />
+      </a-form-item>
+      <a-form-item label="排序" name="sort">
+        <a-input-number v-model:value="formData.sort" :min="0" style="width: 100%" />
+      </a-form-item>
+      <a-form-item label="状态" name="status">
+        <a-radio-group v-model:value="formData.status">
+          <a-radio :value="1">正常</a-radio>
+          <a-radio :value="0">禁用</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item v-if="formData.type !== 'button'" label="是否隐藏" name="hidden">
+        <a-radio-group v-model:value="formData.hidden">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="备注" name="remark">
+        <a-textarea v-model:value="formData.remark" placeholder="请输入备注" :rows="2" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, computed } from 'vue'
+import type { FormInstance } from 'ant-design-vue'
+import type { Rule } from 'ant-design-vue/es/form'
+import { message } from 'ant-design-vue'
+import { createMenu, updateMenu } from '@/api/system/menu'
+import type { MenuFormData, MenuRecord } from '@/types/system/menu'
+import IconPicker from '@/components/common/IconPicker.vue'
+
+// ... existing code ...
+
+const props = defineProps<{
+  visible: boolean
+  record?: MenuFormData
+  menuTree: MenuRecord[]
+}>()
+
+const emit = defineEmits(['update:visible', 'success'])
+
+const loading = ref(false)
+const formRef = ref<FormInstance>()
+
+const formData = reactive<MenuFormData>({
+  parentId: undefined,
+  name: '',
+  code: '',
+  type: 'menu',
+  path: '',
+  component: '',
+  icon: '',
+  permission: '',
+  sort: 0,
+  hidden: 0,
+  status: 1,
+  remark: ''
+})
+
+const title = computed(() => formData.id ? '编辑菜单' : '新增菜单')
+
+const parentTreeData = computed(() => {
+  return [{ id: 0, name: '顶级菜单', children: props.menuTree }]
+})
+
+const formRules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入菜单编码', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }]
+}
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) {
+      // Reset to defaults
+      Object.assign(formData, {
+           id: undefined,
+           parentId: props.record?.parentId || 0, // Use record parentId if exists, else 0
+           name: '',
+           code: '',
+           type: 'menu',
+           path: '',
+           component: '',
+           icon: '',
+           permission: '',
+           sort: 0,
+           hidden: 0,
+           status: 1,
+           remark: ''
+      })
+      
+      // If full record provided (Edit mode), overwrite
+      if (props.record && props.record.id) {
+        Object.assign(formData, props.record)
+      }
+    }
+  }
+)
+
+async function handleOk() {
+  try {
+    await formRef.value?.validate()
+    loading.value = true
+    
+    if (formData.id) {
+      await updateMenu(formData)
+      message.success('更新成功')
+    } else {
+      await createMenu(formData)
+      message.success('创建成功')
+    }
+    
+    emit('update:visible', false)
+    emit('success')
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleCancel() {
+  emit('update:visible', false)
+  formRef.value?.resetFields()
+}
+</script>