feat(project): implement marketing calendar module
Some checks failed
Build and Deploy TenantUI / build-and-deploy (push) Failing after 1s
Some checks failed
Build and Deploy TenantUI / build-and-deploy (push) Failing after 1s
This commit is contained in:
133
apps/web-antd/src/api/marketing/calendar.ts
Normal file
133
apps/web-antd/src/api/marketing/calendar.ts
Normal file
@@ -0,0 +1,133 @@
|
||||
/**
|
||||
* 文件职责：营销中心营销日历 API 与 DTO 定义。
|
||||
*/
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/** 总览查询参数。 */
|
||||
export interface MarketingCalendarOverviewQuery {
|
||||
month: number;
|
||||
storeId: string;
|
||||
year: number;
|
||||
}
|
||||
|
||||
/** 日期头。 */
|
||||
export interface MarketingCalendarDayDto {
|
||||
day: number;
|
||||
isToday: boolean;
|
||||
isWeekend: boolean;
|
||||
}
|
||||
|
||||
/** 图例。 */
|
||||
export interface MarketingCalendarLegendDto {
|
||||
color: string;
|
||||
label: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
/** 顶部统计。 */
|
||||
export interface MarketingCalendarStatsDto {
|
||||
estimatedDiscountAmount: number;
|
||||
maxConcurrentCount: number;
|
||||
ongoingCount: number;
|
||||
totalActivityCount: number;
|
||||
}
|
||||
|
||||
/** 活动条。 */
|
||||
export interface MarketingCalendarActivityBarDto {
|
||||
barId: string;
|
||||
endDay: number;
|
||||
isDimmed: boolean;
|
||||
isMilestone: boolean;
|
||||
label: string;
|
||||
startDay: number;
|
||||
}
|
||||
|
||||
/** 详情字段。 */
|
||||
export interface MarketingCalendarDetailFieldDto {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
/** 活动详情。 */
|
||||
export interface MarketingCalendarActivityDetailDto {
|
||||
description: string;
|
||||
fields: MarketingCalendarDetailFieldDto[];
|
||||
moduleName: string;
|
||||
}
|
||||
|
||||
/** 活动。 */
|
||||
export interface MarketingCalendarActivityDto {
|
||||
activityId: string;
|
||||
bars: MarketingCalendarActivityBarDto[];
|
||||
calendarType: string;
|
||||
color: string;
|
||||
detail: MarketingCalendarActivityDetailDto;
|
||||
displayStatus: string;
|
||||
endDate: string;
|
||||
estimatedDiscountAmount: number;
|
||||
isDimmed: boolean;
|
||||
name: string;
|
||||
sourceId: string;
|
||||
sourceType: string;
|
||||
startDate: string;
|
||||
summary: string;
|
||||
}
|
||||
|
||||
/** 冲突活动摘要。 */
|
||||
export interface MarketingCalendarConflictActivityDto {
|
||||
activityId: string;
|
||||
calendarType: string;
|
||||
color: string;
|
||||
displayStatus: string;
|
||||
name: string;
|
||||
summary: string;
|
||||
}
|
||||
|
||||
/** 冲突区间。 */
|
||||
export interface MarketingCalendarConflictDto {
|
||||
activities: MarketingCalendarConflictActivityDto[];
|
||||
activityCount: number;
|
||||
activityIds: string[];
|
||||
conflictId: string;
|
||||
endDay: number;
|
||||
maxConcurrentCount: number;
|
||||
startDay: number;
|
||||
}
|
||||
|
||||
/** 冲突横幅。 */
|
||||
export interface MarketingCalendarConflictBannerDto {
|
||||
activityCount: number;
|
||||
conflictCount: number;
|
||||
conflictId: string;
|
||||
endDay: number;
|
||||
maxConcurrentCount: number;
|
||||
startDay: number;
|
||||
}
|
||||
|
||||
/** 营销日历总览。 */
|
||||
export interface MarketingCalendarOverviewDto {
|
||||
activities: MarketingCalendarActivityDto[];
|
||||
conflictBanner: MarketingCalendarConflictBannerDto | null;
|
||||
conflicts: MarketingCalendarConflictDto[];
|
||||
days: MarketingCalendarDayDto[];
|
||||
legends: MarketingCalendarLegendDto[];
|
||||
month: string;
|
||||
monthEndDate: string;
|
||||
monthStartDate: string;
|
||||
monthValue: number;
|
||||
stats: MarketingCalendarStatsDto;
|
||||
todayDay: number;
|
||||
year: number;
|
||||
}
|
||||
|
||||
/** 查询营销日历总览。 */
|
||||
export async function getMarketingCalendarOverviewApi(
|
||||
params: MarketingCalendarOverviewQuery,
|
||||
) {
|
||||
return requestClient.get<MarketingCalendarOverviewDto>(
|
||||
'/marketing/calendar/overview',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -183,6 +183,7 @@ export async function deleteMarketingCouponApi(data: DeleteMarketingCouponDto) {
|
||||
return requestClient.post('/marketing/coupon/delete', data);
|
||||
}
|
||||
|
||||
export * from './calendar';
|
||||
export * from './flash-sale';
|
||||
export * from './full-reduction';
|
||||
export * from './new-customer';
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import type { MarketingCalendarActivityDto } from '#/api/marketing';
|
||||
|
||||
import { Drawer, Empty, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
CALENDAR_STATUS_TEXT_MAP,
|
||||
CALENDAR_TYPE_TEXT_MAP,
|
||||
} from '../composables/marketing-calendar-page/constants';
|
||||
|
||||
defineProps<{
|
||||
activity: MarketingCalendarActivityDto | null;
|
||||
open: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer
|
||||
:open="open"
|
||||
title="活动详情"
|
||||
width="560"
|
||||
class="mc-detail-drawer"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<template v-if="activity">
|
||||
<div class="mc-detail-title">{{ activity.name }}</div>
|
||||
<div class="mc-detail-meta">
|
||||
<Tag color="blue">
|
||||
{{
|
||||
CALENDAR_TYPE_TEXT_MAP[activity.calendarType] ??
|
||||
activity.calendarType
|
||||
}}
|
||||
</Tag>
|
||||
<Tag :color="activity.isDimmed ? 'default' : 'green'">
|
||||
{{
|
||||
CALENDAR_STATUS_TEXT_MAP[activity.displayStatus] ??
|
||||
activity.displayStatus
|
||||
}}
|
||||
</Tag>
|
||||
</div>
|
||||
<div class="mc-detail-desc">{{ activity.detail.description }}</div>
|
||||
|
||||
<div class="mc-detail-fields">
|
||||
<div
|
||||
v-for="field in activity.detail.fields"
|
||||
:key="`${activity.activityId}-${field.label}`"
|
||||
class="mc-detail-field"
|
||||
>
|
||||
<span class="label">{{ field.label }}</span>
|
||||
<span class="value">{{ field.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Empty v-else description="暂无活动详情" />
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import type { MarketingCalendarConflictBannerDto } from '#/api/marketing';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
defineProps<{
|
||||
banner: MarketingCalendarConflictBannerDto | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'openConflict', conflictId: string): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
v-if="banner"
|
||||
type="button"
|
||||
class="mc-conflict-banner"
|
||||
@click="emit('openConflict', banner.conflictId)"
|
||||
>
|
||||
<span class="mc-conflict-banner-icon">
|
||||
<IconifyIcon icon="lucide:alert-triangle" />
|
||||
</span>
|
||||
<span class="mc-conflict-banner-text">
|
||||
{{ banner.startDay }}日~{{ banner.endDay }}日 有
|
||||
<b>{{ banner.activityCount }}个活动</b>
|
||||
同时进行，请注意优惠叠加可能影响利润
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import type {
|
||||
MarketingCalendarActivityDto,
|
||||
MarketingCalendarConflictDto,
|
||||
} from '#/api/marketing';
|
||||
|
||||
import { Button, Drawer, Empty, Tag } from 'ant-design-vue';
|
||||
|
||||
import { CALENDAR_TYPE_TEXT_MAP } from '../composables/marketing-calendar-page/constants';
|
||||
|
||||
defineProps<{
|
||||
activities: MarketingCalendarActivityDto[];
|
||||
conflict: MarketingCalendarConflictDto | null;
|
||||
open: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'viewActivity', activityId: string): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer
|
||||
:open="open"
|
||||
title="冲突详情"
|
||||
width="620"
|
||||
class="mc-detail-drawer"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<template v-if="conflict">
|
||||
<div class="mc-conflict-head">
|
||||
{{ conflict.startDay }}日~{{ conflict.endDay }}日，最大并行
|
||||
{{ conflict.maxConcurrentCount }} 个活动
|
||||
</div>
|
||||
|
||||
<div v-if="activities.length > 0" class="mc-conflict-list">
|
||||
<div
|
||||
v-for="item in activities"
|
||||
:key="item.activityId"
|
||||
class="mc-conflict-item"
|
||||
>
|
||||
<div class="left">
|
||||
<span class="dot" :style="{ background: item.color }"></span>
|
||||
<div class="content">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="summary">{{ item.summary }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<Tag>
|
||||
{{
|
||||
CALENDAR_TYPE_TEXT_MAP[item.calendarType] ?? item.calendarType
|
||||
}}
|
||||
</Tag>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="emit('viewActivity', item.activityId)"
|
||||
>
|
||||
查看活动
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Empty v-else description="暂无冲突活动明细" />
|
||||
</template>
|
||||
|
||||
<Empty v-else description="暂无冲突详情" />
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import type { MarketingCalendarLegendDto } from '#/api/marketing';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
defineProps<{
|
||||
legends: MarketingCalendarLegendDto[];
|
||||
monthTitle: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'nextMonth'): void;
|
||||
(event: 'prevMonth'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mc-header">
|
||||
<div class="mc-month-nav">
|
||||
<button type="button" @click="emit('prevMonth')">
|
||||
<IconifyIcon icon="lucide:chevron-left" />
|
||||
</button>
|
||||
<div class="mc-month-title">{{ monthTitle }}</div>
|
||||
<button type="button" @click="emit('nextMonth')">
|
||||
<IconifyIcon icon="lucide:chevron-right" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mc-legend">
|
||||
<span v-for="item in legends" :key="item.type" class="mc-legend-item">
|
||||
<span class="mc-legend-dot" :style="{ background: item.color }"></span>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import type { MarketingCalendarStatsDto } from '#/api/marketing';
|
||||
|
||||
import { formatCurrency } from '../composables/marketing-calendar-page/helpers';
|
||||
|
||||
defineProps<{
|
||||
stats: MarketingCalendarStatsDto;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mc-stats">
|
||||
<div class="mc-stat-card">
|
||||
<div class="mc-stat-label">本月活动</div>
|
||||
<div class="mc-stat-value primary">{{ stats.totalActivityCount }}</div>
|
||||
</div>
|
||||
<div class="mc-stat-card">
|
||||
<div class="mc-stat-label">进行中</div>
|
||||
<div class="mc-stat-value green">{{ stats.ongoingCount }}</div>
|
||||
</div>
|
||||
<div class="mc-stat-card">
|
||||
<div class="mc-stat-label">最大并行数</div>
|
||||
<div class="mc-stat-value orange">{{ stats.maxConcurrentCount }}</div>
|
||||
</div>
|
||||
<div class="mc-stat-card">
|
||||
<div class="mc-stat-label">本月预计优惠</div>
|
||||
<div class="mc-stat-value">
|
||||
{{ formatCurrency(stats.estimatedDiscountAmount) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,106 @@
|
||||
<script setup lang="ts">
|
||||
import type {
|
||||
MarketingCalendarActivityBarDto,
|
||||
MarketingCalendarActivityDto,
|
||||
MarketingCalendarDayDto,
|
||||
} from '#/api/marketing';
|
||||
|
||||
import { Empty } from 'ant-design-vue';
|
||||
|
||||
defineProps<{
|
||||
activities: MarketingCalendarActivityDto[];
|
||||
days: MarketingCalendarDayDto[];
|
||||
todayDay: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'selectActivity', activityId: string): void;
|
||||
}>();
|
||||
|
||||
function buildBarStyle(
|
||||
bar: MarketingCalendarActivityBarDto,
|
||||
color: string,
|
||||
dayCount: number,
|
||||
) {
|
||||
const safeDayCount = Math.max(1, dayCount);
|
||||
const start = Math.max(1, bar.startDay);
|
||||
const end = Math.max(start, bar.endDay);
|
||||
const span = Math.max(1, end - start + 1);
|
||||
const left = ((start - 1) / safeDayCount) * 100;
|
||||
const width = (span / safeDayCount) * 100;
|
||||
|
||||
return {
|
||||
left: `${left}%`,
|
||||
width: `${width}%`,
|
||||
background: color,
|
||||
opacity: bar.isDimmed ? '0.65' : '1',
|
||||
};
|
||||
}
|
||||
|
||||
function buildTodayLineStyle(todayDay: number, dayCount: number) {
|
||||
const safeDayCount = Math.max(1, dayCount);
|
||||
return {
|
||||
left: `calc((${todayDay} - 0.5) / ${safeDayCount} * 100%)`,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mc-gantt">
|
||||
<div
|
||||
class="mc-dates"
|
||||
:style="{ gridTemplateColumns: `180px repeat(${days.length || 1}, 1fr)` }"
|
||||
>
|
||||
<div class="mc-dates-label">活动名称</div>
|
||||
<div
|
||||
v-for="item in days"
|
||||
:key="item.day"
|
||||
class="mc-date-cell"
|
||||
:class="{ weekend: item.isWeekend, today: item.isToday }"
|
||||
>
|
||||
{{ item.day }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activities.length === 0" class="mc-empty-row">
|
||||
<Empty description="当月暂无活动" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="activity in activities"
|
||||
:key="activity.activityId"
|
||||
class="mc-row"
|
||||
>
|
||||
<div class="mc-row-label">
|
||||
<span
|
||||
class="mc-type-dot"
|
||||
:style="{ background: activity.color }"
|
||||
></span>
|
||||
<span class="mc-row-label-name">{{ activity.name }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mc-bar-area"
|
||||
:style="{ gridTemplateColumns: `repeat(${days.length || 1}, 1fr)` }"
|
||||
>
|
||||
<button
|
||||
v-for="bar in activity.bars"
|
||||
:key="bar.barId"
|
||||
type="button"
|
||||
class="mc-bar"
|
||||
:class="{ milestone: bar.isMilestone }"
|
||||
:style="buildBarStyle(bar, activity.color, days.length)"
|
||||
@click="emit('selectActivity', activity.activityId)"
|
||||
>
|
||||
{{ bar.label }}
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-if="todayDay > 0"
|
||||
class="mc-today-line"
|
||||
:style="buildTodayLineStyle(todayDay, days.length)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
import type { MarketingCalendarOverviewViewModel } from '#/views/marketing/calendar/types';
|
||||
|
||||
/**
|
||||
* 文件职责：营销日历页面常量。
|
||||
*/
|
||||
|
||||
/** 查看权限码。 */
|
||||
export const CALENDAR_VIEW_PERMISSION = 'tenant:marketing:calendar:view';
|
||||
|
||||
/** 管理权限码。 */
|
||||
export const CALENDAR_MANAGE_PERMISSION = 'tenant:marketing:calendar:manage';
|
||||
|
||||
/** 日历类型文案映射。 */
|
||||
export const CALENDAR_TYPE_TEXT_MAP: Record<string, string> = {
|
||||
reduce: '满减',
|
||||
gift: '满赠',
|
||||
second_half: '第二份半价',
|
||||
flash_sale: '限时折扣',
|
||||
seckill: '秒杀',
|
||||
coupon: '优惠券',
|
||||
punch_card: '次卡',
|
||||
};
|
||||
|
||||
/** 状态文案映射。 */
|
||||
export const CALENDAR_STATUS_TEXT_MAP: Record<string, string> = {
|
||||
ongoing: '进行中',
|
||||
upcoming: '未开始',
|
||||
ended: '已结束',
|
||||
disabled: '已停用',
|
||||
};
|
||||
|
||||
/** 创建空总览。 */
|
||||
export function createEmptyOverview(
|
||||
month: number,
|
||||
year: number,
|
||||
): MarketingCalendarOverviewViewModel {
|
||||
return {
|
||||
month: `${year}-${String(month).padStart(2, '0')}`,
|
||||
year,
|
||||
monthValue: month,
|
||||
monthStartDate: '',
|
||||
monthEndDate: '',
|
||||
todayDay: 0,
|
||||
days: [],
|
||||
legends: [],
|
||||
stats: {
|
||||
totalActivityCount: 0,
|
||||
ongoingCount: 0,
|
||||
maxConcurrentCount: 0,
|
||||
estimatedDiscountAmount: 0,
|
||||
},
|
||||
conflictBanner: null,
|
||||
conflicts: [],
|
||||
activities: [],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { StoreListItemDto } from '#/api/store';
|
||||
import type {
|
||||
MarketingCalendarMonthCursor,
|
||||
MarketingCalendarOverviewViewModel,
|
||||
} from '#/views/marketing/calendar/types';
|
||||
|
||||
/**
|
||||
* 文件职责：营销日历页面数据拉取动作。
|
||||
*/
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { getMarketingCalendarOverviewApi } from '#/api/marketing';
|
||||
import { getStoreListApi } from '#/api/store';
|
||||
|
||||
import { createEmptyOverview } from './constants';
|
||||
|
||||
interface CreateDataActionsOptions {
|
||||
cursor: Ref<MarketingCalendarMonthCursor>;
|
||||
isOverviewLoading: Ref<boolean>;
|
||||
isStoreLoading: Ref<boolean>;
|
||||
overview: Ref<MarketingCalendarOverviewViewModel>;
|
||||
selectedStoreId: Ref<string>;
|
||||
stores: Ref<StoreListItemDto[]>;
|
||||
}
|
||||
|
||||
export function createDataActions(options: CreateDataActionsOptions) {
|
||||
async function loadStores() {
|
||||
options.isStoreLoading.value = true;
|
||||
try {
|
||||
const result = await getStoreListApi({
|
||||
page: 1,
|
||||
pageSize: 200,
|
||||
});
|
||||
|
||||
options.stores.value = result.items ?? [];
|
||||
if (options.stores.value.length === 0) {
|
||||
options.selectedStoreId.value = '';
|
||||
options.overview.value = createEmptyOverview(
|
||||
options.cursor.value.month,
|
||||
options.cursor.value.year,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (options.selectedStoreId.value === '') {
|
||||
options.selectedStoreId.value = options.stores.value[0]?.id ?? '';
|
||||
} else {
|
||||
const exists = options.stores.value.some(
|
||||
(item) => item.id === options.selectedStoreId.value,
|
||||
);
|
||||
if (exists) {
|
||||
return;
|
||||
}
|
||||
|
||||
options.selectedStoreId.value = options.stores.value[0]?.id ?? '';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('加载门店失败');
|
||||
} finally {
|
||||
options.isStoreLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadOverview() {
|
||||
if (!options.selectedStoreId.value) {
|
||||
options.overview.value = createEmptyOverview(
|
||||
options.cursor.value.month,
|
||||
options.cursor.value.year,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
options.isOverviewLoading.value = true;
|
||||
try {
|
||||
const result = await getMarketingCalendarOverviewApi({
|
||||
storeId: options.selectedStoreId.value,
|
||||
year: options.cursor.value.year,
|
||||
month: options.cursor.value.month,
|
||||
});
|
||||
|
||||
options.overview.value = result;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
options.overview.value = createEmptyOverview(
|
||||
options.cursor.value.month,
|
||||
options.cursor.value.year,
|
||||
);
|
||||
message.error('加载营销日历失败');
|
||||
} finally {
|
||||
options.isOverviewLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
loadOverview,
|
||||
loadStores,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type {
|
||||
MarketingCalendarActivityViewModel,
|
||||
MarketingCalendarConflictViewModel,
|
||||
MarketingCalendarOverviewViewModel,
|
||||
} from '#/views/marketing/calendar/types';
|
||||
|
||||
/**
|
||||
* 文件职责：营销日历二级抽屉动作。
|
||||
*/
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
interface CreateDrawerActionsOptions {
|
||||
overview: Ref<MarketingCalendarOverviewViewModel>;
|
||||
}
|
||||
|
||||
export function createDrawerActions(options: CreateDrawerActionsOptions) {
|
||||
const isActivityDrawerOpen = ref(false);
|
||||
const isConflictDrawerOpen = ref(false);
|
||||
const activeActivityId = ref('');
|
||||
const activeConflictId = ref('');
|
||||
|
||||
const activeActivity = computed<MarketingCalendarActivityViewModel | null>(
|
||||
() =>
|
||||
options.overview.value.activities.find(
|
||||
(item) => item.activityId === activeActivityId.value,
|
||||
) ?? null,
|
||||
);
|
||||
|
||||
const activeConflict = computed<MarketingCalendarConflictViewModel | null>(
|
||||
() =>
|
||||
options.overview.value.conflicts.find(
|
||||
(item) => item.conflictId === activeConflictId.value,
|
||||
) ?? null,
|
||||
);
|
||||
|
||||
const activeConflictActivities = computed<
|
||||
MarketingCalendarActivityViewModel[]
|
||||
>(() => {
|
||||
if (!activeConflict.value) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const activityMap = new Map(
|
||||
options.overview.value.activities.map((item) => [item.activityId, item]),
|
||||
);
|
||||
return activeConflict.value.activityIds
|
||||
.map((id) => activityMap.get(id))
|
||||
.filter(
|
||||
(item): item is MarketingCalendarActivityViewModel =>
|
||||
item !== undefined,
|
||||
);
|
||||
});
|
||||
|
||||
function openActivityDrawer(activityId: string) {
|
||||
activeActivityId.value = activityId;
|
||||
isActivityDrawerOpen.value = true;
|
||||
}
|
||||
|
||||
function closeActivityDrawer() {
|
||||
isActivityDrawerOpen.value = false;
|
||||
}
|
||||
|
||||
function openConflictDrawer(conflictId?: string) {
|
||||
const targetId =
|
||||
conflictId ||
|
||||
options.overview.value.conflictBanner?.conflictId ||
|
||||
options.overview.value.conflicts[0]?.conflictId;
|
||||
if (!targetId) {
|
||||
return;
|
||||
}
|
||||
|
||||
activeConflictId.value = targetId;
|
||||
isConflictDrawerOpen.value = true;
|
||||
}
|
||||
|
||||
function closeConflictDrawer() {
|
||||
isConflictDrawerOpen.value = false;
|
||||
}
|
||||
|
||||
function viewActivityFromConflict(activityId: string) {
|
||||
isConflictDrawerOpen.value = false;
|
||||
openActivityDrawer(activityId);
|
||||
}
|
||||
|
||||
return {
|
||||
activeActivity,
|
||||
activeConflict,
|
||||
activeConflictActivities,
|
||||
closeActivityDrawer,
|
||||
closeConflictDrawer,
|
||||
isActivityDrawerOpen,
|
||||
isConflictDrawerOpen,
|
||||
openActivityDrawer,
|
||||
openConflictDrawer,
|
||||
viewActivityFromConflict,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import type { MarketingCalendarMonthCursor } from '#/views/marketing/calendar/types';
|
||||
|
||||
/**
|
||||
* 文件职责：营销日历页面工具函数。
|
||||
*/
|
||||
|
||||
/** 创建当前月游标。 */
|
||||
export function createCurrentMonthCursor(): MarketingCalendarMonthCursor {
|
||||
const now = new Date();
|
||||
return {
|
||||
year: now.getFullYear(),
|
||||
month: now.getMonth() + 1,
|
||||
};
|
||||
}
|
||||
|
||||
/** 偏移月份。 */
|
||||
export function shiftMonthCursor(
|
||||
current: MarketingCalendarMonthCursor,
|
||||
delta: number,
|
||||
): MarketingCalendarMonthCursor {
|
||||
const target = new Date(current.year, current.month - 1 + delta, 1);
|
||||
return {
|
||||
year: target.getFullYear(),
|
||||
month: target.getMonth() + 1,
|
||||
};
|
||||
}
|
||||
|
||||
/** 格式化月份标题。 */
|
||||
export function formatMonthTitle(cursor: MarketingCalendarMonthCursor): string {
|
||||
return `${cursor.year}年 ${cursor.month}月`;
|
||||
}
|
||||
|
||||
/** 格式化金额。 */
|
||||
export function formatCurrency(value: number): string {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
style: 'currency',
|
||||
currency: 'CNY',
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(value || 0);
|
||||
}
|
||||
|
||||
/** 格式化起止日文案。 */
|
||||
export function formatDayRange(startDay: number, endDay: number): string {
|
||||
return `${startDay}日~${endDay}日`;
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import type { StoreListItemDto } from '#/api/store';
|
||||
import type {
|
||||
MarketingCalendarMonthCursor,
|
||||
MarketingCalendarOverviewViewModel,
|
||||
} from '#/views/marketing/calendar/types';
|
||||
|
||||
/**
|
||||
* 文件职责：营销日历页面状态与行为编排。
|
||||
*/
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import {
|
||||
CALENDAR_MANAGE_PERMISSION,
|
||||
createEmptyOverview,
|
||||
} from './marketing-calendar-page/constants';
|
||||
import { createDataActions } from './marketing-calendar-page/data-actions';
|
||||
import { createDrawerActions } from './marketing-calendar-page/drawer-actions';
|
||||
import {
|
||||
createCurrentMonthCursor,
|
||||
formatMonthTitle,
|
||||
shiftMonthCursor,
|
||||
} from './marketing-calendar-page/helpers';
|
||||
|
||||
export function useMarketingCalendarPage() {
|
||||
const accessStore = useAccessStore();
|
||||
|
||||
const stores = ref<StoreListItemDto[]>([]);
|
||||
const selectedStoreId = ref('');
|
||||
const isStoreLoading = ref(false);
|
||||
const isOverviewLoading = ref(false);
|
||||
|
||||
const cursor = ref<MarketingCalendarMonthCursor>(createCurrentMonthCursor());
|
||||
const overview = ref<MarketingCalendarOverviewViewModel>(
|
||||
createEmptyOverview(cursor.value.month, cursor.value.year),
|
||||
);
|
||||
|
||||
const accessCodeSet = computed(
|
||||
() => new Set((accessStore.accessCodes ?? []).map(String)),
|
||||
);
|
||||
const canManage = computed(() =>
|
||||
accessCodeSet.value.has(CALENDAR_MANAGE_PERMISSION),
|
||||
);
|
||||
const hasStore = computed(() => stores.value.length > 0);
|
||||
const storeOptions = computed(() =>
|
||||
stores.value.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
})),
|
||||
);
|
||||
const monthTitle = computed(() => formatMonthTitle(cursor.value));
|
||||
|
||||
function setSelectedStoreId(value: string) {
|
||||
selectedStoreId.value = value;
|
||||
}
|
||||
|
||||
const { loadOverview, loadStores } = createDataActions({
|
||||
stores,
|
||||
selectedStoreId,
|
||||
isStoreLoading,
|
||||
isOverviewLoading,
|
||||
cursor,
|
||||
overview,
|
||||
});
|
||||
|
||||
const {
|
||||
activeActivity,
|
||||
activeConflict,
|
||||
activeConflictActivities,
|
||||
closeActivityDrawer,
|
||||
closeConflictDrawer,
|
||||
isActivityDrawerOpen,
|
||||
isConflictDrawerOpen,
|
||||
openActivityDrawer,
|
||||
openConflictDrawer,
|
||||
viewActivityFromConflict,
|
||||
} = createDrawerActions({
|
||||
overview,
|
||||
});
|
||||
|
||||
async function prevMonth() {
|
||||
cursor.value = shiftMonthCursor(cursor.value, -1);
|
||||
await loadOverview();
|
||||
}
|
||||
|
||||
async function nextMonth() {
|
||||
cursor.value = shiftMonthCursor(cursor.value, 1);
|
||||
await loadOverview();
|
||||
}
|
||||
|
||||
watch(selectedStoreId, async () => {
|
||||
await loadOverview();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await loadStores();
|
||||
if (selectedStoreId.value) {
|
||||
await loadOverview();
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
activeActivity,
|
||||
activeConflict,
|
||||
activeConflictActivities,
|
||||
canManage,
|
||||
closeActivityDrawer,
|
||||
closeConflictDrawer,
|
||||
hasStore,
|
||||
isActivityDrawerOpen,
|
||||
isConflictDrawerOpen,
|
||||
isOverviewLoading,
|
||||
isStoreLoading,
|
||||
monthTitle,
|
||||
nextMonth,
|
||||
openActivityDrawer,
|
||||
openConflictDrawer,
|
||||
overview,
|
||||
prevMonth,
|
||||
selectedStoreId,
|
||||
setSelectedStoreId,
|
||||
storeOptions,
|
||||
viewActivityFromConflict,
|
||||
};
|
||||
}
|
||||
103
apps/web-antd/src/views/marketing/calendar/index.vue
Normal file
103
apps/web-antd/src/views/marketing/calendar/index.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：营销中心-营销日历页面主视图。
|
||||
*/
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Select, Spin } from 'ant-design-vue';
|
||||
|
||||
import MarketingCalendarActivityDetailDrawer from './components/MarketingCalendarActivityDetailDrawer.vue';
|
||||
import MarketingCalendarConflictBanner from './components/MarketingCalendarConflictBanner.vue';
|
||||
import MarketingCalendarConflictDetailDrawer from './components/MarketingCalendarConflictDetailDrawer.vue';
|
||||
import MarketingCalendarMonthHeader from './components/MarketingCalendarMonthHeader.vue';
|
||||
import MarketingCalendarStatsCards from './components/MarketingCalendarStatsCards.vue';
|
||||
import MarketingCalendarTimeline from './components/MarketingCalendarTimeline.vue';
|
||||
import { useMarketingCalendarPage } from './composables/useMarketingCalendarPage';
|
||||
|
||||
const {
|
||||
activeActivity,
|
||||
activeConflict,
|
||||
activeConflictActivities,
|
||||
canManage,
|
||||
closeActivityDrawer,
|
||||
closeConflictDrawer,
|
||||
hasStore,
|
||||
isActivityDrawerOpen,
|
||||
isConflictDrawerOpen,
|
||||
isOverviewLoading,
|
||||
isStoreLoading,
|
||||
monthTitle,
|
||||
nextMonth,
|
||||
openActivityDrawer,
|
||||
openConflictDrawer,
|
||||
overview,
|
||||
prevMonth,
|
||||
selectedStoreId,
|
||||
setSelectedStoreId,
|
||||
storeOptions,
|
||||
viewActivityFromConflict,
|
||||
} = useMarketingCalendarPage();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page title="营销日历" content-class="page-marketing-calendar">
|
||||
<div class="mc-page">
|
||||
<div class="mc-toolbar">
|
||||
<Select
|
||||
class="mc-store-select"
|
||||
:value="selectedStoreId"
|
||||
:options="storeOptions"
|
||||
:loading="isStoreLoading"
|
||||
placeholder="请选择门店"
|
||||
@update:value="(value) => setSelectedStoreId(String(value ?? ''))"
|
||||
/>
|
||||
<span v-if="!canManage" class="mc-readonly-tip">当前为只读权限</span>
|
||||
</div>
|
||||
|
||||
<div v-if="!hasStore" class="mc-empty">暂无门店，请先创建门店</div>
|
||||
|
||||
<template v-else>
|
||||
<Spin :spinning="isOverviewLoading">
|
||||
<MarketingCalendarConflictBanner
|
||||
:banner="overview.conflictBanner"
|
||||
@open-conflict="openConflictDrawer"
|
||||
/>
|
||||
|
||||
<MarketingCalendarMonthHeader
|
||||
:month-title="monthTitle"
|
||||
:legends="overview.legends"
|
||||
@prev-month="prevMonth"
|
||||
@next-month="nextMonth"
|
||||
/>
|
||||
|
||||
<MarketingCalendarStatsCards :stats="overview.stats" />
|
||||
|
||||
<MarketingCalendarTimeline
|
||||
:days="overview.days"
|
||||
:activities="overview.activities"
|
||||
:today-day="overview.todayDay"
|
||||
@select-activity="openActivityDrawer"
|
||||
/>
|
||||
</Spin>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<MarketingCalendarActivityDetailDrawer
|
||||
:open="isActivityDrawerOpen"
|
||||
:activity="activeActivity"
|
||||
@close="closeActivityDrawer"
|
||||
/>
|
||||
|
||||
<MarketingCalendarConflictDetailDrawer
|
||||
:open="isConflictDrawerOpen"
|
||||
:conflict="activeConflict"
|
||||
:activities="activeConflictActivities"
|
||||
@close="closeConflictDrawer"
|
||||
@view-activity="viewActivityFromConflict"
|
||||
/>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@import './styles/index.less';
|
||||
</style>
|
||||
33
apps/web-antd/src/views/marketing/calendar/styles/base.less
Normal file
33
apps/web-antd/src/views/marketing/calendar/styles/base.less
Normal file
@@ -0,0 +1,33 @@
|
||||
.page-marketing-calendar {
|
||||
.mc-page {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mc-toolbar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mc-store-select {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.mc-readonly-tip {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.mc-empty {
|
||||
padding: 24px;
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
}
|
||||
}
|
||||
112
apps/web-antd/src/views/marketing/calendar/styles/drawer.less
Normal file
112
apps/web-antd/src/views/marketing/calendar/styles/drawer.less
Normal file
@@ -0,0 +1,112 @@
|
||||
.mc-detail-drawer {
|
||||
.mc-detail-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.mc-detail-meta {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.mc-detail-desc {
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.mc-detail-fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mc-detail-field {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
padding: 10px 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mc-detail-field .label {
|
||||
flex-shrink: 0;
|
||||
width: 88px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.mc-detail-field .value {
|
||||
flex: 1;
|
||||
color: #0f172a;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.mc-conflict-head {
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 16px;
|
||||
color: #9a3412;
|
||||
background: #fff7ed;
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.mc-conflict-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mc-conflict-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mc-conflict-item .left {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mc-conflict-item .dot {
|
||||
flex-shrink: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.mc-conflict-item .content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mc-conflict-item .name {
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.mc-conflict-item .summary {
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mc-conflict-item .right {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './base.less';
|
||||
@import './layout.less';
|
||||
@import './timeline.less';
|
||||
@import './drawer.less';
|
||||
@import './responsive.less';
|
||||
138
apps/web-antd/src/views/marketing/calendar/styles/layout.less
Normal file
138
apps/web-antd/src/views/marketing/calendar/styles/layout.less
Normal file
@@ -0,0 +1,138 @@
|
||||
.page-marketing-calendar {
|
||||
.mc-conflict-banner {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
color: #9a3412;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
background: #fff7ed;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mc-conflict-banner-icon {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.mc-conflict-banner-text b {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mc-header {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 20px;
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
}
|
||||
|
||||
.mc-month-nav {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mc-month-nav button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.mc-month-nav button:hover {
|
||||
color: var(--ant-primary-color, #1677ff);
|
||||
border-color: var(--ant-primary-color, #1677ff);
|
||||
}
|
||||
|
||||
.mc-month-title {
|
||||
min-width: 140px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mc-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 14px;
|
||||
}
|
||||
|
||||
.mc-legend-item {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.mc-legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mc-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mc-stat-card {
|
||||
padding: 14px 18px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.mc-stat-card:hover {
|
||||
box-shadow: 0 6px 14px rgb(15 23 42 / 10%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.mc-stat-label {
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.mc-stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.mc-stat-value.primary {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.mc-stat-value.green {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.mc-stat-value.orange {
|
||||
color: #f59e0b;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
@media (max-width: 1200px) {
|
||||
.page-marketing-calendar {
|
||||
.mc-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mc-legend {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-marketing-calendar {
|
||||
.mc-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.mc-store-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mc-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
146
apps/web-antd/src/views/marketing/calendar/styles/timeline.less
Normal file
146
apps/web-antd/src/views/marketing/calendar/styles/timeline.less
Normal file
@@ -0,0 +1,146 @@
|
||||
.page-marketing-calendar {
|
||||
.mc-gantt {
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
}
|
||||
|
||||
.mc-dates {
|
||||
display: grid;
|
||||
min-width: 860px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.mc-dates-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.mc-date-cell {
|
||||
padding: 8px 0;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
text-align: center;
|
||||
border-right: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.mc-date-cell.weekend {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.mc-date-cell.today {
|
||||
font-weight: 600;
|
||||
color: #1677ff;
|
||||
background: rgb(22 119 255 / 8%);
|
||||
}
|
||||
|
||||
.mc-row {
|
||||
display: grid;
|
||||
grid-template-columns: 180px 1fr;
|
||||
min-width: 860px;
|
||||
min-height: 44px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.mc-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.mc-row:hover {
|
||||
background: rgb(22 119 255 / 3%);
|
||||
}
|
||||
|
||||
.mc-row-label {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
color: #0f172a;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.mc-type-dot {
|
||||
flex-shrink: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.mc-row-label-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mc-bar-area {
|
||||
position: relative;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mc-bar {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
transform: translateY(-50%);
|
||||
transition: filter 0.2s ease;
|
||||
}
|
||||
|
||||
.mc-bar:hover {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
.mc-bar.milestone {
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.mc-today-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
width: 2px;
|
||||
background: #ef4444;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.mc-today-line::before {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: 50%;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #ef4444;
|
||||
content: '今';
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.mc-empty-row {
|
||||
padding: 40px 20px;
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
53
apps/web-antd/src/views/marketing/calendar/types.ts
Normal file
53
apps/web-antd/src/views/marketing/calendar/types.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import type {
|
||||
MarketingCalendarActivityDto,
|
||||
MarketingCalendarConflictDto,
|
||||
MarketingCalendarOverviewDto,
|
||||
MarketingCalendarStatsDto,
|
||||
} from '#/api/marketing';
|
||||
|
||||
/**
|
||||
* 文件职责：营销日历页面类型定义。
|
||||
*/
|
||||
|
||||
/** 月份游标。 */
|
||||
export interface MarketingCalendarMonthCursor {
|
||||
month: number;
|
||||
year: number;
|
||||
}
|
||||
|
||||
/** 活动视图模型。 */
|
||||
export type MarketingCalendarActivityViewModel = MarketingCalendarActivityDto;
|
||||
|
||||
/** 冲突视图模型。 */
|
||||
export type MarketingCalendarConflictViewModel = MarketingCalendarConflictDto;
|
||||
|
||||
/** 统计视图模型。 */
|
||||
export type MarketingCalendarStatsViewModel = MarketingCalendarStatsDto;
|
||||
|
||||
/** 页面总览视图模型。 */
|
||||
export type MarketingCalendarOverviewViewModel = MarketingCalendarOverviewDto;
|
||||
|
||||
/** 创建默认总览。 */
|
||||
export function createDefaultMarketingCalendarOverview(
|
||||
cursor: MarketingCalendarMonthCursor,
|
||||
): MarketingCalendarOverviewViewModel {
|
||||
return {
|
||||
month: `${cursor.year}-${String(cursor.month).padStart(2, '0')}`,
|
||||
year: cursor.year,
|
||||
monthValue: cursor.month,
|
||||
monthStartDate: '',
|
||||
monthEndDate: '',
|
||||
todayDay: 0,
|
||||
days: [],
|
||||
legends: [],
|
||||
stats: {
|
||||
totalActivityCount: 0,
|
||||
ongoingCount: 0,
|
||||
maxConcurrentCount: 0,
|
||||
estimatedDiscountAmount: 0,
|
||||
},
|
||||
conflictBanner: null,
|
||||
conflicts: [],
|
||||
activities: [],
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user