feat: 添加标签功能支持

src/assets/lang/en_US.json

@@ -112,6 +112,7 @@
   "Ports": "Port",
   "Volumes": "Volumes",
   "Environment Variables": "Environment Variables",
+  "Labels": "Labels",
   "Devices": "Devices",
   "Memory Limit": "Memory Limit",
   "CPU Shares": "CPU Shares",
@@ -120,6 +121,7 @@
   "No ports now, click “+” to add one.": "Click “+” to add one.",
   "No volumes now, click “+” to add one.": "Click “+” to add one.",
   "No environment variables now, click “+” to add one.": "Click “+” to add one.",
+  "No labels now, click “+” to add one.": "Click “+” to add one.",
   "No devices now, click “+” to add one.": "Click “+” to add one.",
   "No commands now, click “+” to add one.": "Click “+” to add one.",
   "e.g.,hello-world:latest": "e.g. hello-world:latest",

src/assets/lang/zh_CN.json

@@ -112,6 +112,7 @@
   "Ports": "端口",
   "Volumes": "卷",
   "Environment Variables": "环境变量",
+  "Labels": "标签",
   "Devices": "设备",
   "Memory Limit": "内存限制",
   "CPU Shares": "CPU 限制",
@@ -120,6 +121,7 @@
   "No ports now, click “+” to add one.": "点击“+”添加一个。",
   "No volumes now, click “+” to add one.": "点击“+”添加一个。",
   "No environment variables now, click “+” to add one.": "点击“+”添加一个。",
+  "No labels now, click “+” to add one.": "点击“+”添加一个。",
   "No devices now, click “+” to add one.": "点击“+”添加一个。",
   "No commands now, click “+” to add one.": "点击“+”添加一个。",
   "e.g.,hello-world:latest": "例如: hello-world:latest",

src/components/Apps/ComposeConfig.vue

@@ -21,6 +21,7 @@
 import Ports from '../forms/Ports.vue'
 import { ice_i18n } from '@/mixins/base/common-i18n'
 import VolumesInputGroup from '@/components/forms/VolumesInputGroup.vue'
