@wzyjs/uis 0.3.9 → 0.3.16

package/src/components/Crud/hooks/useColumns.tsx

@@ -0,0 +1,169 @@
+import React, { useMemo } from 'react'
+
+import { Space } from 'antd'
+import { CreateUpdate, Remove } from '../components'
+
+import type { ProColumnsPro, CrudProps } from '../types'
+
+interface UseColumnsParams {
+  columns: CrudProps['columns']
+  crud: CrudProps['crud']
+  update: CrudProps['update']
+  remove: CrudProps['remove']
+}
+
+const normalizeCellDom = (dom: React.ReactNode): React.ReactNode => {
+  if (!dom || typeof dom !== 'object') {
+    return dom
+  }
+
+  if ('children' in dom && 'props' in dom) {
+    return (dom as any).children
+  }
+
+  return dom
+}
+
+const normalizeRenderResult = (result: unknown) => {
+  if (!result || typeof result !== 'object') {
+    return result
+  }
+
+  if ('children' in result && 'props' in result) {
+    return (result as any).children
+  }
+
+  return result
+}
+
+export const useColumns = ({ columns, crud, update, remove }: UseColumnsParams) => {
+  // 检查是否需要显示操作列
+  const hasActions = update !== false || remove !== false
+
+  // 智能合并操作列
+  const finalColumns: ProColumnsPro[] = useMemo(() => {
+    // const proColumns = transformColumns(columns)
+    const proColumns: ProColumnsPro[] = columns.map((col: ProColumnsPro) => {
+      const isActionColumn: boolean = col.valueType === 'option'
+        || col.key === 'option'
+        || col.key === 'action'
+        || col.title === '操作'
+
+      if (col.render) {
+        const originalRender = col.render
+        return {
+          ...col,
+          render: (dom: any, record: any, index: any, action: any, schema: any) => {
+            return normalizeRenderResult(originalRender(dom, record, index, action, schema)) as any
+          },
+        }
+      }
+
+      if (isActionColumn) {
+        return col
+      }
+
+      return {
+        ...col,
+        // DragSortTable 需要包一层，不然有的字段不显示
+        render: (dom: React.ReactNode): React.ReactNode => normalizeCellDom(dom),
+      }
+    })
+
+    // 生成默认的操作按钮
+    const generateDefaultActions = (record: any) => {
+      const actions = []
+
+      if (update !== false) {
+        actions.push(
+          <CreateUpdate
+            key='update'
+            crud={crud}
+            columns={columns}
+            config={update || {}}
+            record={record}
+          />,
+        )
+      }
+
+      if (remove !== false) {
+        actions.push(
+          <Remove
+            key='remove'
+            crud={crud}
+            config={remove || {}}
+            record={record}
+          />,
+        )
+      }
+
+      return actions
+    }
+
+    // 查找是否已存在操作列
+    const existingActionColumnIndex = proColumns.findIndex(
+      col => col.key === 'option' || col.key === 'action' || col.title === '操作',
+    )
+
+    if (existingActionColumnIndex !== -1) {
+      // 如果已存在操作列，合并操作
+      const existingColumn = proColumns[existingActionColumnIndex]
+      if (!existingColumn) return proColumns
+
+      const originalRender = existingColumn.render
+
+      const mergedColumns = [...proColumns]
+      mergedColumns[existingActionColumnIndex] = {
+        ...existingColumn,
+        render: (text: any, record: any, index: number, action: any, schema: any) => {
+          const defaultActions = hasActions ? generateDefaultActions(record) : []
+
+          // 如果用户定义了自定义渲染，调用它
+          if (originalRender) {
+            const customActions = originalRender(text, record, index, action, schema)
+
+            // 如果自定义渲染返回 ReactElement 或数组，合并操作
+            if (React.isValidElement(customActions) || Array.isArray(customActions)) {
+              return (
+                <Space>
+                  {customActions}
+                  {defaultActions}
+                </Space>
+              )
+            }
+
+            // 如果自定义渲染返回其他内容，直接使用
+            return customActions
+          }
+
+          // 没有自定义渲染时，只显示默认操作
+          return <Space>{defaultActions}</Space>
+        },
+      }
+
+      return mergedColumns
+    } else {
+      // 如果不存在操作列且需要操作，添加新的操作列
+      return [
+        ...proColumns,
+        ...(hasActions ? [{
+          title: '操作',
+          dataIndex: 'action',
+          key: 'action',
+          fixed: 'right' as const,
+          width: 120,
+          search: false,
+          render: (_: any, record: any) => (
+            <Space>
+              {generateDefaultActions(record)}
+            </Space>
+          ),
+        }] : []),
+      ]
+    }
+  }, [columns, hasActions, update, remove, crud])
+
+  return {
+    finalColumns,
+  }
+}

