feat: 组件的调试

2026-05-22 11:58:49 +08:00
parent e605d68d59
commit 1a331d2ae2
2 changed files with 155 additions and 19 deletions
--- a/src/pages/ChatMain/ChatLongAnswer/ParsedValueView.vue
+++ b/src/pages/ChatMain/ChatLongAnswer/ParsedValueView.vue
@@ -0,0 +1,143 @@
+<template>
+  <view class="parsed-value">
+    <template v-if="isIgnoredField"></template>
+    <template v-else-if="isContentBody">
+      <template v-for="entry in renderContentBodyEntries" :key="entry.key">
+        <view v-if="entry.type === 'text'" class="content-body-text">
+          {{ entry.value }}
+        </view>
+        <view v-else-if="entry.type === 'list'" class="content-body-list-card">
+          <view
+            v-for="(item, index) in entry.value"
+            :key="index"
+            class="content-body-list-item"
+          >
+            <view class="content-body-list-text">
+              {{ formatLeafValue(item) }}
+            </view>
+          </view>
+        </view>
+      </template>
+    </template>
+  </view>
+</template>
+
+<script setup>
+import { computed, defineProps } from "vue";
+
+const props = defineProps({
+  fieldKey: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: [Object, Array, String, Number, Boolean],
+    default: null,
+  },
+});
+
+const CONTENT_BODY_KEY = "content_body";
+const HIDDEN_CONTENT_BODY_KEYS = ["container_type"];
+const IGNORED_FIELD_KEYS = ["container_type"];
+
+const isArrayValue = (value) => Array.isArray(value);
+
+const isObjectValue = (value) => {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+};
+
+const sanitizeValue = (value) => {
+  if (isArrayValue(value)) {
+    return value.map((item) => sanitizeValue(item));
+  }
+  if (isObjectValue(value)) {
+    return Object.keys(value).reduce((result, key) => {
+      if (HIDDEN_CONTENT_BODY_KEYS.includes(key)) return result;
+      result[key] = sanitizeValue(value[key]);
+      return result;
+    }, {});
+  }
+  return value;
+};
+
+const formatLeafValue = (value) => {
+  if (value === undefined || value === null) return "";
+  if (typeof value === "boolean") return value ? "是" : "否";
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(sanitizeValue(value));
+    } catch (e) {
+      return String(value);
+    }
+  }
+  return String(value);
+};
+
+const isContentBody = computed(() => props.fieldKey === CONTENT_BODY_KEY);
+const isIgnoredField = computed(() => IGNORED_FIELD_KEYS.includes(props.fieldKey));
+
+const renderContentBodyEntries = computed(() => {
+  if (!isContentBody.value || !isObjectValue(props.value)) return [];
+
+  return Object.keys(props.value)
+    .filter((key) => !HIDDEN_CONTENT_BODY_KEYS.includes(key))
+    .map((key) => {
+      const value = props.value[key];
+      if (isArrayValue(value)) {
+        return {
+          key,
+          type: "list",
+          value: value.filter((item) => formatLeafValue(item)),
+        };
+      }
+      return {
+        key,
+        type: "text",
+        value: formatLeafValue(value),
+      };
+    })
+    .filter((entry) => {
+      if (entry.type === "list") return entry.value.length > 0;
+      return !!entry.value;
+    });
+});
+
+</script>
+
+<style scoped lang="scss">
+.parsed-value {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.content-body-text {
+  color: #111827;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.content-body-list-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  border-left: 4px solid $theme-color-500;
+  border-radius: 12px;
+  background: rgba($theme-color-500, 0.08);
+}
+
+.content-body-list-item {
+  display: flex;
+  align-items: flex-start;
+}
+
+.content-body-list-text {
+  flex: 1;
+  color: $theme-color-800;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 20px;
+}
+</style>