@wzyjs/uis 0.3.28 → 0.3.30

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

@@ -1,65 +0,0 @@
-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
-  })
-
-  // 同步外部传入的 activeKey
-  useEffect(() => {
-    const tabs = list?.toolbar?.tabs as any
-    if (tabs && tabs.activeKey !== undefined && tabs.activeKey !== activeTabKey) {
-      setTabActiveKey(tabs.activeKey)
-    }
-  }, [list?.toolbar?.tabs])
-
-  // 当 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: (key: string) => {
-        setTabActiveKey(key)
-        originalTabs.onChange?.(key)
-      },
-    }
-
-    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

@@ -1,107 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,91 +0,0 @@
-'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

@@ -1,188 +0,0 @@
-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 // 可选，有值时为编辑模式，无值时为创建模式
-}

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

@@ -1,87 +0,0 @@
-import type { PaginationState, ProColumnsPro } from '../types'
-
-export const transformPagination = (pagination: PaginationState) => {
-  return {
-    skip: (pagination.current - 1) * pagination.pageSize,
-    take: pagination.pageSize,
-  }
-}
-
-export const transformOrder = (sort: Record<string, 'ascend' | 'descend'>) => {
-  const orderByFields: Array<Record<string, 'asc' | 'desc'>> = []
-
-  Object.keys(sort).forEach((key) => {
-    if (sort[key]) {
-      orderByFields.push({
-        [key]: sort[key] === 'ascend' ? 'asc' : 'desc',
-      })
-    }
-  })
-
-  // 始终返回数组格式以支持多重排序
-  return orderByFields.length > 0 ? orderByFields : undefined
-}
-
-export const transformWhere = (filter: Record<string, (string | number)[] | null>, columns: ProColumnsPro[]) => {
-  const where: Record<string, any> = {}
-
-  Object.keys(filter).forEach((key) => {
-    const value = filter[key]
-    if (value !== null && value !== undefined) {
-      const column = columns.find(col => col.dataIndex === key)
-
-      // 根据字段类型转换过滤条件
-      if (column) {
-        switch (column.valueType) {
-          case 'text':
-          case 'textarea':
-            // 文本类型使用 contains 搜索
-            if (typeof value === 'string') {
-              where[key] = { contains: value }
-            }
-            break
-          case 'select':
-          case 'option':
-            if ((column?.fieldProps as any)?.multiple) {
-              where[key] = { in: value }
-            } else {
-              where[key] = { equals: value }
-            }
-            break
-          case 'dateRange':
-          case 'dateTimeRange':
-            // 日期范围搜索
-            if (value.length >= 2) {
-              where[key] = {
-                gte: value[0],
-                lte: value[1],
-              }
-            }
-            break
-          case 'digit':
-          case 'money':
-            // 数字类型
-            if (typeof value === 'number') {
-              where[key] = { equals: value }
-            }
-            break
-          case 'switch':
-            // 布尔类型
-            if (typeof value === 'boolean') {
-              where[key] = { equals: value }
-            }
-            break
-          case 'tags':
-            where[key] = { equals: value }
-            break
-          default:
-            where[key] = { equals: value }
-        }
-      } else {
-        where[key] = { equals: value }
-      }
-    }
-  })
-
-  return Object.keys(where).length > 0 ? where : undefined
-}

package/src/components/DateSwitcher/index.module.scss

@@ -1,10 +0,0 @@
-.picker {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-
-  :global(.ant-picker-input input) {
-    text-align: center !important;
-    cursor: pointer;
-  }
-}

package/src/components/DateSwitcher/index.tsx

@@ -1,75 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-
-import { DatePicker, Button } from 'antd'
-import { LeftOutlined, RightOutlined } from '@ant-design/icons'
-
-import { dayjs, type Dayjs } from '@wzyjs/utils/web'
-
-import styles from './index.module.scss'
-
-interface DateSwitcherProps {
-  value?: Dayjs
-  onChange?: (date: Dayjs) => void
-}
-
-export const DateSwitcher = (props: DateSwitcherProps) => {
-  const { value = dayjs(), onChange } = props
-
-  const [selectedDate, setSelectedDate] = useState(value)
-
-  const handleDateChange = (date: Dayjs | null) => {
-    if (date) {
-      setSelectedDate(date)
-      onChange?.(date)
-    }
-  }
-
-  const handlePrevDay = () => {
-    const newDate = selectedDate.subtract(1, 'day')
-    handleDateChange(newDate)
-  }
-
-  const handleNextDay = () => {
-    const newDate = selectedDate.add(1, 'day')
-    handleDateChange(newDate)
-  }
-
-  const isToday = selectedDate.isSame(dayjs(), 'day')
-
-  return (
-    <div className={styles.picker}>
-      <Button
-        type='text'
-        icon={<LeftOutlined />}
-        onClick={handlePrevDay}
-        className='flex items-center justify-center'
-      />
-      <DatePicker
-        value={selectedDate}
-        onChange={handleDateChange}
-        allowClear={false}
-        suffixIcon={null}
-        className='w-40 text-center cursor-pointer'
-        style={{ border: 'none' }}
-        components={{
-          input: props => (
-            <div {...props} className={isToday ? 'text-green-600' : ''}>
-              <span>{selectedDate.format('YYYY-MM-DD')}</span>
-              <span style={{ marginLeft: 5 }}>
-                (周{['日', '一', '二', '三', '四', '五', '六'][dayjs(selectedDate).day()]})
-              </span>
-            </div>
-          ),
-        }}
-      />
-      <Button
-        type='text'
-        icon={<RightOutlined />}
-        onClick={handleNextDay}
-        className='flex items-center justify-center'
-      />
-    </div>
-  )
-}

package/src/components/DownloadLink/index.tsx

@@ -1,36 +0,0 @@
-'use client'
-
-import React from 'react'
-
-interface DownloadLinkProps {
-  url: string
-  filename?: string
-}
-
-export const DownloadLink = ({ url, filename }: DownloadLinkProps) => {
-  const handleDownload = (e: any) => {
-    e.preventDefault()
-    fetch(url, { method: 'GET' })
-    .then(response => response.blob())
-    .then(blob => {
-      const downloadUrl = window.URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = downloadUrl
-      a.download = filename || '下载文件'
-      document.body.appendChild(a)
-      a.click()
-      a.remove()
-      window.URL.revokeObjectURL(downloadUrl)
-    })
-    .catch((err) => {
-      console.log(666, err)
-      alert('下载失败')
-    })
-  }
-
-  return (
-    <a href={url} onClick={handleDownload}>
-      下载
-    </a>
-  )
-}