@xmszm/core 0.0.2 → 0.0.3

package/examples/vite.config.js

@@ -0,0 +1,41 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import path from 'path'
+
+// 插件：重定向 @xmszm/core 中的 @/ 路径到项目 src
+const redirectExternalImports = () => {
+  return {
+    name: 'redirect-external-imports',
+    resolveId(id, importer) {
+      // 如果是从 @xmszm/core 导入的 @/ 路径，重定向到项目 src
+      if (importer && importer.includes('@xmszm/core') && id.startsWith('@/')) {
+        const resolvedPath = path.resolve(__dirname, 'src', id.replace('@/', ''))
+        return resolvedPath
+      }
+      return null
+    },
+  }
+}
+
+export default defineConfig({
+  base: '/core/examples/',
+  plugins: [vue(), vueJsx(), redirectExternalImports()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      '@xmszm/core': path.resolve(__dirname, '..'),
+      '@xmszm/core/dist/style.css': path.resolve(__dirname, '../dist/style.css'),
+    },
+    dedupe: ['vue'],
+  },
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+  },
+  server: {
+    port: 3000,
+    open: true
+  }
+})
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xmszm/core",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "naiveui core 组件与工具库",
   "license": "UNLICENSED",
   "main": "./dist/index.cjs",
@@ -21,6 +21,11 @@
       "style": "./dist/style.css",
       "types": "./types/index.d.ts"
     },
+    "./plugin/vite/initRouteMeta": {
+      "import": "./dist/plugin/vite/initRouteMeta.mjs",
+      "require": "./dist/plugin/vite/initRouteMeta.cjs",
+      "types": "./types/plugin/vite/initRouteMeta.d.ts"
+    },
     "./dist/style.css": "./dist/style.css",
     "./package.json": "./package.json"
   },
@@ -47,6 +52,8 @@
     "vue-router": "^4.2.0"
   },
   "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@unocss/vite": "^66.5.10",
     "@vicons/ionicons5": "^0.13.0",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
@@ -55,13 +62,12 @@
     "lodash-es": "^4.17.21",
     "naive-ui": "^2.38.0",
     "rimraf": "^6.0.1",
+    "typescript": "^5.0.0",
+    "unocss": "^66.5.10",
     "unplugin-auto-import": "^20.3.0",
     "vite": "^5.4.0",
     "vitepress": "^1.2.3",
     "vue": "^3.3.0",
     "vue-router": "^4.2.0"
-  },
-  "dependencies": {
-    "npm": "^11.7.0"
   }
 }

package/src/dialog/commonDialog.tsx

