cx-chat 0.0.2 → 0.0.4

package/src/views/page-system/permission/index.tsx

@@ -1,562 +0,0 @@
-import { getMenuTreeAPI } from '@/api/system/menu'
-import {
-  deletePermissionAPI,
-  disablePermissionAPI,
-  enablePermissionAPI,
-  getPermissionPageAPI,
-} from '@/api/system/permission'
-import { DetailLink } from '@/components/common/detail-link'
-import { PathTags } from '@/components/common/path'
-import { useAuth } from '@/contexts/AuthContext'
-import { ALIGN, ENUM_DATA, FIXED } from '@/meta'
-import type { MenuTreeItem } from '@/types/menu'
-import {
-  buildMenuIdToLevelMap,
-  buildMenuIdToPathLabelMap,
-} from '@/utils/menuI18n'
-import type { PermissionCrudCopyVariant } from '@/utils/permission-crud'
-import ListPageView, { createListPageConfig } from '@components/table-view'
-import { CxButton, CxTag, CxTooltip } from '@cx-ui'
-import type { MenuProps } from 'antd'
-import { Dropdown } from 'antd'
-import { Copy } from 'lucide-react'
-import { useCallback, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import DetailModal from './modal/detail-modal'
-import SubmitModal from './modal/submit-modal'
-
-const useListPageConfig = createListPageConfig({
-  tableAPI: getPermissionPageAPI,
-  deleteAPI: deletePermissionAPI,
-  updateStatusAPI: ({id, status}) =>
-    Number(status) === 1
-      ? enablePermissionAPI(id)
-      : disablePermissionAPI(id),
-  treeAPI: getMenuTreeAPI,
-  submitAction: {
-    permission: 'permission:add',
-    submitType: 'modal',
-    labelKey: 'system.permission.add',
-    addDisabledNoSelectionTooltipKey:
-      'system.permission.add_disabled_no_selection',
-    addDisabledMenuTooDeepTooltipKey:
-      'system.permission.add_disabled_menu_too_deep',
-  },
-  listQuery: {
-    sort: 'sortOrder',
-    order: 'asc',
-  },
-  detailAction: {
-    detailType: 'modal',
-    labelKey: 'system.permission.view_detail',
-  },
-  pageInfo: {
-    title: 'system.permission.page_title',
-    subTitle: 'system.permission.page_subtitle',
-  },
-  tree: {
-    title: 'system.permission.tree_list',
-    fieldNames: {
-      id: 'id',
-      label: 'name',
-      children: 'children',
-    },
-    searchField: 'menuId',
-    autoSearch: true,
-    /** 无选中时查全部权限；再次点击已选节点取消选中 */
-    sameNodeReselect: 'deselect',
-    defaultSelectRoot: false,
-    fetchTableOnMount: true,
-  },
-  searchFields: [
-    {
-      prop: 'keyword',
-      label: 'system.permission.search_keyword',
-      placeholder: 'system.permission.ph_search_keyword',
-      width: '200px',
-    },
-    {
-      prop: 'status',
-      label: 'common.status',
-      type: 'select',
-      placeholder: 'common.status',
-      options: ENUM_DATA.commonStatus.option.map(({ label, value }) => ({
-        label,
-        value,
-      })),
-      width: '120px',
-    },
-    {
-      prop: 'httpMethod',
-      label: 'system.permission.http_method',
-      type: 'select',
-      placeholder: 'system.permission.ph_search_http_method',
-      options: ENUM_DATA.httpMethod.option.map(({ label, value }) => ({
-        label,
-        value,
-      })),
-      width: '130px',
-    },
-    {
-      prop: 'noLoginStatus',
-      label: 'system.permission.no_login_status',
-      type: 'select',
-      placeholder: 'system.permission.ph_search_no_login',
-      /** 值仍为 noLoginStatus：0=需要认证，1=不需要；文案按「需要认证」是/否 */
-      options: [
-        { label: 'common.yes', value: 0 },
-        { label: 'common.no', value: 1 },
-      ],
-      width: '120px',
-    },
-    {
-      prop: 'logStatus',
-      label: 'system.permission.log_status',
-      type: 'select',
-      placeholder: 'system.permission.ph_search_log',
-      options: ENUM_DATA.commonYesNo.option.map(({ label, value }) => ({
-        label,
-        value,
-      })),
-      width: '120px',
-    },
-    {
-      prop: 'apiType',
-      label: 'system.permission.api_type',
-      type: 'select',
-      placeholder: 'system.permission.ph_search_api_type',
-      options: ENUM_DATA.permissionApiType.option.map(({ label, value }) => ({
-        label,
-        value,
-      })),
-      width: '120px',
-    },
-  ],
-  statusToggle: {
-    dangerOnDisable: true,
-    disableConfirm: {
-      cancelText: 'common.cancel',
-      content: 'system.permission.disable_confirm_content',
-      contentFields: ['code'],
-      okText: 'common.confirm',
-      title: 'system.permission.disable_confirm_title',
-    },
-    enableConfirm: {
-      cancelText: 'common.cancel',
-      content: 'system.permission.enable_confirm_content',
-      contentFields: ['code'],
-      okText: 'common.confirm',
-      title: 'system.permission.enable_confirm_title',
-    },
-  },
-  table: {
-    operationWidth: 330,
-  },
-})
-
-function IndexView() {
-  const {t} = useTranslation()
-  const {hasPermission} = useAuth()
-  const pageConfig = useListPageConfig()
-  const modalRef = useRef<any>(null)
-  const [treeReloadSignal, setTreeReloadSignal] = useState(0)
-  const [selectedNode, setSelectedNode] = useState<MenuTreeItem | null>(null)
-  const [menuIdToNameMap, setMenuIdToNameMap] = useState<Record<string, string>>(
-    {},
-  )
-  const [menuIdLevelMap, setMenuIdLevelMap] = useState<Record<string, number>>({})
-
-  const handlePermissionEdit = useCallback(
-    (payload: { data?: any; config?: any; type?: string }) => {
-      const record = payload?.data
-      modalRef.current?.open({
-        opeType: 'edit',
-        opeId: record?.id,
-        data: { record, menuId: String(record?.menuId ?? selectedNode?.id ?? '') },
-      })
-    },
-    [selectedNode],
-  )
-
-  const finalPageConfig = useMemo(
-    () => ({
-      ...pageConfig,
-      treeReloadSignal,
-      onEdit: handlePermissionEdit,
-      getDetailModalOpenExtra: () => ({menuIdToNameMap}),
-      tree: {
-        ...pageConfig.tree,
-        /** 一级菜单（`level===1`）仅展开，标题不可点选 */
-        disableNode: (node: any, _ctx: { depthFromRoot: number }) =>
-          Number(node?.level) === 1,
-        onSelect: (node: MenuTreeItem | null) => {
-          setSelectedNode(node)
-        },
-        onTreeDataChange: (nodes: MenuTreeItem[]) => {
-          setMenuIdToNameMap(
-            buildMenuIdToPathLabelMap(nodes, {
-              idKey: 'id',
-              childrenKey: 'children',
-            }),
-          )
-          setMenuIdLevelMap(
-            buildMenuIdToLevelMap(nodes, {
-              idKey: 'id',
-              childrenKey: 'children',
-            }),
-          )
-        },
-      },
-    }),
-    [pageConfig, treeReloadSignal, handlePermissionEdit, menuIdToNameMap],
-  )
-
-  /** 后台菜单 level：0=顶级，1=一级，2=二级… */
-  const selectedMenuLevel = selectedNode
-    ? menuIdLevelMap[String(selectedNode.id)]
-    : undefined
-  const canCreatePermission =
-    !!selectedNode &&
-    (selectedMenuLevel === 0 || selectedMenuLevel === 2)
-
-  const addDisabledTooltipKey = useMemo(() => {
-    if (canCreatePermission) return undefined
-    const sa = pageConfig.submitAction
-    if (!sa) return undefined
-    if (!selectedNode) return sa.addDisabledNoSelectionTooltipKey
-    if (selectedMenuLevel == null) return undefined
-    if (selectedMenuLevel !== 0 && selectedMenuLevel !== 2) {
-      return sa.addDisabledMenuTooDeepTooltipKey
-    }
-    return undefined
-  }, [
-    canCreatePermission,
-    selectedNode,
-    selectedMenuLevel,
-    pageConfig.submitAction,
-  ])
-
-  /** 悬停展开：复制为新增/修改/删除/查看；点击图标为「原样复制到新增」 */
-  const permissionCopyDropdownItems = useMemo((): MenuProps['items'] => {
-    const canClone = hasPermission('permission:add')
-    const permTip = t('system.permission.copy_menu_clone_requires_perm')
-    return [
-      {
-        key: 'add',
-        label: t('system.permission.copy_menu_clone_add'),
-        disabled: !canClone,
-        title: !canClone ? permTip : undefined,
-      },
-      {
-        key: 'edit',
-        label: t('system.permission.copy_menu_clone_edit'),
-        disabled: !canClone,
-        title: !canClone ? permTip : undefined,
-      },
-      {
-        key: 'delete',
-        label: t('system.permission.copy_menu_clone_delete'),
-        disabled: !canClone,
-        title: !canClone ? permTip : undefined,
-      },
-      {
-        key: 'detail',
-        label: t('system.permission.copy_menu_clone_detail'),
-        disabled: !canClone,
-        title: !canClone ? permTip : undefined,
-      },
-    ]
-  }, [hasPermission, t])
-
-  const handlePermissionRowCopy = useCallback(
-    (key: string, record: any) => {
-      if (key === 'only') {
-        if (!hasPermission('permission:add')) return
-        modalRef.current?.open({
-          opeType: 'add',
-          copyOpen: { data: record },
-        })
-        return
-      }
-      const variants: PermissionCrudCopyVariant[] = [
-        'add',
-        'edit',
-        'delete',
-        'detail',
-      ]
-      if (!variants.includes(key as PermissionCrudCopyVariant)) return
-      if (!hasPermission('permission:add')) return
-      modalRef.current?.open({
-        opeType: 'add',
-        copyOpen: { data: record, variant: key as PermissionCrudCopyVariant },
-      })
-    },
-    [hasPermission, t],
-  )
-
-  const columns = useMemo(
-    () => [
-      {
-        title: 'system.permission.table_columns_title.name_and_code',
-        key: 'code',
-        align: ALIGN.LEFT,
-        render: (_: unknown, data: any) => {
-          return (
-            <div className="flex items-center gap-3 leading-5 min-w-0">
-              <div className="min-w-0 flex-1">
-                <p className="text-[14px] text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
-                  <DetailLink
-                    text={data.title}
-                    onClick={() => {
-                      finalPageConfig.onDetail?.({
-                        type: 'detail',
-                        data,
-                        config: finalPageConfig.detailAction,
-                      })
-                    }}
-                  />
-                </p>
-                <p className="text-[14px] text-[#6b7280] dark:text-gray-400 truncate">
-                  {data?.code ?? '-'}
-                </p>
-              </div>
-            </div>
-          )
-        },
-      },
-      {
-        title: 'system.permission.path',
-        key: 'path',
-        align: ALIGN.LEFT,
-        render: (_: unknown, data: any) => {
-          const methodRaw = data?.httpMethod ?? data?.method
-          const methodKey = methodRaw == null ? '' : `${methodRaw}`.toUpperCase()
-          const hex =
-            ENUM_DATA.httpMethod.tagColorMap[methodKey] ?? '#64748b'
-          return (
-            <PathTags
-              path={data?.path ?? data?.apiPath}
-              color={hex}
-            />
-          )
-        },
-      },
-      {
-        title: 'system.permission.http_method',
-        key: 'httpMethod',
-        align: ALIGN.CENTER,
-        width: 80,
-        render: (_: unknown, data: any) => {
-          const raw = data?.httpMethod ?? data?.method ?? ''
-          const text = raw != null && String(raw) !== '' ? String(raw) : '-'
-          if (text === '-') return '-'
-          const hex =
-            ENUM_DATA.httpMethod.tagColorMap[
-              String(text).toUpperCase()
-            ] ?? '#64748b'
-          return (
-            <div className="flex justify-center">
-              <CxTag color={hex} className="font-antd">
-                {text}
-              </CxTag>
-            </div>
-          )
-        },
-      },
-      {
-        title: 'system.permission.api_type',
-        key: 'apiType',
-        width: 100,
-        align: ALIGN.CENTER,
-        render: (value: unknown, data: any) => {
-          const raw = value ?? data?.apiType
-          const n = Number(raw)
-          const hex = ENUM_DATA.permissionApiType.tagColorMap[String(n)] ?? '#64748b'
-          return (
-            <div className="flex justify-center">
-              <CxTag.Enum value={raw} enumKey="permissionApiType" color={hex} />
-            </div>
-          )
-        },
-      },
-      {
-        title: 'system.permission.no_login_status',
-        key: 'noLoginStatus',
-        width: 80,
-        align: ALIGN.CENTER,
-        render: (noLoginStatus: unknown) => (
-          <div className="flex justify-center">
-            <CxTag.YesNo value={noLoginStatus} color={Number(noLoginStatus) === 1 ? 'error' : 'success'} reverse />
-          </div>
-        ),
-      },
-      {
-        title: 'system.permission.log_status',
-        key: 'logStatus',
-        width: 80,
-        align: ALIGN.CENTER,
-        render: (logStatus: unknown) => (
-          <div className="flex justify-center">
-            <CxTag.YesNo value={logStatus} />
-          </div>
-        ),
-      },
-      {
-        title: 'common.status',
-        key: 'status',
-        width: 80,
-        align: ALIGN.CENTER,
-        render: (status: unknown) => (
-          <div className="flex justify-center">
-            <CxTag.Enabled value={status} />
-          </div>
-        ),
-      },
-      {
-        title: 'common.actions',
-        key: 'action',
-        align: ALIGN.LEFT,
-        width: 200,
-        fixed: FIXED.RIGHT,
-        render: (_: any, data: any) => {
-          const isEnabled = Number(data?.status) === 1
-          const canEditWhenDisabled =
-            hasPermission('permission:edit') && !isEnabled
-          const canDeleteWhenDisabled =
-            hasPermission('permission:delete') && !isEnabled
-          return (
-            <div className="flex justify-start gap-2">
-              <CxButton.IconView
-                onClick={() =>
-                  finalPageConfig.onDetail?.({
-                    type: 'detail',
-                    data,
-                    config: finalPageConfig.detailAction,
-                  })
-                }
-              />
-              <Dropdown
-                trigger={['hover']}
-                mouseEnterDelay={0.12}
-                mouseLeaveDelay={0.2}
-                menu={{
-                  items: permissionCopyDropdownItems,
-                  onClick: ({key, domEvent}) => {
-                    domEvent.stopPropagation()
-                    handlePermissionRowCopy(String(key), data)
-                  },
-                }}>
-                <span className="inline-flex" onKeyDown={(e) => e.stopPropagation()}>
-                  <CxButton.Icon
-                    type="primary"
-                    icon={<Copy size={16} />}
-                    tooltipTitle={
-                      <>
-                        {t('system.permission.copy_tooltip_line1')}
-                        <br />
-                        {t('system.permission.copy_tooltip_line2')}
-                      </>
-                    }
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      handlePermissionRowCopy('only', data)
-                    }}
-                  />
-                </span>
-              </Dropdown>
-              {hasPermission('permission:enable') && !isEnabled && (
-                <CxButton.IconEnable
-                  onClick={() =>
-                    finalPageConfig.onStatusToggle?.({
-                      nextStatus: 1,
-                      data,
-                    })
-                  }
-                />
-              )}
-              {hasPermission('permission:disable') && isEnabled && (
-                <CxButton.IconDisable
-                  onClick={() =>
-                    finalPageConfig.onStatusToggle?.({
-                      nextStatus: 0,
-                      data,
-                    })
-                  }
-                />
-              )}
-              {canEditWhenDisabled && (
-                <CxButton.IconEdit
-                  onClick={() =>
-                    finalPageConfig.onEdit?.({
-                      type: 'edit',
-                      data,
-                      config: finalPageConfig.submitAction,
-                    })
-                  }
-                />
-              )}
-              {canDeleteWhenDisabled && (
-                <CxButton.IconDelete
-                  onClick={() => finalPageConfig.onDelete?.(data)}
-                />
-              )}
-            </div>
-          )
-        },
-      },
-    ],
-    [t, hasPermission, permissionCopyDropdownItems, handlePermissionRowCopy, finalPageConfig],
-  )
-
-  const permissionHeaderAdd = useMemo(() => {
-    const addBtn = (
-      <CxButton.Add
-        disabled={!canCreatePermission}
-        onClick={() => {
-          if (!selectedNode || !canCreatePermission) return
-          modalRef.current?.open({
-            opeType: 'add',
-            data: { menuId: String(selectedNode.id) },
-          })
-        }}>
-        {t('system.permission.add')}
-      </CxButton.Add>
-    )
-    if (!canCreatePermission && addDisabledTooltipKey) {
-      return (
-        <CxTooltip title={t(addDisabledTooltipKey)}>
-          <span className="inline-flex">{addBtn}</span>
-        </CxTooltip>
-      )
-    }
-    return addBtn
-  }, [
-    canCreatePermission,
-    addDisabledTooltipKey,
-    selectedNode,
-    t,
-  ])
-
-  return (
-    <>
-      <ListPageView
-        columns={columns}
-        pageConfig={finalPageConfig}
-        detailModalComponent={DetailModal as any}
-        headerActions={permissionHeaderAdd}
-      />
-      <SubmitModal
-        ref={modalRef}
-        onOk={async () => {
-          await finalPageConfig.fetchTableData?.()
-          setTreeReloadSignal((n) => n + 1)
-        }}
-        onCancel={() => {
-          // 取消时的清理逻辑(可选)
-        }}
-      />
-    </>
-  )
-}
-
-export default IndexView