Skip to content

feat(grid): add mouse hover show align lines #3768

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 27, 2025
Merged

feat(grid): add mouse hover show align lines #3768

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a5294b
feat: add mouse hover show align lines
gimmyhehe Oct 14, 2025
dcbac48
docs: modify pager doc
gimmyhehe Oct 14, 2025
3933010
feat(grid): add mouse hover show align lines
gimmyhehe Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion examples/sites/demos/apis/grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3447,7 +3447,9 @@ interface IKeyboardConfig {
code: `
interface IMouseConfig {
// 是否开启左键选中单元格功能（只对 editConfig.mode=cell 有效），默认为 false
selected: boolean
selected: boolean
// 悬浮是否显示对齐辅助线(3.27.0新增)
hover: boolean
}
`
},
Expand Down
6 changes: 3 additions & 3 deletions examples/sites/demos/apis/pager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export default {
defaultValue: "'total, prev, pager, next, jumper'",
desc: {
'zh-CN':
'组件布局，子组件名用英文逗号分隔，子组件类型有 sizes、 prev、 pager、 next、 jumper、 current、 total、 slot',
'组件布局，子组件名用英文逗号分隔，子组件类型有 sizes、 prev、 pager、simplest-pager、 next、 jumper、 current、 total、 slot',
'en-US':
'Component layout, with sub component names separated by commas; The optional values for this attribute are sizes, preview, pager, next, jumper, current, total, slot.'
Comment on lines +101 to 103
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix formatting inconsistency and add English translation.

Two issues with the simplest-pager addition:

  1. Formatting inconsistency: The Chinese description has inconsistent spacing. Most items have a space after the comma (e.g., sizes、 prev), but pager、simplest-pager lacks the space before simplest-pager.
  2. Missing English translation: Line 103 (English description) doesn't mention simplest-pager, creating incomplete documentation.

Apply this diff to fix both issues:

-              '组件布局,子组件名用英文逗号分隔,子组件类型有 sizes、 prev、 pager、simplest-pager、 next、 jumper、 current、 total、 slot',
+              '组件布局,子组件名用英文逗号分隔,子组件类型有 sizes、 prev、 pager、 simplest-pager、 next、 jumper、 current、 total、 slot',
             'en-US':
-              'Component layout, with sub component names separated by commas; The optional values for this attribute are sizes, preview, pager, next, jumper, current, total, slot.'
+              'Component layout, with sub component names separated by commas; The optional values for this attribute are sizes, prev, pager, simplest-pager, next, jumper, current, total, slot.'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'组件布局，子组件名用英文逗号分隔，子组件类型有 sizes、 prev、 pager、simplest-pager、 next、 jumper、 current、 total、 slot',
'en-US':
'Component layout, with sub component names separated by commas; The optional values for this attribute are sizes, preview, pager, next, jumper, current, total, slot.'
'组件布局,子组件名用英文逗号分隔,子组件类型有 sizes、 prev、 pager、 simplest-pager、 next、 jumper、 current、 total、 slot',
'en-US':
'Component layout, with sub component names separated by commas; The optional values for this attribute are sizes, prev, pager, simplest-pager, next, jumper, current, total, slot.'
🤖 Prompt for AI Agents 
In examples/sites/demos/apis/pager.js around lines 101 to 103, the Chinese list
has inconsistent spacing before "simplest-pager" and the English string omits
"simplest-pager"; update the Chinese string to consistently include a space
after each delimiter (e.g., change "pager、simplest-pager" to "pager、
simplest-pager") and update the English string to include "simplest-pager" in
the list of optional values (ensuring wording and punctuation match the
surrounding entries).

},
Expand All @@ -110,8 +110,8 @@ export default {
type: "'number' | 'simple' | 'complete' | 'fixed' | 'simplest'",
defaultValue: '',
desc: {
'zh-CN': '设置分页组件显示模式，此属性优先级大于 layout, 3.19.0新增simplest',
'en-US': 'Set the display mode of pagination components, which takes priority over layout'
'zh-CN': '设置分页组件显示模式, 3.19.0新增simplest',
'en-US': 'Set the display mode of pagination components'
},
mode: ['pc'],
pcDemo: 'pager-mode'
Expand Down
70 changes: 70 additions & 0 deletions examples/sites/demos/pc/app/grid/mouse-keyboard/mouse-config-hover-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<template>
<tiny-grid
:data="tableData"
:edit-config="{}"
:mouse-config="{ hover: true }"
:keyboard-config="{ isCut: true }"
column-min-width="200px"
height="200"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" :editor="{ component: 'input' }" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
<tiny-grid-column field="name" :editor="{ component: 'input' }" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
</tiny-grid>
</template>

<script setup>
import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
import { ref } from 'vue'

const tableData = ref([
{
id: '1',
name: 'GFD 科技 YX 公司',
area: '华东区',
address: '福州',
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '2',
name: 'WWWW 科技 YX 公司',
area: '华南区',
address: '深圳福田区',
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '3',
name: 'RFV 有限责任公司',
area: '华南区',
address: '中山市',
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '4',
name: 'TGBYX 公司',
area: '华北区',
address: '梅州',
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '5',
name: 'YHN 科技 YX 公司',
area: '华南区',
address: '韶关',
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '6',
name: '康康物业 YX 公司',
area: '华北区',
address: '广州天河区',
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
}
])
</script>
79 changes: 79 additions & 0 deletions examples/sites/demos/pc/app/grid/mouse-keyboard/mouse-config-hover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<template>
<tiny-grid
:data="tableData"
:edit-config="{}"
:mouse-config="{ hover: true }"
:keyboard-config="{ isCut: true }"
column-min-width="200px"
height="200"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" :editor="{ component: 'input' }" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
<tiny-grid-column field="name" :editor="{ component: 'input' }" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
</tiny-grid>
</template>

<script>
import { TinyGrid, TinyGridColumn } from '@opentiny/vue'

export default {
components: {
TinyGrid,
TinyGridColumn
},
data() {
return {
tableData: [
{
id: '1',
name: 'GFD 科技 YX 公司',
area: '华东区',
address: '福州',
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '2',
name: 'WWWW 科技 YX 公司',
area: '华南区',
address: '深圳福田区',
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '3',
name: 'RFV 有限责任公司',
area: '华南区',
address: '中山市',
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '4',
name: 'TGBYX 公司',
area: '华北区',
address: '梅州',
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '5',
name: 'YHN 科技 YX 公司',
area: '华南区',
address: '韶关',
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: '6',
name: '康康物业 YX 公司',
area: '华北区',
address: '广州天河区',
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
}
]
}
}
}
</script>
9 changes: 9 additions & 0 deletions examples/sites/demos/pc/app/grid/webdoc/grid-mouse-keyboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,15 @@ export default {
'en-US': '<p>Table property<code>mouse-config</code>Set the mouse configuration item. </p>'
},
codeFiles: ['mouse-keyboard/mouse-config.vue']
},
{
demoId: 'mouse-config-hover',
name: { 'zh-CN': '鼠标悬浮辅助线', 'en-US': 'Setting Mouse Configuration Items' },
desc: {
'zh-CN': `<p>表格属性 <code>mouse-config</code> 设置鼠标配置项。打开配置项 <code>mouseConfig.hover</code> 使单元格悬浮显示行列对齐辅助线</p>`,
'en-US': '<p>Table property<code>mouse-config</code>Set the mouse configuration item. </p>'
},
codeFiles: ['mouse-keyboard/mouse-config-hover.vue']
}
],
apis: [{ name: 'grid-mouse-keyboard', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
Expand Down
83 changes: 79 additions & 4 deletions packages/theme-saas/src/grid/table.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,16 +270,14 @@

// tiny新增滚动条放置表格内
tbody tr.row__last-visible {
@apply relative;

&::after {
@apply content-[''];
@apply absolute;
@apply bottom-0;
@apply left-0;
@apply right-0;
@apply bottom-0;
@apply h-px;
top: calc(var(--body-container-scroll-height) - 1px);
width: var(--body-container-scroll-width);
@apply bg-color-border-separator;
@apply ~'z-[3]';
}
Expand Down Expand Up @@ -727,6 +725,83 @@
}
}

&__hover-align {
.@{grid-prefix-cls}-body__column:hover {
@apply bg-color-fill-6;
}
.@{grid-prefix-cls}-body__row:hover {
@apply bg-color-fill-6;
}
}
Comment on lines +728 to +735
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

🧩 Analysis chain

Verify consistency with base theme implementation.

The SAAS theme's __hover-align block includes both column and row hover styles (lines 729-734), while the base theme (packages/theme/src/grid/table.less) only includes column hover styles. This inconsistency should be intentional or corrected.

Additionally, both themes use different background color approaches:

  • Base theme: var(--tv-Grid-bg-color-selected)
  • SAAS theme: @apply bg-color-fill-6

Run the following script to compare the implementations:

🏁 Script executed:

#!/bin/bash
# Compare hover-align implementations between base and SAAS themes

echo "=== Base theme hover-align block ==="
rg -A5 "&__hover-align" packages/theme/src/grid/table.less

echo -e "\n=== SAAS theme hover-align block ==="
rg -A5 "&__hover-align" packages/theme-saas/src/grid/table.less

Length of output: 379

Verify and align hover styles and background color in SAAS theme

  • The SAAS theme’s &__hover-align (packages/theme-saas/src/grid/table.less) includes both column and row hover, whereas the base theme only targets columns. Confirm if the row hover is intentional; otherwise remove it or add it to the base theme.
  • Unify background-color usage: base uses var(--tv-Grid-bg-color-selected), SAAS uses @apply bg-color-fill-6. Choose one approach for consistency across themes.
🤖 Prompt for AI Agents 
In packages/theme-saas/src/grid/table.less around lines 728 to 735, the SAAS
theme adds hover rules for both columns and rows
(.@{grid-prefix-cls}-body__column:hover and .@{grid-prefix-cls}-body__row:hover)
while the base theme only targets columns, and SAAS uses @apply bg-color-fill-6
instead of the base CSS variable; decide whether row hover is intentional—if
not, remove the .@{grid-prefix-cls}-body__row:hover rule from this file (or if
it should be global, add the equivalent rule to the base theme file instead);
then unify background color usage by replacing @apply bg-color-fill-6 with the
agreed approach (prefer using var(--tv-Grid-bg-color-selected) for cross-theme
consistency) and ensure that the CSS variable is defined and documented in the
SAAS theme variables file.


// 行列对齐辅助线
& &-body__hover-align-y-bar {
--after-left-offset: 0;

display: none;
@apply ~'z-[9]';
@apply absolute;
@apply top-0;
@apply left-0;

&:before {
@apply absolute;
@apply content-[''];
@apply block;
@apply h-full;
border-left-width: 1px;
border-left-style: dashed;
@apply border-color-border-focus;
}

&:after {
@apply top-0;
@apply right-0;
@apply content-[''];
@apply absolute;
@apply block;
@apply h-full;
border-left-width: 1px;
border-left-style: dashed;
@apply border-color-border-focus;
left: var(--after-left-offset);
}
}

& &-body__hover-align-x-bar {
--after-top-offset: 0;

display: none;
@apply ~'z-[9]';
@apply absolute;
@apply h-0;
@apply top-0;
@apply left-0;

&:before {
@apply absolute;
@apply content-[''];
@apply block;
@apply w-full;
border-top-width: 1px;
border-top-style: dashed;
@apply border-color-border-focus;
}

&:after {
@apply top-0;
@apply right-0;
@apply content-[''];
@apply absolute;
@apply block;
@apply w-full;
border-top-width: 1px;
border-top-style: dashed;
@apply border-color-border-focus;
top: var(--after-top-offset);
}
}

// 树形节点
& &-tree__indent {
@apply inline-block;
Expand Down
64 changes: 64 additions & 0 deletions packages/theme/src/grid/table.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -648,6 +648,70 @@
}
}

&__hover-align {
.@{grid-prefix-cls}-body__column:hover {
background-color: var(--tv-Grid-bg-color-selected);
}
}

// 行列对齐辅助线
& &-body__hover-align-y-bar {
--after-left-offset: 0;

display: none;
z-index: 9;
position: absolute;
top: 0;
left: 0;

&:before {
content: '';
position: absolute;
display: block;
height: 100%;
border-left: 1px dashed var(--tv-Grid-align-line-border-color);
}

&:after {
top: 0;
right: 0;
content: '';
position: absolute;
display: block;
height: 100%;
border-left: 1px dashed var(--tv-Grid-align-line-border-color);
left: var(--after-left-offset);
}
}

& &-body__hover-align-x-bar {
--after-top-offset: 0;

display: none;
z-index: 9;
position: absolute;
height: 0;
top: 0;
left: 0;

&:before {
content: '';
position: absolute;
display: block;
width: 100%;
border-top: 1px dashed var(--tv-Grid-align-line-border-color);
}

&:after {
content: '';
position: absolute;
display: block;
width: 100%;
border-top: 1px dashed var(--tv-Grid-align-line-border-color);
top: var(--after-top-offset);
}
}

// 树形节点缩进
& &-tree__indent {
display: inline-block;
Expand Down
2 changes: 2 additions & 0 deletions packages/theme/src/grid/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,4 +244,6 @@
--tv-Grid-icon-inverse-disabled: var(--tv-color-bg-inverse-disabled, #fff);
// 默认复选框未选中禁用背景色
--tv-Grid-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
// 表格对齐辅助线边框颜色
--tv-Grid-align-line-border-color: var(--tv-color-bg-active-control, #1476ff);
}
Loading
Loading