完结撒花
技术 react+antd+hooks
之前写过一个东西使用class写的，所以这次想试着换一下
结构：
代码结构
markJia
└─ mark123
├─ package-lock.json
├─ package.json
├─ public
│ ├─ favicon.ico
│ ├─ html.docx
│ ├─ index.html
│ ├─ logo192.png
│ ├─ logo512.png
│ ├─ manifest.json
│ ├─ robots.txt
│ └─ simple.docx
├─ README.md
└─ src
├─ another
│ └─ setupTests.js
├─ App.css
├─ App.js
├─ art-template
│ └─ template.js
├─ contentElement
│ ├─ profileFile
│ │ ├─ Profile.js
│ │ ├─ ProfileChildren
│ │ │ ├─ aboutAuthor.js
│ │ │ ├─ aboutSite.js
│ │ │ ├─ githubAuthor.js
│ │ │ └─ unkown.js
│ │ ├─ ProfileStyles.css
│ │ └─ projectData
│ │ └─ passageData.js
│ ├─ projectFile
│ │ ├─ passageDataJect
│ │ │ └─ passageDataJect.js
│ │ ├─ ProjectChildren
│ │ │ ├─ Alkaid.js
│ │ │ ├─ Flint.js
│ │ │ ├─ MacOs.js
│ │ │ ├─ Metallic.js
│ │ │ └─ Vue.js
│ │ ├─ Projects.js
│ │ └─ ProjectStyles.css
│ ├─ publicBao
│ ├─ textContent
│ │ ├─ profileText
│ │ │ ├─ aboutSite03.js
│ │ │ ├─ number01.js
│ │ │ ├─ number01Style.css
│ │ │ ├─ number02.js
│ │ │ ├─ undefinedFile.js
│ │ │ └─ undefinedStyles.css
│ │ └─ projectText
│ │ ├─ Alkaidcontent.js
│ │ ├─ Flintcontent.js
│ │ ├─ FlintStyles.css
│ │ ├─ MAcoScontent.js
│ │ ├─ Metalliccontent.js
│ │ └─ Vuecontent.js
│ └─ twoNavBao
│ └─ onClicbao
│ └─ onclicBao.js
├─ controlState
│ ├─ Reducer.js
│ └─ store.js
├─ index.css
├─ index.js
├─ layoutElement
│ ├─ headerSection
│ │ ├─ adjustWidthheight
│ │ │ ├─ BeacmeSmall.js
│ │ │ ├─ BecameMaxFunction.js
│ │ │ ├─ DeleteFunction.js
│ │ │ └─ MinWithHeight.js
│ │ ├─ head.md
│ │ ├─ Header.js
│ │ ├─ headStyles.css
│ │ ├─ moveOut
│ │ │ └─ outFunction.js
│ │ └─ moveOver
│ │ └─ overFunction.js
│ ├─ Layout.js
│ ├─ layoutStyles.css
│ └─ mainSection
│ ├─ mainContent.css
│ ├─ mainContent.js
│ ├─ Navigation
│ │ ├─ leftNavigation
│ │ │ ├─ leftNav.js
│ │ │ └─ leftNavStyles.css
│ │ ├─ midNavigation
│ │ │ ├─ middleNav.js
│ │ │ └─ middleNavstyles.css
│ │ └─ rightNavigation
│ │ ├─ profileRoute.js
│ │ └─ projectRoute.js
│ └─ onclickFunctions
│ ├─ onClicFunction01.js
│ └─ onClickFunction02.js
├─ logo.svg
├─ reportWebVitals.js
├─ rubbish
│ └─ liLinktag.js
└─ setupTests.js
简介:
本次做的这个是参考https://portfolio.zxh.io/的,感觉这个还挺有意思的，然后就和小伙伴每人一部分，实现它的这个功能，我这次负责的就是这个部分。它的功能:
(1)能实现拖拽
(2)放大缩小
(3)能实现关闭、最小化、全屏三种模式
(4)双击头部内容可实现进入全屏和退出全屏
(5)对内容溢出有相应的处理
(6)支持将文本转换成markdown格式
(7)支持文本内容下载，暂不支持图片下载，若需要，请参考博客https://blog.csdn.net/qq_39107452/article/details/110199973
npm包如下:
(1)实现拖拽，可以放大缩小:
react-rnd
(2)实现markdown在线转换功能
@uiw/react-md-editor
(3)实现markdown下载功能（下载结果不是很理想，是world格式，不能够解析html标签），因为模板有一部分功能是收费的，所以就…
docxtemplater
pizzip
jszip-utils
file-saver
因为时间的原因，没有实现图片下载的功能，只能下载文本，具体图片下载可以参考下边这个文章
https://blog.csdn.net/qq_39107452/article/details/110199973
感悟
1.使用react-rnd还是比较不容易的(反正把自己搞吐了，然后我就在GitHub上把源码拉下来，有时看会源码，有时看github上他的api介绍，才基本明白了。总之一句话，难归难，只要在坚持一下下，万一就成功了呢。)。用的时候记得设置手柄，不然默认选择整个部分都拖动，设置之后，只有鼠标放到该手柄所在的区域才会触发拖动事件。
2.更新store中的内容，原本是想用useeffect实现的，最后也是在看了好多博客文章之后，还有就是自己测试useeffect是在何时更新数据的，结果都达不到要求，最后放弃了。然后转而去react官方文档查看hook函数api，找到了一个父子组件传值的东西usecontext，搭配着useReducer最终实现了更新数据的功能。本次不准备使用class来写的原因:因为之前的那个纳新就是用class来写的，所以本次准备换成函数式来完成。然后用到的钩子函数有:useState，usecontext，useReducer，useEffect（这个想用但是感觉没啥用，哈哈哈）
3.为了解决坐标问题，我在onResizeStop函数和onDrag函数中做了一些相应的处理
4.做这个东西看起来感觉很简单，没什么技术含量，但是里边的技术内容是真的多，真的细，感觉人家细节做得确实好。在这过程中，我学到了很多知识点，这些都是之前学习没有注意到。
比方说svg图标它是怎样绘制的，附上链接:https://blog.csdn.net/lncci/article/details/80040800
比方说写主体内容的左中右布局的时候，我缩小窗口，其中有一部分内容就被挤下去了，最终用flex布局解决了（flex布局yyds）
5.这个知识点我觉得真的很重要，经常用，但是没有用心多想一下(自己真菜),那就是如何让一个容器占用剩余的所有空间你，这里用position来实现的，不得不说。这个真的很常用，但是没有多少人留意。附上链接:https://www.cnblogs.com/yoyogis/p/4040513.html
比方说display和visibility之间的不同：display设置成none之后，元素不占据宽高，设置visibility属性，元素不可见，但是元素占据宽高
刚开始的界面，出生在坐标((100,100))位置，截图如下
点击最左边的profile或者projects，被点击的会变成红色，截图如下:
第一部分
1.点击profile
2.点击箭头所指的任意区域，即可显示相应的内容，点击哪一个那个前边会有红色的边框
3.内容过多滑动条可以进行滑动
4.待定（可以将文本转换成markdown文本，可以下载成word文件，但是只能下载文本，没有格式，因为人家的模板要收费，那就算了哈哈哈）
默认显示:
输入文本和下载功能:
第二部分
1.点击projects
向下滚动
2.点击箭头所指的任意区域，即可显示相应的内容，点击哪一个那个前边会有红色的边框
放大和缩小
放大
缩小
拖拽
原始大小Vs全屏模式
原始大小支持放大缩小和拖动
缩小到一定程度会出现横向滚动条
全屏模式不支持放大缩小和拖动
进入全屏后，我将最小化按钮禁用，将最小化图标隐藏，换句话说就是全屏模式下不支持最小化，还有一个就是箭头所指图标的差异，你可以仔细看下他们之间的不同。
看出来了吧，进入全屏时，它的图标的意思是放大的，退出全屏，它的意思是往小缩的
