From fb00ba812aad304bfe04849c3d2c441a5e38254f Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Mon, 4 Sep 2023 22:22:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=A3=E5=86=B3=E5=BF=AB=E9=80=9F?=
 =?UTF-8?q?=E5=AE=89=E8=A3=85=E5=BA=94=E7=94=A8=E8=B7=B3=E8=BD=AC=E5=A4=B1?=
 =?UTF-8?q?=E8=B4=A5=E9=97=AE=E9=A2=98=20(#2178)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/app-status/index.vue  |  2 +-
 frontend/src/routers/modules/app-store.ts     | 11 ----
 frontend/src/views/app-store/apps/index.vue   | 10 +++
 frontend/src/views/app-store/detail/index.vue | 64 +++++++++----------
 .../views/app-store/detail/install/index.vue  | 11 +++-
 .../views/app-store/detail/params/index.vue   |  4 +-
 frontend/src/views/database/mysql/index.vue   |  4 +-
 frontend/src/views/database/redis/index.vue   |  2 +-
 frontend/src/views/home/app/index.vue         |  2 +-
 .../src/views/host/file-management/index.vue  |  2 +
 10 files changed, 59 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index 23aac8b27..725d63515 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -130,7 +130,7 @@ const setting = () => {
 };
 
 const goRouter = async (key: string) => {
-    router.push({ name: 'AppDetail', params: { appKey: key } });
+    router.push({ name: 'AppAll', query: { install: key } });
 };
 
 const onCheck = async () => {
diff --git a/frontend/src/routers/modules/app-store.ts b/frontend/src/routers/modules/app-store.ts
index 61dc2367c..d056def49 100644
--- a/frontend/src/routers/modules/app-store.ts
+++ b/frontend/src/routers/modules/app-store.ts
@@ -28,17 +28,6 @@ const appStoreRouter = {
                         requiresAuth: false,
                     },
                 },
-                {
-                    path: 'detail/:appKey',
-                    name: 'AppDetail',
-                    component: () => import('@/views/app-store/detail/index.vue'),
-                    props: true,
-                    hidden: true,
-                    meta: {
-                        activeMenu: '/apps',
-                        requiresAuth: false,
-                    },
-                },
                 {
                     path: 'installed',
                     name: 'AppInstalled',
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index a44839cb8..b91b29ddb 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -176,6 +176,7 @@ const canUpdate = ref(false);
 const syncing = ref(false);
 const detailRef = ref();
 const installRef = ref();
+const installKey = ref('');
 
 const getColor = (index: number) => {
     return colorArr[index];
@@ -245,6 +246,15 @@ const searchByName = (name: string) => {
 };
 
 onMounted(() => {
+    if (router.currentRoute.value.query.install) {
+        installKey.value = String(router.currentRoute.value.query.install);
+        const params = {
+            app: {
+                key: installKey.value,
+            },
+        };
+        installRef.value.acceptParams(params);
+    }
     search(req);
 });
 </script>
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index 0c76fd613..a4942e967 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -4,41 +4,35 @@
             <DrawerHeader :header="$t('app.detail')" :back="handleClose" />
         </template>
         <div class="brief" v-loading="loadingApp">
-            <el-row :gutter="20">
-                <div>
-                    <el-col :span="3">
-                        <el-avatar shape="square" :size="180" :src="app.icon" />
-                    </el-col>
+            <div class="detail flex">
+                <div class="w-12 h-12 bg-gray-100 rounded p-1 shadow-md icon">
+                    <img :src="app.icon" alt="App Icon" class="w-full h-full rounded" />
                 </div>
-                <el-col :span="18">
-                    <div class="detail">
-                        <div class="name">
-                            <span>{{ app.name }}</span>
-                        </div>
-                        <div class="description">
-                            <span>
-                                {{ language == 'zh' || language == 'tw' ? app.shortDescZh : app.shortDescEn }}
-                            </span>
-                        </div>
-                        <br />
-                        <div v-if="!loadingDetail">
-                            <el-alert
-                                style="width: 300px"
-                                v-if="!appDetail.enable"
-                                :title="$t('app.limitHelper')"
-                                type="warning"
-                                show-icon
-                                :closable="false"
-                            />
-                        </div>
-                        <div>
-                            <el-button round v-if="appDetail.enable" @click="openInstall" type="primary">
-                                {{ $t('app.install') }}
-                            </el-button>
-                        </div>
+                <div class="ml-4">
+                    <div class="name mb-2">
+                        <span>{{ app.name }}</span>
                     </div>
-                </el-col>
-            </el-row>
+                    <div class="description mb-4">
+                        <span>
+                            {{ language == 'zh' || language == 'tw' ? app.shortDescZh : app.shortDescEn }}
+                        </span>
+                    </div>
+                    <br />
+                    <div v-if="!loadingDetail" class="mb-2">
+                        <el-alert
+                            style="width: 300px"
+                            v-if="!appDetail.enable"
+                            :title="$t('app.limitHelper')"
+                            type="warning"
+                            show-icon
+                            :closable="false"
+                        />
+                    </div>
+                    <el-button round v-if="appDetail.enable" @click="openInstall" type="primary">
+                        {{ $t('app.install') }}
+                    </el-button>
+                </div>
+            </div>
             <div class="divider"></div>
             <div>
                 <el-row>
@@ -170,7 +164,9 @@ defineExpose({
         }
     }
 
-    .detail {
+    .icon {
+        width: 180px;
+        height: 180px;
     }
 
     .version {
diff --git a/frontend/src/views/app-store/detail/install/index.vue b/frontend/src/views/app-store/detail/install/index.vue
index 637142d71..01529b403 100644
--- a/frontend/src/views/app-store/detail/install/index.vue
+++ b/frontend/src/views/app-store/detail/install/index.vue
@@ -11,7 +11,13 @@
         </template>
         <el-row v-loading="loading">
             <el-col :span="22" :offset="1">
-                <el-alert :title="$t('app.appInstallWarn')" class="common-prompt" :closable="false" type="error" />
+                <el-alert
+                    :title="$t('app.appInstallWarn')"
+                    class="common-prompt"
+                    :closable="false"
+                    type="error"
+                    v-if="canEditPort(installData.app.key)"
+                />
                 <el-form
                     @submit.prevent
                     ref="paramForm"
@@ -191,6 +197,9 @@ const appVersions = ref<string[]>([]);
 const handleClose = () => {
     open.value = false;
     resetForm();
+    if (router.currentRoute.value.query.install) {
+        router.push({ name: 'AppAll' });
+    }
 };
 const paramKey = ref(1);
 
diff --git a/frontend/src/views/app-store/detail/params/index.vue b/frontend/src/views/app-store/detail/params/index.vue
index 0e48a3be1..bce021313 100644
--- a/frontend/src/views/app-store/detail/params/index.vue
+++ b/frontend/src/views/app-store/detail/params/index.vue
@@ -249,8 +249,8 @@ const getLabel = (row: ParamObj): string => {
     }
 };
 
-const toPage = (appKey: string) => {
-    router.push({ name: 'AppDetail', params: { appKey: appKey } });
+const toPage = (key: string) => {
+    router.push({ name: 'AppAll', query: { install: key } });
 };
 
 onMounted(() => {
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 5ff82e399..39de419a6 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -355,7 +355,7 @@ const loadDB = async () => {
 };
 
 const goRouter = async () => {
-    router.push({ name: 'AppDetail', params: { appKey: 'mysql' } });
+    router.push({ name: 'AppAll', query: { install: 'mysql' } });
 };
 
 const onChange = async (info: any) => {
@@ -372,7 +372,7 @@ const goDashboard = async () => {
 };
 
 const getAppDetail = (key: string) => {
-    router.push({ name: 'AppDetail', params: { appKey: key } });
+    router.push({ name: 'AppAll', query: { install: key } });
 };
 
 const loadDashboardPort = async () => {
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index e088547bf..44f9b501a 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -102,7 +102,7 @@ const goDashboard = async () => {
     dialogPortJumpRef.value.acceptParams({ port: redisCommandPort.value });
 };
 const getAppDetail = (key: string) => {
-    router.push({ name: 'AppDetail', params: { appKey: key } });
+    router.push({ name: 'AppAll', query: { install: key } });
 };
 
 const loadDashboardPort = async () => {
diff --git a/frontend/src/views/home/app/index.vue b/frontend/src/views/home/app/index.vue
index ece018cc2..ac3e83074 100644
--- a/frontend/src/views/home/app/index.vue
+++ b/frontend/src/views/home/app/index.vue
@@ -64,7 +64,7 @@ const acceptParams = (): void => {
 };
 
 const goInstall = (key: string) => {
-    router.push({ name: 'AppDetail', params: { appKey: key } });
+    router.push({ name: 'AppAll', query: { install: key } });
 };
 
 const search = async (req: App.AppReq) => {
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index aca67108c..8c4ba1c95 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -635,6 +635,8 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .path {
+    display: flex;
+    align-items: center;
     border: 1px solid #ebeef5;
     background-color: var(--panel-path-bg);
     height: 30px;