fix(table): 排序行图标右置并在排序组标题提供重置

- 排序行改两端布局：标题居左、方向图标贴右，未排序行右端留空对齐 - 「排序」标题右侧新增重置链接（仅排序生效时渲染），点击清除排序并就地刷新，面板保持打开
2026-10-29 08:58:22 +08:00 · 2026-10-05 11:34:58 +00:00
parent 3770e76583
commit 21a5eceeda
3 changed files with 108 additions and 18 deletions
--- a/public/static/admin/css/public.css
+++ b/public/static/admin/css/public.css
@@ -943,12 +943,38 @@ table样式
  background-color: #f8f8f8;
 }
 /* 排序行紧凑：压过 .ul-nav-block .item 基类的 padding: 8px 18px
-   （同特异性 0,2,0，源序靠后胜出，不用 !important） */
+   （同特异性 0,2,0，源序靠后胜出，不用 !important）；两端布局——
+   标题居左、方向图标贴行右端，未排序行图标 display:none，行仅剩
+   左侧标题，space-between 使各行标题对齐 */
 .ua-card-setting-panel .ua-card-setting-sort-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
  padding: 4px 12px;
  line-height: 20px;
 }

+.ua-card-setting-sort-arrow {
+  flex: none;
+}
+
+/* 「排序」标题行两端布局：标题居左，「重置」链接（仅排序生效时渲染）贴右 */
+.ua-card-setting-title.ua-card-setting-sort-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ua-card-setting-sort-reset {
+  color: #01AAED;
+  cursor: pointer;
+  padding: 0 2px;
+}
+.ua-card-setting-sort-reset:hover {
+  text-decoration: underline;
+}
+
 .ua-card-setting-switch {
  position: relative;
  flex: none;
--- a/public/static/admin/css/public.scss
+++ b/public/static/admin/css/public.scss
@@ -969,12 +969,39 @@ table样式
 }

 // 排序行紧凑：压过 .ul-nav-block .item 基类的 padding: 8px 18px
-//（同特异性 0,2,0，源序靠后胜出，不用 !important）
+//（同特异性 0,2,0，源序靠后胜出，不用 !important）；两端布局——
+// 标题居左、方向图标贴行右端，未排序行图标 display:none，行仅剩
+// 左侧标题，space-between 使各行标题对齐
 .ua-card-setting-panel .ua-card-setting-sort-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
    padding: 4px 12px;
    line-height: 20px;
 }

+.ua-card-setting-sort-arrow {
+    flex: none;
+}
+
+// 「排序」标题行两端布局：标题居左，「重置」链接（仅排序生效时渲染）贴右
+.ua-card-setting-title.ua-card-setting-sort-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.ua-card-setting-sort-reset {
+    color: #01AAED;
+    cursor: pointer;
+    padding: 0 2px;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
 .ua-card-setting-switch {
    position: relative;
    flex: none;
--- a/public/static/plugs/ulthon-admin/admin-table.js
+++ b/public/static/plugs/ulthon-admin/admin-table.js
@@ -427,11 +427,17 @@
        cardSettingHtml += '<div class="ua-card-setting-title">配置</div>';
        cardSettingHtml += '<div class="ua-card-setting-item"><span>操作按钮始终显示</span>'
            + '<span class="ua-card-setting-switch' + (operatAlwaysOn ? ' on' : '') + '"></span></div>';
-        cardSettingHtml += '<div class="ua-card-setting-title">排序</div>';
        // 当前排序读 store 单一事实源（where.sort 形状为 {字段名: 'asc'|'desc'}
-        // 单键映射，与 store setSort/buildRequestData 同构）
+        // 单键映射，与 store setSort/buildRequestData 同构）——须先于标题行
+        // 构建（重置链接的渲染判定要用）
        var cardSortState = window.UA_TABLE_STORE.dataProvider.getState(tableId);
        var cardSortCurrent = cardSortState && cardSortState.where ? cardSortState.where.sort : null;
+        // 「排序」标题 + 重置链接：以 cardSortCurrent 键数判定是否渲染
+        // （排序字段可能是已隐藏列，不在下方排序行清单里，不能用行命中判定）
+        cardSettingHtml += '<div class="ua-card-setting-title ua-card-setting-sort-title"><span>排序</span>'
+            + (cardSortCurrent && Object.keys(cardSortCurrent).length > 0
+                ? '<a class="ua-card-setting-sort-reset">重置</a>' : '')
+            + '</div>';
        $.each(((controlledLayouts[tableId] && controlledLayouts[tableId].cols[0]) || []), function (i, col) {
            if (!col || !col.field || col.sort === false || col.hide) {
                return;
@@ -443,8 +449,8 @@
                sortIconClass = 'layui-icon layui-icon-' + (cardSortCurrent[col.field] === 'desc' ? 'down' : 'up');
            }
            cardSettingHtml += '<div class="ua-card-setting-sort-item item' + sortClass + '" data-field="' + col.field + '">'
-                + (col.title || col.field)
-                + ' <i class="' + sortIconClass + '"></i></div>';
+                + '<span class="ua-card-setting-sort-label">' + (col.title || col.field) + '</span>'
+                + '<i class="' + sortIconClass + ' ua-card-setting-sort-arrow"></i></div>';
        });
        cardSettingHtml += '</div>';

@@ -474,13 +480,40 @@
            event.stopPropagation();
        });