package/src/components/Crud/hooks/useList.ts

@@ -0,0 +1,54 @@
+import { useState, useEffect, useMemo } from 'react'
+import type { CrudProps } from '../types'
+
+interface UseTabsStateParams {
+  list: CrudProps['list']
+}
+
+export const useList = ({ list }: UseTabsStateParams) => {
+  // 初始化 activeTabKey 状态
+  const [activeTabKey, setTabActiveKey] = useState<string | undefined>(() => {
+    const tabs = list?.toolbar?.tabs as any
+    if (!tabs) {
+      return
+    }
+    return tabs.activeKey ?? tabs.items?.[0]?.key
+  })
+
+  // 当 Tab 变化时，将最新的类型通过 onChangeQuery 回传给父组件
+  useEffect(() => {
+    if (activeTabKey !== undefined) {
+      list?.onChangeQuery?.({
+        where: { type: activeTabKey },
+      })
+    }
+  }, [activeTabKey])
+
+  // 构造最终传递给 ProTable 的 list 配置
+  const finalList = useMemo(() => {
+    if (!list?.toolbar?.tabs) return list ?? {}
+
+    const originalTabs: any = list.toolbar.tabs
+
+    const enhancedTabs = {
+      ...originalTabs,
+      activeKey: activeTabKey,
+      onChange: setTabActiveKey,
+    }
+
+    return {
+      ...list,
+      toolbar: {
+        ...list.toolbar,
+        multipleLine: list.toolbar.multipleLine ?? !!list.toolbar.tabs.items?.length,
+        tabs: enhancedTabs,
+      },
+    }
+  }, [activeTabKey, list])
+
+  return {
+    activeTabKey,
+    setTabActiveKey,
+    finalList,
+  }
+}

