fix search header style

This commit is contained in:
Timi
2026-08-22 11:14:00 +08:00
parent 387e995634
commit 11111ea2f9
2 changed files with 37 additions and 32 deletions
+2 -3
View File
@@ -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;
}
+35 -29
View File
@@ -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 {