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,46 @@
<script lang='ts' setup>
import { calculatorOutline, documentTextOutline, fingerPrintOutline, personOutline } from "ionicons/icons";
const { t } = useI18n();
</script>
<template>
<div>
<ion-label class="text-md font-semibold">
{{ t("asset.issue.issuingAsset") }}
</ion-label>
<div class="grid grid-cols-4 mt-5">
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="personOutline" />
<div class="text-xs">
{{ t("asset.issue.myCompany") }}
</div>
</div>
<div class="col-span-1 flex-col-center gap-2" @click="$router.push('/issue/issuing-apply')">
<ion-icon :icon="documentTextOutline" />
<div class="text-xs">
{{ t("asset.issue.issuingApply") }}
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="calculatorOutline" />
<div class="text-xs">
{{ t("asset.issue.audit") }}
</div>
</div>
<div class="col-span-1 flex-col-center gap-2">
<ion-icon :icon="fingerPrintOutline" />
<div class="text-xs">
{{ t("asset.issue.supervision") }}
</div>
</div>
</div>
</div>
</template>
<style lang='css' scoped>
ion-icon {
font-size: 1.5rem;
color: var(--ion-color-primary);
}
</style>

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>

View File

@@ -0,0 +1,40 @@
<script lang='ts' setup>
import { cardOutline, documentOutline, documentTextOutline } from "ionicons/icons";
const { t } = useI18n();
</script>
<template>
<div>
<ion-label class="text-md font-semibold">
{{ t('trade.title') }}
</ion-label>
<div class="grid grid-cols-4 mt-5">
<div class="col-span-1 flex-col-center gap-2" @click="$router.push('/trade-settings/bank-management')">
<ion-icon :icon="cardOutline" />
<div class="text-xs">
{{ t('trade.settings.bankManagement') }}
</div>
</div>
<div class="col-span-1 flex-col-center gap-2" @click="$router.push('/trade-settings/my-subscribe')">
<ion-icon :icon="documentOutline" />
<div class="text-xs">
{{ t('trade.settings.mySubscribe') }}
</div>
</div>
<div class="col-span-1 flex-col-center gap-2" @click="$router.push('/trade-settings/my-issues')">
<ion-icon :icon="documentTextOutline" />
<div class="text-xs">
{{ t('trade.settings.myIssues') }}
</div>
</div>
</div>
</div>
</template>
<style lang='css' scoped>
ion-icon {
font-size: 1.5rem;
color: var(--ion-color-primary);
}
</style>

View File

@@ -0,0 +1,27 @@
<script lang='ts' setup>
import UserInfo from "../user/components/user-info.vue";
import IssuingAsset from "./components/issuing-asset.vue";
import MyRevenue from "./components/my-revenue.vue";
import TradeSettings from "./components/trade-settings.vue";
</script>
<template>
<ion-page>
<ion-header class="ion-no-border">
<ion-toolbar class="ui-toolbar">
<ui-back-button slot="start" text="" />
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true" class="ion-padding">
<UserInfo />
<div class="h-px w-full bg-text-900 my-5" />
<div class="flex flex-col gap-10 mt-10">
<IssuingAsset />
<MyRevenue />
<TradeSettings />
</div>
</ion-content>
</ion-page>
</template>
<style lang='css' scoped></style>

View File

@@ -8,12 +8,9 @@ import Rwa from "./components/rwa.vue";
<ion-page>
<ion-header class="ion-no-border">
<ion-toolbar class="ui-toolbar">
<ion-button slot="start" fill="clear">
<ion-button slot="start" fill="clear" class="z-1" @click="$router.push('/global-menu')">
<IconParkOutlineApplicationMenu slot="icon-only" />
</ion-button>
<ion-button slot="end" fill="clear">
<!-- <ui-avatar slot="icon-only" class="w-10 h-10" style="--padding: 8px" /> -->
</ion-button>
<ion-title>首页</ion-title>
</ion-toolbar>
</ion-header>

View File

@@ -9,11 +9,11 @@ const { fundingBalances, totalAssetValue } = storeToRefs(walletStore);
<template>
<div>
<ion-label class="text-xs font-medium text-text-300">
<div class="text-md font-semibold my-4">
资产分布
</ion-label>
</div>
<div class="grid grid-cols-2 gap-4 mt-2">
<div class="grid grid-cols-2 gap-4">
<div class="asset-card">
<div class="text-xs text-text-400 font-semibold flex items-center gap-1">
<SolarDollarMinimalisticBoldDuotone />
@@ -34,9 +34,10 @@ const { fundingBalances, totalAssetValue } = storeToRefs(walletStore);
</div>
</div>
<ion-label class="text-xs font-medium text-text-300">
<div class="text-md font-semibold my-4">
资产
</ion-label>
</div>
<ion-list lines="none" class="space-y-5 mt-2!">
<ion-item v-for="asset, i in fundingBalances" :key="i" class="">
<div class="flex items-center space-x-3 flex-1">

View File

@@ -9,7 +9,7 @@ const { userProfile } = storeToRefs(userStore);
<template>
<div class="user-info-container">
<div class="user-info" @click="$router.push('/user/settings')">
<ui-avatar class="size-18" />
<ui-avatar class="size-14" />
<div>
<div class="user-name">
{{ userProfile?.user?.email }}

View File

@@ -39,7 +39,7 @@ onMounted(() => {
</div>
</div>
<div class="flex gap-2 w-full justify-around">
<div class="flex gap-2 w-full justify-around mt-2">
<div id="open-recharge-modal" class="flex-col-center">
<ion-button expand="full" color="success" shape="round" class="w-12 h-12">
<IcRoundArrowCircleDown slot="icon-only" />

View File

@@ -64,9 +64,9 @@ async function handleScan() {
<UserInfo />
<WalletCard />
<Asset />
<IssuingAsset />
<!-- <IssuingAsset />
<MyRevenue />
<TradeSettings />
<TradeSettings /> -->
</div>
</ion-content>
</ion-page>