From 566a243e07a3bf7a9fbe5734fbbaf4cc2967381d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=81=E7=AB=AD=E5=8A=9B?= <jerrykuku@qq.com>
Date: Mon, 11 Nov 2024 18:17:13 +0800
Subject: [PATCH] Fixing Docker import errors (#101)

Fix docker cli import not including title.
Fix docker cli import containing comments.
Fix docker cli import handling config volume errors.
Optimise new tag fetching.
---
 src/App.vue                                 |  10 -
 src/assets/scss/common/_input.scss          |  11 +-
 src/components/AppSetting/ComposeConfig.vue | 336 ++++++---------
 src/components/Apps/AppCard.vue             |  10 +-
 src/components/Apps/AppSection.vue          |  10 +-
 src/components/forms/ImportPanel.vue        | 454 ++++++++++----------
 src/components/forms/InputGroup.vue         | 135 +++---
 src/mixins/app/Business_ShowNewAppTag.js    |   2 +-
 8 files changed, 432 insertions(+), 536 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ff9aa901..e3d893ca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -67,16 +67,6 @@ export default {
 	beforeCreate() {
 	},
 	created() {
-		console.log(`
-MicroApp is created!
-
-┌─┐┌─┐┌─┐┌─┐┌─┐┌─┐   ┌─┐┌─┐┌─┐   ┬ ┬┬
-│  ├─┤└─┐├─┤│ │└─┐───├─┤├─┘├─┘───│ ││
-└─┘┴ ┴└─┘┴ ┴└─┘└─┘   ┴ ┴┴  ┴     └─┘┴
-
--- Made by IceWhale with YOU --
-`, `font-family: monospace`);
-
 		// this.$buefy.config.setOptions(customIconConfig)
 		ConfigProgrammatic.setOptions(customIconConfig);
 	},
diff --git a/src/assets/scss/common/_input.scss b/src/assets/scss/common/_input.scss
index 2449b7ff..5f1a5bc2 100644
--- a/src/assets/scss/common/_input.scss
+++ b/src/assets/scss/common/_input.scss
@@ -47,16 +47,7 @@
 			&::placeholder {
 				color: hsla(208, 16%, 72%, 1);
 			}
-			
-			&[type="password"] {
-				//font-family: "Courier New", monospace;
-				//-webkit-text-security: disc;
-				//-moz-text-security: disc;
-				//text-security: disc;
-				//font-weight: bold;
-				//text-shadow: white 0 0 4px;
-			}
-			
+
 			&.is-success {
 				border: 1px solid hsla(208, 16%, 72%, 1);
 				box-shadow: none;
diff --git a/src/components/AppSetting/ComposeConfig.vue b/src/components/AppSetting/ComposeConfig.vue
index 217f6bdd..1b2d4c0b 100644
--- a/src/components/AppSetting/ComposeConfig.vue
+++ b/src/components/AppSetting/ComposeConfig.vue
@@ -1,83 +1,47 @@
 <template>
   <section style="height: calc(100vh - 12.8125rem)">
     <b-tabs :value="firstAppName" class="has-text-full-03" style="height: 100%">
-      <b-tab-item
-        v-for="(service, key) in configData.services"
-        :key="key"
-        :label="key"
-        :value="key"
-        @click="current_service = key"
-      >
+      <b-tab-item v-for="(service, key) in configData.services" :key="key" :label="key" :value="key"
+        @click="current_service = key">
         <ValidationObserver :ref="key + 'valida'">
           <b-field grouped>
             <ValidationProvider v-slot="{ errors, valid }" name="Image" rules="required" class="is-flex-grow-1">
-              <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="
-                    (E) =>
-                      (service.image = service.image.split(':')[1]
-                        ? E.target._value + ':' + service.image.split(':')[1]
-                        : E.target._value)
-                  "
-                ></b-input>
+              <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="(E) =>
+                    (service.image = service.image.split(':')[1]
+                      ? E.target._value + ':' + service.image.split(':')[1]
+                      : E.target._value)
+                      "></b-input>
               </b-field>
             </ValidationProvider>
 
             <ValidationProvider v-slot="{ errors, valid }" name="Image1" rules="required">
-              <b-field
-                class="ml-2"
-                :label="$t('Tag')"
-                :message="$t(errors)"
-                :type="{ 'is-danger': errors[0], 'is-success': valid }"
-              >
+              <b-field class="ml-2" :label="$t('Tag')" :message="$t(errors)"
+                :type="{ 'is-danger': errors[0], 'is-success': valid }">
                 <b-dropdown :value="getLateField(service.image)" aria-role="menu" trap-focus>
                   <template #trigger>
-                    <b-input
-                      icon-pack="casa"
-                      icon-right="down-outline"
-                      class="is-flex-grow-1 w-48"
-                      :value="getLateField(service.image)"
-                      @input="
-                        (V) => {
-                          service.image = service.image.split(':')[0] + ':' + V;
-                        }
-                      "
-                    >
+                    <b-input icon-pack="casa" icon-right="down-outline" class="w-48 is-flex-grow-1"
+                      :value="getLateField(service.image)" @input="(V) => {
+                        service.image = service.image.split(':')[0] + ':' + V;
+                      }
+                        ">
                     </b-input>
                   </template>
-                  <b-dropdown-item
-                    key="latest"
-                    @click="
-                      () => {
-                        service.image = service.image.split(':')[0] + ':latest';
-                      }
-                    "
-                  >
+                  <b-dropdown-item key="latest" @click="() => {
+                    service.image = service.image.split(':')[0] + ':latest';
+                  }
+                    ">
                     latest
                   </b-dropdown-item>
-                  <b-dropdown-item
-                    key="stable"
-                    v-show="serviceStableVersion !== ''"
-                    @click="
-                      () => {
-                        service.image = service.image.split(':')[0] + ':' + serviceStableVersion;
-                      }
-                    "
-                  >
+                  <b-dropdown-item key="stable" v-show="serviceStableVersion !== ''" @click="() => {
+                    service.image = service.image.split(':')[0] + ':' + serviceStableVersion;
+                  }
+                    ">
                     stable({{ serviceStableVersion }})
                   </b-dropdown-item>
                 </b-dropdown>
