From b4fa23b84c610d9d84565378a78fe67c4dc945cc Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Mon, 10 Feb 2025 11:42:03 +0800
Subject: [PATCH 01/10] feat: RouterBar support previewId

---
 .../canvas/route-bar/src/CanvasRouteBar.vue   | 80 ++++++++++++++++---
 1 file changed, 67 insertions(+), 13 deletions(-)

diff --git a/packages/canvas/route-bar/src/CanvasRouteBar.vue b/packages/canvas/route-bar/src/CanvasRouteBar.vue
index ca6c7c9d9a..99bcc19a96 100644
--- a/packages/canvas/route-bar/src/CanvasRouteBar.vue
+++ b/packages/canvas/route-bar/src/CanvasRouteBar.vue
@@ -1,18 +1,27 @@
 <template>
   <div id="canvas-route-bar" :style="sizeStyle">
     <div class="address-bar">
-      <template v-for="route in routes" :key="route.id">
-        <span class="slash">/</span>
-        <span :class="[{ route: route.isPage && route.id !== pageId }]" @click="handleClickRoute(route)">{{
-          route.route
-        }}</span>
+      <template v-for="(route, index) in routes" :key="route.id">
+        <span v-if="index > 0" class="slash">/</span>
+        <span
+          :class="[
+            { route: route.isPage && route.id !== pageId, current: route.id === pageId, 'is-preview': route.isPreview }
+          ]"
+          @click="handleClickRoute(route)"
+          >{{ route.route }}</span
+        >
       </template>
+      <tiny-tooltip v-if="existsPreview" type="normal" content="清除预览路径">
+        <svg-button name="cross" class="clear-preview" @click="handleClearPreview"></svg-button>
+      </tiny-tooltip>
     </div>
   </div>
 </template>
 
 <script setup>
+import { SvgButton } from '@opentiny/tiny-engine-common'
 import { getMetaApi, META_SERVICE, useLayout, useMessage, usePage } from '@opentiny/tiny-engine-meta-register'
