添加样式

src/TUIKit/TUIComponents/container/TUIChat/components/message-bubble.vue

@@ -112,6 +112,7 @@ const messageBubble = defineComponent({
       data.messagesList = props.messagesList;
       data.needEmojiReact = props.needEmojiReact;
       data.message = deepCopy(data.messagesList?.find((item: any) => (item as any)?.ID === props.message?.ID) || props.data);
+      console.log(data.message, "messagemessagemessage");
       data.needGroupReceipt = props.needGroupReceipt;
       data.needReplies = props.needReplies;
       if ((data.message as any).cloudCustomData) {

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

@@ -4,9 +4,16 @@
       <li class="list-item" v-for="(item, index) in list" :key="index">
         <!-- @click="handleMemberProfileShow(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>
-          <span>{{ handleRoleName(item) }}</span>
+          <div class="avatarSection">
+            <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="jobType" v-if="item?.groupRoleType === 'Admin'">{{ item?.groupRoleType === "Admin" ? "管理员" : "" }}</span>
+            <span :class="['jobType', 'Owner']" v-if="item?.groupRoleType === 'Owner'">{{ item?.groupRoleType === "Owner" ? "群主" : "" }}</span>
+          </div>
+          <span class="name">
+            {{ item?.nickname || item?.userID }}
+            <span class="roleType" v-if="item?.teacherJobType">{{ formatJobType(item.teacherJobType) }}</span>
+          </span>
+          <span style="color: #777777">{{ handleRoleName(item) }}</span>
         </aside>
         <i v-if="item.role !== 'Owner' && isShowDel" class="icon icon-del" @click="submit(item)"></i>
       </li>
@@ -60,24 +67,33 @@ const ManageMember = defineComponent({
     const handleRoleName = (item: any) => {
       const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
       let name = "";
-      console.log(item, data.self, "self");
-      switch (item?.groupRoleType) {
-        case "Admin":
-          name = t("TUIChat.manage.管理员");
-          break;
-        case "Owner":
-          name = t("TUIChat.manage.群主");
-          break;
-      }
-      if (name) {
-        name = `(${name})`;
-      }
+      // console.log(item, data.self, "self");
+      // switch (item?.groupRoleType) {
+      //   case "Admin":
+      //     name = t("TUIChat.manage.管理员");
+      //     break;
+      //   case "Owner":
+      //     name = t("TUIChat.manage.群主");
+      //     break;
+      // }
+      // if (name) {
+      //   name = `(${name})`;
+      // }
       if (item.imUserId === data.self.userID) {
         name += ` (${t("TUIChat.manage.我")})`;
       }
       return name;
     };
 
+    const formatJobType = (jobType: string) => {
+      const template = {
+        TEACHER: "音乐老师",
+        ADMIN: "管理员",
+        HEADMASTER: "校长",
+      } as any;
+      return template[jobType];
+    };
+
     const getMore = () => {
       ctx.emit("more");
     };
@@ -95,6 +111,7 @@ const ManageMember = defineComponent({
       getMore,
       submit,
       handleRoleName,
+      formatJobType,
       handleMemberProfileShow,
     };
   },
@@ -128,7 +145,7 @@ export default ManageMember;
         display: flex;
         align-items: center;
         width: 100%;
-        overflow: hidden;
+        // overflow: hidden;
         .name {
           padding-left: 8px;
           font-weight: 400;
@@ -148,4 +165,40 @@ export default ManageMember;
   height: 36px;
   border-radius: 4px;
 }
+
+.avatarSection {
+  position: relative;
+
+  .jobType {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -8px;
+
+    background: #198cfe;
+    border-radius: 7px;
+    border: 1px solid #ffffff;
+    font-weight: 500;
+    font-size: 10px;
+    line-height: 13px;
+    color: #ffffff;
+    text-align: center;
+
+    &.Owner {
+      background: #ff5151;
+    }
+  }
+}
+
+.roleType {
+  margin-left: 5px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 17px;
+  color: #2089ff;
+  background: #e8f4ff;
+  border-radius: 3px;
+  border: 1px solid rgba(25, 140, 254, 0.5);
+  padding: 0 4px;
+}
 </style>

src/main.ts

@@ -41,8 +41,8 @@ import { TUIComponents, TUICore, genTestUserSig } from "./TUIKit";
 console.log(import.meta.env.DEV, "import.meta.env.DEV");
 
 // 判断是否是测试环境的
-const SDKAppID = parseSearch.appId || hashSearch.appId || 1400799837; // import.meta.env.DEV ? 1400805079 : 1400799837; // 1400805079; // Your SDKAppID
-const secretKey = parseSearch.secretKey || hashSearch.secretKey || "37bfb220843e25e78768cadd0dc06756e460e55bd631354930a4149565a1d0c9"; //import.meta.env.DEV ? "c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30" : "37bfb220843e25e78768cadd0dc06756e460e55bd631354930a4149565a1d0c9"; //"c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30"; // Your secretKey
+const SDKAppID = parseSearch.appId || hashSearch.appId || 1400805079; // import.meta.env.DEV ? 1400805079 : 1400799837; // 1400805079; // Your SDKAppID
+const secretKey = parseSearch.secretKey || hashSearch.secretKey || "c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30"; //import.meta.env.DEV ? "c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30" : "37bfb220843e25e78768cadd0dc06756e460e55bd631354930a4149565a1d0c9"; //"c5f4ea6140128a36c842990446a2c89249ab886b5e1ea6893555aa635a0b3c30"; // Your secretKey
 const userID = parseSearch.userID; //|| "KT:140:TEACHER"; // User ID
 
 // init TUIKit

vite.config.ts

@@ -12,7 +12,7 @@ function pathResolve(dir: string) {
 // function resolve(dir: string) {
 //   return path.join(__dirname, dir);
 // }
-const proxyUrl = "https://test.lexiaoya.cn";
+const proxyUrl = "https://dev.kt.colexiu.com";
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "./",