From 70515d32a516685dafc90cf2a2761b137bd82036 Mon Sep 17 00:00:00 2001
From: Amery2010 <amery@xiangfa.org>
Date: Wed, 20 Dec 2023 23:04:58 +0800
Subject: [PATCH 1/8] WIP(translate): translate token-generator, hash-text,
 bcrypt and uuid-generator tools

---
 src/tools/bcrypt/bcrypt.vue                 | 39 +++++++++++++--------
 src/tools/bcrypt/index.ts                   |  6 ++--
 src/tools/bcrypt/locales/en.yml             | 22 ++++++++++++
 src/tools/bcrypt/locales/zh.yml             | 22 ++++++++++++
 src/tools/hash-text/hash-text.vue           | 22 ++++++++----
 src/tools/hash-text/index.ts                |  6 ++--
 src/tools/hash-text/locales/en.yml          | 12 +++++++
 src/tools/hash-text/locales/zh.yml          | 12 +++++++
 src/tools/token-generator/index.ts          | 15 ++++++--
 src/tools/token-generator/locales/en.yml    |  2 +-
 src/tools/token-generator/locales/zh.yml    | 15 ++++++++
 src/tools/uuid-generator/index.ts           |  6 ++--
 src/tools/uuid-generator/locales/en.yml     | 18 ++++++++++
 src/tools/uuid-generator/locales/zh.yml     | 18 ++++++++++
 src/tools/uuid-generator/uuid-generator.vue | 25 ++++++-------
 15 files changed, 196 insertions(+), 44 deletions(-)
 create mode 100644 src/tools/bcrypt/locales/en.yml
 create mode 100644 src/tools/bcrypt/locales/zh.yml
 create mode 100644 src/tools/hash-text/locales/en.yml
 create mode 100644 src/tools/hash-text/locales/zh.yml
 create mode 100644 src/tools/token-generator/locales/zh.yml
 create mode 100644 src/tools/uuid-generator/locales/en.yml
 create mode 100644 src/tools/uuid-generator/locales/zh.yml

diff --git a/src/tools/bcrypt/bcrypt.vue b/src/tools/bcrypt/bcrypt.vue
index c28c20bf..cf6045a8 100644
--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@@ -4,11 +4,12 @@ import { useThemeVars } from 'naive-ui';
 import { useCopy } from '@/composable/copy';
 
 const themeVars = useThemeVars();
+const { t } = useI18n();
 
 const input = ref('');
 const saltCount = ref(10);
 const hashed = computed(() => hashSync(input.value, saltCount.value));
-const { copy } = useCopy({ source: hashed, text: 'Hashed string copied to the clipboard' });
+const { copy } = useCopy({ source: hashed, text: t('tools.bcrypt.copied') });
 
 const compareString = ref('');
 const compareHash = ref('');
@@ -16,41 +17,51 @@ const compareMatch = computed(() => compareSync(compareString.value, compareHash
 </script>
 
 <template>
-  <c-card title="Hash">
+  <c-card :title="t('tools.bcrypt.hash.title')">
     <c-input-text
       v-model:value="input"
-      placeholder="Your string to bcrypt..."
+      :placeholder="t('tools.bcrypt.hash.placeholder')"
       raw-text
-      label="Your string: "
+      :label="t('tools.bcrypt.hash.label')"
       label-position="left"
       label-align="right"
       label-width="120px"
       mb-2
     />
-    <n-form-item label="Salt count: " label-placement="left" label-width="120">
-      <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" w-full />
+    <n-form-item :label="t('tools.bcrypt.hash.saltCount')" label-placement="left" label-width="120">
+      <n-input-number
+        v-model:value="saltCount"
+        :placeholder="t('tools.bcrypt.hash.saltCountPlaceholder')"
+        :max="10"
+        :min="0"
+        w-full
+      />
     </n-form-item>
 
     <c-input-text :value="hashed" readonly text-center />
 
     <div mt-5 flex justify-center>
       <c-button @click="copy()">
-        Copy hash
+        {{ t('tools.bcrypt.hash.copy') }}
       </c-button>
     </div>
   </c-card>
 
-  <c-card title="Compare string with hash">
+  <c-card :title="t('tools.bcrypt.compare.title')">
     <n-form label-width="120">
-      <n-form-item label="Your string: " label-placement="left">
-        <c-input-text v-model:value="compareString" placeholder="Your string to compare..." raw-text />
+      <n-form-item :label="t('tools.bcrypt.compare.stringLabel')" label-placement="left">
+        <c-input-text
+          v-model:value="compareString"
+          :placeholder="t('tools.bcrypt.compare.stringPlaceholder')"
+          raw-text
+        />
       </n-form-item>
-      <n-form-item label="Your hash: " label-placement="left">
-        <c-input-text v-model:value="compareHash" placeholder="Your hash to compare..." raw-text />
+      <n-form-item :label="t('tools.bcrypt.compare.hashLabel')" label-placement="left">
+        <c-input-text v-model:value="compareHash" :placeholder="t('tools.bcrypt.compare.hashPlaceholder')" raw-text />
       </n-form-item>
-      <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
+      <n-form-item :label="t('tools.bcrypt.compare.match')" label-placement="left" :show-feedback="false">
         <div class="compare-result" :class="{ positive: compareMatch }">
-          {{ compareMatch ? 'Yes' : 'No' }}
+          {{ compareMatch ? t('tools.bcrypt.compare.yes') : t('tools.bcrypt.compare.no') }}
         </div>
       </n-form-item>
     </n-form>
diff --git a/src/tools/bcrypt/index.ts b/src/tools/bcrypt/index.ts
index f70a3a60..9c80c694 100644
--- a/src/tools/bcrypt/index.ts
+++ b/src/tools/bcrypt/index.ts
@@ -1,11 +1,11 @@
 import { LockSquare } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Bcrypt',
+  name: translate('tools.bcrypt.title'),
   path: '/bcrypt',
-  description:
-    'Hash and compare text string using bcrypt. Bcrypt is a password-hashing function based on the Blowfish cipher.',
+  description: translate('tools.bcrypt.description'),
   keywords: ['bcrypt', 'hash', 'compare', 'password', 'salt', 'round', 'storage', 'crypto'],
   component: () => import('./bcrypt.vue'),
   icon: LockSquare,
diff --git a/src/tools/bcrypt/locales/en.yml b/src/tools/bcrypt/locales/en.yml
new file mode 100644
index 00000000..9457bd84
--- /dev/null
+++ b/src/tools/bcrypt/locales/en.yml
@@ -0,0 +1,22 @@
+tools:
+  bcrypt:
+    title: Bcrypt
+    description: Hash and compare text string using bcrypt. Bcrypt is a password-hashing function based on the Blowfish cipher.
+
+    copied: Hashed string copied to the clipboard
+    hash:
+      title: Hash
+      placeholder: Your string to bcrypt...
+      label: 'Your string: '
+      saltCount: 'Salt count: '
+      saltCountPlaceholder: Salt rounds...
+      copy: Copy hash
+    compare:
+      title: Compare string with hash
+      stringLabel: 'Your string: '
+      stringPlaceholder: Your string to compare...
+      hashLabel: 'Your hash: '
+      hashPlaceholder: Your hash to compare...
+      match: Do they match ?
+      yes: Yes
+      no: No
diff --git a/src/tools/bcrypt/locales/zh.yml b/src/tools/bcrypt/locales/zh.yml
new file mode 100644
index 00000000..423ab2b4
--- /dev/null
+++ b/src/tools/bcrypt/locales/zh.yml
@@ -0,0 +1,22 @@
+tools:
+  bcrypt:
+    title: Bcrypt 加密
+    description: 使用 bcrypt 对文本字符串进行哈希计算和比较。Bcrypt 是基于 Blowfish 密码算法的密码哈希函数。
+
+    copied: 哈希字符串已复制到剪贴板
+    hash:
+      title: 哈希
+      placeholder: 要加密的字符串...
+      label: '您的字符串：'
+      saltCount: '盐计数：'
+      saltCountPlaceholder: 盐轮数...
+      copy: 复制哈希
+    compare:
+      title: 与哈希值比较字符串
+      stringLabel: '您的字符串：'
+      stringPlaceholder: 要比较的字符串...
+      hashLabel: '您的哈希值：'
+      hashPlaceholder: 要比较的哈希值...
+      match: 它们是否匹配？
+      yes: 是
+      no: 否
diff --git a/src/tools/hash-text/hash-text.vue b/src/tools/hash-text/hash-text.vue
index 6eae9818..30059482 100644
--- a/src/tools/hash-text/hash-text.vue
+++ b/src/tools/hash-text/hash-text.vue
@@ -22,6 +22,7 @@ type Encoding = keyof typeof enc | 'Bin';
 const algoNames = Object.keys(algos) as AlgoNames[];
 const encoding = useQueryParam<Encoding>({ defaultValue: 'Hex', name: 'encoding' });
 const clearText = ref('');
+const { t } = useI18n();
 
 function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
   if (encoding === 'Bin') {
@@ -37,29 +38,38 @@ const hashText = (algo: AlgoNames, value: string) => formatWithEncoding(algos[al
 <template>
   <div>
     <c-card>
-      <c-input-text v-model:value="clearText" multiline raw-text placeholder="Your string to hash..." rows="3" autosize autofocus label="Your text to hash:" />
+      <c-input-text
+        v-model:value="clearText"
+        multiline
+        raw-text
+        :placeholder="t('tools.hash-text.textPlaceholder')"
+        rows="3"
+        autosize
+        autofocus
+        :label="t('tools.hash-text.textLabel')"
+      />
 
       <n-divider />
 
       <c-select
         v-model:value="encoding"
         mb-4
-        label="Digest encoding"
+        :label="t('tools.hash-text.hashLabel')"
         :options="[
           {
-            label: 'Binary (base 2)',
+            label: t('tools.hash-text.binary'),
             value: 'Bin',
           },
           {
-            label: 'Hexadecimal (base 16)',
+            label: t('tools.hash-text.hexadecimal'),
             value: 'Hex',
           },
           {
-            label: 'Base64 (base 64)',
+            label: t('tools.hash-text.base64'),
             value: 'Base64',
           },
           {
-            label: 'Base64url (base 64 with url safe chars)',
+            label: t('tools.hash-text.base64url'),
             value: 'Base64url',
           },
         ]"
diff --git a/src/tools/hash-text/index.ts b/src/tools/hash-text/index.ts
index 3012747c..2070e41d 100644
--- a/src/tools/hash-text/index.ts
+++ b/src/tools/hash-text/index.ts
@@ -1,11 +1,11 @@
 import { EyeOff } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Hash text',
+  name: translate('tools.hash-text.title'),
   path: '/hash-text',
-  description:
-    'Hash a text string using the function you need : MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 or RIPEMD160',
+  description: translate('tools.hash-text.description'),
   keywords: [
     'hash',
     'digest',
diff --git a/src/tools/hash-text/locales/en.yml b/src/tools/hash-text/locales/en.yml
new file mode 100644
index 00000000..fcb001e5
--- /dev/null
+++ b/src/tools/hash-text/locales/en.yml
@@ -0,0 +1,12 @@
+tools:
+  hash-text:
+    title: Hash text
+    description: 'Hash a text string using the function you need : MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 or RIPEMD160'
+
+    textLabel: 'Your text to hash:'
+    textPlaceholder: 'Your string to hash...'
+    hashLabel: Digest encoding
+    binary: Binary (base 2)
+    hexadecimal: Hexadecimal (base 16)
+    base64: Base64 (base 64)
+    base64url: Base64url (base 64 with url safe chars)
diff --git a/src/tools/hash-text/locales/zh.yml b/src/tools/hash-text/locales/zh.yml
new file mode 100644
index 00000000..66363a71
--- /dev/null
+++ b/src/tools/hash-text/locales/zh.yml
@@ -0,0 +1,12 @@
+tools:
+  hash-text:
+    title: 文本转哈希
+    description: 使用所需的函数对文本字符串进行哈希计算：MD5、SHA1、SHA256、SHA224、SHA512、SHA384、SHA3或RIPEMD160
+
+    textLabel: '要进行哈希的文本：'
+    textPlaceholder: '要进行哈希的字符串...'
+    hashLabel: 摘要编码
+    binary: 二进制（基数2）
+    hexadecimal: 十六进制（基数16）
+    base64: Base64（基数64）
+    base64url: Base64url（带有URL安全字符的基数64）
diff --git a/src/tools/token-generator/index.ts b/src/tools/token-generator/index.ts
index 44923e79..73cc3fef 100644
--- a/src/tools/token-generator/index.ts
+++ b/src/tools/token-generator/index.ts
@@ -5,8 +5,19 @@ import { translate } from '@/plugins/i18n.plugin';
 export const tool = defineTool({
   name: translate('tools.token-generator.title'),
   path: '/token-generator',
-  description: translate('tools.token-generator.description'),
-  keywords: ['token', 'random', 'string', 'alphanumeric', 'symbols', 'number', 'letters', 'lowercase', 'uppercase', 'password'],
+  description: translate('token-generator.description'),
+  keywords: [
+    'token',
+    'random',
+    'string',
+    'alphanumeric',
+    'symbols',
+    'number',
+    'letters',
+    'lowercase',
+    'uppercase',
+    'password',
+  ],
   component: () => import('./token-generator.tool.vue'),
   icon: ArrowsShuffle,
 });
diff --git a/src/tools/token-generator/locales/en.yml b/src/tools/token-generator/locales/en.yml
index 7a06f3dd..1125c08e 100644
--- a/src/tools/token-generator/locales/en.yml
+++ b/src/tools/token-generator/locales/en.yml
@@ -12,4 +12,4 @@ tools:
     copied: Token copied to the clipboard
     button:
       copy: Copy
-      refresh: Refresh
\ No newline at end of file
+      refresh: Refresh
diff --git a/src/tools/token-generator/locales/zh.yml b/src/tools/token-generator/locales/zh.yml
new file mode 100644
index 00000000..f5e3f747
--- /dev/null
+++ b/src/tools/token-generator/locales/zh.yml
@@ -0,0 +1,15 @@
+tools:
+  token-generator:
+    title: Token 生成器
+    description: 使用您想要的字符生成随机字符串，包括大写或小写字母、数字或符号。
+
+    uppercase: 大写字母（ABC...）
+    lowercase: 小写字母（abc...）
+    numbers: 数字（123...）
+    symbols: 符号（!-;...）
+    length: 长度
+    tokenPlaceholder: '生成的 Token...'
+    copied: Token 已复制到剪贴板
+    button:
+      copy: 复制
+      refresh: 刷新
diff --git a/src/tools/uuid-generator/index.ts b/src/tools/uuid-generator/index.ts
index 9289b902..54ec479f 100644
--- a/src/tools/uuid-generator/index.ts
+++ b/src/tools/uuid-generator/index.ts
@@ -1,11 +1,11 @@
 import { Fingerprint } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'UUIDs generator',
+  name: translate('tools.uuid-generator.title'),
   path: '/uuid-generator',
-  description:
-    'A Universally Unique Identifier (UUID) is a 128-bit number used to identify information in computer systems. The number of possible UUIDs is 16^32, which is 2^128 or about 3.4x10^38 (which is a lot!).',
+  description: translate('tools.uuid-generator.description'),
   keywords: ['uuid', 'v4', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique', 'v1', 'v3', 'v5', 'nil'],
   component: () => import('./uuid-generator.vue'),
   icon: Fingerprint,
diff --git a/src/tools/uuid-generator/locales/en.yml b/src/tools/uuid-generator/locales/en.yml
new file mode 100644
index 00000000..95fa36f2
--- /dev/null
+++ b/src/tools/uuid-generator/locales/en.yml
@@ -0,0 +1,18 @@
+tools:
+  uuid-generator:
+    title: UUIDs generator
+    description: A Universally Unique Identifier (UUID) is a 128-bit number used to identify information in computer systems. The number of possible UUIDs is 16^32, which is 2^128 or about 3.4x10^38 (which is a lot!).
+
+    version: UUID version
+    quantity: Quantity 
+    quantityPlaceholder: UUID quantity
+    namespace: Namespace
+    name: Name
+    uuidsPlaceholder: Your uuids
+
+    invalidMessage: Invalid UUID
+    copies: UUIDs copied to the clipboard
+
+    button:
+      copy: Copy
+      refresh: Refresh
\ No newline at end of file
diff --git a/src/tools/uuid-generator/locales/zh.yml b/src/tools/uuid-generator/locales/zh.yml
new file mode 100644
index 00000000..8652645b
--- /dev/null
+++ b/src/tools/uuid-generator/locales/zh.yml
@@ -0,0 +1,18 @@
+tools:
+  uuid-generator:
+    title: UUID 生成器
+    description: 通用唯一标识符（UUID）是用于在计算机系统中标识信息的 128 位数字。可能的 UUID 数量为 16^32，即 2^128 或约 3.4x10^38（非常多！）。
+
+    version: UUID 版本
+    quantity: 数量
+    quantityPlaceholder: UUID 数量
+    namespace: 命名空间
+    name: 名称
+    uuidsPlaceholder: 您的 UUID
+
+    invalidMessage: 无效的 UUID
+    copies: UUID 已复制到剪贴板
+
+    button:
+      copy: 复制
+      refresh: 刷新
diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue
index 22b32ba3..58c275ad 100644
--- a/src/tools/uuid-generator/uuid-generator.vue
+++ b/src/tools/uuid-generator/uuid-generator.vue
@@ -9,10 +9,11 @@ const versions = ['NIL', 'v1', 'v3', 'v4', 'v5'] as const;
 const version = useStorage<typeof versions[number]>('uuid-generator:version', 'v4');
 const count = useStorage('uuid-generator:quantity', 1);
 const v35Args = ref({ namespace: '6ba7b811-9dad-11d1-80b4-00c04fd430c8', name: '' });
+const { t } = useI18n();
 
 const validUuidRules = [
   {
-    message: 'Invalid UUID',
+    message: t('tools.uuid-generator.invalidMessage'),
     validator: (value: string) => {
       if (value === nilUuid) {
         return true;
@@ -42,16 +43,16 @@ const [uuids, refreshUUIDs] = computedRefreshable(() => withDefaultOnError(() =>
     return generator(index);
   }).join('\n'), ''));
 
-const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard' });
+const { copy } = useCopy({ source: uuids, text: t('tools.uuid-generator.copies') });
 </script>
 
 <template>
   <div>
-    <c-buttons-select v-model:value="version" :options="versions" label="UUID version" label-width="100px" mb-2 />
+    <c-buttons-select v-model:value="version" :options="versions" :label="t('tools.uuid-generator.version')" label-width="100px" mb-2 />
 
     <div mb-2 flex items-center>
-      <span w-100px>Quantity </span>
-      <n-input-number v-model:value="count" flex-1 :min="1" :max="50" placeholder="UUID quantity" />
+      <span w-100px>{{ t('tools.uuid-generator.quantity') }} </span>
+      <n-input-number v-model:value="count" flex-1 :min="1" :max="50" :placeholder="t('tools.uuid-generator.quantityPlaceholder')" />
     </div>
 
     <div v-if="version === 'v3' || version === 'v5'">
@@ -64,7 +65,7 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
             OID: '6ba7b812-9dad-11d1-80b4-00c04fd430c8',
             X500: '6ba7b814-9dad-11d1-80b4-00c04fd430c8',
           }"
-          label="Namespace"
+          :label="t('tools.uuid-generator.namespace')"
           label-width="100px"
           mb-2
         />
@@ -72,7 +73,7 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
       <div flex-1>
         <c-input-text
           v-model:value="v35Args.namespace"
-          placeholder="Namespace"
+          :placeholder="t('tools.uuid-generator.namespace')"
           label-width="100px"
           label-position="left"
           label=" "
@@ -83,8 +84,8 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
 
       <c-input-text
         v-model:value="v35Args.name"
-        placeholder="Name"
-        label="Name"
+        :placeholder="t('tools.uuid-generator.name')"
+        :label="t('tools.uuid-generator.name')"
         label-width="100px"
         label-position="left"
         mb-2
@@ -95,7 +96,7 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
       style="text-align: center; font-family: monospace"
       :value="uuids"
       multiline
-      placeholder="Your uuids"
+      :placeholder="t('tools.uuid-generator.uuidsPlaceholder')"
       autosize
       rows="1"
       readonly
@@ -107,10 +108,10 @@ const { copy } = useCopy({ source: uuids, text: 'UUIDs copied to the clipboard'
 
     <div flex justify-center gap-3>
       <c-button autofocus @click="copy()">
-        Copy
+        {{ t('tools.uuid-generator.button.copy') }}
       </c-button>
       <c-button @click="refreshUUIDs">
-        Refresh
+        {{ t('tools.uuid-generator.button.refresh') }}
       </c-button>
     </div>
   </div>

From 2ee3b01105419be3788b6ccd0be605b07d7469b9 Mon Sep 17 00:00:00 2001
From: Amery2010 <amery@xiangfa.org>
Date: Fri, 22 Dec 2023 22:42:03 +0800
Subject: [PATCH 2/8] WIP(translate): translate ulid-generator, encryption,
 bip39-generator, hmac-generator, rsa-key-pair-generator,
 password-strength-analyser and pdf-signature-checker tools

---
 src/plugins/i18n.plugin.ts                    |  4 +-
 src/tools/bip39-generator/bip39-generator.vue | 21 +++++-----
 src/tools/bip39-generator/index.ts            |  5 ++-
 src/tools/bip39-generator/locales/en.yml      | 18 +++++++++
 src/tools/bip39-generator/locales/zh.yml      | 18 +++++++++
 src/tools/encryption/encryption.vue           | 34 +++++++++--------
 src/tools/encryption/index.ts                 |  5 ++-
 src/tools/encryption/locales/en.yml           | 24 ++++++++++++
 src/tools/encryption/locales/zh.yml           | 24 ++++++++++++
 src/tools/hmac-generator/hmac-generator.vue   | 25 ++++++------
 src/tools/hmac-generator/index.ts             |  6 +--
 src/tools/hmac-generator/locales/en.yml       | 26 +++++++++++++
 src/tools/hmac-generator/locales/zh.yml       | 26 +++++++++++++
 src/tools/password-strength-analyser/index.ts |  5 ++-
 .../password-strength-analyser/locales/en.yml | 38 +++++++++++++++++++
 .../password-strength-analyser/locales/zh.yml | 38 +++++++++++++++++++
 .../password-strength-analyser.service.ts     | 25 ++++++------
 .../password-strength-analyser.vue            | 17 +++++----
 src/tools/pdf-signature-checker/index.ts      |  5 ++-
 .../pdf-signature-checker/locales/en.yml      |  9 +++++
 .../pdf-signature-checker/locales/zh.yml      |  9 +++++
 .../pdf-signature-checker.vue                 |  8 ++--
 src/tools/rsa-key-pair-generator/index.ts     |  5 ++-
 .../rsa-key-pair-generator/locales/en.yml     | 12 ++++++
 .../rsa-key-pair-generator/locales/zh.yml     | 12 ++++++
 .../rsa-key-pair-generator.vue                | 12 +++---
 src/tools/ulid-generator/index.ts             |  5 ++-
 src/tools/ulid-generator/locales/en.yml       | 12 ++++++
 src/tools/ulid-generator/locales/zh.yml       | 12 ++++++
 src/tools/ulid-generator/ulid-generator.vue   | 11 +++---
 30 files changed, 383 insertions(+), 88 deletions(-)
 create mode 100644 src/tools/bip39-generator/locales/en.yml
 create mode 100644 src/tools/bip39-generator/locales/zh.yml
 create mode 100644 src/tools/encryption/locales/en.yml
 create mode 100644 src/tools/encryption/locales/zh.yml
 create mode 100644 src/tools/hmac-generator/locales/en.yml
 create mode 100644 src/tools/hmac-generator/locales/zh.yml
 create mode 100644 src/tools/password-strength-analyser/locales/en.yml
 create mode 100644 src/tools/password-strength-analyser/locales/zh.yml
 create mode 100644 src/tools/pdf-signature-checker/locales/en.yml
 create mode 100644 src/tools/pdf-signature-checker/locales/zh.yml
 create mode 100644 src/tools/rsa-key-pair-generator/locales/en.yml
 create mode 100644 src/tools/rsa-key-pair-generator/locales/zh.yml
 create mode 100644 src/tools/ulid-generator/locales/en.yml
 create mode 100644 src/tools/ulid-generator/locales/zh.yml

diff --git a/src/plugins/i18n.plugin.ts b/src/plugins/i18n.plugin.ts
index 7ef2c98f..c179873d 100644
--- a/src/plugins/i18n.plugin.ts
+++ b/src/plugins/i18n.plugin.ts
@@ -21,6 +21,7 @@ const messages = _.merge(
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
+  fallbackLocale: 'en',
   messages,
 });
 
@@ -32,6 +33,5 @@ export const i18nPlugin: Plugin = {
 
 export const translate = function (localeKey: string) {
   // @ts-expect-error global
-  const hasKey = i18n.global.te(localeKey, i18n.global.locale);
-  return hasKey ? i18n.global.t(localeKey) : localeKey;
+  return i18n.global.t(localeKey);
 };
diff --git a/src/tools/bip39-generator/bip39-generator.vue b/src/tools/bip39-generator/bip39-generator.vue
index a07941b2..dba97aea 100644
--- a/src/tools/bip39-generator/bip39-generator.vue
+++ b/src/tools/bip39-generator/bip39-generator.vue
@@ -36,6 +36,7 @@ const languages = {
 
 const entropy = ref(generateEntropy());
 const passphraseInput = ref('');
+const { t } = useI18n();
 
 const language = ref<keyof typeof languages>('English');
 const passphrase = computed({
@@ -53,11 +54,11 @@ const entropyValidation = useValidation({
   rules: [
     {
       validator: value => value === '' || (value.length <= 32 && value.length >= 16 && value.length % 4 === 0),
-      message: 'Entropy length should be >= 16, <= 32 and be a multiple of 4',
+      message: t('tools.bip39-generator.validation.lengthError'),
     },
     {
       validator: value => /^[a-fA-F0-9]*$/.test(value),
-      message: 'Entropy should be an hexadecimal string',
+      message: t('tools.bip39-generator.validation.stringTypeError'),
     },
   ],
 });
@@ -67,7 +68,7 @@ const mnemonicValidation = useValidation({
   rules: [
     {
       validator: value => isNotThrowing(() => mnemonicToEntropy(value, languages[language.value])),
-      message: 'Invalid mnemonic',
+      message: t('tools.bip39-generator.validation.mnemonicError'),
     },
   ],
 });
@@ -76,8 +77,8 @@ function refreshEntropy() {
   entropy.value = generateEntropy();
 }
 
-const { copy: copyEntropy } = useCopy({ source: entropy, text: 'Entropy copied to the clipboard' });
-const { copy: copyPassphrase } = useCopy({ source: passphrase, text: 'Passphrase copied to the clipboard' });
+const { copy: copyEntropy } = useCopy({ source: entropy, text: t('tools.bip39-generator.copied.entropy') });
+const { copy: copyPassphrase } = useCopy({ source: passphrase, text: t('tools.bip39-generator.copied.passphrase') });
 </script>
 
 <template>
@@ -87,18 +88,18 @@ const { copy: copyPassphrase } = useCopy({ source: passphrase, text: 'Passphrase
         <c-select
           v-model:value="language"
           searchable
-          label="Language:"
+          :label="t('tools.bip39-generator.languageLabel')"
           :options="Object.keys(languages)"
         />
       </n-gi>
       <n-gi span="2">
         <n-form-item
-          label="Entropy (seed):"
+          :label="t('tools.bip39-generator.entropyLabel')"
           :feedback="entropyValidation.message"
           :validation-status="entropyValidation.status"
         >
           <n-input-group>
-            <c-input-text v-model:value="entropy" placeholder="Your string..." />
+            <c-input-text v-model:value="entropy" :placeholder="t('tools.bip39-generator.entropyPlaceholder')" />
 
             <c-button @click="refreshEntropy()">
               <n-icon size="22">
@@ -115,12 +116,12 @@ const { copy: copyPassphrase } = useCopy({ source: passphrase, text: 'Passphrase
       </n-gi>
     </n-grid>
     <n-form-item
-      label="Passphrase (mnemonic):"
+      :label="t('tools.bip39-generator.passphraseLabel')"
       :feedback="mnemonicValidation.message"
       :validation-status="mnemonicValidation.status"
     >
       <n-input-group>
-        <c-input-text v-model:value="passphrase" placeholder="Your mnemonic..." raw-text />
+        <c-input-text v-model:value="passphrase" :placeholder="t('tools.bip39-generator.passphrasePlaceholder')" raw-text />
 
         <c-button @click="copyPassphrase()">
           <n-icon size="22" :component="Copy" />
diff --git a/src/tools/bip39-generator/index.ts b/src/tools/bip39-generator/index.ts
index f649e188..40582da4 100644
--- a/src/tools/bip39-generator/index.ts
+++ b/src/tools/bip39-generator/index.ts
@@ -1,10 +1,11 @@
 import { AlignJustified } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'BIP39 passphrase generator',
+  name: translate('tools.bip39-generator.title'),
   path: '/bip39-generator',
-  description: 'Generate BIP39 passphrase from existing or random mnemonic, or get the mnemonic from the passphrase.',
+  description: translate('tools.bip39-generator.description'),
   keywords: ['BIP39', 'passphrase', 'generator', 'mnemonic', 'entropy'],
   component: () => import('./bip39-generator.vue'),
   icon: AlignJustified,
diff --git a/src/tools/bip39-generator/locales/en.yml b/src/tools/bip39-generator/locales/en.yml
new file mode 100644
index 00000000..341360de
--- /dev/null
+++ b/src/tools/bip39-generator/locales/en.yml
@@ -0,0 +1,18 @@
+tools:
+  bip39-generator:
+    title: BIP39 passphrase generator
+    description: Generate BIP39 passphrase from existing or random mnemonic, or get the mnemonic from the passphrase.
+
+    languageLabel: 'Language:'
+    entropyLabel: 'Entropy (seed):'
+    entropyPlaceholder: Your string...
+    passphraseLabel: 'Passphrase (mnemonic):'
+    passphrasePlaceholder: Your mnemonic...
+
+    validation:
+      lengthError: 'Entropy length should be >= 16, <= 32 and be a multiple of 4'
+      stringTypeError: Entropy should be an hexadecimal string
+      mnemonicError: Invalid mnemonic
+    copied:
+      entropy: Entropy copied to the clipboard
+      passphrase: Passphrase copied to the clipboard
diff --git a/src/tools/bip39-generator/locales/zh.yml b/src/tools/bip39-generator/locales/zh.yml
new file mode 100644
index 00000000..dfc1d34e
--- /dev/null
+++ b/src/tools/bip39-generator/locales/zh.yml
@@ -0,0 +1,18 @@
+tools:
+  bip39-generator:
+    title: BIP39 助记词生成器
+    description: 从现有或随机助记词生成 BIP39 助记词，或从助记词获取助记词。
+
+    languageLabel: '语言：'
+    entropyLabel: '熵（种子）：'
+    entropyPlaceholder: 您的字符串...
+    passphraseLabel: '助记词（口令）：'
+    passphrasePlaceholder: 您的助记词...
+
+    validation:
+      lengthError: '熵的长度应为 >= 16，<= 32，并且是4的倍数'
+      stringTypeError: 熵应为十六进制字符串
+      mnemonicError: 无效的助记词
+    copied:
+      entropy: 熵已复制到剪贴板
+      passphrase: 助记词已复制到剪贴板
diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue
index 2ad47b51..761e44ef 100644
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@@ -4,45 +4,47 @@ import { computedCatch } from '@/composable/computed/catchedComputed';
 
 const algos = { AES, TripleDES, Rabbit, RC4 };
 
+const { t } = useI18n();
+
 const cypherInput = ref('Lorem ipsum dolor sit amet');
 const cypherAlgo = ref<keyof typeof algos>('AES');
 const cypherSecret = ref('my secret key');
 const cypherOutput = computed(() => algos[cypherAlgo.value].encrypt(cypherInput.value, cypherSecret.value).toString());
 
-const decryptInput = ref('U2FsdGVkX1/EC3+6P5dbbkZ3e1kQ5o2yzuU0NHTjmrKnLBEwreV489Kr0DIB+uBs');
+const decryptInput = ref('U2FsdGVkX18oguRKlUyr7Po25uzcRyz1DVR6+3ULIoQ/gvlXJ+JT+uVJkz+WmSEZ');
 const decryptAlgo = ref<keyof typeof algos>('AES');
 const decryptSecret = ref('my secret key');
 const [decryptOutput, decryptError] = computedCatch(() => algos[decryptAlgo.value].decrypt(decryptInput.value, decryptSecret.value).toString(enc.Utf8), {
   defaultValue: '',
-  defaultErrorMessage: 'Unable to decrypt your text',
+  defaultErrorMessage: t('tools.encryption.errorMessage'),
 });
 </script>
 
 <template>
-  <c-card title="Encrypt">
+  <c-card :title="t('tools.encryption.encrypt.title')">
     <div flex gap-3>
       <c-input-text
         v-model:value="cypherInput"
-        label="Your text:"
-        placeholder="The string to cypher"
+        :label="t('tools.encryption.encrypt.inputLabel')"
+        :placeholder="t('tools.encryption.encrypt.inputPlaceholder')"
         rows="4"
         multiline raw-text monospace autosize flex-1
       />
       <div flex flex-1 flex-col gap-2>
-        <c-input-text v-model:value="cypherSecret" label="Your secret key:" clearable raw-text />
+        <c-input-text v-model:value="cypherSecret" :label="t('tools.encryption.encrypt.secretLabel')" clearable raw-text />
 
         <c-select
           v-model:value="cypherAlgo"
-          label="Encryption algorithm:"
+          :label="t('tools.encryption.encrypt.algoLabel')"
           :options="Object.keys(algos).map((label) => ({ label, value: label }))"
         />
       </div>
     </div>
     <c-input-text
-      label="Your text encrypted:"
+      :label="t('tools.encryption.encrypt.outputLabel')"
       :value="cypherOutput"
       rows="3"
-      placeholder="Your string hash"
+      :placeholder="t('tools.encryption.encrypt.outputPlaceholder')"
       multiline monospace readonly autosize mt-5
     />
   </c-card>
@@ -50,29 +52,29 @@ const [decryptOutput, decryptError] = computedCatch(() => algos[decryptAlgo.valu
     <div flex gap-3>
       <c-input-text
         v-model:value="decryptInput"
-        label="Your encrypted text:"
-        placeholder="The string to cypher"
+        :label="t('tools.encryption.decrypt.inputLabel')"
+        :placeholder="t('tools.encryption.decrypt.inputPlaceholder')"
         rows="4"
         multiline raw-text monospace autosize flex-1
       />
       <div flex flex-1 flex-col gap-2>
-        <c-input-text v-model:value="decryptSecret" label="Your secret key:" clearable raw-text />
+        <c-input-text v-model:value="decryptSecret" :label="t('tools.encryption.decrypt.secretLabel')" clearable raw-text />
 
         <c-select
           v-model:value="decryptAlgo"
-          label="Encryption algorithm:"
+          :label="t('tools.encryption.decrypt.algoLabel')"
           :options="Object.keys(algos).map((label) => ({ label, value: label }))"
         />
       </div>
     </div>
-    <c-alert v-if="decryptError" type="error" mt-12 title="Error while decrypting">
+    <c-alert v-if="decryptError" type="error" mt-12 :title="t('tools.encryption.decrypt.decryptError')">
       {{ decryptError }}
     </c-alert>
     <c-input-text
       v-else
-      label="Your decrypted text:"
+      :label="t('tools.encryption.decrypt.outputLabel')"
       :value="decryptOutput"
-      placeholder="Your string hash"
+      :placeholder="t('tools.encryption.decrypt.outputPlaceholder')"
       rows="3"
       multiline monospace readonly autosize mt-5
     />
diff --git a/src/tools/encryption/index.ts b/src/tools/encryption/index.ts
index 9a95f4bc..c8dd85db 100644
--- a/src/tools/encryption/index.ts
+++ b/src/tools/encryption/index.ts
@@ -1,10 +1,11 @@
 import { Lock } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Encrypt / decrypt text',
+  name: translate('tools.encryption.title'),
   path: '/encryption',
-  description: 'Encrypt and decrypt text clear text using crypto algorithm like AES, TripleDES, Rabbit or RC4.',
+  description: translate('tools.encryption.description'),
   keywords: ['cypher', 'encipher', 'text', 'AES', 'TripleDES', 'Rabbit', 'RC4'],
   component: () => import('./encryption.vue'),
   icon: Lock,
diff --git a/src/tools/encryption/locales/en.yml b/src/tools/encryption/locales/en.yml
new file mode 100644
index 00000000..724ee5d4
--- /dev/null
+++ b/src/tools/encryption/locales/en.yml
@@ -0,0 +1,24 @@
+tools:
+  encryption:
+    title: Encrypt / decrypt text
+    description: Encrypt and decrypt text clear text using crypto algorithm like AES, TripleDES, Rabbit or RC4.
+
+    encrypt:
+      title: Encrypt
+      inputLabel: 'Your text:'
+      inputPlaceholder: The string to cypher
+      secretLabel: 'Your secret key:'
+      algoLabel: 'Encryption algorithm:'
+      outputLabel: 'Your text encrypted:'
+      outputPlaceholder: Your string hash
+    decrypt:
+      title: Decrypt
+      inputLabel: 'Your encrypted text:'
+      inputPlaceholder: The string to cypher
+      secretLabel: 'Your secret key:'
+      algoLabel: 'Encryption algorithm:'
+      outputLabel: 'Your decrypted text:'
+      outputPlaceholder: Your string hash
+      decryptError: Error while decrypting
+
+    errorMessage: Unable to decrypt your text
\ No newline at end of file
diff --git a/src/tools/encryption/locales/zh.yml b/src/tools/encryption/locales/zh.yml
new file mode 100644
index 00000000..b90ebd4a
--- /dev/null
+++ b/src/tools/encryption/locales/zh.yml
@@ -0,0 +1,24 @@
+tools:
+  encryption:
+    title: 加密/解密文本
+    description: 使用 AES、TripleDES、Rabbit 或 RC4 等加密算法对文本进行加密和解密。
+
+    encrypt:
+      title: 加密
+      inputLabel: '您的文本：'
+      inputPlaceholder: 要加密的字符串
+      secretLabel: '您的密钥：'
+      algoLabel: '加密算法：'
+      outputLabel: '加密后的文本：'
+      outputPlaceholder: 您的字符串哈希值
+    decrypt:
+      title: 解密
+      inputLabel: '您的加密文本：'
+      inputPlaceholder: 要解密的字符串
+      secretLabel: '您的密钥：'
+      algoLabel: '加密算法：'
+      outputLabel: '解密后的文本：'
+      outputPlaceholder: 您的字符串哈希值
+      decryptError: 解密时出错
+
+    errorMessage: 无法解密您的文本
diff --git a/src/tools/hmac-generator/hmac-generator.vue b/src/tools/hmac-generator/hmac-generator.vue
index fda3988b..911b7a0b 100644
--- a/src/tools/hmac-generator/hmac-generator.vue
+++ b/src/tools/hmac-generator/hmac-generator.vue
@@ -42,49 +42,50 @@ const encoding = ref<Encoding>('Hex');
 const hmac = computed(() =>
   formatWithEncoding(algos[hashFunction.value](plainText.value, secret.value), encoding.value),
 );
+const { t } = useI18n();
 const { copy } = useCopy({ source: hmac });
 </script>
 
 <template>
   <div flex flex-col gap-4>
-    <c-input-text v-model:value="plainText" multiline raw-text placeholder="Plain text to compute the hash..." rows="3" autosize autofocus label="Plain text to compute the hash" />
-    <c-input-text v-model:value="secret" raw-text placeholder="Enter the secret key..." label="Secret key" clearable />
+    <c-input-text v-model:value="plainText" multiline raw-text :placeholder="t('tools.hmac-generator.plainText.placeholder')" rows="3" autosize autofocus :label="t('tools.hmac-generator.plainText.label')" />
+    <c-input-text v-model:value="secret" raw-text :placeholder="t('tools.hmac-generator.secret.placeholder')" :label="t('tools.hmac-generator.secret.label')" clearable />
 
     <div flex gap-2>
       <c-select
-        v-model:value="hashFunction" label="Hashing function"
+        v-model:value="hashFunction" :label="t('tools.hmac-generator.hashFunction.label')"
         flex-1
-        placeholder="Select an hashing function..."
+        :placeholder="t('tools.hmac-generator.hashFunction.placeholder')"
         :options="Object.keys(algos).map((label) => ({ label, value: label }))"
       />
       <c-select
-        v-model:value="encoding" label="Output encoding"
+        v-model:value="encoding" :label="t('tools.hmac-generator.encoding.label')"
         flex-1
-        placeholder="Select the result encoding..."
+        :placeholder="t('tools.hmac-generator.encoding.placeholder')"
         :options="[
           {
-            label: 'Binary (base 2)',
+            label: t('tools.hmac-generator.encoding.binary'),
             value: 'Bin',
           },
           {
-            label: 'Hexadecimal (base 16)',
+            label: t('tools.hmac-generator.encoding.hexadecimal'),
             value: 'Hex',
           },
           {
-            label: 'Base64 (base 64)',
+            label: t('tools.hmac-generator.encoding.base64'),
             value: 'Base64',
           },
           {
-            label: 'Base64-url (base 64 with url safe chars)',
+            label: t('tools.hmac-generator.encoding.Base64Url'),
             value: 'Base64url',
           },
         ]"
       />
     </div>
-    <input-copyable v-model:value="hmac" type="textarea" placeholder="The result of the HMAC..." label="HMAC of your text" />
+    <input-copyable v-model:value="hmac" type="textarea" :placeholder="t('tools.hmac-generator.result.placeholder')" :label="t('tools.hmac-generator.result.label')" />
     <div flex justify-center>
       <c-button @click="copy()">
-        Copy HMAC
+        {{ t('tools.hmac-generator.button.copy') }}
       </c-button>
     </div>
   </div>
diff --git a/src/tools/hmac-generator/index.ts b/src/tools/hmac-generator/index.ts
index c0ca7da4..3500684e 100644
--- a/src/tools/hmac-generator/index.ts
+++ b/src/tools/hmac-generator/index.ts
@@ -1,11 +1,11 @@
 import { ShortTextRound } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Hmac generator',
+  name: translate('tools.hmac-generator.title'),
   path: '/hmac-generator',
-  description:
-    'Computes a hash-based message authentication code (HMAC) using a secret key and your favorite hashing function.',
+  description: translate('tools.hmac-generator.description'),
   keywords: ['hmac', 'generator', 'MD5', 'SHA1', 'SHA256', 'SHA224', 'SHA512', 'SHA384', 'SHA3', 'RIPEMD160'],
   component: () => import('./hmac-generator.vue'),
   icon: ShortTextRound,
diff --git a/src/tools/hmac-generator/locales/en.yml b/src/tools/hmac-generator/locales/en.yml
new file mode 100644
index 00000000..bab06536
--- /dev/null
+++ b/src/tools/hmac-generator/locales/en.yml
@@ -0,0 +1,26 @@
+tools:
+  hmac-generator:
+    title: Hmac generator
+    description: Computes a hash-based message authentication code (HMAC) using a secret key and your favorite hashing function.
+
+    plainText:
+      label: Plain text to compute the hash
+      placeholder: Plain text to compute the hash...
+    secret:
+      label: Secret key
+      placeholder: Enter the secret key...
+    hashFunction:
+      label: Hashing function
+      placeholder: Select an hashing function...
+    encoding:
+      label: Output encoding
+      placeholder: Select the result encoding...
+      binary: Binary (base 2)
+      hexadecimal: Hexadecimal (base 16)
+      base64: Base64 (base 64)
+      Base64Url: Base64-url (base 64 with url safe chars)
+    result:
+      label: HMAC of your text
+      placeholder: The result of the HMAC...
+    button:
+      copy: Copy HMAC
diff --git a/src/tools/hmac-generator/locales/zh.yml b/src/tools/hmac-generator/locales/zh.yml
new file mode 100644
index 00000000..69d10a6a
--- /dev/null
+++ b/src/tools/hmac-generator/locales/zh.yml
@@ -0,0 +1,26 @@
+tools:
+  hmac-generator:
+    title: HMAC 生成器
+    description: 使用密钥和您喜欢的哈希函数计算基于哈希的消息认证码（HMAC）。
+
+    plainText:
+      label: 要计算哈希的明文
+      placeholder: 要计算哈希的明文...
+    secret:
+      label: 密钥
+      placeholder: 输入密钥...
+    hashFunction:
+      label: 哈希函数
+      placeholder: 选择一个哈希函数...
+    encoding:
+      label: 输出编码
+      placeholder: 选择结果的编码方式...
+      binary: 二进制（基数2）
+      hexadecimal: 十六进制（基数16）
+      base64: Base64（基数64）
+      Base64Url: Base64-url（带有URL安全字符的基数64）
+    result:
+      label: 您的文本的 HMAC
+      placeholder: HMAC 的结果...
+    button:
+      copy: 复制 HMAC
diff --git a/src/tools/password-strength-analyser/index.ts b/src/tools/password-strength-analyser/index.ts
index 7b86bdd5..2c2635d5 100644
--- a/src/tools/password-strength-analyser/index.ts
+++ b/src/tools/password-strength-analyser/index.ts
@@ -1,10 +1,11 @@
 import { defineTool } from '../tool';
 import PasswordIcon from '~icons/mdi/form-textbox-password';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Password strength analyser',
+  name: translate('tools.password-strength-analyser.title'),
   path: '/password-strength-analyser',
-  description: 'Discover the strength of your password with this client side only password strength analyser and crack time estimation tool.',
+  description: translate('tools.password-strength-analyser.description'),
   keywords: ['password', 'strength', 'analyser', 'and', 'crack', 'time', 'estimation', 'brute', 'force', 'attack', 'entropy', 'cracking', 'hash', 'hashing', 'algorithm', 'algorithms', 'md5', 'sha1', 'sha256', 'sha512', 'bcrypt', 'scrypt', 'argon2', 'argon2id', 'argon2i', 'argon2d'],
   component: () => import('./password-strength-analyser.vue'),
   icon: PasswordIcon,
diff --git a/src/tools/password-strength-analyser/locales/en.yml b/src/tools/password-strength-analyser/locales/en.yml
new file mode 100644
index 00000000..bc4007ea
--- /dev/null
+++ b/src/tools/password-strength-analyser/locales/en.yml
@@ -0,0 +1,38 @@
+tools:
+  password-strength-analyser:
+    title: Password strength analyser
+    description: Discover the strength of your password with this client side only password strength analyser and crack time estimation tool.
+
+    passwordPlaceholder: Enter a password...
+    bruteForceDuration: Duration to crack this password with brute force
+    note: 'Note: '
+    noteInfor: The computed strength is based on the time it would take to crack the password using a brute force approach, it does not take into account the possibility of a dictionary attack.
+
+    details:
+      length: 'Password length:'
+      entropy: 'Entropy:'
+      characterSize: 'Character set size:'
+      score: 'Score:'
+
+    instantly: Instantly
+    lessThanASecond: Less than a second
+    millenium: millenium
+    century: century
+    decade: decade
+    year: year
+    month: month
+    week: week
+    day: day
+    hour: hour
+    minute: minute
+    second: second
+    millennia: millennia
+    centuries: centuries
+    decades: decades
+    years: years
+    months: months
+    weeks: weeks
+    days: days
+    hours: hours
+    minutes: minutes
+    seconds: seconds
diff --git a/src/tools/password-strength-analyser/locales/zh.yml b/src/tools/password-strength-analyser/locales/zh.yml
new file mode 100644
index 00000000..e21f7223
--- /dev/null
+++ b/src/tools/password-strength-analyser/locales/zh.yml
@@ -0,0 +1,38 @@
+tools:
+  password-strength-analyser:
+    title: 密码强度分析器
+    description: 使用此仅在客户端运行的密码强度分析器和破解时间估算工具来了解您的密码强度。
+
+    passwordPlaceholder: 输入密码...
+    bruteForceDuration: 使用暴力破解破解此密码所需时间
+    note: '注意：'
+    noteInfor: 计算的强度是基于使用暴力破解方法破解密码所需的时间，不考虑字典攻击的可能性。
+
+    details:
+      length: '密码长度：'
+      entropy: '熵：'
+      characterSize: '字符集大小：'
+      score: '得分：'
+
+    instantly: 瞬间
+    lessThanASecond: 不到一秒钟
+    millenium: 千年
+    century: 世纪
+    decade: 十年
+    year: 年
+    month: 月
+    week: 周
+    day: 天
+    hour: 小时
+    minute: 分钟
+    second: 秒
+    millennia: 千年
+    centuries: 世纪
+    decades: 十年
+    years: 年
+    months: 月
+    weeks: 周
+    days: 天
+    hours: 小时
+    minutes: 分钟
+    seconds: 秒
diff --git a/src/tools/password-strength-analyser/password-strength-analyser.service.ts b/src/tools/password-strength-analyser/password-strength-analyser.service.ts
index aa281848..bb877364 100644
--- a/src/tools/password-strength-analyser/password-strength-analyser.service.ts
+++ b/src/tools/password-strength-analyser/password-strength-analyser.service.ts
@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { translate } from '@/plugins/i18n.plugin';
 
 export { getPasswordCrackTimeEstimation, getCharsetLength };
 
@@ -11,24 +12,24 @@ function prettifyExponentialNotation(exponentialNotation: number) {
 
 function getHumanFriendlyDuration({ seconds }: { seconds: number }) {
   if (seconds <= 0.001) {
-    return 'Instantly';
+    return translate('tools.password-strength-analyser.instantly');
   }
 
   if (seconds <= 1) {
-    return 'Less than a second';
+    return translate('tools.password-strength-analyser.lessThanASecond');
   }
 
   const timeUnits = [
-    { unit: 'millenium', secondsInUnit: 31536000000, format: prettifyExponentialNotation, plural: 'millennia' },
-    { unit: 'century', secondsInUnit: 3153600000, plural: 'centuries' },
-    { unit: 'decade', secondsInUnit: 315360000, plural: 'decades' },
-    { unit: 'year', secondsInUnit: 31536000, plural: 'years' },
-    { unit: 'month', secondsInUnit: 2592000, plural: 'months' },
-    { unit: 'week', secondsInUnit: 604800, plural: 'weeks' },
-    { unit: 'day', secondsInUnit: 86400, plural: 'days' },
-    { unit: 'hour', secondsInUnit: 3600, plural: 'hours' },
-    { unit: 'minute', secondsInUnit: 60, plural: 'minutes' },
-    { unit: 'second', secondsInUnit: 1, plural: 'seconds' },
+    { unit: translate('tools.password-strength-analyser.millenium'), secondsInUnit: 31536000000, format: prettifyExponentialNotation, plural: translate('tools.password-strength-analyser.millennia') },
+    { unit: translate('tools.password-strength-analyser.century'), secondsInUnit: 3153600000, plural: translate('tools.password-strength-analyser.centuries') },
+    { unit: translate('tools.password-strength-analyser.decade'), secondsInUnit: 315360000, plural: translate('tools.password-strength-analyser.decades') },
+    { unit: translate('tools.password-strength-analyser.year'), secondsInUnit: 31536000, plural: translate('tools.password-strength-analyser.years') },
+    { unit: translate('tools.password-strength-analyser.month'), secondsInUnit: 2592000, plural: translate('tools.password-strength-analyser.months') },
+    { unit: translate('tools.password-strength-analyser.week'), secondsInUnit: 604800, plural: translate('tools.password-strength-analyser.weeks') },
+    { unit: translate('tools.password-strength-analyser.day'), secondsInUnit: 86400, plural: translate('tools.password-strength-analyser.days') },
+    { unit: translate('tools.password-strength-analyser.hour'), secondsInUnit: 3600, plural: translate('tools.password-strength-analyser.hours') },
+    { unit: translate('tools.password-strength-analyser.minute'), secondsInUnit: 60, plural: translate('tools.password-strength-analyser.minutes') },
+    { unit: translate('tools.password-strength-analyser.second'), secondsInUnit: 1, plural: translate('tools.password-strength-analyser.seconds') },
   ];
 
   return _.chain(timeUnits)
diff --git a/src/tools/password-strength-analyser/password-strength-analyser.vue b/src/tools/password-strength-analyser/password-strength-analyser.vue
index 7064ad0c..741bc38d 100644
--- a/src/tools/password-strength-analyser/password-strength-analyser.vue
+++ b/src/tools/password-strength-analyser/password-strength-analyser.vue
@@ -1,24 +1,25 @@
 <script setup lang="ts">
 import { getPasswordCrackTimeEstimation } from './password-strength-analyser.service';
 
+const { t } = useI18n();
 const password = ref('');
 const crackTimeEstimation = computed(() => getPasswordCrackTimeEstimation({ password: password.value }));
 
 const details = computed(() => [
   {
-    label: 'Password length:',
+    label: t('tools.password-strength-analyser.details.length'),
     value: crackTimeEstimation.value.passwordLength,
   },
   {
-    label: 'Entropy:',
+    label: t('tools.password-strength-analyser.details.entropy'),
     value: Math.round(crackTimeEstimation.value.entropy * 100) / 100,
   },
   {
-    label: 'Character set size:',
+    label: t('tools.password-strength-analyser.details.characterSize'),
     value: crackTimeEstimation.value.charsetLength,
   },
   {
-    label: 'Score:',
+    label: t('tools.password-strength-analyser.details.score'),
     value: `${Math.round(crackTimeEstimation.value.score * 100)} / 100`,
   },
 ]);
@@ -29,7 +30,7 @@ const details = computed(() => [
     <c-input-text
       v-model:value="password"
       type="password"
-      placeholder="Enter a password..."
+      :placeholder="t('tools.password-strength-analyser.passwordPlaceholder')"
       clearable
       autofocus
       raw-text
@@ -38,7 +39,7 @@ const details = computed(() => [
 
     <c-card text-center>
       <div op-60>
-        Duration to crack this password with brute force
+        {{ t('tools.password-strength-analyser.bruteForceDuration') }}
       </div>
       <div text-2xl data-test-id="crack-duration">
         {{ crackTimeEstimation.crackDurationFormatted }}
@@ -55,8 +56,8 @@ const details = computed(() => [
       </div>
     </c-card>
     <div op-70>
-      <span font-bold>Note: </span>
-      The computed strength is based on the time it would take to crack the password using a brute force approach, it does not take into account the possibility of a dictionary attack.
+      <span font-bold>{{ t('tools.password-strength-analyser.note') }}</span>
+      {{ t('tools.password-strength-analyser.noteInfor') }}
     </div>
   </div>
 </template>
diff --git a/src/tools/pdf-signature-checker/index.ts b/src/tools/pdf-signature-checker/index.ts
index 54563979..2619c492 100644
--- a/src/tools/pdf-signature-checker/index.ts
+++ b/src/tools/pdf-signature-checker/index.ts
@@ -1,10 +1,11 @@
 import { defineTool } from '../tool';
 import FileCertIcon from '~icons/mdi/file-certificate-outline';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'PDF signature checker',
+  name: translate('tools.pdf-signature-checker.title'),
   path: '/pdf-signature-checker',
-  description: 'Verify the signatures of a PDF file. A signed PDF file contains one or more signatures that may be used to determine whether the contents of the file have been altered since the file was signed.',
+  description: translate('tools.pdf-signature-checker.description'),
   keywords: ['pdf', 'signature', 'checker', 'verify', 'validate', 'sign'],
   component: () => import('./pdf-signature-checker.vue'),
   icon: FileCertIcon,
diff --git a/src/tools/pdf-signature-checker/locales/en.yml b/src/tools/pdf-signature-checker/locales/en.yml
new file mode 100644
index 00000000..47e3ac81
--- /dev/null
+++ b/src/tools/pdf-signature-checker/locales/en.yml
@@ -0,0 +1,9 @@
+tools:
+  pdf-signature-checker:
+    title: PDF signature checker
+    description: Verify the signatures of a PDF file. A signed PDF file contains one or more signatures that may be used to determine whether the contents of the file have been altered since the file was signed.
+    
+    upload:
+      tip: Drag and drop a PDF file here, or click to select a file
+      error: No signatures found in the provided file.
+      parsed: 'Signature {index} certificates :'
diff --git a/src/tools/pdf-signature-checker/locales/zh.yml b/src/tools/pdf-signature-checker/locales/zh.yml
new file mode 100644
index 00000000..485d8502
--- /dev/null
+++ b/src/tools/pdf-signature-checker/locales/zh.yml
@@ -0,0 +1,9 @@
+tools:
+  pdf-signature-checker:
+    title: PDF 签名检查器
+    description: 验证 PDF 文件的签名。签名的 PDF 文件包含一个或多个签名，可用于确定文件内容是否自签名后被更改。
+
+    upload:
+      tip: 拖放PDF文件到此处，或点击选择文件
+      error: 在提供的文件中未找到签名。
+      parsed: '第 {index} 个签名证书：'
diff --git a/src/tools/pdf-signature-checker/pdf-signature-checker.vue b/src/tools/pdf-signature-checker/pdf-signature-checker.vue
index 02206164..6bc182b0 100644
--- a/src/tools/pdf-signature-checker/pdf-signature-checker.vue
+++ b/src/tools/pdf-signature-checker/pdf-signature-checker.vue
@@ -7,6 +7,8 @@ const signatures = ref<SignatureInfo[]>([]);
 const status = ref<'idle' | 'parsed' | 'error' | 'loading'>('idle');
 const file = ref<File | null>(null);
 
+const { t } = useI18n();
+
 async function onVerifyClicked(uploadedFile: File) {
   file.value = uploadedFile;
   const fileBuffer = await uploadedFile.arrayBuffer();
@@ -27,7 +29,7 @@ async function onVerifyClicked(uploadedFile: File) {
 <template>
   <div style="flex: 0 0 100%">
     <div mx-auto max-w-600px>
-      <c-file-upload title="Drag and drop a PDF file here, or click to select a file" accept=".pdf" @file-upload="onVerifyClicked" />
+      <c-file-upload :title="t('tools.pdf-signature-checker.upload.tip')" accept=".pdf" @file-upload="onVerifyClicked" />
 
       <c-card v-if="file" mt-4 flex gap-2>
         <div font-bold>
@@ -41,7 +43,7 @@ async function onVerifyClicked(uploadedFile: File) {
 
       <div v-if="status === 'error'">
         <c-alert mt-4>
-          No signatures found in the provided file.
+          {{ t('tools.pdf-signature-checker.upload.error') }}
         </c-alert>
       </div>
     </div>
@@ -50,7 +52,7 @@ async function onVerifyClicked(uploadedFile: File) {
   <div v-if="status === 'parsed' && signatures.length" style="flex: 0 0 100%" mt-5 flex flex-col gap-4>
     <div v-for="(signature, index) of signatures" :key="index">
       <div mb-2 font-bold>
-        Signature {{ index + 1 }} certificates :
+        {{ t('tools.pdf-signature-checker.upload.parsed', { index: index + 1 }) }}
       </div>
 
       <pdf-signature-details :signature="signature" />
diff --git a/src/tools/rsa-key-pair-generator/index.ts b/src/tools/rsa-key-pair-generator/index.ts
index c8ab4cdb..3d034e5b 100644
--- a/src/tools/rsa-key-pair-generator/index.ts
+++ b/src/tools/rsa-key-pair-generator/index.ts
@@ -1,10 +1,11 @@
 import { Certificate } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'RSA key pair generator',
+  name: translate('tools.rsa-key-pair-generator.title'),
   path: '/rsa-key-pair-generator',
-  description: 'Generate new random RSA private and public key pem certificates.',
+  description: translate('tools.rsa-key-pair-generator.description'),
   keywords: ['rsa', 'key', 'pair', 'generator', 'public', 'private', 'secret', 'ssh', 'pem'],
   component: () => import('./rsa-key-pair-generator.vue'),
   icon: Certificate,
diff --git a/src/tools/rsa-key-pair-generator/locales/en.yml b/src/tools/rsa-key-pair-generator/locales/en.yml
new file mode 100644
index 00000000..4e2a02f5
--- /dev/null
+++ b/src/tools/rsa-key-pair-generator/locales/en.yml
@@ -0,0 +1,12 @@
+tools:
+  rsa-key-pair-generator:
+    title: RSA key pair generator
+    description: Generate new random RSA private and public key pem certificates.
+
+    bits: 'Bits :'
+    publicKey: Public key
+    privateKey: Private key
+    button:
+      refresh: Refresh key-pair
+
+    validationError: 'Bits should be 256 <= bits <= 16384 and be a multiple of 8'
diff --git a/src/tools/rsa-key-pair-generator/locales/zh.yml b/src/tools/rsa-key-pair-generator/locales/zh.yml
new file mode 100644
index 00000000..1565d96f
--- /dev/null
+++ b/src/tools/rsa-key-pair-generator/locales/zh.yml
@@ -0,0 +1,12 @@
+tools:
+  rsa-key-pair-generator:
+    title: RSA 密钥对生成器
+    description: 生成新的随机 RSA 私钥和公钥 PEM 证书。
+
+    bits: '位数：'
+    publicKey: 公钥
+    privateKey: 私钥
+    button:
+      refresh: 刷新密钥对
+
+    validationError: '位数应为256 <= bits <= 16384，并且是8的倍数'
diff --git a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
index 7f972464..c0ea921a 100644
--- a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
+++ b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
@@ -8,11 +8,13 @@ import { computedRefreshableAsync } from '@/composable/computedRefreshable';
 const bits = ref(2048);
 const emptyCerts = { publicKeyPem: '', privateKeyPem: '' };
 
+const { t } = useI18n();
+
 const { attrs: bitsValidationAttrs } = useValidation({
   source: bits,
   rules: [
     {
-      message: 'Bits should be 256 <= bits <= 16384 and be a multiple of 8',
+      message: t('tools.rsa-key-pair-generator.validationError'),
       validator: value => value >= 256 && value <= 16384 && value % 8 === 0,
     },
   ],
@@ -27,23 +29,23 @@ const [certs, refreshCerts] = computedRefreshableAsync(
 <template>
   <div style="flex: 0 0 100%">
     <div item-style="flex: 1 1 0" style="max-width: 600px" mx-auto flex gap-3>
-      <n-form-item label="Bits :" v-bind="bitsValidationAttrs as any" label-placement="left" label-width="100">
+      <n-form-item :label="t('tools.rsa-key-pair-generator.bits')" v-bind="bitsValidationAttrs as any" label-placement="left" label-width="100">
         <n-input-number v-model:value="bits" min="256" max="16384" step="8" />
       </n-form-item>
 
       <c-button @click="refreshCerts">
-        Refresh key-pair
+        {{ t('tools.rsa-key-pair-generator.button.refresh') }}
       </c-button>
     </div>
   </div>
 
   <div>
-    <h3>Public key</h3>
+    <h3>{{ t('tools.rsa-key-pair-generator.publicKey') }}</h3>
     <TextareaCopyable :value="certs.publicKeyPem" />
   </div>
 
   <div>
-    <h3>Private key</h3>
+    <h3>{{ t('tools.rsa-key-pair-generator.privateKey') }}</h3>
     <TextareaCopyable :value="certs.privateKeyPem" />
   </div>
 </template>
diff --git a/src/tools/ulid-generator/index.ts b/src/tools/ulid-generator/index.ts
index 6a5408dd..c12679a7 100644
--- a/src/tools/ulid-generator/index.ts
+++ b/src/tools/ulid-generator/index.ts
@@ -1,10 +1,11 @@
 import { SortDescendingNumbers } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'ULID generator',
+  name: translate('tools.ulid-generator.title'),
   path: '/ulid-generator',
-  description: 'Generate random Universally Unique Lexicographically Sortable Identifier (ULID).',
+  description: translate('tools.ulid-generator.description'),
   keywords: ['ulid', 'generator', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique'],
   component: () => import('./ulid-generator.vue'),
   icon: SortDescendingNumbers,
diff --git a/src/tools/ulid-generator/locales/en.yml b/src/tools/ulid-generator/locales/en.yml
new file mode 100644
index 00000000..2961bb43
--- /dev/null
+++ b/src/tools/ulid-generator/locales/en.yml
@@ -0,0 +1,12 @@
+tools:
+  ulid-generator:
+    title: ULID generator
+    description: Generate random Universally Unique Lexicographically Sortable Identifier (ULID).
+
+    quantity: 'Quantity: '
+    format: 'Format: '
+
+    copied: ULIDs copied to the clipboard
+    button:
+      refresh: Refresh
+      copy: Copy
diff --git a/src/tools/ulid-generator/locales/zh.yml b/src/tools/ulid-generator/locales/zh.yml
new file mode 100644
index 00000000..fd588507
--- /dev/null
+++ b/src/tools/ulid-generator/locales/zh.yml
@@ -0,0 +1,12 @@
+tools:
+  ulid-generator:
+    title: ULID 生成器
+    description: 生成随机的通用唯一词典排序标识符（ULID）。
+
+    quantity: '数量：'
+    format: '格式：'
+
+    copied: ULID 已复制到剪贴板
+    button:
+      refresh: 刷新
+      copy: 复制
diff --git a/src/tools/ulid-generator/ulid-generator.vue b/src/tools/ulid-generator/ulid-generator.vue
index 06e695ef..1a140bec 100644
--- a/src/tools/ulid-generator/ulid-generator.vue
+++ b/src/tools/ulid-generator/ulid-generator.vue
@@ -7,6 +7,7 @@ import { useCopy } from '@/composable/copy';
 const amount = useStorage('ulid-generator-amount', 1);
 const formats = [{ label: 'Raw', value: 'raw' }, { label: 'JSON', value: 'json' }] as const;
 const format = useStorage<typeof formats[number]['value']>('ulid-generator-format', formats[0].value);
+const { t } = useI18n();
 
 const [ulids, refreshUlids] = computedRefreshable(() => {
   const ids = _.times(amount.value, () => ulid());
@@ -18,17 +19,17 @@ const [ulids, refreshUlids] = computedRefreshable(() => {
   return ids.join('\n');
 });
 
-const { copy } = useCopy({ source: ulids, text: 'ULIDs copied to the clipboard' });
+const { copy } = useCopy({ source: ulids, text: t('tools.ulid-generator.copied') });
 </script>
 
 <template>
   <div flex flex-col justify-center gap-2>
     <div flex items-center>
-      <label w-75px> Quantity:</label>
+      <label w-75px>{{ t('tools.ulid-generator.quantity') }}</label>
       <n-input-number v-model:value="amount" min="1" max="100" flex-1 />
     </div>
 
-    <c-buttons-select v-model:value="format" :options="formats" label="Format: " label-width="75px" />
+    <c-buttons-select v-model:value="format" :options="formats" :label="t('tools.ulid-generator.format')" label-width="75px" />
 
     <c-card mt-5 flex data-test-id="ulids">
       <pre m-0 m-x-auto>{{ ulids }}</pre>
@@ -36,10 +37,10 @@ const { copy } = useCopy({ source: ulids, text: 'ULIDs copied to the clipboard'
 
     <div flex justify-center gap-2>
       <c-button data-test-id="refresh" @click="refreshUlids()">
-        Refresh
+        {{ t('tools.ulid-generator.button.refresh') }}
       </c-button>
       <c-button @click="copy()">
-        Copy
+        {{ t('tools.ulid-generator.button.copy') }}
       </c-button>
     </div>
   </div>

From 2da11a7242ab4add8b40ab33ddcbf242c9be0d9f Mon Sep 17 00:00:00 2001
From: Amery2010 <amery@xiangfa.org>
Date: Tue, 26 Dec 2023 23:57:28 +0800
Subject: [PATCH 3/8] WIP(translate): translate converter category all tools

---
 src/plugins/i18n.plugin.ts                    |  4 +-
 .../base64-file-converter.vue                 | 20 +++++-----
 src/tools/base64-file-converter/index.ts      |  5 ++-
 .../base64-file-converter/locales/en.yml      | 18 +++++++++
 .../base64-file-converter/locales/zh.yml      |  0
 .../base64-string-converter.vue               | 36 +++++++++---------
 src/tools/base64-string-converter/index.ts    |  5 ++-
 .../base64-string-converter/locales/en.yml    | 26 +++++++++++++
 .../base64-string-converter/locales/zh.yml    | 26 +++++++++++++
 src/tools/case-converter/case-converter.vue   | 34 +++++++++--------
 src/tools/case-converter/index.ts             |  5 ++-
 src/tools/case-converter/locales/en.yml       | 22 +++++++++++
 src/tools/case-converter/locales/zh.yml       | 22 +++++++++++
 .../color-converter/color-converter.models.ts |  3 +-
 src/tools/color-converter/color-converter.vue |  6 ++-
 src/tools/color-converter/index.ts            |  5 ++-
 src/tools/color-converter/locales/en.yml      |  9 +++++
 src/tools/color-converter/locales/zh.yml      |  9 +++++
 .../date-time-converter.vue                   | 28 +++++++-------
 src/tools/date-time-converter/index.ts        |  5 ++-
 src/tools/date-time-converter/locales/en.yml  | 20 ++++++++++
 src/tools/date-time-converter/locales/zh.yml  | 20 ++++++++++
 src/tools/integer-base-converter/index.ts     |  5 ++-
 .../integer-base-converter.model.ts           |  4 +-
 .../integer-base-converter.vue                | 32 ++++++++--------
 .../integer-base-converter/locales/en.yml     | 24 ++++++++++++
 .../integer-base-converter/locales/zh.yml     | 24 ++++++++++++
 src/tools/json-to-toml/index.ts               |  5 ++-
 src/tools/json-to-toml/json-to-toml.vue       | 10 +++--
 src/tools/json-to-toml/locales/en.yml         | 10 +++++
 src/tools/json-to-toml/locales/zh.yml         | 10 +++++
 src/tools/json-to-yaml-converter/index.ts     |  5 ++-
 .../json-to-yaml-converter/json-to-yaml.vue   | 10 +++--
 .../json-to-yaml-converter/locales/en.yml     | 10 +++++
 .../json-to-yaml-converter/locales/zh.yml     | 10 +++++
 src/tools/list-converter/index.ts             |  6 +--
 src/tools/list-converter/list-converter.vue   | 38 ++++++++++---------
 src/tools/list-converter/locales/en.yml       | 28 ++++++++++++++
 src/tools/list-converter/locales/zh.yml       | 28 ++++++++++++++
 src/tools/roman-numeral-converter/index.ts    |  5 ++-
 .../roman-numeral-converter/locales/en.yml    | 13 +++++++
 .../roman-numeral-converter/locales/zh.yml    | 13 +++++++
 .../roman-numeral-converter.vue               | 18 +++++----
 src/tools/text-to-binary/index.ts             |  5 ++-
 src/tools/text-to-binary/locales/en.yml       | 22 +++++++++++
 src/tools/text-to-binary/locales/zh.yml       | 22 +++++++++++
 .../text-to-binary/text-to-binary.models.ts   |  4 +-
 src/tools/text-to-binary/text-to-binary.vue   | 20 +++++-----
 src/tools/text-to-nato-alphabet/index.ts      |  5 ++-
 .../text-to-nato-alphabet/locales/en.yml      | 11 ++++++
 .../text-to-nato-alphabet/locales/zh.yml      | 11 ++++++
 .../text-to-nato-alphabet.vue                 | 12 +++---
 src/tools/toml-to-json/index.ts               |  5 ++-
 src/tools/toml-to-json/locales/en.yml         | 10 +++++
 src/tools/toml-to-json/locales/zh.yml         | 10 +++++
 src/tools/toml-to-json/toml-to-json.vue       | 10 +++--
 src/tools/toml-to-yaml/index.ts               |  6 ++-
 src/tools/toml-to-yaml/locales/en.yml         | 10 +++++
 src/tools/toml-to-yaml/locales/zh.yml         | 10 +++++
 src/tools/toml-to-yaml/toml-to-yaml.vue       | 10 +++--
 src/tools/yaml-to-json-converter/index.ts     |  5 ++-
 .../yaml-to-json-converter/locales/en.yml     | 10 +++++
 .../yaml-to-json-converter/locales/zh.yml     | 10 +++++
 .../yaml-to-json-converter/yaml-to-json.vue   | 10 +++--
 src/tools/yaml-to-toml/index.ts               |  5 ++-
 src/tools/yaml-to-toml/locales/en.yml         | 11 ++++++
 src/tools/yaml-to-toml/locales/zh.yml         | 10 +++++
 src/tools/yaml-to-toml/yaml-to-toml.vue       | 10 +++--
 68 files changed, 716 insertions(+), 174 deletions(-)
 create mode 100644 src/tools/base64-file-converter/locales/en.yml
 create mode 100644 src/tools/base64-file-converter/locales/zh.yml
 create mode 100644 src/tools/base64-string-converter/locales/en.yml
 create mode 100644 src/tools/base64-string-converter/locales/zh.yml
 create mode 100644 src/tools/case-converter/locales/en.yml
 create mode 100644 src/tools/case-converter/locales/zh.yml
 create mode 100644 src/tools/color-converter/locales/en.yml
 create mode 100644 src/tools/color-converter/locales/zh.yml
 create mode 100644 src/tools/date-time-converter/locales/en.yml
 create mode 100644 src/tools/date-time-converter/locales/zh.yml
 create mode 100644 src/tools/integer-base-converter/locales/en.yml
 create mode 100644 src/tools/integer-base-converter/locales/zh.yml
 create mode 100644 src/tools/json-to-toml/locales/en.yml
 create mode 100644 src/tools/json-to-toml/locales/zh.yml
 create mode 100644 src/tools/json-to-yaml-converter/locales/en.yml
 create mode 100644 src/tools/json-to-yaml-converter/locales/zh.yml
 create mode 100644 src/tools/list-converter/locales/en.yml
 create mode 100644 src/tools/list-converter/locales/zh.yml
 create mode 100644 src/tools/roman-numeral-converter/locales/en.yml
 create mode 100644 src/tools/roman-numeral-converter/locales/zh.yml
 create mode 100644 src/tools/text-to-binary/locales/en.yml
 create mode 100644 src/tools/text-to-binary/locales/zh.yml
 create mode 100644 src/tools/text-to-nato-alphabet/locales/en.yml
 create mode 100644 src/tools/text-to-nato-alphabet/locales/zh.yml
 create mode 100644 src/tools/toml-to-json/locales/en.yml
 create mode 100644 src/tools/toml-to-json/locales/zh.yml
 create mode 100644 src/tools/toml-to-yaml/locales/en.yml
 create mode 100644 src/tools/toml-to-yaml/locales/zh.yml
 create mode 100644 src/tools/yaml-to-json-converter/locales/en.yml
 create mode 100644 src/tools/yaml-to-json-converter/locales/zh.yml
 create mode 100644 src/tools/yaml-to-toml/locales/en.yml
 create mode 100644 src/tools/yaml-to-toml/locales/zh.yml

diff --git a/src/plugins/i18n.plugin.ts b/src/plugins/i18n.plugin.ts
index c179873d..fc0434cc 100644
--- a/src/plugins/i18n.plugin.ts
+++ b/src/plugins/i18n.plugin.ts
@@ -31,7 +31,7 @@ export const i18nPlugin: Plugin = {
   },
 };
 
-export const translate = function (localeKey: string) {
+export const translate = function (localeKey: string, named?: Record<string, unknown>) {
   // @ts-expect-error global
-  return i18n.global.t(localeKey);
+  return i18n.global.t(localeKey, named);
 };
diff --git a/src/tools/base64-file-converter/base64-file-converter.vue b/src/tools/base64-file-converter/base64-file-converter.vue
index 377625bd..248eaf7a 100644
--- a/src/tools/base64-file-converter/base64-file-converter.vue
+++ b/src/tools/base64-file-converter/base64-file-converter.vue
@@ -6,13 +6,15 @@ import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 import { useValidation } from '@/composable/validation';
 import { isValidBase64 } from '@/utils/base64';
 
+const { t } = useI18n();
+
 const base64Input = ref('');
 const { download } = useDownloadFileFromBase64({ source: base64Input });
 const base64InputValidation = useValidation({
   source: base64Input,
   rules: [
     {
-      message: 'Invalid base 64 string',
+      message: t('tools.base64-file-converter.invalidMessage'),
       validator: value => isValidBase64(value.trim()),
     },
   ],
@@ -33,7 +35,7 @@ function downloadFile() {
 
 const fileInput = ref() as Ref<File>;
 const { base64: fileBase64 } = useBase64(fileInput);
-const { copy: copyFileBase64 } = useCopy({ source: fileBase64, text: 'Base64 string copied to the clipboard' });
+const { copy: copyFileBase64 } = useCopy({ source: fileBase64, text: t('tools.base64-file-converter.copied') });
 
 async function onUpload(file: File) {
   if (file) {
@@ -43,11 +45,11 @@ async function onUpload(file: File) {
 </script>
 
 <template>
-  <c-card title="Base64 to file">
+  <c-card :title="t('tools.base64-file-converter.base64ToFile.title')">
     <c-input-text
       v-model:value="base64Input"
       multiline
-      placeholder="Put your base64 file string here..."
+      :placeholder="t('tools.base64-file-converter.base64ToFile.placeholder')"
       rows="5"
       :validation="base64InputValidation"
       mb-2
@@ -55,18 +57,18 @@ async function onUpload(file: File) {
 
     <div flex justify-center>
       <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="downloadFile()">
-        Download file
+        {{ t('tools.base64-file-converter.buttons.downloadFile') }}
       </c-button>
     </div>
   </c-card>
 
-  <c-card title="File to base64">
-    <c-file-upload title="Drag and drop a file here, or click to select a file" @file-upload="onUpload" />
-    <c-input-text :value="fileBase64" multiline readonly placeholder="File in base64 will be here" rows="5" my-2 />
+  <c-card :title="t('tools.base64-file-converter.fileToBase64.title')">
+    <c-file-upload :title="t('tools.base64-file-converter.fileToBase64.uploadTip')" @file-upload="onUpload" />
+    <c-input-text :value="fileBase64" multiline readonly :placeholder="t('tools.base64-file-converter.fileToBase64.placeholder')" rows="5" my-2 />
 
     <div flex justify-center>
       <c-button @click="copyFileBase64()">
-        Copy
+        {{ t('tools.base64-file-converter.buttons.copy') }}
       </c-button>
     </div>
   </c-card>
diff --git a/src/tools/base64-file-converter/index.ts b/src/tools/base64-file-converter/index.ts
index c27e34ed..4d94402b 100644
--- a/src/tools/base64-file-converter/index.ts
+++ b/src/tools/base64-file-converter/index.ts
@@ -1,10 +1,11 @@
 import { FileDigit } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Base64 file converter',
+  name: translate('tools.base64-file-converter.title'),
   path: '/base64-file-converter',
-  description: 'Convert string, files or images into a it\'s base64 representation.',
+  description: translate('tools.base64-file-converter.description'),
   keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
   component: () => import('./base64-file-converter.vue'),
   icon: FileDigit,
diff --git a/src/tools/base64-file-converter/locales/en.yml b/src/tools/base64-file-converter/locales/en.yml
new file mode 100644
index 00000000..c370afa1
--- /dev/null
+++ b/src/tools/base64-file-converter/locales/en.yml
@@ -0,0 +1,18 @@
+tools:
+  base64-file-converter:
+    title: Base64 文件转换器
+    description: 将字符串、文件或图像转换为其 base64 表示形式。
+
+    base64ToFile:
+      title: Base64 转文件
+      placeholder: 在此处放置您的 base64 文件字符串...
+    fileToBase64:
+      title: 文件转 base64
+      placeholder: base64 文件将在此处
+      uploadTip: 拖放文件到此处，或点击选择文件
+    buttons:
+      downloadFile: 下载文件
+      copy: 复制
+
+    copied: 已复制 base64 字符串到剪贴板
+    invalidMessage: 无效的 base 64 字符串
\ No newline at end of file
diff --git a/src/tools/base64-file-converter/locales/zh.yml b/src/tools/base64-file-converter/locales/zh.yml
new file mode 100644
index 00000000..e69de29b
diff --git a/src/tools/base64-string-converter/base64-string-converter.vue b/src/tools/base64-string-converter/base64-string-converter.vue
index 07c4c394..28207514 100644
--- a/src/tools/base64-string-converter/base64-string-converter.vue
+++ b/src/tools/base64-string-converter/base64-string-converter.vue
@@ -6,18 +6,20 @@ import { withDefaultOnError } from '@/utils/defaults';
 const encodeUrlSafe = useStorage('base64-string-converter--encode-url-safe', false);
 const decodeUrlSafe = useStorage('base64-string-converter--decode-url-safe', false);
 
+const { t } = useI18n();
+
 const textInput = ref('');
 const base64Output = computed(() => textToBase64(textInput.value, { makeUrlSafe: encodeUrlSafe.value }));
-const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 string copied to the clipboard' });
+const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: t('tools.base64-string-converter.base64Copied') });
 
 const base64Input = ref('');
 const textOutput = computed(() =>
   withDefaultOnError(() => base64ToText(base64Input.value.trim(), { makeUrlSafe: decodeUrlSafe.value }), ''),
 );
-const { copy: copyText } = useCopy({ source: textOutput, text: 'String copied to the clipboard' });
+const { copy: copyText } = useCopy({ source: textOutput, text: t('tools.base64-string-converter.stringCopied') });
 const b64ValidationRules = [
   {
-    message: 'Invalid base64 string',
+    message: t('tools.base64-string-converter.base64InvalidMessage'),
     validator: (value: string) => isValidBase64(value.trim(), { makeUrlSafe: decodeUrlSafe.value }),
   },
 ];
@@ -25,56 +27,56 @@ const b64ValidationWatch = [decodeUrlSafe];
 </script>
 
 <template>
-  <c-card title="String to base64">
-    <n-form-item label="Encode URL safe" label-placement="left">
+  <c-card :title="t('tools.base64-string-converter.stringToBase64.title')">
+    <n-form-item :label="t('tools.base64-string-converter.stringToBase64.encodeUrl')" label-placement="left">
       <n-switch v-model:value="encodeUrlSafe" />
     </n-form-item>
     <c-input-text
       v-model:value="textInput"
       multiline
-      placeholder="Put your string here..."
+      :placeholder="t('tools.base64-string-converter.stringToBase64.inputPlaceholder')"
       rows="5"
-      label="String to encode"
+      :label="t('tools.base64-string-converter.stringToBase64.inputLabel')"
       raw-text
       mb-5
     />
 
     <c-input-text
-      label="Base64 of string"
+      :label="t('tools.base64-string-converter.stringToBase64.outputLabel')"
       :value="base64Output"
       multiline
       readonly
-      placeholder="The base64 encoding of your string will be here"
+      :placeholder="t('tools.base64-string-converter.stringToBase64.outputPlaceholder')"
       rows="5"
       mb-5
     />
 
     <div flex justify-center>
       <c-button @click="copyTextBase64()">
-        Copy base64
+        {{ t('tools.base64-string-converter.buttons.copyBase64') }}
       </c-button>
     </div>
   </c-card>
 
-  <c-card title="Base64 to string">
-    <n-form-item label="Decode URL safe" label-placement="left">
+  <c-card :title="t('tools.base64-string-converter.base64ToString.title')">
+    <n-form-item :label="t('tools.base64-string-converter.base64ToString.decodeUrl')" label-placement="left">
       <n-switch v-model:value="decodeUrlSafe" />
     </n-form-item>
     <c-input-text
       v-model:value="base64Input"
       multiline
-      placeholder="Your base64 string..."
+      :placeholder="t('tools.base64-string-converter.base64ToString.inputPlaceholder')"
       rows="5"
       :validation-rules="b64ValidationRules"
       :validation-watch="b64ValidationWatch"
-      label="Base64 string to decode"
+      :label="t('tools.base64-string-converter.base64ToString.inputPlaceholder')"
       mb-5
     />
 
     <c-input-text
       v-model:value="textOutput"
-      label="Decoded string"
-      placeholder="The decoded string will be here"
+      :label="t('tools.base64-string-converter.base64ToString.outputLabel')"
+      :placeholder="t('tools.base64-string-converter.base64ToString.outputPlaceholder')"
       multiline
       rows="5"
       readonly
@@ -83,7 +85,7 @@ const b64ValidationWatch = [decodeUrlSafe];
 
     <div flex justify-center>
       <c-button @click="copyText()">
-        Copy decoded string
+        {{ t('tools.base64-string-converter.buttons.copyDecodedString') }}
       </c-button>
     </div>
   </c-card>
diff --git a/src/tools/base64-string-converter/index.ts b/src/tools/base64-string-converter/index.ts
index 0dd9bee2..e51d54df 100644
--- a/src/tools/base64-string-converter/index.ts
+++ b/src/tools/base64-string-converter/index.ts
@@ -1,10 +1,11 @@
 import { FileDigit } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Base64 string encoder/decoder',
+  name: translate('tools.base64-string-converter.title'),
   path: '/base64-string-converter',
-  description: 'Simply encode and decode string into a their base64 representation.',
+  description: translate('tools.base64-string-converter.description'),
   keywords: ['base64', 'converter', 'conversion', 'web', 'data', 'format', 'atob', 'btoa'],
   component: () => import('./base64-string-converter.vue'),
   icon: FileDigit,
diff --git a/src/tools/base64-string-converter/locales/en.yml b/src/tools/base64-string-converter/locales/en.yml
new file mode 100644
index 00000000..d2d48e56
--- /dev/null
+++ b/src/tools/base64-string-converter/locales/en.yml
@@ -0,0 +1,26 @@
+tools:
+  base64-string-converter:
+    title: Base64 string encoder/decoder
+    description: Simply encode and decode string into a their base64 representation.
+
+    stringToBase64:
+      title: String to base64
+      encodeUrl: Encode URL safe
+      inputLabel: String to encode
+      inputPlaceholder: Put your string here...
+      outputLabel: Base64 of string
+      outputPlaceholder: The base64 encoding of your string will be here
+    base64ToString:
+      title: Base64 to string
+      decodeUrl: Decode URL safe
+      inputLabel: Base64 string to decode
+      inputPlaceholder: Your base64 string...
+      outputLabel: Decoded string
+      outputPlaceholder: The decoded string will be here
+    buttons:
+      copyBase64: Copy base64
+      copyDecodedString: Copy decoded string
+
+    base64Copied: Base64 string copied to the clipboard
+    stringCopied: String copied to the clipboard
+    base64InvalidMessage: Invalid base64 string
diff --git a/src/tools/base64-string-converter/locales/zh.yml b/src/tools/base64-string-converter/locales/zh.yml
new file mode 100644
index 00000000..36a51de2
--- /dev/null
+++ b/src/tools/base64-string-converter/locales/zh.yml
@@ -0,0 +1,26 @@
+tools:
+  base64-string-converter:
+    title: Base64 字符串编码器/解码器
+    description: 简单地将字符串编码和解码为它们的 base64 表示形式。
+
+    stringToBase64:
+      title: 字符串转 base64
+      encodeUrl: URL 安全编码
+      inputLabel: 要编码的字符串
+      inputPlaceholder: 在此处放置您的字符串...
+      outputLabel: 字符串的 base64 编码
+      outputPlaceholder: 您的字符串的 base64 编码将在此处
+    base64ToString:
+      title: Base64 转字符串
+      decodeUrl: URL 安全解码
+      inputLabel: 要解码的 base64 字符串
+      inputPlaceholder: 您的 base64 字符串...
+      outputLabel: 解码后的字符串
+      outputPlaceholder: 解码后的字符串将在此处
+    buttons:
+      copyBase64: 复制 base64
+      copyDecodedString: 复制解码后的字符串
+
+    base64Copied: 已复制 base64 字符串到剪贴板
+    stringCopied: 字符串已复制到剪贴板
+    base64InvalidMessage: 无效的 base64 字符串
diff --git a/src/tools/case-converter/case-converter.vue b/src/tools/case-converter/case-converter.vue
index f9343ef1..35808255 100644
--- a/src/tools/case-converter/case-converter.vue
+++ b/src/tools/case-converter/case-converter.vue
@@ -18,63 +18,65 @@ const baseConfig = {
   stripRegexp: /[^A-Za-zÀ-ÖØ-öø-ÿ]+/gi,
 };
 
+const { t } = useI18n();
+
 const input = ref('lorem ipsum dolor sit amet');
 
 const formats = computed(() => [
   {
-    label: 'Lowercase:',
+    label: t('tools.case-converter.lowercase'),
     value: input.value.toLocaleLowerCase(),
   },
   {
-    label: 'Uppercase:',
+    label: t('tools.case-converter.uppercase'),
     value: input.value.toLocaleUpperCase(),
   },
   {
-    label: 'Camelcase:',
+    label: t('tools.case-converter.camelcase'),
     value: camelCase(input.value, baseConfig),
   },
   {
-    label: 'Capitalcase:',
+    label: t('tools.case-converter.capitalcase'),
     value: capitalCase(input.value, baseConfig),
   },
   {
-    label: 'Constantcase:',
+    label: t('tools.case-converter.constantcase'),
     value: constantCase(input.value, baseConfig),
   },
   {
-    label: 'Dotcase:',
+    label: t('tools.case-converter.dotcase'),
     value: dotCase(input.value, baseConfig),
   },
   {
-    label: 'Headercase:',
+    label: t('tools.case-converter.headercase'),
     value: headerCase(input.value, baseConfig),
   },
   {
-    label: 'Nocase:',
+    label: t('tools.case-converter.nocase'),
     value: noCase(input.value, baseConfig),
   },
   {
-    label: 'Paramcase:',
+    label: t('tools.case-converter.paramcase'),
     value: paramCase(input.value, baseConfig),
   },
   {
-    label: 'Pascalcase:',
+    label: t('tools.case-converter.pascalcase'),
     value: pascalCase(input.value, baseConfig),
   },
   {
-    label: 'Pathcase:',
+    label: t('tools.case-converter.pathcase'),
     value: pathCase(input.value, baseConfig),
   },
   {
-    label: 'Sentencecase:',
+    label: t('tools.case-converter.sentencecase'),
     value: sentenceCase(input.value, baseConfig),
   },
   {
-    label: 'Snakecase:',
+    label: t('tools.case-converter.snakecase'),
     value: snakeCase(input.value, baseConfig),
   },
   {
-    label: 'Mockingcase:',
+    label: t('tools.case-converter.mockingcase'),
     value: input.value
       .split('')
       .map((char, index) => (index % 2 === 0 ? char.toUpperCase() : char.toLowerCase()))
@@ -93,8 +95,8 @@ const inputLabelAlignmentConfig = {
   <c-card>
     <c-input-text
       v-model:value="input"
-      label="Your string:"
-      placeholder="Your string..."
+      :label="t('tools.case-converter.inputLabel')"
+      :placeholder="t('tools.case-converter.inputPlaceholder')"
       raw-text
       v-bind="inputLabelAlignmentConfig"
     />
diff --git a/src/tools/case-converter/index.ts b/src/tools/case-converter/index.ts
index 710a03f2..14d7ec12 100644
--- a/src/tools/case-converter/index.ts
+++ b/src/tools/case-converter/index.ts
@@ -1,10 +1,11 @@
 import { LetterCaseToggle } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Case converter',
+  name: translate('tools.case-converter.title'),
   path: '/case-converter',
-  description: 'Change the case of a string and chose between different formats',
+  description: translate('tools.case-converter.description'),
   keywords: [
     'case',
     'converter',
diff --git a/src/tools/case-converter/locales/en.yml b/src/tools/case-converter/locales/en.yml
new file mode 100644
index 00000000..bb098533
--- /dev/null
+++ b/src/tools/case-converter/locales/en.yml
@@ -0,0 +1,22 @@
+tools:
+  case-converter:
+    title: Case converter
+    description: Change the case of a string and chose between different formats
+
+    inputLabel: 'Your string:'
+    inputPlaceholder: Your string...
+
+    lowercase: 'Lowercase:'
+    uppercase: 'Uppercase:'
+    camelcase: 'Camelcase:'
+    capitalcase: 'Capitalcase:'
+    constantcase: 'Constantcase:'
+    dotcase: 'Dotcase:'
+    headercase: 'Headercase:'
+    nocase: 'Nocase:'
+    paramcase: 'Paramcase:'
+    pascalcase: 'Pascalcase:'
+    pathcase: 'Pathcase:'
+    sentencecase: 'Sentencecase:'
+    snakecase: 'Snakecase:'
+    mockingcase: 'Mockingcase:'
diff --git a/src/tools/case-converter/locales/zh.yml b/src/tools/case-converter/locales/zh.yml
new file mode 100644
index 00000000..987a1dc9
--- /dev/null
+++ b/src/tools/case-converter/locales/zh.yml
@@ -0,0 +1,22 @@
+tools:
+  case-converter:
+    title: 大小写转换器
+    description: 更改字符串的大小写，并在不同格式之间进行选择
+
+    inputLabel: '您的字符串：'
+    inputPlaceholder: 您的字符串...
+
+    lowercase: '小写：'
+    uppercase: '大写：'
+    camelcase: '驼峰式：'
+    capitalcase: '首字母大写：'
+    constantcase: '常量式：'
+    dotcase: '点式：'
+    headercase: '标题式：'
+    nocase: '无格式：'
+    paramcase: '参数式：'
+    pascalcase: '帕斯卡式：'
+    pathcase: '路径式：'
+    sentencecase: '句式：'
+    snakecase: '蛇式：'
+    mockingcase: '嘲讽式：'
diff --git a/src/tools/color-converter/color-converter.models.ts b/src/tools/color-converter/color-converter.models.ts
index 030fd074..0dedbecb 100644
--- a/src/tools/color-converter/color-converter.models.ts
+++ b/src/tools/color-converter/color-converter.models.ts
@@ -1,6 +1,7 @@
 import { type Colord, colord } from 'colord';
 import { withDefaultOnError } from '@/utils/defaults';
 import { useValidation } from '@/composable/validation';
+import { translate } from '@/plugins/i18n.plugin';
 
 export { removeAlphaChannelWhenOpaque, buildColorFormat };
 
@@ -13,7 +14,7 @@ function buildColorFormat({
   parse = value => colord(value),
   format,
   placeholder,
-  invalidMessage = `Invalid ${label.toLowerCase()} format.`,
+  invalidMessage = translate('tools.color-converter.invalidMessage', { format: label.toLowerCase() }),
   type = 'text',
 }: {
   label: string
diff --git a/src/tools/color-converter/color-converter.vue b/src/tools/color-converter/color-converter.vue
index a7d6139f..f22a6b66 100644
--- a/src/tools/color-converter/color-converter.vue
+++ b/src/tools/color-converter/color-converter.vue
@@ -10,9 +10,11 @@ import { buildColorFormat } from './color-converter.models';
 
 extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin]);
 
+const { t } = useI18n();
+
 const formats = {
   picker: buildColorFormat({
-    label: 'color picker',
+    label: t('tools.color-converter.colorPicker'),
     format: (v: Colord) => v.toHex(),
     type: 'color-picker',
   }),
@@ -47,7 +49,7 @@ const formats = {
     placeholder: 'e.g. cmyk(0, 100%, 100%, 0)',
   }),
   name: buildColorFormat({
-    label: 'name',
+    label: t('tools.color-converter.name'),
     format: (v: Colord) => v.toName({ closest: true }) ?? 'Unknown',
     placeholder: 'e.g. red',
   }),
diff --git a/src/tools/color-converter/index.ts b/src/tools/color-converter/index.ts
index c82689cc..9a295e2b 100644
--- a/src/tools/color-converter/index.ts
+++ b/src/tools/color-converter/index.ts
@@ -1,10 +1,11 @@
 import { Palette } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Color converter',
+  name: translate('tools.color-converter.title'),
   path: '/color-converter',
-  description: 'Convert color between the different formats (hex, rgb, hsl and css name)',
+  description: translate('tools.color-converter.description'),
   keywords: ['color', 'converter'],
   component: () => import('./color-converter.vue'),
   icon: Palette,
diff --git a/src/tools/color-converter/locales/en.yml b/src/tools/color-converter/locales/en.yml
new file mode 100644
index 00000000..e09322dd
--- /dev/null
+++ b/src/tools/color-converter/locales/en.yml
@@ -0,0 +1,9 @@
+tools:
+  color-converter:
+    title: Color converter
+    description: Convert color between the different formats (hex, rgb, hsl and css name).
+
+    colorPicker: color picker
+    name: name
+
+    invalidMessage: 'Invalid {format} format.' 
diff --git a/src/tools/color-converter/locales/zh.yml b/src/tools/color-converter/locales/zh.yml
new file mode 100644
index 00000000..e754c215
--- /dev/null
+++ b/src/tools/color-converter/locales/zh.yml
@@ -0,0 +1,9 @@
+tools:
+  color-converter:
+    title: 颜色转换器
+    description: 在不同格式之间转换颜色（十六进制、RGB、HSL 和 CSS 名称）。
+
+    colorPicker: 颜色选择器
+    name: 名称
+
+    invalidMessage: '无效的 {format} 格式。'
\ No newline at end of file
diff --git a/src/tools/date-time-converter/date-time-converter.vue b/src/tools/date-time-converter/date-time-converter.vue
index 5636ed46..50ee0241 100644
--- a/src/tools/date-time-converter/date-time-converter.vue
+++ b/src/tools/date-time-converter/date-time-converter.vue
@@ -29,67 +29,69 @@ import {
 import { withDefaultOnError } from '@/utils/defaults';
 import { useValidation } from '@/composable/validation';
 
+const { t } = useI18n();
+
 const inputDate = ref('');
 
 const toDate: ToDateMapper = date => new Date(date);
 
 const formats: DateFormat[] = [
   {
-    name: 'JS locale date string',
+    name: t('tools.date-converter.localDate'),
     fromDate: date => date.toString(),
     toDate,
     formatMatcher: () => false,
   },
   {
-    name: 'ISO 8601',
+    name: t('tools.date-converter.ISO8601'),
     fromDate: formatISO,
     toDate: parseISO,
     formatMatcher: date => isISO8601DateTimeString(date),
   },
   {
-    name: 'ISO 9075',
+    name: t('tools.date-converter.ISO9075'),
     fromDate: formatISO9075,
     toDate: parseISO,
     formatMatcher: date => isISO9075DateString(date),
   },
   {
-    name: 'RFC 3339',
+    name: t('tools.date-converter.RFC3339'),
     fromDate: formatRFC3339,
     toDate,
     formatMatcher: date => isRFC3339DateString(date),
   },
   {
-    name: 'RFC 7231',
+    name: t('tools.date-converter.RFC7231'),
     fromDate: formatRFC7231,
     toDate,
     formatMatcher: date => isRFC7231DateString(date),
   },
   {
-    name: 'Unix timestamp',
+    name: t('tools.date-converter.unixTimestamp'),
     fromDate: date => String(getUnixTime(date)),
     toDate: sec => fromUnixTime(+sec),
     formatMatcher: date => isUnixTimestamp(date),
   },
   {
-    name: 'Timestamp',
+    name: t('tools.date-converter.timestamp'),
     fromDate: date => String(getTime(date)),
     toDate: ms => parseJSON(+ms),
     formatMatcher: date => isTimestamp(date),
   },
   {
-    name: 'UTC format',
+    name: t('tools.date-converter.UTCformat'),
     fromDate: date => date.toUTCString(),
     toDate,
     formatMatcher: date => isUTCDateString(date),
   },
   {
-    name: 'Mongo ObjectID',
+    name: t('tools.date-converter.mongoObjectID'),
     fromDate: date => `${Math.floor(date.getTime() / 1000).toString(16)}0000000000000000`,
     toDate: objectId => new Date(Number.parseInt(objectId.substring(0, 8), 16) * 1000),
     formatMatcher: date => isMongoObjectId(date),
   },
   {
-    name: 'Excel date/time',
+    name: t('tools.date-converter.excelDate'),
     fromDate: date => dateToExcelFormat(date),
     toDate: excelFormatToDate,
     formatMatcher: isExcelFormat,
@@ -126,7 +128,7 @@ const validation = useValidation({
   watch: [formatIndex],
   rules: [
     {
-      message: 'This date is invalid for this format',
+      message: t('tools.date-converter.invalidMessage'),
       validator: value =>
         withDefaultOnError(() => {
           if (value === '') {
@@ -155,7 +157,7 @@ function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date
       <c-input-text
         v-model:value="inputDate"
         autofocus
-        placeholder="Put your date string here..."
+        :placeholder="t('tools.date-converter.inputPlaceholder')"
         clearable
         test-id="date-time-converter-input"
         :validation="validation"
@@ -180,7 +182,7 @@ function formatDateUsingFormatter(formatter: (date: Date) => string, date?: Date
       label-position="left"
       label-align="right"
       :value="formatDateUsingFormatter(fromDate, normalizedDate)"
-      placeholder="Invalid date..."
+      :placeholder="t('tools.date-converter.invalidDatePlaceholder')"
       :test-id="name"
       readonly
       mt-2
diff --git a/src/tools/date-time-converter/index.ts b/src/tools/date-time-converter/index.ts
index 4bc66bf1..b0413fc0 100644
--- a/src/tools/date-time-converter/index.ts
+++ b/src/tools/date-time-converter/index.ts
@@ -1,10 +1,11 @@
 import { Calendar } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Date-time converter',
+  name: translate('tools.date-converter.title'),
   path: '/date-converter',
-  description: 'Convert date and time into the various different formats',
+  description: translate('tools.date-converter.description'),
   keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'month', 'day', 'minute', 'seconde'],
   component: () => import('./date-time-converter.vue'),
   icon: Calendar,
diff --git a/src/tools/date-time-converter/locales/en.yml b/src/tools/date-time-converter/locales/en.yml
new file mode 100644
index 00000000..56e9ad89
--- /dev/null
+++ b/src/tools/date-time-converter/locales/en.yml
@@ -0,0 +1,20 @@
+tools:
+  date-converter:
+    title: Date-time converter
+    description: Convert date and time into the various different formats.
+
+    inputPlaceholder: Put your date string here...
+    invalidDatePlaceholder: Invalid date...
+
+    localDate: JS locale date string
+    ISO8601: ISO 8601
+    ISO9075: ISO 9075
+    RFC3339: RFC 3339
+    RFC7231: RFC 7231
+    unixTimestamp: Unix timestamp
+    timestamp: Timestamp
+    UTCformat: UTC format
+    mongoObjectID: Mongo ObjectID
+    excelDate: Excel date/time
+
+    invalidMessage: This date is invalid for this format
diff --git a/src/tools/date-time-converter/locales/zh.yml b/src/tools/date-time-converter/locales/zh.yml
new file mode 100644
index 00000000..46031012
--- /dev/null
+++ b/src/tools/date-time-converter/locales/zh.yml
@@ -0,0 +1,20 @@
+tools:
+  date-converter:
+    title: 日期时间转换器
+    description: 将日期和时间转换为各种不同的格式。
+
+    inputPlaceholder: 在此处输入日期字符串...
+    invalidDatePlaceholder: 无效的日期...
+
+    localDate: JS 本地日期字符串
+    ISO8601: ISO 8601
+    ISO9075: ISO 9075
+    RFC3339: RFC 3339
+    RFC7231: RFC 7231
+    unixTimestamp: Unix 时间戳
+    timestamp: 时间戳
+    UTCformat: UTC 格式
+    mongoObjectID: Mongo ObjectID
+    excelDate: Excel 日期/时间
+
+    invalidMessage: 该日期不适用于此格式
diff --git a/src/tools/integer-base-converter/index.ts b/src/tools/integer-base-converter/index.ts
index 0008568c..f60d996d 100644
--- a/src/tools/integer-base-converter/index.ts
+++ b/src/tools/integer-base-converter/index.ts
@@ -1,10 +1,11 @@
 import { ArrowsLeftRight } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Integer base converter',
+  name: translate('tools.base-converter.title'),
   path: '/base-converter',
-  description: 'Convert number between different bases (decimal, hexadecimal, binary, octal, base64, ...)',
+  description: translate('tools.base-converter.description'),
   keywords: ['integer', 'number', 'base', 'conversion', 'decimal', 'hexadecimal', 'binary', 'octal', 'base64'],
   component: () => import('./integer-base-converter.vue'),
   icon: ArrowsLeftRight,
diff --git a/src/tools/integer-base-converter/integer-base-converter.model.ts b/src/tools/integer-base-converter/integer-base-converter.model.ts
index b4470e57..1332ad25 100644
--- a/src/tools/integer-base-converter/integer-base-converter.model.ts
+++ b/src/tools/integer-base-converter/integer-base-converter.model.ts
@@ -1,3 +1,5 @@
+import { translate } from '@/plugins/i18n.plugin';
+
 export function convertBase({ value, fromBase, toBase }: { value: string; fromBase: number; toBase: number }) {
   const range = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+/'.split('');
   const fromRange = range.slice(0, fromBase);
@@ -7,7 +9,7 @@ export function convertBase({ value, fromBase, toBase }: { value: string; fromBa
     .reverse()
     .reduce((carry: number, digit: string, index: number) => {
       if (!fromRange.includes(digit)) {
-        throw new Error(`Invalid digit "${digit}" for base ${fromBase}.`);
+        throw new Error(translate('tools.base-converter.invalidMessage', { digit, fromBase }));
       }
       return (carry += fromRange.indexOf(digit) * fromBase ** index);
     }, 0);
diff --git a/src/tools/integer-base-converter/integer-base-converter.vue b/src/tools/integer-base-converter/integer-base-converter.vue
index 2445baa5..378cc414 100644
--- a/src/tools/integer-base-converter/integer-base-converter.vue
+++ b/src/tools/integer-base-converter/integer-base-converter.vue
@@ -11,6 +11,8 @@ const inputProps = {
   'mb-2': '',
 } as const;
 
+const { t } = useI18n();
+
 const input = ref('42');
 const inputBase = ref(10);
 const outputBase = ref(42);
@@ -34,10 +36,10 @@ const error = computed(() =>
 <template>
   <div>
     <c-card>
-      <c-input-text v-model:value="input" label="Input number" placeholder="Put your number here (ex: 42)" label-position="left" label-width="110px" mb-2 label-align="right" />
+      <c-input-text v-model:value="input" :label="t('tools.base-converter.inputLabel')" :placeholder="t('tools.base-converter.inputPlaceholder')" label-position="left" label-width="110px" mb-2 label-align="right" />
 
-      <n-form-item label="Input base" label-placement="left" label-width="110" :show-feedback="false">
-        <n-input-number v-model:value="inputBase" max="64" min="2" placeholder="Put your input base here (ex: 10)" w-full />
+      <n-form-item :label="t('tools.base-converter.inputBaseLabel')" label-placement="left" label-width="110" :show-feedback="false">
+        <n-input-number v-model:value="inputBase" max="64" min="2" :placeholder="t('tools.base-converter.inputBasePlaceholder')" w-full />
       </n-form-item>
 
       <n-alert v-if="error" style="margin-top: 25px" type="error">
@@ -46,43 +48,43 @@ const error = computed(() =>
       <n-divider />
 
       <InputCopyable
-        label="Binary (2)"
+        :label="t('tools.base-converter.binaryLabel')"
         v-bind="inputProps"
         :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 2 })"
-        placeholder="Binary version will be here..."
+        :placeholder="t('tools.base-converter.binaryPlaceholder')"
       />
 
       <InputCopyable
-        label="Octal (8)"
+        :label="t('tools.base-converter.octalLabel')"
         v-bind="inputProps"
         :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 8 })"
-        placeholder="Octal version will be here..."
+        :placeholder="t('tools.base-converter.octalPlaceholder')"
       />
 
       <InputCopyable
-        label="Decimal (10)"
+        :label="t('tools.base-converter.decimalLabel')"
         v-bind="inputProps"
         :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 10 })"
-        placeholder="Decimal version will be here..."
+        :placeholder="t('tools.base-converter.decimalPlaceholder')"
       />
 
       <InputCopyable
-        label="Hexadecimal (16)"
+        :label="t('tools.base-converter.hexadecimalLabel')"
         v-bind="inputProps"
         :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 16 })"
-        placeholder="Hexadecimal version will be here..."
+        :placeholder="t('tools.base-converter.hexadecimalPlaceholder')"
       />
 
       <InputCopyable
-        label="Base64 (64)"
+        :label="t('tools.base-converter.base64Label')"
         v-bind="inputProps"
         :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 64 })"
-        placeholder="Base64 version will be here..."
+        :placeholder="t('tools.base-converter.base64Placeholder')"
       />
 
       <div flex items-baseline>
         <n-input-group style="width: 160px; margin-right: 10px">
-          <n-input-group-label> Custom: </n-input-group-label>
+          <n-input-group-label> {{ t('tools.base-converter.custom') }} </n-input-group-label>
           <n-input-number v-model:value="outputBase" max="64" min="2" />
         </n-input-group>
 
@@ -90,7 +92,7 @@ const error = computed(() =>
           flex-1
           v-bind="inputProps"
           :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: outputBase })"
-          :placeholder="`Base ${outputBase} will be here...`"
+          :placeholder="t('tools.base-converter.copyable', { outputBase })"
         />
       </div>
     </c-card>
diff --git a/src/tools/integer-base-converter/locales/en.yml b/src/tools/integer-base-converter/locales/en.yml
new file mode 100644
index 00000000..d002b3dc
--- /dev/null
+++ b/src/tools/integer-base-converter/locales/en.yml
@@ -0,0 +1,24 @@
+tools:
+  base-converter:
+    title: Integer base converter
+    description: Convert number between different bases (decimal, hexadecimal, binary, octal, base64, ...)
+
+    inputLabel: Input number
+    inputPlaceholder: 'Put your number here (ex: 42)'
+    inputBaseLabel: Input base
+    inputBasePlaceholder: 'Put your input base here (ex: 10)'
+
+    binaryLabel: Binary (2)
+    binaryPlaceholder: Binary version will be here...
+    octalLabel: Octal (8)
+    octalPlaceholder: Octal version will be here...
+    decimalLabel: Decimal (10)
+    decimalPlaceholder: Decimal version will be here...
+    hexadecimalLabel: Hexadecimal (16)
+    hexadecimalPlaceholder: Hexadecimal version will be here...
+    base64Label: Base64 (64)
+    base64Placeholder: Base64 version will be here...
+
+    custom: 'Custom:'
+    copyable: Base {outputBase} will be here...
+    invalidMessage: 'Invalid digit "{digit}" for base {fromBase}.'
diff --git a/src/tools/integer-base-converter/locales/zh.yml b/src/tools/integer-base-converter/locales/zh.yml
new file mode 100644
index 00000000..058495ca
--- /dev/null
+++ b/src/tools/integer-base-converter/locales/zh.yml
@@ -0,0 +1,24 @@
+tools:
+  base-converter:
+    title: 整数进制转换器
+    description: 在不同进制（十进制、十六进制、二进制、八进制、base64 等）之间转换数字
+
+    inputLabel: 输入数字
+    inputPlaceholder: '在此处输入您的数字（例如：42）'
+    inputBaseLabel: 输入进制
+    inputBasePlaceholder: '在此处输入您的输入进制（例如：10）'
+
+    binaryLabel: 二进制（2）
+    binaryPlaceholder: 二进制版本将显示在这里...
+    octalLabel: 八进制（8）
+    octalPlaceholder: 八进制版本将显示在这里...
+    decimalLabel: 十进制（10）
+    decimalPlaceholder: 十进制版本将显示在这里...
+    hexadecimalLabel: 十六进制（16）
+    hexadecimalPlaceholder: 十六进制版本将显示在这里...
+    base64Label: Base64（64）
+    base64Placeholder: Base64版本将显示在这里...
+
+    custom: '自定义：'
+    copyable: 输出进制 {outputBase} 将显示在这里...
+    invalidMessage: '无效的数字 "{digit}"，对于进制 {fromBase}。'
diff --git a/src/tools/json-to-toml/index.ts b/src/tools/json-to-toml/index.ts
index 13e45eaf..da42c18d 100644
--- a/src/tools/json-to-toml/index.ts
+++ b/src/tools/json-to-toml/index.ts
@@ -1,10 +1,11 @@
 import { Braces } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'JSON to TOML',
+  name: translate('tools.json-to-toml.title'),
   path: '/json-to-toml',
-  description: 'Parse and convert JSON to TOML.',
+  description: translate('tools.json-to-toml.description'),
   keywords: ['json', 'parse', 'toml', 'convert', 'transform'],
   component: () => import('./json-to-toml.vue'),
   icon: Braces,
diff --git a/src/tools/json-to-toml/json-to-toml.vue b/src/tools/json-to-toml/json-to-toml.vue
index b1d37a38..aa13da47 100644
--- a/src/tools/json-to-toml/json-to-toml.vue
+++ b/src/tools/json-to-toml/json-to-toml.vue
@@ -4,6 +4,8 @@ import JSON5 from 'json5';
 import { withDefaultOnError } from '../../utils/defaults';
 import type { UseValidationRule } from '@/composable/validation';
 
+const { t } = useI18n();
+
 const convertJsonToToml = (value: string) => [stringifyToml(JSON5.parse(value))].flat().join('\n').trim();
 
 const transformer = (value: string) => value.trim() === '' ? '' : withDefaultOnError(() => convertJsonToToml(value), '');
@@ -11,16 +13,16 @@ const transformer = (value: string) => value.trim() === '' ? '' : withDefaultOnE
 const rules: UseValidationRule<string>[] = [
   {
     validator: (v: string) => v === '' || JSON5.parse(v),
-    message: 'Provided JSON is not valid.',
+    message: t('tools.json-to-toml.invalidMessage'),
   },
 ];
 </script>
 
 <template>
   <format-transformer
-    input-label="Your JSON"
-    input-placeholder="Paste your JSON here..."
-    output-label="TOML from your JSON"
+    :input-label="t('tools.json-to-toml.inputLabel')"
+    :input-placeholder="t('tools.json-to-toml.inputPlaceholder')"
+    :output-label="t('tools.json-to-toml.outputLabel')"
     output-language="toml"
     :input-validation-rules="rules"
     :transformer="transformer"
diff --git a/src/tools/json-to-toml/locales/en.yml b/src/tools/json-to-toml/locales/en.yml
new file mode 100644
index 00000000..34fce62d
--- /dev/null
+++ b/src/tools/json-to-toml/locales/en.yml
@@ -0,0 +1,10 @@
+tools:
+  json-to-toml:
+    title: JSON to TOML
+    description: Parse and convert JSON to TOML.
+
+    inputLabel: Your JSON
+    inputPlaceholder: Paste your JSON here...
+    outputLabel: TOML from your JSON
+
+    invalidMessage: Provided JSON is not valid.
diff --git a/src/tools/json-to-toml/locales/zh.yml b/src/tools/json-to-toml/locales/zh.yml
new file mode 100644
index 00000000..8d85a5a3
--- /dev/null
+++ b/src/tools/json-to-toml/locales/zh.yml
@@ -0,0 +1,10 @@
+tools:
+  json-to-toml:
+    title: JSON 转 TOML
+    description: 解析并转换 JSON 到 TOML.
+
+    inputLabel: 您的 JSON
+    inputPlaceholder: 在这里粘贴您的 JSON...
+    outputLabel: 从您的 JSON 得到的 TOML
+
+    invalidMessage: 提供的 JSON 不合法。
diff --git a/src/tools/json-to-yaml-converter/index.ts b/src/tools/json-to-yaml-converter/index.ts
index 9db09d3e..c01e3ec0 100644
--- a/src/tools/json-to-yaml-converter/index.ts
+++ b/src/tools/json-to-yaml-converter/index.ts
@@ -1,10 +1,11 @@
 import { Braces } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'JSON to YAML converter',
+  name: translate('tools.json-to-yaml-converter.title'),
   path: '/json-to-yaml-converter',
-  description: 'Simply convert JSON to YAML with this live online converter.',
+  description: translate('tools.json-to-yaml-converter.description'),
   keywords: ['yaml', 'to', 'json'],
   component: () => import('./json-to-yaml.vue'),
   icon: Braces,
diff --git a/src/tools/json-to-yaml-converter/json-to-yaml.vue b/src/tools/json-to-yaml-converter/json-to-yaml.vue
index cbaeb22d..389fd883 100644
--- a/src/tools/json-to-yaml-converter/json-to-yaml.vue
+++ b/src/tools/json-to-yaml-converter/json-to-yaml.vue
@@ -5,21 +5,23 @@ import type { UseValidationRule } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
 
+const { t } = useI18n();
+
 const transformer = (value: string) => withDefaultOnError(() => stringify(JSON5.parse(value)), '');
 
 const rules: UseValidationRule<string>[] = [
   {
     validator: (value: string) => value === '' || isNotThrowing(() => stringify(JSON5.parse(value))),
-    message: 'Provided JSON is not valid.',
+    message: t('tools.json-to-yaml-converter.invalidMessage'),
   },
 ];
 </script>
 
 <template>
   <format-transformer
-    input-label="Your JSON"
-    input-placeholder="Paste your JSON here..."
-    output-label="YAML from your JSON"
+    :input-label="t('tools.json-to-yaml-converter.inputLabel')"
+    :input-placeholder="t('tools.json-to-yaml-converter.inputPlaceholder')"
+    :output-label="t('tools.json-to-yaml-converter.outputLabel')"
     output-language="yaml"
     :input-validation-rules="rules"
     :transformer="transformer"
diff --git a/src/tools/json-to-yaml-converter/locales/en.yml b/src/tools/json-to-yaml-converter/locales/en.yml
new file mode 100644
index 00000000..3750ef3b
--- /dev/null
+++ b/src/tools/json-to-yaml-converter/locales/en.yml
@@ -0,0 +1,10 @@
+tools:
+  json-to-yaml-converter:
+    title: JSON to YAML converter
+    description: Simply convert JSON to YAML with this live online converter.
+
+    inputLabel: Your JSON
+    inputPlaceholder: Paste your JSON here...
+    outputLabel: YAML from your JSON
+
+    invalidMessage: Provided JSON is not valid.
diff --git a/src/tools/json-to-yaml-converter/locales/zh.yml b/src/tools/json-to-yaml-converter/locales/zh.yml
new file mode 100644
index 00000000..78479a03
--- /dev/null
+++ b/src/tools/json-to-yaml-converter/locales/zh.yml
@@ -0,0 +1,10 @@
+tools:
+  json-to-yaml-converter:
+    title: JSON 转 YAML
+    description: 解析并转换 JSON 到 YAML.
+
+    inputLabel: 您的 JSON
+    inputPlaceholder: 在这里粘贴您的 JSON...
+    outputLabel: 从您的 JSON 得到的 YAML
+
+    invalidMessage: 提供的 JSON 不合法。
diff --git a/src/tools/list-converter/index.ts b/src/tools/list-converter/index.ts
index cf9fbd39..9ae7c512 100644
--- a/src/tools/list-converter/index.ts
+++ b/src/tools/list-converter/index.ts
@@ -1,11 +1,11 @@
 import { List } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'List converter',
+  name: translate('tools.list-converter.title'),
   path: '/list-converter',
-  description:
-    'This tool can process column-based data and apply various changes (transpose, add prefix and suffix, reverse list, sort list, lowercase values, truncate values) to each row.',
+  description: translate('tools.list-converter.description'),
   keywords: ['list', 'converter', 'sort', 'reverse', 'prefix', 'suffix', 'lowercase', 'truncate'],
   component: () => import('./list-converter.vue'),
   icon: List,
diff --git a/src/tools/list-converter/list-converter.vue b/src/tools/list-converter/list-converter.vue
index 19dd30e5..8fb09312 100644
--- a/src/tools/list-converter/list-converter.vue
+++ b/src/tools/list-converter/list-converter.vue
@@ -3,14 +3,16 @@ import { useStorage } from '@vueuse/core';
 import { convert } from './list-converter.models';
 import type { ConvertOptions } from './list-converter.types';
 
+const { t } = useI18n();
+
 const sortOrderOptions = [
   {
-    label: 'Sort ascending',
+    label: t('tools.list-converter.sortOrder.asc'),
     value: 'asc',
     disabled: false,
   },
   {
-    label: 'Sort descending',
+    label: t('tools.list-converter.sortOrder.desc'),
     value: 'desc',
     disabled: false,
   },
@@ -41,14 +43,14 @@ function transformer(value: string) {
       <c-card>
         <div flex>
           <div>
-            <n-form-item label="Trim list items" label-placement="left" label-width="150" :show-feedback="false" mb-2>
+            <n-form-item :label="t('tools.list-converter.trimListItems')" label-placement="left" label-width="150" :show-feedback="false" mb-2>
               <n-switch v-model:value="conversionConfig.trimItems" />
             </n-form-item>
-            <n-form-item label="Remove duplicates" label-placement="left" label-width="150" :show-feedback="false" mb-2>
+            <n-form-item :label="t('tools.list-converter.removeDuplicates')" label-placement="left" label-width="150" :show-feedback="false" mb-2>
               <n-switch v-model:value="conversionConfig.removeDuplicates" data-test-id="removeDuplicates" />
             </n-form-item>
             <n-form-item
-              label="Convert to lowercase"
+              :label="t('tools.list-converter.convertToLowercase')"
               label-placement="left"
               label-width="150"
               :show-feedback="false"
@@ -56,14 +58,14 @@ function transformer(value: string) {
             >
               <n-switch v-model:value="conversionConfig.lowerCase" />
             </n-form-item>
-            <n-form-item label="Keep line breaks" label-placement="left" label-width="150" :show-feedback="false" mb-2>
+            <n-form-item :label="t('tools.list-converter.keepLineBreaks')" label-placement="left" label-width="150" :show-feedback="false" mb-2>
               <n-switch v-model:value="conversionConfig.keepLineBreaks" />
             </n-form-item>
           </div>
           <div flex-1>
             <c-select
               v-model:value="conversionConfig.sortList"
-              label="Sort list"
+              :label="t('tools.list-converter.sortListLabel')"
               label-position="left"
               label-width="120px"
               label-align="right"
@@ -72,40 +74,40 @@ function transformer(value: string) {
               w-full
               :disabled="conversionConfig.reverseList"
               data-test-id="sortList"
-              placeholder="Sort alphabetically"
+              :placeholder="t('tools.list-converter.sortListPlaceholder')"
             />
 
             <c-input-text
               v-model:value="conversionConfig.separator"
-              label="Separator"
+              :label="t('tools.list-converter.separatorLabel')"
               label-position="left"
               label-width="120px"
               label-align="right"
               mb-2
-              placeholder=","
+              :placeholder="t('tools.list-converter.separatorPlaceholder')"
             />
 
-            <n-form-item label="Wrap item" label-placement="left" label-width="120" :show-feedback="false" mb-2>
+            <n-form-item :label="t('tools.list-converter.wrapItem')" label-placement="left" label-width="120" :show-feedback="false" mb-2>
               <c-input-text
                 v-model:value="conversionConfig.itemPrefix"
-                placeholder="Item prefix"
+                :placeholder="t('tools.list-converter.itemPrefix')"
                 test-id="itemPrefix"
               />
               <c-input-text
                 v-model:value="conversionConfig.itemSuffix"
-                placeholder="Item suffix"
+                :placeholder="t('tools.list-converter.itemSuffix')"
                 test-id="itemSuffix"
               />
             </n-form-item>
             <n-form-item label="Wrap list" label-placement="left" label-width="120" :show-feedback="false" mb-2>
               <c-input-text
                 v-model:value="conversionConfig.listPrefix"
-                placeholder="List prefix"
+                :placeholder="t('tools.list-converter.listPrefix')"
                 test-id="listPrefix"
               />
               <c-input-text
                 v-model:value="conversionConfig.listSuffix"
-                placeholder="List suffix"
+                :placeholder="t('tools.list-converter.listSuffix')"
                 test-id="listSuffix"
               />
             </n-form-item>
@@ -115,9 +117,9 @@ function transformer(value: string) {
     </div>
   </div>
   <format-transformer
-    input-label="Your input data"
-    input-placeholder="Paste your input data here..."
-    output-label="Your transformed data"
+    :input-label="t('tools.list-converter.inputLabel')"
+    :input-placeholder="t('tools.list-converter.inputPlaceholder')"
+    :output-label="t('tools.list-converter.outputLabel')"
     :transformer="transformer"
   />
 </template>
diff --git a/src/tools/list-converter/locales/en.yml b/src/tools/list-converter/locales/en.yml
new file mode 100644
index 00000000..2d0e40a8
--- /dev/null
+++ b/src/tools/list-converter/locales/en.yml
@@ -0,0 +1,28 @@
+tools:
+  list-converter:
+    title: List converter
+    description: This tool can process column-based data and apply various changes (transpose, add prefix and suffix, reverse list, sort list, lowercase values, truncate values) to each row.
+
+    trimListItems: Trim list items
+    removeDuplicates: Remove duplicates
+    convertToLowercase: Convert to lowercase
+    keepLineBreaks: Keep line breaks
+
+    sortListLabel: Sort list
+    sortListPlaceholder: Sort alphabetically
+    separatorLabel: Separator
+    separatorPlaceholder: ','
+    wrapItem: Wrap item
+    itemPrefix: Item prefix
+    itemSuffix: Item suffix
+    wrapList: Wrap list
+    listPrefix: List prefix
+    listSuffix: List suffix
+
+    inputLabel: Your input data
+    inputPlaceholder: Paste your input data here...
+    outputLabel: Your transformed data
+
+    sortOrder:
+      asc: Sort ascending
+      desc: Sort descending
diff --git a/src/tools/list-converter/locales/zh.yml b/src/tools/list-converter/locales/zh.yml
new file mode 100644
index 00000000..5e2ae7fa
--- /dev/null
+++ b/src/tools/list-converter/locales/zh.yml
@@ -0,0 +1,28 @@
+tools:
+  list-converter:
+    title: 列表转换器
+    description: 该工具可以处理基于列的数据，并对每一行应用各种更改（转置、添加前缀和后缀、反转列表、排序列表、小写值、截断值）。
+
+    trimListItems: 裁剪列表项
+    removeDuplicates: 删除重复项
+    convertToLowercase: 转换为小写
+    keepLineBreaks: 保留换行符
+
+    sortListLabel: 排序列表
+    sortListPlaceholder: 按字母顺序排序
+    separatorLabel: 分隔符
+    separatorPlaceholder: ','
+    wrapItem: 包装条目
+    itemPrefix: 条目前缀
+    itemSuffix: 条目后缀
+    wrapList: 包装列表
+    listPrefix: 列表前缀
+    listSuffix: 列表后缀
+
+    inputLabel: 您的输入数据
+    inputPlaceholder: 在此处粘贴您的输入数据...
+    outputLabel: 您的转换后的数据
+
+    sortOrder:
+      asc: 升序排序
+      desc: 降序排序
diff --git a/src/tools/roman-numeral-converter/index.ts b/src/tools/roman-numeral-converter/index.ts
index f2dbdc0a..6929747f 100644
--- a/src/tools/roman-numeral-converter/index.ts
+++ b/src/tools/roman-numeral-converter/index.ts
@@ -1,10 +1,11 @@
 import { LetterX } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Roman numeral converter',
+  name: translate('tools.roman-numeral-converter.title'),
   path: '/roman-numeral-converter',
-  description: 'Convert Roman numerals to numbers and convert numbers to Roman numerals.',
+  description: translate('tools.roman-numeral-converter.description'),
   keywords: ['roman', 'arabic', 'converter', 'X', 'I', 'V', 'L', 'C', 'D', 'M'],
   component: () => import('./roman-numeral-converter.vue'),
   icon: LetterX,
diff --git a/src/tools/roman-numeral-converter/locales/en.yml b/src/tools/roman-numeral-converter/locales/en.yml
new file mode 100644
index 00000000..1a875050
--- /dev/null
+++ b/src/tools/roman-numeral-converter/locales/en.yml
@@ -0,0 +1,13 @@
+tools:
+  roman-numeral-converter:
+    title: Roman numeral converter
+    description: Convert Roman numerals to numbers and convert numbers to Roman numerals.
+
+    arabicToRoman: Arabic to roman
+    romanToArabic: Roman to arabic
+    copy: Copy
+
+    validationNumeral: We can only convert numbers between {min} and {max}
+    validationRoman: The input you entered is not a valid roman number
+    copyRoman: Roman number copied to the clipboard
+    copyArabic: Arabic number copied to the clipboard
diff --git a/src/tools/roman-numeral-converter/locales/zh.yml b/src/tools/roman-numeral-converter/locales/zh.yml
new file mode 100644
index 00000000..386458a6
--- /dev/null
+++ b/src/tools/roman-numeral-converter/locales/zh.yml
@@ -0,0 +1,13 @@
+tools:
+  roman-numeral-converter:
+    title: 罗马数字转换器
+    description: 将罗马数字转换为阿拉伯数字，以及将阿拉伯数字转换为罗马数字。
+
+    arabicToRoman: 阿拉伯数字转罗马数字
+    romanToArabic: 罗马数字转阿拉伯数字
+    copy: 复制
+
+    validationNumeral: 我们只能转换 {min} 到 {max} 之间的数字
+    validationRoman: 您输入的内容不是有效的罗马数字
+    copyRoman: 罗马数字已复制到剪贴板
+    copyArabic: 阿拉伯数字已复制到剪贴板
diff --git a/src/tools/roman-numeral-converter/roman-numeral-converter.vue b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
index 498c340c..d377e830 100644
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
@@ -9,6 +9,8 @@ import {
 import { useCopy } from '@/composable/copy';
 import { useValidation } from '@/composable/validation';
 
+const { t } = useI18n();
+
 const inputNumeral = ref(42);
 const outputRoman = computed(() => arabicToRoman(inputNumeral.value));
 
@@ -17,7 +19,7 @@ const { attrs: validationNumeral } = useValidation({
   rules: [
     {
       validator: value => value >= MIN_ARABIC_TO_ROMAN && value <= MAX_ARABIC_TO_ROMAN,
-      message: `We can only convert numbers between ${MIN_ARABIC_TO_ROMAN.toLocaleString()} and ${MAX_ARABIC_TO_ROMAN.toLocaleString()}`,
+      message: t('tools.roman-numeral-converter.validationNumeral', { min: MIN_ARABIC_TO_ROMAN.toLocaleString(), max: MAX_ARABIC_TO_ROMAN.toLocaleString() }),
     },
   ],
 });
@@ -30,18 +32,18 @@ const validationRoman = useValidation({
   rules: [
     {
       validator: value => isValidRomanNumber(value),
-      message: 'The input you entered is not a valid roman number',
+      message: t('tools.roman-numeral-converter.validationRoman'),
     },
   ],
 });
 
-const { copy: copyRoman } = useCopy({ source: outputRoman, text: 'Roman number copied to the clipboard' });
-const { copy: copyArabic } = useCopy({ source: () => String(outputNumeral), text: 'Arabic number copied to the clipboard' });
+const { copy: copyRoman } = useCopy({ source: outputRoman, text: t('tools.roman-numeral-converter.copyRoman') });
+const { copy: copyArabic } = useCopy({ source: () => String(outputNumeral), text: t('tools.roman-numeral-converter.copyArabic') });
 </script>
 
 <template>
   <div>
-    <c-card title="Arabic to roman">
+    <c-card :title="t('tools.roman-numeral-converter.arabicToRoman')">
       <div flex items-center justify-between>
         <n-form-item v-bind="validationNumeral as any">
           <n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
@@ -50,11 +52,11 @@ const { copy: copyArabic } = useCopy({ source: () => String(outputNumeral), text
           {{ outputRoman }}
         </div>
         <c-button autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman()">
-          Copy
+          {{ t('tools.roman-numeral-converter.copy') }}
         </c-button>
       </div>
     </c-card>
-    <c-card title="Roman to arabic" mt-5>
+    <c-card :title="t('tools.roman-numeral-converter.romanToArabic')" mt-5>
       <div flex items-center justify-between>
         <c-input-text v-model:value="inputRoman" style="width: 200px" :validation="validationRoman" />
 
@@ -62,7 +64,7 @@ const { copy: copyArabic } = useCopy({ source: () => String(outputNumeral), text
           {{ outputNumeral }}
         </div>
         <c-button :disabled="!validationRoman.isValid" @click="copyArabic()">
-          Copy
+          {{ t('tools.roman-numeral-converter.copy') }}
         </c-button>
       </div>
     </c-card>
diff --git a/src/tools/text-to-binary/index.ts b/src/tools/text-to-binary/index.ts
index 40ac93d6..ce0f87ea 100644
--- a/src/tools/text-to-binary/index.ts
+++ b/src/tools/text-to-binary/index.ts
@@ -1,10 +1,11 @@
 import { Binary } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Text to ASCII binary',
+  name: translate('tools.text-to-binary.title'),
   path: '/text-to-binary',
-  description: 'Convert text to its ASCII binary representation and vice versa.',
+  description: translate('tools.text-to-binary.description'),
   keywords: ['text', 'to', 'binary', 'converter', 'encode', 'decode', 'ascii'],
   component: () => import('./text-to-binary.vue'),
   icon: Binary,
diff --git a/src/tools/text-to-binary/locales/en.yml b/src/tools/text-to-binary/locales/en.yml
new file mode 100644
index 00000000..845088fb
--- /dev/null
+++ b/src/tools/text-to-binary/locales/en.yml
@@ -0,0 +1,22 @@
+tools:
+  text-to-binary:
+    title: Text to ASCII binary
+    description: Convert text to its ASCII binary representation and vice versa.
+
+    textToBinary:
+      title: Text to ASCII binary
+      inputLabel: Enter text to convert to binary
+      inputPlaceholder: e.g. "Hello world"
+      outputLabel: Binary from your text
+      outputPlaceholder: The binary representation of your text will be here
+      copyBinary: Copy binary to clipboard
+    binaryToText:
+      title: ASCII binary to text
+      inputLabel: Enter binary to convert to text
+      inputPlaceholder: e.g. "01001000 01100101 01101100 01101100 01101111"
+      outputLabel: Text from your binary
+      outputPlaceholder: The text representation of your binary will be here
+      copyText: Copy text to clipboard
+
+    invalidMessage: Binary should be a valid ASCII binary string with multiples of 8 bits
+    invalidBinaryString: Invalid binary string
diff --git a/src/tools/text-to-binary/locales/zh.yml b/src/tools/text-to-binary/locales/zh.yml
new file mode 100644
index 00000000..936407e8
--- /dev/null
+++ b/src/tools/text-to-binary/locales/zh.yml
@@ -0,0 +1,22 @@
+tools:
+  text-to-binary:
+    title: 文本转 ASCII 二进制
+    description: 将文本转换为其 ASCII 二进制表示，反之亦然。
+
+    textToBinary:
+      title: 文本转 ASCII 二进制
+      inputLabel: 输入要转换为二进制的文本
+      inputPlaceholder: 例如 "Hello world"
+      outputLabel: 您的文本的二进制
+      outputPlaceholder: 您的文本的二进制表示将显示在这里
+      copyBinary: 复制二进制到剪贴板
+    binaryToText:
+      title: ASCII 二进制转文本
+      inputLabel: 输入要转换为文本的二进制
+      inputPlaceholder: 例如 "01001000 01100101 01101100 01101100 01101111"
+      outputLabel: 您的二进制的文本
+      outputPlaceholder: 您的二进制的文本表示将显示在这里
+      copyText: 复制文本到剪贴板
+
+    invalidMessage: 二进制应为有效的 ASCII 二进制字符串，且位数为 8 的倍数
+    invalidBinaryString: 无效的二进制字符串
diff --git a/src/tools/text-to-binary/text-to-binary.models.ts b/src/tools/text-to-binary/text-to-binary.models.ts
index ad9699af..8b7cf35d 100644
--- a/src/tools/text-to-binary/text-to-binary.models.ts
+++ b/src/tools/text-to-binary/text-to-binary.models.ts
@@ -1,3 +1,5 @@
+import { translate } from '@/plugins/i18n.plugin';
+
 export { convertTextToAsciiBinary, convertAsciiBinaryToText };
 
 function convertTextToAsciiBinary(text: string, { separator = ' ' }: { separator?: string } = {}): string {
@@ -11,7 +13,7 @@ function convertAsciiBinaryToText(binary: string): string {
   const cleanBinary = binary.replace(/[^01]/g, '');
 
   if (cleanBinary.length % 8) {
-    throw new Error('Invalid binary string');
+    throw new Error(translate('tools.text-to-binary.invalidBinaryString'));
   }
 
   return cleanBinary
diff --git a/src/tools/text-to-binary/text-to-binary.vue b/src/tools/text-to-binary/text-to-binary.vue
index 37aa9bea..6b081a34 100644
--- a/src/tools/text-to-binary/text-to-binary.vue
+++ b/src/tools/text-to-binary/text-to-binary.vue
@@ -4,6 +4,8 @@ import { withDefaultOnError } from '@/utils/defaults';
 import { useCopy } from '@/composable/copy';
 import { isNotThrowing } from '@/utils/boolean';
 
+const { t } = useI18n();
+
 const inputText = ref('');
 const binaryFromText = computed(() => convertTextToAsciiBinary(inputText.value));
 const { copy: copyBinary } = useCopy({ source: binaryFromText });
@@ -13,29 +15,29 @@ const textFromBinary = computed(() => withDefaultOnError(() => convertAsciiBinar
 const inputBinaryValidationRules = [
   {
     validator: (value: string) => isNotThrowing(() => convertAsciiBinaryToText(value)),
-    message: 'Binary should be a valid ASCII binary string with multiples of 8 bits',
+    message: t('tools.text-to-binary.invalidMessage'),
   },
 ];
 const { copy: copyText } = useCopy({ source: textFromBinary });
 </script>
 
 <template>
-  <c-card title="Text to ASCII binary">
-    <c-input-text v-model:value="inputText" multiline placeholder="e.g. 'Hello world'" label="Enter text to convert to binary" autosize autofocus raw-text test-id="text-to-binary-input" />
-    <c-input-text v-model:value="binaryFromText" label="Binary from your text" multiline raw-text readonly mt-2 placeholder="The binary representation of your text will be here" test-id="text-to-binary-output" />
+  <c-card :title="t('tools.text-to-binary.textToBinary.title')">
+    <c-input-text v-model:value="inputText" multiline :placeholder="t('tools.text-to-binary.textToBinary.inputPlaceholder')" label="t('tools.text-to-binary.textToBinary.inputLabel')" autosize autofocus raw-text test-id="text-to-binary-input" />
+    <c-input-text v-model:value="binaryFromText" :label="t('tools.text-to-binary.textToBinary.outputLabel')" multiline raw-text readonly mt-2 :placeholder="t('tools.text-to-binary.textToBinary.outputPlaceholder')" test-id="text-to-binary-output" />
     <div mt-2 flex justify-center>
       <c-button :disabled="!binaryFromText" @click="copyBinary()">
-        Copy binary to clipboard
+        {{ t('tools.text-to-binary.textToBinary.copyBinary') }}
       </c-button>
     </div>
   </c-card>
 
-  <c-card title="ASCII binary to text">
-    <c-input-text v-model:value="inputBinary" multiline placeholder="e.g. '01001000 01100101 01101100 01101100 01101111'" label="Enter binary to convert to text" autosize raw-text :validation-rules="inputBinaryValidationRules" test-id="binary-to-text-input" />
-    <c-input-text v-model:value="textFromBinary" label="Text from your binary" multiline raw-text readonly mt-2 placeholder="The text representation of your binary will be here" test-id="binary-to-text-output" />
+  <c-card :title="t('tools.text-to-binary.binaryToText.title')">
+    <c-input-text v-model:value="inputBinary" multiline :placeholder="t('tools.text-to-binary.binaryToText.inputPlaceholder')" :label="t('tools.text-to-binary.binaryToText.inputLabel')" autosize raw-text :validation-rules="inputBinaryValidationRules" test-id="binary-to-text-input" />
+    <c-input-text v-model:value="textFromBinary" :label="t('tools.text-to-binary.binaryToText.outputLabel')" multiline raw-text readonly mt-2 :placeholder="t('tools.text-to-binary.binaryToText.outputPlaceholder')" test-id="binary-to-text-output" />
     <div mt-2 flex justify-center>
       <c-button :disabled="!textFromBinary" @click="copyText()">
-        Copy text to clipboard
+        {{ t('tools.text-to-binary.binaryToText.copyText') }}
       </c-button>
     </div>
   </c-card>
diff --git a/src/tools/text-to-nato-alphabet/index.ts b/src/tools/text-to-nato-alphabet/index.ts
index 100476a0..43b72fb4 100644
--- a/src/tools/text-to-nato-alphabet/index.ts
+++ b/src/tools/text-to-nato-alphabet/index.ts
@@ -1,10 +1,11 @@
 import { Speakerphone } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Text to NATO alphabet',
+  name: translate('tools.text-to-nato-alphabet.title'),
   path: '/text-to-nato-alphabet',
-  description: 'Transform text into NATO phonetic alphabet for oral transmission.',
+  description: translate('tools.text-to-nato-alphabet.description'),
   keywords: ['string', 'nato', 'alphabet', 'phonetic', 'oral', 'transmission'],
   component: () => import('./text-to-nato-alphabet.vue'),
   icon: Speakerphone,
diff --git a/src/tools/text-to-nato-alphabet/locales/en.yml b/src/tools/text-to-nato-alphabet/locales/en.yml
new file mode 100644
index 00000000..5a46e8a6
--- /dev/null
+++ b/src/tools/text-to-nato-alphabet/locales/en.yml
@@ -0,0 +1,11 @@
+tools:
+  text-to-nato-alphabet:
+    title: Text to NATO alphabet
+    description: Transform text into NATO phonetic alphabet for oral transmission.
+
+    inputLabel: Your text to convert to NATO phonetic alphabet
+    inputPlaceholder: Put your text here...
+    outputLabel: Your text in NATO phonetic alphabet
+    copy: Copy NATO string
+
+    copied: NATO alphabet string copied.
diff --git a/src/tools/text-to-nato-alphabet/locales/zh.yml b/src/tools/text-to-nato-alphabet/locales/zh.yml
new file mode 100644
index 00000000..a036813f
--- /dev/null
+++ b/src/tools/text-to-nato-alphabet/locales/zh.yml
@@ -0,0 +1,11 @@
+tools:
+  text-to-nato-alphabet:
+    title: 文本转换为北约音标字母
+    description: 将文本转换为北约音标字母，用于口头传输。
+
+    inputLabel: 要转换为北约音标字母的文本
+    inputPlaceholder: 在这里输入您的文本...
+    outputLabel: 北约音标字母文本
+    copy: 复制北约字符串
+
+    copied: 已复制北约音标字母字符串。
diff --git a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
index 76abbc49..4fb24f3d 100644
--- a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
+++ b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
@@ -2,24 +2,26 @@
 import { textToNatoAlphabet } from './text-to-nato-alphabet.service';
 import { useCopy } from '@/composable/copy';
 
+const { t } = useI18n();
+
 const input = ref('');
 const natoText = computed(() => textToNatoAlphabet({ text: input.value }));
-const { copy } = useCopy({ source: natoText, text: 'NATO alphabet string copied.' });
+const { copy } = useCopy({ source: natoText, text: t('tools.text-to-nato-alphabet.copied') });
 </script>
 
 <template>
   <div>
     <c-input-text
       v-model:value="input"
-      label="Your text to convert to NATO phonetic alphabet"
-      placeholder="Put your text here..."
+      :label="t('tools.text-to-nato-alphabet.inputLabel')"
+      :placeholder="t('tools.text-to-nato-alphabet.inputPlaceholder')"
       clearable
       mb-5
     />
 
     <div v-if="natoText">
       <div mb-2>
-        Your text in NATO phonetic alphabet
+        {{ t('tools.text-to-nato-alphabet.outputLabel') }}
       </div>
       <c-card>
         {{ natoText }}
@@ -27,7 +29,7 @@ const { copy } = useCopy({ source: natoText, text: 'NATO alphabet string copied.
 
       <div mt-3 flex justify-center>
         <c-button autofocus @click="copy()">
-          Copy NATO string
+          {{ t('tools.text-to-nato-alphabet.copy') }}
         </c-button>
       </div>
     </div>
diff --git a/src/tools/toml-to-json/index.ts b/src/tools/toml-to-json/index.ts
index 653b432f..77a1b26e 100644
--- a/src/tools/toml-to-json/index.ts
+++ b/src/tools/toml-to-json/index.ts
@@ -1,11 +1,12 @@
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 import BracketIcon from '~icons/mdi/code-brackets';
 
 export const tool = defineTool({
-  name: 'TOML to JSON',
+  name: translate('tools.toml-to-json.title'),
   path: '/toml-to-json',
-  description: 'Parse and convert TOML to JSON.',
+  description: translate('tools.toml-to-json.description'),
   keywords: ['toml', 'json', 'convert', 'online', 'transform', 'parser'],
   component: () => import('./toml-to-json.vue'),
   icon: BracketIcon,
diff --git a/src/tools/toml-to-json/locales/en.yml b/src/tools/toml-to-json/locales/en.yml
new file mode 100644
index 00000000..2ff644f0
--- /dev/null
+++ b/src/tools/toml-to-json/locales/en.yml
@@ -0,0 +1,10 @@
+tools:
+  toml-to-json:
+    title: TOML to JSON
+    description: Parse and convert TOML to JSON.
+
+    inputLabel: Your TOML
+    inputPlaceholder: Paste your TOML here...
+    outputLabel: JSON from your TOML
+
+    inValidMessage: Provided TOML is not valid.
diff --git a/src/tools/toml-to-json/locales/zh.yml b/src/tools/toml-to-json/locales/zh.yml
new file mode 100644
index 00000000..826ab94e
--- /dev/null
+++ b/src/tools/toml-to-json/locales/zh.yml
@@ -0,0 +1,10 @@
+tools:
+  toml-to-json:
+    title: TOML 转 JSON
+    description: 解析并转换 TOML 到 JSON。
+
+    inputLabel: 您的 TOML
+    inputPlaceholder: 在这里粘贴您的 TOML...
+    outputLabel: 从您的 TOML 得到的 JSON
+
+    inValidMessage: 提供的 TOML 不合法。
diff --git a/src/tools/toml-to-json/toml-to-json.vue b/src/tools/toml-to-json/toml-to-json.vue
index 8c6dbfe2..12283c58 100644
--- a/src/tools/toml-to-json/toml-to-json.vue
+++ b/src/tools/toml-to-json/toml-to-json.vue
@@ -4,21 +4,23 @@ import { withDefaultOnError } from '../../utils/defaults';
 import { isValidToml } from './toml.services';
 import type { UseValidationRule } from '@/composable/validation';
 
+const { t } = useI18n();
+
 const transformer = (value: string) => value === '' ? '' : withDefaultOnError(() => JSON.stringify(parseToml(value), null, 3), '');
 
 const rules: UseValidationRule<string>[] = [
   {
     validator: isValidToml,
-    message: 'Provided TOML is not valid.',
+    message: t('tools.toml-to-json.inValidMessage'),
   },
 ];
 </script>
 
 <template>
   <format-transformer
-    input-label="Your TOML"
-    input-placeholder="Paste your TOML here..."
-    output-label="JSON from your TOML"
+    :input-label="t('tools.toml-to-json.inputLabel')"
+    :input-placeholder="t('tools.toml-to-json.inputPlaceholder')"
+    :output-label="t('tools.toml-to-json.outputLabel')"
     output-language="json"
     :input-validation-rules="rules"
     :transformer="transformer"
diff --git a/src/tools/toml-to-yaml/index.ts b/src/tools/toml-to-yaml/index.ts
index 69f9459c..c71cf687 100644
--- a/src/tools/toml-to-yaml/index.ts
+++ b/src/tools/toml-to-yaml/index.ts
@@ -1,10 +1,12 @@
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
+
 import BracketIcon from '~icons/mdi/code-brackets';
 
 export const tool = defineTool({
-  name: 'TOML to YAML',
+  name: translate('tools.toml-to-yaml.title'),
   path: '/toml-to-yaml',
-  description: 'Parse and convert TOML to YAML.',
+  description: translate('tools.toml-to-yaml.description'),
   keywords: ['toml', 'yaml', 'convert', 'online', 'transform', 'parse'],
   component: () => import('./toml-to-yaml.vue'),
   icon: BracketIcon,
diff --git a/src/tools/toml-to-yaml/locales/en.yml b/src/tools/toml-to-yaml/locales/en.yml
new file mode 100644
index 00000000..37efe52d
--- /dev/null
+++ b/src/tools/toml-to-yaml/locales/en.yml
@@ -0,0 +1,10 @@
+tools:
+  toml-to-yaml:
+    title: TOML to YAML
+    description: Parse and convert TOML to YAML.
+
+    inputLabel: Your TOML
+    inputPlaceholder: Paste your TOML here...
+    outputLabel: YAML from your TOML
+
+    inValidMessage: Provided TOML is not valid.
diff --git a/src/tools/toml-to-yaml/locales/zh.yml b/src/tools/toml-to-yaml/locales/zh.yml
new file mode 100644
index 00000000..35c4cd22
--- /dev/null
+++ b/src/tools/toml-to-yaml/locales/zh.yml
@@ -0,0 +1,10 @@
+tools:
+  toml-to-yaml:
+    title: TOML 转 YAML
+    description: 解析并转换 TOML 到 YAML。
+
+    inputLabel: 您的 TOML
+    inputPlaceholder: 在这里粘贴您的 TOML...
+    outputLabel: 从您的 TOML 得到的 YAML
+
+    inValidMessage: 提供的 TOML 不合法。
\ No newline at end of file
diff --git a/src/tools/toml-to-yaml/toml-to-yaml.vue b/src/tools/toml-to-yaml/toml-to-yaml.vue
index ec4e0158..e55982ca 100644
--- a/src/tools/toml-to-yaml/toml-to-yaml.vue
+++ b/src/tools/toml-to-yaml/toml-to-yaml.vue
@@ -5,21 +5,23 @@ import { withDefaultOnError } from '../../utils/defaults';
 import { isValidToml } from '../toml-to-json/toml.services';
 import type { UseValidationRule } from '@/composable/validation';
 
+const { t } = useI18n();
+
 const transformer = (value: string) => value.trim() === '' ? '' : withDefaultOnError(() => stringifyToYaml(parseToml(value)), '');
 
 const rules: UseValidationRule<string>[] = [
   {
     validator: isValidToml,
-    message: 'Provided TOML is not valid.',
+    message: t('tools.toml-to-yaml.inValidMessage'),
   },
 ];
 </script>
 
 <template>
   <format-transformer
-    input-label="Your TOML"
-    input-placeholder="Paste your TOML here..."
-    output-label="YAML from your TOML"
+    :input-label="t('tools.toml-to-yaml.inputLabel')"
+    :input-placeholder="t('tools.toml-to-yaml.inputPlaceholder')"
+    :output-label="t('tools.toml-to-yaml.outputLabel')"
     output-language="yaml"
     :input-validation-rules="rules"
     :transformer="transformer"
diff --git a/src/tools/yaml-to-json-converter/index.ts b/src/tools/yaml-to-json-converter/index.ts
index 724ecdb7..60110f09 100644
--- a/src/tools/yaml-to-json-converter/index.ts
+++ b/src/tools/yaml-to-json-converter/index.ts
@@ -1,10 +1,11 @@
 import { AlignJustified } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'YAML to JSON converter',
+  name: translate('tools.yaml-to-json-converter.title'),
   path: '/yaml-to-json-converter',
-  description: 'Simply convert YAML to JSON with this live online converter.',
+  description: translate('tools.yaml-to-json-converter.description'),
   keywords: ['yaml', 'to', 'json'],
   component: () => import('./yaml-to-json.vue'),
   icon: AlignJustified,
diff --git a/src/tools/yaml-to-json-converter/locales/en.yml b/src/tools/yaml-to-json-converter/locales/en.yml
new file mode 100644
index 00000000..142f51a3
--- /dev/null
+++ b/src/tools/yaml-to-json-converter/locales/en.yml
@@ -0,0 +1,10 @@
+tools:
+  yaml-to-json-converter:
+    title: YAML to JSON converter
+    description: Simply convert YAML to JSON with this live online converter.
+
+    inputLabel: Your YAML
+    inputPlaceholder: Paste your YAML here...
+    outputLabel: JSON from your YAML
+
+    inValidMessage: Provided YAML is not valid.
diff --git a/src/tools/yaml-to-json-converter/locales/zh.yml b/src/tools/yaml-to-json-converter/locales/zh.yml
new file mode 100644
index 00000000..bbe5589b
--- /dev/null
+++ b/src/tools/yaml-to-json-converter/locales/zh.yml
@@ -0,0 +1,10 @@
+tools:
+  yaml-to-json-converter:
+    title: YAML 转 JSON
+    description: 解析并转换 YAML 到 JSON。
+
+    inputLabel: 您的 YAML
+    inputPlaceholder: 在这里粘贴你的 YAML...
+    outputLabel: 从您的 YAML 得到的 JSON
+
+    inValidMessage: 提供的 YAML 不合法。
\ No newline at end of file
diff --git a/src/tools/yaml-to-json-converter/yaml-to-json.vue b/src/tools/yaml-to-json-converter/yaml-to-json.vue
index 39c9297f..5ab4f98e 100644
--- a/src/tools/yaml-to-json-converter/yaml-to-json.vue
+++ b/src/tools/yaml-to-json-converter/yaml-to-json.vue
@@ -4,6 +4,8 @@ import type { UseValidationRule } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
 
+const { t } = useI18n();
+
 function transformer(value: string) {
   return withDefaultOnError(() => {
     const obj = parseYaml(value);
@@ -14,16 +16,16 @@ function transformer(value: string) {
 const rules: UseValidationRule<string>[] = [
   {
     validator: (value: string) => isNotThrowing(() => parseYaml(value)),
-    message: 'Provided YAML is not valid.',
+    message: t('tools.yaml-to-json-converter.inValidMessage'),
   },
 ];
 </script>
 
 <template>
   <format-transformer
-    input-label="Your YAML"
-    input-placeholder="Paste your yaml here..."
-    output-label="JSON from your YAML"
+    :input-label="t('tools.yaml-to-json-converter.inputLabel')"
+    :input-placeholder="t('tools.yaml-to-json-converter.inputPlaceholder')"
+    :output-label="t('tools.yaml-to-json-converter.outputLabel')"
     output-language="json"
     :input-validation-rules="rules"
     :transformer="transformer"
diff --git a/src/tools/yaml-to-toml/index.ts b/src/tools/yaml-to-toml/index.ts
index b6a7077f..d90370ec 100644
--- a/src/tools/yaml-to-toml/index.ts
+++ b/src/tools/yaml-to-toml/index.ts
@@ -1,10 +1,11 @@
 import { AlignJustified } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'YAML to TOML',
+  name: translate('tools.yaml-to-toml.title'),
   path: '/yaml-to-toml',
-  description: 'Parse and convert YAML to TOML.',
+  description: translate('tools.yaml-to-toml.title'),
   keywords: ['yaml', 'to', 'toml', 'convert', 'transform'],
   component: () => import('./yaml-to-toml.vue'),
   icon: AlignJustified,
diff --git a/src/tools/yaml-to-toml/locales/en.yml b/src/tools/yaml-to-toml/locales/en.yml
new file mode 100644
index 00000000..640f3846
--- /dev/null
+++ b/src/tools/yaml-to-toml/locales/en.yml
@@ -0,0 +1,11 @@
+tools:
+  yaml-to-toml:
+    title: YAML to TOML
+    description: Parse and convert YAML to TOML.
+
+    inputLabel: Your YAML
+    inputPlaceholder: Paste your YAML here...
+    outputLabel: TOML from your YAML
+
+    inValidMessage: Provided YAML is not valid.
+
diff --git a/src/tools/yaml-to-toml/locales/zh.yml b/src/tools/yaml-to-toml/locales/zh.yml
new file mode 100644
index 00000000..adfee51a
--- /dev/null
+++ b/src/tools/yaml-to-toml/locales/zh.yml
@@ -0,0 +1,10 @@
+tools:
+  yaml-to-toml:
+    title: YAML 转 TOML
+    description: 解析并转换 YAML 到 TOML。
+
+    inputLabel: 您的 YAML
+    inputPlaceholder: 在这里粘贴您的 YAML...
+    outputLabel: 从您的 YAML 得到的 TOML
+
+    inValidMessage: 提供的 YAML 不合法。
diff --git a/src/tools/yaml-to-toml/yaml-to-toml.vue b/src/tools/yaml-to-toml/yaml-to-toml.vue
index cad72e6b..81618a8a 100644
--- a/src/tools/yaml-to-toml/yaml-to-toml.vue
+++ b/src/tools/yaml-to-toml/yaml-to-toml.vue
@@ -4,6 +4,8 @@ import { parse as parseYaml } from 'yaml';
 import { withDefaultOnError } from '../../utils/defaults';
 import type { UseValidationRule } from '@/composable/validation';
 
+const { t } = useI18n();
+
 const convertYamlToToml = (value: string) => [stringifyToml(parseYaml(value))].flat().join('\n').trim();
 
 const transformer = (value: string) => value.trim() === '' ? '' : withDefaultOnError(() => convertYamlToToml(value), '');
@@ -11,16 +13,16 @@ const transformer = (value: string) => value.trim() === '' ? '' : withDefaultOnE
 const rules: UseValidationRule<string>[] = [
   {
     validator: (v: string) => v === '' || parseYaml(v),
-    message: 'Provided JSON is not valid.',
+    message: t('tools.yaml-to-toml.inValidMessage'),
   },
 ];
 </script>
 
 <template>
   <format-transformer
-    input-label="Your YAML"
-    input-placeholder="Paste your YAML here..."
-    output-label="TOML from your YAML"
+    :input-label="t('tools.yaml-to-toml.inputLabel')"
+    :input-placeholder="t('tools.yaml-to-toml.inputPlaceholder')"
+    :output-label="t('tools.yaml-to-toml.outputLabel')"
     output-language="toml"
     :input-validation-rules="rules"
     :transformer="transformer"

From c6583ef013173adeb99f8d5ee277b69ae4121d18 Mon Sep 17 00:00:00 2001
From: Amery2010 <amery@xiangfa.org>
Date: Wed, 10 Jan 2024 23:15:39 +0800
Subject: [PATCH 4/8] WIP(translate): Completed some page translation under web
 category

---
 src/layouts/tool.layout.vue                   |   9 +-
 src/tools/base64-file-converter/index.ts      |   6 +-
 .../base64-file-converter/locales/en.yml      |  22 +-
 .../base64-file-converter/locales/zh.yml      |  18 ++
 src/tools/base64-string-converter/index.ts    |   6 +-
 .../basic-auth-generator.vue                  |  13 +-
 src/tools/basic-auth-generator/index.ts       |   5 +-
 src/tools/basic-auth-generator/locales/en.yml |  15 ++
 src/tools/basic-auth-generator/locales/zh.yml |  15 ++
 src/tools/bcrypt/index.ts                     |   6 +-
 src/tools/bip39-generator/index.ts            |   6 +-
 src/tools/case-converter/index.ts             |   6 +-
 .../color-converter/color-converter.models.ts |   4 +-
 src/tools/color-converter/index.ts            |   6 +-
 src/tools/date-time-converter/index.ts        |   6 +-
 .../device-information/device-information.vue |  25 +--
 src/tools/device-information/index.ts         |   5 +-
 src/tools/device-information/locales/en.yml   |  17 ++
 src/tools/device-information/locales/zh.yml   |  17 ++
 src/tools/encryption/index.ts                 |   6 +-
 src/tools/hash-text/index.ts                  |   6 +-
 src/tools/hmac-generator/index.ts             |   6 +-
 src/tools/html-entities/html-entities.vue     |  25 +--
 src/tools/html-entities/index.ts              |   5 +-
 src/tools/html-entities/locales/en.yml        |  19 ++
 src/tools/html-entities/locales/zh.yml        |  19 ++
 src/tools/html-wysiwyg-editor/locales/en.yml  |   4 +
 src/tools/http-status-codes/locales/en.yml    |   4 +
 src/tools/index.ts                            |   2 +-
 src/tools/integer-base-converter/index.ts     |   6 +-
 .../integer-base-converter.model.ts           |   4 +-
 src/tools/json-diff/locales/en.yml            |   4 +
 src/tools/json-to-toml/index.ts               |   6 +-
 src/tools/json-to-yaml-converter/index.ts     |   6 +-
 src/tools/jwt-parser/index.ts                 |   5 +-
 src/tools/jwt-parser/locales/en.yml           |   4 +
 src/tools/keycode-info/locales/en.yml         |   4 +
 src/tools/list-converter/index.ts             |   6 +-
 src/tools/meta-tag-generator/index.ts         |   5 +-
 src/tools/meta-tag-generator/locales/en.yml   | 199 ++++++++++++++++++
 src/tools/meta-tag-generator/locales/zh.yml   | 199 ++++++++++++++++++
 .../meta-tag-generator/meta-tag-generator.vue |   4 +-
 .../meta-tag-generator/og-schemas/article.ts  |  35 +--
 .../meta-tag-generator/og-schemas/book.ts     |  13 +-
 .../meta-tag-generator/og-schemas/image.ts    |  19 +-
 .../og-schemas/musicAlbum.ts                  |  19 +-
 .../og-schemas/musicPlaylist.ts               |  15 +-
 .../og-schemas/musicRadioStation.ts           |   5 +-
 .../og-schemas/musicSong.ts                   |  17 +-
 .../meta-tag-generator/og-schemas/profile.ts  |  15 +-
 .../meta-tag-generator/og-schemas/twitter.ts  |  23 +-
 .../og-schemas/videoEpisode.ts                |   5 +-
 .../og-schemas/videoMovie.ts                  |  23 +-
 .../og-schemas/videoOther.ts                  |   3 +-
 .../og-schemas/videoTVShow.ts                 |   3 +-
 .../meta-tag-generator/og-schemas/website.ts  |  45 ++--
 src/tools/mime-types/index.ts                 |   5 +-
 src/tools/mime-types/locales/en.yml           |  23 ++
 src/tools/mime-types/locales/zh.yml           |  23 ++
 src/tools/mime-types/mime-types.vue           |  28 +--
 .../otp-code-generator-and-validator/index.ts |   5 +-
 .../locales/en.yml                            |  30 +++
 .../locales/zh.yml                            |  30 +++
 .../otp-code-generator-and-validator.vue      |  41 ++--
 .../token-display.vue                         |  11 +-
 src/tools/password-strength-analyser/index.ts |   6 +-
 .../password-strength-analyser.service.ts     |  26 +--
 src/tools/pdf-signature-checker/index.ts      |   6 +-
 src/tools/roman-numeral-converter/index.ts    |   6 +-
 src/tools/rsa-key-pair-generator/index.ts     |   6 +-
 src/tools/slugify-string/locales/en.yml       |   4 +
 src/tools/text-to-binary/index.ts             |   6 +-
 .../text-to-binary/text-to-binary.models.ts   |   4 +-
 src/tools/text-to-nato-alphabet/index.ts      |   6 +-
 src/tools/token-generator/index.ts            |   6 +-
 src/tools/toml-to-json/index.ts               |   6 +-
 src/tools/toml-to-yaml/index.ts               |   6 +-
 src/tools/ulid-generator/index.ts             |   6 +-
 src/tools/url-encoder/index.ts                |   5 +-
 src/tools/url-encoder/locales/en.yml          |  23 ++
 src/tools/url-encoder/locales/zh.yml          |  23 ++
 src/tools/url-encoder/url-encoder.vue         |  34 +--
 src/tools/url-parser/index.ts                 |   6 +-
 src/tools/url-parser/locales/en.yml           |  17 ++
 src/tools/url-parser/locales/zh.yml           |  17 ++
 src/tools/url-parser/url-parser.vue           |  21 +-
 src/tools/user-agent-parser/locales/en.yml    |   4 +
 src/tools/uuid-generator/index.ts             |   6 +-
 src/tools/yaml-to-json-converter/index.ts     |   6 +-
 src/tools/yaml-to-toml/index.ts               |   6 +-
 90 files changed, 1112 insertions(+), 341 deletions(-)
 create mode 100644 src/tools/basic-auth-generator/locales/en.yml
 create mode 100644 src/tools/basic-auth-generator/locales/zh.yml
 create mode 100644 src/tools/device-information/locales/en.yml
 create mode 100644 src/tools/device-information/locales/zh.yml
 create mode 100644 src/tools/html-entities/locales/en.yml
 create mode 100644 src/tools/html-entities/locales/zh.yml
 create mode 100644 src/tools/html-wysiwyg-editor/locales/en.yml
 create mode 100644 src/tools/http-status-codes/locales/en.yml
 create mode 100644 src/tools/json-diff/locales/en.yml
 create mode 100644 src/tools/jwt-parser/locales/en.yml
 create mode 100644 src/tools/keycode-info/locales/en.yml
 create mode 100644 src/tools/meta-tag-generator/locales/en.yml
 create mode 100644 src/tools/meta-tag-generator/locales/zh.yml
 create mode 100644 src/tools/mime-types/locales/en.yml
 create mode 100644 src/tools/mime-types/locales/zh.yml
 create mode 100644 src/tools/otp-code-generator-and-validator/locales/en.yml
 create mode 100644 src/tools/otp-code-generator-and-validator/locales/zh.yml
 create mode 100644 src/tools/slugify-string/locales/en.yml
 create mode 100644 src/tools/url-encoder/locales/en.yml
 create mode 100644 src/tools/url-encoder/locales/zh.yml
 create mode 100644 src/tools/url-parser/locales/en.yml
 create mode 100644 src/tools/url-parser/locales/zh.yml
 create mode 100644 src/tools/user-agent-parser/locales/en.yml

diff --git a/src/layouts/tool.layout.vue b/src/layouts/tool.layout.vue
index aa808f1c..f3813fb2 100644
--- a/src/layouts/tool.layout.vue
+++ b/src/layouts/tool.layout.vue
@@ -7,14 +7,17 @@ import BaseLayout from './base.layout.vue';
 import FavoriteButton from '@/components/FavoriteButton.vue';
 import type { Tool } from '@/tools/tools.types';
 
+const { t } = useI18n();
+
 const route = useRoute();
+const i18nKey = computed<string>(() => route.path.trim().replace('/', ''));
 
 const head = computed<HeadObject>(() => ({
-  title: `${route.meta.name} - IT Tools`,
+  title: `${t(`tools.${i18nKey.value}.title`)} - IT Tools`,
   meta: [
     {
       name: 'description',
-      content: route.meta?.description as string,
+      content: t(`tools.${i18nKey.value}.description`),
     },
     {
       name: 'keywords',
@@ -23,9 +26,7 @@ const head = computed<HeadObject>(() => ({
   ],
 }));
 useHead(head);
-const { t } = useI18n();
 
-const i18nKey = computed<string>(() => route.path.trim().replace('/', ''));
 const toolTitle = computed<string>(() => t(`tools.${i18nKey.value}.title`, String(route.meta.name)));
 const toolDescription = computed<string>(() => t(`tools.${i18nKey.value}.description`, String(route.meta.description)));
 </script>
diff --git a/src/tools/base64-file-converter/index.ts b/src/tools/base64-file-converter/index.ts
index 4d94402b..d4ee5396 100644
--- a/src/tools/base64-file-converter/index.ts
+++ b/src/tools/base64-file-converter/index.ts
@@ -1,11 +1,11 @@
 import { FileDigit } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.base64-file-converter.title'),
+  name: t('tools.base64-file-converter.title'),
   path: '/base64-file-converter',
-  description: translate('tools.base64-file-converter.description'),
+  description: t('tools.base64-file-converter.description'),
   keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
   component: () => import('./base64-file-converter.vue'),
   icon: FileDigit,
diff --git a/src/tools/base64-file-converter/locales/en.yml b/src/tools/base64-file-converter/locales/en.yml
index c370afa1..c29c44da 100644
--- a/src/tools/base64-file-converter/locales/en.yml
+++ b/src/tools/base64-file-converter/locales/en.yml
@@ -1,18 +1,18 @@
 tools:
   base64-file-converter:
-    title: Base64 文件转换器
-    description: 将字符串、文件或图像转换为其 base64 表示形式。
+    title: Base64 file converter
+    description: Convert string, files or images into a it's base64 representation.
 
     base64ToFile:
-      title: Base64 转文件
-      placeholder: 在此处放置您的 base64 文件字符串...
+      title: Base64 to file
+      placeholder: Put your base64 file string here...
     fileToBase64:
-      title: 文件转 base64
-      placeholder: base64 文件将在此处
-      uploadTip: 拖放文件到此处，或点击选择文件
+      title: File to base64
+      placeholder: File in base64 will be here
+      uploadTip: Drag and drop a file here, or click to select a file
     buttons:
-      downloadFile: 下载文件
-      copy: 复制
+      downloadFile: Download file
+      copy: Copy
 
-    copied: 已复制 base64 字符串到剪贴板
-    invalidMessage: 无效的 base 64 字符串
\ No newline at end of file
+    copied: Base64 string copied to the clipboard
+    invalidMessage: Invalid base 64 string
\ No newline at end of file
diff --git a/src/tools/base64-file-converter/locales/zh.yml b/src/tools/base64-file-converter/locales/zh.yml
index e69de29b..d0269fd8 100644
--- a/src/tools/base64-file-converter/locales/zh.yml
+++ b/src/tools/base64-file-converter/locales/zh.yml
@@ -0,0 +1,18 @@
+tools:
+  base64-file-converter:
+    title: Base64 文件转换器
+    description: 将字符串、文件或图像转换为其 base64 表示形式。
+
+    base64ToFile:
+      title: Base64 转文件
+      placeholder: 在此处放置您的 base64 文件字符串...
+    fileToBase64:
+      title: 文件转 base64
+      placeholder: base64 文件将在此处
+      uploadTip: 拖放文件到此处，或点击选择文件
+    buttons:
+      downloadFile: 下载文件
+      copy: 复制
+
+    copied: 已复制 base64 字符串到剪贴板
+    invalidMessage: 无效的 base 64 字符串
diff --git a/src/tools/base64-string-converter/index.ts b/src/tools/base64-string-converter/index.ts
index e51d54df..63cfadeb 100644
--- a/src/tools/base64-string-converter/index.ts
+++ b/src/tools/base64-string-converter/index.ts
@@ -1,11 +1,11 @@
 import { FileDigit } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.base64-string-converter.title'),
+  name: t('tools.base64-string-converter.title'),
   path: '/base64-string-converter',
-  description: translate('tools.base64-string-converter.description'),
+  description: t('tools.base64-string-converter.description'),
   keywords: ['base64', 'converter', 'conversion', 'web', 'data', 'format', 'atob', 'btoa'],
   component: () => import('./base64-string-converter.vue'),
   icon: FileDigit,
diff --git a/src/tools/basic-auth-generator/basic-auth-generator.vue b/src/tools/basic-auth-generator/basic-auth-generator.vue
index a8946127..14fcfe23 100644
--- a/src/tools/basic-auth-generator/basic-auth-generator.vue
+++ b/src/tools/basic-auth-generator/basic-auth-generator.vue
@@ -2,20 +2,21 @@
 import { useCopy } from '@/composable/copy';
 import { textToBase64 } from '@/utils/base64';
 
+const { t } = useI18n();
 const username = ref('');
 const password = ref('');
 const header = computed(() => `Authorization: Basic ${textToBase64(`${username.value}:${password.value}`)}`);
 
-const { copy } = useCopy({ source: header, text: 'Header copied to the clipboard' });
+const { copy } = useCopy({ source: header, text: t('tools.basic-auth-generator.copied') });
 </script>
 
 <template>
   <div>
-    <c-input-text v-model:value="username" label="Username" placeholder="Your username..." clearable raw-text mb-5 />
+    <c-input-text v-model:value="username" :label="t('tools.basic-auth-generator.username.inputLabel')" :placeholder="t('tools.basic-auth-generator.username.inputPlaceholder')" clearable raw-text mb-5 />
     <c-input-text
       v-model:value="password"
-      label="Password"
-      placeholder="Your password..."
+      :label="t('tools.basic-auth-generator.password.inputLabel')"
+      :placeholder="t('tools.basic-auth-generator.password.inputPlaceholder')"
       clearable
       raw-text
       mb-2
@@ -23,7 +24,7 @@ const { copy } = useCopy({ source: header, text: 'Header copied to the clipboard
     />
 
     <c-card>
-      <n-statistic label="Authorization header:" class="header">
+      <n-statistic :label="t('tools.basic-auth-generator.outputTitle')" class="header">
         <n-scrollbar x-scrollable style="max-width: 550px; margin-bottom: -10px; padding-bottom: 10px" trigger="none">
           {{ header }}
         </n-scrollbar>
@@ -31,7 +32,7 @@ const { copy } = useCopy({ source: header, text: 'Header copied to the clipboard
     </c-card>
     <div mt-5 flex justify-center>
       <c-button @click="copy()">
-        Copy header
+        {{ t('tools.basic-auth-generator.copyHeader') }}
       </c-button>
     </div>
   </div>
diff --git a/src/tools/basic-auth-generator/index.ts b/src/tools/basic-auth-generator/index.ts
index 3138b504..06af9a7d 100644
--- a/src/tools/basic-auth-generator/index.ts
+++ b/src/tools/basic-auth-generator/index.ts
@@ -1,10 +1,11 @@
 import { PasswordRound } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Basic auth generator',
+  name: t('tools.basic-auth-generator.title'),
   path: '/basic-auth-generator',
-  description: 'Generate a base64 basic auth header from an username and a password.',
+  description: t('tools.basic-auth-generator.description'),
   keywords: [
     'basic',
     'auth',
diff --git a/src/tools/basic-auth-generator/locales/en.yml b/src/tools/basic-auth-generator/locales/en.yml
new file mode 100644
index 00000000..1669cd3e
--- /dev/null
+++ b/src/tools/basic-auth-generator/locales/en.yml
@@ -0,0 +1,15 @@
+tools:
+  basic-auth-generator:
+    title: Basic auth generator
+    description: Generate a base64 basic auth header from an username and a password.
+
+    username:
+      inputLabel: Username
+      inputPlaceholder: Your username...
+    password:
+      inputLabel: Password
+      inputPlaceholder: Your password...
+    outputTitle: 'Authorization header:'
+    copyHeader: Copy header
+
+    copied: Header copied to the clipboard
diff --git a/src/tools/basic-auth-generator/locales/zh.yml b/src/tools/basic-auth-generator/locales/zh.yml
new file mode 100644
index 00000000..a7a79cde
--- /dev/null
+++ b/src/tools/basic-auth-generator/locales/zh.yml
@@ -0,0 +1,15 @@
+tools:
+  basic-auth-generator:
+    title: Basic auth 生成器
+    description: 从用户名和密码生成一个 base64 基本授权头。
+
+    username:
+      inputLabel: 用户名
+      inputPlaceholder: 您的用户名...
+    password:
+      inputLabel: 密码
+      inputPlaceholder: 您的密码...
+    outputTitle: '授权头:'
+    copyHeader: 复制授权头
+
+    copied: 授权头已复制到剪贴板
diff --git a/src/tools/bcrypt/index.ts b/src/tools/bcrypt/index.ts
index 9c80c694..ed77522c 100644
--- a/src/tools/bcrypt/index.ts
+++ b/src/tools/bcrypt/index.ts
@@ -1,11 +1,11 @@
 import { LockSquare } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.bcrypt.title'),
+  name: t('tools.bcrypt.title'),
   path: '/bcrypt',
-  description: translate('tools.bcrypt.description'),
+  description: t('tools.bcrypt.description'),
   keywords: ['bcrypt', 'hash', 'compare', 'password', 'salt', 'round', 'storage', 'crypto'],
   component: () => import('./bcrypt.vue'),
   icon: LockSquare,
diff --git a/src/tools/bip39-generator/index.ts b/src/tools/bip39-generator/index.ts
index 40582da4..c51cce93 100644
--- a/src/tools/bip39-generator/index.ts
+++ b/src/tools/bip39-generator/index.ts
@@ -1,11 +1,11 @@
 import { AlignJustified } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.bip39-generator.title'),
+  name: t('tools.bip39-generator.title'),
   path: '/bip39-generator',
-  description: translate('tools.bip39-generator.description'),
+  description: t('tools.bip39-generator.description'),
   keywords: ['BIP39', 'passphrase', 'generator', 'mnemonic', 'entropy'],
   component: () => import('./bip39-generator.vue'),
   icon: AlignJustified,
diff --git a/src/tools/case-converter/index.ts b/src/tools/case-converter/index.ts
index 14d7ec12..15e9b85b 100644
--- a/src/tools/case-converter/index.ts
+++ b/src/tools/case-converter/index.ts
@@ -1,11 +1,11 @@
 import { LetterCaseToggle } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.case-converter.title'),
+  name: t('tools.case-converter.title'),
   path: '/case-converter',
-  description: translate('tools.case-converter.description'),
+  description: t('tools.case-converter.description'),
   keywords: [
     'case',
     'converter',
diff --git a/src/tools/color-converter/color-converter.models.ts b/src/tools/color-converter/color-converter.models.ts
index 0dedbecb..7a7761f2 100644
--- a/src/tools/color-converter/color-converter.models.ts
+++ b/src/tools/color-converter/color-converter.models.ts
@@ -1,7 +1,7 @@
 import { type Colord, colord } from 'colord';
 import { withDefaultOnError } from '@/utils/defaults';
 import { useValidation } from '@/composable/validation';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export { removeAlphaChannelWhenOpaque, buildColorFormat };
 
@@ -14,7 +14,7 @@ function buildColorFormat({
   parse = value => colord(value),
   format,
   placeholder,
-  invalidMessage = translate('tools.color-converter.invalidMessage', { format: label.toLowerCase() }),
+  invalidMessage = t('tools.color-converter.invalidMessage', { format: label.toLowerCase() }),
   type = 'text',
 }: {
   label: string
diff --git a/src/tools/color-converter/index.ts b/src/tools/color-converter/index.ts
index 9a295e2b..04d1dd2d 100644
--- a/src/tools/color-converter/index.ts
+++ b/src/tools/color-converter/index.ts
@@ -1,11 +1,11 @@
 import { Palette } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.color-converter.title'),
+  name: t('tools.color-converter.title'),
   path: '/color-converter',
-  description: translate('tools.color-converter.description'),
+  description: t('tools.color-converter.description'),
   keywords: ['color', 'converter'],
   component: () => import('./color-converter.vue'),
   icon: Palette,
diff --git a/src/tools/date-time-converter/index.ts b/src/tools/date-time-converter/index.ts
index b0413fc0..08f2ddcd 100644
--- a/src/tools/date-time-converter/index.ts
+++ b/src/tools/date-time-converter/index.ts
@@ -1,11 +1,11 @@
 import { Calendar } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.date-converter.title'),
+  name: t('tools.date-converter.title'),
   path: '/date-converter',
-  description: translate('tools.date-converter.description'),
+  description: t('tools.date-converter.description'),
   keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'month', 'day', 'minute', 'seconde'],
   component: () => import('./date-time-converter.vue'),
   icon: Calendar,
diff --git a/src/tools/device-information/device-information.vue b/src/tools/device-information/device-information.vue
index d5e5d2ac..add77f79 100644
--- a/src/tools/device-information/device-information.vue
+++ b/src/tools/device-information/device-information.vue
@@ -1,55 +1,56 @@
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core';
 
+const { t } = useI18n();
 const { width, height } = useWindowSize();
 
 const sections = [
   {
-    name: 'Screen',
+    name: t('tools.device-information.screen'),
     information: [
       {
-        label: 'Screen size',
+        label: t('tools.device-information.screenSize'),
         value: computed(() => `${window.screen.availWidth} x ${window.screen.availHeight}`),
       },
       {
-        label: 'Orientation',
+        label: t('tools.device-information.orientation'),
         value: computed(() => window.screen.orientation.type),
       },
       {
-        label: 'Orientation angle',
+        label: t('tools.device-information.orientationAngle'),
         value: computed(() => `${window.screen.orientation.angle}°`),
       },
       {
-        label: 'Color depth',
+        label: t('tools.device-information.colorDepth'),
         value: computed(() => `${window.screen.colorDepth} bits`),
       },
       {
-        label: 'Pixel ratio',
+        label: t('tools.device-information.pixelRatio'),
         value: computed(() => `${window.devicePixelRatio} dppx`),
       },
       {
-        label: 'Window size',
+        label: t('tools.device-information.windowSize'),
         value: computed(() => `${width.value} x ${height.value}`),
       },
     ],
   },
   {
-    name: 'Device',
+    name: t('tools.device-information.device'),
     information: [
       {
-        label: 'Browser vendor',
+        label: t('tools.device-information.browserVendor'),
         value: computed(() => navigator.vendor),
       },
       {
-        label: 'Languages',
+        label: t('tools.device-information.languages'),
         value: computed(() => navigator.languages.join(', ')),
       },
       {
-        label: 'Platform',
+        label: t('tools.device-information.platform'),
         value: computed(() => navigator.platform),
       },
       {
-        label: 'User agent',
+        label: t('tools.device-information.userAgent'),
         value: computed(() => navigator.userAgent),
       },
     ],
diff --git a/src/tools/device-information/index.ts b/src/tools/device-information/index.ts
index e55ae28c..7bd06fdd 100644
--- a/src/tools/device-information/index.ts
+++ b/src/tools/device-information/index.ts
@@ -1,10 +1,11 @@
 import { DeviceDesktop } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Device information',
+  name: t('tools.device-information.title'),
   path: '/device-information',
-  description: 'Get information about your current device (screen size, pixel-ratio, user agent, ...)',
+  description: t('tools.device-information.description'),
   keywords: [
     'device',
     'information',
diff --git a/src/tools/device-information/locales/en.yml b/src/tools/device-information/locales/en.yml
new file mode 100644
index 00000000..67b0a784
--- /dev/null
+++ b/src/tools/device-information/locales/en.yml
@@ -0,0 +1,17 @@
+tools:
+  device-information:
+    title: Device information
+    description: Get information about your current device (screen size, pixel-ratio, user agent, ...)
+
+    screen: Screen
+    screenSize: Screen size
+    orientation: Orientation
+    orientationAngle: Orientation angle
+    colorDepth: Color depth
+    pixelRatio: Pixel ratio
+    windowSize: Window size
+    device: Device
+    browserVendor: Browser vendor
+    languages: Languages
+    platform: Platform
+    userAgent: User agent
diff --git a/src/tools/device-information/locales/zh.yml b/src/tools/device-information/locales/zh.yml
new file mode 100644
index 00000000..02fe2370
--- /dev/null
+++ b/src/tools/device-information/locales/zh.yml
@@ -0,0 +1,17 @@
+tools:
+  device-information:
+    title: 设备信息
+    description: 获取关于您当前设备的信息（屏幕大小、像素比、用户代理...）
+
+    screen: 屏幕
+    screenSize: 屏幕尺寸
+    orientation: 方向
+    orientationAngle: 方向角度
+    colorDepth: 色彩深度
+    pixelRatio: 像素比
+    windowSize: 窗口大小
+    device: 设备
+    browserVendor: 浏览器供应商
+    languages: 语言
+    platform: 平台
+    userAgent: 用户代理
diff --git a/src/tools/encryption/index.ts b/src/tools/encryption/index.ts
index c8dd85db..8951954c 100644
--- a/src/tools/encryption/index.ts
+++ b/src/tools/encryption/index.ts
@@ -1,11 +1,11 @@
 import { Lock } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.encryption.title'),
+  name: t('tools.encryption.title'),
   path: '/encryption',
-  description: translate('tools.encryption.description'),
+  description: t('tools.encryption.description'),
   keywords: ['cypher', 'encipher', 'text', 'AES', 'TripleDES', 'Rabbit', 'RC4'],
   component: () => import('./encryption.vue'),
   icon: Lock,
diff --git a/src/tools/hash-text/index.ts b/src/tools/hash-text/index.ts
index 2070e41d..f8164a0f 100644
--- a/src/tools/hash-text/index.ts
+++ b/src/tools/hash-text/index.ts
@@ -1,11 +1,11 @@
 import { EyeOff } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.hash-text.title'),
+  name: t('tools.hash-text.title'),
   path: '/hash-text',
-  description: translate('tools.hash-text.description'),
+  description: t('tools.hash-text.description'),
   keywords: [
     'hash',
     'digest',
diff --git a/src/tools/hmac-generator/index.ts b/src/tools/hmac-generator/index.ts
index 3500684e..4d2db737 100644
--- a/src/tools/hmac-generator/index.ts
+++ b/src/tools/hmac-generator/index.ts
@@ -1,11 +1,11 @@
 import { ShortTextRound } from '@vicons/material';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.hmac-generator.title'),
+  name: t('tools.hmac-generator.title'),
   path: '/hmac-generator',
-  description: translate('tools.hmac-generator.description'),
+  description: t('tools.hmac-generator.description'),
   keywords: ['hmac', 'generator', 'MD5', 'SHA1', 'SHA256', 'SHA224', 'SHA512', 'SHA384', 'SHA3', 'RIPEMD160'],
   component: () => import('./hmac-generator.vue'),
   icon: ShortTextRound,
diff --git a/src/tools/html-entities/html-entities.vue b/src/tools/html-entities/html-entities.vue
index 1a2192e0..b617bd05 100644
--- a/src/tools/html-entities/html-entities.vue
+++ b/src/tools/html-entities/html-entities.vue
@@ -3,6 +3,7 @@ import { escape, unescape } from 'lodash';
 
 import { useCopy } from '@/composable/copy';
 
+const { t } = useI18n();
 const escapeInput = ref('<title>IT Tool</title>');
 const escapeOutput = computed(() => escape(escapeInput.value));
 const { copy: copyEscaped } = useCopy({ source: escapeOutput });
@@ -13,23 +14,23 @@ const { copy: copyUnescaped } = useCopy({ source: unescapeOutput });
 </script>
 
 <template>
-  <c-card title="Escape html entities">
-    <n-form-item label="Your string :">
+  <c-card :title="t('tools.html-entities.escape.title')">
+    <n-form-item :label="t('tools.html-entities.escape.inputLabel')">
       <c-input-text
         v-model:value="escapeInput"
         multiline
-        placeholder="The string to escape"
+        :placeholder="t('tools.html-entities.escape.inputPlaceholder')"
         rows="3"
         autosize
         raw-text
       />
     </n-form-item>
 
-    <n-form-item label="Your string escaped :">
+    <n-form-item :label="t('tools.html-entities.escape.outputLabel')">
       <c-input-text
         multiline
         readonly
-        placeholder="Your string escaped"
+        :placeholder="t('tools.html-entities.escape.outputPlaceholder')"
         :value="escapeOutput"
         rows="3"
         autosize
@@ -38,28 +39,28 @@ const { copy: copyUnescaped } = useCopy({ source: unescapeOutput });
 
     <div flex justify-center>
       <c-button @click="copyEscaped()">
-        Copy
+        {{ t('tools.html-entities.copy') }}
       </c-button>
     </div>
   </c-card>
-  <c-card title="Unescape html entities">
-    <n-form-item label="Your escaped string :">
+  <c-card :title="t('tools.html-entities.unescape.title')">
+    <n-form-item :label="t('tools.html-entities.unescape.inputLabel')">
       <c-input-text
         v-model:value="unescapeInput"
         multiline
-        placeholder="The string to unescape"
+        :placeholder="t('tools.html-entities.unescape.inputPlaceholder')"
         rows="3"
         autosize
         raw-text
       />
     </n-form-item>
 
-    <n-form-item label="Your string unescaped :">
+    <n-form-item :label="t('tools.html-entities.unescape.outputLabel')">
       <c-input-text
         :value="unescapeOutput"
         multiline
         readonly
-        placeholder="Your string unescaped"
+        :placeholder="t('tools.html-entities.unescape.outputPlaceholder')"
         rows="3"
         autosize
       />
@@ -67,7 +68,7 @@ const { copy: copyUnescaped } = useCopy({ source: unescapeOutput });
 
     <div flex justify-center>
       <c-button @click="copyUnescaped()">
-        Copy
+        {{ t('tools.html-entities.copy') }}
       </c-button>
     </div>
   </c-card>
diff --git a/src/tools/html-entities/index.ts b/src/tools/html-entities/index.ts
index 4907dc68..74583aad 100644
--- a/src/tools/html-entities/index.ts
+++ b/src/tools/html-entities/index.ts
@@ -1,10 +1,11 @@
 import { Code } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Escape html entities',
+  name: t('tools.html-entities.title'),
   path: '/html-entities',
-  description: 'Escape or unescape html entities (replace <,>, &, " and \' to their html version)',
+  description: t('tools.html-entities.description'),
   keywords: ['html', 'entities', 'escape', 'unescape', 'special', 'characters', 'tags'],
   component: () => import('./html-entities.vue'),
   icon: Code,
diff --git a/src/tools/html-entities/locales/en.yml b/src/tools/html-entities/locales/en.yml
new file mode 100644
index 00000000..b37b45cd
--- /dev/null
+++ b/src/tools/html-entities/locales/en.yml
@@ -0,0 +1,19 @@
+tools:
+  html-entities:
+    title: Escape html entities
+    description: Escape or unescape html entities (replace <,>, &, " and \' to their html version)
+
+    escape:
+      title: Escape html entities
+      inputLabel: 'Your string :'
+      inputPlaceholder: The string to escape
+      outputLabel: 'Your string escaped :'
+      outputPlaceholder: Your string escaped
+    unescape:
+      title: Unescape html entities
+      inputLabel: 'Your escaped string :'
+      inputPlaceholder: The string to unescape
+      outputLabel: 'Your string unescaped :'
+      outputPlaceholder: Your string unescaped
+
+    copy: Copy
diff --git a/src/tools/html-entities/locales/zh.yml b/src/tools/html-entities/locales/zh.yml
new file mode 100644
index 00000000..35b8062e
--- /dev/null
+++ b/src/tools/html-entities/locales/zh.yml
@@ -0,0 +1,19 @@
+tools:
+  html-entities:
+    title: 转义 HTML 实体
+    description: 转义或取消转义 HTML 实体（将 <,>, &, " 和 \' 替换为它们的 HTML 版本）
+
+    escape:
+      title: 转义 HTML 实体
+      inputLabel: '输入字符串：'
+      inputPlaceholder: 要转义的字符串
+      outputLabel: '转义后的字符串：'
+      outputPlaceholder: 转义后的字符串
+    unescape:
+      title: 取消转义 HTML 实体
+      inputLabel: '输入转义后的字符串：'
+      inputPlaceholder: 要取消转义的字符串
+      outputLabel: '取消转义后的字符串：'
+      outputPlaceholder: 取消转义后的字符串
+
+    copy: 复制
diff --git a/src/tools/html-wysiwyg-editor/locales/en.yml b/src/tools/html-wysiwyg-editor/locales/en.yml
new file mode 100644
index 00000000..03e5e503
--- /dev/null
+++ b/src/tools/html-wysiwyg-editor/locales/en.yml
@@ -0,0 +1,4 @@
+tools:
+  html-wysiwyg-editor:
+    title: HTML WYSIWYG editor
+    description: Online HTML editor with feature-rich WYSIWYG editor, get the source code of the content immediately.
diff --git a/src/tools/http-status-codes/locales/en.yml b/src/tools/http-status-codes/locales/en.yml
new file mode 100644
index 00000000..07f2a168
--- /dev/null
+++ b/src/tools/http-status-codes/locales/en.yml
@@ -0,0 +1,4 @@
+tools:
+  http-status-codes:
+    title: HTTP status codes
+    description: The list of all HTTP status codes their name and their meaning.
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 52bdf8e3..7c8bc913 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -93,11 +93,11 @@ export const toolsByCategory: ToolCategory[] = [
       caseConverter,
       textToNatoAlphabet,
       textToBinary,
+      listConverter,
       yamlToJson,
       yamlToToml,
       jsonToYaml,
       jsonToToml,
-      listConverter,
       tomlToJson,
       tomlToYaml,
     ],
diff --git a/src/tools/integer-base-converter/index.ts b/src/tools/integer-base-converter/index.ts
index f60d996d..b9a2431a 100644
--- a/src/tools/integer-base-converter/index.ts
+++ b/src/tools/integer-base-converter/index.ts
@@ -1,11 +1,11 @@
 import { ArrowsLeftRight } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.base-converter.title'),
+  name: t('tools.base-converter.title'),
   path: '/base-converter',
-  description: translate('tools.base-converter.description'),
+  description: t('tools.base-converter.description'),
   keywords: ['integer', 'number', 'base', 'conversion', 'decimal', 'hexadecimal', 'binary', 'octal', 'base64'],
   component: () => import('./integer-base-converter.vue'),
   icon: ArrowsLeftRight,
diff --git a/src/tools/integer-base-converter/integer-base-converter.model.ts b/src/tools/integer-base-converter/integer-base-converter.model.ts
index 1332ad25..5f932d23 100644
--- a/src/tools/integer-base-converter/integer-base-converter.model.ts
+++ b/src/tools/integer-base-converter/integer-base-converter.model.ts
@@ -1,4 +1,4 @@
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export function convertBase({ value, fromBase, toBase }: { value: string; fromBase: number; toBase: number }) {
   const range = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+/'.split('');
@@ -9,7 +9,7 @@ export function convertBase({ value, fromBase, toBase }: { value: string; fromBa
     .reverse()
     .reduce((carry: number, digit: string, index: number) => {
       if (!fromRange.includes(digit)) {
-        throw new Error(translate('tools.base-converter.invalidMessage', { digit, fromBase }));
+        throw new Error(t('tools.base-converter.invalidMessage', { digit, fromBase }));
       }
       return (carry += fromRange.indexOf(digit) * fromBase ** index);
     }, 0);
diff --git a/src/tools/json-diff/locales/en.yml b/src/tools/json-diff/locales/en.yml
new file mode 100644
index 00000000..6962461f
--- /dev/null
+++ b/src/tools/json-diff/locales/en.yml
@@ -0,0 +1,4 @@
+tools:
+  json-diff:
+    title: JSON diff
+    description: Compare two JSON objects and get the differences between them.
diff --git a/src/tools/json-to-toml/index.ts b/src/tools/json-to-toml/index.ts
index da42c18d..bdcae3db 100644
--- a/src/tools/json-to-toml/index.ts
+++ b/src/tools/json-to-toml/index.ts
@@ -1,11 +1,11 @@
 import { Braces } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.json-to-toml.title'),
+  name: t('tools.json-to-toml.title'),
   path: '/json-to-toml',
-  description: translate('tools.json-to-toml.description'),
+  description: t('tools.json-to-toml.description'),
   keywords: ['json', 'parse', 'toml', 'convert', 'transform'],
   component: () => import('./json-to-toml.vue'),
   icon: Braces,
diff --git a/src/tools/json-to-yaml-converter/index.ts b/src/tools/json-to-yaml-converter/index.ts
index c01e3ec0..bc5b2912 100644
--- a/src/tools/json-to-yaml-converter/index.ts
+++ b/src/tools/json-to-yaml-converter/index.ts
@@ -1,11 +1,11 @@
 import { Braces } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.json-to-yaml-converter.title'),
+  name: t('tools.json-to-yaml-converter.title'),
   path: '/json-to-yaml-converter',
-  description: translate('tools.json-to-yaml-converter.description'),
+  description: t('tools.json-to-yaml-converter.description'),
   keywords: ['yaml', 'to', 'json'],
   component: () => import('./json-to-yaml.vue'),
   icon: Braces,
diff --git a/src/tools/jwt-parser/index.ts b/src/tools/jwt-parser/index.ts
index 7249ace0..7b4a2d5d 100644
--- a/src/tools/jwt-parser/index.ts
+++ b/src/tools/jwt-parser/index.ts
@@ -1,10 +1,11 @@
 import { Key } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'JWT parser',
+  name: t('tools.jwt-parser.title'),
   path: '/jwt-parser',
-  description: 'Parse and decode your JSON Web Token (jwt) and display its content.',
+  description: t('tools.jwt-parser.description'),
   keywords: [
     'jwt',
     'parser',
diff --git a/src/tools/jwt-parser/locales/en.yml b/src/tools/jwt-parser/locales/en.yml
new file mode 100644
index 00000000..956f9239
--- /dev/null
+++ b/src/tools/jwt-parser/locales/en.yml
@@ -0,0 +1,4 @@
+tools:
+  jwt-parser:
+    title: JWT parser
+    description: Parse and decode your JSON Web Token (jwt) and display its content.
diff --git a/src/tools/keycode-info/locales/en.yml b/src/tools/keycode-info/locales/en.yml
new file mode 100644
index 00000000..98322a55
--- /dev/null
+++ b/src/tools/keycode-info/locales/en.yml
@@ -0,0 +1,4 @@
+tools:
+  keycode-info:
+    title: Keycode info
+    description: Find the javascript keycode, code, location and modifiers of any pressed key.
diff --git a/src/tools/list-converter/index.ts b/src/tools/list-converter/index.ts
index 9ae7c512..f1c20f7e 100644
--- a/src/tools/list-converter/index.ts
+++ b/src/tools/list-converter/index.ts
@@ -1,11 +1,11 @@
 import { List } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.list-converter.title'),
+  name: t('tools.list-converter.title'),
   path: '/list-converter',
-  description: translate('tools.list-converter.description'),
+  description: t('tools.list-converter.description'),
   keywords: ['list', 'converter', 'sort', 'reverse', 'prefix', 'suffix', 'lowercase', 'truncate'],
   component: () => import('./list-converter.vue'),
   icon: List,
diff --git a/src/tools/meta-tag-generator/index.ts b/src/tools/meta-tag-generator/index.ts
index c79b19f3..42f4e290 100644
--- a/src/tools/meta-tag-generator/index.ts
+++ b/src/tools/meta-tag-generator/index.ts
@@ -1,10 +1,11 @@
 import { Tags } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Open graph meta generator',
+  name: t('tools.og-meta-generator.title'),
   path: '/og-meta-generator',
-  description: 'Generate open-graph and socials html meta tags for your website.',
+  description: t('tools.og-meta-generator.description'),
   keywords: [
     'meta',
     'tag',
diff --git a/src/tools/meta-tag-generator/locales/en.yml b/src/tools/meta-tag-generator/locales/en.yml
new file mode 100644
index 00000000..5277e2fa
--- /dev/null
+++ b/src/tools/meta-tag-generator/locales/en.yml
@@ -0,0 +1,199 @@
+tools:
+  og-meta-generator:
+    title: Open graph meta generator
+    description: Generate open-graph and socials html meta tags for your website.
+
+    yourMetaTags: Your meta tags
+
+    article:
+      title: Article
+      publishingDate:
+        label: Publishing date
+        placeholder: When the article was first published...
+      modificationDate:
+        label: Modification date
+        placeholder: When the article was last changed...
+      expirationDate:
+        label: Expiration date
+        placeholder: When the article is out of date after...
+      author:
+        label: Author
+        placeholder: Writers of the article...
+      section:
+        label: Section
+        placeholder: A high-level section name. E.g. Technology..
+      tag:
+        label: Tag
+        placeholder: Tag words associated with this article...
+    book:
+      title: Book
+      author:
+        label: Author
+        placeholder: Who wrote this book...
+      ISBN:
+        label: ISBN
+        placeholder: The International Standard Book Number...
+      releaseDate:
+        label: Release date
+        placeholder: The date the book was released...
+      tag:
+        label: Tag
+        placeholder: Tag words associated with this book...
+    image:
+      title: Image
+      imageUrl:
+        label: Image url
+        placeholder: The url of your website social image...
+      imageAlt:
+        label: Image alt
+        placeholder: The alternative text of your website social image...
+      width:
+        label: Width
+        placeholder: Width in px of your website social image...
+      height:
+        label: Height
+        placeholder: Height in px of your website social image...
+    albumDetails:
+      title: Album details
+      song:
+        label: Song
+        placeholder: The song on this album...
+      disc:
+        label: Disc
+        placeholder: The same as music:album:disc but in reverse...
+      track:
+        label: Track
+        placeholder: The same as music:album:track but in reverse...
+      musician:
+        label: Musician
+        placeholder: The musician that made this song...
+      releaseDate:
+        label: Release date
+        placeholder: The date the album was released...
+    playlistDetails:
+      title: Playlist details
+      song:
+        label: Song
+        placeholder: The song on this album...
+      disc:
+        label: Disc
+        placeholder: The same as music:album:disc but in reverse...
+      track:
+        label: Track
+        placeholder: The same as music:album:track but in reverse...
+      creator:
+        label: Creator
+        placeholder: The creator of this playlist...
+    radioStationDetails:
+      title: Radio station details
+      creator:
+        label: Creator
+        placeholder: The creator of this radio station...
+    songDetails:
+      title: Song details
+      duration:
+        lebel: Duration
+        placeholder: The duration of the song...
+      album:
+        lebel: Album
+        placeholder: The album this song is from...
+      disc:
+        lebel: Disc
+        placeholder: Which disc of the album this song is on...
+      track:
+        lebel: Track
+        placeholder: Which track this song is...
+      musician:
+        lebel: Musician
+        placeholder: The musician that made this song...
+    profile:
+      title: Profile
+      firstName:
+        lebel: First name
+        placeholder: Enter the first name of the person...
+      lastName:
+        lebel: Last name
+        placeholder: Enter the last name of the person...
+      username:
+        lebel: Username
+        placeholder: Enter the username of the person...
+      gender:
+        lebel: Gender
+        placeholder: Enter the gender of the person...
+    twitter:
+      title: Twitter
+      card:
+        label: Card type
+        placeholder: The Twitter card type...
+        summary: Summary
+        summaryWithLargeImage: Summary with large image
+        application: Application
+        player: Player
+      site:
+        label: Site account
+        placeholder: 'The name of the Twitter account of the site (ex: @ittoolsdottech)...'
+      creator:
+        label: Creator acc.
+        placeholder: 'The name of the Twitter account of the creator (ex: @cthmsst)...'
+    videoEpisode:
+      title: Video episode details
+      series:
+        label: Series
+        placeholder: Which series this episode belongs to...
+    videoMovie:
+      title: Movie details
+      actor:
+        label: Actor
+        placeholder: Name of the actress/actor...
+      actorRole:
+        label: Actor role
+        placeholder: The role they played...
+      director:
+        label: Director
+        placeholder: Name of the director...
+      writer:
+        label: Writer
+        placeholder: Writers of the movie...
+      duration:
+        label: Duration
+        placeholder: The movie\'s length in seconds...
+      releaseDate:
+        label: Release date
+        placeholder: The date the movie was released...
+      tag:
+        label: Tag
+        placeholder: Tag words associated with this movie...
+    videoOther:
+      title: Other video details
+    videoTVShow:
+      title: TV show details
+    website:
+      title: General information
+      pageType:
+        label: Page type
+        placeholder: Select the type of your website...
+      pageTitle:
+        label: Title
+        placeholder: Enter the title of your website...
+      description:
+        label: Description
+        placeholder: Enter the description of your website...
+      url:
+        label: Page URL
+        placeholder: Enter the url of your website...
+      web: Website
+      article: Article
+      book: Book
+      profile: Profile
+      music:
+        label: Music
+        song: Song
+        musicAlbum: Music album
+        playlist: Playlist
+        radioStation: Radio station
+      video:
+        label: Music
+        movie: Movie
+        episode: Episode
+        tvShow: TV show
+        otherVideo: Other video
diff --git a/src/tools/meta-tag-generator/locales/zh.yml b/src/tools/meta-tag-generator/locales/zh.yml
new file mode 100644
index 00000000..b00ab468
--- /dev/null
+++ b/src/tools/meta-tag-generator/locales/zh.yml
@@ -0,0 +1,199 @@
+tools:
+  og-meta-generator:
+    title: 开放图谱元数据生成器
+    description: 为您的网站生成开放图谱和社交网站的 HTML 元标记。
+
+    yourMetaTags: 您的元标记
+
+    article:
+      title: 文章
+      publishingDate:
+        label: 发布日期
+        placeholder: 文章首次发布的日期...
+      modificationDate:
+        label: 修改日期
+        placeholder: 文章最后修改的日期...
+      expirationDate:
+        label: 过期日期
+        placeholder: 文章失效日期...
+      author:
+        label: 作者
+        placeholder: 文章的作者...
+      section:
+        label: 部分
+        placeholder: 高级部分名称。例如：技术...
+      tag:
+        label: 标签
+        placeholder: 与该文章相关的标签词...
+    book:
+      title: 书籍
+      author:
+        label: 作者
+        placeholder: 谁写了这本书...
+      ISBN:
+        label: ISBN
+        placeholder: 国际标准书号...
+      releaseDate:
+        label: 发行日期
+        placeholder: 书籍发布日期...
+      tag:
+        label: 标签
+        placeholder: 与该书籍相关的标签词...
+    image:
+      title: 图片
+      imageUrl:
+        label: 图片 URL
+        placeholder: 您网站社交图片的 URL...
+      imageAlt:
+        label: 图片说明
+        placeholder: 您网站社交图片的替代文本...
+      width:
+        label: 宽度
+        placeholder: 您网站社交图片的宽度（像素）...
+      height:
+        label: 高度
+        placeholder: 您网站社交图片的高度（像素）...
+    albumDetails:
+      title: 专辑详情
+      song:
+        label: 歌曲
+        placeholder: 该专辑中的歌曲...
+      disc:
+        label: 光盘
+        placeholder: 与音乐:专辑:光盘相同，但顺序相反...
+      track:
+        label: 曲目
+        placeholder: 与音乐:专辑:曲目相同，但顺序相反...
+      musician:
+        label: 音乐家
+        placeholder: 制作该歌曲的音乐家...
+      releaseDate:
+        label: 发行日期
+        placeholder: 专辑发布日期...
+    playlistDetails:
+      title: 播放列表详情
+      song:
+        label: 歌曲
+        placeholder: 该专辑中的歌曲...
+      disc:
+        label: 光盘
+        placeholder: 与音乐:专辑:光盘相同，但顺序相反...
+      track:
+        label: 曲目
+        placeholder: 与音乐:专辑:曲目相同，但顺序相反...
+      creator:
+        label: 创建者
+        placeholder: 此播放列表的创建者...
+    radioStationDetails:
+      title: 电台详情
+      creator:
+        label: 创建者
+        placeholder: 电台的创建者...
+    songDetails:
+      title: 歌曲详情
+      duration:
+        lebel: 时长
+        placeholder: 歌曲的时长...
+      album:
+        lebel: 专辑
+        placeholder: 歌曲所属的专辑...
+      disc:
+        lebel: 光盘
+        placeholder: 歌曲所在专辑的光盘...
+      track:
+        lebel: 曲目
+        placeholder: 歌曲的曲目...
+      musician:
+        lebel: 音乐家
+        placeholder: 制作该歌曲的音乐家...
+    profile:
+      title: 个人资料
+      firstName:
+        lebel: 名字
+        placeholder: 输入个人的名字...
+      lastName:
+        lebel: 姓氏
+        placeholder: 输入个人的姓氏...
+      username:
+        lebel: 用户名
+        placeholder: 输入个人的用户名...
+      gender:
+        lebel: 性别
+        placeholder: 输入个人的性别...
+    twitter:
+      title: 推特
+      card:
+        label: 卡片类型
+        placeholder: 推特卡片类型...
+        summary: 摘要
+        summaryWithLargeImage: 带大图的摘要
+        application: 应用
+        player: 播放器
+      site:
+        label: 网站账号
+        placeholder: '网站的推特账号（例如：@ittoolsdottech）...'
+      creator:
+        label: 创建者账号
+        placeholder: '创建者的推特账号（例如：@cthmsst）...'
+    videoEpisode:
+      title: 视频剧集详情
+      series:
+        label: 系列
+        placeholder: 该剧集所属的系列...
+    videoMovie:
+      title: 电影详情
+      actor:
+        label: 演员
+        placeholder: 女演员/男演员的名字...
+      actorRole:
+        label: 演员角色
+        placeholder: 他们扮演的角色...
+      director:
+        label: 导演
+        placeholder: 导演的名字...
+      writer:
+        label: 编剧
+        placeholder: 电影的编剧...
+      duration:
+        label: 时长
+        placeholder: 电影的长度（秒）...
+      releaseDate:
+        label: 发行日期
+        placeholder: 电影的发布日期...
+      tag:
+        label: 标签
+        placeholder: 与该电影相关的标签词...
+    videoOther:
+      title: 其他视频详情
+    videoTVShow:
+      title: 电视剧详情
+    website:
+      title: 常规信息
+      pageType:
+        label: 页面类型
+        placeholder: 选择您网站的类型...
+      pageTitle:
+        label: 标题
+        placeholder: 输入您网站的标题...
+      description:
+        label: 描述
+        placeholder: 输入您网站的描述...
+      url:
+        label: 页面 URL
+        placeholder: 输入您网站的 URL...
+      web: 网站
+      article: 文章
+      book: 书籍
+      profile: 个人资料
+      music:
+        label: 音乐
+        song: 歌曲
+        musicAlbum: 音乐专辑
+        playlist: 播放列表
+        radioStation: 电台
+      video:
+        label: 视频
+        movie: 电影
+        episode: 剧集
+        tvShow: 电视剧
+        otherVideo: 其他视频
diff --git a/src/tools/meta-tag-generator/meta-tag-generator.vue b/src/tools/meta-tag-generator/meta-tag-generator.vue
index aafa7799..0b0cd0f7 100644
--- a/src/tools/meta-tag-generator/meta-tag-generator.vue
+++ b/src/tools/meta-tag-generator/meta-tag-generator.vue
@@ -6,7 +6,7 @@ import type { OGSchemaType, OGSchemaTypeElementSelect } from './OGSchemaType.typ
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
 
 // Since type guards do not work in template
-
+const { t } = useI18n();
 const metadata = ref<{ type: string; [k: string]: any }>({
   'type': 'website',
   'twitter:card': 'summary_large_image',
@@ -83,7 +83,7 @@ const metaTags = computed(() => {
     </div>
   </div>
   <div>
-    <n-form-item label="Your meta tags">
+    <n-form-item :label="t('tools.og-meta-generator.yourMetaTags')">
       <TextareaCopyable :value="metaTags" language="html" />
     </n-form-item>
   </div>
diff --git a/src/tools/meta-tag-generator/og-schemas/article.ts b/src/tools/meta-tag-generator/og-schemas/article.ts
index 3d2ce925..b22f8105 100644
--- a/src/tools/meta-tag-generator/og-schemas/article.ts
+++ b/src/tools/meta-tag-generator/og-schemas/article.ts
@@ -1,33 +1,44 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const article: OGSchemaType = {
-  name: 'Article',
+  name: t('tools.og-meta-generator.article.title'),
   elements: [
     {
       type: 'input',
-      label: 'Publishing date',
+      label: t('tools.og-meta-generator.article.publishingDate.label'),
       key: 'article:published_time',
-      placeholder: 'When the article was first published...',
+      placeholder: t('tools.og-meta-generator.article.publishingDate.placeholder'),
     },
     {
       type: 'input',
-      label: 'Modification date',
+      label: t('tools.og-meta-generator.article.modificationDate.label'),
       key: 'article:modified_time',
-      placeholder: 'When the article was last changed...',
+      placeholder: t('tools.og-meta-generator.article.modificationDate.placeholder'),
     },
     {
       type: 'input',
-      label: 'Expiration date',
+      label: t('tools.og-meta-generator.article.expirationDate.label'),
       key: 'article:expiration_time',
-      placeholder: 'When the article is out of date after...',
+      placeholder: t('tools.og-meta-generator.article.expirationDate.placeholder'),
     },
-    { type: 'input', label: 'Author', key: 'article:author', placeholder: 'Writers of the article...' },
     {
       type: 'input',
-      label: 'Section',
-      key: 'article:section',
-      placeholder: 'A high-level section name. E.g. Technology..',
+      label: t('tools.og-meta-generator.article.author.label'),
+      key: 'article:author',
+      placeholder: t('tools.og-meta-generator.article.author.placeholder'),
+    },
+    {
+      type: 'input',
+      label: t('tools.og-meta-generator.article.section.label'),
+      key: 'article:section',
+      placeholder: t('tools.og-meta-generator.article.section.placeholder'),
+    },
+    {
+      type: 'input',
+      label: t('tools.og-meta-generator.article.tag.label'),
+      key: 'article:tag',
+      placeholder: t('tools.og-meta-generator.article.tag.placeholder'),
     },
-    { type: 'input', label: 'Tag', key: 'article:tag', placeholder: 'Tag words associated with this article...' },
   ],
 };
diff --git a/src/tools/meta-tag-generator/og-schemas/book.ts b/src/tools/meta-tag-generator/og-schemas/book.ts
index f01733fa..bbb52e50 100644
--- a/src/tools/meta-tag-generator/og-schemas/book.ts
+++ b/src/tools/meta-tag-generator/og-schemas/book.ts
@@ -1,16 +1,17 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const book: OGSchemaType = {
-  name: 'Book',
+  name: t('tools.og-meta-generator.book.title'),
   elements: [
-    { type: 'input', label: 'Author', key: 'book:author', placeholder: 'Who wrote this book...' },
-    { type: 'input', label: 'ISBN', key: 'book:isbn', placeholder: 'The International Standard Book Number...' },
+    { type: 'input', label: t('tools.og-meta-generator.book.author.label'), key: 'book:author', placeholder: t('tools.og-meta-generator.book.author.placeholder') },
+    { type: 'input', label: t('tools.og-meta-generator.book.ISBN.label'), key: 'book:isbn', placeholder: t('tools.og-meta-generator.book.ISBN.placeholder') },
     {
       type: 'input',
-      label: 'Release date',
+      label: t('tools.og-meta-generator.book.releaseDate.label'),
       key: 'book:release_date',
-      placeholder: 'The date the book was released...',
+      placeholder: t('tools.og-meta-generator.book.releaseDate.placeholder'),
     },
-    { type: 'input', label: 'Tag', key: 'book:tag', placeholder: 'Tag words associated with this book...' },
+    { type: 'input', label: t('tools.og-meta-generator.book.tag.label'), key: 'book:tag', placeholder: t('tools.og-meta-generator.book.tag.placeholder') },
   ],
 };
diff --git a/src/tools/meta-tag-generator/og-schemas/image.ts b/src/tools/meta-tag-generator/og-schemas/image.ts
index 60a4c5a9..5b997582 100644
--- a/src/tools/meta-tag-generator/og-schemas/image.ts
+++ b/src/tools/meta-tag-generator/og-schemas/image.ts
@@ -1,30 +1,31 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const image: OGSchemaType = {
-  name: 'Image',
+  name: t('tools.og-meta-generator.image.title'),
   elements: [
     {
       type: 'input',
-      label: 'Image url',
-      placeholder: 'The url of your website social image...',
+      label: t('tools.og-meta-generator.image.imageUrl.label'),
+      placeholder: t('tools.og-meta-generator.image.imageUrl.placeholder'),
       key: 'image',
     },
     {
       type: 'input',
-      label: 'Image alt',
-      placeholder: 'The alternative text of your website social image...',
+      label: t('tools.og-meta-generator.image.imageAlt.label'),
+      placeholder: t('tools.og-meta-generator.image.imageAlt.placeholder'),
       key: 'image:alt',
     },
     {
       type: 'input',
-      label: 'Width',
-      placeholder: 'Width in px of your website social image...',
+      label: t('tools.og-meta-generator.image.width.label'),
+      placeholder: t('tools.og-meta-generator.image.width.placeholder'),
       key: 'image:width',
     },
     {
       type: 'input',
-      label: 'Height',
-      placeholder: 'Height in px of your website social image...',
+      label: t('tools.og-meta-generator.image.height.label'),
+      placeholder: t('tools.og-meta-generator.image.height.placeholder'),
       key: 'image:height',
     },
   ],
diff --git a/src/tools/meta-tag-generator/og-schemas/musicAlbum.ts b/src/tools/meta-tag-generator/og-schemas/musicAlbum.ts
index 225423c2..5a6c2d0d 100644
--- a/src/tools/meta-tag-generator/og-schemas/musicAlbum.ts
+++ b/src/tools/meta-tag-generator/og-schemas/musicAlbum.ts
@@ -1,27 +1,28 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const musicAlbum: OGSchemaType = {
-  name: 'Album details',
+  name: t('tools.og-meta-generator.albumDetails.title'),
   elements: [
-    { type: 'input', label: 'Song', key: 'music:song', placeholder: 'The song on this album...' },
+    { type: 'input', label: t('tools.og-meta-generator.albumDetails.song.label'), key: 'music:song', placeholder: t('tools.og-meta-generator.albumDetails.song.placeholder') },
     {
       type: 'input',
-      label: 'Disc',
+      label: t('tools.og-meta-generator.albumDetails.disc.label'),
       key: 'music:song:disc',
-      placeholder: 'The same as music:album:disc but in reverse...',
+      placeholder: t('tools.og-meta-generator.albumDetails.disc.placeholder'),
     },
     {
       type: 'input',
-      label: 'Track',
+      label: t('tools.og-meta-generator.albumDetails.track.label'),
       key: 'music:song:track',
-      placeholder: 'The same as music:album:track but in reverse...',
+      placeholder: t('tools.og-meta-generator.albumDetails.track.placeholder'),
     },
-    { type: 'input', label: 'Musician', key: 'music:musician', placeholder: 'The musician that made this song...' },
+    { type: 'input', label: t('tools.og-meta-generator.albumDetails.musician.label'), key: 'music:musician', placeholder: t('tools.og-meta-generator.albumDetails.musician.placeholder') },
     {
       type: 'input',
-      label: 'Release date',
+      label: t('tools.og-meta-generator.albumDetails.releaseDate.label'),
       key: 'music:release_date',
-      placeholder: 'The date the album was released...',
+      placeholder: t('tools.og-meta-generator.albumDetails.releaseDate.placeholder'),
     },
   ],
 };
diff --git a/src/tools/meta-tag-generator/og-schemas/musicPlaylist.ts b/src/tools/meta-tag-generator/og-schemas/musicPlaylist.ts
index 610dd8e1..160ea786 100644
--- a/src/tools/meta-tag-generator/og-schemas/musicPlaylist.ts
+++ b/src/tools/meta-tag-generator/og-schemas/musicPlaylist.ts
@@ -1,21 +1,22 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const musicPlaylist: OGSchemaType = {
-  name: 'Playlist details',
+  name: t('tools.og-meta-generator.playlistDetails.title'),
   elements: [
-    { type: 'input', label: 'Song', key: 'music:song', placeholder: 'The song on this album...' },
+    { type: 'input', label: t('tools.og-meta-generator.playlistDetails.song.label'), key: 'music:song', placeholder: t('tools.og-meta-generator.playlistDetails.song.placeholder') },
     {
       type: 'input',
-      label: 'Disc',
+      label: t('tools.og-meta-generator.playlistDetails.disc.label'),
       key: 'music:song:disc',
-      placeholder: 'The same as music:album:disc but in reverse...',
+      placeholder: t('tools.og-meta-generator.playlistDetails.disc.placeholder'),
     },
     {
       type: 'input',
-      label: 'Track',
+      label: t('tools.og-meta-generator.playlistDetails.track.label'),
       key: 'music:song:track',
-      placeholder: 'The same as music:album:track but in reverse...',
+      placeholder: t('tools.og-meta-generator.playlistDetails.track.placeholder'),
     },
-    { type: 'input', label: 'Creator', key: 'music:creator', placeholder: 'The creator of this playlist...' },
+    { type: 'input', label: t('tools.og-meta-generator.playlistDetails.creator.label'), key: 'music:creator', placeholder: t('tools.og-meta-generator.playlistDetails.creator.placeholder') },
   ],
 };
diff --git a/src/tools/meta-tag-generator/og-schemas/musicRadioStation.ts b/src/tools/meta-tag-generator/og-schemas/musicRadioStation.ts
index d4c1126b..51004986 100644
--- a/src/tools/meta-tag-generator/og-schemas/musicRadioStation.ts
+++ b/src/tools/meta-tag-generator/og-schemas/musicRadioStation.ts
@@ -1,8 +1,9 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const musicRadioStation: OGSchemaType = {
-  name: 'Radio station details',
+  name: t('tools.og-meta-generator.radioStationDetails.title'),
   elements: [
-    { type: 'input', label: 'Creator', key: 'music:creator', placeholder: 'The creator of this radio station...' },
+    { type: 'input', label: t('tools.og-meta-generator.radioStationDetails.creator.label'), key: 'music:creator', placeholder: t('tools.og-meta-generator.radioStationDetails.creator.placeholder') },
   ],
 };
diff --git a/src/tools/meta-tag-generator/og-schemas/musicSong.ts b/src/tools/meta-tag-generator/og-schemas/musicSong.ts
index 018ce178..f3dae236 100644
--- a/src/tools/meta-tag-generator/og-schemas/musicSong.ts
+++ b/src/tools/meta-tag-generator/og-schemas/musicSong.ts
@@ -1,21 +1,22 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const musicSong: OGSchemaType = {
-  name: 'Song details',
+  name: t('tools.og-meta-generator.songDetails.title'),
   elements: [
-    { type: 'input', label: 'Duration', placeholder: 'The duration of the song...', key: 'music:duration' },
-    { type: 'input', label: 'Album', placeholder: 'The album this song is from...', key: 'music:album' },
+    { type: 'input', label: t('tools.og-meta-generator.songDetails.duration.lebel'), placeholder: t('tools.og-meta-generator.songDetails.duration.placeholder'), key: 'music:duration' },
+    { type: 'input', label: t('tools.og-meta-generator.songDetails.album.lebel'), placeholder: t('tools.og-meta-generator.songDetails.album.placeholder'), key: 'music:album' },
     {
       type: 'input',
-      label: 'Disc',
-      placeholder: 'Which disc of the album this song is on...',
+      label: t('tools.og-meta-generator.songDetails.disc.lebel'),
+      placeholder: t('tools.og-meta-generator.songDetails.disc.placeholder'),
       key: 'music:album:disk',
     },
-    { type: 'input', label: 'Track', placeholder: ' Which track this song is...', key: 'music:album:track' },
+    { type: 'input', label: t('tools.og-meta-generator.songDetails.track.lebel'), placeholder: t('tools.og-meta-generator.songDetails.track.placeholder'), key: 'music:album:track' },
     {
       type: 'input-multiple',
-      label: 'Musician',
-      placeholder: 'The musician that made this song...',
+      label: t('tools.og-meta-generator.songDetails.musician.lebel'),
+      placeholder: t('tools.og-meta-generator.songDetails.musician.placeholder'),
       key: 'music:musician',
     },
   ],
diff --git a/src/tools/meta-tag-generator/og-schemas/profile.ts b/src/tools/meta-tag-generator/og-schemas/profile.ts
index b0bc189e..3e5d04ff 100644
--- a/src/tools/meta-tag-generator/og-schemas/profile.ts
+++ b/src/tools/meta-tag-generator/og-schemas/profile.ts
@@ -1,21 +1,22 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const profile: OGSchemaType = {
-  name: 'Profile',
+  name: t('tools.og-meta-generator.profile.title'),
   elements: [
     {
       type: 'input',
-      label: 'First name',
-      placeholder: 'Enter the first name of the person...',
+      label: t('tools.og-meta-generator.profile.firstName.lebel'),
+      placeholder: t('tools.og-meta-generator.profile.firstName.placeholder'),
       key: 'profile:first_name',
     },
     {
       type: 'input',
-      label: 'Last name',
-      placeholder: 'Enter the last name of the person...',
+      label: t('tools.og-meta-generator.profile.lastName.lebel'),
+      placeholder: t('tools.og-meta-generator.profile.lastName.placeholder'),
       key: 'profile:last_name',
     },
-    { type: 'input', label: 'Username', placeholder: 'Enter the username of the person...', key: 'profile:username' },
-    { type: 'input', label: 'Gender', placeholder: 'Enter the gender of the person...', key: 'profile:gender' },
+    { type: 'input', label: t('tools.og-meta-generator.profile.username.lebel'), placeholder: t('tools.og-meta-generator.profile.username.placeholder'), key: 'profile:username' },
+    { type: 'input', label: t('tools.og-meta-generator.profile.gender.lebel'), placeholder: t('tools.og-meta-generator.profile.gender.placeholder'), key: 'profile:gender' },
   ],
 };
diff --git a/src/tools/meta-tag-generator/og-schemas/twitter.ts b/src/tools/meta-tag-generator/og-schemas/twitter.ts
index e29f5ebf..cabd486a 100644
--- a/src/tools/meta-tag-generator/og-schemas/twitter.ts
+++ b/src/tools/meta-tag-generator/og-schemas/twitter.ts
@@ -1,30 +1,31 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const twitter: OGSchemaType = {
-  name: 'Twitter',
+  name: t('tools.og-meta-generator.twitter.title'),
   elements: [
     {
       type: 'select',
       options: [
-        { label: 'Summary', value: 'summary' },
-        { label: 'Summary with large image', value: 'summary_large_image' },
-        { label: 'Application', value: 'app' },
-        { label: 'Player', value: 'player' },
+        { label: t('tools.og-meta-generator.twitter.card.summary'), value: 'summary' },
+        { label: t('tools.og-meta-generator.twitter.card.summaryWithLargeImage'), value: 'summary_large_image' },
+        { label: t('tools.og-meta-generator.twitter.card.application'), value: 'app' },
+        { label: t('tools.og-meta-generator.twitter.card.player'), value: 'player' },
       ],
-      label: 'Card type',
-      placeholder: 'The Twitter card type...',
+      label: t('tools.og-meta-generator.twitter.card.label'),
+      placeholder: t('tools.og-meta-generator.twitter.card.placeholder'),
       key: 'twitter:card',
     },
     {
       type: 'input',
-      label: 'Site account',
-      placeholder: 'The name of the Twitter account of the site (ex: @ittoolsdottech)...',
+      label: t('tools.og-meta-generator.twitter.site.label'),
+      placeholder: t('tools.og-meta-generator.twitter.site.placeholder'),
       key: 'twitter:site',
     },
     {
       type: 'input',
-      label: 'Creator acc.',
-      placeholder: 'The name of the Twitter account of the creator (ex: @cthmsst)...',
+      label: t('tools.og-meta-generator.twitter.creator.label'),
+      placeholder: t('tools.og-meta-generator.twitter.creator.placeholder'),
       key: 'twitter:creator',
     },
   ],
diff --git a/src/tools/meta-tag-generator/og-schemas/videoEpisode.ts b/src/tools/meta-tag-generator/og-schemas/videoEpisode.ts
index b8a036e3..724c9ec0 100644
--- a/src/tools/meta-tag-generator/og-schemas/videoEpisode.ts
+++ b/src/tools/meta-tag-generator/og-schemas/videoEpisode.ts
@@ -1,10 +1,11 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
 import { videoMovie } from './videoMovie';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const videoEpisode: OGSchemaType = {
-  name: 'Video episode details',
+  name: t('tools.og-meta-generator.videoEpisode.title'),
   elements: [
     ...videoMovie.elements,
-    { type: 'input', label: 'Series', key: 'video:series', placeholder: 'Which series this episode belongs to...' },
+    { type: 'input', label: t('tools.og-meta-generator.videoEpisode.series.label'), key: 'video:series', placeholder: t('tools.og-meta-generator.videoEpisode.series.placeholder') },
   ],
 };
diff --git a/src/tools/meta-tag-generator/og-schemas/videoMovie.ts b/src/tools/meta-tag-generator/og-schemas/videoMovie.ts
index 96baa1a0..c0c055fe 100644
--- a/src/tools/meta-tag-generator/og-schemas/videoMovie.ts
+++ b/src/tools/meta-tag-generator/og-schemas/videoMovie.ts
@@ -1,29 +1,30 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const videoMovie: OGSchemaType = {
-  name: 'Movie details',
+  name: t('tools.og-meta-generator.videoMovie.title'),
   elements: [
     {
       type: 'input-multiple',
-      label: 'Actor',
+      label: t('tools.og-meta-generator.videoMovie.actor.label'),
       key: 'video:actor',
-      placeholder: 'Name of the actress/actor...',
+      placeholder: t('tools.og-meta-generator.videoMovie.actor.placeholder'),
     },
-    // { type: 'input', label: 'Actor role', key: 'video:actor:role', placeholder: 'The role they played...' },
+    // { type: 'input', label: t('tools.og-meta-generator.videoMovie.actorRole.label'), key: 'video:actor:role', placeholder: t('tools.og-meta-generator.videoMovie.actorRole.placeholder') },
     {
       type: 'input-multiple',
-      label: 'Director',
+      label: t('tools.og-meta-generator.videoMovie.director.label'),
       key: 'video:director',
-      placeholder: 'Name of the director...',
+      placeholder: t('tools.og-meta-generator.videoMovie.director.placeholder'),
     },
-    { type: 'input-multiple', label: 'Writer', key: 'video:writer', placeholder: 'Writers of the movie...' },
-    { type: 'input', label: 'Duration', key: 'video:duration', placeholder: 'The movie\'s length in seconds...' },
+    { type: 'input-multiple', label: t('tools.og-meta-generator.videoMovie.writer.label'), key: 'video:writer', placeholder: t('tools.og-meta-generator.videoMovie.writer.placeholder') },
+    { type: 'input', label: t('tools.og-meta-generator.videoMovie.duration.label'), key: 'video:duration', placeholder: t('tools.og-meta-generator.videoMovie.duration.placeholder') },
     {
       type: 'input',
-      label: 'Release date',
+      label: t('tools.og-meta-generator.videoMovie.releaseDate.label'),
       key: 'video:release_date',
-      placeholder: 'The date the movie was released...',
+      placeholder: t('tools.og-meta-generator.videoMovie.releaseDate.placeholder'),
     },
-    { type: 'input', label: 'Tag', key: 'video:tag', placeholder: 'Tag words associated with this movie...' },
+    { type: 'input', label: t('tools.og-meta-generator.videoMovie.tag.label'), key: 'video:tag', placeholder: t('tools.og-meta-generator.videoMovie.tag.placeholder') },
   ],
 };
diff --git a/src/tools/meta-tag-generator/og-schemas/videoOther.ts b/src/tools/meta-tag-generator/og-schemas/videoOther.ts
index 5bc9679e..b842b1d6 100644
--- a/src/tools/meta-tag-generator/og-schemas/videoOther.ts
+++ b/src/tools/meta-tag-generator/og-schemas/videoOther.ts
@@ -1,7 +1,8 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
 import { videoMovie } from './videoMovie';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const videoOther: OGSchemaType = {
-  name: 'Other video details',
+  name: t('tools.og-meta-generator.videoOther.title'),
   elements: [...videoMovie.elements],
 };
diff --git a/src/tools/meta-tag-generator/og-schemas/videoTVShow.ts b/src/tools/meta-tag-generator/og-schemas/videoTVShow.ts
index 5180c03b..8c660019 100644
--- a/src/tools/meta-tag-generator/og-schemas/videoTVShow.ts
+++ b/src/tools/meta-tag-generator/og-schemas/videoTVShow.ts
@@ -1,7 +1,8 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
 import { videoMovie } from './videoMovie';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const videoTVShow: OGSchemaType = {
-  name: 'TV show details',
+  name: t('tools.og-meta-generator.videoTVShow.title'),
   elements: [...videoMovie.elements],
 };
diff --git a/src/tools/meta-tag-generator/og-schemas/website.ts b/src/tools/meta-tag-generator/og-schemas/website.ts
index 15053e3d..09fa92a5 100644
--- a/src/tools/meta-tag-generator/og-schemas/website.ts
+++ b/src/tools/meta-tag-generator/og-schemas/website.ts
@@ -1,55 +1,56 @@
 import type { OGSchemaType } from '../OGSchemaType.type';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 const typeOptions = [
-  { label: 'Website', value: 'website' },
-  { label: 'Article', value: 'article' },
-  { label: 'Book', value: 'book' },
-  { label: 'Profile', value: 'profile' },
+  { label: t('tools.og-meta-generator.website.web'), value: 'website' },
+  { label: t('tools.og-meta-generator.website.article'), value: 'article' },
+  { label: t('tools.og-meta-generator.website.book'), value: 'book' },
+  { label: t('tools.og-meta-generator.website.profile'), value: 'profile' },
   {
     type: 'group',
-    label: 'Music',
+    label: t('tools.og-meta-generator.website.music.label'),
     key: 'Music',
     children: [
-      { label: 'Song', value: 'music.song' },
-      { label: 'Music album', value: 'music.album' },
-      { label: 'Playlist', value: 'music.playlist' },
-      { label: 'Radio station', value: 'music.radio_station' },
+      { label: t('tools.og-meta-generator.website.music.song'), value: 'music.song' },
+      { label: t('tools.og-meta-generator.website.music.musicAlbum'), value: 'music.album' },
+      { label: t('tools.og-meta-generator.website.music.playlist'), value: 'music.playlist' },
+      { label: t('tools.og-meta-generator.website.music.radioStation'), value: 'music.radio_station' },
     ],
   },
   {
     type: 'group',
-    label: 'Video',
+    label: t('tools.og-meta-generator.website.video.label'),
     key: 'Video',
     children: [
-      { label: 'Movie', value: 'video.movie' },
-      { label: 'Episode', value: 'video.episode' },
-      { label: 'TV show', value: 'video.tv_show' },
-      { label: 'Other video', value: 'video.other' },
+      { label: t('tools.og-meta-generator.website.video.movie'), value: 'video.movie' },
+      { label: t('tools.og-meta-generator.website.video.episode'), value: 'video.episode' },
+      { label: t('tools.og-meta-generator.website.video.tvShow'), value: 'video.tv_show' },
+      { label: t('tools.og-meta-generator.website.video.otherVideo'), value: 'video.other' },
     ],
   },
 ];
 
 export const website: OGSchemaType = {
-  name: 'General information',
+  name: t('tools.og-meta-generator.website.title'),
   elements: [
     {
       type: 'select',
-      label: 'Page type',
-      placeholder: 'Select the type of your website...',
+      label: t('tools.og-meta-generator.website.pageType.label'),
+      placeholder: t('tools.og-meta-generator.website.pageType.placeholder'),
       key: 'type',
       options: typeOptions,
     },
-    { type: 'input', label: 'Title', placeholder: 'Enter the title of your website...', key: 'title' },
+    { type: 'input', label: t('tools.og-meta-generator.website.pageTitle.label'), placeholder: t('tools.og-meta-generator.website.pageTitle.placeholder'), key: 'title' },
     {
       type: 'input',
-      label: 'Description',
-      placeholder: 'Enter the description of your website...',
+      label: t('tools.og-meta-generator.website.description.label'),
+      placeholder: t('tools.og-meta-generator.website.description.placeholder'),
       key: 'description',
     },
     {
       type: 'input',
-      label: 'Page URL',
-      placeholder: 'Enter the url of your website...',
+      label: t('tools.og-meta-generator.website.url.label'),
+      placeholder: t('tools.og-meta-generator.website.url.placeholder'),
       key: 'url',
     },
   ],
diff --git a/src/tools/mime-types/index.ts b/src/tools/mime-types/index.ts
index 25e56404..7d29399d 100644
--- a/src/tools/mime-types/index.ts
+++ b/src/tools/mime-types/index.ts
@@ -1,10 +1,11 @@
 import { World } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Mime types',
+  name: t('tools.mime-types.title'),
   path: '/mime-types',
-  description: 'Convert mime types to extensions and vice-versa.',
+  description: t('tools.mime-types.description'),
   keywords: ['mime', 'types', 'extension', 'content', 'type'],
   component: () => import('./mime-types.vue'),
   icon: World,
diff --git a/src/tools/mime-types/locales/en.yml b/src/tools/mime-types/locales/en.yml
new file mode 100644
index 00000000..de453522
--- /dev/null
+++ b/src/tools/mime-types/locales/en.yml
@@ -0,0 +1,23 @@
+tools:
+  mime-types:
+    title: Mime types
+    description: Convert mime types to extensions and vice-versa.
+
+    mimeType:
+      title: Mime type to extension
+      description: Know which file extensions are associated to a mime-type
+      placeholder: 'Select your mimetype here... (ex: application/pdf)'
+      extensionsFound:
+        before: 'Extensions of files with the '
+        after: ' mime-type:'
+    extension:
+      title: File extension to mime type
+      description: Know which mime type is associated to a file extension
+      placeholder: 'Select your mimetype here... (ex: application/pdf)'
+      selectedExtension:
+        before: 'Mime type associated to the extension '
+        after: ' file'
+        ext: 'extension:'
+    table:
+      mimeTypes: Mime types
+      extensions: Extensions
diff --git a/src/tools/mime-types/locales/zh.yml b/src/tools/mime-types/locales/zh.yml
new file mode 100644
index 00000000..88f02c61
--- /dev/null
+++ b/src/tools/mime-types/locales/zh.yml
@@ -0,0 +1,23 @@
+tools:
+  mime-types:
+    title: MIME 类型
+    description: 将 MIME 类型转换为扩展名，反之亦然。
+
+    mimeType:
+      title: MIME 类型转扩展名
+      description: 知道哪些文件扩展名与特定 MIME 类型相关联
+      placeholder: '在此处选择您的 MIME 类型...（例如：application/pdf）'
+      extensionsFound:
+        before: '具有'
+        after: ' MIME 类型的文件扩展名：'
+    extension:
+      title: 文件扩展名转 MIME 类型
+      description: 知道哪种 MIME 类型与文件扩展名相关联
+      placeholder: '在此处选择您的 MIME 类型...（例如：application/pdf）'
+      selectedExtension:
+        before: '与扩展名'
+        after: '相关联的 MIME 类型：'
+        ext: '扩展名：'
+    table:
+      mimeTypes: MIME 类型
+      extensions: 扩展名
diff --git a/src/tools/mime-types/mime-types.vue b/src/tools/mime-types/mime-types.vue
index 3bd76119..17c11314 100644
--- a/src/tools/mime-types/mime-types.vue
+++ b/src/tools/mime-types/mime-types.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { types as extensionToMimeType, extensions as mimeTypeToExtension } from 'mime-types';
 
+const { t } = useI18n();
+
 const mimeInfos = Object.entries(mimeTypeToExtension).map(([mimeType, extensions]) => ({ mimeType, extensions }));
 
 const mimeToExtensionsOptions = Object.keys(mimeTypeToExtension).map(label => ({ label, value: label }));
@@ -21,23 +23,23 @@ const mimeTypeFound = computed(() => (selectedExtension.value ? extensionToMimeT
 <template>
   <c-card>
     <n-h2 style="margin-bottom: 0">
-      Mime type to extension
+      {{ t('tools.mime-types.mimeType.title') }}
     </n-h2>
     <div style="opacity: 0.8">
-      Know which file extensions are associated to a mime-type
+      {{ t('tools.mime-types.mimeType.description') }}
     </div>
     <c-select
       v-model:value="selectedMimeType"
       searchable
       my-4
       :options="mimeToExtensionsOptions"
-      placeholder="Select your mimetype here... (ex: application/pdf)"
+      :placeholder="t('tools.mime-types.mimeType.placeholder')"
     />
 
     <div v-if="extensionsFound.length > 0">
-      Extensions of files with the <n-tag round :bordered="false">
+      {{ t('tools.mime-types.mimeType.extensionsFound.before') }}<n-tag round :bordered="false">
         {{ selectedMimeType }}
-      </n-tag> mime-type:
+      </n-tag>{{ t('tools.mime-types.mimeType.extensionsFound.after') }}
       <div style="margin-top: 10px">
         <n-tag
           v-for="extension of extensionsFound"
@@ -55,24 +57,24 @@ const mimeTypeFound = computed(() => (selectedExtension.value ? extensionToMimeT
 
   <c-card>
     <n-h2 style="margin-bottom: 0">
-      File extension to mime type
+      {{ t('tools.mime-types.extension.title') }}
     </n-h2>
     <div style="opacity: 0.8">
-      Know which mime type is associated to a file extension
+      {{ t('tools.mime-types.extension.description') }}
     </div>
     <c-select
       v-model:value="selectedExtension"
       searchable
       my-4
       :options="extensionToMimeTypeOptions"
-      placeholder="Select your mimetype here... (ex: application/pdf)"
+      :placeholder="t('tools.mime-types.extension.placeholder')"
     />
 
     <div v-if="selectedExtension">
-      Mime type associated to the extension <n-tag round :bordered="false">
+      {{ t('tools.mime-types.extension.selectedExtension.before') }}<n-tag round :bordered="false">
         {{ selectedExtension }}
-      </n-tag> file
-      extension:
+      </n-tag>{{ t('tools.mime-types.extension.selectedExtension.after') }}
+      {{ t('tools.mime-types.extension.selectedExtension.ext') }}
       <div style="margin-top: 10px">
         <n-tag round :bordered="false" type="primary" style="margin-right: 10px">
           {{ mimeTypeFound }}
@@ -85,8 +87,8 @@ const mimeTypeFound = computed(() => (selectedExtension.value ? extensionToMimeT
     <n-table>
       <thead>
         <tr>
-          <th>Mime types</th>
-          <th>Extensions</th>
+          <th>{{ t('tools.mime-types.table.mimeTypes') }}</th>
+          <th>{{ t('tools.mime-types.table.extensions') }}</th>
         </tr>
       </thead>
       <tbody>
diff --git a/src/tools/otp-code-generator-and-validator/index.ts b/src/tools/otp-code-generator-and-validator/index.ts
index 914368b6..5cb28fe6 100644
--- a/src/tools/otp-code-generator-and-validator/index.ts
+++ b/src/tools/otp-code-generator-and-validator/index.ts
@@ -1,10 +1,11 @@
 import { DeviceMobile } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'OTP code generator',
+  name: t('tools.otp-generator.title'),
   path: '/otp-generator',
-  description: 'Generate and validate time-based OTP (one time password) for multi-factor authentication.',
+  description: t('tools.otp-generator.description'),
   keywords: [
     'otp',
     'code',
diff --git a/src/tools/otp-code-generator-and-validator/locales/en.yml b/src/tools/otp-code-generator-and-validator/locales/en.yml
new file mode 100644
index 00000000..219a5931
--- /dev/null
+++ b/src/tools/otp-code-generator-and-validator/locales/en.yml
@@ -0,0 +1,30 @@
+tools:
+  otp-generator:
+    title: OTP code generator
+    description: Generate and validate time-based OTP (one time password) for multi-factor authentication.
+
+    secretLabel: Secret
+    secretPlaceholder: Paste your TOTP secret...
+    generate: Generate a new random secret
+    timeLeft: Next in {second}s
+    keyUri: Open Key URI in new tab
+    hexadecimalLabel: Secret in hexadecimal
+    hexadecimalPlaceholder: Secret in hex will be displayed here
+    epochLabel: Epoch
+    epochPlaceholder: Epoch in sec will be displayed here
+    iteration: Iteration
+    countLabel: 'Count:'
+    countPlaceholder: Iteration count will be displayed here
+    paddedHexLabel: 'Padded hex:'
+    paddedHexPlaceholder: Iteration count in hex will be displayed here
+
+    previous: Previous
+    currentOTP: Current OTP
+    next: Next
+    copied: Copied !
+    copyPreviousOTP: Copy previous OTP
+    copyCurrentOTP: Copy current OTP
+    copyNextOTP: Copy next OTP
+
+    typeErrorMessage: Secret should be a base32 string
+    invalidMessage: Please set a secret
diff --git a/src/tools/otp-code-generator-and-validator/locales/zh.yml b/src/tools/otp-code-generator-and-validator/locales/zh.yml
new file mode 100644
index 00000000..20e9efa7
--- /dev/null
+++ b/src/tools/otp-code-generator-and-validator/locales/zh.yml
@@ -0,0 +1,30 @@
+tools:
+  otp-generator:
+    title: OTP 验证码生成器
+    description: 生成和验证基于时间的 OTP（一次性密码）以进行多因素身份验证。
+
+    secretLabel: 密钥
+    secretPlaceholder: 粘贴您的 TOTP 密钥...
+    generate: 生成一个新的随机密钥
+    timeLeft: 还剩 {second} 秒
+    keyUri: 在新标签页中打开 Key URI
+    hexadecimalLabel: 十六进制密钥
+    hexadecimalPlaceholder: 十六进制密钥将显示在此处
+    epochLabel: 历元
+    epochPlaceholder: 秒数将显示在此处
+    iteration: 迭代
+    countLabel: '计数：'
+    countPlaceholder: 迭代计数将显示在此处
+    paddedHexLabel: '填充的十六进制：'
+    paddedHexPlaceholder: 十六进制迭代计数将显示在此处
+
+    previous: 上一个
+    currentOTP: 当前 OTP
+    next: 下一个
+    copied: 已复制！
+    copyPreviousOTP: 复制上一个 OTP
+    copyCurrentOTP: 复制当前 OTP
+    copyNextOTP: 复制下一个 OTP
+
+    typeErrorMessage: 密钥应为 base32 字符串
+    invalidMessage: 请设置一个密钥
diff --git a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
index 6bd881c0..aa791079 100644
--- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
+++ b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
@@ -8,6 +8,7 @@ import { useStyleStore } from '@/stores/style.store';
 import InputCopyable from '@/components/InputCopyable.vue';
 import { computedRefreshable } from '@/composable/computedRefreshable';
 
+const { t } = useI18n();
 const now = useTimestamp();
 const interval = computed(() => (now.value / 1000) % 30);
 const theme = useThemeVars();
@@ -41,11 +42,11 @@ const { qrcode } = useQRCode({
 
 const secretValidationRules = [
   {
-    message: 'Secret should be a base32 string',
+    message: t('tools.otp-generator.typeErrorMessage'),
     validator: (value: string) => value.toUpperCase().match(/^[A-Z234567]+$/),
   },
   {
-    message: 'Please set a secret',
+    message: t('tools.otp-generator.invalidMessage'),
     validator: (value: string) => value !== '',
   },
 ];
@@ -55,13 +56,13 @@ const secretValidationRules = [
   <div style="max-width: 350px">
     <c-input-text
       v-model:value="secret"
-      label="Secret"
-      placeholder="Paste your TOTP secret..."
+      :label="t('tools.otp-generator.secretLabel')"
+      :placeholder="t('tools.otp-generator.secretPlaceholder')"
       mb-5
       :validation-rules="secretValidationRules"
     >
       <template #suffix>
-        <c-tooltip tooltip="Generate a new random secret">
+        <c-tooltip :tooltip="t('tools.otp-generator.generate')">
           <c-button circle variant="text" size="small" @click="refreshSecret">
             <icon-mdi-refresh />
           </c-button>
@@ -74,53 +75,49 @@ const secretValidationRules = [
 
       <n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" />
       <div style="text-align: center">
-        Next in {{ String(Math.floor(30 - interval)).padStart(2, '0') }}s
+        {{ t('tools.otp-generator.timeLeft', { second: String(Math.floor(30 - interval)).padStart(2, '0') }) }}
       </div>
     </div>
     <div mt-4 flex flex-col items-center justify-center gap-3>
       <n-image :src="qrcode" />
       <c-button :href="keyUri" target="_blank">
-        Open Key URI in new tab
+        {{ t('tools.otp-generator.keyUri') }}
       </c-button>
     </div>
   </div>
   <div style="max-width: 350px">
     <InputCopyable
-      label="Secret in hexadecimal"
+      :label="t('tools.otp-generator.hexadecimalLabel')"
       :value="base32toHex(secret)"
       readonly
-      placeholder="Secret in hex will be displayed here"
+      :placeholder="t('tools.otp-generator.hexadecimalPlaceholder')"
       mb-5
     />
 
     <InputCopyable
-      label="Epoch"
+      :label="t('tools.otp-generator.epochLabel')"
       :value="Math.floor(now / 1000).toString()"
       readonly
       mb-5
-      placeholder="Epoch in sec will be displayed here"
+      :placeholder="t('tools.otp-generator.epochPlaceholder')"
     />
 
-    <p>Iteration</p>
+    <p>{{ t('tools.otp-generator.iteration') }}</p>
 
     <InputCopyable
       :value="String(getCounterFromTime({ now, timeStep: 30 }))"
       readonly
-      label="Count:"
-      label-position="left"
-      label-width="90px"
-      label-align="right"
-      placeholder="Iteration count will be displayed here"
+      :label="t('tools.otp-generator.countLabel')"
+      :placeholder="t('tools.otp-generator.countPlaceholder')"
+      mb-5
     />
 
     <InputCopyable
       :value="getCounterFromTime({ now, timeStep: 30 }).toString(16).padStart(16, '0')"
       readonly
-      placeholder="Iteration count in hex will be displayed here"
-      label-position="left"
-      label-width="90px"
-      label-align="right"
-      label="Padded hex:"
+      :placeholder="t('tools.otp-generator.paddedHexPlaceholder')"
+      :label="t('tools.otp-generator.paddedHexLabel')"
+      mb-5
     />
   </div>
 </template>
diff --git a/src/tools/otp-code-generator-and-validator/token-display.vue b/src/tools/otp-code-generator-and-validator/token-display.vue
index 317f0831..38c52477 100644
--- a/src/tools/otp-code-generator-and-validator/token-display.vue
+++ b/src/tools/otp-code-generator-and-validator/token-display.vue
@@ -6,6 +6,7 @@ const { copy: copyPrevious, isJustCopied: previousCopied } = useCopy({ createToa
 const { copy: copyCurrent, isJustCopied: currentCopied } = useCopy({ createToast: false });
 const { copy: copyNext, isJustCopied: nextCopied } = useCopy({ createToast: false });
 
+const { t } = useI18n();
 const { tokens } = toRefs(props);
 </script>
 
@@ -13,29 +14,29 @@ const { tokens } = toRefs(props);
   <div>
     <div mb-5px w-full flex items-center>
       <div flex-1 text-left>
-        Previous
+        {{ t('tools.otp-generator.previous') }}
       </div>
       <div flex-1 text-center>
-        Current OTP
+        {{ t('tools.otp-generator.currentOTP') }}
       </div>
       <div flex-1 text-right>
         Next
       </div>
     </div>
     <div flex items-center>
-      <c-tooltip :tooltip="previousCopied ? 'Copied !' : 'Copy previous OTP'" position="bottom" flex-1>
+      <c-tooltip :tooltip="previousCopied ? t('tools.otp-generator.copied') : t('tools.otp-generator.copyPreviousOTP')" position="bottom" flex-1>
         <c-button data-test-id="previous-otp" w-full important:h-12 important:rounded-r-none important:font-mono @click.prevent="copyPrevious(tokens.previous)">
           {{ tokens.previous }}
         </c-button>
       </c-tooltip>
-      <c-tooltip :tooltip="currentCopied ? 'Copied !' : 'Copy current OTP'" position="bottom" flex-1 flex-basis-5xl>
+      <c-tooltip :tooltip="currentCopied ? t('tools.otp-generator.copied') : t('tools.otp-generator.copyCurrentOTP')" position="bottom" flex-1 flex-basis-5xl>
         <c-button
           data-test-id="current-otp" w-full important:border-x="1px solid gray op-40" important:h-12 important:rounded-0 important:text-22px @click.prevent="copyCurrent(tokens.current)"
         >
           {{ tokens.current }}
         </c-button>
       </c-tooltip>
-      <c-tooltip :tooltip="nextCopied ? 'Copied !' : 'Copy next OTP'" position="bottom" flex-1>
+      <c-tooltip :tooltip="nextCopied ? t('tools.otp-generator.copied') : t('tools.otp-generator.copyNextOTP')" position="bottom" flex-1>
         <c-button data-test-id="next-otp" w-full important:h-12 important:rounded-l-none @click.prevent="copyNext(tokens.next)">
           {{ tokens.next }}
         </c-button>
diff --git a/src/tools/password-strength-analyser/index.ts b/src/tools/password-strength-analyser/index.ts
index 2c2635d5..7fbaa383 100644
--- a/src/tools/password-strength-analyser/index.ts
+++ b/src/tools/password-strength-analyser/index.ts
@@ -1,11 +1,11 @@
 import { defineTool } from '../tool';
 import PasswordIcon from '~icons/mdi/form-textbox-password';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.password-strength-analyser.title'),
+  name: t('tools.password-strength-analyser.title'),
   path: '/password-strength-analyser',
-  description: translate('tools.password-strength-analyser.description'),
+  description: t('tools.password-strength-analyser.description'),
   keywords: ['password', 'strength', 'analyser', 'and', 'crack', 'time', 'estimation', 'brute', 'force', 'attack', 'entropy', 'cracking', 'hash', 'hashing', 'algorithm', 'algorithms', 'md5', 'sha1', 'sha256', 'sha512', 'bcrypt', 'scrypt', 'argon2', 'argon2id', 'argon2i', 'argon2d'],
   component: () => import('./password-strength-analyser.vue'),
   icon: PasswordIcon,
diff --git a/src/tools/password-strength-analyser/password-strength-analyser.service.ts b/src/tools/password-strength-analyser/password-strength-analyser.service.ts
index bb877364..b5f5cbe4 100644
--- a/src/tools/password-strength-analyser/password-strength-analyser.service.ts
+++ b/src/tools/password-strength-analyser/password-strength-analyser.service.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export { getPasswordCrackTimeEstimation, getCharsetLength };
 
@@ -12,24 +12,24 @@ function prettifyExponentialNotation(exponentialNotation: number) {
 
 function getHumanFriendlyDuration({ seconds }: { seconds: number }) {
   if (seconds <= 0.001) {
-    return translate('tools.password-strength-analyser.instantly');
+    return t('tools.password-strength-analyser.instantly');
   }
 
   if (seconds <= 1) {
-    return translate('tools.password-strength-analyser.lessThanASecond');
+    return t('tools.password-strength-analyser.lessThanASecond');
   }
 
   const timeUnits = [
-    { unit: translate('tools.password-strength-analyser.millenium'), secondsInUnit: 31536000000, format: prettifyExponentialNotation, plural: translate('tools.password-strength-analyser.millennia') },
-    { unit: translate('tools.password-strength-analyser.century'), secondsInUnit: 3153600000, plural: translate('tools.password-strength-analyser.centuries') },
-    { unit: translate('tools.password-strength-analyser.decade'), secondsInUnit: 315360000, plural: translate('tools.password-strength-analyser.decades') },
-    { unit: translate('tools.password-strength-analyser.year'), secondsInUnit: 31536000, plural: translate('tools.password-strength-analyser.years') },
-    { unit: translate('tools.password-strength-analyser.month'), secondsInUnit: 2592000, plural: translate('tools.password-strength-analyser.months') },
-    { unit: translate('tools.password-strength-analyser.week'), secondsInUnit: 604800, plural: translate('tools.password-strength-analyser.weeks') },
-    { unit: translate('tools.password-strength-analyser.day'), secondsInUnit: 86400, plural: translate('tools.password-strength-analyser.days') },
-    { unit: translate('tools.password-strength-analyser.hour'), secondsInUnit: 3600, plural: translate('tools.password-strength-analyser.hours') },
-    { unit: translate('tools.password-strength-analyser.minute'), secondsInUnit: 60, plural: translate('tools.password-strength-analyser.minutes') },
-    { unit: translate('tools.password-strength-analyser.second'), secondsInUnit: 1, plural: translate('tools.password-strength-analyser.seconds') },
+    { unit: t('tools.password-strength-analyser.millenium'), secondsInUnit: 31536000000, format: prettifyExponentialNotation, plural: t('tools.password-strength-analyser.millennia') },
+    { unit: t('tools.password-strength-analyser.century'), secondsInUnit: 3153600000, plural: t('tools.password-strength-analyser.centuries') },
+    { unit: t('tools.password-strength-analyser.decade'), secondsInUnit: 315360000, plural: t('tools.password-strength-analyser.decades') },
+    { unit: t('tools.password-strength-analyser.year'), secondsInUnit: 31536000, plural: t('tools.password-strength-analyser.years') },
+    { unit: t('tools.password-strength-analyser.month'), secondsInUnit: 2592000, plural: t('tools.password-strength-analyser.months') },
+    { unit: t('tools.password-strength-analyser.week'), secondsInUnit: 604800, plural: t('tools.password-strength-analyser.weeks') },
+    { unit: t('tools.password-strength-analyser.day'), secondsInUnit: 86400, plural: t('tools.password-strength-analyser.days') },
+    { unit: t('tools.password-strength-analyser.hour'), secondsInUnit: 3600, plural: t('tools.password-strength-analyser.hours') },
+    { unit: t('tools.password-strength-analyser.minute'), secondsInUnit: 60, plural: t('tools.password-strength-analyser.minutes') },
+    { unit: t('tools.password-strength-analyser.second'), secondsInUnit: 1, plural: t('tools.password-strength-analyser.seconds') },
   ];
 
   return _.chain(timeUnits)
diff --git a/src/tools/pdf-signature-checker/index.ts b/src/tools/pdf-signature-checker/index.ts
index 2619c492..7c4171ef 100644
--- a/src/tools/pdf-signature-checker/index.ts
+++ b/src/tools/pdf-signature-checker/index.ts
@@ -1,11 +1,11 @@
 import { defineTool } from '../tool';
 import FileCertIcon from '~icons/mdi/file-certificate-outline';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.pdf-signature-checker.title'),
+  name: t('tools.pdf-signature-checker.title'),
   path: '/pdf-signature-checker',
-  description: translate('tools.pdf-signature-checker.description'),
+  description: t('tools.pdf-signature-checker.description'),
   keywords: ['pdf', 'signature', 'checker', 'verify', 'validate', 'sign'],
   component: () => import('./pdf-signature-checker.vue'),
   icon: FileCertIcon,
diff --git a/src/tools/roman-numeral-converter/index.ts b/src/tools/roman-numeral-converter/index.ts
index 6929747f..39dfb565 100644
--- a/src/tools/roman-numeral-converter/index.ts
+++ b/src/tools/roman-numeral-converter/index.ts
@@ -1,11 +1,11 @@
 import { LetterX } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.roman-numeral-converter.title'),
+  name: t('tools.roman-numeral-converter.title'),
   path: '/roman-numeral-converter',
-  description: translate('tools.roman-numeral-converter.description'),
+  description: t('tools.roman-numeral-converter.description'),
   keywords: ['roman', 'arabic', 'converter', 'X', 'I', 'V', 'L', 'C', 'D', 'M'],
   component: () => import('./roman-numeral-converter.vue'),
   icon: LetterX,
diff --git a/src/tools/rsa-key-pair-generator/index.ts b/src/tools/rsa-key-pair-generator/index.ts
index 3d034e5b..46285562 100644
--- a/src/tools/rsa-key-pair-generator/index.ts
+++ b/src/tools/rsa-key-pair-generator/index.ts
@@ -1,11 +1,11 @@
 import { Certificate } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.rsa-key-pair-generator.title'),
+  name: t('tools.rsa-key-pair-generator.title'),
   path: '/rsa-key-pair-generator',
-  description: translate('tools.rsa-key-pair-generator.description'),
+  description: t('tools.rsa-key-pair-generator.description'),
   keywords: ['rsa', 'key', 'pair', 'generator', 'public', 'private', 'secret', 'ssh', 'pem'],
   component: () => import('./rsa-key-pair-generator.vue'),
   icon: Certificate,
diff --git a/src/tools/slugify-string/locales/en.yml b/src/tools/slugify-string/locales/en.yml
new file mode 100644
index 00000000..7161b20d
--- /dev/null
+++ b/src/tools/slugify-string/locales/en.yml
@@ -0,0 +1,4 @@
+tools:
+  slugify-string:
+    title: Slugify string
+    description: Make a string url, filename and id safe.
diff --git a/src/tools/text-to-binary/index.ts b/src/tools/text-to-binary/index.ts
index ce0f87ea..d33b1666 100644
--- a/src/tools/text-to-binary/index.ts
+++ b/src/tools/text-to-binary/index.ts
@@ -1,11 +1,11 @@
 import { Binary } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.text-to-binary.title'),
+  name: t('tools.text-to-binary.title'),
   path: '/text-to-binary',
-  description: translate('tools.text-to-binary.description'),
+  description: t('tools.text-to-binary.description'),
   keywords: ['text', 'to', 'binary', 'converter', 'encode', 'decode', 'ascii'],
   component: () => import('./text-to-binary.vue'),
   icon: Binary,
diff --git a/src/tools/text-to-binary/text-to-binary.models.ts b/src/tools/text-to-binary/text-to-binary.models.ts
index 8b7cf35d..1e7561c6 100644
--- a/src/tools/text-to-binary/text-to-binary.models.ts
+++ b/src/tools/text-to-binary/text-to-binary.models.ts
@@ -1,4 +1,4 @@
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export { convertTextToAsciiBinary, convertAsciiBinaryToText };
 
@@ -13,7 +13,7 @@ function convertAsciiBinaryToText(binary: string): string {
   const cleanBinary = binary.replace(/[^01]/g, '');
 
   if (cleanBinary.length % 8) {
-    throw new Error(translate('tools.text-to-binary.invalidBinaryString'));
+    throw new Error(t('tools.text-to-binary.invalidBinaryString'));
   }
 
   return cleanBinary
diff --git a/src/tools/text-to-nato-alphabet/index.ts b/src/tools/text-to-nato-alphabet/index.ts
index 43b72fb4..d208054e 100644
--- a/src/tools/text-to-nato-alphabet/index.ts
+++ b/src/tools/text-to-nato-alphabet/index.ts
@@ -1,11 +1,11 @@
 import { Speakerphone } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.text-to-nato-alphabet.title'),
+  name: t('tools.text-to-nato-alphabet.title'),
   path: '/text-to-nato-alphabet',
-  description: translate('tools.text-to-nato-alphabet.description'),
+  description: t('tools.text-to-nato-alphabet.description'),
   keywords: ['string', 'nato', 'alphabet', 'phonetic', 'oral', 'transmission'],
   component: () => import('./text-to-nato-alphabet.vue'),
   icon: Speakerphone,
diff --git a/src/tools/token-generator/index.ts b/src/tools/token-generator/index.ts
index 73cc3fef..b6d4a076 100644
--- a/src/tools/token-generator/index.ts
+++ b/src/tools/token-generator/index.ts
@@ -1,11 +1,11 @@
 import { ArrowsShuffle } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.token-generator.title'),
+  name: t('tools.token-generator.title'),
   path: '/token-generator',
-  description: translate('token-generator.description'),
+  description: t('tools.token-generator.description'),
   keywords: [
     'token',
     'random',
diff --git a/src/tools/toml-to-json/index.ts b/src/tools/toml-to-json/index.ts
index 77a1b26e..29aaaee7 100644
--- a/src/tools/toml-to-json/index.ts
+++ b/src/tools/toml-to-json/index.ts
@@ -1,12 +1,12 @@
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 import BracketIcon from '~icons/mdi/code-brackets';
 
 export const tool = defineTool({
-  name: translate('tools.toml-to-json.title'),
+  name: t('tools.toml-to-json.title'),
   path: '/toml-to-json',
-  description: translate('tools.toml-to-json.description'),
+  description: t('tools.toml-to-json.description'),
   keywords: ['toml', 'json', 'convert', 'online', 'transform', 'parser'],
   component: () => import('./toml-to-json.vue'),
   icon: BracketIcon,
diff --git a/src/tools/toml-to-yaml/index.ts b/src/tools/toml-to-yaml/index.ts
index c71cf687..7ce393a9 100644
--- a/src/tools/toml-to-yaml/index.ts
+++ b/src/tools/toml-to-yaml/index.ts
@@ -1,12 +1,12 @@
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 import BracketIcon from '~icons/mdi/code-brackets';
 
 export const tool = defineTool({
-  name: translate('tools.toml-to-yaml.title'),
+  name: t('tools.toml-to-yaml.title'),
   path: '/toml-to-yaml',
-  description: translate('tools.toml-to-yaml.description'),
+  description: t('tools.toml-to-yaml.description'),
   keywords: ['toml', 'yaml', 'convert', 'online', 'transform', 'parse'],
   component: () => import('./toml-to-yaml.vue'),
   icon: BracketIcon,
diff --git a/src/tools/ulid-generator/index.ts b/src/tools/ulid-generator/index.ts
index c12679a7..da38284b 100644
--- a/src/tools/ulid-generator/index.ts
+++ b/src/tools/ulid-generator/index.ts
@@ -1,11 +1,11 @@
 import { SortDescendingNumbers } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.ulid-generator.title'),
+  name: t('tools.ulid-generator.title'),
   path: '/ulid-generator',
-  description: translate('tools.ulid-generator.description'),
+  description: t('tools.ulid-generator.description'),
   keywords: ['ulid', 'generator', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique'],
   component: () => import('./ulid-generator.vue'),
   icon: SortDescendingNumbers,
diff --git a/src/tools/url-encoder/index.ts b/src/tools/url-encoder/index.ts
index bd19b890..372eb05f 100644
--- a/src/tools/url-encoder/index.ts
+++ b/src/tools/url-encoder/index.ts
@@ -1,10 +1,11 @@
 import { Link } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Encode/decode url formatted strings',
+  name: t('tools.url-encoder.title'),
   path: '/url-encoder',
-  description: 'Encode to url-encoded format (also known as "percent-encoded") or decode from it.',
+  description: t('tools.url-encoder.description'),
   keywords: ['url', 'encode', 'decode', 'percent', '%20', 'format'],
   component: () => import('./url-encoder.vue'),
   icon: Link,
diff --git a/src/tools/url-encoder/locales/en.yml b/src/tools/url-encoder/locales/en.yml
new file mode 100644
index 00000000..fad563d9
--- /dev/null
+++ b/src/tools/url-encoder/locales/en.yml
@@ -0,0 +1,23 @@
+tools:
+  url-encoder:
+    title: Encode/decode url formatted strings
+    description: Encode to url-encoded format (also known as "percent-encoded") or decode from it.
+
+    encode:
+      title: Encode
+      inputLabel: 'Your string :'
+      inputPlaceholder: The string to encode
+      outputLabel: 'Your string encoded :'
+      outputPlaceholder: Your string encoded
+      copied: Encoded string copied to the clipboard
+      inValidMessage: Impossible to parse this string
+    decode:
+      title: Decode
+      inputLabel: 'Your encoded string :'
+      inputPlaceholder: The string to decode
+      outputLabel: 'Your string decoded :'
+      outputPlaceholder: Your string decoded
+      copied: Decoded string copied to the clipboard
+      inValidMessage: Impossible to parse this string
+
+    copy: Copy
diff --git a/src/tools/url-encoder/locales/zh.yml b/src/tools/url-encoder/locales/zh.yml
new file mode 100644
index 00000000..40bd37ba
--- /dev/null
+++ b/src/tools/url-encoder/locales/zh.yml
@@ -0,0 +1,23 @@
+tools:
+  url-encoder:
+    title: 编码/解码 URL 格式化字符串
+    description: 编码为 URL 编码格式（也称为 "百分比编码"）或从中解码。
+
+    encode:
+      title: 编码
+      inputLabel: '您的字符串：'
+      inputPlaceholder: 要编码的字符串
+      outputLabel: '您的字符串编码：'
+      outputPlaceholder: 您的字符串编码
+      copied: 编码字符串已复制到剪贴板
+      inValidMessage: 无法解析此字符串
+    decode:
+      title: 解码
+      inputLabel: '您的编码字符串：'
+      inputPlaceholder: 要解码的字符串
+      outputLabel: '您的字符串解码：'
+      outputPlaceholder: 您的字符串解码
+      copied: 解码字符串已复制到剪贴板
+      inValidMessage: 无法解析此字符串
+
+    copy: 复制
diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue
index c43f8193..caa117a5 100644
--- a/src/tools/url-encoder/url-encoder.vue
+++ b/src/tools/url-encoder/url-encoder.vue
@@ -4,6 +4,8 @@ import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
 
+const { t } = useI18n();
+
 const encodeInput = ref('Hello world :)');
 const encodeOutput = computed(() => withDefaultOnError(() => encodeURIComponent(encodeInput.value), ''));
 
@@ -12,12 +14,12 @@ const encodedValidation = useValidation({
   rules: [
     {
       validator: value => isNotThrowing(() => encodeURIComponent(value)),
-      message: 'Impossible to parse this string',
+      message: t('tools.url-encoder.encode.inValidMessage'),
     },
   ],
 });
 
-const { copy: copyEncoded } = useCopy({ source: encodeOutput, text: 'Encoded string copied to the clipboard' });
+const { copy: copyEncoded } = useCopy({ source: encodeOutput, text: t('tools.url-encoder.encode.copied') });
 
 const decodeInput = ref('Hello%20world%20%3A)');
 const decodeOutput = computed(() => withDefaultOnError(() => decodeURIComponent(decodeInput.value), ''));
@@ -27,70 +29,70 @@ const decodeValidation = useValidation({
   rules: [
     {
       validator: value => isNotThrowing(() => decodeURIComponent(value)),
-      message: 'Impossible to parse this string',
+      message: t('tools.url-encoder.decode.inValidMessage'),
     },
   ],
 });
 
-const { copy: copyDecoded } = useCopy({ source: decodeOutput, text: 'Decoded string copied to the clipboard' });
+const { copy: copyDecoded } = useCopy({ source: decodeOutput, text: t('tools.url-encoder.decode.copied') });
 </script>
 
 <template>
-  <c-card title="Encode">
+  <c-card :title="t('tools.url-encoder.encode.title')">
     <c-input-text
       v-model:value="encodeInput"
-      label="Your string :"
+      :label="t('tools.url-encoder.encode.inputLabel')"
       :validation="encodedValidation"
       multiline
       autosize
-      placeholder="The string to encode"
+      :placeholder="t('tools.url-encoder.encode.inputPlaceholder')"
       rows="2"
       mb-3
     />
 
     <c-input-text
-      label="Your string encoded :"
+      :label="t('tools.url-encoder.encode.outputLabel')"
       :value="encodeOutput"
       multiline
       autosize
       readonly
-      placeholder="Your string encoded"
+      :placeholder="t('tools.url-encoder.encode.outputPlaceholder')"
       rows="2"
       mb-3
     />
 
     <div flex justify-center>
       <c-button @click="copyEncoded()">
-        Copy
+        {{ t('tools.url-encoder.copy') }}
       </c-button>
     </div>
   </c-card>
-  <c-card title="Decode">
+  <c-card :title="t('tools.url-encoder.decode.title')">
     <c-input-text
       v-model:value="decodeInput"
-      label="Your encoded string :"
+      :label="t('tools.url-encoder.decode.inputLabel')"
       :validation="decodeValidation"
       multiline
       autosize
-      placeholder="The string to decode"
+      :placeholder="t('tools.url-encoder.decode.inputPlaceholder')"
       rows="2"
       mb-3
     />
 
     <c-input-text
-      label="Your string decoded :"
+      :label="t('tools.url-encoder.decode.outputLabel')"
       :value="decodeOutput"
       multiline
       autosize
       readonly
-      placeholder="Your string decoded"
+      :placeholder="t('tools.url-encoder.decode.outputPlaceholder')"
       rows="2"
       mb-3
     />
 
     <div flex justify-center>
       <c-button @click="copyDecoded()">
-        Copy
+        {{ t('tools.url-encoder.copy') }}
       </c-button>
     </div>
   </c-card>
diff --git a/src/tools/url-parser/index.ts b/src/tools/url-parser/index.ts
index d1c8dfe8..99462a80 100644
--- a/src/tools/url-parser/index.ts
+++ b/src/tools/url-parser/index.ts
@@ -1,11 +1,11 @@
 import { Unlink } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Url parser',
+  name: t('tools.url-parser.title'),
   path: '/url-parser',
-  description:
-    'Parse an url string to get all the different parts (protocol, origin, params, port, username-password, ...)',
+  description: t('tools.url-parser.description'),
   keywords: ['url', 'parser', 'protocol', 'origin', 'params', 'port', 'username', 'password', 'href'],
   component: () => import('./url-parser.vue'),
   icon: Unlink,
diff --git a/src/tools/url-parser/locales/en.yml b/src/tools/url-parser/locales/en.yml
new file mode 100644
index 00000000..ec4a6893
--- /dev/null
+++ b/src/tools/url-parser/locales/en.yml
@@ -0,0 +1,17 @@
+tools:
+  url-parser:
+    title: Url parser
+    description: Parse an url string to get all the different parts (protocol, origin, params, port, username-password, ...)
+
+    inputLabel: 'Your url to parse:'
+    inputPlaceholder: Your url to parse...
+
+    protocol: Protocol
+    username: Username
+    password: Password
+    hostname: Hostname
+    port: Port
+    path: Path
+    params: Params
+
+    inValidMessage: Invalid url
diff --git a/src/tools/url-parser/locales/zh.yml b/src/tools/url-parser/locales/zh.yml
new file mode 100644
index 00000000..9fa8f448
--- /dev/null
+++ b/src/tools/url-parser/locales/zh.yml
@@ -0,0 +1,17 @@
+tools:
+  url-parser:
+    title: Url 解析器
+    description: '解析 URL 字符串以获取所有不同部分（协议，源，参数，端口，用户名-密码，...）'
+
+    inputLabel: '要解析的 URL:'
+    inputPlaceholder: 要解析的 URL...
+
+    protocol: 协议
+    username: 用户名
+    password: 密码
+    hostname: 主机名
+    port: 端口
+    path: 路径
+    params: 参数
+
+    inValidMessage: 无效的 URL
diff --git a/src/tools/url-parser/url-parser.vue b/src/tools/url-parser/url-parser.vue
index 0799682f..a1bb28fa 100644
--- a/src/tools/url-parser/url-parser.vue
+++ b/src/tools/url-parser/url-parser.vue
@@ -3,24 +3,25 @@ import InputCopyable from '../../components/InputCopyable.vue';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
 
+const { t } = useI18n();
 const urlToParse = ref('https://me:pwd@it-tools.tech:3000/url-parser?key1=value&key2=value2#the-hash');
 
 const urlParsed = computed(() => withDefaultOnError(() => new URL(urlToParse.value), undefined));
 const urlValidationRules = [
   {
     validator: (value: string) => isNotThrowing(() => new URL(value)),
-    message: 'Invalid url',
+    message: t('tools.url-parser.inValidMessage'),
   },
 ];
 
 const properties: { title: string; key: keyof URL }[] = [
-  { title: 'Protocol', key: 'protocol' },
-  { title: 'Username', key: 'username' },
-  { title: 'Password', key: 'password' },
-  { title: 'Hostname', key: 'hostname' },
-  { title: 'Port', key: 'port' },
-  { title: 'Path', key: 'pathname' },
-  { title: 'Params', key: 'search' },
+  { title: t('tools.url-parser.protocol'), key: 'protocol' },
+  { title: t('tools.url-parser.username'), key: 'username' },
+  { title: t('tools.url-parser.password'), key: 'password' },
+  { title: t('tools.url-parser.hostname'), key: 'hostname' },
+  { title: t('tools.url-parser.port'), key: 'port' },
+  { title: t('tools.url-parser.path'), key: 'pathname' },
+  { title: t('tools.url-parser.params'), key: 'search' },
 ];
 </script>
 
@@ -28,8 +29,8 @@ const properties: { title: string; key: keyof URL }[] = [
   <c-card>
     <c-input-text
       v-model:value="urlToParse"
-      label="Your url to parse:"
-      placeholder="Your url to parse..."
+      :label="t('tools.url-parser.inputLabel')"
+      :placeholder="t('tools.url-parser.inputPlaceholder')"
       raw-text
       :validation-rules="urlValidationRules"
     />
diff --git a/src/tools/user-agent-parser/locales/en.yml b/src/tools/user-agent-parser/locales/en.yml
new file mode 100644
index 00000000..8116a38c
--- /dev/null
+++ b/src/tools/user-agent-parser/locales/en.yml
@@ -0,0 +1,4 @@
+tools:
+  user-agent-parser:
+    title: User-agent parser
+    description: Detect and parse Browser, Engine, OS, CPU, and Device type/model from an user-agent string.
diff --git a/src/tools/uuid-generator/index.ts b/src/tools/uuid-generator/index.ts
index 54ec479f..a617e02a 100644
--- a/src/tools/uuid-generator/index.ts
+++ b/src/tools/uuid-generator/index.ts
@@ -1,11 +1,11 @@
 import { Fingerprint } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.uuid-generator.title'),
+  name: t('tools.uuid-generator.title'),
   path: '/uuid-generator',
-  description: translate('tools.uuid-generator.description'),
+  description: t('tools.uuid-generator.description'),
   keywords: ['uuid', 'v4', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique', 'v1', 'v3', 'v5', 'nil'],
   component: () => import('./uuid-generator.vue'),
   icon: Fingerprint,
diff --git a/src/tools/yaml-to-json-converter/index.ts b/src/tools/yaml-to-json-converter/index.ts
index 60110f09..bbd56daa 100644
--- a/src/tools/yaml-to-json-converter/index.ts
+++ b/src/tools/yaml-to-json-converter/index.ts
@@ -1,11 +1,11 @@
 import { AlignJustified } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.yaml-to-json-converter.title'),
+  name: t('tools.yaml-to-json-converter.title'),
   path: '/yaml-to-json-converter',
-  description: translate('tools.yaml-to-json-converter.description'),
+  description: t('tools.yaml-to-json-converter.description'),
   keywords: ['yaml', 'to', 'json'],
   component: () => import('./yaml-to-json.vue'),
   icon: AlignJustified,
diff --git a/src/tools/yaml-to-toml/index.ts b/src/tools/yaml-to-toml/index.ts
index d90370ec..05f2691c 100644
--- a/src/tools/yaml-to-toml/index.ts
+++ b/src/tools/yaml-to-toml/index.ts
@@ -1,11 +1,11 @@
 import { AlignJustified } from '@vicons/tabler';
 import { defineTool } from '../tool';
-import { translate } from '@/plugins/i18n.plugin';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: translate('tools.yaml-to-toml.title'),
+  name: t('tools.yaml-to-toml.title'),
   path: '/yaml-to-toml',
-  description: translate('tools.yaml-to-toml.title'),
+  description: t('tools.yaml-to-toml.title'),
   keywords: ['yaml', 'to', 'toml', 'convert', 'transform'],
   component: () => import('./yaml-to-toml.vue'),
   icon: AlignJustified,

From 9db4b41daffd7ea0243b9f2325b0ee7259546e2a Mon Sep 17 00:00:00 2001
From: Amery2010 <amery@xiangfa.org>
Date: Sun, 18 Feb 2024 18:16:53 +0800
Subject: [PATCH 5/8] WIP(translate): translate web category all tools

---
 src/tools/hash-text/locales/zh.yml            |  12 +-
 src/tools/html-entities/locales/en.yml        |   2 +-
 src/tools/html-entities/locales/zh.yml        |   2 +-
 .../html-wysiwyg-editor/editor/menu-bar.vue   |  33 +-
 src/tools/html-wysiwyg-editor/index.ts        |   5 +-
 src/tools/html-wysiwyg-editor/locales/en.yml  |  17 ++
 src/tools/html-wysiwyg-editor/locales/zh.yml  |  21 ++
 .../http-status-codes.constants.ts            | 283 ++++++++----------
 .../http-status-codes/http-status-codes.vue   |   8 +-
 src/tools/http-status-codes/index.ts          |   9 +-
 src/tools/http-status-codes/locales/en.yml    | 198 ++++++++++++
 src/tools/http-status-codes/locales/zh.yml    | 202 +++++++++++++
 .../json-diff/diff-viewer/diff-viewer.vue     |   6 +-
 src/tools/json-diff/index.ts                  |   5 +-
 src/tools/json-diff/json-diff.vue             |  12 +-
 src/tools/json-diff/locales/en.yml            |   9 +
 src/tools/json-diff/locales/zh.yml            |  13 +
 src/tools/jwt-parser/jwt-parser.constants.ts  | 172 +++++------
 src/tools/jwt-parser/jwt-parser.vue           |  10 +-
 src/tools/jwt-parser/locales/en.yml           |  94 ++++++
 src/tools/jwt-parser/locales/zh.yml           |  98 ++++++
 src/tools/keycode-info/index.ts               |   5 +-
 src/tools/keycode-info/keycode-info.vue       |  24 +-
 src/tools/keycode-info/locales/en.yml         |  13 +
 src/tools/keycode-info/locales/zh.yml         |  17 ++
 src/tools/slugify-string/index.ts             |   5 +-
 src/tools/slugify-string/locales/en.yml       |   8 +
 src/tools/slugify-string/locales/zh.yml       |  12 +
 src/tools/slugify-string/slugify-string.vue   |   9 +-
 src/tools/user-agent-parser/index.ts          |   5 +-
 src/tools/user-agent-parser/locales/en.yml    |  26 ++
 src/tools/user-agent-parser/locales/zh.yml    |  30 ++
 .../user-agent-parser/user-agent-parser.vue   |  55 ++--
 33 files changed, 1091 insertions(+), 329 deletions(-)
 create mode 100644 src/tools/html-wysiwyg-editor/locales/zh.yml
 create mode 100644 src/tools/http-status-codes/locales/zh.yml
 create mode 100644 src/tools/json-diff/locales/zh.yml
 create mode 100644 src/tools/jwt-parser/locales/zh.yml
 create mode 100644 src/tools/keycode-info/locales/zh.yml
 create mode 100644 src/tools/slugify-string/locales/zh.yml
 create mode 100644 src/tools/user-agent-parser/locales/zh.yml

diff --git a/src/tools/hash-text/locales/zh.yml b/src/tools/hash-text/locales/zh.yml
index 66363a71..9dcc9c4f 100644
--- a/src/tools/hash-text/locales/zh.yml
+++ b/src/tools/hash-text/locales/zh.yml
@@ -1,12 +1,12 @@
 tools:
   hash-text:
     title: 文本转哈希
-    description: 使用所需的函数对文本字符串进行哈希计算：MD5、SHA1、SHA256、SHA224、SHA512、SHA384、SHA3或RIPEMD160
+    description: '使用所需的函数对文本字符串进行哈希计算：MD5、SHA1、SHA256、SHA224、SHA512、SHA384、SHA3或RIPEMD160'
 
     textLabel: '要进行哈希的文本：'
     textPlaceholder: '要进行哈希的字符串...'
-    hashLabel: 摘要编码
-    binary: 二进制（基数2）
-    hexadecimal: 十六进制（基数16）
-    base64: Base64（基数64）
-    base64url: Base64url（带有URL安全字符的基数64）
+    hashLabel: '摘要编码'
+    binary: '二进制（基数2）'
+    hexadecimal: '十六进制（基数16）'
+    base64: 'Base64（基数64）'
+    base64url: 'Base64url（带有URL安全字符的基数64）'
diff --git a/src/tools/html-entities/locales/en.yml b/src/tools/html-entities/locales/en.yml
index b37b45cd..aaaf0ea4 100644
--- a/src/tools/html-entities/locales/en.yml
+++ b/src/tools/html-entities/locales/en.yml
@@ -1,7 +1,7 @@
 tools:
   html-entities:
     title: Escape html entities
-    description: Escape or unescape html entities (replace <,>, &, " and \' to their html version)
+    description: Escape or unescape html entities (replace <,>, &, " and ' to their html version)
 
     escape:
       title: Escape html entities
diff --git a/src/tools/html-entities/locales/zh.yml b/src/tools/html-entities/locales/zh.yml
index 35b8062e..4288d852 100644
--- a/src/tools/html-entities/locales/zh.yml
+++ b/src/tools/html-entities/locales/zh.yml
@@ -1,7 +1,7 @@
 tools:
   html-entities:
     title: 转义 HTML 实体
-    description: 转义或取消转义 HTML 实体（将 <,>, &, " 和 \' 替换为它们的 HTML 版本）
+    description: 转义或取消转义 HTML 实体（将 <,>, &, " 和 ' 替换为它们的 HTML 版本）
 
     escape:
       title: 转义 HTML 实体
diff --git a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
index d3ad3168..cc3079c6 100644
--- a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
+++ b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
@@ -20,6 +20,7 @@ import {
 } from '@vicons/tabler';
 import type { Component } from 'vue';
 import MenuBarItem from './menu-bar-item.vue';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 const props = defineProps<{ editor: Editor }>();
 const { editor } = toRefs(props);
@@ -38,28 +39,28 @@ const items: MenuItem[] = [
   {
     type: 'button',
     icon: Bold,
-    title: 'Bold',
+    title: t('tools.html-wysiwyg-editor.bold'),
     action: () => editor.value.chain().focus().toggleBold().run(),
     isActive: () => editor.value.isActive('bold'),
   },
   {
     type: 'button',
     icon: Italic,
-    title: 'Italic',
+    title: t('tools.html-wysiwyg-editor.italic'),
     action: () => editor.value.chain().focus().toggleItalic().run(),
     isActive: () => editor.value.isActive('italic'),
   },
   {
     type: 'button',
     icon: Strikethrough,
-    title: 'Strike',
+    title: t('tools.html-wysiwyg-editor.strike'),
     action: () => editor.value.chain().focus().toggleStrike().run(),
     isActive: () => editor.value.isActive('strike'),
   },
   {
     type: 'button',
     icon: Code,
-    title: 'Inline code',
+    title: t('tools.html-wysiwyg-editor.inlineCode'),
     action: () => editor.value.chain().focus().toggleCode().run(),
     isActive: () => editor.value.isActive('code'),
   },
@@ -69,28 +70,28 @@ const items: MenuItem[] = [
   {
     type: 'button',
     icon: H1,
-    title: 'Heading 1',
+    title: t('tools.html-wysiwyg-editor.heading1'),
     action: () => editor.value.chain().focus().toggleHeading({ level: 1 }).run(),
     isActive: () => editor.value.isActive('heading', { level: 1 }),
   },
   {
     type: 'button',
     icon: H2,
-    title: 'Heading 2',
+    title: t('tools.html-wysiwyg-editor.heading2'),
     action: () => editor.value.chain().focus().toggleHeading({ level: 2 }).run(),
     isActive: () => editor.value.isActive('heading', { level: 2 }),
   },
   {
     type: 'button',
     icon: H3,
-    title: 'Heading 3',
+    title: t('tools.html-wysiwyg-editor.heading3'),
     action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
     isActive: () => editor.value.isActive('heading', { level: 4 }),
   },
   {
     type: 'button',
     icon: H4,
-    title: 'Heading 4',
+    title: t('tools.html-wysiwyg-editor.heading4'),
     action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
     isActive: () => editor.value.isActive('heading', { level: 4 }),
   },
@@ -100,21 +101,21 @@ const items: MenuItem[] = [
   {
     type: 'button',
     icon: List,
-    title: 'Bullet list',
+    title: t('tools.html-wysiwyg-editor.bulletList'),
     action: () => editor.value.chain().focus().toggleBulletList().run(),
     isActive: () => editor.value.isActive('bulletList'),
   },
   {
     type: 'button',
     icon: ListNumbers,
-    title: 'Ordered list',
+    title: t('tools.html-wysiwyg-editor.orderedList'),
     action: () => editor.value.chain().focus().toggleOrderedList().run(),
     isActive: () => editor.value.isActive('orderedList'),
   },
   {
     type: 'button',
     icon: CodePlus,
-    title: 'Code block',
+    title: t('tools.html-wysiwyg-editor.codeBlock'),
     action: () => editor.value.chain().focus().toggleCodeBlock().run(),
     isActive: () => editor.value.isActive('codeBlock'),
   },
@@ -122,7 +123,7 @@ const items: MenuItem[] = [
   {
     type: 'button',
     icon: Blockquote,
-    title: 'Blockquote',
+    title: t('tools.html-wysiwyg-editor.blockquote'),
     action: () => editor.value.chain().focus().toggleBlockquote().run(),
     isActive: () => editor.value.isActive('blockquote'),
   },
@@ -132,26 +133,26 @@ const items: MenuItem[] = [
   {
     type: 'button',
     icon: TextWrap,
-    title: 'Hard break',
+    title: t('tools.html-wysiwyg-editor.hardBreak'),
     action: () => editor.value.chain().focus().setHardBreak().run(),
   },
   {
     type: 'button',
     icon: ClearFormatting,
-    title: 'Clear format',
+    title: t('tools.html-wysiwyg-editor.clearFormat'),
     action: () => editor.value.chain().focus().clearNodes().unsetAllMarks().run(),
   },
 
   {
     type: 'button',
     icon: ArrowBack,
-    title: 'Undo',
+    title: t('tools.html-wysiwyg-editor.undo'),
     action: () => editor.value.chain().focus().undo().run(),
   },
   {
     type: 'button',
     icon: ArrowForwardUp,
-    title: 'Redo',
+    title: t('tools.html-wysiwyg-editor.redo'),
     action: () => editor.value.chain().focus().redo().run(),
   },
 ];
diff --git a/src/tools/html-wysiwyg-editor/index.ts b/src/tools/html-wysiwyg-editor/index.ts
index 461ad235..971be977 100644
--- a/src/tools/html-wysiwyg-editor/index.ts
+++ b/src/tools/html-wysiwyg-editor/index.ts
@@ -1,10 +1,11 @@
 import { Edit } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'HTML WYSIWYG editor',
+  name: t('tools.html-wysiwyg-editor.title'),
   path: '/html-wysiwyg-editor',
-  description: 'Online HTML editor with feature-rich WYSIWYG editor, get the source code of the content immediately.',
+  description: t('tools.html-wysiwyg-editor.description'),
   keywords: ['html', 'wysiwyg', 'editor', 'p', 'ul', 'ol', 'converter', 'live'],
   component: () => import('./html-wysiwyg-editor.vue'),
   icon: Edit,
diff --git a/src/tools/html-wysiwyg-editor/locales/en.yml b/src/tools/html-wysiwyg-editor/locales/en.yml
index 03e5e503..f05d4cf3 100644
--- a/src/tools/html-wysiwyg-editor/locales/en.yml
+++ b/src/tools/html-wysiwyg-editor/locales/en.yml
@@ -2,3 +2,20 @@ tools:
   html-wysiwyg-editor:
     title: HTML WYSIWYG editor
     description: Online HTML editor with feature-rich WYSIWYG editor, get the source code of the content immediately.
+
+    bold: Bold
+    italic: Italic
+    strike: Strike
+    inlineCode: Inline code
+    heading1: Heading 1
+    heading2: Heading 2
+    heading3: Heading 3
+    heading4: Heading 4
+    bulletList: Bullet list
+    orderedList: Ordered list
+    codeBlock: Code block
+    blockquote: Blockquote
+    hardBreak: Hard break
+    clearFormat: Clear format
+    undo: Undo
+    redo: Redo
diff --git a/src/tools/html-wysiwyg-editor/locales/zh.yml b/src/tools/html-wysiwyg-editor/locales/zh.yml
new file mode 100644
index 00000000..d0e983d0
--- /dev/null
+++ b/src/tools/html-wysiwyg-editor/locales/zh.yml
@@ -0,0 +1,21 @@
+tools:
+  html-wysiwyg-editor:
+    title: HTML所见即所得编辑器
+    description: 在线 HTML 编辑器，具有功能丰富的所见即所得编辑器，可立即获取内容的源代码。
+
+    bold: 粗体
+    italic: 斜体
+    strike: 删除线
+    inlineCode: 行内代码
+    heading1: 标题 1
+    heading2: 标题 2
+    heading3: 标题 3
+    heading4: 标题 4
+    bulletList: 无序列表
+    orderedList: 有序列表
+    codeBlock: 代码块
+    blockquote: 引用块
+    hardBreak: 强制换行
+    clearFormat: 清除格式
+    undo: 撤销
+    redo: 重做
diff --git a/src/tools/http-status-codes/http-status-codes.constants.ts b/src/tools/http-status-codes/http-status-codes.constants.ts
index 279cd7ce..49268b05 100644
--- a/src/tools/http-status-codes/http-status-codes.constants.ts
+++ b/src/tools/http-status-codes/http-status-codes.constants.ts
@@ -1,3 +1,5 @@
+import { translate as t } from '@/plugins/i18n.plugin';
+
 export const codesByCategories: {
   category: string
   codes: {
@@ -8,423 +10,404 @@ export const codesByCategories: {
   }[]
 }[] = [
   {
-    category: '1xx informational response',
+    category: t('tools.http-status-codes.1xx'),
     codes: [
       {
         code: 100,
-        name: 'Continue',
-        description: 'Waiting for the client to emit the body of the request.',
+        name: t('tools.http-status-codes.100.name'),
+        description: t('tools.http-status-codes.100.description'),
         type: 'HTTP',
       },
       {
         code: 101,
-        name: 'Switching Protocols',
-        description: 'The server has agreed to change protocol.',
+        name: t('tools.http-status-codes.101.name'),
+        description: t('tools.http-status-codes.101.description'),
         type: 'HTTP',
       },
       {
         code: 102,
-        name: 'Processing',
-        description: 'The server is processing the request, but no response is available yet.',
+        name: t('tools.http-status-codes.102.name'),
+        description: t('tools.http-status-codes.102.description'),
         type: 'WebDav',
       },
       {
         code: 103,
-        name: 'Early Hints',
-        description: 'The server returns some response headers before final HTTP message.',
+        name: t('tools.http-status-codes.103.name'),
+        description: t('tools.http-status-codes.103.description'),
         type: 'HTTP',
       },
     ],
   },
   {
-    category: '2xx success',
+    category: t('tools.http-status-codes.2xx'),
     codes: [
       {
         code: 200,
-        name: 'OK',
-        description: 'Standard response for successful HTTP requests.',
+        name: t('tools.http-status-codes.200.name'),
+        description: t('tools.http-status-codes.200.description'),
         type: 'HTTP',
       },
       {
         code: 201,
-        name: 'Created',
-        description: 'The request has been fulfilled, resulting in the creation of a new resource.',
+        name: t('tools.http-status-codes.201.name'),
+        description: t('tools.http-status-codes.201.description'),
         type: 'HTTP',
       },
       {
         code: 202,
-        name: 'Accepted',
-        description: 'The request has been accepted for processing, but the processing has not been completed.',
+        name: t('tools.http-status-codes.202.name'),
+        description: t('tools.http-status-codes.202.description'),
         type: 'HTTP',
       },
       {
         code: 203,
-        name: 'Non-Authoritative Information',
-        description:
-          'The request is successful but the content of the original request has been modified by a transforming proxy.',
+        name: t('tools.http-status-codes.203.name'),
+        description: t('tools.http-status-codes.203.description'),
         type: 'HTTP',
       },
       {
         code: 204,
-        name: 'No Content',
-        description: 'The server successfully processed the request and is not returning any content.',
+        name: t('tools.http-status-codes.204.name'),
+        description: t('tools.http-status-codes.204.description'),
         type: 'HTTP',
       },
       {
         code: 205,
-        name: 'Reset Content',
-        description: 'The server indicates to reinitialize the document view which sent this request.',
+        name: t('tools.http-status-codes.205.name'),
+        description: t('tools.http-status-codes.205.description'),
         type: 'HTTP',
       },
       {
         code: 206,
-        name: 'Partial Content',
-        description: 'The server is delivering only part of the resource due to a range header sent by the client.',
+        name: t('tools.http-status-codes.206.name'),
+        description: t('tools.http-status-codes.206.description'),
         type: 'HTTP',
       },
       {
         code: 207,
-        name: 'Multi-Status',
-        description:
-          'The message body that follows is an XML message and can contain a number of separate response codes.',
+        name: t('tools.http-status-codes.207.name'),
+        description: t('tools.http-status-codes.207.description'),
         type: 'WebDav',
       },
       {
         code: 208,
-        name: 'Already Reported',
-        description:
-          'The members of a DAV binding have already been enumerated in a preceding part of the (multistatus) response.',
+        name: t('tools.http-status-codes.208.name'),
+        description: t('tools.http-status-codes.208.description'),
         type: 'WebDav',
       },
       {
         code: 226,
-        name: 'IM Used',
-        description:
-          'The server has fulfilled a request for the resource, and the response is a representation of the result.',
+        name: t('tools.http-status-codes.226.name'),
+        description: t('tools.http-status-codes.226.description'),
         type: 'HTTP',
       },
     ],
   },
   {
-    category: '3xx redirection',
+    category: t('tools.http-status-codes.3xx'),
     codes: [
       {
         code: 300,
-        name: 'Multiple Choices',
-        description: 'Indicates multiple options for the resource that the client may follow.',
+        name: t('tools.http-status-codes.300.name'),
+        description: t('tools.http-status-codes.300.description'),
         type: 'HTTP',
       },
       {
         code: 301,
-        name: 'Moved Permanently',
-        description: 'This and all future requests should be directed to the given URI.',
+        name: t('tools.http-status-codes.301.name'),
+        description: t('tools.http-status-codes.301.description'),
         type: 'HTTP',
       },
       {
         code: 302,
-        name: 'Found',
-        description: 'Redirect to another URL. This is an example of industry practice contradicting the standard.',
+        name: t('tools.http-status-codes.302.name'),
+        description: t('tools.http-status-codes.302.description'),
         type: 'HTTP',
       },
       {
         code: 303,
-        name: 'See Other',
-        description: 'The response to the request can be found under another URI using a GET method.',
+        name: t('tools.http-status-codes.303.name'),
+        description: t('tools.http-status-codes.303.description'),
         type: 'HTTP',
       },
       {
         code: 304,
-        name: 'Not Modified',
-        description:
-          'Indicates that the resource has not been modified since the version specified by the request headers.',
+        name: t('tools.http-status-codes.304.name'),
+        description: t('tools.http-status-codes.304.description'),
         type: 'HTTP',
       },
       {
         code: 305,
-        name: 'Use Proxy',
-        description:
-          'The requested resource is available only through a proxy, the address for which is provided in the response.',
+        name: t('tools.http-status-codes.305.name'),
+        description: t('tools.http-status-codes.305.description'),
         type: 'HTTP',
       },
       {
         code: 306,
-        name: 'Switch Proxy',
-        description: 'No longer used. Originally meant "Subsequent requests should use the specified proxy."',
+        name: t('tools.http-status-codes.306.name'),
+        description: t('tools.http-status-codes.306.description'),
         type: 'HTTP',
       },
       {
         code: 307,
-        name: 'Temporary Redirect',
-        description:
-          'In this case, the request should be repeated with another URI; however, future requests should still use the original URI.',
+        name: t('tools.http-status-codes.307.name'),
+        description: t('tools.http-status-codes.307.description'),
         type: 'HTTP',
       },
       {
         code: 308,
-        name: 'Permanent Redirect',
-        description: 'The request and all future requests should be repeated using another URI.',
+        name: t('tools.http-status-codes.308.name'),
+        description: t('tools.http-status-codes.308.description'),
         type: 'HTTP',
       },
     ],
   },
   {
-    category: '4xx client error',
+    category: t('tools.http-status-codes.4xx'),
     codes: [
       {
         code: 400,
-        name: 'Bad Request',
-        description: 'The server cannot or will not process the request due to an apparent client error.',
+        name: t('tools.http-status-codes.400.name'),
+        description: t('tools.http-status-codes.400.description'),
         type: 'HTTP',
       },
       {
         code: 401,
-        name: 'Unauthorized',
-        description:
-          'Similar to 403 Forbidden, but specifically for use when authentication is required and has failed or has not yet been provided.',
+        name: t('tools.http-status-codes.401.name'),
+        description: t('tools.http-status-codes.401.description'),
         type: 'HTTP',
       },
       {
         code: 402,
-        name: 'Payment Required',
-        description:
-          'Reserved for future use. The original intention was that this code might be used as part of some form of digital cash or micropayment scheme.',
+        name: t('tools.http-status-codes.402.name'),
+        description: t('tools.http-status-codes.402.description'),
         type: 'HTTP',
       },
       {
         code: 403,
-        name: 'Forbidden',
-        description:
-          'The request was valid, but the server is refusing action. The user might not have the necessary permissions for a resource.',
+        name: t('tools.http-status-codes.403.name'),
+        description: t('tools.http-status-codes.403.description'),
         type: 'HTTP',
       },
       {
         code: 404,
-        name: 'Not Found',
-        description: 'The requested resource could not be found but may be available in the future.',
+        name: t('tools.http-status-codes.404.name'),
+        description: t('tools.http-status-codes.404.description'),
         type: 'HTTP',
       },
       {
         code: 405,
-        name: 'Method Not Allowed',
-        description: 'A request method is not supported for the requested resource.',
+        name: t('tools.http-status-codes.405.name'),
+        description: t('tools.http-status-codes.405.description'),
         type: 'HTTP',
       },
       {
         code: 406,
-        name: 'Not Acceptable',
-        description:
-          'The requested resource is capable of generating only content not acceptable according to the Accept headers sent in the request.',
+        name: t('tools.http-status-codes.406.name'),
+        description: t('tools.http-status-codes.406.description'),
         type: 'HTTP',
       },
       {
         code: 407,
-        name: 'Proxy Authentication Required',
-        description: 'The client must first authenticate itself with the proxy.',
+        name: t('tools.http-status-codes.407.name'),
+        description: t('tools.http-status-codes.407.description'),
         type: 'HTTP',
       },
       {
         code: 408,
-        name: 'Request Timeout',
-        description: 'The server timed out waiting for the request.',
+        name: t('tools.http-status-codes.408.name'),
+        description: t('tools.http-status-codes.408.description'),
         type: 'HTTP',
       },
       {
         code: 409,
-        name: 'Conflict',
-        description:
-          'Indicates that the request could not be processed because of conflict in the request, such as an edit conflict.',
+        name: t('tools.http-status-codes.409.name'),
+        description: t('tools.http-status-codes.409.description'),
         type: 'HTTP',
       },
       {
         code: 410,
-        name: 'Gone',
-        description: 'Indicates that the resource requested is no longer available and will not be available again.',
+        name: t('tools.http-status-codes.410.name'),
+        description: t('tools.http-status-codes.410.description'),
         type: 'HTTP',
       },
       {
         code: 411,
-        name: 'Length Required',
-        description:
-          'The request did not specify the length of its content, which is required by the requested resource.',
+        name: t('tools.http-status-codes.411.name'),
+        description: t('tools.http-status-codes.411.description'),
         type: 'HTTP',
       },
       {
         code: 412,
-        name: 'Precondition Failed',
-        description: 'The server does not meet one of the preconditions that the requester put on the request.',
+        name: t('tools.http-status-codes.412.name'),
+        description: t('tools.http-status-codes.412.description'),
         type: 'HTTP',
       },
       {
         code: 413,
-        name: 'Payload Too Large',
-        description: 'The request is larger than the server is willing or able to process.',
+        name: t('tools.http-status-codes.413.name'),
+        description: t('tools.http-status-codes.413.description'),
         type: 'HTTP',
       },
       {
         code: 414,
-        name: 'URI Too Long',
-        description: 'The URI provided was too long for the server to process.',
+        name: t('tools.http-status-codes.414.name'),
+        description: t('tools.http-status-codes.414.description'),
         type: 'HTTP',
       },
       {
         code: 415,
-        name: 'Unsupported Media Type',
-        description: 'The request entity has a media type which the server or resource does not support.',
+        name: t('tools.http-status-codes.415.name'),
+        description: t('tools.http-status-codes.415.description'),
         type: 'HTTP',
       },
       {
         code: 416,
-        name: 'Range Not Satisfiable',
-        description: 'The client has asked for a portion of the file, but the server cannot supply that portion.',
+        name: t('tools.http-status-codes.416.name'),
+        description: t('tools.http-status-codes.416.description'),
         type: 'HTTP',
       },
       {
         code: 417,
-        name: 'Expectation Failed',
-        description: 'The server cannot meet the requirements of the Expect request-header field.',
+        name: t('tools.http-status-codes.417.name'),
+        description: t('tools.http-status-codes.417.description'),
         type: 'HTTP',
       },
       {
         code: 418,
-        name: 'I\'m a teapot',
-        description: 'The server refuses the attempt to brew coffee with a teapot.',
+        name: t('tools.http-status-codes.418.name'),
+        description: t('tools.http-status-codes.418.description'),
         type: 'HTTP',
       },
       {
         code: 421,
-        name: 'Misdirected Request',
-        description: 'The request was directed at a server that is not able to produce a response.',
+        name: t('tools.http-status-codes.421.name'),
+        description: t('tools.http-status-codes.421.description'),
         type: 'HTTP',
       },
       {
         code: 422,
-        name: 'Unprocessable Entity',
-        description: 'The request was well-formed but was unable to be followed due to semantic errors.',
+        name: t('tools.http-status-codes.422.name'),
+        description: t('tools.http-status-codes.422.description'),
         type: 'HTTP',
       },
       {
         code: 423,
-        name: 'Locked',
-        description: 'The resource that is being accessed is locked.',
+        name: t('tools.http-status-codes.423.name'),
+        description: t('tools.http-status-codes.423.description'),
         type: 'HTTP',
       },
       {
         code: 424,
-        name: 'Failed Dependency',
-        description: 'The request failed due to failure of a previous request.',
+        name: t('tools.http-status-codes.424.name'),
+        description: t('tools.http-status-codes.424.description'),
         type: 'HTTP',
       },
       {
         code: 425,
-        name: 'Too Early',
-        description: 'Indicates that the server is unwilling to risk processing a request that might be replayed.',
+        name: t('tools.http-status-codes.425.name'),
+        description: t('tools.http-status-codes.425.description'),
         type: 'HTTP',
       },
       {
         code: 426,
-        name: 'Upgrade Required',
-        description: 'The client should switch to a different protocol such as TLS/1.0.',
+        name: t('tools.http-status-codes.426.name'),
+        description: t('tools.http-status-codes.426.description'),
         type: 'HTTP',
       },
       {
         code: 428,
-        name: 'Precondition Required',
-        description: 'The origin server requires the request to be conditional.',
+        name: t('tools.http-status-codes.428.name'),
+        description: t('tools.http-status-codes.428.description'),
         type: 'HTTP',
       },
       {
         code: 429,
-        name: 'Too Many Requests',
-        description: 'The user has sent too many requests in a given amount of time.',
+        name: t('tools.http-status-codes.429.name'),
+        description: t('tools.http-status-codes.429.description'),
         type: 'HTTP',
       },
       {
         code: 431,
-        name: 'Request Header Fields Too Large',
-        description:
-          'The server is unwilling to process the request because either an individual header field, or all the header fields collectively, are too large.',
+        name: t('tools.http-status-codes.431.name'),
+        description: t('tools.http-status-codes.431.description'),
         type: 'HTTP',
       },
       {
         code: 451,
-        name: 'Unavailable For Legal Reasons',
-        description:
-          'A server operator has received a legal demand to deny access to a resource or to a set of resources that includes the requested resource.',
+        name: t('tools.http-status-codes.451.name'),
+        description: t('tools.http-status-codes.451.description'),
         type: 'HTTP',
       },
     ],
   },
   {
-    category: '5xx server error',
+    category: t('tools.http-status-codes.5xx'),
     codes: [
       {
         code: 500,
-        name: 'Internal Server Error',
-        description:
-          'A generic error message, given when an unexpected condition was encountered and no more specific message is suitable.',
+        name: t('tools.http-status-codes.500.name'),
+        description: t('tools.http-status-codes.500.description'),
         type: 'HTTP',
       },
       {
         code: 501,
-        name: 'Not Implemented',
-        description:
-          'The server either does not recognize the request method, or it lacks the ability to fulfill the request.',
+        name: t('tools.http-status-codes.501.name'),
+        description: t('tools.http-status-codes.501.description'),
         type: 'HTTP',
       },
       {
         code: 502,
-        name: 'Bad Gateway',
-        description:
-          'The server was acting as a gateway or proxy and received an invalid response from the upstream server.',
+        name: t('tools.http-status-codes.502.name'),
+        description: t('tools.http-status-codes.502.description'),
         type: 'HTTP',
       },
       {
         code: 503,
-        name: 'Service Unavailable',
-        description: 'The server is currently unavailable (because it is overloaded or down for maintenance).',
+        name: t('tools.http-status-codes.503.name'),
+        description: t('tools.http-status-codes.503.description'),
         type: 'HTTP',
       },
       {
         code: 504,
-        name: 'Gateway Timeout',
-        description:
-          'The server was acting as a gateway or proxy and did not receive a timely response from the upstream server.',
+        name: t('tools.http-status-codes.504.name'),
+        description: t('tools.http-status-codes.504.description'),
         type: 'HTTP',
       },
       {
         code: 505,
-        name: 'HTTP Version Not Supported',
-        description: 'The server does not support the HTTP protocol version used in the request.',
+        name: t('tools.http-status-codes.505.name'),
+        description: t('tools.http-status-codes.505.description'),
         type: 'HTTP',
       },
       {
         code: 506,
-        name: 'Variant Also Negotiates',
-        description: 'Transparent content negotiation for the request results in a circular reference.',
+        name: t('tools.http-status-codes.506.name'),
+        description: t('tools.http-status-codes.506.description'),
         type: 'HTTP',
       },
       {
         code: 507,
-        name: 'Insufficient Storage',
-        description: 'The server is unable to store the representation needed to complete the request.',
+        name: t('tools.http-status-codes.507.name'),
+        description: t('tools.http-status-codes.507.description'),
         type: 'HTTP',
       },
       {
         code: 508,
-        name: 'Loop Detected',
-        description: 'The server detected an infinite loop while processing the request.',
+        name: t('tools.http-status-codes.508.name'),
+        description: t('tools.http-status-codes.508.description'),
         type: 'HTTP',
       },
       {
         code: 510,
-        name: 'Not Extended',
-        description: 'Further extensions to the request are required for the server to fulfill it.',
+        name: t('tools.http-status-codes.510.name'),
+        description: t('tools.http-status-codes.510.description'),
         type: 'HTTP',
       },
       {
         code: 511,
-        name: 'Network Authentication Required',
-        description: 'The client needs to authenticate to gain network access.',
+        name: t('tools.http-status-codes.511.name'),
+        description: t('tools.http-status-codes.511.description'),
         type: 'HTTP',
       },
     ],
diff --git a/src/tools/http-status-codes/http-status-codes.vue b/src/tools/http-status-codes/http-status-codes.vue
index 84ab3137..434ae673 100644
--- a/src/tools/http-status-codes/http-status-codes.vue
+++ b/src/tools/http-status-codes/http-status-codes.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { codesByCategories } from './http-status-codes.constants';
+import * as status from './http-status-codes.constants';
 import { useFuzzySearch } from '@/composable/fuzzySearch';
 
 const search = ref('');
+const { t } = useI18n();
+const { codesByCategories } = status;
 
 const { searchResult } = useFuzzySearch({
   search,
@@ -17,7 +19,7 @@ const codesByCategoryFiltered = computed(() => {
     return codesByCategories;
   }
 
-  return [{ category: 'Search results', codes: searchResult.value }];
+  return [{ category: t('tools.http-status-codes.searchResults'), codes: searchResult.value }];
 });
 </script>
 
@@ -25,7 +27,7 @@ const codesByCategoryFiltered = computed(() => {
   <div>
     <c-input-text
       v-model:value="search"
-      placeholder="Search http status..."
+      :placeholder="t('tools.http-status-codes.searchPlaceholder')"
       autofocus raw-text mb-10
     />
 
diff --git a/src/tools/http-status-codes/index.ts b/src/tools/http-status-codes/index.ts
index 43afae83..9ba257fd 100644
--- a/src/tools/http-status-codes/index.ts
+++ b/src/tools/http-status-codes/index.ts
@@ -1,17 +1,18 @@
 import { HttpRound } from '@vicons/material';
 import { defineTool } from '../tool';
 
-import { codesByCategories } from './http-status-codes.constants';
+// import { codesByCategories } from './http-status-codes.constants';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'HTTP status codes',
+  name: t('tools.http-status-codes.title'),
   path: '/http-status-codes',
-  description: 'The list of all HTTP status codes their name and their meaning.',
+  description: t('tools.http-status-codes.description'),
   keywords: [
     'http',
     'status',
     'codes',
-    ...codesByCategories.flatMap(({ codes }) => codes.flatMap(({ code, name }) => [String(code), name])),
+    // ...codesByCategories.flatMap(({ codes }) => codes.flatMap(({ code, name }) => [String(code), name])),
   ],
   component: () => import('./http-status-codes.vue'),
   icon: HttpRound,
diff --git a/src/tools/http-status-codes/locales/en.yml b/src/tools/http-status-codes/locales/en.yml
index 07f2a168..e2a02caa 100644
--- a/src/tools/http-status-codes/locales/en.yml
+++ b/src/tools/http-status-codes/locales/en.yml
@@ -2,3 +2,201 @@ tools:
   http-status-codes:
     title: HTTP status codes
     description: The list of all HTTP status codes their name and their meaning.
+
+    searchPlaceholder: Search http status...
+    searchResults: Search results
+
+    1xx: 1xx informational response
+    100:
+      name: Continue
+      description: Waiting for the client to emit the body of the request.
+    101:
+      name: Switching Protocols
+      description: The server has agreed to change protocol.
+    102:
+      name: Processing
+      description: The server is processing the request, but no response is available yet.
+    103:
+      name: Early Hints
+      description: The server returns some response headers before final HTTP message.
+    2xx: 2xx success
+    200:
+      name: OK
+      description: Standard response for successful HTTP requests.
+    201:
+      name: Created
+      description: The request has been fulfilled, resulting in the creation of a new resource.
+    202:
+      name: Accepted
+      description: The request has been accepted for processing, but the processing has not been completed.
+    203:
+      name: Non-Authoritative Information
+      description: The request is successful but the content of the original request has been modified by a transforming proxy.
+    204:
+      name: No Content
+      description: The server successfully processed the request and is not returning any content.
+    205:
+      name: Reset Content
+      description: The server indicates to reinitialize the document view which sent this request.
+    206:
+      name: Partial Content
+      description: The server is delivering only part of the resource due to a range header sent by the client.
+    207:
+      name: Multi-Status
+      description: The message body that follows is an XML message and can contain a number of separate response codes.
+    208:
+      name: Already Reported
+      description: The members of a DAV binding have already been enumerated in a preceding part of the (multistatus) response.
+    226:
+      name: IM Used
+      description: The server has fulfilled a request for the resource, and the response is a representation of the result.
+    3xx: 3xx redirection
+    300:
+      name: Multiple Choices
+      description: Indicates multiple options for the resource that the client may follow.
+    301:
+      name: Moved Permanently
+      description: This and all future requests should be directed to the given URI.
+    302:
+      name: Found
+      description: Redirect to another URL. This is an example of industry practice contradicting the standard.
+    303:
+      name: See Other
+      description: The response to the request can be found under another URI using a GET method.
+    304:
+      name: Not Modified
+      description: Indicates that the resource has not been modified since the version specified by the request headers.
+    305:
+      name: Use Proxy
+      description: The requested resource is available only through a proxy, the address for which is provided in the response.
+    306:
+      name: Switch Proxy
+      description: No longer used. Originally meant "Subsequent requests should use the specified proxy."
+    307:
+      name: Temporary Redirect
+      description: In this case, the request should be repeated with another URI; however, future requests should still use the original URI.
+    308:
+      name: Permanent Redirect
+      description: The request and all future requests should be repeated using another URI.
+    4xx: 4xx client error
+    400:
+      name: Bad Request
+      description: The server cannot or will not process the request due to an apparent client error.
+    401:
+      name: Unauthorized
+      description: Similar to 403 Forbidden, but specifically for use when authentication is required and has failed or has not yet been provided.
+    402:
+      name: Payment Required
+      description: Reserved for future use. The original intention was that this code might be used as part of some form of digital cash or micropayment scheme.
+    403:
+      name: Forbidden
+      description: The request was valid, but the server is refusing action. The user might not have the necessary permissions for a resource.
+    404:
+      name: Not Found
+      description: The requested resource could not be found but may be available in the future.
+    405:
+      name: Method Not Allowed
+      description: A request method is not supported for the requested resource.
+    406:
+      name: Not Acceptable
+      description: The requested resource is capable of generating only content not acceptable according to the Accept headers sent in the request.
+    407:
+      name: Proxy Authentication Required
+      description: The client must first authenticate itself with the proxy.
+    408:
+      name: Request Timeout
+      description: The server timed out waiting for the request.
+    409:
+      name: Conflict
+      description: Indicates that the request could not be processed because of conflict in the request, such as an edit conflict.
+    410:
+      name: Gone
+      description: Indicates that the resource requested is no longer available and will not be available again.
+    411:
+      name: Length Required
+      description: The request did not specify the length of its content, which is required by the requested resource.
+    412:
+      name: Precondition Failed
+      description: The server does not meet one of the preconditions that the requester put on the request.
+    413:
+      name: Payload Too Large
+      description: The request is larger than the server is willing or able to process.
+    414:
+      name: URI Too Long
+      description: The URI provided was too long for the server to process.
+    415:
+      name: Unsupported Media Type
+      description: The request entity has a media type which the server or resource does not support.
+    416:
+      name: Range Not Satisfiable
+      description: The client has asked for a portion of the file, but the server cannot supply that portion.
+    417:
+      name: Expectation Failed
+      description: The server cannot meet the requirements of the Expect request-header field.
+    418:
+      name: I'm a teapot
+      description: The server refuses the attempt to brew coffee with a teapot.
+    421:
+      name: Misdirected Request
+      description: The request was directed at a server that is not able to produce a response.
+    422:
+      name: Unprocessable Entity
+      description: The request was well-formed but was unable to be followed due to semantic errors.
+    423:
+      name: Locked
+      description: The resource that is being accessed is locked.
+    424:
+      name: Failed Dependency
+      description: The request failed due to failure of a previous request.
+    425:
+      name: Too Early
+      description: Indicates that the server is unwilling to risk processing a request that might be replayed.
+    426:
+      name: Upgrade Required
+      description: The client should switch to a different protocol such as TLS/1.0.
+    428:
+      name: Precondition Required
+      description: The origin server requires the request to be conditional.
+    429:
+      name: Too Many Requests
+      description: The user has sent too many requests in a given amount of time.
+    431:
+      name: Request Header Fields Too Large
+      description: The server is unwilling to process the request because either an individual header field, or all the header fields collectively, are too large.
+    451:
+      name: Unavailable For Legal Reasons
+      description: A server operator has received a legal demand to deny access to a resource or to a set of resources that includes the requested resource.
+    5xx: 5xx server error
+    500:
+      name: Internal Server Error
+      description: A generic error message, given when an unexpected condition was encountered and no more specific message is suitable.
+    501:
+      name: Not Implemented
+      description: The server either does not recognize the request method, or it lacks the ability to fulfill the request.
+    502:
+      name: Bad Gateway
+      description: The server was acting as a gateway or proxy and received an invalid response from the upstream server.
+    503:
+      name: Service Unavailable
+      description: The server is currently unavailable (because it is overloaded or down for maintenance).
+    504:
+      name: Gateway Timeout
+      description: The server was acting as a gateway or proxy and did not receive a timely response from the upstream server.
+    505:
+      name: HTTP Version Not Supported
+      description: The server does not support the HTTP protocol version used in the request.
+    506:
+      name: Variant Also Negotiates
+      description: Transparent content negotiation for the request results in a circular reference.
+    507:
+      name: Insufficient Storage
+      description: The server is unable to store the representation needed to complete the request.
+    508:
+      name: Loop Detected
+      description: The server detected an infinite loop while processing the request.
+    510:
+      name: Not Extended
+      description: Further extensions to the request are required for the server to fulfill it.
+    511:
+      name: Network Authentication Required
+      description: The client needs to authenticate to gain network access.
diff --git a/src/tools/http-status-codes/locales/zh.yml b/src/tools/http-status-codes/locales/zh.yml
new file mode 100644
index 00000000..1fc3def2
--- /dev/null
+++ b/src/tools/http-status-codes/locales/zh.yml
@@ -0,0 +1,202 @@
+tools:
+  http-status-codes:
+    title: HTTP 状态码
+    description: 所有 HTTP 状态码及其名称和含义的列表。
+
+    searchPlaceholder: 搜索 HTTP 状态码...
+    searchResults: 搜索结果
+
+    1xx: 1xx 信息性响应
+    100:
+      name: 继续
+      description: 等待客户端发送请求主体。
+    101:
+      name: 切换协议
+      description: 服务器已同意切换协议。
+    102:
+      name: 处理中
+      description: 服务器正在处理请求，但尚未有响应可用。
+    103:
+      name: 早期提示
+      description: 服务器在最终 HTTP 消息之前返回一些响应头。
+    2xx: 2xx 成功
+    200:
+      name: OK
+      description: 成功的标准 HTTP 请求响应。
+    201:
+      name: 已创建
+      description: 请求已成功，导致创建新资源。
+    202:
+      name: 已接受
+      description: 请求已被接受处理，但处理尚未完成。
+    203:
+      name: 非权威信息
+      description: 请求成功，但原始请求的内容已被转换代理修改。
+    204:
+      name: 无内容
+      description: 服务器成功处理请求，但未返回任何内容。
+    205:
+      name: 重置内容
+      description: 服务器指示重新初始化发送此请求的文档视图。
+    206:
+      name: 部分内容
+      description: 服务器仅因客户端发送的范围头而传送资源的部分。
+    207:
+      name: 多状态
+      description: 接下来的消息主体是 XML 消息，可以包含许多独立的响应代码。
+    208:
+      name: 已报告
+      description: DAV 绑定的成员已在响应的前一部分中枚举。
+    226:
+      name: 使用 IM
+      description: 服务器已满足对资源的请求，响应是结果的表示。
+    3xx: 3xx 重定向
+    300:
+      name: 多种选择
+      description: 表示客户端可以跟随的资源的多个选项。
+    301:
+      name: 永久移动
+      description: 此次及所有后续请求应重定向到给定的 URI。
+    302:
+      name: 找到
+      description: 重定向到另一个 URL。这是一个违反标准的行业实践示例。
+    303:
+      name: 查看其他
+      description: 请求的响应可以在另一个 URI 下使用 GET 方法找到。
+    304:
+      name: 未修改
+      description: 表示资源自请求标头指定的版本以来未被修改。
+    305:
+      name: 使用代理
+      description: 请求的资源仅通过代理提供，响应中提供了代理的地址。
+    306:
+      name: 切换代理
+      description: 不再使用。最初的含义是“后续请求应使用指定的代理”。
+    307:
+      name: 临时重定向
+      description: 在这种情况下，应重复使用另一个 URI 进行请求；但是，将来的请求仍应使用原始 URI。
+    308:
+      name: 永久重定向
+      description: 请求和所有后续请求应重复使用另一个 URI。
+    4xx: 4xx 客户端错误
+    400:
+      name: 错误请求
+      description: 由于明显的客户端错误，服务器无法处理请求或不会处理请求。
+    401:
+      name: 未经授权
+      description: 类似于 403 Forbidden，但专门用于在需要验证但验证失败或尚未提供的情况下使用。
+    402:
+      name: 需要付款
+      description: 保留以备将来使用。最初的意图是，该代码可能作为某种数字货币或微支付方案的一部分使用。
+    403:
+      name: 禁止
+      description: 请求有效，但服务器拒绝执行操作。用户可能没有资源所需的必要权限。
+    404:
+      name: 未找到
+      description: 请求的资源未找到，但将来可能会可用。
+    405:
+      name: 方法不允许
+      description: 请求方法不受请求资源支持。
+    406:
+      name: 不可接受
+      description: 请求的资源能够生成的内容不符合请求中发送的 Accept 标头。
+    407:
+      name: 需要代理身份验证
+      description: 客户端必须首先通过代理进行身份验证。
+    408:
+      name: 请求超时
+      description: 服务器在等待请求时超时。
+    409:
+      name: 冲突
+      description: 表示由于请求中的冲突（如编辑冲突）无法处理请求。
+    410:
+      name: 已消失
+      description: 表示请求的资源不再可用，也不会再次可用。
+    411:
+      name: 需要长度
+      description: 请求未指定所需资源的长度。
+    412:
+      name: 前提条件失败
+      description: 服务器未满足请求者对请求的其中一个前提条件。
+    413:
+      name: 负载过大
+      description: 请求的大小超过服务器愿意或能够处理的范围。
+    414:
+      name: URI 过长
+      description: 提供的 URI 对服务器来说太长，无法处理。
+    415:
+      name: 不支持的媒体类型
+      description: 请求实体具有服务器或资源不支持的媒体类型。
+    416:
+      name: 范围不可满足
+      description: 客户端请求文件的一部分，但服务器无法提供该部分。
+    417:
+      name: 预期失败
+      description: 服务器无法满足 Expect 请求标头字段的要求。
+    418:
+      name: 我是茶壶
+      description: 服务器拒绝使用茶壶煮咖啡。
+    421:
+      name: 请求错误
+      description: 请求指向无法生成响应的服务器。
+    422:
+      name: 无法处理的实体
+      description: 请求格式正确，但由于语义错误无法进行后续处理。
+    423:
+      name: 已锁定
+      description: 正在访问的资源已被锁定。
+    424:
+      name: 失败的依赖
+      description: 由于先前请求的失败，请求失败。
+    425:
+      name: 太早
+      description: 表示服务器不愿冒险处理可能会被重播的请求。
+    426:
+      name: 需要升级
+      description: 客户端应切换到其他协议，如 TLS/1.0。
+    428:
+      name: 需要前提条件
+      description: 源服务器要求请求是有条件的。
+    429:
+      name: 请求过多
+      description: 用户在一定时间内发送了太多请求。
+    431:
+      name: 请求头字段太大
+      description: 服务器不愿处理请求，因为单个标头字段或所有标头字段的总和太大。
+    451:
+      name: 因法律原因不可用
+      description: 服务器操作员收到法律要求拒绝访问资源或包含请求的资源集。
+    5xx: 5xx 服务器错误
+    500:
+      name: 内部服务器错误
+      description: 遇到意外情况并且没有更具体消息适用时给出的通用错误消息。
+    501:
+      name: 未实现
+      description: 服务器不识别请求方法，或缺乏实现请求的能力。
+    502:
+      name: 错误网关
+      description: 服务器作为网关或代理行事，并从上游服务器接收到无效响应。
+    503:
+      name: 服务不可用
+      description: 服务器当前不可用（因为过载或正在维护）。
+    504:
+      name: 网关超时
+      description: 服务器作为网关或代理行事，未从上游服务器收到及时响应。
+    505:
+      name: 不支持的 HTTP 版本
+      description: 服务器不支持请求中使用的 HTTP 协议版本。
+    506:
+      name: 变体也进行协商
+      description: 用于请求结果的透明内容协商导致循环引用。
+    507:
+      name: 存储空间不足
+      description: 服务器无法存储完成请求所需的表示。
+    508:
+      name: 检测到循环
+      description: 服务器在处理请求时检测到无限循环。
+    510:
+      name: 未扩展
+      description: 服务器需要进一步扩展请求才能满足它。
+    511:
+      name: 需要网络认证
+      description: 客户端需要进行身份验证以获得网络访问权限。
diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.vue b/src/tools/json-diff/diff-viewer/diff-viewer.vue
index 1c585df7..7070ab17 100644
--- a/src/tools/json-diff/diff-viewer/diff-viewer.vue
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue
@@ -5,6 +5,8 @@ import { DiffRootViewer } from './diff-viewer.models';
 import { useAppTheme } from '@/ui/theme/themes';
 
 const props = defineProps<{ leftJson: unknown; rightJson: unknown }>();
+
+const { t } = useI18n();
 const onlyShowDifferences = ref(false);
 const { leftJson, rightJson } = toRefs(props);
 const appTheme = useAppTheme();
@@ -20,14 +22,14 @@ const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefi
 <template>
   <div v-if="showResults">
     <div flex justify-center>
-      <n-form-item label="Only show differences" label-placement="left">
+      <n-form-item :label="t('tools.json-diff.onlyShowDifferences')" label-placement="left">
         <n-switch v-model:value="onlyShowDifferences" />
       </n-form-item>
     </div>
 
     <c-card data-test-id="diff-result">
       <div v-if="jsonAreTheSame" text-center op-70>
-        The provided JSONs are the same
+        {{ t('tools.json-diff.jsonAreTheSame') }}
       </div>
       <DiffRootViewer v-else :diff="result" />
     </c-card>
diff --git a/src/tools/json-diff/index.ts b/src/tools/json-diff/index.ts
index 7c4c1eee..7f21808d 100644
--- a/src/tools/json-diff/index.ts
+++ b/src/tools/json-diff/index.ts
@@ -1,10 +1,11 @@
 import { CompareArrowsRound } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'JSON diff',
+  name: t('tools.json-diff.title'),
   path: '/json-diff',
-  description: 'Compare two JSON objects and get the differences between them.',
+  description: t('tools.json-diff.description'),
   keywords: ['json', 'diff', 'compare', 'difference', 'object', 'data'],
   component: () => import('./json-diff.vue'),
   icon: CompareArrowsRound,
diff --git a/src/tools/json-diff/json-diff.vue b/src/tools/json-diff/json-diff.vue
index 80ada78b..2fceb713 100644
--- a/src/tools/json-diff/json-diff.vue
+++ b/src/tools/json-diff/json-diff.vue
@@ -5,6 +5,8 @@ import DiffsViewer from './diff-viewer/diff-viewer.vue';
 import { withDefaultOnError } from '@/utils/defaults';
 import { isNotThrowing } from '@/utils/boolean';
 
+const { t } = useI18n();
+
 const rawLeftJson = ref('');
 const rawRightJson = ref('');
 
@@ -14,7 +16,7 @@ const rightJson = computed(() => withDefaultOnError(() => JSON5.parse(rawRightJs
 const jsonValidationRules = [
   {
     validator: (value: string) => value === '' || isNotThrowing(() => JSON5.parse(value)),
-    message: 'Invalid JSON format',
+    message: t('tools.json-diff.invalidJSONFormat'),
   },
 ];
 </script>
@@ -23,8 +25,8 @@ const jsonValidationRules = [
   <c-input-text
     v-model:value="rawLeftJson"
     :validation-rules="jsonValidationRules"
-    label="Your first JSON"
-    placeholder="Paste your first JSON here..."
+    :label="t('tools.json-diff.inputLable')"
+    :placeholder="t('tools.json-diff.inputPlaceholder')"
     rows="20"
     multiline
     test-id="leftJson"
@@ -35,8 +37,8 @@ const jsonValidationRules = [
   <c-input-text
     v-model:value="rawRightJson"
     :validation-rules="jsonValidationRules"
-    label="Your JSON to compare"
-    placeholder="Paste your JSON to compare here..."
+    :label="t('tools.json-diff.outputLable')"
+    :placeholder="t('tools.json-diff.outputPlaceholder')"
     rows="20"
     multiline
     test-id="rightJson"
diff --git a/src/tools/json-diff/locales/en.yml b/src/tools/json-diff/locales/en.yml
index 6962461f..4b61d150 100644
--- a/src/tools/json-diff/locales/en.yml
+++ b/src/tools/json-diff/locales/en.yml
@@ -2,3 +2,12 @@ tools:
   json-diff:
     title: JSON diff
     description: Compare two JSON objects and get the differences between them.
+
+    inputLable: Your first JSON
+    inputPlaceholder: Paste your first JSON here...
+    outputLable: Your JSON to compare
+    outputPlaceholder: Paste your JSON to compare here...
+    onlyShowDifferences: Only show differences
+    jsonAreTheSame: The provided JSONs are the same
+
+    invalidJSONFormat: Invalid JSON format
diff --git a/src/tools/json-diff/locales/zh.yml b/src/tools/json-diff/locales/zh.yml
new file mode 100644
index 00000000..76369605
--- /dev/null
+++ b/src/tools/json-diff/locales/zh.yml
@@ -0,0 +1,13 @@
+tools:
+  json-diff:
+    title: JSON 对比
+    description: 比较两个 JSON 对象并获取它们之间的差异。
+
+    inputLable: 您的第一个 JSON
+    inputPlaceholder: 在此粘贴您的第一个 JSON...
+    outputLable: 您要比较的 JSON
+    outputPlaceholder: 在此粘贴要比较的 JSON...
+    onlyShowDifferences: 仅显示差异
+    jsonAreTheSame: 提供的 JSON 相同
+
+    invalidJSONFormat: 无效的 JSON 格式
diff --git a/src/tools/jwt-parser/jwt-parser.constants.ts b/src/tools/jwt-parser/jwt-parser.constants.ts
index a5150a02..be8b7df7 100644
--- a/src/tools/jwt-parser/jwt-parser.constants.ts
+++ b/src/tools/jwt-parser/jwt-parser.constants.ts
@@ -1,92 +1,94 @@
+import { translate as t } from '@/plugins/i18n.plugin';
+
 // From https://datatracker.ietf.org/doc/html/rfc7518#section-3.1
 export const ALGORITHM_DESCRIPTIONS: { [k: string]: string } = {
-  HS256: 'HMAC using SHA-256',
-  HS384: 'HMAC using SHA-384',
-  HS512: 'HMAC using SHA-512',
-  RS256: 'RSASSA-PKCS1-v1_5 using SHA-256',
-  RS384: 'RSASSA-PKCS1-v1_5 using SHA-384',
-  RS512: 'RSASSA-PKCS1-v1_5 using SHA-512',
-  ES256: 'ECDSA using P-256 and SHA-256',
-  ES384: 'ECDSA using P-384 and SHA-384',
-  ES512: 'ECDSA using P-521 and SHA-512',
-  PS256: 'RSASSA-PSS using SHA-256 and MGF1 with SHA-256',
-  PS384: 'RSASSA-PSS using SHA-384 and MGF1 with SHA-384',
-  PS512: 'RSASSA-PSS using SHA-512 and MGF1 with SHA-512',
-  none: 'No digital signature or MAC performed',
+  HS256: t('tools.jwt-parser.HS256'),
+  HS384: t('tools.jwt-parser.HS384'),
+  HS512: t('tools.jwt-parser.HS512'),
+  RS256: t('tools.jwt-parser.RS256'),
+  RS384: t('tools.jwt-parser.RS384'),
+  RS512: t('tools.jwt-parser.RS512'),
+  ES256: t('tools.jwt-parser.ES256'),
+  ES384: t('tools.jwt-parser.ES384'),
+  ES512: t('tools.jwt-parser.ES512'),
+  PS256: t('tools.jwt-parser.PS256'),
+  PS384: t('tools.jwt-parser.PS384'),
+  PS512: t('tools.jwt-parser.PS512'),
+  none: t('tools.jwt-parser.none'),
 };
 
 // List extracted from IANA: https://www.iana.org/assignments/jwt/jwt.xhtml
 export const CLAIM_DESCRIPTIONS: Record<string, string> = {
-  typ: 'Type',
-  alg: 'Algorithm',
-  iss: 'Issuer',
-  sub: 'Subject',
-  aud: 'Audience',
-  exp: 'Expiration Time',
-  nbf: 'Not Before',
-  iat: 'Issued At',
-  jti: 'JWT ID',
-  name: 'Full name',
-  given_name: 'Given name(s) or first name(s)',
-  family_name: 'Surname(s) or last name(s)',
-  middle_name: 'Middle name(s)',
-  nickname: 'Casual name',
-  preferred_username: 'Shorthand name by which the End-User wishes to be referred to',
-  profile: 'Profile page URL',
-  picture: 'Profile picture URL',
-  website: 'Web page or blog URL',
-  email: 'Preferred e-mail address',
-  email_verified: 'True if the e-mail address has been verified; otherwise false',
-  gender: 'Gender',
-  birthdate: 'Birthday',
-  zoneinfo: 'Time zone',
-  locale: 'Locale',
-  phone_number: 'Preferred telephone number',
-  phone_number_verified: 'True if the phone number has been verified; otherwise false',
-  address: 'Preferred postal address',
-  updated_at: 'Time the information was last updated',
-  azp: 'Authorized party - the party to which the ID Token was issued',
-  nonce: 'Value used to associate a Client session with an ID Token',
-  auth_time: 'Time when the authentication occurred',
-  at_hash: 'Access Token hash value',
-  c_hash: 'Code hash value',
-  acr: 'Authentication Context Class Reference',
-  amr: 'Authentication Methods References',
-  sub_jwk: 'Public key used to check the signature of an ID Token',
-  cnf: 'Confirmation',
-  sip_from_tag: 'SIP From tag header field parameter value',
-  sip_date: 'SIP Date header field value',
-  sip_callid: 'SIP Call-Id header field value',
-  sip_cseq_num: 'SIP CSeq numeric header field parameter value',
-  sip_via_branch: 'SIP Via branch header field parameter value',
-  orig: 'Originating Identity String',
-  dest: 'Destination Identity String',
-  mky: 'Media Key Fingerprint String',
-  events: 'Security Events',
-  toe: 'Time of Event',
-  txn: 'Transaction Identifier',
-  rph: 'Resource Priority Header Authorization',
-  sid: 'Session ID',
-  vot: 'Vector of Trust value',
-  vtm: 'Vector of Trust trustmark URL',
-  attest: 'Attestation level as defined in SHAKEN framework',
-  origid: 'Originating Identifier as defined in SHAKEN framework',
-  act: 'Actor',
-  scope: 'Scope Values',
-  client_id: 'Client Identifier',
-  may_act: 'Authorized Actor - the party that is authorized to become the actor',
-  jcard: 'jCard data',
-  at_use_nbr: 'Number of API requests for which the access token can be used',
-  div: 'Diverted Target of a Call',
-  opt: 'Original PASSporT (in Full Form)',
-  vc: 'Verifiable Credential as specified in the W3C Recommendation',
-  vp: 'Verifiable Presentation as specified in the W3C Recommendation',
-  sph: 'SIP Priority header field',
-  ace_profile: 'ACE profile a token is supposed to be used with.',
-  cnonce: 'Client nonce',
-  exi: 'Expires in',
-  roles: 'Roles',
-  groups: 'Groups',
-  entitlements: 'Entitlements',
-  token_introspection: 'Token introspection response',
+  typ: t('tools.jwt-parser.typ'),
+  alg: t('tools.jwt-parser.alg'),
+  iss: t('tools.jwt-parser.iss'),
+  sub: t('tools.jwt-parser.sub'),
+  aud: t('tools.jwt-parser.aud'),
+  exp: t('tools.jwt-parser.exp'),
+  nbf: t('tools.jwt-parser.nbf'),
+  iat: t('tools.jwt-parser.iat'),
+  jti: t('tools.jwt-parser.jti'),
+  name: t('tools.jwt-parser.name'),
+  given_name: t('tools.jwt-parser.givenName'),
+  family_name: t('tools.jwt-parser.familyName'),
+  middle_name: t('tools.jwt-parser.middleName'),
+  nickname: t('tools.jwt-parser.nickname'),
+  preferred_username: t('tools.jwt-parser.preferredUsername'),
+  profile: t('tools.jwt-parser.profile'),
+  picture: t('tools.jwt-parser.picture'),
+  website: t('tools.jwt-parser.website'),
+  email: t('tools.jwt-parser.email'),
+  email_verified: t('tools.jwt-parser.emailVerified'),
+  gender: t('tools.jwt-parser.gender'),
+  birthdate: t('tools.jwt-parser.birthdate'),
+  zoneinfo: t('tools.jwt-parser.zoneinfo'),
+  locale: t('tools.jwt-parser.locale'),
+  phone_number: t('tools.jwt-parser.phoneNumber'),
+  phone_number_verified: t('tools.jwt-parser.phoneNumberVerified'),
+  address: t('tools.jwt-parser.address'),
+  updated_at: t('tools.jwt-parser.updatedAt'),
+  azp: t('tools.jwt-parser.azp'),
+  nonce: t('tools.jwt-parser.nonce'),
+  auth_time: t('tools.jwt-parser.authTime'),
+  at_hash: t('tools.jwt-parser.atHash'),
+  c_hash: t('tools.jwt-parser.cHash'),
+  acr: t('tools.jwt-parser.acr'),
+  amr: t('tools.jwt-parser.amr'),
+  sub_jwk: t('tools.jwt-parser.subJwk'),
+  cnf: t('tools.jwt-parser.cnf'),
+  sip_from_tag: t('tools.jwt-parser.sipFromTag'),
+  sip_date: t('tools.jwt-parser.sipDate'),
+  sip_callid: t('tools.jwt-parser.sipCallid'),
+  sip_cseq_num: t('tools.jwt-parser.sipCseqNum'),
+  sip_via_branch: t('tools.jwt-parser.sipViaBranch'),
+  orig: t('tools.jwt-parser.orig'),
+  dest: t('tools.jwt-parser.dest'),
+  mky: t('tools.jwt-parser.mky'),
+  events: t('tools.jwt-parser.events'),
+  toe: t('tools.jwt-parser.toe'),
+  txn: t('tools.jwt-parser.txn'),
+  rph: t('tools.jwt-parser.rph'),
+  sid: t('tools.jwt-parser.sid'),
+  vot: t('tools.jwt-parser.vot'),
+  vtm: t('tools.jwt-parser.vtm'),
+  attest: t('tools.jwt-parser.attest'),
+  origid: t('tools.jwt-parser.origid'),
+  act: t('tools.jwt-parser.act'),
+  scope: t('tools.jwt-parser.scope'),
+  client_id: t('tools.jwt-parser.clientId'),
+  may_act: t('tools.jwt-parser.mayAct'),
+  jcard: t('tools.jwt-parser.jcard'),
+  at_use_nbr: t('tools.jwt-parser.atUseNbr'),
+  div: t('tools.jwt-parser.div'),
+  opt: t('tools.jwt-parser.opt'),
+  vc: t('tools.jwt-parser.vc'),
+  vp: t('tools.jwt-parser.vp'),
+  sph: t('tools.jwt-parser.sph'),
+  ace_profile: t('tools.jwt-parser.aceProfile'),
+  cnonce: t('tools.jwt-parser.cnonce'),
+  exi: t('tools.jwt-parser.exi'),
+  roles: t('tools.jwt-parser.roles'),
+  groups: t('tools.jwt-parser.groups'),
+  entitlements: t('tools.jwt-parser.entitlements'),
+  token_introspection: t('tools.jwt-parser.tokenIntrospection'),
 };
diff --git a/src/tools/jwt-parser/jwt-parser.vue b/src/tools/jwt-parser/jwt-parser.vue
index 6b30fc0c..791ec571 100644
--- a/src/tools/jwt-parser/jwt-parser.vue
+++ b/src/tools/jwt-parser/jwt-parser.vue
@@ -4,6 +4,8 @@ import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
 
+const { t } = useI18n();
+
 const rawJwt = ref(
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c',
 );
@@ -13,8 +15,8 @@ const decodedJWT = computed(() =>
 );
 
 const sections = [
-  { key: 'header', title: 'Header' },
-  { key: 'payload', title: 'Payload' },
+  { key: 'header', title: t('tools.jwt-parser.header') },
+  { key: 'payload', title: t('tools.jwt-parser.payload') },
 ] as const;
 
 const validation = useValidation({
@@ -22,7 +24,7 @@ const validation = useValidation({
   rules: [
     {
       validator: value => value.length > 0 && isNotThrowing(() => decodeJwt({ jwt: rawJwt.value })),
-      message: 'Invalid JWT',
+      message: t('tools.jwt-parser.invalidJWT'),
     },
   ],
 });
@@ -30,7 +32,7 @@ const validation = useValidation({
 
 <template>
   <c-card>
-    <c-input-text v-model:value="rawJwt" label="JWT to decode" :validation="validation" placeholder="Put your token here..." rows="5" multiline raw-text autofocus mb-3 />
+    <c-input-text v-model:value="rawJwt" :label="t('tools.jwt-parser.label')" :validation="validation" :placeholder="t('tools.jwt-parser.placeholder')" rows="5" multiline raw-text autofocus mb-3 />
 
     <n-table v-if="validation.isValid">
       <tbody>
diff --git a/src/tools/jwt-parser/locales/en.yml b/src/tools/jwt-parser/locales/en.yml
index 956f9239..ef3cb2d4 100644
--- a/src/tools/jwt-parser/locales/en.yml
+++ b/src/tools/jwt-parser/locales/en.yml
@@ -2,3 +2,97 @@ tools:
   jwt-parser:
     title: JWT parser
     description: Parse and decode your JSON Web Token (jwt) and display its content.
+
+    label: JWT to decode
+    placeholder: Put your token here...
+    header: Header
+    payload: Payload
+
+    invalidJWT: Invalid JWT
+
+    HS256: 'HMAC using SHA-256'
+    HS384: 'HMAC using SHA-384'
+    HS512: 'HMAC using SHA-512'
+    RS256: 'RSASSA-PKCS1-v1_5 using SHA-256'
+    RS384: 'RSASSA-PKCS1-v1_5 using SHA-384'
+    RS512: 'RSASSA-PKCS1-v1_5 using SHA-512'
+    ES256: 'ECDSA using P-256 and SHA-256'
+    ES384: 'ECDSA using P-384 and SHA-384'
+    ES512: 'ECDSA using P-521 and SHA-512'
+    PS256: 'RSASSA-PSS using SHA-256 and MGF1 with SHA-256'
+    PS384: 'RSASSA-PSS using SHA-384 and MGF1 with SHA-384'
+    PS512: 'RSASSA-PSS using SHA-512 and MGF1 with SHA-512'
+    none: 'No digital signature or MAC performed'
+
+    typ: 'Type'
+    alg: 'Algorithm'
+    iss: 'Issuer'
+    sub: 'Subject'
+    aud: 'Audience'
+    exp: 'Expiration Time'
+    nbf: 'Not Before'
+    iat: 'Issued At'
+    jti: 'JWT ID'
+    name: 'Full name'
+    givenName: 'Given name(s) or first name(s)'
+    familyName: 'Surname(s) or last name(s)'
+    middleName: 'Middle name(s)'
+    nickname: 'Casual name'
+    preferredUsername: 'Shorthand name by which the End-User wishes to be referred to'
+    profile: 'Profile page URL'
+    picture: 'Profile picture URL'
+    website: 'Web page or blog URL'
+    email: 'Preferred e-mail address'
+    emailVerified: 'True if the e-mail address has been verified; otherwise false'
+    gender: 'Gender'
+    birthdate: 'Birthday'
+    zoneinfo: 'Time zone'
+    locale: 'Locale'
+    phoneNumber: 'Preferred telephone number'
+    phoneNumberVerified: 'True if the phone number has been verified; otherwise false'
+    address: 'Preferred postal address'
+    updatedAt: 'Time the information was last updated'
+    azp: 'Authorized party - the party to which the ID Token was issued'
+    nonce: 'Value used to associate a Client session with an ID Token'
+    authTime: 'Time when the authentication occurred'
+    atHash: 'Access Token hash value'
+    cHash: 'Code hash value'
+    acr: 'Authentication Context Class Reference'
+    amr: 'Authentication Methods References'
+    subJwk: 'Public key used to check the signature of an ID Token'
+    cnf: 'Confirmation'
+    sipFromTag: 'SIP From tag header field parameter value'
+    sipDate: 'SIP Date header field value'
+    sipCallid: 'SIP Call-Id header field value'
+    sipCseqNum: 'SIP CSeq numeric header field parameter value'
+    sipViaBranch: 'SIP Via branch header field parameter value'
+    orig: 'Originating Identity String'
+    dest: 'Destination Identity String'
+    mky: 'Media Key Fingerprint String'
+    events: 'Security Events'
+    toe: 'Time of Event'
+    txn: 'Transaction Identifier'
+    rph: 'Resource Priority Header Authorization'
+    sid: 'Session ID'
+    vot: 'Vector of Trust value'
+    vtm: 'Vector of Trust trustmark URL'
+    attest: 'Attestation level as defined in SHAKEN framework'
+    origid: 'Originating Identifier as defined in SHAKEN framework'
+    act: 'Actor'
+    scope: 'Scope Values'
+    clientId: 'Client Identifier'
+    mayAct: 'Authorized Actor - the party that is authorized to become the actor'
+    jcard: 'jCard data'
+    atUseNbr: 'Number of API requests for which the access token can be used'
+    div: 'Diverted Target of a Call'
+    opt: 'Original PASSporT (in Full Form)'
+    vc: 'Verifiable Credential as specified in the W3C Recommendation'
+    vp: 'Verifiable Presentation as specified in the W3C Recommendation'
+    sph: 'SIP Priority header field'
+    aceProfile: 'ACE profile a token is supposed to be used with.'
+    cnonce: 'Client nonce'
+    exi: 'Expires in'
+    roles: 'Roles'
+    groups: 'Groups'
+    entitlements: 'Entitlements'
+    tokenIntrospection: 'Token introspection response'
diff --git a/src/tools/jwt-parser/locales/zh.yml b/src/tools/jwt-parser/locales/zh.yml
new file mode 100644
index 00000000..66f77a4b
--- /dev/null
+++ b/src/tools/jwt-parser/locales/zh.yml
@@ -0,0 +1,98 @@
+tools:
+  jwt-parser:
+    title: JWT 解析器
+    description: 解析和解码您的 JSON Web Token (jwt) 并显示其内容。
+
+    label: 要解码的 JWT
+    placeholder: 在这里放置您的令牌...
+    header: 头部
+    payload: 负载
+
+    invalidJWT: 无效的 JWT
+
+    HS256: '使用 SHA-256 的 HMAC'
+    HS384: '使用 SHA-384 的 HMAC'
+    HS512: '使用 SHA-512 的 HMAC'
+    RS256: '使用 SHA-256 的 RSASSA-PKCS1-v1_5'
+    RS384: '使用 SHA-384 的 RSASSA-PKCS1-v1_5'
+    RS512: '使用 SHA-512 的 RSASSA-PKCS1-v1_5'
+    ES256: '使用 P-256 和 SHA-256 的 ECDSA'
+    ES384: '使用 P-384 和 SHA-384 的 ECDSA'
+    ES512: '使用 P-521 和 SHA-512 的 ECDSA'
+    PS256: '使用 SHA-256 和具有 SHA-256 的 MGF1 的 RSASSA-PSS'
+    PS384: '使用 SHA-384 和具有 SHA-384 的 MGF1 的 RSASSA-PSS'
+    PS512: '使用 SHA-512 和具有 SHA-512 的 MGF1 的 RSASSA-PSS'
+    none: '未执行数字签名或 MAC'
+
+    typ: '类型'
+    alg: '算法'
+    iss: '签发者'
+    sub: '主题'
+    aud: '受众'
+    exp: '过期时间'
+    nbf: '不早于'
+    iat: '签发时间'
+    jti: 'JWT ID'
+    name: '全名'
+    givenName: '名字'
+    familyName: '姓氏'
+    middleName: '中间名'
+    nickname: '昵称'
+    preferredUsername: '用户希望被称呼的简称'
+    profile: '个人资料页面 URL'
+    picture: '个人资料图片 URL'
+    website: '网页或博客 URL'
+    email: '首选电子邮件地址'
+    emailVerified: '如果电子邮件地址已经验证为 true；否则为 false'
+    gender: '性别'
+    birthdate: '生日'
+    zoneinfo: '时区'
+    locale: '区域设置'
+    phoneNumber: '首选电话号码'
+    phoneNumberVerified: '如果电话号码已经验证为 true；否则为 false'
+    address: '首选邮寄地址'
+    updatedAt: '信息上次更新时间'
+    azp: '授权方 - 发出 ID 令牌的一方'
+    nonce: '用于将客户端会话与 ID 令牌关联的值'
+    authTime: '认证发生时间'
+    atHash: '访问令牌哈希值'
+    cHash: '代码哈希值'
+    acr: '认证上下文类引用'
+    amr: '认证方法引用'
+    subJwk: '用于验证 ID 令牌签名的公钥'
+    cnf: '确认'
+    sipFromTag: 'SIP From 标签头字段参数值'
+    sipDate: 'SIP 日期头字段值'
+    sipCallid: 'SIP Call-Id 头字段值'
+    sipCseqNum: 'SIP CSeq 数字头字段参数值'
+    sipViaBranch: 'SIP Via 分支头字段参数值'
+    orig: '原始身份字符串'
+    dest: '目标身份字符串'
+    mky: '媒体密钥指纹字符串'
+    events: '安全事件'
+    toe: '事件时间'
+    txn: '交易标识符'
+    rph: '资源优先级头授权'
+    sid: '会话 ID'
+    vot: '信任向量值'
+    vtm: '信任向量标记 URL'
+    attest: 'SHAKEN 框架中定义的证明级别'
+    origid: 'SHAKEN 框架中定义的起始标识符'
+    act: '操作者'
+    scope: '范围值'
+    clientId: '客户端标识符'
+    mayAct: '授权操作者 - 被授权成为操作者的一方'
+    jcard: 'jCard 数据'
+    atUseNbr: '访问令牌可用于的 API 请求次数'
+    div: '呼叫的被转移目标'
+    opt: '原始 PASSporT（完整形式）'
+    vc: '根据 W3C 推荐规范指定的可验证凭证'
+    vp: '根据 W3C 推荐规范指定的可验证展示'
+    sph: 'SIP 优先级头字段'
+    aceProfile: 'ACE 配置文件应与之一起使用的令牌'
+    cnonce: '客户端随机数'
+    exi: '剩余时间'
+    roles: '角色'
+    groups: '组'
+    entitlements: '权利'
+    tokenIntrospection: '令牌内省响应'
diff --git a/src/tools/keycode-info/index.ts b/src/tools/keycode-info/index.ts
index a9ffab2d..fa8ea17c 100644
--- a/src/tools/keycode-info/index.ts
+++ b/src/tools/keycode-info/index.ts
@@ -1,10 +1,11 @@
 import { Keyboard } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Keycode info',
+  name: t('tools.keycode-info.title'),
   path: '/keycode-info',
-  description: 'Find the javascript keycode, code, location and modifiers of any pressed key.',
+  description: t('tools.keycode-info.description'),
   keywords: [
     'keycode',
     'info',
diff --git a/src/tools/keycode-info/keycode-info.vue b/src/tools/keycode-info/keycode-info.vue
index a999d8ae..420e9c76 100644
--- a/src/tools/keycode-info/keycode-info.vue
+++ b/src/tools/keycode-info/keycode-info.vue
@@ -5,6 +5,8 @@ import InputCopyable from '../../components/InputCopyable.vue';
 
 const event = ref<KeyboardEvent>();
 
+const { t } = useI18n();
+
 useEventListener(document, 'keydown', (e) => {
   event.value = e;
 });
@@ -16,28 +18,28 @@ const fields = computed(() => {
 
   return [
     {
-      label: 'Key :',
+      label: t('tools.keycode-info.keyLabel'),
       value: event.value.key,
-      placeholder: 'Key name...',
+      placeholder: t('tools.keycode-info.keyPlaceholder'),
     },
     {
-      label: 'Keycode :',
+      label: t('tools.keycode-info.keycodeLabel'),
       value: String(event.value.keyCode),
-      placeholder: 'Keycode...',
+      placeholder: t('tools.keycode-info.keycodePlaceholder'),
     },
     {
-      label: 'Code :',
+      label: t('tools.keycode-info.codeLabel'),
       value: event.value.code,
-      placeholder: 'Code...',
+      placeholder: t('tools.keycode-info.codePlaceholder'),
     },
     {
-      label: 'Location :',
+      label: t('tools.keycode-info.locationLabel'),
       value: String(event.value.location),
-      placeholder: 'Code...',
+      placeholder: t('tools.keycode-info.locationPlaceholder'),
     },
 
     {
-      label: 'Modifiers :',
+      label: t('tools.keycode-info.modifiersLabel'),
       value: [
         event.value.metaKey && 'Meta',
         event.value.shiftKey && 'Shift',
@@ -46,7 +48,7 @@ const fields = computed(() => {
       ]
         .filter(Boolean)
         .join(' + '),
-      placeholder: 'None',
+      placeholder: t('tools.keycode-info.modifiersPlaceholder'),
     },
   ];
 });
@@ -59,7 +61,7 @@ const fields = computed(() => {
         {{ event.key }}
       </div>
       <span lh-1 op-70>
-        Press the key on your keyboard you want to get info about this key
+        {{ t('tools.keycode-info.tips') }}
       </span>
     </c-card>
 
diff --git a/src/tools/keycode-info/locales/en.yml b/src/tools/keycode-info/locales/en.yml
index 98322a55..dbae839f 100644
--- a/src/tools/keycode-info/locales/en.yml
+++ b/src/tools/keycode-info/locales/en.yml
@@ -2,3 +2,16 @@ tools:
   keycode-info:
     title: Keycode info
     description: Find the javascript keycode, code, location and modifiers of any pressed key.
+
+    keyLabel: 'Key :'
+    keyPlaceholder: 'Key name...'
+    keycodeLabel: 'Keycode :'
+    keycodePlaceholder: 'Keycode...'
+    codeLabel: 'Code :'
+    codePlaceholder: 'Code...'
+    locationLabel: 'Location :'
+    locationPlaceholder: 'Code...'
+    modifiersLabel: 'Modifiers :'
+    modifiersPlaceholder: 'None'
+
+    tips: Press the key on your keyboard you want to get info about this key
diff --git a/src/tools/keycode-info/locales/zh.yml b/src/tools/keycode-info/locales/zh.yml
new file mode 100644
index 00000000..80b5eac4
--- /dev/null
+++ b/src/tools/keycode-info/locales/zh.yml
@@ -0,0 +1,17 @@
+tools:
+  keycode-info:
+    title: 按键信息
+    description: 查找任何按键的 JavaScript 按键码、代码、位置和修饰键。
+
+    keyLabel: '按键：'
+    keyPlaceholder: '按键名称...'
+    keycodeLabel: '按键码：'
+    keycodePlaceholder: '按键码...'
+    codeLabel: '代码：'
+    codePlaceholder: '代码...'
+    locationLabel: '位置：'
+    locationPlaceholder: '位置...'
+    modifiersLabel: '修饰键：'
+    modifiersPlaceholder: '无'
+
+    tips: 按下您键盘上想要获取信息的按键
diff --git a/src/tools/slugify-string/index.ts b/src/tools/slugify-string/index.ts
index 8dabcdb1..07ee16bc 100644
--- a/src/tools/slugify-string/index.ts
+++ b/src/tools/slugify-string/index.ts
@@ -1,10 +1,11 @@
 import { AbcRound } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Slugify string',
+  name: t('tools.slugify-string.title'),
   path: '/slugify-string',
-  description: 'Make a string url, filename and id safe.',
+  description: t('tools.slugify-string.description'),
   keywords: ['slugify', 'string', 'escape', 'emoji', 'special', 'character', 'space', 'trim'],
   component: () => import('./slugify-string.vue'),
   icon: AbcRound,
diff --git a/src/tools/slugify-string/locales/en.yml b/src/tools/slugify-string/locales/en.yml
index 7161b20d..fe2fdd37 100644
--- a/src/tools/slugify-string/locales/en.yml
+++ b/src/tools/slugify-string/locales/en.yml
@@ -2,3 +2,11 @@ tools:
   slugify-string:
     title: Slugify string
     description: Make a string url, filename and id safe.
+
+    inputLabel: Your string to slugify
+    inputPlaceholder: 'Put your string here (ex: My file path)'
+    outputLabel: Your slug
+    outputPlaceholder: 'You slug will be generated here (ex: my-file-path)'
+    copyBtn: Copy slug
+
+    copied: Slug copied to clipboard
diff --git a/src/tools/slugify-string/locales/zh.yml b/src/tools/slugify-string/locales/zh.yml
new file mode 100644
index 00000000..925ae6e6
--- /dev/null
+++ b/src/tools/slugify-string/locales/zh.yml
@@ -0,0 +1,12 @@
+tools:
+  slugify-string:
+    title: 字符串转换为 Slug
+    description: 将字符串转换为 URL、文件名和 ID 安全的格式。
+
+    inputLabel: 要转换为 Slug 的字符串
+    inputPlaceholder: '在此输入您的字符串（例如：我的文件路径）'
+    outputLabel: 您的 Slug
+    outputPlaceholder: '您的 Slug 将在此生成（例如：my-file-path）'
+    copyBtn: 复制 Slug
+
+    copied: Slug 已复制到剪贴板
diff --git a/src/tools/slugify-string/slugify-string.vue b/src/tools/slugify-string/slugify-string.vue
index f7666e30..82b44ec8 100644
--- a/src/tools/slugify-string/slugify-string.vue
+++ b/src/tools/slugify-string/slugify-string.vue
@@ -3,20 +3,21 @@ import slugify from '@sindresorhus/slugify';
 import { withDefaultOnError } from '@/utils/defaults';
 import { useCopy } from '@/composable/copy';
 
+const { t } = useI18n();
 const input = ref('');
 const slug = computed(() => withDefaultOnError(() => slugify(input.value), ''));
-const { copy } = useCopy({ source: slug, text: 'Slug copied to clipboard' });
+const { copy } = useCopy({ source: slug, text: t('tools.slugify-string.copied') });
 </script>
 
 <template>
   <div>
-    <c-input-text v-model:value="input" multiline placeholder="Put your string here (ex: My file path)" label="Your string to slugify" autofocus raw-text mb-5 />
+    <c-input-text v-model:value="input" multiline :placeholder="t('tools.slugify-string.inputPlaceholder')" :label="t('tools.slugify-string.inputLabel')" autofocus raw-text mb-5 />
 
-    <c-input-text :value="slug" multiline readonly placeholder="You slug will be generated here (ex: my-file-path)" label="Your slug" mb-5 />
+    <c-input-text :value="slug" multiline readonly :placeholder="t('tools.slugify-string.outputPlaceholder')" :label="t('tools.slugify-string.outputLabel')" mb-5 />
 
     <div flex justify-center>
       <c-button :disabled="slug.length === 0" @click="copy()">
-        Copy slug
+        {{ t('tools.slugify-string.copyBtn') }}
       </c-button>
     </div>
   </div>
diff --git a/src/tools/user-agent-parser/index.ts b/src/tools/user-agent-parser/index.ts
index 1ae05d14..6f8303fa 100644
--- a/src/tools/user-agent-parser/index.ts
+++ b/src/tools/user-agent-parser/index.ts
@@ -1,10 +1,11 @@
 import { Browser } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'User-agent parser',
+  name: t('tools.user-agent-parser.title'),
   path: '/user-agent-parser',
-  description: 'Detect and parse Browser, Engine, OS, CPU, and Device type/model from an user-agent string.',
+  description: t('tools.user-agent-parser.description'),
   keywords: ['user', 'agent', 'parser', 'browser', 'engine', 'os', 'cpu', 'device', 'user-agent', 'client'],
   component: () => import('./user-agent-parser.vue'),
   icon: Browser,
diff --git a/src/tools/user-agent-parser/locales/en.yml b/src/tools/user-agent-parser/locales/en.yml
index 8116a38c..a17ad9c9 100644
--- a/src/tools/user-agent-parser/locales/en.yml
+++ b/src/tools/user-agent-parser/locales/en.yml
@@ -2,3 +2,29 @@ tools:
   user-agent-parser:
     title: User-agent parser
     description: Detect and parse Browser, Engine, OS, CPU, and Device type/model from an user-agent string.
+
+    name: Name
+    version: Version
+    model: Model
+    type: Type
+    vendor: Vendor
+    architecture: Architecture
+
+    browser: Browser
+    browserNameFallback: No browser name available
+    browserVersionFallback: No browser version available
+    engine: Engine
+    engineNameFallback: No engine name available
+    engineVersionFallback: No engine version available
+    os: OS
+    osNameFallback: No OS name available
+    osVersionFallback: No OS version available
+    device: Device
+    deviceModelFallback: No device model available
+    deviceTypeFallback: No device type available
+    deviceVendorFallback: No device vendor available
+    cpu: CPU
+    cpuArchitectureFallback: No CPU architecture available
+
+    label: User agent string
+    placeholder: Put your user-agent here...
diff --git a/src/tools/user-agent-parser/locales/zh.yml b/src/tools/user-agent-parser/locales/zh.yml
new file mode 100644
index 00000000..f1949d38
--- /dev/null
+++ b/src/tools/user-agent-parser/locales/zh.yml
@@ -0,0 +1,30 @@
+tools:
+  user-agent-parser:
+    title: User-agent 解析器
+    description: 从用户代理字符串中检测和解析浏览器、引擎、操作系统、CPU 和设备类型/型号。
+
+    name: 名称
+    version: 版本
+    model: 型号
+    type: 类型
+    vendor: 供应商
+    architecture: 架构
+
+    browser: 浏览器
+    browserNameFallback: 没有可用的浏览器名称
+    browserVersionFallback: 没有可用的浏览器版本
+    engine: 引擎
+    engineNameFallback: 没有可用的引擎名称
+    engineVersionFallback: 没有可用的引擎版本
+    os: 操作系统
+    osNameFallback: 没有可用的操作系统名称
+    osVersionFallback: 没有可用的操作系统版本
+    device: 设备
+    deviceModelFallback: 没有可用的设备型号
+    deviceTypeFallback: 没有可用的设备类型
+    deviceVendorFallback: 没有可用的设备供应商
+    cpu: 中央处理器
+    cpuArchitectureFallback: 没有可用的 CPU 架构
+
+    label: 用户代理字符串
+    placeholder: 在此处输入您的用户代理字符串...
diff --git a/src/tools/user-agent-parser/user-agent-parser.vue b/src/tools/user-agent-parser/user-agent-parser.vue
index 5a4ec270..67a23d3f 100644
--- a/src/tools/user-agent-parser/user-agent-parser.vue
+++ b/src/tools/user-agent-parser/user-agent-parser.vue
@@ -6,6 +6,7 @@ import type { UserAgentResultSection } from './user-agent-parser.types';
 import { withDefaultOnError } from '@/utils/defaults';
 
 const ua = ref(navigator.userAgent as string);
+const { t } = useI18n();
 
 // If not input in the ua field is present return an empty object of type UAParser.IResult because otherwise
 // UAParser returns the values for the current Browser. This is confusing because results are shown for an empty
@@ -19,82 +20,82 @@ const userAgentInfo = computed(() => withDefaultOnError(() => getUserAgentInfo(u
 
 const sections: UserAgentResultSection[] = [
   {
-    heading: 'Browser',
+    heading: t('tools.user-agent-parser.browser'),
     icon: Browser,
     content: [
       {
-        label: 'Name',
+        label: t('tools.user-agent-parser.name'),
         getValue: block => block?.browser.name,
-        undefinedFallback: 'No browser name available',
+        undefinedFallback: t('tools.user-agent-parser.browserNameFallback'),
       },
       {
-        label: 'Version',
+        label: t('tools.user-agent-parser.version'),
         getValue: block => block?.browser.version,
-        undefinedFallback: 'No browser version available',
+        undefinedFallback: t('tools.user-agent-parser.browserVersionFallback'),
       },
     ],
   },
   {
-    heading: 'Engine',
+    heading: t('tools.user-agent-parser.engine'),
     icon: Engine,
     content: [
       {
-        label: 'Name',
+        label: t('tools.user-agent-parser.name'),
         getValue: block => block?.engine.name,
-        undefinedFallback: 'No engine name available',
+        undefinedFallback: t('tools.user-agent-parser.engineNameFallback'),
       },
       {
-        label: 'Version',
+        label: t('tools.user-agent-parser.version'),
         getValue: block => block?.engine.version,
-        undefinedFallback: 'No engine version available',
+        undefinedFallback: t('tools.user-agent-parser.engineVersionFallback'),
       },
     ],
   },
   {
-    heading: 'OS',
+    heading: t('tools.user-agent-parser.os'),
     icon: Adjustments,
     content: [
       {
-        label: 'Name',
+        label: t('tools.user-agent-parser.name'),
         getValue: block => block?.os.name,
-        undefinedFallback: 'No OS name available',
+        undefinedFallback: t('tools.user-agent-parser.osNameFallback'),
       },
       {
-        label: 'Version',
+        label: t('tools.user-agent-parser.version'),
         getValue: block => block?.os.version,
-        undefinedFallback: 'No OS version available',
+        undefinedFallback: t('tools.user-agent-parser.osVersionFallback'),
       },
     ],
   },
   {
-    heading: 'Device',
+    heading: t('tools.user-agent-parser.device'),
     icon: Devices,
     content: [
       {
-        label: 'Model',
+        label: t('tools.user-agent-parser.model'),
         getValue: block => block?.device.model,
-        undefinedFallback: 'No device model available',
+        undefinedFallback: t('tools.user-agent-parser.deviceModelFallback'),
       },
       {
-        label: 'Type',
+        label: t('tools.user-agent-parser.type'),
         getValue: block => block?.device.type,
-        undefinedFallback: 'No device type available',
+        undefinedFallback: t('tools.user-agent-parser.deviceTypeFallback'),
       },
       {
-        label: 'Vendor',
+        label: t('tools.user-agent-parser.vendor'),
         getValue: block => block?.device.vendor,
-        undefinedFallback: 'No device vendor available',
+        undefinedFallback: t('tools.user-agent-parser.deviceVendorFallback'),
       },
     ],
   },
   {
-    heading: 'CPU',
+    heading: t('tools.user-agent-parser.cpu'),
     icon: Cpu,
     content: [
       {
-        label: 'Architecture',
+        label: t('tools.user-agent-parser.architecture'),
         getValue: block => block?.cpu.architecture,
-        undefinedFallback: 'No CPU architecture available',
+        undefinedFallback: t('tools.user-agent-parser.cpuArchitectureFallback'),
       },
     ],
   },
@@ -105,9 +106,9 @@ const sections: UserAgentResultSection[] = [
   <div>
     <c-input-text
       v-model:value="ua"
-      label="User agent string"
+      :label="t('tools.user-agent-parser.label')"
       multiline
-      placeholder="Put your user-agent here..."
+      :placeholder="t('tools.user-agent-parser.placeholder')"
       clearable
       raw-text
       rows="2"

From 4f550a9499301f866c686cb6a03aeef042060ac2 Mon Sep 17 00:00:00 2001
From: Amery2010 <amery@xiangfa.org>
Date: Mon, 19 Feb 2024 17:38:30 +0800
Subject: [PATCH 6/8] WIP(translate): translate two category all tools

---
 components.d.ts                               |  1 +
 src/tools/camera-recorder/camera-recorder.vue | 37 ++++-----
 src/tools/camera-recorder/index.ts            |  5 +-
 src/tools/camera-recorder/locales/en.yml      | 22 ++++++
 src/tools/camera-recorder/locales/zh.yml      | 22 ++++++
 .../chmod-calculator/chmod-calculator.vue     | 13 ++--
 src/tools/chmod-calculator/index.ts           |  5 +-
 src/tools/chmod-calculator/locales/en.yml     | 11 +++
 src/tools/chmod-calculator/locales/zh.yml     | 11 +++
 .../crontab-generator/crontab-generator.vue   | 66 ++++++++--------
 src/tools/crontab-generator/index.ts          |  5 +-
 src/tools/crontab-generator/locales/en.yml    | 38 +++++++++
 src/tools/crontab-generator/locales/zh.yml    | 38 +++++++++
 ...docker-run-to-docker-compose-converter.vue | 13 ++--
 .../index.ts                                  |  5 +-
 .../locales/en.yml                            | 12 +++
 .../locales/zh.yml                            | 12 +++
 src/tools/git-memo/git-memo.content.zh.md     | 77 +++++++++++++++++++
 src/tools/git-memo/git-memo.vue               |  5 +-
 src/tools/git-memo/index.ts                   |  6 +-
 src/tools/git-memo/locales/en.yml             |  4 +
 src/tools/git-memo/locales/zh.yml             |  4 +
 src/tools/json-minify/index.ts                |  5 +-
 src/tools/json-minify/json-minify.vue         |  9 ++-
 src/tools/json-minify/locales/en.yml          | 10 +++
 src/tools/json-minify/locales/zh.yml          | 10 +++
 src/tools/json-to-csv/index.ts                |  5 +-
 src/tools/json-to-csv/json-to-csv.vue         |  9 ++-
 src/tools/json-to-csv/locales/en.yml          | 10 +++
 src/tools/json-to-csv/locales/zh.yml          | 10 +++
 src/tools/json-viewer/index.ts                |  5 +-
 src/tools/json-viewer/json-viewer.vue         | 13 ++--
 src/tools/json-viewer/locales/en.yml          | 12 +++
 src/tools/json-viewer/locales/zh.yml          | 12 +++
 src/tools/qr-code-generator/index.ts          |  6 +-
 src/tools/qr-code-generator/locales/en.yml    | 16 ++++
 src/tools/qr-code-generator/locales/zh.yml    | 16 ++++
 .../qr-code-generator/qr-code-generator.vue   | 17 ++--
 src/tools/random-port-generator/index.ts      |  5 +-
 .../random-port-generator/locales/en.yml      |  8 ++
 .../random-port-generator/locales/zh.yml      |  8 ++
 .../random-port-generator.vue                 |  7 +-
 src/tools/sql-prettify/index.ts               |  5 +-
 src/tools/sql-prettify/locales/en.yml         | 19 +++++
 src/tools/sql-prettify/locales/zh.yml         | 19 +++++
 src/tools/sql-prettify/sql-prettify.vue       | 27 +++----
 src/tools/svg-placeholder-generator/index.ts  |  5 +-
 .../svg-placeholder-generator/locales/en.yml  | 21 +++++
 .../svg-placeholder-generator/locales/zh.yml  | 21 +++++
 .../svg-placeholder-generator.vue             | 33 ++++----
 src/tools/wifi-qr-code-generator/index.ts     |  6 +-
 .../wifi-qr-code-generator/locales/en.yml     | 20 +++++
 .../wifi-qr-code-generator/locales/zh.yml     | 20 +++++
 .../wifi-qr-code-generator.vue                | 37 +++++----
 src/tools/xml-formatter/index.ts              |  5 +-
 src/tools/xml-formatter/locales/en.yml        | 12 +++
 src/tools/xml-formatter/locales/zh.yml        | 12 +++
 src/tools/xml-formatter/xml-formatter.vue     | 13 ++--
 58 files changed, 708 insertions(+), 172 deletions(-)
 create mode 100644 src/tools/camera-recorder/locales/en.yml
 create mode 100644 src/tools/camera-recorder/locales/zh.yml
 create mode 100644 src/tools/chmod-calculator/locales/en.yml
 create mode 100644 src/tools/chmod-calculator/locales/zh.yml
 create mode 100644 src/tools/crontab-generator/locales/en.yml
 create mode 100644 src/tools/crontab-generator/locales/zh.yml
 create mode 100644 src/tools/docker-run-to-docker-compose-converter/locales/en.yml
 create mode 100644 src/tools/docker-run-to-docker-compose-converter/locales/zh.yml
 create mode 100644 src/tools/git-memo/git-memo.content.zh.md
 create mode 100644 src/tools/git-memo/locales/en.yml
 create mode 100644 src/tools/git-memo/locales/zh.yml
 create mode 100644 src/tools/json-minify/locales/en.yml
 create mode 100644 src/tools/json-minify/locales/zh.yml
 create mode 100644 src/tools/json-to-csv/locales/en.yml
 create mode 100644 src/tools/json-to-csv/locales/zh.yml
 create mode 100644 src/tools/json-viewer/locales/en.yml
 create mode 100644 src/tools/json-viewer/locales/zh.yml
 create mode 100644 src/tools/qr-code-generator/locales/en.yml
 create mode 100644 src/tools/qr-code-generator/locales/zh.yml
 create mode 100644 src/tools/random-port-generator/locales/en.yml
 create mode 100644 src/tools/random-port-generator/locales/zh.yml
 create mode 100644 src/tools/sql-prettify/locales/en.yml
 create mode 100644 src/tools/sql-prettify/locales/zh.yml
 create mode 100644 src/tools/svg-placeholder-generator/locales/en.yml
 create mode 100644 src/tools/svg-placeholder-generator/locales/zh.yml
 create mode 100644 src/tools/wifi-qr-code-generator/locales/en.yml
 create mode 100644 src/tools/wifi-qr-code-generator/locales/zh.yml
 create mode 100644 src/tools/xml-formatter/locales/en.yml
 create mode 100644 src/tools/xml-formatter/locales/zh.yml

diff --git a/components.d.ts b/components.d.ts
index d034fc78..36d3c137 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -80,6 +80,7 @@ declare module '@vue/runtime-core' {
     FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
     GitMemo: typeof import('./src/tools/git-memo/git-memo.vue')['default']
     'GitMemo.content': typeof import('./src/tools/git-memo/git-memo.content.md')['default']
+    'GitMemo.content.zh': typeof import('./src/tools/git-memo/git-memo.content.zh.md')['default']
     HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']
     HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
     'Home.page': typeof import('./src/pages/Home.page.vue')['default']
diff --git a/src/tools/camera-recorder/camera-recorder.vue b/src/tools/camera-recorder/camera-recorder.vue
index 23fedd8c..d075cff3 100644
--- a/src/tools/camera-recorder/camera-recorder.vue
+++ b/src/tools/camera-recorder/camera-recorder.vue
@@ -19,6 +19,8 @@ const {
   },
 });
 
+const { t } = useI18n();
+
 const video = ref<HTMLVideoElement>();
 const medias = ref<Media[]>([]);
 const currentCamera = ref(cameras.value[0]?.deviceId);
@@ -106,20 +108,19 @@ function downloadMedia({ type, value, createdAt }: Media) {
 <template>
   <div>
     <c-card v-if="!isSupported">
-      Your browser does not support recording video from camera
+      {{ t('tools.camera-recorder.unSupported') }}
     </c-card>
 
     <c-card v-else-if="!permissionGranted" text-center>
-      You need to grant permission to use your camera and microphone
+      {{ t('tools.camera-recorder.needPermissionGranted') }}
 
       <c-alert v-if="permissionCannotBePrompted" mt-4 text-left>
-        Your browser has blocked permission request or does not support it. You need to grant permission manually in
-        your browser settings (usually the lock icon in the address bar).
+        {{ t('tools.camera-recorder.permissionCannotBePrompted') }}
       </c-alert>
 
       <div v-else mt-4 flex justify-center>
         <c-button @click="requestPermissions">
-          Grant permission
+          {{ t('tools.camera-recorder.grantPermission') }}
         </c-button>
       </div>
     </c-card>
@@ -130,24 +131,24 @@ function downloadMedia({ type, value, createdAt }: Media) {
           v-model:value="currentCamera"
           label-position="left"
           label-width="60px"
-          label="Video:"
+          :label="t('tools.camera-recorder.cameraLabel')"
           :options="cameras.map(({ deviceId, label }) => ({ value: deviceId, label }))"
-          placeholder="Select camera"
+          :placeholder="t('tools.camera-recorder.cameraPlaceholder')"
         />
         <c-select
           v-if="currentMicrophone && microphones.length > 0"
           v-model:value="currentMicrophone"
-          label="Audio:"
+          :label="t('tools.camera-recorder.microphoneLabel')"
           label-position="left"
           label-width="60px"
           :options="microphones.map(({ deviceId, label }) => ({ value: deviceId, label }))"
-          placeholder="Select microphone"
+          :placeholder="t('tools.camera-recorder.microphonePlaceholder')"
         />
       </div>
 
       <div v-if="!isMediaStreamAvailable" mt-3 flex justify-center>
         <c-button type="primary" @click="start">
-          Start webcam
+          {{ t('tools.camera-recorder.startWebcam') }}
         </c-button>
       </div>
 
@@ -159,32 +160,32 @@ function downloadMedia({ type, value, createdAt }: Media) {
         <div flex items-center justify-between gap-2>
           <c-button :disabled="!isMediaStreamAvailable" @click="takeScreenshot">
             <span mr-2> <icon-mdi-camera /></span>
-            Take screenshot
+            {{ t('tools.camera-recorder.takeScreenshot') }}
           </c-button>
 
           <div v-if="isRecordingSupported" flex justify-center gap-2>
             <c-button v-if="recordingState === 'stopped'" @click="startRecording">
               <span mr-2> <icon-mdi-video /></span>
-              Start recording
+              {{ t('tools.camera-recorder.startRecording') }}
             </c-button>
 
             <c-button v-if="recordingState === 'recording'" @click="pauseRecording">
               <span mr-2> <icon-mdi-pause /></span>
-              Pause
+              {{ t('tools.camera-recorder.pause') }}
             </c-button>
 
             <c-button v-if="recordingState === 'paused'" @click="resumeRecording">
               <span mr-2> <icon-mdi-play /></span>
-              Resume
+              {{ t('tools.camera-recorder.resume') }}
             </c-button>
 
             <c-button v-if="recordingState !== 'stopped'" type="error" @click="stopRecording">
               <span mr-2> <icon-mdi-record /></span>
-              Stop
+              {{ t('tools.camera-recorder.stop') }}
             </c-button>
           </div>
           <div v-else italic op-60>
-            Video recording is not supported in your browser
+            {{ t('tools.camera-recorder.unSupportRecord') }}
           </div>
         </div>
       </div>
@@ -192,13 +193,13 @@ function downloadMedia({ type, value, createdAt }: Media) {
 
     <div grid grid-cols-2 mt-5 gap-2>
       <c-card v-for="({ type, value, createdAt }, index) in medias" :key="index">
-        <img v-if="type === 'image'" :src="value" max-h-full w-full alt="screenshot">
+        <img v-if="type === 'image'" :src="value" max-h-full w-full :alt="t('tools.camera-recorder.screenshot')">
 
         <video v-else :src="value" controls max-h-full w-full />
 
         <div flex items-center justify-between>
           <div font-bold>
-            {{ type === 'image' ? 'Screenshot' : 'Video' }}
+            {{ type === 'image' ? t('tools.camera-recorder.screenshot') : t('tools.camera-recorder.video') }}
           </div>
 
           <div flex gap-2>
diff --git a/src/tools/camera-recorder/index.ts b/src/tools/camera-recorder/index.ts
index 3c5d11bd..0ab093a5 100644
--- a/src/tools/camera-recorder/index.ts
+++ b/src/tools/camera-recorder/index.ts
@@ -1,10 +1,11 @@
 import { Camera } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Camera recorder',
+  name: t('tools.camera-recorder.title'),
   path: '/camera-recorder',
-  description: 'Take a picture or record a video from your webcam or camera.',
+  description: t('tools.camera-recorder.description'),
   keywords: ['camera', 'recoder'],
   component: () => import('./camera-recorder.vue'),
   icon: Camera,
diff --git a/src/tools/camera-recorder/locales/en.yml b/src/tools/camera-recorder/locales/en.yml
new file mode 100644
index 00000000..dacee763
--- /dev/null
+++ b/src/tools/camera-recorder/locales/en.yml
@@ -0,0 +1,22 @@
+tools:
+  camera-recorder:
+    title: Camera recorder
+    description: Take a picture or record a video from your webcam or camera.
+
+    unSupported: Your browser does not support recording video from camera
+    needPermissionGranted: You need to grant permission to use your camera and microphone
+    permissionCannotBePrompted: Your browser has blocked permission request or does not support it. You need to grant permission manually in your browser settings (usually the lock icon in the address bar).
+    grantPermission: Grant permission
+    cameraLabel: 'Video:'
+    cameraPlaceholder: Select camera
+    microphoneLabel: 'Audio:'
+    microphonePlaceholder: Select microphone
+    startWebcam: Start webcam
+    takeScreenshot: Take screenshot
+    startRecording: Start recording
+    pause: Pause
+    resume: Resume
+    stop: Stop
+    unSupportRecord: Video recording is not supported in your browser
+    screenshot: screenshot
+    video: Video
diff --git a/src/tools/camera-recorder/locales/zh.yml b/src/tools/camera-recorder/locales/zh.yml
new file mode 100644
index 00000000..08450b59
--- /dev/null
+++ b/src/tools/camera-recorder/locales/zh.yml
@@ -0,0 +1,22 @@
+tools:
+  camera-recorder:
+    title: 摄像头录制器
+    description: 从您的网络摄像头或相机拍照或录制视频。
+
+    unSupported: 您的浏览器不支持从摄像头录制视频
+    needPermissionGranted: 您需要授予使用摄像头和麦克风的权限
+    permissionCannotBePrompted: 您的浏览器已阻止权限请求或不支持它。 您需要在浏览器设置中手动授予权限（通常在地址栏中的锁图标）。
+    grantPermission: 授予权限
+    cameraLabel: '视频：'
+    cameraPlaceholder: 选择摄像头
+    microphoneLabel: '音频：'
+    microphonePlaceholder: 选择麦克风
+    startWebcam: 启动网络摄像头
+    takeScreenshot: 拍照
+    startRecording: 开始录制
+    pause: 暂停
+    resume: 恢复
+    stop: 停止
+    unSupportRecord: 您的浏览器不支持视频录制
+    screenshot: 截图
+    video: 视频
diff --git a/src/tools/chmod-calculator/chmod-calculator.vue b/src/tools/chmod-calculator/chmod-calculator.vue
index ba6f4498..cac53ab8 100644
--- a/src/tools/chmod-calculator/chmod-calculator.vue
+++ b/src/tools/chmod-calculator/chmod-calculator.vue
@@ -7,11 +7,12 @@ import { computeChmodOctalRepresentation, computeChmodSymbolicRepresentation } f
 import type { Group, Scope } from './chmod-calculator.types';
 
 const themeVars = useThemeVars();
+const { t } = useI18n();
 
 const scopes: { scope: Scope; title: string }[] = [
-  { scope: 'read', title: 'Read (4)' },
-  { scope: 'write', title: 'Write (2)' },
-  { scope: 'execute', title: 'Execute (1)' },
+  { scope: 'read', title: t('tools.chmod-calculator.read') },
+  { scope: 'write', title: t('tools.chmod-calculator.write') },
+  { scope: 'execute', title: t('tools.chmod-calculator.execute') },
 ];
 const groups: Group[] = ['owner', 'group', 'public'];
 
@@ -32,13 +33,13 @@ const symbolic = computed(() => computeChmodSymbolicRepresentation({ permissions
         <tr>
           <th class="text-center" scope="col" />
           <th class="text-center" scope="col">
-            Owner (u)
+            {{ t('tools.chmod-calculator.owner') }}
           </th>
           <th class="text-center" scope="col">
-            Group (g)
+            {{ t('tools.chmod-calculator.group') }}
           </th>
           <th class="text-center" scope="col">
-            Public (o)
+            {{ t('tools.chmod-calculator.public') }}
           </th>
         </tr>
       </thead>
diff --git a/src/tools/chmod-calculator/index.ts b/src/tools/chmod-calculator/index.ts
index 7d299e42..18165255 100644
--- a/src/tools/chmod-calculator/index.ts
+++ b/src/tools/chmod-calculator/index.ts
@@ -1,10 +1,11 @@
 import { FileInvoice } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Chmod calculator',
+  name: t('tools.chmod-calculator.title'),
   path: '/chmod-calculator',
-  description: 'Compute your chmod permissions and commands with this online chmod calculator.',
+  description: t('tools.chmod-calculator.description'),
   keywords: [
     'chmod',
     'calculator',
diff --git a/src/tools/chmod-calculator/locales/en.yml b/src/tools/chmod-calculator/locales/en.yml
new file mode 100644
index 00000000..df395371
--- /dev/null
+++ b/src/tools/chmod-calculator/locales/en.yml
@@ -0,0 +1,11 @@
+tools:
+  chmod-calculator:
+    title: Chmod calculator
+    description: Compute your chmod permissions and commands with this online chmod calculator.
+
+    read: 'Read (4)'
+    write: 'Write (2)'
+    execute: 'Execute (1)'
+    owner: 'Owner (u)'
+    group: 'Group (g)'
+    public: Public (o)
diff --git a/src/tools/chmod-calculator/locales/zh.yml b/src/tools/chmod-calculator/locales/zh.yml
new file mode 100644
index 00000000..898c053e
--- /dev/null
+++ b/src/tools/chmod-calculator/locales/zh.yml
@@ -0,0 +1,11 @@
+tools:
+  chmod-calculator:
+    title: Chmod 计算器
+    description: 使用此在线 Chmod 计算器计算您的 Chmod 权限和命令。
+
+    read: '读取 (4)'
+    write: '写入 (2)'
+    execute: '执行 (1)'
+    owner: '所有者 (u)'
+    group: '群组 (g)'
+    public: 公共 (o)
diff --git a/src/tools/crontab-generator/crontab-generator.vue b/src/tools/crontab-generator/crontab-generator.vue
index 97503e7d..de27a7ef 100644
--- a/src/tools/crontab-generator/crontab-generator.vue
+++ b/src/tools/crontab-generator/crontab-generator.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import cronstrue from 'cronstrue';
+import 'cronstrue/locales/zh_CN';
+import 'cronstrue/locales/fr';
 import { isValidCron } from 'cron-validator';
 import { useStyleStore } from '@/stores/style.store';
 
@@ -9,84 +11,86 @@ function isCronValid(v: string) {
 
 const styleStore = useStyleStore();
 
+const { t, locale } = useI18n();
 const cron = ref('40 * * * *');
 const cronstrueConfig = reactive({
   verbose: true,
   dayOfWeekStartIndexZero: true,
   use24HourTimeFormat: true,
   throwExceptionOnParseError: true,
+  locale: locale.value === 'zh' ? 'zh_CN' : locale,
 });
 
 const helpers = [
   {
     symbol: '*',
-    meaning: 'Any value',
+    meaning: t('tools.crontab-generator.anyMeaning'),
     example: '* * * *',
-    equivalent: 'Every minute',
+    equivalent: t('tools.crontab-generator.anyExample'),
   },
   {
     symbol: '-',
-    meaning: 'Range of values',
+    meaning: t('tools.crontab-generator.rangeMeaning'),
     example: '1-10 * * *',
-    equivalent: 'Minutes 1 through 10',
+    equivalent: t('tools.crontab-generator.rangeExample'),
   },
   {
     symbol: ',',
-    meaning: 'List of values',
+    meaning: t('tools.crontab-generator.listMeaning'),
     example: '1,10 * * *',
-    equivalent: 'At minutes 1 and 10',
+    equivalent: t('tools.crontab-generator.listExample'),
   },
   {
     symbol: '/',
-    meaning: 'Step values',
+    meaning: t('tools.crontab-generator.stepMeaning'),
     example: '*/10 * * *',
-    equivalent: 'Every 10 minutes',
+    equivalent: t('tools.crontab-generator.stepExample'),
   },
   {
     symbol: '@yearly',
-    meaning: 'Once every year at midnight of 1 January',
+    meaning: t('tools.crontab-generator.yearlyMeaning'),
     example: '@yearly',
     equivalent: '0 0 1 1 *',
   },
   {
     symbol: '@annually',
-    meaning: 'Same as @yearly',
+    meaning: t('tools.crontab-generator.annuallyMeaning', { yearly: '@yearly' }),
     example: '@annually',
     equivalent: '0 0 1 1 *',
   },
   {
     symbol: '@monthly',
-    meaning: 'Once a month at midnight on the first day',
+    meaning: t('tools.crontab-generator.monthlyMeaning'),
     example: '@monthly',
     equivalent: '0 0 1 * *',
   },
   {
     symbol: '@weekly',
-    meaning: 'Once a week at midnight on Sunday morning',
+    meaning: t('tools.crontab-generator.weeklyMeaning'),
     example: '@weekly',
     equivalent: '0 0 * * 0',
   },
   {
     symbol: '@daily',
-    meaning: 'Once a day at midnight',
+    meaning: t('tools.crontab-generator.dailyMeaning'),
     example: '@daily',
     equivalent: '0 0 * * *',
   },
   {
     symbol: '@midnight',
-    meaning: 'Same as @daily',
+    meaning: t('tools.crontab-generator.midnightMeaning', { daily: '@daily' }),
     example: '@midnight',
     equivalent: '0 0 * * *',
   },
   {
     symbol: '@hourly',
-    meaning: 'Once an hour at the beginning of the hour',
+    meaning: t('tools.crontab-generator.hourlyMeaning'),
     example: '@hourly',
     equivalent: '0 * * * *',
   },
   {
     symbol: '@reboot',
-    meaning: 'Run at startup',
+    meaning: t('tools.crontab-generator.rebootMeaning'),
     example: '',
     equivalent: '',
   },
@@ -102,7 +106,7 @@ const cronString = computed(() => {
 const cronValidationRules = [
   {
     validator: (value: string) => isCronValid(value),
-    message: 'This cron is invalid',
+    message: t('tools.crontab-generator.invalidMessage'),
   },
 ];
 </script>
@@ -127,13 +131,13 @@ const cronValidationRules = [
 
     <div flex justify-center>
       <n-form :show-feedback="false" label-width="170" label-placement="left">
-        <n-form-item label="Verbose">
+        <n-form-item :label="t('tools.crontab-generator.verbose')">
           <n-switch v-model:value="cronstrueConfig.verbose" />
         </n-form-item>
-        <n-form-item label="Use 24 hour time format">
+        <n-form-item :label="t('tools.crontab-generator.use24HourTimeFormat')">
           <n-switch v-model:value="cronstrueConfig.use24HourTimeFormat" />
         </n-form-item>
-        <n-form-item label="Days start at 0">
+        <n-form-item :label="t('tools.crontab-generator.dayOfWeekStartIndexZero')">
           <n-switch v-model:value="cronstrueConfig.dayOfWeekStartIndexZero" />
         </n-form-item>
       </n-form>
@@ -141,29 +145,29 @@ const cronValidationRules = [
   </c-card>
   <c-card>
     <pre>
-┌──────────── [optional] seconds (0 - 59)
-| ┌────────── minute (0 - 59)
-| | ┌──────── hour (0 - 23)
-| | | ┌────── day of month (1 - 31)
-| | | | ┌──── month (1 - 12) OR jan,feb,mar,apr ...
-| | | | | ┌── day of week (0 - 6, sunday=0) OR sun,mon ...
+┌──────────── {{ t('tools.crontab-generator.secondDesc') }}
+| ┌────────── {{ t('tools.crontab-generator.minuteDesc') }}
+| | ┌──────── {{ t('tools.crontab-generator.hourDesc') }}
+| | | ┌────── {{ t('tools.crontab-generator.dayOfMonthDesc') }}
+| | | | ┌──── {{ t('tools.crontab-generator.monthDesc') }}
+| | | | | ┌── {{ t('tools.crontab-generator.dayOfWeekDesc') }}
 | | | | | |
-* * * * * * command</pre>
+* * * * * * {{ t('tools.crontab-generator.command') }}</pre>
 
     <div v-if="styleStore.isSmallScreen">
       <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" mb-3 important:border-none>
         <div>
-          Symbol: <strong>{{ symbol }}</strong>
+          {{ t('tools.crontab-generator.symbol') }} <strong>{{ symbol }}</strong>
         </div>
         <div>
-          Meaning: <strong>{{ meaning }}</strong>
+          {{ t('tools.crontab-generator.meaning') }} <strong>{{ meaning }}</strong>
         </div>
         <div>
-          Example:
+          {{ t('tools.crontab-generator.example') }}
           <strong><code>{{ example }}</code></strong>
         </div>
         <div>
-          Equivalent: <strong>{{ equivalent }}</strong>
+          {{ t('tools.crontab-generator.equivalent') }} <strong>{{ equivalent }}</strong>
         </div>
       </c-card>
     </div>
diff --git a/src/tools/crontab-generator/index.ts b/src/tools/crontab-generator/index.ts
index 49b28389..b470b572 100644
--- a/src/tools/crontab-generator/index.ts
+++ b/src/tools/crontab-generator/index.ts
@@ -1,10 +1,11 @@
 import { Alarm } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Crontab generator',
+  name: t('tools.crontab-generator.title'),
   path: '/crontab-generator',
-  description: 'Validate and generate crontab and get the human readable description of the cron schedule.',
+  description: t('tools.crontab-generator.description'),
   keywords: [
     'crontab',
     'generator',
diff --git a/src/tools/crontab-generator/locales/en.yml b/src/tools/crontab-generator/locales/en.yml
new file mode 100644
index 00000000..dafc8fe8
--- /dev/null
+++ b/src/tools/crontab-generator/locales/en.yml
@@ -0,0 +1,38 @@
+tools:
+  crontab-generator:
+    title: Crontab generator
+    description: Validate and generate crontab and get the human readable description of the cron schedule.
+
+    anyMeaning: Any value
+    anyExample: Every minute
+    rangeMeaning: Range of values
+    rangeExample: Minutes 1 through 10
+    listMeaning: List of values
+    listExample: At minutes 1 and 10
+    stepMeaning: Step values
+    stepExample: Every 10 minutes
+    yearlyMeaning: Once every year at midnight of 1 January
+    annuallyMeaning: Same as {yearly}
+    monthlyMeaning: Once a month at midnight on the first day
+    weeklyMeaning: Once a week at midnight on Sunday morning
+    dailyMeaning: Once a day at midnight
+    midnightMeaning: Same as {daily}
+    hourlyMeaning: Once an hour at the beginning of the hour
+    rebootMeaning: Run at startup
+
+    verbose: Verbose
+    use24HourTimeFormat: Use 24 hour time format
+    dayOfWeekStartIndexZero: Days start at 0
+    secondDesc: '[optional] seconds (0 - 59)'
+    minuteDesc: 'minute (0 - 59)'
+    hourDesc: 'hour (0 - 23)'
+    dayOfMonthDesc: 'day of month (1 - 31)'
+    monthDesc: 'month (1 - 12) OR jan,feb,mar,apr ...'
+    dayOfWeekDesc: 'day of week (0 - 6, sunday=0) OR sun,mon ...'
+    command: command
+    symbol: 'Symbol:'
+    meaning: 'Meaning:'
+    example: 'Example:'
+    equivalent: 'Equivalent:'
+
+    invalidMessage: This cron is invalid
diff --git a/src/tools/crontab-generator/locales/zh.yml b/src/tools/crontab-generator/locales/zh.yml
new file mode 100644
index 00000000..e62da1b3
--- /dev/null
+++ b/src/tools/crontab-generator/locales/zh.yml
@@ -0,0 +1,38 @@
+tools:
+  crontab-generator:
+    title: 定时任务生成器
+    description: 验证和生成 crontab，并获取定时任务的可读描述。
+
+    anyMeaning: 任意值
+    anyExample: 每分钟
+    rangeMeaning: 值范围
+    rangeExample: 1 到 10 分钟
+    listMeaning: 值列表
+    listExample: 在第 1 和第 10 分钟
+    stepMeaning: 步进值
+    stepExample: 每 10 分钟
+    yearlyMeaning: 每年 1 月 1 日午夜
+    annuallyMeaning: '等同于 {yearly}'
+    monthlyMeaning: 每月第一天午夜
+    weeklyMeaning: 每周星期日凌晨
+    dailyMeaning: 每天午夜
+    midnightMeaning: '等同于 {daily}'
+    hourlyMeaning: 每小时整点
+    rebootMeaning: 启动时运行
+
+    verbose: 冗长模式
+    use24HourTimeFormat: 使用 24 小时时间格式
+    dayOfWeekStartIndexZero: 一周从 0 开始
+    secondDesc: '[可选] 秒（0 - 59）'
+    minuteDesc: '分钟（0 - 59）'
+    hourDesc: '小时（0 - 23）'
+    dayOfMonthDesc: '日期（1 - 31）'
+    monthDesc: '月份（1 - 12）或 jan、feb、mar、apr ...'
+    dayOfWeekDesc: '星期几（0 - 6，星期日=0）或 sun、mon ...'
+    command: 命令
+    symbol: '符号:'
+    meaning: '含义:'
+    example: '示例:'
+    equivalent: '等同:'
+    
+    invalidMessage: 此 cron 表达式无效
diff --git a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
index c5591eeb..9a471078 100644
--- a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
+++ b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
@@ -5,6 +5,7 @@ import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 import { textToBase64 } from '@/utils/base64';
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
 
+const { t } = useI18n();
 const dockerRun = ref(
   'docker run -p 80:80 -v /var/run/docker.sock:/tmp/docker.sock:ro --restart always --log-opt max-size=1g nginx',
 );
@@ -32,12 +33,12 @@ const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, fi
   <div>
     <c-input-text
       v-model:value="dockerRun"
-      label="Your docker run command:"
+      :label="t('tools.docker-run-to-docker-compose-converter.inputLabel')"
       style="font-family: monospace"
       multiline
       raw-text
       monospace
-      placeholder="Your docker run command to convert..."
+      :placeholder="t('tools.docker-run-to-docker-compose-converter.inputPlaceholder')"
       rows="3"
     />
 
@@ -47,12 +48,12 @@ const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, fi
 
     <div mt-5 flex justify-center>
       <c-button :disabled="dockerCompose === ''" secondary @click="download">
-        Download docker-compose.yml
+        {{ t('tools.docker-run-to-docker-compose-converter.downloadBtn') }}
       </c-button>
     </div>
 
     <div v-if="notComposable.length > 0">
-      <n-alert title="This options are not translatable to docker-compose" type="info" mt-5>
+      <n-alert :title="t('tools.docker-run-to-docker-compose-converter.notComposable')" type="info" mt-5>
         <ul>
           <li v-for="(message, index) of notComposable" :key="index">
             {{ message }}
@@ -63,7 +64,7 @@ const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, fi
 
     <div v-if="notImplemented.length > 0">
       <n-alert
-        title="This options are not yet implemented and therefore haven't been translated to docker-compose"
+        :title="t('tools.docker-run-to-docker-compose-converter.notImplemented')"
         type="warning"
         mt-5
       >
@@ -76,7 +77,7 @@ const { download } = useDownloadFileFromBase64({ source: dockerComposeBase64, fi
     </div>
 
     <div v-if="errors.length > 0">
-      <n-alert title="The following errors occured" type="error" mt-5>
+      <n-alert :title="t('tools.docker-run-to-docker-compose-converter.errors')" type="error" mt-5>
         <ul>
           <li v-for="(message, index) of errors" :key="index">
             {{ message }}
diff --git a/src/tools/docker-run-to-docker-compose-converter/index.ts b/src/tools/docker-run-to-docker-compose-converter/index.ts
index d9c1437f..8cfe16db 100644
--- a/src/tools/docker-run-to-docker-compose-converter/index.ts
+++ b/src/tools/docker-run-to-docker-compose-converter/index.ts
@@ -1,10 +1,11 @@
 import { BrandDocker } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Docker run to Docker compose converter',
+  name: t('tools.docker-run-to-docker-compose-converter.title'),
   path: '/docker-run-to-docker-compose-converter',
-  description: 'Turns docker run commands into docker-compose files!',
+  description: t('tools.docker-run-to-docker-compose-converter.description'),
   keywords: ['docker', 'run', 'compose', 'yaml', 'yml', 'convert', 'deamon'],
   component: () => import('./docker-run-to-docker-compose-converter.vue'),
   icon: BrandDocker,
diff --git a/src/tools/docker-run-to-docker-compose-converter/locales/en.yml b/src/tools/docker-run-to-docker-compose-converter/locales/en.yml
new file mode 100644
index 00000000..414828a7
--- /dev/null
+++ b/src/tools/docker-run-to-docker-compose-converter/locales/en.yml
@@ -0,0 +1,12 @@
+tools:
+  docker-run-to-docker-compose-converter:
+    title: Docker run to Docker compose converter
+    description: Turns docker run commands into docker-compose files!
+
+    inputLabel: 'Your docker run command:'
+    inputPlaceholder: Your docker run command to convert...
+    downloadBtn: Download docker-compose.yml
+
+    notComposable: This options are not translatable to docker-compose
+    notImplemented: This options are not yet implemented and therefore haven't been translated to docker-compose
+    errors: The following errors occured
diff --git a/src/tools/docker-run-to-docker-compose-converter/locales/zh.yml b/src/tools/docker-run-to-docker-compose-converter/locales/zh.yml
new file mode 100644
index 00000000..c033552c
--- /dev/null
+++ b/src/tools/docker-run-to-docker-compose-converter/locales/zh.yml
@@ -0,0 +1,12 @@
+tools:
+  docker-run-to-docker-compose-converter:
+    title: Docker run 转换为 Docker compose 转换器
+    description: 将 docker run 命令转换为 docker-compose 文件！
+
+    inputLabel: '您的 docker run 命令：'
+    inputPlaceholder: 您要转换的 docker run 命令...
+    downloadBtn: 下载 docker-compose.yml
+
+    notComposable: 这些选项无法转换为 docker-compose
+    notImplemented: 这些选项尚未实现，因此尚未被翻译为 docker-compose
+    errors: 发生了以下错误
diff --git a/src/tools/git-memo/git-memo.content.zh.md b/src/tools/git-memo/git-memo.content.zh.md
new file mode 100644
index 00000000..3cdae05d
--- /dev/null
+++ b/src/tools/git-memo/git-memo.content.zh.md
@@ -0,0 +1,77 @@
+## 配置
+
+设置全局配置
+
+```shell
+git config --global user.name "[姓名]"
+git config --global user.email "[邮箱]"
+```
+
+## 入门
+
+创建一个 git 仓库
+
+```shell
+git init
+```
+
+克隆现有的 git 仓库
+
+```shell
+git clone [url]
+```
+
+## 提交
+
+提交所有已跟踪的更改
+
+```shell
+git commit -am "[提交信息]"
+```
+
+将新修改添加到上次提交中
+
+```shell
+git commit --amend --no-edit
+```
+
+## 我犯了一个错误
+
+更改上次提交的消息
+
+```shell
+git commit --amend
+```
+
+撤消最近的提交并保留更改
+
+```shell
+git reset HEAD~1
+```
+
+撤消最近的 `N` 个提交并保留更改
+
+```shell
+git reset HEAD~N
+```
+
+撤消最近的提交并放弃更改
+
+```shell
+git reset HEAD~1 --hard
+```
+
+将分支重置为远程状态
+
+```shell
+git fetch origin
+git reset --hard origin/[分支名]
+```
+
+## 其他
+
+将本地 master 分支重命名为 main
+
+```shell
+git branch -m master main
+```
\ No newline at end of file
diff --git a/src/tools/git-memo/git-memo.vue b/src/tools/git-memo/git-memo.vue
index 12bf9fc0..a5fd603e 100644
--- a/src/tools/git-memo/git-memo.vue
+++ b/src/tools/git-memo/git-memo.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { useThemeVars } from 'naive-ui';
 import Memo from './git-memo.content.md';
+import MemoZH from './git-memo.content.zh.md';
 
 const themeVars = useThemeVars();
+const { locale } = useI18n();
 </script>
 
 <template>
   <div>
-    <Memo />
+    <MemoZH v-if="locale === 'zh'" />
+    <Memo v-else />
   </div>
 </template>
 
diff --git a/src/tools/git-memo/index.ts b/src/tools/git-memo/index.ts
index c91ee813..8a5989e8 100644
--- a/src/tools/git-memo/index.ts
+++ b/src/tools/git-memo/index.ts
@@ -1,11 +1,11 @@
 import { BrandGit } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Git cheatsheet',
+  name: t('tools.git-memo.title'),
   path: '/git-memo',
-  description:
-    'Git is a decentralized version management software. With this cheatsheet you will have a quick access to the most common git commands.',
+  description: t('tools.git-memo.description'),
   keywords: ['git', 'push', 'force', 'pull', 'commit', 'amend', 'rebase', 'merge', 'reset', 'soft', 'hard', 'lease'],
   component: () => import('./git-memo.vue'),
   icon: BrandGit,
diff --git a/src/tools/git-memo/locales/en.yml b/src/tools/git-memo/locales/en.yml
new file mode 100644
index 00000000..f435a3e1
--- /dev/null
+++ b/src/tools/git-memo/locales/en.yml
@@ -0,0 +1,4 @@
+tools:
+  git-memo:
+    title: Git cheatsheet
+    description: Git is a decentralized version management software. With this cheatsheet you will have a quick access to the most common git commands.
diff --git a/src/tools/git-memo/locales/zh.yml b/src/tools/git-memo/locales/zh.yml
new file mode 100644
index 00000000..f4fb9ace
--- /dev/null
+++ b/src/tools/git-memo/locales/zh.yml
@@ -0,0 +1,4 @@
+tools:
+  git-memo:
+    title: Git 备忘录
+    description: Git 是一款分布式版本管理软件。使用这个备忘录，您将快速访问最常用的 Git 命令。
diff --git a/src/tools/json-minify/index.ts b/src/tools/json-minify/index.ts
index e6a02dbe..e1de7be2 100644
--- a/src/tools/json-minify/index.ts
+++ b/src/tools/json-minify/index.ts
@@ -1,10 +1,11 @@
 import { Braces } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'JSON minify',
+  name: t('tools.json-minify.title'),
   path: '/json-minify',
-  description: 'Minify and compress your JSON by removing unnecessary white spaces.',
+  description: t('tools.json-minify.description'),
   keywords: ['json', 'minify', 'format'],
   component: () => import('./json-minify.vue'),
   icon: Braces,
diff --git a/src/tools/json-minify/json-minify.vue b/src/tools/json-minify/json-minify.vue
index 51d62703..8cce31e8 100644
--- a/src/tools/json-minify/json-minify.vue
+++ b/src/tools/json-minify/json-minify.vue
@@ -3,23 +3,24 @@ import JSON5 from 'json5';
 import type { UseValidationRule } from '@/composable/validation';
 import { withDefaultOnError } from '@/utils/defaults';
 
+const { t } = useI18n();
 const defaultValue = '{\n\t"hello": [\n\t\t"world"\n\t]\n}';
 const transformer = (value: string) => withDefaultOnError(() => JSON.stringify(JSON5.parse(value), null, 0), '');
 
 const rules: UseValidationRule<string>[] = [
   {
     validator: (v: string) => v === '' || JSON5.parse(v),
-    message: 'Provided JSON is not valid.',
+    message: t('tools.json-minify.invalidMessage'),
   },
 ];
 </script>
 
 <template>
   <format-transformer
-    input-label="Your raw JSON"
+    :input-label="t('tools.json-minify.inputLabel')"
     :input-default="defaultValue"
-    input-placeholder="Paste your raw JSON here..."
-    output-label="Minified version of your JSON"
+    :input-placeholder="t('tools.json-minify.inputPlaceholder')"
+    :output-label="t('tools.json-minify.outputLabel')"
     output-language="json"
     :input-validation-rules="rules"
     :transformer="transformer"
diff --git a/src/tools/json-minify/locales/en.yml b/src/tools/json-minify/locales/en.yml
new file mode 100644
index 00000000..f3d11dc2
--- /dev/null
+++ b/src/tools/json-minify/locales/en.yml
@@ -0,0 +1,10 @@
+tools:
+  json-minify:
+    title: JSON minify
+    description: Minify and compress your JSON by removing unnecessary white spaces.
+
+    inputLabel: Your raw JSON
+    inputPlaceholder: Paste your raw JSON here...
+    outputLabel: Minified version of your JSON
+
+    invalidMessage: Provided JSON is not valid.
diff --git a/src/tools/json-minify/locales/zh.yml b/src/tools/json-minify/locales/zh.yml
new file mode 100644
index 00000000..171964eb
--- /dev/null
+++ b/src/tools/json-minify/locales/zh.yml
@@ -0,0 +1,10 @@
+tools:
+  json-minify:
+    title: JSON 压缩
+    description: 通过删除不必要的空格来压缩和压缩您的 JSON。
+
+    inputLabel: 您的原始 JSON
+    inputPlaceholder: 在此粘贴您的原始 JSON...
+    outputLabel: 您的 JSON 的压缩版本
+
+    invalidMessage: 提供的 JSON 不是有效的。
diff --git a/src/tools/json-to-csv/index.ts b/src/tools/json-to-csv/index.ts
index acfef02f..d02a09c2 100644
--- a/src/tools/json-to-csv/index.ts
+++ b/src/tools/json-to-csv/index.ts
@@ -1,10 +1,11 @@
 import { List } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'JSON to CSV',
+  name: t('tools.json-to-csv.title'),
   path: '/json-to-csv',
-  description: 'Convert JSON to CSV with automatic header detection.',
+  description: t('tools.json-to-csv.description'),
   keywords: ['json', 'to', 'csv', 'convert'],
   component: () => import('./json-to-csv.vue'),
   icon: List,
diff --git a/src/tools/json-to-csv/json-to-csv.vue b/src/tools/json-to-csv/json-to-csv.vue
index e2f5ddb6..ff40db2a 100644
--- a/src/tools/json-to-csv/json-to-csv.vue
+++ b/src/tools/json-to-csv/json-to-csv.vue
@@ -13,19 +13,20 @@ function transformer(value: string) {
   }, '');
 }
 
+const { t } = useI18n();
 const rules: UseValidationRule<string>[] = [
   {
     validator: (v: string) => v === '' || JSON5.parse(v),
-    message: 'Provided JSON is not valid.',
+    message: t('tools.json-to-csv.invalidMessage'),
   },
 ];
 </script>
 
 <template>
   <format-transformer
-    input-label="Your raw JSON"
-    input-placeholder="Paste your raw JSON here..."
-    output-label="CSV version of your JSON"
+    :input-label="t('tools.json-to-csv.inputLabel')"
+    :input-placeholder="t('tools.json-to-csv.inputPlaceholder')"
+    :output-label="t('tools.json-to-csv.outputLabel')"
     :input-validation-rules="rules"
     :transformer="transformer"
   />
diff --git a/src/tools/json-to-csv/locales/en.yml b/src/tools/json-to-csv/locales/en.yml
new file mode 100644
index 00000000..f18afead
--- /dev/null
+++ b/src/tools/json-to-csv/locales/en.yml
@@ -0,0 +1,10 @@
+tools:
+  json-to-csv:
+    title: JSON to CSV
+    description: Convert JSON to CSV with automatic header detection.
+
+    inputLabel: Your raw JSON
+    inputPlaceholder: Paste your raw JSON here...
+    outputLabel: CSV version of your JSON
+
+    invalidMessage: Provided JSON is not valid.
diff --git a/src/tools/json-to-csv/locales/zh.yml b/src/tools/json-to-csv/locales/zh.yml
new file mode 100644
index 00000000..7706a190
--- /dev/null
+++ b/src/tools/json-to-csv/locales/zh.yml
@@ -0,0 +1,10 @@
+tools:
+  json-to-csv:
+    title: JSON 转换为 CSV
+    description: 将 JSON 转换为 CSV，并自动检测标题。
+
+    inputLabel: 您的原始 JSON
+    inputPlaceholder: 在此粘贴您的原始 JSON...
+    outputLabel: 您的 JSON 的 CSV 版本
+
+    invalidMessage: 提供的 JSON 不是有效的。
diff --git a/src/tools/json-viewer/index.ts b/src/tools/json-viewer/index.ts
index 6b5b8812..12594e7c 100644
--- a/src/tools/json-viewer/index.ts
+++ b/src/tools/json-viewer/index.ts
@@ -1,10 +1,11 @@
 import { Braces } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'JSON prettify and format',
+  name: t('tools.json-prettify.title'),
   path: '/json-prettify',
-  description: 'Prettify your JSON string to a human friendly readable format.',
+  description: t('tools.json-prettify.description'),
   keywords: ['json', 'viewer', 'prettify', 'format'],
   component: () => import('./json-viewer.vue'),
   icon: Braces,
diff --git a/src/tools/json-viewer/json-viewer.vue b/src/tools/json-viewer/json-viewer.vue
index 3928a44f..42bbad2e 100644
--- a/src/tools/json-viewer/json-viewer.vue
+++ b/src/tools/json-viewer/json-viewer.vue
@@ -6,6 +6,7 @@ import { withDefaultOnError } from '@/utils/defaults';
 import { useValidation } from '@/composable/validation';
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
 
+const { t } = useI18n();
 const inputElement = ref<HTMLElement>();
 
 const rawJson = useStorage('json-prettify:raw-json', '{"hello": "world", "foo": "bar"}');
@@ -18,7 +19,7 @@ const rawJsonValidation = useValidation({
   rules: [
     {
       validator: v => v === '' || JSON5.parse(v),
-      message: 'Provided JSON is not valid.',
+      message: t('tools.json-prettify.invalidMessage'),
     },
   ],
 });
@@ -27,24 +28,24 @@ const rawJsonValidation = useValidation({
 <template>
   <div style="flex: 0 0 100%">
     <div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
-      <n-form-item label="Sort keys :" label-placement="left" label-width="100">
+      <n-form-item :label="t('tools.json-prettify.sortKeys')" label-placement="left" label-width="100">
         <n-switch v-model:value="sortKeys" />
       </n-form-item>
-      <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
+      <n-form-item :label="t('tools.json-prettify.indentSize')" label-placement="left" label-width="100" :show-feedback="false">
         <n-input-number v-model:value="indentSize" min="0" max="10" style="width: 100px" />
       </n-form-item>
     </div>
   </div>
 
   <n-form-item
-    label="Your raw JSON"
+    :label="t('tools.json-prettify.rawJSONLabel')"
     :feedback="rawJsonValidation.message"
     :validation-status="rawJsonValidation.status"
   >
     <c-input-text
       ref="inputElement"
       v-model:value="rawJson"
-      placeholder="Paste your raw JSON here..."
+      :placeholder="t('tools.json-prettify.rawJSONPlaceholder')"
       rows="20"
       multiline
       autocomplete="off"
@@ -54,7 +55,7 @@ const rawJsonValidation = useValidation({
       monospace
     />
   </n-form-item>
-  <n-form-item label="Prettified version of your JSON">
+  <n-form-item :label="t('tools.json-prettify.prettifyJSON')">
     <TextareaCopyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
   </n-form-item>
 </template>
diff --git a/src/tools/json-viewer/locales/en.yml b/src/tools/json-viewer/locales/en.yml
new file mode 100644
index 00000000..abf8aa9f
--- /dev/null
+++ b/src/tools/json-viewer/locales/en.yml
@@ -0,0 +1,12 @@
+tools:
+  json-prettify:
+    title: JSON prettify and format
+    description: Prettify your JSON string to a human friendly readable format.
+
+    sortKeys: 'Sort keys :'
+    indentSize: 'Indent size :'
+    rawJSONLabel: Your raw JSON
+    rawJSONPlaceholder: Paste your raw JSON here...
+    prettifyJSON: Prettified version of your JSON
+
+    invalidMessage: Provided JSON is not valid.
diff --git a/src/tools/json-viewer/locales/zh.yml b/src/tools/json-viewer/locales/zh.yml
new file mode 100644
index 00000000..2332c854
--- /dev/null
+++ b/src/tools/json-viewer/locales/zh.yml
@@ -0,0 +1,12 @@
+tools:
+  json-prettify:
+    title: JSON 格式化工具
+    description: 将您的 JSON 字符串美化为易读的格式。
+
+    sortKeys: '排序键：'
+    indentSize: '缩进大小：'
+    rawJSONLabel: 您的原始 JSON
+    rawJSONPlaceholder: 在此粘贴您的原始 JSON…
+    prettifyJSON: 您的 JSON 的美化版本
+
+    invalidMessage: 提供的 JSON 不是有效的。
diff --git a/src/tools/qr-code-generator/index.ts b/src/tools/qr-code-generator/index.ts
index 4c2f86bb..f639f6f1 100644
--- a/src/tools/qr-code-generator/index.ts
+++ b/src/tools/qr-code-generator/index.ts
@@ -1,11 +1,11 @@
 import { Qrcode } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'QR Code generator',
+  name: t('tools.qrcode-generator.title'),
   path: '/qrcode-generator',
-  description:
-    'Generate and download QR-code for an url or just a text and customize the background and foreground colors.',
+  description: t('tools.qrcode-generator.description'),
   keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent'],
   component: () => import('./qr-code-generator.vue'),
   icon: Qrcode,
diff --git a/src/tools/qr-code-generator/locales/en.yml b/src/tools/qr-code-generator/locales/en.yml
new file mode 100644
index 00000000..e6d18ab8
--- /dev/null
+++ b/src/tools/qr-code-generator/locales/en.yml
@@ -0,0 +1,16 @@
+tools:
+  qrcode-generator:
+    title: QR Code generator
+    description: Generate and download QR-code for an url or just a text and customize the background and foreground colors.
+
+    low: low
+    medium: medium
+    quartile: quartile
+    high: high
+
+    textLabel: 'Text:'
+    textPlaceholder: 'Your link or text...'
+    foreground: 'Foreground color:'
+    background: 'Background color:'
+    errorCorrectionLevels: 'Error resistance:'
+    downloadBtn: Download qr-code
diff --git a/src/tools/qr-code-generator/locales/zh.yml b/src/tools/qr-code-generator/locales/zh.yml
new file mode 100644
index 00000000..1c606917
--- /dev/null
+++ b/src/tools/qr-code-generator/locales/zh.yml
@@ -0,0 +1,16 @@
+tools:
+  qrcode-generator:
+    title: 二维码生成器
+    description: 生成并下载一个网址或文本的二维码，并自定义背景和前景颜色。
+
+    low: 低
+    medium: 中
+    quartile: 四分之一
+    high: 高
+
+    textLabel: '文本：'
+    textPlaceholder: '您的链接或文本...'
+    foreground: '前景色：'
+    background: '背景色：'
+    errorCorrectionLevels: '错误纠正等级：'
+    downloadBtn: 下载二维码
diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue
index 8bc9f740..ae0942c7 100644
--- a/src/tools/qr-code-generator/qr-code-generator.vue
+++ b/src/tools/qr-code-generator/qr-code-generator.vue
@@ -3,11 +3,12 @@ import type { QRCodeErrorCorrectionLevel } from 'qrcode';
 import { useQRCode } from './useQRCode';
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 
+const { t } = useI18n();
 const foreground = ref('#000000ff');
 const background = ref('#ffffffff');
-const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>('medium');
+const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>(t('tools.qrcode-generator.medium') as 'medium');
 
-const errorCorrectionLevels = ['low', 'medium', 'quartile', 'high'];
+const errorCorrectionLevels = [t('tools.qrcode-generator.low'), t('tools.qrcode-generator.medium'), t('tools.qrcode-generator.quartile'), t('tools.qrcode-generator.high')];
 
 const text = ref('https://it-tools.tech');
 const { qrcode } = useQRCode({
@@ -32,23 +33,23 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
           label-position="left"
           label-width="130px"
           label-align="right"
-          label="Text:"
+          :label="t('tools.qrcode-generator.textLabel')"
           multiline
           rows="1"
           autosize
-          placeholder="Your link or text..."
+          :placeholder="t('tools.qrcode-generator.textPlaceholder')"
           mb-6
         />
         <n-form label-width="130" label-placement="left">
-          <n-form-item label="Foreground color:">
+          <n-form-item :label="t('tools.qrcode-generator.foreground')">
             <n-color-picker v-model:value="foreground" :modes="['hex']" />
           </n-form-item>
-          <n-form-item label="Background color:">
+          <n-form-item :label="t('tools.qrcode-generator.background')">
             <n-color-picker v-model:value="background" :modes="['hex']" />
           </n-form-item>
           <c-select
             v-model:value="errorCorrectionLevel"
-            label="Error resistance:"
+            :label="t('tools.qrcode-generator.errorCorrectionLevels')"
             label-position="left"
             label-width="130px"
             label-align="right"
@@ -60,7 +61,7 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
         <div flex flex-col items-center gap-3>
           <n-image :src="qrcode" width="200" />
           <c-button @click="download">
-            Download qr-code
+            {{ t('tools.qrcode-generator.downloadBtn') }}
           </c-button>
         </div>
       </n-gi>
diff --git a/src/tools/random-port-generator/index.ts b/src/tools/random-port-generator/index.ts
index febdc2a4..a2ce4c29 100644
--- a/src/tools/random-port-generator/index.ts
+++ b/src/tools/random-port-generator/index.ts
@@ -1,10 +1,11 @@
 import { Server } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Random port generator',
+  name: t('tools.random-port-generator.title'),
   path: '/random-port-generator',
-  description: 'Generate random port numbers outside of the range of "known" ports (0-1023).',
+  description: t('tools.random-port-generator.description'),
   keywords: ['system', 'port', 'lan', 'generator', 'random', 'development', 'computer'],
   component: () => import('./random-port-generator.vue'),
   icon: Server,
diff --git a/src/tools/random-port-generator/locales/en.yml b/src/tools/random-port-generator/locales/en.yml
new file mode 100644
index 00000000..32afba4f
--- /dev/null
+++ b/src/tools/random-port-generator/locales/en.yml
@@ -0,0 +1,8 @@
+tools:
+  random-port-generator:
+    title: Random port generator
+    description: Generate random port numbers outside of the range of "known" ports (0-1023).
+
+    copyBtn: Copy
+    refreshBtn: Refresh
+    copied: Port copied to the clipboard
diff --git a/src/tools/random-port-generator/locales/zh.yml b/src/tools/random-port-generator/locales/zh.yml
new file mode 100644
index 00000000..724d6dc6
--- /dev/null
+++ b/src/tools/random-port-generator/locales/zh.yml
@@ -0,0 +1,8 @@
+tools:
+  random-port-generator:
+    title: 随机端口生成器
+    description: 生成在“已知”端口范围之外的随机端口号（0-1023）。
+
+    copyBtn: 复制
+    refreshBtn: 刷新
+    copied: 端口已复制到剪贴板
diff --git a/src/tools/random-port-generator/random-port-generator.vue b/src/tools/random-port-generator/random-port-generator.vue
index 89ab2172..f2ac7c75 100644
--- a/src/tools/random-port-generator/random-port-generator.vue
+++ b/src/tools/random-port-generator/random-port-generator.vue
@@ -3,9 +3,10 @@ import { generatePort } from './random-port-generator.model';
 import { computedRefreshable } from '@/composable/computedRefreshable';
 import { useCopy } from '@/composable/copy';
 
+const { t } = useI18n();
 const [port, refreshPort] = computedRefreshable(() => String(generatePort()));
 
-const { copy } = useCopy({ source: port, text: 'Port copied to the clipboard' });
+const { copy } = useCopy({ source: port, text: t('tools.random-port-generator.copied') });
 </script>
 
 <template>
@@ -15,10 +16,10 @@ const { copy } = useCopy({ source: port, text: 'Port copied to the clipboard' })
     </div>
     <div flex justify-center gap-3>
       <c-button @click="copy()">
-        Copy
+        {{ t('tools.random-port-generator.copyBtn') }}
       </c-button>
       <c-button @click="refreshPort">
-        Refresh
+        {{ t('tools.random-port-generator.refreshBtn') }}
       </c-button>
     </div>
   </c-card>
diff --git a/src/tools/sql-prettify/index.ts b/src/tools/sql-prettify/index.ts
index 426845fb..58ffb32c 100644
--- a/src/tools/sql-prettify/index.ts
+++ b/src/tools/sql-prettify/index.ts
@@ -1,10 +1,11 @@
 import { Database } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'SQL prettify and format',
+  name: t('tools.sql-prettify.title'),
   path: '/sql-prettify',
-  description: 'Format and prettify your SQL queries online (it supports various SQL dialects).',
+  description: t('tools.sql-prettify.description'),
   keywords: [
     'sql',
     'prettify',
diff --git a/src/tools/sql-prettify/locales/en.yml b/src/tools/sql-prettify/locales/en.yml
new file mode 100644
index 00000000..ac49d8a1
--- /dev/null
+++ b/src/tools/sql-prettify/locales/en.yml
@@ -0,0 +1,19 @@
+tools:
+  sql-prettify:
+    title: SQL prettify and format
+    description: Format and prettify your SQL queries online (it supports various SQL dialects).
+
+    dialect: Dialect
+    keywordCase: Keyword case
+    indentStyle: Indent style
+    sql: Standard SQL
+    upper: UPPERCASE
+    lower: lowercase
+    preserve: Preserve
+    standard: Standard
+    tabularLeft: Tabular left
+    tabularRight: Tabular right
+
+    inputLabel: Your SQL query
+    inputPlaceholder: Put your SQL query here...
+    outputLabel: Prettify version of your query
diff --git a/src/tools/sql-prettify/locales/zh.yml b/src/tools/sql-prettify/locales/zh.yml
new file mode 100644
index 00000000..634e572e
--- /dev/null
+++ b/src/tools/sql-prettify/locales/zh.yml
@@ -0,0 +1,19 @@
+tools:
+  sql-prettify:
+    title: SQL 格式化工具
+    description: 在线格式化和美化您的 SQL 查询（支持各种 SQL 方言）。
+
+    dialect: 方言
+    keywordCase: 关键词大小写
+    indentStyle: 缩进样式
+    sql: 标准 SQL
+    upper: 大写
+    lower: 小写
+    preserve: 保留原样
+    standard: 标准
+    tabularLeft: 左对齐
+    tabularRight: 右对齐
+
+    inputLabel: 您的 SQL 查询
+    inputPlaceholder: 在此处放置您的 SQL 查询...
+    outputLabel: SQL 查询的美化版本
diff --git a/src/tools/sql-prettify/sql-prettify.vue b/src/tools/sql-prettify/sql-prettify.vue
index 503cd15f..22c8a76f 100644
--- a/src/tools/sql-prettify/sql-prettify.vue
+++ b/src/tools/sql-prettify/sql-prettify.vue
@@ -3,6 +3,7 @@ import { type FormatOptionsWithLanguage, format as formatSQL } from 'sql-formatt
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
 import { useStyleStore } from '@/stores/style.store';
 
+const { t } = useI18n();
 const inputElement = ref<HTMLElement>();
 const styleStore = useStyleStore();
 const config = reactive<FormatOptionsWithLanguage>({
@@ -23,7 +24,7 @@ const prettySQL = computed(() => formatSQL(rawSQL.value, config));
       <c-select
         v-model:value="config.language"
         flex-1
-        label="Dialect"
+        :label="t('tools.sql-prettify.dialect')"
         :options="[
           { label: 'GCP BigQuery', value: 'bigquery' },
           { label: 'IBM DB2', value: 'db2' },
@@ -35,37 +36,37 @@ const prettySQL = computed(() => formatSQL(rawSQL.value, config));
           { label: 'PostgreSQL', value: 'postgresql' },
           { label: 'Amazon Redshift', value: 'redshift' },
           { label: 'Spark', value: 'spark' },
-          { label: 'Standard SQL', value: 'sql' },
+          { label: t('tools.sql-prettify.sql'), value: 'sql' },
           { label: 'sqlite', value: 'sqlite' },
           { label: 'SQL Server Transact-SQL', value: 'tsql' },
         ]"
       />
       <c-select
-        v-model:value="config.keywordCase" label="Keyword case"
+        v-model:value="config.keywordCase" :label="t('tools.sql-prettify.keywordCase')"
         flex-1
         :options="[
-          { label: 'UPPERCASE', value: 'upper' },
-          { label: 'lowercase', value: 'lower' },
-          { label: 'Preserve', value: 'preserve' },
+          { label: t('tools.sql-prettify.upper'), value: 'upper' },
+          { label: t('tools.sql-prettify.lower'), value: 'lower' },
+          { label: t('tools.sql-prettify.preserve'), value: 'preserve' },
         ]"
       />
       <c-select
-        v-model:value="config.indentStyle" label="Indent style"
+        v-model:value="config.indentStyle" :label="t('tools.sql-prettify.indentStyle')"
         flex-1
         :options="[
-          { label: 'Standard', value: 'standard' },
-          { label: 'Tabular left', value: 'tabularLeft' },
-          { label: 'Tabular right', value: 'tabularRight' },
+          { label: t('tools.sql-prettify.standard'), value: 'standard' },
+          { label: t('tools.sql-prettify.tabularLeft'), value: 'tabularLeft' },
+          { label: t('tools.sql-prettify.tabularRight'), value: 'tabularRight' },
         ]"
       />
     </div>
   </div>
 
-  <n-form-item label="Your SQL query">
+  <n-form-item :label="t('tools.sql-prettify.inputLabel')">
     <c-input-text
       ref="inputElement"
       v-model:value="rawSQL"
-      placeholder="Put your SQL query here..."
+      :placeholder="t('tools.sql-prettify.inputPlaceholder')"
       rows="20"
       multiline
       autocomplete="off"
@@ -75,7 +76,7 @@ const prettySQL = computed(() => formatSQL(rawSQL.value, config));
       monospace
     />
   </n-form-item>
-  <n-form-item label="Prettify version of your query">
+  <n-form-item :label="t('tools.sql-prettify.outputLabel')">
     <TextareaCopyable :value="prettySQL" language="sql" :follow-height-of="inputElement" />
   </n-form-item>
 </template>
diff --git a/src/tools/svg-placeholder-generator/index.ts b/src/tools/svg-placeholder-generator/index.ts
index d676294c..c289f1cf 100644
--- a/src/tools/svg-placeholder-generator/index.ts
+++ b/src/tools/svg-placeholder-generator/index.ts
@@ -1,10 +1,11 @@
 import { ImageOutlined } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'SVG placeholder generator',
+  name: t('tools.svg-placeholder-generator.title'),
   path: '/svg-placeholder-generator',
-  description: 'Generate svg images to use as placeholder in your applications.',
+  description: t('tools.svg-placeholder-generator.description'),
   keywords: ['svg', 'placeholder', 'generator', 'image', 'size', 'mockup'],
   component: () => import('./svg-placeholder-generator.vue'),
   icon: ImageOutlined,
diff --git a/src/tools/svg-placeholder-generator/locales/en.yml b/src/tools/svg-placeholder-generator/locales/en.yml
new file mode 100644
index 00000000..4171d3cb
--- /dev/null
+++ b/src/tools/svg-placeholder-generator/locales/en.yml
@@ -0,0 +1,21 @@
+tools:
+  svg-placeholder-generator:
+    title: SVG placeholder generator
+    description: Generate svg images to use as placeholder in your applications.
+
+    widthLabel: 'Width (in px)'
+    widthPlaceholder: 'SVG width...'
+    heightLabel: 'Height (in px)'
+    heightPlaceholder: 'SVG height...'
+    backgroundLabel: 'Background'
+    textColorLabel: 'Text color'
+    fontSizeLabel: 'Font size'
+    fontSizePlaceholder: 'Font size...'
+    customTextLabel: 'Custom text'
+    customTextPlaceholder: 'Default is {width}x{height}'
+    useExactSize: 'Use exact size'
+    svgString: 'SVG HTML element'
+    base64: 'SVG in Base64'
+    copySvg: 'Copy svg'
+    copyBase64: 'Copy base64'
+    downloadSvg: 'Download svg'
diff --git a/src/tools/svg-placeholder-generator/locales/zh.yml b/src/tools/svg-placeholder-generator/locales/zh.yml
new file mode 100644
index 00000000..96a7e6e8
--- /dev/null
+++ b/src/tools/svg-placeholder-generator/locales/zh.yml
@@ -0,0 +1,21 @@
+tools:
+  svg-placeholder-generator:
+    title: SVG 占位符生成器
+    description: 生成 SVG 图像，用作应用程序中的占位符。
+
+    widthLabel: '宽度（以像素为单位）'
+    widthPlaceholder: 'SVG 宽度...'
+    heightLabel: '高度（以像素为单位）'
+    heightPlaceholder: 'SVG 高度...'
+    backgroundLabel: '背景'
+    textColorLabel: '文本颜色'
+    fontSizeLabel: '字体大小'
+    fontSizePlaceholder: '字体大小...'
+    customTextLabel: '自定义文本'
+    customTextPlaceholder: '默认为 {width}x{height}'
+    useExactSize: '使用精确尺寸'
+    svgString: 'SVG HTML 元素'
+    base64: 'Base64 编码的 SVG'
+    copySvg: '复制 SVG'
+    copyBase64: '复制 Base64'
+    downloadSvg: '下载 SVG'
diff --git a/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue b/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue
index b619dabb..cf70b19a 100644
--- a/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue
+++ b/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue
@@ -4,6 +4,7 @@ import { useCopy } from '@/composable/copy';
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 import { textToBase64 } from '@/utils/base64';
 
+const { t } = useI18n();
 const width = ref(600);
 const height = ref(350);
 const fontSize = ref(26);
@@ -35,57 +36,57 @@ const { download } = useDownloadFileFromBase64({ source: base64 });
   <div>
     <n-form label-placement="left" label-width="100">
       <div flex gap-3>
-        <n-form-item label="Width (in px)" flex-1>
-          <n-input-number v-model:value="width" placeholder="SVG width..." min="1" />
+        <n-form-item :label="t('tools.svg-placeholder-generator.widthLabel')" flex-1>
+          <n-input-number v-model:value="width" :placeholder="t('tools.svg-placeholder-generator.widthPlaceholder')" min="1" />
         </n-form-item>
-        <n-form-item label="Background" flex-1>
+        <n-form-item :label="t('tools.svg-placeholder-generator.backgroundLabel')" flex-1>
           <n-color-picker v-model:value="bgColor" :modes="['hex']" />
         </n-form-item>
       </div>
       <div flex gap-3>
-        <n-form-item label="Height (in px)" flex-1>
-          <n-input-number v-model:value="height" placeholder="SVG height..." min="1" />
+        <n-form-item :label="t('tools.svg-placeholder-generator.heightLabel')" flex-1>
+          <n-input-number v-model:value="height" :placeholder="t('tools.svg-placeholder-generator.heightPlaceholder')" min="1" />
         </n-form-item>
-        <n-form-item label="Text color" flex-1>
+        <n-form-item :label="t('tools.svg-placeholder-generator.textColorLabel')" flex-1>
           <n-color-picker v-model:value="fgColor" :modes="['hex']" />
         </n-form-item>
       </div>
       <div flex gap-3>
-        <n-form-item label="Font size" flex-1>
-          <n-input-number v-model:value="fontSize" placeholder="Font size..." min="1" />
+        <n-form-item :label="t('tools.svg-placeholder-generator.fontSizeLabel')" flex-1>
+          <n-input-number v-model:value="fontSize" :placeholder="t('tools.svg-placeholder-generator.fontSizePlaceholder')" min="1" />
         </n-form-item>
 
         <c-input-text
           v-model:value="customText"
-          label="Custom text"
-          :placeholder="`Default is ${width}x${height}`"
+          :label="t('tools.svg-placeholder-generator.customTextLabel')"
+          :placeholder="t('tools.svg-placeholder-generator.customTextPlaceholder', { width, height })"
           label-position="left"
           label-width="100px"
           label-align="right"
           flex-1
         />
       </div>
-      <n-form-item label="Use exact size" label-placement="left">
+      <n-form-item :label="t('tools.svg-placeholder-generator.useExactSize')" label-placement="left">
         <n-switch v-model:value="useExactSize" />
       </n-form-item>
     </n-form>
 
-    <n-form-item label="SVG HTML element">
+    <n-form-item :label="t('tools.svg-placeholder-generator.svgString')">
       <TextareaCopyable :value="svgString" copy-placement="none" />
     </n-form-item>
-    <n-form-item label="SVG in Base64">
+    <n-form-item :label="t('tools.svg-placeholder-generator.base64')">
       <TextareaCopyable :value="base64" copy-placement="none" />
     </n-form-item>
 
     <div flex justify-center gap-3>
       <c-button @click="copySVG()">
-        Copy svg
+        {{ t('tools.svg-placeholder-generator.copySvg') }}
       </c-button>
       <c-button @click="copyBase64()">
-        Copy base64
+        {{ t('tools.svg-placeholder-generator.copyBase64') }}
       </c-button>
       <c-button @click="download()">
-        Download svg
+        {{ t('tools.svg-placeholder-generator.downloadSvg') }}
       </c-button>
     </div>
   </div>
diff --git a/src/tools/wifi-qr-code-generator/index.ts b/src/tools/wifi-qr-code-generator/index.ts
index ad0135c3..68d20e65 100644
--- a/src/tools/wifi-qr-code-generator/index.ts
+++ b/src/tools/wifi-qr-code-generator/index.ts
@@ -1,11 +1,11 @@
 import { Qrcode } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'WiFi QR Code generator',
+  name: t('tools.wifi-qrcode-generator.title'),
   path: '/wifi-qrcode-generator',
-  description:
-    'Generate and download QR-codes for quick connections to WiFi networks.',
+  description: t('tools.wifi-qrcode-generator.description'),
   keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent', 'wifi'],
   component: () => import('./wifi-qr-code-generator.vue'),
   icon: Qrcode,
diff --git a/src/tools/wifi-qr-code-generator/locales/en.yml b/src/tools/wifi-qr-code-generator/locales/en.yml
new file mode 100644
index 00000000..cb3601ee
--- /dev/null
+++ b/src/tools/wifi-qr-code-generator/locales/en.yml
@@ -0,0 +1,20 @@
+tools:
+  wifi-qrcode-generator:
+    title: WiFi QR Code generator
+    description: Generate and download QR-codes for quick connections to WiFi networks.
+
+    encryption: Encryption method
+    ssidLabel: 'SSID:'
+    ssidPlaceholder: 'Your WiFi SSID...'
+    hiddenSSID: Hidden SSID
+    passwordLabel: 'Password:'
+    passwordPlaceholder: 'Your WiFi Password...'
+    eapMethod: EAP method
+    eapIdentityLabel: 'Identity:'
+    eapIdentityPlaceholder: 'Your EAP Identity...'
+    anonymous: 'Anonymous?'
+    eapPhase2Method: 'EAP Phase 2 method'
+    foreground: 'Foreground color:'
+    background: 'Background color:'
+    wifiQrcode: wifi-qrcode
+    downloadBtn: Download qr-code
diff --git a/src/tools/wifi-qr-code-generator/locales/zh.yml b/src/tools/wifi-qr-code-generator/locales/zh.yml
new file mode 100644
index 00000000..2634ef72
--- /dev/null
+++ b/src/tools/wifi-qr-code-generator/locales/zh.yml
@@ -0,0 +1,20 @@
+tools:
+  wifi-qrcode-generator:
+    title: WiFi 二维码生成器
+    description: 生成并下载用于快速连接 WiFi 网络的二维码。
+
+    encryption: 加密方法
+    ssidLabel: 'SSID:'
+    ssidPlaceholder: '您的 WiFi SSID...'
+    hiddenSSID: 隐藏 SSID
+    passwordLabel: '密码:'
+    passwordPlaceholder: '您的 WiFi 密码...'
+    eapMethod: EAP 方法
+    eapIdentityLabel: '身份:'
+    eapIdentityPlaceholder: '您的 EAP 身份...'
+    anonymous: '匿名?'
+    eapPhase2Method: 'EAP 第2阶段方法'
+    foreground: '前景色:'
+    background: '背景色:'
+    wifiQrcode: WiFi 二维码
+    downloadBtn: 下载二维码
diff --git a/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue b/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
index e6320d3e..bb9ca73d 100644
--- a/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
+++ b/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
@@ -6,6 +6,7 @@ import {
 } from './useQRCode';
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 
+const { t } = useI18n();
 const foreground = ref('#000000ff');
 const background = ref('#ffffffff');
 
@@ -42,7 +43,7 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
         <c-select
           v-model:value="encryption"
           mb-4
-          label="Encryption method"
+          :label="t('tools.wifi-qrcode-generator.encryption')"
           default-value="WPA"
           label-position="left"
           label-width="130px"
@@ -72,14 +73,13 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
             label-position="left"
             label-width="130px"
             label-align="right"
-            label="SSID:"
+            :label="t('tools.wifi-qrcode-generator.ssidLabel')"
             rows="1"
             autosize
-            placeholder="Your WiFi SSID..."
-            mb-6
+            :placeholder="t('tools.wifi-qrcode-generator.ssidPlaceholder')"
           />
-          <n-checkbox v-model:checked="isHiddenSSID">
-            Hidden SSID
+          <n-checkbox v-model:checked="isHiddenSSID" w-40>
+            {{ t('tools.wifi-qrcode-generator.hiddenSSID') }}
           </n-checkbox>
         </div>
         <c-input-text
@@ -88,17 +88,17 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
           label-position="left"
           label-width="130px"
           label-align="right"
-          label="Password:"
+          :label="t('tools.wifi-qrcode-generator.passwordLabel')"
           rows="1"
           autosize
           type="password"
-          placeholder="Your WiFi Password..."
+          :placeholder="t('tools.wifi-qrcode-generator.passwordPlaceholder')"
           mb-6
         />
         <c-select
           v-if="encryption === 'WPA2-EAP'"
           v-model:value="eapMethod"
-          label="EAP method"
+          :label="t('tools.wifi-qrcode-generator.eapMethod')"
           label-position="left"
           label-width="130px"
           label-align="right"
@@ -111,20 +111,19 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
             label-position="left"
             label-width="130px"
             label-align="right"
-            label="Identity:"
+            :label="t('tools.wifi-qrcode-generator.eapIdentityLabel')"
             rows="1"
             autosize
-            placeholder="Your EAP Identity..."
-            mb-6
+            :placeholder="t('tools.wifi-qrcode-generator.eapIdentityPlaceholder')"
           />
-          <n-checkbox v-model:checked="eapAnonymous">
-            Anonymous?
+          <n-checkbox v-model:checked="eapAnonymous" w-40>
+            {{ t('tools.wifi-qrcode-generator.anonymous') }}
           </n-checkbox>
         </div>
         <c-select
           v-if="encryption === 'WPA2-EAP'"
           v-model:value="eapPhase2Method"
-          label="EAP Phase 2 method"
+          :label="t('tools.wifi-qrcode-generator.eapPhase2Method')"
           label-position="left"
           label-width="130px"
           label-align="right"
@@ -132,19 +131,19 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
           searchable mb-4
         />
         <n-form label-width="130" label-placement="left">
-          <n-form-item label="Foreground color:">
+          <n-form-item :label="t('tools.wifi-qrcode-generator.foreground')">
             <n-color-picker v-model:value="foreground" :modes="['hex']" />
           </n-form-item>
-          <n-form-item label="Background color:">
+          <n-form-item :label="t('tools.wifi-qrcode-generator.background')">
             <n-color-picker v-model:value="background" :modes="['hex']" />
           </n-form-item>
         </n-form>
       </div>
       <div v-if="qrcode">
         <div flex flex-col items-center gap-3>
-          <img alt="wifi-qrcode" :src="qrcode" width="200">
+          <img :alt="t('tools.wifi-qrcode-generator.wifiQrcode')" :src="qrcode" width="200">
           <c-button @click="download">
-            Download qr-code
+            {{ t('tools.wifi-qrcode-generator.downloadBtn') }}
           </c-button>
         </div>
       </div>
diff --git a/src/tools/xml-formatter/index.ts b/src/tools/xml-formatter/index.ts
index fe28d3ae..41ee5419 100644
--- a/src/tools/xml-formatter/index.ts
+++ b/src/tools/xml-formatter/index.ts
@@ -1,10 +1,11 @@
 import { Code } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'XML formatter',
+  name: t('tools.xml-formatter.title'),
   path: '/xml-formatter',
-  description: 'Prettify your XML string to a human friendly readable format.',
+  description: t('tools.xml-formatter.description'),
   keywords: ['xml', 'prettify', 'format'],
   component: () => import('./xml-formatter.vue'),
   icon: Code,
diff --git a/src/tools/xml-formatter/locales/en.yml b/src/tools/xml-formatter/locales/en.yml
new file mode 100644
index 00000000..82dfff9e
--- /dev/null
+++ b/src/tools/xml-formatter/locales/en.yml
@@ -0,0 +1,12 @@
+tools:
+  xml-formatter:
+    title: XML formatter
+    description: Prettify your XML string to a human friendly readable format.
+
+    collapseContent: 'Collapse content:'
+    indentSize: 'Indent size:'
+    inputLabel: Your XML
+    inputPlaceholder: Paste your XML here...
+    outputLabel: Formatted XML from your XML
+
+    invalidMessage: Provided XML is not valid.
diff --git a/src/tools/xml-formatter/locales/zh.yml b/src/tools/xml-formatter/locales/zh.yml
new file mode 100644
index 00000000..a5fc657b
--- /dev/null
+++ b/src/tools/xml-formatter/locales/zh.yml
@@ -0,0 +1,12 @@
+tools:
+  xml-formatter:
+    title: XML 格式化工具
+    description: 将您的 XML 字符串美化为易读的人类友好格式。
+
+    collapseContent: '折叠内容：'
+    indentSize: '缩进大小：'
+    inputLabel: 您的 XML
+    inputPlaceholder: 在此粘贴您的 XML...
+    outputLabel: 根据您的 XML 格式化的 XML
+
+    invalidMessage: 提供的 XML 不合法。
diff --git a/src/tools/xml-formatter/xml-formatter.vue b/src/tools/xml-formatter/xml-formatter.vue
index d59cf8c7..ad537d84 100644
--- a/src/tools/xml-formatter/xml-formatter.vue
+++ b/src/tools/xml-formatter/xml-formatter.vue
@@ -2,6 +2,7 @@
 import { formatXml, isValidXML } from './xml-formatter.service';
 import type { UseValidationRule } from '@/composable/validation';
 
+const { t } = useI18n();
 const defaultValue = '<hello><world>foo</world><world>bar</world></hello>';
 const indentSize = useStorage('xml-formatter:indent-size', 2);
 const collapseContent = useStorage('xml-formatter:collapse-content', true);
@@ -17,7 +18,7 @@ function transformer(value: string) {
 const rules: UseValidationRule<string>[] = [
   {
     validator: isValidXML,
-    message: 'Provided XML is not valid.',
+    message: t('tools.xml-formatter.invalidMessage'),
   },
 ];
 </script>
@@ -25,19 +26,19 @@ const rules: UseValidationRule<string>[] = [
 <template>
   <div important:flex-full important:flex-shrink-0 important:flex-grow-0>
     <div flex justify-center>
-      <n-form-item label="Collapse content:" label-placement="left">
+      <n-form-item :label="t('tools.xml-formatter.collapseContent')" label-placement="left">
         <n-switch v-model:value="collapseContent" />
       </n-form-item>
-      <n-form-item label="Indent size:" label-placement="left" label-width="100" :show-feedback="false">
+      <n-form-item :label="t('tools.xml-formatter.indentSize')" label-placement="left" label-width="100" :show-feedback="false">
         <n-input-number v-model:value="indentSize" min="0" max="10" w-100px />
       </n-form-item>
     </div>
   </div>
 
   <format-transformer
-    input-label="Your XML"
-    input-placeholder="Paste your XML here..."
-    output-label="Formatted XML from your XML"
+    :input-label="t('tools.xml-formatter.inputLabel')"
+    :input-placeholder="t('tools.xml-formatter.inputPlaceholder')"
+    :output-label="t('tools.xml-formatter.outputLabel')"
     output-language="xml"
     :input-validation-rules="rules"
     :transformer="transformer"

From a2e498d0aa2e19dc4a2b8cd1133ff4f9e57f9475 Mon Sep 17 00:00:00 2001
From: Amery2010 <amery@xiangfa.org>
Date: Wed, 21 Feb 2024 01:37:59 +0800
Subject: [PATCH 7/8] WIP(translate): translate web and math category all tools

---
 .../eta-calculator/eta-calculator.service.ts  |  5 ++-
 src/tools/eta-calculator/eta-calculator.vue   | 33 +++++++++--------
 src/tools/eta-calculator/index.ts             |  6 +--
 src/tools/eta-calculator/locales/en.yml       | 17 +++++++++
 src/tools/eta-calculator/locales/zh.yml       | 17 +++++++++
 src/tools/ipv4-address-converter/index.ts     |  5 ++-
 .../ipv4-address-converter.vue                | 19 +++++-----
 .../ipv4-address-converter/locales/en.yml     | 15 ++++++++
 .../ipv4-address-converter/locales/zh.yml     | 15 ++++++++
 src/tools/ipv4-range-expander/index.ts        |  6 +--
 .../ipv4-range-expander.vue                   | 32 ++++++++--------
 src/tools/ipv4-range-expander/locales/en.yml  | 18 +++++++++
 src/tools/ipv4-range-expander/locales/zh.yml  | 18 +++++++++
 src/tools/ipv4-subnet-calculator/index.ts     |  5 ++-
 .../ipv4-subnet-calculator.vue                | 37 ++++++++++---------
 .../ipv4-subnet-calculator/locales/en.yml     | 24 ++++++++++++
 .../ipv4-subnet-calculator/locales/zh.yml     | 24 ++++++++++++
 src/tools/ipv6-ula-generator/index.ts         |  5 ++-
 .../ipv6-ula-generator/ipv6-ula-generator.vue | 16 ++++----
 src/tools/ipv6-ula-generator/locales/en.yml   | 13 +++++++
 src/tools/ipv6-ula-generator/locales/zh.yml   | 13 +++++++
 src/tools/mac-address-generator/index.ts      |  5 ++-
 .../mac-address-generator/locales/en.yml      | 17 +++++++++
 .../mac-address-generator/locales/zh.yml      | 17 +++++++++
 .../mac-address-generator.vue                 | 23 ++++++------
 src/tools/mac-address-lookup/index.ts         |  5 ++-
 src/tools/mac-address-lookup/locales/en.yml   | 12 ++++++
 src/tools/mac-address-lookup/locales/zh.yml   | 12 ++++++
 .../mac-address-lookup/mac-address-lookup.vue | 13 ++++---
 src/tools/math-evaluator/index.ts             |  5 ++-
 src/tools/math-evaluator/locales/en.yml       |  7 ++++
 src/tools/math-evaluator/locales/zh.yml       |  7 ++++
 src/tools/math-evaluator/math-evaluator.vue   |  5 ++-
 src/tools/percentage-calculator/index.ts      |  5 ++-
 .../percentage-calculator/locales/en.yml      | 13 +++++++
 .../percentage-calculator/locales/zh.yml      | 13 +++++++
 .../percentage-calculator.vue                 | 23 ++++++------
 37 files changed, 406 insertions(+), 119 deletions(-)
 create mode 100644 src/tools/eta-calculator/locales/en.yml
 create mode 100644 src/tools/eta-calculator/locales/zh.yml
 create mode 100644 src/tools/ipv4-address-converter/locales/en.yml
 create mode 100644 src/tools/ipv4-address-converter/locales/zh.yml
 create mode 100644 src/tools/ipv4-range-expander/locales/en.yml
 create mode 100644 src/tools/ipv4-range-expander/locales/zh.yml
 create mode 100644 src/tools/ipv4-subnet-calculator/locales/en.yml
 create mode 100644 src/tools/ipv4-subnet-calculator/locales/zh.yml
 create mode 100644 src/tools/ipv6-ula-generator/locales/en.yml
 create mode 100644 src/tools/ipv6-ula-generator/locales/zh.yml
 create mode 100644 src/tools/mac-address-generator/locales/en.yml
 create mode 100644 src/tools/mac-address-generator/locales/zh.yml
 create mode 100644 src/tools/mac-address-lookup/locales/en.yml
 create mode 100644 src/tools/mac-address-lookup/locales/zh.yml
 create mode 100644 src/tools/math-evaluator/locales/en.yml
 create mode 100644 src/tools/math-evaluator/locales/zh.yml
 create mode 100644 src/tools/percentage-calculator/locales/en.yml
 create mode 100644 src/tools/percentage-calculator/locales/zh.yml

diff --git a/src/tools/eta-calculator/eta-calculator.service.ts b/src/tools/eta-calculator/eta-calculator.service.ts
index 6c061a9d..f5f63c88 100644
--- a/src/tools/eta-calculator/eta-calculator.service.ts
+++ b/src/tools/eta-calculator/eta-calculator.service.ts
@@ -1,6 +1,7 @@
 import { formatDuration } from 'date-fns';
+import type { Locale } from 'date-fns';
 
-export function formatMsDuration(duration: number) {
+export function formatMsDuration(duration: number, locale: Locale) {
   const ms = Math.floor(duration % 1000);
   const secs = Math.floor(((duration - ms) / 1000) % 60);
   const mins = Math.floor((((duration - ms) / 1000 - secs) / 60) % 60);
@@ -11,6 +12,6 @@ export function formatMsDuration(duration: number) {
       hours: hrs,
       minutes: mins,
       seconds: secs,
-    }) + (ms > 0 ? ` ${ms} ms` : '')
+    }, { locale }) + (ms > 0 ? ` ${ms} ms` : '')
   );
 }
diff --git a/src/tools/eta-calculator/eta-calculator.vue b/src/tools/eta-calculator/eta-calculator.vue
index e1c36a62..f8071f45 100644
--- a/src/tools/eta-calculator/eta-calculator.vue
+++ b/src/tools/eta-calculator/eta-calculator.vue
@@ -3,57 +3,58 @@
 
 import { addMilliseconds, formatRelative } from 'date-fns';
 
-import { enGB } from 'date-fns/locale';
+import { enGB, zhCN } from 'date-fns/locale';
 
 import { formatMsDuration } from './eta-calculator.service';
 
+const { t, locale } = useI18n();
 const unitCount = ref(3 * 62);
 const unitPerTimeSpan = ref(3);
 const timeSpan = ref(5);
 const timeSpanUnitMultiplier = ref(60000);
 const startedAt = ref(Date.now());
 
+const localeLang = computed(() => locale.value === 'zh' ? zhCN : enGB);
 const durationMs = computed(() => {
   const timeSpanMs = timeSpan.value * timeSpanUnitMultiplier.value;
 
   return unitCount.value / (unitPerTimeSpan.value / timeSpanMs);
 });
 const endAt = computed(() =>
-  formatRelative(addMilliseconds(startedAt.value, durationMs.value), Date.now(), { locale: enGB }),
+  formatRelative(addMilliseconds(startedAt.value, durationMs.value), Date.now(), { locale: localeLang.value }),
 );
 </script>
 
 <template>
   <div>
     <div text-justify op-70>
-      With a concrete example, if you wash 5 plates in 3 minutes and you have 500 plates to wash, it will take you 5
-      hours to wash them all.
+      {{ t('tools.eta-calculator.tips') }}
     </div>
     <n-divider />
     <div flex gap-2>
-      <n-form-item label="Amount of element to consume" flex-1>
+      <n-form-item :label="t('tools.eta-calculator.unitCount')" flex-1>
         <n-input-number v-model:value="unitCount" :min="1" />
       </n-form-item>
-      <n-form-item label="The consumption started at" flex-1>
+      <n-form-item :label="t('tools.eta-calculator.startedAt')" flex-1>
         <n-date-picker v-model:value="startedAt" type="datetime" />
       </n-form-item>
     </div>
 
-    <p>Amount of unit consumed by time span</p>
+    <p>{{ t('tools.eta-calculator.unitPerTimeSpan') }}</p>
     <div flex flex-col items-baseline gap-y-2 md:flex-row>
       <n-input-number v-model:value="unitPerTimeSpan" :min="1" />
       <div flex items-baseline gap-2>
-        <span ml-2>in</span>
+        <span ml-2>{{ t('tools.eta-calculator.in') }}</span>
         <n-input-number v-model:value="timeSpan" min-w-130px :min="1" />
         <c-select
           v-model:value="timeSpanUnitMultiplier"
           min-w-130px
           :options="[
-            { label: 'milliseconds', value: 1 },
-            { label: 'seconds', value: 1000 },
-            { label: 'minutes', value: 1000 * 60 },
-            { label: 'hours', value: 1000 * 60 * 60 },
-            { label: 'days', value: 1000 * 60 * 60 * 24 },
+            { label: t('tools.eta-calculator.milliseconds'), value: 1 },
+            { label: t('tools.eta-calculator.seconds'), value: 1000 },
+            { label: t('tools.eta-calculator.minutes'), value: 1000 * 60 },
+            { label: t('tools.eta-calculator.hours'), value: 1000 * 60 * 60 },
+            { label: t('tools.eta-calculator.days'), value: 1000 * 60 * 60 * 24 },
           ]"
         />
       </div>
@@ -61,12 +62,12 @@ const endAt = computed(() =>
 
     <n-divider />
     <c-card mb-2>
-      <n-statistic label="Total duration">
-        {{ formatMsDuration(durationMs) }}
+      <n-statistic :label="t('tools.eta-calculator.totalDuration')">
+        {{ formatMsDuration(durationMs, localeLang) }}
       </n-statistic>
     </c-card>
     <c-card>
-      <n-statistic label="It will end ">
+      <n-statistic :label="t('tools.eta-calculator.endAt')">
         {{ endAt }}
       </n-statistic>
     </c-card>
diff --git a/src/tools/eta-calculator/index.ts b/src/tools/eta-calculator/index.ts
index abda2870..c16d6ceb 100644
--- a/src/tools/eta-calculator/index.ts
+++ b/src/tools/eta-calculator/index.ts
@@ -1,11 +1,11 @@
 import { Hourglass } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'ETA calculator',
+  name: t('tools.eta-calculator.title'),
   path: '/eta-calculator',
-  description:
-    'An ETA (Estimated Time of Arrival) calculator to know the approximate end time of a task, for example the moment of ending of a download.',
+  description: t('tools.eta-calculator.description'),
   keywords: ['eta', 'calculator', 'estimated', 'time', 'arrival', 'average'],
   component: () => import('./eta-calculator.vue'),
   icon: Hourglass,
diff --git a/src/tools/eta-calculator/locales/en.yml b/src/tools/eta-calculator/locales/en.yml
new file mode 100644
index 00000000..a2469910
--- /dev/null
+++ b/src/tools/eta-calculator/locales/en.yml
@@ -0,0 +1,17 @@
+tools:
+  eta-calculator:
+    title: ETA calculator
+    description: An ETA (Estimated Time of Arrival) calculator to know the approximate end time of a task, for example the moment of ending of a download.
+
+    tips: With a concrete example, if you wash 5 plates in 3 minutes and you have 500 plates to wash, it will take you 5 hours to wash them all.
+    unitCount: Amount of element to consume
+    startedAt: The consumption started at
+    unitPerTimeSpan: Amount of unit consumed by time span
+    in: in
+    milliseconds: milliseconds
+    seconds: seconds
+    minutes: minutes
+    hours: hours
+    days: days
+    totalDuration: Total duration
+    endAt: It will end
diff --git a/src/tools/eta-calculator/locales/zh.yml b/src/tools/eta-calculator/locales/zh.yml
new file mode 100644
index 00000000..0a8a769e
--- /dev/null
+++ b/src/tools/eta-calculator/locales/zh.yml
@@ -0,0 +1,17 @@
+tools:
+  eta-calculator:
+    title: 预计到达时间计算器
+    description: 一个预计到达时间（ETA）计算器，用于了解任务的大致结束时间，例如下载结束的时间。
+
+    tips: 以一个具体的例子来说，如果你用 3 分钟洗 5 个盘子，而你有 500 个盘子要洗，那么你需要 5 个小时来洗完所有盘子。
+    unitCount: 要消耗的元素数量
+    startedAt: 消耗开始于
+    unitPerTimeSpan: 每个时间段消耗的单位数量
+    in: 用
+    milliseconds: 毫秒
+    seconds: 秒
+    minutes: 分钟
+    hours: 小时
+    days: 天
+    totalDuration: 总持续时间
+    endAt: 它将在以下时间结束
diff --git a/src/tools/ipv4-address-converter/index.ts b/src/tools/ipv4-address-converter/index.ts
index 62d2daf1..da3190b8 100644
--- a/src/tools/ipv4-address-converter/index.ts
+++ b/src/tools/ipv4-address-converter/index.ts
@@ -1,10 +1,11 @@
 import { Binary } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Ipv4 address converter',
+  name: t('tools.ipv4-address-converter.title'),
   path: '/ipv4-address-converter',
-  description: 'Convert an ip address into decimal, binary, hexadecimal or event in ipv6',
+  description: t('tools.ipv4-address-converter.description'),
   keywords: ['ipv4', 'address', 'converter', 'decimal', 'hexadecimal', 'binary', 'ipv6'],
   component: () => import('./ipv4-address-converter.vue'),
   icon: Binary,
diff --git a/src/tools/ipv4-address-converter/ipv4-address-converter.vue b/src/tools/ipv4-address-converter/ipv4-address-converter.vue
index 40b1890e..454b8f70 100644
--- a/src/tools/ipv4-address-converter/ipv4-address-converter.vue
+++ b/src/tools/ipv4-address-converter/ipv4-address-converter.vue
@@ -3,6 +3,7 @@ import { convertBase } from '../integer-base-converter/integer-base-converter.mo
 import { ipv4ToInt, ipv4ToIpv6, isValidIpv4 } from './ipv4-address-converter.service';
 import { useValidation } from '@/composable/validation';
 
+const { t } = useI18n();
 const rawIpAddress = useStorage('ipv4-converter:ip', '192.168.1.1');
 
 const convertedSections = computed(() => {
@@ -10,23 +11,23 @@ const convertedSections = computed(() => {
 
   return [
     {
-      label: 'Decimal: ',
+      label: t('tools.ipv4-address-converter.decimal'),
       value: String(ipInDecimal),
     },
     {
-      label: 'Hexadecimal: ',
+      label: t('tools.ipv4-address-converter.hexadecimal'),
       value: convertBase({ fromBase: 10, toBase: 16, value: String(ipInDecimal) }).toUpperCase(),
     },
     {
-      label: 'Binary: ',
+      label: t('tools.ipv4-address-converter.binary'),
       value: convertBase({ fromBase: 10, toBase: 2, value: String(ipInDecimal) }),
     },
     {
-      label: 'Ipv6: ',
+      label: t('tools.ipv4-address-converter.ipv6'),
       value: ipv4ToIpv6({ ip: rawIpAddress.value }),
     },
     {
-      label: 'Ipv6 (short): ',
+      label: t('tools.ipv4-address-converter.ipv6Short'),
       value: ipv4ToIpv6({ ip: rawIpAddress.value, prefix: '::ffff:' }),
     },
   ];
@@ -34,13 +35,13 @@ const convertedSections = computed(() => {
 
 const { attrs: validationAttrs } = useValidation({
   source: rawIpAddress,
-  rules: [{ message: 'Invalid ipv4 address', validator: ip => isValidIpv4({ ip }) }],
+  rules: [{ message: t('tools.ipv4-address-converter.invalidMessage'), validator: ip => isValidIpv4({ ip }) }],
 });
 </script>
 
 <template>
   <div>
-    <c-input-text v-model:value="rawIpAddress" label="The ipv4 address:" placeholder="The ipv4 address..." />
+    <c-input-text v-model:value="rawIpAddress" :label="t('tools.ipv4-address-converter.ipv4AddressLabel')" :placeholder="t('tools.ipv4-address-converter.ipv4AddressPlaceholder')" />
 
     <n-divider />
 
@@ -49,11 +50,11 @@ const { attrs: validationAttrs } = useValidation({
       :key="label"
       :label="label"
       label-position="left"
-      label-width="100px"
+      label-width="120px"
       label-align="right"
       mb-2
       :value="validationAttrs.validationStatus === 'error' ? '' : value"
-      placeholder="Set a correct ipv4 address"
+      :placeholder="t('tools.ipv4-address-converter.errorPlaceholder')"
     />
   </div>
 </template>
diff --git a/src/tools/ipv4-address-converter/locales/en.yml b/src/tools/ipv4-address-converter/locales/en.yml
new file mode 100644
index 00000000..de93a2d3
--- /dev/null
+++ b/src/tools/ipv4-address-converter/locales/en.yml
@@ -0,0 +1,15 @@
+tools:
+  ipv4-address-converter:
+    title: Ipv4 address converter
+    description: Convert an ip address into decimal, binary, hexadecimal or event in ipv6
+
+    ipv4AddressLabel: 'The ipv4 address:'
+    ipv4AddressPlaceholder: 'The ipv4 address...'
+    decimal: 'Decimal: '
+    hexadecimal: 'Hexadecimal: '
+    binary: 'Binary: '
+    ipv6: 'Ipv6: '
+    ipv6Short: 'Ipv6 (short): '
+
+    errorPlaceholder: Set a correct ipv4 address
+    invalidMessage: Invalid ipv4 address
diff --git a/src/tools/ipv4-address-converter/locales/zh.yml b/src/tools/ipv4-address-converter/locales/zh.yml
new file mode 100644
index 00000000..3e5424a6
--- /dev/null
+++ b/src/tools/ipv4-address-converter/locales/zh.yml
@@ -0,0 +1,15 @@
+tools:
+  ipv4-address-converter:
+    title: IPv4 地址转换器
+    description: 将 IP 地址转换为十进制、二进制、十六进制，甚至 IPv6
+
+    ipv4AddressLabel: 'IPv4 地址：'
+    ipv4AddressPlaceholder: 'IPv4 地址...'
+    decimal: '十进制：'
+    hexadecimal: '十六进制：'
+    binary: '二进制：'
+    ipv6: 'IPv6：'
+    ipv6Short: 'IPv6（简写）：'
+
+    errorPlaceholder: 设置一个正确的 IPv4 地址
+    invalidMessage: 无效的 IPv4 地址
diff --git a/src/tools/ipv4-range-expander/index.ts b/src/tools/ipv4-range-expander/index.ts
index 233f7cc4..ffdac82a 100644
--- a/src/tools/ipv4-range-expander/index.ts
+++ b/src/tools/ipv4-range-expander/index.ts
@@ -1,11 +1,11 @@
 import { UnfoldMoreOutlined } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'IPv4 range expander',
+  name: t('tools.ipv4-range-expander.title'),
   path: '/ipv4-range-expander',
-  description:
-    'Given a start and an end IPv4 address this tool calculates a valid IPv4 network with its CIDR notation.',
+  description: t('tools.ipv4-range-expander.description'),
   keywords: ['ipv4', 'range', 'expander', 'subnet', 'creator', 'cidr'],
   component: () => import('./ipv4-range-expander.vue'),
   icon: UnfoldMoreOutlined,
diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.vue b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
index 6eb3c922..3d3eba54 100644
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.vue
+++ b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
@@ -6,6 +6,7 @@ import { calculateCidr } from './ipv4-range-expander.service';
 import ResultRow from './result-row.vue';
 import { useValidation } from '@/composable/validation';
 
+const { t } = useI18n();
 const rawStartAddress = useStorage('ipv4-range-expander:startAddress', '192.168.1.1');
 const rawEndAddress = useStorage('ipv4-range-expander:endAddress', '192.168.6.255');
 
@@ -17,22 +18,22 @@ const calculatedValues: {
   getNewValue: (result: Ipv4RangeExpanderResult | undefined) => string | undefined
 }[] = [
   {
-    label: 'Start address',
+    label: t('tools.ipv4-range-expander.startAddress'),
     getOldValue: () => rawStartAddress.value,
     getNewValue: result => result?.newStart,
   },
   {
-    label: 'End address',
+    label: t('tools.ipv4-range-expander.endAddress'),
     getOldValue: () => rawEndAddress.value,
     getNewValue: result => result?.newEnd,
   },
   {
-    label: 'Addresses in range',
+    label: t('tools.ipv4-range-expander.addressesInRange'),
     getOldValue: result => result?.oldSize?.toLocaleString(),
     getNewValue: result => result?.newSize?.toLocaleString(),
   },
   {
-    label: 'CIDR',
+    label: t('tools.ipv4-range-expander.CIDR'),
     getOldValue: () => '',
     getNewValue: result => result?.newCidr,
   },
@@ -40,11 +41,11 @@ const calculatedValues: {
 
 const startIpValidation = useValidation({
   source: rawStartAddress,
-  rules: [{ message: 'Invalid ipv4 address', validator: ip => isValidIpv4({ ip }) }],
+  rules: [{ message: t('tools.ipv4-range-expander.invalidMessage'), validator: ip => isValidIpv4({ ip }) }],
 });
 const endIpValidation = useValidation({
   source: rawEndAddress,
-  rules: [{ message: 'Invalid ipv4 address', validator: ip => isValidIpv4({ ip }) }],
+  rules: [{ message: t('tools.ipv4-range-expander.invalidMessage'), validator: ip => isValidIpv4({ ip }) }],
 });
 
 const showResult = computed(() => endIpValidation.isValid && startIpValidation.isValid && result.value !== undefined);
@@ -61,16 +62,16 @@ function onSwitchStartEndClicked() {
     <div mb-4 flex gap-4>
       <c-input-text
         v-model:value="rawStartAddress"
-        label="Start address"
-        placeholder="Start IPv4 address..."
+        :label="t('tools.ipv4-range-expander.startAddress')"
+        :placeholder="t('tools.ipv4-range-expander.startAddressPlaceholder')"
         :validation="startIpValidation"
         clearable
       />
 
       <c-input-text
         v-model:value="rawEndAddress"
-        label="End address"
-        placeholder="End IPv4 address..."
+        :label="t('tools.ipv4-range-expander.endAddress')"
+        :placeholder="t('tools.ipv4-range-expander.endAddressPlaceholder')"
         :validation="endIpValidation"
         clearable
       />
@@ -83,10 +84,10 @@ function onSwitchStartEndClicked() {
 &nbsp;
           </th>
           <th scope="col">
-            old value
+            {{ t('tools.ipv4-range-expander.oldValue') }}
           </th>
           <th scope="col">
-            new value
+            {{ t('tools.ipv4-range-expander.newValue') }}
           </th>
         </tr>
       </thead>
@@ -102,17 +103,16 @@ function onSwitchStartEndClicked() {
     </n-table>
     <n-alert
       v-else-if="startIpValidation.isValid && endIpValidation.isValid"
-      title="Invalid combination of start and end IPv4 address"
+      :title="t('tools.ipv4-range-expander.errorMessage')"
       type="error"
     >
       <div my-3 op-70>
-        The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be calculated.
-        In the most cases the solution to solve this problem is to change start and end address.
+        {{ t('tools.ipv4-range-expander.errorDesc') }}
       </div>
 
       <c-button @click="onSwitchStartEndClicked">
         <n-icon mr-2 :component="Exchange" depth="3" size="22" />
-        Switch start and end IPv4 address
+        {{ t('tools.ipv4-range-expander.switchStartEnd') }}
       </c-button>
     </n-alert>
   </div>
diff --git a/src/tools/ipv4-range-expander/locales/en.yml b/src/tools/ipv4-range-expander/locales/en.yml
new file mode 100644
index 00000000..c64acce4
--- /dev/null
+++ b/src/tools/ipv4-range-expander/locales/en.yml
@@ -0,0 +1,18 @@
+tools:
+  ipv4-range-expander:
+    title: IPv4 range expander
+    description: Given a start and an end IPv4 address this tool calculates a valid IPv4 network with its CIDR notation.
+
+    startAddressPlaceholder: Start IPv4 address...
+    endAddressPlaceholder: End IPv4 address...
+    startAddress: Start address
+    endAddress: End address
+    addressesInRange: Addresses in range
+    CIDR: CIDR
+    oldValue: old value
+    newValue: new value
+
+    errorMessage: Invalid combination of start and end IPv4 address
+    errorDesc: The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be calculated. In the most cases the solution to solve this problem is to change start and end address.
+    switchStartEnd: Switch start and end IPv4 address
+    invalidMessage: Invalid ipv4 address
diff --git a/src/tools/ipv4-range-expander/locales/zh.yml b/src/tools/ipv4-range-expander/locales/zh.yml
new file mode 100644
index 00000000..33e9de19
--- /dev/null
+++ b/src/tools/ipv4-range-expander/locales/zh.yml
@@ -0,0 +1,18 @@
+tools:
+  ipv4-range-expander:
+    title: IPv4 范围扩展器
+    description: 给定起始和结束 IPv4 地址，此工具计算出一个有效的 IPv4 网络及其 CIDR 表示法。
+
+    startAddressPlaceholder: 起始 IPv4 地址...
+    endAddressPlaceholder: 结束 IPv4 地址...
+    startAddress: 起始地址
+    endAddress: 结束地址
+    addressesInRange: 范围内的地址
+    CIDR: CIDR
+    oldValue: 旧值
+    newValue: 新值
+
+    errorMessage: 起始和结束 IPv4 地址的组合无效
+    errorDesc: 结束 IPv4 地址低于起始 IPv4 地址。这是无效的，无法计算结果。大多数情况下，解决此问题的方法是更改起始和结束地址。
+    switchStartEnd: 切换起始和结束 IPv4 地址
+    invalidMessage: 无效的 IPv4 地址
diff --git a/src/tools/ipv4-subnet-calculator/index.ts b/src/tools/ipv4-subnet-calculator/index.ts
index fb4bfb43..ed22535b 100644
--- a/src/tools/ipv4-subnet-calculator/index.ts
+++ b/src/tools/ipv4-subnet-calculator/index.ts
@@ -1,10 +1,11 @@
 import { RouterOutlined } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'IPv4 subnet calculator',
+  name: t('tools.ipv4-subnet-calculator.title'),
   path: '/ipv4-subnet-calculator',
-  description: 'Parse your IPv4 CIDR blocks and get all the info you need about your sub network.',
+  description: t('tools.ipv4-subnet-calculator.description'),
   keywords: ['ipv4', 'subnet', 'calculator', 'mask', 'network', 'cidr', 'netmask', 'bitmask', 'broadcast', 'address'],
   component: () => import('./ipv4-subnet-calculator.vue'),
   icon: RouterOutlined,
diff --git a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
index 3e2f4378..0f6be783 100644
--- a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
+++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
@@ -7,6 +7,7 @@ import { withDefaultOnError } from '@/utils/defaults';
 import { isNotThrowing } from '@/utils/boolean';
 import SpanCopyable from '@/components/SpanCopyable.vue';
 
+const { t } = useI18n();
 const ip = useStorage('ipv4-subnet-calculator:ip', '192.168.0.1/24');
 
 const getNetworkInfo = (address: string) => new Netmask(address.trim());
@@ -15,7 +16,7 @@ const networkInfo = computed(() => withDefaultOnError(() => getNetworkInfo(ip.va
 
 const ipValidationRules = [
   {
-    message: 'We cannot parse this address, check the format',
+    message: t('tools.ipv4-subnet-calculator.invalidMessage'),
     validator: (value: string) => isNotThrowing(() => getNetworkInfo(value.trim())),
   },
 ];
@@ -26,50 +27,50 @@ const sections: {
   undefinedFallback?: string
 }[] = [
   {
-    label: 'Netmask',
+    label: t('tools.ipv4-subnet-calculator.networkMask'),
     getValue: block => block.toString(),
   },
   {
-    label: 'Network address',
+    label: t('tools.ipv4-subnet-calculator.networkAddress'),
     getValue: ({ base }) => base,
   },
   {
-    label: 'Network mask',
+    label: t('tools.ipv4-subnet-calculator.networkMask'),
     getValue: ({ mask }) => mask,
   },
   {
-    label: 'Network mask in binary',
+    label: t('tools.ipv4-subnet-calculator.networkMaskInBinary'),
     getValue: ({ bitmask }) => ('1'.repeat(bitmask) + '0'.repeat(32 - bitmask)).match(/.{8}/g)?.join('.') ?? '',
   },
   {
-    label: 'CIDR notation',
+    label: t('tools.ipv4-subnet-calculator.CIDRNotation'),
     getValue: ({ bitmask }) => `/${bitmask}`,
   },
   {
-    label: 'Wildcard mask',
+    label: t('tools.ipv4-subnet-calculator.wildcardMask'),
     getValue: ({ hostmask }) => hostmask,
   },
   {
-    label: 'Network size',
+    label: t('tools.ipv4-subnet-calculator.networkSize'),
     getValue: ({ size }) => String(size),
   },
   {
-    label: 'First address',
+    label: t('tools.ipv4-subnet-calculator.firstAddress'),
     getValue: ({ first }) => first,
   },
   {
-    label: 'Last address',
+    label: t('tools.ipv4-subnet-calculator.lastAddress'),
     getValue: ({ last }) => last,
   },
   {
-    label: 'Broadcast address',
+    label: t('tools.ipv4-subnet-calculator.broadcastAddress'),
     getValue: ({ broadcast }) => broadcast,
-    undefinedFallback: 'No broadcast address with this mask',
+    undefinedFallback: t('tools.ipv4-subnet-calculator.broadcastFallback'),
   },
   {
-    label: 'IP class',
+    label: t('tools.ipv4-subnet-calculator.IPClass'),
     getValue: ({ base: ip }) => getIPClass({ ip }),
-    undefinedFallback: 'Unknown class type',
+    undefinedFallback: t('tools.ipv4-subnet-calculator.IPClassFallback'),
   },
 ];
 
@@ -86,8 +87,8 @@ function switchToBlock({ count = 1 }: { count?: number }) {
   <div>
     <c-input-text
       v-model:value="ip"
-      label="An IPv4 address with or without mask"
-      placeholder="The ipv4 address..."
+      :label="t('tools.ipv4-subnet-calculator.ipv4AddressLabel')"
+      :placeholder="t('tools.ipv4-subnet-calculator.ipv4AddressPlaceholder')"
       :validation-rules="ipValidationRules"
       mb-4
     />
@@ -112,10 +113,10 @@ function switchToBlock({ count = 1 }: { count?: number }) {
       <div mt-3 flex items-center justify-between>
         <c-button @click="switchToBlock({ count: -1 })">
           <n-icon :component="ArrowLeft" />
-          Previous block
+          {{ t('tools.ipv4-subnet-calculator.previousBlock') }}
         </c-button>
         <c-button @click="switchToBlock({ count: 1 })">
-          Next block
+          {{ t('tools.ipv4-subnet-calculator.nextBlock') }}
           <n-icon :component="ArrowRight" />
         </c-button>
       </div>
diff --git a/src/tools/ipv4-subnet-calculator/locales/en.yml b/src/tools/ipv4-subnet-calculator/locales/en.yml
new file mode 100644
index 00000000..19e236d5
--- /dev/null
+++ b/src/tools/ipv4-subnet-calculator/locales/en.yml
@@ -0,0 +1,24 @@
+tools:
+  ipv4-subnet-calculator:
+    title: IPv4 subnet calculator
+    description: Parse your IPv4 CIDR blocks and get all the info you need about your sub network.
+
+    ipv4AddressLabel: An IPv4 address with or without mask
+    ipv4AddressPlaceholder: The ipv4 address...
+    netmask: Netmask
+    networkAddress: Network address
+    networkMask: Network mask
+    networkMaskInBinary: Network mask in binary
+    CIDRNotation: CIDR notation
+    wildcardMask: Wildcard mask
+    networkSize: Network size
+    firstAddress: First address
+    lastAddress: Last address
+    broadcastAddress: Broadcast address
+    broadcastFallback: No broadcast address with this mask
+    IPClass: IP class
+    IPClassFallback: Unknown class type
+
+    previousBlock: Previous block
+    nextBlock: Next block
+    invalidMessage: We cannot parse this address, check the format
diff --git a/src/tools/ipv4-subnet-calculator/locales/zh.yml b/src/tools/ipv4-subnet-calculator/locales/zh.yml
new file mode 100644
index 00000000..2c5b2f7f
--- /dev/null
+++ b/src/tools/ipv4-subnet-calculator/locales/zh.yml
@@ -0,0 +1,24 @@
+tools:
+  ipv4-subnet-calculator:
+    title: IPv4 子网计算器
+    description: 解析您的 IPv4 CIDR 块，并获取关于您的子网络的所有所需信息。
+
+    ipv4AddressLabel: 带有或不带掩码的 IPv4 地址
+    ipv4AddressPlaceholder: IPv4 地址...
+    netmask: 子网掩码
+    networkAddress: 网络地址
+    networkMask: 网络掩码
+    networkMaskInBinary: 二进制网络掩码
+    CIDRNotation: CIDR 表示法
+    wildcardMask: 通配符掩码
+    networkSize: 网络大小
+    firstAddress: 第一个地址
+    lastAddress: 最后一个地址
+    broadcastAddress: 广播地址
+    broadcastFallback: 此掩码无广播地址
+    IPClass: IP 类别
+    IPClassFallback: 未知类别
+
+    previousBlock: 前一个块
+    nextBlock: 下一个块
+    invalidMessage: 我们无法解析此地址，请检查格式
diff --git a/src/tools/ipv6-ula-generator/index.ts b/src/tools/ipv6-ula-generator/index.ts
index 24efaeba..e923c32d 100644
--- a/src/tools/ipv6-ula-generator/index.ts
+++ b/src/tools/ipv6-ula-generator/index.ts
@@ -1,10 +1,11 @@
 import { BuildingFactory } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'IPv6 ULA generator',
+  name: t('tools.ipv6-ula-generator.title'),
   path: '/ipv6-ula-generator',
-  description: 'Generate your own local, non-routable IP addresses on your network according to RFC4193.',
+  description: t('tools.ipv6-ula-generator.description'),
   keywords: ['ipv6', 'ula', 'generator', 'rfc4193', 'network', 'private'],
   component: () => import('./ipv6-ula-generator.vue'),
   icon: BuildingFactory,
diff --git a/src/tools/ipv6-ula-generator/ipv6-ula-generator.vue b/src/tools/ipv6-ula-generator/ipv6-ula-generator.vue
index 66c69c6c..5560b7d6 100644
--- a/src/tools/ipv6-ula-generator/ipv6-ula-generator.vue
+++ b/src/tools/ipv6-ula-generator/ipv6-ula-generator.vue
@@ -3,6 +3,7 @@ import { SHA1 } from 'crypto-js';
 import InputCopyable from '@/components/InputCopyable.vue';
 import { macAddressValidation } from '@/utils/macAddress';
 
+const { t } = useI18n();
 const macAddress = ref('20:37:06:12:34:56');
 const calculatedSections = computed(() => {
   const timestamp = new Date().getTime();
@@ -14,15 +15,15 @@ const calculatedSections = computed(() => {
 
   return [
     {
-      label: 'IPv6 ULA:',
+      label: t('tools.ipv6-ula-generator.IPv6ULA'),
       value: `${ula}::/48`,
     },
     {
-      label: 'First routable block:',
+      label: t('tools.ipv6-ula-generator.firstRoutableBlock'),
       value: `${ula}:0::/64`,
     },
     {
-      label: 'Last routable block:',
+      label: t('tools.ipv6-ula-generator.lastRoutableBlock'),
       value: `${ula}:ffff::/64`,
     },
   ];
@@ -33,16 +34,15 @@ const addressValidation = macAddressValidation(macAddress);
 
 <template>
   <div>
-    <n-alert title="Info" type="info">
-      This tool uses the first method suggested by IETF using the current timestamp plus the mac address, sha1 hashed,
-      and the lower 40 bits to generate your random ULA.
+    <n-alert :title="t('tools.ipv6-ula-generator.info')" type="info">
+      {{ t('tools.ipv6-ula-generator.infoDetail') }}
     </n-alert>
 
     <c-input-text
       v-model:value="macAddress"
-      placeholder="Type a MAC address"
+      :placeholder="t('tools.ipv6-ula-generator.macAddressPlaceholder')"
       clearable
-      label="MAC address:"
+      :label="t('tools.ipv6-ula-generator.macAddressLabel')"
       raw-text
       my-8
       :validation="addressValidation"
diff --git a/src/tools/ipv6-ula-generator/locales/en.yml b/src/tools/ipv6-ula-generator/locales/en.yml
new file mode 100644
index 00000000..47c51fea
--- /dev/null
+++ b/src/tools/ipv6-ula-generator/locales/en.yml
@@ -0,0 +1,13 @@
+tools:
+  ipv6-ula-generator:
+    title: IPv6 ULA generator
+    description: Generate your own local, non-routable IP addresses on your network according to RFC4193.
+
+    macAddressLabel: 'MAC address:'
+    macAddressPlaceholder: 'Type a MAC address'
+    IPv6ULA: 'IPv6 ULA:'
+    firstRoutableBlock: 'First routable block:'
+    lastRoutableBlock: 'Last routable block:'
+
+    info: Info
+    infoDetail: This tool uses the first method suggested by IETF using the current timestamp plus the mac address, sha1 hashed, and the lower 40 bits to generate your random ULA.
diff --git a/src/tools/ipv6-ula-generator/locales/zh.yml b/src/tools/ipv6-ula-generator/locales/zh.yml
new file mode 100644
index 00000000..4a8181e2
--- /dev/null
+++ b/src/tools/ipv6-ula-generator/locales/zh.yml
@@ -0,0 +1,13 @@
+tools:
+  ipv6-ula-generator:
+    title: IPv6 ULA 生成器
+    description: 根据 RFC4193，在您的网络中生成您自己的本地、不可路由的 IP 地址。
+
+    macAddressLabel: 'MAC 地址:'
+    macAddressPlaceholder: '输入 MAC 地址'
+    IPv6ULA: 'IPv6 ULA:'
+    firstRoutableBlock: '第一个可路由的块:'
+    lastRoutableBlock: '最后一个可路由的块:'
+
+    info: 信息
+    infoDetail: 此工具使用 IETF 建议的第一种方法，使用当前时间戳加上 MAC 地址，进行 sha1 哈希处理，并使用低 40 位生成您的随机 ULA。
diff --git a/src/tools/mac-address-generator/index.ts b/src/tools/mac-address-generator/index.ts
index 9d20fb69..be5f7ab5 100644
--- a/src/tools/mac-address-generator/index.ts
+++ b/src/tools/mac-address-generator/index.ts
@@ -1,10 +1,11 @@
 import { Devices } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'MAC address generator',
+  name: t('tools.mac-address-generator.title'),
   path: '/mac-address-generator',
-  description: 'Enter the quantity and prefix. MAC addresses will be generated in your chosen case (uppercase or lowercase)',
+  description: t('tools.mac-address-generator.description'),
   keywords: ['mac', 'address', 'generator', 'random', 'prefix'],
   component: () => import('./mac-address-generator.vue'),
   icon: Devices,
diff --git a/src/tools/mac-address-generator/locales/en.yml b/src/tools/mac-address-generator/locales/en.yml
new file mode 100644
index 00000000..3a32d590
--- /dev/null
+++ b/src/tools/mac-address-generator/locales/en.yml
@@ -0,0 +1,17 @@
+tools:
+  mac-address-generator:
+    title: MAC address generator
+    description: Enter the quantity and prefix. MAC addresses will be generated in your chosen case (uppercase or lowercase)
+
+    quantity: 'Quantity:'
+    prefixLabel: 'MAC address prefix:'
+    prefixPlaceholder: 'Set a prefix, e.g. 64:16:7F'
+    case: 'Case:'
+    separator: 'Separator:'
+    uppercase: Uppercase
+    lowercase: Lowercase
+    none: None
+
+    refreshBtn: Refresh
+    copyBtn: Copy
+    copied: MAC addresses copied to the clipboard
diff --git a/src/tools/mac-address-generator/locales/zh.yml b/src/tools/mac-address-generator/locales/zh.yml
new file mode 100644
index 00000000..abf2fb4c
--- /dev/null
+++ b/src/tools/mac-address-generator/locales/zh.yml
@@ -0,0 +1,17 @@
+tools:
+  mac-address-generator:
+    title: MAC 地址生成器
+    description: 输入数量和前缀。MAC 地址将以您选择的大小写形式（大写或小写）生成。
+
+    quantity: '数量：'
+    prefixLabel: 'MAC 地址前缀：'
+    prefixPlaceholder: '设置前缀，例如 64:16:7F'
+    case: '大小写：'
+    separator: '分隔符：'
+    uppercase: 大写
+    lowercase: 小写
+    none: 无
+
+    refreshBtn: 刷新
+    copyBtn: 复制
+    copied: MAC 地址已复制到剪贴板
diff --git a/src/tools/mac-address-generator/mac-address-generator.vue b/src/tools/mac-address-generator/mac-address-generator.vue
index 725070d3..3fef523a 100644
--- a/src/tools/mac-address-generator/mac-address-generator.vue
+++ b/src/tools/mac-address-generator/mac-address-generator.vue
@@ -5,14 +5,15 @@ import { computedRefreshable } from '@/composable/computedRefreshable';
 import { useCopy } from '@/composable/copy';
 import { usePartialMacAddressValidation } from '@/utils/macAddress';
 
+const { t } = useI18n();
 const amount = useStorage('mac-address-generator-amount', 1);
 const macAddressPrefix = useStorage('mac-address-generator-prefix', '64:16:7F');
 
 const prefixValidation = usePartialMacAddressValidation(macAddressPrefix);
 
 const casesTransformers = [
-  { label: 'Uppercase', value: (value: string) => value.toUpperCase() },
-  { label: 'Lowercase', value: (value: string) => value.toLowerCase() },
+  { label: t('tools.mac-address-generator.uppercase'), value: (value: string) => value.toUpperCase() },
+  { label: t('tools.mac-address-generator.lowercase'), value: (value: string) => value.toLowerCase() },
 ];
 const caseTransformer = ref(casesTransformers[0].value);
 
@@ -30,7 +31,7 @@ const separators = [
     value: '.',
   },
   {
-    label: 'None',
+    label: t('tools.mac-address-generator.none'),
     value: '',
   },
 ];
@@ -48,20 +49,20 @@ const [macAddresses, refreshMacAddresses] = computedRefreshable(() => {
   return ids.join('\n');
 });
 
-const { copy } = useCopy({ source: macAddresses, text: 'MAC addresses copied to the clipboard' });
+const { copy } = useCopy({ source: macAddresses, text: t('tools.mac-address-generator.copied') });
 </script>
 
 <template>
   <div flex flex-col justify-center gap-2>
     <div flex items-center>
-      <label w-150px pr-12px text-right> Quantity:</label>
+      <label w-150px pr-12px text-right> {{ t('tools.mac-address-generator.quantity') }}</label>
       <n-input-number v-model:value="amount" min="1" max="100" flex-1 />
     </div>
 
     <c-input-text
       v-model:value="macAddressPrefix"
-      label="MAC address prefix:"
-      placeholder="Set a prefix, e.g. 64:16:7F"
+      :label="t('tools.mac-address-generator.prefixLabel')"
+      :placeholder="t('tools.mac-address-generator.prefixPlaceholder')"
       clearable
       label-position="left"
       spellcheck="false"
@@ -74,7 +75,7 @@ const { copy } = useCopy({ source: macAddresses, text: 'MAC addresses copied to
     <c-buttons-select
       v-model:value="caseTransformer"
       :options="casesTransformers"
-      label="Case:"
+      :label="t('tools.mac-address-generator.case')"
       label-width="150px"
       label-align="right"
     />
@@ -82,7 +83,7 @@ const { copy } = useCopy({ source: macAddresses, text: 'MAC addresses copied to
     <c-buttons-select
       v-model:value="separator"
       :options="separators"
-      label="Separator:"
+      :label="t('tools.mac-address-generator.separator')"
       label-width="150px"
       label-align="right"
     />
@@ -93,10 +94,10 @@ const { copy } = useCopy({ source: macAddresses, text: 'MAC addresses copied to
 
     <div flex justify-center gap-2>
       <c-button data-test-id="refresh" @click="refreshMacAddresses()">
-        Refresh
+        {{ t('tools.mac-address-generator.refreshBtn') }}
       </c-button>
       <c-button @click="copy()">
-        Copy
+        {{ t('tools.mac-address-generator.copyBtn') }}
       </c-button>
     </div>
   </div>
diff --git a/src/tools/mac-address-lookup/index.ts b/src/tools/mac-address-lookup/index.ts
index 4108bc33..aae46c2c 100644
--- a/src/tools/mac-address-lookup/index.ts
+++ b/src/tools/mac-address-lookup/index.ts
@@ -1,10 +1,11 @@
 import { Devices } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'MAC address lookup',
+  name: t('tools.mac-address-lookup.title'),
   path: '/mac-address-lookup',
-  description: 'Find the vendor and manufacturer of a device by its MAC address.',
+  description: t('tools.mac-address-lookup.description'),
   keywords: ['mac', 'address', 'lookup', 'vendor', 'parser', 'manufacturer'],
   component: () => import('./mac-address-lookup.vue'),
   icon: Devices,
diff --git a/src/tools/mac-address-lookup/locales/en.yml b/src/tools/mac-address-lookup/locales/en.yml
new file mode 100644
index 00000000..5bbd884e
--- /dev/null
+++ b/src/tools/mac-address-lookup/locales/en.yml
@@ -0,0 +1,12 @@
+tools:
+  mac-address-lookup:
+    title: MAC address lookup
+    description: Find the vendor and manufacturer of a device by its MAC address.
+
+    MACAddressLabel: 'MAC address:'
+    MACAddressPlaceholder: Type a MAC address
+    vendorInfo: 'Vendor info:'
+    unknownAddress: Unknown vendor for this address
+    copyBtn: Copy vendor info
+
+    copied: Vendor info copied to the clipboard
diff --git a/src/tools/mac-address-lookup/locales/zh.yml b/src/tools/mac-address-lookup/locales/zh.yml
new file mode 100644
index 00000000..fef37c39
--- /dev/null
+++ b/src/tools/mac-address-lookup/locales/zh.yml
@@ -0,0 +1,12 @@
+tools:
+  mac-address-lookup:
+    title: MAC 地址查询
+    description: 通过 MAC 地址查找设备的供应商和制造商。
+
+    MACAddressLabel: 'MAC 地址:'
+    MACAddressPlaceholder: 输入 MAC 地址
+    vendorInfo: '供应商信息:'
+    unknownAddress: 此地址的供应商未知
+    copyBtn: 复制供应商信息
+
+    copied: 供应商信息已复制到剪贴板
diff --git a/src/tools/mac-address-lookup/mac-address-lookup.vue b/src/tools/mac-address-lookup/mac-address-lookup.vue
index ad1e3e94..bd1fd4c5 100644
--- a/src/tools/mac-address-lookup/mac-address-lookup.vue
+++ b/src/tools/mac-address-lookup/mac-address-lookup.vue
@@ -3,21 +3,22 @@ import db from 'oui-data';
 import { macAddressValidationRules } from '@/utils/macAddress';
 import { useCopy } from '@/composable/copy';
 
+const { t } = useI18n();
 const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '').toUpperCase().substring(0, 6);
 
 const macAddress = ref('20:37:06:12:34:56');
 const details = computed<string | undefined>(() => (db as Record<string, string>)[getVendorValue(macAddress.value)]);
 
-const { copy } = useCopy({ source: () => details.value ?? '', text: 'Vendor info copied to the clipboard' });
+const { copy } = useCopy({ source: () => details.value ?? '', text: t('tools.mac-address-lookup.copied') });
 </script>
 
 <template>
   <div>
     <c-input-text
       v-model:value="macAddress"
-      label="MAC address:"
+      :label="t('tools.mac-address-lookup.MACAddressLabel')"
       size="large"
-      placeholder="Type a MAC address"
+      :placeholder="t('tools.mac-address-lookup.MACAddressPlaceholder')"
       clearable
       autocomplete="off"
       autocorrect="off"
@@ -28,7 +29,7 @@ const { copy } = useCopy({ source: () => details.value ?? '', text: 'Vendor info
     />
 
     <div mb-5px>
-      Vendor info:
+      {{ t('tools.mac-address-lookup.vendorInfo') }}
     </div>
     <c-card mb-5>
       <div v-if="details">
@@ -38,13 +39,13 @@ const { copy } = useCopy({ source: () => details.value ?? '', text: 'Vendor info
       </div>
 
       <div v-else italic op-60>
-        Unknown vendor for this address
+        {{ t('tools.mac-address-lookup.unknownAddress') }}
       </div>
     </c-card>
 
     <div flex justify-center>
       <c-button :disabled="!details" @click="copy()">
-        Copy vendor info
+        {{ t('tools.mac-address-lookup.copyBtn') }}
       </c-button>
     </div>
   </div>
diff --git a/src/tools/math-evaluator/index.ts b/src/tools/math-evaluator/index.ts
index 8bf5ce2d..588b5aaf 100644
--- a/src/tools/math-evaluator/index.ts
+++ b/src/tools/math-evaluator/index.ts
@@ -1,10 +1,11 @@
 import { Math } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Math evaluator',
+  name: t('tools.math-evaluator.title'),
   path: '/math-evaluator',
-  description: 'A calculator for evaluating mathematical expressions. You can use functions like sqrt, cos, sin, abs, etc.',
+  description: t('tools.math-evaluator.description'),
   keywords: [
     'math',
     'evaluator',
diff --git a/src/tools/math-evaluator/locales/en.yml b/src/tools/math-evaluator/locales/en.yml
new file mode 100644
index 00000000..313c387b
--- /dev/null
+++ b/src/tools/math-evaluator/locales/en.yml
@@ -0,0 +1,7 @@
+tools:
+  math-evaluator:
+    title: Math evaluator
+    description: A calculator for evaluating mathematical expressions. You can use functions like sqrt, cos, sin, abs, etc.
+
+    inputPlaceholder: 'Your math expression (ex: 2*sqrt(6) )...'
+    result: Result
diff --git a/src/tools/math-evaluator/locales/zh.yml b/src/tools/math-evaluator/locales/zh.yml
new file mode 100644
index 00000000..77c32d1f
--- /dev/null
+++ b/src/tools/math-evaluator/locales/zh.yml
@@ -0,0 +1,7 @@
+tools:
+  math-evaluator:
+    title: 数学表达式求值器
+    description: 用于计算数学表达式的计算器。您可以使用函数如sqrt，cos，sin，abs等。
+
+    inputPlaceholder: '您的数学表达式（例如：2*sqrt(6)）...'
+    result: 结果
diff --git a/src/tools/math-evaluator/math-evaluator.vue b/src/tools/math-evaluator/math-evaluator.vue
index d31ed252..86f4f6f2 100644
--- a/src/tools/math-evaluator/math-evaluator.vue
+++ b/src/tools/math-evaluator/math-evaluator.vue
@@ -3,6 +3,7 @@ import { evaluate } from 'mathjs';
 
 import { withDefaultOnError } from '@/utils/defaults';
 
+const { t } = useI18n();
 const expression = ref('');
 
 const result = computed(() => withDefaultOnError(() => evaluate(expression.value) ?? '', ''));
@@ -14,14 +15,14 @@ const result = computed(() => withDefaultOnError(() => evaluate(expression.value
       v-model:value="expression"
       rows="1"
       multiline
-      placeholder="Your math expression (ex: 2*sqrt(6) )..."
+      :placeholder="t('tools.math-evaluator.inputPlaceholder')"
       raw-text
       monospace
       autofocus
       autosize
     />
 
-    <c-card v-if="result !== ''" title="Result " mt-5>
+    <c-card v-if="result !== ''" :title="t('tools.math-evaluator.result')" mt-5>
       {{ result }}
     </c-card>
   </div>
diff --git a/src/tools/percentage-calculator/index.ts b/src/tools/percentage-calculator/index.ts
index 736f5706..aaaeb19f 100644
--- a/src/tools/percentage-calculator/index.ts
+++ b/src/tools/percentage-calculator/index.ts
@@ -1,10 +1,11 @@
 import { Percentage } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Percentage calculator',
+  name: t('tools.percentage-calculator.title'),
   path: '/percentage-calculator',
-  description: 'Easily calculate percentages from a value to another value, or from a percentage to a value.',
+  description: t('tools.percentage-calculator.description'),
   keywords: ['percentage', 'calculator', 'calculate', 'value', 'number', '%'],
   component: () => import('./percentage-calculator.vue'),
   icon: Percentage,
diff --git a/src/tools/percentage-calculator/locales/en.yml b/src/tools/percentage-calculator/locales/en.yml
new file mode 100644
index 00000000..1ea6dc23
--- /dev/null
+++ b/src/tools/percentage-calculator/locales/en.yml
@@ -0,0 +1,13 @@
+tools:
+  percentage-calculator:
+    title: Percentage calculator
+    description: Easily calculate percentages from a value to another value, or from a percentage to a value.
+
+    whatIs: What is
+    percentageX: '% of'
+    XIsWhatPercentOfY: X is what percent of Y
+    percentOf: is what percent of
+    percentage: What is the percentage increase/decrease
+    from: From
+    to: To
+    result: Result
diff --git a/src/tools/percentage-calculator/locales/zh.yml b/src/tools/percentage-calculator/locales/zh.yml
new file mode 100644
index 00000000..e51ea79e
--- /dev/null
+++ b/src/tools/percentage-calculator/locales/zh.yml
@@ -0,0 +1,13 @@
+tools:
+  percentage-calculator:
+    title: 百分比计算器
+    description: 轻松计算从一个值到另一个值的百分比，或从一个百分比到一个值。
+
+    whatIs: 什么是
+    percentageX: '% 对于'
+    XIsWhatPercentOfY: X 是 Y 的百分之多少
+    percentOf: 是百分之几
+    percentage: 百分比的增长/减少是多少
+    from: 从
+    to: 到
+    result: 结果
diff --git a/src/tools/percentage-calculator/percentage-calculator.vue b/src/tools/percentage-calculator/percentage-calculator.vue
index c0362d20..79fba0e7 100644
--- a/src/tools/percentage-calculator/percentage-calculator.vue
+++ b/src/tools/percentage-calculator/percentage-calculator.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const { t } = useI18n();
 const percentageX = ref();
 const percentageY = ref();
 const percentageResult = computed(() => {
@@ -34,43 +35,43 @@ const percentageIncreaseDecrease = computed(() => {
     <div style="margin: 0 auto; max-width: 600px">
       <c-card mb-3>
         <div mb-3 sm:hidden>
-          What is
+          {{ t('tools.percentage-calculator.whatIs') }}
         </div>
         <div flex gap-2>
           <div hidden pt-1 sm:block style="min-width: 48px;">
-            What is
+            {{ t('tools.percentage-calculator.whatIs') }}
           </div>
           <n-input-number v-model:value="percentageX" data-test-id="percentageX" placeholder="X" />
           <div min-w-fit pt-1>
-            % of
+            {{ t('tools.percentage-calculator.percentageX') }}
           </div>
           <n-input-number v-model:value="percentageY" data-test-id="percentageY" placeholder="Y" />
-          <input-copyable v-model:value="percentageResult" data-test-id="percentageResult" readonly placeholder="Result" style="max-width: 150px;" />
+          <input-copyable v-model:value="percentageResult" data-test-id="percentageResult" readonly :placeholder="t('tools.percentage-calculator.result')" style="max-width: 150px;" />
         </div>
       </c-card>
 
       <c-card mb-3>
         <div mb-3 sm:hidden>
-          X is what percent of Y
+          {{ t('tools.percentage-calculator.XIsWhatPercentOfY') }}
         </div>
         <div flex gap-2>
           <n-input-number v-model:value="numberX" data-test-id="numberX" placeholder="X" />
           <div hidden min-w-fit pt-1 sm:block>
-            is what percent of
+            {{ t('tools.percentage-calculator.percentOf') }}
           </div>
           <n-input-number v-model:value="numberY" data-test-id="numberY" placeholder="Y" />
-          <input-copyable v-model:value="numberResult" data-test-id="numberResult" readonly placeholder="Result" style="max-width: 150px;" />
+          <input-copyable v-model:value="numberResult" data-test-id="numberResult" readonly :placeholder="t('tools.percentage-calculator.result')" style="max-width: 150px;" />
         </div>
       </c-card>
 
       <c-card mb-3>
         <div mb-3>
-          What is the percentage increase/decrease
+          {{ t('tools.percentage-calculator.percentage') }}
         </div>
         <div flex gap-2>
-          <n-input-number v-model:value="numberFrom" data-test-id="numberFrom" placeholder="From" />
-          <n-input-number v-model:value="numberTo" data-test-id="numberTo" placeholder="To" />
-          <input-copyable v-model:value="percentageIncreaseDecrease" data-test-id="percentageIncreaseDecrease" readonly placeholder="Result" style="max-width: 150px;" />
+          <n-input-number v-model:value="numberFrom" data-test-id="numberFrom" :placeholder="t('tools.percentage-calculator.from')" />
+          <n-input-number v-model:value="numberTo" data-test-id="numberTo" :placeholder="t('tools.percentage-calculator.to')" />
+          <input-copyable v-model:value="percentageIncreaseDecrease" data-test-id="percentageIncreaseDecrease" readonly :placeholder="t('tools.percentage-calculator.result')" style="max-width: 150px;" />
         </div>
       </c-card>
     </div>

From ae71454a382f1673124d6a2df1722ee04fd822fa Mon Sep 17 00:00:00 2001
From: Amery2010 <amery@xiangfa.org>
Date: Wed, 21 Feb 2024 15:56:48 +0800
Subject: [PATCH 8/8] feat(translate): Complete translation of all tools

---
 .../benchmark-builder/benchmark-builder.vue   | 29 ++++++++---------
 .../benchmark-builder/dynamic-values.vue      |  7 +++--
 src/tools/benchmark-builder/index.ts          |  5 +--
 src/tools/benchmark-builder/locales/en.yml    | 26 ++++++++++++++++
 src/tools/benchmark-builder/locales/zh.yml    | 26 ++++++++++++++++
 src/tools/chronometer/chronometer.vue         |  7 +++--
 src/tools/chronometer/index.ts                |  5 +--
 src/tools/chronometer/locales/en.yml          |  8 +++++
 src/tools/chronometer/locales/zh.yml          |  8 +++++
 src/tools/emoji-picker/emoji-card.vue         |  7 +++--
 src/tools/emoji-picker/emoji-picker.vue       |  7 +++--
 src/tools/emoji-picker/index.ts               |  5 +--
 src/tools/emoji-picker/locales/en.yml         | 12 +++++++
 src/tools/emoji-picker/locales/zh.yml         | 12 +++++++
 .../iban-validator-and-parser.service.ts      | 17 +++++-----
 .../iban-validator-and-parser.vue             | 17 +++++-----
 src/tools/iban-validator-and-parser/index.ts  |  5 +--
 .../iban-validator-and-parser/locales/en.yml  | 22 +++++++++++++
 .../iban-validator-and-parser/locales/zh.yml  | 22 +++++++++++++
 src/tools/lorem-ipsum-generator/index.ts      |  6 ++--
 .../lorem-ipsum-generator/locales/en.yml      | 14 +++++++++
 .../lorem-ipsum-generator/locales/zh.yml      | 14 +++++++++
 .../lorem-ipsum-generator.vue                 | 17 +++++-----
 src/tools/numeronym-generator/index.ts        |  5 +--
 src/tools/numeronym-generator/locales/en.yml  |  7 +++++
 src/tools/numeronym-generator/locales/zh.yml  |  7 +++++
 .../numeronym-generator.vue                   |  5 +--
 src/tools/phone-parser-and-formatter/index.ts |  6 ++--
 .../phone-parser-and-formatter/locales/en.yml | 31 +++++++++++++++++++
 .../phone-parser-and-formatter/locales/zh.yml | 31 +++++++++++++++++++
 .../phone-parser-and-formatter.models.ts      | 23 +++++++-------
 .../phone-parser-and-formatter.vue            | 31 ++++++++++---------
 src/tools/string-obfuscator/index.ts          |  5 +--
 src/tools/string-obfuscator/locales/en.yml    | 10 ++++++
 src/tools/string-obfuscator/locales/zh.yml    | 10 ++++++
 .../string-obfuscator/string-obfuscator.vue   |  9 +++---
 src/tools/temperature-converter/index.ts      |  6 ++--
 .../temperature-converter/locales/en.yml      | 13 ++++++++
 .../temperature-converter/locales/zh.yml      | 13 ++++++++
 .../temperature-converter.vue                 | 17 +++++-----
 src/tools/text-diff/index.ts                  |  5 +--
 src/tools/text-diff/locales/en.yml            |  4 +++
 src/tools/text-diff/locales/zh.yml            |  4 +++
 src/tools/text-statistics/index.ts            |  5 +--
 src/tools/text-statistics/locales/en.yml      | 10 ++++++
 src/tools/text-statistics/locales/zh.yml      | 10 ++++++
 src/tools/text-statistics/text-statistics.vue | 11 ++++---
 47 files changed, 456 insertions(+), 120 deletions(-)
 create mode 100644 src/tools/benchmark-builder/locales/en.yml
 create mode 100644 src/tools/benchmark-builder/locales/zh.yml
 create mode 100644 src/tools/chronometer/locales/en.yml
 create mode 100644 src/tools/chronometer/locales/zh.yml
 create mode 100644 src/tools/emoji-picker/locales/en.yml
 create mode 100644 src/tools/emoji-picker/locales/zh.yml
 create mode 100644 src/tools/iban-validator-and-parser/locales/en.yml
 create mode 100644 src/tools/iban-validator-and-parser/locales/zh.yml
 create mode 100644 src/tools/lorem-ipsum-generator/locales/en.yml
 create mode 100644 src/tools/lorem-ipsum-generator/locales/zh.yml
 create mode 100644 src/tools/numeronym-generator/locales/en.yml
 create mode 100644 src/tools/numeronym-generator/locales/zh.yml
 create mode 100644 src/tools/phone-parser-and-formatter/locales/en.yml
 create mode 100644 src/tools/phone-parser-and-formatter/locales/zh.yml
 create mode 100644 src/tools/string-obfuscator/locales/en.yml
 create mode 100644 src/tools/string-obfuscator/locales/zh.yml
 create mode 100644 src/tools/temperature-converter/locales/en.yml
 create mode 100644 src/tools/temperature-converter/locales/zh.yml
 create mode 100644 src/tools/text-diff/locales/en.yml
 create mode 100644 src/tools/text-diff/locales/zh.yml
 create mode 100644 src/tools/text-statistics/locales/en.yml
 create mode 100644 src/tools/text-statistics/locales/zh.yml

diff --git a/src/tools/benchmark-builder/benchmark-builder.vue b/src/tools/benchmark-builder/benchmark-builder.vue
index 93911428..e4968ee9 100644
--- a/src/tools/benchmark-builder/benchmark-builder.vue
+++ b/src/tools/benchmark-builder/benchmark-builder.vue
@@ -7,6 +7,7 @@ import { arrayToMarkdownTable, computeAverage, computeVariance } from './benchma
 import DynamicValues from './dynamic-values.vue';
 import { useCopy } from '@/composable/copy';
 
+const { t } = useI18n();
 const suites = useStorage('benchmark-builder:suites', [
   { title: 'Suite 1', data: [5, 10] },
   { title: 'Suite 2', data: [8, 12] },
@@ -51,11 +52,11 @@ const results = computed(() => {
 const { copy } = useCopy({ createToast: false });
 
 const header = {
-  position: 'Position',
-  title: 'Suite',
-  size: 'Samples',
-  mean: 'Mean',
-  variance: 'Variance',
+  position: t('tools.benchmark-builder.header.position'),
+  title: t('tools.benchmark-builder.header.title'),
+  size: t('tools.benchmark-builder.header.size'),
+  mean: t('tools.benchmark-builder.header.mean'),
+  variance: t('tools.benchmark-builder.header.variance'),
 };
 
 function copyAsMarkdown() {
@@ -86,13 +87,13 @@ function copyAsBulletList() {
           <c-input-text
             v-model:value="suite.title"
             label-position="left"
-            label="Suite name"
-            placeholder="Suite name..."
+            :label="t('tools.benchmark-builder.suiteNameLabel')"
+            :placeholder="t('tools.benchmark-builder.suiteNamePlaceholder')"
             clearable
           />
 
           <n-divider />
-          <n-form-item label="Suite values" :show-feedback="false">
+          <n-form-item :label="t('tools.benchmark-builder.suiteValues')" :show-feedback="false">
             <DynamicValues v-model:values="suite.data" />
           </n-form-item>
         </c-card>
@@ -100,14 +101,14 @@ function copyAsBulletList() {
         <div flex justify-center>
           <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
             <n-icon :component="Trash" depth="3" mr-2 size="18" />
-            Delete suite
+            {{ t('tools.benchmark-builder.deleteSuite') }}
           </c-button>
           <c-button
             variant="text"
             @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })"
           >
             <n-icon :component="Plus" depth="3" mr-2 size="18" />
-            Add suite
+            {{ t('tools.benchmark-builder.addSuite') }}
           </c-button>
         </div>
       </div>
@@ -117,7 +118,7 @@ function copyAsBulletList() {
   <div style="flex: 0 0 100%">
     <div style="max-width: 600px; margin: 0 auto">
       <div mx-auto max-w-sm flex justify-center gap-3>
-        <c-input-text v-model:value="unit" placeholder="Unit (eg: ms)" label="Unit" label-position="left" mb-4 />
+        <c-input-text v-model:value="unit" :placeholder="t('tools.benchmark-builder.unitPlaceholder')" :label="t('tools.benchmark-builder.unitLabel')" label-position="left" mb-4 />
 
         <c-button
           @click="
@@ -127,7 +128,7 @@ function copyAsBulletList() {
             ]
           "
         >
-          Reset suites
+          {{ t('tools.benchmark-builder.resetSuites') }}
         </c-button>
       </div>
 
@@ -135,10 +136,10 @@ function copyAsBulletList() {
 
       <div mt-5 flex justify-center gap-3>
         <c-button @click="copyAsMarkdown()">
-          Copy as markdown table
+          {{ t('tools.benchmark-builder.copyAsMarkdown') }}
         </c-button>
         <c-button @click="copyAsBulletList()">
-          Copy as bullet list
+          {{ t('tools.benchmark-builder.copyAsBulletList') }}
         </c-button>
       </div>
     </div>
diff --git a/src/tools/benchmark-builder/dynamic-values.vue b/src/tools/benchmark-builder/dynamic-values.vue
index e048ef99..1abb5f89 100644
--- a/src/tools/benchmark-builder/dynamic-values.vue
+++ b/src/tools/benchmark-builder/dynamic-values.vue
@@ -10,6 +10,7 @@ const emit = defineEmits(['update:values']);
 
 const refs = useTemplateRefsList<typeof NInputNumber>();
 
+const { t } = useI18n();
 const values = useVModel(props, 'values', emit);
 
 async function addValue() {
@@ -35,11 +36,11 @@ function onInputEnter(index: number) {
         :ref="refs.set"
         v-model:value="values[index]"
         :show-button="false"
-        placeholder="Set your measure..."
+        :placeholder="t('tools.benchmark-builder.setYourMeasure')"
         autofocus
         @keydown.enter="onInputEnter(index)"
       />
-      <c-tooltip tooltip="Delete this value">
+      <c-tooltip :tooltip="t('tools.benchmark-builder.deleteThisValue')">
         <c-button circle variant="text" @click="values.splice(index, 1)">
           <n-icon :component="Trash" depth="3" size="18" />
         </c-button>
@@ -48,7 +49,7 @@ function onInputEnter(index: number) {
 
     <c-button @click="addValue">
       <n-icon :component="Plus" depth="3" mr-2 size="18" />
-      Add a measure
+      {{ t('tools.benchmark-builder.addAMeasure') }}
     </c-button>
   </div>
 </template>
diff --git a/src/tools/benchmark-builder/index.ts b/src/tools/benchmark-builder/index.ts
index 51eb8058..788f0f1a 100644
--- a/src/tools/benchmark-builder/index.ts
+++ b/src/tools/benchmark-builder/index.ts
@@ -1,10 +1,11 @@
 import { SpeedFilled } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Benchmark builder',
+  name: t('tools.benchmark-builder.title'),
   path: '/benchmark-builder',
-  description: 'Easily compare execution time of tasks with this very simple online benchmark builder.',
+  description: t('tools.benchmark-builder.description'),
   keywords: ['benchmark', 'builder', 'execution', 'duration', 'mean', 'variance'],
   component: () => import('./benchmark-builder.vue'),
   icon: SpeedFilled,
diff --git a/src/tools/benchmark-builder/locales/en.yml b/src/tools/benchmark-builder/locales/en.yml
new file mode 100644
index 00000000..650d52a6
--- /dev/null
+++ b/src/tools/benchmark-builder/locales/en.yml
@@ -0,0 +1,26 @@
+tools:
+  benchmark-builder:
+    title: Benchmark builder
+    description: Easily compare execution time of tasks with this very simple online benchmark builder.
+
+    header:
+      position: Position
+      title: Suite
+      size: Samples
+      mean: Mean
+      variance: Variance
+    suiteNameLabel: Suite name
+    suiteNamePlaceholder: Suite name...
+    suiteValues: Suite values
+    suiteTitle: Suite {index}
+    deleteSuite: Delete suite
+    addSuite: Add suite
+    resetSuites: Reset suites
+    unitLabel: Unit
+    unitPlaceholder: 'Unit (eg: ms)'
+    setYourMeasure: Set your measure...
+    deleteThisValue: Delete this value
+    addAMeasure: Add a measure
+
+    copyAsMarkdown: Copy as markdown table
+    copyAsBulletList: Copy as bullet list
diff --git a/src/tools/benchmark-builder/locales/zh.yml b/src/tools/benchmark-builder/locales/zh.yml
new file mode 100644
index 00000000..739cecf7
--- /dev/null
+++ b/src/tools/benchmark-builder/locales/zh.yml
@@ -0,0 +1,26 @@
+tools:
+  benchmark-builder:
+    title: 基准测试生成器
+    description: 使用这个非常简单的在线基准测试生成器轻松比较任务的执行时间。
+
+    header:
+      position: 位置
+      title: 套件
+      size: 样本数
+      mean: 平均值
+      variance: 方差
+    suiteNameLabel: 套件名称
+    suiteNamePlaceholder: 输入套件名称...
+    suiteValues: 套件数值
+    suiteTitle: 套件 {index}
+    deleteSuite: 删除套件
+    addSuite: 添加套件
+    resetSuites: 重置套件
+    unitLabel: 单位
+    unitPlaceholder: '单位（例如：毫秒）'
+    setYourMeasure: 设置您的度量...
+    deleteThisValue: 删除此数值
+    addAMeasure: 添加一个度量
+
+    copyAsMarkdown: 复制为 markdown 表格
+    copyAsBulletList: 复制为项目列表
diff --git a/src/tools/chronometer/chronometer.vue b/src/tools/chronometer/chronometer.vue
index 9ed6fead..f15718b7 100644
--- a/src/tools/chronometer/chronometer.vue
+++ b/src/tools/chronometer/chronometer.vue
@@ -3,6 +3,7 @@ import { useRafFn } from '@vueuse/core';
 
 import { formatMs } from './chronometer.service';
 
+const { t } = useI18n();
 const isRunning = ref(false);
 const counter = ref(0);
 
@@ -37,14 +38,14 @@ function pause() {
     </c-card>
     <div mt-5 flex justify-center gap-3>
       <c-button v-if="!isRunning" type="primary" @click="resume">
-        Start
+        {{ t('tools.chronometer.start') }}
       </c-button>
       <c-button v-else type="warning" @click="pause">
-        Stop
+        {{ t('tools.chronometer.stop') }}
       </c-button>
 
       <c-button @click="counter = 0">
-        Reset
+        {{ t('tools.chronometer.reset') }}
       </c-button>
     </div>
   </div>
diff --git a/src/tools/chronometer/index.ts b/src/tools/chronometer/index.ts
index 424d03dc..de76fb41 100644
--- a/src/tools/chronometer/index.ts
+++ b/src/tools/chronometer/index.ts
@@ -1,10 +1,11 @@
 import { TimerOutlined } from '@vicons/material';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Chronometer',
+  name: t('tools.chronometer.title'),
   path: '/chronometer',
-  description: 'Monitor the duration of a thing. Basically a chronometer with simple chronometer features.',
+  description: t('tools.chronometer.description'),
   keywords: ['chronometer', 'time', 'lap', 'duration', 'measure', 'pause', 'resume', 'stopwatch'],
   component: () => import('./chronometer.vue'),
   icon: TimerOutlined,
diff --git a/src/tools/chronometer/locales/en.yml b/src/tools/chronometer/locales/en.yml
new file mode 100644
index 00000000..16ec31fb
--- /dev/null
+++ b/src/tools/chronometer/locales/en.yml
@@ -0,0 +1,8 @@
+tools:
+  chronometer:
+    title: Chronometer
+    description: Monitor the duration of a thing. Basically a chronometer with simple chronometer features.
+
+    start: Start
+    stop: Stop
+    reset: Reset
diff --git a/src/tools/chronometer/locales/zh.yml b/src/tools/chronometer/locales/zh.yml
new file mode 100644
index 00000000..6eee8617
--- /dev/null
+++ b/src/tools/chronometer/locales/zh.yml
@@ -0,0 +1,8 @@
+tools:
+  chronometer:
+    title: 计时器
+    description: 监控事物的持续时间。基本上是一个具有简单计时器功能的计时器。
+
+    start: 开始
+    stop: 停止
+    reset: 重置
diff --git a/src/tools/emoji-picker/emoji-card.vue b/src/tools/emoji-picker/emoji-card.vue
index e2977862..519cab4f 100644
--- a/src/tools/emoji-picker/emoji-card.vue
+++ b/src/tools/emoji-picker/emoji-card.vue
@@ -5,12 +5,13 @@ import { useCopy } from '@/composable/copy';
 const props = (defineProps<{ emojiInfo: EmojiInfo }>());
 const { emojiInfo } = toRefs(props);
 
+const { t } = useI18n();
 const { copy } = useCopy();
 </script>
 
 <template>
   <c-card flex items-center gap-3 important:py-8px important:pl-10px important:pr-5px>
-    <div cursor-pointer text-30px @click="copy(emojiInfo.emoji, { notificationMessage: `Emoji ${emojiInfo.emoji} copied to the clipboard` })">
+    <div cursor-pointer text-30px @click="copy(emojiInfo.emoji, { notificationMessage: t('tools.emoji-picker.emojiCopied', { emoji: emojiInfo.emoji }) })">
       {{ emojiInfo.emoji }}
     </div>
 
@@ -30,10 +31,10 @@ const { copy } = useCopy();
       </div> -->
 
       <div flex gap-2 text-xs font-mono op-70>
-        <span cursor-pointer transition hover:text-primary @click="copy(emojiInfo.codePoints, { notificationMessage: `Code points '${emojiInfo.codePoints}' copied to the clipboard` })">
+        <span cursor-pointer transition hover:text-primary @click="copy(emojiInfo.codePoints, { notificationMessage: t('tools.emoji-picker.codePointsCopied', { codePoints: emojiInfo.codePoints }) })">
           {{ emojiInfo.codePoints }}
         </span>
-        <span cursor-pointer truncate transition hover:text-primary @click="copy(emojiInfo.unicode, { notificationMessage: `Unicode '${emojiInfo.unicode}' copied to the clipboard` })">
+        <span cursor-pointer truncate transition hover:text-primary @click="copy(emojiInfo.unicode, { notificationMessage: t('tools.emoji-picker.unicodeCopied', { unicode: emojiInfo.unicode }) })">
           {{ emojiInfo.unicode }}
         </span>
       </div>
diff --git a/src/tools/emoji-picker/emoji-picker.vue b/src/tools/emoji-picker/emoji-picker.vue
index 750695f5..92654f8e 100644
--- a/src/tools/emoji-picker/emoji-picker.vue
+++ b/src/tools/emoji-picker/emoji-picker.vue
@@ -5,6 +5,7 @@ import _ from 'lodash';
 import type { EmojiInfo } from './emoji.types';
 import { useFuzzySearch } from '@/composable/fuzzySearch';
 
+const { t } = useI18n();
 const escapeUnicode = ({ emoji }: { emoji: string }) => emoji.split('').map(unit => `\\u${unit.charCodeAt(0).toString(16).padStart(4, '0')}`).join('');
 const getEmojiCodePoints = ({ emoji }: { emoji: string }) => emoji.codePointAt(0) ? `0x${emoji.codePointAt(0)?.toString(16)}` : undefined;
 
@@ -42,7 +43,7 @@ const { searchResult } = useFuzzySearch({
     <div flex items-center gap-3>
       <c-input-text
         v-model:value="searchQuery"
-        placeholder="Search emojis (e.g. 'smile')..."
+        :placeholder="t('tools.emoji-picker.searchPlaceholder')"
         mx-auto max-w-600px
       >
         <template #prefix>
@@ -58,12 +59,12 @@ const { searchResult } = useFuzzySearch({
         text-20px
         font-bold
       >
-        No results
+        {{ t('tools.emoji-picker.noResults') }}
       </div>
 
       <div v-else>
         <div mt-4 text-20px font-bold>
-          Search result
+          {{ t('tools.emoji-picker.searchResult') }}
         </div>
 
         <emoji-grid :emoji-infos="searchResult" />
diff --git a/src/tools/emoji-picker/index.ts b/src/tools/emoji-picker/index.ts
index ef01b2de..bc8e7580 100644
--- a/src/tools/emoji-picker/index.ts
+++ b/src/tools/emoji-picker/index.ts
@@ -1,10 +1,11 @@
 import { MoodSmile } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Emoji picker',
+  name: t('tools.emoji-picker.title'),
   path: '/emoji-picker',
-  description: 'Copy and paste emojis easily and get the unicode and code points value of each emoji.',
+  description: t('tools.emoji-picker.description'),
   keywords: ['emoji', 'picker', 'unicode', 'copy', 'paste'],
   component: () => import('./emoji-picker.vue'),
   icon: MoodSmile,
diff --git a/src/tools/emoji-picker/locales/en.yml b/src/tools/emoji-picker/locales/en.yml
new file mode 100644
index 00000000..45cbf11c
--- /dev/null
+++ b/src/tools/emoji-picker/locales/en.yml
@@ -0,0 +1,12 @@
+tools:
+  emoji-picker:
+    title: Emoji picker
+    description: Copy and paste emojis easily and get the unicode and code points value of each emoji.
+
+    searchPlaceholder: Search emojis (e.g. "smile")...
+    noResults: No results
+    searchResult: Search result
+
+    emojiCopied: Emoji {emoji} copied to the clipboard
+    codePointsCopied: Code points {codePoints} copied to the clipboard
+    unicodeCopied: Unicode {unicode} copied to the clipboard
diff --git a/src/tools/emoji-picker/locales/zh.yml b/src/tools/emoji-picker/locales/zh.yml
new file mode 100644
index 00000000..f1d5fc9f
--- /dev/null
+++ b/src/tools/emoji-picker/locales/zh.yml
@@ -0,0 +1,12 @@
+tools:
+  emoji-picker:
+    title: 表情选择器
+    description: 轻松复制和粘贴表情符号，并获取每个表情符号的 Unicode 和代码点值。
+
+    searchPlaceholder: 搜索表情符号（例如“笑脸”）...
+    noResults: 没有结果
+    searchResult: 搜索结果
+
+    emojiCopied: 表情符号 {emoji} 已复制到剪贴板
+    codePointsCopied: 代码点 {codePoints} 已复制到剪贴板
+    unicodeCopied: Unicode {unicode} 已复制到剪贴板
diff --git a/src/tools/iban-validator-and-parser/iban-validator-and-parser.service.ts b/src/tools/iban-validator-and-parser/iban-validator-and-parser.service.ts
index bde71dba..7d4a8bd2 100644
--- a/src/tools/iban-validator-and-parser/iban-validator-and-parser.service.ts
+++ b/src/tools/iban-validator-and-parser/iban-validator-and-parser.service.ts
@@ -1,16 +1,17 @@
 import { ValidationErrorsIBAN } from 'ibantools';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export { getFriendlyErrors };
 
 const ibanErrorToMessage = {
-  [ValidationErrorsIBAN.NoIBANProvided]: 'No IBAN provided',
-  [ValidationErrorsIBAN.NoIBANCountry]: 'No IBAN country',
-  [ValidationErrorsIBAN.WrongBBANLength]: 'Wrong BBAN length',
-  [ValidationErrorsIBAN.WrongBBANFormat]: 'Wrong BBAN format',
-  [ValidationErrorsIBAN.ChecksumNotNumber]: 'Checksum is not a number',
-  [ValidationErrorsIBAN.WrongIBANChecksum]: 'Wrong IBAN checksum',
-  [ValidationErrorsIBAN.WrongAccountBankBranchChecksum]: 'Wrong account bank branch checksum',
-  [ValidationErrorsIBAN.QRIBANNotAllowed]: 'QR-IBAN not allowed',
+  [ValidationErrorsIBAN.NoIBANProvided]: t('tools.iban-validator-and-parser.noIBANProvided'),
+  [ValidationErrorsIBAN.NoIBANCountry]: t('tools.iban-validator-and-parser.noIBANCountry'),
+  [ValidationErrorsIBAN.WrongBBANLength]: t('tools.iban-validator-and-parser.wrongBBANLength'),
+  [ValidationErrorsIBAN.WrongBBANFormat]: t('tools.iban-validator-and-parser.wrongBBANFormat'),
+  [ValidationErrorsIBAN.ChecksumNotNumber]: t('tools.iban-validator-and-parser.checksumNotNumber'),
+  [ValidationErrorsIBAN.WrongIBANChecksum]: t('tools.iban-validator-and-parser.wrongIBANChecksum'),
+  [ValidationErrorsIBAN.WrongAccountBankBranchChecksum]: t('tools.iban-validator-and-parser.wrongAccountBankBranchChecksum'),
+  [ValidationErrorsIBAN.QRIBANNotAllowed]: t('tools.iban-validator-and-parser.QRIBANNotAllowed'),
 };
 
 function getFriendlyErrors(errorCodes: ValidationErrorsIBAN[]) {
diff --git a/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue b/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue
index 6844dc5a..faafa626 100644
--- a/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue
+++ b/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue
@@ -3,6 +3,7 @@ import { extractIBAN, friendlyFormatIBAN, isQRIBAN, validateIBAN } from 'ibantoo
 import { getFriendlyErrors } from './iban-validator-and-parser.service';
 import type { CKeyValueListItems } from '@/ui/c-key-value-list/c-key-value-list.types';
 
+const { t } = useI18n();
 const rawIban = ref('');
 
 const ibanInfo = computed<CKeyValueListItems>(() => {
@@ -19,31 +20,31 @@ const ibanInfo = computed<CKeyValueListItems>(() => {
   return [
 
     {
-      label: 'Is IBAN valid ?',
+      label: t('tools.iban-validator-and-parser.isIbanValid'),
       value: isIbanValid,
       showCopyButton: false,
     },
     {
-      label: 'IBAN errors',
+      label: t('tools.iban-validator-and-parser.IBANErrors'),
       value: errors.length === 0 ? undefined : errors,
       hideOnNil: true,
       showCopyButton: false,
     },
     {
-      label: 'Is IBAN a QR-IBAN ?',
+      label: t('tools.iban-validator-and-parser.isQRIBAN'),
       value: isQRIBAN(iban),
       showCopyButton: false,
     },
     {
-      label: 'Country code',
+      label: t('tools.iban-validator-and-parser.countryCode'),
       value: countryCode,
     },
     {
-      label: 'BBAN',
+      label: t('tools.iban-validator-and-parser.BBAN'),
       value: bban,
     },
     {
-      label: 'IBAN friendly format',
+      label: t('tools.iban-validator-and-parser.IBANFriendlyFormat'),
       value: friendlyFormatIBAN(iban),
     },
   ];
@@ -58,13 +59,13 @@ const ibanExamples = [
 
 <template>
   <div>
-    <c-input-text v-model:value="rawIban" placeholder="Enter an IBAN to check for validity..." test-id="iban-input" />
+    <c-input-text v-model:value="rawIban" :placeholder="t('tools.iban-validator-and-parser.inputPlaceholder')" test-id="iban-input" />
 
     <c-card v-if="ibanInfo.length > 0" mt-5>
       <c-key-value-list :items="ibanInfo" data-test-id="iban-info" />
     </c-card>
 
-    <c-card title="Valid IBAN examples" mt-5>
+    <c-card :title="t('tools.iban-validator-and-parser.ibanExamples')" mt-5>
       <div v-for="iban in ibanExamples" :key="iban">
         <c-text-copyable :value="iban" font-mono :displayed-value="friendlyFormatIBAN(iban)" />
       </div>
diff --git a/src/tools/iban-validator-and-parser/index.ts b/src/tools/iban-validator-and-parser/index.ts
index b0cae50d..7c23c83b 100644
--- a/src/tools/iban-validator-and-parser/index.ts
+++ b/src/tools/iban-validator-and-parser/index.ts
@@ -1,10 +1,11 @@
 import { defineTool } from '../tool';
 import Bank from '~icons/mdi/bank';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'IBAN validator and parser',
+  name: t('tools.iban-validator-and-parser.title'),
   path: '/iban-validator-and-parser',
-  description: 'Validate and parse IBAN numbers. Check if IBAN is valid and get the country, BBAN, if it is a QR-IBAN and the IBAN friendly format.',
+  description: t('tools.iban-validator-and-parser.description'),
   keywords: ['iban', 'validator', 'and', 'parser', 'bic', 'bank'],
   component: () => import('./iban-validator-and-parser.vue'),
   icon: Bank,
diff --git a/src/tools/iban-validator-and-parser/locales/en.yml b/src/tools/iban-validator-and-parser/locales/en.yml
new file mode 100644
index 00000000..b4fe9ce9
--- /dev/null
+++ b/src/tools/iban-validator-and-parser/locales/en.yml
@@ -0,0 +1,22 @@
+tools:
+  iban-validator-and-parser:
+    title: IBAN validator and parser
+    description: Validate and parse IBAN numbers. Check if IBAN is valid and get the country, BBAN, if it is a QR-IBAN and the IBAN friendly format.
+
+    inputPlaceholder: Enter an IBAN to check for validity...
+    ibanExamples: Valid IBAN examples
+
+    isIbanValid: Is IBAN valid ?
+    IBANErrors: IBAN errors
+    isQRIBAN: Is IBAN a QR-IBAN ?
+    countryCode: Country code
+    BBAN: BBAN
+    IBANFriendlyFormat: IBAN friendly format
+    noIBANProvided: No IBAN provided
+    noIBANCountry: No IBAN country
+    wrongBBANLength: Wrong BBAN length
+    wrongBBANFormat: Wrong BBAN format
+    checksumNotNumber: Checksum is not a number
+    wrongIBANChecksum: Wrong IBAN checksum
+    wrongAccountBankBranchChecksum: Wrong account bank branch checksum
+    QRIBANNotAllowed: QR-IBAN not allowed
diff --git a/src/tools/iban-validator-and-parser/locales/zh.yml b/src/tools/iban-validator-and-parser/locales/zh.yml
new file mode 100644
index 00000000..f0041ac6
--- /dev/null
+++ b/src/tools/iban-validator-and-parser/locales/zh.yml
@@ -0,0 +1,22 @@
+tools:
+  iban-validator-and-parser:
+    title: IBAN 验证器和解析器
+    description: 验证和解析 IBAN 号码。检查 IBAN 是否有效，并获取国家、BBAN、是否为 QR-IBAN 和 IBAN 友好格式。
+
+    inputPlaceholder: 输入要检查有效性的 IBAN…
+    ibanExamples: 有效的 IBAN 示例
+
+    isIbanValid: IBAN 是否有效？
+    IBANErrors: IBAN 错误
+    isQRIBAN: 是否为 QR-IBAN？
+    countryCode: 国家代码
+    BBAN: BBAN
+    IBANFriendlyFormat: IBAN 友好格式
+    noIBANProvided: 未提供 IBAN
+    noIBANCountry: 未提供 IBAN 国家
+    wrongBBANLength: BBAN 长度错误
+    wrongBBANFormat: BBAN 格式错误
+    checksumNotNumber: 校验和不是数字
+    wrongIBANChecksum: IBAN 校验和错误
+    wrongAccountBankBranchChecksum: 帐户银行分行校验和错误
+    QRIBANNotAllowed: 不允许 QR-IBAN
diff --git a/src/tools/lorem-ipsum-generator/index.ts b/src/tools/lorem-ipsum-generator/index.ts
index 1767d85d..4be3e3b6 100644
--- a/src/tools/lorem-ipsum-generator/index.ts
+++ b/src/tools/lorem-ipsum-generator/index.ts
@@ -1,11 +1,11 @@
 import { AlignJustified } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Lorem ipsum generator',
+  name: t('tools.lorem-ipsum-generator.title'),
   path: '/lorem-ipsum-generator',
-  description:
-    'Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content',
+  description: t('tools.lorem-ipsum-generator.description'),
   keywords: ['lorem', 'ipsum', 'dolor', 'sit', 'amet', 'placeholder', 'text', 'filler', 'random', 'generator'],
   component: () => import('./lorem-ipsum-generator.vue'),
   icon: AlignJustified,
diff --git a/src/tools/lorem-ipsum-generator/locales/en.yml b/src/tools/lorem-ipsum-generator/locales/en.yml
new file mode 100644
index 00000000..2a8c762a
--- /dev/null
+++ b/src/tools/lorem-ipsum-generator/locales/en.yml
@@ -0,0 +1,14 @@
+tools:
+  lorem-ipsum-generator:
+    title: Lorem ipsum generator
+    description: Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.
+
+    paragraphs: Paragraphs
+    sentences: Sentences per paragraph
+    words: Words per sentence
+    startWithLoremIpsum: Start with lorem ipsum ?
+    asHTML: As html ?
+    loremIpsumText: Your lorem ipsum...
+
+    copyBtn: Copy
+    copied: Lorem ipsum copied to the clipboard
diff --git a/src/tools/lorem-ipsum-generator/locales/zh.yml b/src/tools/lorem-ipsum-generator/locales/zh.yml
new file mode 100644
index 00000000..3951709f
--- /dev/null
+++ b/src/tools/lorem-ipsum-generator/locales/zh.yml
@@ -0,0 +1,14 @@
+tools:
+  lorem-ipsum-generator:
+    title: Lorem Ipsum 生成器
+    description: Lorem Ipsum 是一种常用的占位文本，用于展示文档或字体的视觉形式，而不依赖于有意义的内容。
+
+    paragraphs: 段落
+    sentences: 每段句子数
+    words: 每句字数
+    startWithLoremIpsum: 以 Lorem Ipsum 开头？
+    asHTML: 作为 HTML？
+    loremIpsumText: 您的 Lorem Ipsum...
+
+    copyBtn: 复制
+    copied: Lorem Ipsum 已复制到剪贴板
diff --git a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
index 9085725f..de9096bb 100644
--- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
+++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
@@ -3,6 +3,7 @@ import { generateLoremIpsum } from './lorem-ipsum-generator.service';
 import { useCopy } from '@/composable/copy';
 import { randIntFromInterval } from '@/utils/random';
 
+const { t } = useI18n();
 const paragraphs = ref(1);
 const sentences = ref([3, 8]);
 const words = ref([8, 15]);
@@ -18,32 +19,32 @@ const loremIpsumText = computed(() =>
     startWithLoremIpsum: startWithLoremIpsum.value,
   }),
 );
-const { copy } = useCopy({ source: loremIpsumText, text: 'Lorem ipsum copied to the clipboard' });
+const { copy } = useCopy({ source: loremIpsumText, text: t('tools.lorem-ipsum-generator.copied') });
 </script>
 
 <template>
   <c-card>
-    <n-form-item label="Paragraphs" :show-feedback="false" label-width="200" label-placement="left">
+    <n-form-item :label="t('tools.lorem-ipsum-generator.paragraphs')" :show-feedback="false" label-width="200" label-placement="left">
       <n-slider v-model:value="paragraphs" :step="1" :min="1" :max="20" />
     </n-form-item>
-    <n-form-item label="Sentences per paragraph" :show-feedback="false" label-width="200" label-placement="left">
+    <n-form-item :label="t('tools.lorem-ipsum-generator.sentences')" :show-feedback="false" label-width="200" label-placement="left">
       <n-slider v-model:value="sentences" range :step="1" :min="1" :max="50" />
     </n-form-item>
-    <n-form-item label="Words per sentence" :show-feedback="false" label-width="200" label-placement="left">
+    <n-form-item :label="t('tools.lorem-ipsum-generator.words')" :show-feedback="false" label-width="200" label-placement="left">
       <n-slider v-model:value="words" range :step="1" :min="1" :max="50" />
     </n-form-item>
-    <n-form-item label="Start with lorem ipsum ?" :show-feedback="false" label-width="200" label-placement="left">
+    <n-form-item :label="t('tools.lorem-ipsum-generator.startWithLoremIpsum')" :show-feedback="false" label-width="200" label-placement="left">
       <n-switch v-model:value="startWithLoremIpsum" />
     </n-form-item>
-    <n-form-item label="As html ?" :show-feedback="false" label-width="200" label-placement="left">
+    <n-form-item :label="t('tools.lorem-ipsum-generator.asHTML')" :show-feedback="false" label-width="200" label-placement="left">
       <n-switch v-model:value="asHTML" />
     </n-form-item>
 
-    <c-input-text :value="loremIpsumText" multiline placeholder="Your lorem ipsum..." readonly mt-5 rows="5" />
+    <c-input-text :value="loremIpsumText" multiline :placeholder="t('tools.lorem-ipsum-generator.loremIpsumText')" readonly mt-5 rows="5" />
 
     <div mt-5 flex justify-center>
       <c-button autofocus @click="copy()">
-        Copy
+        {{ t('tools.lorem-ipsum-generator.copyBtn') }}
       </c-button>
     </div>
   </c-card>
diff --git a/src/tools/numeronym-generator/index.ts b/src/tools/numeronym-generator/index.ts
index 19686922..0df57d74 100644
--- a/src/tools/numeronym-generator/index.ts
+++ b/src/tools/numeronym-generator/index.ts
@@ -1,10 +1,11 @@
 import { defineTool } from '../tool';
 import n7mIcon from './n7m-icon.svg?component';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Numeronym generator',
+  name: t('tools.numeronym-generator.title'),
   path: '/numeronym-generator',
-  description: 'A numeronym is a word where a number is used to form an abbreviation. For example, "i18n" is a numeronym of "internationalization" where 18 stands for the number of letters between the first i and the last n in the word.',
+  description: t('tools.numeronym-generator.description'),
   keywords: ['numeronym', 'generator', 'abbreviation', 'i18n', 'a11y', 'l10n'],
   component: () => import('./numeronym-generator.vue'),
   icon: n7mIcon,
diff --git a/src/tools/numeronym-generator/locales/en.yml b/src/tools/numeronym-generator/locales/en.yml
new file mode 100644
index 00000000..da2eebd3
--- /dev/null
+++ b/src/tools/numeronym-generator/locales/en.yml
@@ -0,0 +1,7 @@
+tools:
+  numeronym-generator:
+    title: Numeronym generator
+    description: A numeronym is a word where a number is used to form an abbreviation. For example, "i18n" is a numeronym of "internationalization" where 18 stands for the number of letters between the first i and the last n in the word.
+
+    inputPlaceholder: "Enter a word, e.g. 'internationalization'"
+    outputPlaceholder: "Your numeronym will be here, e.g. 'i18n'"
diff --git a/src/tools/numeronym-generator/locales/zh.yml b/src/tools/numeronym-generator/locales/zh.yml
new file mode 100644
index 00000000..950d38a4
--- /dev/null
+++ b/src/tools/numeronym-generator/locales/zh.yml
@@ -0,0 +1,7 @@
+tools:
+  numeronym-generator:
+    title: 数字缩略词生成器
+    description: 数字缩略词是一种使用数字形成缩略词的词。例如，"i18n" 是 "internationalization" 的数字缩略词，其中的 18 代表单词中第一个 i 和最后一个 n 之间的字母数量。
+
+    inputPlaceholder: "输入一个单词，例如 'internationalization'"
+    outputPlaceholder: "您的数字缩略词将显示在此处，例如 'i18n'"
diff --git a/src/tools/numeronym-generator/numeronym-generator.vue b/src/tools/numeronym-generator/numeronym-generator.vue
index 2332b338..883fdf00 100644
--- a/src/tools/numeronym-generator/numeronym-generator.vue
+++ b/src/tools/numeronym-generator/numeronym-generator.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { generateNumeronym } from './numeronym-generator.service';
 
+const { t } = useI18n();
 const word = ref('');
 
 const numeronym = computed(() => generateNumeronym(word.value));
@@ -8,10 +9,10 @@ const numeronym = computed(() => generateNumeronym(word.value));
 
 <template>
   <div flex flex-col items-center gap-4>
-    <c-input-text v-model:value="word" placeholder="Enter a word, e.g. 'internationalization'" size="large" clearable test-id="word-input" />
+    <c-input-text v-model:value="word" :placeholder="t('tools.numeronym-generator.inputPlaceholder')" size="large" clearable test-id="word-input" />
 
     <icon-mdi-arrow-down text-30px />
 
-    <input-copyable :value="numeronym" size="large" readonly placeholder="Your numeronym will be here, e.g. 'i18n'" test-id="numeronym" />
+    <input-copyable :value="numeronym" size="large" readonly :placeholder="t('tools.numeronym-generator.outputPlaceholder')" test-id="numeronym" />
   </div>
 </template>
diff --git a/src/tools/phone-parser-and-formatter/index.ts b/src/tools/phone-parser-and-formatter/index.ts
index 5b19ae61..48ba4a21 100644
--- a/src/tools/phone-parser-and-formatter/index.ts
+++ b/src/tools/phone-parser-and-formatter/index.ts
@@ -1,11 +1,11 @@
 import { Phone } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Phone parser and formatter',
+  name: t('tools.phone-parser-and-formatter.title'),
   path: '/phone-parser-and-formatter',
-  description:
-    'Parse, validate and format phone numbers. Get information about the phone number, like the country code, type, etc.',
+  description: t('tools.phone-parser-and-formatter.description'),
   keywords: [
     'phone',
     'parser',
diff --git a/src/tools/phone-parser-and-formatter/locales/en.yml b/src/tools/phone-parser-and-formatter/locales/en.yml
new file mode 100644
index 00000000..1db62d7b
--- /dev/null
+++ b/src/tools/phone-parser-and-formatter/locales/en.yml
@@ -0,0 +1,31 @@
+tools:
+  phone-parser-and-formatter:
+    title: Phone parser and formatter
+    description: Parse, validate and format phone numbers. Get information about the phone number, like the country code, type, etc.
+
+    country: Country
+    countryCallingCode: Country calling code
+    isValid: Is valid?
+    isPossible: Is possible?
+    type: Type
+    internationalFormat: International format
+    nationalFormat: National format
+    E164Format: E.164 format
+    RFC3966Format: RFC3966 format
+    defaultCountryCode: 'Default country code:'
+    phoneNumberLabel: 'Phone number:'
+    phoneNumberPlaceholder: Enter a phone number
+    unknown: Unknown
+    mobile: Mobile
+    fixedLine: Fixed line
+    fixedLineOrMobile: Fixed line or mobile
+    personalNumber: Personal number
+    premiumRate: Premium rate
+    sharedCost: Shared cost
+    tollFree: Toll free
+    UAN: Universal access number
+    voicemail: Voicemail
+    VoIP: VoIP
+    pager: Pager
+
+    invalidMessage: Invalid phone number
diff --git a/src/tools/phone-parser-and-formatter/locales/zh.yml b/src/tools/phone-parser-and-formatter/locales/zh.yml
new file mode 100644
index 00000000..9ad6e3e9
--- /dev/null
+++ b/src/tools/phone-parser-and-formatter/locales/zh.yml
@@ -0,0 +1,31 @@
+tools:
+  phone-parser-and-formatter:
+    title: 电话号码解析和格式化工具
+    description: 解析、验证和格式化电话号码。获取有关电话号码的信息，如国家代码、类型等。
+
+    country: 国家
+    countryCallingCode: 国家区号
+    isValid: 是否有效？
+    isPossible: 是否可能？
+    type: 类型
+    internationalFormat: 国际格式
+    nationalFormat: 国内格式
+    E164Format: E.164 格式
+    RFC3966Format: RFC3966 格式
+    defaultCountryCode: '默认国家代码:'
+    phoneNumberLabel: '电话号码:'
+    phoneNumberPlaceholder: 输入电话号码
+    unknown: 未知
+    mobile: 移动电话
+    fixedLine: 固定电话
+    fixedLineOrMobile: 固定电话或移动电话
+    personalNumber: 个人号码
+    premiumRate: 高费率
+    sharedCost: 共享费用
+    tollFree: 免费电话
+    UAN: 通用访问号码
+    voicemail: 语音信箱
+    VoIP: 互联网电话
+    pager: 传呼机
+
+    invalidMessage: 无效的电话号码
diff --git a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.models.ts b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.models.ts
index 0a0fb63e..026d790c 100644
--- a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.models.ts
+++ b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.models.ts
@@ -1,20 +1,21 @@
 import type { CountryCode, NumberType } from 'libphonenumber-js/types';
 import lookup from 'country-code-lookup';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export { formatTypeToHumanReadable, getFullCountryName, getDefaultCountryCode };
 
 const typeToLabel: Record<NonNullable<NumberType>, string> = {
-  MOBILE: 'Mobile',
-  FIXED_LINE: 'Fixed line',
-  FIXED_LINE_OR_MOBILE: 'Fixed line or mobile',
-  PERSONAL_NUMBER: 'Personal number',
-  PREMIUM_RATE: 'Premium rate',
-  SHARED_COST: 'Shared cost',
-  TOLL_FREE: 'Toll free',
-  UAN: 'Universal access number',
-  VOICEMAIL: 'Voicemail',
-  VOIP: 'VoIP',
-  PAGER: 'Pager',
+  MOBILE: t('tools.phone-parser-and-formatter.mobile'),
+  FIXED_LINE: t('tools.phone-parser-and-formatter.fixedLine'),
+  FIXED_LINE_OR_MOBILE: t('tools.phone-parser-and-formatter.fixedLineOrMobile'),
+  PERSONAL_NUMBER: t('tools.phone-parser-and-formatter.personalNumber'),
+  PREMIUM_RATE: t('tools.phone-parser-and-formatter.premiumRate'),
+  SHARED_COST: t('tools.phone-parser-and-formatter.sharedCost'),
+  TOLL_FREE: t('tools.phone-parser-and-formatter.tollFree'),
+  UAN: t('tools.phone-parser-and-formatter.UAN'),
+  VOICEMAIL: t('tools.phone-parser-and-formatter.voicemail'),
+  VOIP: t('tools.phone-parser-and-formatter.VoIP'),
+  PAGER: t('tools.phone-parser-and-formatter.pager'),
 };
 
 function formatTypeToHumanReadable(type: NumberType): string | undefined {
diff --git a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
index 5bc67780..f3c1bc36 100644
--- a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
+++ b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
@@ -10,6 +10,7 @@ import { withDefaultOnError } from '@/utils/defaults';
 import { booleanToHumanReadable } from '@/utils/boolean';
 import { useValidation } from '@/composable/validation';
 
+const { t } = useI18n();
 const rawPhone = ref('');
 const defaultCountryCode = ref(getDefaultCountryCode());
 const validation = useValidation({
@@ -17,7 +18,7 @@ const validation = useValidation({
   rules: [
     {
       validator: value => value === '' || /^[0-9 +\-()]+$/.test(value),
-      message: 'Invalid phone number',
+      message: t('tools.phone-parser-and-formatter.invalidMessage'),
     },
   ],
 });
@@ -35,43 +36,43 @@ const parsedDetails = computed(() => {
 
   return [
     {
-      label: 'Country',
+      label: t('tools.phone-parser-and-formatter.country'),
       value: parsed.country,
     },
     {
-      label: 'Country',
+      label: t('tools.phone-parser-and-formatter.country'),
       value: getFullCountryName(parsed.country),
     },
     {
-      label: 'Country calling code',
+      label: t('tools.phone-parser-and-formatter.countryCallingCode'),
       value: parsed.countryCallingCode,
     },
     {
-      label: 'Is valid?',
+      label: t('tools.phone-parser-and-formatter.isValid'),
       value: booleanToHumanReadable(parsed.isValid()),
     },
     {
-      label: 'Is possible?',
+      label: t('tools.phone-parser-and-formatter.isPossible'),
       value: booleanToHumanReadable(parsed.isPossible()),
     },
     {
-      label: 'Type',
+      label: t('tools.phone-parser-and-formatter.type'),
       value: formatTypeToHumanReadable(parsed.getType()),
     },
     {
-      label: 'International format',
+      label: t('tools.phone-parser-and-formatter.internationalFormat'),
       value: parsed.formatInternational(),
     },
     {
-      label: 'National format',
+      label: t('tools.phone-parser-and-formatter.nationalFormat'),
       value: parsed.formatNational(),
     },
     {
-      label: 'E.164 format',
+      label: t('tools.phone-parser-and-formatter.E164Format'),
       value: parsed.format('E.164'),
     },
     {
-      label: 'RFC3966 format',
+      label: t('tools.phone-parser-and-formatter.RFC3966Format'),
       value: parsed.format('RFC3966'),
     },
   ];
@@ -85,12 +86,12 @@ const countriesOptions = getCountries().map(code => ({
 
 <template>
   <div>
-    <c-select v-model:value="defaultCountryCode" label="Default country code:" :options="countriesOptions" searchable mb-5 />
+    <c-select v-model:value="defaultCountryCode" :label="t('tools.phone-parser-and-formatter.defaultCountryCode')" :options="countriesOptions" searchable mb-5 />
 
     <c-input-text
       v-model:value="rawPhone"
-      placeholder="Enter a phone number"
-      label="Phone number:"
+      :placeholder="t('tools.phone-parser-and-formatter.phoneNumberPlaceholder')"
+      :label="t('tools.phone-parser-and-formatter.phoneNumberLabel')"
       :validation="validation"
       mb-5
     />
@@ -104,7 +105,7 @@ const countriesOptions = getCountries().map(code => ({
           <td>
             <span-copyable v-if="value" :value="value" />
             <span v-else op-70>
-              Unknown
+              {{ t('tools.phone-parser-and-formatter.unknown') }}
             </span>
           </td>
         </tr>
diff --git a/src/tools/string-obfuscator/index.ts b/src/tools/string-obfuscator/index.ts
index d5b45318..d8d87587 100644
--- a/src/tools/string-obfuscator/index.ts
+++ b/src/tools/string-obfuscator/index.ts
@@ -1,10 +1,11 @@
 import { EyeOff } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'String obfuscator',
+  name: t('tools.string-obfuscator.title'),
   path: '/string-obfuscator',
-  description: 'Obfuscate a string (like a secret, an IBAN, or a token) to make it shareable and identifiable without revealing its content.',
+  description: t('tools.string-obfuscator.description'),
   keywords: ['string', 'obfuscator', 'secret', 'token', 'hide', 'obscure', 'mask', 'masking'],
   component: () => import('./string-obfuscator.vue'),
   icon: EyeOff,
diff --git a/src/tools/string-obfuscator/locales/en.yml b/src/tools/string-obfuscator/locales/en.yml
new file mode 100644
index 00000000..405dae32
--- /dev/null
+++ b/src/tools/string-obfuscator/locales/en.yml
@@ -0,0 +1,10 @@
+tools:
+  string-obfuscator:
+    title: String obfuscator
+    description: Obfuscate a string (like a secret, an IBAN, or a token) to make it shareable and identifiable without revealing its content.
+
+    inputLabel: 'String to obfuscate:'
+    inputPlaceholder: Enter string to obfuscate
+    keepFirst: 'Keep first:'
+    keepLast: 'Keep last:'
+    KeepSpaces: 'Keep spaces:'
diff --git a/src/tools/string-obfuscator/locales/zh.yml b/src/tools/string-obfuscator/locales/zh.yml
new file mode 100644
index 00000000..f83234be
--- /dev/null
+++ b/src/tools/string-obfuscator/locales/zh.yml
@@ -0,0 +1,10 @@
+tools:
+  string-obfuscator:
+    title: 字符串混淆器
+    description: 将字符串（如密码、IBAN 或令牌）混淆，使其可共享和识别，而不会暴露内容。
+
+    inputLabel: '要混淆的字符串：'
+    inputPlaceholder: 输入要混淆的字符串
+    keepFirst: '保留前：'
+    keepLast: '保留后：'
+    KeepSpaces: '保留空格：'
diff --git a/src/tools/string-obfuscator/string-obfuscator.vue b/src/tools/string-obfuscator/string-obfuscator.vue
index 512d3781..5c8d8269 100644
--- a/src/tools/string-obfuscator/string-obfuscator.vue
+++ b/src/tools/string-obfuscator/string-obfuscator.vue
@@ -2,6 +2,7 @@
 import { useObfuscateString } from './string-obfuscator.model';
 import { useCopy } from '@/composable/copy';
 
+const { t } = useI18n();
 const str = ref('Lorem ipsum dolor sit amet');
 const keepFirst = ref(4);
 const keepLast = ref(4);
@@ -13,22 +14,22 @@ const { copy } = useCopy({ source: obfuscatedString });
 
 <template>
   <div>
-    <c-input-text v-model:value="str" raw-text placeholder="Enter string to obfuscate" label="String to obfuscate:" clearable multiline />
+    <c-input-text v-model:value="str" raw-text :placeholder="t('tools.string-obfuscator.inputPlaceholder')" :label="t('tools.string-obfuscator.inputLabel')" clearable multiline />
 
     <div mt-4 flex gap-10px>
       <div>
-        <div>Keep first:</div>
+        <div>{{ t('tools.string-obfuscator.keepFirst') }}</div>
         <n-input-number v-model:value="keepFirst" min="0" />
       </div>
 
       <div>
-        <div>Keep last:</div>
+        <div>{{ t('tools.string-obfuscator.keepLast') }}</div>
         <n-input-number v-model:value="keepLast" min="0" />
       </div>
 
       <div>
         <div mb-5px>
-          Keep&nbsp;spaces:
+          {{ t('tools.string-obfuscator.KeepSpaces') }}
         </div>
         <n-switch v-model:value="keepSpace" />
       </div>
diff --git a/src/tools/temperature-converter/index.ts b/src/tools/temperature-converter/index.ts
index 60192b41..415f5d85 100644
--- a/src/tools/temperature-converter/index.ts
+++ b/src/tools/temperature-converter/index.ts
@@ -1,11 +1,11 @@
 import { Temperature } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Temperature converter',
+  name: t('tools.temperature-converter.title'),
   path: '/temperature-converter',
-  description:
-    'Temperature degrees conversions for Kelvin, Celsius, Fahrenheit, Rankine, Delisle, Newton, Réaumur and Rømer.',
+  description: t('tools.temperature-converter.description'),
   keywords: [
     'temperature',
     'converter',
diff --git a/src/tools/temperature-converter/locales/en.yml b/src/tools/temperature-converter/locales/en.yml
new file mode 100644
index 00000000..4fea4978
--- /dev/null
+++ b/src/tools/temperature-converter/locales/en.yml
@@ -0,0 +1,13 @@
+tools:
+  temperature-converter:
+    title: Temperature converter
+    description: Temperature degrees conversions for Kelvin, Celsius, Fahrenheit, Rankine, Delisle, Newton, Réaumur and Rømer.
+
+    kelvin: Kelvin
+    celsius: Celsius
+    fahrenheit: Fahrenheit
+    rankine: Rankine
+    delisle: Delisle
+    newton: Newton
+    reaumur: Réaumur
+    romer: Rømer
diff --git a/src/tools/temperature-converter/locales/zh.yml b/src/tools/temperature-converter/locales/zh.yml
new file mode 100644
index 00000000..714af249
--- /dev/null
+++ b/src/tools/temperature-converter/locales/zh.yml
@@ -0,0 +1,13 @@
+tools:
+  temperature-converter:
+    title: 温度转换器
+    description: 开尔文、摄氏度、华氏度、兰氏度、德利斯尔度、牛顿度、瑞摄姆度和罗默度的温度转换。
+
+    kelvin: 开尔文
+    celsius: 摄氏度
+    fahrenheit: 华氏度
+    rankine: 兰氏度
+    delisle: 德利斯尔度
+    newton: 牛顿度
+    reaumur: 瑞摄姆度
+    romer: 罗默度
diff --git a/src/tools/temperature-converter/temperature-converter.vue b/src/tools/temperature-converter/temperature-converter.vue
index 85de3904..d1efc407 100644
--- a/src/tools/temperature-converter/temperature-converter.vue
+++ b/src/tools/temperature-converter/temperature-converter.vue
@@ -19,6 +19,7 @@ import {
 
 type TemperatureScale = 'kelvin' | 'celsius' | 'fahrenheit' | 'rankine' | 'delisle' | 'newton' | 'reaumur' | 'romer';
 
+const { t } = useI18n();
 const units = reactive<
   Record<
     string | TemperatureScale,
@@ -26,56 +27,56 @@ const units = reactive<
   >
       >({
         kelvin: {
-          title: 'Kelvin',
+          title: t('tools.temperature-converter.kelvin'),
           unit: 'K',
           ref: 0,
           toKelvin: _.identity,
           fromKelvin: _.identity,
         },
         celsius: {
-          title: 'Celsius',
+          title: t('tools.temperature-converter.celsius'),
           unit: '°C',
           ref: 0,
           toKelvin: convertCelsiusToKelvin,
           fromKelvin: convertKelvinToCelsius,
         },
         fahrenheit: {
-          title: 'Fahrenheit',
+          title: t('tools.temperature-converter.fahrenheit'),
           unit: '°F',
           ref: 0,
           toKelvin: convertFahrenheitToKelvin,
           fromKelvin: convertKelvinToFahrenheit,
         },
         rankine: {
-          title: 'Rankine',
+          title: t('tools.temperature-converter.rankine'),
           unit: '°R',
           ref: 0,
           toKelvin: convertRankineToKelvin,
           fromKelvin: convertKelvinToRankine,
         },
         delisle: {
-          title: 'Delisle',
+          title: t('tools.temperature-converter.delisle'),
           unit: '°De',
           ref: 0,
           toKelvin: convertDelisleToKelvin,
           fromKelvin: convertKelvinToDelisle,
         },
         newton: {
-          title: 'Newton',
+          title: t('tools.temperature-converter.newton'),
           unit: '°N',
           ref: 0,
           toKelvin: convertNewtonToKelvin,
           fromKelvin: convertKelvinToNewton,
         },
         reaumur: {
-          title: 'Réaumur',
+          title: t('tools.temperature-converter.reaumur'),
           unit: '°Ré',
           ref: 0,
           toKelvin: convertReaumurToKelvin,
           fromKelvin: convertKelvinToReaumur,
         },
         romer: {
-          title: 'Rømer',
+          title: t('tools.temperature-converter.romer'),
           unit: '°Rø',
           ref: 0,
           toKelvin: convertRomerToKelvin,
diff --git a/src/tools/text-diff/index.ts b/src/tools/text-diff/index.ts
index 992acbae..280e9805 100644
--- a/src/tools/text-diff/index.ts
+++ b/src/tools/text-diff/index.ts
@@ -1,10 +1,11 @@
 import { FileDiff } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Text diff',
+  name: t('tools.text-diff.title'),
   path: '/text-diff',
-  description: 'Compare two texts and see the differences between them.',
+  description: t('tools.text-diff.description'),
   keywords: ['text', 'diff', 'compare', 'string', 'text diff', 'code'],
   component: () => import('./text-diff.vue'),
   icon: FileDiff,
diff --git a/src/tools/text-diff/locales/en.yml b/src/tools/text-diff/locales/en.yml
new file mode 100644
index 00000000..3fe95732
--- /dev/null
+++ b/src/tools/text-diff/locales/en.yml
@@ -0,0 +1,4 @@
+tools:
+  text-diff:
+    title: Text diff
+    description: Compare two texts and see the differences between them.
diff --git a/src/tools/text-diff/locales/zh.yml b/src/tools/text-diff/locales/zh.yml
new file mode 100644
index 00000000..d3aeb594
--- /dev/null
+++ b/src/tools/text-diff/locales/zh.yml
@@ -0,0 +1,4 @@
+tools:
+  text-diff:
+    title: 文本差异
+    description: 比较两个文本并查看它们之间的差异。
diff --git a/src/tools/text-statistics/index.ts b/src/tools/text-statistics/index.ts
index 0e54b71b..88c6abea 100644
--- a/src/tools/text-statistics/index.ts
+++ b/src/tools/text-statistics/index.ts
@@ -1,10 +1,11 @@
 import { FileText } from '@vicons/tabler';
 import { defineTool } from '../tool';
+import { translate as t } from '@/plugins/i18n.plugin';
 
 export const tool = defineTool({
-  name: 'Text statistics',
+  name: t('tools.text-statistics.title'),
   path: '/text-statistics',
-  description: 'Get information about a text, the amount of characters, the amount of words, it\'s size, ...',
+  description: t('tools.text-statistics.description'),
   keywords: ['text', 'statistics', 'length', 'characters', 'count', 'size', 'bytes'],
   component: () => import('./text-statistics.vue'),
   icon: FileText,
diff --git a/src/tools/text-statistics/locales/en.yml b/src/tools/text-statistics/locales/en.yml
new file mode 100644
index 00000000..cd7efc5d
--- /dev/null
+++ b/src/tools/text-statistics/locales/en.yml
@@ -0,0 +1,10 @@
+tools:
+  text-statistics:
+    title: Text statistics
+    description: Get information about a text, the amount of characters, the amount of words, it's size, ...
+
+    inputPlaceholder: Your text...
+    characterCount: Character count
+    wordCount: Word count
+    lineCount: Line count
+    byteSize: Byte size
diff --git a/src/tools/text-statistics/locales/zh.yml b/src/tools/text-statistics/locales/zh.yml
new file mode 100644
index 00000000..f2586b94
--- /dev/null
+++ b/src/tools/text-statistics/locales/zh.yml
@@ -0,0 +1,10 @@
+tools:
+  text-statistics:
+    title: 文本统计
+    description: 获取文本信息，包括字符数、单词数、大小等...
+
+    inputPlaceholder: 请输入文本...
+    characterCount: 字符数
+    wordCount: 单词数
+    lineCount: 行数
+    byteSize: 字节大小
diff --git a/src/tools/text-statistics/text-statistics.vue b/src/tools/text-statistics/text-statistics.vue
index 6aa29d4d..5d541a59 100644
--- a/src/tools/text-statistics/text-statistics.vue
+++ b/src/tools/text-statistics/text-statistics.vue
@@ -2,18 +2,19 @@
 import { getStringSizeInBytes } from './text-statistics.service';
 import { formatBytes } from '@/utils/convert';
 
+const { t } = useI18n();
 const text = ref('');
 </script>
 
 <template>
   <c-card>
-    <c-input-text v-model:value="text" multiline placeholder="Your text..." rows="5" />
+    <c-input-text v-model:value="text" multiline :placeholder="t('tools.text-statistics.inputPlaceholder')" rows="5" />
 
     <div mt-5 flex>
-      <n-statistic label="Character count" :value="text.length" flex-1 />
-      <n-statistic label="Word count" :value="text === '' ? 0 : text.split(/\s+/).length" flex-1 />
-      <n-statistic label="Line count" :value="text === '' ? 0 : text.split(/\r\n|\r|\n/).length" flex-1 />
-      <n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" flex-1 />
+      <n-statistic :label="t('tools.text-statistics.characterCount')" :value="text.length" flex-1 />
+      <n-statistic :label="t('tools.text-statistics.wordCount')" :value="text === '' ? 0 : text.split(/\s+/).length" flex-1 />
+      <n-statistic :label="t('tools.text-statistics.lineCount')" :value="text === '' ? 0 : text.split(/\r\n|\r|\n/).length" flex-1 />
+      <n-statistic :label="t('tools.text-statistics.byteSize')" :value="formatBytes(getStringSizeInBytes(text))" flex-1 />
     </div>
   </c-card>
 </template>