企业官网建设流程全解析

龍魂 · 鸿蒙 ArkTS 实战：Project Milestone Timeline

核心定位

表格

维度 说明
平台 鸿蒙 HarmonyOS NEXT · 纯血鸿蒙
语言 ArkTS · 声明式UI
场景 项目里程碑管理 · 时间线可视化 · 进度追踪 · 风险预警
架构 龍魂蚁群触角 → 鸿蒙原生能力
主权 数据本地 · 国密SM2/SM3签名 · 不上传云端
系统架构

plain

┌─────────────────────────────────────────┐
│ 龍魂系统 · 鸿蒙适配层 │
│ DNA: ZHUGEXIN⚡️2025-🇨🇳🐉⚖️♠️🧚🏼‍♀️❤️♾️ │
│ UID: 9622 │
├─────────────────────────────────────────┤
│ 鸿蒙 ArkTS 应用层 │
│ │
│ EntryAbility → MilestoneTimelinePage │
│ ├── 项目状态建模（AppStorage/LocalStorage）│
│ ├── 里程碑时间线（甘特图·瀑布流·卡片） │
│ ├── 进度追踪引擎（自动计算·依赖分析） │
│ ├── 风险预警系统（延期预警·资源冲突） │
│ ├── 资源管理（人员·预算·工时） │
│ ├── 版本控制（基线·变更·回滚） │
│ └── 办公交互（导出报表·分享·日历同步） │
├─────────────────────────────────────────┤
│ 鸿蒙系统能力层 │
│ │
│ 日历(Calendar) · 通知(Notification) │
│ 数据存储(RelationalStore) · 文件(File) │
│ 网络(Http) · 分享(Share) · 打印(Print) │
│ 后台任务(WorkScheduler) · 定位(Location) │
└─────────────────────────────────────────┘
状态建模核心

TypeScript

// entry/src/main/ets/models/MilestoneModel.ets
// 龍魂 · 项目里程碑模型 · ArkTS

// === DNA常量 ===
const MASTER_DNA = “ZHUGEXIN⚡️2025-🇨🇳🐉⚖️♠️🧚🏼‍♀️❤️♾️”;
const MASTER_UID = “9622”;
const CONFIRM_SEAL = “#CONFIRM🌌9622-ONLY-ONCE🧬LK9X-772Z”;

// === 项目状态 ===
export enum ProjectStatus {
PLANNING = ‘规划中’, // 立项阶段
ACTIVE = ‘进行中’, // 执行阶段
PAUSED = ‘已暂停’, // 暂停
COMPLETED = ‘已完成’, // 完成
CANCELLED = ‘已取消’, // 取消
ARCHIVED = ‘已归档’ // 归档
}

// === 里程碑状态 ===
export enum MilestoneStatus {
NOT_STARTED = ‘未开始’, // 未开始
IN_PROGRESS = ‘进行中’, // 进行中
AT_RISK = ‘有风险’, // 有风险
DELAYED = ‘已延期’, // 已延期
COMPLETED = ‘已完成’, // 已完成
BLOCKED = ‘被阻塞’ // 被阻塞
}

// === 优先级 ===
export enum Priority {
P0 = ‘P0-紧急’, // 最高
P1 = ‘P1-高’, // 高
P2 = ‘P2-中’, // 中
P3 = ‘P3-低’, // 低
P4 = ‘P4-最低’ // 最低
}

// === 风险等级 ===
export enum RiskLevel {
NONE = ‘无风险’, // 绿色
LOW = ‘低风险’, // 蓝色
MEDIUM = ‘中风险’, // 黄色
HIGH = ‘高风险’, // 橙色
CRITICAL = ‘极高风险’ // 红色
}

// === 依赖类型 ===
export enum DependencyType {
FS = ‘FS’, // Finish-to-Start 完成-开始
SS = ‘SS’, // Start-to-Start 开始-开始
FF = ‘FF’, // Finish-to-Finish 完成-完成
SF = ‘SF’ // Start-to-Finish 开始-完成
}

