1

src/components/bs-comp/cardComponent/index.tsx

@@ -60,8 +60,11 @@ export const gradients = [
 // 'bg-fuchsia-700',
 // 'bg-pink-600',
 // 'bg-rose-600'
-export function TitleIconBg({ id, className = '', children = <SkillIcon /> }) {
-  return <div className={cname(`flex justify-center items-center cursor-pointer ${gradients[parseInt(id + '', 16) % gradients.length]}`, className)} style={{borderRadius:"7px"}}>{children}</div>
+export function TitleIconBg({ img, id, className = '', children = <SkillIcon /> }) {
+  if(img) return <div className={cname(`flex justify-center items-center cursor-pointer overflow-hidden`, className)} style={{borderRadius:"7px"}}>
+    {children}
+  </div>
+  return <div className={cname(`flex justify-center items-center cursor-pointer ${id!="" && gradients[parseInt(id + '', 16) % gradients.length]}`, className)} style={{borderRadius:"7px"}}>{children}</div>
 }
 
 export default function CardComponent<T>({

src/components/bs-comp/chatComponent/ChatInput.tsx

@@ -232,11 +232,11 @@ export default function ChatInput({ clear, form, questions, inputForm, wsUrl, on
     }
 
     return <div className="absolute bottom-0 w-full  bg-[#fff] dark:bg-[#000000]">
-        <div className={`relative`}>
+        <div className={`relative pt-[10px]`}>
             {/* form */}
             {
                 formShow && <div className="relative">
-                    <div className="absolute left-0 border bottom-2 bg-[#fff] px-4 py-2 rounded-md w-[50%] min-w-80">
+                    <div className="absolute left-0 bottom-2 bg-[#1a1a1a] px-4 py-2 rounded-md w-[50%] min-w-80">
                         {inputForm}
                     </div>
                 </div>
@@ -296,7 +296,7 @@ export default function ChatInput({ clear, form, questions, inputForm, wsUrl, on
                     }
                 }}
             ></textarea>
-            <p className="w-[100%] text-center text-[#666666]">内容由AI生成，仅供参考</p>
+            {/* <p className="w-[100%] text-center text-[#666666]">内容由AI生成，仅供参考</p> */}
         </div>
         <p className="text-center text-sm pt-2 pb-4 text-gray-400">{appConfig.dialogTips}</p>
     </div>

src/components/bs-comp/chatComponent/MessageBs.tsx

@@ -11,6 +11,17 @@ import remarkMath from "remark-math";
 import MessageButtons from "./MessageButtons";
 import SourceEntry from "./SourceEntry";
 import { useMessageStore } from "./messageStore";
+import robot from "../../../assets/robot.png";
+import robotU from "../../../assets/robotU.png";
+import robot2 from "../../../assets/robot2.png";
+import robot3 from "../../../assets/robot3.png";
+import btnEdit from "../../../assets/chat/btn-edit.png";
+import btnReSend from "../../../assets/chat/btn-reSend.png";
+import btnDel from "../../../assets/chat/btn-del.png";
+import npcIcon from "../../../assets/npc/npcIcon.png";
+import nengliIcon from "../../../assets/npc/nengliIcon.png";
+import { TitleIconBg } from "../cardComponent";
+import Thumbs from "@/pages/ChatAppPage/components/Thumbs";
 
 // 颜色列表
 const colorList = [
@@ -76,27 +87,51 @@ export default function MessageBs({ data, onUnlike = () => { }, onSource }: { da
     }
 
     const chatId = useMessageStore(state => state.chatId)
-
+    console.log(data)
     return <div className="flex w-full py-1">
         <div className="w-fit max-w-[90%]">
             {data.sender && <p className="text-gray-600 text-xs mb-2">{data.sender}</p>}
-            <div className="ml-[14px] min-h-8 px-6 py-4 rounded-2xl bg-[#13110D] dark:bg-[#13110D] text-[#fff]">
-                <div className="flex gap-2">
+            <div className="flex items-start avatarZk">
+                {/* {(data.flow_id == "06b1d374-ba97-46e6-8782-c56dec8dcc17" || data.flow_id == "ed8e21f6-9757-43d0-b076-8c6e81bb0580") && <img src={robot2} className="w-[50px]" alt=""/>}
+                {data.flow_id == "ca214b41-2b73-4585-b172-bf1e546cf6ec" && <img src={robot3} className="w-[50px]" alt=""/>}
+                {(data.flow_id != "06b1d374-ba97-46e6-8782-c56dec8dcc17" && data.flow_id != "ed8e21f6-9757-43d0-b076-8c6e81bb0580" && data.flow_id != "ca214b41-2b73-4585-b172-bf1e546cf6ec") && <img src={robot} className="w-[50px]" alt=""/>} */}
+                {data.flow_id && <TitleIconBg className="w-[40px] h-[40px]" img={data.avatar_img} id={data.avatar_color ? data.avatar_color : data.flow_id} ><img src={data.avatar_img ? data.avatar_img : (data.flow_type == "assistant" ? npcIcon : nengliIcon)} alt="" /></TitleIconBg>}
+
+                <div ref={messageRef} className={`min-h-8 min-w-[110px] max-w-[50vw] ml-[10px] ${data.id && data.end && 'pb-8'}`}>
+                    <div className="chat-start-zk relative">
+                        {data.message.toString() ? mkdown : <span className="loading loading-ring loading-md"></span>}
+                        {/* @user */}
+                        {data.receiver && <p className="text-blue-500 text-sm">@ {data.receiver.user_name}</p>}
+                        {/* 光标 */}
+                        {data.message.toString() && !data.end && <div className="animate-cursor absolute w-2 h-5 ml-1 bg-gray-600" style={{ left: cursor.x, top: cursor.y }}></div>}
+                    </div>
+                    
+                    {/* 赞 踩 */}
+                    {!!data.id && data.end && <Thumbs
+                        id={data.id}
+                        data={data.liked}
+                        onCopy={handleCopyMessage}
+                        onDislike={onUnlike}
+                        className="chat-start-btn"
+                        ></Thumbs>
+                    }
+                </div>
+                {/* <div className="flex gap-2">
                     <div className="w-6 h-6 min-w-6 flex justify-center items-center rounded-full" style={{ background: avatarColor }} ><AvatarIcon /></div>
                     {data.message.toString() ?
                         <div ref={messageRef} className="text-sm max-w-[calc(100%-24px)]">
-                            {mkdown}
+                            {mkdown} */}
                             {/* @user */}
-                            {data.receiver && <p className="text-blue-500 text-sm">@ {data.receiver.user_name}</p>}
+                            {/* {data.receiver && <p className="text-blue-500 text-sm">@ {data.receiver.user_name}</p>} */}
                             {/* 光标 */}
                             {/* {data.message.toString() && !data.end && <div className="animate-cursor absolute w-2 h-5 ml-1 bg-gray-600" style={{ left: cursor.x, top: cursor.y }}></div>} */}
-                        </div>
+                        {/* </div>
                         : <div><LoadIcon className="text-gray-400" /></div>
                     }
-                </div>
+                </div> */}
             </div>
             {/* 附加信息 */}
-            {
+            {/* {
                 !!data.id && data.end && <div className="flex justify-between mt-2">
                     <SourceEntry
                         extra={data.extra}
@@ -115,7 +150,7 @@ export default function MessageBs({ data, onUnlike = () => { }, onSource }: { da
                         onCopy={handleCopyMessage}
                     ></MessageButtons>
                 </div>
-            }
+            } */}
         </div>
     </div>
 };

src/components/bs-comp/chatComponent/MessagePanne.tsx

@@ -56,7 +56,7 @@ export default function MessagePanne({ useName, guideWord, loadMore }) {
         return () => messagesRef.current?.removeEventListener('scroll', handleScroll)
     }, [messagesRef.current, messages, chatId]);
 
-    return <div id="message-panne" ref={messagesRef} className="h-full overflow-y-auto scrollbar-hide pt-12 pb-60">
+    return <div id="message-panne" ref={messagesRef} className="h-full overflow-y-auto scrollbar-hide pt-[50px] pb-60 px-3">
         {guideWord && <MessageBs
             key={9999}
             data={{ message: guideWord, isSend: false, chatKey: '', end: true, user_name: '' }} />}

src/components/bs-comp/chatComponent/MessageSystem.tsx

@@ -24,7 +24,7 @@ export default function MessageSystem({ data }) {
         () => (
             data.thought && <ReactMarkdown
                 linkTarget="_blank"
-                className="bs-mkdown text-gray-600 dark:text-[white] inline-block break-all max-w-full text-sm [&>pre]:text-wrap"
+                className="markdown text-gray-600 inline-block break-all max-w-full text-sm"
             >
                 {data.thought.toString()}
             </ReactMarkdown>
@@ -33,9 +33,10 @@ export default function MessageSystem({ data }) {
     )
 
     const border = { system: 'border-slate-500', question: 'border-amber-500', processing: 'border-cyan-600', answer: 'border-lime-600', report: 'border-slate-500', guide: 'border-none' }
+    const style = { system: 'style-system', question: 'style-question', processing: 'border-cyan-600', answer: 'style-answer', report: 'style-system' }
 
     return <div className="py-1">
-        <div className={`relative rounded-sm px-6 py-4 border text-sm ${data.category === 'guide' ? 'bg-[#EDEFF6]' : 'bg-slate-50'} ${border[data.category || 'system']}`}>
+        <div className={`log rounded-xl whitespace-pre-wrap mt-[14px] relative ${style[data.category || 'system']}`}>
             {logMkdown}
             {data.category === 'report' && <CopyIcon className=" absolute right-4 top-2 cursor-pointer" onClick={(e) => handleCopy(e.target.parentNode)}></CopyIcon>}
         </div>

src/components/bs-comp/chatComponent/MessageUser.tsx

@@ -3,6 +3,9 @@ import { ChatMessageType } from "@/types/chat";
 import { MagnifyingGlassIcon, Pencil2Icon, ReloadIcon } from "@radix-ui/react-icons";
 import { useContext } from "react";
 import { useMessageStore } from "./messageStore";
+import robotU from "../../../assets/robotU.png";
+import btnEdit from "../../../assets/chat/btn-edit.png";
+import btnReSend from "../../../assets/chat/btn-reSend.png";
 
 export default function MessageUser({ useName, data }: { data: ChatMessageType }) {
     const msg = data.message[data.chatKey]
@@ -25,16 +28,33 @@ export default function MessageUser({ useName, data }: { data: ChatMessageType }
     }
 
     return <div className="flex justify-end w-full py-1">
-        <div className="w-fit min-h-8 max-w-[90%]">
+        <div className="flex items-start avatarZk">
+            <div className="mr-[10px]">
+                <div className="chat-end-zk">
+                    {/* {chat.category === 'loading' && <span className="loading loading-spinner loading-xs mr-4 align-middle"></span>} */}
+                    {msg}
+                </div>
+                
+                <div className='chat-end-btn'>
+                    {!running && <img src={btnEdit} onClick={() => handleResend(false)} className="w-[28px] cursor-pointer" alt=""/>}
+                    {!running && <img src={btnReSend} onClick={() => handleResend(true)} className="w-[28px] cursor-pointer" alt=""/>}
+                    {/* <img src={btnDel} className="w-[28px] cursor-pointer" alt=""/> */}
+                    {/* {!showSearch && <Search size={18} className="cursor-pointer hover:text-blue-600 text-blue-400" onClick={() => onSearch(chat.message[chat.chatKey])}></Search>} */}
+                </div>
+            </div>
+            {/* <p className="mr-[20px] text-[14px]">{userName}</p> */}
+            <img src={robotU} className="w-[50px]" alt=""/>
+        </div>
+        {/* <div className="w-fit min-h-8 max-w-[90%]">
             {useName && <p className="text-gray-600 text-xs mb-2 text-right">{useName}</p>}
             <div className="mr-[14px] rounded-2xl px-6 py-4 bg-[#EEF2FF] dark:bg-[#333A48]">
                 <div className="flex gap-2 ">
                     <div className="text-[#0D1638] dark:text-[#CFD5E8] text-sm break-all whitespace-break-spaces">{msg}</div>
                     <div className="w-6 h-6 min-w-6"><img src="/user.png" alt="" /></div>
                 </div>
-            </div>
+            </div> */}
             {/* 附加信息 */}
-            {
+            {/* {
                 // 数组类型的 data通常是文件上传消息，不展示附加按钮
                 !Array.isArray(data.message.data) && <div className="flex justify-between mt-2 mr-[14px]">
                     <span></span>
@@ -45,6 +65,6 @@ export default function MessageUser({ useName, data }: { data: ChatMessageType }
                     </div>
                 </div>
             }
-        </div>
+        </div> */}
     </div>
 };

src/components/bs-comp/chatComponent/RunLog.tsx

@@ -41,7 +41,7 @@ export default function RunLog({ data }) {
     return <div className="py-1">
         <div className="rounded-sm border">
             <div className="flex justify-between items-center px-4 py-2 cursor-pointer" onClick={() => setOpen(!open)}>
-                <div className="flex items-center font-bold gap-2 text-sm">
+                <div className="flex items-center font-bold gap-2 text-sm text-[#fff]">
                     {
                         data.end ? <ToastIcon type={lost ? 'error' : 'success'} /> :
                             <LoadIcon className="text-primary duration-300" />
@@ -50,7 +50,7 @@ export default function RunLog({ data }) {
                 </div>
                 <CaretDownIcon className={open && 'rotate-180'} />
             </div>
-            <div className={cname('bg-gray-100 px-4 py-2 text-gray-500 overflow-hidden text-sm ', open ? 'h-auto' : 'h-0 p-0')}>
+            <div className={cname('bg-[#0B1F26] px-4 py-2 text-[#ccc] overflow-hidden text-sm ', open ? 'h-auto' : 'h-0 p-0')}>
                 <p>{data.thought}</p>
             </div>
         </div>

src/components/bs-comp/chatComponent/messageStore.ts

@@ -26,8 +26,8 @@ type State = {
 }
 
 type Actions = {
-    loadHistoryMsg: (flowid: string, chatId: string) => Promise<void>;
-    loadMoreHistoryMsg: (flowid: string) => Promise<void>;
+    loadHistoryMsg: (flowid: string, chatId: string, flow_type: string) => Promise<void>;
+    loadMoreHistoryMsg: (flowid: string, flow_type: string) => Promise<void>;
     destory: () => void;
     createSendMsg: (inputs: any, inputKey?: string) => void;
     createWsMsg: (data: any) => void;
@@ -81,20 +81,21 @@ export const useMessageStore = create<State & Actions>((set, get) => ({
     setShowGuideQuestion(bln: boolean) {
         set({ showGuideQuestion: bln })
     },
-    async loadHistoryMsg(flowid, chatId) {
-        const res = await getChatHistory(flowid, chatId, 30, 0)
+    async loadHistoryMsg(flowid, chatId, flow_type) {
+        console.log(111)
+        const res = await getChatHistory(flowid, chatId, 30, 0, flow_type)
         const msgs = handleHistoryMsg(res)
         currentChatId = chatId
         set({ historyEnd: false, messages: msgs.reverse() })
     },
-    async loadMoreHistoryMsg(flowid) {
+    async loadMoreHistoryMsg(flowid, flow_type) {
         if (get().running) return // 会话进行中禁止加载more历史
         if (get().historyEnd) return // 没有更多历史纪录
         const chatId = get().chatId
         const prevMsgs = get().messages
         // 最后一条消息id不存在，忽略 loadmore
         if (!prevMsgs[0]?.id) return
-        const res = await getChatHistory(flowid, chatId, 10, prevMsgs[0]?.id || 0)
+        const res = await getChatHistory(flowid, chatId, 10, prevMsgs[0]?.id || 0, flow_type)
         // 过滤非同一会话消息
         if (res[0]?.chat_id !== currentChatId) {
             return console.warn('loadMoreHistoryMsg chatId not match, ignore')

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

@@ -5,10 +5,20 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { SearchInput } from "../../bs-ui/input";
 import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "../../bs-ui/sheet";
-import CardComponent from "../cardComponent";
+import CardComponent, { TitleIconBg } from "../cardComponent";
 import { SkillIcon } from "@/components/bs-icons/skill";
 import { AssistantIcon } from "@/components/bs-icons/assistant";
 import { useTranslation } from "react-i18next";
+import borderR from "../../../assets/npc/border-r.png";
+import { SpotlightCard } from "@lobehub/ui";
+import { Flexbox } from 'react-layout-kit';
+import robot from "../../../assets/robot.png";
+import robot2 from "../../../assets/robot2.png";
+import robot3 from "../../../assets/robot3.png";
+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";
 
 export default function SkillChatSheet({ children, onSelect }) {
     const [open, setOpen] = useState(false)
@@ -32,19 +42,71 @@ export default function SkillChatSheet({ children, onSelect }) {
         return allDataRef.current.filter(el => el.name.toLowerCase().includes(keyword.toLowerCase()))
     }, [keyword])
 
+    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>
+                        <div>
+                            {/* <img src={robot} className="w-[160px]" alt=""/> */}
+                            {(item.id == "06b1d374-ba97-46e6-8782-c56dec8dcc17" || item.id == "ed8e21f6-9757-43d0-b076-8c6e81bb0580") && <img src={robot2} className="w-[160px]" alt=""/>}
+                            {item.id == "ca214b41-2b73-4585-b172-bf1e546cf6ec" && <img src={robot3} className="w-[160px]" 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-[160px]" alt=""/>}
+                        </div>
+                    </span>
+                </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>
+            <p className="mt-[10px] test-[13px]">{item.desc}</p>
+            <div className={`absolute right-0 top-0 w-[41px] h-[16px] flex justify-center items-center text-[9px] ${item.flow_type === 'flow' ? 'text-[#333333] bg-[#FFD54C]' : 'text-[#FFFFFF] bg-[#2586FF]'}`} style={{borderRadius:"0px 10px 0px 7px",fontWeight:"bold"}}>
+                {item.flow_type === 'flow' ? '能力' : 'NPC'}
+            </div>
+        </Flexbox>
+      );
+
     return <Sheet open={open} onOpenChange={setOpen}>
         <SheetTrigger asChild>
             {children}
         </SheetTrigger>
-        <SheetContent className="sm:min-w-[966px] bg-gray-100">
+        <SheetContent className="sm:min-w-[1000px] bg-[#1A1A1A]">
             <div className="flex h-full" onClick={e => e.stopPropagation()}>
-                <div className="w-fit p-6">
-                    <SheetTitle>{t('chat.dialogueSelection')}</SheetTitle>
-                    <SheetDescription>{t('chat.chooseSkillOrAssistant')}</SheetDescription>
-                    <SearchInput value={keyword} placeholder={t('chat.search')} className="my-6" onChange={(e) => setKeyword(e.target.value)} />
+                <div className="xinDuiHua-boxR">
+                    {/* <img src={borderR} className="w-[30px] h-[100%]" alt="" /> */}
                 </div>
-                <div className="flex-1 min-w-[696px] bg-[#fff] p-5 pt-12 h-full flex flex-wrap gap-1.5 overflow-y-auto scrollbar-hide content-start">
-                    {
+                <div className="w-fit p-6">
+                    <SheetTitle>选择对话</SheetTitle>
+                    <SheetDescription className="text-[#999999]">选择一个您想使用的上线NPC或能力</SheetDescription>
+                    <SearchInput value={keyword} placeholder="搜索" className="my-6" onChange={(e) => setKeyword(e.target.value)} />
+                </div>
+                <div className="min-w-[696px] overflow-y-auto bg-[#000000] scrollbar-hide skillSheet">
+                    {/* {
                         options.length ? options.map((flow, i) => (
                             <CardComponent key={i}
                                 id={i + 1}
@@ -55,7 +117,7 @@ export default function SkillChatSheet({ children, onSelect }) {
                                 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' ? '技能' : '助手'}
+                                        {flow.flow_type === 'flow' ? '技能' : 'NPC'}
                                     </Badge>
                                 }
                                 onClick={() => { onSelect(flow); setOpen(false) }}
@@ -64,7 +126,8 @@ export default function SkillChatSheet({ children, onSelect }) {
                             <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"/>
                 </div>
             </div>
         </SheetContent>

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

@@ -19,6 +19,7 @@ import robot2 from "../../../assets/robot2.png";
 import robot3 from "../../../assets/robot3.png";
 import zidingyi1 from "../../../assets/npc/zidingyi1.png";
 import zidingyi2 from "../../../assets/npc/zidingyi2.png";
+import borderR from "../../../assets/npc/border-r.png";
 
 export default function SkillSheet({ select, children, onSelect }) {
   const [keyword, setKeyword] = useState("");
@@ -107,9 +108,12 @@ export default function SkillSheet({ select, children, onSelect }) {
   return (
     <Sheet>
       <SheetTrigger asChild>{children}</SheetTrigger>
-      <SheetContent className="bg-[#1A1A1A] sm:min-w-[966px]">
+      <SheetContent className="bg-[#1A1A1A] sm:min-w-[1000px]">
         <div className="flex h-full" onClick={(e) => e.stopPropagation()}>
-          <div className="w-[270px] p-6">
+          <div className="xinDuiHua-boxR">
+            {/* <img src={borderR} className="w-[30px] h-[100%]" alt="" /> */}
+          </div>
+          <div className="p-6">
             <SheetTitle>{t("build.addSkill")}</SheetTitle>
             <SearchInput
               value={keyword}

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

@@ -11,6 +11,7 @@ import sousuo from "../../../assets/npc/sousuo.png";
 import gongjuAdd from "../../../assets/npc/gongjuAdd.png";
 import gongjuIcon from "../../../assets/npc/gongjuIcon.png";
 import gongjuIcon1 from "../../../assets/npc/gongjuIcon1.png";
+import borderR from "../../../assets/npc/border-r.png";
 
 export default function ToolsSheet({ select, onSelect, children }) {
     const { t } = useTranslation()
@@ -38,8 +39,11 @@ export default function ToolsSheet({ select, onSelect, children }) {
             <SheetTrigger asChild>
                 {children}
             </SheetTrigger>
-            <SheetContent className="w-[1000px] sm:max-w-[1000px] bg-[#121212]">
+            <SheetContent className="w-[1000px] sm:max-w-[1000px] bg-[#1a1a1a]">
                 <div className="flex h-full" onClick={e => e.stopPropagation()}>
+                    <div className="xinDuiHua-boxR">
+                        {/* <img src={borderR} className="w-[30px] h-[100%]" alt="" /> */}
+                    </div>
                     <div className="w-fit p-6">
                         <SheetTitle>{t('build.addTool')}</SheetTitle>
                         <div className="relative mt-[14px]">
@@ -67,7 +71,7 @@ export default function ToolsSheet({ select, onSelect, children }) {
                             >
                                 {/* <PersonIcon /> */}
                                 {type === "default" ? <img src={gongjuIcon1} className="w-[14px]" alt="" /> : <img src={gongjuIcon} className="w-[14px]" alt="" />}
-                                <span className="ml-[8px] text-[#999999]">内置工具</span>
+                                <span className={`ml-[8px] text-[#999999] ${type === "default" && "text-[#FFD025]"}`}>内置工具</span>
                             </div>
                             <div
                                 className={`flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:bg-muted-foreground/10 transition-all duration-200 mt-1 ${type === 'custom' && 'bg-[#2A271D] text-[#FFD54C]'}`}
@@ -75,7 +79,7 @@ export default function ToolsSheet({ select, onSelect, children }) {
                             >
                                 {type === "custom" ? <img src={gongjuIcon1} className="w-[14px]" alt="" /> : <img src={gongjuIcon} className="w-[14px]" alt="" />}
                                 {/* <StarFilledIcon /> */}
-                                <span className="ml-[8px] text-[#999999]">自定义工具</span>
+                                <span className={`ml-[8px] text-[#999999] ${type === "custom" && "text-[#FFD025]"}`}>自定义工具</span>
                             </div>
                         </div>
                     </div>