Merge branch 'refactor/develop' of github.com:opentiny/tiny-engine in…

…to feat/outline-tree-enhanced
gene9831 · Feb 17, 2025 · b0579b1 · b0579b1
2 parents 51d097c + 08e8d0a
commit b0579b1
Show file tree

Hide file tree

Showing 274 changed files with 1,974 additions and 1,352 deletions.
diff --git a/packages/canvas/DesignCanvas/src/DesignCanvas.vue b/packages/canvas/DesignCanvas/src/DesignCanvas.vue
@@ -229,7 +229,7 @@ export default {
       return key
     }
     const postUrlChanged = () => {
-      usePage().postLocationHistoryChanged(
+      getMetaApi(META_SERVICE.GlobalService).postLocationHistoryChanged(
         Object.fromEntries(
           Array.from(new URLSearchParams(window.location.search)).map(([key, value]) => [replaceKey(key), value])
         )
@@ -264,6 +264,7 @@ export default {
         getPageAncestors: usePage().getAncestors,
         getBaseInfo: () => getMetaApi(META_SERVICE.GlobalService).getBaseInfo(),
         addHistoryDataChangedCallback,
+        updatePreviewId: getMetaApi(META_SERVICE.GlobalService).updatePreviewId,
         ast,
         getBlockByName: useMaterial().getBlockByName,
         useModal,

diff --git a/packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue b/packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue
@@ -40,38 +40,43 @@ export default {
   height: var(--base-bottom-panel-height, 30px);
   bottom: 0;
   position: absolute;
-  background-color: var(--ti-lowcode-breadcrumb-bg);
+  background-color: var(--te-canvas-breadcrumb-bg-color);
   z-index: 90;
-  border-top: 1px solid var(--ti-lowcode-canvas-footer-border-top-color);
+  border-top: 1px solid var(--te-canvas-breadcrumb-border-color);
   .content {
     .tip {
-      color: var(--ti-lowcode-breadcrumb-color);
+      color: var(--te-canvas-breadcrumb-text-color);
       line-height: 30px;
       height: 30px;
       padding-left: 10px;
     }
     :deep(.tiny-steps-advanced) {
       li {
         width: unset !important;
-        background: var(--ti-lowcode-breadcrumb-bg);
+        background: var(--te-canvas-breadcrumb-bg-color);
         .label {
           padding: 0 3px 0 16px;
           border-top: 0;
-          color: var(--ti-lowcode-breadcrumb-color);
+          color: var(--te-canvas-breadcrumb-text-color);
           transition: 0.3s;
+          border: none;
           &:hover {
             cursor: pointer;
+            background-color: var(--te-canvas-breadcrumb-bg-color-hover);
             &::after {
-              border-left-color: var(--ti-steps-advanced-li-hover-bg-color);
+              border-left-color: var(--te-canvas-breadcrumb-arrow-border-color-hover);
             }
           }
+          &::after {
+            border-left-color: var(--te-canvas-breadcrumb-bg-color);
+          }
         }
         &:last-child .label {
-          border-right: 0px solid var(--ti-lowcode-breadcrumb-color);
+          border-right: 0px solid var(--te-canvas-breadcrumb-border-color);
           border-radius: 0;
         }
         &:first-child .label {
-          border-right: 0px solid var(--ti-lowcode-breadcrumb-color);
+          border-right: 0px solid var(--te-canvas-breadcrumb-border-color);
           border-radius: 0;
           border-left: unset;
         }

diff --git a/packages/canvas/canvas.html b/packages/canvas/canvas.html
@@ -164,10 +164,10 @@
         width: 8px;
       }
       body::-webkit-scrollbar-track {
-        background-color: var(--ti-lowcode-canvas-iframe-scrollbar-track-color);
+        background-color: var(--te-canvas-scrollbar-track-color);
       }
       body::-webkit-scrollbar-thumb {
-        background-color: var(--ti-lowcode-canvas-iframe-scrollbar-thumb-color);
+        background-color: var(--te-canvas-scrollbar-thumb-color);
         border-radius: 4px;
       }
       .design-page {

diff --git a/packages/canvas/container/src/components/CanvasAction.vue b/packages/canvas/container/src/components/CanvasAction.vue
@@ -523,7 +523,7 @@ export default {
   position: absolute;
   box-sizing: border-box;
   pointer-events: none;
-  border: 1px solid var(--ti-lowcode-canvas-rect-border-color);
+  border: 1px solid var(--te-canvas-container-border-color-checked);
   z-index: 2;
   &.absolute {
     pointer-events: all;
@@ -548,14 +548,14 @@ export default {
     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);
+    border-color: var(--te-canvas-container-border-color-hover);
 
     .corner-mark-left {
       height: 14px;
       top: -14px;
       padding-left: 0;
       font-size: 12px;
-      color: var(--te-common-text-weaken);
+      color: var(--te-canvas-container-text-color-weaken);
     }
   }
   &.line {
@@ -569,41 +569,41 @@ export default {
     &.top {
       width: 100%;
       height: 5px;
-      background: var(--ti-lowcode-icon-bind-color);
+      background: var(--te-canvas-container-text-color-checked);
       position: absolute;
       top: -3px;
     }
     &.left {
       width: 5px;
       height: 100%;
-      background: var(--ti-lowcode-icon-bind-color);
+      background: var(--te-canvas-container-text-color-checked);
       position: absolute;
       left: -3px;
     }
     &.bottom {
       width: 100%;
       height: 5px;
-      background: var(--ti-lowcode-icon-bind-color);
+      background: var(--te-canvas-container-text-color-checked);
       position: absolute;
       bottom: -3px;
     }
     &.right {
       width: 5px;
       height: 100%;
-      background: var(--ti-lowcode-icon-bind-color);
+      background: var(--te-canvas-container-text-color-checked);
       position: absolute;
       right: -3px;
     }
     &.in {
       width: 100%;
       height: 100%;
-      background: var(--ti-lowcode-canvas-hover-line-in-bg-color);
+      background: var(--te-canvas-container-hover-line-in-bg-color);
     }
     &.forbidden:not(.in) {
-      background: var(--ti-lowcode-canvas-hover-line-forbid-bg-color);
+      background: var(--te-canvas-container-hover-line-forbid-bg-color);
     }
     &.forbidden.in {
-      background: var(--ti-lowcode-canvas-hover-line-in-forbid-bg-color);
+      background: var(--te-canvas-container-hover-line-in-forbid-bg-color);
     }
   }
 
@@ -615,8 +615,8 @@ export default {
     & > div {
       pointer-events: all;
       width: 40px;
-      border: 1px solid var(--ti-lowcode-canvas-choose-slot-border-color);
-      color: var(--ti-lowcode-canvas-choose-slot-color);
+      border: 1px solid var(--te-canvas-container-border-color-checked);
+      color: var(--te-canvas-container-choose-slot-text-color);
       overflow: hidden;
       font-size: 10px;
       margin: 2px;
@@ -635,7 +635,7 @@ export default {
     position: absolute;
     top: -24px;
     height: 24px;
-    color: var(--ti-lowcode-canvas-corner-mark-left-color);
+    color: var(--te-canvas-container-corner-mark-left-text-color);
     padding: 0 8px;
 
     .icon-setting {
@@ -648,10 +648,9 @@ export default {
     position: absolute;
     font-size: 12px;
     right: -1px;
-    color: var(--ti-lowcode-canvas-corner-mark-bottom-right-color);
+    color: var(--te-canvas-container-text-color-white);
     bottom: -20px;
-    background: var(--ti-lowcode-canvas-corner-mark-bottom-right-bg-color);
-    border: 1px solid var(--ti-lowcode-canvas-corner-mark-bottom-right-border-color);
+    background: var(--te-canvas-container-bg-color-checked);
     padding: 0 2px;
     overflow: hidden;
     white-space: nowrap;
@@ -664,8 +663,8 @@ export default {
     position: absolute;
     height: 24px;
     padding: 0 4px;
-    color: var(--ti-lowcode-canvas-corner-mark-right-color);
-    background: var(--ti-lowcode-canvas-corner-mark-right-bg-color);
+    color: var(--te-canvas-container-text-color-white);
+    background: var(--te-canvas-container-bg-color-checked);
     pointer-events: all;
     cursor: pointer;
 
@@ -686,16 +685,19 @@ export default {
     .corner-mark-left {
       white-space: nowrap;
       pointer-events: all;
-      color: var(--ti-lowcode-canvas-select-corner-mark-left-color);
-      background: var(--ti-lowcode-canvas-select-corner-mark-left-bg-color);
+      color: var(--te-canvas-container-text-color-white);
+      background: var(--te-canvas-container-bg-color-checked);
       svg {
         cursor: pointer;
       }
     }
   }
 }
 .short-cut-set.short-cut-set.tiny-popper.tiny-popover {
-  padding: 10px;
+  .tiny-popover__title {
+    color: var(--te-canvas-container-text-color-primary);
+    font-size: 14px;
+  }
 }
 
 .drag-resize {

diff --git a/packages/canvas/container/src/components/CanvasDivider.vue b/packages/canvas/container/src/components/CanvasDivider.vue
@@ -220,7 +220,7 @@ export default {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background-color: var(--te-common-bg-default);
+  background-color: var(--te-canvas-container-bg-color);
   cursor: pointer;
   z-index: 3;
   &.divider-vertical {
@@ -234,15 +234,15 @@ export default {
     left: v-bind('state.horizontalLeft');
   }
   &:hover {
-    background-color: var(--te-common-bg-primary-checked);
+    background-color: var(--te-canvas-container-bg-color-checked);
     .divider {
       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACbElEQVRIDZ2Vu2sVURCH9yZgbCxMsFFjKQkExScREgQtLISAXbS4GDu10fgHiL1gpxKDCLFRfICCCSpCwEiCYiNWFkYsImIRH4jgY/x+xzNy7t29614HvsycmfnN3j1nd5Nl0cysDrPwEV7DRVjn9Vaent7Y+wYvrWbUG/pJTIHsCzyBd1pg8v0NzcmC2kDswdkizIFmyKZCK4F+uWwGelxPfAx+wFPPpZ58JzyHX3DEa8TdoFmyesYf3ZKu+nd40nyJvGzEc+7JjYWK2aTn3JPXRTRzVhdYhjkvpp78KMieNeW7yGnPZYfSmsfktV3LHSSWoNVhro+CbTTvdzH+KGyI61batdSXdAcXQDYWBcGx1m2+ha/wHRZUwK+C9/ABtA3q6W7S+vadl6AH9LT8hAk4CKdAQtlJuBIis3340zE+gR+PsXqlkVYzNEsz/5wrQR/MQ2qfWYzHX72RWE+UnppPoP3vijUNVm9qCyz60rvSnXTAJtBjOwKr0wbWV8GtaDulkVYzdLbtGaLdINPed1ZVt3Mlf/21r8NVL1Cpj1+sM9IZvAK9uY8qCas2MfAGyPbC9RCZDVXVl/YxbHsc+FCNxDpE3cWDUmHVIoPug2yna4hvhYzZLs/9l2fInjjoZjqA3JaYn07zbccM0Qujw839TyB3B2Q72h4sAcIDQW52uWiABsf63aJ6aQ6h3uqX8A38q5nTULsHsq25YlkCweEgMzv3j77B2He7rK+hhmAFLII+YGsaigULevSU6bHdXFDOp2g8DrIz+Wo+Q99Q6Da7lq9mWdG3aCWNL+BskaA5V6vVHpPT8FpzTevfkrgJcwZ0OJIAAAAASUVORK5CYII=);
     }
   }
   .divider {
     width: 12px;
     height: 12px;
-    color: var(--te-base-gray-0);
+    color: var(--te-canvas-container-border-color-white);
     background-size: contain;
     background-repeat: no-repeat;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==);
@@ -251,7 +251,7 @@ export default {
 
 .divider-line {
   position: absolute;
-  border: 1px dashed var(--te-common-border-checked);
+  border: 1px dashed var(--te-canvas-container-border-color-checked);
   z-index: 2;
 }
 </style>
diff --git a/packages/canvas/container/src/components/CanvasMenu.vue b/packages/canvas/container/src/components/CanvasMenu.vue
@@ -286,16 +286,19 @@ export default {
   line-height: 20px;
   border-radius: 6px;
   padding: 8px 0;
-  background-color: var(--ti-lowcode-canvas-menu-bg);
+  background-color: var(--te-canvas-container-bg-color);
   box-shadow: 0 1px 15px 0 rgb(0 0 0 / 20%);
   display: flex;
   flex-direction: column;
   .li-item {
-    border-bottom: 1px solid var(--ti-lowcode-canvas-menu-border-color);
+    border-bottom: 1px solid var(--te-canvas-container-border-color);
   }
   .li-item-disabled {
     cursor: not-allowed;
-    color: var(--ti-lowcode-canvas-menu-item-disabled-color);
+    color: var(--te-canvas-container-text-color-disabled);
+    svg {
+      fill: var(--te-canvas-container-text-color-disabled);
+    }
   }
   li {
     & > div {
@@ -304,16 +307,19 @@ export default {
       justify-content: space-between;
     }
     font-size: 12px;
-    color: var(--ti-lowcode-canvas-menu-item-color);
+    color: var(--te-canvas-container-text-color-primary);
+    svg {
+      fill: var(--te-canvas-container-text-color-primary);
+    }
     padding: 6px 15px;
     &:not(.menu-item-disabled):hover {
-      background: var(--ti-lowcode-canvas-menu-item-hover-bg-color);
+      background: var(--te-canvas-container-bg-color-hover);
     }
     position: relative;
 
     &.menu-item-disabled {
       cursor: not-allowed;
-      color: var(--ti-lowcode-canvas-menu-item-disabled-color);
+      color: var(--te-canvas-container-text-color-disabled);
     }
   }
   &.sub-menu {

diff --git a/packages/canvas/container/src/components/CanvasResize.vue b/packages/canvas/container/src/components/CanvasResize.vue
@@ -144,7 +144,7 @@ export default {
         left: -3px;
         width: 4px;
         height: 100%;
-        background: var(--ti-lowcode-canvas-tab-handle-hover-bg);
+        background: var(--te-canvas-container-bg-color-checked);
         display: none;
       }
 
@@ -154,7 +154,7 @@ export default {
 
       &:hover {
         .tab-handle {
-          background: var(--ti-lowcode-canvas-tab-handle-hover-bg);
+          background: var(--te-canvas-container-bg-color-checked);
         }
 
         .tab-handle:before,
@@ -179,7 +179,7 @@ export default {
         width: 14px;
         height: 38px;
         margin-top: -19px;
-        background: var(--ti-lowcode-canvas-iframe-scrollbar-thumb-color);
+        background: var(--te-canvas-container-canvas-size-tab-bg-color);
         cursor: col-resize;
         pointer-events: all;
         border-top-right-radius: 3px;
@@ -193,7 +193,7 @@ export default {
           bottom: 8px;
           left: 8px;
           width: 1px;
-          background: var(--ti-lowcode-canvas-tab-handle-color);
+          background: var(--te-canvas-container-tab-handle-color);
         }
 
         &::before {

diff --git a/packages/canvas/container/src/components/CanvasResizeBorder.vue b/packages/canvas/container/src/components/CanvasResizeBorder.vue
@@ -209,7 +209,7 @@ export default {
   &::after {
     content: '';
     display: block;
-    border: 1px solid var(--te-common-border-checked);
+    border: 1px solid var(--te-canvas-container-border-color-checked);
   }
   &.resize-vertical {
     cursor: ns-resize;

diff --git a/packages/canvas/container/src/components/CanvasRouterJumper.vue b/packages/canvas/container/src/components/CanvasRouterJumper.vue
@@ -83,21 +83,21 @@ export default {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background-color: var(--te-common-bg-default);
+  background-color: var(--te-canvas-container-bg-color);
   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);
+  border: 1px solid var(--te-canvas-container-border-color-hover);
   &.disabled {
     opacity: 0.3;
   }
   &:not(.disabled):hover {
-    border-color: var(--te-common-bg-primary-checked);
-    background-color: var(--te-common-bg-primary-checked);
+    border-color: var(--te-canvas-container-border-color-checked);
+    background-color: var(--te-canvas-container-bg-color-checked);
     .jumper {
-      color: var(--te-common-text-dark-inverse);
+      color: var(--te-canvas-container-router-jumper-text-color);
     }
   }
   .jumper {