style(projects): format code

src/layouts/modules/global-content/index.vue

@@ -7,17 +7,15 @@ defineOptions({
   name: 'GlobalContent'
 });
 
-interface Props {
-  /**
-   * show padding for content
-   */
-  showPadding?: boolean;
-}
-
 withDefaults(defineProps<Props>(), {
   showPadding: true
 });
 
+interface Props {
+  /** Show padding for content */
+  showPadding?: boolean;
+}
+
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();

src/layouts/modules/global-header/index.vue

@@ -7,37 +7,29 @@ import { useRouteStore } from '@/store/modules/route';
 import HorizontalMenu from '../global-menu/base-menu.vue';
 import GlobalLogo from '../global-logo/index.vue';
 import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
+import { useMixMenuContext } from '../../hooks/use-mix-menu';
 import ThemeButton from './components/theme-button.vue';
 import UserAvatar from './components/user-avatar.vue';
-import { useMixMenuContext } from '../../hooks/use-mix-menu';
 
+defineOptions({
+  name: 'GlobalHeader'
+});
+defineProps<Props>();
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
 const { isFullscreen, toggle } = useFullscreen();
 const { menus } = useMixMenuContext();
 
-defineOptions({
-  name: 'GlobalHeader'
-});
-
 interface Props {
-  /**
-   * whether to show the logo
-   */
+  /** Whether to show the logo */
   showLogo?: App.Global.HeaderProps['showLogo'];
-  /**
-   * whether to show the menu toggler
-   */
+  /** Whether to show the menu toggler */
   showMenuToggler?: App.Global.HeaderProps['showMenuToggler'];
-  /**
-   * whether to show the menu
-   */
+  /** Whether to show the menu */
   showMenu?: App.Global.HeaderProps['showMenu'];
 }
 
