Add StatusBar Modular Fix some BUG Add LoggerText feature

miniprogram/app.ts

@@ -1,6 +1,5 @@
-import { Logger } from "./logger/Logger";
-import { LevelLogLabel } from "./logger/LevelLogLabel";
-import { LifeCycleLogLabel } from "./logger/LifeCycleLogLabel";
+import { Logger } from "./core/Logger";
+import { LevelLogLabel, LifeCycleLogLabel } from "./core/PresetLogLabel";
 
 
 App<IAppOption>({

miniprogram/core/Config.ts

@@ -10,6 +10,13 @@
  */
 export const LOGGER_CONSOLE:boolean = true;
 
+/**
+ * 是否在控制台输出时启用标签样式
+ * 如果在手机上调试可以关闭此选项
+ * 因为手机上的控制台无法正确显示样式
+ */
+export const LOGGER_STYLE:boolean = true;
+
 /**
  * 调试过滤器
  * 按照 LogLabel 进行过滤

miniprogram/core/Logger.ts

@@ -1,4 +1,4 @@
-import { LOGGER_FILTER, LOGGER_CONSOLE } from "./Config";
+import { LOGGER_FILTER, LOGGER_CONSOLE, LOGGER_STYLE } from "./Config";
 import { StackLogLabel } from "./PresetLogLabel";
 import { LogLabel } from "./LogLabel";
 
@@ -82,30 +82,41 @@ class Logger {
      */
     public static calcStyle(...labels:LogLabel[]):[string[], string[]] {
 
-        // 过滤出需要显示的 Labels
-        let labelsNeedRender:LogLabel[] = labels.filter((label:LogLabel)=>{
-            return label.display
-        });
-
         let consoleLabels:string[] = [];
         let consoleStyles:string[] = [];
 
         // 放置标签
-        for(let i = 0; i < labelsNeedRender.length; i++) {
+        for(let i = 0; i < labels.length; i++) {
             consoleLabels.push(labels[i].getLoggerOutput());
 
-            if (i !== ( labelsNeedRender.length - 1))
+            if (i !== ( labels.length - 1))
             consoleLabels.push("%c ");
 
-            consoleStyles.push(labelsNeedRender[i].getStyleOutput());
+            consoleStyles.push(labels[i].getStyleOutput());
 
-            if (i !== ( labelsNeedRender.length - 1))
+            if (i !== ( labels.length - 1))
             consoleStyles.push("");
         }
 
         return [consoleLabels, consoleStyles];
     }
 
+    /**
+     * 收集计算标签没有样式
+     * @param labels 标签
+     */
+    public static calcLabel(...labels:LogLabel[]):string[] {
+
+        let consoleLabels:string[] = [];
+
+        // 放置标签
+        for(let i = 0; i < labels.length; i++) {
+            consoleLabels.push(labels[i].getTextOutput());
+        }
+
+        return consoleLabels
+    }
+
     /**
      * 基础调试输出
      * 其他的 Log 函数都是基于此封装
@@ -122,12 +133,31 @@ class Logger {
         if(!Logger.testLog(...labels, ...attachLabel, StackLogLabel.filterUrlLabel)) 
         return content.getContent();
 
+        // 过滤出需要渲染的 Labels
+        let labelsNeedRender:LogLabel[] = [...labels, ...attachLabel].filter((label:LogLabel)=>{
+            return true
+        });
+
+        // 使用样式输出
+        if(LOGGER_STYLE) {
+
             // 计算收集样式
-        let [consoleLabels, consoleStyles]= Logger.calcStyle(...labels, ...attachLabel);
+            let [consoleLabels, consoleStyles]= Logger.calcStyle(...labelsNeedRender);
 
             // 调试输出
             console.log(consoleLabels.join(""), ...consoleStyles, ...content.getContent());
         
+        } else {
+
+            // 计算收集标签
+            let consoleLabels= Logger.calcLabel(...labelsNeedRender);
+
+            // 输出
+            console.log(consoleLabels.join(" "), ...content.getContent());
+        }
+
+        
+
         return content.getContent();
     }
 

miniprogram/core/Module.ts

@@ -400,7 +400,7 @@ class Manager<WXC extends AnyWXContext = AnyWXContext> {
                 if(this.modules[i].data !== void 0) {
                     this.context.data[`${ this.modules[i].nameSpace }$${ key }`] = 
                     ( this.modules[i].data as IAnyTypeObject )[key];
-                    // this.modules[i]
+                    this.modules[i].paramList.add(key);
                 }
             }
         }
@@ -425,7 +425,7 @@ class Manager<WXC extends AnyWXContext = AnyWXContext> {
                 func.push(`[${ key }]`);
             }
 
-            let log:string = `模块 [${ this.modules[i].nameSpace }] 加载完成...\n`;
+            let log:string = `模块 [${ this.modules[i].nameSpace }] 完成绑定...\n`;
             if(data.length > 0) log += `Using Props: ${ data.join(", ") }\n`;
             if(func.length > 0) log += `Using Function: ${ func.join(", ") }\n`;
             

miniprogram/core/PresetLogLabel.ts

@@ -99,7 +99,7 @@ class StackInfo {
     /**
      * 排除的
      */
-    public static readonly excludeFile:RegExp = /^.*(\\|\/)logger(\\|\/).+\.js:\d+:\d+/;
+    public static readonly excludeFile:RegExp = /^.*(\\|\/)core(\\|\/)(.*Log.*).js:\d+:\d+/;
 
     /**
      * 获取第一个调用栈
@@ -179,7 +179,7 @@ class StackLogLabel {
 /**
  * 生成圆角颜色标签样式
  */
- const normalLevelStyleGen = (color:string):LogStyle => {
+const normalLevelStyleGen = (color:string):LogStyle => {
     return new LogStyle().setBorder("4px", `1px solid ${color}`)
     .setColor(color).setBlank("0 5px");
 }
@@ -235,7 +235,7 @@ class LevelLogLabel {
 /**
  * 生成圆角颜色标签样式
  */
- const normalLifeStyleGen = (r:number, g:number, b:number):LogStyle => {
+const normalLifeStyleGen = (r:number, g:number, b:number):LogStyle => {
     return new LogStyle().setBorder("4px", `1px solid rgb(${ r }, ${ g }, ${ b })`)
     .setColor(`rgb(${ r }, ${ g }, ${ b })`, `rgba(${ r }, ${ g }, ${ b }, .1)`)
     .setBlank("0 5px");
@@ -310,4 +310,4 @@ class LifeCycleLogLabel {
     );
 }
 
-export { StackInfo, StackLogLabel, LevelLogLabel, LifeCycleLogLabel };
+export { StackInfo, StackLogLabel, LevelLogLabel, LifeCycleLogLabel, normalLifeStyleGen as colorRadio };

miniprogram/pages/Timetable/StatusBar.ts

@@ -0,0 +1,78 @@
+import { Modular, Manager, ILifetime } from "../../core/Module";
+import { LevelLogLabel, LifeCycleLogLabel, colorRadio } from "../../core/PresetLogLabel";
+import { LogLabel } from "../../core/LogLabel";
+import { Logger } from "../../core/Logger";
+
+/**
+ * 顶部状态栏
+ */
+class StatusBar<M extends Manager> extends Modular<M, {}> 
+implements Partial<ILifetime> {
+
+    /**
+     * 页面日志输出标签
+     */
+    public static readonly StatusBarLabel = new LogLabel(
+        "StatusBar", colorRadio(255, 230, 222)
+    );
+
+    data = {
+
+        // 状态栏高度
+        barHeight: 65,
+    }
+
+    /**
+     * 设置顶部状态栏高度
+     */
+    public setHeight() {
+        
+        let systemInfo = wx.getSystemInfoSync();
+        let headerPos = wx.getMenuButtonBoundingClientRect();
+
+        //状态栏高度
+        let statusBarHeight = Number(systemInfo.statusBarHeight);
+        
+        // 胶囊实际位置，坐标信息不是左上角原点
+        let btnPosI = {
+
+            // 胶囊实际高度
+            height: headerPos.height,
+            width: headerPos.width,
+            
+            // 胶囊top - 状态栏高度
+            top: headerPos.top - statusBarHeight, 
+
+            // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度）
+            bottom: headerPos.bottom - headerPos.height - statusBarHeight, 
+
+            // 这里不能获取 屏幕宽度，PC端打开小程序会有BUG，要获取窗口高度 - 胶囊right
+            right: systemInfo.windowWidth - headerPos.right 
+        }
+
+        // 计算顶部导航栏高度
+        let barHeight =  btnPosI.height + btnPosI.top + statusBarHeight + btnPosI.bottom
+
+        this.setData({
+
+            // 不知道为什么总是差 4px 距离
+            // 别问为什么 加上就对了
+            barHeight: barHeight + 4
+        });
+
+        Logger.log(`计算并设置 StatusBar 的高度为: ${ barHeight + 4 }px`, 
+        LevelLogLabel.DebugLabel, StatusBar.StatusBarLabel);
+
+    }
+
+    public onLoad() {
+        Logger.log("StatusBar模块加载...", 
+        LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel, StatusBar.StatusBarLabel);
+
+        this.setHeight();
+    }
+
+}
+
+export default StatusBar;
+export { StatusBar };

miniprogram/pages/Timetable/Timetable.scss

@@ -1,3 +1,9 @@
-// view.status-bar {
-//     // background-color: antiquewhite;
-// }
+view.status-bar {
+    background-color: #F8F8F8;
+}
+
+@media (prefers-color-scheme: dark){
+    view.status-bar {
+      background-color: #191919;
+    }
+}

miniprogram/pages/Timetable/Timetable.ts

@@ -1,85 +1,10 @@
-import { Logger } from "../../core/Logger";
-import { LevelLogLabel, LifeCycleLogLabel } from "../../core/PresetLogLabel";
-import { Manager, Modular, AnyWXContext, ILifetime } from "../../core/Module";
-
-let manager;
-
-// Page({
-
-//     /**
-//      * 课程表页面加载
-//      */
-//     onLoad: async function (query) {
-
-//         manager = new Manager(this);
-//         console.log(manager);
-
-
-//         // this.setData;
-
-//         // Logger.log("课程表 (Timetable) 页面加载...", 
-//         // LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel);
-
-//         // let systemInfo = wx.getSystemInfoSync();
- 
-//         // //状态栏高度
-//         // let statusBarHeight = Number(systemInfo.statusBarHeight);
-        
-//         // let menu = wx.getMenuButtonBoundingClientRect()
-        
-//         // //导航栏高度
-//         // let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2
-        
-//         // //状态栏加导航栏高度
-//         // let navStatusBarHeight = statusBarHeight + menu.height + (menu.top - statusBarHeight) * 2
-        
-//         // console.log('状态栏高度',statusBarHeight)
-        
-//         // console.log('导航栏高度',navBarHeight)
-        
-//         // console.log('状态栏加导航栏高度',navStatusBarHeight)
-
-//         // this.setData({barh: navStatusBarHeight});
-
-//     }
-  
-// })
-
+import { Manager} from "../../core/Module";
+import { StatusBar } from "./StatusBar";
 
+/**
+ * 此页面使用 Manager 进行模块化管理
+ * 若要添加先功能请先定义 Modular 并添加至 Manager
+ */
 Manager.Page((manager)=>{
-    let m1 = manager.addModule(M1, "m1");
-    let m2 = manager.addModule(M2, "m2", {m1});
+    manager.addModule(StatusBar, "statusBar");
 })
-
-
-class M1<M extends Manager> extends Modular<M, {}> implements Partial<ILifetime> {
-
-    data = {
-        a:1,
-        b:{}
-    }
-
-    public onLoad(){
-
-    }
-
-    public onReady() {
-        console.log(this);
-        this.emit("lll", {a:1})
-    }
-}
-
-class M2<M extends Manager> extends Modular<M, {m1:M1<M>}> {
-
-    data = {
-        a: 1
-    }
-
-    public onLoad() {
-        this.setData({a:1});
-        this.depends?.m1.on("lll", (e)=>{
-            console.log(e)
-        })
-        console.log(this);
-    }
-}

miniprogram/pages/Timetable/Timetable.wxml

@@ -1,3 +1,5 @@
-<view class="status-bar" style="height:{{barh}}px"></view>
 
-<text>pages/Timetable/Timetable.wxml{{m1$a}}</text>
+<!-- 顶部状态栏 -->
+<view class="status-bar" style="height: {{ statusBar$barHeight }}px"></view>
+
+<text>afdff</text>

miniprogram/theme.json

@@ -1,6 +1,6 @@
 {
   "light": {
-    "navigationBarBackgroundColor": "#f6f6f6",
+    "navigationBarBackgroundColor": "#f8f8f8",
     "navigationBarTextStyle": "black",
     "backgroundColor": "#f4f0f1",