页面优化

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'}>

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"

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"

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');
     }
@@ -130,6 +131,7 @@ export default () => {
                 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) => {
+    // const setErrorFun = (message: string) => {
-        // console.log(message)
+    //     // console.log(message)
-        setErrorShow({
+    //     setErrorShow({
-            message,
+    //         message,
-            show: true
+    //         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 = () => (
+    // const ErrorState = () => (
-        <div class='tps-error-box'>
+    //     <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="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="flex-1 w-full">
-                    <div class="fi gap-0.5 mb-1">
+    //                 <div class="fi gap-0.5 mb-1">
-                        <span i-carbon-warning />
+    //                     <span i-carbon-warning />
-                        <span class="font-semibold">{errorShow().message}</span>
+    //                     <span class="font-semibold">{errorShow().message}</span>
-                    </div>
+    //                 </div>
-                </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 }) }} >
+    //             <div class="border border-error px-2 py-1 rounded-md hv-base hover:bg-white" onClick={() => { setErrorShow({ show: false, message: errorShow().message }) }} >
-                    Dismiss
+    //                 Dismiss
-                </div>
+    //             </div>
-            </div>
+    //         </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>

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>
     )

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,16 +17,18 @@ 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) => {
@@ -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>

src/pages/chat/css/list.css

@@ -112,6 +112,6 @@
     border-top:1px solid #e9ecef;
 }
 
-.chat-list-box{
+.click-bg{
-    max-height:;
+    background: rgba(246, 246, 246, 1) !important;
 }