From 49773b821b68e276d4faee6a1368f585f9e1043f Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Sat, 12 Oct 2024 18:21:03 +0800
Subject: [PATCH 1/2] refactor(styles): rewrite some block styles

---
 packages/common/component/BindI18n.vue        | 14 ++++++---
 .../common/component/BlockDescription.vue     | 31 +++++++++++++------
 packages/common/component/BlockLinkField.vue  | 31 ++++++++++---------
 packages/common/component/ConfigItem.vue      |  2 ++
 .../design-core/assets/block-add-prop.svg     | 15 +++++++++
 .../design-core/assets/block-bind-prop.svg    | 13 ++++++++
 packages/settings/props/src/Main.vue          |  2 +-
 7 files changed, 78 insertions(+), 30 deletions(-)
 create mode 100644 packages/design-core/assets/block-add-prop.svg
 create mode 100644 packages/design-core/assets/block-bind-prop.svg

diff --git a/packages/common/component/BindI18n.vue b/packages/common/component/BindI18n.vue
index 703417bdf0..c0f99ce0e3 100644
--- 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
index ba8a0ea693..61b46d8f2e 100644
--- 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,27 @@ export default {
 
 <style lang="less" scoped>
 .description {
-  border-color: var(--ti-lowcode-description-color);
+  font-size: 12px;
+
+  &.wrapper {
+    height: 28px;
+    padding: 0 12px;
+    border-left: 0;
+    box-shadow: none;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+  }
 
   .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
index b2ff541cbe..cdbf711cff 100644
--- a/packages/common/component/BlockLinkField.vue
+++ b/packages/common/component/BlockLinkField.vue
@@ -1,7 +1,9 @@
 <template>
   <tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover">
     <template #reference>
-      <span class="link-icon">+</span>
+      <span class="icon-wrap">
+        <svg-icon name="block-bind-prop"></svg-icon>
+      </span>
     </template>
     <ul class="context-menu">
       <li v-if="isLinked" class="menu-item" @click="unLink(data)">取消关联</li>
@@ -57,8 +59,6 @@ export default {
           render() {
             return (
               <div>
-                <div>此新字段将自动链接到此属性</div>
-                <br />
                 <TinyInput placeholder="请输入字段名称" v-model={state.newPropertyName}></TinyInput>
               </div>
             )
@@ -141,18 +141,19 @@ 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;
+  z-index: 100;
+  transform: translate(-50%, -50%);
+
+  .svg-icon {
+    font-size: 14px;
+  }
+
+  &:hover .svg-icon {
+    transform: scale(1.25);
   }
 }
 
diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index 8fcd276d4b..431857c011 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -538,6 +538,8 @@ export default {
     justify-content: space-between;
     align-items: center;
     overflow: hidden;
+    position: relative;
+    overflow: visible;
     &:has(.verify-failed) {
       align-items: flex-start;
     }
diff --git a/packages/design-core/assets/block-add-prop.svg b/packages/design-core/assets/block-add-prop.svg
new file mode 100644
index 0000000000..a5915a9d48
--- /dev/null
+++ b/packages/design-core/assets/block-add-prop.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 132 132" style="enable-background:new 0 0 132 132;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#6E51E0;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<rect id="size" class="st0" width="132" height="132"/>
+<circle class="st1" cx="66.5" cy="66" r="66"/>
+<path id="合并" class="st2" d="M70.1,38.7v23.1h23c2.3,0,4.1,1.8,4.1,4.1c0,2.3-1.8,4.1-4.1,4.1h-23v23.1c0,2.3-1.8,4.1-4.1,4.1
+	c-2.3,0-4.1-1.8-4.1-4.1V70H38.8c-2.3,0-4.1-1.8-4.1-4.1c0-2.3,1.8-4.1,4.1-4.1h23.1V38.7c0-2.3,1.8-4.1,4.1-4.1
+	C68.3,34.6,70.1,36.4,70.1,38.7z"/>
+</svg>
diff --git a/packages/design-core/assets/block-bind-prop.svg b/packages/design-core/assets/block-bind-prop.svg
new file mode 100644
index 0000000000..c0556885d7
--- /dev/null
+++ b/packages/design-core/assets/block-bind-prop.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 132 132" style="enable-background:new 0 0 132 132;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#6E51E0;}
+	.st2{fill:#FFFFFF;}
+</style>
+<rect id="size" class="st0" width="132" height="132"/>
+<circle id="椭圆_42" class="st1" cx="66" cy="66" r="49.5"/>
+<circle id="椭圆_43" class="st2" cx="66" cy="66" r="16.5"/>
+</svg>
diff --git a/packages/settings/props/src/Main.vue b/packages/settings/props/src/Main.vue
index 3d4e81ede4..3b64f75aa9 100644
--- a/packages/settings/props/src/Main.vue
+++ b/packages/settings/props/src/Main.vue
@@ -43,6 +43,6 @@ export default {
 
 <style lang="less" scoped>
 .block-description {
-  margin: 10px;
+  margin: 12px;
 }
 </style>

From 7bbdd97eeed4b09e7a0ba160e1184e17ec45c1d1 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Wed, 16 Oct 2024 09:37:51 +0800
Subject: [PATCH 2/2] fix BlockLinkField styles

---
 packages/common/component/BlockLinkField.vue | 64 ++++++++++++++------
 1 file changed, 47 insertions(+), 17 deletions(-)

diff --git a/packages/common/component/BlockLinkField.vue b/packages/common/component/BlockLinkField.vue
index cdbf711cff..a9fdfb874f 100644
--- a/packages/common/component/BlockLinkField.vue
+++ b/packages/common/component/BlockLinkField.vue
@@ -1,16 +1,27 @@
 <template>
   <tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover">
     <template #reference>
-      <span class="icon-wrap">
-        <svg-icon name="block-bind-prop"></svg-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>
@@ -53,7 +64,7 @@ export default {
       state.newPropertyName = ''
 
       confirm({
-        title: '新建区块属性',
+        title: '属性名称',
         status: 'custom',
         message: {
           render() {
@@ -155,36 +166,55 @@ export default {
   &:hover .svg-icon {
     transform: scale(1.25);
   }
+
+  &.bind-prop {
+    z-index: 30;
+    &:hover {
+      z-index: 10;
+    }
+  }
+
+  &.add-prop {
+    z-index: 20;
+    &:hover {
+      z-index: 40;
+    }
+  }
 }
 
 .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;