merge

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

@@ -1,17 +1,17 @@
-<div class="extension-detail py-3">
+<div class="py-3 extension-detail">
   <div class="py-4">
-    <a nz-button [routerLink]="['/home/extension/list']" nzType="link">
+    <a nz-button nzType="link" (click)="backToList()">
       <i nz-icon nzType="left" nzTheme="outline"></i>Back
     </a>
   </div>
   <div class="bbd"></div>
   <section class="h-full p-4 max-w-[80vw] mx-auto">
     <div class="flex">
-      <i class="bd_all block border rounded-lg h-24 w-24 bg-cover bg-center bg-no-repeat mr-8"
+      <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="text-xl mb-2 font-bold">{{ extensionDetail?.moduleName }}</span>
+          <span class="mb-2 text-xl font-bold">{{ extensionDetail?.moduleName }}</span>
           <!-- <span>作者: {{ extensionDetail?.author }}</span> -->
           <!-- <span class="mb-4">Tags: {{ extensionDetail?.keywords }}</span> -->
           <!-- <span class="mb-2">版本: {{ extensionDetail?.version }}</span> -->
@@ -25,25 +25,33 @@
     <div class="flex w-full mt-6">
       <div class="flex-auto">
         <h2 class="text-lg font-bold">Intro</h2>
-        <div class="markdown-desc">
-          <eo-shadow-dom [html]="extensionDetail?.introduction"></eo-shadow-dom>
+        <!-- <nz-divider></nz-divider> -->
+        <div class="h-full overflow-auto markdown-desc">
+          <eo-shadow-dom [html]="extensionDetail?.introduction || 'This plugin has no documentation yet.'">
+          </eo-shadow-dom>
         </div>
       </div>
-      <nz-divider nzType="vertical">
-      </nz-divider>
-      <div class="w-[200px] 2xl:w-[250px]">
+      <div class="w-[1px] bg-[#f2f2f2] mx-[10px]"></div>
+      <div class="w-[200px] 2xl:w-[250px] overflow-auto h-full">
         <h2 class="text-lg font-bold">Install</h2>
-        <div class="flex items-center" *ngIf="!extensionDetail?.installed">
-          <button nz-button nzType="primary" [nzLoading]="isOperating"
+        <div class="flex items-center mt-[22px]" *ngIf="!extensionDetail?.installed">
+          <button nz-button nzType="primary" nzBlock nzSize="large" [nzLoading]="isOperating"
             (click)="manageExtension('install', extensionDetail?.name)">
-            安装
+            Install
           </button>
-          <span class="text-gray-500">安装完成后需要重启</span>
+          <!-- <span class="text-gray-500">安装完成后需要重启</span> -->
         </div>
-        <button *ngIf="extensionDetail?.installed" nz-button nzBlock nzType="primary" nzDanger [nzLoading]="isOperating"
-          (click)="manageExtension('uninstall', extensionDetail?.name)">
-          卸载
+        <button *ngIf="extensionDetail?.installed" nz-button nzBlock nzType="primary" nzDanger nzSize="large"
+          [nzLoading]="isOperating" class="mt-[12px]" (click)="manageExtension('uninstall', extensionDetail?.name)">
+          Uninstall
         </button>
+
+        <h2 class="text-lg font-bold mt-[30px]">Support</h2>
+        <nz-descriptions [nzColumn]="1" nzTitle="">
+          <nz-descriptions-item nzTitle="Author">{{ extensionDetail?.author }}</nz-descriptions-item>
+          <nz-descriptions-item nzTitle="Version">{{ extensionDetail?.version }}
+          </nz-descriptions-item>
+        </nz-descriptions>
       </div>
       <!-- <nz-tabset [nzAnimated]="false">
         <nz-tab nzTitle="概述"> {{ extensionDetail?.description }} </nz-tab>

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

