Vendure电商平台Admin UI仪表盘组件开发指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00051/article/details/148487812

Vendure电商平台Admin UI仪表盘组件开发指南

vendure A headless GraphQL commerce platform for the modern web 项目地址: https://gitcode.com/gh_mirrors/ve/vendure

概述

在Vendure电商平台中，Admin UI仪表盘组件(Dashboard Widgets)是管理员后台的核心功能模块，它们以可视化组件的形式展示关键业务数据，如销售概览、待处理订单列表、系统通知等重要信息。本文将深入讲解如何为Vendure平台开发自定义仪表盘组件。

仪表盘组件基础

仪表盘组件本质上是Angular组件，它们可以：

动态展示后端数据
支持多种布局尺寸
根据管理员权限控制显示
支持懒加载优化性能

Vendure默认提供了一些基础组件，开发者可以根据业务需求扩展自定义组件。

实战：开发商品审核组件

假设我们正在开发一个商品评价系统，需要让管理员能快速查看待审核的评价。

1. 创建组件

首先创建Angular组件文件：

// reviews-widget.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService, SharedModule } from '@vendure/admin-ui/core';
import { Observable } from 'rxjs';

@Component({
    selector: 'reviews-widget',
    template: `
        <div class="widget-container">
            <h3>待审核评价</h3>
            <div class="review-list">
                <div *ngFor="let review of pendingReviews$ | async" class="review-item">
                    <a [routerLink]="['/extensions', 'product-reviews', review.id]">
                        {{ review.summary }}
                    </a>
                    <span class="rating">{{ review.rating }} / 5</span>
                </div>
            </div>
        </div>
    `,
    standalone: true,
    imports: [SharedModule],
    styles: [`
        .widget-container {
            padding: 1rem;
        }
        .review-list {
            margin-top: 1rem;
        }
        .review-item {
            padding: 0.5rem 0;
            border-bottom: 1px solid #eee;
        }
        .rating {
            float: right;
            color: #ff9800;
        }
    `]
})
export class ReviewsWidgetComponent implements OnInit {
    pendingReviews$: Observable<any[]>;

    constructor(private dataService: DataService) {}

    ngOnInit() {
        this.pendingReviews$ = this.dataService.query(gql`
            query GetAllReviews($options: ProductReviewListOptions) {
                productReviews(options: $options) {
                    items {
                        id
                        createdAt
                        authorName
                        summary
                        rating
                    }
                }
            }`, {
                options: {
                    filter: { state: { eq: 'new' } },
                    take: 10,
                },
            })
            .mapStream(data => data.productReviews.items);
    }
}

2. 注册组件

创建提供者文件注册组件：

// providers.ts
import { registerDashboardWidget } from '@vendure/admin-ui/core';

export default [
    registerDashboardWidget('reviews', {
        title: '最新评价',
        supportedWidths: [4, 6, 8, 12],
        requiresPermissions: ['ReadReview'],
        loadComponent: () =>
            import('./reviews-widget/reviews-widget.component').then(
                m => m.ReviewsWidgetComponent,
            ),
    }),
];

关键配置说明：

title: 组件标题
supportedWidths: 支持的宽度选项(基于12列网格系统)
requiresPermissions: 所需权限
loadComponent: 动态导入组件的函数

3. 设置默认布局

可以预设组件的默认布局：

import { setDashboardWidgetLayout } from '@vendure/admin-ui/core';

export default [
    // ...其他配置
    setDashboardWidgetLayout([
        { id: 'welcome', width: 12 },
        { id: 'orderSummary', width: 4 },
        { id: 'latestOrders', width: 8 },
        { id: 'reviews', width: 6 },
    ]),
];

高级技巧

覆盖默认组件

可以修改内置组件的配置，例如限制订单概览组件只对超级管理员可见：

import { OrderSummaryWidgetComponent } from '@vendure/admin-ui/dashboard';

export default [
    registerDashboardWidget('orderSummary', {
        title: 'dashboard.orders-summary',
        loadComponent: () => OrderSummaryWidgetComponent,
        requiresPermissions: ['SuperAdmin'],
    }),
];