HarmonyOS 鸿蒙Next如何设计一段文本超过3行时，在三行末尾加上显示'..全文'等自定义文案

import { inspector } from '[@kit](/user/kit).ArkUI';
import componentUtils from '[@ohos](/user/ohos).arkui.componentUtils';
import measure, { MeasureOptions } from '[@ohos](/user/ohos).measure'

interface TextSpan {
  type: 'text' | 'image'
  content: string | Resource
}

[@Entry](/user/Entry)
[@Component](/user/Component)
export struct TextDemo1 {
  private maxLines: number = 3
  private fontSize: string = '60px'
  private iconWidth: number = 60
  private suffixCollapseTxt: string = '收起';
  private suffixExpandTxt: string = '... 全文';
  private textKey: string = Math.random() + ''
  [@State](/user/State) message: string =
    `“加快形成新质生产力，增强发展新动能。” 新时代推动东北[图标]全面振兴座谈会上首次提到了新质生产力。此后，新质生产力被[图标]写入中央经济工作会议以及2024年政府[图标]工作报告，成为指导中国经济[图标]发展的重要路标。 本次新时代推动中部地区崛起座谈会，同样提到新质生产力。`
  [@State](/user/State) isCollapse: boolean = true
  [@State](/user/State) textMaxLine: number = Infinity
  [@State](/user/State) needClip: boolean = false
  [@State](/user/State) renderSpan: TextSpan[] = []
  private textMeasure: TextMeasure = new TextMeasure(this.fontSize)
  private clipIndex: number | null = null
  private collapseHeight: number = 0
  private expandSpan: TextSpan[] = []
  private collapseSpan: TextSpan[] = []

  aboutToAppear(): void {
    const listener = inspector.createComponentObserver(this.textKey)
    listener.on('layout', this.onLayoutComplete)
    // listener.on('draw', this.onDrawComplete)
  }

  onLayoutComplete = () => {
    if (!this.isCollapse) {
      return
    }
    const size = componentUtils.getRectangleById(this.textKey).size
    if (this.clipIndex === null) {
      const result = this.textMeasure.measureClipSpan(size.width, this.message, this.maxLines, this.suffixCollapseTxt,
        this.iconWidth)
      this.clipIndex = result.clipIndex
      this.expandSpan = result.textSpan.slice()
      if (this.clipIndex > -1) {
        this.needClip = true
        this.textMaxLine = this.maxLines
        const renderSpan = result.textSpan.slice(0, this.clipIndex + 1)
        this.renderSpan = [...renderSpan]
        return
      }
    }
    if (!this.collapseHeight && this.needClip) {
      this.collapseHeight = size.height
      this.textMaxLine = Infinity
      return
    }
    if (this.needClip && size.height > this.collapseHeight) {
      if (this.renderSpan[this.clipIndex].type === 'image') {
        this.renderSpan.splice(this.clipIndex, 1)
      } else {
        const oldText = this.renderSpan[this.clipIndex].content.toString()
        const newText = oldText.substring(0, oldText.length - 1)
        this.renderSpan[this.clipIndex] = { type: 'text', content: newText }
        this.renderSpan = [...this.renderSpan]
        // this.renderSpan.splice(this.clipIndex, 1, { type: 'text', content: newText })
      }
    } else {
      this.collapseSpan = [...this.renderSpan]
    }
  }

  build() {
    Text(this.message) {
      ForEach(this.renderSpan, (item: TextSpan) => {
        if (item.type === 'text') {
          Span(item.content)
        }
        if (item.type === 'image') {
          ImageSpan(item.content).width(this.iconWidth + 'px')
        }
      })
      if (this.needClip) {
        Span(this.isCollapse ? this.suffixExpandTxt : this.suffixCollapseTxt)
          .onClick(() => {
            this.isCollapse = !this.isCollapse
            this.renderSpan = this.isCollapse ? [...this.collapseSpan] : [...this.expandSpan]
          })
          .fontColor(Color.Blue)
      }
    }
    .maxLines(this.textMaxLine)
    .fontSize(this.fontSize)
    .key(this.textKey)
  }
}

interface MeasureResult {
  textSpan: TextSpan[],
  clipIndex: number
}

class TextMeasure {
  static keyMap: Record<string, number> = {}
  options: MeasureOptions = { textContent: '' }

  constructor(fontSize?: string) {
    this.options.fontSize = fontSize
  }

  measureClipSpan(containerWidth: number, text: string, maxLines: number, suffixCollapseTxt: string,
    iconWidth?: number): MeasureResult {
    let maxWidth = containerWidth * maxLines
    let textArr = text.split('')
    let sumWidth = 0
    let textSpan: TextSpan[] = []
    let txtCache: string = ''
    let imageSpanFlag = false
    let clipIndex: number = -1
    let suffixWidth = this.measureSuffixWidth(suffixCollapseTxt)
    textArr.forEach((i: string, idx: number) => {
      let itemWidth = 0
      if (i === '[') {
        imageSpanFlag = true
        textSpan.push({
          type: 'text',
          content: txtCache
        })
        txtCache = ''
        return
      } else if (i === ']') {
        imageSpanFlag = false
        itemWidth = iconWidth || 0
        textSpan.push({
          type: 'image',
          content: $r('app.media.app_icon')
        })
        return
      }
      if (imageSpanFlag) {
        return
      }
      if (!itemWidth) {
        itemWidth = this.measureOneText(i)
      }
      sumWidth += itemWidth
      if ((sumWidth + suffixWidth) >= maxWidth && clipIndex < 0) {
        console.log('clipIndex____' + i + " " + idx)
        clipIndex = textSpan.length
        textSpan.push({
          type: 'text',
          content: txtCache
        })
        txtCache = ''
      }
      txtCache += i
      if (idx === textArr.length - 1) {
        textSpan.push({
          type: 'text',
          content: txtCache
        })
        txtCache = ''
      }
    })
    return {
      textSpan: textSpan,
      clipIndex: clipIndex
    }
  }

  measureSuffixWidth(text: string) {
    return text.split('').reduce((sum, item) => sum + this.measureOneText(item), 0)
  }

  measureOneText(text: string): number {
    let isNumber = /[0-9]/.test(text)
    let isChinese = !isNumber && /[\u4e00-\u9fa5]/.test(text)
    if (isChinese && TextMeasure.keyMap['__chinese__']) {
      return TextMeasure.keyMap['__chinese__']
    }
    if (isNumber && TextMeasure.keyMap['__number__']) {
      return TextMeasure.keyMap['__number__']
    }
    if (TextMeasure.keyMap[text]) {
      return TextMeasure.keyMap[text]
    }
    this.options.textContent = text
    let size = measure.measureText(this.options)
    if (isChinese) {
      TextMeasure.keyMap['__chinese__'] = size
    } else if (isNumber) {
      TextMeasure.keyMap['__number__'] = size
    } else {
      TextMeasure.keyMap[text] = size
    }
    return size
  }
}