项目初始化

2026-01-04 17:19:04 +08:00
commit 93aae460af
41 changed files with 6922 additions and 0 deletions
--- a/frontend/src/layouts/AdminLayout.vue
+++ b/frontend/src/layouts/AdminLayout.vue
@@ -0,0 +1,119 @@
+<template>
+  <n-layout style="height: 100vh" has-sider>
+    <n-layout-sider
+      bordered
+      show-trigger
+      collapse-mode="width"
+      :collapsed-width="64"
+      :width="240"
+      :native-scrollbar="false"
+    >
+      <div style="height: 60px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #e8e8e8;">
+        <h3 style="margin: 0; color: #18a058;">运营管理</h3>
+      </div>
+      <n-menu
+        :collapsed-width="64"
+        :collapsed-icon-size="22"
+        :options="menuOptions"
+        :value="activeKey"
+        @update:value="handleMenuSelect"
+      />
+    </n-layout-sider>
+    <n-layout>
+      <n-layout-header bordered style="height: 60px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between;">
+        <div class="header-left">
+          <h2 style="margin: 0;">梦幻西游运营管理系统</h2>
+        </div>
+        <div class="header-right" v-if="adminStore.userInfo">
+          <n-dropdown :options="userMenuOptions" @select="handleUserMenuSelect">
+            <div class="user-dropdown-trigger">
+              <span>{{ adminStore.userInfo.username }}</span>
+              <RiArrowDownSLine style="margin-left: 4px;" />
+            </div>
+          </n-dropdown>
+        </div>
+      </n-layout-header>
+      <n-layout-content style="padding: 24px;">
+        <router-view />
+      </n-layout-content>
+      <n-layout-footer bordered style="padding: 16px; text-align: center;">
+        <p style="margin: 0;">© 2026 梦幻西游一站式运营管理平台 - 运营管理系统</p>
+      </n-layout-footer>
+    </n-layout>
+  </n-layout>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+import { NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NLayoutFooter, NMenu, NDropdown } from 'naive-ui'
+import { RouterLink, useRoute, useRouter } from 'vue-router'
+import { useAdminStore } from '@/stores/admin'
+import { RiDashboardLine, RiArrowDownSLine, RiUserLine, RiLogoutBoxRLine } from '@remixicon/vue'
+
+const route = useRoute()
+const router = useRouter()
+const adminStore = useAdminStore()
+
+const activeKey = ref(String(route.name))
+
+const menuOptions = [
+  {
+    label: () => h(RouterLink, { to: '/admin/dashboard' }, { default: () => '工作台' }),
+    key: 'AdminDashboard',
+    icon: () => h(RiDashboardLine, { size: '20px' })
+  }
+]
+
+const userMenuOptions = [
+  {
+    label: '用户信息',
+    key: 'userInfo',
+    icon: () => h(RiUserLine, { size: '18px' })
+  },
+  {
+    type: 'divider',
+    key: 'd1'
+  },
+  {
+    label: '退出登录',
+    key: 'logout',
+    icon: () => h(RiLogoutBoxRLine, { size: '18px' })
+  }
+]
+
+const handleMenuSelect = (key: string) => {
+  activeKey.value = key
+}
+
+const handleUserMenuSelect = (key: string) => {
+  if (key === 'logout') {
+    handleLogout()
+  } else if (key === 'userInfo') {
+    console.log('用户信息')
+  }
+}
+
+const handleLogout = () => {
+  adminStore.logout()
+  router.push('/admin/login')
+}
+</script>
+
+<style scoped>
+.header-left h2 {
+  color: #18a058;
+}
+
+.user-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 8px 16px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+}
+
+.user-dropdown-trigger:hover {
+  background-color: #f0f0f0;
+}
+</style>