HarmonyOS 6（API 23）实战：基于悬浮导航、沉浸光感与HMAF的“译界智脑“——PC端AI智能体沉浸式智能翻译与跨语言协作工作台

文章目录

• • 每日一句正能量
  • 前言
  • 一、前言：AI智能翻译3.0时代的智能体革命
  • 二、核心特性解析与技术选型
  • • 2.1 HMAF在智能翻译场景中的价值
    • 2.2 沉浸光感在智能翻译中的创新应用
    • 2.3 悬浮导航的翻译适配
  • 三、项目实战："译界智脑"架构设计
  • • 3.1 应用场景与功能规划
    • 3.2 技术架构图
  • 四、环境配置与模块依赖
  • • 4.1 模块依赖配置
    • 4.2 权限声明（module.json5）
  • 五、核心组件实战
  • • 5.1 窗口沉浸配置（EntryAbility.ets）
    • 5.2 翻译质量光效系统（TranslationQualityLightEffect.ets）
    • 5.3 HMAF四层智能体调度器（TranslateAgentScheduler.ets）
    • 5.4 悬浮翻译导航（TranslateFloatNavigation.ets）
    • 5.5 翻译编辑器（TranslateEditor.ets）
    • 5.6 浮动术语面板（TermPanel.ets）
    • 5.7 浮动对照窗口（CompareWindow.ets）
    • 5.8 多窗口光效同步管理器（WindowLightSync.ets）
    • 5.9 主页面集成（TranslateStudioPage.ets）
  • 六、关键技术总结
  • • 6.1 HMAF智能翻译智能体开发清单
    • 6.2 沉浸光感实现清单
    • 6.3 翻译质量阶段光效映射
    • 6.4 智能体状态徽章动画
    • 6.5 性能优化建议
  • 七、总结与展望

每日一句正能量

生命力不在于时刻紧绷，而在于张弛有度的自我调适。 真正的活力不是永远冲刺或高度自律，而是知道何时发力、何时放松。像呼吸一样，有收有放，才能持久。

前言

摘要：2026年，全球化协作进入"智能体实时翻译"时代。HarmonyOS 6（API 23）引入的鸿蒙智能体框架（HMAF）将AI能力下沉至系统层，配合悬浮导航与沉浸光感特性，为PC端智能翻译带来了"语义即光效、准确度即导航"的全新交互范式。本文将实战开发一款面向HarmonyOS PC的"译界智脑"应用，展示如何利用HMAF构建"语义理解-文化适配-实时翻译-质量评估"四层智能体协作架构，通过悬浮导航实现翻译状态实时追踪，基于沉浸光感打造"翻译质量即氛围"的沉浸体验，以及基于多窗口架构构建浮动术语面板、实时对照窗口和语境分析器的协作翻译体验。

一、前言：AI智能翻译3.0时代的智能体革命

2026年，中国跨境电商规模突破15万亿元，出海企业超过80万家，但传统翻译工具面临三大痛点：

HarmonyOS 6（API 23）的HMAF框架配合**悬浮导航（Float Navigation）与沉浸光感（Immersive Light Effects）**特性，为智能翻译带来了革命性解决方案：

• 智能体协同翻译：HMAF构建的"语义智能体"可深度理解源语言语境，自动识别专业领域和文化背景，响应延迟降至600ms
• 翻译质量光效感知：根据当前翻译准确度、术语一致性、文化适配度动态切换环境光色，让译者"看见"翻译质量
• 悬浮翻译导航：底部悬浮导航实时显示四大智能体运行状态与翻译进度徽章，译者无需切换页面即可掌握全局
• PC多窗口协作：主翻译编辑器 + 浮动术语面板窗口 + 浮动对照窗口 + 浮动语境分析器的四层架构，通过光效联动实现"一眼全局"

本文核心亮点：

• 四层智能体架构：语义智能体（深度理解）、文化智能体（文化适配）、翻译智能体（实时转换）、质检智能体（质量评估）协同工作
• 翻译质量光效：根据准确度（低准红→中准橙→高准绿→完美蓝）动态渲染全屏氛围光
• 术语一致性光效：基于术语库匹配度，触发不同光效反馈（缺失黄→部分橙→完整绿）
• 悬浮翻译导航：底部悬浮页签承载"翻译/术语/对照/质检"四大模块，实时显示智能体状态徽章与质量脉冲
• 多窗口光效同步：主窗口与三个浮动子窗口通过WindowLightSync实现跨窗口光效联动，焦点感知自动调节

二、核心特性解析与技术选型

2.1 HMAF在智能翻译场景中的价值

HMAF（Harmony Intelligent Agent Framework）提供四种编排模式，在智能翻译场景中各有妙用：

2.2 沉浸光感在智能翻译中的创新应用

传统翻译软件采用固定UI，译者难以感知翻译质量变化。HarmonyOS 6的沉浸光感特性带来三种创新：

翻译质量光效：根据翻译准确度动态调整背景光色与脉冲频率

• 低准确度期（<<60%）：炽烈红，警示闪烁（0.5秒/周期）
• 中准确度期（60-80%）：活力橙，提醒脉冲（1秒/周期）
• 高准确度期（80-95%）：薄荷绿，平稳律动（2秒/周期）
• 完美期（>95%）：深海蓝，宁静呼吸（4秒/周期）

术语一致性光效：基于术语库匹配度实时驱动光效

• 术语缺失：暖黄色光晕从底部升起，提示补充术语
• 术语部分匹配：橙色光晕从边缘收缩，建议核对
• 术语完整匹配：薄荷绿光晕全屏扩散，确认一致

文化适配光效：根据文化敏感度渲染光效主题

• 文化冲突风险：红色警示光配合闪烁效果
• 文化中性内容：保持当前主题色
• 文化融合亮点：金色粒子效果庆祝优秀适配

2.3 悬浮导航的翻译适配

传统翻译软件采用顶部固定工具栏，占用宝贵竖屏空间。HarmonyOS 6的悬浮导航特性带来：

• 底部悬浮页签：不遮挡翻译编辑器，支持透明度三档调节（55%/70%/85%）
• 智能体状态徽章：每个页签实时显示对应智能体运行状态（空闲/思考/执行/完成/异常）
• 质量实时徽章：导航栏中央显示当前准确度与术语匹配度，点击展开详细数据
• 快捷操作入口：长按导航栏唤起快捷菜单，一键切换翻译模式/紧急保存/智能体开关

