AriaNg标签云实现：可视化任务分类
项目地址: https://gitcode.com/gh_mirrors/ar/AriaNg 痛点直击：海量下载任务的管理困境
你是否曾面对AriaNg中数十个下载任务，却因缺乏直观分类方式而难以快速定位？当下载任务、HTTP下载、链接资源混杂在一起时，传统列表视图往往导致：
- 重要任务被淹没在信息流中
- 同类资源难以批量管理
- 存储占用分布不透明
本文将通过实现动态标签云（Tag Cloud） 功能，帮助你以可视化方式掌控下载任务。完成后你将获得：
- 按文件类型自动分类的交互式标签云
- 点击标签快速筛选相关任务的能力
- 基于ECharts的动态渲染与主题适配
技术原理：从任务数据到可视化标签
数据提取流程
AriaNg的任务数据处理核心在aria2TaskService.js中，我们需要从中提取两类关键信息：
// 核心数据提取逻辑（简化版）
function extractFileTypes(tasks) {
const typeCount = {};
tasks.forEach(task => {
// 从下载任务元信息提取
if (task.downloadinfo?.info?.name) {
const ext = getFileExtension(task.downloadinfo.info.name);
typeCount[ext] = (typeCount[ext] || 0) + 1;
}
// 从文件列表提取
else if (task.files?.length) {
task.files.forEach(file => {
const ext = getFileExtension(file.fileName);
typeCount[ext] = (typeCount[ext] || 0) + 1;
});
}
});
return Object.entries(typeCount).map(([name, value]) => ({
name,
value,
// 根据数量计算权重（用于标签大小）
weight: Math.log(value) * 5 + 12
}));
}
标签云渲染架构
利用AriaNg已集成的ECharts框架（chart.js），我们可以构建三层架构：
实现步骤：30分钟集成标签云功能
1. 扩展任务服务
首先在src/scripts/services/aria2TaskService.js中添加类型提取方法：
// 添加到aria2TaskService返回对象
getTaskFileTypes: function(tasks) {
const typeCount = {};
angular.forEach(tasks, function(task) {
// 处理下载任务
if (task.downloadinfo && task.downloadinfo.info && task.downloadinfo.info.name) {
const fileName = task.downloadinfo.info.name;
const ext = fileName.split('.').pop().toLowerCase() || 'unknown';
typeCount[ext] = (typeCount[ext] || 0) + 1;
}
// 处理普通文件
else if (task.files && task.files.length) {
angular.forEach(task.files, function(file) {
if (!file.fileName) return;
const ext = file.fileName.split('.').pop().toLowerCase() || 'unknown';
typeCount[ext] = (typeCount[ext] || 0) + 1;
});
}
});
return Object.keys(typeCount).map(key => ({
name: key.toUpperCase(),
value: typeCount[key],
weight: Math.min(Math.max(Math.log(typeCount[key]) * 3, 8), 24)
})).sort((a, b) => b.value - a.value);
}
2. 创建标签云指令
在src/scripts/directives/目录下新建tagCloud.js：
(function () {
'use strict';
angular.module('ariaNg').directive('ngTagCloud', ['$window', 'chartTheme', function ($window, chartTheme) {
return {
restrict: 'E',
template: '<div class="tag-cloud-container"></div>',
scope: {
tags: '=ngTags',
onSelect: '&ngOnSelect'
},
link: function (scope, element, attrs) {
const container = element.find('div')[0];
const chart = echarts.init(container, chartTheme.get(scope.theme));
// 响应式调整
angular.element($window).on('resize', function() {
chart.resize();
});
// 监听标签数据变化
scope.$watch('tags', function(tags) {
if (!tags || !tags.length) return;
chart.setOption({
series: [{
type: 'wordCloud',
sizeRange: [12, 36],
rotationRange: [-45, 0, 45],
textStyle: {
color: function() {
return 'hsl(' + Math.random() * 360 + ', 70%, 60%)';
}
},
data: tags.map(tag => ({
name: `${tag.name} (${tag.value})`,
value: tag.weight,
ext: tag.name
}))
}]
});
}, true);
// 点击事件处理
chart.on('click', params => {
scope.onSelect({ext: params.data.ext.toLowerCase()});
});
// 清理
scope.$on('$destroy', function() {
chart.dispose();
});
}
};
}]);
}());
3. 集成到视图页面
修改src/views/list.html添加标签云容器：
<!-- 在任务列表上方插入 -->
<div class="tag-cloud-panel">
<ng-tag-cloud
ng-tags="taskFileTypes"
ng-on-select="filterByExtension(ext)"
style="height: 200px;">
</ng-tag-cloud>
</div>
<!-- 原有任务列表 -->
<table class="task-table">
<!-- 表格内容保持不变 -->
</table>
4. 添加控制器逻辑
在src/scripts/controllers/list.js中添加：
// 注入aria2TaskService
angular.module('ariaNg').controller('ListController', ['$scope', 'aria2TaskService', function($scope, aria2TaskService) {
$scope.taskFileTypes = [];
$scope.activeExtension = null;
// 获取任务并生成标签云
const refreshTaskTags = function() {
aria2TaskService.getTaskList('downloading', true, function(response) {
if (response.success) {
$scope.taskFileTypes = aria2TaskService.getTaskFileTypes(response.data);
}
});
};
// 标签点击筛选
$scope.filterByExtension = function(ext) {
$scope.activeExtension = ext;
// 实际筛选逻辑
filterTasksByExtension(ext);
};
// 初始化时加载
refreshTaskTags();
// 定时刷新
setInterval(refreshTaskTags, 30000);
}]);
5. 样式适配
在src/styles/controls/task-table.css添加：
.tag-cloud-container {
width: 100%;
margin: 15px 0;
border-radius: 4px;
background-color: rgba(0,0,0,0.02);
padding: 10px;
}
/* 选中标签高亮效果 */
.tag-cloud-panel .active-tag {
text-decoration: underline;
font-weight: bold;
}
功能增强：从基础到高级
多维度分类扩展
通过扩展数据提取逻辑，可以支持更多分类维度：
实现协议分类的示例代码：
// 提取协议类型
function extractProtocols(tasks) {
const protoCount = {};
tasks.forEach(task => {
if (task.files && task.files[0]?.uris) {
const uri = task.files[0].uris[0].uri;
const proto = uri.split(':')[0];
protoCount[proto] = (protoCount[proto] || 0) + 1;
}
});
return Object.entries(protoCount).map(([name, value]) => ({
name, value
}));
}
主题适配与动画效果
利用AriaNg现有的主题系统（chartTheme服务），实现深色/浅色模式自动切换：
// 在tagCloud.js中添加主题监听
scope.$watch('theme', function(newTheme) {
chart.dispose();
chart = echarts.init(container, chartTheme.get(newTheme));
// 重新设置选项
setChartOptions();
});
添加动画过渡效果：
// 在setOption中添加
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
部署与兼容性
环境要求
- AriaNg v1.2.0+
- ECharts 4.0+（已内置）
- 现代浏览器（支持ES6+）
安装命令
# 克隆仓库
git clone https://gitcode.com/gh_mirrors/ar/AriaNg
# 安装依赖
cd AriaNg && npm install
# 构建修改
npm run build
结语与扩展思路
标签云功能为AriaNg带来了直观的任务分类体验，但这仅仅是开始。你还可以：
- 添加标签权重调整：允许用户手动调整标签重要性
- 实现标签组合筛选：支持同时选择多个标签进行交叉筛选
- 集成存储分析：显示各类文件占用的存储空间比例
- 导出分类报告：生成CSV格式的下载统计数据
通过本文的方法，不仅解决了任务管理的痛点，更展示了如何在现有框架上优雅扩展功能。这种基于数据可视化的思路，同样适用于AriaNg的其他模块优化。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
