Просмотр исходного кода

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

Co-authored-by: Cursor <cursoragent@cursor.com>
wuzilong 2 месяцев назад
Родитель
Сommit
23d23d0b86

+ 29 - 0
web-admin/src/components/business/column-header-filter/index.vue

@@ -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>

+ 30 - 0
web-admin/src/components/business/crm-col-filter-header/index.vue

@@ -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>