From 0f7c915ca796b1c2de43880aaaaffe7f2228f31a Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Fri, 3 Feb 2023 17:52:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/card-with-header/index.vue |  42 +++-
 frontend/src/views/home/app/index.vue         | 225 +++++++-----------
 frontend/src/views/home/index.vue             | 186 ++++++++++-----
 3 files changed, 246 insertions(+), 207 deletions(-)

diff --git a/frontend/src/components/card-with-header/index.vue b/frontend/src/components/card-with-header/index.vue
index eb7c87319..46169fe56 100644
--- a/frontend/src/components/card-with-header/index.vue
+++ b/frontend/src/components/card-with-header/index.vue
@@ -1,9 +1,14 @@
 <template>
     <div>
-        <el-card :style="{ height: height }">
-            <el-divider direction="vertical" />
-            <span style="font-size: 16px; font-weight: 700">{{ header }}</span>
-            <div style="margin-top: 20px"><slot name="body" /></div>
+        <el-card :style="{ height: height }" class="home-card">
+            <div class="header">
+                <span></span>
+                <span>{{ header }}</span>
+            </div>
+
+            <div>
+                <slot name="body" />
+            </div>
         </el-card>
     </div>
 </template>
@@ -17,13 +22,26 @@ defineProps({
 </script>
 
 <style scoped lang="scss">
-.el-divider--vertical {
-    display: inline-block;
-    width: 1px;
-    height: 2.5em;
-    margin: 0px 8px;
-    vertical-align: middle;
-    position: relative;
-    border-left: 5px #0054e1 var(--el-border-style);
+.home-card {
+    .header {
+        span:first-child {
+            background: $primary-color;
+            border-radius: 7px;
+            flex: none;
+            order: 0;
+            flex-grow: 0;
+            padding: 3px;
+        }
+
+        span:nth-child(2) {
+            font-size: 18px;
+            font-weight: 700;
+            margin-left: 10px;
+        }
+    }
+
+    div:nth-child(2) {
+        margin-top: 20px;
+    }
 }
 </style>
diff --git a/frontend/src/views/home/app/index.vue b/frontend/src/views/home/app/index.vue
index efef1ee01..8c07f4b24 100644
--- a/frontend/src/views/home/app/index.vue
+++ b/frontend/src/views/home/app/index.vue
@@ -1,140 +1,52 @@
 <template>
     <div>
-        <el-row style="margin-top: 30px">
-            <el-col :span="4" align="right">
-                <img style="width: 40px; height: 40px" src="../images/halo.jpg" alt="" />
-            </el-col>
-            <el-col :span="1"><br /></el-col>
-            <el-col :span="19">
-                <span style="font-size: 20px">Halo</span>
-                <el-button
-                    round
-                    plain
-                    type="primary"
-                    @click="goInstall()"
-                    style="float: right; margin-top: 15px; margin-right: 10px"
-                >
-                    {{ $t('app.install') }}
-                </el-button>
-                <div>
-                    <span style="font-size: 12px">{{ $t('home.haloInfo') }}</span>
-                    <el-divider />
-                </div>
-            </el-col>
-        </el-row>
-        <el-row style="margin-top: 15px">
-            <el-col :span="4" align="right">
-                <img style="width: 40px; height: 40px" src="../images/de.jpg" alt="" />
-            </el-col>
-            <el-col :span="1"><br /></el-col>
-            <el-col :span="19">
-                <span style="font-size: 20px">Dataease</span>
-                <el-button
-                    round
-                    plain
-                    @click="goInstall()"
-                    type="primary"
-                    style="float: right; margin-top: 15px; margin-right: 10px"
-                >
-                    {{ $t('app.install') }}
-                </el-button>
-                <div>
-                    <span style="font-size: 12px">{{ $t('home.deInfo') }}</span>
-                    <el-divider />
-                </div>
-            </el-col>
-        </el-row>
-        <el-row style="margin-top: 15px">
-            <el-col :span="4" align="right">
-                <img style="width: 40px; height: 40px" src="../images/js.jpg" alt="" />
-            </el-col>
-            <el-col :span="1"><br /></el-col>
-            <el-col :span="19">
-                <span style="font-size: 20px">JumpServer</span>
-                <el-button
-                    round
-                    plain
-                    @click="goInstall()"
-                    type="primary"
-                    style="float: right; margin-top: 15px; margin-right: 10px"
-                >
-                    {{ $t('app.install') }}
-                </el-button>
-                <div>
-                    <span style="font-size: 12px">{{ $t('home.jsInfo') }}</span>
-                    <el-divider />
-                </div>
-            </el-col>
-        </el-row>
-        <el-row style="margin-top: 15px">
-            <el-col :span="4" align="right">
-                <img style="width: 40px; height: 40px" src="../images/ms.jpg" alt="" />
-            </el-col>
-            <el-col :span="1"><br /></el-col>
-            <el-col :span="19">
-                <span style="font-size: 20px">MeterSphere</span>
-                <el-button
-                    round
-                    plain
-                    @click="goInstall()"
-                    type="primary"
-                    style="float: right; margin-top: 15px; margin-right: 10px"
-                >
-                    {{ $t('app.install') }}
-                </el-button>
-                <div>
-                    <span style="font-size: 12px">{{ $t('home.msInfo') }}</span>
-                    <el-divider />
-                </div>
-            </el-col>
-        </el-row>
-        <el-row style="margin-top: 15px">
-            <el-col :span="4" align="right">
-                <img style="width: 40px; height: 40px" src="../images/ko.jpg" alt="" />
-            </el-col>
-            <el-col :span="1"><br /></el-col>
-            <el-col :span="19">
-                <span style="font-size: 20px">KubeOperator</span>
-                <el-button round plain type="primary" style="float: right; margin-top: 15px; margin-right: 10px">
-                    {{ $t('app.install') }}
-                </el-button>
-                <div>
-                    <span style="font-size: 12px">{{ $t('home.koInfo') }}</span>
-                    <el-divider />
-                </div>
-            </el-col>
-        </el-row>
-        <el-row style="margin-top: 15px">
-            <el-col :span="4" align="right">
-                <img style="width: 40px; height: 40px" src="../images/kubepi.jpg" alt="" />
-            </el-col>
-            <el-col :span="1"><br /></el-col>
-            <el-col :span="19">
-                <span style="font-size: 20px">KubePi</span>
-                <el-button
-                    round
-                    plain
-                    @click="goInstall()"
-                    type="primary"
-                    style="float: right; margin-top: 15px; margin-right: 10px"
-                >
-                    {{ $t('app.install') }}
-                </el-button>
-                <div>
-                    <span style="font-size: 12px">{{ $t('home.kubepiInfo') }}</span>
-                    <el-divider />
-                </div>
-            </el-col>
-        </el-row>
+        <el-scrollbar max-height="500px">
+            <div class="h-app-card" v-for="(app, index) in apps" :key="index">
+                <el-row :gutter="10">
+                    <el-col :span="5">
+                        <div>
+                            <el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
+                        </div>
+                    </el-col>
+                    <el-col :span="15">
+                        <div class="h-app-content">
+                            <div>
+                                <span class="h-app-title">{{ app.name }}</span>
+                            </div>
+                            <div class="h-app-desc">
+                                <span>
+                                    {{ app.shortDesc }}
+                                </span>
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="2">
+                        <el-button class="h-app-button" type="primary" plain round size="small" @click="goInstall">
+                            {{ $t('app.install') }}
+                        </el-button>
+                    </el-col>
+                </el-row>
+                <div class="h-app-divider"></div>
+            </div>
+        </el-scrollbar>
     </div>
 </template>
 
 <script lang="ts" setup>
+import { App } from '@/api/interface/app';
 import { Dashboard } from '@/api/interface/dashboard';
-import { ref } from 'vue';
+import { SearchApp } from '@/api/modules/app';
+import { reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter();
 
+let req = reactive({
+    name: '',
+    tags: [],
+    page: 1,
+    pageSize: 50,
+});
+
 const baseInfo = ref({
     haloID: 0,
     dateeaseID: 0,
@@ -144,6 +56,9 @@ const baseInfo = ref({
     kubepiID: 0,
 });
 
+let loading = ref(false);
+let apps = ref<App.App[]>([]);
+
 const acceptParams = (base: Dashboard.BaseInfo): void => {
     baseInfo.value.haloID = base.haloID;
     baseInfo.value.dateeaseID = base.dateeaseID;
@@ -151,23 +66,65 @@ const acceptParams = (base: Dashboard.BaseInfo): void => {
     baseInfo.value.metersphereID = base.metersphereID;
     baseInfo.value.kubeoperatorID = base.kubeoperatorID;
     baseInfo.value.kubepiID = base.kubepiID;
+
+    search(req);
 };
 
 const goInstall = () => {
     router.push({ name: 'App' });
 };
 
+const search = async (req: App.AppReq) => {
+    loading.value = true;
+    await SearchApp(req)
+        .then((res) => {
+            apps.value = res.data.items;
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+};
+
 defineExpose({
     acceptParams,
 });
 </script>
 
-<style scoped lang="scss">
-.el-divider--horizontal {
-    display: block;
-    height: 1px;
-    width: 100%;
-    margin: 7px 0;
-    border-top: 1px var(--el-border-color) var(--el-border-style);
+<style lang="scss">
+.h-app-card {
+    cursor: pointer;
+    padding: 15px;
+
+    .h-app-content {
+        .h-app-title {
+            font-weight: 500;
+            font-size: 16px;
+        }
+
+        .h-app-desc {
+            span {
+                font-weight: 400;
+                font-size: 14px;
+                color: #646a73;
+            }
+        }
+    }
+    .h-app-button {
+        margin-top: 10px;
+    }
+}
+
+.h-app-divider {
+    margin-top: 5px;
+    border: 0;
+    border-top: 1px solid #f2f2f2;
+}
+
+.h-app-card:hover {
+    background-color: rgba(0, 94, 235, 0.03);
+}
+
+.el-avatar {
+    --el-avatar-bg-color: #ffffff;
 }
 </style>
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index a5592f883..ba2e7b08a 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -10,52 +10,48 @@
         />
         <el-row :gutter="20" style="margin-top: 20px">
             <el-col :span="16">
-                <CardWithHeader :header="$t('home.overview')" height="150px">
+                <CardWithHeader :header="$t('home.overview')" height="160px">
                     <template #body>
-                        <el-form label-position="top" label-width="100px">
-                            <el-row :gutter="20">
-                                <el-col :span="6" align="center">
-                                    <span style="font-size: 16px">{{ $t('menu.website') }}</span>
-                                    <div>
-                                        <el-link style="font-size: 24px" @click="goRouter('/websites')" type="primary">
-                                            {{ baseInfo?.websiteNumber }}
-                                        </el-link>
+                        <div class="h-overview">
+                            <el-row>
+                                <el-col :span="6">
+                                    <span>{{ $t('menu.website') }}</span>
+                                    <div class="count">
+                                        <span @click="goRouter('/websites')">{{ baseInfo?.websiteNumber }}</span>
                                     </div>
                                 </el-col>
-                                <el-col :span="6" align="center">
-                                    <span style="font-size: 16px">{{ $t('menu.database') }}</span>
-                                    <div>
-                                        <el-link style="font-size: 24px" @click="goRouter('/databases')" type="primary">
-                                            {{ baseInfo?.databaseNumber }}
-                                        </el-link>
+                                <el-col :span="6">
+                                    <span>{{ $t('menu.database') }}</span>
+                                    <div class="count">
+                                        <span @click="goRouter('/databases')">{{ baseInfo?.databaseNumber }}</span>
                                     </div>
                                 </el-col>
-                                <el-col :span="6" align="center">
-                                    <span style="font-size: 16px">{{ $t('menu.cronjob') }}</span>
-                                    <div>
-                                        <el-link style="font-size: 24px" @click="goRouter('/cronjobs')" type="primary">
+                                <el-col :span="6">
+                                    <span>{{ $t('menu.cronjob') }}</span>
+                                    <div class="count">
+                                        <span @click="goRouter('/cronjobs')">
                                             {{ baseInfo?.cronjobNumber }}
-                                        </el-link>
+                                        </span>
                                     </div>
                                 </el-col>
-                                <el-col :span="6" align="center">
-                                    <span style="font-size: 16px">{{ $t('home.appInstalled') }}</span>
-                                    <div>
-                                        <el-link style="font-size: 24px" @click="goRouter('/apps')" type="primary">
+                                <el-col :span="6">
+                                    <span>{{ $t('home.appInstalled') }}</span>
+                                    <div class="count">
+                                        <span @click="goRouter('/apps')">
                                             {{ baseInfo?.appInstalldNumber }}
-                                        </el-link>
+                                        </span>
                                     </div>
                                 </el-col>
                             </el-row>
-                        </el-form>
+                        </div>
                     </template>
                 </CardWithHeader>
-                <CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px" height="280px">
+                <CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px" height="265px">
                     <template #body>
                         <Status ref="statuRef" />
                     </template>
                 </CardWithHeader>
-                <CardWithHeader :header="$t('menu.monitor')" style="margin-top: 20px" height="450px">
+                <CardWithHeader :header="$t('menu.monitor')" style="margin-top: 20px" height="465px">
                     <template #body>
                         <el-radio-group
                             style="float: right; margin-left: 5px"
@@ -81,29 +77,19 @@
                         >
                             <el-option v-for="item in ioOptions" :key="item" :label="item" :value="item" />
                         </el-select>
-                        <div style="margin-top: 20px; margin-left: 8px" v-if="chartOption === 'network'">
+                        <div class="monitor-tags" v-if="chartOption === 'network'">
                             <el-tag>{{ $t('monitor.up') }}: {{ currentChartInfo.netBytesSent }} KB/s</el-tag>
-                            <el-tag style="margin-left: 20px">
-                                {{ $t('monitor.down') }}: {{ currentChartInfo.netBytesRecv }} KB/s
-                            </el-tag>
-                            <el-tag style="margin-left: 20px">
-                                {{ $t('home.totalSend') }}: {{ computeSize(currentInfo.netBytesSent) }}
-                            </el-tag>
-                            <el-tag style="margin-left: 20px">
-                                {{ $t('home.totalRecv') }}: {{ computeSize(currentInfo.netBytesRecv) }}
-                            </el-tag>
+                            <el-tag>{{ $t('monitor.down') }}: {{ currentChartInfo.netBytesRecv }} KB/s</el-tag>
+                            <el-tag>{{ $t('home.totalSend') }}: {{ computeSize(currentInfo.netBytesSent) }}</el-tag>
+                            <el-tag>{{ $t('home.totalRecv') }}: {{ computeSize(currentInfo.netBytesRecv) }}</el-tag>
                         </div>
-                        <div style="margin-top: 20px" v-if="chartOption === 'io'">
+                        <div class="monitor-tags" v-if="chartOption === 'io'">
                             <el-tag>{{ $t('monitor.read') }}: {{ currentChartInfo.ioReadBytes }} MB</el-tag>
-                            <el-tag style="margin-left: 20px">
-                                {{ $t('monitor.write') }}: {{ currentChartInfo.ioWriteBytes }} MB
-                            </el-tag>
-                            <el-tag style="margin-left: 20px">
+                            <el-tag>{{ $t('monitor.write') }}: {{ currentChartInfo.ioWriteBytes }} MB</el-tag>
+                            <el-tag>
                                 {{ $t('home.rwPerSecond') }}: {{ currentChartInfo.ioCount }} {{ $t('home.time') }}
                             </el-tag>
-                            <el-tag style="margin-left: 20px">
-                                {{ $t('home.rwPerSecond') }}: {{ currentInfo.ioTime }} ms
-                            </el-tag>
+                            <el-tag>{{ $t('home.rwPerSecond') }}: {{ currentInfo.ioTime }} ms</el-tag>
                         </div>
                         <div
                             v-if="chartOption === 'io'"
@@ -119,28 +105,62 @@
                 </CardWithHeader>
             </el-col>
             <el-col :span="8">
-                <CardWithHeader :header="$t('home.systemInfo')" height="370px">
+                <CardWithHeader :header="$t('home.systemInfo')" height="330px">
                     <template #body>
-                        <el-form style="margin-left: 10px">
-                            <el-form-item style="margin-top: 15px" :label="$t('home.hostname')">
+                        <el-descriptions :column="1" class="h-systemInfo">
+                            <el-descriptions-item class-name="system-content">
+                                <template #label>
+                                    <span class="system-label">
+                                        {{ $t('home.hostname') }}
+                                    </span>
+                                </template>
                                 {{ baseInfo.hostname }}
-                            </el-form-item>
-                            <el-form-item :label="$t('home.platformVersion')">
+                            </el-descriptions-item>
+                            <el-descriptions-item class-name="system-content">
+                                <template #label>
+                                    <span class="system-label">
+                                        {{ $t('home.platformVersion') }}
+                                    </span>
+                                </template>
                                 {{ baseInfo.platform }}-{{ baseInfo.platformVersion }}
-                            </el-form-item>
-                            <el-form-item :label="$t('home.kernelVersion')">
+                            </el-descriptions-item>
+                            <el-descriptions-item class-name="system-content">
+                                <template #label>
+                                    <span class="system-label">
+                                        {{ $t('home.kernelVersion') }}
+                                    </span>
+                                </template>
                                 {{ baseInfo.kernelVersion }}
-                            </el-form-item>
-                            <el-form-item :label="$t('home.kernelArch')">{{ baseInfo.kernelArch }}</el-form-item>
-                            <el-form-item :label="$t('home.uptime')">{{ currentInfo.timeSinceUptime }}</el-form-item>
-                            <el-form-item :label="$t('home.runningTime')">
+                            </el-descriptions-item>
+                            <el-descriptions-item class-name="system-content">
+                                <template #label>
+                                    <span class="system-label">
+                                        {{ $t('home.kernelArch') }}
+                                    </span>
+                                </template>
+                                {{ baseInfo.kernelArch }}
+                            </el-descriptions-item>
+                            <el-descriptions-item class-name="system-content">
+                                <template #label>
+                                    <span class="system-label">
+                                        {{ $t('home.uptime') }}
+                                    </span>
+                                </template>
+                                {{ currentInfo.timeSinceUptime }}
+                            </el-descriptions-item>
+                            <el-descriptions-item class-name="system-content">
+                                <template #label>
+                                    <span class="system-label">
+                                        {{ $t('home.runningTime') }}
+                                    </span>
+                                </template>
                                 {{ loadUpTime(currentInfo.uptime) }}
-                            </el-form-item>
-                        </el-form>
+                            </el-descriptions-item>
+                        </el-descriptions>
                     </template>
                 </CardWithHeader>
 
-                <CardWithHeader :header="$t('home.app')" style="margin-top: 20px" height="532px">
+                <CardWithHeader :header="$t('home.app')" style="margin-top: 20px" height="581px">
                     <template #body>
                         <App ref="appRef" />
                     </template>
@@ -546,10 +566,54 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .el-form-item--small {
     --font-size: 14px;
     --el-form-label-font-size: var(--font-size);
     margin-bottom: 8px;
 }
+
+.h-overview {
+    text-align: center;
+
+    span:first-child {
+        font-size: 18px;
+        color: #646a73;
+    }
+
+    .count {
+        margin-top: 10px;
+        span {
+            font-size: 28px;
+            color: $primary-color;
+            font-weight: 500;
+            line-height: 32px;
+            cursor: pointer;
+        }
+    }
+}
+
+.h-systemInfo {
+    margin-left: 18px;
+}
+
+.system-label {
+    font-weight: 400 !important;
+    font-size: 16px !important;
+    color: #1f2329;
+}
+
+.system-content {
+    font-size: 15px !important;
+}
+
+.monitor-tags {
+    margin-top: 20px;
+    margin-left: 8px;
+
+    .el-tag {
+        margin-right: 10px;
+        margin-bottom: 10px;
+    }
+}
 </style>