feat:list

src/core/market/browser/src/components/PluginList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="border-b px-3 py-4">
+  <div class="bdb px-3 py-4">
     <a-input v-model:value="search" @change="handleSearch(search)" placeholder="搜索关键字" class="w-60">
       <template #prefix>
         <search-outlined type="user" />

src/workbench/browser/src/app/pages/extension/extension-routing.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+
+
+import { ExtensionDetailComponent } from './detail/extension-detail.component';
+import { ExtensionListComponent } from './list/extension-list.component';
+import { ExtensionComponent } from './extension.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ExtensionComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: 'list',
+        pathMatch: 'full',
+      },
+      {
+        path: 'list',
+        component: ExtensionListComponent,
+      },
+      {
+        path: 'detail',
+        component: ExtensionDetailComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ExtensionRoutingModule {}

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

@@ -1 +1,16 @@
-<p>extension works!</p>
+<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)="handleSelect(item.id)"
+    >
+      {{ item.title }}<span *ngIf="item.showNum"> （{{ item.num }}）</span>
+    </div>
+  </section>
+  <section class="right flex-1 px-4">
+    <router-outlet></router-outlet>
+  </section>
+</section>

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

@@ -0,0 +1,41 @@
+.main {
+  height: 100%;
+  width: 100%;
+  display: flex;
+
+  .left {
+    background: #f8f8f8;
+    width: 250px;
+    padding: 10px;
+
+    .plugin-link {
+      &:hover,
+      &.active {
+        color: var(--MAIN_THEME_COLOR);
+        cursor: pointer;
+      }
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+
+  .right {
+    height: 100%;
+  }
+  .mb-2 {
+    margin-bottom: 0.5rem;
+  }
+  .py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+  .mr-2 {
+    margin-right: 0.5rem;
+}
+}

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

@@ -1,15 +1,35 @@
 import { Component, OnInit } from '@angular/core';
+import { ExtensionGroupType } from './extension.model';
+import { ExtensionService } from './extension.service';
 
 @Component({
   selector: 'eo-extension',
   templateUrl: './extension.component.html',
-  styleUrls: ['./extension.component.scss']
+  styleUrls: ['./extension.component.scss'],
 })
 export class ExtensionComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
+  groups = [
+    {
+      id: 'all',
+      title: '全部插件',
+    },
+    {
+      id: 'official',
+      title: '官方插件',
+    },
+    {
+      id: 'installed',
+      title: '已安装',
+      showNum: true,
+      num: 0,
+    },
+  ];
+  selectGroup: ExtensionGroupType = ExtensionGroupType.all;
+  constructor(private extensionService: ExtensionService) {
+    this.groups[2].num = this.extensionService.pluginNames.length;
   }
-
+  handleSelect(id: ExtensionGroupType) {
+    this.selectGroup = id;
+  }
+  ngOnInit(): void {}
 }

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

@@ -0,0 +1,10 @@
+export enum ExtensionGroupType {
+  all = 'all',
+  official = 'official',
+  installed = 'installed',
+}
+
+export interface ExtensionRes {
+  code: number;
+  data: any;
+}

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

@@ -1,19 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ExtensionComponent } from './extension/extension.component';
-import { ExtensionListComponent } from './extension-list/extension-list.component';
-import { ExtensionDetailComponent } from './extension-detail/extension-detail.component';
 
+import { ExtensionRoutingModule } from './extension-routing.module';
+import { ExtensionService } from './extension.service';
+import { ExtensionComponent } from './extension.component';
+import { ExtensionListComponent } from './list/extension-list.component';
+import { ExtensionDetailComponent } from './detail/extension-detail.component';
 
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzInputModule } from 'ng-zorro-antd/input';
 
 @NgModule({
-  declarations: [
-    ExtensionComponent,
-    ExtensionListComponent,
-    ExtensionDetailComponent
-  ],
-  imports: [
-    CommonModule
-  ]
+  imports: [NzInputModule,NzIconModule,ExtensionRoutingModule, CommonModule],
+  providers:[ExtensionService],
+  declarations: [ExtensionComponent, ExtensionListComponent, ExtensionDetailComponent],
 })
-export class ExtensionModule { }
+export class ExtensionModule {}

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

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { ModuleInfo } from '../../utils/module-loader';
+@Injectable()
+export class ExtensionService {
+  ignoreList = ['default'];
+  pluginNames: Array<string> = [];
+  localModules: Map<string, ModuleInfo>;
+  constructor() {
+    this.localModules = window.eo.getModules();
+    this.pluginNames = Array.from(this.localModules.keys())
+      .filter((it) => it)
+      .filter((it) => !this.ignoreList.includes(it));
+  }
+}

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

@@ -0,0 +1,43 @@
+<div class="right flex-1 px-4">
+  <nz-input-group class="bbd px-3 py-4" [nzPrefix]="search">
+    <input class="w-60" type="text" nz-input placeholder="搜索关键字" />
+  </nz-input-group>
+  <div class="list-block grid gap-6 py-5 px-3 grid-cols-4">
+    <div
+      class="bd_all w-full h-76 py-2 px-3 rounded-lg flex flex-col flex-wrap items-center plugin-block"
+      *ngFor="let it of renderList"
+      (click)="handleClickPlugin(it)"
+    >
+      <span class="h-8 w-full flex justify-between items-center">
+        <span
+          *ngIf="extensionService.localModules.has(it.moduleID)"
+          class="text-xs bg-green-700 text-white p-1 rounded-sm"
+          >已安装</span
+        >
+        <span
+          *ngIf="!extensionService.localModules.has(it.moduleID)"
+          class="text-xs p-1 bd_all rounded-sm text-green-700 border-green-700"
+          >未安装</span
+        >
+        <i
+          nz-icon
+          nzType="setting"
+          (click)="handleSetingPlugin(it)"
+          *ngIf="
+            extensionService.localModules.has(it.moduleID) &&
+            extensionService.localModules.get(it.moduleID).configuration
+          "
+          nzTheme="outline"
+        ></i>
+      </span>
+      <i
+        class="block w-20 h-20 my-3 rounded-lg bg-cover bg-center bg-no-repeat"
+        [ngClass]="{ 'bg-gray-100': it.logo }"
+        [ngStyle]="{ 'background-image': 'url(' + (it.logo || '') + ')' }"
+      ></i>
+      <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>
+    </div>
+  </div>
+</div>