open-index/open-npm huggingface dataset:
npm package: @moment-companion/moment
Description: OpenClaw channel plugin for Moment — delivers agent task results back to Moment Backend via callback API.
Latest version: 0.2.1

# openclaw-moment-channel

OpenClaw channel plugin for Moment. When OpenClaw finishes an agent task with `deliver=true` and `channel="moment"`, this plugin delivers the result to Moment Backend via the callback API.

## Setup

### 1. Install plugin on OpenClaw host

```bash
# Copy to OpenClaw workspace
cp -r openclaw-moment-channel ~/.openclaw/workspace/

# Or clone directly
cd ~/.openclaw/workspace
git clone git@github.com:Pianke-Moment/openclaw-moment-channel.git
```

### 2. Configure in openclaw.json

Add the plugin path and config:

```json
{
  "plugins": {
    "load": {
      "paths": [
        "~/.openclaw/workspace/openclaw-moment-channel"
      ]
    },
    "entries": {
      "moment": {
        "enabled": true,
        "config": {
          "backendUrl": "https://your-moment-backend.com",
          "callbackToken": "your-callback-token"
        }
      }
    }
  }
}
```

- `backendUrl`: Moment Backend base URL
- `callbackToken`: must match the `MOMENT_CALLBACK_TOKEN` env var on the backend

### 3. Restart OpenClaw Gateway

```bash
launchctl stop ai.openclaw.gateway && sleep 2 && launchctl start ai.openclaw.gateway
```

### 4. Verify

```bash
openclaw plugins list
# Should show "Moment" as loaded
```

## How it works

```
Moment Backend
    │ POST /hooks/agent
    │ { message, deliver: true, channel: "moment", to: "<task_id>" }
    ▼
OpenClaw Gateway
    │ Agent executes task
    │ deliver=true → calls moment channel sendText()
    ▼
This Plugin (sendText)
    │ POST <backendUrl>/api/v1/tasks/callback
    │ { run_id: "<task_id>", text: "<result>" }
    │ Authorization: Bearer <callbackToken>
    ▼
Moment Backend
    │ Updates AgentTask status → completed
    │ Pushes update to frontend via SSE
    ▼
Moment App (frontend)
    └─ Slot card shows result
```

## Backend integration note

The `to` parameter received by `sendText()` is whatever Moment Backend passes as `to` in the POST /hooks/agent call. The plugin forwards it as `run_id` in the callback payload.

For this to work, the backend must pass the **AgentTask ID** (not user_id) as the `to` parameter when dispatching tasks. See ADR-0010 for details.
npm package: @moment-companion/openclaw-channel
Description: OpenClaw channel plugin for Moment — delivers agent task results back to Moment Backend via callback API.
Latest version: 0.1.2

# openclaw-moment-channel

OpenClaw channel plugin for Moment. When OpenClaw finishes an agent task with `deliver=true` and `channel="moment"`, this plugin delivers the result to Moment Backend via the callback API.

## Setup

### 1. Install plugin on OpenClaw host

```bash
# Copy to OpenClaw workspace
cp -r openclaw-moment-channel ~/.openclaw/workspace/

# Or clone directly
cd ~/.openclaw/workspace
git clone git@github.com:Pianke-Moment/openclaw-moment-channel.git
```

### 2. Configure in openclaw.json

Add the plugin path and config:

```json
{
  "plugins": {
    "load": {
      "paths": [
        "~/.openclaw/workspace/openclaw-moment-channel"
      ]
    },
    "entries": {
      "moment": {
        "enabled": true,
        "config": {
          "backendUrl": "https://your-moment-backend.com",
          "callbackToken": "your-callback-token"
        }
      }
    }
  }
}
```

- `backendUrl`: Moment Backend base URL
- `callbackToken`: must match the `MOMENT_CALLBACK_TOKEN` env var on the backend

### 3. Restart OpenClaw Gateway

```bash
launchctl stop ai.openclaw.gateway && sleep 2 && launchctl start ai.openclaw.gateway
```

### 4. Verify

```bash
openclaw plugins list
# Should show "Moment" as loaded
```

## How it works

```
Moment Backend
    │ POST /hooks/agent
    │ { message, deliver: true, channel: "moment", to: "<task_id>" }
    ▼
OpenClaw Gateway
    │ Agent executes task
    │ deliver=true → calls moment channel sendText()
    ▼
This Plugin (sendText)
    │ POST <backendUrl>/api/v1/tasks/callback
    │ { run_id: "<task_id>", text: "<result>" }
    │ Authorization: Bearer <callbackToken>
    ▼
Moment Backend
    │ Updates AgentTask status → completed
    │ Pushes update to frontend via SSE
    ▼
Moment App (frontend)
    └─ Slot card shows result
```

## Backend integration note

The `to` parameter received by `sendText()` is whatever Moment Backend passes as `to` in the POST /hooks/agent call. The plugin forwards it as `run_id` in the callback payload.

For this to work, the backend must pass the **AgentTask ID** (not user_id) as the `to` parameter when dispatching tasks. See ADR-0010 for details.
npm package: @moment-companion/openclaw-moment-channel
Description: OpenClaw channel plugin for Moment — delivers agent task results back to Moment Backend via callback API.
Latest version: 0.1.3

# openclaw-moment-channel

OpenClaw channel plugin for Moment. When OpenClaw finishes an agent task with `deliver=true` and `channel="moment"`, this plugin delivers the result to Moment Backend via the callback API.

## Setup

### 1. Install plugin on OpenClaw host

```bash
# Copy to OpenClaw workspace
cp -r openclaw-moment-channel ~/.openclaw/workspace/

# Or clone directly
cd ~/.openclaw/workspace
git clone git@github.com:Pianke-Moment/openclaw-moment-channel.git
```

### 2. Configure in openclaw.json

Add the plugin path and config:

```json
{
  "plugins": {
    "load": {
      "paths": [
        "~/.openclaw/workspace/openclaw-moment-channel"
      ]
    },
    "entries": {
      "moment": {
        "enabled": true,
        "config": {
          "backendUrl": "https://your-moment-backend.com",
          "callbackToken": "your-callback-token"
        }
      }
    }
  }
}
```

- `backendUrl`: Moment Backend base URL
- `callbackToken`: must match the `MOMENT_CALLBACK_TOKEN` env var on the backend

### 3. Restart OpenClaw Gateway

```bash
launchctl stop ai.openclaw.gateway && sleep 2 && launchctl start ai.openclaw.gateway
```

