EmailBill/Web/src/components/Common/TimePeriodTabs.vue

<!--
  时间段选择器组件 (Time Period Tabs)
  用于统计页面的"周/月/年"时间段切换
  样式已按 pencli 设计规范更新 (.pans/v2.pen 节点 NDWwE)
  支持亮色和暗色两种主题
-->
<template>
  <div class="tabs-wrapper">
    <div class="segmented-control">
      <div
        class="tab-item"
        :class="{ active: activeTab === 'week' }"
        @click="$emit('change', 'week')"
      >
        <span class="tab-text">周</span>
      </div>
      <div
        class="tab-item"
        :class="{ active: activeTab === 'month' }"
        @click="$emit('change', 'month')"
      >
        <span class="tab-text">月</span>
      </div>
      <div
        class="tab-item"
        :class="{ active: activeTab === 'year' }"
        @click="$emit('change', 'year')"
      >
        <span class="tab-text">年</span>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  activeTab: {
    type: String,
    required: true,
    validator: (value) => ['week', 'month', 'year'].includes(value)
  }
})

defineEmits(['change'])
</script>

<style scoped lang="scss">
@import '@/assets/theme.css';

.tabs-wrapper {
  padding: var(--spacing-sm) var(--spacing-xl);

  .segmented-control {
    display: flex;
    background: var(--segmented-bg);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
    height: 40px;

    .tab-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      background: transparent;

      &.active {
        background: var(--segmented-active-bg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

        .tab-text {
          color: var(--text-primary);
          font-weight: var(--font-bold);
        }
      }

      &:not(.active):hover {
        background: rgba(128, 128, 128, 0.1);
      }

      .tab-text {
        font-family: var(--font-primary);
        font-size: var(--font-md);
        font-weight: var(--font-medium);
        color: var(--text-secondary);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        user-select: none;
      }
    }
  }
}
</style>