Update: PageBase class中增加Tab栏标记状态设置

This commit is contained in:
王立帮
2024-12-13 16:02:46 +08:00
parent 09e18d6aac
commit 77a72e4a3d
7 changed files with 73 additions and 42 deletions

View File

@@ -357,10 +357,14 @@ html[data-bs-theme=dark] .chrome-tabs .chrome-tab.dirty .chrome-tab-close:hover
background-color: #5f6368 !important; background-color: #5f6368 !important;
} }
html[data-bs-theme=light] .chrome-tabs .chrome-tab.dirty .chrome-tab-close { .chrome-tabs .chrome-tab.dirty .chrome-tab-close.positive {
background-color: #000; background-color: #ffb800;
} }
html[data-bs-theme=dark] .chrome-tabs .chrome-tab.dirty .chrome-tab-close { html[data-bs-theme=light] .chrome-tabs .chrome-tab.dirty .chrome-tab-close.negative {
background-color: #fff; background-color: var(--app-light-color);
}
html[data-bs-theme=dark] .chrome-tabs .chrome-tab.dirty .chrome-tab-close.negative {
background-color: var(--app-dark-color);
} }

View File

@@ -85,6 +85,10 @@ class FSBoard {
getHandler() { getHandler() {
return this.#handler_; return this.#handler_;
} }
dispose() {
this.#handler_ = null;
}
} }
Mixly.FSBoard = FSBoard; Mixly.FSBoard = FSBoard;

View File