@@ -0,0 +1,285 @@
+import { NButton, NSpace, useDialog, createDiscreteApi } from 'naive-ui'
+import type { DialogApi } from 'naive-ui'
+import { reactive, ref, unref, defineComponent } from 'vue'
+import type { Ref, VNode } from 'vue'
+import type { CommonDialogOptions, DialogAction } from '../../types/components'
+import type { CommonDialogResult } from '../../types'
+import DataForm from '../form/DataForm.vue'
+import { dialogDefaultOption } from './utils/dialog'
+import './style/commonDialog.less'
+
+// 声明全局 $dialog 变量（外部可能注入）
+declare global {
+  // eslint-disable-next-line no-var
+  var $dialog: DialogApi | undefined
+}
+
+// 全局缓存 dialog 实例，避免重复创建离散 API
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let globalDialogInstance: any = null
+let discreteDialogFactory: { dialog: any } | null = null
+
+function getDialogInstanceOnce(): any {
+  if (globalDialogInstance)
+    return globalDialogInstance
+
+  // 1. 检查全局 $dialog
+  if (typeof $dialog !== 'undefined' && $dialog) {
+    globalDialogInstance = $dialog
+    return globalDialogInstance
+  }
+
+  // 2. 组件上下文中尝试 useDialog（若无上下文会抛错）
+  try {
+    const dialog = useDialog()
+    if (dialog) {
+      globalDialogInstance = dialog
+      return globalDialogInstance
+    }
+  }
+  catch (e) {
+    // 忽略，继续尝试离散 API
+  }
+
+  // 3. 使用离散 API，且只创建一次
+  if (!discreteDialogFactory) {
+    const { dialog } = createDiscreteApi(['dialog'])
+    discreteDialogFactory = { dialog }
+  }
+  globalDialogInstance = discreteDialogFactory.dialog
+  return globalDialogInstance
+}
+
+/**
+ * 集成填写表单功能的弹窗
+ * @param param - 弹窗配置选项
+ * @param dialogProps - 传递给 NDialog 的属性
+ * @returns 弹窗控制对象 {cancel, setValue, model, modeEnum}
+ */
+export function commonDialogMethod(
+  {
+    title = '',
+    noTitle = false,
+    titleFull = null,
+    options = [],
+    mode = 'add',
+    modeEnum = {},
+    labelField = 'label',
+    isNo = true,
+    formProps = {},
+    interfaceFn = null,
+    interfaceFnCancel = null,
+    valueData,
+    read,
+    isRead,
+    action = null,
+    contentStyle = {},
+    actionProps = {},
+  }: CommonDialogOptions = {
+    title: '自定义弹窗',
+    noTitle: false,
+    action: [],
+    options: [],
+    read: false,
+    isRead: false,
+    valueData: {},
+  },
+  dialogProps: Record<string, any> | null = null,
+): CommonDialogResult {
+  // 优先使用外部注册的 $dialog；再尝试组件上下文 useDialog；再退回离散 API（仅全局创建一次）
+  const dialogInstance = getDialogInstanceOnce()
+  
+  const defaultModeEnum: Record<string, { sub?: string; read?: boolean }> = {
+    none: { sub: '', read: false },
+    create: { sub: '创建', read: false },
+    add: { sub: '添加', read: false },
+    edit: { sub: '编辑', read: false },
+    view: { sub: '查看', read: true },
+    export: { sub: '导出', read: false },
+    import: { sub: '导入', read: false },
+    delete: { sub: '删除', read: false },
+    copy: { sub: '复制', read: false },
+    ...modeEnum,
+  }
+  const formRef: Ref<any> = ref()
+  const actionLoading = reactive<boolean[]>([])
+  const model = ref({ ...valueData })
+  const defaultActionProps = {
+    justify: 'end' as 'end',
+    wrapItem: false,
+    style: {
+      width: '100%',
+    },
+  }
+
+  const defaultButtonStyle = {
+    width: '120px',
+  }
+  const defaultAction: DialogAction[] = [
+    {
+      label: '取消',
+      props: {
+        type: 'primary',
+        ghost: true,
+      },
+      onClick: ({ cancel }) => {
+        if (interfaceFnCancel) {
+          interfaceFnCancel(unref(model), {
+            close: cancel,
+          })
+        } else {
+          cancel()
+        }
+      },
+    },
+    {
+      label: '确定',
+      valid: true,
+      onClick: async ({ cancel, hideLoading }) =>
+        interfaceFn
+          ? await interfaceFn(unref(model), {
+            close: cancel,
+            hideLoading,
+          })
+          : cancel(),
+    },
+  ];
+
+  (Array.isArray(action) ? action : defaultAction).forEach((v, i) => {
+    actionLoading[i] = false
+  })
+  const titleRender = typeof titleFull === 'function'
+    ? () => titleFull(defaultModeEnum[mode]?.sub || '')
+    : titleFull
+
+  // 使用 ref 存储 dialog 实例，以便在函数中访问
+  const dialogRef: Ref<any> = ref()
+
+  function cancel(): void {
+    console.log('取消', model.value)
+    dialogRef.value?.destroy()
+  }
+
+  async function validate(arr: string[] = []): Promise<void> {
+    console.log('开启验证')
+    await formRef.value?.valid()
+  }
+
+  async function comfirm(fn?: () => any): Promise<any> {
+    return fn && fn()
+  }
+
+  const renderAction = !(read ?? isRead)
+    ? typeof action === 'function'
+      ? () => action({ formRef, data: unref(model), d: dialogRef.value, close: cancel })
+      : () => (
+          <NSpace
+            {...defaultActionProps}
+            {...actionProps}
+            style={{
+              ...defaultActionProps?.style,
+              ...(actionProps?.style || {}),
+            }}
+          >
+            {(Array.isArray(action) ? action : defaultAction).map((v, i) =>
+              v?.render
+                ? (
+                    v?.render?.()
+                  )
+                : (
+                    <NButton
+                      type="primary"
+                      ghost={v.mode === 'cancel'}
+                      {...(v?.props || {})}
+                      {...(actionProps?.buttonProps || {})}
+                      style={{ ...defaultButtonStyle, ...(v?.style || {}) }}
+                      loading={actionLoading[i]}
+                      onClick={async () => {
+                        if (v.mode === 'cancel') {
+                          dialogRef.value?.destroy()
+                        }
+                        else {
+                          const showLoading = () => (actionLoading[i] = true)
+                          const hideLoading = () => (actionLoading[i] = false)
+                          if (v?.loading)
+                            showLoading()
+                          try {
+                            console.log('model', unref(model))
+                            
+                            if (v?.valid)
+                              await validate()
+                            console.log(v?.valid)
+                            if (v?.valid || v?.loading)
+                              showLoading()
+                            await v?.onClick?.({
+                              model: unref(model),
+                              comfirm,
+                              cancel,
+                              validate,
+                              showLoading,
+                              hideLoading,
+                            })
+                          }
+                          catch (e) {
+                            console.log(e)
+                          }
+                          finally {
+                            if (v?.valid || v?.loading)
+                              hideLoading()
+                          }
+                        }
+                      }}
+                    >
+                      {v.label || ''}
+                    </NButton>
+                  ),
+            )}
+          </NSpace>
+        )
+    : null
+
+  const d = dialogInstance.create({
+    type: 'info',
+    ...dialogDefaultOption,
+    ...(!noTitle
+      ? { title: titleRender || (defaultModeEnum[mode]?.sub ?? '') + title }
+      : {}),
+    style: {
+      width: '500px',
+    },
+    content: () => (
+      <DataForm
+        ref={(v: any) => {
+          formRef.value = v
+        }}
+        options={options}
+        v-model:value={model}
+        isNo={isNo}
+        read={read ?? isRead}
+        labelField={labelField}
+        formProps={formProps}
+        contentStyle={contentStyle}
+        dialog
+      />
+    ),
+    action: renderAction,
+    // ...readButton.value,
+    ...dialogProps,
+    class: `core-dialog ${(read ?? isRead) ? 'core-dialog-read' : ''} ${dialogProps?.class || ''}`,
+  })
+
+  // 将 dialog 实例存储到 ref 中
+  dialogRef.value = d
+
+  // onBeforeUnmount(() => {
+  //   console.log('commomDialog end')
+  //   cancel()
+  // })
+
+  return {
+    cancel,
+    setValue: (v: any, str?: string) => str ? (model.value[str] = v) : (model.value = { ...model.value, ...v }),
+    model: unref(model),
+    modeEnum: defaultModeEnum
+  };
+}

