From f4b012eaafabe51148dd3758f1a531a30e7bafe7 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Tue, 26 Sep 2023 09:39:51 +0800
Subject: [PATCH] fix: button bg color

---
 src/components/Button/src/BasicButton.vue     |  5 +--
 src/components/Button/src/props.ts            |  6 +--
 src/components/CountDown/src/CountButton.vue  |  6 ++-
 .../CountDown/src/CountdownInput.vue          |  2 +-
 src/views/base/login/ForgetPasswordForm.vue   | 10 ++---
 src/views/base/login/LoginForm.vue            | 38 +++++++++----------
 src/views/base/login/MobileForm.vue           | 10 ++---
 src/views/base/login/QrCodeForm.vue           |  6 +--
 src/views/base/login/RegisterForm.vue         | 10 ++---
 src/views/base/login/SSOForm.vue              | 14 +++----
 10 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue
index bc0d535..c3490fd 100644
--- a/src/components/Button/src/BasicButton.vue
+++ b/src/components/Button/src/BasicButton.vue
@@ -11,10 +11,9 @@ const props = defineProps(buttonProps)
 // get component class
 const attrs = useAttrs({ excludeDefaultKeys: false })
 const getButtonClass = computed(() => {
-  const { color, disabled } = props
+  const { disabled } = props
   return [
     {
-      [`ant-btn-${color}`]: !!color,
       'is-disabled': disabled,
     },
   ]
@@ -25,7 +24,7 @@ const getBindValue = computed(() => ({ ...unref(attrs), ...props }))
 </script>
 
 <template>
-  <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick">
+  <Button v-bind="getBindValue" :style="{ backgroundColor: color }" :class="getButtonClass" @click="onClick">
     <template #default="data">
       <Icon v-if="preIcon" :icon="preIcon" :size="iconSize" />
       <slot v-bind="data || {}" />
diff --git a/src/components/Button/src/props.ts b/src/components/Button/src/props.ts
index d2a9a5b..a50d8f4 100644
--- a/src/components/Button/src/props.ts
+++ b/src/components/Button/src/props.ts
@@ -1,10 +1,6 @@
-const validColors = ['primary', 'error', 'warning', 'success', ''] as const
-type ButtonColorType = (typeof validColors)[number]
-
 export const buttonProps = {
   color: {
-    type: String as PropType<ButtonColorType>,
-    validator: v => validColors.includes(v),
+    type: String,
     default: '',
   },
   loading: { type: Boolean },
diff --git a/src/components/CountDown/src/CountButton.vue b/src/components/CountDown/src/CountButton.vue
index 20b8981..a1787f4 100644
--- a/src/components/CountDown/src/CountButton.vue
+++ b/src/components/CountDown/src/CountButton.vue
@@ -11,7 +11,7 @@ const props = defineProps({
   value: { type: [Object, Number, String, Array] },
   count: { type: Number, default: 60 },
   beforeStartFunc: {
-    type: Function as PropType<() => Promise<boolean>>,
+    type: Function as PropType<() => Promise<any>>,
     default: null,
   },
 })
@@ -38,7 +38,9 @@ async function handleStart() {
     loading.value = true
     try {
       const canStart = await beforeStartFunc()
-      canStart && start()
+      if (canStart) 
+        start()
+      
     }
     finally {
       loading.value = false
diff --git a/src/components/CountDown/src/CountdownInput.vue b/src/components/CountDown/src/CountdownInput.vue
index 2ad29e4..4a5f617 100644
--- a/src/components/CountDown/src/CountdownInput.vue
+++ b/src/components/CountDown/src/CountdownInput.vue
@@ -10,7 +10,7 @@ const props = defineProps({
   size: { type: String, validator: (v: string) => ['default', 'large', 'small'].includes(v) },
   count: { type: Number, default: 60 },
   sendCodeApi: {
-    type: Function as PropType<() => Promise<boolean>>,
+    type: Function as PropType<() => Promise<any>>,
     default: null,
   },
 })
diff --git a/src/views/base/login/ForgetPasswordForm.vue b/src/views/base/login/ForgetPasswordForm.vue
index 0f11384..f262d0d 100644
--- a/src/views/base/login/ForgetPasswordForm.vue
+++ b/src/views/base/login/ForgetPasswordForm.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, reactive, ref, unref } from 'vue'
-import { Button, Form, Input } from 'ant-design-vue'
+import { Form, Input } from 'ant-design-vue'
 import LoginFormTitle from './LoginFormTitle.vue'
 import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
 import { CountdownInput } from '@/components/CountDown'
@@ -46,12 +46,12 @@ async function handleReset() {
       </FormItem>
 
       <FormItem class="enter-x">
-        <Button type="primary" size="large" block :loading="loading" @click="handleReset">
+        <a-button type="primary" size="large" block :loading="loading" @click="handleReset">
           {{ t('common.resetText') }}
-        </Button>
-        <Button size="large" block class="mt-4" @click="handleBackLogin">
+        </a-button>
+        <a-button size="large" block class="mt-4" @click="handleBackLogin">
           {{ t('sys.login.backSignIn') }}
-        </Button>
+        </a-button>
       </FormItem>
     </Form>
   </template>
diff --git a/src/views/base/login/LoginForm.vue b/src/views/base/login/LoginForm.vue
index e6cb943..358665f 100644
--- a/src/views/base/login/LoginForm.vue
+++ b/src/views/base/login/LoginForm.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, reactive, ref, unref } from 'vue'
 
-import { Button, Checkbox, Col, Divider, Form, Input, Row } from 'ant-design-vue'
+import { Checkbox, Col, Divider, Form, Input, Row } from 'ant-design-vue'
 import { AlipayCircleFilled, GithubFilled, WechatFilled } from '@ant-design/icons-vue'
 import LoginFormTitle from './LoginFormTitle.vue'
 
@@ -147,31 +147,31 @@ async function handleLogin(params) {
       <Col :span="12">
         <FormItem :style="{ 'text-align': 'right' }">
           <!-- No logic, you need to deal with it yourself -->
-          <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
+          <a-button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
             {{ t('sys.login.forgetPassword') }}
-          </Button>
+          </a-button>
         </FormItem>
       </Col>
     </Row>
 
     <FormItem class="enter-x">
-      <Button type="primary" size="large" block :loading="loading" @click="getCode">
+      <a-button type="primary" size="large" block :loading="loading" @click="getCode">
         {{ t('sys.login.loginButton') }}
-      </Button>
-      <!-- <Button size="large" class="mt-4 enter-x" block @click="handleRegister">
+      </a-button>
+      <!-- <a-button size="large" class="mt-4 enter-x" block @click="handleRegister">
         {{ t('sys.login.registerButton') }}
-      </Button> -->
+      </a-button> -->
     </FormItem>
     <Row class="enter-x" :gutter="[16, 16]">
       <Col :md="8" :xs="24">
-        <Button block @click="setLoginState(LoginStateEnum.MOBILE)">
+        <a-button block @click="setLoginState(LoginStateEnum.MOBILE)">
           {{ t('sys.login.mobileSignInFormTitle') }}
-        </Button>
+        </a-button>
       </Col>
       <Col :md="8" :xs="24">
-        <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">
+        <a-button block @click="setLoginState(LoginStateEnum.QR_CODE)">
           {{ t('sys.login.qrSignInFormTitle') }}
-        </Button>
+        </a-button>
       </Col>
       <Col :md="8" :xs="24">
         <a-button block @click="setLoginState(LoginStateEnum.REGISTER)">
@@ -197,18 +197,18 @@ async function handleLogin(params) {
       萌新必读
     </Divider>
     <div class="enter-x flex justify-evenly" :class="`${prefixCls}-sign-in-way`">
-      <Button href="https://doc.iocoder.cn/" target="_blank">
+      <a-button href="https://doc.iocoder.cn/" target="_blank">
         📚开发指南
-      </Button>
-      <Button href="https://doc.iocoder.cn/video/" target="_blank" style="padding-left: 10px">
+      </a-button>
+      <a-button href="https://doc.iocoder.cn/video/" target="_blank" class="pl-2">
         🔥视频教程
-      </Button>
-      <Button href="https://www.iocoder.cn/Interview/good-collection/" target="_blank" style="padding-left: 10px">
+      </a-button>
+      <a-button href="https://www.iocoder.cn/Interview/good-collection/" target="_blank" class="pl-2">
         ⚡面试手册
-      </Button>
-      <Button href="http://static.yudao.iocoder.cn/mp/xinyu370.jpeg" target="_blank" style="padding-left: 10px">
+      </a-button>
+      <a-button href="http://static.yudao.iocoder.cn/mp/xinyu370.jpeg" target="_blank" class="pl-2">
         🤝外包咨询
-      </Button>
+      </a-button>
     </div>
   </Form>
   <Verify ref="verify" mode="pop" :captcha-type="captchaType" :img-size="{ width: '400px', height: '200px' }" @success="handleLogin" />
diff --git a/src/views/base/login/MobileForm.vue b/src/views/base/login/MobileForm.vue
index da563a4..2cf470e 100644
--- a/src/views/base/login/MobileForm.vue
+++ b/src/views/base/login/MobileForm.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, reactive, ref, unref } from 'vue'
-import { Button, Form, Input } from 'ant-design-vue'
+import { Form, Input } from 'ant-design-vue'
 import LoginFormTitle from './LoginFormTitle.vue'
 import { LoginStateEnum, useFormRules, useFormValid, useLoginState } from './useLogin'
 import { CountdownInput } from '@/components/CountDown'
@@ -142,12 +142,12 @@ async function getSmsCode() {
       </FormItem>
 
       <FormItem class="enter-x">
-        <Button type="primary" size="large" block :loading="loading" @click="getCode">
+        <a-button type="primary" size="large" block :loading="loading" @click="getCode">
           {{ t('sys.login.loginButton') }}
-        </Button>
-        <Button size="large" block class="mt-4" @click="handleBackLogin">
+        </a-button>
+        <a-button size="large" block class="mt-4" @click="handleBackLogin">
           {{ t('sys.login.backSignIn') }}
-        </Button>
+        </a-button>
       </FormItem>
     </Form>
     <Verify ref="verify" mode="pop" :captcha-type="captchaType" :img-size="{ width: '400px', height: '200px' }" @success="handleLogin" />
diff --git a/src/views/base/login/QrCodeForm.vue b/src/views/base/login/QrCodeForm.vue
index 8988907..4118ec0 100644
--- a/src/views/base/login/QrCodeForm.vue
+++ b/src/views/base/login/QrCodeForm.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, unref } from 'vue'
-import { Button, Divider, Popover, QRCode } from 'ant-design-vue'
+import { Divider, Popover, QRCode } from 'ant-design-vue'
 import LoginFormTitle from './LoginFormTitle.vue'
 import { LoginStateEnum, useLoginState } from './useLogin'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -28,9 +28,9 @@ const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
       <Divider class="enter-x">
         {{ t('sys.login.scanSign') }}
       </Divider>
-      <Button size="large" block class="enter-x mt-4" @click="handleBackLogin">
+      <a-button size="large" block class="enter-x mt-4" @click="handleBackLogin">
         {{ t('sys.login.backSignIn') }}
-      </Button>
+      </a-button>
     </div>
   </div>
 </template>
diff --git a/src/views/base/login/RegisterForm.vue b/src/views/base/login/RegisterForm.vue
index b94a1dc..4215ad5 100644
--- a/src/views/base/login/RegisterForm.vue
+++ b/src/views/base/login/RegisterForm.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, reactive, ref, unref } from 'vue'
-import { Button, Checkbox, Form, Input } from 'ant-design-vue'
+import { Checkbox, Form, Input } from 'ant-design-vue'
 import LoginFormTitle from './LoginFormTitle.vue'
 import { LoginStateEnum, useFormRules, useFormValid, useLoginState } from './useLogin'
 import { StrengthMeter } from '@/components/StrengthMeter'
@@ -69,12 +69,12 @@ async function handleRegister() {
         </Checkbox>
       </FormItem>
 
-      <Button type="primary" class="enter-x" size="large" block :loading="loading" @click="handleRegister">
+      <a-button type="primary" class="enter-x" size="large" block :loading="loading" @click="handleRegister">
         {{ t('sys.login.registerButton') }}
-      </Button>
-      <Button size="large" block class="enter-x mt-4" @click="handleBackLogin">
+      </a-button>
+      <a-button size="large" block class="enter-x mt-4" @click="handleBackLogin">
         {{ t('sys.login.backSignIn') }}
-      </Button>
+      </a-button>
     </Form>
   </div>
 </template>
diff --git a/src/views/base/login/SSOForm.vue b/src/views/base/login/SSOForm.vue
index e765a10..f33eb55 100644
--- a/src/views/base/login/SSOForm.vue
+++ b/src/views/base/login/SSOForm.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { Button, Checkbox, Col, Form, Row } from 'ant-design-vue'
+import { Checkbox, Col, Form, Row } from 'ant-design-vue'
 
 import { useFormValid, useLoginState } from './useLogin'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -178,9 +178,9 @@ onMounted(() => {
           <FormItem>
             <!-- No logic, you need to deal with it yourself -->
             <Checkbox :checked="scope" size="small">
-              <Button type="link" size="small">
+              <a-button type="link" size="small">
                 {{ formatScope(scope) }}
-              </Button>
+              </a-button>
             </Checkbox>
           </FormItem>
         </template>
@@ -188,12 +188,12 @@ onMounted(() => {
     </Row>
 
     <FormItem class="enter-x">
-      <Button type="primary" size="large" block :loading="loading" @click="handleAuthorize(true)">
+      <a-button type="primary" size="large" block :loading="loading" @click="handleAuthorize(true)">
         {{ t('sys.login.loginButton') }}
-      </Button>
-      <Button size="large" class="enter-x mt-4" block @click="handleBackLogin">
+      </a-button>
+      <a-button size="large" class="enter-x mt-4" block @click="handleBackLogin">
         {{ t('common.cancelText') }}
-      </Button>
+      </a-button>
     </FormItem>
   </Form>
 </template>