238 lines
8.4 KiB
TypeScript
238 lines
8.4 KiB
TypeScript
import { For, createSignal, createEffect, Show, onMount } from 'solid-js'
|
|
import ConversationSidebarItem from './listItem'
|
|
import { createStore } from "solid-js/store";
|
|
import '../css/list.css'
|
|
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 { 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'}])
|
|
const [list, setList] = createStore({
|
|
data: [{ title: '' }]
|
|
})
|
|
|
|
type errorObj = {
|
|
show: boolean,
|
|
message: string
|
|
}
|
|
|
|
let [errorShow, setErrorShow] = createSignal({
|
|
show: false,
|
|
message: ''
|
|
})
|
|
|
|
const getList = () => {
|
|
fetchData({}, function (data) {
|
|
if (data.code === 200) {
|
|
setList('data', () => [...data.data])
|
|
} else {
|
|
// setErrorFun(data.message)
|
|
}
|
|
}, '/chat/api', 'GET');
|
|
}
|
|
|
|
//标题
|
|
let dialogue = {
|
|
systemmessage: '',
|
|
title: ''
|
|
}
|
|
|
|
// //新建对话框
|
|
// const newlyAdded = () => {
|
|
// window.open(`${location.protocol}//${location.host}`)
|
|
// }
|
|
|
|
//删除记录
|
|
let deleteItem = { key: null, e: null }
|
|
const handleDelete = (e: MouseEvent, key: string) => {
|
|
let arr = JSON.parse(JSON.stringify(list)).data
|
|
fetchData({
|
|
uniqid: arr[key].uniqid
|
|
}, function (data) {
|
|
if (data.code === 200) {
|
|
arr.splice(key, 1)
|
|
setList('data', (list) => [...arr])
|
|
}
|
|
}, '/chat/delete', 'POST');
|
|
|
|
e.stopPropagation()
|
|
}
|
|
|
|
//判断平台
|
|
const isMobile = () => {
|
|
let flag = navigator.userAgent.match(
|
|
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
|
|
);
|
|
return flag;
|
|
}
|
|
//弹窗
|
|
let [pop, setPop] = createSignal(false)
|
|
let [popType, setPopType] = createSignal('open')
|
|
|
|
const popShow = (type: string, e: any, key: number, dialogueObj: any = {}) => {
|
|
setPopType(type)
|
|
if (type == 'delete') {
|
|
deleteItem['key'] = key as any
|
|
deleteItem['e'] = e
|
|
}
|
|
if (type === 'open') dialogue = dialogueObj
|
|
setPop(!pop())
|
|
}
|
|
|
|
//设置副标题数字
|
|
const setNameNum = (setName: string, numList: any) => {
|
|
let list = conversationMapSortList.get()
|
|
let title = ''
|
|
let count = 0
|
|
numList.map((res: number) => {
|
|
let regex1 = new RegExp("" + setName + '\\(\\d+\\)', 'g')
|
|
let seachText = list[res].name.match(regex1) || 'null'
|
|
let num = seachText[0].match(/\(\d+\)/g) || 'null'
|
|
if (num !== 'null') {
|
|
count = Math.max(count, Number(num[0].replace('(', '').replace(')', '')))
|
|
}
|
|
})
|
|
title = count ? `${setName}(${count + 1})` : `${setName}${numList.length > 0 ? '(1)' : ''}`
|
|
return title
|
|
}
|
|
|
|
//查重
|
|
const checkName = (name: string, setName: string) => {
|
|
let setNameReg = new RegExp(setName, 'g')
|
|
if (setNameReg.test(name) && name.replace(/\(\d+\)/g, '') === setName) {
|
|
return true
|
|
}
|
|
}
|
|
|
|
//确认按钮
|
|
const determineBtn = () => {
|
|
if (popType() === 'open') {
|
|
sessionStorage.setItem('dialogueName', JSON.stringify({ name: dialogue.title, switch: true, systemInfo: dialogue.systemmessage }))
|
|
// 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)
|
|
})
|
|
|
|
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)
|
|
}
|
|
setPop(false)
|
|
}
|
|
|
|
//显示错误提示
|
|
// const setErrorFun = (message: string) => {
|
|
// // console.log(message)
|
|
// setErrorShow({
|
|
// message,
|
|
// show: true
|
|
// })
|
|
// }
|
|
|
|
//查看记录内容
|
|
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");
|
|
let mtBox = document.getElementsByClassName('flex-1 mt-14 flex flex-col overflow-hidden')[0]
|
|
if (chatShow.get()) {
|
|
infoSend.style.display = "none";
|
|
infoHeader.style.display = "none";
|
|
mtBox.style.marginTop = 0;
|
|
} else {
|
|
infoHeader.style.display = "flex";
|
|
infoSend.style.display = "flex";
|
|
mtBox.style.marginTop = '3.5rem';
|
|
}
|
|
}
|
|
|
|
//提示弹窗
|
|
// 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()
|
|
})
|
|
|
|
return (
|
|
<div class="h-full flex flex-col bg-sidebar">
|
|
<Show when={pop()}>
|
|
<div class='pop center-f'>
|
|
<div class='center-f text-box'>
|
|
<div>
|
|
<div class='pop-title'>
|
|
<Show when={popType() == 'open'}>
|
|
是否创建新的窗口?
|
|
</Show>
|
|
<Show when={popType() == 'delete'}>
|
|
是否删除分享记录?
|
|
</Show>
|
|
</div>
|
|
<div class='btn-box'>
|
|
<div class='btn center-f' onClick={determineBtn}>确认</div>
|
|
<div class='btn mg-l-80 center-f' onClick={() => setPop(false)}>取消</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
{/* <Show when={errorShow().show}>
|
|
<ErrorState />
|
|
</Show> */}
|
|
<div class="overflow-auto px-2">
|
|
<div style={{ width: '100%' }}>
|
|
<For each={list.data}>
|
|
{(instance, i) => (
|
|
<Show when={instance.title}>
|
|
<ConversationSidebarItem
|
|
clickInfo={instance.uniqid==unId()}
|
|
chatWatch={chatWatch} popShow={popShow} instanceData={{ ...instance }} infoList={list.data} key={i as any} setList={setList} />
|
|
</Show>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|