i18n: 翻译登录页文案

Author: overtrue

components/auth/heros/ripple.vue

@@ -3,15 +3,16 @@
     <div class="max-w-7xl flex flex-col z-10">
       <img src="~/assets/logo.svg" class="max-w-28" alt="" />
       <div class="text-4xl my-6 font-semibold !text-primary px-0">
-        <span>基于 Rust 的</span>
-        <FlipWords :words="['高性能', '无限扩容', '安全可靠', '多云存储', '兼容 S3']" :duration="3000" class="text-4xl font-semibold !text-primary px-0" />
+        <span :class="{ 'pr-1': locale !== 'zh' }">{{ t('Rust-based') }} </span>
+        <FlipWords :words="[t('High Performance'), t('Infinite Scaling'), t('Secure & Reliable'), t('Multi-Cloud Storage'), t('S3 Compatible')]" :duration="3000"
+          class="text-4xl font-semibold !text-primary px-0" />
         <div class="text-muted-foreground mt-2">
-          靠谱的分布式文件系统
+          {{ t('Reliable distributed file system') }}
         </div>
       </div>
     </div>
-    <a href="https://www.rustfs.com" class="z-10 text-primary-500 inline-flex w-min items-center gap-2 leading-none p-2 px-5 border rounded-full border-blue-500">
-      <span>www.rustfs.com</span>
+    <a href="https://www.rustfs.com" class="z-10 text-primary-500 inline-flex w-max items-center gap-2 leading-none p-2 px-5 border rounded-full border-blue-500">
+      <span>{{ t('Visit website') }}</span>
       <Icon name="ri:arrow-right-long-fill" class="mr-2" />
     </a>
     <div class="h-full inset-0 absolute z-0">
@@ -22,8 +23,9 @@
 </template>
 
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
 import FlipWords from '~/components/ui/flip-words/FlipWords.vue'
 import Ripple from '~/components/ui/ripple/Ripple.vue'
 
-const mode = useColorMode();
+const { t, locale } = useI18n()
 </script>

components/auth/heros/wordmap.vue

@@ -3,25 +3,29 @@
     <div class="max-w-7xl flex flex-col">
       <img src="~/assets/logo.svg" class="max-w-28" alt="" />
       <div class="text-4xl my-6 font-semibold !text-primary px-0">
-        <span>基于 Rust 的</span>
-        <FlipWords :words="['高性能', '无限扩容', '安全可靠', '多云存储', '兼容 S3']" :duration="3000" class="text-4xl font-semibold !text-primary px-0" />
+        <span :class="{ 'pr-1': locale !== 'zh' }">{{ t('Rust-based') }} </span>
+        <FlipWords :words="[t('High Performance'), t('Infinite Scaling'), t('Secure & Reliable'), t('Multi-Cloud Storage'), t('S3 Compatible')]" :duration="3000"
+          class="text-4xl font-semibold !text-primary px-0" />
         <div class="text-muted-foreground mt-2">
-          靠谱的分布式文件系统
+          {{ t('Reliable distributed file system') }}
         </div>
       </div>
     </div>
     <WorldMap class="absolute inset-0" :dots="dots" :map-color="isDark ? '#FFFFFF40' : '#00000040'" :map-bg-color="isDark ? 'black' : '#f9fafb'" />
     <a href=" https://www.rustfs.com" class="text-primary-500 inline-flex w-min items-center gap-2 leading-none p-2 px-5 border rounded-full border-blue-500">
-      <span>www.rustfs.com</span>
+      <span>{{ t('Visit website') }}</span>
       <Icon name="ri:arrow-right-long-fill" class="mr-2" />
     </a>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
 import FlipWords from "~/components/ui/flip-words/FlipWords.vue"
 import WorldMap from "~/components/ui/world-map/WorldMap.vue"
 
+const { t, locale } = useI18n()
+
 const dots = [
   {
     start: {

i18n/locales/en-US.json

@@ -267,5 +267,13 @@
   "Remote Site": "Remote Site",
   "Endpoint Required": "Endpoint Required",
   "Access Key Required": "Access Key Required",
-  "Secret Key Required": "Secret Key Required"
+  "Secret Key Required": "Secret Key Required",
+  "Rust-based": "Rust-based",
+  "High Performance": "High Performance",
+  "Infinite Scaling": "Infinite Scaling",
+  "Secure & Reliable": "Secure & Reliable",
+  "Multi-Cloud Storage": "Multi-Cloud Storage",
+  "S3 Compatible": "S3 Compatible",
+  "Reliable distributed file system": "Reliable distributed file system",
+  "Visit website": "Visit website"
 }

i18n/locales/zh-CN.json

@@ -456,5 +456,13 @@
   "Description": "描述",
   "Are you sure you want to delete all selected keys?": "您确定要删除所有选中的密钥吗？",
   "Please select at least one item": "请至少选择一项",
-  "Get Data Failed": "获取数据失败"
+  "Get Data Failed": "获取数据失败",
+  "Rust-based": "基于 Rust 的",
+  "High Performance": "高性能",
+  "Infinite Scaling": "无限扩容",
+  "Secure & Reliable": "安全可靠",
+  "Multi-Cloud Storage": "多云存储",
+  "S3 Compatible": "兼容 S3",
+  "Reliable distributed file system": "靠谱的分布式文件系统",
+  "Visit website": "访问官网"
 }