feat(fake-server): 模拟 XML 数据并增强 API 页面解析功能

- 新增 XML 模拟数据路由，提供示例 XML 文档
- 在 API 页面中集成 XML 请求和解析功能
- 使用 Axios 请求 XML 数据，并通过 DOMParser 解析
- 展示 XML 字符串和解析后的结果

src/pages/Page/API.page.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import axios from 'axios';
+
 const baseURL = '/fake-api';
 
 let fakeApiResult = $ref<null | Record<string, unknown>>(null);
@@ -9,6 +11,40 @@ onMounted(() => {
     .then((json) => (fakeApiResult = json));
 });
 
+// 使用 axios 请求 XML，并演示以文本获取后用 DOMParser 解析
+// 选择此方式的原因：可控性更强，便于处理编码、容错与字段抽取策略
+let xmlText = $ref<string | null>(null);
+let xmlParsed = $ref<Record<string, string> | null>(null);
+
+onMounted(async () => {
+  try {
+    const res = await axios.get<string>(`${baseURL}/xml/sample`, {
+      responseType: 'text',
+      headers: { Accept: 'application/xml' },
+      transformResponse: [(data: string) => data],
+    });
+    xmlText = res.data;
+
+    // 将 XML 字符串解析为 Document，再选择性抽取业务所需字段
+    const doc = new DOMParser().parseFromString(res.data, 'application/xml');
+    const pick = (selector: string) => doc.querySelector(selector)?.textContent?.trim() ?? '';
+    xmlParsed = {
+      to: pick('to'),
+      from: pick('from'),
+      heading: pick('heading'),
+      body: pick('body'),
+      id: pick('meta > id'),
+      createdAt: pick('meta > createdAt'),
+    };
+
+    // 备用方案：直接请求为 Document（部分运行环境可能不支持）
+    // const docRes = await axios.get<Document>(`${baseURL}/xml/sample`, { responseType: 'document' });
+    // console.log('Document:', docRes.data);
+  } catch (error) {
+    console.error('XML 请求失败: ', error);
+  }
+});
+
 /* fetch('https://jsonplaceholder.typicode.com/posts/1')
   .then((response) => response.json())
   .then((json) => console.log(json)); */
@@ -22,6 +58,11 @@ onMounted(() => {
 <template>
   <pre>{{ JSON.stringify(fakeApiResult, null, 2) }}</pre>
   <!-- <div>{{ npmRegistryApiResult?.['_id'] }}</div> -->
+  <h3>XML 字符串</h3>
+  <pre class="break-all whitespace-pre-wrap">{{ xmlText }}</pre>
+
+  <h3>解析后的结果</h3>
+  <pre>{{ xmlParsed }}</pre>
 </template>
 
 <style scoped></style>