feat: extension detail readme

Postcatlab · Jun 22, 2022 · 1863568 · 1863568
1 parent b62be5a
commit 1863568
Show file tree

Hide file tree

Showing 12 changed files with 211 additions and 105 deletions.
diff --git a/src/platform/node/extension-manager/lib/core.ts b/src/platform/node/extension-manager/lib/core.ts
@@ -2,7 +2,7 @@ import * as path from 'path';
 import { ModuleHandlerOptions, ModuleInfo } from '../types';
 import { fileExists, readJson } from 'eo/shared/node/file';
 import { isNotEmpty } from 'eo/shared/common/common';
-
+import { readFileSync } from 'node:fs';
 /**
  * 核心模块管理器
  * @class CoreHandler
@@ -37,6 +37,7 @@ export class CoreHandler {
     try {
       const baseDir: string = this.getModuleDir(name);
       moduleInfo = readJson(path.join(baseDir, 'package.json')) as ModuleInfo;
+      moduleInfo.introduction = readFileSync(path.join(baseDir, 'README.md')).toString();
       moduleInfo.baseDir = baseDir;
       moduleInfo.main = 'file://' + path.join(moduleInfo.baseDir, moduleInfo.main);
       if (moduleInfo.preload?.length > 0) {

diff --git a/src/platform/node/extension-manager/types/manager.ts b/src/platform/node/extension-manager/types/manager.ts
@@ -26,6 +26,8 @@ export interface ModuleInfo {
   version: string;
   // 模块描述
   description: string;
+  // 详细说明
+  introduction: string;
   // 模块ID，用于关联
   moduleID: string;
   // 模块名称，用于显示

diff --git a/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.html b/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.html
@@ -1,51 +1,51 @@
-<div class="py-3">
+<div class="extension-detail py-3">
   <div class="py-4">
     <a nz-button [routerLink]="['/home/extension/list']" nzType="link">
-      <i nz-icon nzType="left" nzTheme="outline"></i>返回列表
+      <i nz-icon nzType="left" nzTheme="outline"></i>Back
     </a>
   </div>
   <div class="bbd"></div>
-  <section class="">
-    <div class="flex p-8">
-      <i
-        class="bd_all block border rounded-lg h-40 w-40 bg-cover bg-center bg-no-repeat mr-8"
-        [ngStyle]="{ 'background-image': 'url(' + (extensionDetail?.logo || '') + ')' }"
-      ></i>
+  <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"
+        [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>作者: {{ extensionDetail?.author }}</span>
+          <!-- <span>作者: {{ extensionDetail?.author }}</span> -->
           <!-- <span class="mb-4">Tags: {{ extensionDetail?.keywords }}</span> -->
-          <span class="mb-2">版本: {{ extensionDetail?.version }}</span>
+          <!-- <span class="mb-2">版本: {{ extensionDetail?.version }}</span> -->
           <p class="w-full h-20">{{ extensionDetail?.description }}</p>
         </div>
         <div class="flex">
-          <div class="flex items-center" *ngIf="!extensionDetail?.installed">
-            <button
-              nz-button
-              nzType="primary"
-              [nzLoading]="isOperating"
-              (click)="manageExtension('install', extensionDetail?.name)"
-            >
-              安装
-            </button>
-            <!-- <span class="text-gray-500">安装完成后需要重启</span> -->
-          </div>
-          <button
-            *ngIf="extensionDetail?.installed"
-            nz-button
-            nzType="primary"
-            nzDanger
-            [nzLoading]="isOperating"
-            (click)="manageExtension('uninstall', extensionDetail?.name)"
-          >
-            卸载
-          </button>
+
         </div>
       </div>
     </div>
-    <div>
-      <nz-tabset [nzAnimated]="false">
+    <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>
+        </div>
+      </div>
+      <nz-divider nzType=" vertical">
+      </nz-divider>
+      <div class="w-[200px] 2xl:w-[250px]">
+        <h2 class="text-lg font-bold">Install</h2>
+        <div class="flex items-center" *ngIf="!extensionDetail?.installed">
+          <button nz-button nzType="primary" [nzLoading]="isOperating"
+            (click)="manageExtension('install', extensionDetail?.name)">
+            安装
+          </button>
+          <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>
+      </div>
+      <!-- <nz-tabset [nzAnimated]="false">
         <nz-tab nzTitle="概述"> {{ extensionDetail?.description }} </nz-tab>
         <nz-tab nzTitle="更多信息">
           <nz-descriptions [nzColumn]="1" nzTitle="">
@@ -55,9 +55,9 @@
               <a class="eo_link" target="_blank" [href]="extensionDetail?.bugs?.url">Issue</a>
             </nz-descriptions-item>
           </nz-descriptions>
-        </nz-tab>
-        <!-- <nz-tab nzTitle="设置" *ngIf="extensionDetail?.configuration && extensionDetail?.configuration.properties">Content of Tab Pane 3</nz-tab> -->
-      </nz-tabset>
+        </nz-tab> -->
+      <!-- <nz-tab nzTitle="设置" *ngIf="extensionDetail?.configuration && extensionDetail?.configuration.properties">Content of Tab Pane 3</nz-tab> -->
+      <!-- </nz-tabset> -->
     </div>
   </section>
 </div>
diff --git a/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.scss b/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.scss
@@ -3,3 +3,6 @@
     padding-top: 20px;
   }
 }
+.extension-detail {
+  height: calc(100% - 60px);
+}
diff --git a/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.ts b/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.ts
@@ -11,15 +11,20 @@ import { ExtensionService } from '../extension.service';
 export class ExtensionDetailComponent implements OnInit {
   isOperating = false;
   extensionDetail: EoExtensionInfo;
+
   constructor(private extensionService: ExtensionService, private route: ActivatedRoute) {
     this.getDetail();
   }
   async getDetail() {
-    this.extensionDetail = await this.extensionService.getDetail(this.route.snapshot.queryParams.id,this.route.snapshot.queryParams.name);
+    this.extensionDetail = await this.extensionService.getDetail(
+      this.route.snapshot.queryParams.id,
+      this.route.snapshot.queryParams.name
+    );
+    console.log(' this.extensionDetail', this.extensionDetail);
   }
   manageExtension(operate: string, id) {
     this.isOperating = true;
-    console.log(this.isOperating)
+    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

diff --git a/src/workbench/browser/src/app/pages/extension/extension.component.html b/src/workbench/browser/src/app/pages/extension/extension.component.html
@@ -1,14 +1,36 @@
 <section class="main">
   <section class="left flex-shrink-0">
-    <div class="mb-2"><i class="mr-2" nz-icon nzType="appstore" nzTheme="fill"></i>插件分类</div>
-    <div
-      class="plugin-link px-1 py-2"
-      [ngClass]="{ active: selectGroup === item.id }"
-      *ngFor="let item of groups"
-      (click)="clickGroup(item.id)"
-    >
-      {{ item.title }}<span *ngIf="item.showNum"> （{{ extensionService.extensionIDs.length }}）</span>
+    <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">
+      <nz-tree [nzData]="fixedTreeNode" [nzSelectedKeys]="nzSelectedKeys" nzBlockNode (nzClick)="clickTreeItem($event)"
+        [nzTreeTemplate]="nzFixedTreeTemplate"></nz-tree>
+      <ng-template #nzFixedTreeTemplate let-node let-origin="origin">
+        <div class="pl5 tree_node" *ngIf="node.origin?.isFixed">
+          <div class="f_row_ac">
+            <i class="mr10" nz-icon nzType="home" nzTheme="outline"></i>
+            <span class="text_omit node_title">{{ node.title }}</span>
+          </div>
+        </div>
+      </ng-template>
     </div>
+    <div class="bbd" *ngIf="electron.isElectron"></div>
+    <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">
+      <div class="pl5">
+        <div class="tree_node f_row f_js_ac" *ngIf="!node.origin?.isFixed && node.isLeaf">
+          <div class="overflow-hidden f_row_ac text-ellipsis">
+            <b class="method_text method_text_{{ node.origin.method }} mr5" *ngIf="node.origin.method">
+              {{ node.origin.method }}
+            </b>
+            <span class="text_omit node_title">{{ node.title }}</span>
+          </div>
+        </div>
+      </div>
+      <!-- <div *ngIf="node.component?.showIndicator" class="ant-tree-drop-indicator ng-star-inserted"
+      style="bottom: -3px; left: 4px; right: 0px;"></div> -->
+    </ng-template>
   </section>
   <section class="right fg1 px-4">
     <router-outlet></router-outlet>

diff --git a/src/workbench/browser/src/app/pages/extension/extension.component.scss b/src/workbench/browser/src/app/pages/extension/extension.component.scss
@@ -1,10 +1,14 @@
-.main {
+::ng-deep .main {
   height: 100%;
   width: 100%;
   display: flex;
 
+  .ant-tree-switcher {
+    width: 0;
+  }
+
   .left {
-    background: #f8f8f8;
+    border-right: 1px solid #f8f8f8;
     width: 250px;
     padding: 10px;
 

diff --git a/src/workbench/browser/src/app/pages/extension/extension.component.ts b/src/workbench/browser/src/app/pages/extension/extension.component.ts
@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ElectronService } from 'eo/workbench/browser/src/app/core/services';
+import { GroupTreeItem } from 'eo/workbench/browser/src/app/shared/models';
+import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
+import { filter, Subject } from 'rxjs';
 import { ExtensionGroupType } from './extension.model';
 import { ExtensionService } from './extension.service';
 
@@ -9,24 +13,34 @@ import { ExtensionService } from './extension.service';
   styleUrls: ['./extension.component.scss'],
 })
 export class ExtensionComponent implements OnInit {
-  groups = [
+  keyword = '';
+  nzSelectedKeys: number[] = [];
+  treeNodes: NzTreeNodeOptions[] = [
     {
-      id: 'all',
-      title: '全部插件',
-    },
-    {
-      id: 'official',
-      title: '官方插件',
+      key: 'official',
+      title: 'Official',
+      isLeaf: true,
     },
+  ];
+  fixedTreeNode: GroupTreeItem[] | NzTreeNode[] = [
     {
-      id: 'installed',
-      title: '已安装',
-      showNum: true
+      title: 'All',
+      key: 'all',
+      weight: 0,
+      parentID: '0',
+      isLeaf: true,
+      isFixed: true,
     },
   ];
-  selectGroup: ExtensionGroupType|string = ExtensionGroupType.all;
-  constructor(public extensionService: ExtensionService, private router: Router) {
-  }
+  selectGroup: ExtensionGroupType | string = ExtensionGroupType.all;
+  seachChanged$: Subject<string> = new Subject<string>();
+
+  constructor(
+    public extensionService: ExtensionService,
+    private router: Router,
+    public electron: ElectronService,
+    private route: ActivatedRoute
+  ) {}
   clickGroup(id) {
     this.selectGroup = id;
     this.router
@@ -35,5 +49,45 @@ export class ExtensionComponent implements OnInit {
       })
       .finally();
   }
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.watchRouterChange();
+  }
+
+  onSeachChange(keyword) {
+    this.seachChanged$.next(keyword);
+  }
+
+  private watchRouterChange() {
+    this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((res: any) => {
+      this.setSelectedKeys();
+    });
+  }
+
+  /**
+   * Group tree item click.
+   *
+   * @param event
+   */
+  clickTreeItem(event: NzFormatEmitEvent): void {
+    const eventName = event.node?.origin.isFixed ? 'clickFixedItem' : 'clickItem';
+
+    switch (eventName) {
+      case 'clickFixedItem': {
+        this.clickGroup(event.node.key);
+        break;
+      }
+      case 'clickItem': {
+        this.clickGroup(event.node.key);
+        break;
+      }
+    }
+  }
+
+  private setSelectedKeys() {
+    if (this.route.snapshot.queryParams.type) {
+      this.nzSelectedKeys = [this.route.snapshot.queryParams.type];
+    } else {
+      this.nzSelectedKeys = [];
+    }
+  }
 }
