增加电竞手册

frontend/src/components/layout/LeftSidebar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useProducts } from '@/composables/useProducts'
+import { useActivity } from '@/composables/useActivity'
 import ProductSearch from '@/components/product/ProductSearch.vue'
 import ProductList from '@/components/product/ProductList.vue'
 import ProductCard from '@/components/product/ProductCard.vue'
@@ -9,6 +10,15 @@ defineProps<{
 }>()
 
 const { loadProducts, productInfo, filteredProducts, loading } = useProducts()
+const { activities, currentActivity, switching, switchActivity } = useActivity()
+
+const onSwitchActivity = async (e: Event) => {
+  const id = (e.target as HTMLSelectElement).value
+  const ok = await switchActivity(id)
+  if (ok) {
+    await loadProducts(true)
+  }
+}
 </script>
 
 <template>
@@ -22,6 +32,25 @@ const { loadProducts, productInfo, filteredProducts, loading } = useProducts()
       <span class="stat-pill">v{{ version }}</span>
     </div>
 
+    <!-- 活动选择 -->
+    <div class="activity-box">
+      <label class="activity-label">当前活动</label>
+      <div class="activity-row">
+        <select
+          class="activity-select"
+          :value="currentActivity?.id"
+          :disabled="switching || activities.length === 0"
+          @change="onSwitchActivity"
+        >
+          <option v-if="activities.length === 0" value="">加载中...</option>
+          <option v-for="act in activities" :key="act.id" :value="act.id">
+            {{ act.displayName }}
+          </option>
+        </select>
+        <span v-if="switching" class="activity-spin">切换中…</span>
+      </div>
+    </div>
+
     <!-- 操作区 -->
     <div class="left-header">
       <div class="product-actions">
@@ -85,6 +114,64 @@ const { loadProducts, productInfo, filteredProducts, loading } = useProducts()
   letter-spacing: .02em;
 }
 
+.brand + .activity-box {
+  border-top: 0;
+}
+
+.activity-box {
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.activity-label {
+  font-size: 11px;
+  color: var(--muted);
+  letter-spacing: .04em;
+}
+
+.activity-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.activity-select {
+  flex: 1;
+  min-width: 0;
+  appearance: none;
+  background: var(--surface-2, var(--surface));
+  color: var(--text-strong);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 7px 10px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color .15s ease;
+}
+
+.activity-select:hover:not(:disabled) {
+  border-color: var(--primary);
+}
+
+.activity-select:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+.activity-select:disabled {
+  opacity: .6;
+  cursor: default;
+}
+
+.activity-spin {
+  font-size: 11px;
+  color: var(--primary);
+  white-space: nowrap;
+}
+
 .left-header {
   padding: 14px 16px;
   border-bottom: 1px solid var(--line);