cx-chat 0.0.1

package/src/components/common/pagination.tsx

@@ -0,0 +1,472 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import CxSelect from '@/components/cx-ui/select';
+
+interface PaginationProps {
+    /** Current page (0-indexed by default, see zeroIndexed prop) */
+    page: number;
+    /** Total number of items */
+    total: number;
+    /** Items per page */
+    pageSize: number;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Available page size options */
+    pageSizeOptions?: number[];
+    /** Callback when page size changes */
+    onPageSizeChange?: (size: number) => void;
+    /** Whether to show stats ("Showing X-Y of Z") */
+    showStats?: boolean;
+    /** Whether to show page size selector */
+    showSizeChanger?: boolean;
+    /** Whether to show first/last page buttons */
+    showFirstLast?: boolean;
+    /** Maximum number of page buttons to show (default: 7) */
+    maxPageButtons?: number;
+    /** Layout variant */
+    variant?: 'spread' | 'compact' | 'simple' | 'slice';
+    /** Button size */
+    size?: 'sm' | 'md';
+    /** Whether page is 0-indexed (default: true) */
+    zeroIndexed?: boolean;
+    /** Translation key prefix */
+    translationPrefix?: string;
+    /** Whether pagination is disabled */
+    disabled?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** For simple variant without total - whether there are more views */
+    hasMore?: boolean;
+    /** slice variant: whether current page is first */
+    isFirst?: boolean;
+    /** slice variant: whether current page is last */
+    isLast?: boolean;
+}
+
+/**
+ * 增强版分页组件（与 ui/Pagination 行为一致，供 table-view 等使用）
+ * Enhanced Pagination Component with page numbers, ellipsis, and page size selector.
+ */
+const Pagination: React.FC<PaginationProps> = ({
+    page,
+    total = 0,
+    pageSize,
+    onPageChange,
+    pageSizeOptions = [10, 20, 50, 100],
+    onPageSizeChange,
+    showStats = true,
+    showSizeChanger = false,
+    showFirstLast = true,
+    maxPageButtons = 7,
+    variant = 'spread',
+    size = 'md',
+    zeroIndexed = true,
+    translationPrefix = 'common.pagination',
+    disabled = false,
+    className,
+    hasMore = false,
+    isFirst,
+    isLast,
+}) => {
+    const { t } = useTranslation();
+    const [navLock, setNavLock] = React.useState(false)
+
+    const resolvedPageSizeNum = (() => {
+        const n = Number(pageSize);
+        return Number.isFinite(n) && n > 0 ? n : pageSizeOptions[0];
+    })();
+
+    // Normalize to 0-indexed internally
+    const currentPage = zeroIndexed ? page : page - 1;
+    const totalPages = Math.max(1, Math.ceil(total / resolvedPageSizeNum));
+
+    // Calculate displayed range
+    const startItem = total > 0 ? currentPage * resolvedPageSizeNum + 1 : 0;
+    const endItem = Math.min((currentPage + 1) * resolvedPageSizeNum, total);
+
+    // Navigation handlers
+    const goToPage = (targetPage: number) => {
+        if (disabled || navLock) return;
+        // slice 模式后端不返回 total，不能用 totalPages 去 clamp，否则“下一页”会永远被限制在第 1 页
+        const normalizedTarget =
+          variant === 'slice'
+            ? Math.max(0, targetPage)
+            : Math.max(0, Math.min(totalPages - 1, targetPage));
+        setNavLock(true)
+        onPageChange(zeroIndexed ? normalizedTarget : normalizedTarget + 1);
+    };
+
+    const handleFirst = () => goToPage(0);
+    const handleLast = () => goToPage(totalPages - 1);
+    const handlePrev = () => {
+        if (variant === 'slice') {
+            if (disabled || navLock) return
+            if (!isFirst) {
+              setNavLock(true)
+              onPageChange(zeroIndexed ? Math.max(0, currentPage - 1) : currentPage);
+            }
+        } else {
+            goToPage(currentPage - 1);
+        }
+    };
+    const handleNext = () => {
+        if (variant === 'simple') {
+            if (hasMore) onPageChange(zeroIndexed ? currentPage + 1 : currentPage + 2);
+        } else if (variant === 'slice') {
+            if (disabled || navLock) return
+            if (!isLast) {
+              setNavLock(true)
+              onPageChange(zeroIndexed ? currentPage + 1 : currentPage + 2);
+            }
+        } else {
+            goToPage(currentPage + 1);
+        }
+    };
+
+    React.useEffect(() => {
+      setNavLock(false)
+    }, [page, pageSize, disabled, variant])
+
+    const isPrevDisabled =
+      disabled ||
+      (variant === 'slice'
+        ? !!isFirst
+        : currentPage === 0);
+    const isNextDisabled =
+      disabled ||
+      (variant === 'slice'
+        ? !!isLast
+        : (variant === 'simple' ? !hasMore : currentPage >= totalPages - 1));
+
+    // Generate page numbers with ellipsis
+    const generatePageNumbers = (): (number | 'ellipsis-start' | 'ellipsis-end')[] => {
+        if (totalPages <= maxPageButtons) {
+            return Array.from({ length: totalPages }, (_, i) => i);
+        }
+
+        const pages: (number | 'ellipsis-start' | 'ellipsis-end')[] = [];
+        const sideButtons = Math.floor((maxPageButtons - 3) / 2); // buttons on each side of current
+
+        // Always show first page
+        pages.push(0);
+
+        // Calculate range around current page
+        let rangeStart = Math.max(1, currentPage - sideButtons);
+        let rangeEnd = Math.min(totalPages - 2, currentPage + sideButtons);
+
+        // Adjust range if near edges
+        if (currentPage <= sideButtons + 1) {
+            rangeEnd = Math.min(totalPages - 2, maxPageButtons - 3);
+        } else if (currentPage >= totalPages - sideButtons - 2) {
+            rangeStart = Math.max(1, totalPages - maxPageButtons + 2);
+        }
+
+        // Add start ellipsis
+        if (rangeStart > 1) {
+            pages.push('ellipsis-start');
+        }
+
+        // Add middle views
+        for (let i = rangeStart; i <= rangeEnd; i++) {
+            pages.push(i);
+        }
+
+        // Add end ellipsis
+        if (rangeEnd < totalPages - 2) {
+            pages.push('ellipsis-end');
+        }
+
+        // Always show last page
+        if (totalPages > 1) {
+            pages.push(totalPages - 1);
+        }
+
+        return pages;
+    };
+
+    // Styles
+    const sizeClasses = {
+        sm: 'h-7 min-w-[28px] text-xs',
+        md: 'h-8 min-w-[32px] text-sm'
+    };
+
+    const buttonBase = clsx(
+        "inline-flex items-center justify-center rounded border transition-all",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        sizeClasses[size]
+    );
+
+    const navButton = clsx(
+        buttonBase,
+        "px-2 border-gray-300 dark:border-gray-600",
+        "text-gray-700 dark:text-gray-300",
+        "hover:bg-gray-50 dark:hover:bg-gray-700",
+        "active:scale-95 active:bg-gray-100 dark:active:bg-gray-600"
+    );
+
+    const pageButton = (isActive: boolean) => clsx(
+        buttonBase,
+        "px-2.5",
+        isActive
+            ? "bg-blue-600 border-blue-600 text-white hover:bg-blue-700"
+            : clsx(
+                "border-gray-300 dark:border-gray-600",
+                "text-gray-700 dark:text-gray-300",
+                "hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-blue-300 dark:hover:border-blue-500",
+                "active:scale-95"
+            )
+    );
+
+    const ellipsisClass = clsx(
+        "inline-flex items-center justify-center px-1 text-gray-400 dark:text-gray-500",
+        sizeClasses[size]
+    );
+
+    // Simple variant (for FeedbackPage style - no total)
+    if (variant === 'simple') {
+        return (
+            <div className={clsx("flex justify-between items-center pt-8", className)}>
+                <button
+                    onClick={handlePrev}
+                    disabled={isPrevDisabled}
+                    className={clsx(navButton, "px-4 py-2 rounded-lg")}
+                >
+                    {t(`${translationPrefix}.previous`, { defaultValue: 'Previous' })}
+                </button>
+                <span className="text-sm text-gray-500 dark:text-gray-400">
+                    {t(`${translationPrefix}.page`, { page: currentPage + 1, defaultValue: `Page ${currentPage + 1}` })}
+                </span>
+                <button
+                    onClick={handleNext}
+                    disabled={isNextDisabled}
+                    className={clsx(navButton, "px-4 py-2 rounded-lg")}
+                >
+                    {t(`${translationPrefix}.next`, { defaultValue: 'Next' })}
+                </button>
+            </div>
+        );
+    }
+
+    // Slice variant（后端切片：首页/上一页/下一页 + 每页条数，同一行靠右）
+    if (variant === 'slice') {
+        return (
+            <div
+                className={clsx(
+                    'flex flex-wrap items-center justify-end gap-2',
+                    className,
+                )}>
+                <button
+                    onClick={handleFirst}
+                    disabled={isPrevDisabled}
+                    className={navButton}
+                    title={t(`${translationPrefix}.first`, { defaultValue: 'First' })}
+                >
+                    <ChevronsLeft size={size === 'sm' ? 14 : 16} />
+                </button>
+                <button
+                    onClick={handlePrev}
+                    disabled={isPrevDisabled}
+                    className={navButton}
+                    title={t(`${translationPrefix}.previous`, { defaultValue: 'Previous' })}
+                >
+                    <ChevronLeft size={size === 'sm' ? 14 : 16} />
+                </button>
+                <span className="px-2 text-sm text-gray-500 dark:text-gray-400">
+                    {t(`${translationPrefix}.page`, {
+                        page: currentPage + 1,
+                        defaultValue: `Page ${currentPage + 1}`,
+                    })}
+                </span>
+                <button
+                    onClick={handleNext}
+                    disabled={isNextDisabled}
+                    className={navButton}
+                    title={t(`${translationPrefix}.next`, { defaultValue: 'Next' })}
+                >
+                    <ChevronRight size={size === 'sm' ? 14 : 16} />
+                </button>
+                {showSizeChanger && onPageSizeChange ? (
+                    <CxSelect.Medium
+                        size="small"
+                        value={String(resolvedPageSizeNum)}
+                        onChange={(val) => {
+                            const n = Number(val);
+                            if (!Number.isFinite(n)) return;
+                            onPageSizeChange(n);
+                        }}
+                        disabled={disabled}
+                        options={pageSizeOptions.map((opt) => ({
+                            label: `${opt} ${t(`${translationPrefix}.per_page`, { defaultValue: '/ page' })}`,
+                            value: String(opt),
+                        }))}
+                        style={{ width: 120 }}
+                        getPopupContainer={() => document.body}
+                    />
+                ) : null}
+            </div>
+        );
+    }
+
+    // Compact variant (centered, no stats)
+    if (variant === 'compact') {
+        const pageNumbers = generatePageNumbers();
+        return (
+            <div className={clsx("flex justify-center items-center gap-1", className)}>
+                {showFirstLast && (
+                    <button onClick={handleFirst} disabled={isPrevDisabled} className={navButton} title={t(`${translationPrefix}.first`, { defaultValue: 'First' })}>
+                        <ChevronsLeft size={size === 'sm' ? 14 : 16} />
+                    </button>
+                )}
+                <button onClick={handlePrev} disabled={isPrevDisabled} className={navButton}>
+                    <ChevronLeft size={size === 'sm' ? 14 : 16} />
+                </button>
+
+                {pageNumbers.map((p, idx) =>
+                    typeof p === 'number' ? (
+                        <button
+                            key={p}
+                            onClick={() => goToPage(p)}
+                            disabled={disabled}
+                            className={pageButton(p === currentPage)}
+                        >
+                            {p + 1}
+                        </button>
+                    ) : (
+                        <span key={`${p}-${idx}`} className={ellipsisClass}>...</span>
+                    )
+                )}
+
+                <button onClick={handleNext} disabled={isNextDisabled} className={navButton}>
+                    <ChevronRight size={size === 'sm' ? 14 : 16} />
+                </button>
+                {showFirstLast && (
+                    <button onClick={handleLast} disabled={isNextDisabled} className={navButton} title={t(`${translationPrefix}.last`, { defaultValue: 'Last' })}>
+                        <ChevronsRight size={size === 'sm' ? 14 : 16} />
+                    </button>
+                )}
+            </div>
+        );
+    }
+
+    // Default: spread variant (full featured)
+    const pageNumbers = generatePageNumbers();
+
+    return (
+        <div className={clsx(
+            "flex flex-wrap items-center justify-between gap-4",
+            className
+        )}>
+            {/* Left: Stats */}
+            <div className="flex items-center gap-4">
+                {showStats && (
+                    <span className="text-sm text-gray-500 dark:text-gray-400">
+                        {t(`${translationPrefix}.showing`, {
+                            start: startItem,
+                            end: endItem,
+                            total: total,
+                            defaultValue: `Showing ${startItem}-${endItem} of ${total}`
+                        })}
+                    </span>
+                )}
+
+                {/* Page Size Selector */}
+                {showSizeChanger && onPageSizeChange && (
+                    <div className="flex items-center gap-2">
+                        <CxSelect.Medium
+                            size="small"
+                            /** antd Select 受控值与 options.value 类型须一致；统一用 string 避免 number/string 混用不触发变更 */
+                            value={String(resolvedPageSizeNum)}
+                            onChange={(val) => {
+                                const n = Number(val);
+                                if (!Number.isFinite(n)) return;
+                                onPageSizeChange(n);
+                                /**
+                                 * 勿在此处再调 goToPage(0)。
+                                 * 父级若在 onPageChange 里写 handleTableChange({ current, pageSize: paginationData.pageSize })，
+                                 * 会与本次 setState 同 tick 触发，闭包里的 pageSize 仍是旧值，会把刚改的条数覆盖回去。
+                                 * 需要回到第一页时：在 onPageSizeChange 里与条数一并处理，或交给 table-view 的 handleTableChange（已按条数变化重置 page）。
+                                 */
+                            }}
+                            disabled={disabled}
+                            options={pageSizeOptions.map((opt) => ({
+                                label: `${opt} ${t(`${translationPrefix}.per_page`, { defaultValue: '/ page' })}`,
+                                value: String(opt),
+                            }))}
+                            style={{ width: 120 }}
+                            getPopupContainer={() => document.body}
+                        />
+                    </div>
+                )}
+            </div>
+
+            {/* Right: Page Navigation */}
+            <div className="flex items-center gap-1">
+                {/* First */}
+                {showFirstLast && (
+                    <button
+                        onClick={handleFirst}
+                        disabled={isPrevDisabled}
+                        className={navButton}
+                        title={t(`${translationPrefix}.first`, { defaultValue: 'First page' })}
+                    >
+                        <ChevronsLeft size={size === 'sm' ? 14 : 16} />
+                    </button>
+                )}
+
+                {/* Previous */}
+                <button
+                    onClick={handlePrev}
+                    disabled={isPrevDisabled}
+                    className={navButton}
+                    title={t(`${translationPrefix}.previous`, { defaultValue: 'Previous' })}
+                >
+                    <ChevronLeft size={size === 'sm' ? 14 : 16} />
+                </button>
+
+                {/* Page Numbers */}
+                <div className="flex items-center gap-1 mx-1">
+                    {pageNumbers.map((p, idx) =>
+                        typeof p === 'number' ? (
+                            <button
+                                key={p}
+                                onClick={() => goToPage(p)}
+                                disabled={disabled}
+                                className={pageButton(p === currentPage)}
+                            >
+                                {p + 1}
+                            </button>
+                        ) : (
+                            <span key={`${p}-${idx}`} className={ellipsisClass}>...</span>
+                        )
+                    )}
+                </div>
+
+                {/* Next */}
+                <button
+                    onClick={handleNext}
+                    disabled={isNextDisabled}
+                    className={navButton}
+                    title={t(`${translationPrefix}.next`, { defaultValue: 'Next' })}
+                >
+                    <ChevronRight size={size === 'sm' ? 14 : 16} />
+                </button>
+
+                {/* Last */}
+                {showFirstLast && (
+                    <button
+                        onClick={handleLast}
+                        disabled={isNextDisabled}
+                        className={navButton}
+                        title={t(`${translationPrefix}.last`, { defaultValue: 'Last page' })}
+                    >
+                        <ChevronsRight size={size === 'sm' ? 14 : 16} />
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Pagination;

package/src/components/common/path.tsx

@@ -0,0 +1,175 @@
+import { CxTag } from '@cx-ui'
+import clsx from 'clsx'
+import { Copy } from 'lucide-react'
+import { Fragment, memo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useCopyToClipboard } from '@/hooks/useCopyToClipboard'
+
+/**
+ * 接口路径按 `/` 分段，每段一个 CxTag，颜色按层级循环；前导 `/` 单独展示。
+ * 默认不用 `pill`，与列表「状态」等胶囊 Tag 区分。
+ * 左侧复制按钮复制完整路径（自动补全前导 `/`）。
+ */
+
+const SEGMENT_COLORS = [
+  '#2563eb',
+  '#0d9488',
+  '#16a34a',
+  '#ca8a04',
+  '#9333ea',
+  '#dc2626',
+]
+
+export type PathTagsProps = {
+  path?: string | null
+  /** 无有效分段时展示 */
+  emptyText?: string
+  className?: string
+  /** 是否使用胶囊 Tag；不传时 `whole` 默认 true，`segment` 默认 false */
+  pill?: boolean
+  /** 是否紧凑模式：`segment` 默认 true；`whole` 默认 false */
+  compact?: boolean
+  /** `renderMode="whole"` 时的 Tag 颜色（如与 httpMethod 同色） */
+  color?: string
+  /**
+   * 渲染模式：
+   * - whole（默认）：整条路径一个 Tag
+   * - segment：按 `/` 分段多个 Tag（历史效果）
+   */
+  renderMode?: string
+  /**
+   * `renderMode="segment"` 时的颜色模式：
+   * - same：所有分段同色（直接用 CxTag 默认样式，便于后续统一调整/一键切回）
+   * - segment：按层级循环配色（历史效果）
+   */
+  colorMode?: string
+}
+
+/** 用于展示与复制：无内容返回空串；否则保证以 `/` 开头 */
+function normalizePathForCopy(raw: string): string {
+  const s = String(raw).trim()
+  if (!s) return ''
+  return s.startsWith('/') ? s : `/${s}`
+}
+
+function splitSegments(normalized: string): string[] {
+  if (!normalized) return []
+  return normalized.split('/').filter((p) => p.length > 0)
+}
+
+function PathTagsInner({
+  path,
+  emptyText = '-',
+  className,
+  color,
+  renderMode = 'whole',
+  colorMode = 'same',
+  pill,
+  compact,
+}: PathTagsProps) {
+  const { t } = useTranslation()
+  const [showCopy, setShowCopy] = useState(false)
+  const { copy } = useCopyToClipboard()
+
+  const compactResolved = compact ?? (renderMode === 'segment')
+  const pillResolved = pill ?? (renderMode === 'whole')
+
+  // 用于显示的标准化路径（保证以 / 开头）
+  const fullPath =
+    path != null && String(path).trim() !== ''
+      ? normalizePathForCopy(String(path))
+      : ''
+  
+  // 用于复制的原始路径（只 trim，不添加前导 /）
+  const rawPathForCopy =
+    path != null && String(path).trim() !== ''
+      ? String(path).trim()
+      : ''
+  
+  const segments = fullPath ? splitSegments(fullPath) : []
+
+  if (!fullPath || segments.length === 0) {
+    return (
+      <span className="text-gray-500 dark:text-gray-400">{emptyText}</span>
+    )
+  }
+
+  return (
+    <div
+      className={clsx(
+        'inline-flex max-w-full flex-wrap items-center gap-x-1 gap-y-1',
+        compactResolved ? 'gap-x-0.5' : 'gap-x-1',
+        className,
+      )}
+      onMouseEnter={() => setShowCopy(true)}
+      onMouseLeave={() => setShowCopy(false)}>
+      <div className="inline-flex min-w-0 flex-wrap items-center gap-y-1">
+        {renderMode === 'segment' ? (
+          <>
+            <span
+              className={clsx(
+                'select-none self-center text-gray-400 dark:text-gray-500',
+                compactResolved ? 'mx-0' : 'mx-0.5',
+              )}
+              aria-hidden>
+              /
+            </span>
+            {segments.map((seg, i) => (
+              <Fragment key={`${i}-${seg}`}>
+                {i > 0 ? (
+                  <span
+                    className={clsx(
+                      'select-none self-center text-gray-400 dark:text-gray-500',
+                      compactResolved ? 'mx-0' : 'mx-0.5',
+                    )}
+                    aria-hidden>
+                    /
+                  </span>
+                ) : null}
+                <CxTag
+                  color={
+                    colorMode === 'segment'
+                      ? SEGMENT_COLORS[i % SEGMENT_COLORS.length]
+                      : undefined
+                  }
+                  pill={pillResolved}
+                  className={compactResolved ? 'px-1 py-0 text-xs' : undefined}>
+                  {seg}
+                </CxTag>
+              </Fragment>
+            ))}
+          </>
+        ) : (
+          <CxTag
+            color={color}
+            pill={pillResolved}
+            className={compactResolved ? 'px-1 py-0 text-xs' : undefined}
+          >
+            {fullPath}
+          </CxTag>
+        )}
+      </div>
+      <button
+        type="button"
+        className={clsx(
+          'inline-flex rounded p-0.5 text-gray-500 transition-all',
+          'hover:bg-gray-100 hover:text-blue-600',
+          'dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-blue-400',
+          compactResolved ? 'ml-0.5' : 'ml-1',
+          !showCopy && 'opacity-0 pointer-events-none',
+        )}
+        title={t('common.copy_path')}
+        aria-label={t('common.copy_path')}
+        onClick={(e) => {
+          e.stopPropagation()
+          void copy(rawPathForCopy)
+        }}>
+        <Copy size={14} strokeWidth={2} aria-hidden />
+      </button>
+    </div>
+  )
+}
+
+PathTagsInner.displayName = 'PathTags'
+
+export const PathTags = memo(PathTagsInner)

package/src/components/common/system-logo-mark.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import clsx from 'clsx'
+import { useSystemConfig } from '@/config/system'
+
+type SystemLogoMarkProps = {
+  className?: string
+  /** 没有系统 Logo 时的占位形态：square=方形，circle=圆形 */
+  fallbackShape?: 'circle' | 'square'
+}
+
+/** 系统 Logo 标识：统一登录/注册/会话首页的品牌展示（有配置用配置）。 */
+export function SystemLogoMark({
+  className,
+  fallbackShape = 'square',
+}: SystemLogoMarkProps) {
+  const { systemLogo, systemName } = useSystemConfig()
+  const shapeCls =
+    fallbackShape === 'circle' ? 'rounded-full' : 'rounded-xl'
+
+  if (systemLogo) {
+    return (
+      <img
+        src={systemLogo}
+        alt={systemName}
+        className={clsx(shapeCls, 'object-cover', className)}
+        onError={(e) => {
+          e.currentTarget.style.display = 'none'
+        }}
+      />
+    )
+  }
+
+  return (
+    <div
+      className={clsx(
+        shapeCls,
+        'bg-gradient-to-tr from-blue-600 to-purple-600 flex items-center justify-center shadow-lg shadow-blue-500/20',
+        className,
+      )}
+      aria-hidden
+    >
+      <span className="text-white font-bold">
+        {(systemName || 'A').substring(0, 2).toUpperCase()}
+      </span>
+    </div>
+  )
+}
+