cx-chat 0.0.1

package/src/contexts/MenuContext.tsx

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useState, useEffect } from 'react'
+import { getUserMenuListAPI } from '@api/common/auth'
+import type { MenuTreeItem } from '@/types/menu'
+import { syncMenuTreeToI18n } from '@utils/menuI18n'
+import { useAuth } from './AuthContext'
+
+interface MenuContextType {
+  menus: MenuTreeItem[]
+  isLoading: boolean
+  error: Error | null
+  refreshMenus: () => Promise<void>
+}
+
+const MenuContext = createContext<MenuContextType | undefined>(undefined)
+
+export const MenuProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [menus, setMenus] = useState<MenuTreeItem[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+  const { isAuthenticated } = useAuth()
+
+  const fetchMenus = async () => {
+    try {
+      setIsLoading(true)
+      setError(null)
+      const result = await getUserMenuListAPI({})
+      const menuData = result.success && result.data ? result.data : []
+      const roots = Array.isArray(menuData) ? menuData : []
+      syncMenuTreeToI18n(roots)
+      setMenus(roots)
+    } catch (err) {
+      console.error('获取菜单失败:', err)
+      setError(err instanceof Error ? err : new Error('未知错误'))
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      setMenus([])
+      setIsLoading(false)
+      return
+    }
+    fetchMenus()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 登录态变化时重新拉取菜单
+  }, [isAuthenticated])
+
+  return (
+    <MenuContext.Provider value={{ menus, isLoading, error, refreshMenus: fetchMenus }}>
+      {children}
+    </MenuContext.Provider>
+  )
+}
+
+export const useMenu = () => {
+  const context = useContext(MenuContext)
+  if (!context) {
+    throw new Error('useMenu 必须在 MenuProvider 内使用')
+  }
+  return context
+}

package/src/contexts/ToastContext.tsx

