cx-chat 0.0.1

package/src/components/common/detail-link.tsx

@@ -0,0 +1,67 @@
+import clsx from 'clsx'
+import { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CxTooltip } from '@cx-ui'
+
+export type DetailLinkProps = {
+  /** 显示的文本内容 */
+  text: string
+  /** 点击事件 */
+  onClick?: () => void
+  /** 额外的渲染内容（如徽章、图标等） */
+  extra?: ReactNode
+  /** 自定义类名 */
+  className?: string
+  /** 是否禁用 */
+  disabled?: boolean
+  /** tooltip 提示文本，默认为"查看" */
+  title?: string
+}
+
+/**
+ * 表格中可点击跳转详情的链接组件
+ * 
+ * @example
+ * // 基础用法
+ * <DetailLink text={record.name} onClick={() => handleDetail(record)} />
+ * 
+ * @example
+ * // 带额外内容（如徽章）
+ * <DetailLink 
+ *   text={record.name} 
+ *   onClick={() => handleDetail(record)}
+ *   extra={<span className="ml-2 px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">系统</span>}
+ * />
+ */
+export function DetailLink({
+  text,
+  onClick,
+  extra,
+  className,
+  disabled = false,
+  title,
+}: DetailLinkProps) {
+  const { t } = useTranslation()
+  const tooltipTitle = title ?? t('common.view')
+  
+  return (
+    <CxTooltip title={tooltipTitle}>
+      <button
+        type="button"
+        className={clsx(
+          'max-w-full cursor-pointer truncate text-blue-600 hover:underline dark:text-blue-400',
+          disabled && 'cursor-not-allowed opacity-50 hover:no-underline',
+          className,
+        )}
+        disabled={disabled}
+        onClick={disabled ? undefined : onClick}>
+        <span className="inline-flex items-center gap-1">
+          <span className="truncate">{text}</span>
+          {extra}
+        </span>
+      </button>
+    </CxTooltip>
+  )
+}
+
+DetailLink.displayName = 'DetailLink'

package/src/components/common/error-boundary.tsx

