From 616d82688098a8eb24eadd957bf5f394157e89b6 Mon Sep 17 00:00:00 2001
From: rhlin <r.h.lin@163.com>
Date: Tue, 7 Jan 2025 04:29:55 -0800
Subject: [PATCH 1/2] feat(canvas/container):  canvas allow router-link
 component from inactive page to have hover menu for quick switch page action

---
 packages/canvas/common/src/constant.js        |   1 +
 .../canvas/container/src/CanvasContainer.vue  |   7 +-
 .../container/src/components/CanvasAction.vue |  25 ++++
 .../src/components/CanvasRouterJumper.vue     | 108 ++++++++++++++++++
 packages/canvas/container/src/container.js    |  63 +++++++++-
 .../render/src/builtin/CanvasRouterLink.vue   |   1 +
 packages/canvas/render/src/render.ts          |   9 +-
 packages/design-core/assets/jump.svg          |  18 +++
 8 files changed, 227 insertions(+), 5 deletions(-)
 create mode 100644 packages/canvas/container/src/components/CanvasRouterJumper.vue
 create mode 100644 packages/design-core/assets/jump.svg

diff --git a/packages/canvas/common/src/constant.js b/packages/canvas/common/src/constant.js
index 11fa215b48..2b6cd1a46b 100644
--- a/packages/canvas/common/src/constant.js
+++ b/packages/canvas/common/src/constant.js
@@ -1,6 +1,7 @@
 export const NODE_UID = 'data-uid'
 export const NODE_TAG = 'data-tag'
 export const NODE_LOOP = 'loop-id'
