@xmszm/core 0.0.1 → 0.0.3

package/src/query/CommonQuery.vue

@@ -1,81 +1,61 @@
-<script setup lang="jsx">
+<script setup lang="tsx">
 import { RefreshOutline, SearchOutline } from '@vicons/ionicons5'
-import { DataForm } from 'core'
-import { getOptions } from 'core/options/defaultOptions.jsx'
-import { ObjectToArray } from 'core/utils/object.js'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import type { CommonQueryProps, CommonQueryEmits, FormOption } from '../../types/components'
+import DataForm from '../form/DataForm.vue'
+import { getOptions } from '../options/defaultOptions'
+import { ObjectToArray } from '../utils/object'
+import { computed, onMounted, onUnmounted, ref, getCurrentInstance } from 'vue'
+import { NButton, NSpace } from 'naive-ui'
+import { registerDirectives } from '../directives/auto-register'
+
+// 自动注册指令
+const instance = getCurrentInstance()
+if (instance?.appContext?.app) {
+  registerDirectives(instance.appContext.app)
+}
 
 // 防抖函数
-function debounce(func, delay) {
-  let timeoutId
-  return function (...args) {
+function debounce<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout> | undefined
+  return function (...args: Parameters<T>) {
     clearTimeout(timeoutId)
     timeoutId = setTimeout(() => {
       func.apply(this, args)
     }, delay)
   }
 }
-const emit = defineEmits(['update:query', 'submit', 'reset'])
-
-const props = defineProps({
-  inlineText: {
-    type: Boolean,
-    default: () => true,
-  },
-  options: {
-    type: Array,
-    default: () => [],
-  },
-  query: {
-    type: Object,
-    default: () => ({}),
-  },
-  selectCount: {
-    type: Number,
-    default: () => 1,
-  },
-  type: {
-    type: String,
-    default: () => 'primary',
-  },
-  noButton: {
-    type: Boolean,
-    default: () => false,
-  },
-  isRead: {
-    type: Boolean,
-    default: () => false,
-  },
-  btn: {
-    type: Array,
-    default: () => ['reset', 'search'],
-  },
-  size: {
-    type: String,
-    default: () => 'medium',
-  },
-
+const emit = defineEmits<CommonQueryEmits>()
+
+const props = withDefaults(defineProps<CommonQueryProps>(), {
+  inlineText: true,
+  options: () => [],
+  query: () => ({}),
+  selectCount: 1,
+  type: 'primary',
+  noButton: false,
+  isRead: false,
+  btn: () => ['reset', 'search'],
+  size: 'medium',
 })
 
-function onBeforeOptions(arr){
-  return arr.map(v=>({
+function onBeforeOptions(arr: FormOption[]): FormOption[] {
+  return arr.map((v: FormOption) => ({
     ...v,
-    props:{
+    props: {
       ...v.props,
-    ...((!v.way ||v.way==='input')? {
-      onUpdateValue: (...v) => {
-        v.props?.onUpdateValue?.(...v)
+      ...((!v.way || v.way === 'input') ? {
+        onUpdateValue: (...args: any[]) => {
+          ;(v.props as any)?.onUpdateValue?.(...args)
         debouncedSubmit()
       }
-    }: {}),
+      } : {}),
     ...(v?.way === 'select' ? {
-      onUpdateValue: (...v) => {
-        v.props?.onUpdateValue?.(...v)
+        onUpdateValue: (...args: any[]) => {
+          ;(v.props as any)?.onUpdateValue?.(...args)
         debouncedSubmit()
       }
-    }: {})
+      } : {})
   }
-    
   }))
 }
 
@@ -108,9 +88,9 @@ const defaultOptions = getOptions(_queryOptionsKey.value)
 
 const _queryOptions = computed(() => {
   try {
-    const arr = []
-    for (let i = 0; i < props.options.length; i++) {
-      const v = props.options[i]
+    const arr: FormOption[] = []
+    for (let i = 0; i < (props.options?.length || 0); i++) {
+      const v = props.options![i]
       if (v?.enum && !v?.options)
         v.options = ObjectToArray(v.enum)
       if (!v?.props) {
@@ -123,19 +103,21 @@ const _queryOptions = computed(() => {
         v.formItemProps = { ...defaultFormItemProps }
       }
       else {
+        const formItemProps = typeof v.formItemProps === 'function'
+          ? v.formItemProps({}, {})
+          : v.formItemProps
         v.formItemProps = {
           ...defaultFormItemProps,
-          ...v.formItemProps,
-          style: { ...defaultFormItemProps.style, ...v.formItemProps.style },
+          ...formItemProps,
+          style: { ...defaultFormItemProps.style, ...(formItemProps as any)?.style },
         }
       }
 
-      const key = v?.key || v?.value
+      const key = v?.key || (v as any)?.value
       if (!key)
         throw new Error('key no set')
       arr.push({
         ...v,
-
         key,
       })
     }
@@ -189,35 +171,28 @@ const defaultBtn = {
   ),
 }
 
-function clearQuery() {
-  props.options.forEach((v) => {
-    const key = v?.key || v?.value
+function clearQuery(): void {
+  props.options?.forEach((v: FormOption) => {
+    const key = (v?.key as string) || (v as any)?.value
     if (key) {
-      if (v?.queryType)
-        _query.value[v.queryType][key] = null
-      else _query.value[key] = null
+      if (v?.queryType) {
+        if (!(_query.value as any)[v.queryType]) {
+          (_query.value as any)[v.queryType] = {}
+        }
+        (_query.value as any)[v.queryType][key] = null
+      }
+      else {
+        (_query.value as any)[key] = null
+      }
     }
   })
   emit('reset')
 }
 
 // 全局监听 Enter 键的方法
-function handleGlobalEnter(event) {
+function handleGlobalEnter(event: KeyboardEvent): void {
   // 检查是否按下了 Enter 键
   if (event.key === 'Enter') {
-    // 检查是否在输入框、选择框等表单元素中
-    // const target = event.target
-    // const isFormElement = target.tagName === 'INPUT' || 
-    //                      target.tagName === 'SELECT' || 
-    //                      target.tagName === 'TEXTAREA' ||
-    //                      target.contentEditable === 'true'
-    
-    // if (isFormElement) {
-    //   // 阻止默认行为（如换行）
-    //   event.preventDefault()
-    //   // 触发搜索
-     
-    // }
     onSubmit()
   }
 }
@@ -234,7 +209,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <n-space
+  <NSpace
     :wrap-item="false"
     justify="space-between"
     align="center"
@@ -247,14 +222,14 @@ onUnmounted(() => {
         :form-props="{ showFeedback: false }"
       />
     </div>
-    <n-space v-if="!props.noButton" align="center" :wrap="false">
+    <NSpace v-if="!props.noButton" align="center" :wrap="false">
       <slot name="left-btn" />
       <template v-for="(itm, idx) in props.btn" :key="idx">
         <component :is="defaultBtn?.[itm]?.()" />
       </template>
       <slot name="right-btn" />
-    </n-space>
-  </n-space>
+    </NSpace>
+  </NSpace>
 </template>
 
 <style scoped lang="less">

package/src/table/DataTable.vue

@@ -1,87 +1,68 @@
-<script setup lang="jsx">
+<script setup lang="tsx">
+import type { DataTableProps, DataTableExpose } from '../../types/components'
 import { ChevronDown, ChevronUp, Code, Funnel } from '@vicons/ionicons5'
 import { commonDialogMethod, toArray } from 'core'
 import { ellipsis } from 'core/table/utils/ellipsis'
 import dayjs from 'dayjs'
 import { uniqueId } from 'lodash-es'
 import { NButton, NTooltip } from 'naive-ui'
-import { computed, onMounted, ref, unref, watch ,isProxy} from 'vue'
+import { computed, onMounted, ref, unref, watch ,isProxy, getCurrentInstance} from 'vue'
 import { useRoute } from 'vue-router'
 import FilterDialog from './FilterDialog.vue'
 import { orderEnum } from 'core'
+import { registerDirectives } from '../directives/auto-register'
+import {NDataTable} from 'naive-ui'
+// 自动注册指令
+const instance = getCurrentInstance()
+if (instance?.appContext?.app) {
+  registerDirectives(instance.appContext.app)
+}
 
-const props = defineProps({
-  data: {
-    type: Array,
-    default: () => [],
-  },
-  pagination: {
-    type: [Object, null],
-    default: () => undefined,
-  },
-  columns: {
-    type: Array,
-    default: () => [
+const props = withDefaults(defineProps<DataTableProps>(), {
+  data: () => [],
+  pagination: undefined,
+  columns: () => [
       {
         title: '测试案例',
       },
     ],
-  },
-  oprColumns: {
-    type: [Object, null],
-    default: () => null,
-  },
-  selectColumns: {
-    type: [Object, null],
-    default: () => null,
-  },
-  defaultColumns: {
-    type: Array,
-    default: () => [],
-  },
-  summaryColumns: {
-    type: null,
-    default: () => null,
-  },
-  emptyText: {
-    type: String,
-    default: () => '没有数据',
-  },
-  emptyIcon: {
-    type: String,
-    default: () => '',
-  },
-  isFilter: {
-    type: Boolean,
-    default: () => false,
-  },
-  isEllipsis: {
-    type: Boolean,
-    default: () => true,
-  },
-  virtual: {
-    type: null,
-    default: () => {},
-  },
-  singleColumn: {
-    type: Boolean,
-    default: () => false,
-  },
+  oprColumns: null,
+  selectColumns: null,
+  defaultColumns: () => [],
+  summaryColumns: null,
+  emptyText: '没有数据',
+  emptyIcon: '',
+  isFilter: false,
+  isEllipsis: true,
+  virtual: () => ({}),
+  singleColumn: false,
 })
 const route = useRoute()
 const FilterKey = 'filter_key'
-const emit = defineEmits(['sorted'])
+const emit = defineEmits<{
+  sorted: []
+}>()
+
+// 安全获取路由路径，如果没有路由上下文则使用默认值
+const getRoutePath = (): string => {
+  try {
+    return route?.fullPath || route?.path || ''
+  } catch {
+    return ''
+  }
+}
+
 const _data = computed(() => {
   console.log('table -data', props.data)
 
   return props.data
 })
-function setHeadFilter(val) {
+function setHeadFilter(val: Record<string, any>): void {
   window.localStorage.setItem(FilterKey, JSON.stringify(val))
 }
 
-function getHeadFilter() {
-  return JSON.parse(window.localStorage.getItem(FilterKey)) || {}
+function getHeadFilter(): Record<string, any> {
+  return JSON.parse(window.localStorage.getItem(FilterKey) || '{}') || {}
 }
 
 const getFilterAll = ref(getHeadFilter())
@@ -89,14 +70,14 @@ const headDefault = ref([])
 
 const scrollX = ref(0)
 
-function _summary(pageData) {
+function _summary(pageData: any[]): Record<string, { value: any }> | undefined {
   if (!props.summaryColumns)
     return
   return [
     props.selectColumns,
-    ...unref(props.columns),
+    ...unref(props.columns || []),
     props.oprColumns,
-  ]?.reduce((o, n) => {
+  ]?.reduce((o: Record<string, { value: any }>, n: any) => {
     if (n?.key)
       o[n.key] = props.summaryColumns?.(pageData)?.[n.key] || { value: null }
     else o[uniqueId('table')] = { value: null }
@@ -123,26 +104,27 @@ watch(
   },
 )
 
-function init() {
-  const columns = unref(props.columns)
+function init(): void {
+  const columns = unref(props.columns || [])
+  const routePath = getRoutePath()
   headDefault.value
-    = getFilterAll.value?.[route.fullPath]
-      || columns?.map((v, i) => v?.key || dayjs().valueOf() + i)
+    = (routePath && getFilterAll.value?.[routePath])
+      || columns?.map((v: any, i: number) => v?.key || String(dayjs().valueOf() + i))
 
-  const arr = props.isFilter
-    ? columns.filter(item => headDefault.value?.includes(item.key))
+  const arr: any[] = props.isFilter
+    ? columns.filter((item: any) => headDefault.value?.includes(item.key))
     : [...columns]
   if (props.selectColumns)
     arr.unshift({ key: 'selectKey', ...props.selectColumns })
   if (props.oprColumns)
     arr.push(props.oprColumns)
   let scrollNum = 0
-  _columns.value = arr.reduce((o, obj) => {
+  _columns.value = arr.reduce((o: any[], obj: any) => {
     if (obj?.display)
       console.log('display', obj?.display)
     if (!(obj?.display ?? true))
       return o
-    const v = {
+    const v: any = {
       'align': 'center',
       'width': 120,
       ...obj,
@@ -153,7 +135,7 @@ function init() {
             ? obj?.ellipsisProp(ellipsis)
             : ellipsis
           : false,
-      'ellipsis-component': 'ellipsis' || 'performant-ellipsis',
+      'ellipsis-component': 'ellipsis',
       'title': () => {
         const title = obj?.label || obj?.title || ''
         return (
@@ -165,8 +147,8 @@ function init() {
     }
 
     if (obj?.sorter) {
-      v.renderSorterIcon = ({ order }) => {
-        const { Icon, title } = orderEnum[order]
+      v.renderSorterIcon = ({ order }: { order: string }) => {
+        const { Icon, title } = orderEnum[order as keyof typeof orderEnum]
         return (
           <NTooltip>
             {{
@@ -178,14 +160,13 @@ function init() {
       }
       v.sorter = {
         multiple: 1,
-        fn:obj.sorter
+        fn: obj.sorter
       }
     }
 
-
     scrollNum += v?.width
-      ? Number.parseInt(v?.width)
-      : null || v?.title?.length * v.length + 30 || 0
+      ? Number.parseInt(String(v?.width))
+      : (typeof v?.title === 'string' ? v?.title?.length * 30 : 0) || 0
 
     o.push(v)
     return o
@@ -194,7 +175,7 @@ function init() {
   console.log('计算')
 }
 
-function filterButton() {
+function filterButton(): any {
   return (
     <NButton type="info" onClick={() => filterHandle()}>
       {{
@@ -205,13 +186,14 @@ function filterButton() {
   )
 }
 
-function filterHandle() {
+function filterHandle(): void {
   const { cancel } = commonDialogMethod(
     {
       title: '筛选字段',
       read: true,
       options: [
         {
+          key: 'filter-dialog',
           render: () => (
             <FilterDialog
               style={{
@@ -219,12 +201,15 @@ function filterHandle() {
                 margin: '0',
                 padding: 0,
               }}
-              filterItem={unref(props.columns)}
+              filterItem={unref(props.columns || [])}
               selectItem={headDefault.value}
               defaultItem={props.defaultColumns}
-              onSubmit={(v) => {
-                getFilterAll.value[route.fullPath] = v
+              onSubmit={(v: string[]) => {
+                const routePath = getRoutePath()
+                if (routePath) {
+                  getFilterAll.value[routePath] = v
                 setHeadFilter(getFilterAll.value)
+                }
                 init()
                 cancel()
               }}
@@ -242,32 +227,34 @@ function filterHandle() {
   )
 }
 
-function onSorter(e) {
+function onSorter(e: any): void {
   console.log('onSorter', e)
   if (!e)
     return
   const sortArr = toArray(e)
 
-  sortArr.forEach(v => {
+  sortArr.forEach((v: any) => {
     console.log('v', v)
     
     if (v?.sorter) {
-      v?.sorter?.fn
-      ((listQuery, pageState, key) => {
-        orderEnum[v.order]?.fn(listQuery, key)
+      v?.sorter?.fn?.(
+        (listQuery: any, pageState: any, key: string) => {
+          orderEnum[v.order as keyof typeof orderEnum]?.fn(listQuery, key)
         pageState.fetchData()
-      },{
+        },
+        {
         field: v?.columnKey,
-        value: orderEnum[v?.order]?.value,
-        isClick : !isProxy(v)
-      })
+          value: orderEnum[v?.order as keyof typeof orderEnum]?.value,
+          isClick: !isProxy(v)
+        }
+      )
     }
   })
 
   emit('sorted')
 }
 
-defineExpose({
+defineExpose<DataTableExpose>({
   filterHandle,
   filterButton,
   initColumns: init,
@@ -277,7 +264,7 @@ onMounted(() => {})
 </script>
 
 <template>
-  <n-data-table
+  <NDataTable
     :data="_data"
     :columns="_columns"
     :scroll-x="scrollX"
@@ -288,7 +275,7 @@ onMounted(() => {})
     :row-props="() => ({ style: { height: '60px' } })"
     flex-height
     remote
-    :virtual-scroll="props.virtual ?? props.data.length > 1000"
+    :virtual-scroll="!!(props.virtual ?? props.data.length > 1000)"
     style="flex: 1"
     @update:sorter="onSorter"
   >
@@ -298,7 +285,7 @@ onMounted(() => {})
         <n-empty>{{ emptyText }}</n-empty>
       </slot>
     </template>
-  </n-data-table>
+  </NDataTable>
 </template>
 
 <style scoped lang="less">

package/src/table/opr/{DataColumnCollet.jsx → DataColumnCollet.tsx}

@@ -1,12 +1,20 @@
 import { NButton, NPopover, NSpace } from 'naive-ui'
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref, type VNode } from 'vue'
+import type { ActionOption } from '../../../types/components'
 
 import { rowIndexKey } from './useDataColumn'
 import OprButton from './useDataColumnButton'
 import Pop from './useDataColumnPop'
 
+interface Props {
+  options: ActionOption[]
+  max: number
+  data: any
+  index: number
+}
+
 export default defineComponent(
-  (props) => {
+  (props: Props) => {
     const leng = props.options.length
 
     const toggle = ref(false)
@@ -16,7 +24,7 @@ export default defineComponent(
 
     const ellipOptions = computed(() => props.options.slice(props.max))
 
-    function renderOptions(op) {
+    function renderOptions(op: ActionOption[]): (VNode | undefined)[] {
       return op
         ?.map(
           (
@@ -30,20 +38,21 @@ export default defineComponent(
             },
             i,
           ) => {
-            return isRender?.(props.data)
+            return (typeof isRender === 'function' ? isRender(props.data) : isRender)
               ? (
                   mode === 'pop'
                     ? (
                         <Pop
                           onClick={onClick}
                           row={props.data}
+                          index={props.index}
                           action={action}
                           key={rowIndexKey(props.data, props.index) + i}
                         >
                           <NButton
                             text
-                            disabled={disabled && disabled(props.data)}
-                            type={disabled && disabled(props.data) ? 'default' : type}
+                            disabled={typeof disabled === 'function' ? disabled(props.data) : disabled}
+                            type={typeof disabled === 'function' && disabled(props.data) ? 'default' : type}
                             {...action}
                           >
                             {typeof action?.label === 'function'
@@ -61,6 +70,7 @@ export default defineComponent(
                             onClick,
                             type,
                           }}
+                          index={props.index}
                           key={rowIndexKey(props.data, props.index) + i}
                         />
                       )
@@ -68,7 +78,7 @@ export default defineComponent(
               : undefined
           },
         )
-        .filter(v => v)
+        .filter((v): v is VNode => v !== undefined)
     }
 
     return () => (
@@ -116,7 +126,7 @@ export default defineComponent(
       },
       data: {
         type: Object,
-        default: () => {},
+        default: () => ({}),
       },
       index: {
         type: Number,