From f6475e7c7fc56ca23fcba29b136c3a7b53825e12 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Wed, 18 Dec 2024 16:48:15 +0800
Subject: [PATCH] style(website): Update Nginx Status Page Styling (#7423)

---
 agent/app/dto/response/nginx.go               | 14 +--
 agent/app/service/nginx.go                    | 36 ++++++--
 frontend/src/api/interface/nginx.ts           | 14 +--
 frontend/src/components/app-status/index.vue  |  2 +-
 frontend/src/components/back-button/index.vue | 19 +---
 .../src/components/layout-content/index.vue   | 52 +++++------
 .../website/website/nginx/status/index.vue    | 91 ++++++++-----------
 7 files changed, 108 insertions(+), 120 deletions(-)

diff --git a/agent/app/dto/response/nginx.go b/agent/app/dto/response/nginx.go
index 4a48e654a..f848c83f2 100644
--- a/agent/app/dto/response/nginx.go
+++ b/agent/app/dto/response/nginx.go
@@ -3,13 +3,13 @@ package response
 import "github.com/1Panel-dev/1Panel/agent/app/dto"
 
 type NginxStatus struct {
-	Active   string `json:"active"`
-	Accepts  string `json:"accepts"`
-	Handled  string `json:"handled"`
-	Requests string `json:"requests"`
-	Reading  string `json:"reading"`
-	Writing  string `json:"writing"`
-	Waiting  string `json:"waiting"`
+	Active   int `json:"active"`
+	Accepts  int `json:"accepts"`
+	Handled  int `json:"handled"`
+	Requests int `json:"requests"`
+	Reading  int `json:"reading"`
+	Writing  int `json:"writing"`
+	Waiting  int `json:"waiting"`
 }
 
 type NginxParam struct {
diff --git a/agent/app/service/nginx.go b/agent/app/service/nginx.go
index bc07e31e4..5bbc56fc4 100644
--- a/agent/app/service/nginx.go
+++ b/agent/app/service/nginx.go
@@ -12,6 +12,7 @@ import (
 	"net/http"
 	"os"
 	"path"
+	"strconv"
 	"strings"
 	"time"
 
@@ -94,13 +95,34 @@ func (n NginxService) GetStatus() (response.NginxStatus, error) {
 	}
 	var status response.NginxStatus
 	resArray := strings.Split(string(content), " ")
-	status.Active = resArray[2]
-	status.Accepts = resArray[7]
-	status.Handled = resArray[8]
-	status.Requests = resArray[9]
-	status.Reading = resArray[11]
-	status.Writing = resArray[13]
-	status.Waiting = resArray[15]
+	active, err := strconv.Atoi(resArray[2])
+	if err == nil {
+		status.Active = active
+	}
+	accepts, err := strconv.Atoi(resArray[7])
+	if err == nil {
+		status.Accepts = accepts
+	}
+	handled, err := strconv.Atoi(resArray[8])
+	if err == nil {
+		status.Handled = handled
+	}
+	requests, err := strconv.Atoi(resArray[9])
+	if err == nil {
+		status.Requests = requests
+	}
+	reading, err := strconv.Atoi(resArray[11])
+	if err == nil {
+		status.Reading = reading
+	}
+	writing, err := strconv.Atoi(resArray[13])
+	if err == nil {
+		status.Writing = writing
+	}
+	waiting, err := strconv.Atoi(resArray[15])
+	if err == nil {
+		status.Waiting = waiting
+	}
 	return status, nil
 }
 
diff --git a/frontend/src/api/interface/nginx.ts b/frontend/src/api/interface/nginx.ts
index aba13b71e..e4edf06b2 100644
--- a/frontend/src/api/interface/nginx.ts
+++ b/frontend/src/api/interface/nginx.ts
@@ -15,13 +15,13 @@ export namespace Nginx {
     }
 
     export interface NginxStatus {
-        accepts: string;
-        handled: string;
-        active: string;
-        requests: string;
-        reading: string;
-        writing: string;
-        waiting: string;
+        accepts: number;
+        handled: number;
+        active: number;
+        requests: number;
+        reading: number;
+        writing: number;
+        waiting: number;
     }
 
     export interface NginxFileUpdate {
diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index 465595738..3c1f9777f 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -5,7 +5,7 @@
                 <div class="flex flex-wrap gap-4">
                     <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
                     <Status :key="refresh" :status="data.status"></Status>
-                    <el-tag>{{ $t('app.version') }}{{ $t('commons.colon') }}{{ data.version }}</el-tag>
+                    <el-tag>{{ $t('app.version') }}{{ data.version }}</el-tag>
                 </div>
 
                 <div class="mt-0.5">
diff --git a/frontend/src/components/back-button/index.vue b/frontend/src/components/back-button/index.vue
index 0085f2fae..65dc1a583 100644
--- a/frontend/src/components/back-button/index.vue
+++ b/frontend/src/components/back-button/index.vue
@@ -1,24 +1,17 @@
 <template>
     <el-page-header :content="header" @back="jump">
         <template v-if="slots.buttons" #content>
-            <span>{{ header }}</span>
-            <span v-if="!mobile">
-                <el-divider direction="vertical" />
-                <slot name="buttons"></slot>
-            </span>
+            <!-- <span>{{ header }}</span> -->
+            <!-- <el-divider direction="vertical" /> -->
+            <slot name="buttons"></slot>
         </template>
     </el-page-header>
-    <template v-if="slots.buttons && mobile">
-        <slot name="buttons"></slot>
-    </template>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useSlots } from 'vue';
+import { inject, useSlots } from 'vue';
 import { useRouter } from 'vue-router';
-import { GlobalStore } from '@/store';
 
-const globalStore = GlobalStore();
 const slots = useSlots();
 const router = useRouter();
 const props = defineProps({
@@ -45,8 +38,4 @@ function jump() {
 }
 
 let reloadPage: Function = inject('reload');
-
-const mobile = computed(() => {
-    return globalStore.isMobile();
-});
 </script>
diff --git a/frontend/src/components/layout-content/index.vue b/frontend/src/components/layout-content/index.vue
index f97af4752..ac6701c9c 100644
--- a/frontend/src/components/layout-content/index.vue
+++ b/frontend/src/components/layout-content/index.vue
@@ -21,36 +21,32 @@
             <el-card>
                 <div class="content-container__title">
                     <slot name="title">
-                        <div v-if="showBack">
-                            <div class="flex flex-wrap gap-4 sm:justify-between">
-                                <div class="flex gap-2 flex-wrap items-center justify-start">
-                                    <back-button
-                                        :path="backPath"
-                                        :name="backName"
-                                        :to="backTo"
-                                        :header="title"
-                                        :reload="reload"
-                                    >
-                                        <template v-if="slots.leftToolBar" #buttons>
-                                            <slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
-                                        </template>
-                                    </back-button>
-                                </div>
-                                <div class="flex flex-wrap gap-3">
-                                    <slot name="rightToolBar" v-if="slots.rightToolBar"></slot>
-                                </div>
+                        <div v-if="showBack" class="flex flex-wrap gap-4 sm:justify-between">
+                            <back-button
+                                :path="backPath"
+                                :name="backName"
+                                :to="backTo"
+                                :header="title"
+                                :reload="reload"
+                            >
+                                <template v-if="slots.leftToolBar" #buttons>
+                                    <div class="flex flex-wrap gap-2 items-center justify-start">
+                                        <slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
+                                    </div>
+                                </template>
+                            </back-button>
+                            <div class="flex flex-wrap gap-3">
+                                <slot name="rightToolBar" v-if="slots.rightToolBar"></slot>
                             </div>
                         </div>
-                        <div v-else>
-                            <div class="flex flex-wrap gap-4 sm:justify-between">
-                                <div class="flex gap-2 flex-wrap items-center justify-start">
-                                    <slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
-                                    <slot name="buttons" v-if="slots.buttons"></slot>
-                                </div>
-                                <div class="flex flex-wrap gap-3" v-if="slots.rightToolBar || slots.rightButton">
-                                    <slot name="rightToolBar"></slot>
-                                    <slot name="rightButton"></slot>
-                                </div>
+                        <div v-else class="flex flex-wrap gap-4 sm:justify-between">
+                            <div class="flex gap-2 flex-wrap items-center justify-start">
+                                <slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
+                                <slot name="buttons" v-if="slots.buttons"></slot>
+                            </div>
+                            <div class="flex flex-wrap gap-3" v-if="slots.rightToolBar || slots.rightButton">
+                                <slot name="rightToolBar"></slot>
+                                <slot name="rightButton"></slot>
                             </div>
                         </div>
 
diff --git a/frontend/src/views/website/website/nginx/status/index.vue b/frontend/src/views/website/website/nginx/status/index.vue
index 3a042585c..c72c10e80 100644
--- a/frontend/src/views/website/website/nginx/status/index.vue
+++ b/frontend/src/views/website/website/nginx/status/index.vue
@@ -1,53 +1,28 @@
 <template>
     <div>
-        <el-form label-position="top">
-            <el-row type="flex" style="margin-left: 50px" justify="center">
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('nginx.connections') }}</span>
-                    </template>
-                    <span class="status-count">{{ data.active }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('nginx.accepts') }}</span>
-                    </template>
-                    <span class="status-count">{{ data.accepts }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('nginx.handled') }}</span>
-                    </template>
-                    <span class="status-count">{{ data.handled }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('nginx.requests') }}</span>
-                    </template>
-                    <span class="status-count">{{ data.requests }}</span>
-                </el-form-item>
-
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('nginx.reading') }}</span>
-                    </template>
-                    <span class="status-count">{{ data.reading }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('nginx.writing') }}</span>
-                    </template>
-                    <span class="status-count">{{ data.writing }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%">
-                    <template #label>
-                        <span class="status-label">{{ $t('nginx.waiting') }}</span>
-                    </template>
-                    <span class="status-count">{{ data.waiting }}</span>
-                </el-form-item>
-                <el-form-item style="width: 25%" />
-            </el-row>
-        </el-form>
+        <el-row>
+            <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
+                <el-statistic :title="$t('nginx.connections')" :value="data.active" />
+            </el-col>
+            <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
+                <el-statistic :title="$t('nginx.accepts')" :value="data.accepts" />
+            </el-col>
+            <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
+                <el-statistic :title="$t('nginx.handled')" :value="data.handled" />
+            </el-col>
+            <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
+                <el-statistic :title="$t('nginx.requests')" :value="data.requests" />
+            </el-col>
+            <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
+                <el-statistic :title="$t('nginx.reading')" :value="data.reading" />
+            </el-col>
+            <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
+                <el-statistic :title="$t('nginx.writing')" :value="data.writing" />
+            </el-col>
+            <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
+                <el-statistic :title="$t('nginx.waiting')" :value="data.waiting" />
+            </el-col>
+        </el-row>
     </div>
 </template>
 
@@ -64,13 +39,13 @@ const props = defineProps({
 });
 
 let data = ref<Nginx.NginxStatus>({
-    accepts: '',
-    handled: '',
-    requests: '',
-    reading: '',
-    waiting: '',
-    writing: '',
-    active: '',
+    accepts: 0,
+    handled: 0,
+    requests: 0,
+    reading: 0,
+    waiting: 0,
+    writing: 0,
+    active: 0,
 });
 
 const get = async () => {
@@ -85,3 +60,9 @@ onMounted(() => {
     get();
 });
 </script>
+
+<style scoped>
+.el-col {
+    text-align: center;
+}
+</style>