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

src/components/Button/index.ts

@@ -0,0 +1,3 @@
+import BaseButton from './src/Button.vue'
+
+export { BaseButton }

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>

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>

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>

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>

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>
       )

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>

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>

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)
 }