feat: button组件替换

This commit is contained in:
rd
2025-09-03 11:15:37 +08:00
parent 01d561cfb2
commit db67274583
128 changed files with 805 additions and 745 deletions

View File

@ -74,11 +74,11 @@
</template>
<template #optional="{ record }">
<a-button type="outline" class="!rounded-4px" @click="gotoDetail(record)">详情</a-button>
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
</template>
</a-table>
</a-space>
<a-modal :visible="visible" unmountOnClose modal-class="hot-translation-modal" width="640px" @cancel="handleCancel">
<Modal v-model:open="visible" unmountOnClose centered wrapClassName="hot-translation-modal" width="640px" @cancel="handleCancel">
<template #title>
<span style="text-align: left; width: 100%">行业热门话题洞察</span>
</template>
@ -133,15 +133,16 @@
</a-space>
</div>
<template #footer>
<a-button size="large" @click="handleCancel">取消</a-button>
<a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
<Button size="large" @click="handleCancel">取消</Button>
<Button type="primary" size="large" @click="handleOk"> 确定 </Button>
</template>
</a-modal>
</Modal>
</view>
</template>
<script setup>
import topHeader from './topHeader.vue';
import { Modal, Button } from 'ant-design-vue';
import { ref, computed } from 'vue';
import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
import star1 from '@/assets/img/hottranslation/star-fill1.png';

View File

