feat: 细节优化

weaigc · Aug 23, 2023 · 08dddd8 · 08dddd8
1 parent 6747f79
commit 08dddd8
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 33 deletions.
diff --git a/src/app/loading.css b/src/app/loading.css
@@ -1,27 +1,3 @@
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  display: none;
-}
-
-::-webkit-scrollbar-button:start:decrement,
-::-webkit-scrollbar-button:end:increment {
-  height: 30px;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-track-piece {
-  background-color: #3b3b3b;
-  -webkit-border-radius: 16px;
-}
-
-::-webkit-scrollbar-thumb:vertical {
-  height: 50px;
-  background-color: #666;
-  border: 1px solid #eee;
-  -webkit-border-radius: 6px;
-}
-
 /* loading start */
 .loading-spinner {
   display: flex;
@@ -30,6 +6,11 @@
   height: 100vh;
   opacity: 1;
   transition: opacity .8s ease-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .loading-spinner.hidden {

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,15 +1,18 @@
 import dynamic from 'next/dynamic'
+import './loading.css'
 
 const DynamicComponentWithNoSSR = dynamic(
   () => import('../components/chat'),
-  { ssr: false }
+  {
+    ssr: false,
+    loading: () => (
+      <div className="loading-spinner">
+        {Array.from({length: 3}).map((_, index) => <div className={`bounce${index+1}`}/>)}
+      </div>
+    )
+  }
 )
 
 export default function IndexPage() {
-  return (
-    <>
-      <div className="loading-spinner" />
-      <DynamicComponentWithNoSSR />
-    </>
-  )
+  return <DynamicComponentWithNoSSR />
 }
diff --git a/src/components/chat-panel.tsx b/src/components/chat-panel.tsx
@@ -133,7 +133,7 @@ export function ChatPanel({
               </ChatImage>
               <Voice setInput={setInput} sendMessage={sendMessage} isSpeaking={isSpeaking} input={input} />
               <button type="submit">
-                <SVG alt="send" src={SendIcon} width={18} height={22} />
+                <SVG alt="send" src={SendIcon} width={18} height={21} />
               </button>
             </div>
             <ChatAttachments attachmentList={attachmentList} setAttachmentList={setAttachmentList} uploadImage={uploadImage} />

diff --git a/src/components/chat-suggestions.tsx b/src/components/chat-suggestions.tsx
@@ -24,6 +24,7 @@ export function ChatSuggestions({ setInput, suggestions = [] }: ChatSuggestionsP
 
   useMemo(() => {
     setSuggestions(suggestions)
+    window.scrollBy(0, 400)
   }, [suggestions.length, setSuggestions])
 
   return currentSuggestions?.length ? (

diff --git a/src/components/voice.tsx b/src/components/voice.tsx
@@ -48,7 +48,7 @@ const Voice = ({ setInput, input, sendMessage, isSpeaking }: Pick<ReturnType<typ
         sr.listening ? (
           <VoiceButton className="voice-button-theme" onClick={() => switchSR(false)} />
         ) : (
-          <SVG className="cursor-pointer" alt="start voice" src={VoiceIcon} width={26} height={22} onClick={() => switchSR(true)} />
+          <SVG className="cursor-pointer" alt="start voice" src={VoiceIcon} width={26} height={21} onClick={() => switchSR(true)} />
         )
       }
     </div>