🧑‍💻 结构化内容解析显示,便于调试

This commit is contained in:
BTMuli
2023-09-05 09:12:52 +08:00
parent 99712a325f
commit 47823e3f46
2 changed files with 10 additions and 5 deletions

View File

@@ -303,6 +303,7 @@ declare namespace TGApp.Plugins.Mys.Post {
/** /**
* @description 帖子结构化内容 * @description 帖子结构化内容
* @since Alpha v0.2.1 * @since Alpha v0.2.1
* @todo 重构
* @interface StructuredContent * @interface StructuredContent
* @property {string|object} insert 插入内容 * @property {string|object} insert 插入内容
* @property {string} insert.image 图片 URL * @property {string} insert.image 图片 URL

View File

@@ -4,6 +4,8 @@
<div class="post-json"> <div class="post-json">
<div class="post-title">帖子返回内容 JSON</div> <div class="post-title">帖子返回内容 JSON</div>
<JsonViewer :value="jsonData" copyable boxed /> <JsonViewer :value="jsonData" copyable boxed />
<div class="post-title">结构化内容解析</div>
<JsonViewer :value="parseData" copyable boxed />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -25,7 +27,8 @@ const loadingEmpty = ref<boolean>(false);
// 数据 // 数据
const postId = Number(useRoute().params.post_id); const postId = Number(useRoute().params.post_id);
let jsonData = reactive({}); let jsonData = reactive<TGApp.Plugins.Mys.Post.FullData>(<TGApp.Plugins.Mys.Post.FullData>{});
let parseData = reactive<TGApp.Plugins.Mys.Post.StructuredContent[]>([]);
onMounted(async () => { onMounted(async () => {
await appWindow.show(); await appWindow.show();
@@ -39,6 +42,7 @@ onMounted(async () => {
loadingTitle.value = "正在获取数据..."; loadingTitle.value = "正在获取数据...";
try { try {
jsonData = await Mys.Post.get(postId); jsonData = await Mys.Post.get(postId);
parseData = JSON.parse(jsonData.post.structured_content);
loading.value = false; loading.value = false;
} catch (e) { } catch (e) {
loadingTitle.value = "帖子不存在或解析失败"; loadingTitle.value = "帖子不存在或解析失败";
@@ -50,18 +54,18 @@ onMounted(async () => {
.post-json { .post-json {
padding: 20px; padding: 20px;
border-radius: 20px; border-radius: 20px;
font-family: Consolas, serif; font-family: var(--font-text);
} }
.post-title { .post-title {
margin: 20px 0; margin: 20px 0;
color: #546d8b; color: var(--common-text-title);
font-family: Genshin-Light, serif; font-family: var(--font-title);
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
} }
.jv-container { .jv-container {
background: var(--content-bg-2) !important; background: var(--box-bg-2) !important;
} }
</style> </style>