style: change runtime terminal style (#8764)

agent/cmd/server/nginx_conf/php_extensions.json

@@ -322,7 +322,7 @@
     "installed": false
   },
   {
-    "name": "sg11",
+    "name": "sg16",
     "check": "SourceGuardian",
     "file": "sourceguardian.so",
     "versions": ["56","70", "71", "72",  "73", "74",  "80", "81", "82", "83","84"],

frontend/src/views/website/runtime/components/terminal.vue

@@ -4,29 +4,28 @@
         :header="$t('menu.terminal')"
         @close="handleClose"
         :resource="title"
-        size="large"
+        fullScreen
+        :size="globalStore.isFullScreen ? 'full' : 'large'"
     >
         <template #content>
-            <el-form ref="formRef" :model="form" label-position="top">
-                <el-button v-if="!terminalOpen" @click="initTerm(formRef)">
-                    {{ $t('commons.button.conn') }}
+            <Terminal style="height: calc(100vh - 180px)" ref="terminalRef" v-if="terminalOpen"></Terminal>
+        </template>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="handleClose">
+                    {{ $t('commons.button.disConn') }}
                 </el-button>
-                <el-button v-else @click="onClose()">{{ $t('commons.button.disConn') }}</el-button>
-                <Terminal
-                    style="height: calc(100vh - 200px); margin-top: 18px"
-                    ref="terminalRef"
-                    v-if="terminalOpen"
-                ></Terminal>
-            </el-form>
+            </span>
         </template>
     </DrawerPro>
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref, nextTick } from 'vue';
-import { ElForm, FormInstance } from 'element-plus';
 import Terminal from '@/components/terminal/index.vue';
+import { GlobalStore } from '@/store';
 
+const globalStore = GlobalStore();
 const title = ref();
 const terminalVisible = ref(false);
 const terminalOpen = ref(false);
@@ -36,7 +35,6 @@ const form = reactive({
     user: '',
     containerID: '',
 });
-const formRef = ref();
 const terminalRef = ref<InstanceType<typeof Terminal> | null>(null);
 
 interface DialogProps {
@@ -50,22 +48,17 @@ const acceptParams = async (params: DialogProps): Promise<void> => {
     form.isCustom = false;
     form.user = '';
     form.command = '/bin/bash';
-    terminalOpen.value = false;
-    initTerm(formRef.value);
+    initTerm();
 };
 
-const initTerm = (formEl: FormInstance | undefined) => {
-    if (!formEl) return;
-    formEl.validate(async (valid) => {
-        if (!valid) return;
-        terminalOpen.value = true;
-        await nextTick();
-        terminalRef.value!.acceptParams({
-            endpoint: '/api/v2/containers/exec',
-            args: `source=container&containerid=${form.containerID}&user=${form.user}&command=${form.command}`,
-            error: '',
-            initCmd: '',
-        });
+const initTerm = async () => {
+    terminalOpen.value = true;
+    await nextTick();
+    terminalRef.value!.acceptParams({
+        endpoint: '/api/v2/containers/exec',
+        args: `source=container&containerid=${form.containerID}&user=${form.user}&command=${form.command}`,
+        error: '',
+        initCmd: '',
     });
 };
 

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

@@ -79,12 +79,12 @@
                         :label="$t('commons.table.date')"
                         :formatter="dateFormat"
                         show-overflow-tooltip
-                        min-width="120"
+                        width="180"
                         fix
                     />
                     <fu-table-operations
-                        :ellipsis="mobile ? 0 : 5"
-                        :min-width="mobile ? 'auto' : 300"
+                        :ellipsis="mobile ? 0 : 3"
+                        :width="mobile ? 'auto' : 200"
                         :buttons="buttons"
                         fixed="right"
                         :label="$t('commons.table.operate')"
@@ -160,6 +160,15 @@ const supervisorRef = ref();
 const terminalRef = ref();
 
 const buttons = [
+    {
+        label: i18n.global.t('commons.button.edit'),
+        click: function (row: Runtime.Runtime) {
+            openDetail(row);
+        },
+        disabled: function (row: Runtime.Runtime) {
+            return disabledButton(row, 'edit');
+        },
+    },
     {
         label: i18n.global.t('runtime.extension'),
         click: function (row: Runtime.Runtime) {
@@ -169,6 +178,15 @@ const buttons = [
             return disabledButton(row, 'extension');
         },
     },
+    {
+        label: i18n.global.t('menu.terminal'),
+        click: function (row: Runtime.Runtime) {
+            openTerminal(row);
+        },
+        disabled: function (row: Runtime.Runtime) {
+            return disabledButton(row, 'config');
+        },
+    },
     {
         label: i18n.global.t('commons.operate.stop'),
         click: function (row: Runtime.Runtime) {
@@ -196,15 +214,6 @@ const buttons = [
             return disabledButton(row, 'restart');
         },
     },
-    {
-        label: i18n.global.t('commons.button.edit'),
-        click: function (row: Runtime.Runtime) {
-            openDetail(row);
-        },
-        disabled: function (row: Runtime.Runtime) {
-            return disabledButton(row, 'edit');
-        },
-    },
     {
         label: i18n.global.t('menu.config'),
         click: function (row: Runtime.Runtime) {
@@ -223,15 +232,7 @@ const buttons = [
             return disabledButton(row, 'config');
         },
     },
-    {
-        label: i18n.global.t('menu.terminal'),
-        click: function (row: Runtime.Runtime) {
-            openTerminal(row);
-        },
-        disabled: function (row: Runtime.Runtime) {
-            return disabledButton(row, 'config');
-        },
-    },
+
     {
         label: i18n.global.t('commons.button.delete'),
         click: function (row: Runtime.Runtime) {