opentiny · hexqi · Oct 25, 2024 · Oct 12, 2024 · Oct 21, 2024 · Oct 22, 2024
diff --git a/packages/common/component/BindI18n.vue b/packages/common/component/BindI18n.vue
@@ -169,11 +169,10 @@ export default {
 
 <style lang="less" scoped>
 .languageContent {
-  width: 254px;
-  border-radius: 5px;
   text-align: center;
   z-index: 99;
   margin-top: 5px;
+  margin-bottom: 16px;
 
   .tiny-svg {
     margin-right: 10px;
@@ -184,7 +183,6 @@ export default {
     }
   }
   .tiny-button {
-    margin-top: 10px;
     max-width: initial;
     padding: 0 12px;
     background-color: var(--ti-lowcode-tabs-border-color);
@@ -196,18 +194,24 @@ export default {
     }
   }
   .addNewLanguage {
-    padding: 0px 5px 5px;
     .tiny-input {
       display: flex;
       margin-bottom: 10px;
+      padding: 0 8px;
       align-items: center;
       label {
-        width: 80px;
+        text-wrap: nowrap;
+        text-align: left;
+        width: 50px;
       }
       display: flex;
     }
+    .tiny-input__inner {
+      flex: 1;
+    }
     .add-btns {
       text-align: right;
+      padding: 0 8px;
     }
   }
 }

diff --git a/packages/common/component/BlockDescription.vue b/packages/common/component/BlockDescription.vue
@@ -1,7 +1,10 @@
 <template>
-  <meta-description class="description" type="warning">
+  <meta-description class="description">
     <template #content>
-      <div @click="openBlockSetting" class="setting-block"><span class="add-icon">+</span>设置区块暴露属性</div>
+      <div @click="openBlockSetting" class="setting-block">
+        <svg-icon name="block-add-prop"></svg-icon>
+        <span>设置区块暴露属性</span>
+      </div>
     </template>
   </meta-description>
 </template>
@@ -33,17 +36,28 @@ export default {
 
 <style lang="less" scoped>
 .description {
-  border-color: var(--ti-lowcode-description-color);
+  font-size: 12px;
+
+  &.wrapper {
+    height: 32px;
+    padding: 0 12px;
+    border-left: 0;
+    box-shadow: none;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    background-color: var(--te-common-bg-container);
+  }
 
   .setting-block {
+    display: flex;
+    align-items: center;
+    gap: 4px;
     cursor: pointer;
   }
-  .add-icon {
-    padding: 0 3px;
-    margin: 0 5px;
-    color: var(--ti-lowcode-toolbar-icon-color);
-    border-radius: 50%;
-    background-color: var(--ti-lowcode-description-color);
+
+  .svg-icon {
+    font-size: 16px;
   }
 }
 </style>
diff --git a/packages/common/component/BlockLinkField.vue b/packages/common/component/BlockLinkField.vue
@@ -1,14 +1,27 @@
 <template>
-  <tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover">
+  <tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover" :visible-arrow="false">
     <template #reference>
-      <span class="link-icon">+</span>
+      <div>
+        <span class="icon-wrap bind-prop">
+          <svg-icon name="block-bind-prop"></svg-icon>
+        </span>
+        <span class="icon-wrap add-prop">
+          <svg-icon name="block-add-prop"></svg-icon>
+        </span>
+      </div>
     </template>
     <ul class="context-menu">
       <li v-if="isLinked" class="menu-item" @click="unLink(data)">取消关联</li>
-      <li v-else class="menu-item" @click="addProperty(data)">+ 新建属性</li>
-      <li class="menu-item" @click="openBlockSetting">管理属性</li>
-      <li v-for="item in properties" :key="item.property" class="menu-item">
-        {{ item.property }}
+      <li v-else class="menu-item" @click="addProperty(data)">
+        <svg-icon name="plus-circle"></svg-icon>
+        <span>创建并链接新属性</span>
+      </li>
+      <li class="menu-item" @click="openBlockSetting">
+        <svg-icon name="setting"></svg-icon>
+        <span>打开属性面板</span>
+      </li>
+      <li v-for="item in properties" :key="item.property" class="menu-item property">
+        <span>{{ item.property }}</span>
         <span v-if="item.property !== data?.linked?.blockProperty" class="link-item" @click="editProperty(item)">
           关联
         </span>
@@ -51,14 +64,12 @@ export default {
       state.newPropertyName = ''
 
       confirm({
-        title: '新建区块属性',
+        title: '属性名称',
         status: 'custom',
         message: {
           render() {
             return (
               <div>
-                <div>此新字段将自动链接到此属性</div>
-                <br />
                 <TinyInput placeholder="请输入字段名称" v-model={state.newPropertyName}></TinyInput>
               </div>
             )
@@ -141,49 +152,68 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.link-icon {
-  width: 16px;
-  height: 16px;
-  margin: 0 5px;
-  border-radius: 50%;
-  line-height: 16px;
-  text-align: center;
-  color: var(--ti-lowcode-block-link-field-link-icon-color);
-  background-color: var(--ti-lowcode-block-link-field-link-icon-bg-color);
-  cursor: pointer;
-  &:hover {
-    transform: scale(1.2);
+.icon-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+
+  .svg-icon {
+    font-size: 14px;
+  }
+
+  &:hover .svg-icon {
+    transform: scale(1.25);
+  }
+
+  &.bind-prop {
+    z-index: 30;
+    &:hover {
+      z-index: 10;
+    }
+  }
+
+  &.add-prop {
+    z-index: 20;
+    &:hover {
+      z-index: 30;
+    }
   }
 }
 
 .context-menu {
   width: 200px;
-  padding: 3px 0;
+  padding: 8px 0;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
   .menu-item {
+    line-height: 18px;
     color: var(--ti-lowcode-attr-popover-menu-item-color);
     display: flex;
-    justify-content: space-between;
-    padding: 6px 15px;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 12px;
     cursor: pointer;
     &:hover {
       background: var(--ti-lowcode-attr-popover-menu-item-hover-bg-color);
     }
-
+    &.property {
+      justify-content: space-between;
+    }
     .link-item {
       cursor: pointer;
-      background-color: var(--ti-lowcode-attr-popover-menu-item-link-item-bg-color);
-      color: var(--ti-lowcode-attr-popover-menu-item-link-item-color);
-      padding: 2px 6px;
-      border-radius: 2px;
+      color: var(--te-common-text-emphasize);
     }
   }
+
+  .svg-icon {
+    font-size: 16px;
+  }
 }
 </style>
 <style lang="less">
-.tiny-popover.tiny-popper.block-new-attr-popover {
+.tiny-popover.tiny-popper.tiny-popper.block-new-attr-popover[x-placement] {
   // 这里不知为啥要添加 max-height，后续确认无用可删除
   max-height: 65vh;
   padding: 0;

diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
@@ -533,15 +533,13 @@ export default {
     line-height: 18px;
   }
 
-  .linked {
-    background-color: var(--ti-lowcode-meta-config-item-link-color);
-  }
-
   .item-input {
     display: flex;
     justify-content: space-between;
     align-items: center;
     overflow: hidden;
+    position: relative;
+    overflow: visible;
     &:has(.verify-failed) {
       align-items: flex-start;
     }

diff --git a/packages/common/component/MetaListItem.vue b/packages/common/component/MetaListItem.vue
@@ -36,24 +36,14 @@
                 ></template>
 
                 <template #reference>
-                  <tiny-tooltip class="item" effect="dark" :content="item.title" placement="top">
-                    <icon-edit class="tiny-svg-size icon-edit" @click="btnClick($event, item.type)"></icon-edit>
-                  </tiny-tooltip>
+                  <icon-edit class="tiny-svg-size icon-edit" @click="btnClick($event, item.type)"></icon-edit>
                 </template>
               </tiny-popover>
             </template>
             <template v-else>
-              <tiny-tooltip
-                class="item"
-                effect="dark"
-                :content="item.title"
-                placement="top"
-                @click="btnClick($event, item.type)"
-              >
-                <span class="item-icon">
-                  <component :is="item.icon"></component>
-                </span>
-              </tiny-tooltip>
+              <span class="item-icon" @click="btnClick($event, item.type)">
+                <component :is="item.icon"></component>
+              </span>
             </template>
           </template>
         </slot>

diff --git a/packages/common/component/PluginBlockItemImg.vue b/packages/common/component/PluginBlockItemImg.vue
@@ -0,0 +1,107 @@
+<template>
+  <div v-if="showCheckbox && displayTable" class="table-selection">
+    <tiny-checkbox v-model="computedChecked" @change="handleCheck"></tiny-checkbox>
+  </div>
+  <div class="block-item-img">
+    <img
+      v-if="item.screenshot"
+      class="item-image"
+      :src="item.screenshot || defaultImg"
+      draggable="false"
+      @error="$event.target.src = defaultImg"
+    />
+    <svg-icon v-else class="item-image item-default-img" name="block-default"></svg-icon>
+    <div v-if="showCheckbox && !displayTable" class="top-left">
+      <tiny-checkbox v-model="computedChecked" @change="handleCheck"></tiny-checkbox>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Checkbox } from '@opentiny/vue'
+import { computed } from 'vue'
+
+const defaultImg =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA11JREFUaEPtmUvIVVUYhp83CIJKpIsOEsSBAxEiEAwqRDGDBCmRkCwhwQQbSANDEbwNgvgzxEIUCwRBEB2EgiQR5MA/RcHImRBKkYhYaAliULzxwT6y3O1zzv735Rx+PN/srP1d3ve7rLX2PmKSiyY5fkYEhl3BUQVGFaiZgQdayPZTwOvA7Jp+2zI/C5yV9FcnQJ7AB8DetqI35HdM0qZuBL4HFjYUqC03pyUteigIPMC0rXSW8Ws77YzSFRgRKJPdMjqtVcD2DOC6pH/LAKmq0zgB2+uAXcCTwD1gs6Q9VQH2s2uDwO/A00ngv4EnJP3TD0zneZaEt4GvJB3uZdcoAdsBPAjkZaakX8sQsP0ecDDR/UhSVLRQGiUQEWzfAKYl0e4CU8rMgu0XgXMFSNdJ+rKIQRsE1gBjwDPAbWCLpH39sm97CvADMLeL7kpJR/PPGieQ9PGzkm72A57oB7i3Ev1vsstjZylmaJmkU6nP1giUBZ613U5gW2LzGzAHiEE+kKz/AbwhaTwhPtyT2PZK4EiO8MuSop1iprYAHyfPrwDLJV3Kng+PgO3ngZ9y4NdL2p9rk93Ah8naj8AKSVdbayHb0c+PASck/VkwfI8CASQd2v2S1nfZbeI8WJU8O53NzLHkmt/MZc72IWB1Fuxi9Lekk7ms5oe27wXR9rfAksTPCWAqsCBbq0/A9qfAxoIsfgJ8Lum67e3AjkQnzo55kq71Gn7bATZ6/oWc7fRGCNgO4EGgm5wJEkB+P18qKbbNvmI73smDxHMFytUrYDtaJlonldgeg9TjPZBtlPRZX+SJgu2XgJiBmKNUqhGw/RpwPBvajsMvJG2wvTQjcf9dNYkYl7X3JwK+o2v7TeDrnO0FSfM7a/mvEoX7bbYVxjDNTJwdlvRuEix2o61xtQYeydbHJb1SBXziN8inB93EKmA7hifA32cNnJIU34/+J7ajCu8AccWOgb5ch0DY2o6DbVbmZ8IEAvyyBMR54FVJd+oCK2tf+SADfgbWJoHid4D/pWzwJvSqEgiQac/fAhZLipN1oFKVQB7kEknfDRR5FqwJAoUvGoMi0wSBQWEtE6f0LlTG2TB0ehKY9J/XJ/cfHMPoh7oxR/9S1s1gXftRBepmsK79qAJ1M1jX/j/bzulAKB9d1wAAAABJRU5ErkJggg=='
+
+export default {
+  components: {
+    TinyCheckbox: Checkbox
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示多选框
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    displayTable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['check'],
+  setup(props, { emit }) {
+    const computedChecked = computed(() => props.checked)
+
+    const handleCheck = (v) => {
+      emit('check', v)
+    }
+
+    return {
+      computedChecked,
+      defaultImg,
+      handleCheck
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.block-item-img {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  background-color: var(--ti-lowcode-component-block-list-item-active-bg);
+
+  .top-left {
+    display: flex;
+    position: absolute;
+    top: 4px;
+    right: 4px;
+  }
+}
+
+:deep(.tiny-checkbox__label) {
+  padding: 0;
+}
+
+.item-image {
+  width: 84px;
+  height: 48px;
+  overflow: hidden;
+  object-fit: cover;
+}
+.item-default-img {
+  width: 84px;
+  height: 50px;
+  color: var(--te-common-bg-default);
+}
+
+.block-item-small-list .item-image {
+  width: 30px;
+  height: 30px;
+  min-width: 30px;
+}
+</style>