From 67c10808fcdbd3d508558d873053a20a6d3ac8fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E8=B1=AA=E7=8F=A3?= <519367854@qq.com> Date: Sun, 3 Mar 2024 00:13:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E5=8C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/icons/icon.register.ts | 2 + src/app/components/icons/icon.type.ts | 3 +- src/app/components/icons/setting.ts | 25 ++++ .../panels/setting-panel.component.ts | 73 ++++++++++- src/app/components/styles/styles.less | 4 +- .../components/widgets/icon/icon.widget.ts | 14 +- .../widgets/view-tools/view-tools.widget.ts | 4 +- src/app/pages/home/home.component.html | 4 +- src/app/pages/home/home.component.ts | 4 +- .../settings-form/settings-form.component.ts | 28 ++++ src/app/settings-form/styles.less | 123 ++++++++++++++++++ src/app/shared/shared.module.ts | 3 +- 12 files changed, 267 insertions(+), 20 deletions(-) create mode 100644 src/app/components/icons/setting.ts create mode 100644 src/app/settings-form/settings-form.component.ts create mode 100644 src/app/settings-form/styles.less diff --git a/src/app/components/icons/icon.register.ts b/src/app/components/icons/icon.register.ts index 4e7ddba..aabc636 100644 --- a/src/app/components/icons/icon.register.ts +++ b/src/app/components/icons/icon.register.ts @@ -18,6 +18,7 @@ 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'; +import { SettingSvg } from '@/app/components/icons/setting'; export class IconRegister extends IconFactory { constructor() { @@ -43,5 +44,6 @@ export class IconRegister extends IconFactory { this.register(IconType.Json, JsonSvg); this.register(IconType.Code, CodeSvg); this.register(IconType.Play, PlaySvg); + this.register(IconType.Setting, SettingSvg); } } diff --git a/src/app/components/icons/icon.type.ts b/src/app/components/icons/icon.type.ts index ba40aa7..3726459 100644 --- a/src/app/components/icons/icon.type.ts +++ b/src/app/components/icons/icon.type.ts @@ -19,5 +19,6 @@ export enum IconType { Design = 'Design', Json = 'Json', Code = 'Code', - Play = 'Play' + Play = 'Play', + Setting = 'Setting' } diff --git a/src/app/components/icons/setting.ts b/src/app/components/icons/setting.ts new file mode 100644 index 0000000..a1ebb6e --- /dev/null +++ b/src/app/components/icons/setting.ts @@ -0,0 +1,25 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-setting-svg', + standalone: true, + template: ` + + ` +}) +export class SettingSvg { + @Input() width: string | number = '1em'; + + @Input() height: string | number = '1em'; +} diff --git a/src/app/components/panels/setting-panel.component.ts b/src/app/components/panels/setting-panel.component.ts index 2c146d8..869ae9b 100644 --- a/src/app/components/panels/setting-panel.component.ts +++ b/src/app/components/panels/setting-panel.component.ts @@ -1,14 +1,55 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'; import { usePrefix } from '@/app/utils'; +import { IconWidget } from '@/app/components/widgets/icon/icon.widget'; +import { TextWidget } from '@/app/components/widgets/text/text.widget'; +import { NgIf } from '@angular/common'; @Component({ selector: 'app-setting-panel', standalone: true, - imports: [], + imports: [IconWidget, TextWidget, NgIf], template: ` -
- -
+ @if (!visible()) { +
+ +
+ } @else { +
+
+
+ +
+
+
+
+ +
+
+ +
+ +
+
+
+ + + +
+
+ } `, styles: [ ` @@ -22,4 +63,26 @@ import { usePrefix } from '@/app/utils'; }) export class SettingPanelComponent { prefix: string = usePrefix('settings-panel'); + + @Input() title: string; + + visible = signal(true); + + innerVisible = signal(true); + + pinning = signal(false); + + pinningChange() { + this.pinning.update(v => !v); + } + + close() { + this.visible.set(false); + this.innerVisible.set(false); + } + + display() { + this.visible.set(true); + this.innerVisible.set(true); + } } diff --git a/src/app/components/styles/styles.less b/src/app/components/styles/styles.less index 55244ff..2a6b82f 100644 --- a/src/app/components/styles/styles.less +++ b/src/app/components/styles/styles.less @@ -318,11 +318,11 @@ height: 40px; cursor: pointer; - .dn-icon { + .@{prefix-cls}-icon { transition: all 0.15s ease-in-out; } - &:hover .dn-icon { + &:hover .@{prefix-cls}-icon { transform: rotate(45deg); } } diff --git a/src/app/components/widgets/icon/icon.widget.ts b/src/app/components/widgets/icon/icon.widget.ts index 0b14494..c13678c 100644 --- a/src/app/components/widgets/icon/icon.widget.ts +++ b/src/app/components/widgets/icon/icon.widget.ts @@ -18,12 +18,14 @@ import { NgOptimizedImage } from '@angular/common'; standalone: true, imports: [ComponentSvg, NgOptimizedImage], template: ` -
- @if (isRegister) { -
- } @else { - - } +
+
+ @if (isRegister) { +
+ } @else { + + } +
`, styleUrls: ['./icon.widget.less', '../../styles/styles.less'], diff --git a/src/app/components/widgets/view-tools/view-tools.widget.ts b/src/app/components/widgets/view-tools/view-tools.widget.ts index c6dbd1b..0dcfa74 100644 --- a/src/app/components/widgets/view-tools/view-tools.widget.ts +++ b/src/app/components/widgets/view-tools/view-tools.widget.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; -import { usePrefix } from '../../../utils'; -import { SharedModule } from '../../../shared/shared.module'; +import { usePrefix } from '@/app/utils'; +import { SharedModule } from '@/app/shared/shared.module'; import { IconWidget } from '../icon/icon.widget'; @Component({ diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index b115a5c..000edc3 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -23,8 +23,8 @@ - - + + diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 72caf6b..15d8e84 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -20,6 +20,7 @@ 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'; +import { SettingsFormComponent } from '@/app/settings-form/settings-form.component'; @Component({ selector: 'app-home', @@ -38,7 +39,8 @@ import { ViewportPanelComponent } from '@/app/components/panels/viewport-panel.c DesignerToolWidget, ViewToolsWidget, ViewPanelComponent, - ViewportPanelComponent + ViewportPanelComponent, + SettingsFormComponent ], providers: [{ provide: IconFactory, useClass: IconRegister }, IconFactoryProvider], templateUrl: './home.component.html', diff --git a/src/app/settings-form/settings-form.component.ts b/src/app/settings-form/settings-form.component.ts new file mode 100644 index 0000000..88f9dd4 --- /dev/null +++ b/src/app/settings-form/settings-form.component.ts @@ -0,0 +1,28 @@ +import { usePrefix } from '../utils'; +import { Component, signal } from '@angular/core'; +import { SharedModule } from '../shared/shared.module'; + +@Component({ + selector: 'app-settings-form', + standalone: true, + template: ` +
+ @if (!isEmpty()) {} +
+ @if (!isEmpty()) { + } @else { +
+ +
+ } +
+
+ `, + styleUrls: ['./styles.less'], + imports: [SharedModule] +}) +export class SettingsFormComponent { + prefix = usePrefix('settings-form'); + + isEmpty = signal(true); +} diff --git a/src/app/settings-form/styles.less b/src/app/settings-form/styles.less new file mode 100644 index 0000000..5b88955 --- /dev/null +++ b/src/app/settings-form/styles.less @@ -0,0 +1,123 @@ +@import 'ng-zorro-antd/style/themes/default.less'; +@import '../../theme/variables.less'; + +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes slideInRight { + 0% { + transform: translateX(100%); + } + + 100% { + transform: translateX(0); + } +} + +@keyframes slideOutRight { + 0% { + transform: translateX(0); + } + + 100% { + transform: translateX(100%); + } +} + +.animate__slideInRight { + -webkit-animation-name: slideInRight; + animation-name: slideInRight; +} + +.animate__slideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; +} + +.animate__animated { + animation-delay: 0ms; + animation-duration: 0.25s; + animation-fill-mode: forwards; +} + +.animate__fadeInUp { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +.@{prefix-cls}-settings-form-wrapper { + height: 100%; + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + + .@{prefix-cls}-node-path { + flex-grow: 0; + } + + .@{prefix-cls}-settings-form-content { + flex-grow: 1; + + } + + .@{ant-prefix}-formily-item { + border-bottom: 1px solid @border-color-split; + padding-bottom: 8px; + margin-bottom: 8px; + margin-top: 8px; + + * { + font-size: 13px; + } + + .@{ant-prefix}-formily-item-control-content-component { + display: flex; + align-items: center; + justify-content: flex-end; + + &>.@{ant-prefix}-radio-group { + display: flex !important; + width: 100%; + + .@{ant-prefix}-radio-button-wrapper { + display: flex; + justify-content: center; + padding: 0 6px !important; + align-items: center; + flex-grow: 2; + } + } + + &>.@{ant-prefix}-slider { + flex-shrink: 0; + min-width: 0; + width: 100%; + } + + &>.@{ant-prefix}-select { + max-width: 140px; + } + } + } +} + +.@{prefix-cls}-settings-form { + padding: 0 20px; + + &-empty { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + height: 100%; + color: #888; + } +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 3e57bba..77ab7a3 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -2,8 +2,9 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { NzButtonModule } from 'ng-zorro-antd/button'; +import { NzEmptyModule } from 'ng-zorro-antd/empty'; -const ZORRO_MODULES = [NzButtonModule]; +const ZORRO_MODULES = [NzButtonModule, NzEmptyModule]; @NgModule({ declarations: [],