From 014aac413f6d75479cddd3f7003bfd517ac79d73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=81=E7=AB=AD=E5=8A=9B?= <jerrykuku@qq.com>
Date: Wed, 11 Dec 2024 15:37:26 +0800
Subject: [PATCH] Fix: Can't display app icon when import from app file or
 docker run cmd.

---
 src/components/Apps/ComposeConfig.vue |  23 +-
 src/components/forms/ImportPanel.vue  | 291 +++++++++++++-------------
 2 files changed, 162 insertions(+), 152 deletions(-)

diff --git a/src/components/Apps/ComposeConfig.vue b/src/components/Apps/ComposeConfig.vue
index a5351b62..825aa72e 100644
--- a/src/components/Apps/ComposeConfig.vue
+++ b/src/components/Apps/ComposeConfig.vue
@@ -64,6 +64,14 @@ export default {
     CommandsInput,
     VueSlider,
   },
+  filters: {
+    duplexDisplay(val) {
+      if (!val) {
+        return 256
+      }
+      return (isNumber(val) && val) || (val && val.replace(/m/i, ''))
+    },
+  },
   props: {
     state: String,
     totalMemory: {
@@ -244,6 +252,7 @@ export default {
       immediate: true,
     },
   },
+
   created() {
     // Set Front-end base url
     this.baseUrl = `${document.domain}`
@@ -325,7 +334,6 @@ export default {
 
     /**
      * @description: Validate form async
-     * @param {object} ref ref of component
      * @return {boolean}
      */
     async checkStep() {
@@ -346,7 +354,6 @@ export default {
         if (!yaml) {
           return
         }
-
         // 其他配置
         this.volumes = yaml.volumes || {}
 
@@ -624,7 +631,7 @@ export default {
 
     makeArray(foo) {
       const newArray = typeof foo == 'string' ? [foo] : foo
-      return newArray == undefined ? [] : newArray
+      return newArray === undefined ? [] : newArray
     },
 
     // ****** migration !!! end !!!
@@ -741,12 +748,6 @@ export default {
       }
       return result
     },
-    duplexDisplay(val) {
-      if (!val) {
-        return 256 // this.memory_min
-      }
-      return (isNumber(val) && val) || (val && val.replace(/M/i, ''))
-    },
     // unused
     filteredBeidgePort(service) {
       return this.bridgePorts(service).filter((port) => {
@@ -787,7 +788,7 @@ export default {
             <ValidationProvider v-slot="{ errors, valid }" class="is-flex-grow-1 mr-3" name="Image0" rules="required">
               <b-field :label="`${$t('Docker Image')} *`" :message="$t(errors)" :type="{ 'is-danger': errors[0], 'is-success': valid }" class="mb-3">
                 <b-input
-                  :key="service.image" :readonly="state == 'update' || serviceStableVersion !== ''" :value="getFirstField(service.image)" :placeholder="$t('e.g.,hello-world:latest')" @input="(V) => changeIcon(V)" @blur="
+                  :key="service.image" :readonly="state === 'update' || serviceStableVersion !== ''" :value="getFirstField(service.image)" :placeholder="$t('e.g.,hello-world:latest')" @input="(V) => changeIcon(V)" @blur="
                     (E) => {
                       return (service.image = service.image.split(':')[1]
                         ? `${E.target._value}:${service.image.split(':')[1]}`
@@ -895,7 +896,7 @@ export default {
           </b-field>
 
           <b-field :label="$t('Memory Limit')" class="mb-5">
-            <VueSlider :max="totalMemory" :min="memory_min" class="mx-2" :marks="true" :data="markData" :value="duplexDisplay(service.deploy.resources.limits.memory)" @change="(v) => (service.deploy.resources.limits.memory = v)" />
+            <VueSlider :max="totalMemory" :min="memory_min" class="mx-2" :marks="true" :data="markData" :value="service.deploy.resources.limits.memory | duplexDisplay" @change="(v) => (service.deploy.resources.limits.memory = v)" />
           </b-field>
 
           <b-field :label="$t('CPU Shares')">
diff --git a/src/components/forms/ImportPanel.vue b/src/components/forms/ImportPanel.vue
index 47053881..b50e4d4d 100644
--- a/src/components/forms/ImportPanel.vue
+++ b/src/components/forms/ImportPanel.vue
@@ -1,168 +1,111 @@
-<template>
-  <div class="modal-card">
-    <!-- Modal-Card Header Start -->
-    <header class="modal-card-head">
-      <div class="is-flex-grow-1">
-        <h3 class="title is-header">{{ $t('Import') }}</h3>
-      </div>
-    </header>
-    <!-- Modal-Card Header End -->
-    <!-- Modal-Card Body Start -->
-    <section class="modal-card-body">
-      <b-tabs v-model="activeTab" :animated="false">
-        <b-tab-item label="Docker Compose">
-          <b-field :message="errors" :type="{ 'is-danger': !!errors }">
-            <b-input v-model="dockerComposeCommands" :placeholder="$t('Notice: If there are multiple services, only the first set can be analyzed correctly')" class="import-area" type="textarea"></b-input>
-          </b-field>
-
-          <b-upload ref="importUpload" v-model="dropFiles" accept=".yaml,.yml" drag-drop expanded @input="onSelect">
-            <section class="section">
-              <div class="content has-text-centered">
-                <p>
-                  <b-icon :icon="uploadIcon" custom-size="is-size-2" size="is-40"></b-icon>
-                </p>
-                <p class="has-text-full-03">{{ dropText }}</p>
-              </div>
-            </section>
-          </b-upload>
-
-        </b-tab-item>
-        <b-tab-item label="Docker CLI">
-          <b-field :message="errors" :type="{ 'is-danger': !!errors }" class="mb-0">
-            <b-input v-model="dockerCliCommands" class="import-area-cli" type="textarea"></b-input>
-          </b-field>
-        </b-tab-item>
-
-        <b-tab-item v-if="false" :label="$t('AppFile')">
-          <b-field :message="errors" :type="{ 'is-danger': !!errors }">
-            <b-upload ref="importUpload" v-model="dropFiles" accept="application/json" drag-drop expanded @input="onSelect">
-              <section class="section">
-                <div class="content has-text-centered">
-                  <p>
-                    <b-icon :icon="uploadIcon" size="is-large"></b-icon>
-                  </p>
-                  <p>{{ dropText }}</p>
-                </div>
-              </section>
-            </b-upload>
-          </b-field>
-        </b-tab-item>
-      </b-tabs>
-    </section>
-    <!-- Modal-Card Body End -->
-    <!-- Modal-Card Footer Start-->
-    <footer class="modal-card-foot is-flex is-align-items-center">
-      <div class="is-flex-grow-1 has-text-full-04">
-        
-      </div>
-      <div>
-        <b-button :label="$t('Cancel')" rounded @click="$emit('close')" />
-        <b-button :label="$t('Submit')" rounded type="is-primary" @click="emitSubmit" />
-      </div>
-    </footer>
-    <!-- Modal-Card Footer End -->
-  </div>
-</template>
-
 <script>
-
-import { parse, stringify } from "yaml"
-import composerize from "composerize";
+import { parse, stringify } from 'yaml'
+import composerize from 'composerize'
 
 export default {
+  props: {
+    netWorks: Array,
+    oriNetWorks: Array,
+    deviceMemory: Number,
+  },
+  emits: ['update', 'close'],
   data() {
     return {
       activeTab: 0,
       file: {},
       dropFiles: {},
-      dockerCliCommands: "",
-      dockerComposeCommands: "",
+      dockerCliCommands: '',
+      dockerComposeCommands: '',
       appFileLoaded: false,
-      errors: "",
+      errors: '',
       dropText: this.$t('Drop your Docker Compose file here or click to upload'),
-      uploadIcon: "upload",
+      uploadIcon: 'upload',
     }
   },
-  props: {
-    netWorks: Array,
-    oriNetWorks: Array,
-    deviceMemory: Number
-  },
   methods: {
     /**
      * @description: Emit Event to tell parent Update
-     * @param {*}
      * @return {*} void
      */
     emitSubmit() {
-      if (this.activeTab == 1) {
-        const cleanedCommand = this.dockerCliCommands.replace(/`#.*?`/g, '').replace(/#.*$/gm, '').trim();
-        this.dockerComposeCommands = composerize(cleanedCommand);
-        this.dockerComposeCommands = this.addTitleToYaml(this.dockerComposeCommands)
-        this.$emit('update', this.dockerComposeCommands)
-        this.$emit('close')
-      } else if (this.activeTab == 0) {
-        this.dockerComposeCommands = this.addTitleToYaml(this.dockerComposeCommands)
-        this.errors = ""
-        this.$emit('update', this.dockerComposeCommands)
-        this.$emit('close')
-      } else if (this.activeTab == 2) {
-        if (this.appFileLoaded) {
-          this.errors = ""
+      switch (this.activeTab) {
+        case 0:
+          this.dockerComposeCommands = this.addTitleToYaml(this.dockerComposeCommands)
+          this.errors = ''
+          this.$emit('update', this.dockerComposeCommands)
           this.$emit('close')
-        } else {
-          this.errors = this.$t('Please import a valid App file')
-          this.parseError = true;
+          break
+        case 1: {
+          const cleanedCommand = this.dockerCliCommands.replace(/`#.*?`/g, '').replace(/#.*$/gm, '').trim()
+          this.dockerComposeCommands = composerize(cleanedCommand)
+          this.dockerComposeCommands = this.addTitleToYaml(this.dockerComposeCommands)
+          this.$emit('update', this.dockerComposeCommands)
+          this.$emit('close')
+          break
         }
+        case 2:
+          if (this.appFileLoaded) {
+            this.errors = ''
+            this.$emit('close')
+          }
+          else {
+            this.errors = this.$t('Please import a valid App file')
+            this.parseError = true
+          }
+          break
       }
     },
 
     addTitleToYaml(yaml) {
       const yamlObj = parse(yaml)
+      if (yamlObj['x-casaos'] !== undefined)
+        return yaml
+
       const serviceName = Object.keys(yamlObj.services)[0]
-      if (serviceName == undefined) return stringify(yamlObj)
+      if (serviceName === undefined)
+        return stringify(yamlObj)
       yamlObj['x-casaos'] = {}
       yamlObj['x-casaos'].title = {}
       yamlObj['x-casaos'].title.en_us = serviceName
-      yamlObj['x-casaos'].icon = `https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/${serviceName}/icon.png`
+      yamlObj['x-casaos'].icon = `https://icon.casaos.io/main/all/${serviceName}.png`
       return stringify(yamlObj)
     },
 
     volumeAutoCheck(containerPath, hostPath, appName) {
       let finalHostPath = hostPath
-      const rootDir = "/DATA"
+      const rootDir = '/DATA'
       const checkArray = [
         {
-          keywords: ["config"],
-          value: `/AppData/${appName}${containerPath}`
+          keywords: ['config'],
+          value: `/AppData/${appName}${containerPath}`,
         },
         {
-          keywords: ["tvshows", "TV", "tv"],
-          value: `/Media/TV Shows`
+          keywords: ['tvshows', 'TV', 'tv'],
+          value: `/Media/TV Shows`,
         },
         {
-          keywords: ["movies", "Movie", "movie"],
-          value: `/Media/Movies`
+          keywords: ['movies', 'Movie', 'movie'],
+          value: `/Media/Movies`,
         },
         {
-          keywords: ["Music", "music"],
-          value: `/Media/Music`
+          keywords: ['Music', 'music'],
+          value: `/Media/Music`,
         },
         {
-          keywords: ["download"],
-          value: `/Downloads`
+          keywords: ['download'],
+          value: `/Downloads`,
         },
         {
-          keywords: ["pictures", "photo"],
-          value: `/Gallery`
+          keywords: ['pictures', 'photo'],
+          value: `/Gallery`,
         },
         {
-          keywords: ["media"],
-          value: `/Media`
-        }
+          keywords: ['media'],
+          value: `/Media`,
+        },
       ]
-      checkArray.forEach(item => {
-        if (item.keywords.some(keywordsItem => {
+      checkArray.forEach((item) => {
+        if (item.keywords.some((keywordsItem) => {
           return containerPath.includes(keywordsItem)
         })) {
           finalHostPath = rootDir + item.value
@@ -173,32 +116,32 @@ export default {
 
     /**
      * @description: Make String to Array
-     * @param {*}
+     * @param {*} foo
      * @return {Array}
      */
     makeArray(foo) {
-      const newArray = (typeof (foo) == "string") ? [foo] : foo
-      return (newArray == undefined) ? [] : newArray
+      const newArray = (typeof (foo) == 'string') ? [foo] : foo
+      return (newArray === undefined) ? [] : newArray
     },
 
     checkYAML() {
-      let yaml = parse(this.dockerComposeCommands);
+      const yaml = parse(this.dockerComposeCommands)
       if (!(yaml?.name in yaml.services)) {
-        this.errors = this.$t("Please select a service name in the \"services\" and add it as the value of the top-level attribute \"name\" to serve as the main application.");
+        this.errors = this.$t('Please select a service name in the "services" and add it as the value of the top-level attribute "name" to serve as the main application.')
         return false
       }
       return true
     },
     onSelect(val) {
       const _this = this
-      const reader = new FileReader();
-      if (typeof FileReader === "undefined") {
+      const reader = new FileReader()
+      if (typeof FileReader === 'undefined') {
         this.$buefy.toast.open({
           duration: 3000,
           message: this.$t('Your browser does not support file reading.'),
-          type: 'is-danger'
+          type: 'is-danger',
         })
-        return;
+        return
       }
       reader.readAsText(val)
       reader.onload = function () {
@@ -206,47 +149,113 @@ export default {
       }
     },
     clearInput() {
-      this.uploadIcon = "upload"
+      this.uploadIcon = 'upload'
       this.dropText = this.$t('Drop your Docker Compose file here or click to upload')
       this.appFileLoaded = false
       this.$refs.importUpload.clearInput()
       this.$buefy.toast.open({
         duration: 3000,
         message: this.$t('This is not a valid json file.'),
-        type: 'is-danger'
+        type: 'is-danger',
       })
       this.appFileLoaded = false
     },
 
     getNetworkModel(netName) {
-      const network = this.oriNetWorks.filter(net => {
-        return net.name == netName
+      const network = this.oriNetWorks.filter((net) => {
+        return net.name === netName
       })
       return (network.length > 0) ? network[0].name : this.oriNetWorks[0].name
-
     },
   },
 }
 </script>
 
+<template>
+  <div class="modal-card">
+    <!-- Modal-Card Header Start -->
+    <header class="modal-card-head">
+      <div class="is-flex-grow-1">
+        <h3 class="title is-header">
+          {{ $t('Import') }}
+        </h3>
+      </div>
+    </header>
+    <!-- Modal-Card Header End -->
+    <!-- Modal-Card Body Start -->
+    <section class="modal-card-body">
+      <b-tabs v-model="activeTab" :animated="false">
+        <b-tab-item label="Docker Compose">
+          <b-field :message="errors" :type="{ 'is-danger': !!errors }">
+            <b-input v-model="dockerComposeCommands" :placeholder="$t('Notice: If there are multiple services, only the first set can be analyzed correctly')" class="import-area" type="textarea" />
+          </b-field>
+
+          <b-upload ref="importUpload" v-model="dropFiles" accept=".yaml,.yml" drag-drop expanded @input="onSelect">
+            <section class="section">
+              <div class="content has-text-centered">
+                <p>
+                  <b-icon :icon="uploadIcon" custom-size="is-size-2" size="is-40" />
+                </p>
+                <p class="has-text-full-03">
+                  {{ dropText }}
+                </p>
+              </div>
+            </section>
+          </b-upload>
+        </b-tab-item>
+        <b-tab-item label="Docker CLI">
+          <b-field :message="errors" :type="{ 'is-danger': !!errors }" class="mb-0">
+            <b-input v-model="dockerCliCommands" class="import-area-cli" type="textarea" />
+          </b-field>
+        </b-tab-item>
+
+        <b-tab-item v-if="false" :label="$t('AppFile')">
+          <b-field :message="errors" :type="{ 'is-danger': !!errors }">
+            <b-upload ref="importUpload" v-model="dropFiles" accept="application/json" drag-drop expanded @input="onSelect">
+              <section class="section">
+                <div class="content has-text-centered">
+                  <p>
+                    <b-icon :icon="uploadIcon" size="is-large" />
+                  </p>
+                  <p>{{ dropText }}</p>
+                </div>
+              </section>
+            </b-upload>
+          </b-field>
+        </b-tab-item>
+      </b-tabs>
+    </section>
+    <!-- Modal-Card Body End -->
+    <!-- Modal-Card Footer Start -->
+    <footer class="modal-card-foot is-flex is-align-items-center">
+      <div class="is-flex-grow-1 has-text-full-04" />
+      <div>
+        <b-button :label="$t('Cancel')" rounded @click="$emit('close')" />
+        <b-button :label="$t('Submit')" rounded type="is-primary" @click="emitSubmit" />
+      </div>
+    </footer>
+    <!-- Modal-Card Footer End -->
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .import-area {
-	::v-deep .textarea {
-		height: 22rem;
-	}
+  ::v-deep .textarea {
+    height: 22rem;
+  }
 }
 
 .import-area-cli {
-	::v-deep .textarea {
-		height: 30rem;
-	}
+  ::v-deep .textarea {
+    height: 30rem;
+  }
 }
 
 .control {
-	min-height: 7.25rem;
+  min-height: 7.25rem;
 
-	.section {
-		padding: 0.84375rem;
-	}
+  .section {
+    padding: 0.84375rem;
+  }
 }
-</style>
\ No newline at end of file
+</style>