HarmonyOS NEXT Development Case: Character Count Statistics

// Define a component for number and text statistics
@Entry
@Component
struct NumberToChineseConverter {
  // State variable storing example number string
  @State private exampleNumber: string = '自从盘古破鸿蒙,开辟从兹清浊辨。\nare you ok?\n1234\n+-*/';
  // Text color state variable
  @State private textColor: string = "#2e2e2e";
  // Shadow border color state variable
  @State private shadowColor: string = "#d5d5d5";
  // Base padding state variable
  @State private basePadding: number = 30;
  // Chinese character count state variable
  @State private chineseCharCount: string = "0";
  // Chinese punctuation count state variable
  @State private chinesePunctuationCount: string = "0";
  // Total Chinese characters + punctuation state variable
  @State private totalChineseCount: string = "0";
  // English character count state variable
  @State private englishCharCount: string = "0";
  // Digit count state variable
  @State private digitCount: string = "0";
  // Total character count state variable
  @State private charTotalCount: string = "0";
  // Input text state variable with change listener
  @State @Watch('inputChanged') private inputText: string = "";

  // Method called when input text changes
  inputChanged() {
    // Initialize counters
    let chineseChars = 0;      // Chinese characters
    let chinesePunctuation = 0; // Chinese punctuation
    let englishChars = 0;      // English characters
    let digits = 0;            // Digits
    let count = 0;             // Total characters

    // Iterate through each character
    for (let i = 0; i < this.inputText.length; i++) {
      let char = this.inputText.charAt(i);
      count++;

      if (/\d/.test(char)) {
        digits++;
      }
      if (/[\u4e00-\u9fa5]/.test(char)) {
        chineseChars++;
        count++;  // Chinese characters count as 2 units
      }
      if (/[\u3001-\u3002\uff01-\uff1a]/.test(char)) {
        chinesePunctuation++;
        count++;  // Chinese punctuation counts as 2 units
      }
      if (/[a-zA-Z0-9\s!-/:-@[-`{-~]/.test(char)) {
        englishChars++;
      }
    }

    // Update state variables
    this.chineseCharCount = `${chineseChars}`;
    this.chinesePunctuationCount = `${chinesePunctuation}`;
    this.totalChineseCount = `${chineseChars + chinesePunctuation}`;
    this.englishCharCount = `${englishChars}`;
    this.digitCount = `${digits}`;
    this.charTotalCount = `${count}`;
  }

  // UI construction method
  build() {
    Column() {
      Text('Character Counter')
        .fontColor(this.textColor)
        .fontSize(18)
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.White)
        .shadow({
          radius: 2,
          color: this.shadowColor,
          offsetX: 0,
          offsetY: 5
        });

      Scroll() {
        Column() {
          // Tool introduction section
          Column() {
            Text('Tool Description').fontSize(18).fontWeight(600).fontColor(this.textColor);
            Text('This tool quickly counts characters in input text, including Chinese characters, punctuation, digits, and English characters. Rules:\n• Chinese characters and punctuation count as 2 units\n• Digits, spaces, and English characters count as 1 unit')
              .textAlign(TextAlign.JUSTIFY)
              .fontSize(13)
              .fontColor(this.textColor)
              .margin({ top: `${this.basePadding / 2}lpx` });
          }
          .alignItems(HorizontalAlign.Start)
          .width('650lpx')
          .padding(`${this.basePadding}lpx`)
          .margin({ top: `${this.basePadding}lpx` })
          .borderRadius(10)
          .backgroundColor(Color.White)
          .shadow({ radius: 10, color: this.shadowColor });

          // Example and Clear section
          Column() {
            Row() {
              Text('Example')
                .fontColor("#5871ce")
                .fontSize(16)
                .padding(`${this.basePadding / 2}lpx`)
                .backgroundColor("#f2f1fd")
                .borderRadius(5)
                .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })
                .onClick(() => {
                  this.inputText = this.exampleNumber;
                });
              Blank();
              Text('Clear')
                .fontColor("#e48742")
                .fontSize(16)
                .padding(`${this.basePadding / 2}lpx`)
                .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })
                .backgroundColor("#ffefe6")
                .borderRadius(5)
                .onClick(() => {
                  this.inputText = "";
                });
            }
            .height(45)
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%');

            Divider();
            TextArea({ text: $$this.inputText, placeholder: `Input text here` })
              .width(`${650 - this.basePadding * 2}lpx`)
              .height(100)
              .fontSize(16)
              .caretColor(this.textColor)
              .fontColor(this.textColor)
              .margin({ top: `${this.basePadding}lpx` })
              .padding(0)
              .backgroundColor(Color.Transparent);
          }
          .alignItems(HorizontalAlign.Start)
          .width('650lpx')
          .padding(`${this.basePadding}lpx`)
          .margin({ top: `${this.basePadding}lpx` })
          .borderRadius(10)
          .backgroundColor(Color.White)
          .shadow({ radius: 10, color: this.shadowColor });

          // Statistics display section
          Column() {
            // Multiple Rows showing different counts...
            // (Similar structure to Chinese version with English translations)
          }
          .alignItems(HorizontalAlign.Start)
          .width('650lpx')
          .padding(`${this.basePadding}lpx`)
          .margin({ top: `${this.basePadding}lpx` })
          .borderRadius(10)
          .backgroundColor(Color.White)
          .shadow({ radius: 10, color: this.shadowColor });
        }
      }
      .scrollBar(BarState.Off)
      .clip(false);
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#f4f8fb");
  }
}