feat: 🎸 升级 @ComponentV2装饰器 组件

✅ Closes: #60

entry/src/main/ets/pages/V1/Index.ets

@@ -0,0 +1,68 @@
+import { HPRichText, RichTextOption } from '@ohasasugar/hp-richtext';
+import { imgUrl } from '../constant';
+
+@Entry
+@Component
+struct Index {
+  @State richTextOption: RichTextOption = {
+    content: `
+      <h1 style="text-indent: 200px">h1标签</h1>
+      <h2>h2标签</h2>
+      <h3>h3标签</h3>
+      <h4>h4标签</h4>
+      <h5>h5标签</h5>
+      <h6>h6标签</h6>
+      <div>div标签</div>
+      <p>p标签</p>
+      <div>
+        <font color="red" size="60px">font标签</font>
+        <strong>strong标签</strong>
+        <b>b标签</b>
+        <i>i标签</i>
+        <u>u标签</u>
+        <s>s标签</s>
+        <strike>strike标签</strike>
+        <del>del标签</del>
+        <big>big标签</big>
+        <small>small标签</small>
+        <a href="http://www.baidu.com">a标签</a>
+        <span>带换行符号或者空格符号的文本：
+        【0乳糖，特添优质冷榨生椰浆】使用IIAC大赛金奖咖啡豆，现萃香醇Espresso，遇见鲜椰冷榨生椰浆，椰香浓郁，香甜清爽，带给你不一样的拿铁体验！\r\n\r\n主要原料：浓缩咖啡、冷冻椰浆/椰浆饮品、原味调味糖浆\r\n\r\n图片及包装仅供参考，请以实物为准。\r\n尽快享用风味更佳哦~
+        </span>
+      </div>
+      <input style="color:red" placeholder="请输入..." type="number" maxlength="2" value="我是input标签"/>
+      <textarea rows="10" cols="30">
+        我是一个文本框
+      </textarea>
+      <p style="margin: 10px;border: 5px solid #000;">带实线边框样式的</p>
+      <p style="margin: 10px;border: 5px dashed #000;">带虚线边框样式的</p>
+      <p style="margin: 10px;border: 5px dotted #000;">带点状边框样式的</p>
+      <h1 style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">单行文本显示省略号单行文本显示省略号</h1>
+      <h1 style="-webkit-line-clamp: 2;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">多行文本显示省略号多行文本显示省略号多行文本显示省略号</h1>
+      <img width="500px" src="${imgUrl}" />
+      <video height="500px" loop muted autoplay src="xx" />
+    `,
+    imageProp: {
+      webp: true,
+    }
+  };
+
+  build() {
+    Column() {
+      Button('改变数据').onClick(() => {
+        this.richTextOption = {
+          baseFontSize: 50,
+          baseFontColor: '#ecd88d',
+          content: '我是改变之后的数据，如通过ajax请求返回的数据'
+        }
+      })
+      HPRichText({
+        richTextOption: $richTextOption,
+        needScroll: true,
+        onLinkPress: (e) => {
+          return e;
+        }
+      })
+    }
+  }
+}

entry/src/main/ets/pages/V2/Index.ets

