cx-chat 0.0.1

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

@@ -0,0 +1,163 @@
+import { DetailLink } from '@/components/common/detail-link'
+import { useAuth } from '@/contexts/AuthContext'
+import { ALIGN } from '@/meta'
+import { deleteRoleAPI, getRolePageAPI } from '@api/system/role'
+import ListPageView, { createListPageConfig } from '@components/table-view'
+import { CxButton, CxEmptyState } from '@cx-ui'
+import { KeyRound } from 'lucide-react'
+import { useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import DetailModal from './modal/detail-modal'
+import PermissionModal from './modal/permission-modal'
+import SubmitModal from './modal/submit-modal'
+
+const useListPageConfig = createListPageConfig({
+  tableAPI: getRolePageAPI,
+  deleteAPI: deleteRoleAPI,
+  pageInfo: {
+    title: 'system.role.page_title',
+    subTitle: 'system.role.page_subtitle',
+  },
+  searchFields: [
+    {
+      prop: 'name',
+      label: 'system.role.name',
+      placeholder: 'system.role.search_placeholder',
+    },
+    {
+      prop: 'permissionName',
+      label: 'system.role.search_permission_label',
+      placeholder: 'system.role.search_permission_placeholder',
+    },
+  ],
+  submitAction: {
+    permission: 'role:add',
+    submitType: 'modal', // 新增/编辑：基于当前路由跳转 /submit /submit?id=xx
+    labelKey: 'system.role.add',
+  },
+  detailAction: {
+    detailType: 'modal', // 详情：基于当前路由跳转 /detail?id=xx
+    labelKey: 'common.view',
+    permission: 'role:detail',
+  },
+  deleteConfirm: {
+    title: 'system.role.delete_confirm_title',
+    content: 'system.role.delete_confirm_content',
+    okText: 'common.delete',
+    cancelText: 'common.cancel',
+  },
+})
+
+function IndexView() {
+  const { t } = useTranslation()
+  const { hasPermission } = useAuth()
+  const permissionModalRef = useRef<{
+    open: (p: { record: { id: string | number; name?: string } }) => void
+    close: () => void
+  } | null>(null)
+
+  const pageConfig = useListPageConfig()
+  const canViewRolePage = hasPermission('role:page')
+
+  if (!canViewRolePage) {
+    return <CxEmptyState message={t('common.page_error.401.message')} />
+  }
+
+  const columns = useMemo(
+    () => [
+      {
+        title: 'system.role.name',
+        key: 'name',
+        align: ALIGN.CENTER,
+        render: (value: string, data: any) => (
+          <DetailLink
+            text={value}
+            extra={
+              data.editFlag === 1 && (
+                <span className="ml-2 px-2 py-0.5 text-xs bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 rounded-full">
+                  {t('system.role.system_role_badge')}
+                </span>
+              )
+            }
+            onClick={() =>
+              pageConfig.onDetail?.({
+                type: 'detail',
+                data,
+                config: pageConfig.detailAction,
+              })
+            }
+          />
+        ),
+      },
+      {
+        title: 'common.description',
+        key: 'description',
+        align: ALIGN.CENTER,
+      },
+      {
+        title: 'common.actions',
+        key: 'action',
+        width: 250,
+        align: ALIGN.CENTER,
+        render: (_: any, data: any) =>
+          data.editFlag === 0? (
+            <div className="flex justify-center gap-2">
+              {hasPermission('role:edit') && (
+                <CxButton.IconEdit
+                  onClick={() =>
+                    pageConfig.onEdit?.({
+                      type: 'edit',
+                      data,
+                      config: pageConfig.submitAction,
+                    })
+                  }
+                />
+              )}
+              {hasPermission('role:permission-edit') && (
+                <CxButton.Icon
+                  title={t('system.role.permissions_assignment')}
+                  tooltipTone="primary"
+                  icon={<KeyRound size={18} />}
+                  onClick={() =>
+                    permissionModalRef.current?.open({
+                      record: {
+                        id: data.id,
+                        name: data.name,
+                      },
+                    })
+                  }
+                />
+              )}
+              {hasPermission('role:delete') && (
+                <CxButton.IconDelete
+                  onClick={() => pageConfig.onDelete?.(data)}
+                />
+              )}
+            </div>
+          ) : (
+            <span className="text-xs text-gray-400 italic">
+              {t('system.role.protected_role')}
+            </span>
+          ),
+      },
+    ],
+    [t, hasPermission, pageConfig],
+  )
+
+  return (
+    <>
+      <ListPageView
+        columns={columns}
+        pageConfig={pageConfig}
+        submitModalComponent={SubmitModal}
+        detailModalComponent={DetailModal}
+      />
+      <PermissionModal
+        ref={permissionModalRef}
+        onSaved={() => void pageConfig.fetchTableData?.()}
+      />
+    </>
+  )
+}
+
+export default IndexView

package/src/views/page-system/role/modal/detail-modal.tsx

@@ -0,0 +1,127 @@
+import { getRoleDetailAPI } from '@/api/system/role'
+import { CxModal, useCxModal } from '@cx-ui'
+import { Form, Spin } from 'antd'
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { roleModalShellStyles } from './role-modal-shell-styles'
+import RolePermissionAssignPanel, {
+  type RolePermissionAssignPanelHandle,
+} from './role-permission-assign-panel'
+
+interface OpenPayload {
+  opeId?: string | number
+  record?: any
+}
+
+const DetailModal = forwardRef<any, unknown>(function DetailModal(_props, ref) {
+  const { t } = useTranslation()
+  const [loading, setLoading] = useState(false)
+  const assignPanelRef = useRef<RolePermissionAssignPanelHandle>(null)
+  const [assignBootstrapKey, setAssignBootstrapKey] = useState(0)
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const opeId = payload.opeId ?? payload.data?.id
+
+      setAssignBootstrapKey((k) => k + 1)
+      assignPanelRef.current?.reset()
+      setLoading(true)
+      modal.setFormData({})
+
+      if (opeId != null && opeId !== '') {
+        try {
+          const res = await getRoleDetailAPI(opeId)
+          modal.setFormData({
+            id: opeId,
+            name: res?.data?.name ?? '',
+            description: res?.data?.description ?? '',
+            editFlag: res?.data?.editFlag,
+          })
+        } finally {
+          setLoading(false)
+        }
+      } else {
+        setLoading(false)
+      }
+    },
+    onClose: () => {
+      assignPanelRef.current?.reset()
+    },
+  })
+  
+  const { isOpen, close } = modal
+  const detailData = modal.formData ?? {}
+
+  useImperativeHandle(ref, () => ({
+    open: modal.open,
+    close,
+  }), [modal.open, close])
+
+  const modalWidth = 1104
+
+  return (
+    <CxModal
+      title={t('system.role.detail_title')}
+      isOpen={isOpen}
+      onClose={close}
+      opeType="detail"
+      modalConfig={{
+        width: modalWidth,
+        styles: roleModalShellStyles,
+        rootClassName: 'cx-modal-role-assign',
+      }}>
+      {loading ? (
+        <div className="flex justify-center py-20">
+          <Spin size="large" />
+        </div>
+      ) : (
+        <Form className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
+          <div className="grid shrink-0 grid-cols-1 gap-4 md:grid-cols-2">
+            <Form.Item label={t('system.role.name')}>
+              <div className="flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100">
+                {detailData.name || '-'}
+                {detailData.editFlag === 1 && (
+                  <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 rounded-full">
+                    {t('system.role.system_role_badge')}
+                  </span>
+                )}
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('common.description')}>
+              <div className="text-sm text-gray-900 dark:text-gray-100 break-words">
+                {detailData.description || '-'}
+              </div>
+            </Form.Item>
+          </div>
+
+          <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
+            <h3 className="shrink-0 text-sm font-semibold text-gray-900 dark:text-gray-100">
+              {t('system.role.permissions_assignment')}
+            </h3>
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+              <RolePermissionAssignPanel
+                ref={assignPanelRef}
+                active={isOpen}
+                bootstrapKey={assignBootstrapKey}
+                maxHeightClass="h-full min-h-0 w-full flex-1 overflow-hidden"
+                roleId={detailData.id ?? null}
+                readOnly
+              />
+            </div>
+          </div>
+        </Form>
+      )}
+    </CxModal>
+  )
+})
+
+DetailModal.displayName = 'DetailModal'
+
+export default DetailModal

