映三色项目管理系统 - 总管理员界面实现指南

整体架构概述

基于 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 实现模块懒加载优化性能
国际化支持：为管理界面添加多语言支持
单元测试：为核心组件和服务编写单元测试
性能优化：实现虚拟滚动、图片懒加载等性能优化措施

通过以上实现指南，可以创建一个功能完整、体验良好的总管理员界面，满足所有需求并确保代码质量和可维护性。

admin-interface-implementation.md 16 KB Историја Датотека