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');
 }