<template>
  <div>
    <pre>{{ formattedJson }}</pre>
  </div>
</template>

<script setup>
import { computed } from 'vue';

// 示例JSON字符串（雙重編碼）模擬后端返回的數(shù)據(jù)
let str = '"[{\\"BusinessDate\\":\\"2025-09-11\\",\\"OtherID\\":null,\\"TransOutLines\\":[{\\"ItemInfo\\":{\\"ItemCode\\":\\"109-02-00001\\"},\\"StoreUOMQty\\":1.0000}]}]"';

// 格式化JSON字符串
const formattedJson = computed(() => {
  try {
    // 處理雙重編碼的JSON字符串
    const parsedString = JSON.parse(str);
    const parsedJson = JSON.parse(parsedString);
    return JSON.stringify(parsedJson, null, 2);
  } catch (error) {
    console.error('JSON解析錯(cuò)誤:', error);
    return 'JSON格式錯(cuò)誤';
  }
});
</script>

<style scoped lang="scss">
pre {
  background-color: #f8f8f8;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  padding: 16px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  color: #333;
  margin: 0;
}
</style>

// 第一次解析：解析外層字符串
const parsedString = JSON.parse(str);
// 第二次解析：解析內(nèi)層JSON
const parsedJson = JSON.parse(parsedString);

JSON.stringify(parsedJson, null, 2)

pre {
  white-space: pre;           // 保留所有空格和換行符
  font-family: monospace;     // 使用等寬字體
  overflow-x: auto;           // 水平滾動(dòng)條
  background-color: #f8f8f8;  // 背景色區(qū)分
}

try {
  // 根據(jù)實(shí)際情況調(diào)整解析次數(shù)
  let result = JSON.parse(str);
  if (typeof result === 'string') {
    result = JSON.parse(result);
  }
  return JSON.stringify(result, null, 2);
} catch (error) {
  console.error('解析錯(cuò)誤:', error);
  return '數(shù)據(jù)格式錯(cuò)誤';
}

pre {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: auto;
}