update: 新闻素材筛选条件缓存
This commit is contained in:
parent
d35594fbb6
commit
72d967fbc6
@ -8,42 +8,6 @@ type StoreInstance<T> = {
|
|||||||
add: (value: T) => void;
|
add: (value: T) => void;
|
||||||
remove: (value: T) => void
|
remove: (value: T) => void
|
||||||
}
|
}
|
||||||
// function createStore<T>(set: Get<StoreApi<StoreInstance<Id>>, "setState", never>){
|
|
||||||
// return {
|
|
||||||
// data: [],
|
|
||||||
// set: (values: T[]) => {
|
|
||||||
// set(s=>{
|
|
||||||
//
|
|
||||||
// })
|
|
||||||
// // set()
|
|
||||||
// set({data: values})
|
|
||||||
// },
|
|
||||||
// clear: () => {
|
|
||||||
// set({data: []})
|
|
||||||
// },
|
|
||||||
// add: (id: Id) => {
|
|
||||||
// set((state) => ({
|
|
||||||
// data: [...state.data, id]
|
|
||||||
// }))
|
|
||||||
// },
|
|
||||||
// remove: (id: Id) => {
|
|
||||||
// set((state) => ({
|
|
||||||
// data: state.data.filter((item) => item != id)
|
|
||||||
// }))
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// export const useIndexIdCache = create<StoreInstance<Id>>((set) => {
|
|
||||||
// //createStore<Id>(set)
|
|
||||||
// return {
|
|
||||||
// data: [],
|
|
||||||
// xxx: () => {
|
|
||||||
// set(s => {
|
|
||||||
// s.data = [...s.data, 1]
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
export const useIndexArrayCache = create<StoreInstance<Id>>((set) => ({
|
export const useIndexArrayCache = create<StoreInstance<Id>>((set) => ({
|
||||||
cache: [],
|
cache: [],
|
||||||
set: (values: Id[]) => {
|
set: (values: Id[]) => {
|
||||||
@ -63,74 +27,4 @@ export const useIndexArrayCache = create<StoreInstance<Id>>((set) => ({
|
|||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
}))
|
}))
|
||||||
//
|
|
||||||
// export const useCacheStore = create<{
|
|
||||||
// [dataKey: string]: Id[];
|
|
||||||
// clear: (key: string) => void;
|
|
||||||
// set: (key: string, value: Id[]) => void;
|
|
||||||
// add: (key: string, id: Id) => void;
|
|
||||||
// remove: (key: string, id: Id) => void
|
|
||||||
// }>((set) => ({
|
|
||||||
// data: {},
|
|
||||||
// clear: (key: string) => {
|
|
||||||
// set(s => {
|
|
||||||
// s[key] = []
|
|
||||||
// return s;
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
// set: (key: string, value: Id[]) => {
|
|
||||||
// set((s) => {
|
|
||||||
// s[key] = value
|
|
||||||
// return s;
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
// add: (key: string, id: Id) => {
|
|
||||||
// console.log(id, 'add cache', key)
|
|
||||||
// set((s) => {
|
|
||||||
// if (!s[key]) {
|
|
||||||
// s[key] = [];
|
|
||||||
// }
|
|
||||||
// s[key].push(id)
|
|
||||||
// return s;
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
// remove: (key: string, id: Id) => {
|
|
||||||
// set((s) => {
|
|
||||||
// if (!s[key]) {
|
|
||||||
// return s;
|
|
||||||
// }
|
|
||||||
// s[key] = s[key].filter((item) => item != id)
|
|
||||||
// return s;
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
// }))
|
|
||||||
//
|
|
||||||
// function useCache(key: 'index' | 'edit') {
|
|
||||||
// //{data,set,add,remove,clear}
|
|
||||||
// const store = useCacheStore()
|
|
||||||
//
|
|
||||||
// return {
|
|
||||||
// store,
|
|
||||||
// data: store[key],
|
|
||||||
// getCache: () => {
|
|
||||||
// // return cache.data[key] || []
|
|
||||||
// return store[key] || [];
|
|
||||||
// },
|
|
||||||
// setCache: (value: Id[]) => {
|
|
||||||
// store.set(key, value)
|
|
||||||
// },
|
|
||||||
// clearCache: () => {
|
|
||||||
// store.clear(key)
|
|
||||||
// },
|
|
||||||
// addCache: (id: Id, addSame = false) => {
|
|
||||||
// if (!addSame && store[key]?.includes(id)) return;
|
|
||||||
// console.log(id, 'add cache')
|
|
||||||
// store.add(key, id)
|
|
||||||
// },
|
|
||||||
// removeCache: (id: Id) => {
|
|
||||||
// store.remove(key, id)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// export default useCache
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import {Input} from "antd";
|
import {Input} from "antd";
|
||||||
import {useBoolean, useLocalStorageState, useSetState,useClickAway} from "ahooks";
|
import {useBoolean, useLocalStorageState, useSetState,useClickAway} from "ahooks";
|
||||||
import {useCallback, useMemo, useRef, useState} from "react";
|
import {useCallback, useEffect, useMemo, useRef, useState} from "react";
|
||||||
import {clsx} from "clsx";
|
import {clsx} from "clsx";
|
||||||
import useArticleTags from "@/hooks/useArticleTags.ts";
|
import useArticleTags from "@/hooks/useArticleTags.ts";
|
||||||
|
|
||||||
@ -12,6 +12,7 @@ import {IconPin} from "@/components/icons";
|
|||||||
|
|
||||||
type SearchPanelProps = {
|
type SearchPanelProps = {
|
||||||
onSearch?: (params: ApiArticleSearchParams) => void;
|
onSearch?: (params: ApiArticleSearchParams) => void;
|
||||||
|
defaultParams?: Partial<ApiArticleSearchParams>;
|
||||||
}
|
}
|
||||||
const pagination = {
|
const pagination = {
|
||||||
limit: 12, page: 1
|
limit: 12, page: 1
|
||||||
@ -21,19 +22,46 @@ const DEFAULT_STATE = {
|
|||||||
tag_level_2_id: -1,
|
tag_level_2_id: -1,
|
||||||
subOptions: []
|
subOptions: []
|
||||||
}
|
}
|
||||||
export default function SearchPanel({onSearch}: SearchPanelProps) {
|
export default function SearchPanel({onSearch,defaultParams}: SearchPanelProps) {
|
||||||
const tags = useArticleTags();
|
const tags = useArticleTags();
|
||||||
const [params, setParams] = useSetState<ApiArticleSearchParams>({
|
const [params, setParams] = useSetState<ApiArticleSearchParams>({
|
||||||
pagination,
|
pagination,
|
||||||
time_flag:1
|
time_flag:1,
|
||||||
|
...(defaultParams || {})
|
||||||
});
|
});
|
||||||
const [prevSearchName, setPrevSearchName] = useState<string>()
|
const [prevSearchName, setPrevSearchName] = useState<string>(defaultParams?.title||'')
|
||||||
|
|
||||||
const [state, setState] = useSetState<{
|
const [state, setState] = useSetState<{
|
||||||
tag_level_1_id: number;
|
tag_level_1_id: number;
|
||||||
tag_level_2_id: number;
|
tag_level_2_id: number;
|
||||||
subOptions: (string | number)[]
|
subOptions: (string | number)[]
|
||||||
}>({...DEFAULT_STATE})
|
}>({
|
||||||
|
...DEFAULT_STATE,
|
||||||
|
...(defaultParams&&defaultParams.tag_level_1_id?{tag_level_1_id:defaultParams.tag_level_1_id}: {}),
|
||||||
|
...(defaultParams&&defaultParams.tag_level_2_id?{tag_level_2_id:defaultParams.tag_level_2_id}: {})
|
||||||
|
})
|
||||||
|
useEffect(()=>{
|
||||||
|
if(!defaultParams){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const _state = {
|
||||||
|
tag_level_1_id: -1,
|
||||||
|
tag_level_2_id: -1,
|
||||||
|
}
|
||||||
|
|
||||||
|
if(defaultParams.tag_level_1_id){
|
||||||
|
_state.tag_level_1_id = defaultParams.tag_level_1_id
|
||||||
|
if(tags && tags.length > 0){
|
||||||
|
const tag = tags.find(s => s.value == defaultParams.tag_level_1_id)
|
||||||
|
setSubOptions(tag?.children || [])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(defaultParams.tag_level_2_id){
|
||||||
|
_state.tag_level_2_id = defaultParams.tag_level_2_id
|
||||||
|
}
|
||||||
|
console.log('xaf',_state)
|
||||||
|
setState(_state)
|
||||||
|
},[tags])
|
||||||
const [pinnedTag, setPinnedTag] = useLocalStorageState<number[]>(
|
const [pinnedTag, setPinnedTag] = useLocalStorageState<number[]>(
|
||||||
'user-pinned-tag-list',
|
'user-pinned-tag-list',
|
||||||
{
|
{
|
||||||
@ -202,7 +230,7 @@ export default function SearchPanel({onSearch}: SearchPanelProps) {
|
|||||||
{
|
{
|
||||||
subOptions.map(it => (
|
subOptions.map(it => (
|
||||||
<div
|
<div
|
||||||
className={`filter-item whitespace-nowrap px-2 py-1 mt-1 text-sm mr-1 cursor-pointer rounded text-gray-400 ${state.tag_level_2_id == it.value ? 'text-black' : 'hover:text-gray-600'}`}
|
className={`filter-item whitespace-nowrap px-2 py-1 mt-1 text-sm mr-1 cursor-pointer rounded ${state.tag_level_2_id == it.value ? 'text-black' : ' text-gray-400 hover:text-gray-600'}`}
|
||||||
key={it.value}
|
key={it.value}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
handleFilter({tag_level_1_id:state.tag_level_1_id,tag_level_2_id: Number(it.value)})
|
handleFilter({tag_level_1_id:state.tag_level_1_id,tag_level_2_id: Number(it.value)})
|
||||||
|
@ -12,15 +12,19 @@ import ButtonNewsDownload from "@/pages/news/components/button-news-download.tsx
|
|||||||
import {clsx} from "clsx";
|
import {clsx} from "clsx";
|
||||||
import InfiniteScroller, {InfiniteScrollerRef} from "@/components/scoller/infinite-scroller.tsx";
|
import InfiniteScroller, {InfiniteScrollerRef} from "@/components/scoller/infinite-scroller.tsx";
|
||||||
import ButtonToTop from "@/components/scoller/button-to-top.tsx";
|
import ButtonToTop from "@/components/scoller/button-to-top.tsx";
|
||||||
import { useIndexArrayCache} from "@/hooks/useCache.ts";
|
import {useIndexArrayCache} from "@/hooks/useCache.ts";
|
||||||
|
|
||||||
|
const FilterCache: Partial<ApiArticleSearchParams> = {
|
||||||
|
time_flag: 1,
|
||||||
|
}
|
||||||
export default function NewsIndex() {
|
export default function NewsIndex() {
|
||||||
|
|
||||||
const [params, setParams] = useState<ApiArticleSearchParams>({
|
const [params, setParams] = useState<ApiArticleSearchParams>({
|
||||||
pagination: {page: 1, limit: 12},time_flag:1
|
pagination: {page: 1, limit: 12},
|
||||||
|
...FilterCache
|
||||||
})
|
})
|
||||||
|
|
||||||
// const [checkedId, setCheckedId] = useState<Id[]>([])
|
// const [checkedId, setCheckedId] = useState<Id[]>([])
|
||||||
const {cache:checkedId,set:setCheckedId} = useIndexArrayCache()
|
const {cache: checkedId, set: setCheckedId} = useIndexArrayCache()
|
||||||
|
|
||||||
const [activeNews, setActiveNews] = useState<NewsInfo>()
|
const [activeNews, setActiveNews] = useState<NewsInfo>()
|
||||||
|
|
||||||
@ -33,6 +37,11 @@ export default function NewsIndex() {
|
|||||||
const {loading} = useRequest(() => getList(params), {
|
const {loading} = useRequest(() => getList(params), {
|
||||||
refreshDeps: [params],
|
refreshDeps: [params],
|
||||||
onSuccess: (_data) => {
|
onSuccess: (_data) => {
|
||||||
|
FilterCache.tag_level_1_id = params.tag_level_1_id;
|
||||||
|
FilterCache.tag_level_2_id = params.tag_level_2_id;
|
||||||
|
FilterCache.title = params.title;
|
||||||
|
FilterCache.time_flag = params.time_flag;
|
||||||
|
console.log('success',FilterCache)
|
||||||
if (params.pagination.page === 1) {
|
if (params.pagination.page === 1) {
|
||||||
setData(_data)
|
setData(_data)
|
||||||
setState({checkAll: checkedId && _data.list && checkedId.length === _data.list.length})
|
setState({checkAll: checkedId && _data.list && checkedId.length === _data.list.length})
|
||||||
@ -55,12 +64,12 @@ export default function NewsIndex() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const currentEnabledList = useMemo(()=>{
|
const currentEnabledList = useMemo(() => {
|
||||||
if(data?.list && data?.list?.length > 0){
|
if (data?.list && data?.list?.length > 0) {
|
||||||
return data.list.filter(s=>s.internal_article_id == 0)
|
return data.list.filter(s => s.internal_article_id == 0)
|
||||||
}
|
}
|
||||||
return [];
|
return [];
|
||||||
},[data?.list])
|
}, [data?.list])
|
||||||
const handleCheckAll = (checked: boolean) => {
|
const handleCheckAll = (checked: boolean) => {
|
||||||
setState({checkAll: checked})
|
setState({checkAll: checked})
|
||||||
if (checked) {
|
if (checked) {
|
||||||
@ -78,7 +87,7 @@ export default function NewsIndex() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
return (<div className={'container pb-5'}>
|
return (<div className={'container pb-5'}>
|
||||||
<SearchPanel onSearch={setParams}/>
|
<SearchPanel defaultParams={params} onSearch={setParams}/>
|
||||||
{activeNews && <Modal
|
{activeNews && <Modal
|
||||||
rootClassName={'news-detail-modal'}
|
rootClassName={'news-detail-modal'}
|
||||||
closeIcon={null} open={true} width={1000}
|
closeIcon={null} open={true} width={1000}
|
||||||
@ -162,7 +171,7 @@ export default function NewsIndex() {
|
|||||||
<div className="info text-gray-400 mt-4 text-sm">
|
<div className="info text-gray-400 mt-4 text-sm">
|
||||||
<div className="line-clamp-1">来源: <span>{item.data_source_name}</span></div>
|
<div className="line-clamp-1">来源: <span>{item.data_source_name}</span></div>
|
||||||
<div className="extras flex items-center justify-between gap-3">
|
<div className="extras flex items-center justify-between gap-3">
|
||||||
<div><span>{formatTime(item.publish_time,'min')}</span></div>
|
<div><span>{formatTime(item.publish_time, 'min')}</span></div>
|
||||||
<div><span>图片数: {item.img_num}</span></div>
|
<div><span>图片数: {item.img_num}</span></div>
|
||||||
<div><span>字数: {item.content_word_count}</span></div>
|
<div><span>字数: {item.content_word_count}</span></div>
|
||||||
<div
|
<div
|
||||||
|
Loading…
x
Reference in New Issue
Block a user