三、项目实战："译界智脑"架构设计

3.1 应用场景与功能规划

面向HarmonyOS PC的智能翻译场景，核心功能包括：

3.2 技术架构图

┌─────────────────────────────────────────────────────────────┐
│ HarmonyOS 6 PC 主窗口 │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ 沉浸光感层 (AmbientLightLayer) │ │
│ │ 翻译质量光效 + 术语一致性光效 + 文化适配光效 │ │
│ └───────────────────────────────────────────────────────┘ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ 主翻译编辑器 (TextArea + RichText) │ │
│ │ 源文编辑 + 译文预览 + 差异高亮 │ │
│ └───────────────────────────────────────────────────────┘ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ 悬浮翻译导航 (FloatNavigation) │ │
│ │ 翻译/术语/对照/质检 页签 + 智能体状态徽章 + 质量徽章 │ │
│ └───────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
┌─────────────────────┼─────────────────────┐
▼ ▼ ▼
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
│ 浮动术语面板 │ │ 浮动对照窗口 │ │ 浮动语境分析器 │
│ (术语+匹配色) │ │ (差异+对比色) │ │ (语境+复杂度色)│
└───────────────┘ └───────────────┘ └───────────────┘
│
┌─────────────────────┼─────────────────────┐
▼ ▼ ▼
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
│ 语义智能体 │ │ 文化智能体 │ │ 翻译智能体 │
│ (深度语义理解) │ │ (文化适配转换) │ │ (实时语言转换) │
└───────────────┘ └───────────────┘ └───────────────┘
│
▼
┌───────────────┐
│ 质检智能体 │
│ (质量评估反馈) │
└───────────────┘

四、环境配置与模块依赖

4.1 模块依赖配置

在entry/oh-package.json5中添加以下依赖：

{
"dependencies": {
"@kit.ArkUI": "1.0.0",
"@kit.WindowManagerKit": "1.0.0",
"@kit.SensorServiceKit": "1.0.0",
"@kit.UIDesignKit": "1.0.0",
"@kit.AgentFrameworkKit": "1.0.0",
"@kit.IntentsKit": "1.0.0",
"@kit.NNKit": "1.0.0",
"@kit.MediaKit": "1.0.0",
"@kit.LanguageKit": "1.0.0"
}
}

4.2 权限声明（module.json5）

{
"module": {
"requestPermissions": [
{
"name": "ohos.permission.INTERNET",
"reason": "$string:internet_permission_reason"
},
{
"name": "ohos.permission.SYSTEM_FLOAT_WINDOW",
"reason": "$string:float_window_permission_reason"
},
{
"name": "ohos.permission.READ_USER_STORAGE",
"reason": "$string:storage_permission_reason"
},
{
"name": "ohos.permission.WRITE_USER_STORAGE",
"reason": "$string:storage_permission_reason"
}
]
}
}

五、核心组件实战

5.1 窗口沉浸配置（EntryAbility.ets）

// entry/src/main/ets/entryability/EntryAbility.ets
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.WindowManagerKit';

export default class EntryAbility extends UIAbility {
async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
const mainWindow = await windowStage.createSubWindow('translate_main');

// 启用全屏沉浸模式，隐藏系统标题栏
await mainWindow.setWindowLayoutFullScreen(true);

// 设置窗口背景为透明，允许沉浸光效层透传
await mainWindow.setWindowBackgroundColor('#00000000');

// 加载主页面
windowStage.loadContent('pages/TranslateStudioPage', (err) => {
if (err) {
console.error('Failed to load TranslateStudioPage:', err.message);
}
});

// 初始化窗口焦点监听，用于光效联动
mainWindow.on('windowFocusChange', (isFocused: boolean) => {
AppStorage.setOrCreate('window_focused', isFocused);
});
}

onWindowStageDestroy(): void {
// 清理翻译资源
}
}

5.2 翻译质量光效系统（TranslationQualityLightEffect.ets）

// entry/src/main/ets/components/TranslationQualityLightEffect.ets
import { HdsNavigation, SystemMaterialEffect } from '@kit.UIDesignKit';

// 翻译质量阶段枚举
export enum QualityPhase {
LOW = 'low', // 低准确度 <60%
MEDIUM = 'medium', // 中准确度 60-80%
HIGH = 'high', // 高准确度 80-95%
PERFECT = 'perfect' // 完美 >95%
}

// 术语匹配度枚举
export enum TermMatchLevel {
MISSING = 'missing', // 缺失
PARTIAL = 'partial', // 部分匹配
COMPLETE = 'complete' // 完整匹配
}

// 文化敏感度枚举
export enum CulturalSensitivity {
RISKY = 'risky', // 冲突风险
NEUTRAL = 'neutral', // 中性
EXCELLENT = 'excellent' // 优秀适配
}

// 智能体状态枚举
export enum AgentState {
IDLE = 'idle',
THINKING = 'thinking',
EXECUTING = 'executing',
COMPLETED = 'completed',
ERROR = 'error'
}

