页面优化
This commit is contained in:
parent
44409b2bba
commit
fe55fae1f7
@ -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'}>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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) => {
|
||||
// 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>
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -112,6 +112,6 @@
|
||||
border-top:1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.chat-list-box{
|
||||
max-height:;
|
||||
.click-bg{
|
||||
background: rgba(246, 246, 246, 1) !important;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user