update: experiment

library/media/media.component.html

@@ -1,7 +1,7 @@
 <nz-space>
   <button *nzSpaceItem type="button" nz-button (click)="view()">
     <i nz-icon nzType="import"></i>
-    Import
+    <span i18n>Import</span>
   </button>
   <button *nzSpaceItem type="button" nz-button nzType="link" [disabled]="values?.length === 0" (click)="openSort()">
     <i nz-icon nzType="sort-descending"></i>

library/upload/avatar/avatar.component.html

@@ -4,7 +4,7 @@
   [wpxExt]="wpxExt"
   nzListType="picture-card"
   [nzAccept]="wpxAccept"
-  [nzFileType]="wpxAccept | wpxJoin: ','"
+  [nzFileType]="wpxAccept | wpxJoin : ','"
   (nzChange)="change($event)"
 >
   <ng-container *ngIf="value; else uploadBtn">

library/upload/avatar/avatar.component.ts

@@ -50,7 +50,7 @@ export class WpxUploadAvatarComponent implements ControlValueAccessor {
       this.value = Reflect.get(info.file.originFileObj!, 'key');
       this.onChange(this.value!);
       this.loading = false;
-      this.message.success('Avatar uploaded successfully');
+      this.message.success($localize`上传成功`);
     }
   }
 }

src/app/app.module.ts

@@ -5,7 +5,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule, Routes } from '@angular/router';
+import { Route, RouterModule, Routes } from '@angular/router';
 
 import { LayoutComponent } from '@common/components/layout/layout.component';
 import { LayoutModule } from '@common/components/layout/layout.module';
@@ -25,6 +25,7 @@ import { NzMessageModule } from 'ng-zorro-antd/message';
 import { AppComponent } from './app.component';
 import { AppGuard } from './app.guard';
 import { AppInterceptors } from './app.interceptors';
+import { experiments } from '../experiment/experiment';
 
 registerLocaleData(zh);
 
@@ -62,23 +63,13 @@ const routes: Routes = [
         loadChildren: () => import('./projects/projects.module').then(m => m.ProjectsModule),
         canActivate: [AppGuard]
       },
+      ...experiments,
       { path: '', redirectTo: 'admin', pathMatch: 'full' }
     ]
   },
   { path: '', redirectTo: 'admin', pathMatch: 'full' }
 ];
 
