Explorar o código

添加可选名称参数到FetchAppListApiParams类型,并优化搜索输入框的展开状态逻辑

刘博博 hai 4 días
pai
achega
71eaa13c48
Modificáronse 2 ficheiros con 39 adicións e 5 borrados
  1. 1 0
      src/apis/index.ts
  2. 38 5
      src/pages/deepseek/questionAnswer/list/index.tsx

+ 1 - 0
src/apis/index.ts

@@ -23,6 +23,7 @@ export type FetchAppListApiParams = {
     typeId: any,
     projectId: any,
     keyword: string,
+    name?: string,
 };
 
 export type FetchKnowledgeLibListApiParams = {

+ 38 - 5
src/pages/deepseek/questionAnswer/list/index.tsx

@@ -138,6 +138,9 @@ const QuestionAnswerList: React.FC = () => {
   // 新手引导整体可见性(持久化到 localStorage)
   const [showGuide, setShowGuide] = React.useState<boolean>(() => localStorage.getItem('appGuideHidden') !== 'true');
   const hideGuide = () => { localStorage.setItem('appGuideHidden', 'true'); setShowGuide(false); };
+  // 搜索输入框展开状态
+  const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
+  const searchWrapperRef = React.useRef<HTMLDivElement>(null);
 
   const appApi = {
     fetchList: async (typeId: any, projectId: any) => {
@@ -153,6 +156,7 @@ const QuestionAnswerList: React.FC = () => {
           typeId: typeId,
           projectId: projectId?.toString(),
           keyword: keyword,
+          name: keyword,
         })
         const list = res.rows.map((item: any) => {
           return {
@@ -568,19 +572,48 @@ const QuestionAnswerList: React.FC = () => {
             {/*  }*/}
             {/*</Select>*/}
           {/* </FormItem> */}
-          {/*<FormItem name='keyword'>*/}
-          {/*  <Input placeholder='请输入关键字' allowClear />*/}
-          {/*</FormItem>*/}
           <FormItem>
             <Space size={12}>
-              <Tooltip title="查询">
+              <div 
+                className="search-expand-wrapper"
+                ref={searchWrapperRef}
+                onMouseEnter={() => setIsSearchExpanded(true)}
+                onMouseLeave={(e) => {
+                  // 如果输入框有焦点,不收起
+                  const input = searchWrapperRef.current?.querySelector('input');
+                  if (input !== document.activeElement) {
+                    setIsSearchExpanded(false);
+                  }
+                }}
+              >
+                <div className={`search-input-container ${isSearchExpanded ? 'expanded' : ''}`}>
+                  <FormItem name='keyword' style={{ marginBottom: 0 }}>
+                    <Input
+                      className="search-input"
+                      placeholder="请输入关键字"
+                      allowClear
+                      prefix={<SearchOutlined />}
+                      onPressEnter={handleClickSearch}
+                      onFocus={() => setIsSearchExpanded(true)}
+                      onBlur={(e) => {
+                        // 延迟检查,避免点击按钮时立即收起
+                        setTimeout(() => {
+                          if (!searchWrapperRef.current?.matches(':hover')) {
+                            setIsSearchExpanded(false);
+                          }
+                        }, 200);
+                      }}
+                    />
+                  </FormItem>
+                </div>
                 <Button
                   type='primary'
                   shape="circle"
                   onClick={handleClickSearch}
                   icon={<SearchOutlined />}
+                  className="search-button"
                 />
-              </Tooltip>
+              </div>
               <Tooltip title="重置">
                 <Button
                   shape="circle"