feat: 统一button4种样式:primary/outline/text/default

This commit is contained in:
rd
2025-07-22 11:28:39 +08:00
parent 110ad79e7d
commit 55174e4258
37 changed files with 164 additions and 132 deletions

View File

@ -17,7 +17,7 @@
</div>
<p class="m-0 p-0 mb-24px s2 ml-32px">退出登录后你将无法收到该账号的通知</p>
<div class="flex items-center justify-end">
<a-button class="cancel-btn" size="medium" @click="onClose">返回</a-button>
<a-button class="!rounded-4px" size="medium" @click="onClose">返回</a-button>
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="medium" @click="onLogout"
>退出登录</a-button
>
@ -83,15 +83,12 @@ defineExpose({ open });
}
.cancel-btn {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
&:hover {
border: 1px solid var(--BG-500, #b1b2b5);
}
}
.danger-btn {
border-radius: 4px;
background: var(--Functional-Danger-6, #f64b31) !important;
border: none !important;
&:hover {
background: var(--Functional-Danger-6, #f64b31) !important;
}
}
}
}

View File

@ -63,7 +63,7 @@ const onEnterpriseItemClick = async (item) => {
<a-menu-item v-for="item in menuList" :key="String(item.id)">
<template v-if="item.children">
<a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
<a-button>
<a-button type="text">
<span class="menu-item-text mr-2px"> {{ item.name }}</span>
<icon-caret-down size="16" class="arco-icon-down !mr-0" />
</a-button>

View File

@ -0,0 +1,67 @@
$disabled-ele: '.arco-btn-disabled';
.arco-btn {
border-radius: 2px;
border: 1px solid #d7d7d9 !important;
color: #3c4043 !important;
font-family: $font-family-regular;
font-size: 14px !important;
font-style: normal;
font-weight: 400 !important;
line-height: 22px !important;
&.arco-btn-disabled {
border-color: #f2f3f5 !important;
color: #b1b2b5 !important;
}
&:not(.arco-btn-disabled) {
&:hover {
border-color: #e6e6e8 !important;
color: #737478 !important;
}
}
}
.arco-btn-primary {
background-color: #6d4cfe !important;
border: none !important;
color: #fff !important;
&.arco-btn-disabled {
color: #fff !important;
background-color: #c5b7ff !important;
}
&:not(.arco-btn-disabled) {
&:hover {
color: #fff !important;
background-color: #8a70fe !important;
}
}
}
.arco-btn-outline {
border: 1px solid #6d4cfe !important;
color: #6d4cfe !important;
&.arco-btn-disabled {
border-color: #c5b7ff !important;
color: #c5b7ff !important;
}
&:not(.arco-btn-disabled) {
&:hover {
border-color: #8a70fe !important;
color: #8a70fe !important;
}
}
}
.arco-btn-text {
background-color: transparent !important;
border: none !important;
color: #6d4cfe !important;
&.arco-btn-disabled {
color: #c5b7ff !important;
}
&:not(.arco-btn-disabled) {
&:hover {
color: #8a70fe !important;
}
}
}

View File

@ -6,4 +6,5 @@
@import './modal.scss';
@import "./textarea.scss";
@import "./select.scss";
@import "./date-picker.scss"
@import "./date-picker.scss";
@import "./button.scss";

View File

@ -54,16 +54,15 @@
</div>
</a-form-item>
<a-form-item hide-label class="mt-68px mb-16px">
<div
<a-button
type="primary"
class="w-480 h-48 text-16px rounded-8px text-center text-white leading-48px"
class="w-480 h-48 !text-16px !rounded-8px"
:class="disabledSubmitBtn ? 'cursor-no-drop' : 'cursor-pointer'"
:style="{ backgroundColor: disabledSubmitBtn ? '#C5B7FF' : '#6D4CFE' }"
:disabled="disabledSubmitBtn"
@click="handleSubmit"
>
{{ isLogin ? '登录' : '注册并开通企业账号' }}
</div>
</a-button>
</a-form-item>
</a-form>
<a-space class="text-12px color-#737478 justify-start items-center">

View File

@ -21,13 +21,13 @@
</a-space>
</div>
<div class="filter-row flex">
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>

View File

@ -3,23 +3,11 @@
display: flex;
flex-direction: column;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.edit-btn) {
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.table-wrap {
width: 100%;

View File

@ -25,13 +25,13 @@
</div>
<div class="filter-row flex">
<a-button class="w-84px search-btn mr-12px" size="medium">
<a-button type="outline" class="mr-12px" size="medium">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium">
<a-button size="medium">
<template #icon>
<icon-refresh />
</template>

View File

@ -25,13 +25,13 @@
</div>
<div class="filter-row flex">
<a-button class="w-84px search-btn mr-12px" size="medium">
<a-button type="outline" class="mr-12px" size="medium">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium">
<a-button size="medium">
<template #icon>
<icon-refresh />
</template>

View File

@ -15,11 +15,11 @@
>
</div>
<div class="flex items-center">
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
<a-button type="outline" class="w-110px mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<template #default>导出数据</template>
</a-button>
<a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
<a-button type="outline" class="w-110px" size="medium" @click="openCustomColumn">
<template #icon>
<img :src="icon1" width="14" height="14" />
</template>
@ -119,7 +119,7 @@
}}
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">
@ -148,7 +148,7 @@
</a-table-column>
<a-table-column data-index="operation" fixed="right" width="100" title="操作">
<template #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
</template>
</a-table-column>
</template>

View File

@ -47,13 +47,13 @@
</a-select>
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button class="w-84px" size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>

View File

@ -2,16 +2,6 @@
height: 100%;
display: flex;
flex-direction: column;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.filter-wrap {
border-radius: 8px;
border: 1px solid #e6e6e8;

View File

@ -36,13 +36,13 @@
/>
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button class="w-84px" size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>

View File

@ -19,16 +19,6 @@
padding: 10px 0;
align-items: center;
}
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.table-wrap {
width: 100%;

View File

@ -76,7 +76,7 @@
</div>
<div class="operate-row">
<a-dropdown trigger="hover">
<a-button class="w-52px search-btn mr-8px" size="mini">
<a-button class="w-52px mr-8px" type="outline" size="mini">
<template #default>更多</template>
</a-button>
<template #content>
@ -89,7 +89,7 @@
>
<a-doption class="color-#F64B31" @click="openDelete(item)">删除</a-doption>
</template>
<a-button class="search-btn" size="mini" @click="onBtnClick(item)">
<a-button type="outline" size="mini" @click="onBtnClick(item)">
<template #default>{{ getBtnText(item) }}</template>
</a-button>
</a-dropdown>
@ -101,8 +101,8 @@
<span class="name !mb-0">更新数据失败</span>
</div>
<div class="flex items-center">
<a-button class="search-btn mr-8px" size="mini" @click="onDeleteSyncStatus(item)">取消</a-button>
<a-button class="search-btn" size="mini" @click="syncData(item)">重新更新</a-button>
<a-button type="outline" class="mr-8px" size="mini" @click="onDeleteSyncStatus(item)">取消</a-button>
<a-button type="outline" class="" size="mini" @click="syncData(item)">重新更新</a-button>
</div>
</div>
</a-spin>

View File

@ -59,13 +59,13 @@
<TagSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" />
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button class="w-84px" size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>

View File

@ -8,19 +8,19 @@
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">账号管理</p>
<div class="flex items-center">
<a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenTagsModal">
<a-button class="w-112px mr-12px" type="outline" size="medium" @click="handleOpenTagsModal">
<template #icon>
<img :src="icon3" width="16" height="16" />
</template>
<template #default>标签管理</template>
</a-button>
<a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenGroupModal">
<a-button class="w-112px mr-12px" type="outline" size="medium" @click="handleOpenGroupModal">
<template #icon>
<img :src="icon2" width="16" height="16" />
</template>
<template #default>分组管理</template>
</a-button>
<a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAccountModal">
<a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal">
<template #icon>
<img :src="icon1" width="16" height="16" />
</template>

View File

@ -2,16 +2,6 @@
height: 100%;
display: flex;
flex-direction: column;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.filter-wrap {
.top {
.title {

View File

@ -0,0 +1,32 @@
<template>
<a-modal
v-model:visible="visible"
title="添加项目"
modal-class="add-project-modal"
width="960px"
:mask-closable="false"
@close="onClose"
>
<template #footer>
<a-button size="large" class="cancel-btn" @click="onClose">取消</a-button>
<a-button type="primary" size="large" @click="onSubmit">确定</a-button>
</template>
</a-modal>
</template>
<script setup>
const visible = ref(false);
const emits = defineEmits(['update']);
const open = () => {
visible.value = true;
};
const onClose = () => {
visible.value = false;
};
const onSubmit = () => {
console.log('onSubmit');
};
defineExpose({ open });
</script>

View File

@ -0,0 +1,3 @@
.add-project-modal {
}

View File

@ -4,7 +4,7 @@
* @Date: 2025-06-25 14:02:40
-->
<template>
<div class="container px-24px pt-12px pb-24px">
<div class="filter-wrap px-24px pt-12px pb-24px">
<div class="filter-row flex">
<div class="filter-row-item flex items-center">
<span class="label">项目名称</span>
@ -24,13 +24,13 @@
</a-space>
</div>
<div class="filter-row-item flex items-center">
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>

View File

@ -1,4 +1,4 @@
.container {
.filter-wrap {
.filter-row {
.filter-row-item {
&:not(:last-child) {

View File

@ -13,6 +13,7 @@ export const TABLE_COLUMNS = [
title: '项目预算',
dataIndex: 'key1',
width: 180,
prefix: "¥"
},
{
title: '关联平台账号',

View File

@ -41,7 +41,7 @@
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<div class="flex items-center">
<img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
<a-button type="outline" size="mini" class="search-btn" @click="onEdit(record)">编辑</a-button>
<a-button type="outline" size="mini" @click="onEdit(record)">编辑</a-button>
</div>
</template>

View File

@ -37,6 +37,8 @@
/>
</div>
</div>
<AddProjectModal ref="addProjectModalRef"/>
</div>
</template>
@ -46,6 +48,7 @@ import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPa
import FilterBlock from './components/filter-block';
import ProjectTable from './components/project-table';
import AddProjectModal from './components/add-project-modal';
import icon1 from '@/assets/img/media-account/icon-add.png';

View File

@ -2,16 +2,6 @@
height: 100%;
display: flex;
flex-direction: column;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.filter-wrap {
.top {
.title {

View File

@ -43,13 +43,13 @@
<a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-100%" />
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>

View File

@ -16,11 +16,11 @@
</div>
<div class="flex items-center">
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
<a-button type="outline" class="mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<template #default>导出数据</template>
</a-button>
<a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
<a-button type="outline" size="medium" @click="openCustomColumn">
<template #icon>
<img :src="icon1" width="14" height="14" />
</template>
@ -106,7 +106,7 @@
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">

View File

@ -55,13 +55,13 @@
/>
</a-space>
</div>
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>

View File

@ -16,11 +16,11 @@
</div>
<div class="flex items-center">
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
<a-button type="outline" class="mr-12px" size="medium" @click="handleExport">
<template #icon> <icon-download /> </template>
<template #default>导出数据</template>
</a-button>
<a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
<a-button type="outline" size="medium" @click="openCustomColumn">
<template #icon>
<img :src="icon1" width="14" height="14" />
</template>
@ -106,7 +106,7 @@
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
</template>
<template v-else-if="column.isRateField" #cell="{ record }">

View File

@ -9,7 +9,7 @@
<a-tab-pane key="1" title="账户"></a-tab-pane>
<a-tab-pane key="2" title="计划"></a-tab-pane>
<template v-if="!isAccountTab" #extra>
<a-button class="w-112px mr-12px search-btn flex items-center" size="medium" @click="handleOpenGroupModal">
<a-button type="outline" class="mr-12px flex items-center" size="medium" @click="handleOpenGroupModal">
<template #icon>
<img :src="icon2" width="16" height="16" />
</template>

View File

@ -2,16 +2,6 @@
height: 100%;
display: flex;
flex-direction: column;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.filter-wrap {
border-radius: 8px;
border: 1px solid #e6e6e8;

View File

@ -53,17 +53,18 @@
<img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
<a-button
v-if="showPauseButton(item.status)"
class="w-64px search-btn mr-8px"
type="outline"
class="mr-8px"
size="mini"
@click="handlePause(item)"
>
<template #default>暂停同步</template>
</a-button>
<a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
<a-button type="outline" class="mr-8px" size="mini" @click="handleReauthorize(item)">
<template #default>获取凭证</template>
</a-button>
<a-button class="w-40px search-btn" size="mini" @click="openEdit(item)">
<a-button type="outline" size="mini" @click="openEdit(item)">
<template #default>编辑</template>
</a-button>
</div>

View File

@ -47,13 +47,13 @@
</div>
</div>
<div class="filter-row flex">
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>

View File

@ -8,7 +8,7 @@
<div class="top flex h-64px px-24px py-10px justify-between items-center">
<p class="text-18px font-400 lh-26px color-#211F24 title">账户管理</p>
<div class="flex items-center">
<a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAccountModal">
<a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal">
<template #icon>
<img :src="icon1" width="16" height="16" />
</template>

View File

@ -2,16 +2,6 @@
height: 100%;
display: flex;
flex-direction: column;
:deep(.search-btn) {
border-radius: 4px;
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
color: #6d4cfe;
}
:deep(.reset-btn) {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
}
.filter-wrap {
.top {
.title {

View File

@ -35,13 +35,13 @@
</div>
<div class="filter-row-item flex items-center">
<a-button class="w-84px search-btn mr-12px" :disabled="disabled" size="medium" @click="handleSearch">
<a-button type="outline" class="mr-12px" :disabled="disabled" size="medium" @click="handleSearch">
<template #icon>
<icon-search />
</template>
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
<a-button size="medium" @click="handleReset">
<template #icon>
<icon-refresh />
</template>