minitest2.0 0.0.6 → 0.0.8

package/src/views/dashboard/index.vue

@@ -1,9 +1,306 @@
 <script setup lang="ts">
+import { queryForeignDashboard, queryRmbDashboard } from '@/api/dashboard'
+
 defineOptions({ name: 'DashboardPage' })
+
+type DashboardMetric = {
+  label: string
+  symbol: string
+  amount: number
+}
+
+type DashboardCard = {
+  name: string
+  code: string
+  symbol?: string
+  amount?: number
+  metrics?: DashboardMetric[]
+  image: string
+  accent: string
+  position?: string
+}
+
+type UnitLabel = '亿' | '千万' | '百万' | '十万' | '万' | '原币'
+
+const dashboardImage = (file: string) => `${import.meta.env.BASE_URL}images/dashboard/${file}`
+
+const unitOptions: Array<{ label: UnitLabel; factor: number }> = [
+  { label: '亿', factor: 100000000 },
+  { label: '千万', factor: 10000000 },
+  { label: '百万', factor: 1000000 },
+  { label: '十万', factor: 100000 },
+  { label: '万', factor: 10000 },
+  { label: '原币', factor: 1 },
+]
+
+const selectedUnit = ref<UnitLabel>('原币')
+
+const selectedUnitFactor = computed(
+  () => unitOptions.find((unit) => unit.label === selectedUnit.value)?.factor || 1,
+)
+
+const dashboardAmounts = reactive({
+  rmb: 0,
+  cityClearing: 0,
+  crossBorderRmb: 0,
+  digitalCurrency: 0,
+  usdDomestic: 0,
+  usdOverseas: 0,
+  eurDomestic: 0,
+  eurOverseas: 0,
+  hkdDomestic: 0,
+  hkdOverseas: 0,
+  jpyDomestic: 0,
+  jpyOverseas: 0,
+})
+
+const isDashboardLoading = ref(false)
+const dashboardLoadError = ref('')
+
+const cards = computed<DashboardCard[]>(() => [
+  {
+    name: '人民币',
+    code: 'CNY',
+    symbol: '¥',
+    amount: dashboardAmounts.rmb,
+    image: dashboardImage('01-rmb-great-wall-bg.jpg'),
+    accent: '#df2f38',
+    position: 'center center',
+  },
+  {
+    name: '城银清',
+    code: 'CNY',
+    symbol: '¥',
+    amount: dashboardAmounts.cityClearing,
+    image: dashboardImage('02-city-clearing-skyline-bg.jpg'),
+    accent: '#0f4ca7',
+    position: 'center center',
+  },
+  {
+    name: '跨境人民币',
+    code: 'CNY',
+    symbol: '¥',
+    amount: dashboardAmounts.crossBorderRmb,
+    image: dashboardImage('03-cross-border-rmb-world-map-bg.jpg'),
+    accent: '#078b95',
+    position: 'center center',
+  },
+  {
+    name: '数字货币',
+    code: 'CNY',
+    symbol: '¥',
+    amount: dashboardAmounts.digitalCurrency,
+    image: dashboardImage('04-digital-currency-fintech-bg.jpg'),
+    accent: '#4423b7',
+    position: 'center center',
+  },
+  {
+    name: '美元',
+    code: 'USD',
+    metrics: [
+      { label: '境内', symbol: '$', amount: dashboardAmounts.usdDomestic },
+      { label: '境外', symbol: '$', amount: dashboardAmounts.usdOverseas },
+    ],
+    image: dashboardImage('05-usd-liberty-bg.jpg'),
+    accent: '#0d8b3f',
+    position: 'center center',
+  },
+  {
+    name: '欧元',
+    code: 'EUR',
+    metrics: [
+      { label: '境内', symbol: '€', amount: dashboardAmounts.eurDomestic },
+      { label: '境外', symbol: '€', amount: dashboardAmounts.eurOverseas },
+    ],
+    image: dashboardImage('06-eur-europe-architecture-bg.jpg'),
+    accent: '#1267d5',
+    position: 'center center',
+  },
+  {
+    name: '港元',
+    code: 'HKD',
+    metrics: [
+      { label: '境内', symbol: 'HK$', amount: dashboardAmounts.hkdDomestic },
+      { label: '境外', symbol: 'HK$', amount: dashboardAmounts.hkdOverseas },
+    ],
+    image: dashboardImage('07-hkd-hong-kong-skyline-bg.jpg'),
+    accent: '#e06b00',
+    position: 'center center',
+  },
+  {
+    name: '日元',
+    code: 'JPY',
+    metrics: [
+      { label: '境内', symbol: '¥', amount: dashboardAmounts.jpyDomestic },
+      { label: '境外', symbol: '¥', amount: dashboardAmounts.jpyOverseas },
+    ],
+    image: dashboardImage('08-jpy-mount-fuji-bg.jpg'),
+    accent: '#6125c8',
+    position: 'center center',
+  },
+])
+
+onMounted(() => {
+  void loadDashboard()
+})
+
+function getCardStyle(card: DashboardCard) {
+  return {
+    '--dashboard-accent': card.accent,
+    backgroundImage: `url("${card.image}")`,
+    backgroundPosition: card.position || 'center center',
+  }
+}
+
+function getCardAriaLabel(card: DashboardCard) {
+  if (card.metrics) {
+    const metrics = card.metrics
+      .map((metric) => `${metric.label}${formatMoney(metric.amount, metric.symbol)}`)
+      .join('，')
+
+    return `${card.name}，${card.code}，单位${selectedUnit.value}，${metrics}`
+  }
+
+  return `${card.name}，${card.code}，单位${selectedUnit.value}，${formatMoney(card.amount || 0, card.symbol || '')}`
+}
+
+function formatMoney(amount: number, symbol: string) {
+  const scaledAmount = amount / selectedUnitFactor.value
+  const formattedAmount = scaledAmount.toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })
+  const unitSuffix = selectedUnit.value === '原币' ? '' : ` ${selectedUnit.value}`
+
+  return `${symbol} ${formattedAmount}${unitSuffix}`
+}
+
+async function loadDashboard() {
+  if (isDashboardLoading.value) return
+
+  isDashboardLoading.value = true
+  dashboardLoadError.value = ''
+
+  try {
+    const [rmbResult, foreignResult] = await Promise.allSettled([
+      queryRmbDashboard(),
+      queryForeignDashboard(),
+    ])
+    const errorMessages: string[] = []
+
+    if (rmbResult.status === 'fulfilled') {
+      applyRmbDashboardBody(rmbResult.value.body)
+    } else {
+      errorMessages.push(getErrorMessage(rmbResult.reason))
+    }
+
+    if (foreignResult.status === 'fulfilled') {
+      applyForeignDashboardBody(foreignResult.value.body)
+    } else {
+      errorMessages.push(getErrorMessage(foreignResult.reason))
+    }
+
+    if (errorMessages.length) {
+      dashboardLoadError.value = errorMessages.join('；')
+    }
+  } catch (error) {
+    console.error('[看板] 数据加载失败', error)
+    dashboardLoadError.value = getErrorMessage(error)
+  } finally {
+    isDashboardLoading.value = false
+  }
+}
+
+function applyRmbDashboardBody(body: Awaited<ReturnType<typeof queryRmbDashboard>>['body']) {
+  const result = body || {}
+
+  dashboardAmounts.rmb = toAmount(result.settleAccAmt)
+  dashboardAmounts.cityClearing = toAmount(result.availCredit)
+  dashboardAmounts.crossBorderRmb = toAmount(result.cipsAvailBal)
+  dashboardAmounts.digitalCurrency = toAmount(result.dcpTotalAmt)
+}
+
+function applyForeignDashboardBody(
+  body: Awaited<ReturnType<typeof queryForeignDashboard>>['body'],
+) {
+  const result = body || {}
+
+  dashboardAmounts.usdDomestic = toAmount(result.usdDomesticAmt)
+  dashboardAmounts.usdOverseas = toAmount(result.usdOverseasAmt)
+  dashboardAmounts.eurDomestic = toAmount(result.eurDomesticAmt)
+  dashboardAmounts.eurOverseas = toAmount(result.eurOverseasAmt)
+  dashboardAmounts.hkdDomestic = toAmount(result.hkdDomesticAmt)
+  dashboardAmounts.hkdOverseas = toAmount(result.hkdOverseasAmt)
+  dashboardAmounts.jpyDomestic = toAmount(result.jpyDomesticAmt)
+  dashboardAmounts.jpyOverseas = toAmount(result.jpyOverseasAmt)
+}
+
+function toAmount(value: unknown) {
+  const amount = Number(String(value ?? '').replaceAll(',', '').trim())
+
+  return Number.isFinite(amount) ? amount : 0
+}
+
+function getErrorMessage(error: unknown) {
+  if (error instanceof Error && error.message) return error.message
+
+  return '看板数据加载失败'
+}
 </script>
 
 <template>