### 4. Verify

```bash
openclaw plugins list
# Should show "Moment" as loaded
```

## How it works

```
Moment Backend
    │ POST /hooks/agent
    │ { message, deliver: true, channel: "moment", to: "<task_id>" }
    ▼
OpenClaw Gateway
    │ Agent executes task
    │ deliver=true → calls moment channel sendText()
    ▼
This Plugin (sendText)
    │ POST <backendUrl>/api/v1/tasks/callback
    │ { run_id: "<task_id>", text: "<result>" }
    │ Authorization: Bearer <callbackToken>
    ▼
Moment Backend
    │ Updates AgentTask status → completed
    │ Pushes update to frontend via SSE
    ▼
Moment App (frontend)
    └─ Slot card shows result
```

## Backend integration note

The `to` parameter received by `sendText()` is whatever Moment Backend passes as `to` in the POST /hooks/agent call. The plugin forwards it as `run_id` in the callback payload.

For this to work, the backend must pass the **AgentTask ID** (not user_id) as the `to` parameter when dispatching tasks. See ADR-0010 for details.
npm package: @moment-design/ai-to-text
Description: AI生成文案
Author: lean
Latest version: 0.0.5

# AI 生成文案

## 使用组件

`安装依赖`

```
npm install @moment-design/ai-to-text --save
```

`使用组件`

```ts
<template>
  <m-button type="primary" @click="refAiToText.open()">AI生成文案</m-button>
  <!-- 数据 -->
  <div style="margin-top: 16px">
    已选数据:
    {{ data }}
  </div>
  <AiToText
    ref="refAiToText"
    :config="config"
    @handle:balance="handleBalance"
    @handle:use="handleUse"
  ></AiToText>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Message } from '@moment-design/web-vue';
import AiToText from '@moment-design/ai-to-text';
import "@moment-design/ai-to-text/dist/css/index.css";

const refAiToText = ref();
const data = ref();
const config = {
  // 弹出框标题
  title: 'AI生成文案',
  // 创作金余额
  balance: '369',
  // 输入框最大字数
  maxLength: 1000,
  // 生成文案接口地址
  url: 'https://preapiconsole.71360.com/api/app/di-smart-ai-toolkit/common/chat',
  // 接口扩展自定义参数
  params: {},
};

// 点击创作金事件
const handleBalance = () => {
  Message.success('点击了创作金');
};

// 点击使用 AI 文案事件
const handleUse = (v: any) => {
  data.value = v;
};
</script>
```

## API

Props

| 参数名    | 描述                | 类型   | 默认值      |
| --------- | ------------------- | ------ | ----------- |
| title     | 弹出框标题          | string | AI 生成文案 |
| balance   | 创作金余额          | string | number      |
| maxLength | 输入框最大字数      | number | 1000        |
| url       | AI 生成文案接口地址 | string | -           |
| xtoken    | 接口所需的 xtoken   | string | -           |
| params    | 接口扩展自定义参数  | Object | -           |

Events

| 事件名        | 描述                 | 参数 |
| ------------- | -------------------- | ---- |
| handle:blance | 点击创作金事件       | -    |
| handle:use    | 点击使用 AI 文案事件 | data |

Expose

| 事件名 | 描述             | 参数 |
| ------ | ---------------- | ---- |
| open   | 打开 AI 生成文案 | -    |

slot

| 名称          | 描述           |
| ------------- | -------------- |
| empty-content | 空数据提示信息 |
npm package: @moment-design/choose-activity
Description: 选择活动组件
Author: lean
Latest version: 0.0.3

# 选择活动组件

## 使用组件

`安装依赖`

```
npm install @moment-design/choose-activity --save
```

`使用组件`

```ts
<!-- 按钮 -->
<m-space>
    <m-button type="primary" @click="open">选择活动</m-button>
</m-space>
<!-- 组件 -->
<ChooseActivity ref="refChooseActivity" :config="config" @choose="(v) => (data = v)"></ChooseActivity>
<!-- 数据 -->
<div style="margin-top: 16px">
    已选数据:
    {{ data }}
</div>

<script setup lang="ts">
import {ref} from "vue";
import ChooseActivity from '@moment-design/choose-activity';
import "@moment-design/choose-activity/dist/css/index.css";
import {getList} from "./api";

const refChooseActivity = ref();
const config = {
    api: getList,
    params: {},
};
const data = ref();
const open = () => {
    refChooseActivity.value.open(data.value);
};
</script>

```

## API

Props

| 参数名 | 描述         | 类型 | 默认值 |
| ------ | ------------ | ---- | ------ |
| api    | 列表请求接口 | any  | -      |
| params | 扩展接口参数 | any  | -      |

Events

| 事件名 | 描述       | 参数                  |
| ------ | ---------- | --------------------- |
| choose | 选中的数据 | (v: any[], item: any) |

Expose

| 事件名 | 描述             | 参数                     |
| ------ | ---------------- | ------------------------ |
| open   | 主动触发打开弹窗 | 默认数据：(datas: any[]) |
npm package: @moment-design/choose-address
Description: 选择地址组件
Author: lean
Latest version: 0.0.2

# 选择地址组件

## 使用组件

`安装依赖`

```
npm install @moment-design/choose-address --save
```

`使用组件`

```ts
<template>
  <m-button type="primary" @click="open">选择地址</m-button>
  <ChooseAddress
    ref="refChooseAddress"
    :config="config"
    @handle:change="(v: any[]) => (list = v)"
  ></ChooseAddress>
  <div style="margin-top: 16px">已选数据：{{ list }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChooseAddress from '@moment-design/choose-address';
import "@moment-design/choose-address/dist/css/index.css";
import "@moment-design/choose-address/dist/css/index.less";
import { queryGroupList, queryList } from './api';

const config = {
  apis: {
    queryGroupList,
    queryList,
  },
};
const list: any = ref([]);
const refChooseAddress = ref();
const open = () => {
  refChooseAddress.value.open(list.value);
};
</script>
```

## API

Props

| 参数名 | 描述     | 类型      | 默认值 |
| ------ | -------- | --------- | ------ |
| apis   | 请求接口 | ApiConfig | -      |

ApiConfig

| 参数名         | 描述             | 类型 | 默认值 |
| -------------- | ---------------- | ---- | ------ |
| queryGroupList | 地址分组请求接口 | any  | -      |
| queryList      | 地址列表请求接口 | any  | -      |

Events

