feat: 添加全局菜单组件及相关路由,优化用户界面

This commit is contained in:
2025-12-28 01:34:44 +07:00
parent 9ef64ad961
commit 7fc1c84329
11 changed files with 197 additions and 13 deletions

View File

@@ -0,0 +1,68 @@
<script lang='ts' setup>
import { calendarOutline, listOutline, timeOutline, walletOutline } from "ionicons/icons";
const { t } = useI18n();
const router = useRouter();
function navigateToTotal() {
router.push("/revenue/total");
}
function navigateToMonthly() {
router.push("/revenue/monthly");
}
function navigateToPending() {
router.push("/revenue/pending");
}
function navigateToRecords() {
router.push("/revenue/records");
}
</script>
<template>
<div>
<ion-label class="text-md font-semibold">
{{ t("asset.revenue.myRevenue") }}
</ion-label>
<div class="grid grid-cols-4 mt-5">
<div
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
@click="navigateToTotal"
>
<ion-icon :icon="walletOutline" class="text-2xl text-primary" />
<div class="text-xs">
{{ t("asset.revenue.totalRevenue") }}
</div>
</div>
<div
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
@click="navigateToMonthly"
>
<ion-icon :icon="calendarOutline" class="text-2xl text-primary" />
<div class="text-xs">
{{ t("asset.revenue.monthlyRevenue") }}
</div>
</div>
<div
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
@click="navigateToPending"
>
<ion-icon :icon="timeOutline" class="text-2xl text-primary" />
<div class="text-xs">
{{ t("asset.revenue.pendingRevenue") }}
</div>
</div>
<div
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
@click="navigateToRecords"
>
<ion-icon :icon="listOutline" class="text-2xl text-primary" />
<div class="text-xs">
{{ t("asset.revenue.revenueDetails") }}
</div>
</div>
</div>
</div>
</template>