@@ -85,29 +49,18 @@
             </ValidationProvider>
           </b-field>
           <ValidationProvider v-slot="{ errors, valid }" name="composeAppName" rules="required">
-            <b-field
-              :label="$t('App Name') + ' *'"
-              :message="$t(errors)"
-              :type="{ 'is-danger': errors[0], 'is-success': valid }"
-            >
-              <b-input
-                :placeholder="$t('e.g.,Your App Name')"
-                :value="i18n(configData['x-casaos'].title)"
-                @blur="(E) => (configData['x-casaos'].title.custom = E.target._value)"
-              ></b-input>
+            <b-field :label="$t('App Name') + ' *'" :message="$t(errors)"
+              :type="{ 'is-danger': errors[0], 'is-success': valid }">
+              <b-input :placeholder="$t('e.g.,Your App Name')" :value="i18n(configData['x-casaos'].title)"
+                @blur="(E) => (configData['x-casaos'].title.custom = E.target._value)"></b-input>
             </b-field>
           </ValidationProvider>
 
           <b-field v-if="key === firstAppName" :label="$t('Icon URL')">
             <p class="control">
               <span class="button is-static container-icon">
-                <b-image
-                  :key="appIcon"
-                  :src="appIcon"
-                  :src-fallback="require('@/assets/img/app/default.svg')"
-                  class="is-32x32"
-                  ratio="1by1"
-                ></b-image>
+                <b-image :key="appIcon" :src="appIcon" :src-fallback="require('@/assets/img/app/default.svg')"
+                  class="is-32x32" ratio="1by1"></b-image>
               </span>
             </p>
             <b-input v-model="configData['x-casaos'].icon" :placeholder="$t('Your custom icon URL')" expanded></b-input>
@@ -119,29 +72,16 @@
               <option value="https">https://</option>
             </b-select>
             <b-input v-model="configData['x-casaos'].hostname" :placeholder="baseUrl" expanded></b-input>
-            <b-autocomplete
-              v-model="configData['x-casaos'].port_map"
-              :data="bridgePorts(configData.services)"
-              :open-on-focus="true"
-              :placeholder="$t('Port')"
-              class="has-colon"
-              field="hostname"
-              @select="(option) => (portSelected = option)"
-            ></b-autocomplete>
-            <b-input
-              v-model="configData['x-casaos'].index"
-              :placeholder="'/index.html ' + $t('[Optional]')"
-              expanded
-            ></b-input>
+            <b-autocomplete v-model="configData['x-casaos'].port_map" :data="bridgePorts(configData.services)"
+              :open-on-focus="true" :placeholder="$t('Port')" class="has-colon" field="hostname"
+              @select="(option) => (portSelected = option)"></b-autocomplete>
+            <b-input v-model="configData['x-casaos'].index" :placeholder="'/index.html ' + $t('[Optional]')"
+              expanded></b-input>
           </b-field>
 
           <b-field :label="$t('Network')">
-            <b-select
-              :value="service.network_mode || service?.networks?.[0]"
-              expanded
-              placeholder="Select"
-              @input="(v) => patchNetworkValue(v, service)"
-            >
+            <b-select :value="service.network_mode || service?.networks?.[0]" expanded placeholder="Select"
+              @input="(v) => patchNetworkValue(v, service)">
               <optgroup v-for="net in appendNetworks" :key="net.driver" :label="net.driver">
                 <option v-for="(option, index) in net.networks" :key="option.name + index" :value="option.name">
                   {{ option.name }}