| 事件名        | 描述       | 参数           |
| ------------- | ---------- | -------------- |
| handle:change | 选中的数据 | (datas: any[]) |

Expose

| 事件名 | 描述             | 参数                     |
| ------ | ---------------- | ------------------------ |
| open   | 主动触发打开弹窗 | 默认数据：(datas: any[]) |
npm package: @moment-design/choose-channel
Description: 选择渠道组件
Author: lean
Latest version: 0.0.5

# 选择渠道组件

## 使用组件

`安装依赖`

```
npm install @moment-design/choose-channel --save
```

`使用组件`

```ts
<template>
  <l-content title="选择渠道">
    <m-button type="primary" @click="open">选择渠道</m-button>
    <ChooseChannel
      ref="refChooseChannel"
      @handle:change="(v: any[]) => (list = v)"
    ></ChooseChannel>
    <div style="margin-top: 16px">已选数据：{{ list }}</div>
  </l-content>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChooseChannel from "@moment-design/choose-channel";
import "@moment-design/choose-channel/dist/css/index.css";
import "@moment-design/choose-channel/dist/css/index.less";
import ChooseChannel from '../index.vue';

const list: any = ref([]);
const refChooseChannel = ref();
const open = () => {
  refChooseChannel.value.open(list.value);
};
</script>
```

## API

Props

| 参数名 | 描述         | 类型      | 默认值 |
| ------ | ------------ | --------- | ------ |
| max    | 最多选择数量 | number    | 10     |
| apis   | 请求接口     | ApiConfig | -      |

ApiConfig

| 参数名           | 描述             | 类型 | 默认值 |
| ---------------- | ---------------- | ---- | ------ |
| queryGroupList   | 渠道分组请求接口 | any  | -      |
| queryChannelList | 渠道列表请求接口 | any  | -      |

Events

| 事件名        | 描述       | 参数           |
| ------------- | ---------- | -------------- |
| handle:change | 选中的数据 | (datas: any[]) |

Expose

| 事件名 | 描述             | 参数                     |
| ------ | ---------------- | ------------------------ |
| open   | 主动触发打开弹窗 | 默认数据：(datas: any[]) |
npm package: @moment-design/choose-dp
Description: 选择部门/员工
Author: lean
Latest version: 0.2.14

# 选择部门/人员组件

## 使用组件

`安装依赖`

```
npm install @moment-design/choose-dp --save
```

`使用组件`

```ts
<template>
  <div style="margin-bottom: 16px">
    <m-space>
      <m-button type="primary" @click="handleD">选择部门</m-button>
      <m-button type="primary" @click="handleP">选择员工</m-button>
    </m-space>

    <!-- 已选数据 -->
    <div>
      <div style="margin-top: 16px">部门数据：{{ dataD }}</div>
      <div style="margin-top: 16px">员工数据：{{ dataP }}</div>
    </div>

    <!-- 选择部门 -->
    <ChooseDp
      ref="refLChooseDpD"
      :config="configD"
      @check="checkD"
    ></ChooseDp>

    <!-- 选择员工 -->
    <ChooseDp
      ref="refLChooseDpP"
      :config="configP"
      @check="checkP"
    ></ChooseDp>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ChooseDp from '../index.vue';
import { getAccountUserList } from './api';

export default defineComponent({
  name: 'LDemo',
  components: {
    ChooseDp,
  },
  props: {},
  setup() {
    const refLChooseDpD = ref();
    const refLChooseDpP = ref();
    const dataD = ref();
    const dataP = ref();
    const configD = {

    };
    const configP = {
      api: getAccountUserList,
      type: 'p',
      data: [

      ],
      max: 3,
    };

    const handleD = () => refLChooseDpD.value.open();
    const handleP = () => refLChooseDpP.value.open();

    const checkD = (data: any) => (dataD.value = data);
    const checkP = (data: any) => (dataP.value = data);

    return {
      refLChooseDpD,
      refLChooseDpP,
      dataD,
      dataP,
      configD,
      configP,
      checkD,
      checkP,
      handleD,
      handleP,
    };
  },
});
</script>

```

## Interface

```js
export interface IChooseDp {
  api: any;
  type: 'd' | 'p';
  data?: Array<any>;
  max?: number;
}
```

## API

Props

| 参数名 | 描述         | 类型             | 默认值 |
| ------ | ------------ | ---------------- | ------ |
| api    | 接口         | any              | -      |
| type   | 选择类型     | d: 部门, p: 员工 | -      |
| lable  | 自定义显示     | string | -      |
| data   | 默认数据     | Array<any>       | -      |
| max    | 最大选择数量 | number           | -      |
| strictlyVisible    | 级联关系是否显示 | number           | true      |
| checkStrictly    | 级联关系是否勾选 | number           | true      |
| resignVisible    | 离职人员是否显示 | number           | true      |
| resign    | 离职人员是否勾选 | number           | false      |

Events

| 事件名 | 描述     | 参数           |
| ------ | -------- | -------------- |
| check  | 选中的值 | (datas: any[]) |

Expose

| 事件名 | 描述         | 参数 |
| ------ | ------------ | ---- |
| open   | 主动触发打开 | -    |
npm package: @moment-design/choose-group-chat
Description: 选择社群组件
Author: lean
Latest version: 0.0.13

# 选择渠道组件

## 使用组件

`安装依赖`

```
npm install @moment-design/choose-group-chat --save
```

`使用组件`

```ts
<template>
  <l-content title="选择社群">
    <m-button type="primary" @click="open">选择社群</m-button>
    <l-choose-group-chat
      ref="refChooseGroupChat"
      :config="config"
      @handle:change="(v: any[]) => (list = v)"
    ></l-choose-group-chat>
    <div style="margin-top: 16px">已选数据：{{ list }}</div>
  </l-content>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { queryGroupChatList } from './api';

const list: any = ref([]);
const refChooseGroupChat = ref();
const config = {
  apis: {
    queryGroupChatList,
  },
};
const open = () => {
  refChooseGroupChat.value.open(list.value);
};
</script>
```

## API

Props

| 参数名 | 描述     | 类型      | 默认值 |
| ------ | -------- | --------- | ------ |
| apis   | 请求接口 | ApiConfig | -      |

ApiConfig

| 参数名             | 描述         | 类型 | 默认值 |
| ------------------ | ------------ | ---- | ------ |
| queryGroupChatList | 列表请求接口 | any  | -      |

Events

| 事件名        | 描述       | 参数           |
| ------------- | ---------- | -------------- |
| handle:change | 选中的数据 | (datas: any[]) |

