修改公告问题

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

@@ -1,11 +1,15 @@
 <template>
   <main class="notification">
-    <textarea v-if="isEdit" v-model="input" @keyup.enter="updateProfile"></textarea>
+    <input v-if="isEdit" type="text" v-model="title" placeholder="请输入标题" maxlength="15" />
+    <textarea v-if="isEdit" v-model="input" @keyup.enter="updateProfile" placeholder="请输入内容"></textarea>
     <section v-else>
       <p v-if="!groupList.content">
         {{ $t(`TUIChat.manage.暂无公告`) }}
       </p>
-      <article v-else>{{ groupList.content }}</article>
+      <article v-else>
+        <h2>{{ groupList.title }}</h2>
+        {{ groupList.content }}
+      </article>
     </section>
     <footer v-if="isAuth">
       <button class="btn" v-if="isEdit" @click="updateProfile">
@@ -36,6 +40,7 @@ const ManageNotification = defineComponent({
   setup(props: any, ctx: any) {
     const data: any = reactive({
       groupProfile: {},
+      title: "",
       input: "",
       groupList: {},
       isEdit: false,
@@ -51,6 +56,7 @@ const ManageNotification = defineComponent({
         const result = res.data.rows || [];
         if (result.length > 0) {
           data.input = result[0].content;
+          data.title = result[0].title;
           data.groupList = result[0];
         }
       } catch (e: any) {
@@ -67,7 +73,7 @@ const ManageNotification = defineComponent({
 
     // 更新群资料
     const updateProfile = async () => {
-      if (data.input && data.input !== data.groupProfile.notification) {
+      if (data.title && data.input) {
         // ctx.emit("update", { key: "notification", value: data.input });
         // data.groupProfile.notification = data.input;
         // data.input = "";
@@ -76,7 +82,7 @@ const ManageNotification = defineComponent({
             clientType: "TEACHER",
             groupId: data.groupProfile.groupID,
             content: data.input,
-            title: data.input,
+            title: data.title,
           };
           if (data.groupList.id) {
             await imGroupNoticeUpdate({
@@ -87,8 +93,8 @@ const ManageNotification = defineComponent({
             await imGroupNoticeSave(params);
           }
           data.groupList.content = data.input;
-          ctx.emit("update", { key: "notification", value: data.input });
-          data.groupProfile.notification = data.input;
+          ctx.emit("update", { key: "notification", value: data.title });
+          data.groupProfile.notification = data.title;
           data.input = "";
         } catch {
           //
@@ -117,6 +123,8 @@ export default ManageNotification;
   section {
     flex: 1;
     font-size: 14px;
+    word-wrap: break-word;
+    word-break: break-word;
     p {
       text-align: center;
       padding-bottom: 20px;
@@ -131,6 +139,19 @@ export default ManageNotification;
     resize: none;
     font-size: 14px;
   }
+
+  input {
+    margin-bottom: 20px;
+    padding: 10px;
+    border: 1px solid #e8e8e9;
+    resize: none;
+    font-size: 14px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+
   footer {
     display: flex;
     justify-content: flex-end;

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

@@ -71,6 +71,11 @@
         flex-wrap: wrap;
         padding-bottom: 20Px;
 
+        dt {
+          text-align: center;
+          margin: 0 auto;
+        }
+
         dl {
           position: relative;
           flex: 0 0 36Px;
@@ -87,8 +92,10 @@
           }
 
           dd {
+            padding-top: 6px;
             text-align: center;
-            max-width: 36Px;
+            max-width: 50Px;
+            font-size: 12px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;