feat: 路由i18n

src/App.vue

@@ -1,15 +1,55 @@
- <script setup>
-</script>
-
 <template>
-  <RouterView />
+  <van-nav-bar
+    :title="$t(route.meta.title)"
+    v-if="route.meta.navbar"
+    class="app-bar-header"
+    :style="notchStyle"
+  />
+  <RouterView :style="mainStyle" />
 </template>
 
-<style  lang="less">
+<script setup>
+import { getNotchHeight } from "@/utils/statusBar";
+const route = useRoute();
+
+const notchStyle = ref({});
+const mainStyle = ref({});
+ 
+
+onBeforeMount(async () => {
+  const height = await getNotchHeight();
+  notchStyle.value = {
+    height: `calc(46px + ${height}px)`,
+  };
+
+  if (route.meta.navbar) {
+    mainStyle.value.marginTop = `0 px`;
+  } else {
+    mainStyle.value = {
+      marginTop: `${height}px`,
+    };
+  }
+});
+</script>
+
+<style lang="less">
 body {
-  margin: 0 ;
+  margin: 0;
   overflow: hidden;
   height: 100%;
   background-color: @bg-color2;
 }
 </style>
+
+<style scoped lang="less">
+.app-bar-header {
+  :deep(.van-nav-bar__content) {
+    height: 100%;
+  }
+  :deep(.van-nav-bar__title) {
+    height: 72%;
+    display: flex;
+    align-items: flex-end;
+  }
+}
+</style>

src/assets/css/theme.less

@@ -9,6 +9,7 @@
 @bg-color2: #F7F8FA; // 二次容器色
 
 // 字体次要颜色
+@font-color1: #ffffff;
 @font-color2: #4F4F4F;
 
 

src/i18n/enUs/index.js

@@ -1,7 +1,8 @@
 import login from './login'
 import global from './global'
-
+import router from './router'
 export default {
   login,
-  global
+  global,
+  router,
 }

src/i18n/enUs/router.js

@@ -0,0 +1,3 @@
+export default {
+  Login: "登录"
+}

src/i18n/zhHk/index.js

@@ -1,6 +1,8 @@
 import login from './login'
 import global from './global'
+import router from './router'
 export default {
   login,
   global,
+  router,
 }

src/i18n/zhHk/login.js

@@ -7,6 +7,11 @@ export default {
   LoginTxt:"繼續使用，代表你同意",
 
 
-  PrivacyPolicy:"隱私政策",
-  UserAgreement:"用戶協議",
+  PrivacyPolicy:"隱私政策", 
+  UserAgreement: "用戶協議",
+
+  UserAgreementTxt: "請先閱讀用戶隱私協議，點擊繼續表明你同意 Angel Toke 隱私政策和用戶協議",
+
+  IHaveReadAndAgree:"已經閱讀並同意",
+  Cancel: "取消",
 };

src/i18n/zhHk/router.js

@@ -0,0 +1,9 @@
+export default {
+  Login: "登錄",
+  SelectMainnet: "選擇主網",
+  Social: "社交",
+  Transaction: "交易",
+  Wallet: "錢包",
+  Dapp: "DAPP",
+  Me: "我的"
+}

src/layout/app/index.vue

@@ -1,14 +1,7 @@
-<template>
-  <van-nav-bar
-    :title="route.meta.title"
-    v-if="route.meta.navbar"
-    class="app-bar-header"
-    :style="notchStyle"
-  />
+<template> 
 
   <router-view
     v-slot="{ Component }"
-    :style="mainStyle"
   >
     <keep-alive v-if="route.meta.keepAlive">
       <component :is="Component" key="Layout" />
@@ -26,13 +19,10 @@
   </van-tabbar>
 </template>
 
-<script setup>
-import { ref, onBeforeMount } from "vue";
-import { useRoute } from "vue-router";
+<script setup> 
 import { getNotchHeight } from "@/utils/statusBar";
 
-const route = useRoute();
-const notchStyle = ref({});
+const route = useRoute(); 
 const mainStyle = ref({});
 
 const active = ref(route.name);
