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

src/styles/components/ant-button.scss

@@ -0,0 +1,161 @@
+.ant-btn {
+  border-radius: 2px !important;
+  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;
+  padding: 0 16px;
+  &.ant-btn-lg {
+    height: 36px;
+    padding: 0 20px;
+  }
+  &.ant-btn-sm {
+    padding: 0 16px;
+    height: 28px;
+  }
+}
+.ant-btn-default {
+  &:disabled {
+    border-color: #f2f3f5 !important;
+    color: #b1b2b5 !important;
+    background-color: #fff !important;
+  }
+  &:not(:disabled) {
+    &:hover {
+      border-color: #e6e6e8 !important;
+      color: #737478 !important;
+    }
+  }
+  &.ant-btn-dangerous {
+    border-color: $color-error !important;
+    color: $color-error !important;
+    &:disabled {
+      background-color: $color-error-3 !important;
+    }
+    &:not(:disabled) {
+      &:hover {
+        border-color: $color-error-5 !important;
+        color: $color-error-5 !important;
+      }
+    }
+  }
+}
+
+.ant-btn-primary {
+  background-color: $color-primary !important;
+  border-color: transparent !important;
+  color: #fff !important;
+  &:disabled {
+    color: #fff !important;
+    border-color: transparent !important;
+    background-color: $color-primary-3 !important;
+  }
+  &:not(:disabled) {
+    &:hover {
+      color: #fff !important;
+      border-color: transparent !important;
+      background-color: $color-primary-5 !important;
+    }
+    &:focus-visible {
+      outline: none;
+      outline-offset: unset;
+    }
+  }
+  &.ant-btn-dangerous {
+    background-color: $color-error !important;
+    &:disabled {
+      background-color: $color-error-3 !important;
+    }
+    &:not(:disabled) {
+      &:hover {
+        background-color: $color-error-5 !important;
+      }
+    }
+  }
+}
+
+.ant-btn-outline {
+  border: 1px solid $color-primary !important;
+  color: $color-primary !important;
+  &:disabled {
+    border-color: $color-primary-3 !important;
+    color: $color-primary-3 !important;
+  }
+  &:not(:disabled) {
+    &:hover {
+      border-color: $color-primary-5 !important;
+      color: $color-primary-5 !important;
+    }
+  }
+  &.ant-btn-dangerous {
+    border: 1px solid $color-error !important;
+    color: $color-error !important;
+    &:disabled {
+      border-color: $color-error-3 !important;
+      color: $color-error-3 !important;
+    }
+    &:not(:disabled) {
+      &:hover {
+        border-color: $color-error-5 !important;
+        color: $color-error-5 !important;
+      }
+    }
+  }
+}
+
+.ant-btn-text {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  color: $color-primary !important;
+  &:disabled {
+    color: $color-primary-2 !important;
+    border-color: transparent !important;
+  }
+  &:not(:disabled) {
+    &:hover {
+      color: $color-primary-5 !important;
+      border-color: transparent !important;
+    }
+  }
+  &.ant-btn-dangerous {
+    color: $color-error !important;
+    &:disabled {
+      color: $color-error-2 !important;
+    }
+    &:not(:disabled) {
+      &:hover {
+        color: $color-error-5 !important;
+      }
+    }
+  }
+}
+
+.ant-btn-link {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  color: $color-primary !important;
+  &:disabled {
+    color: $color-primary-2 !important;
+    border-color: transparent !important;
+  }
+  &:not(:disabled) {
+    &:hover {
+      color: $color-primary-5 !important;
+      border-color: transparent !important;
+    }
+  }
+  &.ant-btn-dangerous {
+    color: $color-error !important;
+    &:disabled {
+      color: $color-error-2 !important;
+    }
+    &:not(:disabled) {
+      &:hover {
+        color: $color-error-5 !important;
+      }
+    }
+  }
+}

src/styles/components/ant-form.scss

