From 5410bf8836669ff68b1c5dcb23c255c8d3cdd7fe Mon Sep 17 00:00:00 2001
From: wuzilong <704541015@qq.com>
Date: Tue, 8 Sep 2026 22:13:31 +0800
Subject: [PATCH] feat(web-admin): show dual carets on ColumnHeaderFilter
 datetime columns.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../business/column-header-filter/index.vue   | 48 +++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/web-admin/src/components/business/column-header-filter/index.vue b/web-admin/src/components/business/column-header-filter/index.vue
index 2a73a6070..27a2869ae 100644
--- a/web-admin/src/components/business/column-header-filter/index.vue
+++ b/web-admin/src/components/business/column-header-filter/index.vue
@@ -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;