@@ -15,6 +15,7 @@ const {
class PageBase extends Component { class PageBase extends Component {
#pages_ = new Registry(); #pages_ = new Registry();
#$tab_ = null; #$tab_ = null;
#$close_ = null;
#dirty_ = false; #dirty_ = false;
#active_ = true; #active_ = true;
#inited_ = false; #inited_ = false;
@@ -64,7 +65,9 @@ class PageBase extends Component {
dispose() { dispose() {
this.#forward_('dispose'); this.#forward_('dispose');
this.#pages_.reset(); this.#pages_.reset();
this.#$close_ = null;
this.#$tab_ && this.#$tab_.remove(); this.#$tab_ && this.#$tab_.remove();
this.#$tab_ = null;
super.dispose(); super.dispose();
} }
@@ -97,22 +100,25 @@ class PageBase extends Component {
setTab($tab) { setTab($tab) {
this.#$tab_ = $tab; this.#$tab_ = $tab;
this.#$close_ = $tab.find('.chrome-tab-close');
} }
hideCloseBtn() { hideCloseBtn() {
const $closeBtn = this.getTab().find('.chrome-tab-close'); this.#$close_.css('display', 'none');
$closeBtn.css('display', 'none');
} }
showCloseBtn() { showCloseBtn() {
const $closeBtn = this.getTab().find('.chrome-tab-close'); this.#$close_.css('display', 'block');
$closeBtn.css('display', 'block');
} }
getTab() { getTab() {
return this.#$tab_; return this.#$tab_;
} }
setMarkStatus(styleClass) {
this.#$close_.attr('class', `chrome-tab-close layui-badge-dot ${styleClass}`);
}
addDirty() { addDirty() {
this.#forward_('addDirty'); this.#forward_('addDirty');
const $tab = this.getTab(); const $tab = this.getTab();

View File

@@ -46,7 +46,6 @@ class StatusBarAmpy extends PageBase {
); );
} }
#$close_ = null;
#$fileTree_ = null; #$fileTree_ = null;
#$editor_ = null; #$editor_ = null;
#$openFS_ = null; #$openFS_ = null;
@@ -370,9 +369,7 @@ class StatusBarAmpy extends PageBase {
init() { init() {
super.init(); super.init();
this.addDirty(); this.addDirty();
const $tab = this.getTab(); this.setMarkStatus('negative');
this.#$close_ = $tab.find('.chrome-tab-close');
this.#$close_.addClass('layui-badge-dot layui-bg-blue');
this.#editor_.init(); this.#editor_.init();
this.#addEventsListener_(); this.#addEventsListener_();
const editor = this.#editor_.getEditor(); const editor = this.#editor_.getEditor();
@@ -434,22 +431,28 @@ class StatusBarAmpy extends PageBase {
} }
setStatus(isChanged) { setStatus(isChanged) {
if (this.#changed_ === isChanged || !this.#$close_) { if (this.#changed_ === isChanged) {
return; return;
} }
this.#changed_ = isChanged; this.#changed_ = isChanged;
if (isChanged) { if (isChanged) {
this.#$close_.removeClass('layui-bg-blue'); this.setMarkStatus('positive');
this.#$close_.addClass('layui-bg-orange');
} else { } else {
this.#$close_.removeClass('layui-bg-orange'); this.setMarkStatus('negative');
this.#$close_.addClass('layui-bg-blue');
} }
} }
dispose() { dispose() {
this.#$fileTree_ = null;
this.#$editor_ = null;
this.#$openFS_ = null;
this.#$editorEmpty_ = null;
this.#editor_.dispose(); this.#editor_.dispose();
this.#editor_ = null;
this.#fileTree_.dispose(); this.#fileTree_.dispose();
this.#fileTree_ = null;
this.#drag_.dispose();
this.#drag_ = null;
super.dispose(); super.dispose();
} }
} }

View File

@@ -179,6 +179,13 @@ class Panel extends Component {
dispose() { dispose() {
this.#$fsSelect_.select2('destroy'); this.#$fsSelect_.select2('destroy');
this.#$folderInput_ = null;
this.#$closeBtn_ = null;
this.#$selectFolderBtn_ = null;
this.#$downloadBtn_ = null;
this.#$uploadBtn_ = null;
this.#$fsSelect_ = null;
this.#$progress_ = null;
super.dispose(); super.dispose();
} }
} }
@@ -193,9 +200,8 @@ class StatusBarFS extends PageBase {
} }
#$btn_ = null; #$btn_ = null;
#fsBoard_ = null;
#$close_ = null;
#$mask_ = null; #$mask_ = null;
#fsBoard_ = null;
#registry_ = new Registry(); #registry_ = new Registry();
#opened_ = false; #opened_ = false;
@@ -221,24 +227,20 @@ class StatusBarFS extends PageBase {
init() { init() {
this.addDirty(); this.addDirty();
const $tab = this.getTab(); this.setMarkStatus('negative');
this.#$close_ = $tab.find('.chrome-tab-close');
this.#$close_.addClass('layui-badge-dot layui-bg-blue');
} }
setStatus(isOpened) { setStatus(isOpened) {
if (this.#opened_ === isOpened || !this.#$close_) { if (this.#opened_ === isOpened) {
return; return;
} }
this.#opened_ = isOpened; this.#opened_ = isOpened;
if (isOpened) { if (isOpened) {
this.#$mask_.css('display', 'block'); this.#$mask_.css('display', 'block');
this.#$close_.removeClass('layui-bg-blue'); this.setMarkStatus('positive');
this.#$close_.addClass('layui-bg-orange');
} else { } else {
this.#$mask_.css('display', 'none'); this.#$mask_.css('display', 'none');
this.#$close_.removeClass('layui-bg-orange'); this.setMarkStatus('negative');
this.#$close_.addClass('layui-bg-blue');
} }
} }
@@ -310,7 +312,12 @@ class StatusBarFS extends PageBase {
for (let id of this.#registry_.keys()) { for (let id of this.#registry_.keys()) {
this.#registry_.getItem(id).dispose(); this.#registry_.getItem(id).dispose();
} }
this.#$btn_ = null;
this.#$mask_ = null;
this.#fsBoard_.dispose();
this.#fsBoard_ = null;
this.#registry_.reset(); this.#registry_.reset();
this.#registry_ = null;
super.dispose(); super.dispose();
} }

View File

