feat: 添加行和列操作按钮隐藏功能,优化用户体验

This commit is contained in:
JayBridge 2025-06-19 20:39:53 +08:00
parent 3503dec8ed
commit 8464338565
3 changed files with 60 additions and 0 deletions

38
docs/button-visibility.md Normal file
View file

@ -0,0 +1,38 @@
# 关于隐藏行和列操作按钮的说明
## 背景
在当前版本中,行和列操作按钮(插入、删除等)暂时被隐藏,原因如下:
1. **用户体验**:目前这些按钮的使用体验有待提高,可能会对用户操作造成干扰。
2. **功能优化**:我们计划对这些按钮的交互和视觉效果进行优化,以更好地满足用户需求。
## 修改内容
`styles.css` 文件中,以下样式被添加以隐藏这些按钮:
```css
.csv-insert-row-btn,
.csv-insert-col-btn,
.csv-del-row-btn,
.csv-del-col-btn {
display: none !important;
}
```
## 后续计划
我们将根据用户反馈和实际需求,对这些按钮进行以下改进:
- 提升按钮的视觉效果,使其更加直观。
- 优化按钮的交互逻辑,减少误操作。
- 提供更灵活的配置选项,允许用户根据需要启用或禁用这些按钮。
## 反馈
如果您对这一改动有任何意见或建议,请通过以下方式联系我们:
- GitHub Issue
- 用户反馈表单
感谢您的支持与理解!

View file

@ -289,6 +289,20 @@ export function renderTable(options: TableRenderOptions) {
}
// 滚动条容器宽度同步逻辑建议由主类处理
// Add event listener to deselect active row or column when clicking outside
const deselectActiveHeader = () => {
const activeHeaders = tableEl.querySelectorAll('.csv-col-number.active, .csv-row-number.active');
activeHeaders.forEach(header => header.classList.remove('active'));
};
document.addEventListener('click', (e) => {
const target = e.target as HTMLElement | null;
const isHeaderClick = target?.closest('.csv-col-number, .csv-row-number');
if (!isHeaderClick) {
deselectActiveHeader();
}
});
}
// 建议在 styles.css 添加 .dragging 和 .drag-over 的样式以增强拖拽反馈

View file

@ -484,6 +484,14 @@ td input:focus {
border-radius: 4px;
}
/* 暂时隐藏行和列操作按钮 */
.csv-insert-row-btn,
.csv-insert-col-btn,
.csv-del-row-btn,
.csv-del-col-btn {
display: none !important;
}
/* 插入/删除行列按钮样式 */
.csv-insert-row-btn,
.csv-insert-col-btn,