feat: 登录样式修改

ui/src/layout/components/top-bar/avatar/ResetPasssword.vue

@@ -7,10 +7,9 @@
       :rules="rules"
     >
       <p class="mb-8">新密码</p>
-      <el-form-item prop="password">
+      <el-form-item prop="password" style="margin-bottom: 8px">
         <el-input
           type="password"
-          size="large"
           class="input-item"
           v-model="resetPasswordForm.password"
           placeholder="请输入密码"
@@ -21,7 +20,6 @@
       <el-form-item prop="re_password">
         <el-input
           type="password"
-          size="large"
           class="input-item"
           v-model="resetPasswordForm.re_password"
           placeholder="请输入确认密码"
@@ -30,9 +28,8 @@
         </el-input>
       </el-form-item>
       <p class="mb-8">使用邮箱</p>
-      <el-form-item>
+      <el-form-item style="margin-bottom: 8px">
         <el-input
-          size="large"
           class="input-item"
           :disabled="true"
           v-bind:modelValue="user.userInfo?.email"
@@ -42,18 +39,9 @@
       </el-form-item>
       <el-form-item prop="code">
         <div class="flex-between w-full">
-          <el-input
-            size="large"
-            class="code-input"
-            v-model="resetPasswordForm.code"
-            placeholder="请输入验证码"
-          >
+          <el-input class="code-input" v-model="resetPasswordForm.code" placeholder="请输入验证码">
           </el-input>
-          <el-button
-            size="large"
-            class="send-email-button ml-16"
-            @click="sendEmail"
-            :loading="loading"
+          <el-button class="send-email-button ml-8" @click="sendEmail" :loading="loading"
             >获取验证码</el-button
           >
         </div>

ui/src/styles/app.scss

@@ -144,6 +144,9 @@ h4 {
 .ml-8 {
   margin-left: var(--app-base-px);
 }
+.ml-12 {
+  margin-left: calc(var(--app-base-px) + 4px);
+}
 .ml-16 {
   margin-left: calc(var(--app-base-px) * 2);
 }

ui/src/styles/element-plus.scss

@@ -8,6 +8,7 @@
 
 .el-button {
   padding: 5px 12px;
+
   &.is-text {
     padding: 4px !important;
     font-size: 16px;
@@ -22,6 +23,9 @@
     border-color: var(--el-button-border-color);
   }
 }
+.el-button--large {
+  font-size: 16px;
+}
 .el-avatar {
   --el-avatar-bg-color: var(--el-color-primary);
   --el-avatar-size-small: 33px;
@@ -34,25 +38,37 @@
 }
 
 .el-form-item {
-  margin-bottom: 18px;
+  margin-bottom: 16px;
   .el-form-item {
-    margin-bottom: 18px;
+    margin-bottom: 16px;
     &:last-child {
       margin-bottom: 0px;
     }
   }
 }
+.el-form-item__error {
+  position: unset;
+  font-size: 14px;
+}
 
 .el-dialog {
   --el-dialog-title-font-size: 16px;
+  --el-dialog-padding-primary: 24px;
+  --el-dialog-content-font-size: 14px;
   .dialog-sub-title {
     color: var(--el-text-color-regular);
     margin: 5px 0;
   }
   .el-dialog__body {
-    padding: 15px var(--el-dialog-padding-primary) 10px !important;
+    padding: 16px var(--el-dialog-padding-primary) 8px !important;
   }
 }
+.el-dialog__header {
+  padding-bottom: 8px;
+}
+.el-dialog__footer {
+  padding-top: 0;
+}
 
 .el-message-box {
   --el-messagebox-font-size: 16px;
@@ -191,10 +207,21 @@
   }
 }
 .el-textarea__inner {
-  font-size: 13px;
+  font-size: 14px;
 }
