feat: 导入提示弹窗

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

@@ -2,172 +2,23 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-25 17:51:46
 -->
-<template>
+<script lang="jsx">
-  <a-modal
+import { ref, computed } from 'vue';
-    v-model:visible="visible"
+import {
-    :title="isEdit ? '编辑账号' : '添加账号'"
+  Modal,
-    modal-class="add-account-modal"
+  Form,
-    width="500px"
+  FormItem,
-    :mask-closable="false"
+  Input,
-    @close="onClose"
+  RadioGroup,
-  >
+  Radio,
-    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+  Upload,
-      <a-form-item v-if="!isEdit" label="上传方式" required>
+  Button,
-        <a-radio-group v-model="uploadType">
+  Switch,
-          <a-radio value="manual">手动添加账号</a-radio>
+  Tooltip,
-          <a-radio value="batch">批量导入账号</a-radio>
+  Notification,
-        </a-radio-group>
+  Message as AMessage,
-      </a-form-item>
+  Textarea,
-
+} from '@arco-design/web-vue';
-      <!-- 批量导入账号模式下的内容 -->
-      <template v-if="isBatchImport">
-        <a-form-item label="账户文件" required>
-          <!-- 默认状态 -->
-          <div class="upload-block">
-            <template v-if="uploadStatus === UploadStatus.DEFAULT">
-              <a-upload
-                ref="uploadRef"
-                action="/"
-                draggable
-                :custom-request="handleUpload"
-                accept=".xlsx,.xls"
-                :show-file-list="false"
-              >
-                <template #upload-button>
-                  <div class="upload-box">
-                    <icon-plus size="14" class="mb-16px" />
-                    <span class="text mb-4px">点击或拖拽文件到此处上传</span>
-                    <span class="tip">支持 xls, xlsx格式</span>
-                  </div>
-                </template>
-              </a-upload>
-            </template>
-            <template v-else>
-              <div class="flex items-center">
-                <div
-                  class="flex items-center justify-between py-9px px-12px flex-1 import-row"
-                  :class="{
-                    error: uploadStatus === UploadStatus.ERROR,
-                  }"
-                >
-                  <div class="flex items-center">
-                    <icon-file size="16" class="flex-shrink-0" />
-                    <span class="name ml-8px">{{ fileName }}</span>
-                  </div>
-                  <span
-                    v-if="uploadStatus === UploadStatus.ERROR"
-                    class="upload-error flex-shrink-0"
-                    @click="handleBatchImport"
-                  >
-                    点击重试
-                  </span>
-                </div>
-                <img :src="icon2" width="16" height="16" class="cursor-pointer ml-12px" @click="removeFile" />
-              </div>
-            </template>
-            <div class="flex items-center cursor-pointer mt-8px" @click="handleDownloadTemplate">
-              <img :src="icon1" width="16" height="16" class="mr-4px" />
-              <span class="dt">下载账户导入模板.xlsx</span>
-            </div>
-          </div>
-        </a-form-item>
-      </template>
-
-      <!-- 手动添加账号 -->
-      <template v-else>
-        <template v-if="isEdit">
-          <a-form-item label="账号名称" field="name">
-            <a-input v-model="form.name" placeholder="请输入..." size="large" disabled />
-          </a-form-item>
-          <a-form-item label="账号ID" field="account_id">
-            <a-input v-model="form.account_id" placeholder="请输入..." size="large" disabled />
-          </a-form-item>
-          <a-form-item label="状态" field="status">
-            <StatusBox :status="form.status" />
-          </a-form-item>
-        </template>
-
-        <a-form-item label="手机号码" field="mobile" required>
-          <a-input v-model="form.mobile" placeholder="请输入..." size="large" />
-        </a-form-item>
-        <a-form-item label="运营人员" field="operator_name" required>
-          <a-input v-model="form.operator_name" placeholder="请输入..." class="w-240px" size="large" />
-        </a-form-item>
-        <a-form-item label="运营平台" :required="!isEdit">
-          <img v-if="isEdit" :src="form.platform === 0 ? icon3 : icon4" width="24" height="24" />
-          <a-radio-group v-else v-model="form.platform">
-            <a-radio :value="0">抖音</a-radio>
-            <a-radio :value="1">小红书</a-radio>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item label="号码持有人" field="holder_name">
-          <a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
-        </a-form-item>
-        <a-form-item label="选择分组">
-          <GroupSelect
-            v-model="form.group_id"
-            :multiple="false"
-            :options="groupOptions"
-            placeholder="请选择…"
-            size="large"
-          />
-        </a-form-item>
-        <a-form-item label="选择标签">
-          <TagSelect v-model="form.tag_ids" :options="tagOptions" placeholder="请选择…" size="large" />
-        </a-form-item>
-        <a-form-item label="笔记链接" field="end_work_link">
-          <template #label>
-            <span class="label">笔记链接</span>
-            <a-tooltip content="平台将从该笔记“之后”的内容开始同步，该笔记及更早的数据均不采集">
-              <icon-question-circle size="14" class="ml-4px color-#737478" />
-            </a-tooltip>
-          </template>
-          <a-textarea
-            v-model="form.end_work_link"
-            placeholder="请输入..."
-            size="large"
-            max-length="72"
-            :auto-size="{ minRows: 3, maxRows: 5 }"
-          />
-        </a-form-item>
-        <template v-if="!isEdit">
-          <a-form-item label="Cookie值">
-            <template #label>
-              <span class="label">Cookie值</span>
-              <a-tooltip content="开启后可直接填写 Cookie，无需扫码授权">
-                <icon-question-circle size="14" class="ml-4px color-#737478" />
-              </a-tooltip>
-            </template>
-            <a-switch v-model="isCustomCookie" size="large" />
-          </a-form-item>
-          <a-form-item v-if="isCustomCookie" label="" field="cookie">
-            <a-textarea
-              v-model="form.cookie"
-              placeholder="请输入..."
-              size="large"
-              max-length="72"
-              :auto-size="{ minRows: 3, maxRows: 5 }"
-            />
-          </a-form-item>
-        </template>
-      </template>
-    </a-form>
-    <template #footer>
-      <a-button size="large" class="cancel-btn" @click="onClose">取消</a-button>
-      <a-button type="primary" size="large" @click="onSubmit">
-        {{ confirmBtnText }}
-      </a-button>
-    </template>
-
-    <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
-    <ImportPromptModal ref="importPromptModalRef" />
-  </a-modal>
-
-  <SyncDataModal ref="syncDataModalRef" />
-</template>
-
-<script setup>
-import { ref, reactive, onMounted } from 'vue';
 import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
 import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
 import AuthorizedAccountModal from '../authorized-account-modal';
