adtec-core-package 3.2.6 → 3.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adtec-core-package",
-  "version": "3.2.6",
+  "version": "3.2.7",
   "private": false,
   "type": "module",
   "exports": {

package/src/assets/style/index.less

@@ -126,30 +126,51 @@ div:focus {
   --margin-8: 8px;
   --margin-9: 9px;
   --margin-10: 10px;
+  /* 全系统滚动条统一为 vxe 观感 */
+  --adtec-scrollbar-size: 8px;
+  --adtec-scrollbar-thumb: #c0c4cc;
+  --adtec-scrollbar-thumb-hover: #909399;
+  /* vxe 表格滚动条粗细（仅 Chrome/Edge 的 ::-webkit-scrollbar 支持精确 px） */
+  --adtec-vxe-scrollbar-size: 8px;
 }
 .move-back {
   background: #f5f5f5 !important;
 }
 
+/**
+ * 全局原生滚动条（Chrome/Edge）：对齐 vxe 观感。
+ * 关键：-webkit-appearance: none —— macOS/Chromium 默认 overlay 细条会忽略 width/height，
+ * 加了才切换为经典滚动条，尊重此处的 px 与配色。勿在 * 上写 scrollbar-width（会退回 overlay）。
+ */
 *::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--adtec-scrollbar-size);
+  height: var(--adtec-scrollbar-size);
   background: transparent;
 }
 
 *::-webkit-scrollbar-thumb {
-  background: transparent;
-  border-radius: 4px;
+  background: var(--adtec-scrollbar-thumb);
+  border-radius: 6px;
 }
 
-*:hover::-webkit-scrollbar-thumb {
-  background: #DDDEE0;
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--adtec-scrollbar-thumb-hover);
 }
 
-*:hover::-webkit-scrollbar-track {
+*::-webkit-scrollbar-track {
   background: transparent;
 }
 
+/* Firefox：无 webkit 伪元素时才用 scrollbar-width（无法精确到 px） */
+@supports not selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--adtec-scrollbar-thumb) transparent;
+  }
+}
+
 //::-webkit-scrollbar {
 //  width: 6px;
 //  height: 6px;
@@ -184,4 +205,59 @@ div:focus {
 // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
 *::-webkit-resizer {
   display: none;
+}
+
+/* UMO 编辑器：工具栏横向滚动仍隐藏；正文/面板滚动条与系统对齐 */
+.umo-rich-text-editor-root {
+  .umo-scrollable-content {
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+
+    &::-webkit-scrollbar {
+      display: none !important;
+      width: 0 !important;
+      height: 0 !important;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+      background: transparent !important;
+    }
+  }
+
+  .umo-scrollbar,
+  .umo-zoomable-container {
+    scrollbar-width: auto;
+    scrollbar-color: var(--adtec-scrollbar-thumb) transparent;
+
+    &::-webkit-scrollbar {
+      width: var(--adtec-scrollbar-size) !important;
+      height: var(--adtec-scrollbar-size) !important;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--adtec-scrollbar-thumb) !important;
+      border-radius: 6px !important;
+      border: 2px solid transparent !important;
+      background-clip: content-box !important;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+      background-color: var(--adtec-scrollbar-thumb-hover) !important;
+    }
+  }
+}
+
+.umo-scrollable-content {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+
+  &::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background: transparent !important;
+  }
 }

package/src/components/RichTextEditor/RichTextEditor.vue

@@ -4,8 +4,9 @@
     ref="rootRef"
     class="umo-rich-text-editor-root"
     :class="{ 'umo-rich-text-editor-root--readonly': !editable }">
-    <UmoEditor
-      v-if="umoMountOptions"
+    <component
+      :is="UmoEditorComp"
+      v-if="UmoEditorComp && umoMountOptions"
       :key="umoRuntimeKey"
       ref="editorRef"
       class="umo-rich-text-editor"
@@ -14,14 +15,25 @@
       @changed="onEditorChanged"
       @blur="onEditorBlur"
     />
