style(projects): format code

2023-12-14 21:45:29 +08:00 · 2023-12-14 21:45:29 +08:00 · a748166399
commit a748166399
parent a176dc443e
127 changed files with 2472 additions and 3006 deletions
--- a/build/config/proxy.ts
+++ b/build/config/proxy.ts
@ -1,9 +1,10 @@
 import type { ProxyOptions } from 'vite';
-import { createServiceConfig, createProxyPattern } from '../../env.config';
+import { createProxyPattern, createServiceConfig } from '../../env.config';

 /**
- * set http proxy
- * @param env - the current env
+ * Set http proxy
+ *
+ * @param env - The current env
 */
 export function createViteProxy(env: Env.ImportMeta) {
  const isEnableHttpProxy = env.VITE_HTTP_PROXY === 'Y';
--- a/build/plugins/unocss.ts
+++ b/build/plugins/unocss.ts
@ -1,3 +1,4 @@
+import process from 'node:process';
 import path from 'node:path';
 import unocss from '@unocss/vite';
 import presetIcons from '@unocss/preset-icons';
@ -8,9 +9,7 @@ export function setupUnocss(viteEnv: Env.ImportMeta) {

  const localIconPath = path.join(process.cwd(), 'src/assets/svg-icon');

-  /**
-   * the name of the local icon collection
-   */
+  /** The name of the local icon collection */
  const collectionName = VITE_ICON_LOCAL_PREFIX.replace(`${VITE_ICON_PREFIX}-`, '');

  return unocss({
--- a/build/plugins/unplugin.ts
+++ b/build/plugins/unplugin.ts
@ -1,3 +1,4 @@
+import process from 'node:process';
 import path from 'node:path';
 import type { PluginOption } from 'vite';
 import Icons from 'unplugin-icons/vite';
@ -12,9 +13,7 @@ export function setupUnplugin(viteEnv: Env.ImportMeta) {

  const localIconPath = path.join(process.cwd(), 'src/assets/svg-icon');

-  /**
-   * the name of the local icon collection
-   */
+  /** The name of the local icon collection */
  const collectionName = VITE_ICON_LOCAL_PREFIX.replace(`${VITE_ICON_PREFIX}-`, '');

  const plugins: PluginOption[] = [
--- a/env.config.ts
+++ b/env.config.ts
@ -1,6 +1,7 @@
 /**
- * create service config by current env
- * @param env the current env
+ * Create service config by current env
+ *
+ * @param env The current env
 */
 export function createServiceConfig(env: Env.ImportMeta) {
  const mockURL = 'https://mock.apifox.com/m1/3109515-0-default';
@ -32,8 +33,9 @@ export function createServiceConfig(env: Env.ImportMeta) {
 }

 /**
- * get proxy pattern of service url
- * @param key if not set, will use the default key
+ * Get proxy pattern of service url
+ *
+ * @param key If not set, will use the default key
 */
 export function createProxyPattern(key?: App.Service.OtherBaseURLKey) {
  if (!key) {
--- a/package.json
+++ b/package.json
@ -1,26 +1,26 @@
 {
  "name": "soybean-admin",
+  "type": "module",
  "version": "1.0.0",
+  "packageManager": "pnpm@8.10.5",
  "description": "A fresh and elegant admin template, based on Vue3、Vite3、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite3、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
  "author": {
    "name": "Soybean",
    "email": "soybeanjs@outlook.com",
    "url": "https://github.com/soybeanjs"
  },
-  "type": "module",
-  "packageManager": "pnpm@8.10.5",
  "scripts": {
-    "dev": "vite",
    "build": "run-s typecheck build-only",
-    "preview": "vite preview",
    "build-only": "vite build",
-    "typecheck": "vue-tsc --noEmit --skipLibCheck",
-    "lint": "eslint . --fix",
-    "format": "sa prettier-write",
-    "commit": "sa git-commit",
    "cleanup": "sa cleanup",
-    "update-pkg": "sa update-pkg",
-    "prepare": "simple-git-hooks"
+    "commit": "sa git-commit",
+    "dev": "vite",
+    "format": "sa prettier-write",
+    "lint": "eslint . --fix",
+    "prepare": "simple-git-hooks",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit --skipLibCheck",
+    "update-pkg": "sa update-pkg"
  },
  "dependencies": {
    "@better-scroll/core": "2.5.1",
@ -30,45 +30,48 @@
    "@sa/materials": "workspace:*",
    "@sa/request": "workspace:*",
    "@sa/utils": "workspace:*",
-    "@vueuse/core": "10.6.1",
+    "@vueuse/core": "10.7.0",
    "clipboard": "2.0.11",
    "dayjs": "1.11.10",
    "lodash-es": "4.17.21",
    "naive-ui": "2.35.0",
    "nprogress": "0.2.0",
    "pinia": "2.1.7",
-    "vue": "3.3.8",
-    "vue-i18n": "9.7.0",
+    "vue": "3.3.11",
+    "vue-i18n": "9.8.0",
    "vue-router": "4.2.5"
  },
  "devDependencies": {
    "@elegant-router/vue": "0.3.1",
-    "@iconify/json": "2.2.143",
+    "@iconify/json": "2.2.157",
    "@sa/scripts": "workspace:*",
    "@sa/uno-preset": "workspace:*",
-    "@soybeanjs/eslint-config": "^1.1.2",
-    "@types/lodash-es": "4.17.11",
-    "@types/node": "20.9.1",
+    "@soybeanjs/eslint-config": "1.1.3",
+    "@types/lodash-es": "4.17.12",
+    "@types/node": "20.10.4",
    "@types/nprogress": "0.2.3",
-    "@unocss/preset-icons": "0.57.5",
-    "@unocss/preset-uno": "0.57.5",
-    "@unocss/transformer-directives": "0.57.5",
-    "@unocss/transformer-variant-group": "0.57.5",
-    "@unocss/vite": "0.57.5",
-    "@vitejs/plugin-vue": "4.5.0",
+    "@unocss/preset-icons": "0.58.0",
+    "@unocss/preset-uno": "0.58.0",
+    "@unocss/transformer-directives": "0.58.0",
+    "@unocss/transformer-variant-group": "0.58.0",
+    "@unocss/vite": "0.58.0",
+    "@vitejs/plugin-vue": "4.5.2",
    "@vitejs/plugin-vue-jsx": "3.1.0",
    "cross-env": "7.0.3",
+    "eslint": "8.55.0",
+    "eslint-plugin-vue": "9.19.2",
    "npm-run-all": "4.1.5",
    "sass": "1.69.5",
    "simple-git-hooks": "2.9.0",
-    "typescript": "5.2.2",
-    "unplugin-icons": "0.17.4",
-    "unplugin-vue-components": "0.25.2",
-    "vite": "5.0.0",
+    "typescript": "5.3.3",
+    "unplugin-icons": "0.18.1",
+    "unplugin-vue-components": "0.26.0",
+    "vite": "5.0.8",
    "vite-plugin-progress": "0.0.7",
    "vite-plugin-svg-icons": "2.0.1",
-    "vite-plugin-vue-devtools": "1.0.0-rc.5",
-    "vue-tsc": "1.8.22"
+    "vite-plugin-vue-devtools": "1.0.0-rc.8",
+    "vue-eslint-parser": "9.3.2",
+    "vue-tsc": "1.8.25"
  },
  "simple-git-hooks": {
    "commit-msg": "pnpm sa git-commit-verify",
--- a/packages/color-palette/package.json
+++ b/packages/color-palette/package.json
@ -6,9 +6,7 @@
  },
  "typesVersions": {
    "*": {
-      "*": [
-        "./src/*"
-      ]
+      "*": ["./src/*"]
    }
  },
  "dependencies": {
--- a/packages/color-palette/src/index.ts
+++ b/packages/color-palette/src/index.ts
@ -1,12 +1,13 @@
 import { getColorPaletteFamily } from './palette';
 import { getColorName } from './name';
-import type { ColorPalette, ColorPaletteNumber, ColorPaletteItem, ColorPaletteFamily } from './type';
+import type { ColorPalette, ColorPaletteFamily, ColorPaletteItem, ColorPaletteNumber } from './type';
 import defaultPalettes from './json/palette.json';

 /**
- * get color palette by provided color and color name
- * @param color the provided color
- * @param colorName color name
+ * Get color palette by provided color and color name
+ *
+ * @param color The provided color
+ * @param colorName Color name
 */
 export function getColorPalette(color: string, colorName: string) {
  const colorPaletteFamily = getColorPaletteFamily(color, colorName);
@ -31,10 +32,11 @@ export function getColorPalette(color: string, colorName: string) {
 }

 /**
- * get color by color palette number
- * @param color color
- * @param num color palette number
- * @return color hexcode
+ * Get color by color palette number
+ *
+ * @param color Color
+ * @param num Color palette number
+ * @returns Color hexcode
 */
 export function getColorByColorPaletteNumber(color: string, num: ColorPaletteNumber) {
  const colorPalette = getColorPalette(color, color);
@ -46,9 +48,7 @@ export function getColorByColorPaletteNumber(color: string, num: ColorPaletteNum

 export default getColorPalette;

-/**
- * the builtin color palettes
- */
+/** The builtin color palettes */
 const colorPalettes = defaultPalettes as ColorPaletteFamily[];

 export { getColorName, colorPalettes };
--- a/packages/color-palette/src/name.ts
+++ b/packages/color-palette/src/name.ts
@ -1,4 +1,4 @@
-import { getHex, getRgb, getHsl } from './color';
+import { getHex, getHsl, getRgb } from './color';
 import colorNames from './json/color-name.json';

 export function getColorName(color: string) {
--- a/packages/color-palette/src/palette.ts
+++ b/packages/color-palette/src/palette.ts
@ -1,4 +1,4 @@
-import { isValidColor, getHsl, getDeltaE, transformHslToHex } from './color';
+import { getDeltaE, getHsl, isValidColor, transformHslToHex } from './color';
 import { getColorName } from './name';
 import type { ColorPaletteFamily, ColorPaletteFamilyWithNearestPalette } from './type';
 import defaultPalettes from './json/palette.json';
--- a/packages/color-palette/src/type.ts
+++ b/packages/color-palette/src/type.ts
@ -1,35 +1,24 @@
-/**
- * the color palette number
- */
+/** The color palette number */
 export type ColorPaletteNumber = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;

-/**
- * the color palette item
- */
+/** The color palette item */
 export type ColorPaletteItem = {
-  /**
-   * the color hexcode
-   */
+  /** The color hexcode */
  hexcode: string;
  /**
-   * the color number
+   * The color number
+   *
   * @link {@link ColorPaletteNumber}
   */
  number: ColorPaletteNumber;
-  /**
-   * the color name
-   */
+  /** The color name */
  name: string;
 };

 export type ColorPaletteFamily = {
-  /**
-   * the color palette family key
-   */
+  /** The color palette family key */
  key: string;
-  /**
-   * the color palette family's palettes
-   */
+  /** The color palette family's palettes */
  palettes: ColorPaletteItem[];
 };

@ -47,17 +36,14 @@ export type ColorPaletteFamilyWithNearestPalette = ColorPaletteFamily & {
 };

 export type ColorPalette = ColorPaletteFamily & {
-  /**
-   * the color map of the palette
-   */
+  /** The color map of the palette */
  colorMap: Map<ColorPaletteNumber, ColorPaletteItem>;
  /**
-   * the main color of the palette
-   * @description which number is 500
+   * The main color of the palette
+   *
+   * Which number is 500
   */
  main: ColorPaletteItemWithName;
-  /**
-   * the match color of the palette
-   */
+  /** The match color of the palette */
  match: ColorPaletteItemWithName;
 };
--- a/packages/docs/.vitepress/config.ts
+++ b/packages/docs/.vitepress/config.ts
@ -1,3 +1,4 @@
+import process from 'node:process';
 import path from 'node:path';
 import { defineConfig } from 'vitepress';

--- a/packages/docs/.vitepress/theme/style.css
+++ b/packages/docs/.vitepress/theme/style.css
@ -45,11 +45,7 @@
    var(--vp-c-brand-darker)
  );

-  --vp-home-hero-image-background-image: linear-gradient(
-    -45deg,
-    var(--vp-c-brand-lightest) 30%,
-    var(--vp-c-brand) 50%
-  );
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-lightest) 30%, var(--vp-c-brand) 50%);
  --vp-home-hero-image-filter: blur(40px);
 }

--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@ -2,11 +2,11 @@
  "name": "@sa/docs",
  "version": "1.0.0",
  "scripts": {
-    "dev": "vitepress dev",
    "build": "vitepress build",
+    "dev": "vitepress dev",
    "serve": "vitepress serve"
  },
  "devDependencies": {
-    "vitepress": "1.0.0-rc.27"
+    "vitepress": "1.0.0-rc.31"
  }
 }
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@ -6,9 +6,7 @@
  },
  "typesVersions": {
    "*": {
-      "*": [
-        "./src/*"
-      ]
+      "*": ["./src/*"]
    }
  }
 }
--- a/packages/hooks/src/use-boolean.ts
+++ b/packages/hooks/src/use-boolean.ts
@ -1,8 +1,9 @@
 import { ref } from 'vue';

 /**
- * boolean
- * @param initValue init value
+ * Boolean
+ *
+ * @param initValue Init value
 */
 export default function useBoolean(initValue = false) {
  const bool = ref(initValue);
--- a/packages/hooks/src/use-context.ts
+++ b/packages/hooks/src/use-context.ts
@ -2,61 +2,60 @@ import { inject, provide } from 'vue';
 import type { InjectionKey } from 'vue';

 /**
- * use context
- * @param contextName context name
- * @param fn context function
+ * Use context
+ *
 * @example
- * ```ts
- * // there are three vue files: A.vue, B.vue, C.vue, and A.vue is the parent component of B.vue and C.vue
+ *   ```ts
+ *   // there are three vue files: A.vue, B.vue, C.vue, and A.vue is the parent component of B.vue and C.vue
 *
- * // context.ts
- * import { ref } from 'vue';
- * import { useContext } from '@sa/hooks';
+ *   // context.ts
+ *   import { ref } from 'vue';
+ *   import { useContext } from '@sa/hooks';
 *
- * export const { setupStore, useStore } = useContext('demo', () => {
- *   const count = ref(0);
+ *   export const { setupStore, useStore } = useContext('demo', () => {
+ *     const count = ref(0);
 *
- *   function increment() {
- *     count.value++;
- *   }
+ *     function increment() {
+ *       count.value++;
+ *     }
 *
- *   function decrement() {
- *     count.value--;
- *   }
+ *     function decrement() {
+ *       count.value--;
+ *     }
 *
- *   return {
- *     count,
- *     increment,
- *     decrement
- *   };
- * })
- * ```
+ *     return {
+ *       count,
+ *       increment,
+ *       decrement
+ *     };
+ *   })
+ *   ``` // A.vue
+ *   ```vue
+ *   <template>
+ *     <div>A</div>
+ *   </template>
+ *   <script setup lang="ts">
+ *   import { setupStore } from './context';
 *
- * // A.vue
- * ```vue
- * <template>
- *   <div>A</div>
- * </template>
- * <script setup lang="ts">
- * import { setupStore } from './context';
+ *   setupStore();
+ *   // const { increment } = setupStore(); // also can control the store in the parent component
+ *   </script>
+ *   ``` // B.vue
+ *   ```vue
+ *   <template>
+ *    <div>B</div>
+ *   </template>
+ *   <script setup lang="ts">
+ *   import { useStore } from './context';
 *
- * setupStore();
- * // const { increment } = setupStore(); // also can control the store in the parent component
- * </script>
- * ```
- * // B.vue
- * ```vue
- * <template>
- *  <div>B</div>
- * </template>
- * <script setup lang="ts">
- * import { useStore } from './context';
+ *   const { count, increment } = useStore();
+ *   </script>
+ *   ```;
 *
- * const { count, increment } = useStore();
- * </script>
- * ```
+ *   // C.vue is same as B.vue
 *
- * // C.vue is same as B.vue
+ * @param contextName Context name
+ * @param fn Context function
 */
 export default function useContext<T extends (...args: any[]) => any>(contextName: string, fn: T) {
  type Context = ReturnType<T>;
@ -69,20 +68,14 @@ export default function useContext<T extends (...args: any[]) => any>(contextNam
  }

  return {
-    /**
-     * setup store in the parent component
-     */
+    /** Setup store in the parent component */
    setupStore,
-    /**
-     * use store in the child component
-     */
+    /** Use store in the child component */
    useStore
  };
 }

-/**
- * create context
- */
+/** Create context */
 function createContext<T>(contextName: string) {
  const injectKey: InjectionKey<T> = Symbol(contextName);

--- a/packages/hooks/src/use-loading.ts
+++ b/packages/hooks/src/use-loading.ts
@ -1,8 +1,9 @@
 import useBoolean from './use-boolean';

 /**
- * loading
- * @param initValue init value
+ * Loading
+ *
+ * @param initValue Init value
 */
 export default function useLoading(initValue = false) {
  const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(initValue);
--- a/packages/hooks/src/use-svg-icon-render.ts
+++ b/packages/hooks/src/use-svg-icon-render.ts
@ -2,33 +2,27 @@ import { h } from 'vue';
 import type { Component } from 'vue';

 /**
- * svg icon render hook
- * @param SvgIcon svg icon component
+ * Svg icon render hook
+ *
+ * @param SvgIcon Svg icon component
 */
 export default function useSvgIconRender(SvgIcon: Component) {
  interface IconConfig {
-    /**
-     * iconify icon name
-     */
+    /** Iconify icon name */
    icon?: string;
-    /**
-     * local icon name
-     */
+    /** Local icon name */
    localIcon?: string;
-    /**
-     * icon color
-     */
+    /** Icon color */
    color?: string;
-    /**
-     * icon size
-     */
+    /** Icon size */
    fontSize?: number;
  }

  type IconStyle = Partial<Pick<CSSStyleDeclaration, 'color' | 'fontSize'>>;

  /**
-   * svg icon VNode
+   * Svg icon VNode
+   *
   * @param config
   */
  const SvgIconVNode = (config: IconConfig) => {
--- a/packages/hooks/tsconfig.json
+++ b/packages/hooks/tsconfig.json
@ -1,19 +1,19 @@
 {
  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
    "baseUrl": ".",
    "module": "ESNext",
-    "target": "ESNext",
-    "lib": ["DOM", "ESNext"],
-    "strict": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve",
    "moduleResolution": "node",
    "resolveJsonModule": true,
-    "noUnusedLocals": true,
+    "types": ["node"],
+    "strict": true,
    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
-    "types": ["node"]
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
--- a/packages/materials/package.json
+++ b/packages/materials/package.json
@ -6,9 +6,7 @@
  },
  "typesVersions": {
    "*": {
-      "*": [
-        "./src/*"
-      ]
+      "*": ["./src/*"]
    }
  },
  "dependencies": {
--- a/packages/materials/src/index.ts
+++ b/packages/materials/src/index.ts
@ -1,4 +1,4 @@
-import AdminLayout, { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX } from './libs/admin-layout';
+import AdminLayout, { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID } from './libs/admin-layout';
 import PageTab from './libs/page-tab';
 import SimpleScrollbar from './libs/simple-scrollbar';
 import ColorPicker from './libs/color-picker';
--- a/packages/materials/src/libs/admin-layout/index.module.css.d.ts
+++ b/packages/materials/src/libs/admin-layout/index.module.css.d.ts
@ -14,4 +14,5 @@ declare const styles: {
  readonly 'sider-padding-top': string;
  readonly 'sider-padding-bottom': string;
 };
-export = styles;
+
+export default styles;
--- a/packages/materials/src/libs/admin-layout/index.ts
+++ b/packages/materials/src/libs/admin-layout/index.ts
@ -1,5 +1,5 @@
 import AdminLayout from './index.vue';
-import { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX } from './shared';
+import { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID } from './shared';

 export default AdminLayout;
 export { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX };
--- a/packages/materials/src/libs/admin-layout/index.vue
+++ b/packages/materials/src/libs/admin-layout/index.vue
@ -1,129 +1,7 @@
-<template>
-  <div :class="['relative h-full', commonClass]" :style="cssVars">
-    <div
-      :id="isWrapperScroll ? scrollElId : undefined"
-      :class="['flex flex-col h-full', commonClass, scrollWrapperClass, { 'overflow-y-auto': isWrapperScroll }]"
-    >
-      <!-- Header -->
-      <template v-if="showHeader">
-        <header
-          v-show="!fullContent"
-          :class="[
-            style['layout-header'],
-            'flex-shrink-0',
-            commonClass,
-            headerClass,
-            headerLeftGapClass,
-            { 'absolute top-0 left-0 w-full': fixedHeaderAndTab }
-          ]"
-        >
-          <slot name="header"></slot>
-        </header>
-        <div
-          v-show="!fullContent && fixedHeaderAndTab"
-          :class="[style['layout-header-placement'], 'flex-shrink-0 overflow-hidden']"
-        ></div>
-      </template>
-
-      <!-- Tab -->
-      <template v-if="showTab">
-        <div
-          :class="[
-            style['layout-tab'],
-            'flex-shrink-0',
-            commonClass,
-            tabClass,
-            { 'top-0!': fullContent || !showHeader },
-            leftGapClass,
-            { 'absolute left-0 w-full': fixedHeaderAndTab }
-          ]"
-        >
-          <slot name="tab"></slot>
-        </div>
-        <div
-          v-show="fullContent || fixedHeaderAndTab"
-          :class="[style['layout-tab-placement'], 'flex-shrink-0 overflow-hidden']"
-        ></div>
-      </template>
-
-      <!-- Sider -->
-      <template v-if="showSider">
-        <aside
-          v-show="!fullContent"
-          :class="[
-            'absolute left-0 top-0 h-full',
-            commonClass,
-            siderClass,
-            siderPaddingClass,
-            siderCollapse ? style['layout-sider_collapsed'] : style['layout-sider']
-          ]"
-        >
-          <slot name="sider"></slot>
-        </aside>
-      </template>
-
-      <!-- Mobile Sider -->
-      <template v-if="showMobileSider">
-        <aside
-          :class="[
-            'absolute left-0 top-0 w-0 h-full bg-white',
-            commonClass,
-            mobileSiderClass,
-            style['layout-mobile-sider'],
-            siderCollapse ? 'overflow-hidden' : style['layout-sider']
-          ]"
-        >
-          <slot name="sider"></slot>
-        </aside>
-        <div
-          v-show="!siderCollapse"
-          :class="['absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,0.2)]', style['layout-mobile-sider-mask']]"
-          @click="handleClickMask"
-        ></div>
-      </template>
-
-      <!-- Main Content -->
-      <main
-        :id="isContentScroll ? scrollElId : undefined"
-        :class="[
-          'flex flex-col flex-grow',
-          commonClass,
-          contentClass,
-          leftGapClass,
-          { 'overflow-y-auto': isContentScroll }
-        ]"
-      >
-        <slot></slot>
-      </main>
-
-      <!-- Footer -->
-      <template v-if="showFooter">
-        <footer
-          v-show="!fullContent"
-          :class="[
-            style['layout-footer'],
-            'flex-shrink-0',
-            commonClass,
-            footerClass,
-            footerLeftGapClass,
-            { 'absolute left-0 bottom-0 w-full': fixedFooter }
-          ]"
-        >
-          <slot name="footer"></slot>
-        </footer>
-        <div
-          v-show="!fullContent && fixedFooter"
-          :class="[style['layout-footer-placement'], 'flex-shrink-0 overflow-hidden']"
-        ></div>
-      </template>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { AdminLayoutProps } from '../../types';
-import { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX, createLayoutCssVars } from './shared';
+import { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID, createLayoutCssVars } from './shared';
 import style from './index.module.css';

 defineOptions({
@ -150,31 +28,29 @@ const props = withDefaults(defineProps<AdminLayoutProps>(), {
  rightFooter: false
 });

+const emit = defineEmits<Emits>();
+
+const slots = defineSlots<Slots>();
+
 interface Emits {
-  /**
-   * update siderCollapse
-   */
+  /** Update siderCollapse */
  (e: 'update:siderCollapse', collapse: boolean): void;
 }

-const emit = defineEmits<Emits>();
-
 type SlotFn = (props?: Record<string, unknown>) => any;

 type Slots = {
-  /** main */
+  /** Main */
  default?: SlotFn;
-  /** header */
+  /** Header */
  header?: SlotFn;
-  /** tab */
+  /** Tab */
  tab?: SlotFn;
-  /** sider */
+  /** Sider */
  sider?: SlotFn;
-  /** footer */
+  /** Footer */
  footer?: SlotFn;
 };
-const slots = defineSlots<Slots>();
-
 const cssVars = computed(() => createLayoutCssVars(props));

 // config visible
@ -235,4 +111,126 @@ function handleClickMask() {
 }
 </script>

+<template>
+  <div class="relative h-full" :class="[commonClass]" :style="cssVars">
+    <div
+      :id="isWrapperScroll ? scrollElId : undefined"
+      class="flex flex-col h-full"
+      :class="[commonClass, scrollWrapperClass, { 'overflow-y-auto': isWrapperScroll }]"
+    >
+      <!-- Header -->
+      <template v-if="showHeader">
+        <header
+          v-show="!fullContent"
+          class="flex-shrink-0"
+          :class="[
+            style['layout-header'],
+            commonClass,
+            headerClass,
+            headerLeftGapClass,
+            { 'absolute top-0 left-0 w-full': fixedHeaderAndTab }
+          ]"
+        >
+          <slot name="header"></slot>
+        </header>
+        <div
+          v-show="!fullContent && fixedHeaderAndTab"
+          class="flex-shrink-0 overflow-hidden"
+          :class="[style['layout-header-placement']]"
+        ></div>
+      </template>
+
+      <!-- Tab -->
+      <template v-if="showTab">
+        <div
+          class="flex-shrink-0"
+          :class="[
+            style['layout-tab'],
+            commonClass,
+            tabClass,
+            { 'top-0!': fullContent || !showHeader },
+            leftGapClass,
+            { 'absolute left-0 w-full': fixedHeaderAndTab }
+          ]"
+        >
+          <slot name="tab"></slot>
+        </div>
+        <div
+          v-show="fullContent || fixedHeaderAndTab"
+          class="flex-shrink-0 overflow-hidden"
+          :class="[style['layout-tab-placement']]"
+        ></div>
+      </template>
+
+      <!-- Sider -->
+      <template v-if="showSider">
+        <aside
+          v-show="!fullContent"
+          class="absolute left-0 top-0 h-full"
+          :class="[
+            commonClass,
+            siderClass,
+            siderPaddingClass,
+            siderCollapse ? style['layout-sider_collapsed'] : style['layout-sider']
+          ]"
+        >
+          <slot name="sider"></slot>
+        </aside>
+      </template>
+
+      <!-- Mobile Sider -->
+      <template v-if="showMobileSider">
+        <aside
+          class="absolute left-0 top-0 w-0 h-full bg-white"
+          :class="[
+            commonClass,
+            mobileSiderClass,
+            style['layout-mobile-sider'],
+            siderCollapse ? 'overflow-hidden' : style['layout-sider']
+          ]"
+        >
+          <slot name="sider"></slot>
+        </aside>
+        <div
+          v-show="!siderCollapse"
+          class="absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,0.2)]"
+          :class="[style['layout-mobile-sider-mask']]"
+          @click="handleClickMask"
+        ></div>
+      </template>
+
+      <!-- Main Content -->
+      <main
+        :id="isContentScroll ? scrollElId : undefined"
+        class="flex flex-col flex-grow"
+        :class="[commonClass, contentClass, leftGapClass, { 'overflow-y-auto': isContentScroll }]"
+      >
+        <slot></slot>
+      </main>
+
+      <!-- Footer -->
+      <template v-if="showFooter">
+        <footer
+          v-show="!fullContent"
+          class="flex-shrink-0"
+          :class="[
+            style['layout-footer'],
+            commonClass,
+            footerClass,
+            footerLeftGapClass,
+            { 'absolute left-0 bottom-0 w-full': fixedFooter }
+          ]"
+        >
+          <slot name="footer"></slot>
+        </footer>
+        <div
+          v-show="!fullContent && fixedFooter"
+          class="flex-shrink-0 overflow-hidden"
+          :class="[style['layout-footer-placement']]"
+        ></div>
+      </template>
+    </div>
+  </div>
+</template>
+
 <style scoped></style>
--- a/packages/materials/src/libs/admin-layout/shared.ts
+++ b/packages/materials/src/libs/admin-layout/shared.ts
@ -1,18 +1,15 @@
-import type { AdminLayoutProps, LayoutCssVarsProps, LayoutCssVars } from '../../types';
+import type { AdminLayoutProps, LayoutCssVars, LayoutCssVarsProps } from '../../types';

-/**
- * the id of the scroll element of the layout
- */
+/** The id of the scroll element of the layout */
 export const LAYOUT_SCROLL_EL_ID = '__SCROLL_EL_ID__';

-/**
- * the max z-index of the layout
- */
+/** The max z-index of the layout */
 export const LAYOUT_MAX_Z_INDEX = 100;

 /**
- * create layout css vars by css vars props
- * @param props css vars props
+ * Create layout css vars by css vars props
+ *
+ * @param props Css vars props
 */
 function createLayoutCssVarsByCssVarsProps(props: LayoutCssVarsProps) {
  const cssVars: LayoutCssVars = {
@ -32,7 +29,8 @@ function createLayoutCssVarsByCssVarsProps(props: LayoutCssVarsProps) {
 }

 /**
- * create layout css vars
+ * Create layout css vars
+ *
 * @param props
 */
 export function createLayoutCssVars(props: AdminLayoutProps) {
--- a/packages/materials/src/libs/color-picker/index.vue
+++ b/packages/materials/src/libs/color-picker/index.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import ColorPicker from '@simonwep/pickr';
 import '@simonwep/pickr/dist/themes/nano.min.css';

@ -7,12 +7,6 @@ defineOptions({
  name: 'ColorPicker'
 });

-interface Props {
-  color: string;
-  palettes?: string[];
-  disabled?: boolean;
-}
-
 const props = withDefaults(defineProps<Props>(), {
  palettes: () => [
    '#3b82f6',
@ -35,12 +29,18 @@ const props = withDefaults(defineProps<Props>(), {
  ]
 });

+const emit = defineEmits<Emits>();
+
+interface Props {
+  color: string;
+  palettes?: string[];
+  disabled?: boolean;
+}
+
 interface Emits {
  (e: 'update:color', value: string): void;
 }

-const emit = defineEmits<Emits>();
-
 const domRef = ref<HTMLElement | null>(null);
 const instance = ref<ColorPicker | null>(null);

--- a/packages/materials/src/libs/page-tab/button-tab.vue
+++ b/packages/materials/src/libs/page-tab/button-tab.vue
@ -1,7 +1,43 @@
+<script setup lang="ts">
+import type { PageTabProps } from '../../types';
+import style from './index.module.css';
+
+defineOptions({
+  name: 'ButtonTab'
+});
+
+defineProps<PageTabProps>();
+
+defineSlots<Slots>();
+
+type SlotFn = (props?: Record<string, unknown>) => any;
+
+type Slots = {
+  /**
+   * Slot
+   *
+   * The center content of the tab
+   */
+  default?: SlotFn;
+  /**
+   * Slot
+   *
+   * The left content of the tab
+   */
+  prefix?: SlotFn;
+  /**
+   * Slot
+   *
+   * The right content of the tab
+   */
+  suffix?: SlotFn;
+};
+</script>
+
 <template>
  <div
+    class=":soy: relative inline-flex justify-center items-center gap-12px px-12px py-4px border-1px border-solid rounded-4px cursor-pointer whitespace-nowrap"
    :class="[
-      ':soy: relative inline-flex justify-center items-center gap-12px px-12px py-4px border-1px border-solid rounded-4px cursor-pointer whitespace-nowrap',
      style['button-tab'],
      { [style['button-tab_dark']]: darkMode },
      { [style['button-tab_active']]: active },
@ -14,36 +50,4 @@
  </div>
 </template>

-<script setup lang="ts">
-import style from './index.module.css';
-import type { PageTabProps } from '../../types';
-
-defineOptions({
-  name: 'ButtonTab'
-});
-
-defineProps<PageTabProps>();
-
-type SlotFn = (props?: Record<string, unknown>) => any;
-
-type Slots = {
-  /**
-   * slot
-   * @description the center content of the tab
-   */
-  default?: SlotFn;
-  /**
-   * slot
-   * @description the left content of the tab
-   */
-  prefix?: SlotFn;
-  /**
-   * slot
-   * @description the right content of the tab
-   */
-  suffix?: SlotFn;
-};
-defineSlots<Slots>();
-</script>
-
 <style scoped></style>
--- a/packages/materials/src/libs/page-tab/chrome-tab-bg.vue
+++ b/packages/materials/src/libs/page-tab/chrome-tab-bg.vue
@ -1,5 +1,11 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'ChromeTabBg'
+});
+</script>
+
 <template>
-  <svg style="width: 100%; height: 100%">
+  <svg class="wh-full">
    <defs>
      <symbol id="geometry-left" viewBox="0 0 214 36">
        <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"></path>
@ -22,10 +28,4 @@
  </svg>
 </template>

-<script setup lang="ts">
-defineOptions({
-  name: 'ChromeTabBg'
-});
-</script>
-
 <style scoped></style>
--- a/packages/materials/src/libs/page-tab/chrome-tab.vue
+++ b/packages/materials/src/libs/page-tab/chrome-tab.vue
@ -1,27 +1,7 @@
-<template>
-  <div
-    :class="[
-      ':soy: relative inline-flex justify-center items-center gap-16px -mr-18px px-24px py-6px cursor-pointer whitespace-nowrap',
-      style['chrome-tab'],
-      { [style['chrome-tab_dark']]: darkMode },
-      { [style['chrome-tab_active']]: active },
-      { [style['chrome-tab_active_dark']]: active && darkMode }
-    ]"
-  >
-    <div :class="[':soy: absolute left-0 top-0 -z-1 w-full h-full pointer-events-none', style['chrome-tab__bg']]">
-      <ChromeTabBg />
-    </div>
-    <slot name="prefix"></slot>
-    <slot></slot>
-    <slot name="suffix"></slot>
-    <div :class="[':soy: absolute right-7px w-1px h-16px bg-#1f2225', style['chrome-tab-divider']]"></div>
-  </div>
-</template>
-
 <script setup lang="ts">
+import type { PageTabProps } from '../../types';
 import ChromeTabBg from './chrome-tab-bg.vue';
 import style from './index.module.css';
-import type { PageTabProps } from '../../types';

 defineOptions({
  name: 'ChromeTab'
@ -29,27 +9,50 @@ defineOptions({

 defineProps<PageTabProps>();

+defineSlots<Slots>();
+
 type SlotFn = (props?: Record<string, unknown>) => any;

 type Slots = {
  /**
-   * slot
-   * @description the center content of the tab
+   * Slot
+   *
+   * The center content of the tab
   */
  default?: SlotFn;
  /**
-   * slot
-   * @description the left content of the tab
+   * Slot
+   *
+   * The left content of the tab
   */
  prefix?: SlotFn;
  /**
-   * slot
-   * @description the right content of the tab
+   * Slot
+   *
+   * The right content of the tab
   */
  suffix?: SlotFn;
 };
-
-defineSlots<Slots>();
 </script>

+<template>
+  <div
+    class=":soy: relative inline-flex justify-center items-center gap-16px -mr-18px px-24px py-6px cursor-pointer whitespace-nowrap"
+    :class="[
+      style['chrome-tab'],
+      { [style['chrome-tab_dark']]: darkMode },
+      { [style['chrome-tab_active']]: active },
+      { [style['chrome-tab_active_dark']]: active && darkMode }
+    ]"
+  >
+    <div class=":soy: absolute left-0 top-0 -z-1 w-full h-full pointer-events-none" :class="[style['chrome-tab__bg']]">
+      <ChromeTabBg />
+    </div>
+    <slot name="prefix"></slot>
+    <slot></slot>
+    <slot name="suffix"></slot>
+    <div class=":soy: absolute right-7px w-1px h-16px bg-#1f2225" :class="[style['chrome-tab-divider']]"></div>
+  </div>
+</template>
+
 <style scoped></style>
--- a/packages/materials/src/libs/page-tab/icon-close.vue
+++ b/packages/materials/src/libs/page-tab/icon-close.vue
@ -1,3 +1,19 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'IconClose'
+});
+
+const emit = defineEmits<Emits>();
+
+interface Emits {
+  (e: 'click'): void;
+}
+
+function handleClick() {
+  emit('click');
+}
+</script>
+
 <template>
  <div
    class=":soy: relative inline-flex justify-center items-center w-16px h-16px text-14px rd-50%"
@ -12,20 +28,4 @@
  </div>
 </template>

-<script setup lang="ts">
-defineOptions({
-  name: 'IconClose'
-});
-
-interface Emits {
-  (e: 'click'): void;
-}
-
-const emit = defineEmits<Emits>();
-
-function handleClick() {
-  emit('click');
-}
-</script>
-
 <style scoped></style>
--- a/packages/materials/src/libs/page-tab/index.module.css.d.ts
+++ b/packages/materials/src/libs/page-tab/index.module.css.d.ts
@ -11,4 +11,5 @@ declare const styles: {
  readonly 'chrome-tab_dark': string;
  readonly 'chrome-tab-divider': string;
 };
-export = styles;
+
+export default styles;
--- a/packages/materials/src/libs/page-tab/index.vue
+++ b/packages/materials/src/libs/page-tab/index.vue
@ -1,26 +1,12 @@
-<template>
-  <component :is="activeTabComponent.component" :class="activeTabComponent.class" :style="cssVars" v-bind="bindProps">
-    <template #prefix>
-      <slot name="prefix"></slot>
-    </template>
-    <slot></slot>
-    <template #suffix>
-      <slot name="suffix">
-        <SvgIconClose v-if="closable" :class="[style['icon_close']]" @click="handleClose" />
-      </slot>
-    </template>
-  </component>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
-import { createTabCssVars, ACTIVE_COLOR } from './shared';
+import type { PageTabMode, PageTabProps } from '../../types';
+import { ACTIVE_COLOR, createTabCssVars } from './shared';
 import ChromeTab from './chrome-tab.vue';
 import ButtonTab from './button-tab.vue';
 import SvgIconClose from './icon-close.vue';
 import style from './index.module.css';
-import type { PageTabProps, PageTabMode } from '../../types';

 defineOptions({
  name: 'PageTab'
@ -33,34 +19,37 @@ const props = withDefaults(defineProps<PageTabProps>(), {
  closable: true
 });

+const emit = defineEmits<Emits>();
+
+defineSlots<Slots>();
+
 interface Emits {
  (e: 'close'): void;
 }

-const emit = defineEmits<Emits>();
-
 type SlotFn = (props?: Record<string, unknown>) => any;

 type Slots = {
  /**
-   * slot
-   * @description the center content of the tab
+   * Slot
+   *
+   * The center content of the tab
   */
  default?: SlotFn;
  /**
-   * slot
-   * @description the left content of the tab
+   * Slot
+   *
+   * The left content of the tab
   */
  prefix?: SlotFn;
  /**
-   * slot
-   * @description the right content of the tab
+   * Slot
+   *
+   * The right content of the tab
   */
  suffix?: SlotFn;
 };

-defineSlots<Slots>();
-
 const activeTabComponent = computed(() => {
  const { mode, chromeClass, buttonClass } = props;

@ -91,4 +80,18 @@ function handleClose() {
 }
 </script>

+<template>
+  <component :is="activeTabComponent.component" :class="activeTabComponent.class" :style="cssVars" v-bind="bindProps">
+    <template #prefix>
+      <slot name="prefix"></slot>
+    </template>
+    <slot></slot>
+    <template #suffix>
+      <slot name="suffix">
+        <SvgIconClose v-if="closable" :class="[style['icon_close']]" @click="handleClose" />
+      </slot>
+    </template>
+  </component>
+</template>
+
 <style scoped></style>
--- a/packages/materials/src/libs/page-tab/shared.ts
+++ b/packages/materials/src/libs/page-tab/shared.ts
@ -1,9 +1,7 @@
 import { addColorAlpha, transformColorWithOpacity } from '@sa/utils';
-import type { PageTabCssVarsProps, PageTabCssVars } from '../../types';
+import type { PageTabCssVars, PageTabCssVarsProps } from '../../types';

-/**
- * the active color of the tab
- */
+/** The active color of the tab */
 export const ACTIVE_COLOR = '#1890ff';

 function createCssVars(props: PageTabCssVarsProps) {
--- a/packages/materials/src/types/index.ts
+++ b/packages/materials/src/types/index.ts
@ -1,146 +1,156 @@
-/**
- * header config
- */
+/** Header config */
 interface AdminLayoutHeaderConfig {
  /**
-   * whether header is visible
+   * Whether header is visible
+   *
   * @default true
   */
  headerVisible?: boolean;
  /**
-   * header class
+   * Header class
+   *
   * @default ''
   */
  headerClass?: string;
  /**
-   * header height
+   * Header height
+   *
   * @default 56px
   */
  headerHeight?: number;
 }

-/**
- * tab config
- */
+/** Tab config */
 interface AdminLayoutTabConfig {
  /**
-   * whether tab is visible
+   * Whether tab is visible
+   *
   * @default true
   */
  tabVisible?: boolean;
  /**
-   * tab class
+   * Tab class
+   *
   * @default ''
   */
  tabClass?: string;
  /**
-   * tab height
+   * Tab height
+   *
   * @default 48px
   */
  tabHeight?: number;
 }

-/**
- * sider config
- */
+/** Sider config */
 interface AdminLayoutSiderConfig {
  /**
-   * whether sider is visible
+   * Whether sider is visible
+   *
   * @default true
   */
  siderVisible?: boolean;
  /**
-   * sider class
+   * Sider class
+   *
   * @default ''
   */
  siderClass?: string;
  /**
-   * mobile sider class
+   * Mobile sider class
+   *
   * @default ''
   */
  mobileSiderClass?: string;
  /**
-   * sider collapse status
+   * Sider collapse status
+   *
   * @default false
   */
  siderCollapse?: boolean;
  /**
-   * sider width when collapse is false
+   * Sider width when collapse is false
+   *
   * @default '220px'
   */
  siderWidth?: number;
  /**
-   * sider width when collapse is true
+   * Sider width when collapse is true
+   *
   * @default '64px'
   */
  siderCollapsedWidth?: number;
 }

-/**
- * content config
- */
+/** Content config */
 export interface AdminLayoutContentConfig {
  /**
-   * content class
+   * Content class
+   *
   * @default ''
   */
  contentClass?: string;
  /**
-   * whether content is full the page
-   * @description if true, other elements will be hidden by `display: none`
+   * Whether content is full the page
+   *
+   * If true, other elements will be hidden by `display: none`
   */
  fullContent?: boolean;
 }

-/**
- * footer config
- */
+/** Footer config */
 export interface AdminLayoutFooterConfig {
  /**
-   * whether footer is visible
+   * Whether footer is visible
+   *
   * @default true
   */
  footerVisible?: boolean;
  /**
-   * whether footer is fixed
+   * Whether footer is fixed
+   *
   * @default true
   */
  fixedFooter?: boolean;
  /**
-   * footer class
+   * Footer class
+   *
   * @default ''
   */
  footerClass?: string;
  /**
-   * footer height
+   * Footer height
+   *
   * @default 48px
   */
  footerHeight?: number;
  /**
-   * whether footer is on the right side
-   * @description when the layout is vertical, the footer is on the right side
+   * Whether footer is on the right side
+   *
+   * When the layout is vertical, the footer is on the right side
   */
  rightFooter?: boolean;
 }

 /**
- * layout mode
- * - horizontal
- * - vertical
+ * Layout mode
+ *
+ * - Horizontal
+ * - Vertical
 */
 export type LayoutMode = 'horizontal' | 'vertical';

 /**
- * the scroll mode when content overflow
- * - wrapper: the layout component's wrapper element has a scrollbar
- * - content: the layout component's content element has a scrollbar
+ * The scroll mode when content overflow
+ *
+ * - Wrapper: the layout component's wrapper element has a scrollbar
+ * - Content: the layout component's content element has a scrollbar
+ *
 * @default 'wrapper'
 */
 export type LayoutScrollMode = 'wrapper' | 'content';

-/**
- * admin layout props
- */
+/** Admin layout props */
 export interface AdminLayoutProps
  extends AdminLayoutHeaderConfig,
    AdminLayoutTabConfig,
@ -148,52 +158,58 @@ export interface AdminLayoutProps
    AdminLayoutContentConfig,
    AdminLayoutFooterConfig {
  /**
-   * layout mode
+   * Layout mode
+   *
   * - {@link LayoutMode}
   */
  mode?: LayoutMode;
-  /** is mobile layout */
+  /** Is mobile layout */
  isMobile?: boolean;
  /**
-   * scroll mode
+   * Scroll mode
+   *
   * - {@link ScrollMode}
   */
  scrollMode?: LayoutScrollMode;
  /**
-   * the id of the scroll element of the layout
-   * @description it can be used to get the corresponding Dom and scroll it
+   * The id of the scroll element of the layout
+   *
+   * It can be used to get the corresponding Dom and scroll it
+   *
+   * @example
+   *   use the default id by import
+   *   ```ts
+   *   import { adminLayoutScrollElId } from '@sa/vue-materials';
+   *   ```
+   *
   * @default
   * ```ts
   * const adminLayoutScrollElId = '__ADMIN_LAYOUT_SCROLL_EL_ID__'
   * ```
-   * @example use the default id by import
-   * ```ts
-   * import { adminLayoutScrollElId } from '@sa/vue-materials';
-   * ```
   */
  scrollElId?: string;
-  /**
-   * the class of the scroll element
-   */
+  /** The class of the scroll element */
  scrollElClass?: string;
-  /**
-   * the class of the scroll wrapper element
-   */
+  /** The class of the scroll wrapper element */
  scrollWrapperClass?: string;
  /**
-   * the common class of the layout
-   * @description is can be used to configure the transition animation
+   * The common class of the layout
+   *
+   * Is can be used to configure the transition animation
+   *
   * @default 'transition-all-300'
   */
  commonClass?: string;
  /**
-   * whether fix the header and tab
+   * Whether fix the header and tab
+   *
   * @default true
   */
  fixedTop?: boolean;
  /**
-   * the max z-index of the layout
-   * @description the z-index of Header,Tab,Sider and Footer will not exceed this value
+   * The max z-index of the layout
+   *
+   * The z-index of Header,Tab,Sider and Footer will not exceed this value
   */
  maxZIndex?: number;
 }
@ -222,48 +238,44 @@ export type LayoutCssVars = {
 };

 /**
- * the mode of the tab
- * - button: button style
- * - chrome: chrome style
+ * The mode of the tab
+ *
+ * - Button: button style
+ * - Chrome: chrome style
+ *
 * @default chrome
 */
 export type PageTabMode = 'button' | 'chrome';

 export interface PageTabProps {
-  /**
-   * whether is dark mode
-   */
+  /** Whether is dark mode */
  darkMode?: boolean;
  /**
-   * the mode of the tab
+   * The mode of the tab
+   *
   * - {@link TabMode}
   */
  mode?: PageTabMode;
  /**
-   * the common class of the layout
-   * @description is can be used to configure the transition animation
+   * The common class of the layout
+   *
+   * Is can be used to configure the transition animation
+   *
   * @default 'transition-all-300'
   */
  commonClass?: string;
-  /**
-   * the class of the button tab
-   */
+  /** The class of the button tab */
  buttonClass?: string;
-  /**
-   * the class of the chrome tab
-   */
+  /** The class of the chrome tab */
  chromeClass?: string;
-  /**
-   * whether the tab is active
-   */
+  /** Whether the tab is active */
  active?: boolean;
-  /**
-   * the color of the active tab
-   */
+  /** The color of the active tab */
  activeColor?: string;
  /**
-   * whether the tab is closable
-   * @description show the close icon when true
+   * Whether the tab is closable
+   *
+   * Show the close icon when true
   */
  closable?: boolean;
 }
--- a/packages/materials/tsconfig.json
+++ b/packages/materials/tsconfig.json
@ -1,19 +1,19 @@
 {
  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
    "baseUrl": ".",
    "module": "ESNext",
-    "target": "ESNext",
-    "lib": ["DOM", "ESNext"],
-    "strict": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve",
    "moduleResolution": "node",
    "resolveJsonModule": true,
-    "noUnusedLocals": true,
+    "types": ["node"],
+    "strict": true,
    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
-    "types": ["node"]
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
--- a/packages/request/package.json
+++ b/packages/request/package.json
@ -6,9 +6,7 @@
  },
  "typesVersions": {
    "*": {
-      "*": [
-        "./src/*"
-      ]
+      "*": ["./src/*"]
    }
  },
  "dependencies": {
--- a/packages/request/tsconfig.json
+++ b/packages/request/tsconfig.json
@ -1,19 +1,19 @@
 {
  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
    "baseUrl": ".",
    "module": "ESNext",
-    "target": "ESNext",
-    "lib": ["DOM", "ESNext"],
-    "strict": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve",
    "moduleResolution": "node",
    "resolveJsonModule": true,
-    "noUnusedLocals": true,
+    "types": ["node"],
+    "strict": true,
    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
-    "types": ["node"]
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
--- a/packages/scripts/bin.cjs
+++ b/packages/scripts/bin.cjs
@ -1,6 +1,6 @@
 #!/usr/bin/env node

-const path = require('path');
+const path = require('node:path');
 const jiti = require('jiti')(__filename);

 jiti(path.resolve(__dirname, './src/index.ts'));
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@ -1,19 +1,17 @@
 {
  "name": "@sa/scripts",
  "version": "1.0.0",
+  "bin": {
+    "sa": "./bin.cjs"
+  },
  "exports": {
    ".": "./src/index.ts"
  },
  "typesVersions": {
    "*": {
-      "*": [
-        "./src/*"
-      ]
+      "*": ["./src/*"]
    }
  },
-  "bin": {
-    "sa": "./bin.cjs"
-  },
  "devDependencies": {
    "c12": "1.5.1",
    "cac": "6.7.14",
@ -21,8 +19,8 @@
    "enquirer": "2.4.1",
    "execa": "8.0.1",
    "jiti": "1.21.0",
-    "lint-staged": "15.1.0",
-    "npm-check-updates": "16.14.6",
+    "lint-staged": "15.2.0",
+    "npm-check-updates": "16.14.12",
    "rimraf": "5.0.5"
  }
 }
--- a/packages/scripts/src/commands/git-commit.ts
+++ b/packages/scripts/src/commands/git-commit.ts
@ -1,7 +1,7 @@
 import path from 'node:path';
 import { readFileSync } from 'node:fs';
 import enquirer from 'enquirer';
-import { bgRed, red, green } from 'kolorist';
+import { bgRed, green, red } from 'kolorist';
 import { execCommand } from '../shared';
 import type { CliOption } from '../types';

--- a/packages/scripts/src/config/index.ts
+++ b/packages/scripts/src/config/index.ts
@ -1,3 +1,4 @@
+import process from 'node:process';
 import { loadConfig } from 'c12';
 import type { CliOption } from '../types';

--- a/packages/scripts/src/index.ts
+++ b/packages/scripts/src/index.ts
@ -1,7 +1,7 @@
 import cac from 'cac';
 import { blue, lightGreen } from 'kolorist';
 import { version } from '../package.json';
-import { cleanup, updatePkg, gitCommit, gitCommitVerify, prettierWrite, execLintStaged } from './commands';
+import { cleanup, execLintStaged, gitCommit, gitCommitVerify, prettierWrite, updatePkg } from './commands';
 import { loadCliOptions } from './config';

 type Command = 'cleanup' | 'update-pkg' | 'git-commit' | 'git-commit-verify' | 'prettier-write' | 'lint-staged';
--- a/packages/scripts/src/types/index.ts
+++ b/packages/scripts/src/types/index.ts
@ -1,37 +1,33 @@
 export interface CliOption {
-  /**
-   * the project root directory
-   */
+  /** The project root directory */
  cwd: string;
  /**
-   * cleanup dirs
+   * Cleanup dirs
+   *
+   * Glob pattern syntax {@link https://github.com/isaacs/minimatch}
+   *
   * @default
   * ```json
   * ["** /dist", "** /pnpm-lock.yaml", "** /node_modules", "!node_modules/**"]
   * ```
-   * @description glob pattern syntax {@link https://github.com/isaacs/minimatch}
   */
  cleanupDirs: string[];
-  /**
-   * git commit types
-   */
+  /** Git commit types */
  gitCommitTypes: [string, string][];
-  /**
-   * git commit scopes
-   */
+  /** Git commit scopes */
  gitCommitScopes: [string, string][];
  /**
-   * npm-check-updates command args
-   * @default ["--deep","-u"]
+   * Npm-check-updates command args
+   *
+   * @default ['--deep', '-u']
   */
  ncuCommandArgs: string[];
  /**
-   * prettier write glob
-   * @description glob pattern syntax {@link https://github.com/micromatch/micromatch}
+   * Prettier write glob
+   *
+   * Glob pattern syntax {@link https://github.com/micromatch/micromatch}
   */
  prettierWriteGlob: string[];
-  /**
-   * lint-staged config
-   */
+  /** Lint-staged config */
  lintStagedConfig: Record<string, string | string[]>;
 }
--- a/packages/scripts/tsconfig.json
+++ b/packages/scripts/tsconfig.json
@ -1,19 +1,19 @@
 {
  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
    "baseUrl": ".",
    "module": "ESNext",
-    "target": "ESNext",
-    "lib": ["DOM", "ESNext"],
-    "strict": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve",
    "moduleResolution": "node",
    "resolveJsonModule": true,
-    "noUnusedLocals": true,
+    "types": ["node"],
+    "strict": true,
    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
-    "types": ["node"]
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*", "typings/**/*"],
  "exclude": ["node_modules", "dist"]
--- a/packages/uno-preset/package.json
+++ b/packages/uno-preset/package.json
@ -6,9 +6,7 @@
  },
  "typesVersions": {
    "*": {
-      "*": [
-        "./src/*"
-      ]
+      "*": ["./src/*"]
    }
  }
 }
--- a/packages/uno-preset/tsconfig.json
+++ b/packages/uno-preset/tsconfig.json
@ -1,19 +1,19 @@
 {
  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
    "baseUrl": ".",
    "module": "ESNext",
-    "target": "ESNext",
-    "lib": ["DOM", "ESNext"],
-    "strict": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve",
    "moduleResolution": "node",
    "resolveJsonModule": true,
-    "noUnusedLocals": true,
+    "types": ["node"],
+    "strict": true,
    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
-    "types": ["node"]
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -6,9 +6,7 @@
  },
  "typesVersions": {
    "*": {
-      "*": [
-        "./src/*"
-      ]
+      "*": ["./src/*"]
    }
  },
  "dependencies": {
--- a/packages/utils/src/color.ts
+++ b/packages/utils/src/color.ts
@ -6,29 +6,32 @@ import type { AnyColor, HsvColor, RgbColor } from 'colord';
 extend([namesPlugin, mixPlugin]);

 /**
- * add color alpha
- * @param color - color
- * @param alpha - alpha (0 - 1)
+ * Add color alpha
+ *
+ * @param color - Color
+ * @param alpha - Alpha (0 - 1)
 */
 export function addColorAlpha(color: string, alpha: number) {
  return colord(color).alpha(alpha).toHex();
 }

 /**
- * mix color
- * @param firstColor - first color
- * @param secondColor - second color
- * @param ratio - the ratio of the second color (0 - 1)
+ * Mix color
+ *
+ * @param firstColor - First color
+ * @param secondColor - Second color
+ * @param ratio - The ratio of the second color (0 - 1)
 */
 export function mixColor(firstColor: string, secondColor: string, ratio: number) {
  return colord(firstColor).mix(secondColor, ratio).toHex();
 }

 /**
- * transform color with opacity to similar color without opacity
- * @param color - color
- * @param alpha - alpha (0 - 1)
- * @param bgColor background color (usually white or black)
+ * Transform color with opacity to similar color without opacity
+ *
+ * @param color - Color
+ * @param alpha - Alpha (0 - 1)
+ * @param bgColor Background color (usually white or black)
 */
 export function transformColorWithOpacity(color: string, alpha: number, bgColor = '#ffffff') {
  const originColor = addColorAlpha(color, alpha);
@ -50,67 +53,57 @@ export function transformColorWithOpacity(color: string, alpha: number, bgColor
 }

 /**
- * is white color
- * @param color - color
+ * Is white color
+ *
+ * @param color - Color
 */
 export function isWhiteColor(color: string) {
  return colord(color).isEqual('#ffffff');
 }

 /**
- * get rgb of color
- * @param color color
+ * Get rgb of color
+ *
+ * @param color Color
 */
 export function getRgbOfColor(color: string) {
  return colord(color).toRgb();
 }

-/**
- * hue step
- */
+/** Hue step */
 const hueStep = 2;
-/**
- * saturation step, light color part
- */
+/** Saturation step, light color part */
 const saturationStep = 16;
-/**
- * saturation step, dark color part
- */
+/** Saturation step, dark color part */
 const saturationStep2 = 5;
-/**
- * brightness step, light color part
- */
+/** Brightness step, light color part */
 const brightnessStep1 = 5;
-/**
- * brightness step, dark color part
- */
+/** Brightness step, dark color part */
 const brightnessStep2 = 15;
-/**
- * light color count, main color up
- */
+/** Light color count, main color up */
 const lightColorCount = 5;
-/**
- * dark color count, main color down
- */
+/** Dark color count, main color down */
 const darkColorCount = 4;

 /**
- * the color index of color palette
- * @description from left to right, the color is from light to dark, 6 is main color
+ * The color index of color palette
+ *
+ * From left to right, the color is from light to dark, 6 is main color
 */
 type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;

 /**
- * get color palette (from left to right, the color is from light to dark, 6 is main color)
- * @param color - color
- * @param index - the color index of color palette (the main color index is 6)
- * @returns hex color
+ * Get color palette (from left to right, the color is from light to dark, 6 is main color)
+ *
+ * @param color - Color
+ * @param index - The color index of color palette (the main color index is 6)
+ * @returns Hex color
 */
 export function getColorPalette(color: AnyColor, index: ColorIndex): string {
  const transformColor = colord(color);

  if (!transformColor.isValid()) {
-    throw Error('invalid input color value');
+    throw new Error('invalid input color value');
  }

  if (index === 6) {
@ -130,9 +123,7 @@ export function getColorPalette(color: AnyColor, index: ColorIndex): string {
  return colord(newHsv).toHex();
 }

-/**
- * map of dark color index and opacity
- */
+/** Map of dark color index and opacity */
 const darkColorMap = [
  { index: 7, opacity: 0.15 },
  { index: 6, opacity: 0.25 },
@ -147,10 +138,11 @@ const darkColorMap = [
 ];

 /**
- * get color palettes
- * @param color - color
- * @param darkTheme - dark theme
- * @param darkThemeMixColor - dark theme mix color (default: #141414)
+ * Get color palettes
+ *
+ * @param color - Color
+ * @param darkTheme - Dark theme
+ * @param darkThemeMixColor - Dark theme mix color (default: #141414)
 */
 export function getColorPalettes(color: AnyColor, darkTheme = false, darkThemeMixColor = '#141414'): string[] {
  const indexes: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@ -171,10 +163,11 @@ export function getColorPalettes(color: AnyColor, darkTheme = false, darkThemeMi
 }

 /**
- * get hue
- * @param hsv - hsv format color
- * @param i - the relative distance from 6
- * @param isLight - is light color
+ * Get hue
+ *
+ * @param hsv - Hsv format color
+ * @param i - The relative distance from 6
+ * @param isLight - Is light color
 */
 function getHue(hsv: HsvColor, i: number, isLight: boolean) {
  let hue: number;
@ -199,10 +192,11 @@ function getHue(hsv: HsvColor, i: number, isLight: boolean) {
 }

 /**
- * get saturation
- * @param hsv - hsv format color
- * @param i - the relative distance from 6
- * @param isLight - is light color
+ * Get saturation
+ *
+ * @param hsv - Hsv format color
+ * @param i - The relative distance from 6
+ * @param isLight - Is light color
 */
 function getSaturation(hsv: HsvColor, i: number, isLight: boolean) {
  if (hsv.h === 0 && hsv.s === 0) {
@ -235,10 +229,11 @@ function getSaturation(hsv: HsvColor, i: number, isLight: boolean) {
 }

 /**
- * get value of hsv
- * @param hsv - hsv format color
- * @param i - the relative distance from 6
- * @param isLight - is light color
+ * Get value of hsv
+ *
+ * @param hsv - Hsv format color
+ * @param i - The relative distance from 6
+ * @param isLight - Is light color
 */
 function getValue(hsv: HsvColor, i: number, isLight: boolean) {
  let value: number;
--- a/packages/utils/src/crypto.ts
+++ b/packages/utils/src/crypto.ts
@ -1,9 +1,7 @@
 import CryptoJS from 'crypto-js';

 export class Crypto<T extends object> {
-  /**
-   * secret
-   */
+  /** Secret */
  secret: string;

  constructor(secret: string) {
--- a/packages/utils/src/storage.ts
+++ b/packages/utils/src/storage.ts
@ -1,8 +1,6 @@
 import localforage from 'localforage';

-/**
- * the storage type
- */
+/** The storage type */
 export type StorageType = 'local' | 'session';

 export function createStorage<T extends object>(type: StorageType) {
@ -10,9 +8,10 @@ export function createStorage<T extends object>(type: StorageType) {

  const storage = {
    /**
-     * set session
-     * @param key session key
-     * @param value session value
+     * Set session
+     *
+     * @param key Session key
+     * @param value Session value
     */
    set<K extends keyof T>(key: K, value: T[K]) {
      const json = JSON.stringify(value);
@ -20,8 +19,9 @@ export function createStorage<T extends object>(type: StorageType) {
      stg.setItem(key as string, json);
    },
    /**
-     * get session
-     * @param key session key
+     * Get session
+     *
+     * @param key Session key
     */
    get<K extends keyof T>(key: K): T[K] | null {
      const json = stg.getItem(key as string);
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { NConfigProvider, darkTheme } from 'naive-ui';
 import { useAppStore } from './store/modules/app';
 import { useThemeStore } from './store/modules/theme';
-import { naiveLocales, naiveDateLocales } from './locales/naive';
+import { naiveDateLocales, naiveLocales } from './locales/naive';

 defineOptions({
  name: 'App'
--- a/src/components/common/app-provider.vue
+++ b/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>
--- a/src/components/common/dark-mode-container.vue
+++ b/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>
--- a/src/components/common/exception-base.vue
+++ b/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',
--- a/src/components/common/full-screen.vue
+++ b/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>

--- a/src/components/common/lang-switch.vue
+++ b/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>

--- a/src/components/common/menu-toggler.vue
+++ b/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(() => {
--- a/src/components/common/pin-toggler.vue
+++ b/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>

--- a/src/components/common/reload-button.vue
+++ b/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>

--- a/src/components/common/system-logo.vue
+++ b/src/components/common/system-logo.vue
@ -3,7 +3,7 @@ defineOptions({ name: 'SystemLogo' });
 </script>

 <template>
-  <icon-local-logo />
+  <IconLocalLogo />
 </template>

 <style scoped></style>
--- a/src/components/common/theme-schema-switch.vue
+++ b/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');
 }
--- a/src/components/custom/better-scroll.vue
+++ b/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);
--- a/src/components/custom/button-icon.vue
+++ b/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;
 }
--- a/src/components/custom/svg-icon.vue
+++ b/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>

--- a/src/components/custom/wave-bg.vue
+++ b/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;
 }

--- a/src/constants/reg.ts
+++ b/src/constants/reg.ts
@ -1,34 +1,25 @@
-export const REG_USER_NAME = /^[\u4e00-\u9fa5a-zA-Z0-9_-]{4,16}$/;
+export const REG_USER_NAME = /^[\u4E00-\u9FA5a-zA-Z0-9_-]{4,16}$/;

-/**
- * phone reg
- */
+/** Phone reg */
 export const REG_PHONE =
  /^[1](([3][0-9])|([4][01456789])|([5][012356789])|([6][2567])|([7][0-8])|([8][0-9])|([9][012356789]))[0-9]{8}$/;

 /**
- * password reg
- * @description 6-18 characters, including letters, numbers, and underscores
+ * Password reg
+ *
+ * 6-18 characters, including letters, numbers, and underscores
 */
 export const REG_PWD = /^\w{6,18}$/;

-/**
- * email reg
- */
+/** Email reg */
 export const REG_EMAIL = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

-/**
- * six digit code reg
- */
+/** Six digit code reg */
 export const REG_CODE_SIX = /^\d{6}$/;

-/**
- * four digit code reg
- */
+/** Four digit code reg */
 export const REG_CODE_FOUR = /^\d{4}$/;

-/**
- * url reg
- */
+/** Url reg */
 export const REG_URL =
  /(((^https?:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
--- a/src/hooks/common/form.ts
+++ b/src/hooks/common/form.ts
@ -1,6 +1,6 @@
 import { ref } from 'vue';
 import type { FormInst } from 'naive-ui';
-import { REG_USER_NAME, REG_PHONE, REG_PWD, REG_CODE_SIX, REG_EMAIL } from '@/constants/reg';
+import { REG_CODE_SIX, REG_EMAIL, REG_PHONE, REG_PWD, REG_USER_NAME } from '@/constants/reg';
 import { $t } from '@/locales';

 export function useFormRules() {
--- a/src/hooks/common/router.ts
+++ b/src/hooks/common/router.ts
@ -4,9 +4,11 @@ import type { RouteKey } from '@elegant-router/types';
 import { router as globalRouter } from '@/router';

 /**
- * router push
- * @description jump to the specified route, it can replace function router.push
- * @param inSetup whether is in vue script setup
+ * Router push
+ *
+ * Jump to the specified route, it can replace function router.push
+ *
+ * @param inSetup Whether is in vue script setup
 */
 export function useRouterPush(inSetup = true) {
  const router = inSetup ? useRouter() : globalRouter;
@ -44,9 +46,10 @@ export function useRouterPush(inSetup = true) {
  }

  /**
-   * navigate to login page
-   * @param loginModule the login module
-   * @param redirectUrl the redirect url, if not specified, it will be the current route fullPath
+   * Navigate to login page
+   *
+   * @param loginModule The login module
+   * @param redirectUrl The redirect url, if not specified, it will be the current route fullPath
   */
  async function toLogin(loginModule?: UnionKey.LoginModule, redirectUrl?: string) {
    const module = loginModule || 'pwd-login';
@ -67,7 +70,8 @@ export function useRouterPush(inSetup = true) {
  }

  /**
-   * toggle login module
+   * Toggle login module
+   *
   * @param module
   */
  async function toggleLoginModule(module: UnionKey.LoginModule) {
@ -76,9 +80,7 @@ export function useRouterPush(inSetup = true) {
    return routerPushByKey('login', { query, params: { module } });
  }

-  /**
-   * redirect from login
-   */
+  /** Redirect from login */
  async function redirectFromLogin() {
    const redirect = route.value.query?.redirect as string;

--- a/src/layouts/hooks/use-mix-menu.ts
+++ b/src/layouts/hooks/use-mix-menu.ts
@ -1,4 +1,4 @@
-import { ref, computed, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useContext } from '@sa/hooks';
 import { useRouteStore } from '@/store/modules/route';
--- a/src/layouts/modules/global-content/index.vue
+++ b/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();
--- a/src/layouts/modules/global-header/index.vue
+++ b/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;
--- a/src/layouts/modules/global-logo/index.vue
+++ b/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>
--- a/src/layouts/modules/global-menu/base-menu.vue
+++ b/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();
--- a/src/layouts/modules/global-menu/first-level-menu.vue
+++ b/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>();
--- a/src/layouts/modules/global-menu/horizontal-mix-menu.vue
+++ b/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'
--- a/src/layouts/modules/global-menu/vertical-mix-menu.vue
+++ b/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'
--- a/src/layouts/modules/global-tab/context-menu.vue
+++ b/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();
--- a/src/layouts/modules/global-tab/index.vue
+++ b/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';
--- a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
+++ b/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,
  {
--- a/src/layouts/modules/theme-drawer/components/setting-item.vue
+++ b/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>
--- a/src/layouts/modules/theme-drawer/modules/config-operation.vue
+++ b/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';
--- a/src/layouts/modules/theme-drawer/modules/page-fun.vue
+++ b/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({
--- a/src/locales/dayjs.ts
+++ b/src/locales/dayjs.ts
@ -4,7 +4,8 @@ import 'dayjs/locale/en';
 import { localStg } from '@/utils/storage';

 /**
- * set dayjs locale
+ * Set dayjs locale
+ *
 * @param lang
 */
 export function setDayjsLocale(lang: App.I18n.LangType = 'zh-CN') {
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@ -11,7 +11,8 @@ const i18n = createI18n({
 });

 /**
- * setup plugin i18n
+ * Setup plugin i18n
+ *
 * @param app
 */
 export function setupI18n(app: App) {
--- a/src/locales/naive.ts
+++ b/src/locales/naive.ts
@ -1,5 +1,5 @@
-import { zhCN, enUS, dateZhCN, dateEnUS } from 'naive-ui';
-import type { NLocale, NDateLocale } from 'naive-ui';
+import { dateEnUS, dateZhCN, enUS, zhCN } from 'naive-ui';
+import type { NDateLocale, NLocale } from 'naive-ui';

 export const naiveLocales: Record<App.I18n.LangType, NLocale> = {
  'zh-CN': zhCN,
--- a/src/main.ts
+++ b/src/main.ts
@ -1,6 +1,6 @@
 import { createApp } from 'vue';
 import './plugins/assets';
-import { setupNProgress, setupIconifyOffline, setupDayjs } from './plugins';
+import { setupDayjs, setupIconifyOffline, setupNProgress } from './plugins';
 import { setupStore } from './store';
 import { setupRouter } from './router';
 import { setupI18n } from './locales';
--- a/src/plugins/iconify.ts
+++ b/src/plugins/iconify.ts
@ -1,8 +1,6 @@
 import { addAPIProvider, disableCache } from '@iconify/vue';

-/**
- * setup the iconify offline
- */
+/** Setup the iconify offline */
 export function setupIconifyOffline() {
  const { VITE_ICONIFY_URL } = import.meta.env;

--- a/src/plugins/nprogress.ts
+++ b/src/plugins/nprogress.ts
@ -1,8 +1,6 @@
 import NProgress from 'nprogress';

-/**
- * setup plugin NProgress
- */
+/** Setup plugin NProgress */
 export function setupNProgress() {
  NProgress.configure({ easing: 'ease', speed: 500 });

--- a/src/router/guard/index.ts
+++ b/src/router/guard/index.ts
@ -4,8 +4,9 @@ import { createDocumentTitleGuard } from './title';
 import { createPermissionGuard } from './permission';

 /**
- * router guard
- * @param router - router instance
+ * Router guard
+ *
+ * @param router - Router instance
 */
 export function createRouterGuard(router: Router) {
  createProgressGuard(router);
--- a/src/router/guard/permission.ts
+++ b/src/router/guard/permission.ts
@ -1,4 +1,4 @@
-import type { Router, NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
+import type { NavigationGuardNext, RouteLocationNormalized, Router } from 'vue-router';
 import type { RouteKey, RoutePath } from '@elegant-router/types';
 import { useAuthStore } from '@/store/modules/auth';
 import { useRouteStore } from '@/store/modules/route';
--- a/src/router/guard/title.ts
+++ b/src/router/guard/title.ts
@ -1,6 +1,6 @@
-import { $t } from '@/locales';
 import { useTitle } from '@vueuse/core';
 import type { Router } from 'vue-router';
+import { $t } from '@/locales';

 export function createDocumentTitleGuard(router: Router) {
  router.afterEach(to => {
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,10 +1,10 @@
 import type { App } from 'vue';
 import {
-  createRouter,
-  createWebHistory,
-  createWebHashHistory,
+  type RouterHistory,
  createMemoryHistory,
-  type RouterHistory
+  createRouter,
+  createWebHashHistory,
+  createWebHistory
 } from 'vue-router';
 import { createRoutes } from './routes';
 import { createRouterGuard } from './guard';
@ -24,9 +24,7 @@ export const router = createRouter({
  routes: constantVueRoutes
 });

-/**
- * setup Vue Router
- */
+/** Setup Vue Router */
 export async function setupRouter(app: App) {
  app.use(router);
  createRouterGuard(router);
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@ -1,4 +1,4 @@
-import type { ElegantConstRoute, ElegantRoute, CustomRoute } from '@elegant-router/types';
+import type { CustomRoute, ElegantConstRoute, ElegantRoute } from '@elegant-router/types';
 import { generatedRoutes } from '../elegant/routes';
 import { layouts, views } from '../elegant/imports';
 import { transformElegantRoutesToVueRoutes } from '../elegant/transform';
@ -26,9 +26,7 @@ const customRoutes: CustomRoute[] = [
  }
 ];

-/**
- * create routes
- */
+/** Create routes */
 export function createRoutes() {
  const constantRoutes: ElegantRoute[] = [];

@ -51,8 +49,9 @@ export function createRoutes() {
 }

 /**
- * get auth vue routes
- * @param routes elegant routes
+ * Get auth vue routes
+ *
+ * @param routes Elegant routes
 */
 export function getAuthVueRoutes(routes: ElegantConstRoute[]) {
  return transformElegantRoutesToVueRoutes(routes, layouts, views);
--- a/src/service/api/auth.ts
+++ b/src/service/api/auth.ts
@ -1,9 +1,10 @@
 import { request } from '../request';

 /**
- * login
- * @param userName user name
- * @param password password
+ * Login
+ *
+ * @param userName User name
+ * @param password Password
 */
 export function fetchLogin(userName: string, password: string) {
  return request<App.Service.Response<Api.Auth.LoginToken>>('/auth/login', {
@ -15,16 +16,15 @@ export function fetchLogin(userName: string, password: string) {
  });
 }

-/**
- * get user info
- */
+/** Get user info */
 export function fetchGetUserInfo() {
  return request<App.Service.Response<Api.Auth.UserInfo>>('/auth/getUserInfo');
 }

 /**
- * refresh token
- * @param refreshToken refresh token
+ * Refresh token
+ *
+ * @param refreshToken Refresh token
 */
 export function fetchRefreshToken(refreshToken: string) {
  return request<App.Service.Response<Api.Auth.LoginToken>>('/auth/refreshToken', {
--- a/src/service/api/route.ts
+++ b/src/service/api/route.ts
@ -1,17 +1,19 @@
 import { request } from '../request';

 /**
- * get user routes
- * @param example whether to use example data, default: 0
+ * Get user routes
+ *
+ * @param example Whether to use example data, default: 0
 */
 export function fetchGetUserRoutes(example: '0' | '1' = '0') {
  return request<App.Service.Response<Api.Route.UserRoute>>('/route/getUserRoutes', { params: { example } });
 }

 /**
- * whether the route is exist
- * @param routeName route name
- * @param example whether to use example data, default: 0
+ * Whether the route is exist
+ *
+ * @param routeName Route name
+ * @param example Whether to use example data, default: 0
 */
 export function fetchIsRouteExist(routeName: string, example: '0' | '1' = '0') {
  return request<App.Service.Response<boolean>>('/route/isRouteExist', { params: { routeName, example } });
--- a/src/service/request/index.ts
+++ b/src/service/request/index.ts
@ -1,6 +1,6 @@
-import { localStg } from '@/utils/storage';
 import { createOfetch as createRequest } from '@sa/request';
-import { createServiceConfig, createProxyPattern } from '~/env.config';
+import { localStg } from '@/utils/storage';
+import { createProxyPattern, createServiceConfig } from '~/env.config';

 const { baseURL, otherBaseURL } = createServiceConfig(import.meta.env);

--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -2,9 +2,7 @@ import type { App } from 'vue';
 import { createPinia } from 'pinia';
 import { resetSetupStore } from './plugins';

-/**
- * setup Vue store plugin pinia
- */
+/** Setup Vue store plugin pinia */
 export function setupStore(app: App) {
  const store = createPinia();

--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@ -1,4 +1,4 @@
-import { ref, watch, effectScope, onScopeDispose } from 'vue';
+import { effectScope, onScopeDispose, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { breakpointsTailwind, useBreakpoints, useTitle } from '@vueuse/core';
 import { useBoolean } from '@sa/hooks';
@ -24,14 +24,13 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
  const { bool: siderCollapse, setBool: setSiderCollapse, toggle: toggleSiderCollapse } = useBoolean();
  const { bool: mixSiderFixed, setBool: setMixSiderFixed, toggle: toggleMixSiderFixed } = useBoolean();

-  /**
-   * is mobile layout
-   */
+  /** Is mobile layout */
  const isMobile = breakpoints.smaller('sm');

  /**
-   * reload page
-   * @param duration duration time
+   * Reload page
+   *
+   * @param duration Duration time
   */
  async function reloadPage(duration = 0) {
    setReloadFlag(false);
@ -64,9 +63,7 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
    localStg.set('lang', lang);
  }

-  /**
-   * update document title by locale
-   */
+  /** Update document title by locale */
  function updateDocumentTitleByLocale() {
    const { i18nKey, title } = router.currentRoute.value.meta;

@ -110,9 +107,7 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
    });
  });

-  /**
-   * on scope dispose
-   */
+  /** On scope dispose */
  onScopeDispose(() => {
    scope.stop();
  });
--- a/src/store/modules/auth/index.ts
+++ b/src/store/modules/auth/index.ts
@ -1,13 +1,13 @@
-import { ref, reactive, computed } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { defineStore } from 'pinia';
 import { useLoading } from '@sa/hooks';
 import { SetupStoreId } from '@/enum';
 import { useRouterPush } from '@/hooks/common/router';
-import { fetchLogin, fetchGetUserInfo } from '@/service/api';
+import { fetchGetUserInfo, fetchLogin } from '@/service/api';
 import { localStg } from '@/utils/storage';
-import { useRouteStore } from '../route';
-import { getToken, getUserInfo, clearAuthStorage } from './shared';
 import { $t } from '@/locales';
+import { useRouteStore } from '../route';
+import { clearAuthStorage, getToken, getUserInfo } from './shared';

 export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
  const routeStore = useRouteStore();
@ -18,14 +18,10 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {

  const userInfo: Api.Auth.UserInfo = reactive(getUserInfo());

-  /**
-   * is login
-   */
+  /** Is login */
  const isLogin = computed(() => Boolean(token.value));

-  /**
-   * reset auth store
-   */
+  /** Reset auth store */
  async function resetStore() {
    const authStore = useAuthStore();

@ -41,9 +37,10 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
  }

  /**
-   * login
-   * @param userName user name
-   * @param password password
+   * Login
+   *
+   * @param userName User name
+   * @param password Password
   */
  async function login(userName: string, password: string) {
    startLoading();
--- a/Show More
+++ b/Show More