+        // 排序状态就地刷新共用闭包：重读 store where.sort，遍历排序行更新
+        // current 高亮与方向图标（未排序行 i 保持 layui-hide，仅剩左侧标题），
+        // 并同步「重置」链接显隐——有排序（where.sort 有键，排序字段可能是
+        // 已隐藏列不在行清单里，不能用行命中判定）且无链接则补建，无排序则
+        // 移除。reloadData 调用链内 store setWhere 同步完成，调用即读即新
+        var refreshSortState = function () {
+            var sortState = window.UA_TABLE_STORE.dataProvider.getState(tableId);
+            var current = sortState && sortState.where ? sortState.where.sort : null;
+            $cardSettingElem.find('.ua-card-setting-sort-item').each(function () {
+                var sortType = current ? (current[$(this).data('field')] || null) : null;
+                $(this).toggleClass('current', !!sortType)
+                    .find('i').attr('class', (sortType
+                        ? 'layui-icon layui-icon-' + (sortType === 'desc' ? 'down' : 'up')
+                        : 'layui-icon layui-hide') + ' ua-card-setting-sort-arrow');
+            });
+            var $sortTitle = $cardSettingElem.find('.ua-card-setting-sort-title');
+            var $reset = $sortTitle.find('.ua-card-setting-sort-reset');
+            if (current && Object.keys(current).length > 0) {
+                if ($reset.length === 0) {
+                    $sortTitle.append('<a class="ua-card-setting-sort-reset">重置</a>');
+                }
+            } else {
+                $reset.remove();
+            }
+        };
+
        // 排序：循环 升 → 降 → 取消。与 listenTableSort 同构：
        // 以 lastTableWhere 为基底就地改 sort，显式传 where
        // （store.reload 仅在 opts.where 存在时经 setWhere 更新
        // 请求参数，漏传排序到不了服务端）；initSort 供表头
        // 箭头（取消时省略）；当前态以 store getState 为准
        // （搜索路径会整体覆盖 lastTableWhere，admin-table.js
-        // 侧变量不可作判定依据）。点击后面板保持打开就地刷新高亮，可连续点击
+        // 侧变量不可作判定依据）。点击后面板保持打开，refreshSortState
+        // 就地刷新高亮与重置链接，可连续点击
        $cardSettingElem.on('click', '.ua-card-setting-sort-item', function (event) {
            event.stopPropagation();
            var field = $(this).data('field');
@@ -501,17 +534,21 @@
            }
            lastTableWhere[tableId] = lastWhere;
            ua.table.reloadData(tableId, reloadOpts);
-            // 就地刷新面板高亮（覆盖取消排序态）：reloadData 调用链内 store
-            // setWhere 同步完成，返回后重读 where.sort 即新值
-            sortState = window.UA_TABLE_STORE.dataProvider.getState(tableId);
-            cardSortCurrent = sortState && sortState.where ? sortState.where.sort : null;
-            $cardSettingElem.find('.ua-card-setting-sort-item').each(function () {
-                var sortType = cardSortCurrent ? (cardSortCurrent[$(this).data('field')] || null) : null;
-                $(this).toggleClass('current', !!sortType)
-                    .find('i').attr('class', sortType
-                        ? 'layui-icon layui-icon-' + (sortType === 'desc' ? 'down' : 'up')
-                        : 'layui-icon layui-hide');
-            });
+            refreshSortState();
+        });
+
+        // 重置排序：清除 where.sort 后重载（不带 initSort，取消排序语义
+        // 与排序 handler 的取消分支一致）；面板保持打开、高亮清空，重置
+        // 链接自身随 refreshSortState 消失。stopPropagation 防外点收起，
+        // preventDefault 抑制 a 元素默认行为
+        $cardSettingElem.on('click', '.ua-card-setting-sort-reset', function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+            var lastWhere = lastTableWhere[tableId] ? lastTableWhere[tableId] : {};
+            delete lastWhere.sort;
+            lastTableWhere[tableId] = lastWhere;
+            ua.table.reloadData(tableId, {where: lastWhere});
+            refreshSortState();
        });

        // 点击面板外区域收起（原生捕获阶段监听，先于一切 stopPropagation——