cx-chat 0.0.1

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

@@ -0,0 +1,132 @@
+import ListPageView, { createListPageConfig } from '@components/table-view'
+import type { ColumnsType } from 'antd/es/table'
+import dayjs from 'dayjs'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { getSysLogPageAPI } from '@/api/system/sys-log'
+import { DetailLink } from '@/components/common/detail-link'
+import { ALIGN } from '@/meta'
+// import { LogMessageDemo } from './components'
+import { CxDamo } from 'cx-my-react-lib'
+import DetailModal from './modal/detail-modal'
+
+const useListPageConfig = createListPageConfig({
+  tableAPI: getSysLogPageAPI,
+  pageInfo: {
+    title: 'system.sys_log.title',
+    subTitle: 'system.sys_log.subtitle',
+  },
+  initialSearchFormData: {
+    startTimeRange: [dayjs().subtract(1, 'hour'), dayjs()],
+  },
+  searchFields: [
+    {
+      prop: 'param',
+      label: 'system.sys_log.search.keyword_label',
+      placeholder: 'system.sys_log.search.keyword_placeholder',
+      width: '300px',
+    },
+    {
+      prop: 'startTimeRange',
+      label: 'system.sys_log.fields.startTime',
+      placeholder: [
+        'system.sys_log.search.startTime_placeholder_start',
+        'system.sys_log.search.startTime_placeholder_end',
+      ],
+      type: 'dateRange',
+      showTime: true,
+      clearable: false,
+      rangeStartProp: 'startTime',
+      rangeEndProp: 'endTime',
+      format: 'YYYY-MM-DD HH:mm:ss',
+      width: '50px',
+    },
+  ],
+  detailAction: {
+    detailType: 'modal',
+    labelKey: 'system.sys_log.actions.detail',
+  },
+  table: {
+    showSelection: false,
+    operationWidth: 90,
+    paginationMode: 'slice',
+  },
+})
+
+function IndexView() {
+  const { t } = useTranslation()
+  const pageConfig = useListPageConfig()
+
+  const columns = useMemo<ColumnsType<any>>(
+    () => [
+      {
+        title: 'system.sys_log.fields.url',
+        key: 'url',
+        align: ALIGN.LEFT,
+        render: (url: any, record: any) => (
+          <DetailLink
+            text={url ?? '-'}
+            title={t('system.sys_log.actions.detail')}
+            onClick={() =>
+              pageConfig.onDetail?.({
+                type: 'detail',
+                data: record,
+                config: pageConfig.detailAction,
+              })
+            }
+          />
+        ),
+      },
+      {
+        title: 'system.sys_log.fields.interfaceName',
+        key: 'interfaceName',
+        align: ALIGN.CENTER,
+        render: (v: any) => v ?? '-',
+      },
+      
+      {
+        title: 'system.sys_log.fields.startTime',
+        key: 'startTime',
+        align: ALIGN.CENTER,
+        render: (v: any) => v ?? '-',
+      },
+      {
+        title: 'system.sys_log.fields.clientIp',
+        key: 'clientIp',
+        align: ALIGN.CENTER,
+        render: (v: any) => v ?? '-',
+      },
+      {
+        title: 'system.sys_log.fields.cost',
+        key: 'cost',
+        align: ALIGN.CENTER,
+        render: (v: any) => v ?? '-',
+      },
+      
+      {
+        title: 'system.sys_log.fields.userName',
+        key: 'userName',
+        align: ALIGN.CENTER,
+        render: (v: any) => v ?? '-',
+      },
+      
+    ],
+    [pageConfig, t],
+  )
+
+  return (
+    <>
+      <ListPageView
+        columns={columns}
+        pageConfig={pageConfig}
+        detailModalComponent={DetailModal as any}
+      />
+      {/* <LogMessageDemo /> */}
+      <CxDamo />
+    </>
+  )
+}
+
+export default IndexView
+

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

