HarmonyOS NEXT Development Case: Simplified-Traditional Converter

// Import conversion library for Simplified-Traditional Chinese conversion

import { transverter, TransverterType, TransverterLanguage } from "@nutpi/chinese_transverter";

// Import clipboard service for system clipboard operations

import { pasteboard } from '@kit.BasicServicesKit';

// Import prompt service for user notifications

import { promptAction } from '@kit.ArkUI';



// Mark component as application entry point

@Entry

// Define SimplifiedTraditionalConverter component

@Component

struct SimplifiedTraditionalConverter {

  // State variable for user input with watcher

  @State @Watch('onInputTextChanged') inputText: string = '';

  @State simplifiedResult: string = ''; // Simplified conversion result

  @State traditionalResult: string = ''; // Traditional conversion result

  @State isInputFocused: boolean = false; // Input field focus state

  @State private themeColor: string = '#439fff'; // Primary theme color

  @State private textColor: string = "#2e2e2e"; // Main text color

  @State private basePadding: number = 30; // Base padding value

  @State private minTextAreaHeight: number = 50; // Minimum text area height

  @State private maxTextAreaHeight: number = 300; // Maximum text area height



  // Handle input text changes

  onInputTextChanged() {

    this.simplifiedResult = transverter({

      type: TransverterType.SIMPLIFIED,

      str: this.inputText,

      language: TransverterLanguage.ZH_CN

    });



    this.traditionalResult = transverter({

      type: TransverterType.TRADITIONAL,

      str: this.inputText,

      language: TransverterLanguage.ZH_CN

    });

  }



  // Copy text to system clipboard

  private copyToClipboard(text: string): void {

    const clipboardData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text);

    const systemClipboard = pasteboard.getSystemPasteboard();

    systemClipboard.setData(clipboardData);

    promptAction.showToast({ message: 'Copied to clipboard' });

  }



  // Build UI components

  build() {

    Scroll() {

      Column() {

        // Application title

        Text("Simplified-Traditional Converter")

          .width('100%')

          .height(54)

          .fontSize(18)

          .fontWeight(600)

          .backgroundColor(Color.White)

          .textAlign(TextAlign.Center)

          .fontColor(this.textColor);



        // Input section

        Column() {

          TextArea({ text: $$this.inputText, placeholder: 'Enter Simplified/Traditional text (mixed input supported)' })

            .fontSize(18)

            .placeholderColor(this.isInputFocused ? this.themeColor : Color.Gray)

            .fontColor(this.isInputFocused ? this.themeColor : this.textColor)

            .borderColor(this.isInputFocused ? this.themeColor : Color.Gray)

            .caretColor(this.themeColor)

            .onBlur(() => this.isInputFocused = false)

            .onFocus(() => this.isInputFocused = true)

            .borderWidth(1)

            .borderRadius(10)

            .backgroundColor(Color.White)

            .constraintSize({ minHeight: this.minTextAreaHeight, maxHeight: this.maxTextAreaHeight });



          // Clear button

          Text('Clear')

            .borderWidth(1)

            .borderColor(this.themeColor)

            .fontColor(this.themeColor)

            .height(50)

            .textAlign(TextAlign.Center)

            .borderRadius(10)

            .fontSize(18)

            .width(`${650 - this.basePadding * 2}lpx`)

            .margin({ top: `${this.basePadding}lpx` })

            .clickEffect({ level: ClickEffectLevel.HEAVY, scale: 0.8 })

            .onClick(() => this.inputText = "");

        }

        // ... (Other UI components follow similar pattern)

      }

    }

    .width('100%')

    .height('100%')

    .backgroundColor("#f2f3f5")

    .align(Alignment.Top)

    .padding({ bottom: `${this.basePadding}lpx` );

  }

}