feat: 定义button，form等组件样式

src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue

@@ -3,27 +3,27 @@
  * @Date: 2025-06-26 17:44:16
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
     :title="isBatch ? '批量删除账号' : '删除账号'"
     width="400px"
-    modal-class="account-manage-modal"
-    @close="onClose"
+    wrapClassName="account-manage-modal"
+    @cancel="onClose"
+    centered
   >
     <div class="flex items-center">
       <img :src="icon1" width="20" height="20" class="mr-12px" />
       <span>确认删除 {{ accountName }} 这个账号吗？</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 @click="onClose">取消</Button>
+      <Button type="primary" class="ml-16px" danger @click="onDelete">确认删除</Button>
     </template>
-  </a-modal>
+  </Modal>
 </template>
 
 <script setup>
+import { Modal, Button } from 'ant-design-vue';
 import { ref } from 'vue';
 import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';

src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue

@@ -3,73 +3,87 @@
  * @Date: 2025-06-27 09:35:49
 -->
 <template>
-  <a-modal
-    v-model:visible="visible"
+  <Modal
+    v-model:open="visible"
     title="批量分组"
-    modal-class="batch-group-modal"
+    wrapClassName="batch-group-modal"
     width="800px"
-    :mask-closable="false"
+    :maskClosable="false"
+    centered
   >
     <div class="mb-16px t1">
       {{ `已选${accountGroupList.length}个账号` }}
     </div>
-    <a-form ref="formRef" :model="form" layout="horizontal" auto-label-width>
-      <a-form-item label="编辑方式" required>
-        <a-radio-group v-model="editType">
-          <a-radio value="all">
+    <Form ref="formRef" :model="form" layout="horizontal">
+      <FormItem label="编辑方式" required>
+        <Radio.Group v-model:value="editType">
+          <Radio value="all">
             <div class="flex items-center">
               <span>统一编辑</span>
-              <a-tooltip content="原分组将被清除，统一加入新分组。">
+              <Tooltip title="原分组将被清除，统一加入新分组。">
                 <img :src="icon1" alt="icon" class="ml-2px" width="14" height="14" />
-              </a-tooltip>
+              </Tooltip>
             </div>
-          </a-radio>
-          <a-radio value="each">分别编辑</a-radio>
-        </a-radio-group>
-      </a-form-item>
-      <a-form-item label="选择分组" required>
+          </Radio>
+          <Radio value="each">分别编辑</Radio>
+        </Radio.Group>
+      </FormItem>
+      <FormItem label="选择分组" required>
         <template v-if="editType === 'all'">
           <div class="flex items-center w-100%">
             <CommonSelect v-model="form.group_id" :options="groupOptions" :multiple="false" class="flex-1" />
           </div>
         </template>
-      </a-form-item>
+      </FormItem>
 
       <!-- 分别编辑 -->
       <template v-if="editType === 'each'">
-        <a-table :data="accountGroupList" :pagination="false" row-key="id" class="w-100%" column-resizable>
-          <template #columns>
-            <a-table-column title="账号名称" data-index="name" width="200">
-              <template #cell="{ record }">
-                <span>{{ record.name || '-' }}</span>
-              </template>
-            </a-table-column>
-            <a-table-column title="选择分组" data-index="group_id">
-              <template #cell="{ record }">
-                <div class="flex items-center w-100%">
-                  <CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
-                </div>
-              </template>
-            </a-table-column>
+        <Table
+          :dataSource="accountGroupList"
+          :columns="columns"
+          :pagination="false"
+          rowKey="id"
+          bordered
+          :showSorterTooltip="false"
+          @resizeColumn="handleResizeColumn"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'name'">
+              <span>{{ record.name || '-' }}</span>
+            </template>
+            <template v-else-if="column.dataIndex === 'group_id'">
+              <div class="flex items-center w-100%">
+                <CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
+              </div>
+            </template>
           </template>
-        </a-table>
+        </Table>
       </template>
-    </a-form>
+    </Form>
     <template #footer>
-      <a-button size="large" @click="onClose">取消</a-button>
-      <a-button type="primary" size="large" @click="onSubmit">确定</a-button>
+      <Button @click="onClose">取消</Button>
+      <Button type="primary" @click="onSubmit">确定</Button>
     </template>
-  </a-modal>
+  </Modal>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, computed } from 'vue';
+import { Modal, Form, FormItem, Radio, Tooltip, Button, Table } from 'ant-design-vue';
 import { fetchAccountGroups, batchPutGroup } from '@/api/all/propertyMarketing';
 import CommonSelect from '@/components/common-select';
 
 import icon1 from '@/assets/img/icon-question.png';
 
-// [{id, name, group_id: null}]
+const columns = ref([
+  { title: '账号名称', dataIndex: 'name', width: 100, minWidth: 100, resizable: true },
+  { title: '选择分组', dataIndex: 'group_id' },
+]);
+
+const handleResizeColumn = (w, col) => {
+  const idx = columns.value.findIndex((c) => c.dataIndex === col.dataIndex);
+  if (idx !== -1) columns.value[idx].width = w;
+};
 
 const emits = defineEmits(['update']);
 const visible = ref(false);
@@ -102,7 +116,6 @@ const getTags = async () => {
 
 const onClose = () => {
   visible.value = false;
-  form.group_id = null;
 };
 
 const onSubmit = async () => {

src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss

@@ -2,7 +2,7 @@
 
 .batch-group-modal {
   border-radius: 8px;
-  .arco-modal-body {
+  .ant-modal-body {
     // min-height: 200px;
     .t1 {
       color: var(--Text-3, #737478);