菜单重构完成

This commit is contained in:
张家训
2026-07-29 14:07:01 +08:00
parent 5f1bceb767
commit 6b855a42b8
5 changed files with 381 additions and 117 deletions
+135 -16
View File
@@ -20,7 +20,7 @@
-workutils-nav-bg: #1e293b;
-workutils-nav-text: #ffffff;
-workutils-nav-hover: rgba(255,255,255,0.10);
-workutils-nav-active: rgba(37,99,235,0.25);
-workutils-nav-active: rgba(37,99,235,0.35);
-workutils-nav-bar: #2563eb;
}
@@ -39,33 +39,152 @@
-fx-background-color: rgba(255,255,255,0.1);
}
.nav-btn {
/* ============ ListView 导航(JavaFX 标准化方案) ============ */
.nav-list {
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-border-width: 0;
-fx-padding: 0;
}
/* 强制 ListView 所有内部容器透明,确保空区域不显示杂色 */
.nav-list,
.nav-list > *,
.nav-list .list-view,
.nav-list .viewport,
.nav-list .virtual-flow,
.nav-list .virtual-flow > *,
.nav-list .clipped-container,
.nav-list .sheet,
.nav-list .corner {
-fx-background-color: transparent;
-fx-background-insets: 0;
}
.nav-list .list-cell,
.nav-list .list-cell:empty,
.nav-list .list-cell:filled:empty {
-fx-background-color: transparent;
}
/* 滚动条美化 */
.nav-list .scroll-bar:vertical {
-fx-background-color: transparent;
-fx-pref-width: 6;
}
.nav-list .scroll-bar .thumb {
-fx-background-color: rgba(255,255,255,0.15);
-fx-background-radius: 3;
}
.nav-list .scroll-bar .thumb:hover {
-fx-background-color: rgba(255,255,255,0.25);
}
.nav-list .scroll-bar .increment-button,
.nav-list .scroll-bar .decrement-button {
-fx-background-color: transparent;
-fx-padding: 0;
}
/* 每个导航项(Cell) */
.nav-cell {
-fx-background-color: transparent;
-fx-text-fill: white;
-fx-background-radius: 0;
-fx-border-width: 0 0 0 3;
-fx-border-color: transparent;
-fx-padding: 12 16 12 16;
-fx-alignment: CENTER-LEFT;
-fx-background-insets: 0;
-fx-padding: 10 14 10 14;
-fx-cursor: hand;
-fx-max-width: Infinity;
-fx-border-width: 0;
/* 平滑过渡背景色和文字色 */
-fx-transition: -fx-background-color 150ms ease-out;
}
.nav-btn > .label,
.nav-btn .label,
.nav-btn .text {
.nav-cell .label {
-fx-text-fill: white;
/* 深色背景下的文字阴影,提升对比度 */
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.45), 3, 0, 0, 1);
-fx-transition: -fx-text-fill 150ms ease-out,
-fx-effect 150ms ease-out;
}
.nav-btn:hover {
/* 移除 JavaFX ListCell 默认焦点环(让选中态边框干净) */
.nav-list .list-cell {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
-fx-border-color: transparent;
-fx-border-width: 0;
}
/* 强制空 cell 完全透明(含 placeholder、footer 等场景) */
.nav-list .list-cell:empty,
.nav-list .list-cell:filled:empty {
-fx-background-color: transparent !important;
}
/* hover 状态 */
.nav-cell:hover {
-fx-background-color: -workutils-nav-hover;
-fx-text-fill: white;
}
.nav-btn-active {
/* 兜底:所有 selected cell(含 empty)默认透明,防止虚拟化复用时空 cell 闪现蓝色 */
.nav-list .list-cell:selected {
-fx-background-color: transparent;
}
/* selected 状态:强制 padding、background-insets、文字色一致
关键:用 :filled:selected 而非自定义 class,避免 JavaFX 内置样式覆盖 */
.nav-list .list-cell:filled:selected {
-fx-background-color: -workutils-nav-active;
-fx-text-fill: white;
-fx-border-color: -workutils-nav-bar;
-fx-background-insets: 0;
-fx-padding: 10 14 10 14;
}
.nav-list .list-cell:filled:selected .label {
-fx-text-fill: white !important;
-fx-font-weight: 600;
/* 移除 dropshadow,让文字干净锐利 */
-fx-effect: null !important;
}
.nav-list .list-cell:filled:selected .nav-indicator {
-fx-fill: #2563eb;
-fx-effect: dropshadow(gaussian, #60a5fa, 6, 0, 0, 0);
}
/* 兼容:之前手动加的 .nav-cell-active 类名也支持 */
.nav-cell-active {
-fx-background-color: -workutils-nav-active;
-fx-background-insets: 0;
-fx-padding: 10 14 10 14;
}
/* 按下状态:微妙的反馈 */
.nav-cell:pressed {
-fx-background-color: rgba(96,165,250,0.35);
}
/* ListView 自身获得焦点时也保持透明,不显示蓝色环 */
.nav-list:focused {
-fx-background-color: transparent;
-fx-border-color: transparent;
}
/* 左侧指示条 */
.nav-indicator {
-fx-fill: transparent;
-fx-arc-width: 2;
-fx-arc-height: 2;
-fx-transition: -fx-fill 150ms ease-out;
}
.nav-cell-active .nav-indicator {
-fx-fill: #2563eb;
-fx-effect: dropshadow(gaussian, #60a5fa, 6, 0, 0, 0);
}
/* 点击涟漪层 */
.nav-ripple {
-fx-fill: rgba(96,165,250,0.4);
-fx-opacity: 0;
}
.nav-version {