feat: 完成会员消息触达模块页面与交互

apps/web-antd/src/views/member/message-reach/components/MessageTemplateEditorModal.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { MessageTemplateEditorForm } from '../types';
+
+import { Form, Input, Modal, Select } from 'ant-design-vue';
+
+import { MESSAGE_TEMPLATE_CATEGORY_OPTIONS } from '../composables/message-reach-page/constants';
+
+defineProps<{
+  canManage: boolean;
+  form: MessageTemplateEditorForm;
+  loading: boolean;
+  open: boolean;
+  submitText: string;
+  submitting: boolean;
+  title: string;
+}>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'setCategory', value: 'marketing' | 'notice' | 'recall'): void;
+  (event: 'setContent', value: string): void;
+  (event: 'setName', value: string): void;
+  (event: 'submit'): void;
+}>();
+</script>
+
+<template>
+  <Modal
+    :open="open"
+    :title="title"
+    :confirm-loading="submitting"
+    :ok-text="submitText"
+    cancel-text="取消"
+    :ok-button-props="{ disabled: !canManage || loading }"
+    width="560"
+    @ok="emit('submit')"
+    @cancel="emit('close')"
+  >
+    <Form layout="vertical" class="mmr-template-modal-form">
+      <Form.Item label="模板名称" required>
+        <Input
+          :value="form.name"
+          :disabled="loading"
+          placeholder="如：新品上线通知"
+          @update:value="(value) => emit('setName', String(value ?? ''))"
+        />
+      </Form.Item>
+
+      <Form.Item label="模板分类" required>
+        <Select
+          :value="form.category"
+          :disabled="loading"
+          :options="MESSAGE_TEMPLATE_CATEGORY_OPTIONS"
+          @update:value="
+            (value) =>
+              emit(
+                'setCategory',
+                String(value || 'notice') as 'marketing' | 'notice' | 'recall',
+              )
+          "
+        />
+      </Form.Item>
+
+      <Form.Item label="模板内容" required>
+        <Input.TextArea
+          :value="form.content"
+          :disabled="loading"
+          :rows="5"
+          placeholder="支持变量：{name}姓名 {level}等级"
+          @update:value="(value) => emit('setContent', String(value ?? ''))"
+        />
+        <div class="mmr-form-hint">支持模板变量，用于个性化内容替换</div>
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>