diff --git a/client/web/plugins/com.msgbyte.intro/src/steps.ts b/client/web/plugins/com.msgbyte.intro/src/steps.ts
index 2c6de9e7..25c7d37e 100644
--- a/client/web/plugins/com.msgbyte.intro/src/steps.ts
+++ b/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: '如果有更多疑问, 欢迎访问官方文档了解更多:
点击此处打开官方文档',
+ text: Translate.step8,
},
];
diff --git a/client/web/plugins/com.msgbyte.intro/src/tour.ts b/client/web/plugins/com.msgbyte.intro/src/tour.ts
index 0fd64ff0..9db02449 100644
--- a/client/web/plugins/com.msgbyte.intro/src/tour.ts
+++ b/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();
},
diff --git a/client/web/plugins/com.msgbyte.intro/src/translate.ts b/client/web/plugins/com.msgbyte.intro/src/translate.ts
new file mode 100644
index 00000000..ec22888f
--- /dev/null
+++ b/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':
+ '如果有更多疑问, 欢迎访问官方文档了解更多:
点击此处打开官方文档',
+ 'en-US':
+ 'If you have more questions, please visit the official document to learn more:
Click here to open the official documentation',
+ }),
+};
diff --git a/client/web/plugins/com.msgbyte.intro/tsconfig.json b/client/web/plugins/com.msgbyte.intro/tsconfig.json
index beb3c60f..465a28b5 100644
--- a/client/web/plugins/com.msgbyte.intro/tsconfig.json
+++ b/client/web/plugins/com.msgbyte.intro/tsconfig.json
@@ -1,6 +1,5 @@
{
"compilerOptions": {
- "rootDir": "./src",
"baseUrl": "./src",
"esModuleInterop": true,
"jsx": "react",