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;
   };