perf: 优化左侧物料区

one-piece-studio · Feb 25, 2024 · 75f885f · 75f885f
1 parent 2611ae7
commit 75f885f
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 12 deletions.
diff --git a/src/app/components/icons/close.ts b/src/app/components/icons/close.ts
@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-close-svg',
+  standalone: true,
+  template: `
+    <svg
+      viewBox="64 64 896 896"
+      [attr.width]="width"
+      [attr.height]="height"
+      fill="currentColor"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <path
+        d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+      ></path>
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CloseSvg {
+  @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
@@ -5,6 +5,8 @@ import { OutlineSvg } from '@/app/components/icons/outline';
 import { HistorySvg } from '@/app/components/icons/history';
 import { ExpandSvg } from '@/app/components/icons/expand';
 import { CardSourceSvg, InputSourceSvg, TextAreaSourceSvg } from '@/app/components/icons/sources';
+import { PinFilledSvg, PinOutlinedSvg } from '@/app/components/icons/pin';
+import { CloseSvg } from '@/app/components/icons/close';
 
 export class IconRegister extends IconFactory {
   constructor() {
@@ -16,5 +18,8 @@ export class IconRegister extends IconFactory {
     this.register(IconType.InputSource, InputSourceSvg);
     this.register(IconType.TextAreaSource, TextAreaSourceSvg);
     this.register(IconType.CardSource, CardSourceSvg);
+    this.register(IconType.PushPinOutlined, PinOutlinedSvg);
+    this.register(IconType.PushPinFilled, PinFilledSvg);
+    this.register(IconType.Close, CloseSvg);
   }
 }
diff --git a/src/app/components/icons/icon.type.ts b/src/app/components/icons/icon.type.ts
@@ -5,5 +5,8 @@ export enum IconType {
   Expand = 'Expand',
   InputSource = 'InputSource',
   TextAreaSource = 'TextAreaSource',
-  CardSource = 'CardSource'
+  CardSource = 'CardSource',
+  PushPinOutlined = 'PushPinOutlined',
+  PushPinFilled = 'PushPinFilled',
+  Close = 'Close'
 }
diff --git a/src/app/components/icons/pin.ts b/src/app/components/icons/pin.ts
@@ -0,0 +1,53 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-pin-outlined-svg',
+  standalone: true,
+  template: `
+    <svg
+      viewBox="64 64 896 896"
+      focusable="false"
+      data-icon="pushpin"
+      [attr.width]="width"
+      [attr.height]="height"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
+      ></path>
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PinOutlinedSvg {
+  @Input() width: string | number = '1em';
+
+  @Input() height: string | number = '1em';
+}
+
+@Component({
+  selector: 'app-pin-filled-svg',
+  standalone: true,
+  template: `
+    <svg
+      viewBox="64 64 896 896"
+      focusable="false"
+      data-icon="pushpin"
+      [attr.width]="width"
+      [attr.height]="height"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3-15.4 12.3-16.6 35.4-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8z"
+      ></path>
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PinFilledSvg {
+  @Input() width: string | number = '1em';
+
+  @Input() height: string | number = '1em';
+}
diff --git a/src/app/components/panels/composite-panel.component.ts b/src/app/components/panels/composite-panel.component.ts
@@ -26,7 +26,7 @@ import { NgIf } from '@angular/common';
       <ng-content></ng-content>
     </ng-container>
   `,
-  styleUrls: ['./styles.less'],
+  styleUrls: ['../styles/styles.less'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CompositePanelItemComponent {
@@ -54,12 +54,34 @@ export class CompositePanelItemComponent {
           </div>
         </ng-container>
       </div>
-      <div class="{{ prefix }}-tabs-content">
+      <div class="{{ prefix }}-tabs-content" [class.pinning]="pinning()" *ngIf="visible()">
         <div class="{{ prefix }}-tabs-header">
           <div class="{{ prefix }}-tabs-header-title">
             <app-text [title]="activeTitle"></app-text>
           </div>
-          <div class="{{ prefix }}-tabs-header-actions"> </div>
+          <div class="{{ prefix }}-tabs-header-actions">
+            <div class="{{ prefix }}-tabs-header-extra"> </div>
+            <div *ngIf="!pinning()" (click)="pinningChange()">
+              <app-icon
+                icon="PushPinOutlined"
+                classname="{{ prefix }}-tabs-header-pin"
+                [style]="{ cursor: 'pointer' }"
+              ></app-icon>
+            </div>
+            <div *ngIf="pinning()" (click)="pinningChange()">
+              <app-icon
+                icon="PushPinFilled"
+                classname="{{ prefix }}-tabs-header-pin-filled"
+                [style]="{ cursor: 'pointer' }"
+              ></app-icon>
+            </div>
+            <app-icon
+              icon="Close"
+              classname="{{ prefix }}-tabs-header-close"
+              [style]="{ cursor: 'pointer' }"
+              (click)="close()"
+            ></app-icon>
+          </div>
         </div>
         <div class="{{ prefix }}-tabs-body">
           <ng-content></ng-content>
@@ -74,7 +96,7 @@ export class CompositePanelItemComponent {
       }
     `
   ],
-  styleUrls: ['./styles.less'],
+  styleUrls: ['../styles/styles.less'],
   providers: [{ provide: IconFactory, useClass: IconRegister }, IconFactoryProvider],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -85,7 +107,7 @@ export class CompositePanelComponent implements AfterViewInit {
 
   iconItemList: IconType[] = [];
 
-  activeKey: number = 0;
+  activeKey: number = -1;
 
   activeTitle: string;
 
@@ -101,6 +123,11 @@ export class CompositePanelComponent implements AfterViewInit {
   }
 
   changeActiveTab(key: number) {
+    if (this.activeKey == key) {
+      this.visible.update(v => !v);
+    } else {
+      this.visible.set(true);
+    }
     this.activeKey = key;
     const list = this.panelItemList?.toArray();
     if (Array.isArray(list) && list.length) {
@@ -110,4 +137,12 @@ export class CompositePanelComponent implements AfterViewInit {
       list.forEach((v, i) => v.changeVisible(i === this.activeKey));
     }
   }
+
+  pinningChange() {
+    this.pinning.update(v => !v);
+  }
+
+  close() {
+    this.visible.set(false);
+  }
 }
diff --git a/src/app/components/panels/setting-panel.component.ts b/src/app/components/panels/setting-panel.component.ts
@@ -17,7 +17,7 @@ import { usePrefix } from '@/app/utils';
       }
     `
   ],
-  styleUrls: ['./styles.less'],
+  styleUrls: ['../styles/styles.less'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SettingPanelComponent {

diff --git a/src/app/components/panels/studio-panel.component.ts b/src/app/components/panels/studio-panel.component.ts
@@ -22,7 +22,7 @@ import { usePrefix } from '@/app/utils';
     </div>
   `,
   styles: [``],
-  styleUrls: ['./styles.less'],
+  styleUrls: ['../styles/styles.less'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StudioPanelComponent implements OnInit {

diff --git a/src/app/components/panels/workspace-panel.component.ts b/src/app/components/panels/workspace-panel.component.ts
@@ -18,7 +18,7 @@ import { usePrefix } from '@/app/utils';
       }
     `
   ],
-  styleUrls: ['./styles.less'],
+  styleUrls: ['../styles/styles.less'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class WorkspacePanelComponent {

diff --git a/src/app/components/panels/styles.less → src/app/components/styles/styles.less b/src/app/components/panels/styles.less → src/app/components/styles/styles.less
diff --git a/src/app/components/widgets/icon/icon.widget.ts b/src/app/components/widgets/icon/icon.widget.ts
@@ -11,30 +11,31 @@ import {
 import { usePrefix } from '@/app/utils';
 import { ComponentSvg } from '@/app/components/icons/component';
 import { IconFactoryProvider } from '@/app/components/icons/icon.factory';
-import { IconType } from '@/app/components/icons/icon.type';
 import { NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'app-icon',
   standalone: true,
   imports: [ComponentSvg, NgOptimizedImage],
   template: `
-    <div class="{{ prefix }}">
+    <div class="{{ prefix }} {{ classname }}" [style]="style">
       @if (isRegister) {
         <div #container></div>
       } @else {
         <img ngSrc="{{ icon }}" [height]="size" [width]="size" alt="" />
       }
     </div>
   `,
-  styleUrls: ['./icon.widget.less'],
+  styleUrls: ['./icon.widget.less', '../../styles/styles.less'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class IconWidget implements OnChanges, AfterViewInit {
   @Input() icon: string;
 
   @Input() size: number | string = '1em';
 
+  @Input() classname: string;
+
   @Input() style: Partial<CSSStyleDeclaration>;
 
   @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef | undefined;