cx-chat 0.0.1

package/src/views/page-menus/skill/modal/detail-modal.tsx

@@ -0,0 +1,156 @@
+import { getSkillDetailAPI } from '@/api/menus/skill'
+import { CxModal, CxTag, useCxModal } from '@cx-ui'
+import { Form, Spin } from 'antd'
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+type OpenPayload = {
+  opeType?: string
+  opeId?: string | number
+  data?: any
+}
+
+type Props = {
+  onCancel?: () => void
+}
+
+const SKILL_DETAIL_MODAL_WIDTH = 1120
+const SKILL_DETAIL_MODAL_HEIGHT = '95vh'
+const skillDetailModalShellStyles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+    height: SKILL_DETAIL_MODAL_HEIGHT,
+    maxHeight: SKILL_DETAIL_MODAL_HEIGHT,
+  },
+  body: {
+    flex: '1 1 0%',
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+  },
+}
+
+const DetailModal = forwardRef<
+  { close: () => void; open: (payload?: OpenPayload) => void },
+  Props
+>(function DetailModal(props, ref) {
+  const { onCancel } = props
+  const { t } = useTranslation()
+  const [loading, setLoading] = useState(false)
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      const id = payload?.opeId ?? payload?.data?.id
+      setLoading(true)
+      modal.setFormData(null)
+      if (id == null || `${id}`.trim() === '') {
+        setLoading(false)
+        return
+      }
+      try {
+        const res = await getSkillDetailAPI(id)
+        const row = (res as any)?.data ?? payload?.data ?? null
+        modal.setFormData(row)
+      } finally {
+        setLoading(false)
+      }
+    },
+    onClose: () => {
+      onCancel?.()
+    },
+  })
+
+  const { isOpen, close } = modal
+  const record = modal.formData as Record<string, any> | null
+
+  const title = useMemo(() => t('menus.skill.detail'), [t])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  return (
+    <CxModal
+      title={title}
+      isOpen={isOpen}
+      onClose={close}
+      opeType="detail"
+      modalConfig={{
+        width: SKILL_DETAIL_MODAL_WIDTH,
+        styles: {
+          ...skillDetailModalShellStyles,
+        },
+        rootClassName: 'cx-modal-content-fill',
+      }}
+    >
+      {loading ? (
+        <div className="flex justify-center py-20">
+          <Spin size="large" />
+        </div>
+      ) : !record ? (
+        <div className="flex justify-center py-12 text-sm text-gray-500">
+          {t('common.no_data')}
+        </div>
+      ) : (
+        <Form className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
+          <div className="grid shrink-0 grid-cols-1 md:grid-cols-4">
+            <Form.Item label={t('menus.skill.fields.name')} className="!mb-0">
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.name ?? '-'}
+              </div>
+            </Form.Item>
+            <Form.Item label={t('menus.skill.fields.code')} className="!mb-0">
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {record.code ?? '-'}
+              </div>
+            </Form.Item>
+            <Form.Item label={t('common.status')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">
+                <CxTag.Enabled value={record.status} />
+              </div>
+            </Form.Item>
+            <Form.Item
+              label={t('menus.skill.fields.description')}
+              className="!mb-0 md:col-span-4"
+            >
+              <div className="break-words text-sm text-gray-900 dark:text-gray-100">
+                {String(record.description ?? '').trim() || '-'}
+              </div>
+            </Form.Item>
+          </div>
+
+          <div className="mt-3 flex min-h-0 flex-1 flex-col overflow-hidden">
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+              <div className="flex min-h-[44px] shrink-0 items-center border-b border-gray-200 bg-gray-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-700/50">
+                <h3 className="line-clamp-1 py-0.5 text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300">
+                  {t('menus.skill.fields.content')}
+                </h3>
+              </div>
+              <div className="min-h-0 flex-1 overflow-auto p-3 prose prose-sm max-w-none text-gray-900 dark:prose-invert dark:text-gray-100">
+                {String(record.content ?? '').trim() ? (
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                    {String(record.content ?? '')}
+                  </ReactMarkdown>
+                ) : (
+                  <span className="not-prose text-sm text-gray-400">—</span>
+                )}
+              </div>
+            </div>
+          </div>
+        </Form>
+      )}
+    </CxModal>
+  )
+})
+
+export default DetailModal

package/src/views/page-menus/skill/modal/submit-modal.tsx

