@xmszm/core 0.0.1 → 0.0.3

package/src/table/opr/useDataColumn.tsx

@@ -0,0 +1,226 @@
+import { checkPermission } from '../../utils/config'
+import { NButton, NImage, NSpace, NSpin } from 'naive-ui'
+import { ref, type VNode } from 'vue'
+import type { ActionOption, TableColumn } from '../../../types/components'
+import DataColumnCollet from './DataColumnCollet'
+import OprButton from './useDataColumnButton'
+import Pop from './useDataColumnPop'
+import { createDialogOptions } from '../../utils/dialog'
+import { getDialogInstance } from '../../utils/dialog'
+
+export const rowIndexKey = (row: any, index: number): string =>
+  row ? JSON.stringify(row) : String(index)
+
+interface CollectParams {
+  max: number
+  width: number
+}
+
+export function createActionColumnJsx(
+  defaultOption: ActionOption[],
+  oprParams: Record<string, any> | null = null,
+  collectParams?: boolean | CollectParams,
+): TableColumn | undefined {
+  // 粗滤计算操作栏占用宽度
+  const defaultCollectParams: CollectParams = {
+    max: 4,
+    width: 80,
+  }
+  let collect: CollectParams | false = false
+  if (typeof collectParams === 'boolean')
+    collect = defaultCollectParams
+  else if (typeof collectParams === 'object')
+    collect = { ...defaultCollectParams, ...collectParams }
+
+  console.log('collect', collect)
+  console.log(Array.isArray(defaultOption))
+  if (!Array.isArray(defaultOption)) {
+    throw new TypeError('需要配置数组')
+  }
+  console.log('ddd')
+  let actions: ActionOption[] = []
+  let width = 0
+  const filterAction: ActionOption[] = []
+  const isLoading = false
+
+  if (Array.isArray(defaultOption)) {
+    actions = defaultOption
+    actions.forEach((itm, idx) => {
+      if (itm.permission) {
+        if (checkPermission(itm.permission)) {
+          if (!collectParams || (typeof collect === 'object' && idx < collect.max))
+            width += (typeof itm?.label === 'string' ? itm?.label?.length : 10) * 12 + 36
+
+          filterAction.push(itm)
+        }
+      }
+      else {
+        if (!collectParams || (typeof collect === 'object' && idx < collect.max))
+          width += (typeof itm?.label === 'string' ? itm?.label?.length : 10) * 12 + 36
+        filterAction.push(itm)
+      }
+    })
+  }
+
+  width = Math.max(80, width)
+  width += isLoading ? 20 : 0
+
+  if (collect)
+    width += 2
+
+  return filterAction.length
+    ? {
+      title: '操作',
+      key: 'opr',
+      fixed: 'right',
+      align: 'left',
+      width,
+      ...oprParams,
+      render(row: any, index: number): VNode {
+        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 (typeof isRender === 'function' ? isRender(row) : isRender)
+                    ? (
+                      mode === 'pop'
+                        ? (
+                          <Pop
+                            onClick={onClick}
+                            row={row}
+                            index={index}
+                            action={action}
+                            key={rowIndexKey(row, index) + i}
+                          >
+                            <NButton
+                              text
+                              disabled={typeof disabled === 'function' ? disabled(row) : disabled}
+                              type={typeof disabled === 'function' && 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 is VNode => v !== undefined)
+          )
+        return (oprParams as any)?.isRender
+          ? (
+            (oprParams as any)?.render(row)
+          )
+          : (
+            <NSpace
+              align="center"
+              wrap-item={false}
+              size={18}
+              key={rowIndexKey(row, index)}
+            >
+              {vNodes}
+            </NSpace>
+          )
+      },
+    }
+    : undefined
+}
+
+/**
+ * 创建二维码弹窗
+ * @param row - 行数据
+ * @param 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: any,
+  fn: (() => Promise<string> | string) | null = null,
+): Promise<boolean> {
+  const dialogInstance = getDialogInstance()
+  
+  if (!dialogInstance) {
+    throw new Error('无法获取 dialog 实例。请使用 useQRCode hook 或在组件中通过 setupConfig 注册 dialog 实例。')
+  }
+  
+  const code = ref<string | null>(null)
+  const loading = ref(false)
+  
+  const dialogOptions = createDialogOptions({
+    type: 'info',
+    showIcon: false,
+    style: {
+      width: '350px',
+      height: '350px',
+    },
+    content: () => (
+      <div class="qr-box">
+        {loading.value ? <NSpin class="qr-spin" show /> : ''}
+        <div class="qr-img">
+          <NImage src={code.value} style={{ width: '100%' }} />
+        </div>
+        <div class="qr-title">{loading.value ? '' : row.name}</div>
+      </div>
+    ),
+  }, dialogInstance)
+  
+  dialogInstance.info(dialogOptions)
+  
+  if (fn) {
+    loading.value = true
+    code.value = await fn()
+    loading.value = false
+  }
+  return true
+}

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

@@ -1,8 +1,15 @@
 import { NButton } from 'naive-ui'
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, type VNode } from 'vue'
+import type { ActionOption } from '../../../types/components'
+
+interface Props {
+  action: ActionOption | null
+  row: any
+  index: number
+}
 
 export default defineComponent(
-  ({ action, row,index }) => {
+  ({ action, row, index }: Props) => {
     const {
       onClick,
       disabled,
@@ -10,7 +17,7 @@ export default defineComponent(
       loading = false,
       label = null,
       ...other
-    } = action
+    } = action || {}
     const oprBtnLoading = ref(false)
     return () => (
       <NButton
@@ -21,16 +28,16 @@ export default defineComponent(
               if (loading) {
                 oprBtnLoading.value = true
               }
-              await onClick(row,index)
+              await onClick(row)
             }
             finally {
               setTimeout(() => (oprBtnLoading.value = false), 500)
             }
           }
         }}
-        disabled={disabled && disabled(row)}
+        disabled={typeof disabled === 'function' ? disabled(row) : disabled}
         loading={oprBtnLoading.value}
-        type={disabled && disabled(row) ? 'default' : type}
+        type={typeof disabled === 'function' && disabled(row) ? 'default' : type}
         {...other}
       >
         {typeof label === 'function' ? label?.(row) : label}

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

@@ -1,8 +1,16 @@
 import { NPopconfirm } from 'naive-ui'
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, type VNode } from 'vue'
+import type { ActionOption } from '../../../types/components'
+
+interface Props {
+  onClick: ((row: any, index: number) => void | Promise<void>) | null
+  row: any
+  index: number
+  action: ActionOption | null
+}
 
 export default defineComponent(
-  ({ onClick, row, index,action }, { slots }) => {
+  ({ onClick, row, index, action }: Props, { slots }) => {
     const popLoading = ref(false)
     return () => (
       <NPopconfirm
@@ -14,7 +22,7 @@ export default defineComponent(
           try {
             if (onClick) {
               popLoading.value = true
-              await onClick(row,index)
+              await onClick(row, index)
               popLoading.value = false
               return true
             }
@@ -29,7 +37,7 @@ export default defineComponent(
         {{
           trigger: slots.default,
           default: () =>
-            action?.popProps?.content || action?.content || '确定删除该记录？',
+            action?.popProps?.content || (action as any)?.content || '确定删除该记录？',
         }}
       </NPopconfirm>
     )
@@ -37,7 +45,7 @@ export default defineComponent(
   {
     props: {
       onClick: {
-        type: [Function, null],
+        type: Function as any,
         default: null,
       },
       row: {

package/src/table/opr/useQRCode.ts

@@ -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/{array.js → array.ts}

@@ -5,11 +5,9 @@ import {
 } from '../enum/options'
 
 export function ArrayToObject(
-  arr = [],
-  { labelField = globalLabelField, valueField = globalValueField } = {
-    labelField: globalLabelField,
-    valueField: globalValueField,
-  },
+  arr: any[] = [],
+  labelField: string = globalLabelField,
+  valueField: string = globalValueField,
 ) {
   return unref(arr).reduce((o, n) => {
     o[n[valueField]] = {
@@ -21,6 +19,6 @@ export function ArrayToObject(
   }, {})
 }
 
-export function toArray(v) {
+export function toArray(v: any) {
   return Array.isArray(v) ? v : [v]
 }

package/src/utils/config.ts

@@ -0,0 +1,192 @@
+/**
+ * 全局配置系统
+ * 用于统一管理库的外部依赖配置
+ */
+
+/**
+ * 配置对象类型定义
+ */
+interface ConfigType {
+  baseURL: string
+  hasPermission: ((permission: string) => boolean) | null
+  uploadMethod: ((config: any) => Promise<any>) | null
+  dialog: {
+    instance: any
+    inheritTheme: boolean
+    themeOverrides: any
+  }
+}
+
+/**
+ * 配置对象
+ */
+const config: ConfigType = {
+  // 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: Partial<ConfigType> = {}) {
+  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.ts

@@ -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: Record<string, any> = {}, dialogInstance: any = 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: any, options: Record<string, any> = {}) {
+  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/{object.js → object.ts}

@@ -1,3 +1,4 @@
+import { unref } from 'vue'
 import {
   labelField as globalLabelField,
   valueField as globalValueField,