From 4b7c047efe91b7f6c256c3342f0746c1ec4ea01d Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <1paneldev@sina.com>
Date: Fri, 9 Jan 2026 16:31:47 +0800
Subject: [PATCH] perf: Optimize app store icon display

---
 agent/app/api/v2/app.go                             | 6 +++---
 agent/app/service/app.go                            | 6 +++---
 agent/router/ro_app.go                              | 2 +-
 frontend/src/api/modules/app.ts                     | 4 ++--
 frontend/src/views/app-store/apps/app/index.vue     | 2 +-
 frontend/src/views/app-store/detail/index.vue       | 2 +-
 frontend/src/views/app-store/installed/app/card.vue | 2 +-
 frontend/src/views/app-store/installed/app/icon.vue | 4 ++--
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/agent/app/api/v2/app.go b/agent/app/api/v2/app.go
index 55c8fbda7f7e..4f7fb9a23a0b 100644
--- a/agent/app/api/v2/app.go
+++ b/agent/app/api/v2/app.go
@@ -203,14 +203,14 @@ func (b *BaseApi) GetAppListUpdate(c *gin.Context) {
 // @Success 200 {file} file "app icon"
 // @Security ApiKeyAuth
 // @Security Timestamp
-// @Router /apps/icon/:appId [get]
+// @Router /apps/icon/:key [get]
 func (b *BaseApi) GetAppIcon(c *gin.Context) {
-	appID, err := helper.GetIntParamByKey(c, "appID")
+	appKey, err := helper.GetStrParamByKey(c, "key")
 	if err != nil {
 		helper.BadRequest(c, err)
 		return
 	}
-	iconBytes, err := appService.GetAppIcon(appID)
+	iconBytes, err := appService.GetAppIcon(appKey)
 	if err != nil {
 		helper.InternalServer(c, err)
 		return
diff --git a/agent/app/service/app.go b/agent/app/service/app.go
index d98e3e88dc94..d87541ab22d2 100644
--- a/agent/app/service/app.go
+++ b/agent/app/service/app.go
@@ -46,7 +46,7 @@ type IAppService interface {
 	GetAppUpdate() (*response.AppUpdateRes, error)
 	GetAppDetailByID(id uint) (*response.AppDetailDTO, error)
 	SyncAppListFromLocal(taskID string)
-	GetAppIcon(appID uint) ([]byte, error)
+	GetAppIcon(key string) ([]byte, error)
 	GetAppDetailByKey(appKey, version string) (response.AppDetailSimpleDTO, error)
 }
 
@@ -1177,8 +1177,8 @@ func (a AppService) SyncAppListFromRemote(taskID string) (err error) {
 	return nil
 }
 
-func (a AppService) GetAppIcon(appID uint) ([]byte, error) {
-	app, err := appRepo.GetFirst(repo.WithByID(appID))
+func (a AppService) GetAppIcon(key string) ([]byte, error) {
+	app, err := appRepo.GetFirst(appRepo.WithKey(key))
 	if err != nil {
 		return nil, err
 	}
diff --git a/agent/router/ro_app.go b/agent/router/ro_app.go
index 9f535fd14546..3d9cc12f8a5c 100644
--- a/agent/router/ro_app.go
+++ b/agent/router/ro_app.go
@@ -23,7 +23,7 @@ func (a *AppRouter) InitRouter(Router *gin.RouterGroup) {
 		appRouter.GET("/details/:id", baseApi.GetAppDetailByID)
 		appRouter.POST("/install", baseApi.InstallApp)
 		appRouter.GET("/tags", baseApi.GetAppTags)
-		appRouter.GET("/icon/:appID", baseApi.GetAppIcon)
+		appRouter.GET("/icon/:key", baseApi.GetAppIcon)
 
 		appRouter.POST("/installed/check", baseApi.CheckAppInstalled)
 		appRouter.POST("/installed/loadport", baseApi.LoadPort)
diff --git a/frontend/src/api/modules/app.ts b/frontend/src/api/modules/app.ts
index 4371a15eb715..85c9781597fa 100644
--- a/frontend/src/api/modules/app.ts
+++ b/frontend/src/api/modules/app.ts
@@ -131,10 +131,10 @@ export const getCurrentNodeCustomAppConfig = () => {
     return http.get<App.CustomAppStoreConfig>(`/custom/app/config`);
 };
 
-export function getAppIconUrl(appId: number, node?: string): string {
+export function getAppIconUrl(appKey: string, node?: string): string {
     const baseURL = import.meta.env.VITE_API_URL as string;
     const params = node ? `?operateNode=${node}` : '';
-    return `${baseURL}/apps/icon/${appId}${params}`;
+    return `${baseURL}/apps/icon/${appKey}${params}`;
 }
 
 export const installAppToNodes = (param: App.InstallAppToNodes) => {
diff --git a/frontend/src/views/app-store/apps/app/index.vue b/frontend/src/views/app-store/apps/app/index.vue
index fb63a5469e8d..53996dc028d5 100644
--- a/frontend/src/views/app-store/apps/app/index.vue
+++ b/frontend/src/views/app-store/apps/app/index.vue
@@ -3,7 +3,7 @@
         <el-card>
             <div class="app-wrapper" @click="openDetail(app.key)">
                 <div class="app-image">
-                    <el-avatar shape="square" :size="60" :src="getAppIconUrl(app.id, currentNode)" />
+                    <el-avatar shape="square" :size="60" :src="getAppIconUrl(app.key, currentNode)" />
                 </div>
                 <div class="app-content">
                     <div class="content-top">
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index 0a780642cf4e..68800d4e332d 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -5,7 +5,7 @@
                 <div class="detail flex">
                     <div class="w-12 h-12 rounded p-1 shadow-md icon">
                         <img
-                            :src="getAppIconUrl(app.id, currentNode)"
+                            :src="getAppIconUrl(app.key, currentNode)"
                             alt="App Icon"
                             class="w-full h-full rounded"
                             style="object-fit: contain"
diff --git a/frontend/src/views/app-store/installed/app/card.vue b/frontend/src/views/app-store/installed/app/card.vue
index 3f520cbe216c..57a1c6b9d43b 100644
--- a/frontend/src/views/app-store/installed/app/card.vue
+++ b/frontend/src/views/app-store/installed/app/card.vue
@@ -5,7 +5,7 @@
                 <el-col :xs="3" :sm="3" :md="3" :lg="4" :xl="3">
                     <AppIcon
                         @open-detail="$emit('openDetail')"
-                        :appID="installed.appID"
+                        :appKey="installed.appKey"
                         :currentNode="currentNode"
                     ></AppIcon>
                 </el-col>
diff --git a/frontend/src/views/app-store/installed/app/icon.vue b/frontend/src/views/app-store/installed/app/icon.vue
index 8155412c957b..13cf0ec1bf5d 100644
--- a/frontend/src/views/app-store/installed/app/icon.vue
+++ b/frontend/src/views/app-store/installed/app/icon.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="icon">
-        <el-avatar @click="$emit('openDetail')" shape="square" :size="77" :src="getAppIconUrl(appID, currentNode)" />
+        <el-avatar @click="$emit('openDetail')" shape="square" :size="77" :src="getAppIconUrl(appKey, currentNode)" />
     </div>
 </template>
 
@@ -9,7 +9,7 @@ import { getAppIconUrl } from '@/api/modules/app';
 
 interface Props {
     currentNode: string;
-    appID: number;
+    appKey: string;
 }
 defineProps<Props>();