-  <main class="dashboard-page"></main>
+  <main class="dashboard-page" :aria-busy="isDashboardLoading">
+    <div class="dashboard-toolbar" aria-label="看板设置">
+      <button
+        v-if="dashboardLoadError"
+        class="dashboard-retry"
+        type="button"
+        :disabled="isDashboardLoading"
+        @click="loadDashboard"
+      >
+        刷新
+      </button>
+
+      <label class="unit-switch">
+        <span class="unit-switch__label">单位</span>
+        <select v-model="selectedUnit" class="unit-switch__select" aria-label="切换金额单位">
+          <option v-for="unit in unitOptions" :key="unit.label" :value="unit.label">
+            {{ unit.label }}
+          </option>
+        </select>
+        <van-icon class="unit-switch__icon" name="arrow-down" aria-hidden="true" />
+      </label>
+    </div>
+
+    <section class="dashboard-list" aria-label="资金看板">
+      <article
+        v-for="card in cards"
+        :key="card.name"
+        class="dashboard-card"
+        :class="{ 'dashboard-card--split': card.metrics }"
+        :style="getCardStyle(card)"
+        :aria-label="getCardAriaLabel(card)"
+      >
+        <header class="dashboard-card__header">
+          <h2 class="dashboard-card__name">{{ card.name }}</h2>
+          <span class="dashboard-card__code">{{ card.code }}</span>
+        </header>
+
+        <p v-if="!card.metrics" class="dashboard-card__amount">
+          {{ formatMoney(card.amount || 0, card.symbol || '') }}
+        </p>
+
+        <div v-else class="dashboard-card__metrics">
+          <div v-for="metric in card.metrics" :key="metric.label" class="dashboard-card__metric">
+            <span class="dashboard-card__metric-label">{{ metric.label }}</span>
+            <strong class="dashboard-card__metric-value">
+              {{ formatMoney(metric.amount, metric.symbol) }}
+            </strong>
+          </div>
+        </div>
+      </article>
+    </section>
+  </main>
 </template>
 
 <style scoped>
