feat(split): add resize-trigger-hit-size prop, the hit range can be adjusted

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+`NEXT_VERSION`
+
+### Features
+
+- `n-split` adds `resize-trigger-hit-size` prop, closes [#7223](https://github.com/tusen-ai/naive-ui/issues/7223).
+
 ## 2.43.1
 
 `2025-09-15`

CHANGELOG.zh-CN.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+`NEXT_VERSION`
+
+### Features
+
+- `n-split` 新增 `resize-trigger-hit-size` 属性，关闭 [#7223](https://github.com/tusen-ai/naive-ui/issues/7223)
+
 ## 2.43.1
 
 `2025-09-15`

src/split/demos/enUS/index.demo-entry.md

@@ -31,6 +31,7 @@ controlled.vue
 | pane2-class | `string` | `undefined` | The class name of the second pane. | 2.38.2 |
 | pane2-style | `Object \| string` | `undefined` | The Style of the second pane | 2.38.2 |
 | resize-trigger-size | `number` | `3` | Size of the resize trigger. | 2.36.0 |
+| resize-trigger-hit-size | `number` | `0` | The hit size of the resize trigger, it's added to the `resize-trigger-size`. | NEXT_VERSION |
 | size | `string \| number` | `undefined` | Split is the controlled split size, when it's `number` it should in 0 ~ 1, when it's `string` it should be formatted in `${number}px`. | 2.38.0, `string` 2.38.2 |
 | watch-props | `Array<'defaultSize'>` | `undefined` | Default prop names that needed to be watched. Components will be updated after the prop is changed. Note: the `watch-props` itself is not reactive. | 2.38.0 |
 | on-drag-start | `(e: Event) => void` | `undefined` | Callback function when drag start. | 2.36.0 |

src/split/demos/zhCN/index.demo-entry.md

@@ -32,6 +32,7 @@ pixel-value.vue
 | pane2-class | `string` | `undefined` | 第二个面板的类名 | 2.38.2 |
 | pane2-style | `Object \| string` | `undefined` | 第二个面板的样式 | 2.38.2 |
 | resize-trigger-size | `number` | `3` | Split 的分隔条大小 | 2.36.0 |
+| resize-trigger-hit-size | `number` | `0` | Split 的分隔条点击区域大小，在 `resize-trigger-size` 的基础上增加 | NEXT_VERSION |
 | size | `string \| number` | `undefined` | Split 的受控分割大小，为 `number` 类型时应该为 0 ~ 1 之间的值，为 `string` 类型时应该为 `${number}px` 格式 | 2.38.0, `string` 2.38.2 |
 | watch-props | `Array<'defaultSize'>` | `undefined` | 需要检测变更的默认属性，检测后组件状态会更新。注意：`watch-props` 本身不是响应式的 | 2.38.0 |
 | on-drag-start | `(e: Event) => void` | `undefined` | 开始拖拽的回调函数 | 2.36.0 |

src/split/src/Split.tsx

@@ -23,6 +23,10 @@ export const splitProps = {
     type: Number,
     default: 3
   },
+  resizeTriggerHitSize: {
+    type: Number,
+    default: 0
+  },
   disabled: Boolean,
   defaultSize: {
     type: [String, Number] as PropType<string | number>,
@@ -85,7 +89,8 @@ export default defineComponent({
       return {
         '--n-bezier': cubicBezierEaseInOut,
         '--n-resize-trigger-color': resizableTriggerColor,
-        '--n-resize-trigger-color-hover': resizableTriggerColorHover
+        '--n-resize-trigger-color-hover': resizableTriggerColorHover,
+        '--n-resize-trigger-hit-size': `${props.resizeTriggerHitSize}px`
       }
     })
     const resizeTriggerElRef = ref<HTMLElement | null>(null)

src/split/src/styles/index.cssr.ts

@@ -11,17 +11,41 @@ export default cB('split', `
 `, [
   cM('horizontal', `
     flex-direction: row;
-  `),
+  `, [
+    cE('resize-trigger-wrapper', [
+      c('&::after', `
+        width: calc(100% + var(--n-resize-trigger-hit-size));
+        height: 100%;
+        `)
+    ]),
+  ]),
   cM('vertical', `
     flex-direction: column;
-  `),
+  `, [
+    cE('resize-trigger-wrapper', [
+      c('&::after', `
+        width: 100%;
+        height: calc(100% + var(--n-resize-trigger-hit-size));
+        `)
+    ]),
+  ]),
   cB('split-pane-1', `
     overflow: hidden;
   `),
   cB('split-pane-2', `
     overflow: hidden;
     flex: 1;
   `),
+  cE('resize-trigger-wrapper', `
+    position: relative;
+    `, [
+    c('&::after', `
+      content: '';
+      position: absolute;
+      inset: 50%;
+      transform: translate(-50%, -50%);
+      `)
+  ]),
   cE('resize-trigger', `
     background-color: var(--n-resize-trigger-color);
     transition: background-color .3s var(--n-bezier);