frontend layout and infrastructure

2026-03-18 13:53:36 +08:00
parent 88df42fe52
commit 2b1a2f0c28
26 changed files with 986 additions and 460 deletions
@@ -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">
+          &copy; 2026 DataHub - 数据管理平台
+        </a-layout-footer>
+      </a-layout>
+    </a-layout>
+  </a-layout>
+</template>
+
+<style scoped>
+:deep(.ant-layout-sider) {
+  z-index: 9;
+}
+</style>
@@ -0,0 +1,127 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import MainLayout from '../MainLayout.vue'
+
+function createTestRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', component: { template: '<div>Home</div>' } },
+      { path: '/users', component: { template: '<div>Users</div>' } },
+      { path: '/orders', component: { template: '<div>Orders</div>' } },
+      { path: '/login', component: { template: '<div>Login</div>' } },
+    ],
+  })
+}
+
+describe('MainLayout', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  async function mountLayout(route = '/') {
+    const router = createTestRouter()
+    await router.push(route)
+    await router.isReady()
+
+    return mount(MainLayout, {
+      global: {
+        plugins: [router],
+        stubs: {
+          // Stub icons to avoid import issues in test
+          MenuFoldOutlined: { template: '<span class="fold-icon" />' },
+          MenuUnfoldOutlined: { template: '<span class="unfold-icon" />' },
+          DashboardOutlined: { template: '<span />' },
+          UserOutlined: { template: '<span />' },
+          ShoppingOutlined: { template: '<span />' },
+          FileTextOutlined: { template: '<span />' },
+          UnorderedListOutlined: { template: '<span />' },
+          DollarOutlined: { template: '<span />' },
+          MonitorOutlined: { template: '<span />' },
+          LogoutOutlined: { template: '<span />' },
+          SettingOutlined: { template: '<span />' },
+          KeyOutlined: { template: '<span />' },
+          Brand: { template: '<div class="brand-stub" />' },
+        },
+      },
+      slots: {
+        default: '<div class="test-content">Page Content</div>',
+      },
+    })
+  }
+
+  it('renders all four layout areas', async () => {
+    const wrapper = await mountLayout()
+
+    expect(wrapper.find('.ant-layout-header').exists()).toBe(true)
+    expect(wrapper.find('.ant-layout-sider').exists()).toBe(true)
+    expect(wrapper.find('.ant-layout-content').exists()).toBe(true)
+    expect(wrapper.find('.ant-layout-footer').exists()).toBe(true)
+  })
+
+  it('renders slot content in content area', async () => {
+    const wrapper = await mountLayout()
+
+    expect(wrapper.find('.test-content').text()).toBe('Page Content')
+  })
+
+  it('renders footer copyright', async () => {
+    const wrapper = await mountLayout()
+
+    expect(wrapper.find('.ant-layout-footer').text()).toContain('2026 DataHub')
+  })
+
+  it('toggles sidebar collapse state', async () => {
+    const wrapper = await mountLayout()
+    const sider = wrapper.findComponent({ name: 'ALayoutSider' })
+
+    expect(sider.props('collapsed')).toBe(false)
+
+    // Click the fold icon to collapse
+    await wrapper.find('.fold-icon').trigger('click')
+    expect(sider.props('collapsed')).toBe(true)
+    expect(localStorage.getItem('sidebarCollapsed')).toBe('true')
+
+    // Click the unfold icon to expand
+    await wrapper.find('.unfold-icon').trigger('click')
+    expect(sider.props('collapsed')).toBe(false)
+    expect(localStorage.getItem('sidebarCollapsed')).toBe('false')
+  })
+
+  it('restores collapsed state from localStorage', async () => {
+    localStorage.setItem('sidebarCollapsed', 'true')
+    const wrapper = await mountLayout()
+    const sider = wrapper.findComponent({ name: 'ALayoutSider' })
+
+    expect(sider.props('collapsed')).toBe(true)
+  })
+
+  it('displays username from localStorage', async () => {
+    localStorage.setItem('user', JSON.stringify({ username: 'testuser' }))
+    const wrapper = await mountLayout()
+
+    expect(wrapper.find('.ant-layout-header').text()).toContain('testuser')
+  })
+
+  it('displays default username when no user in localStorage', async () => {
+    const wrapper = await mountLayout()
+
+    expect(wrapper.find('.ant-layout-header').text()).toContain('admin')
+  })
+
+  it('renders navigation menu items', async () => {
+    const wrapper = await mountLayout()
+    const menuItems = wrapper.findAll('.ant-menu-item, .ant-menu-submenu')
+
+    expect(menuItems.length).toBeGreaterThan(0)
+  })
+
+  it('renders breadcrumb with home on root path', async () => {
+    const wrapper = await mountLayout('/')
+    const breadcrumb = wrapper.find('.ant-breadcrumb')
+
+    expect(breadcrumb.exists()).toBe(true)
+    expect(breadcrumb.text()).toContain('首页')
+  })
+})