package/src/views/page-system/role/modal/permission-assign-group-rules.ts

@@ -0,0 +1,86 @@
+/**
+ * 角色「分配权限」面板：带多段 `:` 的权限码分支配置。
+ * - 仅当 **code 首段** 在本表有配置时，才按 `prefix` 拆成多个「分组」；否则整菜单一块、标题只跟菜单走。
+ * - `prefix` 按 **从长到短** 匹配（先 `system+file`，再 `system+chat`）。
+ * - `system` 第二段非 `file`/`chat`/`auth` 且未命中分支时走 `defaultSuffixI18nKey`（「公共」）；码段仅按 `:` 拆分，首段须为字面 `system`/`dict` 才走本表。
+ * - `dict`：`dict:cate:*` 与第二段 `cate-*`（如 `dict:cate-add`）归为「数据字典分类」；`dict:add` 等为默认组，标题为「挂载菜单一级父 > 二级菜单名」。
+ *
+ * i18n：`suffixI18nKey` / `menuBaseOverrideI18nKey` 为 `system.permission` 下的相对键（见 runtime 里拼接）。
+ */
+
+export type PermissionAssignCodeBranch = {
+  readonly prefix: readonly string[]
+  /** `system.permission.${suffixI18nKey}` */
+  readonly suffixI18nKey: string
+  /** 分支排序权重，越小越靠前（用于控制分组显示顺序） */
+  readonly sortOrder?: number
+}
+
+export type PermissionAssignFirstSegmentConfig = {
+  /**
+   * 有 code 分支时，左侧菜单文案用该 i18n 键，**不再**用树算出的菜单 base。
+   * 例：`system` → 固定「系统」。
+   */
+  readonly menuBaseOverrideI18nKey?: string
+  /**
+   * `dict`：左侧只显示 **挂载菜单的一级父级** 名称（如「系统管理」），与文案示例一致。
+   */
+  readonly menuBaseUseParentOfAnchor?: boolean
+  readonly branches: readonly PermissionAssignCodeBranch[]
+  /**
+   * 命中首段且已配置本表，但未命中任一 `prefix` 时（如 `system:xxx` 两段、`dict:add` 两段）。
+   * `system` 下两段且非 file/chat/auth → 公共；`dict` 下非 dict:cate 前缀 → 数据字典。
+   */
+  readonly defaultSuffixI18nKey?: string
+  /**
+   * default 分支的排序权重，越小越靠前。默认为 500（中间值）。
+   */
+  readonly defaultSortOrder?: number
+}
+
+/** key = permission code 首段小写 */
+export const PERMISSION_ASSIGN_CODE_BY_FIRST_SEGMENT: Readonly<
+  Record<string, PermissionAssignFirstSegmentConfig>
+> = {
+  system: {
+    menuBaseOverrideI18nKey: 'assign_panel_code.system_left',
+    branches: [
+      {
+        prefix: ['system', 'file'],
+        suffixI18nKey: 'assign_panel_code.suffix_system_file',
+      },
+      {
+        prefix: ['system', 'chat'],
+        suffixI18nKey: 'assign_panel_code.suffix_system_chat',
+      },
+      {
+        prefix: ['system', 'auth'],
+        suffixI18nKey: 'assign_panel_code.suffix_system_auth',
+      },
+    ],
+    defaultSuffixI18nKey: 'assign_panel_code.suffix_system_public',
+  },
+  dict: {
+    menuBaseUseParentOfAnchor: true,
+    branches: [
+      {
+        prefix: ['dict', 'cate'],
+        suffixI18nKey: 'assign_panel_code.suffix_dict_cate',
+        sortOrder: 1, // 数据字典分类排在前面
+      },
+    ],
+    defaultSuffixI18nKey: 'assign_panel_code.suffix_dict_default',
+  },
+  knowledge: {
+    menuBaseUseParentOfAnchor: true,
+    branches: [
+      {
+        prefix: ['knowledge', 'doc'],
+        suffixI18nKey: 'assign_panel_code.suffix_knowledge_doc',
+        sortOrder: 999, // 知识库文档排在后面
+      },
+    ],
+    defaultSuffixI18nKey: 'assign_panel_code.suffix_knowledge_default',
+    defaultSortOrder: 100, // 知识库默认分支排在前面
+  }
+}

