chore: replace to ghost-button

This commit is contained in:
dap 2024-10-07 16:56:32 +08:00
parent 3edad0459d
commit 0f31c8df57
22 changed files with 326 additions and 323 deletions

View File

@ -221,5 +221,6 @@
"vue.server.hybridMode": true,
"vitest.disableWorkspaceWarning": true,
"cSpell.words": ["tinymce"],
"typescript.tsdk": "node_modules/typescript/lib"
"typescript.tsdk": "node_modules/typescript/lib",
"editor.linkedEditing": true // html
}

View File

@ -101,7 +101,7 @@ export const columns: VxeGridProps['columns'] = [
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 120,
width: 150,
},
];

View File

@ -4,6 +4,7 @@ import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
@ -169,24 +170,25 @@ async function handleUnlock() {
</Space>
</template>
<template #action="{ row }">
<a-button size="small" type="link" @click.stop="handlePreview(row)">
{{ $t('pages.common.info') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="() => handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['monitor:logininfor:remove']"
@click.stop=""
<Space>
<ghost-button @click.stop="handlePreview(row)">
{{ $t('pages.common.info') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="() => handleDelete(row)"
>
删除
</a-button>
</Popconfirm>
<ghost-button
danger
v-access:code="['monitor:logininfor:remove']"
@click.stop=""
>
删除
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<LoginInfoModal />

View File

@ -2,6 +2,7 @@
import type { Recordable } from '@vben/types';
import { Page, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { Popconfirm } from 'ant-design-vue';
@ -59,11 +60,12 @@ async function handleForceOffline(row: Recordable<any>) {
</template>
<template #action="{ row }">
<Popconfirm
:get-popup-container="getPopupContainer"
:title="`确认强制下线[${row.userName}]?`"
placement="left"
@confirm="handleForceOffline(row)"
>
<a-button danger size="small" type="link">强制下线</a-button>
<ghost-button danger>强制下线</ghost-button>
</Popconfirm>
</template>
</BasicTable>

View File

@ -167,14 +167,12 @@ async function handleDelete() {
</Space>
</template>
<template #action="{ row }">
<a-button
size="small"
type="link"
<ghost-button
v-access:code="['monitor:operlog:list']"
@click.stop="handlePreview(row)"
>
{{ $t('pages.common.preview') }}
</a-button>
</ghost-button>
</template>
</BasicTable>
<OperationPreviewDrawer />

View File

@ -5,6 +5,7 @@ import { ref } from 'vue';
import { useAccess } from '@vben/access';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
@ -158,31 +159,30 @@ const { hasAccessByCodes } = useAccess();
/>
</template>
<template #action="{ row }">
<a-button
size="small"
type="link"
v-access:code="['system:client:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
<Popconfirm
:disabled="row.id === 1"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
:disabled="row.id === 1"
danger
size="small"
type="link"
v-access:code="['system:client:remove']"
@click.stop=""
<Space>
<ghost-button
v-access:code="['system:client:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:disabled="row.id === 1"
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
:disabled="row.id === 1"
danger
v-access:code="['system:client:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<ClientDrawer @reload="tableApi.query()" />

View File

@ -4,6 +4,7 @@ import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@ -161,29 +162,28 @@ async function handleRefreshCache() {
</Space>
</template>
<template #action="{ row }">
<a-button
size="small"
type="link"
v-access:code="['system:config:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['system:config:remove']"
@click.stop=""
<Space>
<ghost-button
v-access:code="['system:config:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['system:config:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<ConfigModal @reload="tableApi.query()" />

View File

@ -57,7 +57,7 @@ export const columns: VxeGridProps['columns'] = [
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
width: 200,
},
];

View File

@ -4,7 +4,12 @@ import type { Recordable } from '@vben/types';
import { nextTick } from 'vue';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { eachTree, listToTree, removeEmptyChildren } from '@vben/utils';
import {
eachTree,
getPopupContainer,
listToTree,
removeEmptyChildren,
} from '@vben/utils';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { Popconfirm, Space, Tooltip } from 'ant-design-vue';
@ -153,38 +158,35 @@ function setExpandOrCollapse(expand: boolean) {
</Space>
</template>
<template #action="{ row }">
<a-button
size="small"
type="link"
v-access:code="['system:dept:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
<a-button
class="btn-add"
size="small"
type="link"
v-access:code="['system:dept:add']"
@click="handleSubAdd(row)"
>
{{ $t('pages.common.add') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['system:dept:remove']"
@click.stop=""
<Space>
<ghost-button
v-access:code="['system:dept:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
{{ $t('pages.common.edit') }}
</ghost-button>
<ghost-button
class="btn-add"
v-access:code="['system:dept:add']"
@click="handleSubAdd(row)"
>
{{ $t('pages.common.add') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['system:dept:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<DeptDrawer @reload="tableApi.query()" />
@ -194,9 +196,11 @@ function setExpandOrCollapse(expand: boolean) {
<style lang="scss" scoped>
.btn-add {
color: hsl(var(--success)) !important;
border-color: hsl(var(--success)) !important;
&:hover {
color: hsl(var(--success) / 50%) !important;
border-color: hsl(var(--success) / 50%) !important;
}
}
</style>

View File

@ -4,6 +4,7 @@ import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@ -174,29 +175,28 @@ emitter.on('rowClick', async (value) => {
</Space>
</template>
<template #action="{ row }">
<a-button
size="small"
type="link"
v-access:code="['system:dict:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['system:dict:remove']"
@click.stop=""
<Space>
<ghost-button
v-access:code="['system:dict:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['system:dict:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<DictDataDrawer @reload="tableApi.query()" />

View File

@ -4,6 +4,7 @@ import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import {
Dropdown,
@ -219,29 +220,28 @@ function handleSyncTenantDict() {
</Space>
</template>
<template #action="{ row }">
<a-button
size="small"
type="link"
v-access:code="['system:dict:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['system:dict:remove']"
@click.stop=""
<Space>
<ghost-button
v-access:code="['system:dict:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['system:dict:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<DictTypeModal @reload="tableApi.query()" />

View File

@ -6,7 +6,12 @@ import { computed } from 'vue';
import { useAccess } from '@vben/access';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { Fallback } from '@vben/common-ui';
import { eachTree, listToTree, removeEmptyChildren } from '@vben/utils';
import {
eachTree,
getPopupContainer,
listToTree,
removeEmptyChildren,
} from '@vben/utils';
import { Popconfirm, Space, Tooltip } from 'ant-design-vue';
@ -153,29 +158,28 @@ const isAdmin = computed(() => {
</Space>
</template>
<template #action="{ row }">
<a-button
size="small"
type="link"
v-access:code="['system:menu:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['system:menu:remove']"
@click.stop=""
<Space>
<ghost-button
v-access:code="['system:menu:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['system:menu:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<MenuDrawer @reload="tableApi.query()" />

View File

@ -4,6 +4,7 @@ import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@ -146,29 +147,28 @@ function handleMultiDelete() {
</Space>
</template>
<template #action="{ row }">
<a-button
size="small"
type="link"
v-access:code="['system:notice:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['system:notice:remove']"
@click.stop=""
<Space>
<ghost-button
v-access:code="['system:notice:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['system:notice:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<NoticeModal @reload="tableApi.query()" />

View File

@ -5,6 +5,7 @@ import { ref } from 'vue';
import { useAccess } from '@vben/access';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@ -159,29 +160,28 @@ const { hasAccessByCodes } = useAccess();
/>
</template>
<template #action="{ row }">
<a-button
size="small"
type="link"
v-access:code="['system:ossConfig:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['system:ossConfig:remove']"
@click.stop=""
<Space>
<ghost-button
v-access:code="['system:ossConfig:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['system:ossConfig:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<OssConfigDrawer @reload="tableApi.query()" />

View File

@ -6,6 +6,7 @@ import { useRouter } from 'vue-router';
import { Page, type VbenFormProps } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { getPopupContainer } from '@vben/utils';
import {
Image,
@ -192,29 +193,28 @@ function isImageFile(ext: string) {
<span v-else>{{ row.url }}</span>
</template>
<template #action="{ row }">
<a-button
size="small"
type="link"
v-access:code="['system:oss:edit']"
@click="handleDownload(row)"
>
{{ $t('pages.common.download') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['system:oss:remove']"
@click.stop=""
<Space>
<ghost-button
v-access:code="['system:oss:edit']"
@click="handleDownload(row)"
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
{{ $t('pages.common.download') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['system:oss:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
</Page>

View File

@ -4,6 +4,7 @@ import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@ -175,29 +176,28 @@ function handleMultiDelete() {
</Space>
</template>
<template #action="{ row }">
<a-button
size="small"
type="link"
v-access:code="['system:post:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['system:post:remove']"
@click.stop=""
<Space>
<GhostButton
v-access:code="['system:post:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
{{ $t('pages.common.edit') }}
</GhostButton>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<GhostButton
danger
v-access:code="['system:post:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</GhostButton>
</Popconfirm>
</Space>
</template>
</BasicTable>
<PostDrawer @reload="tableApi.query()" />

View File

@ -5,6 +5,7 @@ import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
@ -142,19 +143,18 @@ function handleMultipleAuthCancel() {
</template>
<template #action="{ row }">
<Popconfirm
:get-popup-container="getPopupContainer"
:title="`是否取消授权用户[${row.userName} - ${row.nickName}]?`"
placement="left"
@confirm="handleAuthCancel(row)"
>
<a-button
<ghost-button
danger
size="small"
type="link"
v-access:code="['system:role:remove']"
@click.stop=""
>
取消授权
</a-button>
</ghost-button>
</Popconfirm>
</template>
</BasicTable>

View File

@ -210,29 +210,28 @@ function handleAssignRole(record: Recordable<any>) {
<template
v-if="!row.superAdmin && (row.roleKey !== 'admin' || isSuperAdmin)"
>
<a-button
size="small"
type="link"
v-access:code="['system:role:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['system:role:remove']"
@click.stop=""
<Space>
<ghost-button
v-access:code="['system:role:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['system:role:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
<Dropdown
:get-popup-container="getPopupContainer"
placement="bottomRight"

View File

@ -65,7 +65,7 @@ export const columns: VxeGridProps['columns'] = [
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
width: 200,
},
];

View File

@ -193,28 +193,22 @@ const isSuperAdmin = computed(() => {
/>
</template>
<template #action="{ row }">
<template v-if="row.id !== 1">
<a-button
size="small"
type="link"
<Space v-if="row.id !== 1">
<ghost-button
v-access:code="['system:tenant:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
:title="`确认同步[${row.companyName}]的套餐吗?`"
placement="left"
@confirm="handleSync(row)"
>
<a-button
size="small"
type="link"
v-access:code="['system:tenant:edit']"
>
<ghost-button v-access:code="['system:tenant:edit']">
{{ $t('pages.common.sync') }}
</a-button>
</ghost-button>
</Popconfirm>
<Popconfirm
:get-popup-container="getPopupContainer"
@ -222,17 +216,15 @@ const isSuperAdmin = computed(() => {
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
<ghost-button
danger
size="small"
type="link"
v-access:code="['system:tenant:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</a-button>
</ghost-button>
</Popconfirm>
</template>
</Space>
</template>
</BasicTable>
<TenantDrawer @reload="tableApi.query()" />

View File

@ -6,6 +6,7 @@ import { computed, ref } from 'vue';
import { useAccess } from '@vben/access';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
import { Fallback } from '@vben/common-ui';
import { getPopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
@ -179,29 +180,28 @@ const isSuperAdmin = computed(() => {
/>
</template>
<template #action="{ row }">
<a-button
size="small"
type="link"
v-access:code="['system:tenantPackage:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</a-button>
<Popconfirm
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<a-button
danger
size="small"
type="link"
v-access:code="['system:tenantPackage:remove']"
@click.stop=""
<Space>
<ghost-button
v-access:code="['system:tenantPackage:edit']"
@click="handleEdit(row)"
>
{{ $t('pages.common.delete') }}
</a-button>
</Popconfirm>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getPopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['system:tenantPackage:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<TenantPackageDrawer @reload="tableApi.query()" />

View File

@ -63,6 +63,7 @@ const gridOptions: VxeGridProps = {
],
keepSource: true,
size: 'small',
minHeight: 400,
pagerConfig: {},
proxyConfig: {
ajax: {