From 4aa56c349fce952afa9f27e7a8319e6efb6aef38 Mon Sep 17 00:00:00 2001
From: lan-yonghui <yonghui.lan@fit2cloud.com>
Date: Mon, 24 Apr 2023 22:52:19 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=96=B0=E6=89=8B=E5=BC=95=E5=AF=BC):?=
 =?UTF-8?q?=E6=96=B0=E6=89=8B=E6=8C=87=E5=8D=97=E6=8F=90=E7=A4=BA=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/guide/Guidance.vue         |  4 +-
 .../src/components/sidemenu/SideMenus.vue     | 15 +++--
 .../sidemenu/components/SiteTask.vue          | 56 ++++++++++++++-----
 .../frontend/src/i18n/lang/en-US.js           | 25 +++------
 .../frontend/src/i18n/lang/zh-CN.js           | 19 ++++---
 .../frontend/src/i18n/lang/zh-TW.js           | 31 +++++-----
 6 files changed, 89 insertions(+), 61 deletions(-)

diff --git a/framework/sdk-parent/frontend/src/components/guide/Guidance.vue b/framework/sdk-parent/frontend/src/components/guide/Guidance.vue
index 449524f3d8..2cb9a0fc26 100644
--- a/framework/sdk-parent/frontend/src/components/guide/Guidance.vue
+++ b/framework/sdk-parent/frontend/src/components/guide/Guidance.vue
@@ -109,7 +109,7 @@ export default {
             buttons: [
               {
                 action: function() {
-                  _this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
+                  _this.$refs.introduction.resVisible = true
                   return _this.gotoCancel(this, true)
                 },
                 classes: 'close-btn',
@@ -254,7 +254,7 @@ export default {
             buttons: [
               {
                 action: function() {
-                  _this.$refs.introduction.resVisible = localStorage.getItem("step") > 1
+                  _this.$refs.introduction.resVisible = localStorage.getItem("step") > 0
                   return _this.gotoCancel(this, true)
                 },
                 classes: 'close-btn',
diff --git a/framework/sdk-parent/frontend/src/components/sidemenu/SideMenus.vue b/framework/sdk-parent/frontend/src/components/sidemenu/SideMenus.vue
index 170fd2b88d..13d0563a9a 100644
--- a/framework/sdk-parent/frontend/src/components/sidemenu/SideMenus.vue
+++ b/framework/sdk-parent/frontend/src/components/sidemenu/SideMenus.vue
@@ -3,14 +3,14 @@
     <!--    侧边任务按钮-->
     <div :class="language === 'en-US' ? 'parentBox parentBox-en' : 'parentBox'" @click="toggle(1)">
       <div class="contentsBox">
-        <div :style="openBox ? (language === 'en-US' ? 'right: 0;width:140px;cursor: auto;' :
-        'right: 0;width:100px;cursor: auto;') : ''" >
+        <div :style="openBox ? (language === 'en-US' ? 'right: 0;width:140px;cursor: auto;white-space: nowrap;' :
+        'right: 0;width:100px;cursor: auto;white-space: nowrap;') : ''" >
           <font-awesome-icon class="icon global focusing" :icon="['fas', 'compass']" spin style="color: #ffffff;" />
           <span :style="openBox ? 'display: block;color: #fff;cursor: pointer;' : ''">{{$t('side_task.novice_task')}}</span>
         </div>
       </div>
     </div>
-    <ms-site-task ref="siteTask" :taskData="taskData" @closeBox="closeBox" @closeNovice="closeNovice"/>
+    <ms-site-task ref="siteTask"  @closeBox="closeBox" @closeNovice="closeNovice"/>
   </div>
 </template>
 
@@ -87,6 +87,11 @@ export default {
           this.taskStatus = true
         }
         this.totalTask = num
+        this.$refs.siteTask.taskData = this.taskData
+
+        if(this.openBox){
+          this.$refs.siteTask.open();
+        }
 
         if (this.status) {
           this.$refs.siteTask.skipOpen(this.taskData,"/track/case/all");
@@ -97,13 +102,15 @@ export default {
       this.openBox = !this.openBox
       if(this.openBox || status === 2){
         this.initTaskData(status)
+      }else{
+        this.$refs.siteTask.open();
       }
-      this.$refs.siteTask.open();
     },
     closeBox(status){
       this.openBox = status
     },
     closeNovice(status){
+      this.openBox = false
       this.noviceStatus = status
     },
     skipOpen(path){
diff --git a/framework/sdk-parent/frontend/src/components/sidemenu/components/SiteTask.vue b/framework/sdk-parent/frontend/src/components/sidemenu/components/SiteTask.vue
index f79871e9f2..58b23d6b9f 100644
--- a/framework/sdk-parent/frontend/src/components/sidemenu/components/SiteTask.vue
+++ b/framework/sdk-parent/frontend/src/components/sidemenu/components/SiteTask.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="csat-popup over" v-if="cardVisible && taskInfo.length === completeNum">
+    <div class="csat-popup over" v-if="cardVisible && taskInfo.length === completeNum && taskInfo.length !== 0">
       <el-card class="box-card">
         <div slot="header" class="clearfix over-header">
           <span style="float: right; padding: 5px 0;" class="moon"  @click="open()">
@@ -63,13 +63,16 @@
             <template v-for="(val,i) in item.taskData">
               <div class="text item" v-if="checkPermissions(val.permission)" :key="i">
                 <p v-if="val.status === 1">
-                    <font-awesome-icon :icon="['far', 'check-circle']" style="color:#783887" />
-                  <label> {{$t(val.name)}}</label>
+                  <font-awesome-icon :icon="['far', 'check-circle']" style="color:#783887" />
+                  <label :style="language === 'en-US' ? 'font-size: 14px' : ''">{{$t(val.name)}}</label>
                 </p>
-                <p v-else @click="openGif(val)">
-                  <font-awesome-icon :icon="['far', 'circle']" class="title-icon" />
-                  <span>  {{$t(val.name)}}
-                </span>
+                <p v-else @click="openGif(val)" :class="checked === val.id ? 'check-p' : ''">
+                  <font-awesome-icon :icon="checked === val.id ? ['fas', 'circle-notch'] : ['far', 'circle']"
+                                     class="title-icon" rotation='90' />
+                  <span :style="language === 'en-US' ? 'font-size: 14px' : ''"
+                        :class="checked === val.id ? 'checked' : ''">
+                    {{$t(val.name)}}
+                  </span>
                 </p>
               </div>
             </template>
@@ -165,11 +168,10 @@ export default {
       incompleteNum: 0,
       totalNum: 0,
       language: localStorage.getItem('language'),
+      taskData: [],
+      checked: ""
     }
   },
-  props: {
-    taskData: Array
-  },
   methods: {
     taskNum() {
       let totalNum = 0
@@ -188,6 +190,7 @@ export default {
           this.taskInfo.push(item)
         }
       })
+
       let incompleteNum = totalNum - completeNum - ongoingNum
       this.completeNum = completeNum
       this.ongoingNum = ongoingNum
@@ -197,28 +200,34 @@ export default {
 
     open() {
       this.taskIndex = 1
-      this.taskNum()
       this.cardVisible = !this.cardVisible;
+      if(this.cardVisible){
+        this.taskNum()
+      }
       this.$emit("closeBox", this.cardVisible)
       this.gifVisible = this.cardVisible ? this.gifVisible : this.cardVisible;
       this.noviceVisible = this.cardVisible ? false : this.cardVisible;
     },
     openGif(gif) {
+      this.checked = gif.id
       this.gifVisible = true
       this.noviceVisible = false
       this.gifData = gif
     },
     closeGif(){
+      this.checked = ""
       this.gifVisible = false
       this.noviceVisible = false
     },
     prev() {
       this.taskIndex = this.taskIndex - 1
       this.taskIndex = this.taskIndex < 1 ? 1 : this.taskIndex
+      this.closeGif()
     },
     next() {
       this.taskIndex = this.taskIndex + 1
       this.taskIndex = this.taskIndex > this.taskData.length ? this.taskData.length : this.taskIndex
+      this.closeGif()
     },
     notShow() {
       this.noviceVisible = true
@@ -226,7 +235,7 @@ export default {
     },
     goContinue () {
       updateStatus(0).then(res=>{
-        this.$success(this.$t('commons.save_success'));
+        this.$success(this.$t('side_task.save_success'));
         this.cardVisible = false
         localStorage.setItem("noviceStatus", "0")
         this.$emit("closeNovice", false)
@@ -287,7 +296,7 @@ export default {
 
 .item {
   margin-bottom: 10px;
-  margin-left: 35px;
+  margin-left: 20px;
 }
 
 .item p {
@@ -303,7 +312,8 @@ export default {
   padding: 3px 6px;
 }
 .title-icon {
-  color: #303133
+  color: #303133;
+  margin-right: 3px;
 }
 .item p:hover {
   color:#783887;
@@ -318,6 +328,24 @@ export default {
 .item p:hover .title-icon {
   color:#783887;
 }
+.item p:hover span {
+  border-radius: 15px;
+  background-color:#f3f3f3;
+}
+
+.check-p {
+  color:#783887;
+  cursor:pointer;
+}
+
+.check-p .title-icon {
+  color:#783887;
+}
+
+.checked {
+  border-radius: 15px;
+  background-color:#f3f3f3;
+}
 
 .progress-card-en {
   margin-top: 10px;
diff --git a/framework/sdk-parent/frontend/src/i18n/lang/en-US.js b/framework/sdk-parent/frontend/src/i18n/lang/en-US.js
index 4f730cff63..7f28074774 100644
--- a/framework/sdk-parent/frontend/src/i18n/lang/en-US.js
+++ b/framework/sdk-parent/frontend/src/i18n/lang/en-US.js
@@ -3537,7 +3537,7 @@ const message = {
   shepherd: {
     step1: {
       title: 'A Workspaces and Projects',
-      text: 'MeterSphere uses "workspaces" and "projects" to organize test data and members. You can switch positions as you like in the top menu.'
+      text: 'MeterSphere uses [workspace] and [project] to isolate test data, and you can switch between workspace and project in the top menu.'
     },
     step2: {
       title: 'Side navigation menu',
@@ -3553,7 +3553,7 @@ const message = {
     },
     step5: {
       title: "Where are you?",
-      text: "Now, you have joined our preset workspace by default and become a member of the demo project. Please start your testing journey from here."
+      text: "Now, that you have joined a workspace and become a member of the current project, start your testing journey from here."
     },
     exit:'skip',
     next: 'Next',
@@ -3567,22 +3567,22 @@ const message = {
     },
     test: {
       title: 'Test cases are the cornerstone of testing',
-      desc: '<span>Maintain your test cases through online editing/file import/URL synchronization/multi-person review,</span><br> <span>add them to your test plan,quantitatively manage test progress, record results, synchronize issues, </span><br> retain/share test reports, and cover the entire software testing life cycle. ',
+      desc: '<span>Maintain your test cases through online editing/file import/URL synchronization/multi-person review,</span><br><span>add them to your test plan,quantitatively manage test progress, record results, synchronize issues, </span><br><span>retain/share test reports, and cover the entire software testing life cycle.</span>',
       button: 'Next: Interface Test'
     },
     api: {
       title: 'Simulate real scenarios to automate API testing',
-      desc: '<span>API testing is triggered by manual/scheduled tasks/plug-ins, supporting multiple communication protocols; </span><br> <span> scenario case-sets are arranged based on real business processes,  </span><br> <span> and multi-type controllers/custom scripts/assertions are supported to meet various user needs. ',
+      desc: '<span>API testing is triggered by manual/scheduled tasks/plug-ins, supporting multiple communication protocols; </span><br><span>scenario case-sets are arranged based on real business processes, </span><br><span>and multi-type controllers/custom scripts/assertions are supported to meet various user needs.</span>',
       button: 'Next: UI Test'
     },
     ui: {
       title: 'Portable UI element library and command set',
-      desc: '<span>Arrange scenario cases based on reusable element library and commands;</span><br> combine your commonly used test steps into new command, <br> <span> which can be flexibly called in automation scenarios. </span>',
+      desc: '<span>Arrange scenario cases based on reusable element library and commands;</span><br><span>combine your commonly used test steps into new command, </span><br><span>which can be flexibly called in automation scenarios. </span>',
       button: 'Next: Performance Test'
     },
     performance: {
       title: 'One-click launch performance testing',
-      desc: '<span>Provides a distributed performance testing solution, supporting multiple types of testing resource pools </span><br> <span>such as physical machines/virtual machines/k8s container clusters; </span><br> <span>One-click to initiate API scenario case to performance testing, and view real-time reports;</span><br> Provides report comparison under different configurations to control performance bottlenecks and optimize them. ',
+      desc: '<span>Provides a distributed performance testing solution, supporting multiple types of testing resource pools </span><br><span>such as physical machines/virtual machines/k8s container clusters; </span><br><span>One-click to initiate API scenario case to performance testing, and view real-time reports;</span><br><span>Provides report comparison under different configurations to control performance bottlenecks and optimize them.</span>',
       button: 'To create your first test case'
     },
     go_prev: 'Return to previous'
@@ -3643,17 +3643,8 @@ const message = {
       desc: 'You can still find us in the top "?" dropdown menu.',
       continue_btn: "Continue",
       close_btn: "Still Close",
-    }
-
-
-
-
-
-
-
-
-
-
+    },
+    save_success: "Closed successfully",
   }
 };
 
diff --git a/framework/sdk-parent/frontend/src/i18n/lang/zh-CN.js b/framework/sdk-parent/frontend/src/i18n/lang/zh-CN.js
index 80ba0b636e..6fbcc183fa 100644
--- a/framework/sdk-parent/frontend/src/i18n/lang/zh-CN.js
+++ b/framework/sdk-parent/frontend/src/i18n/lang/zh-CN.js
@@ -3408,11 +3408,11 @@ const message = {
   shepherd: {
     step1: {
       title: '工作空间和项目',
-      text: 'MeterSphere 使用「工作空间」和「项目」来组织测试数据和人力资源。您可以在顶部菜单任意切换位置。'
+      text: 'MeterSphere 使用 [工作空间] 和 [项目] 来隔离测试数据, 你可以在顶部菜单进行工作空间和项目切换。'
     },
     step2: {
       title: '功能主菜单',
-      text: '主菜单显示您所在的功能模块。'
+      text: '主菜单显示你所在的功能模块。'
     },
     step3: {
       title: '一个空间可以创建多个项目',
@@ -3424,7 +3424,7 @@ const message = {
     },
     step5: {
       title: "你在哪？",
-      text: "现在，您已默认加入了我们预置的演示空间，并成为演示项目的一员。就从这里开始你的测试之旅吧。"
+      text: "现在，你已加入了一个工作空间并成为当前项目的一员，就从这里开始你的测试之旅吧。"
     },
     exit:'跳过',
     next:'下一步',
@@ -3438,22 +3438,22 @@ const message = {
     },
     test: {
       title: '测试用例是测试任务的基石',
-      desc: '<span>使用在线编辑/文件导入/URL同步/多人评审的方式维护你的用例，</span><br> <span>将它们加入你的测试计划中，量化管理测试进度，记录结果，同步缺陷，</span><br> 留存/分享测试报告，覆盖整个测试生命周期。',
+      desc: '<span>使用在线编辑/文件导入/URL同步/多人评审的方式维护你的用例，</span><br><span>将它们加入你的测试计划中，量化管理测试进度，记录结果，同步缺陷，</span><br><span>留存/分享测试报告，覆盖整个测试生命周期。</span>',
       button: '下一个：接口测试'
     },
     api: {
       title: '模拟真实场景 让接口自动化',
-      desc: '<span>通过手动/定时任务/插件触发接口测试，支持多种通信协议；</span><br> <span> 基于真实业务流程编排场景化用例集，支持添加多类型控制器/自定义脚本/断言，</span><br> 满足各种复杂场景所需。',
+      desc: '<span>通过手动/定时任务/插件触发接口测试，支持多种通信协议；</span><br><span>基于真实业务流程编排场景化用例集，支持添加多类型控制器/自定义脚本/断言，</span><br><span>满足各种复杂场景所需。</span>',
       button: '下一个：UI测试'
     },
     ui: {
       title: '可移植的 UI 元素库与指令集',
-      desc: '<span>基于可复用的元素库及指令快速编排场景化用例；</span><br> 将你常用的测试步骤组合成新的自定义指令，在自动化场景中灵活调用。<span>&nbsp;<br><br></span>',
+      desc: '<span>基于可复用的元素库及指令快速编排场景化用例；</span><br><span>将你常用的测试步骤组合成新的自定义指令，</span><br><span>在自动化场景中灵活调用。</span>',
       button: '下一个：性能测试'
     },
     performance: {
       title: '性能测试 一键就可以',
-      desc: '<span>提供分布式压测解决方案，支持物理机/虚拟机/k8s容器集群等多类型压测资源池；</span><br> <span>使用接口测试转性能一键发起，实时查看报告；</span><br> 提供差异配置下的报告对比，掌控性能瓶颈及调优。',
+      desc: '<span>提供分布式压测解决方案，支持物理机/虚拟机/k8s容器集群等多类型压测资源池；</span><br><span>使用接口测试转性能一键发起，实时查看报告；</span><br><span>提供差异配置下的报告对比，掌控性能瓶颈及调优。</span>',
       button: '完成！去创建你的第 1 条测试用例'
     },
     go_prev: '返回上一个'
@@ -3503,7 +3503,7 @@ const message = {
     novice_task: "新手旅程",
     over: {
       title: "恭喜通关！",
-      subtitle: "您已完成全部新手旅程 能量满载～",
+      subtitle: "你已完成全部新手旅程 能量满载～",
       desc: "想继续了解进阶教程，请关注我们的技术博客和直播",
       blog_url: "博客地址",
       live_url: "直播间地址"
@@ -3514,7 +3514,8 @@ const message = {
       desc: '你可以在顶部" ? "下拉菜单重新找到我们。',
       continue_btn: "现在继续",
       close_btn: "仍然关闭",
-    }
+    },
+    save_success: "关闭成功",
   }
 };
 
diff --git a/framework/sdk-parent/frontend/src/i18n/lang/zh-TW.js b/framework/sdk-parent/frontend/src/i18n/lang/zh-TW.js
index eb3e42b2f4..6bf20b1e4e 100644
--- a/framework/sdk-parent/frontend/src/i18n/lang/zh-TW.js
+++ b/framework/sdk-parent/frontend/src/i18n/lang/zh-TW.js
@@ -3408,7 +3408,7 @@ const message = {
   shepherd: {
     step1: {
       title: '工作空間和項目',
-      text: 'MeterSphere 使用「工作空間」和「項目」來組織測試數據和人力資源。您可以在頂部菜單任意切換位置。'
+      text: 'MeterSphere 使用 [工作空間] 和 [項目] 來隔離測試數據, 你可以在頂部菜單進行工作空間和項目切換。'
     },
     step2: {
       title: '功能主菜單',
@@ -3424,7 +3424,7 @@ const message = {
     },
     step5: {
       title: "你在哪？",
-      text: "現在，您已默認加入了我們預置的演示空間，並成為演示項目的一員。就從這裡開始你的測試之旅吧。"
+      text: "現在，你已加入了一個工作空間並成為當前項目的一員，就從這裡開始你的測試之旅吧。"
     },
     exit:'跳過',
     next:'下一步',
@@ -3438,22 +3438,22 @@ const message = {
     },
     test: {
       title: '測試用例是測試任務的基石',
-      desc: '<span>使用在線編輯/文件導入/URL同步/多人評審的方式維護你的用例，</span><br> <span>將它們加入你的測試計劃中，量化管理測試進度，記錄結果，同步缺陷，</span><br> 留存/分享測試報告，覆蓋整個測試生命週期。 ',
+      desc: '<span>使用在線編輯/文件導入/URL同步/多人評審的方式維護你的用例，</span><br><span>將它們加入你的測試計劃中，量化管理測試進度，記錄結果，同步缺陷，</span><br><span>留存/分享測試報告，覆蓋整個測試生命週期。</span>',
       button: '下一個：接口測試'
     },
     api: {
       title: '模擬真實場景 讓接口自動化',
-      desc: '<span>通過手動/定時任務/插件觸發接口測試，支持多種通信協議；</span><br> <span> 基於真實業務流程編排場景化用例集，支持添加多類型控制器/自定義腳本/斷言，</span><br> 滿足各種複雜場景所需。 ',
+      desc: '<span>通過手動/定時任務/插件觸發接口測試，支持多種通信協議；</span><br><span> 基於真實業務流程編排場景化用例集，支持添加多類型控制器/自定義腳本/斷言，</span><br><span>滿足各種複雜場景所需。</span>',
       button: '下一個：UI測試'
     },
     ui: {
       title: '可移植的 UI 元素庫與指令集',
-      desc: '<span>基於可複用的元素庫及指令快速編排場景化用例；</span><br> 將你常用的測試步驟組合成新的自定義指令，在自動化場景中靈活調用。 <span>&nbsp;<br><br></span>',
+      desc: '<span>基於可複用的元素庫及指令快速編排場景化用例；</span><br><span>將你常用的測試步驟組合成新的自定義指令，</span><br><span>在自動化場景中靈活調用。</span>',
       button: '下一個：性能測試'
     },
     performance: {
       title: '性能測試 一鍵就可以',
-      desc: '<span>提供分佈式壓測解決方案，支持物理機/虛擬機/k8s容器集群等多類型壓測資源池；</span><br> <span>使用接口測試轉性能一鍵發起，實時查看報告；</span><br> 提供差異配置下的報告對比，掌控性能瓶頸及調優。 ',
+      desc: '<span>提供分佈式壓測解決方案，支持物理機/虛擬機/k8s容器集群等多類型壓測資源池；</span><br><span>使用接口測試轉性能一鍵發起，實時查看報告；</span><br><span>提供差異配置下的報告對比，掌控性能瓶頸及調優。</span>',
       button: '完成！去創建你的第 1 條測試用例'
     },
     go_prev: '返回上一個'
@@ -3470,18 +3470,18 @@ const message = {
       task_7: "為測試用例關聯缺陷",
     },
     api_test: {
-      title: "通關介面測試",
-      task_1: "創建一條介面定義",
-      task_2: "導入本地介面或介面用例",
-      task_3: "進行一次介面快捷調試",
-      task_4: "基於介面調試創建新用例",
-      task_5: "分享介面檔案",
+      title: "通關接口測試",
+      task_1: "創建一條接口定義",
+      task_2: "導入本地接口或接口用例",
+      task_3: "進行一次接口快捷調試",
+      task_4: "基於接口調試創建新用例",
+      task_5: "分享接口文檔",
       task_6: "創建一條場景自動化用例",
-      task_7: "以定時任務執行介面自動化測試",
+      task_7: "以定時任務執行接口自動化測試",
     },
     performance_test: {
       title: "通關性能測試",
-      task_1: "將介面場景用例轉為性能測試",
+      task_1: "將接口場景用例轉為性能測試",
       task_2: "分享性能測試報告",
     },
     project_setting: {
@@ -3514,7 +3514,8 @@ const message = {
       desc: '你可以在頂部" ? "下拉式功能表重新找到我們。',
       continue_btn: "現在繼續",
       close_btn: "仍然關閉",
-    }
+    },
+    save_success: "關閉成功",
   }
 };