chore: 集成vben

packages/ui/certd-client/src/vben/tabs-ui/tabs-view.vue

@@ -1,40 +1,32 @@
 <script setup lang="ts">
-import type { TabsEmits, TabsProps } from './types';
+import type { TabsEmits, TabsProps } from "./types";
 
-import { useForwardPropsEmits } from '/@/vben/composables';
-import { ChevronLeft, ChevronRight } from '/@/vben/icons';
-import { VbenScrollbar } from '/@/vben/shadcn-ui';
+import { useForwardPropsEmits } from "/@/vben/composables";
+import { ChevronLeft, ChevronRight } from "/@/vben/icons";
+import { VbenScrollbar } from "/@/vben/shadcn-ui";
 
-import { Tabs, TabsChrome } from './components';
-import { useTabsDrag } from './use-tabs-drag';
-import { useTabsViewScroll } from './use-tabs-view-scroll';
+import { Tabs, TabsChrome } from "./components";
+import { useTabsDrag } from "./use-tabs-drag";
+import { useTabsViewScroll } from "./use-tabs-view-scroll";
 
 interface Props extends TabsProps {}
 
 defineOptions({
-  name: 'TabsView',
+  name: "TabsView"
 });
 
 const props = withDefaults(defineProps<Props>(), {
-  contentClass: 'vben-tabs-content',
+  contentClass: "vben-tabs-content",
   draggable: true,
-  styleType: 'chrome',
-  wheelable: true,
+  styleType: "chrome",
+  wheelable: true
 });
 
 const emit = defineEmits<TabsEmits>();
 
 const forward = useForwardPropsEmits(props, emit);
 
-const {
-  handleScrollAt,
-  handleWheel,
-  scrollbarRef,
-  scrollDirection,
-  scrollIsAtLeft,
-  scrollIsAtRight,
-  showScrollButton,
-} = useTabsViewScroll(props);
+const { handleScrollAt, handleWheel, scrollbarRef, scrollDirection, scrollIsAtLeft, scrollIsAtRight, showScrollButton } = useTabsViewScroll(props);
 
 function onWheel(e: WheelEvent) {
   if (props.wheelable) {
@@ -48,13 +40,13 @@ useTabsDrag(props, emit);
 </script>
 
 <template>
-  <div class="flex h-full flex-1 overflow-hidden">
+  <div class="flex h-full flex-1 overflow-hidden bg-gray-100 dark:bg-black">
     <!-- 左侧滚动按钮 -->
     <span
       v-show="showScrollButton"
       :class="{
         'hover:bg-muted text-muted-foreground cursor-pointer': !scrollIsAtLeft,
-        'pointer-events-none opacity-30': scrollIsAtLeft,
+        'pointer-events-none opacity-30': scrollIsAtLeft
       }"
       class="border-r px-2"
       @click="scrollDirection('left')"
@@ -64,27 +56,12 @@ useTabsDrag(props, emit);
 
     <div
       :class="{
-        'pt-[3px]': styleType === 'chrome',
+        'pt-[3px]': styleType === 'chrome'
       }"
       class="size-full flex-1 overflow-hidden"
     >
-      <VbenScrollbar
-        ref="scrollbarRef"
-        :shadow-bottom="false"
-        :shadow-top="false"
-        class="h-full"
-        horizontal
-        scroll-bar-class="z-10 hidden "
-        shadow
-        shadow-left
-        shadow-right
-        @scroll-at="handleScrollAt"
-        @wheel="onWheel"
-      >
-        <TabsChrome
-          v-if="styleType === 'chrome'"
-          v-bind="{ ...forward, ...$attrs, ...$props }"
-        />
+      <VbenScrollbar ref="scrollbarRef" :shadow-bottom="false" :shadow-top="false" class="h-full" horizontal scroll-bar-class="z-10 hidden " shadow shadow-left shadow-right @scroll-at="handleScrollAt" @wheel="onWheel">
+        <TabsChrome v-if="styleType === 'chrome'" v-bind="{ ...forward, ...$attrs, ...$props }" />
 
         <Tabs v-else v-bind="{ ...forward, ...$attrs, ...$props }" />
       </VbenScrollbar>
@@ -95,7 +72,7 @@ useTabsDrag(props, emit);
       v-show="showScrollButton"
       :class="{
         'hover:bg-muted text-muted-foreground cursor-pointer': !scrollIsAtRight,
-        'pointer-events-none opacity-30': scrollIsAtRight,
+        'pointer-events-none opacity-30': scrollIsAtRight
       }"
       class="hover:bg-muted text-muted-foreground cursor-pointer border-l px-2"
       @click="scrollDirection('right')"