fix: tailwindCss covert

biaogebusy · May 4, 2024 · e8c10b2 · e8c10b2
1 parent 797727f
commit e8c10b2
Show file tree

Hide file tree

Showing 21 changed files with 39 additions and 50 deletions.
diff --git a/src/app/core/branding/footer/inverse/inverse.component.html b/src/app/core/branding/footer/inverse/inverse.component.html
@@ -1,4 +1,4 @@
-<div class="shape-inner relative py-10 my-10" *ngIf="content?.params?.shape">
+<div class="shape-inner relative pt-10 my-10" *ngIf="content?.params?.shape">
   <div class="shape shape-{{content?.params?.style === 'light'?'inverse-light':'inverse'}}">
     <svg viewBox="0 0 2880 250" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M720 125L2160 0H2880V250H0V125H720Z" fill="currentColor"></path>
@@ -61,4 +61,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>
diff --git a/src/app/core/service/builder.service.ts b/src/app/core/service/builder.service.ts
@@ -165,7 +165,7 @@ export class BuilderService extends ApiService {
 
   addBlock(addType: string, content: any, event: any): void {
     this.dialog.open(DialogComponent, {
-      width: '700px',
+      width: '800px',
       position: { bottom: '20px' },
       data: {
         disableCloseButton: true,

diff --git a/src/app/modules/builder/data/widgets-for-builder.ts b/src/app/modules/builder/data/widgets-for-builder.ts
@@ -4,7 +4,7 @@ export const widgets = [
     icon: {
       svg: 'view-dashboard-outline',
     },
-    preview: '/assets/images/builder/widgets/layout-builder.jpeg',
+    preview: '/assets/images/builder/widgets/layout.png',
     content: {
       type: 'layout-builder',
       spacer: 'md',

diff --git a/src/app/modules/builder/factory/getComponentSetting.ts b/src/app/modules/builder/factory/getComponentSetting.ts
@@ -121,7 +121,7 @@ export function getComponentSetting(content: any): FormlyFieldConfig[] {
             },
             {
               key: 'bg',
-              className: 'm-top-sm',
+              className: 'w-full mt-3',
               fieldGroup: [
                 {
                   key: 'img',

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.html b/src/app/modules/builder/layout-builder/layout-builder.component.html
@@ -8,7 +8,7 @@
       [ngStyle.md]="{gap:content.gap?.md+'px'}" [ngStyle.lg]="{gap:content.gap?.lg+'px'}"
       [ngStyle.gt-lg]="{gap:content.gap?.lg+'px'}">
       <div class="layout layout-{{i}}" [ngClass]="layout.classes" *ngFor="let layout of content.elements;index as i"
-        [attr.data-path]="'elements.'+i" [ngClass]="layout.classes"
+        [attr.data-path]="'elements.'+i" [ngStyle]="layout.style"
         fxFlex.xs="0 0 calc(100% / {{12 / layout.row.xs}} - {{content.gap?.xs+'px'||'0px'}})"
         fxFlex.sm="0 0 calc(100% / {{12 / layout.row.sm}} - {{content.gap?.sm+'px'||'0px'}})"
         fxFlex.md="0 0 calc(100% / {{12 / layout.row.md}} - {{content.gap?.md+'px'||'0px'}})"
@@ -27,7 +27,7 @@
           <div class="block" [fxLayout]="layout.direction" [fxLayoutAlign]="layout.layoutAlign"
             [ngStyle.xs]="{gap:layout.gap?.xs+'px'}" [ngStyle.sm]="{gap:layout.gap?.sm+'px'}"
             [ngStyle.md]="{gap:layout.gap?.md+'px'}" [ngStyle.lg]="{gap:layout.gap?.lg+'px'}"
-            [ngStyle.gt-lg]="{gap:layout.gap?.lg+'px'}" [ngStyle]="layout.style">
+            [ngStyle.gt-lg]="{gap:layout.gap?.lg+'px'}">
             <app-bg-img [attr.data-path]="'bg'" [content]="layout.bg" *ngIf="layout.bg"></app-bg-img>
             <div class="item item-{{item.type}}" [attr.data-path]="'elements.'+index"
               *ngFor="let item of layout.elements;index as index">

diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.html b/src/app/modules/builder/main/widget-picker/widget-picker.component.html
@@ -1,16 +1,16 @@
 <div class="widget-picker">
   <div class="box" *ngIf="widgets$ | async as widgets" fxLayout="row wrap">
     <div class="item" #item (mouseenter)="onHover(widget, item)" (click)="onSelect(widget)" matRipple fxFlex.lt-sm="33%"
-      fxFlex.gt-xs="0 0 calc(100% / 7)" *ngFor="let widget of widgets">
-      <div class="inner" fxLayout="column" fxLayoutAlign="center center">
+      fxFlex.gt-xs="0 0 calc(100% / 10)" *ngFor="let widget of widgets">
+      <div class="inner flex flex-col justify-center items-center m-[2px] p-[6px]">
         <app-icon *ngIf="widget.icon" [content]="widget.icon"></app-icon>
         <div class="title" title="{{widget.label}}">{{widget.label}}</div>
       </div>
     </div>
   </div>
-  <div class="popup" #popup>
+  <div class="popup p-4 z-10 w-[560px] h-[400px]" #popup>
     <ng-container *ngIf="widget$ | async as widget">
-      <div class="hover-show">
+      <div class="hover-show w-full h-full flex justify-center items-center relative">
         <ng-container *ngIf="widget.preview;else comp">
           <img [src]="widget.preview" alt="">
         </ng-container>
@@ -20,7 +20,7 @@
       </div>
     </ng-container>
   </div>
-  <div class="help" [matTooltip]="help.tooltip" *ngIf="help">
+  <div class="help absolute" [matTooltip]="help.tooltip" *ngIf="help">
     <app-btn
       [content]="{label:'',mode:'icon',color:undefined,href:help.link,target:'_blank',icon:{svg:'help-circle'}}"></app-btn>
   </div>

diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.scss b/src/app/modules/builder/main/widget-picker/widget-picker.component.scss
@@ -10,25 +10,18 @@
       text-align: center;
     }
     .inner {
-      margin: 2px;
-      padding: 10px 6px;
       border-radius: 4px;
       cursor: pointer;
     }
   }
   .help {
-    position: absolute;
     right: -20px;
     bottom: -20px;
   }
   .popup {
     display: none;
     position: fixed;
-    z-index: 10;
-    padding: 15px;
     border-radius: 4px;
-    width: 560px;
-    height: 400px;
     justify-content: center;
     align-items: center;
     overflow: hidden;
@@ -38,12 +31,6 @@
       box-sizing: content-box;
     }
     .hover-show {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
       img {
         max-width: 100%;
         max-height: 100%;

diff --git a/src/app/modules/builder/sidebar/builder-settings/builder-settings.component.ts b/src/app/modules/builder/sidebar/builder-settings/builder-settings.component.ts
@@ -7,10 +7,11 @@ import {
   OnInit,
 } from '@angular/core';
 import type { ICoreConfig } from '@core/interface/IAppConfig';
+import { ILanguage } from '@core/interface/IEnvironment';
 import type { IBranding } from '@core/interface/branding/IBranding';
 import { ContentService } from '@core/service/content.service';
 import { BuilderState } from '@core/state/BuilderState';
-import { CORE_CONFIG } from '@core/token/token-providers';
+import { CORE_CONFIG, LANG } from '@core/token/token-providers';
 import { settings } from '@modules/builder/data/settings-for-builder';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -30,14 +31,15 @@ export class BuilderSettingsComponent
   constructor(
     private builder: BuilderState,
     private contentService: ContentService,
-    @Inject(CORE_CONFIG) private coreConfig: ICoreConfig
+    @Inject(CORE_CONFIG) private coreConfig: ICoreConfig,
+    @Inject(LANG) private lang: ILanguage
   ) {}
 
   ngOnInit(): void {}
 
   ngAfterViewInit(): void {
     this.contentService
-      .loadBranding()
+      .loadBranding(this.lang)
       .pipe(takeUntil(this.destroy$))
       .subscribe((res) => {
         this.branding = res;
@@ -47,7 +49,7 @@ export class BuilderSettingsComponent
     this.builder.cancelFixedShowcase();
   }
 
-  onJson(content: any) {
+  onJson(content: any): void {
     const { provide } = content;
     let data = {};
     switch (provide) {

diff --git a/src/app/modules/builder/toolbar/builder-toolbar/builder-toolbar.component.html b/src/app/modules/builder/toolbar/builder-toolbar/builder-toolbar.component.html
@@ -26,6 +26,7 @@
           [content]="{label:'',color:'primary', mode: 'icon',icon:{svg:'lightning-bolt'} }"></app-btn-generater>
         <app-btn (click)="onSubmit(page)"
           [content]="{label:page.uuid?'更新页面':'新建页面',color:'primary',mode:'raised',icon:{svg:page.uuid?'navigation-variant':'pencil-plus'}}"></app-btn>
+        <app-lang-switch></app-lang-switch>
         <app-builder-menu></app-builder-menu>
       </div>
     </div>

diff --git a/src/app/modules/user/user.component.html b/src/app/modules/user/user.component.html
@@ -28,13 +28,13 @@ <h2 class="mat-h2 m-bottom-0 m-top-xs">{{currentUser.name}}</h2>
             <div class="item" fxFlex.lt-md="100" fxFlex.gt-sm="48">
               <a class="p-y-sm p-x-sm" fxLayout="column" fxLayoutAlign="center center" [routerLink]="['favorite']"
                 [routerLinkActive]="['active']">
-                <mat-icon class="p-bottom-xs">favorite</mat-icon>
+                <mat-icon class="pb-[10px]">favorite</mat-icon>
                 <span>收藏</span>
               </a>
             </div>
             <div class="item" fxFlex.lt-md="100" fxFlex.gt-sm="48">
               <a class="p-y-sm p-x-sm" fxLayout="column" fxLayoutAlign="center center" (click)="logout()">
-                <mat-icon class="p-bottom-xs">exit_to_app</mat-icon>
+                <mat-icon class="pb-[10px]">exit_to_app</mat-icon>
                 <span>退出</span>
               </a>
             </div>

diff --git a/src/app/uiux/combs/calculator/lottery/lottery.component.html b/src/app/uiux/combs/calculator/lottery/lottery.component.html
@@ -14,7 +14,7 @@
           <div class="left" fxFlex.lt-md="100" fxFlex.gt-sm="50" fxLayoutAlign="center center" fxLayout="column">
             <h2>红包大约需要总预算</h2>
             <h1 class="total p-y-sm">¥<span>{{total}}</span></h1>
-            <div class="result-footer text-center" fxLayout="row wrap" fxLayoutGap="2rem">
+            <div class="result-footer text-center flex flex-wrap gap-5">
               <div class="item" fxLayout="column" *ngIf="model?.max?.total_number">
                 <span class="label">大额红包预算</span>
                 <span class="value">{{model.max.total_money}}元</span>
@@ -39,4 +39,4 @@ <h1 class="total p-y-sm">¥<span>{{total}}</span></h1>
     </div>
   </div>
   <app-spacer [size]="content?.spacer || 'md'"></app-spacer>
-</div>
+</div>
diff --git a/src/app/uiux/combs/hero/hero1v2/hero1v2.component.html b/src/app/uiux/combs/hero/hero1v2/hero1v2.component.html
@@ -1,4 +1,4 @@
-<div class="hero-1-v2 relative p-top-xl" [ngClass.gt-sm]="'m-bottom-xl'" *ngIf="content">
+<div class="hero-1-v2 relative pt-20" [ngClass.gt-sm]="'m-bottom-xl'" *ngIf="content">
   <app-bg-img [attr.data-path]="'bg'" [content]="content.bg"></app-bg-img>
   <div class="{{content.fullWidth?'relative':'container relative'}}" *ngIf="mediaConfig">
     <div class="swiper-media">

diff --git a/src/app/uiux/combs/map/view-map/view-map.component.html b/src/app/uiux/combs/map/view-map/view-map.component.html
@@ -53,7 +53,7 @@
         (modelChange)="onModelChange($event)">
       </app-formly>
       <mat-divider class="m-y-sm"></mat-divider>
-      <div class="actions" fxLayoutGap="1rem" fxLayoutAlign="end center">
+      <div class="actions flex justify-end items-center gap-3">
         <button mat-raised-button color="primary" (click)="clear()">
           <mat-icon>clear</mat-icon>清空
         </button>
@@ -65,4 +65,4 @@
     <app-map fxFlex="100%"
       [content]="{city: content.params.city, elements: lists$ | async, model: model, form: form}"></app-map>
   </div>
-</div>
+</div>
diff --git a/src/app/uiux/combs/other/jsoneditor/jsoneditor.component.html b/src/app/uiux/combs/other/jsoneditor/jsoneditor.component.html
@@ -4,7 +4,7 @@
   </div>
   <json-editor [matTooltip]="content.tooltip||''" [options]="editorOptions" [data]="data"
     (change)="onChange($event)"></json-editor>
-  <div #actions class="actions m-top p-bottom-xs" *ngIf="content.actions"
+  <div #actions class="actions m-top pb-[10px]" *ngIf="content.actions"
     fxLayoutAlign="{{content.actionsAlign || 'start center'}}">
     <ng-container *ngFor="let action of content.actions">
       <ng-container [ngSwitch]="action.type">

diff --git a/src/app/uiux/combs/search/search-list/search-list.component.html b/src/app/uiux/combs/search/search-list/search-list.component.html
@@ -18,8 +18,8 @@ <h2 class="title">
         </h2>
         <div class="content" *ngIf="item.body"
           [innerHTML]="item.body | stripTags:'strong':'a':'em' | shorten: 150: '...'|safeHtml "></div>
-        <div class="bottom m-y-sm" fxLayoutAlign="space-between center">
-          <div fxLayoutGap="1rem" fxLayout fxLayoutAlign="start center">
+        <div class="flex justify-between items-center my-3 bottom">
+          <div class="flex justify-start items-center gap-3">
             <div>{{item.user | ucfirst}}</div>
             <div>{{item?.type}}</div>
             <div [innerHTML]="item?.category|safeHtml" *ngIf="item.category"></div>
@@ -35,9 +35,9 @@ <h2 class="title">
     </div>
     <app-pagination *ngIf="content?.length > 0;else empty" (pageChange)="onPageChange($event)"></app-pagination>
     <ng-template #empty>
-      <div class="text-center p-y-xl">
+      <div class="text-center py-10">
         <p>没有数据。</p>
       </div>
     </ng-template>
   </div>
-</div>
+</div>
diff --git a/src/app/uiux/combs/showcase/showcase1v3/showcase1v3.component.html b/src/app/uiux/combs/showcase/showcase1v3/showcase1v3.component.html
@@ -6,10 +6,10 @@
     <app-text [attr.data-path]="'text'" *ngIf="content.text" [content]="content.text"></app-text>
     <app-dynamic-component [attr.data-path]="'elements.'+i" *ngFor="let item of content.elements;index as i"
       [inputs]="item"></app-dynamic-component>
-    <div class="m-top" fxLayoutAlign="center center" fxLayoutGap="1rem" *ngIf="content.actions">
+    <div class="mt-5 flex justify-center items-center gap-3" *ngIf="content.actions">
       <app-dynamic-component [attr.data-path]="'actions.'+i" [inputs]="item"
         *ngFor="let item of content.actions;index as i"></app-dynamic-component>
     </div>
   </div>
   <app-spacer [size]="content?.spacer || 'md'"></app-spacer>
-</div>
+</div>
diff --git a/src/app/uiux/combs/showcase/showcase1v4/showcase1v4.component.html b/src/app/uiux/combs/showcase/showcase1v4/showcase1v4.component.html
@@ -5,18 +5,17 @@
   <div class="{{content.fullWidth?'':'container'}}">
     <div [ngClass]="content.classes">
       <app-text [attr.data-path]="'text'" *ngIf="content.text" [content]="content.text"></app-text>
-      <div fxLayout="row wrap" fxLayoutGap.xs="0rem" fxLayoutAlign.gt-sm="center start"
-        fxLayoutAlign.lt-md="center center">
+      <div class="flex flex-row flex-wrap justify-center items-center md:items-start">
         <app-dynamic-component [attr.data-path]="'elements.'+i" class="box p-x-sm p-y-sm" [inputs]="item"
           *ngFor="let item of content.elements;index as i" fxFlex.xs="100%" fxFlex.sm="50%"
           [fxFlex.gt-sm]="row(content.row, '0rem')"></app-dynamic-component>
       </div>
-      <div class="actions m-top p-bottom-xs" *ngIf="content.actions" fxLayoutAlign="center center">
+      <div class="actions m-top pb-[10px]" *ngIf="content.actions" fxLayoutAlign="center center">
         <ng-container *ngFor="let action of content.actions;index as i">
           <app-dynamic-component [attr.data-path]="'actions.'+i" [inputs]="action"></app-dynamic-component>
         </ng-container>
       </div>
     </div>
   </div>
   <app-spacer [size]="content?.spacer || 'md'"></app-spacer>
-</div>
+</div>
diff --git a/src/app/uiux/widgets/title/title.component.html b/src/app/uiux/widgets/title/title.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngIf="content">
   <div class="title" [ngClass]="content.style">
-    <h2 #title contentedit="label" class="title-header" [ngClass]="content.classes || 'mat-h2'"
-      [innerHTML]="content.label|safeHtml" [class.m-bottom-sm]="content.style === 'none'"></h2>
+    <h2 #title contentedit="label" class="title-header {{content.style === 'none'?'!mb-0':''}}"
+      [ngClass]="content.classes || 'mat-h2'" [innerHTML]="content.label|safeHtml"></h2>
     <div class="line-style" [class.m-top-sm]="content.icon">
       <mat-icon *ngIf="content.icon && content.style">{{content.icon}}</mat-icon>
       <span></span>

diff --git a/src/assets/images/builder/widgets/layout-builder.jpeg b/src/assets/images/builder/widgets/layout-builder.jpeg
diff --git a/src/assets/images/builder/widgets/layout.png b/src/assets/images/builder/widgets/layout.png
diff --git a/src/styles.scss b/src/styles.scss
@@ -21,7 +21,7 @@ body {
   width: 100vw;
   max-width: 100%;
   display: block;
-  font-size: 1.4rem;
+  font-size: 1rem;
   line-height: 1.618;
   overflow-x: hidden;
   overflow-y: auto;