Merge branch 'refactor/develop' into refactor/split-renderer

opentiny · Nov 11, 2024 · 23028c7 · 23028c7
2 parents f75edeb + 5279ef1
commit 23028c7
Show file tree

Hide file tree

Showing 42 changed files with 1,469 additions and 912 deletions.
diff --git a/package.json b/package.json
@@ -3,17 +3,13 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "pnpm run setup && concurrently 'pnpm:serve:backend' 'pnpm:dev:demo:frontend'",
-    "dev:mock": "pnpm --filter @opentiny/tiny-engine dev",
-    "dev:demo": "pnpm run setup && concurrently 'pnpm:serve:backend' 'pnpm:dev:demo:frontend'",
+    "dev": "pnpm run setup && concurrently 'pnpm:serve:backend' 'pnpm:serve:frontend'",
     "serve:frontend": "pnpm --filter designer-demo dev",
-    "dev:demo:frontend": "pnpm --filter designer-demo dev",
     "serve:backend": "pnpm --filter @opentiny/tiny-engine-mock dev",
     "build:plugin": "pnpm --filter @opentiny/tiny-engine-* --filter @opentiny/tiny-engine build",
     "build:alpha": "pnpm --filter designer-demo build:alpha",
     "build:prod": "pnpm --filter designer-demo build",
     "buildComponentSchemas": "node scripts/buildComponentSchemas.js",
-    "preview": "pnpm --filter @opentiny/tiny-engine preview",
     "lint": "eslint . --ext .js,.vue,.jsx --fix",
     "format": "prettier --write **/*{.vue,.js,.ts,.html,.json}",
     "prepare": "node -e \"if(require('fs').existsSync('.git')){process.exit(1)}\" || husky install",

diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
@@ -2,7 +2,9 @@
   <div class="editor-wrap">
     <slot :open="open">
       <div v-if="buttonShowContent" :class="['full-width', { 'empty-color': value === '' }]" @click="open">
-        <span class="text-content text-ellipsis-multiple">{{ value === '' ? buttonLabel : value }}</span>
+        <span class="text-content text-ellipsis-multiple text-line-clamp">{{
+          value === '' ? buttonLabel : value
+        }}</span>
         <svg-icon class="edit-icon" name="to-edit"></svg-icon>
       </div>
       <tiny-button v-else class="edit-btn" @click="open">
@@ -298,7 +300,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 32px;
+  height: 24px;
   padding: 4px;
   border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color);
   border-radius: 6px;
@@ -322,6 +324,10 @@ export default {
     color: var(--ti-lowcode-common-text-main-color);
   }
 }
+
+.text-line-clamp {
+  -webkit-line-clamp: 1;
+}
 :deep(.tiny-dialog-box__header) {
   padding-bottom: 15px;
 }

diff --git a/packages/common/component/VueMonaco.vue b/packages/common/component/VueMonaco.vue
@@ -211,23 +211,3 @@ export default {
   }
 }
 </script>
-<style lang="less" scoped>
-:deep(.monaco-editor) {
-  background: var(--ti-lowcode-base-bg-2);
-  .monaco-scrollable-element {
-    left: 12px !important;
-    width: 100% !important;
-  }
-  .monaco-editor,
-  .monaco-editor-background {
-    background: var(--ti-lowcode-base-bg-2) !important;
-  }
-  .margin {
-    display: none;
-    width: 0;
-  }
-  .minimap {
-    display: none !important;
-  }
-}
-</style>
diff --git a/packages/configurator/src/color-configurator/ColorConfigurator.vue b/packages/configurator/src/color-configurator/ColorConfigurator.vue
@@ -2,15 +2,15 @@
   <div class="background-input">
     <tiny-input v-model="color" placeholder="请输入颜色" @change="change">
       <template #prefix>
-        <input v-model="color" type="color" class="input-color" @change="changeColor" />
+        <input v-model="inputColor" type="color" class="input-color" @change="changeColor" />
       </template>
     </tiny-input>
   </div>
 </template>
 
 <script>
 import { Input } from '@opentiny/vue'
