add tag

src/pages/customer/CustomerDetail.vue

@@ -23,6 +23,12 @@
 			<t-cell title="录入用户" :note="Text.display(customer.creatorUser?.nick || customer.creatorUser?.name)" />
 			<t-cell title="录入时间" :note="Time.toPassedDateTime(customer.createdAt)" />
 		</t-cell-group>
+		<customer-tag-card
+			v-if="customer && canReadTag"
+			:editable="canApplyTag"
+			:tag-list="customerTagList"
+			@edit="openTagSelector"
+		/>
 		<t-cell-group v-if="customer" theme="card">
 			<t-cell v-if="canReadStat" title="客户数据图表" arrow @click="toCustomerDataCharts">
 				<template #left-icon>
@@ -121,6 +127,11 @@
 			v-model:visible="selectorVisible"
 			@change="handleInviteeSelected"
 		/>
+		<tag-selector
+			v-model="selectedTagIdList"
+			v-model:visible="tagSelectorVisible"
+			@change="handleTagSelected"
+		/>
 		<t-popup v-model="scanPopupVisible" placement="bottom">
 			<div class="scan-popup bg-white">
 				<div class="header">
@@ -159,15 +170,19 @@ import { DialogPlugin, Toast } from "tdesign-mobile-vue";
 import { Text, Time, useUserStore } from "timi-web";
 import CustomerAPI from "@/api/CustomerAPI";
 import PointAPI from "@/api/PointAPI";
+import TagAPI from "@/api/TagAPI";
 import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
 import CodeScanner from "@/components/CodeScanner.vue";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import CustomerSelector from "@/components/CustomerSelector.vue";
+import TagSelector from "@/components/TagSelector.vue";
+import CustomerTagCard from "@/pages/customer/component/CustomerTagCard.vue";
 import { useSettingStore } from "@/store/settingStore";
 import type { BodyAreaValue, Customer } from "@/types/Customer";
 import type { PointAccount } from "@/types/Point";
+import type { Tag } from "@/types/Tag";
 import { getCustomerPhotoURL, normalizeBodyAreaValue } from "@/utils/customer";
-import { permissionCodes } from "@/utils/permission";
+import { corePermissionCodes, permissionCodes } from "@/utils/permission";
 import { LunarCalendar } from "@/utils/LunarCalendar";
 
 defineOptions({
@@ -183,6 +198,8 @@ const isRemoving = ref(false);
 
 const canReadStat = computed(() => userStore.hasPermissions(permissionCodes.stat.read));
 const canReadPointAccount = computed(() => userStore.hasPermissions(permissionCodes.point.accountRead));
+const canReadTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.read));
+const canApplyTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.apply));
 
 // ---------- 资料 ----------
 
