feat: 完成会员消息触达模块页面与交互
This commit is contained in:
@@ -0,0 +1,273 @@
|
||||
<script setup lang="ts">
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
|
||||
import type {
|
||||
MemberMessageReachChannel,
|
||||
MemberMessageReachDetailDto,
|
||||
MemberMessageReachRecipientDto,
|
||||
} from '#/api/member/message-reach';
|
||||
|
||||
import { Button, Drawer, Empty, Spin, Table, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatDateTime,
|
||||
formatInteger,
|
||||
formatPercent,
|
||||
MESSAGE_CHANNEL_COLOR_MAP,
|
||||
MESSAGE_CHANNEL_TEXT_MAP,
|
||||
MESSAGE_RECIPIENT_STATUS_COLOR_MAP,
|
||||
MESSAGE_RECIPIENT_STATUS_TEXT_MAP,
|
||||
MESSAGE_STATUS_COLOR_MAP,
|
||||
MESSAGE_STATUS_TEXT_MAP,
|
||||
} from '../composables/message-reach-page/helpers';
|
||||
|
||||
defineProps<{
|
||||
detail: MemberMessageReachDetailDto | null;
|
||||
loading: boolean;
|
||||
open: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
}>();
|
||||
|
||||
const recipientColumns: TableColumnType<MemberMessageReachRecipientDto>[] = [
|
||||
{
|
||||
title: '会员ID',
|
||||
dataIndex: 'memberId',
|
||||
key: 'memberId',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '渠道',
|
||||
dataIndex: 'channel',
|
||||
key: 'channel',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '联系方式',
|
||||
key: 'contact',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '发送时间',
|
||||
dataIndex: 'sentAt',
|
||||
key: 'sentAt',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
title: '已读时间',
|
||||
dataIndex: 'readAt',
|
||||
key: 'readAt',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
title: '转化时间',
|
||||
dataIndex: 'convertedAt',
|
||||
key: 'convertedAt',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
title: '错误信息',
|
||||
dataIndex: 'errorMessage',
|
||||
key: 'errorMessage',
|
||||
ellipsis: true,
|
||||
},
|
||||
];
|
||||
|
||||
function resolveContact(record: Record<string, any>) {
|
||||
const channel = String(record.channel || '');
|
||||
if (channel === 'sms') {
|
||||
return String(record.mobile || '--');
|
||||
}
|
||||
if (channel === 'wechat-mini') {
|
||||
return String(record.openId || '--');
|
||||
}
|
||||
return String(record.memberId || '--');
|
||||
}
|
||||
|
||||
function resolveChannelColor(channel: unknown) {
|
||||
return (
|
||||
MESSAGE_CHANNEL_COLOR_MAP[channel as MemberMessageReachChannel] || 'default'
|
||||
);
|
||||
}
|
||||
|
||||
function resolveChannelText(channel: unknown) {
|
||||
return (
|
||||
MESSAGE_CHANNEL_TEXT_MAP[channel as MemberMessageReachChannel] || '未知渠道'
|
||||
);
|
||||
}
|
||||
|
||||
function resolveRecipientStatusColor(status: unknown) {
|
||||
return MESSAGE_RECIPIENT_STATUS_COLOR_MAP[
|
||||
status as 'failed' | 'pending' | 'sent'
|
||||
];
|
||||
}
|
||||
|
||||
function resolveRecipientStatusText(status: unknown) {
|
||||
return MESSAGE_RECIPIENT_STATUS_TEXT_MAP[
|
||||
status as 'failed' | 'pending' | 'sent'
|
||||
];
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer :open="open" width="820" title="消息详情" @close="emit('close')">
|
||||
<Spin :spinning="loading">
|
||||
<template v-if="detail">
|
||||
<section class="mmr-detail-section">
|
||||
<div class="mmr-detail-title-row">
|
||||
<div class="mmr-detail-title">{{ detail.title }}</div>
|
||||
<Tag :color="MESSAGE_STATUS_COLOR_MAP[detail.status]">
|
||||
{{ MESSAGE_STATUS_TEXT_MAP[detail.status] }}
|
||||
</Tag>
|
||||
</div>
|
||||
|
||||
<div class="mmr-detail-meta">
|
||||
<div>
|
||||
<span class="label">推送渠道：</span>
|
||||
<span class="channels">
|
||||
<Tag
|
||||
v-for="item in detail.channels"
|
||||
:key="`detail-channel-${item}`"
|
||||
:color="resolveChannelColor(item)"
|
||||
>
|
||||
{{ resolveChannelText(item) }}
|
||||
</Tag>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">目标人群：</span>
|
||||
<span>{{ detail.audienceText }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">定时发送：</span>
|
||||
<span>{{ formatDateTime(detail.scheduledAt) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">实际发送：</span>
|
||||
<span>{{ formatDateTime(detail.sentAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mmr-detail-section">
|
||||
<div class="mmr-detail-stat-grid">
|
||||
<div class="mmr-detail-stat-item">
|
||||
<div class="label">预计触达</div>
|
||||
<div class="value">
|
||||
{{ formatInteger(detail.estimatedReachCount) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mmr-detail-stat-item">
|
||||
<div class="label">发送成功</div>
|
||||
<div class="value">{{ formatInteger(detail.sentCount) }}</div>
|
||||
</div>
|
||||
<div class="mmr-detail-stat-item">
|
||||
<div class="label">已读人数</div>
|
||||
<div class="value">{{ formatInteger(detail.readCount) }}</div>
|
||||
</div>
|
||||
<div class="mmr-detail-stat-item">
|
||||
<div class="label">转化人数</div>
|
||||
<div class="value">
|
||||
{{ formatInteger(detail.convertedCount) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mmr-detail-stat-item">
|
||||
<div class="label">打开率</div>
|
||||
<div class="value">{{ formatPercent(detail.openRate) }}</div>
|
||||
</div>
|
||||
<div class="mmr-detail-stat-item">
|
||||
<div class="label">转化率</div>
|
||||
<div class="value">
|
||||
{{ formatPercent(detail.conversionRate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mmr-detail-section">
|
||||
<div class="mmr-detail-section-title">消息内容</div>
|
||||
<div class="mmr-detail-content">{{ detail.content }}</div>
|
||||
<div v-if="detail.lastError" class="mmr-detail-error">
|
||||
最后错误：{{ detail.lastError }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mmr-detail-section">
|
||||
<div class="mmr-detail-section-title">收件明细</div>
|
||||
<div class="mmr-recipient-table">
|
||||
<Table
|
||||
:row-key="
|
||||
(record: MemberMessageReachRecipientDto) =>
|
||||
`${record.memberId}-${record.channel}-${record.sentAt || ''}`
|
||||
"
|
||||
:columns="recipientColumns"
|
||||
:data-source="detail.recipients"
|
||||
:pagination="{ pageSize: 8, showSizeChanger: false }"
|
||||
size="small"
|
||||
:scroll="{ x: 1040 }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'channel'">
|
||||
<Tag :color="resolveChannelColor(record.channel)">
|
||||
{{ resolveChannelText(record.channel) }}
|
||||
</Tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<Tag :color="resolveRecipientStatusColor(record.status)">
|
||||
{{ resolveRecipientStatusText(record.status) }}
|
||||
</Tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'contact'">
|
||||
<span>{{ resolveContact(record) }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'sentAt'">
|
||||
<span class="mmr-time-text">{{
|
||||
formatDateTime(record.sentAt)
|
||||
}}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'readAt'">
|
||||
<span class="mmr-time-text">{{
|
||||
formatDateTime(record.readAt)
|
||||
}}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'convertedAt'">
|
||||
<span class="mmr-time-text">{{
|
||||
formatDateTime(record.convertedAt)
|
||||
}}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'errorMessage'">
|
||||
<span
|
||||
:title="record.errorMessage || '--'"
|
||||
class="mmr-error-text"
|
||||
>
|
||||
{{ record.errorMessage || '--' }}
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<Empty v-else description="暂无消息详情" />
|
||||
</Spin>
|
||||
|
||||
<template #footer>
|
||||
<Button @click="emit('close')">关闭</Button>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,209 @@
|
||||
<script setup lang="ts">
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
import type {
|
||||
MemberMessageAudienceType,
|
||||
MemberMessageReachChannel,
|
||||
MemberMessageScheduleType,
|
||||
} from '#/api/member/message-reach';
|
||||
import type { MessageReachEditorForm } from '#/views/member/message-reach/types';
|
||||
|
||||
import {
|
||||
Button,
|
||||
DatePicker,
|
||||
Drawer,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
Spin,
|
||||
Tag,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
MESSAGE_AUDIENCE_TAG_OPTIONS,
|
||||
MESSAGE_AUDIENCE_TYPE_OPTIONS,
|
||||
MESSAGE_REACH_CHANNEL_OPTIONS,
|
||||
MESSAGE_SCHEDULE_TYPE_OPTIONS,
|
||||
} from '../composables/message-reach-page/constants';
|
||||
import { formatInteger } from '../composables/message-reach-page/helpers';
|
||||
|
||||
defineProps<{
|
||||
audienceEstimateCount: number;
|
||||
canManage: boolean;
|
||||
estimatingAudience: boolean;
|
||||
form: MessageReachEditorForm;
|
||||
open: boolean;
|
||||
submitting: boolean;
|
||||
title: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'setAudienceType', value: MemberMessageAudienceType): void;
|
||||
(event: 'setChannel', value: MemberMessageReachChannel): void;
|
||||
(event: 'setContent', value: string): void;
|
||||
(event: 'setScheduleType', value: MemberMessageScheduleType): void;
|
||||
(event: 'setScheduledAt', value: Dayjs | null): void;
|
||||
(event: 'setTitle', value: string): void;
|
||||
(event: 'submitDraft'): void;
|
||||
(event: 'submitSend'): void;
|
||||
(event: 'switchToTemplateTab'): void;
|
||||
(event: 'toggleAudienceTag', value: string): void;
|
||||
}>();
|
||||
|
||||
const CheckableTag = Tag.CheckableTag;
|
||||
const audienceTypeOptions = MESSAGE_AUDIENCE_TYPE_OPTIONS.map((item) => ({
|
||||
...item,
|
||||
}));
|
||||
|
||||
function handleChannelChange(
|
||||
value: MemberMessageReachChannel,
|
||||
checked: boolean,
|
||||
) {
|
||||
if (!checked) {
|
||||
return;
|
||||
}
|
||||
emit('setChannel', value);
|
||||
}
|
||||
|
||||
function handleScheduleTypeChange(
|
||||
value: MemberMessageScheduleType,
|
||||
checked: boolean,
|
||||
) {
|
||||
if (!checked) {
|
||||
return;
|
||||
}
|
||||
emit('setScheduleType', value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer :open="open" :title="title" width="560" @close="emit('close')">
|
||||
<Form layout="vertical" class="mmr-editor-form">
|
||||
<Form.Item label="消息标题" required>
|
||||
<Input
|
||||
:value="form.title"
|
||||
placeholder="如：新品上线通知"
|
||||
@update:value="(value) => emit('setTitle', String(value ?? ''))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="推送渠道" required>
|
||||
<div class="mmr-pill-group">
|
||||
<CheckableTag
|
||||
v-for="item in MESSAGE_REACH_CHANNEL_OPTIONS"
|
||||
:key="item.value"
|
||||
:checked="form.channels.includes(item.value)"
|
||||
class="mmr-pill"
|
||||
@change="(checked) => handleChannelChange(item.value, checked)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</CheckableTag>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="目标人群" required>
|
||||
<Select
|
||||
:value="form.audienceType"
|
||||
:options="audienceTypeOptions"
|
||||
@update:value="
|
||||
(value) =>
|
||||
emit(
|
||||
'setAudienceType',
|
||||
String(value || 'all') as MemberMessageAudienceType,
|
||||
)
|
||||
"
|
||||
/>
|
||||
|
||||
<div v-if="form.audienceType === 'tag'" class="mmr-tag-panel">
|
||||
<div class="mmr-pill-group">
|
||||
<CheckableTag
|
||||
v-for="item in MESSAGE_AUDIENCE_TAG_OPTIONS"
|
||||
:key="item.value"
|
||||
:checked="form.audienceTags.includes(item.value)"
|
||||
class="mmr-pill"
|
||||
@change="() => emit('toggleAudienceTag', item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</CheckableTag>
|
||||
</div>
|
||||
<div class="mmr-reach-row">
|
||||
<Spin :spinning="estimatingAudience" size="small">
|
||||
预计触达 {{ formatInteger(audienceEstimateCount) }}人
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="消息内容" required>
|
||||
<Input.TextArea
|
||||
:value="form.content"
|
||||
:rows="5"
|
||||
placeholder="支持变量：{name}姓名 {level}等级"
|
||||
@update:value="(value) => emit('setContent', String(value ?? ''))"
|
||||
/>
|
||||
<div class="mmr-form-hint">可使用变量实现个性化推送</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="发送时间" required>
|
||||
<div class="mmr-pill-group">
|
||||
<CheckableTag
|
||||
v-for="item in MESSAGE_SCHEDULE_TYPE_OPTIONS"
|
||||
:key="item.value"
|
||||
:checked="form.scheduleType === item.value"
|
||||
class="mmr-pill"
|
||||
@change="
|
||||
(checked) =>
|
||||
handleScheduleTypeChange(
|
||||
item.value as MemberMessageScheduleType,
|
||||
checked,
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ item.label }}
|
||||
</CheckableTag>
|
||||
</div>
|
||||
|
||||
<DatePicker
|
||||
v-if="form.scheduleType === 'scheduled'"
|
||||
class="mmr-scheduled-picker"
|
||||
show-time
|
||||
:value="form.scheduledAt ?? undefined"
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
@update:value="
|
||||
(value) => emit('setScheduledAt', (value as Dayjs) || null)
|
||||
"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item class="mmr-template-link-wrap">
|
||||
<Button
|
||||
type="link"
|
||||
class="mmr-template-link"
|
||||
@click="emit('switchToTemplateTab')"
|
||||
>
|
||||
从模板选择
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<template #footer>
|
||||
<div class="mmr-drawer-footer">
|
||||
<Button
|
||||
:disabled="!canManage || submitting"
|
||||
@click="emit('submitDraft')"
|
||||
>
|
||||
存为草稿
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
:disabled="!canManage || submitting"
|
||||
:loading="submitting"
|
||||
@click="emit('submitSend')"
|
||||
>
|
||||
发送
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import type {
|
||||
MemberMessageReachChannel,
|
||||
MemberMessageReachStatus,
|
||||
} from '#/api/member/message-reach';
|
||||
import type { MessageReachFilterForm } from '#/views/member/message-reach/types';
|
||||
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
MESSAGE_REACH_CHANNEL_FILTER_OPTIONS,
|
||||
MESSAGE_REACH_STATUS_FILTER_OPTIONS,
|
||||
} from '../composables/message-reach-page/constants';
|
||||
|
||||
defineProps<{
|
||||
canManage: boolean;
|
||||
filters: MessageReachFilterForm;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'create'): void;
|
||||
(event: 'search'): void;
|
||||
(event: 'update:channel', value: '' | MemberMessageReachChannel): void;
|
||||
(event: 'update:keyword', value: string): void;
|
||||
(event: 'update:status', value: '' | MemberMessageReachStatus): void;
|
||||
}>();
|
||||
|
||||
function handleStatusChange(value: unknown) {
|
||||
emit('update:status', String(value || '') as '' | MemberMessageReachStatus);
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function handleChannelChange(value: unknown) {
|
||||
emit('update:channel', String(value || '') as '' | MemberMessageReachChannel);
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mmr-toolbar">
|
||||
<Select
|
||||
class="mmr-select"
|
||||
:value="filters.status || ''"
|
||||
:options="MESSAGE_REACH_STATUS_FILTER_OPTIONS"
|
||||
@update:value="(value) => handleStatusChange(value)"
|
||||
/>
|
||||
|
||||
<Select
|
||||
class="mmr-select"
|
||||
:value="filters.channel || ''"
|
||||
:options="MESSAGE_REACH_CHANNEL_FILTER_OPTIONS"
|
||||
@update:value="(value) => handleChannelChange(value)"
|
||||
/>
|
||||
|
||||
<Input
|
||||
class="mmr-keyword-input"
|
||||
:value="filters.keyword"
|
||||
placeholder="搜索消息标题"
|
||||
allow-clear
|
||||
@update:value="(value) => emit('update:keyword', String(value ?? ''))"
|
||||
@press-enter="emit('search')"
|
||||
/>
|
||||
|
||||
<span class="mmr-spacer"></span>
|
||||
|
||||
<Button type="primary" :disabled="!canManage" @click="emit('create')">
|
||||
创建消息
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
import type { MessageReachStatsViewModel } from '../types';
|
||||
|
||||
import { Spin } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatInteger,
|
||||
formatPercent,
|
||||
} from '../composables/message-reach-page/helpers';
|
||||
|
||||
defineProps<{
|
||||
loading: boolean;
|
||||
stats: MessageReachStatsViewModel;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Spin :spinning="loading">
|
||||
<div class="mmr-stats">
|
||||
<div class="mmr-stat-card">
|
||||
<div class="mmr-stat-label">本月发送</div>
|
||||
<div class="mmr-stat-value">
|
||||
{{ formatInteger(stats.monthlySentCount) }}
|
||||
<span class="mmr-stat-unit">条</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mmr-stat-card">
|
||||
<div class="mmr-stat-label">触达人数</div>
|
||||
<div class="mmr-stat-value">
|
||||
{{ formatInteger(stats.reachMemberCount) }}
|
||||
<span class="mmr-stat-unit">人</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mmr-stat-card">
|
||||
<div class="mmr-stat-label">打开率</div>
|
||||
<div class="mmr-stat-value">
|
||||
{{ formatPercent(stats.openRate) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mmr-stat-card">
|
||||
<div class="mmr-stat-label">转化率</div>
|
||||
<div class="mmr-stat-value">
|
||||
{{ formatPercent(stats.conversionRate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
</template>
|
||||
@@ -0,0 +1,221 @@
|
||||
<script setup lang="ts">
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
|
||||
import type {
|
||||
MemberMessageReachChannel,
|
||||
MemberMessageReachListItemDto,
|
||||
MemberMessageReachStatus,
|
||||
} from '#/api/member/message-reach';
|
||||
import type { MessageReachPager } from '#/views/member/message-reach/types';
|
||||
|
||||
import { Button, Pagination, Table, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatInteger,
|
||||
formatPercent,
|
||||
MESSAGE_CHANNEL_COLOR_MAP,
|
||||
MESSAGE_CHANNEL_TEXT_MAP,
|
||||
MESSAGE_STATUS_COLOR_MAP,
|
||||
MESSAGE_STATUS_TEXT_MAP,
|
||||
resolveMessageTime,
|
||||
} from '../composables/message-reach-page/helpers';
|
||||
|
||||
defineProps<{
|
||||
canManage: boolean;
|
||||
loading: boolean;
|
||||
pager: MessageReachPager;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'delete', messageId: string): void;
|
||||
(event: 'detail', messageId: string): void;
|
||||
(event: 'edit', messageId: string): void;
|
||||
(event: 'pageChange', page: number, pageSize: number): void;
|
||||
}>();
|
||||
|
||||
const columns: TableColumnType<MemberMessageReachListItemDto>[] = [
|
||||
{
|
||||
title: '消息标题',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
width: 280,
|
||||
},
|
||||
{
|
||||
title: '推送渠道',
|
||||
dataIndex: 'channels',
|
||||
key: 'channels',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '目标人群',
|
||||
dataIndex: 'audienceText',
|
||||
key: 'audienceText',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
title: '触达人数',
|
||||
dataIndex: 'estimatedReachCount',
|
||||
key: 'estimatedReachCount',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '发送时间',
|
||||
key: 'sendTime',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
|
||||
function showMetricRow(record: Record<string, any>) {
|
||||
return (
|
||||
Number(record.openRate || 0) > 0 || Number(record.conversionRate || 0) > 0
|
||||
);
|
||||
}
|
||||
|
||||
function resolveChannelColor(channel: unknown) {
|
||||
return (
|
||||
MESSAGE_CHANNEL_COLOR_MAP[channel as MemberMessageReachChannel] || 'default'
|
||||
);
|
||||
}
|
||||
|
||||
function resolveChannelText(channel: unknown) {
|
||||
return (
|
||||
MESSAGE_CHANNEL_TEXT_MAP[channel as MemberMessageReachChannel] || '未知渠道'
|
||||
);
|
||||
}
|
||||
|
||||
function resolveStatusColor(status: unknown) {
|
||||
return MESSAGE_STATUS_COLOR_MAP[status as MemberMessageReachStatus];
|
||||
}
|
||||
|
||||
function resolveStatusText(status: unknown) {
|
||||
return MESSAGE_STATUS_TEXT_MAP[status as MemberMessageReachStatus];
|
||||
}
|
||||
|
||||
function canEdit(status: unknown) {
|
||||
const currentStatus = status as MemberMessageReachStatus;
|
||||
return currentStatus === 'draft' || currentStatus === 'failed';
|
||||
}
|
||||
|
||||
function canDelete(status: unknown) {
|
||||
const currentStatus = status as MemberMessageReachStatus;
|
||||
return (
|
||||
currentStatus === 'draft' ||
|
||||
currentStatus === 'failed' ||
|
||||
currentStatus === 'pending'
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mmr-table-wrap">
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data-source="pager.items"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
row-key="messageId"
|
||||
:scroll="{ x: 1080 }"
|
||||
class="mmr-table"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'title'">
|
||||
<div class="mmr-message-title">{{ record.title }}</div>
|
||||
<div v-if="showMetricRow(record)" class="mmr-message-metric">
|
||||
打开率 {{ formatPercent(record.openRate) }} | 转化率
|
||||
{{ formatPercent(record.conversionRate) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'channels'">
|
||||
<div class="mmr-channel-list">
|
||||
<Tag
|
||||
v-for="item in record.channels"
|
||||
:key="`${record.messageId}-${item}`"
|
||||
:color="resolveChannelColor(item)"
|
||||
>
|
||||
{{ resolveChannelText(item) }}
|
||||
</Tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'estimatedReachCount'">
|
||||
<span>
|
||||
{{
|
||||
record.estimatedReachCount > 0
|
||||
? formatInteger(record.estimatedReachCount)
|
||||
: '—'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'sendTime'">
|
||||
<span class="mmr-time-text">
|
||||
{{ resolveMessageTime(record.sentAt, record.scheduledAt) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<Tag :color="resolveStatusColor(record.status)">
|
||||
{{ resolveStatusText(record.status) }}
|
||||
</Tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<div class="mmr-table-actions">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
class="mmr-action-link"
|
||||
@click="emit('detail', record.messageId)"
|
||||
>
|
||||
详情
|
||||
</Button>
|
||||
<Button
|
||||
v-if="canManage && canEdit(record.status)"
|
||||
type="link"
|
||||
size="small"
|
||||
class="mmr-action-link"
|
||||
@click="emit('edit', record.messageId)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
v-if="canManage && canDelete(record.status)"
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
class="mmr-action-link"
|
||||
@click="emit('delete', record.messageId)"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<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="['10', '20', '50']"
|
||||
@change="(page, pageSize) => emit('pageChange', page, pageSize)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import type { MemberMessageTemplateCategory } from '#/api/member/message-reach';
|
||||
import type { MessageTemplateFilterForm } from '#/views/member/message-reach/types';
|
||||
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
|
||||
import { MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS } from '../composables/message-reach-page/constants';
|
||||
|
||||
defineProps<{
|
||||
canManage: boolean;
|
||||
filters: MessageTemplateFilterForm;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'create'): void;
|
||||
(event: 'search'): void;
|
||||
(event: 'update:category', value: '' | MemberMessageTemplateCategory): void;
|
||||
(event: 'update:keyword', value: string): void;
|
||||
}>();
|
||||
|
||||
function handleCategoryChange(value: unknown) {
|
||||
emit(
|
||||
'update:category',
|
||||
String(value || '') as '' | MemberMessageTemplateCategory,
|
||||
);
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mmr-toolbar">
|
||||
<Select
|
||||
class="mmr-select"
|
||||
:value="filters.category || ''"
|
||||
:options="MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS"
|
||||
@update:value="(value) => handleCategoryChange(value)"
|
||||
/>
|
||||
|
||||
<Input
|
||||
class="mmr-keyword-input"
|
||||
:value="filters.keyword"
|
||||
placeholder="搜索模板名称"
|
||||
allow-clear
|
||||
@update:value="(value) => emit('update:keyword', String(value ?? ''))"
|
||||
@press-enter="emit('search')"
|
||||
/>
|
||||
|
||||
<span class="mmr-spacer"></span>
|
||||
|
||||
<Button type="primary" :disabled="!canManage" @click="emit('create')">
|
||||
新建模板
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,106 @@
|
||||
import type {
|
||||
MemberMessageReachChannel,
|
||||
MemberMessageReachStatus,
|
||||
MemberMessageTemplateCategory,
|
||||
} from '#/api/member/message-reach';
|
||||
import type { MemberMessageReachTabKey } from '#/views/member/message-reach/types';
|
||||
|
||||
/** 消息触达查看权限。 */
|
||||
export const MEMBER_MESSAGE_REACH_VIEW_PERMISSION =
|
||||
'tenant:member:message-reach:view';
|
||||
|
||||
/** 消息触达管理权限。 */
|
||||
export const MEMBER_MESSAGE_REACH_MANAGE_PERMISSION =
|
||||
'tenant:member:message-reach:manage';
|
||||
|
||||
/** 页面 Tab 选项。 */
|
||||
export const MESSAGE_REACH_TAB_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: MemberMessageReachTabKey;
|
||||
}> = [
|
||||
{ label: '消息列表', value: 'list' },
|
||||
{ label: '消息模板', value: 'template' },
|
||||
];
|
||||
|
||||
/** 状态筛选选项。 */
|
||||
export const MESSAGE_REACH_STATUS_FILTER_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: '' | MemberMessageReachStatus;
|
||||
}> = [
|
||||
{ label: '全部状态', value: '' },
|
||||
{ label: '草稿', value: 'draft' },
|
||||
{ label: '待发送', value: 'pending' },
|
||||
{ label: '发送中', value: 'sending' },
|
||||
{ label: '已发送', value: 'sent' },
|
||||
{ label: '发送失败', value: 'failed' },
|
||||
];
|
||||
|
||||
/** 渠道筛选选项。 */
|
||||
export const MESSAGE_REACH_CHANNEL_FILTER_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: '' | MemberMessageReachChannel;
|
||||
}> = [
|
||||
{ label: '全部渠道', value: '' },
|
||||
{ label: '站内信', value: 'inapp' },
|
||||
{ label: '短信', value: 'sms' },
|
||||
{ label: '微信模板', value: 'wechat-mini' },
|
||||
];
|
||||
|
||||
/** 模板分类筛选选项。 */
|
||||
export const MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: '' | MemberMessageTemplateCategory;
|
||||
}> = [
|
||||
{ label: '全部分类', value: '' },
|
||||
{ label: '通知', value: 'notice' },
|
||||
{ label: '营销', value: 'marketing' },
|
||||
{ label: '召回', value: 'recall' },
|
||||
];
|
||||
|
||||
/** 模板分类编辑选项。 */
|
||||
export const MESSAGE_TEMPLATE_CATEGORY_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: MemberMessageTemplateCategory;
|
||||
}> = [
|
||||
{ label: '通知', value: 'notice' },
|
||||
{ label: '营销', value: 'marketing' },
|
||||
{ label: '召回', value: 'recall' },
|
||||
];
|
||||
|
||||
/** 抽屉渠道选项。 */
|
||||
export const MESSAGE_REACH_CHANNEL_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: MemberMessageReachChannel;
|
||||
}> = [
|
||||
{ label: '站内信', value: 'inapp' },
|
||||
{ label: '短信', value: 'sms' },
|
||||
{ label: '微信模板消息', value: 'wechat-mini' },
|
||||
];
|
||||
|
||||
/** 固定标签选项。 */
|
||||
export const MESSAGE_AUDIENCE_TAG_OPTIONS = [
|
||||
{ label: '高频客户', value: '高频客户' },
|
||||
{ label: '新客', value: '新客' },
|
||||
{ label: '沉睡客户', value: '沉睡客户' },
|
||||
{ label: '流失客户', value: '流失客户' },
|
||||
{ label: '午餐常客', value: '午餐常客' },
|
||||
{ label: '大额消费', value: '大额消费' },
|
||||
] as const;
|
||||
|
||||
/** 目标人群选项。 */
|
||||
export const MESSAGE_AUDIENCE_TYPE_OPTIONS = [
|
||||
{ label: '全部会员', value: 'all' },
|
||||
{ label: '按标签筛选', value: 'tag' },
|
||||
] as const;
|
||||
|
||||
/** 发送时间选项。 */
|
||||
export const MESSAGE_SCHEDULE_TYPE_OPTIONS = [
|
||||
{ label: '立即发送', value: 'immediate' },
|
||||
{ label: '定时发送', value: 'scheduled' },
|
||||
] as const;
|
||||
|
||||
/** 表格分页尺寸选项。 */
|
||||
export const MESSAGE_LIST_PAGE_SIZE_OPTIONS = ['10', '20', '50'];
|
||||
|
||||
/** 模板分页尺寸选项。 */
|
||||
export const MESSAGE_TEMPLATE_PAGE_SIZE_OPTIONS = ['12', '24', '48'];
|
||||
@@ -0,0 +1,160 @@
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type {
|
||||
MemberMessageReachDetailDto,
|
||||
MemberMessageReachStatsDto,
|
||||
} from '#/api/member/message-reach';
|
||||
import type {
|
||||
MessageReachFilterForm,
|
||||
MessageReachPager,
|
||||
MessageTemplateFilterForm,
|
||||
MessageTemplatePager,
|
||||
} from '#/views/member/message-reach/types';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
estimateMemberMessageAudienceApi,
|
||||
getMemberMessageReachDetailApi,
|
||||
getMemberMessageReachListApi,
|
||||
getMemberMessageReachStatsApi,
|
||||
getMemberMessageTemplateListApi,
|
||||
} from '#/api/member/message-reach';
|
||||
|
||||
import { mapMessageFilterToQuery, mapTemplateFilterToQuery } from './helpers';
|
||||
|
||||
interface CreateDataActionsOptions {
|
||||
audienceEstimateCount: Ref<number>;
|
||||
detail: Ref<MemberMessageReachDetailDto | null>;
|
||||
isDetailLoading: Ref<boolean>;
|
||||
isEstimatingAudience: Ref<boolean>;
|
||||
isMessageLoading: Ref<boolean>;
|
||||
isStatsLoading: Ref<boolean>;
|
||||
isTemplateLoading: Ref<boolean>;
|
||||
messageFilterForm: MessageReachFilterForm;
|
||||
messagePager: Ref<MessageReachPager>;
|
||||
stats: Ref<MemberMessageReachStatsDto>;
|
||||
templateFilterForm: MessageTemplateFilterForm;
|
||||
templatePager: Ref<MessageTemplatePager>;
|
||||
}
|
||||
|
||||
export function createDataActions(options: CreateDataActionsOptions) {
|
||||
function resetMessagePager() {
|
||||
options.messagePager.value = {
|
||||
...options.messagePager.value,
|
||||
items: [],
|
||||
totalCount: 0,
|
||||
};
|
||||
}
|
||||
|
||||
function resetTemplatePager() {
|
||||
options.templatePager.value = {
|
||||
...options.templatePager.value,
|
||||
items: [],
|
||||
totalCount: 0,
|
||||
};
|
||||
}
|
||||
|
||||
async function loadStats() {
|
||||
options.isStatsLoading.value = true;
|
||||
try {
|
||||
options.stats.value = await getMemberMessageReachStatsApi();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('加载消息统计失败');
|
||||
} finally {
|
||||
options.isStatsLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMessageList() {
|
||||
options.isMessageLoading.value = true;
|
||||
try {
|
||||
const query = mapMessageFilterToQuery(options.messageFilterForm);
|
||||
const result = await getMemberMessageReachListApi({
|
||||
page: options.messagePager.value.page,
|
||||
pageSize: options.messagePager.value.pageSize,
|
||||
...query,
|
||||
});
|
||||
options.messagePager.value = {
|
||||
items: result.items ?? [],
|
||||
page: result.page,
|
||||
pageSize: result.pageSize,
|
||||
totalCount: result.totalCount,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
resetMessagePager();
|
||||
message.error('加载消息列表失败');
|
||||
} finally {
|
||||
options.isMessageLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTemplateList() {
|
||||
options.isTemplateLoading.value = true;
|
||||
try {
|
||||
const query = mapTemplateFilterToQuery(options.templateFilterForm);
|
||||
const result = await getMemberMessageTemplateListApi({
|
||||
page: options.templatePager.value.page,
|
||||
pageSize: options.templatePager.value.pageSize,
|
||||
...query,
|
||||
});
|
||||
options.templatePager.value = {
|
||||
items: result.items ?? [],
|
||||
page: result.page,
|
||||
pageSize: result.pageSize,
|
||||
totalCount: result.totalCount,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
resetTemplatePager();
|
||||
message.error('加载模板列表失败');
|
||||
} finally {
|
||||
options.isTemplateLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMessageDetail(messageId: string) {
|
||||
options.isDetailLoading.value = true;
|
||||
try {
|
||||
const result = await getMemberMessageReachDetailApi({ messageId });
|
||||
options.detail.value = result;
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
options.detail.value = null;
|
||||
message.error('加载消息详情失败');
|
||||
return null;
|
||||
} finally {
|
||||
options.isDetailLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function estimateAudience(audienceType: 'all' | 'tag', tags: string[]) {
|
||||
options.isEstimatingAudience.value = true;
|
||||
try {
|
||||
const result = await estimateMemberMessageAudienceApi({
|
||||
audienceType,
|
||||
tags,
|
||||
});
|
||||
options.audienceEstimateCount.value = result.reachCount ?? 0;
|
||||
return options.audienceEstimateCount.value;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
options.audienceEstimateCount.value = 0;
|
||||
message.error('估算触达人数失败');
|
||||
return 0;
|
||||
} finally {
|
||||
options.isEstimatingAudience.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
estimateAudience,
|
||||
loadMessageDetail,
|
||||
loadMessageList,
|
||||
loadStats,
|
||||
loadTemplateList,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
import type {
|
||||
MemberMessageReachChannel,
|
||||
MemberMessageReachDetailDto,
|
||||
MemberMessageReachStatus,
|
||||
MemberMessageScheduleType,
|
||||
MemberMessageTemplateCategory,
|
||||
SaveMemberMessageReachPayload,
|
||||
SaveMemberMessageTemplatePayload,
|
||||
} from '#/api/member/message-reach';
|
||||
import type {
|
||||
MessageReachEditorForm,
|
||||
MessageReachFilterForm,
|
||||
MessageTemplateEditorForm,
|
||||
MessageTemplateFilterForm,
|
||||
} from '#/views/member/message-reach/types';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
/** 状态文案。 */
|
||||
export const MESSAGE_STATUS_TEXT_MAP: Record<MemberMessageReachStatus, string> =
|
||||
{
|
||||
draft: '草稿',
|
||||
pending: '待发送',
|
||||
sending: '发送中',
|
||||
sent: '已发送',
|
||||
failed: '发送失败',
|
||||
};
|
||||
|
||||
/** 状态标签色。 */
|
||||
export const MESSAGE_STATUS_COLOR_MAP: Record<
|
||||
MemberMessageReachStatus,
|
||||
string
|
||||
> = {
|
||||
draft: 'default',
|
||||
pending: 'processing',
|
||||
sending: 'warning',
|
||||
sent: 'success',
|
||||
failed: 'error',
|
||||
};
|
||||
|
||||
/** 渠道文案。 */
|
||||
export const MESSAGE_CHANNEL_TEXT_MAP: Record<
|
||||
MemberMessageReachChannel,
|
||||
string
|
||||
> = {
|
||||
inapp: '站内信',
|
||||
sms: '短信',
|
||||
'wechat-mini': '微信模板',
|
||||
};
|
||||
|
||||
/** 渠道标签色。 */
|
||||
export const MESSAGE_CHANNEL_COLOR_MAP: Record<
|
||||
MemberMessageReachChannel,
|
||||
string
|
||||
> = {
|
||||
inapp: 'blue',
|
||||
sms: 'green',
|
||||
'wechat-mini': 'orange',
|
||||
};
|
||||
|
||||
/** 模板分类文案。 */
|
||||
export const MESSAGE_TEMPLATE_CATEGORY_TEXT_MAP: Record<
|
||||
MemberMessageTemplateCategory,
|
||||
string
|
||||
> = {
|
||||
marketing: '营销',
|
||||
notice: '通知',
|
||||
recall: '召回',
|
||||
};
|
||||
|
||||
/** 模板分类颜色。 */
|
||||
export const MESSAGE_TEMPLATE_CATEGORY_COLOR_MAP: Record<
|
||||
MemberMessageTemplateCategory,
|
||||
string
|
||||
> = {
|
||||
marketing: 'magenta',
|
||||
notice: 'blue',
|
||||
recall: 'red',
|
||||
};
|
||||
|
||||
/** 收件状态文案。 */
|
||||
export const MESSAGE_RECIPIENT_STATUS_TEXT_MAP: Record<
|
||||
'failed' | 'pending' | 'sent',
|
||||
string
|
||||
> = {
|
||||
pending: '待发送',
|
||||
sent: '已发送',
|
||||
failed: '发送失败',
|
||||
};
|
||||
|
||||
/** 收件状态颜色。 */
|
||||
export const MESSAGE_RECIPIENT_STATUS_COLOR_MAP: Record<
|
||||
'failed' | 'pending' | 'sent',
|
||||
string
|
||||
> = {
|
||||
pending: 'processing',
|
||||
sent: 'success',
|
||||
failed: 'error',
|
||||
};
|
||||
|
||||
/** 格式化百分比。 */
|
||||
export function formatPercent(value: null | number | undefined) {
|
||||
const amount = Number(value ?? 0);
|
||||
if (!Number.isFinite(amount)) {
|
||||
return '0%';
|
||||
}
|
||||
|
||||
const digits = amount % 1 === 0 ? 0 : 1;
|
||||
return `${amount.toFixed(digits)}%`;
|
||||
}
|
||||
|
||||
/** 格式化数量。 */
|
||||
export function formatInteger(value: null | number | undefined) {
|
||||
const amount = Number(value ?? 0);
|
||||
if (!Number.isFinite(amount)) {
|
||||
return '0';
|
||||
}
|
||||
return Math.round(amount).toLocaleString('zh-CN');
|
||||
}
|
||||
|
||||
/** 格式化时间。 */
|
||||
export function formatDateTime(value?: string) {
|
||||
if (!value) {
|
||||
return '—';
|
||||
}
|
||||
|
||||
const parsed = dayjs(value);
|
||||
if (!parsed.isValid()) {
|
||||
return value;
|
||||
}
|
||||
return parsed.format('YYYY-MM-DD HH:mm');
|
||||
}
|
||||
|
||||
/** 解析消息发送时间。 */
|
||||
export function resolveMessageTime(
|
||||
sentAt?: string,
|
||||
scheduledAt?: string,
|
||||
): string {
|
||||
if (sentAt) {
|
||||
return formatDateTime(sentAt);
|
||||
}
|
||||
if (scheduledAt) {
|
||||
return formatDateTime(scheduledAt);
|
||||
}
|
||||
return '—';
|
||||
}
|
||||
|
||||
/** 将列表筛选映射为查询参数。 */
|
||||
export function mapMessageFilterToQuery(form: MessageReachFilterForm) {
|
||||
const keyword = form.keyword.trim();
|
||||
return {
|
||||
status: form.status || undefined,
|
||||
channel: form.channel || undefined,
|
||||
keyword: keyword || undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/** 将模板筛选映射为查询参数。 */
|
||||
export function mapTemplateFilterToQuery(form: MessageTemplateFilterForm) {
|
||||
const keyword = form.keyword.trim();
|
||||
return {
|
||||
category: form.category || undefined,
|
||||
keyword: keyword || undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/** 将详情映射为编辑表单。 */
|
||||
export function mapDetailToEditorForm(
|
||||
detail: MemberMessageReachDetailDto,
|
||||
form: MessageReachEditorForm,
|
||||
) {
|
||||
form.messageId = detail.messageId;
|
||||
form.templateId = detail.templateId;
|
||||
form.title = detail.title;
|
||||
form.content = detail.content;
|
||||
form.channels = [...detail.channels];
|
||||
form.audienceType = detail.audienceType;
|
||||
form.audienceTags = [...detail.audienceTags];
|
||||
form.scheduleType = detail.scheduleType;
|
||||
form.scheduledAt =
|
||||
detail.scheduleType === 'scheduled' && detail.scheduledAt
|
||||
? dayjs(detail.scheduledAt)
|
||||
: null;
|
||||
}
|
||||
|
||||
/** 重置消息编辑表单。 */
|
||||
export function resetMessageEditorForm(form: MessageReachEditorForm) {
|
||||
form.messageId = '';
|
||||
form.templateId = undefined;
|
||||
form.title = '';
|
||||
form.content = '';
|
||||
form.channels = ['inapp'];
|
||||
form.audienceType = 'all';
|
||||
form.audienceTags = [];
|
||||
form.scheduleType = 'immediate';
|
||||
form.scheduledAt = null;
|
||||
}
|
||||
|
||||
/** 重置模板编辑表单。 */
|
||||
export function resetTemplateEditorForm(form: MessageTemplateEditorForm) {
|
||||
form.templateId = '';
|
||||
form.name = '';
|
||||
form.category = 'notice';
|
||||
form.content = '';
|
||||
}
|
||||
|
||||
/** 消息编辑表单转保存请求。 */
|
||||
export function mapMessageEditorFormToSavePayload(
|
||||
form: MessageReachEditorForm,
|
||||
submitAction: 'draft' | 'send',
|
||||
): SaveMemberMessageReachPayload {
|
||||
const payload: SaveMemberMessageReachPayload = {
|
||||
messageId: form.messageId || undefined,
|
||||
templateId: form.templateId || undefined,
|
||||
title: form.title.trim(),
|
||||
content: form.content.trim(),
|
||||
channels: [...form.channels],
|
||||
audienceType: form.audienceType,
|
||||
audienceTags: [...form.audienceTags],
|
||||
scheduleType: form.scheduleType,
|
||||
scheduledAt:
|
||||
form.scheduleType === 'scheduled' && form.scheduledAt
|
||||
? form.scheduledAt.toISOString()
|
||||
: undefined,
|
||||
submitAction,
|
||||
};
|
||||
return payload;
|
||||
}
|
||||
|
||||
/** 模板编辑表单转保存请求。 */
|
||||
export function mapTemplateEditorFormToSavePayload(
|
||||
form: MessageTemplateEditorForm,
|
||||
): SaveMemberMessageTemplatePayload {
|
||||
return {
|
||||
templateId: form.templateId || undefined,
|
||||
name: form.name.trim(),
|
||||
category: form.category,
|
||||
content: form.content.trim(),
|
||||
};
|
||||
}
|
||||
|
||||
/** 切换渠道。 */
|
||||
export function toggleChannel(
|
||||
channels: MemberMessageReachChannel[],
|
||||
channel: MemberMessageReachChannel,
|
||||
) {
|
||||
if (channels.includes(channel)) {
|
||||
return channels.filter((item) => item !== channel);
|
||||
}
|
||||
return [...channels, channel];
|
||||
}
|
||||
|
||||
/** 切换标签。 */
|
||||
export function toggleTag(tags: string[], tag: string) {
|
||||
if (tags.includes(tag)) {
|
||||
return tags.filter((item) => item !== tag);
|
||||
}
|
||||
return [...tags, tag];
|
||||
}
|
||||
|
||||
/** 解析时间类型。 */
|
||||
export function resolveScheduleType(value: string): MemberMessageScheduleType {
|
||||
return value === 'scheduled' ? 'scheduled' : 'immediate';
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type {
|
||||
MemberMessageTemplateDto,
|
||||
SaveMemberMessageReachPayload,
|
||||
} from '#/api/member/message-reach';
|
||||
import type {
|
||||
MemberMessageReachTabKey,
|
||||
MessageReachDetailViewModel,
|
||||
MessageReachEditorForm,
|
||||
} from '#/views/member/message-reach/types';
|
||||
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
deleteMemberMessageReachApi,
|
||||
saveMemberMessageReachApi,
|
||||
} from '#/api/member/message-reach';
|
||||
|
||||
import {
|
||||
mapDetailToEditorForm,
|
||||
mapMessageEditorFormToSavePayload,
|
||||
resetMessageEditorForm,
|
||||
toggleTag,
|
||||
} from './helpers';
|
||||
|
||||
interface CreateMessageActionsOptions {
|
||||
activeTab: Ref<MemberMessageReachTabKey>;
|
||||
audienceEstimateCount: Ref<number>;
|
||||
canManage: Ref<boolean>;
|
||||
detail: Ref<MessageReachDetailViewModel | null>;
|
||||
detailDrawerMessageId: Ref<string>;
|
||||
form: MessageReachEditorForm;
|
||||
isDetailDrawerOpen: Ref<boolean>;
|
||||
isMessageDrawerOpen: Ref<boolean>;
|
||||
isMessageSubmitting: Ref<boolean>;
|
||||
messageDrawerMode: Ref<'create' | 'edit'>;
|
||||
loadMessageDetail: (
|
||||
messageId: string,
|
||||
) => Promise<MessageReachDetailViewModel | null>;
|
||||
loadMessageList: () => Promise<void>;
|
||||
loadStats: () => Promise<void>;
|
||||
}
|
||||
|
||||
export function createMessageActions(options: CreateMessageActionsOptions) {
|
||||
function setMessageDrawerOpen(value: boolean) {
|
||||
options.isMessageDrawerOpen.value = value;
|
||||
}
|
||||
|
||||
function setMessageTitle(value: string) {
|
||||
options.form.title = value;
|
||||
}
|
||||
|
||||
function setMessageContent(value: string) {
|
||||
options.form.content = value;
|
||||
}
|
||||
|
||||
function setMessageChannel(channel: 'inapp' | 'sms' | 'wechat-mini') {
|
||||
if (
|
||||
options.form.channels.length === 1 &&
|
||||
options.form.channels[0] === channel
|
||||
) {
|
||||
return;
|
||||
}
|
||||
options.form.channels = [channel];
|
||||
}
|
||||
|
||||
function setAudienceType(value: 'all' | 'tag') {
|
||||
options.form.audienceType = value;
|
||||
if (value === 'all') {
|
||||
options.form.audienceTags = [];
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAudienceTag(value: string) {
|
||||
options.form.audienceTags = toggleTag(options.form.audienceTags, value);
|
||||
}
|
||||
|
||||
function setScheduleType(value: 'immediate' | 'scheduled') {
|
||||
options.form.scheduleType = value;
|
||||
if (value === 'immediate') {
|
||||
options.form.scheduledAt = null;
|
||||
}
|
||||
}
|
||||
|
||||
function setScheduledAt(value: Dayjs | null) {
|
||||
options.form.scheduledAt = value;
|
||||
}
|
||||
|
||||
function switchToTemplateTab() {
|
||||
options.activeTab.value = 'template';
|
||||
options.isMessageDrawerOpen.value = false;
|
||||
}
|
||||
|
||||
async function openCreateMessageDrawer() {
|
||||
if (!options.canManage.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
resetMessageEditorForm(options.form);
|
||||
options.audienceEstimateCount.value = 0;
|
||||
options.messageDrawerMode.value = 'create';
|
||||
options.isMessageDrawerOpen.value = true;
|
||||
}
|
||||
|
||||
async function openEditMessageDrawer(messageId: string) {
|
||||
if (!options.canManage.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const detail = await options.loadMessageDetail(messageId);
|
||||
if (!detail) {
|
||||
return;
|
||||
}
|
||||
|
||||
mapDetailToEditorForm(detail, options.form);
|
||||
options.audienceEstimateCount.value = detail.estimatedReachCount;
|
||||
options.messageDrawerMode.value = 'edit';
|
||||
options.isMessageDrawerOpen.value = true;
|
||||
}
|
||||
|
||||
async function openDetailDrawer(messageId: string) {
|
||||
options.detailDrawerMessageId.value = messageId;
|
||||
options.isDetailDrawerOpen.value = true;
|
||||
await options.loadMessageDetail(messageId);
|
||||
}
|
||||
|
||||
async function refreshDetailIfNeeded(messageId: string) {
|
||||
if (!options.isDetailDrawerOpen.value) {
|
||||
return;
|
||||
}
|
||||
if (options.detailDrawerMessageId.value !== messageId) {
|
||||
return;
|
||||
}
|
||||
await options.loadMessageDetail(messageId);
|
||||
}
|
||||
|
||||
function useTemplateToCreateMessage(template: MemberMessageTemplateDto) {
|
||||
if (!options.canManage.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
resetMessageEditorForm(options.form);
|
||||
options.form.templateId = template.templateId;
|
||||
options.form.title = template.name;
|
||||
options.form.content = template.content;
|
||||
options.audienceEstimateCount.value = 0;
|
||||
options.messageDrawerMode.value = 'create';
|
||||
options.isMessageDrawerOpen.value = true;
|
||||
options.activeTab.value = 'list';
|
||||
}
|
||||
|
||||
function validateMessagePayload(payload: SaveMemberMessageReachPayload) {
|
||||
if (!payload.title) {
|
||||
message.warning('请输入消息标题');
|
||||
return false;
|
||||
}
|
||||
if (!payload.content) {
|
||||
message.warning('请输入消息内容');
|
||||
return false;
|
||||
}
|
||||
if (payload.channels.length === 0) {
|
||||
message.warning('请至少选择一个推送渠道');
|
||||
return false;
|
||||
}
|
||||
if (payload.audienceType === 'tag' && payload.audienceTags.length === 0) {
|
||||
message.warning('请选择目标标签');
|
||||
return false;
|
||||
}
|
||||
if (payload.scheduleType === 'scheduled' && !payload.scheduledAt) {
|
||||
message.warning('请选择定时发送时间');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
async function submitMessage(submitAction: 'draft' | 'send') {
|
||||
if (!options.canManage.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = mapMessageEditorFormToSavePayload(
|
||||
options.form,
|
||||
submitAction,
|
||||
);
|
||||
if (!validateMessagePayload(payload)) {
|
||||
return;
|
||||
}
|
||||
|
||||
options.isMessageSubmitting.value = true;
|
||||
try {
|
||||
const result = await saveMemberMessageReachApi(payload);
|
||||
message.success(
|
||||
submitAction === 'send' ? '发送任务已提交' : '草稿已保存',
|
||||
);
|
||||
options.isMessageDrawerOpen.value = false;
|
||||
await Promise.all([options.loadStats(), options.loadMessageList()]);
|
||||
await refreshDetailIfNeeded(result.messageId);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error(submitAction === 'send' ? '发送失败' : '保存草稿失败');
|
||||
} finally {
|
||||
options.isMessageSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeMessage(messageId: string) {
|
||||
if (!options.canManage.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认删除消息？',
|
||||
content: '删除后无法恢复，且会取消未执行的发送任务。',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
try {
|
||||
await deleteMemberMessageReachApi({ messageId });
|
||||
message.success('删除成功');
|
||||
if (options.detailDrawerMessageId.value === messageId) {
|
||||
options.isDetailDrawerOpen.value = false;
|
||||
options.detailDrawerMessageId.value = '';
|
||||
options.detail.value = null;
|
||||
}
|
||||
await Promise.all([options.loadStats(), options.loadMessageList()]);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('删除失败');
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function setDetailDrawerOpen(value: boolean) {
|
||||
options.isDetailDrawerOpen.value = value;
|
||||
if (!value) {
|
||||
options.detailDrawerMessageId.value = '';
|
||||
options.detail.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
openCreateMessageDrawer,
|
||||
openDetailDrawer,
|
||||
openEditMessageDrawer,
|
||||
removeMessage,
|
||||
setAudienceType,
|
||||
setDetailDrawerOpen,
|
||||
setMessageContent,
|
||||
setMessageDrawerOpen,
|
||||
setMessageChannel,
|
||||
setMessageTitle,
|
||||
setScheduleType,
|
||||
setScheduledAt,
|
||||
submitMessage,
|
||||
switchToTemplateTab,
|
||||
toggleAudienceTag,
|
||||
useTemplateToCreateMessage,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { MessageTemplateEditorForm } from '#/views/member/message-reach/types';
|
||||
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
deleteMemberMessageTemplateApi,
|
||||
getMemberMessageTemplateDetailApi,
|
||||
saveMemberMessageTemplateApi,
|
||||
} from '#/api/member/message-reach';
|
||||
|
||||
import {
|
||||
mapTemplateEditorFormToSavePayload,
|
||||
resetTemplateEditorForm,
|
||||
} from './helpers';
|
||||
|
||||
interface CreateTemplateActionsOptions {
|
||||
canManage: Ref<boolean>;
|
||||
form: MessageTemplateEditorForm;
|
||||
isTemplateEditorLoading: Ref<boolean>;
|
||||
isTemplateEditorOpen: Ref<boolean>;
|
||||
isTemplateSubmitting: Ref<boolean>;
|
||||
loadTemplateList: () => Promise<void>;
|
||||
mode: Ref<'create' | 'edit'>;
|
||||
}
|
||||
|
||||
export function createTemplateActions(options: CreateTemplateActionsOptions) {
|
||||
function setTemplateEditorOpen(value: boolean) {
|
||||
options.isTemplateEditorOpen.value = value;
|
||||
}
|
||||
|
||||
function setTemplateName(value: string) {
|
||||
options.form.name = value;
|
||||
}
|
||||
|
||||
function setTemplateCategory(value: 'marketing' | 'notice' | 'recall') {
|
||||
options.form.category = value;
|
||||
}
|
||||
|
||||
function setTemplateContent(value: string) {
|
||||
options.form.content = value;
|
||||
}
|
||||
|
||||
function openCreateTemplateModal() {
|
||||
if (!options.canManage.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
options.mode.value = 'create';
|
||||
resetTemplateEditorForm(options.form);
|
||||
options.isTemplateEditorOpen.value = true;
|
||||
}
|
||||
|
||||
async function openEditTemplateModal(templateId: string) {
|
||||
if (!options.canManage.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
options.isTemplateEditorLoading.value = true;
|
||||
try {
|
||||
const detail = await getMemberMessageTemplateDetailApi({ templateId });
|
||||
options.mode.value = 'edit';
|
||||
options.form.templateId = detail.templateId;
|
||||
options.form.name = detail.name;
|
||||
options.form.category = detail.category;
|
||||
options.form.content = detail.content;
|
||||
options.isTemplateEditorOpen.value = true;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('加载模板详情失败');
|
||||
} finally {
|
||||
options.isTemplateEditorLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitTemplate() {
|
||||
if (!options.canManage.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = mapTemplateEditorFormToSavePayload(options.form);
|
||||
if (!payload.name) {
|
||||
message.warning('请输入模板名称');
|
||||
return;
|
||||
}
|
||||
if (!payload.content) {
|
||||
message.warning('请输入模板内容');
|
||||
return;
|
||||
}
|
||||
|
||||
options.isTemplateSubmitting.value = true;
|
||||
try {
|
||||
await saveMemberMessageTemplateApi(payload);
|
||||
message.success(
|
||||
options.mode.value === 'create' ? '模板创建成功' : '模板保存成功',
|
||||
);
|
||||
options.isTemplateEditorOpen.value = false;
|
||||
await options.loadTemplateList();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error(
|
||||
options.mode.value === 'create' ? '模板创建失败' : '模板保存失败',
|
||||
);
|
||||
} finally {
|
||||
options.isTemplateSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function removeTemplate(templateId: string) {
|
||||
if (!options.canManage.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认删除模板？',
|
||||
content: '删除后不可恢复，且不影响已发送消息。',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
try {
|
||||
await deleteMemberMessageTemplateApi({ templateId });
|
||||
message.success('删除成功');
|
||||
await options.loadTemplateList();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('删除失败');
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
openCreateTemplateModal,
|
||||
openEditTemplateModal,
|
||||
removeTemplate,
|
||||
setTemplateCategory,
|
||||
setTemplateContent,
|
||||
setTemplateEditorOpen,
|
||||
setTemplateName,
|
||||
submitTemplate,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,396 @@
|
||||
import type { MemberMessageReachTabKey } from '../types';
|
||||
|
||||
import type {
|
||||
MemberMessageReachChannel,
|
||||
MemberMessageReachDetailDto,
|
||||
MemberMessageReachStatus,
|
||||
MemberMessageTemplateCategory,
|
||||
} from '#/api/member/message-reach';
|
||||
|
||||
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import {
|
||||
createDefaultMessageReachEditorForm,
|
||||
createDefaultMessageReachFilterForm,
|
||||
createDefaultMessageReachPager,
|
||||
createDefaultMessageReachStats,
|
||||
createDefaultMessageTemplateEditorForm,
|
||||
createDefaultMessageTemplateFilterForm,
|
||||
createDefaultMessageTemplatePager,
|
||||
} from '../types';
|
||||
import {
|
||||
MEMBER_MESSAGE_REACH_MANAGE_PERMISSION,
|
||||
MEMBER_MESSAGE_REACH_VIEW_PERMISSION,
|
||||
MESSAGE_REACH_TAB_OPTIONS,
|
||||
} from './message-reach-page/constants';
|
||||
import { createDataActions } from './message-reach-page/data-actions';
|
||||
import {
|
||||
resetMessageEditorForm,
|
||||
resetTemplateEditorForm,
|
||||
} from './message-reach-page/helpers';
|
||||
import { createMessageActions } from './message-reach-page/message-actions';
|
||||
import { createTemplateActions } from './message-reach-page/template-actions';
|
||||
|
||||
export function useMemberMessageReachPage() {
|
||||
const accessStore = useAccessStore();
|
||||
|
||||
const activeTab = ref<MemberMessageReachTabKey>('list');
|
||||
|
||||
const stats = ref(createDefaultMessageReachStats());
|
||||
const isStatsLoading = ref(false);
|
||||
|
||||
const messageFilterForm = reactive(createDefaultMessageReachFilterForm());
|
||||
const messagePager = ref(createDefaultMessageReachPager());
|
||||
const isMessageLoading = ref(false);
|
||||
|
||||
const templateFilterForm = reactive(createDefaultMessageTemplateFilterForm());
|
||||
const templatePager = ref(createDefaultMessageTemplatePager());
|
||||
const isTemplateLoading = ref(false);
|
||||
|
||||
const detail = ref<MemberMessageReachDetailDto | null>(null);
|
||||
const isDetailLoading = ref(false);
|
||||
const isDetailDrawerOpen = ref(false);
|
||||
const detailDrawerMessageId = ref('');
|
||||
|
||||
const messageDrawerMode = ref<'create' | 'edit'>('create');
|
||||
const form = reactive(createDefaultMessageReachEditorForm());
|
||||
const isMessageDrawerOpen = ref(false);
|
||||
const isMessageSubmitting = ref(false);
|
||||
const audienceEstimateCount = ref(0);
|
||||
const isEstimatingAudience = ref(false);
|
||||
|
||||
const templateEditorMode = ref<'create' | 'edit'>('create');
|
||||
const templateForm = reactive(createDefaultMessageTemplateEditorForm());
|
||||
const isTemplateEditorOpen = ref(false);
|
||||
const isTemplateEditorLoading = ref(false);
|
||||
const isTemplateSubmitting = ref(false);
|
||||
|
||||
const accessCodeSet = computed(
|
||||
() => new Set((accessStore.accessCodes ?? []).map(String)),
|
||||
);
|
||||
const canManage = computed(() =>
|
||||
accessCodeSet.value.has(MEMBER_MESSAGE_REACH_MANAGE_PERMISSION),
|
||||
);
|
||||
const canView = computed(
|
||||
() =>
|
||||
canManage.value ||
|
||||
accessCodeSet.value.has(MEMBER_MESSAGE_REACH_VIEW_PERMISSION),
|
||||
);
|
||||
|
||||
const messageDrawerTitle = computed(() =>
|
||||
messageDrawerMode.value === 'create' ? '创建消息' : '编辑消息',
|
||||
);
|
||||
|
||||
const templateEditorTitle = computed(() =>
|
||||
templateEditorMode.value === 'create' ? '新建模板' : '编辑模板',
|
||||
);
|
||||
|
||||
const templateEditorSubmitText = computed(() =>
|
||||
templateEditorMode.value === 'create' ? '创建' : '保存',
|
||||
);
|
||||
|
||||
const {
|
||||
estimateAudience,
|
||||
loadMessageDetail,
|
||||
loadMessageList,
|
||||
loadStats,
|
||||
loadTemplateList,
|
||||
} = createDataActions({
|
||||
audienceEstimateCount,
|
||||
detail,
|
||||
isDetailLoading,
|
||||
isEstimatingAudience,
|
||||
isMessageLoading,
|
||||
isStatsLoading,
|
||||
isTemplateLoading,
|
||||
messageFilterForm,
|
||||
messagePager,
|
||||
stats,
|
||||
templateFilterForm,
|
||||
templatePager,
|
||||
});
|
||||
|
||||
const {
|
||||
openCreateMessageDrawer,
|
||||
openDetailDrawer,
|
||||
openEditMessageDrawer,
|
||||
removeMessage,
|
||||
setAudienceType,
|
||||
setDetailDrawerOpen,
|
||||
setMessageContent,
|
||||
setMessageDrawerOpen,
|
||||
setMessageChannel,
|
||||
setMessageTitle,
|
||||
setScheduleType,
|
||||
setScheduledAt,
|
||||
submitMessage,
|
||||
switchToTemplateTab,
|
||||
toggleAudienceTag,
|
||||
useTemplateToCreateMessage,
|
||||
} = createMessageActions({
|
||||
activeTab,
|
||||
audienceEstimateCount,
|
||||
canManage,
|
||||
detail,
|
||||
detailDrawerMessageId,
|
||||
form,
|
||||
isDetailDrawerOpen,
|
||||
isMessageDrawerOpen,
|
||||
isMessageSubmitting,
|
||||
messageDrawerMode,
|
||||
loadMessageDetail,
|
||||
loadMessageList,
|
||||
loadStats,
|
||||
});
|
||||
|
||||
const {
|
||||
openCreateTemplateModal,
|
||||
openEditTemplateModal,
|
||||
removeTemplate,
|
||||
setTemplateCategory,
|
||||
setTemplateContent,
|
||||
setTemplateEditorOpen,
|
||||
setTemplateName,
|
||||
submitTemplate,
|
||||
} = createTemplateActions({
|
||||
canManage,
|
||||
form: templateForm,
|
||||
isTemplateEditorLoading,
|
||||
isTemplateEditorOpen,
|
||||
isTemplateSubmitting,
|
||||
loadTemplateList,
|
||||
mode: templateEditorMode,
|
||||
});
|
||||
|
||||
function setActiveTab(value: MemberMessageReachTabKey) {
|
||||
activeTab.value = value;
|
||||
}
|
||||
|
||||
function setMessageStatusFilter(value: string) {
|
||||
messageFilterForm.status = (value || undefined) as
|
||||
| MemberMessageReachStatus
|
||||
| undefined;
|
||||
}
|
||||
|
||||
function setMessageChannelFilter(value: string) {
|
||||
messageFilterForm.channel = (value || undefined) as
|
||||
| MemberMessageReachChannel
|
||||
| undefined;
|
||||
}
|
||||
|
||||
function setMessageKeyword(value: string) {
|
||||
messageFilterForm.keyword = value;
|
||||
}
|
||||
|
||||
async function applyMessageFilters() {
|
||||
messagePager.value = {
|
||||
...messagePager.value,
|
||||
page: 1,
|
||||
};
|
||||
await loadMessageList();
|
||||
}
|
||||
|
||||
async function resetMessageFilters() {
|
||||
messageFilterForm.status = undefined;
|
||||
messageFilterForm.channel = undefined;
|
||||
messageFilterForm.keyword = '';
|
||||
messagePager.value = {
|
||||
...messagePager.value,
|
||||
page: 1,
|
||||
};
|
||||
await loadMessageList();
|
||||
}
|
||||
|
||||
async function handleMessagePageChange(page: number, pageSize: number) {
|
||||
messagePager.value = {
|
||||
...messagePager.value,
|
||||
page,
|
||||
pageSize,
|
||||
};
|
||||
await loadMessageList();
|
||||
}
|
||||
|
||||
function setTemplateCategoryFilter(value: string) {
|
||||
templateFilterForm.category = (value || undefined) as
|
||||
| MemberMessageTemplateCategory
|
||||
| undefined;
|
||||
}
|
||||
|
||||
function setTemplateKeyword(value: string) {
|
||||
templateFilterForm.keyword = value;
|
||||
}
|
||||
|
||||
async function applyTemplateFilters() {
|
||||
templatePager.value = {
|
||||
...templatePager.value,
|
||||
page: 1,
|
||||
};
|
||||
await loadTemplateList();
|
||||
}
|
||||
|
||||
async function resetTemplateFilters() {
|
||||
templateFilterForm.category = undefined;
|
||||
templateFilterForm.keyword = '';
|
||||
templatePager.value = {
|
||||
...templatePager.value,
|
||||
page: 1,
|
||||
};
|
||||
await loadTemplateList();
|
||||
}
|
||||
|
||||
async function handleTemplatePageChange(page: number, pageSize: number) {
|
||||
templatePager.value = {
|
||||
...templatePager.value,
|
||||
page,
|
||||
pageSize,
|
||||
};
|
||||
await loadTemplateList();
|
||||
}
|
||||
|
||||
async function setAudienceTypeAndEstimate(value: 'all' | 'tag') {
|
||||
setAudienceType(value);
|
||||
if (value === 'all') {
|
||||
audienceEstimateCount.value = 0;
|
||||
return;
|
||||
}
|
||||
await estimateAudience('tag', form.audienceTags);
|
||||
}
|
||||
|
||||
async function toggleAudienceTagAndEstimate(tag: string) {
|
||||
toggleAudienceTag(tag);
|
||||
if (form.audienceType !== 'tag') {
|
||||
return;
|
||||
}
|
||||
await estimateAudience('tag', form.audienceTags);
|
||||
}
|
||||
|
||||
async function submitDraftMessage() {
|
||||
await submitMessage('draft');
|
||||
}
|
||||
|
||||
async function submitSendMessage() {
|
||||
await submitMessage('send');
|
||||
}
|
||||
|
||||
function clearByPermission() {
|
||||
stats.value = createDefaultMessageReachStats();
|
||||
messagePager.value = createDefaultMessageReachPager();
|
||||
templatePager.value = createDefaultMessageTemplatePager();
|
||||
detail.value = null;
|
||||
isDetailDrawerOpen.value = false;
|
||||
detailDrawerMessageId.value = '';
|
||||
resetMessageEditorForm(form);
|
||||
audienceEstimateCount.value = 0;
|
||||
isMessageDrawerOpen.value = false;
|
||||
resetTemplateEditorForm(templateForm);
|
||||
isTemplateEditorOpen.value = false;
|
||||
}
|
||||
|
||||
async function bootstrapPageData() {
|
||||
await Promise.all([loadStats(), loadMessageList(), loadTemplateList()]);
|
||||
}
|
||||
|
||||
watch(canView, async (value, oldValue) => {
|
||||
if (value === oldValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
clearByPermission();
|
||||
return;
|
||||
}
|
||||
|
||||
await bootstrapPageData();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
if (!canView.value) {
|
||||
clearByPermission();
|
||||
return;
|
||||
}
|
||||
|
||||
await bootstrapPageData();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
if (!canView.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
messagePager.value.totalCount === 0 &&
|
||||
templatePager.value.totalCount === 0
|
||||
) {
|
||||
void bootstrapPageData();
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
activeTab,
|
||||
applyMessageFilters,
|
||||
applyTemplateFilters,
|
||||
audienceEstimateCount,
|
||||
canManage,
|
||||
canView,
|
||||
detail,
|
||||
form,
|
||||
handleMessagePageChange,
|
||||
handleTemplatePageChange,
|
||||
isDetailDrawerOpen,
|
||||
isDetailLoading,
|
||||
isEstimatingAudience,
|
||||
isMessageDrawerOpen,
|
||||
isMessageLoading,
|
||||
isMessageSubmitting,
|
||||
isStatsLoading,
|
||||
isTemplateEditorLoading,
|
||||
isTemplateEditorOpen,
|
||||
isTemplateLoading,
|
||||
isTemplateSubmitting,
|
||||
messageDrawerTitle,
|
||||
messageFilterForm,
|
||||
messagePager,
|
||||
openCreateMessageDrawer,
|
||||
openCreateTemplateModal,
|
||||
openDetailDrawer,
|
||||
openEditMessageDrawer,
|
||||
openEditTemplateModal,
|
||||
removeMessage,
|
||||
removeTemplate,
|
||||
resetMessageFilters,
|
||||
resetTemplateFilters,
|
||||
setActiveTab,
|
||||
setAudienceTypeAndEstimate,
|
||||
setDetailDrawerOpen,
|
||||
setMessageChannel,
|
||||
setMessageChannelFilter,
|
||||
setMessageContent,
|
||||
setMessageDrawerOpen,
|
||||
setMessageKeyword,
|
||||
setMessageStatusFilter,
|
||||
setMessageTitle,
|
||||
setScheduleType,
|
||||
setScheduledAt,
|
||||
setTemplateCategory,
|
||||
setTemplateCategoryFilter,
|
||||
setTemplateContent,
|
||||
setTemplateEditorOpen,
|
||||
setTemplateKeyword,
|
||||
setTemplateName,
|
||||
stats,
|
||||
submitDraftMessage,
|
||||
submitSendMessage,
|
||||
submitTemplate,
|
||||
switchToTemplateTab,
|
||||
tabOptions: MESSAGE_REACH_TAB_OPTIONS,
|
||||
templateEditorSubmitText,
|
||||
templateEditorTitle,
|
||||
templateFilterForm,
|
||||
templateForm,
|
||||
templatePager,
|
||||
toggleAudienceTagAndEstimate,
|
||||
useTemplateToCreateMessage,
|
||||
};
|
||||
}
|
||||
197
apps/web-antd/src/views/member/message-reach/index.vue
Normal file
197
apps/web-antd/src/views/member/message-reach/index.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<script setup lang="ts">
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Empty, Segmented } from 'ant-design-vue';
|
||||
|
||||
import MessageReachDetailDrawer from './components/MessageReachDetailDrawer.vue';
|
||||
import MessageReachEditorDrawer from './components/MessageReachEditorDrawer.vue';
|
||||
import MessageReachFilterBar from './components/MessageReachFilterBar.vue';
|
||||
import MessageReachStatsCards from './components/MessageReachStatsCards.vue';
|
||||
import MessageReachTableCard from './components/MessageReachTableCard.vue';
|
||||
import MessageTemplateCardGrid from './components/MessageTemplateCardGrid.vue';
|
||||
import MessageTemplateEditorModal from './components/MessageTemplateEditorModal.vue';
|
||||
import MessageTemplateToolbar from './components/MessageTemplateToolbar.vue';
|
||||
import { useMemberMessageReachPage } from './composables/useMemberMessageReachPage';
|
||||
|
||||
const {
|
||||
activeTab,
|
||||
applyMessageFilters,
|
||||
applyTemplateFilters,
|
||||
audienceEstimateCount,
|
||||
canManage,
|
||||
canView,
|
||||
detail,
|
||||
form,
|
||||
handleMessagePageChange,
|
||||
handleTemplatePageChange,
|
||||
isDetailDrawerOpen,
|
||||
isDetailLoading,
|
||||
isEstimatingAudience,
|
||||
isMessageDrawerOpen,
|
||||
isMessageLoading,
|
||||
isMessageSubmitting,
|
||||
isStatsLoading,
|
||||
isTemplateEditorLoading,
|
||||
isTemplateEditorOpen,
|
||||
isTemplateLoading,
|
||||
isTemplateSubmitting,
|
||||
messageDrawerTitle,
|
||||
messageFilterForm,
|
||||
messagePager,
|
||||
openCreateMessageDrawer,
|
||||
openCreateTemplateModal,
|
||||
openDetailDrawer,
|
||||
openEditMessageDrawer,
|
||||
openEditTemplateModal,
|
||||
removeMessage,
|
||||
removeTemplate,
|
||||
setActiveTab,
|
||||
setAudienceTypeAndEstimate,
|
||||
setDetailDrawerOpen,
|
||||
setMessageChannel,
|
||||
setMessageChannelFilter,
|
||||
setMessageContent,
|
||||
setMessageDrawerOpen,
|
||||
setMessageKeyword,
|
||||
setMessageStatusFilter,
|
||||
setMessageTitle,
|
||||
setScheduleType,
|
||||
setScheduledAt,
|
||||
setTemplateCategory,
|
||||
setTemplateCategoryFilter,
|
||||
setTemplateContent,
|
||||
setTemplateEditorOpen,
|
||||
setTemplateKeyword,
|
||||
setTemplateName,
|
||||
stats,
|
||||
submitDraftMessage,
|
||||
submitSendMessage,
|
||||
submitTemplate,
|
||||
switchToTemplateTab,
|
||||
tabOptions,
|
||||
templateEditorSubmitText,
|
||||
templateEditorTitle,
|
||||
templateFilterForm,
|
||||
templateForm,
|
||||
templatePager,
|
||||
toggleAudienceTagAndEstimate,
|
||||
useTemplateToCreateMessage,
|
||||
} = useMemberMessageReachPage();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page title="消息触达" content-class="page-member-message-reach">
|
||||
<div class="mmr-page">
|
||||
<div class="mmr-topbar">
|
||||
<Segmented
|
||||
class="mmr-tab-switch"
|
||||
:value="activeTab"
|
||||
:options="tabOptions"
|
||||
@update:value="
|
||||
(value) => setActiveTab((value as 'list' | 'template') || 'list')
|
||||
"
|
||||
/>
|
||||
|
||||
<span v-if="canView && !canManage" class="mmr-readonly-tip">
|
||||
当前为只读权限
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<template v-if="canView">
|
||||
<section v-show="activeTab === 'list'" class="mmr-tab-panel">
|
||||
<MessageReachFilterBar
|
||||
:filters="messageFilterForm"
|
||||
:can-manage="canManage"
|
||||
@create="openCreateMessageDrawer"
|
||||
@update:status="setMessageStatusFilter"
|
||||
@update:channel="setMessageChannelFilter"
|
||||
@update:keyword="setMessageKeyword"
|
||||
@search="applyMessageFilters"
|
||||
/>
|
||||
|
||||
<MessageReachStatsCards :stats="stats" :loading="isStatsLoading" />
|
||||
|
||||
<MessageReachTableCard
|
||||
:can-manage="canManage"
|
||||
:pager="messagePager"
|
||||
:loading="isMessageLoading"
|
||||
@detail="openDetailDrawer"
|
||||
@edit="openEditMessageDrawer"
|
||||
@delete="removeMessage"
|
||||
@page-change="handleMessagePageChange"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section v-show="activeTab === 'template'" class="mmr-tab-panel">
|
||||
<MessageTemplateToolbar
|
||||
:filters="templateFilterForm"
|
||||
:can-manage="canManage"
|
||||
@create="openCreateTemplateModal"
|
||||
@update:category="setTemplateCategoryFilter"
|
||||
@update:keyword="setTemplateKeyword"
|
||||
@search="applyTemplateFilters"
|
||||
/>
|
||||
|
||||
<MessageTemplateCardGrid
|
||||
:can-manage="canManage"
|
||||
:pager="templatePager"
|
||||
:loading="isTemplateLoading"
|
||||
@use="useTemplateToCreateMessage"
|
||||
@edit="openEditTemplateModal"
|
||||
@delete="removeTemplate"
|
||||
@page-change="handleTemplatePageChange"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<Empty v-else description="暂无消息触达页面访问权限" />
|
||||
</div>
|
||||
|
||||
<MessageReachEditorDrawer
|
||||
:open="isMessageDrawerOpen"
|
||||
:title="messageDrawerTitle"
|
||||
:form="form"
|
||||
:can-manage="canManage"
|
||||
:submitting="isMessageSubmitting"
|
||||
:audience-estimate-count="audienceEstimateCount"
|
||||
:estimating-audience="isEstimatingAudience"
|
||||
@close="setMessageDrawerOpen(false)"
|
||||
@set-title="setMessageTitle"
|
||||
@set-content="setMessageContent"
|
||||
@set-channel="setMessageChannel"
|
||||
@set-audience-type="setAudienceTypeAndEstimate"
|
||||
@toggle-audience-tag="toggleAudienceTagAndEstimate"
|
||||
@set-schedule-type="setScheduleType"
|
||||
@set-scheduled-at="setScheduledAt"
|
||||
@switch-to-template-tab="switchToTemplateTab"
|
||||
@submit-draft="submitDraftMessage"
|
||||
@submit-send="submitSendMessage"
|
||||
/>
|
||||
|
||||
<MessageReachDetailDrawer
|
||||
:open="isDetailDrawerOpen"
|
||||
:loading="isDetailLoading"
|
||||
:detail="detail"
|
||||
@close="setDetailDrawerOpen(false)"
|
||||
/>
|
||||
|
||||
<MessageTemplateEditorModal
|
||||
:open="isTemplateEditorOpen"
|
||||
:title="templateEditorTitle"
|
||||
:submit-text="templateEditorSubmitText"
|
||||
:form="templateForm"
|
||||
:can-manage="canManage"
|
||||
:loading="isTemplateEditorLoading"
|
||||
:submitting="isTemplateSubmitting"
|
||||
@close="setTemplateEditorOpen(false)"
|
||||
@set-name="setTemplateName"
|
||||
@set-category="setTemplateCategory"
|
||||
@set-content="setTemplateContent"
|
||||
@submit="submitTemplate"
|
||||
/>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@import './styles/index.less';
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
.page-member-message-reach {
|
||||
.mmr-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mmr-tab-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mmr-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mmr-time-text {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mmr-action-link {
|
||||
padding-inline: 0;
|
||||
}
|
||||
}
|
||||
163
apps/web-antd/src/views/member/message-reach/styles/drawer.less
Normal file
163
apps/web-antd/src/views/member/message-reach/styles/drawer.less
Normal file
@@ -0,0 +1,163 @@
|
||||
.page-member-message-reach {
|
||||
.mmr-editor-form {
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mmr-pill-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mmr-pill {
|
||||
padding: 4px 12px;
|
||||
margin-right: 0;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.mmr-pill.ant-tag-checkable-checked {
|
||||
color: #fff;
|
||||
background: #1677ff;
|
||||
}
|
||||
|
||||
.mmr-tag-panel {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mmr-reach-row {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.mmr-form-hint {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.mmr-scheduled-picker {
|
||||
width: 260px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mmr-template-link-wrap {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mmr-template-link {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.mmr-drawer-footer {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mmr-detail-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mmr-detail-section-title {
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.mmr-detail-title-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mmr-detail-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.mmr-detail-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px 16px;
|
||||
font-size: 13px;
|
||||
|
||||
.label {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.channels {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mmr-detail-stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mmr-detail-stat-item {
|
||||
padding: 10px 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
|
||||
.label {
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
}
|
||||
|
||||
.mmr-detail-content {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
color: #374151;
|
||||
white-space: pre-wrap;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #f1f5f9;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mmr-detail-error {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.mmr-recipient-table {
|
||||
.ant-table-thead > tr > th {
|
||||
font-size: 12px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mmr-error-text {
|
||||
display: inline-block;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@import './base.less';
|
||||
@import './layout.less';
|
||||
@import './list.less';
|
||||
@import './template.less';
|
||||
@import './drawer.less';
|
||||
@import './modal.less';
|
||||
@import './responsive.less';
|
||||
@@ -0,0 +1,78 @@
|
||||
.page-member-message-reach {
|
||||
.mmr-topbar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mmr-tab-switch {
|
||||
--ant-segmented-item-selected-bg: #fff;
|
||||
--ant-segmented-item-selected-color: #1677ff;
|
||||
}
|
||||
|
||||
.mmr-readonly-tip {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.mmr-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 7%);
|
||||
}
|
||||
|
||||
.mmr-select {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.mmr-keyword-input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.mmr-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mmr-stat-card {
|
||||
padding: 16px 18px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 10px rgb(15 23 42 / 7%);
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.mmr-stat-card:hover {
|
||||
box-shadow: 0 10px 20px rgb(15 23 42 / 11%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.mmr-stat-label {
|
||||
margin-bottom: 6px;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.mmr-stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.mmr-stat-unit {
|
||||
margin-left: 2px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.page-member-message-reach {
|
||||
.mmr-table-wrap {
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
|
||||
}
|
||||
|
||||
.mmr-table {
|
||||
.ant-table-thead > tr > th {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
background: #f8fafc;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
color: #0f172a;
|
||||
}
|
||||
}
|
||||
|
||||
.mmr-message-title {
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.mmr-message-metric {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.mmr-channel-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.mmr-table-actions {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mmr-pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.page-member-message-reach {
|
||||
.mmr-template-modal-form {
|
||||
.ant-form-item {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.page-member-message-reach {
|
||||
@media (max-width: 1200px) {
|
||||
.mmr-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.mmr-template-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mmr-detail-stat-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mmr-toolbar {
|
||||
align-items: stretch;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.mmr-topbar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mmr-select,
|
||||
.mmr-keyword-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mmr-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mmr-detail-meta {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mmr-detail-stat-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mmr-scheduled-picker {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
.page-member-message-reach {
|
||||
.mmr-template-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mmr-template-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.mmr-template-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-height: 172px;
|
||||
padding: 18px 20px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.mmr-template-card:hover {
|
||||
box-shadow: 0 10px 20px rgb(15 23 42 / 12%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.mmr-template-head {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mmr-template-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mmr-template-preview {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
line-height: 1.65;
|
||||
color: #6b7280;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.mmr-template-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.mmr-template-usage {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.mmr-template-actions {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mmr-template-empty {
|
||||
padding: 36px 0;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 10px rgb(15 23 42 / 7%);
|
||||
}
|
||||
}
|
||||
147
apps/web-antd/src/views/member/message-reach/types.ts
Normal file
147
apps/web-antd/src/views/member/message-reach/types.ts
Normal file
@@ -0,0 +1,147 @@
|
||||
/**
|
||||
* 文件职责：会员消息触达页面类型定义与默认值工厂。
|
||||
*/
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
import type {
|
||||
MemberMessageAudienceType,
|
||||
MemberMessageReachChannel,
|
||||
MemberMessageReachDetailDto,
|
||||
MemberMessageReachListItemDto,
|
||||
MemberMessageReachStatsDto,
|
||||
MemberMessageReachStatus,
|
||||
MemberMessageScheduleType,
|
||||
MemberMessageTemplateCategory,
|
||||
MemberMessageTemplateDto,
|
||||
} from '#/api/member/message-reach';
|
||||
|
||||
/** 页面主 Tab。 */
|
||||
export type MemberMessageReachTabKey = 'list' | 'template';
|
||||
|
||||
/** 消息列表筛选表单。 */
|
||||
export interface MessageReachFilterForm {
|
||||
channel?: MemberMessageReachChannel;
|
||||
keyword: string;
|
||||
status?: MemberMessageReachStatus;
|
||||
}
|
||||
|
||||
/** 模板列表筛选表单。 */
|
||||
export interface MessageTemplateFilterForm {
|
||||
category?: MemberMessageTemplateCategory;
|
||||
keyword: string;
|
||||
}
|
||||
|
||||
/** 消息列表分页状态。 */
|
||||
export interface MessageReachPager {
|
||||
items: MemberMessageReachListItemDto[];
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
/** 模板列表分页状态。 */
|
||||
export interface MessageTemplatePager {
|
||||
items: MemberMessageTemplateDto[];
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
/** 消息编辑表单。 */
|
||||
export interface MessageReachEditorForm {
|
||||
audienceTags: string[];
|
||||
audienceType: MemberMessageAudienceType;
|
||||
channels: MemberMessageReachChannel[];
|
||||
content: string;
|
||||
messageId: string;
|
||||
scheduleType: MemberMessageScheduleType;
|
||||
scheduledAt: Dayjs | null;
|
||||
templateId?: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
/** 模板编辑表单。 */
|
||||
export interface MessageTemplateEditorForm {
|
||||
category: MemberMessageTemplateCategory;
|
||||
content: string;
|
||||
name: string;
|
||||
templateId: string;
|
||||
}
|
||||
|
||||
/** 页面统计视图模型。 */
|
||||
export type MessageReachStatsViewModel = MemberMessageReachStatsDto;
|
||||
|
||||
/** 消息详情视图模型。 */
|
||||
export type MessageReachDetailViewModel = MemberMessageReachDetailDto;
|
||||
|
||||
/** 默认消息列表筛选。 */
|
||||
export function createDefaultMessageReachFilterForm(): MessageReachFilterForm {
|
||||
return {
|
||||
status: undefined,
|
||||
channel: undefined,
|
||||
keyword: '',
|
||||
};
|
||||
}
|
||||
|
||||
/** 默认模板列表筛选。 */
|
||||
export function createDefaultMessageTemplateFilterForm(): MessageTemplateFilterForm {
|
||||
return {
|
||||
category: undefined,
|
||||
keyword: '',
|
||||
};
|
||||
}
|
||||
|
||||
/** 默认消息分页。 */
|
||||
export function createDefaultMessageReachPager(): MessageReachPager {
|
||||
return {
|
||||
items: [],
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
};
|
||||
}
|
||||
|
||||
/** 默认模板分页。 */
|
||||
export function createDefaultMessageTemplatePager(): MessageTemplatePager {
|
||||
return {
|
||||
items: [],
|
||||
page: 1,
|
||||
pageSize: 12,
|
||||
totalCount: 0,
|
||||
};
|
||||
}
|
||||
|
||||
/** 默认消息编辑表单。 */
|
||||
export function createDefaultMessageReachEditorForm(): MessageReachEditorForm {
|
||||
return {
|
||||
messageId: '',
|
||||
templateId: undefined,
|
||||
title: '',
|
||||
content: '',
|
||||
channels: ['inapp'],
|
||||
audienceType: 'all',
|
||||
audienceTags: [],
|
||||
scheduleType: 'immediate',
|
||||
scheduledAt: null,
|
||||
};
|
||||
}
|
||||
|
||||
/** 默认模板编辑表单。 */
|
||||
export function createDefaultMessageTemplateEditorForm(): MessageTemplateEditorForm {
|
||||
return {
|
||||
templateId: '',
|
||||
name: '',
|
||||
category: 'notice',
|
||||
content: '',
|
||||
};
|
||||
}
|
||||
|
||||
/** 默认统计数据。 */
|
||||
export function createDefaultMessageReachStats(): MessageReachStatsViewModel {
|
||||
return {
|
||||
monthlySentCount: 0,
|
||||
reachMemberCount: 0,
|
||||
openRate: 0,
|
||||
conversionRate: 0,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user