Feat: Add TagWorkCloud #4368 (#4393)

### What problem does this PR solve?

Feat: Add TagWorkCloud #4368

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/add-knowledge/components/knowledge-setting/category-panel.tsx

@@ -6,7 +6,7 @@ import DOMPurify from 'dompurify';
 import camelCase from 'lodash/camelCase';
 import { useMemo } from 'react';
 import styles from './index.less';
-import { TagTable } from './tag-table';
+import { TagTabs } from './tag-tabs';
 import { ImageMap } from './utils';
 
 const { Title, Text } = Typography;
@@ -69,7 +69,7 @@ const CategoryPanel = ({ chunkMethod }: { chunkMethod: string }) => {
           <SvgIcon name={'chunk-method/chunk-empty'} width={'100%'}></SvgIcon>
         </Empty>
       )}
-      {chunkMethod === 'tag' && <TagTable></TagTable>}
+      {chunkMethod === 'tag' && <TagTabs></TagTabs>}
     </section>
   );
 };

web/src/pages/add-knowledge/components/knowledge-setting/tag-tabs.tsx

@@ -0,0 +1,20 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { TagTable } from './tag-table';
+import { TagWordCloud } from './tag-word-cloud';
+
+export function TagTabs() {
+  return (
+    <Tabs defaultValue="account" className="mt-4">
+      <TabsList>
+        <TabsTrigger value="account">Word cloud</TabsTrigger>
+        <TabsTrigger value="password">Table</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <TagWordCloud></TagWordCloud>
+      </TabsContent>
+      <TabsContent value="password">
+        <TagTable></TagTable>
+      </TabsContent>
+    </Tabs>
+  );
+}

web/src/pages/add-knowledge/components/knowledge-setting/tag-word-cloud.tsx

@@ -0,0 +1,40 @@
+import { useFetchTagList } from '@/hooks/knowledge-hooks';
+import { Chart } from '@antv/g2';
+import { useCallback, useEffect, useRef } from 'react';
+
+export function TagWordCloud() {
+  const domRef = useRef<HTMLDivElement>(null);
+  let chartRef = useRef<Chart>();
+  const { list } = useFetchTagList();
+
+  const renderWordCloud = useCallback(() => {
+    if (domRef.current) {
+      chartRef.current = new Chart({ container: domRef.current });
+
+      chartRef.current.options({
+        type: 'wordCloud',
+        autoFit: true,
+        layout: { fontSize: [20, 100] },
+        data: {
+          type: 'inline',
+          value: list.map((x) => ({ text: x[0], value: x[1], name: x[0] })),
+        },
+        encode: { color: 'text' },
+        legend: false,
+        tooltip: false,
+      });
+
+      chartRef.current.render();
+    }
+  }, [list]);
+
+  useEffect(() => {
+    renderWordCloud();
+
+    return () => {
+      chartRef.current?.destroy();
+    };
+  }, [renderWordCloud]);
+
+  return <div ref={domRef} className="w-full h-[38vh]"></div>;
+}