@wecity/doc-view-react

doc-view-react 使用说明

1. 项目导入

   import '@wecity/doc-view-react/lib/index.css';
   import { DocView, DocSearch, DocSearchInput } from '@wecity/doc-view-react';
   
   <DocView modId={modId} nodeId={nodeId} />;
   <DocSearch modId={modId} docViewPath={docViewPath} />;
   <DocSearchInput searchPath={searchPath} />;
   

2. 把导出的压缩包,解压到 public/docs 文件夹下

   以 create-react-app 为例

   开发环境下

   目录如下

   ｜-public
       ｜-docs
           |-VJSLSDFS1
           |-VJSLSDFS2
   ｜-src
   ｜-package.josn
   

   如果已经把组件导入并打包进了项目，完成 build 操作后的热导入

   目录如下

   ｜-docs
       |-VJSLSDFS1
       |-VJSLSDFS2
   ｜-static
   ｜-index.html
   

   Api

   DocView 文档页面组件

   参数	说明	是否必填	默认值
   modId	需要查看的的文档的模块 id(资源文件夹名字)	是	-
   nodeId	具体的某一篇文档，如果不填，会默认打开 modId 下找到的可浏览的第一份文档	否	null
   sideBarVisible	是否显示侧边栏，如果不填，则默认显示侧边栏	否	true
   titleVisible	是否显示侧边栏标题	否	true
   path	导入的文件路径 默认导入文件是存放在 public/docs 下, 若修改位置，需传入新的文件路径	否	-
   noSearch	是否文档右上角显示搜索框(默认有)	否	false
   searchPath	搜索页路由(DocSearch 组件所在的页面；若显示搜索框需要填搜索页面路由，否则会跳转错误)	否	'/'

   DocSearch 搜索页面组件

   参数	说明	是否必填	默认值
   modId	需要查看的的文档的模块 id(资源文件夹名字)	是	-
   path	导入的文件路径 默认导入文件是存放在 public/docs 下, 若修改位置，需传入新的文件路径	否	-
   docViewPath	文档页面路由(DocView 所在的页面)	是	'/'

   DocSearchInput 搜索框组件,用于搜索框的自定义摆放位置

   参数	说明	是否必填	默认值
   searchPath	搜索页路由(DocSearch 组件所在的页面)	是	'/'

   备注说明

   react 项目工程在开发模式需要开启支持读取 public 下文件夹和配置支持读取 md，UI 依赖 antd，网络请求依赖 axios

   以customize-cra为例子

   (config) => {
     //暴露webpack的配置 config ,evn
     const loaders = config.module.rules.find((rule) =>
       Array.isArray(rule.oneOf),
     ).oneOf;
     loaders.push({
       test: /\.md$/,
       use: 'raw-loader',
     });
     config.resolve.plugins = config.resolve.plugins.filter(
       (p) => p.constructor.name !== 'ModuleScopePlugin',
     );
     return config;
   };