@huaweicloud/km-preview-component/README.md

KooMessage 模板预览组件

# PreivewComponent

基于 angular 和 WebComponent 实现的全平台全框架通用的智能信息模板预览组件

更多疑问和细节可咨询 KooMessage 运营人员，或登录 [KooMessage 官网](https://www.huaweicloud.com/product/koomessage.html) 查询相关信息。

## 安装/Install

```nodejs
$ npm i @huaweicloud/km-preview-component
```

## 使用/Usage

### For Vue

###### 1.引入核心文件

`main.ts` 中引入 js 和 css 文件

```nodejs
import '../node_modules/@huaweicloud/km-preview-component/km-preview-component-wc.js';
import '../node_modules/@huaweicloud/km-preview-component/km-preview-component-styles.css'
```

###### 2.引入图片资源

```nodejs
$ npm i copy-webpack-plugin
```

在 `vue.config.js` 中利用插件 copy-webpack-plugin 配置 configureWebpack

```typescript
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "node_modules/@huaweicloud/km-preview-component/km-preview-img",
            to: "km-preview-img",
            globOptions: {
              ignore: [".*"],
            },
          },
        ],
      }),
    ],
  },
});
```

###### 3. vue 项目中注册预览组件的自定义标签

在 `vue.config.js` 中配置 chainWebpack 的 isCustomElement，如下 switch 中的条件可按需引入

```typescript
module.exports = defineConfig({
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: (tag) => {
            return tag.includes('km-');
          },
        };
        return options;
      });
  },
});
```

###### 4. vue 项目中使用预览组件

```HTML
<temlpate>
    <km-aim-preview
        :frameworkData.prop="actualTemplateData"
        :selectedVendor.prop="actualFactory"
        :xxx="xxx"
    ></km-aim-preview>
</template>
```

### For Angular

###### 1.引入核心文件

`angular.json` 文件中 _projects_ -> _yourProjects_ -> _architect_ -> _build_-> _options_ 的 assets、style、script 配置

```json
{
  "assets": [
    {
      "glob": "**/*",
      "input": "node_modules/@huaweicloud/km-preview-component/km-preview-img",
      "output": "km-preview-img"
    }
  ],
  "style": [
    "node_modules/@huaweicloud/km-preview-component/km-preview-component-styles.css"
  ],
  "script": [
    "node_modules/@huaweicloud/km-preview-component/km-preview-component-wc.js"
  ]
}
```

###### 2.angular 项目中使用预览组件

angular 项目中注册自定义元素，在引用组件的 module.ts 中添加如下配置

```typescript
@NgModule({
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ],
}
```

html 中引入组件标签并传值

```html
<temlpate>
    <km-aim-preview
        [frameworkData]="actualTemplateData"
        [selectedVendor]="actualFactory"
        [xxx]="xxx"
    ></km-aim-preview>
</template>
```

## 预览组件 API

说明：KooMessage 提供 4 种模板预览组件，分别为：
|组件名 |描述 |
| ------------- | :------------------------: |
|km-aim-preview|智能信息模板预览组件|
|km-aim-mobile-preview|智能信息模板预览组件（带手机框）|
|km-vms-preview|智能信息基础版模板预览组件|
|km-vms-mobile-preview|智能信息基础版模板预览组件（带手机框）|

在预览组件 API 中，frameworkData 为模板数据，文档底部给出 mock 示例，需配合模板数据查询接口使用，模板数据查询接口的返回值可直接作为 frameworkData 使用并传入，如需模板查询接口请跳转 [KooMessage 产品文档](https://support.huaweicloud.com/api-koomessage/ListAIMTemplates.html) 或联系 KooMessage 运营人员获取。

- **km-aim-preview**

| 参数名         |            描述            | 类型                                             | 默认值  | 必传项 |
| -------------- | :------------------------: | ------------------------------------------------ | ------- | ------ |
| frameworkData  |     模板数据，用于渲染     | TemplateFramework                                | -       | 是     |
| selectedVendor | 选择使用何种供应商样式预览 | 'HUAWEI' \| 'XIAOMI' \|'OPPO' \|'MEIZU' \|'VIVO' | 'HUAWEI'      | 否     |
| lang           |            语言            | 'zh-cn' \| 'en-us                                | 'zh-cn' | 否     |
| outerWidth     |        缩放比例调整        | number                                           | 400     | 否     |

效果预览：
<img src="https://cn-east-3-km-template-public.obs.cn-east-3.myhuaweicloud.com/tzrlntxzij-3722077547781642.png">

- **km-aim-mobile-preview**

| 参数名                |            描述            | 类型                                             | 默认值   | 必传项 |
| --------------------- | :------------------------: | ------------------------------------------------ | -------- | ------ |
| frameworkData         |     模板数据，用于渲染     | TemplateFramework                                | -        | 是     |
| selectedVendor        |      默认活跃的供应商      | 'HUAWEI' \| 'XIAOMI' \|'OPPO' \|'MEIZU' \|'VIVO' | 'HUAWEI' | 否     |
| isVendorButtonsActive |    是否显示厂商选择按钮    | boolean                                          | false    | 否     |
| isQrCodeActive        |     是否显示二维码开关     | boolean                                          | false    | 否     |
| lang                  |            语言            | 'zh-cn' \| 'en-us                                | 'zh-cn'  | 否     |
| emitAction            | 是否启用模板内点击事件回调 | boolean                                          | false    | 否     |

| 事件名            |        描述        | 参数                   | 必传项 |
| ----------------- | :----------------: | ---------------------- | ------ |
| emittedActionData | 模板内点击事件回调 | event: ActionEmitModel | 否     |

效果预览：
<img src="https://cn-east-3-km-template-public.obs.cn-east-3.myhuaweicloud.com/prlfpfycnp-28271968379434906.png">

- **km-vms-preview**

  | 参数名        |           描述           | 类型 | 默认值 | 必传项 |
  | ------------- | :----------------------: | ---- | ------ | ------ |
  | frameworkData | 基础版模板数据，用于渲染 | obj  | -      | 是     |

效果预览：  
<img src="https://cn-east-3-km-template-public.obs.cn-east-3.myhuaweicloud.com/cihxijmbbn-28271969306870128.png">

- **km-vms-mobile-preview**

| 参数名         |            描述            | 类型                                             | 默认值 | 必传项 |
| -------------- | :------------------------: | ------------------------------------------------ | ------ |-----|
| frameworkData  |  基础版模板数据，用于渲染  | obj                                              | -      | 是   |
| factory | 模板在传入供应商样式下渲染 | 'HUAWEI' \| 'XIAOMI' \|'OPPO' \|'VIVO' \|'APPLE' | 'HUAWEI'     | 否   |

效果预览：
<img src="https://cn-east-3-km-template-public.obs.cn-east-3.myhuaweicloud.com/dbpfskdlre-28271968294561966.png">

## Mock Data

```typescript
{
  id: "5d8857a6-ef8d-4cbd-ab24-539c11f67bd0",
  tpl_id: "700006021",
  card_id: "RedPacket",
  tpl_name: "测试oppo自定义背景图",
  domain_id: "231724915a62455ca356e10a085c9a23",
  scene: "智能信息模版",
  use_id: 2,
  sub_type: 1,
  sms_example: "你有一条新消息请查收",
  sms_template: "0",
  match_type: null,
  prereview_remark: "自动驳回",
  internal_status: 3,
  final_review_remark: null,
  sms_signs: [],
  created_at: "2023-07-07",
  auto_save: "no",
  pages: [
    {
      page_order: 1,
      contents: [
        {
          page_content_id: "eb63d566-2917-42ad-a864-67d61bae54d1",
          content_id: "eb63d566-2917-42ad-a864-67d61bae54d1",
          type: "image",
          content: null,
          content_child: null,
          src_type: 1,
          src: "HWR100004708",
          cover: null,
          is_text_title: null,
          action_type: "OPEN_URL",
          position_number: 1,
          visible: 1,
          currency_display: 1,
          oppo_background: "HWR100004709",
          vivo_background: null,
          voucher_type: null,
          validity_type: null,
          obs_file_url:
            "https://cn-north-5-km-template-public-security.obs.cn-north-5.myhuaweicloud.com:443/mfbcrlhpzr-17594951415287751.png",
          obs_cover_url: null,
          obs_oppo_url:
            "https://cn-north-5-km-template-public-security.obs.cn-north-5.myhuaweicloud.com:443/nflpiwwrpf-17598695691973370.jpg",
          obs_vivo_url: null,
          ratio: null,
          button_type: null,
          action: {
            target: "https://www.baidu.com",
            content: null,
            package_name: null,
            floor_url: null,
            floor_type: null,
            body: null,
            subject: null,
            description: null,
            begin_time: null,
            end_time: null,
            address: null,
            longitude: null,
            latitude: null,
            text_button: null,
            mode: null,
          },
          material_infos: [
            {
              material_url:
                "https://cn-north-5-km-template-public-security.obs.cn-north-5.myhuaweicloud.com:443/mfbcrlhpzr-17594951415287751.png",
              material_type: "normal",
            },
            {
              material_url:
                "https://cn-north-5-km-template-public-security.obs.cn-north-5.myhuaweicloud.com:443/nflpiwwrpf-17598695691973370.jpg",
              material_type: "oppo_background",
            },
          ],
        },
        {
          page_content_id: "f1ee81a9-14a7-449d-a767-21bec2613b12",
          content_id: "f1ee81a9-14a7-449d-a767-21bec2613b12",
          type: "text",
          content: "测试",
          content_child: null,
          src_type: null,
          src: null,
          cover: null,
          is_text_title: "false",
          action_type: null,
          position_number: 2,
          visible: 1,
          currency_display: 1,
          oppo_background: null,
          vivo_background: null,
          voucher_type: null,
          validity_type: null,
          obs_file_url: null,
          obs_cover_url: null,
          obs_oppo_url: null,
          obs_vivo_url: null,
          ratio: null,
          button_type: null,
          action: null,
          material_infos: null,
        },
        {
          page_content_id: "bbcc9c3b-1ea2-4ea9-a1b1-3297618dc136",
          content_id: "bbcc9c3b-1ea2-4ea9-a1b1-3297618dc136",
          type: "text",
          content: "测试",
          content_child: null,
          src_type: null,
          src: null,
          cover: null,
          is_text_title: "true",
          action_type: null,
          position_number: 3,
          visible: 1,
          currency_display: 1,
          oppo_background: null,
          vivo_background: null,
          voucher_type: null,
          validity_type: null,
          obs_file_url: null,
          obs_cover_url: null,
          obs_oppo_url: null,
          obs_vivo_url: null,
          ratio: null,
          button_type: null,
          action: null,
          material_infos: null,
        },
        {
          page_content_id: "121c812c-d5e5-467f-bd2b-1af0e7395a67",
          content_id: "121c812c-d5e5-467f-bd2b-1af0e7395a67",
          type: "text",
          content: "测试",
          content_child: null,
          src_type: null,
          src: null,
          cover: null,
          is_text_title: "false",
          action_type: null,
          position_number: 4,
          visible: 1,
          currency_display: 1,
          oppo_background: null,
          vivo_background: null,
          voucher_type: null,
          validity_type: null,
          obs_file_url: null,
          obs_cover_url: null,
          obs_oppo_url: null,
          obs_vivo_url: null,
          ratio: null,
          button_type: null,
          action: null,
          material_infos: null,
        },
        {
          page_content_id: "94e98f89-1442-4325-b41c-b633bf9f1241",
          content_id: "94e98f89-1442-4325-b41c-b633bf9f1241",
          type: "button",
          content: "按钮1",
          content_child: null,
          src_type: null,
          src: null,
          cover: null,
          is_text_title: null,
          action_type: "OPEN_URL",
          position_number: 5,
          visible: 1,
          currency_display: 1,
          oppo_background: null,
          vivo_background: null,
          voucher_type: null,
          validity_type: null,
          obs_file_url: null,
          obs_cover_url: null,
          obs_oppo_url: null,
          obs_vivo_url: null,
          ratio: null,
          button_type: null,
          action: {
            target: "https://www.baidu.com",
            content: null,
            package_name: null,
            floor_url: null,
            floor_type: null,
            body: null,
            subject: null,
            description: null,
            begin_time: null,
            end_time: null,
            address: null,
            longitude: null,
            latitude: null,
            text_button: null,
            mode: null,
          },
          material_infos: null,
        },
      ],
    },
  ],
  params: [],
  factorys: [
    {
      factory_type: "HUAWEI",
      state: 0,
    },
    {
      factory_type: "XIAOMI",
      state: 0,
    },
    {
      factory_type: "OPPO",
      state: 1,
    },
    {
      factory_type: "VIVO",
      state: 0,
    },
  ],
  old_pages: null,
};
```