chore: code format

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

@@ -1,2 +1,2 @@
-export { default as LayoutContentSpinner } from './content-spinner.vue';
-export { default as LayoutContent } from './content.vue';
+export { default as LayoutContentSpinner } from "./content-spinner.vue";
+export { default as LayoutContent } from "./content.vue";

packages/ui/certd-client/src/vben/layouts/basic/content/use-content-spinner.ts

@@ -1,7 +1,7 @@
-import { computed, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { computed, ref } from "vue";
+import { useRouter } from "vue-router";
 
-import { preferences } from '/@/vben/preferences';
+import { preferences } from "/@/vben/preferences";
 
 function useContentSpinner() {
   const spinning = ref(false);
@@ -26,7 +26,7 @@ function useContentSpinner() {
   };
 
   // 路由前置守卫
-  router.beforeEach((to) => {
+  router.beforeEach(to => {
     if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
       return true;
     }
@@ -36,7 +36,7 @@ function useContentSpinner() {
   });
 
   // 路由后置守卫
-  router.afterEach((to) => {
+  router.afterEach(to => {
     if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
       return true;
     }

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

@@ -8,7 +8,7 @@ interface Props {
 }
 
 defineOptions({
-  name: "Copyright"
+  name: "Copyright",
 });
 
 withDefaults(defineProps<Props>(), {
@@ -16,7 +16,7 @@ withDefaults(defineProps<Props>(), {
   companySiteLink: "",
   date: "2024",
   icp: "",
-  icpLink: ""
+  icpLink: "",
 });
 </script>
 

packages/ui/certd-client/src/vben/layouts/basic/header/index.ts

@@ -1 +1 @@
-export { default as LayoutHeader } from './header.vue';
+export { default as LayoutHeader } from "./header.vue";

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

@@ -16,7 +16,7 @@ interface Props extends MenuProps {
 
 withDefaults(defineProps<Props>(), {
   accordion: true,
-  menus: () => []
+  menus: () => [],
 });
 
 const route = useRoute();

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

@@ -11,7 +11,7 @@ interface Props extends MenuProps {
 
 const props = withDefaults(defineProps<Props>(), {
   accordion: true,
-  menus: () => []
+  menus: () => [],
 });
 
 const emit = defineEmits<{

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

@@ -25,12 +25,12 @@ const route = useRoute();
 onBeforeMount(() => {
   const menu = findMenuByPath(props.menus || [], route.path);
   if (menu) {
-    const rootMenu = (props.menus || []).find((item) => item.path === menu.parents?.[0]);
+    const rootMenu = (props.menus || []).find(item => item.path === menu.parents?.[0]);
     emit("defaultSelect", menu, rootMenu);
   }
 });
 </script>
 
 <template>
-  <NormalMenu :active-path="activePath" :collapse="collapse" :menus="menus" :rounded="rounded" :theme="theme" @enter="(menu) => emit('enter', menu)" @select="(menu) => emit('select', menu)" />
+  <NormalMenu :active-path="activePath" :collapse="collapse" :menus="menus" :rounded="rounded" :theme="theme" @enter="menu => emit('enter', menu)" @select="menu => emit('select', menu)" />
 </template>

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

@@ -106,7 +106,7 @@ function useExtraMenu(useRootMenus?: ComputedRef<MenuRecordRaw[]>) {
     handleMenuMouseEnter,
     handleMixedMenuSelect,
     handleSideMouseLeave,
-    sidebarExtraVisible
+    sidebarExtraVisible,
   };
 }
 

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

@@ -44,7 +44,7 @@ function useMixedMenu() {
         }
       }
       const item: any = {
-        ...sub
+        ...sub,
       };
 
       list.push(item);
@@ -76,7 +76,7 @@ function useMixedMenu() {
     return menus.value.map((item: any) => {
       return {
         ...item,
-        children: []
+        children: [],
       };
     });
   });
@@ -181,7 +181,7 @@ function useMixedMenu() {
 
   watch(
     () => route.path,
-    (path) => {
+    path => {
       const currentPath = (route?.meta?.activePath as string) ?? path;
       calcSideMenus(currentPath);
       if (rootMenuPath.value) defaultSubMap.set(rootMenuPath.value, currentPath);
@@ -203,7 +203,7 @@ function useMixedMenu() {
     sidebarMenus,
     mixHeaderMenus,
     mixExtraMenus,
-    sidebarVisible
+    sidebarVisible,
   };
 }
 

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

@@ -10,7 +10,7 @@ function useNavigation() {
 
   const routeMetaMap = new Map<string, RouteRecordNormalized>();
 
-  routes.forEach((route) => {
+  routes.forEach(route => {
     routeMetaMap.set(route.path, route);
   });
 
@@ -24,7 +24,7 @@ function useNavigation() {
     } else {
       await router.push({
         path,
-        query
+        query,
       });
     }
   };

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

@@ -11,7 +11,7 @@ import { TabsToolMore, TabsToolScreen, TabsView } from "../../../tabs-ui";
 import { useTabbar } from "./use-tabbar";
 
 defineOptions({
-  name: "LayoutTabbar"
+  name: "LayoutTabbar",
 });
 
 defineProps<{ showIcon?: boolean; theme?: string }>();
@@ -26,11 +26,11 @@ const { createContextMenus, currentActive, currentTabs, handleClick, handleClose
 const menus = computed(() => {
   const tab = tabbarStore.getTabByPath(currentActive.value);
   const menus = createContextMenus(tab);
-  return menus.map((item) => {
+  return menus.map(item => {
     return {
       ...item,
       label: item.text,
-      value: item.key
+      value: item.key,
     };
   });
 });

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

@@ -56,8 +56,8 @@ export function useTabbar() {
       ...tab,
       meta: {
         ...tab?.meta,
-        title: $t(tab?.meta?.title as string)
-      }
+        title: $t(tab?.meta?.title as string),
+      },
     };
   }
 
@@ -75,7 +75,7 @@ export function useTabbar() {
       const meta = route.matched?.[route.matched.length - 1]?.meta;
       tabbarStore.addTab({
         ...route,
-        meta: meta || route.meta
+        meta: meta || route.meta,
       });
     },
     { immediate: true }
@@ -94,7 +94,7 @@ export function useTabbar() {
         },
         icon: X,
         key: "close",
-        text: $t("preferences.tabbar.contextMenu.close")
+        text: $t("preferences.tabbar.contextMenu.close"),
       },
       {
         handler: async () => {
@@ -102,7 +102,7 @@ export function useTabbar() {
         },
         icon: affixTab ? PinOff : Pin,
         key: "affix",
-        text: affixTab ? $t("preferences.tabbar.contextMenu.unpin") : $t("preferences.tabbar.contextMenu.pin")
+        text: affixTab ? $t("preferences.tabbar.contextMenu.unpin") : $t("preferences.tabbar.contextMenu.pin"),
       },
       {
         handler: async () => {
@@ -113,14 +113,14 @@ export function useTabbar() {
         },
         icon: contentIsMaximize.value ? Minimize2 : Fullscreen,
         key: contentIsMaximize.value ? "restore-maximize" : "maximize",
-        text: contentIsMaximize.value ? $t("preferences.tabbar.contextMenu.restoreMaximize") : $t("preferences.tabbar.contextMenu.maximize")
+        text: contentIsMaximize.value ? $t("preferences.tabbar.contextMenu.restoreMaximize") : $t("preferences.tabbar.contextMenu.maximize"),
       },
       {
         disabled: disabledRefresh,
         handler: refreshTab,
         icon: RotateCw,
         key: "reload",
-        text: $t("preferences.tabbar.contextMenu.reload")
+        text: $t("preferences.tabbar.contextMenu.reload"),
       },
       {
         handler: async () => {
@@ -129,7 +129,7 @@ export function useTabbar() {
         icon: ExternalLink,
         key: "open-in-new-window",
         separator: true,
-        text: $t("preferences.tabbar.contextMenu.openInNewWindow")
+        text: $t("preferences.tabbar.contextMenu.openInNewWindow"),
       },
 
       {
@@ -139,7 +139,7 @@ export function useTabbar() {
         },
         icon: ArrowLeftToLine,
         key: "close-left",
-        text: $t("preferences.tabbar.contextMenu.closeLeft")
+        text: $t("preferences.tabbar.contextMenu.closeLeft"),
       },
       {
         disabled: disabledCloseRight,
@@ -149,7 +149,7 @@ export function useTabbar() {
         icon: ArrowRightToLine,
         key: "close-right",
         separator: true,
-        text: $t("preferences.tabbar.contextMenu.closeRight")
+        text: $t("preferences.tabbar.contextMenu.closeRight"),
       },
       {
         disabled: disabledCloseOther,
@@ -158,15 +158,15 @@ export function useTabbar() {
         },
         icon: FoldHorizontal,
         key: "close-other",
-        text: $t("preferences.tabbar.contextMenu.closeOther")
+        text: $t("preferences.tabbar.contextMenu.closeOther"),
       },
       {
         disabled: disabledCloseAll,
         handler: closeAllTabs,
         icon: ArrowRightLeft,
         key: "close-all",
-        text: $t("preferences.tabbar.contextMenu.closeAll")
-      }
+        text: $t("preferences.tabbar.contextMenu.closeAll"),
+      },
     ];
     return menus;
   };
@@ -176,6 +176,6 @@ export function useTabbar() {
     currentActive,
     currentTabs,
     handleClick,
-    handleClose
+    handleClose,
   };
 }

packages/ui/certd-client/src/vben/layouts/widgets/breadcrumb.vue

@@ -20,7 +20,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   showHome: false,
   showIcon: false,
-  type: "normal"
+  type: "normal",
 });
 
 const route = useRoute();
@@ -41,14 +41,14 @@ const breadcrumbs = computed((): IBreadcrumb[] => {
     resultBreadcrumb.push({
       icon,
       path: path || route.path,
-      title: title ? $t((title || name) as string) : ""
+      title: title ? $t((title || name) as string) : "",
     });
   }
   if (props.showHome) {
     resultBreadcrumb.unshift({
       icon: "mdi:home-outline",
       isHome: true,
-      path: "/"
+      path: "/",
     });
   }
   if (props.hideWhenOnlyOne && resultBreadcrumb.length === 1) {

packages/ui/certd-client/src/vben/layouts/widgets/check-updates/check-updates.vue

@@ -16,7 +16,7 @@ defineOptions({ name: "CheckUpdates" });
 
 const props = withDefaults(defineProps<Props>(), {
   checkUpdatesInterval: 1,
-  checkUpdateUrl: import.meta.env.BASE_URL || "/"
+  checkUpdateUrl: import.meta.env.BASE_URL || "/",
 });
 
 let isCheckingUpdates = false;
@@ -32,7 +32,7 @@ const [UpdateNoticeModal, modalApi] = useVbenModal({
     lastVersionTag.value = currentVersionTag.value;
     window.location.reload();
     // handleSubmitLogout();
-  }
+  },
 });
 
 async function getVersionTag() {
@@ -42,7 +42,7 @@ async function getVersionTag() {
     }
     const response = await fetch(props.checkUpdateUrl, {
       cache: "no-cache",
-      method: "HEAD"
+      method: "HEAD",
     });
 
     return response.headers.get("etag") || response.headers.get("last-modified");

packages/ui/certd-client/src/vben/layouts/widgets/color-toggle.vue

@@ -7,15 +7,15 @@ import { COLOR_PRESETS, preferences, updatePreferences } from "/@/vben/preferenc
 import { VbenIconButton } from "/@/vben//shadcn-ui";
 
 defineOptions({
-  name: "AuthenticationColorToggle"
+  name: "AuthenticationColorToggle",
 });
 
 function handleUpdate(colorPrimary: string, type: BuiltinThemeType) {
   updatePreferences({
     theme: {
       colorPrimary,
-      builtinType: type
-    }
+      builtinType: type,
+    },
   });
 }
 </script>

packages/ui/certd-client/src/vben/layouts/widgets/global-search/global-search.vue

@@ -14,12 +14,12 @@ import { useMagicKeys, whenever } from "@vueuse/core";
 import SearchPanel from "./search-panel.vue";
 
 defineOptions({
-  name: "GlobalSearch"
+  name: "GlobalSearch",
 });
 
 const props = withDefaults(defineProps<{ enableShortcutKey?: boolean; menus: MenuRecordRaw[] }>(), {
   enableShortcutKey: true,
-  menus: () => []
+  menus: () => [],
 });
 
 const keyword = ref("");
@@ -33,9 +33,9 @@ const [Modal, modalApi] = useVbenModal({
     if (!isOpen) {
       keyword.value = "";
     }
-  }
+  },
 });
-const open = modalApi.useStore((state) => state.isOpen);
+const open = modalApi.useStore(state => state.isOpen);
 
 function handleClose() {
   modalApi.close();

packages/ui/certd-client/src/vben/layouts/widgets/global-search/search-panel.vue

@@ -14,12 +14,12 @@ import { isHttpUrl } from "../../../shared/utils";
 import { onKeyStroke, useLocalStorage, useThrottleFn } from "@vueuse/core";
 
 defineOptions({
-  name: "SearchPanel"
+  name: "SearchPanel",
 });
 
 const props = withDefaults(defineProps<{ keyword: string; menus: MenuRecordRaw[] }>(), {
   keyword: "",
-  menus: () => []
+  menus: () => [],
 });
 const emit = defineEmits<{ close: [] }>();
 
@@ -162,14 +162,14 @@ function createSearchReg(key: string) {
   // 将输入的字符串拆分为单个字符
   // 对每个字符进行转义
   // 然后用'.*'连接所有字符，创建正则表达式
-  const keys = [...key].map((item) => transform(item)).join(".*");
+  const keys = [...key].map(item => transform(item)).join(".*");
   // 返回创建的正则表达式
   return new RegExp(`.*${keys}.*`);
 }
 
 watch(
   () => props.keyword,
-  (val) => {
+  val => {
     if (val) {
       handleSearch(val);
     } else {
@@ -182,7 +182,7 @@ onMounted(() => {
   searchItems.value = mapTree(props.menus, (item: any) => {
     return {
       ...item,
-      name: $t(item?.name)
+      name: $t(item?.name),
     };
   });
   if (searchHistory.value.length > 0) {

packages/ui/certd-client/src/vben/layouts/widgets/lock-screen/lock-screen-modal.vue

@@ -15,12 +15,12 @@ interface Props {
 }
 
 defineOptions({
-  name: "LockScreenModal"
+  name: "LockScreenModal",
 });
 
 withDefaults(defineProps<Props>(), {
   avatar: "",
-  text: ""
+  text: "",
 });
 
 const emit = defineEmits<{
@@ -31,21 +31,21 @@ const [Form, { resetForm, validate, getValues }] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
-      hideRequiredMark: true
+      hideRequiredMark: true,
     },
     schema: computed(() => [
       {
         component: "VbenInputPassword" as const,
         componentProps: {
-          placeholder: $t("ui.widgets.lockScreen.placeholder")
+          placeholder: $t("ui.widgets.lockScreen.placeholder"),
         },
         fieldName: "lockScreenPassword",
         formFieldProps: { validateOnBlur: false },
         label: $t("authentication.password"),
-        rules: z.string().min(1, { message: $t("ui.widgets.lockScreen.placeholder") })
-      }
+        rules: z.string().min(1, { message: $t("ui.widgets.lockScreen.placeholder") }),
+      },
     ]),
-    showDefaultActions: false
+    showDefaultActions: false,
   })
 );
 
@@ -57,7 +57,7 @@ const [Modal] = useVbenModal({
     if (isOpen) {
       resetForm();
     }
-  }
+  },
 });
 
 async function handleSubmit() {

packages/ui/certd-client/src/vben/layouts/widgets/lock-screen/lock-screen.vue

@@ -16,11 +16,11 @@ interface Props {
 }
 
 defineOptions({
-  name: "LockScreen"
+  name: "LockScreen",
 });
 
 withDefaults(defineProps<Props>(), {
-  avatar: ""
+  avatar: "",
 });
 
 defineEmits<{ toLogin: [] }>();
@@ -41,20 +41,20 @@ const [Form, { form, validate }] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
-      hideRequiredMark: true
+      hideRequiredMark: true,
     },
     schema: computed(() => [
       {
         component: "VbenInputPassword" as const,
         componentProps: {
-          placeholder: $t("ui.widgets.lockScreen.placeholder")
+          placeholder: $t("ui.widgets.lockScreen.placeholder"),
         },
         fieldName: "password",
         label: $t("authentication.password"),
-        rules: z.string().min(1, { message: $t("authentication.passwordTip") })
-      }
+        rules: z.string().min(1, { message: $t("authentication.passwordTip") }),
+      },
     ]),
-    showDefaultActions: false
+    showDefaultActions: false,
   })
 );
 

packages/ui/certd-client/src/vben/layouts/widgets/notification/notification.vue

@@ -23,7 +23,7 @@ defineOptions({ name: "NotificationPopup" });
 
 withDefaults(defineProps<Props>(), {
   dot: false,
-  notifications: () => []
+  notifications: () => [],
 });
 
 const emit = defineEmits<{

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/block.vue

@@ -4,11 +4,11 @@ interface Props {
 }
 
 defineOptions({
-  name: 'PreferenceBlock',
+  name: "PreferenceBlock",
 });
 
 withDefaults(defineProps<Props>(), {
-  title: '',
+  title: "",
 });
 </script>
 

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/general/animation.vue

@@ -4,12 +4,12 @@ import { $t } from "/@/locales";
 import SwitchItem from "../switch-item.vue";
 
 defineOptions({
-  name: "PreferenceAnimation"
+  name: "PreferenceAnimation",
 });
 
 const transitionProgress = defineModel<boolean>("transitionProgress", {
   // 默认值
-  default: false
+  default: false,
 });
 const transitionName = defineModel<string>("transitionName");
 const transitionEnable = defineModel<boolean>("transitionEnable");
@@ -37,7 +37,7 @@ function handleClick(value: string) {
       v-for="item in transitionPreset"
       :key="item"
       :class="{
-        'outline-box-active': transitionName === item
+        'outline-box-active': transitionName === item,
       }"
       class="outline-box p-2"
       @click="handleClick(item)"

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/general/general.vue

@@ -6,7 +6,7 @@ import SelectItem from "../select-item.vue";
 import SwitchItem from "../switch-item.vue";
 
 defineOptions({
-  name: "PreferenceGeneralConfig"
+  name: "PreferenceGeneralConfig",
 });
 
 const appLocale = defineModel<string>("appLocale");

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/index.ts

@@ -1,19 +1,19 @@
-export { default as Block } from './block.vue';
-export { default as Animation } from './general/animation.vue';
-export { default as General } from './general/general.vue';
-export { default as Breadcrumb } from './layout/breadcrumb.vue';
-export { default as Content } from './layout/content.vue';
-export { default as Copyright } from './layout/copyright.vue';
-export { default as Footer } from './layout/footer.vue';
-export { default as Header } from './layout/header.vue';
-export { default as Layout } from './layout/layout.vue';
-export { default as Navigation } from './layout/navigation.vue';
-export { default as Sidebar } from './layout/sidebar.vue';
-export { default as Tabbar } from './layout/tabbar.vue';
-export { default as Widget } from './layout/widget.vue';
-export { default as GlobalShortcutKeys } from './shortcut-keys/global.vue';
-export { default as SwitchItem } from './switch-item.vue';
-export { default as BuiltinTheme } from './theme/builtin.vue';
-export { default as ColorMode } from './theme/color-mode.vue';
-export { default as Radius } from './theme/radius.vue';
-export { default as Theme } from './theme/theme.vue';
+export { default as Block } from "./block.vue";
+export { default as Animation } from "./general/animation.vue";
+export { default as General } from "./general/general.vue";
+export { default as Breadcrumb } from "./layout/breadcrumb.vue";
+export { default as Content } from "./layout/content.vue";
+export { default as Copyright } from "./layout/copyright.vue";
+export { default as Footer } from "./layout/footer.vue";
+export { default as Header } from "./layout/header.vue";
+export { default as Layout } from "./layout/layout.vue";
+export { default as Navigation } from "./layout/navigation.vue";
+export { default as Sidebar } from "./layout/sidebar.vue";
+export { default as Tabbar } from "./layout/tabbar.vue";
+export { default as Widget } from "./layout/widget.vue";
+export { default as GlobalShortcutKeys } from "./shortcut-keys/global.vue";
+export { default as SwitchItem } from "./switch-item.vue";
+export { default as BuiltinTheme } from "./theme/builtin.vue";
+export { default as ColorMode } from "./theme/color-mode.vue";
+export { default as Radius } from "./theme/radius.vue";
+export { default as Theme } from "./theme/theme.vue";

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/input-item.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { SelectOption } from '/@/vben/types';
+import type { SelectOption } from "/@/vben/types";
 
-import { useSlots } from 'vue';
+import { useSlots } from "vue";
 
-import { CircleHelp } from '/@/vben/icons';
+import { CircleHelp } from "/@/vben/icons";
 
-import { Input, VbenTooltip } from '/@/vben//shadcn-ui';
+import { Input, VbenTooltip } from "/@/vben//shadcn-ui";
 
 defineOptions({
-  name: 'PreferenceSelectItem',
+  name: "PreferenceSelectItem",
 });
 
 withDefaults(
@@ -19,9 +19,9 @@ withDefaults(
   }>(),
   {
     disabled: false,
-    placeholder: '',
+    placeholder: "",
     items: () => [],
-  },
+  }
 );
 
 const inputValue = defineModel<string>();

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/layout/breadcrumb.vue

@@ -9,7 +9,7 @@ import SwitchItem from "../switch-item.vue";
 import ToggleItem from "../toggle-item.vue";
 
 defineOptions({
-  name: "PreferenceBreadcrumbConfig"
+  name: "PreferenceBreadcrumbConfig",
 });
 
 const props = defineProps<{ disabled?: boolean }>();
@@ -22,7 +22,7 @@ const breadcrumbHideOnlyOne = defineModel<boolean>("breadcrumbHideOnlyOne");
 
 const typeItems: SelectOption[] = [
   { label: $t("preferences.normal"), value: "normal" },
-  { label: $t("preferences.breadcrumb.background"), value: "background" }
+  { label: $t("preferences.breadcrumb.background"), value: "background" },
 ];
 
 const disableItem = computed(() => {

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/layout/content.vue

@@ -8,25 +8,25 @@ import { $t } from "/@/locales";
 import { ContentCompact, ContentWide } from "../../icons";
 
 defineOptions({
-  name: "PreferenceLayoutContent"
+  name: "PreferenceLayoutContent",
 });
 
 const modelValue = defineModel<string>({ default: "wide" });
 
 const components: Record<string, Component> = {
   compact: ContentCompact,
-  wide: ContentWide
+  wide: ContentWide,
 };
 
 const PRESET = computed(() => [
   {
     name: $t("preferences.wide"),
-    type: "wide"
+    type: "wide",
   },
   {
     name: $t("preferences.compact"),
-    type: "compact"
-  }
+    type: "compact",
+  },
 ]);
 
 function activeClass(theme: string): string[] {

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/layout/header.vue

@@ -1,74 +1,61 @@
 <script setup lang="ts">
-import type {
-  LayoutHeaderMenuAlignType,
-  LayoutHeaderModeType,
-  SelectOption,
-} from '/@/vben/types';
+import type { LayoutHeaderMenuAlignType, LayoutHeaderModeType, SelectOption } from "/@/vben/types";
 
-import { $t } from '/@/locales';
+import { $t } from "/@/locales";
 
-import SelectItem from '../select-item.vue';
-import SwitchItem from '../switch-item.vue';
-import ToggleItem from '../toggle-item.vue';
+import SelectItem from "../select-item.vue";
+import SwitchItem from "../switch-item.vue";
+import ToggleItem from "../toggle-item.vue";
 
 defineProps<{ disabled: boolean }>();
 
-const headerEnable = defineModel<boolean>('headerEnable');
-const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
-const headerMenuAlign =
-  defineModel<LayoutHeaderMenuAlignType>('headerMenuAlign');
+const headerEnable = defineModel<boolean>("headerEnable");
+const headerMode = defineModel<LayoutHeaderModeType>("headerMode");
+const headerMenuAlign = defineModel<LayoutHeaderMenuAlignType>("headerMenuAlign");
 
 const localeItems: SelectOption[] = [
   {
-    label: $t('preferences.header.modeStatic'),
-    value: 'static',
+    label: $t("preferences.header.modeStatic"),
+    value: "static",
   },
   {
-    label: $t('preferences.header.modeFixed'),
-    value: 'fixed',
+    label: $t("preferences.header.modeFixed"),
+    value: "fixed",
   },
   {
-    label: $t('preferences.header.modeAuto'),
-    value: 'auto',
+    label: $t("preferences.header.modeAuto"),
+    value: "auto",
   },
   {
-    label: $t('preferences.header.modeAutoScroll'),
-    value: 'auto-scroll',
+    label: $t("preferences.header.modeAutoScroll"),
+    value: "auto-scroll",
   },
 ];
 
 const headerMenuAlignItems: SelectOption[] = [
   {
-    label: $t('preferences.header.menuAlignStart'),
-    value: 'start',
+    label: $t("preferences.header.menuAlignStart"),
+    value: "start",
   },
   {
-    label: $t('preferences.header.menuAlignCenter'),
-    value: 'center',
+    label: $t("preferences.header.menuAlignCenter"),
+    value: "center",
   },
   {
-    label: $t('preferences.header.menuAlignEnd'),
-    value: 'end',
+    label: $t("preferences.header.menuAlignEnd"),
+    value: "end",
   },
 ];
 </script>
 
 <template>
   <SwitchItem v-model="headerEnable" :disabled="disabled">
-    {{ $t('preferences.header.visible') }}
+    {{ $t("preferences.header.visible") }}
   </SwitchItem>
-  <SelectItem
-    v-model="headerMode"
-    :disabled="!headerEnable"
-    :items="localeItems"
-  >
-    {{ $t('preferences.mode') }}
+  <SelectItem v-model="headerMode" :disabled="!headerEnable" :items="localeItems">
+    {{ $t("preferences.mode") }}
   </SelectItem>
-  <ToggleItem
-    v-model="headerMenuAlign"
-    :disabled="!headerEnable"
-    :items="headerMenuAlignItems"
-  >
-    {{ $t('preferences.header.menuAlign') }}
+  <ToggleItem v-model="headerMenuAlign" :disabled="!headerEnable" :items="headerMenuAlignItems">
+    {{ $t("preferences.header.menuAlign") }}
   </ToggleItem>
 </template>

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/layout/layout.vue

@@ -1,107 +1,99 @@
 <script setup lang="ts">
-import type { Component } from 'vue';
+import type { Component } from "vue";
 
-import type { LayoutType } from '/@/vben/types';
+import type { LayoutType } from "/@/vben/types";
 
-import { computed } from 'vue';
+import { computed } from "vue";
 
-import { CircleHelp } from '/@/vben/icons';
-import { $t } from '/@/locales';
+import { CircleHelp } from "/@/vben/icons";
+import { $t } from "/@/locales";
 
-import { VbenTooltip } from '/@/vben//shadcn-ui';
+import { VbenTooltip } from "/@/vben//shadcn-ui";
 
-import {
-	FullContent,
-	HeaderMixedNav,
-	HeaderNav,
-	HeaderSidebarNav,
-	MixedNav,
-	SidebarMixedNav,
-	SidebarNav,
-} from '../../icons';
+import { FullContent, HeaderMixedNav, HeaderNav, HeaderSidebarNav, MixedNav, SidebarMixedNav, SidebarNav } from "../../icons";
 
 interface PresetItem {
-	name: string;
-	tip: string;
-	type: LayoutType;
+  name: string;
+  tip: string;
+  type: LayoutType;
 }
 
 defineOptions({
-	name: 'PreferenceLayout',
+  name: "PreferenceLayout",
 });
 
-const modelValue = defineModel<LayoutType>({ default: 'sidebar-nav' });
+const modelValue = defineModel<LayoutType>({ default: "sidebar-nav" });
 
 const components: Record<LayoutType, Component> = {
-	'full-content': FullContent,
-	'header-nav': HeaderNav,
-	'mixed-nav': MixedNav,
-	'sidebar-mixed-nav': SidebarMixedNav,
-	'sidebar-nav': SidebarNav,
-	'header-mixed-nav': HeaderMixedNav,
-	'header-sidebar-nav': HeaderSidebarNav,
+  "full-content": FullContent,
+  "header-nav": HeaderNav,
+  "mixed-nav": MixedNav,
+  "sidebar-mixed-nav": SidebarMixedNav,
+  "sidebar-nav": SidebarNav,
+  "header-mixed-nav": HeaderMixedNav,
+  "header-sidebar-nav": HeaderSidebarNav,
 };
 
 const PRESET = computed((): PresetItem[] => [
-	{
-		name: $t('preferences.vertical'),
-		tip: $t('preferences.verticalTip'),
-		type: 'sidebar-nav',
-	},
-	{
-		name: $t('preferences.twoColumn'),
-		tip: $t('preferences.twoColumnTip'),
-		type: 'sidebar-mixed-nav',
-	},
-	{
-		name: $t('preferences.horizontal'),
-		tip: $t('preferences.horizontalTip'),
-		type: 'header-nav',
-	},
-	{
-		name: $t('preferences.headerSidebarNav'),
-		tip: $t('preferences.headerSidebarNavTip'),
-		type: 'header-sidebar-nav',
-	},
-	{
-		name: $t('preferences.mixedMenu'),
-		tip: $t('preferences.mixedMenuTip'),
-		type: 'mixed-nav',
-	},
-	{
-		name: $t('preferences.headerTwoColumn'),
-		tip: $t('preferences.headerTwoColumnTip'),
-		type: 'header-mixed-nav',
-	},
-	{
-		name: $t('preferences.fullContent'),
-		tip: $t('preferences.fullContentTip'),
-		type: 'full-content',
-	},
+  {
+    name: $t("preferences.vertical"),
+    tip: $t("preferences.verticalTip"),
+    type: "sidebar-nav",
+  },
+  {
+    name: $t("preferences.twoColumn"),
+    tip: $t("preferences.twoColumnTip"),
+    type: "sidebar-mixed-nav",
+  },
+  {
+    name: $t("preferences.horizontal"),
+    tip: $t("preferences.horizontalTip"),
+    type: "header-nav",
+  },
+  {
+    name: $t("preferences.headerSidebarNav"),
+    tip: $t("preferences.headerSidebarNavTip"),
+    type: "header-sidebar-nav",
+  },
+  {
+    name: $t("preferences.mixedMenu"),
+    tip: $t("preferences.mixedMenuTip"),
+    type: "mixed-nav",
+  },
+  {
+    name: $t("preferences.headerTwoColumn"),
+    tip: $t("preferences.headerTwoColumnTip"),
+    type: "header-mixed-nav",
+  },
+  {
+    name: $t("preferences.fullContent"),
+    tip: $t("preferences.fullContentTip"),
+    type: "full-content",
+  },
 ]);
 
 function activeClass(theme: string): string[] {
-	return theme === modelValue.value ? ['outline-box-active'] : [];
+  return theme === modelValue.value ? ["outline-box-active"] : [];
 }
 </script>
 
 <template>
-	<div class="flex w-full flex-wrap gap-5">
-		<template v-for="theme in PRESET" :key="theme.name">
-			<div class="flex w-[100px] cursor-pointer flex-col" @click="modelValue = theme.type">
-				<div :class="activeClass(theme.type)" class="outline-box flex-center">
-					<component :is="components[theme.type]" />
-				</div>
-				<div class="text-muted-foreground flex-center hover:text-foreground mt-2 text-center text-xs">
-					{{ theme.name }}
-					<VbenTooltip v-if="theme.tip" side="bottom">
-						<template #trigger>
-							<CircleHelp class="ml-1 size-3 cursor-help" />
-						</template>
-						{{ theme.tip }}
-					</VbenTooltip>
-				</div>
-			</div>
-		</template>
-	</div>
+  <div class="flex w-full flex-wrap gap-5">
+    <template v-for="theme in PRESET" :key="theme.name">
+      <div class="flex w-[100px] cursor-pointer flex-col" @click="modelValue = theme.type">
+        <div :class="activeClass(theme.type)" class="outline-box flex-center">
+          <component :is="components[theme.type]" />
+        </div>
+        <div class="text-muted-foreground flex-center hover:text-foreground mt-2 text-center text-xs">
+          {{ theme.name }}
+          <VbenTooltip v-if="theme.tip" side="bottom">
+            <template #trigger>
+              <CircleHelp class="ml-1 size-3 cursor-help" />
+            </template>
+            {{ theme.tip }}
+          </VbenTooltip>
+        </div>
+      </div>
+    </template>
+  </div>
 </template>

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/layout/navigation.vue

@@ -1,45 +1,38 @@
 <script setup lang="ts">
-import type { SelectOption } from '/@/vben/types';
+import type { SelectOption } from "/@/vben/types";
 
-import { $t } from '/@/locales';
+import { $t } from "/@/locales";
 
-import SwitchItem from '../switch-item.vue';
-import ToggleItem from '../toggle-item.vue';
+import SwitchItem from "../switch-item.vue";
+import ToggleItem from "../toggle-item.vue";
 
 defineOptions({
-  name: 'PreferenceNavigationConfig',
+  name: "PreferenceNavigationConfig",
 });
 
 defineProps<{ disabled?: boolean; disabledNavigationSplit?: boolean }>();
 
-const navigationStyleType = defineModel<string>('navigationStyleType');
-const navigationSplit = defineModel<boolean>('navigationSplit');
-const navigationAccordion = defineModel<boolean>('navigationAccordion');
+const navigationStyleType = defineModel<string>("navigationStyleType");
+const navigationSplit = defineModel<boolean>("navigationSplit");
+const navigationAccordion = defineModel<boolean>("navigationAccordion");
 
 const stylesItems: SelectOption[] = [
-  { label: $t('preferences.rounded'), value: 'rounded' },
-  { label: $t('preferences.plain'), value: 'plain' },
+  { label: $t("preferences.rounded"), value: "rounded" },
+  { label: $t("preferences.plain"), value: "plain" },
 ];
 </script>
 
 <template>
-  <ToggleItem
-    v-model="navigationStyleType"
-    :disabled="disabled"
-    :items="stylesItems"
-  >
-    {{ $t('preferences.navigationMenu.style') }}
+  <ToggleItem v-model="navigationStyleType" :disabled="disabled" :items="stylesItems">
+    {{ $t("preferences.navigationMenu.style") }}
   </ToggleItem>
-  <SwitchItem
-    v-model="navigationSplit"
-    :disabled="disabledNavigationSplit || disabled"
-  >
-    {{ $t('preferences.navigationMenu.split') }}
+  <SwitchItem v-model="navigationSplit" :disabled="disabledNavigationSplit || disabled">
+    {{ $t("preferences.navigationMenu.split") }}
     <template #tip>
-      {{ $t('preferences.navigationMenu.splitTip') }}
+      {{ $t("preferences.navigationMenu.splitTip") }}
     </template>
   </SwitchItem>
   <SwitchItem v-model="navigationAccordion" :disabled="disabled">
-    {{ $t('preferences.navigationMenu.accordion') }}
+    {{ $t("preferences.navigationMenu.accordion") }}
   </SwitchItem>
 </template>

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/layout/sidebar.vue

@@ -1,65 +1,42 @@
 <script setup lang="ts">
-import type { LayoutType } from '/@/vben/types';
+import type { LayoutType } from "/@/vben/types";
 
-import { $t } from '/@/locales';
+import { $t } from "/@/locales";
 
-import NumberFieldItem from '../number-field-item.vue';
-import SwitchItem from '../switch-item.vue';
+import NumberFieldItem from "../number-field-item.vue";
+import SwitchItem from "../switch-item.vue";
 
 defineProps<{ currentLayout?: LayoutType; disabled: boolean }>();
 
-const sidebarEnable = defineModel<boolean>('sidebarEnable');
-const sidebarWidth = defineModel<number>('sidebarWidth');
-const sidebarCollapsedShowTitle = defineModel<boolean>(
-  'sidebarCollapsedShowTitle',
-);
-const sidebarAutoActivateChild = defineModel<boolean>(
-  'sidebarAutoActivateChild',
-);
-const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
-const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
+const sidebarEnable = defineModel<boolean>("sidebarEnable");
+const sidebarWidth = defineModel<number>("sidebarWidth");
+const sidebarCollapsedShowTitle = defineModel<boolean>("sidebarCollapsedShowTitle");
+const sidebarAutoActivateChild = defineModel<boolean>("sidebarAutoActivateChild");
+const sidebarCollapsed = defineModel<boolean>("sidebarCollapsed");
+const sidebarExpandOnHover = defineModel<boolean>("sidebarExpandOnHover");
 </script>
 
 <template>
   <SwitchItem v-model="sidebarEnable" :disabled="disabled">
-    {{ $t('preferences.sidebar.visible') }}
+    {{ $t("preferences.sidebar.visible") }}
   </SwitchItem>
   <SwitchItem v-model="sidebarCollapsed" :disabled="!sidebarEnable || disabled">
-    {{ $t('preferences.sidebar.collapsed') }}
+    {{ $t("preferences.sidebar.collapsed") }}
   </SwitchItem>
-  <SwitchItem
-    v-model="sidebarExpandOnHover"
-    :disabled="!sidebarEnable || disabled || !sidebarCollapsed"
-    :tip="$t('preferences.sidebar.expandOnHoverTip')"
-  >
-    {{ $t('preferences.sidebar.expandOnHover') }}
+  <SwitchItem v-model="sidebarExpandOnHover" :disabled="!sidebarEnable || disabled || !sidebarCollapsed" :tip="$t('preferences.sidebar.expandOnHoverTip')">
+    {{ $t("preferences.sidebar.expandOnHover") }}
   </SwitchItem>
-  <SwitchItem
-    v-model="sidebarCollapsedShowTitle"
-    :disabled="!sidebarEnable || disabled || !sidebarCollapsed"
-  >
-    {{ $t('preferences.sidebar.collapsedShowTitle') }}
+  <SwitchItem v-model="sidebarCollapsedShowTitle" :disabled="!sidebarEnable || disabled || !sidebarCollapsed">
+    {{ $t("preferences.sidebar.collapsedShowTitle") }}
   </SwitchItem>
   <SwitchItem
     v-model="sidebarAutoActivateChild"
-    :disabled="
-      !sidebarEnable ||
-      !['sidebar-mixed-nav', 'mixed-nav', 'header-mixed-nav'].includes(
-        currentLayout as string,
-      ) ||
-      disabled
-    "
+    :disabled="!sidebarEnable || !['sidebar-mixed-nav', 'mixed-nav', 'header-mixed-nav'].includes(currentLayout as string) || disabled"
     :tip="$t('preferences.sidebar.autoActivateChildTip')"
   >
-    {{ $t('preferences.sidebar.autoActivateChild') }}
+    {{ $t("preferences.sidebar.autoActivateChild") }}
   </SwitchItem>
-  <NumberFieldItem
-    v-model="sidebarWidth"
-    :disabled="!sidebarEnable || disabled"
-    :max="320"
-    :min="160"
-    :step="10"
-  >
-    {{ $t('preferences.sidebar.width') }}
+  <NumberFieldItem v-model="sidebarWidth" :disabled="!sidebarEnable || disabled" :max="320" :min="160" :step="10">
+    {{ $t("preferences.sidebar.width") }}
   </NumberFieldItem>
 </template>

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/layout/tabbar.vue

@@ -1,94 +1,81 @@
 <script setup lang="ts">
-import type { SelectOption } from '/@/vben/types';
+import type { SelectOption } from "/@/vben/types";
 
-import { computed } from 'vue';
+import { computed } from "vue";
 
-import { $t } from '/@/locales';
+import { $t } from "/@/locales";
 
-import NumberFieldItem from '../number-field-item.vue';
-import SelectItem from '../select-item.vue';
-import SwitchItem from '../switch-item.vue';
+import NumberFieldItem from "../number-field-item.vue";
+import SelectItem from "../select-item.vue";
+import SwitchItem from "../switch-item.vue";
 
 defineOptions({
-  name: 'PreferenceTabsConfig',
+  name: "PreferenceTabsConfig",
 });
 
 defineProps<{ disabled?: boolean }>();
 
-const tabbarEnable = defineModel<boolean>('tabbarEnable');
-const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
-const tabbarPersist = defineModel<boolean>('tabbarPersist');
-const tabbarDraggable = defineModel<boolean>('tabbarDraggable');
-const tabbarWheelable = defineModel<boolean>('tabbarWheelable');
-const tabbarStyleType = defineModel<string>('tabbarStyleType');
-const tabbarShowMore = defineModel<boolean>('tabbarShowMore');
-const tabbarShowMaximize = defineModel<boolean>('tabbarShowMaximize');
-const tabbarMaxCount = defineModel<number>('tabbarMaxCount');
-const tabbarMiddleClickToClose = defineModel<boolean>(
-  'tabbarMiddleClickToClose',
-);
+const tabbarEnable = defineModel<boolean>("tabbarEnable");
+const tabbarShowIcon = defineModel<boolean>("tabbarShowIcon");
+const tabbarPersist = defineModel<boolean>("tabbarPersist");
+const tabbarDraggable = defineModel<boolean>("tabbarDraggable");
+const tabbarWheelable = defineModel<boolean>("tabbarWheelable");
+const tabbarStyleType = defineModel<string>("tabbarStyleType");
+const tabbarShowMore = defineModel<boolean>("tabbarShowMore");
+const tabbarShowMaximize = defineModel<boolean>("tabbarShowMaximize");
+const tabbarMaxCount = defineModel<number>("tabbarMaxCount");
+const tabbarMiddleClickToClose = defineModel<boolean>("tabbarMiddleClickToClose");
 
 const styleItems = computed((): SelectOption[] => [
   {
-    label: $t('preferences.tabbar.styleType.chrome'),
-    value: 'chrome',
+    label: $t("preferences.tabbar.styleType.chrome"),
+    value: "chrome",
   },
   {
-    label: $t('preferences.tabbar.styleType.plain'),
-    value: 'plain',
+    label: $t("preferences.tabbar.styleType.plain"),
+    value: "plain",
   },
   {
-    label: $t('preferences.tabbar.styleType.card'),
-    value: 'card',
+    label: $t("preferences.tabbar.styleType.card"),
+    value: "card",
   },
 
   {
-    label: $t('preferences.tabbar.styleType.brisk'),
-    value: 'brisk',
+    label: $t("preferences.tabbar.styleType.brisk"),
+    value: "brisk",
   },
 ]);
 </script>
 
 <template>
   <SwitchItem v-model="tabbarEnable" :disabled="disabled">
-    {{ $t('preferences.tabbar.enable') }}
+    {{ $t("preferences.tabbar.enable") }}
   </SwitchItem>
   <SwitchItem v-model="tabbarPersist" :disabled="!tabbarEnable">
-    {{ $t('preferences.tabbar.persist') }}
+    {{ $t("preferences.tabbar.persist") }}
   </SwitchItem>
-  <NumberFieldItem
-    v-model="tabbarMaxCount"
-    :disabled="!tabbarEnable"
-    :max="30"
-    :min="0"
-    :step="5"
-    :tip="$t('preferences.tabbar.maxCountTip')"
-  >
-    {{ $t('preferences.tabbar.maxCount') }}
+  <NumberFieldItem v-model="tabbarMaxCount" :disabled="!tabbarEnable" :max="30" :min="0" :step="5" :tip="$t('preferences.tabbar.maxCountTip')">
+    {{ $t("preferences.tabbar.maxCount") }}
   </NumberFieldItem>
   <SwitchItem v-model="tabbarDraggable" :disabled="!tabbarEnable">
-    {{ $t('preferences.tabbar.draggable') }}
+    {{ $t("preferences.tabbar.draggable") }}
   </SwitchItem>
-  <SwitchItem
-    v-model="tabbarWheelable"
-    :disabled="!tabbarEnable"
-    :tip="$t('preferences.tabbar.wheelableTip')"
-  >
-    {{ $t('preferences.tabbar.wheelable') }}
+  <SwitchItem v-model="tabbarWheelable" :disabled="!tabbarEnable" :tip="$t('preferences.tabbar.wheelableTip')">
+    {{ $t("preferences.tabbar.wheelable") }}
   </SwitchItem>
   <SwitchItem v-model="tabbarMiddleClickToClose" :disabled="!tabbarEnable">
-    {{ $t('preferences.tabbar.middleClickClose') }}
+    {{ $t("preferences.tabbar.middleClickClose") }}
   </SwitchItem>
   <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">
-    {{ $t('preferences.tabbar.icon') }}
+    {{ $t("preferences.tabbar.icon") }}
   </SwitchItem>
   <SwitchItem v-model="tabbarShowMore" :disabled="!tabbarEnable">
-    {{ $t('preferences.tabbar.showMore') }}
+    {{ $t("preferences.tabbar.showMore") }}
   </SwitchItem>
   <SwitchItem v-model="tabbarShowMaximize" :disabled="!tabbarEnable">
-    {{ $t('preferences.tabbar.showMaximize') }}
+    {{ $t("preferences.tabbar.showMaximize") }}
   </SwitchItem>
   <SelectItem v-model="tabbarStyleType" :items="styleItems">
-    {{ $t('preferences.tabbar.styleType.title') }}
+    {{ $t("preferences.tabbar.styleType.title") }}
   </SelectItem>
 </template>

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/number-field-item.vue

@@ -1,21 +1,14 @@
 <script setup lang="ts">
-import type { SelectOption } from '/@/vben/types';
+import type { SelectOption } from "/@/vben/types";
 
-import { useSlots } from 'vue';
+import { useSlots } from "vue";
 
-import { CircleHelp } from '/@/vben/icons';
+import { CircleHelp } from "/@/vben/icons";
 
-import {
-  NumberField,
-  NumberFieldContent,
-  NumberFieldDecrement,
-  NumberFieldIncrement,
-  NumberFieldInput,
-  VbenTooltip,
-} from '/@/vben//shadcn-ui';
+import { NumberField, NumberFieldContent, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, VbenTooltip } from "/@/vben//shadcn-ui";
 
 defineOptions({
-  name: 'PreferenceSelectItem',
+  name: "PreferenceSelectItem",
 });
 
 withDefaults(
@@ -27,10 +20,10 @@ withDefaults(
   }>(),
   {
     disabled: false,
-    placeholder: '',
-    tip: '',
+    placeholder: "",
+    tip: "",
     items: () => [],
-  },
+  }
 );
 
 const inputValue = defineModel<number>();

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/select-item.vue

@@ -1,21 +1,14 @@
 <script setup lang="ts">
-import type { SelectOption } from '/@/vben/types';
+import type { SelectOption } from "/@/vben/types";
 
-import { useSlots } from 'vue';
+import { useSlots } from "vue";
 
-import { CircleHelp } from '/@/vben/icons';
+import { CircleHelp } from "/@/vben/icons";
 
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  VbenTooltip,
-} from '/@/vben//shadcn-ui';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, VbenTooltip } from "/@/vben//shadcn-ui";
 
 defineOptions({
-  name: 'PreferenceSelectItem',
+  name: "PreferenceSelectItem",
 });
 
 withDefaults(
@@ -26,9 +19,9 @@ withDefaults(
   }>(),
   {
     disabled: false,
-    placeholder: '',
+    placeholder: "",
     items: () => [],
-  },
+  }
 );
 
 const selectValue = defineModel<string>();

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/shortcut-keys/global.vue

@@ -1,42 +1,37 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from "vue";
 
-import { $t } from '/@/locales';
-import { isWindowsOs } from '/@/vben/utils';
+import { $t } from "/@/locales";
+import { isWindowsOs } from "/@/vben/utils";
 
-import SwitchItem from '../switch-item.vue';
+import SwitchItem from "../switch-item.vue";
 
 defineOptions({
-  name: 'PreferenceGeneralConfig',
+  name: "PreferenceGeneralConfig",
 });
 
-const shortcutKeysEnable = defineModel<boolean>('shortcutKeysEnable');
-const shortcutKeysGlobalSearch = defineModel<boolean>(
-  'shortcutKeysGlobalSearch',
-);
-const shortcutKeysLogout = defineModel<boolean>('shortcutKeysLogout');
+const shortcutKeysEnable = defineModel<boolean>("shortcutKeysEnable");
+const shortcutKeysGlobalSearch = defineModel<boolean>("shortcutKeysGlobalSearch");
+const shortcutKeysLogout = defineModel<boolean>("shortcutKeysLogout");
 // const shortcutKeysPreferences = defineModel<boolean>('shortcutKeysPreferences');
-const shortcutKeysLockScreen = defineModel<boolean>('shortcutKeysLockScreen');
+const shortcutKeysLockScreen = defineModel<boolean>("shortcutKeysLockScreen");
 
-const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
+const altView = computed(() => (isWindowsOs() ? "Alt" : "⌥"));
 </script>
 
 <template>
   <SwitchItem v-model="shortcutKeysEnable">
-    {{ $t('preferences.shortcutKeys.title') }}
+    {{ $t("preferences.shortcutKeys.title") }}
   </SwitchItem>
-  <SwitchItem
-    v-model="shortcutKeysGlobalSearch"
-    :disabled="!shortcutKeysEnable"
-  >
-    {{ $t('preferences.shortcutKeys.search') }}
+  <SwitchItem v-model="shortcutKeysGlobalSearch" :disabled="!shortcutKeysEnable">
+    {{ $t("preferences.shortcutKeys.search") }}
     <template #shortcut>
-      {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
+      {{ isWindowsOs() ? "Ctrl" : "⌘" }}
       <kbd> K </kbd>
     </template>
   </SwitchItem>
   <SwitchItem v-model="shortcutKeysLogout" :disabled="!shortcutKeysEnable">
-    {{ $t('preferences.shortcutKeys.logout') }}
+    {{ $t("preferences.shortcutKeys.logout") }}
     <template #shortcut> {{ altView }} Q </template>
   </SwitchItem>
   <!-- <SwitchItem v-model="shortcutKeysPreferences" :disabled="!shortcutKeysEnable">
@@ -44,7 +39,7 @@ const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
     <template #shortcut> {{ altView }} , </template>
   </SwitchItem> -->
   <SwitchItem v-model="shortcutKeysLockScreen" :disabled="!shortcutKeysEnable">
-    {{ $t('ui.widgets.lockScreen.title') }}
+    {{ $t("ui.widgets.lockScreen.title") }}
     <template #shortcut> {{ altView }} L </template>
   </SwitchItem>
 </template>

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/switch-item.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { useSlots } from 'vue';
+import { useSlots } from "vue";
 
-import { CircleHelp } from '/@/vben/icons';
+import { CircleHelp } from "/@/vben/icons";
 
-import { Switch, VbenTooltip } from '/@/vben//shadcn-ui';
+import { Switch, VbenTooltip } from "/@/vben//shadcn-ui";
 
 defineOptions({
-  name: 'PreferenceSwitchItem',
+  name: "PreferenceSwitchItem",
 });
 
 withDefaults(defineProps<{ disabled?: boolean; tip?: string }>(), {
   disabled: false,
-  tip: '',
+  tip: "",
 });
 
 const checked = defineModel<boolean>();

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/theme/builtin.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import type { BuiltinThemePreset } from '/@/vben/preferences';
-import type { BuiltinThemeType } from '/@/vben/types';
+import type { BuiltinThemePreset } from "/@/vben/preferences";
+import type { BuiltinThemeType } from "/@/vben/types";
 
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch } from "vue";
 
-import { UserRoundPen } from '/@/vben/icons';
-import { $t } from '/@/locales';
-import { BUILT_IN_THEME_PRESETS } from '/@/vben/preferences';
-import { convertToHsl, TinyColor } from '/@/vben/utils';
+import { UserRoundPen } from "/@/vben/icons";
+import { $t } from "/@/locales";
+import { BUILT_IN_THEME_PRESETS } from "/@/vben/preferences";
+import { convertToHsl, TinyColor } from "/@/vben/utils";
 
 defineOptions({
-  name: 'PreferenceBuiltinTheme',
+  name: "PreferenceBuiltinTheme",
 });
 
 const props = defineProps<{ isDark: boolean }>();
 
 const colorInput = ref();
-const modelValue = defineModel<BuiltinThemeType>({ default: 'default' });
-const themeColorPrimary = defineModel<string>('themeColorPrimary');
+const modelValue = defineModel<BuiltinThemeType>({ default: "default" });
+const themeColorPrimary = defineModel<string>("themeColorPrimary");
 
 const inputValue = computed(() => {
-  return new TinyColor(themeColorPrimary.value || '').toHexString();
+  return new TinyColor(themeColorPrimary.value || "").toHexString();
 });
 
 const builtinThemePresets = computed(() => {
@@ -29,51 +29,51 @@ const builtinThemePresets = computed(() => {
 
 function typeView(name: BuiltinThemeType) {
   switch (name) {
-    case 'custom': {
-      return $t('preferences.theme.builtin.custom');
+    case "custom": {
+      return $t("preferences.theme.builtin.custom");
     }
-    case 'deep-blue': {
-      return $t('preferences.theme.builtin.deepBlue');
+    case "deep-blue": {
+      return $t("preferences.theme.builtin.deepBlue");
     }
-    case 'deep-green': {
-      return $t('preferences.theme.builtin.deepGreen');
+    case "deep-green": {
+      return $t("preferences.theme.builtin.deepGreen");
     }
-    case 'default': {
-      return $t('preferences.theme.builtin.default');
+    case "default": {
+      return $t("preferences.theme.builtin.default");
     }
-    case 'gray': {
-      return $t('preferences.theme.builtin.gray');
+    case "gray": {
+      return $t("preferences.theme.builtin.gray");
     }
-    case 'green': {
-      return $t('preferences.theme.builtin.green');
+    case "green": {
+      return $t("preferences.theme.builtin.green");
     }
 
-    case 'neutral': {
-      return $t('preferences.theme.builtin.neutral');
+    case "neutral": {
+      return $t("preferences.theme.builtin.neutral");
     }
-    case 'orange': {
-      return $t('preferences.theme.builtin.orange');
+    case "orange": {
+      return $t("preferences.theme.builtin.orange");
     }
-    case 'pink': {
-      return $t('preferences.theme.builtin.pink');
+    case "pink": {
+      return $t("preferences.theme.builtin.pink");
     }
-    case 'rose': {
-      return $t('preferences.theme.builtin.rose');
+    case "rose": {
+      return $t("preferences.theme.builtin.rose");
     }
-    case 'sky-blue': {
-      return $t('preferences.theme.builtin.skyBlue');
+    case "sky-blue": {
+      return $t("preferences.theme.builtin.skyBlue");
     }
-    case 'slate': {
-      return $t('preferences.theme.builtin.slate');
+    case "slate": {
+      return $t("preferences.theme.builtin.slate");
     }
-    case 'violet': {
-      return $t('preferences.theme.builtin.violet');
+    case "violet": {
+      return $t("preferences.theme.builtin.violet");
     }
-    case 'yellow': {
-      return $t('preferences.theme.builtin.yellow');
+    case "yellow": {
+      return $t("preferences.theme.builtin.yellow");
     }
-    case 'zinc': {
-      return $t('preferences.theme.builtin.zinc');
+    case "zinc": {
+      return $t("preferences.theme.builtin.zinc");
     }
   }
 }
@@ -94,17 +94,13 @@ function selectColor() {
 watch(
   () => [modelValue.value, props.isDark] as [BuiltinThemeType, boolean],
   ([themeType, isDark]) => {
-    const theme = builtinThemePresets.value.find(
-      (item) => item.type === themeType,
-    );
+    const theme = builtinThemePresets.value.find(item => item.type === themeType);
     if (theme) {
-      const primaryColor = isDark
-        ? theme.darkPrimaryColor || theme.primaryColor
-        : theme.primaryColor;
+      const primaryColor = isDark ? theme.darkPrimaryColor || theme.primaryColor : theme.primaryColor;
 
       themeColorPrimary.value = primaryColor || theme.color;
     }
-  },
+  }
 );
 </script>
 
@@ -119,24 +115,13 @@ watch(
           class="outline-box flex-center group cursor-pointer"
         >
           <template v-if="theme.type !== 'custom'">
-            <div
-              :style="{ backgroundColor: theme.color }"
-              class="mx-10 my-2 size-5 rounded-md"
-            ></div>
+            <div :style="{ backgroundColor: theme.color }" class="mx-10 my-2 size-5 rounded-md"></div>
           </template>
           <template v-else>
             <div class="size-full px-10 py-2" @click.stop="selectColor">
               <div class="flex-center relative size-5 rounded-sm">
-                <UserRoundPen
-                  class="absolute z-10 size-5 opacity-60 group-hover:opacity-100"
-                />
-                <input
-                  ref="colorInput"
-                  :value="inputValue"
-                  class="absolute inset-0 opacity-0"
-                  type="color"
-                  @input="handleInputChange"
-                />
+                <UserRoundPen class="absolute z-10 size-5 opacity-60 group-hover:opacity-100" />
+                <input ref="colorInput" :value="inputValue" class="absolute inset-0 opacity-0" type="color" @input="handleInputChange" />
               </div>
             </div>
           </template>

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/theme/color-mode.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { $t } from '/@/locales';
+import { $t } from "/@/locales";
 
-import SwitchItem from '../switch-item.vue';
+import SwitchItem from "../switch-item.vue";
 
 defineOptions({
-  name: 'PreferenceColorMode',
+  name: "PreferenceColorMode",
 });
 
-const appColorWeakMode = defineModel<boolean>('appColorWeakMode', {
+const appColorWeakMode = defineModel<boolean>("appColorWeakMode", {
   default: false,
 });
 
-const appColorGrayMode = defineModel<boolean>('appColorGrayMode', {
+const appColorGrayMode = defineModel<boolean>("appColorGrayMode", {
   default: false,
 });
 </script>
 
 <template>
   <SwitchItem v-model="appColorWeakMode">
-    {{ $t('preferences.theme.weakMode') }}
+    {{ $t("preferences.theme.weakMode") }}
   </SwitchItem>
   <SwitchItem v-model="appColorGrayMode">
-    {{ $t('preferences.theme.grayMode') }}
+    {{ $t("preferences.theme.grayMode") }}
   </SwitchItem>
 </template>

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/theme/radius.vue

@@ -1,36 +1,27 @@
 <script setup lang="ts">
-import { ToggleGroup, ToggleGroupItem } from '/@/vben//shadcn-ui';
+import { ToggleGroup, ToggleGroupItem } from "/@/vben//shadcn-ui";
 
 defineOptions({
-  name: 'PreferenceColorMode',
+  name: "PreferenceColorMode",
 });
 
-const modelValue = defineModel<string | undefined>('themeRadius', {
-  default: '0.5',
+const modelValue = defineModel<string | undefined>("themeRadius", {
+  default: "0.5",
 });
 
 const items = [
-  { label: '0', value: '0' },
-  { label: '0.25', value: '0.25' },
-  { label: '0.5', value: '0.5' },
-  { label: '0.75', value: '0.75' },
-  { label: '1', value: '1' },
+  { label: "0", value: "0" },
+  { label: "0.25", value: "0.25" },
+  { label: "0.5", value: "0.5" },
+  { label: "0.75", value: "0.75" },
+  { label: "1", value: "1" },
 ];
 </script>
 
 <template>
-  <ToggleGroup
-    v-model="modelValue"
-    class="gap-2"
-    size="sm"
-    type="single"
-    variant="outline"
-  >
+  <ToggleGroup v-model="modelValue" class="gap-2" size="sm" type="single" variant="outline">
     <template v-for="item in items" :key="item.value">
-      <ToggleGroupItem
-        :value="item.value"
-        class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 w-16 rounded-sm"
-      >
+      <ToggleGroupItem :value="item.value" class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 w-16 rounded-sm">
         {{ item.label }}
       </ToggleGroupItem>
     </template>

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/theme/theme.vue

@@ -1,50 +1,50 @@
 <script setup lang="ts">
-import type { Component } from 'vue';
+import type { Component } from "vue";
 
-import type { ThemeModeType } from '/@/vben/types';
+import type { ThemeModeType } from "/@/vben/types";
 
-import { MoonStar, Sun, SunMoon } from '/@/vben/icons';
-import { $t } from '/@/locales';
+import { MoonStar, Sun, SunMoon } from "/@/vben/icons";
+import { $t } from "/@/locales";
 
-import SwitchItem from '../switch-item.vue';
+import SwitchItem from "../switch-item.vue";
 
 defineOptions({
-  name: 'PreferenceTheme',
+  name: "PreferenceTheme",
 });
 
-const modelValue = defineModel<string>({ default: 'auto' });
-const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
-const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
+const modelValue = defineModel<string>({ default: "auto" });
+const themeSemiDarkSidebar = defineModel<boolean>("themeSemiDarkSidebar");
+const themeSemiDarkHeader = defineModel<boolean>("themeSemiDarkHeader");
 
 const THEME_PRESET: Array<{ icon: Component; name: ThemeModeType }> = [
   {
     icon: Sun,
-    name: 'light',
+    name: "light",
   },
   {
     icon: MoonStar,
-    name: 'dark',
+    name: "dark",
   },
   {
     icon: SunMoon,
-    name: 'auto',
+    name: "auto",
   },
 ];
 
 function activeClass(theme: string): string[] {
-  return theme === modelValue.value ? ['outline-box-active'] : [];
+  return theme === modelValue.value ? ["outline-box-active"] : [];
 }
 
 function nameView(name: string) {
   switch (name) {
-    case 'auto': {
-      return $t('preferences.followSystem');
+    case "auto": {
+      return $t("preferences.followSystem");
     }
-    case 'dark': {
-      return $t('preferences.theme.dark');
+    case "dark": {
+      return $t("preferences.theme.dark");
     }
-    case 'light': {
-      return $t('preferences.theme.light');
+    case "light": {
+      return $t("preferences.theme.light");
     }
   }
 }
@@ -53,14 +53,8 @@ function nameView(name: string) {
 <template>
   <div class="flex w-full flex-wrap justify-between">
     <template v-for="theme in THEME_PRESET" :key="theme.name">
-      <div
-        class="flex cursor-pointer flex-col"
-        @click="modelValue = theme.name"
-      >
-        <div
-          :class="activeClass(theme.name)"
-          class="outline-box flex-center py-4"
-        >
+      <div class="flex cursor-pointer flex-col" @click="modelValue = theme.name">
+        <div :class="activeClass(theme.name)" class="outline-box flex-center py-4">
           <component :is="theme.icon" class="mx-9 size-5" />
         </div>
         <div class="text-muted-foreground mt-2 text-center text-xs">
@@ -69,15 +63,11 @@ function nameView(name: string) {
       </div>
     </template>
 
-    <SwitchItem
-      v-model="themeSemiDarkSidebar"
-      :disabled="modelValue === 'dark'"
-      class="mt-6"
-    >
-      {{ $t('preferences.theme.darkSidebar') }}
+    <SwitchItem v-model="themeSemiDarkSidebar" :disabled="modelValue === 'dark'" class="mt-6">
+      {{ $t("preferences.theme.darkSidebar") }}
     </SwitchItem>
     <SwitchItem v-model="themeSemiDarkHeader" :disabled="modelValue === 'dark'">
-      {{ $t('preferences.theme.darkHeader') }}
+      {{ $t("preferences.theme.darkHeader") }}
     </SwitchItem>
   </div>
 </template>

packages/ui/certd-client/src/vben/layouts/widgets/preferences/blocks/toggle-item.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { SelectOption } from '/@/vben/types';
+import type { SelectOption } from "/@/vben/types";
 
-import { ToggleGroup, ToggleGroupItem } from '/@/vben//shadcn-ui';
+import { ToggleGroup, ToggleGroupItem } from "/@/vben//shadcn-ui";
 
 defineOptions({
-  name: 'PreferenceToggleItem',
+  name: "PreferenceToggleItem",
 });
 
 withDefaults(defineProps<{ disabled?: boolean; items: SelectOption[] }>(), {
@@ -26,18 +26,9 @@ const modelValue = defineModel<string>();
     <span class="text-sm">
       <slot></slot>
     </span>
-    <ToggleGroup
-      v-model="modelValue"
-      class="gap-2"
-      size="sm"
-      type="single"
-      variant="outline"
-    >
+    <ToggleGroup v-model="modelValue" class="gap-2" size="sm" type="single" variant="outline">
       <template v-for="item in items" :key="item.value">
-        <ToggleGroupItem
-          :value="item.value"
-          class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 rounded-sm"
-        >
+        <ToggleGroupItem :value="item.value" class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 rounded-sm">
           {{ item.label }}
         </ToggleGroupItem>
       </template>

packages/ui/certd-client/src/vben/layouts/widgets/preferences/preferences-drawer.vue

@@ -9,7 +9,7 @@ import type {
   LayoutType,
   NavigationStyleType,
   PreferencesButtonPositionType,
-  ThemeModeType
+  ThemeModeType,
 } from "/@/vben/types";
 
 import type { SegmentedItem } from "/@/vben//shadcn-ui";
@@ -125,20 +125,20 @@ const tabs = computed((): SegmentedItem[] => {
   return [
     {
       label: $t("preferences.appearance"),
-      value: "appearance"
+      value: "appearance",
     },
     {
       label: $t("preferences.layout"),
-      value: "layout"
+      value: "layout",
     },
     {
       label: $t("preferences.shortcutKeys.title"),
-      value: "shortcutKey"
+      value: "shortcutKey",
     },
     {
       label: $t("preferences.general"),
-      value: "general"
-    }
+      value: "general",
+    },
   ];
 });
 

packages/ui/certd-client/src/vben/layouts/widgets/preferences/preferences.vue

@@ -12,7 +12,7 @@ import { VbenButton } from "/@/vben//shadcn-ui";
 import PreferencesDrawer from "./preferences-drawer.vue";
 
 const [Drawer, drawerApi] = useVbenDrawer({
-  connectedComponent: PreferencesDrawer
+  connectedComponent: PreferencesDrawer,
 });
 
 /**

packages/ui/certd-client/src/vben/layouts/widgets/preferences/use-open-preferences.ts

@@ -9,7 +9,7 @@ function useOpenPreferences() {
 
   return {
     handleOpenPreference,
-    openPreferences
+    openPreferences,
   };
 }
 

packages/ui/certd-client/src/vben/layouts/widgets/theme-toggle/index.ts

@@ -1 +1 @@
-export { default as ThemeToggle } from './theme-toggle.vue';
+export { default as ThemeToggle } from "./theme-toggle.vue";

packages/ui/certd-client/src/vben/layouts/widgets/user-dropdown/index.ts

@@ -1 +1 @@
-export { default as UserDropdown } from './user-dropdown.vue';
+export { default as UserDropdown } from "./user-dropdown.vue";