From a4e7535138781a43aaa1729ff148217ae436cbbb Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Fri, 2 Dec 2022 17:44:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=BA=94=E7=94=A8=E5=95=86=E5=BA=97?=
 =?UTF-8?q?=EF=BC=8C=E5=AE=89=E8=A3=85=E5=BA=94=E7=94=A8=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=8F=96=E6=B6=88=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=EF=BC=8C=E6=98=BE=E7=A4=BA=E2=80=9C=E5=85=A8=E9=83=A8=E2=80=9D?=
 =?UTF-8?q?=E5=92=8C=E2=80=9C=E5=B7=B2=E5=AE=89=E8=A3=85=E2=80=9D=20tab=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/routers/modules/app-store.ts     |  20 +--
 frontend/src/views/app-store/apps/index.vue   | 153 ++++++++++--------
 frontend/src/views/app-store/detail/index.vue |   4 +-
 3 files changed, 95 insertions(+), 82 deletions(-)

diff --git a/frontend/src/routers/modules/app-store.ts b/frontend/src/routers/modules/app-store.ts
index 6071e90d4..cac4ed3e3 100644
--- a/frontend/src/routers/modules/app-store.ts
+++ b/frontend/src/routers/modules/app-store.ts
@@ -38,16 +38,16 @@ const appStoreRouter = {
                 },
             ],
         },
-        {
-            path: '/apps/detail/:id',
-            name: 'AppDetail',
-            props: true,
-            hidden: true,
-            component: () => import('@/views/app-store/detail/index.vue'),
-            meta: {
-                activeMenu: '/apps',
-            },
-        },
+        // {
+        //     path: '/apps/detail/:id',
+        //     name: 'AppDetail',
+        //     props: true,
+        //     hidden: true,
+        //     component: () => import('@/views/app-store/detail/index.vue'),
+        //     meta: {
+        //         activeMenu: '/apps',
+        //     },
+        // },
     ],
 };
 
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index 8e9a5edb3..286581382 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -1,82 +1,95 @@
 <template>
-    <el-card v-loading="loading">
-        <el-row :gutter="5">
-            <el-col :span="2">
-                <el-button @click="sync" type="primary" :plain="true">{{ $t('app.sync') }}</el-button>
-            </el-col>
-            <el-col :span="22">
-                <div style="float: right">
-                    <el-input
-                        style="display: inline; margin-right: 5px"
-                        v-model="req.name"
-                        clearable
-                        @clear="searchByName('')"
-                    ></el-input>
-                    <el-button
-                        style="display: inline; margin-right: 5px"
-                        v-model="req.name"
-                        @click="searchByName(req.name)"
-                    >
-                        {{ '搜索' }}
+    <div>
+        <el-card v-loading="loading" v-if="!showDetail">
+            <el-row :gutter="5">
+                <el-col :span="2">
+                    <el-button @click="sync" type="primary" :plain="true">{{ $t('app.sync') }}</el-button>
+                </el-col>
+                <el-col :span="22">
+                    <div style="float: right">
+                        <el-input
+                            style="display: inline; margin-right: 5px"
+                            v-model="req.name"
+                            clearable
+                            @clear="searchByName('')"
+                        ></el-input>
+                        <el-button
+                            style="display: inline; margin-right: 5px"
+                            v-model="req.name"
+                            @click="searchByName(req.name)"
+                        >
+                            {{ $t('app.search') }}
+                        </el-button>
+                    </div>
+                </el-col>
+            </el-row>
+            <br />
+            <el-row>
+                <el-button
+                    style="margin-right: 5px"
+                    @click="changeTag('all')"
+                    type="primary"
+                    :plain="activeTag !== 'all'"
+                >
+                    {{ $t('app.all') }}
+                </el-button>
+                <div style="margin-right: 5px" :span="1" v-for="item in tags" :key="item.key">
+                    <el-button @click="changeTag(item.key)" type="primary" :plain="activeTag !== item.key">
+                        {{ item.name }}
                     </el-button>
                 </div>
