Skip to content

Commit

Permalink
merge
Browse files Browse the repository at this point in the history
  • Loading branch information
@biaogebusy
biaogebusy committed Nov 1, 2024
2 parents 9581717 + efd7162 commit f1d6800
Show file tree
Hide file tree
Showing 8 changed files with 144 additions and 132 deletions.
13 changes: 13 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,19 @@
| 页面预览 | 调转到新窗口查看真实的页面 |
| 响应式预览 | 可切换不同设备尺寸查看页面响应式排版 |

## Web builder 管理微信小程序的页面和组件

<p align="center">
<i>信使小程序是基于 Taro+NutUI 的小程序，Vue3拥有更好的编辑开发体验，<br>在<strong>Web builder</strong>中通过拖拽可视化配置，小程序可动态构建页面。
</i>
<br>
<a href="https://github.com/biaogebusy/xinshi-mini">Github 开源地址</a>
</p>

<p align="center">
<img style="border-radius:10px" src="src/assets/images/mini/xinshi-mini.png" alt="logo" width="80%"/>
</p>

## 相关视频演示

- [Layout 嵌套](https://www.bilibili.com/video/BV1pH4y1L7qk)
Expand Down
28 changes: 13 additions & 15 deletions src/app/modules/builder/builder.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
>
<mat-drawer-container class="w-full">
@if (isBuilderMode$ | async) {
<mat-drawer
#drawer
class="sidebar-drawer"
[(opened)]="sidebarDrawerOpened"
mode="side"
>
<app-builder-sidebar [sidebarDrawer]="drawer"></app-builder-sidebar>
</mat-drawer>
<mat-drawer
#drawer
class="sidebar-drawer"
[(opened)]="sidebarDrawerOpened"
mode="side"
>
<app-builder-sidebar [sidebarDrawer]="drawer"></app-builder-sidebar>
</mat-drawer>
}
<mat-drawer-content [style]="drawerStyle">
<div
Expand Down Expand Up @@ -43,13 +43,11 @@
></app-btn>
</div>
@if (builder.rightContent$ | async; as dynamic) {
<div [ngStyle]="dynamic.style">
@for (item of dynamic.elements; track item) {
<app-dynamic-component
[inputs]="item"
></app-dynamic-component>
}
</div>
<div [ngStyle]="dynamic.style">
@for (item of dynamic.elements; track item) {
<app-dynamic-component [inputs]="item"></app-dynamic-component>
}
</div>
}
</mat-drawer>
<mat-drawer-content>
Expand Down
5 changes: 5 additions & 0 deletions src/app/modules/builder/builder.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@
visibility: visible !important;
transform: none !important;
display: block;
::ng-deep {
> .mat-drawer-inner-container {
overflow: hidden;
}
}
&.mat-drawer-opened {
width: 200px;
}
Expand Down
189 changes: 91 additions & 98 deletions src/app/modules/builder/sidebar/builder-sidebar/builder-sidebar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,92 +3,86 @@
[ngClass]="sidebarDrawer.opened ? 'opened' : 'closed'"
>
@if (branding$ | async; as branding) {
<a [routerLink]="branding.header.logo?.href" class="logo">
@if (!sidebarDrawer.opened) {
<app-logo [content]="branding.header.logo" [isInvert]="true"></app-logo>
} @else {
<app-logo [content]="branding.header.logo"></app-logo>
}
</a>
<a [routerLink]="branding.header.logo?.href" class="logo">
@if (!sidebarDrawer.opened) {
<app-logo [content]="branding.header.logo" [isInvert]="true"></app-logo>
} @else {
<app-logo [content]="branding.header.logo"></app-logo>
}
</a>
}
<mat-divider></mat-divider>
@if (builderConfig$ | async; as config) {
@if (config.menu) {
<app-accordion
class="accordion-menu"
[ngClass]="sidebarDrawer.opened ? '' : '!hidden'"
[hidden]="!sidebarDrawer.opened"
[content]="config.menu"
></app-accordion>
<div class="icon-menu" [ngClass]="sidebarDrawer.opened ? '!hidden' : ''">
@for (item of config.menu; track $index) {
<div
class="item"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
[matTooltip]="item.label"
[matTooltipDisabled]="item.child ? true : false"
matTooltipPosition="right"
>
@if (item.icon) {
<app-icon
@if (builderConfig$ | async; as config) { @if (config.menu) {
<app-accordion
class="accordion-menu"
[ngClass]="sidebarDrawer.opened ? '' : '!hidden'"
[hidden]="!sidebarDrawer.opened"
[content]="config.menu"
></app-accordion>
<div class="icon-menu" [ngClass]="sidebarDrawer.opened ? '!hidden' : ''">
@for (item of config.menu; track $index) {
<div
class="item"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
[matTooltip]="item.label"
[matTooltipDisabled]="item.child ? true : false"
matTooltipPosition="right"
>
@if (item.icon) {
<app-icon [routerLink]="item.href" [content]="item.icon"></app-icon>
} @if (item.child) {
<div class="child">
<div class="hover-menu">
<div class="title">{{ item.label }}</div>
<div class="child-menu">
<mat-list>
@for (item of item.child; track $index) {
<a
mat-list-item
[routerLink]="item.href"
[content]="item.icon"
></app-icon>
}
@if (item.child) {
<div class="child">
<div class="hover-menu">
<div class="title">{{ item.label }}</div>
<div class="child-menu">
<mat-list>
@for (item of item.child; track $index) {
<a
mat-list-item
[routerLink]="item.href"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
@if (item.icon) {
<app-icon
class="h-[20px] w-[20px] leading-none"
[content]="item.icon"
></app-icon>
}
{{ item.label }}
</a>
}
</mat-list>
</div>
</div>
</div>
}
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
>
@if (item.icon) {
<app-icon
class="h-[20px] w-[20px] leading-none"
[content]="item.icon"
></app-icon>
}
{{ item.label }}
</a>
}
</mat-list>
</div>
}
</div>
</div>
}
</div>
}
</div>
} }@else {
<mat-divider></mat-divider>
}
<div class="bottom">
@if (branding$ | async; as branding) {
<div
class="flex flex-row flex-wrap gap-3 justify-center py-3 icon-actions"
>
<app-btn
[matTooltip]="'媒体库'"
[matTooltipPosition]="sidebarDrawer.opened ? 'above' : 'right'"
(click)="onSelectAssets()"
[content]="{
<div class="flex flex-row flex-wrap gap-3 justify-center py-3 icon-actions">
<app-btn
[matTooltip]="'媒体库'"
[matTooltipPosition]="sidebarDrawer.opened ? 'above' : 'right'"
(click)="onSelectAssets()"
[content]="{
label: '',
mode: 'icon',
icon: { svg: 'image-search-outline' },
}"
></app-btn>
@if (builder.themeMode | async; as mode) {
<app-btn
[matTooltip]="mode === 'light' ? '切换暗黑风格' : '切换浅色风格'"
[matTooltipPosition]="sidebarDrawer.opened ? 'above' : 'right'"
(click)="onToggleBuilderTheme(mode)"
[content]="{
></app-btn>
@if (builder.themeMode | async; as mode) {
<app-btn
[matTooltip]="mode === 'light' ? '切换暗黑风格' : '切换浅色风格'"
[matTooltipPosition]="sidebarDrawer.opened ? 'above' : 'right'"
(click)="onToggleBuilderTheme(mode)"
[content]="{
label: '',
mode: 'icon',
icon: {
Expand All @@ -98,33 +92,32 @@
: 'moon-waning-crescent',
},
}"
></app-btn>
}
</div>
<mat-divider></mat-divider>
<div
class="flex items-center my-3 gap-3 justify-center"
[ngClass]="sidebarDrawer.opened ? 'flex-row' : 'flex-col'"
>
@if (branding.header.params.userInfo) {
<app-user-menu [content]="branding.header.userMenu"></app-user-menu>
}
<div class="toggle">
<div class="wrapper" (click)="onToggle()">
@if (sidebarDrawer.opened) {
<app-icon [content]="{ svg: 'chevron-left' }">
<div class="text">收起</div>
</app-icon>
}
@if (!sidebarDrawer.opened) {
<app-icon
matTooltip="展开"
[content]="{ svg: 'chevron-right' }"
></app-icon>
}
</div>
></app-btn>
}
</div>
<mat-divider></mat-divider>
<div
class="flex items-center my-3 gap-3 justify-center"
[ngClass]="sidebarDrawer.opened ? 'flex-row' : 'flex-col'"
>
@if (branding.header.params.userInfo) {
<app-user-menu [content]="branding.header.userMenu"></app-user-menu>
}
<div class="toggle">
<div class="wrapper" (click)="onToggle()">
@if (sidebarDrawer.opened) {
<app-icon [content]="{ svg: 'chevron-left' }">
<div class="text">收起</div>
</app-icon>
} @if (!sidebarDrawer.opened) {
<app-icon
matTooltip="展开"
[content]="{ svg: 'chevron-right' }"
></app-icon>
}
</div>
</div>
</div>
}
</div>
</div>
Binary file added src/assets/images/mini/xinshi-mini.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 2 additions & 14 deletions src/theme/base/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,8 @@
box-sizing: border-box;
width: 100%;
margin: 0 auto;
padding: 0 15px;

// @media #{$md} {
// padding: 0 4rem;
// }

// @media #{$gt-md} {
// padding: 0 4rem;
// max-width: 1200px;
// }

max-width: 1470px;
@media #{$gt-lg} {
}
padding-left: 1rem;
padding-right: 1rem;
.container {
padding: 0;
}
Expand Down
23 changes: 19 additions & 4 deletions src/theme/component/builder/_builder-sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,25 @@
background-color: mat.m2-get-color-from-palette($background, background);
.icon-menu,
.accordion-menu {
@include scrollbar(mat.m2-get-color-from-palette($foreground, divider, 0.2));
@include scrollbar(
mat.m2-get-color-from-palette($foreground, divider, 0.2)
);
}
&.closed {
background-color: #363538;
background-color: #272727;
color: #f5f5f5;
@include mat.elevation(
4,
mat.m2-get-color-from-palette($background, focused-button),
0.4
);
a.logo {
background-color: #373737;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: #272727;
}
}
.mat-divider {
border-top-color: rgba(255, 255, 255, 0.2);
}
Expand Down Expand Up @@ -58,15 +67,21 @@
color: mat.m2-get-color-from-palette($primary);
}
&:after {
background-color: mat.m2-get-color-from-palette($primary, 0.1);
background-color: mat.m2-get-color-from-palette(
$primary,
0.1
);
}
}
.mdc-list-item__primary-text {
color: mat.m2-get-color-from-palette($foreground, text, 0.75);
}
&:hover {
&:after {
background-color: mat.m2-get-color-from-palette($primary, 0.1);
background-color: mat.m2-get-color-from-palette(
$primary,
0.1
);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ module.exports = {
sm: "600px",
md: "960px",
lg: "1280px",
xl: "1920px",
xl: "1470px",
},
extend: {},
flex: {
Expand Down

0 comments on commit f1d6800

Please sign in to comment.