diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx index b4a8bca..bec6693 100644 --- a/src/routers/layout/header.tsx +++ b/src/routers/layout/header.tsx @@ -24,19 +24,20 @@ export default function Header() { const ReactiveHeader = memo(() => { return ( -
+
+ {/* 手机端 */}
- -
+ +
-
+
-
+
敬请期待
diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx index df9803b..aaeda9b 100644 --- a/src/routers/layout/index.tsx +++ b/src/routers/layout/index.tsx @@ -1,7 +1,6 @@ import { Flipped, Flipper } from "react-flip-toolkit"; import { Outlet, useMatch } from "react-router-dom"; import Header from "./header"; -import Header_Nav from "./nav"; import { useAppSelector } from "@store/hooks"; import { selectNavMoreShowed } from "@store/device/index"; import styles from "./layout.module.less"; @@ -42,11 +41,3 @@ const NavContent = () => { ); }; - -const OldNav = () => ( - - - -); diff --git a/src/routers/layout/search/index.tsx b/src/routers/layout/search/index.tsx index e0f24d5..db3fb55 100644 --- a/src/routers/layout/search/index.tsx +++ b/src/routers/layout/search/index.tsx @@ -1,10 +1,5 @@ -import SearchSharpIcon from "@mui/icons-material/SearchSharp"; import { Form, useLocation, useNavigate } from "react-router-dom"; -import styles from "./search.module.less"; -import { useSearchFocus } from "@components/proview/searchFocus"; -import { Flipped } from "react-flip-toolkit"; -import SearchIcon from "@mui/icons-material/Search"; -import { useURLParams } from "@utils/hooks/url"; +import PCSearch from "./pc"; // todo 增加高级搜索以及手机端的搜索 export default function Search() { const navigate = useNavigate(); @@ -12,32 +7,10 @@ export default function Search() { const value = (document.getElementById("q") as HTMLInputElement).value; navigate(`/search?tag=${value}`); }; - const [tag] = useURLParams(["tag"]); return ( <> -
- { - if (event.key === "Enter") { - handlerSubmit(); - } - }} - /> - - +
+
); diff --git a/src/routers/layout/search/pc/hooks.tsx b/src/routers/layout/search/pc/hooks.tsx new file mode 100644 index 0000000..7b4db49 --- /dev/null +++ b/src/routers/layout/search/pc/hooks.tsx @@ -0,0 +1,14 @@ +import { + changeSearchMode, + SelectModeType, + selectSearchMode, +} from "@store/device"; +import { useAppDispatch, useAppSelector } from "@store/hooks"; + +export const useSearchMode = () => { + const searchMode = useAppSelector(selectSearchMode); + const dispatch = useAppDispatch(), + handlerChangeSearchMode = (name: SelectModeType) => + dispatch(changeSearchMode(name)); + return { searchMode, handlerChangeSearchMode }; +}; diff --git a/src/routers/layout/search/pc/index.tsx b/src/routers/layout/search/pc/index.tsx new file mode 100644 index 0000000..3bd0eb0 --- /dev/null +++ b/src/routers/layout/search/pc/index.tsx @@ -0,0 +1,35 @@ +import React, { useRef } from "react"; +import { useSearchFocus } from "@components/proview/searchFocus"; +import styles from "../search.module.less"; +import { FC, useEffect } from "react"; +import SelectModeCom from "./selectModeNav"; +import Search from "./search"; + +export default function NormalSearch() { + const { focused, bind } = useSearchFocus(), + { onBlur } = bind; + const contentRef = useRef(); + useEffect(() => { + if (focused) { + window.addEventListener("scroll", onBlur, { + once: true, + }); + } + }, [focused]); + return ( +
+ + +
+
+ ); +} diff --git a/src/routers/layout/search/pc/search.tsx b/src/routers/layout/search/pc/search.tsx new file mode 100644 index 0000000..e11f89e --- /dev/null +++ b/src/routers/layout/search/pc/search.tsx @@ -0,0 +1,57 @@ +import { useSearchFocus } from "@components/proview/searchFocus"; +import { useURLParams } from "@utils/hooks/url"; +import SearchIcon from "@mui/icons-material/Search"; +import styles from "../search.module.less"; +import { useSearchMode } from "./hooks"; +import { useNavigate } from "react-router-dom"; +export default function Search() { + const [tag] = useURLParams(["tag"]); + const searchId = `pcSearch`; + const { focused, bind } = useSearchFocus(); + const { onFocus, onBlur } = bind; + const { searchMode, handlerChangeSearchMode } = useSearchMode(); + const navigate = useNavigate(), + handlerSubmit = () => { + const value = (document.getElementById(searchId) as HTMLInputElement) + .value; + navigate(`/search?tag=${value}`); + onBlur(); + }; + return ( + <> +
+
+ { + if (event.key === "Enter") { + handlerSubmit(); + } + }} + /> + +
+
+ + ); +} diff --git a/src/routers/layout/search/pc/selectModeNav.tsx b/src/routers/layout/search/pc/selectModeNav.tsx new file mode 100644 index 0000000..db00d77 --- /dev/null +++ b/src/routers/layout/search/pc/selectModeNav.tsx @@ -0,0 +1,41 @@ +import { selectModeList } from "@store/device"; +import { FC } from "react"; +import styles from "../search.module.less"; +import { useSearchMode } from "./hooks"; +/** + * 搜索模式选择 + */ +export default function SelectModeCom() { + const { searchMode, handlerChangeSearchMode } = useSearchMode(); + return ( +
+ {selectModeList.map((item, key) => ( + + ))} +
+ ); +} + +type SelectButtonType = { + selected: boolean; + label: string; + onChange: () => void; +}; + +const SelectButton: FC = ({ selected, label, onChange }) => { + return ( +
+ +
+ ); +}; diff --git a/src/routers/layout/search/search.module.less b/src/routers/layout/search/search.module.less index 4302495..de25901 100644 --- a/src/routers/layout/search/search.module.less +++ b/src/routers/layout/search/search.module.less @@ -1,93 +1,56 @@ -// .search-box { -// position: relative; -// z-index: 10; -// margin: 0 8px; -// min-width: 180px; -// max-width: 500px; -// width: 100%; - -// .search-form { -// border-radius: 8px; -// display: flex; -// align-items: center; -// height: 40px; -// opacity: .9; -// transition: background-color .3s; -// background-color: #f1f2f3; -// border: 1px solid #E3E5E7; - -// &:hover { -// background-color: #fff; -// } - -// .search-content { -// flex: 1; -// display: flex; -// align-items: center; -// position: relative; -// padding: 0 8px; -// margin-right: 8px; -// height: 32px; -// border: 2px solid transparent; -// border-radius: 6px; - -// .search-input { -// flex: 1; -// overflow: hidden; -// padding-right: 8px; -// border: none; -// background-color: transparent; -// box-shadow: none; -// font-size: 14px; -// line-height: 20px; -// color: #61666D; - -// &:focus-visible { -// outline: none; -// } -// } -// } - -// .search-btn { -// display: flex; -// margin: 0; -// padding: 0; -// align-items: center; -// justify-content: center; -// width: 32px; -// height: 32px; -// border: none; -// border-radius: 6px; -// cursor: pointer; -// transition: background-color .3s; - -// &:hover { -// background-color: #E3E5E7; -// } -// } -// } - -// .form-active { -// border-bottom-left-radius: 0; -// border-bottom-right-radius: 0; -// background-color: #fff; - - -// .search-content { -// background-color: #f1f2f3; -// } -// } -// } - - .search-box { box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 5%); border-radius: 40px; border: 1px solid #DDD; padding: 7px; display: flex; + background-color: white; + max-width: 100%; + box-sizing: border-box; + justify-content: space-between; + align-items: stretch; + margin: auto; + width: 288px; + + &.focus { + width: 850px; + height: 65px; + } .search-button { border-radius: 40px; + cursor: pointer; + padding: 8px; + color: white; + position: relative; + margin: auto; + display: flex; + justify-content: center; + align-items: center; + + } +} + +.pc-search { + transition-duration: 300ms; + display: flex; + flex-direction: column; + + &::after { + content: ''; + width: 64px; + margin: 0 auto; + height: 2px; + background-color: currentColor; + transform: scaleX(0); + transition: transform 200ms ease; + } + + &:hover::after { + transform: scaleX(1); + } + + &.active::after { + transform: scaleX(1); } } \ No newline at end of file diff --git a/src/store/device/index.ts b/src/store/device/index.ts index 8a2f145..3bff900 100644 --- a/src/store/device/index.ts +++ b/src/store/device/index.ts @@ -1,15 +1,23 @@ -import { createSlice } from "@reduxjs/toolkit"; +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import type { RootState } from ".."; +export type SelectModeType = typeof selectModeList[number]; +export const selectModeList = ["搜索tag", "搜索更多"] as const; + interface DeviceState { /** * @description nav栏是否展开 */ navMoreShowed: boolean; + /** + * + */ + selectSearchMode: SelectModeType; } const initialState: DeviceState = { navMoreShowed: false, + selectSearchMode: "搜索tag", }; export const DeviceSlice = createSlice({ name: "device", @@ -21,14 +29,22 @@ export const DeviceSlice = createSlice({ changeNavMoreShowed: (state) => { state.navMoreShowed = !state.navMoreShowed; }, + /** + * @description 修改搜索模式 + */ + changeSearchMode: (state, action: PayloadAction) => { + state.selectSearchMode = action.payload; + }, }, }); -export const { changeNavMoreShowed } = DeviceSlice.actions; +export const { changeNavMoreShowed, changeSearchMode } = DeviceSlice.actions; /** * @description 获取nav是否展开 */ export const selectNavMoreShowed = (state: RootState) => state.device.navMoreShowed; +export const selectSearchMode = (state: RootState) => + state.device.selectSearchMode; export default DeviceSlice.reducer;