(#37) Add mask modular

miniprogram/pages/Account/Account.scss

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

miniprogram/pages/Account/Account.ts

@@ -2,9 +2,11 @@ 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) => {
-    manager.addModule(UserCard, "userCard");
+    const mask = manager.addModule(Mask, "mask");
+    manager.addModule(UserCard, "userCard", { mask });
     manager.addModule(MainFunction, "mainFunction");
     manager.addModule(FunctionList, "functionList");
 });

miniprogram/pages/Account/Account.wxml

@@ -1,3 +1,5 @@
+<!-- 蒙版 -->
+<view class="mask" bindtap="mask$handleClickMask" style="display:{{mask$isShow ? 'block' : 'none'}}"></view>
 
 <!-- 顶部的阴影 -->
 <view class="top-shadow"></view>
@@ -14,7 +16,9 @@
 
             <!-- 主题变换按钮 -->
             <view class="theme">
-                <image class="icon-sub" src="../../image/account/Account_Theme.svg" />
+                <view bindtap="userCard$changeTheme">
+                    <image class="icon-sub" src="../../image/account/Account_Theme.svg" />
+                </view>
             </view>
             
             <!-- 用户昵称 -->

miniprogram/pages/Account/UserCard.scss

@@ -27,9 +27,17 @@ view.user-card {
             display: flex;
             justify-content: flex-end;
 
-            image {
+            view {
                 width: 23px;
                 height: 23px;
+                padding: 20px;
+                margin: -20px;
+                border-radius: 20px;
+                
+                image {
+                    width: 100%;
+                    height: 100%;
+                }
             }
         }
         

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();
     }
 }