diff --git a/src/components/conversations/ConversationSidebar.tsx b/src/components/conversations/ConversationSidebar.tsx
index c700cee..de63aea 100644
--- a/src/components/conversations/ConversationSidebar.tsx
+++ b/src/components/conversations/ConversationSidebar.tsx
@@ -1,14 +1,53 @@
-import { For } from 'solid-js'
+import { For, onMount } from 'solid-js'
import { useStore } from '@nanostores/solid'
import { useI18n } from '@/hooks'
import { conversationMapSortList } from '@/stores/conversation'
import ConversationSidebarItem from './ConversationSidebarItem'
import ConversationSidebarAdd from './ConversationSidebarAdd'
+import { addConversation } from '@/stores/conversation'
export default () => {
const { t } = useI18n()
const $conversationMapSortList = useStore(conversationMapSortList)
+ //设置副标题数字
+ 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(')', '')))
+ console.log(count, Number(num[0].replace('(', '').replace(')', '')))
+ }
+ })
+ title = `${setName}(${count + 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
+ }
+ }
+
+ onMount(() => {
+ setTimeout(() => {
+ let itemList = conversationMapSortList.get()
+ let setName = '1'
+ let numList: number[] = []
+ itemList.map((res, i) => {
+ if (checkName(res.name, setName)) numList.push(i)
+ })
+ addConversation({name:setNameNum(setName, numList)})
+ }, 1000)
+ })
+
return (
<div class="h-full flex flex-col bg-sidebar">
<header class="h-14 fi justify-between px-4 text-xs uppercase">
diff --git a/src/components/conversations/ConversationSidebarAdd.tsx b/src/components/conversations/ConversationSidebarAdd.tsx
index c10481a..14dca6d 100644
--- a/src/components/conversations/ConversationSidebarAdd.tsx
+++ b/src/components/conversations/ConversationSidebarAdd.tsx
@@ -1,13 +1,14 @@
import { useI18n } from '@/hooks'
import { addConversation } from '@/stores/conversation'
import Button from '../ui/Button'
+import { onMount } from 'solid-js'
export default () => {
const { t } = useI18n()
const handleAdd = () => {
addConversation()
}
-
+
return (
<Button
icon="i-carbon-add"
diff --git a/src/pages/chat/components/dataList.tsx b/src/pages/chat/components/dataList.tsx
new file mode 100644
index 0000000..49c2099
--- /dev/null
+++ b/src/pages/chat/components/dataList.tsx
@@ -0,0 +1,26 @@
+import { For, createSignal, createEffect } from 'solid-js'
+import ConversationSidebarItem from './listItem'
+import { createStore } from "solid-js/store";
+import '../css/list.css'
+
+
+export default () => {
+ // dataItemLists.set([{id:'1'},{id:'2'},{id:'3'},{id:'4'},{id:'5'},{id:'6'}])
+ const [list, setList] = createStore({
+ 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 }]
+ })
+
+ return (
+ <div class="h-full flex flex-col bg-sidebar max-w-350 min-w-260">
+ <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} />
+ )}
+ </For>
+ </div>
+ </div>
+ </div>
+ )
+}
diff --git a/src/pages/chat/components/listItem.tsx b/src/pages/chat/components/listItem.tsx
new file mode 100644
index 0000000..b65b611
--- /dev/null
+++ b/src/pages/chat/components/listItem.tsx
@@ -0,0 +1,106 @@
+import { keys } from 'idb-keyval'
+import '../css/list.css'
+import { createSignal } from 'solid-js'
+
+type dataList = {
+ id: string
+}
+
+interface Props {
+ instanceData: Omit<dataList, 'messages'> & {
+ current?: boolean,
+ Topping:boolean
+ },
+ key: any,
+ setList:Function,
+ infoList:any
+}
+
+export default ({ instanceData, key,setList,infoList }: Props) => {
+
+ //设置数据
+ const instanceItem=instanceData
+ let instance = instanceItem||{id:'',name:''}
+ const isTouchDevice = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
+
+ const handleClick = () => {
+ // console.log(dataList)
+ }
+
+ //获取置顶数据
+ 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})
+ }
+ })
+ 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 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])
+ e.stopPropagation()
+ }
+
+ //新建对话框
+ const newlyAdded=()=>{
+ window.open(`${location.protocol}//${location.host}` )
+ }
+
+ return (
+ <div
+ class={[
+ 'group fi h-10 my-0.5 px-2 gap-2 hv-base rounded-md'
+ ].join(' ')}
+ onClick={handleClick}
+ >
+ <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={[isTouchDevice||instance.Topping.toString()=='true' ? '' : 'hidden group-hover:block'].join('')}>
+ <div
+ class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
+ onClick={()=>newlyAdded()}
+ >
+ <div class='add-new-icon'></div>
+ </div>
+ </div>
+
+ <div class={[isTouchDevice||instance.Topping.toString()=='true' ? '' : 'hidden group-hover:block'].join('')}>
+ <div
+ class="inline-flex p-2 items-center gap-1 rounded-md hv-base"
+ onClick={e => setDataTop(e,key())}
+ >
+ <div class='list-top-icon'></div>
+ </div>
+ </div>
+
+ <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())}
+ >
+ <div class="i-carbon-close" />
+ </div>
+ </div>
+ </div>
+ )
+}
diff --git a/src/pages/chat/css/list.css b/src/pages/chat/css/list.css
new file mode 100644
index 0000000..4068f11
--- /dev/null
+++ b/src/pages/chat/css/list.css
@@ -0,0 +1,26 @@
+.w-100{
+ width:100%;
+}
+.max-w-350{
+ max-width: 22rem;
+}
+.min-w-260{
+ min-width: 16.25rem;
+}
+.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;
+ background: url('../img/addIcon.svg') no-repeat;
+ background-position: center;
+ background-size: 1rem 1rem;
+}
+.block{
+ display: block !important;
+}
\ No newline at end of file
diff --git a/src/pages/chat/datalist.astro b/src/pages/chat/datalist.astro
new file mode 100644
index 0000000..b435cbb
--- /dev/null
+++ b/src/pages/chat/datalist.astro
@@ -0,0 +1,21 @@
+---
+import Layout from '@/layouts/Layout.astro'
+import Main from '@/components/Main.astro'
+import ConversationSidebar from './components/dataList'
+import ModalsLayer from '@/components/ModalsLayer'
+import Sidebar from '@/components/ui/Sidebar'
+import BuildStores from '@/components/client-only/BuildStores'
+import './css/list.css'
+
+---
+
+<Layout title="Ansnid">
+ <div class="h-100vh w-screen flex">
+ <Sidebar direction="left" class='w-100'>
+ <ConversationSidebar client:only="solid-js" />
+ </Sidebar>
+ <!-- <Main /> -->
+ </div>
+ <!-- <ModalsLayer client:only />
+ <BuildStores client:only /> -->
+</Layout>
diff --git a/src/pages/chat/img/addIcon.svg b/src/pages/chat/img/addIcon.svg
new file mode 100644
index 0000000..2f6e8ee
--- /dev/null
+++ b/src/pages/chat/img/addIcon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1692260674514" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2533" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M801.171 483.589H544V226.418c0-17.673-14.327-32-32-32s-32 14.327-32 32v257.171H222.83c-17.673 0-32 14.327-32 32s14.327 32 32 32H480v257.17c0 17.673 14.327 32 32 32s32-14.327 32-32v-257.17h257.171c17.673 0 32-14.327 32-32s-14.327-32-32-32z" fill="#7f7f7f" p-id="2534"></path></svg>
\ No newline at end of file
diff --git a/src/pages/chat/img/posTop.svg b/src/pages/chat/img/posTop.svg
new file mode 100644
index 0000000..eb32bdc
--- /dev/null
+++ b/src/pages/chat/img/posTop.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1692176199970" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4216" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M43.072 974.72l380.864-301.952 151.936 161.6c0 0 63.424 17.28 67.328-30.72l-3.904-163.584 225.088-259.648 98.048-5.696c0 0 76.928-15.488 21.184-82.752l-275.072-276.928c0 0-74.944-9.6-69.248 59.584l0 75.008L383.552 367.104 225.856 376.64c0 0-57.728 19.2-36.608 69.248l148.16 146.176L43.072 974.72 43.072 974.72z" fill="#7F7F7F" p-id="4217"></path></svg>
\ No newline at end of file