fixed some bugs

.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
     browser: true,
     node: true,
   },
+  ignorePatterns: ['node_modules/', 'dist/'],
   extends: [
     'eslint-config-prettier',
     'eslint:recommended',

package.json

@@ -5,17 +5,17 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "eslint src && vue-tsc --noEmit && vite build --mode production",
+    "build": "eslint src && eslint --fix . && vue-tsc --noEmit && vite build --mode production",
     "preview": "vite preview",
-    "test": "eslint src && vue-tsc --noEmit && vite build --mode test",
-    "dev-build": "eslint src && vue-tsc --noEmit && vite build --mode development",
-    "report": "eslint src && vue-tsc --noEmit && vite build --mode report",
+    "test": "eslint src && eslint --fix . && vue-tsc --noEmit && vite build --mode test",
+    "dev-build": "eslint src && eslint --fix . && vue-tsc --noEmit && vite build --mode development",
+    "report": "eslint src && eslint --fix . && vue-tsc --noEmit && vite build --mode report",
     "prepare": "husky install"
   },
   "lint-staged": {
     "src/**/*.{vue,jsx,ts,tsx,json}": [
       "prettier --write",
-      "eslint",
+      "eslint src",
       "git add"
     ]
   },
@@ -73,7 +73,7 @@
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
     "postcss": "^8.1.0",
-    "postcss-px-to-viewport": "^1.1.1",
+    "postcss-px-to-viewport-update": "1.2.0",
     "prettier": "^2.7.1",
     "rollup-plugin-visualizer": "^5.8.3",
     "svg-sprite-loader": "^6.0.11",

postcss.config.cjs

@@ -11,7 +11,9 @@ module.exports = {
       ],
       grid: true,
     },
-    // 'postcss-px-to-viewport': {
+    // 由于该库的作者很久没更新了，导致 exclude include 并没有生效，所以使用的是其一个 fork 版本
+    // 'postcss-px-to-viewport-update': {
+    //   inlinePxToViewport: true,
     //   /** 视窗的宽度(设计稿的宽度) */
     //   viewportWidth: 1920,
     //   /** 视窗的高度(设计稿高度, 一般无需指定) */
@@ -26,6 +28,8 @@ module.exports = {
     //   minPixelValue: 1,
     //   /** 允许在媒体查询中转换 px */
     //   mediaQuery: false,
+    //   exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+    //   include: [/^src[/\\].*\.(vue|tsx|jsx|ts(?!d))$/],
     // },
   },
 }

src/components/RayCollapseGrid/src/index.tsx

@@ -17,13 +17,12 @@ import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
 import RayIcon from '@/components/RayIcon'
 
 import { call } from '@/utils/vue/index'
