feat: 添加工具栏

one-piece-studio · Mar 2, 2024 · eece1ad · eece1ad
1 parent 09adcaa
commit eece1ad
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 3 deletions.
diff --git a/src/app/components/icons/code.ts b/src/app/components/icons/code.ts
@@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-code-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="M612.266667 130.133333c-17.066667-4.266667-34.133333 6.4-38.4 23.466667L390.4 832c-4.266667 17.066667 6.4 34.133333 23.466667 38.4 2.133333 0 6.4 2.133333 8.533333 2.133333 14.933333 0 27.733333-8.533333 29.866667-23.466666l181.333333-680.533334c6.4-17.066667-4.266667-34.133333-21.333333-38.4zM1015.466667 477.866667L744.533333 206.933333c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l247.466667 247.466667-249.6 249.6c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.933333 8.533333 23.466667 8.533333s17.066667-2.133333 23.466666-8.533333l270.933334-270.933333c6.4-6.4 8.533333-14.933333 8.533333-23.466667s-4.266667-14.933333-8.533333-21.333333zM326.4 206.933333c-12.8-12.8-32-12.8-44.8 0L8.533333 477.866667c-4.266667 6.4-8.533333 12.8-8.533333 21.333333s4.266667 17.066667 8.533333 23.466667l270.933334 270.933333c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333c12.8-12.8 12.8-32 0-44.8L76.8 499.2l247.466667-247.466667c12.8-12.8 12.8-32 2.133333-44.8z"
+        p-id="4084"
+      ></path>
+    </svg>
+  `
+})
+export class CodeSvg {
+  @Input() width: string | number = '1em';
+
+  @Input() height: string | number = '1em';
+}
diff --git a/src/app/components/icons/design.ts b/src/app/components/icons/design.ts
@@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-design-svg',
+  standalone: true,
+  template: `
+    <svg
+      viewBox="0 0 1260 1024"
+      [attr.width]="width"
+      [attr.height]="height"
+      fill="currentColor"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <path
+        d="M166.137305 564.657231a35.603692 35.603692 0 1 1 71.168 0 35.603692 35.603692 0 0 1-71.168 0z m54.744615-179.830154a55.847385 55.847385 0 1 1 111.694769 0 55.847385 55.847385 0 0 1-111.655384 0z m206.296615-146.313846a72.073846 72.073846 0 1 1 144.108308 0 72.073846 72.073846 0 0 1-144.108308 0z m272.541539 0a90.466462 90.466462 0 1 1 180.972308 0 90.466462 90.466462 0 0 1-180.972308 0z m549.021538-88.103385a31.783385 31.783385 0 0 1 3.15077 44.819692L771.596997 748.307692l-108.740923 75.657846 60.612923-119.138461L1202.858535 152.733538a31.783385 31.783385 0 0 1 44.859077-3.150769l0.945231 0.787693z m-82.156307 307.003077a32.413538 32.413538 0 0 1 32.295384 34.973539h0.118154c-2.56 29.459692-73.058462 298.535385-269.981538 415.350153-328.192 194.717538-543.350154 48.758154-586.358154-20.755692-29.696-48.009846-52.381538-100.864-69.710769-120.792615-27.214769-31.192615-150.055385 43.244308-233.944616-50.845539-83.928615-94.129231-58.525538-470.449231 343.276308-651.027692 367.931077-165.336615 631.414154 36.155077 673.161846 71.286154a31.428923 31.428923 0 1 1-38.990769 49.348923C917.241305 102.4 719.530535 28.199385 487.358228 89.796923 155.542843 176.206769 21.674535 525.351385 78.388382 660.046769c30.523077 72.467692 175.852308 6.222769 233.314461 53.996308 21.425231 17.801846 59.037538 91.254154 83.731692 134.774154 44.898462 79.281231 286.72 140.996923 497.979077 3.820307 195.820308-127.133538 240.718769-365.331692 240.71877-365.331692h0.118153a32.413538 32.413538 0 0 1 32.295385-29.892923z"
+        p-id="3059"
+      ></path>
+    </svg>
+  `
+})
+export class DesignSvg {
+  @Input() width: string | number = '1em';
+
+  @Input() height: string | number = '1em';
+}
diff --git a/src/app/components/icons/icon.register.ts b/src/app/components/icons/icon.register.ts
@@ -14,6 +14,10 @@ import { SelectionSvg } from '@/app/components/icons/selection';
 import { PcSvg } from '@/app/components/icons/pc';
 import { MobileSvg } from '@/app/components/icons/mobile';
 import { ResponsiveSvg } from '@/app/components/icons/responsive';
+import { DesignSvg } from '@/app/components/icons/design';
+import { JsonSvg } from '@/app/components/icons/json';
+import { CodeSvg } from '@/app/components/icons/code';
+import { PlaySvg } from '@/app/components/icons/play';
 
 export class IconRegister extends IconFactory {
   constructor() {
@@ -35,5 +39,9 @@ export class IconRegister extends IconFactory {
     this.register(IconType.Pc, PcSvg);
     this.register(IconType.Mobile, MobileSvg);
     this.register(IconType.Responsive, ResponsiveSvg);
+    this.register(IconType.Design, DesignSvg);
+    this.register(IconType.Json, JsonSvg);
+    this.register(IconType.Code, CodeSvg);
+    this.register(IconType.Play, PlaySvg);
   }
 }
diff --git a/src/app/components/icons/icon.type.ts b/src/app/components/icons/icon.type.ts
@@ -15,5 +15,9 @@ export enum IconType {
   Selection = 'Selection',
   Pc = 'Pc',
   Mobile = 'Mobile',
-  Responsive = 'Responsive'
+  Responsive = 'Responsive',
+  Design = 'Design',
+  Json = 'Json',
+  Code = 'Code',
+  Play = 'Play'
 }
diff --git a/src/app/components/icons/json.ts b/src/app/components/icons/json.ts
@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-json-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="M206.497462,203.065268 C225.380711,197.940758 240,211.850142 240,233.080254 C240,250.650002 230.253807,260.166948 222.944162,263.09524 C163.857868,285.057424 155.329949,307.751682 155.329949,357.532634 C155.329949,372.174091 156.548223,396.332494 156.548223,411.706023 C156.548223,468.807703 133.401015,496.626471 93.1979695,512 C134.010152,528.105602 156.548223,555.192297 156.548223,612.293977 C156.548223,619.107246 156.308942,627.645952 156.04247,636.317008 L155.98059,638.319645 L155.897583,640.989618 C155.607459,650.323572 155.329949,659.479398 155.329949,666.467366 C155.329949,716.248318 163.857868,738.942576 222.944162,760.90476 C230.253807,763.833052 240,773.349998 240,790.919746 C240,812.149858 225.380711,826.059242 206.497462,820.934732 C112.081218,796.044256 87.106599,750.655741 87.106599,678.912604 C87.106599,673.593637 87.3924294,663.980713 87.687192,654.067212 L87.687192,654.067212 L87.801145,650.223294 C88.0747343,640.939007 88.3248731,631.842609 88.3248731,626.203361 C88.3248731,572.762044 72.4873096,548.603641 31.0659898,547.139496 C11.5736041,545.67535 0,531.765966 0,512 C0,492.234034 11.5736041,478.32465 31.0659898,476.860504 C72.4873096,474.664286 88.3248731,451.237956 88.3248731,397.064567 C88.3248731,391.425318 88.0747343,382.32892 87.801145,373.044633 L87.801145,373.044633 L87.687192,369.200715 C87.3924294,359.287214 87.106599,349.67429 87.106599,344.355323 C87.106599,273.344259 112.081218,227.955744 206.497462,203.065268 Z M817.502538,203.065268 C911.918782,227.955744 936.893401,273.344259 936.893401,344.355323 C936.893401,349.67429 936.607571,359.287214 936.312808,369.200715 L936.198855,373.044633 C935.925266,382.32892 935.675127,391.425318 935.675127,397.064567 C935.675127,451.237956 951.51269,474.664286 992.93401,476.860504 C1012.4264,478.32465 1024,492.234034 1024,512 C1024,531.765966 1012.4264,545.67535 992.93401,547.139496 C951.51269,548.603641 935.675127,572.762044 935.675127,626.203361 C935.675127,631.842609 935.925266,640.939007 936.198855,650.223294 L936.312808,654.067212 C936.607571,663.980713 936.893401,673.593637 936.893401,678.912604 C936.893401,750.655741 911.918782,796.044256 817.502538,820.934732 C798.619289,826.059242 784,812.149858 784,790.919746 C784,773.349998 793.746193,763.833052 801.055838,760.90476 C860.142132,738.942576 868.670051,716.248318 868.670051,666.467366 C868.670051,659.479398 868.392541,650.323572 868.102417,640.989618 L868.01941,638.319645 L867.95753,636.317008 C867.691058,627.645952 867.451777,619.107246 867.451777,612.293977 C867.451777,555.192297 889.989848,528.105602 930.80203,512 C890.598985,496.626471 867.451777,468.807703 867.451777,411.706023 C867.451777,396.332494 868.670051,372.174091 868.670051,357.532634 C868.670051,307.751682 860.142132,285.057424 801.055838,263.09524 C793.746193,260.166948 784,250.650002 784,233.080254 C784,211.850142 798.619289,197.940758 817.502538,203.065268 Z M312,549 C342.375661,549 367,573.624339 367,604 C367,634.375661 342.375661,659 312,659 C281.624339,659 257,634.375661 257,604 C257,573.624339 281.624339,549 312,549 Z M512,549 C542.375661,549 567,573.624339 567,604 C567,634.375661 542.375661,659 512,659 C481.624339,659 457,634.375661 457,604 C457,573.624339 481.624339,549 512,549 Z M712,549 C742.375661,549 767,573.624339 767,604 C767,634.375661 742.375661,659 712,659 C681.624339,659 657,634.375661 657,604 C657,573.624339 681.624339,549 712,549 Z"
+      ></path>
+    </svg>
+  `
+})
+export class JsonSvg {
+  @Input() width: string | number = '1em';
+
+  @Input() height: string | number = '1em';
+}
diff --git a/src/app/components/icons/play.ts b/src/app/components/icons/play.ts
@@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-play-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="M453.553208,130.165945 C510.884384,98.2598995 583.075347,118.345868 615.784549,174.941064 L616.763596,176.667229 L924.649574,729.899847 C934.581184,747.745708 939.793739,767.831089 939.793739,788.254399 C939.793739,853.865828 887.137053,907.178628 821.778158,908.238323 L819.793739,908.254399 L204.021781,908.254399 C183.598471,908.254399 163.51309,903.041844 145.667229,893.110235 C88.3360528,861.204189 67.357712,789.267478 98.2149938,731.641648 L99.1659454,729.899847 L407.051924,176.667229 C417.919777,157.139057 434.025036,141.033798 453.553208,130.165945 Z M492.456243,200.069836 C485.946852,203.692453 480.578432,209.060873 476.955815,215.570264 L169.069836,768.802882 C158.327059,788.106308 165.266837,812.463568 184.570264,823.206345 C190.518884,826.516881 197.214011,828.254399 204.021781,828.254399 L819.793739,828.254399 C841.885129,828.254399 859.793739,810.345789 859.793739,788.254399 C859.793739,781.446629 858.056221,774.751502 854.745684,768.802882 L546.859705,215.570264 C536.116929,196.266837 511.759669,189.327059 492.456243,200.069836 Z"
+        transform="translate(511.896869, 511.627200) rotate(-270.000000) translate(-511.896869, -511.627200) "
+      ></path>
+    </svg>
+  `
+})
+export class PlaySvg {
+  @Input() width: string | number = '1em';
+
+  @Input() height: string | number = '1em';
+}
diff --git a/src/app/components/widgets/view-tools/view-tools.widget.ts b/src/app/components/widgets/view-tools/view-tools.widget.ts
@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { usePrefix } from '../../../utils';
+import { SharedModule } from '../../../shared/shared.module';
+import { IconWidget } from '../icon/icon.widget';
+
+@Component({
+  selector: 'app-view-tools-widget',
+  standalone: true,
+  template: `
+    <div class="{{ prefix }}" [style]="style">
+      <nz-button-group>
+        @if (use.includes('DESIGNABLE')) {
+          <button nz-button nzSize="small">
+            <app-icon icon="Design"></app-icon>
+          </button>
+        }
+        @if (use.includes('JSONTREE')) {
+          <button nz-button nzSize="small">
+            <app-icon icon="Json"></app-icon>
+          </button>
+        }
+        @if (use.includes('MARKUP')) {
+          <button nz-button nzSize="small">
+            <app-icon icon="Code"></app-icon>
+          </button>
+        }
+        @if (use.includes('PREVIEW')) {
+          <button nz-button nzSize="small">
+            <app-icon icon="Play"></app-icon>
+          </button>
+        }
+      </nz-button-group>
+    </div>
+  `,
+  styleUrls: ['../../styles/styles.less'],
+  imports: [SharedModule, IconWidget],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ViewToolsWidget {
+  prefix = usePrefix('view-tools');
+
+  @Input() style: { [p: string]: any };
+
+  @Input() use = ['DESIGNABLE', 'JSONTREE', 'PREVIEW'];
+}
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -15,7 +15,7 @@
       <app-workspace-panel>
         <app-toolbar-panel>
           <app-designer-tool-widget></app-designer-tool-widget>
-          view-tool
+          <app-view-tools-widget></app-view-tools-widget>
         </app-toolbar-panel>
       </app-workspace-panel>
       <app-setting-panel>

diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
@@ -17,6 +17,7 @@ import { ToolbarPanelComponent } from '@/app/components/panels/toolbar-panel.com
 import { DesignerToolWidget } from '@/app/components/widgets/designer-tool/designer-tool.widget';
 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';
 
 @Component({
   selector: 'app-home',
@@ -32,7 +33,8 @@ import { IconRegister } from '@/app/components/icons/icon.register';
     CompositePanelItemComponent,
     ResourceWidget,
     ToolbarPanelComponent,
-    DesignerToolWidget
+    DesignerToolWidget,
+    ViewToolsWidget
   ],
   providers: [{ provide: IconFactory, useClass: IconRegister }, IconFactoryProvider],
   templateUrl: './home.component.html',