@@ -12,7 +309,243 @@ defineOptions({ name: 'DashboardPage' })
   max-width: 750px;
   min-height: var(--app-page-min-height, 100vh);
   margin: 0 auto;
-  background: #f7f8fa;
+  padding: 8px 12px 10px;
+  color: #ffffff;
+  background: #ffffff;
   box-sizing: border-box;
 }
+
+.dashboard-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-bottom: 6px;
+}
+
+.dashboard-retry {
+  height: 24px;
+  margin-right: auto;
+  border: 1px solid #ffd4d8;
+  border-radius: 5px;
+  padding: 0 10px;
+  color: #dc2735;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 22px;
+  background: #fff5f6;
+}
+
+.dashboard-retry:disabled {
+  opacity: 0.62;
+}
+
+.unit-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  overflow: hidden;
+  border: 1px solid #e8ebf0;
+  border-radius: 5px;
+  background: #ffffff;
+  box-shadow: 0 2px 7px rgba(31, 45, 62, 0.07);
+}
+
+.unit-switch__label {
+  padding: 0 6px 0 8px;
+  color: #5f6672;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.unit-switch__select {
+  width: 56px;
+  height: 100%;
+  border: 0;
+  border-left: 1px solid #eef0f4;
+  padding: 0 21px 0 8px;
+  color: #171b20;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 24px;
+  background: transparent;
+  outline: none;
+  appearance: none;
+}
+
+.unit-switch__icon {
+  position: absolute;
+  right: 7px;
+  top: 50%;
+  color: #7d8591;
+  font-size: 11px;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.dashboard-list {
+  display: grid;
+  gap: 6px;
+}
+
+.dashboard-card {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  aspect-ratio: 351 / 80;
+  border-radius: 5px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  box-shadow:
+    0 2px 7px rgba(31, 45, 62, 0.13),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
+}
+
+.dashboard-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    radial-gradient(circle at 51% 56%, rgba(255, 255, 255, 0.13), transparent 28%),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
+  pointer-events: none;
+}
+
+.dashboard-card__header {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.dashboard-card__name,
+.dashboard-card__code,
+.dashboard-card__amount,
+.dashboard-card__metric-label,
+.dashboard-card__metric-value {
+  margin: 0;
+  letter-spacing: 0;
+}
+
+.dashboard-card__name {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  color: var(--dashboard-accent);
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.dashboard-card__code {
+  position: absolute;
+  top: 13px;
+  right: 13px;
+  color: var(--dashboard-accent);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.dashboard-card__amount {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 40px;
+  overflow: hidden;
+  padding: 0 18px;
+  color: #ffffff;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 21px;
+  font-weight: 500;
+  line-height: 1;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+  text-shadow:
+    0 2px 4px rgba(57, 73, 91, 0.18),
+    0 0 1px rgba(255, 255, 255, 0.28);
+}
+
+.dashboard-card__metrics {
+  position: absolute;
+  left: 52px;
+  right: 16px;
+  bottom: 13px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  align-items: end;
+  column-gap: 29px;
+}
+
+.dashboard-card__metrics::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: 4px;
+  width: 1px;
+  height: 31px;
+  background: rgba(255, 255, 255, 0.78);
+  transform: translateX(-15px);
+}
+
+.dashboard-card__metric {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+
+.dashboard-card__metric-label {
+  color: var(--dashboard-accent);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.dashboard-card__metric-value {
+  overflow: hidden;
+  color: #ffffff;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+  text-shadow:
+    0 2px 4px rgba(57, 73, 91, 0.18),
+    0 0 1px rgba(255, 255, 255, 0.28);
+}
+
+@media (max-width: 340px) {
+  .dashboard-page {
+    padding-right: 9px;
+    padding-left: 9px;
+  }
+
+  .dashboard-card__name {
+    font-size: 18px;
+  }
+
+  .dashboard-card__amount {
+    top: 38px;
+    font-size: 19px;
+  }
+
+  .dashboard-card__metrics {
+    left: 46px;
+    right: 11px;
+    column-gap: 22px;
+  }
+
+  .dashboard-card__metric-value {
+    font-size: 14px;
+  }
+}
 </style>