Browse Source

perf(components): 优化“配置协议”模块的组件逻辑和样式,适配 ModalGuidance 组件

wangcong 1 month ago
parent
commit
72e47c6c0e

+ 6 - 0
src/views/setup-protocol/FinishProtocol.vue

@@ -74,6 +74,12 @@ const downloadProtocol = () => {
 </template>
 
 <style lang="scss" scoped>
+.modal-guidance-modal {
+  .finish-container {
+    margin-top: 50px;
+  }
+}
+
 .finish-container {
   display: flex;
   flex-direction: column;

+ 5 - 1
src/views/setup-protocol/SelectConfigMethod.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { onMounted, shallowRef } from 'vue';
+import { inject, onMounted, shallowRef } from 'vue';
 
 import { t } from '@/i18n';
 import { ProtocolConfigMethod } from '@/constants';
+import { IS_USED_IN_MODAL_GUIDANCE } from '@/constants/inject-key';
 
 import CreateProtocol from './CreateProtocol.vue';
 import FinishProtocol from './FinishProtocol.vue';
@@ -16,6 +17,7 @@ import type { SetupProtocolForm, UseGuideStepItemExpose, UseGuideStepItemProps }
 const props = defineProps<UseGuideStepItemProps<SetupProtocolForm>>();
 
 const currentStep = props.steps[props.stepIndex];
+const isUsedInModalGuidance = inject(IS_USED_IN_MODAL_GUIDANCE, false);
 
 onMounted(() => {
   currentStep.title = t('setupProtocol.selectConfigMethod');
@@ -50,6 +52,7 @@ const finish = () => {
         title: t('common.finishSetup'),
         hideHeader: true,
         component: shallowRef(FinishProtocol),
+        nextStepButtonText: isUsedInModalGuidance ? t('common.finishSetup') : undefined,
         isLastStep: true,
       },
     );
@@ -71,6 +74,7 @@ const finish = () => {
         title: t('common.finishSetup'),
         hideHeader: true,
         component: shallowRef(FinishProtocol),
+        nextStepButtonText: isUsedInModalGuidance ? t('common.finishSetup') : undefined,
         isLastStep: true,
       },
     );