增加后台管理模块

2025-10-27 23:57:31 +08:00
parent 3c1ba8e801
commit 0016453f20
420 changed files with 5650 additions and 1449 deletions
@@ -0,0 +1,190 @@
+<template>
+  <el-container class="layout-container">
+    <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
+      <div class="logo">
+        <span v-if="!isCollapse">情绪博物馆</span>
+        <span v-else>情</span>
+      </div>
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        :unique-opened="true"
+        router
+      >
+        <template v-for="route in menuRoutes" :key="route.path">
+          <el-sub-menu v-if="route.children && route.children.length > 1" :index="route.path">
+            <template #title>
+              <el-icon v-if="route.meta?.icon">
+                <component :is="route.meta.icon" />
+              </el-icon>
+              <span>{{ route.meta?.title }}</span>
+            </template>
+            <el-menu-item
+              v-for="child in route.children"
+              :key="child.path"
+              :index="route.path + '/' + child.path"
+            >
+              <el-icon v-if="child.meta?.icon">
+                <component :is="child.meta.icon" />
+              </el-icon>
+              <span>{{ child.meta?.title }}</span>
+            </el-menu-item>
+          </el-sub-menu>
+          <el-menu-item v-else :index="route.redirect || route.path">
+            <el-icon v-if="route.meta?.icon">
+              <component :is="route.meta.icon" />
+            </el-icon>
+            <span>{{ route.meta?.title }}</span>
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </el-aside>
+    
+    <el-container>
+      <el-header class="header">
+        <div class="header-left">
+          <el-icon class="collapse-icon" @click="toggleCollapse">
+            <Fold v-if="!isCollapse" />
+            <Expand v-else />
+          </el-icon>
+        </div>
+        <div class="header-right">
+          <el-dropdown @command="handleCommand">
+            <div class="user-info">
+              <el-avatar :size="32" :src="adminInfo?.avatar">
+                {{ adminInfo?.username?.charAt(0) }}
+              </el-avatar>
+              <span class="username">{{ adminInfo?.username }}</span>
+            </div>
+            <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="main-content">
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAdminStore } from '@/stores/admin'
+import { Fold, Expand } from '@element-plus/icons-vue'
+
+const route = useRoute()
+const router = useRouter()
+const adminStore = useAdminStore()
+
+const isCollapse = ref(false)
+const adminInfo = computed(() => adminStore.adminInfo)
+
+const activeMenu = computed(() => route.path)
+
+const menuRoutes = computed(() => {
+  return router.getRoutes().filter(r => 
+    r.path === '/' || (r.path.startsWith('/') && !r.meta?.hidden && r.component?.name !== 'Layout')
+  )
+})
+
+const toggleCollapse = () => {
+  isCollapse.value = !isCollapse.value
+}
+
+const handleCommand = (command: string) => {
+  if (command === 'logout') {
+    adminStore.logout()
+  } else if (command === 'profile') {
+    // TODO: 跳转到个人信息页面
+  }
+}
+
+onMounted(() => {
+  adminStore.initAdminInfo()
+})
+</script>
+
+<style scoped lang="scss">
+.layout-container {
+  height: 100vh;
+}
+
+.sidebar {
+  background-color: #304156;
+  transition: width 0.3s;
+  
+  .logo {
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    color: #fff;
+    background-color: #2b3a4b;
+  }
+  
+  :deep(.el-menu) {
+    border-right: none;
+    background-color: #304156;
+    
+    .el-menu-item,
+    .el-sub-menu__title {
+      color: #bfcbd9;
+      
+      &:hover {
+        background-color: #263445;
+      }
+      
+      &.is-active {
+        background-color: #409eff;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  padding: 0 20px;
+  
+  .header-left {
+    .collapse-icon {
+      font-size: 20px;
+      cursor: pointer;
+      
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+  
+  .header-right {
+    .user-info {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      cursor: pointer;
+      
+      .username {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.main-content {
+  background-color: #f0f2f5;
+  padding: 20px;
+}
+</style>