+import { Tooltip as TinyTooltip } from '@opentiny/vue'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const sizeStyle = computed(() => {
@@ -23,6 +32,8 @@ const sizeStyle = computed(() => {
 const { pageSettingState, getAncestors, switchPageWithConfirm } = usePage()
 
 const pageId = ref(getMetaApi(META_SERVICE.GlobalService).getBaseInfo().pageId)
+const previewId = ref(getMetaApi(META_SERVICE.GlobalService).getBaseInfo().previewId)
+const existsPreview = ref(false)
 
 const { subscribe, unsubscribe } = useMessage()
 
@@ -35,6 +46,9 @@ onMounted(() => {
       if (data.pageId) {
         pageId.value = data.pageId
       }
+      if ('previewId' in data) {
+        previewId.value = data.previewId
+      }
     },
     subscriber: 'routeBar'
   })
@@ -51,32 +65,48 @@ onUnmounted(() => {
  * @property {string | number} id
  * @property {string} route
  * @property {boolean} isPage
+ * @property {boolean} isPreview
  */
 
 /** @type {import('vue').Ref<Route[]>} */
 const routes = ref([])
 
 watch(
-  pageId,
-  async (value) => {
-    if (!value) {
+  [pageId, previewId],
+  async ([pageId, previewId]) => {
+    if (!pageId) {
       routes.value = []
       return
     }
-    const ancestors = (await getAncestors(value, true)) || []
+
+    let ancestors = ((await getAncestors(pageId, true)) || []).concat(pageId)
+
+    if (previewId) {
+      const previewAncestors = ((await getAncestors(previewId, true)) || []).concat(previewId)
+
+      // previewId是pageId的子孙，那么previewId才有效
+      if (previewAncestors.includes(pageId)) {
+        ancestors = previewAncestors
+      }
+    }
+
+    // currentPageIndex逻辑上不可能为-1，所以后续判断位于数组的位置时，不再需要判断是否为-1
+    const currentPageIndex = ancestors.indexOf(pageId)
+
+    // 如果当前编辑页面不是ancestors数组最后一个元素，说明存在preview页面
+    existsPreview.value = currentPageIndex < ancestors.length - 1
 
     routes.value = ancestors
-      .concat(value)
       .map((id) => pageSettingState.treeDataMapping[id])
-      .filter((item) => Boolean(item))
-      .map((pageData) => {
+      .map((pageData, index) => {
         const { id, route, isPage } = pageData
         return {
           id,
           route: route
             .replace(/\/+/g, '/') // 替换连续的 '/' 为单个 '/'
             .replace(/^\/|\/$/g, ''), // 去掉开头和结尾的 '/'
-          isPage
+          isPage,
+          isPreview: index > currentPageIndex
         }
       })
   },
@@ -92,6 +122,10 @@ const handleClickRoute = (route) => {
   }
   switchPageWithConfirm(route.id)
 }
+
+const handleClearPreview = () => {
+  // TODO
+}
 </script>
 
 <style lang="less" scoped>
@@ -125,4 +159,24 @@ const handleClickRoute = (route) => {
     color: var(--te-common-text-link);
   }
 }
+.slash {
+  margin: 0 4px;
+}
+.current {
+  font-weight: bold;
+}
+.is-preview {
+  color: var(--te-common-text-weaken);
+}
+#canvas-route-bar:hover .clear-preview {
+  visibility: unset;
+}
+.clear-preview {
+  border-radius: 999px;
+  visibility: hidden;
+  margin-left: 2px;
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+}
 </style>

From 40d9e7c34493854a34f585d3dfcfda16f7caccdf Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Tue, 11 Feb 2025 09:56:37 +0800
Subject: [PATCH 02/10] feat: RouterBar support clear preview

---
 packages/canvas/route-bar/src/CanvasRouteBar.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/canvas/route-bar/src/CanvasRouteBar.vue b/packages/canvas/route-bar/src/CanvasRouteBar.vue
index 99bcc19a96..09291cafca 100644
--- a/packages/canvas/route-bar/src/CanvasRouteBar.vue
+++ b/packages/canvas/route-bar/src/CanvasRouteBar.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="canvas-route-bar" :style="sizeStyle">
     <div class="address-bar">
-      <template v-for="(route, index) in routes" :key="route.id">
-        <span v-if="index > 0" class="slash">/</span>
+      <template v-for="route in routes" :key="route.id">
+        <span class="slash">/</span>
         <span
           :class="[
             { route: route.isPage && route.id !== pageId, current: route.id === pageId, 'is-preview': route.isPreview }
@@ -31,8 +31,9 @@ const sizeStyle = computed(() => {
 
 const { pageSettingState, getAncestors, switchPageWithConfirm } = usePage()
 
-const pageId = ref(getMetaApi(META_SERVICE.GlobalService).getBaseInfo().pageId)
-const previewId = ref(getMetaApi(META_SERVICE.GlobalService).getBaseInfo().previewId)
+const baseInfo = getMetaApi(META_SERVICE.GlobalService).getBaseInfo()
+const pageId = ref(baseInfo.pageId)
+const previewId = ref(baseInfo.previewId)
 const existsPreview = ref(false)
 
 const { subscribe, unsubscribe } = useMessage()
@@ -124,7 +125,7 @@ const handleClickRoute = (route) => {
 }
 
 const handleClearPreview = () => {
-  // TODO
+  getMetaApi(META_SERVICE.GlobalService).updatePreviewId('')
 }
 </script>
 
@@ -160,7 +161,7 @@ const handleClearPreview = () => {
   }
 }
 .slash {
-  margin: 0 4px;
+  margin: 0 2px;
 }
 .current {
   font-weight: bold;

From 004bde14c6a2f67e3f0244cdb6fe6cfce440db99 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Wed, 12 Feb 2025 11:31:56 +0800
Subject: [PATCH 03/10] fix some issues

---
 packages/canvas/route-bar/src/CanvasRouteBar.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/canvas/route-bar/src/CanvasRouteBar.vue b/packages/canvas/route-bar/src/CanvasRouteBar.vue
index 09291cafca..455a7e59db 100644
--- a/packages/canvas/route-bar/src/CanvasRouteBar.vue
+++ b/packages/canvas/route-bar/src/CanvasRouteBar.vue
@@ -5,13 +5,17 @@
         <span class="slash">/</span>
         <span
           :class="[
-            { route: route.isPage && route.id !== pageId, current: route.id === pageId, 'is-preview': route.isPreview }
+            {
+              route: route.isPage && route.id !== pageId,
+              current: route.id === pageId && existsPreview,
+              'is-preview': route.isPreview
+            }
           ]"
           @click="handleClickRoute(route)"
           >{{ route.route }}</span
         >
       </template>
-      <tiny-tooltip v-if="existsPreview" type="normal" content="清除预览路径">
+      <tiny-tooltip v-if="existsPreview" type="normal" content="重置预览路径">
         <svg-button name="cross" class="clear-preview" @click="handleClearPreview"></svg-button>
       </tiny-tooltip>
     </div>
@@ -80,10 +84,10 @@ watch(
       return
     }
 
-    let ancestors = ((await getAncestors(pageId, true)) || []).concat(pageId)
+    let ancestors = ((await getAncestors(pageId, true)) || []).concat(pageId).map((id) => String(id))
 
     if (previewId) {
-      const previewAncestors = ((await getAncestors(previewId, true)) || []).concat(previewId)
+      const previewAncestors = ((await getAncestors(previewId, true)) || []).concat(previewId).map((id) => String(id))
 
       // previewId是pageId的子孙，那么previewId才有效
       if (previewAncestors.includes(pageId)) {

From 8c71bafc64905f46bca2c244be11aab1045da578 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Wed, 12 Feb 2025 14:27:36 +0800
Subject: [PATCH 04/10] fix numerical pageId

---
 packages/canvas/route-bar/src/CanvasRouteBar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/canvas/route-bar/src/CanvasRouteBar.vue b/packages/canvas/route-bar/src/CanvasRouteBar.vue
index 455a7e59db..f7395def17 100644
--- a/packages/canvas/route-bar/src/CanvasRouteBar.vue
+++ b/packages/canvas/route-bar/src/CanvasRouteBar.vue
@@ -48,11 +48,11 @@ onMounted(() => {
   subscriber = subscribe({
     topic: 'locationHistoryChanged',
     callback: (data) => {
-      if (data.pageId) {
-        pageId.value = data.pageId
+      if (String(data.pageId)) {
+        pageId.value = String(data.pageId)
       }
       if ('previewId' in data) {
-        previewId.value = data.previewId
+        previewId.value = String(data.previewId)
       }
     },
     subscriber: 'routeBar'

From e24719f6821a26ca732ada64ef745e7680c38d37 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Wed, 12 Feb 2025 14:43:23 +0800
Subject: [PATCH 05/10] fix numerical pageId

---
 packages/canvas/route-bar/src/CanvasRouteBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/canvas/route-bar/src/CanvasRouteBar.vue b/packages/canvas/route-bar/src/CanvasRouteBar.vue
index f7395def17..dfed5c05f2 100644
--- a/packages/canvas/route-bar/src/CanvasRouteBar.vue
+++ b/packages/canvas/route-bar/src/CanvasRouteBar.vue
@@ -48,7 +48,7 @@ onMounted(() => {
   subscriber = subscribe({
     topic: 'locationHistoryChanged',
     callback: (data) => {
-      if (String(data.pageId)) {
+      if (data.pageId) {
         pageId.value = String(data.pageId)
       }
       if ('previewId' in data) {

From bb365368a9789d7a30b2804935c73950757e14a7 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Wed, 12 Feb 2025 15:00:58 +0800
Subject: [PATCH 06/10] fix numerical pageId

---
 packages/canvas/route-bar/src/CanvasRouteBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/canvas/route-bar/src/CanvasRouteBar.vue b/packages/canvas/route-bar/src/CanvasRouteBar.vue
index dfed5c05f2..0b0a9e1af9 100644
--- a/packages/canvas/route-bar/src/CanvasRouteBar.vue
+++ b/packages/canvas/route-bar/src/CanvasRouteBar.vue
@@ -106,7 +106,7 @@ watch(
       .map((pageData, index) => {
         const { id, route, isPage } = pageData
         return {
-          id,
+          id: String(id),
           route: route
             .replace(/\/+/g, '/') // 替换连续的 '/' 为单个 '/'
             .replace(/^\/|\/$/g, ''), // 去掉开头和结尾的 '/'

From 4cff7fd4dfd0acefb6f98642ad597d585211ec21 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Wed, 12 Feb 2025 16:06:57 +0800
Subject: [PATCH 07/10] fix tooltip text

---
 packages/canvas/route-bar/src/CanvasRouteBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/canvas/route-bar/src/CanvasRouteBar.vue b/packages/canvas/route-bar/src/CanvasRouteBar.vue
index 0b0a9e1af9..f2e1d5dd8c 100644
--- a/packages/canvas/route-bar/src/CanvasRouteBar.vue
+++ b/packages/canvas/route-bar/src/CanvasRouteBar.vue
@@ -15,7 +15,7 @@
           >{{ route.route }}</span
         >
       </template>
-      <tiny-tooltip v-if="existsPreview" type="normal" content="重置预览路径">
+      <tiny-tooltip v-if="existsPreview" type="normal" content="重置路由视图显示页面">
         <svg-button name="cross" class="clear-preview" @click="handleClearPreview"></svg-button>
       </tiny-tooltip>
     </div>

From 5a6d059aef719f09ce10bc20097bb82aae0657aa Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Thu, 13 Feb 2025 17:52:41 +0800
Subject: [PATCH 08/10] fix tooltip text

---
 packages/canvas/route-bar/src/CanvasRouteBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/canvas/route-bar/src/CanvasRouteBar.vue b/packages/canvas/route-bar/src/CanvasRouteBar.vue
index f2e1d5dd8c..f3fc91cb6a 100644
--- a/packages/canvas/route-bar/src/CanvasRouteBar.vue
+++ b/packages/canvas/route-bar/src/CanvasRouteBar.vue
@@ -15,7 +15,7 @@
           >{{ route.route }}</span
         >
       </template>
-      <tiny-tooltip v-if="existsPreview" type="normal" content="重置路由视图显示页面">
+      <tiny-tooltip v-if="existsPreview" type="normal" content="重置路由视图为占位符">
         <svg-button name="cross" class="clear-preview" @click="handleClearPreview"></svg-button>
       </tiny-tooltip>
     </div>

From 84e2b2cc905fe898957a126273352c27cf3b737c Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Fri, 14 Feb 2025 11:47:00 +0800
Subject: [PATCH 09/10] add bold style for route path

---
 .../canvas/route-bar/src/CanvasRouteBar.vue   | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/canvas/route-bar/src/CanvasRouteBar.vue b/packages/canvas/route-bar/src/CanvasRouteBar.vue
index f3fc91cb6a..35b76b992e 100644
--- a/packages/canvas/route-bar/src/CanvasRouteBar.vue
+++ b/packages/canvas/route-bar/src/CanvasRouteBar.vue
@@ -1,13 +1,13 @@
 <template>
   <div id="canvas-route-bar" :style="sizeStyle">
     <div class="address-bar">
-      <template v-for="route in routes" :key="route.id">
+      <template v-for="(route, index) in routes" :key="route.id">
         <span class="slash">/</span>
         <span
           :class="[
             {
               route: route.isPage && route.id !== pageId,
-              current: route.id === pageId && existsPreview,
+              bold: fontIsBold(route.id, index),
               'is-preview': route.isPreview
             }
           ]"
@@ -118,6 +118,19 @@ watch(
   { immediate: true }
 )
 
+const fontIsBold = (id, index) => {
+  if (existsPreview.value) {
+    return id === pageId.value
+  }
+
+  // 没有previewId时，routes长度大于1，最后一个route path显示高亮
+  if (routes.value.length > 1) {
+    return index === routes.value.length - 1
+  }
+
+  return false
+}
+
 /**
  * @param route {Route}
  */
@@ -167,7 +180,7 @@ const handleClearPreview = () => {
 .slash {
   margin: 0 2px;
 }
-.current {
+.bold {
   font-weight: bold;
 }
 .is-preview {

From 01a54841163ac8e75fb16d5aac0666920eb58664 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Tue, 18 Feb 2025 11:13:50 +0800
Subject: [PATCH 10/10] fix styles

---
 packages/canvas/route-bar/src/CanvasRouteBar.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/canvas/route-bar/src/CanvasRouteBar.vue b/packages/canvas/route-bar/src/CanvasRouteBar.vue
index 35b76b992e..c4a32f00e4 100644
--- a/packages/canvas/route-bar/src/CanvasRouteBar.vue
+++ b/packages/canvas/route-bar/src/CanvasRouteBar.vue
@@ -7,7 +7,7 @@
           :class="[
             {
               route: route.isPage && route.id !== pageId,
-              bold: fontIsBold(route.id, index),
+              bold: shouldHighlight(route.id, index),
               'is-preview': route.isPreview
             }
           ]"
@@ -118,7 +118,7 @@ watch(
   { immediate: true }
 )
 
-const fontIsBold = (id, index) => {
+const shouldHighlight = (id, index) => {
   if (existsPreview.value) {
     return id === pageId.value
   }
@@ -181,16 +181,16 @@ const handleClearPreview = () => {
   margin: 0 2px;
 }
 .bold {
-  font-weight: bold;
+  font-weight: var(--te-base-font-weight-bold);
 }
 .is-preview {
   color: var(--te-common-text-weaken);
 }
 #canvas-route-bar:hover .clear-preview {
-  visibility: unset;
+  visibility: visible;
 }
 .clear-preview {
-  border-radius: 999px;
+  border-radius: 50%;
   visibility: hidden;
   margin-left: 2px;
   width: 16px;