@@ -0,0 +1,181 @@
+import React, {
+    createContext,
+    useContext,
+    useState,
+    useCallback,
+    useEffect,
+    useRef,
+} from 'react';
+import { bindGlobalToast } from '@/utils/toastBridge';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+import clsx from 'clsx';
+
+export type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+export interface Toast {
+    id: string;
+    type: ToastType;
+    message: string;
+    duration?: number;
+}
+
+interface ToastContextType {
+    showToast: (message: string, type: ToastType, duration?: number) => void;
+    removeToast: (id: string) => void;
+    /** 清空当前所有 Toast（如登录/注册跳转前关闭提示） */
+    clearToasts: () => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const useToast = () => {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast 必须在 ToastProvider 内使用');
+    }
+    return context;
+};
+
+interface ToastProviderProps {
+    children: React.ReactNode;
+}
+
+export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+    const [toasts, setToasts] = useState<Toast[]>([]);
+
+    const removeToast = useCallback((id: string) => {
+        setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    }, []);
+
+    const clearToasts = useCallback(() => {
+        setToasts([]);
+    }, []);
+
+    const showToast = useCallback((message: string, type: ToastType, duration?: number) => {
+        const id = Math.random().toString(36).substring(2, 9);
+        const autoCloseDuration = duration || (type === 'error' ? 10000 : 3000); // 错误 10 秒，其他 3 秒
+
+        // 每次只保留最新一条，避免堆叠多个 Toast
+        setToasts([{ id, type, message, duration: autoCloseDuration }]);
+    }, []);
+
+    useEffect(() => {
+        bindGlobalToast(showToast);
+        return () => {
+            bindGlobalToast(null);
+        };
+    }, [showToast]);
+
+    return (
+        <ToastContext.Provider value={{ showToast, removeToast, clearToasts }}>
+            {children}
+            <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-2 max-w-md w-full pointer-events-none">
+                {toasts.map((toast) => (
+                    <ToastItem key={toast.id} toast={toast} onDismiss={removeToast} />
+                ))}
+            </div>
+        </ToastContext.Provider>
+    );
+};
+
+const ToastItem: React.FC<{ toast: Toast; onDismiss: (id: string) => void }> = ({ toast, onDismiss }) => {
+    const iconMap = {
+        success: <CheckCircle size={20} className="text-green-500" />,
+        error: <AlertCircle size={20} className="text-red-500" />,
+        info: <Info size={20} className="text-blue-500" />,
+        warning: <AlertTriangle size={20} className="text-yellow-500" />,
+    };
+
+    const bgMap = {
+        success: 'bg-white border-green-100 dark:bg-gray-800 dark:border-green-900',
+        error: 'bg-white border-red-100 dark:bg-gray-800 dark:border-red-900',
+        info: 'bg-white border-blue-100 dark:bg-gray-800 dark:border-blue-900',
+        warning: 'bg-white border-yellow-100 dark:bg-gray-800 dark:border-yellow-900',
+    };
+
+    const progressColorMap = {
+        success: 'bg-green-500',
+        error: 'bg-red-500',
+        info: 'bg-blue-500',
+        warning: 'bg-yellow-500',
+    };
+
+    const durationMs =
+        toast.duration != null && toast.duration > 0 ? toast.duration : 0;
+
+    const [progressPct, setProgressPct] = useState(0);
+    const startTimeRef = useRef(Date.now());
+    const pausedRef = useRef(false);
+    const frozenElapsedRef = useRef(0);
+    const rafRef = useRef<number>(0);
+    const tickRef = useRef<() => void>(() => {});
+
+    useEffect(() => {
+        if (!durationMs) return;
+
+        const tick = () => {
+            if (pausedRef.current) {
+                return;
+            }
+            const elapsed = Date.now() - startTimeRef.current;
+            const pct = Math.min(100, (elapsed / durationMs) * 100);
+            setProgressPct(pct);
+            if (elapsed >= durationMs) {
+                onDismiss(toast.id);
+                return;
+            }
+            rafRef.current = requestAnimationFrame(tick);
+        };
+
+        tickRef.current = tick;
+        rafRef.current = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(rafRef.current);
+    }, [durationMs, toast.id, onDismiss]);
+
+    const handlePointerEnter = () => {
+        if (!durationMs) return;
+        pausedRef.current = true;
+        frozenElapsedRef.current = Date.now() - startTimeRef.current;
+        cancelAnimationFrame(rafRef.current);
+    };
+
+    const handlePointerLeave = () => {
+        if (!durationMs) return;
+        startTimeRef.current = Date.now() - frozenElapsedRef.current;
+        pausedRef.current = false;
+        rafRef.current = requestAnimationFrame(tickRef.current);
+    };
+
+    return (
+        <div
+            className={clsx(
+                "pointer-events-auto relative overflow-hidden flex items-start gap-3 p-4 rounded-lg shadow-lg border transition-all duration-300 animate-in slide-in-from-right-full",
+                bgMap[toast.type]
+            )}
+            role="alert"
+            onPointerEnter={handlePointerEnter}
+            onPointerLeave={handlePointerLeave}
+        >
+            <div className="shrink-0 mt-0.5">{iconMap[toast.type]}</div>
+            <div className="flex-1 text-sm font-medium text-gray-900 dark:text-gray-100 break-words z-10">
+                {toast.message}
+            </div>
+            <button
+                onClick={() => onDismiss(toast.id)}
+                className="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors z-10"
+            >
+                <X size={18} />
+            </button>
+
+            {/* 进度条（与自动关闭同源计时；悬停时暂停） */}
+            {durationMs > 0 && (
+                <div
+                    className={clsx("absolute bottom-0 left-0 h-0.5 opacity-50", progressColorMap[toast.type])}
+                    style={{ width: `${progressPct}%` }}
+                />
+            )}
+        </div>
+    );
+};
+
+export default ToastProvider;

