refactor: 整理组件目录结构

- TransactionDetail, CategoryBillPopup 移入 Transaction/
- BudgetTypeTabs 移入 Budget/
- GlassBottomNav, ModernEmpty 移入 Global/
- Icon, IconSelector, ClassifySelector 等 8 个通用组件移入 Common/
- 更新所有相关引用路径

Web/src/components/Common/TimePeriodTabs.vue

@@ -0,0 +1,96 @@
+<!--
+  时间段选择器组件 (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>