fix:Modify style panel and dialog footer button

opentiny · Jan 7, 2025 · 8fd93b0 · 8fd93b0
1 parent f295a16
commit 8fd93b0
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 19 deletions.
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
@@ -291,6 +291,7 @@ export default {
 .btn-box {
   display: flex;
   justify-content: flex-end;
+  width: 100%;
   &:has(.format-btn) {
     justify-content: space-between;
   }

diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -179,12 +179,18 @@ const change = (item) => {
         background-color: var(--ti-lowcode-base-gray-101);
         color: var(--te-common-text-primary);
         border-radius: 4px;
+        .svg-icon {
+          color: var(--te-common-text-primary);
+        }
       }
 
       &.selected {
         background-color: var(--ti-lowcode-base-gray-101);
         color: var(--te-common-text-primary);
         border-radius: 4px;
+        .svg-icon {
+          color: var(--te-common-text-primary);
+        }
       }
     }
     .tab-item {

diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
@@ -21,6 +21,7 @@
           type="info"
           description="你可以通过点击左侧区域变量列表绑定变量或处理函数，也可以在右边输入模式输入复杂的表达式。"
           class="header-alert"
+          :closable="false"
         ></tiny-alert>
       </div>
       <div class="bind-dialog-content">
@@ -85,7 +86,7 @@
               </div>
             </div>
             <div class="bottom lowcode-scrollbar-thin">
-              <h3>用法</h3>
+              <span class="bottom__title">用法</span>
               <div class="bottom-demo">
                 <p>
                   你可以通过点击左侧区域绑定变量或处理函数，或者点击右边的铅笔按钮切换到输入模式，输入复杂的表达式。
@@ -554,7 +555,6 @@ export default {
   .header-alert {
     margin-top: 0;
     margin-bottom: 12px;
-    color: var(--ti-lowcode-meta-bind-variable-header-alert-color);
   }
   .bind-dialog-content {
     display: flex;
@@ -565,11 +565,11 @@ export default {
       width: 38%;
 
       .content-left__title {
-        color: var(--ti-lowcode-meta-bind-variable-content-left-title-color);
+        color: var(--te-common-text-primary);
       }
 
       .list-wrap {
-        border: 1px solid var(--ti-lowcode-meta-bind-variable-list-wrap-border-color);
+        border: 1px solid var(--te-common-border-divider);
         border-radius: 4px;
         height: 300px;
         margin-top: 8px;
@@ -578,8 +578,8 @@ export default {
 
       .content-left__list {
         width: 120px;
-        color: var(--ti-lowcode-meta-bind-variable-content-left-list-color);
-        border-right: 1px solid var(--ti-lowcode-meta-bind-variable-content-left-list-border-right-color);
+        color: var(--te-common-text-secondary);
+        border-right: 1px solid var(--te-common-border-divider);
       }
 
       .content-left__list-item {
@@ -588,21 +588,23 @@ export default {
         transition: background 0.3s;
         &.active,
         &:hover {
-          background: var(--ti-lowcode-meta-bind-variable-list-item-hover-bg-color);
+          background: var(--te-common-bg-container);
+          color: var(--te-common-text-primary);
         }
       }
 
       .item-selected {
-        background-color: var(--ti-lowcode-meta-bind-variable-item-selected-bg-color);
+        background-color: var(--te-common-bg-container);
       }
 
       .item-text {
         padding: 8px 12px;
         cursor: pointer;
-        color: var(--ti-lowcode-meta-bind-variable-item-text-color);
+        color: var(--te-common-text-secondary);
 
         &:hover {
-          background-color: var(--ti-lowcode-meta-bind-variable-item-hover-bg-color);
+          background-color: var(--te-common-bg-container);
+          color: var(--te-common-text-primary);
         }
       }
 
@@ -635,7 +637,7 @@ export default {
       }
 
       .content-right__title {
-        color: var(--ti-lowcode-meta-bind-variable-content-right-title-color);
+        color: var(--te-common-text-primary);
         font-weight: 600;
         margin-right: 5px;
       }
@@ -658,8 +660,8 @@ export default {
           height: 54%;
           border-radius: 4px;
           padding: 12px 8px;
-          color: var(--ti-lowcode-meta-bind-variable-top-color);
-          border: 1px solid var(--ti-lowcode-meta-bind-variable-top-border-color);
+          color: var(--te-common-text-primary);
+          border: 1px solid var(--te-common-border-divider);
           box-sizing: border-box;
           & > div {
             height: 100%;
@@ -695,11 +697,15 @@ export default {
           border-radius: 4px;
           box-sizing: border-box;
           overflow: auto;
-          color: var(--ti-lowcode-meta-bind-variable-bottom-color);
-          border: 1px solid var(--ti-lowcode-meta-bind-variable-bottom-border-color);
+          color: var(--te-common-text-secondary);
+          border: 1px solid var(--te-common-border-divider);
           pre {
             font-family: consolas;
           }
+          .bottom__title {
+            font-weight: var(--te-base-font-weight-6);
+            color: var(--te-common-text-primary);
+          }
         }
       }
     }
@@ -709,6 +715,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    width: 100%;
   }
 }
 </style>
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -521,6 +521,7 @@ const handleDeleteCurSelector = () => {
     padding: 3px;
     border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
     border-radius: var(--te-base-border-radius-1);
+    color: var(--te-common-text-weaken);
     cursor: pointer;
   }
 

diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue
@@ -11,7 +11,6 @@
         :modelValue="state.opacity"
         :controls="false"
         :showUnit="true"
-        :disabled="true"
         @update:modelValue="updateOpacity"
       ></slider-configurator>
     </div>

diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
@@ -33,6 +33,7 @@
   --te-common-border-divider: var(--te-base-gray-30); //线条-白色背景分割线颜色 #e6e6e6
   --te-common-border-bg-divider: var(--te-base-gray-40); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb
   --te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #1476ff
+  --te-common-border-error-hover: var(--te-base-red-30); // 线条 红色按钮边框hover色 #faa7a3
 
   --te-common-bg-primary: var(--te-base-gray-90); // 主要按钮-背景色 #191919
   --te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色  选中和hover等颜色 #1476ff
@@ -51,6 +52,7 @@
   --te-common-bg-error: var(--te-base-red-10); // 浅色错误背景-背景色 #fff1f0
   --te-common-bg-popover: var(--te-base-gray-0); // 对话框/tooltip/popover背景 #fff
   --te-common-bg-text-emphasize: var(--te-base-blue-140); // 强调性文字背景色 rgba(20, 118, 255, 0.1)
+  --te-common-bg-info: var(--te-base-blue-20); // 提示框info背景色 #e7f1ff
 
   // 通用间距
   --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
@@ -90,6 +92,7 @@
   --te-common-border-divider: var(--te-base-gray-140); //线条-白色背景分割线颜色 #36383D
   --te-common-border-bg-divider: var(--te-base-gray-130); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4E52
   --te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #1476ff
+  --te-common-border-error-hover: var(--te-base-red-90); // 线条 红色按钮边框hover色 #78080e
 
   --te-common-bg-primary: var(--te-base-gray-20); // 主要按钮-背景色 #F0F0F0
   --te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色 选中和hover等颜色 #1476ff
@@ -106,6 +109,7 @@
   --te-common-bg-switch: var(--te-base-gray-130); // 开关默认色 #4D4E52
   --te-common-bg-error: var(--te-base-red-150); // 深色错误背景-背景色 #330002
   --te-common-bg-popover: var(--te-base-gray-170); // 对话框/tooltip/popover背景 #0F1115
+  --te-common-bg-info: var(--te-base-blue-110); // 提示框info背景色 #202b3f
 
   // 通用间距
   --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等

diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
@@ -312,10 +312,16 @@
     }
     .tiny-button--danger {
       margin-right: 8px;
+      border-color: var(--te-common-color-error);
+      color: var(--te-common-color-error);
+      background-color: transparent;
+      &:hover {
+        border-color: var(--te-common-border-error-hover);
+      }
     }
     .tiny-button--primary,
     .tiny-button--info {
-      margin-left: 8px;
+      margin-left: 4px;
     }
     .tiny-button--default.tiny-button--default {
       border-color: var(--te-common-border-secondary);
@@ -546,7 +552,7 @@
     border: 0;
     width: 14px;
     margin-right: 4px;
-    height: calc(100% - 5px);
+    height: auto;
   }
 }
 
@@ -1008,3 +1014,11 @@
     }
   }
 }
+
+.tiny-alert {
+  &.tiny-alert--info {
+    background: var(--te-common-bg-info);
+    border-color: transparent;
+    color: var(--te-common-text-primary);
+  }
+}
diff --git a/packages/theme/light/metaComponent.less b/packages/theme/light/metaComponent.less
@@ -10,7 +10,7 @@
   // MetaCodeEditor
   --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-base-default-button-border-color);
+  --ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default);
   --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-base-default-button-border-hover-color);
   --ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken);
 }