feat: button组件替换

2025-09-03 11:15:37 +08:00
parent 01d561cfb2
commit db67274583
128 changed files with 805 additions and 745 deletions
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
@ -115,10 +115,10 @@
          <span class="name !mb-0">{{ getErrorStatusText(item) }}</span>
        </div>
        <div class="flex items-center">
-          <a-button type="outline" class="mr-8px" size="mini" @click="handleCancel(item)">取消</a-button>
-          <a-button type="outline" size="mini" @click="handleConfirm(item)" v-if="showConfirmBtn(item)">{{
+          <Button type="primary" ghost class="mr-8px" size="small" @click="handleCancel(item)">取消</Button>
+          <Button type="primary" ghost size="small" @click="handleConfirm(item)" v-if="showConfirmBtn(item)">{{
            getConfirmBtnText(item)
-          }}</a-button>
+          }}</Button>
        </div>
      </div>
    </a-spin>
@ -130,7 +130,7 @@

 <script setup>
 import { defineProps, ref, computed, inject } from 'vue';
-import { Checkbox } from 'ant-design-vue';
+import { Checkbox, Button } from 'ant-design-vue';
 import { useRouter } from 'vue-router';
 import { deleteSyncStatus } from '@/api/all/propertyMarketing';
 import { exactFormatTime } from '@/utils/tools';
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/pause-account-patch.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/pause-account-patch.vue
@ -9,13 +9,14 @@
      <span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
    </div>
    <template #footer>
-      <a-button size="large" @click="onClose">取消</a-button>
-      <a-button type="primary" class="ml-16px" size="large" @click="onConfirm">确定</a-button>
+      <Button size="large" @click="onClose">取消</Button>
+      <Button type="primary" class="ml-16px" size="large" @click="onConfirm">确定</Button>
    </template>
  </a-modal>
 </template>

 <script setup>
+import { Button } from 'ant-design-vue';
 import { ref } from 'vue';
 import { pausePatchAccount } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
--- a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
@ -4,6 +4,7 @@
 -->
 <script lang="jsx">
 import { ref, computed } from 'vue';