@Component
export struct TranslationQualityLightEffect {
@Prop accuracy: number = 0;
@Prop termMatchRate: number = 0;
@Prop culturalScore: number = 0;
@State lightIntensity: number = 0.6;
@State pulsePhase: number = 0;

// 质量阶段主题色映射
private qualityColors: Map<<QualityPhase, string> = new Map([
[QualityPhase.LOW, '#EF4444'], // 炽烈红
[QualityPhase.MEDIUM, '#F59E0B'], // 活力橙
[QualityPhase.HIGH, '#10B981'], // 薄荷绿
[QualityPhase.PERFECT, '#1E3A8A'] // 深海蓝
]);

// 术语匹配色映射
private termColors: Map<TermMatchLevel, string> = new Map([
[TermMatchLevel.MISSING, '#FCD34D'], // 暖黄色
[TermMatchLevel.PARTIAL, '#F97316'], // 橙色
[TermMatchLevel.COMPLETE, '#10B981'] // 薄荷绿
]);

// 文化敏感度色映射
private culturalColors: Map<CulturalSensitivity, string> = new Map([
[CulturalSensitivity.RISKY, '#EF4444'], // 红色
[CulturalSensitivity.NEUTRAL, '#6B7280'], // 灰色
[CulturalSensitivity.EXCELLENT, '#FCD34D'] // 金色
]);

// 脉冲周期映射（毫秒）
private pulseDurations: Map<<QualityPhase, number> = new Map([
[QualityPhase.LOW, 500],
[QualityPhase.MEDIUM, 1000],
[QualityPhase.HIGH, 2000],
[QualityPhase.PERFECT, 4000]
]);

private getCurrentQualityPhase(): QualityPhase {
if (this.accuracy < 60) return QualityPhase.LOW;
if (this.accuracy < 80) return QualityPhase.MEDIUM;
if (this.accuracy < 95) return QualityPhase.HIGH;
return QualityPhase.PERFECT;
}

private getCurrentTermLevel(): TermMatchLevel {
if (this.termMatchRate < 50) return TermMatchLevel.MISSING;
if (this.termMatchRate < 90) return TermMatchLevel.PARTIAL;
return TermMatchLevel.COMPLETE;
}

private getCurrentCulturalLevel(): CulturalSensitivity {
if (this.culturalScore < 60) return CulturalSensitivity.RISKY;
if (this.culturalScore < 80) return CulturalSensitivity.NEUTRAL;
return CulturalSensitivity.EXCELLENT;
}

private getThemeColor(): string {
// 质量优先，术语次之，文化最后
if (this.accuracy < 60) return this.qualityColors.get(QualityPhase.LOW) || '#EF4444';
if (this.termMatchRate < 50) return this.termColors.get(TermMatchLevel.MISSING) || '#FCD34D';
if (this.culturalScore < 60) return this.culturalColors.get(CulturalSensitivity.RISKY) || '#EF4444';
return this.qualityColors.get(this.getCurrentQualityPhase()) || '#1E3A8A';
}

private getPulseDuration(): number {
return this.pulseDurations.get(this.getCurrentQualityPhase()) || 2000;
}

// 准确度影响光效强度
private getIntensityByAccuracy(): number {
if (this.accuracy > 95) return 1.0;
if (this.accuracy > 80) return 0.8;
if (this.accuracy > 60) return 0.6;
return 0.3;
}

aboutToAppear(): void {
// 启动光效脉冲动画
this.startPulseAnimation();
}

private startPulseAnimation(): void {
setInterval(() => {
this.pulsePhase = this.pulsePhase === 0 ? 1 : 0;
}, this.getPulseDuration() / 2);
}

build() {
Stack() {
// 底层：翻译质量光效（大面积模糊光晕）
Column()
.width(800)
.height(800)
.backgroundColor(this.getThemeColor())
.blur(200)
.opacity(this.getIntensityByAccuracy() * 0.25)
.position({ x: '50%', y: '30%' })
.anchor('50%')
.scale({
x: this.pulsePhase === 0 ? 1.0 : 1.3,
y: this.pulsePhase === 0 ? 1.0 : 1.3
})
.animation({
duration: this.getPulseDuration(),
curve: Curve.EaseInOut,
iterations: –1,
playMode: PlayMode.Alternate
})

// 中层：术语一致性光效（底部渐变）
Column()
.width('100%')
.height(200)
.backgroundColor(this.termColors.get(this.getCurrentTermLevel()) || '#10B981')
.opacity(0.15)
.blur(80)
.position({ x: 0, y: '75%' })
.linearGradient({
direction: GradientDirection.Top,
colors: [
[this.termColors.get(this.getCurrentTermLevel()) || '#10B981', 0.0],
['transparent', 1.0]
]
})
.animation({
duration: 2000,
curve: Curve.EaseInOut
})

// 中层：文化适配光效（边缘警示）
if (this.culturalScore < 60) {
Column()
.width('100%')
.height('100%')
.backgroundColor('transparent')
.border({
width: 4,
color: this.culturalColors.get(CulturalSensitivity.RISKY) || '#EF4444'
})
.opacity(0.3)
.animation({
duration: 1000,
curve: Curve.EaseInOut,
iterations: –1,
playMode: PlayMode.Alternate
})
}

// 顶层：完美翻译粒子效果（仅在完美期显示）
if (this.getCurrentQualityPhase() === QualityPhase.PERFECT) {
this.buildPerfectParticles()
}
}
.width('100%')
.height('100%')
.backgroundColor('#050508')
}

@Builder
buildPerfectParticles(): void {
ForEach([0, 1, 2, 3, 4], (index: number) => {
Column()
.width(4)
.height(4)
.backgroundColor('#FCD34D')
.borderRadius(2)
.opacity(0.6)
.position({
x: `${20 + index * 15}%`,
y: `${30 + index * 10}%`
})
.animation({
duration: 1500 + index * 300,
curve: Curve.Linear,
iterations: –1,
playMode: PlayMode.Alternate
})
.translate({
y: this.pulsePhase === 0 ? –20 : –100
})
})
}
}

5.3 HMAF四层智能体调度器（TranslateAgentScheduler.ets）

// entry/src/main/ets/agents/TranslateAgentScheduler.ets
import { hmaf } from '@kit.AgentFrameworkKit';
import { intents } from '@kit.IntentsKit';

// 智能体类型枚举
export enum AgentType {
SEMANTIC = 'semantic', // 语义智能体
CULTURAL = 'cultural', // 文化智能体
TRANSLATOR = 'translator', // 翻译智能体
QA = 'qa' // 质检智能体
}

// 智能体人格色彩映射
export enum AgentPersonality {
SEMANTIC = '#8B5CF6', // 语义紫
CULTURAL = '#F59E0B', // 文化橙
TRANSLATOR = '#06B6D4', // 翻译青
QA = '#10B981' // 质检绿
}

