加群需要添加API

2026-01-06 17:54:57 +08:00
parent 578eafafa1
commit 95b46d5cf4
7 changed files with 442 additions and 328 deletions
--- a/TUIKit/components/TUIGroup/create-group/group-introduction/config.ts
+++ b/TUIKit/components/TUIGroup/create-group/group-introduction/config.ts
@@ -1,50 +1,59 @@
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine-lite';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine-lite'

 const groupIntroConfig = [
  {
    icon: 'https://web.sdk.qcloud.com/im/assets/images/Public.svg',
-    label: '陌生人社交群（Public）',
+    label: '陌生人社交群',
    type: TUIChatEngine.TYPES.GRP_PUBLIC,
-    detail: '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见',
-    src: '产品文档',
+    detail:
+      '（Public）类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。',
+    src: '产品文档'
  },
  {
    icon: 'https://web.sdk.qcloud.com/im/assets/images/Meeting.svg',
-    label: '临时会议群（Meeting）',
+    label: '临时会议群',
    type: TUIChatEngine.TYPES.GRP_MEETING,
-    detail: '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见',
-    src: '产品文档',
+    detail:
+      '（Meeting）创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。',
+    src: '产品文档'
  },
  {
    icon: 'https://web.sdk.qcloud.com/im/assets/images/Work.svg',
-    label: '好友工作群（Work）',
+    label: '好友工作群',
    type: TUIChatEngine.TYPES.GRP_WORK,
-    detail: '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见',
-    src: '产品文档',
+    detail:
+      '（Work）类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。',
+    src: '产品文档'
  },
  {
    icon: 'https://web.sdk.qcloud.com/im/assets/images/AVChatroom.svg',
-    label: '直播群（AVChatroom）',
+    label: '直播群',
    type: TUIChatEngine.TYPES.GRP_AVCHATROOM,
-    detail: '创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见',
-    src: '产品文档',
+    detail:
+      '（AVChatroom）创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。',
+    src: '产品文档'
  },
  {
    icon: 'https://web.sdk.qcloud.com/im/assets/images/Community.png',
-    label: '社群（Community）',
+    label: '社群',
    type: TUIChatEngine.TYPES.GRP_COMMUNITY,
-    detail: '创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见',
-    src: '产品文档',
-  },
-];
+    detail:
+      '（Community）创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。',
+    src: '产品文档'
+  }
+]

 const findGroupIntroConfig = (type: string) => {
  return groupIntroConfig.filter((item: any) => {
-    return item.type === type;
-  })[0];
-};
+    return item.type === type
+  })[0]
+}

-export {
-  groupIntroConfig,
-  findGroupIntroConfig,
-};
+/** 入群方式 */
+const groupJoinTypeConfig = [
+  { label: '自由加入', value: 'FreeAccess' },
+  { label: '需要验证', value: 'NeedPermission' },
+  { label: '禁止加群', value: 'DisableApply' }
+]
+
+export { groupIntroConfig, groupJoinTypeConfig, findGroupIntroConfig }
--- a/TUIKit/components/TUIGroup/create-group/group-introduction/index.vue
+++ b/TUIKit/components/TUIGroup/create-group/group-introduction/index.vue
@@ -10,66 +10,64 @@
      <main class="select-item-type">
        <div class="select-item-header">
          <aside class="left">
-            <Icon
-              class="icon"
-              :file="item.icon"
-            />
-            <span class="select-item-label">{{ TUITranslateService.t(`TUIGroup.${item.label}`) }}</span>
+            <Icon class="icon" :file="item.icon" />
+            <span class="select-item-label">
+              {{ TUITranslateService.t(`TUIGroup.${item.label}`) }}
+            </span>
          </aside>
-          <Icon
-            v-if="selectType === item.type"
-            :file="selectedIcon"
-          />
+          <Icon v-if="selectType === item.type" :file="selectedIcon" />
        </div>
-        <span class="select-item-detail">{{ TUITranslateService.t(`TUIGroup.${item.detail}`) }}</span>
+        <!-- <span class="select-item-detail">
+          {{ TUITranslateService.t(`TUIGroup.${item.detail}`) }}
+        </span>
        <a
          class="link"
          :href="documentLink.product.url"
          target="_blank"
          @click="openUrl(documentLink.product.url)"
-        >{{
-          TUITranslateService.t(`TUIGroup.${item.src}`) }}</a>
+        >
+          {{ TUITranslateService.t(`TUIGroup.${item.src}`) }}
+        </a> -->
      </main>
    </li>
  </ul>
 </template>
 <script lang="ts" setup>
