feat(smart-table): smart-table添加表格尺寸调整功能

.env.development

@@ -14,4 +14,4 @@ VITE_GLOB_UPLOAD_URL=/upload
 VITE_GLOB_API_URL_PREFIX=
 
 # 单体架构
-VITE_GLOB_API_MODE=cloud
+VITE_GLOB_API_MODE=standalone

src/components/SmartTable/index.ts

@@ -17,3 +17,6 @@ export * from './src/types/SmartTableAuthType';
 export * from './src/types/SmartTableToolbarConfigType';
 export * from './src/utils/TableCommon';
 export * from './src/hooks/useVxeTableSortable';
+
+export { default as zh_CN } from './src/lang/zh_CN';
+export { default as en_US } from './src/lang/en_US';

src/components/SmartTable/src/SmartTable.tsx

@@ -15,7 +15,7 @@ import { usePagination } from './hooks/usePagination';
 import { useTableAjax } from './hooks/useTableAjax';
 import { useTableToolbarConfig } from './hooks/useTableToolbarConfig';
 import { useTableModalAddEditConfig } from './hooks/useTableModalAddEdit';
-import { createTableContext } from './hooks/userSmartTableContext';
+import { createTableContext } from './hooks/useSmartTableContext';
 import { useTableRowDrag } from './hooks/useTableDrag';
 import { useSmartTableColumn } from './hooks/useSmartTableColumn';
 import SmartTableAddEditModal from './components/SmartTableAddEditModal';

src/components/SmartTable/src/components/SmartTableSizeSetting.tsx

@@ -0,0 +1,69 @@
+import type { SmartTableToolbarSizeSetting } from '@/components/SmartTable';
+import type { VxeButtonProps } from 'vxe-table';
+
+import { defineComponent, h } from 'vue';
+
+import { Menu, Dropdown } from 'ant-design-vue';
+import { ColumnHeightOutlined } from '@ant-design/icons-vue';
+import { t as vxeI18n } from 'vxe-table';
+
+import { useTableContext } from '../hooks/useSmartTableContext';
+
+export default defineComponent({
+  name: 'SmartTableSizeSetting',
+  props: {
+    config: {
+      type: Object as PropType<SmartTableToolbarSizeSetting>,
+      default: () => ({}),
+    },
+  },
+  setup() {
+    const tableContext = useTableContext();
+    const handleChangeSize = (e) => {
+      tableContext.setProps({
+        size: e.key,
+      });
+    };
+    return {
+      handleChangeSize,
+    };
+  },
+  render() {
+    const { config, handleChangeSize } = this;
+    const slots = {
+      default: renderButton(config),
+      overlay: renderOverlay(config, handleChangeSize),
+    };
+    return <Dropdown>{slots}</Dropdown>;
+  },
+});
+
+const renderOverlay = (config: SmartTableToolbarSizeSetting, handleChangeSize: Function) => {
+  return () => {
+    return (
+      <Menu onClick={(e) => handleChangeSize(e)}>
+        <Menu.Item key="middle">大</Menu.Item>
+        <Menu.Item key="small">中等</Menu.Item>
+        <Menu.Item key="mini">紧凑</Menu.Item>
+      </Menu>
+    );
+  };
+};
+
+const renderButton = (config: SmartTableToolbarSizeSetting) => {
+  const props: VxeButtonProps = {
+    circle: true,
+    icon: 'vxe-icon-chart-radar',
+    ...config.buttonProps,
+  };
+  const slots = {
+    icon: () => h(ColumnHeightOutlined),
+  };
+  return () => {
+    return (
+      <vxe-button title={vxeI18n('smart_table.toolbar.sizeSetting')} {...props}>
+        {slots}
+      </vxe-button>
+    );
+  };
+};

src/components/SmartTable/src/components/SmartVxeTableAction.vue

@@ -54,7 +54,7 @@
   import { PopConfirmVxeButton } from '@/components/Button';
   import { Dropdown } from '@/components/Dropdown';
   import { useDesign } from '@/hooks/web/useDesign';