package/src/dialog/utils/{dialog.js → dialog.ts}

@@ -1,3 +1,5 @@
+import { computed, unref } from 'vue'
+
 export const dialogDefaultOption = {
   showIcon: false,
   autoFocus: false,

package/src/enum/sort.tsx

@@ -0,0 +1,45 @@
+import { h } from 'vue'
+import { ChevronDown, ChevronUp, Code } from '@vicons/ionicons5'
+
+interface OrderEnumItem {
+  title: string
+  value: boolean | null
+  Icon: any
+  fn: (listQuery: any, key?: string) => void
+}
+
+interface OrderEnum {
+  ascend: OrderEnumItem
+  descend: OrderEnumItem
+  false: OrderEnumItem
+}
+
+export const orderEnum: OrderEnum = {
+  ascend: {
+    title: '升序',
+    value: true,
+    Icon: h(ChevronUp),
+    fn: (listQuery: any, key: string) => {
+      listQuery.desc = true
+      listQuery.sortFieldName = key
+    },
+  },
+  descend: {
+    title: '降序',
+    value: false,
+    Icon: h(ChevronDown),
+    fn: (listQuery: any) => {
+      listQuery.sortFieldName = ''
+      listQuery.desc = true
+    },
+  },
+  false: {
+    title: '默认',
+    value: null,
+    Icon: h(Code, { style: 'transform:rotateZ(90deg)' }),
+    fn: (listQuery: any) => {
+      listQuery.desc = false
+      listQuery.sortFieldName = ''
+    },
+  },
+}

package/src/form/DataForm.vue

@@ -1,10 +1,11 @@
-<script setup>
+<script setup lang="ts">
 import { NForm } from 'naive-ui'
-import { ref, unref } from 'vue'
+import { ref, unref, computed } from 'vue'
+import type { DataFormProps, DataFormExpose } from '../../types/components'
 
-import Options from '../options/Options.jsx'
-import {initRules} from '../dialog/utils/dialog.js'
-import { toArray } from 'core'
+import Options from '../options/Options'
+import { initRules } from '../dialog/utils/dialog'
+import { toArray } from '../utils/array'
 import { registerDirectives } from '../directives/auto-register'
 import { getCurrentInstance } from 'vue'
 
@@ -13,43 +14,16 @@ const instance = getCurrentInstance()
 if (instance?.appContext?.app) {
   registerDirectives(instance.appContext.app)
 }
-const props = defineProps({
-  isNo: {
-    type: Boolean,
-    default: () => true
-  },
-  read: {
-    type: Boolean,
-    default: () => false
-  },
-  labelField: {
-    type: String,
-    default: () => 'label'
-  },
-  contentStyle: {
-    type: Object,
-    default: () => ({})
-  },
-  options: {
-    type: Array,
-    default: () => []
-  },
-  rules: {
-    type: Object,
-    default: () => ({})
-  },
-  formProps: {
-    type: Object,
-    default: () => ({})
-  },
-  formItemProps: {
-    type: Object,
-    default: () => ({})
-  },
-  dialog: {
-    type: Boolean,
-    default: () => false
-  }
+const props = withDefaults(defineProps<DataFormProps>(), {
+  isNo: true,
+  read: false,
+  labelField: 'label',
+  contentStyle: () => ({}),
+  options: () => [],
+  rules: () => ({}),
+  formProps: () => ({}),
+  formItemProps: () => ({}),
+  dialog: false,
 })
 const _options = computed(() => props.options)
 // ====== 复制 initRules 逻辑 ======
@@ -76,27 +50,27 @@ const autoRules = computed(() => {
 })
 console.log(autoRules.value);
 
-defineExpose({
+defineExpose<DataFormExpose>({
   formRef,
   getRule: () => autoRules.value,
-  valid: (keyCode = []) =>{
-    console.log('?? valid',keyCode);
-    return new Promise((resolve, reject) => {
+  valid: (keyCode: string[] = []) => {
+    console.log('?? valid', keyCode)
+    return new Promise<void>((resolve, reject) => {
       const arrCode = toArray(keyCode)
-      formRef.value?.validate((v) => {
+      formRef.value?.validate((v: any) => {
         if (v) return reject(v)
         resolve()
-      },(v)=> arrCode.length ?  arrCode.includes(v?.key) : true)
+      }, (v: any) => arrCode.length ? arrCode.includes(v?.key) : true)
     })
   },
-  confirm: (fn) =>
-    new Promise((resolve, reject) => {
-      formRef.value?.validate((v) => {
+  confirm: (fn?: (model: any) => void) =>
+    new Promise<any>((resolve, reject) => {
+      formRef.value?.validate((v: any) => {
         if (v) return reject(v)
         fn && fn(unref(_model))
         resolve(unref(_model))
       })
-    })
+    }),
 })
 </script>
 

package/src/{index.js → index.ts}

@@ -7,15 +7,15 @@ export {
   getOptions,
   setupOptions,
 } from './options/defaultOptions'
-export { default as Options } from './options/Options.jsx'
+export { default as Options } from './options/Options'
 export { default as CommonQuery } from './query/CommonQuery.vue'
 
 export { createActionColumnJsx, createQRCode } from './table/opr/useDataColumn'
 export { useQRCode } from './table/opr/useQRCode'
 
-export { default as OprButton } from './table/opr/useDataColumnButton.jsx'
+export { default as OprButton } from './table/opr/useDataColumnButton'
 
-export { default as Pop } from './table/opr/useDataColumnPop.jsx'
+export { default as Pop } from './table/opr/useDataColumnPop'
 
 export { toArray } from './utils/array'
 
@@ -23,6 +23,7 @@ export {
   cellectChildenPermission,
   handleParams,
   useApiConfig,
+  useAuthPermission,
 } from './utils/auth'
 
 export { ObjectToArray } from './utils/object'
@@ -41,9 +42,9 @@ export { default as DataTable } from './table/DataTable.vue'
 export { labelField as globalLabelField, valueField as globalValueField } from './enum/options'
 
 
-export { initRules } from './dialog/utils/dialog.js'
+export { initRules } from './dialog/utils/dialog'
 
-export { ellipsis } from './table/utils/ellipsis.js'
+export { ellipsis } from './table/utils/ellipsis'
 
 export { initRouteMeta } from './plugin/vite/initRouteMeta'
 
@@ -54,4 +55,4 @@ import CorePluginDefault from './plugin/index'
 export { CorePluginDefault as CorePlugin }
 export { install } from './plugin/index'
 export { permissionDirective } from './directives/permission'
-export { registerDirectives, autoRegisterDirectives, getGlobalApp } from './directives/auto-register'
+export { registerDirectives, autoRegisterDirectives, getGlobalApp } from './directives/auto-register'

package/src/list/{useList.jsx → useList.tsx}

@@ -1,11 +1,36 @@
-import { computed, ref, unref, watch } from 'vue'
+import { computed, ref, unref, watch, type Ref, type ComputedRef } from 'vue'
+import type { FormOption } from '../../types/components'
 
-export function useList(source = [], filterOptions = []) {
+interface QueryModel {
+  andQuery?: Record<string, any>
+  likeQuery?: Record<string, any>
+  [key: string]: any
+}
+
+interface FilterOption extends FormOption {
+  queryType?: string
+  value?: any
+  type?: string
+}
+
+interface UseListReturn {
+  loading: Ref<boolean>
+  data: Ref<any[]>
+  model: Ref<QueryModel>
+  initData: () => void
+  onSearch: () => void
+  onClear: () => void
+}
+
+export function useList(
+  source: any[] = [],
+  filterOptions: FormOption[] = [],
+): UseListReturn {
   const loading = ref(false)
-  const data = ref([])
+  const data = ref<any[]>([])
   const sourceList = computed(() => unref(source))
 
-  const model = ref({
+  const model = ref<QueryModel>({
     andQuery: {},
     likeQuery: {},
   })
@@ -52,17 +77,21 @@ export function useList(source = [], filterOptions = []) {
 }
 
 export const matchMethod = {
-  andQuery: (data, value) =>
+  andQuery: (data: any, value: any): boolean =>
     Array.isArray(value) ? value.includes(data) : data === value,
-  likeQuery: (data, value) => data?.indexOf(value) > -1,
+  likeQuery: (data: string | undefined, value: string): boolean =>
+    data?.indexOf(value) > -1 || false,
 }
 
-export function handleFilterValue(runOptions, model) {
+export function handleFilterValue(
+  runOptions: FormOption[],
+  model: QueryModel,
+): FilterOption[] {
   console.log('handleFilterValue', runOptions)
 
   return runOptions
     .map((v) => {
-      const filedValue = v?.key || v?.value
+      const filedValue = (v?.key as string) || (v as any)?.value
       const value = v?.queryType
         ? model?.[v?.queryType]?.[filedValue]
         : model?.[filedValue]
@@ -72,24 +101,30 @@ export function handleFilterValue(runOptions, model) {
             key: filedValue,
             type: v?.queryType,
             value,
-          }
+          } as FilterOption
         : undefined
     })
-    .filter(v => v)
+    .filter((v): v is FilterOption => v !== undefined)
 }
 
-export function handleFilterOption(runOption, options) {
+export function handleFilterOption(
+  runOption: FilterOption[],
+  options: any[],
+): any[] {
   console.log('runOption', runOption)
 
   if (runOption.length) {
     return options?.filter(item =>
       runOption.length === 1
-        ? matchMethod?.[runOption?.[0].type](
-          item?.[runOption?.[0]?.key],
+        ? matchMethod?.[runOption?.[0].type as keyof typeof matchMethod]?.(
+          item?.[runOption?.[0]?.key as string],
           runOption?.[0]?.value,
         )
         : runOption?.every(v =>
-          matchMethod?.[v.type](item?.[v.key], v.value),
+          matchMethod?.[v.type as keyof typeof matchMethod]?.(
+            item?.[v.key as string],
+            v.value,
+          ),
         ),
     )
   }