feat: 已安装界面应用添加详情 (#3264)

Refs https://github.com/1Panel-dev/1Panel/issues/2957

backend/init/router/router.go

@@ -1,11 +1,10 @@
 package router
 
 import (
+	"fmt"
+	"github.com/gin-contrib/gzip"
 	"html/template"
 	"net/http"
-	"strings"
-
-	"github.com/gin-contrib/gzip"
 
 	"github.com/1Panel-dev/1Panel/backend/global"
 	"github.com/1Panel-dev/1Panel/backend/i18n"
@@ -22,12 +21,10 @@ import (
 func setWebStatic(rootRouter *gin.RouterGroup) {
 	rootRouter.StaticFS("/public", http.FS(web.Favicon))
 	rootRouter.Use(func(c *gin.Context) {
-		if strings.HasPrefix(c.Request.URL.Path, "/assets/") {
-			c.Header("Cache-Control", "max-age=31536000")
-		}
 		c.Next()
 	})
 	rootRouter.GET("/assets/*filepath", func(c *gin.Context) {
+		c.Writer.Header().Set("Cache-Control", fmt.Sprintf("private, max-age=%d", 3600))
 		staticServer := http.FileServer(http.FS(web.Assets))
 		staticServer.ServeHTTP(c.Writer, c.Request)
 	})

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

@@ -256,7 +256,7 @@ const openInstall = (app: App.App) => {
 };
 
 const openDetail = (key: string) => {
-    detailRef.value.acceptParams(key);
+    detailRef.value.acceptParams(key, 'install');
 };
 
 const sync = () => {

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

@@ -28,7 +28,12 @@
                             :closable="false"
                         />
                     </div>
-                    <el-button round v-if="appDetail.enable" @click="openInstall" type="primary">
+                    <el-button
+                        round
+                        v-if="appDetail.enable && operate === 'install'"
+                        @click="openInstall"
+                        type="primary"
+                    >
                         {{ $t('app.install') }}
                     </el-button>
                 </div>
@@ -92,9 +97,11 @@ const loadingApp = ref(false);
 const installRef = ref();
 const open = ref(false);
 const appKey = ref();
+const operate = ref();
 
-const acceptParams = async (key: string) => {
+const acceptParams = async (key: string, op: string) => {
     appKey.value = key;
+    operate.value = op;
     open.value = true;
     getApp();
 };

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

@@ -108,7 +108,7 @@
                         <el-card class="e-card">
                             <el-row :gutter="20">
                                 <el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="4">
-                                    <div class="icon">
+                                    <div class="icon" @click.stop="openDetail(installed.app)">
                                         <el-avatar
                                             shape="square"
                                             :size="66"
@@ -298,6 +298,7 @@
     <PortJumpDialog ref="dialogPortJumpRef" />
     <AppIgnore ref="ignoreRef" @close="search" />
     <ComposeLogs ref="composeLogRef" />
+    <AppDetail ref="appDetail" />
 </template>
 
 <script lang="ts" setup>
@@ -319,6 +320,7 @@ import AppDelete from './delete/index.vue';
 import AppParams from './detail/index.vue';
 import AppUpgrade from './upgrade/index.vue';
 import AppIgnore from './ignore/index.vue';
+import AppDetail from '../detail/index.vue';
 import ComposeLogs from '@/components/compose-log/index.vue';
 import { App } from '@/api/interface/app';
 import Status from '@/components/status/index.vue';
@@ -367,6 +369,7 @@ const activeName = ref(i18n.global.t('app.installed'));
 const mode = ref('installed');
 const moreTag = ref('');
 const language = useI18n().locale.value;
+const appDetail = ref();
 
 const sync = () => {
     ElMessageBox.confirm(i18n.global.t('app.syncAllAppHelper'), i18n.global.t('app.sync'), {
@@ -431,6 +434,10 @@ const goDashboard = async (port: any, protocol: string) => {
     dialogPortJumpRef.value.acceptParams({ port: port, protocol: protocol });
 };
 
+const openDetail = (app: App.App) => {
+    appDetail.value.acceptParams(app.key, 'detail');
+};
+
 const openOperate = (row: any, op: string) => {
     operateReq.installId = row.id;
     operateReq.operate = op;