💄 style(custom): 手机端搜索栏样式修改，pc端高级搜索当无输入内容时展示默认内容

EOEFANS · Mar 1, 2023 · edd527f · edd527f
1 parent e6d0048
commit edd527f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/config/vite.master.config.ts b/config/vite.master.config.ts
@@ -83,6 +83,8 @@ export default mergeConfig(
             react: ["react", "react-dom"],
             "react-router": ["react-router-dom"],
             "react-redux": ["@reduxjs/toolkit", "react-redux"],
+            masonic: ["masonic"],
+            sentry: ["@sentry/react", "@sentry/tracing"],
             axios: ["axios"],
             lib: [
               "@mui/icons-material",
@@ -104,6 +106,7 @@ export default mergeConfig(
               "react-intersection-observer",
               "dayjs",
             ],
+            "react-photo-view": ["react-photo-view"],
           },
         },
       },

diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx
@@ -24,7 +24,7 @@ const ReactiveHeader = memo(() => {
   return (
     <header className='border-t-2 z-10 max-md:border-b-2 sticky top-0 bg-white'>
       {/* 手机端 */}
-      <div className='hidden max-sm:flex px-6 pt-2'>
+      <div className='hidden max-sm:flex px-6 pb-3 pt-4'>
         <Search />
       </div>
       {/* pc端和平板端header部 */}

diff --git a/src/routers/layout/search/pc/search.tsx b/src/routers/layout/search/pc/search.tsx
@@ -119,13 +119,15 @@ const AdvanceSearchItem = forwardRef<HTMLInputElement, AdvanceItemProps>(
   (props, ref) => {
     const { inputRef, handerfocus } = useBackRef(ref);
     const { focused } = useSearchFocus();
+    const inptValue = inputRef.current?.value,
+      showedTitle = focused ? props.title : inptValue ? inptValue : props.title;
     return (
       <>
         <div
           className={`${pcStyles["SearchItem"]} ${pcStyles["itemPadding"]} ${pcStyles["item"]}`}
           onClick={handerfocus}
         >
-          <span>{focused ? props.title : inputRef.current?.value}</span>
+          <span>{showedTitle}</span>
           <input
             ref={inputRef}
             autoComplete='off'
@@ -149,6 +151,8 @@ const AdvanceSearchLastItem = forwardRef<
 >((props, ref) => {
   const { inputRef, handerfocus } = useBackRef(ref);
   const { focused } = useSearchFocus();
+  const inptValue = inputRef.current?.value,
+    showedTitle = focused ? props.title : inptValue ? inptValue : props.title;
   return (
     <>
       <div
@@ -158,7 +162,7 @@ const AdvanceSearchLastItem = forwardRef<
         <div
           className={`flex-grow ${pcStyles["itemPadding"]} ${pcStyles["item"]}`}
         >
-          <span>{focused ? props.title : inputRef.current?.value}</span>
+          <span>{showedTitle}</span>
           <input
             ref={inputRef}
             autoComplete='off'