fix: 面板设置界面样式统一 (#1177)

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
+                                    <el-button class="append-button" @click="onChangeMirrors" icon="Setting">
-                                        v-if="form.mirrors"
-                                        style="width: 80px"
-                                        @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
+                                    <el-button class="append-button" @click="onChangeRegistries" icon="Setting">
-                                        v-if="form.mirrors"
-                                        style="width: 80px"
-                                        @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>

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>
+                        <el-form-item :label="$t('setting.allowIPs')">
-                            <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
+                                type="textarea"
                                 :placeholder="$t('setting.allowIPEgs')"
-                                            style="width: 100%"
+                                :autosize="{ minRows: 8, maxRows: 10 }"
-                                            v-model="row.value"
+                                v-model="allowIPs"
                             />
-                                    </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>
                     </el-col>
                 </el-row>
@@ -69,40 +47,22 @@ const drawerVisiable = ref();
 const loading = ref();
 
 const acceptParams = (params: DialogProps): void => {
-    allowIPs.value = [];
+    allowIPs.value = params.allowIPs;
-    if (params.allowIPs) {
-        for (const ip of params.allowIPs.split(',')) {
-            if (ip) {
-                allowIPs.value.push({ value: ip });
-            }
-        }
-    }
     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) {
-    if (allowIPs.value.length !== 0) {
+        let ips = allowIPs.value.split('\n');
-        for (const ip of allowIPs.value) {
+        for (const ip of ips) {
-            if (checkIp(ip.value)) {
+            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'));

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">
+                                <div style="width: 100%" v-if="form.allowIPs">
-                                    <template #append>
+                                    <el-input
-                                        <el-button @click="onChangeAllowIPs" icon="Setting">
+                                        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>
-                                    </template>
+                                </div>
-                                </el-input>
                                 <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>