Merge pull request #18 from fantasticit/feat/share

packages/client/src/components/document/reader/public/index.tsx

@@ -1,7 +1,20 @@
 import React, { useMemo, useEffect } from 'react';
 import cls from 'classnames';
-import { Layout, Nav, Space, Button, Typography, Skeleton, Input, Popover, Modal, BackTop } from '@douyinfe/semi-ui';
+import {
+  Layout,
+  Nav,
+  Space,
+  Button,
+  Typography,
+  Skeleton,
+  Input,
+  Popover,
+  Modal,
+  Breadcrumb,
+  BackTop,
+} from '@douyinfe/semi-ui';
 import { IconArticle } from '@douyinfe/semi-icons';
+import Link from 'next/link';
 import { Seo } from 'components/seo';
 import { LogoImage, LogoText } from 'components/logo';
 import { DataRender } from 'components/data-render';
@@ -91,9 +104,14 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
               <Skeleton active placeholder={<Skeleton.Title style={{ width: 80, marginBottom: 8 }} />} loading={true} />
             }
             normalContent={() => (
-              <Text strong ellipsis={{ showTooltip: true }} style={{ width: ~~(windowWidth / 4) }}>
-                {data.title}
-              </Text>
+              <Breadcrumb>
+                <Breadcrumb.Item>
+                  <Link href="/share/wiki/[wikiId]" as={`/share/wiki/${data.wikiId}`}>
+                    <a>{data?.wiki?.name}</a>
+                  </Link>
+                </Breadcrumb.Item>
+                <Breadcrumb.Item>{data.title}</Breadcrumb.Item>
+              </Breadcrumb>
             )}
           />
         </Nav>

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

@@ -49,6 +49,25 @@ export const DocumentShare: React.FC<IProps> = ({ documentId, render }) => {
         onCancel={() => toggleVisible(false)}
         maskClosable={false}
         style={{ maxWidth: '96vw' }}
+        footer={
+          <>
+            <Button onClick={() => toggleVisible(false)}>取消</Button>
+            <Button theme="solid" type={isPublic ? 'danger' : 'primary'} onClick={handleOk}>
+              {isPublic ? '关闭分享' : '开启分享'}
+            </Button>
+            {isPublic && (
+              <Button
+                theme="solid"
+                type="primary"
+                onClick={() => {
+                  window.open(shareUrl, '_blank');
+                }}
+              >
+                查看文档
+              </Button>
+            )}
+          </>
+        }
       >
         <DataRender
           loading={loading}

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

@@ -14,9 +14,18 @@ interface IProps {
   };
   isActive?: boolean;
   hoverable?: boolean;
+  openNewTab?: boolean;
 }
 
-export const NavItem: React.FC<IProps> = ({ icon, text, rightNode, href, isActive = false, hoverable = true }) => {
+export const NavItem: React.FC<IProps> = ({
+  icon,
+  text,
+  rightNode,
+  href,
+  isActive = false,
+  hoverable = true,
+  openNewTab = false,
+}) => {
   const right = rightNode ? <span className={styles.rightWrap}>{rightNode}</span> : null;
   const content = (
     <>
@@ -32,7 +41,9 @@ export const NavItem: React.FC<IProps> = ({ icon, text, rightNode, href, isActiv
     >
       {href ? (
         <Link href={href as UrlObject}>
-          <a className={styles.navItem}>{content}</a>
+          <a className={styles.navItem} target={openNewTab ? '_blank' : '_self'}>
+            {content}
+          </a>
         </Link>
       ) : (
         <div className={styles.navItem}>{content}</div>

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

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { Avatar, Button, Typography, Skeleton } from '@douyinfe/semi-ui';
+import { Avatar, Button, Typography, Skeleton, Tooltip } from '@douyinfe/semi-ui';
 import { IconPlus } from '@douyinfe/semi-icons';
 import { useWikiDetail, useWikiTocs } from 'data/wiki';
 import { useToggle } from 'hooks/use-toggle';
@@ -13,6 +13,7 @@ import { EventEmitter } from 'helpers/event-emitter';
 import { NavItem } from './NavItem';
 import { Tree } from './tree';
 import styles from './index.module.scss';
+import { isPublicWiki } from '@think/domains';
 
 const em = new EventEmitter();
 const EVENT_KEY = 'REFRESH_TOCS';
@@ -127,6 +128,45 @@ export const WikiTocs: React.FC<IProps> = ({
         isActive={pathname === '/wiki/[wikiId]/setting'}
       />
 
+      <DataRender
+        loading={wikiLoading}
+        loadingContent={
+          <NavItem
+            icon={
+              <Skeleton.Avatar
+                size="small"
+                style={{
+                  marginRight: 8,
+                  width: 24,
+                  height: 24,
+                  borderRadius: 4,
+                }}
+              ></Skeleton.Avatar>
+            }
+            text={<Skeleton.Title style={{ width: 120 }} />}
+          />
+        }
+        error={wikiError}
+        normalContent={() =>
+          isPublicWiki(wiki.status) ? (
+            <NavItem
+              icon={<IconOverview />}
+              text={
+                <Tooltip content="该知识库已公开，点我查看" position="right">
+                  公开地址
+                </Tooltip>
+              }
+              href={{
+                pathname: `/share/wiki/[wikiId]`,
+                query: { wikiId },
+              }}
+              isActive={pathname === '/share/wiki/[wikiId]'}
+              openNewTab
+            />
+          ) : null
+        }
+      />
+
       <DataRender
         loading={wikiLoading}
         loadingContent={

packages/client/src/data/document.ts

@@ -1,4 +1,4 @@
-import type { IUser, IDocument } from '@think/domains';
+import type { IUser, IDocument, IWiki } from '@think/domains';
 import useSWR from 'swr';
 import { useState, useCallback, useEffect } from 'react';
 import { useAsyncLoading } from 'hooks/use-async-loading';
@@ -128,7 +128,7 @@ export const useStaredDocuments = () => {
  */
 export const usePublicDocument = (documentId: string) => {
   const [fetch] = useAsyncLoading(getPublicDocumentDetail);
-  const [document, setDocument] = useState<IDocument | null>(null);
+  const [document, setDocument] = useState<(IDocument & { createUse: IUser; wiki: IWiki }) | null>(null);
   const [error, setError] = useState<(Error & { statusCode?: number }) | null>(null);
   const loading = !document && !error;
 

packages/server/src/services/document.service.ts

@@ -552,8 +552,9 @@ export class DocumentService {
     await this.viewService.create({ userId: 'public', documentId, userAgent });
     const views = await this.viewService.getDocumentTotalViews(documentId);
     const createUser = await this.userService.findById(document.createUserId);
+    const wiki = await this.wikiService.getPublicWikiDetail(document.wikiId);
 
-    return { ...document, views, createUser };
+    return { ...document, views, wiki, createUser };
   }
 
   /**