// === 项目档案 ===
export class Project {
id: string;
projectNo: string; // 项目编号
name: string; // 项目名称
description: string; // 项目描述
status: ProjectStatus; // 状态

// 时间
plannedStart: Date; // 计划开始
plannedEnd: Date; // 计划结束
actualStart?: Date; // 实际开始
actualEnd?: Date; // 实际结束

// 负责人
projectManager: string; // 项目经理
productManager: string; // 产品经理
techLead: string; // 技术负责人
qaLead: string; // 测试负责人

// 团队
teamMembers: TeamMember[]; // 团队成员

// 预算
budget: number; // 总预算
costIncurred: number; // 已发生成本
costForecast: number; // 预测总成本

// 里程碑
milestones: Milestone[]; // 里程碑列表

// 版本基线
baselines: Baseline[]; // 基线记录

// 风险
risks: Risk[]; // 风险列表

// 审计
createdAt: Date;
updatedAt: Date;
dnaSignature: string;

constructor(data: Partial) {
this.id = data.id || this.generateId();
this.projectNo = data.projectNo || this.generateProjectNo();
this.name = data.name || ‘’;
this.description = data.description || ‘’;
this.status = data.status || ProjectStatus.PLANNING;

this.plannedStart = data.plannedStart || new Date(); this.plannedEnd = data.plannedEnd || new Date(Date.now() + 90*24*60*60*1000); this.actualStart = data.actualStart; this.actualEnd = data.actualEnd; this.projectManager = data.projectManager || ''; this.productManager = data.productManager || ''; this.techLead = data.techLead || ''; this.qaLead = data.qaLead || ''; this.teamMembers = data.teamMembers || []; this.budget = data.budget || 0; this.costIncurred = data.costIncurred || 0; this.costForecast = data.costForecast || 0; this.milestones = data.milestones || []; this.baselines = data.baselines || []; this.risks = data.risks || []; this.createdAt = data.createdAt || new Date(); this.updatedAt = data.updatedAt || new Date(); this.dnaSignature = this.signData();

}

private generateId(): string {
returnPRJ-${MASTER_UID}-${Date.now().toString(36).substr(-6)};
}

private generateProjectNo(): string {
const date = new Date();
returnXM${date.getFullYear()}${(date.getMonth()+1).toString().padStart(2,'0')}-${Math.floor(Math.random()*9999).toString().padStart(4,'0')};
}

private signData(): string {
const payload =${this.id}-${this.projectNo}-${this.name}-${this.status};
returnSM3-${payload.split('').reduce((a,b)=>a+b.charCodeAt(0),0).toString(16).substring(0,16)};
}

// 计算进度
getProgress(): number {
if (this.milestones.length === 0) return 0;
const completed = this.milestones.filter(m => m.status === MilestoneStatus.COMPLETED).length;
return Math.round((completed / this.milestones.length) * 100);
}

// 计算延期天数
getDelayDays(): number {
if (this.actualEnd) {
return Math.max(0, Math.floor((this.actualEnd.getTime() - this.plannedEnd.getTime()) / (1000606024)));
}
if (new Date() > this.plannedEnd && this.status !== ProjectStatus.COMPLETED) {
return Math.floor((new Date().getTime() - this.plannedEnd.getTime()) / (1000606024));
}
return 0;
}

// 计算SPI（进度绩效指数）
getSPI(): number {
const pv = this.getPlannedValue();
const ev = this.getEarnedValue();
return pv > 0 ? ev / pv : 0;
}

// 计算CPI（成本绩效指数）
getCPI(): number {
const ev = this.getEarnedValue();
const ac = this.costIncurred;
return ac > 0 ? ev / ac : 0;
}

// 计划价值
private getPlannedValue(): number {
const totalDuration = this.plannedEnd.getTime() - this.plannedStart.getTime();
const elapsed = new Date().getTime() - this.plannedStart.getTime();
const plannedProgress = Math.min(1, Math.max(0, elapsed / totalDuration));
return this.budget * plannedProgress;
}

// 挣值
private getEarnedValue(): number {
return this.budget * (this.getProgress() / 100);
}

// 获取当前风险等级
getCurrentRiskLevel(): RiskLevel {
const sp = this.getSPI();
const cp = this.getCPI();

if (sp < 0.7 || cp < 0.7) return RiskLevel.CRITICAL; if (sp < 0.85 || cp < 0.85) return RiskLevel.HIGH; if (sp < 0.95 || cp < 0.95) return RiskLevel.MEDIUM; if (sp < 1.0 || cp < 1.0) return RiskLevel.LOW; return RiskLevel.NONE;

}

// 创建基线
createBaseline(name: string, description: string): Baseline {
const baseline: Baseline = {
id:BL-${Date.now()},
name,
description,
createdAt: new Date(),
milestones: this.milestones.map(m => ({ …m })),
budget: this.budget,
plannedStart: this.plannedStart,
plannedEnd: this.plannedEnd,
dnaSignature: this.signBaseline(name)
};
this.baselines.push(baseline);
return baseline;
}

// 回滚到基线
rollbackToBaseline(baselineId: string): boolean {
const baseline = this.baselines.find(b => b.id === baselineId);
if (!baseline) return false;

this.milestones = baseline.milestones.map(m => new Milestone(m)); this.budget = baseline.budget; this.plannedStart = baseline.plannedStart; this.plannedEnd = baseline.plannedEnd; this.updatedAt = new Date(); this.dnaSignature = this.signData(); return true;

}

private signBaseline(name: string): string {
const payload =${this.id}-BASELINE-${name}-${Date.now()};
returnSM3-${payload.split('').reduce((a,b)=>a+b.charCodeAt(0),0).toString(16).substring(0,16)};
}
}

