fix(theme-base): update theme-base package and add common file

packages/common/component/CloseIcon.vue

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

packages/common/component/MetaCodeEditor.vue

@@ -288,7 +288,7 @@ export default {
   }
 
   .text-content {
-    --ellipsis-line: 1;
+    -webkit-line-clamp: 1;
   }
 
   &.empty-color {

packages/common/component/MonacoEditor.vue

@@ -152,10 +152,10 @@ export default {
   .buttons {
     display: flex;
     gap: 8px;
-    color: var(--ti-lowcode-component-svg-button-color);
+    color: var(--ti-lowcode-common-svg-button-color);
     cursor: pointer;
     :hover {
-      color: var(--ti-lowcode-component-svg-button-hover-color);
+      color: var(--ti-lowcode-common-svg-button-hover-color);
     }
   }
 }

packages/common/component/PluginBlockList.vue

@@ -506,12 +506,12 @@ export default {
       align-items: center;
       .tiny-svg {
         font-size: 24px;
-        color: var(--ti-lowcode-component-svg-button-color);
+        color: var(--ti-lowcode-common-svg-button-color);
       }
 
       &:hover {
         cursor: pointer;
-        color: var(--ti-lowcode-component-svg-button-hover-color);
+        color: var(--ti-lowcode-common-svg-button-hover-color);
       }
     }
 

packages/common/component/SearchEmpty.vue

@@ -17,3 +17,22 @@ export default {
   }
 }
 </script>
+<style lang="less" scoped>
+.empty-wrap {
+  text-align: center;
+  margin-top: 20px;
+
+  .empty-icon {
+    width: 64px;
+    height: 64px;
+    color: var(--ti-lowcode-empty-icon-color);
+  }
+
+  .empty-text {
+    margin-top: 6px;
+    margin-bottom: 0;
+    font-size: 12px;
+    color: var(--ti-lowcode-empty-text-color);
+  }
+}
+</style>

packages/common/component/SvgButton.vue