export class TranslateAgentScheduler {
private static instance: TranslateAgentScheduler;
private hmafSession: hmaf.AgentSession | null = null;
private intentEngine: intents.IntentEngine | null = null;

// 智能体状态管理
private agentStates: Map<string, AgentState> = new Map([
['semantic-1', AgentState.IDLE],
['cultural-1', AgentState.IDLE],
['translator-1', AgentState.IDLE],
['qa-1', AgentState.IDLE]
]);

private constructor() {}

static getInstance(): TranslateAgentScheduler {
if (!TranslateAgentScheduler.instance) {
TranslateAgentScheduler.instance = new TranslateAgentScheduler();
}
return TranslateAgentScheduler.instance;
}

async initialize(): Promise<void> {
// 初始化HMAF多智能体会话
this.hmafSession = await hmaf.createAgentSession({
mode: hmaf.AgentMode.MULTI_AGENT,
enableDistributed: true,
maxConcurrentAgents: 4
});

// 初始化意图引擎
this.intentEngine = await intents.createIntentEngine({
supportedDomains: ['semantic_analysis', 'cultural_adaptation', 'translation', 'quality_assurance']
});

// 注册四大智能体
await this.registerAgents();

// 启动状态监听
this.startStateMonitoring();
}

private async registerAgents(): Promise<void> {
// 1. 语义智能体：深度语义理解与语境分析
await this.hmafSession?.registerAgent({
agentId: 'semantic-1',
agentType: AgentType.SEMANTIC,
capabilities: ['context_analysis', 'intent_recognition', 'entity_extraction', 'relationship_parsing', 'domain_identification'],
modelConfig: {
modelType: 'llm',
temperature: 0.3,
maxTokens: 1024
}
});

// 2. 文化智能体：文化适配与本地化
await this.hmafSession?.registerAgent({
agentId: 'cultural-1',
agentType: AgentType.CULTURAL,
capabilities: ['cultural_marking', 'idiom_adaptation', 'custom_recognition', 'sensitivity_detection', 'localization_suggestion'],
modelConfig: {
modelType: 'llm',
temperature: 0.5,
maxTokens: 512
}
});

// 3. 翻译智能体：实时语言转换
await this.hmafSession?.registerAgent({
agentId: 'translator-1',
agentType: AgentType.TRANSLATOR,
capabilities: ['neural_translation', 'term_consistency', 'style_preservation', 'format_maintenance', 'realtime_conversion'],
modelConfig: {
modelType: 'llm',
temperature: 0.4,
maxTokens: 2048
}
});

// 4. 质检智能体：质量评估与反馈
await this.hmafSession?.registerAgent({
agentId: 'qa-1',
agentType: AgentType.QA,
capabilities: ['accuracy_scoring', 'fluency_check', 'term_verification', 'cultural_review', 'consistency_audit'],
modelConfig: {
modelType: 'llm',
temperature: 0.2,
maxTokens: 512
}
});
}

// 语义分析
async analyzeSemantics(sourceText: string, sourceLang: string): Promise<{ entities: Entity[]; context: string; domain: string; intent: string }> {
this.updateAgentState('semantic-1', AgentState.THINKING);

const result = await this.hmafSession?.sendTask({
targetAgent: 'semantic-1',
taskType: 'analyze_semantics',
payload: {
text: sourceText,
language: sourceLang,
extractEntities: true,
identifyDomain: true,
recognizeIntent: true
}
});

this.updateAgentState('semantic-1', AgentState.COMPLETED);

return {
entities: result?.entities || [],
context: result?.context || '',
domain: result?.domain || 'general',
intent: result?.intent || ''
};
}

// 文化适配分析
async analyzeCulture(sourceText: string, targetLang: string, sourceCulture: string): Promise<{ markings: CulturalMarking[]; suggestions: CulturalSuggestion[]; riskLevel: string }> {
this.updateAgentState('cultural-1', AgentState.THINKING);

const result = await this.hmafSession?.sendTask({
targetAgent: 'cultural-1',
taskType: 'analyze_culture',
payload: {
text: sourceText,
targetLanguage: targetLang,
sourceCulture: sourceCulture,
detectIdioms: true,
checkSensitivity: true,
suggestAdaptations: true
}
});

this.updateAgentState('cultural-1', AgentState.COMPLETED);

return {
markings: result?.markings || [],
suggestions: result?.suggestions || [],
riskLevel: result?.riskLevel || 'low'
};
}

// 执行翻译
async translate(sourceText: string, sourceLang: string, targetLang: string, domain: string): Promise<{ translation: string; confidence: number; alternatives: string[]; termMappings: TermMapping[] }> {
this.updateAgentState('translator-1', AgentState.EXECUTING);

const result = await this.hmafSession?.sendTask({
targetAgent: 'translator-1',
taskType: 'translate',
payload: {
text: sourceText,
sourceLanguage: sourceLang,
targetLanguage: targetLang,
domain: domain,
preserveFormat: true,
includeAlternatives: true,
enforceTerminology: true
}
});

this.updateAgentState('translator-1', AgentState.COMPLETED);

return {
translation: result?.translation || '',
confidence: result?.confidence || 0,
alternatives: result?.alternatives || [],
termMappings: result?.termMappings || []
};
}

// 质量评估
async evaluateQuality(sourceText: string, translation: string, sourceLang: string, targetLang: string): Promise<{ accuracy: number; fluency: number; cultural: number; terminology: number; overall: number; issues: QualityIssue[] }> {
this.updateAgentState('qa-1', AgentState.EXECUTING);

const result = await this.hmafSession?.sendTask({
targetAgent: 'qa-1',
taskType: 'evaluate_quality',
payload: {
sourceText: sourceText,
translation: translation,
sourceLanguage: sourceLang,
targetLanguage: targetLang,
checkAccuracy: true,
checkFluency: true,
checkCultural: true,
checkTerminology: true
}
});

this.updateAgentState('qa-1', AgentState.COMPLETED);

return {
accuracy: result?.accuracy || 0,
fluency: result?.fluency || 0,
cultural: result?.cultural || 0,
terminology: result?.terminology || 0,
overall: result?.overall || 0,
issues: result?.issues || []
};
}

private updateAgentState(agentId: string, state: AgentState): void {
this.agentStates.set(agentId, state);
AppStorage.setOrCreate('agent_state_update', { agentId, state });
}

getAgentState(agentId: string): AgentState {
return this.agentStates.get(agentId) || AgentState.IDLE;
}

private startStateMonitoring(): void {
// 监听智能体状态变化，同步到UI
this.hmafSession?.on('agentStateChange', (event: { agentId: string; state: string }) => {
this.updateAgentState(event.agentId, event.state as AgentState);
});
}
}

// 实体
export interface Entity {
text: string;
type: string;
start: number;
end: number;
}

// 文化标记
export interface CulturalMarking {
text: string;
type: 'idiom' | 'custom' | 'sensitive' | 'reference';
explanation: string;
position: number;
}

