From a2167092275c0cbe8b7734dbf637a9e488a72601 Mon Sep 17 00:00:00 2001
From: saopig1 <4x7sw862st@gmail.com>
Date: Wed, 6 May 2026 13:12:55 +0800
Subject: [PATCH] feat(web): add SourceTabs component for platform switcher

Presentational component for switching between netease and qq music
sources. Auto-hides when fewer than 2 sources are passed in. Mobile
breakpoint enlarges touch target to 36px.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/src/components/SourceTabs.vue | 78 +++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 web/src/components/SourceTabs.vue

diff --git a/web/src/components/SourceTabs.vue b/web/src/components/SourceTabs.vue
new file mode 100644
index 0000000..8d3b723
--- /dev/null
+++ b/web/src/components/SourceTabs.vue
@@ -0,0 +1,78 @@
+<template>
+  <div v-if="sources.length >= 2" class="source-tabs">
+    <button
+      v-for="src in sources"
+      :key="src"
+      type="button"
+      class="source-tab"
+      :class="{ active: src === modelValue }"
+      @click="$emit('update:modelValue', src)"
+    >
+      {{ LABELS[src] }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Source = 'netease' | 'qq';
+
+const LABELS: Record<Source, string> = {
+  netease: '网易云',
+  qq: 'QQ',
+};
+
+defineProps<{
+  modelValue: Source;
+  sources: Source[];
+}>();
+
+defineEmits<{
+  'update:modelValue': [value: Source];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.source-tabs {
+  display: inline-flex;
+  gap: 4px;
+  margin-left: 12px;
+  align-items: center;
+}
+
+.source-tab {
+  padding: 4px 10px;
+  min-height: 28px;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-medium);
+  color: var(--text-secondary);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: color var(--transition-fast), background var(--transition-fast);
+
+  &:hover {
+    color: var(--text-primary);
+    background: var(--hover-bg);
+  }
+
+  &.active {
+    color: var(--color-primary);
+    background: var(--color-primary-12);
+    font-weight: var(--fw-semi);
+  }
+}
+
+@media (max-width: 768px) {
+  .source-tabs {
+    margin-left: 8px;
+    gap: 2px;
+  }
+
+  .source-tab {
+    padding: 6px 10px;
+    min-height: 36px; // larger touch target on mobile
+    font-size: var(--fs-xs);
+  }
+}
+</style>