feat: 添加自定义返回按钮组件并替换现有页面中的返回按钮

2025-12-27 20:38:55 +07:00
parent b355519671
commit 03c923e9d2
24 changed files with 49 additions and 22 deletions
--- a/src/ui/back-button/index.vue
+++ b/src/ui/back-button/index.vue
@@ -0,0 +1,26 @@
+<script lang='ts' setup>
+import { chevronBackOutline } from "ionicons/icons";
+
+const { text = "返回" } = defineProps<{
+  text?: string;
+}>();
+const router = useRouter();
+
+function onBack() {
+  if (window.history.length > 1) {
+    router.back();
+  }
+  else {
+    router.replace("/");
+  }
+}
+</script>
+
+<template>
+  <button class="z-1 flex items-center" @click="onBack">
+    <ion-icon :icon="chevronBackOutline" class="text-2xl" />
+    <span v-if="text" class="text-base">{{ text }}</span>
+  </button>
+</template>
+
+<style lang='css' scoped></style>
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -35,5 +35,6 @@ declare module "vue" {
    UiTabs: typeof import("./tabs/index.vue")["default"];
    UiTag: typeof import("./tag/index.vue")["default"];
    UiTextareaLabel: typeof import("./textarea-label/index.vue")["default"];
+    UiBackButton: typeof import("./back-button/index.vue")["default"];
  }
 }
--- a/src/views/auth/signup/index.vue
+++ b/src/views/auth/signup/index.vue
@@ -6,7 +6,7 @@ import { Field, Form } from "vee-validate";
  <IonPage>
    <IonHeader class="ion-no-border">
      <IonToolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
      </IonToolbar>
    </IonHeader>
    <IonContent :fullscreen="true" class="ion-padding">