-  import { useTableContext } from '../hooks/userSmartTableContext';
+  import { useTableContext } from '../hooks/useSmartTableContext';
   import { hasPermission } from '@/utils/auth';
   import { isBoolean, isFunction, isString } from '@/utils/is';
   import { propTypes } from '@/utils/propTypes';

src/components/SmartTable/src/components/TableAction.vue

@@ -47,7 +47,7 @@
   import { PopConfirmButton } from '@/components/Button';
   import { Dropdown } from '@/components/Dropdown';
   import { useDesign } from '@/hooks/web/useDesign';
-  import { useTableContext } from '../hooks/userSmartTableContext';
+  import { useTableContext } from '../hooks/useSmartTableContext';
   import { isBoolean, isFunction, isString } from '@/utils/is';
   import { propTypes } from '@/utils/propTypes';
   import { ACTION_COLUMN_FLAG } from '../const';

src/components/SmartTable/src/const.ts

@@ -29,4 +29,8 @@ export enum SmartTableCode {
    * 列配置
    */
   column = 'column',
+  /**
+   * 尺寸配置
+   */
+  sizeSetting = 'sizeSetting',
 }

src/components/SmartTable/src/hooks/useTableToolbarConfig.ts

@@ -9,6 +9,7 @@ import type {
 import type { SmartTableButton, SmartTableToolbarTool } from '../types/SmartTableButton';
 import type { SizeType } from 'ant-design-vue/es/config-provider';
 import type { VxeToolbarPropTypes } from 'vxe-table';
+import type { SmartTableToolbarSizeSetting } from '@/components/SmartTable';
 
 import { computed, ref, unref } from 'vue';
 import { error, warn } from '@/utils/log';
@@ -17,6 +18,7 @@ import { merge } from 'lodash-es';
 import { isArray, isBoolean, isPromise } from '@/utils/is';
 
 import SmartTableColumnConfig from '../components/SmartTableColumnConfig';
+import SmartTableSizeSetting from '../components/SmartTableSizeSetting';
 
 import {
   VxeTableToolButtonCustomRenderer,
@@ -123,8 +125,8 @@ export const useTableToolbarConfig = (
   };
 
   const getTools = (toolbarConfig: SmartTableToolbarConfig) => {
-    const { tools, showSearch, column } = toolbarConfig;
-    if (!tools && !showSearch && !column) {
+    const { tools, showSearch, column, sizeSetting } = toolbarConfig;
+    if (!tools && !showSearch && !column && !sizeSetting) {
       return undefined;
     }
     const result: SmartTableToolbarTool[] = [...(tools || [])];
@@ -165,9 +167,28 @@ export const useTableToolbarConfig = (
         component: SmartTableColumnConfig,
       });
     }
+    if (sizeSetting) {
+      result.push(getSizeSettingConfig(sizeSetting));
+    }
     return result;
   };
 
+  const getSizeSettingConfig = (
+    sizeSetting: boolean | SmartTableToolbarSizeSetting,
+  ): SmartTableToolbarTool => {
+    return {
+      code: SmartTableCode.sizeSetting,
+      toolRender: {
+        name: VxeTableToolComponentRenderer,
+        props: {
+          // todo: 默认配置
+          config: isBoolean(sizeSetting) ? {} : sizeSetting,
+        },
+      },
+      component: SmartTableSizeSetting,
+    };
+  };
+
   const getDefaultRefresh = (): VxeToolbarPropTypes.RefreshConfig => {
     return {
       queryMethod: (params) => {

src/components/SmartTable/src/lang/en_US.ts

@@ -0,0 +1,7 @@
+export default {
+  smart_table: {
+    toolbar: {
+      sizeSetting: 'Size',
+    },
+  },
+};

src/components/SmartTable/src/lang/zh_CN.ts

@@ -0,0 +1,7 @@
+export default {
+  smart_table: {
+    toolbar: {
+      sizeSetting: '尺寸',
+    },
+  },
+};

src/components/SmartTable/src/types/SmartTableToolbarConfigType.ts

@@ -9,3 +9,8 @@ export interface SmartTableToolbarColumnConfig {
   // 是否支持列排序
   columnOrder?: boolean;
 }
+
+export interface SmartTableToolbarSizeSetting {
+  // nothing
+  buttonProps?: VxeButtonProps;
+}

src/components/SmartTable/src/types/SmartTableType.ts

@@ -7,7 +7,10 @@ import type { VxeTablePropTypes } from 'vxe-table/types/table';
 import type { Options as SortableOptions } from 'sortablejs';
 import type { SmartColumn } from './SmartTableColumnType';
 import type { SmartTableAuthConfig } from './SmartTableAuthType';
-import type { SmartTableToolbarColumnConfig } from '@/components/SmartTable';
+import type {
+  SmartTableToolbarColumnConfig,
+  SmartTableToolbarSizeSetting,
+} from '@/components/SmartTable';
 
 /**
  * 表格高度
@@ -28,6 +31,8 @@ export interface SmartTableToolbarConfig extends VxeGridPropTypes.ToolbarConfig
   // 是否显示搜索
   showSearch?: boolean | SmartTableToolbarTool;
   column?: SmartTableToolbarColumnConfig | boolean;
+  // 尺寸配置
+  sizeSetting?: boolean | SmartTableToolbarSizeSetting;
 }
 
 export interface SmartTableAjaxQueryParams extends VxeGridPropTypes.ProxyAjaxQueryParams {

src/locales/lang/en_US.ts

@@ -2,6 +2,7 @@ import { generateModuleMessage, genMessage } from '../helper';
 import antdLocale from 'ant-design-vue/es/locale/en_US';
 import { deepMerge } from '@/utils';
 import vxeEnUS from 'vxe-table/lib/locale/lang/en-US';
+import smartTableEnUS from '@/components/SmartTable/src/lang/en_US';
 
 const modules = import.meta.glob('./en/**/*.{json,ts,js}', { eager: true });
 const modulesLocales = import.meta.glob('../../modules/**/lang/en_US.ts', { eager: true });
@@ -11,6 +12,7 @@ export default {
       genMessage(modules as Recordable<Recordable>, 'en'),
       generateModuleMessage(modulesLocales as Recordable<Recordable>),
     ),
+    ...smartTableEnUS,
     antdLocale,
     ...vxeEnUS,
   },

src/locales/lang/zh_CN.ts

@@ -2,6 +2,7 @@ import { generateModuleMessage, genMessage } from '../helper';
 import antdLocale from 'ant-design-vue/es/locale/zh_CN';
 import { deepMerge } from '@/utils';
 import vxeZhCN from 'vxe-table/lib/locale/lang/zh-CN';
+import smartTableZhCN from '@/components/SmartTable/src/lang/zh_CN';
 
 const modules = import.meta.glob('./zh-CN/**/*.{json,ts,js}', { eager: true });
 const modulesLocales = import.meta.glob('../../modules/**/lang/zh_CN.ts', { eager: true });
@@ -11,6 +12,7 @@ export default {
       genMessage(modules as Recordable<Recordable>, 'zh-CN'),
       generateModuleMessage(modulesLocales as Recordable<Recordable>),
     ),
+    ...smartTableZhCN,
     antdLocale: {
       ...antdLocale,
       DatePicker: deepMerge(

src/modules/smart-system/views/parameter/SysParameterListView.config.ts

@@ -20,12 +20,6 @@ export const getTableColumns = (): SmartColumn[] => {
       align: 'center',
       fixed: 'left',
     },
-    {
-      field: 'id',
-      visible: false,
-      title: '{system.views.parameter.title.id}',
-      width: 120,
-    },
     {
       field: 'code',
       fixed: 'left',

src/modules/smart-system/views/parameter/SysParameterListView.vue

@@ -55,7 +55,6 @@
     height: 'auto',
     pagerConfig: true,
     border: true,
-    highlightHoverRow: true,
     stripe: true,
     useSearchForm: true,
     columnConfig: {
@@ -63,6 +62,7 @@
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     sortConfig: {
       remote: true,
@@ -99,8 +99,8 @@
     toolbarConfig: {
       zoom: true,
       refresh: true,
-      custom: true,
-      export: true,
+      column: { columnOrder: true },
+      sizeSetting: true,
       buttons: [
         {
           code: 'ModalAdd',