From d488451f42724b01551fa1007a8d57267ca57838 Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Fri, 24 Sep 2021 16:26:14 +0800
Subject: [PATCH] =?UTF-8?q?refactor(projects):=20chrome=20Tab=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/custom/ButtonTab/index.vue     |  43 +++++++
 .../ChromeTab/components/SvgRadiusBg.vue      |  61 +++++++++
 .../custom/ChromeTab/components/index.ts      |   3 +
 src/components/custom/ChromeTab/index.vue     |  47 +++++++
 .../custom/IconClose/index.vue}               |   0
 src/components/custom/index.ts                |   5 +-
 src/components/index.ts                       |   2 +-
 src/enum/theme.ts                             |   2 +-
 .../BrowserTab/components/BrowserTabItem.vue  | 108 ----------------
 .../BrowserTab/components/LeftTabRadius.vue   |  45 -------
 .../BrowserTab/components/RightTabRadius.vue  |  45 -------
 .../BrowserTab/components/SideRadius.vue      |   6 -
 .../components/BrowserTab/components/index.ts |   5 -
 .../components/BrowserTab/index-old.vue       | 117 ------------------
 .../GlobalTab/components/BrowserTab/index.vue |  29 -----
 .../GlobalTab/components/ButtonTab/index.vue  |  55 --------
 .../components/MultiTab/components/index.ts}  |   0
 .../GlobalTab/components/MultiTab/index.vue   |  69 +++++++++++
 .../components/ReloadButton/index.vue         |   2 +-
 .../index.vue => common/ContextMenu.vue}      |  30 ++++-
 .../GlobalTab/components/common/index.ts      |   4 +-
 .../components/GlobalTab/components/index.ts  |   6 +-
 .../components/GlobalTab/index.vue            |  53 +-------
 src/settings/theme.ts                         |   4 +-
 24 files changed, 264 insertions(+), 477 deletions(-)
 create mode 100644 src/components/custom/ButtonTab/index.vue
 create mode 100644 src/components/custom/ChromeTab/components/SvgRadiusBg.vue
 create mode 100644 src/components/custom/ChromeTab/components/index.ts
 create mode 100644 src/components/custom/ChromeTab/index.vue
 rename src/{layouts/BasicLayout/components/GlobalTab/components/common/IconClose.vue => components/custom/IconClose/index.vue} (100%)
 delete mode 100644 src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/BrowserTabItem.vue
 delete mode 100644 src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/LeftTabRadius.vue
 delete mode 100644 src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/RightTabRadius.vue
 delete mode 100644 src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/SideRadius.vue
 delete mode 100644 src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/index.ts
 delete mode 100644 src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/index-old.vue
 delete mode 100644 src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/index.vue
 delete mode 100644 src/layouts/BasicLayout/components/GlobalTab/components/ButtonTab/index.vue
 rename src/{styles/css/animation.css => layouts/BasicLayout/components/GlobalTab/components/MultiTab/components/index.ts} (100%)
 create mode 100644 src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue
 rename src/layouts/BasicLayout/components/GlobalTab/components/{ContextMenu/index.vue => common/ContextMenu.vue} (72%)

