优化前端
This commit is contained in:
yml2213
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import LeftSidebar from './LeftSidebar.vue'
|
||||
import RightConsole from './RightConsole.vue'
|
||||
|
||||
defineProps<{
|
||||
version: string
|
||||
serverTime: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-shell">
|
||||
<LeftSidebar :version="version" />
|
||||
<RightConsole :server-time="serverTime" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 300px minmax(0, 1fr);
|
||||
height: 100vh;
|
||||
min-width: 1080px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.app-shell {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,158 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useTheme } from '@/composables/useTheme'
|
||||
import { useScheduler } from '@/composables/useScheduler'
|
||||
import StatusGrid from '@/components/console/StatusGrid.vue'
|
||||
import ControlStrip from '@/components/console/ControlStrip.vue'
|
||||
import AccountTable from '@/components/account/AccountTable.vue'
|
||||
import LogPanel from '@/components/log/LogPanel.vue'
|
||||
import SettingsModal from '@/components/modal/SettingsModal.vue'
|
||||
|
||||
defineProps<{
|
||||
serverTime: string
|
||||
}>()
|
||||
|
||||
const { theme, toggleTheme } = useTheme()
|
||||
const { runState, countdownSeconds, formatRemain } = useScheduler()
|
||||
|
||||
const settingsModalRef = ref<InstanceType<typeof SettingsModal> | null>(null)
|
||||
|
||||
const openSettings = () => {
|
||||
settingsModalRef.value?.open()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="right">
|
||||
<!-- 顶部控制台头 -->
|
||||
<header class="console-head">
|
||||
<div class="headline">
|
||||
<div>
|
||||
<div class="headline-title">抢购控制台</div>
|
||||
<div class="headline-meta">{{ runState }}</div>
|
||||
</div>
|
||||
<span v-if="countdownSeconds > 0" class="countdown-badge">
|
||||
{{ formatRemain(countdownSeconds) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="top-actions">
|
||||
<button class="btn btn-ghost icon-btn" title="设置" aria-label="设置" @click="openSettings">⚙</button>
|
||||
<button
|
||||
class="btn btn-ghost icon-btn theme-toggle"
|
||||
:title="theme === 'light' ? '切换到暗色' : '切换到亮色'"
|
||||
:aria-label="theme === 'light' ? '切换到暗色' : '切换到亮色'"
|
||||
@click="toggleTheme"
|
||||
>
|
||||
{{ theme === 'light' ? '☀' : '☾' }}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 状态指标 -->
|
||||
<StatusGrid :server-time="serverTime" />
|
||||
|
||||
<!-- 操作条 -->
|
||||
<ControlStrip />
|
||||
|
||||
<!-- 工作区 -->
|
||||
<section class="workspace">
|
||||
<AccountTable />
|
||||
<aside class="side-stack">
|
||||
<LogPanel />
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<SettingsModal ref="settingsModalRef" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.console-head {
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.headline-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-strong);
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
.headline-meta {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.countdown-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
border: 1px solid var(--danger);
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 380px;
|
||||
gap: 14px;
|
||||
padding: 14px 20px 20px;
|
||||
align-items: stretch;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.side-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.right {
|
||||
overflow: visible;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 14px;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user