refactor(styles): apply new styles to props panel (#830)

* refactor: apply new styles to props panel

packages/common/component/ConfigItem.vue

@@ -244,6 +244,10 @@ export default {
     })
 
     const labelPosition = computed(() => {
+      if (!showLabel.value) {
+        return 'none'
+      }
+
       if (props.property.labelPosition) {
         return props.property.labelPosition
       }
@@ -524,7 +528,7 @@ export default {
 
   .item-label {
     color: var(--ti-lowcode-meta-config-item-label-color);
-    font-size: 14px;
+    font-size: 12px;
     display: flex;
     line-height: 18px;
   }

packages/common/component/MetaChildItem.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="items-container">
+    <div class="title">{{ title }}</div>
     <div v-for="(data, idx) in properties" :key="idx" class="meta-config-item">
       <config-item
         :key="idx"
@@ -17,7 +18,9 @@
 
 <script>
 import { computed } from 'vue'
+import { isObject } from '@opentiny/vue-renderless/grid/static'
 import ConfigItem from './ConfigItem.vue'
+import i18n from '../js/i18n'
 
 export default {
   components: {
@@ -39,14 +42,31 @@ export default {
     }
   },
   setup(props, { emit }) {
+    const { locale } = i18n.global
+    const untitled = {
+      zh_CN: '未命名标题',
+      en_US: 'Untitled'
+    }
+
+    const title = computed(() => {
+      const propsModelValue = props.meta.widget.props?.modelValue || []
+      const { title, label, type } = propsModelValue[props.arrayIndex] || {}
+      const text = title || label
+      const localizedText = isObject(text) ? text[locale.value] : text
+
+      return localizedText || type || untitled[locale.value] || untitled.zh_CN
+    })
+
     const properties = computed(() => {
       const result = [...(props.meta?.properties?.[0]?.content || [])]
       const propsModelValue = props.meta.widget.props?.modelValue
 
       if (result.length && propsModelValue) {
         result.forEach((item) => {
           let modelValue = propsModelValue
-          if (props.type === 'array' && props.arrayIndex > -1) modelValue = modelValue[props.arrayIndex]
+          if (props.type === 'array' && props.arrayIndex > -1) {
+            modelValue = modelValue[props.arrayIndex]
+          }
           let model_value_property = modelValue[item.property]
           item.widget.props.modelValue =
             typeof model_value_property === 'boolean' ? model_value_property : model_value_property || null
@@ -60,6 +80,7 @@ export default {
     }
 
     return {
+      title,
       properties,
       onValueChange
     }
@@ -68,6 +89,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.title {
+  color: var(--te-common-text-primary);
+  padding: 0 10px;
+  font-weight: bold;
+}
 .items-container {
   width: 100%;
   display: flex;

packages/common/component/MetaCodeEditor.vue

@@ -255,15 +255,17 @@ export default {
   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);
+  .tiny-button.edit-btn {
+    color: var(--te-common-text-primary);
+    border-color: var(--te-common-border-default);
     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);
+      border-color: var(--te-common-border-active);
+    }
+    &:focus {
+      border-color: var(--te-common-border-active);
     }
   }
 }

packages/common/component/MetaList.vue

@@ -11,6 +11,9 @@
     <div id="options" class="select-options">
       <slot name="items"></slot>
     </div>
+    <div class="bottom">
+      <slot name="bottom"></slot>
+    </div>
   </div>
 </template>
 
@@ -32,5 +35,11 @@
       border-radius: 4px 4px 0 0;
     }
   }
+
+  .bottom {
+    display: flex;
+    padding: 2px;
+    margin-top: 4px;
+  }
 }
 </style>

packages/common/component/MetaListItem.vue

@@ -18,8 +18,7 @@
                 title=""
                 width="267"
                 trigger="manual"
-                @hide="hide(item)"
-              >
+                @hide="hide(item)">
                 <template v-if="isVisible">
                   <div ref="addOptions" class="add-options" :style="`left:${itemData.left}px;top:${itemData.top}px`">
                     <icon-close class="tiny-svg-size icon-close" @click="closeEditOption"></icon-close>
@@ -29,8 +28,7 @@
                         footerbtnHide="true"
                         @changeItem="change"
                         @cancel="cancel"
-                        @confirm="formConfirm"
-                      ></meta-form>
+                        @confirm="formConfirm"></meta-form>
                     </slot>
                     <slot name="footer"></slot></div
                 ></template>
@@ -48,8 +46,7 @@
                 effect="dark"
                 :content="item.title"
                 placement="top"
-                @click="btnClick($event, item.type)"
-              >
+                @click="btnClick($event, item.type)">
                 <span class="item-icon">
                   <component :is="item.icon"></component>
                 </span>
@@ -67,8 +64,7 @@
     :visible="isShow"
     title="提示"
     width="20%"
-    @update:visible="isShow = $event"
-  >
+    @update:visible="isShow = $event">
     <span class="switch-tip">
       <span>
         <svg-icon name="warning"></svg-icon>
@@ -263,10 +259,12 @@ export default {
   margin-bottom: -1px;
   color: var(--ti-lowcode-toolbar-breadcrumb-color);
   &.active-item {
-    background-color: var(--ti-lowcode-tabs-active-bg);
+    background-color: var(--te-common-bg-container);
   }
   .option-input {
     display: flex;
+    height: 24px;
+    align-items: center;
     padding: 2px;
     & > div {
       overflow: hidden;

packages/configurator/src/array-item-configurator/ArrayItemConfigurator.vue

@@ -4,9 +4,6 @@
       <template #title>
         <label>{{ meta.label?.text?.zh_CN }}</label>
       </template>
-      <template #actions>
-        <meta-list-actions v-bind="actionsOptions" @actionEvents="actionEvents"></meta-list-actions>
-      </template>
       <template #items>
         <vue-draggable-next
           :list="itemsOptions.optionsList"
@@ -41,14 +38,20 @@
           </div>
         </vue-draggable-next>
       </template>
+      <template #bottom>
+        <div class="add" @click="addItem">
+          <svg-icon name="plus"></svg-icon>
+          <span>新增一列</span>
+        </div>
+      </template>
     </meta-list>
   </div>
 </template>
 
 <script>
 import { computed, reactive } from 'vue'
-import { IconDel, IconEdit, IconPlus } from '@opentiny/vue-icon'
-import { MetaList, MetaListActions, MetaListItem, MetaChildItem } from '@opentiny/tiny-engine-common'
+import { iconDel, iconEdit } from '@opentiny/vue-icon'
+import { MetaList, MetaListItem, MetaChildItem } from '@opentiny/tiny-engine-common'
 import { useTranslate } from '@opentiny/tiny-engine-meta-register'
 import { VueDraggableNext } from 'vue-draggable-next'
 
@@ -57,7 +60,6 @@ export default {
   components: {
     MetaList,
     MetaListItem,
-    MetaListActions,
     MetaChildItem,
     VueDraggableNext
   },
@@ -82,30 +84,20 @@ export default {
       return props.meta.widget.props.modelValue?.value || props.meta.widget.props.modelValue || []
     })
 
-    const actionsOptions = {
-      actions: [
-        {
-          title: '新增',
-          type: 'add',
-          icon: IconPlus()
-        }
-      ]
-    }
-
     const itemsOptions = computed(() => ({
       valueField: 'field',
       textField: props.meta.widget.props.textField || 'value',
       btnList: [
         {
           title: '编辑',
           type: 'edit',
-          icon: IconEdit()
+          icon: iconEdit()
         },
 
         {
           title: '删除',
           type: 'delete',
-          icon: IconDel()
+          icon: iconDel()
         }
       ],
       optionsList: columnsList.value,
@@ -159,27 +151,15 @@ export default {
       updatedColumns()
     }
 
-    const actionEvents = (item) => {
-      switch (item.type) {
-        case 'add':
-          addItem()
-          break
-        default:
-          break
-      }
-    }
-
     return {
       state,
-      actionsOptions,
       itemsOptions,
       columnsList,
       editItem,
       addItem,
       deleteItem,
       changeItem,
       onValueChange,
-      actionEvents,
       translate: useTranslate().translate,
       dragEnd
     }
@@ -192,4 +172,17 @@ export default {
   font-size: 12px;
   display: block;
 }
+.add {
+  display: flex;
+  align-items: center;
+  color: var(--te-common-text-emphasize);
+  &:hover {
+    cursor: pointer;
+  }
+
+  & .icon-plus {
+    font-size: 14px;
+    margin-right: 5px;
+  }
+}
 </style>

packages/configurator/src/button-group-configurator/ButtonGroupConfigurator.vue

@@ -5,7 +5,8 @@
     v-model="value"
     :data="optionsData"
     @update:modelValue="change"
-  ></tiny-button-group>
+  >
+  </tiny-button-group>
 </template>
 
 <script>
@@ -60,28 +61,58 @@ export default {
 <style lang="less" scoped>
 .meta-button-group.tiny-button-group {
   margin-top: 0px;
+  width: 100%;
   :deep(ul.tiny-group-item) {
+    width: 100%;
+    display: flex;
+    li {
+      margin: 0;
+      flex: 1;
+    }
+    li:first-child {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+    li:last-child {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
     li.active button:not(.disabled) {
-      background: var(--ti-button-group-item-active-bg-color);
-      color: var(--ti-button-group-item-active-text-color);
-      border-color: var(--ti-button-group-item-active-border-color);
+      background: var(--te-common-bg-prompt);
+      color: var(--te-common-text-primary);
       outline: 0;
     }
     li button:not(.disabled) {
-      background: var(--ti-button-group-item-bg-color);
-    }
-    li:not(:last-child) {
-      margin-right: 2px;
+      background: var(--te-common-bg-container);
+      color: var(--te-common-text-secondary);
     }
     li button {
-      min-width: 48px;
-      padding: 0px 12px;
+      min-width: 0px;
+      width: 100%;
+      border-radius: 4px;
+      padding: 0px 8px;
       max-width: 300px;
-      line-height: 28px;
+      height: 24px;
+      line-height: 24px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    li:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      width: 1px;
+      height: 50%;
+      background-color: var(--te-common-border-default);
+      right: 0;
+      top: 50%;
+      transform: translate(50%, -50%);
+      z-index: 100;
+    }
+    li:has(+ li.active)::after,
+    li.active::after {
+      content: none;
+    }
     border: 0px;
   }
 }