feat: add i18n

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "i18n-ally.localesPaths": ["locales"],
+  "i18n-ally.keystyle": "flat",
+  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.editor.preferEditor": true
+}

components/ChatGPTSettings.vue

@@ -46,7 +46,7 @@ function reset() {
 <template>
   <div class="a-card-body">
     <div>
-      <ATypography title="Global" mb-2></ATypography>
+      <ATypography :title="$t('chatgpt.settings.title')" mb-2></ATypography>
       <AInput
         v-model="currentOptions[name]"
         class="my-2"
@@ -55,14 +55,14 @@ function reset() {
         :label="name"
         :hint="
           item != defaultOptions[name] && defaultOptions[name]
-            ? `Default is '${defaultOptions[name]}'`
+            ? $t('chatgpt.settings.hit', [defaultOptions[name]])
             : ''
         "
       ></AInput>
     </div>
     <div flex flex-cols gap-2 mt-2>
-      <ABtn @click="save" mr-1>Save</ABtn>
-      <ABtn @click="reset" color="danger">Reset</ABtn>
+      <ABtn @click="save" mr-1>{{ $t('chatgpt.settings.save') }}</ABtn>
+      <ABtn @click="reset" color="danger">{{ $t('chatgpt.settings.reset') }}</ABtn>
     </div>
   </div>
 </template>

components/Header.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 const isSettingsShow = ref(false);
+const localePath = useLocalePath();
 </script>
 
 <template>
   <header h-16 flex items-center container mx-auto px-4 md:px-0>
-    <NuxtLink to="/"><Logo /></NuxtLink>
+    <NuxtLink :to="localePath('/')"><Logo /></NuxtLink>
     <Nav flex-1 />
     <div flex flex-cols gap-4>
       <NuxtLink to="https://github.com/KeJunMao/ai-anything" target="_blank">

components/Search.vue

@@ -3,6 +3,6 @@ const { search } = useToolSearch();
 </script>
 <template>
   <div w-full md:max-w-sm px-6 md:px-0>
-    <AInput v-model="search" class="text-sm" placeholder="Search a AI helper" />
+    <AInput v-model="search" class="text-sm" :placeholder="$t('search-placeholder')" />
   </div>
 </template>

components/ToolList.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+const localePath = useLocalePath();
+
 const { tools } = useTools();
 const { search } = useToolSearch();
 const list = computed(() =>
@@ -14,10 +16,16 @@ const list = computed(() =>
 <template>
   <div>
     <div mt-8 grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 px-6 md:px-0>
-      <NuxtLink :to="`/t/${item.name}`" v-for="item in list" :key="item.name">
+      <NuxtLink
+        :to="localePath(`/t/${item.name}`)"
+        v-for="item in list"
+        :key="item.name"
+      >
         <Tool :tool="item" />
       </NuxtLink>
     </div>
-    <div v-if="!list.length">No results found for "{{ search }}"</div>
+    <div v-if="!list.length">
+      {{ $t("no-results-found-for-search", [search]) }}
+    </div>
   </div>
 </template>

composables/useTools.ts

@@ -1,7 +1,20 @@
-import tools from "~/data/tools";
+import getTools from "~/tools";
+import { Tool } from "~~/tools/types";
+
+// const reg = /^i18n.t\(['"](.*?)['"]\)$/;
+// function setI18n(object: Record<string, any>, t: any) {
+//   for (const key in object) {
+//     if (Object.prototype.hasOwnProperty.call(object, key)) {
+//       const element = object[key];
+//       if (element.)
+//     }
+//   }
+// }
 
 export const useTools = () => {
+  const { t } = useI18n();
+  const tools = ref(getTools(t));
   return {
-    tools: ref(tools),
+    tools: tools,
   };
 };

locales/en.json

@@ -0,0 +1,20 @@
+{
+  "search-placeholder": "Search a AI helper",
+  "no-results-found-for-search": "No results found for “{0}”",
+  "tool.coding_function.title": "Coding Function",
+  "tool.coding_function.desc": "Coding function engineer",
+  "tool.finding_bugs.title": "Find Bugs",
+  "tool.finding_bugs.desc": "The QA...",
+  "tool.okr_generator.title": "OKR generator",
+  "tool.okr_generator.desc": "How to set OKRs? AI help.",
+  "tool.redbook.title": "Little Red Book Copywriting Generator",
+  "tool.redbook.desc": "Help you generate Little Red Book style copywriting.",
+  "tool.translator.title": "AI Translator",
+  "tool.translator.desc": "Is learning a foreign language difficult? AI can help you translate.",
+  "tool.weekly_report.title": "Weekly Report",
+  "tool.weekly_report.desc": "Don't feel like writing a weekly report? Let AI help you write it.",
+  "chatgpt.settings.title": "Global Settings",
+  "chatgpt.settings.hit": "Default is '{0}",
+  "chatgpt.settings.save": "Save",
+  "chatgpt.settings.reset": "Reset"
+}

locales/zh-cn.json

@@ -0,0 +1,20 @@
+{
+  "search-placeholder": "搜索 AI 小助手",
+  "no-results-found-for-search": "暂无 \"{0}\" 相关结果",
+  "tool.coding_function.title": "写函数",
+  "tool.coding_function.desc": "函数专家",
+  "tool.finding_bugs.title": "找BUG",
+  "tool.finding_bugs.desc": "真正的QA，往往...",
+  "tool.okr_generator.title": "OKR 生成器",
+  "tool.okr_generator.desc": "怎么定OKR？AI 帮你编",
+  "tool.redbook.title": "小红书文案生成器",
+  "tool.redbook.desc": "帮你生成小红书风格文案",
+  "tool.translator.title": "AI 翻译器",
+  "tool.translator.desc": "外语好难？AI 帮你翻译",
+  "tool.weekly_report.title": "周报生成器",
+  "tool.weekly_report.desc": "不想写周报？AI 帮你写",
+  "chatgpt.settings.hit": "默认值为 \"{0}\"",
+  "chatgpt.settings.reset": "重置",
+  "chatgpt.settings.save": "保存",
+  "chatgpt.settings.title": "全局设置"
+}

nuxt.config.ts

@@ -1,4 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import en from "./locales/en.json";
+import zhCN from "./locales/zh-cn.json";
+
 export default defineNuxtConfig({
   app: {
     head: {
@@ -11,9 +14,27 @@ export default defineNuxtConfig({
     "@unocss/nuxt",
     "@nuxtjs/color-mode",
     "@vueuse/nuxt",
+    "@nuxtjs/i18n",
   ],
   css: ["@anu-vue/preset-theme-default/dist/style.css", "~/assets/global.css"],
   colorMode: {
     classSuffix: "",
-  }
+  },
+  i18n: {
+    locales: ["en", "zh-cn"],
+    defaultLocale: "en",
+    vueI18n: {
+      legacy: false,
+      messages: {
+        en,
+        "zh-cn": zhCN,
+      },
+    },
+    // detectBrowserLanguage: {
+    //   useCookie: true,
+    //   alwaysRedirect: true,
+    //   redirectOn: "root",
+    //   fallbackLocale: "en",
+    // },
+  },
 });

package.json

@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@nuxtjs/color-mode": "^3.2.0",
+    "@nuxtjs/i18n": "8.0.0-beta.10",
     "@types/marked": "^4.0.8",
     "@unocss/nuxt": "^0.50.3",
     "@vueuse/nuxt": "^9.13.0",

pages/t/[name].vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { marked } from "marked";
+import getTools from "~~/tools";
+
 definePageMeta({
   validate(route) {
-    const tool = useTool(route.params.name as string);
-    return !!tool.value;
+    const tool = getTools().find((v) => v.name === route.params.name);
+    return !!tool;
   },
 });
 const route = useRoute();
@@ -19,9 +20,14 @@ const submit = () => {
 </script>
 <template>
   <div pt-0 md:pt-5 px-4 md:px-0 max-w-2xl w-full m-auto>
-    <ATypography mb-5 :title="tool!.title" :subtitle="tool?.desc"></ATypography>
     <ACard>
       <div class="a-card-body" flex flex-col gap-y-4>
+        <div flex justify-between>
+          <Tool :tool="tool!" mb-4></Tool>
+          <ABtn color="inherit" variant="text">
+            <div class="i-mdi:edit"></div>
+          </ABtn>
+        </div>
         <Forms ref="form" v-if="tool?.forms" :forms="tool?.forms" />
         <ABtn :disabled="loading" w-full @click="submit"> 提交 </ABtn>
       </div>