From ba485ce9227ff3388fbe30f5931b13485cbcb767 Mon Sep 17 00:00:00 2001
From: SamYSF <98792230+SamYSF@users.noreply.github.com>
Date: Mon, 20 May 2024 15:24:38 +0800
Subject: [PATCH] feat: add view YAML full screen (#443)

---
 console/atest-ui/src/locales/en.json     |  4 ++-
 console/atest-ui/src/locales/zh.json     |  4 ++-
 console/atest-ui/src/views/TestSuite.vue | 33 +++++++++++++++++++-----
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/console/atest-ui/src/locales/en.json b/console/atest-ui/src/locales/en.json
index 0d61493..6f083ee 100644
--- a/console/atest-ui/src/locales/en.json
+++ b/console/atest-ui/src/locales/en.json
@@ -15,7 +15,9 @@
         "viewYaml":"View YAML",
         "verify": "Verify",
         "generateCode": "Generate Code",
-        "sendWithParam": "Send With Parameter"
+        "sendWithParam": "Send With Parameter",
+        "fullScreen": "Full Screen",
+        "cancelFullScreen": "Cancel Full Screen"
     },
     "title": {
         "createTestSuite": "Create Test Suite",
diff --git a/console/atest-ui/src/locales/zh.json b/console/atest-ui/src/locales/zh.json
index 7e6691d..beb2829 100644
--- a/console/atest-ui/src/locales/zh.json
+++ b/console/atest-ui/src/locales/zh.json
@@ -15,7 +15,9 @@
         "viewYaml":"查看 YAML",
         "verify": "检查",
         "generateCode": "生成代码",
-        "sendWithParam": "参数化"
+        "sendWithParam": "参数化",
+        "fullScreen": "全屏显示",
+        "cancelFullScreen": "取消全屏"
     },
     "title": {
         "createTestSuite": "创建测试用例集",
diff --git a/console/atest-ui/src/views/TestSuite.vue b/console/atest-ui/src/views/TestSuite.vue
index f137039..125d2ad 100644
--- a/console/atest-ui/src/views/TestSuite.vue
+++ b/console/atest-ui/src/views/TestSuite.vue
@@ -87,6 +87,7 @@ function save() {
     })
 }
 
+const isFullScreen = ref(false)
 const dialogVisible = ref(false)
 const testcaseFormRef = ref<FormInstance>()
 const testCaseForm = reactive({
@@ -276,12 +277,15 @@ function viewYaml(){
       <el-divider />
     </div>
 
-    <el-button type="primary" @click="save" v-if="!Cache.GetCurrentStore().readOnly">{{ t('button.save') }}</el-button>
-    <el-button type="primary" @click="save" disabled v-if="Cache.GetCurrentStore().readOnly">{{ t('button.save') }}</el-button>
-    <el-button type="primary" @click="del" test-id="suite-del-but">{{ t('button.delete') }}</el-button>
-    <el-button type="primary" @click="openNewTestCaseDialog" :icon="Edit" test-id="open-new-case-dialog">{{ t('button.newtestcase') }}</el-button>
-    <el-button type="primary" @click="convert" test-id="convert">{{ t('button.export') }}</el-button>
-    <el-button type="primary" @click="viewYaml" test-id="view-yaml">{{ t('button.viewYaml') }}</el-button>
+    <div class="button-container">
+      <el-button type="primary" @click="save" v-if="!Cache.GetCurrentStore().readOnly">{{ t('button.save') }}</el-button>
+      <el-button type="primary" @click="save" disabled v-if="Cache.GetCurrentStore().readOnly">{{ t('button.save') }}</el-button>
+      <el-button type="primary" @click="del" test-id="suite-del-but">{{ t('button.delete') }}</el-button>
+      <el-button type="primary" @click="openNewTestCaseDialog" :icon="Edit" test-id="open-new-case-dialog">{{ t('button.newtestcase') }}</el-button>
+      <el-button type="primary" @click="convert" test-id="convert">{{ t('button.export') }}</el-button>
+      <el-button type="primary" @click="viewYaml" test-id="view-yaml">{{ t('button.viewYaml') }}</el-button>
+    </div>
+
   </div>
 
   <el-dialog v-model="dialogVisible" :title="t('title.createTestCase')" width="40%" draggable>
@@ -342,9 +346,24 @@ function viewYaml(){
     </template>
   </el-dialog>
 
-  <el-dialog v-model="yamlDialogVisible" :title="t('button.viewYaml')" width="40%" draggable>
+  <el-dialog v-model="yamlDialogVisible" :title="t('button.viewYaml')" :fullscreen="isFullScreen" width="40%" draggable>
+    <el-button type="primary" @click="isFullScreen = !isFullScreen" style="margin-bottom: 10px;">
+      <p>{{ isFullScreen ? t('button.cancelFullScreen') : t('button.fullScreen') }}</p>
+    </el-button>
     <el-scrollbar>
       <Codemirror v-model="yamlFormat"/>
     </el-scrollbar>
   </el-dialog>
 </template>
+
+<style scoped>
+.button-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.button-container > .el-button + .el-button {
+    margin-left:0px;
+}
+</style>