refactor: change the selected background color of the item (#421)

src/components/Search/Calculator.tsx

@@ -18,14 +18,7 @@ const Calculator: FC<CalculatorProps> = (props) => {
 
   const renderItem = (result: string, description: string) => {
     return (
-      <div
-        className={clsx(
-          "flex-1 flex flex-col gap-1 items-center justify-center h-[90px] overflow-hidden rounded-md border border-transparent transition bg-[#ededed] dark:bg-[#202126]",
-          {
-            "!border-[#881C94]": isSelected,
-          }
-        )}
-      >
+      <div className="flex-1 flex flex-col gap-1 items-center justify-center h-[90px] overflow-hidden rounded-[4px] border border-transparent transition bg-[#F8F8F8] dark:bg-[#141414]">
         <div className="w-[90%] text-xl text-[#333] dark:text-[#d8d8d8] truncate text-center">
           {result}
         </div>
@@ -38,7 +31,12 @@ const Calculator: FC<CalculatorProps> = (props) => {
 
   return (
     <div
-      className="flex items-center gap-1 w-full children:flex"
+      className={clsx(
+        "flex items-center gap-1 p-2 w-full rounded-lg transition",
+        {
+          "bg-[#EDEDED] dark:bg-[#202126]": isSelected,
+        }
+      )}
       onDoubleClick={() => {
         copyToClipboard(result.value);
       }}

src/components/Search/DropdownList.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState, useCallback, MouseEvent } from "react";
 import { CircleAlert, Bolt, X, ArrowBigRight } from "lucide-react";
 import { isNil } from "lodash-es";
-import clsx from "clsx";
 import { useDebounceFn, useUnmount } from "ahooks";
 import { useTranslation } from "react-i18next";
 
@@ -33,7 +32,7 @@ function DropdownList({
   isChatMode,
 }: DropdownListProps) {
   const { t } = useTranslation();
-  
+
   let globalIndex = 0;
   const globalItemIndexMap: any[] = [];
 
@@ -46,7 +45,9 @@ function DropdownList({
   const containerRef = useRef<HTMLDivElement>(null);
   const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
 
-  const setSelectedSearchContent = useSearchStore((state) => state.setSelectedSearchContent);
+  const setSelectedSearchContent = useSearchStore(
+    (state) => state.setSelectedSearchContent
+  );
 
   const hideArrowRight = (item: any) => {
     const categories = ["Calculator"];
@@ -242,28 +243,21 @@ function DropdownList({
               </div>
             )}
 
-            {items.map((hit: any, index: number) => {
+            {items.map((hit: any) => {
               const isSelected = selectedItem === globalIndex;
               const currentIndex = globalIndex;
               const item = hit.document;
               globalItemIndexMap.push(item);
               globalIndex++;
 
-              // TODO：https://lanhuapp.com/web/#/item/project/detailDetach?pid=fed58f5b-a117-4fe4-a521-c71f2e9b88c3&project_id=fed58f5b-a117-4fe4-a521-c71f2e9b88c3&image_id=a0afd01b-da7d-47c8-818b-90496fb28a71&fromEditor=true
               return (
-                <div key={item.id + index} onContextMenu={handleContextMenu}>
+                <div key={item.id} onContextMenu={handleContextMenu}>
                   {hideArrowRight(item) ? (
                     <div
+                      ref={(el) => (itemRefs.current[currentIndex] = el)}
                       onMouseEnter={() => setSelectedItem(currentIndex)}
-                      className={clsx({
-                        "mt-1": !showHeader,
-                      })}
                     >
                       <Calculator item={item} isSelected={isSelected} />
-
-                      {!showHeader && (
-                        <div className="h-px mt-3 mx-2 bg-[#E6E6E6] dark:bg-[#262626]" />
-                      )}
                     </div>
                   ) : (
                     <SearchListItem

src/components/Search/ListRight.tsx

@@ -118,7 +118,7 @@ export default function ListRight({
     >
       <RichCategories
         item={item}
-        isSelected={isSelected}
+        isSelected={false}
         goToTwoPage={goToTwoPage}
       />
 
@@ -128,9 +128,6 @@ export default function ListRight({
           rootClassName={clsx("!absolute", [
             showIndex && currentIndex < 10 ? "right-9" : "right-2",
           ])}
-          shortcutClassName={clsx({
-            "!shadow-[-6px_0px_6px_2px_#950599]": isSelected,
-          })}
         />
       )}
 
@@ -138,9 +135,6 @@ export default function ListRight({
         <VisibleKey
           shortcut={String(currentIndex === 9 ? 0 : currentIndex + 1)}
           rootClassName="!absolute right-2"
-          shortcutClassName={clsx({
-            "!shadow-[-6px_0px_6px_2px_#950599]": isSelected,
-          })}
         />
       )}
     </div>

src/components/Search/SearchListItem.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import clsx from "clsx";
 
 import ItemIcon from "@/components/Common/Icons/ItemIcon";
 import ListRight from "./ListRight";
@@ -38,11 +39,13 @@ const SearchListItem: React.FC<SearchListItemProps> = React.memo(
         ref={itemRef}
         onMouseEnter={onMouseEnter}
         onClick={onItemClick}
-        className={`w-full px-2 py-2.5 text-sm flex mb-0 flex-row items-center mobile:mb-2 mobile:flex-col mobile:items-start justify-between rounded-lg transition-colors cursor-pointer ${
-          isSelected
-            ? "text-white bg-[var(--coco-primary-color)] hover:bg-[var(--coco-primary-color)]"
-            : "text-[#333] dark:text-[#d8d8d8] mobile:bg-gray-200/80 mobile:dark:bg-gray-700/50"
-        } ${showListRight ? "gap-7 mobile:gap-1" : ""}`}
+        className={clsx(
+          "w-full px-2 py-2.5 text-sm flex mb-0 flex-row items-center mobile:mb-2 mobile:flex-col mobile:items-start justify-between rounded-lg transition-colors cursor-pointer text-[#333] dark:text-[#d8d8d8] mobile:bg-gray-200/80 mobile:dark:bg-gray-700/50",
+          {
+            "bg-[#EDEDED] dark:bg-[#202126]": isSelected,
+            "gap-7 mobile:gap-1": showListRight,
+          }
+        )}
       >
         <div
           className={`${