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

@ -1,5 +1,5 @@
<script lang="tsx">
import { Tabs, TabPane } from 'ant-design-vue';
import { Tabs, TabPane, Button } from 'ant-design-vue';
import ManuscriptList from './manuscript/list/index.vue';
import ManuscriptCheckList from './manuscript/check-list/index.vue';
import UploadManuscriptModal from '@/views/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue';
@ -29,13 +29,12 @@ export default defineComponent({
rightExtra: () => (
<div class="flex items-center">
{showManuscriptList.value && (
<a-button
<Button
type="primary"
size="medium"
class="ml-12px"
onClick={openUploadModal}
v-slots={{
icon: () => <icon-plus size="16" />,
icon: () => <icon-plus size="16" class="mr-8px"/>,
default: () => '上传内容稿件',
}}
/>

View File

@ -81,18 +81,18 @@
</template>
<div class="filter-row-item">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium" @click="handleReset">
</Button>
<Button @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -100,6 +100,7 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import { Button } from 'ant-design-vue';
import { PLATFORMS } from '@/views/writer-material-center/components/finished-products/manuscript/check-list/constants';
import { AuditStatus } from '@/views/writer-material-center/components/finished-products/constants';

View File

@ -5,14 +5,15 @@
<span>确认删除 {{ projectName }} 这个内容稿件吗</span>
</div>
<template #footer>
<a-button size="medium" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" status="danger" size="medium" @click="onDelete">确认删除</a-button>
<Button @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger @click="onDelete">确认删除</Button>
</template>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { deleteWorkWriter } from '@/api/all/generationWorkshop-writer.ts';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

View File

@ -100,17 +100,23 @@
<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" @click="onCheck(record)" v-if="audit_status === AuditStatus.Pending"
>审核</a-button
<Button
type="primary"
ghost
size="small"
@click="onCheck(record)"
v-if="audit_status === AuditStatus.Pending"
>审核</Button
>
<a-button
type="outline"
size="mini"
<Button
type="primary"
ghost
size="small"
@click="onScan(record)"
v-else-if="audit_status === AuditStatus.Auditing"
>查看</a-button
>查看</Button
>
<a-button type="outline" size="mini" @click="onDetail(record)" v-else>详情</a-button>
<Button type="primary" ghost size="small" @click="onDetail(record)" v-else>详情</Button>
</div>
</template>
<template v-else #cell="{ record }">
@ -123,6 +129,7 @@
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
import { patchWorkAuditsAuditWriter } from '@/api/all/generationWorkshop-writer.ts';

View File

@ -13,21 +13,21 @@
class="flex justify-end mb-12px"
v-if="[AuditStatus.Pending, AuditStatus.Auditing].includes(query.audit_status)"
>
<a-button
type="outline"
<Button
type="primary"
ghost
class="w-fit"
size="medium"
@click="handleBatchCheck"
v-if="query.audit_status === AuditStatus.Pending"
>批量审核</a-button
>批量审核</Button
>
<a-button
type="outline"
<Button
type="primary"
ghost
class="w-fit"
size="medium"
@click="handleBatchView"
v-if="query.audit_status === AuditStatus.Auditing"
>批量查看</a-button
>批量查看</Button
>
</div>
@ -63,7 +63,8 @@
</template>
<script lang="jsx" setup>
import { provide } from 'vue';
import { Button, Message as AMessage } from '@arco-design/web-vue';
import { Button } from 'ant-design-vue';
import { Message as AMessage } from '@arco-design/web-vue';
import FilterBlock from './components/filter-block';
import ManuscriptCheckTable from './components/manuscript-check-table';
import DeleteManuscriptModal from './components/manuscript-check-table/delete-manuscript-modal.vue';

View File

@ -14,16 +14,17 @@
}}</span>
</div>
<template #footer>
<a-button size="medium" @click="onClose">继续编辑</a-button>
<a-button type="primary" class="ml-8px" size="medium" @click="onConfirm">
<Button @click="onClose">继续编辑</Button>
<Button type="primary" class="ml-8px" @click="onConfirm">
{{ action === 'exit' ? '确认退出' : '确认切换' }}
</a-button>
</Button>
</template>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
import { useRouter } from 'vue-router';

View File

@ -13,9 +13,6 @@
<!-- <p class="text-14px lh-22px font-400 color-#737478 ld">想让内容更抓眼球更吸流量吗</p>
<p class="text-14px lh-22px font-400 color-#737478 ld">试试内容稿件分析功能吧</p> -->
</div>
<!-- <template #footer>
<a-button type="primary" class="ml-8px" size="medium" @click="onConfirm">内容稿件分析</a-button>
</template> -->
</a-modal>
</template>

View File

@ -1,6 +1,7 @@
<script lang="jsx">
import axios from 'axios';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Button } from 'ant-design-vue';
import { IconLoading } from '@arco-design/web-vue/es/icon';
import {
Image,
@ -8,7 +9,6 @@ import {
FormItem,
Input,
Textarea,
Button,
Tabs,
Upload,
TabPane,
@ -189,11 +189,11 @@ export default {
const renderFooterRow = () => {
return (
<>
<Button class="mr-12px" size="medium" onClick={onAgainCheck} disabled={isDisabled.value}>
<Button class="mr-12px" onClick={onAgainCheck} disabled={isDisabled.value}>
再次审核
</Button>
{isTextTab.value ? (
<Button size="medium" type="outline" class="w-123px check-btn" onClick={onAiReplace} disabled={isDisabled.value}>
<Button type="primary" ghost class="w-123px check-btn" onClick={onAiReplace} disabled={isDisabled.value}>
{aiReplaceLoading.value ? (
<>
<IconLoading size={14} />
@ -209,7 +209,7 @@ export default {
) : (
<div class="w-88px">
{renderUpload(
<Button size="medium" type="outline">
<Button type="primary" ghost>
图片替换
</Button>,
'replaceImage',

View File

@ -1,5 +1,6 @@
<script lang="jsx">
import { Button, Message as AMessage, Spin } from '@arco-design/web-vue';
import { Button } from 'ant-design-vue';
import { Message as AMessage, } from '@arco-design/web-vue';
import CancelCheckModal from './cancel-check-modal.vue';
import CheckSuccessModal from './check-success-modal.vue';
import HeaderCard from './components/header-card';
@ -184,13 +185,13 @@ export default {
const renderFooterRow = () => {
return (
<>
<Button size="medium" type="outline" class="mr-12px" onClick={onExit}>
<Button type="primary" ghost class="mr-12px" onClick={onExit}>
退出
</Button>
<Button size="medium" type="outline" class="mr-12px" onClick={onSave}>
<Button type="primary" ghost class="mr-12px" onClick={onSave}>
保存
</Button>
<Button type="primary" size="medium" onClick={onSubmit} loading={submitLoading.value}>
<Button type="primary" onClick={onSubmit} loading={submitLoading.value}>
{submitLoading.value ? '通过审核中...' : '通过审核'}
</Button>
</>

View File

@ -1,6 +1,7 @@
<script lang="jsx">
import axios from 'axios';
import { Form, FormItem, Input, Textarea, Upload, Message as AMessage, Button } from '@arco-design/web-vue';
import { Button } from 'ant-design-vue';
import { Form, FormItem, Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
import CommonSelect from '@/components/common-select';
import { VueDraggable } from 'vue-draggable-plus';
import TextOverTips from '@/components/text-over-tips';

View File

@ -1,13 +1,10 @@
<script lang="jsx">
import { Button } from 'ant-design-vue';
import {
Modal,
Form,
FormItem,
Input,
RadioGroup,
Radio,
Upload,
Button,
Message as AMessage,
Textarea,
} from '@arco-design/web-vue';
@ -301,36 +298,36 @@ export default {
const renderFooterButtons = () => {
const buttonMap = {
[TASK_STATUS.LOADING]: () => (
<Button type="primary" size="medium" onClick={onCancelUpload}>
<Button type="primary" onClick={onCancelUpload}>
取消上传
</Button>
),
[TASK_STATUS.DEFAULT]: () => (
<>
<Button size="medium" onClick={onClose}>
<Button onClick={onClose}>
取消
</Button>
<Button type="primary" size="medium" onClick={onSubmit}>
<Button type="primary" onClick={onSubmit}>
确认
</Button>
</>
),
[TASK_STATUS.FAILED]: () => (
<>
<Button size="medium" onClick={onClose}>
<Button onClick={onClose}>
取消
</Button>
<Button type="primary" size="medium" onClick={onClose}>
<Button type="primary" onClick={onClose}>
重新上传
</Button>
</>
),
[TASK_STATUS.SUCCESS]: () => (
<>
<Button size="medium" onClick={onClose}>
<Button onClick={onClose}>
取消
</Button>
<Button type="primary" size="medium" onClick={goUpload}>
<Button type="primary" onClick={goUpload}>
确认
</Button>
</>

View File

@ -1,5 +1,6 @@
<script lang="jsx">
import { Button, Message as AMessage, Spin } from '@arco-design/web-vue';
import { Button } from 'ant-design-vue';
import { Message as AMessage, Spin } from '@arco-design/web-vue';
import { useRouter, useRoute } from 'vue-router';
import { AuditStatus } from '@/views/writer-material-center/components/finished-products/constants';
@ -130,12 +131,12 @@ export default {
return (
<>
<Button size="medium" type="outline" class="mr-12px" onClick={onBack}>
<Button type="primary" ghost class="mr-12px" onClick={onBack}>
退出
</Button>
<Button
size="medium"
type="outline"
type="primary"
ghost
class="mr-12px"
onClick={() => {
router.push({
@ -150,7 +151,7 @@ export default {
编辑
</Button>
{audit_status !== AuditStatus.Passed && (
<Button type="primary" size="medium" onClick={_fn}>
<Button type="primary" onClick={_fn}>
去审核
</Button>
)}

View File

@ -5,14 +5,15 @@
<span>内容已修改尚未保存若退出编辑本次修改将不保存</span>
</div>
<template #footer>
<a-button size="medium" @click="onClose">继续编辑</a-button>
<a-button type="primary" class="ml-8px" size="medium" @click="onConfirm">确认退出</a-button>
<Button @click="onClose">继续编辑</Button>
<Button type="primary" class="ml-8px" @click="onConfirm">确认退出</Button>
</template>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
const router = useRouter();

View File

@ -1,5 +1,6 @@
<script lang="jsx">
import { Button, Message as AMessage } from '@arco-design/web-vue';
import { Button } from 'ant-design-vue';
import { Message as AMessage } from '@arco-design/web-vue';
import EditForm, { ENUM_UPLOAD_STATUS, INITIAL_VIDEO_INFO } from '../components/edit-form';
import CancelEditModal from './cancel-edit-modal.vue';
@ -119,14 +120,13 @@ export default {
collapsed.value ? 'collapsed' : ''
}`}
>
{' '}
<Button size="medium" type="outline" onClick={onCancel} class="mr-12px">
<Button type="primary" ghost onClick={onCancel} class="mr-12px">
退出
</Button>
<Button size="medium" type="outline" onClick={() => onSave()} class="mr-12px">
<Button type="primary" ghost onClick={() => onSave()} class="mr-12px">
保存
</Button>
<Button type="primary" size="medium" onClick={() => onSave(true)} loading={uploadLoading.value}>
<Button type="primary" onClick={() => onSave(true)} loading={uploadLoading.value}>
保存并审核
</Button>
</footer>

View File

@ -66,18 +66,18 @@
/>
</div>
<div class="filter-row-item">
<a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
<template #icon>
<icon-search />
<icon-search class="mr-8px" />
</template>
<template #default>搜索</template>
</a-button>
<a-button size="medium" @click="handleReset">
</Button>
<Button @click="handleReset">
<template #icon>
<icon-refresh />
<icon-refresh class="mr-8px" />
</template>
<template #default>重置</template>
</a-button>
</Button>
</div>
</div>
</div>
@ -85,6 +85,7 @@
<script setup>
import { defineEmits, defineProps } from 'vue';
import { Button } from 'ant-design-vue';
import { CHECK_STATUS } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
import CommonSelect from '@/components/common-select';
// import { getProjectList } from '@/api/all/propertyMarketing';

View File

@ -62,7 +62,7 @@ export const TABLE_COLUMNS = [
{
title: '操作',
dataIndex: 'operation',
width: 180,
width: 200,
fixed: 'right'
},
];

View File

@ -5,14 +5,15 @@
<span>确认删除 {{ projectName }} 这个稿件吗</span>
</div>
<template #footer>
<a-button size="large" @click="onClose">取消</a-button>
<a-button type="primary" class="ml-16px" status="danger" size="large" @click="onDelete">确认删除</a-button>
<Button size="large" @click="onClose">取消</Button>
<Button type="primary" class="ml-16px" danger size="large" @click="onDelete">确认删除</Button>
</template>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { deleteWorkWriter } from '@/api/all/generationWorkshop-writer.ts';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

View File

@ -82,8 +82,8 @@
<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="mr-8px" @click="onEdit(record)">编辑</a-button>
<a-button type="outline" size="mini" @click="onDetail(record)">详情</a-button>
<Button type="primary" ghost size="small" class="mr-8px" @click="onEdit(record)">编辑</Button>
<Button type="primary" ghost size="small" @click="onDetail(record)">详情</Button>
</div>
</template>
<template v-else #cell="{ record }">
@ -96,9 +96,13 @@
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { formatTableField, exactFormatTime } from '@/utils/tools';
import { TABLE_COLUMNS } from './constants';
import { CHECK_STATUS, EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
import {
CHECK_STATUS,
EnumManuscriptType,
} from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
import TextOverTips from '@/components/text-over-tips';
import HoverImagePreview from '@/components/hover-image-preview';

View File

@ -1,6 +1,6 @@
<template>
<div class="manuscript-list-wrap">
<div class="filter-wrap bg-#fff rounded-b-8px mb-16px">
<div class="filter-wrap bg-#fff rounded-b-8px mb-16px">
<FilterBlock v-model:query="query" @search="handleSearch" @reset="handleReset" />
</div>
<div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
@ -24,18 +24,13 @@
</div>
</template>
<script lang="jsx" setup>
import { defineComponent } from 'vue';
import { Button } from '@arco-design/web-vue';
import FilterBlock from './components/filter-block';
import ManuscriptTable from './components/manuscript-table';
import DeleteManuscriptModal from './components/manuscript-table/delete-manuscript-modal.vue';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
import { getWorksPageWriter } from '@/api/all/generationWorkshop-writer.ts';
import {
INITIAL_QUERY,
EnumCheckStatus,
} from '@/views/writer-material-center/components/finished-products/manuscript/list/constants.ts';
import { INITIAL_QUERY } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants.ts';
const { dataSource, pageInfo, onPageChange, onPageSizeChange, resetPageInfo } = useTableSelectionWithPagination({
onPageChange: () => {

View File

@ -5,14 +5,15 @@
<span>确认取消上传这 {{ num }} 个文件吗此操作不可恢复</span>
</div>
<template #footer>
<a-button size="medium" @click="onClose">继续编辑</a-button>
<a-button type="primary" class="ml-8px" size="medium" @click="onConfirm">确认取消</a-button>
<Button @click="onClose">继续编辑</Button>
<Button type="primary" class="ml-8px" @click="onConfirm">确认取消</Button>
</template>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';
const router = useRouter();

View File

@ -1,5 +1,6 @@
<script lang="jsx">
import { Button, Message as AMessage } from '@arco-design/web-vue';
import { Button } from 'ant-design-vue';
import { Message as AMessage } from '@arco-design/web-vue';
import TextOverTips from '@/components/text-over-tips';
import EditForm, { ENUM_UPLOAD_STATUS, INITIAL_VIDEO_INFO } from '../components/edit-form';
import CancelUploadModal from './cancel-upload-modal.vue';
@ -88,7 +89,6 @@ export default {
writerCode: writerCode.value,
},
});
} else {
router.push({
name: 'WriterMaterialCenterFinishedProducts',
@ -156,10 +156,10 @@ export default {
if (works.value.length > 1) {
return (
<>
<Button size="medium" type="outline" onClick={onCancel} class="mr-12px">
<Button type="primary" ghost onClick={onCancel} class="mr-12px">
取消上传
</Button>
<Button type="primary" size="medium" onClick={() => onUpload('batchUpload')} loading={uploadLoading.value}>
<Button type="primary" onClick={() => onUpload('batchUpload')} loading={uploadLoading.value}>
{uploadLoading.value ? '批量上传' : '批量上传'}
</Button>
</>
@ -167,24 +167,19 @@ export default {
} else {
return (
<>
<Button size="medium" type="outline" onClick={onCancel} class="mr-12px">
<Button type="primary" ghost onClick={onCancel} class="mr-12px">
取消上传
</Button>
<Button
size="medium"
type="outline"
type="primary"
ghost
onClick={() => onUpload('singleUpload')}
class="mr-12px"
loading={uploadLoading.value}
>
上传
</Button>
<Button
type="primary"
size="medium"
onClick={() => onUpload('uploadAndCheck')}
loading={uploadLoading.value}
>
<Button type="primary" onClick={() => onUpload('uploadAndCheck')} loading={uploadLoading.value}>
上传并审核
</Button>
</>

View File

@ -7,14 +7,15 @@
<p class="text-14px lh-22px font-400 color-#737478 ld">检测是否存在违规内容</p>
</div>
<template #footer>
<a-button size="medium" @click="onBack">回到列表</a-button>
<a-button type="primary" class="ml-8px" size="medium" @click="onConfirm">批量审核</a-button>
<Button @click="onBack">回到列表</Button>
<Button type="primary" class="ml-8px" @click="onConfirm">批量审核</Button>
</template>
</a-modal>
</template>
<script setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import { slsWithCatch } from '@/utils/stroage.ts';
import icon1 from '@/assets/img/media-account/icon-feedback-success.png';