refactor: 抽取公共button

.editorconfig

@@ -7,4 +7,5 @@ indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 max_line_length = 100
-trim_trailing_whitespace = true
+trim_trailing_whitespace = true
+quote_type = single

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
     extraFileExtensions: ['.vue'],
   },
   rules: {
+    'vue/multi-word-component-names': 0,
     'vue/html-self-closing': [
       2, {
         html: {

src/components/button/Button.vue

@@ -1,11 +1,18 @@
+<!-- eslint-disable vue/prop-name-casing -->
 <script setup lang='ts'>
 import {ElButton} from 'element-plus';
 
 defineOptions({name: 'ButtonComponent'});
+
+type Props = {
+  nativeType?: 'button' | 'reset' | 'submit';
+};
+
+const props = defineProps<Props>();
 </script>
 
 <template>
-  <ElButton class="button-component">
+  <ElButton class="button-component" :native-type="props.nativeType">
     <slot />
   </ElButton>
 </template>

src/components/button/index.css

@@ -1,4 +1,5 @@
 .button-component {
+  font-size: 16px;
   color: white;
   text-align: center;
   background-color: var(--primary-color);

src/pages/home/index.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
 defineOptions({
-  name: 'HomeComponent',
+  name: 'Home',
 });
 </script>
 
 <template>
-  <main></main>
+  <main />
 </template>
-
-<style scoped lang="css">
-@import './index.css';
-</style>

src/pages/login/login-info/index.css

@@ -62,17 +62,6 @@
 
 .info {
   margin-top: 20px;
-
-  & :deep(.el-input__wrapper) {
-    --el-input-height: 46px;
-    --el-input-border-radius: 23px;
-    --el-input-text-color: #333;
-
-    padding: 0 32px;
-    margin-top: 12px;
-    background-color: #f3f5fa;
-    box-shadow: none;
-  }
 }
 
 .input-icon {
@@ -86,11 +75,6 @@
 .login-btn {
   width: 400px;
   height: 46px;
-  color: white;
-  background: #2e3092;
-  border: none;
-  border-radius: 25px;
-  box-shadow: 0 2px 28px 1px rgb(204 212 255 / 59%);
 }
 
 .operation {

src/pages/login/login-info/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {ref} from 'vue';
-import {ElIcon, ElButton} from 'element-plus';
+import {ElIcon} from 'element-plus';
 import userIcon from '@assets/images/login/user.webp';
 import posswordIcon from '@assets/images/login/passowrd.webp';
 import enterpriseIcon from '@assets/images/login/enterprise.webp';
@@ -8,7 +8,8 @@ import {PreviewOpen, PreviewCloseOne} from '@icon-park/vue-next';
 import {useToggle} from '@vueuse/core';
 import {RouterLink} from 'vue-router';
 import {useI18n} from 'vue-i18n';
-import {LoginField} from '@components';
+import {Button, LoginField} from '@components';
+import {REGISTER_PATH} from '@routes';
 
 defineOptions({name: 'LoginInfo'});
 
@@ -90,12 +91,14 @@ const {t} = useI18n();
       <span>{{t('login.forgetPassword')}}</span>
     </div>
 
-    <ElButton native-type="submit" class="login-btn">
+    <Button class="login-btn" native-type="submit">
       {{t('login.loginBtnText')}}
-    </ElButton>
+    </Button>
   </div>
 
-  <RouterLink to="/" class="regist">{{t('login.regist')}}</RouterLink>
+  <RouterLink :to="REGISTER_PATH" class="regist">
+    {{t('login.regist')}}
+  </RouterLink>
 </template>
 
 <style scoped lang="css">

src/pages/register/content/index.css

@@ -34,27 +34,21 @@
 .btn-group {
   display: flex;
   gap: 52px;
+  padding-bottom: 4px;
   margin: auto auto 0;
 
   & button {
     width: 189px;
     height: 46px;
-    font-size: 16px;
     line-height: 43px;
-    color: #666;
-    cursor: pointer;
-    background-color: transparent;
-    border: none;
-    border-radius: 23px;
 
     &[type='reset'] {
+      font-size: 16px;
+      color: #666;
+      cursor: pointer;
+      background-color: transparent;
       border: 2px solid #6a8bf5;
-    }
-
-    &[type='submit'] {
-      color: white;
-      background-color: var(--primary-color);
-      box-shadow: 0 2px 28px 1px rgb(204 212 255 / 59%);
+      border-radius: 23px;
     }
   }
 }

src/pages/register/content/index.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import {LoginField, LoginUpload} from '@components';
+import {Button, LoginField, LoginUpload} from '@components';
 import {useI18n} from 'vue-i18n';
 import enterpriseIcon from '@assets/images/login/enterprise.webp';
 import phoneIcon from '@assets/images/register/phoneIcon.webp';
@@ -48,7 +48,7 @@ const {t} = useI18n();
 
     <div class="btn-group">
       <button type="reset">{{t('register.reset')}}</button>
-      <button type="submit">{{t('register.confirm')}}</button>
+      <Button native-type="submit">{{t('register.confirm')}}</Button>
     </div>
   </div>
 </template>

src/pages/register/index.css

@@ -92,7 +92,6 @@ main {
 .content {
   flex: 1;
   margin-top: 50px;
-  overflow: hidden;
 
   & form {
     height: 100%;

src/pages/register/index.vue

@@ -8,7 +8,7 @@ import Success from './success/index.vue';
 
 defineOptions({name: 'Register'});
 
-const [isSuccess] = useToggle(true);
+const [isSuccess] = useToggle();
 const {t} = useI18n();
 
 const {onSubmit, handleReset} = useFormState(isSuccess);