diff --git a/src/components/conversations/ConversationSidebar.tsx b/src/components/conversations/ConversationSidebar.tsx
index de63aea..bd7032a 100644
--- a/src/components/conversations/ConversationSidebar.tsx
+++ b/src/components/conversations/ConversationSidebar.tsx
@@ -24,7 +24,7 @@ export default () => {
console.log(count, Number(num[0].replace('(', '').replace(')', '')))
}
})
- title = `${setName}(${count + 1})`
+ title =count?`${setName}(${count + 1})`:`${setName}`
return title
}
@@ -39,12 +39,17 @@ export default () => {
onMount(() => {
setTimeout(() => {
let itemList = conversationMapSortList.get()
- let setName = '1'
+ let setName = JSON.parse(sessionStorage.getItem('dialogueName') as any)||'未命名对话'
let numList: number[] = []
itemList.map((res, i) => {
- if (checkName(res.name, setName)) numList.push(i)
+ if (checkName(res.name, setName.name)) numList.push(i)
})
- addConversation({name:setNameNum(setName, numList)})
+
+ if(setName.switch){
+ addConversation({name:setNameNum(setName.name, numList)})
+ setName.switch=false
+ sessionStorage.setItem('dialogueName',JSON.stringify({name:setName.name,switch:false}))
+ }
}, 1000)
})
diff --git a/src/http/api.ts b/src/http/api.ts
index 217c310..a6d6c09 100644
--- a/src/http/api.ts
+++ b/src/http/api.ts
@@ -20,8 +20,8 @@ export function generateSessionId() {
export function baseUrl(){
- // return 'https://ansnid.com';
- return '';
+ return 'https://ansnid.com';
+ // return '';
}
export function getToken(){
diff --git a/src/pages/chat/components/dataList.tsx b/src/pages/chat/components/dataList.tsx
index 49c2099..58b1237 100644
--- a/src/pages/chat/components/dataList.tsx
+++ b/src/pages/chat/components/dataList.tsx
@@ -1,7 +1,8 @@
-import { For, createSignal, createEffect } from 'solid-js'
+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'
export default () => {
@@ -10,13 +11,143 @@ export default () => {
data: [{ id: '1', Topping: false }, { id: '2', Topping: false }, { id: '3', Topping: false }, { id: '4', Topping: false }, { id: '5', Topping: false }, { id: '6', Topping: false }]
})
+ 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])
+ }
+ }, '/chat/api', 'GET');
+ }
+
+ //标题
+ let dialogueName = ''
+
+ //新建对话框
+ 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, name: string = '未命名对话') => {
+ setPopType(type)
+ if (type == 'delete') {
+ deleteItem['key'] = key as any
+ deleteItem['e'] = e
+ }
+ if (type === 'open') dialogueName = name
+ setPop(!pop())
+ }
+
+ //确认按钮
+ const determineBtn = () => {
+ if (popType() === 'open') {
+ sessionStorage.setItem('dialogueName', JSON.stringify({ name: dialogueName, switch: true }))
+ if (isMobile()) {
+ location.pathname = '/'
+ } else {
+ newlyAdded()
+ }
+ } else if (popType() === 'delete') {
+ handleDelete(deleteItem['e'] as any, deleteItem['key'] as any)
+ }
+ setPop(false)
+ }
+
+ //显示错误提示
+ const setErrorFun=(message:string)=>{
+ setErrorShow({
+ message,
+ show:true
+ })
+ }
+
+ //提示弹窗
+ 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 max-w-350 min-w-260">
+ <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="flex-1 overflow-auto">
<div class="px-2">
<For each={list.data}>
{(instance, i) => (
- <ConversationSidebarItem instanceData={{ ...instance }} infoList={list.data} key={i as any} setList={setList} />
+ <ConversationSidebarItem popShow={popShow} setErrorFun={setErrorFun} instanceData={{ ...instance }} infoList={list.data} key={i as any} setList={setList} />
)}
</For>
</div>
diff --git a/src/pages/chat/components/listItem.tsx b/src/pages/chat/components/listItem.tsx
index b65b611..4c75e0e 100644
--- a/src/pages/chat/components/listItem.tsx
+++ b/src/pages/chat/components/listItem.tsx
@@ -1,26 +1,26 @@
import { keys } from 'idb-keyval'
import '../css/list.css'
import { createSignal } from 'solid-js'
+import { fetchData } from '../../../http/api'
type dataList = {
id: string
}
interface Props {
- instanceData: Omit<dataList, 'messages'> & {
- current?: boolean,
- Topping:boolean
- },
+ instanceData: Omit<dataList, 'messages'> & {},
key: any,
- setList:Function,
- infoList:any
+ setList: Function,
+ infoList: any,
+ popShow: Function,
+ setErrorFun:Function
}
-export default ({ instanceData, key,setList,infoList }: Props) => {
+export default ({ instanceData, key, setList, infoList, popShow,setErrorFun }: Props) => {
//设置数据
- const instanceItem=instanceData
- let instance = instanceItem||{id:'',name:''}
+ const instanceItem = instanceData
+ let instance = instanceItem || { id: '', name: '' }
const isTouchDevice = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
const handleClick = () => {
@@ -28,41 +28,41 @@ export default ({ instanceData, key,setList,infoList }: Props) => {
}
//获取置顶数据
- const getToppingItem=(arr:any)=>{
- let toppingArr: {id:string,Topping:boolean}[]=[]
- arr.map((res: { Topping: boolean; id: string },i:number)=>{
- if(res.Topping){
- toppingArr.push(arr.splice(i,1)[0] as {Topping: boolean; id: string})
+ const getToppingItem = (arr: any) => {
+ let toppingArr: { id: string, istop: boolean }[] = []
+ arr.map((res: { istop: boolean; id: string }, i: number) => {
+ if (res.istop) {
+ toppingArr.push(arr.splice(i, 1)[0] as { istop: boolean; id: string })
}
})
return toppingArr
}
- //删除记录
- const handleDelete = (e: MouseEvent, key:string) => {
- let arr=JSON.parse(JSON.stringify(infoList))
- arr.splice(key,1)
- setList('data',(list: null[])=> [...arr])
- e.stopPropagation()
+ //设置置顶
+ const setItemTop = (uniqid: string, item: any) => {
+ return new Promise((res, rej) => {
+ fetchData({ uniqid }, function (data) {
+ if (data.code === 200) {
+ item.istop = item.istop ? 0 : 1
+ } else {
+ setErrorFun(data.message)
+ }
+ res(null)
+ }, '/chat/top', 'GET');
+ })
}
//置顶排序
- const setDataTop=(e:MouseEvent,key:string)=>{
- let arr=JSON.parse(JSON.stringify(infoList))
+ const setDataTop = (e: MouseEvent, key: string) => {
+ let arr = JSON.parse(JSON.stringify(infoList))
let item = arr[key]
-
- item.Topping=!item.Topping
- let toppindItem=getToppingItem(arr)
-
- setList('data',(list: null[])=> [...toppindItem,...arr])
+ setItemTop(item.uniqid, item).then(res=>{
+ let toppindItem = getToppingItem(arr)
+ setList('data', (list: null[]) => [...toppindItem, ...arr])
+ })
e.stopPropagation()
}
- //新建对话框
- const newlyAdded=()=>{
- window.open(`${location.protocol}//${location.host}` )
- }
-
return (
<div
class={[
@@ -73,21 +73,21 @@ export default ({ instanceData, key,setList,infoList }: Props) => {
<div class="fcc w-8 h-8 rounded-full text-xl shrink-0">
<div class="text-base i-carbon-chat" />
</div>
- <div class="flex-1 truncate text-sm">{instance.id as any}-{key}-{instance.Topping.toString()}</div>
+ <div class="flex-1 truncate text-sm">{instance.title as any}</div>
- <div class={[isTouchDevice||instance.Topping.toString()=='true' ? '' : 'hidden group-hover:block'].join('')}>
+ <div class={[isTouchDevice ? '' : 'hidden group-hover:block'].join('')}>
<div
class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
- onClick={()=>newlyAdded()}
+ onClick={() => popShow('open', null, null, instance.title)}
>
<div class='add-new-icon'></div>
</div>
</div>
- <div class={[isTouchDevice||instance.Topping.toString()=='true' ? '' : 'hidden group-hover:block'].join('')}>
+ <div class={[isTouchDevice || instance.istop === 1 ? '' : 'hidden group-hover:block'].join('')}>
<div
class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
- onClick={e => setDataTop(e,key())}
+ onClick={e => setDataTop(e, key())}
>
<div class='list-top-icon'></div>
</div>
@@ -96,7 +96,7 @@ export default ({ instanceData, key,setList,infoList }: Props) => {
<div class={isTouchDevice ? '' : 'hidden group-hover:block'}>
<div
class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
- onClick={e => handleDelete(e, key())}
+ onClick={e => popShow('delete', e, key())}
>
<div class="i-carbon-close" />
</div>
diff --git a/src/pages/chat/css/list.css b/src/pages/chat/css/list.css
index 4068f11..5249a8c 100644
--- a/src/pages/chat/css/list.css
+++ b/src/pages/chat/css/list.css
@@ -1,26 +1,93 @@
-.w-100{
- width:100%;
+.w-100 {
+ width: 100%;
}
-.max-w-350{
+
+.max-w-350 {
max-width: 22rem;
}
-.min-w-260{
+
+.min-w-260 {
min-width: 16.25rem;
}
-.list-top-icon{
- width:1rem ;
- height:1rem;
+
+.list-top-icon {
+ width: 1rem;
+ height: 1rem;
background: url('../img/posTop.svg') no-repeat;
background-position: center;
background-size: 1rem 1rem;
}
-.add-new-icon{
- width:1rem ;
- height:1rem;
+
+.add-new-icon {
+ width: 1rem;
+ height: 1rem;
background: url('../img/addIcon.svg') no-repeat;
background-position: center;
background-size: 1rem 1rem;
}
-.block{
+
+.block {
display: block !important;
+}
+
+.center-f {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.pop {
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: rgba(33, 33, 33, 0.5);
+ width: 100vw;
+ height: 100vh;
+ z-index: 666;
+
+}
+
+.pop-title{
+ font-size:1rem;
+ text-align: center;
+ word-wrap: break-word;
+}
+
+.text-box {
+ border-radius: 0.625rem;
+ width: 17.5rem;
+ height: 11.25rem;
+ background: #fff;
+
+}
+
+.btn{
+ border-radius: 0.5rem;
+ border:1px solid #222;
+ padding:0.2rem 0.625rem;
+ font-size:0.8125rem;
+ cursor: pointer;
+ height:1.7425rem;
+ line-height:1.8rem;
+}
+
+.btn :hover{
+ background: rgba(245, 245, 245, 0.5);
+}
+
+.btn-box{
+ display: flex;
+ align-items: center;
+ margin-top:1.875rem;
+}
+.mg-l-80{
+ margin-left:5rem;
+}
+.tps-error-box{
+ position: fixed;
+ bottom: 0;
+ left:0;
+ height:10rem;
+ background:rgba(246, 246, 246, 1);
+ width:100%;
}
\ No newline at end of file