@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.2

package/src/TUIRoom/components/Chat/ChatKit/components/TUIGroup/create-group/index.vue

@@ -0,0 +1,297 @@
+<template>
+  <Dialog
+    :show="true"
+    :isH5="!isPC"
+    :isHeaderShow="false"
+    :isFooterShow="false"
+    :background="false"
+    @update:show="closeCreated"
+  >
+    <div
+      class="group"
+      :class="[!isPC ? 'group-h5' : '']"
+    >
+      <div class="group-box">
+        <header class="group-box-header">
+          <Icon
+            :file="isPC ? closeIcon : backIcon"
+            class="icon-close"
+            size="16px"
+            @onClick="closeCreated"
+          />
+          <h1 class="group-box-header-title">
+            {{ headerTitle }}
+          </h1>
+        </header>
+        <ul
+          v-if="!groupInfo.isEdit"
+          class="group-list"
+        >
+          <li class="group-list-item">
+            <label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群头像') }}</label>
+            <Avatar :url="groupInfo.profile.avatar" />
+          </li>
+          <ul>
+            <li
+              v-for="(item, index) in createInfo"
+              :key="index"
+              class="group-list-item"
+            >
+              <label class="group-list-item-label">{{ item.name }}</label>
+              <input
+                v-if="isPC"
+                v-model="groupInfo.profile[item.key]"
+                type="text"
+                :placeholder="item.placeholder"
+              >
+              <span
+                v-else
+                class="group-h5-list-item-content"
+                @click="edit(item.key)"
+              >
+                <p class="content">{{ groupInfo.profile[item.key] }}</p>
+                <Icon :file="rightIcon" />
+              </span>
+            </li>
+            <li class="group-list-introduction">
+              <div class="group-list-item">
+                <label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群类型') }}</label>
+                <GroupIntroduction
+                  v-if="isPC"
+                  :groupType="groupInfo.profile.type"
+                  @selectType="selected"
+                />
+                <span
+                  v-else
+                  class="group-h5-list-item-content"
+                  @click="edit('type')"
+                >
+                  <p class="content">{{ groupTypeDetail.label }}</p>
+                  <Icon :file="rightIcon" />
+                </span>
+              </div>
+              <article
+                v-if="!isPC"
+                class="group-h5-list-item-introduction"
+              >
+                <label class="introduction-name">{{ groupTypeDetail.label }}：</label>
+                <span class="introduction-detail">{{ groupTypeDetail.detail }}</span>
+                <a
+                  :href="documentLink.product.url"
+                  target="view_window"
+                >
+                  {{ TUITranslateService.t(`TUIGroup.${groupTypeDetail.src}`) }}
+                </a>
+              </article>
+            </li>
+          </ul>
+        </ul>
+        <!-- Edit Group Name -->
+        <div
+          v-else
+          class="group-list group-list-edit"
+        >
+          <input
+            v-if="groupInfo.groupConfig.type === 'input'"
+            v-model="groupInfo.groupConfig.value"
+            class="group-name-input"
+            type="text"
+            :placeholder="TUITranslateService.t(`TUIGroup.${groupInfo.groupConfig.placeholder}`)"
+          >
+          <GroupIntroduction
+            v-else
+            class="group-introduction-list"
+            :groupType="groupInfo.groupConfig.value"
+            @selectType="selected"
+          />
+        </div>
+        <footer class="group-profile-footer">
+          <button
+            v-if="isPC && !groupInfo.isEdit"
+            class="btn-default"
+            @click="closeCreated"
+          >
+            {{ TUITranslateService.t('TUIGroup.取消') }}
+          </button>
+          <button
+            class="btn-submit"
+            :disabled="submitDisabledStatus"
+            @click="submit"
+          >
+            {{ TUITranslateService.t('TUIGroup.确认') }}
+          </button>
+        </footer>
+      </div>
+    </div>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import TUIChatEngine, {
+  TUITranslateService,
+  TUIGroupService,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { computed, reactive, watchEffect } from '../../../adapter-vue';
+import documentLink from '../../../utils/documentLink';
+import { isPC } from '../../../utils/env';
+import Icon from '../../common/Icon.vue';
+import backIcon from '../../../assets/icon/back.svg';
+import closeIcon from '../../../assets/icon/icon-close.svg';
+import rightIcon from '../../../assets/icon/right-icon.svg';
+import GroupIntroduction from './group-introduction/index.vue';
+import { groupIntroConfig, findGroupIntroConfig } from './group-introduction/config';
+import Dialog from '../../common/Dialog/index.vue';
+import { Toast, TOAST_TYPE } from '../../common/Toast/index';
+import Avatar from '../../common/Avatar/index.vue';
+import Server from '../server';
+import { IUserProfile } from '../../../interface';
+const TUIGroupServer = Server.getInstance();
+const TUIConstants = TUIGroupServer.constants;
+
+const groupInfo = reactive<any>({
+  profile: {
+    groupID: '',
+    name: '',
+    type: groupIntroConfig[0].type,
+    avatar: groupIntroConfig[0].icon,
+    introduction: '',
+    notification: '',
+    // joinOption: '',
+    memberList: [],
+    isSupportTopic: false,
+  },
+  groupConfig: {
+    title: '',
+    value: '',
+    key: '',
+    type: '',
+    placeholder: '',
+  },
+  isEdit: false,
+});
+
+watchEffect(() => {
+  const params = TUIGroupServer.getOnCallParams(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
+  groupInfo.profile.memberList = params.memberList;
+  groupInfo.groupConfig.title = params.title;
+});
+
+const groupTypeDetail = computed(() => {
+  return findGroupIntroConfig(groupInfo.profile.type);
+});
+
+const headerTitle = computed(() => {
+  let name = '添加群聊';
+  if (groupInfo.isEdit) {
+    name = groupInfo.groupConfig.title;
+  }
+  return TUITranslateService.t(`TUIGroup.${name}`);
+});
+
+const createInfo = computed(() => {
+  const groupNameInput = {
+    name: TUITranslateService.t('TUIGroup.群名称'),
+    key: 'name',
+    placeholder: TUITranslateService.t('TUIGroup.请输入群名称'),
+  };
+  const groupIDInput = {
+    name: `${TUITranslateService.t('TUIGroup.群ID')}(${TUITranslateService.t('TUIGroup.选填')})`,
+    key: 'groupID',
+    placeholder: TUITranslateService.t('TUIGroup.请输入群ID'),
+  };
+  return groupInfo.profile.type === TUIChatEngine.TYPES.GRP_COMMUNITY
+    ? [groupNameInput]
+    : [groupNameInput, groupIDInput];
+});
+
+const submitDisabledStatus = computed(() => {
+  return groupInfo.profile.name === '' && !groupInfo.isEdit;
+});
+
+const selected = (type: any) => {
+  if (groupInfo.profile.type !== type) {
+    groupInfo.profile.type = type;
+    groupInfo.profile.avatar = findGroupIntroConfig(type).icon;
+    if (groupInfo.isEdit) {
+      groupInfo.groupConfig.value = type;
+    }
+  }
+};
+
+const createGroup = async (options: any) => {
+  try {
+    options.memberList = options.memberList.map((item: IUserProfile) => {
+      return { userID: item.userID };
+    });
+    if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
+      delete options.groupID;
+    }
+    const res = await TUIGroupService.createGroup(options);
+    const { type } = res.data.group;
+    if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
+      await TUIGroupService.joinGroup({
+        groupID: res.data.group.groupID,
+        applyMessage: '',
+      });
+    }
+    handleCompleteCreate(res.data.group);
+    Toast({
+      message: TUITranslateService.t('TUIGroup.群组创建成功'),
+      type: TOAST_TYPE.SUCCESS,
+    });
+  } catch (err: any) {
+    Toast({
+      message: err.message,
+      type: TOAST_TYPE.ERROR,
+    });
+  }
+};
+
+const submit = () => {
+  const { profile } = groupInfo;
+  if (groupInfo.isEdit) {
+    groupInfo.profile[groupInfo.groupConfig.key] = groupInfo.groupConfig.value;
+    return groupInfo.isEdit = !groupInfo.isEdit;
+  } else {
+    createGroup(profile);
+  }
+};
+
+const closeCreated = () => {
+  if (groupInfo.isEdit) {
+    return groupInfo.isEdit = !groupInfo.isEdit;
+  }
+  handleCompleteCreate(null);
+};
+
+const edit = (label: string) => {
+  groupInfo.isEdit = !groupInfo.isEdit;
+  groupInfo.groupConfig.key = label;
+  groupInfo.groupConfig.value = (groupInfo.profile as any)[label];
+  switch (label) {
+    case 'name':
+      groupInfo.groupConfig.title = '设置群名称';
+      groupInfo.groupConfig.placeholder = '请输入群名称';
+      groupInfo.groupConfig.type = 'input';
+      break;
+    case 'groupID':
+      groupInfo.groupConfig.title = '设置群ID';
+      groupInfo.groupConfig.placeholder = '请输入群ID';
+      groupInfo.groupConfig.type = 'input';
+      break;
+    case 'type':
+      groupInfo.groupConfig.title = '选择群类型';
+      groupInfo.groupConfig.type = 'select';
+      break;
+  }
+};
+
+const handleCompleteCreate = (group: any) => {
+  TUIStore.update(StoreName.GRP, 'isShowCreateComponent', false);
+  const callback = TUIGroupServer.getOnCallCallback(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
+  callback && callback(group);
+};
+
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUIGroup/create-group/style/color.scss

@@ -0,0 +1,104 @@
+.group {
+  background: #FFF;
+
+  &-list {
+    &-item {
+      background: #FFF;
+
+      label {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        color: #333;
+      }
+    }
+
+    input {
+      border: 1px solid rgba(131, 137, 153, 0.40);
+      font-weight: 400;
+      color: #333;
+    }
+
+    &-edit {
+      background: #FFF;
+    }
+  }
+
+  &-profile-footer {
+    background: #FFF;
+  }
+
+  &-h5 {
+    background: #F7F8FA;
+
+    &-list-item-introduction {
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      color: #888;
+
+      a {
+        color: #006EFF;
+      }
+    }
+  }
+}
+
+.select {
+  flex: 1;
+
+  a {
+    color: #006EFF;
+  }
+
+  &-item {
+    border: 1px solid rgba(131, 137, 153, 0.40);
+
+    &-header {
+      .left {
+        font-weight: 500;
+        color: #333;
+      }
+    }
+
+    &-detail {
+      color: #4F4F4F;
+    }
+  }
+
+  .selected {
+    border: 1px solid #006EFF;
+  }
+}
+
+header {
+  background: #FFF;
+
+  h1 {
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: #000;
+    letter-spacing: 0;
+  }
+}
+
+.btn-default {
+  background: #FFF;
+  border: 1px solid #DDD;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  color: #828282;
+}
+
+.btn-submit {
+  background: #3370FF;
+  border: 0 solid #2F80ED;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  color: #FFF;
+  letter-spacing: 0;
+
+  &:disabled {
+    background: #e8e8e9;
+    border: 1px solid #DDD;
+    color: #FFF;
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIGroup/create-group/style/h5.scss

@@ -0,0 +1,97 @@
+.group-h5 {
+  max-height: none;
+  height: 100%;
+  border-radius: 0;
+  padding: 0;
+
+  .group-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .group-box-header {
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      padding: 16px 18px;
+
+      .icon-close {
+        position: absolute;
+        left: 18px;
+      }
+    }
+
+    .group-list {
+      flex: 1;
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: flex-end;
+      margin-top: 12px;
+      overflow: hidden;
+
+      .group-introduction-list{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        padding: 12px 18px;
+      }
+
+      &-item {
+        padding: 14px 18px;
+        border-bottom: 1px solid #E5E5E5;
+
+        &-label {
+          font-size: 14px;
+        }
+      }
+    }
+
+    .group-list-edit {
+      display: flex;
+      align-items: flex-start;
+
+      .group-name-input {
+        flex: 0 0 auto;
+        width: 100%;
+        height: 40px;
+      }
+    }
+
+    .group-profile-footer {
+      box-shadow: inset 0 1px 0 0 #eee;
+      padding: 12px 18px;
+    }
+  }
+
+  &-list-item-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    .content {
+      width: 0;
+      flex: 1;
+      padding: 0 12px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: end;
+    }
+  }
+
+  &-list-item-introduction {
+    padding: 12px 18px;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+  }
+
+  .select-item-type {
+    text-align: left;
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIGroup/create-group/style/index.scss

@@ -0,0 +1,4 @@
+@import '../../../../assets/styles/common';
+@import './color';
+@import './web';
+@import './h5';

package/src/TUIRoom/components/Chat/ChatKit/components/TUIGroup/create-group/style/web.scss

@@ -0,0 +1,106 @@
+.group {
+  padding: 30px;
+  box-sizing: border-box;
+  width: 750px;
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+  border-radius: 10px;
+
+  .group-box {
+    .group-box-header {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+
+      .group-box-header-title {
+        font-size: 18px;
+        line-height: 30px;
+      }
+    }
+  }
+
+  &-list {
+    &-item {
+      display: flex;
+      padding: 10px 0;
+
+      &-label {
+        width: 84px;
+      }
+    }
+
+    input {
+      flex: 1;
+      box-sizing: border-box;
+      padding: 6px 10px;
+      border-radius: 2px;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}
+
+.select {
+  flex: 1;
+
+  &-item {
+    padding: 12px 20px !important;
+    border-radius: 2px;
+    margin-bottom: 20px !important;
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+
+        .icon {
+          margin-right: 12px;
+        }
+      }
+
+      .icon-selected {
+        position: relative;
+        left: 12px;
+        top: -4px;
+      }
+    }
+
+    &-type {
+      text-align: left;
+    }
+
+    &-detail {
+      padding-top: 6px;
+      font-size: 14px;
+    }
+
+    .link {
+      display: inline-block;
+    }
+  }
+}
+
+.group-profile-footer {
+  padding-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.btn-default {
+  width: 82px;
+  height: 32px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.btn-submit {
+  width: 82px;
+  height: 32px;
+  border-radius: 4px;
+  margin-left: 10px;
+  font-size: 14px;
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUIGroup/index.ts

@@ -0,0 +1,6 @@
+import TUIGroup from './index.vue';
+import Server from './server';
+
+Server.getInstance();
+
+export default TUIGroup;

package/src/TUIRoom/components/Chat/ChatKit/components/TUIGroup/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div :class="[(isShowCreateGroup || isShowManageGroup || isShowSelectMember) && 'tui-group']">
+    <CreateGroup v-if="isShowCreateGroup" />
+    <ManageGroup v-if="isShowManageGroup" />
+    <SelectMember v-if="isShowSelectMember" />
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref } from '../../adapter-vue';
+
+import CreateGroup from './create-group/index.vue';
+import ManageGroup from './manage-group/index.vue';
+import SelectMember from './select-member/index.vue';
+
+const isShowCreateGroup = ref(false);
+const isShowManageGroup = ref(false);
+const isShowSelectMember = ref(false);
+
+TUIStore.watch(StoreName.GRP, {
+  isShowCreateComponent: (data: any) => {
+    if (data) {
+      isShowCreateGroup.value = true;
+    } else {
+      isShowCreateGroup.value = false;
+    }
+  },
+  isShowManageComponent: (data: any) => {
+    if (data) {
+      isShowManageGroup.value = true;
+    } else {
+      isShowManageGroup.value = false;
+    }
+  },
+  isShowSelectComponent: (data: any) => {
+    if (data) {
+      isShowSelectMember.value = true;
+    } else {
+      isShowSelectMember.value = false;
+    }
+  },
+});
+
+</script>
+<style lang="scss" scoped>
+.tui-group {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUIGroup/manage-group/index.ts

@@ -0,0 +1,3 @@
+import ManageGroup from './index.vue';
+
+export default ManageGroup;