style(projects): format code

src/components/common/app-provider.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineComponent, createTextVNode } from 'vue';
+import { createTextVNode, defineComponent } from 'vue';
 import { useDialog, useLoadingBar, useMessage, useNotification } from 'naive-ui';
 
 defineOptions({
@@ -17,9 +17,8 @@ const ContextHolder = defineComponent({
     }
 
     register();
-  },
-  render() {
-    return createTextVNode();
+
+    return () => createTextVNode();
   }
 });
 </script>

src/components/common/dark-mode-container.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 defineOptions({ name: 'DarkModeContainer' });
 
+defineProps<Props>();
+
 interface Props {
   inverted?: boolean;
 }
-
-defineProps<Props>();
 </script>
 
 <template>

src/components/common/exception-base.vue

@@ -4,11 +4,14 @@ import { $t } from '@/locales';
 
 defineOptions({ name: 'ExceptionBase' });
 
+const props = defineProps<Props>();
+
 type ExceptionType = '403' | '404' | '500';
 
 interface Props {
   /**
-   * exception type
+   * Exception type
+   *
    * - 403: no permission
    * - 404: not found
    * - 500: service error
@@ -16,8 +19,6 @@ interface Props {
   type: ExceptionType;
 }
 
-const props = defineProps<Props>();
-
 const iconMap: Record<ExceptionType, string> = {
   '403': 'no-permission',
   '404': 'not-found',

src/components/common/full-screen.vue

@@ -5,17 +5,17 @@ defineOptions({
   name: 'FullScreen'
 });
 
+defineProps<Props>();
+
 interface Props {
   full?: boolean;
 }
-
-defineProps<Props>();
 </script>
 
 <template>
   <ButtonIcon :key="String(full)" :tooltip-content="full ? $t('icon.fullscreenExit') : $t('icon.fullscreen')">
-    <icon-gridicons-fullscreen-exit v-if="full" />
-    <icon-gridicons-fullscreen v-else />
+    <IconGridiconsFullscreenExit v-if="full" />
+    <IconGridiconsFullscreen v-else />
   </ButtonIcon>
 </template>
 

src/components/common/lang-switch.vue

@@ -6,31 +6,25 @@ defineOptions({
   name: 'LangSwitch'
 });
 
-interface Props {
-  /**
-   * current language
-   */
-  lang: App.I18n.LangType;
-  /**
-   * language options
-   */
-  langOptions: App.I18n.LangOption[];
-  /**
-   * show tooltip
-   */
-  showTooltip?: boolean;
-}
-
 const props = withDefaults(defineProps<Props>(), {
   showTooltip: true
 });
 
+const emit = defineEmits<Emits>();
+
+interface Props {
+  /** Current language */
+  lang: App.I18n.LangType;
+  /** Language options */
+  langOptions: App.I18n.LangOption[];
+  /** Show tooltip */
+  showTooltip?: boolean;
+}
+
 type Emits = {
   (e: 'changeLang', lang: App.I18n.LangType): void;
 };
 
