feat: variable convergence( layout，toolbars， common)

packages/common/component/BlockDescription.vue

@@ -46,14 +46,17 @@ export default {
     border-radius: 4px;
     display: flex;
     align-items: center;
-    background-color: var(--te-common-bg-container);
+    background-color: var(--te-component-block-bg-color);
   }
 
   .setting-block {
     display: flex;
     align-items: center;
     gap: 4px;
     cursor: pointer;
+    .svg-icon {
+      color: var(--te-component-common-block-add-text-color);
+    }
   }
 
   .svg-icon {

packages/common/component/BlockHistoryList.vue

@@ -50,18 +50,18 @@ defineEmits(['preview', 'restore'])
   font-size: 12px;
   padding: 2px 8px;
   margin-left: 5px;
-  background-color: var(--te-common-bg-tag);
-  color: var(--te-common-color-success);
+  background-color: var(--te-component-block-history-list-tag-bg-color);
+  color: var(--te-component-block-history-list-tag-text-color);
   border-radius: var(--te-base-border-radius-1);
 }
 .operation-text {
-  color: var(--te-common-text-emphasize);
+  color: var(--te-component-common-text-color-emphasize);
   & + .operation-text {
     margin-left: 8px;
   }
 }
 
 .empty {
-  color: var(--te-common-text-weaken);
+  color: var(--te-component-common-text-color-weaken);
 }
 </style>

packages/common/component/BlockLinkEvent.vue

@@ -1,11 +1,13 @@
 <template>
-  <tiny-popover popper-class="quick">
+  <tiny-popover popper-class="quick" :visible-arrow="false">
     <template #reference>
       <span class="link-icon">+</span>
     </template>
     <ul class="context-menu">
       <li v-if="isLinked" class="menu-item" @click="unLink(data.linkedEventName)">取消关联</li>
-      <li v-else class="menu-item" @click="addEvent(data)">+ 新建事件</li>
+      <li v-else class="menu-item add-event" @click="addEvent(data)">
+        <svg-icon name="plus-circle"></svg-icon> 新建事件
+      </li>
       <li class="menu-item" @click="openBlockSetting">管理事件</li>
       <li v-for="item in eventsList" :key="item.name" class="menu-item">
         {{ item.name }}
