style: Add fullscreen support for some drawers (#10316)

Refs #10312

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

@@ -4,7 +4,7 @@
         @close="handleClose"
         :destroy-on-close="true"
         :before-close="beforeClose"
-        :size="size"
+        :size="isFull ? '100%' : size"
         :close-on-press-escape="autoClose"
         :close-on-click-modal="autoClose"
     >
@@ -24,7 +24,13 @@
                 </template>
                 <template #extra>
                     <el-tooltip :content="loadTooltip()" placement="top" v-if="fullScreen">
-                        <el-button @click="toggleFullscreen" link icon="FullScreen" plain class="mr-5"></el-button>
+                        <el-button
+                            @click="toggleFullscreen"
+                            link
+                            icon="FullScreen"
+                            plain
+                            class="-mt-1 mr-2"
+                        ></el-button>
                     </el-tooltip>
                     <slot v-if="slots.extra" name="extra"></slot>
                 </template>
@@ -56,6 +62,8 @@ import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 const drawerContent = ref();
 
+const isFull = ref();
+
 const props = defineProps({
     header: String,
     back: Function,
@@ -155,6 +163,7 @@ const beforeClose = (done: () => void) => {
 
 function toggleFullscreen() {
     globalStore.isFullScreen = !globalStore.isFullScreen;
+    isFull.value = globalStore.isFullScreen;
 }
 const loadTooltip = () => {
     return i18n.global.t('commons.button.' + (globalStore.isFullScreen ? 'quitFullscreen' : 'fullscreen'));

frontend/src/views/ai/model/terminal/index.vue

@@ -4,8 +4,8 @@
         :title="$t('menu.terminal')"
         @close="handleClose"
         :resource="title"
-        :size="globalStore.isFullScreen ? 'full' : 'large'"
         :autoClose="false"
+        :fullScreen="true"
     >
         <Terminal class="mt-2" style="height: calc(100vh - 175px)" ref="terminalRef"></Terminal>
 
@@ -23,8 +23,6 @@
 import { nextTick, ref } from 'vue';
 import Terminal from '@/components/terminal/index.vue';
 import { closeOllamaModel } from '@/api/modules/ai';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
 
 const title = ref();
 const open = ref(false);

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

@@ -5,6 +5,7 @@
         @close="handleClose"
         size="large"
         :autoClose="false"
+        :fullScreen="true"
     >
         <el-form ref="formRef" @submit.prevent label-position="top" :model="form" :rules="rules" v-loading="loading">
             <el-form-item :label="$t('app.source')">

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

@@ -6,6 +6,7 @@
         :resource="name"
         size="large"
         :autoClose="false"
+        :fullScreen="true"
     >
         <div v-loading="loading">
             <el-form ref="formRef" @submit.prevent label-position="top">

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

@@ -6,6 +6,7 @@
         :resource="title"
         :autoClose="!terminalOpen"
         size="large"
+        :fullScreen="true"
     >
         <template #content>
             <el-form ref="formRef" :model="form" label-position="top">

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

@@ -5,6 +5,7 @@
         @close="handleClose"
         size="large"
         :autoClose="false"
+        :fullScreen="true"
     >
         <el-form ref="formRef" label-position="top" :model="form" label-width="80px" :rules="rules">
             <el-form-item :label="$t('commons.table.name')" prop="name">

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

@@ -6,6 +6,7 @@
         @close="handleClose"
         size="large"
         :autoClose="false"
+        :fullScreen="true"
     >
         <el-form
             v-loading="loading"

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

@@ -6,6 +6,7 @@
         :resource="dialogData.title !== 'edit' ? '' : dialogData.rowData?.name"
         size="large"
         :autoClose="false"
+        :fullScreen="true"
     >
         <el-form ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData" :rules="rules">
             <el-form-item :label="$t('commons.table.name')" prop="name">

frontend/src/views/cronjob/library/run/index.vue

@@ -6,6 +6,7 @@
         :resource="scriptName"
         size="large"
         :autoClose="false"
+        :fullScreen="true"
     >
         <template #content>
             <Terminal style="height: calc(100vh - 175px); margin-top: 18px" ref="terminalRef"></Terminal>

frontend/src/views/host/file-management/terminal/index.vue

@@ -5,6 +5,7 @@
         @close="handleClose"
         size="large"
         :autoClose="false"
+        :fullScreen="true"
     >
         <template #content>
             <Terminal style="height: calc(100vh - 100px)" ref="terminalRef"></Terminal>

frontend/src/views/toolbox/clam/record/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="recordShow" v-loading="loading">
-        <div class="app-status p-mt-20">
+        <div class="app-status card-interval">
             <el-card>
                 <div class="flex w-full flex-col gap-4 md:flex-row">
                     <div class="flex flex-wrap gap-4 ml-3">
@@ -152,7 +152,7 @@
                                             class="w-full"
                                             :key="currentRecord?.taskID"
                                             @stop-reading="search(false)"
-                                            :heightDiff="430"
+                                            :heightDiff="420"
                                             :config="{
                                                 type: 'task',
                                                 colorMode: 'task',
@@ -330,7 +330,7 @@ defineExpose({
 
 <style lang="scss" scoped>
 .infinite-list {
-    height: calc(100vh - 320px);
+    height: calc(100vh - 318px);
     .select-sign {
         &::before {
             float: left;