package/src/views/page-system/role/modal/permission-modal.tsx

@@ -0,0 +1,111 @@
+import { editRolePermissionAPI } from '@/api/system/role'
+import { useToast } from '@/contexts/ToastContext'
+import { CxModal, useCxModal } from '@cx-ui'
+import {
+    forwardRef,
+    useImperativeHandle,
+    useRef,
+    useState
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { roleModalShellStyles } from './role-modal-shell-styles'
+import RolePermissionAssignPanel, {
+    type RolePermissionAssignPanelHandle,
+} from './role-permission-assign-panel'
+
+export type PermissionModalOpenPayload = {
+  record: { id: string | number; name?: string }
+}
+
+const PermissionModal = forwardRef<
+  { open: (p: PermissionModalOpenPayload) => void; close: () => void },
+  { onSaved?: () => void | Promise<void> }
+>(function PermissionModal({ onSaved }, ref) {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const panelRef = useRef<RolePermissionAssignPanelHandle>(null)
+  const [assignBootstrapKey, setAssignBootstrapKey] = useState(0)
+  const [roleRecord, setRoleRecord] = useState<PermissionModalOpenPayload['record'] | null>(null)
+
+  const modal = useCxModal({
+    onOpen: (payload) => {
+      const record = payload.data?.record
+      if (record) {
+        setRoleRecord(record)
+        setAssignBootstrapKey((k) => k + 1)
+        panelRef.current?.reset()
+      }
+    },
+    onClose: () => {
+      setRoleRecord(null)
+      panelRef.current?.reset()
+    },
+  })
+
+  const { isOpen, close } = modal
+
+  const handleSave = async () => {
+    if (!roleRecord) return
+
+    try {
+      const payload = panelRef.current?.getPayload()
+      if (!payload) {
+        showToast(t('common.error'), 'error')
+        return
+      }
+      const { menuId, apiId } = payload.rolePermissionCreateDTO
+      await editRolePermissionAPI(roleRecord.id, { menuId, apiId })
+      showToast(t('common.saved'), 'success')
+      await onSaved?.()
+      close()
+    } catch (e: any) {
+      console.log(e?.message || t('common.error'))
+    }
+  }
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: (payload: PermissionModalOpenPayload) => {
+        modal.open({ opeType: 'edit', data: { record: payload.record } })
+      },
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  const title =
+    t('system.role.permissions_assignment') +
+    (roleRecord?.name ? ` — ${roleRecord.name}` : '')
+
+  return (
+    <CxModal
+      isOpen={isOpen}
+      title={title}
+      onClose={close}
+      opeType="edit"
+      onSubmit={handleSave}
+      modalConfig={{
+        width: 1104,
+        styles: roleModalShellStyles,
+        rootClassName: 'cx-modal-role-assign',
+      }}>
+      <div className="flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden">
+        {roleRecord ? (
+          <RolePermissionAssignPanel
+            ref={panelRef}
+            key={String(roleRecord.id)}
+            active={isOpen}
+            bootstrapKey={assignBootstrapKey}
+            maxHeightClass="h-full min-h-0 w-full flex-1 overflow-hidden"
+            roleId={roleRecord.id}
+          />
+        ) : null}
+      </div>
+    </CxModal>
+  )
+})
+
+PermissionModal.displayName = 'PermissionModal'
+
+export default PermissionModal

package/src/views/page-system/role/modal/role-modal-shell-styles.ts

@@ -0,0 +1,21 @@
+/**
+ * CxModal `styles`：与 less 中 `cx-modal-role-assign` 一起用。
+ * `container` 必须写明 height/maxHeight，否则会沿用 CxModal 默认的 85vh，与角色弹窗期望高度不一致。
+ */
+export const roleModalShellStyles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+    height: 'min(95dvh, 95vh)',
+    maxHeight: 'min(95dvh, 95vh)',
+  },
+  body: {
+    /* 0% 基础高度，避免与 maxHeight 双重约束把内容区压短后裁切 */
+    flex: '1 1 0%',
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+  },
+}