Harmonyos مورد توسعه بعدی: تبدیل متن به پینیین

// Import pinyin function from pinyin-pro library for Chinese-to-pinyin conversion
import { pinyin } from "pinyin-pro";

// Define a class to store character and its corresponding pinyin
class PinyinBean {
  pinyin: string; // Pinyin result
  character: string; // Corresponding Chinese character

  // Constructor to initialize pinyin and character
  constructor(pinyin: string, character: string) {
    this.pinyin = pinyin;
    this.character = character;
  }
}

// Define component using decorator for pinyin conversion feature
@Entry
@Component
struct PinyinConverter {
  // Default user input content
  @State private defaultInput: string = "混沌未分天地乱,茫茫渺渺无人见。自从盘古破鸿蒙,开辟从兹清浊辨。";
  // Component theme color
  @State private themeColor: string | Color = Color.Orange;
  // Text color
  @State private fontColor: string = "#2e2e2e";
  // Border color
  @State private lineColor: string = "#d5d5d5";
  // Base padding value
  @State private basePadding: number = 30;
  // User input with conversion watcher
  @State @Watch('convertToPinyin') userInput: string = "";
  // Conversion result storage
  @State conversionResult: PinyinBean[] = [];
  // Input field focus state
  @State isInputFocused: boolean = false;

  // Convert text to pinyin
  convertToPinyin() {
    const pinyinArray: string[] = pinyin(this.userInput, { type: "array" });
    const charArray: string[] = this.userInput.split("");
    this.conversionResult.length = 0;

    for (let i = 0; i < pinyinArray.length; i++) {
      this.conversionResult.push(new PinyinBean(pinyinArray[i], charArray[i]));
    }
  }

  // UI construction
  build() {
    Column() {
      // Title bar
      Text('Text to Pinyin Converter')
        .fontColor(this.fontColor)
        .fontSize(18)
        .width('100%')
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.White)
        .shadow({
          radius: 2,
          color: this.lineColor,
          offsetX: 0,
          offsetY: 5
        });

      // Main content container
      Column() {
        // Control buttons row
        Row() {
          Text('Example')
            .fontColor("#5871ce")
            .fontSize(18)
            .padding(`${this.basePadding / 2}lpx`)
            .backgroundColor("#f2f1fd")
            .borderRadius(5)
            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })
            .onClick(() => {
              this.userInput = this.defaultInput;
            });

          Blank();

          Text('Clear')
            .fontColor("#e48742")
            .fontSize(18)
            .padding(`${this.basePadding / 2}lpx`)
            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })
            .backgroundColor("#ffefe6")
            .borderRadius(5)
            .onClick(() => {
              this.userInput = "";
            });
        }.height(45)
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%');

        // Input area
        Row() {
          TextArea({
            text: $$this.userInput,
            placeholder: !this.isInputFocused ? `Input text here. E.g.: ${this.defaultInput}` : ''
          })
            .backgroundColor(Color.Transparent)
            .padding(0)
            .height('100%')
            .placeholderColor(this.isInputFocused ? this.themeColor : Color.Gray)
            .fontColor(this.isInputFocused ? this.themeColor : this.fontColor)
            .caretColor(this.themeColor)
            .borderRadius(0)
            .onBlur(() => this.isInputFocused = false)
            .onFocus(() => this.isInputFocused = true)
            .width('100%');
        }
        .padding(`${this.basePadding / 2}lpx`)
        .backgroundColor("#f2f1fd")
        .width('100%')
        .height(120)
        .borderWidth(1)
        .borderRadius(10)
        .borderColor(this.isInputFocused ? this.themeColor : Color.Gray)
        .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.lineColor,
        offsetX: 0,
        offsetY: 0
      });

      // Result display area
      Column() {
        Row() {
          Flex({ wrap: FlexWrap.Wrap }) {
            ForEach(this.conversionResult, (item: PinyinBean, index: number) => {
              Column() {
                Text(`${item.pinyin}`).fontColor(this.fontColor).fontSize(18);
                Text(`${item.character}`).fontColor(this.fontColor).fontSize(18);
              }.padding(3);
            })
          }
        }.justifyContent(FlexAlign.SpaceBetween)
        .width('100%');
      }
      .visibility(this.conversionResult.length != 0 ? Visibility.Visible : Visibility.None)
      .alignItems(HorizontalAlign.Start)
      .width('650lpx')
      .padding(`${this.basePadding}lpx`)
      .margin({ top: `${this.basePadding}lpx` })
      .borderRadius(10)
      .backgroundColor(Color.White)
      .shadow({
        radius: 10,
        color: this.lineColor,
        offsetX: 0,
        offsetY: 0
      });
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#f4f8fb");
  }
}