@@ -39,7 +39,6 @@ class StatusBarLibs extends PageBase {
} }
#manager_ = null; #manager_ = null;
#$close_ = null;
constructor() { constructor() {
super(); super();
@@ -56,8 +55,7 @@ class StatusBarLibs extends PageBase {
init() { init() {
this.addDirty(); this.addDirty();
const $tab = this.getTab(); const $tab = this.getTab();
this.#$close_ = $tab.find('.chrome-tab-close'); this.setMarkStatus('negative');
this.#$close_.addClass('layui-badge-dot layui-bg-blue');
} }
getManager() { getManager() {
@@ -78,6 +76,12 @@ class StatusBarLibs extends PageBase {
this.#manager_.onUnmounted(); this.#manager_.onUnmounted();
super.onUnmounted(); super.onUnmounted();
} }
dispose() {
this.#manager_.dispose();
this.#manager_ = null;
super.dispose();
}
} }
Mixly.StatusBarLibs = StatusBarLibs; Mixly.StatusBarLibs = StatusBarLibs;

View File

@@ -62,9 +62,6 @@ class StatusBarSerial extends PageBase {
} }
} }
#$close_ = null;
#opened_ = false;
#valueTemp_ = '';
#$sendInput_ = null; #$sendInput_ = null;
#$settingMenu_ = null; #$settingMenu_ = null;
#$scroll_ = null; #$scroll_ = null;
@@ -72,6 +69,8 @@ class StatusBarSerial extends PageBase {
#$dtr_ = null; #$dtr_ = null;
#$rts_ = null; #$rts_ = null;
#$hex_ = null; #$hex_ = null;
#opened_ = false;
#valueTemp_ = '';
#manager_ = null; #manager_ = null;
#output_ = null; #output_ = null;
#chart_ = null; #chart_ = null;
@@ -84,7 +83,6 @@ class StatusBarSerial extends PageBase {
sendWith: '\r\n', sendWith: '\r\n',
hex: false hex: false
}; };
#dropdownMenu_ = null;
#addTimestamp_ = false; #addTimestamp_ = false;
#maxLine_ = 200; #maxLine_ = 200;
#lastUpdate_ = 0; #lastUpdate_ = 0;
@@ -426,9 +424,8 @@ class StatusBarSerial extends PageBase {
init() { init() {
super.init(); super.init();
this.addDirty(); this.addDirty();
this.setMarkStatus('negative');
const $tab = this.getTab(); const $tab = this.getTab();
this.#$close_ = $tab.find('.chrome-tab-close');
this.#$close_.addClass('layui-badge-dot layui-bg-blue');
this.#port_ = $tab.attr('data-tab-id'); this.#port_ = $tab.attr('data-tab-id');
this.#serial_ = new Serial(this.getPortName()); this.#serial_ = new Serial(this.getPortName());
this.#serial_.config(this.#config_).catch(Debug.error); this.#serial_.config(this.#config_).catch(Debug.error);
@@ -495,16 +492,14 @@ class StatusBarSerial extends PageBase {
} }
setStatus(isOpened) { setStatus(isOpened) {
if (this.isOpened() === isOpened || !this.#$close_) { if (this.isOpened() === isOpened) {
return; return;
} }
this.#opened_ = isOpened; this.#opened_ = isOpened;
if (isOpened) { if (isOpened) {
this.#$close_.removeClass('layui-bg-blue'); this.setMarkStatus('positive');
this.#$close_.addClass('layui-bg-orange');
} else { } else {
this.#$close_.removeClass('layui-bg-orange'); this.setMarkStatus('negative');
this.#$close_.addClass('layui-bg-blue');
} }
this.#output_.setStatus(isOpened); this.#output_.setStatus(isOpened);
this.#chart_.setStatus(isOpened); this.#chart_.setStatus(isOpened);
@@ -558,9 +553,17 @@ class StatusBarSerial extends PageBase {
this.#serial_.close() this.#serial_.close()
.catch(Debug.error) .catch(Debug.error)
.finally(() => { .finally(() => {
this.#$sendInput_ = null;
this.#$settingMenu_ = null;
this.#$scroll_ = null;
this.#$timestamp_ = null;
this.#$dtr_ = null;
this.#$rts_ = null;
this.#$hex_ = null;
this.#output_ = null;
this.#chart_ = null;
this.#manager_.dispose(); this.#manager_.dispose();
this.#manager_ = null; this.#manager_ = null;
this.#$close_ = null;
this.#serial_.dispose(); this.#serial_.dispose();
this.#serial_ = null; this.#serial_ = null;
super.dispose(); super.dispose();