修改样式

src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage-mute.vue

@@ -1,76 +1,151 @@
 <template>
-  <main class="member">
-    <n-spin :show="muteLoading" stroke="#198CFE">
+  <n-scrollbar class="member-section">
+    <main class="member">
+      <n-spin :show="muteLoading" stroke="#198CFE">
         <div class="sectionSearch">
-            <n-input
-                class="TheSearch noBorder"
-                style="--n-font-size: 12px; --n-height: 35px; --n-caret-color: #198cfe; --n-border-hover: 1px solid #198cfe; --n-border-focus: 1px solid #198cfe; --n-loading-color: #198cfe; --n-box-shadow-focus: 0 0 0 2px rgba(25 140 254, 0.2)"
-                round
-                clearable
-                placeholder="请输入群成员名称"
-                v-model:value="keyword"
-                @keyup="onKeyup"
+          <n-input
+            class="TheSearch noBorder"
+            style="
+              --n-font-size: 12px;
+              --n-height: 35px;
+              --n-caret-color: #198cfe;
+              --n-border-hover: 1px solid #198cfe;
+              --n-border-focus: 1px solid #198cfe;
+              --n-loading-color: #198cfe;
+              --n-box-shadow-focus: 0 0 0 2px rgba(25 140 254, 0.2);
+            "
+            round
+            clearable
+            placeholder="请输入群成员名称"
+            v-model:value="keyword"
+            @keyup="onKeyup"
+          >
+            <template #prefix>
+              <span class="icon-search-input"></span
+            ></template>
+            <template #suffix
+              ><n-button @click="debouncedRequest('')" round color="#198cfe"
+                >搜索</n-button
+              ></template
             >
-                <template #prefix> <span class="icon-search-input"></span></template>
-                <template #suffix><n-button @click="debouncedRequest('')" round color="#198cfe" >搜索</n-button></template>
-            </n-input>
+          </n-input>
         </div>
         <ul class="list">
-        <li class="list-item" v-for="(item, index) in list" :key="index" @click="onSelectItem(item)">
+          <li
+            class="list-item"
+            v-for="(item, index) in list"
+            :key="index"
+            @click="onSelectItem(item)"
+          >
             <aside>
-            <!-- icon icon-selected -->
-            <i :class="['icon', isSelect(item) ? 'icon-selected' : 'icon-unselected']"></i>
-            <img class="avatar" :src="item?.avatar || 'https://oss.dayaedu.com/news-info/07/1690787574969.png'" onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'" />
-            <span class="name">{{ item?.nickname || item?.userID }}</span>
+              <!-- icon icon-selected -->
+              <i
+                :class="[
+                  'icon',
+                  isSelect(item) ? 'icon-selected' : 'icon-unselected',
+                ]"
+              ></i>
+              <img
+                class="avatar"
+                :src="
+                  item?.avatar ||
+                  'https://oss.dayaedu.com/news-info/07/1690787574969.png'
+                "
+                onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'"
+              />
+              <span class="name">{{ item?.nickname || item?.userID }}</span>
             </aside>
             <!-- <i v-if="item.role !== 'Owner' && isShowDel" class="icon icon-del" @click="submit(item)"></i> -->
-        </li>
-        <li class="list-item" v-if="list.length < total && total > 0 && !muteLoading" @click="getMore">
+          </li>
+          <li
+            class="list-item"
+            v-if="list.length < total && total > 0 && !muteLoading"
+            @click="getMore"
+          >
             {{ $t(`TUIChat.manage.查看更多`) }}
-        </li>
+          </li>
         </ul>
-        <div class="theEmpty" v-if="!muteLoading && list.length <= 0" style="height: 75%">
-            <img class="emptyImg" src="../../../assets/nomore.png" />
-            <p>暂无数据</p>
+        <div
+          class="theEmpty"
+          v-if="!muteLoading && list.length <= 0"
+          style="height: 75%"
+        >
+          <img class="emptyImg" src="../../../assets/nomore.png" />
+          <p>暂无数据</p>
         </div>