// === 里程碑 ===
export class Milestone {
id: string;
name: string;
description: string;
status: MilestoneStatus;
priority: Priority;

// 时间
plannedStart: Date;
plannedEnd: Date;
actualStart?: Date;
actualEnd?: Date;

// 进度
progress: number; // 0-100

// 依赖
dependencies: Dependency[];

// 资源
assignedTo: string[];
estimatedHours: number;
actualHours: number;

// 交付物
deliverables: Deliverable[];

// 检查点
checkPoints: CheckPoint[];

// 风险
riskLevel: RiskLevel;
riskDescription: string;

// 审计
createdAt: Date;
updatedAt: Date;
dnaSignature: string;

constructor(data: Partial) {
this.id = data.id ||MS-${Date.now()}-${Math.random().toString(36).substr(2,6)};
this.name = data.name || ‘’;
this.description = data.description || ‘’;
this.status = data.status || MilestoneStatus.NOT_STARTED;
this.priority = data.priority || Priority.P2;

this.plannedStart = data.plannedStart || new Date(); this.plannedEnd = data.plannedEnd || new Date(); this.actualStart = data.actualStart; this.actualEnd = data.actualEnd; this.progress = data.progress || 0; this.dependencies = data.dependencies || []; this.assignedTo = data.assignedTo || []; this.estimatedHours = data.estimatedHours || 0; this.actualHours = data.actualHours || 0; this.deliverables = data.deliverables || []; this.checkPoints = data.checkPoints || []; this.riskLevel = data.riskLevel || RiskLevel.NONE; this.riskDescription = data.riskDescription || ''; this.createdAt = data.createdAt || new Date(); this.updatedAt = data.updatedAt || new Date(); this.dnaSignature = this.signData();

}

private signData(): string {
const payload =${this.id}-${this.name}-${this.status}-${this.progress};
returnSM3-${payload.split('').reduce((a,b)=>a+b.charCodeAt(0),0).toString(16).substring(0,16)};
}

// 计算延期天数
getDelayDays(): number {
if (this.actualEnd && this.actualEnd > this.plannedEnd) {
return Math.floor((this.actualEnd.getTime() - this.plannedEnd.getTime()) / (1000606024));
}
if (new Date() > this.plannedEnd && this.status !== MilestoneStatus.COMPLETED) {
return Math.floor((new Date().getTime() - this.plannedEnd.getTime()) / (1000606024));
}
return 0;
}

// 是否关键路径
isCriticalPath(): boolean {
return this.dependencies.length === 0 || this.riskLevel === RiskLevel.CRITICAL;
}

// 更新进度
updateProgress(progress: number, operator: string): void {
this.progress = Math.min(100, Math.max(0, progress));
if (this.progress > 0 && this.status === MilestoneStatus.NOT_STARTED) {
this.status = MilestoneStatus.IN_PROGRESS;
this.actualStart = this.actualStart || new Date();
}
if (this.progress === 100) {
this.status = MilestoneStatus.COMPLETED;
this.actualEnd = new Date();
}
this.updatedAt = new Date();
this.dnaSignature = this.signData();
}

// 添加检查点
addCheckPoint(name: string, completed: boolean, operator: string): void {
this.checkPoints.push({
id:CP-${Date.now()},
name,
completed,
completedBy: completed ? operator : undefined,
completedAt: completed ? new Date() : undefined,
dnaSignature: this.signCheckPoint(name, operator)
});
}

private signCheckPoint(name: string, operator: string): string {
const payload =${this.id}-CP-${name}-${operator}-${Date.now()};
returnSM3-${payload.split('').reduce((a,b)=>a+b.charCodeAt(0),0).toString(16).substring(0,16)};
}
}

