refactor: layout of reset password page (#5960)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.16.x

#### What this PR does / why we need it:

让 UC 端的重置密码页面使用和登录相关页面一样的 GatewayLayout 布局组件。

#### Does this PR introduce a user-facing change?

```release-note
None
```

ui/console-src/router/routes.config.ts

@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from "vue-router";
 import NotFound from "@/views/exceptions/NotFound.vue";
 import Forbidden from "@/views/exceptions/Forbidden.vue";
 import BasicLayout from "@console/layouts/BasicLayout.vue";
-import GatewayLayout from "@console/layouts/GatewayLayout.vue";
+import GatewayLayout from "@/layouts/GatewayLayout.vue";
 import Setup from "@console/views/system/Setup.vue";
 import Redirect from "@console/views/system/Redirect.vue";
 import SetupInitialData from "@console/views/system/SetupInitialData.vue";

ui/uc-src/router/routes.config.ts

@@ -3,6 +3,7 @@ import NotFound from "@/views/exceptions/NotFound.vue";
 import Forbidden from "@/views/exceptions/Forbidden.vue";
 import BasicLayout from "@uc/layouts/BasicLayout.vue";
 import ResetPassword from "@uc/views/ResetPassword.vue";
+import GatewayLayout from "@/layouts/GatewayLayout.vue";
 
 export const routes: Array<RouteRecordRaw> = [
   {
@@ -23,11 +24,17 @@ export const routes: Array<RouteRecordRaw> = [
   },
   {
     path: "/reset-password/:username",
-    component: ResetPassword,
+    component: GatewayLayout,
-    name: "ResetPassword",
+    children: [
-    meta: {
+      {
-      title: "core.uc_reset_password.title",
+        path: "",
-    },
+        name: "ResetPassword",
+        component: ResetPassword,
+        meta: {
+          title: "core.uc_reset_password.title",
+        },
+      },
+    ],
   },
 ];
 

ui/uc-src/views/ResetPassword.vue

@@ -4,7 +4,6 @@ import { Toast, VButton } from "@halo-dev/components";
 import { useRouteParams, useRouteQuery } from "@vueuse/router";
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
-import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
 
 const { t } = useI18n();
 
@@ -46,69 +45,64 @@ const inputClasses = {
 </script>
 
 <template>
-  <div
+  <div class="flex w-72 flex-col">
-    class="flex h-screen flex-col items-center overflow-auto bg-white/90 pt-[30vh]"
+    <FormKit
-  >
+      id="reset-password-form"
-    <IconLogo class="mb-8 flex-none" />
+      name="reset-password-form"
-    <div class="flex w-72 flex-col">
+      type="form"
+      :classes="{
+        form: '!divide-none',
+      }"
+      :config="{ validationVisibility: 'submit' }"
+      @submit="onSubmit"
+      @keyup.enter="$formkit.submit('reset-password-form')"
+    >
       <FormKit
-        id="reset-password-form"
+        :classes="inputClasses"
-        name="reset-password-form"
+        name="username"
-        type="form"
+        :model-value="username"
-        :classes="{
+        :placeholder="$t('core.uc_reset_password.fields.username.label')"
-          form: '!divide-none',
+        :validation-label="$t('core.uc_reset_password.fields.username.label')"
+        :autofocus="true"
+        type="text"
+        disabled
+        validation="required"
+      ></FormKit>
+      <FormKit
+        :classes="inputClasses"
+        name="password"
+        type="password"
+        :placeholder="$t('core.uc_reset_password.fields.password.label')"
+        :validation-label="$t('core.uc_reset_password.fields.password.label')"
+        validation="required:trim|length:5,100|matches:/^\S.*\S$/"
+        :validation-messages="{
+          matches: $t('core.formkit.validation.trim'),
         }"
-        :config="{ validationVisibility: 'submit' }"
+      ></FormKit>
-        @submit="onSubmit"
+      <FormKit
-        @keyup.enter="$formkit.submit('reset-password-form')"
+        :classes="inputClasses"
-      >
+        name="password_confirm"
-        <FormKit
+        type="password"
-          :classes="inputClasses"
+        :placeholder="
-          name="username"
+          $t('core.uc_reset_password.fields.password_confirm.label')
-          :model-value="username"
+        "
-          :placeholder="$t('core.uc_reset_password.fields.username.label')"
+        :validation-label="
-          :validation-label="$t('core.uc_reset_password.fields.username.label')"
+          $t('core.uc_reset_password.fields.password_confirm.label')
-          :autofocus="true"
+        "
-          type="text"
+        validation="confirm|required:trim|length:5,100|matches:/^\S.*\S$/"
-          disabled
+        :validation-messages="{
-          validation="required"
+          matches: $t('core.formkit.validation.trim'),
-        ></FormKit>
+        }"
-        <FormKit
+      ></FormKit>
-          :classes="inputClasses"
+    </FormKit>
-          name="password"
+    <VButton
-          type="password"
+      class="mt-8"
-          :placeholder="$t('core.uc_reset_password.fields.password.label')"
+      block
-          :validation-label="$t('core.uc_reset_password.fields.password.label')"
+      :loading="loading"
-          validation="required:trim|length:5,100|matches:/^\S.*\S$/"
+      type="secondary"
-          :validation-messages="{
+      @click="$formkit.submit('reset-password-form')"
-            matches: $t('core.formkit.validation.trim'),
+    >
-          }"
+      {{ $t("core.uc_reset_password.operations.reset.button") }}
-        ></FormKit>
+    </VButton>
-        <FormKit
-          :classes="inputClasses"
-          name="password_confirm"
-          type="password"
-          :placeholder="
-            $t('core.uc_reset_password.fields.password_confirm.label')
-          "
-          :validation-label="
-            $t('core.uc_reset_password.fields.password_confirm.label')
-          "
-          validation="confirm|required:trim|length:5,100|matches:/^\S.*\S$/"
-          :validation-messages="{
-            matches: $t('core.formkit.validation.trim'),
-          }"
-        ></FormKit>
-      </FormKit>
-      <VButton
-        class="mt-8"
-        block
-        :loading="loading"
-        type="secondary"
-        @click="$formkit.submit('reset-password-form')"
-      >
-        {{ $t("core.uc_reset_password.operations.reset.button") }}
-      </VButton>
-    </div>
   </div>
 </template>