前端添加调试隐藏菜单

This commit is contained in:
fangxiang 2022-04-25 11:02:25 +08:00
parent 98370a52c5
commit 243b6555be
4 changed files with 140 additions and 0 deletions

View File

@ -0,0 +1,110 @@
<template>
<q-dialog
persistent
v-model="show_dialog"
@before-hide="resetData"
@keydown="
(evt) => {
if (!loading && evt.keyCode == 27) {
show_dialog = false;
}
}
"
>
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 35vw">
<q-form @submit="onSubmit">
<q-card-section class="q-ma-none q-pa-sm">
<div class="row">
<div class="col-auto text-h6">AdvancedDebug</div>
<q-space />
<div>
<q-btn
:loading="loading"
flat
round
icon="close"
color="red"
v-close-popup
>
<q-tooltip>
{{ $t("close") }}
</q-tooltip>
</q-btn>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-section style="max-height: 50vh; width: 35vw" class="scroll">
<q-list>
<q-item>
<q-item-section>
<q-btn @click="restartDevice"> Restart </q-btn>
</q-item-section>
</q-item>
</q-list>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn
:loading="loading"
flat
:label="$t('Cancel')"
color="primary"
v-close-popup
/>
<q-btn
ref="accept"
flat
:label="$t('Accept')"
:loading="loading"
type="submit"
color="primary"
/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped></style>
<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue";
import { useStore } from "src/store";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";
export default defineComponent({
name: "ComponentAdvancedDebugDialog",
setup() {
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
let show_dialog = ref(false);
let loading = ref(false);
return {
show_dialog,
loading,
showDialog() {
show_dialog.value = true;
},
resetData() {
loading.value = false;
},
restartDevice() {
GlobalData.getInstance().getCurrentClient()?.restartDevice();
},
};
},
});
</script>

View File

@ -151,6 +151,17 @@
{{ $t("CN/EN switch") }} {{ $t("CN/EN switch") }}
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item
v-if="$store.state.advanced_debug"
clickable
v-close-popup
@click="$refs.advanced_debug_dialog.showDialog()"
>
<q-item-section avatar>
<q-icon name="bug_report" color="accent" />
</q-item-section>
<q-item-section> AdvancedDebug </q-item-section>
</q-item>
</q-list> </q-list>
</q-popup-proxy> </q-popup-proxy>
</q-btn> </q-btn>
@ -170,6 +181,7 @@
<background-image-dialog ref="background_image_dialog" /> <background-image-dialog ref="background_image_dialog" />
<file-manage-dialog ref="file_manage_dialog" /> <file-manage-dialog ref="file_manage_dialog" />
<center-control-dialog ref="center_control_dialog" /> <center-control-dialog ref="center_control_dialog" />
<advanced-debug-dialog ref="advanced_debug_dialog" />
</template> </template>
<script lang="ts"> <script lang="ts">
@ -180,6 +192,7 @@ import { useStore } from "src/store";
import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue"; import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
import FileManageDialog from "src/components/FileManageDialog.vue"; import FileManageDialog from "src/components/FileManageDialog.vue";
import CenterControlDialog from "src/components/CenterControlDialog.vue"; import CenterControlDialog from "src/components/CenterControlDialog.vue";
import AdvancedDebugDialog from "src/components/AdvancedDebugDialog.vue";
import GlobalData from "src/common/GlobalData"; import GlobalData from "src/common/GlobalData";
@ -189,6 +202,7 @@ export default defineComponent({
BackgroundImageDialog, BackgroundImageDialog,
FileManageDialog, FileManageDialog,
CenterControlDialog, CenterControlDialog,
AdvancedDebugDialog,
}, },
setup() { setup() {
const $store = useStore(); const $store = useStore();

View File

@ -307,6 +307,17 @@
{{ $t("about") }} {{ $t("about") }}
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item
v-if="$store.state.advanced_debug"
clickable
v-close-popup
@click="$refs.advanced_debug_dialog.showDialog()"
>
<q-item-section avatar>
<q-icon name="bug_report" />
</q-item-section>
<q-item-section> AdvancedDebug </q-item-section>
</q-item>
</q-list> </q-list>
</q-btn-dropdown> </q-btn-dropdown>
@ -334,6 +345,7 @@
<edge-blending-dialog ref="edge_blending_dialog" /> <edge-blending-dialog ref="edge_blending_dialog" />
<register-dialog ref="register_dialog" /> <register-dialog ref="register_dialog" />
<center-control-dialog ref="center_control_dialog" /> <center-control-dialog ref="center_control_dialog" />
<advanced-debug-dialog ref="advanced_debug_dialog" />
</template> </template>
<style scoped> <style scoped>
@ -367,6 +379,7 @@ import AboutDialog from "src/components/AboutDialog.vue";
import EdgeBlendingDialog from "src/components/EdgeBlendingDialog.vue"; import EdgeBlendingDialog from "src/components/EdgeBlendingDialog.vue";
import RegisterDialog from "src/components/RegisterDialog.vue"; import RegisterDialog from "src/components/RegisterDialog.vue";
import CenterControlDialog from "src/components/CenterControlDialog.vue"; import CenterControlDialog from "src/components/CenterControlDialog.vue";
import AdvancedDebugDialog from "src/components/AdvancedDebugDialog.vue";
import EventBus, { EventNamesDefine } from "src/common/EventBus"; import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { Protocol } from "src/entities/WSProtocol"; import { Protocol } from "src/entities/WSProtocol";
@ -399,6 +412,7 @@ export default defineComponent({
EdgeBlendingDialog, EdgeBlendingDialog,
RegisterDialog, RegisterDialog,
CenterControlDialog, CenterControlDialog,
AdvancedDebugDialog,
}, },
setup() { setup() {

View File

@ -35,6 +35,7 @@ export interface StateInterface {
// example: ExampleStateInterface; // example: ExampleStateInterface;
// Declared as unknown to avoid linting issue. Best to strongly type as per the line above. // Declared as unknown to avoid linting issue. Best to strongly type as per the line above.
initialized: boolean; initialized: boolean;
advanced_debug: boolean;
signal_source_tree: SignalSourceTreeItemEntity[]; signal_source_tree: SignalSourceTreeItemEntity[];
polling_tree: PollingTreeItemEntity[]; polling_tree: PollingTreeItemEntity[];
mode_tree: ModeTreeItemEntity[]; mode_tree: ModeTreeItemEntity[];
@ -281,6 +282,7 @@ export default store(function (/* { ssrContext } */) {
state: { state: {
// state // state
initialized: false, initialized: false,
advanced_debug: window.location.href.indexOf("advanced_debug=1") != -1,
signal_source_tree: [], signal_source_tree: [],
polling_tree: [], polling_tree: [],
mode_tree: [], mode_tree: [],