fix: extension configure i18n support variable/i18n Readme

.github/workflows/crowdin.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
   synchronize-with-crowdin:
-    if: startsWith(github.event.head_commit.message , 'i18n')
+    if: contains(github.event.head_commit.message , 'i18n')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

src/platform/common/i18n.ts

@@ -23,18 +23,39 @@ export class TranslateService {
    * Transalte package.json variable ${} to locale text
    */
   translateVariableKey() {
-    let that = this;
-    Object.keys(this.module.features).forEach((name) => {
-      let feature = that.module.features[name];
-      Object.keys(feature).forEach((childName) => {
-        if (typeof feature[childName] !== 'string') return;
-        that.module.features[name][childName] = feature[childName].replace(/\$\{(.+)\}/g, (match, rest) => {
-          let replacement = match;
-          replacement = that.locale[rest] || replacement;
-          return replacement;
-        });
-      });
+    this.translateObject(this.locale, this.module.features, {
+      currentLevel: 0,
+      maxLevel: 4,
     });
     return this;
   }
+  /**
+   * Loop translate object
+   * @param locale
+   * @param origin
+   * @param opts.maxLevel loop object level
+   */
+  private translateObject(locale, origin, opts) {
+    if (opts.currentLevel >= opts.maxLevel) return;
+    Object.keys(origin).forEach((name) => {
+      if (typeof origin[name] !== 'string') {
+        let newOpts = { maxLevel: opts.maxLevel, currentLevel: opts.currentLevel + 1 };
+        this.translateObject(locale, origin[name], newOpts);
+        return;
+      }
+      origin[name] = this.translateString(locale, origin[name]);
+    });
+  }
+  /**
+   * Translate primitive data types(string/numebr/..)
+   * @param locale
+   * @param variable
+   */
+  private translateString(locale, variable) {
+    return variable.replace(/\$\{(.+)\}/g, (match, rest) => {
+      let replacement = match;
+      replacement = locale[rest] || replacement;
+      return replacement;
+    });
+  }
 }

src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.html

@@ -9,39 +9,48 @@
   </div>
   <section class="h-full p-4 max-w-[80vw] mx-auto">
     <div class="flex">
-      <i class="block w-24 h-24 mr-8 bg-center bg-no-repeat bg-cover border rounded-lg bd_all"
-        [ngStyle]="{ 'background-image': 'url(' + (extensionDetail?.logo || '') + ')' }"></i>
+      <i
+        class="block w-24 h-24 mr-8 bg-center bg-no-repeat bg-cover border rounded-lg bd_all"
+        [ngStyle]="{ 'background-image': 'url(' + (extensionDetail?.logo || '') + ')' }"
+      ></i>
       <div class="flex flex-col flex-1">
         <div class="flex flex-col">
           <span class="mb-2 text-xl font-bold">{{ extensionDetail?.moduleName }}</span>
           <p class="w-full h-20">{{ extensionDetail?.description }}</p>
         </div>
-        <div class="flex">
-
-        </div>
+        <div class="flex"></div>
       </div>
     </div>
     <div class="flex w-full mt-6 h-[calc(100vh-350px)]">
-      <div class="flex-auto">
+      <div class="flex-auto min-w-0">
         <h2 class="text-lg font-bold" i18n>Intro</h2>
         <!-- <nz-divider></nz-divider> -->
         <div class="h-full overflow-auto markdown-desc">
           <nz-skeleton [nzLoading]="introLoading" [nzActive]="true">
-            <eo-shadow-dom [text]="extensionDetail?.introduction" [options]="{ html: true }">
+            <eo-shadow-dom class="md-preview" [text]="extensionDetail?.introduction" [options]="{ html: true }">
             </eo-shadow-dom>
           </nz-skeleton>
         </div>
       </div>
       <div class="w-[1px] bg-[#f2f2f2] mx-[10px]"></div>
-      <div class="w-[200px] 2xl:w-[250px] overflow-auto h-full">
+      <div class="shrink-0 w-[200px] 2xl:w-[250px] overflow-auto h-full">
         <h2 class="text-lg font-bold" i18n>Install</h2>
         <div class="flex items-center mt-[22px]" *ngIf="!extensionDetail?.installed">
-          <button *ngIf="isElectron" nz-button nzType="primary" nzBlock nzSize="large" [nzLoading]="isOperating"
-            (click)="manageExtension('install', extensionDetail?.name)">
+          <button
+            *ngIf="isElectron"
+            nz-button
+            nzType="primary"
+            nzBlock
+            nzSize="large"
+            [nzLoading]="isOperating"
+            (click)="manageExtension('install', extensionDetail?.name)"
+            i18n
+          >
             Install
           </button>
           <div *ngIf="!isElectron">
-            <button nz-button nzType="primary" nz-dropdown [nzDropdownMenu]="download" class="!w-full" i18n>Download Client
+            <button nz-button nzType="primary" nz-dropdown [nzDropdownMenu]="download" class="!w-full" i18n>
+              Download Client
             </button>
             <nz-dropdown-menu #download="nzDropdownMenu">
               <ul nz-menu>
@@ -56,16 +65,25 @@ <h2 class="text-lg font-bold" i18n>Install</h2>
             </div>
           </div>
         </div>
-        <button *ngIf="extensionDetail?.installed" nz-button nzBlock nzType="primary" nzDanger nzSize="large"
-          [nzLoading]="isOperating" class="mt-[12px]" (click)="manageExtension('uninstall', extensionDetail?.name)" i18n>
+        <button
+          *ngIf="extensionDetail?.installed"
+          nz-button
+          nzBlock
+          nzType="primary"
+          nzDanger
+          nzSize="large"
+          [nzLoading]="isOperating"
+          class="mt-[12px]"
+          (click)="manageExtension('uninstall', extensionDetail?.name)"
+          i18n
+        >
           Uninstall
         </button>
 
         <h2 class="text-lg font-bold mt-[30px]" i18n>Support</h2>
         <nz-descriptions [nzColumn]="1" nzTitle="">
-          <nz-descriptions-item i18n-nzTitle nzTitle="Author">{{ extensionDetail?.author}}</nz-descriptions-item>
-          <nz-descriptions-item i18n-nzTitle nzTitle="Version">{{ extensionDetail?.version }}
-          </nz-descriptions-item>
+          <nz-descriptions-item i18n-nzTitle nzTitle="Author">{{ extensionDetail?.author }}</nz-descriptions-item>
+          <nz-descriptions-item i18n-nzTitle nzTitle="Version">{{ extensionDetail?.version }} </nz-descriptions-item>
         </nz-descriptions>
       </div>
     </div>

src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.scss

@@ -4,23 +4,28 @@
       padding-top: 20px;
     }
   }
