perf: 登录界面重做

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
+import {ref} from 'vue';
+import {useRouter} from 'vue-router';
 
-import { $t } from '@easyflow/locales';
+import {$t} from '@easyflow/locales';
 
-import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
+import {EasyFlowButton} from '@easyflow-core/shadcn-ui';
 
-import { useQRCode } from '@vueuse/integrations/useQRCode';
+import {useQRCode} from '@vueuse/integrations/useQRCode';
 
 import Title from './auth-title.vue';
 
@@ -70,10 +70,10 @@ function goToLogin() {
 </script>
 
 <template>
-  <div>
+  <div class="auth-qrcode-login">
     <Title>
       <slot name="title">
-        {{ title || $t('authentication.welcomeBack') }} 📱
+        {{ title || $t('authentication.welcomeBack') }}
       </slot>
       <template #desc>
         <span class="text-muted-foreground">
@@ -84,9 +84,11 @@ function goToLogin() {
       </template>
     </Title>
 
-    <div class="flex-col-center mt-6">
-      <img :src="qrcode" alt="qrcode" class="w-1/2" />
-      <p class="text-muted-foreground mt-4 text-sm">
+    <div class="auth-qrcode-panel mt-6">
+      <div class="auth-qrcode-frame">
+        <img :src="qrcode" alt="qrcode" class="auth-qrcode-image" />
+      </div>
+      <p class="text-muted-foreground mt-4 text-sm leading-6">
         <slot name="description">
           {{ description || $t('authentication.qrcodePrompt') }}
         </slot>
@@ -95,7 +97,7 @@ function goToLogin() {
 
     <EasyFlowButton
       v-if="showBack"
-      class="mt-4 w-full"
+      class="mt-6 h-11 w-full rounded-xl"
       variant="outline"
       @click="goToLogin()"
     >
@@ -103,3 +105,32 @@ function goToLogin() {
     </EasyFlowButton>
   </div>
 </template>
+
+<style scoped>
+.auth-qrcode-panel {
+  text-align: center;
+}
+
+.auth-qrcode-frame {
+  align-items: center;
+  background: linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(244 249 255 / 0.96));
+  border: 1px solid hsl(var(--line-subtle));
+  border-radius: 1.5rem;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+  max-width: 17rem;
+  padding: 1rem;
+}
+
+.auth-qrcode-image {
+  aspect-ratio: 1;
+  border-radius: 1rem;
+  width: min(100%, 13rem);
+}
+
+.dark .auth-qrcode-frame {
+  background: linear-gradient(180deg, rgb(14 22 36 / 0.92), rgb(11 19 31 / 0.96));
+}
+</style>