-        <div class="footer">
-            <div class="selectUser" @click="onSelectAll">
-                <i :class="['icon', isSelectAll ? 'icon-selected' : 'icon-unselected']"></i>
-                <span>全选(已选择{{ selectList.length || 0 }})：</span>
-            </div>
-            <div class="userInfo">
-                <div class="userList" @click="showMore = true">
-                    <img class="avatar" v-for="(item, index) in selectList" :key="index" :src="item?.avatar || 'https://oss.dayaedu.com/news-info/07/1690787574969.png'" onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'"  />
-                </div>
-                <span :class="['muteBtn', selectList.length <=0 ? 'disabled' : '']" @click="submit">
-                    {{ currentModel === 'not_mute' ? '禁言' : '解除禁言' }}
-                </span>
-            </div>
+      </n-spin>
+    </main>
+    <div class="footer">
+      <div class="selectUser" @click="onSelectAll">
+        <i
+          :class="['icon', isSelectAll ? 'icon-selected' : 'icon-unselected']"
+        ></i>
+        <span>全选(已选择{{ selectList.length || 0 }})：</span>
+      </div>
+      <div class="userInfo">
+        <div class="userList" @click="showMore = true">
+          <img
+            class="avatar"
+            v-for="(item, index) in selectList"
+            :key="index"
+            :src="
+              item?.avatar ||
+              'https://oss.dayaedu.com/news-info/07/1690787574969.png'
+            "
+            onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'"
+          />
         </div>
-
-         <div v-if="showMore" class="maskMute"></div>
-        <div :class="['selectListSection', showMore ? 'show': '']">
-            <div class="selectHeader">
-                <i class="icon-close" @click="showMore = false"></i>
-                <span class="title">已选择 ({{ selectList.length || 0 }})</span>
-                <span :class="['sureBtn', selectList.length <=0 ? 'disabled' : '']" @click="showMore = false">确定</span>
-            </div>
-            <div class="selectContainer">
-             <div class="list-item" v-for="(item, index) in selectList" :key="index" @click="onSelectItem(item)">
-                <aside>
-                  <img class="avatar" :src="item?.avatar || 'https://oss.dayaedu.com/news-info/07/1690787574969.png'" onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'" />
-                  <span class="name">{{ item?.nickname || item?.userID }}</span>
-                </aside>
-                <i class="icon icon-remove" ></i>
-              </div>
-              <div class="theEmpty" v-if="selectList.length <= 0" style="margin-top: 20px;margin-bottom: 0;">
-                <img class="emptyImg" src="../../../assets/nomore.png" />
-                <p>暂无数据</p>
-              </div>
-            </div>
+        <span
+          :class="['muteBtn', selectList.length <= 0 ? 'disabled' : '']"
+          @click="submit"
+        >
+          {{ currentModel === "not_mute" ? "禁言" : "解除禁言" }}
+        </span>
+      </div>
+    </div>
+
+    <div v-if="showMore" class="maskMute"></div>
+    <div :class="['selectListSection', showMore ? 'show' : '']">
+      <div class="selectHeader">
+        <i class="icon-close" @click="showMore = false"></i>
+        <span class="title">已选择 ({{ selectList.length || 0 }})</span>
+        <span
+          :class="['sureBtn', selectList.length <= 0 ? 'disabled' : '']"
+          @click="showMore = false"
+          >确定</span
+        >
+      </div>
+      <div class="selectContainer">
+        <div
+          class="list-item"
+          v-for="(item, index) in selectList"
+          :key="index"
+          @click="onSelectItem(item)"
+        >
+          <aside>
+            <img
+              class="avatar"
+              :src="
+                item?.avatar ||
+                'https://oss.dayaedu.com/news-info/07/1690787574969.png'
+              "
+              onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'"
+            />
+            <span class="name">{{ item?.nickname || item?.userID }}</span>
+          </aside>
+          <i class="icon icon-remove"></i>
+        </div>
+        <div
+          class="theEmpty"
+          v-if="selectList.length <= 0"
+          style="margin-top: 20px; margin-bottom: 0"
+        >
+          <img class="emptyImg" src="../../../assets/nomore.png" />
+          <p>暂无数据</p>
         </div>