-const emits = defineEmits<Emits>();
-
 const tooltipContent = computed(() => {
   if (!props.showTooltip) return '';
 
@@ -38,7 +32,7 @@ const tooltipContent = computed(() => {
 });
 
 function changeLang(lang: App.I18n.LangType) {
-  emits('changeLang', lang);
+  emit('changeLang', lang);
 }
 </script>
 

src/components/common/menu-toggler.vue

@@ -1,22 +1,18 @@
 <script lang="ts" setup>
-import { $t } from '@/locales';
 import { computed } from 'vue';
+import { $t } from '@/locales';
 
 defineOptions({ name: 'MenuToggler' });
 
+const props = defineProps<Props>();
+
 interface Props {
-  /**
-   * show collapsed icon
-   */
+  /** Show collapsed icon */
   collapsed?: boolean;
-  /**
-   * arrow style icon
-   */
+  /** Arrow style icon */
   arrowIcon?: boolean;
 }
 
-const props = defineProps<Props>();
-
 type NumberBool = 0 | 1;
 
 const icon = computed(() => {

src/components/common/pin-toggler.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { $t } from '@/locales';
 import { computed } from 'vue';
+import { $t } from '@/locales';
 
 defineOptions({ name: 'PinToggler' });
 
+const props = defineProps<Props>();
+
 interface Props {
   pin?: boolean;
 }
 
-const props = defineProps<Props>();
-
 const icon = computed(() => (props.pin ? 'mdi-pin-off' : 'mdi-pin'));
 </script>
 

src/components/common/reload-button.vue

@@ -5,16 +5,16 @@ defineOptions({
   name: 'ReloadButton'
 });
 
+defineProps<Props>();
+
 interface Props {
   loading?: boolean;
 }
-
-defineProps<Props>();
 </script>
 
 <template>
   <ButtonIcon :tooltip-content="$t('icon.reload')">
-    <icon-ant-design-reload-outlined :class="{ 'animate-spin animate-duration-750': loading }" />
+    <IconAntDesignReloadOutlined :class="{ 'animate-spin animate-duration-750': loading }" />
   </ButtonIcon>
 </template>
 

src/components/common/system-logo.vue

@@ -3,7 +3,7 @@ defineOptions({ name: 'SystemLogo' });
 </script>
 
 <template>
-  <icon-local-logo />
+  <IconLocalLogo />
 </template>
 
 <style scoped></style>

src/components/common/theme-schema-switch.vue

@@ -5,32 +5,26 @@ import { $t } from '@/locales';
 
 defineOptions({ name: 'ThemeSchemaSwitch' });
 
-interface Props {
-  /**
-   * theme schema
-   */
-  themeSchema: UnionKey.ThemeScheme;
-  /**
-   * show tooltip
-   */
-  showTooltip?: boolean;
-  /**
-   * tooltip placement
-   */
-  tooltipPlacement?: PopoverPlacement;
-}
-
 const props = withDefaults(defineProps<Props>(), {
   showTooltip: true,
   tooltipPlacement: 'bottom'
 });
 
+const emit = defineEmits<Emits>();
+
+interface Props {
+  /** Theme schema */
+  themeSchema: UnionKey.ThemeScheme;
+  /** Show tooltip */
+  showTooltip?: boolean;
+  /** Tooltip placement */
+  tooltipPlacement?: PopoverPlacement;
+}
+
 interface Emits {
   (e: 'switch'): void;
 }
 
-const emit = defineEmits<Emits>();
-
 function handleSwitch() {
   emit('switch');
 }

src/components/custom/better-scroll.vue

@@ -6,16 +6,17 @@ import type { Options } from '@better-scroll/core';
 
 defineOptions({ name: 'BetterScroll' });
 
+const props = defineProps<Props>();
+
 interface Props {
   /**
    * BetterScroll options
+   *
    * @link https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html
    */
   options: Options;
 }
 
-const props = defineProps<Props>();
-
 const bsWrap = ref<HTMLElement>();
 const bsContent = ref<HTMLElement>();
 const { width: wrapWidth } = useElementSize(bsWrap);

src/components/custom/button-icon.vue

@@ -8,25 +8,6 @@ defineOptions({
   inheritAttrs: false
 });
 
-interface Props {
-  /**
-   * button class
-   */
-  class?: string;
-  /**
-   * iconify icon name
-   */
-  icon?: string;
-  /**
-   * tooltip content
-   */
-  tooltipContent?: string;
-  /**
-   * tooltip placement
-   */
-  tooltipPlacement?: PopoverPlacement;
-}
-
 const props = withDefaults(defineProps<Props>(), {
   class: 'h-36px text-icon',
   icon: '',
@@ -34,6 +15,17 @@ const props = withDefaults(defineProps<Props>(), {
   tooltipPlacement: 'bottom'
 });
 
+interface Props {
+  /** Button class */
+  class?: string;
+  /** Iconify icon name */
+  icon?: string;
+  /** Tooltip content */
+  tooltipContent?: string;
+  /** Tooltip placement */
+  tooltipPlacement?: PopoverPlacement;
+}
+
 interface ButtonProps {
   className: string;
 }

src/components/custom/svg-icon.vue

@@ -4,24 +4,21 @@ import { Icon } from '@iconify/vue';
 
 defineOptions({ name: 'SvgIcon' });
 
+const props = defineProps<Props>();
+
 /**
- * props
- * - support iconify and local svg icon
- * - if icon and localIcon are passed at the same time, localIcon will be rendered first
+ * Props
+ *
+ * - Support iconify and local svg icon
+ * - If icon and localIcon are passed at the same time, localIcon will be rendered first
  */
 interface Props {
-  /**
-   * iconify icon name
-   */
+  /** Iconify icon name */
   icon?: string;
-  /**
-   * local svg icon name
-   */
+  /** Local svg icon name */
   localIcon?: string;
 }
 
-const props = defineProps<Props>();
-
 const attrs = useAttrs();
 
 const bindAttrs = computed<{ class: string; style: string }>(() => ({
@@ -39,9 +36,7 @@ const symbolId = computed(() => {
   return `#${prefix}-${icon}`;
 });
 
-/**
- * if localIcon is passed, render localIcon first
- */
+/** If localIcon is passed, render localIcon first */
 const renderLocalIcon = computed(() => props.localIcon || !props.icon);
 </script>
 

src/components/custom/wave-bg.vue

@@ -3,9 +3,7 @@ import { computed } from 'vue';
 import { getColorPalette } from '@sa/utils';
 
 interface Props {
-  /**
-   * theme color
-   */
+  /** Theme color */
   themeColor: string;
 }