feat: 包信息展示与扫描数据修正
- scanner: 版本数只统计实际存在的 .tgz(修复 playwright-core 5113 版本虚高),解析 description/homepage/repository/author/license 元数据字段 - 前端: 新增 PkgLogo 首字母徽标组件,详情抽屉展示包 logo(主页 favicon 加载失败自动回退)、介绍与主页/仓库/许可胶囊,优化抽屉头部布局 - 全量 UI 改进: 毛玻璃扫描遮罩与进度、头像菜单重新扫描、主题切换、移动端 Tabbar/StatMini/Top30Panel 响应式、列表瘦身与详情按需加载 - compose: TZ=Asia/Shanghai + 命名卷 vcm-data 解决 SQLite 权限 - 更新 amd64 镜像 tar
This commit is contained in:
+23
-24
@@ -381,18 +381,17 @@ C端体验优先:拒绝千篇一律的后台管理系统风格,打造轻盈
|
||||
不需要”设置”菜单:阈值配置已经覆盖了核心设置项,其他系统级配置(如 Verdaccio 连接地址)可以在首次启动时通过弹窗配置,或放在用户头像的下拉菜单中。
|
||||
不需要”用户管理”菜单:本工具定位为个人/小团队内部使用,暂不涉及多用户权限管理。
|
||||
### 三、缓存概览页
|
||||
#### 3.1 统计指标(共 9 个)
|
||||
#### 3.1 统计指标(共 8 个)
|
||||
| 序号 | 指标 | 图标 | 说明 |
|
||||
|---|---|---|---|
|
||||
| 1 | 包的数量 | | 缓存包总数 |
|
||||
| 2 | 占用空间 | | 总占用空间 |
|
||||
| 3 | 预警数量 | | 触发阈值的包数量 |
|
||||
| 4 | 访问排行 | | Top 30 包访问次数 |
|
||||
| 5 | 今日/本周下载量 | | 当天或本周下载总次数 |
|
||||
| 6 | 可清理空间 | | 预估可释放的空间 |
|
||||
| 7 | 最大包 | | 占用空间最大的包 |
|
||||
| 8 | 最老包时间 | | 最久未更新的包的时间 |
|
||||
| 9 | 版本数分布 | | 单包版本数分布情况 |
|
||||
| 4 | 今日更新包数 | | 最近更新时间等于今天的包数量 |
|
||||
| 5 | 可清理空间 | | 预估可释放的空间 |
|
||||
| 6 | 最大包 | | 占用空间最大的包 |
|
||||
| 7 | 最老包时间 | | 最久未更新的包的时间 |
|
||||
| 8 | 版本数分布 | | 单包版本数分布情况 |
|
||||
|
||||
#### 3.2 布局设计
|
||||
##### 第一行(核心指标 · 4 个)
|
||||
@@ -402,27 +401,27 @@ C端体验优先:拒绝千篇一律的后台管理系统风格,打造轻盈
|
||||
│ 清新绿 │ 活力橙 │ 热情红呼吸 │ 静谧蓝 │
|
||||
│ │ │ │ [立即清理] │
|
||||
└──────────────┴──────────────┴──────────────┴──────────────┘
|
||||
指标说明: - 包的数量:扫描 storage/ 目录下的包文件夹数量 - 占用空间:递归计算 storage/ 下所有 .tgz 文件总大小 - 预警数量:对比阈值配置,统计触发条件的包数量 - 可清理空间:根据阈值规则,预估可释放的空间,给用户”清理动力” - 访问排行:点击可展开 Top 30 详情
|
||||
指标说明: - 包的数量:扫描 storage/ 目录下的包文件夹数量 - 占用空间:递归计算 storage/ 下所有 .tgz 文件总大小 - 预警数量:对比阈值配置,统计触发条件的包数量 - 可清理空间:根据阈值规则,预估可释放的空间,给用户”清理动力” - 今日更新包数:最近更新时间等于今天的包数量
|
||||
##### 第二行(辅助指标 · 5 个)
|
||||
┌──────────────┬──────────────┬──────────────┬──────────────┬──────────────┐
|
||||
│ 访问排行 │ 今日下载量 │ 最大包 │ 最老包时间 │ 版本数分布 │
|
||||
│ Top 30 │ 1,234 │ tensorflow │ 3 年前 │ >50版本: 12个│
|
||||
│ [展开] │ 2.1 GB │ 2.1 GB │ legacy-utils │ [查看详情] │
|
||||
│ 今日更新包数 │ 缓存版本总数 │ 最大包 │ 最老包时间 │ 版本数分布 │
|
||||
│ 12 │ 86.1 万 │ tensorflow │ 3 年前 │ >50版本: 12个│
|
||||
│ [查看] │ 所有版本 │ 2.1 GB │ legacy-utils │ [查看详情] │
|
||||
└──────────────┴──────────────┴──────────────┴──────────────┴──────────────┘
|
||||
#### 3.3 访问次数 Top 30 排行
|
||||
点击”访问排行”卡片后,下方滑出排行榜,采用表格 + 进度条形式:
|
||||
#### 3.3 缓存占用 Top 20 排行
|
||||
概览页常驻展示占用空间最大的 20 个包,采用表格形式(真实环境无访问统计时按占用大小排序):
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ 访问次数 Top 30 │
|
||||
├──────┬──────────────────────┬──────────┬───────────────────────┤
|
||||
│ 排名 │ 包名 │ 访问次数 │ 热度 │
|
||||
├──────┼──────────────────────┼──────────┼───────────────────────┤
|
||||
│ │ lodash │ 12,456 │ ████████████░░ 85% │
|
||||
│ │ axios │ 9,832 │ █████████░░░ 72% │
|
||||
│ │ @antv/g2 │ 7,654 │ ███████░░░░░ 58% │
|
||||
│ 4 │ react │ 6,543 │ ██████░░░░░░ 49% │
|
||||
│ ... │ ... │ ... │ ... │
|
||||
└──────┴──────────────────────┴──────────┴───────────────────────┘
|
||||
设计要点: - 前三名用金银铜标识,多巴胺配色高亮 - 热度进度条直观展示相对访问频率 - 包名支持 scoped(如 @antv/g2),超出宽度省略 + tooltip - 点击包名可跳转到该包的详情卡片
|
||||
│ 缓存占用 Top 20 │
|
||||
├──────┬──────────────────────┬──────────┤
|
||||
│ 排名 │ 包名 │ 占用空间 │
|
||||
├──────┼──────────────────────┼──────────┤
|
||||
│ │ tensorflow │ 2.1 GB │
|
||||
│ │ @antv/g2 │ 1.4 GB │
|
||||
│ │ lodash │ 854 MB │
|
||||
│ 4 │ react │ 621 MB │
|
||||
│ ... │ ... │ ... │
|
||||
└──────┴──────────────────────┴──────────┘
|
||||
设计要点: - 前三名用金银铜标识,多巴胺配色高亮 - 包名支持 scoped(如 @antv/g2),超出宽度省略 + tooltip - 点击行可打开该包的详情抽屉
|
||||
#### 3.4 缓存包列表(卡片形式)
|
||||
以圆角卡片形式展示每个缓存包的核心信息,卡片采用多巴胺配色,按状态排序:
|
||||
┌──────────────────────────────────────────────────────────────┐
|
||||
|
||||
Reference in New Issue
Block a user