cx-chat 0.0.1 → 0.0.3

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

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

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