fix tag style

src/pages/customer/CustomerList.vue

@@ -16,6 +16,28 @@
 				clearable
 				borderless
 			/>
+			<t-button
+				v-if="canReadTag"
+				class="tag-filter"
+				theme="primary"
+				variant="outline"
+				@click="tagSelectorVisible = true"
+			>
+				<template #icon>
+					<t-icon name="tag" />
+				</template>
+				<span v-text="tagFilterText" />
+			</t-button>
+		</div>
+		<div v-if="canReadTag && selectedTagList.length" class="selected-tags bg-white">
+			<t-tag
+				v-for="item in selectedTagList"
+				:key="item.id"
+				theme="primary"
+				variant="light-outline"
+				:content="getTagName(item)"
+			/>
+			<t-button size="extra-small" variant="text" @click="clearTagFilter">清空</t-button>
 		</div>
 		<t-pull-down-refresh
 			class="list-wrapper"
@@ -86,6 +108,11 @@
 				添加
 			</t-button>
 		</div>
+		<tag-selector
+			v-model="selectedTagIdList"
+			v-model:visible="tagSelectorVisible"
+			@change="handleTagFilterChanged"
+		/>
 	</div>
 </template>
 
@@ -95,10 +122,12 @@ import { type DropdownValue } from "tdesign-mobile-vue";
 import { type Page, type PageResult, Time, Toolkit, useUserStore } from "timi-web";
 import CustomerAPI from "@/api/CustomerAPI";
 import GenderIcon from "@/components/GenderIcon.vue";
+import TagSelector from "@/components/TagSelector.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import type { Customer } from "@/types/Customer";
+import type { Tag } from "@/types/Tag";
 import { getCustomerPhotoURL } from "@/utils/customer";
-import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
+import { corePermissionCodes, gaoRoleCodes, permissionCodes } from "@/utils/permission";
 
 defineOptions({
 	name: "CustomerList"
@@ -110,6 +139,7 @@ const currentStoreStore = useCurrentStoreStore();
 const isRefreshing = ref(false);
 const isExporting = ref(false);
 const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
+const canReadTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.read));
 
 // ---------- 门店筛选 ----------
 
@@ -133,11 +163,35 @@ async function selectStoreFilter(value: DropdownValue): Promise<void> {
 	await refresh();
 }
 
+// ---------- 标签筛选 ----------
+
+const selectedTagList = ref<Tag[]>([]);
+const selectedTagIdList = ref<string[]>([]);
+const tagSelectorVisible = ref(false);
+const tagFilterText = computed(() => selectedTagList.value.length ? `${selectedTagList.value.length} 个标签` : "标签");
+
+function getTagName(tag: Tag): string {
+	return tag.name || tag.zhCN || "未命名标签";
+}
+
+async function handleTagFilterChanged(tagList: Tag[]): Promise<void> {
+	selectedTagList.value = tagList;
+	selectedTagIdList.value = tagList.map(item => item.id || "").filter(Boolean);
+	await refresh();
+}
+
+async function clearTagFilter(): Promise<void> {
+	selectedTagList.value = [];
+	selectedTagIdList.value = [];
+	await refresh();
+}
+
 // ---------- 分页 ----------
 
 const keyword = ref();
 const isLoading = ref(false);
 const isNoMore = ref(false);
+let keywordTimer: number | undefined;
 const pageResult = reactive<PageResult<Customer>>({
 	total: 0,
 	list: []
@@ -150,11 +204,9 @@ const page = reactive<Page<Customer>>({
 const fetch = Toolkit.debounce(async () => {
 	const result = await CustomerAPI.list({
 		...page,
-		likesExample: {
-			code: keyword.value,
-			name: keyword.value,
-			telephone: keyword.value
-		}
+		keyword: keyword.value,
+		storeId: selectedStoreId.value,
+		tagIdList: selectedTagIdList.value
 	});
 	pageResult.total = result.total;
 	pageResult.list = pageResult.list.concat(result.list);
@@ -187,6 +239,17 @@ async function loadData(): Promise<void> {
 
 onMounted(loadData);
 
+watch(keyword, async () => {
+	window.clearTimeout(keywordTimer);
+	keywordTimer = window.setTimeout(async () => {
+		await refresh();
+	}, 300);
+});
+
+onUnmounted(() => {
+	window.clearTimeout(keywordTimer);
+});
+
 // ---------- 导航 ----------
 
 async function toCreate(): Promise<void> {
@@ -242,6 +305,27 @@ async function doExport(): Promise<void> {
 			padding: .5rem 1rem;
 			border-radius: 1rem;
 		}
+
+		.tag-filter {
+			--td-button-border-radius: .875rem;
+
+			flex: 0 0 auto;
+		}
+	}
+
+	.selected-tags {
+		gap: .5rem;
+		z-index: 9;
+		display: flex;
+		padding: .5rem 1rem;
+		overflow: auto;
+		position: sticky;
+		top: calc(var(--app-nav-height) + 3.5rem);
+		box-shadow: var(--td-shadow-1);
+
+		:deep(.t-tag) {
+			flex: 0 0 auto;
+		}
 	}
 
 	.list-wrapper {

src/pages/customer/component/CustomerTagCard.vue

@@ -38,7 +38,7 @@ const emit = defineEmits<{
 	edit: [];
 }>();
 
-const maxRowCount = 5;
+const maxRowCount = 3;
 const tagRowList = computed(() => {
 	const rowCount = Math.min(maxRowCount, props.tagList.length);
 	const rowList = Array.from({ length: rowCount }, () => [] as Tag[]);