Zverse/ai-digital-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 新闻素材筛选条件缓存

Browse Source
This commit is contained in:
LittleBoy 2024-12-24 11:32:50 +08:00 committed by Coding
parent d35594fbb6
commit 72d967fbc6
3 changed files with 55 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/hooks/useCache.ts
View File

@ -8,42 +8,6 @@ type StoreInstance<T> = {
add: (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) => ({
cache: [],
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

40
src/pages/news/components/search-panel.tsx
View File

@ -1,6 +1,6 @@
import {Input} from "antd";
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 useArticleTags from "@/hooks/useArticleTags.ts";
@ -12,6 +12,7 @@ import {IconPin} from "@/components/icons";
type SearchPanelProps = {
onSearch?: (params: ApiArticleSearchParams) => void;
defaultParams?: Partial<ApiArticleSearchParams>;
}
const pagination = {
limit: 12, page: 1
@ -21,19 +22,46 @@ const DEFAULT_STATE = {
tag_level_2_id: -1,
subOptions: []
}
export default function SearchPanel({onSearch}: SearchPanelProps) {
export default function SearchPanel({onSearch,defaultParams}: SearchPanelProps) {
const tags = useArticleTags();
const [params, setParams] = useSetState<ApiArticleSearchParams>({
pagination,
time_flag:1
time_flag:1,
...(defaultParams || {})
});
const [prevSearchName, setPrevSearchName] = useState<string>()
const [prevSearchName, setPrevSearchName] = useState<string>(defaultParams?.title||'')
const [state, setState] = useSetState<{
tag_level_1_id: number;
tag_level_2_id: 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[]>(
'user-pinned-tag-list',
{
@ -202,7 +230,7 @@ export default function SearchPanel({onSearch}: SearchPanelProps) {
{
subOptions.map(it => (
<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}
onClick={() => {
handleFilter({tag_level_1_id:state.tag_level_1_id,tag_level_2_id: Number(it.value)})

31
src/pages/news/index.tsx
View File

@ -12,15 +12,19 @@ import ButtonNewsDownload from "@/pages/news/components/button-news-download.tsx
import {clsx} from "clsx";
import InfiniteScroller, {InfiniteScrollerRef} from "@/components/scoller/infinite-scroller.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() {
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 {cache:checkedId,set:setCheckedId} = useIndexArrayCache()
const {cache: checkedId, set: setCheckedId} = useIndexArrayCache()
const [activeNews, setActiveNews] = useState<NewsInfo>()
@ -33,6 +37,11 @@ export default function NewsIndex() {
const {loading} = useRequest(() => getList(params), {
refreshDeps: [params],
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) {
setData(_data)
setState({checkAll: checkedId && _data.list && checkedId.length === _data.list.length})
@ -55,12 +64,12 @@ export default function NewsIndex() {
})
}
const currentEnabledList = useMemo(()=>{
if(data?.list && data?.list?.length > 0){
return data.list.filter(s=>s.internal_article_id == 0)
const currentEnabledList = useMemo(() => {
if (data?.list && data?.list?.length > 0) {
return data.list.filter(s => s.internal_article_id == 0)
}
return [];
},[data?.list])
}, [data?.list])
const handleCheckAll = (checked: boolean) => {
setState({checkAll: checked})
if (checked) {
@ -78,10 +87,10 @@ export default function NewsIndex() {
}
}
return (<div className={'container pb-5'}>
<SearchPanel onSearch={setParams}/>
<SearchPanel defaultParams={params} onSearch={setParams}/>
{activeNews && <Modal
rootClassName={'news-detail-modal'}
closeIcon={null} open={true} width={1000}
closeIcon={null} open={true} width={1000}
footer={null} onCancel={() => setActiveNews(undefined)}
>
<div className="news-detail pl-16 pr-1 flex pb-5">
@ -162,7 +171,7 @@ export default function NewsIndex() {
<div className="info text-gray-400 mt-4 text-sm">
<div className="line-clamp-1">来源: <span>{item.data_source_name}</span></div>
<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.content_word_count}</span></div>
<div