-    </n-spin>
-  </main>
+      </div>
+    </div>
+  </n-scrollbar>
 </template>
 
 <script lang="ts">
@@ -86,16 +161,16 @@ const ManageMember = defineComponent({
       default: () => [],
     },
     currentModel: {
-        type: String,
-        default: '',
+      type: String,
+      default: "",
     },
     muteLoading: {
-        type: Boolean,
-        default: false
+      type: Boolean,
+      default: false,
     },
     total: {
-        type: Number,
-        default: 0
+      type: Number,
+      default: 0,
     },
     conversation: {
       type: Object,
@@ -114,30 +189,33 @@ const ManageMember = defineComponent({
     const types: any = TIM.TYPES;
     const data: any = reactive({
       conversation: {},
-      currentModel: '',
+      currentModel: "",
       total: 0,
       muteLoading: false,
       list: [],
       page: 1,
       isShowDel: false,
       self: {},
-      keyword: '',
-      showMore: false, // 显示更多 
+      keyword: "",
+      showMore: false, // 显示更多
       selectList: [],
       isSelectAll: false, // 是否全部选择
     });
 
     watchEffect(() => {
-        if(data.currentModel !== props.currentModel) {
-            data.selectList = []
-        }
-        data.conversation = props.conversation;
-        data.muteLoading = props.muteLoading;
-        data.total = props.total;
-        data.isShowDel = props.isShowDel;
-        data.list = props.list;
-        data.self = props.self;
-        data.currentModel = props.currentModel;
+      if (data.currentModel !== props.currentModel) {
+        data.selectList = [];
+      }
+      data.conversation = props.conversation;
+      data.muteLoading = props.muteLoading;
+      data.total = props.total;
+      data.isShowDel = props.isShowDel;
+      data.list = props.list;
+      data.self = props.self;
+      data.currentModel = props.currentModel;
+
+      data.selectList = [];
+      data.isSelectAll = false;
     });
 
     const handleRoleName = (item: any) => {
@@ -162,61 +240,63 @@ const ManageMember = defineComponent({
     };
 
     const submit = async (item: any) => {
-    //   ctx.emit("del", [item]);
-    try {
-        if(data.selectList.length <= 0) return
+      //   ctx.emit("del", [item]);
+      try {
+        if (data.selectList.length <= 0) return;
         const userIds = data.selectList.map((item: any) => {
-            return item.userId
-        })
+          return item.userId;
+        });
         await imGroupGroupMute({
-            "groupId": data.conversation?.groupProfile?.groupID,
-            "muteTime": -1,
-            "groupMute":  data.currentModel === 'not_mute' ? true : false,
-            userIds
-        })
-        onBack()
-    } catch {
-
-    }
+          groupId: data.conversation?.groupProfile?.groupID,
+          muteTime: -1,
+          groupMute: data.currentModel === "not_mute" ? true : false,
+          userIds,
+        });
+        onBack();
+      } catch {}
     };
 
     const onSelectItem = (item: any) => {
-        const index = data.selectList.findIndex(child => child.userId === item.userId)
-        if(index === -1) {
-            data.selectList.push(item)
-        } else {
-            data.selectList.splice(index, 1)
-        }
+      const index = data.selectList.findIndex(
+        (child) => child.userId === item.userId
+      );
+      if (index === -1) {
+        data.selectList.push(item);
+      } else {
+        data.selectList.splice(index, 1);
+      }
 
-        data.isSelectAll = data.list.length === data.selectList.length ? true : false
-       
-    }
+      data.isSelectAll =
+        data.list.length === data.selectList.length ? true : false;
+    };
 
-    const isSelect = (item: any)　=> {
-        const index = data.selectList.findIndex(child => child.userId === item.userId)
-        return index === -1 ? false : true
-    }
+    const isSelect = (item: any) => {
+      const index = data.selectList.findIndex(
+        (child) => child.userId === item.userId
+      );
+      return index === -1 ? false : true;
+    };
 
     const onSelectAll = (item: any) => {
-        if(data.list.length === data.selectList.length) {
-            data.selectList = []
-            data.isSelectAll = false
-        } else {
-            data.selectList = [...data.list]
-            data.isSelectAll = true
-        }
-    }
+      if (data.list.length === data.selectList.length) {
+        data.selectList = [];
+        data.isSelectAll = false;
+      } else {
+        data.selectList = [...data.list];
+        data.isSelectAll = true;
+      }
+    };
 
     const handleMemberProfileShow = (user: any) => {
       ctx.emit("handleMemberProfileShow", user);
     };
 
     const onBack = () => {
-        ctx.emit("back");
-    }
+      ctx.emit("back");
+    };
 