@@ -0,0 +1,98 @@
+import {Component} from 'react';
+import type {ErrorInfo, ReactNode} from 'react';
+import {AlertTriangle, RefreshCcw} from 'lucide-react';
+
+interface Props {
+  children?: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return {hasError: true, error};
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('------- 全局错误边界捕获到错误 -------');
+    console.error('错误:', error);
+    console.error('组件堆栈:', errorInfo.componentStack);
+    console.error('----------------------------------------');
+  }
+
+  public handleReload = () => {
+    window.location.reload();
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
+          <div
+            className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center border border-gray-200 dark:border-gray-700">
+            <div
+              className="w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
+              <AlertTriangle className="w-8 h-8 text-red-600 dark:text-red-400"/>
+            </div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+              出错了
+            </h1>
+            <p className="text-gray-500 dark:text-gray-400 mb-6">
+              应用程序遇到意外错误。请尝试重新加载页面。
+            </p>
+
+            {this.state.error && (
+              <div
+                className="mb-6 p-4 bg-gray-100 dark:bg-gray-900 rounded-lg text-left overflow-auto max-h-32 text-xs font-mono text-red-500">
+                {this.state.error.toString()}
+              </div>
+            )}
+
+            <button
+              onClick={this.handleReload}
+              className="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+            >
+              <RefreshCcw size={18}/>
+              重新加载应用
+            </button>
+
+            <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 w-full">
+              <p className="text-sm text-gray-500 mb-3">
+                如果重新加载无法解决问题，请尝试重置应用程序。
+                <br/>
+                <span className="text-xs text-orange-500">
+                                    （这将清除您的本地会话和设置）
+                                </span>
+              </p>
+              <button
+                onClick={() => {
+                  localStorage.clear();
+                  window.location.reload();
+                }}
+                className="text-sm text-red-600 hover:text-red-700 underline underline-offset-4"
+              >
+                重置应用并清除缓存
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/src/components/common/language-switcher.tsx

@@ -0,0 +1,91 @@
+import { useUserPreferences } from '@/hooks/useUserPreferences';
+import { setStore } from '@/utils/storage';
+import { Check, Globe } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const languages = [
+    { code: 'zh', name: '简体中文', nativeName: '简体中文', displayCode: '中' },
+    { code: 'en', name: 'English', nativeName: 'English', displayCode: 'EN' },
+];
+
+interface LanguageSwitcherProps {
+    direction?: 'up' | 'down';
+    /** 是否在按钮上显示当前语言代码（如 EN / ZH） */
+    showCode?: boolean;
+    /** 仅本地切换语言：不调用保存语言接口（用于登录页等未登录场景） */
+    localOnly?: boolean;
+}
+
+const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({ direction = 'up', showCode = false, localOnly = false }) => {
+    const { i18n } = useTranslation();
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const { saveLanguage } = useUserPreferences();
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+
+    const currentCode = String(i18n.language || '').toLowerCase().startsWith('zh') ? 'zh' : 'en';
+    const currentLanguage = languages.find(lang => lang.code === currentCode) || languages[0];
+
+    const handleLanguageChange = (langCode: string) => {
+        i18n.changeLanguage(langCode);
+        if (localOnly) {
+            // localStorage.setItem('i18nextLng', langCode);
+            setStore('i18nextLng', langCode);
+        } else {
+            saveLanguage(langCode);  // Save to server
+        }
+        setIsOpen(false);
+    };
+
+    return (
+        <div className="relative" ref={dropdownRef}>
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className={`p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-500 dark:text-gray-400${showCode ? ' flex items-center gap-1' : ''}`}
+                title={currentLanguage.nativeName}
+            >
+                <Globe size={20} />
+                {showCode && (
+                    <span className="text-[11px] font-bold tracking-wide w-4 text-center">{currentLanguage.displayCode}</span>
+                )}
+                <span className="sr-only">Switch Language</span>
+            </button>
+
+            {isOpen && (
+                <div className={`absolute right-0 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg py-1 z-50 ${direction === 'up' ? 'bottom-full mb-2' : 'top-full mt-2'
+                    }`}>
+                    {languages.map((lang) => (
+                        <button
+                            key={lang.code}
+                            onClick={() => handleLanguageChange(lang.code)}
+                            className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                        >
+                            <span>{lang.nativeName}</span>
+                            {currentCode === lang.code && (
+                                <Check size={16} className="text-blue-600 dark:text-blue-400" />
+                            )}
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default LanguageSwitcher;

package/src/components/common/lite-table/index.tsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import clsx from 'clsx'
+
+import type { ListRenderContext } from '@/components/table-view/components/table-view.types'
+
+export function getRecordKey(record: any, rowKey: string): string | number {
+  const v = record?.[rowKey] ?? record?._id
+  if (v === undefined || v === null) {
+    return `__idx_${JSON.stringify(record).slice(0, 80)}`
+  }
+  return v
+}
+
+export function keysEqual(a: string | number, b: string | number) {
+  return String(a) === String(b)
+}
+
+export type LiteTableBaseProps = Pick<
+  ListRenderContext,
+  'columns' | 'renderCell' | 'tableData' | 't'
+>
+
+export type LiteTableProps = LiteTableBaseProps & {
+  /** 行主键字段，默认 `id` */
+  rowKey?: string
+  onRowClick?: (record: any, index: number) => void
+  rowClassName?: (record: any, index: number) => string
+  /** 包裹 table 的横向滚动容器 */
+  className?: string
+}
+
+/** 从列表渲染上下文中取出 LiteTable 所需字段（忽略 `tree` 等） */
+export function pickLiteTableProps(ctx: ListRenderContext): LiteTableBaseProps {
+  return {
+    columns: ctx.columns,
+    renderCell: ctx.renderCell,
+    tableData: ctx.tableData,
+    t: ctx.t,
+  }
+}
+
+function columnAlignClass(align: string | undefined): string {
+  if (align === 'center') return 'text-center'
+  if (align === 'right') return 'text-right'
+  if (align === 'left') return 'text-left'
+  return ''
+}
+
+/** 与 antd Table 列约定一致：number 视为 px */
+function columnWidthStyle(col: {
+  width?: number | string
+}): React.CSSProperties | undefined {
+  const w = col.width
+  if (w === undefined || w === null || w === '') return undefined
+  return { width: typeof w === 'number' ? `${w}px` : w }
+}
+
+/**
+ * 轻量表格（原生 table）：
+ * - 适合简单展示
+ * - 不依赖 antd Table
+ */
+export default function LiteTable(props: LiteTableProps) {
+  const {
+    className,
+    columns,
+    onRowClick,
+    renderCell,
+    rowClassName,
+    rowKey = 'id',
+    tableData,
+    t,
+  } = props
+
+  return (
+    <div className={clsx('overflow-x-auto', className)}>
+      <table className="w-full table-fixed text-left text-sm">
+        <thead className="bg-gray-50 dark:bg-gray-700/50 text-gray-500 dark:text-gray-400">
+          <tr>
+            {columns.map((col: any, index: number) => (
+              <th
+                key={(col.key as string) ?? col.dataIndex ?? index}
+                style={columnWidthStyle(col)}
+                className={clsx(
+                  'px-3 py-4 font-medium',
+                  columnAlignClass(col.headerAlign ?? col.align ?? 'left'),
+                )}>
+                {typeof col.title === 'string'
+                  ? t(col.title as any)
+                  : ((col.title as React.ReactNode) ?? '')}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+          {tableData.map((record: any, rowIndex: number) => (
+            <tr
+              key={String(getRecordKey(record, rowKey))}
+              role={onRowClick ? 'button' : undefined}
+              tabIndex={onRowClick ? 0 : undefined}
+              onClick={onRowClick ? () => onRowClick(record, rowIndex) : undefined}
+              onKeyDown={
+                onRowClick
+                  ? (e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault()
+                        onRowClick(record, rowIndex)
+                      }
+                    }
+                  : undefined
+              }
+              className={clsx(
+                'transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50',
+                onRowClick && 'cursor-pointer',
+                rowClassName?.(record, rowIndex),
+              )}>
+              {columns.map((col: any, colIndex: number) => (
+                <td
+                  key={(col.key as string) ?? col.dataIndex ?? colIndex}
+                  style={columnWidthStyle(col)}
+                  className={clsx(
+                    'px-3 py-4 text-gray-900 dark:text-white',
+                    columnAlignClass(col.align),
+                  )}>
+                  {renderCell(col, record, rowIndex)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+

package/src/components/common/md-editor.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/utils/cn'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+type Props = {
+  value?: string
+  onChange?: (next: string) => void
+  /** 挂最外层；作为 Form.Item 唯一直接子节点时用这里写高度，勿再外包 div（会接不到 value/onChange） */
+  className?: string
+  id?: string
+  disabled?: boolean
+}
+
+/** 左侧 Markdown 源码、右侧实时预览（与滚动大致同步） */
+export function MdEditor({ value, onChange, className, id, disabled }: Props) {
+  const { t } = useTranslation()
+  const sourceRef = useRef<HTMLTextAreaElement | null>(null)
+  const previewRef = useRef<HTMLDivElement | null>(null)
+  const activeRef = useRef<0 | 1 | 2>(0)
+  const ignoreNextRef = useRef<{ source: boolean; preview: boolean }>({
+    source: false,
+    preview: false,
+  })
+  const rafRef = useRef<number | null>(null)
+  const releaseTimerRef = useRef<number | null>(null)
+
+  const scheduleRelease = () => {
+    if (releaseTimerRef.current != null) window.clearTimeout(releaseTimerRef.current)
+    releaseTimerRef.current = window.setTimeout(() => {
+      activeRef.current = 0
+    }, 120)
+  }
+
+  const syncScroll = (from: 1 | 2) => {
+    const sourceEl = sourceRef.current
+    const previewEl = previewRef.current
+    if (!sourceEl || !previewEl) return
+    activeRef.current = from
+    scheduleRelease()
+
+    if (rafRef.current != null) cancelAnimationFrame(rafRef.current)
+    rafRef.current = requestAnimationFrame(() => {
+      if (from === 1) {
+        ignoreNextRef.current.preview = true
+        const maxFrom = sourceEl.scrollHeight - sourceEl.clientHeight
+        const maxTo = previewEl.scrollHeight - previewEl.clientHeight
+        const ratio = maxFrom > 0 ? sourceEl.scrollTop / maxFrom : 0
+        previewEl.scrollTop = maxTo > 0 ? ratio * maxTo : 0
+        return
+      }
+      ignoreNextRef.current.source = true
+      const maxFrom = previewEl.scrollHeight - previewEl.clientHeight
+      const maxTo = sourceEl.scrollHeight - sourceEl.clientHeight
+      const ratio = maxFrom > 0 ? previewEl.scrollTop / maxFrom : 0
+      sourceEl.scrollTop = maxTo > 0 ? ratio * maxTo : 0
+    })
+  }
+
+  useEffect(() => {
+    return () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current)
+      if (releaseTimerRef.current != null) window.clearTimeout(releaseTimerRef.current)
+    }
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={cn('flex h-full w-full min-h-0 gap-4 overflow-hidden', className)}
+    >
+      <div className="flex h-full 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('common.md_editor.editor_source')}
+          </h3>
+        </div>
+        <div className="min-h-0 flex-1 overflow-hidden">
+          <textarea
+            ref={sourceRef}
+            className="h-full w-full min-h-0 resize-none overflow-auto border-0 bg-transparent p-3 font-mono text-sm text-gray-900 outline-none dark:text-gray-100"
+            placeholder={t('common.md_editor.raw_text_placeholder')}
+            value={value ?? ''}
+            disabled={disabled}
+            onChange={(e) => onChange?.(e.target.value)}
+            onScroll={() => {
+              if (ignoreNextRef.current.source) {
+                ignoreNextRef.current.source = false
+                return
+              }
+              if (activeRef.current === 0 || activeRef.current === 1) syncScroll(1)
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="flex h-full 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('common.md_editor.editor_preview')}
+          </h3>
+        </div>
+        <div
+          ref={previewRef}
+          className="prose prose-sm max-w-none min-h-0 flex-1 overflow-auto p-3 text-gray-900 dark:prose-invert dark:text-gray-100"
+          onScroll={() => {
+            if (ignoreNextRef.current.preview) {
+              ignoreNextRef.current.preview = false
+              return
+            }
+            if (activeRef.current === 0 || activeRef.current === 2) syncScroll(2)
+          }}
+        >
+          {(value ?? '').trim() ? (
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{value ?? ''}</ReactMarkdown>
+          ) : (
+            <span className="not-prose text-sm text-gray-400">
+              {t('common.md_editor.preview_empty')}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/common/modal/confirm-dialog.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import { AlertTriangle, X } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+
+import { CxButton, CxButtonCancel, CxButtonIcon } from '@cx-ui'
+
+/**
+ * 基于 `ui/ConfirmDialog` 的克隆：交互与 props 一致；底部与关闭使用 `CxButton`。
+ * `ui/ConfirmDialog.tsx` 保持不动作参考；需要本实现时在页面中改 import 指向本文件即可。
+ */
+interface ConfirmDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+  title: string
+  message: string
+  /** 遮罩层额外 class（如嵌套在 antd Modal 内时用 `z-[2000]` 盖住主弹窗） */
+  overlayClassName?: string
+  confirmText?: string
+  cancelText?: string
+  /** 为 true 时隐藏取消按钮（结果提示场景只需要一个按钮） */
+  hideCancel?: boolean
+  /** 为 true 时交换主/次按钮顺序 */
+  swapButtons?: boolean
+  danger?: boolean
+}
+
+const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  overlayClassName,
+  confirmText,
+  cancelText,
+  hideCancel = false,
+  swapButtons = false,
+  danger = false,
+}) => {
+  const { t } = useTranslation()
+
+  if (!isOpen) return null
+
+  const overlayClass = ['fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50', overlayClassName]
+    .filter(Boolean)
+    .join(' ')
+
+  const confirmButton = danger ? (
+    <CxButton color="danger" variant="solid" onClick={onConfirm}>
+      {confirmText || t('common.confirm')}
+    </CxButton>
+  ) : (
+    <CxButton type="primary" onClick={onConfirm}>
+      {confirmText || t('common.confirm')}
+    </CxButton>
+  )
+
+  const cancelButton = hideCancel ? null : (
+    <CxButtonCancel onClick={onClose}>
+      {cancelText || t('common.cancel')}
+    </CxButtonCancel>
+  )
+
+  return (
+    <div className={overlayClass}>
+      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full">
+        <div className="p-6">
+          <div className="flex items-start gap-4">
+            {danger && (
+              <div className="flex-shrink-0 w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
+                <AlertTriangle
+                  size={20}
+                  className="text-red-600 dark:text-red-400"
+                />
+              </div>
+            )}
+            <div className="flex-1 min-w-0">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                {title}
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-line max-h-[45vh] overflow-auto pr-1">
+                {message}
+              </p>
+            </div>
+            <CxButtonIcon
+              type="default"
+              icon={<X size={20} />}
+              onClick={onClose}
+              title={t('common.close')}
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+            />
+          </div>
+        </div>
+        <div className="px-6 py-4 bg-gray-50 dark:bg-gray-700/50 rounded-b-xl flex justify-end gap-3">
+          {swapButtons ? (
+            <>
+              {confirmButton}
+              {cancelButton}
+            </>
+          ) : (
+            <>
+              {cancelButton}
+              {confirmButton}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ConfirmDialog