From d21f4ffae63f6a2099ccd6586ed460bfe83e6b8e Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Tue, 9 Sep 2025 16:02:43 +0800
Subject: [PATCH] style: Add fullscreen support for some drawers (#10316)

Refs #10312
---
 frontend/src/components/drawer-pro/index.vue        | 13 +++++++++++--
 frontend/src/views/ai/model/terminal/index.vue      |  4 +---
 .../src/views/container/compose/create/index.vue    |  1 +
 frontend/src/views/container/compose/edit/index.vue |  1 +
 .../views/container/container/terminal/index.vue    |  1 +
 frontend/src/views/container/image/build/index.vue  |  1 +
 .../src/views/container/template/operator/index.vue |  1 +
 .../src/views/cronjob/library/operate/index.vue     |  1 +
 frontend/src/views/cronjob/library/run/index.vue    |  1 +
 .../views/host/file-management/terminal/index.vue   |  1 +
 frontend/src/views/toolbox/clam/record/index.vue    |  6 +++---
 11 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/drawer-pro/index.vue b/frontend/src/components/drawer-pro/index.vue
index 0a3138596..362ef8be0 100644
--- a/frontend/src/components/drawer-pro/index.vue
+++ b/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'));
diff --git a/frontend/src/views/ai/model/terminal/index.vue b/frontend/src/views/ai/model/terminal/index.vue
index f58239c94..0d83e191c 100644
--- a/frontend/src/views/ai/model/terminal/index.vue
+++ b/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);
diff --git a/frontend/src/views/container/compose/create/index.vue b/frontend/src/views/container/compose/create/index.vue
index bb74d8a53..452d80f0e 100644
--- a/frontend/src/views/container/compose/create/index.vue
+++ b/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')">
diff --git a/frontend/src/views/container/compose/edit/index.vue b/frontend/src/views/container/compose/edit/index.vue
index 25637d432..59c72cbae 100644
--- a/frontend/src/views/container/compose/edit/index.vue
+++ b/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">
diff --git a/frontend/src/views/container/container/terminal/index.vue b/frontend/src/views/container/container/terminal/index.vue
index db37b9728..c02de54a9 100644
--- a/frontend/src/views/container/container/terminal/index.vue
+++ b/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">
diff --git a/frontend/src/views/container/image/build/index.vue b/frontend/src/views/container/image/build/index.vue
index 6eea2d253..ef9fa4971 100644
--- a/frontend/src/views/container/image/build/index.vue
+++ b/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">
diff --git a/frontend/src/views/container/template/operator/index.vue b/frontend/src/views/container/template/operator/index.vue
index 9a63650ca..dd452b3b8 100644
--- a/frontend/src/views/container/template/operator/index.vue
+++ b/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"
diff --git a/frontend/src/views/cronjob/library/operate/index.vue b/frontend/src/views/cronjob/library/operate/index.vue
index 9213142d0..8a2137031 100644
--- a/frontend/src/views/cronjob/library/operate/index.vue
+++ b/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">
diff --git a/frontend/src/views/cronjob/library/run/index.vue b/frontend/src/views/cronjob/library/run/index.vue
index 27dd30b74..d9fb24350 100644
--- a/frontend/src/views/cronjob/library/run/index.vue
+++ b/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>
diff --git a/frontend/src/views/host/file-management/terminal/index.vue b/frontend/src/views/host/file-management/terminal/index.vue
index d002153fa..d543d54d3 100644
--- a/frontend/src/views/host/file-management/terminal/index.vue
+++ b/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>
diff --git a/frontend/src/views/toolbox/clam/record/index.vue b/frontend/src/views/toolbox/clam/record/index.vue
index 38f80c70a..c2b2cf993 100644
--- a/frontend/src/views/toolbox/clam/record/index.vue
+++ b/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;