UNI-UI

安装

npm install @utoolkits/im-sdk
npm install @utoolkits/ui
// 或
npm install @utoolkits/im-sdk
yarn add @utoolkits/ui

完整引入

import UNUI from "@utoolkits/ui";
import "@utoolkits/ui/dist/style.css";

按需引入

import { ChatList, MessageReviewList } from "@utoolkits/ui";
import "@utoolkits/ui/dist/style.css";

组件列表

IM 组件

import { ref } from "vue";
import { ChatList, MessageReviewList } from "@utoolkits/ui";
import "@utoolkits/ui/dist/style.css";
// 接收 im 实例
let env = "test";
let token =
  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0aW1lIjoxNjgzNjc5MDkyMjA0LCJleHAiOjg2NDAxNjgzNTkyNjkyLCJ1c2VySWQiOjZ9.jcL-OX5M85m8gOCBDjQzz4UsIz5lHRGPSiRGr4YNAPE";
let liveRoomId = "1";
let imInstance = ref(null);
const onIMInstanceInitialized = (im) => {
  imInstance.value = im;
};
const members = ref([]);
const onJoin = (res) => {
  members.value.push(res);
};
const onExit = (res) => {
  const index = members.value.findIndex((item) => item.userId === res.userId);
  if (index > -1) {
    members.value.splice(index, 1);
  }
};

<div class="container">
  <div class="item">
    <ChatList
      :token="token"
      :env="env"
      :liveRoomId="liveRoomId"
      @im-instance-initialized="onIMInstanceInitialized"
      @exit="onExit"
      @join="onJoin"
    ></ChatList>
  </div>
  <div class="item">
    <MessageReviewList
      :imInstance="imInstance"
      :liveRoomId="liveRoomId"
    ></MessageReviewList>
  </div>
</div>

属性

| 属性 | 描述 | 默认值 | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | | env | 环境变量(必填) | - | | token | 凭证(必填) | - | | liveRoomId | 房间 ID(必填) | - | | chatroomNick | 聊天室昵称 | - | | chatroomAvatar | 聊天室头像 | - | | ext | 接收一个对象，扩展消息。 目前角色：(1, "用户"),(2, "助教老师"),(3, "讲师"); 比如现在是助教 { speechRole: 2 } | {} | | isRealUser | 只展示真实用户传 true, 默认为 false，显示全部消息 | false | | channleIds | 只展示指定的渠道，渠道 ID 数组 | [] | | filterFn | 如果上面 isRealUser，channleIds 不能满足时，可以通过过滤器函数。注意的是每次过滤条件变化，filterFn 必须是一个新的函数值，否则不会触发过滤 | filterFn = () => true; | | theme | light、dark | light | | size | small、medium | medium |

事件

| 名称 | 描述 | | ----------------------- | ------------- | | im-instance-initialized | im 实例化完成 | | join | 进入聊天室 | | exit | 退出聊天室 | | liveStart | 直播开始 | | liveEnd | 直播结束 |

审核列表组件

let messageReviewListRef = ref(null);
// 删除top10
const onDeleteTop = () => {
  messageReviewListRef.value.deleteTopMessages(10);
};

<el-button @click="onDeleteTop">删除前10条</el-button>
<MessageReviewList
  ref="messageReviewListRef"
  :imInstance="imInstance"
  :liveRoomId="liveRoomId"
></MessageReviewList>

属性

| 属性 | 描述 | 默认值 | | ---------- | ---------------- | ------ | | imInstance | im 实例(必填) | - | | liveRoomId | 房间 ID(必填) | - | | isActivate | 当前展示审核列表 | false |

方法

| 方法 | 描述 | 默认值 | | ----------------------------- | ---------------- | ------ | | deleteTopMessages(pos:number) | 删除前多少条消息 | - |

在线用户列表

import { OnlineAudienceList } from "@utoolkits/ui";

<OnlineAudienceList
  ref="onlineAudienceListRef"
  :imInstance="imInstance"
  :liveRoomId="liveRoomId"
  show-detail-btn
></OnlineAudienceList>

属性

| 属性 | 描述 | 默认值 | | ------------- | ------------------------------------------------ | --------- | | imInstance | im 实例(必填) | - | | liveRoomId | 房间 ID(必填) | - | | showDetailBtn | 展示详情按钮 | false | | input | 搜索过滤条件 | "" | | channleIds | 渠道数组 | [] | | filterFn | 自定义过滤函数，当希望支持更细过滤时可以考虑使用 | ()=> true | | theme | light、dark | light | | size | small、medium | medium |

