style: 容器列表页面适配手机端 (#3618)

Refs #3585

backend/utils/cloud_storage/client/helper.go

@@ -13,8 +13,6 @@ func loadParamFromVars(key string, isString bool, vars map[string]interface{}) s
 		}
 		return ""
 	}
-	if isString {
-		return vars[key].(string)
-	}
-	return fmt.Sprintf("%v", vars[key].(float64))
+
+	return fmt.Sprintf("%v", vars[key])
 }

backend/utils/cloud_storage/client/webdav.go

@@ -15,12 +15,16 @@ type webDAVClient struct {
 
 func NewWebDAVClient(vars map[string]interface{}) (*webDAVClient, error) {
 	address := loadParamFromVars("address", true, vars)
-	port := loadParamFromVars("port", false, vars)
+	port := loadParamFromVars("port", true, vars)
 	password := loadParamFromVars("password", true, vars)
 	username := loadParamFromVars("username", true, vars)
 	bucket := loadParamFromVars("bucket", true, vars)
 
-	client := gowebdav.NewClient(fmt.Sprintf("%s:%s", address, port), username, password)
+	url := fmt.Sprintf("%s:%s", address, port)
+	if len(port) == 0 {
+		url = address
+	}
+	client := gowebdav.NewClient(url, username, password)
 	if err := client.Connect(); err != nil {
 		return nil, err
 	}

backend/utils/files/file_op.go

@@ -606,12 +606,12 @@ func ZipFile(files []archiver.File, dst afero.File) error {
 		if err != nil {
 			return err
 		}
+		hdr.Method = zip.Deflate
 		hdr.Name = file.NameInArchive
 		if file.IsDir() {
 			if !strings.HasSuffix(hdr.Name, "/") {
 				hdr.Name += "/"
 			}
-			hdr.Method = zip.Store
 		}
 		w, err := zw.CreateHeader(hdr)
 		if err != nil {

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

@@ -284,7 +284,7 @@
                         :ellipsis="2"
                         :buttons="buttons"
                         :label="$t('commons.table.operate')"
-                        fixed="right"
+                        :fixed="mobile ? false : 'right'"
                     />
                 </ComplexTable>
             </template>

frontend/src/views/cronjob/operate/index.vue

@@ -254,8 +254,8 @@
 
                     <el-form-item :label="$t('cronjob.retainCopies')" prop="retainCopies">
                         <el-input-number
+                            style="width: 200px"
                             :min="1"
-                            :max="300"
                             step-strictly
                             :step="1"
                             v-model.number="dialogData.rowData!.retainCopies"

frontend/src/views/setting/backup-account/index.vue

@@ -9,7 +9,7 @@
                                 <svg-icon class="card-logo" iconName="p-file-folder"></svg-icon>
                                 <span class="card-title">&nbsp;{{ $t('setting.LOCAL') }}</span>
                                 <div style="float: right">
-                                    <el-button round @click="onOpenDialog('edit', 'local', localData)">
+                                    <el-button round @click="onOpenDialog('edit', 'LOCAL', localData)">
                                         {{ $t('commons.button.edit') }}
                                     </el-button>
                                 </div>
@@ -414,6 +414,7 @@
             </template>
         </LayoutContent>
 
+        <localDialog ref="localRef" @search="search" />
         <s3Dialog ref="s3Ref" @search="search" />
         <ossDialog ref="ossRef" @search="search" />
         <cosDialog ref="cosRef" @search="search" />
@@ -430,6 +431,7 @@ import { dateFormat } from '@/utils/util';
 import { onMounted, ref } from 'vue';
 import OpDialog from '@/components/del-dialog/index.vue';
 import { getBackupList, deleteBackup } from '@/api/modules/setting';
+import localDialog from '@/views/setting/backup-account/local/index.vue';
 import s3Dialog from '@/views/setting/backup-account/s3/index.vue';
 import ossDialog from '@/views/setting/backup-account/oss/index.vue';
 import cosDialog from '@/views/setting/backup-account/cos/index.vue';
@@ -446,6 +448,7 @@ const data = ref();
 const opRef = ref();
 const refresh = ref(false);
 
+const localRef = ref();
 const s3Ref = ref();
 const ossRef = ref();
 const cosRef = ref();
@@ -647,6 +650,9 @@ const onOpenDialog = async (
         rowData: { ...rowData },
     };
     switch (accountType) {
+        case 'LOCAL':
+            localRef.value.acceptParams(params);
+            return;
         case 'S3':
             s3Ref.value.acceptParams(params);
             return;

frontend/src/views/setting/backup-account/local/index.vue

@@ -0,0 +1,126 @@
+<template>
+    <div v-loading="loading">
+        <el-drawer v-model="drawerVisible" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
+            <template #header>
+                <DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
+            </template>
+            <el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData">
+                <el-row type="flex" justify="center">
+                    <el-col :span="22">
+                        <el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
+                            <el-tag>{{ $t('setting.' + dialogData.rowData!.type) }}</el-tag>
+                        </el-form-item>
+                        <el-form-item
+                            :label="$t('setting.currentPath')"
+                            prop="varsJson['dir']"
+                            :rules="Rules.requiredInput"
+                        >
+                            <el-input v-model="dialogData.rowData!.varsJson['dir']">
+                                <template #prepend>
+                                    <FileList @choose="loadDir" :dir="true"></FileList>
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button :disabled="loading" @click="handleClose">
+                        {{ $t('commons.button.cancel') }}
+                    </el-button>
+                    <el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Rules } from '@/global/form-rules';
+import FileList from '@/components/file-list/index.vue';
+import i18n from '@/lang';
+import { ElForm } from 'element-plus';
+import { Backup } from '@/api/interface/backup';
+import DrawerHeader from '@/components/drawer-header/index.vue';
+import { addBackup, editBackup } from '@/api/modules/setting';
+import { MsgSuccess } from '@/utils/message';
+
+const loading = ref(false);
+type FormInstance = InstanceType<typeof ElForm>;
+const formRef = ref<FormInstance>();
+
+const emit = defineEmits<{ (e: 'search'): void }>();
+
+interface DialogProps {
+    title: string;
+    rowData?: Backup.BackupInfo;
+}
+const title = ref<string>('');
+const drawerVisible = ref(false);
+const dialogData = ref<DialogProps>({
+    title: '',
+});
+const acceptParams = (params: DialogProps): void => {
+    dialogData.value = params;
+    title.value = i18n.global.t('commons.button.' + dialogData.value.title);
+    drawerVisible.value = true;
+};
+
+const handleClose = () => {
+    emit('search');
+    drawerVisible.value = false;
+};
+
+const loadDir = async (path: string) => {
+    dialogData.value.rowData!.varsJson['dir'] = path;
+};
+
+const onSubmit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.validate(async (valid) => {
+        if (!valid) return;
+        if (!dialogData.value.rowData) return;
+        dialogData.value.rowData.vars = JSON.stringify(dialogData.value.rowData!.varsJson);
+        loading.value = true;
+        if (dialogData.value.title === 'create') {
+            await addBackup(dialogData.value.rowData)
+                .then(() => {
+                    loading.value = false;
+                    MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                    emit('search');
+                    drawerVisible.value = false;
+                })
+                .catch(() => {
+                    loading.value = false;
+                });
+            return;
+        }
+        await editBackup(dialogData.value.rowData)
+            .then(() => {
+                loading.value = false;
+                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                emit('search');
+                drawerVisible.value = false;
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    });
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>
+
+<style lang="scss" scoped>
+.append-button {
+    width: 80px;
+    background-color: var(--el-fill-color-light);
+    color: var(--el-color-info);
+}
+</style>

frontend/src/views/setting/backup-account/webdav/index.vue

@@ -12,7 +12,7 @@
                         </el-form-item>
                         <el-form-item
                             :label="$t('setting.address')"
-                            prop="varsJson.address"
+                            prop="varsJson.addressItem"
                             :rules="Rules.requiredInput"
                         >
                             <el-input v-model="webdavData.rowData!.varsJson['addressItem']">
@@ -24,12 +24,8 @@
                                 </template>
                             </el-input>
                         </el-form-item>
-                        <el-form-item :label="$t('commons.table.port')" prop="varsJson.port" :rules="[Rules.port]">
-                            <el-input-number
-                                :min="0"
-                                :max="65535"
-                                v-model.number="webdavData.rowData!.varsJson['port']"
-                            />
+                        <el-form-item :label="$t('commons.table.port')" prop="varsJson.port" :rules="[portRule]">
+                            <el-input-number v-model.number="webdavData.rowData!.varsJson['port']" />
                         </el-form-item>
                         <el-form-item
                             :label="$t('commons.login.username')"
@@ -71,7 +67,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { ElForm } from 'element-plus';
@@ -79,7 +75,7 @@ import { Backup } from '@/api/interface/backup';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { addBackup, editBackup } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
-import { spliceHttp, splitHttp } from '@/utils/util';
+import { checkPort, spliceHttp, splitHttp } from '@/utils/util';
 
 const loading = ref(false);
 type FormInstance = InstanceType<typeof ElForm>;
@@ -97,6 +93,18 @@ const drawerVisible = ref(false);
 const webdavData = ref<DialogProps>({
     title: '',
 });
+
+const portRule = reactive({ validator: checkportRule, trigger: 'blur', type: 'number' });
+
+function checkportRule(rule: any, value: any, callback: any) {
+    if (value !== undefined && value !== null) {
+        if (checkPort(value)) {
+            return callback(new Error(i18n.global.t('commons.rule.port')));
+        }
+    }
+    callback();
+}
+
 const acceptParams = (params: DialogProps): void => {
     webdavData.value = params;
     if (webdavData.value.title === 'edit') {

frontend/src/views/toolbox/device/hosts/index.vue

@@ -7,12 +7,6 @@
 
             <el-row type="flex" justify="center" v-loading="loading">
                 <el-col :span="22">
-                    <el-alert
-                        :title="$t('toolbox.device.timeZoneHelper')"
-                        class="common-prompt"
-                        :closable="false"
-                        type="warning"
-                    />
                     <el-radio-group v-model="confShowType" @change="changeMode">
                         <el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
                         <el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>

frontend/src/views/website/runtime/php/create/index.vue

@@ -82,7 +82,7 @@
                                     </span>
                                 </el-form-item>
                                 <el-form-item :label="$t('php.extensions')">
-                                    <el-select v-model="extensions" @change="changePHPExtension()">
+                                    <el-select v-model="extensions" @change="changePHPExtension()" clearable>
                                         <el-option
                                             v-for="(extension, index) in phpExtensions"
                                             :key="index"
@@ -279,6 +279,7 @@ const searchApp = (appId: number) => {
 };
 
 const changeApp = (appId: number) => {
+    extensions.value = undefined;
     for (const app of apps.value) {
         if (app.id === appId) {
             initParam.value = false;
@@ -291,6 +292,7 @@ const changeApp = (appId: number) => {
 const changeVersion = () => {
     loading.value = true;
     initParam.value = false;
+    extensions.value = undefined;
     GetAppDetail(runtime.appID, runtime.version, 'runtime')
         .then((res) => {
             runtime.appDetailID = res.data.id;
@@ -387,6 +389,9 @@ const listPHPExtensions = async () => {
 };
 
 const changePHPExtension = () => {
+    if (extensions.value == '') {
+        return;
+    }
     runtime.params['PHP_EXTENSIONS'] = extensions.value.split(',');
 };