@ -207,15 +207,16 @@
</div>
</template>
<template #optional="{ record }">
<a-button type="outline" @click="gotoDetail(record)">详情</a-button>
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
</template>
</a-table>
</a-space>
<!-- modal -->
<a-modal
:visible="visible"
modal-class="keyword-modal"
<Modal
v-model:open="visible"
wrapClassName="keyword-modal"
unmountOnClose
centered
width="640px"
@ok="handleOk"
@cancel="handleCancel"
@ -260,15 +261,16 @@
</a-space>
</div>
<template #footer>
<a-button size="large" @click="handleCancel">取消</a-button>
<a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
<Button size="large" @click="handleCancel">取消</Button>
<Button type="primary" size="large" @click="handleOk"> 确定 </Button>
</template>
</a-modal>
</Modal>
</view>
</template>
<script setup>
import topHeader from './topHeader.vue';
import { Checkbox, Modal, Button } from 'ant-design-vue';
import {
fetchKeywordTrendsList,
fetchIndustryEmotions,

View File

@ -70,19 +70,19 @@
</a-space>
<!-- 搜索区域 -->
<a-space style="margin-left: 'auto'">
<a-button type="primary" size="medium" @click="handleSearch">
<Button type="primary" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px"/>
</template>
<!-- Use the default slot to avoid extra spaces -->
<template #default>搜索</template>
</a-button>
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
</Button>
<Button class="w-84px reset-btn" @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px"/>
</template>
<template #default>重置</template>
</a-button>
</Button>
</a-space>
</a-space>
</view>
@ -91,7 +91,7 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { fetchIndustriesTree } from '@/api/all/index';
import { Button } from 'ant-design-vue';
const emit = defineEmits<(e: 'search') => void>();
// 行业大类
const industriesTree = ref([]);

View File

@ -52,14 +52,15 @@
</template>
<template #optional="{ record }">
<a-button type="outline" class="!rounded-4px" @click="gotoDetail(record)">详情</a-button>
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
</template>
</a-table>
</a-space>
<a-modal
:visible="visible"
modal-class="user-pain-points-modal"
<Modal
v-model:open="visible"
wrapClassName="user-pain-points-modal"
centered
unmountOnClose
width="640px"
@ok="handleOk"
@ -110,15 +111,16 @@
</a-space>
</div>
<template #footer>
<a-button size="large" @click="handleCancel">取消</a-button>
<a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
<Button size="large" @click="handleCancel">取消</Button>
<Button type="primary" size="large" @click="handleOk"> 确定 </Button>
</template>
</a-modal>
</Modal>
</view>
</template>
<script setup>
import topHeader from './topHeader.vue';
import { Modal, Button } from 'ant-design-vue';
import { fetchUserPainPointsDetail, fetchUserPainPointsList } from '@/api/all/index';
import { ref, onMounted, computed } from 'vue';
import top1 from '@/assets/img/captcha/top1.svg';

View File

@ -54,7 +54,7 @@
</div>
</a-form-item>
<a-form-item hide-label class="mt-68px mb-16px">
<a-button
<Button
type="primary"
class="w-480 h-48 !text-16px !rounded-8px"
:class="disabledSubmitBtn ? 'cursor-no-drop' : 'cursor-pointer'"
@ -62,7 +62,7 @@
@click="handleSubmit"
>
{{ isLogin ? '登录' : '注册并开通企业账号' }}
</a-button>
</Button>
</a-form-item>
</a-form>
<a-space class="text-12px color-#737478 justify-start items-center">
@ -85,7 +85,7 @@
@submit="handleVerificationSubmit"
@cancel="isVerificationVisible = false"
/>
<a-modal :visible="visible" unmountOnClose hide-cancel @ok="handleOk" @cancel="handleCancel">
<Modal v-model:open="visible" centered unmountOnClose @cancel="handleCancel">
<template #title>
<span style="text-align: left; width: 100%">选择账号</span>
</template>
@ -119,11 +119,16 @@
</a-list>
</a-card>
</div>
</a-modal>
<template #footer>
<div class="flex">
<Button type="primary" @click="handleOk">确定</Button>
</div>
</template>
</Modal>
</template>
<script setup lang="ts">
import { Checkbox } from "ant-design-vue";
import { Checkbox, Modal, Button } from 'ant-design-vue';
import PuzzleVerification from './components/PuzzleVerification.vue';
import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
import { joinEnterpriseByInviteCode } from '@/api/all';

View File

@ -2,7 +2,7 @@
<div class="bg-#fff rounded-8px w-100% py-0 px-20px mt-24px pb-24px">
<div class="title-row">
<span class="title">账号管理</span>
<a-button type="outline" class="add-account-button" @click="handleAddAccount">添加子账号</a-button>
<Button type="primary" ghost class="add-account-button" @click="handleAddAccount">添加子账号</Button>
</div>
<a-table
:columns="columns"
@ -23,19 +23,20 @@
</div>
</template>
<template #action="{ record }">
<a-button
<Button
v-if="record.type !== 0"
class="delete-button"
size="mini"
type="outline"
status="danger"
size="small"
type="primary"
ghost
danger
@click="openDeleteModal(record)"
>
删除
</a-button>
</Button>
</template>
</a-table>
<Modal v-model:visible="addAccountVisible" width="480px" title="添加子账号" :okText="okText" @ok="handleOk">
<Modal v-model:visible="addAccountVisible" width="480px" title="添加子账号" :okText="okText" @ok="handleOk" >
<div v-if="canAddAccount" class="add-account-container">
<h2 class="add-account-title">生成企业专属链接成员通过访问即可注册并加入企业账号</h2>
<p class="add-account-subtitle">子账号可独立登录权限继承主账号配置</p>
@ -53,14 +54,15 @@
</div>
</Modal>
<CustomerServiceModal v-model:visible="customerServiceVisible" />
<DeleteModal v-model:visible="deleteVisible" :title="deleteTitle" @ok="handleDelete">
<p class="delete-modal-content">删除后该账号将无法登录您的企业</p>
<DeleteModal v-model:open="deleteVisible" :content="deleteTitle" @ok="handleDelete" @close="deleteVisible = false">
</DeleteModal>
</div>
</template>
<script setup lang="ts">
import Container from '@/components/container.vue';
import { ref, onMounted, reactive, computed } from 'vue';
import { Button } from 'ant-design-vue';
import { fetchSubAccountPage, removeEnterpriseAccount, getEnterpriseInviteCode } from '@/api/all';
import Modal from '@/components/modal.vue';
import DeleteModal from '@/components/delete-modal.vue';
@ -275,14 +277,7 @@ onMounted(() => {
color: var(--Text-2, rgba(60, 64, 67, 1));
}
}
.delete-modal-content {
margin-left: 34px;
margin-top: 16px;
font-family: $font-family-medium;
font-weight: 400;
font-size: 12px;
color: var(--Text-2, rgba(60, 64, 67, 1));
}
.title-row {
display: flex;
height: 64px;

View File

@ -11,7 +11,7 @@
{{ record.name }}
</template>
<template #action>
<a-button class="edit-button" size="mini" type="outline" @click="handleUpdate">修改</a-button>
<Button class="edit-button" size="small" type="primary" ghost @click="handleUpdate">修改</Button>
</template>
</a-table>
<Modal v-model:visible="infoVisible" width="480px" title="修改企业名称" :okText="okText" @ok="handleOk">
@ -36,6 +36,7 @@
</div>
</template>
<script setup lang="ts">
import { Button } from 'ant-design-vue';
import Container from '@/components/container.vue';
import Modal from '@/components/modal.vue';
import { ref, reactive, computed } from 'vue';

View File

@ -37,7 +37,7 @@
style="display: none"
@change="handleFileChange"
/>
<a-button><icon-upload />上传新头像</a-button>
<Button><icon-upload />上传新头像</Button>
</span>
</div>
</a-form-item>
@ -80,6 +80,7 @@
</div>
</template>
<script setup lang="ts">
import { Button } from 'ant-design-vue';
import Container from '@/components/container.vue';
import Modal from '@/components/modal.vue';
import PuzzleVerification from '@/views/components/login/components/PuzzleVerification.vue';

View File

@ -1,34 +0,0 @@
<!--
* @Author: 田鑫
* @Date: 2023-03-05 15:13:44
* @LastEditors: 田鑫
* @LastEditTime: 2023-03-05 15:43:18
* @Description: 模拟登录鉴权页
-->
<template>
<a-modal title="登录鉴权页" :visible="true" :footer="false">
<div w100 align-center>
<a-button w-160 @click="login" :loading="loading" type="primary">登录</a-button>
</div>
</a-modal>
</template>
<script lang="ts" setup>
const route = useRoute();
const router = useRouter();
const loading = ref(false);
function login() {
loading.value = true;
localStorage.setItem('satoken', '123asdzxc');
AMessage.success('登录鉴权成功,准备跳转');
setTimeout(() => {
loading.value = false;
router.push({ name: route.query?.redirect ? route.query?.redirect : 'dashboard' });
}, 1500);
}
</script>
<style lang="scss" scoped>
</style>

View File

@ -1,19 +0,0 @@
<!--
* @Author: 田鑫
* @Date: 2023-03-05 14:27:21
* @LastEditors: 田鑫
* @LastEditTime: 2023-03-05 15:14:15
* @Description:
-->
<template>
<a-modal title="选择企业:" :visible="true">
<a-select v-model="enterprise" placeholder="请选择您的企业"></a-select>
</a-modal>
</template>
<script lang="ts" setup>
const enterprise = ref('');
</script>
<style lang="scss" scoped>
</style>

View File

@ -22,44 +22,46 @@
</p>
</div>
<div class="footer flex arco-row-justify-start">
<a-button
<Button
v-if="props.product.status === Status.Enable || props.product.status === Status.ON_TRIAL"
type="primary"
size="mini"
size="small"
class="mr-8px"
@click="gotoModule(props.product.id)"
>
进入模块
</a-button>
<a-button
</Button>
<Button
v-if="props.product.status === Status.TRIAL_ENDS || props.product.status === Status.EXPIRED"
size="mini"
size="small"
type="primary"
class="mr-8px"
@click="visible = true"
>
立即购买
</a-button>
<a-button
</Button>
<Button
v-if="props.product.status === Status.ON_TRIAL"
class="mr-8px"
size="mini"
type="outline"
size="small"
type="primary"
ghost
@click="visible = true"
>
升级购买
</a-button>
<a-button
</Button>
<Button
v-if="props.product.status === Status.TRIAL_ENDS || props.product.status === Status.EXPIRED"
class="mr-8px"
size="mini"
type="outline"
size="small"
type="primary"
ghost
@click="visible = true"
>
联系客服
</a-button>
</Button>
<a-popconfirm focusLock title="试用产品" content="确定试用该产品吗?" @ok="handleTrial(props.product.id)">
<a-button v-if="props.product.status === Status.Disable" size="mini" type="outline"> 免费试用7天 </a-button>
<Button v-if="props.product.status === Status.Disable" size="small" type="default" ghost> 免费试用7天 </Button>
</a-popconfirm>
</div>
<CustomerServiceModal v-model:visible="visible" />
@ -71,6 +73,7 @@ import { now } from '@vueuse/core';
import { trialProduct } from '@/api/all';
import { useRouter } from 'vue-router';
import CustomerServiceModal from '@/components/customer-service-modal.vue';
import { Button } from 'ant-design-vue';
import { useSidebarStore } from '@/stores/modules/side-bar';
import { useEnterpriseStore } from '@/stores/modules/enterprise';