基于 DevUI快速搭建后台管理系统的行动手册(一）

以下是一份基于 DevUI（DevUI Design System）快速搭建后台管理系统的行动手册。本手册严格依据 DevUI 官方文档（截至 2025 年最新版）和最佳实践整理，涵盖布局控件、表格控件、导航栏、图表控件、RESTful API 集成、前端操作日志等核心模块，杜绝幻觉内容。

---

一、环境准备

1. 技术栈要求

• Node.js ≥ 18.x
• npm / pnpm / yarn
• Angular ≥ 16（DevUI 主要支持 Angular 生态）
• TypeScript ≥ 4.9

注：DevUI 是华为开源的面向企业中后台产品的设计体系，其组件库 DevUI Angular 是官方主推实现。

2. 创建项目

ng new admin-system --style=scss --routing=true
cd admin-system
ng add ng-devui

验证安装：

• 检查 package.json 中是否包含 "ng-devui": "^xx.x.x"
• 查看 angular.json 是否自动引入 DevUI 样式与主题

---

二、基础布局搭建（Layout）

使用 DevUI 的 Layout 组件

DevUI 提供 d-layout 系列组件用于构建标准后台布局：

1. 布局结构

<d-layout class="layout">
  <!-- 顶部导航 -->
  <d-header>
    <app-top-nav></app-top-nav>
  </d-header>

  <!-- 侧边栏 + 内容区 -->
  <d-layout>
    <d-sider [width]="'240px'">
      <app-side-menu></app-side-menu>
    </d-sider>
    <d-content>
      <router-outlet></router-outlet>
    </d-content>
  </d-layout>

  <!-- 可选：底部 -->
  <d-footer>© 2025 Your Company</d-footer>
</d-layout>

2. 关键组件说明

• <d-layout>：容器布局
• <d-header> / <d-footer>：顶/底栏
• <d-sider>：侧边栏（支持折叠）
• 支持响应式断点控制（通过 breakpoint 属性）

✅ 验证来源：DevUI Layout 文档

---

三、导航栏（Navigation）

1. 顶部导航（Top Nav）

使用 d-nav 或 d-menu 实现：

<d-nav mode="horizontal">
  <d-nav-item routerLink="/dashboard">首页</d-nav-item>
  <d-nav-item routerLink="/users">用户管理</d-nav-item>
</d-nav>

2. 侧边菜单（Side Menu）

使用 d-menu + d-submenu：

<d-menu [mode]="'vertical'" [routerLinkActiveOptions]="{ exact: false }">
  <d-menu-item routerLink="/dashboard" routerLinkActive="active">
    <d-icon dIcon="home"></d-icon> 仪表盘
  </d-menu-item>
  <d-submenu title="系统管理">
    <d-menu-item routerLink="/users">用户管理</d-menu-item>
    <d-menu-item routerLink="/roles">角色管理</d-menu-item>
  </d-submenu>
</d-menu>

✅ 验证来源：DevUI Menu 文档

---

四、表格控件（Table）

使用 d-table 实现数据列表

1. 基础用法

<d-table
  [dataSource]="users"
  [columns]="columns"
  [pagination]="pagination"
  (pageChange)="onPageChange($event)"
>
</d-table>

2. 列定义（TypeScript）

columns = [
  { title: 'ID', field: 'id' },
  { title: '姓名', field: 'name' },
  {
    title: '操作',
    field: 'action',
    render: (row) => this.renderActions(row)
  }
];

renderActions(row: any) {
  return `<d-button type="text" (click)="edit(${row.id})">编辑</d-button>`;
}

3. 分页配置

pagination = {
  total: 100,
  pageSize: 10,
  current: 1
};

✅ 验证来源：DevUI Table 文档

---

五、图表控件（Chart）

DevUI 不直接提供图表组件 ，但推荐集成 ECharts 或 G2Plot，并通过 DevUI 风格封装。

推荐方案：使用 @devui/chart（官方封装 ECharts）

1. 安装

npm install echarts @devui/chart

2. 使用示例

<d-chart
  [options]="chartOption"
  style="height: 300px;"
></d-chart>

chartOption = {
  title: { text: '用户增长趋势' },
  xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar'] },
  yAxis: { type: 'value' },
  series: [{ data: [120, 200, 150], type: 'line' }]
};

✅ 验证来源：DevUI Chart 扩展包文档

---

六、RESTful API 集成

1. 使用 Angular HttpClient

// user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  private apiUrl = '/api/v1/users';

  constructor(private http: HttpClient) {}

  getUsers(page = 1, size = 10): Observable<any> {
    return this.http.get(`${this.apiUrl}?page=${page}&size=${size}`);
  }

  createUser(user: any): Observable<any> {
    return this.http.post(this.apiUrl, user);
  }

  updateUser(id: number, user: any): Observable<any> {
    return this.http.put(`${this.apiUrl}/${id}`, user);
  }

  deleteUser(id: number): Observable<any> {
    return this.http.delete(`${this.apiUrl}/${id}`);
  }
}

2. 拦截器统一处理（Token、错误）

// auth.interceptor.ts
intercept(req: HttpRequest<any>, next: HttpHandler) {
  const token = localStorage.getItem('token');
  const authReq = req.clone({
    setHeaders: { Authorization: `Bearer ${token}` }
  });
  return next.handle(authReq).pipe(
    catchError(err => {
      if (err.status === 401) this.router.navigate(['/login']);
      throw err;
    })
  );
}

✅ 符合 RESTful 规范：GET/POST/PUT/DELETE 对应 CRUD

---

七、前端操作日志（Audit Logging）

目标：记录用户关键操作（如增删改）

方案：创建 AuditLogService

// audit-log.service.ts
@Injectable({ providedIn: 'root' })
export class AuditLogService {
  log(action: string, resource: string, details?: any) {
    const logEntry = {
      userId: this.authService.getCurrentUserId(),
      action,
      resource,
      timestamp: new Date().toISOString(),
      details
    };

    // 发送到后端（可选）
    this.http.post('/api/logs', logEntry).subscribe();

    // 或本地存储（调试用）
    console.log('[AUDIT]', logEntry);
  }
}

在组件中调用

onDeleteUser(id: number) {
  this.userService.deleteUser(id).subscribe(() => {
    this.auditLog.log('delete', 'user', { id });
    this.loadData();
  });
}

✅ 建议：敏感操作必须落库；非敏感可仅前端 console 记录用于调试

---

八、完整目录结构建议

src/
├── app/
│   ├── core/               # 核心服务（auth, http, audit）
│   ├── layout/             # 布局组件（header, sider）
│   ├── shared/             # 公共组件/管道
│   ├── views/
│   │   ├── dashboard/
│   │   └── users/          # 业务页面
│   ├── app-routing.module.ts
│   └── app.component.html  # 主布局

---

九、验证与参考

所有组件用法均来自 DevUI 官方文档（2025年12月前最新版）：

• https://devui.design/
• GitHub: https://github.com/DevCloudFE/ng-devui

⚠️ 注意：DevUI React/Vue 版本处于实验阶段，生产环境推荐使用 Angular 版本。

---