会话盒子增加action图标

src/components/message/SessionBox.vue

@@ -1,8 +1,12 @@
 <script setup>
+import { ref } from 'vue'
 import AvatarIcon from './AvatarIcon.vue'
 import SessionTag from './SessionTag.vue'
+import { Top, Bottom, MuteNotification, Bell } from '@element-plus/icons-vue'
 
 const props = defineProps(['user'])
+const isPinToTop = ref(false)
+const isMute = ref(false)
 </script>
 
 <template>
@@ -16,7 +20,8 @@ const props = defineProps(['user'])
           <SessionTag tagType="team"></SessionTag>
           <SessionTag tagType="organize"></SessionTag>
           <SessionTag tagType="assistant"></SessionTag>
-          <SessionTag tagType="pinToTop"></SessionTag>
+          <SessionTag v-if="isPinToTop" tagType="pinToTop"></SessionTag>
+          <SessionTag v-if="isMute" tagType="mute"></SessionTag>
         </div>
         <div class="datetime">
           <span>15:10</span>
@@ -24,7 +29,22 @@ const props = defineProps(['user'])
       </div>
       <div class="body">
         <div class="content">
-          <span>你吃饭了吗啊啊啊啊啊啊啊啊啊？</span>
+          <span class="draft">[草稿]</span>
+          <span class="detail">你吃饭了吗？</span>
+        </div>
+        <div class="action">
+          <el-button
+            class="action-button pin-to-top"
+            :icon="isPinToTop ? Bottom : Top"
+            @click="isPinToTop = !isPinToTop"
+            circle
+          />
+          <el-button
+            class="action-button no-not-disturb"
+            :icon="isMute ? Bell : MuteNotification"
+            @click="isMute = !isMute"
+            circle
+          />
         </div>
       </div>
     </div>
@@ -65,8 +85,8 @@ const props = defineProps(['user'])
       .title {
         line-height: 20px;
         display: flex;
-        flex: 1 1;
         align-items: center;
+        flex: 1 1;
         overflow: hidden;
 
         .nickname {
@@ -88,16 +108,40 @@ const props = defineProps(['user'])
     }
 
     .body {
-      width: 100%;
       height: 20px;
       display: flex;
+      align-items: center;
 
       .content {
         font-size: 12px;
-        color: gray;
-        white-space: nowrap; /*不换行*/
-        overflow: hidden; /*超出的文本隐藏*/
-        text-overflow: ellipsis; /* 溢出用省略号*/
+        display: flex;
+        flex: 1 1;
+        overflow: hidden;
+
+        .draft {
+          color: red;
+          flex-shrink: 0;
+        }
+
+        .detail {
+          color: gray;
+          white-space: nowrap; /*不换行*/
+          overflow: hidden; /*超出的文本隐藏*/
+          text-overflow: ellipsis; /* 溢出用省略号*/
+        }
+      }
+
+      .action {
+        .action-button {
+          width: 20px;
+          height: 20px;
+          margin-left: 2px;
+          opacity: 0;
+
+          &:hover {
+            opacity: 1;
+          }
+        }
       }
     }
   }

src/components/message/SessionTag.vue

@@ -5,7 +5,8 @@ const items = {
   team: { color: '#67C23A', label: '团' },
   organize: { color: '#E6A23C', label: '组' },
   assistant: { color: '#E734F5', label: '助' },
-  pinToTop: { color: '#F56C6C', label: '顶' }
+  pinToTop: { color: '#F56C6C', label: '顶' },
+  mute: { color: '#73767a', label: '静' }
 }
 
 const props = defineProps(['tagType'])