@@ -175,6 +26,12 @@ import ImportPromptModal from '../import-prompt-modal';
 import StatusBox from '../status-box';
 import SyncDataModal from '../sync-data-modal';
 
+import icon1 from '@/assets/img/media-account/icon-download.png';
+import icon2 from '@/assets/img/media-account/icon-delete.png';
+import icon3 from '@/assets/img/media-account/icon-dy.png';
+import icon4 from '@/assets/img/media-account/icon-xhs.png';
+import icon5 from '@/assets/img/media-account/icon-warn-1.png';
+import icon6 from '@/assets/img/media-account/icon-success.png';
 import {
   fetchAccountTags,
   fetchAccountGroups,
@@ -185,13 +42,6 @@ import {
   batchMediaAccounts,
 } from '@/api/all/propertyMarketing';
 
-import icon1 from '@/assets/img/media-account/icon-download.png';
-import icon2 from '@/assets/img/media-account/icon-delete.png';
-import icon3 from '@/assets/img/media-account/icon-dy.png';
-import icon4 from '@/assets/img/media-account/icon-xhs.png';
-
-const emits = defineEmits(['update']);
-
 const UploadStatus = {
   DEFAULT: 'default',
   WAITING: 'waiting',
@@ -208,209 +58,406 @@ const INITIAL_FORM = {
   cookie: undefined,
 };
 
-const groupOptions = ref([]);
+export default {
-const tagOptions = ref([]);
+  setup(props, { emit, expose }) {
-const visible = ref(false);
+    const groupOptions = ref([]);
-const uploadType = ref('manual');
+    const tagOptions = ref([]);
-const uploadStatus = ref(UploadStatus.DEFAULT);
+    const visible = ref(false);
-const id = ref('');
+    const uploadType = ref('manual');
-const isEdit = ref(false);
+    const uploadStatus = ref(UploadStatus.DEFAULT);
-const fileName = ref('');
+    const id = ref('');
-const formRef = ref();
+    const isEdit = ref(false);
-const file = ref(null);
+    const fileName = ref('');
-const authorizedAccountModalRef = ref(null);
+    const formRef = ref();
-const importPromptModalRef = ref(null);
+    const file = ref(null);
-const uploadRef = ref(null);
+    const authorizedAccountModalRef = ref(null);
-const isCustomCookie = ref(false);
+    const importPromptModalRef = ref(null);
-const form = ref(cloneDeep(INITIAL_FORM));
+    const uploadRef = ref(null);
-const syncDataModalRef = ref(null);
+    const isCustomCookie = ref(false);
+    const form = ref({ ...INITIAL_FORM });
+    const syncDataModalRef = ref(null);
+    const importLoading = ref(false);
+    const CustomNotificationVisible = ref(false);
 
-const rules = {
+    const rules = {
-  mobile: [
+      mobile: [
-    {
+        {
-      required: true,
+          required: true,
-      message: '请填写手机号',
+          message: '请填写手机号',
-      trigger: ['blur', 'change'],
+          trigger: ['blur', 'change'],
-    },
+        },
-    {
+        {
-      validator: (value, callback) => {
+          validator: (value, callback) => {
-        if (!/^1[3-9]\d{9}$/.test(value)) {
+            if (!/^1[3-9]\d{9}$/.test(value)) {
-          callback('手机号格式不正确');
+              callback('手机号格式不正确');
-        } else {
+            } else {
-          callback();
+              callback();
-        }
+            }
-      },
+          },
-      trigger: ['blur', 'change'],
+          trigger: ['blur', 'change'],
-    },
+        },
-  ],
+      ],
-  operator_name: [{ required: true, message: '请输入运营人员' }],
+      operator_name: [{ required: true, message: '请输入运营人员' }],
-  // holder_name: [{ required: true, message: '请输入号码持有人' }],
-};
-
-const isBatchImport = computed(() => uploadType.value === 'batch');
-const confirmBtnText = computed(() => {
-  if (isBatchImport.value) {
-    return '确定导入';
-  } else if (isEdit.value) {
-    return '确定';
-  } else {
-    return isCustomCookie.value ? '确认添加' : '生成授权码';
-  }
-});
-
-// 获取分组数据
-const getGroups = async () => {
-  const { code, data } = await fetchAccountGroups();
-  if (code === 200) {
-    groupOptions.value = data;
-  }
-};
-
-// 获取标签数据
-const getTags = async () => {
-  const { code, data } = await fetchAccountTags();
-  if (code === 200) {
-    tagOptions.value = data;
-  }
-};
-
-function handleUpload(option) {
-  const { fileItem } = option;
-
-  uploadStatus.value = UploadStatus.WAITING;
-
-  file.value = fileItem.file;
-  fileName.value = fileItem.name;
-}
-
-function removeFile() {
-  fileName.value = '';
-  file.value = null;
-  uploadStatus.value = UploadStatus.DEFAULT;
-}
-
-const reset = () => {
-  formRef.value.resetFields();
-  formRef.value.clearValidate();
-
-  form.value = cloneDeep(INITIAL_FORM);
-  fileName.value = '';
-  file.value = null;
-  isEdit.value = false;
-  isCustomCookie.value = false;
-  uploadStatus.value = UploadStatus.DEFAULT;
-  uploadType.value = 'manual';
-};
-const onClose = () => {
-  reset();
-  visible.value = false;
-};
-
-const open = (accountId = '') => {
-  id.value = accountId;
-  isEdit.value = !!accountId;
-
-  if (accountId) {
-    getAccountDetail();
-  }
-  getGroups();
-  getTags();
-
-  visible.value = true;
-};
-
-const getAccountDetail = async () => {
-  const { code, data } = await getMediaAccountsDetail(id.value);
-  if (code === 200) {
-    form.value = {
-      ...data,
-      group_id: data.group_id === 0 ? undefined : data.group_id,
     };
-  }
-};
 
-const handleBatchImport = async () => {
+    const isBatchImport = computed(() => uploadType.value === 'batch');
-  try {
+    const confirmBtnText = computed(() => {
-    const formData = new FormData();
+      if (isBatchImport.value) {
-    formData.append('file', file.value);
+        return importLoading.value ? '导入中' : '确定导入';
-
+      } else if (isEdit.value) {
-    const { code } = await batchMediaAccounts(formData, {
+        return '确定';
-      headers: {
+      } else {
-        'Content-Type': 'multipart/form-data',
+        return isCustomCookie.value ? '确认添加' : '生成授权码';
-      },
+      }
     });
-    if (code === 200) {
+
-      AMessage.success('导入成功');
+    const getGroups = async () => {
-      emits('update');
+      const { code, data } = await fetchAccountGroups();
-      onClose();
+      if (code === 200) {
-      importPromptModalRef.value.open();
+        groupOptions.value = data;
-    } else {
+      }
-      uploadStatus.value = UploadStatus.ERROR;
+    };
+    const getTags = async () => {
+      const { code, data } = await fetchAccountTags();
+      if (code === 200) {
+        tagOptions.value = data;
+      }
+    };
+    function handleUpload(option) {
+      const { fileItem } = option;
+      uploadStatus.value = UploadStatus.WAITING;
+      file.value = fileItem.file;
+      fileName.value = fileItem.name;
     }
-  } catch (error) {
+    function removeFile() {
-    uploadStatus.value = UploadStatus.ERROR;
+      fileName.value = '';
-  }
+      file.value = null;
-};
+      uploadStatus.value = UploadStatus.DEFAULT;
-
-const handleAddAccount = async () => {
-  const _isCustomCookie = isCustomCookie.value;
-  const { code, data } = await postMediaAccounts({
-    ...form.value,
-    cookie: _isCustomCookie ? form.value.cookie : undefined,
-  });
-  if (code === 200) {
-    emits('update');
-    onClose();
-
-    const { id, platform } = data;
-    if (_isCustomCookie) {
-      syncDataModalRef.value.open(id);
-    } else {
-      startAuthorized(id, platform);
     }
-  }
+    const reset = () => {
-};
+      formRef.value?.resetFields();
+      formRef.value?.clearValidate();
+      form.value = { ...INITIAL_FORM };
+      fileName.value = '';
+      file.value = null;
+      isEdit.value = false;
+      importLoading.value = false;
+      isCustomCookie.value = false;
+      uploadStatus.value = UploadStatus.DEFAULT;
+      uploadType.value = 'manual';
+    };
+    const onClose = () => {
+      reset();
+      visible.value = false;
+    };
+    const open = (accountId = '') => {
+      id.value = accountId;
+      isEdit.value = !!accountId;
+      if (accountId) {
+        getAccountDetail();
+      }
+      getGroups();
+      getTags();
+      visible.value = true;
+    };
+    const getAccountDetail = async () => {
+      const { code, data } = await getMediaAccountsDetail(id.value);
+      if (code === 200) {
+        form.value = {
+          ...data,
+          group_id: data.group_id === 0 ? undefined : data.group_id,
+        };
+      }
+    };
+    const handleBatchImport = async () => {
+      try {
+        if (!file.value) {
+          AMessage.warning('请上传要导入的文件');
+          return;
+        }
+        importLoading.value = true;
+        const formData = new FormData();
+        formData.append('file', file.value);
+        const { code } = await batchMediaAccounts(formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        });
+        if (code === 200) {
+          AMessage.success('导入成功');
+          emit('update');
+          onClose();
 
-const handleEditAccount = async () => {
+          const ID = 'IMPORT-ACCOUNT';
-  const { code } = await putMediaAccounts({ id: id.value, ...form.value });
+          renderNotification(ID);
-  if (code === 200) {
+          importPromptModalRef.value.open();
-    AMessage.success('修改成功');
+        } else {
-    emits('update');
+          uploadStatus.value = UploadStatus.ERROR;
-    onClose();
+        }
-  }
+      } catch (error) {
-};
+        uploadStatus.value = UploadStatus.ERROR;
-
+      }
-async function onSubmit() {
+    };
-  if (isBatchImport.value) {
+    const handleAddAccount = async () => {
-    handleBatchImport();
+      const _isCustomCookie = isCustomCookie.value;
-    return;
+      const { code, data } = await postMediaAccounts({
-  }
+        ...form.value,
-
+        cookie: _isCustomCookie ? form.value.cookie : undefined,
-  formRef.value.validate(async (errors) => {
+      });
-    if (!errors) {
+      if (code === 200) {
-      if (isCustomCookie.value && !form.value.cookie) {
+        emit('update');
-        AMessage.warning('请填写Cookie值');
+        onClose();
+        const { id: _id, platform } = data;
+        if (_isCustomCookie) {
+          syncDataModalRef.value.open(_id);
+        } else {
+          startAuthorized(_id, platform);
+        }
+      }
+    };
+    const handleEditAccount = async () => {
+      const { code } = await putMediaAccounts({ id: id.value, ...form.value });
+      if (code === 200) {
+        AMessage.success('修改成功');
+        emit('update');
+        onClose();
+      }
+    };
+    async function onSubmit() {
+      if (isBatchImport.value) {
+        handleBatchImport();
         return;
       }
-
+      formRef.value.validate(async (errors) => {
-      isEdit.value ? handleEditAccount() : handleAddAccount();
+        if (!errors) {
+          if (isCustomCookie.value && !form.value.cookie) {
+            AMessage.warning('请填写Cookie值');
+            return;
+          }
+          isEdit.value ? handleEditAccount() : handleAddAccount();
+        }
+      });
     }
-  });
+    const startAuthorized = (id, platform) => {
-}
+      authorizedAccountModalRef.value.open(id, platform);
+    };
+    const handleDownloadTemplate = async () => {
+      const { code, data } = await getTemplateUrl();
+      if (code === 200) {
+        window.open(data.download_url, '_blank');
+      }
+    };
+    const handleDownloadError = () => {
+      console.log('handleDownloadError');
+    };
+    const renderLabel = (label, tooltipContent) => {
+      return (
+        <>
+          <span class="label">{label}</span>
+          <Tooltip content={tooltipContent}>
+            <icon-question-circle size="14" class="ml-4px color-#737478" />
+          </Tooltip>
+        </>
+      );
+    };
+    const renderNotification = (id, hasError) => {
+      Notification.warning({
+        id,
+        showIcon: false,
+        closable: true,
+        content: (
+          <div>
+            <div class="flex items-center mb-4px">
+              <img src={hasError ? icon5 : icon6} width="16" height="16" class="mr-8px" />
+              <span class="text-16px lh-24px font-400 color-#211F24">导入完成</span>
+            </div>
+            <p class="text-14px lh-22px font-400 color-#211F24">
+              共导入 37 个账号，导入成功 32 个{hasError ? `，失败 <span class="color-#F64B31">5</span> 个` : ''}
+            </p>
+            {hasError && (
+              <div class="mt-8px text-14px lh-22px font-400 color-#6D4CFE cursor-pointer" onClick={handleDownloadError}>
+                下载问题表格
+              </div>
+            )}
+          </div>
+        ),
+        duration: 3000,
+        class: `px-16px py-16px w-400px rounded-2px ${hasError ? 'bg-#FFF7E5' : 'bg-#EBF7F2'}`,
+      });
+    };
 
-const startAuthorized = (id, platform) => {
+    expose({ open });
-  authorizedAccountModalRef.value.open(id, platform);
+
+    return () => (
+      <Modal
+        v-model:visible={visible.value}
+        title={isEdit.value ? '编辑账号' : '添加账号'}
+        modal-class="add-account-modal"
+        width="500px"
+        mask-closable={false}
+        onClose={onClose}
+        footer={null}
+      >
+        <Form ref={formRef} model={form.value} rules={rules} layout="horizontal" auto-label-width>
+          {!isEdit.value && (
+            <FormItem label="上传方式" required>
+              <RadioGroup v-model={uploadType.value}>
+                <Radio value="manual">手动添加账号</Radio>
+                <Radio value="batch">批量导入账号</Radio>
+              </RadioGroup>
+            </FormItem>
+          )}
+          {isBatchImport.value ? (
+            <FormItem label="账号文件" required>
+              <div class="upload-block">
+                {uploadStatus.value === UploadStatus.DEFAULT ? (
+                  <Upload
+                    ref={uploadRef}
+                    action="/"
+                    draggable
+                    custom-request={handleUpload}
+                    accept=".xlsx,.xls"
+                    show-file-list={false}
+                  >
+                    {{
+                      'upload-button': () => (
+                        <div class="upload-box">
+                          <span class="text mb-4px">点击或拖拽文件到此处上传</span>
+                          <span class="tip">支持 xls, xlsx格式</span>
+                        </div>
+                      ),
+                    }}
+                  </Upload>
+                ) : (
+                  <div class="flex items-center">
+                    <div
+                      class={[
+                        'flex items-center justify-between py-9px px-12px flex-1 import-row',
+                        { error: uploadStatus.value === UploadStatus.ERROR },
+                      ]}
+                    >
+                      <div class="flex items-center">
+                        <span class="name ml-8px">{fileName.value}</span>
+                      </div>
+                      {uploadStatus.value === UploadStatus.ERROR && (
+                        <span class="upload-error flex-shrink-0" onClick={handleBatchImport}>
+                          点击重试
+                        </span>
+                      )}
+                    </div>
+                    <img src={icon2} width="16" height="16" class="cursor-pointer ml-12px" onClick={removeFile} />
+                  </div>
+                )}
+                <div class="flex items-center cursor-pointer mt-8px" onClick={handleDownloadTemplate}>
+                  <img src={icon1} width="16" height="16" class="mr-4px" />
+                  <span class="dt">下载账户导入模板.xlsx</span>
+                </div>
+              </div>
+            </FormItem>
+          ) : (
+            <>
+              {isEdit.value && (
+                <>
+                  <FormItem label="账号名称" field="name">
+                    <Input v-model={form.value.name} placeholder="请输入..." size="large" disabled />
+                  </FormItem>
+                  <FormItem label="账号ID" field="account_id">
+                    <Input v-model={form.value.account_id} placeholder="请输入..." size="large" disabled />
+                  </FormItem>
+                  <FormItem label="状态" field="status">
+                    <StatusBox status={form.value.status} />
+                  </FormItem>
+                </>
+              )}
+              <FormItem label="手机号码" field="mobile" required>
+                <Input v-model={form.value.mobile} placeholder="请输入..." size="large" />
+              </FormItem>
+              <FormItem label="运营人员" field="operator_name" required>
+                <Input v-model={form.value.operator_name} placeholder="请输入..." class="w-240px" size="large" />
+              </FormItem>
+              <FormItem label="运营平台" required={!isEdit.value}>
+                {isEdit.value ? (
+                  <img src={form.value.platform === 0 ? icon3 : icon4} width="24" height="24" />
+                ) : (
+                  <RadioGroup v-model={form.value.platform}>
+                    <Radio value={0}>抖音</Radio>
+                    <Radio value={1}>小红书</Radio>
+                  </RadioGroup>
+                )}
+              </FormItem>
+              <FormItem label="号码持有人" field="holder_name">
+                <Input v-model={form.value.holder_name} placeholder="请输入..." class="w-240px" size="large" />
+              </FormItem>
+              <FormItem label="选择分组">
+                <GroupSelect
+                  v-model={form.value.group_id}
+                  multiple={false}
+                  options={groupOptions.value}
+                  placeholder="请选择…"
+                  size="large"
+                />
+              </FormItem>
+              <FormItem label="选择标签">
+                <TagSelect v-model={form.value.tag_ids} options={tagOptions.value} placeholder="请选择…" size="large" />
+              </FormItem>
+              <FormItem
+                label="笔记链接"
+                field="end_work_link"
+                v-slots={{
+                  label: () =>
+                    renderLabel('笔记链接', '平台将从该笔记“之后”的内容开始同步，该笔记及更早的数据均不采集'),
+                }}
+              >
+                <Textarea
+                  v-model={form.value.end_work_link}
+                  placeholder="请输入..."
+                  size="large"
+                  max-length={72}
+                  auto-size={{ minRows: 3, maxRows: 5 }}
+                />
+              </FormItem>
+              {!isEdit.value && (
+                <>
+                  <FormItem
+                    label="Cookie值"
+                    v-slots={{
+                      label: () => renderLabel('Cookie值', 'Cookie，无需扫码授权'),
+                    }}
+                  >
+                    <Switch v-model={isCustomCookie.value} size="large" />
+                  </FormItem>
+                  {isCustomCookie.value && (
+                    <FormItem label="" field="cookie">
+                      <Textarea
+                        v-model={form.value.cookie}
+                        placeholder="请输入..."
+                        size="large"
+                        max-length={72}
+                        auto-size={{ minRows: 3, maxRows: 5 }}
+                      />
+                    </FormItem>
+                  )}
+                </>
+              )}
+            </>
+          )}
+        </Form>
+        <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
+          <Button size="large" class="cancel-btn" onClick={onClose}>
+            取消
+          </Button>
+          <Button type="primary" size="large" loading={importLoading.value} onClick={onSubmit}>
+            {confirmBtnText.value}
+          </Button>
+        </div>
+
+        <AuthorizedAccountModal ref={authorizedAccountModalRef} onUpdate={() => emit('update')} />
+        <ImportPromptModal ref={importPromptModalRef} />
+        <SyncDataModal ref={syncDataModalRef} />
+      </Modal>
+    );
+  },
 };
-
-const handleDownloadTemplate = async () => {
-  const { code, data } = await getTemplateUrl();
-  if (code === 200) {
-    window.open(data.download_url, '_blank');
-  }
-};
-
-// 对外暴露打开弹窗方法
-defineExpose({ open });
 </script>
 
 <style lang="scss">

src/views/property-marketing/media-account/account-manage/index.vue

@@ -303,10 +303,6 @@ const startSyncDataPolling = () => {
 };
 
 const handleSyncData = async (item) => {
-  Notification.info({
-    title: '账号正在同步数据。',
-  });
-
   const { code } = await postSyncMediaAccountData(item.id);
   if (code === 200) {
     if (!startSyncData.value) {