+
 .el-input__inner {
-  font-size: 13px;
+  font-size: 14px;
+}
+
+.el-input__wrapper {
+  padding: 1px 12px !important;
+}
+
+.el-input--large {
+  .el-input__inner {
+    font-size: 16px;
+  }
 }
 
 .el-select-group .el-select-dropdown__item {

ui/src/views/login/forgot-password/index.vue

@@ -1,44 +1,47 @@
 <template>
   <login-layout>
     <LoginContainer subTitle="欢迎使用 MaxKB 智能知识库">
-      <h4 class="mb-24">忘记密码</h4>
+      <h2 class="mb-24">忘记密码</h2>
       <el-form
         class="register-form"
         ref="resetPasswordFormRef"
         :model="CheckEmailForm"
         :rules="rules"
       >
-        <el-form-item prop="email">
-          <el-input
-            size="large"
-            class="input-item"
-            v-model="CheckEmailForm.email"
-            placeholder="请输入邮箱"
-          >
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="code">
-          <div class="flex-between w-full">
+        <div class="mb-24">
+          <el-form-item prop="email">
             <el-input
               size="large"
-              class="code-input"
-              v-model="CheckEmailForm.code"
-              placeholder="请输入验证码"
+              class="input-item"
+              v-model="CheckEmailForm.email"
+              placeholder="请输入邮箱"
             >
             </el-input>
-            <el-button
-              size="large"
-              class="send-email-button ml-16"
-              @click="sendEmail"
-              :loading="loading"
-              >获取验证码</el-button
-            >
-          </div>
-        </el-form-item>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="code">
+            <div class="flex-between w-full">
+              <el-input
+                size="large"
+                class="code-input"
+                v-model="CheckEmailForm.code"
+                placeholder="请输入验证码"
+              >
+              </el-input>
+              <el-button
+                :disabled="CheckEmailForm.email"
+                size="large"
+                class="send-email-button ml-12"
+                @click="sendEmail"
+                :loading="loading"
+                >获取验证码</el-button
+              >
+            </div>
+          </el-form-item>
+        </div>
       </el-form>
-      <el-button type="primary" class="login-submit-button w-full mt-4" @click="checkCode"
-        >立即验证</el-button
-      >
+      <el-button size="large" type="primary" class="w-full" @click="checkCode">立即验证</el-button>
       <div class="operate-container mt-12">
         <el-button
           class="register"
@@ -107,6 +110,4 @@ const sendEmail = () => {
   })
 }
 </script>
-<style lang="scss" scope>
-@import '../index.scss';
-</style>
+<style lang="scss" scope></style>

ui/src/views/login/index.scss

@@ -1,3 +0,0 @@
-.login-submit-button {
-  height: 40px;
-}

ui/src/views/login/index.vue

@@ -9,30 +9,32 @@
         ref="loginFormRef"
         @keyup.enter="login"
       >
-        <el-form-item prop="username">
-          <el-input
-            size="large"
-            class="input-item"
-            v-model="loginForm.username"
-            placeholder="请输入用户名"
-          >
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input
-            type="password"
-            size="large"
-            class="input-item"
-            v-model="loginForm.password"
-            placeholder="请输入密码"
-            show-password
-          >
-          </el-input>
-        </el-form-item>
+        <div class="mb-24">
+          <el-form-item prop="username">
+            <el-input
+              size="large"
+              class="input-item"
+              v-model="loginForm.username"
+              placeholder="请输入用户名"
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="password">
+            <el-input
+              type="password"
+              size="large"
+              class="input-item"
+              v-model="loginForm.password"
+              placeholder="请输入密码"
+              show-password
+            >
+            </el-input>
+          </el-form-item>
+        </div>
       </el-form>
-      <el-button type="primary" class="login-submit-button mt-4 w-full" @click="login"
-        >登录</el-button
-      >
+      <el-button size="large" type="primary" class="w-full" @click="login">登录</el-button>
       <div class="operate-container flex-between mt-12">
         <el-button class="register" @click="router.push('/register')" link type="primary">
           注册
@@ -43,7 +45,7 @@
           link
           type="primary"
         >
-          忘记密码
+          忘记密码?
         </el-button>
       </div>
     </LoginContainer>
@@ -100,6 +102,4 @@ const login = () => {
   })
 }
 </script>
-<style lang="scss" scope>
-@import './index.scss';
-</style>
+<style lang="scss" scope></style>

ui/src/views/login/register/index.vue

@@ -1,70 +1,78 @@
 <template>
   <login-layout>
     <LoginContainer subTitle="欢迎使用 MaxKB 智能知识库">
-      <h4 class="mb-24">用户注册</h4>
+      <h2 class="mb-24">用户注册</h2>
       <el-form class="register-form" :model="registerForm" :rules="rules" ref="registerFormRef">
-        <el-form-item prop="username">
-          <el-input
-            size="large"
-            class="input-item"
-            v-model="registerForm.username"
-            placeholder="请输入用户名"
-          >
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input
-            type="password"
-            size="large"
-            class="input-item"
-            v-model="registerForm.password"
-            placeholder="请输入密码"
-            show-password
-          >
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="repassword">
-          <el-input
-            type="password"
-            size="large"
-            class="input-item"
-            v-model="registerForm.re_password"
-            placeholder="请输入确认密码"
-            show-password
-          >
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="email">
-          <el-input
-            size="large"
-            class="input-item"
-            v-model="registerForm.email"
-            placeholder="请输入邮箱"
-          >
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="code">
-          <div class="flex-between w-full">
+        <div class="mb-24">
+          <el-form-item prop="username">
             <el-input
               size="large"
