feat(web-admin): show dual carets on CRM datetime column headers.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
wuzilongandCursor committed 2026-09-08 21:48:05 +08:00
1 parent 58b5d9d7de
commit 23d23d0b86
2 files changed
+59

No files matched your search

@@ -569,4 +569,33 @@
.col-header-with-filter__label.is-right {
text-align: right;
}
.col-header-sort-pair {
display: inline-flex;
flex-direction: column;
flex-shrink: 0;
gap: 0;
line-height: 1;
}
.col-header-sort-btn {
display: block;
width: 14px;
height: 10px;
padding: 0;
border: none;
background: transparent;
color: #cbd5e1;
font-size: 9px;
line-height: 1;
cursor: pointer;
}
.col-header-sort-btn:hover {
color: #64748b;
}
.col-header-sort-btn.on {
color: #059669;
}
</style>
@@ -5,6 +5,28 @@
class="col-header-with-filter__label"
:class="{ 'is-left': align === 'left', 'is-right': align === 'right' }"
>{{ label }}</span>
<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>
<ColumnHeaderFilter
v-if="api && def"
:prop="prop"
@@ -41,9 +63,17 @@
)
const api = inject<FilterApi | null>(props.injectKey, null)
const sortApi = inject<{
setSort: (prop: string, order: 'asc' | 'desc') => void
isSortActive: (prop: string, order?: 'asc' | 'desc') => boolean
} | null>('crmColumnSort', null)
const def = computed(() => api?.defMap.get(props.prop))
const label = computed(() => def.value?.label || props.prop)
const options = computed(() =>
def.value?.type === 'enum' ? api?.enumOptionsFor(props.prop) : undefined
)
const showSort = computed(
() => Boolean(sortApi && def.value?.type === 'datetime')
)
</script>