package/src/components/Crud/hooks/useOrderable.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useMemo, useState } from 'react'
+import type { CrudProps, ProColumnsPro } from '../types'
+
+const dragSortKey = '__drag_sort__'
+
+const getOrderableConfig = (
+  orderable: CrudProps['orderable'],
+): Exclude<CrudProps['orderable'], boolean | undefined> => {
+  if (orderable && typeof orderable === 'object') {
+    return orderable
+  }
+  return {}
+}
+
+const sortByOrderField = <T extends Record<string, unknown>>(list: T[], orderField: string): T[] => {
+  const indexed = list.map((item, index) => ({ item, index }))
+  indexed.sort((a, b) => {
+    const av = a.item[orderField] as  number | undefined
+    const bv = b.item[orderField] as  number | undefined
+
+    const an = typeof av === 'number' && Number.isFinite(av) ? av : Number.POSITIVE_INFINITY
+    const bn = typeof bv === 'number' && Number.isFinite(bv) ? bv : Number.POSITIVE_INFINITY
+
+    return an - bn
+  })
+  return indexed.map(i => i.item)
+}
+
+export const useOrderable = <T extends Record<string, unknown>>(params: {
+  orderable: CrudProps['orderable']
+  columns: ProColumnsPro<T>[]
+  crud: CrudProps['crud']
+  update: CrudProps['update']
+  readonly?: boolean
+  cardMode?: boolean
+}) => {
+  const { orderable, columns, crud, update, readonly, cardMode } = params
+
+  const enabledFeature = !!orderable && !cardMode
+  const config = useMemo(() => getOrderableConfig(orderable), [orderable])
+
+  const orderField = config.orderField ?? 'sort'
+  const start = config.start ?? 0
+
+  const canUpdate = enabledFeature && !readonly && update !== false && !!crud.updateState?.mutateAsync
+
+  const [dataSource, setDataSource] = useState<T[]>([])
+
+  useEffect(() => {
+    if (!enabledFeature) return
+    const list = (crud.listState.data as T[]) || []
+    setDataSource(sortByOrderField(list, orderField))
+  }, [enabledFeature, crud.listState.data, orderField])
+
+  const tableColumns = useMemo((): ProColumnsPro<T>[] => {
+    if (!enabledFeature) return columns
+
+    return [
+      {
+        title: '',
+        key: dragSortKey,
+        dataIndex: dragSortKey,
+        width: 48,
+        fixed: 'left',
+        hideInSearch: true,
+        hideInForm: true,
+        render: () => null,
+      } as ProColumnsPro<T>,
+      ...columns,
+    ]
+  }, [columns, enabledFeature])
+
+  const onDragSortEnd = async (
+    _beforeIndex: number,
+    _afterIndex: number,
+    newDataSource: T[],
+  ) => {
+    const next = newDataSource.map((row, index) => ({
+      ...row,
+      [orderField]: start + index,
+    })) as T[]
+
+    setDataSource(next)
+
+    if (!canUpdate) return
+
+    await Promise.allSettled(
+      next.map((row) => {
+        const id = row.id
+        if (typeof id !== 'string' || !id) {
+          return Promise.resolve()
+        }
+        return crud.updateState.mutateAsync(id, { [orderField]: row[orderField] })
+      }),
+    )
+
+    await crud.listState.refetch()
+  }
+
+  return {
+    enabledFeature,
+    tableColumns,
+    dragSortKey: enabledFeature ? dragSortKey : undefined,
+    dataSource: enabledFeature ? dataSource : (crud.listState.data as T[] | undefined),
+    onDragSortEnd: enabledFeature ? onDragSortEnd : undefined,
+  }
+}

package/src/components/Crud/hooks/useRequest.ts

@@ -0,0 +1,41 @@
+import type { CrudProps, PaginationState } from '../types'
+import { transformOrder, transformPagination, transformWhere } from '../utils'
+
+interface UseRequest {
+  columns: CrudProps['columns']
+  list: CrudProps['list']
+}
+
+export const useRequest = ({ columns, list }: UseRequest) => {
+  const request = async (params: PaginationState, sort: any, filter: any) => {
+    const { current, pageSize, ...search } = params
+
+    // 转换分页参数
+    const pagination = transformPagination({ current, pageSize })
+
+    // 转换排序参数
+    const orderBy = transformOrder(sort)
+
+    // 转换过滤参数
+    const where = transformWhere(search, columns)
+
+    const query = {
+      ...pagination,
+      ...(orderBy && { orderBy }),
+      ...(where && { where }),
+    }
+    console.log(666, 35, params, sort, search, filter, where, query)
+
+    list?.onChangeQuery?.(query)
+
+    return {
+      data: [],
+      total: 0,
+      success: true,
+    }
+  }
+
+  return {
+    request,
+  }
+}