package/src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,47 @@
+import { useCallback, useState } from 'react'
+import { useToast } from '@/contexts/ToastContext'
+import { copyToClipboard } from '@/utils'
+import i18n from '@/i18n'
+
+/**
+ * 复制文本到剪贴板并显示 Toast 提示
+ * @param successMessage 成功提示文案（i18n key）
+ * @param errorMessage 失败提示文案（i18n key）
+ */
+export function useCopyToClipboard(
+  successMessage = 'common.copy_success',
+  errorMessage = 'common.copy_failed',
+) {
+  const { showToast } = useToast()
+  const [isCopying, setIsCopying] = useState(false)
+
+  const handleCopy = useCallback(
+    async (text: string) => {
+      if (!text) return false
+
+      setIsCopying(true)
+      try {
+        const success = await copyToClipboard(text)
+        if (success) {
+          showToast(i18n.t(successMessage), 'success')
+          return true
+        } else {
+          showToast(i18n.t(errorMessage), 'error')
+          return false
+        }
+      } catch (err) {
+        console.error('Copy failed:', err)
+        showToast(i18n.t(errorMessage), 'error')
+        return false
+      } finally {
+        setIsCopying(false)
+      }
+    },
+    [showToast, successMessage, errorMessage],
+  )
+
+  return {
+    copy: handleCopy,
+    isCopying,
+  }
+}

package/src/hooks/useModalSubmit.ts

