feat: 引导插件增加国际化支持

client/web/plugins/com.msgbyte.intro/src/steps.ts

@@ -1,4 +1,5 @@
 import Shepherd from 'shepherd.js';
+import { Translate } from './translate';
 
 function buildWatchDom(selector: string) {
   return () => {
@@ -40,47 +41,47 @@ function buildStepOption(options: {
 export const steps: Shepherd.Step.StepOptions[] = [
   {
     id: 'start',
-    text: '欢迎使用 Tailchat, 一个插件化的开源IM应用！',
+    text: Translate.step1,
     beforeShowPromise: buildWatchDom('[data-tc-role=navbar]'), // 仅当主界面出现后才显示欢迎
   },
   buildStepOption({
     id: 'navbar',
-    text: '这是导航栏, 在这里可以切换tailchat的各个主要页面。',
+    text: Translate.step2,
     selector: '[data-tc-role=navbar]',
     position: 'right',
   }),
   buildStepOption({
     id: 'personal',
-    text: '这是个人信息，在这里可以访问您的好友、插件、以及私信等功能。',
+    text: Translate.step3,
     selector: '[data-tc-role=navbar-personal]',
     position: 'right',
   }),
   buildStepOption({
     id: 'groups',
-    text: '这是群组列表, 会显示所有已加入的群组，您可以通过点击切换切换群组，也可以点击 + 号按钮来创建群组',
+    text: Translate.step4,
     selector: '[data-tc-role=navbar-groups]',
     position: 'right',
   }),
   buildStepOption({
     id: 'settings',
-    text: '这是设置按钮，可以通过此按钮来进行个人信息的变更、系统设置的变更、软件信息等内容',
+    text: Translate.step5,
     selector: '[data-tc-role=navbar-settings]',
     position: 'right',
   }),
   buildStepOption({
     id: 'sidebar',
-    text: '这是侧边栏，用于切换内容。在未来会经常使用它来切换不同的面板。',
+    text: Translate.step6,
     selector: '[data-tc-role^=sidebar-]',
     position: 'right',
   }),
   buildStepOption({
     id: 'content',
-    text: '这是内容区，用于显示主要内容，也是Tailchat展示内容的地方。',
+    text: Translate.step7,
     selector: '[data-tc-role^=content-]',
     position: 'right',
   }),
   {
     id: 'end',
-    text: '如果有更多疑问, 欢迎访问官方文档了解更多: <br /><a href="https://tailchat.msgbyte.com/" target="_blank" style="text-decoration: underline;">点击此处打开官方文档</a>',
+    text: Translate.step8,
   },
 ];

client/web/plugins/com.msgbyte.intro/src/tour.ts

@@ -1,4 +1,5 @@
 import Shepherd from 'shepherd.js';
+import { Translate } from './translate';
 import { steps } from './steps';
 import './style.less';
 
@@ -15,14 +16,14 @@ if (!window.localStorage.getItem(KEY)) {
       modalOverlayOpeningPadding: 4,
       buttons: [
         {
-          text: '跳过引导',
+          text: Translate.skip,
           secondary: true,
           action() {
             this.complete();
           },
         },
         {
-          text: '下一步',
+          text: Translate.next,
           action() {
             this.next();
           },

client/web/plugins/com.msgbyte.intro/src/translate.ts

@@ -0,0 +1,54 @@
+import { localTrans } from '@capital/common';
+
+export const Translate = {
+  next: localTrans({
+    'zh-CN': '下一步',
+    'en-US': 'Next',
+  }),
+  skip: localTrans({
+    'zh-CN': '跳过引导',
+    'en-US': 'Skip Tour',
+  }),
+  step1: localTrans({
+    'zh-CN': '欢迎使用 Tailchat, 一个插件化的开源IM应用！',
+    'en-US': 'Welcome to Tailchat, a pluginify open source IM application!',
+  }),
+  step2: localTrans({
+    'zh-CN': '这是导航栏, 在这里可以切换tailchat的各个主要页面。',
+    'en-US':
+      'This is the navigation bar, where you can switch between the main pages of tailchat.',
+  }),
+  step3: localTrans({
+    'zh-CN': '这是个人信息入口，在这里可以访问您的好友、插件、以及私信等功能。',
+    'en-US':
+      'This is the personal information entry, where you can access functions such as your friends, plug-ins, and private messages.',
+  }),
+  step4: localTrans({
+    'zh-CN':
+      '这是群组列表, 会显示所有已加入的群组，您可以通过点击切换切换群组，也可以点击 + 号按钮来创建群组',
+    'en-US':
+      'This is a list of groups, which will display all the groups you have joined. You can click to switch between groups, or you can click the + button to create a group',
+  }),
+  step5: localTrans({
+    'zh-CN':
+      '这是设置按钮，可以通过此按钮来进行个人信息的变更、系统设置的变更、软件信息等内容',
+    'en-US':
+      'This is the setting button, through which you can change personal information, system settings, software information, etc.',
+  }),
+  step6: localTrans({
+    'zh-CN': '这是侧边栏，用于切换内容。在未来会经常使用它来切换不同的面板。',
+    'en-US':
+      'This is the sidebar, used to toggle content. Will use it frequently in the future to switch between different panels.',
+  }),
+  step7: localTrans({
+    'zh-CN': '这是内容区，用于显示主要内容，也是Tailchat展示内容的地方。',
+    'en-US':
+      'This is the content area, which is used to display the main content, and it is also where Tailchat displays the content.',
+  }),
+  step8: localTrans({
+    'zh-CN':
+      '如果有更多疑问, 欢迎访问官方文档了解更多: <br /><a href="https://tailchat.msgbyte.com/" target="_blank" style="text-decoration: underline;">点击此处打开官方文档</a>',
+    'en-US':
+      'If you have more questions, please visit the official document to learn more: <br /><a href="https://tailchat.msgbyte.com/" target="_blank" style="text-decoration: underline;">Click here to open the official documentation</a>',
+  }),
+};

client/web/plugins/com.msgbyte.intro/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "rootDir": "./src",
     "baseUrl": "./src",
     "esModuleInterop": true,
     "jsx": "react",