+import LabelsInputGroup from '@/components/forms/LabelsInputGroup.vue'
 
 const data = [
   'AUDIT_CONTROL',
@@ -63,6 +64,7 @@
     EnvInputGroup,
     CommandsInput,
     VueSlider,
+    LabelsInputGroup,
   },
   filters: {
     duplexDisplay(val) {
@@ -119,6 +121,7 @@
             environment: [],
             devices: [],
             command: [],
+            labels: [],
             container_name: '',
             deploy: {
               resources: {
@@ -210,7 +213,7 @@
             .then((res) => {
               this.serviceStableVersion = res.data.data.tag
             })
-            .catch((e) => {
+            .catch((_e) => {
               this.serviceStableVersion = ''
             })
         }
@@ -393,7 +396,7 @@
         composeServicesItem.environment = envArray.map((item) => {
           const ii = typeof item === 'object' ? Array.from(item) : item.split('=')
           return {
             host: ii[1].replace(/"/g, ''),
             container: ii[0],
           }
         })
@@ -402,6 +405,23 @@
         composeServicesItem.environment = []
       }
 
+      // Labels
+      if (composeServicesItemInput.labels) {
+        const labelsArray = Array.isArray(composeServicesItemInput.labels)
+          ? composeServicesItemInput.labels
+          : Object.entries(composeServicesItemInput.labels)
+        composeServicesItem.labels = labelsArray.map((item) => {
+          const ii = typeof item === 'object' ? Array.from(item) : item.split('=')
+          return {
+            key: ii[0],
+            value: ii[1]?.replace(/"/g, '') || '',
+          }
+        }).filter(label => label.key !== 'icon')
+      }
+      else {
+        composeServicesItem.labels = []
+      }
+
       // Ports
       /*
       - "3000"
@@ -524,7 +544,7 @@
       composeServicesItem.privileged = composeServicesItemInput.privileged === true
 
       // cap-add
       if (composeServicesItemInput.cap_add !== undefined) {
         composeServicesItem.cap_add = composeServicesItemInput.cap_add
       }
       else {
@@ -670,6 +690,19 @@
           .map((env) => {
             return `${env.container}=${env.host}`
           })
+
+        // 处理标签数据
+        if (service.labels && service.labels.length > 0) {
+          outputService.labels = {}
+          service.labels.forEach((label) => {
+            if (label.key && label.value) {
+              outputService.labels[label.key] = label.value
+            }
+          })
+        }
+        else {
+          delete outputService.labels
+        }
       }
       if (this.dockerComposeCommands) {
         const yaml = YAML.parse(this.dockerComposeCommands)
@@ -886,10 +919,11 @@
 
           <Ports v-if="showPorts(service)" v-model="service.ports" :ports_in_use="ports_in_use" :show-host-post="showHostPort(service)" />
 
-          <VolumesInputGroup v-model="service.volumes" :label="$t('Volumes')" :message="$t('No volumes now, click “+” to add one.')" type="volume" />
-          <EnvInputGroup v-model="service.environment" :label="$t('Environment Variables')" :message="$t('No environment variables now, click “+” to add one.')" />
-          <InputGroup :devices="service.devices" :label="$t('Devices')" :message="$t('No devices now, click “+” to add one.')" type="device" />
-          <CommandsInput v-model="service.command" :label="$t('Container Command')" :message="$t('No commands now, click “+” to add one.')" />
+          <VolumesInputGroup v-model="service.volumes" :label="'Volumes'" :message="'No volumes now, click \'+\' to add one.'" type="volume" />
+          <EnvInputGroup v-model="service.environment" :label="'Environment Variables'" :message="'No environment variables now, click \'+\' to add one.'" />
+          <LabelsInputGroup v-model="service.labels" :label="'Labels'" :message="'No labels now, click \'+\' to add one.'" />
+          <InputGroup :devices="service.devices" :label="'Devices'" :message="'No devices now, click \'+\' to add one.'" type="device" />
+          <CommandsInput v-model="service.command" :label="'Container Command'" :message="'No commands now, click \'+\' to add one.'" />
 
           <b-field :label="$t('Privileged')">
             <b-switch v-model="service.privileged" />

src/components/forms/LabelsInputGroup.vue

@@ -0,0 +1,79 @@
+<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">{{ $t(label) }}</label>
+      <b-button icon-left="plus-outline" icon-pack="casa" 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 icon="warning-solid" size="is-small" pack="casa" class="mr-2 "></b-icon>
+      <span>
+        {{ $t(message) }}
+      </span>
+    </div>
+    <div v-for="(item, index) in items" :key="'label' + index" class="port-item mr-4">
+      <b-icon class="is-clickable" icon="close-outline" pack="casa" size="is-small"
+        @click.native="removeItem(index)"></b-icon>
+      <template v-if="index < 1">
+        <b-field grouped>
+          <b-field :label="$t(name1)" expanded>
+            <b-input v-model="item.key" :placeholder="$t(name1)" expanded></b-input>
+          </b-field>
+          <b-field :label="$t(name2)" expanded>
+            <b-input v-model="item.value" :placeholder="$t(name2)" expanded></b-input>
+          </b-field>
+        </b-field>
+      </template>
+      <template v-else>
+        <b-field grouped>
+          <b-input v-model="item.key" :placeholder="$t(name1)" expanded></b-input>
+          <b-input v-model="item.value" :placeholder="$t(name2)" expanded></b-input>
+        </b-field>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'labels-input-group',
+  model: {
+    prop: 'vData',
+    event: 'change'
+  },
+  props: {
+    vData: Array,
+    label: String,
+    message: String,
+    name1: {
+      type: String,
+      default: "Key"
+    },
+    name2: {
+      type: String,
+      default: "Value"
+    },
+  },
+  computed: {
+    items: {
+      get() {
+        return this.vData
+      },
+      set(val) {
+        this.$emit('change', val)
+      }
+    }
+  },
+  methods: {
+    addItem() {
+      let itemObj = {
+        key: "",
+        value: ""
+      }
+      this.items.push(itemObj)
+    },
+    removeItem(index) {
+      this.items.splice(index, 1)
+    },
+  },
+}
+</script>