@@ -0,0 +1,104 @@
+import { useToast } from '@/contexts/ToastContext'
+import { useState } from 'react'
+
+type SubmitMode = string
+
+type SubmitApiMap<TPayload, TResult = unknown> = {
+  add: (payload: TPayload) => Promise<TResult>
+  edit: (payload: TPayload) => Promise<TResult>
+}
+
+/** 未传 successMessage 时按 opeType 提示；其余为「操作成功」 */
+function defaultSuccessToastByOpeType(opeType: SubmitMode): string {
+  const key = String(opeType ?? '')
+    .trim()
+    .toLowerCase()
+  if (key === 'enable') return '操作成功，已启用'
+  if (key === 'disable') return '操作成功，已禁用'
+  if (key === 'approve' || key === 'pass' || key === 'approved') return '操作成功，已通过'
+  if (key === 'reject' || key === 'rejected' || key === 'refuse') return '操作成功，已拒绝'
+  if (key === 'delete') return '操作成功，已删除'
+  return '操作成功'
+}
+
+function resolveSuccessToastText(
+  mode: SubmitMode,
+  successMessage: { add?: string; edit?: string } | undefined,
+): string {
+  const fromOption = mode === 'edit' ? successMessage?.edit : successMessage?.add
+  if (typeof fromOption === 'string' && fromOption.trim()) return fromOption.trim()
+  return defaultSuccessToastByOpeType(mode)
+}
+
+type UseModalSubmitOptions<TFormValues, TPayload, TResult = unknown> = {
+  opeType: SubmitMode
+  validate: () => Promise<TFormValues>
+  addAPI?: SubmitApiMap<TPayload, TResult>['add']
+  editAPI?: SubmitApiMap<TPayload, TResult>['edit']
+  transform?: (values: TFormValues) => TPayload
+  successMessage?: {
+    add?: string
+    edit?: string
+  }
+  onSuccess?: (ctx: {
+    values: TFormValues
+    payload: TPayload
+    result: TResult
+    opeType: SubmitMode
+  }) => void | Promise<void>
+}
+
+export function useModalSubmit<TFormValues = any, TPayload = any, TResult = unknown>() {
+  const [submitting, setSubmitting] = useState(false)
+  const { showToast } = useToast()
+
+  const handleSubmit = async (options: UseModalSubmitOptions<TFormValues, TPayload, TResult>) => {
+    const {
+      opeType,
+      validate,
+      addAPI,
+      editAPI,
+      transform,
+      successMessage,
+      onSuccess,
+    } = options
+
+    try {
+      const values = await validate()
+      setSubmitting(true)
+
+      const payload = transform ? transform(values) : (values as unknown as TPayload)
+      let result: TResult
+
+      if (opeType === 'edit') {
+        if (!editAPI) {
+          throw new Error('未配置编辑接口')
+        }
+        result = await editAPI(payload)
+      } else {
+        if (!addAPI) {
+          throw new Error('未配置新增接口')
+        }
+        result = await addAPI(payload)
+      }
+
+      const toastText = resolveSuccessToastText(opeType, successMessage)
+      showToast(toastText, 'success')
+
+      await onSuccess?.({ values, payload, result, opeType })
+      return { values, payload, result }
+    } catch (error: any) {
+      if (error?.errorFields) return null
+      showToast(error?.message || '操作失败', 'error')
+      return null
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return {
+    submitting,
+    handleSubmit,
+  }
+}
+

package/src/hooks/useRouter.ts

@@ -0,0 +1,240 @@
+/**
+ * 路由跳转 Hook
+ * 基于 menuRouteRegistry 实现智能路由跳转
+ */
+
+import {
+    getListPathByMenuCode,
+    getRegisteredMenuRouteEntries,
+} from '@/utils/menuRouteRegistry'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+/**
+ * 根据当前路径提取基础路径（去掉 /index、/detail/*、/submit/*）
+ */
+function extractBasePath(pathname: string): string {
+  return pathname.replace(/\/(index|detail|submit)(\/.*)?$/, '')
+}
+
+/**
+ * 路由跳转 Hook
+ * 
+ * @example
+ * ```tsx
+ * const router = useRouter()
+ * 
+ * // 跳转到列表页
+ * router.toIndex()
+ * router.toIndex({ menuCode: 'permission' })
+ * 
+ * // 跳转到新增页
+ * router.toAdd()
+ * router.toAdd({ state: { defaultType: 1 } })
+ * 
+ * // 跳转到编辑页
+ * router.toEdit({ state: { editId: 123 } })
+ * 
+ * // 跳转到详情页
+ * router.toDetail(123)
+ * router.toDetail(123, { state: { name: 'test' } })
+ * 
+ * // 按菜单 code 跳转
+ * router.toMenu('permission', { type: 'index' })
+ * router.toMenu('knowledge', { type: 'detail', id: 123 })
+ * ```
+ */
+export function useRouter() {
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const resolveSubmitBasePath = (options?: {
+    menuCode?: string
+    currentPath?: string
+  }): string | undefined => {
+    let basePath: string | undefined
+    const currentPath = options?.currentPath || location.pathname
+
+    if (options?.menuCode) {
+      const listPath = getListPathByMenuCode(options.menuCode)
+      if (listPath) {
+        basePath = extractBasePath(listPath)
+      }
+    }
+
+    if (!basePath) {
+      basePath = extractBasePath(currentPath)
+    }
+
+    return basePath
+  }
+
+  /**
+   * 跳转到列表页
+   */
+  const toIndex = (options?: {
+    /** 菜单 code，优先使用。不传则根据当前路径自动推断 */
+    menuCode?: string
+    /** 当前路径，用于自动推断。默认为当前页面路径 */
+    currentPath?: string
+    /** 额外的 state 参数 */
+    state?: any
+  }): void => {
+    let targetPath: string | undefined
+    const currentPath = options?.currentPath || location.pathname
+
+    // 优先使用 menuCode
+    if (options?.menuCode) {
+      targetPath = getListPathByMenuCode(options.menuCode)
+    }
+
+    // 其次根据当前路径推断
+    if (!targetPath) {
+      const basePath = extractBasePath(currentPath)
+      const entries = getRegisteredMenuRouteEntries()
+      const matched = entries.find((entry) => {
+        const entryBasePath = `/${entry.basePath.replace(/^\/+|\/+$/g, '')}`
+        return entryBasePath === basePath
+      })
+      if (matched) {
+        targetPath = matched.listPath
+      }
+    }
+
+    if (targetPath) {
+      navigate(targetPath, { state: options?.state })
+    }
+  }
+
+  /**
+   * 跳转到新增页
+   */
+  const toAdd = (options?: {
+    /** 菜单 code，优先使用。不传则根据当前路径自动推断 */
+    menuCode?: string
+    /** 当前路径，用于自动推断。默认为当前页面路径 */
+    currentPath?: string
+    /** 额外的 state 参数 */
+    state?: any
+  }): void => {
+    const basePath = resolveSubmitBasePath(options)
+
+    if (basePath) {
+      navigate(`${basePath}/submit`, { state: options?.state })
+    }
+  }
+
+  /**
+   * 跳转到编辑页（submit 路由，路径带 id，与 generateAdminRoutes 注册的 `submit/:id` 一致）
+   */
+  const toEdit = (options?: {
+    /** 菜单 code，优先使用。不传则根据当前路径自动推断 */
+    menuCode?: string
+    /** 当前路径，用于自动推断。默认为当前页面路径 */
+    currentPath?: string
+    /** 须含 `editId`，将写入 URL：`.../submit/:id` */
+    state?: any
+  }): void => {
+    const basePath = resolveSubmitBasePath(options)
+    if (!basePath) return
+
+    const editId = options?.state?.editId
+    const idStr = editId != null && String(editId).trim() !== '' ? String(editId) : ''
+
+    if (idStr) {
+      navigate(`${basePath}/submit/${encodeURIComponent(idStr)}`, {
+        state: options?.state,
+      })
+    } else {
+      navigate(`${basePath}/submit`, { state: options?.state })
+    }
+  }
+
+  /**
+   * 跳转到详情页
+   */
+  const toDetail = (
+    id: string | number,
+    options?: {
+      /** 菜单 code，优先使用。不传则根据当前路径自动推断 */
+      menuCode?: string
+      /** 当前路径，用于自动推断。默认为当前页面路径 */
+      currentPath?: string
+      /** 额外的 state 参数 */
+      state?: any
+    },
+  ): void => {
+    let basePath: string | undefined
+    const currentPath = options?.currentPath || location.pathname
+
+    // 优先使用 menuCode
+    if (options?.menuCode) {
+      const listPath = getListPathByMenuCode(options.menuCode)
+      if (listPath) {
+        basePath = extractBasePath(listPath)
+      }
+    }
+
+    // 其次根据当前路径推断
+    if (!basePath) {
+      basePath = extractBasePath(currentPath)
+    }
+
+    if (basePath) {
+      navigate(`${basePath}/detail/${encodeURIComponent(String(id))}`, {
+        state: options?.state,
+      })
+    }
+  }
+
+  /**
+   * 跳转到指定菜单 code 对应的页面
+   */
+  const toMenu = (
+    menuCode: string,
+    options?: {
+      /** 目标类型：index | add | detail */
+      type?: 'index' | 'add' | 'detail'
+      /** 详情 ID（type 为 detail 时需要） */
+      id?: string | number
+      /** 额外的 state 参数 */
+      state?: any
+    },
+  ): void => {
+    const listPath = getListPathByMenuCode(menuCode)
+    if (!listPath) {
+      console.warn(`未找到菜单 code "${menuCode}" 对应的路由`)
+      return
+    }
+
+    const basePath = extractBasePath(listPath)
+    const type = options?.type || 'index'
+
+    let targetPath: string
+    switch (type) {
+      case 'add':
+        targetPath = `${basePath}/submit`
+        break
+      case 'detail':
+        if (!options?.id) {
+          console.warn('跳转到详情页需要提供 id 参数')
+          return
+        }
+        targetPath = `${basePath}/detail/${encodeURIComponent(String(options.id))}`
+        break
+      case 'index':
+      default:
+        targetPath = listPath
+        break
+    }
+
+    navigate(targetPath, { state: options?.state })
+  }
+
+  return {
+    toIndex,
+    toAdd,
+    toEdit,
+    toDetail,
+    toMenu,
+  }
+}

package/src/hooks/useStepForm.ts

@@ -0,0 +1,46 @@
+import { useCallback, useState } from 'react'
+
+/**
+ * 分步表单通用Hook
+ * 管理步骤状态、连接测试状态等通用逻辑
+ */
+export function useStepForm() {
+  const [current, setCurrent] = useState(0)
+  const [connectionTested, setConnectionTested] = useState(false)
+  const [testingConnection, setTestingConnection] = useState(false)
+
+  /** 下一步 */
+  const next = useCallback(() => {
+    setCurrent((prev) => prev + 1)
+  }, [])
+
+  /** 上一步 */
+  const prev = useCallback(() => {
+    setCurrent((prev) => prev - 1)
+  }, [])
+
+  /** 重置到指定步骤 */
+  const resetTo = useCallback((step: number) => {
+    setCurrent(step)
+  }, [])
+
+  /** 重置所有状态 */
+  const reset = useCallback(() => {
+    setCurrent(0)
+    setConnectionTested(false)
+    setTestingConnection(false)
+  }, [])
+
+  return {
+    current,
+    setCurrent,
+    connectionTested,
+    setConnectionTested,
+    testingConnection,
+    setTestingConnection,
+    next,
+    prev,
+    resetTo,
+    reset,
+  }
+}