布局框架搭建

2026-01-16 11:19:54 +08:00
parent f33bf735d9
commit 08f97d1a21
10 changed files with 1573 additions and 70 deletions
@@ -0,0 +1,193 @@
+<template>
+	<div class="system-menu">
+		<a-card title="菜单管理">
+			<template #extra>
+				<a-button type="primary" @click="handleAdd">
+					<PlusOutlined />
+					新增菜单
+				</a-button>
+			</template>
+
+			<a-table :columns="columns" :data-source="dataSource" :loading="loading" :pagination="false" row-key="id">
+				<template #bodyCell="{ column, record }">
+					<template v-if="column.key === 'icon'">
+						<component :is="record.icon || 'MenuOutlined'" />
+					</template>
+					<template v-else-if="column.key === 'type'">
+						<a-tag :color="getTypeColor(record.type)">
+							{{ getTypeText(record.type) }}
+						</a-tag>
+					</template>
+					<template v-else-if="column.key === 'status'">
+						<a-tag :color="record.status === 1 ? 'green' : 'red'">
+							{{ record.status === 1 ? '正常' : '禁用' }}
+						</a-tag>
+					</template>
+					<template v-else-if="column.key === 'action'">
+						<a-space>
+							<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+							<a-button type="link" size="small" @click="handleAddChild(record)">新增子菜单</a-button>
+							<a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
+						</a-space>
+					</template>
+				</template>
+			</a-table>
+		</a-card>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { PlusOutlined, MenuOutlined } from '@ant-design/icons-vue'
+
+const columns = [
+	{
+		title: '菜单名称',
+		dataIndex: 'title',
+		key: 'title'
+	},
+	{
+		title: '图标',
+		dataIndex: 'icon',
+		key: 'icon',
+		width: 80
+	},
+	{
+		title: '路径',
+		dataIndex: 'path',
+		key: 'path'
+	},
+	{
+		title: '类型',
+		dataIndex: 'type',
+		key: 'type',
+		width: 100
+	},
+	{
+		title: '排序',
+		dataIndex: 'sort',
+		key: 'sort',
+		width: 80
+	},
+	{
+		title: '状态',
+		dataIndex: 'status',
+		key: 'status',
+		width: 100
+	},
+	{
+		title: '操作',
+		key: 'action',
+		width: 220
+	}
+]
+
+const dataSource = ref([])
+const loading = ref(false)
+
+// 模拟数据
+const mockData = [
+	{
+		id: 1,
+		title: '首页',
+		path: '/home',
+		icon: 'HomeOutlined',
+		type: 1,
+		sort: 1,
+		status: 1,
+		children: []
+	},
+	{
+		id: 2,
+		title: '系统管理',
+		path: '/system',
+		icon: 'SettingOutlined',
+		type: 1,
+		sort: 2,
+		status: 1,
+		children: [
+			{
+				id: 21,
+				title: '用户管理',
+				path: '/system/user',
+				icon: 'UserOutlined',
+				type: 2,
+				sort: 1,
+				status: 1
+			},
+			{
+				id: 22,
+				title: '角色管理',
+				path: '/system/role',
+				icon: 'TeamOutlined',
+				type: 2,
+				sort: 2,
+				status: 1
+			},
+			{
+				id: 23,
+				title: '菜单管理',
+				path: '/system/menu',
+				icon: 'MenuOutlined',
+				type: 2,
+				sort: 3,
+				status: 1
+			}
+		]
+	}
+]
+
+const loadData = () => {
+	loading.value = true
+	// 模拟接口请求
+	setTimeout(() => {
+		dataSource.value = mockData
+		loading.value = false
+	}, 500)
+}
+
+const getTypeColor = (type) => {
+	const colorMap = {
+		1: 'blue',
+		2: 'green',
+		3: 'orange'
+	}
+	return colorMap[type] || 'default'
+}
+
+const getTypeText = (type) => {
+	const textMap = {
+		1: '目录',
+		2: '菜单',
+		3: '按钮'
+	}
+	return textMap[type] || '未知'
+}
+
+const handleAdd = () => {
+	message.info('新增菜单功能开发中')
+}
+
+const handleEdit = (record) => {
+	message.info('编辑菜单功能开发中')
+}
+
+const handleAddChild = (record) => {
+	message.info(`新增 ${record.title} 的子菜单功能开发中`)
+}
+
+const handleDelete = (record) => {
+	message.info('删除菜单功能开发中')
+}
+
+onMounted(() => {
+	loadData()
+})
+</script>
+
+<style scoped lang="scss">
+.system-menu {
+	// 样式
+}
+</style>