@xmszm/core 0.0.1 → 0.0.2

package/src/table/opr/useDataColumn.jsx

@@ -1,9 +1,10 @@
-import { hasPermission } from '@/utils/permission'
+import { checkPermission } from '../../utils/config'
 import { NButton, NImage, NSpace, NSpin } from 'naive-ui'
 import { ref } from 'vue'
 import DataColumnCollet from './DataColumnCollet.jsx'
 import OprButton from './useDataColumnButton.jsx'
 import Pop from './useDataColumnPop.jsx'
+import { createDialogOptions } from '../../utils/dialog'
 
 export const rowIndexKey = (row, index) => (row ? JSON.stringify(row) : index)
 
@@ -39,7 +40,7 @@ export function createActionColumnJsx(
     actions = defaultOption
     actions.forEach((itm, idx) => {
       if (itm.permission) {
-        if (hasPermission(itm.permission)) {
+        if (checkPermission(itm.permission)) {
           if (!collectParams || idx < collect.max)
             width += itm?.label?.length * 12 + 36
 
@@ -77,101 +78,132 @@ export function createActionColumnJsx(
 
   return filterAction.length
     ? {
-        title: '操作',
-        key: 'opr',
-        fixed: 'right',
-        align: 'left',
-        width,
-        ...oprParams,
-        render(row, index) {
-          const vNodes = collect
-            ? (
-                <DataColumnCollet
-                  data={row}
-                  index={index}
-                  max={collect.max}
-                  options={filterAction}
-                />
-              )
-            : (
-                filterAction
-                  .map(
-                    (
-                      {
-                        isRender = () => true,
-                        onClick = null,
-                        mode = null,
-                        disabled = false,
-                        type = 'primary',
-                        ...action
-                      },
-                      i,
-                    ) => {
-                      return isRender?.(row)
+      title: '操作',
+      key: 'opr',
+      fixed: 'right',
+      align: 'left',
+      width,
+      ...oprParams,
+      render(row, index) {
+        const vNodes = collect
+          ? (
+            <DataColumnCollet
+              data={row}
+              index={index}
+              max={collect.max}
+              options={filterAction}
+            />
+          )
+          : (
+            filterAction
+              .map(
+                (
+                  {
+                    isRender = () => true,
+                    onClick = null,
+                    mode = null,
+                    disabled = false,
+                    type = 'primary',
+                    ...action
+                  },
+                  i,
+                ) => {
+                  return isRender?.(row)
+                    ? (
+                      mode === 'pop'
                         ? (
-                            mode === 'pop'
-                              ? (
-                                  <Pop
-                                    onClick={onClick}
-                                    row={row}
-                                    index={index}
-                                    action={action}
-                                    key={rowIndexKey(row, index) + i}
-                                  >
-                                    <NButton
-                                      text
-                                      disabled={disabled && disabled(row)}
-                                      type={disabled && disabled(row) ? 'default' : type}
-                                      {...action}
-                                    >
-                                      {typeof action?.label === 'function'
-                                        ? action?.label(row)
-                                        : action?.label}
-                                    </NButton>
-                                  </Pop>
-                                )
-                              : (
-                                  <OprButton
-                                    row={row}
-                                    action={{
-                                      ...action,
-                                      disabled,
-                                      onClick,
-                                      type,
-                                    }}
-                                    index={index}
-                                    key={rowIndexKey(row, index) + i}
-                                  />
-                                )
-                          )
-                        : undefined
-                    },
-                  )
-                  .filter(v => v)
-              )
-          return oprParams?.isRender
-            ? (
-                oprParams?.render(row)
-              )
-            : (
-                <NSpace
-                  align="center"
-                  wrap-item={false}
-                  size={18}
-                  key={rowIndexKey(row, index)}
-                >
-                  {vNodes}
-                </NSpace>
+                          <Pop
+                            onClick={onClick}
+                            row={row}
+                            index={index}
+                            action={action}
+                            key={rowIndexKey(row, index) + i}
+                          >
+                            <NButton
+                              text
+                              disabled={disabled && disabled(row)}
+                              type={disabled && disabled(row) ? 'default' : type}
+                              {...action}
+                            >
+                              {typeof action?.label === 'function'
+                                ? action?.label(row)
+                                : action?.label}
+                            </NButton>
+                          </Pop>
+                        )
+                        : (
+                          <OprButton
+                            row={row}
+                            action={{
+                              ...action,
+                              disabled,
+                              onClick,
+                              type,
+                            }}
+                            index={index}
+                            key={rowIndexKey(row, index) + i}
+                          />
+                        )
+                    )
+                    : undefined
+                },
               )
-        },
-      }
+              .filter(v => v)
+          )
+        return oprParams?.isRender
+          ? (
+            oprParams?.render(row)
+          )
+          : (
+            <NSpace
+              align="center"
+              wrap-item={false}
+              size={18}
+              key={rowIndexKey(row, index)}
+            >
+              {vNodes}
+            </NSpace>
+          )
+      },
+    }
     : undefined
 }
 
+/**
+ * 创建二维码弹窗
+ * @param {Object} row - 行数据
+ * @param {Function} fn - 获取二维码的函数
+ * @returns {Promise<boolean>}
+ * 
+ * @example
+ * import { useQRCode } from '@xmszm/core'
+ * 
+ * export default defineComponent({
+ *   setup() {
+ *     const showQR = useQRCode()
+ *     
+ *     const handleShowQR = (row) => {
+ *       showQR(row, async () => {
+ *         return await getQRCode(row.id)
+ *       })
+ *     }
+ *     
+ *     return { handleShowQR }
+ *   }
+ * })
+ */
 export async function createQRCode(row, fn = null) {
+  const dialogInstance = getDialogInstance()
+  
+  if (!dialogInstance) {
+    throw new Error('无法获取 dialog 实例。请使用 useQRCode hook 或在组件中通过 setupConfig 注册 dialog 实例。')
+  }
+  
   const code = ref(null)
   const loading = ref(false)
-  $dialog.info({
+  
+  const dialogOptions = createDialogOptions({
+    type: 'info',
     showIcon: false,
     style: {
       width: '350px',
@@ -186,7 +218,10 @@ export async function createQRCode(row, fn = null) {
         <div className="qr-title">{loading.value ? '' : row.name}</div>
       </div>
     ),
-  })
+  }, dialogInstance)
+  
+  dialogInstance.info(dialogOptions)
+  
   if (fn) {
     loading.value = true
     code.value = await fn()

package/src/table/opr/useQRCode.js

@@ -0,0 +1,40 @@
+/**
+ * useQRCode Hook
+ * 在组件中使用 createQRCode 的便捷方式
+ */
+import { useDialog } from 'naive-ui'
+import { createQRCode } from './useDataColumn'
+import { registerDialogInstance } from '../../utils/config'
+
+/**
+ * 使用 QRCode 的 Hook
+ * @returns {Function} showQRCode 函数
+ * 
+ * @example
+ * import { useQRCode } from '@xmszm/core'
+ * 
+ * export default defineComponent({
+ *   setup() {
+ *     const showQRCode = useQRCode()
+ *     
+ *     const handleShowQR = (row) => {
+ *       showQRCode(row, async () => {
+ *         return await getQRCode(row.id)
+ *       })
+ *     }
+ *     
+ *     return { handleShowQR }
+ *   }
+ * })
+ */
+export function useQRCode() {
+  const dialog = useDialog()
+  
+  // 注册 dialog 实例到全局配置
+  registerDialogInstance(dialog)
+  
+  return (row, fn) => {
+    return createQRCode(row, fn)
+  }
+}
+

package/src/utils/config.js

@@ -0,0 +1,178 @@
+/**
+ * 全局配置系统
+ * 用于统一管理库的外部依赖配置
+ */
+
+/**
+ * 配置对象
+ */
+const config = {
+  // API 基础地址
+  baseURL: '',
+
+  // 权限检查函数
+  hasPermission: null,
+
+  // 上传方法
+  uploadMethod: null,
+
+  // Dialog 配置
+  dialog: {
+    // Dialog 实例（可通过 setupConfig 注册，或内部自动获取）
+    instance: null,
+    // 是否继承外部定义的主题色（默认 true）
+    inheritTheme: true,
+    // 主题色覆盖（当 inheritTheme 为 false 时使用）
+    themeOverrides: null,
+  },
+}
+
+/**
+ * 初始化配置
+ * @param {Object} options - 配置选项
+ * @param {string} [options.baseURL] - API 基础地址
+ * @param {Function} [options.hasPermission] - 权限检查函数 (permission: string) => boolean
+ * @param {Function} [options.uploadMethod] - 上传方法 (config: AxiosRequestConfig) => Promise
+ * @param {Object} [options.dialog] - Dialog 配置
+ * @param {boolean} [options.dialog.inheritTheme] - 是否继承外部定义的主题色（默认 true）
+ * @param {Object} [options.dialog.themeOverrides] - 主题色覆盖（当 inheritTheme 为 false 时使用）
+ * @example
+ * import { setupConfig } from '@xmszm/core'
+ * 
+ * setupConfig({
+ *   baseURL: 'https://api.example.com',
+ *   hasPermission: (permission) => {
+ *     const permissions = getPermissions() // 你的权限获取逻辑
+ *     return permissions.includes(permission)
+ *   },
+ *   uploadMethod: (config) => axios.request(config),
+ *   dialog: {
+ *     inheritTheme: false, // 不继承外部主题色
+ *     themeOverrides: {
+ *       // 自定义主题色
+ *     }
+ *   }
+ * })
+ */
+export function setupConfig(options = {}) {
+  if (options.baseURL !== undefined) {
+    config.baseURL = options.baseURL
+  }
+
+  if (options.hasPermission !== undefined) {
+    if (typeof options.hasPermission !== 'function') {
+      throw new TypeError('hasPermission 必须是一个函数')
+    }
+    config.hasPermission = options.hasPermission
+  }
+
+  if (options.uploadMethod !== undefined) {
+    if (typeof options.uploadMethod !== 'function') {
+      throw new TypeError('uploadMethod 必须是一个函数')
+    }
+    config.uploadMethod = options.uploadMethod
+  }
+
+  if (options.dialog !== undefined) {
+    if (typeof options.dialog !== 'object') {
+      throw new TypeError('dialog 必须是一个对象')
+    }
+    if (options.dialog.instance !== undefined) {
+      config.dialog.instance = options.dialog.instance
+    }
+    if (options.dialog.inheritTheme !== undefined) {
+      config.dialog.inheritTheme = options.dialog.inheritTheme
+    }
+    if (options.dialog.themeOverrides !== undefined) {
+      config.dialog.themeOverrides = options.dialog.themeOverrides
+    }
+  }
+
+  return config
+}
+
+/**
+ * 获取配置
+ * @returns {Object} 配置对象
+ */
+export function getConfig() {
+  return { ...config }
+}
+
+/**
+ * 获取 BASE_URL
+ * @returns {string}
+ */
+export function getBaseURL() {
+  return config.baseURL
+}
+
+/**
+ * 获取权限检查函数
+ * @returns {Function|null}
+ */
+export function getHasPermission() {
+  return config.hasPermission
+}
+
+/**
+ * 获取上传方法
+ * @returns {Function|null}
+ */
+export function getUploadMethod() {
+  return config.uploadMethod
+}
+
+/**
+ * 获取 Dialog 配置
+ * @returns {Object}
+ */
+export function getDialogConfig() {
+  return { ...config.dialog }
+}
+
+/**
+ * 注册 Dialog 实例（可选，如果不注册则内部自动获取）
+ * @param {Object} dialogInstance - dialog 实例（从 useDialog 获取）
+ */
+export function registerDialogInstance(dialogInstance) {
+  config.dialog.instance = dialogInstance
+}
+
+/**
+ * 获取 Dialog 实例
+ * @returns {Object|null}
+ */
+export function getDialogInstance() {
+  return config.dialog.instance
+}
+
+/**
+ * 检查权限（带默认值）
+ * @param {string} permission - 权限标识
+ * @returns {boolean}
+ */
+export function checkPermission(permission) {
+  if (config.hasPermission) {
+    return config.hasPermission(permission)
+  }
+  // 默认返回 true，避免未配置时阻塞功能
+  console.warn('hasPermission 未配置，默认返回 true。请使用 setupConfig 配置权限检查函数。')
+  return true
+}
+
+// 兼容旧版 API（向后兼容）
+// 注意：registryUpload 在 upload.js 中导出，这里不重复导出
+
+export default {
+  setupConfig,
+  getConfig,
+  getBaseURL,
+  getHasPermission,
+  getUploadMethod,
+  checkPermission,
+  getDialogConfig,
+  registerDialogInstance,
+  getDialogInstance,
+}
+

package/src/utils/dialog.js

@@ -0,0 +1,110 @@
+/**
+ * Dialog 工具函数
+ * 使用 useDialog 替代全局 $dialog
+ */
+import { getCurrentInstance } from 'vue'
+import { useDialog } from 'naive-ui'
+import { getDialogConfig, getDialogInstance as getRegisteredDialogInstance } from './config'
+
+/**
+ * 获取 dialog 实例
+ * 优先从配置中获取（如果已注册），否则从当前组件实例获取
+ * @returns {Object|null} dialog 实例
+ */
+export function getDialogInstance() {
+  // 1. 优先从配置中获取（如果外部已注册）
+  const registered = getRegisteredDialogInstance()
+  if (registered) {
+    return registered
+  }
+
+  // 2. 尝试从当前组件实例获取
+  try {
+    const instance = getCurrentInstance()
+    if (instance?.appContext?.app) {
+      // 在组件上下文中，尝试通过 app 实例获取 dialog
+      // 注意：useDialog 必须在 setup 中调用，这里我们无法直接调用
+      // 所以需要通过其他方式获取
+      // 实际上，如果不在组件上下文中，这里会返回 null
+      // 建议在组件中使用 useCommonDialog hook，或通过 setupConfig 注册
+      return null
+    }
+  } catch (e) {
+    // 忽略错误
+  }
+
+  return null
+}
+
+/**
+ * 创建 dialog 配置，应用主题色继承设置
+ * @param {Object} options - dialog 选项
+ * @param {Object} dialogInstance - dialog 实例（从 useDialog 获取）
+ * @returns {Object} 处理后的 dialog 选项
+ */
+export function createDialogOptions(options = {}, dialogInstance = null) {
+  const dialogConfig = getDialogConfig()
+
+  // 如果配置了不继承主题色，则添加 themeOverrides
+  if (!dialogConfig.inheritTheme && dialogConfig.themeOverrides) {
+    return {
+      ...options,
+      themeOverrides: {
+        ...dialogConfig.themeOverrides,
+        ...(options.themeOverrides || {}),
+      },
+    }
+  }
+
+  return options
+}
+
+/**
+ * 使用 dialog 的工具函数
+ * 在组件中使用：const dialog = useDialog(); createDialog(dialog, options)
+ * @param {Object} dialogInstance - dialog 实例（从 useDialog 获取）
+ * @param {Object} options - dialog 选项
+ * @returns {Object} dialog 返回的对象
+ */
+export function createDialog(dialogInstance, options = {}) {
+  if (!dialogInstance) {
+    throw new Error('dialogInstance 是必需的。请在组件中使用 useDialog() 获取实例，然后传递给此函数。')
+  }
+
+  const finalOptions = createDialogOptions(options, dialogInstance)
+  return dialogInstance.create(finalOptions)
+}
+
+/**
+ * Dialog 快捷方法
+ * @param {Object} dialogInstance - dialog 实例
+ */
+export function createDialogMethods(dialogInstance) {
+  if (!dialogInstance) {
+    throw new Error('dialogInstance 是必需的。请在组件中使用 useDialog() 获取实例。')
+  }
+
+  return {
+    info: (options) => {
+      const finalOptions = createDialogOptions({ type: 'info', ...options }, dialogInstance)
+      return dialogInstance.info(finalOptions)
+    },
+    success: (options) => {
+      const finalOptions = createDialogOptions({ type: 'success', ...options }, dialogInstance)
+      return dialogInstance.success(finalOptions)
+    },
+    warning: (options) => {
+      const finalOptions = createDialogOptions({ type: 'warning', ...options }, dialogInstance)
+      return dialogInstance.warning(finalOptions)
+    },
+    error: (options) => {
+      const finalOptions = createDialogOptions({ type: 'error', ...options }, dialogInstance)
+      return dialogInstance.error(finalOptions)
+    },
+    create: (options) => {
+      const finalOptions = createDialogOptions(options, dialogInstance)
+      return dialogInstance.create(finalOptions)
+    },
+  }
+}
+

package/src/utils/upload.js

@@ -7,20 +7,15 @@
  * @typedef {Promise<import('axios').AxiosResponse<UploadData>>} UploadDataPromise
  */
 
-import { BASE_URL } from '@/utils/request'
+import { getBaseURL, getUploadMethod, setupConfig } from './config'
 
 /**
- * 实际的上传实现函数
- * @type {null | ((AxiosRequestConfig) => UploadDataPromise)}
- */
-let uploadMethod = null
-
-/**
- * 注册上传方法
+ * 注册上传方法（兼容旧版 API）
  * @param {function(AxiosRequestConfig): UploadDataPromise} fn - 实际的上传实现函数
+ * @deprecated 请使用 setupConfig({ uploadMethod: fn }) 代替
  */
 export function registryUpload(fn) {
-  uploadMethod = fn
+  setupConfig({ uploadMethod: fn })
 }
 
 /**
@@ -29,17 +24,29 @@ export function registryUpload(fn) {
  * @returns {UploadDataPromise} 上传结果Promise
  */
 export function customUpload(...args) {
+  const uploadMethod = getUploadMethod()
   if (typeof uploadMethod !== 'function') {
-    throw new TypeError('请先通过 registryUpload(fn) 注册上传实现')
+    throw new TypeError('请先通过 setupConfig({ uploadMethod: fn }) 或 registryUpload(fn) 注册上传实现')
   }
   return uploadMethod(...args)
 }
 
+/**
+ * 获取文件 URL
+ * @param {string} url - 文件路径
+ * @param {number|null} ossSize - OSS 样式尺寸
+ * @returns {string} 完整的文件 URL
+ */
 export function getFileUrl(url, ossSize = null) {
   if (url && !url?.startsWith('http')) {
+    const baseURL = getBaseURL()
+    if (!baseURL) {
+      console.warn('BASE_URL 未配置，返回原始 URL。请使用 setupConfig({ baseURL: "..." }) 配置。')
+      return url
+    }
     return !ossSize
-      ? `${BASE_URL}${url}`
-      : `${BASE_URL}${url}?x-oss-process=style/w${ossSize}`
+      ? `${baseURL}${url}`
+      : `${baseURL}${url}?x-oss-process=style/w${ossSize}`
   }
   return url
 }