frontend layout and infrastructure
This commit is contained in:
@@ -0,0 +1,228 @@
|
||||
<script setup lang="ts">
|
||||
import Brand from '@/components/Brand.vue'
|
||||
import {
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
DashboardOutlined,
|
||||
UserOutlined,
|
||||
ShoppingOutlined,
|
||||
FileTextOutlined,
|
||||
UnorderedListOutlined,
|
||||
DollarOutlined,
|
||||
MonitorOutlined,
|
||||
LogoutOutlined,
|
||||
SettingOutlined,
|
||||
KeyOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import type { Component } from 'vue'
|
||||
|
||||
interface MenuItem {
|
||||
key: string
|
||||
icon: Component
|
||||
label: string
|
||||
children?: MenuItem[]
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// 侧边栏折叠状态，持久化到 localStorage
|
||||
const collapsed = ref(localStorage.getItem('sidebarCollapsed') === 'true')
|
||||
|
||||
watch(collapsed, (val) => {
|
||||
localStorage.setItem('sidebarCollapsed', String(val))
|
||||
})
|
||||
|
||||
// 菜单选中项与路由同步
|
||||
const selectedKeys = computed(() => [route.path])
|
||||
|
||||
// 子菜单展开状态
|
||||
const openKeys = ref<string[]>([])
|
||||
|
||||
const initOpenKeys = () => {
|
||||
if (collapsed.value) return
|
||||
const path = route.path
|
||||
if (path.startsWith('/order')) openKeys.value = ['orders-group']
|
||||
else if (path.startsWith('/refund')) openKeys.value = ['refunds-group']
|
||||
}
|
||||
|
||||
onMounted(initOpenKeys)
|
||||
watch(() => route.path, initOpenKeys)
|
||||
|
||||
// 导航菜单配置
|
||||
const menuItems: MenuItem[] = [
|
||||
{ key: '/', icon: DashboardOutlined, label: '首页' },
|
||||
{ key: '/users', icon: UserOutlined, label: '用户管理' },
|
||||
{ key: '/products', icon: ShoppingOutlined, label: '产品管理' },
|
||||
{
|
||||
key: 'orders-group',
|
||||
icon: FileTextOutlined,
|
||||
label: '订单管理',
|
||||
children: [
|
||||
{ key: '/orders', icon: FileTextOutlined, label: '订单列表' },
|
||||
{ key: '/order-items', icon: UnorderedListOutlined, label: '订单子项' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'refunds-group',
|
||||
icon: DollarOutlined,
|
||||
label: '退款管理',
|
||||
children: [
|
||||
{ key: '/refunds', icon: DollarOutlined, label: '退款列表' },
|
||||
{ key: '/refund-items', icon: UnorderedListOutlined, label: '退款子项' },
|
||||
],
|
||||
},
|
||||
{ key: '/mq-status', icon: MonitorOutlined, label: '队列监控' },
|
||||
]
|
||||
|
||||
// 用户信息（P0.3 完成后将由 user store 提供）
|
||||
const username = computed(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem('user')
|
||||
if (saved) {
|
||||
return JSON.parse(saved).username || 'admin'
|
||||
}
|
||||
} catch {
|
||||
// ignore parse error
|
||||
}
|
||||
return 'admin'
|
||||
})
|
||||
|
||||
const handleMenuClick = ({ key }: { key: string }) => {
|
||||
if (key.startsWith('/')) {
|
||||
router.push(key)
|
||||
}
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('access_token')
|
||||
localStorage.removeItem('refresh_token')
|
||||
localStorage.removeItem('user')
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
// 面包屑
|
||||
const breadcrumbItems = computed(() => {
|
||||
const pathMap: Record<string, string> = {
|
||||
'/': '首页',
|
||||
'/users': '用户管理',
|
||||
'/products': '产品管理',
|
||||
'/orders': '订单列表',
|
||||
'/order-items': '订单子项',
|
||||
'/refunds': '退款列表',
|
||||
'/refund-items': '退款子项',
|
||||
'/mq-status': '队列监控',
|
||||
}
|
||||
|
||||
const items: Array<{ title: string; path: string }> = [{ title: '首页', path: '/' }]
|
||||
if (route.path !== '/') {
|
||||
items.push({ title: pathMap[route.path] || route.path, path: route.path })
|
||||
}
|
||||
return items
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-layout class="min-h-screen">
|
||||
<!-- Header -->
|
||||
<a-layout-header
|
||||
class="fixed top-0 w-full z-10 flex items-center justify-between px-4"
|
||||
style="height: 64px; line-height: 64px"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<Brand size="small" :show-app-name="!collapsed" />
|
||||
<component
|
||||
:is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined"
|
||||
class="text-white text-lg cursor-pointer hover:text-[#4da30d]"
|
||||
@click="collapsed = !collapsed"
|
||||
/>
|
||||
</div>
|
||||
<a-dropdown>
|
||||
<span class="cursor-pointer text-white/85 hover:text-white flex items-center gap-1">
|
||||
<UserOutlined />
|
||||
{{ username }}
|
||||
</span>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="profile">
|
||||
<SettingOutlined class="mr-2" />
|
||||
个人信息
|
||||
</a-menu-item>
|
||||
<a-menu-item key="password">
|
||||
<KeyOutlined class="mr-2" />
|
||||
修改密码
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="logout" @click="handleLogout">
|
||||
<LogoutOutlined class="mr-2" />
|
||||
退出登录
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-layout-header>
|
||||
|
||||
<a-layout class="mt-16">
|
||||
<!-- Sidebar -->
|
||||
<a-layout-sider
|
||||
v-model:collapsed="collapsed"
|
||||
:trigger="null"
|
||||
collapsible
|
||||
class="fixed left-0 top-16 bottom-0 overflow-y-auto"
|
||||
>
|
||||
<a-menu
|
||||
:selected-keys="selectedKeys"
|
||||
v-model:open-keys="openKeys"
|
||||
mode="inline"
|
||||
theme="dark"
|
||||
@click="handleMenuClick"
|
||||
>
|
||||
<template v-for="item in menuItems" :key="item.key">
|
||||
<a-sub-menu v-if="item.children" :key="item.key">
|
||||
<template #icon><component :is="item.icon" /></template>
|
||||
<template #title>{{ item.label }}</template>
|
||||
<a-menu-item v-for="child in item.children" :key="child.key">
|
||||
<template #icon><component :is="child.icon" /></template>
|
||||
{{ child.label }}
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="item.key">
|
||||
<template #icon><component :is="item.icon" /></template>
|
||||
{{ item.label }}
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
|
||||
<!-- Content + Footer -->
|
||||
<a-layout
|
||||
:style="{
|
||||
marginLeft: collapsed ? '80px' : '200px',
|
||||
transition: 'margin-left 0.2s',
|
||||
}"
|
||||
>
|
||||
<a-layout-content class="p-6">
|
||||
<a-breadcrumb class="mb-4">
|
||||
<a-breadcrumb-item v-for="item in breadcrumbItems" :key="item.path">
|
||||
<router-link v-if="item.path !== route.path" :to="item.path">
|
||||
{{ item.title }}
|
||||
</router-link>
|
||||
<span v-else>{{ item.title }}</span>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<slot />
|
||||
</a-layout-content>
|
||||
|
||||
<a-layout-footer class="text-center text-gray-500">
|
||||
© 2026 DataHub - 数据管理平台
|
||||
</a-layout-footer>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.ant-layout-sider) {
|
||||
z-index: 9;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user