修改左边图标

src/pages/home/Rui/rui.css

@@ -1,31 +1,30 @@
-.refresh {
-  position: fixed;
-  right: -6px;
-  top: -260px;
-  width: 32px;
-  height: 32px;
-  border-radius: var(--hope-radii-lg);
-  background-color: rgb(214, 232, 251);
-  text-align: center;
-  color: rgb(24, 144, 255);
-  line-height: 30px;
-  cursor: pointer;
-}
 .serch {
   position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   right: 10px;
-  top: 110px;
+  top: 120px;
   width: 32px;
   height: 32px;
   border-radius: var(--hope-radii-lg);
-  background-color: rgb(214, 232, 251);
-  text-align: center;
   color: rgb(24, 144, 255);
-  line-height: 30px;
   cursor: pointer;
+  font-size: 20px;
 }
 .menu {
   position: fixed;
-  right: 10px;
+  right: 5px;
   top: 150px;
 }
+.right-icon {
+  position: fixed;
+  right: 5px;
+  top: 190px;
+}
+.right-menu {
+  top: 5px;
+  right: 4px;
+  font-size: 20px;
+  background-color: rgba(255, 255, 255, 0);
+}

src/pages/home/header/Header.tsx

@@ -7,7 +7,7 @@ import {
   Kbd,
 } from "@hope-ui/solid"
 import { Show } from "solid-js"
-import { getSetting, objStore, State } from "~/store"
+import { getSetting, objStore, State, getMainColor } from "~/store"
 import { BsSearch } from "solid-icons/bs"
 import { CenterLoading } from "~/components"
 import { Container } from "../Container"
@@ -64,14 +64,23 @@ export const Header = () => {
                     <Kbd>F</Kbd>
                   </HStack>
                 </HStack> */}
-                <div class="serch">
+                <HStack
+                  class="serch"
+                  _hover={{
+                    bgColor: getMainColor(),
+                    color: "white",
+                  }}
+                  _focus={{
+                    outline: "none",
+                  }}
+                >
                   <Icon
                     onClick={() => {
                       bus.emit("tool", "search")
                     }}
                     as={BsSearch}
                   />
-                </div>
+                </HStack>
               </Show>
               <Layout />
             </Show>

src/pages/home/header/layout.tsx

@@ -27,12 +27,20 @@ export const Layout = () => {
     <div class="menu">
       <Menu>
         <MenuTrigger
+          class="right-menu"
+          _hover={{
+            bgColor: getMainColor(),
+            color: "white",
+          }}
+          _focus={{
+            outline: "none",
+          }}
           as={IconButton}
           color={getMainColor()}
           bgColor={changeColor(getMainColor(), { alpha: 0.15 })}
-          _hover={{
-            bgColor: changeColor(getMainColor(), { alpha: 0.2 }),
-          }}
+          // _hover={{
+          //   bgColor: changeColor(getMainColor(), { alpha: 0.2 }),
+          // }}
           aria-label="switch layout"
           compact
           size="lg"

src/pages/home/toolbar/Right.tsx

@@ -30,13 +30,12 @@ export const Right = () => {
   const { refresh } = usePath()
   return (
     <Box
-      class="left-toolbar-box"
+      class="left-toolbar-box right-icon"
       pos="fixed"
       right={margin()}
       bottom={margin()}
     >
       <Show
-        // when={isOpen()}
         when={true}
         fallback={
           <RightIcon
@@ -53,67 +52,62 @@ export const Right = () => {
           p="$1"
           rounded="$lg"
           spacing="$1"
-          // shadow="0px 10px 30px -5px rgba(0, 0, 0, 0.3)"
-          // bgColor={useColorModeValue("white", "$neutral4")()}
           bgColor="$neutral1"
           as={Motion.div}
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
           exit={{ opacity: 0, scale: 0.6 }}
-          // @ts-ignore
-          transition={{ duration: 0.2 }}
+          // transition={{ duration: 0.2 }}
+          style="background-color: rgba(255, 255, 255,0)"
         >
           <VStack spacing="$1" class="left-toolbar-in">
             <Show when={isFolder() && (userCan("write") || objStore.write)}>
-              {/* <Add /> */}
-              <div class="refresh">
-                <RightIcon
-                  as={RiSystemRefreshLine}
-                  tips="refresh"
-                  onClick={() => {
-                    refresh(undefined, true)
-                  }}
-                />
-              </div>
+              <RightIcon
+                as={RiSystemRefreshLine}
+                // tips="refresh"
+                onClick={() => {
+                  refresh(undefined, true)
+                }}
+              />
               <RightIcon
                 as={operations.new_file.icon}
-                tips="new_file"
+                // tips="new_file"
                 onClick={() => {
                   bus.emit("tool", "new_file")
                 }}
               />
               <RightIcon
                 as={operations.mkdir.icon}
                 p="$1_5"
-                tips="mkdir"
+                // tips="mkdir"
                 onClick={() => {
                   bus.emit("tool", "mkdir")
                 }}
               />
               <RightIcon
                 as={operations.recursive_move.icon}
-                tips="recursive_move"
+                // tips="recursive_move"
                 onClick={() => {
                   bus.emit("tool", "recursiveMove")
                 }}
               />
               <RightIcon
                 as={operations.remove_empty_directory.icon}
-                tips="remove_empty_directory"
+                // tips="remove_empty_directory"
                 onClick={() => {
                   bus.emit("tool", "removeEmptyDirectory")
                 }}
               />
               <RightIcon
                 as={operations.batch_rename.icon}
-                tips="batch_rename"
+                // tips="batch_rename"
                 onClick={() => {
                   bus.emit("tool", "batchRename")
                 }}
               />
               <RightIcon
                 as={AiOutlineCloudUpload}
-                tips="upload"
+                // tips="upload"
                 onClick={() => {
                   bus.emit("tool", "upload")
                 }}
@@ -123,26 +117,25 @@ export const Right = () => {
               <RightIcon
                 as={IoMagnetOutline}
                 pl="0"
-                tips="offline_download"
+                // tips="offline_download"
                 onClick={() => {
                   bus.emit("tool", "offline_download")
                 }}
               />
             </Show>
             <RightIcon
-              tips="toggle_checkbox"
+              // tips="toggle_checkbox"
               as={TbCheckbox}
               onClick={toggleCheckbox}
             />
             <RightIcon
               as={AiOutlineSetting}
-              tips="local_settings"
+              // tips="local_settings"
               onClick={() => {
                 bus.emit("tool", "local_settings")
               }}
             />
           </VStack>
-          {/* <RightIcon tips="more" as={CgMoreO} onClick={onToggle} /> */}
         </VStack>
       </Show>
     </Box>