cx-chat 0.0.1

package/src/components/layout/index.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { useAuth } from '../../contexts/AuthContext';
+import { useMenu } from '../../contexts/MenuContext';
+import Header from './components/Header';
+import Sidebar from './components/Sidebar';
+
+
+const MainLayout: React.FC = () => {
+    const { user, logout, hasPermission } = useAuth();
+    const { menus, isLoading: isLoadingMenus } = useMenu();
+    const navigate = useNavigate();
+    const location = useLocation();
+    const queryClient = useQueryClient();
+    useTranslation();
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const [isAdminMenuOpen, setIsAdminMenuOpen] = useState(false);
+    const [headerTitle, setHeaderTitle] = useState<React.ReactNode | null>(null);
+    const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+
+    useEffect(() => {
+        const handleClickOutside = () => setIsUserMenuOpen(false);
+        if (isUserMenuOpen) {
+            window.addEventListener('click', handleClickOutside);
+        }
+        return () => window.removeEventListener('click', handleClickOutside);
+    }, [isUserMenuOpen]);
+
+    /** 路由变化时收起侧栏管理菜单（避免仅依赖 window click 时被 Header stopPropagation 拦住） */
+    useEffect(() => {
+        setIsAdminMenuOpen(false);
+    }, [location.pathname]);
+
+    /** 打开右上角用户菜单时收起管理菜单，避免叠两层 */
+    useEffect(() => {
+        if (isUserMenuOpen) setIsAdminMenuOpen(false);
+    }, [isUserMenuOpen]);
+
+    /** 退出登录：先取消/清理会话相关请求与缓存，再跳转登录页 */
+    const handleLogout = async () => {
+        setIsUserMenuOpen(false);
+        // 主动退出：短时间内屏蔽“登录过期”全局提示（避免登出过程中残留请求触发 1803）
+        sessionStorage.setItem('suppress_unauthorized_toast_until', `${Date.now() + 2000}`);
+        try {
+            await queryClient.cancelQueries();
+            queryClient.removeQueries({ queryKey: ['threads'] });
+            queryClient.removeQueries({ queryKey: ['messages'] });
+            queryClient.removeQueries({ queryKey: ['chatSessionPrompt'] });
+            queryClient.removeQueries({ queryKey: ['chat', 'deletingSessionId'] });
+        } catch (e) {
+            // 取消查询失败不影响登出主流程
+        }
+        await logout();
+        navigate('/login', { replace: true });
+    };
+
+    return (
+        <div className="flex h-screen bg-white dark:bg-[#131314]">
+            <Sidebar
+                user={user}
+                hasPermission={hasPermission}
+                menus={menus}
+                isLoadingMenus={isLoadingMenus}
+                isCollapsed={isCollapsed}
+                setIsCollapsed={setIsCollapsed}
+                isAdminMenuOpen={isAdminMenuOpen}
+                setIsAdminMenuOpen={setIsAdminMenuOpen}
+            />
+
+            {/* Main Content Wrapper (includes Header + Content) */}
+            <div className="flex-1 flex flex-col min-w-0 min-h-0">
+                <Header
+                    user={user}
+                    hasPermission={hasPermission}
+                    headerTitle={headerTitle}
+                    isUserMenuOpen={isUserMenuOpen}
+                    setIsUserMenuOpen={setIsUserMenuOpen}
+                    onLogout={handleLogout}
+                />
+
+                {/* Content Area */}
+                <main className="flex-1 overflow-auto min-h-0">
+                    <Outlet context={useMemo(() => ({ setHeaderTitle }), [setHeaderTitle])} />
+                </main>
+            </div>
+        </div>
+    );
+};
+
+export default MainLayout;
+
+

package/src/components/table-view/components/search-area.tsx

