feat: tabs栏布局

src/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module "vue" {
   export interface GlobalComponents {
+    IconModule: (typeof import("./components/IconModule/index.vue"))["default"];
     RouterLink: (typeof import("vue-router"))["RouterLink"];
     RouterView: (typeof import("vue-router"))["RouterView"];
     SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"];

src/layout/components/Header/index.vue

@@ -1,7 +1,13 @@
 <template>
   <a-layout-header class="header">
     <div class="header_crumb">
-      <div class="menu_fold"><icon-menu-fold style="font-size: 18px; stroke-width: 3" /></div>
+      <div class="menu_fold">
+        <a-button size="mini" type="text" class="menu_fold_icon">
+          <template #icon>
+            <icon-menu-fold :size="18" />
+          </template>
+        </a-button>
+      </div>
       <div class="breadcrumb">
         <a-space direction="vertical">
           <a-breadcrumb>
@@ -23,40 +29,51 @@
     </div>
     <div class="header_setting">
       <a-tooltip content="语言">
-        <div>
+        <a-button size="mini" type="text" class="icon_btn">
-          <icon-language />
+          <template #icon>
-        </div>
+            <icon-language :size="18" />
+          </template>
+        </a-button>
       </a-tooltip>
       <a-tooltip content="切换黑夜模式">
-        <div>
+        <a-button size="mini" type="text" class="icon_btn">
-          <icon-sun-fill />
+          <template #icon>
-        </div>
+            <icon-sun-fill :size="18" />
+          </template>
+        </a-button>
       </a-tooltip>
       <a-tooltip content="通知">
-        <div>
+        <a-button size="mini" type="text" class="icon_btn">
-          <icon-notification />
+          <template #icon>
-        </div>
+            <icon-notification :size="18" />
+          </template>
+        </a-button>
       </a-tooltip>
       <a-tooltip content="全屏">
-        <div>
+        <a-button size="mini" type="text" class="icon_btn">
-          <icon-fullscreen />
+          <template #icon>
-        </div>
+            <icon-fullscreen :size="18" />
+          </template>
+        </a-button>
       </a-tooltip>
       <a-tooltip content="系统设置">
-        <div>
+        <a-button size="mini" type="text" class="icon_btn">
-          <icon-settings />
+          <template #icon>
-        </div>
+            <icon-settings :size="18" />
+          </template>
+        </a-button>
       </a-tooltip>
       <a-tooltip content="主题设置">
-        <div>
+        <a-button size="mini" type="text" class="icon_btn">
-          <icon-skin />
+          <template #icon>
-        </div>
+            <icon-skin :size="18" />
+          </template>
+        </a-button>
       </a-tooltip>
-      <div class="my_image"><a-image width="32" :src="Tom" /></div>
+      <div class="my_image"><a-image width="36" :src="Tom" /></div>
     </div>
   </a-layout-header>
 </template>
-
 <script setup lang="ts">
 import Tom from "@/assets/img/tom.jpg";
 </script>
@@ -80,6 +97,10 @@ import Tom from "@/assets/img/tom.jpg";
       display: flex;
       justify-content: space-around;
       align-items: center;
+      .menu_fold_icon {
+        color: $color-text-1;
+        border-radius: $radius-box;
+      }
     }
     .breadcrumb {
       margin-left: $margin;
@@ -89,23 +110,23 @@ import Tom from "@/assets/img/tom.jpg";
     display: flex;
     justify-content: space-between;
     align-items: center;
-    > div {
+    > .icon_btn {
-      width: 32px;
+      width: $icon-box;
-      height: 32px;
+      height: $icon-box;
-      border-radius: 50%;
+      border-radius: $radius-box;
       box-sizing: border-box;
-      // border: $border-1 solid $color-border-1;
       margin-left: $margin;
       display: flex;
       justify-content: space-around;
       align-items: center;
+      color: $color-text-1;
     }
-    > div:hover {
+
-      background: $color-fill-1;
-    }
     .my_image {
       width: 32px;
       height: 32px;
+      border-radius: 50%;
+      margin-left: $margin;
       overflow: hidden;
     }
   }

src/layout/components/Tabs/index.vue

@@ -1,13 +1,89 @@
 <template>
-  <div class="tabs">tabs栏</div>
+  <div class="tabs">
+    <a-tabs :editable="true" :hide-content="true" size="medium" show-add-button @add="handleAdd" @delete="handleDelete">
+      <a-tab-pane v-for="(item, index) of data" :key="item.key" :title="item.title" :closable="index !== 2" />
+    </a-tabs>
+    <div class="tabs_setting">
+      <a-dropdown trigger="hover">
+        <div class="setting"><icon-sync :size="18" /></div>
+        <template #content>
+          <a-doption>
+            <template #icon><icon-refresh /></template>
+            <template #default>刷新</template>
+          </a-doption>
+          <a-doption>
+            <template #icon><icon-left /></template>
+            <template #default>关闭左侧</template>
+          </a-doption>
+          <a-doption>
+            <template #icon><icon-right /></template>
+            <template #default>关闭右侧</template>
+          </a-doption>
+          <a-doption>
+            <template #icon><icon-close /></template>
+            <template #default>关闭其它</template>
+          </a-doption>
+          <a-doption>
+            <template #icon><icon-close-circle /></template>
+            <template #default>全部关闭</template>
+          </a-doption>
+        </template>
+      </a-dropdown>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+let count = 5;
+const data = ref([
+  {
+    key: "1",
+    title: "Tab 1",
+    content: "Content of Tab Panel 1"
+  },
+  {
+    key: "2",
+    title: "Tab 2",
+    content: "Content of Tab Panel 2"
+  },
+  {
+    key: "3",
+    title: "Tab 3",
+    content: "Content of Tab Panel 3"
+  },
+  {
+    key: "4",
+    title: "Tab 4",
+    content: "Content of Tab Panel 4"
+  }
+]);
+
+const handleAdd = () => {
+  const number = count++;
+  data.value = data.value.concat({
+    key: `${number}`,
+    title: `New Tab ${number}`,
+    content: `Content of New Tab Panel ${number}`
+  });
+};
+const handleDelete = key => {
+  data.value = data.value.filter(item => item.key !== key);
+};
+</script>
 
 <style lang="scss" scoped>
 .tabs {
   height: 40px;
   box-sizing: border-box;
   border-bottom: $border-1 solid $color-border-2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .tabs_setting {
+    margin: 0 0 0 $margin;
+    .setting {
+      margin-right: $margin;
+    }
+  }
 }
 </style>

src/style/global-hover.scss

@@ -0,0 +1,9 @@
+// global hover css
+// 鼠标移入过渡
+.move-fill {
+  background: rgba($color-fill-1, 0);
+  transition: background 0.2s;
+}
+.move-fill:hover {
+  background: rgba($color-fill-1, 1);
+}

src/style/global-theme.scss

@@ -2,7 +2,9 @@
 
 $margin: 14px; // 盒子间距
 $padding: 16px; // 盒子和内容的间距
-$radius-box: 2px; // 边框圆角
+$radius-box: 4px; // 边框圆角
+$icon-box: 24px; // icon盒子通用大小
+$icon-size: 18px; // icon通用大小
 
 // 边框宽度
 $border-1: 1px; // 常规-主要
@@ -24,7 +26,7 @@ $shadow-border-5: inset 0 0 0 1px violet;
 $shadow-border-6: inset 0 0 0 1px green;
 
 // 填充色
-$color-fill-1: #eeeeee; // 常规填充色/白底悬浮
+$color-fill-1: #eeeeee; // 常规填充色/灰底悬浮
 $color-fill-2: #d1d1d1; // 深/灰底悬浮
 $color-fill-3: #b6b6b6; // 重/特殊场景
 $color-fill-4: #9b9b9b; // 浅/禁用

src/style/index.scss

@@ -1,4 +1,5 @@
 @import "./global-theme.scss";
+@import "./global-hover.scss";
 
 * {
   margin: 0;