From 6ebd83edbc33919e9a1753f6a3e3b02111fa8984 Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Thu, 13 Aug 2026 17:36:59 +0800
Subject: [PATCH] add tag

---
 src/api/TagAPI.ts                             |  51 ++++
 src/components/TagSelector.vue                | 269 +++++++++++++++++
 src/pages/customer/CustomerDetail.vue         |  65 +++-
 .../component/CustomerEventStructureChart.vue |  95 +++++-
 .../customer/component/CustomerTagCard.vue    | 110 +++++++
 .../component/StoreEventStructureChart.vue    |  86 +++++-
 src/pages/tabs/SettingTab.vue                 |   6 +
 src/pages/tag/TagList.vue                     | 280 ++++++++++++++++++
 src/router/routes/managementRoutes.ts         |  15 +
 src/types/Tag.ts                              |  18 ++
 src/utils/permission.ts                       |   7 +
 11 files changed, 975 insertions(+), 27 deletions(-)
 create mode 100644 src/api/TagAPI.ts
 create mode 100644 src/components/TagSelector.vue
 create mode 100644 src/pages/customer/component/CustomerTagCard.vue
 create mode 100644 src/pages/tag/TagList.vue
 create mode 100644 src/types/Tag.ts

diff --git a/src/api/TagAPI.ts b/src/api/TagAPI.ts
new file mode 100644
index 0000000..bf200fa
--- /dev/null
+++ b/src/api/TagAPI.ts
@@ -0,0 +1,51 @@
+import { axios, type Page, type PageResult } from "timi-web";
+import type { Tag, TagApply, TagBizType } from "@/types/Tag";
+
+const BASE_URI = "/gao/tag";
+
+async function list(page: Page<Tag>): Promise<PageResult<Tag>> {
+	return await axios.post(`${BASE_URI}/list`, page);
+}
+
+async function detail(id: string): Promise<Tag> {
+	return await axios.post(`${BASE_URI}/detail`, undefined, {
+		params: { id }
+	});
+}
+
+async function create(tag: Tag): Promise<Tag> {
+	return await axios.post(`${BASE_URI}/create`, tag);
+}
+
+async function update(tag: Tag): Promise<void> {
+	return await axios.post(`${BASE_URI}/update`, tag);
+}
+
+async function remove(id: string): Promise<void> {
+	return await axios.post(`${BASE_URI}/delete`, undefined, {
+		params: { id }
+	});
+}
+
+async function listByBizType(bizType: TagBizType, bizId: string): Promise<Tag[]> {
+	return await axios.get(`${BASE_URI}/list/biz/id`, {
+		params: {
+			bizType,
+			bizId
+		}
+	});
+}
+
+async function apply(req: TagApply): Promise<void> {
+	return await axios.post(`${BASE_URI}/apply`, req);
+}
+
+export default {
+	list,
+	detail,
+	create,
+	update,
+	remove,
+	listByBizType,
+	apply
+};
diff --git a/src/components/TagSelector.vue b/src/components/TagSelector.vue
new file mode 100644
index 0000000..4c890bd
--- /dev/null
+++ b/src/components/TagSelector.vue
@@ -0,0 +1,269 @@
+<template>
+	<t-popup v-model="popupVisible" placement="bottom">
+		<div class="tag-selector bg-white">
+			<div class="title-bar">
+				<t-button variant="text" size="small" @click="cancelSelection">取消</t-button>
+				<h3 class="title">选择标签</h3>
+				<t-button theme="primary" variant="text" size="small" @click="confirmSelection">确定</t-button>
+			</div>
+			<div class="search-row">
+				<t-input
+					class="input"
+					size="small"
+					v-model.trim="keyword"
+					borderless
+					clearable
+					placeholder="搜索标签"
+				/>
+				<template v-if="canCreateTag">
+					<t-input
+						class="input"
+						size="small"
+						v-model.trim="newTagName"
+						borderless
+						clearable
+						placeholder="新增标签名称"
+					/>
+					<t-button
+						theme="primary"
+						size="small"
+						:loading="isCreating"
+						:disabled="isCreating"
+						@click="createTag"
+					>新增</t-button>
+				</template>
+			</div>
+			<div class="list">
+				<t-tag
+					v-for="item in visibleTagList"
+					:key="item.id"
+					class="item"
+					:theme="isSelected(item) ? 'primary' : 'default'"
+					size="extra-large"
+					:variant="isSelected(item) ? 'dark' : 'light-outline'"
+					@click="toggleTag(item)"
+				>
+					<span v-text="getTagName(item)" />
+				</t-tag>
+				<div v-if="!visibleTagList.length" class="empty" v-text="emptyText" />
+			</div>
+		</div>
+	</t-popup>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import { useUserStore } from "timi-web";
+import TagAPI from "@/api/TagAPI";
+import type { Tag } from "@/types/Tag";
+import { corePermissionCodes } from "@/utils/permission";
+
+interface Props {
+	modelValue: string[];
+	visible: boolean;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+	"update:modelValue": [value: string[]];
+	"update:visible": [value: boolean];
+	change: [value: Tag[]];
+}>();
+
+const userStore = useUserStore();
+
+const pageSize = 100;
+const keyword = ref("");
+const tagList = ref<Tag[]>([]);
+const newTagName = ref("");
+const isLoading = ref(false);
+const isCreating = ref(false);
+const draftSelectedIdList = ref<string[]>([]);
+
+const canCreateTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.create));
+const visibleTagList = computed(() => {
+	const value = keyword.value.trim().toLowerCase();
+	if (!value) {
+		return tagList.value;
+	}
+	return tagList.value.filter(item => getTagName(item).toLowerCase().includes(value));
+});
+const emptyText = computed(() => {
+	if (isLoading.value) {
+		return "正在加载标签";
+	}
+	return keyword.value.trim() ? "未找到匹配标签" : "暂无标签";
+});
+const popupVisible = computed({
+	get() {
+		return props.visible;
+	},
+	set(value: boolean) {
+		emit("update:visible", value);
+	}
+});
+
+function getTagName(tag: Tag): string {
+	return tag.name || tag.zhCN || "未命名标签";
+}
+
+function isSelected(tag: Tag): boolean {
+	return !!tag.id && draftSelectedIdList.value.includes(tag.id);
+}
+
+function syncDraftSelection(): void {
+	draftSelectedIdList.value = [...props.modelValue];
+}
+
+function toggleTag(tag: Tag): void {
+	const id = tag.id;
+	if (!id) {
+		return;
+	}
+	if (draftSelectedIdList.value.includes(id)) {
+		draftSelectedIdList.value = draftSelectedIdList.value.filter(item => item !== id);
+		return;
+	}
+	draftSelectedIdList.value = [...draftSelectedIdList.value, id];
+}
+
+async function loadTags(): Promise<void> {
+	isLoading.value = true;
+	try {
+		const result = await TagAPI.list({
+			index: 0,
+			size: pageSize
+		});
+		tagList.value = result.list || [];
+	} catch {
+		Toast.error("标签加载失败");
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+async function createTag(): Promise<void> {
+	const name = newTagName.value.trim();
+	if (!name) {
+		Toast.warning("请输入标签名称");
+		return;
+	}
+	if (tagList.value.some(item => getTagName(item) === name)) {
+		Toast.warning("标签已存在");
+		return;
+	}
+	isCreating.value = true;
+	try {
+		const tag = await TagAPI.create({
+			name,
+			zhCN: name
+		});
+		newTagName.value = "";
+		tagList.value = [tag, ...tagList.value];
+		if (tag.id) {
+			draftSelectedIdList.value = [...draftSelectedIdList.value, tag.id];
+		}
+		Toast.success("标签已新增");
+	} catch {
+		Toast.error("标签新增失败");
+	} finally {
+		isCreating.value = false;
+	}
+}
+
+function cancelSelection(): void {
+	syncDraftSelection();
+	emit("update:visible", false);
+}
+
+function confirmSelection(): void {
+	const selectedIdList = [...draftSelectedIdList.value];
+	emit("update:modelValue", selectedIdList);
+	emit("change", tagList.value.filter(item => item.id && selectedIdList.includes(item.id)));
+	emit("update:visible", false);
+}
+
+watch(() => props.visible, async (value) => {
+	if (!value) {
+		syncDraftSelection();
+		keyword.value = "";
+		newTagName.value = "";
+		return;
+	}
+	syncDraftSelection();
+	await loadTags();
+});
+</script>
+
+<style scoped lang="less">
+.tag-selector {
+	display: flex;
+	height: 78vh;
+	padding-top: 1rem;
+	border-radius: 1.25rem 1.25rem 0 0;
+	flex-direction: column;
+
+	.title-bar {
+		padding: 0 1rem;
+		display: grid;
+		grid-template-columns: 4rem 1fr 4rem;
+		align-items: center;
+	}
+
+	.title {
+		margin: 0;
+		font-size: 1rem;
+		text-align: center;
+	}
+
+	.search-row {
+		gap: .5rem;
+		display: flex;
+		padding: .5rem 1rem;
+		align-items: center;
+
+		.input {
+			--td-input-vertical-padding: 6px;
+
+			border: 1px solid var(--td-component-border);
+			border-radius: .875rem;
+		}
+	}
+
+	.list {
+		gap: .75rem;
+		flex: 1;
+		overflow: auto;
+		min-height: 0;
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0)) 1rem;
+
+		.item {
+			flex: 1 1 auto;
+			margin: 0;
+			min-width: 5rem;
+			max-width: 100%;
+			border-radius: .75rem;
+			justify-content: center;
+		}
+
+		.empty {
+			color: #52607a;
+			padding: 2rem 1rem;
+			text-align: center;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.tag-selector {
+		background: rgba(15, 23, 42, .96);
+
+		.empty {
+			color: #94a3b8;
+		}
+	}
+}
+</style>
diff --git a/src/pages/customer/CustomerDetail.vue b/src/pages/customer/CustomerDetail.vue
index c8d06c7..4a695c5 100644
--- a/src/pages/customer/CustomerDetail.vue
+++ b/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[]>([]);
diff --git a/src/pages/customer/component/CustomerEventStructureChart.vue b/src/pages/customer/component/CustomerEventStructureChart.vue
index ea893e7..96e0a8c 100644
--- a/src/pages/customer/component/CustomerEventStructureChart.vue
+++ b/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) {
diff --git a/src/pages/customer/component/CustomerTagCard.vue b/src/pages/customer/component/CustomerTagCard.vue
new file mode 100644
index 0000000..c47b298
--- /dev/null
+++ b/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>
diff --git a/src/pages/store/component/StoreEventStructureChart.vue b/src/pages/store/component/StoreEventStructureChart.vue
index e963083..240ce9b 100644
--- a/src/pages/store/component/StoreEventStructureChart.vue
+++ b/src/pages/store/component/StoreEventStructureChart.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 { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
 
+const chartColorList = ["#2563eb", "#0f766e", "#d97706", "#db2777", "#7c3aed"];
+
 const props = defineProps<{
 	dateTextList: string[];
 }>();
@@ -24,18 +30,36 @@ const eventList = ref<EventItem[]>([]);
 const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
 let statRequestId = 0;
 
+// ---------- 图表窗口 ----------
+
+const chartWidth = ref(window.innerWidth);
 const shouldRotateAxisLabel = computed(() => eventList.value.length > 4 || eventList.value.some(item => 6 < getEventName(item).length));
+const legendRowCount = computed(() => countLegendRows(eventList.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>(() => ({
 	...buildStoreBaseChartOption(props.dateTextList),
 	grid: {
-		top: 24,
+		top: Math.max(16, legendBottom.value),
 		left: 12,
 		right: 12,
 		bottom: 0,
 		containLabel: true
 	},
 	legend: {
-		show: false
+		top: 0,
+		type: "scroll",
+		icon: "roundRect",
+		textStyle: {
+			color: "#52607a"
+		}
+	},
+	tooltip: {
+		trigger: "item",
+		formatter: "{a}：{c} 次"
 	},
 	xAxis: {
 		type: "category",
@@ -52,19 +76,19 @@ const chartOption = computed<EChartsOption>(() => ({
 			width: shouldRotateAxisLabel.value ? 72 : 56
 		}
 	},
-	series: [{
-		name: "登记次数",
+	series: eventList.value.map((event, index) => ({
+		name: getEventName(event),
 		type: "bar",
-		data: eventList.value.map(item => ({
-			value: countRecordByEvent(item.id || ""),
-			itemStyle: getEventColor(item) ? {
-				color: getEventColor(item)
-			} : undefined
-		}))
-	}]
+		stack: "event",
+		itemStyle: {
+			color: getEventLegendColor(event, index)
+		},
+		data: eventList.value.map(item => item.id === event.id ? countRecordByEvent(event.id || "") : undefined)
+	}))
 }));
 
 const { chartElement } = useStoreChart(chartOption);
+let resizeObserver: ResizeObserver | undefined;
 
 watch(() => props.dateTextList, async () => {
 	await loadDailyStat();
@@ -73,10 +97,20 @@ watch(() => props.dateTextList, async () => {
 });
 
 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();
 }
@@ -112,6 +146,10 @@ 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 || "未命名事件";
 }
@@ -120,6 +158,30 @@ function getEventIdList(): string[] {
 	return eventList.value.map(item => item.id).filter((id): id is string => Boolean(id));
 }
 
+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) {
diff --git a/src/pages/tabs/SettingTab.vue b/src/pages/tabs/SettingTab.vue
index 1d8c44e..2d329a7 100644
--- a/src/pages/tabs/SettingTab.vue
+++ b/src/pages/tabs/SettingTab.vue
@@ -104,6 +104,12 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 				path: "/management/customer-data-charts",
 				title: "客户统计数据",
 				visible: userStore.hasPermissions(permissionCodes.stat.read)
+			},
+			{
+				icon: "tag",
+				path: "/management/tags",
+				title: "标签管理",
+				visible: userStore.hasPermissions(corePermissionCodes.tag.read)
 			}
 		]
 	},
diff --git a/src/pages/tag/TagList.vue b/src/pages/tag/TagList.vue
new file mode 100644
index 0000000..bdd6806
--- /dev/null
+++ b/src/pages/tag/TagList.vue
@@ -0,0 +1,280 @@
+<template>
+	<div v-can="corePermissionCodes.tag.read" class="tag-list">
+		<t-pull-down-refresh
+			v-model="isRefreshing"
+			:refresh-timeout="30000"
+			@refresh="refresh"
+		>
+			<div class="tag-panel">
+				<div
+					v-for="item in tagList"
+					:key="item.id"
+					class="item"
+					@click="openEditDialog(item)"
+				>
+					<span class="name" v-text="getTagName(item)" />
+					<button
+						v-if="canDeleteTag"
+						type="button"
+						class="close"
+						@click="confirmRemoveTag(item, $event)"
+					>
+						<t-icon name="close" size="1rem" />
+					</button>
+				</div>
+			</div>
+			<div v-if="!tagList.length" class="empty" v-text="isLoading ? '正在加载标签' : '暂无标签'" />
+		</t-pull-down-refresh>
+		<t-button v-can="corePermissionCodes.tag.create" class="create" theme="primary" @click="openCreateDialog">
+			<template #icon>
+				<t-icon name="add" />
+			</template>
+			新增标签
+		</t-button>
+	</div>
+	<t-dialog
+		v-model:visible="editDialogVisible"
+		:title="isCreateMode ? '新增标签' : '编辑标签'"
+		cancel-btn="取消"
+		confirm-btn="保存"
+		@cancel="closeEditDialog"
+		@confirm="saveTag"
+	>
+		<div class="edit-dialog">
+			<t-input
+				v-model.trim="formModel.name"
+				class="name-input"
+				borderless
+				clearable
+				placeholder="标签名称"
+			/>
+		</div>
+	</t-dialog>
+</template>
+
+<script setup lang="ts">
+import { DialogPlugin, Toast } from "tdesign-mobile-vue";
+import { useUserStore } from "timi-web";
+import TagAPI from "@/api/TagAPI";
+import type { Tag } from "@/types/Tag";
+import { corePermissionCodes } from "@/utils/permission";
+
+defineOptions({
+	name: "TagList"
+});
+
+const userStore = useUserStore();
+
+const pageSize = 100;
+const tagList = ref<Tag[]>([]);
+const isLoading = ref(false);
+const isSaving = ref(false);
+const isRefreshing = ref(false);
+const editDialogVisible = ref(false);
+const formModel = reactive({
+	id: "",
+	name: ""
+});
+
+const canUpdateTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.update));
+const canDeleteTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.delete));
+const isCreateMode = computed(() => !formModel.id);
+
+function getTagName(tag: Tag): string {
+	return tag.name || tag.zhCN || "未命名标签";
+}
+
+async function loadTags(): Promise<void> {
+	isLoading.value = true;
+	try {
+		const result = await TagAPI.list({
+			index: 0,
+			size: pageSize
+		});
+		tagList.value = result.list || [];
+	} catch {
+		Toast.error("标签加载失败");
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+async function refresh(): Promise<void> {
+	isRefreshing.value = true;
+	try {
+		await loadTags();
+	} finally {
+		isRefreshing.value = false;
+	}
+}
+
+function openCreateDialog(): void {
+	formModel.id = "";
+	formModel.name = "";
+	editDialogVisible.value = true;
+}
+
+function openEditDialog(tag: Tag): void {
+	if (!canUpdateTag.value) {
+		return;
+	}
+	formModel.id = tag.id || "";
+	formModel.name = getTagName(tag);
+	editDialogVisible.value = true;
+}
+
+function closeEditDialog(): void {
+	editDialogVisible.value = false;
+}
+
+function validateForm(): boolean {
+	if (!formModel.name.trim()) {
+		Toast.warning("请输入标签名称");
+		return false;
+	}
+	return true;
+}
+
+async function saveTag(): Promise<void> {
+	if (!validateForm()) {
+		return;
+	}
+	isSaving.value = true;
+	try {
+		const payload: Tag = {
+			id: formModel.id || undefined,
+			name: formModel.name.trim(),
+			zhCN: formModel.name.trim()
+		};
+		if (isCreateMode.value) {
+			await TagAPI.create(payload);
+		} else {
+			await TagAPI.update(payload);
+		}
+		editDialogVisible.value = false;
+		await loadTags();
+		Toast.success("标签已保存");
+	} catch {
+		Toast.error("标签保存失败");
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+function confirmRemoveTag(tag: Tag, event?: MouseEvent): void {
+	event?.preventDefault();
+	event?.stopPropagation();
+	if (!tag.id) {
+		return;
+	}
+	const dialog = DialogPlugin.confirm({
+		title: "删除标签",
+		content: `确定删除标签 ${getTagName(tag)} 吗？`,
+		cancelBtn: "取消",
+		confirmBtn: "删除",
+		onCancel() {
+			dialog.destroy();
+		},
+		async onConfirm() {
+			dialog.destroy();
+			await removeTag(tag.id || "");
+		}
+	});
+}
+
+async function removeTag(id: string): Promise<void> {
+	if (!id) {
+		return;
+	}
+	try {
+		await TagAPI.remove(id);
+		tagList.value = tagList.value.filter(item => item.id !== id);
+		Toast.success("标签已删除");
+	} catch {
+		Toast.error("标签删除失败");
+	}
+}
+
+onMounted(loadTags);
+</script>
+
+<style scoped lang="less">
+.tag-list {
+	padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
+
+	.tag-panel {
+		gap: .75rem;
+		display: flex;
+		padding: 0 1rem;
+		flex-wrap: wrap;
+		align-items: flex-start;
+
+		.item {
+			flex: 1 1 auto;
+			color: var(--td-brand-color);
+			margin: 0;
+			display: flex;
+			min-width: 5rem;
+			max-width: 100%;
+			padding: .5rem .75rem;
+			font-size: .875rem;
+			min-height: 2rem;
+			border: 1px solid var(--td-brand-color);
+			align-items: center;
+			border-radius: .75rem;
+			justify-content: center;
+
+			.name {
+				flex: 1;
+				min-width: 0;
+				text-align: center;
+				overflow-wrap: anywhere;
+			}
+
+			.close {
+				color: inherit;
+				flex: 0 0 auto;
+				border: 0;
+				padding: 0;
+				display: flex;
+				background: transparent;
+				margin-left: .5rem;
+				align-items: center;
+			}
+		}
+	}
+
+	.empty {
+		color: #52607a;
+		padding: 2rem 1rem;
+		text-align: center;
+	}
+
+	.create {
+		left: 1rem;
+		right: 1rem;
+		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
+		position: fixed;
+	}
+}
+
+.edit-dialog {
+	padding: 1rem 0;
+
+	.name-input {
+		--td-input-vertical-padding: 10px;
+
+		border: 1px solid var(--td-component-border);
+		border-radius: .875rem;
+	}
+}
+
+:global(html.theme-dark) {
+	.tag-list {
+
+		.empty {
+			color: #94a3b8;
+		}
+	}
+}
+</style>
diff --git a/src/router/routes/managementRoutes.ts b/src/router/routes/managementRoutes.ts
index e7b43ba..d827327 100644
--- a/src/router/routes/managementRoutes.ts
+++ b/src/router/routes/managementRoutes.ts
@@ -7,6 +7,7 @@ import StoreBusinessDayCalendar from "@/pages/store/StoreBusinessDayCalendar.vue
 import StoreEdit from "@/pages/store/StoreEdit.vue";
 import StoreList from "@/pages/store/StoreList.vue";
 import StoreSort from "@/pages/store/StoreSort.vue";
+import TagList from "@/pages/tag/TagList.vue";
 
 export const storeRoutes: RouteRecordRaw[] = [
 	{
@@ -95,6 +96,20 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 			bodyBackground: "#F5F5F8",
 			darkBodyBackground: "#10161f"
 		}
+	},
+	{
+		path: "/management/tags",
+		name: "TagList",
+		component: TagList,
+		meta: {
+			depth: 3,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "标签管理",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
 	}
 ];
 
diff --git a/src/types/Tag.ts b/src/types/Tag.ts
new file mode 100644
index 0000000..da679da
--- /dev/null
+++ b/src/types/Tag.ts
@@ -0,0 +1,18 @@
+import type { Model } from "timi-web";
+
+export type TagOwnerType = "GAO_STORE";
+export type TagBizType = "GAO_CUSTOMER";
+
+export type Tag = {
+	ownerType?: TagOwnerType;
+	ownerId?: string;
+	nameLangId?: string;
+	name?: string;
+	zhCN?: string;
+} & Model;
+
+export type TagApply = {
+	bizType: TagBizType;
+	bizId: string;
+	tagIdList: string[];
+} & Model;
diff --git a/src/utils/permission.ts b/src/utils/permission.ts
index 5b3e72a..4a7c288 100644
--- a/src/utils/permission.ts
+++ b/src/utils/permission.ts
@@ -75,6 +75,13 @@ export const corePermissionCodes = {
 		read: "CORE:ROLE_PERMISSION_INHERIT:READ",
 		delete: "CORE:ROLE_PERMISSION_INHERIT:DELETE"
 	},
+	tag: {
+		create: "CORE:TAG:CREATE",
+		read: "CORE:TAG:READ",
+		apply: "CORE:TAG:APPLY",
+		update: "CORE:TAG:UPDATE",
+		delete: "CORE:TAG:DELETE"
+	},
 	userRole: {
 		create: "CORE:USER_ROLE:CREATE",
 		read: "CORE:USER_ROLE:READ",