refactor(frontend): 重命名前端项目为 gym-manage-web

gym-manage-web/src/layouts/DefaultLayout.vue

@@ -0,0 +1,166 @@
+<template>
+  <el-container class="default-layout">
+    <el-aside
+      :width="collapsed ? '64px' : '200px'"
+      class="aside"
+    >
+      <div class="logo">
+        <span v-if="!collapsed">Novalon</span>
+        <span v-else>N</span>
+      </div>
+      <el-menu
+        :default-active="activeMenu"
+        class="menu"
+        :collapse="collapsed"
+        background-color="#f5f7fa"
+        text-color="#606266"
+        active-text-color="#409eff"
+        router
+      >
+        <div v-if="menuTree.length === 0" style="padding: 20px; text-align: center; color: #999;">
+          菜单加载中...
+        </div>
+        <menu-item
+          v-for="menu in menuTree"
+          :key="menu.id"
+          :menu="menu"
+        />
+      </el-menu>
+    </el-aside>
+    <el-container>
+      <el-header class="header">
+        <el-icon
+          class="trigger"
+          @click="collapsed = !collapsed"
+        >
+          <Fold v-if="!collapsed" />
+          <Expand v-else />
+        </el-icon>
+        <div class="header-right">
+          <el-dropdown @command="handleCommand">
+            <el-avatar :size="32">
+              {{ username }}
+            </el-avatar>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="profile">
+                  个人中心
+                </el-dropdown-item>
+                <el-dropdown-item
+                  command="logout"
+                  divided
+                >
+                  退出登录
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-header>
+      <el-main class="content">
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Fold, Expand } from '@element-plus/icons-vue'
+import { usePermissionStore } from '@/stores/permission'
+import MenuItem from '@/components/MenuItem.vue'
+
+const router = useRouter()
+const route = useRoute()
+const collapsed = ref(false)
+const username = ref(localStorage.getItem('username') || 'Admin')
+const permissionStore = usePermissionStore()
+
+const activeMenu = computed(() => route.path)
+const menuTree = computed(() => {
+  return permissionStore.menus
+})
+
+const handleCommand = (command: string) => {
+  if (command === 'profile') {
+    router.push('/profile')
+  } else if (command === 'logout') {
+    permissionStore.clearPermissionData()
+    localStorage.clear()
+    router.push('/login')
+  }
+}
+
+onMounted(async () => {
+  const token = localStorage.getItem('token')
+  
+  if (!token) {
+    router.push('/login')
+  } else if (!permissionStore.loaded) {
+    permissionStore.initFromStorage()
+    
+    if (!permissionStore.loaded || permissionStore.menus.length === 0) {
+      try {
+        await permissionStore.fetchUserMenus()
+      } catch (error) {
+        console.error('获取用户菜单失败:', error)
+      }
+    }
+  }
+})
+</script>
+
+<style scoped lang="css">
+.default-layout {
+  min-height: 100vh;
+}
+
+.aside {
+  background-color: #f5f7fa;
+  transition: width 0.3s;
+  overflow: hidden;
+}
+
+.logo {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #303133;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.menu {
+  border-right: none;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+
+  .trigger {
+    font-size: 18px;
+    cursor: pointer;
+    transition: color 0.3s;
+    &:hover { color: #409eff; }
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.content {
+  margin: 16px;
+  padding: 16px;
+  background: #fff;
+  min-height: calc(100vh - 96px);
+}
+</style>