fix: 更新素材信息，补充翻译，补充语言切换

apps/web-velofex/src/layouts/header/header.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+
 import { SvgArrowRightIcon } from '@vben/icons';
 
 import useAvatar from '@/assets/image/user.png';
+import { $t } from '@/locales';
 
 import Logo from '#/assets/image/logo.png';
 import { useLoginModalStore } from '#/store';
@@ -11,13 +14,13 @@ import Avatar from './avatar.vue';
 
 const loginModalStore = useLoginModalStore();
 
-const menus = [
-  { title: 'Tool Downloads', path: '/' },
-  { title: 'AI-generated Apps', path: '/' },
-  { title: 'AI Assistants', path: '/' },
-  { title: 'Shalu Academy', path: '/' },
-  { title: 'Application Market', path: '/' },
-];
+const menus = computed(() => [
+  { title: $t('homeMenu.toolDownloads'), path: '/' },
+  { title: $t('homeMenu.aIGeneratedApps'), path: '/' },
+  { title: $t('homeMenu.aIAssistants'), path: '/' },
+  { title: $t('homeMenu.shaluAcademy'), path: '/' },
+  { title: $t('homeMenu.applicationMarket'), path: '/' },
+]);
 
 function openLogin() {
   loginModalStore.open();

apps/web-velofex/src/layouts/select-lang.vue

@@ -1,35 +1,17 @@
-<template>
-  <Dropdown :menu="{ items }" placement="bottom" @open-change="onOpenChange" @menu-click="onMenuClick">
-    <div class="flex items-center gap-2 cursor-pointer">
-      <img
-        src="@/assets/image/earth_18301626@2x.png"
-        width="20px"
-        height="20px"
-        alt="earth"
-      />
-      <span>Eng</span>
-      <img
-        :class="show ? 'rotate-180' : ''"
-        src="@/assets/image/Polygon 2.png"
-        width="7px"
-        height="6px"
-        alt="polygon"
-      />
-    </div>
-  </Dropdown>
-</template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
+
+import { loadLocaleMessages } from '@vben/locales';
+
 import { Dropdown } from 'antdv-next';
 
 const items = [
   {
-    key: '1',
+    key: 'en-US',
     label: 'English',
   },
   {
-    key: '2',
+    key: 'zh-CN',
     label: '中文',
   },
 ];
@@ -38,11 +20,37 @@ const show = ref(false);
 
 const onOpenChange = (open: boolean) => {
   show.value = open;
-}
+};
 
 const onMenuClick = (info: any) => {
-  console.log('click', info);
-}
+  loadLocaleMessages(info.key);
+};
 </script>
 
+<template>
+  <Dropdown
+    :menu="{ items }"
+    placement="bottom"
+    @menu-click="onMenuClick"
+    @open-change="onOpenChange"
+  >
+    <div class="flex cursor-pointer items-center gap-2">
+      <img
+        alt="earth"
+        height="20px"
+        src="@/assets/image/earth_18301626@2x.png"
+        width="20px"
+      />
+      <span>Language</span>
+      <img
+        :class="show ? 'rotate-180' : ''"
+        alt="polygon"
+        height="6px"
+        src="@/assets/image/Polygon 2.png"
+        width="7px"
+      />
+    </div>
+  </Dropdown>
+</template>
+
 <style scoped></style>

apps/web-velofex/src/locales/index.ts

@@ -1,5 +1,6 @@
 import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
-import type { ConfigProviderProps } from 'antdv-next'
+import type { ConfigProviderProps } from 'antdv-next';
+
 import type { App } from 'vue';
 import { ref } from 'vue';
 
@@ -14,7 +15,7 @@ import antdEnLocale from 'antdv-next/locale/en_US';
 import antdDefaultLocale from 'antdv-next/locale/zh_CN';
 import dayjs from 'dayjs';
 
-type Locale = ConfigProviderProps['locale']
+type Locale = ConfigProviderProps['locale'];
 
 const antdLocale = ref<Locale>(antdDefaultLocale);
 
@@ -34,6 +35,9 @@ async function loadMessages(lang: SupportedLanguagesType) {
     localesMap[lang]?.(),
     loadThirdPartyMessage(lang),
   ]);
+  if (appLocaleMessages?.default?.page) {
+    return appLocaleMessages.default.page;
+  }
   return appLocaleMessages?.default;
 }
 

apps/web-velofex/src/router/routes/external/router-a.ts

@@ -9,7 +9,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       icon: 'lucide:layout-dashboard',
       order: -1,
