diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue
index c3490fde..9072c56a 100644
--- a/src/components/Button/src/BasicButton.vue
+++ b/src/components/Button/src/BasicButton.vue
@@ -1,13 +1,14 @@
 <script lang="ts" setup>
-import { Button } from 'ant-design-vue'
+import { Button, theme } from 'ant-design-vue'
 import { computed, unref } from 'vue'
 import { buttonProps } from './props'
-import { Icon } from '@/components/Icon'
 import { useAttrs } from '@/hooks/core/useAttrs'
+import { Icon } from '@/components/Icon'
 
 defineOptions({ name: 'AButton', extends: Button, indeterminate: false })
-
 const props = defineProps(buttonProps)
+const { useToken } = theme
+const { token } = useToken()
 // get component class
 const attrs = useAttrs({ excludeDefaultKeys: false })
 const getButtonClass = computed(() => {
@@ -24,7 +25,25 @@ const getBindValue = computed(() => ({ ...unref(attrs), ...props }))
 </script>
 
 <template>
-  <Button v-bind="getBindValue" :style="{ backgroundColor: color }" :class="getButtonClass" @click="onClick">
+  <Button
+    v-bind="getBindValue" :style="{
+      backgroundColor: color
+        ? (
+          color === 'primary'
+            ? token.colorPrimary
+            : (
+              color === 'error'
+                ? token.colorError
+                : (
+                  color === 'warning'
+                    ? token.colorWarning
+                    : (color === 'success' ? token.colorSuccess : '')
+                )
+            )
+        )
+        : '',
+    }" :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 a50d8f4c..d2a9a5ba 100644
--- a/src/components/Button/src/props.ts
+++ b/src/components/Button/src/props.ts
@@ -1,6 +1,10 @@
+const validColors = ['primary', 'error', 'warning', 'success', ''] as const
+type ButtonColorType = (typeof validColors)[number]
+
 export const buttonProps = {
   color: {
-    type: String,
+    type: String as PropType<ButtonColorType>,
+    validator: v => validColors.includes(v),
     default: '',
   },
   loading: { type: Boolean },
diff --git a/src/views/base/login/LoginForm.vue b/src/views/base/login/LoginForm.vue
index 358665f1..1e53d162 100644
--- a/src/views/base/login/LoginForm.vue
+++ b/src/views/base/login/LoginForm.vue
@@ -112,7 +112,10 @@ async function handleLogin(params) {
 
 <template>
   <LoginFormTitle v-show="getShow" class="enter-x" />
-  <Form v-show="getShow" ref="formRef" class="enter-x p-4" :model="formData" :rules="getFormRules" @keypress.enter="handleLogin">
+  <Form
+    v-show="getShow" ref="formRef" class="enter-x p-4" :model="formData" :rules="getFormRules"
+    @keypress.enter="handleLogin"
+  >
     <FormItem name="tenantName" class="enter-x">
       <Input
         v-if="tenantEnable === 'true'"
@@ -123,7 +126,10 @@ async function handleLogin(params) {
       />
     </FormItem>
     <FormItem name="username" class="enter-x">
-      <Input v-model:value="formData.username" size="large" :placeholder="t('sys.login.userName')" class="fix-auto-fill" />
+      <Input
+        v-model:value="formData.username" size="large" :placeholder="t('sys.login.userName')"
+        class="fix-auto-fill"
+      />
     </FormItem>
     <FormItem name="password" class="enter-x">
       <InputPassword