Merge pull request 'Update project config' (#68) from dev-mrkbear into master

Reviewed-on: http://git.mrkbear.com/MrKBear/mini-dlpu-v3/pulls/68

miniprogram/api/EduBase.ts

@@ -1,7 +1,7 @@
 import { API, IAnyData, GeneralCallbackResult } from "../core/Api";
-import { EventType } from "../core/Emitter";
+import { EventType, Emitter } from "../core/Emitter";
 
-interface ILoginEvent {
+type ILoginEvent = {
 
     /**
      * session 过期
@@ -56,37 +56,37 @@ abstract class EduBase<
             if(!info) {
                 isSuccess = false;
                 errMsg = "Bad Data";
-                this.emit("badData", { errMsg });
+                (this as Emitter<IAnyData>).emit("badData", { errMsg });
             }
 
             if (isSuccess) switch (info.code) {
                 case (1):
                     res = parseFunction(info.data);
                     errMsg = info.err_msg ?? "Success";
-                    this.emit("ok", res!);
+                    (this as Emitter<IAnyData>).emit("ok", res!);
                     break;
 
                 case (2):
                     isSuccess = false;
                     errMsg = info.err_msg ?? "Session Expire";
-                    this.emit("expire", { errMsg });
+                    (this as Emitter<IAnyData>).emit("expire", { errMsg });
                     break;
 
                 case (3):
                     isSuccess = false;
                     errMsg = info.err_msg ?? "Unauthorized";
-                    this.emit("unauthorized", { errMsg });
+                    (this as Emitter<IAnyData>).emit("unauthorized", { errMsg });
                     break;
 
                 case (4):
                     isSuccess = false;
                     errMsg = info.err_msg ?? "Error";
-                    this.emit("error", { errMsg });
+                    (this as Emitter<IAnyData>).emit("error", { errMsg });
                     break;
             }
 
-            if (!isSuccess) this.emit("no", { errMsg });
+            if (!isSuccess) (this as Emitter<IAnyData>).emit("no", { errMsg });
-            this.emit("done", { errMsg, data: res });
+            (this as Emitter<IAnyData>).emit("done", { errMsg, data: res });
         });
 	}
 }

miniprogram/api/Login.ts

@@ -32,11 +32,6 @@ interface ILoginOutput {
      */
     actualName: string;
 
-    /**
-     * 用户是否关注了公共号
-     */
-    isSubscribeWxAccount: boolean;
-
     /**
      * 教务处的 session
      */

miniprogram/app.scss

@@ -16,12 +16,16 @@ $black-filter: brightness(0) opacity(.65);
 $white-filter: brightness(100) opacity(.65);
 $blue-filter: opacity(1);
 
-// 页面容器外边距
+@mixin container {
-view.container {
     width: 88%;
     padding: 0 6%;
 }
 
+// 页面容器外边距
+view.container {
+    @include container;
+}
+
 // 带阴影的 card
 view.card {
     width: calc( 100% - 40px );

miniprogram/core/Api.ts

@@ -1,4 +1,4 @@
-import { Emitter, EventType } from "./Emitter";
+import { Emitter, EventType, EventMixin } from "./Emitter";
 import { API_FAILED_SHOW_MESSAGE } from "./Config";
 import { Logger, LogLabel, LevelLogLabel, colorRadio, StatusLabel } from "./Logger";
 interface IAppAPIParam {
@@ -156,16 +156,7 @@ class API<
     O extends IAnyData = IAnyData,
     E extends Record<EventType, any> = Record<EventType, any>,
     U extends IAnyData = IAnyData
-> extends Emitter <
+> extends Emitter<EventMixin<IAPIEvent<I, O> & IAPIResultEvent<O, U>, E>> {
-    {
-        // 这个复杂的泛型是为了 MixIn 用户自定义事件类型
-        // 懂得如何使用就可以了
-        // 不要试图去理解下面这三行代码，真正的恶魔在等着你
-        [P in (keyof (IAPIEvent<I, O> & IAPIResultEvent<O, U>) | keyof E)] : 
-        P extends keyof IAPIEvent<I, O> ? IAPIEvent<I, O>[P] : 
-        P extends keyof IAPIResultEvent<O, U> ? IAPIResultEvent<O, U>[P] : E[P]
-    }
-> {
 
     /**
      * 默认调试标签
@@ -316,7 +307,7 @@ class API<
         }
 
         // 触发数据初始化事件
-        this.emit("initData", this.data);
+        (this as Emitter<IAnyData>).emit("initData", this.data);
 
         // 重置请求数据
         const requestData:IWxRequestOption<O> = this.requestData = {
@@ -343,7 +334,7 @@ class API<
         }
 
         // 触发数据解析
-        this.emit("parseRequestData", this.data);
+        (this as Emitter<IAnyData>).emit("parseRequestData", this.data);
 
         // 数据收集
         for (let key in this.params) {
@@ -461,18 +452,18 @@ class API<
         let request = () => {
 
             // 触发请求发送事件
-            this.emit("request", this.requestData!)
+            (this as Emitter<IAnyData>).emit("request", this.requestData!)
 
             wx.request<O>({
                 ...this.requestData!,
                 success: (e) => {
-                    this.emit("success", e);
+                    (this as Emitter<IAnyData>).emit("success", e);
                 },
                 fail: (e) => {
-                    this.emit("fail", e);
+                    (this as Emitter<IAnyData>).emit("fail", e);
                 },
                 complete: (e) => {
-                    this.emit("complete", e);
+                    (this as Emitter<IAnyData>).emit("complete", e);
                 }
             });
         }
@@ -490,12 +481,12 @@ class API<
                 // 使用上次请求结果
                 if (this.policy === RequestPolicy.useLastRequest) {
                     lastAPI.on("success", (e) => {
-                        this.emit("success", e as SuccessCallbackResult<O>);
+                        (this as Emitter<IAnyData>).emit("success", e as SuccessCallbackResult<O>);
-                        this.emit("complete", {errMsg: e.errMsg});
+                        (this as Emitter<IAnyData>).emit("complete", {errMsg: e.errMsg});
                     });
                     lastAPI.on("fail", (e) => {
-                        this.emit("fail", e);
+                        (this as Emitter<IAnyData>).emit("fail", e);
-                        this.emit("complete", {errMsg: e.errMsg});
+                        (this as Emitter<IAnyData>).emit("complete", {errMsg: e.errMsg});
                     });
                 }
 
@@ -605,8 +596,8 @@ class API<
      */
     public addFailedCallBack(): this {
         this.on("fail", (e) => {
-            this.emit("no", e as any);
+            (this as Emitter<IAnyData>).emit("no", e as any);
-            this.emit("done", e as any);
+            (this as Emitter<IAnyData>).emit("done", e as any);
         });
         return this;
     }

miniprogram/core/Data.ts

@@ -1,3 +1,4 @@
+import { Storage } from "./Storage";
 
 /**
  * 数据层键值设置
@@ -12,22 +13,22 @@ interface IDataParamSettingItem {
     /**
      * 键值是否可以获取
      */
-    isGet: boolean;
+    get?: ((...P: any) => this["type"]) | INone;
 
     /**
      * 键值是否可以设置
      */
-    isSet: boolean;
+    set?: ((...P: [this["type"], ...any]) => any) | INone;
 
     /**
      * 是否仅为异步获取
      */
-    isGetAsync?: boolean;
+    getAsync?: ((...P: any) => Promise<this["type"]>) | INone;
 
     /**
      * 是否仅为异步设置
      */
-    isSetAsync?: boolean;
+    setAsync?: ((...P: [this["type"], ...any]) => Promise<any>) | INone;
 }
 
 /**
@@ -37,12 +38,7 @@ interface IDataParamSetting {
     [x: string]: IDataParamSettingItem
 }
 
-type IGet<T> = () => T;
+type INone = undefined | void;
-type IGetAsync<T> = () => Promise<T>;
-type ISet<T> = (data: T) => INone;
-type ISetAsync<T> = (data: T) => Promise<INone>;
-
-type INone = undefined | void | unknown;
 
 /**
  * 注册表结构
@@ -52,22 +48,24 @@ type IRegistryItem<S extends IDataParamSettingItem> = {
     /**
      * 获取方法
      */
-    get: S["isGetAsync"] extends true ? INone : S["isGet"] extends true ? IGet<S["type"]> : INone;
+    get: S["get"];
 
     /**
      * 异步获取方法
      */
-    getAsync: S["isGet"] extends true ? IGetAsync<S["type"]> : INone;
+    getAsync: S["getAsync"] extends Function ? S["getAsync"] : 
+    S["get"] extends ((...P: any) => S["type"]) ? (...param: Parameters<S["get"]>) => Promise<S["type"]> : INone;
 
     /**
      * 设置方法
      */
-    set: S["isSetAsync"] extends true ? INone : S["isSet"] extends true ? ISet<S["type"]> : INone;
+    set: S["set"];
 
     /**
      * 异步设置方法
      */
-    setAsync: S["isSet"] extends true ? ISetAsync<S["type"]> : INone;
+    setAsync: S["setAsync"] extends Function ? S["setAsync"] : 
+    S["set"] extends ((...P: [S["type"], ...any]) => any) ? (...param: Parameters<S["set"]>) => Promise<ReturnType<S["set"]>> : INone;
 }
 
 /**
@@ -91,16 +89,16 @@ type IAutoSelect<IF extends boolean, A, B> = IF extends true ? A : B;
  * ```typescript
  * class TestData extends Data<{
  *     test: {
- *         type: number,
+ *         type: number
- *         isGet: true,
+ *         get: () => number,
- *         isSet: true,
+ *         set: (val: number) => void,
- *         isGetAsync: true
+ *         getAsync: () => Promise<number>
  *     }
- * }> {
+ *     }> {
- *     public onLoad() {
+ *         public onLoad() {
  *         let dataObject = {key: 1}
  *         this.getter("test", () => 1);
- *         this.registerKeyFromObject("test", "key", dataObject);
+ *         this.registerKeyFromObject(dataObject, "test", "key");
  *     }
  * }
  * ```
@@ -183,9 +181,9 @@ class Data<D extends IDataParamSetting> {
      */
     protected registerKeyFromObject<
         KEY extends keyof D, 
-        F extends keyof O, 
+        F extends string, 
         O extends {[K in F]: D[KEY]["type"]}
-    > (key: KEY, keyFromObject: F, object: O) {
+    > (object: O, key: KEY, keyFromObject: F = key as any) {
 
         // 注册同步获取
         this.getter(key, () => {
@@ -198,6 +196,33 @@ class Data<D extends IDataParamSetting> {
         })
     }
 
+    /**
+     * 关联 Storage 中的 key
+     * @param key Data 层键值
+     * @param keyFromStorage StorageKey
+     */
+    protected registerKeyFromStorage<
+        KEY extends keyof D,
+        F extends string, 
+        S extends Storage<{[K in F]: D[KEY]["type"]}>
+    > (storage: S, key: KEY, keyFromStorage: F = key as any) {
+
+        // 同步获取
+        this.getter(key, () => {
+            return storage.get(keyFromStorage);
+        });
+
+        // 同步设置
+        this.setter(key, (data: any) => {
+            storage.set(keyFromStorage, data);
+        });
+
+        // 异步设置
+        this.setter(key, (async (data: any) => {
+            await storage.set(keyFromStorage, data);
+        }) as any, true);
+    }
+
     /**
      * 导出数据对象
      * @returns 数据对象
@@ -223,12 +248,12 @@ class Data<D extends IDataParamSetting> {
     
             // 检验 getter
             if (item.get && !item.getAsync) {
-                item.getAsync = this.syncFn2AsyncFn(item.get as IGet<D[KEY]["type"]>);
+                item.getAsync = this.syncFn2AsyncFn(item.get) as any;
             }
     
             // 检验 setter
             if (item.set && !item.setAsync) {
-                item.setAsync = this.syncFn2AsyncFn(item.set as ISet<D[KEY]["type"]>);
+                item.setAsync = this.syncFn2AsyncFn(item.set) as any;
             }
         }
 
@@ -240,11 +265,13 @@ class Data<D extends IDataParamSetting> {
      * 将同步函数转换为异步函数
      * @param fn 同步函数
      */
-    protected syncFn2AsyncFn<D, H extends (IGet<D> | ISet<D>)> (fn: H): 
+    protected syncFn2AsyncFn<F extends (...p: any) => any> (fn: F): (...param: Parameters<F>) => ReturnType<F> {
-    IAutoSelect<H extends IGet<D> ? true : false, IGetAsync<D>, ISetAsync<D>> {
         const asyncFn = async (...param: [D]) => {
             return fn(...param);
         };
         return asyncFn as any;
     }
 }
+
+export { Data };
+export default Data;

miniprogram/core/Emitter.ts

@@ -13,6 +13,21 @@ export type EventHandlerMap<Events extends Record<EventType, any>> = Map<
 	EventHandlerList<Events[keyof Events]>
 >;
 
+// Emitter function type
+type IEmitParamType<E extends Record<EventType, any>, K extends keyof E> = 
+	E[K] extends ( undefined | void ) ? [type: K] : [type: K, evt: E[K]];
+
+// Mixin to event object
+export type EventMixin<A extends Record<EventType, any>, B extends Record<EventType, any>> = {
+	[P in (keyof A | keyof B)] :
+		P extends (keyof A & keyof B) ? 
+			A[P] : 
+			P extends keyof A ? 
+				A[P] : 
+				P extends keyof B ? B[P] : 
+			never;
+}
+
 export class Emitter<Events extends Record<EventType, any>> {
 	
 	/**
@@ -74,7 +89,8 @@ export class Emitter<Events extends Record<EventType, any>> {
 	 * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
 	 * @memberOf mitt
 	 */
-	emit<Key extends keyof Events>(type: Key, evt: Events[Key]) {
+	public emit<Key extends keyof Events>(...param: IEmitParamType<Events, Key>): this {
+		const [ type, evt ] = param;
 		let handlers = this.all!.get(type);
 		if (handlers) {
 			(handlers as EventHandlerList<Events[keyof Events]>)
@@ -83,5 +99,6 @@ export class Emitter<Events extends Record<EventType, any>> {
 					handler(evt!);
 				});
 		}
+		return this;
 	}
 }

miniprogram/data/StudentInfo.ts

@@ -0,0 +1,154 @@
+import { Data } from "../core/Data";
+import { Storage } from "../core/Storage";
+import { Login, ILoginOutput } from "../api/Login";
+
+/**
+ * 登录状态
+ */
+enum LoginStatus {
+
+    /**
+     * 已认证
+     */
+    verified = 1,
+
+    /**
+     * 失效的认证
+     * 通常为用户名密码错误
+     */
+    invalid = 2,
+
+    /**
+     * 没有登录信息
+     */
+    none = 3
+}
+
+/**
+ * API 返回数据
+ */
+type ILoginApiData = {
+    [P in keyof ILoginOutput]: {
+        type: ILoginOutput[P];
+        getAsync: () => Promise<ILoginOutput[P]>;
+    }
+}
+
+/**
+ * Storage 缓存数据类型
+ */
+type IStudentInfoStorageData = ILoginOutput & {
+    [P in keyof IStudentInfoData]: IStudentInfoData[P]["type"];
+};
+
+/**
+ * 学生信息数据结构
+ */
+type IStudentInfoData = {
+
+    /**
+     * 学号
+     */
+    studentId: {
+        type: string,
+    };
+
+    /**
+     * 教务处密码
+     */
+    password: {
+        type: string
+    };
+
+    /**
+     * 登录状态
+     */
+    loginStatus: {
+        type: LoginStatus
+    }
+
+    /**
+     * 上次登录时间
+     * 时间戳
+     */
+    lastLoginTime: {
+        type: number
+    }
+
+    /**
+     * 距离上次登录后
+     * 学号和密码是否发生过改变
+     */
+    isUserInfoChange: {
+        type: boolean
+    }
+}
+
+/**
+ * 学生信息
+ */
+class StudentInfo extends Data<IStudentInfoData & ILoginApiData> {
+
+    /**
+     * 学生信息缓存
+     */
+    private eduStorage = new Storage<IStudentInfoStorageData>("StudentInfo", {
+        idCardLast6: "",
+        eduService: "",
+        actualName: "",
+        eduSession: "",
+        studentId: "",
+        password: "",
+        loginStatus: LoginStatus.none,
+        lastLoginTime: 0,
+        isUserInfoChange: false
+    });
+
+    public override onLoad() {
+        
+    }
+
+    /**
+     * 用户登录
+     */
+    private async login(): Promise<boolean> {
+
+        // 获取账号密码
+        const stuId = this.eduStorage.get("studentId");
+        const pwd = this.eduStorage.get("password");
+
+        if (!stuId || !pwd) return false;
+
+        // 发送请求
+        const data = await new Login().param({
+            studentId: stuId,
+            password: pwd
+        }).request().wait();
+
+        // 请求成功
+        let res = data.data;
+        if (res) {
+
+            // 保存数据
+            this.eduStorage.set("actualName", res.actualName);
+            this.eduStorage.set("eduService", res.eduService);
+            this.eduStorage.set("eduSession", res.eduSession);
+            this.eduStorage.set("idCardLast6", res.idCardLast6);
+
+            // 记录时间
+            this.eduStorage.set("lastLoginTime", new Date().getTime());
+
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    /**
+     * 获取状态
+     */
+    private async getStatus() {}
+}
+
+export { StudentInfo };
+export default StudentInfo;

miniprogram/modular/Mask/Mask.scss

@@ -1,45 +0,0 @@
-@import "../../app.scss";
-
-view.mask {
-	position: fixed;
-	width: 100%;
-	height: 100%;
-	background-color: rgba($color: #000000, $alpha: .2);
-	z-index: 1;
-}
-
-view.mask.block {
-    display: block;
-}
-
-view.mask.none {
-    display: none;
-}
-
-view.mask.show {
-    animation: show .1s cubic-bezier(0, 0, 1, 1) both;
-    opacity: 1;
-}
-
-view.mask.hide {
-    animation: hide .1s cubic-bezier(0, 0, 1, 1) both;
-    opacity: 0;
-}
-
-@keyframes show{
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes hide{
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
-}

miniprogram/modular/Mask/Mask.ts

@@ -1,115 +0,0 @@
-import { Modular, Manager } from "../../core/Module";
-
-/**
- * 蒙版事件
- */
-type IMaskEvent = {
-
-    /**
-     * 蒙版显示事件
-     */
-    show: void;
-
-    /**
-     * 蒙版隐藏事件
-     */
-    hide: void;
-
-    /**
-     * 蒙版状态改变事件
-     */
-    change: boolean;
-
-    /**
-     * 蒙版点击事件
-     */
-    click: void;
-}
-
-/**
- * 蒙版 Modular
- */
-class Mask<M extends Manager> extends Modular<M, {}, IMaskEvent> {
-
-    /**
-     * 动画运行时间
-     */
-    public static readonly animateTime: number = 100;
-
-	public data? = {
-
-		/**
-		 * 蒙版的层级
-		 */
-		zIndex: 1,
-
-        /**
-         * 蒙版是否显示
-         */
-        isDisplay: false,
-
-		/**
-		 * 蒙版是否显示
-		 */
-		isShow: false
-	};
-
-    /**
-     * 当点击时是否自动关闭蒙版
-     */
-    public autoCloseOnClick: boolean = true;
-
-    /**
-     * 消失动画计时器
-     */
-	private disappearTimer?: number;
-
-    public override onLoad() {
-		this.setFunc(this.handleClickMask, "handleClickMask");
-        this.on("show", this.showMask);
-        this.on("hide", this.hideMask);
-    }
-	
-	/**
-	 * 显示蒙版
-	 */
-	private showMask = () => {
-
-        this.disappearTimer && clearTimeout(this.disappearTimer);
-
-		this.setData({ 
-            isShow: true,
-            isDisplay: true
-        });
-
-        this.emit("change", true);
-	}
-
-	/**
-	 * 隐藏蒙版
-	 */
-    private hideMask = () => {
-		this.setData({ 
-            isShow: false 
-        });
-
-        this.disappearTimer = setTimeout(() => {
-            this.setData({ 
-                isDisplay: false
-            });
-        }, Mask.animateTime);
-
-        this.emit("change", false);
-	}
-
-    /**
-     * 处理蒙版点击事件
-     */
-	private handleClickMask() {
-		if (this.autoCloseOnClick) this.emit("hide", void 0);
-        this.emit("click", void 0);
-	}
-}
-
-export { Mask };
-export default Mask;

miniprogram/modular/PopupLayer.scss

@@ -0,0 +1,99 @@
+@import "../app.scss";
+
+view.mask {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	background-color: rgba($color: #000000, $alpha: .2);
+	z-index: 1;
+}
+
+view.layer {
+	position: fixed;
+	@include container;
+	height: 100%;
+	z-index: 2;
+    justify-content: center;
+    align-items: center;
+}
+
+view.occlude {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	z-index: 3;
+}
+
+view.mask.block, view.layer.block, view.occlude.block {
+    display: flex;
+}
+
+view.mask.none, view.layer.none, view.occlude.none {
+    display: none;
+}
+
+view.mask.show-fade, view.layer.show-fade, view.occlude.show-fade {
+    animation: show-fade .1s cubic-bezier(0, 0, 1, 1) both;
+    opacity: 1;
+}
+
+view.mask.hide-fade, view.layer.hide-fade, view.occlude.hide-fade {
+    animation: hide-fade .1s cubic-bezier(0, 0, 1, 1) both;
+    opacity: 0;
+}
+
+view.mask.show-scale, view.layer.show-scale, view.occlude.show-scale {
+    animation: show-scale .3s cubic-bezier(.1, .9, .2, 1) both,
+    show-fade .1s cubic-bezier(0, 0, 1, 1) both;
+    transform: scale3d(1, 1, 1);
+    opacity: 1;
+}
+
+view.mask.hide-scale, view.layer.hide-scale, view.occlude.hide-scale {
+    animation: hide-scale .3s cubic-bezier(.1, .9, .2, 1) both, 
+    hide-fade .1s cubic-bezier(0, 0, 1, 1) both;
+    transform: scale3d(.9, .9, 1);
+    opacity: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    view.mask {
+        background-color: rgba($color: #000000, $alpha: .5);
+    }
+}
+
+@keyframes show-fade{
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes hide-fade{
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes show-scale{
+    from {
+        transform: scale3d(1.15, 1.15, 1);
+    }
+    to {
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes hide-scale{
+    from {
+        transform: scale3d(1, 1, 1);
+    }
+    to {
+        transform: scale3d(.9, .9, 1);
+    }
+}

miniprogram/modular/PopupLayer.ts

@@ -0,0 +1,309 @@
+import { IAnyData } from "../core/Api";
+import { Emitter } from "../core/Emitter";
+import { Modular, Manager } from "../core/Module";
+
+/**
+ * 动画类型
+ */
+enum AnimateType {
+    fade = 1,
+    scale = 2,
+    none = 3,
+}
+
+/**
+ * 显示层
+ */
+class DisplayLayer {
+
+    /**
+     * 类名
+     */
+    public get className(): string {
+        let res = this.isDisplay ? "block" : "none";
+
+        switch (this.animateType) {
+            case AnimateType.fade:
+                res += " mask";
+                break;
+
+            case AnimateType.scale:
+                res += " layer";
+                break;
+
+            case AnimateType.none:
+                res += " occlude";
+                break;
+        }
+
+        switch (this.animateType) {
+            case AnimateType.fade:
+                res += this.isShow ? " show-fade" : " hide-fade";
+                break;
+
+            case AnimateType.scale:
+                res += this.isShow ? " show-scale" : " hide-scale";
+                break;
+
+            case AnimateType.none:
+                break;
+        }
+
+        return res;
+    }
+
+	/**
+	 * Layer 使用的 key
+	 */
+	public key: string = "";
+
+	/**
+	 * 使用的动画类型
+	 */
+	public animateType: AnimateType = AnimateType.scale;
+
+    /**
+     * 动画时间
+     */
+    public get animateTime(): number {
+        switch (this.animateType) {
+            case AnimateType.fade:
+                return 100;
+            case AnimateType.scale:
+                return 300;
+            case AnimateType.none:
+                return -1;
+        }
+    };
+	
+	/**
+	 * 是否显示
+	 */
+	public isDisplay: boolean = false;
+
+	 /**
+	  * 是否显示
+	  */
+	public isShow: boolean = false;
+
+	/**
+     * 消失动画计时器
+     */
+	public disappearTimer?: number;
+}
+
+/**
+ * 弹出层事件
+ */
+type IPopupLayerEvent<L extends string> = {
+
+	/**
+	 * 点击蒙版时
+	 */
+	clickMask: void
+
+	/**
+	 * 显示层
+	 */
+	show: L;
+
+	/**
+	 * 隐藏层
+	 */
+	hide: L;
+
+	/**
+	 * 层状态改变
+	 */
+	change: Readonly<DisplayLayer>;
+}
+
+type commonLayerType = "mask" | "occlude";
+
+/**
+ * 弹出层
+ */
+class PopupLayer<
+	L extends string,
+	M extends Manager = Manager
+> extends Modular<M, {}, IPopupLayerEvent<L | commonLayerType>> {
+
+    /**
+     * 当点击时是否自动关闭蒙版
+     */
+    public autoCloseOnClick: boolean = true;
+
+    /**
+     * 关闭动画执行时是否屏蔽用户点击
+     */
+    public showOccludeWhenHide: boolean = true;
+
+    /**
+     * 显示 Layer 时自动关闭其他层
+     */
+    public hideOtherWhenShow: boolean = true;
+
+	/**
+	 * 层列表
+	 */
+	private layers: Map<L | commonLayerType, DisplayLayer> = new Map();
+
+    /**
+     * 初始化层
+     * @param key 初始化关键字
+     */
+    public initLayers(key: L[]) {
+        for (let i = 0; i < key.length; i++) {
+            this.render(this.getDisplayLayer(key[i]));
+        }
+    }
+
+	public onLoad(): void {
+		this.on("show", this.handleShowLayer);
+		this.on("hide", this.handleHideLayer);
+        this.setFunc(this.handleClickMask, "clickMask");
+
+        // 添加蒙版层
+        const maskLayer = this.getDisplayLayer("mask");
+        maskLayer.animateType = AnimateType.fade;
+        this.render(maskLayer);
+
+        // 添加遮蔽层
+        const occludeLayer = this.getDisplayLayer("occlude");
+        occludeLayer.animateType = AnimateType.none;
+        this.render(occludeLayer);
+	}
+
+    /**
+     * 渲染 Layers
+     */
+    private render(layer: DisplayLayer) {
+        this.setData({ [`${ layer.key }$className`]: layer.className });
+    }
+
+	/**
+	 * 获取显示层
+	 */
+	private getDisplayLayer<K extends L | commonLayerType>(e: K): DisplayLayer {
+		let displayLayer = this.layers.get(e);
+		if (!displayLayer) {
+			displayLayer = new DisplayLayer();
+			displayLayer.key = e;
+			this.layers.set(e, displayLayer);
+		}
+		return displayLayer;
+	}
+
+    /**
+     * 响应蒙版点击事件
+     */
+    private handleClickMask = () => {
+
+        if (!this.autoCloseOnClick) return;
+
+        // 关闭全部开启的层
+        this.layers.forEach((layer) => {
+            if (layer.isShow) (this as Emitter<IAnyData>).emit("hide", layer.key);
+        });
+
+        // 关闭蒙版
+        (this as Emitter<IAnyData>).emit("hide", "mask");
+    }
+
+	/**
+	 * 响应显示层事件
+	 */
+	private handleShowLayer = <K extends L | commonLayerType>(e: K) => {
+		let displayLayer = this.getDisplayLayer(e);
+
+        // 阻止未发生的变化
+        if (displayLayer.isShow) return;
+
+        // 关闭其他层
+        if (e !== "mask" && e !== "occlude" && this.hideOtherWhenShow) {
+            this.layers.forEach((layer) => {
+                if (layer.key === "mask" || layer.key === "occlude") return;
+                if (layer.isShow) {
+                    (this as Emitter<IAnyData>).emit("hide", layer.key);
+                }
+            });
+        }
+
+        // 显示蒙版
+        if (e !== "mask" && e !== "occlude")
+        (this as Emitter<IAnyData>).emit("show", "mask");
+
+		// 取消消失定时
+		displayLayer.disappearTimer && 
+		clearTimeout(displayLayer.disappearTimer);
+
+        displayLayer.isShow = true;
+        displayLayer.isDisplay = true;
+        this.render(displayLayer);
+
+        this.emit("change", displayLayer);
+	};
+
+	/**
+	 * 响应隐藏层事件
+	 */
+	private handleHideLayer = <K extends L | commonLayerType>(e: K) => {
+		let displayLayer = this.getDisplayLayer(e);
+
+        // 阻止未发生的变化
+        if (!displayLayer.isShow) return;
+
+        if (displayLayer.animateTime <= 0) {
+
+            displayLayer.isShow = false;
+            displayLayer.isDisplay = false;
+            this.render(displayLayer);
+        } else {
+
+            displayLayer.isShow = false;
+            this.render(displayLayer);
+
+            // 开启遮蔽
+            if (this.showOccludeWhenHide) {
+                (this as Emitter<IAnyData>).emit("show", "occlude");
+            }
+
+            displayLayer.disappearTimer = setTimeout(() => {
+                displayLayer.isDisplay = false;
+                this.render(displayLayer);
+
+                // 取消 timer
+                displayLayer.disappearTimer = undefined;
+
+                // 检测是否关闭遮蔽
+                let needOcclude = true;
+                this.layers.forEach((layer) => {
+                    if (layer === displayLayer) return;
+                    if (layer.disappearTimer) needOcclude = false;
+                });
+
+                // 关闭遮蔽
+                if (needOcclude && this.showOccludeWhenHide) {
+                    (this as Emitter<IAnyData>).emit("hide", "occlude");
+                }
+
+            }, displayLayer.animateTime);
+        }
+
+        // 关闭蒙版
+        if (e !== "mask" && e !== "occlude") {
+            let needMask = true;
+            this.layers.forEach((layer) => {
+                if (layer === displayLayer) return;
+                if (layer.isShow) needMask = false;
+            });
+
+            if (needMask) (this as Emitter<IAnyData>).emit("hide", "mask");
+        }
+
+        this.emit("change", displayLayer);
+	}
+}
+
+export { PopupLayer };
+export default PopupLayer;

miniprogram/modular/Popups/Popups.scss

@@ -1,49 +0,0 @@
-@import "../../app.scss";
-
-view.popups {
-    position: fixed;
-    width: 75%;
-    height: 75%;
-    margin:auto;
-    left:0;
-    right:0;
-    top:0;
-    bottom:0;
-    background-color: $theme-color-light-layout;
-    border-radius: 15px;
-    z-index: 2;
-}
-view.popups.block {
-    display: block;
-}
-view.popups.none {
-    display: none;
-}
-
-view.popups.show {
-    animation-duration: 0.5s;
-    animation-name: show;
-}
-
-view.popups.hide {
-    animation-duration: 0.5s;
-    animation-name: hide;
-}
-
-@keyframes show{
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes hide{
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
-}

miniprogram/modular/Popups/Popups.ts

@@ -1,58 +0,0 @@
-import { Modular, Manager } from "../../core/Module";
-
-class Popups<M extends Manager> extends Modular<M> {
-
-     /**
-     * 动画运行时间
-     */
-    public static readonly animateTime: number = 100;
-
-    public data? = {
-        
-        /**
-		 *  弹出层是否显示
-		 */
-        display:false,
-
-        /**
-         * 弹出层动画
-         */
-        isShow:false
-    };
-    
-    disappearTimer: number | undefined;
-
-    /**
-	 * 显示弹出层
-	 */
-	public showPopups() {
-    this.setData({
-      isShow:true,
-      display:true
-    });
-	}
-
-	/**
-	 * 隐藏弹出层
-	 */
-	public hidePopups() {
-		this.setData({
-            isShow:false
-        });
-        
-        this.disappearTimer = setTimeout(() => {
-            this.setData({ 
-                display: false
-            });
-        }, Popups.animateTime);
-
-	}
-	
-	public override onLoad() {
-        // Do something
-    }
-
-}
-
-export { Popups };
-export default Popups;

miniprogram/pages/Account/Account.scss

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

miniprogram/pages/Account/Account.ts

@@ -2,21 +2,30 @@ import { Manager } from "../../core/Module";
 import { UserCard } from "./UserCard";
 import { MainFunction } from "./MainFunction";
 import { FunctionList } from "./FunctionList";
-import { Mask } from "../../modular/Mask/Mask";
+import { PopupLayer } from "../../modular/PopupLayer";
-import {Popups} from "../../modular/Popups/Popups"
+import { TestLayerA } from "./TestLayerA";
 
 (async () => {
 
     // 初始化页面
     const { manager, query } = await Manager.PageAsync();
 
-    // 添加蒙版 Modular
+    // 添加弹出层 Modular
-    const mask = manager.addModule(Mask, "mask");
+    const popupLayer: PopupLayer<"layerA" | "layerB"> = manager.addModule(PopupLayer, "mask") as any;
-
-    const popups = manager.addModule(Popups,"popups")
 
     // 添加 UserCard Modular
-    manager.addModule(UserCard, "userCard", { mask, popups });
+    const userCard = manager.addModule(UserCard, "userCard");
+
+    //#region test layer
+    popupLayer.initLayers(["layerA", "layerB"]);
+    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,9 +1,18 @@
-<!-- 蒙版 -->
+<!-- 层遮蔽层 -->
-<view class="mask {{  mask$isShow ? 'show' : 'hide' }} {{ mask$isDisplay ? 'block' : 'none' }}" 
+<view class="{{ mask$occlude$className }}" bindtap="mask$clickMask"></view>
-    bindtap="mask$handleClickMask"></view>
 
-<!-- 弹出层 -->
+<!-- 蒙版 -->
-<view class="popups" style="display:{{popups$isShow ? 'block' : 'none'}}"></view>
+<view class="{{ mask$mask$className }}" bindtap="mask$clickMask"></view>
+
+<!-- 层A -->
+<view class="{{ mask$layerA$className }}" 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="{{ mask$layerB$className }}" 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,11 +1,4 @@
-import Popups from "modular/Popups/Popups";
 import { Modular, Manager } from "../../core/Module";
-import { Mask } from "../../modular/Mask/Mask";
-
-type IUserCardDependent<M extends Manager> = {
-    mask: Mask<M>
-    popups: Popups<M>
-}
 
 type IUserCardEvent = {
 
@@ -15,19 +8,17 @@ 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?.popups.showPopups();
+        this.emit("clickChangeTheme");
-        this.depends?.mask.emit("show", void 0);
-        this.emit("clickChangeTheme", void 0);
     }
 }
 

project.config.json

@@ -1,7 +1,8 @@
 {
-  "description": "项目配置文件",
+  "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
   "packOptions": {
-    "ignore": []
+    "ignore": [],
+    "include": []
   },
   "miniprogramRoot": "miniprogram/",
   "compileType": "miniprogram",
@@ -46,13 +47,16 @@
     "useCompilerPlugins": [
       "typescript",
       "sass"
-    ]
+    ],
+    "useStaticServer": true
   },
   "simulatorType": "wechat",
   "simulatorPluginLibVersion": {},
   "appid": "wx7d809f5e8955843d",
-  "scripts": {
+  "condition": {},
-    "beforeCompile": ""
+  "srcMiniprogramRoot": "miniprogram/",
-  },
+  "editorSetting": {
-  "condition": {}
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
 }

project.private.config.json

@@ -1,15 +1,5 @@
 {
-  "setting": {},
   "condition": {
-    "plugin": {
-      "list": []
-    },
-    "game": {
-      "list": []
-    },
-    "gamePlugin": {
-      "list": []
-    },
     "miniprogram": {
       "list": [
         {
@@ -17,14 +7,13 @@
           "pathName": "pages/Account/Account",
           "query": "",
           "scene": null
-        },
-        {
-          "name": "pages/Account/Account",
-          "pathName": "pages/Account/Account",
-          "query": "",
-          "scene": null
         }
       ]
     }
-  }
+  },
+  "projectname": "mini-dlpu-v3",
+  "setting": {
+    "compileHotReLoad": true
+  },
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html"
 }