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",