Merge branch 'kt-20250318'

src/TUIKit/TUIComponents/components/dialogTUi/index.vue

@@ -6,14 +6,14 @@
           <img class="iconMessage" src="../../assets/icon/icon-message.png" />
           {{title}}
         </h1>
-        <i class="icon icon-close" @click="toggleView"></i>
+        <i class="icon icon-close3" @click="toggleView"></i>
       </header>
       <div class="dialog-main-content">
         <slot />
       </div>
       <footer v-if="isFooterShow">
-        <button class="btn btn-cancel" @click="toggleView">{{$t('component.取消')}}</button>
-        <button class="btn btn-default" @click="submit">{{$t('component.确定')}}</button>
+        <button class="btn btn-cancel" @click="toggleView">{{cancelText}}</button>
+        <button class="btn btn-default" @click="submit">{{confirmText}}</button>
       </footer>
     </main>
   </div>
@@ -52,6 +52,14 @@ export default defineComponent({
       type: Boolean,
       default: () => false,
     },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    confirmText: {
+      type: String,
+      default: '确定'
+    }
   },
   setup(props:any, ctx:any) {
     const data = reactive({
@@ -106,15 +114,22 @@ export default defineComponent({
       background: linear-gradient( 312deg, #1B7AF8 0%, #3CBBFF 100%);
       border-radius: 5Px;
       font-weight: 600;
-      font-size: 12Px;
+      font-size: 14px;
       color: #FFFFFF;
+      height: 32Px;
       border: none;
+      min-width: 68px;
+      padding: 0 18Px
+      // padding-left: 18Px;
+      // padding-right: 18Px;
+    }
+    .btn:focus {
+      outline: none;
     }
     .btn-cancel {
       background: #F1F2F6;
       border-radius: 5Px;
       font-weight: 600;
-      font-size: 12Px;
       color: #1E2022;
       border: none;
     }

src/TUIKit/TUIComponents/components/dialogTUi/style/web.scss

@@ -18,7 +18,7 @@
   }
 
   &-main {
-    min-width: 458Px;
+    width: 458Px;
     border-radius: 10Px;
     padding: 20Px 24Px;
 

src/TUIKit/TUIComponents/components/transferTUI/index.vue

@@ -16,8 +16,8 @@
               class="TheSearch"
               style="
                 --n-border-radius: 5px;
-                --n-font-size: 12px;
-                --n-height: 32px;
+                --n-font-size: 14px;
+                --n-height: 34px;
                 --n-caret-color: #198cfe;
                 --n-border-hover: 1px solid #198cfe;
                 --n-border-focus: 1px solid #198cfe;
@@ -144,7 +144,7 @@
       </div>
       <div class="right">
         <!-- <header v-if="!isH5">{{ title }}</header> -->
-        <p class="selectAll" v-if="selectedList.length > 0 && !isH5">
+        <p class="selectAll" v-if="!isH5">
             当前选中<span>（{{ selectedList.length}}）：</span>
           </p>
         <ul class="list" v-show="resultShow">
@@ -176,10 +176,10 @@
             ></i>
           </li>
 
-          <div class="theEmtpy" v-if="selectedList.length <= 0" style="height: 90%">
+          <!-- <div class="theEmtpy" v-if="selectedList.length <= 0" style="height: 90%">
             <img class="emptyImg" src="../../assets/nomore.png" />
             <p>暂无数据</p>
-          </div>
+          </div> -->
         </ul>
         <footer>
           <button class="btn btn-cancel" @click="cancel">
@@ -512,7 +512,7 @@ export default defineComponent({
   .user-item {
     display: flex;
     align-items: center;
-    font-size: 12px;
+    font-size: 14px;
     color: #000000;
     line-height: 20px;
     .avatar {
@@ -544,15 +544,18 @@ export default defineComponent({
       background: linear-gradient( 312deg, #1B7AF8 0%, #3CBBFF 100%);
       border-radius: 5px;
       font-weight: 600;
-      font-size: 12px;
+      font-size: 14px;
       color: #FFFFFF;
+      height: 32Px;
       border: none;
+      min-width: 68px;
+      padding-left: 0;
+      padding-right: 0;
     }
     .btn-cancel {
       background: #F1F2F6;
       border-radius: 5px;
       font-weight: 600;
-      font-size: 12px;
       color: #1E2022;
       border: none;
     }
@@ -564,7 +567,7 @@ export default defineComponent({
 .selectAll {
   padding: 23px 10px 10px;
   font-weight: 600 !important;
-  font-size: 12px !important;
+  font-size: 14px !important;
   color: #131415 !important;
   span {
     color: #777777;
@@ -583,6 +586,7 @@ export default defineComponent({
       width: 28px !important;
       height: 28px !important;
       border-radius: 5px !important;
+      margin-right: 10Px;
       margin-left: 0;
     }
   }

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

@@ -419,23 +419,37 @@
         />
       </MaskTUI>
       <DialogTUI
-        :title="$t(`TUIChat.manage.删除成员`)"
+        title="移除成员"
         :show="delDialogShow"
         :isH5="isH5"
         :center="true"
+        confirmText="移除"
         :isHeaderShow="!isH5"
         @submit="handleManage(userList, 'remove')"
         @update:show="(e) => (delDialogShow = e)"
       >
-        <p v-if="userList.length === 1" class="delDialog-title">
+        <!-- <p v-if="userList.length === 1" class="delDialog-title">
           {{ $t(`TUIChat.manage.确定从群聊中删除该成员？`) }}
-        </p>
-        <p v-if="userList.length > 1" class="delDialog-title">
-          {{ $t(`TUIChat.manage.确定从群聊中删除所选成员？`) }}
+        </p> -->
+        <p class="delDialog-title">
+          <!-- {{ $t(`TUIChat.manage.确定从群聊中删除所选成员？`) }} -->
+            {{ delFormatUsers(userList) }}
         </p>
       </DialogTUI>
 
       <DialogTUI
+        title="移交群主"
+        :show="changeOwnerShow"
+        :isH5="isH5"
+        :center="true"
+        :isHeaderShow="!isH5"
+        @submit="handleManage(userList, 'changeOwner')"
+        @update:show="(e) => (changeOwnerShow = e)"
+      >
+        <p class="delDialog-title">{{ changeOwnerMessage }}</p>
+      </DialogTUI>
+
+      <DialogTUI
         title="退出群聊"
         :show="quitDialogShow"
         :isH5="isH5"
@@ -571,6 +585,8 @@ const manage = defineComponent({
       delDialogShow: false,
       quitDialogShow: false,
       dimmisDialogShow: false,
+      changeOwnerShow: false,
+      changeOwnerMessage: '',
       userList: [],
       transferTitle: "",
       member: {
@@ -1042,11 +1058,34 @@ const manage = defineComponent({
       }
     };
 
+    const delFormatUsers = (userList: any[]) => {
+      let usernames: string[] = []
+      userList.forEach((item: any) => {
+        usernames.push(item.nick || item.imUserId)
+      })
+      let message = '移除后，' + usernames.join('、')
+      if(usernames.length > 3) {
+        message += `等${usernames.length}人`
+      }
+      message += '将退出群聊'
+      return message
+    }
+
     const submit = (userList: any) => {
+      console.log(userList, data.transferType)
       if (userList.length <= 0) return;
       if (data.transferType === "remove") {
         data.userList = userList;
         data.delDialogShow = !data.delDialogShow;
+      } else if(data.transferType === "changeOwner") {
+        data.userList = userList;
+        data.changeOwnerShow = !data.delDialogShow;
+        let username = userList[0]?.nick || ''
+        if(username) {
+          data.changeOwnerMessage = '请确认是否将群主移交给' + username
+        } else {
+          data.changeOwnerMessage = '请确认是否移交群主'
+        }
       } else {
         handleManage(userList, data.transferType);
       }
@@ -1346,6 +1385,7 @@ const manage = defineComponent({
       manageNotificationDetailRef,
       handleGroupIDCopy,
       handleMemberProfileShow,
+      delFormatUsers
     };
   },
 });

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

@@ -361,6 +361,7 @@
 .delDialog-title {
   text-align: left;
   padding-left: 28Px;
+  color: #777777;
 }
 
 .icon-chat-setting {

src/TUIKit/TUIComponents/container/TUIChat/plugin-components/forward/forward.vue

@@ -1,66 +1,68 @@
 <template>
-  <div>
-    <div
+  <!-- <div> -->
+  <!-- <div
       class="forward"
       :class="[isH5 ? 'forward-h5' : '']"
       v-if="show"
       ref="dialog"
+    ></div> -->
+  <MaskTUI :show="show" @update:show="onMaskShow">
+    <Transfer
+      title="转发"
+      :list="list"
+      :isSearch="false"
+      :isH5="isH5"
+      :isCustomItem="true"
+      :resultShow="true"
+      @submit="handleForWordMessage"
+      @cancel="toggleShow"
     >
-      <Transfer
-        title="转发"
-        :list="list"
-        :isSearch="false"
-        :isH5="isH5"
-        :isCustomItem="true"
-        :resultShow="true"
-        @submit="handleForWordMessage"
-        @cancel="toggleShow"
-      >
-        <template #left="{ data }">
-          <slot name="left" :data="data" />
-        </template>
-        <template #right="{ data }">
-          <slot name="right" :data="data" />
-        </template>
-      </Transfer>
-    </div>
-  </div>
+      <template #left="{ data }">
+        <slot name="left" :data="data" />
+      </template>
+      <template #right="{ data }">
+        <slot name="right" :data="data" />
+      </template>
+    </Transfer>
+  </MaskTUI>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, watchEffect, toRefs, ref } from 'vue';
-import Transfer from '../../../../components/transferTUI/index.vue';
-import { handleErrorPrompts } from '../../../utils';
-import { onClickOutside } from '@vueuse/core';
+import { defineComponent, reactive, watchEffect, toRefs, ref } from "vue";
+import Transfer from "../../../../components/transferTUI/index.vue";
+import MaskTUI from "../../../../components/maskTUI/mask.vue";
+import { handleErrorPrompts } from "../../../utils";
+// import { onClickOutside } from "@vueuse/core";
 
 const Forward = defineComponent({
   components: {
-    Transfer
+    Transfer,
+    MaskTUI,
   },
-  name: '转发',
+  name: "转发",
   props: {
     list: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     message: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     show: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     isH5: {
       type: Boolean,
-      default: () => false
-    }
+      default: () => false,
+    },
   },
   setup(props: any, ctx: any) {
     const data = reactive({
       list: [],
       show: false,
-      to: -1
+      to: -1,
     });
 
     const dialog: any = ref();
@@ -73,16 +75,22 @@ const Forward = defineComponent({
     const toggleShow = () => {
       data.show = !data.show;
       if (!data.show) {
-        ctx.emit('update:show', data.show);
+        ctx.emit("update:show", data.show);
         data.to = -1;
       }
     };
 
-    onClickOutside(dialog, () => {
-      data.show = false;
-      ctx.emit('update:show', data.show);
+    const onMaskShow = (val: boolean) => {
+      data.show = val;
+      ctx.emit("update:show", data.show);
       data.to = -1;
-    });
+    };
+
+    // onClickOutside(dialog, () => {
+    //   data.show = false;
+    //   ctx.emit('update:show', data.show);
+    //   data.to = -1;
+    // });
 
     const handleForWordMessage = async (list: any) => {
       list.map(async (item: any) => {
@@ -98,22 +106,23 @@ const Forward = defineComponent({
     return {
       ...toRefs(data),
       toggleShow,
+      onMaskShow,
       handleForWordMessage,
-      dialog
+      dialog,
     };
-  }
+  },
 });
 export default Forward;
 </script>
 
 <style lang="scss" scoped>
-@import url('../../../../styles/common.scss');
-@import url('../../../../styles/icon.scss');
+@import url("../../../../styles/common.scss");
+@import url("../../../../styles/icon.scss");
 .forward {
   position: absolute;
   z-index: 5;
   box-sizing: border-box;
-  border-radius: 8px;
+  border-radius: 16px;
   padding: 15px 20px;
   padding: 0;
   left: -90px;

src/TUIKit/TUIComponents/styles/icon.scss

@@ -471,6 +471,13 @@
   transform: rotate(-45deg);
 }
 
+.icon-close3 {
+  width: 14Px;
+  height: 14Px;
+  background: url('../assets/icon/icon-close3.png') no-repeat;
+  background-size: contain;
+}
+
 .plus {
   display: inline-block;
   width: 30Px;