@@ -226,6 +243,8 @@ async function loadCustomer(): Promise<void> {
 	const id = String(route.params.id || "");
 	if (!id) {
 		customer.value = undefined;
+		customerTagList.value = [];
+		selectedTagIdList.value = [];
 		invitees.value = [];
 		showSolarBirthdate.value = false;
 		return;
@@ -235,15 +254,59 @@ async function loadCustomer(): Promise<void> {
 		showSolarBirthdate.value = false;
 		customer.value = await CustomerAPI.detail(id);
 		await loadPointAccount();
+		await loadCustomerTags();
 		await loadInvitees();
 	} catch (err) {
 		customer.value = undefined;
+		customerTagList.value = [];
+		selectedTagIdList.value = [];
 		invitees.value = [];
 		console.warn("客户详情加载失败", err);
 		Toast.warning("客户详情加载失败");
 	}
 }
 
+// ---------- 客户标签 ----------
+
+const customerTagList = ref<Tag[]>([]);
+const selectedTagIdList = ref<string[]>([]);
+const tagSelectorVisible = ref(false);
+
+async function loadCustomerTags(): Promise<void> {
+	const customerId = customer.value?.id;
+	if (!customerId || !canReadTag.value) {
+		customerTagList.value = [];
+		selectedTagIdList.value = [];
+		return;
+	}
+
+	customerTagList.value = await TagAPI.listByBizType("GAO_CUSTOMER", customerId);
+	selectedTagIdList.value = customerTagList.value.map(item => item.id || "").filter(Boolean);
+}
+
+function openTagSelector(): void {
+	if (!canApplyTag.value) {
+		return;
+	}
+	selectedTagIdList.value = customerTagList.value.map(item => item.id || "").filter(Boolean);
+	tagSelectorVisible.value = true;
+}
+
+async function handleTagSelected(tagList: Tag[]): Promise<void> {
+	const customerId = customer.value?.id;
+	if (!customerId) {
+		return;
+	}
+	await TagAPI.apply({
+		bizType: "GAO_CUSTOMER",
+		bizId: customerId,
+		tagIdList: tagList.map(item => item.id || "").filter(Boolean)
+	});
+	customerTagList.value = tagList;
+	selectedTagIdList.value = tagList.map(item => item.id || "").filter(Boolean);
+	Toast.success("客户标签已保存");
+}
+
 // ---------- 邀请来源和邀请列表 ----------
 let latestDecodedText = "";
 const invitees = ref<Customer[]>([]);

src/pages/customer/component/CustomerEventStructureChart.vue

@@ -1,7 +1,11 @@
 <template>
 	<section class="chart-section">
 		<h2>登记事件结构</h2>
-		<div ref="chartElement" class="chart" />
+		<div
+			ref="chartElement"
+			class="chart"
+			:style="chartStyle"
+		/>
 	</section>
 </template>
 
@@ -14,6 +18,8 @@ import type { EventItem } from "@/types/EventItem";
 import type { StoreEventRecordDailyStatView } from "@/types/Store";
 import { buildCustomerBaseChartOption, useCustomerChart } from "@/pages/customer/component/useCustomerChart";
 
+const chartColorList = ["#2563eb", "#0f766e", "#d97706", "#db2777", "#7c3aed"];
+
 const props = defineProps<{
 	customerId: string;
 	dateTextList: string[];
@@ -26,13 +32,38 @@ const eventList = ref<EventItem[]>([]);
 const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
 let statRequestId = 0;
 
+// ---------- 图表窗口 ----------
+
+const chartWidth = ref(window.innerWidth);
 const selectedEventIdSet = computed(() => new Set(props.selectedEventIdList));
 const visibleEventList = computed(() => eventList.value.filter(item => item.id && selectedEventIdSet.value.has(item.id)));
 const shouldRotateAxisLabel = computed(() => visibleEventList.value.length > 4 || visibleEventList.value.some(item => 6 < getEventName(item).length));
+const legendRowCount = computed(() => countLegendRows(visibleEventList.value.map(getEventName)));
+const chartHeight = computed(() => `${16 + Math.max(0, legendRowCount.value - 1) * 1.5}rem`);
+const legendBottom = computed(() => 20 + legendRowCount.value * 24);
+const chartStyle = computed(() => ({
+	height: chartHeight.value
+}));
 const chartOption = computed<EChartsOption>(() => ({
 	...buildCustomerBaseChartOption(props.dateTextList),
+	grid: {
+		top: Math.max(72, legendBottom.value),
+		left: 12,
+		right: 12,
+		bottom: 12,
+		containLabel: true
+	},
 	legend: {
-		show: false
+		top: 0,
+		type: "scroll",
+		icon: "roundRect",
+		textStyle: {
+			color: "#52607a"
+		}
+	},
+	tooltip: {
+		trigger: "item",
+		formatter: "{a}：{c} 次"
 	},
 	xAxis: {
 		type: "category",
@@ -49,21 +80,19 @@ const chartOption = computed<EChartsOption>(() => ({
 			width: shouldRotateAxisLabel.value ? 72 : 56
 		}
 	},
-	series: [
-		{
-			name: "登记次数",
-			type: "bar",
-			data: visibleEventList.value.map(item => ({
-				value: countRecordByEvent(item.id || ""),
-				itemStyle: getEventColor(item) ? {
-					color: getEventColor(item)
-				} : undefined
-			}))
-		}
-	]
+	series: visibleEventList.value.map((event, index) => ({
+		name: getEventName(event),
+		type: "bar",
+		stack: "event",
+		itemStyle: {
+			color: getEventLegendColor(event, index)
+		},
+		data: visibleEventList.value.map(item => item.id === event.id ? countRecordByEvent(event.id || "") : undefined)
+	}))
 }));
 
 const { chartElement } = useCustomerChart(chartOption);
+let resizeObserver: ResizeObserver | undefined;
 
 watch([
 	() => props.customerId,
@@ -76,10 +105,20 @@ watch([
 });
 
 onMounted(async () => {
+	resizeObserver = new window.ResizeObserver(updateChartWidth);
+	if (chartElement.value) {
+		resizeObserver.observe(chartElement.value);
+		updateChartWidth();
+	}
 	await loadEvents();
 	await loadDailyStat();
 });
 
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect();
+	resizeObserver = undefined;
+});
+
 async function loadEvents(): Promise<void> {
 	eventList.value = await EventAPI.listValid();
 }
@@ -110,10 +149,38 @@ function getEventColor(event: EventItem): string | undefined {
 	return event.color || undefined;
 }
 
+function getEventLegendColor(event: EventItem, index: number): string {
+	return getEventColor(event) || chartColorList[index % chartColorList.length];
+}
+
 function getEventName(event: EventItem): string {
 	return event.name || "未命名事件";
 }
 
+function updateChartWidth(): void {
+	const width = chartElement.value?.clientWidth || window.innerWidth;
+	chartWidth.value = Math.max(1, width);
+}
+
+function countLegendRows(nameList: string[]): number {
+	let rowCount = 1;
+	let rowWidth = 0;
+	const maxWidth = Math.max(160, chartWidth.value - 24);
+	for (const name of nameList) {
+		const itemWidth = estimateLegendItemWidth(name);
+		if (0 < rowWidth && maxWidth < rowWidth + itemWidth) {
+			rowCount++;
+			rowWidth = 0;
+		}
+		rowWidth += itemWidth;
+	}
+	return rowCount;
+}
+
+function estimateLegendItemWidth(name: string): number {
+	return Math.min(chartWidth.value, 38 + Array.from(name).length * 14);
+}
+
 function groupRecordDailyStatByEventId(list: StoreEventRecordDailyStatView[]): Record<string, StoreEventRecordDailyStatView[]> {
 	const map: Record<string, StoreEventRecordDailyStatView[]> = {};
 	for (const item of list) {

src/pages/customer/component/CustomerTagCard.vue

@@ -0,0 +1,110 @@
+<template>
+	<section class="customer-tag-card bg-white" @click="emitEdit">
+		<div class="header">
+			<div class="title">
+				<t-icon name="tag" />
+				<span>客户标签</span>
+			</div>
+			<t-icon v-if="editable" name="chevron-right" />
+		</div>
+		<div v-if="tagList.length" class="scroll">
+			<div class="rows">
+				<div v-for="(row, index) in tagRowList" :key="index" class="row">
+					<t-tag
+						v-for="item in row"
+						:key="item.id"
+						size="large"
+						theme="primary"
+						variant="light-outline"
+						:content="getTagName(item)"
+					/>
+				</div>
+			</div>
+		</div>
+		<span v-else class="empty gray">未设置</span>
+	</section>
+</template>
+
+<script setup lang="ts">
+import type { Tag } from "@/types/Tag";
+
+interface Props {
+	editable: boolean;
+	tagList: Tag[];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+	edit: [];
+}>();
+
+const maxRowCount = 5;
+const tagRowList = computed(() => {
+	const rowCount = Math.min(maxRowCount, props.tagList.length);
+	const rowList = Array.from({ length: rowCount }, () => [] as Tag[]);
+	props.tagList.forEach((item, index) => {
+		rowList[index % rowCount].push(item);
+	});
+	return rowList;
+});
+
+function getTagName(tag: Tag): string {
+	return tag.name || tag.zhCN || "未命名标签";
+}
+
+function emitEdit(): void {
+	if (props.editable) {
+		emit("edit");
+	}
+}
+</script>
+
+<style scoped lang="less">
+.customer-tag-card {
+	gap: .75rem;
+	margin: 0 1rem;
+	display: flex;
+	padding: 1rem;
+	overflow: hidden;
+	border-radius: .75rem;
+	flex-direction: column;
+
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.title {
+			gap: .5rem;
+			display: flex;
+			font-weight: 700;
+			align-items: center;
+		}
+	}
+
+	.scroll {
+		overflow: auto;
+
+		.rows {
+			gap: .5rem;
+			width: max-content;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.row {
+			gap: .5rem;
+			display: flex;
+			white-space: nowrap;
+		}
+
+		:deep(.t-tag) {
+			flex: 0 0 auto;
+		}
+	}
+
+	.empty {
+		font-size: .875rem;
+	}
+}
+</style>