From 45564d66430023fbe621a00a3d71871b8e77d5c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Wed, 16 Mar 2022 14:23:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=A1=86=E6=9E=B6=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                    |  7 +++++
 src/components/XIcon.vue               | 10 ++++---
 src/layouts/components/breakcrumb.vue  | 24 +++++++++++++++
 src/layouts/components/footer.vue      | 20 +++++++++++++
 src/layouts/components/header.vue      | 41 ++++++++++++++++++++++++++
 src/layouts/components/logo.vue        |  2 +-
 src/layouts/components/main.vue        | 21 ++++++-------
 src/layouts/components/menu-item.vue   |  2 +-
 src/layouts/components/menu.vue        |  4 +--
 src/layouts/components/operation.vue   | 38 ++++++++++++++++++++++++
 src/layouts/components/profile.vue     | 31 +++++++++++++++++++
 src/layouts/components/tabs.vue        | 20 +++++++++++++
 src/layouts/components/view.vue        | 13 ++++++++
 src/layouts/default.vue                | 10 ++++++-
 src/styles/base.less                   |  2 +-
 src/styles/globalVariables.module.less | 12 ++++++--
 src/views/index.vue                    |  2 +-
 17 files changed, 236 insertions(+), 23 deletions(-)
 create mode 100644 src/layouts/components/breakcrumb.vue
 create mode 100644 src/layouts/components/footer.vue
 create mode 100644 src/layouts/components/header.vue
 create mode 100644 src/layouts/components/operation.vue
 create mode 100644 src/layouts/components/profile.vue
 create mode 100644 src/layouts/components/tabs.vue
 create mode 100644 src/layouts/components/view.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 65cf133..7ebcafa 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -4,10 +4,17 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElBacktop: typeof import('element-plus/es')['ElBacktop']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
diff --git a/src/components/XIcon.vue b/src/components/XIcon.vue
index f29ca25..1ca7fec 100644
--- a/src/components/XIcon.vue
+++ b/src/components/XIcon.vue
@@ -1,15 +1,16 @@
 <template>
     <template v-if="name">
-        <i v-if="isRemix" class="x-icon" :class="'x-icon-' + name" v-bind="{ ...$props, ...$attrs }"></i>
-        <svg v-else-if="svg" class="x-icon" aria-hidden="true">
+        <svg v-if="svg" class="x-icon" aria-hidden="true">
             <use :href="symbolId" :fill="color" />
         </svg>
+        <i v-else-if="isRemix" class="x-icon" :class="'x-icon-' + name" v-bind="{ ...$props, ...$attrs }"></i>
         <el-icon v-else class="x-icon">
-            <component :is="name" v-bind="{ ...$props, ...$attrs }" />
+            <component :is="icons[name]" />
         </el-icon>
     </template>
 </template>
 <script>
+    import * as icons from '@element-plus/icons';
     export default defineComponent({
         name: 'XIcon',
         props: {
@@ -35,12 +36,13 @@
             const size = computed(() =>
                 Number.isNaN(new Number(props.size).valueOf()) ? props.size : props.size + 'px'
             );
-            const isRemix = computed(() => props.name.indexOf('-') !== -1 || props.isCustomSvg);
+            const isRemix = computed(() => !Object.keys(icons).includes(props.name));
             return {
                 symbolId,
                 size,
                 color: props.color,
                 isRemix,
+                icons,
             };
         },
     });
