feat(web-admin): show dual carets on ColumnHeaderFilter datetime columns.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
wuzilongandCursor committed 2026-09-08 22:13:31 +08:00
1 parent cf3c1e6609
commit 5410bf8836
1 file changed
+45 -3
@@ -1,6 +1,33 @@
<!-- 表头 Excel 风格列过滤:漏斗靠右,支持文本/枚举/数字/时间 -->
<template>
<el-popover
<span class="col-header-filter-root">
<span
v-if="showSort"
class="col-header-sort-pair"
@click.stop
>
<button
type="button"
class="col-header-sort-btn"
:class="{ on: sortApi!.isSortActive(prop, 'asc') }"
title="升序"
aria-label="升序"
@click="sortApi!.setSort(prop, 'asc')"
>
▲
</button>
<button
type="button"
class="col-header-sort-btn"
:class="{ on: sortApi!.isSortActive(prop, 'desc') }"
title="降序"
aria-label="降序"
@click="sortApi!.setSort(prop, 'desc')"
>
▼
</button>
</span>
<el-popover
:visible="visible"
placement="bottom-end"
:width="300"
@@ -167,11 +194,12 @@
</div>
</div>
</div>
</el-popover>
</el-popover>
</span>
</template>
<script setup lang="ts">
import { computed, onUnmounted, ref, watch } from 'vue'
import { computed, inject, onUnmounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Filter, Delete, Close, Check } from '@element-plus/icons-vue'
import {
@@ -200,6 +228,13 @@
clear: []
}>()
const sortApi = inject<{
setSort: (prop: string, order: 'asc' | 'desc') => void
isSortActive: (prop: string, order?: 'asc' | 'desc') => boolean
} | null>('crmColumnSort', null)
const showSort = computed(() => Boolean(sortApi && props.type === 'datetime'))
const visible = ref(false)
const draftText = ref('')
const draftKeyword = ref('')
@@ -384,6 +419,13 @@
</script>
<style scoped lang="scss">
.col-header-filter-root {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.column-header-filter-btn {
display: inline-flex;
flex-shrink: 0;