update style

src/locales/lang/en.ts

@@ -326,7 +326,7 @@ const msg = {
   addExcludingKeywordsOfContent: "Please input a keyword of excluding content",
   noticeTag: "Please press Enter after inputting a tag(key=value).",
   conditionNotice:
-    "Notice: Please press Enter after inputting a tag, key of content, exclude key of content(key=value).",
+    "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
   language: "Language",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -327,7 +327,7 @@ const msg = {
   addExcludingKeywordsOfContent: "请输入一个内容不包含的关键词",
   noticeTag: "请输入一个标签(key=value)之后回车",
   conditionNotice:
-    "请输入一个标签、内容关键词或者内容不包含的关键词(key=value)之后回车",
+    "请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车",
   language: "语言",
 };
 export default msg;

src/views/components/ConditionTags.vue

@@ -38,7 +38,6 @@ limitations under the License. -->
         size="small"
         v-model="tags"
         class="trace-new-tag"
-        :placeholder="t('addTags')"
         @click="showClick"
       />
       <el-dropdown
@@ -48,8 +47,12 @@ limitations under the License. -->
       >
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item v-for="(item, index) in tagArr" :key="index">
+            <el-dropdown-item
-              <span @click="selectTag(item)" class="tag-item">
+              v-for="(item, index) in tagArr"
+              :key="index"
+              @click="selectTag(item)"
+            >
+              <span class="tag-item">
                 {{ item }}
               </span>
             </el-dropdown-item>
@@ -69,7 +72,7 @@ limitations under the License. -->
           <Icon class="icon-help mr-5" iconName="help" size="middle" />
         </span>
       </el-tooltip>
-      <b v-if="type !== 'LOG'">{{ t("noticeTag") }}</b>
+      <b v-if="type === 'AL'">{{ t("noticeTag") }}</b>
     </span>
   </div>
 </template>
@@ -159,10 +162,10 @@ function selectTag(item: string) {
   if (tags.value.includes("=")) {
     tags.value += item;
     addLabels();
-    tagArr.value = tagKeys.value;
     return;
   }
   tags.value = item + "=";
+  tagArr.value = tagKeys.value;
   fetchTagValues();
   dropdownTag.value.handleOpen();
 }
@@ -180,10 +183,6 @@ function showClick() {
   vertical-align: top;
 }
 
-.link-tips {
-  margin-right: 120px;
-}
-
 .selected {
   display: inline-block;
   padding: 0 3px;
@@ -210,13 +209,16 @@ function showClick() {
 
 .tag-item {
   display: inline-block;
-  width: 210px;
+  min-width: 210px;
 }
 
 .tags-tip {
   color: #a7aebb;
+}
+
+.link-tips {
   display: inline-block;
-  margin-right: 130px;
+  margin-left: 130px;
 }
 
 .light {

src/views/dashboard/related/log/Header.vue

@@ -50,9 +50,14 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
-  </div>
+    <el-button
-  <div class="row tips">
+      class="search-btn"
-    <b>{{ t("conditionNotice") }}</b>
+      size="small"
+      type="primary"
+      @click="searchLogs"
+    >
+      {{ t("search") }}
+    </el-button>
   </div>
   <div class="flex-h row">
     <div class="mr-5 traceId" v-show="!isBrowser">
@@ -61,6 +66,9 @@ limitations under the License. -->
     </div>
     <ConditionTags :type="'LOG'" @update="updateTags" />
   </div>
+  <div class="row tips">
+    <b>{{ t("conditionNotice") }}</b>
+  </div>
   <div class="flex-h" v-show="!isBrowser">
     <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
       <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
@@ -109,14 +117,6 @@ limitations under the License. -->
         </span>
       </el-tooltip>
     </div>
-    <el-button
-      class="search-btn"
-      size="small"
-      type="primary"
-      @click="searchLogs"
-    >
-      {{ t("search") }}
-    </el-button>
   </div>
 </template>
 <script lang="ts" setup>
@@ -326,6 +326,7 @@ watch(
 
 .row {
   margin-bottom: 5px;
+  position: relative;
 }
 
 .inputs-max {
@@ -337,8 +338,11 @@ watch(
 }
 
 .search-btn {
-  margin-left: 20px;
+  position: absolute;
+  top: 0;
+  right: 10px;
   cursor: pointer;
+  width: 120px;
 }
 
 .tips {

src/views/dashboard/related/trace/Filter.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h row">
-    <div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
+    <div class="mr-10" v-if="dashboardStore.entity === EntityType[1].value">
       <span class="grey mr-5">{{ t("service") }}:</span>
       <Selector
         size="small"
@@ -24,7 +24,7 @@ limitations under the License. -->
         @change="changeField('service', $event)"
       />
     </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
+    <div class="mr-10" v-if="dashboardStore.entity !== EntityType[3].value">
       <span class="grey mr-5">{{ t("instance") }}:</span>
       <Selector
         size="small"
@@ -34,7 +34,7 @@ limitations under the License. -->
         @change="changeField('instance', $event)"
       />
     </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
+    <div class="mr-10" v-if="dashboardStore.entity !== EntityType[2].value">
       <span class="grey mr-5">{{ t("endpoint") }}:</span>
       <Selector
         size="small"
@@ -46,7 +46,7 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
-    <div class="mr-5">
+    <div class="mr-10">
       <span class="grey mr-5">{{ t("status") }}:</span>
       <Selector
         size="small"
@@ -56,27 +56,29 @@ limitations under the License. -->
         @change="changeField('status', $event)"
       />
     </div>
-    <div class="mr-5">
+    <el-button
+      size="small"
+      type="primary"
+      @click="searchTraces"
+      class="search-btn"
+    >
+      {{ t("search") }}
+    </el-button>
+  </div>
+  <div class="flex-h row">
+    <div class="mr-10">
       <span class="grey mr-5">{{ t("traceID") }}:</span>
       <el-input size="small" v-model="traceId" class="traceId" />
     </div>
-  </div>
+    <div class="mr-10">
-  <div class="flex-h">
-    <div class="mr-5">
       <span class="sm b grey mr-5">{{ t("duration") }}:</span>
       <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
       <span class="grey mr-5">-</span>
       <el-input size="small" class="inputs" v-model="maxTraceDuration" />
     </div>
+  </div>
+  <div class="flex-h">
     <ConditionTags :type="'TRACE'" @update="updateTags" />
-    <el-button
-      class="search-btn"
-      size="small"
-      type="primary"
-      @click="searchTraces"
-    >
-      {{ t("search") }}
-    </el-button>
   </div>
 </template>
 <script lang="ts" setup>
@@ -237,6 +239,7 @@ watch(
 
 .row {
   margin-bottom: 5px;
+  position: relative;
 }
 
 .traceId {
@@ -244,7 +247,10 @@ watch(
 }
 
 .search-btn {
-  margin-left: 20px;
   cursor: pointer;
+  width: 120px;
+  position: absolute;
+  top: 0;
+  right: 10px;
 }
 </style>