# IOP Chat卡片 移动端 Web Component开发模板
## 开发方式
- 组件开发技术栈vue3, 组件库EncyDesignMobile.
- 开发方式与普通vue组件保持一致, 构建时会统一转换成Web Component.
- 组件开发入口在component.ce.vue.
- 组件发布建议使用QI前端研发平台,发布记得勾选发布CDN资源.
- component.ce.vue文件中的样式代码需要复制一份到component.scss中.
- component.css文件中不需要写任何代码,打包的时候会把component.scss中的样式代码会编译到component.css中.
## 系统API调用
- 调用方式
- 通过emits触发自定义事件
- 示例demo
```js
emits('ctx:openUrl', {
url: 'https://1688.com',
title: '1688'
})
```
- API说明
- ctx:openUrl: 应用内打开url
- ctx:openNotify: 打开系统级通知
- ctx:openDialog: 打开系统级弹窗
- ctx:postMessage: 推送一条新的chat消息
- ctx:updateLastResult: 更新llm上次结果, 方便llm回答问题
# 如何使用 @enn/answer-card
## 使用包管理器 [enpm](https://enpm.ennew.com/)
```shell
# 安装 enpm（如果未安装enpm）
$ npm install -g enpm --registry=https://registry-npm.ennew.com/
# enpm安装正式版本
$ enpm install @enn/answer-card --save
```
### 在项目中使用
```typescript
import AnswerCard from '@enn/answer-card'
// 引入样式
import '@enn/answer-card/lib/index.css'
```
## 通过 CDN 安装
直接通过浏览器的 HTML 标签导入 `AnswerCard`，然后就可以使用全局变量 `AnswerCard` 了。
### CDN
```html
```