-import { ref, watchEffect } from '../../../../adapter-vue';
-import { TUITranslateService } from '@tencentcloud/chat-uikit-engine-lite';
-import { TUIGlobal } from '@tencentcloud/universal-api';
-import documentLink from '../../../../utils/documentLink';
-import Icon from '../../../common/Icon.vue';
-import selectedIcon from '../../../../assets/icon/selected.svg';
-import { groupIntroConfig } from './config';
-import { isUniFrameWork } from '../../../../utils/env';
+  import { ref, watchEffect } from '../../../../adapter-vue'
+  import { TUITranslateService } from '@tencentcloud/chat-uikit-engine-lite'
+  import { TUIGlobal } from '@tencentcloud/universal-api'
+  import documentLink from '../../../../utils/documentLink'
+  import Icon from '../../../common/Icon.vue'
+  import selectedIcon from '../../../../assets/icon/selected.svg'
+  import { groupIntroConfig } from './config'
+  import { isUniFrameWork } from '../../../../utils/env'

-const props = defineProps({
-  groupType: {
-    type: String,
-    default: '',
-  },
-});
+  const props = defineProps({
+    groupType: {
+      type: String,
+      default: ''
+    }
+  })

-const type = groupIntroConfig;
+  const type = groupIntroConfig

-const selectType = ref();
+  const selectType = ref()

-const emit = defineEmits(['selectType']);
+  const emit = defineEmits(['selectType'])

-watchEffect(() => {
-  selectType.value = props.groupType;
-});
+  watchEffect(() => {
+    selectType.value = props.groupType
+  })