@@ -45,20 +45,20 @@ export default {
   width: 24px;
   height: 24px;
   font-size: 16px;
-  color: var(--ti-lowcode-component-svg-button-color);
+  color: var(--ti-lowcode-common-svg-button-color);
   border: 1px solid transparent;
   border-radius: 4px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   &:hover {
-    color: var(--ti-lowcode-component-svg-button-hover-color);
-    background-color: var(--ti-lowcode-component-svg-button-hover-bg-color);
+    color: var(--ti-lowcode-common-svg-button-hover-color);
+    background-color: var(--ti-lowcode-common-svg-button-hover-bg-color);
   }
   &.active {
-    color: var(--ti-lowcode-component-svg-button-active-color);
-    background-color: var(--ti-lowcode-component-svg-button-active-bg-color);
+    color: var(--ti-lowcode-common-svg-button-active-color);
+    background-color: var(--ti-lowcode-common-svg-button-active-bg-color);
   }
 
   & + .svg-button {

packages/design-core/src/init.js

@@ -17,7 +17,8 @@ import { initMonitor } from '@opentiny/tiny-engine-common/js/monitor'
 import { injectGlobalComponents, setGlobalMonacoEditorTheme, Modal, Notify } from '@opentiny/tiny-engine-common'
 import { initHttp } from '@opentiny/tiny-engine-http'
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
-import { tinyEngineThemeLight } from '@opentiny/tiny-engine-theme-base'
+import { tinyThemeLightVars } from '@opentiny/tiny-engine-theme-base'
+
 import {
   defineEntry,
   mergeRegistry,
@@ -52,7 +53,7 @@ const defaultLifeCycles = {
     initHttp({ env: import.meta.env })
 
     // eslint-disable-next-line no-new
-    new TinyThemeTool(tinyEngineThemeLight, 'tinyEngineTheme') // 初始化主题
+    new TinyThemeTool(tinyThemeLightVars, 'tinyThemeLightVars')
 
     if (import.meta.env.VITE_ERROR_MONITOR === 'true' && import.meta.env.VITE_ERROR_MONITOR_URL) {
       initMonitor(import.meta.env.VITE_ERROR_MONITOR_URL)

packages/layout/src/Main.vue

@@ -78,7 +78,7 @@ export default {
 #tiny-engine {
   display: flex;
   flex-flow: column;
-  min-width: var(--base-min-width);
+  min-width: var(--ti-common-min-width);
   height: 100vh;
   overflow: hidden;
   .tiny-engine-main {

packages/plugins/block/src/Main.vue

@@ -431,7 +431,6 @@ export default {
     border-color: transparent;
     background-color: var(--ti-lowcode-component-block-list-add-group-btn-bg);
     width: 30px;
-    height: 30px;
     border: var(--ti-lowcode-component-block-list-add-group-btn-border);
     border-radius: var(--ti-lowcode-component-block-list-add-group-btn-border-radius);
   }
@@ -467,7 +466,7 @@ export default {
   left: -6px;
   right: 0;
   padding: 10px 16px;
-  background-color: var(--ti-lowcode-component-search-bg);
+  background-color: var(--ti-lowcode-common-search-bg);
   color: var(--ti-lowcode-component-block-list-item-color);
   display: flex;
   justify-content: space-between;
@@ -506,7 +505,7 @@ export default {
     .popper__arrow {
       &,
       &::after {
-        border-right-color: var(--ti-lowcode-common-component-hover-bg);
+        border-right-color: var(--ti-lowcode-common-component-bg-25);
       }
     }
   }
@@ -519,7 +518,7 @@ export default {
     font-size: 12px;
     color: var(--ti-lowcode-materials-block-group-delete-popover-title-color);
     .icon {
-      color: var(--ti-lowcode-warning-color);
+      color: var(--ti-lowcode-common-warning-color);
       width: 16px;
       height: 16px;
     }

packages/plugins/data/src/DataSourceList.vue

@@ -123,7 +123,7 @@ export default {
   .data-source-list-item {
     &.selected,
     &:hover {
-      background: var(--ti-lowcode-common-component-hover-bg);
+      background: var(--ti-lowcode-common-component-bg-25);
     }
   }
 

packages/plugins/datasource/src/DataSourceField.vue

@@ -186,9 +186,9 @@ export default {
         align-items: center;
 
         &.field-row-add {
-          color: var(--ti-lowcode-datasource-json-border-colorr);
+          color: var(--ti-lowcode-datasource-json-border-color);
           svg {
-            color: var(--ti-lowcode-datasource-json-border-colorr);
+            color: var(--ti-lowcode-datasource-json-border-color);
           }
         }
       }

packages/plugins/datasource/src/DataSourceRecordList.vue

@@ -650,7 +650,7 @@ export default {
     color: var(--ti-lowcode-datasource-common-empty-color);
   }
   .add-column {
-    color: var(--ti-lowcode-datasource-json-border-colorr);
+    color: var(--ti-lowcode-datasource-json-border-color);
     cursor: pointer;
   }
 }

packages/plugins/datasource/src/DataSourceTemplate.vue

@@ -79,7 +79,7 @@ export default {
       }
     }
     .blue::before {
-      border: 1px solid var(--ti-lowcode-datasource-json-border-colorr);
+      border: 1px solid var(--ti-lowcode-datasource-json-border-color);
     }
 
     .green::before {

packages/plugins/i18n/src/Main.vue

@@ -570,9 +570,6 @@ export default {
     .tiny-input {
       margin: 12px 0;
       margin-left: 8px;
-      :deep(.tiny-input__prefix) {
-        left: 8px;
-      }
     }
     .tiny-select {
       margin: 12px 0;
@@ -585,7 +582,7 @@ export default {
   padding: 20px;
   svg {
     font-size: 20px;
-    color: var(--ti-lowcode-warning-color);
+    color: var(--ti-lowcode-common-warning-color);
   }
   .delete-tip {
     margin-left: 5px;

packages/plugins/materials/src/meta/block/src/BlockGroup.vue

@@ -428,7 +428,7 @@ export default {
   .add-group-btn {
     font-size: 16px;
     width: 32px;
-    height: 32px;
+    height: 24px;
     border-radius: 6px;
     border-color: var(--ti-lowcode-materials-border-icon-border-color);
     background-color: var(--ti-lowcode-materials-border-icon-bg-color);
@@ -458,7 +458,7 @@ export default {
       margin-left: 0;
     }
     :deep(svg) {
-      color: var(--ti-lowcode-component-svg-button-color);
+      color: var(--ti-lowcode-common-svg-button-color);
     }
   }
   &.show-underline {
@@ -499,7 +499,7 @@ export default {
     .popper__arrow {
       &,
       &::after {
-        border-right-color: var(--ti-lowcode-common-component-hover-bg);
+        border-right-color: var(--ti-lowcode-common-component-bg-25);
       }
     }
   }
@@ -512,7 +512,7 @@ export default {
     font-size: 12px;
     color: var(--ti-lowcode-materials-block-group-delete-popover-title-color);
     .icon {
-      color: var(--ti-lowcode-warning-color);
+      color: var(--ti-lowcode-common-warning-color);
       width: 16px;
       height: 16px;
     }

packages/plugins/page/src/PageInputOutput.vue

@@ -106,7 +106,6 @@ export default {
 <style lang="less" scoped>
 .input-or-output {
   color: var(--ti-lowcode-page-manage-icon-text-color);
-  margin-top: -20px;
   padding: 20px;
   .life-cycle-alert {
     color: var(--ti-lowcode-life-cycle-alert-color);
@@ -137,7 +136,6 @@ export default {
     }
   }
   .page-root-form-item {
-    margin-bottom: -10px;
     :deep(.tiny-form-item__content) {
       display: flex;
       .tiny-switch {

packages/plugins/page/src/PageSetting.vue

@@ -413,14 +413,5 @@ export default {
       margin-right: 6px;
     }
   }
-  .base-setting {
-    margin-top: -22px;
-  }
-  .input-output {
-    margin-top: -28px;
-  }
-  .history-source {
-    margin-top: 7px;
-  }
 }
 </style>

packages/plugins/script/src/Main.vue

@@ -148,7 +148,7 @@ export default {
         .dots {
           width: 10px;
           height: 10px;
-          background: var(--ti-lowcode-warning-color-1);
+          background: var(--ti-lowcode-common-warning-color-1);
           border-radius: 50%;
           position: absolute;
           top: -4px;

packages/plugins/tree/src/Main.vue

@@ -312,66 +312,14 @@ export default {
 
     .tree-handle svg {
       color: var(--ti-lowcode-tree-icon-color);
-
-      &:hover {
-        color: var(--ti-lowcode-tree-hover-icon-color);
-      }
     }
   }
   :deep(.tiny-grid) {
-    background-color: unset;
-
-    .tiny-grid-tree-wrapper {
-      margin-right: 8px;
-
-      .tiny-grid-tree__node-btn {
-        width: 14px;
-        height: 14px;
-        margin-bottom: 2px;
-
-        &:hover {
-          color: var(--ti-lowcode-tree-icon-hover-color);
-        }
-      }
-    }
     .high-light-node {
       .tree-handle svg {
         color: var(--ti-lowcode-tree-selected-color);
       }
     }
   }
-
-  :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__row) {
-    background-color: var(--ti-lowcode-common-component-bg);
-    &:hover {
-      background-color: var(--ti-lowcode-common-component-hover-bg);
-    }
-  }
-  :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__row:not(.row__hover):nth-child(2n)) {
-    background-color: var(--ti-lowcode-common-component-bg);
-    &:hover {
-      background-color: var(--ti-lowcode-common-component-hover-bg);
-    }
-  }
-  :deep(.tiny-grid-body__row.nav-tree .tiny-grid-cell) {
-    line-height: inherit;
-  }
-  :deep(.high-light-node) {
-    background: var(--ti-lowcode-tree-selected-bg) !important;
-
-    :deep(.eyeOpen) {
-      display: block !important;
-    }
-  }
-  :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__column) {
-    color: var(--ti-lowcode-tree-color);
-  }
-  :deep(.tiny-grid .tiny-grid__body-wrapper .high-light-node .tiny-grid-body__column) {
-    color: var(--ti-lowcode-tree-selected-color);
-    font-weight: bold;
-  }
-  :deep(.tiny-grid .tiny-grid__body-wrapper .high-light-node .tiny-grid-body__column .tiny-grid-tree__node-btn) {
-    color: var(--ti-lowcode-tree-selected-color);
-  }
 }
 </style>

packages/settings/events/src/components/AdvanceConfig.vue

@@ -260,7 +260,7 @@ export default {
       height: 30px;
       line-height: 22px;
       padding: 4px 8px;
-      --ellipsis-line: 1;
+      -webkit-line-clamp: 1;
       border-radius: 6px;
     }