diff --git a/src/layouts/components/breakcrumb.vue b/src/layouts/components/breakcrumb.vue
new file mode 100644
index 0000000..8ac8485
--- /dev/null
+++ b/src/layouts/components/breakcrumb.vue
@@ -0,0 +1,24 @@
+<template>
+    <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/' }">课程管理</el-breadcrumb-item>
+        <el-breadcrumb-item><a href="/">课程列表</a></el-breadcrumb-item>
+        <el-breadcrumb-item>添加课程</el-breadcrumb-item>
+    </el-breadcrumb>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped>
+    .el-breadcrumb {
+        font-size: 16px;
+        margin-left: @layout-space-super;
+        :deep(.el-breadcrumb__item) {
+            .el-breadcrumb__inner {
+                color: @layout-header-fc;
+                a {
+                    color: @layout-header-fc;
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/layouts/components/footer.vue b/src/layouts/components/footer.vue
new file mode 100644
index 0000000..ccc739e
--- /dev/null
+++ b/src/layouts/components/footer.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="layout-footer">© 2020 马士兵（北京）教育科技有限公司</div>
+</template>
+
+<script setup>
+    import Breakcrumb from './breakcrumb.vue';
+</script>
+
+<style lang="less" scoped>
+    .layout-footer {
+        width: 100%;
+        padding: @layout-space-small 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: @layout-footer-bgc;
+        box-shadow: @layout-shadow;
+        color: @layout-footer-fc;
+    }
+</style>
diff --git a/src/layouts/components/header.vue b/src/layouts/components/header.vue
new file mode 100644
index 0000000..53bfd1c
--- /dev/null
+++ b/src/layouts/components/header.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="layout-header">
+        <div class="header-left">
+            <XIcon name="menu-fold-fill" size="16" />
+            <LayoutBreakcrumb />
+        </div>
+        <div class="header-right">
+            <LayoutOperation />
+            <LayoutProfile />
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import LayoutBreakcrumb from './breakcrumb.vue';
+    import LayoutProfile from './profile.vue';
+    import LayoutOperation from './operation.vue';
+</script>
+
+<style lang="less" scoped>
+    .layout-header {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: @layout-header-bgc;
+        color: @layout-header-fc;
+        box-shadow: @layout-shadow;
+        .header-left,
+        .header-right {
+            height: @layout-header-height;
+            padding: 0 @layout-space-large;
+            display: flex;
+            align-items: center;
+        }
+        .x-icon {
+            border-radius: @layout-border-radius;
+            cursor: pointer;
+        }
+    }
+</style>
diff --git a/src/layouts/components/logo.vue b/src/layouts/components/logo.vue
index 749a67c..263452a 100644
--- a/src/layouts/components/logo.vue
+++ b/src/layouts/components/logo.vue
@@ -12,7 +12,7 @@
 <style lang="less" scoped>
     .layout-logo {
         width: @layout-aside-width;
-        height: @layout-aside-width;
+        height: @layout-header-height;
         display: flex;
         align-items: center;
         justify-content: center;
diff --git a/src/layouts/components/main.vue b/src/layouts/components/main.vue
index d9cde07..ab19ee5 100644
--- a/src/layouts/components/main.vue
+++ b/src/layouts/components/main.vue
@@ -1,26 +1,27 @@
 <template>
-    <el-scrollbar class="layout-main">
-        <router-view v-slot="{ Component }">
-            <transition mode="out-in" name="fade-transform">
-                <keep-alive>
-                    <component :is="Component" />
-                </keep-alive>
-            </transition>
-        </router-view>
+    <el-scrollbar class="layout-main" always>
+        <RouterView />
     </el-scrollbar>
 </template>
 
-<script setup></script>
+<script setup>
+    import RouterView from './view.vue';
+</script>
 
 <style lang="less" scoped>
     .layout-main {
+        margin: @layout-space-large;
+        background-color: @color-white;
+        border-radius: @layout-border-radius;
+        box-shadow: @layout-shadow;
         :deep(.el-scrollbar__view) {
             width: 100%;
-            height: 100%;
+            min-height: 100%;
             > * {
                 display: inline-block; // 创建BFC
                 width: 100%;
                 height: 100%;
+                padding: @layout-space-large;
             }
         }
     }
diff --git a/src/layouts/components/menu-item.vue b/src/layouts/components/menu-item.vue
index b2afe62..e97e155 100644
--- a/src/layouts/components/menu-item.vue
+++ b/src/layouts/components/menu-item.vue
@@ -3,7 +3,7 @@
         <XIcon :name="props.menuItem.meta.icon" size="20" />
         <p>{{ props.menuItem.meta.title }}</p>
     </el-menu-item>
-    <el-sub-menu v-else>
+    <el-sub-menu v-else :index="props.menuItem.name">
         <template #title>
             <XIcon :name="props.menuItem.meta.icon" size="20" />
             <p>{{ props.menuItem.meta.title }}</p>
diff --git a/src/layouts/components/menu.vue b/src/layouts/components/menu.vue
index 3feb9bd..1c36ef5 100644
--- a/src/layouts/components/menu.vue
+++ b/src/layouts/components/menu.vue
@@ -33,8 +33,8 @@
             .text-overflow();
         }
         .el-divider {
-            margin: @layout-space-small 0 @layout-space-large 0;
-            border-color: @layout-menu-hover-fc;
+            margin: 0 0 @layout-space-super 0;
+            border-color: @color-ghost-white;
             :deep(.el-divider__text) {
                 color: @layout-menu-active-fc;
                 background-color: @layout-menu-bgc;
diff --git a/src/layouts/components/operation.vue b/src/layouts/components/operation.vue
new file mode 100644
index 0000000..5c3c813
--- /dev/null
+++ b/src/layouts/components/operation.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="layout-operation">
+        <el-button type="text" @click="handleFullscreen">
+            <XIcon :name="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" />
+        </el-button>
+    </div>
+</template>
+
+<script setup>
+    const isFullscreen = ref(!!document.fullscreenElement);
+    const handleFullscreen = () => {
+        if (isFullscreen.value) {
+            document.exitFullscreen();
+            isFullscreen.value = false;
+        } else {
+            isFullscreen.value = true;
+            let fn =
+                document.body.requestFullscreen ||
+                document.body.webkitRequestFullscreen ||
+                document.body.mozRequestFullscreen ||
+                document.body.msRequestFullscreen;
+            document.fullscreenEnabled && fn?.call(document.body);
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .layout-operation {
+        height: @layout-header-height;
+        padding: 0 @layout-space-large;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .el-avatar {
+            margin-right: @layout-space;
+        }
+    }
+</style>
diff --git a/src/layouts/components/profile.vue b/src/layouts/components/profile.vue
new file mode 100644
index 0000000..1eda464
--- /dev/null
+++ b/src/layouts/components/profile.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="layout-profile">
+        <el-avatar />
+        <el-dropdown size="middle">
+            <span class="el-dropdown-link">
+                <span>管理员</span>
+                <XIcon class="el-icon--right" name="ArrowDown" />
+            </span>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item>个人中心</el-dropdown-item>
+                    <el-dropdown-item>退出登录</el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+    </div>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped>
+    .layout-profile {
+        height: @layout-header-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .el-avatar {
+            margin-right: @layout-space;
+        }
+    }
+</style>
diff --git a/src/layouts/components/tabs.vue b/src/layouts/components/tabs.vue
new file mode 100644
index 0000000..7118987
--- /dev/null
+++ b/src/layouts/components/tabs.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="layout-tabs"></div>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped>
+    .layout-tabs {
+        width: 100%;
+        height: @layout-tabs-height;
+        border-top: 1px solid @color-ghost-white;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        box-shadow: @layout-shadow;
+        background-color: @layout-header-bgc;
+        color: @layout-header-fc;
+    }
+</style>
diff --git a/src/layouts/components/view.vue b/src/layouts/components/view.vue
new file mode 100644
index 0000000..7147491
--- /dev/null
+++ b/src/layouts/components/view.vue
@@ -0,0 +1,13 @@
+<template>
+    <router-view v-slot="{ Component }">
+        <transition mode="out-in" name="fade-transform">
+            <keep-alive>
+                <component :is="Component" />
+            </keep-alive>
+        </transition>
+    </router-view>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped></style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 79190a0..7c0ddfe 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -8,8 +8,10 @@
             <LayoutMenu />
         </div>
         <div class="layout-right">
-            <div class="layout-header"></div>
+            <LayoutHeader />
+            <LayoutTabs />
             <LayoutMain />
+            <LayoutFooter />
         </div>
     </div>
 </template>
@@ -19,12 +21,16 @@
     import LayoutLogo from './components/logo.vue';
     import LayoutAside from './components/aside.vue';
     import LayoutMenu from './components/menu.vue';
+    import LayoutHeader from './components/header.vue';
+    import LayoutTabs from './components/tabs.vue';
+    import LayoutFooter from './components/footer.vue';
 </script>
 
 <style lang="less" scoped>
     .layout-container {
         width: 100%;
         height: 100%;
+        background-color: @color-white-dark;
     }
     .layout-default {
         display: flex;
@@ -35,6 +41,8 @@
         }
         .layout-right {
             flex: 1;
+            display: flex;
+            flex-direction: column;
         }
     }
 </style>
diff --git a/src/styles/base.less b/src/styles/base.less
index 1193371..a7e7d8e 100644
--- a/src/styles/base.less
+++ b/src/styles/base.less
@@ -8,6 +8,6 @@ body,
 *:not([class^='el-']) {
     margin: 0;
     padding: 0;
-    transition: all 0.1s;
+    transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
     box-sizing: border-box;
 }
diff --git a/src/styles/globalVariables.module.less b/src/styles/globalVariables.module.less
index c3f3c5e..d99da99 100644
--- a/src/styles/globalVariables.module.less
+++ b/src/styles/globalVariables.module.less
@@ -1,6 +1,7 @@
 /* color */
 @color-black: #282c34;
 @color-white: #fff;
+@color-white-dark: #f6f8f9;
 @color-primary: #409eff;
 @color-primary-white: #e8f4ff;
 
@@ -42,9 +43,16 @@
 @layout-menu-active-fc: @color-white;
 @layout-menu-active-bgc: lighten(@color-black, 35%);
 
-@layout-header-height: 68px;
+@layout-header-height: 60px;
+@layout-header-bgc: @color-white;
+@layout-header-fc: @color-black;
+
+@layout-tabs-height: 50px;
+
+@layout-footer-bgc: @color-white;
+@layout-footer-fc: @color-black;
 
 :export {
     layoutAsideWidth: @layout-aside-width;
-    layoutLogoSize: calc(@layout-aside-item-size * 0.8);
+    layoutLogoSize: calc(@layout-header-height * 0.72);
 }
diff --git a/src/views/index.vue b/src/views/index.vue
index 576e41e..3f7acda 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -28,6 +28,6 @@
 
 <style lang="less">
     .container {
-        height: 1080px;
+        height: 2000px !important;
     }
 </style>