@ticatec/topside-elements 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.3
+
+### 变更
+- **Split 分割线外观**：线条默认 1px（`width`，原 2px）；新增 `hitSize`（不占布局的感应区，默认 8px，靠近即可悬停 / 拖动）、`color`、`gripColor`、`gripSize`、`gripLength`；悬停 / 拖动 / 键盘聚焦时中间淡入深色稍粗的把手，取代原来整条加深。新令牌 `--topside-divider-grip-color`（亮 `#94A3B8` / 暗 `#8a8a8a`）。
+
+### 文档
+- 重新生成 `docs/components`（Split、DataTable / ConciseDataTable 合计行相关属性）。
+
 ## 1.0.0 — 首个公开版本
 
 ### 新增

package/dist/general/split/README.md

@@ -3,18 +3,20 @@
 A draggable divider that resizes the panel you bind it to. Sits between two adjacent panels in a flex container; dragging the divider updates the bound panel's `width` or `height` inline style.
 
 > **Naming gotcha**: `direction` describes the **visual orientation of the divider bar**, not the layout direction of the panels.
-> - `direction="vertical"` → a *vertical bar* (1px wide, full height) → goes between **left/right** panels (flex row).
-> - `direction="horizontal"` → a *horizontal bar* (full width, 1px tall) → goes between **top/bottom** panels (flex column).
+> - `direction="vertical"` → a *vertical bar* (`width` px wide, full height) → goes between **left/right** panels (flex row).
+> - `direction="horizontal"` → a *horizontal bar* (full width, `width` px tall) → goes between **top/bottom** panels (flex column).
 
 ## Features
 
 - **Drag-to-resize**: mouse-driven resizing of the bound panel
 - **Two orientations**: vertical bar (default) for left/right splits, horizontal bar for top/bottom splits
-- **Adjustable thickness**: `width` prop controls the bar's px thickness
+- **Thin line, generous hit area**: the visible line is 1px by default (`width`), while an invisible `hitSize` zone (8px) around it catches hover and drag without taking layout space
+- **Hover handle**: a darker, thicker, rounded segment fades in at the center on hover / drag / keyboard focus (like the sidebar resizer in Claude)
+- **Customisable look**: `color`, `gripColor`, `gripSize`, `gripLength`
 - **Reverse mode**: for when the bound panel is on the right/bottom of the divider
 - **Fixed mode**: omit `bindingPanel` to render a non-interactive visual divider
 - **Min size guard**: bound panel can't be dragged below 5px
-- **Theme token**: color via `--topside-dividing-line-color`
+- **Theme tokens**: `--topside-dividing-line-color`, `--topside-divider-grip-color`
 - **Cleanup on unmount**: in-flight drag is cancelled if the component is destroyed mid-drag
 
 ## Installation
@@ -57,7 +59,12 @@ Drag the bar; the left panel's width updates in real time. The right panel (with
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `direction` | `'vertical' \| 'horizontal'` | `'vertical'` | Visual orientation of the bar. `vertical` = thin tall bar (for left/right splits); `horizontal` = thin wide bar (for top/bottom splits). |
-| `width` | `number` | `2` | Thickness of the bar in pixels |
+| `width` | `number` | `1` | Thickness of the visible line in px (takes layout space) |
+| `hitSize` | `number` | `8` | Thickness of the invisible hover/drag zone in px, centered on the line; takes no layout space |
+| `color` | `string` | token | Line color; overrides `--topside-dividing-line-color` |
+| `gripColor` | `string` | token | Color of the handle shown on hover/drag; overrides `--topside-divider-grip-color` |
+| `gripSize` | `number` | `3` | Handle thickness in px |
+| `gripLength` | `number` | `32` | Handle length in px; `0` = full length |
 | `bindingPanel` | `HTMLElement \| undefined` | `undefined` | The panel to resize. Omit to render a fixed, non-draggable divider. |
 | `reverse` | `boolean` | `false` | Flip drag direction. Use when the bound panel sits to the **right/below** the divider (so dragging away from it grows it). |
 | `onResizeEnd` | `(size: number) => void` | `undefined` | Fired once when a drag ends; receives the bound panel's final `clientWidth` or `clientHeight` in px. Not fired for fixed dividers. |
@@ -94,7 +101,7 @@ The component does **not** emit intermediate events during the drag — it mutat
     <p>Drag the bar to resize me.</p>
   </div>
 
-  <Split bindingPanel={leftPanel} direction="vertical" width={4} />
+  <Split bindingPanel={leftPanel} direction="vertical" />
 
   <div style="flex: 1 1 auto; padding: 16px; background: #e8e8e8;">
     <h3>Right</h3>
@@ -117,7 +124,7 @@ The component does **not** emit intermediate events during the drag — it mutat
     <h3>Top</h3>
   </div>
 
-  <Split bindingPanel={topPanel} direction="horizontal" width={4} />
+  <Split bindingPanel={topPanel} direction="horizontal" />
 
   <div style="flex: 1 1 auto; padding: 16px; background: #e8e8e8;">
     <h3>Bottom</h3>
