style: 标签排版

src/views/home/agent/components/Item.vue

@@ -52,8 +52,22 @@
 						</div>
 					</div>
 				</div> -->
-				<div class="message-txt markdown-body flex flex-col">
+				<div class="message-txt markdown-body">
+					<span
+						v-if="parameterTags.length > 0"
+						class="message-parameter-tags"
+					>
+						<span
+							v-for="tag in parameterTags"
+							:key="`${tag.kind}-${tag.label}`"
+							class="message-parameter-tag"
+						>
+							<img :src="getParameterTagIcon(tag.kind)" class="parameter-tag-icon" />
+							<span>{{ tag.label }}</span>
+						</span>
+					</span>
 					<VueMarkdown
+						class="message-markdown"
 						:custom-attrs="customAttrs"
 						:markdown="content.text"
 						:rehype-plugins="[rehypeRaw]"
@@ -68,19 +82,6 @@
 							<Sketch @click="handleClickSketch" />
 						</template>
 					</VueMarkdown>
-					<div
-						v-if="parameterTags.length > 0"
-						class="message-parameter-tags flex align-center"
-					>
-						<div
-							v-for="tag in parameterTags"
-							:key="`${tag.kind}-${tag.label}`"
-							class="message-parameter-tag flex align-center"
-						>
-							<img :src="getParameterTagIcon(tag.kind)" class="parameter-tag-icon" />
-							<span>{{ tag.label }}</span>
-						</div>
-					</div>
 					<div
 						class="web-address flex align-center"
 						v-show="content.webAddress?.length > 0"
@@ -382,15 +383,16 @@
 				max-width: 82%;
 			}
 			.message-parameter-tags {
-				flex-wrap: wrap;
-				justify-content: flex-start;
-				gap: 0.8rem;
-				margin-top: 0.8rem;
+				display: inline;
 			}
 			.message-parameter-tag {
+				display: inline-flex;
+				align-items: center;
+				vertical-align: middle;
 				height: 3rem;
 				max-width: 24rem;
 				padding: 0 1rem;
+				margin: 0 0.8rem 0.4rem 0;
 				border: 0.1rem solid #0000001a;
 				border-radius: 2.2rem;
 				column-gap: 0.8rem;
@@ -509,6 +511,17 @@
 	.message-txt {
 		user-select: text;
 
+		.message-markdown,
+		> div:not(.web-address) {
+			display: inline;
+		}
+
+		.message-markdown > p:first-child,
+		> div:not(.web-address) > p:first-child {
+			display: inline;
+			margin-top: 0;
+		}
+
 		ul {
 			list-style-position: inside;
 		}