图片选择与标签管理，相片选图工具



功能介绍

1. 用专属链接打开

通过管理员下发的带密钥的链接打开页面，自动列出你有权查看的图库。



2. 浏览图库

左侧为图库列表，点击某个图库即可查看该图库内的图片缩略图，可滚动加载更多。



3. 给图片打标签

点击图片可为该图选择或取消标签，选好的标签会保存在服务器，换设备或清缓存也不会丢。



4. 按标签筛选

在顶部选择某个标签后，只显示带有该标签的图片。



5. 打包下载

筛选出需要的图片后，可点击「打包下载」，将当前列表中的图片打成 ZIP 下载到本地。



6. 查看大图与详情

点击某张图可放大查看；在详情里可查看「文件信息」（如文件名、大小、修改时间及 EXIF 等）。小屏下布局会自适应，便于手机使用。



7. 图库管理（后台）

新建、编辑、删除图库；为每个图库设置名称和存放路径；列表可查看每个图库的图片数、原图与缩略图占用空间。



8. 权限设置（后台）

新增、编辑、删除访问密钥；为每个密钥勾选可访问的图库；复制密钥或通过「访问」得到选图链接，将链接发给对应人员即可控制其能看哪些图库。



9. 图库内图片管理（后台）

进入某图库后可按文件名搜索、分页浏览；支持批量上传新图、单张删除；上传与删除有相应提示。



10. 缩略图（后台）

可为图库「生成缩略图」以加快列表与选图端加载，并显示进度与结果；也可「清空缩略图」后重新生成。



操作流程

选图端用户按下方「选图」步骤操作；管理员需先完成「后台」步骤并发放链接。



选图：打开链接

用管理员给的选图链接打开页面。



选图：选择图库

在左侧图库列表中点击要看的图库，进入该图库的图片列表。



选图：打标签

浏览图片，需要时点击某张图，在弹窗中为它勾选或取消标签（自动保存）。



选图：按标签筛选

若只要某类图：在顶部「按标签筛选」里选择对应标签，列表只显示带该标签的图。



选图：打包下载

保持当前筛选结果，点击「打包下载」，等待 ZIP 生成并保存到电脑。



选图：查看大图或文件信息

点击图片，在详情里查看大图或「文件信息」。



后台：新建图库

在后台进入「图库」→「图库管理」，新建图库并设置名称与储存路径。



后台：管理图片与缩略图

进入某个图库 →「管理图片」：按需上传图片、按文件名搜索、删除不需要的图；需要时对该图库执行「生成缩略图」或「清空缩略图」。



后台：添加密钥并发放链接

在「图库」→「权限设置」中「添加密钥」，填写权限名称，勾选该密钥可访问的图库，保存。在权限列表中复制该密钥对应的「访问地址」（或点击「访问」打开链接），将链接发给需要选图的人员。



简要流程： 选图端：打开链接 → 选择图库 → 打标签 / 按标签筛选 → 打包下载或查看大图。管理员：新建图库 → 上传/管理图片、生成缩略图 → 权限设置里添加密钥并发放选图链接。



源码说明

基于 Vue 3 的图片选择与标签管理，获取图库与图片列表，支持 1～5 星标签、按标签筛选和打包下载。

后端为 xunruicms 插件，提供图库管理、缩略图生成与访问控制。



选图端（用链接打开页面的使用者）

用专属链接打开：管理员会给你一个带密钥的链接，打开后会自动列出你可以看的图库。

看图库、点进去：左侧是图库列表，点某个图库就能看到里面所有图片的缩略图，一屏显示不下可以往下滚动继续看。

给图片打星：每张图可以打 1～5 星，点图片就能选星或取消，打好的星会保存在服务器，换电脑或清缓存也不会丢。

按星筛选：在顶部选某一颗星，列表就只显示带这颗星的图。

打包下载：筛选出想要的图之后，可以点「打包下载」，把当前列表里的图打成一个 ZIP 包下载到电脑。

看大图和详情：点某张图可以放大查看；再点「文件信息」能看到文件名、大小、修改时间，以及相机、光圈等拍摄信息（有的话会显示）。

手机也能用：小屏幕下页面会自动调整，侧栏在上、图片在下，方便触控操作。



后台管理（管理员）

建图库：可以新建多个图库，每个图库有名字和存放路径，列表里能看到每个图库的图片数量、原图占用空间、缩略图占用空间。

分配谁看哪个图库：在「权限/角色」里生成访问密钥，并勾选该密钥能访问哪些图库；把「访问地址」（带该密钥的链接）发给对应的人，对方用这个链接就能看到你允许的图库。

管理图库里的图：进入某个图库后，可以按文件名搜索、批量上传新图、删除某张图；支持翻页和「加载更多」，搜索不会整页刷新。

缩略图：图库里的图可以一键「生成缩略图」，列表和选图端都会用缩略图，加载更快；也可以「清空缩略图」重新生成。