@gientech/modual 1.2.7 → 1.2.9-fix

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

@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { Tag, Button } from 'antd';
+import { ChevronUp, ChevronDown, CircleX, X } from 'lucide-react';
+
+interface Items {
+  key: string;
+  label: string;
+  tags?: string[];
+}
+
+const ResourceBinderItem = ({
+  countText,
+  eventsEmit,
+  data,
+}: {
+  countText?: string;
+  eventsEmit: (name: string, data?: any) => void;
+  data: Items[];
+}) => {
+  const [expanded, setExpanded] = useState(true);
+  return (
+    <div
+      style={{
+        marginTop: 8,
+      }}
+    >
+      {countText && (
+        <div className="flex items-center gap-2">
+          <span style={{ color: expanded ? '#4E6EF2' : '#4E5969' }}>{countText}</span>
+          {expanded ? (
+            <ChevronUp onClick={() => setExpanded(v => !v)} color="#4E6EF2" size={14} />
+          ) : (
+            <ChevronDown onClick={() => setExpanded(v => !v)} color="#4E5969" size={14} />
+          )}
+        </div>
+      )}
+
+      <div
+        style={{
+          display: expanded ? 'block' : 'none',
+        }}
+      >
+        {data.map(item => (
+          <BindTagItem key={item.key} item={item} eventsEmit={eventsEmit} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const BindTagItem = ({ item, eventsEmit }: any) => {
+  const [expanded, setExpanded] = useState(true);
+
+  return (
+    <div
+      key={item.key}
+      className="flex items-center justify-between"
+      style={{ padding: '8px 12px', borderRadius: 6 }}
+    >
+      <div>
+        <div style={{ color: '#1D2129' }} className="flex items-center">
+          {item.label}
+          {item?.tags?.length > 0 && (
+            <>
+              <span
+                style={{
+                  color: '#4E5969',
+                  marginLeft: '6px',
+                  marginRight: 6,
+                }}
+              >
+                ({item?.tags?.length}个标签)
+              </span>
+              {expanded ? (
+                <ChevronUp onClick={() => setExpanded(v => !v)} color="#4E6EF2" size={14} />
+              ) : (
+                <ChevronDown onClick={() => setExpanded(v => !v)} color="#4E5969" size={14} />
+              )}
+            </>
+          )}
+        </div>
+
+        {item?.tags?.length > 0 && (
+          <div
+            className="flex flex-wrap gap-4"
+            style={{
+              display: expanded ? 'block' : 'none',
+              marginTop: 8,
+            }}
+          >
+            {(item?.tags || []).map((tag: string) => (
+              <Button
+                key={tag}
+                iconPosition="end"
+                type="text"
+                style={{
+                  backgroundColor: '#F0F0F0',
+                  padding: '2px 6px',
+                  height: 22,
+                  borderRadius: 2,
+                  color: '#1D2129',
+                }}
+                icon={
+                  <X
+                    size={14}
+                    color="#86909C"
+                    onClick={() => {
+                      const newItem = {
+                        ...item,
+                        tags: item.tags.filter((t: any) => t !== tag),
+                      };
+                      eventsEmit(`removeTag`, newItem);
+                    }}
+                  />
+                }
+              >
+                {tag}
+              </Button>
+            ))}
+          </div>
+        )}
+      </div>
+      <Button
+        type="text"
+        icon={<CircleX size={14} />}
+        onClick={() => eventsEmit(`removeItem`, item)}
+      ></Button>
+    </div>
+  );
+};
+
+export default ResourceBinderItem;

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;