style: 抽离BaseButton，支持按钮修改主题色

2023-12-10 09:18:33 +08:00
parent 7fa533b8ba
commit 69539ee2d3
43 changed files with 426 additions and 269 deletions
--- 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>
--- 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>
--- 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>
--- 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>
          </>
        )
      }
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
      }
    }
--- 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" />
--- 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>
--- 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"
--- 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>
--- 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')">
--- 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>
        )
      }
    }
--- 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>
        )
      }
    }
--- 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
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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
--- 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>
--- 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
--- 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>
--- 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>
--- 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>
            </>
          )
--- 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>
            </>
          )
--- 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>
--- 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>
--- 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>