From 2a131031863eef7d3b858d3c00144e426955f5bc Mon Sep 17 00:00:00 2001
From: 0xJacky <me@jackyu.cn>
Date: Mon, 1 Aug 2022 22:03:26 +0800
Subject: [PATCH] [frontend-next] Optimized styles

---
 .../components/StdDataDisplay/StdTable.vue    |  11 +-
 .../components/StdDataEntry/StdDataEntry.tsx  |   3 +-
 .../src/components/StdDataEntry/style.less    |   7 +
 frontend/src/layouts/BaseLayout.vue           | 122 +++++++++---------
 frontend/src/layouts/HeaderLayout.vue         |   2 +-
 frontend/src/views/dashboard/DashBoard.vue    |  12 +-
 6 files changed, 85 insertions(+), 72 deletions(-)
 create mode 100644 frontend/src/components/StdDataEntry/style.less

diff --git a/frontend/src/components/StdDataDisplay/StdTable.vue b/frontend/src/components/StdDataDisplay/StdTable.vue
index 0244dd1b..37dc888e 100644
--- a/frontend/src/components/StdDataDisplay/StdTable.vue
+++ b/frontend/src/components/StdDataDisplay/StdTable.vue
@@ -176,7 +176,9 @@ const reset_search = async () => {
             layout="inline"
         >
             <template #action>
-                <a-button @click="reset_search">重置</a-button>
+                <div class="reset-btn">
+                    <a-button @click="reset_search">重置</a-button>
+                </div>
             </template>
         </std-data-entry>
         <a-table
@@ -238,4 +240,11 @@ const reset_search = async () => {
         // overflow-x: scroll;
     }
 }
+
+.reset-btn {
+    // min-height: 50px;
+    height: 100%;
+    display: flex;
+    align-items: flex-end;
+}
 </style>
diff --git a/frontend/src/components/StdDataEntry/StdDataEntry.tsx b/frontend/src/components/StdDataEntry/StdDataEntry.tsx
index 04ee6c49..883fe1ee 100644
--- a/frontend/src/components/StdDataEntry/StdDataEntry.tsx
+++ b/frontend/src/components/StdDataEntry/StdDataEntry.tsx
@@ -1,5 +1,6 @@
 import {defineComponent} from 'vue'
 import {Form, FormItem} from 'ant-design-vue'
