-
+
+
+
+
@@ -188,16 +206,17 @@ provide('toggleSidebar', toggleSidebar)
/* ---- 布局骨架 ---- */
-/* 侧栏与主区之间的灰缝宽度：由主区面板的左右 padding 产生（分隔条自身零宽，不占位）。
- * 因此分割线与命中区默认会落在灰缝左缘，需按「半个灰缝」右移才居中 ——
- * 这里把灰缝宽度收成一个变量，供下面几处共用，避免以后调 padding 时漏改。 */
-$layout-gutter: 8px;
-
+/* 贴边布局（vben 式）：侧栏与主区之间没有灰缝，分隔由侧栏自身的右边框承担；
+ * Splitter 的分隔条零宽、不占位，仅保留 hover 命中区用于拖拽调宽 */
.fms-layout {
display: flex;
height: 100vh;
min-width: 0;
- overflow: hidden;
+ /* clip 而非 hidden：同样裁剪，但不会成为可程序化滚动的 scroll container ——
+ * 布局容器一旦可滚，scrollIntoView 之类调用（如页签揭示）会连带滚动它，
+ * 在布局瞬时溢出一两像素时带着整个界面平移一下，观感即「闪烁」。
+ * flex 容器本身已是独立格式化上下文，不依赖 overflow 建立 BFC，行为等价 */
+ overflow: clip;
background: var(--fms-background);
}
@@ -216,10 +235,21 @@ $layout-gutter: 8px;
display: none;
}
-/* 非折叠态：分隔条悬浮命中区（width: 0 + margin: 0，不参与 flex 布局）。
- * 注意：原实现用负 margin（0 -3px）做悬浮命中区，但 flex 中负 margin 会把相邻面板
- * 拉近 6px，抵消主区面板 padding-left 8px → 侧栏白卡与右侧内容（顶栏/灰画布）只剩
- * 2px 灰缝，视觉上"紧贴"。命中区改由绝对定位的 ::after 扩展，布局不再受影响。 */
+/* 内容最大化：侧栏及其拖拽命中区一并隐藏（顶栏由模板 v-if 摘除），页签栏保留 ——
+ * 最大化按钮在页签栏右端，是还原的唯一入口。
+ * 用 display: none 而不是 v-if 摘面板：不动 Splitter 的面板树，
+ * 避免其尺寸 / 拖拽计算受结构变化影响 */
+.fms-layout.is-maximized .fms-sidebar-panel {
+ display: none;
+}
+
+.fms-layout.is-maximized .fms-layout-splitter :deep(> .fms-splitter-bar) {
+ display: none;
+}
+
+/* 非折叠态：分隔条零宽（不参与 flex 布局），命中区由绝对定位的 ::after 扩展。
+ * 视觉线平时透明（bar-on-hover），悬停 / 拖拽时才显示一条深色提示线，
+ * 松开后由侧栏右边框继续承担分隔职责 */
.fms-layout .fms-layout-splitter :deep(> .fms-splitter-bar) {
width: 0;
margin: 0;
@@ -227,20 +257,13 @@ $layout-gutter: 8px;
z-index: 1;
}
-/* 视觉分割线：组件里用 left: 50% 把线居中于分隔条，而本处分隔条零宽、
- * 灰缝由主区面板 padding 产生，线会落在灰缝左缘 → 按半个灰缝右移，落在灰缝正中 */
-.fms-layout .fms-layout-splitter :deep(> .fms-splitter-bar)::before {
- left: calc($layout-gutter / 2);
-}
-
-/* 命中区：绝对定位在灰缝正中（分隔条位置两侧各半个命中区宽度），不占 flex 空间，
- * 且能正常触发 bar 的 pointerdown 拖拽 */
+/* 命中区：以边界线为中心向两侧各展开半个命中区宽度 */
.fms-layout .fms-layout-splitter :deep(> .fms-splitter-bar)::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
- left: calc($layout-gutter / 2 - var(--fms-splitter-trigger-size) / 2);
+ left: calc(var(--fms-splitter-trigger-size) * -0.5);
width: var(--fms-splitter-trigger-size);
}
@@ -253,33 +276,31 @@ $layout-gutter: 8px;
transition: none;
}
-/* 主区面板：左右各留一个灰缝宽度的 padding（顶栏/内容区紧贴上边缘）。
- * 折叠态与展开态一致，避免侧栏折叠时与右侧紧贴 */
+/* 主区面板：无内边距，顶栏 / 页签 / 内容区依次紧贴（分隔线由各条自身的底边框承担） */
.fms-main-panel {
- padding: 0 $layout-gutter;
+ padding: 0;
}
/* 覆盖 Splitter 面板默认 overflow: auto（scoped 同名规则特异性更高，需带 .fms-layout 提权），
- * 让顶栏/卡片阴影与圆角完整绘制 */
+ * 避免面板成为独立滚动容器（滚动交给内容区，顶栏 / 页签固定不动） */
.fms-layout .fms-splitter-panel.fms-main-panel {
overflow: visible;
}
-/* 侧栏面板同样需要 overflow: visible：
- * 否则默认 overflow: auto 会把侧栏卡片的右侧投影（box-shadow 向右投射 4px）
- * 裁掉，侧栏与右侧内容之间失去可见分隔，看起来"紧贴" */
+/* 侧栏面板同样需要 overflow: visible：滚动交给侧栏内部的菜单区，
+ * 面板自身不做滚动容器，避免出现第二根滚动条 */
.fms-layout .fms-splitter-panel.fms-sidebar-panel {
overflow: visible;
}
-/* 主区纵向列：顶栏在灰底上独立成条，下方白卡与其留 8px 间距 */
+/* 主区纵向列：顶栏 / 页签 / 内容区三段紧贴，无间距 */
.fms-main-col {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
min-height: 0;
- gap: 8px;
+ gap: 0;
}
/* 主区内容容器：灰底画布（--fms-background），不再是白卡。
@@ -312,12 +333,12 @@ $layout-gutter: 8px;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
- /* 上下 4px，左右 0 */
- padding: 4px 0;
+ /* 画布内边距：页面在灰底上放白卡，四周统一留白 */
+ padding: 12px;
}
-/* 页面过渡外层包裹：稳定的 DOM 根，供 transition 的 out-in 模式直接管理，
- * 避免 keep-alive 直接作 Transition 子节点时在 patch 阶段访问 null.parentNode 报错。
+/* 页面包裹层：稳定的 DOM 根，keep-alive 与路由过渡（fade-slide）都承载于其中，
+ * 路由切换不重建该节点，缓存实例因此长期存活。
* flex:1 撑满内容区：低内容页面占满剩余高度，高内容页面自然增高由 .fms-content 滚动 */
.fms-page-wrap {
flex: 1;
@@ -326,34 +347,57 @@ $layout-gutter: 8px;
flex-direction: column;
}
-/* ---- 页面过渡 ---- */
-.page-enter-active {
+/* 页面外壳（由 getPageWrapper 的渲染函数创建）：路由过渡的目标容器。
+ * 单根兜底 —— 页面组件可能是多根 Fragment（如 Dashboard），非元素根无法被
+ *
动画化（警告且过渡失效、页面不显示）；同时承接页面根的高度链
+ * （flex 纵向列、吃满内容区）。渲染函数 vnode 不带 scoped 属性，故用 :global */
+:global(.fms-page-holder) {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ min-height: 0;
+}
+
+/* 内容区缺省页（403 / 500）在页面外壳内同样吃满高度，而不是 FallbackPage 默认的
+ * min-height: 100vh（那是给独立路由 404 与离线覆盖层用的，放内容区会撑出滚动） */
+:global(.fms-page-holder > .fms-fallback) {
+ flex: 1;
+ min-height: 0;
+}
+
+/* ---- 路由切换过渡（照 vben 的 fade-slide，按 FMS 场景收敛）----
+ * 新页面自左侧 30px 处淡入、旧页面向右 30px 淡出；横向位移由 .fms-content 的
+ * overflow-x: hidden 裁掉，不产生横向滚动条。
+ * 与 vben 的差异：用 mode="out-in" 串行（先退后进）——FMS 页面是灰底上的白卡，
+ * 并行进出时两张白卡交叠滑动会晃眼；串行下同一时刻只有一个页面，观感干净。
+ * 时长/缓动走动效 token：进场缓而稳（ease-out），退场干脆（ease-in，降一档），
+ * prefers-reduced-motion 下自动归零。
+ * 过渡类加在 .fms-page-holder（渲染函数 vnode，无 scoped 属性）上，故用 :global */
+:global(.fade-slide-enter-active) {
transition:
- opacity 160ms ease-out,
- transform 160ms ease-out;
+ opacity var(--fms-duration-slow) var(--fms-ease-out),
+ transform var(--fms-duration-slow) var(--fms-ease-out);
}
-.page-leave-active {
- transition: opacity 80ms ease-in;
+:global(.fade-slide-leave-active) {
+ transition:
+ opacity var(--fms-duration-base) var(--fms-ease-in),
+ transform var(--fms-duration-base) var(--fms-ease-in);
}
-.page-enter-from {
+:global(.fade-slide-enter-from) {
opacity: 0;
- transform: translateY(4px);
+ transform: translateX(-30px);
}
-.page-leave-to {
+:global(.fade-slide-leave-to) {
opacity: 0;
+ transform: translateX(30px);
}
@media (prefers-reduced-motion: reduce) {
.fms-layout-splitter .fms-splitter-panel {
transition: none;
}
-
- .page-enter-active,
- .page-leave-active {
- transition: none;
- }
}
diff --git a/code/fms/fms-vue/src/layouts/components/AppSidebar.vue b/code/fms/fms-vue/src/layouts/components/AppSidebar.vue
index 7e556da0..e65e6a5a 100644
--- a/code/fms/fms-vue/src/layouts/components/AppSidebar.vue
+++ b/code/fms/fms-vue/src/layouts/components/AppSidebar.vue
@@ -171,20 +171,18 @@ function toMenuItem(node) {
flex-direction: column;
height: 100%;
min-width: 0;
- /* 白色侧栏，紧贴左/上/下边缘（父面板无 padding、无圆角）。
- * 右侧投影用方向性 token（原硬编码值收编），与主区形成分隔；
- * 强度克制：2px 右偏移 + 6px 模糊 + 6% 透明度，紧贴右缘自然分隔，不用浓阴影（会显脏）。
- * 背景用 --fms-surface（比内容白卡沉一档）：让框架退后，白卡成为视觉主体。
- * 深色模式下 --fms-surface 自动变深、--fms-shadow-right 自动加重，无需额外覆盖 */
+ /* 贴边布局（vben 式）：侧栏紧贴左/上/下边缘，右侧用 1px 边框与主区分隔。
+ * 背景用 --fms-surface（框架面，与顶栏/页签条同为白），深色模式自动跟随 */
background: var(--fms-surface);
- box-shadow: var(--fms-shadow-right);
+ border-right: 1px solid var(--fms-border);
overflow: hidden;
}
-/* 团队切换（对齐 SidebarHeader p-2 + TeamSwitcher h-12） */
+/* 团队切换：区域总高 48px（4 + 40 + 4），与顶栏等高 ——
+ * 贴边布局下两者相邻，等高才是一条完整的框架横带 */
.fms-team {
flex-shrink: 0;
- padding: 4px;
+ padding: 4px 8px;
}
.fms-team-trigger {
@@ -192,7 +190,7 @@ function toMenuItem(node) {
align-items: center;
gap: 8px;
width: 100%;
- min-height: 48px;
+ min-height: 40px;
padding: 0 8px;
border: none;
border-radius: var(--fms-control-radius);
diff --git a/code/fms/fms-vue/src/layouts/components/AppTabs.vue b/code/fms/fms-vue/src/layouts/components/AppTabs.vue
index 07954aa8..bc6f84b9 100644
--- a/code/fms/fms-vue/src/layouts/components/AppTabs.vue
+++ b/code/fms/fms-vue/src/layouts/components/AppTabs.vue
@@ -1,9 +1,17 @@
+
+
+
+
+
+
+
diff --git a/code/fms/fms-vue/src/views/fallback/FallbackPage.vue b/code/fms/fms-vue/src/views/fallback/FallbackPage.vue
new file mode 100644
index 00000000..0b0e8a2e
--- /dev/null
+++ b/code/fms/fms-vue/src/views/fallback/FallbackPage.vue
@@ -0,0 +1,126 @@
+
+
+
+
+
+
{{ page.title() }}
+
{{ page.desc() }}
+
+