iter(g84): 数据表定宽列支持拖拽调宽

2026-10-26 13:02:41 +08:00
parent f5db24a52f
commit db5d38c5f4
5 changed files with 97 additions and 7 deletions
@@ -128,6 +128,39 @@
  font-size: var(--ua-font-size-sm);
  color: var(--ua-color-accent);
 }
+/* 列宽手柄：右缘 7px 热区 + 1px 视觉线，拖拽/悬停/聚焦时显形 */
+.ua-col-grip {
+  position: absolute;
+  top: 0;
+  right: -4px;
+  width: 9px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+}
+.ua-col-grip::after {
+  content: '';
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  left: 4px;
+  width: 1px;
+  background: transparent;
+  transition: background 0.15s;
+}
+.ua-col-grip:hover::after,
+.ua-col-grip:focus-visible::after {
+  background: var(--ua-color-accent);
+}
+body.ua-col-resizing {
+  user-select: none;
+  cursor: col-resize;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ua-col-grip::after {
+    transition: none;
+  }
+}
 /* 斑马纹 + 悬停高亮 + 选中行（低视觉比重：淡色底 + 弱化文字） */
 .ua-table tbody tr {
  transition: background 0.12s;