From 9f5a03419e111a24c5d83de850fb3dd3cd2adb89 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Mon, 29 May 2023 15:08:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=9D=A2=E6=9D=BF=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E6=A0=B7=E5=BC=8F=E7=BB=9F=E4=B8=80=20(#1177?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/container/setting/index.vue     | 26 +++----
 .../src/views/setting/safe/allowips/index.vue | 74 +++++--------------
 frontend/src/views/setting/safe/index.vue     | 29 ++++++--
 3 files changed, 48 insertions(+), 81 deletions(-)

diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index cd4d36ac6..bd09d2ae1 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -46,21 +46,15 @@
                     <el-col :span="10">
                         <el-form :model="form" label-position="left" :rules="rules" ref="formRef" label-width="150px">
                             <el-form-item :label="$t('container.mirrors')" prop="mirrors">
-                                <div style="width: 100%">
+                                <div style="width: 100%" v-if="form.mirrors">
                                     <el-input
                                         type="textarea"
                                         :autosize="{ minRows: 3, maxRows: 5 }"
                                         disabled
-                                        v-if="form.mirrors"
                                         v-model="form.mirrors"
                                         style="width: calc(100% - 80px)"
                                     />
-                                    <el-button
-                                        v-if="form.mirrors"
-                                        style="width: 80px"
-                                        @click="onChangeMirrors"
-                                        icon="Setting"
-                                    >
+                                    <el-button class="append-button" @click="onChangeMirrors" icon="Setting">
                                         {{ $t('commons.button.set') }}
                                     </el-button>
                                 </div>
@@ -85,21 +79,15 @@
                                 </span>
                             </el-form-item>
                             <el-form-item :label="$t('container.registries')" prop="registries">
-                                <div style="width: 100%">
+                                <div style="width: 100%" v-if="form.registries">
                                     <el-input
-                                        v-if="form.registries"
                                         type="textarea"
                                         :autosize="{ minRows: 3, maxRows: 5 }"
                                         disabled
                                         v-model="form.registries"
                                         style="width: calc(100% - 80px)"
                                     />
-                                    <el-button
-                                        v-if="form.mirrors"
-                                        style="width: 80px"
-                                        @click="onChangeRegistries"
-                                        icon="Setting"
-                                    >
+                                    <el-button class="append-button" @click="onChangeRegistries" icon="Setting">
                                         {{ $t('commons.button.set') }}
                                     </el-button>
                                 </div>
@@ -465,4 +453,10 @@ onMounted(() => {
 body {
     margin: 0;
 }
+
+.append-button {
+    width: 80px;
+    background-color: var(--el-fill-color-light);
+    color: var(--el-color-info);
+}
 </style>
diff --git a/frontend/src/views/setting/safe/allowips/index.vue b/frontend/src/views/setting/safe/allowips/index.vue
index 3609f84d7..d27d38d4b 100644
--- a/frontend/src/views/setting/safe/allowips/index.vue
+++ b/frontend/src/views/setting/safe/allowips/index.vue
@@ -7,35 +7,13 @@
             <el-form label-position="top" @submit.prevent v-loading="loading">
                 <el-row type="flex" justify="center">
                     <el-col :span="22">
-                        <el-form-item>
-                            <table style="width: 100%" class="tab-table">
-                                <tr v-if="allowIPs.length !== 0">
-                                    <th scope="col" width="90%" align="left">
-                                        <label>{{ $t('setting.allowIPs') }}</label>
-                                    </th>
-                                    <th align="left"></th>
-                                </tr>
-                                <tr v-for="(row, index) in allowIPs" :key="index">
-                                    <td width="90%">
-                                        <el-input
-                                            :placeholder="$t('setting.allowIPEgs')"
-                                            style="width: 100%"
-                                            v-model="row.value"
-                                        />
-                                    </td>
-                                    <td>
-                                        <el-button link style="font-size: 10px" @click="handlePortsDelete(index)">
-                                            {{ $t('commons.button.delete') }}
-                                        </el-button>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td align="left">
-                                        <el-button @click="handlePortsAdd()">{{ $t('commons.button.add') }}</el-button>
-                                    </td>
-                                </tr>
-                            </table>
-                            <span class="input-help">{{ $t('setting.allowIPsHelper1') }}</span>
+                        <el-form-item :label="$t('setting.allowIPs')">
+                            <el-input
+                                type="textarea"
+                                :placeholder="$t('setting.allowIPEgs')"
+                                :autosize="{ minRows: 8, maxRows: 10 }"
+                                v-model="allowIPs"
+                            />
                         </el-form-item>
                     </el-col>
                 </el-row>
@@ -69,40 +47,22 @@ const drawerVisiable = ref();
 const loading = ref();
 
 const acceptParams = (params: DialogProps): void => {
-    allowIPs.value = [];
-    if (params.allowIPs) {
-        for (const ip of params.allowIPs.split(',')) {
-            if (ip) {
-                allowIPs.value.push({ value: ip });
-            }
-        }
-    }
+    allowIPs.value = params.allowIPs;
     drawerVisiable.value = true;
 };
 
-const handlePortsAdd = () => {
-    let item = {
-        value: '',
-    };
-    allowIPs.value.push(item);
-};
-const handlePortsDelete = (index: number) => {
-    allowIPs.value.splice(index, 1);
-};
-
 const onSavePort = async () => {
-    let allows = '';
-    if (allowIPs.value.length !== 0) {
-        for (const ip of allowIPs.value) {
-            if (checkIp(ip.value)) {
-                MsgError(i18n.global.t('firewall.addressFormatError'));
-                return false;
+    if (allowIPs.value) {
+        let ips = allowIPs.value.split('\n');
+        for (const ip of ips) {
+            if (ip) {
+                if (checkIp(ip)) {
+                    MsgError(i18n.global.t('firewall.addressFormatError'));
+                    return false;
+                }
             }
-            allows += ip.value + ',';
         }
-        allows = allows.substring(0, allows.length - 1);
     }
-
     ElMessageBox.confirm(i18n.global.t('setting.allowIPsHelper'), i18n.global.t('setting.allowIPs'), {
         confirmButtonText: i18n.global.t('commons.button.confirm'),
         cancelButtonText: i18n.global.t('commons.button.cancel'),
@@ -110,7 +70,7 @@ const onSavePort = async () => {
     }).then(async () => {
         loading.value = true;
 
-        await updateSetting({ key: 'AllowIPs', value: allows })
+        await updateSetting({ key: 'AllowIPs', value: allowIPs.value.replaceAll('\n', ',') })
             .then(() => {
                 loading.value = false;
                 MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
diff --git a/frontend/src/views/setting/safe/index.vue b/frontend/src/views/setting/safe/index.vue
index 872ba39d1..d8cd003b7 100644
--- a/frontend/src/views/setting/safe/index.vue
+++ b/frontend/src/views/setting/safe/index.vue
@@ -40,13 +40,18 @@
                             </el-form-item>
 
                             <el-form-item :label="$t('setting.allowIPs')">
-                                <el-input v-if="form.allowIPs" disabled v-model="form.allowIPs">
-                                    <template #append>
-                                        <el-button @click="onChangeAllowIPs" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
+                                <div style="width: 100%" v-if="form.allowIPs">
+                                    <el-input
+                                        type="textarea"
+                                        :autosize="{ minRows: 3, maxRows: 5 }"
+                                        disabled
+                                        v-model="form.allowIPs"
+                                        style="width: calc(100% - 80px)"
+                                    />
+                                    <el-button class="append-button" @click="onChangeAllowIPs" icon="Setting">
+                                        {{ $t('commons.button.set') }}
+                                    </el-button>
+                                </div>
                                 <el-input disabled v-if="!form.allowIPs" v-model="unset">
                                     <template #append>
                                         <el-button @click="onChangeAllowIPs" icon="Setting">
@@ -206,7 +211,7 @@ const search = async () => {
     form.expirationTime = res.data.expirationTime;
     form.complexityVerification = res.data.complexityVerification;
     form.mfaStatus = res.data.mfaStatus;
-    form.allowIPs = res.data.allowIPs || '';
+    form.allowIPs = res.data.allowIPs.replaceAll(',', '\n');
     form.bindDomain = res.data.bindDomain;
 };
 
@@ -311,3 +316,11 @@ onMounted(() => {
     getSystemAvailable();
 });
 </script>
+
+<style lang="scss" scoped>
+.append-button {
+    width: 80px;
+    background-color: var(--el-fill-color-light);
+    color: var(--el-color-info);
+}
+</style>