ng-admin项目主题定制完全指南

ng-admin项目主题定制完全指南

ng-admin Add an AngularJS admin GUI to any RESTful API 项目地址: https://gitcode.com/gh_mirrors/ng/ng-admin

ng-admin作为一款优秀的前端管理界面框架，提供了丰富的主题定制能力。本文将全面介绍如何在ng-admin中实现各种级别的界面定制，从简单的样式调整到完整的模板覆盖。

一、样式定制基础

ng-admin的CSS基于Bootstrap 3构建，并继承了sb-admin的样式体系。开发者可以通过添加自定义CSS来覆盖或扩展默认样式。

ng-admin为每个界面元素添加了特定的CSS类名，便于精确选择：

• 列表视图的数据表格使用ng-admin-entity-[entityName]类
• 表格列头使用ng-admin-column-[fieldName]类

建议使用浏览器开发者工具检查元素，找到准确的CSS选择器进行样式覆盖。

二、字段级样式定制

ng-admin允许为字段添加自定义CSS类，这在需要根据不同条件改变字段外观时特别有用。

1. 静态类名添加

myEntity.listView().fields([
    nga.field('title').cssClasses(['highlight', 'bold-text'])
]);

2. 动态类名添加

可以根据条目值动态返回类名：

myEntity.listView().fields([
    nga.field('publishDate').cssClasses(function(entry) {
        if (entry && entry.values && entry.values.publishDate >= Date.now()) {
            return 'future-publish';
        }
    })
]);

注意：列表视图的表头也会调用此函数，因此需要检查entry参数是否存在。

三、字段模板定制

所有字段类型都支持template()方法，允许完全自定义字段的显示方式。

1. 基本模板定制

listview.fields([
    nga.field('amount', 'number')
        .format('$0,000.00')
        .template('<span ng-class="{ \'negative\': value < 0 }">
                  <ma-number-column field="::field" value="::entry.values[field.name()]">
                  </ma-number-column></span>')
]);

模板中可用的变量：

• 列表/详情视图：value, field, entry, entity, datastore
• 过滤器：value, field, values, datastore
• 编辑/创建视图：value, field, entry, entity, form, datastore

2. 包含标签的完整模板

post.editionView()
    .fields([
        nga.field('subcategory', 'choice')
            .template('<ma-field ng-if="entry.values.category" 
                      field="::field" value="entry.values[field.name()]" 
                      entry="entry" entity="::entity" 
                      form="formController.form" 
                      datastore="::formController.dataStore">
                      </ma-field>', true)
    ]);

四、指令级模板定制

通过Angular的$provide服务，可以修改ng-admin内置指令的模板：

var myApp = angular.module('myApp', ['ng-admin']);
myApp.config(function(NgAdminConfigurationProvider, $provide) {
    $provide.decorator('maTextFieldDirective', ['$delegate', function ($delegate) {
        // 直接修改模板
        $delegate[0].template = angular.element($delegate[0].template)
            .addClass('CustomTextField')[0].outerHTML;
        
        // 或者使用外部模板文件
        // $delegate[0].templateUrl = 'custom-text-field.html';
        
        return $delegate;
    }]);
});

五、视图级模板定制

1. 单个实体的视图模板

var customListTemplate = require('text!./custom-list.html');
myEntity.listView().template(customListTemplate);

2. 全局视图模板

admin.customTemplate(function(viewName) {
    if (viewName === 'ListView') {
        return require('text!./global-list.html');
    }
});

六、布局级定制

1. 仪表板定制

admin.dashboard(nga.dashboard()
    .template(require('text!./custom-dashboard.html'))
);

2. 应用头部定制

admin.header(`
<div class="navbar-header">
    <a class="navbar-brand" ng-click="appController.displayHome()">
        我的管理系统
    </a>
</div>
<div class="navbar-right">
    <user-info></user-info>
</div>
`);

3. 完整布局定制

admin.layout(require('text!./custom-layout.html'));

七、错误处理定制

1. 自定义错误消息

entity.errorMessage(function (response) {
    return '操作失败: ' + response.status + ' - ' + response.data.message;
});

2. 自定义HTTP错误处理

// HttpErrorDecorator.js
export const HttpErrorDecorator = ($delegate, $translate, notification) => {
    $delegate.handle403Error = error => {
        notification.log('权限不足，请联系管理员', {
            addnCls: 'humane-flatty-warning'
        });
        throw error;
    };
    return $delegate;
}

// 应用配置
myApp.decorator('HttpErrorService', require('HttpErrorDecorator'));

总结

ng-admin提供了从CSS样式到完整模板的多层次定制能力，开发者可以根据项目需求选择合适的定制级别。对于简单的样式调整，使用CSS覆盖是最快捷的方式；对于复杂的界面需求，则可以通过模板定制实现完全的控制。建议从小的定制开始，逐步扩展到更大的范围，以确保系统的稳定性。

ng-admin Add an AngularJS admin GUI to any RESTful API 项目地址: https://gitcode.com/gh_mirrors/ng/ng-admin