wkjp-list-page 1.0.21 → 1.0.23

package/README.md

@@ -89,7 +89,7 @@ deviceListApi(params) {
 **情况：** 运营想自定义表头、列太多想藏起来。  
 **默认：** **`columns` 达到 10 列及以上**（可用 **`column-config-auto-min`** 改阈值）时，表格最右侧自动出现 **表头设置** 齿轮；悬停齿轮显示 **「配置字段」** 提示（可用 **`column-config-tooltip`** 修改）。  
 **可选：** `:enable-column-config="true"` 强制开启；`:enable-column-config="false"` 强制关闭。  
-**作用：** 弹层内可 **搜索字段**、**显示/未显示** 分组、开关显隐、拖拽排序；**复选框列（`type: selection`）不出现在设置里**且表格始终保留；**固定列**左侧显示「固定」且不可拖不可关。点 **确认** 后才会作用到表格并触发 **`columns-change`**，点 **取消** / 关闭 / 再次点齿轮则放弃本次修改。
+**作用：** 弹层内可 **搜索字段**、**显示/未显示** 分组、开关显隐、拖拽排序；**复选框列（`type: selection`）不出现在设置里**且表格始终保留；列上 **`showInColumnConfig: false`** 可排除在表头设置外（表格仍显示该列）；**固定列**左侧显示「固定」且不可拖不可关。点 **确认** 后才会作用到表格并触发 **`columns-change`**，点 **取消** / 关闭 / 再次点齿轮则放弃本次修改。
 
 ### 2.2 不想要「查询」按钮，或想改按钮上的字
 
@@ -344,6 +344,8 @@ deviceListTransformList(list) {
 | `emptyText` / `defaultText` | 空值时显示文案；**`emptyText` 优先**；都不设则用 **`cell-empty-text`**（默认 `--`）。 |
 | `width` / `minWidth` | 显式指定后不再自动算宽；仍可配合上面的 tooltip 规则。 |
 | `showOverflowTooltip` | 显式 `true` / `false` 时优先于自动规则。 |
+| `showInColumnConfig` | 是否出现在 **表头设置** 弹层，默认 **`true`**；为 **`false`** 时不出现在设置里（不可被用户隐藏），表格仍渲染。兼容 **`columnConfigShow`**。 |
+| `configFixed` | 在表头设置中视为固定列，不可拖、不可关（常与 `fixed` 联用）。 |
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkjp-list-page",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "Vue2 + ElementUI CommonListPage component",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/CommonListPage.vue

@@ -60,6 +60,7 @@
           :type="item.type || 'date'"
           :unlink-panels="resolveSearchUnlinkPanels(item)"
           :editable="item.editable === true"
+          :clearable="item.clearable !== false"
           :range-separator="item.rangeSeparator || '至'"
           :style="{ width: `${item.width || (item.type === 'daterange' || item.type === 'datetimerange' ? 300 : 150)}px` }"
           :label="floatingLabelFor(item)"
@@ -194,7 +195,11 @@
               <div class="column-config-panel__body">
               <div class="column-config-panel__section">
                 <div class="column-config-panel__section-title">显示字段</div>
-                <ul v-if="visibleConfigIndexes.length" class="column-config-panel__list">
+                <ul
+                  v-if="visibleConfigIndexes.length"
+                  ref="columnConfigSortableList"
+                  class="column-config-panel__list column-config-panel__list--sortable"
+                >
                   <li
                     v-for="idx in visibleConfigIndexes"
                     :key="configColumns[idx]._configKey"
@@ -202,21 +207,27 @@
                     class="column-config-panel__item"
                     :class="{
                       'column-config-panel__item--fixed': isFixedColumn(configColumns[idx]),
-                      'column-config-panel__item--dragging': dragFromIndex === idx,
-                      'column-config-panel__item--drag-over': dragOverIndex === idx
+                      'column-config-panel__item--dragging': isColumnDragRow(configColumns[idx]),
+                      'column-config-panel__item--shift': !!columnDragKey && !isColumnDragRow(configColumns[idx])
                     }"
+                    :style="getColumnDragShiftStyle(idx)"
+                    @mousedown="onColumnRowMouseDown(idx, $event)"
                   >
                     <span
                       v-if="isFixedColumn(configColumns[idx])"
                       class="column-config-panel__fixed-tag"
                     >{{ columnConfigFixedText }}</span>
-                    <i
+                    <span
                       v-else
-                      class="column-config-panel__drag el-icon-rank"
-                      @mousedown.prevent="onDragMouseDown(idx)"
-                    ></i>
+                      class="column-config-panel__drag"
+                      title="拖动排序"
+                      @mousedown.prevent.stop="onDragMouseDown(idx, $event)"
+                    >
+                      <i v-for="dot in 6" :key="'dot-' + idx + '-' + dot"></i>
+                    </span>
                     <span class="column-config-panel__label">{{ columnConfigLabel(configColumns[idx]) }}</span>
                     <el-switch
+                      class="column-config-panel__switch"
                       :value="configColumns[idx]._visible !== false"
                       :disabled="isFixedColumn(configColumns[idx])"
                       @input="(val) => setColumnVisible(idx, val)"
@@ -248,6 +259,20 @@
                 <el-button size="small" @click="cancelColumnConfig">{{ columnConfigCancelText }}</el-button>
                 <el-button type="primary" size="small" @click="confirmColumnConfig">{{ columnConfigConfirmText }}</el-button>
               </div>
+              <div
+                v-show="!!columnDragKey"
+                class="column-config-panel__row-ghost"
+                :style="columnDragGhostStyle"
+              >
+                <span class="column-config-panel__drag column-config-panel__drag--ghost">
+                  <i v-for="dot in 6" :key="'ghost-dot-' + dot"></i>
+                </span>
+                <span class="column-config-panel__label">{{ columnDragGhostLabel }}</span>
+                <span
+                  class="column-config-panel__ghost-switch"
+                  :class="{ 'is-on': columnDragGhostSwitchOn }"
+                ></span>
+              </div>
             </div>
     </el-popover>
 
@@ -343,9 +368,14 @@ export default {
     showQueryButton: { type: Boolean, default: true },
     /** 主查询按钮文案 */
     queryButtonText: { type: String, default: "查询" },
-    /** 是否显示「清除查询」按钮（在查询按钮右侧）：将 `filters` 恢复为进入页面时的快照并重新查询 */
+    /** 是否显示「重置」按钮（在查询按钮右侧）：将 `filters` 恢复为进入页面时的快照 */
     showClearQueryButton: { type: Boolean, default: true },
-    clearQueryButtonText: { type: String, default: "清除查询" },
+    clearQueryButtonText: { type: String, default: "重置" },
+    /**
+     * 点击「重置」后是否自动 `fetchList`。默认 **true**：恢复查询条件后重新拉表。
+     * 带「请选择…再查询」等前置校验的页面请设为 **false**，仅重置条件不请求。
+     */
+    fetchOnClearQuery: { type: Boolean, default: true },
     /**
      * 搜索区折叠：显式 `true` / `false` 强制开/关；
      * 未传时 **`searchOption` 超过 `searchVisibleMax`（默认 6）** 自动显示「展开查询」。
@@ -397,12 +427,25 @@ export default {
       },
       columnConfigVisible: false,
       columnConfigKeyword: "",
-      dragFromIndex: -1,
+      /** 正在被拖起的列（用 _configKey 跟踪，拖动中会实时换位） */
+      columnDragKey: "",
       dragOverIndex: -1,
+      columnDragGhostLabel: "",
+      columnDragGhostSwitchOn: true,
+      columnDragGhostX: 0,
+      columnDragGhostY: 0,
+      columnDragGhostWidth: 0,
+      columnDragGhostOffsetX: 0,
+      columnDragGhostOffsetY: 0,
+      /** 拖动开始时在可拖列表中的序号 */
+      columnDragStartOrderIndex: -1,
+      /** 当前插入槽位（0 ~ 可拖项数量） */
+      columnDragInsertAt: -1,
+      columnDragRowHeight: 42,
       columnConfigPanelMaxHeight: null,
       configColumns: [],
       appliedColumns: [],
-      /** 进入页时 filters 的快照，用于「清除查询」 */
+      /** 进入页时 filters 的快照，用于「重置」 */
       initialFiltersSnapshot: null,
       initialFiltersCaptured: false
     };
@@ -459,6 +502,13 @@ export default {
     columnConfigSearchActive() {
       return String(this.columnConfigKeyword || "").trim() !== "";
     },
+    columnDragGhostStyle() {
+      return {
+        width: this.columnDragGhostWidth > 0 ? this.columnDragGhostWidth + "px" : "auto",
+        transform:
+          "translate3d(" + this.columnDragGhostX + "px," + this.columnDragGhostY + "px,0)"
+      };
+    },
     mergedHeaderCellStyle() {
       const baseBg = this.tableHeaderBg || "#e5e9f2";
       const base = { backgroundColor: baseBg };
@@ -609,9 +659,12 @@ export default {
     isBuiltinCellColumn(col) {
       return col && ["selection", "index", "expand"].indexOf(col.type) !== -1;
     },
-    /** 复选框列不参与表头设置 */
+    /** 复选框、展开列及 showInColumnConfig:false 不参与表头设置 */
     isConfigPanelColumn(col) {
-      return col && col.type !== "selection";
+      if (!col) return false;
+      if (col.type === "selection" || col.type === "expand") return false;
+      if (col.showInColumnConfig === false) return false;
+      return true;
     },
     textDisplayLength(text) {
       return String(text == null ? "" : text).length;
@@ -687,7 +740,11 @@ export default {
     captureInitialFilters() {
       if (this.initialFiltersCaptured || !this.filters) return;
       try {
-        this.initialFiltersSnapshot = JSON.parse(JSON.stringify(this.filters));
+        const snap = {};
+        Object.keys(this.filters).forEach((key) => {
+          snap[key] = this.cloneFilterValue(this.filters[key]);
+        });
+        this.initialFiltersSnapshot = snap;
         this.initialFiltersCaptured = true;
       } catch (e) {
         this.initialFiltersSnapshot = null;
@@ -706,14 +763,34 @@ export default {
       const snap = this.initialFiltersSnapshot;
       const f = this.filters;
       if (!snap || !f) return;
-      Object.keys(snap).forEach((key) => {
-        this.$set(f, key, this.cloneFilterValue(snap[key]));
+      Object.keys(f).forEach((key) => {
+        const val = Object.prototype.hasOwnProperty.call(snap, key)
+          ? snap[key]
+          : undefined;
+        this.$set(f, key, this.cloneFilterValue(val));
+      });
+    },
+    resetListWithoutFetch() {
+      this.innerPagination.page = 1;
+      this.innerTableData = [];
+      this.innerPagination.total = 0;
+      this.syncPaginationToFilters();
+      this.$emit("fetched", {
+        list: [],
+        total: 0,
+        page: this.innerPagination.page,
+        pageSize: this.innerPagination.pageSize,
+        raw: null,
       });
     },
     handleClearQueryClick() {
       this.applyInitialFiltersSnapshot();
-      this.fetchList({ resetPage: true });
       this.$emit("clear-query");
+      if (this.fetchOnClearQuery) {
+        this.fetchList({ resetPage: true });
+      } else {
+        this.resetListWithoutFetch();
+      }
     },
     resolveValue(item) {
       if (Object.prototype.hasOwnProperty.call(item, "value")) return item.value;
@@ -978,8 +1055,12 @@ export default {
     closeColumnConfigPopover() {
       this.columnConfigVisible = false;
       this.columnConfigKeyword = "";
-      this.dragFromIndex = -1;
+      this.columnDragKey = "";
+      this.columnDragStartOrderIndex = -1;
+      this.columnDragInsertAt = -1;
       this.dragOverIndex = -1;
+      this.columnDragGhostLabel = "";
+      this.columnDragGhostWidth = 0;
       this.columnConfigPanelMaxHeight = null;
       this.removeColumnDragListeners();
       this.unbindColumnConfigResize();
@@ -1018,7 +1099,9 @@ export default {
     },
     onColumnConfigShow() {
       this.columnConfigKeyword = "";
-      this.dragFromIndex = -1;
+      this.columnDragKey = "";
+      this.columnDragStartOrderIndex = -1;
+      this.columnDragInsertAt = -1;
       this.dragOverIndex = -1;
       this.configColumns = this.cloneConfigColumnsFrom(this.appliedColumns);
     },
@@ -1097,44 +1180,227 @@ export default {
         document.removeEventListener("mouseup", this._columnDragUpHandler);
         this._columnDragUpHandler = null;
       }
+      if (this._columnDragRaf && typeof window !== "undefined" && window.cancelAnimationFrame) {
+        window.cancelAnimationFrame(this._columnDragRaf);
+        this._columnDragRaf = null;
+      }
+      this._columnDragLastEvent = null;
+      if (typeof document !== "undefined") {
+        document.body.classList.remove("wkjp-column-dragging");
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      }
+    },
+    getVisibleDraggableOrder() {
+      const order = [];
+      for (let i = 0; i < this.visibleConfigIndexes.length; i++) {
+        const idx = this.visibleConfigIndexes[i];
+        if (this.canDragConfigIndex(idx)) order.push(idx);
+      }
+      return order;
+    },
+    getConfigIndexAfterVisibleDraggable(lastIdx) {
+      for (let i = lastIdx + 1; i <= this.configColumns.length; i++) {
+        if (i >= this.configColumns.length) return this.configColumns.length;
+        const col = this.configColumns[i];
+        if (!col) return i;
+        if (this.isColumnDragRow(col)) return i;
+        if (this.isFixedColumn(col)) return i;
+        if (col._visible === false) continue;
+        return i;
+      }
+      return lastIdx + 1;
+    },
+    /** 拖动中：计算插入槽位（order 下标 0~length，不在此阶段改 configColumns） */
+    resolveConfigDragInsertOrderIndex(e) {
+      const order = this.getVisibleDraggableOrder();
+      if (!order.length) return 0;
+      const from = this.getColumnDragCurrentIndex();
+      const without = from >= 0 ? order.filter((idx) => idx !== from) : order.slice();
+      if (!without.length) return 0;
+
+      const listEl = this.getColumnConfigSortableListEl();
+      if (!listEl) return this.columnDragStartOrderIndex >= 0 ? this.columnDragStartOrderIndex : 0;
+
+      const y = e.clientY;
+      let slotInWithout = without.length;
+      for (let i = 0; i < without.length; i++) {
+        const row = listEl.querySelector('[data-config-idx="' + without[i] + '"]');
+        if (!row) continue;
+        const rect = row.getBoundingClientRect();
+        if (y < rect.top + rect.height / 2) {
+          slotInWithout = i;
+          break;
+        }
+      }
+
+      if (slotInWithout >= without.length) return order.length;
+      return order.indexOf(without[slotInWithout]);
+    },
+    resolveConfigDragTargetIndexFromInsert(insertOrderIndex) {
+      const order = this.getVisibleDraggableOrder();
+      if (!order.length) return -1;
+      const from = this.getColumnDragCurrentIndex();
+      if (from < 0) return -1;
+      if (insertOrderIndex >= order.length) {
+        return this.getConfigIndexAfterVisibleDraggable(order[order.length - 1]);
+      }
+      return order[insertOrderIndex];
+    },
+    getColumnDragShiftStyle(idx) {
+      if (!this.columnDragKey || this.columnDragInsertAt < 0) return {};
+      const col = this.configColumns[idx];
+      if (!col || this.isColumnDragRow(col) || !this.canDragConfigIndex(idx)) return {};
+
+      const order = this.getVisibleDraggableOrder();
+      const orderIndex = order.indexOf(idx);
+      if (orderIndex < 0) return {};
+
+      const dragStart = this.columnDragStartOrderIndex;
+      const insertAt = this.columnDragInsertAt;
+      const h = this.columnDragRowHeight || 42;
+      let translateY = 0;
+
+      if (dragStart < insertAt) {
+        if (orderIndex > dragStart && orderIndex < insertAt) translateY = -h;
+      } else if (dragStart > insertAt) {
+        if (orderIndex >= insertAt && orderIndex < dragStart) translateY = h;
+      }
+
+      if (!translateY) return {};
+      return {
+        transform: "translate3d(0," + translateY + "px,0)"
+      };
+    },
+    getColumnConfigPopperRoot() {
+      const pop = this.$refs.columnConfigPopover;
+      return pop && pop.popperElm ? pop.popperElm : null;
+    },
+    getColumnConfigSortableListEl() {
+      const root = this.getColumnConfigPopperRoot();
+      if (root) {
+        return root.querySelector(".column-config-panel__list--sortable");
+      }
+      const ref = this.$refs.columnConfigSortableList;
+      return ref || null;
+    },
+    isColumnDragRow(col) {
+      return !!(col && this.columnDragKey && col._configKey === this.columnDragKey);
+    },
+    getColumnDragCurrentIndex() {
+      if (!this.columnDragKey) return -1;
+      for (let i = 0; i < this.configColumns.length; i++) {
+        if (this.configColumns[i]._configKey === this.columnDragKey) return i;
+      }
+      return -1;
+    },
+    updateColumnDragGhostPosition(e) {
+      if (!e) return;
+      this.columnDragGhostX = e.clientX - this.columnDragGhostOffsetX;
+      this.columnDragGhostY = e.clientY - this.columnDragGhostOffsetY;
+    },
+    onColumnRowMouseDown(idx, e) {
+      if (!e || e.button !== 0) return;
+      if (e.target.closest(".el-switch") || e.target.closest(".column-config-panel__drag")) return;
+      if (!this.canDragConfigIndex(idx)) return;
+      e.preventDefault();
+      this.onDragMouseDown(idx, e);
     },
-    onDragMouseDown(idx) {
+    onDragMouseDown(idx, e) {
       if (!this.canDragConfigIndex(idx)) return;
-      this.dragFromIndex = idx;
+      const rowEl =
+        e && e.currentTarget
+          ? e.currentTarget.closest("[data-config-idx]")
+          : null;
+      if (rowEl) {
+        const rect = rowEl.getBoundingClientRect();
+        this.columnDragGhostWidth = rect.width;
+        this.columnDragGhostOffsetX = e.clientX - rect.left;
+        this.columnDragGhostOffsetY = e.clientY - rect.top;
+      } else {
+        this.columnDragGhostWidth = 0;
+        this.columnDragGhostOffsetX = 12;
+        this.columnDragGhostOffsetY = 20;
+      }
+      const listEl = this.getColumnConfigSortableListEl();
+      const listRect = listEl ? listEl.getBoundingClientRect() : null;
+      if (listRect && listRect.width > 0) {
+        this.columnDragGhostWidth = listRect.width;
+      }
+      const col = this.configColumns[idx];
+      const order = this.getVisibleDraggableOrder();
+      const startOrder = order.indexOf(idx);
+      this.columnDragKey = col._configKey || "";
+      this.columnDragStartOrderIndex = startOrder;
+      this.columnDragInsertAt = startOrder >= 0 ? startOrder : 0;
+      if (rowEl) {
+        const rh = rowEl.offsetHeight || rowEl.getBoundingClientRect().height;
+        if (rh > 0) this.columnDragRowHeight = Math.round(rh);
+      }
       this.dragOverIndex = idx;
-      this._columnDragMoveHandler = (e) => this.onDragMouseMove(e);
+      this.columnDragGhostLabel = this.columnConfigLabel(col);
+      this.columnDragGhostSwitchOn = col && col._visible !== false;
+      this.updateColumnDragGhostPosition(e);
+      if (typeof document !== "undefined") {
+        document.body.classList.add("wkjp-column-dragging");
+        document.body.style.cursor = "grabbing";
+        document.body.style.userSelect = "none";
+      }
+      this._columnDragMoveHandler = (ev) => this.onDragMouseMove(ev);
       this._columnDragUpHandler = () => this.onDragMouseUp();
       document.addEventListener("mousemove", this._columnDragMoveHandler);
       document.addEventListener("mouseup", this._columnDragUpHandler);
     },
+    handleDragMouseMove(e) {
+      if (!this.columnDragKey || !e) return;
+      this.updateColumnDragGhostPosition(e);
+      const insertOrder = this.resolveConfigDragInsertOrderIndex(e);
+      if (insertOrder >= 0 && insertOrder !== this.columnDragInsertAt) {
+        this.columnDragInsertAt = insertOrder;
+      }
+    },
     onDragMouseMove(e) {
-      if (this.dragFromIndex < 0) return;
-      const target = document.elementFromPoint(e.clientX, e.clientY);
-      if (!target) return;
-      const row = target.closest("[data-config-idx]");
-      if (!row) return;
-      const overIdx = Number(row.getAttribute("data-config-idx"));
-      if (!Number.isFinite(overIdx) || !this.canDragConfigIndex(overIdx)) return;
-      this.dragOverIndex = overIdx;
+      if (!this.columnDragKey) return;
+      this._columnDragLastEvent = e;
+      if (this._columnDragRaf) return;
+      const schedule =
+        typeof window !== "undefined" && window.requestAnimationFrame
+          ? window.requestAnimationFrame.bind(window)
+          : function (fn) {
+              return setTimeout(fn, 16);
+            };
+      this._columnDragRaf = schedule(() => {
+        this._columnDragRaf = null;
+        this.handleDragMouseMove(this._columnDragLastEvent);
+      });
     },
     onDragMouseUp() {
+      const from = this.getColumnDragCurrentIndex();
+      const insertOrder = this.columnDragInsertAt;
+      const targetIdx =
+        insertOrder >= 0 ? this.resolveConfigDragTargetIndexFromInsert(insertOrder) : -1;
       this.removeColumnDragListeners();
-      if (
-        this.dragFromIndex >= 0 &&
-        this.dragOverIndex >= 0 &&
-        this.dragFromIndex !== this.dragOverIndex
-      ) {
-        this.moveConfigColumnByIndex(this.dragFromIndex, this.dragOverIndex);
+      if (from >= 0 && targetIdx >= 0 && targetIdx !== from) {
+        this.moveConfigColumnByIndex(from, targetIdx);
       }
-      this.dragFromIndex = -1;
+      this.columnDragKey = "";
+      this.columnDragStartOrderIndex = -1;
+      this.columnDragInsertAt = -1;
       this.dragOverIndex = -1;
+      this.columnDragGhostLabel = "";
+      this.columnDragGhostWidth = 0;
     },
     moveConfigColumnByIndex(from, to) {
+      if (from === to) return;
       const cols = this.configColumns.slice();
-      if (this.isFixedColumn(cols[from]) || this.isFixedColumn(cols[to])) return;
+      if (!cols[from] || this.isFixedColumn(cols[from])) return;
       const moving = cols[from];
       cols.splice(from, 1);
-      cols.splice(to, 0, moving);
+      let insertAt = to;
+      if (from < to) insertAt = to - 1;
+      if (insertAt < 0) insertAt = 0;
+      if (insertAt > cols.length) insertAt = cols.length;
+      cols.splice(insertAt, 0, moving);
       this.configColumns = cols;
     },
     applyColumnConfig() {
@@ -1418,11 +1684,15 @@ export default {
   color: #409eff;
 }
 
-/* ---------- 列表表格（政务/后台列表：浅表头、无竖线、细横线） ---------- */
+/* ---------- 列表表格（浅表头、细横线；空数据用极细外框，不用 border 网格） ---------- */
 .common-list-page /deep/ .el-table {
   overflow: hidden;
   font-size: 12px;
   color: #606266;
+  border: none;
+  border-radius: 2px;
+  outline: 1px solid #ebeef5;
+  outline-offset: -1px;
 }
 
 .common-list-page /deep/ .el-table::before,
@@ -1431,6 +1701,25 @@ export default {
   display: none;
 }
 
+.common-list-page /deep/ .el-table__empty-block {
+  min-height: 120px;
+  width: 100% !important;
+}
+
+.common-list-page /deep/ .el-table__fixed-right-patch {
+  border-bottom: 1px solid #ebeef5;
+}
+
+.common-list-page /deep/ .el-table__fixed::before,
+.common-list-page /deep/ .el-table__fixed-right::before {
+  background-color: #ebeef5;
+}
+
+.common-list-page /deep/ .el-table__fixed .el-table__body tr td.el-table__cell,
+.common-list-page /deep/ .el-table__fixed-right .el-table__body tr td.el-table__cell {
+  border-bottom: 1px solid #f0f2f5 !important;
+}
+
 .common-list-page /deep/ .el-table th.el-table__cell,
 .common-list-page /deep/ .el-table td.el-table__cell {
   border-right: none !important;
@@ -1441,7 +1730,7 @@ export default {
   font-weight: 600;
   font-size: 12px;
   padding: 10px 12px;
-  border-bottom: 1px solid #dde3eb !important;
+  border-bottom: 1px solid #ebeef5 !important;
 }
 
 .common-list-page /deep/ .el-table td.el-table__cell {
@@ -1451,6 +1740,10 @@ export default {
   vertical-align: middle;
 }
 
+.common-list-page /deep/ .el-table__body tr:last-child td.el-table__cell {
+  border-bottom: 1px solid #f0f2f5 !important;
+}
+
 .common-list-page /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
   background: #fafbfc;
 }
@@ -1582,10 +1875,10 @@ export default {
 
 .column-config-panel__body {
   flex: 1;
+  min-width: 0;
   min-height: 0;
+  overflow-x: hidden;
   overflow-y: auto;
-  margin-right: -4px;
-  padding-right: 4px;
 }
 
 .column-config-panel__head {
@@ -1633,48 +1926,153 @@ export default {
   margin: 0;
   padding: 0;
   list-style: none;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.column-config-panel__list--sortable {
+  min-width: 0;
+}
+
+.column-config-panel__list--sortable .column-config-panel__item {
+  transition: background-color 0.15s ease;
+}
+
+.column-config-panel__list--sortable .column-config-panel__item--shift {
+  transition: transform 0.22s cubic-bezier(0.2, 0, 0.2, 1), background-color 0.15s ease;
+  will-change: transform;
 }
 
 .column-config-panel__item {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-height: 36px;
-  padding: 4px 2px;
-  border-radius: 4px;
-}
-
-.column-config-panel__item--dragging {
-  background: #ecf5ff;
+  gap: 10px;
+  min-width: 0;
+  max-width: 100%;
+  min-height: 40px;
+  padding: 0 10px;
+  margin-bottom: 2px;
+  border-radius: 6px;
+  box-sizing: border-box;
+  background: transparent;
 }
 
-.column-config-panel__item--drag-over {
-  background: #f5f7fa;
+.column-config-panel__item:not(.column-config-panel__item--fixed):not(.column-config-panel__item--dragging):hover {
+  background: #f5f8fc;
 }
 
-.column-config-panel__item[draggable="true"] {
-  cursor: move;
+.column-config-panel__item--dragging {
+  visibility: hidden;
 }
 
 .column-config-panel__item--fixed {
   cursor: default;
 }
 
+.column-config-panel__item--hidden {
+  opacity: 0.85;
+}
+
 .column-config-panel__drag {
   flex-shrink: 0;
-  width: 16px;
-  font-size: 14px;
-  color: #c0c4cc;
+  display: grid;
+  grid-template-columns: repeat(2, 2px);
+  grid-template-rows: repeat(3, 2px);
+  gap: 3px;
+  width: 7px;
+  padding: 6px 8px 6px 2px;
   cursor: grab;
   touch-action: none;
+  user-select: none;
+}
+
+.column-config-panel__drag i {
+  display: block;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: #b8bcc4;
+  transition: background-color 0.15s ease;
+}
+
+.column-config-panel__item:hover .column-config-panel__drag i,
+.column-config-panel__drag:hover i {
+  background: #909399;
 }
 
 .column-config-panel__drag:active {
   cursor: grabbing;
 }
 
+.column-config-panel__row-ghost {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 4000;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 40px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 13px;
+  color: #303133;
+  background: #fff;
+  border-radius: 6px;
+  border: 1px solid #e8ecf2;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
+  pointer-events: none;
+  cursor: grabbing;
+  will-change: transform;
+}
+
+.column-config-panel__drag--ghost {
+  cursor: grabbing;
+}
+
+.column-config-panel__row-ghost .column-config-panel__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.column-config-panel__ghost-switch {
+  flex-shrink: 0;
+  position: relative;
+  width: 36px;
+  height: 20px;
+  border-radius: 10px;
+  background: #dcdfe6;
+  transition: background-color 0.15s ease;
+}
+
+.column-config-panel__ghost-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  transition: transform 0.15s ease;
+}
+
+.column-config-panel__ghost-switch.is-on {
+  background: #409eff;
+}
+
+.column-config-panel__ghost-switch.is-on::after {
+  transform: translateX(16px);
+}
+
 .column-config-panel__drag--placeholder {
   visibility: hidden;
+  pointer-events: none;
 }
 
 .column-config-panel__fixed-tag {
@@ -1717,14 +2115,25 @@ export default {
 
 <style>
 .common-list-page-column-config-popper {
-  padding: 12px 14px !important;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
+  padding: 14px 16px !important;
+  border-radius: 8px !important;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
   z-index: 3000 !important;
   overflow: hidden !important;
+  overflow-x: hidden !important;
   margin: 0 !important;
   box-sizing: border-box !important;
 }
 
+.common-list-page-column-config-popper .column-config-panel__row-ghost {
+  max-width: calc(100vw - 32px);
+}
+
+.common-list-page-column-config-popper .column-config-panel__switch.el-switch {
+  transform: scale(0.92);
+  transform-origin: center right;
+}
+
 .common-list-page-column-config-popper .el-switch {
   pointer-events: auto !important;
 }
@@ -1739,4 +2148,13 @@ export default {
 .common-list-page-column-config-popper .column-config-panel__switch .el-switch {
   pointer-events: auto;
 }
+
+body.wkjp-column-dragging {
+  cursor: grabbing !important;
+  user-select: none !important;
+}
+
+body.wkjp-column-dragging .column-config-panel__item--dragging {
+  visibility: hidden !important;
+}
 </style>