style

components/msg-shortcut.vue

@@ -84,8 +84,20 @@
                 >
             </div>
         </div>
+
+        <div
+            v-if="!replyList.length && !replyInputVisible"
+            class="text-center text-hint"
+        >
+            暂无快捷回复，<el-button
+                type="text"
+                @click="replyInputVisible = true"
+                >添加</el-button
+            >
+        </div>
     </div>
 </template>
+
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { MessageType } from "../model";

components/who-read-list.vue

@@ -35,7 +35,7 @@
             <div class="items">
                 <el-scrollbar>
                     <div
-                        class="member-item"
+                        class="member-item d-flex align-items-center"
                         v-for="item in items"
                         :key="`${item.eid}-${tab}`"
                     >
@@ -44,7 +44,11 @@
                             :src="item.avatar"
                             :size="30"
                         />
-                        <span class="member-name">{{ item.name }}</span>
+                        <span
+                            class="member-name text-truncate"
+                            :title="item.name"
+                            >{{ item.name }}</span
+                        >
                     </div>
                 </el-scrollbar>
             </div>

components/workflow.vue

 <template>
     <div class="h-100 pos-rel workflows">
-        <div class="workflow-header">
+        <div class="workflow-header" v-if="flowList.length">
             <div class="cell">名称</div>
             <div class="cell">备注</div>
             <div class="cell">状态</div>
@@ -38,6 +38,9 @@
                     >
                 </span>
             </div>
+            <div v-if="!flowList.length" class="text-center text-hint">
+                暂无数据
+            </div>
         </el-scrollbar>
         <div class="detal-btns">
             <el-button>查看详情</el-button>
@@ -154,4 +157,8 @@ export default class WorkFlow extends Vue {
 .workflow-scrollbar {
     height: calc(100% - 15px);
 }
+
+.text-hint {
+    margin: 20px 0;
+}
 </style>