feat: 计划任务和容器日志的前端改进 (#1319)

* feat: 计划任务增加批量开启和停止 #1010 

* feat: 容器日志增加全屏按钮 #1176

frontend/src/components/drawer-header/index.vue

@@ -9,6 +9,9 @@
             <el-divider v-if="slots.buttons" direction="vertical" />
             <slot v-if="slots.buttons" name="buttons"></slot>
         </template>
+        <template #extra>
+            <slot v-if="slots.extra" name="extra"></slot>
+        </template>
     </el-page-header>
 </template>
 

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

@@ -1,8 +1,17 @@
 <template>
     <div>
-        <el-drawer v-model="logVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
+        <el-drawer
+            v-model="logVisiable"
+            :destroy-on-close="true"
+            :close-on-click-modal="false"
+            :size="globalStore.isFullScreen ? '100%' : '50%'"
+        >
             <template #header>
-                <DrawerHeader :header="$t('commons.button.log')" :resource="logSearch.container" :back="handleClose" />
+                <DrawerHeader :header="$t('commons.button.log')" :resource="logSearch.container" :back="handleClose">
+                    <template #extra>
+                        <el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
+                    </template>
+                </DrawerHeader>
             </template>
             <div>
                 <el-select @change="searchLogs" style="width: 30%; float: left" v-model="logSearch.mode">
@@ -47,13 +56,15 @@
 import { cleanContainerLog, logContainer } from '@/api/modules/container';
 import i18n from '@/lang';
 import { dateFormatForName } from '@/utils/util';
-import { nextTick, onBeforeUnmount, reactive, ref, shallowRef } from 'vue';
+import { nextTick, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { ElMessageBox } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
+import screenfull from 'screenfull';
+import { GlobalStore } from '@/store';
 
 const extensions = [javascript(), oneDark];
 
@@ -64,6 +75,7 @@ const view = shallowRef();
 const handleReady = (payload) => {
     view.value = payload.view;
 };
+const globalStore = GlobalStore();
 
 const logSearch = reactive({
     isWatch: false,
@@ -93,12 +105,22 @@ const timeOptions = ref([
     },
 ]);
 
+function toggleFullscreen() {
+    if (screenfull.isEnabled) {
+        screenfull.toggle();
+    }
+}
+screenfull.on('change', () => {
+    globalStore.isFullScreen = screenfull.isFullscreen;
+});
 const handleClose = async () => {
     logVisiable.value = false;
     clearInterval(Number(timer));
     timer = null;
 };
-
+watch(logVisiable, (val) => {
+    if (screenfull.isEnabled && !val) screenfull.exit();
+});
 const searchLogs = async () => {
     const res = await logContainer(logSearch);
     logInfo.value = res.data || '';
@@ -166,4 +188,7 @@ defineExpose({
 .margin-button {
     margin-left: 20px;
 }
+.fullScreen {
+    border: none;
+}
 </style>

frontend/src/views/cronjob/index.vue

@@ -15,6 +15,12 @@
                         <el-button type="primary" @click="onOpenDialog('create')">
                             {{ $t('commons.button.create') }}{{ $t('cronjob.cronTask') }}
                         </el-button>
+                        <el-button plain :disabled="selects.length === 0" @click="onBatchChangeStatus('enable')">
+                            {{ $t('commons.button.enable') }}
+                        </el-button>
+                        <el-button plain :disabled="selects.length === 0" @click="onBatchChangeStatus('disable')">
+                            {{ $t('commons.button.disable') }}
+                        </el-button>
                         <el-button plain :disabled="selects.length === 0" @click="onDelete(null)">
                             {{ $t('commons.button.delete') }}
                         </el-button>
@@ -320,6 +326,20 @@ const onChangeStatus = async (id: number, status: string) => {
     });
 };
 
+const onBatchChangeStatus = async (status: string) => {
+    ElMessageBox.confirm(i18n.global.t('cronjob.' + status + 'Msg'), i18n.global.t('cronjob.changeStatus'), {
+        confirmButtonText: i18n.global.t('commons.button.confirm'),
+        cancelButtonText: i18n.global.t('commons.button.cancel'),
+    }).then(async () => {
+        let itemStatus = status === 'enable' ? 'Enable' : 'Disable';
+        for (const item of selects.value) {
+            await updateStatus({ id: item.id, status: itemStatus });
+        }
+        MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+        search();
+    });
+};
+
 const onHandle = async (row: Cronjob.CronjobInfo) => {
     loading.value = true;
     await handleOnce(row.id)