chore: 集成vben

packages/ui/certd-client/src/vben/index.ts

@@ -11,8 +11,8 @@ import "./styles/antd/index.css";
 import { useTitle } from "@vueuse/core";
 import { setupI18n } from "/@/vben/locales";
 
-export async function setupVben(app: any) {
-  await setupI18n(app);
+export async function setupVben(app: any, { loadMessages }: any) {
+  await setupI18n(app, { loadMessages });
   const store = await initStores(app, { namespace: "fs" });
 
   return { store };

packages/ui/certd-client/src/vben/layouts/basic/content/content.vue

@@ -78,7 +78,7 @@ function transformComponent(component: VNode, route: RouteLocationNormalizedLoad
 </script>
 
 <template>
-  <div class="relative h-full">
+  <div class="relative h-full bg-white dark:bg-black">
     <IFrameRouterView />
     <RouterView v-slot="{ Component, route }">
       <Transition :name="getTransitionName(route)" appear mode="out-in">

packages/ui/certd-client/src/vben/layouts/basic/menu/use-mixed-menu.ts

@@ -73,7 +73,7 @@ function useMixedMenu() {
     if (!needSplit.value) {
       return menus.value;
     }
-    return menus.value.map((item) => {
+    return menus.value.map((item: any) => {
       return {
         ...item,
         children: []
@@ -85,6 +85,10 @@ function useMixedMenu() {
    * 侧边菜单
    */
   const sidebarMenus = computed(() => {
+    if (preferences.app.isMobile) {
+      return [...holdMenus.value, ...menus.value];
+    }
+
     const sideMenus = needSplit.value ? splitSideMenus.value : menus.value;
     return [...holdMenus.value, ...sideMenus];
   });
@@ -116,7 +120,7 @@ function useMixedMenu() {
     }
     if (!splitSideMenus.value || splitSideMenus.value.length === 0) {
       //仍然为空，从所有菜单中查找
-      const hasChildren = allMenus.value.find((item) => {
+      const hasChildren = allMenus.value.find((item: any) => {
         return item.children && item.children.length > 0;
       });
       if (hasChildren) {
@@ -136,7 +140,7 @@ function useMixedMenu() {
       return;
     }
 
-    const rootMenu = menus.value.find((item) => item.path === key);
+    const rootMenu = menus.value.find((item: any) => item.path === key);
     rootMenuPath.value = rootMenu?.path ?? "";
     splitSideMenus.value = rootMenu?.children ?? [];
     saveLastSplitSideMenus();
@@ -165,7 +169,7 @@ function useMixedMenu() {
   function calcSideMenus(path: string = route.path) {
     let { rootMenu } = findRootMenuByPath(menus.value, path);
     if (!rootMenu) {
-      rootMenu = menus.value.find((item) => item.path === path);
+      rootMenu = menus.value.find((item: any) => item.path === path);
     }
     const result = findRootMenuByPath(rootMenu?.children || [], path, 1);
     mixedRootMenuPath.value = result.rootMenuPath ?? "";

packages/ui/certd-client/src/vben/preferences/config.ts

@@ -9,9 +9,9 @@ const defaultPreferences: Preferences = {
     colorWeakMode: false,
     compact: false,
     contentCompact: "wide",
-    defaultAvatar: "https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp",
+    defaultAvatar: "./static/images/logo/logo.svg",
     dynamicTitle: true,
-    enableCheckUpdates: true,
+    enableCheckUpdates: false,
     enablePreferences: true,
     enableRefreshToken: false,
     isMobile: false,
@@ -65,7 +65,7 @@ const defaultPreferences: Preferences = {
     globalSearch: true
   },
   sidebar: {
-    autoActivateChild: false,
+    autoActivateChild: true,
     collapsed: false,
     collapsedShowTitle: false,
     enable: true,
@@ -108,9 +108,9 @@ const defaultPreferences: Preferences = {
   widget: {
     fullscreen: true,
     globalSearch: true,
-    languageToggle: true,
+    languageToggle: false,
     lockScreen: true,
-    notification: true,
+    notification: false,
     refresh: true,
     sidebarToggle: true,
     themeToggle: true

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')"