pnpm提交

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">

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"

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>
+    )
+}

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>
+    )
+}

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;
+}

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>

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>

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>