From d443103e2c4b526df8169234ddb0138262ee10bd Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Thu, 11 May 2023 14:32:14 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E5=BA=94=E7=94=A8?=
 =?UTF-8?q?=E5=95=86=E5=BA=97=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/app-store/apps/index.vue   |  84 ++++----
 frontend/src/views/app-store/index.scss       |   9 +-
 .../src/views/app-store/installed/index.vue   | 193 +++++++++---------
 3 files changed, 155 insertions(+), 131 deletions(-)

diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index 8218e040d..c8a362a4a 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app')" :divider="true">
+    <LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app')">
         <template #toolbar>
             <el-row :gutter="5">
                 <el-col :span="20">
@@ -47,43 +47,48 @@
             <el-row :gutter="5">
                 <el-col v-for="(app, index) in apps" :key="index" :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                     <div class="app-card">
-                        <el-row :gutter="24">
-                            <el-col :xs="5" :sm="5" :md="6" :lg="6" :xl="5">
-                                <div class="app-icon">
-                                    <el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
-                                </div>
-                            </el-col>
-                            <el-col :xs="19" :sm="19" :md="18" :lg="18" :xl="19">
-                                <div class="app-content">
-                                    <div class="app-header">
-                                        <span class="app-title">{{ app.name }}</span>
-                                        <el-button
-                                            class="app-button"
-                                            type="primary"
-                                            plain
-                                            round
-                                            size="small"
-                                            @click="getAppDetail(app.key)"
-                                        >
-                                            {{ $t('app.install') }}
-                                        </el-button>
+                        <el-card class="e-card">
+                            <el-row :gutter="24">
+                                <el-col :xs="5" :sm="5" :md="6" :lg="6" :xl="5">
+                                    <div class="app-icon">
+                                        <el-avatar
+                                            shape="square"
+                                            :size="60"
+                                            :src="'data:image/png;base64,' + app.icon"
+                                        />
                                     </div>
-                                    <div class="app-desc">
-                                        <span class="desc">
-                                            {{ language == 'zh' ? app.shortDescZh : app.shortDescEn }}
-                                        </span>
-                                    </div>
-                                    <div class="app-tag">
-                                        <el-tag v-for="(tag, ind) in app.tags" :key="ind" style="margin-right: 5px">
-                                            <span :style="{ color: getColor(ind) }">
-                                                {{ language == 'zh' ? tag.name : tag.key }}
+                                </el-col>
+                                <el-col :xs="19" :sm="19" :md="18" :lg="18" :xl="19">
+                                    <div class="app-content">
+                                        <div class="app-header">
+                                            <span class="app-title">{{ app.name }}</span>
+                                            <el-button
+                                                class="app-button"
+                                                type="primary"
+                                                plain
+                                                round
+                                                size="small"
+                                                @click="getAppDetail(app.key)"
+                                            >
+                                                {{ $t('app.install') }}
+                                            </el-button>
+                                        </div>
+                                        <div class="app-desc">
+                                            <span class="desc">
+                                                {{ language == 'zh' ? app.shortDescZh : app.shortDescEn }}
                                             </span>
-                                        </el-tag>
+                                        </div>
+                                        <div class="app-tag">
+                                            <el-tag v-for="(tag, ind) in app.tags" :key="ind" style="margin-right: 5px">
+                                                <span :style="{ color: getColor(ind) }">
+                                                    {{ language == 'zh' ? tag.name : tag.key }}
+                                                </span>
+                                            </el-tag>
+                                        </div>
                                     </div>
-                                    <div class="divider"></div>
-                                </div>
-                            </el-col>
-                        </el-row>
+                                </el-col>
+                            </el-row>
+                        </el-card>
                     </div>
                 </el-col>
             </el-row>
@@ -234,8 +239,13 @@ onMounted(() => {
             margin-top: 5px;
         }
     }
-    &:hover {
-        background-color: rgba(0, 94, 235, 0.03);
+
+    .e-card {
+        border: var(--panel-border) !important;
+        &:hover {
+            cursor: pointer;
+            border: 1px solid var(--el-color-primary) !important;
+        }
     }
 }
 