@@ -150,45 +90,25 @@
             </b-select>
           </b-field>
 
-          <ports
-            v-if="showPorts(service)"
-            v-model="service.ports"
-            :ports_in_use="ports_in_use"
-            :showHostPost="showHostPort(service)"
-          ></ports>
-
-          <volumes-input-group
-            v-model="service.volumes"
-            :label="$t('Volumes')"
-            name2="ZimaOS"
-            :name1="i18n(configData['x-casaos'].title)"
-            :message="$t('No volumes now, click “+” to add one.')"
-            type="volume"
-          >
+          <ports v-if="showPorts(service)" v-model="service.ports" :ports_in_use="ports_in_use"
+            :showHostPost="showHostPort(service)"></ports>
+
+          <volumes-input-group v-model="service.volumes" :label="$t('Volumes')" name2="ZimaOS"
+            :name1="i18n(configData['x-casaos'].title)" :message="$t('No volumes now, click “+” to add one.')"
+            type="volume">
             <template #label-extra>
               <AppMigrationBtn />
             </template>
           </volumes-input-group>
-          <env-input-group
-            v-model="service.environment"
-            :label="$t('Environment Variables')"
-            :message="$t('No environment variables now, click “+” to add one.')"
-          >
+          <env-input-group v-model="service.environment" :label="$t('Environment Variables')"
+            :message="$t('No environment variables now, click “+” to add one.')">
           </env-input-group>
-          <input-group
-            :devices="service.devices"
-            :label="$t('Devices')"
-            name2="ZimaOS"
-            :name1="i18n(configData['x-casaos'].title)"
-            :message="$t('No devices now, click “+” to add one.')"
-            type="device"
-          >
+          <input-group :devices="service.devices" :label="$t('Devices')" name2="ZimaOS"
+            :name1="i18n(configData['x-casaos'].title)" :message="$t('No devices now, click “+” to add one.')"
+            type="device">
           </input-group>
-          <commands-input
-            v-model="service.command"
-            :label="$t('Container Command')"
-            :message="$t('No commands now, click “+” to add one.')"
-          >
+          <commands-input v-model="service.command" :label="$t('Container Command')"
+            :message="$t('No commands now, click “+” to add one.')">
           </commands-input>
 
           <b-field :label="$t('Privileged')">
@@ -196,12 +116,9 @@
           </b-field>
 
           <b-field :label="$t('Memory Limit')">
-            <vue-slider
-              :max="totalMemory"
-              :min="memory_min"
+            <vue-slider :max="totalMemory" :min="memory_min"
               :value="service.deploy.resources.limits.memory | duplexDisplay"
-              @change="(v) => (service.deploy.resources.limits.memory = v)"
-            ></vue-slider>
+              @change="(v) => (service.deploy.resources.limits.memory = v)"></vue-slider>
           </b-field>
 
           <b-field :label="$t('CPU Shares')">
@@ -221,27 +138,15 @@
           </b-field>
 
           <b-field :label="$t('Container Capabilities (cap-add)')">
-            <b-taginput
-              ref="taginput"
-              v-model="service.cap_add"
-              :allow-new="false"
-              :data="capArray"
-              :open-on-focus="false"
-              autocomplete
-              @typing="getFilteredTags"
-            >
+            <b-taginput ref="taginput" v-model="service.cap_add" :allow-new="false" :data="capArray"
+              :open-on-focus="false" autocomplete @typing="getFilteredTags">
               <template slot-scope="props">
                 {{ props.option }}
               </template>
               <template #empty> There are no items</template>
               <template #portSelected="props">
-                <b-tag
-                  v-for="(tag, index) in props.tags"
-                  :key="index"
-                  :tabstop="false"
-                  closable
-                  @close="$refs.taginput.removeTag(index, $event)"
-                >
+                <b-tag v-for="(tag, index) in props.tags" :key="index" :tabstop="false" closable
+                  @close="$refs.taginput.removeTag(index, $event)">
                   {{ tag }}
                 </b-tag>
               </template>
@@ -249,11 +154,8 @@
           </b-field>
 
           <ValidationProvider v-slot="{ errors, valid }" name="ContainerName" rules="ContainerName">
-            <b-field
-              :label="$t('Container Name')"
-              :message="$t(errors)"
-              :type="{ 'is-danger': errors[0], 'is-success': valid && service.container_name }"
-            >
+            <b-field :label="$t('Container Name')" :message="$t(errors)"
+              :type="{ 'is-danger': errors[0], 'is-success': valid && service.container_name }">
               <b-input v-model="service.container_name" :placeholder="$t('Name of app container')" value=""></b-input>
             </b-field>
           </ValidationProvider>