Expose

| 事件名 | 描述             | 参数                     |
| ------ | ---------------- | ------------------------ |
| open   | 主动触发打开弹窗 | 默认数据：(datas: any[]) |
npm package: @moment-design/choose-permission-rule
Description: 选择权限规则（待选权限值、组织、用户）
Author: lean
Latest version: 0.0.5

# 选择部门/人员组件

## 使用组件

`安装依赖`

```
npm install @moment-design/choose-permission-rule --save
```

`使用组件`

```ts
<template>
  <template>
  <div style="margin-bottom: 16px">
    <m-space>
      <m-button type="primary" @click="handle">指定规则</m-button>
    </m-space>

    <!-- 已选数据 -->
    <div>
      <div style="margin-top: 16px">待选权限值数据（组织）：{{ depIds }}</div>
      <div style="margin-top: 16px">待选权限值数据（用户）：{{ userlds }}</div>
      <div style="margin-top: 16px">组织数据：{{ departmentList }}</div>
      <div style="margin-top: 16px">用户数据：{{ userList }}</div>
    </div>

    <!-- 指定规则 -->
    <ChoosePermissionRule
      ref="refChoosePermissionRule"
      :config="config"
      @check="check"
    ></ChoosePermissionRule>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ChoosePermissionRule from "@moment-design/choose-permission-rule";
import "@moment-design/choose-permission-rule/dist/css/index.css";
import { getPermissionList, getDepartmentList, getUserList } from './api';

export default defineComponent({
  name: 'LDemo',
  components: {
    ChoosePermissionRule,
  },
  props: {},
  setup() {
    const refChoosePermissionRule = ref();
    const depIds = ref<any>([]);
    const userlds = ref<any>([]);
    const departmentList = ref<any>([]);
    const userList = ref<any>([]);
    const config = {
      apis: {
        getPermissionList,
        getDepartmentList,
        getUserList,
      },
      depIds: [],
      userlds: [],
      departmentList: [],
      userList: [],
    };

    const handle = () => refChoosePermissionRule.value.open();

    const check = (depId: any, userld: any, departmentData: any, userData: any) => {
      depIds.value = depId;
      userlds.value = userld;
      departmentList.value = departmentData;
      userList.value = userData;
    };

    return {
      refChoosePermissionRule,
      departmentList,
      depIds,
      userlds,
      userList,
      config,
      check,
      handle,
    };
  },
});
</script>


```

## Interface

```js
export interface IChooseDp {
  api: any;
  data?: Array<any>;
}
```

## API

Props

| 参数名 | 描述         | 类型             | 默认值 |
| ------ | ------------ | ---------------- | ------ |
| api    | 接口         | any              | -      |

Events

| 事件名 | 描述     | 参数           |
| ------ | -------- | -------------- |
| check  | 选中的值 | (datas: any[]) |

Expose

| 事件名 | 描述         | 参数 |
| ------ | ------------ | ---- |
| open   | 主动触发打开 | -    |
npm package: @moment-design/choose-person
Description: 选择员工组件
Author: lean
Latest version: 0.0.7

# 选择员工组件

## 使用组件

`安装依赖`

```
npm install @moment-design/choose-person --save
```

`使用组件`

```ts

```

## API

Props

| 参数名                   | 描述         | 类型    | 默认值 |
| --------------------     | ------------ | ------- | ------ |
| api                      | 请求接口     | api     | -      |
| max                      | 最大可选数量 | number  | -      |
| searchUserStatusFlag     | 可选离职员工 | boolean | true   |
| searchWechatFlag         | 可选企微好友 | boolean | true   |
| allDisable               | 是否禁用所有操作 | boolean | false   |
| isDisabledUserStatusFlag | 是否禁用勾选离职按钮 | boolean | false   |

Events

| 事件名        | 描述       | 参数                                              |
| ------------- | ---------- | ------------------------------------------------- |
| handle:change | 选中的数据 | (checkedNodes: any[], ids: any[], userIds: any[]) |

Expose

| 事件名 | 描述             | 参数                            |
| ------ | ---------------- | ------------------------------- |
| init   | 主动触发打开弹窗 | 默认数据：(checkedNodes: any[]) |
npm package: @moment-design/choose-questionnaire
Description: 选择问卷组件
Author: lean
Latest version: 0.0.1

# 选择问卷组件

## 使用组件

`安装依赖`

```
npm install @moment-design/choose-questionnaire --save
```

`使用组件`

```ts
<template>
  <m-button type="primary" @click="open">选择问卷</m-button>
  <ChooseQuestionnaire
    ref="refChooseQuestionnaire"
    :config="config"
    @handle:change="(v: any[]) => (list = v)"
  ></ChooseQuestionnaire>
  <div style="margin-top: 16px">已选数据：{{ list }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChooseQuestionnaire from '../index.vue';
import { queryList } from './api';

const config = {
  apis: {
    // 列表接口
    queryList,
    // 自定义参数
    params: {},
  },
};
const list: any = ref([]);
const refChooseQuestionnaire = ref();
const open = () => {
  refChooseQuestionnaire.value.open(list.value);
};
</script>
```

## API

Props

| 参数名 | 描述     | 类型      | 默认值 |
| ------ | -------- | --------- | ------ |
| apis   | 请求接口 | ApiConfig | -      |

ApiConfig

| 参数名    | 描述         | 类型 | 默认值 |
| --------- | ------------ | ---- | ------ |
| queryList | 列表请求接口 | any  | -      |
| params    | 自定义参数   | any  | -      |

Events

| 事件名        | 描述       | 参数           |
| ------------- | ---------- | -------------- |
| handle:change | 选中的数据 | (datas: any[]) |

Expose

| 事件名 | 描述             | 参数                     |
| ------ | ---------------- | ------------------------ |
| open   | 主动触发打开弹窗 | 默认数据：(datas: any[]) |
npm package: @moment-design/choose-radar-material
Description: 选择雷达素材组件
Author: lean
Latest version: 0.0.2

# 选择雷达素材组件

## 使用组件

`安装依赖`

```
npm install @moment-design/choose-radar-material --save
```

`使用组件`

