优化前端

2026-06-26 10:56:25 +08:00
parent 88a386b588
commit 54b5bd90ae
39 changed files with 6796 additions and 216 deletions
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { useProducts } from '@/composables/useProducts'
+import ProductSearch from '@/components/product/ProductSearch.vue'
+import ProductList from '@/components/product/ProductList.vue'
+import ProductCard from '@/components/product/ProductCard.vue'
+
+defineProps<{
+  version: string
+}>()
+
+const { loadProducts, productInfo, filteredProducts, loading } = useProducts()
+</script>
+
+<template>
+  <aside class="left">
+    <!-- 品牌区 -->
+    <div class="brand">
+      <div>
+        <h1>斗鱼抢购</h1>
+        <div class="brand-sub">实时库存 · 多账号 · 定时触发</div>
+      </div>
+      <span class="stat-pill">v{{ version }}</span>
+    </div>
+
+    <!-- 操作区 -->
+    <div class="left-header">
+      <div class="product-actions">
+        <button
+          class="btn btn-primary"
+          :disabled="loading"
+          @click="loadProducts(true)"
+        >
+          {{ loading ? '刷新中...' : '刷新商品' }}
+        </button>
+      </div>
+
+      <ProductSearch />
+
+      <ProductCard />
+
+      <div class="product-meta" :class="{ good: productInfo && !productInfo.stale, warn: productInfo?.stale }">
+        <template v-if="productInfo?.fetchedAt">
+          实时库存 {{ filteredProducts.length }} 个，刷新于 {{ productInfo.fetchedAt }}
+        </template>
+        <template v-else>库存未刷新</template>
+      </div>
+    </div>
+
+    <!-- 商品列表 -->
+    <ProductList />
+  </aside>
+</template>
+
+<style scoped>
+.left {
+  background: var(--surface);
+  border-right: 1px solid var(--line);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.brand h1 {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-strong);
+  letter-spacing: -.01em;
+}
+
+.brand-sub {
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 3px;
+  letter-spacing: .02em;
+}
+
+.left-header {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.product-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.product-actions .btn-primary {
+  flex: 1;
+}
+
+.product-meta {
+  font-size: 11px;
+  color: var(--muted);
+  padding: 0 2px;
+}
+
+.product-meta.good {
+  color: var(--success);
+}
+
+.product-meta.warn {
+  color: var(--warning);
+}
+
+@media (max-width: 1180px) {
+  .left {
+    height: auto;
+    overflow: visible;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+}
+</style>