@@ -67,9 +57,7 @@ const tabbarOptions = [
 
 onBeforeMount(async () => {
   const height = await getNotchHeight();
-  notchStyle.value = {
-    height: `calc(46px + ${height}px)`,
-  };
+ 
   if (route.meta.navbar) {
     mainStyle.value.marginTop = `0 px`;
   } else {
@@ -81,16 +69,6 @@ onBeforeMount(async () => {
 </script>
 
 <style scoped lang="less">
-.app-bar-header {
-  :deep(.van-nav-bar__content) {
-    height: 100%;
-  }
-  :deep(.van-nav-bar__title) {
-    height: 72%;
-    display: flex;
-    align-items: flex-end;
-  }
-}
 .tabbar-icon{
   width: 25px;
   height: 25px;

src/main.js

@@ -9,7 +9,7 @@ import 'vant/lib/index.css';
 // 字体
 import "@/assets/font/font.css"
 import { i18n } from "@/i18n/index.js";
-import router,{ setupRouter } from '@/router'
+
 // 引入组件
 import "virtual:svg-icons-register";
 import SvgIcon from "@/components/Svg-icon/SvgIcon.vue";
@@ -34,12 +34,10 @@ async function appInit() {
   app.use(i18n);
   // windows 挂载
   setup()
-    // 挂载路由
-  await setupRouter(app);
-  await router.isReady();
+
 
   // setupPlugin(app)
-  // initCapacitor(app)
+  initCapacitor(app)
 
   app.mount("#app", true);
 }

src/plugins/index.js

@@ -1,61 +1,60 @@
-
-
-import router from '@/router' 
+import router, { setupRouter } from "@/router";
 // 新增：Capacitor 相关导入
-import { App as CapApp } from '@capacitor/app'
-import { Browser } from '@capacitor/browser'
-  
-// 推送服务
-import { pushNotificationService } from '@/services/PushNotificationService'
-
+import { App as CapApp } from "@capacitor/app";
+import { Browser } from "@capacitor/browser";
 
+// 推送服务
+import { pushNotificationService } from "@/services/PushNotificationService";
 
 // 新增：Capacitor 初始化逻辑
 export const initCapacitor = async (app) => {
+  await setupRouter(app);
+  await router.isReady();
+
   // Android 返回按钮处理
-  CapApp.addListener('backButton', ({ canGoBack }) => {
-    if (router.currentRoute.value.path !== '/' && canGoBack) {
-      router.back()
+  CapApp.addListener("backButton", ({ canGoBack }) => {
+    if (router.currentRoute.value.path !== "/" && canGoBack) {
+      router.back();
     } else {
-      CapApp.exitApp()
+      CapApp.exitApp();
     }
-  })
+  });
 
   // 全局注入 Capacitor 能力
-  app.config.globalProperties.$capApp = CapApp
-  app.config.globalProperties.$capBrowser = Browser
-}
-
+  app.config.globalProperties.$capApp = CapApp;
+  app.config.globalProperties.$capBrowser = Browser;
+};
 
 export async function setupPlugin(app) {
-
   // 在应用挂载前初始化推送通知监听器
   // 你可以在这里定义如何处理收到的通知和注册信息
   pushNotificationService.initialize(
     (token) => {
       // 成功获取到设备 token，将其发送到你的后端服务器
-      console.log('App: Device Token for push notifications:', token.value);
+      console.log("App: Device Token for push notifications:", token.value);
       // TODO: 将 token 发送到你的服务器进行注册，这是后续后端发送推送的关键
     },
     (error) => {
       // 处理注册错误
-      console.error('App: Push notification registration failed', error);
+      console.error("App: Push notification registration failed", error);
       // TODO: 可以在 UI 中提示用户注册失败
     },
     (notification) => {
       // 收到推送通知 (应用在前台或后台)
-      console.log('App: Push notification received in app:', notification);
+      console.log("App: Push notification received in app:", notification);
       // TODO: 根据通知内容更新 UI 或显示提示
-      alert(`收到消息: ${notification.title || ''} - ${notification.body || ''}`);
+      alert(
+        `收到消息: ${notification.title || ""} - ${notification.body || ""}`
+      );
     },
     (notification) => {
       // 用户点击了推送通知 (应用被打开或从后台唤醒)
-      console.log('App: Push notification action performed:', notification);
+      console.log("App: Push notification action performed:", notification);
       // TODO: 根据 notification.actionId 和 notification.data 进行路由跳转或执行特定操作
       alert(`用户点击通知: ${notification.notification.title}`);
       if (notification.notification.data?.route) {
-          // 示例：如果通知数据中包含 'route' 字段，则进行路由跳转
-          router.push(notification.notification.data.route);
+        // 示例：如果通知数据中包含 'route' 字段，则进行路由跳转
+        router.push(notification.notification.data.route);
       }
     }
   );

src/plugins/storage.js

@@ -4,5 +4,5 @@ import { i18n } from "@/i18n";
 export function setup() {
   window["$message"] = showNotify
 
-    window["$t"] = i18n.global.t;
+  window["$t"] = i18n.global.t;
 }

src/router/system.js

@@ -10,31 +10,31 @@ export const systemRoutes = [
       {
         path: "im",
         name: "im",
-        meta: { title: "社交", keepAlive: false, navbar: true },
+        meta: { title: "router.Social", keepAlive: false, navbar: true }, // 社交
         component: () => import("@/views/home/index.vue"),
       },
       {
         path: "transaction",
         name: "transaction",
-        meta: { title: "交易", keepAlive: false, navbar: true },
+        meta: { title: "router.Transaction", keepAlive: false, navbar: true }, // 交易
         component: () => import("@/views/transaction/index.vue"),
       },
       {
         path: "wallet",
         name: "wallet",
-        meta: { title: "钱包", keepAlive: false, navbar: true },
+        meta: { title: "router.Wallet", keepAlive: false, navbar: true }, // 钱包
         component: () => import("@/views/wallet/index.vue"),
       },
       {
         path: "dapp",
         name: "dapp",
-        meta: { title: "DAPP", keepAlive: false, navbar: false },
+        meta: { title: "router.Dapp", keepAlive: false, navbar: false }, // DAPP
         component: () => import("@/views/dapp/index.vue"),
       },
       {
         path: "me",
         name: "me",
-        meta: { title: "我的", keepAlive: false, navbar: false },
+        meta: { title: "router.Me", keepAlive: false, navbar: false }, // 我的
         component: () => import("@/views/me/index.vue"),
       },
     ],

src/router/whitelist.js

@@ -1,4 +1,4 @@
- 
+
 // 白名单
 export const whitelistRoutes = [
   {
@@ -6,7 +6,17 @@ export const whitelistRoutes = [
     name: "login",
     component: () => import("@/views/login/index.vue"),
     meta: {
-      title: '登录'
+      title: "router.Login",   // 登录
+    }
+  },
+  {
+    path: "/selectNetwork",
+    name: "selectNetwork",
+    component: () => import("@/views/login/selectNetwork/index.vue"),
+    meta: {
+      title:  "router.SelectMainnet",   // 选择主网
+      keepAlive: false,
+      navbar: true
     }
   }
 ]

src/views/login/index.vue

@@ -8,8 +8,8 @@
 
 
     <div class="operation-body">
-      <van-button type="primary" round>{{ $t("login.CreateWallet") }}</van-button>
-      <van-button   class="operation-button" type="default" round>{{ $t("login.ImportWallet")}}</van-button>
+      <van-button type="primary" round @click="showBottom = true">{{ $t("login.CreateWallet") }}</van-button>
+      <van-button   class="operation-button" type="default" round @click="showBottom = true">{{ $t("login.ImportWallet")}}</van-button>
     </div>
 
     <div class="bottom-body">
@@ -21,9 +21,37 @@
       <a class="a-link">{{ $t("login.UserAgreement") }}</a>
     </div>
   </div>
+
+
+  <van-popup
+    v-model:show="showBottom"
+    round
+    position="bottom"
+    :style="{ height: '30.4%' }"
+  >
+    <div class="popup-content">
+      <span class="popup-title">{{  $t("login.UserAgreement") }}</span>
+      <span  class="popup-txt">{{  $t("login.UserAgreementTxt") }}</span>
+
+
+      <van-button type="primary" round class="popup-btn" color="#4F4F4F"  @click="evAgree">{{ $t("login.IHaveReadAndAgree") }}</van-button>
+      <span class="popup-cancel" @click="showBottom = false">{{ $t("login.Cancel") }}</span>
+    </div>
+  </van-popup>
 </template>
-<script setup>  
+<script setup>
+
+
+const router = useRouter()
+ 
 const checked = ref('')
+const showBottom = ref(false)
+
+const evAgree = ()=>{
+  router.push({
+    path: '/selectNetwork'
+  })
+}
 
 </script>
 
@@ -42,8 +70,8 @@ const checked = ref('')
     flex-direction: column;
     align-items: center;
   }
-  .login-title-main {
-    font-weight: 600;
+  .login-title-main { 
+    font-weight: 500;
     font-size: 25px;
     margin: 0 0 9px 0;
   }
@@ -72,5 +100,42 @@ const checked = ref('')
   .a-link{
     margin: 0 5px;
   }
+
+}
+.popup-content{
+  display: flex;
+  flex-direction:column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  .popup-title{
+    font-size: 17px;
+    font-weight: 500px;
+    margin-top: 32px;
+  }
+  .popup-txt{
+    font-size: 12px;
+    margin: 17px 23px 0 23px;
+    color: @font-color2;
+    letter-spacing: 1px;
+  }
+  .popup-btn{
+    margin-top: 30px;
+    width: 312px;
+    height: 54px; 
+    border-radius: 70px 70px 70px 70px;
+    :deep(.van-button__text){
+      font-size: 19px;
+    }
+  }
+  .popup-cancel{
+    margin-top: 19px;
+    font-size: 19px;
+    color: @font-color2;
+    &:hover {
+      cursor: pointer;
+      color: @hover-color;
+    }
+  }
 }
 </style>

src/views/login/selectNetwork/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>123</div>
+</template>