```vue
<template>
  <!-- 按钮 -->
  <m-space>
    <m-button type="primary" @click="open">选择雷达素材</m-button>
  </m-space>
  <!-- 组件 -->
  <ChooseRadarMaterial
    ref="refChooseRadarMaterial"
    :config="config"
    @choose="(v) => (data = v)"
  ></ChooseRadarMaterial>
  <!-- 数据 -->
  <div style="margin-top: 16px">
    已选数据:
    {{ data }}
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChooseRadarMaterial from '@moment-design/choose-radar-material';
import '@moment-design/choose-radar-material/dist/css/index.css';
import { queryGroup, queryList } from './api';

const refChooseRadarMaterial = ref();
const config = {
  title: '选择雷达素材',
  apis: {
    queryList,
    queryGroup,
  },
  params: {},
};
const data = ref();
const open = () => {
  refChooseRadarMaterial.value.open(data.value);
};
</script>
```

## API

Props

| 参数名 | 描述             | 类型                          | 默认值       |
| ------ | ---------------- | ----------------------------- | ------------ |
| title  | 弹出框标题       | string                        | 选择雷达素材 |
| apis   | 请求接口         | Object<queryList, queryGroup> | {}           |
| params | 扩展列表接口参数 | Object                        | -            |

Events

| 事件名 | 描述       | 参数           |
| ------ | ---------- | -------------- |
| choose | 选中的数据 | (datas: any[]) |

Expose

| 事件名 | 描述               | 参数                     |
| ------ | ------------------ | ------------------------ |
| open   | 主动触发打开弹出框 | 默认数据：(datas: any[]) |
npm package: @moment-design/choose-red-packet
Description: 选择红包模版组件
Author: lean
Latest version: 0.0.4

# 选择红包模版组件

## 使用组件

`安装依赖`

```
npm install @moment-design/choose-red-packet --save
```

`使用组件`

```ts
<template>
  <!-- 按钮 -->
  <m-space>
    <m-button type="primary" @click="open">选择红包模版</m-button>
  </m-space>
  <!-- 组件 -->
  <ChooseRedPacket
    ref="refChooseRedPacket"
    :config="config"
    @choose="(v) => (data = v)"
  ></ChooseRedPacket>
  <!-- 数据 -->
  <div style="margin-top: 16px">
    已选数据:
    {{ data }}
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChooseRedPacket from '@moment-design/choose-red-packet';
import "@moment-design/choose-red-packet/dist/css/index.css";
import "@moment-design/choose-red-packet/dist/css/index.css";
import { getList } from './api';

const refChooseRedPacket = ref();
const config = {
  api: getList,
  params: {
    enable: 1,
    usageScenarios: 0,
  },
};
const data = ref();
const open = () => {
  refChooseRedPacket.value.open(data.value);
};
</script>
```

## API

Props

| 参数名 | 描述         | 类型 | 默认值 |
| ------ | ------------ | ---- | ------ |
| api    | 列表请求接口 | any  | -      |
| params | 扩展接口参数 | any  | -      |

Events

| 事件名 | 描述       | 参数                  |
| ------ | ---------- | --------------------- |
| choose | 选中的数据 | (v: any[], item: any) |

Expose

| 事件名 | 描述             | 参数                     |
| ------ | ---------------- | ------------------------ |
| open   | 主动触发打开弹窗 | 默认数据：(datas: any[]) |
npm package: @moment-design/choose-tag
Description: 选择标签组件
Author: lean
Latest version: 0.0.23

# 选择标签组件

## 使用组件

`安装依赖`

```
npm install @moment-design/choose-tag --save
```

`使用组件`

```vue
<template>
  <m-button type="primary" @click="refChooseTag.open()"> 选择标签 </m-button>
  <div style="margin-top: 16px">已选数据：{{ config.data }}</div>
  <!-- 选择标签组件 -->
  <ChooseTag
    ref="refChooseTag"
    :config="config"
    @change="(v: any) => (v?.length && (config.data = v))"
  ></ChooseTag>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import ChooseTag from '../index.vue';

const refChooseTag = ref();
const config: any = reactive({
  add: true,
  max: 3,
  tags: [
    { label: '社群标签', value: 2 },
    { label: '自动标签', value: 5 },
    { label: '企微标签', value: 6 },
  ],
  apis: {
    // 数结构接口
    // querylabelType,
    // 点击树获取详情接口
    // queryLabelList,
    // 左侧搜索功能接口
    // queryTreeLabelInfo,
    // 新增标签接口
    // addLabel,
  },
  data: [],
});
</script>
```

## API

Props

| 参数名 | 描述                 | 类型                                       | 默认值 |
| ------ | -------------------- | ------------------------------------------ | ------ |
| add    | 是否可添加标签       | boolean                                    | false  |
| max    | 最大可选数量         | number                                     | -      |
| tags   | 顶部一级标签显示配置 | any[{label: string, value: string,number}] | []     |
| apis   | 数据接口             | apisConfig                                 | {}     |

apisConfig

| 参数名             | 描述               | 类型 | 默认值 |
| ------------------ | ------------------ | ---- | ------ |
| querylabelType     | 数结构接口         | any  | -      |
| queryLabelList     | 点击树获取详情接口 | any  | -      |
| queryTreeLabelInfo | 左侧搜索功能接口   | any  | -      |
| addLabel           | 新增标签接口       | any  | -      |

Events

| 事件名 | 描述     | 参数           |
| ------ | -------- | -------------- |
| change | 已选数据 | (datas: any[]) |

Expose

| 事件名 | 描述             | 参数              |
| ------ | ---------------- | ----------------- |
| open   | 主动触发打开弹窗 | datas[](默认数据) |
npm package: @moment-design/condition-group
Description: 条件配置组件（行为）
Author: lean
Latest version: 0.0.20

# 条件配置组件（行为）

## 使用组件

`安装依赖`

```
npm install @moment-design/condition-group --save
```

`使用组件`

