From e1109127f4a3ad112c9fe6342dbc2ae4ecb0a536 Mon Sep 17 00:00:00 2001 From: luJianJun <2587063613@qq.com> Date: Fri, 18 Aug 2023 18:05:53 +0800 Subject: [PATCH] =?UTF-8?q?pnpm=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../conversations/ConversationSidebar.tsx | 13 +- src/http/api.ts | 4 +- src/pages/chat/components/dataList.tsx | 135 +++++++++++++++++- src/pages/chat/components/listItem.tsx | 76 +++++----- src/pages/chat/css/list.css | 89 ++++++++++-- 5 files changed, 260 insertions(+), 57 deletions(-) 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 = () => ( +
+
+
+
+ + {errorShow().message} +
+
+
{ setErrorShow({ show: false, message: errorShow().message }) }} > + Dismiss +
+
+
+ ) + + onMount(() => { + getList() + }) + return (
+ +
+
+
+
+ + 是否创建新的窗口? + + + 是否删除分享记录? + +
+
+
确认
+
setPop(false)}>取消
+
+
+
+
+ + + +
{(instance, i) => ( - + )}
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 & { - current?: boolean, - Topping:boolean - }, + instanceData: Omit & {}, 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 (
{
-
{instance.id as any}-{key}-{instance.Topping.toString()}
+
{instance.title as any}
-
+
newlyAdded()} + onClick={() => popShow('open', null, null, instance.title)} >
-
+
setDataTop(e,key())} + onClick={e => setDataTop(e, key())} >
@@ -96,7 +96,7 @@ export default ({ instanceData, key,setList,infoList }: Props) => {
handleDelete(e, key())} + onClick={e => popShow('delete', e, key())} >
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