企业级前端智能化架构：DevUI与MateChat融合实践深度剖析
作为长期深耕企业级前端架构的技术实践者，我亲历了从传统组件开发到智能化前端演进的全过程。DevUI作为华为云出品的企业级前端解决方案，与MateChat智能对话框架的结合，正在重新定义B端应用的交互范式。本文将深入探讨这一技术组合在企业级场景下的落地实践。
参考链接：
- MateChat：https://gitcode.com/DevCloudFE/MateChat
- MateChat官网：https://matechat.gitcode.com
- DevUI官网：https://devui.design/home
一、DevUI组件生态：企业级应用的工程化实践
1.1 设计哲学与生态定位
DevUI的独特价值在于其"沉浸、灵活、至简"的设计哲学。与追求视觉炫酷的UI库不同，DevUI更注重工具类产品的操作效率和用户心流体验。在华为云DevCloud平台的海量用户验证中，这种设计理念得到了充分证明。
生态架构特点：
- 多技术栈覆盖：Angular版本(ng-devui)作为主力，Vue3版本(vue-devui)持续演进
- 全链路工具链：从设计资源到代码生成的完整支撑体系
- 企业级优化：针对云控制台、后台管理等B端场景深度调优
1.2 高频组件的企业级实践
数据表格组件的深度优化
在企业级智能运维平台中，表格承载着海量数据和复杂交互逻辑。DevUI的DataTable组件为此提供了完整的解决方案：
typescript
@Component({
template: `
<d-data-table
[dataSource]="serverList"
[columns]="tableColumns"
[scroll]="{ y: '550px' }"
[pagination]="paginationConfig"
(pageChange)="loadServerData($event)"
[loading]="isLoading"
[virtualScroll]="true"
(rowCheckChange)="handleSelectionChange($event)"
[resizable]="true"
>
<!-- 主机名列配置 -->
<d-column field="hostname" header="主机名" [width]="'180px'" [sortable]="true">
<ng-template let-row="rowItem">
<div class="hostname-cell">
<d-icon [type]="getHostIcon(row.type)"></d-icon>
<span class="hostname-text">{{ row.hostname }}</span>
</div>
</ng-template>
</d-column>
<!-- 状态列配置 -->
<d-column field="status" header="状态" [width]="'100px'" [filterable]="true">
<ng-template let-row="rowItem">
<d-badge
[statusType]="getStatusType(row.status)"
[text]="statusLabels[row.status]"
></d-badge>
</ng-template>
</d-column>
<!-- 性能指标列 -->
<d-column field="performance" header="性能指标" [width]="'200px'">
<ng-template let-row="rowItem">
<div class="performance-indicators">
<d-progress
[percentage]="row.cpuUsage"
[strokeColor]="getUsageColor(row.cpuUsage)"
[showText]="false"
size="small"
></d-progress>
<span class="usage-text">{{ row.cpuUsage }}%</span>
</div>
</ng-template>
</d-column>
</d-data-table>
`
})
export class ServerManagementComponent implements OnInit {
// 分页配置
paginationConfig = {
pageIndex: 1,
pageSize: 20,
total: 0,
pageSizeOptions: [10, 20, 50, 100],
showQuickJumper: true,
showSizeChanger: true
};
// 表格列定义
tableColumns = [
{ field: 'hostname', header: '主机名', width: '180px' },
{ field: 'ip', header: 'IP地址', width: '150px' },
{ field: 'status', header: '状态', width: '100px' },
{ field: 'cpuUsage', header: 'CPU使用率', width: '120px' },
{ field: 'memoryUsage', header: '内存使用率', width: '120px' },
{ field: 'lastCheck', header: '最后检查时间', width: '180px' }
];
// 状态映射
statusLabels = {
'running': '运行中',
'stopped': '已停止',
'warning': '告警',
'error': '故障'
};
// 加载服务器数据（后端分页）
loadServerData(pageInfo: PaginationInfo) {
this.isLoading = true;
this.serverService.getServers({
page: pageInfo.pageIndex,
size: pageInfo.pageSize,
filters: this.activeFilters,
sortField: this.sortField,
sortOrder: this.sortOrder
}).subscribe({
next: (response) => {
this.serverList = response.data.items;
this.paginationConfig.total = response.data.totalCount;
this.isLoading = false;
},
error: (error) => {
console.error('加载服务器数据失败:', error);
this.isLoading = false;
}
});
}
// 获取状态类型
getStatusType(status: string): 'success' | 'warning' | 'error' | 'default' {
const statusMap = {
'running': 'success',
'stopped': 'default',
'warning': 'warning',
'error': 'error'
};
return statusMap[status] || 'default';
}
// 获取使用率颜色
getUsageColor(usage: number): string {
if (usage < 60) return '#50d4ab';
if (usage < 80) return '#fa9841';
return '#f66f6a';
}
}关键实践要点：
- 虚拟滚动优化：针对大数据量场景，必须启用virtualScroll并准确设置itemSize
- 后端分页策略：超过1000条数据必须采用后端分页，避免前端性能瓶颈
- 状态同步：筛选条件、排序状态需要与URL参数同步，支持页面刷新恢复
- 按需渲染：复杂单元格渲染使用ng-template，避免不必要的重绘
复杂表单的工程化实践
企业级表单需要处理多步骤、动态字段、复杂校验等场景：
typescript
@Component({
template: `
<d-form #deployForm="ngForm" [data]="deployConfig" [layout]="'horizontal'">
<!-- 环境选择 -->
<d-form-item label="部署环境" required>
<d-select
[(ngModel)]="deployConfig.environment"
name="environment"
(ngModelChange)="onEnvironmentChange($event)"
[rules]="{
validators: [{ required: true, message: '请选择部署环境' }]
}"
placeholder="选择部署环境"
>
<d-option
*ngFor="let env of availableEnvironments"
[value]="env.value"
[label]="env.label"
[disabled]="env.disabled"
></d-option>
</d-select>
</d-form-item>
<!-- 动态表单项：根据环境显示不同配置 -->
<d-form-item *ngIf="showAdvancedConfig" label="资源规格">
<d-radio-group
[(ngModel)]="deployConfig.resourceSpec"
name="resourceSpec"
[rules]="{
validators: [{ required: showAdvancedConfig }]
}"
>
<d-radio
*ngFor="let spec of resourceSpecs"
[value]="spec.value"
[disabled]="spec.disabled"
>
{{ spec.label }}
<span class="spec-desc">{{ spec.description }}</span>
</d-radio>
</d-radio-group>
</d-form-item>
<!-- 实例名称（异步校验唯一性） -->
<d-form-item label="实例名称" required>
<d-input
[(ngModel)]="deployConfig.instanceName"
name="instanceName"
placeholder="请输入实例名称"
[rules]="{
validators: [
{ required: true, message: '请输入实例名称' },
{
pattern: /^[a-z]([-a-z0-9]*[a-z0-9])?$/,
message: '名称只能包含小写字母、数字和连字符，且以字母开头'
},
{
asyncValidator: this.validateInstanceName.bind(this),
message: '实例名称已存在'
}
]
}"
[debounceTime]="300"
></d-input>
</d-form-item>
<!-- 表单操作 -->
<div class="form-actions">
<d-button (click)="resetForm()">重置</d-button>
<d-button
type="primary"
(click)="submitForm()"
[disabled]="!deployForm.valid"
>
开始部署
</d-button>
</div>
</d-form>
`
})
export class DeploymentFormComponent {
deployConfig = {
environment: '',
resourceSpec: '',
instanceName: ''
};
// 环境变化处理
onEnvironmentChange(env: string) {
this.showAdvancedConfig = env === 'production';
// 动态更新资源规格选项
if (env === 'production') {
this.resourceSpecs = this.productionSpecs;
} else {
this.resourceSpecs = this.developmentSpecs;
}
}
// 异步校验实例名称唯一性
validateInstanceName(control: FormControl): Observable<ValidationErrors | null> {
if (!control.value || control.value.length < 3) {
return of(null);
}
return this.instanceService.checkNameAvailability(control.value).pipe(
map(isAvailable => isAvailable ? null : { duplicate: true }),
catchError(() => of({ duplicate: true })),
debounceTime(500)
);
}
// 提交表单
submitForm() {
if (!this.deployForm.valid) {
this.messageService.error('请检查表单填写是否正确');
return;
}
this.deploymentService.createDeployment(this.deployConfig).subscribe({
next: (result) => {
this.messageService.success('部署任务创建成功');
this.router.navigate(['/deployments', result.id]);
},
error: (error) => {
this.messageService.error(`部署失败: ${error.message}`);
}
});
}
}1.3 业务组件开发规范
基于DevUI设计体系封装可复用的业务组件：
typescript
@Component({
selector: 'app-resource-selector',
template: `
<div class="resource-selector-wrapper">
<d-card [title]="cardTitle" [border]="true">
<div class="selector-content">
<!-- 搜索区域 -->
<div class="search-section">
<d-search
[placeholder]="searchPlaceholder"
(search)="onSearch($event)"
[debounceTime]="300"
></d-search>
<d-button
*ngIf="showRefresh"
icon="icon-refresh"
shape="circle"
(click)="refreshResources()"
[title]="'刷新资源列表'"
></d-button>
</div>
<!-- 资源树 -->
<div class="tree-section">
<d-tree-select
[treeData]="resourceTreeData"
[(ngModel)]="selectedResources"
[multiple]="multipleSelection"
[expandAll]="expandAll"
[checkable]="true"
[virtualScroll]="resourceTreeData.length > 100"
[height]="treeHeight"
(valueChange)="onSelectionChange($event)"
></d-tree-select>
</div>
<!-- 已选资源展示 -->
<div *ngIf="selectedResources.length > 0" class="selected-section">
<div class="selected-header">
<span>已选择 {{ selectedResources.length }} 个资源</span>
<d-button size="sm" (click)="clearSelection()">清空</d-button>
</div>
<div class="selected-tags">
<d-tag
*ngFor="let resource of getSelectedResourceDetails()"
[closable]="true"
(close)="removeResource(resource.id)"
>
{{ resource.name }}
</d-tag>
</div>
</div>
</div>
</d-card>
</div>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ResourceSelectorComponent),
multi: true
}
]
})
export class ResourceSelectorComponent implements ControlValueAccessor, OnInit {
@Input() cardTitle = '选择资源';
@Input() searchPlaceholder = '搜索资源...';
@Input() multipleSelection = true;
@Input() expandAll = false;
@Input() treeHeight = '400px';
@Input() showRefresh = true;
@Output() selectionChange = new EventEmitter<any[]>();
resourceTreeData: any[] = [];
selectedResources: string[] = [];
// 实现ControlValueAccessor接口
writeValue(value: any): void {
if (value !== undefined) {
this.selectedResources = Array.isArray(value) ? value : [value];
}
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
// 选择变化处理
onSelectionChange(selectedIds: string[]) {
this.selectedResources = selectedIds;
this.onChange(selectedIds);
this.selectionChange.emit(this.getSelectedResourceDetails());
}
// 搜索资源
onSearch(keyword: string) {
if (!keyword.trim()) {
this.loadAllResources();
return;
}
this.resourceService.searchResources(keyword).subscribe({
next: (results) => {
this.resourceTreeData = this.buildTreeData(results);
},
error: (error) => {
console.error('搜索资源失败:', error);
}
});
}
// 构建树形数据
private buildTreeData(resources: any[]): any[] {
return resources.map(resource => ({
id: resource.id,
title: resource.name,
key: resource.id,
children: resource.children ? this.buildTreeData(resource.children) : []
}));
}
}1.4 主题系统与响应式设计
DevUI基于CSS变量系统的主题定制能力：
scss
// 企业主题定制
:root {
// 品牌色系
--devui-brand: #5e7ce0;
--devui-brand-hover: #7693f5;
--devui-brand-active: #344899;
// 功能色
--devui-success: #50d4ab;
--devui-success-hover: #6be5c1;
--devui-warning: #fa9841;
--devui-warning-hover: #ffb161;
--devui-danger: #f66f6a;
--devui-danger-hover: #ff8a84;
// 中性色
--devui-text: #252b3a;
--devui-text-weak: #575d6c;
--devui-line: #adb0b8;
--devui-bg: #f5f6fa;
--devui-bg-gray: #f0f2f5;
// 间距系统
--devui-spacing-xs: 4px;
--devui-spacing-sm: 8px;
--devui-spacing-md: 16px;
--devui-spacing-lg: 24px;
--devui-spacing-xl: 32px;
// 圆角
--devui-border-radius: 4px;
--devui-border-radius-sm: 2px;
--devui-border-radius-lg: 8px;
// 字体
--devui-font-size: 14px;
--devui-font-size-sm: 12px;
--devui-font-size-lg: 16px;
--devui-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
// 暗黑主题
[data-theme="dark"] {
--devui-brand: #5e7ce0;
--devui-bg: #141414;
--devui-bg-gray: #1f1f1f;
--devui-text: #ffffff;
--devui-text-weak: rgba(255, 255, 255, 0.65);
--devui-line: #434343;
}
// 响应式布局
.enterprise-layout {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
min-height: 100vh;
gap: 0;
.layout-header {
grid-area: header;
background: var(--devui-bg);
border-bottom: 1px solid var(--devui-line);
padding: var(--devui-spacing-md);
}
.layout-sidebar {
grid-area: sidebar;
background: var(--devui-bg-gray);
border-right: 1px solid var(--devui-line);
overflow-y: auto;
}
.layout-main {
grid-area: main;
padding: var(--devui-spacing-lg);
overflow-y: auto;
}
// 平板适配
@media (max-width: 992px) {
grid-template-columns: 200px 1fr;
.layout-sidebar {
.sidebar-text {
display: none;
}
}
}
// 手机适配
@media (max-width: 768px) {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main";
.layout-sidebar {
display: none;
}
.mobile-menu-toggle {
display: block;
}
}
}1.5 云原生控制台落地架构
在大型云管平台项目中，DevUI承担了统一设计语言和开发效率提升的双重使命：
架构设计：
- 技术栈：Angular 17 + Ng-DevUI 14 + NgRx状态管理
- 分层架构：基础组件 → 领域组件 → 页面模板
- 主题策略：CSS变量 + 主题切换中间件
- 性能优化：路由懒加载 + 组件动态导入 + 虚拟滚动
实施效果：
- 开发效率提升：相比传统开发提升40%
- UI一致性：跨团队协作达到95%一致性
- 主题切换：支持多品牌零成本迁移
- 维护成本：组件化架构降低维护复杂度30%
二、MateChat智能应用：从对话界面到智能工作流
2.1 核心能力定位
MateChat是面向GenAI场景的智能对话UI组件库，为企业应用提供一致的AI交互体验。需要明确的是，MateChat是前端交互解决方案，而非大模型服务本身。
能力矩阵：
- ✅ 对话界面组件（消息气泡、输入框、历史记录）
- ✅ 多主题适配（DevUI设计体系兼容）
- ✅ 流式响应与打字机效果
- ✅ 快捷操作与附件上传
- ❌ 不提供模型推理能力（需后端集成）
- ❌ 不直接操作系统API（需前端桥接）
2.2 智能运维助手深度集成
上下文感知的智能助手
typescript
@Component({
template: `
<div class="intelligent-assistant">
<!-- 上下文感知的助手入口 -->
<d-button
*ngIf="showAssistantEntry"
class="assistant-entry"
icon="icon-ai-assistant"
type="text"
shape="circle"
(click)="toggleAssistantPanel()"
[dTooltip]="'智能助手'"
[dTooltipPosition]="'left'"
></d-button>
<!-- MateChat对话面板 -->
<mc-chat-panel
*ngIf="isAssistantVisible"
class="assistant-panel"
[context]="currentContext"
(messageSend)="handleUserMessage($event)"
(actionClick)="handleAssistantAction($event)"
[quickPrompts]="contextualPrompts"
[enableFileUpload]="true"
[enableVoiceInput]="true"
[maxHeight]="'600px'"
[position]="'bottom-right'"
(close)="closeAssistantPanel()"
>
<!-- 自定义头部 -->
<div class="panel-header" slot="header">
<h3>智能运维助手</h3>
<span class="context-badge">{{ contextBadge }}</span>
</div>
</mc-chat-panel>
</div>
`
})
export class IntelligentAssistantComponent implements OnInit, OnDestroy {
// 当前页面上下文
currentContext = {
page: this.getCurrentPage(),
view: this.getCurrentView(),
selectedItems: this.getSelectedItems(),
filters: this.getActiveFilters(),
userRole: this.getUserRole(),
timestamp: new Date().toISOString()
};
// 上下文相关快捷提示
contextualPrompts = [
{
label: '分析当前页面数据',
value: 'analyze_current_data',
icon: 'icon-chart'
},
{
label: '筛选异常项目',
value: 'filter_abnormal_items',
icon: 'icon-filter'
},
{
label: '生成当前视图报告',
value: 'generate_view_report',
icon: 'icon-report'
},
{
label: '推荐优化建议',
value: 'suggest_optimizations',
icon: 'icon-suggest'
}
];
// 处理用户消息
handleUserMessage(message: string) {
// 构建AI请求载荷
const payload = {
query: message,
context: this.currentContext,
session_id: this.sessionId,
tools: this.getAvailableTools(),
stream: true,
temperature: 0.7
};
// 发送到AI服务
this.aiService.streamChat(payload).subscribe({
next: (chunk) => {
this.updateAssistantResponse(chunk);
},
error: (error) => {
this.showErrorMessage('AI服务暂时不可用，请稍后重试');
}
});
}
// 处理助手建议的操作
handleAssistantAction(action: AssistantAction) {
switch (action.type) {
case 'apply_filter':
this.applyFilterAction(action.payload);
break;
case 'execute_command':
this.executeCommandAction(action.payload);
break;
case 'generate_report':
this.generateReportAction(action.payload);
break;
case 'navigate_to':
this.navigateToAction(action.payload);
break;
}
}
// 获取当前上下文描述
get contextBadge(): string {
const pageMap = {
'server-list': '服务器管理',
'deployment-list': '部署管理',
'monitoring': '监控中心',
'log-analysis': '日志分析'
};
return pageMap[this.currentContext.page] || '通用助手';
}
// 获取可用工具
private getAvailableTools(): string[] {
const baseTools = ['data_query', 'text_analysis', 'report_generation'];
// 根据页面添加特定工具
const pageTools = {
'server-list': ['server_filter', 'server_operation'],
'deployment-list': ['deployment_management', 'rollback'],
'monitoring': ['metric_query', 'alert_analysis'],
'log-analysis': ['log_query', 'pattern_detection']
};
return [...baseTools, ...(pageTools[this.currentContext.page] || [])];
}
}可执行的AI动作协议
typescript
// AI动作接口定义
interface AssistantAction {
type: 'apply_filter' | 'execute_command' | 'generate_report' | 'navigate_to';
payload: any;
description: string;
confidence: number; // 0-1的置信度
requires_confirmation: boolean;
undoable: boolean;
}
// 动作执行器组件
@Component({
template: `
<div class="actionable-message">
<mc-message-bubble
[content]="message.content"
[type]="'assistant'"
[timestamp]="message.timestamp"
>
<!-- 可执行动作区域 -->
<div *ngIf="message.actions && message.actions.length > 0" class="action-buttons">
<div class="action-header">
<d-icon type="icon-suggest"></d-icon>
<span class="action-title">建议操作</span>
</div>
<div class="action-list">
<d-button
*ngFor="let action of message.actions"
class="action-button"
[type]="getButtonType(action.confidence)"
[size]="'sm'"
(click)="triggerAction(action)"
[loading]="isExecuting(action)"
[disabled]="isDisabled(action)"
>
<d-icon
*ngIf="getActionIcon(action.type)"
[type]="getActionIcon(action.type)"
></d-icon>
{{ action.description }}
<span *ngIf="action.confidence < 0.8" class="confidence-badge">
置信度: {{ (action.confidence * 100).toFixed(0) }}%
</span>
</d-button>
</div>
</div>
</mc-message-bubble>
</div>
`
})
export class ActionableMessageComponent {
@Input() message: AssistantMessage;
// 触发动作执行
triggerAction(action: AssistantAction) {
// 低置信度或危险操作需要确认
if (action.requires_confirmation || action.confidence < 0.7) {
this.showConfirmationDialog(action);
} else {
this.executeActionDirectly(action);
}
}
// 显示确认对话框
private showConfirmationDialog(action: AssistantAction) {
this.modalService.open({
id: 'action-confirmation',
width: '500px',
title: '确认执行操作',
content: `
<div class="confirmation-content">
<p>您确定要执行以下操作吗？</p>
<div class="action-details">
<strong>${action.description}</strong>
<div *ngIf="action.confidence < 0.8" class="confidence-warning">
<d-icon type="icon-warning"></d-icon>
此操作置信度较低 (${(action.confidence * 100).toFixed(0)}%)
</div>
</div>
</div>
`,
buttons: [
{
text: '取消',
handler: () => this.modalService.close('action-confirmation')
},
{
text: '确定执行',
type: 'primary',
handler: () => {
this.executeActionDirectly(action);
this.modalService.close('action-confirmation');
}
}
]
});
}
// 直接执行动作
private executeActionDirectly(action: AssistantAction) {
// 标记执行中状态
this.setActionExecuting(action, true);
switch (action.type) {
case 'apply_filter':
this.applyFilters(action.payload.filters);
break;
case 'execute_command':
this.executeTerminalCommand(action.payload.command);
break;
case 'generate_report':
this.generateCustomReport(action.payload.reportConfig);
break;
case 'navigate_to':
this.navigateToPage(action.payload.route);
break;
}
// 记录操作历史
this.logAssistantAction(action);
// 延迟清除执行状态
setTimeout(() => {
this.setActionExecuting(action, false);
}, 1000);
}
// 获取动作图标
private getActionIcon(actionType: string): string {
const iconMap = {
'apply_filter': 'icon-filter',
'execute_command': 'icon-terminal',
'generate_report': 'icon-report',
'navigate_to': 'icon-navigate'
};
return iconMap[actionType] || 'icon-action';
}
// 获取按钮类型
private getButtonType(confidence: number): 'primary' | 'common' | 'warning' {
if (confidence >= 0.8) return 'primary';
if (confidence >= 0.6) return 'common';
return 'warning';
}
}2.3 智能工作流编排
将AI对话与传统界面操作结合，形成混合工作流：
typescript
@Component({
selector: 'app-intelligent-workflow',
template: `
<div class="workflow-container">
<!-- 工作流控制面板 -->
<d-card class="workflow-controls">
<div class="control-header">
<h3>智能工作流编排</h3>
<div class="control-buttons">
<d-button (click)="startNewWorkflow()">新建工作流</d-button>
<d-button (click)="saveWorkflow()" [disabled]="!workflowModified">保存</d-button>
</div>
</div>
<!-- 工作流步骤 -->
<div class="workflow-steps">
<div
*ngFor="let step of workflowSteps; let i = index"
class="workflow-step"
[class.active]="currentStepIndex === i"
[class.completed]="step.completed"
>
<div class="step-header" (click)="selectStep(i)">
<span class="step-number">{{ i + 1 }}</span>
<span class="step-title">{{ step.title }}</span>
<span class="step-status">{{ getStepStatus(step) }}</span>
</div>
<div *ngIf="currentStepIndex === i" class="step-content">
<!-- 步骤内容动态加载 -->
<ng-container *ngComponentOutlet="step.component"></ng-container>
<!-- AI辅助区域 -->
<div class="ai-assistance-area">
<div class="ai-prompt">
<span>需要AI帮助优化此步骤吗？</span>
<d-button size="sm" (click)="requestAIAssistance(step)">
获取AI建议
</d-button>
</div>
<!-- AI建议展示 -->
<div *ngIf="step.aiSuggestions" class="ai-suggestions">
<div class="suggestion-header">
<d-icon type="icon-ai"></d-icon>
<span>AI建议</span>
</div>
<div class="suggestion-content">
{{ step.aiSuggestions }}
</div>
<div class="suggestion-actions">
<d-button size="xs" (click)="applySuggestion(step)">
采纳建议
</d-button>
<d-button size="xs" type="text" (click)="ignoreSuggestion(step)">
忽略
</d-button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 工作流进度 -->
<div class="workflow-progress">
<d-progress
[percentage]="getCompletionPercentage()"
[strokeColor]="getProgressColor()"
[showText]="true"
></d-progress>
</div>
</d-card>
<!-- 工作流聊天助手 -->
<div class="workflow-assistant">
<mc-chat-panel
[context]="workflowContext"
(messageSend)="handleWorkflowChat($event)"
[quickPrompts]="workflowPrompts"
[height]="'500px'"
></mc-chat-panel>
</div>
</div>
`
})
export class IntelligentWorkflowComponent {
// 工作流步骤定义
workflowSteps = [
{
id: 'data_collection',
title: '数据收集',
component: DataCollectionComponent,
completed: false,
aiSuggestions: null
},
{
id: 'analysis',
title: '数据分析',
component: DataAnalysisComponent,
completed: false,
aiSuggestions: null
},
{
id: 'report_generation',
title: '报告生成',
component: ReportGenerationComponent,
completed: false,
aiSuggestions: null
}
];
currentStepIndex = 0;
workflowModified = false;
// 工作流上下文
workflowContext = {
workflow_type: this.getWorkflowType(),
current_step: this.workflowSteps[this.currentStepIndex].title,
completed_steps: this.getCompletedStepCount(),
data_sources: this.getAvailableDataSources(),
user_constraints: this.getUserConstraints()
};
// 请求AI辅助
requestAIAssistance(step: WorkflowStep) {
const context = {
...this.workflowContext,
step_details: step,
previous_data: this.getStepPreviousData(step.id)
};
this.aiService.assistWorkflowStep(context).subscribe({
next: (suggestions) => {
step.aiSuggestions = suggestions;
this.workflowModified = true;
},
error: (error) => {
console.error('获取AI建议失败:', error);
}
});
}
// 处理工作流相关聊天
handleWorkflowChat(message: string) {
const chatContext = {
...this.workflowContext,
user_query: message,
available_actions: this.getAvailableWorkflowActions()
};
this.aiService.chatWithWorkflowContext(chatContext).subscribe({
next: (response) => {
// 处理AI响应，可能包含工作流操作建议
this.handleWorkflowAIResponse(response);
},
error: (error) => {
console.error('工作流聊天失败:', error);
}
});
}
// 获取工作流完成百分比
getCompletionPercentage(): number {
const completed = this.workflowSteps.filter(step => step.completed).length;
return Math.round((completed / this.workflowSteps.length) * 100);
}
// 获取进度条颜色
getProgressColor(): string {
const percentage = this.getCompletionPercentage();
if (percentage < 30) return '#f66f6a';
if (percentage < 70) return '#fa9841';
return '#50d4ab';
}
}三、DevUI与MateChat的深度协同
3.1 设计体系一致性
MateChat基于DevUI设计语言构建，确保智能交互与传统界面在视觉和交互上保持一致：
scss
// 集成主题变量
.mc-chat-panel {
// 使用DevUI设计变量
--mc-primary-color: var(--devui-brand);
--mc-bg-color: var(--devui-bg);
--mc-text-color: var(--devui-text);
--mc-border-color: var(--devui-line);
// 组件样式继承
font-family: var(--devui-font-family);
font-size: var(--devui-font-size);
border-radius: var(--devui-border-radius);
box-shadow: var(--devui-shadow);
// 暗黑模式适配
[data-theme="dark"] & {
--mc-bg-color: var(--devui-bg-gray);
--mc-text-color: var(--devui-text);
}
// 响应式适配
@media (max-width: 768px) {
width: 100%;
height: 70vh;
bottom: 0;
border-radius: var(--devui-border-radius-lg) var(--devui-border-radius-lg) 0 0;
}
}