-const selected = (item: any) => {
-  selectType.value = item.type;
-  emit('selectType', item.type);
-};
-
-const openUrl = (link: string) => {
-  if (!isUniFrameWork) {
-    TUIGlobal?.open(link);
+  const selected = (item: any) => {
+    selectType.value = item.type
+    emit('selectType', item.type)
  }
-};

+  const openUrl = (link: string) => {
+    if (!isUniFrameWork) {
+      TUIGlobal?.open(link)
+    }
+  }
 </script>
 <style lang="scss" scoped src="../style/index.scss"></style>
--- a/TUIKit/components/TUIGroup/create-group/index.vue
+++ b/TUIKit/components/TUIGroup/create-group/index.vue
@@ -1,15 +1,11 @@
 <template>
-  <div
-    class="group"
-    :class="[!isPC ? 'group-h5' : '']"
-  >
+  <div class="group" :class="[!isPC ? 'group-h5' : '']">
    <div class="group-box">
-      <ul
-        v-if="!groupInfo.isEdit"
-        class="group-list"
-      >
+      <ul v-if="!groupInfo.isEdit" class="group-list">
        <li class="group-list-item">
-          <label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群头像') }}</label>
+          <label class="group-list-item-label">
+            {{ TUITranslateService.t('TUIGroup.群头像') }}
+          </label>
          <Avatar :url="groupInfo.profile.avatar" />
        </li>
        <ul>
@@ -24,7 +20,7 @@
              v-model="groupInfo.profile[item.key]"
              type="text"
              :placeholder="item.placeholder"
-            >
+            />
            <span
              v-else
              class="group-h5-list-item-content"
@@ -34,9 +30,18 @@
              <Icon :file="rightIcon" />
            </span>
          </li>
+          <li class="group-list-item" @click="cbPopupShow.open('bottom')">
+            <label class="group-list-item-label">申请加群方式</label>
+            <span class="group-h5-list-item-content">
+              <p class="content">{{ applyJoinOptionName }}</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>
+              <label class="group-list-item-label">
+                {{ TUITranslateService.t('TUIGroup.群类型') }}
+              </label>
              <GroupIntroduction
                v-if="isPC"
                :groupType="groupInfo.profile.type"
@@ -51,34 +56,35 @@
                <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 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"
-      >
+      <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}`)"
-        >
+          :placeholder="
+            TUITranslateService.t(
+              `TUIGroup.${groupInfo.groupConfig.placeholder}`
+            )
+          "
+        />
        <GroupIntroduction
          v-else
          class="group-introduction-list"
@@ -103,176 +109,258 @@
        </button>
      </footer>
    </div>
+
+    <uni-popup ref="cbPopupShow" backgroundColor="#fff">
+      <view class="popup-content">
+        <text
+          v-for="(item, index) in groupJoinTypeConfig"
+          :key="index"
+          :class="{ 'on-text': item.value === applyJoinOption }"
+          @click="
+            () => {
+              cbPopupShow.close()
+              applyJoinOption = item.value
+            }
+          "
+        >
+          {{ item.label }}
+        </text>
+        <text @click="cbPopupShow.close()">取消</text>
+      </view>
+    </uni-popup>
  </div>
 </template>
 <script lang="ts" setup>
-import TUIChatEngine, {
-  TUITranslateService,
-  TUIGroupService,
-  TUIStore,
-  StoreName,
-} from '@tencentcloud/chat-uikit-engine-lite';
-import { computed, reactive, watchEffect } from '../../../adapter-vue';
-import documentLink from '../../../utils/documentLink';
-import { isPC } from '../../../utils/env';
-import Icon from '../../common/Icon.vue';
-import rightIcon from '../../../assets/icon/right-icon.svg';
-import GroupIntroduction from './group-introduction/index.vue';
-import { groupIntroConfig, findGroupIntroConfig } from './group-introduction/config';
-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;
+  import TUIChatEngine, {
+    TUITranslateService,
+    TUIGroupService,
+    TUIStore,
+    StoreName
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import {
+    computed,
+    ref,
+    reactive,
+    watchEffect
+  } from '../../../adapter-vue'
+  import documentLink from '../../../utils/documentLink'
+  import { isPC } from '../../../utils/env'
+  import Icon from '../../common/Icon.vue'
+  import rightIcon from '../../../assets/icon/right-icon.svg'
+  import GroupIntroduction from './group-introduction/index.vue'
+  import {
+    groupIntroConfig,
+    findGroupIntroConfig,
+    groupJoinTypeConfig
+  } from './group-introduction/config'
+  import { Toast, TOAST_TYPE } from '../../common/Toast/index'
+  import Avatar from '../../common/Avatar/index.vue'
+  import Server from '../server'
+  import { IUserProfile } from '../../../interface'
+  import { createImGroup } from '../../../../api/tui-kit'

-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,
-});
+  const TUIGroupServer = Server.getInstance()
+  const TUIConstants = TUIGroupServer.constants

-watchEffect(() => {
-  const params = TUIGroupServer.getOnCallParams(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
-  groupInfo.profile.memberList = params.memberList;
-  groupInfo.groupConfig.title = params.title;
-});
+  /** 自定义数据 */
+  const cbPopupShow = ref(null)
+  const applyJoinOption = ref('NeedPermission')

-const groupTypeDetail = computed(() => {
-  return findGroupIntroConfig(groupInfo.profile.type);
-});
+  const applyJoinOptionName = computed(() => {
+    const data = groupJoinTypeConfig.find(
+      v => v.value === applyJoinOption.value
+    )
+    return data?.label || ''
+  })
+  // =======
+  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
+  })

-const headerTitle = computed(() => {
-  let name = '添加群聊';
-  if (groupInfo.isEdit) {
-    name = groupInfo.groupConfig.title;
-  }
-  return TUITranslateService.t(`TUIGroup.${name}`);
-});
+  watchEffect(() => {
+    const params = TUIGroupServer.getOnCallParams(
+      TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP
+    )
+    groupInfo.profile.memberList = params.memberList
+    groupInfo.groupConfig.title = params.title
+  })

-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 groupTypeDetail = computed(() => {
+    return findGroupIntroConfig(groupInfo.profile.type)
+  })

-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;
+  const headerTitle = computed(() => {
+    let name = '添加群聊'
    if (groupInfo.isEdit) {
-      groupInfo.groupConfig.value = type;
+      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 createGroup = async (options: any) => {
+    console.log('确认创建==', options)
+    // const data = {
+    //   currentMemberCount:
+    // }
+    // createImGroup()
+    return
+    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 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: '',
-      });
+  }
+
+  const submit = () => {
+    const { profile } = groupInfo
+
+    if (groupInfo.isEdit) {
+      groupInfo.profile[groupInfo.groupConfig.key] =
+        groupInfo.groupConfig.value
+      return (groupInfo.isEdit = !groupInfo.isEdit)
+    } else {
+      createGroup(profile)
    }
-    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 closeCreated = () => {
-  if (groupInfo.isEdit) {
-    return groupInfo.isEdit = !groupInfo.isEdit;
+  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
+    }
  }
-  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)
  }
-};
-
-const handleCompleteCreate = (group: any) => {
-  TUIStore.update(StoreName.GRP, 'isShowCreateComponent', false);
-  const callback = TUIGroupServer.getOnCallCallback(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
-  callback && callback(group);
-};
-
-defineExpose({
-  closeCreated,
-});

+  defineExpose({
+    closeCreated
+  })
 </script>
 <style lang="scss" scoped src="./style/index.scss"></style>
+<style lang="scss" scoped>
+  .popup-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 34rpx 0;
+    text + text {
+      margin-top: 20rpx;
+    }
+    text {
+      border: 2rpx solid #a7a7a7;
+      width: 80%;
+      padding: 18rpx 0;
+      border-radius: 50rpx;
+      text-align: center;
+      font-size: 28rpx;
+      color: #333333;
+    }
+    .on-text {
+      border: 2rpx solid #348aec;
+      background: rgb(65, 178, 212);
+      color: #ffffff;
+    }
+  }
+</style>
--- a/TUIKit/components/TUIGroup/create-group/style/h5.scss
+++ b/TUIKit/components/TUIGroup/create-group/style/h5.scss
@@ -33,18 +33,20 @@
      margin-top: 12px;
      overflow: hidden;

-      .group-introduction-list{
+      .group-introduction-list {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
-        padding: 12px 18px;
+        padding: 12rpx 24rpx;
+        width: calc(100% - 48rpx);
+      }
+      .select-item {
+        border-radius: 26rpx;
      }
-
      &-item {
        padding: 14px 18px;
-        border-bottom: 1px solid #E5E5E5;
-
+        border-bottom: 2rpx solid #e5e5e5;
        &-label {
          font-size: 14px;
        }