--- a/src/views/deposit/fiat.vue
+++ b/src/views/deposit/fiat.vue
@@ -55,7 +55,7 @@ async function onSubmit() {
    <IonHeader>
      <ion-toolbar class="ui-toolbar">
        <ion-buttons slot="start">
-          <ion-back-button />
+          <ui-back-button />
        </ion-buttons>
        <ion-title>{{ t("recharge.fiat.title") }}</ion-title>
      </ion-toolbar>
--- a/src/views/income/total/index.vue
+++ b/src/views/income/total/index.vue
@@ -36,7 +36,7 @@ onMounted(() => {
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
        <ion-title>{{ t("income.title") }}</ion-title>
      </ion-toolbar>
    </ion-header>
--- a/src/views/issue/issuing-apply/index.vue
+++ b/src/views/issue/issuing-apply/index.vue
@@ -56,7 +56,7 @@ async function handleSubmit(editions: RwaIssuanceProductBody["editions"]) {
  <IonPage>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
        <ion-title>{{ t('asset.issue.apply.title') }}</ion-title>
      </ion-toolbar>
    </ion-header>
--- a/src/views/onchain-address/index.vue
+++ b/src/views/onchain-address/index.vue
@@ -22,7 +22,7 @@ const qrcode = useQRCode(url, {
    <IonHeader>
      <IonToolbar class="ui-toolbar">
        <ion-buttons slot="start">
-          <ion-back-button />
+          <ui-back-button />
        </ion-buttons>
        <ion-title>我的二维码</ion-title>
      </IonToolbar>
--- a/src/views/system-settings/index.vue
+++ b/src/views/system-settings/index.vue
@@ -80,7 +80,7 @@ onMounted(() => {
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
      </ion-toolbar>
    </ion-header>

--- a/src/views/system-settings/language.vue
+++ b/src/views/system-settings/language.vue
@@ -20,7 +20,7 @@ function handleLanguageChange(event: CustomEvent) {
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
        <ion-title>{{ t("settings.languageTitle") }}</ion-title>
      </ion-toolbar>
    </ion-header>
--- a/src/views/system-settings/outlet.vue
+++ b/src/views/system-settings/outlet.vue
@@ -4,7 +4,7 @@
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
      </ion-toolbar>
    </ion-header>

--- a/src/views/system-settings/theme.vue
+++ b/src/views/system-settings/theme.vue
@@ -20,7 +20,7 @@ function handleThemeChange(event: CustomEvent) {
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
      </ion-toolbar>
    </ion-header>

--- a/src/views/trade-rwa/edit.vue
+++ b/src/views/trade-rwa/edit.vue
@@ -10,7 +10,7 @@ defineProps<{
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" text="" />
+        <ui-back-button slot="start" text="" />
        <ion-title />
      </ion-toolbar>
    </ion-header>
--- a/src/views/trade-rwa/index.vue
+++ b/src/views/trade-rwa/index.vue
@@ -40,7 +40,7 @@ function gotoEdit() {
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" text="" />
+        <ui-back-button slot="start" text="" />
        <ion-title>
          {{ data?.product.code }}
        </ion-title>
--- a/src/views/trade-rwa/outlet.vue
+++ b/src/views/trade-rwa/outlet.vue
@@ -12,7 +12,7 @@ const { data } = safeClient(client.api.rwa.subscription.available_editions({ edi
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
        <ion-title>
          {{ data?.product.code }}
        </ion-title>
--- a/src/views/trade-settings/bank-management/add.vue
+++ b/src/views/trade-settings/bank-management/add.vue
@@ -64,7 +64,7 @@ function formatCardNumber(value: string) {
  <IonPage>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
        <ion-title>{{ t('bankCard.add') }}</ion-title>
      </ion-toolbar>
    </ion-header>
--- a/src/views/trade-settings/bank-management/index.vue
+++ b/src/views/trade-settings/bank-management/index.vue
@@ -107,7 +107,7 @@ onUpdated(() => {
  <IonPage>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
        <ion-title>{{ t('bankCard.management') }}</ion-title>
      </ion-toolbar>
    </ion-header>
--- a/src/views/trade-settings/my-issues/detail.vue
+++ b/src/views/trade-settings/my-issues/detail.vue
@@ -41,7 +41,7 @@ function gotoEdit() {
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" text="" />
+        <ui-back-button slot="start" text="" />
        <ion-title>
          {{ data?.code }}
        </ion-title>
--- a/src/views/trade-settings/my-issues/outlet.vue
+++ b/src/views/trade-settings/my-issues/outlet.vue
@@ -6,7 +6,7 @@ const { t } = useI18n();
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
        <ion-title>{{ t('myIssues.title') }}</ion-title>
      </ion-toolbar>
    </ion-header>
--- a/src/views/trade-settings/my-subscribe/detail.vue
+++ b/src/views/trade-settings/my-subscribe/detail.vue
@@ -34,7 +34,7 @@ async function handleSubscribe(val: number) {
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
        <ion-title>
          {{ data?.edition.product.code }}
        </ion-title>
--- a/src/views/trade-settings/my-subscribe/index.vue
+++ b/src/views/trade-settings/my-subscribe/index.vue
@@ -60,7 +60,7 @@ onBeforeMount(() => {
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
        <ion-title>我的申购</ion-title>
      </ion-toolbar>
    </ion-header>
--- a/src/views/user-settings/outlet.vue
+++ b/src/views/user-settings/outlet.vue
@@ -4,7 +4,7 @@
  <ion-page>
    <ion-header>
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" />
+        <ui-back-button slot="start" />
        <ion-title>用户设置</ion-title>
      </ion-toolbar>
    </ion-header>
--- a/src/views/wallet/bill.vue
+++ b/src/views/wallet/bill.vue
@@ -9,7 +9,7 @@ const activeTab = ref("deposit");
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ui-toolbar">
-        <ion-back-button slot="start" text="" />
+        <ui-back-button slot="start" text="" />
        <ion-title>账单</ion-title>
      </ion-toolbar>
      <ion-toolbar class="ui-toolbar">
--- a/src/views/wallet/transfer.vue
+++ b/src/views/wallet/transfer.vue
@@ -122,7 +122,7 @@ function getAccountTypeName(type: AccountType) {
    <ion-header>
      <ion-toolbar class="ui-toolbar">
        <ion-buttons slot="start">
-          <ion-back-button default-href="/wallet/index" />
+          <ui-back-button default-href="/wallet/index" />
        </ion-buttons>
        <ion-title>{{ t("transfer.title") }}</ion-title>
      </ion-toolbar>
--- a/src/views/withdraw/index.vue
+++ b/src/views/withdraw/index.vue
@@ -54,7 +54,7 @@ async function onSubmit(values: GenericObject) {
    <IonHeader>
      <ion-toolbar class="ui-toolbar">
        <ion-buttons slot="start">
-          <ion-back-button />
+          <ui-back-button />
        </ion-buttons>
        <ion-title>{{ t("withdraw.title") }}</ion-title>
      </ion-toolbar>