feat(theme): component style && common theme

packages/common/component/ConfigItem.vue

@@ -513,6 +513,10 @@ export default {
   justify-content: space-between;
   position: relative;
   align-items: center;
+  padding-bottom: 8px;
+  &:last-child {
+    padding-bottom: 0;
+  }
   &.active {
     background: var(--ti-lowcode-meta-config-item-active-bg);
   }
@@ -600,7 +604,7 @@ export default {
 
   .prop-description {
     margin-top: 8px;
-    color: var(--ti-lowcode-common-text-desc-color);
+    color: var(--te-common-text-weaken);
   }
   .label-tip {
     padding: 2px 0;
@@ -617,7 +621,7 @@ export default {
     display: flex;
     width: 100%;
     align-items: center;
-    padding: 8px 0;
+
     .pro-underline {
       border-bottom: 1px dashed transparent;
       &:hover {

packages/common/component/MetaCodeEditor.vue

@@ -253,12 +253,14 @@ export default {
 <style lang="less" scoped>
 .editor-wrap {
   width: 100%;
-
+  display: flex;
+  text-align: center;
   .edit-btn {
     color: var(--ti-lowcode-meta-codeEditor-color);
     border-color: var(--ti-lowcode-meta-codeEditor-border-color);
-    display: flex;
-    align-items: center;
+    flex: 1;
+    text-align: center;
+    margin-right: 0;
     &:hover {
       color: var(--ti-lowcode-meta-codeEditor-hover-color);
       border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);
@@ -281,7 +283,7 @@ export default {
   align-items: center;
   width: 100%;
   height: 32px;
-  padding: 4px 8px;
+  padding: 4px;
   border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color);
   border-radius: 6px;
 
@@ -294,7 +296,7 @@ export default {
   }
 
   &.empty-color {
-    color: var(--ti-lowcode-common-text-desc-color);
+    color: var(--te-common-text-weaken);
   }
 
   .edit-icon {
@@ -328,7 +330,7 @@ export default {
     color: var(--ti-lowcode-meta-code-editor-header-tips-container-color);
 
     .header-tips-title {
-      color: var(--ti-lowcode-base-text-color-3);
+      color: var(--te-common-text-weaken);
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
@@ -357,7 +359,7 @@ export default {
 
       code {
         font-family: Microsoft YaHei, Microsoft YaHei-Normal;
-        color: var(--ti-lowcode-base-text-color-3);
+        color: var(--te-common-text-weaken);
       }
     }
   }

packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue

@@ -234,11 +234,11 @@ export default {
   position: relative;
   width: 60px;
   height: 20px;
-  border: 1px solid var(--ti-lowcode-base-bg);
+  border: none;
   outline: 0;
   border-radius: 10px;
   box-sizing: border-box;
-  background: var(--ti-lowcode-base-bg);
+  background-color: var(--te-common-bg-switch);
   transition: border-color 0.3s, background-color 0.3s;
   vertical-align: middle;
 }
@@ -252,12 +252,11 @@ export default {
   transition: all 0.3s;
   width: 16px;
   height: 16px;
-  background-color: #ffffff;
+  background-color: var(--te-common-bg-default);
 }
 
 .e__switch.e_is-checked .e__switch-core {
-  border-color: var(--ti-lowcode-base-blue-6);
-  background-color: var(--ti-lowcode-base-blue-6);
+  background-color: var(--te-common-bg-primary-checked);
 }
 
 .e__switch.e_is-checked .e__switch-core::after {

packages/configurator/src/slot-configurator/SlotConfigurator.vue

@@ -134,7 +134,6 @@ export default {
 <style lang="less" scoped>
 .slot-list {
   display: flex;
-  margin: 5px 0;
   justify-content: center;
   align-items: center;
   .slot-name {
@@ -171,11 +170,11 @@ export default {
   position: relative;
   width: 40px;
   height: 20px;
-  border: 1px solid var(--ti-lowcode-base-bg);
+  border: none;
   outline: 0;
   border-radius: 10px;
   box-sizing: border-box;
-  background: var(--ti-lowcode-base-bg);
+  background-color: var(--te-common-bg-switch);
   transition: border-color 0.3s, background-color 0.3s;
   vertical-align: middle;
 }
@@ -189,12 +188,11 @@ export default {
   transition: all 0.3s;
   width: 16px;
   height: 16px;
-  background-color: #ffffff;
+  background-color: var(--te-common-bg-default);
 }
 
 .e__switch.e_is-checked .e__switch-core {
-  border-color: var(--ti-lowcode-base-blue-6);
-  background-color: var(--ti-lowcode-base-blue-6);
+  background-color: var(--te-common-bg-primary-checked);
 }
 
 .e__switch.e_is-checked .e__switch-core::after {

packages/design-core/src/init.js

@@ -17,7 +17,7 @@ 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 { defaultThemeList } from '@opentiny/tiny-engine-theme-base'
 import {
   defineEntry,
   mergeRegistry,
@@ -51,8 +51,10 @@ const defaultLifeCycles = {
 
     initHttp({ env: import.meta.env })
 
+    const theme = newRegistry.config.theme || 'light'
     // eslint-disable-next-line no-new
-    new TinyThemeTool(tinyEngineThemeLight, 'tinyEngineTheme') // 初始化主题
+    new TinyThemeTool(defaultThemeList[theme], defaultThemeList[theme]?.id)
+    document.documentElement?.setAttribute?.('data-theme', theme)
 
     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/DesignSettings.vue

@@ -57,43 +57,41 @@ export default {
     flex-direction: column;
     .tiny-tabs__nav-scroll {
       margin-left: 12px;
-      .tiny-tabs__nav {
-        display: inline-flex;
-        justify-content: center;
-        float: none;
-      }
       .tiny-tabs__active-bar {
-        width: 40px !important;
-        height: 2px;
+        height: 3px;
         background-color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color);
       }
-      .tiny-tabs__item__title {
-        margin-left: 6px;
-      }
-    }
-    .tiny-tabs__header {
-      padding-bottom: 12px;
     }
+
     .tiny-tabs__content {
       flex: 1;
       overflow-y: auto;
       padding: 0;
       margin: 0;
     }
     .tiny-tabs__item {
-      margin-right: 26px;
+      flex: 1;
+      background-color: var(--ti-lowcode-setting-panel-bg-color);
       color: var(--ti-lowcode-setting-panel-tabs-item-title-color);
       &:hover {
         color: var(--ti-lowcode-setting-panel-tabs-item-title-hover-color);
       }
       &.is-active {
         color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color);
       }
+
+      .tiny-tabs__item__title {
+        padding-bottom: 2px;
+      }
+    }
+
+    .tiny-tabs__nav-wrap-not-separator::after {
+      z-index: 2;
     }
   }
 
   :deep(.tiny-collapse-item__content) {
-    padding: 8px 8px 8px 12px;
+    padding: 0 8px 12px 12px; // 这里的bottom为4px + 内部行元素与底部的距离为8px = 12px
   }
 }
 

packages/plugins/block/src/BlockEventList.vue

@@ -83,7 +83,7 @@ export default {
   }
   .icon-plus {
     margin-right: 6px;
-    stroke: var(--ti-lowcode-base-text-color-3);
+    stroke: var(--te-common-text-weaken);
   }
 }
 </style>

packages/plugins/block/src/BlockPropertyList.vue

@@ -104,7 +104,7 @@ export default {
   }
   .icon-plus {
     margin-right: 6px;
-    stroke: var(--ti-lowcode-base-text-color-3);
+    stroke: var(--te-common-text-weaken);
   }
 }
 </style>

packages/plugins/datasource/src/DataSourceRemoteDataResult.vue

@@ -105,7 +105,7 @@ export default {
     z-index: 9999;
     .tiny-button {
       border-radius: 4px;
-      border-color: var(--ti-lowcode-button-default-border-color);
+      border-color: var(--te-common-border-default);
     }
   }
 

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

@@ -408,23 +408,6 @@ export default {
     width: calc(100% - 36px);
   }
 
-  .blocks-header-icon {
-    width: 28px;
-    height: 28px;
-    font-size: 16px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-    background: var(--ti-lowcode-canvas-wrap-bg);
-    border: 1px solid var(--ti-lowcode-toolbar-border-color);
-    border-radius: 2px;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    &:hover {
-      color: var(--ti-lowcode-toolbar-icon-color);
-      background: var(--ti-lowcode-button-hover-bg);
-    }
-  }
   .add-group-btn {
     font-size: 16px;
     width: 32px;

packages/settings/styles/src/Main.vue

@@ -205,7 +205,7 @@ export default {
 <style lang="less" scoped>
 .style-editor {
   justify-content: space-around;
-  padding: 8px 0 0;
+  padding: 12px 0 0;
   column-gap: 8px;
   .line-style {
     padding: 0 8px 0 12px;

packages/settings/styles/src/components/background/BackgroundGroup.vue

@@ -532,7 +532,6 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 4px 0 12px;
     position: relative;
     .background-image-icon {
       font-size: 16px;

packages/settings/styles/src/components/background/BackgroundImageSetting.vue

@@ -169,13 +169,13 @@ export default {
     .row-content {
       flex: auto;
       display: flex;
-      border: 1px solid var(--ti-lowcode-tabs-border-color);
-
+      border: 1px solid var(--te-common-border-default);
+      color: var(--te-common-text-primary);
       .row-content-item {
         flex: 1;
         padding: 4px 0;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
-        background: var(--ti-lowcode-canvas-wrap-bg);
+        color: var(--te-common-text-secondary);
+        background: var(--te-common-bg-container);
         position: relative;
         display: flex;
         justify-content: center;
@@ -194,13 +194,13 @@ export default {
         }
 
         &:hover {
-          color: var(--ti-lowcode-toolbar-icon-color);
-          background-color: var(--ti-lowcode-button-hover-bg);
+          color: var(--te-common-text-primary);
+          background-color: var(--te-common-bg-container);
         }
 
         &.selected {
-          color: var(--ti-lowcode-toolbar-icon-color);
-          background-color: var(--ti-lowcode-radio-button-active-bg);
+          color: var(--te-common-text-primary);
+          background-color: var(--te-common-bg-prompt);
         }
 
         .overflow-svg {

packages/settings/styles/src/components/background/LinearGradient.vue

@@ -79,16 +79,20 @@ const updateStyle = (property) => {
   emit('updateStyle', property)
 }
 
-const inputAngle = (val) => {
-  state.angle = Number(val)
-  rotateAngle()
+const angleChange = () => {
+  updateStyle({ [BACKGROUND_PROPERTY.BackgroundImage]: `linear-gradient(${state.angle}deg, black, white)` })
 }
 
 const rotateAngle = () => {
   rotateSvg.value.style.transform = `rotate(${state.angle % DAUBLE_PI_DEG}deg)`
   angleChange()
 }
 
+const inputAngle = (val) => {
+  state.angle = Number(val)
+  rotateAngle()
+}
+
 const counterclockwiseRotate = () => {
   state.angle = state.angle % DAUBLE_PI_DEG
   state.angle -= QUARTER_PI_DEG
@@ -126,10 +130,6 @@ const handleClickAngle = (e) => {
   rotateAngle()
 }
 
-const angleChange = () => {
-  updateStyle({ [BACKGROUND_PROPERTY.BackgroundImage]: `linear-gradient(${state.angle}deg, black, white)` })
-}
-
 const updateGradient = ({ repeat }) => {
   updateStyle({ [BACKGROUND_PROPERTY.BackgroundRepeat]: repeat ?? '' })
 }
@@ -142,7 +142,7 @@ onMounted(() => {
   state.angle = angleMatch ? Number(angleMatch[1]) : ONE_PI_DEG
   rotateAngle()
 
-  const rColor = /\#(?:[a-f0-9]{6}|[a-f0-9]{3})/ // #fff | #fff
+  const rColor = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/ // #fff | #fff
   const rLengthPercentage = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/ // .5 5px 50%
   const rLinearColorStop = new RegExp(`${rColor.source}(?:\\s+${rLengthPercentage.source})?`)
   const rComma = /\s*,\s*/