feat(*): layout模版优化

0004b350 · Cai Wei · 416800d0 · 0004b350 · 0004b350 · 0004b350
Commit 0004b350 authored May 16, 2025 by Cai Wei
6 changed files
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>DCTOM</title>
  </head>
  <body>
    <div id="app"></div>

--- a/src/layout/index.vue
+++ b/src/layout/index.vue
 <template>
  <div class="layout-box">
    <div class="left">
-        <menuCom></menuCom>
+      <menuCom></menuCom>
    </div>
    <div class="right">
-        <div>头部</div>
-        <div>
-            <router-view />
+      <div class="header">
+        <h3>DC-TOM管理平台</h3>
+
+        <el-dropdown trigger="click">
+          <div  class="user-info">
+            <img
+            src="data:image/png;base64,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"
+            class="user-avatar"
+          />
+          <span class="user-name">用户1</span>
+          </div>  
+         
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item :icon="Plus">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+      <div class="content">
+        <div class="breadcrumb-container">
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="item.path">
+              {{ item.meta?.title || '未命名页面' }}
+            </el-breadcrumb-item>
+          </el-breadcrumb>
        </div>
+        <router-view />
+      </div>
    </div>
  </div>
 </template>
 <script>
-import menuCom from './menuCom.vue'
+import menuCom from "./menuCom.vue";
+import { CaretBottom, Plus } from "@element-plus/icons-vue";
+import { useRoute, useRouter } from 'vue-router';
+import { watch, ref, onMounted } from 'vue';
+
 export default {
-    components: {
-        menuCom
-    },
-    created() {
-        console.log('layout created')
-    }
-}
+  components: {
+    menuCom,
+  },
+  setup() {
+    const route = useRoute();
+    const breadcrumbList = ref([]);
+    
+    // 获取当前路由的面包屑数据
+    const getBreadcrumbData = () => {
+      breadcrumbList.value = [];
+      
+      if (route.matched && route.matched.length > 0) {
+        const matchedRoutes = route.matched;
+        
+        // 添加首页项（可选）
+        breadcrumbList.value.push({
+          path: '/dashboard',
+          meta: { title: '首页' }
+        });
+        
+        // 添加匹配的路由
+        matchedRoutes.forEach(item => {
+          if (item.meta && item.meta.title) {
+            breadcrumbList.value.push(item);
+          }
+        });
+      }
+    };
+    
+    // 监听路由变化，更新面包屑
+    watch(() => route.path, () => {
+      getBreadcrumbData();
+    }, { immediate: true });
+    
+    onMounted(() => {
+      getBreadcrumbData();
+    });
+    
+    return {
+      breadcrumbList
+    };
+  },
+  created() {
+    console.log("layout created");
+  },
+};
 </script>

-<style scoped lang='scss'>
+<style scoped lang="scss">
 .layout-box {
-    display: flex;
-    height: 100vh;
-    .left {
-        max-width: 300px;
-        flex: 0;
+  display: flex;
+  height: 100vh;
+  .left {
+    width: 200px;
+    height: 100%;
+    background: linear-gradient(180deg, #018796, #014155);
+  }
+  .right {
+    width: calc(100vw - 200px);
+    .header {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 4.0625rem !important;
+      background: #ffffff;
+      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+      box-sizing: border-box;
+      h3 {
+        margin-left: 3.125rem;
+        font-size: 1.75rem !important;
+      }
+      .user-info {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        margin-right: 3.125rem;
+        font-size: 1.25rem !important;
+        color: #606266;
+        .user-avatar {
+          width: 1.5rem;
+          height: 1.5rem;
+          border-radius: 10px;
+        }
+        .user-name {
+          font-size: 0.9rem;
+          margin: 0 0.4rem;
+          line-height: 1.5rem;
+        }
+      }
    }
-    .right {
+    .breadcrumb-container {
        flex: 1;
+        margin-bottom: 0.6rem;
+      }
+    .content {
+      width: 100%;
+      height: calc(100vh - 4.0625rem);
+      box-sizing: border-box;
+      overflow: hidden;
+      padding: 1.25rem 1.25rem 3.125rem;
+      background: #e7eef5;
    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
--- a/src/layout/menuCom.vue
+++ b/src/layout/menuCom.vue
@@ -2,7 +2,6 @@
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
-        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
@@ -11,6 +10,7 @@
          <el-sub-menu
            :index="index + ''"
            v-if="item.children && item.children.length > 0"
+            class="submenu-box"
          >
            <template #title>
              <el-icon><location /></el-icon>
@@ -20,7 +20,7 @@
                <router-link :to="item.path + '/' + item_son.path">{{getMenuTitle(item_son)}}</router-link>
              </el-menu-item>
          </el-sub-menu>
-          <el-menu-item v-else :index="index + ''">
+          <el-menu-item v-else :index="index + ''"  class="submenu-box">
            <el-icon><setting /></el-icon>
            <span><router-link :to="item.path">{{getMenuTitle(item)}}</router-link></span>
          </el-menu-item>
@@ -52,6 +52,43 @@ const getMenuTitle = (item) => {
 <style scoped lang="scss">
  a {
  text-decoration: none;
-  color: #000000;
+  color: #fff;
+  font-weight: 400;
+}
+
+.submenu-box {
+  background: linear-gradient(225deg, rgba(128, 255, 178, .2), rgba(58, 120, 255, .1) 100%, #0049fa 0);
+  color: #fff !important;
+  span, a, i {
+    color: #fff !important;
+  }
+}
+
+
+.is-active {
+  color: #fff !important;
+  background: #03a1b3 !important;
+  span {
+    color: #fff !important;
+  }
+}
+</style>
+
+<style lang="scss">
+
+.el-menu {
+  background: none !important;
+}
+
+.el-sub-menu .el-icon  {
+  color: #fff !important;
+}
+
+.el-menu-item:hover, .el-sub-menu__title:hover {
+  color: #fff !important;
+  background: #03a1b3 !important;
+  span {
+    color: #fff !important;
+  }
 }
 </style>
\ No newline at end of file
--- a/src/main.js
+++ b/src/main.js
@@ -4,5 +4,10 @@ import App from './App.vue'
 import { router } from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'

-createApp(App).use(router).use(ElementPlus).mount('#app')
+const app = createApp(App)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+app.use(router).use(ElementPlus).mount('#app')
--- a/src/style.css
+++ b/src/style.css
 * {
 padding: 0;
 margin: 0;
+}
+
+.page-container {
+    width: 100%;
+    background: #ffffff;
+    border-radius: 6px;
+    box-shadow: 0px 3px 6px 0px rgba(13,15,18,0.10);
+    padding: 1rem;
+    box-sizing: border-box;
 }
\ No newline at end of file
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
 <template>
-    <div>
+    <div class="page-container">
        home
    </div>
 </template>
\ No newline at end of file