From 880ac3ec558472ae4523a70641373c524f993f13 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Sun, 4 Dec 2022 18:17:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=9F=E4=B8=80=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/app-status/index.vue |  5 ++-
 frontend/src/components/status/index.vue     | 32 ++++++++++++++++++++
 frontend/src/lang/modules/zh.ts              |  5 +++
 frontend/src/views/website/website/index.vue |  7 ++++-
 4 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/status/index.vue

diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index 8195602f7..955e97166 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -17,7 +17,9 @@
                     <el-col :lg="4" :xl="2">
                         <div>
                             {{ $t('commons.table.status') }}:
-                            <el-tag type="success">{{ data.status }}</el-tag>
+                            <el-tag type="info">
+                                <Status :status="data.status"></Status>
+                            </el-tag>
                         </div>
                     </el-col>
                     <el-col :lg="8" :xl="4">
@@ -50,6 +52,7 @@ import i18n from '@/lang';
 import router from '@/routers';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { onMounted, reactive, ref } from 'vue';
+import Status from '@/components/status/index.vue';
 
 const props = defineProps({
     appKey: {
diff --git a/frontend/src/components/status/index.vue b/frontend/src/components/status/index.vue
new file mode 100644
index 000000000..7f3882517
--- /dev/null
+++ b/frontend/src/components/status/index.vue
@@ -0,0 +1,32 @@
+<template>
+    <span :style="{ color: getColor(status) }">
+        {{ $t('commons.status.' + status) }}
+    </span>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+const props = defineProps({
+    status: {
+        type: String,
+        default: 'runnning',
+    },
+});
+let status = ref('');
+
+const getColor = (status: string) => {
+    switch (status) {
+        case 'running':
+            return '#00c957';
+        case 'error':
+            return '#ff0000';
+        default:
+            return '';
+    }
+};
+
+onMounted(() => {
+    status.value = props.status.toLocaleLowerCase();
+});
+</script>
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index db170171f..b4ea2367d 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -128,6 +128,11 @@ export default {
             changePassword: '修改密码',
             logout: '退出登录',
         },
+        status: {
+            running: '已启动',
+            stopped: '已停止',
+            error: '失败',
+        },
     },
     menu: {
         home: '概览',
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index 83933f194..803bedf33 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -27,7 +27,11 @@
                                 {{ $t('website.' + row.type) }}
                             </template>
                         </el-table-column>
-                        <el-table-column :label="$t('commons.table.status')" prop="status"></el-table-column>
+                        <el-table-column :label="$t('commons.table.status')" prop="status">
+                            <template #default="{ row }">
+                                <Status :status="row.status"></Status>
+                            </template>
+                        </el-table-column>
                         <el-table-column :label="$t('website.remark')" prop="remark"></el-table-column>
                         <el-table-column :label="$t('website.protocol')" prop="protocol"></el-table-column>
                         <el-table-column :label="$t('website.expireDate')">
@@ -74,6 +78,7 @@ import { WebSite } from '@/api/interface/website';
 import AppStatus from '@/components/app-status/index.vue';
 import NginxConfig from './nginx/index.vue';
 import { dateFromat } from '@/utils/util';
+import Status from '@/components/status/index.vue';
 
 import i18n from '@/lang';
 import router from '@/routers';