@gientech/modual 1.5.0 → 1.5.2

package/src/utils/gientechCommon/components/Messages/GientechNewChatWelcome.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useMemo, useState, useRef } from 'react';
-import { Popover } from 'antd';
+import { useEffect, useMemo, useState, useRef } from 'react';
+import { Popover, Input } from 'antd';
+import { Search, X, ChevronLeft, ChevronRight } from 'lucide-react';
 import { type Styles, defaultTheme } from '@mxmweb/zui';
 import { uid } from 'uid';
 import defaultWeLogo from './defaultWeLogo.svg';
@@ -48,14 +49,81 @@ const createWelcomeStyles = (colors: any, classId: string) => {
       box-shadow: inset 0 0 0 1px ${c.border};
     }
     .g-welcome-${classId} .g-welcome-pagination-btn {
+      background: transparent;
+      border: none;
+      color: ${c.disabled};
+      padding: 6px 10px;
+      border-radius: 9999px;
+      transition: all 0.2s;
+      font-size: 14px;
+      line-height: 1;
+      min-width: 32px;
+      height: 32px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .g-welcome-${classId} .g-welcome-pagination-btn:hover:not(:disabled) {
+      color: ${c.text};
+      background-color: ${c.border}33;
+    }
+    .g-welcome-${classId} .g-welcome-pagination-btn.active {
       color: ${c.primary};
+      background: radial-gradient(100% 100% at 50% 50%, ${c.primary}10 0%, ${c.primary}08 100%);
+      box-shadow: 0 2px 10px ${c.primary}12, inset 0 0 0 1px ${c.primary}1A;
     }
     .g-welcome-${classId} .g-welcome-pagination-btn:disabled {
       color: ${c.disabled};
       cursor: not-allowed;
+      background: transparent;
     }
     .g-welcome-${classId} .g-welcome-pagination-text {
+      color: ${c.disabled};
+      font-size: 14px;
+      padding: 0 8px;
+    }
+    .g-welcome-${classId} .g-welcome-pagination-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background-color: ${c.border};
+      transition: all 0.2s;
+    }
+    .g-welcome-${classId} .g-welcome-pagination-dot.active {
+      background-color: ${c.primary};
+      width: 20px;
+      border-radius: 3px;
+    }
+    .g-welcome-${classId} .g-welcome-search-btn {
+      background-color: #ffffff;
+      border: 1px solid ${c.border};
       color: ${c.text};
+      padding: 8px 8px;
+      border-radius: 100%;
+      cursor: pointer;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 14px;
+      box-shadow: 0 1px 2px rgba(31,35,41,0.04);
+    }
+    .g-welcome-${classId} .g-welcome-search-btn:hover {
+      border-color: ${c.primary};
+      color: ${c.primary};
+      box-shadow: 0 2px 6px rgba(31,35,41,0.08);
+    }
+    .g-welcome-${classId} .g-welcome-search-input {
+      border: 1px solid ${c.border};
+      border-radius: 9999px;
+      transition: all 0.2s;
+      height: 40px;
+      padding: 0 14px;
+    }
+    .g-welcome-${classId} .g-welcome-search-input:focus,
+    .g-welcome-${classId} .g-welcome-search-input:hover {
+      border-color: ${c.primary};
+      box-shadow: 0 0 0 2px ${c.primary}1A;
     }
   `;
 }
@@ -162,6 +230,8 @@ interface GientechNewChatWelcomeProps {
 function GientechNewChatWelcome(props: GientechNewChatWelcomeProps) {
   const { assistantList, eventsEmit, styles, selectedId, onSelectAssistant, productLogo } = props;
   const [currentPage, setCurrentPage] = useState(1);
+  const [searchVisible, setSearchVisible] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState('');
   const pageSize = 12;
 
   // 只在 selectedId 变化时触发事件，且去重
@@ -199,11 +269,30 @@ function GientechNewChatWelcome(props: GientechNewChatWelcomeProps) {
     return JSON.parse(selectAssistant?.configJson || '{}');
   }, [selectAssistant]);
 
+  // 搜索过滤逻辑
+  const filteredAssistants = useMemo(() => {
+    if (!searchKeyword.trim()) {
+      return assistantList || [];
+    }
+    const keyword = searchKeyword.toLowerCase().trim();
+    return (assistantList || []).filter(assistant => {
+      const name = assistant.name?.toLowerCase() || '';
+      // 也可以搜索配置中的信息
+      try {
+        const cfg = JSON.parse(assistant.configJson || '{}');
+        const configName = cfg.config_name?.toLowerCase() || '';
+        return name.includes(keyword) || configName.includes(keyword);
+      } catch {
+        return name.includes(keyword);
+      }
+    });
+  }, [assistantList, searchKeyword]);
+
   // 分页逻辑
-  const totalPages = Math.ceil((assistantList?.length || 0) / pageSize);
-  const currentAssistants = assistantList?.slice((currentPage - 1) * pageSize, currentPage * pageSize) || [];
+  const totalPages = Math.ceil((filteredAssistants?.length || 0) / pageSize);
+  const currentAssistants = filteredAssistants?.slice((currentPage - 1) * pageSize, currentPage * pageSize) || [];
 
-  // 当选中助手时，自动跳转到对应页面
+  // 当选中助手时，自动跳转到对应页面（基于完整列表）
   useEffect(() => {
     if (selectedId && assistantList) {
       const selectedIndex = assistantList.findIndex(a => a.id === selectedId);
@@ -214,11 +303,20 @@ function GientechNewChatWelcome(props: GientechNewChatWelcomeProps) {
     }
   }, [selectedId, assistantList, pageSize]);
 
+  // 当搜索关键词变化时，重置到第一页（但如果正在选择助手，则跳过重置，让选择助手的跳转逻辑生效）
+  useEffect(() => {
+    // 如果有选中的助手，说明用户正在选择助手，此时不应该重置到第一页
+    // 让选择助手的跳转逻辑来决定页面
+    if (!selectedId) {
+      setCurrentPage(1);
+    }
+  }, [searchKeyword, selectedId]);
+
   const prologue = selectAssistantConfig.prologue || '您好，欢迎使用小鲸智能问答';
   const prologueTypewriter = useTypewriter(prologue, [selectedId], 30);
 
   return (
-    <div className={`flex flex-col items-center justify-center h-full w-full g-welcome-${classId}`}>
+    <div className={`flex flex-col relative items-center justify-center h-full w-full g-welcome-${classId}`}>
       {/* 产品Logo */}
       <img
         src={productLogo || (defaultWeLogo as unknown as string)}
@@ -229,9 +327,47 @@ function GientechNewChatWelcome(props: GientechNewChatWelcomeProps) {
       <div className="text-3xl font-bold mb-2 g-welcome-title">{prologueTypewriter}</div>
       <div className="text-sm text-gray-500 mb-20">请选择一个智能助手，开始你的智能问答之旅</div>
       {!selectedId && <div className="flex mb-2 g-welcome-subtitle">请选择一个智能助手</div>}
-      <div className="flex flex-wrap gap-3 px-5 justify-center mb-4">
+
+      <div
+       style={{
+        maxWidth: '1200px',
+       }}
+      className="flex flex-wrap gap-3
+       max-w-[1200px] px-8 w-full mx-auto justify-center mb-4">
+        {/* 搜索按钮/输入框 - 永远渲染为第一个元素 */}
+        {!searchVisible ? (
+          <button type="button" className="g-welcome-search-btn" onClick={() => setSearchVisible(true)}>
+            <Search   size={16} />
+          </button>
+        ) : (
+          <div className="flex items-center gap-2 px-5 w-full" style={{ flexBasis: '100%' }}>
+            <Input
+              className="g-welcome-search-input w-full"
+              placeholder="搜索助手名称"
+              prefix={<Search size={16} />}
+              suffix={
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSearchVisible(false);
+                    setSearchKeyword('');
+                  }}
+                  style={{ background: 'transparent', border: 'none', cursor: 'pointer' }}
+                >
+                  <X size={14} />
+                </button>
+              }
+              value={searchKeyword}
+              onChange={(e) => setSearchKeyword(e.target.value)}
+              autoFocus
+            />
+          </div>
+        )}
+
+        {/* 助手列表或空状态 */}
         {currentAssistants && currentAssistants.length > 0 ? (
-          currentAssistants.map(assistant => {
+          <>
+            {currentAssistants.map(assistant => {
             const isActive = selectedId === assistant.id;
             // 图标解析：优先 assistant.icon，其次配置中的 icon/avatar/logo，最后使用默认
             let iconSrc: string | undefined = assistant.icon;
@@ -250,8 +386,19 @@ function GientechNewChatWelcome(props: GientechNewChatWelcomeProps) {
                 placement="bottom"
               >
                 <button
+                  type="button"
                   className={`g-welcome-btn px-3 cursor-pointer rounded-full border font-medium min-w-[160px] text-sm transition-all flex items-center gap-2 ${isActive ? 'active' : ''}`}
-                  onClick={() => onSelectAssistant?.(assistant.id)}
+                  onClick={() => {
+                    onSelectAssistant?.(assistant.id);
+                    // 若在搜索视图中选择了助手，则延迟清空并收起搜索，让跳转页面的逻辑先执行
+                    if (searchVisible || searchKeyword) {
+                      // 使用 setTimeout 延迟清空搜索，确保 selectedId 变化触发的跳转逻辑先执行
+                      setTimeout(() => {
+                        setSearchKeyword('');
+                        setSearchVisible(false);
+                      }, 0);
+                    }
+                  }}
                   title={assistant.name}
                 >
                   <span className="icon-badge">
@@ -261,30 +408,96 @@ function GientechNewChatWelcome(props: GientechNewChatWelcomeProps) {
                 </button>
               </Popover>
             );
-          })
+            })}
+          </>
         ) : (
           <div className="g-welcome-subtitle">暂无可用助手</div>
         )}
       </div>
       {/* 分页控制 */}
       {totalPages > 1 && (
-        <div className="flex items-center gap-3 text-sm">
+        <div className="flex items-center gap-2">
           <button
-            className="g-welcome-pagination-btn px-3 py-1 rounded transition-colors"
+            type="button"
+            className="g-welcome-pagination-btn"
             onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
             disabled={currentPage === 1}
           >
-            上一页
+            <ChevronLeft size={16} />
           </button>
-          <span className="g-welcome-pagination-text">
-            {currentPage} / {totalPages}
-          </span>
+
+          {/* 页码显示 */}
+          <div className="flex items-center gap-1">
+            {(() => {
+              const pages: (number | string)[] = [];
+              const maxVisible = 7; // 最多显示7个页码
+
+              if (totalPages <= maxVisible) {
+                // 如果总页数少于等于7，显示所有页码
+                for (let i = 1; i <= totalPages; i++) {
+                  pages.push(i);
+                }
+              } else {
+                // 总是显示第一页
+                pages.push(1);
+
+                if (currentPage <= 4) {
+                  // 当前页在前4页，显示 1 2 3 4 5 ... totalPages
+                  for (let i = 2; i <= 5; i++) {
+                    pages.push(i);
+                  }
+                  pages.push('...');
+                  pages.push(totalPages);
+                } else if (currentPage >= totalPages - 3) {
+                  // 当前页在后4页，显示 1 ... totalPages-4 totalPages-3 totalPages-2 totalPages-1 totalPages
+                  pages.push('...');
+                  for (let i = totalPages - 4; i <= totalPages; i++) {
+                    pages.push(i);
+                  }
+                } else {
+                  // 当前页在中间，显示 1 ... currentPage-1 currentPage currentPage+1 ... totalPages
+                  pages.push('...');
+                  for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+                    pages.push(i);
+                  }
+                  pages.push('...');
+                  pages.push(totalPages);
+                }
+              }
+
+              return pages.map((page, index) => {
+                if (page === '...') {
+                  return (
+                    <span key={`ellipsis-${index}`} className="g-welcome-pagination-text px-1">
+                      ...
+                    </span>
+                  );
+                }
+
+                const pageNum = page as number;
+                const isActive = currentPage === pageNum;
+
+                return (
+                  <button
+                    type="button"
+                    key={pageNum}
+                    className={`g-welcome-pagination-btn ${isActive ? 'active' : ''}`}
+                    onClick={() => setCurrentPage(pageNum)}
+                  >
+                    {pageNum}
+                  </button>
+                );
+              });
+            })()}
+          </div>
+
           <button
-            className="g-welcome-pagination-btn px-3 py-1 rounded transition-colors"
+            type="button"
+            className="g-welcome-pagination-btn"
             onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
             disabled={currentPage === totalPages}
           >
-            下一页
+            <ChevronRight size={16} />
           </button>
         </div>
       )}

package/src/utils/testconfigs/index.ts

@@ -1,5 +1,5 @@
 const token =
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJHSUVOLVJBRyIsImF1ZCI6IkpJQUJJTkJJTjAwIiwidXNlcklkIjoxMjQzLCJ1c2VyTmFtZSI6IkpJQUJJTkJJTjAwIiwic3ViIjoibWl4ZWRRdWFudHVtIiwiZXhwIjoxNzYyOTE0NTAyLCJpYXQiOjE3NjI4MjgxMDJ9.K8A7FNhhJXJyeBfpYfpTbmUX65ur5c1tax4afv2UNBs';
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJHSUVOLVJBRyIsImF1ZCI6IkpJQUJJTkJJTjAwIiwidXNlcklkIjoxMjQzLCJ1c2VyTmFtZSI6IkpJQUJJTkJJTjAwIiwic3ViIjoibWl4ZWRRdWFudHVtIiwiZXhwIjoxNzYyOTMxOTA4LCJpYXQiOjE3NjI4NDU1MDh9.mqneHIhe-T0isGc9JrdZDpWrzaogBqec13XBVlWsZOQ';
 export const rag_dev_server = {
   token,