chore: format code

2024-06-09 13:31:43 +08:00
parent 68229a4d2f
commit 35c3dd78ec
65 changed files with 419 additions and 494 deletions
--- a/packages/business/common-ui/src/authentication/code-login.vue
+++ b/packages/business/common-ui/src/authentication/code-login.vue
@@ -125,26 +125,26 @@ onBeforeUnmount(() => {
    </Title>
    <VbenInput
      v-model="formState.phoneNumber"
-      :status="phoneNumberStatus"
+      :autofocus="true"
      :error-tip="$t('authentication.mobile-tip')"
      :label="$t('authentication.mobile')"
+      :placeholder="$t('authentication.mobile')"
+      :status="phoneNumberStatus"
      name="phoneNumber"
      type="number"
-      :placeholder="$t('authentication.mobile')"
-      :autofocus="true"
      @keyup.enter="handleSubmit"
    />
    <VbenPinInput
      v-model="formState.code"
-      :handle-send-code="handleSendCode"
-      :status="codeStatus"
+      :btn-loading="btnLoading"
+      :btn-text="btnText"
      :code-length="4"
      :error-tip="$t('authentication.code-tip')"
+      :handle-send-code="handleSendCode"
      :label="$t('authentication.code')"
-      name="password"
      :placeholder="$t('authentication.code')"
-      :btn-text="btnText"
-      :btn-loading="btnLoading"
+      :status="codeStatus"
+      name="password"
      @keyup.enter="handleSubmit"
    />
    <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
--- a/packages/business/common-ui/src/authentication/forget-password.vue
+++ b/packages/business/common-ui/src/authentication/forget-password.vue
@@ -65,11 +65,11 @@ function goLogin() {
    <div class="mb-6">
      <VbenInput
        v-model="formState.email"
-        :status="emailStatus"
        :error-tip="$t('authentication.email-tip')"
        :label="$t('authentication.email')"
-        name="email"
+        :status="emailStatus"
        autofocus
+        name="email"
        placeholder="example@example.com"
        type="text"
      />
--- a/packages/business/common-ui/src/authentication/login.vue
+++ b/packages/business/common-ui/src/authentication/login.vue
@@ -160,22 +160,22 @@ function handleGo(path: string) {

    <VbenInput
      v-model="formState.username"
-      :status="usernameStatus"
+      :autofocus="false"
      :error-tip="$t('authentication.username-tip')"
      :label="$t('authentication.username')"
-      name="username"
      :placeholder="usernamePlaceholder || $t('authentication.username')"
-      type="text"
+      :status="usernameStatus"
+      name="username"
      required
-      :autofocus="false"
+      type="text"
    />
    <VbenInputPassword
      v-model="formState.password"
-      :status="passwordStatus"
      :error-tip="$t('authentication.password-tip')"
      :label="$t('authentication.password')"
-      name="password"
      :placeholder="passwordPlaceholder || $t('authentication.password')"
+      :status="passwordStatus"
+      name="password"
      required
      type="password"
    />
@@ -205,16 +205,16 @@ function handleGo(path: string) {
    <div class="mb-2 mt-4 flex items-center justify-between">
      <VbenButton
        v-if="showCodeLogin"
-        variant="outline"
        class="w-1/2"
+        variant="outline"
        @click="handleGo(codeLoginPath)"
      >
        {{ $t('authentication.mobile-login') }}
      </VbenButton>
      <VbenButton
        v-if="showQrcodeLogin"
-        variant="outline"
        class="ml-4 w-1/2"
+        variant="outline"
        @click="handleGo(qrCodeLoginPath)"
      >
        {{ $t('authentication.qrcode-login') }}
--- a/packages/business/common-ui/src/authentication/register.vue
+++ b/packages/business/common-ui/src/authentication/register.vue
@@ -90,24 +90,24 @@ function goLogin() {
    </Title>
    <VbenInput
      v-model="formState.username"
-      :status="usernameStatus"
      :error-tip="$t('authentication.username-tip')"
      :label="$t('authentication.username')"
-      name="username"
      :placeholder="$t('authentication.username')"
+      :status="usernameStatus"
+      name="username"
      type="text"
    />
    <!-- Use 8 or more characters with a mix of letters, numbers & symbols. -->
    <VbenInputPassword
      v-model="formState.password"
-      :status="passwordStatus"
      :error-tip="$t('authentication.password-tip')"
      :label="$t('authentication.password')"
-      name="password"
+      :password-strength="true"
      :placeholder="$t('authentication.password')"
+      :status="passwordStatus"
+      name="password"
      required
      type="password"
-      :password-strength="true"
    >
      <template #strengthText>
        {{ $t('authentication.password-strength') }}
@@ -116,11 +116,11 @@ function goLogin() {

    <VbenInputPassword
      v-model="formState.comfirmPassword"
-      :status="comfirmPasswordStatus"
      :error-tip="$t('authentication.comfirm-password-tip')"
      :label="$t('authentication.comfirm-password')"
-      name="comfirmPassword"
      :placeholder="$t('authentication.comfirm-password')"
+      :status="comfirmPasswordStatus"
+      name="comfirmPassword"
      required
      type="password"
    />
--- a/packages/business/common-ui/src/authentication/widgets/color-toggle.vue
+++ b/packages/business/common-ui/src/authentication/widgets/color-toggle.vue
@@ -31,13 +31,13 @@ function handleUpdate(value: string) {
          @click="handleUpdate(color)"
        >
          <div
-            class="relative h-3.5 w-3.5 rounded-[2px] before:absolute before:left-0.5 before:top-0.5 before:h-2.5 before:w-2.5 before:rounded-[2px] before:border before:border-gray-900 before:opacity-0 before:transition-all before:duration-150 before:content-[''] hover:scale-110"
            :class="[
              preferences.theme.colorPrimary === color
                ? `before:opacity-100`
                : '',
            ]"
            :style="{ backgroundColor: color }"
+            class="relative h-3.5 w-3.5 rounded-[2px] before:absolute before:left-0.5 before:top-0.5 before:h-2.5 before:w-2.5 before:rounded-[2px] before:border before:border-gray-900 before:opacity-0 before:transition-all before:duration-150 before:content-[''] hover:scale-110"
          ></div>
        </VbenIconButton>
      </template>
--- a/packages/business/common-ui/src/authentication/widgets/layout-toggle.vue
+++ b/packages/business/common-ui/src/authentication/widgets/layout-toggle.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { AuthPageLayoutType } from '@vben-core/preferences';
 import type { VbenDropdownMenuItem } from '@vben-core/shadcn-ui';

 import { computed } from 'vue';
@@ -6,7 +7,6 @@ import { computed } from 'vue';
 import { $t } from '@vben/locales';
 import { MdiDockBottom, MdiDockLeft, MdiDockRight } from '@vben-core/iconify';
 import {
-  type AuthPageLayoutType,
  preferences,
  updatePreferences,
  usePreferences,
--- a/packages/business/common-ui/src/fallback/icons/icon-403.vue
+++ b/packages/business/common-ui/src/fallback/icons/icon-403.vue
@@ -1,24 +1,24 @@
 <template>
  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="586"
    height="659.29778"
    viewBox="0 0 586 659.29778"
+    width="586"
+    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
-    <circle cx="332.47856" cy="254" r="254.00001" fill="#f2f2f2" />
+    <circle cx="332.47856" cy="254" fill="#f2f2f2" r="254.00001" />
    <path
      d="M498.46363,113.58835H33.17063c-.99774-.02133-1.78931-.84746-1.76797-1.84521,.02069-.96771,.80026-1.74727,1.76797-1.76796H498.46363c.99774,.02133,1.78931,.84746,1.76794,1.84521-.02069,.96771-.80023,1.74727-1.76794,1.76796Z"
      fill="#cacaca"
    />
    <rect
-      x="193.77441"
-      y="174.47256"
-      width="163.61147"
+      fill="#fff"
      height="34.98639"
      rx="17.49318"
      ry="17.49318"
-      fill="#fff"
+      width="163.61147"
+      x="193.77441"
+      y="174.47256"
    />
    <path
      d="M128.17493,244.44534H422.98542c9.66122,0,17.49316,7.83197,17.49316,17.49319h0c0,9.66122-7.83194,17.49319-17.49316,17.49319H128.17493c-9.66122,0-17.49318-7.83197-17.49318-17.49319h0c0-9.66122,7.83196-17.49319,17.49318-17.49319Z"
@@ -33,16 +33,16 @@
      fill="#f2f2f2"
    />
    <polygon
-      points="171.30016 646.86102 182.10017 646.85999 187.23916 605.198 171.29716 605.19897 171.30016 646.86102"
      fill="#a0616a"
+      points="171.30016 646.86102 182.10017 646.85999 187.23916 605.198 171.29716 605.19897 171.30016 646.86102"
    />
    <path
      d="M170.9192,658.12816l33.21436-.00122v-.41998c-.00049-7.13965-5.78833-12.92737-12.92798-12.92773h-.00079l-6.06702-4.60278-11.3197,4.60345-2.89941,.00012,.00055,13.34814Z"
      fill="#2f2e41"
    />
    <polygon
-      points="84.74116 616.94501 93.38016 623.42603 122.49316 593.185 109.74116 583.61902 84.74116 616.94501"
      fill="#a0616a"
+      points="84.74116 616.94501 93.38016 623.42603 122.49316 593.185 109.74116 583.61902 84.74116 616.94501"
    />
    <path
      d="M77.67448,625.72966l26.569,19.93188,.25208-.336c4.2843-5.71136,3.12799-13.81433-2.58279-18.09937l-.00064-.00049-2.09079-7.32275-11.81735-3.11102-2.31931-1.73993-8.01019,10.67767Z"
@@ -64,7 +64,7 @@
      d="M157.62488,302.62425l-5.26666-.55807c-4.86633-.50473-9.64093,1.57941-12.57947,5.491-1.12549,1.48346-1.9339,3.18253-2.37491,4.99164l-.00317,.01447c-1.32108,5.44534,.75095,11.15201,5.25803,14.48117l18.19031,13.41101c12.76544,17.24899,36.75653,28.69272,64.89832,37.98978l43.74274-27.16666-15.47186-18.73843-30.00336,16.0798-44.59833-34.52374-.0257-.02075-16.97424-10.936-4.79169-.5152Z"
      fill="#3f3d56"
    />
-    <circle cx="167.29993" cy="248.60526" r="24.9798" fill="#a0616a" />
+    <circle cx="167.29993" cy="248.60526" fill="#a0616a" r="24.9798" />
    <path
      d="M167.8769,273.59047c-.20135,.00662-.4032,.01108-.6048,.01657-.0863,.22388-.17938,.44583-.2868,.66357l.8916-.68015Z"
      fill="#2f2e41"
@@ -80,9 +80,9 @@
    <circle
      cx="281.3585"
      cy="285.71051"
+      fill="hsl(var(--color-primary))"
      r="51.12006"
      transform="translate(-26.58509 542.54478) rotate(-85.26884)"
-      fill="hsl(var(--color-primary))"
    />
    <path
      d="M294.78675,264.41051l-13.42828,13.42828-13.42828-13.42828c-2.17371-2.17374-5.69806-2.17374-7.87177,0s-2.17371,5.69803,0,7.87177l13.42828,13.42828-13.42828,13.42828c-2.17169,2.17575-2.1684,5.70007,.00739,7.87177,2.17285,2.16879,5.69153,2.16879,7.86438-.00003l13.42828-13.42828,13.42828,13.42828c2.17578,2.17169,5.70007,2.1684,7.87177-.00735,2.16882-2.17288,2.16882-5.6915,0-7.86438l-13.42828-13.42828,13.42828-13.42828c2.17371-2.17374,2.17371-5.69803,0-7.87177s-5.69806-2.17374-7.87177,0h0Z"
@@ -104,23 +104,23 @@
      <ellipse
        cx="56.77685"
        cy="82.05834"
+        fill="#3f3d56"
        rx="8.45661"
        ry="8.64507"
-        fill="#3f3d56"
      />
      <ellipse
        cx="85.9906"
        cy="82.05834"
+        fill="#3f3d56"
        rx="8.45661"
        ry="8.64507"
-        fill="#3f3d56"
      />
      <ellipse
        cx="115.20435"
        cy="82.05834"
+        fill="#3f3d56"
        rx="8.45661"
        ry="8.64507"
-        fill="#3f3d56"
      />
      <path
        d="M148.51577,88.89113c-.25977,0-.51904-.10059-.71484-.30078l-5.70605-5.83301c-.38037-.38867-.38037-1.00977,0-1.39844l5.70605-5.83252c.38721-.39453,1.021-.40088,1.41406-.01562,.39502,.38623,.40186,1.01953,.01562,1.41406l-5.02197,5.1333,5.02197,5.13379c.38623,.39453,.37939,1.02783-.01562,1.41406-.19434,.19043-.44678,.28516-.69922,.28516Z"
--- a/packages/business/common-ui/src/fallback/icons/icon-500.vue
+++ b/packages/business/common-ui/src/fallback/icons/icon-500.vue
@@ -1,215 +1,215 @@
 <template>
  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="1119"
    height="699"
    viewBox="0 0 1119 699"
+    width="1119"
+    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <title>server down</title>
-    <circle cx="292.60911" cy="213" r="213" fill="#f2f2f2" />
+    <circle cx="292.60911" cy="213" fill="#f2f2f2" r="213" />
    <path
      d="M31.39089,151.64237c0,77.49789,48.6181,140.20819,108.70073,140.20819"
-      transform="translate(-31.39089 -100.5)"
      fill="#2f2e41"
+      transform="translate(-31.39089 -100.5)"
    />
    <path
      d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356"
-      transform="translate(-31.39089 -100.5)"
      fill="hsl(var(--color-primary))"
+      transform="translate(-31.39089 -100.5)"
    />
    <path
      d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288"
-      transform="translate(-31.39089 -100.5)"
      fill="hsl(var(--color-primary))"
+      transform="translate(-31.39089 -100.5)"
    />
    <path
      d="M140.09162,291.85056c0-100.13772,62.7103-181.16788,140.20819-181.16788"
-      transform="translate(-31.39089 -100.5)"
      fill="#2f2e41"
+      transform="translate(-31.39089 -100.5)"
    />
    <path
      d="M117.22379,292.83905s15.41555-.47479,20.06141-3.783,23.713-7.2585,24.86553-1.95278,23.16671,26.38821,5.76263,26.5286-40.43935-2.711-45.07627-5.53549S117.22379,292.83905,117.22379,292.83905Z"
-      transform="translate(-31.39089 -100.5)"
      fill="#a8a8a8"
+      transform="translate(-31.39089 -100.5)"
    />
    <path
      d="M168.224,311.78489c-17.40408.14042-40.43933-2.71094-45.07626-5.53548-3.53126-2.151-4.93843-9.86945-5.40926-13.43043-.32607.014-.51463.02-.51463.02s.97638,12.43276,5.61331,15.2573,27.67217,5.67589,45.07626,5.53547c5.02386-.04052,6.7592-1.82793,6.66391-4.47526C173.87935,310.756,171.96329,311.75474,168.224,311.78489Z"
-      transform="translate(-31.39089 -100.5)"
      opacity="0.2"
+      transform="translate(-31.39089 -100.5)"
    />
-    <ellipse cx="198.60911" cy="424.5" rx="187" ry="25.43993" fill="#3f3d56" />
-    <ellipse cx="198.60911" cy="424.5" rx="157" ry="21.35866" opacity="0.1" />
-    <ellipse cx="836.60911" cy="660.5" rx="283" ry="38.5" fill="#3f3d56" />
-    <ellipse cx="310.60911" cy="645.5" rx="170" ry="23.12721" fill="#3f3d56" />
+    <ellipse cx="198.60911" cy="424.5" fill="#3f3d56" rx="187" ry="25.43993" />
+    <ellipse cx="198.60911" cy="424.5" opacity="0.1" rx="157" ry="21.35866" />
+    <ellipse cx="836.60911" cy="660.5" fill="#3f3d56" rx="283" ry="38.5" />
+    <ellipse cx="310.60911" cy="645.5" fill="#3f3d56" rx="170" ry="23.12721" />
    <path
      d="M494,726.5c90,23,263-30,282-90"
-      transform="translate(-31.39089 -100.5)"
      fill="none"
      stroke="#2f2e41"
      stroke-miterlimit="10"
      stroke-width="2"
+      transform="translate(-31.39089 -100.5)"
    />
    <path
      d="M341,359.5s130-36,138,80-107,149-17,172"
-      transform="translate(-31.39089 -100.5)"
      fill="none"
      stroke="#2f2e41"
      stroke-miterlimit="10"
      stroke-width="2"
+      transform="translate(-31.39089 -100.5)"
    />
    <path
      d="M215.40233,637.78332s39.0723-10.82,41.47675,24.04449-32.15951,44.78287-5.10946,51.69566"
-      transform="translate(-31.39089 -100.5)"
      fill="none"
      stroke="#2f2e41"
      stroke-miterlimit="10"
      stroke-width="2"
+      transform="translate(-31.39089 -100.5)"
    />
    <path
      d="M810.09554,663.73988,802.218,714.03505s-38.78182,20.60284-11.51335,21.20881,155.73324,0,155.73324,0,24.84461,0-14.54318-21.81478l-7.87756-52.719Z"
-      transform="translate(-31.39089 -100.5)"
      fill="#2f2e41"
+      transform="translate(-31.39089 -100.5)"
    />
    <path
      d="M785.21906,734.69812c6.193-5.51039,16.9989-11.252,16.9989-11.252l7.87756-50.2952,113.9216.10717,7.87756,49.582c9.185,5.08711,14.8749,8.987,18.20362,11.97818,5.05882-1.15422,10.58716-5.44353-18.20362-21.38921l-7.87756-52.719-113.9216,3.02983L802.218,714.03506S769.62985,731.34968,785.21906,734.69812Z"
-      transform="translate(-31.39089 -100.5)"
      opacity="0.1"
+      transform="translate(-31.39089 -100.5)"
    />
    <rect
-      x="578.43291"
-      y="212.68859"
-      width="513.25314"
+      fill="#2f2e41"
      height="357.51989"
      rx="18.04568"
-      fill="#2f2e41"
+      width="513.25314"
+      x="578.43291"
+      y="212.68859"
    />
    <rect
+      fill="#3f3d56"
+      height="267.83694"
+      width="478.71308"
      x="595.70294"
      y="231.77652"
-      width="478.71308"
-      height="267.83694"
-      fill="#3f3d56"
    />
-    <circle cx="835.05948" cy="223.29299" r="3.02983" fill="#f2f2f2" />
+    <circle cx="835.05948" cy="223.29299" fill="#f2f2f2" r="3.02983" />
    <path
      d="M1123.07694,621.32226V652.6628a18.04341,18.04341,0,0,1-18.04568,18.04568H627.86949A18.04341,18.04341,0,0,1,609.8238,652.6628V621.32226Z"
-      transform="translate(-31.39089 -100.5)"
      fill="#2f2e41"
+      transform="translate(-31.39089 -100.5)"
    />
    <polygon
-      points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466"
      fill="#2f2e41"
+      points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466"
    />
    <path
      d="M1125.828,762.03359c-.59383,2.539-2.83591,5.21743-7.90178,7.75032-18.179,9.08949-55.1429-2.42386-55.1429-2.42386s-28.4804-4.84773-28.4804-17.573a22.72457,22.72457,0,0,1,2.49658-1.48459c7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
-      transform="translate(-31.39089 -100.5)"
      fill="#2f2e41"
+      transform="translate(-31.39089 -100.5)"
    />
    <path
      d="M1125.828,762.03359c-22.251,8.526-42.0843,9.1622-62.43871-4.975-10.26507-7.12617-19.59089-8.88955-26.58979-8.75618,7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
-      transform="translate(-31.39089 -100.5)"
      opacity="0.1"
+      transform="translate(-31.39089 -100.5)"
    />
    <ellipse
      cx="1066.53846"
      cy="654.13477"
+      fill="#f2f2f2"
      rx="7.87756"
      ry="2.42386"
-      fill="#f2f2f2"
    />
-    <circle cx="835.05948" cy="545.66686" r="11.51335" fill="#f2f2f2" />
+    <circle cx="835.05948" cy="545.66686" fill="#f2f2f2" r="11.51335" />
    <polygon
-      points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466"
      opacity="0.1"
+      points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466"
    />
-    <rect x="108.60911" y="159" width="208" height="242" fill="#2f2e41" />
-    <rect x="87.60911" y="135" width="250" height="86" fill="#3f3d56" />
-    <rect x="87.60911" y="237" width="250" height="86" fill="#3f3d56" />
-    <rect x="87.60911" y="339" width="250" height="86" fill="#3f3d56" />
+    <rect fill="#2f2e41" height="242" width="208" x="108.60911" y="159" />
+    <rect fill="#3f3d56" height="86" width="250" x="87.60911" y="135" />
+    <rect fill="#3f3d56" height="86" width="250" x="87.60911" y="237" />
+    <rect fill="#3f3d56" height="86" width="250" x="87.60911" y="339" />
    <rect
+      fill="#6c63ff"
+      height="16"
+      opacity="0.4"
+      width="16"
      x="271.60911"
      y="150"
-      width="16"
-      height="16"
-      fill="#6c63ff"
-      opacity="0.4"
    />
    <rect
+      fill="#6c63ff"
+      height="16"
+      opacity="0.8"
+      width="16"
      x="294.60911"
      y="150"
-      width="16"
-      height="16"
-      fill="#6c63ff"
-      opacity="0.8"
    />
-    <rect x="317.60911" y="150" width="16" height="16" fill="#6c63ff" />
+    <rect fill="#6c63ff" height="16" width="16" x="317.60911" y="150" />
    <rect
+      fill="#6c63ff"
+      height="16"
+      opacity="0.4"
+      width="16"
      x="271.60911"
      y="251"
-      width="16"
-      height="16"
-      fill="#6c63ff"
-      opacity="0.4"
    />
    <rect
+      fill="#6c63ff"
+      height="16"
+      opacity="0.8"
+      width="16"
      x="294.60911"
      y="251"
-      width="16"
-      height="16"
-      fill="#6c63ff"
-      opacity="0.8"
    />
-    <rect x="317.60911" y="251" width="16" height="16" fill="#6c63ff" />
+    <rect fill="#6c63ff" height="16" width="16" x="317.60911" y="251" />
    <rect
+      fill="#6c63ff"
+      height="16"
+      opacity="0.4"
+      width="16"
      x="271.60911"
      y="352"
-      width="16"
-      height="16"
-      fill="#6c63ff"
-      opacity="0.4"
    />
    <rect
+      fill="#6c63ff"
+      height="16"
+      opacity="0.8"
+      width="16"
      x="294.60911"
      y="352"
-      width="16"
-      height="16"
-      fill="#6c63ff"
-      opacity="0.8"
    />
-    <rect x="317.60911" y="352" width="16" height="16" fill="#6c63ff" />
-    <circle cx="316.60911" cy="538" r="79" fill="#2f2e41" />
-    <rect x="280.60911" y="600" width="24" height="43" fill="#2f2e41" />
-    <rect x="328.60911" y="600" width="24" height="43" fill="#2f2e41" />
-    <ellipse cx="300.60911" cy="643.5" rx="20" ry="7.5" fill="#2f2e41" />
-    <ellipse cx="348.60911" cy="642.5" rx="20" ry="7.5" fill="#2f2e41" />
-    <circle cx="318.60911" cy="518" r="27" fill="#fff" />
-    <circle cx="318.60911" cy="518" r="9" fill="#3f3d56" />
+    <rect fill="#6c63ff" height="16" width="16" x="317.60911" y="352" />
+    <circle cx="316.60911" cy="538" fill="#2f2e41" r="79" />
+    <rect fill="#2f2e41" height="43" width="24" x="280.60911" y="600" />
+    <rect fill="#2f2e41" height="43" width="24" x="328.60911" y="600" />
+    <ellipse cx="300.60911" cy="643.5" fill="#2f2e41" rx="20" ry="7.5" />
+    <ellipse cx="348.60911" cy="642.5" fill="#2f2e41" rx="20" ry="7.5" />
+    <circle cx="318.60911" cy="518" fill="#fff" r="27" />
+    <circle cx="318.60911" cy="518" fill="#3f3d56" r="9" />
    <path
      d="M271.36733,565.03228c-6.37889-28.56758,14.01185-57.43392,45.544-64.47477s62.2651,10.41,68.644,38.9776-14.51861,39.10379-46.05075,46.14464S277.74622,593.59986,271.36733,565.03228Z"
-      transform="translate(-31.39089 -100.5)"
      fill="#6c63ff"
+      transform="translate(-31.39089 -100.5)"
    />
    <ellipse
      cx="417.21511"
      cy="611.34365"
+      fill="#2f2e41"
      rx="39.5"
      ry="12.40027"
      transform="translate(-238.28665 112.98044) rotate(-23.17116)"
-      fill="#2f2e41"
    />
    <ellipse
      cx="269.21511"
      cy="664.34365"
+      fill="#2f2e41"
      rx="39.5"
      ry="12.40027"
      transform="translate(-271.07969 59.02084) rotate(-23.17116)"
-      fill="#2f2e41"
    />
    <path
      d="M394,661.5c0,7.732-19.90861,23-42,23s-43-14.268-43-22,20.90861-6,43-6S394,653.768,394,661.5Z"
-      transform="translate(-31.39089 -100.5)"
      fill="#fff"
+      transform="translate(-31.39089 -100.5)"
    />
  </svg>
 </template>
--- a/packages/business/common-ui/src/global-search/search-panel.vue
+++ b/packages/business/common-ui/src/global-search/search-panel.vue
@@ -249,20 +249,20 @@ onMounted(() => {
        <li
          v-for="(item, index) in searchResults"
          :key="item.path"
-          :data-index="index"
-          :data-search-item="index"
-          class="bg-accent flex-center group mb-3 w-full cursor-pointer rounded-lg px-4 py-4"
          :class="
            activeIndex === index
              ? 'active bg-primary text-primary-foreground text-muted-foreground'
              : ''
          "
+          :data-index="index"
+          :data-search-item="index"
+          class="bg-accent flex-center group mb-3 w-full cursor-pointer rounded-lg px-4 py-4"
          @mouseenter="handleMouseenter"
        >
          <VbenIcon
-            fallback
            :icon="item.icon"
            class="mr-2 size-5 flex-shrink-0"
+            fallback
          />

          <span class="flex-1">{{ item.name }}</span>
--- a/packages/business/common-ui/src/preferences/blocks/general/animation.vue
+++ b/packages/business/common-ui/src/preferences/blocks/general/animation.vue
@@ -35,13 +35,13 @@ function handleClick(value: string) {
    <div
      v-for="item in transitionPreset"
      :key="item"
-      class="outline-box p-2"
      :class="{
        'outline-box-active': transitionName === item,
      }"
+      class="outline-box p-2"
      @click="handleClick(item)"
    >
-      <div class="bg-accent h-10 w-12 rounded-md" :class="`${item}-slow`"></div>
+      <div :class="`${item}-slow`" class="bg-accent h-10 w-12 rounded-md"></div>
    </div>
  </div>
 </template>
--- a/packages/business/common-ui/src/preferences/blocks/layout/breadcrumb.vue
+++ b/packages/business/common-ui/src/preferences/blocks/layout/breadcrumb.vue
@@ -45,8 +45,8 @@ const disableItem = computed(() => {
  </SwitchItem>
  <ToggleItem
    v-model="breadcrumbStyleType"
-    :items="typeItems"
    :disabled="disableItem"
+    :items="typeItems"
  >
    {{ $t('preference.breadcrumb-style') }}
  </ToggleItem>
--- a/packages/business/common-ui/src/preferences/blocks/layout/header.vue
+++ b/packages/business/common-ui/src/preferences/blocks/layout/header.vue
@@ -41,8 +41,8 @@ const localeItems: SelectListItem[] = [
  </SwitchItem>
  <SelectItem
    v-model="headerMode"
-    :items="localeItems"
    :disabled="!headerEnable"
+    :items="localeItems"
  >
    {{ $t('preference.mode') }}
  </SelectItem>
--- a/packages/business/common-ui/src/preferences/blocks/layout/navigation.vue
+++ b/packages/business/common-ui/src/preferences/blocks/layout/navigation.vue
@@ -25,8 +25,8 @@ const stylesItems: SelectListItem[] = [
 <template>
  <ToggleItem
    v-model="navigationStyleType"
-    :items="stylesItems"
    :disabled="disabled"
+    :items="stylesItems"
  >
    {{ $t('preference.navigation-style') }}
  </ToggleItem>
--- a/packages/business/common-ui/src/preferences/blocks/select-item.vue
+++ b/packages/business/common-ui/src/preferences/blocks/select-item.vue
@@ -37,11 +37,11 @@ const slots = useSlots();

 <template>
  <div
-    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
    :class="{
      'hover:bg-accent': !slots.tip,
      'pointer-events-none opacity-50': disabled,
    }"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
  >
    <span class="flex items-center text-sm">
      <slot></slot>
--- a/packages/business/common-ui/src/preferences/blocks/switch-item.vue
+++ b/packages/business/common-ui/src/preferences/blocks/switch-item.vue
@@ -23,10 +23,10 @@ function handleClick() {

 <template>
  <div
-    class="hover:bg-accent my-1 flex w-full items-center justify-between rounded-md px-2 py-2"
    :class="{
      'pointer-events-none opacity-50': disabled,
    }"
+    class="hover:bg-accent my-1 flex w-full items-center justify-between rounded-md px-2 py-2"
    @click="handleClick"
  >
    <span class="flex items-center text-sm">
--- a/packages/business/common-ui/src/preferences/blocks/toggle-item.vue
+++ b/packages/business/common-ui/src/preferences/blocks/toggle-item.vue
@@ -17,19 +17,19 @@ const modelValue = defineModel<string>();

 <template>
  <div
-    disabled
-    class="hover:bg-accent flex w-full items-center justify-between rounded-md px-2 py-2"
    :class="{
      'pointer-events-none opacity-50': disabled,
    }"
+    class="hover:bg-accent flex w-full items-center justify-between rounded-md px-2 py-2"
+    disabled
  >
    <span class="text-sm"><slot></slot></span>
    <ToggleGroup
      v-model="modelValue"
+      class="gap-2"
+      size="sm"
      type="single"
      variant="outline"
-      size="sm"
-      class="gap-2"
    >
      <template v-for="item in items" :key="item.value">
        <ToggleGroupItem
--- a/packages/business/common-ui/src/preferences/preferences-widget.vue
+++ b/packages/business/common-ui/src/preferences/preferences-widget.vue
@@ -10,218 +10,125 @@ import Preferences from './preferences.vue';
 </script>
 <template>
  <Preferences
-    :color-primary-presets="COLOR_PRIMARY_RESETS"
-    :app-locale="preferences.app.locale"
-    :app-layout="preferences.app.layout"
-    :app-dynamic-title="preferences.app.dynamicTitle"
-    :app-theme-mode="preferences.app.themeMode"
    :app-color-gray-mode="preferences.app.colorGrayMode"
    :app-color-weak-mode="preferences.app.colorWeakMode"
-    :app-semi-dark-menu="preferences.app.semiDarkMenu"
    :app-content-compact="preferences.app.contentCompact"
+    :app-dynamic-title="preferences.app.dynamicTitle"
+    :app-layout="preferences.app.layout"
+    :app-locale="preferences.app.locale"
+    :app-semi-dark-menu="preferences.app.semiDarkMenu"
+    :app-theme-mode="preferences.app.themeMode"
+    :breadcrumb-enable="preferences.breadcrumb.enable"
+    :breadcrumb-hide-only-one="preferences.breadcrumb.hideOnlyOne"
+    :breadcrumb-home="preferences.breadcrumb.showHome"
+    :breadcrumb-icon="preferences.breadcrumb.showIcon"
+    :breadcrumb-style="preferences.breadcrumb.styleType"
+    :color-primary-presets="COLOR_PRIMARY_RESETS"
+    :footer-enable="preferences.footer.enable"
+    :footer-fixed="preferences.footer.fixed"
+    :header-enable="preferences.header.enable"
+    :header-mode="preferences.header.mode"
+    :navigation-accordion="preferences.navigation.accordion"
+    :navigation-split="preferences.navigation.split"
+    :navigation-style-type="preferences.navigation.styleType"
+    :shortcut-keys-enable="preferences.shortcutKeys.enable"
+    :sidebar-collapse="preferences.sidebar.collapse"
+    :sidebar-collapse-show-title="preferences.sidebar.collapseShowTitle"
+    :sidebar-enable="preferences.sidebar.enable"
+    :tabbar-enable="preferences.tabbar.enable"
+    :tabbar-show-icon="preferences.tabbar.showIcon"
+    :theme-color-primary="preferences.theme.colorPrimary"
    :transition-enable="preferences.transition.enable"
    :transition-name="preferences.transition.name"
    :transition-progress="preferences.transition.progress"
-    :theme-color-primary="preferences.theme.colorPrimary"
-    :sidebar-enable="preferences.sidebar.enable"
-    :sidebar-collapse="preferences.sidebar.collapse"
-    :sidebar-collapse-show-title="preferences.sidebar.collapseShowTitle"
-    :header-enable="preferences.header.enable"
-    :header-mode="preferences.header.mode"
-    :breadcrumb-enable="preferences.breadcrumb.enable"
-    :breadcrumb-style="preferences.breadcrumb.styleType"
-    :breadcrumb-icon="preferences.breadcrumb.showIcon"
-    :breadcrumb-home="preferences.breadcrumb.showHome"
-    :breadcrumb-hide-only-one="preferences.breadcrumb.hideOnlyOne"
-    :tabbar-enable="preferences.tabbar.enable"
-    :tabbar-show-icon="preferences.tabbar.showIcon"
-    :navigation-accordion="preferences.navigation.accordion"
-    :navigation-style-type="preferences.navigation.styleType"
-    :navigation-split="preferences.navigation.split"
-    :footer-enable="preferences.footer.enable"
-    :footer-fixed="preferences.footer.fixed"
-    :shortcut-keys-enable="preferences.shortcutKeys.enable"
+    @update:app-color-gray-mode="
+      (val) => updatePreferences({ app: { colorGrayMode: val } })
+    "
+    @update:app-color-weak-mode="
+      (val) => updatePreferences({ app: { colorWeakMode: val } })
+    "
+    @update:app-content-compact="
+      (val) => updatePreferences({ app: { contentCompact: val } })
+    "
+    @update:app-dynamic-title="
+      (val) => updatePreferences({ app: { dynamicTitle: val } })
+    "
+    @update:app-layout="(val) => updatePreferences({ app: { layout: val } })"
    @update:app-locale="
      (val) => {
-        updatePreferences({
-          app: { locale: val },
-        });
+        updatePreferences({ app: { locale: val } });
        loadLocaleMessages(val);
      }
    "
-    @update:app-layout="
-      (val) =>
-        updatePreferences({
-          app: { layout: val },
-        })
-    "
-    @update:app-dynamic-title="
-      (val) =>
-        updatePreferences({
-          app: { dynamicTitle: val },
-        })
+    @update:app-semi-dark-menu="
+      (val) => updatePreferences({ app: { semiDarkMenu: val } })
    "
    @update:app-theme-mode="
-      (val) =>
-        updatePreferences({
-          app: { themeMode: val },
-        })
-    "
-    @update:app-color-gray-mode="
-      (val) =>
-        updatePreferences({
-          app: { colorGrayMode: val },
-        })
-    "
-    @update:app-color-weak-mode="
-      (val) =>
-        updatePreferences({
-          app: { colorWeakMode: val },
-        })
-    "
-    @update:app-semi-dark-menu="
-      (val) =>
-        updatePreferences({
-          app: { semiDarkMenu: val },
-        })
-    "
-    @update:app-content-compact="
-      (val) =>
-        updatePreferences({
-          app: { contentCompact: val },
-        })
-    "
-    @update:transition-enable="
-      (val) =>
-        updatePreferences({
-          transition: { enable: val },
-        })
-    "
-    @update:transition-name="
-      (val) =>
-        updatePreferences({
-          transition: { name: val },
-        })
-    "
-    @update:transition-progress="
-      (val) =>
-        updatePreferences({
-          transition: { progress: val },
-        })
-    "
-    @update:theme-color-primary="
-      (val) =>
-        updatePreferences({
-          theme: { colorPrimary: val },
-        })
-    "
-    @update:sidebar-enable="
-      (val) =>
-        updatePreferences({
-          sidebar: { enable: val },
-        })
-    "
-    @update:sidebar-collapse="
-      (val) =>
-        updatePreferences({
-          sidebar: { collapse: val },
-        })
-    "
-    @update:sidebar-collapse-show-title="
-      (val) =>
-        updatePreferences({
-          sidebar: { collapseShowTitle: val },
-        })
-    "
-    @update:header-enable="
-      (val) =>
-        updatePreferences({
-          header: { enable: val },
-        })
-    "
-    @update:header-mode="
-      (val) =>
-        updatePreferences({
-          header: { mode: val },
-        })
+      (val) => updatePreferences({ app: { themeMode: val } })
    "
    @update:breadcrumb-enable="
-      (val) =>
-        updatePreferences({
-          breadcrumb: { enable: val },
-        })
-    "
-    @update:breadcrumb-style-type="
-      (val) =>
-        updatePreferences({
-          breadcrumb: { styleType: val },
-        })
-    "
-    @update:breadcrumb-show-icon="
-      (val) =>
-        updatePreferences({
-          breadcrumb: { showIcon: val },
-        })
-    "
-    @update:breadcrumb-show-home="
-      (val) =>
-        updatePreferences({
-          breadcrumb: { showHome: val },
-        })
+      (val) => updatePreferences({ breadcrumb: { enable: val } })
    "
    @update:breadcrumb-hide-only-one="
-      (val) =>
-        updatePreferences({
-          breadcrumb: { hideOnlyOne: val },
-        })
+      (val) => updatePreferences({ breadcrumb: { hideOnlyOne: val } })
    "
-    @update:tabbar-enable="
-      (val) =>
-        updatePreferences({
-          tabbar: { enable: val },
-        })
+    @update:breadcrumb-show-home="
+      (val) => updatePreferences({ breadcrumb: { showHome: val } })
    "
-    @update:tabbar-show-icon="
-      (val) =>
-        updatePreferences({
-          tabbar: { showIcon: val },
-        })
+    @update:breadcrumb-show-icon="
+      (val) => updatePreferences({ breadcrumb: { showIcon: val } })
    "
-    @update:navigation-accordion="
-      (val) =>
-        updatePreferences({
-          navigation: { accordion: val },
-        })
-    "
-    @update:navigation-style-type="
-      (val) =>
-        updatePreferences({
-          navigation: { styleType: val },
-        })
-    "
-    @update:navigation-split="
-      (val) =>
-        updatePreferences({
-          navigation: { split: val },
-        })
+    @update:breadcrumb-style-type="
+      (val) => updatePreferences({ breadcrumb: { styleType: val } })
    "
    @update:footer-enable="
-      (val) =>
-        updatePreferences({
-          footer: { enable: val },
-        })
+      (val) => updatePreferences({ footer: { enable: val } })
    "
    @update:footer-fixed="
-      (val) =>
-        updatePreferences({
-          footer: { fixed: val },
-        })
+      (val) => updatePreferences({ footer: { fixed: val } })
+    "
+    @update:header-enable="
+      (val) => updatePreferences({ header: { enable: val } })
+    "
+    @update:header-mode="(val) => updatePreferences({ header: { mode: val } })"
+    @update:navigation-accordion="
+      (val) => updatePreferences({ navigation: { accordion: val } })
+    "
+    @update:navigation-split="
+      (val) => updatePreferences({ navigation: { split: val } })
+    "
+    @update:navigation-style-type="
+      (val) => updatePreferences({ navigation: { styleType: val } })
    "
    @update:shortcut-keys-enable="
-      (val) =>
-        updatePreferences({
-          shortcutKeys: { enable: val },
-        })
+      (val) => updatePreferences({ shortcutKeys: { enable: val } })
+    "
+    @update:sidebar-collapse="
+      (val) => updatePreferences({ sidebar: { collapse: val } })
+    "
+    @update:sidebar-collapse-show-title="
+      (val) => updatePreferences({ sidebar: { collapseShowTitle: val } })
+    "
+    @update:sidebar-enable="
+      (val) => updatePreferences({ sidebar: { enable: val } })
+    "
+    @update:tabbar-enable="
+      (val) => updatePreferences({ tabbar: { enable: val } })
+    "
+    @update:tabbar-show-icon="
+      (val) => updatePreferences({ tabbar: { showIcon: val } })
+    "
+    @update:theme-color-primary="
+      (val) => updatePreferences({ theme: { colorPrimary: val } })
+    "
+    @update:transition-enable="
+      (val) => updatePreferences({ transition: { enable: val } })
+    "
+    @update:transition-name="
+      (val) => updatePreferences({ transition: { name: val } })
+    "
+    @update:transition-progress="
+      (val) => updatePreferences({ transition: { progress: val } })
    "
  />
 </template>
--- a/packages/business/common-ui/src/preferences/preferences.vue
+++ b/packages/business/common-ui/src/preferences/preferences.vue
@@ -172,9 +172,9 @@ function handleReset() {
      </template>
      <template #extra>
        <VbenIconButton
-          class="relative"
          :disabled="!diffPreference"
          :tooltip="$t('preference.reset-tip')"
+          class="relative"
        >
          <span
            v-if="diffPreference"
@@ -216,9 +216,9 @@ function handleReset() {

            <Block :title="$t('preference.sidebar')">
              <Sidebar
-                v-model:sidebar-enable="sidebarEnable"
-                v-model:sidebar-collapse="sidebarCollapse"
                v-model:side-collapse-show-title="sidebarCollapseShowTitle"
+                v-model:sidebar-collapse="sidebarCollapse"
+                v-model:sidebar-enable="sidebarEnable"
                :disabled="!isSideMode"
              />
            </Block>
@@ -233,9 +233,9 @@ function handleReset() {

            <Block :title="$t('preference.navigation-menu')">
              <Navigation
-                v-model:navigation-style-type="navigationStyleType"
-                v-model:navigation-split="navigationSplit"
                v-model:navigation-accordion="navigationAccordion"
+                v-model:navigation-split="navigationSplit"
+                v-model:navigation-style-type="navigationStyleType"
                :disabled="isFullContent"
                :disabled-navigation-split="!isMixedNav"
              />
@@ -244,10 +244,10 @@ function handleReset() {
            <Block :title="$t('preference.breadcrumb')">
              <Breadcrumb
                v-model:breadcrumb-enable="breadcrumbEnable"
+                v-model:breadcrumb-hide-only-one="breadcrumbHideOnlyOne"
+                v-model:breadcrumb-show-home="breadcrumbShowHome"
                v-model:breadcrumb-show-icon="breadcrumbShowIcon"
                v-model:breadcrumb-style-type="breadcrumbStyleType"
-                v-model:breadcrumb-show-home="breadcrumbShowHome"
-                v-model:breadcrumb-hide-only-one="breadcrumbHideOnlyOne"
                :disabled="
                  !showBreadcrumbConfig || !(isSideNav || isSideMixedNav)
                "
@@ -270,17 +270,17 @@ function handleReset() {
          <template #general>
            <Block :title="$t('preference.general')">
              <General
-                v-model:app-locale="appLocale"
                v-model:app-dynamic-title="appDynamicTitle"
+                v-model:app-locale="appLocale"
                v-model:shortcut-keys-enable="shortcutKeysEnable"
              />
            </Block>

            <Block :title="$t('preference.animation')">
              <Animation
-                v-model:transition-progress="transitionProgress"
-                v-model:transition-name="transitionName"
                v-model:transition-enable="transitionEnable"
+                v-model:transition-name="transitionName"
+                v-model:transition-progress="transitionProgress"
              />
            </Block>
          </template>
@@ -306,10 +306,10 @@ function handleReset() {

      <template #footer>
        <VbenButton
-          class="mx-6 w-full"
-          variant="default"
-          size="sm"
          :disabled="!diffPreference"
+          class="mx-6 w-full"
+          size="sm"
+          variant="default"
          @click="handleCopy"
        >
          <IcRoundFolderCopy class="mr-2 size-3" />
--- a/packages/business/common-ui/src/preferences/trigger.vue
+++ b/packages/business/common-ui/src/preferences/trigger.vue
@@ -11,8 +11,8 @@ defineOptions({

 <template>
  <VbenButton
-    class="bg-primary flex-col-center h-9 w-9 cursor-pointer rounded-l-md rounded-r-none border-none"
    :title="$t('preference.preferences')"
+    class="bg-primary flex-col-center h-9 w-9 cursor-pointer rounded-l-md rounded-r-none border-none"
  >
    <IconSetting class="text-lg" />
  </VbenButton>
--- a/packages/business/common-ui/src/theme-toggle/theme-toggle.vue
+++ b/packages/business/common-ui/src/theme-toggle/theme-toggle.vue
@@ -55,7 +55,7 @@ const PRESETS = [
 </script>
 <template>
  <div>
-    <VbenTooltip side="bottom" :disabled="!shouldOnHover">
+    <VbenTooltip :disabled="!shouldOnHover" side="bottom">
      <template #trigger>
        <ThemeButton
          :model-value="isDark"
@@ -65,9 +65,9 @@ const PRESETS = [
      </template>
      <ToggleGroup
        :model-value="preferences.app.themeMode"
+        class="gap-2"
        type="single"
        variant="outline"
-        class="gap-2"
        @update:model-value="
          (val) =>
            updatePreferences({ app: { themeMode: val as ThemeModeType } })
--- a/packages/business/common-ui/src/user-dropdown/user-dropdown.vue
+++ b/packages/business/common-ui/src/user-dropdown/user-dropdown.vue
@@ -110,10 +110,10 @@ if (shortcutKeys.value) {
 <template>
  <VbenAlertDialog
    v-model:open="openDialog"
-    :content="$t('widgets.logout-tip')"
-    :title="$t('common.prompt')"
    :cancel-text="$t('common.cancel')"
+    :content="$t('widgets.logout-tip')"
    :submit-text="$t('common.confirm')"
+    :title="$t('common.prompt')"
    @submit="handleSubmitLogout"
  />

--- a/packages/business/layouts/src/authentication/authentication.vue
+++ b/packages/business/layouts/src/authentication/authentication.vue
@@ -28,12 +28,12 @@ const appName = computed(() => preferences.app.name);

    <div class="absolute left-0 top-0 z-10 flex flex-1">
      <div
-        class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
        :class="
          authPanelLeft || authPanelCenter
            ? 'lg:text-foreground'
            : 'lg:text-white'
        "
+        class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
      >
        <img
          :alt="appName"
--- a/packages/business/layouts/src/authentication/from-view.vue
+++ b/packages/business/layouts/src/authentication/from-view.vue
@@ -14,7 +14,7 @@ defineOptions({
    </slot>

    <RouterView v-slot="{ Component, route }">
-      <Transition name="slide-right" mode="out-in" appear>
+      <Transition appear mode="out-in" name="slide-right">
        <KeepAlive :include="['Login']">
          <component
            :is="Component"
--- a/packages/business/layouts/src/basic/content/content.vue
+++ b/packages/business/layouts/src/basic/content/content.vue
@@ -41,11 +41,11 @@ function getTransitionName(route: RouteLocationNormalizedLoaded) {
 <template>
  <IFrameRouterView />
  <RouterView v-slot="{ Component, route }">
-    <Transition :name="getTransitionName(route)" mode="out-in" appear>
+    <Transition :name="getTransitionName(route)" appear mode="out-in">
      <KeepAlive
        v-if="keepAlive"
-        :include="getCacheTabs"
        :exclude="getExcludeTabs"
+        :include="getCacheTabs"
      >
        <component
          :is="Component"
--- a/packages/business/layouts/src/basic/header/header.vue
+++ b/packages/business/layouts/src/basic/header/header.vue
@@ -31,9 +31,9 @@ const accessStore = useAccessStore();
  </div>
  <div class="flex h-full min-w-0 flex-shrink-0 items-center">
    <GlobalSearch
-      class="mr-4"
      :enable-shortcut-key="preferences.shortcutKeys.enable"
      :menus="accessStore.getAccessMenus"
+      class="mr-4"
    />
    <ThemeToggle class="mr-2" />
    <LanguageToggle class="mr-2" />
--- a/packages/business/layouts/src/basic/layout.vue
+++ b/packages/business/layouts/src/basic/layout.vue
@@ -103,56 +103,38 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
 <template>
  <VbenAdminLayout
    v-model:side-extra-visible="extraVisible"
-    :side-extra-collapse="preferences.sidebar.extraCollapse"
-    :side-expand-on-hover="preferences.sidebar.expandOnHover"
-    :side-collapse="preferences.sidebar.collapse"
-    :side-collapse-show-title="preferences.sidebar.collapseShowTitle"
    :content-compact="preferences.app.contentCompact"
+    :footer-enable="preferences.footer.enable"
+    :footer-fixed="preferences.footer.fixed"
+    :header-hidden="preferences.header.hidden"
+    :header-mode="preferences.header.mode"
+    :header-visible="preferences.header.enable"
    :is-mobile="preferences.app.isMobile"
    :layout="layout"
-    :header-mode="preferences.header.mode"
-    :footer-fixed="preferences.footer.fixed"
+    :side-collapse="preferences.sidebar.collapse"
+    :side-collapse-show-title="preferences.sidebar.collapseShowTitle"
+    :side-expand-on-hover="preferences.sidebar.expandOnHover"
+    :side-extra-collapse="preferences.sidebar.extraCollapse"
+    :side-hidden="preferences.sidebar.hidden"
    :side-semi-dark="preferences.app.semiDarkMenu"
    :side-theme="theme"
-    :side-hidden="preferences.sidebar.hidden"
    :side-visible="sideVisible"
-    :footer-visible="preferences.footer.enable"
-    :header-visible="preferences.header.enable"
-    :header-hidden="preferences.header.hidden"
    :side-width="preferences.sidebar.width"
    :tabs-visible="preferences.tabbar.enable"
-    @update:side-extra-collapse="
-      (value: boolean) =>
-        updatePreferences({
-          sidebar: {
-            extraCollapse: value,
-          },
-        })
+    @side-mouse-leave="handleSideMouseLeave"
+    @update:side-collapse="
+      (value: boolean) => updatePreferences({ sidebar: { collapse: value } })
    "
    @update:side-expand-on-hover="
      (value: boolean) =>
-        updatePreferences({
-          sidebar: {
-            expandOnHover: value,
-          },
-        })
+        updatePreferences({ sidebar: { expandOnHover: value } })
    "
-    @update:side-collapse="
+    @update:side-extra-collapse="
      (value: boolean) =>
-        updatePreferences({
-          sidebar: {
-            collapse: value,
-          },
-        })
+        updatePreferences({ sidebar: { extraCollapse: value } })
    "
-    @side-mouse-leave="handleSideMouseLeave"
    @update:side-visible="
-      (value: boolean) =>
-        updatePreferences({
-          sidebar: {
-            enable: value,
-          },
-        })
+      (value: boolean) => updatePreferences({ sidebar: { enable: value } })
    "
  >
    <template v-if="preferences.app.showPreference" #preferences>
@@ -167,12 +149,12 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
    <!-- logo -->
    <template #logo>
      <VbenLogo
+        :alt="preferences.app.name"
+        :class="logoClass"
        :collapse="logoCollapse"
        :src="preferences.logo.source"
        :text="preferences.app.name"
        :theme="showHeaderNav ? headerMenuTheme : theme"
-        :alt="preferences.app.name"
-        :class="logoClass"
      />
    </template>
    <!-- 头部区域 -->
@@ -184,19 +166,19 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
        >
          <Breadcrumb
            :hide-when-only-one="preferences.breadcrumb.hideOnlyOne"
-            :type="preferences.breadcrumb.styleType"
-            :show-icon="preferences.breadcrumb.showIcon"
            :show-home="preferences.breadcrumb.showHome"
+            :show-icon="preferences.breadcrumb.showIcon"
+            :type="preferences.breadcrumb.styleType"
          />
        </template>
        <template v-if="showHeaderNav" #menu>
          <LayoutMenu
-            class="w-full"
-            :rounded="isMenuRounded"
-            mode="horizontal"
-            :theme="headerMenuTheme"
-            :menus="wrapperMenus(headerMenus)"
            :default-active="headerActive"
+            :menus="wrapperMenus(headerMenus)"
+            :rounded="isMenuRounded"
+            :theme="headerMenuTheme"
+            class="w-full"
+            mode="horizontal"
            @select="handleMenuSelect"
          />
        </template>
@@ -211,44 +193,44 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
    <!-- 侧边菜单区域 -->
    <template #menu>
      <LayoutMenu
-        mode="vertical"
        :accordion="preferences.navigation.accordion"
-        :rounded="isMenuRounded"
-        :collapse-show-title="preferences.sidebar.collapseShowTitle"
        :collapse="preferences.sidebar.collapse"
-        :theme="theme"
-        :menus="wrapperMenus(sideMenus)"
+        :collapse-show-title="preferences.sidebar.collapseShowTitle"
        :default-active="sideActive"
+        :menus="wrapperMenus(sideMenus)"
+        :rounded="isMenuRounded"
+        :theme="theme"
+        mode="vertical"
        @select="handleMenuSelect"
      />
    </template>
    <template #mixed-menu>
      <LayoutMixedMenu
-        :rounded="isMenuRounded"
-        :collapse="!preferences.sidebar.collapseShowTitle"
        :active-path="extraActiveMenu"
+        :collapse="!preferences.sidebar.collapseShowTitle"
+        :rounded="isMenuRounded"
        :theme="theme"
-        @select="handleMixedMenuSelect"
        @default-select="handleDefaultSelect"
        @enter="handleMenuMouseEnter"
+        @select="handleMixedMenuSelect"
      />
    </template>
    <!-- 侧边额外区域 -->
    <template #side-extra>
      <LayoutExtraMenu
        :accordion="preferences.navigation.accordion"
-        :rounded="isMenuRounded"
-        :menus="wrapperMenus(extraMenus)"
        :collapse="preferences.sidebar.extraCollapse"
+        :menus="wrapperMenus(extraMenus)"
+        :rounded="isMenuRounded"
        :theme="theme"
      />
    </template>
    <template #side-extra-title>
      <VbenLogo
        v-if="preferences.logo.enable"
+        :alt="preferences.app.name"
        :text="preferences.app.name"
        :theme="theme"
-        :alt="preferences.app.name"
      />
    </template>

--- a/packages/business/layouts/src/basic/menu/extra-menu.vue
+++ b/packages/business/layouts/src/basic/menu/extra-menu.vue
@@ -27,11 +27,11 @@ async function handleSelect(key: string) {

 <template>
  <Menu
-    :rounded="rounded"
    :accordion="accordion"
    :collapse="collapse"
    :default-active="route.path"
    :menus="menus"
+    :rounded="rounded"
    :theme="theme"
    mode="vertical"
    @select="handleSelect"
--- a/packages/business/layouts/src/basic/menu/menu.vue
+++ b/packages/business/layouts/src/basic/menu/menu.vue
@@ -23,14 +23,14 @@ function handleMenuSelect(key: string) {

 <template>
  <Menu
-    :rounded="rounded"
-    :collapse-show-title="collapseShowTitle"
-    :collapse="collapse"
    :accordion="accordion"
+    :collapse="collapse"
+    :collapse-show-title="collapseShowTitle"
    :default-active="defaultActive"
    :menus="menus"
-    :theme="theme"
    :mode="mode"
+    :rounded="rounded"
+    :theme="theme"
    @select="handleMenuSelect"
  />
 </template>
--- a/packages/business/layouts/src/basic/menu/mixed-menu.vue
+++ b/packages/business/layouts/src/basic/menu/mixed-menu.vue
@@ -42,12 +42,12 @@ onBeforeMount(() => {

 <template>
  <NormalMenu
-    :rounded="rounded"
+    :active-path="activePath"
    :collapse="collapse"
    :menus="menus"
-    :active-path="activePath"
+    :rounded="rounded"
    :theme="theme"
-    @select="handleSelect"
    @enter="(menu) => emit('enter', menu)"
+    @select="handleSelect"
  />
 </template>
--- a/packages/business/layouts/src/basic/tabs/tabs.vue
+++ b/packages/business/layouts/src/basic/tabs/tabs.vue
@@ -21,12 +21,12 @@ const {

 <template>
  <TabsView
+    :active="currentActive"
+    :menus="createContextMenus"
    :show-icon="showIcon"
    :tabs="currentTabs"
-    :menus="createContextMenus"
-    :active="currentActive"
-    @update:active="handleClick"
    @close="handleClose"
    @un-push-pin="handleUnPushPin"
+    @update:active="handleClick"
  />
 </template>
--- a/packages/business/layouts/src/basic/widgets/breadcrumb.vue
+++ b/packages/business/layouts/src/basic/widgets/breadcrumb.vue
@@ -75,15 +75,15 @@ function handleSelect(path: string) {
  <VbenBreadcrumb
    v-if="type === 'normal'"
    :breadcrumbs="breadcrumbs"
-    class="ml-2"
    :show-icon="showIcon"
+    class="ml-2"
    @select="handleSelect"
  />
  <VbenBackgroundBreadcrumb
    v-if="type === 'background'"
    :breadcrumbs="breadcrumbs"
-    class="ml-2"
    :show-icon="showIcon"
+    class="ml-2"
    @select="handleSelect"
  />
 </template>
--- a/packages/business/layouts/src/iframe/iframe-router-view.vue
+++ b/packages/business/layouts/src/iframe/iframe-router-view.vue
@@ -70,8 +70,8 @@ function showSpinning(index: number) {
    {{ iframeRoutes.length }}
    <template v-for="(item, index) in iframeRoutes" :key="item.fullPath">
      <div
-        v-show="routeShow(item)"
        v-if="canRender(item)"
+        v-show="routeShow(item)"
        class="relative size-full"
      >
        <Spinner :spinning="showSpinning(index)" />