diff --git a/src/components/custom/ButtonTab/index.vue b/src/components/custom/ButtonTab/index.vue
new file mode 100644
index 00000000..fe9dfcc4
--- /dev/null
+++ b/src/components/custom/ButtonTab/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="relative flex-center h-30px pl-14px bg-white border-1px border-[#e5e7eb] rounded-2px cursor-pointer"
+    :class="[
+      closable ? 'pr-6px' : 'pr-14px',
+      { 'text-primary bg-primary bg-opacity-10 !border-primary': active, 'text-primary border-primary': isHover }
+    ]"
+    @mouseenter="setTrue"
+    @mouseleave="setFalse"
+  >
+    <span>
+      <slot></slot>
+    </span>
+    <div v-if="closable" class="pl-10px">
+      <icon-close :is-primary="active || isHover" @click="handleClose" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useBoolean } from '@/hooks';
+import { IconClose } from '@/components';
+
+defineProps({
+  active: {
+    type: Boolean,
+    default: false
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  }
+});
+const emit = defineEmits(['close']);
+
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+
+function handleClose(e: MouseEvent) {
+  e.stopPropagation();
+  emit('close');
+}
+</script>
+<style scoped></style>
diff --git a/src/components/custom/ChromeTab/components/SvgRadiusBg.vue b/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
new file mode 100644
index 00000000..eef21397
--- /dev/null
+++ b/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
@@ -0,0 +1,61 @@
+<template>
+  <svg>
+    <defs>
+      <symbol id="geometry-left" viewBox="0 0 214 36">
+        <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"></path>
+      </symbol>
+      <symbol id="geometry-right" viewBox="0 0 214 36">
+        <use xlink:href="#geometry-left"></use>
+      </symbol>
+      <clipPath>
+        <rect width="100%" height="100%" x="0"></rect>
+      </clipPath>
+    </defs>
+    <svg width="52%" height="100%">
+      <use xlink:href="#geometry-left" width="214" height="36" :fill="fill"></use>
+    </svg>
+    <g transform="scale(-1, 1)">
+      <svg width="52%" height="100%" x="-100%" y="0">
+        <use xlink:href="#geometry-right" width="214" height="36" :fill="fill"></use>
+      </svg>
+    </g>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  activeColor: {
+    type: String,
+    default: '#eef6ff'
+  },
+  hoverColor: {
+    type: String,
+    default: '#dee1e6'
+  },
+  defaultColor: {
+    type: String,
+    default: '#fff'
+  },
+  isActive: {
+    type: Boolean,
+    default: false
+  },
+  isHover: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const fill = computed(() => {
+  let color = props.defaultColor;
+  if (props.isActive) {
+    color = props.activeColor;
+  } else if (props.isHover) {
+    color = props.hoverColor;
+  }
+  return color;
+});
+</script>
+<style scoped></style>
diff --git a/src/components/custom/ChromeTab/components/index.ts b/src/components/custom/ChromeTab/components/index.ts
new file mode 100644
index 00000000..57d745d0
--- /dev/null
+++ b/src/components/custom/ChromeTab/components/index.ts
@@ -0,0 +1,3 @@
+import SvgRadiusBg from './SvgRadiusBg.vue';
+
+export { SvgRadiusBg };
diff --git a/src/components/custom/ChromeTab/index.vue b/src/components/custom/ChromeTab/index.vue
new file mode 100644
index 00000000..97465181
--- /dev/null
+++ b/src/components/custom/ChromeTab/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="relative flex-y-center h-34px px-24px cursor-pointer -mr-18px"
+    :class="{ 'z-10': isActive, 'z-9': isHover }"
+    @mouseenter="setTrue"
+    @mouseleave="setFalse"
+  >
+    <div class="absolute-lb w-full h-full overflow-hidden">
+      <svg-radius-bg class="w-full h-full" :is-active="isActive" :is-hover="isHover" />
+    </div>
+    <span class="relative z-2">
+      <slot></slot>
+    </span>
+    <div v-if="closable" class="pl-18px">
+      <icon-close :is-primary="isActive" @click="handleClose" />
+    </div>
+    <n-divider v-if="!isHover && !isActive" :vertical="true" class="absolute right-0 !bg-[#a4abb8] z-2" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NDivider } from 'naive-ui';
+import { useBoolean } from '@/hooks';
+import IconClose from '../IconClose/index.vue';
+import { SvgRadiusBg } from './components';
+
+defineProps({
+  isActive: {
+    type: Boolean,
+    default: false
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(['close']);
+
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+
+function handleClose(e: MouseEvent) {
+  e.stopPropagation();
+  emit('close');
+}
+</script>
+<style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/common/IconClose.vue b/src/components/custom/IconClose/index.vue
similarity index 100%
rename from src/layouts/BasicLayout/components/GlobalTab/components/common/IconClose.vue
rename to src/components/custom/IconClose/index.vue
diff --git a/src/components/custom/index.ts b/src/components/custom/index.ts
index 4a841b08..52d517bf 100644
--- a/src/components/custom/index.ts
+++ b/src/components/custom/index.ts
@@ -1,3 +1,6 @@
 import CountTo from './CountTo/index.vue';
+import IconClose from './IconClose/index.vue';
+import ButtonTab from './ButtonTab/index.vue';
+import ChromeTab from './ChromeTab/index.vue';
 
-export { CountTo };
+export { CountTo, IconClose, ButtonTab, ChromeTab };
diff --git a/src/components/index.ts b/src/components/index.ts
index 37ef6820..94a251f2 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,2 @@
 export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg, HoverContainer } from './common';
-export { CountTo } from './custom';
+export { CountTo, IconClose, ButtonTab, ChromeTab } from './custom';
diff --git a/src/enum/theme.ts b/src/enum/theme.ts
index 5f577902..fa00eddc 100644
--- a/src/enum/theme.ts
+++ b/src/enum/theme.ts
@@ -16,7 +16,7 @@ export enum EnumNavTheme {
 /** 多页签风格 */
 export enum EnumMultiTabMode {
   'button' = '按钮风格',
-  'browser' = '浏览器风格'
+  'chrome' = '谷歌风格'
 }
 
 /** 水平模式的菜单位置 */
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/BrowserTabItem.vue b/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/BrowserTabItem.vue
deleted file mode 100644
index ca2ec45d..00000000
--- a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/BrowserTabItem.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div
-    class="relative flex-y-center h-34px -mr-20px cursor-pointer"
-    :class="{ 'z-10': isHover, 'z-11': isActive }"
-    @mouseenter="handleMouseOnTab('enter')"
-    @mouseleave="handleMouseOnTab('leave')"
-  >
-    <div class="relative w-10px h-full">
-      <div class="absolute-lt w-full h-full rounded-br-8px overflow-hidden bg-white z-3"></div>
-      <div
-        class="absolute-rb w-full h-10px z-2 bg-opacity-10"
-        :class="{ 'bg-primary': isActive, 'bg-black': !isActive && isHover }"
-      ></div>
-    </div>
-    <div
-      class="flex-y-center h-full rounded-t-8px bg-opacity-10"
-      :class="{ 'bg-primary': isActive, 'bg-black': !isActive && isHover }"
-    >
-      <div class="w-16px">
-        <n-divider v-if="!isHover && !isActive" :vertical="true" class="!bg-gray-300" />
-      </div>
-      <span :class="[closable ? 'pr-24px' : 'pr-16px']">
-        <slot></slot>
-      </span>
-      <icon-close v-if="closable" :is-primary="isActive" @click="handleClose" />
-      <div v-if="closable" class="w-8px"></div>
-    </div>
-    <div class="relative w-10px h-full">
-      <div class="absolute-lt w-full h-full rounded-bl-8px overflow-hidden bg-white z-3"></div>
-      <div
-        class="absolute-lb w-full h-10px bg-opacity-10 z-2"
-        :class="{ 'bg-primary': isActive, 'bg-black': !isActive && isHover }"
-      ></div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { NDivider } from 'naive-ui';
-import { useBoolean } from '@/hooks';
-import { IconClose } from '../../common';
-
-const props = defineProps({
-  currentIndex: {
-    type: Number,
-    required: true
-  },
-  activeIndex: {
-    type: Number,
-    required: true
-  },
-  hoverIndex: {
-    type: Number,
-    default: NaN
-  },
-  closable: {
-    type: Boolean,
-    default: true
-  }
-});
-
-const emit = defineEmits(['close', 'update:hoverIndex']);
-
-const { bool: isHover, setTrue, setFalse } = useBoolean();
-
-const isActive = computed(() => props.currentIndex === props.activeIndex);
-
-const hoveredIndex = ref(props.hoverIndex);
-function setHoverIndex(index: number) {
-  hoveredIndex.value = index;
-}
-function resetHoverIndex() {
-  hoveredIndex.value = NaN;
-}
-
-function handleMouseOnTab(mode: 'enter' | 'leave') {
-  if (mode === 'enter') {
-    setTrue();
-    setHoverIndex(props.currentIndex);
-  } else {
-    setFalse();
-    resetHoverIndex();
-  }
-}
-
-function handleClose(e: MouseEvent) {
-  e.stopPropagation();
-  emit('close');
-}
-
-watch(
-  () => props.hoverIndex,
-  newValue => {
-    setHoverIndex(newValue);
-  }
-);
-watch(hoveredIndex, newValue => {
-  emit('update:hoverIndex', newValue);
-});
-watch(
-  () => props.activeIndex,
-  () => {
-    resetHoverIndex();
-  }
-);
-</script>
-<style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/LeftTabRadius.vue b/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/LeftTabRadius.vue
deleted file mode 100644
index 47da5b6b..00000000
--- a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/LeftTabRadius.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="absolute bottom-0 -left-16px flex w-32px h-full bg-white">
-    <div class="relative w-1/2 h-full">
-      <div class="absolute-lt w-full h-full bg-white rounded-br-8px overflow-hidden z-2">
-        <div
-          class="w-full h-full transition-background duration-400 ease-in-out"
-          :class="{ 'bg-black bg-opacity-10': isLeftHover }"
-        ></div>
-      </div>
-      <div
-        class="absolute-lt w-full h-full transition-background duration-400 ease-in-out bg-opacity-10 z-1"
-        :class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
-      ></div>
-    </div>
-    <div
-      class="relative w-1/2 h-full transition-background duration-400 ease-in-out"
-      :class="{ 'bg-black bg-opacity-10': isLeftHover }"
-    >
-      <div class="absolute-lt w-full h-full bg-white rounded-tl-8px overflow-hidden z-2">
-        <div
-          class="w-full h-full transition-background duration-400 ease-in-out bg-opacity-10"
-          :class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
-        ></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineProps({
-  isPrimary: {
-    type: Boolean,
-    default: false
-  },
-  isHover: {
-    type: Boolean,
-    default: false
-  },
-  isLeftHover: {
-    type: Boolean,
-    default: false
-  }
-});
-</script>
-<style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/RightTabRadius.vue b/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/RightTabRadius.vue
deleted file mode 100644
index c0774414..00000000
--- a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/RightTabRadius.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="absolute bottom-0 -right-16px flex w-32px h-full bg-white">
-    <div
-      class="relative w-1/2 h-full transition-background duration-400 ease-in-out"
-      :class="{ 'bg-black bg-opacity-10': isRightHover }"
-    >
-      <div class="absolute-lt w-full h-full bg-white rounded-tr-8px overflow-hidden z-2">
-        <div
-          class="w-full h-full transition-background duration-400 ease-in-out bg-opacity-10"
-          :class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
-        ></div>
-      </div>
-    </div>
-    <div class="relative w-1/2 h-full">
-      <div class="absolute-lt w-full h-full bg-white rounded-bl-8px overflow-hidden z-2">
-        <div
-          class="w-full h-full transition-background duration-400 ease-in-out bg-opacity-10"
-          :class="[isRightHover ? 'bg-black' : 'bg-white']"
-        ></div>
-      </div>
-      <div
-        class="absolute-lt w-full h-full transition-background duration-400 ease-in-out bg-opacity-10 z-1"
-        :class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
-      ></div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineProps({
-  isPrimary: {
-    type: Boolean,
-    default: false
-  },
-  isHover: {
-    type: Boolean,
-    default: false
-  },
-  isRightHover: {
-    type: Boolean,
-    default: false
-  }
-});
-</script>
-<style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/SideRadius.vue b/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/SideRadius.vue
deleted file mode 100644
index a49ec556..00000000
--- a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/SideRadius.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script setup lang="ts"></script>
-<style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/index.ts b/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/index.ts
deleted file mode 100644
index 5b534da1..00000000
--- a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import BrowserTabItem from './BrowserTabItem.vue';
-import LeftTabRadius from './LeftTabRadius.vue';
-import RightTabRadius from './RightTabRadius.vue';
-
-export { BrowserTabItem, LeftTabRadius, RightTabRadius };
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/index-old.vue b/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/index-old.vue
deleted file mode 100644
index c962139e..00000000
--- a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/index-old.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <div
-    class="
-      relative
-      inline-flex-center
-      h-30px
-      px-32px
-      transition-background
-      duration-400
-      ease-in-out
-      bg-opacity-10
-      cursor-pointer
-    "
-    :class="{ 'text-primary bg-primary z-3': active, 'bg-black z-2': isHover && !active }"
-    @mouseenter="handleMouseOnTab('enter')"
-    @mouseleave="handleMouseOnTab('leave')"
-  >
-    <span>
-      <slot></slot>
-    </span>
-    <div
-      v-if="closable"
-      class="transition-width duration-400 ease-in-out overflow-hidden"
-      :class="[isHover ? 'w-18px' : 'w-0']"
-    >
-      <icon-close :is-primary="active" @click="handleClose" />
-    </div>
-    <left-tab-radius
-      class="transition-opacity duration-400 ease-in-out"
-      :class="[showRadius ? 'opacity-100' : 'opacity-0']"
-      :is-primary="active"
-      :is-hover="isHover"
-      :is-left-hover="isLeftHover"
-    />
-    <right-tab-radius
-      class="transition-opacity duration-400 ease-out"
-      :class="[showRadius ? 'opacity-100' : 'opacity-0']"
-      :is-primary="active"
-      :is-hover="isHover"
-      :is-right-hover="isRightHover"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import { useBoolean } from '@/hooks';
-import { IconClose } from '../common';
-import { LeftTabRadius, RightTabRadius } from './components';
-
-const props = defineProps({
-  currentIndex: {
-    type: Number,
-    required: true
-  },
-  activeIndex: {
-    type: Number,
-    required: true
-  },
-  hoverIndex: {
-    type: Number,
-    default: NaN
-  },
-  closable: {
-    type: Boolean,
-    default: true
-  }
-});
-const emit = defineEmits(['close', 'update:hoverIndex']);
-
-const { bool: isHover, setTrue, setFalse } = useBoolean();
-
-const hoveredIndex = ref(props.hoverIndex);
-function setHoverIndex(index: number) {
-  hoveredIndex.value = index;
-}
-function resetHoverIndex() {
-  hoveredIndex.value = NaN;
-}
-
-const active = computed(() => props.currentIndex === props.activeIndex);
-const showRadius = computed(() => isHover.value || active.value);
-const isLeftHover = computed(() => active.value && props.activeIndex === hoveredIndex.value + 1);
-const isRightHover = computed(() => active.value && props.activeIndex === hoveredIndex.value - 1);
-
-function handleMouseOnTab(mode: 'enter' | 'leave') {
-  if (mode === 'enter') {
-    setTrue();
-    setHoverIndex(props.currentIndex);
-  } else {
-    setFalse();
-    resetHoverIndex();
-  }
-}
-
-function handleClose(e: MouseEvent) {
-  e.stopPropagation();
-  emit('close');
-}
-
-watch(
-  () => props.hoverIndex,
-  newValue => {
-    setHoverIndex(newValue);
-  }
-);
-watch(hoveredIndex, newValue => {
-  emit('update:hoverIndex', newValue);
-});
-watch(
-  () => props.activeIndex,
-  () => {
-    resetHoverIndex();
-  }
-);
-</script>
-<style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/index.vue b/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/index.vue
deleted file mode 100644
index 7cbba09c..00000000
--- a/src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/index.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div class="flex items-end h-full">
-    <browser-tab-item
-      v-for="(item, index) in app.multiTab.routes"
-      :key="item.path"
-      v-model:hover-index="hoverIndex"
-      :current-index="index"
-      :active-index="app.activeMultiTabIndex"
-      :closable="item.name !== ROUTE_HOME.name"
-      @click="handleClickTab(item.fullPath)"
-      @close="removeMultiTab(item.fullPath)"
-    >
-      {{ item.meta?.title }}
-    </browser-tab-item>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useAppStore } from '@/store';
-import { ROUTE_HOME } from '@/router';
-import { BrowserTabItem } from './components';
-
-const app = useAppStore();
-const { removeMultiTab, handleClickTab } = useAppStore();
-
-const hoverIndex = ref(NaN);
-</script>
-<style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/ButtonTab/index.vue b/src/layouts/BasicLayout/components/GlobalTab/components/ButtonTab/index.vue
deleted file mode 100644
index 897f3503..00000000
--- a/src/layouts/BasicLayout/components/GlobalTab/components/ButtonTab/index.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div
-    class="
-      inline-flex-center
-      h-30px
-      px-14px
-      bg-white
-      border-1px border-[#e5e7eb]
-      rounded-2px
-      cursor-pointer
-      transition
-      duration-400
-      ease-in-out
-    "
-    :class="{ 'text-primary bg-primary bg-opacity-10 !border-primary': active, 'text-primary border-primary': isHover }"
-    @mouseenter="setTrue"
-    @mouseleave="setFalse"
-  >
-    <span>
-      <slot></slot>
-    </span>
-    <div
-      v-if="closable"
-      class="overflow-hidden transition-width duration-400 ease-in-out"
-      :class="[isHover ? 'w-18px' : 'w-0']"
-    >
-      <icon-close :is-primary="true" @click="handleClose" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useBoolean } from '@/hooks';
-import { IconClose } from '../common';
-
-defineProps({
-  active: {
-    type: Boolean,
-    default: false
-  },
-  closable: {
-    type: Boolean,
-    default: true
-  }
-});
-const emit = defineEmits(['close']);
-
-const { bool: isHover, setTrue, setFalse } = useBoolean();
-
-function handleClose(e: MouseEvent) {
-  e.stopPropagation();
-  emit('close');
-}
-</script>
-<style scoped></style>
diff --git a/src/styles/css/animation.css b/src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/components/index.ts
similarity index 100%
rename from src/styles/css/animation.css
rename to src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/components/index.ts
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue b/src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue
new file mode 100644
index 00000000..c95c54c3
--- /dev/null
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/MultiTab/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <div v-if="theme.multiTabStyle.mode === 'chrome'" class="flex items-end h-full">
+    <chrome-tab
+      v-for="item in app.multiTab.routes"
+      :key="item.path"
+      :is-active="app.multiTab.activeRoute === item.fullPath"
+      :closable="item.name !== ROUTE_HOME.name"
+      @click="handleClickTab(item.fullPath)"
+      @close="removeMultiTab(item.fullPath)"
+      @contextmenu="handleContextMenu($event, item.fullPath)"
+    >
+      {{ item.meta?.title }}
+    </chrome-tab>
+  </div>
+  <div v-if="theme.multiTabStyle.mode === 'button'" class="flex-y-center h-full">
+    <button-tab
+      v-for="item in app.multiTab.routes"
+      :key="item.path"
+      class="mr-10px"
+      :active="app.multiTab.activeRoute === item.fullPath"
+      :closable="item.name !== ROUTE_HOME.name"
+      @click="handleClickTab(item.fullPath)"
+      @close="removeMultiTab(item.fullPath)"
+      @contextmenu="handleContextMenu($event, item.fullPath)"
+    >
+      {{ item.meta?.title }}
+    </button-tab>
+  </div>
+  <context-menu
+    :visible="dropdownVisible"
+    :current-path="dropdownConfig.currentPath"
+    :x="dropdownConfig.x"
+    :y="dropdownConfig.y"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive, nextTick } from 'vue';
+import { useThemeStore, useAppStore } from '@/store';
+import { ROUTE_HOME } from '@/router';
+import { ChromeTab, ButtonTab } from '@/components';
+import { useBoolean } from '@/hooks';
+import { ContextMenu } from '../common';
+
+const theme = useThemeStore();
+const app = useAppStore();
+const { removeMultiTab, handleClickTab } = useAppStore();
+const { bool: dropdownVisible, setTrue: showDropdown, setFalse: hideDropdown } = useBoolean();
+
+const dropdownConfig = reactive({
+  x: 0,
+  y: 0,
+  currentPath: ''
+});
+function setDropdownConfig(x: number, y: number, currentPath: string) {
+  Object.assign(dropdownConfig, { x, y, currentPath });
+}
+
+function handleContextMenu(e: MouseEvent, fullPath: string) {
+  e.preventDefault();
+  const { clientX, clientY } = e;
+  hideDropdown();
+  setDropdownConfig(clientX, clientY, fullPath);
+  nextTick(() => {
+    showDropdown();
+  });
+}
+</script>
+<style scoped></style>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue b/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue
index 2883922e..835e190b 100644
--- a/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/ReloadButton/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-40px h-full" placement="bottom-end" content="刷新当页" @click="handleRefresh">
+  <hover-container class="w-40px h-full" placement="bottom-end" content="重新加载" @click="handleRefresh">
     <icon-mdi-refresh class="text-16px" :class="{ 'reload-animation': loading }" />
   </hover-container>
 </template>
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/ContextMenu/index.vue b/src/layouts/BasicLayout/components/GlobalTab/components/common/ContextMenu.vue
similarity index 72%
rename from src/layouts/BasicLayout/components/GlobalTab/components/ContextMenu/index.vue
rename to src/layouts/BasicLayout/components/GlobalTab/components/common/ContextMenu.vue
index 770c9d56..04090802 100644
--- a/src/layouts/BasicLayout/components/GlobalTab/components/ContextMenu/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/common/ContextMenu.vue
@@ -13,13 +13,18 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
 import { NDropdown } from 'naive-ui';
-import { CloseOutlined, ColumnWidthOutlined, MinusOutlined } from '@vicons/antd';
+import type { DropdownOption } from 'naive-ui';
+import { ReloadOutlined, CloseOutlined, ColumnWidthOutlined, MinusOutlined } from '@vicons/antd';
 import { useAppStore } from '@/store';
 import { useBoolean } from '@/hooks';
 import { ROUTE_HOME } from '@/router';
+import { useReloadInject } from '@/context';
 import { dynamicIconRender } from '@/utils';
 
-type DropdownKey = 'close-current' | 'close-other' | 'close-all';
+type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-all';
+type Option = DropdownOption & {
+  key: DropdownKey;
+};
 
 const props = defineProps({
   visible: {
@@ -48,28 +53,41 @@ const emit = defineEmits(['update:visible']);
 
 const app = useAppStore();
 const { removeMultiTab, clearMultiTab } = useAppStore();
+const { handleReload } = useReloadInject();
 const { bool: dropdownVisible, setTrue: show, setFalse: hide } = useBoolean(props.visible);
 
-const options = computed(() => [
+const options = computed<Option[]>(() => [
   {
-    label: '关闭当前',
+    label: '重新加载',
+    key: 'reload-current',
+    disabled: props.currentPath !== app.multiTab.activeRoute,
+    icon: dynamicIconRender(ReloadOutlined)
+  },
+  {
+    label: '关闭标签页',
     key: 'close-current',
     disabled: props.currentPath === ROUTE_HOME.path,
     icon: dynamicIconRender(CloseOutlined)
   },
   {
-    label: '关闭其他',
+    label: '关闭其他标签页',
     key: 'close-other',
     icon: dynamicIconRender(ColumnWidthOutlined)
   },
   {
-    label: '关闭全部',
+    label: '关闭全部标签页',
     key: 'close-all',
     icon: dynamicIconRender(MinusOutlined)
   }
 ]);
 
 const actionMap = new Map<DropdownKey, () => void>([
+  [
+    'reload-current',
+    () => {
+      handleReload();
+    }
+  ],
   [
     'close-current',
     () => {
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/common/index.ts b/src/layouts/BasicLayout/components/GlobalTab/components/common/index.ts
index 5beb901f..344a7087 100644
--- a/src/layouts/BasicLayout/components/GlobalTab/components/common/index.ts
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/common/index.ts
@@ -1,3 +1,3 @@
-import IconClose from './IconClose.vue';
+import ContextMenu from './ContextMenu.vue';
 
-export { IconClose };
+export { ContextMenu };
diff --git a/src/layouts/BasicLayout/components/GlobalTab/components/index.ts b/src/layouts/BasicLayout/components/GlobalTab/components/index.ts
index 16e3a6ea..386d9184 100644
--- a/src/layouts/BasicLayout/components/GlobalTab/components/index.ts
+++ b/src/layouts/BasicLayout/components/GlobalTab/components/index.ts
@@ -1,6 +1,4 @@
-import ButtonTab from './ButtonTab/index.vue';
-import BrowserTab from './BrowserTab/index.vue';
+import MultiTab from './MultiTab/index.vue';
 import ReloadButton from './ReloadButton/index.vue';
-import ContextMenu from './ContextMenu/index.vue';
 
-export { ButtonTab, BrowserTab, ReloadButton, ContextMenu };
+export { MultiTab, ReloadButton };
diff --git a/src/layouts/BasicLayout/components/GlobalTab/index.vue b/src/layouts/BasicLayout/components/GlobalTab/index.vue
index 06b86552..428b79bb 100644
--- a/src/layouts/BasicLayout/components/GlobalTab/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalTab/index.vue
@@ -8,38 +8,16 @@
     justify="space-between"
     :item-style="{ paddingTop: '0px', paddingBottom: '0px' }"
   >
-    <n-space v-if="theme.multiTabStyle.mode === 'button'" :align="'center'" size="small" class="h-full">
-      <button-tab
-        v-for="item in app.multiTab.routes"
-        :key="item.path"
-        :active="app.multiTab.activeRoute === item.fullPath"
-        :closable="item.name !== ROUTE_HOME.name"
-        @click="handleClickTab(item.fullPath)"
-        @close="removeMultiTab(item.fullPath)"
-        @contextmenu="handleContextMenu($event, item.fullPath)"
-      >
-        {{ item.meta?.title }}
-      </button-tab>
-    </n-space>
-    <browser-tab v-if="theme.multiTabStyle.mode === 'browser'" />
+    <multi-tab />
     <reload-button />
-    <context-menu
-      :visible="dropdownVisible"
-      :current-path="dropdownConfig.currentPath"
-      :x="dropdownConfig.x"
-      :y="dropdownConfig.y"
-    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, reactive, watch, nextTick } from 'vue';
+import { computed, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { NSpace } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
-import { ROUTE_HOME } from '@/router';
-import { ButtonTab, BrowserTab, ReloadButton, ContextMenu } from './components';
-import { useBoolean } from '@/hooks';
+import { MultiTab, ReloadButton } from './components';
 
 defineProps({
   zIndex: {
@@ -50,11 +28,7 @@ defineProps({
 
 const route = useRoute();
 const theme = useThemeStore();
-const app = useAppStore();
-const { initMultiTab, addMultiTab, removeMultiTab, setActiveMultiTab, handleClickTab } = useAppStore();
-const { bool: dropdownVisible, setTrue: showDropdown, setFalse: hideDropdown } = useBoolean();
-
-const hoverIndex = ref(NaN);
+const { initMultiTab, addMultiTab, setActiveMultiTab } = useAppStore();
 
 const fixedHeaderAndTab = computed(() => theme.fixedHeaderAndTab || theme.navStyle.mode === 'horizontal-mix');
 const multiTabHeight = computed(() => {
@@ -66,25 +40,6 @@ const headerHeight = computed(() => {
   return `${height}px`;
 });
 
-const dropdownConfig = reactive({
-  x: 0,
-  y: 0,
-  currentPath: ''
-});
-
-function setDropdownConfig(x: number, y: number, currentPath: string) {
-  Object.assign(dropdownConfig, { x, y, currentPath });
-}
-
-function handleContextMenu(e: MouseEvent, fullPath: string) {
-  e.preventDefault();
-  hideDropdown();
-  setDropdownConfig(e.clientX, e.clientY, fullPath);
-  nextTick(() => {
-    showDropdown();
-  });
-}
-
 function init() {
   initMultiTab();
 }
diff --git a/src/settings/theme.ts b/src/settings/theme.ts
index fe06f8c9..c2bf90b9 100644
--- a/src/settings/theme.ts
+++ b/src/settings/theme.ts
@@ -57,10 +57,10 @@ const themeSettings: ThemeSettings = {
     height: 44,
     visible: true,
     bgColor: '#fff',
-    mode: 'button',
+    mode: 'chrome',
     modeList: [
       { value: 'button', label: EnumMultiTabMode.button },
-      { value: 'browser', label: EnumMultiTabMode.browser }
+      { value: 'chrome', label: EnumMultiTabMode.chrome }
     ]
   },
   crumbsStyle: {