-import { ref, watchEffect } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
 
 export default {
   components: {
@@ -29,6 +29,7 @@ export default {
   emits: ['change', 'update:modelValue'],
   setup(props, { emit }) {
     const color = ref(props.modelValue)
+    const inputColor = computed(() => color.value || '#FFFFFF')
 
     const change = (value) => {
       emit('update:modelValue', value)
@@ -45,6 +46,7 @@ export default {
 
     return {
       color,
+      inputColor,
       change,
       changeColor
     }
@@ -57,7 +59,7 @@ export default {
   width: 100%;
 
   .input-color {
-    width: 22px;
+    width: 20px;
     height: 24px;
     border: none;
     background: transparent;

diff --git a/packages/configurator/src/index.js b/packages/configurator/src/index.js
@@ -26,6 +26,7 @@ import SliderConfigurator from './slider-configurator/SliderConfigurator.vue'
 import SlotConfigurator from './slot-configurator/SlotConfigurator.vue'
 import SwitchConfigurator from './switch-configurator/SwitchConfigurator.vue'
 import TableColumnsConfigurator from './table-columns-configurator/TableColumnsConfigurator.vue'
+import TabsGroupConfigurator from './tabs-group-configurator/TabsGroupConfigurator.vue'
 import VariableConfigurator from './variable-configurator/VariableConfigurator.vue'
 
 import { I18nInput, MetaCodeEditor } from '@opentiny/tiny-engine-common'
@@ -59,6 +60,7 @@ export {
   SlotConfigurator,
   SwitchConfigurator,
   TableColumnsConfigurator,
+  TabsGroupConfigurator,
   VariableConfigurator,
   MetaCodeEditor,
   I18nInput as I18nConfigurator,

diff --git a/packages/configurator/src/number-configurator/NumberConfigurator.vue b/packages/configurator/src/number-configurator/NumberConfigurator.vue
@@ -169,7 +169,9 @@ export default {
     :deep(.tiny-numeric__input-inner) {
       text-align: left;
     }
-
+    :deep(.is-disabled) {
+      background-color: var(--te-common-bg-disabled);
+    }
     &.is-without-controls {
       :deep(.tiny-numeric__input-inner) {
         padding-left: 8px;
@@ -181,15 +183,18 @@ export default {
     }
   }
   .meta-numeric-unit {
+    position: absolute;
+    top: 2px;
+    height: calc(100% - 2px);
     span {
       color: var(--ti-lowcode-numeric-unit-text-color);
       font-size: 14px;
       padding: 4px;
     }
     :deep(.tiny-select) {
       width: 100%;
-      float: right;
       .tiny-input__inner {
+        height: 100%;
         color: var(--ti-lowcode-numeric-unit-text-color);
         padding: 2px;
         border: none;
@@ -200,7 +205,7 @@ export default {
         display: none;
       }
       .tiny-input.is-disabled .tiny-input__inner {
-        background: var(--ti-lowcode-input-bg);
+        background-color: var(--te-common-bg-container);
       }
     }
   }

diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -133,20 +133,21 @@ export default {
     padding: 0;
     cursor: pointer;
     border: 0;
-    background-color: transparent;
+    background-color: var(--te-common-border-bg-divider);
     position: relative;
     outline: 0;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
   }
+
   input[type='range']::-webkit-slider-thumb {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     border: 0;
-    background-color: #fff;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
+    background-color: var(--te-common-bg-default);
+    box-shadow: 0 0 2px 0 var(--te-common-border-default);
     -webkit-transition: border-color 0.15s, background-color 0.15s;
     transition: border-color 0.15s, background-color 0.15s;
     cursor: pointer;
@@ -158,7 +159,7 @@ export default {
   }
   input[type='range']::-webkit-slider-thumb:active {
     border: 0;
-    background-color: #fff;
+    background-color: var(--te-common-bg-default);
   }
 }
 </style>