@@ -1,8 +1,20 @@
 ::ng-deep {
-  eo-extension-detail .ant-tabs-content-holder {
+  eo-extension-detail {
+    .ant-tabs-content-holder {
       padding-top: 20px;
     }
+  }
 }
-.extension-detail {
-  height: calc(100% - 60px);
+::ng-deep  .extension-detail {
+
+.markdown-desc {
+  overflow: auto;
+}
+
+.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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { EoExtensionInfo } from '../extension.model';
 import { ExtensionService } from '../extension.service';
 
@@ -12,7 +12,7 @@ export class ExtensionDetailComponent implements OnInit {
   isOperating = false;
   extensionDetail: EoExtensionInfo;
 
-  constructor(private extensionService: ExtensionService, private route: ActivatedRoute) {
+  constructor(private extensionService: ExtensionService, private route: ActivatedRoute, private router: Router) {
     this.getDetail();
   }
   async getDetail() {
@@ -44,4 +44,12 @@ export class ExtensionDetailComponent implements OnInit {
     }, 100);
   }
   ngOnInit(): void {}
+
+  backToList() {
+    this.router.navigate(['/home/extension/list'], {
+      queryParams: {
+        type: this.route.snapshot.queryParams.type,
+      },
+    });
+  }
 }

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

@@ -1,5 +1,5 @@
 <section class="main">
-  <section class="left flex-shrink-0">
+  <section class="flex-shrink-0 left">
     <input type="text" nz-input [(ngModel)]="keyword" (ngModelChange)="onSeachChange($event)" placeholder="search" />
     <!-- Fixed Group -->
     <div class="group_container fixed_group_tree pt10" *ngIf="electron.isElectron">
@@ -14,7 +14,7 @@
         </div>
       </ng-template>
     </div>
-    <div class="bbd" *ngIf="electron.isElectron"></div>
+    <nz-divider *ngIf="electron.isElectron" class="!mt-[1px] !mb-[4px]"></nz-divider>
     <nz-tree [nzData]="treeNodes" [nzSelectedKeys]="nzSelectedKeys" #apiGroup [nzHideUnMatched]="true"
       (nzClick)="clickTreeItem($event)" nzBlockNode [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
     <ng-template #nzTreeTemplate let-node let-origin="origin">
@@ -32,7 +32,7 @@
       style="bottom: -3px; left: 4px; right: 0px;"></div> -->
     </ng-template>
   </section>
-  <section class="right fg1 px-4">
+  <section class="px-4 right fg1">
     <router-outlet></router-outlet>
   </section>
 </section>

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

@@ -14,7 +14,7 @@ import { ExtensionService } from './extension.service';
 })
 export class ExtensionComponent implements OnInit {
   keyword = '';
-  nzSelectedKeys: number[] = [];
+  nzSelectedKeys: (number | string)[] = [];
   treeNodes: NzTreeNodeOptions[] = [
     {
       key: 'official',
@@ -51,6 +51,7 @@ export class ExtensionComponent implements OnInit {
   }
   ngOnInit(): void {
     this.watchRouterChange();
+    this.setSelectedKeys();
   }
 
   onSeachChange(keyword) {
@@ -87,7 +88,7 @@ export class ExtensionComponent implements OnInit {
     if (this.route.snapshot.queryParams.type) {
       this.nzSelectedKeys = [this.route.snapshot.queryParams.type];
     } else {
-      this.nzSelectedKeys = [];
+      this.nzSelectedKeys = [this.fixedTreeNode[0].key];
     }
   }
 }

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

@@ -1,24 +1,24 @@
 <div class="px-3">
   <ng-template #prefixTemplateSearch><i nz-icon nzType="search"></i></ng-template>
   <div class="bbd"></div>
-  <div class="list-block grid gap-6 py-5 grid-cols-2">
+  <div class="grid grid-cols-2 gap-6 py-5 list-block">
     <div class="bd_all w-full min-h-[140px] p-5 rounded-lg flex flex-col flex-wrap items-center plugin-block"
       *ngFor="let it of renderList" (click)="clickExtension(it)">
-      <div class="w-full flex">
+      <div class="flex w-full">
         <div class=" 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>
 
-        <div class="flex-auto flex flex-col">
+        <div class="flex flex-col flex-auto">
           <span class="text-lg font-bold">{{ it.moduleName }}</span>
-          <span class="text-gray-400 my-2">{{ it.author }}</span>
-          <span class="text-gray-500 my-1 desc">{{ it.description }}</span>
+          <span class="my-2 text-gray-400">{{ it.author }}</span>
+          <span class="my-1 text-gray-500 desc">{{ it.description }}</span>
         </div>
         <!-- <nz-tag *ngIf="extensionService.localModules.has(it.moduleID)" [nzColor]="'var(--MAIN_THEME_COLOR)'">已安装
         </nz-tag> -->
         <div>
-          <span *ngIf="!extensionService.localModules.has(it.moduleID)"
-            class="text-xs p-1 bd_all rounded-sm text-green-700 border-green-700">installed</span>
+          <span *ngIf="extensionService.localModules.has(it.moduleID)"
+            class="p-1 text-xs text-green-700 border-green-700 rounded-sm bd_all">installed</span>
         </div>
         <!-- <i
           nz-icon

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

@@ -54,7 +54,12 @@ export class ExtensionListComponent implements OnInit {
   clickExtension(item) {
     this.router
       .navigate(['home/extension/detail'], {
-        queryParams: { id: item.moduleID, name: item.name, jump: 'setting' },
+        queryParams: {
+          type: this.route.snapshot.queryParams.type,
+          id: item.moduleID,
+          name: item.name,
+          jump: 'setting',
+        },
       })
       .finally();
   }

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

@@ -1,4 +1,4 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input, ViewEncapsulation, OnInit } from '@angular/core';
 import MarkdownIt from 'markdown-it/dist/markdown-it';
 
 @Component({
@@ -7,8 +7,34 @@ import MarkdownIt from 'markdown-it/dist/markdown-it';
   styles: ['h2, .shadow-message { color: blue; }'],
   encapsulation: ViewEncapsulation.ShadowDom,
 })
-export class ShadowDomEncapsulationComponent {
+export class ShadowDomEncapsulationComponent implements OnInit {
   md = new MarkdownIt();
 
   @Input() html = '';
+
+  ngOnInit() {
+    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) => {
+      // If you are sure other plugins can't add `target` - drop check below
+      const aIndex = tokens[idx].attrIndex('target');
+
+      if (aIndex < 0) {
+        tokens[idx].attrPush(['target', '_blank']); // add new attribute
+      } else {
+        tokens[idx].attrs[aIndex][1] = '_blank'; // replace value of existing attr
+      }
+
+      // pass token to default renderer.
+      return defaultRender(tokens, idx, options, env, self);
+    };
+  }
 }