@gientech/modual 2.0.9 → 2.0.11

package/src/modules/assistantConfig/components/SearchableSelector.tsx

@@ -1,500 +0,0 @@
-import React, { useMemo, useState, useEffect, useImperativeHandle, forwardRef } from 'react';
-import styled from 'styled-components';
-import {
-  defaultTheme,
-  deepMergeTheme,
-  useTheme,
-  type AppTheme,
-  type Styles,
-} from '@mxmweb/zui-theme';
-import { Search, CircleX } from 'lucide-react';
-
-export interface Item {
-  key: string | number;
-  label: string;
-  disabled?: boolean;
-  tags?: string[];
-  [key: string]: any; // 允许其他自定义属性
-}
-
-export interface SearchableSelectorProps {
-  /** 可选数据源 */
-  dataSource: Item[];
-  /** 外部已选择的值（这些项在左侧不可选） */
-  value?: Item[];
-  /** 确认回调，点击确定时调用 */
-  onConfirm?: (selectedItems: Item[]) => void;
-  /** 最大选择数量，0表示不限制 */
-  maxCount?: number;
-  /** 搜索框占位符 */
-  searchPlaceholder?: string;
-  /** 标题 */
-  title?: string;
-
-  /** 是否显示搜索框 */
-  showSearch?: boolean;
-  /** 自定义搜索过滤函数 */
-  filterOption?: (inputValue: string, item: Item) => boolean;
-  /** 自定义渲染项 */
-  renderItem?: (item: Item) => React.ReactNode;
-  /** 自定义渲染已选项 */
-
-  renderSelectedItem?: (
-    item: Item,
-    updateItemData: (data: Record<string, any>) => void
-  ) => React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-  styles?: Styles;
-  /** 高度 */
-  height?: string;
-  /** 宽度 */
-  width?: string;
-}
-
-export interface SearchableSelectorRef {
-  getSelectedItems: () => Item[];
-  confirm: () => void;
-}
-
-const Container = styled.div<{ $theme: AppTheme; $width?: string; $height?: string }>`
-  display: flex;
-  background-color: #ffffff;
-  border: 1px solid ${p => p.$theme?.colors?.border?.default || '#e5e7eb'};
-  border-radius: ${p => p.$theme?.space?.radius || '8px'};
-  overflow: hidden;
-  width: ${p => p.$width || '600px'};
-  height: ${p => p.$height || '400px'};
-  position: relative;
-`;
-
-const Pane = styled.div<{ $theme: AppTheme }>`
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid ${p => p.$theme?.colors?.border?.default || '#e5e7eb'};
-  overflow: hidden;
-
-  &:last-child {
-    border-right: none;
-  }
-`;
-
-const PaneHeader = styled.div<{ $theme: AppTheme }>`
-  padding: 12px 16px;
-  font-weight: 400;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: ${p => p.$theme?.colors?.text?.primary || '#4E5969'};
-`;
-
-const PaneHeaderClear = styled.div<{ $theme: AppTheme }>`
-  font-weight: 400;
-  font-size: 14px;
-  color: ${p => p.$theme?.colors?.text?.primary || '#4E6EF2'};
-`;
-
-const SearchWrapper = styled.div<{ $theme: AppTheme }>`
-  padding: 12px;
-  background-color: ${p => p.$theme?.colors?.background?.default || '#ffffff'};
-`;
-
-const SearchInput = styled.input<{ $theme: AppTheme }>`
-  width: 100%;
-  padding: 8px 12px 8px 12px;
-  border: 1px solid ${p => p.$theme?.colors?.border?.default || '#e5e7eb'};
-  border-radius: ${p => p.$theme?.space?.radius || '6px'};
-  font-size: 14px;
-  outline: none;
-  transition: all 0.2s;
-
-  &:focus {
-    border-color: ${p => p.$theme?.colors?.primary?.default || '#3b82f6'};
-    box-shadow: 0 0 0 3px ${p => p.$theme?.colors?.primary?.default || '#3b82f6'}20;
-  }
-
-  &::placeholder {
-    color: ${p => p.$theme?.colors?.text?.tertiary || '#9ca3af'};
-  }
-`;
-
-const SearchIcon = styled.div`
-  position: absolute;
-  right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #9ca3af;
-  pointer-events: none;
-`;
-
-const ListContainer = styled.div`
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #f1f1f1;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #c1c1c1;
-    border-radius: 3px;
-
-    &:hover {
-      background: #a8a8a8;
-    }
-  }
-`;
-
-const ItemWrapper = styled.div<{ $theme: AppTheme; $disabled?: boolean; $selected?: boolean }>`
-  padding: 10px 16px;
-  cursor: ${p => (p.$disabled ? 'not-allowed' : 'pointer')};
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  opacity: ${p => (p.$disabled ? 0.5 : 1)};
-
-  &:hover {
-    background-color: ${p =>
-      p.$disabled ? 'transparent' : p.$theme?.colors?.background?.hover || '#f3f4f6'};
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-`;
-
-const ItemLabel = styled.span<{ $theme: AppTheme }>`
-  flex: 1;
-  font-size: 14px;
-  color: ${p => p.$theme?.colors?.text?.primary || '#111827'};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const ActionButton = styled.button<{ $theme: AppTheme }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 68px;
-  border: none;
-  background-color: #ebecf3;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-  color: ${p => p.$theme?.colors?.text?.secondary || '#1D2129'};
-  transition: all 0.2s;
-
-  &:disabled {
-    cursor: not-allowed;
-    color: ${p => p.$theme?.colors?.text?.secondary || '#C9CDD4'};
-  }
-`;
-
-const EmptyState = styled.div<{ $theme: AppTheme }>`
-  padding: 40px 20px;
-  text-align: center;
-  color: ${p => p.$theme?.colors?.text?.tertiary || '#9ca3af'};
-  font-size: 14px;
-`;
-
-const CountBadge = styled.span<{ $theme: AppTheme }>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  background-color: ${p => p.$theme?.colors?.primary?.default || '#3b82f6'};
-  color: white;
-  border-radius: 10px;
-  font-size: 12px;
-  font-weight: 500;
-  margin-left: 8px;
-`;
-
-const SearchableSelector = forwardRef<SearchableSelectorRef, SearchableSelectorProps>(
-  (
-    {
-      dataSource,
-      value = [],
-      onConfirm,
-      maxCount = 0,
-      searchPlaceholder = '搜索...',
-      title = '',
-      showSearch = true,
-      filterOption,
-      renderItem,
-      renderSelectedItem,
-      className,
-      style,
-      styles,
-      height,
-      width,
-    },
-    ref
-  ) => {
-    // 1. 获取全局主题
-    const globalTheme = useTheme();
-
-    // 2. 优先级合并：用户styles > useTheme > 默认主题
-    const theme = deepMergeTheme(
-      deepMergeTheme({ theme: defaultTheme, mode: 'light' }, globalTheme),
-      styles
-    );
-
-    // 内部状态管理 - 使用 Item[] 数组，初始值为外部传入的 value
-    const [internalSelectedItems, setInternalSelectedItems] = useState<Item[]>(value);
-    const [searchValue, setSearchValue] = useState<string>('');
-
-    // 当外部 value 变化时，同步到内部状态（但只在初始化时，后续由内部管理）
-    useEffect(() => {
-      setInternalSelectedItems(value);
-    }, [value]);
-
-    // 获取外部已选择项的 key 集合（这些项在左侧不可选）
-    const externalSelectedKeys = useMemo(() => {
-      return new Set(value.map(item => item.key));
-    }, [value]);
-
-    // 获取已选择项的 key 集合，用于快速查找
-    const selectedKeys = useMemo(() => {
-      return new Set(internalSelectedItems.map(item => item.key));
-    }, [internalSelectedItems]);
-
-    // 暴露方法给外部调用
-    useImperativeHandle(
-      ref,
-      () => ({
-        getSelectedItems: () => internalSelectedItems,
-        confirm: () => {
-          onConfirm?.(internalSelectedItems);
-        },
-      }),
-      [internalSelectedItems, onConfirm]
-    );
-
-    // 默认搜索过滤函数
-    const defaultFilterOption = (inputValue: string, item: Item): boolean => {
-      if (!inputValue) return true;
-      const searchLower = inputValue.toLowerCase();
-      return (
-        item.label.toLowerCase().includes(searchLower) ||
-        item.tags?.some(tag => tag.toLowerCase().includes(searchLower)) ||
-        false
-      );
-    };
-
-    const filterFn = filterOption || defaultFilterOption;
-
-    // 过滤后的可选列表
-    const filteredDataSource = useMemo(() => {
-      return (dataSource || []).filter(item => filterFn(searchValue, item));
-    }, [dataSource, searchValue, filterFn]);
-
-    // 处理选择
-    const handleSelect = (item: Item) => {
-      // if (item.disabled) return;
-      // 如果该项是外部传入的（已在 value 中），则不可选
-      // if (externalSelectedKeys.has(item.key)) {
-      //   return;
-      // }
-
-      const isSelected = selectedKeys.has(item.key);
-      let newSelectedItems: Item[];
-
-      if (isSelected) {
-        // 已选中，取消选择（只从内部选中项中移除）
-        newSelectedItems = (internalSelectedItems || []).filter(
-          selectedItem => selectedItem.key !== item.key
-        );
-      } else {
-        // 未选中，检查是否达到最大限制
-        if (maxCount > 0 && internalSelectedItems.length >= maxCount) {
-          return; // 达到最大限制，不添加
-        }
-        newSelectedItems = [...internalSelectedItems, item];
-      }
-
-      setInternalSelectedItems(newSelectedItems);
-    };
-
-    // 更新已选项数据的函数
-    const updateItemData = (key: string | number, data: Record<string, any>) => {
-      setInternalSelectedItems((pre: any) => {
-        const newSelectedItems = pre.map(selectedItem => {
-          if (selectedItem.key == key) {
-            return {
-              ...selectedItem,
-              tags: data,
-            };
-          } else {
-            return selectedItem;
-          }
-        });
-        return newSelectedItems;
-      });
-    };
-    // 处理移除
-    const handleRemove = (item: Item) => {
-      // 只从内部选中项中移除
-      const newSelectedItems = (internalSelectedItems || []).filter(
-        selectedItem => selectedItem.key !== item.key
-      );
-
-      setInternalSelectedItems(newSelectedItems);
-    };
-
-    // 判断是否已选中
-    const isSelected = (key: string | number) => {
-      return selectedKeys.has(key);
-    };
-
-    // 判断是否达到最大限制
-    const isMaxReached = maxCount > 0 && internalSelectedItems.length >= maxCount;
-
-    return (
-      <Container
-        $theme={theme.theme || defaultTheme}
-        $width={width}
-        $height={height}
-        className={className}
-        style={style}
-      >
-        {/* 左侧：可选列表 */}
-        <Pane $theme={theme.theme || defaultTheme} style={{ flex: 1 }}>
-          {showSearch && (
-            <SearchWrapper $theme={theme.theme || defaultTheme}>
-              <div style={{ position: 'relative' }}>
-                <SearchIcon>
-                  <Search size={16} />
-                </SearchIcon>
-                <SearchInput
-                  $theme={theme.theme || defaultTheme}
-                  type="text"
-                  placeholder={searchPlaceholder}
-                  value={searchValue}
-                  onChange={e => setSearchValue(e.target.value)}
-                />
-              </div>
-            </SearchWrapper>
-          )}
-
-          <ListContainer>
-            {filteredDataSource.length === 0 ? (
-              <EmptyState $theme={theme.theme || defaultTheme}>
-                {searchValue ? '未找到匹配项' : '暂无数据'}
-              </EmptyState>
-            ) : (
-              filteredDataSource.map(item => {
-                const selected = isSelected(item.key);
-                // 外部传入的项不可选，或者达到最大限制且未选中
-                // const isExternalSelected = externalSelectedKeys.has(item.key);
-                // const disabled = item.disabled || isExternalSelected || (isMaxReached && !selected);
-
-                return (
-                  <ItemWrapper
-                    key={item.key}
-                    $theme={theme.theme || defaultTheme}
-                    // $disabled={disabled}
-                    $selected={selected}
-                    // onClick={() => handleSelect(item)}
-                  >
-                    <ItemLabel $theme={theme.theme || defaultTheme}>
-                      {renderItem ? renderItem(item) : item.label}
-                    </ItemLabel>
-                    {selected && (
-                      <ActionButton
-                        $theme={theme.theme || defaultTheme}
-                        onClick={e => {
-                          e.stopPropagation();
-                          handleRemove(item);
-                        }}
-                        disabled
-                      >
-                        已添加
-                      </ActionButton>
-                    )}
-                    {!selected && (
-                      <ActionButton
-                        $theme={theme.theme || defaultTheme}
-                        // disabled={disabled}
-                        onClick={e => {
-                          e.stopPropagation();
-                          handleSelect(item);
-                        }}
-                      >
-                        添加
-                      </ActionButton>
-                    )}
-                  </ItemWrapper>
-                );
-              })
-            )}
-          </ListContainer>
-        </Pane>
-
-        {/* 右侧：已选列表 */}
-        <Pane $theme={theme.theme || defaultTheme} style={{ flex: 1 }}>
-          <PaneHeader $theme={theme.theme || defaultTheme}>
-            {maxCount > 0
-              ? `已选：${internalSelectedItems.length}/${maxCount}个${title}`
-              : `已选：${internalSelectedItems.length}个${title}`}
-
-            <PaneHeaderClear
-              $theme={theme.theme || defaultTheme}
-              onClick={e => {
-                e.stopPropagation();
-                setInternalSelectedItems([]);
-              }}
-            >
-              清空
-            </PaneHeaderClear>
-          </PaneHeader>
-
-          <ListContainer>
-            {internalSelectedItems.length === 0 ? (
-              <EmptyState $theme={theme.theme || defaultTheme}>暂无已选项</EmptyState>
-            ) : (
-              internalSelectedItems.map(item => {
-                const updateData = (data: Record<string, any>) => updateItemData(item.key, data);
-
-                return (
-                  <ItemWrapper key={item.key} $theme={theme.theme || defaultTheme}>
-                    <ItemLabel $theme={theme.theme || defaultTheme}>
-                      {renderSelectedItem ? renderSelectedItem(item, updateData) : item.label}
-                    </ItemLabel>
-
-                    <CircleX
-                      size={14}
-                      color={theme.theme?.colors?.text?.secondary || '#86909C'}
-                      style={{
-                        cursor: 'pointer',
-                        // marginLeft: '8px',
-                      }}
-                      onClick={e => {
-                        e.stopPropagation();
-                        handleRemove(item);
-                      }}
-                    />
-                  </ItemWrapper>
-                );
-              })
-            )}
-          </ListContainer>
-        </Pane>
-      </Container>
-    );
-  }
-);
-
-SearchableSelector.displayName = 'SearchableSelector';
-
-export default SearchableSelector;

package/src/modules/assistantConfig/components/Sensitive.tsx

@@ -1,221 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import ResourceBinderItem from './ResourceBinderItem';
-import SearchableSelector, { type SearchableSelectorRef } from './SearchableSelector';
-import { Button, Modal, Form, Checkbox, Input } from 'antd';
-import { Plus } from 'lucide-react';
-import Icon from '../assets/sensitive.svg';
-import AxiosInstance from '../server';
-import { DEFAULT_ANSWER } from '../constants';
-const { Item } = Form;
-const SensitiveSection = ({
-  url,
-  token,
-  role,
-  eventsEmit,
-  sectionData,
-  defaultAnswer,
-  form,
-}: any) => {
-  const [options, setOptions]: any = useState([]);
-  const [data, setData]: any = useState([]);
-  const [isModalShow, setIsModalShow] = useState(false);
-  const [showDefaultAnswer, setShowDefaultAnswer] = useState(false);
-  const selectorRef = useRef<SearchableSelectorRef>(null);
-
-  const { fetchSensitiveLibrary } = AxiosInstance({
-    url,
-    token,
-    role,
-    eventsEmit,
-  });
-
-  useEffect(() => {
-    getList();
-  }, []);
-
-  useEffect(() => {
-    if (sectionData && options?.length > 0) {
-      let _sensitiveWordIds = sectionData
-        ? Array.isArray(sectionData)
-          ? sectionData
-          : sectionData.split(',')
-        : [];
-      let _data: any[] = [];
-      _sensitiveWordIds.forEach((s: string) => {
-        const _targetSensitive = (options || []).find((i: any) => i.key === s);
-        if (_targetSensitive) {
-          _data.push({
-            key: _targetSensitive.key,
-            label: _targetSensitive.label,
-          });
-        }
-      });
-      setData(_data);
-    }
-  }, [sectionData, options]);
-
-  useEffect(() => {
-    if (defaultAnswer) {
-      setShowDefaultAnswer(true);
-    }
-  }, [defaultAnswer]);
-
-  const getList = async () => {
-    try {
-      const res = await fetchSensitiveLibrary({
-        pageNo: 1,
-        pageSize: 9999,
-      });
-      if (res?.records) {
-        const options = (res?.records || []).map((item: any) => {
-          return {
-            key: item.id + '',
-            label: item.name,
-          };
-        });
-        setOptions(options);
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  const handleEventsEmit = (name: string, eventsData?: any) => {
-    switch (name) {
-      case 'removeItem':
-        const _data = data.filter((p: any) => p.key !== eventsData.key);
-        setData([..._data]);
-        handleDatatoSubmit(_data);
-        break;
-    }
-  };
-
-  const handleDatatoSubmit = (selectedItems: any) => {
-    const item = selectedItems
-      .map((s: any) => s?.key || '')
-      .filter(key => key)
-      .join(',');
-    eventsEmit && eventsEmit('sensitive_selected', item);
-  };
-
-  const handleOk = () => {
-    // 通过 ref 获取选中的项
-    const selectedItems = selectorRef.current?.getSelectedItems() || [];
-    setData(selectedItems);
-    setIsModalShow(false);
-    handleDatatoSubmit(selectedItems);
-  };
-
-  return (
-    <div style={{ borderBottom: '1px solid #E5E6EB', padding: '12px 0 ' }}>
-      <div className="flex items-center justify-between">
-        <div className="flex items-center">
-          <img src={Icon} />
-          <span
-            className="font-medium "
-            style={{
-              marginLeft: '10px',
-            }}
-          >
-            敏感词
-          </span>
-        </div>
-        <Button
-          color="primary"
-          variant="outlined"
-          size="small"
-          icon={<Plus size={14} />}
-          onClick={() => setIsModalShow(true)}
-        >
-          添加
-        </Button>
-      </div>
-      <Checkbox
-        checked={showDefaultAnswer}
-        onChange={(e: any) => {
-          setShowDefaultAnswer(e.target.checked);
-          if (e.target.checked) {
-            form.setFieldsValue({
-              defaultAnswer: DEFAULT_ANSWER,
-            });
-          } else {
-            form.setFieldsValue({
-              defaultAnswer: '',
-            });
-          }
-        }}
-        style={{
-          marginBottom: 8,
-          marginTop: 8,
-        }}
-      >
-        自定义回复
-      </Checkbox>
-      {showDefaultAnswer && (
-        <Item label="自定义回复内容" name="defaultAnswer" layout="vertical">
-          <Input.TextArea style={{ height: '55px', resize: 'none' }} />
-        </Item>
-      )}
-      {data?.length > 0 && (
-        <ResourceBinderItem
-          countText={data?.length > 0 ? `已选：${data?.length}个敏感词库` : undefined}
-          eventsEmit={handleEventsEmit}
-          data={data}
-        />
-      )}
-
-      <Modal
-        width={740}
-        title="选择敏感词"
-        okText="确定"
-        cancelText="取消"
-        open={isModalShow}
-        onOk={handleOk}
-        onCancel={() => setIsModalShow(false)}
-        destroyOnHidden
-        className="assistant-config-resource-bind-modal"
-      >
-        <SearchableSelector
-          ref={selectorRef}
-          dataSource={options}
-          value={data}
-          searchPlaceholder="搜索名称..."
-          width="700px"
-          height="500px"
-          title="敏感词库"
-          renderItem={item => {
-            return (
-              <div className="flex ">
-                <img src={Icon} alt="add" />
-                <span
-                  style={{
-                    marginLeft: 8,
-                    marginRight: 8,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                  }}
-                  title={item.label}
-                >
-                  {item.label}
-                </span>
-              </div>
-            );
-          }}
-          renderSelectedItem={(item, updateItemData) => {
-            return (
-              <div className="flex items-center">
-                <img src={Icon} alt="add" />
-                <div style={{ marginLeft: '12px' }}>
-                  <div style={{ fontWeight: 500 }}>{item.label}</div>
-                </div>
-              </div>
-            );
-          }}
-        />
-      </Modal>
-    </div>
-  );
-};
-
-export default SensitiveSection;