refactor: update ReplicationTour component and store state

apps/dfs/src/components/ReplicationTour.vue

@@ -5,7 +5,7 @@
     :show-close="false"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
-    custom-class="tour-dialog"
+    :custom-class="customClass"
   >
     <template v-if="!finish">
       <div class="text-center title-cover" slot="title">
@@ -26,14 +26,29 @@
     </template>
 
     <template v-else>
-      <div class="text-center title-cover pt-4" slot="title">🎉</div>
-
-      <div class="lh-base font-color-dark text-center mt-n4">
-        <h1 class="fs-5 fw-sub font-color-dark mb-2">{{ $t('dfs_replication_tour_dialog_success_title') }}</h1>
+      <div class="text-center font-color-dark">
+        <VIcon size="64" class="color-success mt-3">check-circle-fill</VIcon>
+        <div class="mt-4 fs-5 color-primary">{{ $t('dfs_replication_tour_dialog_finished') }}</div>
+        <div class="mt-2">{{ $t('dfs_replication_tour_dialog_finished_subtitle') }}</div>
+        <div class="mt-12 fw-sub">{{ $t('dfs_replication_tour_dialog_finished_survey_title') }}</div>
+        <ElRadioGroup v-model="continueUse" class="inline-flex gap-4 mt-4">
+          <ElRadio label="yes" class="m-0 bg-white" border>是</ElRadio>
+          <ElRadio label="no" class="m-0 bg-white" border>否</ElRadio>
+        </ElRadioGroup>
+        <div class="px-6 mt-4">
+          <ElInput
+            v-model="suggestion"
+            type="textarea"
+            :placeholder="$t('dfs_replication_tour_dialog_finished_survey_placeholder')"
+            :rows="2"
+            :maxlength="200"
+            show-word-limit
+          ></ElInput>
+        </div>
       </div>
 
       <div slot="footer" class="text-center">
-        <el-button @click="$emit('finish')" type="primary">{{ $t('dfs_replication_tour_dialog_finish') }}</el-button>
+        <el-button @click="handleDone" type="primary">{{ $t('dfs_replication_tour_dialog_finish') }}</el-button>
       </div>
     </template>
   </ElDialog>
@@ -53,7 +68,9 @@ export default {
 
   data() {
     return {
-      visible: this.value
+      visible: this.value,
+      continueUse: '',
+      suggestion: ''
     }
   },
 
@@ -63,6 +80,12 @@ export default {
     },
     noEmail() {
       return !this.$store.state.user.email
+    },
+    customClass() {
+      if (this.finish) {
+        return 'tour-dialog is-finish'
+      }
+      return 'tour-dialog'
     }
   },
 
@@ -119,6 +142,19 @@ export default {
           bind: 'email'
         }
       })
+    },
+
+    handleDone() {
+      this.$emit('finish')
+
+      const { expand } = this.$store.state.guide
+      this.$axios.post('api/tcm/user_guide', {
+        expand: {
+          ...expand,
+          continueUse: this.continueUse,
+          suggestion: this.suggestion
+        }
+      })
     }
   }
 }
@@ -136,5 +172,11 @@ export default {
   .el-dialog__header {
     padding: 0;
   }
+
+  &.is-finish {
+    background-image: url('../assets/image/teaching_completion_bg.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
 }
 </style>

apps/dfs/src/i18n/langs/en.js

@@ -1765,7 +1765,13 @@ export default {
   dfs_replication_tour_dialog_start: 'Start',
   dfs_replication_tour_dialog_success_title:
     'Congratulations! You have successfully completed the guided tour for the replication task.',
-  dfs_replication_tour_dialog_finish: 'Finish',
+  dfs_replication_tour_dialog_finish: 'Done',
+  dfs_replication_tour_dialog_finished: 'Congratulations on completing the beginner tutorial!',
+  dfs_replication_tour_dialog_finished_subtitle:
+    'Next, you can enjoy a free trial of our product for tasks such as database replication and migration',
+  dfs_replication_tour_dialog_finished_survey_title:
+    'Through the onboarding guide, you now have a certain understanding of Tapdata. Will you continue to use Tapdata?',
+  dfs_replication_tour_dialog_finished_survey_placeholder: 'Enter your feedback or suggestions...',
   dfs_subscribe_to_professional_plan: 'Subscribe to Professional Plan',
   dfs_order_change: 'Change',
   dfs_change_record: 'Change Record',

apps/dfs/src/i18n/langs/zh-CN.js

@@ -1635,6 +1635,11 @@ export default {
   dfs_replication_tour_dialog_start: '开始',
   dfs_replication_tour_dialog_success_title: '恭喜您已经完成复制任务的引导',
   dfs_replication_tour_dialog_finish: '完成',
+  dfs_replication_tour_dialog_finished: '恭喜你完成引导',
+  dfs_replication_tour_dialog_finished_subtitle: '接下来可以免费体验我们的产品进行数据库的复制、迁移等工作啦',
+  dfs_replication_tour_dialog_finished_survey_title:
+    '通过新手引导，您现在对Tapdata有了一定的了解。您还会继续使用Tapdata吗？',
+  dfs_replication_tour_dialog_finished_survey_placeholder: '输入您的意见或者建议...',
   dfs_subscribe_to_professional_plan: '订阅专业版',
   dfs_order_change: '变更',
   dfs_change_record: '变更记录',

apps/dfs/src/i18n/langs/zh-TW.js

@@ -1602,6 +1602,11 @@ export default {
   dfs_replication_tour_dialog_start: '開始',
   dfs_replication_tour_dialog_success_title: '恭喜您已經完成複製任務的引導',
   dfs_replication_tour_dialog_finish: '完成',
+  dfs_replication_tour_dialog_finished: '恭喜你完成引導',
+  dfs_replication_tour_dialog_finished_subtitle: '接下來可以免費體驗我們的產品進行數據庫的複製、遷移等工作啦',
+  dfs_replication_tour_dialog_finished_survey_title:
+    '通過新手引導，您現在對Tapdata有了一定的瞭解。您還會繼續使用Tapdata嗎？',
+  dfs_replication_tour_dialog_finished_survey_placeholder: '輸入您的意見或者建議...',
   dfs_subscribe_to_professional_plan: '訂閱專業版',
   dfs_order_change: '變更',
   dfs_change_record: '變更記錄',

apps/dfs/src/store/index.js

@@ -53,7 +53,8 @@ const store = new Vuex.Store({
       agentId: '',
       steps: [],
       behavior: '',
-      behaviorAt: null
+      behaviorAt: null,
+      expand: {}
     },
     agentCount: {
       agentTotalCount: 0,