@@ -0,0 +1,411 @@
+import {
+  CxButton,
+  CxDatePicker,
+  CxInput,
+  CxRangePicker,
+  CxSelect,
+} from '@cx-ui'
+import { Form } from 'antd'
+import dayjs from 'dayjs'
+import { RotateCcw, Search, Users } from 'lucide-react'
+import { useLayoutEffect, type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  toCxSearchButtonSize,
+  type SearchButtonSize,
+  type SearchField,
+} from './table-view.types'
+
+/** setFieldsValue 为合并更新，必须对每个筛选项显式赋值才能清空（重置） */
+function buildValuesForSearchFields(
+  searchFields: SearchField[],
+  searchFormData: Record<string, any>,
+): Record<string, unknown> {
+  const out: Record<string, unknown> = {}
+  for (const f of searchFields) {
+    if (Object.prototype.hasOwnProperty.call(searchFormData, f.prop)) {
+      out[f.prop] = searchFormData[f.prop]
+    } else {
+      if (f.multiple) {
+        out[f.prop] = []
+      } else if (f.type === 'select' || f.type === 'date' || f.type === 'dateRange') {
+        // Select/Date 需要 undefined 才会展示 placeholder
+        out[f.prop] = undefined
+      } else {
+        out[f.prop] = ''
+      }
+    }
+  }
+  return out
+}
+
+interface SearchAreaProps {
+  extra?: ReactNode
+  forceHorizontal?: boolean
+  form: any
+  /**
+   * 为 true（默认）时筛选项使用 Cx 浮动标签：常态显示 label，聚焦/展开时显示 placeholder。
+   * 设为 false 时恢复为仅 placeholder 的旧交互。
+   */
+  floatingLabels?: boolean
+  listTitle?: string
+  onReset: () => void
+  onSearch: () => void
+  searchButtonSize?: SearchButtonSize
+  searchFields: SearchField[]
+  searchFormData: Record<string, any>
+  total: number
+}
+
+export function SearchArea({
+  extra,
+  forceHorizontal = false,
+  floatingLabels = true,
+  form,
+  listTitle,
+  onReset,
+  onSearch,
+  searchButtonSize = 'default',
+  searchFields,
+  searchFormData,
+  total,
+}: SearchAreaProps) {
+  const { t } = useTranslation()
+  const iconPx = 14
+  const cxBtnSize = toCxSearchButtonSize(searchButtonSize)
+
+  /** 构造日期/时间范围的预设范围（用于搜索区 RangePicker 的快捷选择）。 */
+  const buildRangePresets = (opts: { showTime?: boolean }) => {
+    const now = dayjs()
+    if (opts.showTime) {
+      return [
+        {
+          label: t('common.table_search_preset_last_10_minutes'),
+          value: [now.subtract(10, 'minute'), now] as any,
+        },
+        {
+          label: t('common.table_search_preset_last_30_minutes'),
+          value: [now.subtract(30, 'minute'), now] as any,
+        },
+        {
+          label: t('common.table_search_preset_last_1_hour'),
+          value: [now.subtract(1, 'hour'), now] as any,
+        },
+        {
+          label: t('common.table_search_preset_last_2_hours'),
+          value: [now.subtract(2, 'hour'), now] as any,
+        },
+        {
+          label: t('common.table_search_preset_last_6_hours'),
+          value: [now.subtract(6, 'hour'), now] as any,
+        },
+        {
+          label: t('common.table_search_preset_last_12_hours'),
+          value: [now.subtract(12, 'hour'), now] as any,
+        },
+      ]
+    }
+
+    return [
+      {
+        label: t('common.table_search_preset_today'),
+        value: [now.startOf('day'), now.endOf('day')] as any,
+      },
+      {
+        label: t('common.table_search_preset_last_3_days'),
+        value: [now.subtract(2, 'day').startOf('day'), now.endOf('day')] as any,
+      },
+      {
+        label: t('common.table_search_preset_last_1_week'),
+        value: [now.subtract(6, 'day').startOf('day'), now.endOf('day')] as any,
+      },
+      {
+        label: t('common.table_search_preset_last_1_month'),
+        value: [now.subtract(1, 'month').startOf('day'), now.endOf('day')] as any,
+      },
+    ]
+  }
+
+  // 与列表请求的 searchFormData 对齐；重置后 data 可能为 {}，合并式 setFieldsValue 无法清字段，须按 prop 逐项写入
+  useLayoutEffect(() => {
+    form.setFieldsValue(
+      buildValuesForSearchFields(searchFields, searchFormData),
+    )
+  }, [form, searchFields, searchFormData])
+
+  const renderSearchField = (field: SearchField) => {
+    const labelText = field.labelKey
+      ? t(field.labelKey)
+      : field.label
+        ? t(field.label)
+        : ''
+    let placeholder: any
+
+    if (typeof field.placeholder === 'string') {
+      placeholder =
+        field.placeholder === '' ? '' : t(field.placeholder)
+    } else if (Array.isArray(field.placeholder)) {
+      placeholder = field.placeholder.map(item => t(item))
+    } else {
+      // 默认占位：保留提示，但不使用「请输入 / 请选择」类用语（避免与 Ant Design 中文默认冲突）
+      switch (field.type) {
+        case 'select':
+          placeholder = t('common.table_search_select_placeholder')
+          break
+        case 'date':
+          placeholder = t('common.table_search_date_placeholder')
+          break
+        case 'dateRange':
+          placeholder = [
+            t('common.table_search_date_range_start'),
+            t('common.table_search_date_range_end'),
+          ]
+          break
+        default:
+          placeholder = labelText
+          break
+      }
+    }
+
+    const widthStyle = { width: field.width || '100%', minWidth: 100 }
+    const allowClear = field.clearable !== false
+    const useFloat =
+      floatingLabels !== false &&
+      labelText != null &&
+      !(typeof labelText === 'string' && labelText.trim() === '')
+
+    switch (field.type) {
+      case 'select':
+        const selectOptions = (field.options ?? []).map((item) => ({
+          ...item,
+          label: item.label.indexOf('.') > 0 ? t(item.label) : item.label,
+        }))
+        const selectFocusPlaceholder = (() => {
+          if (!useFloat) return undefined
+          if (Array.isArray(placeholder)) {
+            const p0 = placeholder[0]
+            return typeof p0 === 'string' ? p0 : undefined
+          }
+          return typeof placeholder === 'string' ? placeholder : undefined
+        })()
+        return useFloat ? (
+          <CxSelect.Large
+            allowClear={allowClear}
+            cxFloatingLabel={labelText}
+            cxFocusPlaceholder={selectFocusPlaceholder}
+            mode={field.multiple ? 'multiple' : undefined}
+            options={selectOptions}
+            placeholder={undefined}
+            style={{ ...widthStyle, maxWidth: '100%' }}
+            onChange={() => {}}
+          />
+        ) : (
+          <CxSelect.Large
+            allowClear={allowClear}
+            mode={field.multiple ? 'multiple' : undefined}
+            options={selectOptions}
+            placeholder={placeholder}
+            style={{ ...widthStyle, maxWidth: '100%' }}
+            onChange={() => {}}
+          />
+        )
+
+      case 'date':
+        const dateFocusPlaceholder = (() => {
+          if (!useFloat) return undefined
+          if (Array.isArray(placeholder)) {
+            const p0 = placeholder[0]
+            return typeof p0 === 'string' ? p0 : undefined
+          }
+          return typeof placeholder === 'string' ? placeholder : undefined
+        })()
+        return useFloat ? (
+          <CxDatePicker.Large
+            allowClear={allowClear}
+            cxFloatingLabel={labelText}
+            cxFocusPlaceholder={dateFocusPlaceholder}
+            placeholder={undefined}
+            style={widthStyle}
+            onChange={() => {}}
+            onOpenChange={(open) => {
+              if (!open) {
+                onSearch()
+              }
+            }}
+          />
+        ) : (
+          <CxDatePicker.Large
+            allowClear={allowClear}
+            placeholder={placeholder}
+            style={widthStyle}
+            onChange={() => {}}
+            onOpenChange={(open) => {
+              if (!open) {
+                onSearch()
+              }
+            }}
+          />
+        )
+
+      case 'dateRange':
+        const rangeFocusPlaceholder = (() => {
+          if (!useFloat) return undefined
+          if (Array.isArray(placeholder) && placeholder.length >= 2) {
+            const p0 = placeholder[0]
+            const p1 = placeholder[1]
+            if (typeof p0 === 'string' && typeof p1 === 'string') return [p0, p1] as [string, string]
+            return undefined
+          }
+          if (typeof placeholder === 'string') return [placeholder, placeholder] as [string, string]
+          return undefined
+        })()
+        return useFloat ? (
+          <CxRangePicker.Large
+            showTime={field.showTime}
+            allowClear={allowClear}
+            cxFloatingLabel={labelText}
+            cxFocusPlaceholder={rangeFocusPlaceholder}
+            format={field.format}
+            presets={buildRangePresets({ showTime: field.showTime })}
+            placeholder={undefined}
+            style={{ ...widthStyle, minWidth: 200 }}
+            onPressEnter={() => onSearch()}
+            onChange={() => {}}
+            onOpenChange={(open) => {
+              if (!open) {
+                onSearch()
+              }
+            }}
+          />
+        ) : (
+          <CxRangePicker.Large
+            showTime={field.showTime}
+            allowClear={allowClear}
+            format={field.format}
+            presets={buildRangePresets({ showTime: field.showTime })}
+            placeholder={placeholder}
+            style={{ ...widthStyle, minWidth: 200 }}
+            onPressEnter={() => onSearch()}
+            onChange={() => {}}
+            onOpenChange={(open) => {
+              if (!open) {
+                onSearch()
+              }
+            }}
+          />
+        )
+
+      default:
+        return useFloat ? (
+          (() => {
+            const inputFocusPlaceholder = (() => {
+              if (Array.isArray(placeholder)) {
+                const p0 = placeholder[0]
+                return typeof p0 === 'string' ? p0 : undefined
+              }
+              return typeof placeholder === 'string' ? placeholder : undefined
+            })()
+            return (
+          <CxInput.Float
+            allowClear={allowClear}
+            cxFloatingLabel={labelText}
+            cxFocusPlaceholder={inputFocusPlaceholder}
+            placeholder={undefined}
+            style={widthStyle}
+            onPressEnter={() => onSearch()}
+            onChange={(e) => {
+              const next = e?.target?.value
+              if (next === '') onSearch()
+            }}
+          />
+            )
+          })()
+        ) : (
+          <CxInput.Large
+            allowClear={allowClear}
+            placeholder={placeholder}
+            style={widthStyle}
+            onPressEnter={() => onSearch()}
+            onChange={(e) => {
+              const next = e?.target?.value
+              if (next === '') onSearch()
+            }}
+          />
+        )
+    }
+  }
+
+  return (
+    <div className="px-3 pt-4 pb-2 border-b border-gray-200 dark:border-gray-700">
+      <div
+        className={
+          forceHorizontal
+            ? 'flex items-center gap-3 flex-nowrap overflow-x-auto'
+            : 'flex items-center gap-3 flex-wrap'
+        }>
+        {listTitle && (
+          <h3 className="font-semibold text-lg text-gray-800 dark:text-white flex items-center gap-2">
+            <Users size={18} className="text-gray-500 dark:text-gray-400" />
+            {t(listTitle)}
+            {total > 0 && (
+              <span className="text-sm font-normal text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded-full">
+                {total}
+              </span>
+            )}
+          </h3>
+        )}
+
+        <Form
+          form={form}
+          layout="inline"
+          preserve={false}
+          className={forceHorizontal ? 'shrink-0' : undefined}
+          style={
+            forceHorizontal
+              ? {
+                  display: 'flex',
+                  flexDirection: 'row',
+                  flexWrap: 'nowrap',
+                  alignItems: 'center',
+                  columnGap: 8,
+                }
+              : undefined
+          }>
+          {searchFields.map((field) => (
+            <Form.Item
+              key={field.prop}
+              name={field.prop}
+              className="mb-0"
+              style={
+                forceHorizontal
+                  ? { marginBottom: 0, flex: '0 0 auto' }
+                  : undefined
+              }>
+              {renderSearchField(field)}
+            </Form.Item>
+          ))}
+        </Form>
+
+        <div className="flex gap-2 ml-auto flex-shrink-0 items-center flex-wrap">
+          <CxButton
+            size={cxBtnSize}
+            icon={<RotateCcw size={iconPx} />}
+            onClick={onReset}
+            className="border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200">
+            {t('common.reset_filters')}
+          </CxButton>
+          <CxButton
+            size={cxBtnSize}
+            type="primary"
+            icon={<Search size={iconPx} />}
+            onClick={onSearch}>
+            {t('common.search')}
+          </CxButton>
+          {extra != null && extra !== false ? (
+            <div className="flex items-center gap-2">{extra}</div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}