feat: 添加响应式组件

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

@@ -3,6 +3,7 @@ import { PcSimulatorComponent } from '../simulators/pc-simulator/pc-simulator.co
 import { Engine, Screen, ScreenType } from '@/app/core/models';
 import { MobileSimulatorComponent } from '@/app/components/simulators/mobile-simulator/mobile-simulator.component';
 import { NgTemplateOutlet } from '@angular/common';
+import { ResponsiveSimulator } from '@/app/components/simulators/responsive-simulator/responsive-simulator.component';
 
 @Component({
   selector: 'app-simulator',
@@ -16,14 +17,14 @@ import { NgTemplateOutlet } from '@angular/common';
         <ng-container *ngTemplateOutlet="template"></ng-container>
       </app-mobile-simulator>
     } @else {
-      <app-pc-simulator>
+      <app-responsive-simulator>
         <ng-container *ngTemplateOutlet="template"></ng-container>
-      </app-pc-simulator>
+      </app-responsive-simulator>
     }
   `,
   styles: [``],
   standalone: true,
-  imports: [PcSimulatorComponent, MobileSimulatorComponent, NgTemplateOutlet],
+  imports: [PcSimulatorComponent, MobileSimulatorComponent, NgTemplateOutlet, ResponsiveSimulator],
   changeDetection: ChangeDetectionStrategy.Default
 })
 export class SimulatorComponent {

src/app/components/icons/dragmove.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-drag-move-svg',
+  standalone: true,
+  template: `
+    <svg
+      viewBox="0 0 48 48"
+      [attr.width]="width"
+      [attr.height]="height"
+      fill="currentColor"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <path
+        d="M33.4696754,34.5190296 C34.2981025,34.5190296 34.9696754,35.1906025 34.9696754,36.0190296 C34.9696754,36.8474567 34.2981025,37.5190296 33.4696754,37.5190296 L16.4696754,37.5190296 C15.6412482,37.5190296 14.9696754,36.8474567 14.9696754,36.0190296 C14.9696754,35.1906025 15.6412482,34.5190296 16.4696754,34.5190296 L33.4696754,34.5190296 Z M38.4696754,23.5190296 C39.2981025,23.5190296 39.9696754,24.1906025 39.9696754,25.0190296 C39.9696754,25.8474567 39.2981025,26.5190296 38.4696754,26.5190296 L11.4696754,26.5190296 C10.6412482,26.5190296 9.96967536,25.8474567 9.96967536,25.0190296 C9.96967536,24.1906025 10.6412482,23.5190296 11.4696754,23.5190296 L38.4696754,23.5190296 Z M43.4696754,12.5190296 C44.2981025,12.5190296 44.9696754,13.1906025 44.9696754,14.0190296 C44.9696754,14.8474567 44.2981025,15.5190296 43.4696754,15.5190296 L6.46967536,15.5190296 C5.64124824,15.5190296 4.96967536,14.8474567 4.96967536,14.0190296 C4.96967536,13.1906025 5.64124824,12.5190296 6.46967536,12.5190296 L43.4696754,12.5190296 Z"
+        transform="translate(24.969675, 25.019030) rotate(-45.000000) translate(-24.969675, -25.019030) "
+      ></path>
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DragMoveSvg {
+  @Input() width: string | number = '1em';
+
+  @Input() height: string | number = '1em';
+}

src/app/components/icons/icon.register.ts

@@ -32,6 +32,9 @@ import { CloneSvg } from '@/app/components/icons/clone';
 import { ContainerSvg } from '@/app/components/icons/container';
 import { RemoveSvg } from '@/app/components/icons/remove';
 import { FlipSvg } from '@/app/components/icons/flip';
+import { RecoverSvg } from '@/app/components/icons/recover';
+import { MenuSvg } from '@/app/components/icons/menu';
+import { DragMoveSvg } from '@/app/components/icons/dragmove';
 
 export class IconRegister extends IconFactory {
   constructor() {
@@ -69,5 +72,8 @@ export class IconRegister extends IconFactory {
     this.register(IconType.Container, ContainerSvg);
     this.register(IconType.Remove, RemoveSvg);
     this.register(IconType.Flip, FlipSvg);
+    this.register(IconType.Recover, RecoverSvg);
+    this.register(IconType.Menu, MenuSvg);
+    this.register(IconType.DragMove, DragMoveSvg);
   }
 }

src/app/components/icons/icon.type.ts

@@ -31,5 +31,8 @@ export enum IconType {
   Clone = 'Clone',
   Container = 'Container',
   Remove = 'Remove',
-  Flip = 'Flip'
+  Flip = 'Flip',
+  Recover = 'Recover',
+  Menu = 'Menu',
+  DragMove = 'DragMove'
 }

src/app/components/icons/menu.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-svg',
+  standalone: true,
+  template: `
+    <svg
+      viewBox="0 0 48 48"
+      [attr.width]="width"
+      [attr.height]="height"
+      fill="currentColor"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <path
+        d="M42.5,33 C43.3284271,33 44,33.6715729 44,34.5 C44,35.3284271 43.3284271,36 42.5,36 L5.5,36 C4.67157288,36 4,35.3284271 4,34.5 C4,33.6715729 4.67157288,33 5.5,33 L42.5,33 Z M42.5,22 C43.3284271,22 44,22.6715729 44,23.5 C44,24.3284271 43.3284271,25 42.5,25 L5.5,25 C4.67157288,25 4,24.3284271 4,23.5 C4,22.6715729 4.67157288,22 5.5,22 L42.5,22 Z M42.5,11 C43.3284271,11 44,11.6715729 44,12.5 C44,13.3284271 43.3284271,14 42.5,14 L5.5,14 C4.67157288,14 4,13.3284271 4,12.5 C4,11.6715729 4.67157288,11 5.5,11 L42.5,11 Z"
+      />
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MenuSvg {
+  @Input() width: string | number = '1em';
+
+  @Input() height: string | number = '1em';
+}

src/app/components/icons/recover.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-recover-svg',
+  standalone: true,
+  template: `
+    <svg
+      viewBox="0 0 1024 1024"
+      [attr.width]="width"
+      [attr.height]="height"
+      fill="currentColor"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <path
+        d="M938.336973 255.26894c-16.685369-6.020494-35.090879 2.752226-40.939358 19.437594l-24.770032 69.493701c-29.070385-65.537376-74.998152-123.162103-133.48295-166.337645-185.947253-137.611288-450.848984-100.112212-590.180413 83.942886C81.534688 350.908785 52.980346 460.653788 68.805644 570.742819c15.825298 110.605073 74.48211 208.481102 164.789518 275.394591 75.686209 55.904586 164.273476 83.082815 252.172686 83.082815 128.494541 0 255.26894-57.624727 338.007727-166.853687 36.639006-48.335965 61.581052-102.348396 74.48211-160.833193 3.78431-17.373425-7.224593-34.402822-24.426004-38.187133-17.201411-3.78431-34.402822 7.052579-38.187133 24.426004-10.836889 49.36805-31.994625 95.123803-62.957164 135.891147-118.173694 156.016798-342.996136 187.839409-500.90509 70.869814-76.546279-56.592642-126.086343-139.33143-139.503444-232.907106-13.417101-93.059634 10.664875-185.775239 67.77356-261.11742C318.05409 144.491853 542.704519 112.497228 700.785486 229.466823c57.280699 42.315471 100.112212 100.972283 123.334117 167.197715l-110.261045-43.003528c-16.513355-6.364522-35.090879 1.720141-41.627415 18.233496-6.536536 16.513355 1.720141 35.090879 18.233496 41.627415l162.38132 63.473207c3.78431 1.548127 7.740635 2.236183 11.69696 2.236183 0.516042 0 1.032085-0.172014 1.548127-0.172014 1.204099 0.172014 2.408198 0.688056 3.612296 0.688056 13.245087 0 25.630102-8.256677 30.274483-21.32975l57.796741-161.693264C963.623047 279.694944 955.022342 261.289434 938.336973 255.26894z"
+      ></path>
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RecoverSvg {
+  @Input() width: string | number = '1em';
+
+  @Input() height: string | number = '1em';
+}

src/app/components/simulators/responsive-simulator/resize-handler.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { usePrefix } from '../../../utils';
+import { Engine } from '../../../core/models';
+import { AttributeDirective } from '../../../directive';
+import { NgClass } from '@angular/common';
+
+export enum ResizeHandleType {
+  Resize = 'RESIZE',
+  ResizeWidth = 'RESIZE_WIDTH',
+  ResizeHeight = 'RESIZE_HEIGHT'
+}
+
+@Component({
+  selector: 'app-resize-handler',
+  template: `
+    <div class="{{ prefix }}" [attributes]="attributes" [ngClass]="currentClass">
+      <ng-content></ng-content>
+    </div>
+  `,
+  standalone: true,
+  imports: [AttributeDirective, NgClass],
+  styleUrls: ['./responsive-simulator.component.less'],
+  encapsulation: ViewEncapsulation.None
+})
+export class ResizeHandlerComponent implements OnChanges {
+  prefix = usePrefix('resize-handle');
+
+  @Input() type: ResizeHandleType;
+
+  attributes: { [p: string]: any };
+
+  currentClass: { [p: string]: boolean };
+
+  constructor(private designer: Engine) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.type && changes.type.currentValue) {
+      this.attributes = {
+        [this.designer.props.screenResizeHandlerAttrName]: this.type
+      };
+      this.currentClass = {
+        [`${this.prefix}-${this.type}`]: !!this.type
+      };
+    }
+  }
+}

