From fe55fae1f737f6f3978870a8cfc9771f2edb93c4 Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Thu, 24 Aug 2023 14:19:39 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Send.tsx                       |   2 +-
 .../conversations/ConversationSidebarItem.tsx |   8 +-
 src/components/header/Header.tsx              |   4 +-
 src/pages/chat/components/dataList.tsx        | 103 +++++++++++-------
 src/pages/chat/components/iframe.tsx          |   2 +-
 src/pages/chat/components/listItem.tsx        |  17 ++-
 src/pages/chat/css/list.css                   |   4 +-
 7 files changed, 86 insertions(+), 54 deletions(-)

diff --git a/src/components/Send.tsx b/src/components/Send.tsx
index 895e4ef..092a1d6 100644
--- a/src/components/Send.tsx
+++ b/src/components/Send.tsx
@@ -197,7 +197,7 @@ export default () => {
   }
 
   return (
-    <div class={`relative shrink-0 border-t border-base pb-[env(safe-area-inset-bottom)] transition transition-colors duration-300  ${stateRootClass()} ${footerClass()}`}>
+    <div id='infoSend' class={`relative shrink-0 border-t border-base pb-[env(safe-area-inset-bottom)] transition transition-colors duration-300  ${stateRootClass()} ${footerClass()}`}>
       <div class={`relative transition transition-height duration-240 ${stateHeightClass()}`}>
         <Switch fallback={<EmptyState />}>
           <Match when={stateType() === 'login'}>
diff --git a/src/components/conversations/ConversationSidebarItem.tsx b/src/components/conversations/ConversationSidebarItem.tsx
index 6158059..3aff7d8 100644
--- a/src/components/conversations/ConversationSidebarItem.tsx
+++ b/src/components/conversations/ConversationSidebarItem.tsx
@@ -18,6 +18,12 @@ export default ({ instance }: Props) => {
 
   const handleClick = () => {
     chatShow.set(false)
+    let infoHeader = document.getElementById("infoHeader");
+    let infoSend = document.getElementById("infoSend");
+    if (!chatShow.get()) {
+      infoHeader.style.display = "flex";
+      infoSend.style.display = "flex";
+    }
     currentConversationId.set(instance.id)
     showConversationSidebar.set(false)
   }
@@ -38,7 +44,7 @@ export default ({ instance }: Props) => {
       <div class="fcc w-8 h-8 rounded-full text-xl shrink-0">
         {instance.icon ? instance.icon : <div class="text-base i-carbon-chat" />}
       </div>
-      <div class="flex-1 truncate text-sm">{ instance.name || t('conversations.untitled') }</div>
+      <div class="flex-1 truncate text-sm">{instance.name || t('conversations.untitled')}</div>
       <div class={isTouchDevice ? '' : 'hidden group-hover:block'}>
         <div
           class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 8ef24f0..534b828 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -16,7 +16,9 @@ export default () => {
     })
   })
   return (
-    <header onDblClick={scrollController().scrollToTop} class="shrink-0 absolute top-0 left-0 right-0 fi justify-between border-b border-base h-14 px-4">
+    <header onDblClick={scrollController().scrollToTop} 
+    id='infoHeader'
+    class="shrink-0 absolute top-0 left-0 right-0 fi justify-between border-b border-base h-14 px-4">
       <div class="fi overflow-hidden">
         <div
           class="fcc p-2 rounded-md text-xl hv-foreground md:hidden"
diff --git a/src/pages/chat/components/dataList.tsx b/src/pages/chat/components/dataList.tsx
index e5e3d4a..ffc1b2c 100644
--- a/src/pages/chat/components/dataList.tsx
+++ b/src/pages/chat/components/dataList.tsx
@@ -6,8 +6,9 @@ import { fetchData } from '../../../http/api'
 import { addConversation } from '@/stores/conversation'
 import { showConversationEditModal } from '@/stores/ui'
 import { conversationMapSortList } from '@/stores/conversation'
-import { chatShow,uniqid } from '../ts/store';
+import { chatShow, uniqid } from '../ts/store';
 import { showConversationSidebar } from '@/stores/ui'
+import { useStore } from '@nanostores/solid'
 
 export default () => {
     // dataItemLists.set([{id:'1'},{id:'2'},{id:'3'},{id:'4'},{id:'5'},{id:'6'}])
@@ -30,7 +31,7 @@ export default () => {
             if (data.code === 200) {
                 setList('data', () => [...data.data])
             } else {
-                setErrorFun(data.message)
+                // setErrorFun(data.message)
             }
         }, '/chat/api', 'GET');
     }
