@vue-ui-kit/ant 2.5.2 → 2.5.3

package/dist/style.css

@@ -1,4 +1,61 @@
 @charset "UTF-8";
+/**
+ * EVirtTable（PCanvasGrid / PCanvasTable）主题变量
+ * - 与 PGrid 共用 --p-* 语义变量，保证 Canvas 表格与 DOM 表格同色
+ * - 无对应 --p-* 的项使用 storybook theme.css 默认值
+ * - e-virt-table 初始化时通过 Config.updateCssVar() 读取 --evt-*
+ */
+:root {
+  --evt-border-color: var(--p-border-color, #d9d9d9);
+  --evt-header-bg-color: var(--p-table-thead-bg-color, #f2f3f6);
+  --evt-body-bg-color: var(--p-table-row-bg-color, #fff);
+  --evt-stripe-color: var(--p-striped-bg-color, #f2f3f6);
+  --evt-highlight-hover-row-color: var(--p-table-row-hover-bg-color, #e6e7ea);
+  --evt-select-border-color: var(--p-primary-color, #4096ff);
+  --evt-sort-icon-color: var(--p-primary-color, #4096ff);
+  --evt-required-color: var(--p-danger-color, #f5222d);
+  --evt-error-tip-color: var(--p-danger-color, #f5222d);
+  --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 默认值） */
+  --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;
+}
+
+/* 夜间：背景随 --p-* 传递，仅覆盖 Canvas 专用色 */
+html[theme-mode=dark],
+:root[data-theme=dark],
+:root.dark {
+  --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;
+  --evt-edit-bg-color: #141414;
+  --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;
+}
+
 .p-pane {
   background-color: var(--p-theme-bg, #fff);
   padding: 16px;

package/dist/style.scss

@@ -1,3 +1,5 @@
+@use 'canvas-theme';
+
 .p-pane {
   background-color: var(--p-theme-bg, #fff);
   padding: 16px;

package/package.json

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

package/src/packages/components/PCanvasGrid.vue

@@ -1,5 +1,9 @@
-<script lang="ts" setup generic="D extends Recordable = Recordable, F extends Recordable = Recordable"
-  name="PCanvasGrid">
+<script
+  lang="ts"
+  setup
+  generic="D extends Recordable = Recordable, F extends Recordable = Recordable"
+  name="PCanvasGrid"
+>
   import {
     CanvasColumnProps,
     PCanvasGridProps,
@@ -95,13 +99,13 @@
   const pg = computed(() =>
     mode.value === 'pagination'
       ? {
-        current: pagination.page,
-        total: totalCount.value,
-        pageSize: pagination.size,
-        responsive: false,
-        showSizeChanger: true,
-        showTotal: (total: number) => `共${total}条数据`,
-      }
+          current: pagination.page,
+          total: totalCount.value,
+          pageSize: pagination.size,
+          responsive: false,
+          showSizeChanger: true,
+          showTotal: (total: number) => `共${total}条数据`,
+        }
       : false,
   );
 
@@ -184,30 +188,30 @@
   const handleResponse = (response: Recordable, pathConfig?: ResponsePathConfig<D>) =>
     pathConfig
       ? {
-        list: isString(pathConfig.list)
-          ? get(response, pathConfig.list)
-          : isFunction(pathConfig.list)
-            ? pathConfig.list(response)
-            : undefined,
-        total: isString(pathConfig.total)
-          ? get(response, pathConfig.total)
-          : isFunction(pathConfig.total)
-            ? pathConfig.total(response)
-            : undefined,
-        result: isString(pathConfig.result)
-          ? get(response, pathConfig.result)
-          : isFunction(pathConfig.result)
-            ? pathConfig.result(response)
-            : undefined,
-        message: isString(pathConfig.message)
-          ? get(response, pathConfig.message)
-          : isFunction(pathConfig.message)
-            ? pathConfig.message(response)
-            : undefined,
-      }
+          list: isString(pathConfig.list)
+            ? get(response, pathConfig.list)
+            : isFunction(pathConfig.list)
+              ? pathConfig.list(response)
+              : undefined,
+          total: isString(pathConfig.total)
+            ? get(response, pathConfig.total)
+            : isFunction(pathConfig.total)
+              ? pathConfig.total(response)
+              : undefined,
+          result: isString(pathConfig.result)
+            ? get(response, pathConfig.result)
+            : isFunction(pathConfig.result)
+              ? pathConfig.result(response)
+              : undefined,
+          message: isString(pathConfig.message)
+            ? get(response, pathConfig.message)
+            : isFunction(pathConfig.message)
+              ? pathConfig.message(response)
+              : undefined,
+        }
       : {
-        list: response,
-      };
+          list: response,
+        };
   const toolBtnClick = (code: string) => {
     emit('toolbarButtonClick', {
       data: tableData.value,
@@ -329,31 +333,31 @@
     const firstColumn: CanvasColumnProps<D> =
       staticConfig.value.selectable && staticConfig.value.tree
         ? {
-          type: 'selection-tree',
-          width: 40,
-          widthFillDisable: true,
-          title: '',
-        }
-        : staticConfig.value.selectable
-          ? {
-            type: 'selection',
+            type: 'selection-tree',
             width: 40,
             widthFillDisable: true,
             title: '',
           }
-          : staticConfig.value.tree
-            ? {
-              type: 'tree',
+        : staticConfig.value.selectable
+          ? {
+              type: 'selection',
               width: 40,
               widthFillDisable: true,
               title: '',
             }
+          : staticConfig.value.tree
+            ? {
+                type: 'tree',
+                width: 40,
+                widthFillDisable: true,
+                title: '',
+              }
             : {
-              type: 'index',
-              width: 40,
-              widthFillDisable: true,
-              title: '',
-            };
+                type: 'index',
+                width: 40,
+                widthFillDisable: true,
+                title: '',
+              };
     return [firstColumn, ...columns.value];
   });
   const resetQueryFormData = (lazy?: boolean) => {
@@ -531,40 +535,66 @@
   });
 </script>
 <template>
-  <div ref="boxEl" :class="[
-    'p-wrapper flex flex-col gap-8px overflow-y-auto',
-    autoBoxSize ? 'min-h-0 min-w-0 flex-1 w-full' : 'h-full',
-  ]" v-bind="attrs">
+  <div
+    ref="boxEl"
+    :class="[
+      'p-wrapper flex flex-col gap-8px overflow-y-auto',
+      autoBoxSize ? 'min-h-0 min-w-0 flex-1 w-full' : 'h-full',
+    ]"
+    v-bind="attrs"
+  >
     <div v-if="mode === 'bad'">请检查配置</div>
     <template v-else>
-      <div v-if="formConfig?.items?.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
-        class="p-pane p-form-wrapper" ref="pFormWrapper">
+      <div
+        v-if="formConfig?.items?.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
+        class="p-pane p-form-wrapper"
+        ref="pFormWrapper"
+      >
         <a-spin :spinning="loading.form">
-          <a-form :key="renderFormKey" ref="formEl" :model="queryFormData" v-bind="fc" @submit="handleFormSubmit">
+          <a-form
+            :key="renderFormKey"
+            ref="formEl"
+            :model="queryFormData"
+            v-bind="fc"
+            @submit="handleFormSubmit"
+          >
             <a-row :gutter="[6, 12]">
-              <p-form-col v-for="(item, idx) in formConfig!.items" :key="`_col_${item.field || idx}`"
-                :form-data="queryFormData" :item="item as PFormItemProps<Partial<F>>"
-                @reset="resetQueryFormData(props.lazyReset)" />
+              <p-form-col
+                v-for="(item, idx) in formConfig!.items"
+                :key="`_col_${item.field || idx}`"
+                :form-data="queryFormData"
+                :item="item as PFormItemProps<Partial<F>>"
+                @reset="resetQueryFormData(props.lazyReset)"
+              />
             </a-row>
           </a-form>
         </a-spin>
       </div>
-      <div v-if="toolbarConfig"
-        class="p-canvas-toolbar-wrapper flex items-center w-full justify-between p-theme-bg pt-8px px-16px">
+      <div
+        v-if="toolbarConfig"
+        class="p-canvas-toolbar-wrapper flex items-center w-full justify-between p-theme-bg pt-8px px-16px"
+      >
         <div class="flex items-center flex-1 gap-4px">
           <template v-if="toolbarConfig.buttons && toolbarConfig.buttons.length > 0">
             <template v-for="(btn, idx) in toolbarConfig.buttons" :key="idx">
               <a-dropdown v-if="btn.dropdowns && btn.dropdowns.length">
                 <template #overlay>
                   <a-menu @click="toolBtnMenuClick">
-                    <a-menu-item v-for="sub in btn.dropdowns" :key="sub.code">{{ sub.content }}
+                    <a-menu-item v-for="sub in btn.dropdowns" :key="sub.code"
+                      >{{ sub.content }}
                     </a-menu-item>
                   </a-menu>
                 </template>
-                <a-button :type="btn.type" :size="btn.size ?? 'middle'"
+                <a-button
+                  :type="btn.type"
+                  :size="btn.size ?? 'middle'"
                   :disabled="toolbarConfig.disabled || btn.disabled"
-                  :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])" :danger="btn.danger"
-                  :shape="btn.shape" :ghost="btn.ghost" :block="btn.block">
+                  :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
+                  :danger="btn.danger"
+                  :shape="btn.shape"
+                  :ghost="btn.ghost"
+                  :block="btn.block"
+                >
                   <div class="flex items-center gap-4px">
                     <Icon v-if="btn.icon" :icon="btn.icon" />
                     <template v-if="btn.content && isStringContent(renderContent(btn.content))">
@@ -575,10 +605,18 @@
                   </div>
                 </a-button>
               </a-dropdown>
-              <a-button v-else-if="btn.code" :type="btn.type" :size="btn.size ?? 'middle'"
+              <a-button
+                v-else-if="btn.code"
+                :type="btn.type"
+                :size="btn.size ?? 'middle'"
                 :disabled="toolbarConfig.disabled || btn.disabled"
-                :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])" :danger="btn.danger"
-                :shape="btn.shape" :ghost="btn.ghost" :block="btn.block" @click="debounceToolBtnClick(btn.code)">
+                :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
+                :danger="btn.danger"
+                :shape="btn.shape"
+                :ghost="btn.ghost"
+                :block="btn.block"
+                @click="debounceToolBtnClick(btn.code)"
+              >
                 <div class="flex items-center gap-4px">
                   <Icon v-if="btn.icon" :icon="btn.icon" />
                   <template v-if="btn.content && isStringContent(renderContent(btn.content))">
@@ -593,10 +631,19 @@
         </div>
         <span class="flex items-center gap-4px">
           <template v-if="toolbarConfig.tools && toolbarConfig.tools.length > 0">
-            <a-button v-for="(tool, idx) in toolbarConfig.tools" :key="idx" :type="tool.type"
-              :size="tool.size ?? 'middle'" :disabled="toolbarConfig.disabled || tool.disabled" :danger="tool.danger"
-              :shape="tool.shape" :ghost="tool.ghost" :block="tool.block" @click="debounceToolToolClick(tool.code)"
-              :loading="loading.toolbar || (!!tool.code && codeLoadings[tool.code])">
+            <a-button
+              v-for="(tool, idx) in toolbarConfig.tools"
+              :key="idx"
+              :type="tool.type"
+              :size="tool.size ?? 'middle'"
+              :disabled="toolbarConfig.disabled || tool.disabled"
+              :danger="tool.danger"
+              :shape="tool.shape"
+              :ghost="tool.ghost"
+              :block="tool.block"
+              @click="debounceToolToolClick(tool.code)"
+              :loading="loading.toolbar || (!!tool.code && codeLoadings[tool.code])"
+            >
               <div class="flex items-center gap-4px">
                 <Icon v-if="tool.icon" :icon="tool.icon" />
                 <template v-if="tool.content && isStringContent(renderContent(tool.content))">
@@ -610,21 +657,38 @@
       </div>
       <div ref="tableWrapperEl" class="flex-1 h-0 min-h-0 flex flex-col p-inner-scroll">
         <div ref="tableBodyEl" class="flex-1 min-h-0 overflow-hidden">
-          <p-canvas-table ref="canvasTableRef" :columns="finalColumns" :config="{
-            ...propsWithDefaults.config,
-            HEIGHT: renderHeight,
-          }" :data="tableData" :loading="loading.table" @selection-change="handleSelectionChange">
+          <p-canvas-table
+            ref="canvasTableRef"
+            :columns="finalColumns"
+            :config="{
+              ...propsWithDefaults.config,
+              HEIGHT: renderHeight,
+            }"
+            :data="tableData"
+            :loading="loading.table"
+            @selection-change="handleSelectionChange"
+          >
             <template v-for="(_, name) in $slots" #[name]="slotProps">
               <slot :name="name" v-bind="slotProps"></slot>
             </template>
           </p-canvas-table>
         </div>
         <div ref="tableFooterEl" class="flex-shrink-0">
-          <div v-if="staticConfig?.selectable && staticConfig.showCount" class="w-full text-slate-5 pl-4">
+          <div
+            v-if="staticConfig?.selectable && staticConfig.showCount"
+            class="w-full text-slate-5 pl-4"
+          >
             已选：{{ selectedRowKeys.length }}
           </div>
-          <a-pagination class="p-canvas-pagination" v-if="mode === 'pagination'" size="small" :current="pagination.page"
-            :page-size="pagination.size" :total="totalCount" @change="handleTableChange" />
+          <a-pagination
+            class="p-canvas-pagination"
+            v-if="mode === 'pagination'"
+            size="small"
+            :current="pagination.page"
+            :page-size="pagination.size"
+            :total="totalCount"
+            @change="handleTableChange"
+          />
         </div>
       </div>
     </template>

package/src/packages/components/PCanvasTable.vue

@@ -12,7 +12,7 @@
     OverlayerContainer,
     FormatterMethod,
   } from 'e-virt-table';
-  import { ref, onMounted, computed, useAttrs, watch } from 'vue';
+  import { ref, onMounted, onUnmounted, computed, useAttrs, watch } from 'vue';
   import { EventCallback } from 'e-virt-table/dist/lib/EventBus';
   import { isArray, isEqual, isFunction, isString, omit } from 'xe-utils';
   import renderStore from '@/store/renderStore';
@@ -20,8 +20,10 @@
   import type { CanvasColumnProps, CanvasTableProps, FormatterFunc, CellRender } from '#/antProxy';
   import { v4 as uuidv4 } from 'uuid';
   import { antFormatters } from '@/utils/AFormatters';
+  import { bindCanvasTableThemeSync, syncCanvasThemeCssVars, type CanvasTableThemeHandle } from '@/utils/canvasTableTheme';
   import { getCanvasTableDefaults } from '@/utils/config';
   import { watchPreviousDeep } from '@/utils/core';
+  import '../styles/canvas-theme.scss';
 
   const emit = defineEmits<{
     (e: 'change', value: any[]): void; // 需要默认实现change，不能动态绑定
@@ -45,6 +47,7 @@
     },
   }));
   let eVirtTable: EVirtTable | null = null;