方法

| 名称 | 描述 | 默认值 | | ----- | ---- | ------ | | query | 查询 | - |

事件

| 名称 | 描述 | 默认值 | | ------------- | ------ | ------ | | total(number) | 在线数 | - |

在线助教列表

import { OnlineAssistantList } from "@utoolkits/ui";

<OnlineAssistantList
  ref="onlineAssistantListRef"
  :env="env"
  :token="token"
  :imInstance="imInstance"
  :liveRoomId="liveRoomId"
  show-detail-btn
></OnlineAssistantList>

属性

| 属性 | 描述 | 默认值 | | ------------- | ------------------------------------------------ | --------- | | env | 环境变量(必填) | - | | token | 凭证(必填) | - | | imInstance | im 实例(必填) | - | | liveRoomId | 房间 ID(必填) | - | | showDetailBtn | 展示详情按钮 | false | | input | 搜索过滤条件 | "" | | channleIds | 渠道数组过滤 | [] | | filterFn | 自定义过滤函数，当希望支持更细过滤时可以考虑使用 | ()=> true | | theme | light、dark | light | | size | small、medium | medium |

方法

| 名称 | 描述 | 默认值 | | ----- | ---- | ------ | | query | 查询 | - |

事件

| 名称 | 描述 | 默认值 | | ------------- | ------ | ------ | | total(number) | 在线数 | - |

表格组件

属性

| 属性 | 描述 | 默认值 | | --------- | -------------- | --------------------- | | loadData | 请求数据方法 | 需要传入 Promise 对象 | | colums | 表格列 | - | | selection | 显示多选框 | false | | showIndex | 显示列表索引 | false | | size | 每页展示多少条 | 10 |

方法

| 方法 | 描述 | 默认值 | | ---------------- | ---------------- | ------ | | getSelectionRows | 返回当前选中的行 | - | | clearSelection | 清空用户的选择 | - |

事件

| 事件 | 描述 | 默认值 | | ---------------- | ------------------------------ | ------ | | selection-change | 当选择项发生变化时会触发该事件 | - |

案例

<div class="container">
  <el-form :inline="true">
    <el-form-item label="姓名">
      <el-input v-model="input"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="onSerach" :loading="isLoading">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button @click="onSelectionRow">获取选中行</el-button>
      <el-button @click="onClean">清空选中行</el-button>
    </el-form-item>
  </el-form>
</div>
<table
  ref="tableRef"
  :loadData="loadData"
  :colums="colums"
  selection
  showIndex
  @selection-change="onSelectionChange"
></table>

import { computed } from "vue";
import { VTable } from "@utoolkits/ui";

const input = ref("");
function getData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        current: 1,
        records: [
          {
            id: 1,
            name: "抖音直播运营变现",
            time: "2020-12-12 12:12:12",
            status: false,
          },
          {
            id: 2,
            name: "3抖音直播运营变现",
            time: "2020-12-12 12:12:12",
            status: false,
          },
          {
            id: 3,
            name: "2抖音直播运营变现",
            time: "2020-12-12 12:12:12",
            status: true,
          },
          {
            id: 4,
            name: "1抖音直播运营变现",
            time: "2020-12-12 12:12:12",
            status: true,
          },
          {
            id: 2,
            name: "课程名称",
            time: "2020-12-12 12:12:12",
            status: false,
          },
          {
            id: 3,
            name: "课程名称",
            time: "2020-12-12 12:12:12",
            status: true,
          },
          {
            id: 4,
            name: "课程名称",
            time: "2020-12-12 12:12:12",
            status: false,
          },
        ],
        total: 100,
      });
    }, 3000);
  });
}
const colums = [
  {
    label: "ID",
    prop: "id",
  },
  {
    label: "姓名",
    prop: "name",
  },
  {
    label: "时间",
    prop: "time",
  },
  {
    label: "状态",
    prop: "status",
  },
];
const loadData = async (parameter) => {
  return getData({
    ...parameter,
    name: input.value,
  });
};
const tableRef = ref(null);
const isLoading = computed(() => tableRef.value?.isLoading);
const onSerach = () => {
  tableRef.value.query();
};
const onSelectionRow = () => {
  console.log(tableRef.value.getSelectionRows());
};
const onClean = () => {
  tableRef.value.clearSelection();
};
const onSelectionChange = (selection) => {
  console.log(selection);
};