@@ -0,0 +1,214 @@
+import { addSkillAPI, editSkillAPI, getSkillDetailAPI } from '@/api/menus/skill'
+import { MdEditor } from '@/components/common/md-editor'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import { ENUM_DATA } from '@/meta'
+import { Alert, Form } from 'antd'
+import { forwardRef, useImperativeHandle, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { CxForm, CxFormItem, CxInput, CxModal, useCxModal } from '@cx-ui'
+
+type OpenPayload = {
+  opeType?: string
+  opeId?: string | number
+  data?: any
+}
+
+type Props = {
+  onCancel?: () => void
+  onOk?: (values: any) => void | Promise<void>
+}
+
+const SUBMIT_MODAL_WIDTH = 1120
+const SUBMIT_MODAL_HEIGHT = '95vh'
+
+const SKILL_CONTENT_TEMPLATE = `# 技能说明
+
+## 角色与目标
+（请描述该技能在对话中扮演的角色，以及期望帮助用户达成的目标）
+
+## 能力范围
+（列出技能覆盖的能力与不应回答的范围）
+
+## 约束与规范
+- 
+- 
+
+## 输出与格式
+（应答风格、结构化输出、引用格式等要求）
+
+## 边界与拒答
+（在何种情况下应拒绝、如何提示用户）
+
+## 示例
+
+### 用户
+（示例问题）
+
+### 助手
+（示例理想回复要点）
+`
+
+const submitModalShellStyles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+    height: SUBMIT_MODAL_HEIGHT,
+    maxHeight: SUBMIT_MODAL_HEIGHT,
+  },
+  body: {
+    flex: '1 1 0%',
+    minHeight: 0,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    padding: '20px 32px',
+  },
+}
+
+const SubmitModal = forwardRef<
+  { close: () => void; open: (payload?: OpenPayload) => void },
+  Props
+>(function SubmitModal(props, ref) {
+  const { onCancel, onOk } = props
+  const { t } = useTranslation()
+
+  const modal = useCxModal({
+    onOpen: async (payload) => {
+      form.resetFields()
+      const type = payload?.opeType ?? 'add'
+      if (type === 'edit' && payload?.opeId) {
+        try {
+          const res = await getSkillDetailAPI(payload.opeId)
+          const data = res?.data
+          if (data) {
+            form.setFieldsValue({
+              name: data.name,
+              code: data.code,
+              description: data.description,
+              content: data.content ?? '',
+            })
+          }
+        } catch (error) {
+          console.error('Failed to fetch skill detail:', error)
+        }
+      } else {
+        form.setFieldsValue({
+          name: '',
+          code: '',
+          description: '',
+          content: SKILL_CONTENT_TEMPLATE,
+        })
+      }
+    },
+    onClose: () => {
+      onCancel?.()
+    },
+  })
+
+  const { isOpen, close, form, opeType, opeId } = modal
+  const { submitting, handleSubmit } = useModalSubmit()
+
+  const formRules = useMemo(
+    () => ({
+      name: [
+        { required: true, message: t('menus.skill.rules.name_required') },
+        { whitespace: true, message: t('menus.skill.rules.name_required') },
+      ],
+      code: [
+        { required: true, message: t('menus.skill.rules.code_required') },
+        { whitespace: true, message: t('menus.skill.rules.code_required') },
+        {
+          pattern: /^[a-z][a-z-]*$/,
+          message: t('menus.skill.rules.code_pattern'),
+        },
+      ],
+      description: [
+        { required: true, message: t('menus.skill.rules.description_required') },
+        { whitespace: true, message: t('menus.skill.rules.description_required') },
+      ],
+      content: [{ required: true, message: t('menus.skill.rules.content_required') }],
+    }),
+    [t],
+  )
+
+  const title = useMemo(
+    () =>
+      opeType === 'add' ? t('menus.skill.add') : t('menus.skill.edit'),
+    [opeType, t],
+  )
+
+  const onOkClick = async () => {
+    const result = await handleSubmit({
+      opeType,
+      validate: () => form.validateFields(),
+      addAPI: addSkillAPI,
+      editAPI: editSkillAPI,
+      transform: (values) => ({
+        ...(opeType === 'edit' ? { id: opeId, status: Number(values.status) } : {}),
+        name: values.name,
+        code: values.code,
+        description: values.description,
+        content: values.content,
+      }),
+      onSuccess: async ({ payload }) => {
+        await onOk?.(payload)
+      },
+    })
+    if (result) close()
+  }
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  const statusOptions = ENUM_DATA.commonStatus.option.map(({ label, value }) => ({
+    label: t(label),
+    value: String(value),
+  }))
+
+  return (
+    <CxModal
+      isOpen={isOpen}
+      modalConfig={{
+        width: SUBMIT_MODAL_WIDTH,
+        styles: {
+          ...submitModalShellStyles,
+        },
+        rootClassName: 'cx-modal-content-fill scroll',
+      }}
+      opeType={opeType}
+      submitting={submitting}
+      title={title}
+      onClose={close}
+      onSubmit={onOkClick}
+    >
+      <CxForm form={form} rules={formRules} layout="vertical" className="flex h-full flex-col">
+        <Alert type="info" showIcon className="mb-3 shrink-0" message={t('menus.skill.content_hint')}/>
+        <div className="flex flex-col gap-3">
+          <div className="grid grid-cols-2 gap-4">
+            <CxFormItem label={t('menus.skill.fields.name')} name="name">
+              <CxInput placeholder={t('menus.skill.placeholders.name')} />
+            </CxFormItem>
+            <CxFormItem label={t('menus.skill.fields.code')} name="code">
+              <CxInput placeholder={t('menus.skill.placeholders.code')} />
+            </CxFormItem>
+          </div>
+          <CxFormItem label={t('menus.skill.fields.description')} name="description">
+            <CxInput.Textarea rows={2} placeholder={t('menus.skill.placeholders.description')}/>
+          </CxFormItem>
+          <Form.Item label={t('menus.skill.fields.content')} name="content" className="!mb-0">
+            <MdEditor className="h-[min(55vh,520px)] min-h-[280px] overflow-hidden rounded-xl" />
+          </Form.Item>
+        </div>
+      </CxForm>
+    </CxModal>
+  )
+})
+
+export default SubmitModal