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

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

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { MemberMessageTemplateDto } from '#/api/member/message-reach';
+import type { MessageTemplatePager } from '#/views/member/message-reach/types';
+
+import { Button, Empty, Pagination, Spin, Tag } from 'ant-design-vue';
+
+import {
+  formatInteger,
+  MESSAGE_TEMPLATE_CATEGORY_COLOR_MAP,
+  MESSAGE_TEMPLATE_CATEGORY_TEXT_MAP,
+} from '../composables/message-reach-page/helpers';
+
+defineProps<{
+  canManage: boolean;
+  loading: boolean;
+  pager: MessageTemplatePager;
+}>();
+
+const emit = defineEmits<{
+  (event: 'delete', templateId: string): void;
+  (event: 'edit', templateId: string): void;
+  (event: 'pageChange', page: number, pageSize: number): void;
+  (event: 'use', template: MemberMessageTemplateDto): void;
+}>();
+</script>
+
+<template>
+  <div class="mmr-template-wrap">
+    <Spin :spinning="loading">
+      <div v-if="pager.items.length > 0" class="mmr-template-grid">
+        <article
+          v-for="item in pager.items"
+          :key="item.templateId"
+          class="mmr-template-card"
+        >
+          <div class="mmr-template-head">
+            <div class="mmr-template-name">{{ item.name }}</div>
+            <Tag :color="MESSAGE_TEMPLATE_CATEGORY_COLOR_MAP[item.category]">
+              {{ MESSAGE_TEMPLATE_CATEGORY_TEXT_MAP[item.category] }}
+            </Tag>
+          </div>
+
+          <div class="mmr-template-preview">
+            {{ item.content }}
+          </div>
+
+          <div class="mmr-template-foot">
+            <span class="mmr-template-usage">
+              已使用 {{ formatInteger(item.usageCount) }}次
+            </span>
+            <div class="mmr-template-actions">
+              <Button
+                size="small"
+                type="primary"
+                :disabled="!canManage"
+                @click="emit('use', item)"
+              >
+                使用
+              </Button>
+              <Button
+                type="link"
+                size="small"
+                class="mmr-action-link"
+                :disabled="!canManage"
+                @click="emit('edit', item.templateId)"
+              >
+                编辑
+              </Button>
+              <Button
+                type="link"
+                size="small"
+                danger
+                class="mmr-action-link"
+                :disabled="!canManage"
+                @click="emit('delete', item.templateId)"
+              >
+                删除
+              </Button>
+            </div>
+          </div>
+        </article>
+      </div>
+
+      <div v-else class="mmr-template-empty">
+        <Empty description="暂无消息模板" />
+      </div>
+    </Spin>
+
+    <div class="mmr-pagination">
+      <Pagination
+        :current="pager.page"
+        :page-size="pager.pageSize"
+        :total="pager.totalCount"
+        show-size-changer
+        :show-total="(value) => `共 ${value} 条`"
+        :page-size-options="['12', '24', '48']"
+        @change="(page, pageSize) => emit('pageChange', page, pageSize)"
+      />
+    </div>
+  </div>
+</template>