-              class="code-input"
-              v-model="registerForm.code"
-              placeholder="请输入验证码"
+              class="input-item"
+              v-model="registerForm.username"
+              placeholder="请输入用户名"
             >
             </el-input>
-            <el-button
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="password">
+            <el-input
+              type="password"
               size="large"
-              class="send-email-button ml-16"
-              @click="sendEmail"
-              :loading="sendEmailLoading"
-              >获取验证码</el-button
+              class="input-item"
+              v-model="registerForm.password"
+              placeholder="请输入密码"
+              show-password
             >
-          </div>
-        </el-form-item>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="re_password">
+            <el-input
+              type="password"
+              size="large"
+              class="input-item"
+              v-model="registerForm.re_password"
+              placeholder="请输入确认密码"
+              show-password
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="email">
+            <el-input
+              size="large"
+              class="input-item"
+              v-model="registerForm.email"
+              placeholder="请输入邮箱"
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="code">
+            <div class="flex-between w-full">
+              <el-input
+                size="large"
+                class="code-input"
+                v-model="registerForm.code"
+                placeholder="请输入验证码"
+              >
+              </el-input>
+              <el-button
+                size="large"
+                class="send-email-button ml-12"
+                @click="sendEmail"
+                :loading="sendEmailLoading"
+                >获取验证码</el-button
+              >
+            </div>
+          </el-form-item>
+        </div>
       </el-form>
-      <el-button type="primary" class="login-submit-button w-full mt-4" @click="register"
-        >注册</el-button
-      >
+      <el-button size="large" type="primary" class="w-full" @click="register">注册</el-button>
       <div class="operate-container mt-12">
         <el-button
           class="register"
@@ -82,7 +90,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { RegisterRequest } from '@/api/type/user'
-import { UserFilled, Lock, Message, Key } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router'
 import UserApi from '@/api/user'
 import { MsgSuccess } from '@/utils/message'
@@ -183,6 +190,4 @@ const sendEmail = () => {
   })
 }
 </script>
-<style lang="scss" scope>
-@import '../index.scss';
-</style>
+<style lang="scss" scope></style>

ui/src/views/login/reset-password/index.vue

@@ -1,41 +1,46 @@
 <template>
   <login-layout>
     <LoginContainer subTitle="欢迎使用 MaxKB 智能知识库">
-      <h4 class="mb-24">修改密码</h4>
+      <h2 class="mb-24">修改密码</h2>
       <el-form
         class="reset-password-form"
         ref="resetPasswordFormRef"
         :model="resetPasswordForm"
         :rules="rules"
       >
-        <el-form-item prop="password">
-          <el-input
-            type="password"
-            size="large"
-            class="input-item"
-            v-model="resetPasswordForm.password"
-            placeholder="请输入密码"
-            show-password
-          >
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="re_password">
-          <el-input
-            type="password"
-            size="large"
-            class="input-item"
-            v-model="resetPasswordForm.re_password"
-            placeholder="请输入确认密码"
-            show-password
-          >
-          </el-input>
-        </el-form-item>
+        <div class="mb-24">
+          <el-form-item prop="password">
+            <el-input
+              type="password"
+              size="large"
+              class="input-item"
+              v-model="resetPasswordForm.password"
+              placeholder="请输入密码"
+              show-password
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="re_password">
+            <el-input
+              type="password"
+              size="large"
+              class="input-item"
+              v-model="resetPasswordForm.re_password"
+              placeholder="请输入确认密码"
+              show-password
+            >
+            </el-input>
+          </el-form-item>
+        </div>
       </el-form>
-      <el-button type="primary" class="login-submit-button w-full mt-4" @click="resetPassword"
+      <el-button size="large" type="primary" class="w-full" @click="resetPassword"
         >确认修改</el-button
       >
       <div class="operate-container mt-12">
         <el-button
+          size="large"
           class="register"
           @click="router.push('/login')"
           link
@@ -126,6 +131,4 @@ const resetPassword = () => {
     })
 }
 </script>
-<style lang="scss" scope>
-@import '../index.scss';
-</style>
+<style lang="scss" scope></style>