-import { cloneDeep } from 'lodash-es'
 
 const RayCollapseGrid = defineComponent({
   name: 'RayCollapseGrid',
   props: collapseGridProps,
   setup(props) {
-    const modelCollapsed = ref(cloneDeep(props.open))
+    const modelCollapsed = ref(props.open)
 
     const handleCollapse = () => {
       modelCollapsed.value = !modelCollapsed.value

src/components/RayTable/src/components/TableSize/index.tsx

@@ -14,24 +14,38 @@ import './index.scss'
 import { NPopover, NCard } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
 
+import { call } from '@/utils/vue/index'
+
 import type { TableSettingProvider } from '@/components/RayTable/src/type'
 import type { ComponentSize } from '@/types/modules/component'
+import type { MaybeArray } from '@/types/modules/utils'
 
 const TableSize = defineComponent({
   name: 'TableSize',
+  props: {
+    onChangeSize: {
+      type: [Function, Array] as PropType<
+        MaybeArray<(size: ComponentSize) => void>
+      >,
+      default: null,
+    },
+  },
   emits: ['changeSize'],
-  setup(_, { emit }) {
+  setup(props) {
     const tableSettingProvider = inject(
       'tableSettingProvider',
       {} as TableSettingProvider,
     )
 
     const popoverShow = ref(false)
-    const currentSize = ref(tableSettingProvider.size)
     const size = computed({
       get: () => tableSettingProvider.size,
       set: (val) => {
-        currentSize.value = val
+        const { onChangeSize } = props
+
+        if (onChangeSize) {
+          call(onChangeSize, val)
+        }
       },
     })
     const sizeOptions = ref([
@@ -55,15 +69,13 @@ const TableSize = defineComponent({
           size.value = key
 
           popoverShow.value = false
-
-          emit('changeSize', key)
         }
       })
     }
 
     return {
+      size,
       sizeOptions,
-      currentSize,
       handleDropdownClick,
       popoverShow,
     }
@@ -103,9 +115,7 @@ const TableSize = defineComponent({
                     <div
                       class={[
                         'dropdown-item',
-                        curr.key === this.currentSize
-                          ? 'dropdown-item--active'
-                          : '',
+                        curr.key === this.size ? 'dropdown-item--active' : '',
                       ]}
                       key={curr.key}
                       onClick={this.handleDropdownClick.bind(

src/components/RayTable/src/index.tsx

@@ -46,7 +46,7 @@ import props from './props'
 import print from 'print-js'
 import { uuid } from '@use-utils/hook'
 import { exportFileToXLSX } from '@use-utils/xlsx'
-import { cloneDeep } from 'lodash-es'
+import { call } from '@/utils/vue/index'
 
 import type { ActionOptions } from './type'
 import type { WritableComputedRef } from 'vue'
@@ -58,13 +58,13 @@ import type { ComponentSize } from '@/types/modules/component'
 const RayTable = defineComponent({
   name: 'RayTable',
   props: props,
-  emits: ['update:columns', 'menuSelect', 'exportSuccess', 'exportError'],
+  emits: ['update:columns', 'exportSuccess', 'exportError'],
   setup(props, { emit, expose }) {
     const rayTableInstance = ref<DataTableInst>()
 
     const tableUUID = uuid(16) // 表格 id, 用于打印表格
     const rayTableUUID = uuid(16) // RayTable id, 用于全屏表格
-    const modelRightClickMenu = computed(() => props.rightClickMenu)
+    const modelRightClickMenu = computed(() => props.rightClickOptions)
     const modelColumns = computed({
       get: () => props.columns,
       set: (arr) => {
@@ -84,14 +84,14 @@ const RayTable = defineComponent({
 
       return cssVar
     })
-    const tableSize = ref(cloneDeep(props.size))
+    const tableSize = ref(props.size)
     const tableMethods = ref<Omit<DataTableInst, 'clearFilter'>>()
 
     /** 注入相关属性 */
     provide('tableSettingProvider', {
       modelRightClickMenu,
       modelColumns,
-      size: props.size,
+      size: tableSize,
       rayTableUUID,
     })
 
@@ -111,7 +111,16 @@ const RayTable = defineComponent({
       key: string | number,
       option: DropdownOption,
     ) => {
-      emit('menuSelect', key, prevRightClickIndex, option)
+      const { onRightMenuClick, 'onUpdate:rightMenuClick': _onRightMenuClick } =
+        props
+
+      if (onRightMenuClick) {
+        call(onRightMenuClick, key, prevRightClickIndex, option)
+      }
+
+      if (_onRightMenuClick) {
+        call(_onRightMenuClick, key, prevRightClickIndex, option)
+      }
 
       menuConfig.showMenu = false
     }
@@ -242,6 +251,7 @@ const RayTable = defineComponent({
       handleChangeTableSize,
       tableSize,
       rayTableInstance,
+      modelRightClickMenu,
     }
   },
   render() {
@@ -274,7 +284,7 @@ const RayTable = defineComponent({
                   trigger="manual"
                   x={this.x}
                   y={this.y}
-                  options={this.rightClickMenu}
+                  options={this.modelRightClickMenu}
                   onClickoutside={() => (this.showMenu = false)}
                   onSelect={this.handleRightMenuSelect.bind(this)}
                 />

src/components/RayTable/src/props.ts

@@ -14,10 +14,12 @@ import { dataTableProps } from 'naive-ui'
 import type { PropType, VNode, VNodeChild } from 'vue'
 import type { DropdownMixedOption } from './type'
 import type PrintConfiguration from 'print-js'
+import type { MaybeArray } from '@/types/modules/utils'
+import type { DropdownOption } from 'naive-ui'
 
 const rayTableProps = {
   ...dataTableProps, // 继承 `data table props`
-  rightClickMenu: {
+  rightClickOptions: {
     /**
      *
      * 表格右键菜单, 基于 `NDropdown` 实现
@@ -29,6 +31,22 @@ const rayTableProps = {
     type: Array as PropType<DropdownMixedOption[]>,
     default: () => [],
   },
+  onRightMenuClick: {
+    type: [Function, Array] as PropType<
+      MaybeArray<
+        (key: string | number, index: number, option: DropdownOption) => void
+      >
+    >,
+    default: null,
+  },
+  'onUpdate:rightMenuClick': {
+    type: [Function, Array] as PropType<
+      MaybeArray<
+        (key: string | number, index: number, option: DropdownOption) => void
+      >
+    >,
+    default: null,
+  },
   title: {
     /**
      *

src/views/table/index.tsx

@@ -246,8 +246,8 @@ const TableView = defineComponent({
             pageSize: 10,
           }}
           loading={this.tableLoading}
-          rightClickMenu={this.tableMenuOptions}
-          onMenuSelect={this.handleMenuSelect.bind(this)}
+          rightClickOptions={this.tableMenuOptions}
+          onRightMenuClick={this.handleMenuSelect.bind(this)}
         >
           {{
             tableFooter: () => '表格的底部内容区域插槽，有时候你可能会用上',