feat: 容器日志切割增加回显 (#1239)

frontend/src/lang/modules/en.ts

@@ -610,6 +610,10 @@ const message = {
         mirrorsHelper2: 'For details, see the official documents, ',
         registries: 'Insecure registries',
         cutLog: 'Log option',
+        cutLogHelper1: 'The current configuration will only affect newly created containers.',
+        cutLogHelper2: 'Existing containers need to be recreated for the configuration to take effect.',
+        cutLogHelper3:
+            'Please note that recreating containers may result in data loss. If your containers contain important data, make sure to backup before performing the rebuilding operation.',
         maxSize: 'Max-Size',
         maxFile: 'Max-File',
         liveHelper:

frontend/src/lang/modules/zh.ts

@@ -614,6 +614,10 @@ const message = {
         mirrorsHelper2: '具体操作配置请参照官方文档，',
         registries: '私有仓库',
         cutLog: '日志切割',
+        cutLogHelper1: '当前配置只会影响新创建的容器；',
+        cutLogHelper2: '已经创建的容器需要重新创建使配置生效；',
+        cutLogHelper3:
+            '注意，重新创建容器可能会导致数据丢失。如果你的容器中有重要数据，确保在执行重建操作之前进行备份。',
         maxSize: '文件大小',
         maxFile: '保留份数',
         liveHelper: '允许在 Docker 守护进程发生意外停机或崩溃时保留正在运行的容器状态',

frontend/src/views/container/setting/index.vue

@@ -102,6 +102,18 @@
 
                             <el-form-item :label="$t('container.cutLog')" prop="hasLogOption">
                                 <el-switch v-model="form.logOptionShow" @change="handleLogOption"></el-switch>
+                                <span class="input-help"></span>
+                                <div v-if="form.logOptionShow">
+                                    <el-tag>{{ $t('container.maxSize') }}: {{ form.logMaxSize }}</el-tag>
+                                    <el-tag style="margin-left: 5px">
+                                        {{ $t('container.maxFile') }}: {{ form.logMaxFile }}
+                                    </el-tag>
+                                    <div>
+                                        <el-button @click="handleLogOption" type="primary" link>
+                                            {{ $t('commons.button.view') }}
+                                        </el-button>
+                                    </div>
+                                </div>
                             </el-form-item>
 
                             <el-form-item label="iptables" prop="iptables">
@@ -260,7 +272,7 @@ const rules = reactive({
 
 const formRef = ref<FormInstance>();
 const dockerConf = ref();
-const confirmDialogRef = ref();
+const confirmDialogRefFile = ref();
 
 const iptablesVisiable = ref();
 
@@ -270,7 +282,7 @@ const onSaveFile = async () => {
         operationInfo: i18n.global.t('database.restartNowHelper'),
         submitInputInfo: i18n.global.t('database.restartNow'),
     };
-    confirmDialogRef.value!.acceptParams(params);
+    confirmDialogRefFile.value!.acceptParams(params);
 };
 
 const onChangeMirrors = () => {

frontend/src/views/container/setting/log/index.vue

@@ -10,6 +10,15 @@
             <template #header>
                 <DrawerHeader :header="$t('container.cutLog')" :back="handleClose" />
             </template>
+            <el-alert style="margin-bottom: 20px" :closable="false" type="warning">
+                <template #default>
+                    <ul style="margin-left: -20px">
+                        <li>{{ $t('container.cutLogHelper1') }}</li>
+                        <li>{{ $t('container.cutLogHelper2') }}</li>
+                        <li>{{ $t('container.cutLogHelper3') }}</li>
+                    </ul>
+                </template>
+            </el-alert>
             <el-form :model="form" ref="formRef" :rules="rules" v-loading="loading" label-position="top">
                 <el-row type="flex" justify="center">
                     <el-col :span="22">
@@ -17,10 +26,10 @@
                             <el-input v-model.number="form.logMaxSize">
                                 <template #append>
                                     <el-select v-model="form.sizeUnit" style="width: 70px">
-                                        <el-option label="B" value="B"></el-option>
-                                        <el-option label="KB" value="KB"></el-option>
-                                        <el-option label="MB" value="MB"></el-option>
-                                        <el-option label="GB" value="GB"></el-option>
+                                        <el-option label="byte" value="b"></el-option>
+                                        <el-option label="kb" value="k"></el-option>
+                                        <el-option label="mb" value="m"></el-option>
+                                        <el-option label="gb" value="g"></el-option>
                                     </el-select>
                                 </template>
                             </el-input>
@@ -66,7 +75,7 @@ interface DialogProps {
 const form = reactive({
     logMaxSize: 10,
     logMaxFile: 3,
-    sizeUnit: 'MB',
+    sizeUnit: 'm',
 });
 const rules = reactive({
     logMaxSize: [checkNumberRange(1, 1024000), Rules.number],
@@ -81,7 +90,7 @@ const acceptParams = (params: DialogProps): void => {
         form.logMaxSize = loadSize(params.logMaxSize);
     } else {
         form.logMaxSize = 10;
-        form.sizeUnit = 'MB';
+        form.sizeUnit = 'm';
     }
     drawerVisiable.value = true;
 };
@@ -114,22 +123,22 @@ const onSubmitSave = async () => {
 };
 
 const loadSize = (value: string) => {
+    if (value.indexOf('k') !== -1 || value.indexOf('KB') !== -1) {
+        form.sizeUnit = 'k';
+        return Number(value.replaceAll('k', '').replaceAll('KB', ''));
+    }
+    if (value.indexOf('m') !== -1 || value.indexOf('MB') !== -1) {
+        form.sizeUnit = 'm';
+        return Number(value.replaceAll('m', '').replaceAll('MB', ''));
+    }
+    if (value.indexOf('g') !== -1 || value.indexOf('GB') !== -1) {
+        form.sizeUnit = 'g';
+        return Number(value.replaceAll('g', '').replaceAll('GB', ''));
+    }
     if (value.indexOf('b') !== -1 || value.indexOf('B') !== -1) {
-        form.sizeUnit = 'B';
+        form.sizeUnit = 'b';
         return Number(value.replaceAll('b', '').replaceAll('B', ''));
     }
-    if (value.indexOf('k') !== -1 || value.indexOf('K') !== -1) {
-        form.sizeUnit = 'KB';
-        return Number(value.replaceAll('k', '').replaceAll('K', ''));
-    }
-    if (value.indexOf('m') !== -1 || value.indexOf('M') !== -1) {
-        form.sizeUnit = 'MB';
-        return Number(value.replaceAll('m', '').replaceAll('M', ''));
-    }
-    if (value.indexOf('g') !== -1 || value.indexOf('G') !== -1) {
-        form.sizeUnit = 'GB';
-        return Number(value.replaceAll('g', '').replaceAll('G', ''));
-    }
 };
 
 const handleClose = () => {
@@ -141,8 +150,3 @@ defineExpose({
     acceptParams,
 });
 </script>
-<style scoped>
-.help-ul {
-    color: #8f959e;
-}
-</style>