perf(views): 优化“协议结果”和“创建协议”步骤 UI

src/views/setup-protocol/CreateProtocol.vue

@@ -35,7 +35,7 @@ const finish = async () => {
   if (props.form.protocolInfo.id) {
     await updateProtocolBaseInfo(props.form.protocolInfo);
   } else {
-    await addProtocolBaseInfo(props.form.protocolInfo);
+    props.form.protocolInfo.id = await addProtocolBaseInfo(props.form.protocolInfo);
   }
 
   await completeProtocolConfig(props.form.protocolInfo.id as number);
@@ -49,22 +49,6 @@ defineExpose<UseGuideStepItemExpose>({
 
 <template>
   <div>
-    <div class="result-header">
-      <div class="use-guide-title">{{ $t('setupProtocol.createProtocol') }}</div>
-    </div>
-    <ProtocolContent class="result-protocol" ref="protocolContent" :info="form.protocolInfo" />
+    <ProtocolContent ref="protocolContent" :info="form.protocolInfo" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.result-header {
-  display: flex;
-  justify-content: space-between;
-  width: calc(62% + 17px);
-  margin-bottom: 36px;
-}
-
-.result-protocol {
-  margin: 0 17px;
-}
-</style>

src/views/setup-protocol/RecognitionResult.vue

@@ -2,6 +2,7 @@
 import { onMounted, useTemplateRef } from 'vue';
 import { message } from 'ant-design-vue';
 
+import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
 import { completeProtocolConfig, downloadUserProtocol, getProtocolBaseInfo, updateProtocolBaseInfo } from '@/api';
@@ -60,24 +61,22 @@ defineExpose<UseGuideStepItemExpose>({
 </script>
 
 <template>
-  <div>
-    <div class="result-header">
-      <div class="use-guide-title">{{ $t('setupProtocol.recognitionResult') }}</div>
-      <AButton @click="reRecognize">{{ $t('setupProtocol.reRecognize') }}</AButton>
-    </div>
-    <ProtocolContent class="result-protocol" ref="protocolContent" :info="form.protocolInfo" />
+  <div class="result-container">
+    <AButton class="icon-button recognize-button" @click="reRecognize">
+      <SvgIcon name="reload" />
+      {{ $t('setupProtocol.reRecognize') }}
+    </AButton>
+    <ProtocolContent ref="protocolContent" :info="form.protocolInfo" />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.result-header {
-  display: flex;
-  justify-content: space-between;
-  width: calc(62% + 17px);
-  margin-bottom: 36px;
+.result-container {
+  position: relative;
 }
 
-.result-protocol {
-  margin: 0 17px;
+.recognize-button {
+  position: absolute;
+  top: -103px;
 }
 </style>