【山大智云项目日志】（十三）源码分析之seahub中涉及功能模块的组件总结

2021SC@SDUSC

这一次博客为总结类，主要放在seahub也就是seafile的web系统的前端功能架构上，而不是去具体分析哪一个组件。这次博客也将为以后的山大智云的前端开发提供索引。

frontend文件夹下的src文件夹中：
assets：存放静态图片资源文件
css：存放seshub web端需要的样式文件
utils：存放工具类组件
\——collab-server.js:负责检测仓库更新

\——constants.js:记录每一个页面的url

\——date_format-utils.js:根据设置做语言和时区的转换

\——editor-utilites.js：做链接和文件的转换，可以将文件注册成链接，也可以将链接映射到文件

\——markdown-utils.js:在编辑文件内容时，做正则表达的处理，同时还可以回退，查看历史编辑内容

\——pinyin-by-unicode.js：用union code写的拼音

\——引入seafile-js导出作为seafileAPI为web端提供各种服务

\——seafile-markdown2html.js:未知

\——text-translation.js：由于项目使用了i18国际化组件，这里通过键值对做语言转换

\——url-decoration.js：统一全站各页面url格式，将全站的url做美化，是只有规律可循

\——utils.js:几千行，内容很多，设计到对各种文件格式的识别，图片格式的识别，检查用户权限等功能函数

models:实体类，对应数据库里的表

\——activity.js：记录用户活动，用户基本信息，用户创建的库，用户文件数量以及文件列表

\——custom-permission.js：用户权限

\——dirent.js：记录文件流向，包括操作时间

\——draft.js：用户draft库

\——file-tag.js：文件与文件标签关联表，即颜色

\——group.js：group信息表

\——org-admin-repo.js：org库信息，包含对应的管理员

\——org-group.js：org群组信息

\——org-logs-file-audit.js：文件审计表

\——org-logs-file-update.js：文件更新信息表

\——org-logs-perm-audit.js：文件审计权限表

\——org-user.js:org用户表

\——repo-info.js:仓库信息表

\——repo-tag.js:仓库与标签关联信息表

\——repo.js:仓库表

\——review-comment.js:评论表

\——review.js:评论内容表

\——share-link.js:共享链接表

\——shared-folder-info.js:共享文件夹信息表

\——shared-repo-info.js:共享库信息表

\——sysadmin-admin-user.js:系统管理员信息表

\——sysadmin-user.js:后台用户表

\——upload-link.js:链接创建信息表

Component文件夹下主要为各种组件，这里以文件夹为单位进行列举

\——common文件夹下的组件为网页右上角部分内容，设计账户，登出，通知

\——context-menu：上下文菜单，主要组件是一个按钮，实现上下页切换

\——cur-dir-path：在文件库中，标签，回收站，历史记录
\——dailog：这一部分我们在前面进行过专门的分析，是许多对话框组件，包括一个修改提示，删除提示，添加表单等

\——dir-view-mode
\——dirent-detail
\——dirent-list-view
\——dirent-grid-view：：这四部分是显示模式组件，包括列表式，栅栏式，九宫格式

\——draggable:可拖动的一些组件，猜测作用应该是在挑战应答身份认证过程中使用

\——dropdown-menu-下拉菜单栏

\——file-chooser:文件选择框组件，包括在多种情况下的选择方式，包括在仓库中，搜索结果中，也分为列表状，树状

\——file-content-view:文件内容查看组件，包括文字查看，图片查看，markdown文件查看，pdf，svg，text，video等格式

\——file-upload：文件上传组件，包括可上传和不可上传的两类文件

\——file-view:包括文件信息，文件工具栏，文件tip的组件

\——history-list-view：历史文件列表，和详情组件

\——history-trash-file-view:包括下载文件列表，垃圾箱列表

\——markdown-view：markdown类型的文件查看

\——review-list-view：评论列表，评论对话框组件

\——search：搜索组件，包括搜索文件的，搜索用户的，搜索库的

\——select-editor：未知

\——shared-file-view:已分享的文件后的视图

\——toast：未知

\——toolbar：工具栏组件，各种情境下的工具栏，有文件未打开时的，有文件打开时的编辑状态栏

\——tree-view：文件以树状展示的组件

\——user-settings：用户设置组件

\——audio-player：引入的媒体播放器组件

\——date-time-picker：日期时间选择器

\——index-viewer：主页视图

\——loading：加载视图，转圈圈

\——logo：左上角log

\——main-content-wrapper：里面集成了GeneralToolBar，WrapperedComponet组件

\——main-side-nav：侧边栏

\——more：未知

\——org-admin-group-nav：org下的管理员的群组导航栏

\——org-admin-user-nav：org下管理员的用户导航栏

\——paginator：分页器组件

\——pdf-viewr：导入到pdf查看器

\——permission-denied-tip：请求拒绝提示组件

\——rename：重命名工具组件

\——repo-info-bar：仓库信息栏组件

\——side-nav-footer：侧边栏底部

\——side-panel:侧边栏面板，里面集成了我们上面提到的mainSideNav，sidenavfooter等

\——system-notification：系统通知栏

page文件夹下是集成了各种组件的页面

\——dashboard：数据面板

\——drafts：文档草稿编辑页面

\——file-history：集成了mainpanel和side-panel组件

\——group：群组页面

\——invitation：邀请用户入群组的页面

\——lib-content-view：集成了container，toolbar，viewer，实现了库的完整功能的页面

\——linked-devices：未知

\——my-lib：我的资料库页面

\——org-admin：后台管理界面

\——search：各个位置下搜索结果界面，集成了各个搜索组件，含有main-panel，搜索结果。

\——shared-admin：共享文件，资料库，共享链接管理页面

\——shared-libs：共享库页面

\——shared-with-all：公共资料库页面

\——sysadmin系统管理员界面

app.js:项目启动入口，集成所有主页组件

index.js:集成了I18组件和MarkDownEditor组件，提供语言转换，文档编辑。

**Seahub-extra:**主要与身份认证有关
\——adfs_auths: 提供单点登录认证
\——django_cas_ng：django框架的CAS单点认证
\——krb5_auth：kerbers5应用认证
\——plan：设计更新计划，测试计划，定期的主密钥更新

总结：到这里我完成了部分frontend中一下可能会涉及到后续开发会用到的组件的源码分析，由于前端代码基本没有注释，所以我想要在UI界面中找到对应代码的内容才能理解这些组件与页面，因此进行了项目配置，并能在ubuntu系统中成功运行web端，将代码与UI界面做出对应。同时我工作的另一部分则是对seahub-extra的内容进行分析，里面涉及到的主要是认证的一些内容，不仅包括单点登录认证，还有kerbers5应用服务器与用户之间的双向认证。
在源码分析期间，我与另一位负责web后端源码分析的同学进行了多次交流，在django框架下，服务通过SeafileAPI进行底层调用，层次结构比较清晰，同时又感叹系统的庞大，seafile作为有名的私有云存储系统，这次有机会接触学习，也是收获满满，由于分工，我的工作内容偏前端，这需要我需要继续去了解React框架，更加深入的了解seahub的内容。