cx-chat 0.0.2 → 0.0.3

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

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

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