diff --git a/frontend/src/views/app-store/index.scss b/frontend/src/views/app-store/index.scss
index 5f13ac119..de4568971 100644
--- a/frontend/src/views/app-store/index.scss
+++ b/frontend/src/views/app-store/index.scss
@@ -46,8 +46,13 @@
             min-width: 440px;
         }
     }
-    &:hover {
-        background-color: rgba(0, 94, 235, 0.03);
+
+    .e-card {
+        border: var(--panel-border) !important;
+        &:hover {
+            cursor: pointer;
+            border: 1px solid var(--el-color-primary) !important;
+        }
     }
 }
 
diff --git a/frontend/src/views/app-store/installed/index.vue b/frontend/src/views/app-store/installed/index.vue
index 3ed55d497..99a9fec3a 100644
--- a/frontend/src/views/app-store/installed/index.vue
+++ b/frontend/src/views/app-store/installed/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <LayoutContent v-loading="loading || syncLoading" :title="activeName" :divider="true">
+    <LayoutContent v-loading="loading || syncLoading" :title="activeName">
         <template #toolbar>
             <el-row :gutter="5">
                 <el-col :span="20">
@@ -67,103 +67,112 @@
                     class="install-card-col-12"
                 >
                     <div class="install-card">
-                        <el-row :gutter="24">
-                            <el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4">
-                                <div class="icon">
-                                    <el-avatar
-                                        shape="square"
-                                        :size="66"
-                                        :src="'data:image/png;base64,' + installed.app.icon"
-                                    />
-                                </div>
-                            </el-col>
-                            <el-col :xs="21" :sm="21" :md="21" :lg="20" :xl="20">
-                                <div class="a-detail">
-                                    <div class="d-name">
-                                        <span class="name">{{ installed.name }}</span>
-                                        <span class="status">
-                                            <el-popover
-                                                v-if="installed.status === 'Error'"
-                                                placement="bottom"
-                                                :width="400"
-                                                trigger="hover"
-                                                :content="installed.message"
-                                            >
-                                                <template #reference>
+                        <el-card class="e-card">
+                            <el-row :gutter="24">
+                                <el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4">
+                                    <div class="icon">
+                                        <el-avatar
+                                            shape="square"
+                                            :size="66"
+                                            :src="'data:image/png;base64,' + installed.app.icon"
+                                        />
+                                    </div>
+                                </el-col>
+                                <el-col :xs="21" :sm="21" :md="21" :lg="20" :xl="20">
+                                    <div class="a-detail">
+                                        <div class="d-name">
+                                            <span class="name">{{ installed.name }}</span>
+                                            <span class="status">
+                                                <el-popover
+                                                    v-if="installed.status === 'Error'"
+                                                    placement="bottom"
+                                                    :width="400"
+                                                    trigger="hover"
+                                                    :content="installed.message"
+                                                >
+                                                    <template #reference>
+                                                        <Status
+                                                            :key="installed.status"
+                                                            :status="installed.status"
+                                                        ></Status>
+                                                    </template>
+                                                </el-popover>
+                                                <span v-else>
                                                     <Status :key="installed.status" :status="installed.status"></Status>
-                                                </template>
-                                            </el-popover>
-                                            <span v-else>
-                                                <Status :key="installed.status" :status="installed.status"></Status>
+                                                </span>
                                             </span>
-                                        </span>
 
