feat: variable convergence(block, i18n, bridge, datasource, help, robot)

packages/plugins/block/index.js

@@ -14,6 +14,7 @@ import entry, { api } from './src/Main.vue'
 import metaData from './meta.js'
 import { BlockService } from './src/composable'
 import SaveNewBlock from './src/SaveNewBlock.vue'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,

packages/plugins/block/src/BlockConfig.vue

@@ -307,18 +307,18 @@ export default {
 
 .block-tag-create {
   .tag-button {
-    color: var(--ti-lowcode-block-config-tag-color);
-    background-color: var(--ti-lowcode-block-config-tag-bg);
+    color: var(--te-block-config-tag-color);
+    background-color: var(--te-block-config-tag-bg);
     border: none;
     height: 28px;
     :deep(.tiny-tag__close) {
-      fill: var(--ti-lowcode-block-config-tag-close-color);
+      fill: var(--te-block-config-tag-close-color);
     }
     &:hover {
-      color: var(--ti-lowcode-block-config-tag-hover-color);
-      background-color: var(--ti-lowcode-block-config-tag-hover-bg);
+      color: var(--te-block-config-tag-hover-color);
+      background-color: var(--te-block-config-tag-hover-bg);
       :deep(.tiny-tag__close) {
-        fill: var(--ti-lowcode-block-config-tag-close-hover-color);
+        fill: var(--te-block-config-tag-close-hover-color);
       }
     }
   }
@@ -328,7 +328,7 @@ export default {
     line-height: 20px;
     padding-top: 0;
     padding-bottom: 0;
-    border: 1px solid var(--te-common-border-default);
+    border: 1px solid var(--te-block-config-new-tag-border-color);
   }
 
   .tiny-input {

packages/plugins/block/src/BlockEvent.vue

@@ -58,7 +58,7 @@ export default {
 
 <style lang="less" scoped>
 .block-alert {
-  color: var(--ti-lowcode-life-cycle-alert-color);
+  color: var(--te-block-alert-color);
   height: 28px;
   padding: 6px;
   border: 0;

packages/plugins/block/src/BlockEventForm.vue

@@ -89,6 +89,6 @@ export default {
 .linked-info {
   margin-top: 10px;
   padding: 15px 0px;
-  border-top: 1px solid var(--ti-lowcode-tabs-border-color);
+  border-top: 1px solid var(--te-block-event-link-border-color);
 }
 </style>

packages/plugins/block/src/BlockEventList.vue

@@ -66,7 +66,7 @@ export default {
 
 .item-text {
   flex: 1;
-  color: var(--te-common-text-primary);
+  color: var(--te-block-event-list-color);
 }
 .item-text.active {
   font-weight: 700;
@@ -77,11 +77,11 @@ export default {
 }
 .add-button {
   :deep(.tiny-button) {
-    border: 1px solid var(--te-common-border-default);
+    border: 1px solid var(--te-block-event-list-btn-border-color);
   }
   .icon-plus {
     margin-right: 6px;
-    stroke: var(--te-common-text-weaken);
+    stroke: var(--te-block-event-list-btn-icon-color);
   }
 }
 </style>

packages/plugins/block/src/BlockGroupArrange.vue

@@ -48,22 +48,22 @@ export default {
 <style lang="less" scoped>
 .footer-toolbar {
   border-radius: 4px;
-  background-color: var(--te-common-bg-container);
+  background-color: var(--te-block-panel-footer-btn-bg-color);
   .icon-wrap {
     width: 24px;
     height: 24px;
-    color: var(--te-common-text-weaken);
+    color: var(--te-block-panel-footer-btn-icon-color);
     font-size: 16px;
     cursor: pointer;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     transition: 0.3s;
     &.active {
-      border: 1px solid var(--te-common-border-active);
-      color: var(--te-common-text-primary);
+      border: 1px solid var(--te-block-panel-footer-btn-avtive-border-color);
+      color: var(--te-block-panel-footer-btn-avtive-color);
       border-radius: 4px;
-      background-color: var(--te-common-bg-default);
+      background-color: var(--te-block-panel-footer-btn-avtive-bg-color);
     }
   }
 }

packages/plugins/block/src/BlockProperty.vue

@@ -46,7 +46,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .block-alert {
-  color: var(--ti-lowcode-life-cycle-alert-color);
+  color: var(--te-block-alert-color);
   height: 28px;
   padding: 6px;
   border: 0;

packages/plugins/block/src/BlockPropertyForm.vue

@@ -270,7 +270,7 @@ export default {
   display: inline-block;
   margin-top: 6px;
   font-size: 12px;
-  color: var(--te-common-text-checked);
+  color: var(--te-block-property-add-item-color);
   cursor: pointer;
 
   .text {
@@ -296,8 +296,8 @@ export default {
   width: 280px;
   height: 100%;
   padding: 20px;
-  background-color: var(--te-common-bg-default);
-  border-right: 1px solid var(--te-common-border-default);
+  background-color: var(--te-block-property-config-item-bg-color);
+  border-right: 1px solid var(--te-block-property-config-item-border-color);
 }
 
 .config-list {

packages/plugins/block/src/BlockPropertyList.vue

@@ -90,25 +90,6 @@ export default {
     padding: 0 12px;
     width: 66px;
     margin-right: 5px;
-    border: 1px solid var(--te-common-border-default);
-  }
-  .plus-icon {
-    width: 16px;
-    height: 16px;
-  }
-  .editorWarp {
-    display: inline-block;
-  }
-  .icon-plus {
-    margin-right: 6px;
-    stroke: var(--te-common-text-weaken);
-  }
-}
-.opt-button {
-  color: var(--te-common-icon-secondary);
-  width: auto;
-  &:last-child {
-    margin-right: var(--te-base-space-3x);
   }
 }
 </style>

packages/plugins/block/src/BlockSetting.vue

@@ -361,7 +361,7 @@ export default {
         margin-right: 3px;
       }
 
-      color: var(--ti-lowcode-block-video-tip-color);
+      color: var(--te-block-video-tip-color);
     }
   }
   :deep(.tiny-collapse-item__content) {

packages/plugins/block/src/Main.vue

@@ -460,7 +460,7 @@ export default {
 }
 .app-manage-search {
   padding: 0 10px 12px 10px;
-  border-bottom: 1px solid var(--ti-lowcode-plugin-panel-header-border-bottom-color);
+  border-bottom: 1px solid var(--te-block-panel-header-border-bottom-color);
 }
 .block-popper {
   .block-group-option-item {
@@ -495,18 +495,18 @@ export default {
   left: -6px;
   right: 0;
   padding: 8px 16px;
-  border-top: 1px solid var(--te-common-border-divider);
-  background-color: var(--te-common-bg-default);
-  color: var(--te-common-text-primary);
+  border-top: 1px solid var(--te-block-panel-footer-border-color);
+  background-color: var(--te-block-panel-footer-bg-color);
+  color: var(--te-block-panel-footer-color);
   display: flex;
   justify-content: space-between;
   :deep(.tiny-dropdown) {
-    color: var(--te-common-text-primary);
+    color: var(--te-block-panel-footer-text-color);
     .tiny-dropdown__trigger:not(.tiny-dropdown__caret-button):not(.is-disabled):hover {
-      color: var(--te-common-text-primary);
+      color: var(--te-block-panel-footer-text-color);
     }
     .tiny-dropdown__suffix-inner {
-      color: var(--te-common-icon-secondary);
+      color: var(--te-block-panel-footer-icon-color);
       height: 10px;
     }
   }
@@ -515,12 +515,12 @@ export default {
   }
   .footer-layout {
     font-size: 12px;
-    color: var(--te-common-text-primary);
+    color: var(--te-block-panel-footer-text-color);
     .tiny-svg {
       cursor: pointer;
       margin-left: 8px;
       &.active {
-        color: var(--ti-lowcode-icon-bind-color);
+        color: var(--te-block-panel-footer-icon-bind-color);
       }
     }
   }
@@ -537,8 +537,8 @@ export default {
   &:not(.is-disabled):active,
   &:not(.is-disabled):hover,
   &:focus {
-    background-color: var(--te-common-bg-container);
-    color: var(--te-common-text-primary);
+    background-color: var(--te-block-panel-footer-active-bg-color);
+    color: var(--te-block-panel-footer-text-color);
   }
 }
 :deep(.tiny-dropdown-menu.tiny-popper[x-placement^='top']) {
@@ -551,27 +551,17 @@ export default {
   width: 220px;
   height: 108px;
   box-sizing: border-box;
-  background-color: var(--ti-lowcode-materials-block-group-delete-popover-bg-color);
   padding: 6px;
 
-  &[x-placement^='right'] {
-    .popper__arrow {
-      &,
-      &::after {
-        border-right-color: var(--te-common-bg-container);
-      }
-    }
-  }
-
   .popper-confirm-header {
     font-size: var(--te-base-font-size-1);
-    color: var(--te-common-text-primary);
+    color: var(--te-block-popper-title-color);
     font-weight: var(--te-base-font-weight-7);
     margin-bottom: 12px;
   }
   .popper-confirm-content {
     font-size: 12px;
-    color: var(--te-common-text-secondary);
+    color: var(--te-block-popper-content-color);
   }
   .popper-confirm-footer {
     text-align: right;

packages/plugins/block/src/SaveNewBlock.vue

@@ -136,6 +136,6 @@ export default {
 
 <style scoped lang="less">
 .block-tip {
-  color: var(--te-common-color-error);
+  color: var(--te-block-error-tip-color);
 }
 </style>

packages/plugins/block/src/styles/vars.less

@@ -0,0 +1,41 @@
+:root {
+  --te-block-alert-color: var(--te-common-text-weaken);
+  --te-block-error-tip-color: var(--te-common-color-error);
+  // 区块列表 - 面板
+  --te-block-panel-header-border-bottom-color: var(--te-common-border-divider);
+  --te-block-panel-footer-color: var(--te-common-text-primary);
+  --te-block-panel-footer-bg-color: var(--te-common-bg-default);
+  --te-block-panel-footer-border-color: var(--te-common-border-divider);
+  --te-block-panel-footer-text-color: var(--te-common-text-primary);
+  --te-block-panel-footer-icon-color: var(--te-common-icon-secondary);
+  // 绑定时icon图标颜色
+  --te-block-panel-footer-icon-bind-color: var(--te-common-text-checked);
+  --te-block-panel-footer-active-bg-color: var(--te-common-bg-secondary);
+  // 区块 - 删除分组气泡框
+  --te-block-popper-title-color: var(--te-common-text-primary);
+  --te-block-popper-content-color: var(--te-common-text-secondary);
+  // 区块列表 - 列表状态切换图标
+  --te-block-panel-footer-btn-bg-color: var(--te-common-bg-container);
+  --te-block-panel-footer-btn-icon-color: var(--te-common-icon-secondary);
+  --te-block-panel-footer-btn-avtive-color: var(--te-common-icon-primary);
+  --te-block-panel-footer-btn-avtive-border-color: var(--te-common-border-active);
+  --te-block-panel-footer-btn-avtive-bg-color: var(--te-common-bg-default);
+  // 区块设置 - 标签
+  --te-block-config-tag-color: var(--te-common-text-primary);
+  --te-block-config-tag-bg: var(--te-common-bg-disabled);
+  --te-block-config-tag-hover-color: var(--te-common-text-primary);
+  --te-block-config-tag-hover-bg: var(--te-common-bg-disabled);
+  --te-block-config-tag-close-color: var(--te-common-icon-secondary);
+  --te-block-config-tag-close-hover-color: var(--te-common-icon-primary);
+  --te-block-config-new-tag-border-color: var(--te-common-border-default);
+  --te-block-event-link-border-color: var(--te-common-border-default);
+  --te-block-event-list-color: var(--te-common-text-primary);
+  --te-block-event-list-btn-border-color: var(--te-common-border-default);
+  --te-block-event-list-btn-icon-color: var(--te-common-text-weaken);
+  // 区块设置 - 属性设置
+  --te-block-property-add-item-color: var(--te-common-text-checked);
+  --te-block-property-config-item-bg-color: var(--te-common-bg-default);
+  --te-block-property-config-item-border-color: var(--te-common-border-default);
+  // 查看指引视频
+  --te-block-video-tip-color: var(--te-common-text-link);
+}

packages/plugins/bridge/index.js

@@ -12,6 +12,7 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta.js'
+import './src/styles/vars.less'
 
 export default {
   ...metaData,

packages/plugins/bridge/src/BridgeManage.vue

@@ -144,7 +144,7 @@ export default {
 
   .list {
     flex: 1;
-    border-top: 1px solid var(--ti-lowcode-tabs-border-color);
+    border-top: 1px solid var(--te-bridge-list-border-color);
     overflow: auto;
     padding: 12px 0;
   }
@@ -158,13 +158,13 @@ export default {
     align-items: center;
     padding: 0 12px;
     position: relative;
-    color: var(--ti-lowcode-bridge-list-color);
+    color: var(--te-bridge-list-color);
     cursor: pointer;
     font-size: 12px;
 
     &:hover,
     &.active {
-      background: var(--ti-lowcode-bridge-list-bg);
+      background: var(--te-bridge-list-bg-color);
       .setting-icon {
         display: grid;
       }
@@ -174,7 +174,7 @@ export default {
       display: none;
     }
     .list-item-icon {
-      color: var(--te-common-icon-secondary);
+      color: var(--te-bridge-list-icon-color);
       margin-right: 8px;
     }
   }