🕟 优化

kicc-ui/src/views/core/login/QrCodeForm.vue

@@ -2,15 +2,16 @@
   <template v-if="getShow">
     <LoginFormTitle class="enter-x" />
     <div class="enter-x min-w-64 min-h-64">
-      <QrCode
+      <QrCode :value="qrCodeUrl"
-        :value="qrCodeUrl"
+              class="enter-x flex justify-center xl:justify-start"
-        class="enter-x flex justify-center xl:justify-start"
+              :width="280"
-        :width="280"
       />
       <Divider class="enter-x">{{ t('sys.login.scanSign') }}</Divider>
-      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
+      <Button size="large"
-        {{ t('sys.login.backSignIn') }}
+              block
-      </Button>
+              class="mt-4 enter-x"
+              @click="handleBackLogin"
+      >{{ t('sys.login.backSignIn') }}</Button>
     </div>
   </template>
 </template>
@@ -22,10 +23,8 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useLoginState, LoginStateEnum } from './useLogin';
 
-  const qrCodeUrl = 'https://vvbin.cn/next/login';
+  const qrCodeUrl = 'https://github.com/wangxiang4';
-
   const { t } = useI18n();
   const { handleBackLogin, getLoginState } = useLoginState();
-
   const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE);
 </script>

kicc-ui/src/views/core/login/RegisterForm.vue

@@ -1,67 +1,59 @@
 <template>
   <template v-if="getShow">
-    <LoginFormTitle class="enter-x" />
+    <LoginFormTitle class="enter-x"/>
-    <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+    <Form ref="formRef" class="p-4 enter-x" :model="formData" :rules="getFormRules">
       <FormItem name="account" class="enter-x">
-        <Input
+        <Input v-model:value="formData.account"
-          class="fix-auto-fill"
+               class="fix-auto-fill"
-          size="large"
+               size="large"
-          v-model:value="formData.account"
+               :placeholder="t('sys.login.userName')"
-          :placeholder="t('sys.login.userName')"
         />
       </FormItem>
       <FormItem name="mobile" class="enter-x">
-        <Input
+        <Input v-model:value="formData.mobile"
-          size="large"
+               size="large"
-          v-model:value="formData.mobile"
+               :placeholder="t('sys.login.mobile')"
-          :placeholder="t('sys.login.mobile')"
+               class="fix-auto-fill"
-          class="fix-auto-fill"
         />
       </FormItem>
       <FormItem name="sms" class="enter-x">
-        <CountdownInput
+        <CountdownInput v-model:value="formData.sms"
-          size="large"
+                        size="large"
-          class="fix-auto-fill"
+                        class="fix-auto-fill"
-          v-model:value="formData.sms"
+                        :placeholder="t('sys.login.smsCode')"
-          :placeholder="t('sys.login.smsCode')"
         />
       </FormItem>
       <FormItem name="password" class="enter-x">
-        <StrengthMeter
+        <StrengthMeter v-model:value="formData.password"
-          size="large"
+                       size="large"
-          v-model:value="formData.password"
+                       :placeholder="t('sys.login.password')"
-          :placeholder="t('sys.login.password')"
         />
       </FormItem>
       <FormItem name="confirmPassword" class="enter-x">
-        <InputPassword
+        <InputPassword v-model:value="formData.confirmPassword"
-          size="large"
+                       size="large"
-          visibilityToggle
+                       visibilityToggle
-          v-model:value="formData.confirmPassword"
+                       :placeholder="t('sys.login.confirmPassword')"
-          :placeholder="t('sys.login.confirmPassword')"
         />
       </FormItem>
-
       <FormItem class="enter-x" name="policy">
         <!-- No logic, you need to deal with it yourself -->
         <Checkbox v-model:checked="formData.policy" size="small">
           {{ t('sys.login.policy') }}
         </Checkbox>
       </FormItem>
-
+      <Button type="primary"
-      <Button
+              class="enter-x"
-        type="primary"
+              size="large"
-        class="enter-x"
+              block
-        size="large"
+              :loading="loading"
-        block
+              @click="handleRegister"
-        @click="handleRegister"
+      >{{ t('sys.login.registerButton') }}</Button>
-        :loading="loading"
+      <Button size="large"
-      >
+              block
-        {{ t('sys.login.registerButton') }}
+              class="mt-4 enter-x"
-      </Button>
+              @click="handleBackLogin"
-      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
+      >{{ t('sys.login.backSignIn') }}</Button>
-        {{ t('sys.login.backSignIn') }}
-      </Button>
     </Form>
   </template>
 </template>
@@ -78,10 +70,8 @@
   const InputPassword = Input.Password;
   const { t } = useI18n();
   const { handleBackLogin, getLoginState } = useLoginState();
-
   const formRef = ref();
   const loading = ref(false);
-
   const formData = reactive({
     account: '',
     password: '',
@@ -90,10 +80,8 @@
     sms: '',
     policy: false,
   });
-
   const { getFormRules } = useFormRules(formData);
   const { validForm } = useFormValid(formRef);
-
   const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
 
   async function handleRegister() {