feat: add i18n support in plugin store

apps/cli/src/commands/registry/config.ts

@@ -16,10 +16,6 @@ export const registryConfigCommand: CommandModule = {
         describe: 'Config FE Plugin List',
         type: 'boolean',
       })
-      .option('be', {
-        describe: 'Config BE Plugin List',
-        type: 'boolean',
-      })
       .option('verbose', {
         describe: 'Show plugin manifest path list',
         type: 'boolean',

client/shared/model/plugin.ts

@@ -6,6 +6,7 @@ export interface PluginManifest {
    * @example 网页面板插件
    */
   label: string;
+  'label.zh-CN'?: string;
 
   /**
    * 插件名, 插件唯一标识
@@ -42,6 +43,7 @@ export interface PluginManifest {
    * 插件描述
    */
   description: string;
+  'description.zh-CN'?: string;
 
   /**
    * 是否需要重启才能应用插件

client/web/src/plugin/PluginStore/Item.tsx

@@ -13,6 +13,7 @@ import {
 import { ModalWrapper, openModal } from '../common';
 import { pluginManager } from '../manager';
 import { DocumentView } from './DocumentView';
+import { getManifestFieldWithI18N } from '../utils';
 
 /**
  * 插件项
@@ -51,27 +52,30 @@ export const PluginStoreItem: React.FC<{
     }
 
     openModal(
-      <ModalWrapper title={manifest.label}>
+      <ModalWrapper title={label}>
         <DocumentView documentUrl={parseUrlStr(manifest.documentUrl)} />
       </ModalWrapper>
     );
   }, [manifest]);
 
+  const label = getManifestFieldWithI18N(manifest, 'label');
+  const description = getManifestFieldWithI18N(manifest, 'description');
+
   return (
     <div className="mobile:w-full sm:w-full md:w-full lg:w-1/2 xl:w-1/3 2xl:w-1/4 p-1">
       <div className="rounded-md flex w-full h-36 bg-white bg-opacity-40 dark:bg-black dark:bg-opacity-40 shadow py-2 px-3">
         <div className="mr-2">
-          <Avatar shape="square" src={manifest.icon} name={manifest.label} />
+          <Avatar shape="square" src={manifest.icon} name={label} />
         </div>
 
         <div className="flex flex-col flex-1 min-w-0 overflow-hidden">
-          <div className="font-bold">{manifest.label}</div>
+          <div className="font-bold">{label}</div>
 
           <div className="text-xs text-gray-700 dark:text-gray-300 text-opacity-50">
             {manifest.name}
           </div>
 
-          <div className="flex-1 overflow-auto">{manifest.description}</div>
+          <div className="flex-1 overflow-auto">{description}</div>
 
           <Space className="mt-1 justify-end">
             {isValidStr(manifest.documentUrl) && (

client/web/src/plugin/builtin.ts

@@ -13,40 +13,50 @@ const isOffical = [
  */
 export const builtinPlugins: PluginManifest[] = _compact([
   {
-    label: '网页面板插件',
+    label: 'Web Panel Plugin',
+    'label.zh-CN': '网页面板插件',
     name: 'com.msgbyte.webview',
     url: '/plugins/com.msgbyte.webview/index.js',
     version: '0.0.0',
     author: 'msgbyte',
-    description: '为群组提供创建网页面板的功能',
+    description: 'Provides groups with the ability to create web panels',
+    'description.zh-CN': '为群组提供创建网页面板的功能',
     documentUrl: '/plugins/com.msgbyte.webview/README.md',
     requireRestart: false,
   },
   {
-    label: 'BBCode',
+    label: 'BBCode Mmessage Interpreter',
+    'label.zh-CN': 'BBCode 消息解释器',
     name: 'com.msgbyte.bbcode',
-    url: '/plugins/com.msgbyte.bbcode/index.js',
+    url: '/plugins/com.msgbyte.miaolang/index.js',
     version: '0.0.0',
     author: 'msgbyte',
-    description: 'BBCode 格式消息内容解析',
+    description:
+      'A plugin for supporting bbcode syntax to interpret rich text messages',
+    'description.zh-CN': '一个用于支持bbcode语法解释富文本消息的插件',
     requireRestart: true,
   },
   {
-    label: '消息通知插件',
+    label: 'Message notification plugin',
+    'label.zh-CN': '消息通知插件',
     name: 'com.msgbyte.notify',
     url: '/plugins/com.msgbyte.notify/index.js',
     version: '0.0.0',
     author: 'msgbyte',
-    description: '为应用增加通知的能力',
+    description: 'Ability to add notifications to apps',
+    'description.zh-CN': '为应用增加通知的能力',
     requireRestart: true,
   },
   {
-    label: '初始引导插件',
+    label: 'Intro plugin',
+    'label.zh-CN': '初始引导插件',
     name: 'com.msgbyte.intro',
     url: '/plugins/com.msgbyte.intro/index.js',
     version: '0.0.0',
     author: 'msgbyte',
-    description: '为应用首次打开介绍应用的能力',
+    description:
+      'Turn on the ability to introduce the app for the first time for the app',
+    'description.zh-CN': '为应用首次打开介绍应用的能力',
     requireRestart: true,
   },
   // isOffical
@@ -57,7 +67,8 @@ export const builtinPlugins: PluginManifest[] = _compact([
     icon: '/plugins/com.msgbyte.posthog/assets/icon.png',
     version: '0.0.0',
     author: 'moonrailgun',
-    description: 'Posthog 数据统计',
+    description: 'Posthog Statistics',
+    'description.zh-CN': 'Posthog 数据统计',
     requireRestart: true,
   },
   isOffical && {
@@ -67,16 +78,19 @@ export const builtinPlugins: PluginManifest[] = _compact([
     icon: '/plugins/com.msgbyte.sentry/assets/icon.png',
     version: '0.0.0',
     author: 'moonrailgun',
-    description: 'Sentry 错误处理',
+    description: 'Sentry error handling',
+    'description.zh-CN': 'Sentry 错误处理',
     requireRestart: true,
   },
   isOffical && {
-    label: '用户地理位置',
+    label: 'User Location',
+    'label.zh-CN': '用户地理位置',
     name: 'com.msgbyte.user.location',
     url: '/plugins/com.msgbyte.user.location/index.js',
     version: '0.0.0',
     author: 'moonrailgun',
-    description: '为用户信息增加地理位置记录',
+    description: 'Add geographic location records for user information',
+    'description.zh-CN': '为用户信息增加地理位置记录',
     requireRestart: true,
   },
 ]);

client/web/src/plugin/utils.ts

@@ -1,4 +1,10 @@
-import { isValidJson, parseUrlStr, PluginManifest, t } from 'tailchat-shared';
+import {
+  isValidJson,
+  parseUrlStr,
+  PluginManifest,
+  t,
+  getLanguage,
+} from 'tailchat-shared';
 import { Validator } from 'jsonschema';
 
 /**
@@ -41,3 +47,18 @@ export function parsePluginManifest(json: string): PluginManifest {
 
   return obj;
 }
+
+/**
+ * Get manifest field with i18n support,
+ * for example: get `label.zh-CN` than `label` in zh-CN language.
+ * @param info Plugin Manifest Info
+ * @param field Plugin Manifest Field
+ */
+export function getManifestFieldWithI18N(
+  info: PluginManifest,
+  field: 'label' | 'description'
+): string {
+  const language = getLanguage();
+
+  return (info as any)[`${field}.${language}`] ?? info[field];
+}