完结撒花
技术 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)支持文本内容下载，暂不支持图片下载
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全屏模式
原始大小支持放大缩小和拖动
缩小到一定程度会出现横向滚动条
全屏模式不支持放大缩小和拖动
进入全屏后，我将最小化按钮禁用，将最小化图标隐藏，换句话说就是全屏模式下不支持最小化，还有一个就是箭头所指图标的差异，你可以仔细看下他们之间的不同。
看出来了吧，进入全屏时，它的图标的意思是放大的，退出全屏，它的意思是往小缩的
