From 7f87ad26f554bd0da4591fea3d6bc7b28760120f Mon Sep 17 00:00:00 2001
From: KDZhu <carlchu0113@gmail.com>
Date: Mon, 28 Oct 2024 11:52:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(version-diff):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=AF=B9=E6=AF=94=E4=B8=8D=E8=83=BD=E6=AD=A3?=
 =?UTF-8?q?=E7=A1=AE=E6=98=BE=E7=A4=BA=E6=96=B0=E7=BD=91=E5=85=B3=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E7=89=88=E6=9C=AC=E7=9A=84=E8=B5=84=E6=BA=90?=
 =?UTF-8?q?=E5=B7=AE=E5=BC=82=E7=9A=84=E9=97=AE=E9=A2=98=20#=20Reviewed,?=
 =?UTF-8?q?=20transaction=20id:=2022037?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/version-diff/index.vue     |  3 +-
 .../src/views/resource/setting/index.vue      |  8 +++-
 .../overview/comps/release-sideslider.vue     | 38 ++++++++++++-------
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/dashboard-front/src/components/version-diff/index.vue b/src/dashboard-front/src/components/version-diff/index.vue
index e8d332b96..f0f746c07 100644
--- a/src/dashboard-front/src/components/version-diff/index.vue
+++ b/src/dashboard-front/src/components/version-diff/index.vue
@@ -624,7 +624,8 @@ const handleVersionChange = async () => {
 };
 
 const getDiffData = async () => {
-  if (isDataLoading.value || !localSourceId.value) {
+  // localSourceId 可以为 0
+  if (isDataLoading.value || localSourceId.value === '') {
     return false;
   }
 
diff --git a/src/dashboard-front/src/views/resource/setting/index.vue b/src/dashboard-front/src/views/resource/setting/index.vue
index df61818af..e46c2a8b5 100644
--- a/src/dashboard-front/src/views/resource/setting/index.vue
+++ b/src/dashboard-front/src/views/resource/setting/index.vue
@@ -1075,7 +1075,13 @@ const handleOutBatch = () => {
 const handleShowDiff = async () => {
   try {
     const res = await getResourceVersionsList(props.apigwId, { offset: 0, limit: 999 });
-    diffSourceId.value = res.results[0]?.id || '';
+    // 如果是此网关的第一个版本（版本号为 1.0.0），则与空网关版本对比（版本ID为0）
+    if (res.results[0]?.version === '1.0.0') {
+      diffTargetId.value = res.results[0].id;
+      diffSourceId.value = 0;
+    } else {
+      diffSourceId.value = res.results[0]?.id || '';
+    }
     diffSidesliderConf.width = window.innerWidth <= 1280 ? 1040 : 1280;
     diffSidesliderConf.isShow = true;
   } catch (e) {
diff --git a/src/dashboard-front/src/views/stage/overview/comps/release-sideslider.vue b/src/dashboard-front/src/views/stage/overview/comps/release-sideslider.vue
index cd6676553..fbb49a948 100644
--- a/src/dashboard-front/src/views/stage/overview/comps/release-sideslider.vue
+++ b/src/dashboard-front/src/views/stage/overview/comps/release-sideslider.vue
@@ -4,7 +4,7 @@
       class="release-sideslider"
       v-model:isShow="isShow"
       :width="960"
-      :title="t('发布资源至环境【{stage}】', { stage: chooseAssets?.name })"
+      :title="t('发布资源至环境【{stage}】', { stage: chooseAssets.name })"
       quick-close
       :before-close="handleBeforeClose"
       @animation-end="handleAnimationEnd"
@@ -23,17 +23,17 @@
                 <bk-alert
                   theme="info"
                   :title="$t('尚未发布')"
-                  v-if="chooseAssets?.release?.status === 'unreleased'"
+                  v-if="chooseAssets.release?.status === 'unreleased'"
                   class="mt15 mb15"
                 />
                 <bk-alert
                   v-else
                   theme="info"
                   :title="
-                    chooseAssets?.resource_version?.version ?
+                    chooseAssets.resource_version?.version ?
                       t('当前版本号: {version},于 {created_time} 发布成功; 资源更新成功后, 需发布到指定的环境, 方可生效', {
-                        version: chooseAssets?.resource_version?.version,
-                        created_time: chooseAssets?.release.created_time
+                        version: chooseAssets.resource_version?.version,
+                        created_time: chooseAssets.release.created_time
                       }) :
                       t('资源更新成功后, 需发布到指定的环境, 方可生效')"
                   class="mt15 mb15"
@@ -52,9 +52,9 @@
                   </bk-form-item>
                   <p class="publish-version-tips">
                     {{
-                      t('发布的资源版本（ 当前版本：{version}', { version: chooseAssets?.resource_version?.version || '--' })
+                      t('发布的资源版本（ 当前版本：{version}', { version: chooseAssets.resource_version?.version || '--' })
                     }}
-                    <template v-if="isRollback && chooseAssets?.resource_version?.version">
+                    <template v-if="isRollback && chooseAssets.resource_version?.version">
                       ，<span>{{ t('发布后，将回滚至 {version} 版本', { version: resourceVersion }) }}</span>
                     </template>
                     {{ t('）') }}
@@ -90,14 +90,14 @@
                           <span class="version-tips" v-if="item.schema_version === '1.0'">
                             ({{ t('老版本，未包含后端服务等信息，发布可能会导致数据不一致，请新建版本再发布') }})
                           </span>
-                          <span v-if="chooseAssets?.resource_version?.version === item.version" class="cur-version">
+                          <span v-if="chooseAssets.resource_version?.version === item.version" class="cur-version">
                             <bk-tag theme="info">
                               {{ t('当前版本') }}
                             </bk-tag>
                           </span>
                           <span
                             v-if="item.isLatestVersion"
-                            :class="[{ 'cur-version': chooseAssets?.resource_version?.version !== item.version }]"
+                            :class="[{ 'cur-version': chooseAssets.resource_version?.version !== item.version }]"
                           >
                             <bk-tag theme="success" @click.stop="handleVersionChange(item)">
                               {{
@@ -156,7 +156,7 @@
                 <version-diff
                   ref="diffRef"
                   page-type="publishEnvironment"
-                  :source-id="chooseAssets?.resource_version?.id || currentAssets?.resource_version?.id"
+                  :source-id="sourceResourceVersionId"
                   :target-id="formData.resource_version_id"
                   :source-switch="false"
                   :target-switch="false"
@@ -349,7 +349,7 @@ const showPublishDia = () => {
 const handlePublish = async () => {
   try {
     const params = {
-      stage_id: chooseAssets.value?.id,
+      stage_id: chooseAssets.value.id,
       ...formData,
     };
     const res = await createReleases(apigwId.value, params);
@@ -418,10 +418,20 @@ const showReleaseSideslider = () => {
 };
 
 const curVersionId = computed(() => {
-  const version = versionList.value?.filter((item: any) => item.id === chooseAssets.value?.resource_version?.id)[0];
+  const version = versionList.value?.filter((item: any) => item.id === chooseAssets.value.resource_version?.id)[0];
   return version?.id;
 });
 
+// 版本对比中放在UI左侧、作为旧版本来对比的资源版本ID
+const sourceResourceVersionId = computed(() => {
+  // 如果传入的版本是此网关的第一个版本（版本号为 1.0.0）
+  // 则需要跟空网关版本做对比，则版本ID为 0
+  if (chooseAssets.value.resource_version?.version === '1.0.0' && !chooseAssets.value.new_resource_version) {
+    return 0;
+  }
+  return chooseAssets.value.resource_version?.id || props.currentAssets?.resource_version?.id;
+});
+
 // 获取资源版本列表
 const getResourceVersions = async () => {
   try {
@@ -450,7 +460,7 @@ const handleVersionChange = async (payload: any) => {
   };
   try {
     const query = {
-      source_resource_version_id: chooseAssets.value?.resource_version?.id,
+      source_resource_version_id: chooseAssets.value.resource_version?.id,
       target_resource_version_id: payload.id,
     };
     const res: any = await resourceVersionsDiff(apigwId.value, query);
@@ -560,7 +570,7 @@ watch(
 watch(
   () => [formData.resource_version_id, formData.stage_id],
   () => {
-    const curVersion = versionList.value.filter((item: any) => item.id === chooseAssets.value?.resource_version?.id)[0];
+    const curVersion = versionList.value.filter((item: any) => item.id === chooseAssets.value.resource_version?.id)[0];
     const choVersion = versionList.value.filter((item: any) => item.id === formData.resource_version_id)[0];
     if (curVersion && choVersion) {
       const curDate = dayjs(curVersion.created_time);