@@ -186,13 +193,13 @@ Sidebar | Editor | Details, all resizable. Two dividers, both bound to the panel
     Sidebar
   </div>
 
-  <Split bindingPanel={sidebar} direction="vertical" width={4} />
+  <Split bindingPanel={sidebar} direction="vertical" />
 
   <div bind:this={editor} style="flex: 1 1 0; background: #0f172a; color: #e2e8f0;">
     Editor
   </div>
 
-  <Split bindingPanel={editor} direction="vertical" width={4} />
+  <Split bindingPanel={editor} direction="vertical" />
 
   <div style="flex: 0 0 320px; background: #111827; color: #e2e8f0;">
     Details
@@ -214,76 +221,54 @@ Omit `bindingPanel`:
 </div>
 ```
 
-Fixed dividers get the `fixed` class → `pointer-events: none; cursor: default`. The hover/active states are also suppressed.
+Fixed dividers get the `fixed` class → `pointer-events: none; cursor: default`; the hit area and hover handle are not rendered.
 
-## DOM Structure & CSS
+## Styling Examples
+
+```svelte
+<!-- Claude-style: 1px line, wide hit area, short indigo handle -->
+<Split bindingPanel={sidebar} width={1} hitSize={12} gripSize={4} gripLength={48}
+       color="#e5e7eb" gripColor="#6366f1" />
 
-Rendered output:
+<!-- Whole line thickens on hover -->
+<Split bindingPanel={sidebar} gripLength={0} />
+```
+
+## DOM Structure & CSS
 
 ```html
 <div
-  class="topside-divider {direction}"     <!-- + 'fixed' if no bindingPanel -->
-  class:fixed
-  style="height: 2px" or "width: 2px"     <!-- depends on direction -->
+  class="topside-divider {direction}"   <!-- + 'fixed' without bindingPanel, + 'dragging' while dragging -->
+  style="width: 1px; --split-hit: 8px; --split-grip-size: 3px; --split-grip-length: 32px; ..."
   role="separator"
   aria-orientation="{direction}"
   aria-label="Resize handle"
   tabindex="0"