@@ -115,21 +116,22 @@ export default () => {
             // if (isMobile()) {
             //     location.pathname = '/'
             // } else {
-                // newlyAdded()
-                let itemList = conversationMapSortList.get()
-                let setName = JSON.parse(sessionStorage.getItem('dialogueName') as any) || '未命名对话'
-                let numList: number[] = []
-                itemList.map((res, i) => {
-                    if (checkName(res.name, setName.name)) numList.push(i)
-                })
+            // newlyAdded()
+            let itemList = conversationMapSortList.get()
+            let setName = JSON.parse(sessionStorage.getItem('dialogueName') as any) || '未命名对话'
+            let numList: number[] = []
+            itemList.map((res, i) => {
+                if (checkName(res.name, setName.name)) numList.push(i)
+            })
 
-                if (setName.switch) {
-                    addConversation({ name: setNameNum(setName.name, numList), systemInfo: setName.systemInfo })
-                    showConversationEditModal.set(true)
-                    setName.switch = false
-                    sessionStorage.setItem('dialogueName', JSON.stringify({ name: setName.name, switch: false }))
-                }
-                chatShow.set(false)
+            if (setName.switch) {
+                addConversation({ name: setNameNum(setName.name, numList), systemInfo: setName.systemInfo })
+                showConversationEditModal.set(true)
+                setName.switch = false
+                sessionStorage.setItem('dialogueName', JSON.stringify({ name: setName.name, switch: false }))
+            }
+            chatShow.set(false)
+            setDataInfo()
             // }
         } else if (popType() === 'delete') {
             handleDelete(deleteItem['e'] as any, deleteItem['key'] as any)
@@ -138,37 +140,52 @@ export default () => {
     }
 
     //显示错误提示
-    const setErrorFun = (message: string) => {
-        // console.log(message)
-        setErrorShow({
-            message,
-            show: true
-        })
-    }
+    // const setErrorFun = (message: string) => {
+    //     // console.log(message)
+    //     setErrorShow({
+    //         message,
+    //         show: true
+    //     })
+    // }
 
     //查看记录内容
-    const chatWatch = (id:string='')=>{
+    const chatWatch = (id: string = '') => {
         chatShow.set(true)
         showConversationSidebar.set(false)
         uniqid.set(id)
+        setDataInfo()
+    }
+    const unId=useStore(uniqid)
+
+    //设置切换显示内容
+    const setDataInfo=()=>{
+        let infoSend = document.getElementById("infoSend");
+        let infoHeader = document.getElementById("infoHeader");
+        if (chatShow.get()) {
+            infoSend.style.display = "none";
+            infoHeader.style.display = "none";
+        } else {
+            infoHeader.style.display = "flex";
+            infoSend.style.display = "flex";
+        }
     }
 
     //提示弹窗
-    const ErrorState = () => (
-        <div class='tps-error-box'>
-            <div class="max-w-base h-full flex items-end flex-col justify-between gap-8 sm:(flex-row items-center) py-4 text-error text-sm" style="padding: 1rem;">
-                <div class="flex-1 w-full">
-                    <div class="fi gap-0.5 mb-1">
-                        <span i-carbon-warning />
-                        <span class="font-semibold">{errorShow().message}</span>
-                    </div>
-                </div>
-                <div class="border border-error px-2 py-1 rounded-md hv-base hover:bg-white" onClick={() => { setErrorShow({ show: false, message: errorShow().message }) }} >
-                    Dismiss
-                </div>
-            </div>
-        </div>
-    )
+    // const ErrorState = () => (
+    //     <div class='tps-error-box'>
+    //         <div class="max-w-base h-full flex items-end flex-col justify-between gap-8 sm:(flex-row items-center) py-4 text-error text-sm" style="padding: 1rem;">
+    //             <div class="flex-1 w-full">
+    //                 <div class="fi gap-0.5 mb-1">
+    //                     <span i-carbon-warning />
+    //                     <span class="font-semibold">{errorShow().message}</span>
+    //                 </div>
+    //             </div>
+    //             <div class="border border-error px-2 py-1 rounded-md hv-base hover:bg-white" onClick={() => { setErrorShow({ show: false, message: errorShow().message }) }} >
+    //                 Dismiss
+    //             </div>
+    //         </div>
+    //     </div>
+    // )
 
     onMount(() => {
         getList()
@@ -196,15 +213,17 @@ export default () => {
                     </div>
                 </div>
             </Show>
-            <Show when={errorShow().show}>
+            {/* <Show when={errorShow().show}>
                 <ErrorState />
-            </Show>
+            </Show> */}
             <div class="overflow-auto px-2">
                 <div style={{ width: '100%' }}>
                     <For each={list.data}>
                         {(instance, i) => (
                             <Show when={instance.title}>
-                                <ConversationSidebarItem chatWatch={chatWatch} popShow={popShow} setErrorFun={setErrorFun} instanceData={{ ...instance }} infoList={list.data} key={i as any} setList={setList} />
+                                <ConversationSidebarItem 
+                                clickInfo={instance.uniqid==unId()}
+                                chatWatch={chatWatch} popShow={popShow} instanceData={{ ...instance }} infoList={list.data} key={i as any} setList={setList} />
                             </Show>
                         )}
                     </For>
diff --git a/src/pages/chat/components/iframe.tsx b/src/pages/chat/components/iframe.tsx
index edfcbe6..08c298d 100644
--- a/src/pages/chat/components/iframe.tsx
+++ b/src/pages/chat/components/iframe.tsx
@@ -12,7 +12,7 @@ export default () => {
     let id: any = ''
     id = useStore(uniqid) as any
     return (
-        <div style={{width:'100%',height:'100%'}}>
+        <div style={{width:'100%',height:'100%'}} id='iframe'>
             <iframe src={`https://ansnid.com/share/?id=${id()}`} style={{width:'100%',height:'100%'}}></iframe>
         </div>
     )
diff --git a/src/pages/chat/components/listItem.tsx b/src/pages/chat/components/listItem.tsx
index e2ff144..a3a2e59 100644
--- a/src/pages/chat/components/listItem.tsx
+++ b/src/pages/chat/components/listItem.tsx
@@ -1,6 +1,6 @@
 import { keys } from 'idb-keyval'
 import '../css/list.css'
-import { createSignal } from 'solid-js'
+import { createSignal,splitProps } from 'solid-js'
 import { fetchData } from '../../../http/api'
 
 type dataList = {
@@ -17,18 +17,20 @@ interface Props {
     setList: Function,
     infoList: any,
     popShow: Function,
-    setErrorFun:Function,
-    chatWatch:Function
+    chatWatch:Function,
+    clickInfo:any
 }
 
-export default ({ instanceData, key, setList, infoList, popShow,setErrorFun,chatWatch }: Props) => {
+export default ({ instanceData, key, setList, infoList, popShow,chatWatch,clickInfo }: Props,props:any) => {
 
     //设置数据
     const instanceItem = instanceData
     let instance = instanceItem || { id: '', name: '',uniqid:'' }
     const isTouchDevice = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
+    // const [clickInfoTof]=splitProps(props,["clickInfo"])
+    // console.log(clickInfoTof)
 
-    //置顶数据排序
+    //置顶数据排序  
     const getToppingItem = (arr: any) => {
         let toppingArr: { id: string, istop: boolean }[] = []
         let copyArr: any[]=[]
@@ -50,7 +52,7 @@ export default ({ instanceData, key, setList, infoList, popShow,setErrorFun,chat
                 if (data.code === 200) {
                     item.istop = item.istop ? 0 : 1
                 } else {
-                    setErrorFun(data.message)
+                    // setErrorFun(data.message)
                 }
                 res(null)
             }, !item.istop?'/chat/top':'/chat/cancelTop', 'POST');
@@ -71,10 +73,13 @@ export default ({ instanceData, key, setList, infoList, popShow,setErrorFun,chat
     return (
         <div
             class={[
+                clickInfo?
+                'group fi h-10 my-0.5 px-2 gap-2 hv-base rounded-md click-bg' :
                 'group fi h-10 my-0.5 px-2 gap-2 hv-base rounded-md'
             ].join(' ')}
             onClick={()=>chatWatch(instance.uniqid)}
         >
+            {/* {clickInfo.toString()} */}
             <div class="fcc w-8 h-8 rounded-full text-xl shrink-0">
                 <div class="text-base i-carbon-chat" />
             </div>
diff --git a/src/pages/chat/css/list.css b/src/pages/chat/css/list.css
index 53982a4..73f3380 100644
--- a/src/pages/chat/css/list.css
+++ b/src/pages/chat/css/list.css
@@ -112,6 +112,6 @@
     border-top:1px solid #e9ecef;
 }
 
-.chat-list-box{
-    max-height:;
+.click-bg{
+    background: rgba(246, 246, 246, 1) !important;
 }
\ No newline at end of file