merge

biaogebusy · Jan 24, 2025 · c66ede3 · c66ede3
2 parents 969940f + a129ffa
commit c66ede3
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 <p align="center">
   <img src="src/assets/images/logo/logo-white.png" alt="logo" width="100px"/>
   <br>
-  <i>信使 Web builder 是基于 Material 的 Angular 低代码前端框架，丰富的组件库可提供优秀的数字创新体验，<br>通过拖拽可视化配置快速构建现代化响应式UI、多主题、多语言的 Web 页面，包含美观的后台管理主题，拥有完整的前端解决方案。
+  <i>信使 Web builder 是基于 Material 的 Angular 低代码前端框架，丰富的组件库可提供优秀的数字创新体验，<br>通过拖拽可视化配置快速构建现代化响应式UI、多主题、多语言的 Web 页面，包含美观的后台管理主题，拥有完整的前端解决方案，Pro 版本已接入AI，可优化文案，创建组件和一句话生成页面。
     </i>
   <br>
 </p>
@@ -40,6 +40,7 @@
 
 | 功能点               | 说明                                                                  |
 | -------------------- | --------------------------------------------------------------------- |
+| AI (Pro版)           | 基于DeepSeek，基础对话、优化文案、生成图表、创建组件和一句话生成页面  |
 | Layout builder       | 动态 layout，基于 TailwindCss 的动态组件，支持静态数据和 API 数据来源 |
 | 组件编辑             | 删除、复制 JSON、编辑组件数据、拖动上下排列                           |
 | 媒体库               | 可在前台批量上传、查看、更新媒体库                                    |
@@ -73,7 +74,8 @@
 
 ## 相关视频演示
 
-- [使用Web builder 构建Drupal CMS 预览版宣传着陆页](https://www.bilibili.com/video/BV1mD6hY6Et3/)
+- [AI 创建自定义组件，优化文案，一句话生成整个页面](https://www.bilibili.com/video/BV17HfhYKEMz/)
+- [构建Drupal CMS 预览版宣传着陆页](https://www.bilibili.com/video/BV1mD6hY6Et3/)
 - [支持AOS通用页面滚动动画](https://www.bilibili.com/video/BV1VKkSY3E1r/)
 - [Layout 嵌套](https://www.bilibili.com/video/BV1pH4y1L7qk)
 - [API 数据来源](https://www.bilibili.com/video/BV1ux4y1n7MA/) | [静态数据来源](https://www.bilibili.com/video/BV1rf421R7He/) TailwindCss 自定义组件

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -8,7 +8,15 @@
 .mobile-menu {
   @media #{$xs} {
     position: fixed !important;
-    width: 80vw;
+    width: 100vw;
+    ::ng-deep {
+      .mdc-list-item__primary-text {
+        font-weight: bold;
+      }
+      .mat-accordion .mat-expansion-panel-header-title {
+        font-size: 16px;
+      }
+    }
   }
 }
 

diff --git a/src/app/modules/builder/builder.component.html b/src/app/modules/builder/builder.component.html
@@ -1,25 +1,32 @@
+@let rightContent = builder.rightContent$ | async;
 <div
   class="builder-wrapper relative flex"
   [ngClass]="{ dark: (builder.themeMode | async) === 'dark' }"
 >
   <mat-drawer-container class="w-full">
-    <mat-drawer #drawer class="sidebar-drawer" [(opened)]="sidebarDrawerOpened" mode="side">
+    <mat-drawer
+      #drawer
+      class="sidebar-drawer"
+      [(opened)]="sidebarDrawerOpened"
+      mode="side"
+      [ngClass]="sidebarDrawerOpened ? 'opened' : 'closed'"
+    >
       <app-builder-sidebar [sidebarDrawer]="drawer" [drawerContentRef]="drawerContent" />
     </mat-drawer>
     <mat-drawer-content #drawerContent class="drawer-content">
       <div
         class="builder flex-1 overflow-auto h-full"
         [ngClass]="{ 'has-sidebar': !(builderFullScreen$ | async) }"
       >
-        <mat-drawer-container [hasBackdrop]="(builder.rightContent$ | async)?.hasBackdrop">
+        <mat-drawer-container [hasBackdrop]="rightContent?.hasBackdrop">
           <mat-drawer
             class="!fixed"
-            [class]="(builder.rightContent$ | async)?.classes"
+            [class]="rightContent?.classes"
             #builderRightDrawer
             [ngStyle]="{
               overflow: builderRightDrawer.opened ? 'visible' : 'auto',
             }"
-            [mode]="(builder.rightContent$ | async)?.mode || 'over'"
+            [mode]="rightContent?.mode || 'over'"
             position="end"
           >
             <div class="actions expand">
@@ -33,12 +40,14 @@
                 }"
               />
             </div>
-            @if (builder.rightContent$ | async; as dynamic) {
-              <div [ngStyle]="dynamic.style">
-                @for (item of dynamic.elements; track item) {
-                  <app-dynamic-component [inputs]="item" />
-                }
-              </div>
+            @if (builderRightDrawer.opened) {
+              @if (rightContent) {
+                <div [ngStyle]="rightContent.style">
+                  @for (item of rightContent.elements; track item) {
+                    <app-dynamic-component [inputs]="item" />
+                  }
+                </div>
+              }
             }
           </mat-drawer>
           <mat-drawer-content>

diff --git a/src/app/modules/builder/builder.component.scss b/src/app/modules/builder/builder.component.scss
@@ -2,7 +2,6 @@
   height: 100vh;
   overflow: hidden;
   .sidebar-drawer {
-    box-shadow: 1px 1px 6px 0px rgb(221 221 221 / 47%);
     width: 60px;
     visibility: visible !important;
     transform: none !important;

diff --git a/src/app/modules/builder/data/components-for-builder.ts b/src/app/modules/builder/data/components-for-builder.ts
@@ -15,6 +15,7 @@ export const components: any[] = [
               bg: {
                 classes: '',
               },
+              fullWidth: true,
               sliders: {
                 params: {
                   slidesPerView: 1,

diff --git a/src/app/modules/builder/main/builder-list/builder-list.component.ts b/src/app/modules/builder/main/builder-list/builder-list.component.ts
@@ -132,6 +132,7 @@ export class BuilderListComponent implements OnInit, AfterViewInit, OnDestroy {
     if (type === 'widget') {
       this.builderService.addBlock(type, {}, this.util.generatePath(event.target));
     }
+    this.builder.closeRightDrawer$.next(true);
   }
 
   ngOnDestroy(): void {

diff --git a/src/theme/component/builder/_builder-sidebar.scss b/src/theme/component/builder/_builder-sidebar.scss
@@ -1,5 +1,18 @@
 @use '@angular/material' as mat;
 @mixin builder-sidebar($background, $foreground, $primary) {
+  .mat-drawer {
+    &.sidebar-drawer {
+      border-right: 0;
+      &.opened {
+        box-shadow: 1px 1px 6px 0px rgb(48 48 48 / 20%);
+        transition: box-shadow 0.1s ease-in;
+      }
+      &.closed {
+        box-shadow: 1px 1px 6px 0px rgb(48 48 48 / 50%) !important;
+        transition: box-shadow 0.1s ease-out;
+      }
+    }
+  }
   .builder-sidebar {
     background-color: mat.m2-get-color-from-palette($background, background);
     .icon-menu,