@@ -392,37 +294,37 @@ export default {
       required: true,
     },
     /*networks STRUCTURE [
-			{
-				"driver": "host",
-				"networks": [
-					{
-						"driver": "host",
-						"id": "3014e1842267eb8aabea9e83b21ff95f36d988c519a51b107d86db9906501ba0",
-						"name": "host"
-					}
-				]
-			},
-			{
-				"driver": "bridge",
-				"networks": [
-					{
-						"driver": "bridge",
-						"id": "AAA",
-						"name": "AAA"
-					},
-					{
-						"driver": "bridge",
-						"id": "BBB",
-						"name": "BBB"
-					},
-					{
-						"driver": "bridge",
-						"id": "CCC",
-						"name": "bridge"
-					}
-				]
-			}
-		]*/
+      {
+        "driver": "host",
+        "networks": [
+          {
+            "driver": "host",
+            "id": "3014e1842267eb8aabea9e83b21ff95f36d988c519a51b107d86db9906501ba0",
+            "name": "host"
+          }
+        ]
+      },
+      {
+        "driver": "bridge",
+        "networks": [
+          {
+            "driver": "bridge",
+            "id": "AAA",
+            "name": "AAA"
+          },
+          {
+            "driver": "bridge",
+            "id": "BBB",
+            "name": "BBB"
+          },
+          {
+            "driver": "bridge",
+            "id": "CCC",
+            "name": "bridge"
+          }
+        ]
+      }
+    ]*/
     networks: {
       type: Array,
       required: true,
@@ -629,14 +531,16 @@ export default {
         this.$delete(this.configData.services, MAIN_APP_KEY);
         // this.current_service = yaml["x-casaos"].main;
         this.current_service = Object.keys(yaml.services)[0];
-        console.log(Object.keys(yaml.services)[0], "parseComposeYaml", this.configData.name);
         // 解析 services，并将其赋值到 configData.services中。
+
+        // set top level x-casaos data
+        this.configData["x-casaos"] = merge(this.configData["x-casaos"], yaml["x-casaos"]);
+
         for (const serviceKey in yaml.services) {
           this.$set(this.configData.services, serviceKey, this.parseComposeItem(yaml.services[serviceKey]));
         }
 
-        // set top level x-casaos data
-        this.configData["x-casaos"] = merge(this.configData["x-casaos"], yaml["x-casaos"]);
+
       } catch (error) {
         console.log(error);
       }
@@ -670,17 +574,17 @@ export default {
 
       //Ports
       /*
-			- "3000"
-			- "3000-3005"
-			- "8000:8000"
-			- "9090-9091:8080-8081"
-			- "49100:22"
-			- "127.0.0.1:8001:8001"
-			- "127.0.0.1:5000-5010:5000-5010"
-			- "127.0.0.1:5000-5010:5000-5010/udp"
-			- "6060:6060/udp"
-			test_data : ["3000-3005", "8000:8000", "9090-9091:8080-8081", "49100:22", "127.0.0.1:8001:8001", "127.0.0.1:5000-5010:5000-5010","6060:6060/udp"]
-			*/
+      - "3000"
+      - "3000-3005"
+      - "8000:8000"
+      - "9090-9091:8080-8081"
+      - "49100:22"
+      - "127.0.0.1:8001:8001"
+      - "127.0.0.1:5000-5010:5000-5010"
+      - "127.0.0.1:5000-5010:5000-5010/udp"
+      - "6060:6060/udp"
+      test_data : ["3000-3005", "8000:8000", "9090-9091:8080-8081", "49100:22", "127.0.0.1:8001:8001", "127.0.0.1:5000-5010:5000-5010","6060:6060/udp"]
+      */
       composeServicesItem.ports = this.makeArray(composeServicesItemInput.ports).map((item) => {
         if (isString(item)) {
           const regex =
@@ -704,6 +608,11 @@ export default {
       });
       isNil(composeServicesItem.ports) && this.$set(composeServicesItem, "ports", []);
 
+      // set first port to port_map
+      // if (composeServicesItem.ports.length > 0 && !this.configData["x-casaos"].port_map) {
+      //   this.configData["x-casaos"].port_map = composeServicesItem.ports[0].published;
+      // }
+
       //Volume
       // https://yeasy.gitbook.io/docker_practice/compose/compose_file#volumes
       composeServicesItem.volumes = this.makeArray(composeServicesItemInput.volumes).map((item) => {
@@ -719,13 +628,13 @@ export default {
             return {
               type: "bind",
               target: ii[1],
-              source: this.volumeAutoCheck(ii[1], ii[0], lowerFirst(composeServicesItem.label)),
+              source: this.volumeAutoCheck(ii[1], ii[0], lowerFirst(this.configData["x-casaos"].title.en_us)),
             };
           } else {
             return {
               type: "bind",
               target: ii[0],
-              source: this.volumeAutoCheck(ii[0], "", lowerFirst(composeServicesItem.label)),
+              source: this.volumeAutoCheck(ii[0], "", lowerFirst(this.configData["x-casaos"].title.en_us)),
             };
           }
         } else if (item) {
@@ -874,7 +783,6 @@ export default {
           finalHostPath = rootDir + item.value;
         }
       });
-
       return finalHostPath;
     },
 
@@ -971,11 +879,11 @@ export default {
     },
     bridgePorts(services) {
       /*
-			 - "3000"
-			 - "3000-3005"
-			 - "127.0.0.1:8001"
-			 - "127.0.0.1:5000-5010"
-			 */
+       - "3000"
+       - "3000-3005"
+       - "127.0.0.1:8001"
+       - "127.0.0.1:5000-5010"
+       */
 
       let published,
         result = [];
@@ -1043,10 +951,12 @@ export default {
 .app-card .modal-card-head.setting-compose-panel {
   background-color: hsla(208, 16%, 94%, 1);
 }
+
 // 滚动条背景,
 .b-tabs .tab-content::-webkit-scrollbar {
   background-color: rgba(255, 255, 255, 0);
 }
+
 // 滚动条颜色
 .b-tabs .tab-content::-webkit-scrollbar-thumb {
   background-color: hsla(208, 16%, 94%, 1);
diff --git a/src/components/Apps/AppCard.vue b/src/components/Apps/AppCard.vue
index 79e4d0e1..b7c07a3a 100644
--- a/src/components/Apps/AppCard.vue
+++ b/src/components/Apps/AppCard.vue
@@ -153,7 +153,7 @@
 				type="is-white"
 			>
 				<div
-					class="has-text-centered is-flex is-justify-content-center is-flex-direction-column pt-5 pb-3px img-c"
+					class="pt-5 has-text-centered is-flex is-justify-content-center is-flex-direction-column pb-3px img-c"
 				>
 					<div class="is-flex is-justify-content-center">
 						<div class="is-relative">
@@ -166,7 +166,7 @@
 								@click.native="openApp(item)"
 							></b-image>
 							<!-- Unstable-->
-							<cTooltip v-if="newAppIds.includes(item.name)" class="__position" content="NEW"></cTooltip>
+							<cTooltip v-if="appIds.includes(item.name)" class="__position" content="NEW"></cTooltip>
 						</div>
 
 						<!-- Loading Bar Start -->
@@ -245,6 +245,10 @@ export default {
 			type: Object,
 			required: true,
 		},
+    appIds: {
+      type: Array,
+      required: true,
+    },
 	},
 	computed: {
 		tooltipLabel() {
@@ -488,7 +492,7 @@ export default {
 				message: this.$t(
 					`Data cannot be recovered after deletion! <br/>Continue on to uninstall this application?<br/>{divS}Delete userdata ( config folder ){divE}`,
 					{
-						divS: `<div class="is-flex is-align-items-center mt-4"><input type="checkbox" checked id="checkDelConfig">`,
+						divS: `<div class="mt-4 is-flex is-align-items-center"><input type="checkbox" checked id="checkDelConfig">`,
 						divE: `</input></div>`,
 					}
 				),
diff --git a/src/components/Apps/AppSection.vue b/src/components/Apps/AppSection.vue
index d3458ed2..096961e4 100644
--- a/src/components/Apps/AppSection.vue
+++ b/src/components/Apps/AppSection.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="home-section has-text-left">
     <!-- Title Bar Start -->
-    <div class="is-flex is-align-items-center mb-1">
+    <div class="mb-1 is-flex is-align-items-center">
       <app-section-title-tip
         id="appTitle1"
         class="is-flex-grow-1 has-text-sub-04"
@@ -35,7 +35,7 @@
     <draggable
       v-model="appList"
       :draggable="draggable"
-      class="columns is-variable is-2 is-multiline app-list contextmenu-canvas m-0"
+      class="m-0 columns is-variable is-2 is-multiline app-list contextmenu-canvas"
       tag="div"
       v-bind="dragOptions"
       @end="onSortEnd"
@@ -51,6 +51,7 @@
         >
           <app-card
             :item="item"
+            :appIds="newAppIds"
             @configApp="showConfigPanel"
             @importApp="showContainerPanel"
             @updateState="getList"
@@ -73,7 +74,7 @@
 
     <template v-if="oldAppList.length > 0">
       <!-- Title Bar Start -->
-      <div class="title-bar is-flex is-align-items-center mt-2rem mb-5">
+      <div class="mb-5 title-bar is-flex is-align-items-center mt-2rem">
         <app-section-title-tip
           id="appTitle2"
           class="is-flex-grow-1 has-text-sub-04"
@@ -210,6 +211,7 @@ export default {
         });
       },
     });
+    this.getNewAppIdsFromCustomStorage();
 
     this.isLoading = true;
     this.draggable = this.isMobile() ? "" : ".handle";
@@ -376,8 +378,6 @@ export default {
           };
           item.linkId = i;
         });
-        console.log("linkAppList", linkAppList);
-        
         // mirco app list
         if (this.mircoAppList.length === 0) {
           const mircoAppListRaw = await this.getModuleUIEntries();
diff --git a/src/components/forms/ImportPanel.vue b/src/components/forms/ImportPanel.vue
index 40f05bd8..db1d6eae 100644
--- a/src/components/forms/ImportPanel.vue
+++ b/src/components/forms/ImportPanel.vue
@@ -8,260 +8,272 @@
 
   -->
 <template>
-	<div class="modal-card">
-		<!-- Modal-Card Header Start -->
-		<header class="modal-card-head">
-			<div class="is-flex-grow-1">
-				<h3 class="title is-3">{{ $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>
+  <div class="modal-card">
+    <!-- Modal-Card Header Start -->
+    <header class="modal-card-head">
+      <div class="is-flex-grow-1">
+        <h3 class="title is-3">{{ $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-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}">
-						<b-input v-model="dockerCliCommands" class="import-area" type="textarea"></b-input>
-					</b-field>
-				</b-tab-item>
+        </b-tab-item>
+        <b-tab-item label="Docker CLI">
+          <b-field :message="errors" :type="{ 'is-danger': !!errors }">
+            <b-input v-model="dockerCliCommands" class="import-area" 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-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>
+      </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">
-				<a href="https://www.composerize.com/" target="_blank">{{ $t('cli to compose...') }}</a>
-			</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>
+    </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">
+        <a href="https://www.composerize.com/" target="_blank">{{ $t('cli to compose...') }}</a>
+      </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}        from "yaml"
+import { parse ,stringify } from "yaml"
 import composerize from "composerize";
 
 export default {
-	data() {
-		return {
-			activeTab: 0,
-			file: {},
-			dropFiles: {},
-			dockerCliCommands: "",
-			dockerComposeCommands: "",
-			appFileLoaded: false,
-			errors: "",
-			dropText: this.$t('Drop your Docker Compose file here or click to upload'),
-			uploadIcon: "upload",
-		}
-	},
-	props: {
-		// initData: Object,
-		netWorks: Array,
-		oriNetWorks: Array,
-		deviceMemory: Number
-	},
-	methods: {
-		/**
-		 * @description: Emit Event to tell parent Update
-		 * @param {*}
-		 * @return {*} void
-		 */
-		emitSubmit() {
-			if (this.activeTab == 1) {
-				this.dockerComposeCommands = composerize(this.dockerCliCommands);
-				this.$emit('update', this.dockerComposeCommands)
-				this.$emit('close')
-			} else if (this.activeTab == 0) {
+  data() {
+    return {
+      activeTab: 0,
+      file: {},
+      dropFiles: {},
+      dockerCliCommands: "",
+      dockerComposeCommands: "",
+      appFileLoaded: false,
+      errors: "",
+      dropText: this.$t('Drop your Docker Compose file here or click to upload'),
+      uploadIcon: "upload",
+    }
+  },
+  props: {
+    // initData: Object,
+    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 = ""
+          this.$emit('close')
+        } else {
+          this.errors = this.$t('Please import a valid App file')
+          this.parseError = true;
+        }
+      }
+    },
 
-				this.errors = ""
-				this.$emit('update', this.dockerComposeCommands)
-				this.$emit('close')
-			} else if (this.activeTab == 2) {
-				if (this.appFileLoaded) {
-					this.errors = ""
-					this.$emit('close')
-				} else {
-					this.errors = this.$t('Please import a valid App file')
-					this.parseError = true;
-				}
-			}
-		},
-		
-		volumeAutoCheck(containerPath, hostPath, appName) {
-			let finalHostPath = hostPath
-			const rootDir = "/DATA"
-			const checkArray = [
-				{
-					keywords: ["config"],
-					value: `/AppData/${appName}${containerPath}`
-				},
-				{
-					keywords: ["tvshows", "TV", "tv"],
-					value: `/Media/TV Shows`
-				},
-				{
-					keywords: ["movies", "Movie", "movie"],
-					value: `/Media/Movies`
-				},
-				{
-					keywords: ["Music", "music"],
-					value: `/Media/Music`
-				},
-				{
-					keywords: ["download"],
-					value: `/Downloads`
-				},
-				{
-					keywords: ["pictures", "photo"],
-					value: `/Gallery`
-				},
-				{
-					keywords: ["media"],
-					value: `/Media`
-				}
+    addTitleToYaml(yaml) {
+      const yamlObj = parse(yaml)
+      const serviceName = Object.keys(yamlObj.services)[0]
+      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`
+      return stringify(yamlObj)
+    },
 
-			]
+    volumeAutoCheck(containerPath, hostPath, appName) {
+      let finalHostPath = hostPath
+      const rootDir = "/DATA"
+      const checkArray = [
+        {
+          keywords: ["config"],
+          value: `/AppData/${appName}${containerPath}`
+        },
+        {
+          keywords: ["tvshows", "TV", "tv"],
+          value: `/Media/TV Shows`
+        },
+        {
+          keywords: ["movies", "Movie", "movie"],
+          value: `/Media/Movies`
+        },
+        {
+          keywords: ["Music", "music"],
+          value: `/Media/Music`
+        },
+        {
+          keywords: ["download"],
+          value: `/Downloads`
+        },
+        {
+          keywords: ["pictures", "photo"],
+          value: `/Gallery`
+        },
+        {
+          keywords: ["media"],
+          value: `/Media`
+        }
 
-			checkArray.forEach(item => {
-				if (item.keywords.some(keywordsItem => {
-					return containerPath.includes(keywordsItem)
-				})) {
-					finalHostPath = rootDir + item.value
+      ]
 
-				}
-			})
+      checkArray.forEach(item => {
+        if (item.keywords.some(keywordsItem => {
+          return containerPath.includes(keywordsItem)
+        })) {
+          finalHostPath = rootDir + item.value
 
-			return finalHostPath
-		},
+        }
+      })
 
-		/**
-		 * @description: Make String to Array
-		 * @param {*}
-		 * @return {Array}
-		 */
-		makeArray(foo) {
-			const newArray = (typeof (foo) == "string") ? [foo] : foo
-			return (newArray == undefined) ? [] : newArray
-		},
+      return finalHostPath
+    },
 
-		checkYAML() {
-			let 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.");
-				return false
-			}
-			return true
-		},
-		
-		onSelect(val) {
-			const _this = this
-			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'
-				})
-				return;
-			}
-			reader.readAsText(val)
-			reader.onload = function () {
-				_this.dockerComposeCommands = this.result
-			}
-		},
-		
-		clearInput() {
-			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'
-			})
-			this.appFileLoaded = false
-		},
+    /**
+     * @description: Make String to Array
+     * @param {*}
+     * @return {Array}
+     */
+    makeArray(foo) {
+      const newArray = (typeof (foo) == "string") ? [foo] : foo
+      return (newArray == undefined) ? [] : newArray
+    },
 
-		getNetworkModel(netName) {
-			const network = this.oriNetWorks.filter(net => {
-				return net.name == netName
-			})
-			return (network.length > 0) ? network[0].name : this.oriNetWorks[0].name
+    checkYAML() {
+      let 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.");
+        return false
+      }
+      return true
+    },
 
-		},
-	},
+    onSelect(val) {
+      const _this = this
+      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'
+        })
+        return;
+      }
+      reader.readAsText(val)
+      reader.onload = function () {
+        _this.dockerComposeCommands = this.result
+      }
+    },
+
+    clearInput() {
+      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'
+      })
+      this.appFileLoaded = false
+    },
+
+    getNetworkModel(netName) {
+      const network = this.oriNetWorks.filter(net => {
+        return net.name == netName
+      })
+      return (network.length > 0) ? network[0].name : this.oriNetWorks[0].name
+
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 // layout
-.modal-card{
-	width: 960px;
+.modal-card {
+  width: 960px;
 }
-@media screen and (max-width: 960px){
-	.modal-card{
-		width: 100%;
-	}
+
+@media screen and (max-width: 960px) {
+  .modal-card {
+    width: 100%;
+  }
 }
 
 .import-area {
-	.textarea {
-		max-height: 40em;
-		min-height: 173px;
-	}
+  .textarea {
+    max-height: 40em;
+    min-height: 173px;
+  }
 }
 
 .control {
-	min-height: 7.25rem;
+  min-height: 7.25rem;
 
-	.section {
-		padding: 0.84375rem;
-	}
+  .section {
+    padding: 0.84375rem;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/forms/InputGroup.vue b/src/components/forms/InputGroup.vue
index 5e30937a..188d251a 100644
--- a/src/components/forms/InputGroup.vue
+++ b/src/components/forms/InputGroup.vue
@@ -1,54 +1,44 @@
-<!--
-  * @LastEditors: zhanghengxin ezreal.zhang@icewhale.org
-  * @LastEditTime: 2023/2/16 下午4:25
-  * @FilePath: /CasaOS-UI/src/components/forms/InputGroup.vue
-  * @Description:
-  *
-  * Copyright (c) 2023 by IceWhale, All Rights Reserved.
-  -->
 <template>
-	<div class="mb-5">
-		<div class="field is-flex is-align-items-center mb-2">
-			<label class="label mb-0 is-flex-grow-1">{{ label }}</label>
-			<b-button icon-left="plus" rounded size="is-small" @click="addItem">{{ $t('Add') }}</b-button>
-		</div>
-		<div v-if="items.length == 0" class="is-flex is-align-items-center mb-5 info">
-			<b-icon class="mr-2 " icon="information" size="is-small"></b-icon>
-			<span>
-                {{ message }}
-            </span>
-		</div>
+  <div class="mb-5">
+    <div class="mb-2 field is-flex is-align-items-center">
+      <label class="mb-0 label is-flex-grow-1">{{ label }}</label>
+      <b-button icon-left="plus" rounded size="is-small" @click="addItem">{{ $t('Add') }}</b-button>
+    </div>
+    <div v-if="items.length == 0" class="mb-5 is-flex is-align-items-center info">
+      <b-icon class="mr-2 " icon="information" size="is-small"></b-icon>
+      <span>
+        {{ message }}
+      </span>
+    </div>
 
-		<div v-for="(item, index) in items" :key="'port' + index" class="port-item">
-			<b-icon class="is-clickable" icon="close" size="is-small" @click.native="removeItem(index)"></b-icon>
-			<template v-if="index < 1">
-				<b-field grouped>
-					<b-field :label="$t(name2)" expanded>
-						<icon-input v-model="item.host" :placeholder="$t(name2)" :type="type" expanded
-						></icon-input>
-					</b-field>
-					<b-field :label="$t(name1)" expanded>
-						<b-input v-model="item.container" :placeholder="$t(name1)" expanded></b-input>
-					</b-field>
+    <div v-for="(item, index) in items" :key="'port' + index" class="port-item">
+      <b-icon class="is-clickable" icon="close" size="is-small" @click.native="removeItem(index)"></b-icon>
+      <template v-if="index < 1">
+        <b-field grouped>
+          <b-field :label="$t(name2)" expanded>
+            <icon-input v-model="item.host" :placeholder="$t(name2)" :type="type" expanded></icon-input>
+          </b-field>
+          <b-field :label="$t(name1)" expanded>
+            <b-input v-model="item.container" :placeholder="$t(name1)" expanded></b-input>
+          </b-field>
 
-				</b-field>
-			</template>
-			<template v-else>
-				<b-field grouped>
-					<b-field expanded>
-						<icon-input v-model="item.host" :placeholder="$t(name2)" :type="type" expanded
-						></icon-input>
-					</b-field>
-					<b-field expanded>
-						<b-input v-model="item.container" :placeholder="$t(name1)" expanded></b-input>
-					</b-field>
+        </b-field>
+      </template>
+      <template v-else>
+        <b-field grouped>
+          <b-field expanded>
+            <icon-input v-model="item.host" :placeholder="$t(name2)" :type="type" expanded></icon-input>
+          </b-field>
+          <b-field expanded>
+            <b-input v-model="item.container" :placeholder="$t(name1)" expanded></b-input>
+          </b-field>
 
-				</b-field>
+        </b-field>
 
-			</template>
-		</div>
+      </template>
+    </div>
 
-	</div>
+  </div>
 </template>
 
 <script setup>
@@ -57,45 +47,44 @@ import IconInput from '../forms/IconInput.vue'
 
 
 const props = defineProps({
-	devices: Array,
-	label: String,
-	message: String,
-	type: String,
-	name1: {
-		type: String,
-		default: "Container"
-	},
-	name2: {
-		type: String,
-		default: "Host"
-	},
+  devices: Array,
+  label: String,
+  message: String,
+  type: String,
+  name1: {
+    type: String,
+    default: "Container"
+  },
+  name2: {
+    type: String,
+    default: "Host"
+  },
 })
 
 const items = computed({
-	get() {
-		console.log(props.devices)
-		return props.devices
-	},
-	set(val) {
-		emit('change', val)
-	}
+  get() {
+    return props.devices
+  },
+  set(val) {
+    emit('change', val)
+  }
 })
 
 const addItem = () => {
-	let itemObj = {
-		container: "",
-		host: ""
-	}
-	items.value.push(itemObj)
+  let itemObj = {
+    container: "",
+    host: ""
+  }
+  items.value.push(itemObj)
 }
 
 const removeItem = (index) => {
-	items.value.splice(index, 1)
+  items.value.splice(index, 1)
 }
 defineExpose({
-	items,
-	addItem,
-	removeItem
+  items,
+  addItem,
+  removeItem
 })
 
 </script>
\ No newline at end of file
diff --git a/src/mixins/app/Business_ShowNewAppTag.js b/src/mixins/app/Business_ShowNewAppTag.js
index ed75030e..d6b0f1d9 100644
--- a/src/mixins/app/Business_ShowNewAppTag.js
+++ b/src/mixins/app/Business_ShowNewAppTag.js
@@ -7,7 +7,7 @@ export default {
 		}
 	},
 	mounted() {
-		this.getNewAppIdsFromCustomStorage();
+		// this.getNewAppIdsFromCustomStorage();
 	},
 	methods: {
 		// getSessionStorageOutputArray() {