@@ -0,0 +1,157 @@
+import { getSysLogDetailAPI } from '@/api/system/sys-log'
+import { CxModal } from '@cx-ui'
+import { Descriptions, Spin } from 'antd'
+import { forwardRef, useImperativeHandle, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+function normalizeSysLogDetail(raw: any): Record<string, unknown> {
+  if (raw?.data?.data) return raw.data.data as Record<string, unknown>
+  if (raw?.data) return raw.data as Record<string, unknown>
+  return (raw && typeof raw === 'object' ? raw : {}) as Record<string, unknown>
+}
+
+const DetailModal = forwardRef(function DetailModal(_props: unknown, ref) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [detail, setDetail] = useState<Record<string, unknown>>({})
+
+  /** 将字段值格式化为可展示的字符串（空值统一显示 '-'）。 */
+  const formatValue = (v: unknown) => {
+    if (v === undefined || v === null || String(v) === '') return '-'
+    return String(v)
+  }
+
+  /** 长文本字段展示：支持换行、自动换行与滚动。 */
+  const renderLongText = (v: unknown, maxHeightClassName = 'max-h-64') => {
+    const text = formatValue(v)
+    if (text === '-') return '-'
+    return (
+      <div
+        className={`${maxHeightClassName} overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-5`}
+      >
+        {text}
+      </div>
+    )
+  }
+
+  /** 渲染响应内容：通常很长，放在底部独立区域避免挤压其它字段。 */
+  const renderResponseSection = () => {
+    const text = formatValue(detail.response)
+    return (
+      <div className="mt-4">
+        <div className="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+          {t('system.sys_log.fields.response')}
+        </div>
+        {text === '-' ? (
+          <div className="text-sm text-gray-500 dark:text-gray-400">-</div>
+        ) : (
+          <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40 p-3">
+            {renderLongText(detail.response, 'max-h-[420px]')}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  /** 渲染参数区域：bodyParam 通常较长，单独展示。 */
+  const renderParamSections = () => {
+    const bodyParamText = formatValue(detail.bodyParam)
+    return (
+      <div className="mt-4 space-y-4">
+        <div>
+          <div className="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
+            {t('system.sys_log.fields.bodyParam')}
+          </div>
+          {bodyParamText === '-' ? (
+            <div className="text-sm text-gray-500 dark:text-gray-400">-</div>
+          ) : (
+            <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40 p-3">
+              {renderLongText(detail.bodyParam, 'max-h-[240px]')}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  const close = () => {
+    setOpen(false)
+    setDetail({})
+    setLoading(false)
+  }
+
+  useImperativeHandle(ref, () => ({
+    /** 打开系统日志详情弹窗：根据 id 拉取详情并展示。 */
+    open: async (payload: { opeId?: string | number; record?: any } = {}) => {
+      const opeId = payload.opeId ?? payload.record?.id ?? payload.record?._id
+      const fallback = payload.record ?? {}
+      setOpen(true)
+      setLoading(true)
+      setDetail(fallback)
+      if (opeId == null || opeId === '') {
+        setLoading(false)
+        return
+      }
+      try {
+        const res = await getSysLogDetailAPI(opeId)
+        setDetail(normalizeSysLogDetail(res))
+      } catch {
+        setDetail(fallback)
+      } finally {
+        setLoading(false)
+      }
+    },
+    close,
+  }))
+
+  return (
+    <CxModal title={t('system.sys_log.detail_title')} isOpen={open} onClose={close} opeType="detail" modalConfig={{ width: '800px' }}>
+      {loading ? (
+        <div className="flex justify-center py-10">
+          <Spin />
+        </div>
+      ) : (
+        <div>
+          <Descriptions column={1} size="small" bordered>
+            <Descriptions.Item label={t('system.sys_log.fields.url')}>
+              {formatValue(detail.url)}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('system.sys_log.fields.method')}>
+              {formatValue(detail.method)}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('system.sys_log.fields.interfaceName')}>
+              {formatValue(detail.interfaceName)}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('system.sys_log.fields.urlParam')}>
+              {renderLongText(detail.urlParam)}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('system.sys_log.fields.userId')}>
+              {formatValue(detail.userId)}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('system.sys_log.fields.userName')}>
+              {formatValue(detail.userName)}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('system.sys_log.fields.startTime')}>
+              {formatValue(detail.startTime)}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('system.sys_log.fields.endTime')}>
+              {formatValue(detail.endTime)}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('system.sys_log.fields.cost')}>
+              {formatValue(detail.cost)}
+            </Descriptions.Item>
+            <Descriptions.Item label={t('system.sys_log.fields.clientIp')}>
+              {formatValue(detail.clientIp)}
+            </Descriptions.Item>
+          </Descriptions>
+          {renderParamSections()}
+          {renderResponseSection()}
+        </div>
+      )}
+    </CxModal>
+  )
+})
+
+export default DetailModal
+

package/src/views/page-system/menu/components/menuFormShared.ts

