feat(style-panel): modify this style-panel styles according to the de…

…sign craft (#853) * feat(style-panel): 根据设计稿修改样式面板的UI * feat(style-panel): 根据设计稿修改样式面板的UI * feat(style-panel): 根据设计稿修改样式面板的UI * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): modify this style-panel styles according to the design craft * feat(style-panel): add style-panel can be collapsed or expanded * feat(style-panel): modify tabGroupComponent style error; * feat(style-panel): 对其设计稿后修改部分样式 * feat(style-pane): 修复部分样式颜色和间距问题 * feat(style-panel): 修复eslint报错问题 * feat(style-panel): 修改review意见 * feat(style-panel): 修复AI的review意见 * feat(style-panel): use color variables insteads color values; * feat(style-panel): fix AI reviews; * feat(style-panel): fix AI reviews * feat(style-panel): 修改颜色变量--ti-base系列为--te-base * feat(style-panel): fix item width error * feat(style-panel): fix review error * feat(style-panel): use buttonGroup & dorpDown replace tabsGroupComponent elements; * feat(style-panel): adjust the spacing font to non-italic, the spacing of the ModalMask pop-window to 20px, and the closing icon to 16px; * feat(style-panel): fix the color variables; * feat(style-panel): Modified review comments: color variables; numeric component; optimized; * feat(style-panel): Resolved the remainning styles issues * feat(style-panel): fix some reviews * feat(style-panel): Resolved the remainning styles issues * feat(style-panel): fix some reviews * feat(style-panel): fix some reviews * feat(style-panel): fix some reviews * feat(style-panel): add style panel collapsed or expand icon * Create style-panel-expand.svg feat(style-panel): add expand icon of style collapsed tab * Create style-pabel-collapsed.svg feat(style-panel): add collapsed icon of style panel collapsed tabs * Delete packages/design-core/assets/style-pabel-collapsed.svg * Create style-panel-collapsed.svg * feat(style-panel): modify some icon color * feat(style-panel): fix some reviews * feat(style-panel): fix some reviews * feat(style-panel): fix some reviews * feat(style-panel): fix some reviews
opentiny · Nov 8, 2024 · ea73bff · ea73bff
1 parent ea0440b
commit ea73bff
Show file tree

Hide file tree

Showing 38 changed files with 1,466 additions and 885 deletions.
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/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>