From 91bfcf61f44f353dfebc54a57b5b774721de3e9a Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期一, 19 十月 2026 09:39:22 +0800
Subject: [PATCH] feat(auth): 更新门户认证页面布局和样式
---
src/views/dashboard/analytics/modules/kpi-cards.vue | 269 ++++++-----------------------------------------------
1 files changed, 32 insertions(+), 237 deletions(-)
diff --git a/src/views/dashboard/analytics/modules/kpi-cards.vue b/src/views/dashboard/analytics/modules/kpi-cards.vue
index a813bda..1f3d505 100644
--- a/src/views/dashboard/analytics/modules/kpi-cards.vue
+++ b/src/views/dashboard/analytics/modules/kpi-cards.vue
@@ -1,251 +1,46 @@
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-
-import { CountTo } from '@vben/common-ui';
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@vben/types';
+import { computed, onMounted, reactive } from 'vue';
import { IconifyIcon } from '@vben/icons';
-
-import { Col, Row } from 'ant-design-vue';
-
+import { usePortalMenus } from '#/components/portal/use-portal-menus';
import { getTaskTodoPage } from '#/api/bpm/task';
-import { getReimbursementPage } from '#/api/finance/reimbursement';
import { getApplicationPage } from '#/api/research/application';
import { getGuidelinePage } from '#/api/research/guideline';
+import { getReimbursementPage } from '#/api/finance/reimbursement';
-defineOptions({ name: 'DashboardKpiCards' });
-
-const emit = defineEmits<{
- navigate: [name: string];
-}>();
-
-const todoCount = ref(0);
-const applicationCount = ref(0);
-const reimbursementCount = ref(0);
-const guidelineCount = ref(0);
-
-async function loadTodo() {
- try {
- const result = await getTaskTodoPage({ pageNo: 1, pageSize: 1 });
- todoCount.value = result.total ?? 0;
- } catch {
- /* 鏃犳潈闄愭垨鎺ュ彛寮傚父锛屼繚鎸� 0 */
- }
-}
-
-async function loadApplication() {
- try {
- const result = await getApplicationPage({ pageNo: 1, pageSize: 1 });
- applicationCount.value = result.total ?? 0;
- } catch {
- /* 鏃犳潈闄愭垨鎺ュ彛寮傚父锛屼繚鎸� 0 */
- }
-}
-
-async function loadReimbursement() {
- try {
- const result = await getReimbursementPage({ pageNo: 1, pageSize: 1 });
- reimbursementCount.value = result.total ?? 0;
- } catch {
- /* 鏃犳潈闄愭垨鎺ュ彛寮傚父锛屼繚鎸� 0 */
- }
-}
-
-async function loadGuideline() {
- try {
- const result = await getGuidelinePage({ pageNo: 1, pageSize: 1 });
- guidelineCount.value = result.total ?? 0;
- } catch {
- /* 鏃犳潈闄愭垨鎺ュ彛寮傚父锛屼繚鎸� 0 */
- }
-}
-
+type MetricKey = 'todo' | 'application' | 'reimbursement' | 'guideline';
+interface Metric { key: MetricKey; menu: MenuRecordRaw; icon: string; unit: string }
+const { features, goMenu } = usePortalMenus();
+const states = reactive<Record<MetricKey, { loading: boolean; failed: boolean; count: number }>>({
+ todo: { loading: true, failed: false, count: 0 }, application: { loading: true, failed: false, count: 0 }, reimbursement: { loading: true, failed: false, count: 0 }, guideline: { loading: true, failed: false, count: 0 },
+});
+const metrics = computed<Metric[]>(() => {
+ const f = features.value;
+ return [
+ f.todo && { key: 'todo', menu: f.todo, icon: 'lucide:list-todo', unit: '椤瑰緟鍔�' },
+ f.application && { key: 'application', menu: f.application, icon: 'lucide:file-text', unit: '椤圭敵鎶�' },
+ f.reimbursement && { key: 'reimbursement', menu: f.reimbursement, icon: 'lucide:receipt', unit: '寮犳姤閿�鍗�' },
+ f.guideline && { key: 'guideline', menu: f.guideline, icon: 'lucide:book-open', unit: '浠芥寚鍗�' },
+ ].filter((item): item is Metric => Boolean(item));
+});
+const loaders = { todo: getTaskTodoPage, application: getApplicationPage, reimbursement: getReimbursementPage, guideline: getGuidelinePage };
onMounted(() => {
- loadTodo();
- loadApplication();
- loadReimbursement();
- loadGuideline();
+ for (const metric of metrics.value) {
+ loaders[metric.key]({ pageNo: 1, pageSize: 1 }).then((result) => { states[metric.key].count = result.total ?? 0; }).catch(() => { states[metric.key].failed = true; }).finally(() => { states[metric.key].loading = false; });
+ }
});
</script>
<template>
- <Row :gutter="16">
- <!-- 鎴戠殑寰呭姙 -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="elite-card group cursor-pointer"
- @click="emit('navigate', 'BpmTaskTodo')"
- >
- <div class="flex items-center gap-4 p-5">
- <div class="elite-icon-tile">
- <IconifyIcon class="size-6" icon="lucide:list-todo" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="elite-label">鎴戠殑寰呭姙</div>
- <div class="flex items-baseline gap-1">
- <CountTo
- class="elite-value"
- :class="todoCount > 0 ? 'text-[#b8901f] dark:text-[#e3c567]' : ''"
- :duration="1200"
- :end-val="todoCount"
- />
- <span class="elite-unit">椤�</span>
- </div>
- <div class="elite-meta">瀹℃壒涓績 路 寰呭鐞嗕换鍔�</div>
- </div>
- </div>
- </div>
- </Col>
-
- <!-- 璇鹃鐢虫姤 -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="elite-card group cursor-pointer"
- @click="emit('navigate', 'ResearchApplication')"
- >
- <div class="flex items-center gap-4 p-5">
- <div class="elite-icon-tile">
- <IconifyIcon class="size-6" icon="lucide:file-text" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="elite-label">璇鹃鐢虫姤</div>
- <div class="flex items-baseline gap-1">
- <CountTo
- class="elite-value"
- :duration="1200"
- :end-val="applicationCount"
- />
- <span class="elite-unit">椤�</span>
- </div>
- <div class="elite-meta">璇鹃绠＄悊 路 鐢虫姤涔�</div>
- </div>
- </div>
- </div>
- </Col>
-
- <!-- 璐㈠姟鎶ラ攢 -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="elite-card group cursor-pointer"
- @click="emit('navigate', 'FinanceReimbursement')"
- >
- <div class="flex items-center gap-4 p-5">
- <div class="elite-icon-tile">
- <IconifyIcon class="size-6" icon="lucide:receipt" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="elite-label">璐㈠姟鎶ラ攢</div>
- <div class="flex items-baseline gap-1">
- <CountTo
- class="elite-value"
- :duration="1200"
- :end-val="reimbursementCount"
- />
- <span class="elite-unit">鍗�</span>
- </div>
- <div class="elite-meta">璐㈠姟鎶ラ攢 路 鎶ラ攢鍗�</div>
- </div>
- </div>
- </div>
- </Col>
-
- <!-- 璇鹃鎸囧崡 -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="elite-card group cursor-pointer"
- @click="emit('navigate', 'ResearchGuideline')"
- >
- <div class="flex items-center gap-4 p-5">
- <div class="elite-icon-tile">
- <IconifyIcon class="size-6" icon="lucide:book-open" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="elite-label">璇鹃鎸囧崡</div>
- <div class="flex items-baseline gap-1">
- <CountTo
- class="elite-value"
- :duration="1200"
- :end-val="guidelineCount"
- />
- <span class="elite-unit">浠�</span>
- </div>
- <div class="elite-meta">璇鹃绠＄悊 路 鐢虫姤鎸囧崡</div>
- </div>
- </div>
- </div>
- </Col>
- </Row>
+ <div class="portal-metrics" :style="{ '--count': metrics.length }"><button v-for="metric in metrics" :key="metric.key" type="button" @click="goMenu(metric.menu)"><span class="metric-icon"><IconifyIcon :icon="metric.icon" /></span><div><strong>{{ metric.menu.name }}</strong><div class="metric-value"><b>{{ states[metric.key].loading ? '鈥�' : states[metric.key].failed ? '鈥�' : states[metric.key].count }}</b><span>{{ states[metric.key].failed ? '鏆傛椂鏃犳硶鑾峰彇' : metric.unit }}</span></div></div><IconifyIcon class="metric-arrow" icon="lucide:chevron-right" /></button></div>
</template>
<style scoped>
-/* ===== 瀛︽湳鍏搁泤鍗＄墖 ===== */
-.elite-card {
- background: #fdfcfa;
- border: 1px solid rgba(212, 175, 55, 0.22);
- border-radius: 14px;
- box-shadow: 0 2px 14px rgba(15, 36, 64, 0.05);
- transition:
- border-color 0.3s ease,
- box-shadow 0.3s ease;
-}
-
-.elite-card:hover {
- border-color: rgba(212, 175, 55, 0.5);
- box-shadow: 0 6px 20px rgba(15, 36, 64, 0.09);
-}
-
-.dark .elite-card {
- background: #101a2b;
- border-color: rgba(212, 175, 55, 0.2);
- box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
-}
-
-/* 鍥炬爣搴曪細钘忛潚娓愬彉 + 閲戣壊鍥炬爣 */
-.elite-icon-tile {
- display: flex;
- width: 48px;
- height: 48px;
- flex-shrink: 0;
- align-items: center;
- justify-content: center;
- border-radius: 12px;
- color: #e3c567;
- background: linear-gradient(135deg, #1e4571, #0f2440);
- border: 1px solid rgba(212, 175, 55, 0.3);
- box-shadow: 0 4px 12px rgba(15, 36, 64, 0.18);
- transition: border-color 0.3s ease;
-}
-
-/* 鎮仠鍙閲戣壊鎻忚竟寰井鎻愪寒锛屼笉鍋氱缉鏀� */
-.group:hover .elite-icon-tile {
- border-color: rgba(212, 175, 55, 0.6);
-}
-
-.elite-label {
- margin-bottom: 4px;
- font-size: 12px;
- font-weight: 500;
- letter-spacing: 1px;
- color: #8a94a6;
-}
-
-.elite-value {
- font-size: 24px;
- font-weight: 700;
- line-height: 1.2;
- color: #0f2440;
-}
-
-.dark .elite-value {
- color: #e3c567;
-}
-
-.elite-unit {
- font-size: 12px;
- color: #8a94a6;
-}
-
-.elite-meta {
- margin-top: 4px;
- font-size: 12px;
- color: #8a94a6;
-}
+.portal-metrics { display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); }
+button { display: flex; min-width: 0; min-height: 80px; align-items: center; gap: 13px; padding: 8px 20px; border-right: 1px solid #e4edf5; background: #fff; text-align: left; cursor: pointer; }
+button:last-child { border: 0; }.metric-icon { display: grid; width: 43px; height: 43px; flex: none; place-items: center; border-radius: 50%; color: #2775b9; background: #ecf4fd; font-size: 23px; }
+strong { color: #315273; font-size: 13px; font-weight: 600; }.metric-value { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; }.metric-value b { color: #173958; font-size: 26px; line-height: 1.2; }.metric-value span { color: #5c7187; font-size: 11px; }.metric-arrow { width: 15px; flex: none; margin-left: auto; color: #5c7187; }
+button:hover { background: #f7faff; }button:focus-visible { outline: 2px solid #2c70b2; outline-offset: -2px; }
+@media (max-width: 850px) { .portal-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }button { padding: 8px 10px; }button:nth-child(2n) { border-right: 0; } }
+@media (max-width: 420px) { .metric-icon { width: 34px; height: 34px; font-size: 20px; }button { gap: 8px; padding: 8px 5px; }.metric-arrow { display: none; }.metric-value b { font-size: 23px; } }
</style>
--
Gitblit v1.9.3