-      title: $t('page.dashboard.title')
+      title: $t('dashboard.title'),
     },
     name: 'Dashboard',
     path: '/',
@@ -20,11 +20,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('#/views/dashboard/home/index.vue'),
         meta: {
           icon: 'carbon:workspace',
-          title: $t('page.dashboard.home')
+          title: $t('dashboard.home'),
         },
       },
     ],
-  }
+  },
 ];
 
 export default routes;

apps/web-velofex/src/views/dashboard/home/application-management.vue

@@ -1,10 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { $t } from '@/locales';
+</script>
 
 <template>
-  <div class="info-card border-box h-[217px] w-full rounded-lg p-5">
+  <div class="info-card border-box h-[217px] w-full rounded-lg p-5 shadow-md">
     <div class="items-flex-start flex justify-between">
       <div>
-        <h2 class="text-lg font-bold">Application Management</h2>
+        <h2 class="text-lg font-bold">
+          {{ $t('homeModule.applicationManagement') }}
+        </h2>
         <div class="text-xs text-[#9A9BA3]">Application Management</div>
       </div>
       <img
@@ -14,23 +18,17 @@
       />
     </div>
     <p class="mt-4 w-[714px] text-sm text-xs leading-relaxed text-[#9A9BA3]">
-      Mauris hendrerit sagittis ligula, in cursus augue. Aliquam a tempor lacus.
-      Maecenas rutrum magna vitae lacus dignissim hendrerit lacinia ac neque.
-      Proin eros Leo, fermentum in justo non, semper interdum nisl. Cras metus
-      erat, lobortis at dignissim quis, finibus non neque. Mauris mattis, ex ac
-      placerat accumsan, lorem sem suscipit arcu, eget hendrerit est metus nec
-      nulla. Nulla erat ligula, aliquet eu ullamcorper non, auctor eget risus.
-      Curabitur mollis nisl vitae laoreet cursus. Sed a ipsum eget erat ornare
-      dapibus. Class aptent taciti sociosqu ad litora torquent per conubia
-      nostra, per inceptos himenaeos.
+      {{ $t('homeModule.applicationManagementIntroduction') }}
     </p>
   </div>
 </template>
 
 <style scoped>
 .info-card {
+  overflow: hidden;
   background: url('@/assets/image/ApplicationManagement.png') no-repeat center
     center;
   background-size: cover;
+  border-radius: 26px;
 }
 </style>

apps/web-velofex/src/views/dashboard/home/delivery-partners.vue

@@ -1,10 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { $t } from '@/locales';
+</script>
 
 <template>
-  <div class="info-card border-box h-[217px] w-full rounded-lg p-5">
+  <div class="info-card border-box h-[217px] w-full rounded-lg p-5 shadow-md">
     <div class="items-flex-start flex justify-between">
       <div>
-        <h2 class="text-lg font-bold">Delivery Partners</h2>
+        <h2 class="text-lg font-bold">
+          {{ $t('homeModule.deliveryPartners') }}
+        </h2>
         <div class="text-xs text-[#9A9BA3]">Delivery Partners</div>
       </div>
       <img
@@ -14,16 +18,16 @@
       />
     </div>
     <p class="mt-4 w-[174px] text-sm text-xs leading-relaxed text-[#9A9BA3]">
-      nteger consequat purus non eros aliquet, nec pulvinar dui venenatis.
-      Quisque eget varius est, semper varius turpis. Nam vitae justo sed lorem
-      cursus .
+      {{ $t('homeModule.deliveryPartnersIntroduction') }}
     </p>
   </div>
 </template>
 
 <style scoped>
 .info-card {
+  overflow: hidden;
   background: url('@/assets/image/DeliveryPartners.png') no-repeat center center;
   background-size: cover;
+  border-radius: 27px;
 }
 </style>

apps/web-velofex/src/views/dashboard/home/enterprise-customers.vue

@@ -1,10 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { $t } from '@/locales';
+</script>
 
 <template>
-  <div class="info-card border-box h-[217px] w-full rounded-lg p-5">
+  <div class="info-card border-box h-[217px] w-full rounded-lg p-5 shadow-md">
     <div class="items-flex-start flex justify-between">
       <div>
-        <h2 class="text-lg font-bold">Enterprise Customers</h2>
+        <h2 class="text-lg font-bold">
+          {{ $t('homeModule.enterpriseCustomers') }}
+        </h2>
         <div class="text-xs text-[#9A9BA3]">Enterprise Customers</div>
       </div>
       <img
