(#28)Add Schedule API

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

miniprogram/api/EduBase.ts

@@ -0,0 +1,95 @@
+import { API, IAnyData, GeneralCallbackResult } from "../core/Api";
+import { EventType } from "../core/Emitter";
+
+interface ILoginEvent {
+
+    /**
+     * session 过期
+     */
+    expire: GeneralCallbackResult;
+
+    /**
+     * 登录失败
+     */
+    unauthorized: GeneralCallbackResult;
+
+    /**
+     * 未知的问题
+     */
+    error: GeneralCallbackResult;
+
+    /**
+     * 数据损坏或丢失
+     */
+    badData: GeneralCallbackResult;
+}
+
+/**
+ * 教务处基础 API
+ * @template I API 输入数据
+ * @template O API 输出数据
+ * @template E API 中的事件
+ * @template U 用户自定义的输出数据
+ */
+abstract class EduBase<
+	I extends IAnyData = IAnyData, 
+	O extends IAnyData = IAnyData,
+	E extends Record<EventType, any> = {}
+> extends API<I, O, {
+	[P in (keyof ILoginEvent | keyof E)]: P extends keyof ILoginEvent ? ILoginEvent[P] : E[P]
+}> {
+
+	protected useEduCallback(
+		parseFunction: (data: any) => O
+	): void {
+
+		this.addFailedCallBack();
+
+        this.on("success", (data) => {
+
+            let isSuccess = true;
+            let errMsg = "";
+            let res: O | undefined;
+            const info: any = data.data;
+
+            // 数据缺失检测
+            if(!info) {
+                isSuccess = false;
+                errMsg = "Bad Data";
+                this.emit("badData", { errMsg });
+            }
+
+            if (isSuccess) switch (info.code) {
+                case (1):
+                    res = parseFunction(info.data);
+                    errMsg = info.err_msg ?? "Success";
+                    this.emit("ok", res!);
+                    break;
+
+                case (2):
+                    isSuccess = false;
+                    errMsg = info.err_msg ?? "Session Expire";
+                    this.emit("expire", { errMsg });
+                    break;
+
+                case (3):
+                    isSuccess = false;
+                    errMsg = info.err_msg ?? "Unauthorized";
+                    this.emit("unauthorized", { errMsg });
+                    break;
+
+                case (4):
+                    isSuccess = false;
+                    errMsg = info.err_msg ?? "Error";
+                    this.emit("error", { errMsg });
+                    break;
+            }
+
+            if (!isSuccess) this.emit("no", { errMsg });
+            this.emit("done", { errMsg, data: res });
+        });
+	}
+}
+
+export { EduBase };
+export default EduBase;

miniprogram/api/Login.ts

@@ -1,4 +1,5 @@
-import { API, HTTPMethod, IParamSetting, GeneralCallbackResult } from "../core/Api";
+import { HTTPMethod, IParamSetting } from "../core/Api";
+import { EduBase } from "./EduBase";
 
 interface ILoginInput {
 
@@ -42,35 +43,12 @@ interface ILoginOutput {
     eduSession: string;
 }
 
-interface ILoginEvent {
-
-    /**
-     * session 过期
-     */
-    expire: GeneralCallbackResult;
-
-    /**
-     * 登录失败
-     */
-    unauthorized: GeneralCallbackResult;
-
-    /**
-     * 未知的问题
-     */
-    error: GeneralCallbackResult;
-
-    /**
-     * 数据损坏或丢失
-     */
-    badData: GeneralCallbackResult;
-}
-
 /**
  * Login API
  * 此 API 用来向教务处发起登录请求
  * 请求成功后将获得教务处返回的 session
  */
-class Login extends API<ILoginInput, ILoginOutput, ILoginEvent> {
+class Login extends EduBase<ILoginInput, ILoginOutput> {
 
     public override url: string = "/login";
 
@@ -92,57 +70,13 @@ class Login extends API<ILoginInput, ILoginOutput, ILoginEvent> {
         super();
         this.initDebugLabel("Login");
 
-        this.addFailedCallBack();
+        this.useEduCallback((data) => ({
-
+            idCardLast6: data.idCard,
-        this.on("success", (data) => {
+            eduService: data.ip,
-
+            actualName: data.name,
-            let isSuccess = true;
+            isSubscribeWxAccount: data.official,
-            let errMsg = "";
+            eduSession: data.session
-            let res: ILoginOutput | undefined;
+        }));
-            const info: any = data.data;
-
-            // 数据缺失检测
-            if(!info) {
-                isSuccess = false;
-                errMsg = "Bad Data";
-                this.emit("badData", { errMsg });
-            }
-
-            if (isSuccess) switch (info.code) {
-                case (1):
-                    res = {
-                        idCardLast6: info.data.idCard,
-                        eduService: info.data.ip,
-                        actualName: info.data.name,
-                        isSubscribeWxAccount: info.data.official,
-                        eduSession: info.data.session
-                    };
-                    errMsg = info.err_msg ?? "Success";
-                    this.emit("ok", res);
-                    break;
-
-                case (2):
-                    isSuccess = false;
-                    errMsg = info.err_msg ?? "Session Expire";
-                    this.emit("expire", { errMsg });
-                    break;
-
-                case (3):
-                    isSuccess = false;
-                    errMsg = info.err_msg ?? "Unauthorized";
-                    this.emit("unauthorized", { errMsg });
-                    break;
-
-                case (4):
-                    isSuccess = false;
-                    errMsg = info.err_msg ?? "Error";
-                    this.emit("error", { errMsg });
-                    break;
-            }
-
-            if (!isSuccess) this.emit("no", { errMsg });
-            this.emit("done", { errMsg, data: res });
-        });
     }
 }
 

miniprogram/api/Schedule.ts

@@ -0,0 +1,110 @@
+import { HTTPMethod, IParamSetting } from "../core/Api";
+import { EduBase } from "./EduBase";
+
+interface IScheduleInput {
+
+    /**
+     * session
+     */
+    cookie: string;
+
+    /**
+     * 学期
+     */
+    semester: string;
+}
+
+interface IClassData {
+
+    /**
+     * 课程名字
+     */
+    name: string;
+
+    /**
+     * 上课地点
+     */
+    room?: string;
+
+    /**
+     * 课程老师
+     */
+    teacher?: string;
+
+    /**
+     * 周数
+     */
+    week: string;
+}
+
+type IScheduleOutput = {
+
+    /**
+     * 课程列表
+     */
+    classList: IClassData[];
+
+    /**
+     * 稀疏矩阵编号
+     */
+    index: number;
+}[];
+
+/**
+ * Schedule API
+ * 需要session与semester
+ * 此 API 用来向教务处发起获取课程表的请求
+ * 请求成功后将获得教务处返回的课程表JSON文件
+ */
+class Schedlue extends EduBase<IScheduleInput, IScheduleOutput> {
+ 
+    public override url = "/course_timetable";
+
+    public override method: HTTPMethod = HTTPMethod.GET;
+
+    public override params: IParamSetting<IScheduleInput> = {
+
+        cookie: {
+            mapKey: "cookie",
+            isHeader: true
+        },
+
+        semester: {
+            mapKey: "semester",
+        }
+    };
+
+    public constructor() {
+        super();
+        this.initDebugLabel("Schedule");
+        
+        this.useEduCallback((data) => {
+            const res: IScheduleOutput = [];
+
+            for( let i = 0; i < data.length; i++ ) {
+                const classList: IClassData[] = [];
+                const CTTDetails = data[i].CTTDetails ?? [];
+
+                for( let j = 0; j < CTTDetails.length; j++ ) {
+
+                    classList.push({
+                        name: CTTDetails[j].Name,
+                        room: CTTDetails[j].Room,
+                        teacher: CTTDetails[j].Teacher,
+                        week: CTTDetails[j].Week,
+                    })
+                }
+
+                res.push({
+                    classList,
+                    index: data[i].Id
+                })
+            }
+            return res;
+
+        });
+    }
+}
+
+export { Schedlue };
+export default Schedlue;

miniprogram/app.scss

@@ -14,7 +14,7 @@ $theme-color-dark-text: rgba(255, 255, 255, .5);
 
 $black-filter: brightness(0) opacity(.65);
 $white-filter: brightness(100) opacity(.65);
-$blue-filter: opacity(.65);
+$blue-filter: opacity(1);
 
 // 页面容器外边距
 view.container {
@@ -24,14 +24,23 @@ view.container {
 
 // 带阴影的 card
 view.card {
-    width: calc( 100% - 36px );
+    width: calc( 100% - 40px );
-    padding: 0 18px;
+    padding: 0 20px;
     border-radius: 15px;
     background-color: $theme-color-light-layout;
     box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .08), 
                 0 0.3px 0.9px 0 rgba(0, 0, 0, .05);
 }
 
+image.icon {
+    filter: $black-filter;
+}
+
+image.icon-sub {
+    filter: $black-filter;
+    opacity: .6;
+}
+
 // 顶部导航栏阴影
 view.top-shadow {
     position: fixed;
@@ -48,23 +57,27 @@ page {
 }
 
 view, text {
-    font-size: .99em;
+    font-size: .97em;
+    letter-spacing: .1em;
     font-family: Hiragino Sans GB, MicroSoft YaHei;
 }
 
 view.h1 {
     color: $theme-color-light-title;
     font-size: 1.5em;
+    letter-spacing: .1em;
 }
 
 view.h2 {
     color: $theme-color-light-title;
     font-size: 1.3em;
+    letter-spacing: .1em;
 }
 
 view.h3 {
     color: $theme-color-light-title;
     font-size: 1em;
+    letter-spacing: .1em;
 }
  
 @media (prefers-color-scheme: dark){
@@ -77,6 +90,14 @@ view.h3 {
         background-color: $theme-color-dark-layout;
     }
 
+    image.icon {
+        filter: $white-filter;
+    }
+
+    image.icon-sub {
+        filter: $white-filter;
+    }
+
     view.h1 {
         color: $theme-color-dark-title;
         font-size: 1.2em;

miniprogram/core/Api.ts

@@ -168,16 +168,17 @@ class API<
 > {
 
     /**
-     * 基础 URL
+     * 默认调试标签
-     * TODO: 这里可能涉及负载均衡
      */
-    public static get baseUrl():string {
-        return "https://jwc.nogg.cn";
-    }
-
     public static defaultLogLabel:LogLabel = new LogLabel(
         `API:API`, colorRadio(200, 120, 222)
     );
+    
+    /**
+     * 基础 URL
+     * TODO: 这里可能涉及负载均衡
+     */
+    public baseUrl: string = "https://jwc.nogg.cn";
 
     /**
      * Logger 使用的标签
@@ -319,7 +320,7 @@ class API<
 
         // 重置请求数据
         const requestData:IWxRequestOption<O> = this.requestData = {
-            url: API.baseUrl + this.url,
+            url: this.baseUrl + this.url,
             data: {}, header: {},
             timeout: this.timeout,
             method: this.method,
@@ -697,4 +698,4 @@ enum HTTPMethod {
 }
 
 export default API;
-export { API, IParamSetting, IAppAPIParam, ICallBack, HTTPMethod, RequestPolicy, GeneralCallbackResult }
+export { API, IParamSetting, IAppAPIParam, IAnyData, ICallBack, HTTPMethod, RequestPolicy, GeneralCallbackResult }

miniprogram/core/Module.ts

@@ -491,6 +491,27 @@ class Manager<WXC extends AnyWXContext = AnyWXContext> {
         })
     }
 
+    /**
+     * 异步页面加载
+     * 
+     * *注意*
+     * 页面模块加载后，必须手动执行 loadAllModule
+     * loadAllModule Modular 才会真正的被加载
+     * 模块加载后可以处理逻辑绑定
+     */
+    public static async PageAsync(): Promise<{
+        manager: Manager<AnyWXContext>, 
+        query: Record<string, string | undefined>
+    }> {
+        return new Promise((solve) => {
+            Page({
+                async onLoad(query) {
+                    let manager = new Manager(this);
+                    await solve({ manager, query });
+                }
+            })
+        });
+    }
 }
 
 export { Manager, Modular, AnyWXContext, WXContext, ILifetime}

miniprogram/image/account/Account_Arrow.svg

@@ -0,0 +1,62 @@
+<?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:#3EA3D8;}
+	.st3{fill:#CCCCCC;}
+	.st4{fill:none;stroke:#CCCCCC;stroke-linecap:square;stroke-miterlimit:10;}
+	.st5{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;}
+	.st6{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;stroke-dasharray:1.9084,1.9084;}
+	.st7{fill:#1A1A1A;}
+	.st8{fill:none;stroke:#1A1A1A;stroke-width:3;stroke-miterlimit:10;}
+	.st9{fill:none;stroke:#1A1A1A;stroke-miterlimit:10;}
+	.st10{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
+	.st11{fill:#666666;}
+	.st12{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st13{fill:#B3B3B3;}
+	.st14{opacity:0.05;}
+	.st15{clip-path:url(#SVGID_00000148643560888163687730000014354677953684036249_);}
+	.st16{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
+	.st17{opacity:0.4;fill:#3EA3D8;}
+	.st18{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}
+	.st19{fill:none;stroke:#3EA3D8;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<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="st14">
+		</g>
+	</g>
+</g>
+<g id="ICON">
+	<polyline class="st19" points="17.39,10.88 83.65,50 17.39,89.12 	"/>
+</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_NO.svg

@@ -0,0 +1,65 @@
+<?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:#3EA3D8;}
+	.st3{fill:#CCCCCC;}
+	.st4{fill:none;stroke:#CCCCCC;stroke-linecap:square;stroke-miterlimit:10;}
+	.st5{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;}
+	.st6{fill:none;stroke:#CCCCCC;stroke-miterlimit:10;stroke-dasharray:1.9084,1.9084;}
+	.st7{fill:#1A1A1A;}
+	.st8{fill:none;stroke:#1A1A1A;stroke-width:3;stroke-miterlimit:10;}
+	.st9{fill:none;stroke:#1A1A1A;stroke-miterlimit:10;}
+	.st10{fill:none;stroke:#E6E6E6;stroke-miterlimit:10;}
+	.st11{fill:#666666;}
+	.st12{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st13{fill:#B3B3B3;}
+	.st14{opacity:0.05;}
+	.st15{clip-path:url(#SVGID_00000174590641328129768410000008888487617591348397_);}
+	.st16{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
+	.st17{opacity:0.4;fill:#3EA3D8;}
+	.st18{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}
+	.st19{fill:none;stroke:#3EA3D8;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<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="st14">
+		</g>
+	</g>
+</g>
+<g id="ICON">
+	<g>
+		<line class="st19" x1="10.88" y1="10.88" x2="89.12" y2="89.12"/>
+		<line class="st19" x1="89.12" y1="10.88" x2="10.88" y2="89.12"/>
+	</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_OK.svg

@@ -18,7 +18,7 @@
 	.st12{fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
 	.st13{fill:#B3B3B3;}
 	.st14{opacity:0.05;}
-	.st15{clip-path:url(#SVGID_00000119811792014936471320000011453116645578675119_);}
+	.st15{clip-path:url(#SVGID_00000000193655916124849200000001531564748471850152_);}
 	.st16{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
 	.st17{opacity:0.4;fill:#3EA3D8;}
 	.st18{fill:none;stroke:#3EA3D8;stroke-miterlimit:10;}

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,66 @@
+import { Modular, Manager } from "../../core/Module";
+
+class Mask<M extends Manager> extends Modular<M> {
+
+    /**
+     * 动画运行时间
+     */
+    public static readonly animateTime: number = 100;
+
+	public data? = {
+
+		/**
+		 * 蒙版的层级
+		 */
+		zIndex: 1,
+
+        /**
+         * 蒙版是否显示
+         */
+        isDisplay: false,
+
+		/**
+		 * 蒙版是否显示
+		 */
+		isShow: false
+	};
+
+	private disappearTimer?: number;
+	
+	/**
+	 * 显示蒙版
+	 */
+	public showMask() {
+		this.setData({ 
+            isShow: true,
+            isDisplay: true
+        });
+	}
+
+	/**
+	 * 隐藏蒙版
+	 */
+	public hideMask() {
+		this.setData({ 
+            isShow: false 
+        });
+
+        this.disappearTimer = setTimeout(() => {
+            this.setData({ 
+                isDisplay: false
+            });
+        }, Mask.animateTime);
+	}
+	
+	public override onLoad() {
+		this.setFunc(this.handleClickMask, "handleClickMask");
+        // Do something
+    }
+
+	private handleClickMask() {
+		this.hideMask();
+	}
+}
+
+export { Mask };
+export default Mask;

miniprogram/pages/Account/Account.scss

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

miniprogram/pages/Account/Account.ts

@@ -2,9 +2,25 @@ import { Manager } from "../../core/Module";
 import { UserCard } from "./UserCard";
 import { MainFunction } from "./MainFunction";
 import { FunctionList } from "./FunctionList";
+import { Mask } from "../../modular/Mask/Mask";
 
-Manager.Page((manager) => {
+(async () => {
-    manager.addModule(UserCard, "userCard");
+
+    // 初始化页面
+    const { manager, query } = await Manager.PageAsync();
+
+    // 添加蒙版 Modular
+    const mask = manager.addModule(Mask, "mask");
+
+    // 添加 UserCard Modular
+    manager.addModule(UserCard, "userCard", { mask });
+
+    // 添加 MainFunction Modular
     manager.addModule(MainFunction, "mainFunction");
+
+    // 添加 FunctionList Modular
     manager.addModule(FunctionList, "functionList");
-});
+
+    // 初始化全部 Modular
+    await manager.loadAllModule(query);
+})();

miniprogram/pages/Account/Account.wxml

@@ -1,3 +1,6 @@
+<!-- 蒙版 -->
+<view class="mask {{  mask$isShow ? 'show' : 'hide' }} {{ mask$isDisplay ? 'block' : 'none' }}" 
+    bindtap="mask$handleClickMask"></view>
 
 <!-- 顶部的阴影 -->
 <view class="top-shadow"></view>
@@ -11,12 +14,60 @@
             <open-data type="userAvatarUrl" />
         </view>
         <view class="info">
+
+            <!-- 主题变换按钮 -->
+            <view class="theme">
+                <view bindtap="userCard$changeTheme">
+                    <image class="icon-sub" src="../../image/account/Account_Theme.svg" />
+                </view>
+            </view>
+            
+            <!-- 用户昵称 -->
             <view class="nick h1">
                 <open-data type="userNickName" />
             </view>
-            <view class="student">秦浩轩</view>
+
-            <view class="student">1806240113</view>
+            <!-- 学生信息 -->
+            <view class="student">
+                <view class="name">秦浩轩</view>
+                <view class="certified">
+                    <view class="certifi-info">已认证</view>
+                    <image class="text-icon" src="../../image/account/Account_OK.svg"></image>
+                </view>
+            </view>
+
+            <!-- 学号信息 -->
+            <view class="student-id">1806240113</view>
+
+            <!-- 学校 -->
+            <view class="school">大连工业大学</view>
         </view>
     </view>
 
+    <!--主要功能-->
+    <view class="card main-function">
+        
+        <!--每个功能的容器-->
+        <view class="branch-funtion" wx:for="{{ mainFunction$mainFunctionList }}" wx:key="index">
+            <view style="{{ index == (mainFunction$mainFunctionList - 1) ? 'border-bottom: 0px' : '' }}">
+                <!--每个功能的图片-->
+                <image class="icon" src="../../image/account/Account_{{ item.iconUrl }}.svg"></image>
+                <!--每个功能的文字-->
+                <view>{{ item.displayName }}</view>
+            </view>
+        </view>
+    </view>
+
+    <!-- 功能列表 -->
+    <view class="card function-list">
+
+        <!-- 每一行 -->
+        <view class="function" wx:for="{{ functionList$functionList }}" wx:key="index">
+            <view style="{{ index == (functionList$functionList.length - 1) ? 'border-bottom: 0px' : '' }}">
+                <image class="icon func-icon" src="../../image/account/Account_{{ item.iconUrl }}.svg" />
+                <view>{{ item.displayName }}</view>
+                <image class="icon-sub arrow" src="../../image/account/Account_Arrow.svg" />
+            </view>
+        </view>
+    </view>
 </view>

miniprogram/pages/Account/FunctionList.scss

@@ -1 +1,43 @@
-@import "../../app.scss";
+@import "../../app.scss";
+
+view.function-list {
+    margin-top: 50rpx;
+    margin-bottom: 50rpx;
+    padding: 0 0 !important;
+    width: 100% !important;
+
+    view.function {
+        padding: 0 20px;
+        width: calc( 100% - 40px );
+        height: 55px;
+        
+        > view {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
+
+            image.func-icon {
+                width: 26px;
+                height: 26px;
+            }
+
+            view {
+                margin-left: 15px;
+                flex-grow: 1;
+                font-size: .9em;
+            }
+
+            image.arrow {
+                width: 10px;
+                height: 10px;
+            }
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    view.function-list view.function > view {
+      border-bottom: 1px solid rgba($color: #ffffff, $alpha: .1);
+    }
+  }

miniprogram/pages/Account/FunctionList.ts

@@ -1,6 +1,31 @@
 import { Modular, Manager } from "../../core/Module";
 
+interface IFunctionListItem {
+
+    /**
+     * 显示名称
+     */
+    displayName: string;
+
+    /**
+     * 图标路径
+     */
+    iconUrl: string;
+}
+
 class FunctionList<M extends Manager> extends Modular<M> {
+
+    public static readonly functionList: IFunctionListItem[] = [
+        { displayName: "赞助计划", iconUrl: "Sponsor" },
+        { displayName: "公众号", iconUrl: "PubilcAccount" },
+        { displayName: "自助问答", iconUrl: "FAQ" },
+        { displayName: "关于我们", iconUrl: "AboutUs" },
+        { displayName: "联系客服", iconUrl: "Support" }
+    ];
+
+    public data = {
+        functionList: FunctionList.functionList
+    };
     
     public override onLoad() {
         // Do something

miniprogram/pages/Account/MainFunction.scss

@@ -1 +1,39 @@
-@import "../../app.scss";
+@import "../../app.scss";
+
+//主要功能
+view.main-function {
+  display: flex;
+  margin-top: 50rpx;
+  padding: 0 !important;
+  width: 100% !important;
+
+  view.branch-funtion {
+    padding: 13px 0;
+    width: 100%;
+
+    > view {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-self: center;
+      border-right: 1px solid rgba($color: #000000, $alpha: .1);
+
+      image {
+        height: 35px;
+        width: 35px;
+      }
+
+      view {
+        text-align: center;
+        margin-top: 5px;
+        font-size: .9em;
+      }
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  view.main-function view.branch-funtion > view {
+    border-right: 1px solid rgba($color: #ffffff, $alpha: .1);
+  }
+}

miniprogram/pages/Account/MainFunction.ts

@@ -1,6 +1,30 @@
 import { Modular, Manager } from "../../core/Module";
 
+interface IMainFunctionItem {
+
+    /**
+     * 显示名称
+     */
+    displayName: string;
+
+    /**
+     * 图标路径
+     */
+    iconUrl: string;
+}
+
 class MainFunction<M extends Manager> extends Modular<M> {
+
+    public static readonly MainFunctionList: IMainFunctionItem[] = [
+        { displayName: "账号信息", iconUrl: "UserInfo" },
+        { displayName: "课表缓存", iconUrl: "DateList" },
+        { displayName: "功能定制", iconUrl: "Customer" },
+        { displayName: "更多设置", iconUrl: "Settings" }
+    ];
+
+    public data? = {
+        mainFunctionList: MainFunction.MainFunctionList
+    }
     
     public override onLoad() {
         // Do something

miniprogram/pages/Account/UserCard.scss

@@ -2,29 +2,85 @@
 
 // 用户卡片
 view.user-card {
-    margin-top: 20px;
-    height: 100px;
     display: flex;
+    align-items: center;
     padding-top: 20px;
     padding-bottom: 20px;
 
     view.avatar {
+        flex-basis: 80px;
         width: 80px;
         height: 80px;
         border-radius: 1000px;
+        flex-shrink: 0;
         overflow: hidden;
     }
     
     view.info {
-        width: calc(100% - 80px - 20px);
+        flex-grow: 1;
         padding-left: 20px;
+        max-width: calc(100% - 80px - 20px);
+
+        view.theme {
+            width: 100%;
+            padding: 20px 0 10px 0;
+            display: flex;
+            justify-content: flex-end;
+
+            view {
+                width: 23px;
+                height: 23px;
+                padding: 20px;
+                margin: -20px;
+                border-radius: 20px;
+                
+                image {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
         
         view.nick {
-            margin: 4px 0;
+            margin-bottom: 6px;
+            word-break: keep-all;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
+        // 学生信息
         view.student {
-            margin: 1px 0;
+            display: flex;
+            align-items: 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: flex;
+                justify-content: center;
+                align-items: center;
+
+                image.text-icon {
+                    margin-left: .25em;
+                    width: 10px;
+                    height: 10px;
+                }
+            }
+        }
+
+        view.student-id {
+            margin-bottom: 3px;
+        }
+
+        view.school {
+            text-align: right;
+            padding: 10px 0 20px 0;
         }
     }
 }

miniprogram/pages/Account/UserCard.ts

@@ -1,9 +1,21 @@
 import { Modular, Manager } from "../../core/Module";
+import { Mask } from "../../modular/Mask/Mask";
+
+type IUserCardDependent<M extends Manager> = {
+    mask: Mask<M>
+}
+
+class UserCard<M extends Manager> extends Modular<M, IUserCardDependent<M>> {
 
-class UserCard<M extends Manager> extends Modular<M> {
-    
     public override onLoad() {
-        // Do something
+        this.setFunc(this.handleChangeTheme, "changeTheme")
+    }
+    
+    /**
+     * 处理主题更换
+     */
+    private handleChangeTheme() {
+        this.depends?.mask.showMask();
     }
 }
 

miniprogram/pages/Timetable/TestCore.ts

@@ -1,5 +1,6 @@
 import { Modular, Manager, ILifetime } from "../../core/Module";
 import { Login } from "../../api/Login";
+import { Schedlue } from "../../api/Schedule"
 import { Storage } from "../../core/Storage";
 
 /**
@@ -28,12 +29,14 @@ implements Partial<ILifetime> {
             s.set("be", 12);
         }, 1000)
         
-        new Login().param({studentId: "1806240113", password: "qazxsw123"})
+        // new Login().param({studentId: "2017060129", password: ""})
-        .request().wait({
+        // .request().wait({
-            ok: (w) => {console.log("ok", w)},
+        //     ok: (w) => {console.log("ok", w)},
-            no: (w) => {console.log("no", w)},
+        //     no: (w) => {console.log("no", w)},
-            done: (w) => {console.log("done", w)}
+        //     done: (w) => {console.log("done", w)}
-        });
+        // });
+        // new Schedlue().param({cookie:"C729D1AB1B17077485ACCD9279135C22",semester:"2020-2021-2"})
+        // .request()
     }
 }
 

miniprogram/pages/Timetable/Timetable.ts

@@ -6,7 +6,17 @@ import { TestCore } from "./TestCore";
  * 此页面使用 Manager 进行模块化管理
  * 若要添加先功能请先定义 Modular 并添加至 Manager
  */
-Manager.Page((manager)=>{
+(async () => {
+
+    // 初始化页面
+    const { manager, query } = await Manager.PageAsync();
+
+    // 添加 StatusBar Modular
     manager.addModule(StatusBar, "statusBar");
+    
+    // 添加 TestCore Modular
     manager.addModule(TestCore, "testCore");
-})
+
+    // 初始化全部 Modular
+    await manager.loadAllModule(query);
+})()

project.config.json

@@ -1,58 +1,58 @@
 {
-    "description": "项目配置文件",
+  "description": "项目配置文件",
-    "packOptions": {
+  "packOptions": {
-        "ignore": []
+    "ignore": []
+  },
+  "miniprogramRoot": "miniprogram/",
+  "compileType": "miniprogram",
+  "libVersion": "2.16.1",
+  "projectname": "mini-dlpu-v3",
+  "setting": {
+    "urlCheck": false,
+    "es6": true,
+    "enhance": true,
+    "postcss": true,
+    "preloadBackgroundData": false,
+    "minified": true,
+    "newFeature": false,
+    "coverView": true,
+    "nodeModules": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "scopeDataCheck": false,
+    "uglifyFileName": true,
+    "checkInvalidKey": true,
+    "checkSiteMap": true,
+    "uploadWithSourceMap": true,
+    "compileHotReLoad": false,
+    "lazyloadPlaceholderEnable": false,
+    "useMultiFrameRuntime": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
     },
-    "miniprogramRoot": "miniprogram/",
+    "enableEngineNative": false,
-    "compileType": "miniprogram",
+    "useIsolateContext": false,
-    "libVersion": "2.16.1",
+    "userConfirmedBundleSwitch": false,
-    "projectname": "mini-dlpu-v3",
+    "packNpmManually": false,
-    "setting": {
+    "packNpmRelationList": [],
-        "urlCheck": false,
+    "minifyWXSS": true,
-        "es6": true,
+    "disableUseStrict": false,
-        "enhance": true,
+    "minifyWXML": true,
-        "postcss": true,
+    "showES6CompileOption": false,
-        "preloadBackgroundData": false,
+    "useCompilerPlugins": [
-        "minified": true,
+      "typescript",
-        "newFeature": false,
+      "sass"
-        "coverView": true,
+    ]
-        "nodeModules": false,
+  },
-        "autoAudits": false,
+  "simulatorType": "wechat",
-        "showShadowRootInWxmlPanel": true,
+  "simulatorPluginLibVersion": {},
-        "scopeDataCheck": false,
+  "appid": "wx7d809f5e8955843d",
-        "uglifyFileName": true,
+  "scripts": {
-        "checkInvalidKey": true,
+    "beforeCompile": ""
-        "checkSiteMap": true,
+  },
-        "uploadWithSourceMap": true,
+  "condition": {}
-        "compileHotReLoad": false,
-        "lazyloadPlaceholderEnable": false,
-        "useMultiFrameRuntime": false,
-        "useApiHook": false,
-        "useApiHostProcess": false,
-        "babelSetting": {
-            "ignore": [],
-            "disablePlugins": [],
-            "outputPath": ""
-        },
-        "enableEngineNative": false,
-        "useIsolateContext": false,
-        "userConfirmedBundleSwitch": false,
-        "packNpmManually": false,
-        "packNpmRelationList": [],
-        "minifyWXSS": true,
-        "disableUseStrict": false,
-        "minifyWXML": true,
-        "showES6CompileOption": false,
-        "useCompilerPlugins": [
-            "typescript",
-            "sass"
-        ]
-    },
-    "simulatorType": "wechat",
-    "simulatorPluginLibVersion": {},
-    "appid": "wx7d809f5e8955843d",
-    "scripts": {
-        "beforeCompile": ""
-    },
-    "condition": {}
 }