refactor(projects): chrome Tab重构完成

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>

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>

src/components/custom/ChromeTab/components/index.ts

@@ -0,0 +1,3 @@
+import SvgRadiusBg from './SvgRadiusBg.vue';
+
+export { SvgRadiusBg };

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>

src/components/custom/IconClose/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="relative flex-center w-18px h-18px text-14px"
+    :class="[isPrimary ? 'text-primary' : 'text-gray-400']"
+    @mouseenter="setTrue"
+    @mouseleave="setFalse"
+  >
+    <transition name="transition-opacity">
+      <icon-carbon-close-filled v-if="isHover" key="hover" class="absolute" />
+      <icon-carbon-close v-else key="unhover" class="absolute" />
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useBoolean } from '@/hooks';
+
+defineProps({
+  isPrimary: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+</script>
+<style scoped></style>

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 };

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';