Initial commit: Audio Dashboard Management System

Made-with: Cursor
2026-03-04 18:17:34 +08:00
commit 75b1d16453
39 changed files with 3771 additions and 0 deletions
@@ -0,0 +1,105 @@
+<template>
+  <div class="app-wrapper">
+    <el-container>
+      <!-- 侧边栏 -->
+      <el-aside width="200px" class="sidebar">
+        <div class="logo">
+          <h2>耳机管理平台</h2>
+        </div>
+        <el-menu
+          :default-active="activeMenu"
+          background-color="#304156"
+          text-color="#bfcbd9"
+          active-text-color="#409EFF"
+          router
+        >
+          <el-sub-menu index="1">
+            <template #title>
+              <el-icon><Headset /></el-icon>
+              <span>耳机管理</span>
+            </template>
+            <el-menu-item index="/brand">
+              <el-icon><Collection /></el-icon>
+              <span>品牌管理</span>
+            </el-menu-item>
+            <el-menu-item index="/model">
+              <el-icon><List /></el-icon>
+              <span>型号管理</span>
+            </el-menu-item>
+          </el-sub-menu>
+        </el-menu>
+      </el-aside>
+
+      <!-- 主内容区 -->
+      <el-container>
+        <el-header class="header">
+          <div class="header-title">耳机品牌与型号管理系统</div>
+        </el-header>
+        <el-main class="main-content">
+          <router-view />
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { Headset, Collection, List } from '@element-plus/icons-vue'
+
+const route = useRoute()
+const activeMenu = computed(() => route.path)
+</script>
+
+<style scoped>
+.app-wrapper {
+  height: 100vh;
+}
+
+.el-container {
+  height: 100%;
+}
+
+.sidebar {
+  background-color: #304156;
+  overflow-x: hidden;
+}
+
+.logo {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #2b3a4b;
+}
+
+.logo h2 {
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.el-menu {
+  border-right: none;
+}
+
+.header {
+  background-color: #fff;
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.main-content {
+  background-color: #f0f2f5;
+  padding: 20px;
+}
+</style>