cx-chat 0.0.1

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

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