@@ -0,0 +1,72 @@
+import { HPRichTextV2, RichTextOptionModelV2 } from '@ohasasugar/hp-richtext';
+import { imgUrl } from '../constant';
+
+@Entry
+@Component
+struct Index {
+  optionModel: RichTextOptionModelV2 = new RichTextOptionModelV2();
+
+  aboutToAppear() {
+    this.optionModel.richTextOption = {
+      content: `
+      <h1 style="text-indent: 200px">h1标签</h1>
+      <h2>h2标签</h2>
+      <h3>h3标签</h3>
+      <h4>h4标签</h4>
+      <h5>h5标签</h5>
+      <h6>h6标签</h6>
+      <div>div标签</div>
+      <p>p标签</p>
+      <div>
+        <font color="red" size="60px">font标签</font>
+        <strong>strong标签</strong>
+        <b>b标签</b>
+        <i>i标签</i>
+        <u>u标签</u>
+        <s>s标签</s>
+        <strike>strike标签</strike>
+        <del>del标签</del>
+        <big>big标签</big>
+        <small>small标签</small>
+        <a href="http://www.baidu.com">a标签</a>
+        <span>带换行符号或者空格符号的文本：
+        【0乳糖，特添优质冷榨生椰浆】使用IIAC大赛金奖咖啡豆，现萃香醇Espresso，遇见鲜椰冷榨生椰浆，椰香浓郁，香甜清爽，带给你不一样的拿铁体验！\r\n\r\n主要原料：浓缩咖啡、冷冻椰浆/椰浆饮品、原味调味糖浆\r\n\r\n图片及包装仅供参考，请以实物为准。\r\n尽快享用风味更佳哦~
+        </span>
+      </div>
+      <input style="color:red" placeholder="请输入..." type="number" maxlength="2" value="我是input标签"/>
+      <textarea rows="10" cols="30">
+        我是一个文本框
+      </textarea>
+      <p style="margin: 10px;border: 5px solid #000;">带实线边框样式的</p>
+      <p style="margin: 10px;border: 5px dashed #000;">带虚线边框样式的</p>
+      <p style="margin: 10px;border: 5px dotted #000;">带点状边框样式的</p>
+      <h1 style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">单行文本显示省略号单行文本显示省略号</h1>
+      <h1 style="-webkit-line-clamp: 2;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">多行文本显示省略号多行文本显示省略号多行文本显示省略号</h1>
+      <img width="500px" src="${imgUrl}" />
+      <video height="500px" loop muted autoplay src="xx" />
+    `,
+      imageProp: {
+        webp: true,
+      },
+    }
+    this.optionModel.needScroll = true;
+    this.optionModel.onLinkPress = (e) => {
+      return e;
+    };
+  }
+
+  build() {
+    Column() {
+      Button('改变数据').onClick(() => {
+        this.optionModel.richTextOption = {
+          baseFontSize: 50,
+          baseFontColor: '#ecd88d',
+          content: '我是改变之后的数据，如通过ajax请求返回的数据'
+        }
+      })
+      HPRichTextV2({
+        richTextModel: this.optionModel
+      })
+    }
+  }
+}

entry/src/main/resources/base/profile/main_pages.json

@@ -1,5 +1,6 @@
 {
   "src": [
-    "pages/Index"
+    "pages/V1/Index",
+    "pages/V2/Index"
   ]
 }

library/index.ets

@@ -35,9 +35,11 @@ export type {
 } from './src/main/ets/components/hprichtext/index';
 
 // 导出组件
-export { HPRichText } from './src/main/ets/components/hprichtext/HPRichText';
+export { HPRichText } from './src/main/ets/components/hprichtext/HPRichText'; // v1基础组件
 
-export { ObservedHPRichText } from './src/main/ets/components/hprichtext/ObservedHPRichText';
+export { ObservedHPRichText } from './src/main/ets/components/hprichtext/ObservedHPRichText'; // v1 observed组件
+
+export { HPRichTextV2 } from './src/main/ets/components/hprichtext/HPRichTextV2'; // v2组件
 
 // 导出方法
 export {
@@ -55,4 +57,6 @@ export {
 // 导出model
 export { RichTextOptionModel } from './src/main/ets/components/hprichtext/model/RichTextOptionModel';
 
+export { RichTextOptionModelV2 } from './src/main/ets/components/hprichtext/model/RichTextOptionModelV2';
+
 export { HTMLParser };

library/src/main/ets/components/hprichtext/HPRichText.ets

@@ -200,7 +200,7 @@ export struct HPRichText {
     const htmlParser = new HTMLParser(this.richTextOption);
     this.defaultArtUI = this._setDefaultArtUI(); // 生成默认样式
     this.htmlJson = htmlParser.html2json();
-    // console.log('转化之后的html', JSON.stringify?.(this.htmlJson.nodes));
+    console.log('转化之后的html', JSON.stringify?.(this.htmlJson.nodes));
   }
 
   // 初始化更新