-}
-::ng-deep  .extension-detail {
-
-.markdown-desc {
-  overflow: auto;
-  &::-webkit-scrollbar {
-    width:0;
- }
- &:hover::-webkit-scrollbar {
-    width:8px;
+  .md-preview {
+    img {
+      max-width: 800px;
+    }
   }
-}
-
-.ant-descriptions-row > td {
-  padding-bottom: 8px;
-}
-  .ant-descriptions-item-content,.ant-descriptions-item-label {
-    color: #999;
+  .extension-detail {
+    .markdown-desc {
+      overflow: auto;
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+      &:hover::-webkit-scrollbar {
+        width: 8px;
+      }
+    }
+
+    .ant-descriptions-row > td {
+      padding-bottom: 8px;
+    }
+    .ant-descriptions-item-content,
+    .ant-descriptions-item-label {
+      color: #999;
+    }
   }
-}
+}

src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.ts

@@ -4,6 +4,7 @@ import { ElectronService } from 'eo/workbench/browser/src/app/core/services';
 import { EoExtensionInfo } from '../extension.model';
 import { ResourceInfo } from '../../../shared/models/client.model';
 import { ExtensionService } from '../extension.service';
+import { LanguageService } from 'eo/workbench/browser/src/app/core/services/language/language.service';
 
 @Component({
   selector: 'eo-extension-detail',
@@ -22,7 +23,8 @@ export class ExtensionDetailComponent implements OnInit {
     private extensionService: ExtensionService,
     private route: ActivatedRoute,
     private router: Router,
-    private electronService: ElectronService
+    private electronService: ElectronService,
+    private language: LanguageService
   ) {
     this.getDetail();
     this.getInstaller();
@@ -33,17 +35,26 @@ export class ExtensionDetailComponent implements OnInit {
       this.route.snapshot.queryParams.name
     );
     if (!this.extensionDetail?.installed) {
-      await this.fetchReadme();
+      await this.fetchReadme(this.language.systemLanguage);
     }
     this.extensionDetail.introduction ||= $localize`This plugin has no documentation yet.`;
   }
 
-  async fetchReadme() {
+  async fetchReadme(locale = '') {
+    //Default locale en-US
+    if (locale === 'en-US') locale = '';
     try {
       this.introLoading = true;
-      const response = await fetch(`https://unpkg.com/${this.extensionDetail.name}/README.md`);
+      const response = await fetch(
+        `https://unpkg.com/${this.extensionDetail.name}@${this.extensionDetail.version}/README.${
+          locale ? locale + '.' : ''
+        }md`
+      );
       if (response.status === 200) {
         this.extensionDetail.introduction = await response.text();
+      } else if (locale) {
+        //If locale README not find,fetch default locale(en-US)
+        this.fetchReadme();
       }
     } catch (error) {
     } finally {
@@ -92,7 +103,6 @@ export class ExtensionDetailComponent implements OnInit {
 
   manageExtension(operate: string, id) {
     this.isOperating = true;
-    console.log(this.isOperating);
     /**
      * * WARNING:Sending a synchronous message will block the whole
      * renderer process until the reply is received, so use this method only as a last
@@ -107,7 +117,7 @@ export class ExtensionDetailComponent implements OnInit {
         }
         case 'uninstall': {
           this.extensionDetail.installed = !this.extensionService.uninstall(id);
-          this.fetchReadme();
+          this.fetchReadme(this.language.systemLanguage);
           break;
         }
       }

src/workbench/browser/src/app/pages/extension/extension.service.ts

@@ -30,28 +30,29 @@ export class ExtensionService {
   private translateModule(module: ModuleInfo) {
     const lang = this.language.systemLanguage;
     const locale = module.i18n?.find((val) => val.locale === lang)?.package;
-    console.log(locale, module);
     if (!locale) return module;
     module = new TranslateService(module, locale).translate();
     return module;
   }
   public async requestList() {
     let result: any = await lastValueFrom(this.http.get(`${this.HOST}/list?locale=${this.language.systemLanguage}`));
+    let installList = this.getInstalledList();
     result.data = [
-      ...result.data,
+      ...result.data.filter((val) => installList.every((childVal) => childVal.name !== val.name)),
       //Local debug package
-      ...this.getInstalledList().filter((val) => result.data.every((childVal) => childVal.name !== val.name)),
+      ...installList,
     ];
+    console.log(result.data)
     result.data = result.data.map((module) => this.translateModule(module));
     return result;
   }
   async getDetail(id, name): Promise<any> {
     let result = {};
+    let { code, data }: any = await this.requestDetail(name);
+    Object.assign(result, data);
     if (this.localExtensions.has(id)) {
       Object.assign(result, this.localExtensions.get(id), { installed: true });
     }
-    let { code, data }: any = await this.requestDetail(name);
-    Object.assign(result, data);
     return result;
   }
   /**

src/workbench/browser/src/app/pages/extension/list/extension-list.component.html

@@ -5,7 +5,7 @@
       class="bd_all w-full min-h-[140px] p-5 rounded-lg flex flex-col flex-wrap items-center plugin-block hover:border-green-700 hover:shadow-lg transition-shadow duration-300"
       *ngFor="let it of renderList" (click)="clickExtension(it)">
       <div class="flex w-full">
-        <div class=" block w-[40px] h-[40px] rounded-lg bg-cover bg-center bg-no-repeat mr-[20px]"
+        <div class="shrink-0 block w-[40px] h-[40px] rounded-lg bg-cover bg-center bg-no-repeat mr-[20px]"
           [ngClass]="{ 'bg-gray-100': it.logo }" [ngStyle]="{ 'background-image': 'url(' + (it.logo || '') + ')' }">
         </div>