cx-chat 0.0.1

package/src/views/page-system/dict/modal/cate-submit-modal.tsx

@@ -0,0 +1,315 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import { Form, Input } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import { useToast } from '@/contexts/ToastContext'
+
+import {
+  addDictCateAPI,
+  editDictCateAPI,
+  getDictCateDetailAPI,
+  getDictCateTreeAPI,
+} from '@/api/system/dict'
+import { normalizeTreeAPIResult } from '@/components/table-view/components/tree-api-normalize'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import {
+  CxForm,
+  CxFormItem,
+  CxInput,
+  CxInputNumber,
+  CxModal,
+  CxTreeSelect,
+  useCxModal,
+} from '@cx-ui'
+
+export interface DictCateSubmitModalProps {
+  onOk?: (values: unknown) => void | Promise<void>
+  onCancel?: () => void
+}
+
+type ModalMode = 'add' | 'edit'
+
+type OpenPayload = {
+  opeType?: ModalMode
+  record?: Record<string, unknown>
+  opeId?: string | number
+}
+
+function normalizeDictCateTree(raw: unknown): any[] {
+  return normalizeTreeAPIResult(raw)
+}
+
+function findCateNode(nodes: any[], id: string): any | null {
+  for (const n of nodes) {
+    if (String(n?.id) === id) return n
+    const children = n?.children
+    if (Array.isArray(children) && children.length) {
+      const found = findCateNode(children, id)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+function collectCateIdsWithDescendants(node: any | null): Set<string> {
+  const ids = new Set<string>()
+  const walk = (n: any) => {
+    if (!n || n.id == null) return
+    ids.add(String(n.id))
+    for (const c of n.children || []) walk(c)
+  }
+  walk(node)
+  return ids
+}
+
+function toTreeSelectOptions(nodes: any[], forbidden: Set<string>): any[] {
+  if (!Array.isArray(nodes)) return []
+  return nodes
+    .filter((n) => n != null && !forbidden.has(String(n.id)))
+    .map((n) => ({
+      title: n.name,
+      value: n.id,
+      key: n.id,
+      children: toTreeSelectOptions(n.children || [], forbidden),
+    }))
+}
+
+function normalizeCateDetail(raw: any): any {
+  if (raw?.data?.data) return raw.data.data
+  if (raw?.data) return raw.data
+  return raw || {}
+}
+
+const emptyForm = () => ({
+  name: '',
+  code: '',
+  description: '',
+  sortOrder: 1,
+  parentId: undefined as string | undefined,
+})
+
+const DictCateSubmitModal = forwardRef<any, DictCateSubmitModalProps>(function DictCateSubmitModal(
+  props,
+  ref,
+) {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const { onOk, onCancel } = props
+  const [opeId, setOpeId] = useState<string | undefined>(undefined)
+  const [addAsChild, setAddAsChild] = useState(false)
+  const [treeSelectData, setTreeSelectData] = useState<any[]>([])
+  /** 编辑唯一根节点且后端 parentId=0 时，不展示父级树选，提交固定为 0 */
+  const [parentFixedPlatform, setParentFixedPlatform] = useState(false)
+  const { submitting, handleSubmit } = useModalSubmit<any, any>()
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const nextType = payload.opeType ?? 'add'
+      const record = payload.data
+      const nextOpeId = payload.opeId
+
+      let tree: any[] = []
+      try {
+        const raw = await getDictCateTreeAPI()
+        tree = normalizeDictCateTree(raw)
+      } catch {
+        tree = []
+      }
+
+      const firstRoot = tree[0]
+      const firstRootId =
+        firstRoot != null && firstRoot.id != null && String(firstRoot.id) !== ''
+          ? String(firstRoot.id)
+          : ''
+
+      if (nextType === 'add' && record?.id == null && !firstRootId) {
+        showToast(t('system.dict.cate_tree_empty'), 'warning')
+        return
+      }
+
+      setOpeId(nextType === 'edit' ? String(nextOpeId ?? '') : undefined)
+      setAddAsChild(nextType === 'add' && record?.id != null)
+
+      let forbidden = new Set<string>()
+      if (nextType === 'edit' && record?.id != null) {
+        const selfNode = findCateNode(tree, String(record.id))
+        forbidden = collectCateIdsWithDescendants(selfNode)
+      }
+      const treeOptions = toTreeSelectOptions(tree, forbidden)
+
+      if (nextType === 'edit') {
+        let detail: any = record || {}
+        if (nextOpeId != null && String(nextOpeId) !== '') {
+          try {
+            const detailRes = await getDictCateDetailAPI(nextOpeId)
+            detail = normalizeCateDetail(detailRes)
+          } catch {
+            detail = record || {}
+          }
+        }
+        const pid =
+          detail.parentId != null && String(detail.parentId) !== ''
+            ? String(detail.parentId)
+            : ''
+        const editingRoot =
+          firstRootId !== '' &&
+          record?.id != null &&
+          String(record.id) === firstRootId &&
+          String(pid) === '0'
+        setParentFixedPlatform(editingRoot)
+        setTreeSelectData(treeOptions)
+        form.setFieldsValue({
+          name: detail.name || '',
+          code: detail.code || '',
+          description: detail.description || '',
+          parentId: editingRoot ? '0' : pid,
+          sortOrder:
+            detail.sortOrder != null ? Number(detail.sortOrder) : 1,
+        })
+      } else {
+        setParentFixedPlatform(false)
+        setTreeSelectData(treeOptions)
+        const defaultParentId =
+          record?.id != null && nextType === 'add' ? String(record.id) : firstRootId
+        form.setFieldsValue({
+          ...emptyForm(),
+          parentId: defaultParentId,
+        })
+      }
+    },
+    onClose: () => {
+      setAddAsChild(false)
+      setTreeSelectData([])
+      setParentFixedPlatform(false)
+      onCancel?.()
+    },
+    onReset: () => {
+      setOpeId(undefined)
+    },
+  })
+  
+  const { isOpen, close, form, opeType } = modal
+
+  const formRules = useMemo(
+    () => ({
+      name: [
+        {
+          required: true,
+          message: t('system.dict.cate_name_required'),
+        },
+      ],
+      code: [
+        {
+          required: true,
+          message: t('system.dict.cate_code_required'),
+        },
+      ],
+      sortOrder: [
+        {
+          required: true,
+          message: t('common.sort_order_required'),
+        },
+      ],
+      parentId: [
+        {
+          required: true,
+          message: t('system.dict.cate_parent_required'),
+        },
+      ],
+    }),
+    [t],
+  )
+
+  const title = useMemo(() => {
+    if (opeType === 'edit') return t('system.dict.cate_edit')
+    return addAsChild
+      ? t('system.dict.cate_add_child')
+      : t('system.dict.cate_add_root')
+  }, [opeType, addAsChild, t])
+
+  useImperativeHandle(ref, () => ({
+    open: modal.open,
+    close,
+  }), [modal.open, close])
+
+  const onOkClick = async () => {
+    if (opeType === 'detail') return
+    const result = await handleSubmit({
+      opeType,
+      validate: () => form.validateFields(),
+      addAPI: addDictCateAPI,
+      editAPI: editDictCateAPI,
+      transform: (values) => ({
+        name: values.name,
+        code: values.code,
+        description: values.description || undefined,
+        sortOrder: Number(values.sortOrder ?? 1),
+        parentId: parentFixedPlatform
+          ? '0'
+          : String(values.parentId ?? ''),
+        ...(opeType === 'edit' && opeId ? { id: opeId } : {}),
+      }),
+      // successMessage: {
+      //   add: t('system.dict.cate_save_success_add'),
+      //   edit: t('system.dict.cate_save_success_edit'),
+      // },
+      onSuccess: async ({ values }) => {
+        await onOk?.(values)
+      },
+    })
+    if (result) {
+      close()
+    }
+  }
+
+  return (
+    <CxModal
+      title={title}
+      isOpen={isOpen}
+      onClose={close}
+      opeType={opeType}
+      submitting={submitting}
+      onSubmit={onOkClick}
+      modalConfig={{ width: 560 }}>
+      <CxForm form={form} rules={formRules} layout="vertical" initialValues={emptyForm()}>
+        <CxFormItem label={t('system.dict.field_name')} name="name">
+          <CxInput.Large placeholder={t('system.dict.field_name')} />
+        </CxFormItem>
+        <CxFormItem label={t('system.dict.field_code')} name="code">
+          <CxInput.Large
+            disabled={opeType === 'edit'}
+            placeholder={t('system.dict.field_code')}
+          />
+        </CxFormItem>
+        {parentFixedPlatform ? (
+          <Form.Item name="parentId" hidden>
+            <Input type="hidden" />
+          </Form.Item>
+        ) : (
+          <CxFormItem label={t('system.dict.field_parent')} name="parentId">
+            <CxTreeSelect
+              treeData={treeSelectData}
+              placeholder={t('system.dict.cate_parent_placeholder')}
+              allowClear={false}
+              showSearch
+              filterTreeNode={(inputValue, node) =>
+                String((node as any)?.title ?? '')
+                  .toLowerCase()
+                  .includes(String(inputValue ?? '').toLowerCase())
+              }
+              treeDefaultExpandAll
+            />
+          </CxFormItem>
+        )}
+        <CxFormItem label={t('common.sort_order')} name="sortOrder">
+          <CxInputNumber.Large min={0} precision={0} className="w-full" />
+        </CxFormItem>
+        <CxFormItem label={t('common.description')} name="description">
+          <CxInput.Textarea rows={3} placeholder={t('common.description_placeholder')} />
+        </CxFormItem>
+      </CxForm>
+    </CxModal>
+  )
+})
+
+export default DictCateSubmitModal