## API
```
Props

| 参数                  | 说明                                                    | 类型     | 可选值                                       | 默认值 |
| --------------------- | ------------------------------------------------------- | -------- | -------------------------------------------- | ------ |
| type                  | 业务场景类型                                            | Number   | 1 会员自定义 /2 会员分组 /3 标签 /4 会员阶段 | 3      |
| showCalculateBtn      | 是否显示计算分组人数按钮                                | Boolean  | -                                            | true   |
| v-model               | 条件绑定值                                              | Object   | -                                            | { }    |
| getCategoryFunc       | 获取条件分类数据的异步方法,需返回 promises 实例         | Function | -                                            | -      |
| getFieldOptionFunc    | 获取当前分类下拉列表数据的异步方法,需返回 promises 实例 | Function | -                                            | -      |
| queryGroupCount       | 计算当前条件下分组分数的异步方法,需返回 promises 实例   | Function | -                                            | -      |
| getAccountUserList    | 获取所有员工数据的异步方法,需返回 promises 实例         | Function | -                                            | -      |
| getActivityList       | 获取活动数据的异步方法,需返回 promises 实例             | Function | -                                            | -      |
| getWcMaterialList     | 获取素材数据的异步方法,需返回 promises 实例             | Function | -                                            | -      |
| getCourseList         | 获取课程数据的异步方法,需返回 promises 实例             | Function | -                                            | -      |
| getFindTree           | 获取课程分类的异步方法,需返回 promises 实例             | Function | -                                            | -      |
| getLabelSelect        | 获取标签数据的异步方法,需返回 promises 实例             | Function | -                                            | -      |
| getGoodsCate          | 获取商品分类数据的异步方法,需返回 promises 实例         | Function | -                                            | -      |
| getGoodsList          | 获取商品列表数据的异步方法,需返回 promises 实例         | Function | -                                            | -      |
| businessCloudUrl      | 商业云地址，用于添加商品跳转                            | String   | -                                            | -      |
| customQueryGroupCount | 自定义点击计算按钮后调用的方法,需返回结果人数           | Function | -                                            | -      |
| thirdStoreAuth | 是否有多门店权益       | Boolean | -                               | false      |

Methods

| 方法名称       | 说明                                              | 参数 |
| -------------- | ------------------------------------------------- | ---- |
| getCateOption  | 初始化时获取所有分类用于渲染组件                  | -    |
| emptyCheck     | 空校验,需要用.then获取结果                                            | -    |
| screenRuleInit | 返回 v-model 绑定值转化后的请求参数，用于提交请求 | -    |
| closeAllItem   | 收起所有展开项                                    | -    |
```
npm package: @moment-design/crop-image
Description: 裁剪图片组件
Author: lean
Latest version: 0.0.2

# 裁剪图片组件

## 使用组件

`安装依赖`

```
npm install @moment-design/crop-image --save
```

`使用组件`

```ts
<template>
  <m-button type="primary" @click="refLAdvancedCropper.open()">
    触发裁剪弹窗
  </m-button>
  <CropImage
    ref="refLAdvancedCropper"
    img="https://preapiconsole.71360.com/w3/w475wn/20250116/967e3e343193b65f7108432f73e8e5a1.png"
    :others="{ stencilProps: { aspectRatio: 1 / 1 } }"
    @handle:ok="handleOk"
  ></CropImage>
  <div style="margin-top: 16px">Base64 length: {{ v1?.length }}</div>
  <div style="margin-top: 16px">Blob size: {{ v2?.size }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CropImage from '@moment-design/crop-image';

const v1 = ref();
const v2 = ref();

const refLAdvancedCropper = ref();
const handleOk = (canvas: any) => {
  if (canvas) {
    // base64
    const base64 = canvas.toDataURL();
    v1.value = base64;
    // blob
    canvas.toBlob((blob: any) => {
      v2.value = blob;
    });
    // do uload v1 or v2 ...
  }
};
</script>

```

## API

Props

| 参数名 | 描述                                        | 类型   | 默认值     |
| ------ | ------------------------------------------- | ------ | ---------- |
| img    | 需要裁剪的图片地址                          | string | ''         |
| title  | 裁剪弹窗的标题                              | string | '裁剪图片' |
| others | vue-advanced-cropper 官方配置（详见下链接） | Object | -          |

> https://advanced-cropper.github.io/vue-advanced-cropper/introduction/getting-started.html

Events

| 事件名    | 描述                               | 参数     |
| --------- | ---------------------------------- | -------- |
| handle:ok | 裁剪后的 canvas 对象，用于后续操作 | (canvas) |

Expose

| 事件名 | 描述             | 参数 |
| ------ | ---------------- | ---- |
| open   | 主动触发打开弹窗 | -    |
npm package: @moment-design/emoji
Description: emoji选择组件（emoji同微信一直），png方式，同步输出 wx emoji（[撇嘴]）
Author: xw
Latest version: 0.1.6

## 使用组件

`安装依赖`

```
npm install @moment-design/emoji --save
```

`使用组件`

```
import MEmoji from '@moment-design/emoji';
import "@moment-design/emoji/dist/css/index.css";

<m-emoji @choose="chooseItem">
  <div class="demo">
    <img src="./emoji.png" class="emoji-icon" alt="" />
    表情
  </div>
</m-emoji>
```

## API

Events

| 事件名 | 描述 | 参数                            |
| ------ | ---- | ------------------------------- |
| choose | 选择 | (url: string, wxSymbol: string) |

Slots
| 插槽名 | 描述 |
| ----------- | ----------- |
| default | 默认插槽 |

Props `config`

| 参数名        | 描述             | 类型    | 默认值 |
| ------------- | ---------------- | ------- | ------ |
| trigger       | 触发方式         | string  | click  |
| closeOnChoose | 选择完成是否关闭 | boolean | false  |
npm package: @moment-design/hotspot
Description: | Prop Name       | Description                  | Type      | Default | Require | | :-------------- | :--------------------------- | :-------- | :------ | :------ | | parent          | 定义组件是否限制在父元素内   | `Boolean` | false   | ✗       | | isConflictCheck |
Latest version: 0.0.2

## 参数解释

| Prop Name       | Description                  | Type      | Default | Require |
| :-------------- | :--------------------------- | :-------- | :------ | :------ |
| parent          | 定义组件是否限制在父元素内   | `Boolean` | false   | ✗       |
| isConflictCheck | 定义组件是否开启冲突检测     | `Boolean` | false   | ✗       |
| snap            | 定义组件是否开启元素对齐吸附 | `Boolean` | false   | ✗       |
| snapTolerance   | 定义组件吸附的距离           | `Number`  | false   | ✗       |
| showBadge       | 定义组件是否显示左上角序号   | `Boolean` | false   | ✗       |


## 数据解释


| Item Key | Description                  | Type             | Default | Require |
| :------- | :--------------------------- | :--------------- | :------ | :------ |
| x        | 元素的横坐标                 | `Number`         | 0       | ✗       |
| y        | 元素的纵坐标                 | `Number`         | 0       | ✗       |
| w        | 元素的宽度                   | `Number｜String` | 200     | ✗       |
| h        | 元素的高度                   | `Number｜String` | 200     | ✗       |
| z        | 元素的垂直层级               | `Number｜String` | auto    | ✗       |
| class    | 元素的自定义 Class           | `String`         | ''      | ✗       |
| disabled | 元素是否被禁止拖拽和调整尺寸 | `Boolean`        | false   | ✗       |
npm package: @moment-design/label-list
Description: 标签组合
Author: cqq
Latest version: 0.0.2

