@vue-ui-kit/ant 2.5.8 → 2.5.10

package/dist/style.css

@@ -18,11 +18,16 @@
   --evt-error-tip-icon-color: var(--p-danger-color, #f5222d);
   --evt-readonly-color: var(--p-table-row-bg-color, #fff);
   --evt-scroller-track-color: var(--p-table-row-bg-color, #fff);
-  /* Canvas 专用（白天 = storybook 默认值） */
+  /* Canvas 文字色：storybook 默认；业务项目请在 variables 映射 --primary-text-color 等覆盖 */
   --evt-header-text-color: #1d2129;
   --evt-body-text-color: #4e5969;
   --evt-footer-text-color: #4e5969;
   --evt-readonly-text-color: #4e5969;
+  /* 默认 14px。font 简写必须是「字重 字号 字体」；表头 bold、表体 normal */
+  --evt-header-font: bold 14px 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
+  --evt-body-font: normal 14px 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
   --evt-scroller-color: #dee0e3;
   --evt-scroller-focus-color: #bbbec4;
   --evt-edit-bg-color: #fcf6ed;
@@ -56,6 +61,22 @@ html[theme-mode=dark],
   --evt-context-menu-item-hover-bg-color: #414243;
 }
 
+/* #region EVirtTable overlayer cell */
+.canvas-cell {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  padding: 0 8px;
+}
+
+/* e-virt-table 给 .canvas-cell 写死 userSelect:none；不改单元格本身，只放开插槽后代以便框选文字 */
+.canvas-cell * {
+  -webkit-user-select: text !important;
+  user-select: text !important;
+}
+
+/* #endregion */
 .p-pane {
   background-color: var(--p-theme-bg, #fff);
   padding: 16px;
@@ -415,16 +436,6 @@ html[theme-mode=dark],
   border-color: var(--p-border-light-color, #f0f0f0);
 }
 
-/* #endregion */
-/* #region EVirtTable */
-.canvas-cell {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: start;
-  padding: 0 8px;
-}
-
 /* #endregion */
 /**/
 .p-content-align-right.ant-form-item .ant-form-item-control-input-content {

package/dist/style.scss

@@ -405,16 +405,6 @@
 }
 /* #endregion */
 
-/* #region EVirtTable */
-.canvas-cell {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: start;
-  padding: 0 8px;
-}
-/* #endregion */
-
 @each $align in right center {
   /**/
   .p-content-align-#{$align}.ant-form-item .ant-form-item-control-input-content {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "2.5.8",
+  "version": "2.5.10",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/src/packages/components/PCanvasGrid.vue

@@ -108,8 +108,9 @@
         }
       : false,
   );
+  // 必须用 .value：模板里 pageConfig?.pageSizes 会因可选链绕过 Ref 解包，读到 undefined
   const pageSizeOptions = computed(() =>
-    (pageConfig.value?.pageSizes ?? [10, 20, 50, 100, 200]).map(String),
+    (pageConfig.value?.pageSizes ?? [10, 20, 50, 100]).map(String),
   );
 
   const fc = computed(() => omit({ labelCol: defaultLabelCol, ...formConfig.value }, ['items']));

package/src/packages/components/PCanvasTable.vue

@@ -46,8 +46,9 @@
     config: {
       AUTO_ROW_HEIGHT: true,
       DISABLED: true, // 内部写死的默认配置
-      ...canvasTableDefaults, // 全局配置
-      ...props.config, // 用户传入的配置
+      BORDER_RADIUS: 4,
+      ...canvasTableDefaults, // 全局配置（含 setUIKitConfig）
+      ...props.config, // 用户传入的配置，可覆盖默认
     },
   }));
   let eVirtTable: EVirtTable | null = null;
@@ -62,6 +63,16 @@
   const overlayerView = ref<OverlayerContainer>();
   const cacheEditorSlotColumns: Record<string, CanvasColumnProps<T>> = {};
   const cacheEditorRenders: Record<string, CellRender> = {};