src/app/components/simulators/responsive-simulator/responsive-simulator.component.less

@@ -0,0 +1,56 @@
+@import '../../../../theme/variables.less';
+
+.@{prefix-cls}-responsive-simulator {
+  background-color: var(--dn-responsive-simulator-bg-color);
+}
+
+.@{prefix-cls}-resize-handle {
+  position: absolute;
+  transition: 0.2s all ease-in-out;
+  box-sizing: border-box;
+  user-select: none;
+  bottom: 0;
+  z-index: 10;
+  background: var(--dn-resize-handle-bg-color);
+  color: var(--dn-resize-handle-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-RESIZE_WIDTH {
+    top: 0;
+    bottom: 15px;
+    cursor: ew-resize;
+
+    svg {
+      transform-origin: center;
+      transform: rotate(-90deg);
+    }
+  }
+
+  &-RESIZE_HEIGHT {
+    left: 0;
+    right: 15px;
+    cursor: ns-resize;
+  }
+
+  &-RESIZE {
+    cursor: nwse-resize;
+  }
+
+  &-RESIZE_HEIGHT,
+  &-RESIZE {
+    height: 15px;
+  }
+
+  &-RESIZE_WIDTH,
+  &-RESIZE {
+    right: 0;
+    width: 15px;
+  }
+
+  &:hover {
+    background: var(--dn-resize-handle-hover-bg-color);
+    color: var(--dn-resize-handle-hover-color);
+  }
+}