cx-chat 0.0.1

package/src/views/page-menus/feedback/modal/export-feedback-modal.tsx

@@ -0,0 +1,367 @@
+import { exportFeedbacksBlobAPI } from '@/api/menus/feedback'
+import { useToast } from '@/contexts/ToastContext'
+import { CxButton, CxCheckbox, CxModal, CxRangePicker } from '@cx-ui'
+import dayjs, { type Dayjs } from 'dayjs'
+import { Calendar, CheckSquare, Download, FileText } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export interface ExportFeedbackModalProps {
+  isOpen: boolean
+  onClose: () => void
+  /** 从列表页传入的当前查询快照：分页/排序/搜索条件等 */
+  listSnapshot?: {
+    paginationData?: { page?: number; pageSize?: number }
+    listQuery?: { sort?: string; order?: 'asc' | 'desc' }
+    searchFormData?: Record<string, unknown>
+  }
+}
+
+type ExportFormat = 'jsonl' | 'csv'
+type DateRange = '7d' | '30d' | 'all' | 'custom'
+
+export function ExportFeedbackModal({
+  isOpen,
+  onClose,
+  listSnapshot,
+}: ExportFeedbackModalProps) {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const [isExporting, setIsExporting] = useState(false)
+
+  const [rangeType, setRangeType] = useState<DateRange>('all')
+  const [dateRange, setDateRange] = useState<
+    [Date | undefined, Date | undefined]
+  >([undefined, undefined])
+
+  const [selectedScores, setSelectedScores] = useState<number[]>([10])
+
+  const [format, setFormat] = useState<ExportFormat>('jsonl')
+
+  /** 打开弹框时，用列表查询快照初始化筛选（不新增输入框，只取列表现有条件）。 */
+  useEffect(() => {
+    if (!isOpen) return
+    const sfd = (listSnapshot?.searchFormData ?? {}) as Record<string, unknown>
+    const startTime = sfd.startTime
+    const endTime = sfd.endTime
+    if (startTime && endTime) {
+      const sd = new Date(String(startTime))
+      const ed = new Date(String(endTime))
+      setDateRange([sd, ed])
+      setRangeType('custom')
+    } else {
+      setDateRange([undefined, undefined])
+      setRangeType('all')
+    }
+
+    // 列表评价类型筛选 evaluationType：'10' | '20' | ''（空=全部）
+    const et = sfd.evaluationType
+    if (et === '10' || et === 10) {
+      setSelectedScores([10])
+    } else if (et === '20' || et === 20) {
+      setSelectedScores([20])
+    } else {
+      setSelectedScores([10, 20])
+    }
+  }, [isOpen, listSnapshot])
+
+  const handleRangeChange = (type: DateRange) => {
+    setRangeType(type)
+    const now = new Date()
+    if (type === '7d') {
+      const start = new Date(now)
+      start.setDate(now.getDate() - 7)
+      setDateRange([start, now])
+    } else if (type === '30d') {
+      const start = new Date(now)
+      start.setDate(now.getDate() - 30)
+      setDateRange([start, now])
+    } else if (type === 'all') {
+      setDateRange([undefined, undefined])
+    }
+  }
+
+  useEffect(() => {
+    if (!isOpen || rangeType === 'custom') return
+    const now = new Date()
+    if (rangeType === '7d') {
+      const start = new Date(now)
+      start.setDate(now.getDate() - 7)
+      setDateRange([start, now])
+    } else if (rangeType === '30d') {
+      const start = new Date(now)
+      start.setDate(now.getDate() - 30)
+      setDateRange([start, now])
+    } else if (rangeType === 'all') {
+      setDateRange([undefined, undefined])
+    }
+  }, [isOpen, rangeType])
+
+  const setScoreChecked = (score: number, checked: boolean) => {
+    setSelectedScores((prev) => {
+      if (checked) {
+        return prev.includes(score) ? prev : [...prev, score]
+      }
+      return prev.filter((s) => s !== score)
+    })
+  }
+
+  const toggleScore = (score: number) => {
+    setSelectedScores((prev) =>
+      prev.includes(score) ? prev.filter((s) => s !== score) : [...prev, score],
+    )
+  }
+
+  const handleExport = async () => {
+    if (selectedScores.length === 0) {
+      showToast(t('menus.feedback.export.error_no_status'), 'error')
+      return
+    }
+
+    if (rangeType === 'custom' && (!dateRange[0] || !dateRange[1])) {
+      showToast(t('menus.feedback.export.error_date_required'), 'error')
+      return
+    }
+
+    setIsExporting(true)
+    try {
+      const sfd = (listSnapshot?.searchFormData ?? {}) as Record<string, unknown>
+      const pd = listSnapshot?.paginationData
+      const lq = listSnapshot?.listQuery
+
+      const payload: Record<string, unknown> = {
+        page: pd?.page ?? 1,
+        size: pd?.pageSize ?? 10,
+        sort: lq?.sort ?? 'createTime',
+        order: lq?.order ?? 'desc',
+        userName: sfd.userName,
+        status: sfd.status,
+        question: sfd.question ?? sfd.searchQ,
+        answer: sfd.answer,
+        format: format === 'csv' ? 1 : 2,
+      }
+
+      // 时间范围：使用弹框选择（默认取列表快照初始化）；all 则不传
+      if (rangeType !== 'all') {
+        if (dateRange[0]) payload.startTime = dateRange[0].toISOString()
+        if (dateRange[1]) payload.endTime = dateRange[1].toISOString()
+      }
+
+      // 评价类型：0=赞、1=踩；若两者都勾选则不传（表示全部）
+      if (selectedScores.length === 1) {
+        payload.evaluationType = selectedScores[0]
+      }
+      // 清理：空值代表全部（不传）
+      if (payload.status === '' || payload.status === undefined || payload.status === null) {
+        delete payload.status
+      }
+      if (payload.userName === '' || payload.userName === undefined || payload.userName === null) {
+        delete payload.userName
+      }
+      if (payload.question === '' || payload.question === undefined || payload.question === null) {
+        delete payload.question
+      }
+      if (payload.answer === '' || payload.answer === undefined || payload.answer === null) {
+        delete payload.answer
+      }
+
+      const blobRes = await exportFeedbacksBlobAPI(payload)
+      const blob =
+        blobRes instanceof Blob ? blobRes : (blobRes as any)?.data ?? blobRes
+      const url = window.URL.createObjectURL(
+        blob instanceof Blob ? blob : new Blob([blob]),
+      )
+      const link = document.createElement('a')
+      link.href = url
+      const ext = format === 'jsonl' ? 'jsonl' : 'csv'
+      const filename = `feedback_export_${new Date().toISOString().slice(0, 10)}.${ext}`
+      link.setAttribute('download', filename)
+      document.body.appendChild(link)
+      link.click()
+      link.remove()
+
+      showToast(t('menus.feedback.export.success'), 'success')
+      onClose()
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  const rangePickerValue: [Dayjs | null, Dayjs | null] | null =
+    !dateRange[0] && !dateRange[1]
+      ? null
+      : [
+          dateRange[0] ? dayjs(dateRange[0]) : null,
+          dateRange[1] ? dayjs(dateRange[1]) : null,
+        ]
+
+  return (
+    <CxModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={
+        <span className="flex items-center gap-2 font-semibold">
+          <Download size={20} className="shrink-0 text-blue-500" />
+          <span>{t('menus.feedback.export.title')}</span>
+        </span>
+      }
+      actions={[
+        <CxButton.Cancel
+          key="cancel"
+          disabled={isExporting}
+          onClick={onClose}
+        />,
+        <CxButton
+          key="export"
+          type="primary"
+          loading={isExporting}
+          icon={<Download size={16} />}
+          onClick={handleExport}>
+          {t('menus.feedback.export.action')}
+        </CxButton>,
+      ]}
+      modalConfig={{ width: 520 }}>
+      <div className="space-y-6">
+        <div>
+          <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+            <Calendar size={16} />
+            {t('menus.feedback.export.date_range')}
+          </div>
+
+          <div className="mb-3 flex flex-wrap gap-2">
+            {(['7d', '30d', 'all'] as const).map((rt) => (
+              <CxButton
+                key={rt}
+                size="small"
+                type={rangeType === rt ? 'primary' : 'default'}
+                onClick={() => handleRangeChange(rt)}>
+                {t(`menus.feedback.export.range_${rt}`)}
+              </CxButton>
+            ))}
+            <CxButton
+              size="small"
+              type={rangeType === 'custom' ? 'primary' : 'default'}
+              onClick={() => setRangeType('custom')}>
+              {t('menus.feedback.export.range_custom')}
+            </CxButton>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <span className="mb-1 block text-xs text-gray-500 dark:text-gray-400">
+              {t('menus.feedback.export.date_range')}
+            </span>
+            <CxRangePicker
+              allowClear
+              style={{ width: '100%' }}
+              placeholder={[t('common.start_date'), t('common.end_date')]}
+              value={rangePickerValue}
+              onChange={(vals) => {
+                if (!vals || (!vals[0] && !vals[1])) {
+                  setDateRange([undefined, undefined])
+                  setRangeType('custom')
+                  return
+                }
+                setDateRange([
+                  vals[0]?.toDate() ?? undefined,
+                  vals[1]?.toDate() ?? undefined,
+                ])
+                setRangeType('custom')
+              }}
+            />
+          </div>
+        </div>
+
+        <div>
+          <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+            <CheckSquare size={16} />
+            {t('menus.feedback.export.filter_status')}
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-3 rounded-lg border border-gray-200 p-3 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800/50">
+              <CxCheckbox
+                checked={selectedScores.includes(10)}
+                aria-label={t('menus.feedback.export.score_positive')}
+                onChange={(checked) => setScoreChecked(10, checked)}
+              />
+              <button
+                type="button"
+                className="min-w-0 flex-1 cursor-pointer rounded text-left outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1"
+                onClick={() => toggleScore(10)}>
+                <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  {t('menus.feedback.export.score_positive')}
+                </div>
+                <div className="text-xs text-gray-500">
+                  {t('menus.feedback.export.score_positive_desc')}
+                </div>
+              </button>
+            </div>
+
+            <div className="flex items-center gap-3 rounded-lg border border-gray-200 p-3 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800/50">
+              <CxCheckbox
+                checked={selectedScores.includes(20)}
+                aria-label={t('menus.feedback.export.score_negative')}
+                onChange={(checked) => setScoreChecked(20, checked)}
+              />
+              <button
+                type="button"
+                className="min-w-0 flex-1 cursor-pointer rounded text-left outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1"
+                onClick={() => toggleScore(20)}>
+                <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  {t('menus.feedback.export.score_negative')}
+                </div>
+                <div className="text-xs text-gray-500">
+                  {t('menus.feedback.export.score_negative_desc')}
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
+            <FileText size={16} />
+            {t('menus.feedback.export.format')}
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <CxButton
+              type={format === 'jsonl' ? 'primary' : 'default'}
+              className="!flex h-auto min-h-[4.5rem] w-full flex-col items-start justify-center gap-1 py-3 text-left"
+              onClick={() => setFormat('jsonl')}>
+              <span className="block w-full text-sm font-medium leading-tight">
+                JSONL
+              </span>
+              <span
+                className={`block w-full text-xs leading-snug ${
+                  format === 'jsonl'
+                    ? 'opacity-90'
+                    : 'text-gray-500 dark:text-gray-400'
+                }`}>
+                OpenAI SFT Format
+              </span>
+            </CxButton>
+            <CxButton
+              type={format === 'csv' ? 'primary' : 'default'}
+              className="!flex h-auto min-h-[4.5rem] w-full flex-col items-start justify-center gap-1 py-3 text-left"
+              onClick={() => setFormat('csv')}>
+              <span className="block w-full text-sm font-medium leading-tight">
+                CSV
+              </span>
+              <span
+                className={`block w-full text-xs leading-snug ${
+                  format === 'csv'
+                    ? 'opacity-90'
+                    : 'text-gray-500 dark:text-gray-400'
+                }`}>
+                Excel / Analysis
+              </span>
+            </CxButton>
+          </div>
+        </div>
+      </div>
+    </CxModal>
+  )
+}
+
+export default ExportFeedbackModal

package/src/views/page-menus/knowledge/components/doc-editor-by-type.tsx

@@ -0,0 +1,32 @@
+import { CxFormItem } from '@cx-ui'
+import { Form } from 'antd'
+
+import { MdEditor } from '@/components/common/md-editor'
+import { DocEditorTypeFile } from './doc-editor-type-file'
+
+type Props = {
+  docType: number
+}
+
+/** 按文档类型渲染编辑区，便于后续扩展 2、3、4… */
+export function DocEditorByType({ docType }: Props) {
+  if (docType === 0) {
+    return (
+      <Form.Item name="rawText" noStyle>
+        <MdEditor className="min-h-0 flex-1 overflow-hidden" />
+      </Form.Item>
+    )
+  }
+  if (docType === 1) {
+    return (
+      <CxFormItem name="knowledgeDocumentFileInfoDTOList" noStyle>
+        <DocEditorTypeFile />
+      </CxFormItem>
+    )
+  }
+  return (
+    <div className="text-sm text-amber-600 dark:text-amber-400 p-4 border border-dashed rounded-lg">
+      Unsupported type: {docType}
+    </div>
+  )
+}