fix:Modify button style

opentiny · Dec 3, 2024 · a7440a4 · a7440a4
1 parent 83093f8
commit a7440a4
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 16 deletions.
diff --git a/packages/plugins/datasource/src/Main.vue b/packages/plugins/datasource/src/Main.vue
@@ -16,7 +16,10 @@
       ></svg-button>
     </template>
     <template #content>
-      <tiny-button class="add-data-source" @click="openDataSourceFormPanel()"> 添加数据源 </tiny-button>
+      <tiny-button class="add-data-source" @click="openDataSourceFormPanel()">
+        <svg-icon name="add" class="add-data-source-icon"></svg-icon>
+        <span class="add-data-source-text">添加数据源</span>
+      </tiny-button>
       <data-source-list @edit="openDataSourceFormPanel"></data-source-list>
     </template>
   </plugin-panel>
@@ -155,11 +158,21 @@ export default {
 }
 .add-data-source {
   margin: 0 12px 12px 12px;
+  height: 24px;
   color: var(--ti-lowcode-data-source-color);
 
   &: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-hover);
+  }
+  .add-data-source-icon {
+    font-size: 16px;
+    color: var(--te-common-icon-secondary);
+    margin-right: 4px;
+    vertical-align: sub;
+  }
+  .add-data-source-text {
+    display: inline-block;
   }
 }
 :deep(.help-box) {

diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
@@ -22,10 +22,10 @@
         </template>
       </tiny-search>
       <div class="add-btn">
-        <tiny-button @click="openPanel(OPTION_TYPE.ADD)"
-          ><icon-plus class="icon-plus"></icon-plus
-          >{{ activeName === STATE.CURRENT_STATE ? '添加变量' : '添加全局变量' }}</tiny-button
-        >
+        <tiny-button @click="openPanel(OPTION_TYPE.ADD)">
+          <svg-icon name="add" class="add-btn-icon"></svg-icon>
+          <span class="add-btn-text">{{ activeName === STATE.CURRENT_STATE ? '添加变量' : '添加全局变量' }}</span>
+        </tiny-button>
       </div>
       <data-source-list
         :modelValue="Object.keys(state.dataSource)"
@@ -82,7 +82,6 @@ import {
   META_APP,
   META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
-import { iconPlus } from '@opentiny/vue-icon'
 import { getCommentByKey } from '@opentiny/tiny-engine-common/js/comment'
 import { iconSearch } from '@opentiny/vue-icon'
 import { CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
@@ -104,8 +103,7 @@ export default {
     TinyTabItem: TabItem,
     CreateStore,
     LinkButton,
-    TinyIconSearch: iconSearch(),
-    IconPlus: iconPlus()
+    TinyIconSearch: iconSearch()
   },
   setup(props, { emit }) {
     const variableRef = ref(null)
@@ -401,10 +399,19 @@ export default {
       .tiny-button {
         width: 100%;
         border-color: var(--ti-lowcode-data-source-border-color);
+        &:hover {
+          border-color: var(--te-common-border-hover);
+        }
       }
-      .icon-plus {
+      .add-btn-icon {
         margin-right: 4px;
+        font-size: 16px;
         stroke: var(--ti-lowcode-chat-model-button-text);
+        color: var(--te-common-icon-secondary);
+        vertical-align: sub;
+      }
+      .add-btn-text {
+        display: inline-block;
       }
     }
 
@@ -421,7 +428,7 @@ export default {
     }
 
     .left-filter {
-      margin-top: 12px;
+      margin-top: 4px;
       padding: 0 10px;
     }
 

diff --git a/packages/settings/events/src/components/BindEvents.vue b/packages/settings/events/src/components/BindEvents.vue
@@ -12,7 +12,7 @@
         <template #reference>
           <tiny-button class="bind-event-btn">
             <span>绑定事件</span>
-            <icon-chevron-down class="icon-chevron-down"></icon-chevron-down>
+            <icon-chevron-down class="icon-chevron-down bind-event-btn-icon"></icon-chevron-down>
           </tiny-button>
         </template>
         <ul class="bind-event-list">
@@ -320,21 +320,33 @@ export default {
       padding: 0 16px;
       font-size: 12px;
       margin-right: 0;
+      border-color: var(--te-common-border-default);
       .custom-event-button-text {
         display: inline-block;
-        vertical-align: middle;
       }
       .custom-event-button-icon {
         display: inline-block;
-        vertical-align: middle;
-        color: var(--ti-lowcode-events-custom-icon-color);
-        font-size: 13px;
+        vertical-align: sub;
+        color: var(--te-common-icon-secondary);
+        font-size: 16px;
+        margin-right: 4px;
+      }
+      &:hover {
+        border-color: var(--te-common-border-hover);
       }
     }
     .bind-event-btn {
       padding: 0 16px;
       font-size: 12px;
       width: 100%;
+      border-color: var(--te-common-border-default);
+      .bind-event-btn-icon {
+        margin-left: 4px;
+        color: var(--te-common-icon-secondary);
+      }
+      &:hover {
+        border-color: var(--te-common-border-hover);
+      }
     }
   }
   .empty-action {