From d93a7cead2a9e3a5e98172c960d6818fa2207afa Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Mon, 9 May 2022 14:54:08 +0800 Subject: [PATCH] feat: mobile terminal adaptation (#78) --- src/App.vue | 2 + src/layout/components/SideBar.vue | 9 +- src/store/modules/app.ts | 5 + src/styles/grid.scss | 418 +----------------- src/styles/lib.scss | 18 + src/styles/reset.scss | 1 + src/views/dashboard/controls/Log.vue | 3 +- src/views/dashboard/controls/Tab.vue | 11 +- src/views/dashboard/controls/Trace.vue | 3 + src/views/dashboard/panel/Tool.vue | 2 +- .../related/components/LogTable/Index.vue | 2 +- .../related/ebpf/components/EBPFSchedules.vue | 2 + .../dashboard/related/profile/Content.vue | 1 + .../related/profile/components/SpanTree.vue | 2 + src/views/dashboard/related/trace/Filter.vue | 9 - 15 files changed, 56 insertions(+), 432 deletions(-) diff --git a/src/App.vue b/src/App.vue index 3f4af22a..edb2bce3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -19,5 +19,7 @@ limitations under the License. --> #app { color: #2c3e50; height: 100%; + overflow: auto; + min-width: 1024px; } diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue index 6bb75048..138082fc 100644 --- a/src/layout/components/SideBar.vue +++ b/src/layout/components/SideBar.vue @@ -109,14 +109,21 @@ import { ref } from "vue"; import { useRouter, RouteRecordRaw } from "vue-router"; import { useI18n } from "vue-i18n"; import Icon from "@/components/Icon.vue"; +import { useAppStoreWithOut } from "@/store/modules/app"; +const appStore = useAppStoreWithOut(); const { t } = useI18n(); const name = ref(String(useRouter().currentRoute.value.name)); const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black"); const routes = ref(useRouter().options.routes); -const isCollapse = ref(false); +if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { + appStore.setIsMobile(true); +} else { + appStore.setIsMobile(false); +} +const isCollapse = ref(appStore.isMobile ? true : false); const controlMenu = () => { isCollapse.value = !isCollapse.value; }; diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index 8e3de407..e3121c0a 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -33,6 +33,7 @@ interface AppState { autoRefresh: boolean; pageTitle: string; version: string; + isMobile: boolean; } export const appStore = defineStore({ @@ -51,6 +52,7 @@ export const appStore = defineStore({ autoRefresh: false, pageTitle: "", version: "", + isMobile: false, }), getters: { duration(): Duration { @@ -121,6 +123,9 @@ export const appStore = defineStore({ this.utcHour = utcHour; this.utc = `${utcHour}:${utcMin}`; }, + setIsMobile(mode: boolean) { + this.isMobile = mode; + }, setEventStack(funcs: (() => void)[]): void { this.eventStack = funcs; }, diff --git a/src/styles/grid.scss b/src/styles/grid.scss index 29b4dac9..be0d07e3 100644 --- a/src/styles/grid.scss +++ b/src/styles/grid.scss @@ -15,10 +15,7 @@ * limitations under the License. */ -.show-xs, -.show-sm, -.show-md, -.show-lg { +.show-xs { display: none !important; } @media (max-width: 767px) { @@ -30,145 +27,6 @@ display: none !important; } } -@media (min-width: 768px) and (max-width: 1023px) { - .show-sm { - display: block !important; - } - - .hide-sm { - display: none !important; - } -} -@media (min-width: 1024px) and (max-width: 1279px) { - .show-md { - display: block !important; - } - - .hide-md { - display: none !important; - } -} -@media (min-width: 1280px) { - .show-lg { - display: block !important; - } - - .hide-lg { - display: none !important; - } -} - -.g-xs-1, -.g-xs-2, -.g-xs-3, -.g-xs-4, -.g-xs-5, -.g-xs-6, -.g-xs-7, -.g-xs-8, -.g-xs-9, -.g-xs-10, -.g-xs-11, -.g-xs-12 { - float: left; - min-height: 1px; -} - -.g-xs-12 { - width: 100%; -} - -.g-xs-11 { - width: 91.666%; -} - -.g-xs-10 { - width: 83.333%; -} - -.g-xs-9 { - width: 75%; -} - -.g-xs-8 { - width: 66.666%; -} - -.g-xs-7 { - width: 58.333%; -} - -.g-xs-6 { - width: 50%; -} - -.g-xs-5 { - width: 41.666%; -} - -.g-xs-4 { - width: 33.333%; -} - -.g-xs-3 { - width: 25%; -} - -.g-xs-2 { - width: 16.666%; -} - -.g-xs-1 { - width: 8.333%; -} - -.g-xs-space-12 { - margin-left: 100%; -} - -.g-xs-space-11 { - margin-left: 91.666%; -} - -.g-xs-space-10 { - margin-left: 83.333%; -} - -.g-xs-space-9 { - margin-left: 75%; -} - -.g-xs-space-8 { - margin-left: 66.666%; -} - -.g-xs-space-7 { - margin-left: 58.333%; -} - -.g-xs-space-6 { - margin-left: 50%; -} - -.g-xs-space-5 { - margin-left: 41.666%; -} - -.g-xs-space-4 { - margin-left: 33.333%; -} - -.g-xs-space-3 { - margin-left: 25%; -} - -.g-xs-space-2 { - margin-left: 16.666%; -} - -.g-xs-space-1 { - margin-left: 8.333%; -} @media (min-width: 768px) { .g-sm-1, .g-sm-2, @@ -233,278 +91,4 @@ .g-sm-1 { width: 8.333%; } - - .g-sm-space-12 { - margin-left: 100%; - } - - .g-sm-space-11 { - margin-left: 91.666%; - } - - .g-sm-space-10 { - margin-left: 83.333%; - } - - .g-sm-space-9 { - margin-left: 75%; - } - - .g-sm-space-8 { - margin-left: 66.666%; - } - - .g-sm-space-7 { - margin-left: 58.333%; - } - - .g-sm-space-6 { - margin-left: 50%; - } - - .g-sm-space-5 { - margin-left: 41.666%; - } - - .g-sm-space-4 { - margin-left: 33.333%; - } - - .g-sm-space-3 { - margin-left: 25%; - } - - .g-sm-space-2 { - margin-left: 16.666%; - } - - .g-sm-space-1 { - margin-left: 8.333%; - } -} -@media (min-width: 1024px) { - .g-md-1, - .g-md-2, - .g-md-3, - .g-md-4, - .g-md-5, - .g-md-6, - .g-md-7, - .g-md-8, - .g-md-9, - .g-md-10, - .g-md-11, - .g-md-12 { - float: left; - min-height: 1px; - } - - .g-md-12 { - width: 100%; - } - - .g-md-11 { - width: 91.666%; - } - - .g-md-10 { - width: 83.333%; - } - - .g-md-9 { - width: 75%; - } - - .g-md-8 { - width: 66.666%; - } - - .g-md-7 { - width: 58.333%; - } - - .g-md-6 { - width: 50%; - } - - .g-md-5 { - width: 41.666%; - } - - .g-md-4 { - width: 33.333%; - } - - .g-md-3 { - width: 25%; - } - - .g-md-2 { - width: 16.666%; - } - - .g-md-1 { - width: 8.333%; - } - - .g-md-space-12 { - margin-left: 100%; - } - - .g-md-space-11 { - margin-left: 91.666%; - } - - .g-md-space-10 { - margin-left: 83.333%; - } - - .g-md-space-9 { - margin-left: 75%; - } - - .g-md-space-8 { - margin-left: 66.666%; - } - - .g-md-space-7 { - margin-left: 58.333%; - } - - .g-md-space-6 { - margin-left: 50%; - } - - .g-md-space-5 { - margin-left: 41.666%; - } - - .g-md-space-4 { - margin-left: 33.333%; - } - - .g-md-space-3 { - margin-left: 25%; - } - - .g-md-space-2 { - margin-left: 16.666%; - } - - .g-md-space-1 { - margin-left: 8.333%; - } -} -@media (min-width: 1280px) { - .g-lg-1, - .g-lg-2, - .g-lg-3, - .g-lg-4, - .g-lg-5, - .g-lg-6, - .g-lg-7, - .g-lg-8, - .g-lg-9, - .g-lg-10, - .g-lg-11, - .g-lg-12 { - float: left; - min-height: 1px; - } - - .g-lg-12 { - width: 100%; - } - - .g-lg-11 { - width: 91.666%; - } - - .g-lg-10 { - width: 83.333%; - } - - .g-lg-9 { - width: 75%; - } - - .g-lg-8 { - width: 66.666%; - } - - .g-lg-7 { - width: 58.333%; - } - - .g-lg-6 { - width: 50%; - } - - .g-lg-5 { - width: 41.666%; - } - - .g-lg-4 { - width: 33.333%; - } - - .g-lg-3 { - width: 25%; - } - - .g-lg-2 { - width: 16.666%; - } - - .g-lg-1 { - width: 8.333%; - } - - .g-lg-space-12 { - margin-left: 100%; - } - - .g-lg-space-11 { - margin-left: 91.666%; - } - - .g-lg-space-10 { - margin-left: 83.333%; - } - - .g-lg-space-9 { - margin-left: 75%; - } - - .g-lg-space-8 { - margin-left: 66.666%; - } - - .g-lg-space-7 { - margin-left: 58.333%; - } - - .g-lg-space-6 { - margin-left: 50%; - } - - .g-lg-space-5 { - margin-left: 41.666%; - } - - .g-lg-space-4 { - margin-left: 33.333%; - } - - .g-lg-space-3 { - margin-left: 25%; - } - - .g-lg-space-2 { - margin-left: 16.666%; - } - - .g-lg-space-1 { - margin-left: 8.333%; - } } diff --git a/src/styles/lib.scss b/src/styles/lib.scss index 34083a5b..1d2a5084 100644 --- a/src/styles/lib.scss +++ b/src/styles/lib.scss @@ -171,3 +171,21 @@ color: #ddd; } } + +.scroll_bar_style::-webkit-scrollbar { + width: 9px; + height: 4px; + background-color: #eee; +} + +.scroll_bar_style::-webkit-scrollbar-track { + background-color: #eee; + border-radius: 3px; + box-shadow: inset 0 0 6px #ccc; +} + +.scroll_bar_style::-webkit-scrollbar-thumb { + border-radius: 3px; + box-shadow: inset 0 0 6px #ccc; + background-color: #aaa; +} diff --git a/src/styles/reset.scss b/src/styles/reset.scss index 0446f4fb..9a95d713 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -29,6 +29,7 @@ body { html, body { height: 100%; + overflow-y: hidden; } div, diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue index ead077b8..ea80a786 100644 --- a/src/views/dashboard/controls/Log.vue +++ b/src/views/dashboard/controls/Log.vue @@ -64,6 +64,7 @@ function removeWidget() { height: 100%; font-size: 12px; position: relative; + overflow: auto; } .delete { @@ -76,6 +77,7 @@ function removeWidget() { padding: 10px; font-size: 12px; border-bottom: 1px solid #dcdfe6; + min-width: 1024px; } .tools { @@ -93,6 +95,5 @@ function removeWidget() { .log { width: 100%; - overflow: auto; } diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index 3ce22394..e500337a 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. -->