cx-chat 0.0.2 → 0.0.3

package/src/components/layout/index.tsx

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

@@ -1,411 +0,0 @@
-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>
-  )
-}