update 内部人员管理系统

docs/.vitepress/config.ts

@@ -87,7 +87,7 @@ function sidebarProject(): DefaultTheme.SidebarItem[] {
       text: '项目列表',
       collapsed: false,
       items: [
-        { text: '项目列表', base: '/project/', link: 'list' },
+        { text: '内部人员管理系统', base: '/project/', link: 'personManagement' },
       ],
     },
   ]

docs/function/video.md

@@ -242,9 +242,9 @@ router.post('/play', async (req, res, next) => {
 
 ```
 
-上述代码中的VideoStream类是一个封装好的类，其中的startTransCodo方法就是新建一个Mpeg1Muxer类的实例
+上述代码中的`VideoStream`类是一个封装好的类，其中的`startTransCodo`方法就是新建一个`Mpeg1Muxer`类的实例
 
-这个Mpeg1Muxer类能够开启一个子进程，调用FFMPEG将RTSP视频流转换成mpeg-ts格式流，然后通过websocket发送出去，前端通过websocket接收到视频每一帧的二进制流，然后使用JSMPEG库在canvas中展示画面。
+这个`Mpeg1Muxer`类能够开启一个子进程，调用FFMPEG将RTSP视频流转换成mpeg-ts格式流，然后通过websocket发送出去，前端通过websocket接收到视频每一帧的二进制流，然后使用JSMPEG库在canvas中展示画面。
 
 ```JS
 // 生成唯一ID

docs/index.md

@@ -7,8 +7,11 @@ hero:
   tagline: 
   actions:
     - theme: brand
-      text: 查看
+      text: 查看文档
       link: /introduction
+    - theme: brand
+      text: 查看项目
+      link: /project/project
     - theme: alt
       text: GitHub
       link: https://github.com/lily0325/lily0325.github.io

docs/project/personManagement.md

@@ -0,0 +1,76 @@
+# 内部人员管理系统复盘
+
+## 简介
+
+一般的人员管理系统(后台管理系统+小程序或H5)包括：
+
+1. 人员信息管理(人员信息多字段增删改查)
+
+2. 内部活动报名管理(活动信息增删改查、批量报名/取消报名、活动签到、活动剪影编辑展示与存储)
+
+3. 内部知识库管理(文件上传、文件预览、文件下载、文件搜索、文件查看记录)
+
+4. 内部积分管理(积分排名展示、积分记录查询、积分数据导出、积分兑换)
+
+5. 内部用户权限管理(用户角色管理、用户权限管理、机构层级管理)
+
+6. PC端与小程序端用户登录(PC端通过小程序扫码登录、小程序通过微信登录)
+
+
+## 全栈开发过程中的难点与问题
+
+### 1.活动剪影内容的编辑展示与存储(富文本编辑器)
+
+#### `编辑`
+
+在内容的编辑功能用主流的富文本编辑器就可以，如`wangEditor`、`quill`、`tinymce`等。
+
+我这边使用的是`wangEditor`，它的文档和api非常详细，而且有丰富的插件，非常适合当前的需求。
+
+#### `存储`
+
+存储有两种思路方案：
+
+1. 将富文本编辑器里的html代码弄成string字符串存储到数据库中，前端渲染时直接将html代码渲染到富文本编辑器中。
+
+    图片的话采用每次上传都将图片上传到服务器，然后在html里使用的是图片url的方式。
+
+    图片和文字分开存储，图片存在服务器文件夹里，文字(包括图片的链接)存到数据库里(longtext)。
+
+    弊端是当图片较多时会走特别多请求，还要兼顾图片是否上传但是又在文章中删除的情况，需要一个删除图片接口在这种情况下调用。
+
+2. 直接将富文本编辑器里的html代码包括图片弄成一个完整的html文件，当作正常的文件上传到服务器当中
+
+    图片是base64编码的格式，直接与文字一起存到服务器的数据库中。
+
+    弊端是图片是base64编码的(base64格式下的图片大小比原本图片大小大概多三分之一)，如果图片多会导致整个html文件大小过大。
+
+
+#### `展示`
+
+`在网页端展示时`：直接将html代码渲染到富文本编辑器中即可。
+
+`在小程序端展示时`：
+
+如果是使用第一种存储方案，小程序就需要先去通过接口请求数据库中对应的文章html字符串，然后通过vue中的`v-html`指令渲染到页面上。
+
+如果是使用第二种存储方案，小程序直接就通过`web-view`组件去展示，直接将文章的后端html地址传给该组件就能够直接展示，前提是在小程序后台管理那边设置业务域名白名单成功，不然也没得展示。
+
+
+### 2.文件上传与预览
+
+#### `文件上传`
+
+文件上传主要还是`单文件上传`与`大文件分片上传`，考虑到一般内部使用的系统基本也不可能有重复的文件要上传，所以就没搞快传功能。
+
+使用单文件上传还是大文件分片上传的文件大小边界设定是10MB，小于10MB的文件使用单文件上传，大于10MB的文件使用大文件分片上传。
+
+
+
+
+
+
+#### `文件预览`
+
+
+

docs/project/project.md

@@ -3,3 +3,4 @@
 ## 概述
 这里是专门写的一些项目的汇总，比如开发过的一些项目，一些使用过的开源项目等等。
 
+展示该项目所拥有的功能，所用到的技术栈，以及在开发时遇到的问题与难点。