-  onmousedown={startDrag}
-/>
+></div>
 ```
 
-Built-in styles:
-
-```css
-.topside-divider {
-  background-color: var(--topside-dividing-line-color, #CBD5E1);
-  flex: 0 0 auto;          /* don't grow or shrink */
-  transition: background-color 0.2s ease;
-}
-
-.topside-divider.vertical {
-  height: 100%;
-  cursor: col-resize;
-}
-
-.topside-divider.horizontal {
-  width: 100%;
-  cursor: row-resize;
-}
-
-.topside-divider.fixed {
-  cursor: default;
-  pointer-events: none;
-}
-
-.topside-divider:hover {
-  /* darken 20% via color-mix */
-  background-color: color-mix(in srgb, var(--topside-dividing-line-color, #CBD5E1) 80%, #000);
-}
-
-.topside-divider:active {
-  transition: none;        /* no animation lag during drag */
-}
-```
+- The element itself is the visible line (`width` px thick, `flex: 0 0 auto`), `position: relative; z-index: 5`.
+- `::before` is the transparent **hit area**: centered on the line, `hitSize` px thick. It overlaps the neighbouring panels by about `(hitSize - width) / 2` px on each side, so hovering near the line already shows the resize cursor.
+- `::after` is the **handle**: centered, `gripSize` × `gripLength`, rounded, `opacity: 0`. It fades in on `:hover` (100ms delay, so passing over it doesn't flicker), and immediately while `.dragging` or `:focus-visible`.
+- Fixed dividers hide both pseudo-elements and ignore pointer events.
 
 ### CSS Custom Properties
 
-| Variable | Default | Description |
+| Variable | Default (light / dark) | Description |
 |----------|---------|-------------|
-| `--topside-dividing-line-color` | `#CBD5E1` | Background color of the bar (hover state darkens it 20%) |
+| `--topside-dividing-line-color` | `#CBD5E1` / `#4a4a4a` | Line color (overridden by the `color` prop) |
+| `--topside-divider-grip-color` | `#94A3B8` / `#8a8a8a` | Handle color (overridden by the `gripColor` prop) |
 
 ```css
 :root {
-  --topside-dividing-line-color: #d4d4d8;
-}
-.dark-theme {
-  --topside-dividing-line-color: #3f3f46;
+  --topside-dividing-line-color: #e5e7eb;
+  --topside-divider-grip-color: #9ca3af;
 }
 ```
 
 ## Behavior Notes
 
+- **Hit area overlaps neighbours.** Clicks within about `hitSize / 2` px of the line go to the divider. If a panel has a button or scrollbar right at that edge, lower `hitSize`.
 - **Mouse only.** The drag uses `mousedown` / `mousemove` / `mouseup`. Touch events are not handled — on touch devices the divider will not respond to finger drags.
 - **Min size**: bound panel clamped to ≥5px (won't collapse to zero).
 - **Document-level listeners**: `mousemove` and `mouseup` are attached to `document` during a drag, so the cursor can wander outside the bar without losing the grab.
@@ -295,7 +280,7 @@ Built-in styles:
 ## Accessibility
 
 - `role="separator"`, `aria-orientation`, `aria-label="Resize handle"`, `tabindex="0"` are set on the divider.
-- **Keyboard support is partial**: the divider is focusable but the component does **not** handle arrow-key events. Dragging requires a mouse. If you need keyboard resizing, layer your own `keydown` handler on a wrapping element.
+- **Keyboard**: when focused, arrow keys (←/→ for vertical, ↑/↓ for horizontal) resize the bound panel by 10px and fire `onResizeEnd`; the handle is shown while focused via keyboard.
 - For fixed dividers, consider `aria-disabled="true"` if the visual still looks interactive.
 
 ## Best Practices

package/dist/general/split/README_CN.md

@@ -3,18 +3,20 @@
 一个可拖动的分隔条，用来调整绑定的那个面板的尺寸。放在 flex 容器里两个相邻面板之间，拖动会直接改写绑定面板的 `width` 或 `height` 内联样式。
 
 > **命名陷阱**：`direction` 描述的是**分隔条本身的视觉朝向**，不是面板的排布方向。
-> - `direction="vertical"` → 一根**竖条**（1px 宽，整高）→ 放在**左右**面板之间（flex row）。
-> - `direction="horizontal"` → 一根**横条**（整宽，1px 高）→ 放在**上下**面板之间（flex column）。
+> - `direction="vertical"` → 一根**竖条**（`width` px 宽，整高）→ 放在**左右**面板之间（flex row）。
+> - `direction="horizontal"` → 一根**横条**（整宽，`width` px 高）→ 放在**上下**面板之间（flex column）。
 
 ## 功能特性
 
 - **拖拽调整**：鼠标拖动改变绑定面板尺寸
 - **两个方向**：竖条（默认，用于左右分栏）或横条（用于上下分栏）
-- **可调粗细**：`width` 属性控制条的像素厚度
+- **细线 + 宽感应区**：可见线条默认 1px（`width`），周围有一圈不占布局的透明感应区（`hitSize`，默认 8px），靠近线条即可悬停、拖动
+- **悬停把手**：悬停 / 拖动 / 键盘聚焦时，线条中间淡入一段深色、稍粗、圆角的把手（类似 Claude 侧边栏）
+- **外观可调**：`color`、`gripColor`、`gripSize`、`gripLength`
 - **反向模式**：当绑定面板在分隔条的右侧/下方时使用
 - **固定模式**：省略 `bindingPanel` 即渲染为不可交互的视觉分隔条
 - **最小尺寸保护**：绑定面板不会被拖到 5px 以下
-- **主题令牌**：颜色由 `--topside-dividing-line-color` 驱动
+- **主题令牌**：`--topside-dividing-line-color`、`--topside-divider-grip-color`
 - **销毁时清理**：组件在拖动过程中被销毁会自动取消拖动
 
 ## 安装
@@ -57,7 +59,12 @@ import Split from '@ticatec/topside-elements/Split';
 | 属性 | 类型 | 默认值 | 描述 |
 |------|------|---------|-------------|
 | `direction` | `'vertical' \| 'horizontal'` | `'vertical'` | 分隔条的视觉朝向。`vertical` = 细高竖条（用于左右分栏）；`horizontal` = 细宽横条（用于上下分栏） |
-| `width` | `number` | `2` | 分隔条的像素厚度 |
+| `width` | `number` | `1` | 可见线条的像素厚度（占布局） |
+| `hitSize` | `number` | `8` | 鼠标感应区厚度（px），以线条为中心向两侧伸出，不占布局 |
+| `color` | `string` | 令牌 | 线条底色，覆盖 `--topside-dividing-line-color` |
+| `gripColor` | `string` | 令牌 | 悬停 / 拖动时把手颜色，覆盖 `--topside-divider-grip-color` |
+| `gripSize` | `number` | `3` | 把手粗细（px） |
+| `gripLength` | `number` | `32` | 把手长度（px），`0` 表示整条 |
 | `bindingPanel` | `HTMLElement \| undefined` | `undefined` | 要调整尺寸的面板。省略则渲染为固定不可拖的分隔条 |
 | `reverse` | `boolean` | `false` | 反转拖动方向。绑定面板在分隔条**右侧/下方**时使用（向远离面板的方向拖动使其变大） |
 | `onResizeEnd` | `(size: number) => void` | `undefined` | 一次拖动结束时触发一次，参数是绑定面板最终的 `clientWidth` 或 `clientHeight`（像素）。固定分隔条不会触发 |
@@ -94,7 +101,7 @@ import Split from '@ticatec/topside-elements/Split';
     <p>拖动中间的条调整我的宽度。</p>
   </div>
 
-  <Split bindingPanel={leftPanel} direction="vertical" width={4} />
+  <Split bindingPanel={leftPanel} direction="vertical" />
 
   <div style="flex: 1 1 auto; padding: 16px; background: #e8e8e8;">
     <h3>右侧</h3>
@@ -117,7 +124,7 @@ import Split from '@ticatec/topside-elements/Split';
     <h3>顶部</h3>
   </div>
 
-  <Split bindingPanel={topPanel} direction="horizontal" width={4} />
+  <Split bindingPanel={topPanel} direction="horizontal" />
 
   <div style="flex: 1 1 auto; padding: 16px; background: #e8e8e8;">
     <h3>底部</h3>
@@ -186,13 +193,13 @@ import Split from '@ticatec/topside-elements/Split';
     侧边栏
   </div>
 
-  <Split bindingPanel={sidebar} direction="vertical" width={4} />
+  <Split bindingPanel={sidebar} direction="vertical" />
 
   <div bind:this={editor} style="flex: 1 1 0; background: #0f172a; color: #e2e8f0;">
     编辑器
   </div>
 
-  <Split bindingPanel={editor} direction="vertical" width={4} />
+  <Split bindingPanel={editor} direction="vertical" />
 
   <div style="flex: 0 0 320px; background: #111827; color: #e2e8f0;">
     详情
@@ -214,76 +221,54 @@ import Split from '@ticatec/topside-elements/Split';
 </div>
 ```
 
-固定分隔条会加 `fixed` 类 → `pointer-events: none; cursor: default`，hover/active 状态也会失效。
+固定分隔条会加 `fixed` 类 → `pointer-events: none; cursor: default`，不渲染感应区和把手。
 
-## DOM 结构与 CSS
+## 样式示例
+
+```svelte
+<!-- Claude 风格：1px 细线、12px 感应区、短的靛蓝把手 -->
+<Split bindingPanel={sidebar} width={1} hitSize={12} gripSize={4} gripLength={48}
+       color="#e5e7eb" gripColor="#6366f1" />
 
-实际渲染：
+<!-- 悬停时整条加粗 -->
+<Split bindingPanel={sidebar} gripLength={0} />
+```
+
+## DOM 结构与 CSS
 
 ```html
 <div
-  class="topside-divider {direction}"     <!-- 无 bindingPanel 时再加 'fixed' -->
-  class:fixed
-  style="height: 2px" 或 "width: 2px"     <!-- 取决于 direction -->
+  class="topside-divider {direction}"   <!-- 无 bindingPanel 时加 'fixed'，拖动中加 'dragging' -->
+  style="width: 1px; --split-hit: 8px; --split-grip-size: 3px; --split-grip-length: 32px; ..."
   role="separator"
   aria-orientation="{direction}"
   aria-label="Resize handle"
   tabindex="0"
-  onmousedown={startDrag}
-/>
+></div>
 ```
 
-内置样式：
-
-```css
-.topside-divider {
-  background-color: var(--topside-dividing-line-color, #CBD5E1);
-  flex: 0 0 auto;          /* 不膨胀不收缩 */
-  transition: background-color 0.2s ease;
-}
-
-.topside-divider.vertical {
-  height: 100%;
-  cursor: col-resize;
-}
-
-.topside-divider.horizontal {
-  width: 100%;
-  cursor: row-resize;
-}
-
-.topside-divider.fixed {
-  cursor: default;
-  pointer-events: none;
-}
-
-.topside-divider:hover {
-  /* color-mix 加深 20% */
-  background-color: color-mix(in srgb, var(--topside-dividing-line-color, #CBD5E1) 80%, #000);
-}
-
-.topside-divider:active {
-  transition: none;        /* 拖动时无动画延迟 */
-}
-```
+- 元素本身就是可见线条（粗 `width` px，`flex: 0 0 auto`），`position: relative; z-index: 5`。
+- `::before` 是透明**感应区**：以线条为中心、厚 `hitSize` px，向两侧各盖住相邻面板约 `(hitSize - width) / 2` px，鼠标靠近线条就出现拖动光标。
+- `::after` 是**把手**：居中、`gripSize` × `gripLength`、圆角，平时 `opacity: 0`；`:hover` 时延迟 100ms 淡入（划过不闪），`.dragging` 或 `:focus-visible` 时立即显示。
+- 固定分隔条隐藏两个伪元素，不响应鼠标。
 
 ### CSS 自定义属性
 
-| 变量 | 默认值 | 描述 |
+| 变量 | 默认值（亮 / 暗） | 描述 |
 |------|--------|------|
-| `--topside-dividing-line-color` | `#CBD5E1` | 分隔条背景色（hover 时自动加深 20%） |
+| `--topside-dividing-line-color` | `#CBD5E1` / `#4a4a4a` | 线条底色（`color` 属性优先） |
+| `--topside-divider-grip-color` | `#94A3B8` / `#8a8a8a` | 把手颜色（`gripColor` 属性优先） |
 
 ```css
 :root {
-  --topside-dividing-line-color: #d4d4d8;
-}
-.dark-theme {
-  --topside-dividing-line-color: #3f3f46;
+  --topside-dividing-line-color: #e5e7eb;
+  --topside-divider-grip-color: #9ca3af;
 }
 ```
 
 ## 行为说明
 
+- **感应区会盖住相邻面板边缘。** 距线条约 `hitSize / 2` px 内的点击由分隔条接收；面板边上正好有按钮或滚动条时，调小 `hitSize`。
 - **仅鼠标。** 拖动用的是 `mousedown` / `mousemove` / `mouseup`。**不**处理 touch 事件，触屏设备上手指拖动不会响应。
 - **最小尺寸**：绑定面板夹到 ≥5px（不会塌成 0）。
 - **document 级监听**：拖动期间 `mousemove` 和 `mouseup` 挂在 `document` 上，光标移出分隔条也不会丢失拖动。
@@ -295,7 +280,7 @@ import Split from '@ticatec/topside-elements/Split';
 ## 无障碍访问
 
 - 分隔条上设置了 `role="separator"`、`aria-orientation`、`aria-label="Resize handle"`、`tabindex="0"`。
-- **键盘支持有限**：可聚焦，但组件**不**处理方向键。拖动必须用鼠标。需要键盘调整的话，自己在父元素上叠一层 `keydown`。
+- **键盘**：聚焦后方向键（竖线 ←/→，横线 ↑/↓）每次调整绑定面板 10px 并触发 `onResizeEnd`；键盘聚焦时显示把手。
 - 固定分隔条如果视觉上还像可交互，建议加 `aria-disabled="true"`。
 
 ## 最佳实践

package/dist/general/split/Split.svelte

@@ -2,18 +2,38 @@
     import {onDestroy} from 'svelte';
 
     interface Props {
+        /** 分隔线朝向：vertical 竖线（左右分栏），horizontal 横线（上下分栏） */
         direction?: "horizontal" | "vertical";
+        /** 可见线条粗细（px），占布局，默认 1 */
         width?: number;
+        /** 被拖动调整尺寸的面板；不传则为固定分隔线 */
         bindingPanel?: HTMLElement;
+        /** 绑定面板在分隔线右侧 / 下方时设为 true */
         reverse?: boolean;
+        /** 线条底色，默认取 --topside-dividing-line-color */
+        color?: string;
+        /** 悬停 / 拖动时中间把手的颜色，默认取 --topside-divider-grip-color */
+        gripColor?: string;
+        /** 把手粗细（px），默认 3 */
+        gripSize?: number;
+        /** 把手长度（px），默认 32；传 0 表示整条加粗 */
+        gripLength?: number;
+        /** 鼠标感应区厚度（px），不占布局，默认 8 */
+        hitSize?: number;
+        /** 拖动结束时回调，参数为绑定面板最终宽 / 高（px） */
         onResizeEnd?: (size: number) => void;
     }
 
     let {
         direction = "vertical",
-        width = 2,
+        width = 1,
         bindingPanel,
         reverse = false,
+        color,
+        gripColor,
+        gripSize = 3,
+        gripLength = 32,
+        hitSize = 8,
         onResizeEnd
     }: Props = $props();
 
@@ -21,7 +41,14 @@
     let startPos = $state(0);
     let startSize = $state(0);
 
-    const style = $derived(direction === "horizontal" ? `height: ${width}px` : `width: ${width}px`);
+    const style = $derived([
+        direction === "horizontal" ? `height: ${width}px` : `width: ${width}px`,
+        `--split-hit: ${Math.max(hitSize, width)}px`,
+        `--split-grip-size: ${gripSize}px`,
+        gripLength > 0 ? `--split-grip-length: ${gripLength}px` : `--split-grip-length: 100%`,
+        color ? `--split-color: ${color}` : "",
+        gripColor ? `--split-grip-color: ${gripColor}` : ""
+    ].filter(Boolean).join("; "));
     const fixed = $derived(!bindingPanel);
 
     const calculateNewSize = (currentPos: number): number => {
@@ -107,6 +134,7 @@
 <div
     class="topside-divider {direction}"
     class:fixed
+    class:dragging={isDragging}
     {style}
     role="separator"
     aria-orientation={direction}
@@ -118,9 +146,18 @@
 
 <style>
     .topside-divider {
-        background-color: var(--topside-dividing-line-color, #CBD5E1);
+        --_color: var(--split-color, var(--topside-dividing-line-color, #CBD5E1));
+        --_grip: var(--split-grip-color, var(--topside-divider-grip-color, #94A3B8));
+        position: relative;
+        z-index: 5;
         flex: 0 0 auto;
-        transition: background-color 0.2s ease;
+        background-color: var(--_color);
+        outline: none;
+    }
+
+    .topside-divider.vertical {
+        height: 100%;
+        cursor: col-resize;
     }
 
     .topside-divider.horizontal {
@@ -128,23 +165,71 @@
         cursor: row-resize;
     }
 
-    .topside-divider.vertical {
-        height: 100%;
-        cursor: col-resize;
+    /* 感应区：透明、不占布局，向两侧伸出，靠近线条即可触发 hover */
+    .topside-divider::before {
+        content: "";
+        position: absolute;
     }
 
-    .topside-divider.fixed {
-        cursor: default;
+    .topside-divider.vertical::before {
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: var(--split-hit, 8px);
+        transform: translateX(-50%);
+    }
+
+    .topside-divider.horizontal::before {
+        left: 0;
+        right: 0;
+        top: 50%;
+        height: var(--split-hit, 8px);
+        transform: translateY(-50%);
+    }
+
+    /* 把手：居中的深色稍粗线段，平时隐藏 */
+    .topside-divider::after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 999px;
+        background-color: var(--_grip);
+        opacity: 0;
         pointer-events: none;
+        transition: opacity 0.15s ease;
+    }
+
+    .topside-divider.vertical::after {
+        width: var(--split-grip-size, 3px);
+        height: var(--split-grip-length, 32px);
+    }
+
+    .topside-divider.horizontal::after {
+        height: var(--split-grip-size, 3px);
+        width: var(--split-grip-length, 32px);
+    }
+
+    /* 稍作延迟，鼠标划过时不闪 */
+    .topside-divider:hover::after {
+        opacity: 1;
+        transition-delay: 0.1s;
+    }
+
+    .topside-divider.dragging::after,
+    .topside-divider:focus-visible::after {
+        opacity: 1;
+        transition-delay: 0s;
     }
 
-    /* 拖动时移除过渡效果，提高响应性 */
-    .topside-divider:hover {
-        background-color: color-mix(in srgb, var(--topside-dividing-line-color, #CBD5E1) 80%, #000);
+    .topside-divider.fixed {
+        cursor: default;
+        pointer-events: none;
     }
 
-    /* 拖动时移除过渡效果，提高响应性 */
-    .topside-divider:active {
-        transition: none;
+    .topside-divider.fixed::before,
+    .topside-divider.fixed::after {
+        display: none;
     }
 </style>

package/dist/general/split/Split.svelte.d.ts

@@ -1,8 +1,23 @@
 interface Props {
+    /** 分隔线朝向：vertical 竖线（左右分栏），horizontal 横线（上下分栏） */
     direction?: "horizontal" | "vertical";
+    /** 可见线条粗细（px），占布局，默认 1 */
     width?: number;
+    /** 被拖动调整尺寸的面板；不传则为固定分隔线 */
     bindingPanel?: HTMLElement;
+    /** 绑定面板在分隔线右侧 / 下方时设为 true */
     reverse?: boolean;
+    /** 线条底色，默认取 --topside-dividing-line-color */
+    color?: string;
+    /** 悬停 / 拖动时中间把手的颜色，默认取 --topside-divider-grip-color */
+    gripColor?: string;
+    /** 把手粗细（px），默认 3 */
+    gripSize?: number;
+    /** 把手长度（px），默认 32；传 0 表示整条加粗 */
+    gripLength?: number;
+    /** 鼠标感应区厚度（px），不占布局，默认 8 */
+    hitSize?: number;
+    /** 拖动结束时回调，参数为绑定面板最终宽 / 高（px） */
     onResizeEnd?: (size: number) => void;
 }
 declare const Split: import("svelte").Component<Props, {}, "">;

package/dist/topside-elements.css

@@ -380,6 +380,7 @@
   --topside-option-padding: var(--topside-margin-md) var(--topside-margin);
   /* Split token */
   --topside-dividing-line-color: #CBD5E1;
+  --topside-divider-grip-color: #94A3B8;
   /* Switch Tokens */
   --topside-switch-width: 100px;
   --topside-switch-height: 30px;
@@ -779,6 +780,7 @@
   --topside-progress-step-completed-icon-color: #60A5FA;
   /* Split token - Dark Theme */
   --topside-dividing-line-color: #4a4a4a;
+  --topside-divider-grip-color: #8a8a8a;
   /* Switch token - Dark Theme */
   --topside-switch-color-text-unchecked: #9CA3AF;
   --topside-switch-color-text-checked: #FFFFFF;

package/docs/components/README.md

@@ -44,7 +44,7 @@
 | [AppTopBar](./app-top-bar/README.md) | `@ticatec/topside-elements/AppTopBar` | [示例](./app-top-bar/example.svelte) | 6 |
 | [Box](./box/README.md) | `@ticatec/topside-elements/Box` | [示例](./box/example.svelte) | 8 |
 | [CriteriaField](./criteria-field/README.md) | `@ticatec/topside-elements/CriteriaField` | [示例](./criteria-field/example.svelte) | 7 |
-| [FlexForm](./topside-flexi/README.md) | `@ticatec/topside-elements/FlexForm` | [示例](./topside-flexi/example.svelte) | 3 |
+| [FlexForm](./flex-form/README.md) | `@ticatec/topside-elements/FlexForm` | [示例](./flex-form/example.svelte) | 3 |
 | [FlexRowForm](./flex-row-form/README.md) | `@ticatec/topside-elements/FlexRowForm` | [示例](./flex-row-form/example.svelte) | 4 |
 | [FormField](./form-field/README.md) | `@ticatec/topside-elements/FormField` | [示例](./form-field/example.svelte) | 11 |
 | [GridForm](./grid-form/README.md) | `@ticatec/topside-elements/GridForm` | [示例](./grid-form/example.svelte) | 5 |
@@ -100,7 +100,7 @@
 
 | 组件 | 导入路径 | 示例 | 属性数 |
 | --- | --- | --- | ---: |
-| [DataTable](./data-table/README.md) | `@ticatec/topside-elements/DataTable` | [示例](./data-table/example.svelte) | 15 |
+| [DataTable](./data-table/README.md) | `@ticatec/topside-elements/DataTable` | [示例](./data-table/example.svelte) | 17 |
 
 ## 数据展示
 
@@ -120,7 +120,7 @@
 | [Icon](./icon/README.md) | `@ticatec/topside-elements/Icon` | [示例](./icon/example.svelte) | 8 |
 | [IconButton](./icon-button/README.md) | `@ticatec/topside-elements/IconButton` | [示例](./icon-button/example.svelte) | 12 |
 | [Separator](./separator/README.md) | `@ticatec/topside-elements/Separator` | [示例](./separator/example.svelte) | 2 |
-| [Split](./split/README.md) | `@ticatec/topside-elements/Split` | [示例](./split/example.svelte) | 5 |
+| [Split](./split/README.md) | `@ticatec/topside-elements/Split` | [示例](./split/example.svelte) | 10 |
 | [Tag](./tag/README.md) | `@ticatec/topside-elements/Tag` | [示例](./tag/example.svelte) | 10 |
 | [TextButton](./text-button/README.md) | `@ticatec/topside-elements/TextButton` | [示例](./text-button/example.svelte) | 13 |
 

package/docs/components/concise-data-table/README.md

@@ -192,9 +192,9 @@ export default interface DataColumn {
     hint?: CellHint;
 
     /**
-     * 渲染器
+     * 自定义单元格渲染器（可为 Svelte 组件或 `{ component, props }` 配置对象）
      */
-    render?: any;
+    render?: ColumnRender;
 
     /**
      *
@@ -215,6 +215,19 @@ export default interface DataColumn {
      * 获取表格的样式
      */
     cellStyle?: GetCellStyle;
+
+    /**
+     * 合计行里本列的聚合方式：sum / avg / count / min / max / 自定义函数；
+     * 'label' 表示在本列显示合计标签（没有指示列时用）。
+     * 只要有一列设置了（或 table 的 summaryValues 覆盖了某列），表格底部就会出现合计行。
+     */
+    summary?: SummaryKind | SummaryFn | 'label';
+
+    /**
+     * 合计值的格式化。不设时：count 显示整数（千分位）；其它先用 formatter，再退回数字自动格式化
+     * （千分位，小数位取本列数据最大小数位，avg 至少 2 位）
+     */
+    summaryFormatter?: (value: any, rows: Array<any>) => string;
 }
 ```
 
@@ -236,6 +249,14 @@ export type HrefBuilder = (item: any) => Array<HrefLink> | HrefLink | string;
 export type CellHint = (value: any) => string;
 ```
 
+### `ColumnRender`
+
+```ts
+export type ColumnRender<Props extends Record<string, any> = Record<string, any>> =
+    | Component<any>
+    | ColumnRenderObject<Props>;
+```
+
 ### `CompareFn`
 
 ```ts
@@ -248,6 +269,18 @@ export type CompareFn = (o1: any, o2: any) => number;
 export type GetCellStyle = (data: any) => string;
 ```
 
+### `SummaryKind`
+
+```ts
+export type SummaryKind = 'sum' | 'avg' | 'count' | 'min' | 'max';
+```
+
+### `SummaryFn`
+
+```ts
+export type SummaryFn = (values: Array<any>, rows: Array<any>) => any;
+```
+
 ### `HrefLink`
 
 ```ts
@@ -263,6 +296,23 @@ export default interface HrefLink {
 }
 ```
 
+### `ColumnRenderObject`
+
+```ts
+export interface ColumnRenderObject<Props extends Record<string, any> = Record<string, any>> {
+    /**
+     * 自定义 Svelte 单元格组件。
+     * 组件会接收 `props` 中传入的属性，并自动接收当前行的数据 `data`。
+     */
+    component: Component<any>;
+
+    /**
+     * 传递给自定义组件的额外属性
+     */
+    props?: Props;
+}
+```
+
 ### `OnHrefClick`
 
 ```ts

package/docs/components/data-table/README.md

@@ -36,6 +36,8 @@ import DataTable from '@ticatec/topside-elements/DataTable';
 | `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
 | `virtual` | 否 | `boolean` | 否 | `false` | 否 | 行虚拟化(窗口化渲染):仅渲染可视区域附近的行,大数据集(数千行以上) 建议开启。要求所有行高度一致(即统一的 rowHeight),因此默认关闭。 |
 | `overscan` | 否 | `number` | 否 | `8` | 否 | 虚拟化时可视区上下额外渲染的行数。 |
+| `summaryLabel` | 否 | `string` | 否 | `undefined` | 否 | 合计行的标签，默认取 i18n（uniface.dataTable.summaryLabel，"合计" / "Total"）；传空串则不显示标签 |
+| `summaryValues` | 否 | `Record<string, any> \| null` | 否 | `null` | 否 | 外部提供的合计值，按列 field 取值，优先于列的 summary 在当前 list 上的计算。 分页场景下用它显示服务端算好的全量合计（数字串会按数字格式化）。 |
 
 > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
 
@@ -143,9 +145,9 @@ export default interface DataColumn {
     hint?: CellHint;
 
     /**
-     * 渲染器
+     * 自定义单元格渲染器（可为 Svelte 组件或 `{ component, props }` 配置对象）
      */
-    render?: any;
+    render?: ColumnRender;
 
     /**
      *
@@ -166,6 +168,19 @@ export default interface DataColumn {
      * 获取表格的样式
      */
     cellStyle?: GetCellStyle;
+
+    /**
+     * 合计行里本列的聚合方式：sum / avg / count / min / max / 自定义函数；
+     * 'label' 表示在本列显示合计标签（没有指示列时用）。
+     * 只要有一列设置了（或 table 的 summaryValues 覆盖了某列），表格底部就会出现合计行。
+     */
+    summary?: SummaryKind | SummaryFn | 'label';
+
+    /**
+     * 合计值的格式化。不设时：count 显示整数（千分位）；其它先用 formatter，再退回数字自动格式化
+     * （千分位，小数位取本列数据最大小数位，avg 至少 2 位）
+     */
+    summaryFormatter?: (value: any, rows: Array<any>) => string;
 }
 ```
 
@@ -265,6 +280,14 @@ export type HrefBuilder = (item: any) => Array<HrefLink> | HrefLink | string;
 export type CellHint = (value: any) => string;
 ```
 
+### `ColumnRender`
+
+```ts
+export type ColumnRender<Props extends Record<string, any> = Record<string, any>> =
+    | Component<any>
+    | ColumnRenderObject<Props>;
+```
+
 ### `CompareFn`
 
 ```ts
@@ -277,6 +300,18 @@ export type CompareFn = (o1: any, o2: any) => number;
 export type GetCellStyle = (data: any) => string;
 ```
 
+### `SummaryKind`
+
+```ts
+export type SummaryKind = 'sum' | 'avg' | 'count' | 'min' | 'max';
+```
+
+### `SummaryFn`
+
+```ts
+export type SummaryFn = (values: Array<any>, rows: Array<any>) => any;
+```
+
 ### `GetRowActions`
 
 ```ts
@@ -317,6 +352,23 @@ export default interface HrefLink {
 }
 ```
 
+### `ColumnRenderObject`
+
+```ts
+export interface ColumnRenderObject<Props extends Record<string, any> = Record<string, any>> {
+    /**
+     * 自定义 Svelte 单元格组件。
+     * 组件会接收 `props` 中传入的属性，并自动接收当前行的数据 `data`。
+     */
+    component: Component<any>;
+
+    /**
+     * 传递给自定义组件的额外属性
+     */
+    props?: Props;
+}
+```
+
 ### `RowAction`
 
 ```ts
@@ -348,12 +400,6 @@ export type OnHrefClick = () => void;
 export type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
 ```
 
-### `ActionHandler`
-
-```ts
-export type ActionHandler<T = any> = (data: T) => void | Promise<void>;
-```
-
 ## 示例
 
 完整示例见 [example.svelte](./example.svelte)。

package/docs/components/split/README.md

@@ -21,11 +21,16 @@ import Split from '@ticatec/topside-elements/Split';
 
 | 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
 | --- | --- | --- | --- | --- | --- | --- |
-| `direction` | 否 | `"horizontal" \| "vertical"` | 否 | `"vertical"` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-| `width` | 否 | `number` | 否 | `2` | 否 | 宽度配置，数值单位为像素。 |
-| `bindingPanel` | 否 | `HTMLElement` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-| `reverse` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
-| `onResizeEnd` | 否 | `(size: number) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `direction` | 否 | `"horizontal" \| "vertical"` | 否 | `"vertical"` | 否 | 分隔线朝向：vertical 竖线（左右分栏），horizontal 横线（上下分栏） |
+| `width` | 否 | `number` | 否 | `1` | 否 | 可见线条粗细（px），占布局，默认 1 |
+| `bindingPanel` | 否 | `HTMLElement` | 否 | `undefined` | 否 | 被拖动调整尺寸的面板；不传则为固定分隔线 |
+| `reverse` | 否 | `boolean` | 否 | `false` | 否 | 绑定面板在分隔线右侧 / 下方时设为 true |
+| `color` | 否 | `string` | 否 | `undefined` | 否 | 线条底色，默认取 --topside-dividing-line-color |
+| `gripColor` | 否 | `string` | 否 | `undefined` | 否 | 悬停 / 拖动时中间把手的颜色，默认取 --topside-divider-grip-color |
+| `gripSize` | 否 | `number` | 否 | `3` | 否 | 把手粗细（px），默认 3 |
+| `gripLength` | 否 | `number` | 否 | `32` | 否 | 把手长度（px），默认 32；传 0 表示整条加粗 |
+| `hitSize` | 否 | `number` | 否 | `8` | 否 | 鼠标感应区厚度（px），不占布局，默认 8 |
+| `onResizeEnd` | 否 | `(size: number) => void` | 否 | `undefined` | 否 | 拖动结束时回调，参数为绑定面板最终宽 / 高（px） |
 
 > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/topside-elements",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A comprehensive UI component library for Svelte applications with rich form controls, data tables, layouts and interactive elements",
   "keywords": [
     "svelte",