modify: 1、修改首页「概览图」的数据加载，改为标签数量分布，去掉 redux 和云函数

kangood · Dec 12, 2023 · 008592e · 008592e
1 parent dd85ecb
commit 008592e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 44 deletions.
diff --git a/src/components/ChartCard/config.ts b/src/components/ChartCard/config.ts
@@ -1,59 +1,26 @@
-import { useMount, useRequest } from 'ahooks';
-import { useDispatch, useSelector } from 'react-redux';
+import { countListArticleTag } from '@/services/article';
 
-import { selectArticle, selectClass } from '@/redux/selectors';
-import { setClasses } from '@/redux/slices/classes';
-import { getDataAPI } from '@/utils/apis/getData';
-import { _ } from '@/utils/cloudBase';
-import { DB } from '@/utils/dbConfig';
-
-interface ClassType {
-  class: string;
+interface TagCountType {
+  tag: string;
   count: number;
-  _id: string;
-  _openid: string;
 }
 
 export const useChartData = () => {
-  const classes = useSelector(selectClass);
-  const articles = useSelector(selectArticle);
-  const dispatch = useDispatch();
+  const { data: tagCountList, isLoading: tagCountLoading } = countListArticleTag();
 
-  const formatData = (classData: ClassType[], total: number) => {
-    if (classData === undefined || total === undefined) return [];
-    let sum = 0;
+  const formatData = (tagCountList: TagCountType[]) => {
+    if (tagCountList === undefined) return [];
 
-    const res = classData
+    const res = tagCountList
       .filter(obj => obj.count !== 0)
       .map(obj => {
-        sum += obj.count;
-        return { name: obj.class, value: obj.count };
-      });
-    const leave = total - sum;
-    leave &&
-      res.push({
-        name: '未分类',
-        value: leave
+        return { name: obj.tag, value: obj.count };
       });
     return res;
   };
 
-  const { loading: dataLoading, run: classRun } = useRequest(() => getDataAPI(DB.Class), {
-    retryCount: 3,
-    manual: true,
-    onSuccess: res => {
-      dispatch(setClasses(res.data));
-    }
-  });
-
-  useMount(() => {
-    if (!classes.isDone) {
-      classRun();
-    }
-  });
-
   return {
-    loading: dataLoading,
+    loading: tagCountLoading,
     option: {
       tooltip: {
         trigger: 'item',
@@ -67,7 +34,7 @@ export const useChartData = () => {
           type: 'pie',
           radius: '80%',
           height: '100%',
-          data: formatData(classes.value, articles.count.value),
+          data: formatData(tagCountList),
           emphasis: {
             itemStyle: {
               shadowBlur: 10,

diff --git a/src/components/ClassCard/index.tsx b/src/components/ClassCard/index.tsx
@@ -121,7 +121,7 @@ const ClassCard: React.FC = () => {
           {isLoadingA && isLoadingB  ? (
             <IconLoading />
           ) : (
-            [...articleClassesCountList!, {
+            [...articleClassesCountList || [], {
               classesId: noClassId,
               classesName: '未分类',
               count: countNotClassesArticle

diff --git a/src/services/article.ts b/src/services/article.ts
@@ -5,6 +5,11 @@ import { queryClient } from '@/http/tanstack/react-query';
 import { globalSuccess } from '@/utils/arcod-extract';
 import { QueryResultType } from '@/utils/types';
 
+export interface TagCountType {
+    tag: string
+    count: number
+}
+
 export interface ArticleInputType {
     id?: number;
     title?: string;
@@ -70,6 +75,16 @@ export const useCountNotClassesArticle = () => {
     })
 };
 
+/**
+ * 分组查询各个标签对应文章数量（只查询有标签的文章）
+ */
+export const countListArticleTag = () => {
+    return useQuery({
+        queryKey: ['countListArticleTag'], 
+        queryFn: () => service.get('/article/countListArticleTag').then((res) => res.data)
+    })
+  }
+
 /**
  * 获取md文件数据
  */