feat: 添加展示区

src/app/components/container/designer.component.ts

@@ -7,7 +7,6 @@ import { APP_PREFIX } from '@/app/constant/constant';
   standalone: true,
   imports: [SharedModule],
   template: `
-    <p>designer works!</p>
     <div [ngClass]="classNameList">
       <ng-content></ng-content>
     </div>

src/app/components/container/viewport.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { SharedModule } from '../../shared/shared.module';
+import { usePrefix } from '../../utils';
+
+@Component({
+  selector: 'app-viewport',
+  standalone: true,
+  imports: [SharedModule],
+  template: `
+    <div class="{{ prefix }}">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styleUrls: ['../styles/styles.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ViewportComponent {
+  prefix = usePrefix('viewport');
+}

src/app/components/panels/view-panel.component.ts

@@ -1,15 +1,51 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, signal, SimpleChanges } from '@angular/core';
+import { WorkspacePanelItemComponent } from '@/app/components/panels/workspace-panel.component';
+import { WorkbenchTypes } from '@/app/core/types';
+import { Workbench } from '@/app/core/models/workbench';
+import { ViewportComponent } from '@/app/components/container/viewport.component';
 
 @Component({
   selector: 'app-view-panel',
   standalone: true,
-  imports: [],
+  imports: [WorkspacePanelItemComponent, ViewportComponent],
   template: `
-    <div>
-      <ng-content></ng-content>
-    </div>
+    @if (workbench.type == 'DESIGNABLE') {
+      <app-viewport>
+        <ng-content></ng-content>
+      </app-viewport>
+    } @else {
+      <div [style]="defaultStyle()">
+        <ng-content></ng-content>
+      </div>
+    }
   `,
   styles: [``],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ViewPanelComponent {}
+export class ViewPanelComponent implements OnChanges {
+  @Input() scrollable: boolean = true;
+
+  @Input() type: WorkbenchTypes;
+
+  @Input() dragTipsDirection?: 'left' | 'right';
+
+  workbench: Workbench = { type: 'DESIGNABLE' } as any;
+
+  defaultStyle = signal({
+    overflow: 'overlay',
+    height: '100%',
+    cursor: 'auto',
+    userSelect: 'text'
+  });
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.scrollable) {
+      this.defaultStyle.set({
+        overflow: this.scrollable ? 'overlay' : 'hidden',
+        height: '100%',
+        cursor: 'auto',
+        userSelect: 'text'
+      });
+    }
+  }
+}

src/app/components/panels/viewport-panel.component.ts

@@ -1,15 +1,20 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { WorkspacePanelItemComponent } from './workspace-panel.component';
 
 @Component({
   selector: 'app-viewport-panel',
   standalone: true,
-  imports: [],
+  imports: [WorkspacePanelItemComponent],
   template: `
-    <div>
+    <app-workspace-panel-item [style]="style" [flexible]="flexible">
       <ng-content></ng-content>
-    </div>
+    </app-workspace-panel-item>
   `,
   styles: [``],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ViewportPanelComponent {}
+export class ViewportPanelComponent {
+  @Input() style: { [p: string]: any };
+
+  @Input() flexible: boolean = true;
+}

src/app/core/models/workbench.ts

@@ -0,0 +1,15 @@
+import { WorkbenchTypes } from '../types';
+import { Engine } from './engine';
+import { Workspace } from './workspace';
+
+export class Workbench {
+  workspaces: Workspace[];
+
+  currentWorkspace: Workspace;
+
+  activeWorkspace: Workspace;
+
+  engine: Engine;
+
+  type: WorkbenchTypes = 'DESIGNABLE';
+}

src/app/core/models/workspace.ts

@@ -0,0 +1 @@
+export class Workspace {}

src/app/core/types.ts

@@ -128,3 +128,5 @@ export type IDesignerIconsStore = IDesignerStore<IDesignerIcons>;
 export type IDesignerLocaleStore = IDesignerStore<IDesignerLocales>;
 export type IDesignerBehaviorStore = IDesignerStore<IBehavior[]>;
 export type IDesignerLanguageStore = IDesignerStore<string>;
+
+export type WorkbenchTypes = 'DESIGNABLE' | 'PREVIEW' | 'JSONTREE' | 'MARKUP' | (string & {});

src/app/pages/home/home.component.html

@@ -17,6 +17,11 @@
           <app-designer-tool-widget></app-designer-tool-widget>
           <app-view-tools-widget></app-view-tools-widget>
         </app-toolbar-panel>
+        <app-viewport-panel>
+          <app-view-panel>
+
+          </app-view-panel>
+        </app-viewport-panel>
       </app-workspace-panel>
       <app-setting-panel>
 

src/app/pages/home/home.component.ts

@@ -18,6 +18,8 @@ import { DesignerToolWidget } from '@/app/components/widgets/designer-tool/desig
 import { IconFactory, IconFactoryProvider } from '@/app/components/icons/icon.factory';
 import { IconRegister } from '@/app/components/icons/icon.register';
 import { ViewToolsWidget } from '@/app/components/widgets/view-tools/view-tools.widget';
+import { ViewPanelComponent } from '@/app/components/panels/view-panel.component';
+import { ViewportPanelComponent } from '@/app/components/panels/viewport-panel.component';
 
 @Component({
   selector: 'app-home',
@@ -34,7 +36,9 @@ import { ViewToolsWidget } from '@/app/components/widgets/view-tools/view-tools.
     ResourceWidget,
     ToolbarPanelComponent,
     DesignerToolWidget,
-    ViewToolsWidget
+    ViewToolsWidget,
+    ViewPanelComponent,
+    ViewportPanelComponent
   ],
   providers: [{ provide: IconFactory, useClass: IconRegister }, IconFactoryProvider],
   templateUrl: './home.component.html',