perf: Optimize app store icon display

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

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
 	}

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)

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) => {

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">

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"

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>

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>();