feat: improve tocs event

packages/client/src/components/document/delete/index.tsx

@@ -3,7 +3,7 @@ import Router from 'next/router';
 import { Typography, Space, Modal } from '@douyinfe/semi-ui';
 import { IconDelete } from '@douyinfe/semi-icons';
 import { useDeleteDocument } from 'data/document';
-import { triggerRefreshTocs } from 'components/wiki/tocs';
+import { triggerRefreshTocs } from 'components/wiki/tocs/event';
 
 interface IProps {
   wikiId: string;

packages/client/src/components/wiki/tocs/event.ts

@@ -0,0 +1,20 @@
+import { IDocument, IWiki } from '@think/domains';
+import { event } from 'helpers/event-emitter';
+
+export const REFRESH_TOCS = `REFRESH_TOCS`; // 刷新知识库目录
+export const CREATE_DOCUMENT = `CREATE_DOCUMENT`;
+
+/**
+ * 刷新知识库目录
+ */
+export const triggerRefreshTocs = () => {
+  event.emit(REFRESH_TOCS);
+};
+
+/**
+ * 新建文档
+ * @param data
+ */
+export const triggerCreateDocument = (data: { wikiId: IWiki['id']; documentId: IDocument['id'] | null }) => {
+  event.emit(CREATE_DOCUMENT, data);
+};

packages/client/src/components/wiki/tocs/index.tsx

@@ -2,25 +2,18 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { Avatar, Button, Typography, Skeleton, Tooltip } from '@douyinfe/semi-ui';
 import { IconPlus } from '@douyinfe/semi-icons';
+import { isPublicWiki } from '@think/domains';
 import { useWikiDetail, useWikiTocs } from 'data/wiki';
 import { useToggle } from 'hooks/use-toggle';
 import { Seo } from 'components/seo';
 import { findParents } from 'components/wiki/tocs/utils';
 import { IconDocument, IconSetting, IconOverview, IconGlobe } from 'components/icons';
-import { DocumentCreator } from 'components/document/create';
 import { DataRender } from 'components/data-render';
-import { EventEmitter } from 'helpers/event-emitter';
+import { event } from 'helpers/event-emitter';
+import { REFRESH_TOCS, triggerCreateDocument } from './event';
 import { NavItem } from './nav-item';
 import { Tree } from './tree';
 import styles from './index.module.scss';
-import { isPublicWiki } from '@think/domains';
-
-const em = new EventEmitter();
-const EVENT_KEY = 'REFRESH_TOCS';
-
-export const triggerRefreshTocs = () => {
-  em.emit(EVENT_KEY);
-};
 
 interface IProps {
   wikiId: string;
@@ -52,12 +45,11 @@ export const WikiTocs: React.FC<IProps> = ({
   }, [tocs, documentId]);
 
   useEffect(() => {
-    em.on(EVENT_KEY, () => {
-      refresh();
-    });
+    const handler = () => refresh();
+    event.on(REFRESH_TOCS, handler);
 
     return () => {
-      em.destroy();
+      event.off(REFRESH_TOCS, handler);
     };
   }, []);
 
@@ -197,17 +189,16 @@ export const WikiTocs: React.FC<IProps> = ({
             }}
             isActive={pathname === '/wiki/[wikiId]/documents'}
             rightNode={
-              <>
-                <Button
-                  style={{ fontSize: '1em' }}
-                  theme="borderless"
-                  type="tertiary"
-                  icon={<IconPlus style={{ fontSize: '1em' }} />}
-                  size="small"
-                  onClick={toggleVisible}
-                />
-                <DocumentCreator wikiId={wiki.id} visible={visible} toggleVisible={toggleVisible} />
-              </>
+              <Button
+                style={{ fontSize: '1em' }}
+                theme="borderless"
+                type="tertiary"
+                icon={<IconPlus style={{ fontSize: '1em' }} />}
+                size="small"
+                onClick={() => {
+                  triggerCreateDocument({ wikiId: wiki.id, documentId: null });
+                }}
+              />
             }
           />
         )}

packages/client/src/components/wiki/tocs/tree.tsx

@@ -5,11 +5,10 @@ import { IconMore, IconPlus } from '@douyinfe/semi-icons';
 import { useToggle } from 'hooks/use-toggle';
 import { DocumentActions } from 'components/document/actions';
 import { DocumentCreator as DocumenCreatorForm } from 'components/document/create';
-import { EventEmitter } from 'helpers/event-emitter';
+import { event } from 'helpers/event-emitter';
+import { CREATE_DOCUMENT, triggerCreateDocument } from './event';
 import styles from './index.module.scss';
 
-const em = new EventEmitter();
-
 const Actions = ({ node }) => {
   return (
     <span className={styles.right}>
@@ -27,7 +26,7 @@ const Actions = ({ node }) => {
       <Button
         onClick={(e) => {
           e.stopPropagation();
-          em.emit('plus', node);
+          triggerCreateDocument({ wikiId: node.wikiId, documentId: node.id });
         }}
         type="tertiary"
         theme="borderless"
@@ -44,14 +43,19 @@ const AddDocument = () => {
   const [visible, toggleVisible] = useToggle(false);
 
   useEffect(() => {
-    em.on('plus', (node) => {
-      setWikiId(node.wikiId);
-      setDocumentId(node.id);
+    const handler = ({ wikiId, documentId }) => {
+      if (!wikiId) {
+        throw new Error(`wikiId 未知，无法创建文档`);
+      }
+      setWikiId(wikiId);
+      setDocumentId(documentId);
       toggleVisible(true);
-    });
+    };
+
+    event.on(CREATE_DOCUMENT, handler);
 
     return () => {
-      em.destroy();
+      event.off(CREATE_DOCUMENT, handler);
     };
   }, []);
 

packages/client/src/helpers/event-emitter.tsx

@@ -6,7 +6,7 @@ export class EventEmitter {
       this.callbacks[event] = [];
     }
 
-    this.callbacks[event].push(fn);
+    this.callbacks[event] = [...this.callbacks[event], fn];
 
     return this;
   }
@@ -39,3 +39,5 @@ export class EventEmitter {
     this.callbacks = {};
   }
 }
+
+export const event = new EventEmitter();