html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(selfop): preserve warehouse navigation and refine overview presentation

Browse Source
This commit is contained in:
ouyangxq
2026-10-13 11:06:20 +08:00
parent b73dc0d410
commit 58df0ed9e3
9 changed files with 296 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/self-operated/components/DashboardBars.vue
+18 -7
View File
@@ -3,30 +3,41 @@ import { computed, ref } from 'vue'
import type { Quantity } from '../types'
import { quantityText } from '../state'
export interface BarRow { key: string; label: string; secondary?: string; value: Quantity; detail: string }
const props = defineProps<{ rows: BarRow[]; unit: string; disabled?: boolean; title: string }>()
const props = defineProps<{ rows: BarRow[]; unit: string; disabled?: boolean; title: string; ranked?: boolean }>()
const emit = defineEmits<{ select: [key: string] }>()
const focused = ref('')
const maximum = computed(() => Math.max(1, ...props.rows.map(row => Number(row.value ?? 0))))
const palette = ['#5575ed', '#3da9ba', '#e8a54b', '#b083dc', '#df8397', '#8a9ab4', '#a2adbf']
function color(index: number) { return props.ranked ? palette[0] : palette[index % palette.length] }
</script>
<template>
<div :aria-label="title" class="dashboard-bars">
<p v-if="!rows.length">暂无符合条件的 SKU；请核对覆盖与待评估资料。</p>
<button v-for="row in rows" :key="row.key" type="button" class="bar-row" :aria-disabled="disabled || row.value == null" :aria-label="`${row.label}，${row.secondary ?? ''}，${quantityText(row.value)} ${unit}；${row.detail}`" :title="`${row.label} ${row.secondary ?? ''}；${row.detail}`" @focus="focused = row.key" @mouseenter="focused = row.key" @click="!disabled && row.value != null && emit('select', row.key)">
<span class="bar-heading"><span class="bar-label">{{ row.label }}</span><strong>{{ quantityText(row.value) }} {{ unit }}</strong></span>
<div v-if="!rows.length" class="bar-empty"><span aria-hidden="true">—</span><p>暂无符合条件的 SKU；请核对覆盖与待评估资料。</p></div>
<button v-for="(row, index) in rows" :key="row.key" type="button" class="bar-row" :style="{ '--bar-color': color(index), '--bar-delay': `${index * 45}ms` }" :aria-disabled="disabled || row.value == null" :aria-label="`${row.label}，${row.secondary ?? ''}，${quantityText(row.value)} ${unit}；${row.detail}`" :title="`${row.label} ${row.secondary ?? ''}；${row.detail}`" @focus="focused = row.key" @mouseenter="focused = row.key" @click="!disabled && row.value != null && emit('select', row.key)">
<span class="bar-heading"><span class="bar-label"><span v-if="ranked" class="bar-rank" :class="{ 'is-leading': index < 3 }">{{ String(index + 1).padStart(2, '0') }}</span>{{ row.label }}</span><strong>{{ quantityText(row.value) }} <small>{{ unit }}</small></strong></span>
<span v-if="row.secondary" class="bar-secondary">{{ row.secondary }}</span>
<svg viewBox="0 0 500 15" aria-hidden="true"><line x1="0" x2="500" y1="14" y2="14" stroke="var(--el-border-color)" /><rect v-if="row.value != null" x="0" y="1" :width="Number(row.value) / maximum * 500" height="11" rx="2" fill="var(--el-color-primary)" /></svg>
<span class="bar-track" aria-hidden="true"><span v-if="row.value != null" class="bar-fill" :style="{ width: `${Number(row.value) / maximum * 100}%` }" /></span>
</button>
<p v-if="focused" class="bar-detail" role="status">{{ rows.find(row => row.key === focused)?.detail }}</p>
</div>
</template>
<style scoped>
.dashboard-bars { display: grid; gap: var(--admin-space-2); }
.bar-row { appearance: none; border: 0; padding: var(--admin-space-2) 0; background: transparent; text-align: left; color: inherit; cursor: pointer; width: 100%; font: inherit; }
.bar-row { appearance: none; border: 0; padding: 7px 8px; border-radius: 6px; background: transparent; text-align: left; color: inherit; cursor: pointer; width: 100%; font: inherit; transition: background .2s; }
.bar-row:hover, .bar-row:focus-visible { background: #f5f7fc; }
.bar-row:focus-visible { outline: 2px solid var(--el-color-primary); outline-offset: 2px; }
.bar-row[aria-disabled="true"] { cursor: default; }
.bar-heading { display: flex; gap: var(--admin-space-2); justify-content: space-between; align-items: baseline; }
.bar-label { overflow-wrap: anywhere; }
.bar-rank { display: inline-block; width: 28px; color: #929db3; font-size: var(--admin-font-caption); font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-rank.is-leading { color: var(--bar-color); }
.bar-heading strong { white-space: nowrap; }
.bar-heading small { font-weight: 400; color: var(--el-text-color-secondary); }
.bar-secondary, .bar-detail { display: block; color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); overflow-wrap: anywhere; }
svg { display: block; width: 100%; height: 15px; }
.bar-track { display: block; height: 10px; margin-top: 7px; border-radius: 3px; overflow: hidden; background: #f0f3f9; }
.bar-fill { display: block; height: 100%; background: var(--bar-color); border-radius: 3px; transform-origin: left; animation: bar-reveal .7s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--bar-delay); transition: width .5s; }
.bar-empty { min-height: 150px; display: grid; align-content: center; justify-items: center; color: var(--el-text-color-secondary); text-align: center; }
.bar-empty > span { font-size: 38px; color: #a9b7d8; }
@keyframes bar-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .bar-fill { animation: none; transition: none; } .bar-row { transition: none; } }
</style>