@@ -0,0 +1,283 @@
+import type { FormInstance, Rule } from 'antd/es/form'
+import { useCallback } from 'react'
+
+import { addMenuAPI, editMenuAPI } from '@/api/system/menu'
+import { useToast } from '@/contexts/ToastContext'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import i18n from '@/i18n'
+import type { MenuTreeItem } from '@/types/menu'
+import { stringifyMenuNameJson } from '@/utils/menuI18n'
+
+/** 本文件内统一 `t('key')`，与 react-i18next 的 `t` 用法一致 */
+const t = i18n.t.bind(i18n)
+
+export type MenuFormValues = {
+  parentId?: string
+  code: string
+  titleZh: string
+  titleEn: string
+  description: string
+  path: string
+  component: string
+  icon: string
+  sortOrder: number
+  status: number
+  fullDisplay: number
+}
+
+export function emptyMenuFormValues(): MenuFormValues {
+  return {
+    parentId: undefined,
+    code: '',
+    titleZh: '',
+    titleEn: '',
+    description: '',
+    path: '',
+    component: '',
+    icon: '',
+    sortOrder: 0,
+    status: 1,
+    fullDisplay: 0,
+  }
+}
+
+/**
+ * 与弹窗、侧栏共用的校验提示（中文）：
+ * 请输入菜单编码、编码须字母开头且仅含字母数字下划线、请输入菜单名称
+ */
+export function buildMenuFormRules(): {
+  code: Rule[]
+  titleZh: Rule[]
+  titleEn: Rule[]
+  path: Rule[]
+  sortOrder: Rule[]
+} {
+  return {
+    code: [
+      { required: true, message: t('system.menu.code_required') },
+      {
+        pattern: /^[a-zA-Z][a-zA-Z0-9_-]*$/,
+        message: t('system.menu.code_pattern_hint'),
+      },
+    ],
+    titleZh: [{ required: true, message: t('system.menu.title_required') }],
+    titleEn: [{ required: true, message: t('system.menu.title_required') }],
+    path: [{ required: true, message: t('system.menu.path_required') }],
+    sortOrder: [
+      { required: true, message: t('common.sort_order_required') },
+    ],
+  }
+}
+
+/**
+ * 菜单层级与路由字段规则：
+ * - level=0：顶级菜单，固定 path='/'、component='Root'
+ * - level=1：一级菜单，固定 path='/'、component='Main'
+ * - level>=2：按表单输入提交
+ */
+export function normalizeMenuRouteByLevel(
+  level: number,
+  path?: string,
+  component?: string,
+) {
+  if (level <= 0) {
+    return {
+      path: '/',
+      component: 'Root',
+    }
+  }
+  if (level === 1) {
+    return {
+      path: '/',
+      component: 'Main',
+    }
+  }
+  return {
+    path: String(path ?? ''),
+    component: String(component ?? ''),
+  }
+}
+
+/** 父级 ID：仅取自表单 `parentId`，空则视为顶级 `0`。 */
+export function resolveMenuPayloadParentId(values: Record<string, unknown>): string {
+  const formPid = values.parentId
+  if (formPid != null && String(formPid) !== '') {
+    const p = String(formPid)
+    return p === '0' ? '0' : p
+  }
+  return '0'
+}
+
+export function findMenuNodeById(
+  nodes: MenuTreeItem[] | undefined,
+  id: string,
+): MenuTreeItem | null {
+  for (const node of nodes || []) {
+    if (String(node.id) === String(id)) return node
+    const found = findMenuNodeById(node.children || [], id)
+    if (found) return found
+  }
+  return null
+}
+
+/** 根据表单父级与当前树，计算将保存菜单的 level（0=顶级）。 */
+export function resolveMenuSubmitLevel(
+  values: Record<string, unknown>,
+  treeData: MenuTreeItem[],
+): number {
+  const payloadParentId = resolveMenuPayloadParentId(values)
+  if (payloadParentId === '0') return 0
+  const parentNode = findMenuNodeById(treeData, payloadParentId)
+  if (!parentNode) return 0
+  return Number(parentNode.level ?? 0) + 1
+}
+
+export type SubmitMenuFormParams = {
+  opeType: string
+  form: FormInstance
+  /** 当前菜单层级（0=顶级），由页面 state/ref 维护，不注册到 Form */
+  getLevel: () => number
+  /** 编辑：当前节点；有 id 则走合并更新 */
+  existingMenu?: MenuTreeItem | null
+  onSuccess?: (ctx: {
+    opeType: string
+    payload: Record<string, unknown>
+    result: unknown
+    values: Record<string, unknown>
+  }) => void | Promise<void>
+  /** 允许的最大 level，默认 2（即 0/1/2 三级） */
+  maxLevel?: number
+}
+
+/**
+ * 菜单页专用：内部固定 `addMenuAPI` / `editMenuAPI` 与 `useModalSubmit`。
+ * 侧栏编辑、新增弹窗各 `useMenuFormSubmit()` 一份即可（状态互不干扰）。
+ */
+export function useMenuFormSubmit() {
+  const { handleSubmit, submitting } = useModalSubmit<
+    Record<string, unknown>,
+    Record<string, unknown>
+  >()
+  const { showToast } = useToast()
+
+  const submitMenuForm = useCallback(
+    (params: SubmitMenuFormParams) => {
+      const {
+        opeType,
+        form,
+        getLevel,
+        existingMenu,
+        onSuccess,
+        maxLevel = 2,
+      } = params
+
+      return handleSubmit({
+        opeType,
+        validate: async () => {
+          try {
+            const values = (await form.validateFields()) as Record<string, unknown>
+            const level = getLevel()
+            if (level > maxLevel) {
+              throw new Error(String(t('system.menu.max_three_level_hint')))
+            }
+            return { ...values, level }
+          } catch (e: any) {
+            const err = e as { errorFields?: unknown[] }
+            if (Array.isArray(err?.errorFields) && err.errorFields.length > 0) {
+              showToast(String(t('common.form_validation_warning')), 'warning')
+            }
+            throw e
+          }
+        },
+        addAPI: addMenuAPI as (p: Record<string, unknown>) => Promise<unknown>,
+        editAPI: editMenuAPI as (p: Record<string, unknown>) => Promise<unknown>,
+        transform: (values) => buildMenuSubmitPayload(values, { existingMenu }),
+        onSuccess,
+      })
+    },
+    [handleSubmit, showToast],
+  )
+
+  return { submitMenuForm, submitting }
+}
+
+/** 提交用：取自合并后的 `values.level`（由 validate 注入），非法则 0 */
+export function menuLevelFromFormValues(values: Record<string, unknown>): number {
+  const n = Number(values.level)
+  return Number.isFinite(n) ? n : 0
+}
+
+export type BuildMenuSubmitPayloadOptions = {
+  /** 编辑：传入当前节点；有 `id` 时合并原记录并剔除 children / parentName 等 */
+  existingMenu?: MenuTreeItem | null
+}
+
+/**
+ * 新增 / 编辑共用的请求体组装。
+ * - 无 `existingMenu?.id`：仅提交业务字段（新增）。
+ * - 有 `existingMenu?.id`：展开原菜单（去掉树/展示字段）后与表单合并（编辑）。
+ */
+export function buildMenuSubmitPayload(
+  values: Record<string, unknown>,
+  options: BuildMenuSubmitPayloadOptions = {},
+): Record<string, unknown> {
+  const { existingMenu } = options
+  const level = menuLevelFromFormValues(values)
+  const payloadParentId = resolveMenuPayloadParentId(values)
+  const routeFields = normalizeMenuRouteByLevel(
+    level,
+    values.path as string | undefined,
+    values.component as string | undefined,
+  )
+  const title = stringifyMenuNameJson({
+    zh: String(values.titleZh ?? ''),
+    en: String(values.titleEn ?? ''),
+  })
+  const sortOrder = Number(values.sortOrder ?? 0)
+  const status = Number(values.status ?? 1)
+  const fullDisplay =
+    level === 1 ? Number(values.fullDisplay ?? 0) : 0
+
+  if (existingMenu?.id) {
+    const {
+      children: _children,
+      parentName: _parentName,
+      parent_name: _parent_name,
+      ...menuForEdit
+    } = existingMenu as MenuTreeItem & {
+      parentName?: unknown
+      parent_name?: unknown
+    }
+    const payload: Record<string, unknown> = {
+      ...menuForEdit,
+      ...values,
+      title,
+      sortOrder,
+      status,
+      fullDisplay,
+      level,
+      parentId: payloadParentId,
+      path: routeFields.path,
+      component: routeFields.component,
+    }
+    delete payload.titleZh
+    delete payload.titleEn
+    delete payload.parentName
+    delete payload.parent_name
+    return payload
+  }
+
+  return {
+    parentId: payloadParentId,
+    code: values.code,
+    title,
+    description: values.description,
+    path: routeFields.path,
+    component: routeFields.component,
+    icon: values.icon,
+    sortOrder,
+    status,
+    fullDisplay,
+    level,
+  }
+}

package/src/views/page-system/menu/index.less

@@ -0,0 +1,12 @@
+.menu-page {
+  .menu-page__side-form {
+    .cx-input {
+      width: 100%;
+    }
+
+    .cx-select-selector,
+    .cx-tree-select {
+      width: 100%;
+    }
+  }
+}