@gientech/modual 1.2.8 → 1.2.9-fix

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

@@ -0,0 +1,500 @@
+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 36px;
+  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;
+  left: 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

@@ -0,0 +1,179 @@
+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';
+const { Item } = Form;
+const SensitiveSection = ({ url, token, role, eventsEmit, sectionData }: 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[] = [];
+      options.forEach((item: any) => {
+        if (_sensitiveWordIds.includes(item.key)) {
+          _data.push({
+            key: item.key,
+            label: item.label,
+          });
+        }
+      });
+
+      setData(_data);
+    }
+  }, [sectionData, options]);
+
+  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
+        value={showDefaultAnswer}
+        onChange={(e: any) => setShowDefaultAnswer(e.target.checked)}
+        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
+      >
+        <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,
+                  }}
+                >
+                  {item.label}
+                </span>
+              </div>
+            );
+          }}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default SensitiveSection;