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

src/components/share/Conversation.tsx

@@ -3,28 +3,28 @@ 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 () => {
 
   const currentDomain = window.location.hostname;
-  const contentDomain = currentDomain=='gtering.com'?'Gtering.com':'Ansnid.Com';
+  const contentDomain = currentDomain == 'gtering.com' ? 'Gtering.com' : 'Ansnid.Com';
 
-   const [views, setViews] = createSignal(0)
-   const [url, setUrl] = createSignal('')
-   const [title, setTitle] = createSignal(contentDomain)
-   const [items, setItems] = createSignal([])
+  const [views, setViews] = createSignal(0)
+  const [url, setUrl] = createSignal('')
+  const [title, setTitle] = createSignal(contentDomain)
+  const [items, setItems] = createSignal([])
 
-   // localStorage.setItem('theme', 'light');
-   document.documentElement.classList.toggle('dark', false)
+  // localStorage.setItem('theme', 'light');
+  document.documentElement.classList.toggle('dark', false)
 
   onMount(() => {
 
 
 
 
-    fetchData(null, function(data){ 
+    fetchData(null, function (data) {
 
       setViews(data.data.views);
       setUrl(data.data.url);
@@ -32,14 +32,16 @@ export default () => {
       setTitle(data.data.title);
       document.title = data.data.title ? `${(data.data.title || t('conversations.untitled'))} - ` + contentDomain : contentDomain
 
-     }, "/chatgptApi/conversations?url="+encodeURIComponent(window.location.href))
+    }, "/chatgptApi/conversations?url=" + encodeURIComponent(window.location.href))
 
 
   }, []);
+
+  let [moreBox,setMoreBox]= createSignal(false)
   return (
     <div class="flex flex-col h-full">
       <div style="text-align: center; padding: 0.75rem;">
-          {title}
+        {title}
       </div>
       <div class="scroll-list relative flex flex-col h-full overflow-y-scroll">
         <For each={items()}>
@@ -53,7 +55,12 @@ export default () => {
           )}
         </For>
       </div>
-      <Banner views={views} url={url} />
+      <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>