// 文化建议
export interface CulturalSuggestion {
original: string;
suggestion: string;
reason: string;
confidence: number;
}

// 术语映射
export interface TermMapping {
source: string;
target: string;
domain: string;
confidence: number;
}

// 质量问题
export interface QualityIssue {
type: 'accuracy' | 'fluency' | 'cultural' | 'terminology';
severity: 'low' | 'medium' | 'high';
description: string;
position: number;
suggestion: string;
}

5.4 悬浮翻译导航（TranslateFloatNavigation.ets）

// entry/src/main/ets/components/TranslateFloatNavigation.ets
import { window } from '@kit.ArkUI';
import { AgentState, AgentType, AgentPersonality } from '../agents/TranslateAgentScheduler';
import { QualityPhase } from './TranslationQualityLightEffect';

interface NavItem {
id: string;
icon: Resource;
label: string;
page: string;
agentType?: AgentType;
}

@Component
export struct TranslateFloatNavigation {
@State currentIndex: number = 0;
@State navTransparency: number = 0.70;
@State isExpanded: boolean = false;
@State bottomAvoidHeight: number = 0;
@State accuracy: number = 0;
@State termMatchRate: number = 0;
@State currentPhase: QualityPhase = QualityPhase.LOW;
@State agentStates: Map<string, AgentState> = new Map([
['semantic-1', AgentState.IDLE],
['cultural-1', AgentState.IDLE],
['translator-1', AgentState.IDLE],
['qa-1', AgentState.IDLE]
]);

private navItems: NavItem[] = [
{ id: 'translate', icon: $r('app.media.ic_translate'), label: '翻译', page: 'TranslatePage' },
{ id: 'term', icon: $r('app.media.ic_book'), label: '术语', page: 'TermPage', agentType: AgentType.TRANSLATOR },
{ id: 'compare', icon: $r('app.media.ic_split'), label: '对照', page: 'ComparePage', agentType: AgentType.QA },
{ id: 'context', icon: $r('app.media.ic_brain'), label: '语境', page: 'ContextPage', agentType: AgentType.SEMANTIC },
{ id: 'settings', icon: $r('app.media.ic_settings'), label: '设置', page: 'SettingsPage' }
];

aboutToAppear(): void {
this.getBottomAvoidArea();

// 监听智能体状态更新
AppStorage.watch('agent_state_update', (update: { agentId: string; state: string }) => {
this.agentStates.set(update.agentId, update.state as AgentState);
});

// 监听质量指标
AppStorage.watch('quality_metrics', (metrics: { accuracy: number; termMatchRate: number }) => {
this.accuracy = metrics.accuracy;
this.termMatchRate = metrics.termMatchRate;
this.updateQualityPhase();
});
}

private updateQualityPhase(): void {
if (this.accuracy < 60) this.currentPhase = QualityPhase.LOW;
else if (this.accuracy < 80) this.currentPhase = QualityPhase.MEDIUM;
else if (this.accuracy < 95) this.currentPhase = QualityPhase.HIGH;
else this.currentPhase = QualityPhase.PERFECT;
}

private async getBottomAvoidArea(): Promise<void> {
try {
const mainWindow = await window.getLastWindow();
const avoidArea = mainWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
this.bottomAvoidHeight = avoidArea.bottomRect.height;
} catch (error) {
console.error('Failed to get avoid area:', error);
}
}

private getAgentStateForNavItem(item: NavItem): AgentState {
if (!item.agentType) return AgentState.IDLE;

const agentIdMap: Record<string, string> = {
[AgentType.SEMANTIC]: 'semantic-1',
[AgentType.CULTURAL]: 'cultural-1',
[AgentType.TRANSLATOR]: 'translator-1',
[AgentType.QA]: 'qa-1'
};

return this.agentStates.get(agentIdMap[item.agentType]) || AgentState.IDLE;
}

private getPhaseColor(): string {
const colors: Record<<QualityPhase, string> = {
[QualityPhase.LOW]: '#EF4444',
[QualityPhase.MEDIUM]: '#F59E0B',
[QualityPhase.HIGH]: '#10B981',
[QualityPhase.PERFECT]: '#1E3A8A'
};
return colors[this.currentPhase];
}

private getStateBadgeColor(state: AgentState): string {
const colors: Record<<AgentState, string> = {
[AgentState.IDLE]: '#888888',
[AgentState.THINKING]: '#8B5CF6',
[AgentState.EXECUTING]: '#F97316',
[AgentState.COMPLETED]: '#10B981',
[AgentState.ERROR]: '#EF4444'
};
return colors[state] || '#888888';
}

private getStateBadgeAnimation(state: AgentState): object {
switch (state) {
case AgentState.THINKING:
return {
duration: 1500,
curve: Curve.EaseInOut,
iterations: –1,
playMode: PlayMode.Alternate
};
case AgentState.EXECUTING:
return {
duration: 800,
curve: Curve.Linear,
iterations: –1
};
case AgentState.ERROR:
return {
duration: 400,
curve: Curve.EaseInOut,
iterations: –1,
playMode: PlayMode.Alternate
};
default:
return { duration: 0 };
}
}

build() {
Stack({ alignContent: Alignment.Bottom }) {
Column() {
this.contentBuilder()
}
.padding({ bottom: this.bottomAvoidHeight + 90 })

// 悬浮导航容器
Column() {
Stack() {
// 玻璃拟态背景层
Column()
.width('100%')
.height('100%')
.backgroundBlurStyle(BlurStyle.REGULAR)
.opacity(this.navTransparency)
.backdropFilter($r('sys.blur.20'))

// 渐变叠加层
Column()
.width('100%')
.height('100%')
.linearGradient({
direction: GradientDirection.Top,
colors: [
['rgba(255,255,255,0.15)', 0.0],
['rgba(255,255,255,0.05)', 1.0]
]
})
}
.width('100%')
.height('100%')
.borderRadius(28)
.shadow({
radius: 24,
color: 'rgba(0,0,0,0.25)',
offsetX: 0,
offsetY: –6
})

Column() {
// 质量信息栏（展开时显示）
if (this.isExpanded) {
Row() {
Column() {
Text(`${this.accuracy.toFixed(1)}%`)
.fontSize(13)
.fontColor('#FFFFFF')
.fontWeight(FontWeight.Bold)

Text('准确度')
.fontSize(10)
.fontColor('rgba(255,255,255,0.6)')
}
.layoutWeight(1)

Column() {
Text(`${this.termMatchRate.toFixed(1)}%`)
.fontSize(13)
.fontColor(this.getTermColor())
.fontWeight(FontWeight.Bold)

Text('术语匹配')
.fontSize(10)
.fontColor('rgba(255,255,255,0.6)')
}
.layoutWeight(1)

Column() {
Text(this.getPhaseLabel())
.fontSize(13)
.fontColor(this.getPhaseColor())
.fontWeight(FontWeight.Bold)

Text('质量等级')
.fontSize(10)
.fontColor('rgba(255,255,255,0.6)')
}
.layoutWeight(1)
}
.width('100%')
.height(50)
.padding({ left: 16, right: 16 })
.backgroundColor('rgba(0,0,0,0.2)')
.borderRadius({ topLeft: 28, topRight: 28 })
}

// 导航页签
Row() {
ForEach(this.navItems, (item: NavItem, index: number) => {
Column() {
Stack() {
Image(item.icon)
.width(26)
.height(26)
.fillColor(this.currentIndex === index ? this.getPhaseColor() : '#AAAAAA')

// 智能体状态徽章
if (item.agentType && this.getAgentStateForNavItem(item) !== AgentState.IDLE) {
Column()
.width(10)
.height(10)
.backgroundColor(this.getStateBadgeColor(this.getAgentStateForNavItem(item)))
.borderRadius(5)
.position({ x: 20, y: –4 })
.shadow({
radius: 8,
color: this.getStateBadgeColor(this.getAgentStateForNavItem(item)),
offsetX: 0,
offsetY: 0
})
.animation(this.getStateBadgeAnimation(this.getAgentStateForNavItem(item)))
}
}
.width(44)
.height(44)

Text(item.label)
.fontSize(11)
.fontColor(this.currentIndex === index ? this.getPhaseColor() : '#BBBBBB')
.margin({ top: 4 })
}
.layoutWeight(1)
.onClick(() => {
this.currentIndex = index;
this.triggerHapticFeedback();
AppStorage.setOrCreate('nav_page_change', item.page);
})
})
}
.width('100%')
.height(this.isExpanded ? 70 : 80)
.padding({ left: 16, right: 16 })
.justifyContent(FlexAlign.SpaceAround)

// 透明度调节（展开时显示）
if (this.isExpanded) {
Row() {
Text('透明度')
.fontSize(12)
.fontColor('rgba(255,255,255,0.7)')
.margin({ right: 8 })

Slider({
value: this.navTransparency * 100,
min: 55,
max: 85,
step: 15,
style: SliderStyle.InSet
})
.width(120)
.onChange((value: number) => {
this.navTransparency = value / 100;
})

Text(`${Math.round(this.navTransparency * 100)}%`)
.fontSize(12)
.fontColor('rgba(255,255,255,0.7)')
.margin({ left: 8 })
}
.width('100%')
.height(40)
.justifyContent(FlexAlign.Center)
}
}
.width('100%')
.height('100%')
}
.width('92%')
.height(this.isExpanded ? 160 : 80)
.margin({ bottom: this.bottomAvoidHeight + 12, left: '4%', right: '4%' })
.animation({
duration: 350,
curve: Curve.Spring,
iterations: 1
})
.gesture(
LongPressGesture({ duration: 600 })
.onAction(() => {
this.isExpanded = !this.isExpanded;
})
)
}
.width('100%')
.height('100%')
}

private getPhaseLabel(): string {
const labels: Record<<QualityPhase, string> = {
[QualityPhase.LOW]: '需改进',
[QualityPhase.MEDIUM]: '一般',
[QualityPhase.HIGH]: '良好',
[QualityPhase.PERFECT]: '完美'
};
return labels[this.currentPhase];
}

private getTermColor(): string {
if (this.termMatchRate >= 90) return '#10B981';
if (this.termMatchRate >= 50) return '#F59E0B';
return '#EF4444';
}

@BuilderParam contentBuilder: () => void = this.defaultContentBuilder;

@Builder
defaultContentBuilder(): void {
Column() {
Text('翻译编辑区域')
.fontSize(16)
.fontColor('#999999')
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}

private triggerHapticFeedback(): void {
try {
import('@kit.SensorServiceKit').then(sensor => {
sensor.vibrator.startVibration({
type: 'time',
duration: 40
}, { id: 0 });
});
} catch (error) {
console.error('Haptic feedback failed:', error);
}
}
}

5.5 翻译编辑器（TranslateEditor.ets）

// entry/src/main/ets/components/TranslateEditor.ets
import { TranslateAgentScheduler, Entity, CulturalMarking, TermMapping, QualityIssue } from '../agents/TranslateAgentScheduler';

@Component
export struct TranslateEditor {
@State sourceText: string = '';
@State targetText: string = '';
@State sourceLang: string = 'zh';
@State targetLang: string = 'en';
@State isTranslating: boolean = false;
@State entities: Entity[] = [];
@State culturalMarkings: CulturalMarking[] = [];
@State termMappings: TermMapping[] = [];
@State qualityIssues: QualityIssue[] = [];
private scheduler: TranslateAgentScheduler = TranslateAgentScheduler.getInstance();
private typingTimer: number = 0;

aboutToAppear(): void {
// 监听源文本变化
AppStorage.watch('source_text_update', (text: string) => {
this.sourceText = text;
this.handleSourceChange();
});
}

private handleSourceChange(): void {
clearTimeout(this.typingTimer);

// 2秒无输入后触发智能体分析
this.typingTimer = setTimeout(() => {
this.runTranslationPipeline();
}, 2000);
}

private async runTranslationPipeline(): Promise<void> {
if (this.sourceText.length < 10) return;

this.isTranslating = true;

try {
// 1. 语义分析
const semanticResult = await this.scheduler.analyzeSemantics(this.sourceText, this.sourceLang);
this.entities = semanticResult.entities;

// 2. 文化分析
const culturalResult = await this.scheduler.analyzeCulture(this.sourceText, this.targetLang, 'zh-CN');
this.culturalMarkings = culturalResult.markings;

// 3. 执行翻译
const translateResult = await this.scheduler.translate(
this.sourceText,
this.sourceLang,
this.targetLang,
semanticResult.domain
);
this.targetText = translateResult.translation;
this.termMappings = translateResult.termMappings;

// 4. 质量评估
const qualityResult = await this.scheduler.evaluateQuality(
this.sourceText,
this.targetText,
this.sourceLang,
this.targetLang
);
this.qualityIssues = qualityResult.issues;

// 同步质量指标
AppStorage.setOrCreate('quality_metrics', {
accuracy: qualityResult.overall,
termMatchRate: this.calculateTermMatchRate()
});

} catch (error) {
console.error('Translation pipeline error:', error);
} finally {
this.isTranslating = false;
}
}

private calculateTermMatchRate(): number {
if (this.termMappings.length === 0) return 0;
const matched = this.termMappings.filter(t => t.confidence > 0.8).length;
return (matched / this.termMappings.length) * 100;
}

private getIssueColor(severity: string): string {
const colors: Record<string, string> = {
'low': '#FCD34D',
'medium': '#F97316',
'high': '#EF4444'
};
return colors[severity] || '#888888';
}

private getEntityColor(type: string): string {
const colors: Record<string, string> = {
'person': '#8B5CF6',
'organization': '#06B6D4',
'location': '#10B981',
'product': '#F59E0B',
'technology': '#EF4444'
};
return colors[type] || '#888888';
}

build() {
Column() {
// 语言选择栏
Row({ space: 12 }) {
Select([
{ value: '中文', icon: $r('app.media.ic_zh') },
{ value: 'English', icon: $r('app.media.ic_en') },
{ value: '日本語', icon: $r('app.media.ic_jp') },
{ value: 'Deutsch', icon: $r('app.media.ic_de') }
])
.selected(this.getLangIndex(this.sourceLang))
.fontColor('#FFFFFF')
.backgroundColor('rgba(255,255,255,0.1)')
.borderRadius(12)
.onSelect((index: number) => {
const langs = ['zh', 'en', 'ja', 'de'];
this.sourceLang = langs[index];
})

Text('→')
.fontSize(20)
.fontColor('rgba(255,255,255,0.5)')

Select([
{ value: 'English', icon: $r('app.media.ic_en') },
{ value: '中文', icon: $r('app.media.ic_zh') },
{ value: '日本語', icon: $r('app.media.ic_jp') },
{ value: 'Deutsch', icon: $r('app.media.ic_de') }
])
.selected(this.getLangIndex(this.targetLang))
.fontColor('#FFFFFF')
.backgroundColor('rgba(255,255,255,0.1)')
.borderRadius(12)
.onSelect((index: number) => {
const langs = ['en', 'zh', 'ja', 'de'];
this.targetLang = langs[index];
})

if (this.isTranslating) {
LoadingProgress()
.width(20)
.height(20)
.color('#F59E0B')
}
}
.width('100%')
.height(50)
.padding({ left: 16, right: 16 })
.justifyContent(FlexAlign.Center)

// 双栏编辑器
Row({ space: 8 }) {
// 源文编辑区
Column() {
Text('源文')
.fontSize(12)
.fontColor('rgba(255,255,255,0.6)')
.margin({ bottom: 8 })
.alignSelf(ItemAlign.Start)

TextArea({ text: $$this.sourceText })
.width('100%')
.layoutWeight(1)
.backgroundColor('rgba(255,255,255,0.03)')
.fontColor('#FFFFFF')
.fontSize(14)
.placeholder('输入源文…')
.placeholderColor('rgba(255,255,255,0.3)')
.onChange((value: string) => {
this.sourceText = value;
AppStorage.setOrCreate('source_text_update', value);
this.handleSourceChange();
})

// 实体标注
if (this.entities.length > 0) {
Row({ space: 6 }) {
ForEach(this.entities.slice(0, 3), (entity: Entity) => {
Text(entity.text)
.fontSize(10)
.fontColor('#FFFFFF')
.backgroundColor(`${this.getEntityColor(entity.type)}30`)
.padding({ left: 6, right: 6, top: 2, bottom: 2 })
.borderRadius(6)
})
}
.width('100%')
.height(30)
.margin({ top: 8 })
}
}
.width('50%')
.height('100%')
.padding(12)

// 译文显示区
Column() {
Text('译文')
.fontSize(12)
.fontColor('rgba(255,255,255,0.6)')
.margin({ bottom: 8 })
.alignSelf(ItemAlign.Start)

TextArea({ text: $$this.targetText })
.width('100%')
.layoutWeight(1)
.backgroundColor('rgba(255,255,255,0.03)')
.fontColor('#FFFFFF')
.fontSize(14)
.placeholder('译文将在此处显示…')
.placeholderColor('rgba(255,255,255,0.3)')
.editable(false)

// 术语映射
if (this.termMappings.length > 0) {
Row({ space: 6 }) {
ForEach(this.termMappings.slice(0, 3), (term: TermMapping) => {
Text(`${term.source}→${term.target}`)
.fontSize(10)
.fontColor('#10B981')
.backgroundColor('rgba(16, 185, 129, 0.2)')
.padding({ left: 6, right: 6, top: 2, bottom: 2 })
.borderRadius(6)
})
}
.width('100%')
.height(30)
.margin({ top: 8 })
}
}
.width('50%')
.height('100%')
.padding(12)
}
.width('100%')
.layoutWeight(1)

// 质量问题提示
if (this.qualityIssues.length > 0) {
Row({ space: 8 }) {
Text('⚠️ 质量问题:')
.fontSize(11)
.fontColor('#EF4444')

ForEach(this.qualityIssues.slice(0, 2), (issue: QualityIssue) => {
Text(issue.description)
.fontSize(11)
.fontColor(this.getIssueColor(issue.severity))
.backgroundColor(`${this.getIssueColor(issue.severity)}20`)
.padding({ left: 8, right: 8, top: 4, bottom: 4 })
.borderRadius(8)
.onClick(() => {
// 定位到问题位置
})
})
}
.width('100%')
.height(40)
.padding({ left: 16, right: 16 })
.backgroundColor('rgba(239, 68, 68, 0.05)')
}
}
.width('100%')
.height('100%')
.backgroundColor('rgba(10, 10, 15, 0.95)')
.borderRadius(16)
}

private getLangIndex(lang: string): number {
const langs = ['zh', 'en', 'ja', 'de'];
return langs.indexOf(lang);
}
}

5.6 浮动术语面板（TermPanel.ets）

// entry/src/main/ets/components/TermPanel.ets
import { TranslateAgentScheduler, TermMapping } from '../agents/TranslateAgentScheduler';

@Component
export struct TermPanel {
@State termMappings: TermMapping[] = [];
@State searchQuery: string = '';
@State selectedDomain: string = 'all';
private scheduler: TranslateAgentScheduler = TranslateAgentScheduler.getInstance();

aboutToAppear(): void {
// 监听术语更新
AppStorage.watch('term_mappings', (mappings: TermMapping[]) => {
this.termMappings = mappings;
});
}

private getConfidenceColor(confidence: number): string {
if (confidence > 0.9) return '#10B981';
if (confidence > 0.7) return '#F59E0B';
return '#EF4444';
}

private getFilteredTerms(): TermMapping[] {
let terms = this.termMappings;

if (this.searchQuery) {
terms = terms.filter(t =>
t.source.includes(this.searchQuery) ||
t.target.includes(this.searchQuery)
);
}

if (this.selectedDomain !== 'all') {
terms = terms.filter(t => t.domain === this.selectedDomain);
}

return terms;
}

build() {
Column() {
// 标题栏
Row() {
Text('📚 术语库')
.fontSize(16)
.fontColor('#FFFFFF')
.fontWeight(FontWeight.Bold)

Text(`${this.termMappings.length} 条`)
.fontSize(12)
.fontColor('#10B981')
.backgroundColor('rgba(16, 185, 129, 0.2)')
.padding({ left: 10, right: 10, top: 4, bottom: 4 })
.borderRadius(12)
}
.width('100%')
.height(50)
.padding({ left: 16, right: 16 })
.justifyContent(FlexAlign.SpaceBetween)

// 搜索栏
TextInput({ placeholder: '搜索术语…' })
.width('90%')
.height(40)
.backgroundColor('rgba(255,255,255,0.05)')
.fontColor('#FFFFFF')
.placeholderColor('rgba(255,255,255,0.3)')
.borderRadius(12)
.padding({ left: 12, right: 12 })
.margin({ bottom: 12 })
.onChange((value: string) => {
this.searchQuery = value;
})

// 领域筛选
Row({ space: 8 }) {
this.buildDomainChip('全部', 'all');
this.buildDomainChip('技术', 'tech');
this.buildDomainChip('商务', 'business');
this.buildDomainChip('法律', 'legal');
}
.width('100%')
.height(40)
.padding({ left: 16, right: 16 })
.margin({ bottom: 12 })

// 术语列表
List() {
ForEach(this.getFilteredTerms(), (term: TermMapping) => {
ListItem() {
Row() {
Column() {
Text(term.source)
.fontSize(13)
.fontColor('#FFFFFF')
.fontWeight(FontWeight.Medium)

Text(term.target)
.fontSize(12)
.fontColor('rgba(255,255,255,0.7)')
.margin({ top: 4 })
}
.layoutWeight(1)

Column() {
Text(`${(term.confidence * 100).toFixed(0)}%`)
.fontSize(11)
.fontColor(this.getConfidenceColor(term.confidence))

Text(term.domain)
.fontSize(10)
.fontColor('rgba(255,255,255,0.5)')
.margin({ top: 4 })
.backgroundColor('rgba(255,255,255,0.1)')
.padding({ left: 6, right: 6, top: 2, bottom: 2 })
.borderRadius(6)
}
}
.width('100%')
.padding(12)
.backgroundColor('rgba(255,255,255,0.05)')
.borderRadius(12)
}
.margin({ bottom: 8 })
})
}
.width('100%')
.layoutWeight(1)
.padding({ left: 12, right: 12 })
}
.width('100%')
.height('100%')
.backgroundColor('rgba(10, 10, 15, 0.95)')
.borderRadius(16)
}

@Builder
buildDomainChip(label: string, value: string): void {
const isSelected = this.selectedDomain === value;

Text(label)
.fontSize(11)
.fontColor(isSelected ? '#FFFFFF' : 'rgba(255,255,255,0.6)')
.backgroundColor(isSelected ? 'rgba(139, 92, 246, 0.3)' : 'transparent')
.padding({ left: 12, right: 12, top: 6, bottom: 6 })
.borderRadius(16)
.border({ width: 1, color: isSelected ? '#8B5CF6' : 'rgba(255,255,255,0.2)' })
.onClick(() => {
this.selectedDomain = value;
})
}
}

5.7 浮动对照窗口（CompareWindow.ets）

// entry/src/main/ets/windows/CompareWindow.ets
import { TranslateAgentScheduler, QualityIssue } from '../agents/TranslateAgentScheduler';

@Component
export struct CompareWindow {
@State sourceText: string = '';
@State targetText: string = '';
@State issues: QualityIssue[] = [];
@State showDiff: boolean = true;

aboutToAppear(): void {
AppStorage.watch('compare_data', (data: { source: string; target: string; issues: QualityIssue[] }) => {
if (data) {
this.sourceText = data.source;
this.targetText = data.target;
this.issues = data.issues;
}
});
}

private getIssueAtPosition(position: number): QualityIssue | undefined {
return this.issues.find(i => i.position === position);
}

private renderDiffText(): void {
// 简化的差异渲染，实际应使用diff算法
const sourceLines = this.sourceText.split('\\n');
const targetLines = this.targetText.split('\\n');

// 这里简化处理，实际应实现完整的diff逻辑
}

build() {
Column() {
// 标题栏
Row() {
Text('🔍 对照检查')
.fontSize(16)
.fontColor('#FFFFFF')
.fontWeight(FontWeight.Bold)

Toggle({ type: ToggleType.Switch, isOn: this.showDiff })
.selectedColor('#8B5CF6')
.onChange((isOn: boolean) => {
this.showDiff = isOn;
})
}
.width('100%')
.height(50)
.padding({ left: 16, right: 16 })
.justifyContent(FlexAlign.SpaceBetween)

// 差异统计
Row({ space: 16 }) {
this.buildDiffStat('新增', '12', '#10B981')
this.buildDiffStat('删除', '5', '#EF4444')
this.buildDiffStat('修改', '8', '#F59E0B')
}
.width('100%')
.height(50)
.padding({ left: 16, right: 16 })
.justifyContent(FlexAlign.Center)