+export const NODE_INACTIVE_UID = 'data-ia-uid'
 
 export const DESIGN_MODE = {
   DESIGN: 'design', // 设计态
diff --git a/packages/canvas/container/src/CanvasContainer.vue b/packages/canvas/container/src/CanvasContainer.vue
index 74cd1c21b6..9793e4961a 100644
--- a/packages/canvas/container/src/CanvasContainer.vue
+++ b/packages/canvas/container/src/CanvasContainer.vue
@@ -1,6 +1,7 @@
 <template>
   <canvas-action
     :hoverState="hoverState"
+    :inactiveHoverState="inactiveHoverState"
     :selectState="selectState"
     :lineState="lineState"
     :windowGetClickEventTarget="target"
@@ -8,6 +9,7 @@
     @select-slot="selectSlot"
     @setting="settingModel"
   ></canvas-action>
+  <canvas-router-jumper :hoverState="hoverState" :inactiveHoverState="inactiveHoverState"></canvas-router-jumper>
   <canvas-divider :selectState="selectState"></canvas-divider>
   <canvas-resize-border :iframe="iframe"></canvas-resize-border>
   <canvas-resize>
@@ -36,6 +38,7 @@ import { NODE_UID, NODE_LOOP, DESIGN_MODE } from '../../common'
 import { registerHostkeyEvent, removeHostkeyEvent } from './keyboard'
 import CanvasMenu, { closeMenu, openMenu } from './components/CanvasMenu.vue'
 import CanvasAction from './components/CanvasAction.vue'
+import CanvasRouterJumper from './components/CanvasRouterJumper.vue'
 import CanvasResize from './components/CanvasResize.vue'
 import CanvasDivider from './components/CanvasDivider.vue'
 import CanvasResizeBorder from './components/CanvasResizeBorder.vue'
@@ -45,6 +48,7 @@ import {
   dragMove,
   dragState,
   hoverState,
+  inactiveHoverState,
   selectState,
   lineState,
   removeNodeById,
@@ -60,7 +64,7 @@ import {
 } from './container'
 
 export default {
-  components: { CanvasAction, CanvasResize, CanvasMenu, CanvasDivider, CanvasResizeBorder },
+  components: { CanvasAction, CanvasResize, CanvasMenu, CanvasDivider, CanvasResizeBorder, CanvasRouterJumper },
   props: {
     controller: Object,
     canvasSrc: String,
@@ -247,6 +251,7 @@ export default {
       iframe,
       dragState,
       hoverState,
+      inactiveHoverState,
       selectState,
       lineState,
       removeNodeById,
diff --git a/packages/canvas/container/src/components/CanvasAction.vue b/packages/canvas/container/src/components/CanvasAction.vue
index c3a2ba3f53..bf1881dd1a 100644
--- a/packages/canvas/container/src/components/CanvasAction.vue
+++ b/packages/canvas/container/src/components/CanvasAction.vue
@@ -99,6 +99,11 @@
     </div>
     <div v-show="hoverState.configure?.isContainer" class="corner-mark-bottom-right">拖放元素到容器内</div>
   </div>
+  <div v-show="inactiveHoverState.height && inactiveHoverState.width" class="canvas-rect inactive-hover">
+    <div class="corner-mark-left">
+      {{ inactiveHoverState.componentName }}
+    </div>
+  </div>
   <div v-show="lineState.height && lineState.width" class="canvas-rect line">
     <div :class="['hover-line', lineState.position, { forbidden: lineState.forbidden }]">
       <div v-if="lineState.position === 'in' && hoverState.configure" class="choose-slots"></div>
@@ -165,6 +170,10 @@ export default {
       type: Object,
       default: () => ({})
     },
+    inactiveHoverState: {
+      type: Object,
+      default: () => ({})
+    },
     selectState: {
       type: Object,
       default: () => ({})
@@ -535,6 +544,22 @@ export default {
       font-size: 12px;
     }
   }
+  &.inactive-hover {
+    border-style: dashed;
+    top: v-bind("inactiveHoverState.top + 'px'");
+    left: v-bind("inactiveHoverState.left + 'px'");
+    height: v-bind("inactiveHoverState.height + 'px'");
+    width: v-bind("inactiveHoverState.width + 'px'");
+    border-color: var(--te-common-border-hover);
+
+    .corner-mark-left {
+      height: 14px;
+      top: -14px;
+      padding-left: 0;
+      font-size: 12px;
+      color: var(--te-common-text-weaken);
+    }
+  }
   &.line {
     border-color: transparent;
     top: v-bind("lineState.top + 'px'");
diff --git a/packages/canvas/container/src/components/CanvasRouterJumper.vue b/packages/canvas/container/src/components/CanvasRouterJumper.vue
new file mode 100644
index 0000000000..2d61d46143
--- /dev/null
+++ b/packages/canvas/container/src/components/CanvasRouterJumper.vue
@@ -0,0 +1,108 @@
+<template>
+  <div
+    v-if="state.showRouterJumper"
+    :class="{
+      'jumper-wrapper': true,
+      disabled: !state.targetPageId
+    }"
+    :title="state.targetPageId ? '路由跳转编辑' : '未绑定路由跳转页面'"
+    @click="routerPageJump"
+  >
+    <div class="jumper">
+      <svg-icon name="jump"></svg-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, watch } from 'vue'
+import { usePage } from '@opentiny/tiny-engine-meta-register'
+
+const LEGAL_JUMPER_COMPONENT = ['RouterLink']
+
+export default {
+  props: {
+    hoverState: {
+      type: Object,
+      default: () => ({})
+    },
+    inactiveHoverState: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const switchPage = usePage().switchPageWithConfirm
+    const state = reactive({
+      showRouterJumper: false,
+      targetPageId: null,
+      left: 0,
+      top: 0
+    })
+
+    const routerPageJump = () => {
+      if (state.targetPageId) {
+        switchPage(state.targetPageId)
+      }
+    }
+
+    watch(
+      [() => props.hoverState, () => props.inactiveHoverState],
+      ([hoverState, inactiveHoverState]) => {
+        const usedHoverState = [hoverState, inactiveHoverState].find(({ componentName }) =>
+          LEGAL_JUMPER_COMPONENT.includes(componentName)
+        )
+
+        if (!usedHoverState) {
+          state.showRouterJumper = false
+          return
+        }
+        const { width, left, top, element } = usedHoverState
+        state.showRouterJumper = true
+        state.left = `${left + width}px`
+        state.top = `${top}px`
+        state.targetPageId = element.getAttribute('data-router-target-page-id') || null
+      },
+      { deep: true }
+    )
+
+    return {
+      state,
+      routerPageJump
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.jumper-wrapper {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--ti-lowcode-common-text-color-3);
+  cursor: pointer;
+  z-index: 3;
+  transform: translateX(-80%) translateY(-20%);
+  top: v-bind('state.top');
+  left: v-bind('state.left');
+  border: 1px solid var(--te-common-border-hover);
+  &.disabled {
+    opacity: 0.3;
+  }
+  &:not(.disabled):hover {
+    border-color: var(--te-common-bg-primary-checked);
+    background-color: var(--te-common-bg-primary-checked);
+    .jumper {
+      color: var(--te-common-text-dark-inverse);
+    }
+  }
+  .jumper {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>
diff --git a/packages/canvas/container/src/container.js b/packages/canvas/container/src/container.js
index d758c61a43..50b55d365b 100644
--- a/packages/canvas/container/src/container.js
+++ b/packages/canvas/container/src/container.js
@@ -17,7 +17,8 @@ import {
   copyObject,
   NODE_UID,
   NODE_TAG,
-  NODE_LOOP
+  NODE_LOOP,
+  NODE_INACTIVE_UID
 } from '../../common'
 import { useCanvas, useLayout, useResource, useTranslate, useMaterial } from '@opentiny/tiny-engine-meta-register'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
@@ -119,6 +120,10 @@ export const hoverState = reactive({
   ...initialRectState
 })
 
+export const inactiveHoverState = reactive({
+  ...initialRectState
+})
+
 // 拖拽时的位置状态
 export const lineState = reactive({
   ...initialLineState
@@ -126,6 +131,7 @@ export const lineState = reactive({
 
 export const clearHover = () => {
   Object.assign(hoverState, initialRectState, { slot: null })
+  Object.assign(inactiveHoverState, initialRectState, { slot: null })
 }
 
 export const clearSelect = () => {
@@ -233,6 +239,34 @@ export const getElement = (element) => {
   return undefined
 }
 
+export const getInactiveElement = (element) => {
+  // 如果当前元素是body
+  if (element === element.ownerDocument.body) {
+    return undefined
+  }
+
+  // 如果当前元素是画布的html，返回画布的body
+  if (element === element.ownerDocument.documentElement) {
+    return undefined
+  }
+
+  if (!element || element.nodeType !== 1) {
+    return undefined
+  }
+
+  if (element.getAttribute(NODE_TAG) === 'RouterView') {
+    return undefined
+  }
+
+  if (element.getAttribute(NODE_INACTIVE_UID)) {
+    return element
+  } else if (element.parentElement) {
+    return getInactiveElement(element.parentElement)
+  }
+
+  return undefined
+}
+
 const getRect = (element) => {
   if (element === getDocument().body) {
     const { innerWidth: width, innerHeight: height } = getWindow()
@@ -542,11 +576,36 @@ const setHoverRect = (element, data) => {
     height,
     top,
     left,
+    element,
     componentName
   })
   return undefined
 }
 
+const setInactiveHoverRect = (element) => {
+  if (!element) {
+    Object.assign(inactiveHoverState, initialRectState, { slot: null })
+    return
+  }
+
+  const componentName = element.getAttribute(NODE_TAG)
+  const id = element.getAttribute(NODE_INACTIVE_UID)
+  const configure = getConfigure(componentName)
+  const rect = getRect(element)
+  const { left, height, top, width } = rect
+
+  inactiveHoverState.configure = configure
+  // 设置元素hover状态
+  Object.assign(inactiveHoverState, {
+    id,
+    width,
+    height,
+    top,
+    left,
+    element,
+    componentName
+  })
+}
 let moveUpdateTimer = null
 
 // 绝对布局
@@ -628,7 +687,7 @@ export const dragMove = (event, isHover) => {
   if (isHover) {
     lineState.position = ''
     setHoverRect(getElement(event.target), null)
-
+    setInactiveHoverRect(getInactiveElement(event.target))
     return
   }
 
diff --git a/packages/canvas/render/src/builtin/CanvasRouterLink.vue b/packages/canvas/render/src/builtin/CanvasRouterLink.vue
index e051ad6ffe..09e3fe5641 100644
--- a/packages/canvas/render/src/builtin/CanvasRouterLink.vue
+++ b/packages/canvas/render/src/builtin/CanvasRouterLink.vue
@@ -1,6 +1,7 @@
 <template>
   <span
     v-bind="$attrs"
+    :data-router-target-page-id="to?.name"
     :class="{
       [activeClass]: active,
       [exactActiveClass]: exactActive
diff --git a/packages/canvas/render/src/render.ts b/packages/canvas/render/src/render.ts
index e6c0afbaff..a163daf4f3 100644
--- a/packages/canvas/render/src/render.ts
+++ b/packages/canvas/render/src/render.ts
@@ -12,7 +12,12 @@
 
 import { defineComponent, h, inject, provide, Ref } from 'vue'
 
-import { NODE_UID as DESIGN_UIDKEY, NODE_TAG as DESIGN_TAGKEY, NODE_LOOP as DESIGN_LOOPID } from '../../common'
+import {
+  NODE_UID as DESIGN_UIDKEY,
+  NODE_TAG as DESIGN_TAGKEY,
+  NODE_LOOP as DESIGN_LOOPID,
+  NODE_INACTIVE_UID
+} from '../../common'
 import { getDesignMode, DESIGN_MODE } from './canvas-function'
 import { parseCondition, parseData, parseLoopArgs } from './data-function'
 import { blockSlotDataMap, getComponent, generateCollection, Mapper, configure } from './material-function'
@@ -88,7 +93,7 @@ const getBindProps = (schema, scope, context, pageContext) => {
   const bindProps = {
     ...parseData(schema.props, scope, context),
     ...(cssScopeId ? { [cssScopeId]: '' } : {}),
-    ...(active ? { [DESIGN_UIDKEY]: id } : {}),
+    ...(active ? { [DESIGN_UIDKEY]: id } : { [NODE_INACTIVE_UID]: id }),
     [DESIGN_TAGKEY]: componentName
   }
 
diff --git a/packages/design-core/assets/jump.svg b/packages/design-core/assets/jump.svg
new file mode 100644
index 0000000000..bff507ab1f
--- /dev/null
+++ b/packages/design-core/assets/jump.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 132 132" style="enable-background:new 0 0 132 132;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:currentColor;}
+</style>
+<rect id="size" class="st0" width="132" height="132"/>
+<path id="形状结合" class="st1" d="M57.8,16.5c2.3,0,4.1,1.8,4.1,4.1s-1.8,4.1-4.1,4.1H37.1c-6.8,0-12.4,5.5-12.4,12.4v57.8
+	c0,6.8,5.5,12.4,12.4,12.4h57.8c6.8,0,12.4-5.5,12.4-12.4V74.2c0-2.3,1.8-4.1,4.1-4.1s4.1,1.8,4.1,4.1v20.6
+	c0,11.4-9.2,20.6-20.6,20.6H37.1c-11.4,0-20.6-9.2-20.6-20.6V37.1c0-11.4,9.2-20.6,20.6-20.6H57.8z M111.4,16.5L111.4,16.5
+	c0.2,0,0.3,0,0.4,0L111.4,16.5c0.3,0,0.5,0,0.8,0.1c0.1,0,0.1,0,0.2,0c0.1,0,0.3,0.1,0.4,0.1c0.1,0,0.1,0,0.2,0.1
+	c0.1,0,0.2,0.1,0.3,0.1c0.1,0,0.2,0.1,0.2,0.1c0.1,0,0.2,0.1,0.2,0.1c0.1,0,0.1,0.1,0.2,0.1c0.3,0.2,0.6,0.5,0.8,0.8l-0.4-0.4
+	c0.2,0.2,0.3,0.3,0.4,0.5c0.1,0.1,0.2,0.2,0.2,0.4c0,0.1,0.1,0.2,0.1,0.2c0,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.1,0.1,0.2
+	c0,0.1,0.1,0.2,0.1,0.4c0,0.1,0,0.1,0,0.2c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3c0,0,0,0.1,0,0.2v28.9c0,2.3-1.8,4.1-4.1,4.1
+	s-4.1-1.8-4.1-4.1V30.6L67.6,70.2c-1.6,1.6-4.2,1.6-5.8,0c-1.6-1.6-1.6-4.2,0-5.8l39.6-39.6H82.5c-2.1,0-3.8-1.6-4.1-3.6l0-0.6
+	c0-2.3,1.8-4.1,4.1-4.1H111.4z"/>
+</svg>

From 4a99646a6a3b3015fa4e3f95a0475ec87276c40a Mon Sep 17 00:00:00 2001
From: rhlin <r.h.lin@163.com>
Date: Thu, 9 Jan 2025 18:32:20 -0800
Subject: [PATCH 2/2] feat: replace css var with --te variable,  merge same
 action condition

---
 .../src/components/CanvasRouterJumper.vue     |  2 +-
 packages/canvas/container/src/container.js    | 24 +++++++------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/canvas/container/src/components/CanvasRouterJumper.vue b/packages/canvas/container/src/components/CanvasRouterJumper.vue
index 2d61d46143..56c50b9b49 100644
--- a/packages/canvas/container/src/components/CanvasRouterJumper.vue
+++ b/packages/canvas/container/src/components/CanvasRouterJumper.vue
@@ -83,7 +83,7 @@ export default {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background-color: var(--ti-lowcode-common-text-color-3);
+  background-color: var(--te-common-bg-default);
   cursor: pointer;
   z-index: 3;
   transform: translateX(-80%) translateY(-20%);
diff --git a/packages/canvas/container/src/container.js b/packages/canvas/container/src/container.js
index 50b55d365b..7a93dfb748 100644
--- a/packages/canvas/container/src/container.js
+++ b/packages/canvas/container/src/container.js
@@ -240,21 +240,15 @@ export const getElement = (element) => {
 }
 
 export const getInactiveElement = (element) => {
-  // 如果当前元素是body
-  if (element === element.ownerDocument.body) {
-    return undefined
-  }
-
-  // 如果当前元素是画布的html，返回画布的body
-  if (element === element.ownerDocument.documentElement) {
-    return undefined
-  }
-
-  if (!element || element.nodeType !== 1) {
-    return undefined
-  }
-
-  if (element.getAttribute(NODE_TAG) === 'RouterView') {
+  if (
+    !element ||
+    element.nodeType !== 1 ||
+    // 如果当前元素是body或者html，需要排除
+    element === element.ownerDocument.body ||
+    element === element.ownerDocument.documentElement ||
+    // 如果当前元素是RouterView, 则有可能是激活元素处于非激活元素里面，需要排除
+    element.getAttribute(NODE_TAG) === 'RouterView'
+  ) {
     return undefined
   }