@@ -0,0 +1,34 @@
+.ant-form {
+  .ant-form-item {
+    margin-bottom: 0;
+    &:not(:last-child) {
+      margin-bottom: 16px !important;
+    }
+    .ant-form-item-row {
+      .ant-form-item-label {
+        margin-right: 12px;
+        > label {
+          color: #211f24;
+          font-family: $font-family-regular;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px;
+          &::before {
+            margin-inline-end: unset;
+            color: #f64b31;
+            margin-right: 4px;
+            font-size: 14px;
+            font-family: $font-family-regular;
+            line-height: 22px;
+          }
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+    .ant-form-item-control {
+    }
+  }
+}

src/styles/components/ant-modal.scss

@@ -0,0 +1,42 @@
+.ant-modal {
+  .ant-modal-content {
+    padding: 0;
+    .ant-modal-header {
+      border-bottom: 1px solid var(--Border-1, #d7d7d9);
+      height: 56px;
+      padding: 0 20px;
+      margin-bottom: 0;
+      color: inherit;
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      .ant-modal-title {
+        font-family: $font-family-medium;
+        color: #211f24;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        justify-content: flex-start;
+      }
+    }
+    .ant-modal-body {
+      padding: 24px 20px;
+    }
+    .ant-modal-footer {
+      margin-top: 0;
+      display: flex;
+      height: 64px;
+      padding: 0px 20px;
+      justify-content: flex-end;
+      align-items: center;
+      border-top: 1px solid var(--Border-1, #d7d7d9);
+      .ant-btn {
+        &:not(:nth-child(1)) {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+}

src/styles/components/ant-radio.scss

@@ -0,0 +1,37 @@
+.ant-radio-group {
+}
+.ant-radio-wrapper {
+  margin-right: 24px;
+  .ant-radio {
+    .ant-radio-inner {
+      width: 14px;
+      height: 14px;
+      background-color: #fff;
+      border: 2px solid var(--Border-1, #d7d7d9);
+      &::after {
+        display: none !important;
+      }
+    }
+    &.ant-radio-checked {
+      .ant-radio-inner {
+        border: 4px solid var(--Brand-6, #6d4cfe);
+        background-color: #fff;
+      }
+    }
+    &.ant-radio-disabled {
+      .ant-radio-inner {
+        border: 2px solid var(--Border-1, #d7d7d9);
+        background-color: #f2f3f5;
+      }
+    }
+    &.ant-radio-checked.ant-radio-disabled {
+      .ant-radio-inner {
+        border: 4px solid var(--Brand-6, #a794fe);
+        background-color: #fff;
+      }
+    }
+  }
+  span.ant-radio + * {
+    padding: 0 0 0 8px;
+  }
+}

src/styles/components/ant-table.scss

@@ -0,0 +1,72 @@
+.ant-table-wrapper {
+  .ant-table {
+    border-radius: 0;
+    font-family: $font-family-regular;
+    @mixin table-cell-text {
+      color: var(--Text-1, #211f24);
+      font-family: $font-family-regular;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    .ant-table-container {
+      border: none !important;
+      height: 100%;
+      .ant-table-content {
+        .ant-table-thead {
+          > tr {
+            .ant-table-cell {
+              padding: 13px 16px;
+              background: var(--BG-100, #f7f8fa);
+              border-start-start-radius: 0 !important;
+              border-start-end-radius: 0 !important;
+              @include table-cell-text;
+              font-family: 'PingFangSC-Medium';
+              .ant-table-column-sorters {
+                justify-content: normal;
+                .ant-table-column-title {
+                  flex: none;
+                }
+                .ant-table-column-sorter {
+                  margin-left: 8px;
+                  color: #939499;
+                  line-height: normal;
+                  .anticon.active {
+                    color: $color-primary;
+                  }
+                }
+              }
+            }
+          }
+        }
+        .ant-table-tbody {
+          .ant-table-row {
+            .ant-table-cell {
+              padding: 11px 16px;
+              @include table-cell-text;
+            }
+          }
+        }
+      }
+    }
+  }
+  .ant-table-bordered {
+    .ant-table-container {
+      .ant-table-thead {
+        .ant-table-cell {
+          border-inline-end: none !important ;
+          border-bottom: 1px solid var(--Border-1, #d7d7d9);
+        }
+      }
+      .ant-table-tbody {
+        .ant-table-row {
+          .ant-table-cell {
+            border-inline-end: none !important;
+            border-bottom: 1px solid var(--Border-1, #e6e6e8);
+          }
+        }
+      }
+    }
+  }
+}

src/styles/components/index.scss

@@ -11,3 +11,9 @@
 @import "./steps.scss";
 @import "./form.scss";
 @import "./chat-sender.scss";
+
+@import "./ant-modal.scss";
+@import "./ant-radio.scss";
+@import "./ant-form.scss";
+@import "./ant-button.scss";
+@import "./ant-table.scss";

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
+  <Modal
-    v-model:visible="visible"
+    v-model:open="visible"
     :title="isBatch ? '批量删除账号' : '删除账号'"
     width="400px"
-    modal-class="account-manage-modal"
+    wrapClassName="account-manage-modal"
-    @close="onClose"
+    @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>
+      <Button @click="onClose">取消</Button>
-      <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
+      <Button type="primary" class="ml-16px" danger @click="onDelete">确认删除</Button>
-        >确认删除</a-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
+  <Modal
-    v-model:visible="visible"
+    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>
+    <Form ref="formRef" :model="form" layout="horizontal">
-      <a-form-item label="编辑方式" required>
+      <FormItem label="编辑方式" required>
-        <a-radio-group v-model="editType">
+        <Radio.Group v-model:value="editType">
-          <a-radio value="all">
+          <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>
+          </Radio>
-          <a-radio value="each">分别编辑</a-radio>
+          <Radio value="each">分别编辑</Radio>
-        </a-radio-group>
+        </Radio.Group>
-      </a-form-item>
+      </FormItem>
-      <a-form-item label="选择分组" required>
+      <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>
+        <Table
-          <template #columns>
+          :dataSource="accountGroupList"
-            <a-table-column title="账号名称" data-index="name" width="200">
+          :columns="columns"
-              <template #cell="{ record }">
+          :pagination="false"
-                <span>{{ record.name || '-' }}</span>
+          rowKey="id"
-              </template>
+          bordered
-            </a-table-column>
+          :showSorterTooltip="false"
-            <a-table-column title="选择分组" data-index="group_id">
+          @resizeColumn="handleResizeColumn"
-              <template #cell="{ record }">
+        >
-                <div class="flex items-center w-100%">
+          <template #bodyCell="{ column, record }">
-                  <CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
+            <template v-if="column.dataIndex === 'name'">
-                </div>
+              <span>{{ record.name || '-' }}</span>
-              </template>
+            </template>
-            </a-table-column>
+            <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>
+      <Button @click="onClose">取消</Button>
-      <a-button type="primary" size="large" @click="onSubmit">确定</a-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);