@@ -186,7 +188,7 @@ export default {
   color: #fff;
   border-radius: 50%;
   line-height: 14px;
-  background-color: var(--ti-lowcode-description-color);
+  background-color: var(--te-component-common-block-add-text-color);
   &:hover {
     cursor: pointer;
     transform: scale(1.3);
@@ -195,32 +197,29 @@ export default {
 
 .context-menu {
   width: 200px;
-  padding: 3px 0;
-  border: 1px solid var(--ti-lowcode-tabs-border-color);
-  border-radius: 3px;
-  background-color: var(--te-common-bg-container);
-  box-shadow: 0 1px 15px 0 rgb(0 0 0 / 20%);
   display: flex;
   flex-direction: column;
   .menu-item {
     font-size: 12px;
     display: flex;
     justify-content: space-between;
-    color: var(--te-common-text-secondary);
-    padding: 6px 15px;
-    &:not(:last-child) {
-      border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
-    }
+    color: var(--te-component-common-text-color-primary);
+    padding: 4px 16px;
+    margin: 0 -16px;
     &:hover {
-      color: var(--ti-lowcode-toolbar-icon-color);
-      background: var(--te-common-bg-container);
+      color: var(--te-component-common-text-color-primary);
+      background: var(--te-component-common-bg-color-hover);
     }
 
     .link-item {
       cursor: pointer;
-      background-color: var(--ti-lowcode-icon-bind-color);
+      background-color: var(--te-component-common-text-color-checked);
       padding: 2px 5px;
     }
+    &.add-event {
+      justify-content: start;
+      gap: 4px;
+    }
   }
 }
 </style>

packages/common/component/BlockLinkField.vue

@@ -156,6 +156,7 @@ export default {
   top: 0;
   left: 0;
   transform: translate(-50%, -50%);
+  color: var(--te-component-common-block-add-text-color);
 
   .svg-icon {
     font-size: 14px;
@@ -188,21 +189,21 @@ export default {
   flex-direction: column;
   .menu-item {
     line-height: 18px;
-    color: var(--ti-lowcode-attr-popover-menu-item-color);
+    color: var(--te-component-common-text-color-primary);
     display: flex;
     align-items: center;
     gap: 4px;
     padding: 4px 12px;
     cursor: pointer;
     &:hover {
-      background: var(--ti-lowcode-attr-popover-menu-item-hover-bg-color);
+      background: var(--te-component-common-bg-color-hover);
     }
     &.property {
       justify-content: space-between;
     }
     .link-item {
       cursor: pointer;
-      color: var(--te-common-text-emphasize);
+      color: var(--te-component-common-text-color-emphasize);
     }
   }
 

packages/common/component/ButtonGroup.vue

@@ -26,7 +26,7 @@
     margin-left: 8px;
   }
   :deep(.tiny-button.tiny-button.tiny-button--default) {
-    border-color: var(--te-common-border-secondary);
+    border-color: var(--te-component-common-button-border-color);
   }
 }
 </style>

packages/common/component/CloseIcon.vue

@@ -29,7 +29,7 @@ export default {
 .icon-wrap {
   width: 24px;
   height: 24px;
-  color: var(--te-common-icon-primary);
+  color: var(--te-component-common-icon-color-primary);
   font-size: 16px;
   border-radius: 4px;
   cursor: pointer;
@@ -39,12 +39,12 @@ export default {
   transition: 0.3s;
 
   &:hover {
-    color: var(--te-common-icon-primary);
-    background-color: var(--te-common-bg-prompt);
+    color: var(--te-component-common-icon-color-primary);
+    background-color: var(--te-component-close-icon-bg-color-hover);
   }
   &.active {
-    color: var(--te-common-icon-primary);
-    background-color: var(--te-common-bg-prompt);
+    color: var(--te-component-common-icon-color-primary);
+    background-color: var(--te-component-close-icon-bg-color-active);
   }
 }
 </style>

packages/common/component/ConfigCollapse.vue

@@ -40,10 +40,10 @@ export default {
         transition: 0.3s;
 
         &:hover {
-          color: var(--te-common-icon-primary);
+          color: var(--te-component-common-icon-color-primary);
 
           svg {
-            color: var(--te-common-icon-primary);
+            color: var(--te-component-common-icon-color-primary);
           }
         }
       }

packages/common/component/ConfigItem.vue

@@ -523,11 +523,11 @@ export default {
     padding-bottom: 0;
   }
   &.active {
-    background: var(--ti-lowcode-meta-config-item-active-bg);
+    background: var(--te-component-common-bg-color-active);
   }
 
   .item-label {
-    color: var(--te-common-text-secondary);
+    color: var(--te-component-common-text-color-secondary);
     font-size: 12px;
     display: flex;
     line-height: 18px;
@@ -549,9 +549,9 @@ export default {
       overflow: hidden;
 
       .binding-state {
-        color: var(--ti-lowcode-meta-config-item-bind-color);
-        background: var(--ti-lowcode-meta-config-item-bind-bg);
-        border: 1px solid var(--ti-lowcode-meta-config-item-bind-border);
+        color: var(--te-component-common-text-color-emphasize);
+        background: var(--te-component-config-item-bind-bg-color);
+        border: 1px solid var(--te-component-config-item-bind-border-color);
         padding: 4px 12px;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -564,21 +564,21 @@ export default {
         :deep(.tiny-input .tiny-input__inner) {
           &,
           &:focus {
-            border-color: var(--ti-lowcode-input-error-color);
-            background-color: var(--ti-lowcode-input-error-bg);
+            border-color: var(--te-component-common-error-color);
+            background-color: var(--te-component-common-bg-color-error);
           }
         }
         :deep(.tiny-textarea__inner) {
           &,
           &:focus {
-            background-color: var(--ti-lowcode-input-error-bg);
+            background-color: var(--te-component-common-bg-color-error);
           }
         }
         :deep(.tiny-textarea) {
           &,
           &:focus {
-            border-color: var(--ti-lowcode-input-error-color);
-            background-color: var(--ti-lowcode-input-error-bg);
+            border-color: var(--te-component-common-error-color);
+            background-color: var(--te-component-common-bg-color-error);
           }
         }
       }
@@ -610,7 +610,7 @@ export default {
 
   .prop-description {
     margin-top: 8px;
-    color: var(--te-common-text-weaken);
+    color: var(--te-component-common-text-color-weaken);
   }
   .label-tip {
     padding: 2px 0;
@@ -635,8 +635,8 @@ export default {
       }
     }
     &.multiType {
-      border-bottom: 1px solid var(--ti-lowcode-toolbar-active-bg);
-      border-top: 1px solid var(--ti-lowcode-toolbar-active-bg);
+      border-bottom: 1px solid var(--te-component-common-border-color-transparent);
+      border-top: 1px solid var(--te-component-common-border-color-transparent);
     }
     &.auto {
       flex-wrap: wrap;
@@ -679,7 +679,7 @@ export default {
     display: flex;
     align-items: center;
     margin-top: 8px;
-    color: var(--te-common-color-error);
+    color: var(--te-component-common-error-color);
     font-size: 12px;
     .failure-icon {
       width: 16px;
@@ -693,7 +693,7 @@ export default {
 
 .error-tips-container {
   padding: 4px 6px;
-  color: var(--ti-lowcode-meta-config-item-error-tips-color);
+  color: var(--te-component-common-error-color);
   .error-icon {
     flex-shrink: 0;
   }
@@ -714,11 +714,11 @@ export default {
         font-size: 16px;
         font-weight: bold;
         margin-bottom: 8px;
-        color: var(--ti-lowcode-meta-config-item-label-tips-title-color);
+        color: var(--te-component-common-text-color-primary);
       }
       .prop-description {
         font-size: 12px;
-        color: var(--ti-lowcode-meta-config-item-label-tips-desc-color);
+        color: var(--te-component-common-text-color-secondary);
         line-height: 18px;
         display: -webkit-box;
         -webkit-box-orient: vertical;

packages/common/component/EmptyTip.vue

@@ -33,12 +33,12 @@ export default {
 <style scoped lang="less">
 .tip {
   display: flex;
-  border: 1px solid var(--te-common-border-default);
-  border-left: 2px solid var(--te-common-color-success);
+  border: 1px solid var(--te-component-common-border-color);
+  border-left: 2px solid var(--te-component-empty-tip-border-color);
   border-radius: 0 4px 4px 0;
   align-items: center;
   padding: 8px 12px;
-  background-color: var(--te-common-bg-container);
+  background-color: var(--te-component-empty-tip-bg-color);
 
   .left {
     width: 20px;
@@ -52,9 +52,9 @@ export default {
   }
 }
 .waring {
-  border-left: 2px solid var(--te-common-color-warning);
+  border-left: 2px solid var(--te-component-common-warning-color);
 }
 .error {
-  border-left: 2px solid var(--te-common-color-error);
+  border-left: 2px solid var(--te-component-common-error-color);
 }
 </style>

packages/common/component/I18nInput.vue

@@ -112,16 +112,6 @@ export default {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  .tiny-svg {
-    outline: none;
-    &:hover {
-      cursor: pointer;
-      color: var(--ti-lowcode-toolbar-icon-color);
-    }
-    &.isBind {
-      color: var(--ti-lowcode-icon-bind-color);
-    }
-  }
 }
 .popover-content {
   position: relative;
@@ -139,7 +129,15 @@ export default {
   }
 }
 .icon-language {
-  color: var(--te-common-icon-secondary);
+  color: var(--te-component-common-icon-color);
+  outline: none;
+  &:hover {
+    cursor: pointer;
+    color: var(--te-component-common-icon-color-hover);
+  }
+  &.isBind {
+    color: var(--te-component-common-icon-color-primary);
+  }
 }
 </style>