// === 依赖 ===
export interface Dependency {
id: string;
fromMilestoneId: string;
toMilestoneId: string;
type: DependencyType;
lagDays: number; // 延迟天数
dnaSignature: string;
}

// === 交付物 ===
export interface Deliverable {
id: string;
name: string;
description: string;
type: ‘document’ | ‘code’ | ‘design’ | ‘report’ | ‘other’;
status: ‘pending’ | ‘in_review’ | ‘approved’ | ‘rejected’;
filePath?: string;
reviewer?: string;
reviewedAt?: Date;
dnaSignature: string;
}

// === 检查点 ===
export interface CheckPoint {
id: string;
name: string;
completed: boolean;
completedBy?: string;
completedAt?: Date;
dnaSignature: string;
}

// === 基线 ===
export interface Baseline {
id: string;
name: string;
description: string;
createdAt: Date;
milestones: Milestone[];
budget: number;
plannedStart: Date;
plannedEnd: Date;
dnaSignature: string;
}

// === 风险 ===
export class Risk {
id: string;
name: string;
description: string;
level: RiskLevel;
probability: number; // 0-1
impact: number; // 0-1
mitigation: string; // 缓解措施
contingency: string; // 应急计划
owner: string; // 负责人
status: ‘open’ | ‘mitigated’ | ‘realized’ | ‘closed’;
createdAt: Date;
updatedAt: Date;
dnaSignature: string;

constructor(data: Partial) {
this.id = data.id ||RISK-${Date.now()}-${Math.random().toString(36).substr(2,6)};
this.name = data.name || ‘’;
this.description = data.description || ‘’;
this.level = data.level || RiskLevel.LOW;
this.probability = data.probability || 0.5;
this.impact = data.impact || 0.5;
this.mitigation = data.mitigation || ‘’;
this.contingency = data.contingency || ‘’;
this.owner = data.owner || ‘’;
this.status = data.status || ‘open’;
this.createdAt = data.createdAt || new Date();
this.updatedAt = data.updatedAt || new Date();
this.dnaSignature = this.signData();
}

private signData(): string {
const payload =${this.id}-${this.name}-${this.level}-${this.status};
returnSM3-${payload.split('').reduce((a,b)=>a+b.charCodeAt(0),0).toString(16).substring(0,16)};
}

// 计算风险值
getRiskScore(): number {
return this.probability * this.impact;
}
}

// === 团队成员 ===
export interface TeamMember {
id: string;
name: string;
role: string;
department: string;
avatar?: string;
capacity: number; // 工时容量/天
allocatedHours: number; // 已分配工时
skills: string[];
dnaSignature: string;
}

