feat(lang): use translations

Author: hywax

Diff for: components/service/Ping.vue

@@ -1,14 +1,18 @@
 <template>
-  <ServiceBases v-bind="props">
+  <ServiceBase v-bind="props">
     <template #description>
-      Server responded in <span class="border-b border-dashed">{{ ping?.time || 0 }}ms</span>
+      <template v-if="ping?.time >= 0">
+        {{ $t('service.ping.description') }} <span class="border-b border-dashed">{{ ping.time }} {{ $t('service.ping.units') }}</span>
+      </template>
+      <template v-else>
+        {{ $t('service.ping.error') }}
+      </template>
     </template>
-  </ServiceBases>
+  </ServiceBase>
 </template>
 
 <script setup lang="ts">
 import type { PingService } from '~/types/services'
-import ServiceBases from '~/components/service/Base.vue'
 
 const props = defineProps<PingService>()
 

Diff for: pages/index.vue

@@ -6,13 +6,13 @@
       v-bind="group"
     />
   </template>
-  <Message v-else title="Services not found">
+  <Message v-else :title="$t('service.not-found.title')">
     <template #text>
       <p>
-        Oops! You did not specify a list of services in <span class="border-b border-dashed">config.yaml</span>
+        {{ $t('service.not-found.description') }}
       </p>
       <p class="mt-1">
-        <a href="#" class="text-sky-500 hover:text-sky-800">Go to documentation</a>
+        <a href="#" class="text-sky-500 hover:text-sky-800">{{ $t('service.not-found.action') }}</a>
       </p>
     </template>
   </Message>