refactor: 升级框架

packages/effects/plugins/src/echarts/echarts.ts

@@ -3,13 +3,16 @@ import type {
   BarSeriesOption,
   GaugeSeriesOption,
   LineSeriesOption,
+  MapSeriesOption,
 } from 'echarts/charts';
 import type {
   DatasetComponentOption,
+  GeoComponentOption,
   GridComponentOption,
   // 组件类型的定义后缀都为 ComponentOption
   TitleComponentOption,
   TooltipComponentOption,
+  VisualMapComponentOption,
 } from 'echarts/components';
 import type { ComposeOption } from 'echarts/core';
 
@@ -17,12 +20,14 @@ import {
   BarChart,
   GaugeChart,
   LineChart,
+  MapChart,
   PieChart,
   RadarChart,
 } from 'echarts/charts';
 import {
   // 数据集组件
   DatasetComponent,
+  GeoComponent,
   GridComponent,
   LegendComponent,
   TitleComponent,
@@ -30,6 +35,7 @@ import {
   TooltipComponent,
   // 内置数据转换器组件 (filter, sort)
   TransformComponent,
+  VisualMapComponent,
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { LabelLayout, UniversalTransition } from 'echarts/features';
@@ -40,10 +46,13 @@ export type ECOption = ComposeOption<
   | BarSeriesOption
   | DatasetComponentOption
   | GaugeSeriesOption
+  | GeoComponentOption
   | GridComponentOption
   | LineSeriesOption
+  | MapSeriesOption
   | TitleComponentOption
   | TooltipComponentOption
+  | VisualMapComponentOption
 >;
 
 // 注册必须的组件
@@ -63,6 +72,9 @@ echarts.use([
   CanvasRenderer,
   LegendComponent,
   ToolboxComponent,
+  VisualMapComponent,
+  MapChart,
+  GeoComponent,
 ]);
 
 export default echarts;

packages/effects/plugins/src/echarts/use-echarts.ts

@@ -19,6 +19,7 @@ import {
 } from '@vueuse/core';
 
 import echarts from './echarts';
+import chinaMap from './map/china.json';
 
 type EchartsUIType = typeof EchartsUI | undefined;
 
@@ -32,6 +33,18 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
   const { height, width } = useWindowSize();
   const resizeHandler: () => void = useDebounceFn(resize, 200);
 
+  echarts.registerMap('china', {
+    geoJSON: chinaMap as any,
+    specialAreas: {
+      china: {
+        left: 500,
+        top: 500,
+        width: 1000,
+        height: 1000,
+      },
+    },
+  });
+
   const getOptions = computed((): EChartsOption => {
     if (!isDark.value) {
       return {};

packages/effects/plugins/src/vxe-table/api.ts

@@ -26,14 +26,14 @@ function getDefaultState(): VxeGridProps {
   };
 }
 
-export class VxeGridApi {
+export class VxeGridApi<T extends Record<string, any> = any> {
   public formApi = {} as ExtendedFormApi;
 
   // private prevState: null | VxeGridProps = null;
-  public grid = {} as VxeGridInstance;
-  public state: null | VxeGridProps = null;
+  public grid = {} as VxeGridInstance<T>;
+  public state: null | VxeGridProps<T> = null;
 
-  public store: Store<VxeGridProps>;
+  public store: Store<VxeGridProps<T>>;
 
   private isMounted = false;
 
@@ -99,8 +99,8 @@ export class VxeGridApi {
 
   setState(
     stateOrFn:
-      | ((prev: VxeGridProps) => Partial<VxeGridProps>)
-      | Partial<VxeGridProps>,
+      | ((prev: VxeGridProps<T>) => Partial<VxeGridProps<T>>)
+      | Partial<VxeGridProps<T>>,
   ) {
     if (isFunction(stateOrFn)) {
       this.store.setState((prev) => {

packages/effects/plugins/src/vxe-table/index.ts

@@ -6,6 +6,7 @@ export { default as VbenVxeGrid } from './use-vxe-grid.vue';
 export type {
   VxeGridListeners,
   VxeGridProps,
+  VxeGridPropTypes,
   VxeTableInstance,
   VxeToolbarInstance,
 } from 'vxe-table';

packages/effects/plugins/src/vxe-table/types.ts

@@ -9,7 +9,7 @@ import type { Ref } from 'vue';
 
 import type { ClassType, DeepPartial } from '@vben/types';
 
-import type { VbenFormProps } from '@vben-core/form-ui';
+import type { BaseFormComponentType, VbenFormProps } from '@vben-core/form-ui';
 
 import type { VxeGridApi } from './api';
 
@@ -35,7 +35,11 @@ export interface SeparatorOptions {
   show?: boolean;
   backgroundColor?: string;
 }
-export interface VxeGridProps {
+
+export interface VxeGridProps<
+  T extends Record<string, any> = any,
+  D extends BaseFormComponentType = BaseFormComponentType,
+> {
   /**
    * 标题
    */
@@ -55,15 +59,15 @@ export interface VxeGridProps {
   /**
    * vxe-grid 配置
    */
-  gridOptions?: DeepPartial<VxeTableGridOptions>;
+  gridOptions?: DeepPartial<VxeTableGridOptions<T>>;
   /**
    * vxe-grid 事件
    */
-  gridEvents?: DeepPartial<VxeGridListeners>;
+  gridEvents?: DeepPartial<VxeGridListeners<T>>;
   /**
    * 表单配置
    */
-  formOptions?: VbenFormProps;
+  formOptions?: VbenFormProps<D>;
   /**
    * 显示搜索表单
    */
@@ -74,9 +78,12 @@ export interface VxeGridProps {
   separator?: boolean | SeparatorOptions;
 }
 
-export type ExtendedVxeGridApi = VxeGridApi & {
-  useStore: <T = NoInfer<VxeGridProps>>(
-    selector?: (state: NoInfer<VxeGridProps>) => T,
+export type ExtendedVxeGridApi<
+  D extends Record<string, any> = any,
+  F extends BaseFormComponentType = BaseFormComponentType,
+> = VxeGridApi<D> & {
+  useStore: <T = NoInfer<VxeGridProps<D, F>>>(
+    selector?: (state: NoInfer<VxeGridProps<any, any>>) => T,
   ) => Readonly<Ref<T>>;
 };
 

packages/effects/plugins/src/vxe-table/use-vxe-grid.ts

@@ -1,3 +1,5 @@
+import type { BaseFormComponentType } from '@vben-core/form-ui';
+
 import type { ExtendedVxeGridApi, VxeGridProps } from './types';
 
 import { defineComponent, h, onBeforeUnmount } from 'vue';
@@ -7,16 +9,19 @@ import { useStore } from '@vben-core/shared/store';
 import { VxeGridApi } from './api';
 import VxeGrid from './use-vxe-grid.vue';
 
-export function useVbenVxeGrid(options: VxeGridProps) {
+export function useVbenVxeGrid<
+  T extends Record<string, any> = any,
+  D extends BaseFormComponentType = BaseFormComponentType,
+>(options: VxeGridProps<T, D>) {
   // const IS_REACTIVE = isReactive(options);
   const api = new VxeGridApi(options);
-  const extendedApi: ExtendedVxeGridApi = api as ExtendedVxeGridApi;
+  const extendedApi: ExtendedVxeGridApi<T, D> = api as ExtendedVxeGridApi<T, D>;
   extendedApi.useStore = (selector) => {
     return useStore(api.store, selector);
   };
 
   const Grid = defineComponent(
-    (props: VxeGridProps, { attrs, slots }) => {
+    (props: VxeGridProps<T>, { attrs, slots }) => {
       onBeforeUnmount(() => {
         api.unmount();
       });

packages/effects/plugins/src/vxe-table/use-vxe-grid.vue

@@ -59,6 +59,7 @@ const FORM_SLOT_PREFIX = 'form-';
 
 const TOOLBAR_ACTIONS = 'toolbar-actions';
 const TOOLBAR_TOOLS = 'toolbar-tools';
+const TABLE_TITLE = 'table-title';
 
 const gridRef = useTemplateRef<VxeGridInstance>('gridRef');
 
@@ -129,7 +130,7 @@ const [Form, formApi] = useTableForm({
 });
 
 const showTableTitle = computed(() => {
-  return !!slots.tableTitle?.() || tableTitle.value;
+  return !!slots[TABLE_TITLE]?.() || tableTitle.value;
 });
 
 const showToolbar = computed(() => {
@@ -277,6 +278,15 @@ const delegatedFormSlots = computed(() => {
   return resultSlots.map((key) => key.replace(FORM_SLOT_PREFIX, ''));
 });
 
+const showDefaultEmpty = computed(() => {
+  // 检查是否有原生的 VXE Table 空状态配置
+  const hasEmptyText = options.value.emptyText !== undefined;
+  const hasEmptyRender = options.value.emptyRender !== undefined;
+
+  // 如果有原生配置，就不显示默认的空状态
+  return !hasEmptyText && !hasEmptyRender;
+});
+
 async function init() {
   await nextTick();
   const globalGridConfig = VxeUI?.getConfig()?.grid ?? {};
@@ -458,7 +468,7 @@ onUnmounted(() => {
         </slot>
       </template>
       <!-- 统一控状态 -->
-      <template #empty>
+      <template v-if="showDefaultEmpty" #empty>
         <slot name="empty">
           <EmptyIcon class="mx-auto" />
           <div class="mt-2">{{ $t('common.noData') }}</div>