feat: 修改APP状态页

frontend/src/components/app-status/index.vue

@@ -32,14 +32,22 @@
             </el-card>
         </div>
         <div v-else>
-            <div class="app-warn">
-                <div>
-                    <span>{{ $t('app.checkInstalledWarn', [data.app]) }}</span>
-                </div>
-                <el-link icon="Position" @click="goRouter('/apps')" type="primary">
-                    {{ $t('database.goInstall') }}
-                </el-link>
-            </div>
+            <LayoutContent :title="getTitle(key)" :divider="true">
+                <template #main>
+                    <div class="app-warn">
+                        <div>
+                            <span>{{ $t('app.checkInstalledWarn', [data.app]) }}</span>
+                            <span @click="goRouter('/apps')">
+                                <el-icon><Position /></el-icon>
+                                {{ $t('database.goInstall') }}
+                            </span>
+                            <div>
+                                <img src="@/assets/images/no_app.svg" />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </LayoutContent>
         </div>
     </div>
 </template>
@@ -50,6 +58,7 @@ import { onMounted, reactive, ref } from 'vue';
 import Status from '@/components/status/index.vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
+import LayoutContent from '@/layout/layout-content.vue';
 
 const props = defineProps({
     appKey: {
@@ -116,6 +125,17 @@ const onOperate = async (operation: string) => {
     });
 };
 
+const getTitle = (key: string) => {
+    switch (key) {
+        case 'nginx':
+            return i18n.global.t('website.website');
+        case 'mysql':
+            return 'Mysql ' + i18n.global.t('menu.database');
+        case 'redis':
+            return 'Redis ' + i18n.global.t('menu.database');
+    }
+};
+
 onMounted(() => {
     key.value = props.appKey;
     onCheck();
@@ -145,11 +165,25 @@ onMounted(() => {
 
 .app-warn {
     text-align: center;
-    margin-top: 200px;
-    span {
-        font-weight: 500;
-        font-size: 16px;
+    margin-top: 100px;
+    span:first-child {
+        // font-weight: 500;
+        // font-size: 16px;
         color: #bbbfc4;
     }
+
+    span:nth-child(2) {
+        color: $primary-color;
+        cursor: pointer;
+    }
+
+    span:nth-child(2):hover {
+        color: #74a4f3;
+    }
+
+    img {
+        width: 300px;
+        height: 300px;
+    }
 }
 </style>

frontend/src/lang/modules/zh.ts

@@ -252,7 +252,7 @@ export default {
         noMysql: '当前未检测到 {0} 数据库，请进入应用商店点击安装！',
         mysqlBadStatus: '当前 mysql 应用状态异常，请在',
         adjust: '中查看原因或修改配置',
-        goInstall: '去安装',
+        goInstall: '去应用商店安装',
         source: '来源',
         backup: '备份',
         permission: '权限',

frontend/src/views/app-store/index.scss

@@ -76,9 +76,14 @@
 
 .update-prompt {
     text-align: center;
+    margin-top: 100px;
+
     span {
-        font-weight: 500;
-        font-size: 16px;
         color: #bbbfc4;
     }
+
+    img {
+        width: 300px;
+        height: 300px;
+    }
 }

frontend/src/views/app-store/installed/index.vue

@@ -3,20 +3,25 @@
         <template #toolbar>
             <el-row :gutter="5">
                 <el-col :span="20">
-                    <div>
-                        <el-button @click="changeTag('all')" type="primary" :plain="activeTag !== 'all'">
-                            {{ $t('app.all') }}
+                    <el-button
+                        class="tag-button"
+                        :class="activeTag === 'all' ? '' : 'no-active'"
+                        @click="changeTag('all')"
+                        :type="activeTag === 'all' ? 'primary' : ''"
+                        :plain="activeTag !== 'all'"
+                    >
+                        {{ $t('app.all') }}
+                    </el-button>
+                    <div v-for="item in tags" :key="item.key" style="display: inline">
+                        <el-button
+                            class="tag-button"
+                            :class="activeTag === item.key ? '' : 'no-active'"
+                            @click="changeTag(item.key)"
+                            :type="activeTag === item.key ? 'primary' : ''"
+                            :plain="activeTag !== item.key"
+                        >
+                            {{ item.name }}
                         </el-button>
-                        <div v-for="item in tags" :key="item.key" style="display: inline">
-                            <el-button
-                                class="tag-button"
-                                @click="changeTag(item.key)"
-                                type="primary"
-                                :plain="activeTag !== item.key"
-                            >
-                                {{ item.name }}
-                            </el-button>
-                        </div>
                     </div>
                 </el-col>
                 <el-col :span="4">
@@ -39,8 +44,11 @@
             <el-button @click="sync" type="primary" link v-if="mode === 'installed'">{{ $t('app.sync') }}</el-button>
         </template>
         <template #main>
-            <div class="update-prompt">
-                <span v-if="mode === 'update'">{{ $t('app.updatePrompt') }}</span>
+            <div class="update-prompt" v-if="mode === 'update'">
+                <span>{{ $t('app.updatePrompt') }}</span>
+                <div>
+                    <img src="@/assets/images/no_update_app.svg" />
+                </div>
             </div>
             <el-row :gutter="5">
                 <el-col v-for="(installed, index) in data" :key="index" :span="12">