1

Web/src/components/TimePeriodTabs.vue

@@ -0,0 +1,90 @@
+<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: transparent;
+    border-radius: var(--radius-md);
+    padding: 0;
+    gap: var(--spacing-sm);
+    height: 40px;
+
+    .tab-item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background: rgba(128, 128, 128, 0.15);
+
+      &.active {
+        background: rgba(128, 128, 128, 0.3);
+        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.2);
+      }
+
+      .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>