三页面重设计与移动端适配;接入 PWA 与构建分包

src/assets/main.css

@@ -84,6 +84,42 @@ body {
   background: color-mix(in srgb, var(--color-ink) 38%, transparent);
 }
 
+/* 表格滚动条常显:Naive 隐藏原生条(scrollbar-width:none)后全靠自绘 thumb,
+   而自绘条仅悬停时短暂出现且渲染链路脆弱,窄容器下用户无从得知表格可横滚。
+   现代 Chromium(121+)只认标准属性——computed 为 none 时 ::-webkit-* 规则
+   整体失效,故必须以更高特异性覆盖 scrollbar-width 本身(样式随全局瘦滚动条);
+   webkit 伪元素规则兜底老内核(Naive 把 scrollbar/thumb 清零,须逐项放开) */
+.n-data-table .n-scrollbar > .n-scrollbar-container {
+  scrollbar-width: thin;
+}
+.n-data-table .n-scrollbar > .n-scrollbar-container::-webkit-scrollbar:horizontal {
+  display: block;
+  height: 7px;
+  background: transparent;
+}
+.n-data-table .n-scrollbar > .n-scrollbar-container::-webkit-scrollbar-thumb:horizontal {
+  display: block;
+  height: 7px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--color-ink) 22%, transparent);
+}
+
+/* 租户选择器面板(移动端):popover follower 只会翻转不会平移,窄屏下
+   bottom-start / bottom-end 两个方向都放不下整块面板,必然被视口裁切;
+   改为覆盖 follower 定位,固定顶部整宽展示(follower 挂 body 下,无
+   transform 祖先,fixed 相对视口生效) */
+@media (max-width: 767px) {
+  .v-binder-follower-content:has(.tenant-picker-panel) {
+    position: fixed !important;
+    inset: 60px 12px auto 12px !important;
+    transform: none !important;
+  }
+  .v-binder-follower-content:has(.tenant-picker-panel) .n-popover,
+  .tenant-picker-panel {
+    width: 100% !important;
+  }
+}
+
 /* 页面标题统一 serif */
 .page-title {
   font-family: var(--font-serif);
@@ -341,3 +377,50 @@ html.theme-switching *::after {
   color: var(--color-ink);
   font-weight: 600;
 }
+
+/* 移动端:Tab 条横向滑动;右缘渐隐暗示还有更多 Tab(Naive 无内建暗示),
+   滚动内容补尾部内边距,滚到底时末个 Tab 不被渐隐吃掉 */
+@media (max-width: 767px) {
+  .n-tabs .n-tabs-nav-scroll-wrapper {
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
+    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
+  }
+  .n-tabs .n-tabs-nav-scroll-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+  .n-tabs .n-tabs-nav-scroll-content {
+    padding-right: 28px;
+  }
+}
+
+/* 弹窗移动端全屏形态,FormModal 与各详情/表单弹窗共用(配 useMobileModal):
+   NModal teleport 到 body,组件 scoped 样式够不到,且按路由分包后单组件的
+   非 scoped 样式不保证已加载,故规则放全局。内容区吃满剩余高度限内滚动,
+   页脚实底常驻含手势区安全距。内容区类名此版本为 .n-card-content(footer
+   却是 .n-card__footer),两种拼写都盖住防升级回切 */
+.form-modal-mobile {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.form-modal-mobile .form-modal-body {
+  max-height: none;
+  flex: 1;
+  min-height: 0;
+}
+.form-modal-mobile .n-card-content,
+.form-modal-mobile .n-card__content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  /* 无内层滚动容器的弹窗(详情类)内容直接在此滚;FormModal 内层
+     .form-modal-body 自会收缩到容器内,不触发此层滚动 */
+  overflow-y: auto;
+}
+.form-modal-mobile .n-card__footer {
+  padding-bottom: calc(16px + env(safe-area-inset-bottom));
+  background: var(--color-card);
+}