@xmszm/core 0.0.1 → 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.1",
+  "version": "0.0.3",
   "description": "naiveui core 组件与工具库",
   "license": "UNLICENSED",
   "main": "./dist/index.cjs",
@@ -18,8 +18,15 @@
     ".": {
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs",
+      "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"
   },
   "files": [
@@ -45,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",
@@ -53,12 +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/useCommonDialog.ts

@@ -0,0 +1,41 @@
+/**
+ * useCommonDialog Hook
+ * 在组件中使用 commonDialogMethod 的便捷方式
+ */
+import { useDialog } from 'naive-ui'
+import { commonDialogMethod } from './commonDialog'
+import { registerDialogInstance } from '../utils/config'
+
+/**
+ * 使用 commonDialog 的 Hook
+ * @returns {Function} openDialog 函数
+ * 
+ * @example
+ * import { useCommonDialog } from '@xmszm/core'
+ * 
+ * export default defineComponent({
+ *   setup() {
+ *     const openDialog = useCommonDialog()
+ *     
+ *     const handleEdit = () => {
+ *       openDialog({
+ *         title: '编辑',
+ *         options: [...],
+ *       })
+ *     }
+ *     
+ *     return { handleEdit }
+ *   }
+ * })
+ */
+export function useCommonDialog() {
+  const dialog = useDialog()
+
+  // 注册 dialog 实例到全局配置，这样 commonDialogMethod 可以直接使用
+  registerDialogInstance(dialog)
+
+  return (options, dialogProps) => {
+    return commonDialogMethod(options, dialogProps)
+  }
+}
+

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/directives/auto-register.ts

@@ -0,0 +1,57 @@
+/**
+ * 自动注册指令
+ * 在导入库时自动注册所有指令，无需手动配置
+ */
+import { permissionDirective } from './permission'
+
+// 全局应用实例缓存
+let globalApp = null
+
+/**
+ * 注册所有指令到应用实例
+ * @param {Object} app - Vue 应用实例
+ */
+export function registerDirectives(app) {
+  if (!app) return
+
+  // 缓存应用实例
+  globalApp = app
+
+  // 只注册内部的 corePermission 指令
+  // 外部如果需要 v-permission，可以自己注册，与内部无关
+  if (!app._context.directives?.corePermission) {
+    app.directive('corePermission', permissionDirective)
+  }
+}
+
+/**
+ * 尝试自动注册指令
+ * 通过 getCurrentInstance 获取应用实例并注册
+ */
+export function autoRegisterDirectives() {
+  try {
+    // 动态导入 vue，避免在构建时出错
+    const vue = typeof require !== 'undefined' ? require('vue') : null
+    if (!vue) return false
+
+    const { getCurrentInstance } = vue
+    const instance = getCurrentInstance?.()
+
+    if (instance?.appContext?.app) {
+      registerDirectives(instance.appContext.app)
+      return true
+    }
+  } catch (e) {
+    // 忽略错误，可能不在组件上下文中
+  }
+
+  return false
+}
+
+/**
+ * 获取全局应用实例
+ */
+export function getGlobalApp() {
+  return globalApp
+}
+

package/src/directives/permission.ts

@@ -0,0 +1,67 @@
+import { checkPermission } from '../utils/config'
+
+/**
+ * 权限指令
+ * 根据权限标识控制元素的显示/隐藏
+ * 
+ * @example
+ * <div v-corePermission="'user:edit'">编辑按钮</div>
+ * <div v-corePermission="['user:edit', 'user:view']">需要编辑或查看权限</div>
+ */
+export const permissionDirective = {
+  mounted(el, binding) {
+    const permission = binding.value
+
+    if (!permission) {
+      // 如果没有权限标识，默认显示
+      return
+    }
+
+    // 支持字符串或数组
+    const permissions = Array.isArray(permission) ? permission : [permission]
+
+    // 检查是否有任一权限
+    const hasPermission = permissions.some(p => checkPermission(p))
+
+    if (!hasPermission) {
+      // 没有权限时隐藏元素
+      el.style.display = 'none'
+      // 保存原始 display 值，以便后续恢复
+      el._originalDisplay = el.style.display || ''
+    }
+  },
+
+  updated(el, binding) {
+    const permission = binding.value
+
+    if (!permission) {
+      // 恢复显示
+      if (el._originalDisplay !== undefined) {
+        el.style.display = el._originalDisplay || ''
+      } else {
+        el.style.display = ''
+      }
+      return
+    }
+
+    const permissions = Array.isArray(permission) ? permission : [permission]
+    const hasPermission = permissions.some(p => checkPermission(p))
+
+    if (!hasPermission) {
+      el.style.display = 'none'
+    } else {
+      // 恢复显示
+      if (el._originalDisplay !== undefined) {
+        el.style.display = el._originalDisplay || ''
+      } else {
+        el.style.display = ''
+      }
+    }
+  },
+
+  unmounted(el) {
+    // 清理
+    delete el._originalDisplay
+  },
+}
+

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,47 +1,29 @@
-<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'
-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
-  }
+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'
+
+// 自动注册指令
+const instance = getCurrentInstance()
+if (instance?.appContext?.app) {
+  registerDirectives(instance.appContext.app)
+}
+const props = withDefaults(defineProps<DataFormProps>(), {
+  isNo: true,
+  read: false,
+  labelField: 'label',
+  contentStyle: () => ({}),
+  options: () => [],
+  rules: () => ({}),
+  formProps: () => ({}),
+  formItemProps: () => ({}),
+  dialog: false,
 })
 const _options = computed(() => props.options)
 // ====== 复制 initRules 逻辑 ======
@@ -68,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>