// === 项目全局状态 ===
@Observed
export class ProjectState {
projects: Project[] = [];
currentProjectId: string = ‘’;

// 过滤
filterStatus: ProjectStatus | ‘全部’ = ‘全部’;
filterPriority: Priority | ‘全部’ = ‘全部’;
filterManager: string = ‘全部’;
searchQuery: string = ‘’;

// 视图模式
viewMode: ‘timeline’ | ‘gantt’ | ‘list’ | ‘kanban’ = ‘timeline’;

// 时间范围
timeRange: ‘week’ | ‘month’ | ‘quarter’ | ‘year’ | ‘all’ = ‘quarter’;

// 派生：过滤后的项目
get filteredProjects(): Project[] {
let result = this.projects;

if (this.filterStatus !== '全部') { result = result.filter(p => p.status === this.filterStatus); } if (this.filterPriority !== '全部') { result = result.filter(p => { // 根据项目最高优先级里程碑判断 const priorities = p.milestones.map(m => m.priority); return priorities.includes(this.filterPriority as Priority); }); } if (this.filterManager !== '全部') { result = result.filter(p => p.projectManager === this.filterManager); } if (this.searchQuery) { const q = this.searchQuery.toLowerCase(); result = result.filter(p => p.name.toLowerCase().includes(q) || p.projectNo.toLowerCase().includes(q) || p.projectManager.toLowerCase().includes(q) || p.description.toLowerCase().includes(q) ); } return result.sort((a, b) => { // 活跃项目优先，然后按优先级，最后按截止日期 if (a.status === ProjectStatus.ACTIVE && b.status !== ProjectStatus.ACTIVE) return -1; if (a.status !== ProjectStatus.ACTIVE && b.status === ProjectStatus.ACTIVE) return 1; return a.plannedEnd.getTime() - b.plannedEnd.getTime(); });

}

// 当前项目
get currentProject(): Project | undefined {
return this.projects.find(p => p.id === this.currentProjectId);
}

// 统计
get statistics(): ProjectStats {
return {
totalProjects: this.projects.length,
activeProjects: this.projects.filter(p => p.status === ProjectStatus.ACTIVE).length,
completedProjects: this.projects.filter(p => p.status === ProjectStatus.COMPLETED).length,
delayedProjects: this.projects.filter(p => p.getDelayDays() > 0).length,
atRiskProjects: this.projects.filter(p => p.getCurrentRiskLevel() >= RiskLevel.HIGH).length,
totalBudget: this.projects.reduce((sum, p) => sum + p.budget, 0),
totalCost: this.projects.reduce((sum, p) => sum + p.costIncurred, 0),
avgProgress: this.projects.length > 0
? Math.round(this.projects.reduce((sum, p) => sum + p.getProgress(), 0) / this.projects.length)
: 0
};
}

// 预警列表
get alerts(): ProjectAlert[] {
const alerts: ProjectAlert[] = [];

this.projects.forEach(p => { // 延期预警 if (p.getDelayDays() > 0) { alerts.push({ type: 'delay', level: p.getDelayDays() > 7 ? 'critical' : 'warning', projectId: p.id, projectName: p.name, title: `${p.name} 已延期 ${p.getDelayDays()} 天`, message: `计划结束: ${p.plannedEnd.toLocaleDateString()}，当前进度: ${p.getProgress()}%`, timestamp: new Date() }); } // 风险预警 const riskLevel = p.getCurrentRiskLevel(); if (riskLevel >= RiskLevel.HIGH) { alerts.push({ type: 'risk', level: riskLevel === RiskLevel.CRITICAL ? 'critical' : 'warning', projectId: p.id, projectName: p.name, title: `${p.name} ${riskLevel === RiskLevel.CRITICAL ? '极高风险' : '高风险'}`, message: `SPI: ${p.getSPI().toFixed(2)}, CPI: ${p.getCPI().toFixed(2)}`, timestamp: new Date() }); } // 里程碑延期 p.milestones.forEach(m => { if (m.status === MilestoneStatus.DELAYED || m.getDelayDays() > 0) { alerts.push({ type: 'milestone_delay', level: m.priority === Priority.P0 ? 'critical' : 'warning', projectId: p.id, projectName: p.name, title: `${p.name} - ${m.name} 延期`, message: `延期 ${m.getDelayDays()} 天，优先级: ${m.priority}`, timestamp: new Date() }); } }); }); return alerts.sort((a, b) => { const levelOrder = { critical: 0, warning: 1, info: 2 }; return levelOrder[a.level] - levelOrder[b.level]; });

}

// 操作
addProject(project: Project): void {
this.projects.push(project);
this.persist();
}

removeProject(id: string): void {
const idx = this.projects.findIndex(p => p.id === id);
if (idx >= 0) {
this.projects.splice(idx, 1);
this.persist();
}
}

updateProject(id: string, data: Partial): void {
const idx = this.projects.findIndex(p => p.id === id);
if (idx >= 0) {
const old = this.projects[idx];
this.projects[idx] = new Project({ …old, …data, id: old.id });
this.persist();
}
}

// 添加里程碑
addMilestone(projectId: string, milestone: Milestone): void {
const project = this.projects.find(p => p.id === projectId);
if (project) {
project.milestones.push(milestone);
this.persist();
}
}

// 更新里程碑进度
updateMilestoneProgress(projectId: string, milestoneId: string, progress: number, operator: string): void {
const project = this.projects.find(p => p.id === projectId);
if (project) {
const milestone = project.milestones.find(m => m.id === milestoneId);
if (milestone) {
milestone.updateProgress(progress, operator);
this.persist();
}
}
}

// 创建基线
createBaseline(projectId: string, name: string, description: string): void {
const project = this.projects.find(p => p.id === projectId);
if (project) {
project.createBaseline(name, description);
this.persist();
}
}

// 回滚基线
rollbackBaseline(projectId: string, baselineId: string): boolean {
const project = this.projects.find(p => p.id === projectId);
if (project) {
return project.rollbackToBaseline(baselineId);
}
return false;
}

private persist(): void {
AppStorage.setOrCreate(‘project_projects’, JSON.stringify(this.projects));
AppStorage.setOrCreate(‘project_current_id’, this.currentProjectId);
}

load(): void {
const projects = AppStorage.get(‘project_projects’);
if (projects) {
try {
const parsed = JSON.parse(projects);
this.projects = parsed.map((p: any) => new Project§);
} catch (e) {
console.error(‘加载项目数据失败’, e);
}
}
this.currentProjectId = AppStorage.get(‘project_current_id’) || ‘’;
}
}

// === 统计 ===
export interface ProjectStats {
totalProjects: number;
activeProjects: number;
completedProjects: number;
delayedProjects: number;
atRiskProjects: number;
totalBudget: number;
totalCost: number;
avgProgress: number;
}

// === 预警项 ===
export interface ProjectAlert {
type: ‘delay’ | ‘risk’ | ‘milestone_delay’ | ‘budget_overrun’ | ‘resource_conflict’;
level: ‘critical’ | ‘warning’ | ‘info’;
projectId: string;
projectName: string;
title: string;
message: string;
timestamp: Date;
}

// 全局状态
export const projectState = new ProjectState();
AppStorage.setOrCreate(‘projectState’, projectState);
主页面实现

TypeScript

// entry/src/main/ets/pages/MilestoneTimelinePage.ets
// 龍魂 · 项目里程碑时间线主页面 · ArkTS

import { Project, ProjectStatus, Milestone, MilestoneStatus, Priority, RiskLevel, DependencyType, ProjectState, projectState, ProjectStats, ProjectAlert } from ‘…/models/MilestoneModel’;
import { ProjectDetailDialog } from ‘…/components/ProjectDetailDialog’;
import { MilestoneDialog } from ‘…/components/MilestoneDialog’;
import { GanttChartView } from ‘…/components/GanttChartView’;
import { TimelineView } from ‘…/components/TimelineView’;
import { KanbanView } from ‘…/components/KanbanView’;
import { RiskPanel } from ‘…/components/RiskPanel’;
import { BaselineDialog } from ‘…/components/BaselineDialog’;
import { ProjectDatabase } from ‘…/database/ProjectDatabase’;

@Entry
@Component
struct MilestoneTimelinePage {
@StorageLink(‘projectState’) projectState: ProjectState = projectState;
@State private selectedTab: number = 0;
@State private showProjectDialog: boolean = false;
@State private showMilestoneDialog: boolean = false;
@State private showBaselineDialog: boolean = false;
@State private editingProject: Project | null = null;
@State private editingMilestone: Milestone | null = null;
@State private showSearch: boolean = false;
@State private searchText: string = ‘’;
@State private showAlerts: boolean = false;
@State private viewMode: ‘timeline’ | ‘gantt’ | ‘list’ | ‘kanban’ = ‘timeline’;
@State private timeRange: ‘week’ | ‘month’ | ‘quarter’ | ‘year’ | ‘all’ = ‘quarter’;

aboutToAppear() {
this.projectState.load();
ProjectDatabase.init();
this.scheduleAlerts();
}

build() {
Column() {
// === 顶部标题栏 ===
this.HeaderBuilder()

// === 预警横幅 === if (this.projectState.alerts.length > 0 && !this.showAlerts) { this.AlertBannerBuilder() } // === 预警面板 === if (this.showAlerts) { RiskPanel({ alerts: this.projectState.alerts, onClose: () => { this.showAlerts = false; } }) } // === 统计卡片 === this.StatsBuilder() // === 视图控制栏 === this.ViewControlBuilder() // === 标签切换 === this.TabBuilder() // === 搜索栏 === if (this.showSearch) { this.SearchBuilder() } // === 内容区 === this.ContentBuilder() // === 底部操作栏 === this.FooterBuilder() } .width('100%') .height('100%') .backgroundColor('#0a0a0a')

}

// === 标题栏 ===
@Builder
HeaderBuilder() {
Row() {
Text(‘🐉’)
.fontSize(28)
.margin({ right: 8 })

Column() { Text('龍魂项目管理') .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor('#c41e3a') Text(`UID:${MASTER_UID} · ${this.projectState.projects.length}个项目`) .fontSize(12) .fontColor('#666') } .alignItems(HorizontalAlign.Start) Blank() // 预警按钮 Badge({ value: this.projectState.alerts.length.toString(), position: BadgePosition.RightTop, style: { badgeSize: 18, badgeColor: '#c41e3a' } }) { Button() { Text('🔔') .fontSize(20) } .type(ButtonType.Circle) .backgroundColor(this.projectState.alerts.length > 0 ? 'rgba(196,30,58,0.2)' : '#1a1a1a') .width(40) .height(40) .onClick(() => { this.showAlerts = !this.showAlerts; }) } // 视图切换 Button() { Text( this.viewMode === 'timeline' ? '📊' : this.viewMode === 'gantt' ? '📈' : this.viewMode === 'kanban' ? '📋' : '📄' ) .fontSize(20) } .type(ButtonType.Circle) .backgroundColor('#1a1a1a') .width(40) .height(40) .onClick(() => { this.toggleViewMode(); }) // 搜索按钮 Button() { Text(this.showSearch ? '✕' : '🔍') .fontSize(20) } .type(ButtonType.Circle) .backgroundColor('#1a1a1a') .width(40) .height(40) .onClick(() => { this.showSearch = !this.showSearch; if (!this.showSearch) { this.projectState.searchQuery = ''; } }) // 添加项目 Button() { Text('+') .fontSize(24) .fontColor('#fff') } .type(ButtonType.Circle) .backgroundColor('#c41e3a') .width(40) .height(40) .onClick(() => { this.editingProject = null; this.showProjectDialog = true; }) } .width('100%') .height(56) .padding({ left: 16, right: 16 }) .backgroundColor('#1a1a1a') .border({ width: { bottom: 1 }, color: '#333' })

}

// === 预警横幅 ===
@Builder
AlertBannerBuilder() {
Row() {
Text(‘⚠️’)
.fontSize(24)
.margin({ right: 8 })

Column() { Text(`${this.projectState.alerts.length} 条预警待处理`) .fontSize(14) .fontWeight(FontWeight.Bold) .fontColor('#ffcc00') Text(this.getAlertPreview()) .fontSize(12) .fontColor('#ffcc00') .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) Button('查看') .fontSize(12) .fontColor('#0a0a0a') .backgroundColor('#ffcc00') .borderRadius(12) .padding({ left: 12, right: 12 }) .onClick(() => { this.showAlerts = true; }) } .width('100%') .padding(12) .backgroundColor('rgba(255,204,0,0.1)') .border({ width: { bottom: 1 }, color: 'rgba(255,204,0,0.3)' })

}

// === 统计卡片 ===
@Builder
StatsBuilder() {
Row() {
this.StatCard(‘项目总数’, this.projectState.statistics.totalProjects.toString(), ‘#fff’)
this.StatCard(‘进行中’, this.projectState.statistics.activeProjects.toString(), ‘#00ff00’)
this.StatCard(‘已完成’, this.projectState.statistics.completedProjects.toString(), ‘#0066cc’)
this.StatCard(‘延期’, this.projectState.statistics.delayedProjects.toString(), ‘#ffcc00’)
this.StatCard(‘风险’, this.projectState.statistics.atRiskProjects
你和 Kimi 聊得太长啦，发起一个新会话试试吧。