From 69539ee2d34ddfcb83cbfb25e218b94891196e76 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Sun, 10 Dec 2023 09:18:33 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=8A=BD=E7=A6=BBBaseButton=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=8C=89=E9=92=AE=E4=BF=AE=E6=94=B9=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button/index.ts                |   3 +
 src/components/Button/src/Button.vue          | 121 ++++++++++++++++++
 src/components/Error/src/Error.vue            |   3 +-
 .../Search/src/components/ActionButton.vue    |  14 +-
 src/components/Setting/src/Setting.vue        |  10 +-
 src/components/Table/src/Table.vue            |   6 +-
 .../UserInfo/src/components/LockDialog.vue    |   3 +-
 .../UserInfo/src/components/LockPage.vue      |  14 +-
 src/components/index.ts                       |   2 +
 .../Authorization/Department/Department.vue   |  32 +++--
 src/views/Authorization/Menu/Menu.vue         |  26 ++--
 .../Menu/components/AddButtonPermission.vue   |   6 +-
 .../Authorization/Menu/components/Write.vue   |   7 +-
 src/views/Authorization/Role/Role.vue         |  26 ++--
 src/views/Authorization/User/User.vue         |  27 ++--
 src/views/Components/CountTo.vue              |   8 +-
 src/views/Components/Descriptions.vue         |   4 +-
 src/views/Components/Dialog.vue               |  15 +--
 src/views/Components/Form/DefaultForm.vue     |  12 +-
 src/views/Components/Form/UseFormDemo.vue     |  50 ++++----
 src/views/Components/Icon.vue                 |   9 +-
 src/views/Components/ImageCropping.vue        |   4 +-
 src/views/Components/ImageViewer.vue          |   3 +-
 src/views/Components/Search.vue               |  41 +++---
 src/views/Components/Table/DefaultTable.vue   |   7 +-
 src/views/Components/Table/TreeTable.vue      |   7 +-
 src/views/Components/Table/UseTableDemo.vue   |  47 +++----
 src/views/Components/VideoPlayer.vue          |   4 +-
 src/views/Example/Dialog/ExampleDialog.vue    |  32 +++--
 src/views/Example/Page/ExampleAdd.vue         |   9 +-
 src/views/Example/Page/ExampleDetail.vue      |   5 +-
 src/views/Example/Page/ExampleEdit.vue        |   9 +-
 src/views/Example/Page/ExamplePage.vue        |  21 +--
 src/views/Function/MultipleTabs.vue           |   5 +-
 src/views/Function/Request.vue                |  18 +--
 src/views/Function/Test.vue                   |  20 +--
 src/views/Guide/Guide.vue                     |   3 +-
 src/views/Login/components/LoginForm.vue      |  16 ++-
 src/views/Login/components/RegisterForm.vue   |  11 +-
 src/views/hooks/useClipboard.vue              |   6 +-
 src/views/hooks/useTagsView.vue               |  17 ++-
 src/views/hooks/useWatermark.vue              |  11 +-
 types/components.d.ts                         |   1 +
 43 files changed, 426 insertions(+), 269 deletions(-)
 create mode 100644 src/components/Button/index.ts
 create mode 100644 src/components/Button/src/Button.vue

diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
new file mode 100644
index 000000000..6ae43b102
--- /dev/null
+++ b/src/components/Button/index.ts
@@ -0,0 +1,3 @@
+import BaseButton from './src/Button.vue'
+
+export { BaseButton }
diff --git a/src/components/Button/src/Button.vue b/src/components/Button/src/Button.vue
new file mode 100644
index 000000000..e5af71b36
--- /dev/null
+++ b/src/components/Button/src/Button.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { useDesign } from '@/hooks/web/useDesign'
+import { ElButton, ComponentSize, ButtonType } from 'element-plus'
+import { PropType, Component, computed, unref } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+
+const appStore = useAppStore()
+
+const getTheme = computed(() => appStore.getTheme)
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('button')
+
+const props = defineProps({
+  size: {
+    type: String as PropType<ComponentSize>,
+    default: undefined
+  },
+  type: {
+    type: String as PropType<ButtonType>,
+    default: 'default'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  plain: {
+    type: Boolean,
+    default: false
+  },
+  text: {
+    type: Boolean,
+    default: false
+  },
+  bg: {
+    type: Boolean,
+    default: false
+  },
+  link: {
+    type: Boolean,
+    default: false
+  },
+  round: {
+    type: Boolean,
+    default: false
+  },
+  circle: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  loadingIcon: {
+    type: [String, Object] as PropType<String | Component>,
+    default: undefined
+  },
+  icon: {
+    type: [String, Object] as PropType<String | Component>,
+    default: undefined
+  },
+  autofocus: {
+    type: Boolean,
+    default: false
+  },
+  nativeType: {
+    type: String as PropType<'button' | 'submit' | 'reset'>,
+    default: 'button'
+  },
+  autoInsertSpace: {
+    type: Boolean,
+    default: false
+  },
+  color: {
+    type: String,
+    default: ''
+  },
+  darker: {
+    type: Boolean,
+    default: false
+  },
+  tag: {
+    type: [String, Object] as PropType<String | Component>,
+    default: 'button'
+  }
+})
+
+const emits = defineEmits(['click'])
+
+const color = computed(() => {
+  const { type } = props
+  if (type === 'primary') {
+    return unref(getTheme).elColorPrimary
+  }
+  return ''
+})
+
+const style = computed(() => {
+  const { type } = props
+  if (type === 'primary') {
+    return '--el-button-text-color: #fff; --el-button-hover-text-color: #fff'
+  }
+  return ''
+})
+</script>
+
+<template>
+  <ElButton
+    :class="`${prefixCls} color-#fff`"
+    v-bind="{ ...props }"
+    :color="color"
+    :style="style"
+    @click="() => emits('click')"
+  >
+    <slot></slot>
+    <slot name="icon"></slot>
+    <slot name="loading"></slot>
+  </ElButton>
+</template>
diff --git a/src/components/Error/src/Error.vue b/src/components/Error/src/Error.vue
index 8676a816f..b18af6009 100644
--- a/src/components/Error/src/Error.vue
+++ b/src/components/Error/src/Error.vue
@@ -4,7 +4,6 @@ import networkError from '@/assets/svgs/500.svg'
 import noPermission from '@/assets/svgs/403.svg'
 import { propTypes } from '@/utils/propTypes'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElButton } from 'element-plus'
 
 interface ErrorMap {
   url: string
@@ -51,7 +50,7 @@ const btnClick = () => {
       <img width="350" :src="errorMap[type].url" alt="" />
       <div class="text-14px text-[var(--el-color-info)]">{{ errorMap[type].message }}</div>
       <div class="mt-20px">
-        <ElButton type="primary" @click="btnClick">{{ errorMap[type].buttonText }}</ElButton>
+        <BaseButton type="primary" @click="btnClick">{{ errorMap[type].buttonText }}</BaseButton>
       </div>
     </div>
   </div>
diff --git a/src/components/Search/src/components/ActionButton.vue b/src/components/Search/src/components/ActionButton.vue
index 1824cccf8..a6b6ffefb 100644
--- a/src/components/Search/src/components/ActionButton.vue
+++ b/src/components/Search/src/components/ActionButton.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ElButton } from 'element-plus'
 import { useIcon } from '@/hooks/web/useIcon'
 import { propTypes } from '@/utils/propTypes'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -31,7 +30,7 @@ const onExpand = () => {
 </script>
 
 <template>
-  <ElButton
+  <BaseButton
     v-if="showSearch"
     type="primary"
     :loading="searchLoading"
@@ -39,21 +38,22 @@ const onExpand = () => {
     @click="onSearch"
   >
     {{ t('common.query') }}
-  </ElButton>
-  <ElButton
+  </BaseButton>
+  <BaseButton
     v-if="showReset"
     :loading="resetLoading"
+    plain
     :icon="useIcon({ icon: 'ep:refresh-right' })"
     @click="onReset"
   >
     {{ t('common.reset') }}
-  </ElButton>
-  <ElButton
+  </BaseButton>
+  <BaseButton
     v-if="showExpand"
     :icon="useIcon({ icon: visible ? 'ep:arrow-up' : 'ep:arrow-down' })"
     text
     @click="onExpand"
   >
     {{ t(visible ? 'common.shrink' : 'common.expand') }}
-  </ElButton>
+  </BaseButton>
 </template>
diff --git a/src/components/Setting/src/Setting.vue b/src/components/Setting/src/Setting.vue
index 7f6e4a4a7..869871b34 100644
--- a/src/components/Setting/src/Setting.vue
+++ b/src/components/Setting/src/Setting.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ElDrawer, ElDivider, ElButton, ElMessage } from 'element-plus'
+import { ElDrawer, ElDivider, ElMessage } from 'element-plus'
 import { ref, unref, computed, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
@@ -278,12 +278,14 @@ const clear = () => {
 
     <ElDivider />
     <div>
-      <ElButton type="primary" class="w-full" @click="copyConfig">{{ t('setting.copy') }}</ElButton>
+      <BaseButton type="primary" class="w-full" @click="copyConfig">{{
+        t('setting.copy')
+      }}</BaseButton>
     </div>
     <div class="mt-5px">
-      <ElButton type="danger" class="w-full" @click="clear">
+      <BaseButton type="danger" class="w-full" @click="clear">
         {{ t('setting.clearAndReset') }}
-      </ElButton>
+      </BaseButton>
     </div>
   </ElDrawer>
 </template>
diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue
index a19511d99..4eec3fcdc 100644
--- a/src/components/Table/src/Table.vue
+++ b/src/components/Table/src/Table.vue
@@ -6,7 +6,6 @@ import {
   ComponentSize,
   ElTooltipProps,
   ElImage,
-  ElButton,
   ElEmpty,
   ElCard
 } from 'element-plus'
@@ -21,6 +20,7 @@ import TableActions from './components/TableActions.vue'
 import { isImgPath } from '@/utils/is'
 import { createVideoViewer } from '@/components/VideoPlayer'
 import { Icon } from '@/components/Icon'
+import { BaseButton } from '@/components/Button'
 
 export default defineComponent({
   name: 'Table',
@@ -393,7 +393,7 @@ export default defineComponent({
               preview-teleported
             />
           ) : (
-            <ElButton
+            <BaseButton
               type="primary"
               icon={<Icon icon="ep:video-play" />}
               onClick={() => {
@@ -403,7 +403,7 @@ export default defineComponent({
               }}
             >
               预览
-            </ElButton>
+            </BaseButton>
           )}
         </div>
       )
diff --git a/src/components/UserInfo/src/components/LockDialog.vue b/src/components/UserInfo/src/components/LockDialog.vue
index a5f01647f..886144538 100644
--- a/src/components/UserInfo/src/components/LockDialog.vue
+++ b/src/components/UserInfo/src/components/LockDialog.vue
@@ -7,7 +7,6 @@ import { useForm } from '@/hooks/web/useForm'
 import { reactive, computed } from 'vue'
 import { useValidator } from '@/hooks/web/useValidator'
 import { FormSchema } from '@/components/Form'
-import { ElButton } from 'element-plus'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useLockStore } from '@/store/modules/lock'
 
@@ -87,7 +86,7 @@ const handleLock = async () => {
     </div>
     <Form :is-col="false" :schema="schema" :rules="rules" @register="formRegister" />
     <template #footer>
-      <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
+      <BaseButton type="primary" @click="handleLock">{{ t('lock.lock') }}</BaseButton>
     </template>
   </Dialog>
 </template>
diff --git a/src/components/UserInfo/src/components/LockPage.vue b/src/components/UserInfo/src/components/LockPage.vue
index bf10b60b5..5e09ad8ff 100644
--- a/src/components/UserInfo/src/components/LockPage.vue
+++ b/src/components/UserInfo/src/components/LockPage.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { ElInput, ElButton } from 'element-plus'
+import { ElInput } from 'element-plus'
 import { resetRouter } from '@/router'
 import { useRouter } from 'vue-router'
 import { useStorage } from '@/hooks/web/useStorage'
@@ -107,7 +107,7 @@ function handleShowForm(show = false) {
             {{ t('lock.message') }}
           </span>
           <div :class="`${prefixCls}-entry__footer enter-x`">
-            <ElButton
+            <BaseButton
               type="primary"
               size="small"
               class="mt-2 mr-2 enter-x"
@@ -116,8 +116,8 @@ function handleShowForm(show = false) {
               @click="handleShowForm(true)"
             >
               {{ t('common.back') }}
-            </ElButton>
-            <ElButton
+            </BaseButton>
+            <BaseButton
               type="primary"
               size="small"
               class="mt-2 mr-2 enter-x"
@@ -126,8 +126,8 @@ function handleShowForm(show = false) {
               @click="goLogin"
             >
               {{ t('lock.backToLogin') }}
-            </ElButton>
-            <ElButton
+            </BaseButton>
+            <BaseButton
               type="primary"
               class="mt-2"
               size="small"
@@ -136,7 +136,7 @@ function handleShowForm(show = false) {
               :disabled="loading"
             >
               {{ t('lock.entrySystem') }}
-            </ElButton>
+            </BaseButton>
           </div>
         </div>
       </div>
diff --git a/src/components/index.ts b/src/components/index.ts
index b20c4ec9e..9a179ea11 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,8 +1,10 @@
 import type { App } from 'vue'
 import { Icon } from './Icon'
 import { Permission } from './Permission'
+import { BaseButton } from './Button'
 
 export const setupGlobCom = (app: App<Element>): void => {
   app.component('Icon', Icon)
   app.component('Permission', Permission)
+  app.component('BaseButton', BaseButton)
 }
diff --git a/src/views/Authorization/Department/Department.vue b/src/views/Authorization/Department/Department.vue
index 4d151381a..c88970504 100644
--- a/src/views/Authorization/Department/Department.vue
+++ b/src/views/Authorization/Department/Department.vue
@@ -3,7 +3,7 @@ import { ContentWrap } from '@/components/ContentWrap'
 import { Search } from '@/components/Search'
 import { Dialog } from '@/components/Dialog'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElButton, ElTag } from 'element-plus'
+import { ElTag } from 'element-plus'
 import { Table } from '@/components/Table'
 import {
   getDepartmentApi,
@@ -17,6 +17,7 @@ import { ref, unref, reactive } from 'vue'
 import Write from './components/Write.vue'
 import Detail from './components/Detail.vue'
 import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { BaseButton } from '@/components/Button'
 
 const ids = ref<string[]>([])
 
@@ -211,15 +212,15 @@ const crudSchemas = reactive<CrudSchema[]>([
         default: (data: any) => {
           return (
             <>
-              <ElButton type="primary" onClick={() => action(data.row, 'edit')}>
+              <BaseButton type="primary" onClick={() => action(data.row, 'edit')}>
                 {t('exampleDemo.edit')}
-              </ElButton>
-              <ElButton type="success" onClick={() => action(data.row, 'detail')}>
+              </BaseButton>
+              <BaseButton type="success" onClick={() => action(data.row, 'detail')}>
                 {t('exampleDemo.detail')}
-              </ElButton>
-              <ElButton type="danger" onClick={() => delData(data.row)}>
+              </BaseButton>
+              <BaseButton type="danger" onClick={() => delData(data.row)}>
                 {t('exampleDemo.del')}
-              </ElButton>
+              </BaseButton>
             </>
           )
         }
@@ -292,10 +293,10 @@ const save = async () => {
     <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
 
     <div class="mb-10px">
-      <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
-      <ElButton :loading="delLoading" type="danger" @click="delData(null)">
+      <BaseButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</BaseButton>
+      <BaseButton :loading="delLoading" type="danger" @click="delData(null)">
         {{ t('exampleDemo.del') }}
-      </ElButton>
+      </BaseButton>
     </div>
 
     <Table
@@ -326,10 +327,15 @@ const save = async () => {
     />
 
     <template #footer>
-      <ElButton v-if="actionType !== 'detail'" type="primary" :loading="saveLoading" @click="save">
+      <BaseButton
+        v-if="actionType !== 'detail'"
+        type="primary"
+        :loading="saveLoading"
+        @click="save"
+      >
         {{ t('exampleDemo.save') }}
-      </ElButton>
-      <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
+      </BaseButton>
+      <BaseButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</BaseButton>
     </template>
   </Dialog>
 </template>
diff --git a/src/views/Authorization/Menu/Menu.vue b/src/views/Authorization/Menu/Menu.vue
index 3f5a9764d..1ea4fb3a8 100644
--- a/src/views/Authorization/Menu/Menu.vue
+++ b/src/views/Authorization/Menu/Menu.vue
@@ -4,7 +4,7 @@ import { getMenuListApi } from '@/api/menu'
 import { useTable } from '@/hooks/web/useTable'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Table, TableColumn } from '@/components/Table'
-import { ElButton, ElTag } from 'element-plus'
+import { ElTag } from 'element-plus'
 import { Icon } from '@/components/Icon'
 import { Search } from '@/components/Search'
 import { FormSchema } from '@/components/Form'
@@ -12,6 +12,7 @@ import { ContentWrap } from '@/components/ContentWrap'
 import Write from './components/Write.vue'
 import Detail from './components/Detail.vue'
 import { Dialog } from '@/components/Dialog'
+import { BaseButton } from '@/components/Button'
 
 const { t } = useI18n()
 
@@ -109,13 +110,13 @@ const tableColumns = reactive<TableColumn[]>([
         const row = data.row
         return (
           <>
-            <ElButton type="primary" onClick={() => action(row, 'edit')}>
+            <BaseButton type="primary" onClick={() => action(row, 'edit')}>
               {t('exampleDemo.edit')}
-            </ElButton>
-            <ElButton type="success" onClick={() => action(row, 'detail')}>
+            </BaseButton>
+            <BaseButton type="success" onClick={() => action(row, 'detail')}>
               {t('exampleDemo.detail')}
-            </ElButton>
-            <ElButton type="danger">{t('exampleDemo.del')}</ElButton>
+            </BaseButton>
+            <BaseButton type="danger">{t('exampleDemo.del')}</BaseButton>
           </>
         )
       }
@@ -179,7 +180,7 @@ const save = async () => {
   <ContentWrap>
     <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
     <div class="mb-10px">
-      <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
+      <BaseButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</BaseButton>
     </div>
     <Table
       :columns="tableColumns"
@@ -197,10 +198,15 @@ const save = async () => {
     <Detail v-if="actionType === 'detail'" :current-row="currentRow" />
 
     <template #footer>
-      <ElButton v-if="actionType !== 'detail'" type="primary" :loading="saveLoading" @click="save">
+      <BaseButton
+        v-if="actionType !== 'detail'"
+        type="primary"
+        :loading="saveLoading"
+        @click="save"
+      >
         {{ t('exampleDemo.save') }}
-      </ElButton>
-      <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
+      </BaseButton>
+      <BaseButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</BaseButton>
     </template>
   </Dialog>
 </template>
diff --git a/src/views/Authorization/Menu/components/AddButtonPermission.vue b/src/views/Authorization/Menu/components/AddButtonPermission.vue
index 31ad3c92a..606016a01 100644
--- a/src/views/Authorization/Menu/components/AddButtonPermission.vue
+++ b/src/views/Authorization/Menu/components/AddButtonPermission.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { FormSchema, Form } from '@/components/Form'
-import { ElDrawer, ElButton } from 'element-plus'
+import { ElDrawer } from 'element-plus'
 import { reactive } from 'vue'
 import { useForm } from '@/hooks/web/useForm'
 import { useValidator } from '@/hooks/web/useValidator'
@@ -59,8 +59,8 @@ const confirm = async () => {
     </template>
     <template #footer>
       <div>
-        <ElButton @click="() => (modelValue = false)">取消</ElButton>
-        <ElButton type="primary" @click="confirm">确认</ElButton>
+        <BaseButton @click="() => (modelValue = false)">取消</BaseButton>
+        <BaseButton type="primary" @click="confirm">确认</BaseButton>
       </div>
     </template>
   </ElDrawer>
diff --git a/src/views/Authorization/Menu/components/Write.vue b/src/views/Authorization/Menu/components/Write.vue
index d23c0a704..456073b32 100644
--- a/src/views/Authorization/Menu/components/Write.vue
+++ b/src/views/Authorization/Menu/components/Write.vue
@@ -5,8 +5,9 @@ import { PropType, reactive, watch, ref, unref } from 'vue'
 import { useValidator } from '@/hooks/web/useValidator'
 import { useI18n } from '@/hooks/web/useI18n'
 import { getMenuListApi } from '@/api/menu'
-import { ElTag, ElButton } from 'element-plus'
+import { ElTag } from 'element-plus'
 import AddButtonPermission from './AddButtonPermission.vue'
+import { BaseButton } from '@/components/Button'
 
 const { t } = useI18n()
 
@@ -201,9 +202,9 @@ const formSchema = reactive<FormSchema[]>([
                 </ElTag>
               )
             })}
-            <ElButton type="primary" size="small" onClick={() => (showDrawer.value = true)}>
+            <BaseButton type="primary" size="small" onClick={() => (showDrawer.value = true)}>
               添加权限
-            </ElButton>
+            </BaseButton>
           </>
         )
       }
diff --git a/src/views/Authorization/Role/Role.vue b/src/views/Authorization/Role/Role.vue
index 9c4e68b85..4b67c3fe7 100644
--- a/src/views/Authorization/Role/Role.vue
+++ b/src/views/Authorization/Role/Role.vue
@@ -4,13 +4,14 @@ import { getRoleListApi } from '@/api/role'
 import { useTable } from '@/hooks/web/useTable'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Table, TableColumn } from '@/components/Table'
-import { ElButton, ElTag } from 'element-plus'
+import { ElTag } from 'element-plus'
 import { Search } from '@/components/Search'
 import { FormSchema } from '@/components/Form'
 import { ContentWrap } from '@/components/ContentWrap'
 import Write from './components/Write.vue'
 import Detail from './components/Detail.vue'
 import { Dialog } from '@/components/Dialog'
+import { BaseButton } from '@/components/Button'
 
 const { t } = useI18n()
 
@@ -69,13 +70,13 @@ const tableColumns = reactive<TableColumn[]>([
         const row = data.row
         return (
           <>
-            <ElButton type="primary" onClick={() => action(row, 'edit')}>
+            <BaseButton type="primary" onClick={() => action(row, 'edit')}>
               {t('exampleDemo.edit')}
-            </ElButton>
-            <ElButton type="success" onClick={() => action(row, 'detail')}>
+            </BaseButton>
+            <BaseButton type="success" onClick={() => action(row, 'detail')}>
               {t('exampleDemo.detail')}
-            </ElButton>
-            <ElButton type="danger">{t('exampleDemo.del')}</ElButton>
+            </BaseButton>
+            <BaseButton type="danger">{t('exampleDemo.del')}</BaseButton>
           </>
         )
       }
@@ -138,7 +139,7 @@ const save = async () => {
   <ContentWrap>
     <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
     <div class="mb-10px">
-      <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
+      <BaseButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</BaseButton>
     </div>
     <Table
       :columns="tableColumns"
@@ -158,10 +159,15 @@ const save = async () => {
     <Detail v-else :current-row="currentRow" />
 
     <template #footer>
-      <ElButton v-if="actionType !== 'detail'" type="primary" :loading="saveLoading" @click="save">
+      <BaseButton
+        v-if="actionType !== 'detail'"
+        type="primary"
+        :loading="saveLoading"
+        @click="save"
+      >
         {{ t('exampleDemo.save') }}
-      </ElButton>
-      <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
+      </BaseButton>
+      <BaseButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</BaseButton>
     </template>
   </Dialog>
 </template>
diff --git a/src/views/Authorization/User/User.vue b/src/views/Authorization/User/User.vue
index 259d4d788..12ad2e206 100644
--- a/src/views/Authorization/User/User.vue
+++ b/src/views/Authorization/User/User.vue
@@ -3,7 +3,7 @@ import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Table } from '@/components/Table'
 import { ref, unref, nextTick, watch, reactive } from 'vue'
-import { ElButton, ElTree, ElInput, ElDivider } from 'element-plus'
+import { ElTree, ElInput, ElDivider } from 'element-plus'
 import { getDepartmentApi, getUserByIdApi, saveUserApi, deleteUserByIdApi } from '@/api/department'
 import type { DepartmentItem, DepartmentUserItem } from '@/api/department/types'
 import { useTable } from '@/hooks/web/useTable'
@@ -13,6 +13,7 @@ import Detail from './components/Detail.vue'
 import { Dialog } from '@/components/Dialog'
 import { getRoleListApi } from '@/api/role'
 import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { BaseButton } from '@/components/Button'
 
 const { t } = useI18n()
 
@@ -171,15 +172,15 @@ const crudSchemas = reactive<CrudSchema[]>([
           const row = data.row as DepartmentUserItem
           return (
             <>
-              <ElButton type="primary" onClick={() => action(row, 'edit')}>
+              <BaseButton type="primary" onClick={() => action(row, 'edit')}>
                 {t('exampleDemo.edit')}
-              </ElButton>
-              <ElButton type="success" onClick={() => action(row, 'detail')}>
+              </BaseButton>
+              <BaseButton type="success" onClick={() => action(row, 'detail')}>
                 {t('exampleDemo.detail')}
-              </ElButton>
-              <ElButton type="danger" onClick={() => delData(row)}>
+              </BaseButton>
+              <BaseButton type="danger" onClick={() => delData(row)}>
                 {t('exampleDemo.del')}
-              </ElButton>
+              </BaseButton>
             </>
           )
         }
@@ -335,10 +336,10 @@ const save = async () => {
       />
 
       <div class="mb-10px">
-        <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
-        <ElButton :loading="delLoading" type="danger" @click="delData()">
+        <BaseButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</BaseButton>
+        <BaseButton :loading="delLoading" type="danger" @click="delData()">
           {{ t('exampleDemo.del') }}
-        </ElButton>
+        </BaseButton>
       </div>
       <Table
         v-model:current-page="currentPage"
@@ -368,15 +369,15 @@ const save = async () => {
       />
 
       <template #footer>
-        <ElButton
+        <BaseButton
           v-if="actionType !== 'detail'"
           type="primary"
           :loading="saveLoading"
           @click="save"
         >
           {{ t('exampleDemo.save') }}
-        </ElButton>
-        <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
+        </BaseButton>
+        <BaseButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</BaseButton>
       </template>
     </Dialog>
   </div>
diff --git a/src/views/Components/CountTo.vue b/src/views/Components/CountTo.vue
index 4c906b99c..a547e8eab 100644
--- a/src/views/Components/CountTo.vue
+++ b/src/views/Components/CountTo.vue
@@ -2,7 +2,7 @@
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
 import { CountTo } from '@/components/CountTo'
-import { ElRow, ElCol, ElInputNumber, ElInput, ElButton } from 'element-plus'
+import { ElRow, ElCol, ElInputNumber, ElInput } from 'element-plus'
 import { ref, unref } from 'vue'
 
 const { t } = useI18n()
@@ -89,10 +89,10 @@ const pauseResume = () => {
       </ElCol>
       <ElCol :span="24">
         <div class="text-center">
-          <ElButton type="primary" @click="start">{{ t('countToDemo.start') }}</ElButton>
-          <ElButton @click="pauseResume">
+          <BaseButton type="primary" @click="start">{{ t('countToDemo.start') }}</BaseButton>
+          <BaseButton @click="pauseResume">
             {{ t('countToDemo.pause') }}/{{ t('countToDemo.resume') }}
-          </ElButton>
+          </BaseButton>
         </div>
       </ElCol>
     </ElRow>
diff --git a/src/views/Components/Descriptions.vue b/src/views/Components/Descriptions.vue
index 5d82fdc27..b30b9b27d 100644
--- a/src/views/Components/Descriptions.vue
+++ b/src/views/Components/Descriptions.vue
@@ -3,7 +3,7 @@ import { Descriptions } from '@/components/Descriptions'
 import { useI18n } from '@/hooks/web/useI18n'
 import { reactive } from 'vue'
 import { Form } from '@/components/Form'
-import { ElFormItem, ElInput, ElButton } from 'element-plus'
+import { ElFormItem, ElInput } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
 import { useForm } from '@/hooks/web/useForm'
 import { DescriptionsSchema } from '@/components/Descriptions'
@@ -172,7 +172,7 @@ const formValidation = async () => {
       class="mt-20px"
     />
     <div class="text-center mt-10px">
-      <ElButton @click="formValidation"> {{ t('formDemo.formValidation') }} </ElButton>
+      <BaseButton @click="formValidation"> {{ t('formDemo.formValidation') }} </BaseButton>
     </div>
   </Form>
 </template>
diff --git a/src/views/Components/Dialog.vue b/src/views/Components/Dialog.vue
index 41fdddc6f..a71848913 100644
--- a/src/views/Components/Dialog.vue
+++ b/src/views/Components/Dialog.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
 import { Dialog } from '@/components/Dialog'
-import { ElButton } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ref, reactive } from 'vue'
 import { Form, FormSchema } from '@/components/Form'
@@ -105,26 +104,26 @@ const formSubmit = async () => {
 
 <template>
   <ContentWrap :title="t('dialogDemo.dialog')" :message="t('dialogDemo.dialogDes')">
-    <ElButton type="primary" @click="dialogVisible = !dialogVisible">
+    <BaseButton type="primary" @click="dialogVisible = !dialogVisible">
       {{ t('dialogDemo.open') }}
-    </ElButton>
+    </BaseButton>
 
-    <ElButton type="primary" @click="dialogVisible2 = !dialogVisible2">
+    <BaseButton type="primary" @click="dialogVisible2 = !dialogVisible2">
       {{ t('dialogDemo.combineWithForm') }}
-    </ElButton>
+    </BaseButton>
 
     <Dialog v-model="dialogVisible" :title="t('dialogDemo.dialog')">
       <div v-for="v in 10000" :key="v">{{ v }}</div>
       <template #footer>
-        <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
+        <BaseButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</BaseButton>
       </template>
     </Dialog>
 
     <Dialog v-model="dialogVisible2" :title="t('dialogDemo.dialog')">
       <Form :schema="schema" @register="formRegister" />
       <template #footer>
-        <ElButton type="primary" @click="formSubmit">{{ t('dialogDemo.submit') }}</ElButton>
-        <ElButton @click="dialogVisible2 = false">{{ t('dialogDemo.close') }}</ElButton>
+        <BaseButton type="primary" @click="formSubmit">{{ t('dialogDemo.submit') }}</BaseButton>
+        <BaseButton @click="dialogVisible2 = false">{{ t('dialogDemo.close') }}</BaseButton>
       </template>
     </Dialog>
   </ContentWrap>
diff --git a/src/views/Components/Form/DefaultForm.vue b/src/views/Components/Form/DefaultForm.vue
index 88b970360..788c6f236 100644
--- a/src/views/Components/Form/DefaultForm.vue
+++ b/src/views/Components/Form/DefaultForm.vue
@@ -8,7 +8,6 @@ import { SelectOption, RadioOption, CheckboxOption, FormSchema } from '@/compone
 import {
   ElOption,
   ElOptionGroup,
-  ElButton,
   ElRadio,
   ElRadioButton,
   ElCheckbox,
@@ -20,6 +19,7 @@ import {
 } from 'element-plus'
 import { getDictOneApi } from '@/api/common'
 import { Icon } from '@/components/Icon'
+import { BaseButton } from '@/components/Button'
 
 const appStore = useAppStore()
 
@@ -969,16 +969,16 @@ const schema = reactive<FormSchema[]>([
         },
         leftFooter: () => {
           return (
-            <ElButton class="transfer-footer" size="small">
+            <BaseButton class="transfer-footer" size="small">
               Operation
-            </ElButton>
+            </BaseButton>
           )
         },
         rightFooter: () => {
           return (
-            <ElButton class="transfer-footer" size="small">
+            <BaseButton class="transfer-footer" size="small">
               Operation
-            </ElButton>
+            </BaseButton>
           )
         }
       }
@@ -1722,7 +1722,7 @@ const schema = reactive<FormSchema[]>([
         )
       },
       slots: {
-        default: () => <ElButton type="primary">Click to upload</ElButton>,
+        default: () => <BaseButton type="primary">Click to upload</BaseButton>,
         tip: () => <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
       }
     }
diff --git a/src/views/Components/Form/UseFormDemo.vue b/src/views/Components/Form/UseFormDemo.vue
index 4f5927930..2aace3a65 100644
--- a/src/views/Components/Form/UseFormDemo.vue
+++ b/src/views/Components/Form/UseFormDemo.vue
@@ -4,7 +4,7 @@ import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useForm } from '@/hooks/web/useForm'
 import { reactive, unref, ref } from 'vue'
-import { ElButton, ElInput, FormItemProp, ComponentSize } from 'element-plus'
+import { ElInput, FormItemProp, ComponentSize } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
 import { getDictOneApi } from '@/api/common'
 
@@ -355,44 +355,46 @@ const formValidate = (prop: FormItemProp, isValid: boolean, message: string) =>
 
 <template>
   <ContentWrap :title="`UseForm ${t('formDemo.operate')}`" style="margin-bottom: 20px">
-    <ElButton @click="changeLabelWidth(150)">{{ t('formDemo.change') }} labelWidth</ElButton>
-    <ElButton @click="changeLabelWidth('auto')">{{ t('formDemo.restore') }} labelWidth</ElButton>
+    <BaseButton @click="changeLabelWidth(150)">{{ t('formDemo.change') }} labelWidth</BaseButton>
+    <BaseButton @click="changeLabelWidth('auto')"
+      >{{ t('formDemo.restore') }} labelWidth</BaseButton
+    >
 
-    <ElButton @click="changeSize('large')">{{ t('formDemo.change') }} size</ElButton>
-    <ElButton @click="changeSize('default')">{{ t('formDemo.restore') }} size</ElButton>
+    <BaseButton @click="changeSize('large')">{{ t('formDemo.change') }} size</BaseButton>
+    <BaseButton @click="changeSize('default')">{{ t('formDemo.restore') }} size</BaseButton>
 
-    <ElButton @click="changeDisabled(true)">{{ t('formDemo.disabled') }}</ElButton>
-    <ElButton @click="changeDisabled(false)">{{ t('formDemo.disablement') }}</ElButton>
+    <BaseButton @click="changeDisabled(true)">{{ t('formDemo.disabled') }}</BaseButton>
+    <BaseButton @click="changeDisabled(false)">{{ t('formDemo.disablement') }}</BaseButton>
 
-    <ElButton @click="changeSchema(true)">
+    <BaseButton @click="changeSchema(true)">
       {{ t('formDemo.delete') }} {{ t('formDemo.select') }}
-    </ElButton>
-    <ElButton @click="changeSchema(false)">
+    </BaseButton>
+    <BaseButton @click="changeSchema(false)">
       {{ t('formDemo.add') }} {{ t('formDemo.select') }}
-    </ElButton>
+    </BaseButton>
 
-    <ElButton @click="setValue(false)">{{ t('formDemo.setValue') }}</ElButton>
-    <ElButton @click="setValue(true)">{{ t('formDemo.resetValue') }}</ElButton>
+    <BaseButton @click="setValue(false)">{{ t('formDemo.setValue') }}</BaseButton>
+    <BaseButton @click="setValue(true)">{{ t('formDemo.resetValue') }}</BaseButton>
 
-    <ElButton @click="setLabel">
+    <BaseButton @click="setLabel">
       {{ t('formDemo.set') }} {{ t('formDemo.select') }} label
-    </ElButton>
+    </BaseButton>
 
-    <ElButton @click="addItem"> {{ t('formDemo.add') }} {{ t('formDemo.subitem') }} </ElButton>
+    <BaseButton @click="addItem"> {{ t('formDemo.add') }} {{ t('formDemo.subitem') }} </BaseButton>
 
-    <ElButton @click="formValidation"> {{ t('formDemo.formValidation') }} </ElButton>
-    <ElButton @click="verifyReset"> {{ t('formDemo.verifyReset') }} </ElButton>
+    <BaseButton @click="formValidation"> {{ t('formDemo.formValidation') }} </BaseButton>
+    <BaseButton @click="verifyReset"> {{ t('formDemo.verifyReset') }} </BaseButton>
 
-    <ElButton @click="getDictOne">
+    <BaseButton @click="getDictOne">
       {{ `${t('formDemo.select')} ${t('searchDemo.dynamicOptions')}` }}
-    </ElButton>
+    </BaseButton>
 
-    <ElButton @click="inoutFocus">
+    <BaseButton @click="inoutFocus">
       {{ `${t('formDemo.input')} ${t('formDemo.focus')}` }}
-    </ElButton>
-    <ElButton @click="inoutValidation">
+    </BaseButton>
+    <BaseButton @click="inoutValidation">
       {{ `${t('formDemo.input')} ${t('formDemo.formValidation')}` }}
-    </ElButton>
+    </BaseButton>
   </ContentWrap>
   <ContentWrap :title="`UseForm ${t('formDemo.example')}`">
     <Form :schema="schema" @register="formRegister" @validate="formValidate" />
diff --git a/src/views/Components/Icon.vue b/src/views/Components/Icon.vue
index 7ec327315..50913d7dd 100644
--- a/src/views/Components/Icon.vue
+++ b/src/views/Components/Icon.vue
@@ -2,7 +2,6 @@
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Infotip } from '@/components/Infotip'
-import { ElButton } from 'element-plus'
 import { useIcon } from '@/hooks/web/useIcon'
 
 const { t } = useI18n()
@@ -53,10 +52,10 @@ const alarmClock = useIcon({ icon: 'ep:alarm-clock' })
   </ContentWrap>
   <ContentWrap title="useIcon">
     <div class="flex justify-between">
-      <ElButton :icon="peoples">Button</ElButton>
-      <ElButton :icon="money">Button</ElButton>
-      <ElButton :icon="aim">Button</ElButton>
-      <ElButton :icon="alarmClock">Button</ElButton>
+      <BaseButton :icon="peoples">Button</BaseButton>
+      <BaseButton :icon="money">Button</BaseButton>
+      <BaseButton :icon="aim">Button</BaseButton>
+      <BaseButton :icon="alarmClock">Button</BaseButton>
     </div>
   </ContentWrap>
 </template>
diff --git a/src/views/Components/ImageCropping.vue b/src/views/Components/ImageCropping.vue
index 0d1e2694a..3c844b0c4 100644
--- a/src/views/Components/ImageCropping.vue
+++ b/src/views/Components/ImageCropping.vue
@@ -2,7 +2,7 @@
 import { ContentWrap } from '@/components/ContentWrap'
 import { ImageCropping } from '@/components/ImageCropping'
 import { ref, unref } from 'vue'
-import { ElButton, ElInput } from 'element-plus'
+import { ElInput } from 'element-plus'
 
 const cropperExpose = ref<InstanceType<typeof ImageCropping>>()
 
@@ -15,7 +15,7 @@ const getBase64 = () => {
 
 <template>
   <ContentWrap title="图片裁剪">
-    <ElButton type="primary" class="mb-20px" @click="getBase64">裁剪</ElButton>
+    <BaseButton type="primary" class="mb-20px" @click="getBase64">裁剪</BaseButton>
     <ElInput v-model="base64" class="mb-20px" type="textarea" />
     <ImageCropping
       ref="cropperExpose"
diff --git a/src/views/Components/ImageViewer.vue b/src/views/Components/ImageViewer.vue
index 374ca7133..a20ce91de 100644
--- a/src/views/Components/ImageViewer.vue
+++ b/src/views/Components/ImageViewer.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
 import { createImageViewer } from '@/components/ImageViewer'
-import { ElButton } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
 
 const { t } = useI18n()
@@ -25,6 +24,6 @@ const open = () => {
     :title="t('imageViewerDemo.imageViewer')"
     :message="t('imageViewerDemo.imageViewerDes')"
   >
-    <ElButton type="primary" @click="open">{{ t('imageViewerDemo.open') }}</ElButton>
+    <BaseButton type="primary" @click="open">{{ t('imageViewerDemo.open') }}</BaseButton>
   </ContentWrap>
 </template>
diff --git a/src/views/Components/Search.vue b/src/views/Components/Search.vue
index c21d28ca8..8c7f0addd 100644
--- a/src/views/Components/Search.vue
+++ b/src/views/Components/Search.vue
@@ -3,7 +3,6 @@ import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Search } from '@/components/Search'
 import { reactive, ref, unref } from 'vue'
-import { ElButton } from 'element-plus'
 import { getDictOneApi } from '@/api/common'
 import { FormSchema } from '@/components/Form'
 import { useSearch } from '@/hooks/web/useSearch'
@@ -305,37 +304,37 @@ const changeResetLoading = () => {
     :title="`${t('searchDemo.search')} ${t('searchDemo.operate')}`"
     style="margin-bottom: 20px"
   >
-    <ElButton @click="changeGrid(true)">{{ t('searchDemo.grid') }}</ElButton>
-    <ElButton @click="changeGrid(false)">
+    <BaseButton @click="changeGrid(true)">{{ t('searchDemo.grid') }}</BaseButton>
+    <BaseButton @click="changeGrid(false)">
       {{ t('searchDemo.restore') }} {{ t('searchDemo.grid') }}
-    </ElButton>
+    </BaseButton>
 
-    <ElButton @click="changeLayout">
+    <BaseButton @click="changeLayout">
       {{ t('searchDemo.button') }} {{ t('searchDemo.position') }}
-    </ElButton>
+    </BaseButton>
 
-    <ElButton @click="changePosition('left')">
+    <BaseButton @click="changePosition('left')">
       {{ t('searchDemo.bottom') }} {{ t('searchDemo.position') }}-{{ t('searchDemo.left') }}
-    </ElButton>
-    <ElButton @click="changePosition('center')">
+    </BaseButton>
+    <BaseButton @click="changePosition('center')">
       {{ t('searchDemo.bottom') }} {{ t('searchDemo.position') }}-{{ t('searchDemo.center') }}
-    </ElButton>
-    <ElButton @click="changePosition('right')">
+    </BaseButton>
+    <BaseButton @click="changePosition('right')">
       {{ t('searchDemo.bottom') }} {{ t('searchDemo.position') }}-{{ t('searchDemo.right') }}
-    </ElButton>
-    <ElButton @click="getDictOne">
+    </BaseButton>
+    <BaseButton @click="getDictOne">
       {{ t('formDemo.select') }} {{ t('searchDemo.dynamicOptions') }}
-    </ElButton>
-    <ElButton @click="delRadio">{{ t('searchDemo.deleteRadio') }}</ElButton>
-    <ElButton @click="restoreRadio">{{ t('searchDemo.restoreRadio') }}</ElButton>
-    <ElButton @click="setValue">{{ t('formDemo.setValue') }}</ElButton>
+    </BaseButton>
+    <BaseButton @click="delRadio">{{ t('searchDemo.deleteRadio') }}</BaseButton>
+    <BaseButton @click="restoreRadio">{{ t('searchDemo.restoreRadio') }}</BaseButton>
+    <BaseButton @click="setValue">{{ t('formDemo.setValue') }}</BaseButton>
 
-    <ElButton @click="changeSearchLoading">
+    <BaseButton @click="changeSearchLoading">
       {{ t('searchDemo.search') }} {{ t('searchDemo.loading') }}
-    </ElButton>
-    <ElButton @click="changeResetLoading">
+    </BaseButton>
+    <BaseButton @click="changeResetLoading">
       {{ t('searchDemo.reset') }} {{ t('searchDemo.loading') }}
-    </ElButton>
+    </BaseButton>
   </ContentWrap>
 
   <ContentWrap :title="t('searchDemo.search')" :message="t('searchDemo.searchDes')">
diff --git a/src/views/Components/Table/DefaultTable.vue b/src/views/Components/Table/DefaultTable.vue
index 0cd50a048..974c896f1 100644
--- a/src/views/Components/Table/DefaultTable.vue
+++ b/src/views/Components/Table/DefaultTable.vue
@@ -5,7 +5,8 @@ import { Table, TableColumn } from '@/components/Table'
 import { getTableListApi } from '@/api/table'
 import { TableData } from '@/api/table/types'
 import { ref, h } from 'vue'
-import { ElTag, ElButton } from 'element-plus'
+import { ElTag } from 'element-plus'
+import { BaseButton } from '@/components/Button'
 
 interface Params {
   pageIndex?: number
@@ -56,9 +57,9 @@ const columns: TableColumn[] = [
     slots: {
       default: (data) => {
         return (
-          <ElButton type="primary" onClick={() => actionFn(data)}>
+          <BaseButton type="primary" onClick={() => actionFn(data)}>
             {t('tableDemo.action')}
-          </ElButton>
+          </BaseButton>
         )
       }
     }
diff --git a/src/views/Components/Table/TreeTable.vue b/src/views/Components/Table/TreeTable.vue
index e16f3c826..90a1dfb23 100644
--- a/src/views/Components/Table/TreeTable.vue
+++ b/src/views/Components/Table/TreeTable.vue
@@ -4,8 +4,9 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { Table, TableColumn } from '@/components/Table'
 import { getTreeTableListApi } from '@/api/table'
 import { reactive, unref } from 'vue'
-import { ElTag, ElButton } from 'element-plus'
+import { ElTag } from 'element-plus'
 import { useTable } from '@/hooks/web/useTable'
+import { BaseButton } from '@/components/Button'
 
 const { tableRegister, tableState } = useTable({
   fetchDataApi: async () => {
@@ -77,9 +78,9 @@ const columns = reactive<TableColumn[]>([
     slots: {
       default: (data) => {
         return (
-          <ElButton type="primary" onClick={() => actionFn(data)}>
+          <BaseButton type="primary" onClick={() => actionFn(data)}>
             {t('tableDemo.action')}
-          </ElButton>
+          </BaseButton>
         )
       }
     }
diff --git a/src/views/Components/Table/UseTableDemo.vue b/src/views/Components/Table/UseTableDemo.vue
index b43315352..00ce635e5 100644
--- a/src/views/Components/Table/UseTableDemo.vue
+++ b/src/views/Components/Table/UseTableDemo.vue
@@ -4,8 +4,9 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
 import { getTableListApi } from '@/api/table'
 import { ref, reactive, unref } from 'vue'
-import { ElTag, ElButton } from 'element-plus'
+import { ElTag } from 'element-plus'
 import { useTable } from '@/hooks/web/useTable'
+import { BaseButton } from '@/components/Button'
 
 const { tableRegister, tableMethods, tableState } = useTable({
   fetchDataApi: async () => {
@@ -100,9 +101,9 @@ const columns = reactive<TableColumn[]>([
     slots: {
       default: (data) => {
         return (
-          <ElButton type="primary" onClick={() => actionFn(data)}>
+          <BaseButton type="primary" onClick={() => actionFn(data)}>
             {t('tableDemo.action')}
-          </ElButton>
+          </BaseButton>
         )
       }
     }
@@ -174,9 +175,9 @@ const delOrAddAction = () => {
       slots: {
         default: (data) => {
           return (
-            <ElButton type="primary" onClick={() => actionFn(data)}>
+            <BaseButton type="primary" onClick={() => actionFn(data)}>
               {t('tableDemo.action')}
-            </ElButton>
+            </BaseButton>
           )
         }
       }
@@ -217,35 +218,37 @@ const getSelections = async () => {
 
 <template>
   <ContentWrap :title="`UseTable ${t('tableDemo.operate')}`" style="margin-bottom: 20px">
-    <ElButton @click="showPagination(true)">
+    <BaseButton @click="showPagination(true)">
       {{ t('tableDemo.show') }} {{ t('tableDemo.pagination') }}
-    </ElButton>
-    <ElButton @click="showPagination(false)">
+    </BaseButton>
+    <BaseButton @click="showPagination(false)">
       {{ t('tableDemo.hidden') }} {{ t('tableDemo.pagination') }}
-    </ElButton>
+    </BaseButton>
 
-    <ElButton @click="reserveIndex(true)">{{ t('tableDemo.reserveIndex') }}</ElButton>
-    <ElButton @click="reserveIndex(false)">{{ t('tableDemo.restoreIndex') }}</ElButton>
+    <BaseButton @click="reserveIndex(true)">{{ t('tableDemo.reserveIndex') }}</BaseButton>
+    <BaseButton @click="reserveIndex(false)">{{ t('tableDemo.restoreIndex') }}</BaseButton>
 
-    <ElButton @click="showSelections(true)">{{ t('tableDemo.showSelections') }}</ElButton>
-    <ElButton @click="showSelections(false)">{{ t('tableDemo.hiddenSelections') }}</ElButton>
+    <BaseButton @click="showSelections(true)">{{ t('tableDemo.showSelections') }}</BaseButton>
+    <BaseButton @click="showSelections(false)">{{ t('tableDemo.hiddenSelections') }}</BaseButton>
 
-    <ElButton @click="changeTitle">{{ t('tableDemo.changeTitle') }}</ElButton>
+    <BaseButton @click="changeTitle">{{ t('tableDemo.changeTitle') }}</BaseButton>
 
-    <ElButton @click="showExpandedRows(true)">{{ t('tableDemo.showExpandedRows') }}</ElButton>
-    <ElButton @click="showExpandedRows(false)">{{ t('tableDemo.hiddenExpandedRows') }}</ElButton>
+    <BaseButton @click="showExpandedRows(true)">{{ t('tableDemo.showExpandedRows') }}</BaseButton>
+    <BaseButton @click="showExpandedRows(false)">{{
+      t('tableDemo.hiddenExpandedRows')
+    }}</BaseButton>
 
-    <ElButton @click="selectAllNone">{{ t('tableDemo.selectAllNone') }}</ElButton>
+    <BaseButton @click="selectAllNone">{{ t('tableDemo.selectAllNone') }}</BaseButton>
 
-    <ElButton @click="delOrAddAction">{{ t('tableDemo.delOrAddAction') }}</ElButton>
+    <BaseButton @click="delOrAddAction">{{ t('tableDemo.delOrAddAction') }}</BaseButton>
 
-    <ElButton @click="showOrHiddenStripe">{{ t('tableDemo.showOrHiddenStripe') }}</ElButton>
+    <BaseButton @click="showOrHiddenStripe">{{ t('tableDemo.showOrHiddenStripe') }}</BaseButton>
 
-    <ElButton @click="fixedHeaderOrAuto">{{ t('tableDemo.fixedHeaderOrAuto') }}</ElButton>
+    <BaseButton @click="fixedHeaderOrAuto">{{ t('tableDemo.fixedHeaderOrAuto') }}</BaseButton>
 
-    <ElButton @click="getSelections">{{ t('tableDemo.getSelections') }}</ElButton>
+    <BaseButton @click="getSelections">{{ t('tableDemo.getSelections') }}</BaseButton>
 
-    <!-- <ElButton @click="showOrHiddenSortable">{{ t('tableDemo.showOrHiddenSortable') }}</ElButton> -->
+    <!-- <BaseButton @click="showOrHiddenSortable">{{ t('tableDemo.showOrHiddenSortable') }}</BaseButton> -->
   </ContentWrap>
   <ContentWrap :title="`UseTable ${t('tableDemo.example')}`">
     <Table
diff --git a/src/views/Components/VideoPlayer.vue b/src/views/Components/VideoPlayer.vue
index 5208c6597..66dcad45e 100644
--- a/src/views/Components/VideoPlayer.vue
+++ b/src/views/Components/VideoPlayer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { VideoPlayer, createVideoViewer } from '@/components/VideoPlayer'
 import { ContentWrap } from '@/components/ContentWrap'
-import { ElButton, ElDivider } from 'element-plus'
+import { ElDivider } from 'element-plus'
 
 const showVideo = () => {
   createVideoViewer({
@@ -19,6 +19,6 @@ const showVideo = () => {
     />
 
     <ElDivider />
-    <ElButton type="primary" @click="showVideo">弹窗展示</ElButton>
+    <BaseButton type="primary" @click="showVideo">弹窗展示</BaseButton>
   </ContentWrap>
 </template>
diff --git a/src/views/Example/Dialog/ExampleDialog.vue b/src/views/Example/Dialog/ExampleDialog.vue
index 8b826de65..b93450da4 100644
--- a/src/views/Example/Dialog/ExampleDialog.vue
+++ b/src/views/Example/Dialog/ExampleDialog.vue
@@ -3,7 +3,7 @@ import { ContentWrap } from '@/components/ContentWrap'
 import { Search } from '@/components/Search'
 import { Dialog } from '@/components/Dialog'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElButton, ElTag } from 'element-plus'
+import { ElTag } from 'element-plus'
 import { Table } from '@/components/Table'
 import { getTableListApi, saveTableApi, delTableListApi } from '@/api/table'
 import { useTable } from '@/hooks/web/useTable'
@@ -12,6 +12,7 @@ import { ref, unref, reactive } from 'vue'
 import Write from './components/Write.vue'
 import Detail from './components/Detail.vue'
 import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { BaseButton } from '@/components/Button'
 
 const ids = ref<string[]>([])
 
@@ -212,15 +213,15 @@ const crudSchemas = reactive<CrudSchema[]>([
         default: (data: any) => {
           return (
             <>
-              <ElButton type="primary" onClick={() => action(data.row, 'edit')}>
+              <BaseButton type="primary" onClick={() => action(data.row, 'edit')}>
                 {t('exampleDemo.edit')}
-              </ElButton>
-              <ElButton type="success" onClick={() => action(data.row, 'detail')}>
+              </BaseButton>
+              <BaseButton type="success" onClick={() => action(data.row, 'detail')}>
                 {t('exampleDemo.detail')}
-              </ElButton>
-              <ElButton type="danger" onClick={() => delData(data.row)}>
+              </BaseButton>
+              <BaseButton type="danger" onClick={() => delData(data.row)}>
                 {t('exampleDemo.del')}
-              </ElButton>
+              </BaseButton>
             </>
           )
         }
@@ -291,10 +292,10 @@ const save = async () => {
     <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
 
     <div class="mb-10px">
-      <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
-      <ElButton :loading="delLoading" type="danger" @click="delData(null)">
+      <BaseButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</BaseButton>
+      <BaseButton :loading="delLoading" type="danger" @click="delData(null)">
         {{ t('exampleDemo.del') }}
-      </ElButton>
+      </BaseButton>
     </div>
 
     <Table
@@ -325,10 +326,15 @@ const save = async () => {
     />
 
     <template #footer>
-      <ElButton v-if="actionType !== 'detail'" type="primary" :loading="saveLoading" @click="save">
+      <BaseButton
+        v-if="actionType !== 'detail'"
+        type="primary"
+        :loading="saveLoading"
+        @click="save"
+      >
         {{ t('exampleDemo.save') }}
-      </ElButton>
-      <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
+      </BaseButton>
+      <BaseButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</BaseButton>
     </template>
   </Dialog>
 </template>
diff --git a/src/views/Example/Page/ExampleAdd.vue b/src/views/Example/Page/ExampleAdd.vue
index 103873121..37480a80f 100644
--- a/src/views/Example/Page/ExampleAdd.vue
+++ b/src/views/Example/Page/ExampleAdd.vue
@@ -2,7 +2,6 @@
 import Write from './components/Write.vue'
 import { ContentDetailWrap } from '@/components/ContentDetailWrap'
 import { ref, unref } from 'vue'
-import { ElButton } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useRouter } from 'vue-router'
 import { saveTableApi } from '@/api/table'
@@ -41,12 +40,12 @@ const save = async () => {
     <Write ref="writeRef" />
 
     <template #header>
-      <ElButton @click="go(-1)">
+      <BaseButton @click="go(-1)">
         {{ t('common.back') }}
-      </ElButton>
-      <ElButton type="primary" :loading="loading" @click="save">
+      </BaseButton>
+      <BaseButton type="primary" :loading="loading" @click="save">
         {{ t('exampleDemo.save') }}
-      </ElButton>
+      </BaseButton>
     </template>
   </ContentDetailWrap>
 </template>
diff --git a/src/views/Example/Page/ExampleDetail.vue b/src/views/Example/Page/ExampleDetail.vue
index 77875bae1..6f7e44cb8 100644
--- a/src/views/Example/Page/ExampleDetail.vue
+++ b/src/views/Example/Page/ExampleDetail.vue
@@ -6,7 +6,6 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { useRouter, useRoute } from 'vue-router'
 import { getTableDetApi } from '@/api/table'
 import { TableData } from '@/api/table/types'
-import { ElButton } from 'element-plus'
 
 const { push, go } = useRouter()
 
@@ -29,9 +28,9 @@ getTableDet()
 <template>
   <ContentDetailWrap :title="t('exampleDemo.detail')" @back="push('/example/example-page')">
     <template #header>
-      <ElButton @click="go(-1)">
+      <BaseButton @click="go(-1)">
         {{ t('common.back') }}
-      </ElButton>
+      </BaseButton>
     </template>
     <Detail :current-row="currentRow" />
   </ContentDetailWrap>
diff --git a/src/views/Example/Page/ExampleEdit.vue b/src/views/Example/Page/ExampleEdit.vue
index 575b0a87b..848499597 100644
--- a/src/views/Example/Page/ExampleEdit.vue
+++ b/src/views/Example/Page/ExampleEdit.vue
@@ -2,7 +2,6 @@
 import Write from './components/Write.vue'
 import { ContentDetailWrap } from '@/components/ContentDetailWrap'
 import { ref, unref } from 'vue'
-import { ElButton } from 'element-plus'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useRouter, useRoute } from 'vue-router'
 import { saveTableApi, getTableDetApi } from '@/api/table'
@@ -55,12 +54,12 @@ const save = async () => {
     <Write ref="writeRef" :current-row="currentRow" />
 
     <template #header>
-      <ElButton @click="go(-1)">
+      <BaseButton @click="go(-1)">
         {{ t('common.back') }}
-      </ElButton>
-      <ElButton type="primary" :loading="loading" @click="save">
+      </BaseButton>
+      <BaseButton type="primary" :loading="loading" @click="save">
         {{ t('exampleDemo.save') }}
-      </ElButton>
+      </BaseButton>
     </template>
   </ContentDetailWrap>
 </template>
diff --git a/src/views/Example/Page/ExamplePage.vue b/src/views/Example/Page/ExamplePage.vue
index 55eb83788..64b980473 100644
--- a/src/views/Example/Page/ExamplePage.vue
+++ b/src/views/Example/Page/ExamplePage.vue
@@ -2,7 +2,7 @@
 import { ContentWrap } from '@/components/ContentWrap'
 import { Search } from '@/components/Search'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElButton, ElTag } from 'element-plus'
+import { ElTag } from 'element-plus'
 import { Table } from '@/components/Table'
 import { getTableListApi, delTableListApi } from '@/api/table'
 import { useTable } from '@/hooks/web/useTable'
@@ -11,6 +11,7 @@ import { reactive, ref, unref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useEmitt } from '@/hooks/event/useEmitt'
 import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { BaseButton } from '@/components/Button'
 
 defineOptions({
   name: 'ExamplePage'
@@ -229,15 +230,15 @@ const crudSchemas = reactive<CrudSchema[]>([
         default: (data: any) => {
           return (
             <>
-              <ElButton type="primary" onClick={() => action(data.row, 'edit')}>
+              <BaseButton type="primary" onClick={() => action(data.row, 'edit')}>
                 {t('exampleDemo.edit')}
-              </ElButton>
-              <ElButton type="success" onClick={() => action(data.row, 'detail')}>
+              </BaseButton>
+              <BaseButton type="success" onClick={() => action(data.row, 'detail')}>
                 {t('exampleDemo.detail')}
-              </ElButton>
-              <ElButton type="danger" onClick={() => delData(data.row)}>
+              </BaseButton>
+              <BaseButton type="danger" onClick={() => delData(data.row)}>
                 {t('exampleDemo.del')}
-              </ElButton>
+              </BaseButton>
             </>
           )
         }
@@ -274,10 +275,10 @@ const action = (row: TableData, type: string) => {
     <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
 
     <div class="mb-10px">
-      <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
-      <ElButton :loading="delLoading" type="danger" @click="delData(null)">
+      <BaseButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</BaseButton>
+      <BaseButton :loading="delLoading" type="danger" @click="delData(null)">
         {{ t('exampleDemo.del') }}
-      </ElButton>
+      </BaseButton>
     </div>
 
     <Table
diff --git a/src/views/Function/MultipleTabs.vue b/src/views/Function/MultipleTabs.vue
index 4c3aa93a9..4a623c8fd 100644
--- a/src/views/Function/MultipleTabs.vue
+++ b/src/views/Function/MultipleTabs.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
-import { ElButton } from 'element-plus'
 import { useRouter } from 'vue-router'
 
 const { push } = useRouter()
@@ -12,8 +11,8 @@ const openTab = (item: number) => {
 
 <template>
   <ContentWrap>
-    <ElButton v-for="item in 5" :key="item" type="primary" @click="openTab(item)">
+    <BaseButton v-for="item in 5" :key="item" type="primary" @click="openTab(item)">
       打开详情页{{ item }}
-    </ElButton>
+    </BaseButton>
   </ContentWrap>
 </template>
diff --git a/src/views/Function/Request.vue b/src/views/Function/Request.vue
index 181ab5005..370acee75 100644
--- a/src/views/Function/Request.vue
+++ b/src/views/Function/Request.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElButton, ElDivider } from 'element-plus'
+import { ElDivider } from 'element-plus'
 import { request1, request2, request3, request4, request5, expired } from '@/api/request'
 import { ref } from 'vue'
 import request from '@/axios'
@@ -160,15 +160,15 @@ const tokenExpired = () => {
 <template>
   <ContentWrap :title="t('router.request')">
     <p>正在请求的接口：{{ setToArray(pending) }}</p>
-    <ElButton type="primary" @click="clickRequest1">请求/取消request1</ElButton>
-    <ElButton type="primary" @click="clickRequest2">请求/取消request2</ElButton>
-    <ElButton type="primary" @click="clickRequest3">请求/取消request3</ElButton>
-    <ElButton type="primary" @click="clickRequest4">请求/取消request4</ElButton>
-    <ElButton type="primary" @click="clickRequest5">请求/取消request5</ElButton>
-    <ElButton type="primary" @click="getAll">发送五个请求</ElButton>
-    <ElButton type="primary" @click="cancelAll">关闭所有请求</ElButton>
+    <BaseButton type="primary" @click="clickRequest1">请求/取消request1</BaseButton>
+    <BaseButton type="primary" @click="clickRequest2">请求/取消request2</BaseButton>
+    <BaseButton type="primary" @click="clickRequest3">请求/取消request3</BaseButton>
+    <BaseButton type="primary" @click="clickRequest4">请求/取消request4</BaseButton>
+    <BaseButton type="primary" @click="clickRequest5">请求/取消request5</BaseButton>
+    <BaseButton type="primary" @click="getAll">发送五个请求</BaseButton>
+    <BaseButton type="primary" @click="cancelAll">关闭所有请求</BaseButton>
     <ElDivider />
-    <ElButton type="primary" @click="tokenExpired">token过期</ElButton>
+    <BaseButton type="primary" @click="tokenExpired">token过期</BaseButton>
   </ContentWrap>
 </template>
 @/axios
diff --git a/src/views/Function/Test.vue b/src/views/Function/Test.vue
index 2209eeff2..dbb37325e 100644
--- a/src/views/Function/Test.vue
+++ b/src/views/Function/Test.vue
@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { ContentWrap } from '@/components/ContentWrap'
 import { ref, unref } from 'vue'
-import { ElButton, ElDivider, ElRow, ElCol } from 'element-plus'
+import { ElDivider, ElRow, ElCol } from 'element-plus'
 import { hasPermi } from '@/components/Permission'
 
 const permission = ref('add')
@@ -18,19 +18,19 @@ setTimeout(() => {
       <ElCol :span="8">
         新增权限：
         <Permission permission="add">
-          <ElButton type="primary"> Add </ElButton>
+          <BaseButton type="primary"> Add </BaseButton>
         </Permission>
       </ElCol>
       <ElCol :span="8">
         删除权限：
         <Permission permission="delete">
-          <ElButton type="danger"> Delete </ElButton>
+          <BaseButton type="danger"> Delete </BaseButton>
         </Permission>
       </ElCol>
       <ElCol :span="8">
         3秒后切换查看权限：
         <Permission :permission="permission">
-          <ElButton type="primary"> View </ElButton>
+          <BaseButton type="primary"> View </BaseButton>
         </Permission>
       </ElCol>
     </ElRow>
@@ -39,15 +39,15 @@ setTimeout(() => {
     <ElRow :gutter="20">
       <ElCol :span="8">
         新增权限：
-        <ElButton v-hasPermi="'add'" type="primary"> Add </ElButton>
+        <BaseButton v-hasPermi="'add'" type="primary"> Add </BaseButton>
       </ElCol>
       <ElCol :span="8">
         删除权限：
-        <ElButton v-hasPermi="'delete'" type="danger"> Delete </ElButton>
+        <BaseButton v-hasPermi="'delete'" type="danger"> Delete </BaseButton>
       </ElCol>
       <ElCol :span="8">
         3秒后切换查看权限（无法动态修改）：
-        <ElButton v-hasPermi="permission" type="primary"> View </ElButton>
+        <BaseButton v-hasPermi="permission" type="primary"> View </BaseButton>
       </ElCol>
     </ElRow>
 
@@ -55,15 +55,15 @@ setTimeout(() => {
     <ElRow :gutter="20">
       <ElCol :span="8">
         新增权限：
-        <ElButton v-if="hasPermi('add')" type="primary"> Add </ElButton>
+        <BaseButton v-if="hasPermi('add')" type="primary"> Add </BaseButton>
       </ElCol>
       <ElCol :span="8">
         删除权限：
-        <ElButton v-if="hasPermi('delete')" type="danger"> Delete </ElButton>
+        <BaseButton v-if="hasPermi('delete')" type="danger"> Delete </BaseButton>
       </ElCol>
       <ElCol :span="8">
         3秒后切换查看权限：
-        <ElButton v-if="hasPermi(unref(permission))" type="primary"> View </ElButton>
+        <BaseButton v-if="hasPermi(unref(permission))" type="primary"> View </BaseButton>
       </ElCol>
     </ElRow>
   </ContentWrap>
diff --git a/src/views/Guide/Guide.vue b/src/views/Guide/Guide.vue
index 1350d2259..dbdc91b31 100644
--- a/src/views/Guide/Guide.vue
+++ b/src/views/Guide/Guide.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElButton } from 'element-plus'
 import { useGuide } from '@/hooks/web/useGuide'
 
 const { t } = useI18n()
@@ -15,6 +14,6 @@ const guideStart = () => {
 
 <template>
   <ContentWrap :title="t('guideDemo.guide')" :message="t('guideDemo.message')">
-    <ElButton type="primary" @click="guideStart">{{ t('guideDemo.start') }}</ElButton>
+    <BaseButton type="primary" @click="guideStart">{{ t('guideDemo.start') }}</BaseButton>
   </ContentWrap>
 </template>
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index de1337d90..083b02636 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -2,7 +2,7 @@
 import { reactive, ref, watch } from 'vue'
 import { Form, FormSchema } from '@/components/Form'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElButton, ElCheckbox, ElLink } from 'element-plus'
+import { ElCheckbox, ElLink } from 'element-plus'
 import { useForm } from '@/hooks/web/useForm'
 import { loginApi, getTestRoleApi, getAdminRoleApi } from '@/api/login'
 import { useAppStore } from '@/store/modules/app'
@@ -13,6 +13,7 @@ import { UserType } from '@/api/login/types'
 import { useValidator } from '@/hooks/web/useValidator'
 import { Icon } from '@/components/Icon'
 import { useUserStore } from '@/store/modules/user'
+import { BaseButton } from '@/components/Button'
 
 const { required } = useValidator()
 
@@ -107,14 +108,19 @@ const schema = reactive<FormSchema[]>([
           return (
             <>
               <div class="w-[100%]">
-                <ElButton loading={loading.value} type="primary" class="w-[100%]" onClick={signIn}>
+                <BaseButton
+                  loading={loading.value}
+                  type="primary"
+                  class="w-[100%]"
+                  onClick={signIn}
+                >
                   {t('login.login')}
-                </ElButton>
+                </BaseButton>
               </div>
               <div class="w-[100%] mt-15px">
-                <ElButton class="w-[100%]" onClick={toRegister}>
+                <BaseButton class="w-[100%]" onClick={toRegister}>
                   {t('login.register')}
-                </ElButton>
+                </BaseButton>
               </div>
             </>
           )
diff --git a/src/views/Login/components/RegisterForm.vue b/src/views/Login/components/RegisterForm.vue
index 093aa42e1..7278fc419 100644
--- a/src/views/Login/components/RegisterForm.vue
+++ b/src/views/Login/components/RegisterForm.vue
@@ -3,8 +3,9 @@ import { Form, FormSchema } from '@/components/Form'
 import { reactive, ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useForm } from '@/hooks/web/useForm'
-import { ElButton, ElInput, FormRules } from 'element-plus'
+import { ElInput, FormRules } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
+import { BaseButton } from '@/components/Button'
 
 const emit = defineEmits(['to-login'])
 
@@ -102,19 +103,19 @@ const schema = reactive<FormSchema[]>([
           return (
             <>
               <div class="w-[100%]">
-                <ElButton
+                <BaseButton
                   type="primary"
                   class="w-[100%]"
                   loading={loading.value}
                   onClick={loginRegister}
                 >
                   {t('login.register')}
-                </ElButton>
+                </BaseButton>
               </div>
               <div class="w-[100%] mt-15px">
-                <ElButton class="w-[100%]" onClick={toLogin}>
+                <BaseButton class="w-[100%]" onClick={toLogin}>
                   {t('login.hasUser')}
-                </ElButton>
+                </BaseButton>
               </div>
             </>
           )
diff --git a/src/views/hooks/useClipboard.vue b/src/views/hooks/useClipboard.vue
index 50b18006e..f49125ec3 100644
--- a/src/views/hooks/useClipboard.vue
+++ b/src/views/hooks/useClipboard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
 import { useClipboard } from '@/hooks/web/useClipboard'
-import { ElButton, ElInput } from 'element-plus'
+import { ElInput } from 'element-plus'
 import { ref } from 'vue'
 
 const { copy, copied, text, isSupported } = useClipboard()
@@ -13,10 +13,10 @@ const source = ref('')
   <ContentWrap title="useClipboard">
     <ElInput v-model="source" placeholder="请输入要复制的内容" />
     <div v-if="isSupported">
-      <ElButton @click="copy(source)" type="primary" class="mt-20px">
+      <BaseButton @click="copy(source)" type="primary" class="mt-20px">
         <span v-if="!copied">复制</span>
         <span v-else>已复制</span>
-      </ElButton>
+      </BaseButton>
       <p>
         当前已复制: <code>{{ text || 'none' }}</code>
       </p>
diff --git a/src/views/hooks/useTagsView.vue b/src/views/hooks/useTagsView.vue
index a92fe8c26..1bacedcf7 100644
--- a/src/views/hooks/useTagsView.vue
+++ b/src/views/hooks/useTagsView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
-import { ElButton } from 'element-plus'
 import { useTagsView } from '@/hooks/web/useTagsView'
 import { useRouter } from 'vue-router'
 
@@ -48,13 +47,13 @@ const setAnalysisTitle = () => {
 
 <template>
   <ContentWrap title="useTagsView">
-    <ElButton type="primary" @click="closeAllTabs"> 关闭所有标签页 </ElButton>
-    <ElButton type="primary" @click="closeLeftTabs"> 关闭左侧标签页 </ElButton>
-    <ElButton type="primary" @click="closeRightTabs"> 关闭右侧标签页 </ElButton>
-    <ElButton type="primary" @click="closeOtherTabs"> 关闭其他标签页 </ElButton>
-    <ElButton type="primary" @click="closeCurrentTab"> 关闭当前标签页 </ElButton>
-    <ElButton type="primary" @click="refresh"> 刷新当前标签页 </ElButton>
-    <ElButton type="primary" @click="setTabTitle"> 修改当前标题 </ElButton>
-    <ElButton type="primary" @click="setAnalysisTitle"> 修改分析页标题 </ElButton>
+    <BaseButton type="primary" @click="closeAllTabs"> 关闭所有标签页 </BaseButton>
+    <BaseButton type="primary" @click="closeLeftTabs"> 关闭左侧标签页 </BaseButton>
+    <BaseButton type="primary" @click="closeRightTabs"> 关闭右侧标签页 </BaseButton>
+    <BaseButton type="primary" @click="closeOtherTabs"> 关闭其他标签页 </BaseButton>
+    <BaseButton type="primary" @click="closeCurrentTab"> 关闭当前标签页 </BaseButton>
+    <BaseButton type="primary" @click="refresh"> 刷新当前标签页 </BaseButton>
+    <BaseButton type="primary" @click="setTabTitle"> 修改当前标题 </BaseButton>
+    <BaseButton type="primary" @click="setAnalysisTitle"> 修改分析页标题 </BaseButton>
   </ContentWrap>
 </template>
diff --git a/src/views/hooks/useWatermark.vue b/src/views/hooks/useWatermark.vue
index 88029c0f0..bd5cc84ed 100644
--- a/src/views/hooks/useWatermark.vue
+++ b/src/views/hooks/useWatermark.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElButton } from 'element-plus'
 import { useWatermark } from '@/hooks/web/useWatermark'
 import { computed, onBeforeUnmount } from 'vue'
 import { useAppStore } from '@/store/modules/app'
@@ -21,12 +20,12 @@ onBeforeUnmount(() => {
 
 <template>
   <ContentWrap title="useWatermark">
-    <ElButton type="primary" @click="setWatermark(title)">
+    <BaseButton type="primary" @click="setWatermark(title)">
       {{ t('watermarkDemo.createdWatermark') }}
-    </ElButton>
-    <ElButton type="danger" @click="clear">{{ t('watermarkDemo.clearWatermark') }}</ElButton>
-    <ElButton type="warning" @click="setWatermark(`New${title}`)">
+    </BaseButton>
+    <BaseButton type="danger" @click="clear">{{ t('watermarkDemo.clearWatermark') }}</BaseButton>
+    <BaseButton type="warning" @click="setWatermark(`New${title}`)">
       {{ t('watermarkDemo.resetWatermark') }}
-    </ElButton>
+    </BaseButton>
   </ContentWrap>
 </template>
diff --git a/types/components.d.ts b/types/components.d.ts
index 14c4eea88..8a2967eaa 100644
--- a/types/components.d.ts
+++ b/types/components.d.ts
@@ -2,6 +2,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     Icon: (typeof import('../components/Icon/src/Icon.vue'))['default']
     Permission: (typeof import('../components/Permission/src/Permission.vue'))['default']
+    BaseButton: (typeof import('../components/Button/src/Button.vue'))['default']
   }
 }