feat 在线客服

src/views/message/cpns/MessageTabs.vue

@@ -1,16 +1,10 @@
 <script setup lang="ts">
+import type { MessageTabCounts } from '@/stores/modules/message'
 import type { MessageType } from '@/types/business/message'
 
-interface Counts {
-  all: number
-  在线客服: number
-  状态通知: number
-  系统通知: number
-}
-
 interface Props {
   active: MessageType | 'all'
-  counts: Counts
+  counts: MessageTabCounts
 }
 
 defineProps<Props>()
@@ -24,7 +18,7 @@ const tabs: Array<{ label: string; value: MessageType | 'all' }> = [
   { label: '系统通知', value: '系统通知' },
 ]
 
-function countOf(value: MessageType | 'all', counts: Counts): number {
+function countOf(value: MessageType | 'all', counts: MessageTabCounts): number {
   return counts[value]
 }
 </script>
@@ -47,23 +41,25 @@ function countOf(value: MessageType | 'all', counts: Counts): number {
 <style lang="less" scoped>
 .message-tabs {
   .flex(column, flex-start, stretch);
-  padding: 18px 0;
-  min-height: 338px;
+  gap: 0;
+  height: 438px;
+  padding: 14px 0;
   border-radius: @radius-base;
   background: @white;
-  box-shadow: none;
+  box-sizing: border-box;
 
   &__tab {
-    .flex(row, space-between);
+    .flex(row, space-between, center);
     gap: @spacing-sm;
-    height: 32px;
-    padding: 0 18px 0 25px;
+    height: 44px;
+    padding: 0 25px;
     border-radius: 0;
     background: transparent;
-    color: @text-color;
-    font-size: 11px;
+    color: @message-tabs-text;
+    font-size: 13px;
     font-weight: 400;
-    transition: all 0.2s;
+    line-height: 18px;
+    transition: color 0.2s;
 
     &:hover {
       color: @primary-strong;
@@ -77,21 +73,18 @@ function countOf(value: MessageType | 'all', counts: Counts): number {
   }
 
   &__count {
+    flex-shrink: 0;
     min-width: 15px;
     height: 15px;
     padding: 0 4px;
     border-radius: @radius-round;
-    background: @danger-color;
+    background: @message-tabs-badge;
     color: @white;
-    font-size: 11px;
+    font-size: 10px;
+    font-weight: 400;
     line-height: 15px;
     text-align: center;
-  }
-
-  .is-active &__count {
-    background: @danger-color;
-    color: @white;
-    font-weight: 600;
+    box-sizing: border-box;
   }
 }
 </style>