Add StatusBar Modular #9
@ -1,17 +1,34 @@
|
|||||||
|
|
||||||
|
$theme-color-blue: #3EA3D8;
|
||||||
|
$theme-color-red: #FF9393;
|
||||||
|
|
||||||
|
$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, .55);
|
||||||
|
|
||||||
|
$theme-color-dark-layout: #191919;
|
||||||
|
$theme-color-dark-background: #1f1f1f;
|
||||||
|
$theme-color-dark-title: rgba(255, 255, 255, .65);
|
||||||
|
$theme-color-dark-text: rgba(255, 255, 255, .55);
|
||||||
|
|
||||||
|
$black-filter: brightness(0) opacity(.65);
|
||||||
|
$white-filter: brightness(100) opacity(.65);
|
||||||
|
$blue-filter: opacity(.65);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
page {
|
page {
|
||||||
background-color: #f4f0f1;
|
background-color: #f4f0f1;
|
||||||
color: rgba(0, 0, 0, .55);
|
color: $theme-color-light-text;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
font-family: 'Lucida Sans',
|
font-family: Hiragino Sans GB, MicroSoft YaHei;
|
||||||
'Lucida Sans Regular', 'Lucida Grande',
|
|
||||||
'Lucida Sans Unicode', 'Geneva', 'Verdana', 'sans-serif';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark){
|
@media (prefers-color-scheme: dark){
|
||||||
page {
|
page {
|
||||||
background-color: #1f1f1f;
|
background-color: #1f1f1f;
|
||||||
color: rgba(255, 255, 255, .55);
|
color: $theme-color-dark-text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,6 +1,5 @@
|
|||||||
import { Logger } from "./logger/Logger";
|
import { Logger } from "./core/Logger";
|
||||||
import { LevelLogLabel } from "./logger/LevelLogLabel";
|
import { LevelLogLabel, LifeCycleLogLabel } from "./core/PresetLogLabel";
|
||||||
import { LifeCycleLogLabel } from "./logger/LifeCycleLogLabel";
|
|
||||||
|
|
||||||
|
|
||||||
App<IAppOption>({
|
App<IAppOption>({
|
||||||
|
|||||||
@ -10,6 +10,13 @@
|
|||||||
*/
|
*/
|
||||||
export const LOGGER_CONSOLE:boolean = true;
|
export const LOGGER_CONSOLE:boolean = true;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否在控制台输出时启用标签样式
|
||||||
|
* 如果在手机上调试可以关闭此选项
|
||||||
|
* 因为手机上的控制台无法正确显示样式
|
||||||
|
*/
|
||||||
|
export const LOGGER_STYLE:boolean = true;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 调试过滤器
|
* 调试过滤器
|
||||||
* 按照 LogLabel 进行过滤
|
* 按照 LogLabel 进行过滤
|
||||||
|
|||||||
@ -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 { StackLogLabel } from "./PresetLogLabel";
|
||||||
import { LogLabel } from "./LogLabel";
|
import { LogLabel } from "./LogLabel";
|
||||||
|
|
||||||
@ -82,30 +82,41 @@ class Logger {
|
|||||||
*/
|
*/
|
||||||
public static calcStyle(...labels:LogLabel[]):[string[], string[]] {
|
public static calcStyle(...labels:LogLabel[]):[string[], string[]] {
|
||||||
|
|
||||||
// 过滤出需要显示的 Labels
|
|
||||||
let labelsNeedRender:LogLabel[] = labels.filter((label:LogLabel)=>{
|
|
||||||
return label.display
|
|
||||||
});
|
|
||||||
|
|
||||||
let consoleLabels:string[] = [];
|
let consoleLabels:string[] = [];
|
||||||
let consoleStyles: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());
|
consoleLabels.push(labels[i].getLoggerOutput());
|
||||||
|
|
||||||
if (i !== ( labelsNeedRender.length - 1))
|
if (i !== ( labels.length - 1))
|
||||||
consoleLabels.push("%c ");
|
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("");
|
consoleStyles.push("");
|
||||||
}
|
}
|
||||||
|
|
||||||
return [consoleLabels, consoleStyles];
|
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 函数都是基于此封装
|
* 其他的 Log 函数都是基于此封装
|
||||||
@ -122,12 +133,31 @@ class Logger {
|
|||||||
if(!Logger.testLog(...labels, ...attachLabel, StackLogLabel.filterUrlLabel))
|
if(!Logger.testLog(...labels, ...attachLabel, StackLogLabel.filterUrlLabel))
|
||||||
return content.getContent();
|
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());
|
console.log(consoleLabels.join(""), ...consoleStyles, ...content.getContent());
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
// 计算收集标签
|
||||||
|
let consoleLabels= Logger.calcLabel(...labelsNeedRender);
|
||||||
|
|
||||||
|
// 输出
|
||||||
|
console.log(consoleLabels.join(" "), ...content.getContent());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return content.getContent();
|
return content.getContent();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -400,7 +400,7 @@ class Manager<WXC extends AnyWXContext = AnyWXContext> {
|
|||||||
if(this.modules[i].data !== void 0) {
|
if(this.modules[i].data !== void 0) {
|
||||||
this.context.data[`${ this.modules[i].nameSpace }$${ key }`] =
|
this.context.data[`${ this.modules[i].nameSpace }$${ key }`] =
|
||||||
( this.modules[i].data as IAnyTypeObject )[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 }]`);
|
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(data.length > 0) log += `Using Props: ${ data.join(", ") }\n`;
|
||||||
if(func.length > 0) log += `Using Function: ${ func.join(", ") }\n`;
|
if(func.length > 0) log += `Using Function: ${ func.join(", ") }\n`;
|
||||||
|
|
||||||
|
|||||||
@ -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}`)
|
return new LogStyle().setBorder("4px", `1px solid ${color}`)
|
||||||
.setColor(color).setBlank("0 5px");
|
.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 })`)
|
return new LogStyle().setBorder("4px", `1px solid rgb(${ r }, ${ g }, ${ b })`)
|
||||||
.setColor(`rgb(${ r }, ${ g }, ${ b })`, `rgba(${ r }, ${ g }, ${ b }, .1)`)
|
.setColor(`rgb(${ r }, ${ g }, ${ b })`, `rgba(${ r }, ${ g }, ${ b }, .1)`)
|
||||||
.setBlank("0 5px");
|
.setBlank("0 5px");
|
||||||
@ -310,4 +310,4 @@ class LifeCycleLogLabel {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { StackInfo, StackLogLabel, LevelLogLabel, LifeCycleLogLabel };
|
export { StackInfo, StackLogLabel, LevelLogLabel, LifeCycleLogLabel, normalLifeStyleGen as colorRadio };
|
||||||
17
miniprogram/image/ui/last_semester.svg
Normal file
17
miniprogram/image/ui/last_semester.svg
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#3EA3D8;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M839.8,71.8H715.5c-18.5-34.5-55.1-58.2-96.9-58.2H414.1c-41.9,0-78.3,23.6-96.9,58.2H192.9
|
||||||
|
C131,71.8,80.8,122.2,80.8,184v711.4c0,61.9,50.2,112.1,112.1,112.1h646.9c61.9,0,112.1-50.2,112.1-112.1V184
|
||||||
|
C951.8,122.1,901.6,71.8,839.8,71.8L839.8,71.8z M414.1,72.2h204.5c28.3,0,51.4,23.1,51.4,51.4S646.9,175,618.6,175H414.1
|
||||||
|
c-28.3,0-51.4-23.1-51.4-51.4C362.6,95.3,385.8,72.2,414.1,72.2L414.1,72.2z M893.4,895.4c0,29.6-24,53.6-53.6,53.6H192.9
|
||||||
|
c-29.6,0-53.6-24-53.6-53.6V184c0-29.6,24-53.6,53.6-53.6h111.6c3.5,57.5,51.4,103.1,109.6,103.1h204.5
|
||||||
|
c58.3,0,106.1-45.6,109.6-103.1h111.6c29.6,0,53.6,24,53.6,53.6L893.4,895.4L893.4,895.4z"/>
|
||||||
|
<path class="st0" d="M314.6,730.6H459v-350c0-15.8,9.9-24.4,29.7-25.7c19.8,1.3,30.3,9.9,31.6,25.7v96.9h172
|
||||||
|
c17.1,1.3,26.4,11.2,27.7,29.7c-1.3,19.8-10.6,29.7-27.7,29.7h-172v193.8H722c14.5,1.3,22.4,9.9,23.7,25.7
|
||||||
|
c-1.3,18.4-9.2,28.3-23.7,29.7H314.6c-15.8-1.3-24.4-11.2-25.7-29.7C290.2,740.4,298.8,731.9,314.6,730.6L314.6,730.6z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
18
miniprogram/image/ui/next_semester.svg
Normal file
18
miniprogram/image/ui/next_semester.svg
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#3EA3D8;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M838.4,71.7H713.8c-18.5-34.6-55.2-58.3-97.1-58.3H412c-42,0-78.4,23.7-97,58.3H190.4
|
||||||
|
c-62,0-112.2,50.5-112.2,112.3v712.6c0,62,50.3,112.2,112.2,112.2h648c62,0,112.2-50.3,112.2-112.2V184.1
|
||||||
|
C950.6,122.1,900.3,71.7,838.4,71.7z M412,72.1h204.8c28.4,0,51.4,23.1,51.4,51.4c0,28.4-23.1,51.5-51.4,51.5H412
|
||||||
|
c-28.4,0-51.4-23.1-51.4-51.5C360.4,95.2,383.6,72.1,412,72.1z M892,896.6c0,29.6-24.1,53.7-53.7,53.7h-648
|
||||||
|
c-29.6,0-53.7-24.1-53.7-53.7V184.1c0-29.6,24.1-53.7,53.7-53.7h111.8c3.5,57.6,51.4,103.3,109.8,103.3h204.8
|
||||||
|
c58.4,0,106.3-45.7,109.8-103.3h111.8c29.6,0,53.7,24.1,53.7,53.7C892,184.1,892,896.6,892,896.6z"/>
|
||||||
|
<path class="st0" d="M308.4,358h411.9c15.8,1.3,25.1,11.2,27.7,29.7c-1.3,18.5-9.9,27.7-25.7,27.7H528.2V461
|
||||||
|
c52.8,33,103.6,72,152.5,116.8c18.5,19.8,21.8,38.3,9.9,55.4c-13.2,11.9-30.4,8.6-51.5-9.9c-42.3-39.6-79.2-71.3-110.9-95.1V764
|
||||||
|
c-1.3,14.5-11.2,22.4-29.7,23.8c-18.5-1.3-27.7-9.3-27.7-23.8V415.4H310.4c-15.8,0-24.4-9.2-25.7-27.7
|
||||||
|
C284.7,369.2,292.6,359.3,308.4,358z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
12
miniprogram/image/ui/selectArror.svg
Normal file
12
miniprogram/image/ui/selectArror.svg
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="D" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#3EA3D8;}
|
||||||
|
</style>
|
||||||
|
<path class="st0" d="M474.1,995.9l5.4,4.9c33.6,27.3,86.1,4,86.1-41.4V729.7h371.2c29.3,0,53-23.7,53-53V346.7l-0.5-7.1
|
||||||
|
c-3.6-26.3-26-45.9-52.5-45.9l-371.2,0.1V64c0-21.7-13.2-41.2-33.4-49.2c-20.2-8-43.2-3-58.1,12.8L49.9,475.3
|
||||||
|
c-19.3,20.4-19.3,52.4,0,72.9L474.1,995.9z M161.4,511.7l298.1-314.7v149.7l0.5,7.2c3.6,26.3,26,45.8,52.5,45.8l371.1,0.1v223.8
|
||||||
|
H512.5l-7.2,0.5c-26.3,3.6-45.8,26-45.8,52.5v149.8L161.4,511.7z M161.4,511.7"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 837 B |
120
miniprogram/pages/Timetable/StatusBar.scss
Normal file
120
miniprogram/pages/Timetable/StatusBar.scss
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
@import "../../app.scss";
|
||||||
|
|
||||||
|
$status-bar-left-top-icon-width: 30px;
|
||||||
|
$status-bar-middle-icon-width: 15px;
|
||||||
|
|
||||||
|
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;
|
||||||
|
font-size: .9em;
|
||||||
|
line-height: .9em;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
view.semester-intro {
|
||||||
|
@extend %status-bar-subtitle;
|
||||||
|
font-size: .9em;
|
||||||
|
line-height: .9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
view.capsule-holder {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
view.content {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: $status-bar-middle-icon-width;
|
||||||
|
height: $status-bar-middle-icon-width;
|
||||||
|
filter: $black-filter;
|
||||||
|
}
|
||||||
|
|
||||||
|
view.week {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
view.week-title {
|
||||||
|
@extend %status-bar-title;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.15em;
|
||||||
|
line-height: 1.15em;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
view.week-intro {
|
||||||
|
@extend %status-bar-subtitle;
|
||||||
|
font-size: .85em;
|
||||||
|
line-height: .85em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
view.status-bar-blank {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
%status-bar-title {
|
||||||
|
color: $theme-color-light-title;
|
||||||
|
}
|
||||||
|
|
||||||
|
%status-bar-subtitle {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
119
miniprogram/pages/Timetable/StatusBar.ts
Normal file
119
miniprogram/pages/Timetable/StatusBar.ts
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
import { Modular, Manager, ILifetime } from "../../core/Module";
|
||||||
|
import { LevelLogLabel, LifeCycleLogLabel, colorRadio } from "../../core/PresetLogLabel";
|
||||||
|
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, {}, StatusBarEvent>
|
||||||
|
implements Partial<ILifetime> {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导航栏高度补偿
|
||||||
|
*/
|
||||||
|
public static readonly StatusBarHeightExtend:number = 2;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面日志输出标签
|
||||||
|
*/
|
||||||
|
public static readonly StatusBarLabel = new LogLabel(
|
||||||
|
"StatusBar", colorRadio(255, 230, 222)
|
||||||
|
);
|
||||||
|
|
||||||
|
data = {
|
||||||
|
|
||||||
|
// 导航栏高度
|
||||||
|
barHeight: 65,
|
||||||
|
|
||||||
|
// 状态栏高度
|
||||||
|
barTop: 20,
|
||||||
|
|
||||||
|
// 胶囊占位
|
||||||
|
capsule: 94
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置顶部状态栏高度
|
||||||
|
*/
|
||||||
|
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 + btnPosI.bottom;
|
||||||
|
|
||||||
|
// 计算胶囊展位
|
||||||
|
let capsule = btnPosI.right + btnPosI.width;
|
||||||
|
|
||||||
|
this.setData({
|
||||||
|
|
||||||
|
// 不知道为什么总是差 4px 距离
|
||||||
|
// 别问为什么 加上就对了
|
||||||
|
barHeight: barHeight + 4 + StatusBar.StatusBarHeightExtend,
|
||||||
|
barTop: statusBarHeight - StatusBar.StatusBarHeightExtend,
|
||||||
|
capsule: capsule
|
||||||
|
});
|
||||||
|
|
||||||
|
Logger.log(`计算并设置 StatusBar 的高度为: ${ barHeight + 4 }px, ` +
|
||||||
|
`状态栏高度: ${ statusBarHeight }px, 胶囊占位: ${ capsule }px`,
|
||||||
|
LevelLogLabel.DebugLabel, StatusBar.StatusBarLabel);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public onLoad() {
|
||||||
|
|
||||||
|
Logger.log("StatusBar 模块加载...",
|
||||||
|
LevelLogLabel.TraceLabel, LifeCycleLogLabel.OnLoadLabel, StatusBar.StatusBarLabel);
|
||||||
|
|
||||||
|
this.setHeight();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StatusBar;
|
||||||
|
export { StatusBar };
|
||||||
@ -1,3 +1,2 @@
|
|||||||
// view.status-bar {
|
@import "./StatusBar.scss"
|
||||||
// // background-color: antiquewhite;
|
|
||||||
// }
|
|
||||||
|
|||||||
@ -1,85 +1,10 @@
|
|||||||
import { Logger } from "../../core/Logger";
|
import { Manager} from "../../core/Module";
|
||||||
import { LevelLogLabel, LifeCycleLogLabel } from "../../core/PresetLogLabel";
|
import { StatusBar } from "./StatusBar";
|
||||||
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});
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
// })
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 此页面使用 Manager 进行模块化管理
|
||||||
|
* 若要添加先功能请先定义 Modular 并添加至 Manager
|
||||||
|
*/
|
||||||
Manager.Page((manager)=>{
|
Manager.Page((manager)=>{
|
||||||
let m1 = manager.addModule(M1, "m1");
|
manager.addModule(StatusBar, "statusBar");
|
||||||
let m2 = manager.addModule(M2, "m2", {m1});
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,3 +1,30 @@
|
|||||||
<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; padding-top:{{ statusBar$barTop }}px;">
|
||||||
|
|
||||||
|
<!-- 学期选择 -->
|
||||||
|
<view class="select">
|
||||||
|
<image src="/image/ui/last_semester.svg"/>
|
||||||
|
<view class="semester">
|
||||||
|
<view class="semester-title">大四-上</view>
|
||||||
|
<view class="semester-intro">2021-2022</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 周选择 -->
|
||||||
|
<view class="content">
|
||||||
|
<view class="week">
|
||||||
|
<view class="week-title">第1周</view>
|
||||||
|
<view class="week-intro">双击返回本周</view>
|
||||||
|
</view>
|
||||||
|
<image src="/image/ui/selectArror.svg"/>
|
||||||
|
</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> -->
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"light": {
|
"light": {
|
||||||
"navigationBarBackgroundColor": "#f6f6f6",
|
"navigationBarBackgroundColor": "#f8f8f8",
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
"backgroundColor": "#f4f0f1",
|
"backgroundColor": "#f4f0f1",
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user