cx-chat 0.0.1

package/src/views/page-menus/feedback/components/feedback-dataset-list.tsx

@@ -0,0 +1,471 @@
+import { approveFeedbackAPI, rejectFeedbackAPI, updateFeedbackAPI } from '@/api/menus/feedback'
+import ConfirmDialog from '@/components/common/modal/confirm-dialog'
+import { useAuth } from '@/contexts/AuthContext'
+import { useToast } from '@/contexts/ToastContext'
+import {
+    type FeedbackDatasetItem,
+    feedbackStatusI18nKey,
+    isFeedbackPending,
+} from '@/types/feedback'
+import { parseBackendDate } from '@/utils/date'
+import {
+    markdownRehypePlugins,
+    markdownRemarkPlugins,
+} from '@/utils/markdown-math-plugins'
+import { useMutation } from '@tanstack/react-query'
+import clsx from 'clsx'
+import {
+    CheckCircle,
+    Edit3,
+    Loader2,
+    Save,
+    ThumbsDown,
+    ThumbsUp,
+    Trash2,
+    X,
+    XCircle,
+} from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { Options as ReactMarkdownOptions } from 'react-markdown'
+import ReactMarkdown from 'react-markdown'
+
+export interface FeedbackDatasetListProps {
+  pageConfig: {
+    fetchTableData?: () => Promise<void>
+    onDelete?: (record: { id: string }) => void
+  }
+  tableData: FeedbackDatasetItem[]
+  loading: boolean
+}
+
+export function FeedbackDatasetList({
+  pageConfig,
+  tableData,
+  loading,
+}: FeedbackDatasetListProps) {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const { hasPermission } = useAuth()
+
+  const listTopRef = useRef<HTMLDivElement>(null)
+
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [editPrompt, setEditPrompt] = useState('')
+  const [editCompletion, setEditCompletion] = useState('')
+  const [reviewConfirm, setReviewConfirm] = useState<{
+    open: boolean
+    id: string
+    action: 'approve' | 'reject'
+  }>({ open: false, id: '', action: 'approve' })
+
+  const updateMutation = useMutation({
+    mutationFn: async (vars: { id: string; data: any }) => {
+      const response = await updateFeedbackAPI(
+        {
+          id: vars.id,
+          question: vars.data.question,
+          answer: vars.data.answer,
+        }
+      )
+      // Axios 响应对象：response.data 是实际的响应数据
+      const responseData = response.data
+      // 检查业务逻辑是否成功
+      if (responseData && responseData.success === false) {
+        throw new Error(responseData.message || t('common.operation_failed'))
+      }
+      return responseData
+    },
+    onSuccess: (data, variables) => {
+      void pageConfig.fetchTableData?.()
+      setEditingId(null)
+
+      if (variables.data.question || variables.data.answer) {
+        showToast(t('common.saved'), 'success')
+      }
+
+      setTimeout(() => {
+        listTopRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+        })
+      }, 100)
+    },
+    onError: (error: any) => {
+      console.error('更新失败:', error)
+    },
+  })
+
+  useEffect(() => {
+    if (editingId) {
+      requestAnimationFrame(() => {
+        const element = document.getElementById(`feedback-item-${editingId}`)
+        element?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      })
+    }
+  }, [editingId])
+
+  const handleEdit = (item: FeedbackDatasetItem) => {
+    setEditingId(item.id)
+    setEditPrompt(item.question)
+    setEditCompletion(item.answer)
+  }
+
+  const handleCancelEdit = () => {
+    setEditingId(null)
+  }
+
+  const handleSave = (id: string) => {
+    updateMutation.mutate({
+      id,
+      data: {
+        question: editPrompt,
+        answer: editCompletion,
+      },
+    })
+  }
+
+  /** 调用审核通过或拒绝接口（需在确认框 onOk 中执行） */
+  const submitReview = async (id: string, action: 'approve' | 'reject') => {
+    const response =
+      action === 'approve'
+        ? await approveFeedbackAPI(id)
+        : await rejectFeedbackAPI(id)
+    const responseData = response.data
+    if (responseData && responseData.success === false) {
+      throw new Error(responseData.message || t('common.operation_failed'))
+    }
+    showToast(
+      action === 'approve'
+        ? t('menus.feedback.toast.approved')
+        : t('menus.feedback.toast.rejected'),
+      'success',
+    )
+    void pageConfig.fetchTableData?.()
+    setTimeout(() => {
+      listTopRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      })
+    }, 100)
+  }
+
+  /** 打开审核确认弹框（与删除确认同款 ConfirmDialog） */
+  const openReviewConfirm = (id: string, action: 'approve' | 'reject') => {
+    setReviewConfirm({ open: true, id, action })
+  }
+
+  /** 关闭审核确认弹框 */
+  const closeReviewConfirm = () => {
+    setReviewConfirm((prev) => ({ ...prev, open: false }))
+  }
+
+  /** 确认审核：调用接口后关闭弹框 */
+  const confirmReview = async () => {
+    try {
+      await submitReview(reviewConfirm.id, reviewConfirm.action)
+      closeReviewConfirm()
+    } catch (err) {
+      console.log(err instanceof Error ? err.message : String(err))
+    }
+  }
+
+  if (loading && (!tableData || tableData.length === 0)) {
+    return (
+      <div className="flex flex-col justify-center items-center h-64">
+        <Loader2 className="animate-spin h-8 w-8 text-blue-600 mb-2" />
+        <p>{t('common.loading')}</p>
+      </div>
+    )
+  }
+
+  const feedbackList = tableData || []
+
+  return (
+    <>
+      <div className="space-y-6 scroll-mt-24" ref={listTopRef}>
+      {feedbackList.length === 0 ? (
+        <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
+          <p className="text-gray-500 dark:text-gray-400">
+            {t('menus.feedback.no_records')}
+          </p>
+        </div>
+      ) : (
+        feedbackList.map((item) => {
+          const isEditing = editingId === item.id
+          const statusKey = feedbackStatusI18nKey(item.status)
+          return (
+            <div
+              key={item.id}
+              id={`feedback-item-${item.id}`}
+              className="group bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden flex flex-col">
+              <div className="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center bg-gray-50/50 dark:bg-gray-800/50">
+                <div className="flex items-center gap-3 flex-wrap">
+                  <span
+                    className={clsx(
+                      'px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wide',
+                      statusKey === 'pending' &&
+                        'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-200',
+                      statusKey === 'approved' &&
+                        'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200',
+                      statusKey === 'rejected' &&
+                        'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200',
+                    )}>
+                    {t(`menus.feedback.status.${statusKey}`)}
+                  </span>
+                  {item.evaluationType === 10 && (
+                    <span className="flex items-center gap-1 text-xs font-medium text-green-600 dark:text-green-400">
+                      <ThumbsUp size={14} /> {t('menus.feedback.like')}
+                    </span>
+                  )}
+                  {item.evaluationType === 20 && (
+                    <span className="flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400">
+                      <ThumbsDown size={14} /> {t('menus.feedback.dislike')}
+                    </span>
+                  )}
+
+                  <span className="text-xs text-gray-400 ml-2">
+                    {t('menus.feedback.submitted_at')}:{' '}
+                    {parseBackendDate(item.createTime)?.format('yyyy-MM-dd hh:mm:ss') ??
+                      item.createTime}
+                  </span>
+                </div>
+
+                {(item.reviewBy || item.reviewTime) && (
+                  <div className="text-xs text-gray-500 flex items-center gap-2 shrink-0">
+                    {item.reviewBy && (
+                      <span>
+                        {t('menus.feedback.reviewed_by', {
+                          name: item.reviewBy,
+                        })}
+                      </span>
+                    )}
+                    {item.reviewTime && (
+                      <span className="text-gray-400">
+                        (
+                        {parseBackendDate(item.reviewTime)?.format(
+                          'yyyy-MM-dd hh:mm:ss',
+                        ) ?? item.reviewTime}
+                      )
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              <div className="divide-y divide-gray-100 dark:divide-gray-700 flex-1">
+                <div className="p-6 bg-gray-50/30 dark:bg-gray-800/20">
+                  <div className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
+                    {t('menus.feedback.user_input')}
+                  </div>
+                  {isEditing ? (
+                    <textarea
+                      autoFocus
+                      value={editPrompt}
+                      onChange={(e) => setEditPrompt(e.target.value)}
+                      className="w-full h-32 p-3 text-sm bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none font-mono text-gray-800 dark:text-gray-100"
+                    />
+                  ) : (
+                    <div className="prose dark:prose-invert prose-sm max-w-none text-gray-800 dark:text-gray-200 break-words">
+                      <ReactMarkdown
+                        remarkPlugins={markdownRemarkPlugins}
+                        rehypePlugins={markdownRehypePlugins}
+                        components={{
+                          table: ({ ...props }) => (
+                            <table
+                              className="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden"
+                              {...props}
+                            />
+                          ),
+                          thead: ({ ...props }) => (
+                            <thead
+                              className="bg-gray-50 dark:bg-gray-800"
+                              {...props}
+                            />
+                          ),
+                          tbody: ({ ...props }) => (
+                            <tbody
+                              className="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-900"
+                              {...props}
+                            />
+                          ),
+                          tr: ({ ...props }) => <tr {...props} />,
+                          th: ({ ...props }) => (
+                            <th
+                              className="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider border-r border-gray-200 dark:border-gray-700 last:border-r-0"
+                              {...props}
+                            />
+                          ),
+                          td: ({ ...props }) => (
+                            <td
+                              className="px-3 py-2 whitespace-normal text-sm text-gray-700 dark:text-gray-300 border-r border-gray-200 dark:border-gray-700 last:border-r-0"
+                              {...props}
+                            />
+                          ),
+                        }}>
+                        {item.question}
+                      </ReactMarkdown>
+                    </div>
+                  )}
+                </div>
+
+                <div className="p-6 bg-blue-50/10 dark:bg-blue-900/5">
+                  <div className="text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wider mb-2">
+                    {t('menus.feedback.ai_response')}
+                  </div>
+                  {isEditing ? (
+                    <textarea
+                      value={editCompletion}
+                      onChange={(e) => setEditCompletion(e.target.value)}
+                      className="w-full h-64 p-3 text-sm bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none font-mono text-gray-800 dark:text-gray-100"
+                    />
+                  ) : (
+                    <div className="prose dark:prose-invert prose-sm max-w-none text-gray-900 dark:text-gray-100 break-words">
+                      <ReactMarkdown
+                        remarkPlugins={
+                          markdownRemarkPlugins as ReactMarkdownOptions['remarkPlugins']
+                        }
+                        rehypePlugins={
+                          markdownRehypePlugins as ReactMarkdownOptions['rehypePlugins']
+                        }
+                        components={{
+                          table: ({ ...props }) => (
+                            <table
+                              className="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden my-4"
+                              {...props}
+                            />
+                          ),
+                          thead: ({ ...props }) => (
+                            <thead
+                              className="bg-gray-50 dark:bg-gray-800"
+                              {...props}
+                            />
+                          ),
+                          tbody: ({ ...props }) => (
+                            <tbody
+                              className="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-900"
+                              {...props}
+                            />
+                          ),
+                          tr: ({ ...props }) => <tr {...props} />,
+                          th: ({ ...props }) => (
+                            <th
+                              className="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider border-r border-gray-200 dark:border-gray-700 last:border-r-0"
+                              {...props}
+                            />
+                          ),
+                          td: ({ ...props }) => (
+                            <td
+                              className="px-3 py-2 whitespace-normal text-sm text-gray-700 dark:text-gray-300 border-r border-gray-200 dark:border-gray-700 last:border-r-0"
+                              {...props}
+                            />
+                          ),
+                        }}>
+                        {item.answer}
+                      </ReactMarkdown>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="px-6 py-4 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-700 flex justify-between items-center sticky bottom-0 z-10">
+                <div className="text-xs text-gray-400 font-mono select-all">
+                  ID: {item.id}
+                </div>
+
+                <div className="flex items-center gap-3 flex-wrap justify-end">
+                  {isEditing ? (
+                    <>
+                      <button
+                        type="button"
+                        onClick={() => handleSave(item.id)}
+                        className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 active:scale-95 active:bg-blue-800 text-white rounded-lg text-xs font-medium transition-all">
+                        <Save size={14} /> {t('common.save')}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={handleCancelEdit}
+                        className="p-1.5 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700 active:scale-90 active:bg-gray-300 dark:active:bg-gray-600 rounded-lg transition-all">
+                        <X size={16} />
+                      </button>
+                    </>
+                  ) : (
+                    isFeedbackPending(item.status) &&
+                    hasPermission('feedback-manage:edit') && (
+                      <button
+                        type="button"
+                        onClick={() => handleEdit(item)}
+                        className="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 active:scale-90 active:bg-blue-100 dark:active:bg-blue-900/40 rounded-lg transition-all border border-transparent hover:border-blue-100 dark:hover:border-blue-800"
+                        title={t('menus.feedback.actions.edit')}>
+                        <Edit3 size={16} />
+                      </button>
+                    )
+                  )}
+
+                  {(isFeedbackPending(item.status) || isEditing) && (
+                    <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
+                  )}
+
+                  {isFeedbackPending(item.status) &&
+                    !isEditing &&
+                    (hasPermission('feedback-manage:approve') || hasPermission('feedback-manage:reject')) && (
+                      <>
+                        {hasPermission('feedback-manage:approve') && (
+                          <button
+                          type="button"
+                          onClick={() => openReviewConfirm(item.id, 'approve')}
+                          className="flex items-center gap-1 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-medium transition-transform active:scale-95 shadow-sm">
+                          <CheckCircle size={16} />{' '}
+                          {t('menus.feedback.actions.approve')}
+                          </button>
+                        )}
+                        {hasPermission('feedback-manage:reject') && (
+                          <button
+                          type="button"
+                          onClick={() => openReviewConfirm(item.id, 'reject')}
+                          className="flex items-center gap-1 px-4 py-2 bg-white dark:bg-gray-800 border border-red-200 dark:border-red-900/50 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg text-sm font-medium transition-transform active:scale-95">
+                          <XCircle size={16} />{' '}
+                          {t('menus.feedback.actions.reject')}
+                          </button>
+                        )}
+                      </>
+                    )}
+
+                  {hasPermission('feedback-manage:delete') && (
+                    <button
+                      type="button"
+                      onClick={() => pageConfig.onDelete?.({ id: item.id })}
+                      className="ml-2 p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 active:scale-90 active:bg-red-100 dark:active:bg-red-900/40 rounded-lg transition-all"
+                      title={t('menus.feedback.actions.delete')}>
+                      <Trash2 size={16} />
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          )
+        })
+      )}
+      </div>
+
+      <ConfirmDialog
+        isOpen={reviewConfirm.open}
+        danger={reviewConfirm.action === 'reject'}
+        title={
+          reviewConfirm.action === 'approve'
+            ? t('menus.feedback.confirm_approve_title')
+            : t('menus.feedback.confirm_reject_title')
+        }
+        message={
+          reviewConfirm.action === 'approve'
+            ? t('menus.feedback.confirm_approve_message')
+            : t('menus.feedback.confirm_reject_message')
+        }
+        confirmText={t('common.ok')}
+        cancelText={t('common.cancel')}
+        onClose={closeReviewConfirm}
+        onConfirm={confirmReview}
+      />
+    </>
+  )
+}

package/src/views/page-menus/feedback/index.tsx

@@ -0,0 +1,166 @@
+import { deleteFeedbacksAPI, getFeedbackPageAPI } from '@/api/menus/feedback'
+import { useAuth } from '@/contexts/AuthContext'
+import type { FeedbackStatusFilter } from '@/types/feedback'
+import ListPageView, { createListPageConfig } from '@components/table-view'
+import clsx from 'clsx'
+import { Download, MessageSquareQuote } from 'lucide-react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { FeedbackDatasetList } from './components/feedback-dataset-list'
+import ExportFeedbackModal from './modal/export-feedback-modal'
+
+/** 列表顶部状态筛选是否与当前搜索条件一致（空值为「全部」） */
+function isFeedbackStatusTabActive(
+  current: unknown,
+  tab: FeedbackStatusFilter,
+): boolean {
+  if (tab === '') {
+    return current === '' || current === undefined || current === null
+  }
+  return current === tab
+}
+
+const FEEDBACK_STATUS_TABS: Array<{
+  value: FeedbackStatusFilter
+  i18nKey: 'pending' | 'approved' | 'rejected' | 'all'
+}> = [
+  { value: 0, i18nKey: 'pending' },
+  { value: 1, i18nKey: 'approved' },
+  { value: 2, i18nKey: 'rejected' },
+  { value: '', i18nKey: 'all' },
+]
+
+const useListPageConfig = createListPageConfig({
+  tableAPI: getFeedbackPageAPI,
+  deleteAPI: deleteFeedbacksAPI,
+  pageInfo: {
+    title: 'menus.feedback.title_dataset',
+    subTitle: 'menus.feedback.subtitle_dataset',
+  },
+  pagination: { page: 1, pageSize: 10, total: 0 },
+  initialSearchFormData: {
+    status: '',
+    userName: '',
+    evaluationType: '',
+    startTime: '',
+    endTime: '',
+  },
+  searchFields: [
+    {
+      prop: 'userName',
+      label: 'menus.feedback.filter_content',
+      placeholder: 'menus.feedback.search_content_placeholder',
+    },
+    {
+      prop: 'evaluationType',
+      label: 'menus.feedback.filter_score',
+      placeholder: 'menus.feedback.search_score_placeholder',
+      type: 'select',
+      options: [
+        // {label: 'menus.feedback.score_all', value: '',},
+        {label: 'menus.feedback.like', value: '10',},
+        {label: 'menus.feedback.dislike', value: '20',}
+      ]
+    },
+    {
+      prop: 'startDate',
+      label: 'menus.feedback.search_date_range_label',
+      placeholder: [
+        'menus.feedback.search_date_range_ph_start',
+        'menus.feedback.search_date_range_ph_end',
+      ],
+      type: 'dateRange',
+      rangeStartProp: 'startTime',
+      rangeEndProp: 'endTime',
+      format: 'YYYY-MM-DD HH:mm:ss',
+    },
+  ],
+  table: { showPagination: true },
+  deleteConfirm: {
+    title: 'menus.feedback.confirm_delete_title',
+    content: 'menus.feedback.confirm_delete_message',
+    okText: 'common.delete',
+    cancelText: 'common.cancel',
+  },
+})
+
+function IndexView() {
+  const { t } = useTranslation()
+  const { hasPermission } = useAuth()
+  const [exportOpen, setExportOpen] = useState(false)
+  const [exportSnapshot, setExportSnapshot] = useState<{
+    paginationData?: { page?: number; pageSize?: number }
+    listQuery?: { sort?: string; order?: 'asc' | 'desc' }
+    searchFormData?: Record<string, unknown>
+  }>({})
+
+  const pageConfig = useListPageConfig()
+
+  return (
+    <div className="menus-feedback-page">
+      <ListPageView
+        pageConfig={pageConfig}
+        headerActions={
+          <>
+            {hasPermission('feedback-manage:export') && (
+              <button
+                type="button"
+                onClick={() => {
+                  setExportSnapshot({
+                    paginationData: pageConfig.paginationData,
+                    listQuery: pageConfig.listQuery,
+                    searchFormData: pageConfig.searchFormData as Record<
+                      string,
+                      unknown
+                    >,
+                  })
+                  setExportOpen(true)
+                }}
+                className="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 active:scale-95 active:bg-gray-100 dark:active:bg-gray-600 transition-all flex items-center gap-2 mr-2"
+                title={t('menus.feedback.export.title')}>
+                <Download size={16} />
+                <span className="hidden sm:inline">
+                  {t('menus.feedback.export.action')}
+                </span>
+              </button>
+            )}
+            {FEEDBACK_STATUS_TABS.map(({ value, i18nKey }) => (
+              <button
+                key={i18nKey}
+                type="button"
+                onClick={() =>
+                  pageConfig.patchSearchAndRefresh?.({ status: value })
+                }
+                className={clsx(
+                  'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 active:scale-95',
+                  isFeedbackStatusTabActive(
+                    (pageConfig.searchFormData as { status?: unknown })
+                      ?.status,
+                    value,
+                  )
+                    ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20 scale-105 active:bg-blue-700'
+                    : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-200 active:bg-gray-300 dark:active:bg-gray-600',
+                )}>
+                {t(`menus.feedback.status.${i18nKey}`)}
+              </button>
+            ))}
+          </>
+        }
+        renderList={() => (
+          <FeedbackDatasetList
+            pageConfig={pageConfig}
+            tableData={pageConfig.tableData}
+            loading={pageConfig.loading}
+          />
+        )}
+      />
+      <ExportFeedbackModal
+        isOpen={exportOpen}
+        onClose={() => setExportOpen(false)}
+        listSnapshot={exportSnapshot}
+      />
+    </div>
+  )
+}
+
+export default IndexView