(#36) Merge mask modular & popup modular in popup layer modular.

miniprogram/pages/Account/Account.scss

@@ -1,7 +1,7 @@
 @import "./UserCard.scss";
 @import "./MainFunction.scss";
 @import "./FunctionList.scss";
-@import "../../modular/Mask/Mask.scss";
+@import "../../modular/PopupLayer.scss";
 
 view.container{
     padding-top: 50rpx;

miniprogram/pages/Account/Account.ts

@@ -3,18 +3,29 @@ import { UserCard } from "./UserCard";
 import { MainFunction } from "./MainFunction";
 import { FunctionList } from "./FunctionList";
 import { PopupLayer } from "../../modular/PopupLayer";
+import { TestLayerA } from "./TestLayerA";
 
 (async () => {
 
     // 初始化页面
     const { manager, query } = await Manager.PageAsync();
 
-    // 添加蒙版 Modular
-    const popupLayer: PopupLayer<"a" | "b"> = manager.addModule(PopupLayer, "mask") as any;
-    popupLayer.emit("show", "a");
+    // 添加弹出层 Modular
+    const popupLayer: PopupLayer<"layerA" | "layerB"> = manager.addModule(PopupLayer, "mask") as any;
 
     // 添加 UserCard Modular
-    manager.addModule(UserCard, "userCard");
+    const userCard = manager.addModule(UserCard, "userCard");
+
+    //#region test layer
+    // popupLayer.hideOtherWhenShow = false;
+    const testLayerA = manager.addModule(TestLayerA, "testLayerA");
+    userCard.on("clickChangeTheme", () => {
+        popupLayer.emit("show", "layerA");
+    })
+    testLayerA.on("click", () => {
+        popupLayer.emit("show", "layerB");
+    })
+    //#endregion
 
     // 添加 MainFunction Modular
     manager.addModule(MainFunction, "mainFunction");

miniprogram/pages/Account/Account.wxml

@@ -1,6 +1,18 @@
+<!-- 层遮蔽层 -->
+<view class="occlude {{  mask$occlude$isShow ? 'show-fade' : 'hide-fade' }} {{ mask$occlude$isDisplay ? 'block' : 'none' }}" bindtap="mask$clickMask"></view>
+
 <!-- 蒙版 -->
-<view class="mask {{  mask$isShow ? 'show' : 'hide' }} {{ mask$isDisplay ? 'block' : 'none' }}" 
-    bindtap="mask$handleClickMask"></view>
+<view class="mask {{  mask$mask$isShow ? 'show-fade' : 'hide-fade' }} {{ mask$mask$isDisplay ? 'block' : 'none' }}" bindtap="mask$clickMask"></view>
+
+<!-- 层A -->
+<view class="layer {{  mask$layerA$isShow ? 'show-scale' : 'hide-scale' }} {{ mask$layerA$isDisplay ? 'block' : 'none' }}" bindtap="mask$clickMask">
+    <view class="card" style="height: 300px; line-height: 300px; text-align:center" catchtap="testLayerA$click">layerA(点击显示layerB)</view>
+</view>
+
+<!-- 层B -->
+<view class="layer {{  mask$layerB$isShow ? 'show-scale' : 'hide-scale' }} {{ mask$layerB$isDisplay ? 'block' : 'none' }}" bindtap="mask$clickMask">
+    <view class="card" style="height: 200px; line-height: 200px; text-align:center" catchtap>layerB</view>
+</view>
 
 <!-- 顶部的阴影 -->
 <view class="top-shadow"></view>

miniprogram/pages/Account/TestLayerA.ts

@@ -0,0 +1,26 @@
+import { Modular, Manager } from "../../core/Module";
+
+type IUserCardEvent = {
+
+    /**
+     * 主题更换按钮点击事件
+     */
+    click: void;
+}
+
+class TestLayerA<M extends Manager> extends Modular<M, {}, IUserCardEvent> {
+
+    public override onLoad() {
+        this.setFunc(this.handleClick, "click");
+    }
+    
+    /**
+     * 弹窗点击时
+     */
+    private handleClick() {
+        this.emit("click");
+    }
+}
+
+export { TestLayerA };
+export default TestLayerA;

miniprogram/pages/Account/UserCard.ts

@@ -1,9 +1,4 @@
 import { Modular, Manager } from "../../core/Module";
-import { Mask } from "../../modular/Mask/Mask";
-
-type IUserCardDependent<M extends Manager> = {
-    // mask: Mask<M>
-}
 
 type IUserCardEvent = {
 
@@ -13,17 +8,16 @@ type IUserCardEvent = {
     clickChangeTheme: void;
 }
 
-class UserCard<M extends Manager> extends Modular<M, IUserCardDependent<M>, IUserCardEvent> {
+class UserCard<M extends Manager> extends Modular<M, {}, IUserCardEvent> {
 
     public override onLoad() {
-        this.setFunc(this.handleChangeTheme, "changeTheme")
+        this.setFunc(this.handleChangeTheme, "changeTheme");
     }
     
     /**
      * 处理主题更换
      */
     private handleChangeTheme() {
-        // this.depends?.mask.emit("show", void 0);
         this.emit("clickChangeTheme");
     }
 }