## 使用组件

`安装依赖`

```
npm install @moment-design/label-list --save
```

`使用组件`

```
import labelList from '@moment-design/label-list';

<label-list :list="[]"></label-list>
```

## API

Events

Props `config`

| 参数名  | 描述     | 类型   | 默认值 |
| ------- | -------- | ------ | ------ |
| list | 标签集合 | Array\<{ labelName: string; labelType: number ; }>  | []  |
| numbers | 总数大于个数显示+x | number  | 3 |
| isGroupLabel | 是否为群标签 | boolean  | false |
| field-names | 自定义标签中字段名 | any  | {labelName: "labelName",labelType: "labelType",} |
npm package: @moment-design/material-library
Description: 素材库组件
Author: lean
Latest version: 0.1.21

# 素材库组件

## 使用组件

`安装依赖`

```
npm install @moment-design/material-library --save
```

`使用组件`

```ts
import MaterialLibrary from "@moment-design/material-library"

<MaterialLibrary
  ref="refLMaterialLibrary"
  :config="config"
  @choose="(v) => (chooseDatas = v)"
></MaterialLibrary>
```

## API

Props

| 参数名         | 描述                         | 类型                          | 默认值                          |
| -------------- | ---------------------------- | ----------------------------- | ------------------------------- |
| fileType       | 素材类型限制                 | number                        | 1[图片],2[文档],3[视频],4[音乐] |
| max            | 素材最大数量                 | number                        | 10                              |
| dialog         | 列表、弹窗样式               | DialogConfig                  | {}                              |
| scroll         | 左侧分组、右侧内容滚动条高度 | ScrollConfig                  | {}                              |
| apis           | 素材库相关接口               | ApisConfig                    | {}                              |
| customValidate | 自定义校验函数               | (datas) => (true 或 报错信息) | -                               |

DialogConfig

| 参数名  | 描述                        | 类型    | 默认值   |
| ------- | --------------------------- | ------- | -------- |
| title   | 弹窗标题                    | string  | 选择素材 |
| visible | 列表(false)、弹窗(true)样式 | boolean | false    |
| width   | 弹出框宽度                  | number  | 1160     |

ScrollConfig

| 参数名 | 描述               | 类型   | 默认值  |
| ------ | ------------------ | ------ | ------- |
| left   | 左侧分组滚动条高度 | string | '430px' |
| right  | 右侧内容滚动条高度 | string | '430px' |

ApisConfig

| 参数名       | 描述               | 类型 | 默认值 |
| ------------ | ------------------ | ---- | ------ |
| getGroupList | 获取分组列表       | api  | -      |
| postGroup    | 新增、编辑分组     | api  | -      |
| deleteGroup  | 删除分组           | api  | -      |
| getFileList  | 获取分组下素材列表 | api  | -      |
| deleteFile   | 删除分组下的素材   | api  | -      |
| moveFile     | 移动分组           | api  | -      |
| uploadFile   | 上传素材           | api  | -      |

Events

| 事件名 | 描述       | 参数           |
| ------ | ---------- | -------------- |
| choose | 选中的素材 | (datas: any[]) |

Expose

| 事件名 | 描述                   | 参数 |
| ------ | ---------------------- | ---- |
| open   | 主动触发打开选择素材库 | -    |

## 示例数据

```js
const config = {
  dialog: {
    visible: false,
    title: '选择素材',
    width: 1160,
  },
  scroll: {
    left: '560px',
    right: '560px',
  },
  fileType: 1,
  apis: useMaterialApis(),
};

const useMaterialApis = {
  getGroupList,
  postGroup,
  deleteGroup,
  getFileList,
  deleteFile,
  moveFile,
  uploadFile,
};
```

## Interface

```js
export interface IMaterialLibrary {
  dialog: {
    visible: boolean,
    title?: string,
    width?: number,
  };
  scroll?: {
    left?: string,
    right?: string,
  };
  fileType?: 1 | 2 | 3 | 4;
  apis: {
    getGroupList: any,
    postGroup: any,
    deleteGroup: any,
    getFileList: any,
    deleteFile: any,
    moveFile: any,
    uploadFile: any,
  };
}
```
npm package: @moment-design/message-editor
Description: 短信编辑器
Author: lean
Latest version: 0.0.5

# 短信编辑器

## 使用组件

`安装依赖`

```
npm install @moment-design/message-editor --save
```

`使用组件`

```ts
<template>
  <MessageEditor ref="refMessageEditor" @change="change">
    <!-- 左侧短链插槽 -->
    <template #link>
      <m-space>
        <div
          @click="
            handleInsertImage(
              'https://tservice.71360.com/download/scrm/emoji/0.png'
            )
          "
        >
          插入图片
        </div>
        <div @click="handleInsertCanvas('小程序链接')">小程序链接</div>
        <div @click="handleInsertCanvas('AI智能助手')">AI智能助手</div>
      </m-space>
    </template>
    <!-- 右侧标签插槽 -->
    <template #tag>
      <m-space>
        <div @click="handleInsertCanvas('Tag1')">#Tag1#</div>
        <div @click="handleInsertCanvas('Tag2')">#Tag2#</div>
        <div @click="handleInsertCanvas('Tag3')">#Tag3#</div>
      </m-space>
    </template>
  </MessageEditor>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MessageEditor from '../index.vue';

const refMessageEditor = ref();

const handleInsertImage = (name: string) => {
  refMessageEditor.value.insertImage(name, { 'data-custom': 'custom' }, 4);
};

const handleInsertCanvas = (name: string) => {
  refMessageEditor.value.insertCanvas(name, { 'data-custom': 'custom' });
};

const change = (data: any) => {
  console.log(data);
};
</script>
```

## API

| 名称 | 描述       | 参数 |
| ---- | ---------- | ---- |
| max  | 最大字符数 | -    |
| html | 默认值     | -    |

Expose

| 事件名       | 描述        | 参数                                                               |
| ------------ | ----------- | ------------------------------------------------------------------ |
| insertImage  | 插入图片    | url: 图片地址, data: 属性值, length: 代表字符长度（默认 url 长度） |
| insertCanvas | 插入 canvas | name: 显示名称, data: 属性值                                       |
npm package: @moment-design/mo-vue-scripts
Description: Mo Vue Scripts
Author: Moment Design Team
Latest version: 1.0.1

