@xmszm/core 0.0.1 → 0.0.2

package/docs/usage.md

@@ -2,18 +2,29 @@
 
 ## 安装
 ```bash
-npm install core
+npm install @xmszm/core
+# 或
+pnpm add @xmszm/core
+# 或
+yarn add @xmszm/core
 ```
 
-需要同时安装的 peer 依赖（版本可按项目统一）：`vue`、`naive-ui`、`vue-router`、`dayjs`、`lodash-es`、`@vicons/ionicons5`。  
+需要同时安装的 peer 依赖（版本可按项目统一）：
+- `vue` >= 3.3.0
+- `naive-ui` >= 2.38.0
+- `vue-router` >= 4.2.0
+- `dayjs` >= 1.11.0
+- `lodash-es` >= 4.17.21
+- `@vicons/ionicons5` >= 0.13.0
+
 如项目使用 `@` 别名，请确保存在对应的打包/运行时配置。
 
 ## 快速开始
 ```vue
 <script setup>
 import { ref } from 'vue'
-import { DataForm, DataTable, commonDialogMethod } from 'core'
-import 'core/dist/style.css' // 如需默认样式
+import { DataForm, DataTable, commonDialogMethod } from '@xmszm/core'
+import '@xmszm/core/dist/style.css' // 如需默认样式
 
 const formValue = ref({})
 const formOptions = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xmszm/core",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "naiveui core 组件与工具库",
   "license": "UNLICENSED",
   "main": "./dist/index.cjs",
@@ -18,8 +18,10 @@
     ".": {
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs",
+      "style": "./dist/style.css",
       "types": "./types/index.d.ts"
     },
+    "./dist/style.css": "./dist/style.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -53,6 +55,7 @@
     "lodash-es": "^4.17.21",
     "naive-ui": "^2.38.0",
     "rimraf": "^6.0.1",
+    "unplugin-auto-import": "^20.3.0",
     "vite": "^5.4.0",
     "vitepress": "^1.2.3",
     "vue": "^3.3.0",

package/src/dialog/commonDialog.jsx

@@ -1,9 +1,38 @@
-import { NButton, NSpace } from 'naive-ui'
+import { NButton, NSpace, useDialog, createDiscreteApi } from 'naive-ui'
 import { computed, reactive, ref, unref, watch } from 'vue'
 import DataForm from '../form/DataForm.vue'
 import { dialogDefaultOption } from './utils/dialog'
 import './style/commonDialog.less'
 
+// 全局缓存 dialog 实例，避免重复创建离散 API
+let globalDialogInstance = typeof $dialog !== 'undefined' ? $dialog : null
+let discreteDialogFactory = null
+
+function getDialogInstanceOnce() {
+  if (globalDialogInstance)
+    return globalDialogInstance
+
+  // 1. 组件上下文中尝试 useDialog（若无上下文会抛错）
+  try {
+    const dialog = useDialog()
+    if (dialog) {
+      globalDialogInstance = dialog
+      return globalDialogInstance
+    }
+  }
+  catch (e) {
+    // 忽略，继续尝试离散 API
+  }
+
+  // 2. 使用离散 API，且只创建一次
+  if (!discreteDialogFactory) {
+    const { dialog } = createDiscreteApi(['dialog'])
+    discreteDialogFactory = { dialog }
+  }
+  globalDialogInstance = discreteDialogFactory.dialog
+  return globalDialogInstance
+}
+
 /**
  *
  * @param {*} param
@@ -41,6 +70,9 @@ export function commonDialogMethod(
   },
   dialogProps = null,
 ) {
+  // 优先使用外部注册的 $dialog；再尝试组件上下文 useDialog；再退回离散 API（仅全局创建一次）
+  const dialogInstance = getDialogInstanceOnce()
+  
   const defaultModeEnum = {
     none: { sub: '', read: false },
     create: { sub: '创建', read: false },
@@ -106,7 +138,7 @@ export function commonDialogMethod(
       ? () => titleFull(defaultModeEnum[mode]?.sub)
       : titleFull
 
-  const d = $dialog.create({
+  const d = dialogInstance.create({
     type: 'info',
     ...dialogDefaultOption,
     ...(!noTitle

package/src/dialog/useCommonDialog.js

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

@@ -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.js

@@ -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/form/DataForm.vue

@@ -5,6 +5,14 @@ import { ref, unref } from 'vue'
 import Options from '../options/Options.jsx'
 import {initRules} from '../dialog/utils/dialog.js'
 import { toArray } from 'core'
+import { registerDirectives } from '../directives/auto-register'
+import { getCurrentInstance } from 'vue'
+
+// 自动注册指令
+const instance = getCurrentInstance()
+if (instance?.appContext?.app) {
+  registerDirectives(instance.appContext.app)
+}
 const props = defineProps({
   isNo: {
     type: Boolean,

package/src/index.js

@@ -1,4 +1,5 @@
 export { commonDialogMethod } from './dialog/commonDialog'
+export { useCommonDialog } from './dialog/useCommonDialog'
 
 export { default as DataForm } from './form/DataForm.vue'
 export {
@@ -9,7 +10,8 @@ export {
 export { default as Options } from './options/Options.jsx'
 export { default as CommonQuery } from './query/CommonQuery.vue'
 
-export { createActionColumnJsx } from './table/opr/useDataColumn'
+export { createActionColumnJsx, createQRCode } from './table/opr/useDataColumn'
+export { useQRCode } from './table/opr/useQRCode'
 
 export { default as OprButton } from './table/opr/useDataColumnButton.jsx'
 
@@ -29,18 +31,27 @@ export { ArrayToObject } from './utils/array'
 
 
 
-export { customUpload, registryUpload } from './utils/upload'
+export { customUpload, registryUpload, getFileUrl } from './utils/upload'
+export { setupConfig, getConfig, getBaseURL, getHasPermission, getUploadMethod, checkPermission, getDialogConfig, registerDialogInstance, getDialogInstance } from './utils/config'
+export { createDialog, createDialogMethods, createDialogOptions } from './utils/dialog'
 
 export { default as DataTable } from './table/DataTable.vue'
 
 
-export { labelField as globalLabelField,valueField as globalValueField } from './enum/options'
+export { labelField as globalLabelField, valueField as globalValueField } from './enum/options'
 
 
-export {initRules} from './dialog/utils/dialog.js'
+export { initRules } from './dialog/utils/dialog.js'
 
 export { ellipsis } from './table/utils/ellipsis.js'
 
 export { initRouteMeta } from './plugin/vite/initRouteMeta'
 
-export { orderEnum } from './enum/sort'
+export { orderEnum } from './enum/sort'
+
+// 导出插件和指令
+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'

package/src/options/Options.jsx

@@ -16,9 +16,23 @@ import {
 } from '../enum/options'
 import { getOptions } from './defaultOptions'
 import SvgIcon from '../image/SvgIcon.vue'
+import { registerDirectives, getGlobalApp } from '../directives/auto-register'
+import { getCurrentInstance } from 'vue'
 
 export default defineComponent(
   (props, { emit }) => {
+    // 自动注册 corePermission 指令（如果尚未注册）
+    // 必须在组件渲染前注册，确保指令可用
+    const instance = getCurrentInstance()
+    if (instance?.appContext?.app) {
+      registerDirectives(instance.appContext.app)
+    } else {
+      // 如果无法从实例获取，尝试使用全局应用实例
+      const globalApp = getGlobalApp()
+      if (globalApp) {
+        registerDirectives(globalApp)
+      }
+    }
     const _value = ref(props.value)
     const _isRead = computed(() => props.read || false)
 
@@ -62,9 +76,9 @@ export default defineComponent(
       (v) => {
         emit('update:value', v)
       }
-    ,{
-      immediate: true,
-    })
+      , {
+        immediate: true,
+      })
 
     function initProps(cProp) {
       let obj = {}
@@ -130,7 +144,7 @@ export default defineComponent(
           style={{
             width: '100%',
           }}
-          {...(item?.contentProps||{})}
+          {...(item?.contentProps || {})}
         >
           {initMain(item?.prefix)}
           {initMain(item?.default || item)}
@@ -205,7 +219,7 @@ export default defineComponent(
 
       return (
         <NFormItem
-          v-permission={item?.permission}
+          v-corePermission={item?.permission}
           key={index}
           showLabel={!item?.noLabel}
           {...item?.formItemProps}
@@ -231,31 +245,30 @@ export default defineComponent(
               >
                 {item?.labelSuffix
                   ? (
-                      typeof item?.labelSuffix === 'string'
-                        ? (
-                            <NIcon
-                              {...{
-                                class: 'wh-20px c-inherit',
-                                ...item?.labelSuffixProps,
-                              }}
-                            >
-                              <SvgIcon name={item?.labelSuffix} />
-                            </NIcon>
-                          )
-                        : (
-                            item?.labelSuffix?.()
-                          )
-                    )
+                    typeof item?.labelSuffix === 'string'
+                      ? (
+                        <NIcon
+                          {...{
+                            class: 'wh-20px c-inherit',
+                            ...item?.labelSuffixProps,
+                          }}
+                        >
+                          <SvgIcon name={item?.labelSuffix} />
+                        </NIcon>
+                      )
+                      : (
+                        item?.labelSuffix?.()
+                      )
+                  )
                   : (
-                      <></>
-                    )}
-                {`${
-                  unref(
-                    typeof item?.[props.labelField] === 'function'
-                      ? item?.[props.labelField]?.()
-                      : item?.[props.labelField],
-                  ) || ''
-                } ${_isRead.value || item.read ? '  ' : '  '}
+                    <></>
+                  )}
+                {`${unref(
+                  typeof item?.[props.labelField] === 'function'
+                    ? item?.[props.labelField]?.()
+                    : item?.[props.labelField],
+                ) || ''
+                  } ${_isRead.value || item.read ? '  ' : '  '}
               `}
               </div>
             ),