+import './style.less'
 
 export default defineComponent({
     props: ['dataList', 'dataSource', 'error', 'layout'],
@@ -18,7 +19,7 @@ export default defineComponent({
             })
 
             if (slots.action) {
-                template.push(<div>{slots.action()}</div>)
+                template.push(<div class={'std-data-entry-action'}>{slots.action()}</div>)
             }
 
             return <Form layout={props.layout || 'vertical'}>{template}</Form>
diff --git a/frontend/src/components/StdDataEntry/style.less b/frontend/src/components/StdDataEntry/style.less
new file mode 100644
index 00000000..09b6cddd
--- /dev/null
+++ b/frontend/src/components/StdDataEntry/style.less
@@ -0,0 +1,7 @@
+.std-data-entry-action {
+    @media (max-width: 350px) {
+        display: block;
+        width: 100%;
+        margin: 10px 0;
+    }
+}
diff --git a/frontend/src/layouts/BaseLayout.vue b/frontend/src/layouts/BaseLayout.vue
index 0f2f610d..443573f4 100644
--- a/frontend/src/layouts/BaseLayout.vue
+++ b/frontend/src/layouts/BaseLayout.vue
@@ -1,19 +1,60 @@
+<script setup lang="ts">
+import HeaderLayout from './HeaderLayout.vue'
+import SideBar from './SideBar.vue'
+import FooterLayout from './FooterLayout.vue'
+import PageHeader from '@/components/PageHeader/PageHeader.vue'
+import zh_CN from 'ant-design-vue/es/locale/zh_CN'
+import zh_TW from 'ant-design-vue/es/locale/zh_TW'
+import en_US from 'ant-design-vue/es/locale/en_US'
+import {computed, ref} from 'vue'
+import _ from 'lodash'
+
+import gettext from '@/gettext'
+
+const drawer_visible = ref(false)
+const collapsed = ref(collapse())
+const clientWidth = ref(getClientWidth())
+
+addEventListener('resize', _.throttle(() => {
+    collapsed.value = collapse()
+}, 50))
+
+function getClientWidth() {
+    return document.body.clientWidth
+}
+
+function collapse() {
+    return getClientWidth() < 768
+}
+
+const lang = computed(() => {
+    switch (gettext.current) {
+        case 'zh_CN':
+            return zh_CN
+        case 'zh_TW':
+            return zh_TW
+        default:
+            return en_US
+    }
+})
+
+</script>
 <template>
     <a-config-provider :locale="lang">
         <a-layout style="min-height: 100%;">
-            <a-drawer
-                v-show="clientWidth<512"
-                :closable="false"
-                :visible="collapsed"
-                placement="left"
-                @close="collapsed=false"
-            >
-                <side-bar/>
-            </a-drawer>
+            <template v-show="clientWidth.value<512">
+                <a-drawer
+                    :closable="false"
+                    v-model:visible="drawer_visible"
+                    placement="left"
+                    @close="drawer_visible=false"
+                >
+                    <side-bar/>
+                </a-drawer>
+            </template>
 
             <a-layout-sider
-                v-show="clientWidth>=512"
-                v-model="collapsed"
+                v-model:collapsed="collapsed"
                 :collapsible="true"
                 :style="{zIndex: 11}"
                 theme="light"
@@ -24,7 +65,7 @@
 
             <a-layout>
                 <a-layout-header :style="{position: 'fixed', zIndex: 10, width:'100%'}">
-                    <header-layout @clickUnFold="collapsed=true"/>
+                    <header-layout @clickUnFold="drawer_visible=true"/>
                 </a-layout-header>
 
                 <a-layout-content>
@@ -43,59 +84,14 @@
     </a-config-provider>
 </template>
 
-<script>
-import HeaderLayout from './HeaderLayout.vue'
-import SideBar from './SideBar.vue'
-import FooterLayout from './FooterLayout.vue'
-import PageHeader from '@/components/PageHeader/PageHeader.vue'
-import zh_CN from 'ant-design-vue/es/locale/zh_CN'
-import zh_TW from 'ant-design-vue/es/locale/zh_TW'
-import en_US from 'ant-design-vue/es/locale/en_US'
-
-export default {
-    name: 'BaseLayout',
-    data() {
-        return {
-            collapsed: this.collapse(),
-            clientWidth: document.body.clientWidth,
-        }
-    },
-    mounted() {
-        window.onresize = () => {
-            this.collapsed = this.collapse()
-            this.clientWidth = this.getClientWidth()
-        }
-    },
-    components: {
-        SideBar,
-        PageHeader,
-        HeaderLayout,
-        FooterLayout
-    },
-    methods: {
-        getClientWidth() {
-            return document.body.clientWidth
-        },
-        collapse() {
-            return !(this.getClientWidth() > 768 || this.getClientWidth() < 512)
-        }
-    },
-    computed: {
-        lang: {
-            get() {
-                switch (this.$language.current) {
-                    case 'zh_CN':
-                        return zh_CN
-                    case 'zh_TW':
-                        return zh_TW
-                    default:
-                        return en_US
-                }
-            }
-        }
+<style lang="less" scoped>
+.layout-sider {
+    @media (max-width: 600px) {
+        display: none;
     }
 }
-</script>
+</style>
+
 <style lang="less">
 .layout-sider .sidebar {
     //position: fixed;
diff --git a/frontend/src/layouts/HeaderLayout.vue b/frontend/src/layouts/HeaderLayout.vue
index e4d1cbbd..4a322771 100644
--- a/frontend/src/layouts/HeaderLayout.vue
+++ b/frontend/src/layouts/HeaderLayout.vue
@@ -68,7 +68,7 @@ function logout() {
 .tool {
     position: fixed;
     left: 20px;
-    @media (min-width: 512px) {
+    @media (min-width: 600px) {
         display: none;
     }
 }
diff --git a/frontend/src/views/dashboard/DashBoard.vue b/frontend/src/views/dashboard/DashBoard.vue
index f468cdc0..2b51afe4 100644
--- a/frontend/src/views/dashboard/DashBoard.vue
+++ b/frontend/src/views/dashboard/DashBoard.vue
@@ -131,7 +131,7 @@ function wsOnMessage(m: { data: any }) {
 <template>
     <div>
         <a-row :gutter="[16,16]" class="first-row">
-            <a-col :xl="7" :lg="24" :md="24">
+            <a-col :xl="7" :lg="24" :md="24" :xs="24">
                 <a-card :title="$gettext('Server Info')" :bordered="false">
                     <p>
                         <translate>Uptime:</translate>
@@ -155,7 +155,7 @@ function wsOnMessage(m: { data: any }) {
                     </p>
                 </a-card>
             </a-col>
-            <a-col :xl="10" :lg="16" :md="24" class="chart_dashboard">
+            <a-col :xl="10" :lg="16" :md="24" :xs="24" class="chart_dashboard">
                 <a-card :title="$gettext('Memory and Storage')" :bordered="false">
                     <a-row :gutter="[0,16]">
                         <a-col :xs="24" :sm="24" :md="8">
@@ -174,7 +174,7 @@ function wsOnMessage(m: { data: any }) {
                     </a-row>
                 </a-card>
             </a-col>
-            <a-col :xl="7" :lg="8" :sm="24" class="chart_dashboard">
+            <a-col :xl="7" :lg="8" :sm="24" :xs="24" class="chart_dashboard">
                 <a-card :title="$gettext('Network Statistics')" :bordered="false">
                     <a-row :gutter="16">
                         <a-col :span="12">
@@ -190,7 +190,7 @@ function wsOnMessage(m: { data: any }) {
             </a-col>
         </a-row>
         <a-row class="row-two" :gutter="[16,32]">
-            <a-col :xl="8" :lg="24" :md="24" :sm="24">
+            <a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
                 <a-card :title="$gettext('CPU Status')" :bordered="false">
                     <a-statistic :value="cpu" title="CPU">
                         <template v-slot:suffix>
@@ -200,7 +200,7 @@ function wsOnMessage(m: { data: any }) {
                     <area-chart :series="cpu_analytic_series" :max="100"/>
                 </a-card>
             </a-col>
-            <a-col :xl="8" :lg="12" :md="24" :sm="24">
+            <a-col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
                 <a-card :title="$gettext('Network')">
                     <a-row :gutter="16">
                         <a-col :span="12">
@@ -222,7 +222,7 @@ function wsOnMessage(m: { data: any }) {
                     <area-chart :series="net_analytic" :y_formatter="net_formatter"/>
                 </a-card>
             </a-col>
-            <a-col :xl="8" :lg="12" :md="24" :sm="24">
+            <a-col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
                 <a-card :title="$gettext('Disk IO')">
                     <a-row :gutter="16">
                         <a-col :span="12">