fix: some css style

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

@@ -1,5 +1,5 @@
 <div class="py-3 extension-detail">
-  <div class="sticky top-0 bg-white z-50">
+  <div class="sticky top-0 z-50 bg-white">
     <div class="py-4 ">
       <a nz-button nzType="link" (click)="backToList()">
         <i nz-icon nzType="left" nzTheme="outline"></i>Back
@@ -29,8 +29,7 @@
         <h2 class="text-lg font-bold">Intro</h2>
         <!-- <nz-divider></nz-divider> -->
         <div class="h-full overflow-auto markdown-desc">
-          <eo-shadow-dom [html]="extensionDetail?.introduction">
-          </eo-shadow-dom>
+          <eo-shadow-dom [text]="extensionDetail?.introduction" [options]="{ html: true }"> </eo-shadow-dom>
         </div>
       </div>
       <div class="w-[1px] bg-[#f2f2f2] mx-[10px]"></div>

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

@@ -20,8 +20,21 @@ export class ExtensionDetailComponent implements OnInit {
       this.route.snapshot.queryParams.id,
       this.route.snapshot.queryParams.name
     );
+    if (!this.extensionDetail?.introduction && !this.extensionDetail?.installed) {
+      await this.fetchReadme();
+    }
     this.extensionDetail.introduction ||= 'This plugin has no documentation yet.';
   }
+
+  async fetchReadme() {
+    try {
+      const htmlText = await (await fetch(`https://www.npmjs.com/package/${this.extensionDetail.name}`)).text();
+      const domParser = new DOMParser();
+      const html = domParser.parseFromString(htmlText, 'text/html');
+      this.extensionDetail.introduction = html.querySelector('#readme').innerHTML;
+    } catch (error) {}
+  }
+
   manageExtension(operate: string, id) {
     this.isOperating = true;
     console.log(this.isOperating);
@@ -34,10 +47,13 @@ export class ExtensionDetailComponent implements OnInit {
       switch (operate) {
         case 'install': {
           this.extensionDetail.installed = this.extensionService.install(id);
+          this.getDetail();
           break;
         }
         case 'uninstall': {
           this.extensionDetail.installed = !this.extensionService.uninstall(id);
+          this.fetchReadme();
+          break;
         }
       }
       this.isOperating = false;

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

@@ -13,6 +13,9 @@
       font-size: 0.9em;
     }
   }
+  .tree_node {
+    font-size: 12px;
+  }
   .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
    opacity: .8;
 }

src/workbench/browser/src/app/shared/components/setting/setting.component.html

@@ -53,7 +53,7 @@
           <!-- 二级说明 -->
           <div *ngIf="module.properties[field]?.type !== 'boolean' && module.properties[field]?.description"
             class="description">
-            <eo-shadow-dom [html]="module.properties[field]?.description || ''"></eo-shadow-dom>
+            <eo-shadow-dom [text]="module.properties[field]?.description || ''"></eo-shadow-dom>
           </div>
           <nz-form-control nzErrorTip="请输入{{ module.properties[field]?.label }}" class="form-control">
             <!-- 字符串类型 -->

src/workbench/browser/src/app/shared/components/shadow/shadow-dom-encapsulation.component.ts

@@ -3,25 +3,41 @@ import MarkdownIt from 'markdown-it/dist/markdown-it';
 
 @Component({
   selector: 'eo-shadow-dom',
-  template: ` <div [innerHTML]="md.render(html || '')"></div> `,
-  styles: ['h2, .shadow-message { color: blue; }'],
+  template: ` <div [innerHTML]="content"></div> `,
+  styles: [],
   encapsulation: ViewEncapsulation.ShadowDom,
 })
 export class ShadowDomEncapsulationComponent implements OnInit {
-  md = new MarkdownIt();
+  md: MarkdownIt;
 
-  @Input() html = '';
+  @Input() text = '';
+  @Input() options = {
+    html: false,
+  };
+
+  get content() {
+    const html = this.md.render(this.text || '');
+    if (html && this.options.html) {
+      const domParser = new DOMParser();
+      const doc = domParser.parseFromString(html, 'text/html');
+      const a = doc.querySelectorAll('a');
+      a.forEach((n) => n.setAttribute('target', '_blank'));
+      return doc.body.innerHTML;
+    } else {
+      return html;
+    }
+  }
+
+  constructor() {}
 
   ngOnInit() {
+    this.md = new MarkdownIt(this.options);
     this.customLinkRender();
   }
 
   customLinkRender() {
     const defaultRender =
-      this.md.renderer.rules.link_open ||
-      function (tokens, idx, options, env, self) {
-        return self.renderToken(tokens, idx, options);
-      };
+      this.md.renderer.rules.link_open || ((tokens, idx, options, env, self) => self.renderToken(tokens, idx, options));
 
     this.md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
       // If you are sure other plugins can't add `target` - drop check below