+
+  /** e-virt-table CSS 写死 stage border-radius:8px，需按 config.BORDER_RADIUS 覆盖 */
+  const applyBorderRadius = (config = propsWithDefaults.value.config) => {
+    const radius = config?.BORDER_RADIUS ?? 4;
+    const root = eVirtTableRef.value as HTMLElement | null;
+    const stage = root?.querySelector?.('.e-virt-table-stage') as HTMLElement | null;
+    if (stage) {
+      stage.style.borderRadius = `${radius}px`;
+    }
+  };
   // 编辑器样式
   const editorStyle = computed(() => {
     const cell = editorCell.value;
@@ -180,7 +191,6 @@
     });
     eVirtTable.on('overlayerChange', (overlayer: OverlayerContainer) => {
       overlayerView.value = overlayer;
-      console.log('overlayerChange', overlayer);
     });
     eVirtTable.on('startEdit', (cell) => {
       editorCell.value = cell;
@@ -198,6 +208,7 @@
       emit('selectionChange', selection);
     });
     emit('ready', eVirtTable);
+    applyBorderRadius();
     themeSyncHandle = bindCanvasTableThemeSync({
       getTable: () => eVirtTable,
       getConfig: () => propsWithDefaults.value.config,
@@ -236,6 +247,7 @@
     () => propsWithDefaults.value.config,
     (newValue) => {
       eVirtTable?.loadConfig(newValue);
+      applyBorderRadius(newValue);
     },
     { deep: true },
   );

package/src/packages/styles/canvas-theme.scss

@@ -18,11 +18,16 @@
   --evt-readonly-color: var(--p-table-row-bg-color, #fff);
   --evt-scroller-track-color: var(--p-table-row-bg-color, #fff);
 
-  /* Canvas 专用（白天 = storybook 默认值） */
+  /* Canvas 文字色：storybook 默认；业务项目请在 variables 映射 --primary-text-color 等覆盖 */
   --evt-header-text-color: #1d2129;
   --evt-body-text-color: #4e5969;
   --evt-footer-text-color: #4e5969;
   --evt-readonly-text-color: #4e5969;
+  /* 默认 14px。font 简写必须是「字重 字号 字体」；表头 bold、表体 normal */
+  --evt-header-font: bold 14px 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
+  --evt-body-font: normal 14px 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
   --evt-scroller-color: #dee0e3;
   --evt-scroller-focus-color: #bbbec4;
   --evt-edit-bg-color: #fcf6ed;
@@ -55,3 +60,19 @@ html[theme-mode='dark'],
   --evt-context-menu-text-color: #cfd3dc;
   --evt-context-menu-item-hover-bg-color: #414243;
 }
+
+/* #region EVirtTable overlayer cell */
+.canvas-cell {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  padding: 0 8px;
+}
+
+/* e-virt-table 给 .canvas-cell 写死 userSelect:none；不改单元格本身，只放开插槽后代以便框选文字 */
+.canvas-cell * {
+  -webkit-user-select: text !important;
+  user-select: text !important;
+}
+/* #endregion */

package/src/packages/styles/index.scss

@@ -405,16 +405,6 @@
 }
 /* #endregion */
 
-/* #region EVirtTable */
-.canvas-cell {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: start;
-  padding: 0 8px;
-}
-/* #endregion */
-
 @each $align in right center {
   /**/
   .p-content-align-#{$align}.ant-form-item .ant-form-item-control-input-content {

package/src/packages/utils/canvasTableTheme.ts

@@ -18,39 +18,38 @@ const P_TO_EVT_BRIDGE: ReadonlyArray<readonly [evt: string, p: string, fallback:
 ];
 
 /**
- * 消费方在 CSS 中声明的 --evt-checkbox-*（如 variables.scss 映射 --checked-color 等）。
- * 同步到 inline 以覆盖 e-virt-table 运行时注入的默认值。
+ * 消费方在 CSS 中声明的 --evt-*（如 variables.scss 映射项目色）。
+ * 同步到 inline 以覆盖 e-virt-table 运行时注入 / 下方 dedicated 默认值。
+ * 文字色勿写入 LIGHT/DARK_EVT_DEDICATED，否则会盖掉项目映射。
  */
-const EVT_CHECKBOX_FROM_CSS: readonly string[] = [
+const EVT_OVERRIDE_FROM_CSS: readonly string[] = [
   '--evt-checkbox-color',
   '--evt-checkbox-uncheck-color',
   '--evt-checkbox-disabled-color',
   '--evt-checkbox-check-disabled-color',
+  '--evt-header-text-color',
+  '--evt-body-text-color',
+  '--evt-footer-text-color',
+  '--evt-readonly-text-color',
+  '--evt-editor-text-color',
+  '--evt-context-menu-text-color',
+  '--evt-header-font',
+  '--evt-body-font',
 ];
 
-/** Canvas 专用色（无 --p-* 对应项，storybook 默认值） */
+/** Canvas 专用色（无 --p-* 对应项；文字色见 canvas-theme.scss / 消费方覆盖） */
 const LIGHT_EVT_DEDICATED: Readonly<Record<string, string>> = {
-  '--evt-header-text-color': '#1d2129',
-  '--evt-body-text-color': '#4e5969',
-  '--evt-footer-text-color': '#4e5969',
-  '--evt-readonly-text-color': '#4e5969',
   '--evt-scroller-color': '#dee0e3',
   '--evt-scroller-focus-color': '#bbbec4',
   '--evt-edit-bg-color': '#fcf6ed',
   '--evt-footer-bg-color': '#fafafa',
   '--evt-autofill-point-border-color': '#fff',
   '--evt-editor-bg-color': '#fff',
-  '--evt-editor-text-color': '#333',
   '--evt-context-menu-bg-color': '#fff',
-  '--evt-context-menu-text-color': '#333',
   '--evt-context-menu-item-hover-bg-color': '#f5f5f5',
 };
 
 const DARK_EVT_DEDICATED: Readonly<Record<string, string>> = {
-  '--evt-header-text-color': '#a3a6ad',
-  '--evt-body-text-color': '#cfd3dc',
-  '--evt-footer-text-color': '#cfd3dc',
-  '--evt-readonly-text-color': '#a3a6ad',
   '--evt-scroller-color': '#414243',
   '--evt-scroller-track-color': '#141414',
   '--evt-scroller-focus-color': '#a3a6ad',
@@ -58,9 +57,7 @@ const DARK_EVT_DEDICATED: Readonly<Record<string, string>> = {
   '--evt-footer-bg-color': '#262727',
   '--evt-autofill-point-border-color': '#a3a6ad',
   '--evt-editor-bg-color': '#434343',
-  '--evt-editor-text-color': '#cfd3dc',
   '--evt-context-menu-bg-color': '#141414',
-  '--evt-context-menu-text-color': '#cfd3dc',
   '--evt-context-menu-item-hover-bg-color': '#414243',
 };
 
@@ -81,16 +78,18 @@ export function syncCanvasThemeCssVars(el: HTMLElement = document.documentElemen
     const value = computed.getPropertyValue(p).trim() || fallback;
     el.style.setProperty(evt, value);
   }
-  for (const evt of EVT_CHECKBOX_FROM_CSS) {
-    const value = computed.getPropertyValue(evt).trim();
-    if (value) {
-      el.style.setProperty(evt, value);
-    }
-  }
   const dedicated = isDarkThemeRoot(el) ? DARK_EVT_DEDICATED : LIGHT_EVT_DEDICATED;
   for (const [evt, value] of Object.entries(dedicated)) {
     el.style.setProperty(evt, value);
   }
+  // 放在 dedicated 之后：消费方 CSS（如 --primary-text-color）优先
+  for (const evt of EVT_OVERRIDE_FROM_CSS) {
+    // 折叠换行/多空格：ctx.font 对含换行的 font 串可能解析失败
+    const value = computed.getPropertyValue(evt).trim().replace(/\s+/g, ' ');
+    if (value) {
+      el.style.setProperty(evt, value);
+    }
+  }
 }
 
 export type CanvasTableThemeHandle = {

package/src/packages/utils/config.ts

@@ -50,6 +50,7 @@ const defaultConfig: UIKitConfig = {
     DISABLED: true,
     ENABLE_FINDER: true,
     AUTO_ROW_HEIGHT: true,
+    BORDER_RADIUS: 4,
   },
   icon: {},
 };