From 63ad76379f96a2dd1014b3f7b9d99b260b3cbe6b 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 15:50:50 +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/assets/layouts/tabs-bgp.png | Bin 0 -> 443 bytes
 src/layouts/components/tabs.vue | 104 ++++++++++++++++++++++++++++++--
 src/layouts/default.vue         |   1 +
 src/router/route.json           |   6 +-
 4 files changed, 102 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/layouts/tabs-bgp.png

diff --git a/src/assets/layouts/tabs-bgp.png b/src/assets/layouts/tabs-bgp.png
new file mode 100644
index 0000000000000000000000000000000000000000..9cabaa742db510d277f0fce9a56c3eaac01b5c85
GIT binary patch
literal 443
zcmeAS@N?(olHy`uVBq!ia0vp^w}4oMgAGW&Z&ld@q&N#aB8wRqxP?KOkzv*x2?hqn
zTu&Frkcv5P?>_WB6d=;}aC;~772X1-M5dbutQz|csP!$7e!*eEXwi7r!R&zic22{E
zZ;u{weEnNReaXXRckJb#3r)J*G=C;j@dGi9+1Z(EvJ!arFrPpB^`vfte?oTT|1DxN
zD=Z5BatFx%QoO{mw(+KB-kt}4?yF4uI$LY^=BH&_I5#N$m7Bc9Sh;k&pZHAk)dne-
z>_pvpZk^q**JE+%+|3%_U;J>ivh(_t#~kxb_Z07~vKw(r0$-mEe0MSM5(AqrSHguQ
z<WN%URC-M^rV5)Jul2sG_QmJWDb87wJD28t|H861f5izF_T^r+W=kAbmELYzw_xf4
z;W86Vcixz-dvA(u5vpL3>)S7%xh1Y~_no7~mkK}L;TPDjW`BhCH<J}jcbi$3FS&SM
uPIT$RX$PV|@6z$moKoWSFHx8E2h%i<!nF&d*Y5zv27{-opUXO@geCx@@VS)$

literal 0
HcmV?d00001

diff --git a/src/layouts/components/tabs.vue b/src/layouts/components/tabs.vue
index 7118987..fc4d0f3 100644
--- a/src/layouts/components/tabs.vue
+++ b/src/layouts/components/tabs.vue
@@ -1,20 +1,112 @@
 <template>
-    <div class="layout-tabs"></div>
+    <div class="layout-tabs">
+        <el-tabs v-model="activeTab" type="card" class="demo-tabs" @tab-click="handleClick">
+            <el-tab-pane v-for="(item, index) in tabs" :key="index" :name="item.name">
+                <template #label>
+                    <XIcon :name="item.meta.icon" />
+                    <span>{{ item.meta.title }}</span>
+                </template>
+            </el-tab-pane>
+        </el-tabs>
+        <div class="operation">
+            <el-dropdown trigger="hover">
+                <span class="el-dropdown-link">
+                    <XIcon name="apps-fill" />
+                </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>
+    </div>
 </template>
 
-<script setup></script>
+<script setup>
+    const activeTab = ref('home');
+    const tabs = computed(() => [
+        { path: '/', name: 'home', meta: { title: '首页', icon: 'home-fill' } },
+        { path: '/', name: 'route1', meta: { title: '菜单1', icon: 'home-fill' } },
+        { path: '/', name: 'route2', meta: { title: '菜单2', icon: 'home-fill' } },
+        { path: '/', name: 'route3', meta: { title: '菜单3', icon: 'home-fill' } },
+        { path: '/', name: 'route4', meta: { title: '菜单4', icon: 'home-fill' } },
+        { path: '/', name: 'route5', meta: { title: '菜单5', icon: 'home-fill' } },
+    ]);
+</script>
 
 <style lang="less" scoped>
     .layout-tabs {
         width: 100%;
         height: @layout-tabs-height;
-        border-top: 1px solid @color-ghost-white;
+        padding: 0 @layout-space-large;
         display: flex;
-        flex-wrap: wrap;
-        align-items: center;
+        align-items: flex-end;
         justify-content: space-between;
-        box-shadow: @layout-shadow;
+        overflow: hidden;
+        box-shadow: fade(@layout-header-fc, 15%) 0 1px 5px;
         background-color: @layout-header-bgc;
         color: @layout-header-fc;
+        .el-tabs {
+            height: 80%;
+            width: 100%;
+            flex-shrink: 1;
+            overflow: hidden;
+            :deep(.el-tabs__header) {
+                margin: 0;
+                height: 100%;
+                .el-tabs__nav-wrap {
+                    height: 100%;
+                    margin-bottom: 0;
+                    > * {
+                        height: 100%;
+                        display: flex;
+                        align-items: center;
+                    }
+                    .el-tabs__nav-scroll {
+                        .el-tabs__nav {
+                            height: 100%;
+                            border: none;
+                            padding: 0 @layout-space-large;
+                            .el-tabs__item {
+                                height: 100%;
+                                min-width: 100px;
+                                margin-right: -8px;
+                                display: inline-flex;
+                                align-items: center;
+                                justify-content: center;
+                                border: none;
+                                border-top-left-radius: 10px;
+                                border-top-right-radius: 10px;
+                                mask-image: url('~/layouts/tabs-bgp.png');
+                                -webkit-mask-image: url('~/layouts/tabs-bgp.png');
+                                mask-size: 100% 100%;
+                                -webkit-mask-size: 100% 100%;
+                                &:hover {
+                                    background-color: @color-white-dark;
+                                }
+                                &.is-active {
+                                    background-color: @color-primary-white;
+                                }
+                                .x-icon {
+                                    margin-right: @layout-space-small;
+                                    margin-top: 1px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .operation {
+            height: 80%;
+            margin-left: @layout-space;
+            display: flex;
+            align-items: center;
+            &:hover {
+                transform: rotate(90deg);
+            }
+        }
     }
 </style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 7c0ddfe..05a7acc 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -43,6 +43,7 @@
             flex: 1;
             display: flex;
             flex-direction: column;
+            overflow: hidden;
         }
     }
 </style>
diff --git a/src/router/route.json b/src/router/route.json
index a53ddbd..4a27ebf 100644
--- a/src/router/route.json
+++ b/src/router/route.json
@@ -8,12 +8,12 @@
             "__file": "src/vab/layouts/index.vue",
             "__hmrId": "b1897f6a"
         },
-        "meta": { "title": "首页", "icon": "home-line", "noColumn": true, "menu": "/", "activeMenu": "/" },
+        "meta": { "title": "首页", "icon": "home-fill", "noColumn": true, "menu": "/", "activeMenu": "/" },
         "children": [
             {
                 "path": "/dashboard",
                 "name": "Dashboard",
-                "meta": { "title": "首页", "icon": "home-line", "menu": "/dashboard", "activeMenu": "/dashboard" },
+                "meta": { "title": "首页", "icon": "home-fill", "menu": "/dashboard", "activeMenu": "/dashboard" },
                 "childrenNameList": ["Dashboard"]
             }
         ],
@@ -29,7 +29,7 @@
             "__file": "src/vab/layouts/index.vue",
             "__hmrId": "b1897f6a"
         },
-        "meta": { "title": "组件示例", "icon": "test-tube-line", "menu": "/demo", "activeMenu": "/demo" },
+        "meta": { "title": "组件示例", "icon": "table-fill", "menu": "/demo", "activeMenu": "/demo" },
         "children": [
             {
                 "path": "/demo/icon",