💄 style(custom): tag栏修改样式

EOEFANS · Feb 27, 2023 · 1f68668 · 1f68668
1 parent 7c4e758
commit 1f68668
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 12 deletions.
diff --git a/src/routers/layout/nav/index.tsx b/src/routers/layout/nav/index.tsx
@@ -45,7 +45,7 @@ import {
   selectVideoActiveTags,
 } from "@store/tags/index";
 
-function useSelectList() {
+export function useTagSelectList() {
   const { pathname } = useLocation(),
     flag = pathname === "/photo",
     storageSelect = flag ? PhotoNavStorage : VideoNavStorage;
@@ -61,7 +61,7 @@ type HeaderNavType = {
 
 export default function Header_Nav(props: HeaderNavType) {
   const { shouldShow = false } = props;
-  const { navLists, setLists, storageSelect } = useSelectList();
+  const { navLists, setLists, storageSelect } = useTagSelectList();
   //tag区是否展开
   const showed = useAppSelector(selectNavMoreShowed);
   //拖拽事件绑定
@@ -223,10 +223,11 @@ const NavTagChipItem: FC<VideoNavQueryItemType | PhotoNavQueryItemType> = memo(
     const color = nameToColor[props.query] || "info";
     return (
       <Chip
+        onClick={handerclick}
         label={props.query}
-        className={`rounded px-3 py-1 text-gray-700 text-sm font-normal bg-gray-100 duration-300 hover:bg-gray-200 ${
-          loading ? "cursor-wait" : "cursor-pointer"
-        } ${clicked ? "text-blue-400" : ""}`}
+        className={`rounded px-3 py-1 text-sm font-normal bg-gray-100 duration-300 hover:bg-gray-200 ${
+          loading ? "cursor-wait pointer-events-none" : "cursor-pointer"
+        } ${clicked ? "text-blue-400" : "text-gray-700"}`}
       />
     );
     return (

diff --git a/src/routers/layout/rightSide/index.tsx b/src/routers/layout/rightSide/index.tsx
diff --git a/src/store/tags/index.ts b/src/store/tags/index.ts
@@ -8,6 +8,7 @@ import {
   PhotoQueryNavList,
 } from "@routers/layout/nav/photoTools";
 import type { RootState } from "..";
+import { useAppDispatch, useAppSelector } from "@store/hooks";
 
 const Photo_Topic_id_all = PhotoQueryNavList.find(
     (item) => item.queryString === 0
@@ -23,12 +24,16 @@ interface TagStates {
   /**
    * @description video页面点击tags
    */
-  VideoActiveTags: VideoNavQueryItemType[];
+  VideoActiveTags: VideoTagsType;
   /**
    * @description photo page active tags
    */
-  PhotoActivetags: PhotoNavQueryItemType[];
+  PhotoActivetags: photoTagsType;
 }
+
+type VideoTagsType = VideoNavQueryItemType[];
+type photoTagsType = PhotoNavQueryItemType[];
+
 const initialState: TagStates = {
   VideoActiveTags: [Video_default_show],
   PhotoActivetags: [Photo_Topic_id_all, Photo_type_default],
@@ -122,3 +127,37 @@ export const selectVideoActiveTags = (state: RootState) =>
   selectPhotoActiveTags = (state: RootState) =>
     state.ActiveTags.PhotoActivetags;
 export default ActiveTagsSlice.reducer;
+
+export const useSelectVideoActiveTags = () =>
+    useAppSelector(selectVideoActiveTags),
+  useSelectPhotoActiveTags = () => useAppSelector(selectPhotoActiveTags);
+export const useStoreVideoTags = () => {
+    const activeTags = useSelectVideoActiveTags();
+    const dispath = useAppDispatch(),
+      handerChangeActiveTags = (
+        type: "add" | "delete",
+        data: VideoNavQueryItemType
+      ) => {
+        if (type === "add") {
+          dispath(handerVideoAddTag(data));
+        } else {
+          dispath(handerVideoDeleteTag(data));
+        }
+      };
+    return [activeTags, handerChangeActiveTags];
+  },
+  useStorePhotoTags = () => {
+    const activeTags = useSelectPhotoActiveTags();
+    const dispath = useAppDispatch(),
+      handerChangeActiveTags = (
+        type: "add" | "delete",
+        data: PhotoNavQueryItemType
+      ) => {
+        if (type === "add") {
+          dispath(handerPhotoAddTag(data));
+        } else {
+          dispath(handerPhotoDeleteTag(data));
+        }
+      };
+    return [activeTags, handerChangeActiveTags];
+  };