feat(highlight): 新增 Highlight 高亮文本组件 (#782)

* feat(highlight): 新增 Highlight 高亮文本组件

- 添加 Highlight 组件的实现和样式
- 创建高亮文本的示例演示页面
- 定义 Highlight 组件的 Props 类型
- 更新相关配置文件，增加 Highlight 组件的路由和菜单项

* docs: 更新 CountUp 和 Highlight 组件文档

- 在 CountUp 组件文档中添加版本要求说明
- 新增 Highlight 组件文档，包括介绍、引入方式、代码演示和 API 说明

Author: HyaCiovo

packages/vantui-demo/src/app.config.js

@@ -76,6 +76,7 @@ export default {
     'pages/image-cropper/index',
     'pages/default-props/index',
     'pages/count-up/index',
+    'pages/highlight/index',
   ],
   window: {
     navigationBarBackgroundColor: '#f8f8f8',

packages/vantui-demo/src/config.json

@@ -246,6 +246,10 @@
         "path": "empty",
         "title": "Empty 空状态"
       },
+      {
+        "path": "highlight",
+        "title": "Highlight 高亮文本"
+      },
       {
         "path": "ellipsis",
         "title": "Ellipsis 文本省略"

packages/vantui-demo/src/pages/highlight/index.config.js

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: 'Highlight 高亮文本',
+  enableShareAppMessage: true,
+}

packages/vantui-demo/src/pages/highlight/index.tsx

@@ -0,0 +1,5 @@
+import Demo from '../../../../vantui/src/highlight/demo/index'
+
+export default function Index() {
+  return <Demo />
+}

packages/vantui/antm.config.ts

@@ -336,6 +336,10 @@ function getMenus() {
           path: 'empty',
           title: 'Empty 空状态',
         },
+        {
+          path: 'highlight',
+          title: 'Highlight 高亮文本',
+        },
         {
           path: 'result',
           title: 'Result 操作结果',

packages/vantui/src/count-up/README.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-一般用于需要滚动数字到某一个值的场景。
+一般用于需要滚动数字到某一个值的场景。请升级 `@antmjs/vant` 到 `>= 3.6.3` 版本来使用该组件。
 
 ### 引入
 

packages/vantui/src/highlight/README.md

@@ -0,0 +1,52 @@
+# Highlight 高亮文本
+
+### 介绍
+
+高亮指定文本内容。请升级 `@antmjs/vant` 到 `>= 3.6.6` 版本来使用该组件。
+
+### 引入
+
+在 Taro 文件中引入组件
+
+```js
+import { Highlight } from '@antmjs/vantui'
+```
+
+## 代码演示
+
+### 基础用法
+
+你可以通过 `keywords` 指定需要高亮的关键字，通过 `sourceString` 指定源文本。
+
+::: $demo1 :::
+
+### 多字符匹配
+
+如果需要指定多个关键字，可以以数组的形式传入 `keywords`。
+
+::: $demo2 :::
+
+### 设置高亮标签类名
+
+通过 `highlightClass` 可以设置高亮标签的类名，以便自定义样式。
+
+::: $demo3 :::
+
+### HighlightProps [[详情]](https://github.com/AntmJS/vantui/tree/main/packages/vantui/types/highlight.d.ts)
+
+| 参数             | 说明             | 类型                                                  | 默认值 | 必填    |
+| ---------------- | ---------------- | ----------------------------------------------------- | ------ | ------- |
+| autoEscape       | 是否自动转义     | _&nbsp;&nbsp;boolean<br/>_                            | true   | `false` |
+| caseSensitive    | 是否区分大小写   | _&nbsp;&nbsp;boolean<br/>_                            | false  | `false` |
+| highlightClass   | 高亮元素的类名   | _&nbsp;&nbsp;string<br/>_                             | -      | `false` |
+| keywords         | 期望高亮的文本   | _&nbsp;&nbsp;string&nbsp;&brvbar;&nbsp;string[]<br/>_ | -      | `true`  |
+| sourceString     | 源文本           | _&nbsp;&nbsp;string<br/>_                             | -      | `true`  |
+| unhighlightClass | 非高亮元素的类名 | _&nbsp;&nbsp;string<br/>_                             | -      | `false` |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考[ConfigProvider 组件](https://antmjs.github.io/vantui/#/config-provider)
+
+| 名称                   | 默认值                   |
+| ---------------------- | ------------------------ |
+| --highlight-text-color | ` var(--primary-color);` |

packages/vantui/src/highlight/demo/demo.less

@@ -0,0 +1,3 @@
+.demo-custom-highlight-class {
+  color: #ff0000;
+}

packages/vantui/src/highlight/demo/demo1.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import { Highlight } from '@antmjs/vantui'
+
+export default function Demo() {
+  const text = '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。'
+  const keywords = '难题'
+
+  return <Highlight keywords={keywords} sourceString={text} />
+}

packages/vantui/src/highlight/demo/demo2.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import { Highlight } from '@antmjs/vantui'
+
+export default function Demo() {
+  const text = '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。'
+  const keywords = ['难题', '终有一天', '答案']
+
+  return <Highlight keywords={keywords} sourceString={text} />
+}