+import { Button } from 'ant-design-vue';
 import {
  Modal,
  Form,
@ -12,10 +13,8 @@ import {
  RadioGroup,
  Radio,
  Upload,
-  Button,
  Switch,
  Tooltip,
-  Notification,
  Message as AMessage,
  Textarea,
 } from '@arco-design/web-vue';
--- a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
@ -76,15 +76,15 @@
    </div>

    <template #footer>
-      <a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
+      <Button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
        重新生成
-      </a-button>
-      <a-button v-if="[MODAL_STATE.SUCCESS, MODAL_STATE.FAILED].includes(modalState)" size="large" @click="close">
+      </Button>
+      <Button v-if="[MODAL_STATE.SUCCESS, MODAL_STATE.FAILED].includes(modalState)" size="large" @click="close">
        取消
-      </a-button>
-      <a-button type="primary" size="large" @click="handleOk">
+      </Button>
+      <Button type="primary" size="large" @click="handleOk">
        {{ confirmBtnText }}
-      </a-button>
+      </Button>
    </template>
  </a-modal>

@ -94,6 +94,7 @@
 <script setup>
 import { defineExpose, ref, computed } from 'vue';
 import { Message as AMessage } from '@arco-design/web-vue';
+import { Button } from 'ant-design-vue';
 import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
 import SyncDataModal from '../sync-data-modal';

--- a/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
@ -76,14 +76,15 @@
      </template>
    </a-form>
    <template #footer>
-      <a-button size="large" @click="onClose">取消</a-button>
-      <a-button type="primary" size="large" @click="onSubmit">确定</a-button>
+      <Button size="large" @click="onClose">取消</Button>
+      <Button type="primary" size="large" @click="onSubmit">确定</Button>
    </template>
  </a-modal>
 </template>

 <script setup>
 import { ref, reactive } from 'vue';
+import { Button } from 'ant-design-vue';
 import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';

 import icon1 from '@/assets/img/icon-question.png';
--- a/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
@ -76,18 +76,18 @@
        </a-space>
      </div>
      <div class="filter-row-item">
-        <a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
+        <Button type="primary" ghost class="w-84px mr-12px"@click="handleSearch">
          <template #icon>
-            <icon-search />
+            <icon-search class="mr-8px"/>
          </template>
          <template #default>搜索</template>
-        </a-button>
-        <a-button class="w-84px" size="medium" @click="handleReset">
+        </Button>
+        <Button class="w-84px" @click="handleReset">
          <template #icon>
-            <icon-refresh />
+            <icon-refresh class="mr-8px"/>
          </template>
          <template #default>重置</template>
-        </a-button>
+        </Button>
      </div>
    </div>
  </div>
@ -95,6 +95,7 @@

 <script setup>
 import { reactive, defineEmits, defineProps } from 'vue';
+import { Button } from 'ant-design-vue';
 import {
  fetchAccountTags,
  getProjectList,
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue
@ -16,14 +16,15 @@
      </a-form-item>
    </a-form>
    <template #footer>
-      <a-button @click="onClose">取消</a-button>
-      <a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
+      <Button @click="onClose">取消</Button>
+      <Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
    </template>
  </a-modal>
 </template>

 <script setup>
 import { ref, watch, nextTick } from 'vue';
+import { Button } from 'ant-design-vue';
 import { postAccountGroups, putGroup } from '@/api/all/propertyMarketing';

 const emits = defineEmits(['success', 'close']);
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue
@ -9,16 +9,15 @@
      <span>确认删除 "{{ groupName }}" 这个分组吗？</span>
    </div>
    <template #footer>
-      <a-button size="large" @click="onClose">取消</a-button>
-      <a-button type="primary" class="ml-16px danger-btn" 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 { deleteGroup } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
@ -23,12 +23,12 @@
          </a-input>
        </a-space>
      </div>
-      <a-button type="primary" size="medium" @click="openAdd"
+      <Button type="primary" size="middle" @click="openAdd"
        ><template #icon>
-          <icon-plus size="16" />
+          <icon-plus size="16" class="mr-8px"/>
        </template>
        <template #default>添加新分组</template>
-      </a-button>
+      </Button>
    </div>

    <a-table
@ -45,18 +45,18 @@
      <template #empty>
        <NoData>
          <span class="s1 mb-16px">暂无分组</span>
-          <a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
+          <Button type="primary" class="mb-16px" size="middle" @click="openAdd"
            ><template #icon>
-              <icon-plus size="16"/>
+              <icon-plus size="16" class="mr-8px"/>
            </template>
            <template #default>去添加</template>
-          </a-button>
+          </Button>
        </NoData>
      </template>
      <template #action="{ record }">
        <div class="flex items-center">
          <img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
-          <a-button type="primary" @click="openEdit(record)">编辑</a-button>
+          <Button type="primary" size="small" @click="openEdit(record)">编辑</Button>
        </div>
      </template>
    </a-table>
@ -81,6 +81,7 @@

 <script setup>
 import { ref, reactive, onMounted } from 'vue';
+import { Button } from 'ant-design-vue';
 import { getAccountGroup } from '@/api/all/propertyMarketing';
 import { exactFormatTime } from '@/utils/tools';

--- a/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
@ -21,13 +21,14 @@
      </div>
    </div>
    <template #footer>
-      <a-button size="large" @click="close">取消</a-button>
-      <a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
+      <Button size="large" @click="close">取消</Button>
+      <Button type="primary" size="large" @click="handleOk"> 去授权 </Button>
    </template>
  </a-modal>
 </template>

 <script setup>
+import { Button } from 'ant-design-vue';
 import { defineExpose } from 'vue';

 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
--- a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
@ -92,19 +92,19 @@
    </div>

    <template #footer>
-      <a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
+      <Button v-if="modalState === MODAL_STATE.QR_READY" size="large" @click="handleRefreshQrCode">
        重新生成
-      </a-button>
-      <a-button
+      </Button>
+      <Button
        v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
        size="large"
        @click="close"
      >
        取消
-      </a-button>
-      <a-button type="primary" size="large" @click="handleOk">
+      </Button>
+      <Button type="primary" size="large" @click="handleOk">
        {{ confirmBtnText }}
-      </a-button>
+      </Button>
    </template>
  </a-modal>

@ -114,6 +114,7 @@
 <script setup>
 import { defineExpose, ref, computed } from 'vue';
 import { Message as AMessage } from '@arco-design/web-vue';
+import { Button } from 'ant-design-vue';
 import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
 import SyncDataModal from '../sync-data-modal';

--- a/src/views/property-marketing/media-account/account-manage/components/sync-data-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/sync-data-modal/index.vue
@ -20,14 +20,15 @@
      </div>
    </div>
    <template #footer>
-      <a-button size="large" @click="close">稍后再说</a-button>
-      <a-button type="primary" size="large" @click="handleOk"> 更新数据 </a-button>
+      <Button size="large" @click="close">稍后再说</Button>
+      <Button type="primary" size="large" @click="handleOk"> 更新数据 </Button>
    </template>
  </a-modal>
 </template>

 <script setup>
 import { defineExpose } from 'vue';
+import { Button } from 'ant-design-vue';

 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
@ -12,14 +12,15 @@
      </a-form-item>
    </a-form>
    <template #footer>
-      <a-button @click="onClose">取消</a-button>
-      <a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
+      <Button @click="onClose">取消</Button>
+      <Button type="primary" class="ml-16px" @click="onSubmit">确认</Button>
    </template>
  </a-modal>
 </template>

 <script setup>
 import { ref, nextTick } from 'vue';
+import { Button } from 'ant-design-vue';
 import { postAccountTags, putTag } from '@/api/all/propertyMarketing';

 const emits = defineEmits(['success', 'close']);
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue
@ -9,9 +9,9 @@
      <span>确认删除 "{{ tagName }}" 这个标签吗？</span>
    </div>
    <template #footer>
-      <a-button size="large" @click="onClose">取消</a-button>
-      <a-button type="primary" class="ml-16px danger-btn" 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>
@ -19,6 +19,7 @@

 <script setup>
 import { ref } from 'vue';
+import { Button } from 'ant-design-vue';
 import { deleteTag } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/index.vue
@ -23,12 +23,12 @@
          </a-input>
        </a-space>
      </div>
-      <a-button type="primary" size="medium" @click="openAdd">
+      <Button type="primary" @click="openAdd">
        <template #icon>
-          <icon-plus size="16" />
+          <icon-plus size="16" class="mr-8px"/>
        </template>
        <template #default>添加新标签</template>
-      </a-button>
+      </Button>
    </div>

    <div class="h-300px">
@ -43,12 +43,12 @@
      <template v-else>
        <NoData>
          <span class="s1 mb-16px">暂无标签</span>
-          <a-button type="primary" class="mb-16px" size="medium" @click="openAdd">
+          <Button type="primary" class="mb-16px" @click="openAdd">
            <template #icon>
-              <icon-plus size="16" />
+              <icon-plus size="16" class="mr-8px"/>
            </template>
            <template #default>去添加</template>
-          </a-button>
+          </Button>
        </NoData>
      </template>
    </div>
@ -60,6 +60,7 @@

 <script setup>
 import { ref } from 'vue';
+import { Button } from 'ant-design-vue';
 import { getTagsList } from '@/api/all/propertyMarketing';

 import AddTag from './add-tag.vue';