-     const onSearch = (val: string) => {
-        ctx.emit('search', data.keyword)
+    const onSearch = (val: string) => {
+      ctx.emit("search", data.keyword);
     };
 
     const debouncedRequest = useThrottleFn((val: string) => {
@@ -250,16 +330,31 @@ export default ManageMember;
 <style lang="scss" scoped>
 @import url("../../../styles/common.scss");
 @import url("../../../styles/icon.scss");
+.member-section {
+  font-size: 20px;
+  .n-scrollbar-content {
+    min-height: calc(100% - 57px);
+  }
+}
+
+.n-scrollbar-content {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .member {
-    position: relative;
-    flex: 1;
-    background: #F8F9FC;
-  
+  position: relative;
+  flex: 1;
+  background: #f8f9fc;
+  min-height: calc(100% - 57px);
+
   .list {
     display: flex;
     flex-direction: column;
     // background: #f4f5f9;
-    padding-top: 12px;
+    // padding-top: 12px;
+    // padding-bottom: 66px;
     &-item {
       padding: 13px;
       display: flex;
@@ -275,8 +370,8 @@ export default ManageMember;
         width: 100%;
         overflow: hidden;
         .avatar {
-            margin-left: 12px;
-            flex-shrink: 0;
+          margin-left: 12px;
+          flex-shrink: 0;
         }
         .name {
           padding-left: 8px;
@@ -298,9 +393,12 @@ export default ManageMember;
   border-radius: 4px;
 }
 
-
 .sectionSearch {
-  padding: 4px 12px 0;
+  position: sticky;
+  top: 0;
+  left: 0;
+  padding: 4px 12px 12px;
+  background: #f8f9fc;
 }
 
 ::deep .TheSearch .n-input--focus {
@@ -312,177 +410,178 @@ export default ManageMember;
     display: none;
   }
 
-
   .n-button {
     opacity: 1;
   }
 }
 
-
 .n-spin-container {
-    height: 100%;
-    :deep(.n-spin-content) {
-        min-height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
+  height: 100%;
+  :deep(.n-spin-content) {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .TheSearch {
-  border-radius: 20Px !important;
+  border-radius: 20px !important;
 
   &.noBorder {
     --n-border: none !important;
   }
 
-    .n-button {
-        :deep(.n-button__content) {
-            color: #fff;
-        }
+  .n-button {
+    :deep(.n-button__content) {
+      color: #fff;
     }
+  }
 
   :deep(.n-input-wrapper) {
-    padding-left: 12Px;
-    padding-right: 4Px;
-    height: 35Px !important;
+    padding-left: 12px;
+    padding-right: 4px;
+    height: 35px !important;
   }
 
   .n-button {
-    height: 26Px;
-    font-size: 12Px;
+    height: 26px;
+    font-size: 12px;
     font-weight: 500;
     width: auto;
     opacity: 0.7;
   }
 
-
-
   .active {
     display: none;
   }
 
   .active,
   .default {
-    width: 14Px;
-    height: 14Px;
+    width: 14px;
+    height: 14px;
   }
 
   &:hover {
-
     .n-button {
       opacity: 1;
     }
-
   }
 }
-.icon-unselected, .icon-selected {
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
+.icon-unselected,
+.icon-selected {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
 }
 
 .footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    // width: 100%;
-    padding: 0 12px;
-    height: 66px;
-    background: #FFFFFF;
-    display: flex;
-    align-items: center;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  // width: 100%;
+  padding: 0 12px;
+  height: 66px;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
 }
 .selectUser {
-    display: flex;
-    align-items: center;
-    font-weight: 400;
-    font-size: 14px;
-    color: #777777;
-    line-height: 20px;
-    flex-shrink: 0;
-    cursor: pointer;
-    span {
-        padding-left: 12px;
-    }
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  font-size: 14px;
+  color: #777777;
+  line-height: 20px;
+  flex-shrink: 0;
+  cursor: pointer;
+  span {
+    padding-left: 12px;
+  }
 }
 .userInfo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+
+  .userList {
+    max-width: 110px;
+    overflow-x: auto;
+    overflow-y: hidden;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    flex: 1;
-
-    .userList {
-        max-width: 110px;
-        overflow-x: auto;
-        overflow-y: hidden;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        .avatar {
-            width: 28px;
-            height: 28px;
-            border-radius: 50%;
-            margin-right: 5px;
-            &:last-child {
-                margin-right: 0;
-            }
-        }
+    cursor: pointer;
+    .avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      margin-right: 5px;
+      &:last-child {
+        margin-right: 0;
+      }
     }
-    .muteBtn {
-        cursor: pointer;
-        width: 80px;
-        line-height: 30px;
-        background: #198CFE;
-        border-radius: 20px;
-        font-weight: 500;
-        font-size: 14px;
-        color: #FFFFFF;
-        text-align: center;
-        font-style: normal;
-
-        &.disabled {
-            opacity: 0.7;
-            cursor: not-allowed;
-        }
+  }
+  .muteBtn {
+    cursor: pointer;
+    width: 80px;
+    line-height: 30px;
+    background: #198cfe;
+    border-radius: 20px;
+    font-weight: 500;
+    font-size: 14px;
+    color: #ffffff;
+    text-align: center;
+    font-style: normal;
+
+    &.disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
     }
+  }
 }
 ::-webkit-scrollbar {
-//   width: 4Px;
-  height: 4Px;
+  //   width: 4Px;
+  height: 4px;
   background-color: transparent;
 }
 
 ::-webkit-scrollbar-track {
-  border-radius: 10Px;
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-  border-radius: 10Px;
+  border-radius: 10px;
   background-color: #d8d8d8;
 }
 
- .theEmpty {
-   width: 100%;
-   display: flex;
-   justify-content: center;
-   align-items: center;
-   flex-direction: column;
-   flex: 1;
-   margin-bottom: 106px;
-
-   .emptyImg {
-     width: 210px;
-     height: 210px;
-   }
- }
-
- .selectListSection {
+.theEmpty {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  flex: 1;
+
+  .emptyImg {
+    width: 210px;
+    height: 210px;
+  }
+
+  p {
+    font-size: 16px;
+    color: #AAAAAA;
+    line-height: 22px;
+  }
+}
+
+.selectListSection {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  background: #FFFFFF;
+  z-index: 11;
+  background: #ffffff;
   border-radius: 10px 10px 0px 0px;
   height: 70vh;
   overflow-x: hidden;
@@ -490,15 +589,15 @@ export default ManageMember;
   // display: none;
   opacity: 0;
   height: 0;
-  transition: all .2s ease;
+  transition: all 0.2s ease;
   &.show {
     // display: block;
     opacity: 1;
     height: 70vh;
-    transition: all .2s ease;
+    transition: all 0.2s ease;
   }
- }
- .selectHeader {
+}
+.selectHeader {
   padding: 16px 20px 16px 18px;
   display: flex;
   align-items: center;
@@ -523,22 +622,25 @@ export default ManageMember;
     cursor: pointer;
     width: 52px;
     line-height: 26px;
-    background: #198CFE;
+    background: #198cfe;
     border-radius: 6px;
     font-weight: 500;
     font-size: 14px;
-    color: #FFFFFF;
+    color: #ffffff;
     text-align: center;
-      &.disabled {
-            opacity: 0.7;
-            cursor: not-allowed;
-        }
+    &.disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
   }
- }
+}
 
- .selectContainer {
+.selectContainer {
   .list-item {
     padding: 10px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     cursor: default;
 
     &:first-child {
@@ -562,14 +664,26 @@ export default ManageMember;
       cursor: pointer;
     }
   }
- }
+}
 
- .maskMute {
+.maskMute {
   position: absolute;
   left: 0;
   right: 0;
   top: -58px;
   bottom: 0;
-  background:rgba(0, 0, 0, 0.6);
- }
+  z-index: 10px;
+  background: rgba(0, 0, 0, 0.6);
+}
 </style>
+<style lang="scss">
+.member-section {
+  font-size: 20px;
+  .n-scrollbar-content {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+</style>

src/TUIKit/TUIComponents/container/TUIChat/manage-components/manage.vue

@@ -11,7 +11,7 @@
             setTab('')
           }"></i>
           <main v-if="currentTab !== 'onlyMute'">
-            <h1>{{ $t(`TUIChat.manage.${TabName}`) }}</h1>
+            <h1>{{ $t(`TUIChat.manage.${TabName}`) }} <span v-if="currentTab === 'member'"> {{ groupDetail.memberNum || 0 }}{{ $t(`TUIChat.manage.人`) }} </span></h1>
           </main>
            <n-tabs
             v-else

src/TUIKit/TUIComponents/container/TUIChat/manage-components/style/web.scss

@@ -11,6 +11,8 @@
   z-index: 2;
   top: 54Px;
 
+
+
   &-header {
     padding: 12Px;
     display: flex;
@@ -175,7 +177,7 @@
         cursor: pointer;
         width: 100%;
         font-size: 14Px;
-        padding: 11Px 0;
+        padding: 10px 0;
         text-align: center;
         background: #198CFE;
         border-radius: 8px;

src/TUIKit/TUIComponents/styles/common.scss

@@ -73,4 +73,4 @@ textarea:active {
 
 img {
   pointer-events: none;
-}
+}

src/main.ts

@@ -15,11 +15,12 @@ import {
   NInput,
   NEmpty,
   NImage,
+  NScrollbar
 } from "naive-ui";
 
 // n-tab-pane
 const naive = create({
-  components: [NButton, NTabs, NTabPane, NInput, NEmpty, NImage, NSpin],
+  components: [NButton, NTabs, NTabPane, NInput, NEmpty, NImage, NSpin, NScrollbar],
 });
 
 import qs from "query-string";
@@ -43,9 +44,9 @@ console.log(import.meta.env.DEV, "import.meta.env.DEV");
 
 // 判断是否是测试环境的
 // import.meta.env.DEV ? 1400805079 : 1400799837; // 1400805079; // Your SDKAppID
-const SDKAppID = parseSearch.appId || hashSearch.appId || 1400799837; 
+const SDKAppID = parseSearch.appId || hashSearch.appId || 1400805079; 
 //import.meta.env.DEV ? "c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30" : "37bfb220843e25e78768cadd0dc06756e460e55bd631354930a4149565a1d0c9"; //"c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30"; // Your secretKey
-const secretKey = parseSearch.secretKey || hashSearch.secretKey || "37bfb220843e25e78768cadd0dc06756e460e55bd631354930a4149565a1d0c9"; 
+const secretKey = parseSearch.secretKey || hashSearch.secretKey || "c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30"; 
 const userID = parseSearch.userID; //|| "KT:140:TEACHER"; // User ID
 
 // init TUIKit