@@ -14,16 +18,16 @@
       />
     </div>
     <p class="mt-4 w-[249px] text-sm text-xs leading-relaxed text-[#9A9BA3]">
-      Curabitur mollis nisl vitae laoreet cursus. Sed a ipsum eget erat ornare
-      dapibus. Class aptent taciti sociosqu ad litora torquent per conubia
-      nostra, per inceptos himenaeos.
+      {{ $t('homeModule.enterpriseCustomersIntroduction') }}
     </p>
   </div>
 </template>
 
 <style scoped>
 .info-card {
+  overflow: hidden;
   background: url('@/assets/image/Group 220307@2x.png') no-repeat center center;
   background-size: cover;
+  border-radius: 26px;
 }
 </style>

apps/web-velofex/src/views/dashboard/home/product-list.vue

@@ -4,6 +4,7 @@ import { ref } from 'vue';
 import Lianxin from '@/assets/image/lianxin.png';
 import Shijie from '@/assets/image/shijie.png';
 import Tengxun from '@/assets/image/shiping.png';
+import { $t } from '@/locales';
 
 interface Product {
   id: number;
@@ -32,7 +33,9 @@ const products = ref<Product[]>([
 
 <template>
   <div>
-    <h2 class="ml-[21px] mt-[21px] text-[18px] font-bold">Product List</h2>
+    <h2 class="ml-[21px] mt-[21px] text-[18px] font-bold">
+      {{ $t('homeModule.productList') }}
+    </h2>
     <div class="flex flex-wrap gap-[18px]">
       <div
         v-for="product in products"

apps/web-velofex/src/views/dashboard/home/sales-partners.vue

@@ -1,10 +1,12 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { $t } from '@/locales';
+</script>
 
 <template>
-  <div class="info-card border-box h-[217px] w-full rounded-lg p-5">
+  <div class="info-card border-box h-[217px] w-full rounded-lg p-5 shadow-md">
     <div class="items-flex-start flex justify-between">
       <div>
-        <h2 class="text-lg font-bold">Sales Partners</h2>
+        <h2 class="text-lg font-bold">{{ $t('homeModule.salesPartners') }}</h2>
         <div class="text-xs text-[#9A9BA3]">Sales Partners</div>
       </div>
       <img
@@ -14,16 +16,16 @@
       />
     </div>
     <p class="mt-4 w-[249px] text-sm text-xs leading-relaxed text-[#9A9BA3]">
-      Orci varius natoque penatibus et magnis dis parturient montes, nascetur
-      ridiculus mus. Nullam et velit a erat euismod interdum sed non dolor.
-      Fusce finibus nibh turpis, vel tristique lectus sagittis sit amet.
+      {{ $t('homeModule.salesPartnersIntroduction') }}
     </p>
   </div>
 </template>
 
 <style scoped>
 .info-card {
+  overflow: hidden;
   background: url('@/assets/image/Group 220355@2x.png') no-repeat center center;
   background-size: cover;
+  border-radius: 26px;
 }
 </style>

apps/web-velofex/src/views/dashboard/home/user-info.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { $t } from '@/locales';
+
 import { useLoginModalStore } from '#/store';
 
 const loginModalStore = useLoginModalStore();
@@ -9,23 +11,24 @@ function openLogin() {
 </script>
 
 <template>
-  <div class="h-[217px] rounded-[30px] bg-white px-[18px] py-[20px]">
+  <div class="h-[217px] rounded-[30px] bg-white px-[18px] py-[20px] shadow-md">
     <img
       alt="user"
       class="h-[52px] w-[52px] object-cover"
       src="@/assets/image/user.png"
     />
     <div>
-      <h2 class="mt-[5px] text-[15px] font-bold">Enterprise Customers</h2>
+      <h2 class="mb-[5px] mt-[10px] text-[15px] font-bold">
+        {{ $t('homeModule.helloWelcome') }}
+      </h2>
       <p class="w-[249px] text-sm text-xs leading-relaxed">
-        Nulputate nisi vestibulum nisl laoreet, in finibus nisl euismod. Nullam
-        venenatis eu lacus auctor accumsan. Class aptent tacit.
+        {{ $t('homeModule.helloWelcomeIntroduction') }}
       </p>
       <div
         class="m-auto mt-[12px] flex h-[32px] w-[185px] cursor-pointer items-center justify-center rounded-[25px] bg-gradient-to-b from-[#8B0046] to-[#460023] text-[10px] text-white"
         @click="openLogin"
       >
-        Login
+        {{ $t('auth.login') }}
         <img
           alt=""
           class="ml-[6px] h-[11.05px] w-[10.51px]"