1

src/components/bs-comp/sheets/SkillChatSheet.tsx

@@ -19,6 +19,8 @@ import zidingyi1 from "../../../assets/npc/zidingyi1.png";
 import zidingyi2 from "../../../assets/npc/zidingyi2.png";
 import npcIcon from "../../../assets/npc/npcIcon.png";
 import nengliIcon from "../../../assets/npc/nengliIcon.png";
+import { useDebounce } from "@/util/hook";
+import LoadMore from "../loadMore";
 
 export default function SkillChatSheet({ children, onSelect }) {
     const [open, setOpen] = useState(false)
@@ -30,34 +32,45 @@ export default function SkillChatSheet({ children, onSelect }) {
     const [keyword, setKeyword] = useState(' ')
     const allDataRef = useRef([])
 
-    useEffect(() => {
-        open && getChatOnlineApi().then(res => {
-            allDataRef.current = res
-            setKeyword('')
+    const pageRef = useRef(1)
+    const searchRef = useRef('')
+    const [options, setOptions] = useState<any>([])
+
+    const loadData = (more = false) => {
+        open && getChatOnlineApi(pageRef.current, searchRef.current).then(res => {
+            setOptions(opts => more ? [...opts, ...res] : res)
         })
+    }
+    const debounceLoad = useDebounce(loadData, 600, false)
+
+    useEffect(() => {
+        // open && getChatOnlineApi().then(res => {
+        //     allDataRef.current = res
+        //     setKeyword('')
+        // })
         // setKeyword(' ')
+        pageRef.current = 1
+        searchRef.current = ''
+        loadData()
     }, [open])
 
-    const options = useMemo(() => {
-        return allDataRef.current.filter(el => el.name.toLowerCase().includes(keyword.toLowerCase()))
-    }, [keyword])
+    // const options = useMemo(() => {
+    //     return allDataRef.current.filter(el => el.name.toLowerCase().includes(keyword.toLowerCase()))
+    // }, [keyword])
+
+    const handleSearch = (e) => {
+        pageRef.current = 1
+        searchRef.current = e.target.value
+        debounceLoad()
+    }
+
+    const handleLoadMore = () => {
+        pageRef.current++
+        loadData(true)
+    }
 
     const render = (item: any) => (
         <Flexbox align={'flex-start'} className={`selectNpcFlexbox relative`} onClick={() => { onSelect(item); setOpen(false) }}>
-          {/* <Avatar size={24} src={item.favicon} style={{ flex: 'none' }} /> */}
-          {/* <Flexbox>
-            <div style={{ fontSize: 15, fontWeight: 600 }}>{item.name}</div>
-            <div style={{ opacity: 0.6 }}>{item.name}</div>
-          </Flexbox> */}
-            {/* <Card key={item.id} className="w-[300px]  overflow-hidden cursor-pointer" onClick={() => onSelect(item)}>
-                <CardHeader>
-                    <CardTitle className=" flex items-center gap-2">
-                        <div className={"rounded-full w-[30px] h-[30px] " + gradients[parseInt(item.id, 16) % gradients.length]}></div>
-                        <span>{item.name}</span>
-                    </CardTitle>
-                    <CardDescription className="">{item.description}</CardDescription>        
-                </CardHeader>
-            </Card> */}
             <div className="npcInfoItemBg">
                 <span>
                     <span>
@@ -68,16 +81,11 @@ export default function SkillChatSheet({ children, onSelect }) {
                 </span>
             </div>
             <div>
-                {/* {(item.id == "06b1d374-ba97-46e6-8782-c56dec8dcc17" || item.id == "ed8e21f6-9757-43d0-b076-8c6e81bb0580") && <img src={robot2} className="w-[42px]" alt=""/>}
-                {item.id == "ca214b41-2b73-4585-b172-bf1e546cf6ec" && <img src={robot3} className="w-[42px]" alt=""/>}
-                {(item.id != "06b1d374-ba97-46e6-8782-c56dec8dcc17" && item.id != "ed8e21f6-9757-43d0-b076-8c6e81bb0580" && item.id != "ca214b41-2b73-4585-b172-bf1e546cf6ec") && <img src={robot} className="w-[42px]" alt=""/>} */}
-                {/* <img src={robot} className="w-[42px]" alt=""/> */}
                 <TitleIconBg className="w-[40px] h-[40px] min-w-[40px]" img={item.avatar_img} id={item.avatar_color ? item.avatar_color : item.id} ><img src={item.avatar_img ? item.avatar_img : (item.flow_type == "assistant" ? npcIcon : nengliIcon)} alt="" /></TitleIconBg>
                 <div>
                     <p>{item.name}</p>
                     <div>
-                        {/* <div>绘画类</div>
-                        <div>绘画类</div> */}
+                     
                     </div>
                 </div>
             </div>
@@ -100,31 +108,12 @@ export default function SkillChatSheet({ children, onSelect }) {
                 <div className="w-[280px] p-6">
                     <SheetTitle>选择对话</SheetTitle>
                     <SheetDescription className="text-[#999999]">选择一个您想使用的上线NPC或能力</SheetDescription>
-                    <SearchInput value={keyword} placeholder="搜索" className="my-6" onChange={(e) => setKeyword(e.target.value)} />
+                    {/* <SearchInput value={keyword} placeholder="搜索" className="my-6" onChange={(e) => setKeyword(e.target.value)} /> */}
+                    <SearchInput placeholder="搜索" className="my-6" onChange={handleSearch} />
                 </div>
                 <div className="w-[690px] overflow-y-auto bg-[#000000] scrollbar-hide skillSheet">
-                    {/* {
-                        options.length ? options.map((flow, i) => (
-                            <CardComponent key={i}
-                                id={i + 1}
-                                data={flow}
-                                title={flow.name}
-                                description={flow.desc}
-                                type="sheet"
-                                icon={flow.flow_type === 'flow' ? SkillIcon : AssistantIcon}
-                                footer={
-                                    <Badge className={`absolute right-0 bottom-0 rounded-none rounded-br-md ${flow.flow_type === 'flow' && 'bg-gray-950'}`}>
-                                        {flow.flow_type === 'flow' ? '技能' : 'NPC'}
-                                    </Badge>
-                                }
-                                onClick={() => { onSelect(flow); setOpen(false) }}
-                            />
-                        )) : <div className="flex flex-col items-center justify-center pt-40 w-full">
-                            <p className="text-sm text-muted-foreground mb-3">{t('build.empty')}</p>
-                            <Button className="w-[200px]" onClick={() => navigate('/build/assist')}>{t('build.onlineSA')}</Button>
-                        </div>
-                    } */}
                     <SpotlightCard items={options} renderItem={render} className="mt-[14px] skillSheetSpotlightCard"/>
+                    <LoadMore onScrollLoad={handleLoadMore} />
                 </div>
             </div>
         </SheetContent>