perf: 登录界面重做

easyflow-ui-admin/packages/effects/common-ui/src/ui/authentication/register.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { Recordable } from '@easyflow/types';
+import type {Recordable} from '@easyflow/types';
 
-import type { EasyFlowFormSchema } from '@easyflow-core/form-ui';
+import type {EasyFlowFormSchema} from '@easyflow-core/form-ui';
+import {useEasyFlowForm} from '@easyflow-core/form-ui';
 
-import { computed, reactive } from 'vue';
-import { useRouter } from 'vue-router';
+import {computed, reactive} from 'vue';
+import {useRouter} from 'vue-router';
 
-import { $t } from '@easyflow/locales';
-
-import { useEasyFlowForm } from '@easyflow-core/form-ui';
-import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
+import {$t} from '@easyflow/locales';
+import {EasyFlowButton} from '@easyflow-core/shadcn-ui';
 
 import Title from './auth-title.vue';
 
@@ -85,10 +84,10 @@ defineExpose({
 </script>
 
 <template>
-  <div>
+  <div class="auth-register">
     <Title>
       <slot name="title">
-        {{ title || $t('authentication.createAnAccount') }} 🚀
+        {{ title || $t('authentication.createAnAccount') }}
       </slot>
       <template #desc>
         <slot name="subTitle">
@@ -96,7 +95,9 @@ defineExpose({
         </slot>
       </template>
     </Title>
-    <Form />
+    <div class="auth-form-group">
+      <Form />
+    </div>
 
     <EasyFlowButton
       :class="{
@@ -104,18 +105,35 @@ defineExpose({
       }"
       :loading="loading"
       aria-label="register"
-      class="mt-2 w-full"
+      class="mt-6 h-11 w-full rounded-xl text-base font-medium"
       @click="handleSubmit"
     >
       <slot name="submitButtonText">
         {{ submitButtonText || $t('authentication.signUp') }}
       </slot>
     </EasyFlowButton>
-    <div class="mt-4 text-center text-sm">
+    <div class="mt-5 text-center text-sm text-[hsl(var(--text-muted))]">
       {{ $t('authentication.alreadyHaveAccount') }}
-      <span class="easyflow-link text-sm font-normal" @click="goToLogin()">
+      <button class="auth-inline-action" type="button" @click="goToLogin()">
         {{ $t('authentication.goToLogin') }}
-      </span>
+      </button>
     </div>
   </div>
 </template>
+
+<style scoped>
+.auth-form-group :deep(.easyflow-form-ui + .easyflow-form-ui) {
+  margin-top: 0.95rem;
+}
+
+.auth-inline-action {
+  color: hsl(var(--nav-item-active-foreground));
+  font-size: 0.92rem;
+  font-weight: 500;
+  transition: opacity 0.18s ease;
+}
+
+.auth-inline-action:hover {
+  opacity: 0.76;
+}
+</style>