refactor(projects): chrome Tab重构完成

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>