diff --git a/resources/admin/src/pages/auth/departments/index.vue b/resources/admin/src/pages/auth/departments/index.vue
new file mode 100644
index 0000000..a8cc422
--- /dev/null
+++ b/resources/admin/src/pages/auth/departments/index.vue
@@ -0,0 +1,530 @@
+<template>
+	<div class="department-management">
+		<!-- 搜索表单 -->
+		<a-card class="search-card" :bordered="false">
+			<a-form :model="searchParams" layout="inline">
+				<a-form-item label="关键词">
+					<a-input v-model:value="searchParams.keyword" placeholder="部门名称" allow-clear style="width: 200px" />
+				</a-form-item>
+				<a-form-item label="状态">
+					<a-select v-model:value="searchParams.status" allow-clear placeholder="请选择状态" style="width: 120px">
+						<a-select-option :value="1">启用</a-select-option>
+						<a-select-option :value="0">禁用</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item>
+					<a-space>
+						<a-button type="primary" @click="handleSearch">
+							<template #icon><SearchOutlined /></template>
+							搜索
+						</a-button>
+						<a-button @click="handleReset">
+							<template #icon><RedoOutlined /></template>
+							重置
+						</a-button>
+					</a-space>
+				</a-form-item>
+			</a-form>
+		</a-card>
+
+		<!-- 操作按钮 -->
+		<a-card class="table-card" :bordered="false">
+			<template #title>
+				<a-space>
+					<a-button type="primary" @click="handleAdd">
+						<template #icon><PlusOutlined /></template>
+						新增
+					</a-button>
+					<a-button @click="handleExpandAll">
+						<template #icon><ExpandOutlined /></template>
+						展开全部
+					</a-button>
+					<a-button @click="handleCollapseAll">
+						<template #icon><CompressOutlined /></template>
+						折叠全部
+					</a-button>
+					<a-button @click="handleExport">
+						<template #icon><ExportOutlined /></template>
+						导出
+					</a-button>
+					<a-button @click="handleImport">
+						<template #icon><ImportOutlined /></template>
+						导入
+					</a-button>
+					<a-switch
+						v-model:checked="viewMode"
+						checked-children="树形"
+						un-checked-children="列表"
+						@change="handleViewModeChange"
+					/>
+				</a-space>
+			</template>
+
+			<!-- 树形表格 -->
+			<a-table
+				v-if="viewMode"
+				:columns="treeColumns"
+				:data-source="treeDataSource"
+				:loading="loading"
+				:pagination="false"
+				:row-selection="treeRowSelection"
+				:default-expanded-row-keys="expandedKeys"
+				:expanded-row-keys="expandedKeys"
+				@expand="handleExpand"
+				row-key="id"
+			>
+				<template #bodyCell="{ column, record }">
+					<template v-if="column.key === 'name'">
+						<a-space>
+							<a-avatar v-if="record.parent_id === 0" shape="square" :size="24" style="background: #1890ff">
+								<template #icon><HomeOutlined /></template>
+							</a-avatar>
+							<a-avatar v-else shape="square" :size="24" style="background: #52c41a">
+								<template #icon><ApartmentOutlined /></template>
+							</a-avatar>
+							<span>{{ record.name }}</span>
+						</a-space>
+					</template>
+					<template v-if="column.key === 'status'">
+						<a-tag :color="record.status === 1 ? 'success' : 'error'">
+							{{ record.status === 1 ? '启用' : '禁用' }}
+						</a-tag>
+					</template>
+					<template v-if="column.key === 'action'">
+						<a-space>
+							<a-button type="link" size="small" @click="handleAddChild(record)">添加子部门</a-button>
+							<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+							<a-popconfirm title="确定要删除该部门吗？" @confirm="handleDelete(record.id)">
+								<a-button type="link" size="small" danger>删除</a-button>
+							</a-popconfirm>
+						</a-space>
+					</template>
+				</template>
+			</a-table>
+
+			<!-- 列表表格 -->
+			<sc-table
+				v-else
+				:columns="columns"
+				:data-source="dataSource"
+				:loading="loading"
+				:pagination="pagination"
+				:row-selection="rowSelection"
+				@page-change="handlePageChange"
+			>
+				<template #bodyCell="{ column, record }">
+					<template v-if="column.key === 'status'">
+						<a-tag :color="record.status === 1 ? 'success' : 'error'">
+							{{ record.status === 1 ? '启用' : '禁用' }}
+						</a-tag>
+					</template>
+					<template v-if="column.key === 'action'">
+						<a-space>
+							<a-button type="link" size="small" @click="handleAddChild(record)">添加子部门</a-button>
+							<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+							<a-popconfirm title="确定要删除该部门吗？" @confirm="handleDelete(record.id)">
+								<a-button type="link" size="small" danger>删除</a-button>
+							</a-popconfirm>
+						</a-space>
+					</template>
+				</template>
+			</sc-table>
+		</a-card>
+
+		<!-- 新增/编辑弹窗 -->
+		<a-modal
+			v-model:open="modalVisible"
+			:title="modalTitle"
+			:width="600"
+			@ok="handleSubmit"
+			@cancel="handleCancel"
+		>
+			<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }">
+				<a-form-item label="上级部门" name="parent_id">
+					<a-tree-select
+						v-model:value="formData.parent_id"
+						:tree-data="departmentTree"
+						allow-clear
+						placeholder="请选择上级部门"
+						:field-names="{ label: 'name', value: 'id', children: 'children' }"
+						tree-default-expand-all
+					/>
+				</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="leader">
+					<a-input v-model:value="formData.leader" placeholder="请输入负责人" />
+				</a-form-item>
+				<a-form-item label="联系电话" name="phone">
+					<a-input v-model:value="formData.phone" placeholder="请输入联系电话" />
+				</a-form-item>
+				<a-form-item label="排序" name="sort">
+					<a-input-number v-model:value="formData.sort" :min="0" :max="9999" 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>
+		</a-modal>
+
+		<!-- 导入弹窗 -->
+		<a-modal v-model:open="importVisible" title="导入部门" :width="500" @ok="handleImportSubmit">
+			<a-space direction="vertical" style="width: 100%">
+				<a-alert message="请先下载导入模板，填写完成后上传" type="info" show-icon />
+				<a-button block @click="handleDownloadTemplate">
+					<template #icon><DownloadOutlined /></template>
+					下载导入模板
+				</a-button>
+				<a-upload
+					:file-list="fileList"
+					:before-upload="beforeUpload"
+					@remove="handleRemove"
+				>
+					<a-button block>
+						<template #icon><UploadOutlined /></template>
+						选择文件
+					</a-button>
+				</a-upload>
+			</a-space>
+		</a-modal>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import {
+	SearchOutlined,
+	RedoOutlined,
+	PlusOutlined,
+	DeleteOutlined,
+	CheckOutlined,
+	CloseOutlined,
+	ExpandOutlined,
+	CompressOutlined,
+	ExportOutlined,
+	ImportOutlined,
+	DownloadOutlined,
+	UploadOutlined,
+	HomeOutlined,
+	ApartmentOutlined,
+} from '@ant-design/icons-vue'
+import authApi from '@/api/auth'
+import scTable from '@/components/scTable/index.vue'
+
+defineOptions({
+	name: 'DepartmentManagement',
+})
+
+const searchParams = ref({
+	keyword: '',
+	status: undefined,
+})
+
+const loading = ref(false)
+const dataSource = ref([])
+const treeDataSource = ref([])
+const pagination = ref({
+	current: 1,
+	pageSize: 20,
+	total: 0,
+})
+
+const viewMode = ref(true)
+const expandedKeys = ref([])
+const selectedRowKeys = ref([])
+const rowSelection = computed(() => ({
+	selectedRowKeys: selectedRowKeys.value,
+	onChange: (keys) => {
+		selectedRowKeys.value = keys
+	},
+}))
+
+const treeRowSelection = computed(() => ({
+	selectedRowKeys: selectedRowKeys.value,
+	onChange: (keys) => {
+		selectedRowKeys.value = keys
+	},
+}))
+
+const columns = [
+	{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+	{ title: '部门名称', dataIndex: 'name', key: 'name', width: 200 },
+	{ title: '上级部门', dataIndex: 'parent_name', key: 'parent_name', width: 200 },
+	{ title: '负责人', dataIndex: 'leader', key: 'leader', width: 120 },
+	{ title: '联系电话', dataIndex: 'phone', key: 'phone', width: 130 },
+	{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
+	{ title: '状态', key: 'status', width: 80, align: 'center' },
+	{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
+	{ title: '操作', key: 'action', width: 220, fixed: 'right' },
+]
+
+const treeColumns = [
+	{ title: '部门名称', key: 'name', width: 300 },
+	{ title: '负责人', dataIndex: 'leader', key: 'leader', width: 120 },
+	{ title: '联系电话', dataIndex: 'phone', key: 'phone', width: 130 },
+	{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
+	{ title: '状态', key: 'status', width: 80, align: 'center' },
+	{ title: '操作', key: 'action', width: 220, fixed: 'right' },
+]
+
+const departmentTree = ref([])
+
+const modalVisible = ref(false)
+const modalTitle = ref('新增部门')
+const formData = ref({})
+const formRef = ref(null)
+const formRules = {
+	name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
+	phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
+}
+
+const importVisible = ref(false)
+const fileList = ref([])
+const uploadFile = ref(null)
+
+const fetchData = async () => {
+	loading.value = true
+	try {
+		if (viewMode.value) {
+			const res = await authApi.departments.tree.get()
+			treeDataSource.value = res.data
+		} else {
+			const res = await authApi.departments.list.get({
+				page: pagination.value.current,
+				page_size: pagination.value.pageSize,
+				...searchParams.value,
+			})
+			dataSource.value = res.data.list
+			pagination.value.total = res.data.total
+		}
+	} catch (error) {
+		message.error('获取部门列表失败')
+	} finally {
+		loading.value = false
+	}
+}
+
+const fetchDepartmentTree = async () => {
+	try {
+		const res = await authApi.departments.tree.get()
+		departmentTree.value = [{ id: 0, name: '顶级部门', children: res.data }]
+	} catch (error) {
+		message.error('获取部门树失败')
+	}
+}
+
+const handleSearch = () => {
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handleReset = () => {
+	searchParams.value = {
+		keyword: '',
+		status: undefined,
+	}
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handleViewModeChange = () => {
+	selectedRowKeys.value = []
+	fetchData()
+}
+
+const handlePageChange = (page) => {
+	pagination.value.current = page
+	fetchData()
+}
+
+const handleExpand = (expanded, record) => {
+	if (expanded) {
+		expandedKeys.value.push(record.id)
+	} else {
+		expandedKeys.value = expandedKeys.value.filter((key) => key !== record.id)
+	}
+}
+
+const handleExpandAll = () => {
+	const getAllKeys = (data) => {
+		let keys = []
+		data.forEach((item) => {
+			if (item.children && item.children.length > 0) {
+				keys.push(item.id)
+				keys = keys.concat(getAllKeys(item.children))
+			}
+		})
+		return keys
+	}
+	expandedKeys.value = getAllKeys(treeDataSource.value)
+}
+
+const handleCollapseAll = () => {
+	expandedKeys.value = []
+}
+
+const handleAdd = () => {
+	modalTitle.value = '新增部门'
+	formData.value = {
+		parent_id: 0,
+		status: 1,
+		sort: 0,
+	}
+	modalVisible.value = true
+}
+
+const handleAddChild = (record) => {
+	modalTitle.value = '新增子部门'
+	formData.value = {
+		parent_id: record.id,
+		status: 1,
+		sort: 0,
+	}
+	modalVisible.value = true
+}
+
+const handleEdit = (record) => {
+	modalTitle.value = '编辑部门'
+	formData.value = { ...record }
+	modalVisible.value = true
+}
+
+const handleSubmit = async () => {
+	try {
+		await formRef.value.validate()
+		if (formData.value.id) {
+			await authApi.departments.edit.put(formData.value.id, formData.value)
+			message.success('更新成功')
+		} else {
+			await authApi.departments.add.post(formData.value)
+			message.success('创建成功')
+		}
+		modalVisible.value = false
+		fetchData()
+	} catch (error) {
+		if (error.errorFields) {
+			return
+		}
+		message.error(error.message || '操作失败')
+	}
+}
+
+const handleCancel = () => {
+	modalVisible.value = false
+	formData.value = {}
+	formRef.value?.resetFields()
+}
+
+const handleDelete = async (id) => {
+	try {
+		await authApi.departments.delete.delete(id)
+		message.success('删除成功')
+		fetchData()
+	} catch (error) {
+		message.error('删除失败')
+	}
+}
+
+const handleExport = async () => {
+	try {
+		const res = await authApi.departments.export.post({})
+		const url = window.URL.createObjectURL(new Blob([res]))
+		const link = document.createElement('a')
+		link.href = url
+		link.setAttribute('download', `departments_${Date.now()}.xlsx`)
+		document.body.appendChild(link)
+		link.click()
+		document.body.removeChild(link)
+		message.success('导出成功')
+	} catch (error) {
+		message.error('导出失败')
+	}
+}
+
+const handleImport = () => {
+	importVisible.value = true
+	fileList.value = []
+	uploadFile.value = null
+}
+
+const beforeUpload = (file) => {
+	const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel'
+	if (!isExcel) {
+		message.error('只能上传 Excel 文件')
+		return false
+	}
+	const isLt10M = file.size / 1024 / 1024 < 10
+	if (!isLt10M) {
+		message.error('文件大小不能超过 10MB')
+		return false
+	}
+	uploadFile.value = file
+	fileList.value = [file]
+	return false
+}
+
+const handleRemove = () => {
+	uploadFile.value = null
+	fileList.value = []
+}
+
+const handleDownloadTemplate = async () => {
+	try {
+		const res = await authApi.departments.downloadTemplate.get()
+		const url = window.URL.createObjectURL(new Blob([res]))
+		const link = document.createElement('a')
+		link.href = url
+		link.setAttribute('download', 'department_template.xlsx')
+		document.body.appendChild(link)
+		link.click()
+		document.body.removeChild(link)
+	} catch (error) {
+		message.error('下载模板失败')
+	}
+}
+
+const handleImportSubmit = async () => {
+	if (!uploadFile.value) {
+		message.error('请选择文件')
+		return
+	}
+
+	const formData = new FormData()
+	formData.append('file', uploadFile.value)
+
+	try {
+		const res = await authApi.departments.import.post(formData)
+		message.success(res.message || '导入成功')
+		importVisible.value = false
+		fetchData()
+	} catch (error) {
+		message.error('导入失败')
+	}
+}
+
+onMounted(() => {
+	fetchData()
+	fetchDepartmentTree()
+})
+</script>
+
+<style scoped lang="scss">
+.department-management {
+	padding: 16px;
+
+	.search-card {
+		margin-bottom: 16px;
+	}
+
+	.table-card {
+		:deep(.ant-card-body) {
+			padding: 16px;
+		}
+	}
+}
+</style>
diff --git a/resources/admin/src/pages/auth/permissions/index.vue b/resources/admin/src/pages/auth/permissions/index.vue
new file mode 100644
index 0000000..ace3689
--- /dev/null
+++ b/resources/admin/src/pages/auth/permissions/index.vue
@@ -0,0 +1,466 @@
+<template>
+	<div class="permission-management">
+		<!-- 搜索表单 -->
+		<a-card class="search-card" :bordered="false">
+			<a-form :model="searchParams" layout="inline">
+				<a-form-item label="关键词">
+					<a-input v-model:value="searchParams.keyword" placeholder="权限名称/编码" allow-clear style="width: 200px" />
+				</a-form-item>
+				<a-form-item label="类型">
+					<a-select v-model:value="searchParams.type" allow-clear placeholder="请选择类型" style="width: 150px">
+						<a-select-option value="menu">菜单</a-select-option>
+						<a-select-option value="api">接口</a-select-option>
+						<a-select-option value="button">按钮</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item label="状态">
+					<a-select v-model:value="searchParams.status" allow-clear placeholder="请选择状态" style="width: 120px">
+						<a-select-option :value="1">启用</a-select-option>
+						<a-select-option :value="0">禁用</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item>
+					<a-space>
+						<a-button type="primary" @click="handleSearch">
+							<template #icon><SearchOutlined /></template>
+							搜索
+						</a-button>
+						<a-button @click="handleReset">
+							<template #icon><RedoOutlined /></template>
+							重置
+						</a-button>
+					</a-space>
+				</a-form-item>
+			</a-form>
+		</a-card>
+
+		<!-- 操作按钮 -->
+		<a-card class="table-card" :bordered="false">
+			<template #title>
+				<a-space>
+					<a-button type="primary" @click="handleAdd">
+						<template #icon><PlusOutlined /></template>
+						新增
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
+						<template #icon><DeleteOutlined /></template>
+						批量删除
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus">
+						<template #icon><CheckOutlined /></template>
+						批量启用
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus(false)" danger>
+						<template #icon><CloseOutlined /></template>
+						批量禁用
+					</a-button>
+					<a-switch
+						v-model:checked="viewMode"
+						checked-children="树形"
+						un-checked-children="列表"
+						@change="handleViewModeChange"
+					/>
+				</a-space>
+			</template>
+
+			<!-- 树形表格 -->
+			<a-table
+				v-if="viewMode"
+				:columns="treeColumns"
+				:data-source="treeDataSource"
+				:loading="loading"
+				:pagination="false"
+				:row-selection="treeRowSelection"
+				row-key="id"
+			>
+				<template #bodyCell="{ column, record }">
+					<template v-if="column.key === 'name'">
+						<a-space>
+							<a-icon v-if="record.icon" :type="record.icon" />
+							<span>{{ record.name }}</span>
+						</a-space>
+					</template>
+					<template v-if="column.key === 'type'">
+						<a-tag :color="getTypeColor(record.type)">
+							{{ getTypeLabel(record.type) }}
+						</a-tag>
+					</template>
+					<template v-if="column.key === 'status'">
+						<a-tag :color="record.status === 1 ? 'success' : 'error'">
+							{{ record.status === 1 ? '启用' : '禁用' }}
+						</a-tag>
+					</template>
+					<template v-if="column.key === 'action'">
+						<a-space>
+							<a-button type="link" size="small" @click="handleAddChild(record)">添加子权限</a-button>
+							<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+							<a-popconfirm title="确定要删除该权限吗？" @confirm="handleDelete(record.id)">
+								<a-button type="link" size="small" danger>删除</a-button>
+							</a-popconfirm>
+						</a-space>
+					</template>
+				</template>
+			</a-table>
+
+			<!-- 列表表格 -->
+			<sc-table
+				v-else
+				:columns="columns"
+				:data-source="dataSource"
+				:loading="loading"
+				:pagination="pagination"
+				:row-selection="rowSelection"
+				@page-change="handlePageChange"
+			>
+				<template #bodyCell="{ column, record }">
+					<template v-if="column.key === 'name'">
+						<a-space>
+							<a-icon v-if="record.icon" :type="record.icon" />
+							<span>{{ record.name }}</span>
+						</a-space>
+					</template>
+					<template v-if="column.key === 'type'">
+						<a-tag :color="getTypeColor(record.type)">
+							{{ getTypeLabel(record.type) }}
+						</a-tag>
+					</template>
+					<template v-if="column.key === 'status'">
+						<a-tag :color="record.status === 1 ? 'success' : 'error'">
+							{{ record.status === 1 ? '启用' : '禁用' }}
+						</a-tag>
+					</template>
+					<template v-if="column.key === 'action'">
+						<a-space>
+							<a-button type="link" size="small" @click="handleAddChild(record)">添加子权限</a-button>
+							<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+							<a-popconfirm title="确定要删除该权限吗？" @confirm="handleDelete(record.id)">
+								<a-button type="link" size="small" danger>删除</a-button>
+							</a-popconfirm>
+						</a-space>
+					</template>
+				</template>
+			</sc-table>
+		</a-card>
+
+		<!-- 新增/编辑弹窗 -->
+		<a-modal
+			v-model:open="modalVisible"
+			:title="modalTitle"
+			:width="700"
+			@ok="handleSubmit"
+			@cancel="handleCancel"
+		>
+			<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }">
+				<a-form-item label="上级权限" name="parent_id">
+					<a-tree-select
+						v-model:value="formData.parent_id"
+						:tree-data="permissionTree"
+						allow-clear
+						placeholder="请选择上级权限"
+						:field-names="{ label: 'name', value: 'id', children: 'children' }"
+						tree-default-expand-all
+					/>
+				</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="请输入权限编码，如：system.user.list" />
+				</a-form-item>
+				<a-form-item label="权限类型" name="type">
+					<a-select v-model:value="formData.type" placeholder="请选择权限类型">
+						<a-select-option value="menu">菜单</a-select-option>
+						<a-select-option value="api">接口</a-select-option>
+						<a-select-option value="button">按钮</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item label="路由" name="route">
+					<a-input v-model:value="formData.route" placeholder="请输入路由，如：/admin/users" />
+				</a-form-item>
+				<a-form-item label="组件" name="component">
+					<a-input v-model:value="formData.component" placeholder="请输入组件路径" />
+				</a-form-item>
+				<a-form-item label="图标" name="icon">
+					<a-input v-model:value="formData.icon" placeholder="请输入图标名称" />
+				</a-form-item>
+				<a-form-item label="排序" name="sort">
+					<a-input-number v-model:value="formData.sort" :min="0" :max="9999" 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 label="元数据" name="meta">
+					<a-textarea v-model:value="formData.meta" placeholder="JSON格式的元数据" :rows="3" />
+				</a-form-item>
+			</a-form>
+		</a-modal>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import {
+	SearchOutlined,
+	RedoOutlined,
+	PlusOutlined,
+	DeleteOutlined,
+	CheckOutlined,
+	CloseOutlined,
+} from '@ant-design/icons-vue'
+import authApi from '@/api/auth'
+import scTable from '@/components/scTable/index.vue'
+
+defineOptions({
+	name: 'PermissionManagement',
+})
+
+const searchParams = ref({
+	keyword: '',
+	type: undefined,
+	status: undefined,
+})
+
+const loading = ref(false)
+const dataSource = ref([])
+const treeDataSource = ref([])
+const pagination = ref({
+	current: 1,
+	pageSize: 20,
+	total: 0,
+})
+
+const viewMode = ref(true)
+const selectedRowKeys = ref([])
+const rowSelection = computed(() => ({
+	selectedRowKeys: selectedRowKeys.value,
+	onChange: (keys) => {
+		selectedRowKeys.value = keys
+	},
+}))
+
+const treeRowSelection = computed(() => ({
+	selectedRowKeys: selectedRowKeys.value,
+	onChange: (keys) => {
+		selectedRowKeys.value = keys
+	},
+}))
+
+const columns = [
+	{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+	{ title: '权限名称', key: 'name', width: 200 },
+	{ title: '权限编码', dataIndex: 'code', key: 'code', width: 200 },
+	{ title: '类型', key: 'type', width: 100, align: 'center' },
+	{ title: '路由', dataIndex: 'route', key: 'route', width: 200 },
+	{ title: '组件', dataIndex: 'component', key: 'component', width: 200 },
+	{ title: '图标', dataIndex: 'icon', key: 'icon', width: 100 },
+	{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
+	{ title: '状态', key: 'status', width: 80, align: 'center' },
+	{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
+	{ title: '操作', key: 'action', width: 220, fixed: 'right' },
+]
+
+const treeColumns = [
+	{ title: '权限名称', key: 'name', width: 300 },
+	{ title: '权限编码', dataIndex: 'code', key: 'code', width: 200 },
+	{ title: '类型', key: 'type', width: 100, align: 'center' },
+	{ title: '路由', dataIndex: 'route', key: 'route', width: 200 },
+	{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
+	{ title: '状态', key: 'status', width: 80, align: 'center' },
+	{ title: '操作', key: 'action', width: 220, fixed: 'right' },
+]
+
+const permissionTree = ref([])
+
+const modalVisible = ref(false)
+const modalTitle = ref('新增权限')
+const formData = ref({})
+const formRef = ref(null)
+const formRules = {
+	name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
+	code: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
+	type: [{ required: true, message: '请选择权限类型', trigger: 'change' }],
+}
+
+const fetchData = async () => {
+	loading.value = true
+	try {
+		if (viewMode.value) {
+			const res = await authApi.permissions.tree.get()
+			treeDataSource.value = res.data
+		} else {
+			const res = await authApi.permissions.list.get({
+				page: pagination.value.current,
+				page_size: pagination.value.pageSize,
+				...searchParams.value,
+			})
+			dataSource.value = res.data.list
+			pagination.value.total = res.data.total
+		}
+	} catch (error) {
+		message.error('获取权限列表失败')
+	} finally {
+		loading.value = false
+	}
+}
+
+const fetchPermissionTree = async () => {
+	try {
+		const res = await authApi.permissions.tree.get()
+		permissionTree.value = [{ id: 0, name: '顶级权限', children: res.data }]
+	} catch (error) {
+		message.error('获取权限树失败')
+	}
+}
+
+const handleSearch = () => {
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handleReset = () => {
+	searchParams.value = {
+		keyword: '',
+		type: undefined,
+		status: undefined,
+	}
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handleViewModeChange = () => {
+	selectedRowKeys.value = []
+	fetchData()
+}
+
+const handlePageChange = (page) => {
+	pagination.value.current = page
+	fetchData()
+}
+
+const handleAdd = () => {
+	modalTitle.value = '新增权限'
+	formData.value = {
+		parent_id: 0,
+		status: 1,
+		sort: 0,
+	}
+	modalVisible.value = true
+}
+
+const handleAddChild = (record) => {
+	modalTitle.value = '新增子权限'
+	formData.value = {
+		parent_id: record.id,
+		status: 1,
+		sort: 0,
+	}
+	modalVisible.value = true
+}
+
+const handleEdit = (record) => {
+	modalTitle.value = '编辑权限'
+	formData.value = { ...record }
+	modalVisible.value = true
+}
+
+const handleSubmit = async () => {
+	try {
+		await formRef.value.validate()
+		if (formData.value.id) {
+			await authApi.permissions.edit.put(formData.value.id, formData.value)
+			message.success('更新成功')
+		} else {
+			await authApi.permissions.add.post(formData.value)
+			message.success('创建成功')
+		}
+		modalVisible.value = false
+		fetchData()
+	} catch (error) {
+		if (error.errorFields) {
+			return
+		}
+		message.error(error.message || '操作失败')
+	}
+}
+
+const handleCancel = () => {
+	modalVisible.value = false
+	formData.value = {}
+	formRef.value?.resetFields()
+}
+
+const handleDelete = async (id) => {
+	try {
+		await authApi.permissions.delete.delete(id)
+		message.success('删除成功')
+		fetchData()
+	} catch (error) {
+		message.error('删除失败')
+	}
+}
+
+const handleBatchDelete = async () => {
+	try {
+		await authApi.permissions.batchDelete.post({ ids: selectedRowKeys.value })
+		message.success('批量删除成功')
+		selectedRowKeys.value = []
+		fetchData()
+	} catch (error) {
+		message.error('批量删除失败')
+	}
+}
+
+const handleBatchStatus = async (status = 1) => {
+	try {
+		await authApi.permissions.batchStatus.post({ ids: selectedRowKeys.value, status })
+		message.success(status ? '批量启用成功' : '批量禁用成功')
+		selectedRowKeys.value = []
+		fetchData()
+	} catch (error) {
+		message.error('操作失败')
+	}
+}
+
+const getTypeColor = (type) => {
+	const colors = {
+		menu: 'blue',
+		api: 'green',
+		button: 'orange',
+	}
+	return colors[type] || 'default'
+}
+
+const getTypeLabel = (type) => {
+	const labels = {
+		menu: '菜单',
+		api: '接口',
+		button: '按钮',
+	}
+	return labels[type] || type
+}
+
+onMounted(() => {
+	fetchData()
+	fetchPermissionTree()
+})
+</script>
+
+<style scoped lang="scss">
+.permission-management {
+	padding: 16px;
+
+	.search-card {
+		margin-bottom: 16px;
+	}
+
+	.table-card {
+		:deep(.ant-card-body) {
+			padding: 16px;
+		}
+	}
+}
+</style>
diff --git a/resources/admin/src/pages/auth/roles/index.vue b/resources/admin/src/pages/auth/roles/index.vue
new file mode 100644
index 0000000..af3c13e
--- /dev/null
+++ b/resources/admin/src/pages/auth/roles/index.vue
@@ -0,0 +1,436 @@
+<template>
+	<div class="role-management">
+		<!-- 搜索表单 -->
+		<a-card class="search-card" :bordered="false">
+			<a-form :model="searchParams" layout="inline">
+				<a-form-item label="关键词">
+					<a-input v-model:value="searchParams.keyword" placeholder="角色名称/编码" allow-clear style="width: 200px" />
+				</a-form-item>
+				<a-form-item label="状态">
+					<a-select v-model:value="searchParams.status" allow-clear placeholder="请选择状态" style="width: 120px">
+						<a-select-option :value="1">启用</a-select-option>
+						<a-select-option :value="0">禁用</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item>
+					<a-space>
+						<a-button type="primary" @click="handleSearch">
+							<template #icon><SearchOutlined /></template>
+							搜索
+						</a-button>
+						<a-button @click="handleReset">
+							<template #icon><RedoOutlined /></template>
+							重置
+						</a-button>
+					</a-space>
+				</a-form-item>
+			</a-form>
+		</a-card>
+
+		<!-- 操作按钮 -->
+		<a-card class="table-card" :bordered="false">
+			<template #title>
+				<a-space>
+					<a-button type="primary" @click="handleAdd">
+						<template #icon><PlusOutlined /></template>
+						新增
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchCopy">
+						<template #icon><CopyOutlined /></template>
+						批量复制
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
+						<template #icon><DeleteOutlined /></template>
+						批量删除
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus">
+						<template #icon><CheckOutlined /></template>
+						批量启用
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus(false)" danger>
+						<template #icon><CloseOutlined /></template>
+						批量禁用
+					</a-button>
+				</a-space>
+			</template>
+
+			<!-- 数据表格 -->
+			<sc-table
+				:columns="columns"
+				:data-source="dataSource"
+				:loading="loading"
+				:pagination="pagination"
+				:row-selection="rowSelection"
+				@page-change="handlePageChange"
+			>
+				<template #bodyCell="{ column, record }">
+					<template v-if="column.key === 'status'">
+						<a-tag :color="record.status === 1 ? 'success' : 'error'">
+							{{ record.status === 1 ? '启用' : '禁用' }}
+						</a-tag>
+					</template>
+					<template v-if="column.key === 'action'">
+						<a-space>
+							<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+							<a-button type="link" size="small" @click="handlePermissions(record)">权限</a-button>
+							<a-button type="link" size="small" @click="handleCopy(record)">复制</a-button>
+							<a-popconfirm title="确定要删除该角色吗？" @confirm="handleDelete(record.id)">
+								<a-button type="link" size="small" danger>删除</a-button>
+							</a-popconfirm>
+						</a-space>
+					</template>
+				</template>
+			</sc-table>
+		</a-card>
+
+		<!-- 新增/编辑弹窗 -->
+		<a-modal
+			v-model:open="modalVisible"
+			:title="modalTitle"
+			:width="600"
+			@ok="handleSubmit"
+			@cancel="handleCancel"
+		>
+			<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }">
+				<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="请输入角色编码" :disabled="!!formData.id" />
+				</a-form-item>
+				<a-form-item label="描述" name="description">
+					<a-textarea v-model:value="formData.description" placeholder="请输入描述" :rows="3" />
+				</a-form-item>
+				<a-form-item label="排序" name="sort">
+					<a-input-number v-model:value="formData.sort" :min="0" :max="9999" 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>
+		</a-modal>
+
+		<!-- 权限分配弹窗 -->
+		<a-modal
+			v-model:open="permissionVisible"
+			title="分配权限"
+			:width="600"
+			@ok="handlePermissionSubmit"
+			@cancel="permissionVisible = false"
+		>
+			<a-tree
+				v-model:checkedKeys="checkedPermissions"
+				checkable
+				:tree-data="permissionTree"
+				:field-names="{ title: 'name', key: 'id', children: 'children' }"
+				default-expand-all
+			/>
+		</a-modal>
+
+		<!-- 复制弹窗 -->
+		<a-modal
+			v-model:open="copyVisible"
+			title="复制角色"
+			:width="500"
+			@ok="handleCopySubmit"
+			@cancel="copyVisible = false"
+		>
+			<a-form ref="copyFormRef" :model="copyFormData" :rules="copyFormRules" :label-col="{ span: 6 }">
+				<a-form-item label="角色名称" name="name">
+					<a-input v-model:value="copyFormData.name" placeholder="请输入角色名称" />
+				</a-form-item>
+				<a-form-item label="角色编码" name="code">
+					<a-input v-model:value="copyFormData.code" placeholder="请输入角色编码" />
+				</a-form-item>
+				<a-form-item label="描述" name="description">
+					<a-textarea v-model:value="copyFormData.description" placeholder="请输入描述" :rows="3" />
+				</a-form-item>
+				<a-form-item label="状态" name="status">
+					<a-radio-group v-model:value="copyFormData.status">
+						<a-radio :value="1">启用</a-radio>
+						<a-radio :value="0">禁用</a-radio>
+					</a-radio-group>
+				</a-form-item>
+			</a-form>
+		</a-modal>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import {
+	SearchOutlined,
+	RedoOutlined,
+	PlusOutlined,
+	DeleteOutlined,
+	CheckOutlined,
+	CloseOutlined,
+	CopyOutlined,
+} from '@ant-design/icons-vue'
+import authApi from '@/api/auth'
+import scTable from '@/components/scTable/index.vue'
+
+defineOptions({
+	name: 'RoleManagement',
+})
+
+const searchParams = ref({
+	keyword: '',
+	status: undefined,
+})
+
+const loading = ref(false)
+const dataSource = ref([])
+const pagination = ref({
+	current: 1,
+	pageSize: 20,
+	total: 0,
+})
+
+const selectedRowKeys = ref([])
+const rowSelection = computed(() => ({
+	selectedRowKeys: selectedRowKeys.value,
+	onChange: (keys) => {
+		selectedRowKeys.value = keys
+	},
+}))
+
+const columns = [
+	{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+	{ title: '角色名称', dataIndex: 'name', key: 'name', width: 150 },
+	{ title: '角色编码', dataIndex: 'code', key: 'code', width: 150 },
+	{ title: '描述', dataIndex: 'description', key: 'description', width: 200 },
+	{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
+	{ title: '状态', key: 'status', width: 80, align: 'center' },
+	{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
+	{ title: '操作', key: 'action', width: 250, fixed: 'right' },
+]
+
+const modalVisible = ref(false)
+const modalTitle = ref('新增角色')
+const formData = ref({})
+const formRef = ref(null)
+const formRules = {
+	name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
+	code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
+}
+
+const permissionVisible = ref(false)
+const currentRole = ref(null)
+const permissionTree = ref([])
+const checkedPermissions = ref([])
+
+const copyVisible = ref(false)
+const copyFormData = ref({})
+const copyFormRef = ref(null)
+const copyFormRules = {
+	name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
+	code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
+}
+
+const fetchData = async () => {
+	loading.value = true
+	try {
+		const res = await authApi.roles.list.get({
+			page: pagination.value.current,
+			page_size: pagination.value.pageSize,
+			...searchParams.value,
+		})
+		dataSource.value = res.data.list
+		pagination.value.total = res.data.total
+	} catch (error) {
+		message.error('获取角色列表失败')
+	} finally {
+		loading.value = false
+	}
+}
+
+const fetchPermissionTree = async () => {
+	try {
+		const res = await authApi.permissions.tree.get()
+		permissionTree.value = res.data
+	} catch (error) {
+		message.error('获取权限树失败')
+	}
+}
+
+const handleSearch = () => {
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handleReset = () => {
+	searchParams.value = {
+		keyword: '',
+		status: undefined,
+	}
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handlePageChange = (page) => {
+	pagination.value.current = page
+	fetchData()
+}
+
+const handleAdd = () => {
+	modalTitle.value = '新增角色'
+	formData.value = {
+		status: 1,
+		sort: 0,
+	}
+	modalVisible.value = true
+}
+
+const handleEdit = (record) => {
+	modalTitle.value = '编辑角色'
+	formData.value = { ...record }
+	modalVisible.value = true
+}
+
+const handleSubmit = async () => {
+	try {
+		await formRef.value.validate()
+		if (formData.value.id) {
+			await authApi.roles.edit.put(formData.value.id, formData.value)
+			message.success('更新成功')
+		} else {
+			await authApi.roles.add.post(formData.value)
+			message.success('创建成功')
+		}
+		modalVisible.value = false
+		fetchData()
+	} catch (error) {
+		if (error.errorFields) {
+			return
+		}
+		message.error(error.message || '操作失败')
+	}
+}
+
+const handleCancel = () => {
+	modalVisible.value = false
+	formData.value = {}
+	formRef.value?.resetFields()
+}
+
+const handleDelete = async (id) => {
+	try {
+		await authApi.roles.delete.delete(id)
+		message.success('删除成功')
+		fetchData()
+	} catch (error) {
+		message.error('删除失败')
+	}
+}
+
+const handleBatchDelete = async () => {
+	try {
+		await authApi.roles.batchDelete.post({ ids: selectedRowKeys.value })
+		message.success('批量删除成功')
+		selectedRowKeys.value = []
+		fetchData()
+	} catch (error) {
+		message.error('批量删除失败')
+	}
+}
+
+const handleBatchStatus = async (status = 1) => {
+	try {
+		await authApi.roles.batchStatus.post({ ids: selectedRowKeys.value, status })
+		message.success(status ? '批量启用成功' : '批量禁用成功')
+		selectedRowKeys.value = []
+		fetchData()
+	} catch (error) {
+		message.error('操作失败')
+	}
+}
+
+const handlePermissions = async (record) => {
+	currentRole.value = record
+	permissionVisible.value = true
+	try {
+		const res = await authApi.roles.permissions.get(record.id)
+		checkedPermissions.value = res.data.map((p) => p.id)
+	} catch (error) {
+		message.error('获取角色权限失败')
+	}
+}
+
+const handlePermissionSubmit = async () => {
+	try {
+		await authApi.roles.permissions.post(currentRole.value.id, {
+			permission_ids: checkedPermissions.value,
+		})
+		message.success('分配权限成功')
+		permissionVisible.value = false
+	} catch (error) {
+		message.error('分配权限失败')
+	}
+}
+
+const handleCopy = (record) => {
+	copyFormData.value = {
+		name: `${record.name}_copy`,
+		code: `${record.code}_copy`,
+		description: record.description,
+		status: record.status,
+	}
+	copyVisible.value = true
+}
+
+const handleCopySubmit = async () => {
+	try {
+		await copyFormRef.value.validate()
+		await authApi.roles.copy.post(selectedRowKeys.value[0] || currentRole.value.id, copyFormData.value)
+		message.success('复制成功')
+		copyVisible.value = false
+		fetchData()
+	} catch (error) {
+		if (error.errorFields) {
+			return
+		}
+		message.error(error.message || '复制失败')
+	}
+}
+
+const handleBatchCopy = async () => {
+	try {
+		await authApi.roles.batchCopy.post({
+			ids: selectedRowKeys.value,
+			name: copyFormData.value.name,
+			code: copyFormData.value.code,
+		})
+		message.success('批量复制成功')
+		selectedRowKeys.value = []
+		fetchData()
+	} catch (error) {
+		message.error('批量复制失败')
+	}
+}
+
+onMounted(() => {
+	fetchData()
+	fetchPermissionTree()
+})
+</script>
+
+<style scoped lang="scss">
+.role-management {
+	padding: 16px;
+
+	.search-card {
+		margin-bottom: 16px;
+	}
+
+	.table-card {
+		:deep(.ant-card-body) {
+			padding: 16px;
+		}
+	}
+}
+</style>
diff --git a/resources/admin/src/pages/auth/users/index.vue b/resources/admin/src/pages/auth/users/index.vue
new file mode 100644
index 0000000..2402c34
--- /dev/null
+++ b/resources/admin/src/pages/auth/users/index.vue
@@ -0,0 +1,525 @@
+<template>
+	<div class="user-management">
+		<!-- 搜索表单 -->
+		<a-card class="search-card" :bordered="false">
+			<a-form :model="searchParams" layout="inline">
+				<a-form-item label="关键词">
+					<a-input v-model:value="searchParams.keyword" placeholder="用户名/真实姓名/邮箱" allow-clear style="width: 200px" />
+				</a-form-item>
+				<a-form-item label="部门">
+					<a-tree-select
+						v-model:value="searchParams.department_id"
+						:tree-data="departmentTree"
+						allow-clear
+						show-search
+						placeholder="请选择部门"
+						style="width: 200px"
+						:field-names="{ label: 'name', value: 'id', children: 'children' }"
+						tree-default-expand-all
+					/>
+				</a-form-item>
+				<a-form-item label="角色">
+					<a-select v-model:value="searchParams.role_id" allow-clear placeholder="请选择角色" style="width: 150px">
+						<a-select-option v-for="role in roles" :key="role.id" :value="role.id">
+							{{ role.name }}
+						</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item label="状态">
+					<a-select v-model:value="searchParams.status" allow-clear placeholder="请选择状态" style="width: 120px">
+						<a-select-option :value="1">启用</a-select-option>
+						<a-select-option :value="0">禁用</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item>
+					<a-space>
+						<a-button type="primary" @click="handleSearch">
+							<template #icon><SearchOutlined /></template>
+							搜索
+						</a-button>
+						<a-button @click="handleReset">
+							<template #icon><RedoOutlined /></template>
+							重置
+						</a-button>
+					</a-space>
+				</a-form-item>
+			</a-form>
+		</a-card>
+
+		<!-- 操作按钮 -->
+		<a-card class="table-card" :bordered="false">
+			<template #title>
+				<a-space>
+					<a-button type="primary" @click="handleAdd">
+						<template #icon><PlusOutlined /></template>
+						新增
+					</a-button>
+					<a-button @click="handleExport">
+						<template #icon><ExportOutlined /></template>
+						导出
+					</a-button>
+					<a-button @click="handleImport">
+						<template #icon><ImportOutlined /></template>
+						导入
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
+						<template #icon><DeleteOutlined /></template>
+						批量删除
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus">
+						<template #icon><CheckOutlined /></template>
+						批量启用
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus(false)" danger>
+						<template #icon><CloseOutlined /></template>
+						批量禁用
+					</a-button>
+				</a-space>
+			</template>
+
+			<!-- 数据表格 -->
+			<sc-table
+				:columns="columns"
+				:data-source="dataSource"
+				:loading="loading"
+				:pagination="pagination"
+				:row-selection="rowSelection"
+				@page-change="handlePageChange"
+			>
+				<template #bodyCell="{ column, record }">
+					<template v-if="column.key === 'avatar'">
+						<a-avatar :src="record.avatar" :size="40">
+							<template #icon><UserOutlined /></template>
+						</a-avatar>
+					</template>
+					<template v-if="column.key === 'status'">
+						<a-tag :color="record.status === 1 ? 'success' : 'error'">
+							{{ record.status === 1 ? '启用' : '禁用' }}
+						</a-tag>
+					</template>
+					<template v-if="column.key === 'roles'">
+						<a-tag v-for="role in record.roles" :key="role.id" color="blue">{{ role.name }}</a-tag>
+					</template>
+					<template v-if="column.key === 'action'">
+						<a-space>
+							<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+							<a-button type="link" size="small" @click="handleResetPassword(record)">重置密码</a-button>
+							<a-popconfirm title="确定要删除该用户吗？" @confirm="handleDelete(record.id)">
+								<a-button type="link" size="small" danger>删除</a-button>
+							</a-popconfirm>
+						</a-space>
+					</template>
+				</template>
+			</sc-table>
+		</a-card>
+
+		<!-- 新增/编辑弹窗 -->
+		<a-modal
+			v-model:open="modalVisible"
+			:title="modalTitle"
+			:width="600"
+			@ok="handleSubmit"
+			@cancel="handleCancel"
+		>
+			<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }">
+				<a-form-item label="用户名" name="username">
+					<a-input v-model:value="formData.username" placeholder="请输入用户名" :disabled="!!formData.id" />
+				</a-form-item>
+				<a-form-item v-if="!formData.id" label="密码" name="password">
+					<a-input-password v-model:value="formData.password" placeholder="请输入密码" />
+				</a-form-item>
+				<a-form-item label="真实姓名" name="real_name">
+					<a-input v-model:value="formData.real_name" placeholder="请输入真实姓名" />
+				</a-form-item>
+				<a-form-item label="邮箱" name="email">
+					<a-input v-model:value="formData.email" placeholder="请输入邮箱" />
+				</a-form-item>
+				<a-form-item label="手机号" name="phone">
+					<a-input v-model:value="formData.phone" placeholder="请输入手机号" />
+				</a-form-item>
+				<a-form-item label="部门" name="department_id">
+					<a-tree-select
+						v-model:value="formData.department_id"
+						:tree-data="departmentTree"
+						placeholder="请选择部门"
+						:field-names="{ label: 'name', value: 'id', children: 'children' }"
+						tree-default-expand-all
+					/>
+				</a-form-item>
+				<a-form-item label="角色" name="role_ids">
+					<a-select v-model:value="formData.role_ids" mode="multiple" placeholder="请选择角色" :options="roleOptions" />
+				</a-form-item>
+				<a-form-item label="头像" name="avatar">
+					<sc-upload v-model="formData.avatar" :limit="1" accept="image/*" list-type="picture-card" />
+				</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>
+		</a-modal>
+
+		<!-- 导入弹窗 -->
+		<a-modal v-model:open="importVisible" title="导入用户" :width="500" @ok="handleImportSubmit">
+			<a-space direction="vertical" style="width: 100%">
+				<a-alert message="请先下载导入模板，填写完成后上传" type="info" show-icon />
+				<a-button block @click="handleDownloadTemplate">
+					<template #icon><DownloadOutlined /></template>
+					下载导入模板
+				</a-button>
+				<a-upload
+					:file-list="fileList"
+					:before-upload="beforeUpload"
+					@remove="handleRemove"
+				>
+					<a-button block>
+						<template #icon><UploadOutlined /></template>
+						选择文件
+					</a-button>
+				</a-upload>
+			</a-space>
+		</a-modal>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, h } from 'vue'
+import { message } from 'ant-design-vue'
+import {
+	SearchOutlined,
+	RedoOutlined,
+	PlusOutlined,
+	DeleteOutlined,
+	CheckOutlined,
+	CloseOutlined,
+	ExportOutlined,
+	ImportOutlined,
+	DownloadOutlined,
+	UploadOutlined,
+	UserOutlined,
+} from '@ant-design/icons-vue'
+import authApi from '@/api/auth'
+import scTable from '@/components/scTable/index.vue'
+import scUpload from '@/components/scUpload/index.vue'
+
+defineOptions({
+	name: 'UserManagement',
+})
+
+const searchParams = ref({
+	keyword: '',
+	department_id: undefined,
+	role_id: undefined,
+	status: undefined,
+})
+
+const loading = ref(false)
+const dataSource = ref([])
+const pagination = ref({
+	current: 1,
+	pageSize: 20,
+	total: 0,
+})
+
+const selectedRowKeys = ref([])
+const rowSelection = computed(() => ({
+	selectedRowKeys: selectedRowKeys.value,
+	onChange: (keys) => {
+		selectedRowKeys.value = keys
+	},
+}))
+
+const columns = [
+	{ title: '头像', key: 'avatar', width: 80, align: 'center' },
+	{ title: '用户名', dataIndex: 'username', key: 'username', width: 120 },
+	{ title: '真实姓名', dataIndex: 'real_name', key: 'real_name', width: 120 },
+	{ title: '邮箱', dataIndex: 'email', key: 'email', width: 180 },
+	{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
+	{ title: '部门', dataIndex: 'department_name', key: 'department_name', width: 150 },
+	{ title: '角色', key: 'roles', width: 200 },
+	{ title: '状态', key: 'status', width: 80, align: 'center' },
+	{ title: '最后登录', dataIndex: 'last_login_at', key: 'last_login_at', width: 180 },
+	{ title: '操作', key: 'action', width: 200, fixed: 'right' },
+]
+
+const departmentTree = ref([])
+const roles = ref([])
+const roleOptions = computed(() => roles.value.map((r) => ({ label: r.name, value: r.id })))
+
+const modalVisible = ref(false)
+const modalTitle = ref('新增用户')
+const formData = ref({})
+const formRef = ref(null)
+const formRules = {
+	username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+	password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+	real_name: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
+	email: [{ type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }],
+	phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
+}
+
+const importVisible = ref(false)
+const fileList = ref([])
+const uploadFile = ref(null)
+
+const fetchData = async () => {
+	loading.value = true
+	try {
+		const res = await authApi.users.list.get({
+			page: pagination.value.current,
+			page_size: pagination.value.pageSize,
+			...searchParams.value,
+		})
+		dataSource.value = res.data.list
+		pagination.value.total = res.data.total
+	} catch (error) {
+		message.error('获取用户列表失败')
+	} finally {
+		loading.value = false
+	}
+}
+
+const fetchDepartments = async () => {
+	try {
+		const res = await authApi.departments.tree.get()
+		departmentTree.value = [{ id: 0, name: '顶级部门', children: res.data }]
+	} catch (error) {
+		message.error('获取部门树失败')
+	}
+}
+
+const fetchRoles = async () => {
+	try {
+		const res = await authApi.roles.all.get()
+		roles.value = res.data
+	} catch (error) {
+		message.error('获取角色列表失败')
+	}
+}
+
+const handleSearch = () => {
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handleReset = () => {
+	searchParams.value = {
+		keyword: '',
+		department_id: undefined,
+		role_id: undefined,
+		status: undefined,
+	}
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handlePageChange = (page) => {
+	pagination.value.current = page
+	fetchData()
+}
+
+const handleAdd = () => {
+	modalTitle.value = '新增用户'
+	formData.value = {
+		status: 1,
+		role_ids: [],
+	}
+	modalVisible.value = true
+}
+
+const handleEdit = (record) => {
+	modalTitle.value = '编辑用户'
+	formData.value = {
+		...record,
+		role_ids: record.roles?.map((r) => r.id) || [],
+	}
+	modalVisible.value = true
+}
+
+const handleSubmit = async () => {
+	try {
+		await formRef.value.validate()
+		if (formData.value.id) {
+			await authApi.users.edit.put(formData.value.id, formData.value)
+			message.success('更新成功')
+		} else {
+			await authApi.users.add.post(formData.value)
+			message.success('创建成功')
+		}
+		modalVisible.value = false
+		fetchData()
+	} catch (error) {
+		if (error.errorFields) {
+			return
+		}
+		message.error(error.message || '操作失败')
+	}
+}
+
+const handleCancel = () => {
+	modalVisible.value = false
+	formData.value = {}
+	formRef.value?.resetFields()
+}
+
+const handleDelete = async (id) => {
+	try {
+		await authApi.users.delete.delete(id)
+		message.success('删除成功')
+		fetchData()
+	} catch (error) {
+		message.error('删除失败')
+	}
+}
+
+const handleBatchDelete = async () => {
+	try {
+		await authApi.users.batchDelete.post({ ids: selectedRowKeys.value })
+		message.success('批量删除成功')
+		selectedRowKeys.value = []
+		fetchData()
+	} catch (error) {
+		message.error('批量删除失败')
+	}
+}
+
+const handleBatchStatus = async (status = 1) => {
+	try {
+		await authApi.users.batchStatus.post({ ids: selectedRowKeys.value, status })
+		message.success(status ? '批量启用成功' : '批量禁用成功')
+		selectedRowKeys.value = []
+		fetchData()
+	} catch (error) {
+		message.error('操作失败')
+	}
+}
+
+const handleResetPassword = (record) => {
+	const input = h('input', {
+		type: 'password',
+		placeholder: '请输入新密码',
+		onInput: (e) => {
+			record.newPassword = e.target.value
+		},
+	})
+
+	modal.confirm({
+		title: '重置密码',
+		content: h('div', { style: { marginTop: '16px' } }, [input]),
+		onOk: async () => {
+			if (!record.newPassword) {
+				message.error('请输入新密码')
+				return Promise.reject()
+			}
+			try {
+				await authApi.users.edit.put(record.id, { password: record.newPassword })
+				message.success('重置密码成功')
+			} catch (error) {
+				message.error('重置密码失败')
+				return Promise.reject()
+			}
+		},
+	})
+}
+
+const handleExport = async () => {
+	try {
+		const res = await authApi.users.export.post({})
+		const url = window.URL.createObjectURL(new Blob([res]))
+		const link = document.createElement('a')
+		link.href = url
+		link.setAttribute('download', `users_${Date.now()}.xlsx`)
+		document.body.appendChild(link)
+		link.click()
+		document.body.removeChild(link)
+		message.success('导出成功')
+	} catch (error) {
+		message.error('导出失败')
+	}
+}
+
+const handleImport = () => {
+	importVisible.value = true
+	fileList.value = []
+	uploadFile.value = null
+}
+
+const beforeUpload = (file) => {
+	const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel'
+	if (!isExcel) {
+		message.error('只能上传 Excel 文件')
+		return false
+	}
+	const isLt10M = file.size / 1024 / 1024 < 10
+	if (!isLt10M) {
+		message.error('文件大小不能超过 10MB')
+		return false
+	}
+	uploadFile.value = file
+	fileList.value = [file]
+	return false
+}
+
+const handleRemove = () => {
+	uploadFile.value = null
+	fileList.value = []
+}
+
+const handleDownloadTemplate = async () => {
+	try {
+		const res = await authApi.users.downloadTemplate.get()
+		const url = window.URL.createObjectURL(new Blob([res]))
+		const link = document.createElement('a')
+		link.href = url
+		link.setAttribute('download', 'user_template.xlsx')
+		document.body.appendChild(link)
+		link.click()
+		document.body.removeChild(link)
+	} catch (error) {
+		message.error('下载模板失败')
+	}
+}
+
+const handleImportSubmit = async () => {
+	if (!uploadFile.value) {
+		message.error('请选择文件')
+		return
+	}
+
+	const formData = new FormData()
+	formData.append('file', uploadFile.value)
+
+	try {
+		const res = await authApi.users.import.post(formData)
+		message.success(res.message || '导入成功')
+		importVisible.value = false
+		fetchData()
+	} catch (error) {
+		message.error('导入失败')
+	}
+}
+
+onMounted(() => {
+	fetchData()
+	fetchDepartments()
+	fetchRoles()
+})
+</script>
+
+<style scoped lang="scss">
+.user-management {
+	padding: 16px;
+
+	.search-card {
+		margin-bottom: 16px;
+	}
+
+	.table-card {
+		:deep(.ant-card-body) {
+			padding: 16px;
+		}
+	}
+}
+</style>
diff --git a/resources/admin/src/pages/system/config/index.vue b/resources/admin/src/pages/system/config/index.vue
new file mode 100644
index 0000000..35c7b51
--- /dev/null
+++ b/resources/admin/src/pages/system/config/index.vue
@@ -0,0 +1,489 @@
+<template>
+	<div class="config-management">
+		<!-- 搜索表单 -->
+		<a-card class="search-card" :bordered="false">
+			<a-form :model="searchParams" layout="inline">
+				<a-form-item label="关键词">
+					<a-input v-model:value="searchParams.keyword" placeholder="配置名称/键" allow-clear style="width: 200px" />
+				</a-form-item>
+				<a-form-item label="分组">
+					<a-select v-model:value="searchParams.group" allow-clear placeholder="请选择分组" style="width: 150px">
+						<a-select-option v-for="group in groups" :key="group" :value="group">
+							{{ group }}
+						</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item label="状态">
+					<a-select v-model:value="searchParams.status" allow-clear placeholder="请选择状态" style="width: 120px">
+						<a-select-option :value="1">启用</a-select-option>
+						<a-select-option :value="0">禁用</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item>
+					<a-space>
+						<a-button type="primary" @click="handleSearch">
+							<template #icon><SearchOutlined /></template>
+							搜索
+						</a-button>
+						<a-button @click="handleReset">
+							<template #icon><RedoOutlined /></template>
+							重置
+						</a-button>
+					</a-space>
+				</a-form-item>
+			</a-form>
+		</a-card>
+
+		<!-- 操作按钮 -->
+		<a-card class="table-card" :bordered="false">
+			<template #title>
+				<a-space>
+					<a-button type="primary" @click="handleAdd">
+						<template #icon><PlusOutlined /></template>
+						新增
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
+						<template #icon><DeleteOutlined /></template>
+						批量删除
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus">
+						<template #icon><CheckOutlined /></template>
+						批量启用
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus(false)" danger>
+						<template #icon><CloseOutlined /></template>
+						批量禁用
+					</a-button>
+				</a-space>
+			</template>
+
+			<!-- 数据表格 -->
+			<sc-table
+				:columns="columns"
+				:data-source="dataSource"
+				:loading="loading"
+				:pagination="pagination"
+				:row-selection="rowSelection"
+				@page-change="handlePageChange"
+			>
+				<template #bodyCell="{ column, record }">
+					<template v-if="column.key === 'type'">
+						<a-tag :color="getTypeColor(record.type)">
+							{{ getTypeLabel(record.type) }}
+						</a-tag>
+					</template>
+					<template v-if="column.key === 'value'">
+						<span v-if="record.type === 'image' || record.type === 'file'" class="value-preview">
+							<a-image
+								v-if="record.type === 'image'"
+								:src="record.value"
+								:width="40"
+								:height="40"
+								style="object-fit: cover"
+							/>
+							<a-tag v-else color="blue">文件</a-tag>
+						</span>
+						<span v-else class="value-text">{{ formatValue(record.value, record.type) }}</span>
+					</template>
+					<template v-if="column.key === 'status'">
+						<a-tag :color="record.status === 1 ? 'success' : 'error'">
+							{{ record.status === 1 ? '启用' : '禁用' }}
+						</a-tag>
+					</template>
+					<template v-if="column.key === 'action'">
+						<a-space>
+							<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+							<a-popconfirm title="确定要删除该配置吗？" @confirm="handleDelete(record.id)">
+								<a-button type="link" size="small" danger>删除</a-button>
+							</a-popconfirm>
+						</a-space>
+					</template>
+				</template>
+			</sc-table>
+		</a-card>
+
+		<!-- 新增/编辑弹窗 -->
+		<a-modal
+			v-model:open="modalVisible"
+			:title="modalTitle"
+			:width="700"
+			@ok="handleSubmit"
+			@cancel="handleCancel"
+		>
+			<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }">
+				<a-form-item label="配置分组" name="group">
+					<a-select v-model:value="formData.group" placeholder="请选择配置分组">
+						<a-select-option v-for="group in groups" :key="group" :value="group">
+							{{ group }}
+						</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item label="配置键" name="key">
+					<a-input v-model:value="formData.key" placeholder="请输入配置键，如：site_name" :disabled="!!formData.id" />
+				</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="description">
+					<a-textarea v-model:value="formData.description" placeholder="请输入配置描述" :rows="2" />
+				</a-form-item>
+				<a-form-item label="数据类型" name="type">
+					<a-select v-model:value="formData.type" placeholder="请选择数据类型">
+						<a-select-option value="string">字符串</a-select-option>
+						<a-select-option value="number">数字</a-select-option>
+						<a-select-option value="boolean">布尔值</a-select-option>
+						<a-select-option value="array">数组</a-select-option>
+						<a-select-option value="image">图片</a-select-option>
+						<a-select-option value="file">文件</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item label="配置值" name="value">
+					<template v-if="formData.type === 'boolean'">
+						<a-radio-group v-model:value="formData.value">
+							<a-radio :value="true">是</a-radio>
+							<a-radio :value="false">否</a-radio>
+						</a-radio-group>
+					</template>
+					<template v-else-if="formData.type === 'number'">
+						<a-input-number v-model:value="formData.value" style="width: 100%" />
+					</template>
+					<template v-else-if="formData.type === 'array'">
+						<a-textarea
+							v-model:value="arrayValue"
+							placeholder="JSON数组格式，如：[1,2,3]"
+							:rows="3"
+							@blur="handleArrayBlur"
+						/>
+					</template>
+					<template v-else-if="formData.type === 'image'">
+						<sc-upload v-model="formData.value" :limit="1" accept="image/*" list-type="picture-card" />
+					</template>
+					<template v-else-if="formData.type === 'file'">
+						<sc-upload v-model="formData.value" :limit="1" list-type="text" />
+					</template>
+					<template v-else>
+						<a-textarea v-model:value="formData.value" placeholder="请输入配置值" :rows="3" />
+					</template>
+				</a-form-item>
+				<a-form-item v-if="formData.type === 'string'" label="可选值" name="options">
+					<a-textarea
+						v-model:value="optionsValue"
+						placeholder="每行一个选项，如：option1&#10;option2&#10;option3"
+						:rows="3"
+						@blur="handleOptionsBlur"
+					/>
+				</a-form-item>
+				<a-form-item label="排序" name="sort">
+					<a-input-number v-model:value="formData.sort" :min="0" :max="9999" 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>
+		</a-modal>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import {
+	SearchOutlined,
+	RedoOutlined,
+	PlusOutlined,
+	DeleteOutlined,
+	CheckOutlined,
+	CloseOutlined,
+} from '@ant-design/icons-vue'
+import systemApi from '@/api/system'
+import scTable from '@/components/scTable/index.vue'
+import scUpload from '@/components/scUpload/index.vue'
+
+defineOptions({
+	name: 'ConfigManagement',
+})
+
+const searchParams = ref({
+	keyword: '',
+	group: undefined,
+	status: undefined,
+})
+
+const loading = ref(false)
+const dataSource = ref([])
+const pagination = ref({
+	current: 1,
+	pageSize: 20,
+	total: 0,
+})
+
+const selectedRowKeys = ref([])
+const rowSelection = computed(() => ({
+	selectedRowKeys: selectedRowKeys.value,
+	onChange: (keys) => {
+		selectedRowKeys.value = keys
+	},
+}))
+
+const columns = [
+	{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+	{ title: '配置分组', dataIndex: 'group', key: 'group', width: 120 },
+	{ title: '配置键', dataIndex: 'key', key: 'key', width: 200 },
+	{ title: '配置名称', dataIndex: 'name', key: 'name', width: 150 },
+	{ title: '数据类型', key: 'type', width: 100, align: 'center' },
+	{ title: '配置值', key: 'value', width: 200 },
+	{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
+	{ title: '状态', key: 'status', width: 80, align: 'center' },
+	{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
+	{ title: '操作', key: 'action', width: 150, fixed: 'right' },
+]
+
+const groups = ref([])
+
+const modalVisible = ref(false)
+const modalTitle = ref('新增配置')
+const formData = ref({})
+const formRef = ref(null)
+const formRules = {
+	group: [{ required: true, message: '请选择配置分组', trigger: 'change' }],
+	key: [{ required: true, message: '请输入配置键', trigger: 'blur' }],
+	name: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
+	type: [{ required: true, message: '请选择数据类型', trigger: 'change' }],
+}
+
+const arrayValue = ref('')
+const optionsValue = ref('')
+
+const fetchData = async () => {
+	loading.value = true
+	try {
+		const res = await systemApi.configs.list.get({
+			page: pagination.value.current,
+			page_size: pagination.value.pageSize,
+			...searchParams.value,
+		})
+		dataSource.value = res.data.list
+		pagination.value.total = res.data.total
+	} catch (error) {
+		message.error('获取配置列表失败')
+	} finally {
+		loading.value = false
+	}
+}
+
+const fetchGroups = async () => {
+	try {
+		const res = await systemApi.configs.groups.get()
+		groups.value = res.data
+	} catch (error) {
+		message.error('获取配置分组失败')
+	}
+}
+
+const handleSearch = () => {
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handleReset = () => {
+	searchParams.value = {
+		keyword: '',
+		group: undefined,
+		status: undefined,
+	}
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handlePageChange = (page) => {
+	pagination.value.current = page
+	fetchData()
+}
+
+const handleAdd = () => {
+	modalTitle.value = '新增配置'
+	formData.value = {
+		status: 1,
+		sort: 0,
+		type: 'string',
+	}
+	arrayValue.value = ''
+	optionsValue.value = ''
+	modalVisible.value = true
+}
+
+const handleEdit = (record) => {
+	modalTitle.value = '编辑配置'
+	formData.value = { ...record }
+	if (record.type === 'array') {
+		arrayValue.value = typeof record.value === 'string' ? record.value : JSON.stringify(record.value)
+	}
+	if (record.options) {
+		optionsValue.value = Array.isArray(record.options) ? record.options.join('\n') : record.options
+	}
+	modalVisible.value = true
+}
+
+const handleArrayBlur = () => {
+	try {
+		if (arrayValue.value) {
+			formData.value.value = JSON.parse(arrayValue.value)
+		}
+	} catch (error) {
+		message.error('数组格式错误，请输入正确的JSON格式')
+	}
+}
+
+const handleOptionsBlur = () => {
+	if (optionsValue.value) {
+		formData.value.options = optionsValue.value.split('\n').filter((item) => item.trim())
+	}
+}
+
+const handleSubmit = async () => {
+	try {
+		await formRef.value.validate()
+		const submitData = { ...formData.value }
+		if (submitData.type === 'array' && arrayValue.value) {
+			submitData.value = JSON.parse(arrayValue.value)
+		}
+		if (submitData.type === 'boolean') {
+			submitData.value = submitData.value === 'true' || submitData.value === true
+		}
+		if (optionsValue.value) {
+			submitData.options = optionsValue.value.split('\n').filter((item) => item.trim())
+		}
+		if (submitData.id) {
+			await systemApi.configs.edit.put(submitData.id, submitData)
+			message.success('更新成功')
+		} else {
+			await systemApi.configs.add.post(submitData)
+			message.success('创建成功')
+		}
+		modalVisible.value = false
+		fetchData()
+	} catch (error) {
+		if (error.errorFields) {
+			return
+		}
+		message.error(error.message || '操作失败')
+	}
+}
+
+const handleCancel = () => {
+	modalVisible.value = false
+	formData.value = {}
+	arrayValue.value = ''
+	optionsValue.value = ''
+	formRef.value?.resetFields()
+}
+
+const handleDelete = async (id) => {
+	try {
+		await systemApi.configs.delete.delete(id)
+		message.success('删除成功')
+		fetchData()
+	} catch (error) {
+		message.error('删除失败')
+	}
+}
+
+const handleBatchDelete = async () => {
+	try {
+		await systemApi.configs.batchDelete.post({ ids: selectedRowKeys.value })
+		message.success('批量删除成功')
+		selectedRowKeys.value = []
+		fetchData()
+	} catch (error) {
+		message.error('批量删除失败')
+	}
+}
+
+const handleBatchStatus = async (status = 1) => {
+	try {
+		await systemApi.configs.batchStatus.post({ ids: selectedRowKeys.value, status })
+		message.success(status ? '批量启用成功' : '批量禁用成功')
+		selectedRowKeys.value = []
+		fetchData()
+	} catch (error) {
+		message.error('操作失败')
+	}
+}
+
+const getTypeColor = (type) => {
+	const colors = {
+		string: 'blue',
+		number: 'green',
+		boolean: 'orange',
+		array: 'purple',
+		image: 'cyan',
+		file: 'geekblue',
+	}
+	return colors[type] || 'default'
+}
+
+const getTypeLabel = (type) => {
+	const labels = {
+		string: '字符串',
+		number: '数字',
+		boolean: '布尔值',
+		array: '数组',
+		image: '图片',
+		file: '文件',
+	}
+	return labels[type] || type
+}
+
+const formatValue = (value, type) => {
+	if (type === 'array') {
+		try {
+			const arr = typeof value === 'string' ? JSON.parse(value) : value
+			return Array.isArray(arr) ? arr.join(', ') : value
+		} catch {
+			return value
+		}
+	}
+	if (type === 'boolean') {
+		return value === 'true' || value === true ? '是' : '否'
+	}
+	if (typeof value === 'string' && value.length > 50) {
+		return value.substring(0, 50) + '...'
+	}
+	return value
+}
+
+onMounted(() => {
+	fetchData()
+	fetchGroups()
+})
+</script>
+
+<style scoped lang="scss">
+.config-management {
+	padding: 16px;
+
+	.search-card {
+		margin-bottom: 16px;
+	}
+
+	.table-card {
+		:deep(.ant-card-body) {
+			padding: 16px;
+		}
+	}
+
+	.value-preview {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.value-text {
+		color: #666;
+		font-size: 13px;
+	}
+}
+</style>
diff --git a/resources/admin/src/pages/system/dictionary/index.vue b/resources/admin/src/pages/system/dictionary/index.vue
new file mode 100644
index 0000000..23b26cb
--- /dev/null
+++ b/resources/admin/src/pages/system/dictionary/index.vue
@@ -0,0 +1,463 @@
+<template>
+	<div class="dictionary-management">
+		<!-- 搜索表单 -->
+		<a-card class="search-card" :bordered="false">
+			<a-form :model="searchParams" layout="inline">
+				<a-form-item label="关键词">
+					<a-input v-model:value="searchParams.keyword" placeholder="字典名称/编码" allow-clear style="width: 200px" />
+				</a-form-item>
+				<a-form-item label="状态">
+					<a-select v-model:value="searchParams.status" allow-clear placeholder="请选择状态" style="width: 120px">
+						<a-select-option :value="1">启用</a-select-option>
+						<a-select-option :value="0">禁用</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item>
+					<a-space>
+						<a-button type="primary" @click="handleSearch">
+							<template #icon><SearchOutlined /></template>
+							搜索
+						</a-button>
+						<a-button @click="handleReset">
+							<template #icon><RedoOutlined /></template>
+							重置
+						</a-button>
+					</a-space>
+				</a-form-item>
+			</a-form>
+		</a-card>
+
+		<!-- 操作按钮 -->
+		<a-card class="table-card" :bordered="false">
+			<template #title>
+				<a-space>
+					<a-button type="primary" @click="handleAdd">
+						<template #icon><PlusOutlined /></template>
+						新增
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
+						<template #icon><DeleteOutlined /></template>
+						批量删除
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus">
+						<template #icon><CheckOutlined /></template>
+						批量启用
+					</a-button>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus(false)" danger>
+						<template #icon><CloseOutlined /></template>
+						批量禁用
+					</a-button>
+				</a-space>
+			</template>
+
+			<!-- 数据表格 -->
+			<sc-table
+				:columns="columns"
+				:data-source="dataSource"
+				:loading="loading"
+				:pagination="pagination"
+				:row-selection="rowSelection"
+				@page-change="handlePageChange"
+			>
+				<template #bodyCell="{ column, record }">
+					<template v-if="column.key === 'item_count'">
+						<a-tag color="blue">{{ record.item_count || 0 }} 项</a-tag>
+					</template>
+					<template v-if="column.key === 'status'">
+						<a-tag :color="record.status === 1 ? 'success' : 'error'">
+							{{ record.status === 1 ? '启用' : '禁用' }}
+						</a-tag>
+					</template>
+					<template v-if="column.key === 'action'">
+						<a-space>
+							<a-button type="link" size="small" @click="handleItems(record)">字典项</a-button>
+							<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+							<a-popconfirm title="确定要删除该字典吗？" @confirm="handleDelete(record.id)">
+								<a-button type="link" size="small" danger>删除</a-button>
+							</a-popconfirm>
+						</a-space>
+					</template>
+				</template>
+			</sc-table>
+		</a-card>
+
+		<!-- 新增/编辑弹窗 -->
+		<a-modal
+			v-model:open="modalVisible"
+			:title="modalTitle"
+			:width="600"
+			@ok="handleSubmit"
+			@cancel="handleCancel"
+		>
+			<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }">
+				<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="请输入字典编码，如：user_status" :disabled="!!formData.id" />
+				</a-form-item>
+				<a-form-item label="描述" name="description">
+					<a-textarea v-model:value="formData.description" placeholder="请输入描述" :rows="3" />
+				</a-form-item>
+				<a-form-item label="排序" name="sort">
+					<a-input-number v-model:value="formData.sort" :min="0" :max="9999" 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>
+		</a-modal>
+
+		<!-- 字典项弹窗 -->
+		<a-modal
+			v-model:open="itemModalVisible"
+			:title="`字典项 - ${currentDictionary?.name}`"
+			:width="900"
+			:footer="null"
+		>
+			<div class="dictionary-items">
+				<a-space style="margin-bottom: 16px">
+					<a-button type="primary" @click="handleAddItem">
+						<template #icon><PlusOutlined /></template>
+						新增字典项
+					</a-button>
+				</a-space>
+
+				<a-table
+					:columns="itemColumns"
+					:data-source="itemDataSource"
+					:loading="itemLoading"
+					:pagination="false"
+					row-key="id"
+				>
+					<template #bodyCell="{ column, record }">
+						<template v-if="column.key === 'status'">
+							<a-tag :color="record.status === 1 ? 'success' : 'error'">
+								{{ record.status === 1 ? '启用' : '禁用' }}
+							</a-tag>
+						</template>
+						<template v-if="column.key === 'action'">
+							<a-space>
+								<a-button type="link" size="small" @click="handleEditItem(record)">编辑</a-button>
+								<a-popconfirm title="确定要删除该字典项吗？" @confirm="handleDeleteItem(record.id)">
+									<a-button type="link" size="small" danger>删除</a-button>
+								</a-popconfirm>
+							</a-space>
+						</template>
+					</template>
+				</a-table>
+			</div>
+		</a-modal>
+
+		<!-- 字典项编辑弹窗 -->
+		<a-modal
+			v-model:open="itemEditVisible"
+			:title="itemEditTitle"
+			:width="500"
+			@ok="handleItemSubmit"
+			@cancel="itemEditVisible = false"
+		>
+			<a-form ref="itemFormRef" :model="itemFormData" :rules="itemFormRules" :label-col="{ span: 6 }">
+				<a-form-item label="显示标签" name="label">
+					<a-input v-model:value="itemFormData.label" placeholder="请输入显示标签" />
+				</a-form-item>
+				<a-form-item label="实际值" name="value">
+					<a-input v-model:value="itemFormData.value" placeholder="请输入实际值" />
+				</a-form-item>
+				<a-form-item label="排序" name="sort">
+					<a-input-number v-model:value="itemFormData.sort" :min="0" :max="9999" style="width: 100%" />
+				</a-form-item>
+				<a-form-item label="状态" name="status">
+					<a-radio-group v-model:value="itemFormData.status">
+						<a-radio :value="1">启用</a-radio>
+						<a-radio :value="0">禁用</a-radio>
+					</a-radio-group>
+				</a-form-item>
+			</a-form>
+		</a-modal>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import {
+	SearchOutlined,
+	RedoOutlined,
+	PlusOutlined,
+	DeleteOutlined,
+	CheckOutlined,
+	CloseOutlined,
+} from '@ant-design/icons-vue'
+import systemApi from '@/api/system'
+import scTable from '@/components/scTable/index.vue'
+
+defineOptions({
+	name: 'DictionaryManagement',
+})
+
+const searchParams = ref({
+	keyword: '',
+	status: undefined,
+})
+
+const loading = ref(false)
+const dataSource = ref([])
+const pagination = ref({
+	current: 1,
+	pageSize: 20,
+	total: 0,
+})
+
+const selectedRowKeys = ref([])
+const rowSelection = computed(() => ({
+	selectedRowKeys: selectedRowKeys.value,
+	onChange: (keys) => {
+		selectedRowKeys.value = keys
+	},
+}))
+
+const columns = [
+	{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+	{ title: '字典名称', dataIndex: 'name', key: 'name', width: 200 },
+	{ title: '字典编码', dataIndex: 'code', key: 'code', width: 200 },
+	{ title: '描述', dataIndex: 'description', key: 'description', width: 250 },
+	{ title: '字典项', key: 'item_count', width: 100, align: 'center' },
+	{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
+	{ title: '状态', key: 'status', width: 80, align: 'center' },
+	{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
+	{ title: '操作', key: 'action', width: 200, fixed: 'right' },
+]
+
+const modalVisible = ref(false)
+const modalTitle = ref('新增字典')
+const formData = ref({})
+const formRef = ref(null)
+const formRules = {
+	name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
+	code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }],
+}
+
+const itemModalVisible = ref(false)
+const itemLoading = ref(false)
+const itemDataSource = ref([])
+const currentDictionary = ref(null)
+const itemColumns = [
+	{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+	{ title: '显示标签', dataIndex: 'label', key: 'label', width: 200 },
+	{ title: '实际值', dataIndex: 'value', key: 'value', width: 200 },
+	{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
+	{ title: '状态', key: 'status', width: 80, align: 'center' },
+	{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
+	{ title: '操作', key: 'action', width: 150, fixed: 'right' },
+]
+
+const itemEditVisible = ref(false)
+const itemEditTitle = ref('新增字典项')
+const itemFormData = ref({})
+const itemFormRef = ref(null)
+const itemFormRules = {
+	label: [{ required: true, message: '请输入显示标签', trigger: 'blur' }],
+	value: [{ required: true, message: '请输入实际值', trigger: 'blur' }],
+}
+
+const fetchData = async () => {
+	loading.value = true
+	try {
+		const res = await systemApi.dictionaries.list.get({
+			page: pagination.value.current,
+			page_size: pagination.value.pageSize,
+			...searchParams.value,
+		})
+		dataSource.value = res.data.list
+		pagination.value.total = res.data.total
+	} catch (error) {
+		message.error('获取字典列表失败')
+	} finally {
+		loading.value = false
+	}
+}
+
+const handleSearch = () => {
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handleReset = () => {
+	searchParams.value = {
+		keyword: '',
+		status: undefined,
+	}
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handlePageChange = (page) => {
+	pagination.value.current = page
+	fetchData()
+}
+
+const handleAdd = () => {
+	modalTitle.value = '新增字典'
+	formData.value = {
+		status: 1,
+		sort: 0,
+	}
+	modalVisible.value = true
+}
+
+const handleEdit = (record) => {
+	modalTitle.value = '编辑字典'
+	formData.value = { ...record }
+	modalVisible.value = true
+}
+
+const handleSubmit = async () => {
+	try {
+		await formRef.value.validate()
+		if (formData.value.id) {
+			await systemApi.dictionaries.edit.put(formData.value.id, formData.value)
+			message.success('更新成功')
+		} else {
+			await systemApi.dictionaries.add.post(formData.value)
+			message.success('创建成功')
+		}
+		modalVisible.value = false
+		fetchData()
+	} catch (error) {
+		if (error.errorFields) {
+			return
+		}
+		message.error(error.message || '操作失败')
+	}
+}
+
+const handleCancel = () => {
+	modalVisible.value = false
+	formData.value = {}
+	formRef.value?.resetFields()
+}
+
+const handleDelete = async (id) => {
+	try {
+		await systemApi.dictionaries.delete.delete(id)
+		message.success('删除成功')
+		fetchData()
+	} catch (error) {
+		message.error('删除失败')
+	}
+}
+
+const handleBatchDelete = async () => {
+	try {
+		await systemApi.dictionaries.batchDelete.post({ ids: selectedRowKeys.value })
+		message.success('批量删除成功')
+		selectedRowKeys.value = []
+		fetchData()
+	} catch (error) {
+		message.error('批量删除失败')
+	}
+}
+
+const handleBatchStatus = async (status = 1) => {
+	try {
+		await systemApi.dictionaries.batchStatus.post({ ids: selectedRowKeys.value, status })
+		message.success(status ? '批量启用成功' : '批量禁用成功')
+		selectedRowKeys.value = []
+		fetchData()
+	} catch (error) {
+		message.error('操作失败')
+	}
+}
+
+const handleItems = async (record) => {
+	currentDictionary.value = record
+	itemModalVisible.value = true
+	await fetchDictionaryItems(record.id)
+}
+
+const fetchDictionaryItems = async (dictionaryId) => {
+	itemLoading.value = true
+	try {
+		const res = await systemApi.dictionaryItems.list.get({ dictionary_id: dictionaryId })
+		itemDataSource.value = res.data.list || res.data
+	} catch (error) {
+		message.error('获取字典项失败')
+	} finally {
+		itemLoading.value = false
+	}
+}
+
+const handleAddItem = () => {
+	itemEditTitle.value = '新增字典项'
+	itemFormData.value = {
+		dictionary_id: currentDictionary.value.id,
+		status: 1,
+		sort: 0,
+	}
+	itemEditVisible.value = true
+}
+
+const handleEditItem = (record) => {
+	itemEditTitle.value = '编辑字典项'
+	itemFormData.value = { ...record }
+	itemEditVisible.value = true
+}
+
+const handleItemSubmit = async () => {
+	try {
+		await itemFormRef.value.validate()
+		if (itemFormData.value.id) {
+			await systemApi.dictionaryItems.edit.put(itemFormData.value.id, itemFormData.value)
+			message.success('更新成功')
+		} else {
+			await systemApi.dictionaryItems.add.post(itemFormData.value)
+			message.success('创建成功')
+		}
+		itemEditVisible.value = false
+		fetchDictionaryItems(currentDictionary.value.id)
+	} catch (error) {
+		if (error.errorFields) {
+			return
+		}
+		message.error(error.message || '操作失败')
+	}
+}
+
+const handleDeleteItem = async (id) => {
+	try {
+		await systemApi.dictionaryItems.delete.delete(id)
+		message.success('删除成功')
+		fetchDictionaryItems(currentDictionary.value.id)
+	} catch (error) {
+		message.error('删除失败')
+	}
+}
+
+onMounted(() => {
+	fetchData()
+})
+</script>
+
+<style scoped lang="scss">
+.dictionary-management {
+	padding: 16px;
+
+	.search-card {
+		margin-bottom: 16px;
+	}
+
+	.table-card {
+		:deep(.ant-card-body) {
+			padding: 16px;
+		}
+	}
+
+	.dictionary-items {
+		padding: 0;
+	}
+}
+</style>
diff --git a/resources/admin/src/pages/system/log/index.vue b/resources/admin/src/pages/system/log/index.vue
new file mode 100644
index 0000000..51771f9
--- /dev/null
+++ b/resources/admin/src/pages/system/log/index.vue
@@ -0,0 +1,368 @@
+<template>
+	<div class="log-management">
+		<!-- 搜索表单 -->
+		<a-card class="search-card" :bordered="false">
+			<a-form :model="searchParams" layout="inline">
+				<a-form-item label="关键词">
+					<a-input v-model:value="searchParams.keyword" placeholder="日志内容" allow-clear style="width: 200px" />
+				</a-form-item>
+				<a-form-item label="日志类型">
+					<a-select v-model:value="searchParams.type" allow-clear placeholder="请选择类型" style="width: 120px">
+						<a-select-option value="info">信息</a-select-option>
+						<a-select-option value="warning">警告</a-select-option>
+						<a-select-option value="error">错误</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item label="时间范围">
+					<a-range-picker
+						v-model:value="searchParams.date_range"
+						show-time
+						format="YYYY-MM-DD HH:mm:ss"
+						placeholder="['开始时间', '结束时间']"
+						style="width: 350px"
+					/>
+				</a-form-item>
+				<a-form-item>
+					<a-space>
+						<a-button type="primary" @click="handleSearch">
+							<template #icon><SearchOutlined /></template>
+							搜索
+						</a-button>
+						<a-button @click="handleReset">
+							<template #icon><RedoOutlined /></template>
+							重置
+						</a-button>
+						<a-button @click="handleExport">
+							<template #icon><ExportOutlined /></template>
+							导出
+						</a-button>
+					</a-space>
+				</a-form-item>
+			</a-form>
+		</a-card>
+
+		<!-- 操作按钮 -->
+		<a-card class="table-card" :bordered="false">
+			<template #title>
+				<a-space>
+					<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
+						<template #icon><DeleteOutlined /></template>
+						批量删除
+					</a-button>
+					<a-popconfirm title="确定要清空所有日志吗？" @confirm="handleClearAll">
+						<a-button danger>
+							<template #icon><ClearOutlined /></template>
+							清空日志
+						</a-button>
+					</a-popconfirm>
+				</a-space>
+			</template>
+
+			<!-- 数据表格 -->
+			<sc-table
+				:columns="columns"
+				:data-source="dataSource"
+				:loading="loading"
+				:pagination="pagination"
+				:row-selection="rowSelection"
+				@page-change="handlePageChange"
+			>
+				<template #bodyCell="{ column, record }">
+					<template v-if="column.key === 'type'">
+						<a-tag :color="getTypeColor(record.type)">
+							<template #icon>
+								<InfoCircleOutlined v-if="record.type === 'info'" />
+								<WarningOutlined v-else-if="record.type === 'warning'" />
+								<CloseCircleOutlined v-else-if="record.type === 'error'" />
+							</template>
+							{{ getTypeLabel(record.type) }}
+						</a-tag>
+					</template>
+					<template v-if="column.key === 'message'">
+						<a-tooltip :title="record.message">
+							<span class="log-message">{{ record.message }}</span>
+						</a-tooltip>
+					</template>
+					<template v-if="column.key === 'action'">
+						<a-space>
+							<a-button type="link" size="small" @click="handleDetail(record)">详情</a-button>
+							<a-popconfirm title="确定要删除该日志吗？" @confirm="handleDelete(record.id)">
+								<a-button type="link" size="small" danger>删除</a-button>
+							</a-popconfirm>
+						</a-space>
+					</template>
+				</template>
+			</sc-table>
+		</a-card>
+
+		<!-- 日志详情弹窗 -->
+		<a-modal
+			v-model:open="detailVisible"
+			title="日志详情"
+			:width="800"
+			:footer="null"
+		>
+			<div class="log-detail" v-if="currentLog">
+				<a-descriptions :column="1" bordered>
+					<a-descriptions-item label="ID">{{ currentLog.id }}</a-descriptions-item>
+					<a-descriptions-item label="日志类型">
+						<a-tag :color="getTypeColor(currentLog.type)">
+							{{ getTypeLabel(currentLog.type) }}
+						</a-tag>
+					</a-descriptions-item>
+					<a-descriptions-item label="用户">{{ currentLog.username || '-' }}</a-descriptions-item>
+					<a-descriptions-item label="IP地址">{{ currentLog.ip || '-' }}</a-descriptions-item>
+					<a-descriptions-item label="请求方法">{{ currentLog.method || '-' }}</a-descriptions-item>
+					<a-descriptions-item label="请求路径">{{ currentLog.url || '-' }}</a-descriptions-item>
+					<a-descriptions-item label="User Agent">
+						<span class="user-agent">{{ currentLog.user_agent || '-' }}</span>
+					</a-descriptions-item>
+					<a-descriptions-item label="日志内容">
+						<pre class="log-content">{{ currentLog.message }}</pre>
+					</a-descriptions-item>
+					<a-descriptions-item v-if="currentLog.context" label="上下文">
+						<pre class="log-context">{{ formatJson(currentLog.context) }}</pre>
+					</a-descriptions-item>
+					<a-descriptions-item label="创建时间">{{ currentLog.created_at }}</a-descriptions-item>
+				</a-descriptions>
+			</div>
+		</a-modal>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import {
+	SearchOutlined,
+	RedoOutlined,
+	DeleteOutlined,
+	ExportOutlined,
+	ClearOutlined,
+	InfoCircleOutlined,
+	WarningOutlined,
+	CloseCircleOutlined,
+} from '@ant-design/icons-vue'
+import systemApi from '@/api/system'
+import scTable from '@/components/scTable/index.vue'
+import dayjs from 'dayjs'
+
+defineOptions({
+	name: 'LogManagement',
+})
+
+const searchParams = ref({
+	keyword: '',
+	type: undefined,
+	date_range: undefined,
+})
+
+const loading = ref(false)
+const dataSource = ref([])
+const pagination = ref({
+	current: 1,
+	pageSize: 20,
+	total: 0,
+})
+
+const selectedRowKeys = ref([])
+const rowSelection = computed(() => ({
+	selectedRowKeys: selectedRowKeys.value,
+	onChange: (keys) => {
+		selectedRowKeys.value = keys
+	},
+}))
+
+const columns = [
+	{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+	{ title: '日志类型', key: 'type', width: 100, align: 'center' },
+	{ title: '日志内容', key: 'message', width: 400 },
+	{ title: '用户', dataIndex: 'username', key: 'username', width: 120 },
+	{ title: 'IP地址', dataIndex: 'ip', key: 'ip', width: 130 },
+	{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
+	{ title: '操作', key: 'action', width: 150, fixed: 'right' },
+]
+
+const detailVisible = ref(false)
+const currentLog = ref(null)
+
+const fetchData = async () => {
+	loading.value = true
+	try {
+		const params = {
+			page: pagination.value.current,
+			page_size: pagination.value.pageSize,
+			...searchParams.value,
+		}
+
+		if (params.date_range && params.date_range.length === 2) {
+			params.start_time = dayjs(params.date_range[0]).format('YYYY-MM-DD HH:mm:ss')
+			params.end_time = dayjs(params.date_range[1]).format('YYYY-MM-DD HH:mm:ss')
+		}
+
+		delete params.date_range
+
+		const res = await systemApi.logs.list.get(params)
+		dataSource.value = res.data.list
+		pagination.value.total = res.data.total
+	} catch (error) {
+		message.error('获取日志列表失败')
+	} finally {
+		loading.value = false
+	}
+}
+
+const handleSearch = () => {
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handleReset = () => {
+	searchParams.value = {
+		keyword: '',
+		type: undefined,
+		date_range: undefined,
+	}
+	pagination.value.current = 1
+	fetchData()
+}
+
+const handlePageChange = (page) => {
+	pagination.value.current = page
+	fetchData()
+}
+
+const handleDetail = (record) => {
+	currentLog.value = record
+	detailVisible.value = true
+}
+
+const handleDelete = async (id) => {
+	try {
+		await systemApi.logs.delete.delete(id)
+		message.success('删除成功')
+		fetchData()
+	} catch (error) {
+		message.error('删除失败')
+	}
+}
+
+const handleBatchDelete = async () => {
+	try {
+		await systemApi.logs.batchDelete.post({ ids: selectedRowKeys.value })
+		message.success('批量删除成功')
+		selectedRowKeys.value = []
+		fetchData()
+	} catch (error) {
+		message.error('批量删除失败')
+	}
+}
+
+const handleClearAll = async () => {
+	try {
+		await systemApi.logs.clear.post()
+		message.success('清空日志成功')
+		fetchData()
+	} catch (error) {
+		message.error('清空日志失败')
+	}
+}
+
+const handleExport = async () => {
+	try {
+		const params = { ...searchParams.value }
+		if (params.date_range && params.date_range.length === 2) {
+			params.start_time = dayjs(params.date_range[0]).format('YYYY-MM-DD HH:mm:ss')
+			params.end_time = dayjs(params.date_range[1]).format('YYYY-MM-DD HH:mm:ss')
+		}
+		delete params.date_range
+
+		const res = await systemApi.logs.export.get(params)
+		const url = window.URL.createObjectURL(new Blob([res]))
+		const link = document.createElement('a')
+		link.href = url
+		link.setAttribute('download', `logs_${Date.now()}.xlsx`)
+		document.body.appendChild(link)
+		link.click()
+		document.body.removeChild(link)
+		message.success('导出成功')
+	} catch (error) {
+		message.error('导出失败')
+	}
+}
+
+const getTypeColor = (type) => {
+	const colors = {
+		info: 'blue',
+		warning: 'orange',
+		error: 'red',
+	}
+	return colors[type] || 'default'
+}
+
+const getTypeLabel = (type) => {
+	const labels = {
+		info: '信息',
+		warning: '警告',
+		error: '错误',
+	}
+	return labels[type] || type
+}
+
+const formatJson = (data) => {
+	try {
+		return typeof data === 'string' ? data : JSON.stringify(data, null, 2)
+	} catch {
+		return String(data)
+	}
+}
+
+onMounted(() => {
+	fetchData()
+})
+</script>
+
+<style scoped lang="scss">
+.log-management {
+	padding: 16px;
+
+	.search-card {
+		margin-bottom: 16px;
+	}
+
+	.table-card {
+		:deep(.ant-card-body) {
+			padding: 16px;
+		}
+	}
+
+	.log-message {
+		display: inline-block;
+		max-width: 380px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: #666;
+	}
+
+	.log-detail {
+		.user-agent {
+			word-break: break-all;
+			color: #666;
+			font-size: 13px;
+		}
+
+		.log-content,
+		.log-context {
+			margin: 0;
+			max-height: 300px;
+			overflow: auto;
+			background: #f5f5f5;
+			padding: 12px;
+			border-radius: 4px;
+			font-size: 13px;
+			line-height: 1.6;
+		}
+	}
+}
+</style>
diff --git a/resources/admin/src/router/index.js b/resources/admin/src/router/index.js
index 336f34a..ecac224 100644
--- a/resources/admin/src/router/index.js
+++ b/resources/admin/src/router/index.js
@@ -49,7 +49,11 @@ function loadComponent(componentPath) {
 	}
 
 	// 如果是简单的组件名称，从 pages 目录加载
-	return modules[`../pages/${componentPath}/index.vue`]
+	if (componentPath.endsWith('index')){
+		return modules[`../pages/${componentPath}.vue`]
+	} else {
+		return modules[`../pages/${componentPath}/index.vue`]
+	}
 }
 
 /**