-defineProps<Props>();
-
 const headerMenus = computed(() => {
   if (themeStore.layout.mode === 'horizontal') {
     return routeStore.menus;

src/layouts/modules/global-logo/index.vue

@@ -5,16 +5,14 @@ defineOptions({
   name: 'GlobalLogo'
 });
 
-interface Props {
-  /**
-   * whether to show the title
-   */
-  showTitle?: boolean;
-}
-
 withDefaults(defineProps<Props>(), {
   showTitle: true
 });
+
+interface Props {
+  /** Whether to show the title */
+  showTitle?: boolean;
+}
 </script>
 
 <template>

src/layouts/modules/global-menu/base-menu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import type { MenuProps, MentionOption } from 'naive-ui';
+import type { MentionOption, MenuProps } from 'naive-ui';
 import { SimpleScrollbar } from '@sa/materials';
 import type { RouteKey } from '@elegant-router/types';
 import { useAppStore } from '@/store/modules/app';
@@ -13,16 +13,16 @@ defineOptions({
   name: 'BaseMenu'
 });
 
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'vertical'
+});
+
 interface Props {
   darkTheme?: boolean;
   mode?: MenuProps['mode'];
   menus: App.Global.Menu[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  mode: 'vertical'
-});
-
 const route = useRoute();
 const appStore = useAppStore();
 const themeStore = useThemeStore();

src/layouts/modules/global-menu/first-level-menu.vue

@@ -11,39 +11,31 @@ defineOptions({
   name: 'FirstLevelMenu'
 });
 
+defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
 interface Props {
   activeMenuKey?: string;
   inverted?: boolean;
 }
 
-defineProps<Props>();
-
 interface Emits {
   (e: 'select', menu: App.Global.Menu): boolean;
 }
 
-const emit = defineEmits<Emits>();
-
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
 
 interface MixMenuItemProps {
-  /**
-   *  menu item label
-   */
+  /** Menu item label */
   label: App.Global.Menu['label'];
-  /**
-   *  menu item icon
-   */
+  /** Menu item icon */
   icon: App.Global.Menu['icon'];
-  /**
-   * active menu item
-   */
+  /** Active menu item */
   active: boolean;
-  /**
-   * mini size
-   */
+  /** Mini size */
   isMini: boolean;
 }
 const [DefineMixMenuItem, MixMenuItem] = createReusableTemplate<MixMenuItemProps>();

src/layouts/modules/global-menu/horizontal-mix-menu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import FirstLevelMenu from './first-level-menu.vue';
-import { useMixMenuContext } from '../../hooks/use-mix-menu';
 import { useRouterPush } from '@/hooks/common/router';
+import { useMixMenuContext } from '../../hooks/use-mix-menu';
+import FirstLevelMenu from './first-level-menu.vue';
 
 defineOptions({
   name: 'HorizontalMixMenu'

src/layouts/modules/global-menu/vertical-mix-menu.vue

@@ -5,9 +5,9 @@ import { useAppStore } from '@/store/modules/app';
 import { useRouteStore } from '@/store/modules/route';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
+import { useMixMenu } from '../../hooks/use-mix-menu';
 import FirstLevelMenu from './first-level-menu.vue';
 import BaseMenu from './base-menu.vue';
-import { useMixMenu } from '../../hooks/use-mix-menu';
 
 defineOptions({
   name: 'VerticalMixMenu'

src/layouts/modules/global-tab/context-menu.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { VNode } from 'vue';
-import { $t } from '@/locales';
 import { useSvgIconRender } from '@sa/hooks';
+import { $t } from '@/locales';
 import { useTabStore } from '@/store/modules/tab';
 import SvgIcon from '@/components/custom/svg-icon.vue';
 
@@ -10,25 +10,21 @@ defineOptions({
   name: 'ContextMenu'
 });
 
+const props = withDefaults(defineProps<Props>(), {
+  excludeKeys: () => [],
+  disabledKeys: () => []
+});
+
 interface Props {
-  /**
-   * clientX
-   */
+  /** ClientX */
   x: number;
-  /**
-   * clientY
-   */
+  /** ClientY */
   y: number;
   tabId: string;
   excludeKeys?: App.Global.DropdownKey[];
   disabledKeys?: App.Global.DropdownKey[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  excludeKeys: () => [],
-  disabledKeys: () => []
-});
-
 const visible = defineModel<boolean>('visible');
 
 const { removeTab, clearTabs, clearLeftTabs, clearRightTabs } = useTabStore();

src/layouts/modules/global-tab/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch, nextTick } from 'vue';
+import { nextTick, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useElementBounding } from '@vueuse/core';
 import { PageTab } from '@sa/materials';

src/layouts/modules/theme-drawer/components/layout-mode-card.vue

@@ -7,28 +7,22 @@ defineOptions({
   name: 'LayoutModeCard'
 });
 
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
 interface Props {
-  /**
-   * layout mode
-   */
+  /** Layout mode */
   mode: UnionKey.ThemeLayoutMode;
-  /**
-   * disabled
-   */
+  /** Disabled */
   disabled?: boolean;
 }
 
-const props = defineProps<Props>();
-
 interface Emits {
-  /**
-   * layout mode change
-   */
+  /** Layout mode change */
   (e: 'update:mode', mode: UnionKey.ThemeLayoutMode): void;
 }
 
-const emit = defineEmits<Emits>();
-
 type LayoutConfig = Record<
   UnionKey.ThemeLayoutMode,
   {

src/layouts/modules/theme-drawer/components/setting-item.vue

@@ -3,14 +3,12 @@ defineOptions({
   name: 'SettingItem'
 });
 
+defineProps<Props>();
+
 interface Props {
-  /**
-   * label
-   */
+  /** Label */
   label: string;
 }
-
-defineProps<Props>();
 </script>
 
 <template>

src/layouts/modules/theme-drawer/modules/config-operation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import Clipboard from 'clipboard';
 import { $t } from '@/locales';
 import { useThemeStore } from '@/store/modules/theme';

src/layouts/modules/theme-drawer/modules/page-fun.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { $t } from '@/locales';
 import { useThemeStore } from '@/store/modules/theme';
-import { themeScrollModeOptions, themePageAnimationModeOptions, themeTabModeOptions } from '@/constants/app';
+import { themePageAnimationModeOptions, themeScrollModeOptions, themeTabModeOptions } from '@/constants/app';
 import SettingItem from '../components/setting-item.vue';
 
 defineOptions({