Add StatusBar GUI Style

miniprogram/pages/Timetable/StatusBar.scss

@@ -0,0 +1,105 @@
+@import "../../app.scss";
+$status-bar-left-top-icon-width: 30px;
+
+view.status-bar {
+    top: 0;
+    width: 100%;
+    display: flex;
+    position: fixed;
+    justify-content: space-between;
+    background-color: #F8F8F8;
+
+    view.select {
+        flex: 1;
+        display: flex;
+        height: 100%;
+        align-items: center;
+        padding-left: 18px;
+
+        image {
+            width: $status-bar-left-top-icon-width;
+            height: $status-bar-left-top-icon-width;
+            filter: $black-filter;
+        }
+
+        view.semester {
+            height: 100%;
+            display: flex;
+            padding-left: 5px;
+            flex-direction: column;
+            justify-content: center;
+
+            view.semester-title {
+                @extend %status-bar-title;
+            }
+
+            view.semester-intro {
+                @extend %status-bar-subtitle;
+            }
+        }
+    }
+
+    view.capsule-holder {
+        flex: 1;
+        height: 100%;
+    }
+
+    view.content {
+        flex: 1;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+
+        view.week {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            text-align: center;
+            height: 100%;
+
+            view.week-title {
+                @extend %status-bar-title;
+            }
+
+            view.week-intro {
+                @extend %status-bar-subtitle;
+            }
+        }
+    }
+}
+
+view.status-bar-blank {
+    width: 100%;
+}
+
+%status-bar-title {
+    font-size: 1.15em;
+    line-height: 1.15em;
+    margin-bottom: 5px;
+    color: $theme-color-light-title;
+}
+
+%status-bar-subtitle {
+    font-size: .85em;
+    line-height: .85em;
+    color: $theme-color-light-text;
+}
+
+@media (prefers-color-scheme: dark){
+
+    %status-bar-title {
+        color: $theme-color-dark-title;
+    }
+    
+    %status-bar-subtitle {
+        color: $theme-color-dark-text;
+    }
+
+    view.status-bar {
+        background-color: #191919;
+      
+        view.select image {
+            filter: $white-filter;
+        }
+    }
+}

miniprogram/pages/Timetable/StatusBar.ts

@@ -3,12 +3,40 @@ import { LevelLogLabel, LifeCycleLogLabel, colorRadio } from "../../core/PresetL
 import { LogLabel } from "../../core/LogLabel";
 import { Logger } from "../../core/Logger";
 
+/**
+ * 在 UI 中显示的数据
+ */
+type DisplayData = {
+
+    /**
+     * 显示内容
+     */
+    val:string;
+
+    /**
+     * 唯一键值 用来做判断
+     */
+    key:string;
+};
+
+/**
+ * 模组事件
+ */
+type StatusBarEvent = {
+    m: DisplayData
+};
+
 /**
  * 顶部状态栏
  */
-class StatusBar<M extends Manager> extends Modular<M, {}> 
+class StatusBar<M extends Manager> extends Modular<M, {}, StatusBarEvent> 
 implements Partial<ILifetime> {
 
+    /**
+     * 导航栏高度补偿
+     */
+    public static readonly StatusBarHeightExtend:number = 5;
+
     /**
      * 页面日志输出标签
      */
@@ -18,9 +46,15 @@ implements Partial<ILifetime> {
 
     data = {
 
-        // 状态栏高度
+        // 导航栏高度
         barHeight: 65,
-    }
+        
+        // 状态栏高度
+        barTop: 20,
+
+        // 胶囊占位
+        capsule: 94
+    };
 
     /**
      * 设置顶部状态栏高度
@@ -51,22 +85,29 @@ implements Partial<ILifetime> {
         }
 
         // 计算顶部导航栏高度
-        let barHeight =  btnPosI.height + btnPosI.top + statusBarHeight + btnPosI.bottom
+        let barHeight =  btnPosI.height + btnPosI.top + btnPosI.bottom;
+
+        // 计算胶囊展位
+        let capsule = btnPosI.right + btnPosI.width;
 
         this.setData({
 
             // 不知道为什么总是差 4px 距离
             // 别问为什么 加上就对了
-            barHeight: barHeight + 4
+            barHeight: barHeight + 4 + StatusBar.StatusBarHeightExtend,
+            barTop: statusBarHeight - StatusBar.StatusBarHeightExtend,
+            capsule: capsule
         });
 
-        Logger.log(`计算并设置 StatusBar 的高度为: ${ barHeight + 4 }px`, 
+        Logger.log(`计算并设置 StatusBar 的高度为: ${ barHeight + 4 }px, ` +
+        `状态栏高度: ${ statusBarHeight }px, 胶囊占位: ${ capsule }px`, 
         LevelLogLabel.DebugLabel, StatusBar.StatusBarLabel);
 
     }
 
     public onLoad() {
-        Logger.log("StatusBar模块加载...", 
+        
+        Logger.log("StatusBar 模块加载...", 
         LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel, StatusBar.StatusBarLabel);
 
         this.setHeight();
@@ -74,5 +115,5 @@ implements Partial<ILifetime> {
 
 }
 
-export default StatusBar;
+export default StatusBar; 
 export { StatusBar };

miniprogram/pages/Timetable/Timetable.scss

@@ -1,9 +1,2 @@
-view.status-bar {
-    background-color: #F8F8F8;
-}
+@import "./StatusBar.scss"
 
-@media (prefers-color-scheme: dark){
-    view.status-bar {
-      background-color: #191919;
-    }
-}

miniprogram/pages/Timetable/Timetable.wxml

@@ -1,5 +1,30 @@
 
 <!-- 顶部状态栏 -->
-<view class="status-bar" style="height: {{ statusBar$barHeight }}px"></view>
+<view class="status-bar" style="height:{{ statusBar$barHeight }}px; padding-top:{{ statusBar$barTop }}px;">
+    
+    <!-- 学期选择 -->
+    <view class="select">
+        <image src="/image/ui/last_semester_0.svg" />
+        <view class="semester">
+            <view class="semester-title">大四</view>
+            <view class="semester-intro">2021-2022</view>
+        </view>
+    </view>
 
-<text>afdff</text>
+    <!-- 周选择 -->
+    <view class="content">
+        
+        <view class="week">
+            <view class="week-title">第1周</view>
+            <view class="week-intro">非本周</view>
+        </view>
+    </view>
+
+    <!-- 胶囊占位 -->
+    <view class="capsule-holder" style="width: {{ statusBar$capsule }}px"></view>
+</view>
+
+<!-- 状态栏占位 -->
+<view class="status-bar-blank" style="height: {{ statusBar$barHeight + statusBar$barTop }}px"></view>
+
+<!-- <text>afdff</text> -->