@bscjc/webui 1.3.0 → 1.4.0

package/dist/types/components/JcColumnConfig/index.d.ts

@@ -0,0 +1,190 @@
+export declare const JcColumnConfig: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        table: {
+            type: import('vue').PropType<import('vxe-table').VxeTableInstance>;
+            default: null;
+        };
+        itemWidth: {
+            type: NumberConstructor;
+            default: number;
+        };
+        drawerWidth: {
+            type: StringConstructor;
+            default: string;
+        };
+        maxFixedCount: {
+            type: NumberConstructor;
+            default: number;
+        };
+        lockFieldList: {
+            type: import('vue').PropType<string[]>;
+            default: () => never[];
+        };
+        storagePrefix: {
+            type: StringConstructor;
+            default: string;
+        };
+        columnGroups: {
+            type: import('vue').PropType<import('./types').ColumnGroupConfig[]>;
+            default: () => never[];
+        };
+    }>> & Readonly<{
+        onChange?: ((config: import('./types').ColumnConfig[]) => any) | undefined;
+        onReset?: (() => any) | undefined;
+        onSaved?: ((config: import('./types').ColumnConfig[]) => any) | undefined;
+        "onWidth-change"?: ((params: {
+            field: string;
+            width: number;
+        }) => any) | undefined;
+    }>, {
+        openDrawer: () => void;
+        closeDrawer: () => void;
+        loadStoredConfig: () => Promise<void>;
+        resetToDefault: () => Promise<void>;
+        saveAndApply: () => Promise<void>;
+        onResizableChange: (params: import("vxe-table").VxeTableDefines.ResizableChangeEventParams) => void;
+        hasStoredConfig: () => boolean;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        change: (config: import('./types').ColumnConfig[]) => any;
+        reset: () => any;
+        saved: (config: import('./types').ColumnConfig[]) => any;
+        "width-change": (params: {
+            field: string;
+            width: number;
+        }) => any;
+    }, import('vue').PublicProps, {
+        table: import('vxe-table').VxeTableInstance;
+        lockFieldList: string[];
+        maxFixedCount: number;
+        storagePrefix: string;
+        itemWidth: number;
+        drawerWidth: string;
+        columnGroups: import('./types').ColumnGroupConfig[];
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        table: {
+            type: import('vue').PropType<import('vxe-table').VxeTableInstance>;
+            default: null;
+        };
+        itemWidth: {
+            type: NumberConstructor;
+            default: number;
+        };
+        drawerWidth: {
+            type: StringConstructor;
+            default: string;
+        };
+        maxFixedCount: {
+            type: NumberConstructor;
+            default: number;
+        };
+        lockFieldList: {
+            type: import('vue').PropType<string[]>;
+            default: () => never[];
+        };
+        storagePrefix: {
+            type: StringConstructor;
+            default: string;
+        };
+        columnGroups: {
+            type: import('vue').PropType<import('./types').ColumnGroupConfig[]>;
+            default: () => never[];
+        };
+    }>> & Readonly<{
+        onChange?: ((config: import('./types').ColumnConfig[]) => any) | undefined;
+        onReset?: (() => any) | undefined;
+        onSaved?: ((config: import('./types').ColumnConfig[]) => any) | undefined;
+        "onWidth-change"?: ((params: {
+            field: string;
+            width: number;
+        }) => any) | undefined;
+    }>, {
+        openDrawer: () => void;
+        closeDrawer: () => void;
+        loadStoredConfig: () => Promise<void>;
+        resetToDefault: () => Promise<void>;
+        saveAndApply: () => Promise<void>;
+        onResizableChange: (params: import("vxe-table").VxeTableDefines.ResizableChangeEventParams) => void;
+        hasStoredConfig: () => boolean;
+    }, {}, {}, {}, {
+        table: import('vxe-table').VxeTableInstance;
+        lockFieldList: string[];
+        maxFixedCount: number;
+        storagePrefix: string;
+        itemWidth: number;
+        drawerWidth: string;
+        columnGroups: import('./types').ColumnGroupConfig[];
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    table: {
+        type: import('vue').PropType<import('vxe-table').VxeTableInstance>;
+        default: null;
+    };
+    itemWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    drawerWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxFixedCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lockFieldList: {
+        type: import('vue').PropType<string[]>;
+        default: () => never[];
+    };
+    storagePrefix: {
+        type: StringConstructor;
+        default: string;
+    };
+    columnGroups: {
+        type: import('vue').PropType<import('./types').ColumnGroupConfig[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{
+    onChange?: ((config: import('./types').ColumnConfig[]) => any) | undefined;
+    onReset?: (() => any) | undefined;
+    onSaved?: ((config: import('./types').ColumnConfig[]) => any) | undefined;
+    "onWidth-change"?: ((params: {
+        field: string;
+        width: number;
+    }) => any) | undefined;
+}>, {
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    loadStoredConfig: () => Promise<void>;
+    resetToDefault: () => Promise<void>;
+    saveAndApply: () => Promise<void>;
+    onResizableChange: (params: import("vxe-table").VxeTableDefines.ResizableChangeEventParams) => void;
+    hasStoredConfig: () => boolean;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (config: import('./types').ColumnConfig[]) => any;
+    reset: () => any;
+    saved: (config: import('./types').ColumnConfig[]) => any;
+    "width-change": (params: {
+        field: string;
+        width: number;
+    }) => any;
+}, string, {
+    table: import('vxe-table').VxeTableInstance;
+    lockFieldList: string[];
+    maxFixedCount: number;
+    storagePrefix: string;
+    itemWidth: number;
+    drawerWidth: string;
+    columnGroups: import('./types').ColumnGroupConfig[];
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & import('vue').Plugin;
+export default JcColumnConfig;
+export type { ColumnGroupConfig } from './types';

package/dist/types/components/JcColumnConfig/index.vue.d.ts

@@ -0,0 +1,95 @@
+import { PropType } from 'vue';
+import { VxeTableInstance, VxeTableDefines } from 'vxe-table';
+import { ColumnConfig, ColumnGroupConfig } from './types';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    table: {
+        type: PropType<VxeTableInstance>;
+        default: null;
+    };
+    itemWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    drawerWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxFixedCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lockFieldList: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    storagePrefix: {
+        type: StringConstructor;
+        default: string;
+    };
+    columnGroups: {
+        type: PropType<ColumnGroupConfig[]>;
+        default: () => never[];
+    };
+}>, {
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    loadStoredConfig: () => Promise<void>;
+    resetToDefault: () => Promise<void>;
+    saveAndApply: () => Promise<void>;
+    onResizableChange: (params: VxeTableDefines.ResizableChangeEventParams) => void;
+    hasStoredConfig: () => boolean;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (config: ColumnConfig[]) => any;
+    reset: () => any;
+    saved: (config: ColumnConfig[]) => any;
+    "width-change": (params: {
+        field: string;
+        width: number;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    table: {
+        type: PropType<VxeTableInstance>;
+        default: null;
+    };
+    itemWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    drawerWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxFixedCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lockFieldList: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    storagePrefix: {
+        type: StringConstructor;
+        default: string;
+    };
+    columnGroups: {
+        type: PropType<ColumnGroupConfig[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{
+    onChange?: ((config: ColumnConfig[]) => any) | undefined;
+    onReset?: (() => any) | undefined;
+    onSaved?: ((config: ColumnConfig[]) => any) | undefined;
+    "onWidth-change"?: ((params: {
+        field: string;
+        width: number;
+    }) => any) | undefined;
+}>, {
+    table: VxeTableInstance;
+    lockFieldList: string[];
+    maxFixedCount: number;
+    storagePrefix: string;
+    itemWidth: number;
+    drawerWidth: string;
+    columnGroups: ColumnGroupConfig[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/types/components/JcColumnConfig/storage.d.ts

@@ -0,0 +1,25 @@
+import { StoredColumnConfig, TableColumnStorage } from './types';
+/**
+ * 获取存储键
+ */
+export declare const getStorageKey: (tableId: string, prefix: string) => string;
+/**
+ * 读取存储
+ */
+export declare const getStorage: (tableId: string, prefix: string) => TableColumnStorage | null;
+/**
+ * 保存存储
+ */
+export declare const setStorage: (tableId: string, prefix: string, columns: StoredColumnConfig[]) => void;
+/**
+ * 删除存储
+ */
+export declare const removeStorage: (tableId: string, prefix: string) => void;
+/**
+ * 更新单列宽度（增量更新）
+ */
+export declare const updateColumnWidth: (tableId: string, prefix: string, field: string, width: number, allColumnsForFallback?: StoredColumnConfig[]) => void;
+/**
+ * 检查是否有存储配置
+ */
+export declare const hasStorage: (tableId: string, prefix: string) => boolean;

package/dist/types/components/JcColumnConfig/types.d.ts

@@ -0,0 +1,96 @@
+import { VxeTableInstance, VxeTableDefines } from 'vxe-table';
+/**
+ * 外部传入的列分组配置（简化版）
+ */
+export interface ColumnGroupConfig {
+    /** 分组标题 */
+    title: string;
+    /** 分组下的字段列表 */
+    fields: string[];
+}
+/**
+ * 内部使用的列分组（带 id）
+ */
+export interface ColumnGroup extends ColumnGroupConfig {
+    /** 分组唯一标识（自动生成） */
+    id: string;
+    /** 是否为默认分组（[基础信息]） */
+    isDefault?: boolean;
+}
+/**
+ * 存储的列配置（持久化到 localStorage）
+ */
+export interface StoredColumnConfig {
+    /** 列字段名（唯一标识） */
+    field: string;
+    /** 是否可见 */
+    visible: boolean;
+    /** 固定方向 */
+    fixed?: 'left' | 'right';
+    /** 列宽（像素） */
+    width?: number;
+    /** 排序序号 */
+    sortNumber: number;
+}
+/**
+ * 完整存储结构
+ */
+export interface TableColumnStorage {
+    /** 存储版本（用于兼容性升级） */
+    version: number;
+    /** 最后更新时间戳 */
+    timestamp: number;
+    /** 列配置数组 */
+    columns: StoredColumnConfig[];
+}
+/**
+ * 组件内部使用的列配置（扩展自 StoredColumnConfig）
+ */
+export interface ColumnConfig extends StoredColumnConfig {
+    /** 列标题 */
+    title: string;
+    /** 是否锁定可见性（由 lockFieldList 决定） */
+    visibleLocked: boolean;
+    /** 原始索引（用于判断顺序是否变化） */
+    originalIndex: number;
+    /** 所属分组ID */
+    groupId?: string;
+}
+/**
+ * 组件 Props 类型
+ */
+export interface ToolbarColumnConfigV2Props {
+    /** 表格实例（必需） */
+    table: VxeTableInstance | null;
+    /** 锁定不能隐藏的字段列表 */
+    lockFieldList?: string[];
+    /** 最大固定列数（左右合计） */
+    maxFixedCount?: number;
+    /** 每个字段项的宽度 */
+    itemWidth?: number;
+    /** 抽屉宽度 */
+    drawerWidth?: string;
+    /** 存储键前缀 */
+    storagePrefix?: string;
+    /** 列分组配置（可选） */
+    columnGroups?: ColumnGroupConfig[];
+}
+/**
+ * 组件暴露的方法
+ */
+export interface ToolbarColumnConfigV2Expose {
+    /** 加载存储配置并应用到表格 */
+    loadStoredConfig: () => Promise<void>;
+    /** 恢复默认配置 */
+    resetToDefault: () => Promise<void>;
+    /** 保存并应用配置 */
+    saveAndApply: () => Promise<void>;
+    /** 打开配置抽屉 */
+    openDrawer: () => void;
+    /** 关闭配置抽屉 */
+    closeDrawer: () => void;
+    /** 处理列宽变化事件 */
+    onResizableChange: (params: VxeTableDefines.ResizableChangeEventParams) => void;
+    /** 检查是否有存储配置 */
+    hasStoredConfig: () => boolean;
+}

package/dist/types/components/JcColumnConfig/useColumnConfig.d.ts

@@ -0,0 +1,85 @@
+import { Ref } from 'vue';
+import { VxeTableInstance, VxeTableDefines } from 'vxe-table';
+import { ColumnConfig, ColumnGroup, ColumnGroupConfig, StoredColumnConfig } from './types';
+export interface UseColumnConfigOptions {
+    table: Ref<VxeTableInstance | null | undefined>;
+    lockFieldList: Ref<string[]>;
+    maxFixedCount: Ref<number>;
+    storagePrefix: Ref<string>;
+    columnGroupsConfig: Ref<ColumnGroupConfig[]>;
+}
+export declare function useColumnConfig(options: UseColumnConfigOptions): {
+    allColumns: Ref<{
+        title: string;
+        visibleLocked: boolean;
+        originalIndex: number;
+        groupId?: string | undefined;
+        field: string;
+        visible: boolean;
+        fixed?: "left" | "right" | undefined;
+        width?: number | undefined;
+        sortNumber: number;
+    }[], ColumnConfig[] | {
+        title: string;
+        visibleLocked: boolean;
+        originalIndex: number;
+        groupId?: string | undefined;
+        field: string;
+        visible: boolean;
+        fixed?: "left" | "right" | undefined;
+        width?: number | undefined;
+        sortNumber: number;
+    }[]>;
+    columnGroups: Ref<{
+        id: string;
+        isDefault?: boolean | undefined;
+        title: string;
+        fields: string[];
+    }[], ColumnGroup[] | {
+        id: string;
+        isDefault?: boolean | undefined;
+        title: string;
+        fields: string[];
+    }[]>;
+    originalOrder: Ref<string[], string[]>;
+    filteredColumns: import('vue').ComputedRef<ColumnConfig[]>;
+    selectedColumns: import('vue').ComputedRef<{
+        title: string;
+        visibleLocked: boolean;
+        originalIndex: number;
+        groupId?: string | undefined;
+        field: string;
+        visible: boolean;
+        fixed?: "left" | "right" | undefined;
+        width?: number | undefined;
+        sortNumber: number;
+    }[]>;
+    selectedCount: import('vue').ComputedRef<number>;
+    leftFixedCount: import('vue').ComputedRef<number>;
+    rightFixedCount: import('vue').ComputedRef<number>;
+    totalFixedCount: import('vue').ComputedRef<number>;
+    selectAll: import('vue').ComputedRef<boolean>;
+    isIndeterminate: import('vue').ComputedRef<boolean>;
+    canFixLeft: (col: ColumnConfig) => boolean;
+    canFixRight: (col: ColumnConfig) => boolean;
+    initColumns: () => void;
+    buildCurrentConfig: () => StoredColumnConfig[];
+    applyConfigToTable: (configs: StoredColumnConfig[]) => Promise<void>;
+    loadStoredConfig: () => Promise<void>;
+    saveAndApply: () => Promise<void>;
+    resetToDefault: () => Promise<void>;
+    onResizableChange: (params: VxeTableDefines.ResizableChangeEventParams) => void;
+    checkHasStoredConfig: () => boolean;
+    updateSelectedOrder: (newOrder: ColumnConfig[]) => void;
+    onSelectAllChange: (val: boolean) => void;
+    onColumnVisibleChange: (col: ColumnConfig) => void;
+    onDragEnd: () => void;
+    moveToTop: (col: ColumnConfig, currentIndex: number) => void;
+    removeFromSelected: (col: ColumnConfig) => boolean;
+    toggleFixed: (col: ColumnConfig, direction: "left" | "right") => boolean;
+    onGroupSelectChange: (groupId: string, checked: boolean) => void;
+    getGroupCheckState: (groupId: string) => {
+        checked: boolean;
+        indeterminate: boolean;
+    };
+};

package/dist/types/components/index.d.ts

@@ -8,3 +8,4 @@ export * from './JcMoreQueryContain/index';
 export * from './JcListLayout/index';
 export * from './JcImportDialog/index';
 export * from './JcImportButton/index';
+export * from './JcColumnConfig/index';

package/dist/types/components.d.ts

@@ -12,6 +12,7 @@ declare module "@vue/runtime-core" {
     JcListLayout: typeof components.JcListLayout;
     JcImportDialog: typeof components.JcImportDialog;
     JcImportButton: typeof components.JcImportButton;
+    JcColumnConfig: typeof components.JcColumnConfig;
 
     // Global component extensions
     [key: `Jc${string}`]: import("vue").DefineComponent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bscjc/webui",
   "private": false,
-  "version": "1.3.0",
+  "version": "1.4.0",
   "type": "module",
   "main": "./dist/lib/index.cjs",
   "module": "./dist/es/index.mjs",
@@ -37,14 +37,17 @@
     "prepare": "npm run build"
   },
   "dependencies": {
-    "@vueuse/shared": "^13.4.0",
     "fuse.js": "^7.1.0",
     "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "peerDependencies": {
     "@element-plus/icons-vue": ">=2.0.0",
+    "@vueuse/shared": ">=10.0.0",
     "element-plus": ">=2.0.0",
-    "vue": ">=3.2.0"
+    "lodash-es": ">=4.0.0",
+    "vue": ">=3.2.0",
+    "vuedraggable": ">=4.0.0",
+    "vxe-table": ">=4.0.0"
   },
   "devDependencies": {
     "@types/node": "^24.0.7",
@@ -52,5 +55,5 @@
     "cssnano": "^7.0.7",
     "unplugin-element-plus": "^0.10.0"
   },
-  "gitHead": "8ad3604e29dd684fff35e2c9a7de13aa7176dfdd"
+  "gitHead": "c21ff37bc12532b2783bbaaa20bba2d6fbc9af68"
 }