搜索结果列表页面开发

src/components/Setting/WebHookLog/LogItem.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { convertRgbaColor } from '@/utils/color';
+
+defineProps<{
+  log: Record<string, any>;
+}>();
+
+const successColor = '#0EB07B';
+const failColor = '#F2050D';
+
+const getColorByCode = (code: string) => {
+  if (Number(code) < 300) {
+    return {
+      color: successColor,
+      bgColor: convertRgbaColor(successColor, 0.1)[0]
+    };
+  }
+  return {
+    color: failColor,
+    bgColor: convertRgbaColor(failColor, 0.1)[0]
+  };
+};
+
+</script>
+
+<template>
+  <div class="log-item">
+    <div class="flex-1 flex items-center">
+      <div class="log-tag log-item-tag" :style="{background:  getColorByCode(log.response_status).bgColor, color: getColorByCode(log.response_status).color}">{{ log.response_status }}</div>
+      <d-popover :content="log.uuid" trigger="hover">
+        <div class="log-item-label">{{ log.uuid }}</div>
+      </d-popover>
+      <div class="log-tag log-item-event">{{ log.trigger  }}</div>
+    </div>
+    <div class="text-CG500 text-[14px]">
+      {{ log.created_at }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+.log-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 24px;
+}
+.log-tag {
+  @apply box-border rounded-[3px] text-[12px] h-[18px] leading-[18px] text-center;
+}
+.log-item-tag {
+  max-width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0px 4px;
+  width: auto!important;
+}
+.log-item-label {
+  color: var(--color-G900);
+  margin: 0 16px;
+  width:  260px;
+  @apply truncate text-[14px];
+}
+.log-item-event {
+  background-color: var(--color-CG200);
+  color: var(--color-G900);
+  @apply  px-[5px];
+}
+</style>