+    <!-- 受控 loading 覆盖全程：运行时 import → UmoEditor 挂载 → TipTap created，杜绝 UMO 内置 loading 闪现/泄漏 -->
+    <div
+      v-if="showControlledLoading"
+      class="umo-rich-text-editor-loading"
+      v-loading="true"
+      element-loading-text="编辑器加载中..."
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { UmoEditor } from '../../../prebuilt/umo-editor/umo-editor.js'
-import '../../../prebuilt/umo-editor/umo-editor.css'
+/**
+ * UMO 编辑器运行时（umo-editor ~2.9MB + TDesign ~2.29MB + exceljs 等）改为受控懒加载：
+ * 不再静态引入，避免这 ~7MB 打进入口/页面同步 chunk。
+ * 严格串行：先 import() 运行时并完成全局注册（installUmoEditorApp），再渲染 UmoEditor，
+ * 中间只显示一个受控 loading，杜绝「UMO 内置 loading vs 自定义 loading」竞态卡死。
+ */
 import { ElMessage } from 'element-plus'
-import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, watch, type App } from 'vue'
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, watch, type App, type Component } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 import {
   finalizeHtml,
@@ -30,7 +42,6 @@ import {
   purgeUmoDocumentLocalStorage,
   releaseUmoDocumentStorageShim,
 } from './richTextHtmlUtils'
-import { installUmoEditorApp } from './installUmoEditorApp'
 
 export type RichTextEditorConfig = {
   placeholder?: string
@@ -106,15 +117,22 @@ const text = defineModel<string>('text', {
   required: false,
 })
 
-const editorRef = ref<InstanceType<typeof UmoEditor> | null>(null)
+const editorRef = ref<any>(null)
 const rootRef = ref<HTMLElement | null>(null)
 /** setup 同步捕获；async/Observer 内 getCurrentInstance() 为 null */
 const hostApp = getCurrentInstance()?.appContext?.app as App | undefined
+/** 懒加载的 UmoEditor 组件；null 时显示受控 loading，加载并注册全局后再渲染 */
+const UmoEditorComp = shallowRef<Component | null>(null)
+let umoRuntimePromise: Promise<boolean> | null = null
 const editorKey = `umo-${uuidv4()}`
 /** 编辑/只读扩展集不同，切换时需 remount；key 变化强制重建 UmoEditor */
 const umoRuntimeKey = ref(editorKey)
 const lastMountEditable = ref<boolean | null>(null)
 const ready = ref(false)
+/** 受控 loading：运行时未就绪或编辑器尚未 created/bootstrap 完成 */
+const showControlledLoading = computed(
+  () => !UmoEditorComp.value || !umoMountOptions.value || !ready.value,
+)
 const syncingContent = ref(false)
 /** 挂载快照，避免 computed props 变更触发 Umo 内部反复 patch 导致 emitsOptions null */
 const umoMountOptions = shallowRef<Record<string, unknown> | null>(null)
@@ -139,16 +157,25 @@ function isPanelVisible() {
 }
 
 function handlePanelShown() {
-  if (!isPanelVisible() || !umoMountOptions.value) {
+  if (!isPanelVisible()) {
     rootWasHidden = true
     return
   }
-  if (!rootWasHidden) return
+  const wasHidden = rootWasHidden
   rootWasHidden = false
-  if (!ready.value) {
+  if (!UmoEditorComp.value) {
+    void startUmoBootstrap()
+    return
+  }
+  if (!umoMountOptions.value) {
+    initUmoMountOptions()
+    return
+  }
+  if (wasHidden && !ready.value) {
     void bootstrapEditor()
     return
   }
+  if (!wasHidden) return
   void applyEditableStateWithRetry()
   if (editable.value) {
     void ensureBlockImageNodeView()
@@ -223,15 +250,52 @@ async function remountEditor() {
     umoMountOptions.value = null
     umoRuntimeKey.value = `${editorKey}-${Date.now()}`
     await nextTick()
-    ensureUmoGlobals()
+    const ok = await ensureUmoGlobals()
+    if (!ok) return
     initUmoMountOptions(html)
   } finally {
     remounting = false
   }
 }
 
-function ensureUmoGlobals() {
-  return installUmoEditorApp(hostApp ?? getCurrentInstance()?.appContext?.app)
+/**
+ * 受控懒加载：并行 import UMO 运行时 + CSS + 安装器，
+ * 完成全局注册（TDesign + umoGlobalComponents）后再暴露 UmoEditorComp。
+ * 幂等：多次调用共用同一 Promise；失败可重试。
+ */
+function ensureUmoGlobals(): Promise<boolean> {
+  if (UmoEditorComp.value) return Promise.resolve(true)
+  if (!umoRuntimePromise) {
+    umoRuntimePromise = Promise.all([
+      import('../../../prebuilt/umo-editor/umo-editor.js'),
+      import('../../../prebuilt/umo-editor/umo-editor.css'),
+      import('./installUmoEditorApp'),
+    ])
+      .then(([umoMod, _css, installMod]) => {
+        installMod.installUmoEditorApp(hostApp)
+        UmoEditorComp.value = (umoMod as { UmoEditor: Component }).UmoEditor
+        return true
+      })
+      .catch(() => {
+        umoRuntimePromise = null
+        ElMessage.error('编辑器加载失败，请重试')
+        return false
+      })
+  }
+  return umoRuntimePromise
+}
+
+/** 面板可见时才启动懒加载，避免隐藏 Tab/Collapse 内编辑器触发 UMO loading */
+async function startUmoBootstrap() {
+  if (!isPanelVisible()) {
+    rootWasHidden = true
+    return
+  }
+  const ok = await ensureUmoGlobals()
+  if (!ok) return
+  if (!umoMountOptions.value) {
+    initUmoMountOptions()
+  }
 }
 
 const editable = computed(() => {
@@ -504,15 +568,11 @@ function onEditorBlur() {
 }
 
 onMounted(() => {
-  ensureUmoGlobals()
   rootWasHidden = !isPanelVisible()
   observePanelVisibility()
+  void startUmoBootstrap()
 })
 
-// editable 就绪后同步初始化，避免 onBeforeMount 时序问题
-ensureUmoGlobals()
-initUmoMountOptions()
-
 onBeforeUnmount(() => {
   clearVisibilityObserver()
   ready.value = false
@@ -609,8 +669,22 @@ onUnmounted(() => {
   min-width: 0;
   min-height: 280px;
   box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
 }
 
+.umo-rich-text-editor-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  flex: 1;
+  min-height: 200px;
+  width: 100%;
+  pointer-events: none;
+}
+
+/* 受控 loading 由 installUmoEmbedStyles 全局禁用 UMO 内置 loading，此处仅保留容器样式 */
+
 :deep(.umo-rich-text-editor) {
   width: 100%;
   height: 100%;
@@ -687,14 +761,6 @@ onUnmounted(() => {
 }
 
 .umo-rich-text-editor-root--readonly {
-  :deep(.umo-loading),
-  :deep(.umo-loading--visible),
-  :deep(.umo-loading__overlay),
-  :deep(.umo-loading--center),
-  :deep(.umo-icon-loading) {
-    display: none !important;
-  }
-
   :deep(.umo-editor-content .ProseMirror) {
     cursor: default;
   }

package/src/components/RichTextEditor/installUmoEditorApp.ts

@@ -1,10 +1,25 @@
-import type { App, Component } from 'vue'
+import { defineComponent, type App, type Component } from 'vue'
 import TDesign from 'tdesign-vue-next'
 import { umoGlobalComponents } from '../../../prebuilt/umo-editor/umo-editor.js'
 
 const registeredApps = new WeakSet<App>()
 const tdesignApps = new WeakSet<App>()
 
+/** TDesign Loading 空实现：嵌入场景不使用 UMO 内置 loading（由 RichTextEditor 受控 loading 接管） */
+const UmoLoadingNoop = defineComponent({
+  name: 'TLoading',
+  inheritAttrs: false,
+  props: { loading: { type: Boolean, default: false } },
+  setup() {
+    return () => null
+  },
+})
+
+const umoLoadingServiceNoop = Object.assign(
+  () => ({ hide: () => {} }),
+  { install: () => {} },
+)
+
 /** 嵌入 Umo 的全局样式覆盖（须注入 document.head，全屏 Teleport 到 body 时组件 scoped :deep 无法命中） */
 function injectUmoEmbedStyles() {
   if (typeof document === 'undefined') return
@@ -19,6 +34,22 @@ function injectUmoEmbedStyles() {
     .umo-status-bar-button.umo-lang-button {
       display: none !important;
     }
+    /* 嵌入场景：彻底禁用 UMO/TDesign 内置 loading（组件 + 遮罩 + 全屏服务残留节点） */
+    .umo-loading,
+    .umo-loading--visible,
+    .umo-loading--full,
+    .umo-loading--center,
+    .umo-loading--lock,
+    .umo-loading__overlay,
+    .umo-loading__fullscreen,
+    .umo-loading__gradient,
+    .umo-loading__text,
+    .umo-icon-loading,
+    body > .umo-loading__fullscreen {
+      display: none !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
   `
   document.head.appendChild(style)
 }
@@ -44,6 +75,9 @@ export function installUmoEditorApp(app?: App | null) {
     } catch {
       // 宿主或兄弟插件已安装 TDesign
     }
+    // 运行时“删除”UMO 内置 loading：空组件 + 空 $loading 服务（不碰 v-loading 指令，避免影响 Element Plus）
+    app.component('TLoading', UmoLoadingNoop)
+    app.config.globalProperties.$loading = umoLoadingServiceNoop
     tdesignApps.add(app)
   }
 

package/src/components/editor-main/src/assets/styles/_mixins.less

@@ -3,7 +3,8 @@
 
   @-moz-document url-prefix() {
     scrollbar-color: var(--umo-scrollbar-thumb-color) transparent;
-    scrollbar-width: thin;
+    /* 勿用 thin：Chromium 会压过 ::-webkit-scrollbar 的自定义宽度 */
+    scrollbar-width: auto;
   }
 
   &::-webkit-scrollbar {

package/src/components/editor-main/src/assets/styles/_variables.less

@@ -59,10 +59,10 @@
   --umo-content-code-family:
     Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 
-  // 滚动条
-  --umo-scrollbar-size: 8px;
-  --umo-scrollbar-thumb-color: rgba(0, 0, 0, 0.1);
-  --umo-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.3);
+  // 滚动条（与系统 --adtec-scrollbar-* / vxe 对齐）
+  --umo-scrollbar-size: var(--adtec-scrollbar-size, 10px);
+  --umo-scrollbar-thumb-color: var(--adtec-scrollbar-thumb, rgba(144, 147, 153, 0.55));
+  --umo-scrollbar-thumb-hover-color: var(--adtec-scrollbar-thumb-hover, rgba(144, 147, 153, 0.8));
 }
 
 [theme-mode='dark'] {
@@ -92,6 +92,7 @@
   --umo-content-text-color: #000;
 
   // 滚动条
-  --umo-scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
-  --umo-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.45);
+  --umo-scrollbar-size: 10px;
+  --umo-scrollbar-thumb-color: rgba(255, 255, 255, 0.55);
+  --umo-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.8);
 }

package/src/config/ElementPlusConfig.ts

@@ -17,9 +17,19 @@ import elementPlus, {
   ElDrawer,
   ElSelect,
   ElTreeSelect,
+  ElDatePicker,
+  ElCascader,
   ElTable,
   ElTooltip,
 } from 'element-plus'
+
+/**
+ * vxe 单元格编辑时，Element 下拉/日期面板默认 teleport 到 body。
+ * 点击选项会被 vxe 判定为“单元格外点击”并 clearEdit，导致间歇性选不中。
+ * 官方约定：弹出层加 class `vxe-table--ignore-clear` 即可跳过该清理。
+ * 非 vxe 场景加此 class 无副作用。
+ */
+const VXE_IGNORE_CLEAR_POPPER = 'vxe-table--ignore-clear'
 ElPagination.props.background = {
   type: Boolean,
   default: true,
@@ -72,10 +82,26 @@ ElSelect.props.fitInputWidth = {
   type: Boolean,
   default: false,
 }
+ElSelect.props.popperClass = {
+  type: String,
+  default: VXE_IGNORE_CLEAR_POPPER,
+}
 ElTreeSelect.props.fitInputWidth = {
   type: Boolean,
   default: false,
 }
+ElTreeSelect.props.popperClass = {
+  type: String,
+  default: VXE_IGNORE_CLEAR_POPPER,
+}
+ElDatePicker.props.popperClass = {
+  type: String,
+  default: VXE_IGNORE_CLEAR_POPPER,
+}
+ElCascader.props.popperClass = {
+  type: String,
+  default: VXE_IGNORE_CLEAR_POPPER,
+}
 ElTable.props.showOverflowTooltip = {
   type: Boolean,
   default: true,

package/src/config/VxeTableConfig.ts

@@ -6,15 +6,35 @@ import {
 
 import VxeUIPluginRenderElement from '@vxe-ui/plugin-render-element'
 import '@vxe-ui/plugin-render-element/dist/style.css'
-import VxeUIPluginExportXLSX from '@vxe-ui/plugin-export-xlsx'
+// 注意：经 umoCjsVirtual 转换后，导出插件的「真插件」是具名导出（带 .install），
+// default 只是包装对象 { VxeUIPluginExportXLSX, default }（无 .install）。
+// 用 default 导入会导致 VxeUI.use() 空转 → 导出报「不支持的文件类型 xlsx/pdf」。必须用具名导入。
+import { VxeUIPluginExportXLSX } from '@vxe-ui/plugin-export-xlsx'
 import ExcelJS from 'exceljs'
 import 'vxe-pc-ui/lib/style.css'
 import '../css/vxeTableUI/all.scss'
-import VxeUIPluginExportPDF from '@vxe-ui/plugin-export-pdf'
+import { VxeUIPluginExportPDF } from '@vxe-ui/plugin-export-pdf'
 import { jsPDF } from 'jspdf'
 // 导入默认的语言（使用 es 构建，避免 lib CJS 在 Vite 下无 default 导出）
 import zhCN from 'vxe-table/es/locale/lang/zh-CN'
 
+/**
+ * 导出插件（Excel/PDF）全局注册一次。
+ * ExcelJS / jsPDF / 插件均已在本文件顶部静态引入，注册与否不影响打包体积。
+ * 过去按 enableExcel/enablePdf 逐页 gating，导致注册依赖页面访问顺序：
+ * 直连未开启导出的页面时 VxeUI 未注册 xlsx，导出报「不支持的文件类型 "xlsx"」。
+ * 改为无条件注册后，任意页面、任意访问顺序均可导出。
+ */
+let vxeExportPluginsRegistered = false
+function registerVxeExportPlugins() {
+  if (vxeExportPluginsRegistered) return
+  vxeExportPluginsRegistered = true
+  VxeUI.use(VxeUIPluginExportXLSX, { ExcelJS })
+  VxeUI.use(VxeUIPluginExportPDF, { jsPDF })
+}
+// 模块加载即注册，确保任何 grid 创建前 xlsx/pdf 类型已可用
+registerVxeExportPlugins()
+
 /**
  * 局部初始化 vxe-table 插件与配置
  */
@@ -29,8 +49,8 @@ export function initVxeTableInPage(
   VxeUI.component(VxeTooltip)
   // 局部注册插件
   enableElementPlus && VxeUI.use(VxeUIPluginRenderElement)
-  enableExcel && VxeUI.use(VxeUIPluginExportXLSX, { ExcelJS })
-  enablePdf && VxeUI.use(VxeUIPluginExportPDF, { jsPDF })
+  // 导出插件已在模块级全局注册（enableExcel/enablePdf 仅保留签名兼容）
+  registerVxeExportPlugins()
 
   // 设置表格配置（可复制你在 VxeTableConfig.ts 中的配置）
   VxeUI.setConfig({
@@ -213,8 +233,7 @@ export function initVxeTableInPage(
         oSize: 2,
       },
       scrollbarConfig: {
-        // width: 0,
-        // height: 0
+        // 与 --adtec-vxe-scrollbar-size 一致；JS 用此值预留 scroll-x/y-virtual 空间
       },
     },
     grid: {

package/src/css/elementUI/common/var.scss

@@ -1226,10 +1226,11 @@ $loading: map.merge(
 $scrollbar: () !default;
 $scrollbar: map.merge(
   (
-    'opacity': 0.3,
-    'bg-color': getCssVar('text-color-secondary'),
-    'hover-opacity': 0.5,
-    'hover-bg-color': getCssVar('text-color-secondary'),
+    /* 与 vxe 实心条对齐：不透明，避免半透明看起来更细 */
+    'opacity': 1,
+    'bg-color': rgba(144, 147, 153, 0.55),
+    'hover-opacity': 1,
+    'hover-bg-color': rgba(144, 147, 153, 0.8),
   ),
   $scrollbar
 );

package/src/css/elementUI/mixins/mixins.scss

@@ -22,20 +22,20 @@
 
 // Scrollbar
 @mixin scroll-bar {
-  $scrollbar-thumb-background: getCssVar('text-color', 'disabled');
-  $scrollbar-track-background: getCssVar('fill-color', 'blank');
+  $scrollbar-thumb-background: var(--adtec-scrollbar-thumb, rgba(144, 147, 153, 0.55));
+  $scrollbar-track-background: transparent;
 
   &::-webkit-scrollbar {
     z-index: 11;
-    width: 6px;
+    width: var(--adtec-scrollbar-size, 10px);
 
     &:horizontal {
-      height: 6px;
+      height: var(--adtec-scrollbar-size, 10px);
     }
 
     &-thumb {
-      border-radius: 5px;
-      width: 6px;
+      border-radius: 6px;
+      width: var(--adtec-scrollbar-size, 10px);
       background: $scrollbar-thumb-background;
     }
 
@@ -48,7 +48,7 @@
 
       &-piece {
         background: $scrollbar-track-background;
-        width: 6px;
+        width: var(--adtec-scrollbar-size, 10px);
       }
     }
   }

package/src/css/elementUI/scrollbar.scss

@@ -59,10 +59,10 @@
     right: 2px;
     bottom: 2px;
     z-index: 1;
-    border-radius: 4px;
+    border-radius: 6px;
 
     @include when(vertical) {
-      width: 6px;
+      width: var(--adtec-scrollbar-size, 10px);
       top: 2px;
 
       > div {
@@ -71,7 +71,7 @@
     }
 
     @include when(horizontal) {
-      height: 6px;
+      height: var(--adtec-scrollbar-size, 10px);
       left: 2px;
 
       > div {

package/src/css/vxeTableUI/components/table.scss

@@ -79,34 +79,54 @@
   overflow-x: scroll;
 }
 
-/* 仅显示外层滚动条：鼠标进入表格显示，移出隐藏 */
+/**
+ * vxe 4.13 滚动条自定义粗细（可精确到 px）：
+ * 关键是 ::-webkit-scrollbar 上的 -webkit-appearance: none。
+ * macOS/Chromium 默认用 overlay 细条，会忽略 width/height；
+ * 一旦 appearance:none，就切换为经典滚动条，尊重此处的 px 与滑块样式。
+ * 故不写 scrollbar-width（避免退回 auto/overlay），只走 webkit 伪元素。
+ *
+ * 自动隐藏：默认滑块/轨道透明（隐藏），鼠标悬停 vxe 表格时才显示。
+ * 仍保留 appearance:none 的 8px 占位（is--scroll-x/y 预留），故无布局跳动、不遮内容。
+ */
 .vxe-table--scroll-x-handle,
 .vxe-table--scroll-y-handle {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  -ms-overflow-style: auto;
+
   &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    -webkit-appearance: none;
+    appearance: none;
+    width: var(--adtec-vxe-scrollbar-size, 8px);
+    height: var(--adtec-vxe-scrollbar-size, 8px);
     background: transparent;
   }
   &::-webkit-scrollbar-thumb {
     background: transparent;
-    border-radius: 4px;
+    border-radius: 6px;
   }
   &::-webkit-scrollbar-track {
     background: transparent;
   }
 }
 
+/* 鼠标悬停在 vxe 表格上时才显示滚动条滑块（移出即隐藏） */
 .vxe-table:hover {
+  .vxe-table--scroll-x-handle::-webkit-scrollbar-thumb,
+  .vxe-table--scroll-y-handle::-webkit-scrollbar-thumb {
+    background: #c0c4cc;
+  }
+  .vxe-table--scroll-x-handle::-webkit-scrollbar-thumb:hover,
+  .vxe-table--scroll-y-handle::-webkit-scrollbar-thumb:hover {
+    background: #909399;
+  }
+}
+
+/* Firefox 无 ::-webkit-scrollbar：退而用 thin（无法精确到 px） */
+@supports not selector(::-webkit-scrollbar) {
   .vxe-table--scroll-x-handle,
   .vxe-table--scroll-y-handle {
     scrollbar-width: thin;
-    scrollbar-color: #DDDEE0 transparent;
-  }
-  .vxe-table--scroll-x-handle::-webkit-scrollbar-thumb,
-  .vxe-table--scroll-y-handle::-webkit-scrollbar-thumb {
-    background: #DDDEE0;
+    scrollbar-color: #c0c4cc transparent;
   }
 }
 
@@ -603,11 +623,28 @@
       }
     }
   }
+  /**
+   * 滚动条布局：
+   * - virtual 默认 0，由 JS（scrollbarConfig）写入真实高度/宽度（禁止 !important 压死）
+   * - handle 粗细由 --adtec-vxe-scrollbar-size 控制（默认 8px）
+   */
   .vxe-table--scroll-x-virtual {
-    height: 0 !important;
+    height: 0;
   }
   .vxe-table--scroll-y-virtual {
-    width: 0px !important;
+    width: 0;
+  }
+  /**
+   * 有滚动条时按 8px 预留占位：
+   * scroll-x/y-handle 是 position:absolute 浮层，appearance:none 后为 8px 实体条。
+   * 若虚拟条 height/width 为 0，绝对定位的滚动条会溢出盖住最后一行/最右列。
+   * 仅在 is--scroll-x/y（确有溢出）时预留，空表不留缝。
+   */
+  &.is--scroll-x .vxe-table--scroll-x-virtual {
+    height: var(--adtec-vxe-scrollbar-size, 8px);
+  }
+  &.is--scroll-y .vxe-table--scroll-y-virtual {
+    width: var(--adtec-vxe-scrollbar-size, 8px);
   }
   .vxe-table--scroll-x-virtual,
   .vxe-table--scroll-y-virtual {
@@ -635,10 +672,10 @@
   .vxe-table--scroll-x-handle {
     overflow-y: hidden;
     overflow-x: scroll;
-    height: 8px;
+    height: var(--adtec-vxe-scrollbar-size, 8px);
   }
   .vxe-table--scroll-x-wrapper {
-    height: 8px;
+    height: 100%;
   }
   .vxe-table--scroll-y-handle,
   .vxe-table--scroll-y-wrapper {
@@ -650,7 +687,7 @@
   .vxe-table--scroll-y-handle {
     overflow-y: scroll;
     overflow-x: hidden;
-    width: 8px;
+    width: var(--adtec-vxe-scrollbar-size, 8px);
     height: 100%;
   }
   .vxe-table--scroll-x-space {
@@ -925,10 +962,23 @@
     border-collapse: separate;
     table-layout: fixed;
   }
-  .vxe-table--render-wrapper{
-    height:100%;
+  .vxe-table--render-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+    /**
+     * 项目 height:100% 表格必需：layout 用 flex 收缩，
+     * 把底部留给官方 scroll-x-virtual 预留区，避免 100%+18px 被裁掉。
+     */
     .vxe-table--layout-wrapper {
-      height:100%
+      flex: 1 1 auto;
+      min-height: 0;
+      height: auto;
+    }
+    .vxe-table--scroll-x-virtual {
+      flex: 0 0 auto;
     }
   }
   &:not(.is--empty) {
@@ -1211,7 +1261,7 @@
         &::after {
           bottom: 0;
           height: calc(100% + var(--vxe-ui-table-border-width));
-          //border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+          border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
         }
       }
     }