lgp-admin-plus/apps/web-antd/src/views/wx/template/components/import-modal.vue

<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Alert, Input, message, Switch } from 'ant-design-vue';

import { popupData } from '#/components/crud';

import { importTemplates as doImport } from '../api';

defineOptions({
  name: 'WxTemplateImportModal',
});

/**
 * 导入弹窗。
 * 用户粘贴导出过的 JSON（含 templates 数组），后端按 strict 模式校验白名单。
 */
const jsonText = ref('');
const overwrite = ref(false);

const [Modal, modalApi] = useVbenModal({
  draggable: true,
  fullscreenButton: false,
  onCancel() {
    modalApi.close();
  },
  async onConfirm() {
    let payload: any;
    try {
      payload = JSON.parse(jsonText.value);
    } catch {
      message.error('JSON 格式错误');
      return;
    }
    modalApi.lock();
    try {
      const res = await doImport({ payload, overwrite: overwrite.value });
      message.success(
        `导入完成：新增 ${res.inserted}，更新 ${res.updated}，跳过 ${res.skipped}`,
      );
      popupData(modalApi).gridApi?.reload();
      modalApi.close();
    } finally {
      modalApi.unlock();
    }
  },
  onOpenChange(isOpen: boolean) {
    if (!isOpen) return;
    jsonText.value = '';
    overwrite.value = false;
  },
});
</script>

<template>
  <Modal class="w-[640px]" title="导入模板">
    <Alert
      class="mb-3"
      message="粘贴导出 JSON。strict 白名单：非法 tokens/layout 会被拒绝。日常请走「装修工作室」改色板与区块，勿按 template.code 特判页面。"
      show-icon
      type="info"
    />
    <Input.Textarea
      v-model:value="jsonText"
      :rows="10"
      placeholder="{&quot;version&quot;:1,&quot;templates&quot;:[...]}"
    />
    <div class="mt-3 flex items-center gap-2">
      <Switch v-model:checked="overwrite" />
      <span>覆盖已存在的同 code 模板</span>
    </div>
  </Modal>
</template>