package/src/components/Crud/index.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { Space } from 'antd'
+import { DragSortTable, ProTable } from '@ant-design/pro-components'
+
+import { CardList, CreateUpdate, Provider } from './components'
+
+import { useColumns, useList, useOrderable, useRequest } from './hooks'
+
+export type { ProColumnsPro } from './types'
+import type { CrudProps } from './types'
+
+export const Crud = (props_: CrudProps) => {
+  const props = { ...props_ }
+
+  if (props.readonly) {
+    props.create = props.create ?? false
+    props.update = props.update ?? false
+    props.remove = props.remove ?? false
+  }
+
+  const { crud, columns, list, create, update, remove, orderable } = props
+
+  const { tableColumns, dataSource, dragSortKey, onDragSortEnd } = useOrderable({
+    orderable,
+    columns,
+    crud,
+    update,
+    readonly: props.readonly,
+    cardMode: !!list?.cardConfig,
+  })
+
+  const { finalColumns } = useColumns({ columns: tableColumns, crud, update, remove })
+
+  const { finalList } = useList({ list })
+
+  const { request } = useRequest({ list, columns })
+
+  const TableComponent = dragSortKey ? DragSortTable : ProTable
+
+  return (
+    <Provider crud={crud}>
+      <TableComponent
+        rowKey='id'
+        loading={crud.listState.isLoading}
+        columns={finalColumns as any}
+        scroll={{ x: 'max-content' }}
+        search={{
+          labelWidth: 'auto',
+        }}
+        dataSource={dataSource}
+        request={request}
+        dragSortKey={dragSortKey}
+        onDragSortEnd={onDragSortEnd as any}
+        pagination={{
+          total: crud.countState.data,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          defaultPageSize: 10,
+          pageSizeOptions: ['10', '15', '20', '30', '50'],
+          showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/总共 ${total} 条`,
+        }}
+        toolBarRender={() => [
+          create !== false ? (
+            <CreateUpdate
+              key='create'
+              crud={crud}
+              columns={tableColumns}
+              config={create || {}}
+            />
+          ) : null,
+        ].filter(Boolean)}
+        tableRender={list?.cardConfig ? (props, dom, domList) => (
+          <Space style={{ width: '100%' }}>
+            {domList.toolbar}
+            <CardList
+              crud={crud}
+              columns={columns}
+              list={list}
+              create={create}
+              update={update}
+              remove={remove}
+            />
+          </Space>
+        ) : undefined}
+        {...finalList}
+        options={{ ...(finalList as CrudProps['list'])?.options, reload: () => (crud.countState.refetch(), crud.listState.refetch()) }}
+      />
+    </Provider>
+  )
+}

package/src/components/Crud/types/index.ts

@@ -0,0 +1,188 @@
+import type { ReactNode } from 'react'
+import type { ButtonProps } from 'antd'
+import type { ProTableProps, ProFormProps, ProColumns } from '@ant-design/pro-components'
+
+// 扩展 ProColumns 类型，添加自定义的 valueType
+export type ProColumnsPro<T = any> = Omit<ProColumns<T>, 'valueType'> & {
+  valueType?: ProColumns<T>['valueType'] | 'tags' | 'enabled'
+}
+
+// 前端分页状态类型
+export interface PaginationState {
+  current: number
+  pageSize: number
+}
+
+// CRUD Hook 返回值类型（基于实际 tRPC hooks 的返回值）
+export interface Crud {
+  listState: {
+    data?: any[]
+    isLoading?: boolean
+    error?: any
+    refetch: () => any
+  }
+  countState: {
+    data?: any
+    isLoading?: boolean
+    error?: any
+    refetch: () => any
+  }
+  createState: {
+    mutate: (data: any) => void
+    mutateAsync: (data: any) => Promise<any>
+    isLoading?: boolean
+    error?: any
+  }
+  updateState: {
+    mutate: (id: string, data: any) => void
+    mutateAsync: (id: string, data: any) => Promise<any>
+    isLoading?: boolean
+    error?: any
+  }
+  removeState: {
+    mutate: (id: string) => void
+    mutateAsync: (id: string) => Promise<any>
+    isLoading?: boolean
+    error?: any
+  }
+  deleteState: {
+    mutate: (id: string) => void
+    mutateAsync: (id: string) => Promise<any>
+    isLoading?: boolean
+    error?: any
+  }
+}
+
+// 卡片字段值类型：可以是字段名或自定义渲染内容
+type CardFieldValue = string | ReactNode
+
+// 卡片配置项
+interface CardItem {
+  title?: CardFieldValue
+  extra?: CardFieldValue
+  content?: CardFieldValue
+  cover?: CardFieldValue
+  actions?: CardFieldValue[]
+  meta?: {
+    title?: CardFieldValue
+    description?: CardFieldValue
+    avatar?: CardFieldValue
+  }
+  props?: any // Card 组件的额外属性
+}
+
+interface CardConfig {
+  gutter?: [number, number] // 卡片间距
+  col?: {
+    xs?: number
+    sm?: number
+    md?: number
+    lg?: number
+    xl?: number
+    xxl?: number
+  } // 栅格配置
+  height?: string // 卡片列表容器高度
+
+  // 完全自定义渲染
+  render?: (record: any, index: number, defaultActions: ReactNode[]) => ReactNode
+
+  // 或者使用配置式渲染
+  card: CardItem | ((record: any, index: number) => CardItem)
+}
+
+// 列表配置
+export interface List extends Omit<ProTableProps<any, any>, 'columns' | 'dataSource' | 'loading'> {
+  onChangeQuery?: (query: any) => void // 用于更新查询参数
+  cardConfig?: CardConfig
+}
+
+// 创建配置
+export interface Create {
+  mode?: 'modal' | 'drawer' // 创建模式，默认为 'drawer'
+  buttonProps?: ButtonProps // 创建按钮的属性
+  formProps?: ProFormProps // 创建表单的属性
+  transformData?: (values: Record<string, unknown>) => Record<string, unknown> | Promise<Record<string, unknown>> // 提交前转换  coverData?: (record: any) => Record<string, unknown> // 转换 record 用于表单回填
+  coverData?: (record: any) => Record<string, unknown> // 转换 record 用于表单回填
+  title?: string // 弹窗标题
+  width?: number | string // 弹窗宽度
+}
+
+// 更新配置
+export interface Update {
+  mode?: 'modal' | 'drawer' // 更新模式，默认为 'drawer'
+  buttonProps?: ButtonProps // 更新按钮的属性
+  formProps?: ProFormProps // 更新表单的属性
+  transformData?: (values: Record<string, unknown>, record: any) => Record<string, unknown> | Promise<Record<string, unknown>> // 提交前转换
+  coverData?: (record: any) => Record<string, unknown> // 转换 record 用于表单回填
+  title?: string // 弹窗标题
+  width?: number | string // 弹窗宽度
+}
+
+// 删除配置
+export interface Remove {
+  confirm?: boolean // 删除前是否需要确认，默认为 true
+  buttonProps?: ButtonProps // 删除按钮的属性
+  title?: string // 确认弹窗标题
+  content?: string // 确认弹窗内容
+}
+
+export interface Orderable {
+  orderField?: string
+  start?: number
+  label?: string
+}
+
+// 主组件 Props
+export interface CrudProps {
+  // 接口
+  crud: Crud // useHabitGroupCRUD() 的返回值
+  // 列表展示配置
+  columns: ProColumnsPro[]
+  // 列表配置
+  list?: List
+  // 创建配置
+  create?: false | Create // 为 false 时不显示创建按钮
+  // 更新配置
+  update?: false | Update // 为 false 时不显示更新按钮
+  // 删除配置
+  remove?: false | Remove // 为 false 时不显示删除按钮
+  // 排序配置
+  orderable?: boolean | Orderable
+  // 只读模式，开启后上述 create/update/remove 均等同于 false
+  readonly?: boolean
+}
+
+export interface ListProps {
+  crud: Crud
+  columns: ProColumnsPro[]
+  list: List
+  create?: false | Create
+  update?: false | Update
+  remove?: false | Remove
+}
+
+// export interface CreateProps {
+//   crud: Crud
+//   columns: ProColumnsPro[]
+//   config: Create
+// }
+//
+// export interface UpdateProps {
+//   crud: Crud
+//   columns: ProColumnsPro[]
+//   config: Update
+//   record: any
+// }
+
+export interface RemoveProps {
+  crud: Crud
+  config: Remove
+  record: any
+}
+
+export interface CreateUpdateProps {
+  crud: Crud
+  columns: ProColumnsPro[]
+  config: Create | Update
+  record?: any // 可选，有值时为编辑模式，无值时为创建模式
+}