-if (!environment.production) {
-  routes.unshift({
-    path: 'experiment',
-    loadChildren: () => import('../experiment/experiment.module').then(m => m.ExperimentModule),
-    canActivate: [AppGuard],
-    data: {
-      breadcrumb: $localize`实验开发`
-    }
-  });
-}
-
 @NgModule({
   declarations: [AppComponent],
   imports: [

src/experiment/experiment.component.html

@@ -0,0 +1,25 @@
+<nz-layout class="common-layout" style="padding-left: 0">
+  <nz-sider nzTheme="light">
+    <ul nz-menu nzMode="inline">
+      <li nz-menu-group nzTitle="插件">
+        <ul>
+          <li nz-menu-item nzMatchRouter [routerLink]="['/experiment', 'plugins', 'richtext']">块编辑器</li>
+          <li nz-menu-item nzMatchRouter [routerLink]="['/experiment', 'plugins', 'store']">本地存储</li>
+          <li nz-menu-item nzMatchRouter [routerLink]="['/experiment', 'plugins', 'table']">动态表格</li>
+          <li nz-menu-item nzMatchRouter [routerLink]="['/experiment', 'plugins', 'upload']">上传</li>
+        </ul>
+      </li>
+      <li nz-menu-group nzTitle="引擎">
+        <ul>
+          <li nz-menu-item nzMatchRouter [routerLink]="['/experiment', 'blocks', 'grid']">栅格</li>
+          <li nz-menu-item nzMatchRouter [routerLink]="['/experiment', 'blocks', 'card']">卡片</li>
+        </ul>
+      </li>
+    </ul>
+  </nz-sider>
+  <nz-layout>
+    <nz-content style="padding: 8px">
+      <router-outlet></router-outlet>
+    </nz-content>
+  </nz-layout>
+</nz-layout>

src/experiment/experiment.component.ts

@@ -2,31 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'exp-root',
-  template: `
-    <nz-layout class="common-layout" style="padding-left: 0">
-      <nz-sider nzTheme="light">
-        <ul nz-menu nzMode="inline">
-          <li nz-menu-group nzTitle="插件">
-            <ul>
-              <li nz-menu-item nzMatchRouter [routerLink]="['/experiment', 'plugins', 'richtext']">块编辑器</li>
-              <li nz-menu-item nzMatchRouter [routerLink]="['/experiment', 'plugins', 'store']">本地存储</li>
-              <li nz-menu-item nzMatchRouter [routerLink]="['/experiment', 'plugins', 'table']">动态表格</li>
-            </ul>
-          </li>
-          <li nz-menu-group nzTitle="引擎">
-            <ul>
-              <li nz-menu-item nzMatchRouter [routerLink]="['/experiment', 'blocks', 'grid']">栅格</li>
-              <li nz-menu-item nzMatchRouter [routerLink]="['/experiment', 'blocks', 'card']">卡片</li>
-            </ul>
-          </li>
-        </ul>
-      </nz-sider>
-      <nz-layout>
-        <nz-content style="padding: 8px">
-          <router-outlet></router-outlet>
-        </nz-content>
-      </nz-layout>
-    </nz-layout>
-  `
+  templateUrl: './experiment.component.html'
 })
 export class ExperimentComponent {}

src/experiment/experiment.ts

@@ -0,0 +1,20 @@
+import { Routes } from '@angular/router';
+
+import { environment } from '@env';
+
+import { AppGuard } from '../app/app.guard';
+
+export let experiments: Routes = [];
+
+if (!environment.production) {
+  experiments = [
+    {
+      path: 'experiment',
+      loadChildren: () => import('../experiment/experiment.module').then(m => m.ExperimentModule),
+      canActivate: [AppGuard],
+      data: {
+        breadcrumb: $localize`实验开发`
+      }
+    }
+  ];
+}

src/experiment/plugins/plugins.module.ts

@@ -28,6 +28,13 @@ const routes: Routes = [
           breadcrumb: '动态表格'
         }
       },
+      {
+        path: 'upload',
+        loadChildren: () => import('./upload/upload.module').then(m => m.UploadModule),
+        data: {
+          breadcrumb: '上传'
+        }
+      },
       { path: '', redirectTo: 'richtext', pathMatch: 'full' }
     ]
   }

src/experiment/plugins/upload/upload.component.html

@@ -0,0 +1,16 @@
+<nz-card>
+  <form nz-form nzLayout="vertical" id="form" [formGroup]="form" (wpxSubmit)="submit($event)">
+    <nz-form-item>
+      <nz-form-label>Avatar</nz-form-label>
+      <nz-form-control>
+        <wpx-upload-avatar
+          wpxExt="image"
+          [wpxAccept]="['image/jpeg', 'image/png']"
+          [wpxFallback]="['assets', 'photon.svg'] | wpxAssets"
+          formControlName="avatar"
+        >
+        </wpx-upload-avatar>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</nz-card>

src/experiment/plugins/upload/upload.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'exp-upload',
+  templateUrl: './upload.component.html'
+})
+export class UploadComponent implements OnInit {
+  form!: FormGroup;
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit(): void {
+    this.form = this.fb.group({
+      avatar: [null]
+    });
+  }
+
+  submit(data: any): void {
+    console.log(data);
+  }
+}

src/experiment/plugins/upload/upload.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ShareModule } from '@common/share.module';
+import { WpxRichtextModule } from '@weplanx/ng/richtext';
+
+import { UploadComponent } from './upload.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: UploadComponent
+  }
+];
+
+@NgModule({
+  imports: [ShareModule, WpxRichtextModule, RouterModule.forChild(routes)],
+  declarations: [UploadComponent]
+})
+export class UploadModule {}