refactor(按钮样式): 替换btn-success类为variant和color属性

使用variant="link"和color="green"替代原有的btn-success类,统一按钮样式实现方式
This commit is contained in:
dap 2026-01-13 20:25:02 +08:00
parent ff39e65d81
commit 0ab5c46812
4 changed files with 11 additions and 29 deletions

View File

@ -155,7 +155,8 @@ function setExpandOrCollapse(expand: boolean) {
{{ $t('pages.common.edit') }} {{ $t('pages.common.edit') }}
</ghost-button> </ghost-button>
<ghost-button <ghost-button
class="btn-success" variant="link"
color="green"
v-access:code="['system:dept:add']" v-access:code="['system:dept:add']"
@click="handleSubAdd(row)" @click="handleSubAdd(row)"
> >

View File

@ -223,7 +223,8 @@ function handleSyncTenantConfig() {
@confirm="handleSync(row)" @confirm="handleSync(row)"
> >
<ghost-button <ghost-button
class="btn-success" variant="link"
color="green"
v-access:code="['system:tenant:edit']" v-access:code="['system:tenant:edit']"
> >
{{ $t('pages.common.sync') }} {{ $t('pages.common.sync') }}

View File

@ -1,14 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import type { VbenFormProps } from '@vben/common-ui';
import type { Recordable } from '@vben/types'; import type { Recordable } from '@vben/types';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui'; import { Page, useVbenModal } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils'; import { getVxePopupContainer } from '@vben/utils';
import { Popconfirm, Space } from 'antdv-next'; import { Popconfirm, Space } from 'antdv-next';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table'; import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { categoryList, categoryRemove } from '#/api/workflow/category'; import { categoryList, categoryRemove } from '#/api/workflow/category';
import categoryModal from './category-modal.vue'; import categoryModal from './category-modal.vue';
@ -125,7 +128,8 @@ function collapseAll() {
{{ $t('pages.common.edit') }} {{ $t('pages.common.edit') }}
</ghost-button> </ghost-button>
<ghost-button <ghost-button
class="btn-success" variant="link"
color="green"
v-access:code="['workflow:category:edit']" v-access:code="['workflow:category:edit']"
@click.stop="handleAdd(row)" @click.stop="handleAdd(row)"
> >

View File

@ -107,27 +107,3 @@ vxe表格loading 只加载表格 不加载上面的表单
.vxe-grid.is--loading::before { .vxe-grid.is--loading::before {
content: none !important; content: none !important;
} }
/**
自定义success按钮样式
ghost按钮专用!
*/
.btn-success {
color: hsl(var(--success)) !important;
border-color: hsl(var(--success)) !important;
}
.btn-success:hover {
color: hsl(var(--success) / 50%) !important;
border-color: hsl(var(--success) / 50%) !important;
}
html.dark button[disabled].btn-success {
color: rgb(242 242 242 / 25%) !important;
border-color: hsl(240deg 3.7% 22%) !important;
}
button[disabled].btn-success {
color: rgb(50 54 57 / 25%) !important;
border-color: hsl(240deg 5.9% 90%) !important;
}