-            </el-col>
-        </el-row>
-        <br />
-        <el-row>
-            <el-button style="margin-right: 5px" @click="changeTag('all')" type="primary" :plain="activeTag !== 'all'">
-                {{ $t('app.all') }}
-            </el-button>
-            <div style="margin-right: 5px" :span="1" v-for="item in tags" :key="item.key">
-                <el-button @click="changeTag(item.key)" type="primary" :plain="activeTag !== item.key">
-                    {{ item.name }}
-                </el-button>
-            </div>
-        </el-row>
-        <el-row :gutter="5">
-            <el-col v-for="(app, index) in apps" :key="index" :span="6">
-                <div @click="getAppDetail(app.id)">
-                    <el-card :body-style="{ padding: '0px' }" class="a-card">
-                        <el-row :gutter="24">
-                            <el-col :span="8">
-                                <div class="icon">
-                                    <el-image class="image" :src="'data:image/png;base64,' + app.icon"></el-image>
-                                </div>
-                            </el-col>
-                            <el-col :span="16">
-                                <div class="a-detail">
-                                    <div class="d-name">
-                                        <font size="3" style="font-weight: 700">{{ app.name }}</font>
+            </el-row>
+            <el-row :gutter="5">
+                <el-col v-for="(app, index) in apps" :key="index" :span="6">
+                    <div @click="getAppDetail(app.id)">
+                        <el-card :body-style="{ padding: '0px' }" class="a-card">
+                            <el-row :gutter="24">
+                                <el-col :span="8">
+                                    <div class="icon">
+                                        <el-image class="image" :src="'data:image/png;base64,' + app.icon"></el-image>
                                     </div>
-                                    <div class="d-description">
-                                        <font size="1">
-                                            <span>
-                                                {{ app.shortDesc }}
-                                            </span>
-                                        </font>
+                                </el-col>
+                                <el-col :span="16">
+                                    <div class="a-detail">
+                                        <div class="d-name">
+                                            <font size="3" style="font-weight: 700">{{ app.name }}</font>
+                                        </div>
+                                        <div class="d-description">
+                                            <font size="1">
+                                                <span>
+                                                    {{ app.shortDesc }}
+                                                </span>
+                                            </font>
+                                        </div>
+                                        <div class="d-tag">
+                                            <el-tag
+                                                v-for="(tag, ind) in app.tags"
+                                                :key="ind"
+                                                round
+                                                :colr="getColor(ind)"
+                                            >
+                                                {{ tag.name }}
+                                            </el-tag>
+                                        </div>
                                     </div>
-                                    <div class="d-tag">
-                                        <el-tag v-for="(tag, ind) in app.tags" :key="ind" round :colr="getColor(ind)">
-                                            {{ tag.name }}
-                                        </el-tag>
-                                    </div>
-                                </div>
-                            </el-col>
-                        </el-row>
-                    </el-card>
-                </div>
-            </el-col>
-        </el-row>
-    </el-card>
+                                </el-col>
+                            </el-row>
+                        </el-card>
+                    </div>
+                </el-col>
+            </el-row>
+        </el-card>
+        <Detail v-if="showDetail" :id="appId"></Detail>
+    </div>
 </template>
 
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
 import { onMounted, reactive, ref } from 'vue';
-import router from '@/routers';
 import { SearchApp, SyncApp } from '@/api/modules/app';
 import { ElMessage } from 'element-plus';
 import i18n from '@/lang';
+import Detail from '../detail/index.vue';
 
 let req = reactive({
     name: '',
@@ -90,6 +103,8 @@ let tags = ref<App.Tag[]>([]);
 const colorArr = ['#6495ED', '#54FF9F', '#BEBEBE', '#FFF68F', '#FFFF00', '#8B0000'];
 let loading = ref(false);
 let activeTag = ref('all');
+let showDetail = ref(false);
+let appId = ref(0);
 
 const getColor = (index: number) => {
     return colorArr[index];
@@ -103,10 +118,8 @@ const search = async (req: App.AppReq) => {
 };
 
 const getAppDetail = (id: number) => {
-    let params: { [key: string]: any } = {
-        id: id,
-    };
-    router.push({ name: 'AppDetail', params });
+    showDetail.value = true;
+    appId.value = id;
 };
 
 const sync = () => {
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index 62ef5c1b3..7919e6ed1 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -1,6 +1,6 @@
 <template>
     <el-card>
-        <LayoutContent :header="$t('app.detail')" :back-name="'App'">
+        <LayoutContent :header="$t('app.detail')" :back-name="'App'" :v-loading="loadingDetail">
             <div class="brief">
                 <el-row :gutter="20">
                     <el-col :span="4">
@@ -42,7 +42,7 @@
                                 <el-descriptions-item :label="$t('app.author')">{{ app.author }}</el-descriptions-item>
                             </el-descriptions>
                             <div>
-                                <el-button :disabled="!appDetail.enable" @click="openInstall" type="primary">
+                                <el-button v-if="appDetail.enable" @click="openInstall" type="primary">
                                     {{ $t('app.install') }}
                                 </el-button>
                             </div>