From 11111ea2f9b6ec316b10aa8ae1143d8f693fbb6c Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Sat, 22 Aug 2026 11:14:00 +0800
Subject: [PATCH] fix search header style

---
 src/pages/customer/CustomerList.vue |  5 +--
 src/pages/tag/TagList.vue           | 64 ++++++++++++++++-------------
 2 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/pages/customer/CustomerList.vue b/src/pages/customer/CustomerList.vue
index a2a35db..9a5e307 100644
--- a/src/pages/customer/CustomerList.vue
+++ b/src/pages/customer/CustomerList.vue
@@ -5,7 +5,6 @@
 				v-model.trim="keyword"
 				class="search"
 				placeholder="搜索编码、姓名、电话"
-				clearable
 				borderless
 			/>
 			<t-button
@@ -245,7 +244,7 @@ async function doExport(): Promise<void> {
 
 <style scoped lang="less">
 .customer-list {
-	padding: calc(var(--app-nav-height)) 0 5.5rem 0;
+	padding: var(--app-nav-height) 0 5.5rem 0;
 
 	.filter {
 		gap: .5rem;
@@ -261,7 +260,7 @@ async function doExport(): Promise<void> {
 
 		.search {
 			width: 100%;
-			border: 1px solid rgba(148, 163, 184, .28);
+			border: 1px solid var(--td-component-border);
 			padding: .5rem 1rem;
 			border-radius: 1rem;
 		}
diff --git a/src/pages/tag/TagList.vue b/src/pages/tag/TagList.vue
index 609cf83..d26379a 100644
--- a/src/pages/tag/TagList.vue
+++ b/src/pages/tag/TagList.vue
@@ -1,12 +1,14 @@
 <template>
 	<div v-can="corePermissionCodes.tag.read" class="tag-list">
-		<t-input
-			v-model.trim="keyword"
-			class="search"
-			type="search"
-			borderless
-			placeholder="搜索标签"
-		/>
+		<div class="header bg-white">
+			<t-input
+				v-model.trim="keyword"
+				class="search"
+				type="search"
+				borderless
+				placeholder="搜索标签"
+			/>
+		</div>
 		<t-pull-down-refresh
 			v-model="isRefreshing"
 			:refresh-timeout="30000"
@@ -34,12 +36,6 @@
 			<div v-if="!tagList.length" class="empty" v-text="emptyText" />
 			<div v-if="tagList.length" class="load-state" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</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"
@@ -65,6 +61,7 @@
 import { DialogPlugin } from "tdesign-mobile-vue";
 import { type Page, useUserStore } from "timi-web";
 import TagAPI from "@/api/TagAPI";
+import { useNavBarStore } from "@/store/navBarStore";
 import type { Tag } from "@/types/Tag";
 import { corePermissionCodes } from "@/utils/permission";
 import { Message } from "@/utils/message.ts";
@@ -74,6 +71,7 @@ defineOptions({
 });
 
 const userStore = useUserStore();
+const navBarStore = useNavBarStore();
 
 const pageSize = 100;
 const keyword = ref("");
@@ -250,7 +248,13 @@ async function removeTag(id: string): Promise<void> {
 	}
 }
 
-onMounted(reload);
+onMounted(async () => {
+	navBarStore.clearRight();
+	if (userStore.hasPermissions(corePermissionCodes.tag.create)) {
+		navBarStore.setRightText("新增", "var(--td-brand-color)", openCreateDialog);
+	}
+	await reload();
+});
 
 watch(keyword, () => {
 	window.clearTimeout(keywordTimer);
@@ -260,18 +264,33 @@ watch(keyword, () => {
 });
 
 onUnmounted(() => {
+	navBarStore.clearRight();
 	window.clearTimeout(keywordTimer);
 });
 </script>
 
 <style scoped lang="less">
 .tag-list {
-	padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
+	padding: var(--app-nav-height) 0 2rem 0;
+
+	.header {
+		top: var(--app-nav-height);
+		z-index: 10;
+		padding: .5rem;
+		position: sticky;
+		box-shadow: var(--td-shadow-1);
+
+		.search {
+			border: 1px solid var(--td-component-border);
+			padding: .5rem 1rem;
+			border-radius: 1rem;
+		}
+	}
 
 	.tag-panel {
 		gap: .75rem;
 		display: flex;
-		padding: 0 1rem;
+		padding: 1rem;
 		flex-wrap: wrap;
 		align-items: flex-start;
 
@@ -311,13 +330,6 @@ onUnmounted(() => {
 		}
 	}
 
-	.search {
-		margin: 0 1rem 1rem;
-		padding: .5rem 1rem;
-		border: 1px solid var(--td-component-border);
-		border-radius: .875rem;
-	}
-
 	.empty {
 		color: #52607a;
 		padding: 2rem 1rem;
@@ -330,12 +342,6 @@ onUnmounted(() => {
 		text-align: center;
 	}
 
-	.create {
-		left: 1rem;
-		right: 1rem;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
-		position: fixed;
-	}
 }
 
 .edit-dialog {