feat: 应用列表增加已安装提示 (#1107)

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

backend/app/dto/response/app.go

@@ -21,8 +21,9 @@ type AppUpdateRes struct {
 
 type AppDTO struct {
 	model.App
-	Versions []string    `json:"versions"`
-	Tags     []model.Tag `json:"tags"`
+	Installed bool        `json:"installed"`
+	Versions  []string    `json:"versions"`
+	Tags      []model.Tag `json:"tags"`
 }
 
 type TagDTO struct {

backend/app/service/app.go

@@ -98,6 +98,8 @@ func (a AppService) PageApp(req request.AppSearch) (interface{}, error) {
 			continue
 		}
 		appDTO.Tags = tags
+		installs, _ := appInstallRepo.ListBy(appInstallRepo.WithAppId(a.ID))
+		appDTO.Installed = len(installs) > 0
 	}
 	res.Items = appDTOs
 	res.Total = total

frontend/src/api/interface/app.ts

@@ -16,6 +16,7 @@ export namespace App {
 
     export interface AppDTO extends App {
         versions: string[];
+        installed: boolean;
     }
 
     export interface Tag {
@@ -25,7 +26,7 @@ export namespace App {
 
     export interface AppResPage {
         total: number;
-        items: App.App[];
+        items: App.AppDTO[];
     }
 
     export interface AppUpdateRes {

frontend/src/lang/modules/en.ts

@@ -1124,6 +1124,7 @@ const message = {
         editCompose: 'Edit compose file',
         editComposeHelper: 'Editing the compose file may cause the software installation to fail',
         composeNullErr: 'compose cannot be empty',
+        takeDown: 'TakeDown',
     },
     website: {
         website: 'Website',

frontend/src/lang/modules/zh.ts

@@ -1117,6 +1117,8 @@ const message = {
         editCompose: '编辑 compose 文件',
         editComposeHelper: '编辑 compose 文件可能导致软件安装失败',
         composeNullErr: 'compose 不能为空',
+        takeDown: '已废弃',
+        allReadyInstalled: '已安装',
     },
     website: {
         website: '网站',

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

@@ -62,6 +62,9 @@
                                     <div class="app-content">
                                         <div class="app-header">
                                             <span class="app-title">{{ app.name }}</span>
+                                            <el-text type="success" style="margin-left: 10px" v-if="app.installed">
+                                                {{ $t('app.allReadyInstalled') }}
+                                            </el-text>
                                             <el-button
                                                 class="app-button"
                                                 type="primary"
@@ -85,7 +88,7 @@
                                                 </span>
                                             </el-tag>
                                             <el-tag v-if="app.status === 'TakeDown'" style="margin-right: 5px">
-                                                <span style="color: red">已废弃</span>
+                                                <span style="color: red">{{ $t('app.takeDown') }}</span>
                                             </el-tag>
                                         </div>
                                     </div>
@@ -113,21 +116,21 @@ import { useI18n } from 'vue-i18n';
 
 const language = useI18n().locale.value;
 
-let req = reactive({
+const req = reactive({
     name: '',
     tags: [],
     page: 1,
     pageSize: 50,
 });
 
-let apps = ref<App.App[]>([]);
-let tags = ref<App.Tag[]>([]);
+const apps = ref<App.AppDTO[]>([]);
+const tags = ref<App.Tag[]>([]);
 const colorArr = ['#005eeb', '#008B45', '#BEBEBE', '#FFF68F', '#FFFF00', '#8B0000'];
-let loading = ref(false);
-let activeTag = ref('all');
-let showDetail = ref(false);
-let appId = ref(0);
-let canUpdate = ref(false);
+const loading = ref(false);
+const activeTag = ref('all');
+const showDetail = ref(false);
+const appId = ref(0);
+const canUpdate = ref(false);
 
 const getColor = (index: number) => {
     return colorArr[index];