feat: 列宽拖拽 + 筛选栏 + 截图导出 + UI优化
- 新增 v-column-resize 指令,11 张表格均支持拖拽调整列宽 - 工作计划/商机跟单/要客拜访新增筛选栏(客户经理 + 状态) - 汇总栏 chip 可点击筛选,支持重置与计数 - 新增截图导出功能(dom-to-image-more,像素级文字渲染) - 截图范围从标题开始,自动隐藏操作按钮,5px白边 - 截图时页面闪烁动画反馈 - 全局 CSS 完善(列宽手柄、截图模式、捕获动画) - 仪表盘 UI 细节优化 + 亮灯表标签调整 - 登录页 UI 改进 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -388,4 +388,82 @@ h1, h2, h3, h4, h5, h6 {
|
||||
cursor: pointer; border-radius: 50%; transition: background 0.2s;
|
||||
}
|
||||
.image-preview-close:hover { background: rgba(255,255,255,0.35); }
|
||||
|
||||
/* ── Screenshot capture mode ── */
|
||||
.taking-screenshot { background: #fff !important; }
|
||||
.taking-screenshot * { background-color: transparent; }
|
||||
.taking-screenshot .el-card,
|
||||
.taking-screenshot .el-table,
|
||||
.taking-screenshot .el-table__header,
|
||||
.taking-screenshot .el-table__body,
|
||||
.taking-screenshot .filter-bar,
|
||||
.taking-screenshot .summary-bar,
|
||||
.taking-screenshot .page-head { background: #fff !important; }
|
||||
.taking-screenshot .screenshot-hide { display: none !important; }
|
||||
.taking-screenshot .el-table__fixed-right { display: none !important; }
|
||||
|
||||
/* ── Screenshot capture animation ── */
|
||||
.body-capturing .work-plans-page,
|
||||
.body-capturing .mini-biz-page,
|
||||
.body-capturing .key-visits-page {
|
||||
position: relative;
|
||||
}
|
||||
.body-capturing .work-plans-page::after,
|
||||
.body-capturing .mini-biz-page::after,
|
||||
.body-capturing .key-visits-page::after {
|
||||
content: '';
|
||||
position: fixed; inset: 0; z-index: 9998;
|
||||
background: rgba(255,255,255,0.6);
|
||||
pointer-events: none;
|
||||
animation: capture-flash 0.35s ease-out;
|
||||
}
|
||||
@keyframes capture-flash {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* ── Column resize handle ── */
|
||||
.el-table__header th {
|
||||
position: relative !important;
|
||||
}
|
||||
/* Exclude gutter (scrollbar spacer) and selection column from resize */
|
||||
.el-table__header th.el-table__cell--selection .col-resize-handle,
|
||||
.el-table__header th.gutter .col-resize-handle {
|
||||
display: none !important;
|
||||
}
|
||||
.col-resize-handle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 6px;
|
||||
cursor: col-resize;
|
||||
z-index: 1;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.col-resize-handle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 20%;
|
||||
bottom: 20%;
|
||||
width: 2px;
|
||||
border-radius: 1px;
|
||||
background: transparent;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.el-table__header th:hover .col-resize-handle::after,
|
||||
.col-resize-handle.is-resizing::after {
|
||||
background: var(--gold);
|
||||
}
|
||||
.col-resize-handle:hover::after,
|
||||
.col-resize-handle.is-resizing::after {
|
||||
background: var(--gold) !important;
|
||||
}
|
||||
/* Prevent text selection while resizing columns */
|
||||
body.col-resizing {
|
||||
cursor: col-resize !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user