feat 搭建架构骨架

src/views/message/cpns/MessageTabs.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { MessageType } from '@/types/business/message'
+
+interface Counts {
+  all: number
+  在线客服: number
+  状态通知: number
+  系统通知: number
+}
+
+interface Props {
+  active: MessageType | 'all'
+  counts: Counts
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{ tabChange: [type: MessageType | 'all'] }>()
+
+const tabs: Array<{ label: string; value: MessageType | 'all' }> = [
+  { label: '全部', value: 'all' },
+  { label: '在线客服', value: '在线客服' },
+  { label: '状态通知', value: '状态通知' },
+  { label: '系统通知', value: '系统通知' },
+]
+
+function countOf(value: MessageType | 'all', counts: Counts): number {
+  return counts[value]
+}
+</script>
+
+<template>
+  <div class="message-tabs">
+    <button
+      v-for="tab in tabs"
+      :key="tab.value"
+      class="message-tabs__tab"
+      :class="{ 'is-active': active === tab.value }"
+      @click="emit('tabChange', tab.value)"
+    >
+      {{ tab.label }}
+      <span class="message-tabs__count">{{ countOf(tab.value, counts) }}</span>
+    </button>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.message-tabs {
+  .flex(row, flex-start);
+  gap: @spacing-sm;
+  padding: @spacing-sm @spacing-base;
+  border-radius: @radius-lg;
+  background: @white;
+  box-shadow: @shadow-base;
+
+  &__tab {
+    .flex(row, center);
+    gap: @spacing-xs;
+    height: 32px;
+    padding: 0 @spacing-base;
+    border-radius: @radius-round;
+    background: transparent;
+    color: @text-color;
+    font-size: @font-size-base;
+    transition: all 0.2s;
+
+    &:hover {
+      color: @primary-color;
+    }
+
+    &.is-active {
+      background: @primary-light;
+      color: @primary-color;
+      font-weight: 600;
+    }
+  }
+
+  &__count {
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: @radius-round;
+    background: @bg-color;
+    color: @text-color-secondary;
+    font-size: @font-size-sm;
+    line-height: 18px;
+    text-align: center;
+  }
+
+  .is-active &__count {
+    background: @primary-color;
+    color: @white;
+  }
+}
+</style>