From 43e53a78475dc555cbab725636b9a0486842d881 Mon Sep 17 00:00:00 2001
From: rain <15911122312@163.com>
Date: Tue, 26 Nov 2024 20:27:27 +0800
Subject: [PATCH] style: window style adjustment

---
 src-tauri/tauri.conf.json                  |  4 ++--
 src/components/ChatAI/Chat.tsx             |  2 +-
 src/components/SearchChat/DropdownList.tsx |  2 +-
 src/components/SearchChat/InputBox.tsx     |  2 +-
 src/components/SearchChat/Search.tsx       | 11 +++++++---
 src/components/SearchChat/Transition.tsx   | 12 +++++------
 src/components/SearchChat/index.tsx        | 24 ++++++++++++----------
 src/main.css                               |  4 ++++
 tailwind.config.js                         | 15 ++++++++------
 9 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index d1eaf079..9d5d2422 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -24,8 +24,8 @@
         "dragDropEnabled": true,
         "focus": true,
         "fullscreen": false,
-        "height": 600,
-        "maxHeight": 600,
+        "height": 596,
+        "maxHeight": 596,
         "minHeight": 90,
         "width": 680,
         "maxWidth": 680,
diff --git a/src/components/ChatAI/Chat.tsx b/src/components/ChatAI/Chat.tsx
index ca4e0317..6c546a00 100644
--- a/src/components/ChatAI/Chat.tsx
+++ b/src/components/ChatAI/Chat.tsx
@@ -211,7 +211,7 @@ const ChatAI = forwardRef<ChatAIRef, ChatAIProps>(
     return (
       <div
         data-tauri-drag-region
-        className={`h-[500px] flex flex-col rounded-xl overflow-hidden bg-chat_bg_light dark:bg-chat_bg_dark bg-cover`}
+        className={`h-[500px] flex flex-col rounded-xl overflow-hidden`}
       >
         <header
           data-tauri-drag-region
diff --git a/src/components/SearchChat/DropdownList.tsx b/src/components/SearchChat/DropdownList.tsx
index 5624bffd..6085b33d 100644
--- a/src/components/SearchChat/DropdownList.tsx
+++ b/src/components/SearchChat/DropdownList.tsx
@@ -103,7 +103,7 @@ function DropdownList({ selected, suggests }: DropdownListProps) {
     <div
       ref={containerRef}
       data-tauri-drag-region
-      className="h-[500px] w-full p-2 pb-10 flex flex-col bg-search_bg_light dark:bg-chat_bg_dark bg-cover rounded-xl overflow-y-auto overflow-hidden focus:outline-none"
+      className="h-[500px] w-full p-2 pb-10 flex flex-col rounded-xl overflow-y-auto overflow-hidden focus:outline-none"
       tabIndex={0}
     >
       {suggests?.map((item, index) => {
diff --git a/src/components/SearchChat/InputBox.tsx b/src/components/SearchChat/InputBox.tsx
index a6b2f1e3..6ef25241 100644
--- a/src/components/SearchChat/InputBox.tsx
+++ b/src/components/SearchChat/InputBox.tsx
@@ -54,7 +54,7 @@ export default function ChatInput({
 
   return (
     <div className="w-full rounded-xl overflow-hidden">
-      <div className="bg-inputbox_bg_light dark:bg-inputbox_bg_dark bg-cover rounded-xl">
+      <div className="rounded-xl">
         <div className="p-[13px] flex items-center dark:text-[#D8D8D8] bg-white dark:bg-[#202126] rounded-xl transition-all">
           <div className="flex flex-wrap gap-2 flex-1 items-center">
             {isChatMode ? (
diff --git a/src/components/SearchChat/Search.tsx b/src/components/SearchChat/Search.tsx
index c9b3b40f..3bb28dca 100644
--- a/src/components/SearchChat/Search.tsx
+++ b/src/components/SearchChat/Search.tsx
@@ -56,17 +56,22 @@ function Search({ isTransitioned, isChatMode, input }: SearchProps) {
     !isChatMode && debouncedSearch();
   }, [input]);
 
-  if (suggests.length === 0) return null;
+  console.log(11111, isChatMode);
+  if (isChatMode || suggests.length === 0) return null;
 
   return (
     <div
-      className={`absolute w-full transition-opacity duration-500 ${
+      className={`rounded-xl overflow-hidden bg-search_bg_light dark:bg-search_bg_dark bg-cover border border-[#E6E6E6] dark:border-[#272626] absolute w-full transition-opacity duration-500 ${
         isTransitioned ? "opacity-0 pointer-events-none" : "opacity-100"
       } bottom-0 h-[500px]`}
+      style={{
+        backgroundPosition: "-1px 0",
+        backgroundSize: "101% 100%",
+      }}
     >
       {isChatMode ? null : (
         <div
-          className={`min-h-full w-full flex items-start justify-center rounded-xl overflow-hidden relative`}
+          className={`min-h-full w-full flex items-start justify-center overflow-hidden relative`}
         >
           {/* Search Results Panel */}
           {suggests.length > 0 ? (
diff --git a/src/components/SearchChat/Transition.tsx b/src/components/SearchChat/Transition.tsx
index 2e3e40b2..a85cd6cf 100644
--- a/src/components/SearchChat/Transition.tsx
+++ b/src/components/SearchChat/Transition.tsx
@@ -10,12 +10,12 @@ const TransitionComponent = () => {
   return (
     <div
       data-tauri-drag-region
-      className="w-[680px] h-[600px] mx-auto bg-gray-100 overflow-hidden relative"
+      className="w-[680px] h-[596px] mx-auto overflow-hidden relative"
     >
       <div
         data-tauri-drag-region
-        className={`absolute w-full bg-red-500 text-white flex items-center justify-center transition-all duration-500 ${
-          isTransitioned ? "top-[510px] h-[90px]" : "top-0 h-[90px]"
+        className={`shadow-window-custom border border-[#E6E6E6] dark:border-[#272626] absolute w-full bg-red-500 text-white flex items-center justify-center transition-all duration-500 ${
+          isTransitioned ? "top-[506px] h-[90px]" : "top-0 h-[90px]"
         }`}
       >
         <button
@@ -28,17 +28,17 @@ const TransitionComponent = () => {
 
       <div
         data-tauri-drag-region
-        className={`absolute w-full bg-green-500 transition-opacity duration-500 ${
+        className={`shadow-window-custom border border-[#E6E6E6] dark:border-[#272626] absolute w-full bg-green-500 transition-opacity duration-500 ${
           isTransitioned ? "opacity-0 pointer-events-none" : "opacity-100"
         } bottom-0 h-[500px]`}
       ></div>
 
       <div
         data-tauri-drag-region
-        className={`absolute w-full bg-yellow-500 transition-all duration-500 ${
+        className={`shadow-window-custom border border-[#E6E6E6] dark:border-[#272626] absolute w-full bg-yellow-500 transition-all duration-500 ${
           isTransitioned
             ? "top-0 opacity-100 pointer-events-auto"
-            : "-top-[510px] opacity-0 pointer-events-none"
+            : "-top-[506px] opacity-0 pointer-events-none"
         } h-[500px]`}
       ></div>
     </div>
diff --git a/src/components/SearchChat/index.tsx b/src/components/SearchChat/index.tsx
index e1962453..52577aa0 100644
--- a/src/components/SearchChat/index.tsx
+++ b/src/components/SearchChat/index.tsx
@@ -54,8 +54,8 @@ export default function SearchChat() {
       className={`w-full h-full min-h-screen mx-auto overflow-hidden relative`}
     >
       <div
-        className={`absolute z-100 w-full flex items-center justify-center duration-500 ${
-          isTransitioned ? "top-[510px] h-[90px]" : "top-0 h-[90px]"
+        className={`rounded-xl overflow-hidden bg-inputbox_bg_light dark:bg-inputbox_bg_dark bg-cover border border-[#E6E6E6] dark:border-[#272626] absolute z-100 w-full flex items-center justify-center duration-500 ${
+          isTransitioned ? "top-[506px] h-[90px]" : "top-0 h-[90px]"
         }`}
       >
         <InputBox
@@ -73,10 +73,10 @@ export default function SearchChat() {
       </div>
 
       <div
-        className={`absolute w-full transition-all duration-500 ${
+        className={`rounded-xl overflow-hidden bg-chat_bg_light dark:bg-chat_bg_dark bg-cover border border-[#E6E6E6] dark:border-[#272626] absolute w-full transition-all duration-500 ${
           isTransitioned
             ? "top-0 opacity-100 pointer-events-auto"
-            : "-top-[510px] opacity-0 pointer-events-none"
+            : "-top-[506px] opacity-0 pointer-events-none"
         } h-[500px]`}
       >
         <ChatAI
@@ -88,13 +88,15 @@ export default function SearchChat() {
         />
       </div>
 
-      <Search
-        key="Search"
-        input={input}
-        isChatMode={isChatMode}
-        isTransitioned={isTransitioned}
-        changeInput={changeInput}
-      />
+      {isChatMode ? null : (
+        <Search
+          key="Search"
+          input={input}
+          isChatMode={isChatMode}
+          isTransitioned={isTransitioned}
+          changeInput={changeInput}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/main.css b/src/main.css
index fe0de3db..1bd19900 100644
--- a/src/main.css
+++ b/src/main.css
@@ -82,4 +82,8 @@
   .dark .custom-scrollbar::-webkit-scrollbar-thumb {
     background-color: #475569;
   }
+
+  .bg-100 {
+    background-size: 100% 100%;
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index d2d3d9bd..d64637e3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,12 +11,12 @@ export default {
         separator: "rgb(var(--color-separator) / <alpha-value>)",
       },
       backgroundImage: {
-        'chat_bg_light': "url('/chat_bg_light.png')",
-        'chat_bg_dark': "url('/chat_bg_dark.png')",
-        'search_bg_light': "url('/search_bg_light.png')",
-        'search_bg_dark': "url('/search_bg_dark.png')",
-        'inputbox_bg_light': "url('/inputbox_bg_light.png')",
-        'inputbox_bg_dark': "url('/inputbox_bg_dark.png')",
+        chat_bg_light: "url('/chat_bg_light.png')",
+        chat_bg_dark: "url('/chat_bg_dark.png')",
+        search_bg_light: "url('/search_bg_light.png')",
+        search_bg_dark: "url('/search_bg_dark.png')",
+        inputbox_bg_light: "url('/inputbox_bg_light.png')",
+        inputbox_bg_dark: "url('/inputbox_bg_dark.png')",
       },
       textColor: {
         primary: "rgb(var(--color-foreground) / <alpha-value>)",
@@ -30,6 +30,9 @@ export default {
           "100%": { opacity: "1" },
         },
       },
+      boxShadow: {
+        'window-custom': '0 1px 5px 0 rgba(0, 0, 0, 0.15), 0 1px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1)',
+      },
     },
   },
   plugins: [],