分享历史记录页面-添加隐藏工具栏按钮

src/components/share/Conversation.tsx

@@ -3,7 +3,7 @@ import { For } from 'solid-js'
 import MessageItem from './../main/MessageItem'
 import Banner from './banner'
 import './style.css'
-import { createEffect, createSignal, useEffect,onMount } from 'solid-js'
+import { createEffect, createSignal, useEffect, onMount,sg } from 'solid-js'
 import { fetchData } from '../../http/api'
 
 export default () => {
@@ -36,6 +36,8 @@ export default () => {
 
 
   }, []);
+
+  let [moreBox,setMoreBox]= createSignal(false)
   return (
     <div class="flex flex-col h-full">
       <div style="text-align: center; padding: 0.75rem;">
@@ -53,7 +55,12 @@ export default () => {
           )}
         </For>
       </div>
+      <div class={[moreBox()?'more-show-box more-hid-box':'more-hid-box'].join()} onClick={()=>setMoreBox(!moreBox())}>
+        <div class='more-btn'>
+          <img src="../../../src/pages/chat/img/moreIcon.svg" class='img' alt="" />
           <Banner views={views} url={url} />
         </div>
+      </div>
+    </div>
   )
 }

src/components/share/banner.tsx

@@ -1,3 +1,4 @@
+import './style.css'
 export default function Banner({ views, url }: { views: number }) {
 
   const copyToClipboard = (text) => {
@@ -17,7 +18,7 @@ export default function Banner({ views, url }: { views: number }) {
 
   return (
         <div
-          className="z-10 fixed bottom-10 inset-x-0 mx-auto max-w-fit rounded-lg px-3 py-2 bg-white border border-gray-100 shadow-md flex justify-between space-x-2 items-center"
+          className="z-10 pos-a more-box mx-auto max-w-fit rounded-lg px-3 py-2 bg-white border border-gray-100 shadow-md flex justify-between space-x-2 items-center"
           initial={{ opacity: 0, y: 100 }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: 100 }}

src/components/share/style.css

@@ -15,3 +15,44 @@
 .ansnidshare .ansnid_copy{
 /*  margin: 0px !important;*/
 }
+
+.more-btn{
+  --un-shadow: var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgba(0,0,0,0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgba(0,0,0,0.1));
+    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+    width:3rem;
+    height:3rem;
+    border-radius:50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background:#fff;
+    border:1px solid rgba(0,0,0,0.1);
+}
+.more-btn .img{
+  width:1.5rem;
+  height: 1.5rem;
+}
+
+.pos-a{
+  position: absolute;
+}
+
+.more-box{
+  left:65px;
+}
+
+.more-hid-box{
+  position: fixed;
+  bottom:2rem;
+  left:1rem;
+  z-index:66;
+  overflow: hidden;
+  width:3.1rem;
+  height:5.1rem;
+  display: flex;
+  align-items: center;
+  transition: width linear 0.2s;
+}
+.more-show-box{
+  width:24.1rem;
+}

src/pages/chat/img/moreIcon.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="1692866656055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3806" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M221 592c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z m291 0c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z m291 0c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z" fill="#000000" p-id="3807"></path></svg>