admin-interface-implementation.md 16 KB
映三色项目管理系统 - 总管理员界面实现指南
整体架构概述
基于 Angular 20.1.0 框架，为总管理员角色创建一个功能完整、视觉专业的后台管理界面。采用模块化设计，实现权限控制、数据看板、项目管理、人员管理等核心功能。
页面布局架构
1. 布局基础
- 三栏式响应式布局：固定左侧导航 + 顶部操作栏 + 主内容区
- 主色调：白色为主，深蓝色 (#165DFF) 为强调色，灰色系为辅助色
- 字体规范：确保字体大小适中，主要内容文本不小于 14px
- 间距规范：采用 8px 网格系统，确保视觉一致性
2. 左侧导航栏实现
// admin-layout/admin-layout.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, RouterOutlet } from '@angular/router';
@Component({
selector: 'app-admin-layout',
standalone: true,
imports: [CommonModule, RouterModule, RouterOutlet],
templateUrl: './admin-layout.html',
styleUrl: './admin-layout.scss'
})
export class AdminLayout {
sidebarOpen = true;
currentUser = { name: '超级管理员', avatar: 'https://picsum.photos/id/1/40/40' };
currentDate = new Date();
toggleSidebar() {
this.sidebarOpen = !this.sidebarOpen;
}
}
<!-- admin-layout/admin-layout.html -->
<div class="admin-layout">
<!-- 顶部导航栏 -->
<header class="top-navbar">
<div class="navbar-left">
<button class="menu-toggle" (click)="toggleSidebar()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</button>
<h1 class="app-title">系统管理后台</h1>
</div>
<div class="navbar-right">
<div class="date-display">{{ currentDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }) }}</div>
<div class="user-profile">
<img [src]="currentUser.avatar" alt="用户头像" class="user-avatar">
<span class="user-name">{{ currentUser.name }}</span>
</div>
</div>
</header>
<!-- 主要内容区 -->
<main class="main-content">
<!-- 左侧侧边栏 -->
<aside class="sidebar" [class.collapsed]="!sidebarOpen">
<nav class="sidebar-nav">
<div class="nav-section">
<h3 class="section-title">核心功能</h3>
<a href="/admin/dashboard" class="nav-item" routerLinkActive="active">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
</svg>
<span>总览看板</span>
</a>
<a href="/admin/project-management" class="nav-item" routerLinkActive="active">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<line x1="8" y1="6" x2="21" y2="6"></line>
<line x1="8" y1="12" x2="21" y2="12"></line>
<line x1="8" y1="18" x2="21" y2="18"></line>
<line x1="3" y1="6" x2="3.01" y2="6"></line>
<line x1="3" y1="12" x2="3.01" y2="12"></line>
<line x1="3" y1="18" x2="3.01" y2="18"></line>
</svg>
<span>项目管理</span>
</a>
<a href="/admin/designers" class="nav-item" routerLinkActive="active">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
<span>设计师管理</span>
</a>
<a href="/admin/customers" class="nav-item" routerLinkActive="active">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span>客户管理</span>
</a>
<a href="/admin/finance" class="nav-item" routerLinkActive="active">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<line x1="12" y1="1" x2="12" y2="23"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
<span>财务管理</span>
</a>
</div>
<div class="nav-section">
<h3 class="section-title">系统设置</h3>
<a href="/admin/system-settings" class="nav-item" routerLinkActive="active">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
<span>系统设置</span>
</a>
<a href="/admin/logs" class="nav-item" routerLinkActive="active">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
<span>系统日志</span>
</a>
<a href="/admin/api-integrations" class="nav-item" routerLinkActive="active">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
<span>API集成管理</span>
</a>
</div>
</nav>
</aside>
<!-- 中间内容区 -->
<div class="content-wrapper" [class.expanded]="!sidebarOpen">
<router-outlet />
</div>
</main>
</div>
模块实现指南
1. 总览看板模块
// admin/dashboard/dashboard.ts
import { Component, OnInit, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import * as echarts from 'echarts';
import { AdminDashboardService } from './dashboard.service';
@Component({
selector: 'app-admin-dashboard',
standalone: true,
imports: [CommonModule, RouterModule],
templateUrl: './dashboard.html',
styleUrl: './dashboard.scss'
})
export class AdminDashboard implements OnInit {
// 统计数据
stats = {
totalProjects: signal(128),
activeProjects: signal(86),
completedProjects: signal(42),
totalDesigners: signal(24),
totalCustomers: signal(356),
totalRevenue: signal(1258000)
};
constructor(private dashboardService: AdminDashboardService) {}
ngOnInit(): void {
this.loadDashboardData();
this.initCharts();
}
loadDashboardData(): void {
// 从服务加载数据
this.dashboardService.getDashboardStats().subscribe(data => {
// 更新统计数据
});
}
initCharts(): void {
// 初始化项目趋势图
const projectChart = echarts.init(document.getElementById('projectTrendChart')!);
projectChart.setOption({
title: { text: '项目数量趋势', left: 'center', textStyle: { fontSize: 16 } },
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
yAxis: { type: 'value' },
series: [{
name: '新项目',
type: 'line',
data: [18, 25, 32, 28, 42, 38],
lineStyle: { color: '#165DFF' },
itemStyle: { color: '#165DFF' }
}, {
name: '完成项目',
type: 'line',
data: [15, 20, 25, 22, 35, 30],
lineStyle: { color: '#00B42A' },
itemStyle: { color: '#00B42A' }
}]
});
// 初始化收入统计图
const revenueChart = echarts.init(document.getElementById('revenueChart')!);
revenueChart.setOption({
title: { text: '季度收入统计', left: 'center', textStyle: { fontSize: 16 } },
tooltip: { trigger: 'item' },
series: [{
name: '收入分布',
type: 'pie',
radius: '65%',
data: [
{ value: 350000, name: '第一季度' },
{ value: 420000, name: '第二季度' },
{ value: 488000, name: '第三季度' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
});
// 响应窗口大小变化
window.addEventListener('resize', () => {
projectChart.resize();
revenueChart.resize();
});
}
}
2. 项目管理模块
创建项目列表和项目详情组件，实现项目的创建、分配、编辑和关闭功能。
3. 用户与角色管理模块
实现用户管理、角色管理和权限分配功能。
4. 系统设置模块
实现全局设置、流程配置、报价规则等系统级配置功能。
5. 系统日志模块
实现操作日志查询、筛选和导出功能。
6. API集成管理模块
实现与第三方服务的接口配置功能。
组件化设计
创建以下可复用组件：
数据卡片组件
// shared/components/stats-card/stats-card.ts import { Component, Input } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-stats-card', standalone: true, imports: [CommonModule], template: ` <div class="stats-card"> <div class="stat-icon" [ngClass]="iconColor"> <ng-content select="[icon]"></ng-content> </div> <div class="stat-content"> <div class="stat-value">{{ value }}</div> <div class="stat-label">{{ label }}</div> </div> <div class="stat-trend" [ngClass]="trendClass"> <span>{{ trend }}</span> </div> </div> `, styles: [` /* 样式定义 */ `] }) export class StatsCard { @Input() value: string | number = 0; @Input() label: string = ''; @Input() trend: string = ''; @Input() trendType: 'positive' | 'negative' | 'neutral' = 'neutral'; @Input() iconColor: string = 'primary'; get trendClass() { return `stat-trend ${this.trendType}`; } }**表格组件、筛选组件、表单组件等
状态管理与数据流
使用 RxJS 管理数据流
// admin/services/admin-dashboard.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, map } from 'rxjs'; import { DashboardStats } from '../models/admin.model'; @Injectable({ providedIn: 'root' }) export class AdminDashboardService { constructor(private http: HttpClient) {} getDashboardStats(): Observable<DashboardStats> { // 模拟API调用 return this.http.get<DashboardStats>('/api/admin/dashboard/stats') .pipe( map(response => { // 数据转换处理 return response; }) ); } }
权限控制实现
创建角色守卫实现路由权限控制：
// guards/role.guard.ts
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
export const roleGuard: CanActivateFn = (route, state) => {
const authService = inject(AuthService);
const router = inject(Router);
const requiredRoles = route.data['roles'] as string[];
const userRoles = authService.getUserRoles();
// 检查用户是否有管理权限
const hasAccess = requiredRoles.some(role => userRoles.includes(role));
if (!hasAccess) {
router.navigate(['/']);
return false;
}
return true;
};
路由配置
// app.routes.ts
import { Routes } from '@angular/router';
// ... 其他导入
import { AdminLayout } from './pages/admin/admin-layout/admin-layout';
import { AdminDashboard } from './pages/admin/dashboard/dashboard';
import { ProjectManagement } from './pages/admin/project-management/project-management';
import { UserManagement } from './pages/admin/user-management/user-management';
import { SystemSettings } from './pages/admin/system-settings/system-settings';
import { SystemLogs } from './pages/admin/system-logs/system-logs';
import { ApiIntegrations } from './pages/admin/api-integrations/api-integrations';
import { roleGuard } from './guards/role.guard';
export const routes: Routes = [
// ... 其他路由
// 管理员路由
{
path: 'admin',
component: AdminLayout,
canActivate: [roleGuard],
data: { roles: ['admin'] },
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: AdminDashboard, title: '总览看板' },
{ path: 'project-management', component: ProjectManagement, title: '项目管理' },
{ path: 'user-management', component: UserManagement, title: '用户与角色管理' },
{ path: 'system-settings', component: SystemSettings, title: '系统设置' },
{ path: 'logs', component: SystemLogs, title: '系统日志' },
{ path: 'api-integrations', component: ApiIntegrations, title: 'API集成管理' }
]
},
// 默认路由重定向
{ path: '', redirectTo: '/customer-service/dashboard', pathMatch: 'full' },
{ path: '**', redirectTo: '/customer-service/dashboard' }
];
UI/UX 设计指南
- 视觉层次：通过卡片、阴影、边框创建清晰的视觉层次
- 交互反馈：为所有可点击元素添加悬停效果，操作结果提供明确反馈
- 加载状态：实现骨架屏或加载动画
- 错误处理：提供友好的错误提示和引导
- 响应式设计：确保在不同屏幕尺寸下的良好体验
技术实现建议
安装依赖：
# 安装 Angular Material npm install @angular/material @angular/cdk @angular/animations # 安装 ECharts 和 Angular 包装器 npm install echarts ngx-echarts # 安装 NgRx 用于状态管理 npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools模块懒加载：使用
loadChildren实现模块懒加载优化性能国际化支持：为管理界面添加多语言支持
单元测试：为核心组件和服务编写单元测试
性能优化：实现虚拟滚动、图片懒加载等性能优化措施
通过以上实现指南，可以创建一个功能完整、体验良好的总管理员界面，满足所有需求并确保代码质量和可维护性。