feat: i18n

package.json

@@ -43,6 +43,7 @@
     "sharp": "^0.34.2",
     "vant": "^4.9.20",
     "vue": "^3.5.13",
+    "vue-i18n": "^11.1.9",
     "vue-router": "^4.5.0",
     "web3": "^4.16.0"
   },
@@ -53,6 +54,7 @@
     "code-inspector-plugin": "^0.20.12",
     "cordova-plugin-console": "^1.1.0",
     "fast-glob": "^3.3.3",
+    "unplugin-auto-import": "^19.3.0",
     "vite": "^6.2.4",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-devtools": "^7.7.2"

settings/designSetting.js

@@ -0,0 +1,2 @@
+// 默认语言
+export const lang = "zh-hk" 

src/App.vue

@@ -1,9 +1,6 @@
-<script setup> 
-import { RouterView } from 'vue-router' 
- 
+ <script setup>
 </script>
 
-
 <template>
   <RouterView />
 </template>

src/assets/css/global.less

@@ -16,6 +16,18 @@
 
 
 
+
+.a-link {
+  color: @theme-color1;
+  text-decoration: none;
+  &:hover {
+    color: @hover-color;
+    cursor: pointer;
+  }
+}
+
+
+
 .fn-head-bg(@height: 197px){
   height: @height;
   width: 100%;

src/assets/css/theme.less

@@ -9,4 +9,8 @@
 @bg-color2: #F7F8FA; // 二次容器色
 
 // 字体次要颜色
-@font-color2: #4F4F4F;
+@font-color2: #4F4F4F;
+
+
+// 点击颜色
+@hover-color: #40A4FB;

src/hooks/useLang.hook.js

@@ -0,0 +1,17 @@
+import { computed } from 'vue'
+import { useLangStore } from '@/stores/modules/langStore'
+
+
+
+// 语言切换
+export const useLang = () => {
+  const lang = useLangStore()
+  console.log(lang)
+  const locale = computed(() => {
+    return  i18n[lang.getLang]
+  })
+
+  return {
+    locale
+  }
+}

src/i18n/enUs/global.js

@@ -0,0 +1,11 @@
+export default {
+  "logOut": "log out",
+  "newMenu": "new menu",
+  common: {
+    search: 'Search',
+    reset: 'Reset',
+    edit: 'Edit',
+    delete: 'Delete',
+    operations: 'Operations'
+  }
+}

src/i18n/enUs/index.js

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

src/i18n/enUs/login.js

@@ -0,0 +1,7 @@
+export default {
+  createWallet: "创建钱包",
+  importWallet: "导入钱包",
+
+  wallet: "數字資產錢包",
+  support: "支持",
+};

src/i18n/index.js

@@ -0,0 +1,36 @@
+//语言
+import { lang } from "@/settings/designSetting";
+import { createI18n } from "vue-i18n"; //引入vue-i18n组件
+import { useLangStore } from "@/stores/modules/langStore";
+
+
+// 系统语言包
+import zhHkSys from "./zhHk/index";
+import enUsSys  from "./enUs/index"; 
+
+const langStore = useLangStore();
+
+// 创建i18n实例
+export const i18n = createI18n({
+  legacy: false,
+  globalInjection: true,
+  locale: langStore?.lang || lang,
+  messages: {
+    "zh-HK": zhHkSys,
+    "en-US": enUsSys, 
+  },
+});
+ 
+// 语言数组
+export const langList = [
+  {
+    label: "繁体中文",
+    key: "zh-HK",
+  },
+  {
+    label: "English",
+    key: "en-US",
+  },
+];
+
+

src/i18n/vant.js

@@ -0,0 +1,24 @@
+import { lang } from "@/settings/designSetting";
+import { useLangStore } from "@/stores/modules/langStore";
+
+
+
+const langStore = useLangStore();
+
+// UI组件语言包
+import enUS from 'vant/es/locale/lang/en-US';
+import zhHK from 'vant/es/locale/lang/zh-HK';
+
+const i18nUi = new map([
+  ["zh-HK", zhHK],
+  ["en-US", enUS]
+]); 
+
+
+
+
+// 切换端语言包
+export const useLang = (e) => {
+  const lang = e || langStore?.lang || lang
+  Locale.use(lang, i18nUi.get(lang));
+}

src/i18n/zhHk/global.js

@@ -0,0 +1,12 @@
+
+export default {
+  "logOut": "退出登录",
+  "newMenu": "新增菜单",
+  common: {
+    search: '搜索',
+    reset: '重置',
+    edit: '编辑',
+    delete: '删除',
+    operations: '操作'
+  }
+}

src/i18n/zhHk/index.js

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

src/i18n/zhHk/login.js

@@ -0,0 +1,12 @@
+export default {
+  CreateWallet: "創建錢包",
+  ImportWallet: "導入錢包",
+
+  Wallet: "數字資產錢包",
+  Support: "支持",
+  LoginTxt:"繼續使用，代表你同意",
+
+
+  PrivacyPolicy:"隱私政策",
+  UserAgreement:"用戶協議",
+};

src/main.js

@@ -1,12 +1,50 @@
-import { createApp } from 'vue'
+ 
 
 import App from './App.vue'
-import { setupPlugin } from './plugins';
+
+import { setupStore } from "@/stores";
 // ui 
+import Vant from 'vant';
 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";
+
+// windows 挂载 & 注入
+import { setupPlugin, initCapacitor } from './plugins';
+import { setup  } from './plugins/storage';
+
+
 const app = createApp(App)
-setupPlugin(app);
 
-app.mount('#app');
+
+
+async function appInit() {
+  const app = createApp(App);
+   // 注入组件
+  app.component("SvgIcon", SvgIcon);
+  // 挂载状态管理
+  setupStore(app);
+  // UI
+  app.use(Vant);
+  app.use(i18n);
+  // windows 挂载
+  setup()
+    // 挂载路由
+  await setupRouter(app);
+  await router.isReady();
+
+  // setupPlugin(app)
+  // initCapacitor(app)
+
+  app.mount("#app", true);
+}
+
+
+appInit().then(() => {
+
+})

src/plugins/index.js

@@ -1,24 +1,17 @@
-import { createPinia } from 'pinia'
 
-import router from '@/router'
-import Vant from 'vant';
-
-import { setup as setupStorage } from './storage';
 
+import router from '@/router' 
 // 新增：Capacitor 相关导入
 import { App as CapApp } from '@capacitor/app'
 import { Browser } from '@capacitor/browser'
- 
-// 引入组件
-import "virtual:svg-icons-register";
-import SvgIcon from "@/components/Svg-icon/SvgIcon.vue";
+  
 // 推送服务
 import { pushNotificationService } from '@/services/PushNotificationService'
 
 
 
 // 新增：Capacitor 初始化逻辑
-const initCapacitor = (app) => {
+export const initCapacitor = async (app) => {
   // Android 返回按钮处理
   CapApp.addListener('backButton', ({ canGoBack }) => {
     if (router.currentRoute.value.path !== '/' && canGoBack) {
@@ -34,50 +27,36 @@ const initCapacitor = (app) => {
 }
 
 
-export function setupPlugin(app) {
-
-    // 注入组件
-  app.component("SvgIcon", SvgIcon);
+export async function setupPlugin(app) {
 
   // 在应用挂载前初始化推送通知监听器
   // 你可以在这里定义如何处理收到的通知和注册信息
-  // pushNotificationService.initialize(
-  //   (token) => {
-  //     // 成功获取到设备 token，将其发送到你的后端服务器
-  //     console.log('App: Device Token for push notifications:', token.value);
-  //     // TODO: 将 token 发送到你的服务器进行注册，这是后续后端发送推送的关键
-  //   },
-  //   (error) => {
-  //     // 处理注册错误
-  //     console.error('App: Push notification registration failed', error);
-  //     // TODO: 可以在 UI 中提示用户注册失败
-  //   },
-  //   (notification) => {
-  //     // 收到推送通知 (应用在前台或后台)
-  //     console.log('App: Push notification received in app:', notification);
-  //     // TODO: 根据通知内容更新 UI 或显示提示
-  //     alert(`收到消息: ${notification.title || ''} - ${notification.body || ''}`);
-  //   },
-  //   (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);
-  //     }
-  //   }
-  // );
-
-
-  // 插件
-  app.use(createPinia());
-  app.use(router);
-  app.use(Vant);
-  
-
-  setupStorage(); 
-  // 挂载前初始化
-  initCapacitor(app)
+  pushNotificationService.initialize(
+    (token) => {
+      // 成功获取到设备 token，将其发送到你的后端服务器
+      console.log('App: Device Token for push notifications:', token.value);
+      // TODO: 将 token 发送到你的服务器进行注册，这是后续后端发送推送的关键
+    },
+    (error) => {
+      // 处理注册错误
+      console.error('App: Push notification registration failed', error);
+      // TODO: 可以在 UI 中提示用户注册失败
+    },
+    (notification) => {
+      // 收到推送通知 (应用在前台或后台)
+      console.log('App: Push notification received in app:', notification);
+      // TODO: 根据通知内容更新 UI 或显示提示
+      alert(`收到消息: ${notification.title || ''} - ${notification.body || ''}`);
+    },
+    (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);
+      }
+    }
+  );
 }

src/plugins/storage.js

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

src/router/index.js

@@ -1,53 +1,27 @@
+import { pinia } from '@/stores'
 import { createRouter, createWebHistory } from 'vue-router'
-import { systemRoutes } from './whitelist'
- 
+import { useSystemStore } from '@/stores/modules/systemStore'
+import { systemRoutes } from './system'
+import { whitelistRoutes } from './whitelist'
+import { createRouterGuards } from './router.guards.js'
 
 
-const LAYOUT = () => import('@/layout/app/index.vue')
+const systemStore = useSystemStore(pinia)
+
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [ 
-    {
-      path: "/",
-      name: "main",
-      redirect: "me",
-      component: LAYOUT,
-      children: [
-        { 
-          path: "im",
-          name: "im",
-          meta: { title: "社交", keepAlive: false,  navbar: true },
-          component: () => import("@/views/home/index.vue"),
-        },
-        {
-          path: "transaction",
-          name: "transaction",
-          meta: { title: "交易", keepAlive: false,   navbar: true  },
-          component: () => import("@/views/transaction/index.vue"),
-        },
-        {
-          path: "wallet",
-          name: "wallet",
-          meta: { title: "钱包", keepAlive: false,   navbar: true  },
-          component: () => import("@/views/wallet/index.vue"),
-        },
-        {
-          path: "dapp",
-          name: "dapp",
-          meta: { title: "DAPP", keepAlive: false,   navbar: false },
-          component: () => import("@/views/dapp/index.vue"),
-        },
-        {
-          path: "me",
-          name: "me",
-          meta: { title: "我的", keepAlive: false,   navbar: false  },
-          component: () => import("@/views/me/index.vue"),
-        }
-      ],
-    },
-    ...systemRoutes
+    ...systemRoutes,
+    ...whitelistRoutes
   ],
 })
 
-export default router
+
+export async function setupRouter(app) { 
+  app.use(router)
+  // 创建路由守卫
+  createRouterGuards(router, systemStore)
+}
+
+export default router;

src/router/router.guards.js

@@ -0,0 +1,18 @@
+
+
+export function createRouterGuards(router, systemStore) {
+
+   router.beforeEach(async (to, from, next) => {
+
+     next()
+   })
+
+   router.afterEach((to, _, next) => {
+     
+   })
+
+   // 错误
+  router.onError(error => {
+    console.log(error, '路由错误')
+  })
+}

src/router/system.js

@@ -0,0 +1,42 @@
+const LAYOUT = () => import("@/layout/app/index.vue");
+
+export const systemRoutes = [
+  {
+    path: "/",
+    name: "main",
+    redirect: "login",
+    component: LAYOUT,
+    children: [
+      {
+        path: "im",
+        name: "im",
+        meta: { title: "社交", keepAlive: false, navbar: true },
+        component: () => import("@/views/home/index.vue"),
+      },
+      {
+        path: "transaction",
+        name: "transaction",
+        meta: { title: "交易", keepAlive: false, navbar: true },
+        component: () => import("@/views/transaction/index.vue"),
+      },
+      {
+        path: "wallet",
+        name: "wallet",
+        meta: { title: "钱包", keepAlive: false, navbar: true },
+        component: () => import("@/views/wallet/index.vue"),
+      },
+      {
+        path: "dapp",
+        name: "dapp",
+        meta: { title: "DAPP", keepAlive: false, navbar: false },
+        component: () => import("@/views/dapp/index.vue"),
+      },
+      {
+        path: "me",
+        name: "me",
+        meta: { title: "我的", keepAlive: false, navbar: false },
+        component: () => import("@/views/me/index.vue"),
+      },
+    ],
+  },
+];

src/router/whitelist.js

@@ -1,13 +1,10 @@
-
-
-const LOGIN = () => import("@/views/login/index.vue")
-
+ 
 // 白名单
-export const systemRoutes = [
+export const whitelistRoutes = [
   {
     path: "/login",
     name: "login",
-    component: LOGIN,
+    component: () => import("@/views/login/index.vue"),
     meta: {
       title: '登录'
     }

src/settings/designSetting.js

@@ -1,5 +1,5 @@
 // 默认语言
-export const lang = "zh-CN" 
+export const lang = "zh-HK" 
 
 // 主题配置
 export const theme = {

src/views/login/index.vue

@@ -1,3 +1,76 @@
 <template>
-  <div>login</div>
+  <div class="container">
+    <svg-icon name="login" class="login-icon-bg" />
+    <div class="login-box">
+      <span class="login-title-main">{{ $t("login.Wallet") }}</span>
+      <span class="login-title-hint">{{ $t("login.Support") }}ACC、BTC、ETH、TRX、BS</span>
+    </div>
+
+
+    <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>
+    </div>
+
+    <div class="bottom-body">
+      <van-radio-group v-model="checked"><van-radio name="1" icon-size="16"  style="margin-right: 6px;"  /></van-radio-group>
+      
+      <span> {{ $t("login.LoginTxt") }} Angel Toke</span>
+      <a class="a-link">{{ $t("login.PrivacyPolicy") }}</a>
+      <span>和</span>
+      <a class="a-link">{{ $t("login.UserAgreement") }}</a>
+    </div>
+  </div>
 </template>
+<script setup>  
+const checked = ref('')
+
+</script>
+
+<style scoped lang="less">
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .login-icon-bg {
+    width: 285px;
+    height: 305px;
+    margin-top: 110px;
+  }
+  .login-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .login-title-main {
+    font-weight: 600;
+    font-size: 25px;
+    margin: 0 0 9px 0;
+  }
+  .login-title-hint {
+    font-weight: 400;
+    font-size: 15px;
+    color: @font-color2;
+  }
+
+  .operation-body{
+    width: 312px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    margin-top: 90px;
+    .operation-button{
+      margin-top: 23px;
+    }
+  }
+  .bottom-body{
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    margin-top: 30px;
+  }
+  .a-link{
+    margin: 0 5px;
+  }
+}
+</style>

vite.config.js

@@ -7,6 +7,7 @@ import vueDevTools from "vite-plugin-vue-devtools";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 import { codeInspectorPlugin } from 'code-inspector-plugin';
+import AutoImport from 'unplugin-auto-import/vite'
 
 import { resolve } from "path";
 
@@ -18,6 +19,12 @@ export default defineConfig({
   plugins: [
     vue(), 
     vueJsx(),
+    AutoImport({
+      imports:[
+        'vue',
+        'vue-router'
+      ]
+    }),
     // vueDevTools(),
     createSvgIconsPlugin({
       // 指定需要缓存的图标文件夹