Improve internationalization translations

Dockerfile

@@ -1,8 +1,8 @@
 # build stage
 FROM --platform=$BUILDPLATFORM node:lts-alpine AS build-stage
 # Set environment variables for non-interactive npm installs
-ENV NPM_CONFIG_LOGLEVEL warn
-ENV CI true
+ENV NPM_CONFIG_LOGLEVEL=warn
+ENV CI=true
 
 RUN apk add --update python3 make g++\
    && rm -rf /var/cache/apk/*
@@ -13,12 +13,12 @@ RUN npm install -g pnpm && pnpm i --ignore-scripts --frozen-lockfile
 COPY . .
 ARG BASE_URL
 ENV BASE_URL=${BASE_URL}
-ENV VITE_VERCEL_ENV production
+ENV VITE_VERCEL_ENV=production
 RUN pnpm build
 
 # production stage
 FROM nginxinc/nginx-unprivileged:stable-alpine AS production-stage
-ENV VITE_VERCEL_ENV production
+ENV VITE_VERCEL_ENV=production
 ARG BASE_URL
 ENV BASE_URL=${BASE_URL}
 COPY --from=build-stage /app/dist /usr/share/nginx/html

src/components/CollapsibleToolMenu.vue

@@ -2,11 +2,13 @@
 import { useStorage } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
 import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import MenuIconItem from './MenuIconItem.vue';
 import MenuItemWithTooltip from './MenuItemTooltip.vue';
 import type { Tool, ToolCategory } from '@/tools/tools.types';
 
+const { t } = useI18n();
 const props = withDefaults(defineProps<{ toolsByCategory?: ToolCategory[] }>(), { toolsByCategory: () => [] });
 const { toolsByCategory } = toRefs(props);
 const route = useRoute();
 
@@ -21,8 +23,8 @@
   {
     deep: true,
     serializer: {
-      read: v => (v ? JSON.parse(v) : null),
-      write: v => JSON.stringify(v),
+      read: (v) => (v ? JSON.parse(v) : null),
+      write: (v) => JSON.stringify(v),
     },
   },
 );
@@ -52,9 +54,7 @@
 }
 
 const areAllCollapsed = computed(() => {
-  return toolsByCategory.value.every(({ name }) =>
-    collapsedCategories.value[name] !== false,
-  );
+  return toolsByCategory.value.every(({ name }) => collapsedCategories.value[name] !== false);
 });
 
 async function toggleAllCategories() {
@@ -82,12 +82,12 @@
   const baseDuration = 250;
   const durationIncrement = 5;
 
-  return baseDuration + (Math.min(itemCount, 30) * durationIncrement);
+  return baseDuration + Math.min(itemCount, 30) * durationIncrement;
 }
 
 // Function to check if any tool in the category is active
 function isCategoryActive(components: Tool[]): boolean {
-  return components.some(tool => tool.path === route.path);
+  return components.some((tool) => tool.path === route.path);
 }
 
 const menuOptions = computed(() =>
@@ -96,7 +96,7 @@
     isCollapsed: collapsedCategories.value[name],
     isActive: isCategoryActive(components),
     animationDuration: getAnimationDuration(components.length),
-    tools: components.map(tool => ({
+    tools: components.map((tool) => ({
       label: makeLabel(tool),
       icon: makeIcon(tool),
       key: tool.path,
@@ -105,16 +105,14 @@
 );
 
 async function scrollToActiveItem() {
-  const activeCategory = toolsByCategory.value.find(({ components }) =>
-    isCategoryActive(components),
-  );
+  const activeCategory = toolsByCategory.value.find(({ components }) => isCategoryActive(components));
 
   if (activeCategory) {
     // Expand the active category
     collapsedCategories.value[activeCategory.name] = false;
 
     // Wait for the entire animation to complete
-    await new Promise(resolve => setTimeout(resolve, getAnimationDuration(activeCategory.components.length) + 50));
+    await new Promise((resolve) => setTimeout(resolve, getAnimationDuration(activeCategory.components.length) + 50));
 
     // Scroll to the active menu item
     const menuContainer = menuContainerRefs.value[activeCategory.name];
@@ -131,9 +129,12 @@
   scrollToActiveItem();
 });
 
-watch(() => route.path, () => {
-  scrollToActiveItem();
-});
+watch(
+  () => route.path,
+  () => {
+    scrollToActiveItem();
+  },
+);
 
 const themeVars = useThemeVars();
 </script>
@@ -142,22 +143,36 @@
   <div class="top-controls" mb-12px ml-12px>
     <c-button :disabled="isToggling" @click="toggleAllCategories">
       <span v-if="isToggling">
-        {{ areAllCollapsed ? 'Expanding...' : 'Collapsing...' }}
+        {{ areAllCollapsed ? t('home.expanding') : t('home.collapsing') }}
       </span>
       <span v-else>
-        {{ areAllCollapsed ? 'Expand All Tools' : 'Collapse All Tools' }}
+        {{ areAllCollapsed ? t('home.expandAllTools') : t('home.collapseAllTools') }}
       </span>
     </c-button>
   </div>
 
-  <div v-for="{ name, tools, isCollapsed, isActive, animationDuration } of menuOptions" :key="name" class="category-container">
+  <div
+    v-for="{ name, tools, isCollapsed, isActive, animationDuration } of menuOptions"
+    :key="name"
+    class="category-container"
+  >
     <button
       class="category-button"
       :class="{ 'category-active': isActive }"
-      flex cursor-pointer items-center op-60
+      flex
+      cursor-pointer
+      items-center
+      op-60
       @click="toggleCategoryCollapse({ name })"
     >
-      <span :class="{ 'rotate-0': isCollapsed, 'rotate-90': !isCollapsed }" text-16px lh-1 op-50 transition-transform duration-200>
+      <span
+        :class="{ 'rotate-0': isCollapsed, 'rotate-90': !isCollapsed }"
+        text-16px
+        lh-1
+        op-50
+        transition-transform
+        duration-200
+      >
         <icon-mdi-chevron-right />
       </span>
 
@@ -167,7 +182,11 @@
     </button>
 
     <div
-      :ref="el => { if (el) menuContainerRefs[name] = el as HTMLElement }"
+      :ref="
+        (el) => {
+          if (el) menuContainerRefs[name] = el as HTMLElement;
+        }
+      "
       class="menu-container"
       :class="{ collapsed: isCollapsed }"
       :style="{ '--animation-duration': `${animationDuration}ms` }"
@@ -215,11 +234,11 @@
   }
 }
 .category-container {
-.menu-container {
-  display: grid;
-  grid-template-rows: 1fr;
-  transition: grid-template-rows var(--animation-duration, 250ms) ease-out;
-  will-change: grid-template-rows;
+  .menu-container {
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows var(--animation-duration, 250ms) ease-out;
+    will-change: grid-template-rows;
 
     &.collapsed {
       grid-template-rows: 0fr;

src/plugins/i18n.plugin.ts

@@ -3,7 +3,7 @@ import { get } from '@vueuse/core';
 import type { Plugin } from 'vue';
 import { createI18n } from 'vue-i18n';
 
-const DEFAULT_LOCALE = String(import.meta.env.VITE_LANGUAGE || 'en');
+const DEFAULT_LOCALE = String(import.meta.env.VITE_LANGUAGE || 'zh');
 
 const i18n = createI18n({
   legacy: false,

src/tools/date-time-converter/date-time-converter.vue

@@ -218,7 +218,7 @@ function formatDateInTimezone(date: Date | undefined, timezone: string): string
   }
 
   return withDefaultOnError(() => {
-    return formatInTimeZone(date, timezone, 'yyyy-MM-dd\'T\'HH:mm:ssXXX');
+    return formatInTimeZone(date, timezone, 'yyyy-MM-dd HH:mm:ss XXX');
   }, '');
 }
 </script>

src/tools/docker-pangolin-labels/docker-pangolin-labels.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import yaml from 'yaml';
-import { blueprintToLabels, extractPangolinLabelsFromCompose, pangolinLabelsToBlueprint } from './docker-pangolin-labels.service';
+import { useI18n } from 'vue-i18n';
+import {
+  blueprintToLabels,
+  extractPangolinLabelsFromCompose,
+  pangolinLabelsToBlueprint,
+} from './docker-pangolin-labels.service';
+
+const { t } = useI18n();
 
 const composeInput = ref('');
 const blueprintOutput = ref('');
@@ -18,15 +25,14 @@
   try {
     const compose = yaml.parse(composeInput.value) as any;
     if (!compose?.services) {
-      throw new Error('Invalid docker-compose.yml');
+      throw new Error(t('tools.docker-pangolin-labels.texts.error-invalid-compose'));
     }
 
     const labels = extractPangolinLabelsFromCompose(compose);
     const blueprint = pangolinLabelsToBlueprint(labels);
 
     blueprintOutput.value = yaml.stringify(blueprint);
-  }
-  catch (err: any) {
+  } catch (err: any) {
     error.value = err.toString();
   }
 }
@@ -41,14 +47,13 @@
   try {
     const blueprint = yaml.parse(blueprintInput.value) as any;
     if (!blueprint || typeof blueprint !== 'object') {
-      throw new Error('Invalid blueprint YAML');
+      throw new Error(t('tools.docker-pangolin-labels.texts.error-invalid-blueprint'));
     }
 
     const labels = blueprintToLabels(blueprint, labelsAsArray.value ? 'array' : 'object');
 
     labelsOutput.value = yaml.stringify(labels);
-  }
-  catch (err: any) {
+  } catch (err: any) {
     error.value = err?.message ?? String(err);
   }
 }
@@ -58,19 +63,19 @@
   <div>
     <n-tabs type="segment">
       <!-- COMPOSE → BLUEPRINT -->
-      <n-tab-pane name="compose-to-blueprint" tab="Compose → Blueprint">
+      <n-tab-pane name="compose-to-blueprint" :tab="t('tools.docker-pangolin-labels.texts.tab-compose-to-blueprint')">
         <c-input-text
           v-model:value="composeInput"
-          label="Docker Compose YAML:"
+          :label="t('tools.docker-pangolin-labels.texts.label-docker-compose-yaml')"
           multiline
           rows="10"
-          placeholder="Paste full docker-compose.yml here…"
+          :placeholder="t('tools.docker-pangolin-labels.texts.placeholder-docker-compose-yaml')"
           mb-2
         />
 
         <n-space justify="center" mb-2>
           <n-button type="primary" @click="convertComposeToBlueprint">
-            Extract Pangolin Blueprint
+            {{ t('tools.docker-pangolin-labels.texts.button-extract-blueprint') }}
           </n-button>
         </n-space>
 
@@ -81,48 +86,48 @@
         <textarea-copyable
           v-if="blueprintOutput"
           v-model:value="blueprintOutput"
-          label="Generated Blueprint:"
+          :label="t('tools.docker-pangolin-labels.texts.label-generated-blueprint')"
           language="yaml"
           readonly
-          placeholder="Blueprint YAML will appear here…"
+          :placeholder="t('tools.docker-pangolin-labels.texts.placeholder-generated-blueprint')"
         />
       </n-tab-pane>
 
       <!-- BLUEPRINT → LABELS -->
-      <n-tab-pane name="blueprint-to-labels" tab="Blueprint → Labels">
+      <n-tab-pane name="blueprint-to-labels" :tab="t('tools.docker-pangolin-labels.texts.tab-blueprint-to-labels')">
         <c-input-text
           v-model:value="blueprintInput"
-          label="Blueprint YAML:"
+          :label="t('tools.docker-pangolin-labels.texts.label-blueprint-yaml')"
           multiline
           rows="5"
-          placeholder="Paste Pangolin blueprint YAML here…"
+          :placeholder="t('tools.docker-pangolin-labels.texts.placeholder-blueprint-yaml')"
           mb-2
         />
 
         <n-space justify="center" mb-2>
           <n-switch v-model:value="labelsAsArray">
             <template #checked>
-              Array (- key=value)
+              {{ t('tools.docker-pangolin-labels.texts.switch-array-format') }}
             </template>
             <template #unchecked>
-              Object (key: value)
+              {{ t('tools.docker-pangolin-labels.texts.switch-object-format') }}
             </template>
           </n-switch>
         </n-space>
 
         <n-space justify="center" mb-2>
           <n-button type="primary" @click="convertBlueprintToLabels">
-            Convert to Docker Labels
+            {{ t('tools.docker-pangolin-labels.texts.button-convert-to-labels') }}
           </n-button>
         </n-space>
 
         <textarea-copyable
           v-if="labelsOutput"
           v-model:value="labelsOutput"
-          label="Generated Docker labels:"
+          :label="t('tools.docker-pangolin-labels.texts.label-generated-docker-labels')"
           rows="16"
           language="yaml"
-          placeholder="Docker labels will appear here..."
+          :placeholder="t('tools.docker-pangolin-labels.texts.placeholder-generated-docker-labels')"
         />
       </n-tab-pane>
     </n-tabs>