新增答辩用后台管理系统

2026-06-29 03:08:42 +08:00
parent efd4d03037
commit e61fa6de00
98 changed files with 16022 additions and 420 deletions
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAppStore } from '@/stores/app'
+import { useUserStore } from '@/stores/user'
+import { usePermissionStore, type MenuItem } from '@/stores/permission'
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+const userStore = useUserStore()
+const permStore = usePermissionStore()
+
+const collapsed = computed(() => appStore.collapsed)
+
+const menus = computed(() => permStore.menus)
+
+const activeMenu = ref(route.path)
+
+watch(() => route.path, (val) => {
+  activeMenu.value = val
+})
+
+function handleSelect(path: string) {
+  router.push(path)
+}
+</script>
+
+<template>
+  <div class="sidebar-container" :class="{ collapsed }">
+    <div class="logo">
+      <span v-if="!collapsed" class="logo-text">CUIT Gym</span>
+      <span v-else class="logo-text-mini">CG</span>
+    </div>
+    <el-menu
+      :default-active="activeMenu"
+      :collapse="collapsed"
+      background-color="#001529"
+      text-color="#ffffffb3"
+      active-text-color="#fff"
+      @select="handleSelect"
+    >
+      <template v-for="menu in menus" :key="menu.path">
+        <el-sub-menu v-if="menu.children?.length" :index="menu.path">
+          <template #title>
+            <el-icon><component :is="menu.meta.icon" /></el-icon>
+            <span>{{ menu.meta.title }}</span>
+          </template>
+          <el-menu-item
+            v-for="child in menu.children"
+            :key="child.path"
+            :index="child.path"
+          >
+            <el-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="menu.path">
+          <el-icon><component :is="menu.meta.icon" /></el-icon>
+          <span>{{ menu.meta.title }}</span>
+        </el-menu-item>
+      </template>
+    </el-menu>
+  </div>
+</template>
+
+<style scoped>
+.sidebar-container {
+  width: var(--sidebar-width, 220px);
+  height: 100vh;
+  background: #001529;
+  overflow-y: auto;
+  overflow-x: hidden;
+  transition: width 0.3s;
+}
+.sidebar-container.collapsed {
+  width: 64px;
+}
+.logo {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #002140;
+}
+.logo-text {
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.logo-text-mini {
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+}
+:deep(.el-menu) {
+  border-right: none;
+}
+:deep(.el-menu-item.is-active) {
+  background-color: var(--color-primary, #1890ff) !important;
+}
+</style>