Ajenti项目开发指南：如何创建自定义仪表盘小部件-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00043/article/details/148443169

Ajenti项目开发指南：如何创建自定义仪表盘小部件

ajenti Ajenti Core and stock plugins 项目地址: https://gitcode.com/gh_mirrors/aj/ajenti

概述

Ajenti作为一个功能强大的服务器管理面板，其仪表盘功能允许开发者创建自定义小部件来展示各类系统信息和数据。本文将详细介绍如何在Ajenti中开发自定义仪表盘小部件，包括基本结构、模板设计和配置实现。

小部件基础结构

在Ajenti中创建自定义小部件需要继承aj.plugins.dashboard.api.Widget抽象类，并实现必要的方法和属性。以下是核心组件：

@component(Widget)
class RandomWidget(Widget):
    id = 'random'  # 小部件唯一标识符
    name = 'Random'  # 显示名称
    template = '/demo_5_widget:resources/partial/widget.html'  # 主模板路径
    config_template = '/demo_5_widget:resources/partial/widget.config.html'  # 配置模板路径

    def __init__(self, context):
        Widget.__init__(self, context)

    def get_value(self, config):
        # 根据配置生成显示值
        if 'bytes' not in config:
            return 'Not configured'
        return os.urandom(int(config['bytes'])).encode('hex')

模板设计规范

Ajenti小部件遵循特定的HTML结构和CSS类名规范，确保界面风格统一：

<div ng:controller="Demo5WidgetController">
    <div class="widget-header">
        Random  <!-- 小部件标题 -->
    </div>
    <div class="widget-value">
        {{value || 'Unknown'}}  <!-- 主内容区域 -->
    </div>
</div>

关键CSS类说明：

widget-header: 小部件标题区域
widget-value: 主内容显示区域

前端控制器实现

每个小部件需要对应的AngularJS控制器来处理数据更新和配置：

主控制器示例

angular.module('ajenti.demo5').controller('Demo5WidgetController', function($scope) {
    $scope.$on('widget-update', function($event, id, data) {
        if (id != $scope.widget.id) return;
        $scope.value = data;
    });
});

配置控制器示例

angular.module('ajenti.demo5').controller('Demo5WidgetConfigController', function($scope) {
    // 设置默认配置值
    $scope.configuredWidget.config.bytes = $scope.configuredWidget.config.bytes || 4;
});