kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
kailong321200875 2023-12-10 09:18:33 +08:00
parent 7fa533b8ba
commit 69539ee2d3
43 changed files with 426 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Button/index.ts Normal file
View File

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

121
src/components/Button/src/Button.vue Normal file
View File

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

3
src/components/Error/src/Error.vue
View File

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

14
src/components/Search/src/components/ActionButton.vue
View File

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

10
src/components/Setting/src/Setting.vue
View File

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

6
src/components/Table/src/Table.vue
View File

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

3
src/components/UserInfo/src/components/LockDialog.vue
View File

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

14
src/components/UserInfo/src/components/LockPage.vue
View File

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

2
src/components/index.ts
View File

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

32
src/views/Authorization/Department/Department.vue
View File

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

26
src/views/Authorization/Menu/Menu.vue
View File

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

6
src/views/Authorization/Menu/components/AddButtonPermission.vue
View File

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

7
src/views/Authorization/Menu/components/Write.vue
View File

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

26
src/views/Authorization/Role/Role.vue
View File

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

27
src/views/Authorization/User/User.vue
View File

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

8
src/views/Components/CountTo.vue
View File

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

4
src/views/Components/Descriptions.vue
View File

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

15
src/views/Components/Dialog.vue
View File

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

12
src/views/Components/Form/DefaultForm.vue
View File

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

50
src/views/Components/Form/UseFormDemo.vue
View File

@ -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" />

9
src/views/Components/Icon.vue
View File

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

4
src/views/Components/ImageCropping.vue
View File

@ -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"

3
src/views/Components/ImageViewer.vue
View File

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

41
src/views/Components/Search.vue
View File

@ -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')">

7
src/views/Components/Table/DefaultTable.vue
View File

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

7
src/views/Components/Table/TreeTable.vue
View File

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

47
src/views/Components/Table/UseTableDemo.vue
View File

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

4
src/views/Components/VideoPlayer.vue
View File

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

32
src/views/Example/Dialog/ExampleDialog.vue
View File

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

9
src/views/Example/Page/ExampleAdd.vue
View File

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

5
src/views/Example/Page/ExampleDetail.vue
View File

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

9
src/views/Example/Page/ExampleEdit.vue
View File

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

21
src/views/Example/Page/ExamplePage.vue
View File

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

5
src/views/Function/MultipleTabs.vue
View File

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

18
src/views/Function/Request.vue
View File

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

20
src/views/Function/Test.vue
View File

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

3
src/views/Guide/Guide.vue
View File

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

16
src/views/Login/components/LoginForm.vue
View File

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

11
src/views/Login/components/RegisterForm.vue
View File

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

6
src/views/hooks/useClipboard.vue
View File

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

17
src/views/hooks/useTagsView.vue
View File

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

11
src/views/hooks/useWatermark.vue
View File

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

1
types/components.d.ts vendored
View File

@ -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']
}
}