@@ -282,17 +295,17 @@ export default defineComponent(
               : unref(isRender)
           )
             ? (
-                item?.render
-                  ? (
-                      item?.render(unref(_value), index, {
-                        setValue,
-                        value: unref(_value),
-                      })
-                    )
-                  : (
-                      <CreateFormItem item={item} index={index} />
-                    )
-              )
+              item?.render
+                ? (
+                  item?.render(unref(_value), index, {
+                    setValue,
+                    value: unref(_value),
+                  })
+                )
+                : (
+                  <CreateFormItem item={item} index={index} />
+                )
+            )
             : null
         })}
       </NSpace>

package/src/plugin/index.js

@@ -0,0 +1,20 @@
+/**
+ * 库插件
+ * 用于注册指令等全局功能
+ */
+import { registerDirectives } from '../directives/auto-register'
+
+/**
+ * 安装插件
+ * @param {Object} app - Vue 应用实例
+ * @param {Object} options - 插件选项
+ */
+export function install(app, options = {}) {
+  // 注册所有指令（使用 corePermission 名称）
+  registerDirectives(app)
+}
+
+export default {
+  install,
+}
+

package/src/query/CommonQuery.vue

@@ -3,7 +3,14 @@ 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 { computed, onMounted, onUnmounted, ref, getCurrentInstance } from 'vue'
+import { registerDirectives } from '../directives/auto-register'
+
+// 自动注册指令
+const instance = getCurrentInstance()
+if (instance?.appContext?.app) {
+  registerDirectives(instance.appContext.app)
+}
 
 // 防抖函数
 function debounce(func, delay) {

package/src/table/DataTable.vue

@@ -5,10 +5,17 @@ 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'
+
+// 自动注册指令
+const instance = getCurrentInstance()
+if (instance?.appContext?.app) {
+  registerDirectives(instance.appContext.app)
+}
 
 const props = defineProps({
   data: {
@@ -71,6 +78,16 @@ const props = defineProps({
 const route = useRoute()
 const FilterKey = 'filter_key'
 const emit = defineEmits(['sorted'])
+
+// 安全获取路由路径，如果没有路由上下文则使用默认值
+const getRoutePath = () => {
+  try {
+    return route?.fullPath || route?.path || ''
+  } catch {
+    return ''
+  }
+}
+
 const _data = computed(() => {
   console.log('table -data', props.data)
 
@@ -125,8 +142,9 @@ watch(
 
 function init() {
   const columns = unref(props.columns)
+  const routePath = getRoutePath()
   headDefault.value
-    = getFilterAll.value?.[route.fullPath]
+    = (routePath && getFilterAll.value?.[routePath])
       || columns?.map((v, i) => v?.key || dayjs().valueOf() + i)
 
   const arr = props.isFilter
@@ -223,8 +241,11 @@ function filterHandle() {
               selectItem={headDefault.value}
               defaultItem={props.defaultColumns}
               onSubmit={(v) => {
-                getFilterAll.value[route.fullPath] = v
+                const routePath = getRoutePath()
+                if (routePath) {
+                  getFilterAll.value[routePath] = v
                 setHeadFilter(getFilterAll.value)
+                }
                 init()
                 cancel()
               }}