package/src/views/page-system/dict/modal/submit-modal.tsx

@@ -0,0 +1,184 @@
+import { Form, Input } from 'antd'
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  addDictDataAPI,
+  editDictDataAPI,
+  getDictDataDetailAPI,
+} from '@/api/system/dict'
+import { useToast } from '@/contexts/ToastContext'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import {
+  CxForm,
+  CxFormItem,
+  CxInput,
+  CxInputNumber,
+  CxModal,
+  CxSwitch,
+  useCxModal,
+} from '@cx-ui'
+
+export interface DictDataSubmitModalProps {
+  onOk?: (values: unknown) => void | Promise<void>
+  onCancel?: () => void
+}
+
+function normalizeDataDetail(raw: any): any {
+  if (raw?.data?.data) return raw.data.data
+  if (raw?.data) return raw.data
+  return raw || {}
+}
+
+const emptyForm = (dictTypeId: string) => ({
+  name: '',
+  value: '',
+  description: '',
+  sortOrder: 1,
+  dictTypeId,
+  defaultFlag: false,
+})
+
+const DictDataSubmitModal = forwardRef<any, DictDataSubmitModalProps>(function DictDataSubmitModal(
+  props,
+  ref,
+) {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const { onOk, onCancel } = props
+  const [lockedDictTypeId, setLockedDictTypeId] = useState('')
+  const { submitting, handleSubmit } = useModalSubmit<any, any>()
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const nextType = payload.opeType ?? 'add'
+      const record = payload.data?.record
+      const typeId = String(payload.data?.dictTypeId ?? record?.dictTypeId ?? '').trim()
+      const { form, opeType, setOpeId } = modal
+      
+      setOpeId(nextType === 'edit' ? String(payload.opeId ?? '') : undefined)
+      setLockedDictTypeId(typeId)
+
+      if (nextType === 'edit') {
+        let detail: any = record || {}
+        const opeId = payload.opeId
+        if (opeId != null && String(opeId) !== '') {
+          try {
+            const detailRes = await getDictDataDetailAPI(opeId)
+            detail = normalizeDataDetail(detailRes)
+          } catch {
+            detail = record || {}
+          }
+        }
+        const dtid = String(detail.dictTypeId ?? typeId ?? '')
+        form.setFieldsValue({
+          name: detail.name || '',
+          value: detail.value != null ? String(detail.value) : '',
+          description: detail.description || '',
+          sortOrder:
+            detail.sortOrder != null ? Number(detail.sortOrder) : 1,
+          dictTypeId: dtid,
+          defaultFlag: Boolean(detail.defaultFlag),
+        })
+      } else {
+        if (!typeId) {
+          showToast(t('system.dict.select_cate_first'), 'warning')
+          return
+        }
+        form.setFieldsValue(emptyForm(typeId))
+      }
+    },
+    onClose: () => {
+      setLockedDictTypeId('')
+      onCancel?.()
+    },
+  })
+  
+  const { isOpen, close, form, opeType, opeId } = modal
+
+  const formRules = useMemo(
+    () => ({
+      name: [{ required: true, message: t('system.dict.data_name_required') }],
+      value: [{ required: true, message: t('system.dict.data_value_required') }],
+      sortOrder: [{ required: true, message: t('common.sort_order_required') }],
+      dictTypeId: [{ required: true, message: t('system.dict.data_dict_type_required') }],
+    }),
+    [t],
+  )
+
+  const title = useMemo(
+    () => (opeType === 'edit' ? t('system.dict.data_edit') : t('system.dict.data_add')),
+    [opeType, t],
+  )
+
+  useImperativeHandle(ref, () => ({
+    open: modal.open,
+    close,
+  }), [modal.open, close])
+
+  const onOkClick = async () => {
+    if (opeType === 'detail') return
+    const result = await handleSubmit({
+      opeType,
+      validate: () => form.validateFields(),
+      addAPI: addDictDataAPI,
+      editAPI: editDictDataAPI,
+      transform: (values) => ({
+        name: values.name,
+        value: values.value,
+        description: values.description || undefined,
+        sortOrder: Number(values.sortOrder ?? 1),
+        dictTypeId: String(values.dictTypeId ?? lockedDictTypeId),
+        defaultFlag: Boolean(values.defaultFlag),
+        ...(opeType === 'edit' && opeId ? { id: opeId } : {}),
+      }),
+      // successMessage: {
+      //   add: t('system.dict.data_save_success_add'),
+      //   edit: t('system.dict.data_save_success_edit'),
+      // },
+      onSuccess: async ({ values }) => {
+        await onOk?.(values)
+      },
+    })
+    if (result) {
+      close()
+    }
+  }
+
+  return (
+    <CxModal
+      title={title}
+      isOpen={isOpen}
+      onClose={close}
+      opeType={opeType}
+      submitting={submitting}
+      onSubmit={onOkClick}
+      modalConfig={{ width: 560 }}>
+      <CxForm form={form} rules={formRules} layout="vertical">
+        <Form.Item name="dictTypeId" hidden>
+          <Input type="hidden" />
+        </Form.Item>
+        <CxFormItem label={t('system.dict.field_name')} name="name">
+          <CxInput.Large placeholder={t('system.dict.field_name')} />
+        </CxFormItem>
+        <CxFormItem label={t('system.dict.field_value')} name="value">
+          <CxInput.Large placeholder={t('system.dict.field_value')} />
+        </CxFormItem>
+        <CxFormItem label={t('common.sort_order')} name="sortOrder">
+          <CxInputNumber.Large min={0} precision={0} className="w-full" />
+        </CxFormItem>
+        <CxFormItem
+          label={t('system.dict.field_default_flag')}
+          name="defaultFlag"
+          valuePropName="checked">
+          <CxSwitch />
+        </CxFormItem>
+        <CxFormItem label={t('common.description')} name="description">
+          <CxInput.Textarea rows={3} placeholder={t('common.description_placeholder')} />
+        </CxFormItem>
+      </CxForm>
+    </CxModal>
+  )
+})
+
+export default DictDataSubmitModal

package/src/views/page-system/logs/components/index.ts

@@ -0,0 +1,3 @@
+export { default as LogMessageDemo } from './log-message-demo'
+export { default as MessageModal } from './message-modal'
+export { default as MessageList } from './message-list'

package/src/views/page-system/logs/components/log-message-demo.tsx

@@ -0,0 +1,30 @@
+import { MessageSquare } from 'lucide-react'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import MessageModal from './message-modal'
+
+/** 系统日志页：右下角消息入口 + 消息弹窗。 */
+export default function LogMessageDemo() {
+  const { t } = useTranslation()
+  const messageModalRef = useRef<{ open: () => void } | null>(null)
+
+  /** 点击右下角消息图标，打开消息弹窗。 */
+  const handleOpenMessageModal = () => {
+    messageModalRef.current?.open()
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className="fixed bottom-6 right-6 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-white shadow-lg transition-colors hover:bg-blue-500"
+        aria-label={t('system.sys_log.actions.open_message')} // 打开消息
+        onClick={handleOpenMessageModal}
+      >
+        <MessageSquare size={22} />
+      </button>
+      <MessageModal ref={messageModalRef} />
+    </>
+  )
+}