# Mo Vue Scripts

A collection of commands used in the Moment Design Vue component library

## Installation

```
npm install @moment-design/mo-vue-scripts --registry="http://121.46.196.20:4873/"
```

## Commands

Run `mo-vue-scripts --help` to see all available commands and options.

+ `mo-vue-scripts docgen`: generate document of component.
+ `mo-vue-scripts icongen`: generate icon components.
+ `mo-vue-scripts lessgen`: generate index less file.
+ `mo-vue-scripts dtsgen`: emit .d.ts files for vue files.
+ `mo-vue-scripts dev:component`: build components with watch mode.
+ `mo-vue-scripts dev:site`: start vite server for development.
+ `mo-vue-scripts build:component`: build production files.
+ `mo-vue-scripts build:style`: build style related files.
+ `mo-vue-scripts build:site`: build document site.
+ `mo-vue-scripts build:material`: build vue material.
+ `mo-vue-scripts test`: run test for component or material.
+ `mo-vue-scripts changelog`: Obtain and organize changelog information through the git repository.
npm package: @moment-design/permissions-allocate
Description: | Prop Name       | Description                  | Type      | Default | Require | | :-------------- | :--------------------------- | :-------- | :------ | :------ | | config          | 定义组件中所有权限数据         | `Object`  |  PERMISSIONS | √     | | index     
Latest version: 0.1.0

## 参数解释

| Prop Name       | Description                  | Type      | Default | Require |
| :-------------- | :--------------------------- | :-------- | :------ | :------ |
| config          | 定义组件中所有权限数据         | `Object`  |  PERMISSIONS | √     |
| index           | 定义组件中当前选中的序号       | `Number`   | 0            | √        |
| menus           | 定义组件中循环 一级权限数据    | `Object`   | PERMISSIONS   | √        |
| disable         | 定义组件中CheckBox是否禁用    | `Boolean`  | false       | ✗       |
| checked         | 定义组件是否显示左上角序号     | `Array[id]` |  []       | ✗       |


## 数据解释
### PERMISSIONS
| Item Key | Description                  | Type             | Default | Require |
| :------- | :--------------------------- | :--------------- | :------ | :------ |
| id       | 权限数据的唯一值               | `Number｜String` | 1       | √       |
| icon     | 权限一级中渲染图标             | `Number｜String` | ''       | ✗    |
| name     | 权限的名称                    | `String`          | ''     | ✗       |
| child    | 下一级权限数据                | `PERMISSIONS`    | {}     | √       |
npm package: @moment-design/product-navigation
Latest version: 0.1.1

# Moment Design 物料项目 全部产品导航


## zh-CN
## 运行环境

| 名称 | 版本号  |
| ----------- | ----------- |
| Node.js | 15+  |
| NPM | 7+ |
| Vue.js | 3+ |
| @moment-design/web-vue | 1+ |

## 使用组件

`安装依赖`
``` bash
npm install @moment-design/product-navigation --save
```

`使用组件`

`*.vue` 局部注册
``` vue
import MProductNav from "@moment-design/product-navigation"
import "@moment-design/product-navigation/dist/css/index.css"

<m-product-nav :menu-data="MenuData"></m-product-nav>
```

## API

### Props

| Prop Name       | Description                  | Type      | Default | Require |
| :-------------- | :--------------------------- | :-------- | :------ | :------ |
| menu-data          | 导航数据         | `Object`  |  `Array[GroupMenu]` | √     |


### GroupMenu

| 参数名   | 描述                         | 类型             | 默认值 | 必须 |
| :------- | :--------------------------- | :--------------- | :------ | :------ |
| Title       | 名称               | `String` |        | √       |
| Child     | Child             | `Array[MenuData]` |        | ✗    |
| Menu     | Menu                    | `Array[MenuData]`          |      | ✗       |

### MenuData

| 参数名   | 描述                         | 类型             | 默认值 | 必须 |
| :------- | :--------------------------- | :--------------- | :------ | :------ |
| Id       | 权限数据的唯一值               | `Number` |        | √       |
| Title     | 名称             | `String` |        | √    |
| ICon     | 图标                    | `String`          |      | √       |
| Url    | 链接地址                | `String`    |      | √       |
| IsCurrentPageOpen    | IsCurrentPageOpen                | `Boolean`    | `false`     | √       |
| Buy    | Buy                | `Boolean`    |  `false`    | √       |
| Menu     | Menu                    | `Array[MenuData]`          |      | ✗       |
npm package: @moment-design/promotion-code
Description: 推广码组件
Author: lean
Latest version: 0.0.9

# 推广码组件

## 使用组件

`安装依赖`

```
npm install @moment-design/premotion-code --save
```

`使用组件`

```ts
<template>
  <m-button type="primary" @click="open">打开推广码</m-button>
  <PromotionCode ref="refPromotionCode"></PromotionCode>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PromotionCode from '../index.vue';

const refPromotionCode = ref();
const open = () => {
  refPromotionCode.value.open({
    // 二维码图片地址
    qrcode: '',
    // 弹窗标题文案
    title: '推广码',
    // 推广二维码文案
    codeText: '推广二维码',
    // 确认按钮文案
    confirmText: '下载二维码',
    // 推广链接文案
    linkText: '推广链接',
    // 推广链接
    link: 'https://pres.71360.com/vvZj3a',
  });
};
</script>
```

## API

Expose

| 事件名 | 描述           | 参数       |
| ------ | -------------- | ---------- |
| open   | 打开推广码组件 | OpenConfig |

OpenConfig

| 参数名      | 描述             | 类型    | 默认值       |
| ----------- | ---------------- | ------- | ------------ |
| baseUrl     | 下载接口地址前缀 | string  | -            |
| qrcode      | 二维码图片地址   | string  | -            |
| qrcodeText  | 二维码文本       | string  | -            |
| title       | 弹窗标题文案     | string  | '推广码'     |
| codeText    | 推广二维码文案   | string  | '推广二维码' |
| confirmText | 确认按钮文案     | string  | '下载二维码' |
| linkText    | 推广链接文案     | string  | '推广链接'   |
| link        | 推广链接         | string  | -            |
| copy        | 是否可复制       | boolean | true         |

Slot

| 名称   | 描述         | 参数 |
| ------ | ------------ | ---- |
| more   | 扩展展示信息 | -    |
| button | 扩展底部按钮 | -    |