-                                        <el-button
-                                            class="h-button"
-                                            type="primary"
-                                            plain
-                                            round
-                                            size="small"
-                                            :disabled="installed.status !== 'Running'"
-                                            @click="openUploads(installed.app.key, installed.name)"
-                                            v-if="mode === 'installed'"
-                                        >
-                                            {{ $t('database.loadBackup') }}
-                                        </el-button>
-                                        <el-button
-                                            class="h-button"
-                                            type="primary"
-                                            plain
-                                            round
-                                            size="small"
-                                            :disabled="installed.status !== 'Running'"
-                                            @click="openBackups(installed.app.key, installed.name)"
-                                            v-if="mode === 'installed'"
-                                        >
-                                            {{ $t('app.backup') }}
-                                        </el-button>
-                                        <el-button
-                                            class="h-button"
-                                            type="primary"
-                                            plain
-                                            round
-                                            size="small"
-                                            @click="openOperate(installed, 'upgrade')"
-                                            v-if="mode === 'upgrade'"
-                                        >
-                                            {{ $t('app.upgrade') }}
-                                        </el-button>
-                                    </div>
-                                    <div class="d-description">
-                                        <el-tag>{{ $t('app.version') }}：{{ installed.version }}</el-tag>
-                                        <el-tag v-if="installed.httpPort > 0">
-                                            {{ $t('app.busPort') }}：{{ installed.httpPort }}
-                                        </el-tag>
-                                        <div class="description">
-                                            <span>{{ $t('app.areadyRun') }}： {{ getAge(installed.createdAt) }}</span>
+                                            <el-button
+                                                class="h-button"
+                                                type="primary"
+                                                plain
+                                                round
+                                                size="small"
+                                                :disabled="installed.status !== 'Running'"
+                                                @click="openUploads(installed.app.key, installed.name)"
+                                                v-if="mode === 'installed'"
+                                            >
+                                                {{ $t('database.loadBackup') }}
+                                            </el-button>
+                                            <el-button
+                                                class="h-button"
+                                                type="primary"
+                                                plain
+                                                round
+                                                size="small"
+                                                :disabled="installed.status !== 'Running'"
+                                                @click="openBackups(installed.app.key, installed.name)"
+                                                v-if="mode === 'installed'"
+                                            >
+                                                {{ $t('app.backup') }}
+                                            </el-button>
+                                            <el-button
+                                                class="h-button"
+                                                type="primary"
+                                                plain
+                                                round
+                                                size="small"
+                                                @click="openOperate(installed, 'upgrade')"
+                                                v-if="mode === 'upgrade'"
+                                            >
+                                                {{ $t('app.upgrade') }}
+                                            </el-button>
                                         </div>
-                                    </div>
-                                    <div class="app-divider" />
-                                    <div
-                                        class="d-button"
-                                        v-if="mode === 'installed' && installed.status != 'Installing'"
-                                    >
-                                        <el-button
-                                            v-for="(button, key) in buttons"
-                                            :key="key"
-                                            :type="button.disabled && button.disabled(installed) ? 'info' : 'primary'"
-                                            plain
-                                            round
-                                            size="small"
-                                            @click="button.click(installed)"
-                                            :disabled="button.disabled && button.disabled(installed)"
+                                        <div class="d-description">
+                                            <el-tag>{{ $t('app.version') }}：{{ installed.version }}</el-tag>
+                                            <el-tag v-if="installed.httpPort > 0">
+                                                {{ $t('app.busPort') }}：{{ installed.httpPort }}
+                                            </el-tag>
+                                            <div class="description">
+                                                <span>
+                                                    {{ $t('app.areadyRun') }}： {{ getAge(installed.createdAt) }}
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div class="app-divider" />
+                                        <div
+                                            class="d-button"
+                                            v-if="mode === 'installed' && installed.status != 'Installing'"
                                         >
-                                            {{ button.label }}
-                                        </el-button>
+                                            <el-button
+                                                v-for="(button, key) in buttons"
+                                                :key="key"
+                                                :type="
+                                                    button.disabled && button.disabled(installed) ? 'info' : 'primary'
+                                                "
+                                                plain
+                                                round
+                                                size="small"
+                                                @click="button.click(installed)"
+                                                :disabled="button.disabled && button.disabled(installed)"
+                                            >
+                                                {{ button.label }}
+                                            </el-button>
+                                        </div>
                                     </div>
-                                </div>
-                            </el-col>
-                        </el-row>
+                                </el-col>
+                            </el-row>
+                        </el-card>
                     </div>
                 </el-col>
             </el-row>