Revert "更新添加IM"

This reverts commit 4b12d8a131d369488ffd664fb2fd2d308a38cef3.

components.d.ts

@@ -11,7 +11,6 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Application: typeof import('./src/components/Application/Application.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
-    NInput: typeof import('naive-ui')['NInput']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     RouterLink: typeof import('vue-router')['RouterLink']

package-lock.json

@@ -19,7 +19,6 @@
         "cropperjs": "^1.5.13",
         "dayjs": "^1.11.7",
         "echarts": "^5.4.2",
-        "eventemitter3": "^5.0.1",
         "html2canvas": "^1.4.1",
         "lib-flexible": "^0.3.2",
         "lodash": "^4.17.21",
@@ -5531,11 +5530,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/eventemitter3": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
-    },
     "node_modules/evtd": {
       "version": "0.2.4",
       "resolved": "https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz",
@@ -15792,11 +15786,6 @@
       "resolved": "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
     },
-    "eventemitter3": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
-    },
     "evtd": {
       "version": "0.2.4",
       "resolved": "https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz",

package.json

@@ -33,7 +33,6 @@
     "cropperjs": "^1.5.13",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.2",
-    "eventemitter3": "^5.0.1",
     "html2canvas": "^1.4.1",
     "lib-flexible": "^0.3.2",
     "lodash": "^4.17.21",

src/TUIKit/TUIComponents/components/TheSearch/index.module.less

@@ -1,58 +0,0 @@
-.TheSearch {
-  border-radius: 20Px !important;
-
-  &.noBorder {
-    --n-border: none !important;
-  }
-
-  :global {
-    .n-input-wrapper {
-      padding-left: 12Px;
-      padding-right: 4Px;
-      height: 32Px !important;
-    }
-
-    .n-button {
-      height: 26Px;
-      font-size: 12Px;
-      font-weight: 500;
-      width: auto;
-      opacity: 0.7;
-    }
-
-  }
-
-  .active {
-    display: none;
-  }
-
-  .active,
-  .default {
-    width: 14Px;
-    height: 14Px;
-  }
-
-  &:global(.n-input--focus) {
-    .active {
-      display: block;
-    }
-
-    .default {
-      display: none;
-    }
-
-    :global {
-      .n-button {
-        opacity: 1;
-      }
-    }
-  }
-
-  &:hover {
-    :global {
-      .n-button {
-        opacity: 1;
-      }
-    }
-  }
-}

src/TUIKit/TUIComponents/components/TheSearch/index.tsx

@@ -1,81 +0,0 @@
-import { PropType, defineComponent, reactive } from 'vue';
-import styles from './index.module.less';
-import { InputProps, NButton, NInput } from 'naive-ui';
-import icon_search from '/src/common/images/icon_search.svg';
-import icon_searchActive from '/src/common/images/icon_searchActive.svg';
-import { useThrottleFn } from '@vueuse/core';
-
-export default defineComponent({
-  name: 'TheSearch',
-  props: {
-    /** 圆角 */
-    round: {
-      type: Boolean as PropType<InputProps['round']>,
-      default: false
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    placeholder: {
-      type: String,
-      default: '请输入搜索关键词'
-    },
-    showSearchButton: {
-      type: Boolean,
-      default: true
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['search'],
-  setup(props, { emit }) {
-    const searchData = reactive({
-      value: ''
-    });
-    const debouncedRequest = useThrottleFn(() => {
-      if (props.loading) return;
-      emit('search', searchData.value ? searchData.value.trim() : '');
-    }, 500);
-    return () => (
-      <NInput
-        class={[styles.TheSearch, props.border ? '' : styles.noBorder]}
-        style={'--n-font-size: 12px;--n-height:32px'}
-        round={props.round}
-        placeholder={props.placeholder}
-        clearable
-        v-model:value={searchData.value}
-        onClear={() => {
-          searchData.value = '';
-          debouncedRequest();
-        }}
-        onKeyup={(e: KeyboardEvent) => {
-          e.stopPropagation();
-          if (e.code === 'Enter') {
-            debouncedRequest();
-          }
-        }}>
-        {{
-          prefix: () => (
-            <>
-              <img class={styles.default} src={icon_search} />
-              <img class={styles.active} src={icon_searchActive} />
-            </>
-          ),
-          suffix: () =>
-            props.showSearchButton && (
-              <NButton
-                size="small"
-                round
-                type="primary"
-                onClick={() => debouncedRequest()}>
-                搜索
-              </NButton>
-            )
-        }}
-      </NInput>
-    );
-  }
-});

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

@@ -326,8 +326,4 @@
 .delDialog-title {
   text-align: center;
   padding: 20Px 0;
-}
-
-.icon-chat-setting {
-  margin-right: 35Px;
 }

src/TUIKit/TUIComponents/container/TUIConversation/index.vue

@@ -1,44 +1,25 @@
 <template>
-  <div style="height: 100%">
-    <div class="sectionSearch">
-      <the-search
-        placeholder="请输入名称"
-        :show-search-button="false"
-        :loading="loading"
-        @search="(val: any) => {
-          noSearch(val)
-        }"
-      />
+  <div class="TUI-conversation">
+    <div class="network" v-if="isNetwork">
+      <i class="icon icon-error">!</i>
+      <p>️{{ $t('TUIConversation.网络异常，请您检查网络设置') }}</p>
     </div>
-    <div class="TUI-conversation">
-      <div class="network" v-if="isNetwork">
-        <i class="icon icon-error">!</i>
-        <p>️{{ $t('TUIConversation.网络异常，请您检查网络设置') }}</p>
-      </div>
-      <main class="TUI-conversation-list">
-        <TUIConversationList
-          :currentID="currentConversationID"
-          :data="conversationData"
-          @handleItem="handleCurrentConversation"
-          :isH5="env.isH5"
-          :displayOnlineStatus="displayOnlineStatus"
-          :userStatusList="userStatusList"
-        />
-      </main>
-
-      <the-empty
-        v-if="!isNetwork && !loading && conversationData.list.length <= 0"
-        style="height: 90%"
+    <main class="TUI-conversation-list">
+      <TUIConversationList
+        :currentID="currentConversationID"
+        :data="conversationData"
+        @handleItem="handleCurrentConversation"
+        :isH5="env.isH5"
+        :displayOnlineStatus="displayOnlineStatus"
+        :userStatusList="userStatusList"
       />
-    </div>
+    </main>
   </div>
 </template>
 <script lang="ts">
-import TheEmpty from '@/components/TheEmpty';
 import { defineComponent, reactive, toRefs, computed, watch } from 'vue';
 import TUIConversationList from './components/list';
 import { caculateTimeago, isArrayEqual } from '../utils';
-import TheSearch from '../../components/TheSearch';
 import {
   handleAvatar,
   handleName,
@@ -50,9 +31,7 @@ const TUIConversation = defineComponent({
   name: 'TUIConversation',
 
   components: {
-    TUIConversationList,
-    TheSearch,
-    TheEmpty
+    TUIConversationList
   },
   props: {
     displayOnlineStatus: {
@@ -64,10 +43,8 @@ const TUIConversation = defineComponent({
     const TUIServer: any = TUIConversation?.TUIServer;
     const data = reactive({
       currentConversationID: '',
-      keyword: '',
-      loading: false,
       conversationData: {
-        list: [] as any,
+        list: [],
         handleItemAvator: (item: any) => handleAvatar(item),
         handleItemName: (item: any) => handleName(item),
         handleShowAt: (item: any) => handleAt(item),
@@ -86,14 +63,7 @@ const TUIConversation = defineComponent({
       userStatusList: new Map()
     });
 
-    try {
-      data.loading = true;
-      TUIServer.bind(data, () => {
-        data.loading = false;
-      });
-    } catch {
-      data.loading = false;
-    }
+    TUIServer.bind(data);
 
     TUIConversationList.TUIServer = TUIServer;
 
@@ -146,22 +116,10 @@ const TUIConversation = defineComponent({
       TUIServer.handleCurrentConversation(value);
     };
 
-    //
-    const noSearch = async (val: string) => {
-      data.loading = true;
-      try {
-        data.conversationData.list = [];
-        await TUIServer.getConversationListForName(val);
-      } catch {
-        //
-      }
-      data.loading = false;
-    };
     return {
       ...toRefs(data),
       handleCurrentConversation,
-      isNetwork,
-      noSearch
+      isNetwork
     };
   }
 });

src/TUIKit/TUIComponents/container/TUIConversation/server.ts

@@ -1,5 +1,5 @@
 import IComponentServer from '../IComponentServer';
-import { eventGlobal } from '/src/utils';
+
 /**
  * class TUIConversationServer
  *
@@ -14,11 +14,7 @@ export default class TUIConversationServer extends IComponentServer {
     super();
     this.TUICore = TUICore;
     this.bindTIMEvent();
-    this.store = TUICore.setComponentStore(
-      'TUIConversation',
-      {},
-      this.updateStore.bind(this)
-    );
+    this.store = TUICore.setComponentStore('TUIConversation', {}, this.updateStore.bind(this));
   }
 
   /**
@@ -57,7 +53,7 @@ export default class TUIConversationServer extends IComponentServer {
         TUIName: 'TUIConversation',
         callback: () => {
           callback && callback(resolve, reject);
-        }
+        },
       };
       this.TUICore.setAwaitFunc(config.TUIName, config.callback);
     });
@@ -72,38 +68,16 @@ export default class TUIConversationServer extends IComponentServer {
    */
 
   private bindTIMEvent() {
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.CONVERSATION_LIST_UPDATED,
-      this.handleConversationListUpdate,
-      this
-    );
-    this.TUICore.tim.on(
-      this.TUICore.TIM.EVENT.NET_STATE_CHANGE,
-      this.handleNetStateChange,
-      this
-    );
+    this.TUICore.tim.on(this.TUICore.TIM.EVENT.CONVERSATION_LIST_UPDATED, this.handleConversationListUpdate, this);
+    this.TUICore.tim.on(this.TUICore.TIM.EVENT.NET_STATE_CHANGE, this.handleNetStateChange, this);
   }
 
   private unbindTIMEvent() {
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.CONVERSATION_LIST_UPDATED,
-      this.handleConversationListUpdate
-    );
-    this.TUICore.tim.off(
-      this.TUICore.TIM.EVENT.NET_STATE_CHANGE,
-      this.handleNetStateChange
-    );
+    this.TUICore.tim.off(this.TUICore.TIM.EVENT.CONVERSATION_LIST_UPDATED, this.handleConversationListUpdate);
+    this.TUICore.tim.off(this.TUICore.TIM.EVENT.NET_STATE_CHANGE, this.handleNetStateChange);
   }
 
   private handleConversationListUpdate(res: any) {
-    // 判断SDK是否初始化
-    if (this.TUICore.tim.isReady()) {
-      eventGlobal.emit(
-        'onNoReadMessageCount',
-        this.TUICore.tim.getTotalUnreadMessageCount()
-      );
-    }
-
     this.handleFilterSystem(res.data);
   }
 
@@ -120,65 +94,13 @@ export default class TUIConversationServer extends IComponentServer {
   private handleFilterSystem(list: any) {
     const options = {
       allConversationList: list,
-      conversationList: []
+      conversationList: [],
     };
-    const currentList = list.filter(
-      (item: any) =>
-        item?.conversationID === this?.currentStore?.currentConversationID
-    );
+    const currentList = list.filter((item: any) => item?.conversationID === this?.currentStore?.currentConversationID);
     if (currentList.length === 0) {
       this.handleCurrentConversation({});
     }
-    options.conversationList = list.filter(
-      (item: any) => item.type !== this.TUICore.TIM.TYPES.CONV_SYSTEM
-    );
-    this.store.allConversationList = options.allConversationList;
-    this.store.conversationList = options.conversationList;
-    return options;
-  }
-
-  /**
-   * 处理conversationList
-   *
-   * @param {Array} list conversationList
-   * @returns {Object}
-   */
-  private handleFilterName(list: any, keyword: string) {
-    const options = {
-      allConversationList: list,
-      conversationList: []
-    };
-    console.log(list, 'list');
-    const currentList: any = [];
-    list.forEach((item: any) => {
-      console.log(item, 'item', keyword);
-      if (item.type === 'GROUP') {
-        console.log(
-          item.type,
-          item.groupProfile?.name,
-          item.groupProfile?.name.indexOf(keyword)
-        );
-        if (item.groupProfile?.name.indexOf(keyword) >= 0) {
-          currentList.push(item);
-        }
-      }
-      if (item.type === 'C2C') {
-        console.log(
-          item.type,
-          item.userProfile?.nick,
-          item.userProfile?.nick.indexOf(keyword)
-        );
-        if (item.userProfile?.nick.indexOf(keyword) >= 0) {
-          currentList.push(item);
-        }
-      }
-    });
-    // if (currentList.length === 0) {
-    //   this.handleCurrentConversation({});
-    // }
-    options.conversationList = currentList.filter(
-      (item: any) => item.type !== this.TUICore.TIM.TYPES.CONV_SYSTEM
-    );
+    options.conversationList = list.filter((item: any) => item.type !== this.TUICore.TIM.TYPES.CONV_SYSTEM);
     this.store.allConversationList = options.allConversationList;
     this.store.conversationList = options.conversationList;
     return options;
@@ -202,9 +124,7 @@ export default class TUIConversationServer extends IComponentServer {
   public async setMessageRead(conversationID: string) {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const imResponse: any = await this.TUICore.tim.setMessageRead({
-          conversationID
-        });
+        const imResponse: any = await this.TUICore.tim.setMessageRead({ conversationID });
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -221,9 +141,7 @@ export default class TUIConversationServer extends IComponentServer {
   public async deleteConversation(conversationID: string) {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const imResponse: any = await this.TUICore.tim.deleteConversation(
-          conversationID
-        );
+        const imResponse: any = await this.TUICore.tim.deleteConversation(conversationID);
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -257,9 +175,7 @@ export default class TUIConversationServer extends IComponentServer {
   public async muteConversation(options: any) {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const imResponse: any = await this.TUICore.tim.setMessageRemindType(
-          options
-        );
+        const imResponse: any = await this.TUICore.tim.setMessageRemindType(options);
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -275,9 +191,7 @@ export default class TUIConversationServer extends IComponentServer {
   public async getConversationProfile(conversationID: string) {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const imResponse = await this.TUICore.tim.getConversationProfile(
-          conversationID
-        );
+        const imResponse = await this.TUICore.tim.getConversationProfile(conversationID);
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -294,7 +208,6 @@ export default class TUIConversationServer extends IComponentServer {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
         const imResponse = await this.TUICore.tim.getConversationList();
-        console.log(imResponse, 'getConversationList');
         this.handleFilterSystem(imResponse.data.conversationList);
         resolve(imResponse);
       } catch (error) {
@@ -303,24 +216,6 @@ export default class TUIConversationServer extends IComponentServer {
     });
   }
 
-  /*
-   * 获取 conversationList
-   *
-   * @returns {Promise}
-   */
-  public async getConversationListForName(keyword: string) {
-    return this.handlePromiseCallback(async (resolve: any, reject: any) => {
-      try {
-        const imResponse = await this.TUICore.tim.getConversationList();
-        console.log(imResponse, 'getConversationListForName');
-        this.handleFilterName(imResponse.data.conversationList, keyword);
-        resolve(imResponse);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
   /**
    * 获取其他用户资料
    *
@@ -330,9 +225,7 @@ export default class TUIConversationServer extends IComponentServer {
   public async getUserProfile(userIDList: Array<string>) {
     return this.handlePromiseCallback(async (resolve: any, reject: any) => {
       try {
-        const imResponse = await this.TUICore.tim.getUserProfile({
-          userIDList
-        });
+        const imResponse = await this.TUICore.tim.getUserProfile({ userIDList });
         resolve(imResponse);
       } catch (error) {
         reject(error);
@@ -354,10 +247,9 @@ export default class TUIConversationServer extends IComponentServer {
    * @param {Object} params 使用的数据
    * @returns {Object} 数据
    */
-  public async bind(params: any, callBack?: any) {
+  public async bind(params: any) {
     this.currentStore = params;
     await this.getConversationList();
-    callBack && callBack();
     return this.currentStore;
   }
 
@@ -365,6 +257,7 @@ export default class TUIConversationServer extends IComponentServer {
   public handleCurrentConversation(value: any) {
     // 通知 TUIChat 切换会话或关闭会话
     this.TUICore.getStore().TUIChat.conversation = value || {};
+
     if (!value?.conversationID) {
       this.currentStore.currentConversationID = '';
       return;

src/TUIKit/TUIComponents/container/TUIConversation/style/web.scss

@@ -1,7 +1,7 @@
 .TUI-conversation {
   position: relative;
   width: 100%;
-  height: calc(100% - 49px);
+  height: 100%;
   overflow-y: auto;
   box-sizing: border-box;
 
@@ -52,8 +52,4 @@ input {
   height: 24Px;
   border-radius: 5Px;
   padding: 0 10Px;
-}
-
-.sectionSearch {
-  padding: 0 20px 12px;
 }

src/TUIKit/TUIComponents/container/TUIGroup/index.vue

@@ -1,77 +1,59 @@
 <template>
-  <div style="height: 100%">
-    <div class="sectionSearch">
-      <the-search
-        placeholder="请输入群聊名称"
-        :show-search-button="false"
-        @search="(val: any) => {
-          noSearch(val)
-        }"
-      />
+  <div class="TUI-group">
+    <div class="network" v-if="isNetwork">
+      <i class="icon icon-error">!</i>
+      <p>️{{ $t('TUIConversation.网络异常，请您检查网络设置') }}</p>
     </div>
-    <div class="TUI-group">
-      <div class="network" v-if="isNetwork">
-        <i class="icon icon-error">!</i>
-        <p>️{{ $t('TUIConversation.网络异常，请您检查网络设置') }}</p>
-      </div>
-      <main class="TUI-conversation-list">
-        <aside class="TUI-contact-left">
-          <ul class="TUI-contact-list">
-            <li
-              class="TUI-contact-list-item"
-              v-for="(item, index) in groupList"
-              :key="index"
-              @click="handleListItem(item)"
-            >
-              <aside class="left">
-                <img
-                  class="avatar"
-                  :src="
-                    item.img ||
-                    'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'
-                  "
-                  onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'"
-                />
-              </aside>
-              <div class="content-header">
-                <label>
-                  <p class="name">{{ item.name }}</p>
-                </label>
-                <div class="middle-box">
-                  <p>共{{ item.memberNum || 0 }}人</p>
-                </div>
+    <main class="TUI-conversation-list">
+      <aside class="TUI-contact-left">
+        <ul class="TUI-contact-list">
+          <li
+            class="TUI-contact-list-item"
+            v-for="(item, index) in groupList"
+            :key="index"
+            @click="handleListItem(item)"
+          >
+            <aside class="left">
+              <img
+                class="avatar"
+                :src="
+                  item.img ||
+                  'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'
+                "
+                onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690775328089.png'"
+              />
+            </aside>
+            <div class="content-header">
+              <label>
+                <p class="name">{{ item.name }}</p>
+              </label>
+              <div class="middle-box">
+                <p>共{{ item.memberNum || 0 }}人</p>
               </div>
-              <div class="content-footer">
-                <span class="time"></span>
-                <img
-                  v-if="item.selfInfo?.messageRemindType === 'AcceptNotNotify'"
-                  class="mute-icon"
-                  src="../../assets/icon/mute.svg"
-                />
-                <i></i>
-              </div>
-            </li>
-          </ul>
-        </aside>
-      </main>
-      <!--  -->
-      <the-empty
-        v-if="!isNetwork && !loading && groupList.length <= 0"
-        style="height: 90%"
-      />
-    </div>
+            </div>
+            <div class="content-footer">
+              <span class="time"></span>
+              <img
+                v-if="item.selfInfo?.messageRemindType === 'AcceptNotNotify'"
+                class="mute-icon"
+                src="../../assets/icon/mute.svg"
+              />
+              <i></i>
+            </div>
+          </li>
+        </ul>
+      </aside>
+    </main>
+    <!--  -->
   </div>
 </template>
 <script lang="ts">
-import TheEmpty from '@/components/TheEmpty';
 import { computed, defineComponent, onMounted, reactive, toRefs } from 'vue';
 import { caculateTimeago } from '../utils';
 import { handleAvatar, handleName, handleAt } from '../TUIChat/utils/utils';
 import { imGroupPage } from '/src/TUIKit/api';
-import TheSearch from '../../components/TheSearch';
 const TUIGroup = defineComponent({
   name: 'TUIGroup',
-  components: { TheEmpty, TheSearch },
   props: {
     displayOnlineStatus: {
       type: Boolean,
@@ -81,11 +63,9 @@ const TUIGroup = defineComponent({
   setup(props) {
     const TUIServer: any = TUIGroup.TUIServer;
     const data = reactive({
-      loading: true,
       page: 1,
-      rows: 100,
-      keyword: '',
-      finshed: false, // 是否加载完
+      rows: 20,
+      finish: false, // 是否加载完
       groupList: [] as any,
       searchGroup: [] as any,
       searchID: '',
@@ -115,46 +95,31 @@ const TUIGroup = defineComponent({
       });
     };
     const isNetwork = computed(() => {
-      // const disconnected =
-      //   data.netWork === TUIServer.TUICore.TIM.TYPES.NET_STATE_DISCONNECTED;
-      // const connecting =
-      //   data.netWork === TUIServer.TUICore.TIM.TYPES.NET_STATE_CONNECTING;
-      // return disconnected || connecting;
-      return false;
+      const disconnected =
+        data.netWork === TUIServer.TUICore.TIM.TYPES.NET_STATE_DISCONNECTED;
+      const connecting =
+        data.netWork === TUIServer.TUICore.TIM.TYPES.NET_STATE_CONNECTING;
+      return disconnected || connecting;
     });
 
     // 获取列表
     const getList = async () => {
-      data.loading = true;
       try {
         const res = await imGroupPage({
-          keyword: data.keyword,
           page: data.page,
           rows: data.rows
         });
 
         data.groupList.push(...(res.data.rows || []));
-
-        // 是否加载完成
-        data.finshed = res.data.pages <= res.data.current ? true : false;
       } catch {
         //
       }
-      data.loading = false;
     };
 
     onMounted(() => {
       getList();
     });
 
-    const noSearch = (val: string) => {
-      console.log(val, 'val');
-      data.page = 1;
-      data.keyword = val;
-      data.groupList = [];
-      getList();
-    };
-
     return {
       ...toRefs(data),
       handleListItem,
@@ -162,8 +127,7 @@ const TUIGroup = defineComponent({
       handleAvatar,
       handleName,
       handleAt,
-      handleItemTime,
-      noSearch
+      handleItemTime
     };
   }
 });

src/TUIKit/TUIComponents/container/TUIGroup/style/web.scss

@@ -1,293 +1,265 @@
- .TUI-group {
-   position: relative;
-   width: 100%;
-   height: calc(100% - 49px);
-   overflow-y: auto;
-   box-sizing: border-box;
- }
-
- .TUI-conversation-list {
-   position: absolute;
-   width: 100%;
- }
-
- .TUI-contact-list {
-   flex: 1;
-   width: 100%;
-   list-style: none;
-   position: relative;
-   width: 100%;
-   height: 100%;
-   overflow-y: auto;
-   box-sizing: border-box;
-
-   &-item {
-     margin: 0 6px;
-     padding: 12Px 9Px;
-     position: relative;
-     display: flex;
-     align-items: center;
-     border-radius: 8px;
-     cursor: pointer;
-
-     label {
-       font-size: 14Px;
-     }
-
-     &:hover {
-       background: #F5F6FA;
-
-       .icon-close {
-         display: inline-block;
-       }
-     }
-
-     .left {
-       position: relative;
-       width: 48Px;
-       height: 48Px;
-       margin-right: 10px;
-
-       .num {
-         position: absolute;
-         display: inline-block;
-         right: -8Px;
-         top: -8Px;
-         width: 20Px;
-         height: 20Px;
-         font-size: 10Px;
-         text-align: center;
-         line-height: 20Px;
-         border-radius: 50%;
-       }
-
-       .avatar {
-         width: 100%;
-         border-radius: 5Px;
-         height: 100%;
-         object-fit: cover;
-       }
-
-       .online-status {
-         box-sizing: border-box;
-         position: absolute;
-         width: 11Px;
-         height: 11Px;
-         // left: 24Px;
-         // top: 22Px;
-         right: 0px;
-         bottom: 3px;
-         border: 2Px solid #ffffff;
-         box-shadow: 0Px 0Px 4Px rgba(0, 0, 0, 0.102606);
-         border-radius: 50%;
-
-         &-online {
-           background: #29cc85;
-         }
-
-         &-offline {
-           background: #a4a4a4;
-         }
-       }
-     }
-
-     .content {
-       flex: 1;
-       padding-left: 8Px;
-       display: flex;
-       justify-content: space-between;
-       align-items: center;
-
-       ul {
-         flex: 1;
-         display: flex;
-         flex-direction: column;
-
-         li {
-           flex: 1;
-           display: flex;
-           align-items: center;
-           font-size: 14Px;
-           line-height: 16Px;
-
-           span {
-             flex: 1;
-             width: 0;
-             overflow: hidden;
-             text-overflow: ellipsis;
-             white-space: nowrap;
-           }
-         }
-
-         .name {
-           padding-bottom: 2Px;
-           font-size: 14Px;
-           color: #333;
-           font-weight: 500;
-         }
-       }
-
-       .type {
-         padding: 0 4Px;
-         line-height: 14Px;
-         font-size: 12Px;
-         border-radius: 1Px;
-       }
-     }
-   }
-
-   .not-aside {
-     padding-left: 40Px;
-     display: flex;
-     justify-content: space-between;
-   }
- }
-
- .reduce {
-   position: relative;
-   display: inline-block;
-   width: 36Px;
-   height: 36Px;
-
-   &::before {
-     position: absolute;
-     content: '';
-     width: 50%;
-     height: 1Px;
-     top: 0;
-     bottom: 0;
-     left: 0;
-     right: 0;
-     margin: auto;
-   }
- }
-
- .center {
-   display: flex;
-   justify-content: center;
- }
-
- .btn {
-   padding: 8Px 20Px;
-   border-radius: 4Px;
-   border: none;
-   font-size: 14Px;
-   text-align: center;
-   line-height: 20Px;
- }
-
- input {
-   box-sizing: border-box;
-   border-radius: 5Px;
-   padding: 10Px;
- }
-
- .search {
-   flex: 1;
-   display: flex;
-
-   &-box {
-     flex: 1;
-     display: flex;
-     align-items: center;
-
-     h1 {
-       padding: 2Px 8Px;
-       font-size: 14Px;
-     }
-
-     .input-box {
-       display: flex;
-       position: relative;
-       flex: 1;
-
-       input {
-         flex: 1;
-         margin-right: 0;
-       }
-
-       .icon {
-         position: absolute;
-         right: 10Px;
-         top: 0;
-         bottom: 0;
-         margin: auto 0;
-       }
-     }
-
-     .search-cancel {
-       padding-left: 10Px;
-       font-size: 12Px;
-       line-height: 18Px;
-     }
-   }
- }
-
- .content-header {
-   flex: 1;
-   display: flex;
-   flex-direction: column;
-
-   label {
-     flex: 1;
-     font-size: 14Px;
-   }
-
-   .name {
-     width: 110Px;
-     letter-spacing: 0;
-     font-size: 14Px;
-     overflow: hidden;
-     text-overflow: ellipsis;
-     white-space: nowrap;
-   }
- }
-
- .middle-box {
-   flex: 1;
-   display: flex;
-   align-items: center;
-   font-weight: 400;
-   color: #999999;
-   letter-spacing: 0;
-
-   span {
-     font-size: 12Px;
-   }
-
-   p {
-     flex: 1;
-     width: 0;
-     overflow: hidden;
-     text-overflow: ellipsis;
-     white-space: nowrap;
-     font-size: 12Px;
-     line-height: 16Px;
-   }
- }
-
- .content-footer {
-   line-height: 16Px;
-   display: flex;
-   flex-direction: column;
-
-   .time {
-     font-size: 12Px;
-     line-height: 16Px;
-     display: inline-block;
-     max-width: 75Px;
-     white-space: nowrap;
-     color: #bbbbbb
-   }
-
-   img {
-     width: 16Px;
-     height: 16Px;
-     margin-top: 5Px;
-     align-self: flex-end;
-   }
- }
-
- .sectionSearch {
-   padding: 0 20px 12px;
- }
+.TUI-contact-list {
+  flex: 1;
+  width: 100%;
+  list-style: none;
+
+  &-item {
+    padding: 16Px 12Px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    label {
+      font-size: 14Px;
+    }
+
+    &:hover {
+      .icon-close {
+        display: inline-block;
+      }
+    }
+
+    .left {
+      position: relative;
+      width: 48Px;
+      height: 48Px;
+      margin-right: 10px;
+
+      .num {
+        position: absolute;
+        display: inline-block;
+        right: -8Px;
+        top: -8Px;
+        width: 20Px;
+        height: 20Px;
+        font-size: 10Px;
+        text-align: center;
+        line-height: 20Px;
+        border-radius: 50%;
+      }
+
+      .avatar {
+        width: 100%;
+        border-radius: 5Px;
+      }
+
+      .online-status {
+        box-sizing: border-box;
+        position: absolute;
+        width: 11Px;
+        height: 11Px;
+        // left: 24Px;
+        // top: 22Px;
+        right: 0px;
+        bottom: 3px;
+        border: 2Px solid #ffffff;
+        box-shadow: 0Px 0Px 4Px rgba(0, 0, 0, 0.102606);
+        border-radius: 50%;
+
+        &-online {
+          background: #29cc85;
+        }
+
+        &-offline {
+          background: #a4a4a4;
+        }
+      }
+    }
+
+    .content {
+      flex: 1;
+      padding-left: 8Px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      ul {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        li {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          font-size: 14Px;
+          line-height: 16Px;
+
+          span {
+            flex: 1;
+            width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+        .name {
+          padding-bottom: 2Px;
+          font-size: 14Px;
+          color: #333;
+          font-weight: 500;
+        }
+      }
+
+      .type {
+        padding: 0 4Px;
+        line-height: 14Px;
+        font-size: 12Px;
+        border-radius: 1Px;
+      }
+    }
+  }
+
+  .not-aside {
+    padding-left: 40Px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.reduce {
+  position: relative;
+  display: inline-block;
+  width: 36Px;
+  height: 36Px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 50%;
+    height: 1Px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+}
+
+.btn {
+  padding: 8Px 20Px;
+  border-radius: 4Px;
+  border: none;
+  font-size: 14Px;
+  text-align: center;
+  line-height: 20Px;
+}
+
+input {
+  box-sizing: border-box;
+  border-radius: 5Px;
+  padding: 10Px;
+}
+
+.search {
+  flex: 1;
+  display: flex;
+
+  &-box {
+    flex: 1;
+    display: flex;
+    align-items: center;
+
+    h1 {
+      padding: 2Px 8Px;
+      font-size: 14Px;
+    }
+
+    .input-box {
+      display: flex;
+      position: relative;
+      flex: 1;
+
+      input {
+        flex: 1;
+        margin-right: 0;
+      }
+
+      .icon {
+        position: absolute;
+        right: 10Px;
+        top: 0;
+        bottom: 0;
+        margin: auto 0;
+      }
+    }
+
+    .search-cancel {
+      padding-left: 10Px;
+      font-size: 12Px;
+      line-height: 18Px;
+    }
+  }
+}
+
+.content-header {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  label {
+    flex: 1;
+    font-size: 14Px;
+  }
+
+  .name {
+    width: 110Px;
+    letter-spacing: 0;
+    font-size: 14Px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.middle-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  color: #999999;
+  letter-spacing: 0;
+
+  span {
+    font-size: 12Px;
+  }
+
+  p {
+    flex: 1;
+    width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12Px;
+    line-height: 16Px;
+  }
+}
+
+.content-footer {
+  line-height: 16Px;
+  display: flex;
+  flex-direction: column;
+
+  .time {
+    font-size: 12Px;
+    line-height: 16Px;
+    display: inline-block;
+    max-width: 75Px;
+    white-space: nowrap;
+    color: #bbbbbb
+  }
+
+  img {
+    width: 16Px;
+    height: 16Px;
+    margin-top: 5Px;
+    align-self: flex-end;
+  }
+}

src/TUIKit/TUIComponents/container/TUIPerson/index.vue

@@ -1,126 +1,35 @@
 <template>
-  <div style="height: 100%">
-    <div class="sectionSearch">
-      <the-search
-        placeholder="请输入联系人名称"
-        :show-search-button="false"
-        @search="(val: any) => {
-          noSearch(val)
-        }"
-      />
-    </div>
-    <div class="TUI-person">
-      <main class="TUI-conversation-list">
-        <aside class="TUI-contact-left">
-          <ul class="TUI-contact-list">
-            <li
-              class="TUI-contact-list-item"
-              v-for="(item, index) in friendList"
-              :key="index"
-              @click="handleListItem(item)"
-            >
-              <aside class="left">
-                <img
-                  class="avatar"
-                  :src="
-                    item.friendAvatar ||
-                    'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
-                  "
-                  onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
-                />
-              </aside>
-              <div class="content-header">
-                <label>
-                  <p class="name">{{ item.friendNickname }}</p>
-                </label>
-                <div class="middle-box">
-                  <p>{{ item.subjectName }}</p>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </aside>
-      </main>
-      <the-empty
-        v-if="!isNetwork && !loading && friendList.length <= 0"
-        style="height: 90%"
-      />
-    </div>
+  <div class="TUI-person" style="min-height: 100%">
+    <the-empty style="hieght: 90%" />
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, toRefs, onMounted } from 'vue';
-import { imUserFriendPage } from '/src/TUIKit/api';
 import TheEmpty from '@/components/TheEmpty';
-import TheSearch from '../../components/TheSearch';
+import { defineComponent, reactive, toRefs } from 'vue';
+
 const TUIPerson = defineComponent({
   name: 'TUIPerson',
   components: {
-    TheEmpty,
-    TheSearch
+    TheEmpty
   },
+
   setup(props) {
     const TUIServer: any = TUIPerson.TUIServer;
     const data = reactive({
       loading: true,
-      page: 1,
-      rows: 100,
-      keyword: '',
-      finshed: false, // 是否加载完
-      friendList: [] as any,
+      friendList: [],
       searchGroup: [],
       searchID: '',
       currentGroup: null
     });
-    // 获取列表
-    const getList = async () => {
-      data.loading = true;
-      try {
-        const res = await imUserFriendPage({
-          keyword: data.keyword,
-          page: data.page,
-          rows: data.rows
-        });
-
-        data.friendList.push(...(res.data.rows || []));
 
-        // 是否加载完成
-        data.finshed = res.data.pages <= res.data.current ? true : false;
-      } catch {
-        //
-      }
+    TUIServer.bind(data, (list: any) => {
       data.loading = false;
-    };
-
-    const handleListItem = async (item: any) => {
-      const name = `C2C${item.imUserId}`;
-      TUIServer.TUICore.TUIServer.TUIConversation.getConversationProfile(
-        name
-      ).then((imResponse: any) => {
-        // 通知 TUIConversation 添加当前会话
-        TUIServer.TUICore.TUIServer.TUIConversation.handleCurrentConversation(
-          imResponse.data.conversation
-        );
-
-        (data.currentGroup as any) = {};
-      });
-    };
-
-    const noSearch = (val: string) => {
-      data.page = 1;
-      data.keyword = val;
-      data.friendList = [];
-      getList();
-    };
-
-    onMounted(() => {
-      getList();
+      console.log(data.friendList);
     });
 
     return {
-      ...toRefs(data),
-      handleListItem,
-      noSearch
+      ...toRefs(data)
     };
   }
 });

src/TUIKit/TUIComponents/container/TUIPerson/style/web.scss

@@ -1,289 +1,265 @@
- .TUI-person {
-   position: relative;
-   width: 100%;
-   height: calc(100% - 49px);
-   overflow-y: auto;
-   box-sizing: border-box;
- }
-
- .TUI-conversation-list {
-   position: absolute;
-   width: 100%;
- }
-
-
- .TUI-contact-list {
-   flex: 1;
-   width: 100%;
-   list-style: none;
-
-   &-item {
-     margin: 0 6px;
-     padding: 12Px 9Px;
-     position: relative;
-     display: flex;
-     align-items: center;
-     cursor: pointer;
-
-     label {
-       font-size: 14Px;
-     }
-
-     &:hover {
-       background: #F5F6FA;
-
-       .icon-close {
-         display: inline-block;
-       }
-     }
-
-     .left {
-       position: relative;
-       width: 48Px;
-       height: 48Px;
-       margin-right: 10px;
-
-       .num {
-         position: absolute;
-         display: inline-block;
-         right: -8Px;
-         top: -8Px;
-         width: 20Px;
-         height: 20Px;
-         font-size: 10Px;
-         text-align: center;
-         line-height: 20Px;
-         border-radius: 50%;
-       }
-
-       .avatar {
-         width: 100%;
-         border-radius: 5Px;
-         height: 100%;
-         object-fit: cover;
-       }
-
-       .online-status {
-         box-sizing: border-box;
-         position: absolute;
-         width: 11Px;
-         height: 11Px;
-         // left: 24Px;
-         // top: 22Px;
-         right: 0px;
-         bottom: 3px;
-         border: 2Px solid #ffffff;
-         box-shadow: 0Px 0Px 4Px rgba(0, 0, 0, 0.102606);
-         border-radius: 50%;
-
-         &-online {
-           background: #29cc85;
-         }
-
-         &-offline {
-           background: #a4a4a4;
-         }
-       }
-     }
-
-     .content {
-       flex: 1;
-       padding-left: 8Px;
-       display: flex;
-       justify-content: space-between;
-       align-items: center;
-
-       ul {
-         flex: 1;
-         display: flex;
-         flex-direction: column;
-
-         li {
-           flex: 1;
-           display: flex;
-           align-items: center;
-           font-size: 14Px;
-           line-height: 16Px;
-
-           span {
-             flex: 1;
-             width: 0;
-             overflow: hidden;
-             text-overflow: ellipsis;
-             white-space: nowrap;
-           }
-         }
-
-         .name {
-           padding-bottom: 2Px;
-           font-size: 14Px;
-           color: #333;
-           font-weight: 500;
-         }
-       }
-
-       .type {
-         padding: 0 4Px;
-         line-height: 14Px;
-         font-size: 12Px;
-         border-radius: 1Px;
-       }
-     }
-   }
-
-   .not-aside {
-     padding-left: 40Px;
-     display: flex;
-     justify-content: space-between;
-   }
- }
-
- .reduce {
-   position: relative;
-   display: inline-block;
-   width: 36Px;
-   height: 36Px;
-
-   &::before {
-     position: absolute;
-     content: '';
-     width: 50%;
-     height: 1Px;
-     top: 0;
-     bottom: 0;
-     left: 0;
-     right: 0;
-     margin: auto;
-   }
- }
-
- .center {
-   display: flex;
-   justify-content: center;
- }
-
- .btn {
-   padding: 8Px 20Px;
-   border-radius: 4Px;
-   border: none;
-   font-size: 14Px;
-   text-align: center;
-   line-height: 20Px;
- }
-
- input {
-   box-sizing: border-box;
-   border-radius: 5Px;
-   padding: 10Px;
- }
-
- .search {
-   flex: 1;
-   display: flex;
-
-   &-box {
-     flex: 1;
-     display: flex;
-     align-items: center;
-
-     h1 {
-       padding: 2Px 8Px;
-       font-size: 14Px;
-     }
-
-     .input-box {
-       display: flex;
-       position: relative;
-       flex: 1;
-
-       input {
-         flex: 1;
-         margin-right: 0;
-       }
-
-       .icon {
-         position: absolute;
-         right: 10Px;
-         top: 0;
-         bottom: 0;
-         margin: auto 0;
-       }
-     }
-
-     .search-cancel {
-       padding-left: 10Px;
-       font-size: 12Px;
-       line-height: 18Px;
-     }
-   }
- }
-
- .content-header {
-   flex: 1;
-   display: flex;
-   flex-direction: column;
-   cursor: pointer;
-
-   label {
-     flex: 1;
-     font-size: 14Px;
-   }
-
-   .name {
-     width: 110Px;
-     letter-spacing: 0;
-     font-size: 14Px;
-     overflow: hidden;
-     text-overflow: ellipsis;
-     white-space: nowrap;
-   }
- }
-
- .middle-box {
-   flex: 1;
-   display: flex;
-   align-items: center;
-   font-weight: 400;
-   color: #999999;
-   letter-spacing: 0;
-
-   span {
-     font-size: 12Px;
-   }
-
-   p {
-     flex: 1;
-     width: 0;
-     overflow: hidden;
-     text-overflow: ellipsis;
-     white-space: nowrap;
-     font-size: 12Px;
-     line-height: 16Px;
-   }
- }
-
- .content-footer {
-   line-height: 16Px;
-   display: flex;
-   flex-direction: column;
-
-   .time {
-     font-size: 12Px;
-     line-height: 16Px;
-     display: inline-block;
-     max-width: 75Px;
-     white-space: nowrap;
-     color: #bbbbbb
-   }
-
-   img {
-     width: 16Px;
-     height: 16Px;
-     margin-top: 5Px;
-     align-self: flex-end;
-   }
- }
-
- .sectionSearch {
-   padding: 0 20px 12px;
- }
+.TUI-contact-list {
+  flex: 1;
+  width: 100%;
+  list-style: none;
+
+  &-item {
+    padding: 16Px 12Px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    label {
+      font-size: 14Px;
+    }
+
+    &:hover {
+      .icon-close {
+        display: inline-block;
+      }
+    }
+
+    .left {
+      position: relative;
+      width: 48Px;
+      height: 48Px;
+      margin-right: 10px;
+
+      .num {
+        position: absolute;
+        display: inline-block;
+        right: -8Px;
+        top: -8Px;
+        width: 20Px;
+        height: 20Px;
+        font-size: 10Px;
+        text-align: center;
+        line-height: 20Px;
+        border-radius: 50%;
+      }
+
+      .avatar {
+        width: 100%;
+        border-radius: 5Px;
+      }
+
+      .online-status {
+        box-sizing: border-box;
+        position: absolute;
+        width: 11Px;
+        height: 11Px;
+        // left: 24Px;
+        // top: 22Px;
+        right: 0px;
+        bottom: 3px;
+        border: 2Px solid #ffffff;
+        box-shadow: 0Px 0Px 4Px rgba(0, 0, 0, 0.102606);
+        border-radius: 50%;
+
+        &-online {
+          background: #29cc85;
+        }
+
+        &-offline {
+          background: #a4a4a4;
+        }
+      }
+    }
+
+    .content {
+      flex: 1;
+      padding-left: 8Px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      ul {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        li {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          font-size: 14Px;
+          line-height: 16Px;
+
+          span {
+            flex: 1;
+            width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+        .name {
+          padding-bottom: 2Px;
+          font-size: 14Px;
+          color: #333;
+          font-weight: 500;
+        }
+      }
+
+      .type {
+        padding: 0 4Px;
+        line-height: 14Px;
+        font-size: 12Px;
+        border-radius: 1Px;
+      }
+    }
+  }
+
+  .not-aside {
+    padding-left: 40Px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.reduce {
+  position: relative;
+  display: inline-block;
+  width: 36Px;
+  height: 36Px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 50%;
+    height: 1Px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+}
+
+.btn {
+  padding: 8Px 20Px;
+  border-radius: 4Px;
+  border: none;
+  font-size: 14Px;
+  text-align: center;
+  line-height: 20Px;
+}
+
+input {
+  box-sizing: border-box;
+  border-radius: 5Px;
+  padding: 10Px;
+}
+
+.search {
+  flex: 1;
+  display: flex;
+
+  &-box {
+    flex: 1;
+    display: flex;
+    align-items: center;
+
+    h1 {
+      padding: 2Px 8Px;
+      font-size: 14Px;
+    }
+
+    .input-box {
+      display: flex;
+      position: relative;
+      flex: 1;
+
+      input {
+        flex: 1;
+        margin-right: 0;
+      }
+
+      .icon {
+        position: absolute;
+        right: 10Px;
+        top: 0;
+        bottom: 0;
+        margin: auto 0;
+      }
+    }
+
+    .search-cancel {
+      padding-left: 10Px;
+      font-size: 12Px;
+      line-height: 18Px;
+    }
+  }
+}
+
+.content-header {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  label {
+    flex: 1;
+    font-size: 14Px;
+  }
+
+  .name {
+    width: 110Px;
+    letter-spacing: 0;
+    font-size: 14Px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.middle-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  color: #999999;
+  letter-spacing: 0;
+
+  span {
+    font-size: 12Px;
+  }
+
+  p {
+    flex: 1;
+    width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12Px;
+    line-height: 16Px;
+  }
+}
+
+.content-footer {
+  line-height: 16Px;
+  display: flex;
+  flex-direction: column;
+
+  .time {
+    font-size: 12Px;
+    line-height: 16Px;
+    display: inline-block;
+    max-width: 75Px;
+    white-space: nowrap;
+    color: #bbbbbb
+  }
+
+  img {
+    width: 16Px;
+    height: 16Px;
+    margin-top: 5Px;
+    align-self: flex-end;
+  }
+}

src/TUIKit/api.ts

@@ -8,12 +8,3 @@ export const imGroupPage = (params?: object) => {
     data: params
   });
 };
-
-/**
- * 即时通讯 - 好友列表
- */
-export const imUserFriendPage = (params?: object) => {
-  return request.post('/edu-app/imUserFriend/page', {
-    data: params
-  });
-};

src/components/layout/index.module.less

@@ -133,26 +133,21 @@
 
         :global {
           .n-badge-sup {
-            // left: 20px;
-            // -webkit-animation: TadaNum 1s 2s both infinite !important;
-            // -moz-animation: TadaNum 1s 2s both infinite !important;
-            // -ms-animation: TadaNum 1s 2s both infinite !important;
-            // animation: TadaNum 1s 2s both infinite !important;
+            left: 20px;
+            -webkit-animation: TadaNum 1s 2s both infinite !important;
+            -moz-animation: TadaNum 1s 2s both infinite !important;
+            -ms-animation: TadaNum 1s 2s both infinite !important;
+            animation: TadaNum 1s 2s both infinite !important;
           }
         }
 
         .messageIcon {
-
+          -webkit-animation: Tada 1s 2s both infinite;
+          -moz-animation: Tada 1s 2s both infinite;
+          -ms-animation: Tada 1s 2s both infinite;
+          animation: Tada 1s 2s both infinite;
           width: 32px;
           height: 32px;
-          cursor: pointer;
-
-          &.animation {
-            -webkit-animation: Tada 1s 2s both infinite;
-            -moz-animation: Tada 1s 2s both infinite;
-            -ms-animation: Tada 1s 2s both infinite;
-            animation: Tada 1s 2s both infinite;
-          }
         }
       }
 

src/components/layout/layoutTop.tsx

@@ -1,10 +1,4 @@
-import {
-  defineComponent,
-  getCurrentInstance,
-  onBeforeMount,
-  ref,
-  onMounted
-} from 'vue';
+import { defineComponent, getCurrentInstance, ref } from 'vue';
 import styles from './index.module.less';
 import {
   NImage,
@@ -31,12 +25,10 @@ import { SDKAppID, secretKey } from '/src/main';
 import 'animate.css';
 import ForgotPassword from '/src/views/setting/modal/forgotPassword';
 import ImChat from '/src/views/im-chat/sChat.vue';
-import { eventGlobal } from '/src/utils';
 export default defineComponent({
   name: 'layoutTop',
   setup() {
     const router = useRouter();
-    const noReadCount = ref(0); // 未读数
     const showHeadFlag = ref(false);
     const showImChat = ref(false);
     const users = useUserStore();
@@ -59,11 +51,8 @@ export default defineComponent({
     const message = useMessage();
 
     const TUIKit: any = instance?.appContext.config.globalProperties.$TUIKit;
-    const onUnReadMessageCount = (res: any) => {
-      console.log(res, 'TOTAL_UNREAD_MESSAGE_COUNT_UPDATED');
-      noReadCount.value = res.data || 0;
-    };
-    const onLoginIm = (status = true) => {
+
+    const onLoginIm = () => {
       const options = genTestUserSig({
         SDKAppID,
         secretKey,
@@ -73,31 +62,20 @@ export default defineComponent({
         userID: info.value.imUserId,
         userSig: options.userSig
       };
-      console.log(TUIKit, 'TUIKit', TUIKit.tim.isReady());
-
-      // chat;
+      console.log(TUIKit, 'TUIKit');
       // 进页面开始登录 - 判断是否已经登录
-      // 监听未读消息事件
-      TUIKit.tim.on(
-        TUIKit.TIM.EVENT.TOTAL_UNREAD_MESSAGE_COUNT_UPDATED,
-        onUnReadMessageCount
-      );
-      // 判断sdk是否准备好，可以防止被挤
-      if (TUIKit.isSDKReady && TUIKit.tim.isReady()) {
-        if (status) {
-          showImChat.value = true;
-        }
+      if (TUIKit.isSDKReady) {
+        showImChat.value = true;
       } else {
         TUIKit.login(userInfo)
-          .then(() => {
+          .then((res: any) => {
             const options = {
               ...userInfo,
               expire: new Date().getTime() + EXPIRETIME * 1000
             };
+            console.log(options, res);
             users.setImUserInfo(options);
-            if (status) {
-              showImChat.value = true;
-            }
+            showImChat.value = true;
           })
           .catch((error: any) => {
             message.error(error);
@@ -105,20 +83,6 @@ export default defineComponent({
       }
     };
 
-    onLoginIm(false);
-
-    onMounted(() => {
-      eventGlobal.on('onNoReadMessageCount', (count: number) => {
-        noReadCount.value = count || 0;
-      });
-    });
-
-    onBeforeMount(() => {
-      TUIKit.tim.off(
-        TUIKit.TIM.EVENT.TOTAL_UNREAD_MESSAGE_COUNT_UPDATED,
-        onUnReadMessageCount
-      );
-    });
     return () => (
       <>
         <div class={styles.layoutTop}>
@@ -138,16 +102,13 @@ export default defineComponent({
                 onLoginIm();
               }}>
               <NBadge
-                value={noReadCount.value}
+                value={8}
                 max={99}
                 class={styles.messageBadge}
                 {...{ id: 'home-2' }}
                 color={'#FF1036'}>
                 <NImage
-                  class={[
-                    styles.messageIcon,
-                    noReadCount.value > 0 ? styles.animation : ''
-                  ]}
+                  class={[styles.messageIcon]}
                   preview-disabled
                   src={messageIcon}></NImage>
               </NBadge>
@@ -268,7 +229,7 @@ export default defineComponent({
           </NModal>
 
           <NModal class={styles.imChatModal} v-model:show={showImChat.value}>
-            <ImChat onClose={() => (showImChat.value = false)} />
+            <ImChat />
           </NModal>
         </div>
       </>

src/store/modules/users.ts

@@ -11,7 +11,6 @@ export interface IUserState {
   avatar: string;
   info: any;
   imUserInfo: any;
-  noReadCount: number;
 }
 
 export const useUserStore = defineStore('user-store', {
@@ -20,14 +19,10 @@ export const useUserStore = defineStore('user-store', {
     imToken: storage.get(IM_TOKEN, ''),
     username: '',
     avatar: '',
-    noReadCount: 0, // 未读数量
     info: storage.get(CURRENT_USER, {}),
     imUserInfo: {} // IM
   }),
   getters: {
-    getNoReadCount(): number {
-      return this.noReadCount;
-    },
     getToken(): string {
       return this.token;
     },
@@ -48,9 +43,6 @@ export const useUserStore = defineStore('user-store', {
     }
   },
   actions: {
-    setNoReadCount(count: number) {
-      this.noReadCount = count;
-    },
     setToken(token: string) {
       this.token = token;
     },

src/utils/index.ts

@@ -5,11 +5,6 @@ import { PageEnum } from '@/enums/pageEnum';
 import { isObject } from './is/index';
 import { cloneDeep } from 'lodash';
 import dayjs from 'dayjs';
-
-import EventEmitter from 'eventemitter3';
-
-export const eventGlobal = new EventEmitter();
-
 /**
  * render 图标
  * */

src/views/im-chat/index.module.less

@@ -749,7 +749,7 @@
           height: 100%;
           box-sizing: border-box;
           padding-left: 40Px;
-          padding-top: 40Px;
+          padding-top: 100Px;
           display: flex;
           flex-direction: column;
           background: url('./assets/image/login-background.png') no-repeat;
@@ -1183,17 +1183,4 @@
 
 /deep/ .n-tabs.n-tabs--top .n-tab-pane {
   padding: 10Px 0 0;
-}
-
-.closeModal {
-  position: absolute;
-  right: 21Px;
-  top: 14Px;
-  content: ' ';
-  width: 20Px;
-  height: 20Px;
-  background: url('./assets/icon-close.png') no-repeat center;
-  background-size: contain;
-  z-index: 99;
-  cursor: pointer;
 }

src/views/im-chat/sChat.vue

@@ -10,6 +10,115 @@
     >
       <div class="home-main-box">
         <div class="home-TUIKit">
+          <!-- <div class="setting">
+            <main class="setting-main">
+              <aside class="userInfo">
+                <img
+                  class="avatar"
+                  :src="
+                    userInfo.avatar
+                      ? userInfo.avatar
+                      : 'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
+                  "
+                  onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
+                />
+                <div
+                  class="userInfo-main"
+                  :class="[showProfile ? 'TUIProfile' : '']"
+                  @click.self="handleChangeStatus"
+                >
+                  <main>
+                    <TUIProfile
+                      :view="showProfile ? 'edit' : 'default'"
+                      @changeStatus="handleChangeStatus"
+                    />
+                  </main>
+                </div>
+              </aside>
+              <ul class="setting-main-list">
+                <li
+                  class="setting-main-list-item"
+                  :class="[currentModel === 'message' && 'selected']"
+                  @click="selectModel('message')"
+                >
+                  <i
+                    v-show="currentModel === 'message'"
+                    class="icon icon-message-selected"
+                  ></i>
+                  <i
+                    v-show="currentModel !== 'message'"
+                    class="icon icon-message"
+                  ></i>
+                </li>
+                <li
+                  class="setting-main-list-item"
+                  :class="[currentModel === 'group' && 'selected']"
+                  @click="selectModel('group')"
+                >
+                  <i
+                    v-show="currentModel === 'group'"
+                    class="icon icon-relation-selected"
+                  ></i>
+                  <i
+                    v-show="currentModel !== 'group'"
+                    class="icon icon-relation"
+                  ></i>
+                </li>
+              </ul>
+            </main>
+            <div class="setting-footer">
+              <i class="icon icon-setting" @click="openShowMore"></i>
+              <div class="setting-more" v-if="showMore">
+                <div class="showmore">
+                  <ul class="setting-more-ul">
+                    <li
+                      v-for="item in moreList"
+                      :key="item.key"
+                      class="setting-more-li"
+                    >
+                      <div
+                        class="setting-more-item"
+                        @click="handleSelectClick(item)"
+                        @mouseover="showSelectMore = item.key"
+                      >
+                        <span>{{ $t(`Home.${item?.name}`) }}</span>
+                        <i
+                          v-show="item?.moreSelect"
+                          class="icon icon-right-transparent"
+                        ></i>
+                      </div>
+                      <ul
+                        v-if="item?.moreSelect && showSelectMore === item?.key"
+                        class="setting-more-item-next"
+                      >
+                        <li
+                          class="setting-more-item"
+                          @click="handleSelectClick(item, true)"
+                        >
+                          <span>{{ $t(`Home.开启`) }}</span>
+                          <i
+                            v-show="item?.status"
+                            class="icon icon-selected"
+                          ></i>
+                        </li>
+                        <li
+                          class="setting-more-item"
+                          @click="handleSelectClick(item, false)"
+                        >
+                          <span>{{ $t(`Home.关闭`) }}</span>
+                          <i
+                            v-show="!item?.status"
+                            class="icon icon-selected"
+                          ></i>
+                        </li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+                <div class="moreMask" @click.self="openShowMore"></div>
+              </div>
+            </div>
+          </div> -->
           <div class="home-TUIKit-main">
             <div class="conversation">
               <n-tabs
@@ -27,6 +136,7 @@
                 :value="currentModel"
                 @update:value="
                   (val: any) => {
+                    console.log(val, 'val')
                     currentModel = val;
                   }
                 "
@@ -47,7 +157,6 @@
                   tab="联系人"
                 ></n-tab-pane>
               </n-tabs>
-
               <TUIConversation
                 v-show="currentModel === 'message'"
                 @current="handleCurrentConversation"
@@ -71,12 +180,67 @@
                 :isNeedEmojiReact="true"
               >
                 <div class="chat-default">
-                  <!-- <h1>欢迎使用</h1> -->
+                  <h1>欢迎使用-即时通信</h1>
                   <!-- <p>随时随地</p> -->
                 </div>
               </TUIChat>
             </div>
           </div>
+          <!-- <div class="home-TUIKit-main" v-show="currentModel === 'message'">
+            <div class="conversation">
+              <n-tabs default-value="chat">
+                <n-tab-pane
+                  name="chat"
+                  display-directive="show:lazy"
+                  tab="聊天"
+                ></n-tab-pane>
+                <n-tab-pane
+                  name="group"
+                  display-directive="show:lazy"
+                  tab="群聊"
+                ></n-tab-pane>
+                <n-tab-pane
+                  name="contact"
+                  display-directive="show:lazy"
+                  tab="联系人"
+                ></n-tab-pane>
+              </n-tabs>
+              <TUIConversation
+                @current="handleCurrentConversation"
+                :displayOnlineStatus="displayOnlineStatus"
+              />
+            </div>
+            <div class="chat">
+              <TUIChat
+                :isMsgNeedReadReceipt="isMsgNeedReadReceipt"
+                :isNeedTyping="true"
+                :isNeedEmojiReact="true"
+              >
+                <div class="chat-default">
+                  <h1>
+                    欢迎使用
+                    即时通信
+                  </h1>
+                  <p>随时随地</p>
+                </div>
+              </TUIChat>
+            </div>
+          </div>
+          <div class="home-TUIKit-main" v-show="currentModel === 'group'">
+            <TUIContact
+              v-show="currentModel === 'group'"
+              :displayOnlineStatus="displayOnlineStatus"
+            >
+              <div class="chat-default">
+                <h1>
+                  欢迎使用
+                  <img class="logo" src="./assets/image/logo.svg" alt="" />
+                  即时通信
+                </h1>
+                <p>随时随地</p>
+              </div>
+            </TUIContact>
+          </div> -->
         </div>
       </div>
     </main>
@@ -210,7 +374,7 @@
         :isNeedEmojiReact="true"
       />
     </main>
-    <!-- <Drag
+    <Drag
       :show="showCall || showCallMini"
       :class="[
         showCallMini && 'callkit-drag-container-mini',
@@ -232,9 +396,7 @@
         :onMinimized="onMinimized"
         :onMessageSentByMe="onMessageSentByMe"
       />
-    </Drag> -->
-
-    <i class="closeModal" @click="onClose"></i>
+    </Drag>
   </div>
 </template>
 
@@ -255,15 +417,14 @@ import { useStore } from 'vuex';
 import router from '@/router';
 // import { cancellation } from '../api';
 import { handleErrorPrompts } from '@/TUIKit/TUIComponents/container/utils';
-// import Drag from '@/TUIKit/TUIComponents/components/drag';
+import Drag from '@/TUIKit/TUIComponents/components/drag';
 import { TUINotification } from '@/TUIKit/TUIPlugin';
 export default defineComponent({
   components: {
     // HeaderTUI,
     // MenuTUI,
-    // Drag
+    Drag
   },
-  emits: ['close'],
   setup(props, context) {
     const instance = getCurrentInstance();
     const locale = useI18nLocale();
@@ -527,10 +688,6 @@ export default defineComponent({
       return;
     };
 
-    const onClose = () => {
-      context.emit('close');
-    };
-
     return {
       ...toRefs(data),
       dragRef,
@@ -561,8 +718,7 @@ export default defineComponent({
       onMessageSentByMe,
       handleSelectClick,
       allowNotification,
-      setNotification,
-      onClose
+      setNotification
     };
   }
 });