(#36) Add popups

miniprogram/api/EduBase.ts

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

miniprogram/api/Login.ts

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

miniprogram/app.scss

@@ -6,27 +6,20 @@ $theme-color-light-layout: #F8F8F8;
 $theme-color-light-background: #f4f0f1;
 $theme-color-light-title: rgba(0, 0, 0, .65);
 $theme-color-light-text: rgba(0, 0, 0, .5);
-$theme-color-light-line: rgba(0, 0, 0, .25);
 
 $theme-color-dark-layout: #1f1f1f;
 $theme-color-dark-background: #181615;
 $theme-color-dark-title: rgba(255, 255, 255, .65);
 $theme-color-dark-text: rgba(255, 255, 255, .5);
-$theme-color-dark-line: rgba(255, 255, 255, .25);
 
 $black-filter: brightness(0) opacity(.65);
 $white-filter: brightness(100) opacity(.65);
 $blue-filter: opacity(1);
-$green-filter: hue-rotate(-110deg) opacity(1);
-
-@mixin container {
-    width: 88%;
-    padding: 0 6%;
-}
 
 // 页面容器外边距
 view.container {
-    @include container;
+    width: 88%;
+    padding: 0 6%;
 }
 
 // 带阴影的 card
@@ -87,14 +80,6 @@ view.h3 {
     letter-spacing: .1em;
 }
  
-view.button {
-    color: white;
-    background-color: $theme-color-blue;
-    text-align: center;
-    padding: 10px;
-    border-radius: 10px;
-}
- 
 @media (prefers-color-scheme: dark){
     page {
         background-color: $theme-color-dark-background;

miniprogram/core/Api.ts

@@ -1,4 +1,4 @@
-import { Emitter, EventType, EventMixin } from "./Emitter";
+import { Emitter, EventType } from "./Emitter";
 import { API_FAILED_SHOW_MESSAGE } from "./Config";
 import { Logger, LogLabel, LevelLogLabel, colorRadio, StatusLabel } from "./Logger";
 interface IAppAPIParam {
@@ -156,7 +156,16 @@ class API<
     O extends IAnyData = IAnyData,
     E extends Record<EventType, any> = Record<EventType, any>,
     U extends IAnyData = IAnyData
-> extends Emitter<EventMixin<IAPIEvent<I, O> & IAPIResultEvent<O, U>, E>> {
+> extends Emitter <
+    {
+        // 这个复杂的泛型是为了 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]
+    }
+> {
 
     /**
      * 默认调试标签
@@ -307,7 +316,7 @@ class API<
         }
 
         // 触发数据初始化事件
-        (this as Emitter<IAnyData>).emit("initData", this.data);
+        this.emit("initData", this.data);
 
         // 重置请求数据
         const requestData:IWxRequestOption<O> = this.requestData = {
@@ -334,7 +343,7 @@ class API<
         }
 
         // 触发数据解析
-        (this as Emitter<IAnyData>).emit("parseRequestData", this.data);
+        this.emit("parseRequestData", this.data);
 
         // 数据收集
         for (let key in this.params) {
@@ -452,18 +461,18 @@ class API<
         let request = () => {
 
             // 触发请求发送事件
-            (this as Emitter<IAnyData>).emit("request", this.requestData!)
+            this.emit("request", this.requestData!)
 
             wx.request<O>({
                 ...this.requestData!,
                 success: (e) => {
-                    (this as Emitter<IAnyData>).emit("success", e);
+                    this.emit("success", e);
                 },
                 fail: (e) => {
-                    (this as Emitter<IAnyData>).emit("fail", e);
+                    this.emit("fail", e);
                 },
                 complete: (e) => {
-                    (this as Emitter<IAnyData>).emit("complete", e);
+                    this.emit("complete", e);
                 }
             });
         }
@@ -481,12 +490,12 @@ class API<
                 // 使用上次请求结果
                 if (this.policy === RequestPolicy.useLastRequest) {
                     lastAPI.on("success", (e) => {
-                        (this as Emitter<IAnyData>).emit("success", e as SuccessCallbackResult<O>);
+                        this.emit("success", e as SuccessCallbackResult<O>);
-                        (this as Emitter<IAnyData>).emit("complete", {errMsg: e.errMsg});
+                        this.emit("complete", {errMsg: e.errMsg});
                     });
                     lastAPI.on("fail", (e) => {
-                        (this as Emitter<IAnyData>).emit("fail", e);
+                        this.emit("fail", e);
-                        (this as Emitter<IAnyData>).emit("complete", {errMsg: e.errMsg});
+                        this.emit("complete", {errMsg: e.errMsg});
                     });
                 }
 
@@ -596,8 +605,8 @@ class API<
      */
     public addFailedCallBack(): this {
         this.on("fail", (e) => {
-            (this as Emitter<IAnyData>).emit("no", e as any);
+            this.emit("no", e as any);
-            (this as Emitter<IAnyData>).emit("done", e as any);
+            this.emit("done", e as any);
         });
         return this;
     }

miniprogram/core/Data.ts

@@ -1,4 +1,3 @@
-import { Storage } from "./Storage";
 
 /**
  * 数据层键值设置
@@ -13,22 +12,22 @@ interface IDataParamSettingItem {
     /**
      * 键值是否可以获取
      */
-    get?: ((...P: any) => this["type"]) | INone;
+    isGet: boolean;
 
     /**
      * 键值是否可以设置
      */
-    set?: ((...P: [this["type"], ...any]) => any) | INone;
+    isSet: boolean;
 
     /**
      * 是否仅为异步获取
      */
-    getAsync?: ((...P: any) => Promise<this["type"]>) | INone;
+    isGetAsync?: boolean;
 
     /**
      * 是否仅为异步设置
      */
-    setAsync?: ((...P: [this["type"], ...any]) => Promise<any>) | INone;
+    isSetAsync?: boolean;
 }
 
 /**
@@ -38,7 +37,12 @@ interface IDataParamSetting {
     [x: string]: IDataParamSettingItem
 }
 
-type INone = undefined | void;
+type IGet<T> = () => T;
+type IGetAsync<T> = () => Promise<T>;
+type ISet<T> = (data: T) => INone;
+type ISetAsync<T> = (data: T) => Promise<INone>;
+
+type INone = undefined | void | unknown;
 
 /**
  * 注册表结构
@@ -48,24 +52,22 @@ type IRegistryItem<S extends IDataParamSettingItem> = {
     /**
      * 获取方法
      */
-    get: S["get"];
+    get: S["isGetAsync"] extends true ? INone : S["isGet"] extends true ? IGet<S["type"]> : INone;
 
     /**
      * 异步获取方法
      */
-    getAsync: S["getAsync"] extends Function ? S["getAsync"] : 
+    getAsync: S["isGet"] extends true ? IGetAsync<S["type"]> : INone;
-    S["get"] extends ((...P: any) => S["type"]) ? (...param: Parameters<S["get"]>) => Promise<S["type"]> : INone;
 
     /**
      * 设置方法
      */
-    set: S["set"];
+    set: S["isSetAsync"] extends true ? INone : S["isSet"] extends true ? ISet<S["type"]> : INone;
 
     /**
      * 异步设置方法
      */
-    setAsync: S["setAsync"] extends Function ? S["setAsync"] : 
+    setAsync: S["isSet"] extends true ? ISetAsync<S["type"]> : INone;
-    S["set"] extends ((...P: [S["type"], ...any]) => any) ? (...param: Parameters<S["set"]>) => Promise<ReturnType<S["set"]>> : INone;
 }
 
 /**
@@ -89,16 +91,16 @@ type IAutoSelect<IF extends boolean, A, B> = IF extends true ? A : B;
  * ```typescript
  * class TestData extends Data<{
  *     test: {
- *         type: number
+ *         type: number,
- *         get: () => number,
+ *         isGet: true,
- *         set: (val: number) => void,
+ *         isSet: true,
- *         getAsync: () => Promise<number>
+ *         isGetAsync: true
  *     }
  * }> {
  *     public onLoad() {
  *         let dataObject = {key: 1}
  *         this.getter("test", () => 1);
- *         this.registerKeyFromObject(dataObject, "test", "key");
+ *         this.registerKeyFromObject("test", "key", dataObject);
  *     }
  * }
  * ```
@@ -181,9 +183,9 @@ class Data<D extends IDataParamSetting> {
      */
     protected registerKeyFromObject<
         KEY extends keyof D, 
-        F extends string, 
+        F extends keyof O, 
         O extends {[K in F]: D[KEY]["type"]}
-    > (object: O, key: KEY, keyFromObject: F = key as any) {
+    > (key: KEY, keyFromObject: F, object: O) {
 
         // 注册同步获取
         this.getter(key, () => {
@@ -196,33 +198,6 @@ 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 数据对象
@@ -248,12 +223,12 @@ class Data<D extends IDataParamSetting> {
     
             // 检验 getter
             if (item.get && !item.getAsync) {
-                item.getAsync = this.syncFn2AsyncFn(item.get) as any;
+                item.getAsync = this.syncFn2AsyncFn(item.get as IGet<D[KEY]["type"]>);
             }
     
             // 检验 setter
             if (item.set && !item.setAsync) {
-                item.setAsync = this.syncFn2AsyncFn(item.set) as any;
+                item.setAsync = this.syncFn2AsyncFn(item.set as ISet<D[KEY]["type"]>);
             }
         }
 
@@ -265,13 +240,11 @@ class Data<D extends IDataParamSetting> {
      * 将同步函数转换为异步函数
      * @param fn 同步函数
      */
-    protected syncFn2AsyncFn<F extends (...p: any) => any> (fn: F): (...param: Parameters<F>) => ReturnType<F> {
+    protected syncFn2AsyncFn<D, H extends (IGet<D> | ISet<D>)> (fn: H): 
+    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,21 +13,6 @@ 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>> {
 	
 	/**
@@ -89,8 +74,7 @@ export class Emitter<Events extends Record<EventType, any>> {
 	 * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
 	 * @memberOf mitt
 	 */
-	public emit<Key extends keyof Events>(...param: IEmitParamType<Events, Key>): this {
+	emit<Key extends keyof Events>(type: Key, evt: Events[Key]) {
-		const [ type, evt ] = param;
 		let handlers = this.all!.get(type);
 		if (handlers) {
 			(handlers as EventHandlerList<Events[keyof Events]>)
@@ -99,6 +83,5 @@ export class Emitter<Events extends Record<EventType, any>> {
 					handler(evt!);
 				});
 		}
-		return this;
 	}
 }

miniprogram/data/StudentInfo.ts

@@ -1,154 +0,0 @@
-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/image/account/Account_Complete.svg

@@ -1,94 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#F4F0F1;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;}
-	.st3{fill:#1A1A1A;}
-	.st4{fill:none;stroke:#1A1A1A;stroke-width:3;stroke-miterlimit:10;}
-	.st5{fill:none;stroke:#1A1A1A;stroke-miterlimit:10;}
-	.st6{fill:#3EA3D8;}
-	.st7{display:none;}
-	.st8{display:inline;}
-	.st9{fill:#808080;}
-	.st10{display:inline;fill:#808080;}
-	.st11{fill:none;stroke:#808080;stroke-miterlimit:10;}
-	.st12{fill:#7AC943;}
-	.st13{fill:none;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st14{fill:#FFFFFF;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st15{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}
-	.st16{fill:#CCCCCC;}
-	.st17{fill:none;stroke:#CCCCCC;stroke-linecap:square;stroke-miterlimit:10;}
-	.st18{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;stroke-dasharray:1.9084,1.9084;}
-	.st19{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
-	.st20{fill:#666666;}
-	.st21{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-	.st22{fill:#B3B3B3;}
-	.st23{opacity:0.05;}
-	.st24{clip-path:url(#SVGID_00000047771584930258237770000008464236368807665038_);}
-	.st25{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
-	.st26{opacity:0.4;fill:#3EA3D8;}
-	.st27{fill:none;stroke:#3EA3D8;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-</style>
-<g id="A3">
-	<g id="HEADER_x5F_BAR_00000036974300579741410940000000488572858971942531_">
-	</g>
-</g>
-<g id="A2">
-	<g id="HEADER_x5F_BAR_00000019648451390881128220000012673596900810320021_">
-	</g>
-	<g id="BUTTON_00000117651906535404305420000016044620869483747487_">
-	</g>
-	<g id="USER_x5F_FORM">
-	</g>
-	<g id="INTRO">
-	</g>
-	<g id="DLPU_x5F_LOGO">
-	</g>
-</g>
-<g id="A1">
-	<g id="NAV_x5F_BAR_00000129914889952932149030000011711506177042644156_">
-	</g>
-	<g id="HEADER_x5F_BAR_00000015351907221170818370000001589878730520391302_">
-	</g>
-	<g id="FUNC_x5F_LIST">
-	</g>
-	<g id="MAIN_x5F_FUNC">
-	</g>
-	<g id="USER_x5F_CARD">
-		<g id="BG" class="st23">
-		</g>
-	</g>
-</g>
-<g id="ICON">
-	<g>
-		<path class="st6" d="M50,0c8.69,0,17.06,2.22,24.48,6.39c2.24,1.26,3.03,4.1,1.78,6.34c-1.26,2.24-4.1,3.03-6.34,1.78
-			C63.84,11.08,56.98,9.29,50,9.3C27.53,9.3,9.3,27.52,9.3,50S27.53,90.7,50,90.7c22.48,0,40.7-18.22,40.7-40.7
-			c0-7.9-2.25-15.46-6.42-21.96c-1.39-2.16-0.76-5.04,1.4-6.43c2.16-1.39,5.04-0.76,6.43,1.4c5.17,8.05,7.91,17.42,7.9,26.99
-			c0,27.61-22.38,50-50,50C22.39,100,0,77.61,0,50C0,22.39,22.39,0,50,0L50,0z M50,0"/>
-		<path class="st6" d="M83.48,20.51c1.7-1.82,4.53-1.97,6.42-0.36c1.89,1.61,2.18,4.43,0.65,6.39l-0.33,0.38L51.09,67.99
-			c-1.67,1.75-4.4,1.93-6.29,0.41l-0.39-0.35L26.66,50.11c-1.75-1.75-1.82-4.58-0.16-6.41c1.67-1.84,4.48-2.04,6.4-0.47l0.37,0.34
-			L47.65,58.1L83.48,20.51z M83.48,20.51"/>
-	</g>
-</g>
-<g id="DEFAULT_x5F_AVATOR">
-</g>
-<g id="COLOR">
-</g>
-<g id="NAV_x5F_BAR">
-	<g id="ICON_x5F_SETTING">
-	</g>
-	<g id="ICON_x5F_INFO">
-	</g>
-	<g id="ICON_x5F_KCB">
-	</g>
-</g>
-<g id="HEADER_x5F_BAR">
-	<g id="BUTTON">
-	</g>
-	<g id="TOP">
-	</g>
-</g>
-</svg>

miniprogram/image/account/Account_Info.svg

@@ -1,93 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#F4F0F1;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;}
-	.st3{fill:#1A1A1A;}
-	.st4{fill:none;stroke:#1A1A1A;stroke-width:3;stroke-miterlimit:10;}
-	.st5{fill:none;stroke:#1A1A1A;stroke-miterlimit:10;}
-	.st6{fill:#3EA3D8;}
-	.st7{display:none;}
-	.st8{display:inline;}
-	.st9{fill:#808080;}
-	.st10{display:inline;fill:#808080;}
-	.st11{fill:none;stroke:#808080;stroke-miterlimit:10;}
-	.st12{fill:#7AC943;}
-	.st13{fill:none;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st14{fill:#FFFFFF;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st15{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}
-	.st16{fill:#CCCCCC;}
-	.st17{fill:none;stroke:#CCCCCC;stroke-linecap:square;stroke-miterlimit:10;}
-	.st18{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;stroke-dasharray:1.9084,1.9084;}
-	.st19{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
-	.st20{fill:#666666;}
-	.st21{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-	.st22{fill:#B3B3B3;}
-	.st23{opacity:0.05;}
-	.st24{clip-path:url(#SVGID_00000177474060957557094400000000012443665588057228_);}
-	.st25{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
-	.st26{opacity:0.4;fill:#3EA3D8;}
-	.st27{fill:none;stroke:#3EA3D8;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-</style>
-<g id="A3">
-	<g id="HEADER_x5F_BAR_00000036974300579741410940000000488572858971942531_">
-	</g>
-</g>
-<g id="A2">
-	<g id="HEADER_x5F_BAR_00000019648451390881128220000012673596900810320021_">
-	</g>
-	<g id="BUTTON_00000117651906535404305420000016044620869483747487_">
-	</g>
-	<g id="USER_x5F_FORM">
-	</g>
-	<g id="INTRO">
-	</g>
-	<g id="DLPU_x5F_LOGO">
-	</g>
-</g>
-<g id="A1">
-	<g id="NAV_x5F_BAR_00000129914889952932149030000011711506177042644156_">
-	</g>
-	<g id="HEADER_x5F_BAR_00000015351907221170818370000001589878730520391302_">
-	</g>
-	<g id="FUNC_x5F_LIST">
-	</g>
-	<g id="MAIN_x5F_FUNC">
-	</g>
-	<g id="USER_x5F_CARD">
-		<g id="BG" class="st23">
-		</g>
-	</g>
-</g>
-<g id="ICON">
-	<g>
-		<path class="st6" d="M50,0C22.39,0,0,22.39,0,50c0,27.61,22.39,50,50,50c27.61,0,50-22.39,50-50C100,22.39,77.61,0,50,0L50,0z
-			 M50,8.77c22.77,0,41.23,18.46,41.23,41.23S72.77,91.23,50,91.23S8.77,72.77,8.77,50S27.23,8.77,50,8.77L50,8.77z M50,8.77"/>
-		<path class="st6" d="M50,43.19c3.04,0,4.56,1.52,4.56,4.56v23.72c0,3.04-1.52,4.56-4.56,4.56c-3.04,0-4.56-1.52-4.56-4.56V47.75
-			C45.44,44.71,46.96,43.19,50,43.19L50,43.19z M50,43.19"/>
-		<path class="st6" d="M43.33,30.64c0,2.38,1.27,4.58,3.33,5.77c2.06,1.19,4.6,1.19,6.67,0c2.06-1.19,3.33-3.39,3.33-5.77
-			c0-2.38-1.27-4.58-3.33-5.77c-2.06-1.19-4.6-1.19-6.67,0C44.6,26.05,43.33,28.25,43.33,30.64L43.33,30.64z M43.33,30.64"/>
-	</g>
-</g>
-<g id="DEFAULT_x5F_AVATOR">
-</g>
-<g id="COLOR">
-</g>
-<g id="NAV_x5F_BAR">
-	<g id="ICON_x5F_SETTING">
-	</g>
-	<g id="ICON_x5F_INFO">
-	</g>
-	<g id="ICON_x5F_KCB">
-	</g>
-</g>
-<g id="HEADER_x5F_BAR">
-	<g id="BUTTON">
-	</g>
-	<g id="TOP">
-	</g>
-</g>
-</svg>

miniprogram/image/account/Account_PasswordHidden.svg

@@ -1,94 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#F4F0F1;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;}
-	.st3{fill:#1A1A1A;}
-	.st4{fill:none;stroke:#1A1A1A;stroke-width:3;stroke-miterlimit:10;}
-	.st5{fill:none;stroke:#1A1A1A;stroke-miterlimit:10;}
-	.st6{fill:#3EA3D8;}
-	.st7{display:none;}
-	.st8{display:inline;}
-	.st9{fill:#808080;}
-	.st10{display:inline;fill:#808080;}
-	.st11{fill:none;stroke:#808080;stroke-miterlimit:10;}
-	.st12{fill:#7AC943;}
-	.st13{fill:none;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st14{fill:#FFFFFF;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st15{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}
-	.st16{fill:#CCCCCC;}
-	.st17{fill:none;stroke:#CCCCCC;stroke-linecap:square;stroke-miterlimit:10;}
-	.st18{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;stroke-dasharray:1.9084,1.9084;}
-	.st19{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
-	.st20{fill:#666666;}
-	.st21{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-	.st22{fill:#B3B3B3;}
-	.st23{opacity:0.05;}
-	.st24{clip-path:url(#SVGID_00000096743565441905941170000016958695224966735273_);}
-	.st25{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
-	.st26{opacity:0.4;fill:#3EA3D8;}
-	.st27{fill:none;stroke:#3EA3D8;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-</style>
-<g id="A3">
-	<g id="HEADER_x5F_BAR_00000036974300579741410940000000488572858971942531_">
-	</g>
-</g>
-<g id="A2">
-	<g id="HEADER_x5F_BAR_00000019648451390881128220000012673596900810320021_">
-	</g>
-	<g id="BUTTON_00000117651906535404305420000016044620869483747487_">
-	</g>
-	<g id="USER_x5F_FORM">
-	</g>
-	<g id="INTRO">
-	</g>
-	<g id="DLPU_x5F_LOGO">
-	</g>
-</g>
-<g id="A1">
-	<g id="NAV_x5F_BAR_00000129914889952932149030000011711506177042644156_">
-	</g>
-	<g id="HEADER_x5F_BAR_00000015351907221170818370000001589878730520391302_">
-	</g>
-	<g id="FUNC_x5F_LIST">
-	</g>
-	<g id="MAIN_x5F_FUNC">
-	</g>
-	<g id="USER_x5F_CARD">
-		<g id="BG" class="st23">
-		</g>
-	</g>
-</g>
-<g id="ICON">
-	<path class="st6" d="M99.46,50.54c-0.71-1.43-18.11-35.5-49.55-35.5c-2.62,0-5.24,0.24-7.86,0.71c-1.91,0.48-3.34,2.14-2.86,4.05
-		c0.48,1.91,2.14,3.34,4.05,2.86c2.14-0.48,4.29-0.48,6.43-0.48c23.35,0,38.59,23.35,42.41,29.78c-1.19,2.14-3.57,5.96-7.15,10.24
-		c-1.19,1.43-0.95,3.81,0.48,5c0.71,0.48,1.43,0.71,2.38,0.71c0.95,0,2.14-0.48,2.86-1.19c5.72-6.91,8.81-12.86,8.81-13.1
-		C100.18,52.68,100.18,51.49,99.46,50.54z M16.8,9.56c-1.43-1.43-3.57-1.43-5,0s-1.43,3.57,0,5l10.24,10.24
-		C8.22,35.05,0.83,49.58,0.36,50.3c-0.48,0.95-0.48,2.14,0,3.34c0.71,1.43,18.11,35.26,49.55,35.26c9.29,0,18.34-3.1,26.92-9.05
-		l10.72,10.72c0.71,0.71,1.67,0.95,2.62,0.95c0.95,0,1.91-0.24,2.62-0.95c1.43-1.43,1.43-3.57,0-5L16.8,9.56z M43.95,46.96
-		l11.67,11.67c-1.43,1.43-3.57,2.38-5.72,2.38c-4.53,0-8.34-3.81-8.34-8.34C41.57,50.54,42.53,48.39,43.95,46.96z M49.91,81.75
-		c-23.35,0-38.59-23.35-42.41-29.78c2.38-4.05,9.05-14.53,19.54-21.92l11.67,11.67c-2.86,2.86-4.29,6.67-4.29,10.72
-		c0,8.58,6.91,15.49,15.49,15.49c4.05,0,7.86-1.67,10.72-4.29L71.59,74.6C64.68,79.36,57.3,81.75,49.91,81.75z"/>
-</g>
-<g id="DEFAULT_x5F_AVATOR">
-</g>
-<g id="COLOR">
-</g>
-<g id="NAV_x5F_BAR">
-	<g id="ICON_x5F_SETTING">
-	</g>
-	<g id="ICON_x5F_INFO">
-	</g>
-	<g id="ICON_x5F_KCB">
-	</g>
-</g>
-<g id="HEADER_x5F_BAR">
-	<g id="BUTTON">
-	</g>
-	<g id="TOP">
-	</g>
-</g>
-</svg>

miniprogram/image/account/Account_PasswordShow.svg

@@ -1,92 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#F4F0F1;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;}
-	.st3{fill:#1A1A1A;}
-	.st4{fill:none;stroke:#1A1A1A;stroke-width:3;stroke-miterlimit:10;}
-	.st5{fill:none;stroke:#1A1A1A;stroke-miterlimit:10;}
-	.st6{fill:#3EA3D8;}
-	.st7{display:none;}
-	.st8{display:inline;}
-	.st9{fill:#808080;}
-	.st10{display:inline;fill:#808080;}
-	.st11{fill:none;stroke:#808080;stroke-miterlimit:10;}
-	.st12{fill:#7AC943;}
-	.st13{fill:none;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st14{fill:#FFFFFF;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st15{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}
-	.st16{fill:#CCCCCC;}
-	.st17{fill:none;stroke:#CCCCCC;stroke-linecap:square;stroke-miterlimit:10;}
-	.st18{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;stroke-dasharray:1.9084,1.9084;}
-	.st19{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
-	.st20{fill:#666666;}
-	.st21{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-	.st22{fill:#B3B3B3;}
-	.st23{opacity:0.05;}
-	.st24{clip-path:url(#SVGID_00000124849447952852579110000006476751934385998486_);}
-	.st25{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
-	.st26{opacity:0.4;fill:#3EA3D8;}
-	.st27{fill:none;stroke:#3EA3D8;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-</style>
-<g id="A3">
-	<g id="HEADER_x5F_BAR_00000036974300579741410940000000488572858971942531_">
-	</g>
-</g>
-<g id="A2">
-	<g id="HEADER_x5F_BAR_00000019648451390881128220000012673596900810320021_">
-	</g>
-	<g id="BUTTON_00000117651906535404305420000016044620869483747487_">
-	</g>
-	<g id="USER_x5F_FORM">
-	</g>
-	<g id="INTRO">
-	</g>
-	<g id="DLPU_x5F_LOGO">
-	</g>
-</g>
-<g id="A1">
-	<g id="NAV_x5F_BAR_00000129914889952932149030000011711506177042644156_">
-	</g>
-	<g id="HEADER_x5F_BAR_00000015351907221170818370000001589878730520391302_">
-	</g>
-	<g id="FUNC_x5F_LIST">
-	</g>
-	<g id="MAIN_x5F_FUNC">
-	</g>
-	<g id="USER_x5F_CARD">
-		<g id="BG" class="st23">
-		</g>
-	</g>
-</g>
-<g id="ICON">
-	<g>
-		<path class="st6" d="M50,66.23c-8.59,0-15.51-6.92-15.51-15.51S41.4,35.2,50,35.2s15.51,6.92,15.51,15.51S58.59,66.23,50,66.23z
-			 M50,42.36c-4.53,0-8.35,3.82-8.35,8.35s3.82,8.35,8.35,8.35s8.35-3.82,8.35-8.35S54.53,42.36,50,42.36z"/>
-		<path class="st6" d="M50,86.99c-31.5,0-48.93-33.89-49.64-35.32c-0.48-0.95-0.48-2.15,0-3.34C1.07,46.9,18.73,13.01,50,13.01
-			c31.5,0,48.93,34.13,49.64,35.56c0.48,0.95,0.48,2.15,0,3.34C98.92,53.1,81.5,86.99,50,86.99z M7.51,50
-			C11.33,56.44,26.61,79.83,50,79.83S88.66,56.44,92.48,50C88.66,43.56,73.39,20.17,50,20.17S11.33,43.56,7.51,50z"/>
-	</g>
-</g>
-<g id="DEFAULT_x5F_AVATOR">
-</g>
-<g id="COLOR">
-</g>
-<g id="NAV_x5F_BAR">
-	<g id="ICON_x5F_SETTING">
-	</g>
-	<g id="ICON_x5F_INFO">
-	</g>
-	<g id="ICON_x5F_KCB">
-	</g>
-</g>
-<g id="HEADER_x5F_BAR">
-	<g id="BUTTON">
-	</g>
-	<g id="TOP">
-	</g>
-</g>
-</svg>

miniprogram/image/account/Account_Question.svg

@@ -1,96 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#F4F0F1;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;}
-	.st3{fill:#1A1A1A;}
-	.st4{fill:none;stroke:#1A1A1A;stroke-width:3;stroke-miterlimit:10;}
-	.st5{fill:none;stroke:#1A1A1A;stroke-miterlimit:10;}
-	.st6{fill:#3EA3D8;}
-	.st7{display:none;}
-	.st8{display:inline;}
-	.st9{fill:#808080;}
-	.st10{display:inline;fill:#808080;}
-	.st11{fill:none;stroke:#808080;stroke-miterlimit:10;}
-	.st12{fill:#7AC943;}
-	.st13{fill:none;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st14{fill:#FFFFFF;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st15{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}
-	.st16{fill:#CCCCCC;}
-	.st17{fill:none;stroke:#CCCCCC;stroke-linecap:square;stroke-miterlimit:10;}
-	.st18{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;stroke-dasharray:1.9084,1.9084;}
-	.st19{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
-	.st20{fill:#666666;}
-	.st21{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-	.st22{fill:#B3B3B3;}
-	.st23{opacity:0.05;}
-	.st24{clip-path:url(#SVGID_00000091016287826886391250000017486262032961877648_);}
-	.st25{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
-	.st26{opacity:0.4;fill:#3EA3D8;}
-	.st27{fill:none;stroke:#3EA3D8;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-</style>
-<g id="A3">
-	<g id="HEADER_x5F_BAR_00000036974300579741410940000000488572858971942531_">
-	</g>
-</g>
-<g id="A2">
-	<g id="HEADER_x5F_BAR_00000019648451390881128220000012673596900810320021_">
-	</g>
-	<g id="BUTTON_00000117651906535404305420000016044620869483747487_">
-	</g>
-	<g id="USER_x5F_FORM">
-	</g>
-	<g id="INTRO">
-	</g>
-	<g id="DLPU_x5F_LOGO">
-	</g>
-</g>
-<g id="A1">
-	<g id="NAV_x5F_BAR_00000129914889952932149030000011711506177042644156_">
-	</g>
-	<g id="HEADER_x5F_BAR_00000015351907221170818370000001589878730520391302_">
-	</g>
-	<g id="FUNC_x5F_LIST">
-	</g>
-	<g id="MAIN_x5F_FUNC">
-	</g>
-	<g id="USER_x5F_CARD">
-		<g id="BG" class="st23">
-		</g>
-	</g>
-</g>
-<g id="ICON">
-	<g>
-		<path class="st6" d="M50,0C22.39,0,0,22.39,0,50c0,27.61,22.39,50,50,50c27.61,0,50-22.39,50-50C100,22.39,77.61,0,50,0L50,0z
-			 M50,8.77c22.77,0,41.23,18.46,41.23,41.23S72.77,91.23,50,91.23S8.77,72.77,8.77,50S27.23,8.77,50,8.77L50,8.77z M50,8.77"/>
-		<path class="st6" d="M53.59,61.54v-0.98c0-1.69,0.35-3.17,1.05-4.58c0.64-1.27,1.55-2.46,2.82-3.52c3.38-2.95,5.42-4.86,6.05-5.56
-			c1.68-2.25,2.6-5.14,2.6-8.66c0-4.3-1.41-7.67-4.22-10.13c-2.81-2.53-6.54-3.73-11.12-3.73c-5.21,0-9.29,1.48-12.32,4.43
-			c-3.09,2.96-4.58,7.04-4.58,12.25h8.02c0-2.95,0.56-5.28,1.76-6.89c1.34-1.97,3.52-2.89,6.61-2.89c2.39,0,4.3,0.63,5.63,1.97
-			c1.26,1.34,1.97,3.16,1.97,5.49c0,1.76-0.63,3.45-1.9,5l-0.85,0.98c-4.58,4.08-7.32,7.04-8.23,8.94c-0.99,1.9-1.41,4.22-1.41,6.9
-			v0.99H53.59z M49.51,75.61c1.54,0,2.81-0.49,3.87-1.48c1.05-0.98,1.61-2.32,1.61-3.87c0-1.55-0.56-2.81-1.54-3.8
-			c-1.06-0.98-2.39-1.48-3.94-1.48c-1.55,0-2.82,0.49-3.87,1.47c-1.06,0.99-1.55,2.26-1.55,3.8c0,1.55,0.49,2.81,1.55,3.8
-			C46.69,75.05,47.96,75.61,49.51,75.61L49.51,75.61z M49.51,75.61"/>
-	</g>
-</g>
-<g id="DEFAULT_x5F_AVATOR">
-</g>
-<g id="COLOR">
-</g>
-<g id="NAV_x5F_BAR">
-	<g id="ICON_x5F_SETTING">
-	</g>
-	<g id="ICON_x5F_INFO">
-	</g>
-	<g id="ICON_x5F_KCB">
-	</g>
-</g>
-<g id="HEADER_x5F_BAR">
-	<g id="BUTTON">
-	</g>
-	<g id="TOP">
-	</g>
-</g>
-</svg>

miniprogram/image/account/Account_UserName.svg

@@ -1,101 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#F4F0F1;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;}
-	.st3{fill:#1A1A1A;}
-	.st4{fill:none;stroke:#1A1A1A;stroke-width:3;stroke-miterlimit:10;}
-	.st5{fill:none;stroke:#1A1A1A;stroke-miterlimit:10;}
-	.st6{fill:#3EA3D8;}
-	.st7{display:none;}
-	.st8{display:inline;}
-	.st9{fill:#808080;}
-	.st10{display:inline;fill:#808080;}
-	.st11{fill:none;stroke:#808080;stroke-miterlimit:10;}
-	.st12{fill:#7AC943;}
-	.st13{fill:none;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st14{fill:#FFFFFF;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st15{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}
-	.st16{fill:#CCCCCC;}
-	.st17{fill:none;stroke:#CCCCCC;stroke-linecap:square;stroke-miterlimit:10;}
-	.st18{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;stroke-dasharray:1.9084,1.9084;}
-	.st19{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
-	.st20{fill:#666666;}
-	.st21{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-	.st22{fill:#B3B3B3;}
-	.st23{opacity:0.05;}
-	.st24{clip-path:url(#SVGID_00000145045565268559361070000017782594028069641132_);}
-	.st25{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
-	.st26{opacity:0.4;fill:#3EA3D8;}
-	.st27{fill:none;stroke:#3EA3D8;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-</style>
-<g id="A3">
-	<g id="HEADER_x5F_BAR_00000036974300579741410940000000488572858971942531_">
-	</g>
-</g>
-<g id="A2">
-	<g id="HEADER_x5F_BAR_00000019648451390881128220000012673596900810320021_">
-	</g>
-	<g id="BUTTON_00000117651906535404305420000016044620869483747487_">
-	</g>
-	<g id="USER_x5F_FORM">
-	</g>
-	<g id="INTRO">
-	</g>
-	<g id="DLPU_x5F_LOGO">
-	</g>
-</g>
-<g id="A1">
-	<g id="NAV_x5F_BAR_00000129914889952932149030000011711506177042644156_">
-	</g>
-	<g id="HEADER_x5F_BAR_00000015351907221170818370000001589878730520391302_">
-	</g>
-	<g id="FUNC_x5F_LIST">
-	</g>
-	<g id="MAIN_x5F_FUNC">
-	</g>
-	<g id="USER_x5F_CARD">
-		<g id="BG" class="st23">
-		</g>
-	</g>
-</g>
-<g id="ICON">
-	<g>
-		<path class="st6" d="M80.89,59.07c7.16-4.63,11.49-13.25,9.73-22.74c-1.52-8.17-7.87-14.98-15.9-17.09
-			c-5.26-1.38-10.26-0.79-14.57,1.09c0.9,1.91,1.62,3.92,2.02,6.05c2.06-0.99,4.34-1.6,6.79-1.6c10,0,17.85,9.35,15.27,19.76
-			c-0.99,4.01-3.81,7.32-7.28,9.55l1.19-0.77c-0.86,0.56-1.6,1.32-2.12,2.28c-0.52,0.96-0.77,2-0.77,3.01v0.75
-			c0,1.15,0.31,2.32,0.97,3.36c0.66,1.05,1.57,1.83,2.61,2.32l-0.67-0.32c8.3,3.97,14.1,12.67,15.6,23.09H68.95
-			c0.26,2.06,0.42,4.16,0.42,6.31h24.27c3.79,0,6.85-3.35,6.28-7.1C97.98,74.34,90.85,63.82,80.89,59.07L80.89,59.07z M80.89,59.07"
-			/>
-		<path class="st6" d="M6.35,94.15h68.9c0-19.11-10.42-35.32-24.98-41.47c9.04-5.4,14.5-16.17,11.56-28.01
-			c-2.2-8.87-9.45-16.03-18.36-18.1c-16.57-3.86-31.29,8.6-31.29,24.52c0,9.21,4.99,17.19,12.37,21.59
-			C11.83,58.05,2.27,71.13,0.06,87.11C-0.46,90.84,2.58,94.15,6.35,94.15L6.35,94.15z M27.01,58.49l0.25-0.1
-			c1.11-0.47,2.09-1.25,2.8-2.32c0.71-1.07,1.05-2.29,1.05-3.48v0.26c0-1.06-0.27-2.13-0.83-3.11c-0.56-0.98-1.34-1.76-2.25-2.3
-			l-0.25-0.14c-5.82-3.47-9.29-9.52-9.29-16.17c0-10.44,8.48-18.92,18.92-18.92s18.92,8.48,18.92,18.92c0,6.65-3.47,12.7-9.29,16.17
-			l-0.25,0.14c-0.9,0.55-1.7,1.32-2.25,2.3c-0.56,0.98-0.83,2.05-0.83,3.11v-0.27c0,1.19,0.33,2.41,1.05,3.48
-			c0.71,1.07,1.7,1.85,2.8,2.32l0.25,0.1C58.76,63.1,66.6,74.47,68.49,87.83H6.33C8.23,74.48,16.06,63.11,27.01,58.49L27.01,58.49z
-			 M27.01,58.49"/>
-	</g>
-</g>
-<g id="DEFAULT_x5F_AVATOR">
-</g>
-<g id="COLOR">
-</g>
-<g id="NAV_x5F_BAR">
-	<g id="ICON_x5F_SETTING">
-	</g>
-	<g id="ICON_x5F_INFO">
-	</g>
-	<g id="ICON_x5F_KCB">
-	</g>
-</g>
-<g id="HEADER_x5F_BAR">
-	<g id="BUTTON">
-	</g>
-	<g id="TOP">
-	</g>
-</g>
-</svg>

miniprogram/image/account/Account_Waitting.svg

@@ -1,90 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#F4F0F1;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;}
-	.st3{fill:#1A1A1A;}
-	.st4{fill:none;stroke:#1A1A1A;stroke-width:3;stroke-miterlimit:10;}
-	.st5{fill:none;stroke:#1A1A1A;stroke-miterlimit:10;}
-	.st6{fill:#3EA3D8;}
-	.st7{display:none;}
-	.st8{display:inline;}
-	.st9{fill:#808080;}
-	.st10{display:inline;fill:#808080;}
-	.st11{fill:none;stroke:#808080;stroke-miterlimit:10;}
-	.st12{fill:#7AC943;}
-	.st13{fill:none;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st14{fill:#FFFFFF;stroke:#E6E6E6;stroke-width:3;stroke-miterlimit:10;}
-	.st15{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}
-	.st16{fill:#CCCCCC;}
-	.st17{fill:none;stroke:#CCCCCC;stroke-linecap:square;stroke-miterlimit:10;}
-	.st18{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;stroke-dasharray:1.9084,1.9084;}
-	.st19{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
-	.st20{fill:#666666;}
-	.st21{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-	.st22{fill:#B3B3B3;}
-	.st23{opacity:0.05;}
-	.st24{clip-path:url(#SVGID_00000067940495327550631130000006202591132779276672_);}
-	.st25{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
-	.st26{opacity:0.4;fill:#3EA3D8;}
-	.st27{fill:none;stroke:#3EA3D8;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-</style>
-<g id="A3">
-	<g id="HEADER_x5F_BAR_00000036974300579741410940000000488572858971942531_">
-	</g>
-</g>
-<g id="A2">
-	<g id="HEADER_x5F_BAR_00000019648451390881128220000012673596900810320021_">
-	</g>
-	<g id="BUTTON_00000117651906535404305420000016044620869483747487_">
-	</g>
-	<g id="USER_x5F_FORM">
-	</g>
-	<g id="INTRO">
-	</g>
-	<g id="DLPU_x5F_LOGO">
-	</g>
-</g>
-<g id="A1">
-	<g id="NAV_x5F_BAR_00000129914889952932149030000011711506177042644156_">
-	</g>
-	<g id="HEADER_x5F_BAR_00000015351907221170818370000001589878730520391302_">
-	</g>
-	<g id="FUNC_x5F_LIST">
-	</g>
-	<g id="MAIN_x5F_FUNC">
-	</g>
-	<g id="USER_x5F_CARD">
-		<g id="BG" class="st23">
-		</g>
-	</g>
-</g>
-<g id="ICON">
-	<g>
-		<path class="st6" d="M49.92,0C22.35,0,0,22.35,0,49.92c0,27.57,22.35,49.92,49.92,49.92c27.57,0,49.92-22.35,49.92-49.92
-			C99.85,22.35,77.49,0,49.92,0L49.92,0z M49.92,8.76c22.74,0,41.16,18.43,41.16,41.16S72.66,91.09,49.92,91.09
-			S8.76,72.66,8.76,49.92S27.19,8.76,49.92,8.76L49.92,8.76z M49.92,8.76"/>
-	</g>
-</g>
-<g id="DEFAULT_x5F_AVATOR">
-</g>
-<g id="COLOR">
-</g>
-<g id="NAV_x5F_BAR">
-	<g id="ICON_x5F_SETTING">
-	</g>
-	<g id="ICON_x5F_INFO">
-	</g>
-	<g id="ICON_x5F_KCB">
-	</g>
-</g>
-<g id="HEADER_x5F_BAR">
-	<g id="BUTTON">
-	</g>
-	<g id="TOP">
-	</g>
-</g>
-</svg>

miniprogram/modular/Mask/Mask.scss

@@ -0,0 +1,45 @@
+@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

@@ -0,0 +1,115 @@
+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

@@ -1,99 +0,0 @@
-@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

@@ -1,309 +0,0 @@
-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

@@ -0,0 +1,49 @@
+@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

@@ -0,0 +1,58 @@
+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,12 +1,11 @@
 @import "./UserCard.scss";
 @import "./MainFunction.scss";
 @import "./FunctionList.scss";
-@import "./Login.scss";
+@import "../../modular/Mask/Mask.scss";
-@import "../../modular/PopupLayer.scss";
+@import "../../modular/Popups/Popups.scss";
 
 view.container{
-    padding-top: 20px;
+    padding-top: 50rpx;
-    padding-bottom: 20px;
 }
 
 

miniprogram/pages/Account/Account.ts

@@ -2,29 +2,21 @@ import { Manager } from "../../core/Module";
 import { UserCard } from "./UserCard";
 import { MainFunction } from "./MainFunction";
 import { FunctionList } from "./FunctionList";
-import { Login } from "./Login";
+import { Mask } from "../../modular/Mask/Mask";
-import { PopupLayer } from "../../modular/PopupLayer";
+import {Popups} from "../../modular/Popups/Popups"
 
 (async () => {
 
     // 初始化页面
     const { manager, query } = await Manager.PageAsync();
 
-    // 添加弹出层 Modular
+    // 添加蒙版 Modular
-    const popupLayer: PopupLayer<"loginLayer"> = manager.addModule(PopupLayer, "mask") as any;
+    const mask = manager.addModule(Mask, "mask");
 
-    // 初始化弹出层
+    const popups = manager.addModule(Popups,"popups")
-    popupLayer.initLayers(["loginLayer"]);
 
     // 添加 UserCard Modular
-    const userCard = manager.addModule(UserCard, "userCard");
+    manager.addModule(UserCard, "userCard", { mask, popups });
-
-    // 添加登录模块
-    const loginLayer = manager.addModule(Login, "loginLayer");
-
-    userCard.on("clickChangeTheme", () => {
-        popupLayer.emit("show", "loginLayer");
-    });
 
     // 添加 MainFunction Modular
     manager.addModule(MainFunction, "mainFunction");

miniprogram/pages/Account/Account.wxml

@@ -1,82 +1,9 @@
-<!-- 层遮蔽层 -->
-<view class="{{ mask$occlude$className }}" bindtap="mask$clickMask"></view>
-
 <!-- 蒙版 -->
-<view class="{{ mask$mask$className }}" bindtap="mask$clickMask"></view>
+<view class="mask {{  mask$isShow ? 'show' : 'hide' }} {{ mask$isDisplay ? 'block' : 'none' }}" 
+    bindtap="mask$handleClickMask"></view>
 
-<!-- 登录层 -->
+<!-- 弹出层 -->
-<view class="{{ mask$loginLayer$className }}" bindtap="mask$clickMask">
+<view class="popups" style="display:{{popups$isShow ? 'block' : 'none'}}"></view>
-    <view class="card login-layer" catchtap>
-
-        <!-- 学校logo -->
-        <view class="school-logo">
-            <view>
-                <image src="../../image/account/School_DLPU.png"></image>
-            </view>
-        </view>
-        
-        <view class="line-bg">
-            <view wx:for="{{ [0, 1, 2, 3, 4] }}" wx:key="item"></view>
-        </view>
-
-        <!-- 学生姓名 -->
-        <view class="student-name h2">秦浩轩</view>
-
-        <!-- 学号 -->
-        <view class="student-id">1806240113</view>
-
-        <!-- 状态 -->
-        <view class="login-state">
-            <view class="certified">
-                <view class="certifi-info">已认证</view>
-                <image class="text-icon" src="../../image/account/Account_OK.svg"></image>
-            </view>
-        </view>
-
-        <!-- 学号输入框 -->
-        <view class="student-info-input">
-            <view class="input-icon">
-                <image class="icon" src="../../image/account/Account_UserName.svg"></image>
-            </view>
-            <view class="input-view">
-                <input placeholder="请输入学号"/>
-            </view>
-        </view>
-
-        <!-- 密码输入框 -->
-        <view class="student-info-input">
-            <view class="input-icon">
-                <image class="icon" src="../../image/account/Account_PasswordHidden.svg"></image>
-            </view>
-            <view class="input-view">
-                <input placeholder="请输入密码"/>
-            </view>
-        </view>
-
-        <view style="height: 30px"/>
-
-        <!-- 提示语 -->
-        <view class="tip-info last-active">
-            <image src="../../image/account/Account_Info.svg"></image>
-            <view>账号最后活动时间: 2022.1.25-8.20</view>
-        </view>
-
-        <view class="tip-info agree-lic">
-            <image src="../../image/account/Account_Complete.svg"></image>
-            <view>同意<text>《用户协议》</text>和<text>《隐私政策》</text></view>
-        </view>
-
-        <view class="tip-info helper-link">
-            <image src="../../image/account/Account_Question.svg"></image>
-            <view>遇到问题了戳这里-><text>常见问题</text></view>
-        </view>
-
-        <!-- 登录按钮 -->
-        <view class="button save-button">
-            保存并验证
-        </view>
-    </view>
-</view>
 
 <!-- 顶部的阴影 -->
 <view class="top-shadow"></view>
@@ -125,7 +52,7 @@
         
         <!--每个功能的容器-->
         <view class="branch-funtion" wx:for="{{ mainFunction$mainFunctionList }}" wx:key="index">
-            <view style="{{ index == (mainFunction$mainFunctionList.length - 1) ? 'border-right: 0px' : '' }}">
+            <view style="{{ index == (mainFunction$mainFunctionList - 1) ? 'border-bottom: 0px' : '' }}">
                 <!--每个功能的图片-->
                 <image class="icon" src="../../image/account/Account_{{ item.iconUrl }}.svg"></image>
                 <!--每个功能的文字-->

miniprogram/pages/Account/FunctionList.scss

@@ -1,7 +1,8 @@
 @import "../../app.scss";
 
 view.function-list {
-    margin-top: 20px;
+    margin-top: 50rpx;
+    margin-bottom: 50rpx;
     padding: 0 0 !important;
     width: 100% !important;
 

miniprogram/pages/Account/Login.scss

@@ -1,170 +0,0 @@
-@import "../../app.scss";
-
-$logo-height: 100px;
-
-view.login-layer {
-
-    view.school-logo {
-        height: 0;
-        padding-top: 25px;
-        width: 100%;
-        text-align: center;
-
-        view {
-            z-index: 2;
-            display: inline-block;
-            position: relative;
-            border-radius: 1000px;
-            background-color: $theme-color-light-layout;
-            width: $logo-height;
-            height: $logo-height;
-
-            image {
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-
-    view.line-bg {
-        display: flex;
-        box-sizing: border-box;
-        padding: 35px 0;
-        height: $logo-height;
-        width: calc( 100% + 40px );
-        position: relative;
-        left: -20px;
-        flex-direction: column;
-        justify-content: space-around;
-
-        view {
-            height: 0;
-            width: 100%;
-            opacity: .5;
-            border-top: 2px solid $theme-color-light-line;
-        }
-    }
-
-    view.student-name {
-        margin: 10px 0 1px 0;
-        text-align: center;
-    }
-
-    view.student-id {
-        margin-bottom: 1px;
-        text-align: center;
-    }
-
-    view.login-state {
-        width: 100%;
-        margin-bottom: 20px;
-        text-align: center;
-
-        view.certified {
-            color: $theme-color-blue;
-            border: 1px solid $theme-color-blue;
-            border-radius: 4px;
-            margin-left: .3em;
-            font-size: .85em;
-            height: 1.2em;
-            padding: 0 2px;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-
-            image.text-icon {
-                margin-left: .25em;
-                width: 10px;
-                height: 10px;
-            }
-        }
-    }
-
-    view.student-info-input {
-        display: flex;
-        justify-content: center;
-        padding: 8px 0;
-
-        view.input-icon {
-            box-sizing: border-box;
-            padding: 3px 12px 3px 0;
-            flex-shrink: 0;
-            width: 38px;
-            height: 32px;
-
-            image {
-                width: 100%;
-                height: 100%;
-            }
-        }
-
-        view.input-view {
-            position: relative;
-            bottom: 3px;
-            box-sizing: border-box;
-            border-bottom: 1.5px solid $theme-color-light-line;
-            flex-grow: 1;
-            width: 100%;
-            height: 32px;
-
-            input {
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-
-    view.tip-info {
-        width: 100%;
-        vertical-align: middle;
-        padding: 1px 0;
-        font-size: .9em;
-
-        image {
-            vertical-align: middle;
-            width: 16px;
-            height: 16px;
-            margin-right: 5px;
-        }
-
-        view {
-            vertical-align: middle;
-            display: inline;
-
-            text {
-                color: $theme-color-blue;
-                text-decoration: underline;
-            }
-        }
-    }
-
-    view.agree-lic image {
-        filter: $green-filter;
-    }
-
-    view.save-button {
-        margin: 15px 0 25px 0;
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-
-    view.login-layer {
-
-        view.school-logo view {
-            background-color: $theme-color-dark-layout;
-            
-            image {
-                filter: $white-filter;
-            }
-        }
-        
-        view.line-bg view {
-            border-top: 2px solid $theme-color-dark-line;
-        }
-
-        view.student-info-input view.input-view {
-            border-bottom: 1.5px solid $theme-color-dark-line;
-        }
-    }
-}

miniprogram/pages/Account/Login.ts

@@ -1,15 +0,0 @@
-import { Modular, Manager } from "../../core/Module";
-
-type ILoginEvent = {
-    
-}
-
-class Login<M extends Manager> extends Modular<M, {}> {
-
-    public override onLoad() {
-        
-    }
-}
-
-export { Login };
-export default Login;

miniprogram/pages/Account/MainFunction.scss

@@ -3,7 +3,7 @@
 //主要功能
 view.main-function {
   display: flex;
-  margin-top: 20px;
+  margin-top: 50rpx;
   padding: 0 !important;
   width: 100% !important;
 

miniprogram/pages/Account/UserCard.ts

@@ -1,4 +1,11 @@
+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 = {
 
@@ -8,17 +15,19 @@ type IUserCardEvent = {
     clickChangeTheme: void;
 }
 
-class UserCard<M extends Manager> extends Modular<M, {}, IUserCardEvent> {
+class UserCard<M extends Manager> extends Modular<M, IUserCardDependent<M>, IUserCardEvent> {
 
     public override onLoad() {
-        this.setFunc(this.handleChangeTheme, "changeTheme");
+        this.setFunc(this.handleChangeTheme, "changeTheme")
     }
     
     /**
      * 处理主题更换
      */
     private handleChangeTheme() {
-        this.emit("clickChangeTheme");
+        this.depends?.popups.showPopups();
+        this.depends?.mask.emit("show", void 0);
+        this.emit("clickChangeTheme", void 0);
     }
 }
 

project.config.json

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

project.private.config.json

@@ -1,5 +1,15 @@
 {
+  "setting": {},
   "condition": {
+    "plugin": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
     "miniprogram": {
       "list": [
         {
@@ -7,13 +17,14 @@
           "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"
 }