diff --git a/src/workbench/browser/src/app/pages/extension/extension.module.ts b/src/workbench/browser/src/app/pages/extension/extension.module.ts
@@ -14,11 +14,25 @@ import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzTabsModule } from 'ng-zorro-antd/tabs';
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzTagModule } from 'ng-zorro-antd/tag';
-
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzTreeModule } from 'ng-zorro-antd/tree';
+import { ShadowDomEncapsulationComponent } from 'eo/workbench/browser/src/app/shared/components/shadow/shadow-dom-encapsulation.component';
 
 @NgModule({
-  imports: [FormsModule,NzTabsModule,NzTagModule,NzDescriptionsModule,NzInputModule,NzButtonModule,NzIconModule,ExtensionRoutingModule, CommonModule],
-  providers:[ExtensionService],
-  declarations: [ExtensionComponent, ExtensionListComponent, ExtensionDetailComponent],
+  imports: [
+    FormsModule,
+    NzTabsModule,
+    NzTagModule,
+    NzDescriptionsModule,
+    NzInputModule,
+    NzButtonModule,
+    NzIconModule,
+    ExtensionRoutingModule,
+    CommonModule,
+    NzDividerModule,
+    NzTreeModule,
+  ],
+  providers: [ExtensionService],
+  declarations: [ExtensionComponent, ExtensionListComponent, ExtensionDetailComponent, ShadowDomEncapsulationComponent],
 })
 export class ExtensionModule {}