+  let themeSyncHandle: CanvasTableThemeHandle | null = null;
   const attrs = useAttrs();
   const eVirtTableRef = ref(null);
   const eVirtTableEditorRef = ref(null);
@@ -150,6 +153,7 @@
     if (!eVirtTableRef.value) {
       return;
     }
+    syncCanvasThemeCssVars();
     eVirtTable = new EVirtTable(eVirtTableRef.value, {
       config: propsWithDefaults.value.config,
       columns: props.columns.map((col) => parseToEVirtColumn(col)),
@@ -190,6 +194,13 @@
       emit('selectionChange', selection);
     });
     emit('ready', eVirtTable);
+    themeSyncHandle = bindCanvasTableThemeSync({
+      getTable: () => eVirtTable,
+      getConfig: () => propsWithDefaults.value.config,
+    });
+  });
+  onUnmounted(() => {
+    themeSyncHandle?.disconnect();
   });
   function saveCellValue(value) {
     if (!eVirtTable || !editorCell.value) {

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

@@ -0,0 +1,57 @@
+/**
+ * EVirtTable（PCanvasGrid / PCanvasTable）主题变量
+ * - 与 PGrid 共用 --p-* 语义变量，保证 Canvas 表格与 DOM 表格同色
+ * - 无对应 --p-* 的项使用 storybook theme.css 默认值
+ * - e-virt-table 初始化时通过 Config.updateCssVar() 读取 --evt-*
+ */
+:root {
+  --evt-border-color: var(--p-border-color, #d9d9d9);
+  --evt-header-bg-color: var(--p-table-thead-bg-color, #f2f3f6);
+  --evt-body-bg-color: var(--p-table-row-bg-color, #fff);
+  --evt-stripe-color: var(--p-striped-bg-color, #f2f3f6);
+  --evt-highlight-hover-row-color: var(--p-table-row-hover-bg-color, #e6e7ea);
+  --evt-select-border-color: var(--p-primary-color, #4096ff);
+  --evt-sort-icon-color: var(--p-primary-color, #4096ff);
+  --evt-required-color: var(--p-danger-color, #f5222d);
+  --evt-error-tip-color: var(--p-danger-color, #f5222d);
+  --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 默认值） */
+  --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;
+}
+
+/* 夜间：背景随 --p-* 传递，仅覆盖 Canvas 专用色 */
+html[theme-mode='dark'],
+:root[data-theme='dark'],
+:root.dark {
+  --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;
+  --evt-edit-bg-color: #141414;
+  --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;
+}

package/src/packages/styles/index.scss

@@ -1,3 +1,5 @@
+@use 'canvas-theme';
+
 .p-pane {
   background-color: var(--p-theme-bg, #fff);
   padding: 16px;

package/src/packages/utils/canvasTableTheme.ts

@@ -0,0 +1,111 @@
+import type EVirtTable from 'e-virt-table';
+import type { ConfigType } from 'e-virt-table';
+
+/** --p-* → --evt-* 桥接（与 canvas-theme.scss / storybook theme.css 对齐） */
+const P_TO_EVT_BRIDGE: ReadonlyArray<readonly [evt: string, p: string, fallback: string]> = [
+  ['--evt-border-color', '--p-border-color', '#d9d9d9'],
+  ['--evt-header-bg-color', '--p-table-thead-bg-color', '#f2f3f6'],
+  ['--evt-body-bg-color', '--p-table-row-bg-color', '#fff'],
+  ['--evt-stripe-color', '--p-striped-bg-color', '#f2f3f6'],
+  ['--evt-highlight-hover-row-color', '--p-table-row-hover-bg-color', '#e6e7ea'],
+  ['--evt-select-border-color', '--p-primary-color', '#4096ff'],
+  ['--evt-sort-icon-color', '--p-primary-color', '#4096ff'],
+  ['--evt-required-color', '--p-danger-color', '#f5222d'],
+  ['--evt-error-tip-color', '--p-danger-color', '#f5222d'],
+  ['--evt-error-tip-icon-color', '--p-danger-color', '#f5222d'],
+  ['--evt-readonly-color', '--p-table-row-bg-color', '#fff'],
+  ['--evt-scroller-track-color', '--p-table-row-bg-color', '#fff'],
+];
+
+/** Canvas 专用色（无 --p-* 对应项，storybook 默认值） */
+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',
+  '--evt-edit-bg-color': '#141414',
+  '--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',
+};
+
+export function isDarkThemeRoot(el: HTMLElement = document.documentElement): boolean {
+  return (
+    el.getAttribute('theme-mode') === 'dark' ||
+    el.getAttribute('data-theme') === 'dark' ||
+    el.classList.contains('dark')
+  );
+}
+
+/**
+ * 将 --p-* 解析值写入 --evt-*，覆盖 e-virt-table 运行时注入的浅色默认值。
+ */
+export function syncCanvasThemeCssVars(el: HTMLElement = document.documentElement): void {
+  const computed = getComputedStyle(el);
+  for (const [evt, p, fallback] of P_TO_EVT_BRIDGE) {
+    const value = computed.getPropertyValue(p).trim() || fallback;
+    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);
+  }
+}
+
+export type CanvasTableThemeHandle = {
+  disconnect: () => void;
+  sync: () => void;
+};
+
+/**
+ * 同步 CSS 变量并 loadConfig，使 Canvas 表格与 PGrid 主题一致。
+ */
+export function bindCanvasTableThemeSync(options: {
+  getTable: () => EVirtTable | null;
+  getConfig: () => ConfigType;
+}): CanvasTableThemeHandle {
+  const sync = () => {
+    syncCanvasThemeCssVars();
+    const table = options.getTable();
+    if (table) {
+      table.loadConfig(options.getConfig());
+    }
+  };
+
+  const observer = new MutationObserver(sync);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['theme-mode', 'class', 'data-theme'],
+  });
+
+  sync();
+
+  return {
+    sync,
+    disconnect: () => observer.disconnect(),
+  };
+}