详细介绍
基于 Vue 3 开发的文件选择与星级标签管理模块,支持拉取文件库及文件列表,提供1~5星星级标记、按星级筛选、批量打包下载功能。
后端为河马框架插件,具备文件库管理、缩略图自动生成、访问权限管控能力。
一、选文件端(通过专属链接访问的使用者)
通过管理员下发的带密钥专属链接打开页面,系统自动展示当前账号有权查看的全部文件库。
1. 文件库浏览:页面左侧展示文件库列表,点击对应文件库即可加载库内全部文件缩略图,支持滚动加载更多内容。
2. 文件星级标记:单份文件可标记1~5星,点击文件即可设置或取消星级标签,星级数据同步存储至服务端,更换设备、清理浏览器缓存后标记仍保留。
3. 星级筛选:页面顶部提供星级筛选栏,选定对应星级后,列表仅展示带有该星级标记的文件。
4. 打包下载:筛选完成目标文件后,点击「打包下载」,可将当前列表内所有文件压缩为ZIP包本地下载。
5. 文件预览与详情查看:点击文件可放大预览;点击「文件信息」可查看文件名、文件大小、修改时间,照片类文件同步展示相机型号、光圈等拍摄元数据(存在元数据则显示)。
6. 移动端适配:手机等小屏设备自动切换布局,文件库侧边栏置顶、文件列表下放,适配触控操作,移动端可正常完整使用全部功能。
二、后台管理端(管理员操作面板)
1. 创建文件库:支持新建多个独立文件库,每个文件库可自定义名称、存储路径;列表直观展示各文件库文件总数、原图占用存储空间、缩略图占用存储空间,数据清晰直观。
2. 访问权限分配:在「权限/角色」模块生成独立访问密钥,勾选该密钥可访问的文件库范围,系统生成附带密钥的专属访问链接,下发给对应人员即可定向开放文件库查看权限,实现精准分权管理。
3. 文件库内容管理:进入对应文件库后,支持文件名精准检索、批量上传文件、单文件删除;提供分页、加载更多浏览模式,搜索操作无整页刷新,交互流畅不卡顿。
4. 缩略图管理:单个文件库支持一键批量生成缩略图,选文件端、后台列表统一调用缩略图,大幅提升页面加载速度;同时支持一键清空全部缩略图,可按需重新批量生成,适配文件更新迭代需求。




