diff --git a/components/mdx/Image.tsx b/components/mdx/Image.tsx
index fcf68c4..ec5a535 100644
--- a/components/mdx/Image.tsx
+++ b/components/mdx/Image.tsx
@@ -3,10 +3,15 @@ import NextImage, { ImageProps } from 'next/image';
 interface Props extends ImageProps {}
 
 const Image = ({ alt, ...rest }: Props) => {
+  const supportImg = ['jpeg', 'png', 'webp', 'avif'];
+  const placeholder = supportImg.includes((rest.src as { src: string }).src)
+    ? 'blur'
+    : 'empty';
+
   return (
     <>
       <span className="block text-center">
-        <NextImage alt={alt} placeholder="blur" {...rest} />
+        <NextImage alt={alt} placeholder={placeholder} {...rest} />
         {alt && <span className="block text-center text-gray-400">{alt}</span>}
       </span>
     </>
diff --git a/next.config.mjs b/next.config.mjs
index 9713e69..c545a9e 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -14,7 +14,10 @@ const composedConfig = composePlugins([
     extension: /\.mdx?$/,
     options: {
       remarkPlugins: [remarkFrontmatter, remarkGfm],
-      rehypePlugins: [rehypePrism, rehypeSlug],
+      rehypePlugins: [
+        [rehypePrism, { alias: { vue: 'xml' }, ignoreMissing: true }],
+        rehypeSlug,
+      ],
       providerImportSource: '@mdx-js/react',
     },
   }),
diff --git a/pages/p/create-a-mini-router-for-react.mdx b/pages/p/create-a-mini-router-for-react.mdx
new file mode 100644
index 0000000..2bbdb9e
--- /dev/null
+++ b/pages/p/create-a-mini-router-for-react.mdx
@@ -0,0 +1,328 @@
+---
+title: 现代前端的Web应用路由-为React打造一个迷你路由器
+date: '2022-08-03'
+tags: [JavaScript, React]
+---
+
+import Layout from 'layouts/MDXLayout';
+import Image from 'components/mdx/Image';
+import image1 from 'public/images/p/create-a-mini-router-for-react/router.webp';
+import image2 from 'public/images/p/create-a-mini-router-for-react/Web架构.svg';
+import image3 from 'public/images/p/create-a-mini-router-for-react/迷你路由器.svg';
+import image4 from 'public/images/p/create-a-mini-router-for-react/image-20210823154009498.webp';
+
+export const meta = {
+  title: '现代前端的Web应用路由-为React打造一个迷你路由器',
+  date: '2022-08-03',
+  tags: ['JavaScript', 'React'],
+};
+
+export default ({ children }) => <Layout {...meta}>{children}</Layout>;
+
+路由不仅仅只是网络的代名词，它更像是一种表达路径的概念。与网络中的路由相似，前端中的页面路由也是带领我们前往指定的地方。
+
+<Image src={image1} placeholder="" priority />
+
+## 现代前端的 Web 应用路由
+
+时代在变迁，过去，Web 应用的基本架构使用了一种不同于现代路由的方法。曾经的架构通常都是由后端生成的 HTML 模板来发送给浏览器。当我们单击一个标签导航到另一个页面时，浏览器会发送一个新的请求给服务器，然后服务器再将对应的页面渲染好发过来。也就是说，每个请求都会刷新页面。
+
+自那时起，Web 服务器在设计和构造方面经历了很多发展（前端也是）。如今，JavaScript 框架和浏览器技术已经足够先进，允许我们利用 JavaScript 在客户端渲染 HTML 页面，以至于 Web 应用可以采用更独特的前后的分离机制。在第一次由服务端下发了对应的 JavaScript 代码后，后续的工作就全部交给客户端 JavaScript。而后端服务器负责发送原始数据，通常是 JSON 等。
+
+<Image src={image2} alt="Web架构" />
+
+在旧架构中，动态内容由 Web 服务器生成，服务器会在数据库中获取数据，并利用数据渲染 HTML 模板发送给浏览器。每次切换页面都会获取新的由服务端渲染的页面发送给浏览器。
+
+在新架构中，服务端通常只下发主要的 JavaScript 和基本的 HTML 框架。之后页面的渲染就会由我们的 JavaScript 接管，后续的动态内容也还是由服务器在数据库中获取，但不同的是，后续数据由服务器发送原始格式（JSON 等）。前端 JavaScript 由 AJAX 等技术获取到了新数据，再在客户端完成新的 HTML 渲染。
+
+好像 SPA 的大概就是将原先服务端干的活交给了前端的 JavaScript 来做。事实上，确实如此。AJAX 技术的发展，带动了客户端 JavaScript 崛起，使得原先需要在服务端才能完成渲染的动态内容，现在交给 JavaScript 就可以了。
+
+这么做的好处有很多：
+
+- 主要渲染工作在客户端，减少服务器的压力。简单的场景甚至只需要静态服务器。
+- 新内容获取只需要少量交互，而不是服务端发送渲染好的 HTML 页面。
+- 可以利用 JavaScript 在客户端修改和渲染任意内容，同时无需刷新整个页面。
+- ……
+
+当然同时也有一些缺点，目前最主要的痛点：
+
+- 首屏/白屏时间：由于 HTML 内容需要客户端 JavaScript 完成渲染，前端架构以及多种因素会影响首次内容的出现时间。
+- 爬虫/SEO：由于 HTML 内容需要客户端 JavaScript 完成渲染，早期的爬虫可能不会在浏览器环境下执行 JavaScript，这就导致了根本爬取不到 HTML 内容。
+
+> Google 的爬虫貌似已经可以爬取 SPA。
+
+## React 的路由
+
+React 是现代众多成熟的 SPA 应用框架之一，它自然也需要使用路由来切换对应的组件。React Router 是一个成熟的 React 路由组件库，它实现了许多功能，同时也非常还用。
+
+首先来看下本次路由的基本工作原理，本质上很简单，我们需要一个可以渲染任意组件的父组件 `<Router />` 或者叫 `<router-view>` 之类的。然后再根据浏览器地址的变化，渲染注册路由时对应的组件即可。
+
+<Image src={image3} alt="迷你路由器" />
+
+### 配置文件
+
+这里选择类似 Vue Router 的配置文件风格，而不是使用类似 `<Route />` 这样的 DOM 结构来注册路由。我们的目的是为了实现一个非常简单的迷你路由器，所以配置文件自然也就很简单：
+
+```ts
+import { lazy } from 'react';
+
+export default [
+  {
+    path: '/',
+    component: lazy(() => import('../pages/Home')),
+  },
+  {
+    path: '/about',
+    component: lazy(() => import('../pages/About')),
+  },
+];
+```
+
+一个 `path` 属性，对应了浏览器的地址，或者说 `location.pathname`；一个 `component` 属性，对应了到该地址时所需要渲染的组件。
+
+甚至还可以使用 `lazy()` 配合 `<Suspense>` 来实现代码分割。
+
+### 展示路由
+
+一个非常简单的路由就这样注册好了，接下来就是将对应的组件展示出来。我们都知道，JSX 最终会被 babel 转义为渲染函数，而一个组件的 `<Home />` 写法，基本等同于 `React.createElement(Home)`。[元素渲染 – React (reactjs.org)](https://zh-hans.reactjs.org/docs/rendering-elements.html#updating-the-rendered-element)
+
+所以动态的渲染指定的组件基本上也就很容易解决，接下来的思路也就很简单了，我们需要：
+
+- 一个状态：记录当前地址 `location.pathname`；
+- 根据当前地址在配置文件中寻找对应注册的组件，并将它渲染出来；
+- 一个副作用：当用户手动切换路由时，该组件需要重新渲染为对应注册的路由；
+
+先不考虑切换路由的问题，前两个基本上已经就实现了：
+
+```tsx
+// Router.tsx
+import React, { useState, Suspense } from 'react';
+import routes from './routes';
+
+const Router: React.FC = () => {
+  // 获取地址，并保存到状态中
+  const [path, setPath] = useState(location.pathname);
+  // 根据地址，寻找对应的组件
+  const element = routes.find((route) => route.path === path)?.component;
+
+  return (
+    <>
+      <Suspense fallback={<p>loading...</p>}>
+        {/* 使用 React.createElement() 渲染组件 */}
+        {element ? React.createElement(element) : void 0}
+      </Suspense>
+    </>
+  );
+};
+
+export default Router;
+```
+
+看上去很简单，事实上，确实很简单。
+
+现在我们直接从地址栏访问对应的路由，我们的 Router 组件应该就可以根据已经注册好的路由配置文件来找到正确的组件，并将其渲染出来了。
+
+<Image src={image4} alt="image-20210823154009498" />
+
+### 切换路由
+
+到目前为止，我们实现了根据对应地址访问到对应组件的功能。这是一个路由必不可少的功能，但它还不能称得上是一个简单的路由器，因为它还无法处理用户手动切换的路由，也就是点击标签前往对应的页面。
+
+简单梳理一下我们需要实现的功能：
+
+- 一个 Link 组件，用于点击后导航到指定的地址；
+- 导航到地址后，还要修改浏览器的地址栏，并不真正的发送请求；
+- 通知 Router 组件，地址已经改变，重新渲染对应路由的组件；
+
+```tsx
+import React from 'react';
+
+interface Props {
+  to: string;
+  children?: React.ReactNode;
+}
+
+const RouterLink: React.FC<Props> = ({ to, children }: Props) => {
+  /**
+   * 处理点击事件
+   * 创建自定义事件监听器
+   * 并将 path 发送给 router
+   * @param e
+   */
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    e.preventDefault();
+    const nowPath = location.pathname;
+    if (nowPath === to) return; // 原地跳转
+
+    history.pushState(null, '', to);
+    document.dispatchEvent(
+      new CustomEvent<string>('route', {
+        detail: to,
+      })
+    );
+  };
+
+  return (
+    <>
+      <a href="" onClick={handleClick}>
+        {children}
+      </a>
+    </>
+  );
+};
+
+export default RouterLink;
+```
+
+我们将 Link 组件实际的渲染为一个 `<a></a>` 标签，这样就能模拟跳转到指定的导航了。这个组件它接收两个参数：`{ to, children }`，分别是前往的路由地址和标签的内容。标签的内容 children 就是展示在 a 标签内的文本。
+
+我们需要解决的第一个问题就是点击标签后跳转到指定的导航，这里其实需要分成两个部分，第一个部分是悄悄的修改浏览器地址栏，第二个部分则是通知 Router 组件去渲染对应的组件。
+
+修改地址栏很简单，利用到浏览器的 history API，可以很方便的修改 `pathName` 而不发送实际请求，这里只需要修改到第一个参数 to 即可：`history.pushState(null, '', to);`。
+
+但使用 `pushState()` 并不会发出任何通知，我们需要自己实现去通知 Router 组件地址已经变化。本来像利用第三方库来实现一个 发布/订阅 的模型的，但这样这个路由器可能就没有那么迷你了。最后发现利用 HTML 的 CustomEvent 可以实现一个简单的消息订阅与发布模型。
+
+HTML 自定义事件也很简单，我们在对应的 DOM 上 `dispatchEvent` 即可触发一个事件，而触发的这个事件，就是 `CustomEvent` 的实例，甚至还能传递一些信息。在这里，我们将路由地址传递过去。
+
+```ts
+document.dispatchEvent(
+  new CustomEvent<string>('route', {
+    detail: to,
+  })
+);
+```
+
+而在 Router 组件中，只需要和以前一样在对应的 DOM 上去监听一个事件，这个事件就是刚刚发布的 `CustomEvent` 的实例。
+
+```ts
+//  Router.tsx
+const handleRoute = (e: CustomEvent<string>) => {
+  console.log(e.detail);
+  setPath(e.detail);
+};
+
+useEffect(() => {
+  /**
+   * 监听自定义 route 事件
+   * 并根据 path 修改路由
+   */
+  document.addEventListener('route', handleRoute as EventListener);
+
+  return () => {
+    // 清除副作用
+    document.removeEventListener('route', handleRoute as EventListener);
+  };
+}, []);
+```
+
+在 Router 组件中，根据接收到的变化，将新的地址保存到状态中，并触发组件重新渲染。
+
+这样一个最简单的 React 路由就做好了。
+
+## Vue 的路由
+
+与 React 同理，二者的路由切换都差不多，其主要思路还是使用自定义事件来订阅路由切换的请求。但 Vue 的具体实现与 React 还是有点不同的。
+
+### 配置文件
+
+路由的配置文件还是同理，不同的是，Vue 的异步组件需要在引入时同时引入一个 Loading 组件来实现 Loading 的效果：
+
+```ts
+import { defineAsyncComponent } from 'vue';
+import Loading from '../components/common/Loading.vue';
+
+export default [
+  {
+    path: '/',
+    name: 'Home',
+    component: defineAsyncComponent({
+      loader: () => import('../views/Home.vue'),
+      loadingComponent: Loading,
+    }),
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: defineAsyncComponent({
+      loader: () => import('../views/About.vue'),
+      loadingComponent: Loading,
+    }),
+  },
+];
+```
+
+### 展示路由
+
+同理，Vue 也是利用根据条件来渲染对应路由的组件。不同的是，我们可以使用模板语法来实现，也可以利用 `render()` 方法来直接渲染组件。
+
+首先来看看和 React 类似的 `render()` 方法。在 Vue3 中，使用 `setup()` 方法后，可以直接返回一个 `createVNode()` 的函数，这就是 `render()` 方法。所以可以直接写 TypeScript 文件。
+
+与 React 不同的地方在于，React 每次调用 `setPath(e.detail)` 存储状态时都会重新渲染组件，从而重新执行组件的函数，获取到对应的路由组件。
+
+但 Vue 不同，如果我们仅仅将路由名称 `e.detail` 保存到状态，但没有实际在 VNode 中使用的话，更新状态时不会重新渲染组件的，也就是说，不会获取到对应的路由组件。所以最佳的办法就是将整个路由组件保存到状态，可保存整个组件无疑太过庞大。好在 Vue3 给了我们另一种解决方法：`shallowRef()`。它会创建一个跟踪自身 `.value` 变化的 ref，但不会使其值也变成响应式的。
+
+```ts
+import { createVNode, defineComponent, shallowRef } from 'vue';
+import routes from './routes';
+
+export default defineComponent({
+  name: 'RouterView',
+  setup() {
+    let currentPath = window.location.pathname;
+    const component = shallowRef(
+      routes.find((item) => item.path === currentPath)?.component ??
+        'Note found'
+    );
+
+    const handleEvent = (e: CustomEvent<string>) => {
+      console.log(e.detail);
+      currentPath = e.detail;
+      component.value =
+        routes.find((item) => item.path === currentPath)?.component ??
+        'Note found';
+    };
+
+    document.addEventListener('route', handleEvent as EventListener);
+
+    return () => createVNode(component.value);
+  },
+});
+```
+
+而使用模板语法主要是利用到了全局的 `component` 组件，其他部分与 `render()` 方法相同：
+
+```vue
+<template>
+  <component :is="component"></component>
+</template>
+
+<script lang="ts" setup>
+import { onUpdated, shallowRef } from 'vue';
+import routes from './routes';
+
+let currentPath = window.location.pathname;
+const component = shallowRef(
+  routes.find((item) => item.path === currentPath)?.component
+);
+
+const handleEvent = (e: CustomEvent<string>) => {
+  console.log(e.detail);
+  currentPath = e.detail;
+  component.value = routes.find((item) => item.path === currentPath)?.component;
+};
+
+document.addEventListener('route', handleEvent as EventListener);
+
+onUpdated(() => {
+  console.log(component);
+});
+</script>
+```
+
+## 总结
+
+如今的 JavaScript 做能做到的比以前更加强大，配合多种 HTML API，可以将曾经不可能实现的事变为现实。这个简单的迷你路由，主要的思路就是利用 HTML API 来通知 Router 组件该渲染哪个组件了。配合上 `lazy()` 方法，甚至还能实现代码分割。
+
+## Demo
+
+[DefectingCat/react-tiny-router: A tiny react router. (github.com)](https://github.com/DefectingCat/react-tiny-router)
diff --git a/public/images/p/create-a-mini-router-for-react/Web架构.drawio b/public/images/p/create-a-mini-router-for-react/Web架构.drawio
new file mode 100644
index 0000000..3657574
--- /dev/null
+++ b/public/images/p/create-a-mini-router-for-react/Web架构.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2021-08-23T03:10:20.595Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.6.13 Chrome/89.0.4389.128 Electron/12.0.7 Safari/537.36" etag="3TGQTE9oRjaT-yreGNVk" version="14.6.13" type="device"><diagram id="dEYAjTxxdtpzwiRtR6KX" name="第 1 页">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</diagram></mxfile>
\ No newline at end of file
diff --git a/public/images/p/create-a-mini-router-for-react/Web架构.svg b/public/images/p/create-a-mini-router-for-react/Web架构.svg
new file mode 100644
index 0000000..52397fa
--- /dev/null
+++ b/public/images/p/create-a-mini-router-for-react/Web架构.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="732px" height="462px" viewBox="-0.5 -0.5 732 462" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2021-08-23T03:10:26.652Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.6.13 Chrome/89.0.4389.128 Electron/12.0.7 Safari/537.36&quot; etag=&quot;_24dYSl18MFaUG401G52&quot; version=&quot;14.6.13&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;dEYAjTxxdtpzwiRtR6KX&quot; name=&quot;第 1 页&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><rect x="80" y="40" width="160" height="90" rx="13.5" ry="13.5" fill="none" stroke="none" pointer-events="all"/><path d="M 94.07 39.06 L 224.99 38.6 L 233.87 41.53 L 239.31 45.14 L 239.29 53.14 L 238.89 115.36 L 237.52 122.78 L 235.91 127.43 L 226.91 129.37 L 93.73 128.48 L 86.94 129.64 L 80.58 123.77 L 81.1 116.56 L 81.89 51.59 L 82.47 43.27 L 88.49 39.68 L 92.05 39.53" fill="#ffffff" stroke="none" pointer-events="all"/><path d="M 91.95 39.01 M 92.01 41.96 C 138.81 42.38 184.51 40.86 226.96 40.23 M 92.84 39.36 C 145.06 40.45 198.21 41.69 226.19 40.35 M 226.5 40 C 235.75 38.25 240.68 43.47 240.5 53.78 M 226.27 41.4 C 234.74 37.85 238.04 44.85 238.15 53.58 M 241.9 54.22 C 240.36 68.54 241.2 85.92 240.1 115.6 M 240.12 53.32 C 241.44 78.29 240.65 100.8 239.56 116.25 M 240 116.5 C 240.21 126.16 233.81 131.78 225.44 131.25 M 238.52 117.73 C 242.27 123.97 235.86 132.18 225.4 131.44 M 225.95 130.38 C 181.76 131.34 133.01 129.47 94.99 130.23 M 227.03 130.63 C 188.79 129.28 151.18 130.3 93.44 130.66 M 93.5 130 C 82.94 130.22 81.28 126.84 78.2 116.63 M 92.82 131.81 C 85.57 131.21 80.26 123.72 80.08 115.97 M 79.3 116.91 C 80.43 96.78 81.31 77.25 81.02 52.32 M 79.44 116.63 C 79.99 99.73 79.64 83.14 79.54 53.06 M 80 53.5 C 78.9 43.84 83.31 38.83 94.49 40.58 M 80.63 52.54 C 81.34 43 84.77 37.84 94.85 41.84" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 85px; margin-left: 81px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">客户端（浏览器）<br />- HTML，CSS，JS<br />- 每个请求都刷新页面</div></div></div></foreignObject><text x="160" y="89" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">客户端（浏览器）- HTML，CSS，JS...</text></switch></g><rect x="350" y="196" width="120" height="60" rx="9" ry="9" fill="none" stroke="none" pointer-events="all"/><path d="M 359.57 195.4 L 465.83 198.02 L 465.86 199.56 L 470.37 206.31 L 469 251.78 L 469.03 253.04 L 461.96 256.92 L 356.94 257.29 L 351.54 252.74 L 348.4 247.97 L 348.51 206.05 L 351.28 198.37 L 358.55 195.6" fill="#ffffff" stroke="none" pointer-events="all"/><path d="M 360.93 196.35 M 357.23 195.68 C 381.95 196.44 402.93 194.83 460.33 197.5 M 359.27 195.13 C 383.7 194.66 407.97 195.63 460.15 196.53 M 461 196 C 466.53 194.13 471.31 199.28 470.48 204.03 M 461.9 194.93 C 464.78 196.89 470.31 200.1 470.71 207.29 M 469.52 206.21 C 469.3 216.86 469.46 228.03 469.45 248.71 M 469.49 205.62 C 470.45 218.69 470.09 231.42 469.52 247.57 M 470 247 C 468.29 252.17 466.34 254.76 460.12 255.61 M 471.38 246.73 C 470.8 251.73 465.02 256.32 463.14 256.9 M 460.38 254.32 C 430.61 257.14 405.88 256.28 359.83 254.46 M 460.93 255.24 C 438.55 256.84 415.12 256.85 358.97 256.03 M 359 256 C 353.5 256.3 348.29 254.46 348.37 245.41 M 358.09 254.91 C 351.63 256.84 347.94 255.28 349.76 249.14 M 351.73 247.82 C 349.87 233.89 350.3 221.13 350.05 206.64 M 349.13 246.38 C 349.37 236.36 351.27 224.73 349.84 204.12 M 350 205 C 349.08 198.25 353.91 196.02 360.79 194.74 M 349.18 206.47 C 349.73 199.63 352.14 196.28 357.15 195" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 226px; margin-left: 351px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">服务器</div></div></div></foreignObject><text x="410" y="230" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">服务器</text></switch></g><rect x="600" y="40" width="90" height="35" rx="5.25" ry="5.25" fill="none" stroke="none" pointer-events="all"/><path d="M 605.82 39.74 L 686.35 40.65 L 691.07 44.24 L 689.21 70.79 L 684.58 73.05 L 602.63 74.39 L 598.5 69.53 L 598.58 45.63 L 599.48 39.93 L 605.82 39.45" fill="#ffffff" stroke="none" pointer-events="all"/><path d="M 604.6 40.55 M 604.38 38.18 C 626.08 42.34 647.48 42.4 686.37 40.81 M 604.28 39.87 C 622.19 39.28 638.65 39.59 684.42 40.48 M 684.75 40 C 688.43 39.99 690.08 41.85 690.83 46.75 M 683.04 39.34 C 687 39.77 688.2 43.09 690.91 47.51 M 689.3 45.11 C 688.9 53.01 691.53 63.6 688.97 68.84 M 689.9 45.74 C 690.16 52.99 689.37 60.79 689.1 70.7 M 690 69.75 C 690 72.23 688.76 76.34 683.45 75.1 M 692 69.34 C 688.15 71.6 687.83 74.96 683.24 75.68 M 685.89 73.26 C 656.55 76.1 632.13 76.75 606.76 73.66 M 684.47 75.85 C 655.83 76.43 625.02 74.69 604.35 75.93 M 605.25 75 C 602.89 75.05 599.28 74.17 599 67.92 M 604.91 74.55 C 602.78 76.43 598.06 73.81 601.46 70.85 M 601.23 68.88 C 598.68 60.8 600.56 53.21 599.93 45.96 M 600.04 70.58 C 600.51 63.14 600.19 57.05 600.42 45.6 M 600 45.25 C 601.06 39.9 603.05 41.79 605.95 41.64 M 600.68 46.48 C 599.73 42.79 600.92 39.8 604.56 38.97" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 58px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">数据库</div></div></div></foreignObject><text x="645" y="61" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">数据库</text></switch></g><rect x="600" y="120" width="90" height="35" rx="5.25" ry="5.25" fill="none" stroke="none" pointer-events="all"/><path d="M 605.82 120.08 L 688.75 119.5 L 690.03 125.92 L 688.37 152.23 L 684.85 154.26 L 601.02 154.82 L 600.04 148.4 L 599.29 124.16 L 602.36 119.56 L 603.99 121.94" fill="#ffffff" stroke="none" pointer-events="all"/><path d="M 605.44 120.06 M 603.92 118.44 C 626.57 120.6 650.05 121.78 685.76 121.95 M 605.58 120.07 C 626.87 119.09 649.79 120.29 683.83 119.84 M 684.75 120 C 688.41 119.04 691.87 120.88 691.14 125.28 M 684.85 119.66 C 688.83 119.22 689.95 121.05 687.76 127.32 M 691.83 124.7 C 691.1 133.03 689.82 141.61 688.42 150.71 M 690.13 124.5 C 688.97 135.85 689.48 145.56 690.72 149.03 M 690 149.75 C 690.45 152.92 690.22 156.54 685.89 155.09 M 690.88 149.31 C 691.65 151.38 690.42 155.23 683.7 152.71 M 684.12 153.23 C 663.33 157.35 640.74 154.06 604.9 154 M 684.08 154.29 C 657.66 155.91 630.51 155.76 605.52 155.61 M 605.25 155 C 603.34 153.25 598.6 155.03 600.68 148.27 M 606.21 155.69 C 601.18 156.18 601.77 151.02 597.74 151.61 M 601.74 149.81 C 599.12 144.14 599.7 137.85 598.13 125.84 M 599.02 149.39 C 600.55 144.33 599.44 139.35 599.7 124.57 M 600 125.25 C 600.18 121.36 600.67 121.35 604.51 121.95 M 599.58 124.97 C 598.41 123.81 601.03 117.91 604.93 118.81" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 138px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">模型</div></div></div></foreignObject><text x="645" y="141" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">模型</text></switch></g><rect x="600" y="202" width="90" height="35" rx="5.25" ry="5.25" fill="none" stroke="none" pointer-events="all"/><path d="M 605.82 202.42 L 687.16 200.36 L 689 205.6 L 691.54 235.67 L 685.12 237.46 L 603.41 237.24 L 601.59 233.26 L 599.99 208.69 L 601.23 205.19 L 606.17 202.43" fill="#ffffff" stroke="none" pointer-events="all"/><path d="M 606.28 201.57 M 603.46 200.69 C 631.06 202.44 652.62 200.76 685.15 201.08 M 604.88 202.27 C 633.55 202.5 660.93 202.58 685.24 201.19 M 684.75 202 C 688.39 200.1 689.65 201.91 691.46 205.8 M 686.65 201.98 C 686.07 200.66 691.7 205.61 689.22 209.13 M 690.36 206.29 C 688.8 215.05 691.62 225.62 691.88 230.58 M 690.37 207.27 C 690.27 213.81 690.09 220.53 690.33 231.36 M 690 231.75 C 690.89 235.61 687.68 238.74 684.33 237.09 M 689.76 231.29 C 690.55 233.17 688.41 237.49 684.16 236.35 M 686.36 235.21 C 666.11 235 649.34 235.79 607.03 236.34 M 685.7 236.72 C 659.49 237.39 636 236.83 604.7 237.29 M 605.25 237 C 599.8 237.45 601.93 233.9 598.36 230.61 M 603.51 238.84 C 599.58 237.94 600.88 234.84 598.63 229.77 M 598.25 232.74 C 600.04 224.57 599.33 214.68 600.32 207.73 M 600 232.2 C 600.59 222.62 600.69 213.85 600.98 207.54 M 600 207.25 C 599.3 204.83 602.29 202.9 607.07 200.26 M 598.47 205.46 C 601.68 202.22 601.15 202.61 605.3 200.65" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 220px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">控制器</div></div></div></foreignObject><text x="645" y="223" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">控制器</text></switch></g><rect x="601" y="289" width="90" height="35" rx="5.25" ry="5.25" fill="none" stroke="none" pointer-events="all"/><path d="M 606.82 289.76 L 686.57 290.22 L 692.96 294.28 L 691.7 320.11 L 686.39 325.67 L 602.81 324.67 L 600.13 319.13 L 601.69 294.22 L 601.11 291.82 L 605.34 287.92" fill="#ffffff" stroke="none" pointer-events="all"/><path d="M 608.11 288.07 M 607.99 287.94 C 632.55 287.7 656.2 287.14 685.54 289.21 M 607.18 289.47 C 623.32 289.31 641.27 290.28 685.64 289.54 M 685.75 289 C 689.37 290.15 692.44 291.94 692.77 295.32 M 685.46 289.29 C 688.9 287.11 689.86 290.58 691.67 295.95 M 689.88 292.89 C 691.99 302.06 690.92 310.64 692.33 319.46 M 691.61 295.03 C 690.08 301.68 691.21 310.31 690.95 318.68 M 691 318.75 C 692.34 323.3 690.14 325.94 683.76 324.09 M 689.64 318.26 C 690.45 324.55 687.4 324.76 685.62 324.98 M 685.6 322.18 C 653.99 323.25 627.15 324.1 606.16 323.68 M 686.32 324.16 C 664.32 323.87 642.48 324.91 606.87 323.97 M 606.25 324 C 601.25 322.65 602.26 321.76 601.04 317.95 M 605.81 322.98 C 603.59 324.69 600.98 323.66 600.51 317.53 M 599.75 320.67 C 601.47 314.91 599.47 310.32 599.52 294.61 M 601.98 318.01 C 601.14 310.81 600.45 303.16 601.27 293.51 M 601 294.25 C 599.42 289.29 600.91 289.46 606.63 287.57 M 602.37 294.95 C 601.36 290.24 602.26 287.72 606.67 287.49" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 307px; margin-left: 602px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">视图</div></div></div></foreignObject><text x="646" y="310" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">视图</text></switch></g><path d="M 600 125.75 L 580 126.08 Q 570 126.25 570 116.25 L 570 56.25 Q 570 46.25 580 46.08 L 593.63 45.86" fill="none" stroke="none" pointer-events="stroke"/><path d="M 598.88 45.77 L 591.94 49.38 L 593.63 45.86 L 591.82 42.39 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 600.57 127.19 M 599.39 125.1 C 596.61 127.01 589.42 125.55 581.85 124.3 M 600.28 126.13 C 595.61 125.87 591.56 125.03 580.56 125.37 M 580 126.08 C 572.77 125.14 571.71 121.35 568.29 117.07 M 579.41 124.65 C 574.32 127.04 568.9 124.92 568.24 117.52 M 571.96 117.67 C 568.35 95.44 567.97 77.92 569.25 57.26 M 569.55 116.82 C 569.65 101.2 569.23 84.91 570.65 56.38 M 570 56.25 C 571.82 50.44 572.24 46.17 581.02 46.02 M 568.54 56.48 C 568.07 48.58 571.21 46.91 580.53 45.03 M 579.1 44.96 C 584.06 45.38 586.58 44.89 592.56 45.73 M 580.23 45.98 C 583.5 46.62 585.53 46.41 593.43 46.53" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 591.62 42.62 C 591.62 42.62 591.62 42.62 591.62 42.62 M 591.62 42.62 C 591.62 42.62 591.62 42.62 591.62 42.62 M 594.07 45.94 C 594.36 45.64 594.77 44.87 595.15 44.33 M 593.94 46.08 C 594.46 45.48 594.99 45.02 595.37 44.41" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 597.28 43.88 M 598.59 45.51 C 597.12 46.55 595.1 47.57 592.48 48.62 M 599.08 45.76 C 597.07 47.09 594.31 48.05 591.66 49.42 M 591.77 49.02 C 592.62 48.02 593.06 46.78 593.37 45.54 M 591.77 49.23 C 592.55 47.95 593.21 46.8 593.7 45.83 M 593.85 45.75 C 593.3 44.46 592.29 42.84 591.69 42.76 M 593.67 45.69 C 593.1 44.61 592.22 43.01 591.69 42.49 M 591.3 42.16 C 593.89 43.09 595.66 44.29 599.37 45.05 M 592.2 42.42 C 594.1 43.68 597.24 44.89 599.09 45.72" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><rect x="607" y="81" width="80" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 91px; margin-left: 608px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">从数据库中获取数据</div></div></div></foreignObject><text x="647" y="95" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">从数据库中获取数据</text></switch></g><path d="M 600 211.5 L 580 211.83 Q 570 212 570 202 L 570 142 Q 570 132 580 131.83 L 593.63 131.61" fill="none" stroke="none" pointer-events="stroke"/><path d="M 598.88 131.52 L 591.94 135.13 L 593.63 131.61 L 591.82 128.14 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 601.59 211.63 M 598.21 210.36 C 595.35 211.48 586.46 211.37 578.57 212.39 M 599.72 212.2 C 593.06 211.48 583.59 211.07 580.42 212.48 M 580 211.83 C 574.3 212.92 570.64 206.75 569.3 200.23 M 581.99 212.67 C 571.21 210.93 569.45 207.88 570.94 200.97 M 569.82 202.85 C 570.25 182.05 568.81 167.37 568.09 140.81 M 569.33 201.37 C 570.61 178.53 569.56 155.65 570.67 141.95 M 570 142 C 570.18 136.58 571.85 133.47 580.68 130.35 M 568.66 140.19 C 568.48 135.09 573.96 133.79 578.88 130.98 M 579.67 132.47 C 584.26 132.54 588.26 131.08 594.06 131.42 M 579.61 131.36 C 583.81 132.37 587.2 131.83 593.73 131.23" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 592.09 127.83 C 592.09 127.83 592.09 127.83 592.09 127.83 M 592.09 127.83 C 592.09 127.83 592.09 127.83 592.09 127.83 M 593.53 132.11 C 594.6 131.29 594.84 130.72 595.89 129.82 M 593.76 131.91 C 594.33 131.4 594.81 130.8 595.83 129.72" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 597.19 130.37 M 599.54 131.16 C 596.17 132.38 592.87 134.59 591.61 134.57 M 599.01 131.23 C 597.04 132.75 594.81 133.79 591.68 134.78 M 591.9 135.24 C 592.69 134.36 592.65 133.14 593.54 131.79 M 591.84 135.19 C 592.38 134.07 592.71 133.07 593.52 131.47 M 593.68 131.67 C 592.79 130.36 592.15 128.98 591.6 128.11 M 593.5 131.5 C 592.92 130.2 592.2 128.98 591.65 128.16 M 591.97 127.55 C 593.4 128.34 595.8 130.22 598.44 131.26 M 591.64 128.34 C 594.5 129.78 597.36 130.81 598.63 131.66" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 600 312 L 580 312.33 Q 570 312.5 570 302.5 L 570 242.5 Q 570 232.5 580 232.33 L 593.63 232.11" fill="none" stroke="none" pointer-events="stroke"/><path d="M 598.88 232.02 L 591.94 235.63 L 593.63 232.11 L 591.82 228.64 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 601.59 312.47 M 599.89 310.02 C 594.39 312.12 590.86 310.1 578.99 310.43 M 599.16 312.51 C 593.29 311.06 586.29 311.14 580.6 311.52 M 580 312.33 C 574.55 312.52 569.87 311.04 571.76 304.27 M 578.35 312.56 C 574.23 312.37 567.83 308.84 572.24 303.05 M 571.88 302.16 C 568.87 287.42 571.25 276.95 571.15 243.1 M 569.96 301.78 C 568.87 281.7 569.78 263.08 570.73 243.3 M 570 242.5 C 569.77 235.06 571.73 232.05 578.5 233.38 M 570.4 244.14 C 570.46 234.74 574.5 231.45 581.03 232.96 M 579.18 232.45 C 583.46 231.94 585.77 231.88 594.53 232.92 M 579.75 232.34 C 583.62 232.8 586.88 232.41 593.36 231.57" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 591.99 228.44 C 591.99 228.44 591.99 228.44 591.99 228.44 M 591.99 228.44 C 591.99 228.44 591.99 228.44 591.99 228.44 M 593.96 232.76 C 594.44 231.72 595.42 230.68 595.7 230.6 M 593.56 232.55 C 594.22 231.87 594.99 231.25 595.64 230.24" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 597.51 233.39 M 599.16 232.36 C 596.35 233.43 592.88 234.2 591.42 235.67 M 598.59 232.22 C 596.19 233.32 593.24 234.78 592.02 235.95 M 591.75 235.83 C 592.34 234.16 593.45 233.12 593.39 232.14 M 591.89 235.76 C 592.6 234.47 593.13 233.34 593.56 232.11 M 593.72 231.96 C 592.79 231.11 592.76 229.79 592.09 228.82 M 593.53 231.94 C 592.97 230.69 592.1 229.56 591.92 228.57 M 591.72 228.7 C 593.89 229.12 595.83 230.73 598.77 232.27 M 592.15 228.8 C 593.36 229.3 594.89 229.88 598.71 232.26" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 690 45 L 710 45 Q 720 45 720 55 L 720 115 Q 720 125 710 125 L 695.37 125" fill="none" stroke="none" pointer-events="stroke"/><path d="M 690.12 125 L 697.12 121.5 L 695.37 125 L 697.12 128.5 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 691.59 45.81 M 691.57 46.18 C 696.88 45.51 704.16 45.55 709.42 44.64 M 690.6 45.32 C 694.63 45.22 701.23 45.7 710.77 44.73 M 710 45 C 718.14 44.18 719.1 50 720.22 56.3 M 708.71 44.62 C 715.99 45.87 720.82 48.47 718.94 57.12 M 719.93 53.48 C 721.9 75.1 720.1 99.17 720.2 113.38 M 720.59 54.2 C 719.54 71.33 720.42 89.43 720.78 114.66 M 720 115 C 719.36 122.88 714.94 126.69 710.33 124.58 M 718.13 116.09 C 717.84 119.72 718.38 125.76 708.59 127.1 M 708.58 124.56 C 705.7 126.42 699.19 124.95 693.92 124.01 M 709.88 125.53 C 705.32 125.42 701.76 125.21 694.69 125.71" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 689.83 125.34 C 689.83 125.34 689.83 125.34 689.83 125.34 M 689.83 125.34 C 689.83 125.34 689.83 125.34 689.83 125.34 M 693.7 127.43 C 694.13 126.21 695.24 125.3 695.41 124.8 M 693.56 127.21 C 694.36 126.36 695.12 125.42 695.36 125.07" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 689.06 124.89 M 690.02 124.49 C 693.17 124.15 694.99 122.25 696.41 122.13 M 690.18 124.92 C 692.05 124.22 693.91 123.28 696.75 121.71 M 696.79 121.79 C 696.86 122.5 696.39 123.23 694.99 124.88 M 697.11 121.31 C 696.41 122.69 695.92 123.89 695.34 125.14 M 695.51 124.64 C 696.18 125.89 696.03 126.26 697.1 128.88 M 695.3 125.16 C 696.14 126.13 696.83 127.69 697.09 128.34 M 696.77 129.22 C 694.77 126.92 692.89 125.86 690.35 125.75 M 697.18 128.61 C 694.86 127.65 693.22 126.47 690.02 125.33" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 692 130 L 712 130 Q 722 130 722 140 L 722 200 Q 722 210 712 210 L 697.37 210" fill="none" stroke="none" pointer-events="stroke"/><path d="M 692.12 210 L 699.12 206.5 L 697.37 210 L 699.12 213.5 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 693.59 131.15 M 691.25 130.35 C 698.72 130.49 704.17 128.64 711.85 131.19 M 692.04 130.14 C 696.58 129.61 701.37 130.6 712.95 130.27 M 712 130 C 720.39 128.28 720.33 134.79 720.67 140.84 M 711.07 129.01 C 716.41 131.81 721.2 133.93 722.24 139.09 M 723.99 141.29 C 722.69 155.87 720.7 175.06 721.25 200.17 M 721.22 139.12 C 722.88 155.18 721.72 167.73 722.84 200.52 M 722 200 C 720.95 205.87 716.82 209.77 710.15 208.1 M 721.87 200.54 C 721.81 208.47 720.92 207.92 712.74 208.97 M 712.98 209 C 709.51 210.34 703.85 210.34 696.43 210.08 M 712.03 209.59 C 708.29 210.34 702.83 210.3 697.76 210.54" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 692.38 209.7 C 692.38 209.7 692.38 209.7 692.38 209.7 M 692.38 209.7 C 692.38 209.7 692.38 209.7 692.38 209.7 M 696.14 211.75 C 696.39 210.82 697.23 210.3 697.27 210.08 M 696.02 211.6 C 696.39 211.22 696.82 210.88 697.43 210.08" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 691.37 208.41 M 691.64 210.19 C 695.3 208.02 696.92 207.82 699.79 206.17 M 691.76 209.63 C 693.34 209.08 694.65 208.46 699.09 206.61 M 699.43 206.88 C 698.17 207.48 697.74 209.06 697.63 209.73 M 699.15 206.37 C 698.46 207.83 697.67 209.11 697.38 209.89 M 697.55 210.21 C 698.35 211.54 699 212.33 698.81 213.3 M 697.34 210.1 C 698.17 211.11 698.71 212.78 698.97 213.64 M 698.52 213.31 C 697.96 212.69 696.26 211.7 692.69 209.7 M 698.91 213.57 C 696.3 212 693.94 211.44 692.09 209.65" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 691 231 L 711 231 Q 721 231 721 241 L 721 301 Q 721 311 711 311 L 696.37 311" fill="none" stroke="none" pointer-events="stroke"/><path d="M 691.12 311 L 698.12 307.5 L 696.37 311 L 698.12 314.5 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 692.59 232.49 M 691.93 230.51 C 697.57 231.86 705.19 232.14 711.28 229.73 M 690.48 230.95 C 697.53 232 706.52 231.5 710.12 231.81 M 711 231 C 719.64 232.37 722.56 235.58 722.13 241.38 M 710.43 229.41 C 718.44 229.15 723.19 235.39 722.54 241.67 M 721.04 241.1 C 720.48 252.64 722.31 266.94 719.3 302.96 M 720.85 240.04 C 720.02 265.03 720.83 288.02 721.9 300.37 M 721 301 C 719.54 308.85 715.7 312.86 710.98 311.63 M 722.6 300.99 C 722.79 308.62 715.86 310.68 709.3 311.44 M 711.45 312.36 C 704.47 309.96 699.66 311.43 695.93 312.14 M 711.17 311.11 C 706.79 311.27 702.37 311.38 696.37 311.37" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 691.3 310.79 C 691.3 310.79 691.3 310.79 691.3 310.79 M 691.3 310.79 C 691.3 310.79 691.3 310.79 691.3 310.79 M 695.01 312.86 C 695.38 312.49 695.64 311.96 696.13 311.29 M 695.07 312.71 C 695.3 312.24 695.93 311.68 696.29 311.11" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 690.69 311.94 M 691.83 310.34 C 694.44 309.45 695.86 307.83 698.6 307.76 M 691.12 311.12 C 693.04 310.16 695.18 309.17 698.43 307.5 M 698.28 307.19 C 697.68 308.55 697.64 308.71 696.49 311.36 M 698.2 307.44 C 697.87 308.26 697.51 308.94 696.42 311.03 M 696.6 311 C 697.17 312.45 697.48 312.97 698.3 314.51 M 696.37 311.04 C 696.87 312.51 697.67 313.51 698.23 314.55 M 698.84 314.97 C 696.68 313.62 693.76 312.01 690.46 311.21 M 698.42 314.53 C 696.91 313.83 695.23 313.02 691.17 310.75" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><rect x="607" y="161" width="80" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 171px; margin-left: 608px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">分发路由到正确的模型</div></div></div></foreignObject><text x="647" y="175" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">分发路由到正确的模型</text></switch></g><rect x="607" y="250" width="80" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 260px; margin-left: 608px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">用获取到的数据创建 HTML 模板或 JSON</div></div></div></foreignObject><text x="647" y="264" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">用获取到的数据创建 HTML 模板或 JSON</text></switch></g><path d="M 469.64 217.86 L 593.63 217.99" fill="none" stroke="none" pointer-events="stroke"/><path d="M 598.88 218 L 591.88 221.49 L 593.63 217.99 L 591.89 214.49 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 471.23 219.85 M 468.58 216.45 C 516.21 218.47 566.01 219.86 592.58 219.31 M 469.1 217.15 C 512.66 216.93 554.31 217.2 593.13 218.25" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 591.59 214.84 C 591.59 214.84 591.59 214.84 591.59 214.84 M 591.59 214.84 C 591.59 214.84 591.59 214.84 591.59 214.84 M 594.03 218.24 C 594.16 217.68 594.6 217.51 595.18 216.87 M 593.89 218.17 C 594.28 217.88 594.55 217.47 595.18 216.64" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 598.28 217.99 M 599.49 217.8 C 596.83 218.94 594.55 220.08 592.34 221.03 M 599.19 217.97 C 596.82 218.89 594.41 220.57 592.08 221.15 M 591.56 221.14 C 592.9 220.15 592.85 219.26 593.34 217.72 M 591.88 221.56 C 592.11 220.78 592.88 219.73 593.48 217.97 M 593.44 218.21 C 593.29 217.13 592.34 215.88 591.81 214.17 M 593.68 218.07 C 593.28 217.28 592.8 216.23 591.97 214.65 M 592.66 214.19 C 593.92 215.06 595.18 216.55 598.86 218.38 M 591.65 214.24 C 593.89 215.15 595.12 215.83 599.21 217.87" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 599.19 225.59 L 476.37 225.98" fill="none" stroke="none" pointer-events="stroke"/><path d="M 471.12 226 L 478.11 222.47 L 476.37 225.98 L 478.13 229.47 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 600.78 223.92 M 599.81 227.34 C 562.36 226.55 523.07 226.13 475.75 224.84 M 600.09 224.7 C 563.44 224.84 528.57 225.68 476.04 226.78" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 471.42 225.66 C 471.42 225.66 471.42 225.66 471.42 225.66 M 471.42 225.66 C 471.42 225.66 471.42 225.66 471.42 225.66 M 475.13 227.57 C 475.63 227.27 475.76 226.79 476.26 225.89 M 475.16 227.49 C 475.42 227.09 475.88 226.67 476.47 226.09" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 470.84 224.51 M 471.35 226.5 C 474.27 224.93 476.87 223.65 478.39 222.6 M 471 225.68 C 472.61 225.41 473.92 224.5 477.86 222.81 M 478.43 222.21 C 477.57 223.76 477.41 224.04 476.72 226.34 M 478.15 222.61 C 477.57 223.53 477.21 224.22 476.26 226.1 M 476.23 225.99 C 477.06 226.66 477.75 228.33 477.76 229.35 M 476.46 226 C 477.01 227.07 477.3 227.93 478.09 229.54 M 478.65 229.82 C 477.06 228.57 474.25 228.01 471.44 225.32 M 478.4 229.18 C 476.27 228.61 474.31 227.51 470.74 225.97" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><rect x="80" y="324" width="160" height="90" rx="13.5" ry="13.5" fill="none" stroke="none" pointer-events="all"/><path d="M 95.09 322.67 L 224.98 323.02 L 235.19 324.2 L 239.02 331.18 L 240.19 337.19 L 241.78 400.31 L 238.51 407.33 L 232.9 410.6 L 227.18 415.84 L 94.65 414.82 L 85.82 411.39 L 81.6 407.4 L 79.45 400.37 L 80.95 335.38 L 84.15 326.97 L 88.72 326.79 L 93.36 325.51" fill="#ffffff" stroke="none" pointer-events="all"/><path d="M 93.17 324.48 M 94.3 324.32 C 132.76 323.35 173.11 323.3 227.54 325.22 M 93.05 324.98 C 139.16 325.08 182.09 324.36 227.43 324.29 M 226.5 324 C 236.73 324.88 239.52 327.27 240.85 338.48 M 225.23 322.12 C 236.81 322.76 239.95 329.5 240.55 338.86 M 239.55 336.94 C 241.36 354.85 240.32 370.57 238.93 401.4 M 239.78 336.84 C 239.95 349.72 239.79 363.15 240.86 400.25 M 240 400.5 C 238.69 409.49 236.92 414.62 225.48 414.39 M 240.46 399.8 C 241.41 409.04 233.68 415.83 224.21 415.85 M 226.34 414.24 C 191.67 411.93 159.05 411.43 91.78 414.38 M 226.28 414.47 C 175.46 414.58 125.7 414.27 93.62 413.31 M 93.5 414 C 82.94 414.37 79.74 408.03 78.98 398.79 M 92.51 412.85 C 84.03 413.79 81.44 409.18 79.38 402.51 M 81.3 399.58 C 79.49 377.15 80.37 352.45 81.06 336.67 M 79.54 400.51 C 79.7 382.51 80.59 363.83 79.78 338.32 M 80 337.5 C 81 326.74 84.26 323.51 95.16 323.11 M 81.34 339.07 C 81.91 329.57 82.87 323.3 91.83 323.02" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 369px; margin-left: 81px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">客户端（浏览器）<br />- HTML，CSS，JS<br />- 每个请求都刷新页面</div></div></div></foreignObject><text x="160" y="373" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">客户端（浏览器）- HTML，CSS，JS...</text></switch></g><path d="M 240 62.5 L 420 62.97 Q 430 63 429.98 73 L 429.7 189.33" fill="none" stroke="none" pointer-events="stroke"/><path d="M 429.68 194.58 L 426.2 187.57 L 429.7 189.33 L 433.2 187.59 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 241.59 62.53 M 241.02 64.07 C 294.57 63.62 350.33 61.84 421.51 61.55 M 240.1 62.68 C 277.42 61.43 312.95 62.79 420.55 62.46 M 420 62.97 C 428.41 64.43 431.69 65.09 431.25 71.01 M 418.57 62.48 C 424.58 62.71 428.1 67.9 430.42 71.83 M 429.72 72.33 C 429.97 103.53 430.08 132.64 430.64 190.67 M 429.42 73.5 C 429.19 105.58 428.83 140.61 430.35 189.25" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 426.15 187.63 C 426.15 187.63 426.15 187.63 426.15 187.63 M 426.15 187.63 C 426.15 187.63 426.15 187.63 426.15 187.63 M 427.56 192.02 C 428.78 191.2 429.08 189.93 429.75 189.56 M 427.73 191.86 C 428.29 191.34 428.74 190.62 429.77 189.42" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 430.96 193.71 M 429.58 193.92 C 428.1 191.66 427.56 189.81 425.53 187.56 M 429.78 194.38 C 428.7 191.7 426.68 189.02 426.09 187.37 M 426.58 187.78 C 427.19 188.34 428.9 188.49 429.34 188.94 M 426.07 187.65 C 426.88 187.83 427.72 188.27 429.78 189.37 M 429.78 189.07 C 430.32 189.03 431.69 188.72 432.94 187.72 M 429.56 189.44 C 430.82 188.97 431.66 188.56 433.31 187.61 M 432.48 188.1 C 431.92 189.18 430.27 192.73 430.12 194.88 M 432.89 187.87 C 432.16 190.43 430.88 193.11 429.67 194.27" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 400.04 195.82 L 400 95 Q 400 85 390 85 L 246.37 85" fill="none" stroke="none" pointer-events="stroke"/><path d="M 241.12 85 L 248.12 81.5 L 246.37 85 L 248.12 88.5 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 401.63 196.2 M 398.74 196.55 C 400.48 174.65 401.09 152.13 401.94 95.12 M 399.58 195.81 C 399.18 161.57 399.53 126.47 400.72 95.03 M 400 95 C 401.99 88.87 397.59 83.54 389.73 86.55 M 398.92 93.9 C 400.94 88.99 397.76 87.03 391.74 85.41 M 391.79 83.14 C 337.69 85.86 283.74 85.38 246.36 84.12 M 390.07 85.42 C 354.76 85.58 322.12 84.53 247.08 85.77" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 241.08 85.05 C 241.08 85.05 241.08 85.05 241.08 85.05 M 241.08 85.05 C 241.08 85.05 241.08 85.05 241.08 85.05 M 244.99 87.22 C 245.57 86.22 246 85.07 246.56 84.88 M 244.82 87.05 C 245.48 86.06 245.92 85.61 246.58 84.78" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 242.72 86.65 M 240.64 85.05 C 243.43 83.84 246.43 81.81 248.83 82.09 M 240.8 85.3 C 243.39 84.08 244.73 83.05 248.35 81.19 M 248.35 81.8 C 247.87 82.1 247.45 82.97 246.65 85.24 M 248.04 81.65 C 247.7 82.27 247.4 83.2 246.49 85.17 M 246.5 85.31 C 246.33 85.95 246.92 86.71 248.35 88.84 M 246.27 85.05 C 246.67 86.06 247.28 86.82 248.1 88.43 M 248.72 88.1 C 245.47 86.6 243.03 86.09 241.9 84.24 M 248.33 88.74 C 246.58 87.33 244.68 86.6 241.18 84.78" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 240.8 331.98 L 365 332 Q 375 332 374.95 322 L 374.63 260.45" fill="none" stroke="none" pointer-events="stroke"/><path d="M 374.61 255.2 L 378.14 262.18 L 374.63 260.45 L 371.14 262.22 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 242.39 332.7 M 241.18 331.87 C 282.27 334.88 325.57 333.21 363.37 333.66 M 241.78 331.78 C 275.8 330.82 313.41 331.11 365.9 332.57 M 365 332 C 369.91 331.64 375.14 327 373.13 323.09 M 364.28 330.29 C 371.03 333.6 374.46 326.56 373.39 323.98 M 374.8 322.96 C 375.67 305.45 375.4 286.18 373.68 261.36 M 375.65 322.34 C 374.1 298.64 373.62 274.91 375.39 260.08" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 374.49 255.34 C 374.49 255.34 374.49 255.34 374.49 255.34 M 374.49 255.34 C 374.49 255.34 374.49 255.34 374.49 255.34 M 375.04 260.72 C 375.58 260.14 376.15 259.13 376.59 258.52 M 374.85 260.85 C 375.65 259.98 376.37 259.21 376.92 258.75" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 376.52 255.37 M 375.32 255.96 C 375.77 258.21 377.35 260.03 378.66 261.8 M 374.64 255.21 C 376.28 257.73 377.86 260.49 377.92 262.55 M 378.23 262.57 C 376.67 261.83 375.73 261.08 374.77 260.54 M 378.1 262.01 C 377.28 261.52 376.14 260.99 374.79 260.37 M 374.81 260.55 C 373.67 261.4 372.37 261.96 371.07 261.98 M 374.56 260.44 C 373.53 260.99 372.51 261.37 370.99 262.06 M 371.49 262.48 C 372.06 260.2 372.26 258.93 374.16 254.95 M 371.07 262.42 C 372.09 260.22 373.29 258.3 374.75 255.08" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 393.76 257.12 L 393.98 344 Q 394 354 384 354 L 246.37 354" fill="none" stroke="none" pointer-events="stroke"/><path d="M 241.12 354 L 248.12 350.5 L 246.37 354 L 248.12 357.5 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 395.35 257.32 M 395.11 258.6 C 391.65 290.87 394.98 325.89 393.74 343.62 M 394.41 256.82 C 395.61 277.11 394.69 299.35 394.73 344.41 M 393.98 344 C 393.75 350.48 389.89 355.72 384.22 352.9 M 393.17 344.89 C 395.48 349.97 391.41 352.85 383.45 353.79 M 385.05 352.86 C 351.88 354.25 319.71 354.07 244.58 354.22 M 384.6 354.54 C 338.85 352.55 295.14 352.68 246.38 354.47" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 241.09 354.04 C 241.09 354.04 241.09 354.04 241.09 354.04 M 241.09 354.04 C 241.09 354.04 241.09 354.04 241.09 354.04 M 244.65 355.88 C 245.23 355.26 245.91 354.69 246.16 354.35 M 244.8 355.85 C 245.07 355.5 245.48 355.08 246.02 354.39" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 241.93 353.66 M 241.31 354.66 C 243.01 353.3 246.21 351.23 247.62 350.73 M 241.18 353.93 C 242.88 352.77 244.48 352.31 248.33 350.86 M 248.15 350.57 C 247.39 352.06 246.79 353.5 246.52 353.91 M 248.26 350.64 C 247.94 351.16 247.39 351.82 246.22 353.85 M 245.99 354.18 C 246.75 355.17 247.17 356.32 247.89 357.88 M 246.25 353.82 C 246.93 355.34 247.8 356.33 247.93 357.33 M 247.7 358.14 C 246.56 357.2 244.74 356.5 241.86 353.96 M 248.33 357.55 C 245.37 356.1 243.17 354.89 241.32 353.71" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 241 383 L 427 383 Q 437 383 437 373 L 437 351 Q 437 341 436.96 331 L 436.67 263.39" fill="none" stroke="none" pointer-events="stroke"/><path d="M 436.64 258.14 L 440.17 265.12 L 436.67 263.39 L 433.17 265.15 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 242.59 383.54 M 240.03 383.65 C 298.64 384.49 355.62 383.62 427.19 384.16 M 241.09 382.52 C 312.14 383.63 383.57 383.62 427.93 383.95 M 427 383 C 433.67 381.91 435.45 381.18 435.68 371.43 M 426.55 383.28 C 433.58 383.24 436.13 378.98 437.75 374.36 M 436.1 374.67 C 435.45 366.28 435.08 357.91 438.26 349 M 436.23 373.46 C 437.28 366.07 436.12 361.49 437.06 350.32 M 437 351 C 436.69 344.66 436.18 336.21 435.09 329.18 M 435.83 352.28 C 439.06 343.68 437.95 339.17 436.4 331.03 M 436.99 329.77 C 436.32 312.13 436.06 296.8 434.83 262.75 M 436.39 330.95 C 436.82 312.36 436.64 294.56 436.58 262.81" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 436.86 257.89 C 436.86 257.89 436.86 257.89 436.86 257.89 M 436.86 257.89 C 436.86 257.89 436.86 257.89 436.86 257.89 M 437.1 263.53 C 437.65 262.79 438.42 262.31 438.59 262.09 M 437.22 263.5 C 437.78 263.03 438.18 262.4 438.65 261.95" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 437.76 256.32 M 436.45 257.94 C 437.51 259.88 439.37 262.96 439.49 264.38 M 436.27 257.78 C 437.86 260.75 439.03 262.92 439.94 265.37 M 440.06 265.28 C 439.46 264.55 437.99 263.9 436.68 263.15 M 440.36 264.94 C 439.24 264.59 438.34 264.43 436.56 263.38 M 436.33 263.35 C 435.5 264.03 434.98 264.44 433.43 264.95 M 436.58 263.54 C 435.39 264.1 434.24 264.59 433.25 265.28 M 432.5 264.89 C 434.17 263.86 435.56 261.57 436.15 258.61 M 433.11 265.16 C 434.18 263.82 434.81 262.41 436.91 257.95" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 457.28 259.12 L 457.02 393 Q 457 403 447 403.01 L 245.73 403.28" fill="none" stroke="none" pointer-events="stroke"/><path d="M 240.48 403.29 L 247.47 399.78 L 245.73 403.28 L 247.48 406.78 Z" fill="none" stroke="none" pointer-events="all"/><path d="M 458.87 260 M 457.99 258.93 C 458.82 290.46 457.54 322.77 457.64 391.71 M 456.8 258.45 C 455.86 302.39 457.47 346.43 456.12 392.49 M 457.02 393 C 457.26 397.68 455.35 404.31 448.13 404.98 M 456.92 392.67 C 455.35 400.85 455.78 402.78 449.05 401.34 M 448.04 403.45 C 391.63 404.6 334.63 403.91 246.01 403.09 M 446.88 403.35 C 400.45 403.37 355.49 402.39 245.84 403.44" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 240.2 403.61 C 240.2 403.61 240.2 403.61 240.2 403.61 M 240.2 403.61 C 240.2 403.61 240.2 403.61 240.2 403.61 M 244.17 405.52 C 244 405.25 244.91 404.51 245.79 403.49 M 244.01 405.47 C 244.31 405.05 244.81 404.53 245.88 403.31" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><path d="M 241.91 403.99 M 239.91 403.8 C 242.56 402.03 245.37 400.23 248.16 399.64 M 240.47 403.43 C 242.24 401.99 244.1 401.49 247.58 399.92 M 247.21 400.04 C 246.62 401.37 246.46 402.21 245.6 402.89 M 247.31 399.67 C 247.09 400.71 246.71 401.94 245.66 403.41 M 245.44 403.03 C 245.76 404.31 246.28 404.91 247.45 406.79 M 245.68 403.37 C 246.42 404.6 247 405.82 247.43 406.82 M 248.13 407.17 C 245.42 404.92 242.74 404.53 240.33 402.7 M 247.15 406.75 C 245.78 405.43 243.54 404.57 240.82 403.2" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="all"/><rect x="280" y="40" width="100" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 50px; margin-left: 281px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">发送请求给服务器</div></div></div></foreignObject><text x="330" y="54" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">发送请求给服务器</text></switch></g><rect x="260" y="90" width="130" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 100px; margin-left: 261px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">服务器响应完整的HTML页面</div></div></div></foreignObject><text x="325" y="104" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">服务器响应完整的HTML页面</text></switch></g><rect x="230" y="310" width="140" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 320px; margin-left: 231px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">发送第一个请求到服务器</div></div></div></foreignObject><text x="300" y="324" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">发送第一个请求到服务器</text></switch></g><rect x="250" y="331" width="130" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 341px; margin-left: 251px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">响应主要的JavaScript</div></div></div></foreignObject><text x="315" y="345" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">响应主要的JavaScript</text></switch></g><rect x="240" y="364" width="140" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 374px; margin-left: 241px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">后续页面的Ajax请求</div></div></div></foreignObject><text x="310" y="378" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">后续页面的Ajax请求</text></switch></g><rect x="250" y="410" width="200" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 420px; margin-left: 251px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">响应 JSON原始数据，客户端继续由 JavaScript 渲染</div></div></div></foreignObject><text x="350" y="424" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">响应 JSON原始数据，客户端继续由 JavaScript 渲染</text></switch></g><rect x="90" y="440" width="150" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 450px; margin-left: 91px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">今后的请求只针对数据</div></div></div></foreignObject><text x="165" y="454" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">今后的请求只针对数据</text></switch></g><path d="M 0 230 L 340 230" fill="none" stroke="none" pointer-events="stroke"/><path d="M 1.59 229.08 M -0.59 229.14 C 81.77 232.18 163.19 232.81 340.95 230.67 M 0.47 229.83 C 74.77 231.35 149.49 232.53 340.23 229.76" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="stroke"/><rect x="10" y="184" width="70" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 194px; margin-left: 11px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font style="font-size: 13px">旧架构</font></div></div></div></foreignObject><text x="45" y="198" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">旧架构</text></switch></g><rect x="10" y="257" width="70" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 267px; margin-left: 11px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><font style="font-size: 13px">新架构</font></div></div></div></foreignObject><text x="45" y="271" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">新架构</text></switch></g><rect x="84" y="0" width="245" height="20" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 243px; height: 1px; padding-top: 10px; margin-left: 85px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">后续的请求都是服务器返回的完整页面</div></div></div></foreignObject><text x="207" y="14" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">后续的请求都是服务器返回的完整页面</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/public/images/p/create-a-mini-router-for-react/image-20210823154009498.webp b/public/images/p/create-a-mini-router-for-react/image-20210823154009498.webp
new file mode 100644
index 0000000..fb95fb1
Binary files /dev/null and b/public/images/p/create-a-mini-router-for-react/image-20210823154009498.webp differ
diff --git a/public/images/p/create-a-mini-router-for-react/router.png b/public/images/p/create-a-mini-router-for-react/router.png
new file mode 100644
index 0000000..baead8e
Binary files /dev/null and b/public/images/p/create-a-mini-router-for-react/router.png differ
diff --git a/public/images/p/create-a-mini-router-for-react/router.psd b/public/images/p/create-a-mini-router-for-react/router.psd
new file mode 100644
index 0000000..1e08910
Binary files /dev/null and b/public/images/p/create-a-mini-router-for-react/router.psd differ
diff --git a/public/images/p/create-a-mini-router-for-react/router.webp b/public/images/p/create-a-mini-router-for-react/router.webp
new file mode 100644
index 0000000..851891a
Binary files /dev/null and b/public/images/p/create-a-mini-router-for-react/router.webp differ
diff --git a/public/images/p/create-a-mini-router-for-react/迷你路由器.drawio b/public/images/p/create-a-mini-router-for-react/迷你路由器.drawio
new file mode 100644
index 0000000..1963734
--- /dev/null
+++ b/public/images/p/create-a-mini-router-for-react/迷你路由器.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2021-08-23T08:52:55.443Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.9.6 Chrome/89.0.4389.128 Electron/12.0.16 Safari/537.36" etag="msaHTrqSDVVvf8JIMCGx" version="14.9.6" type="device"><diagram id="XTkkDmfpvXEnlI4-h4sE" name="第 1 页">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</diagram></mxfile>
\ No newline at end of file
diff --git a/public/images/p/create-a-mini-router-for-react/迷你路由器.svg b/public/images/p/create-a-mini-router-for-react/迷你路由器.svg
new file mode 100644
index 0000000..d77da23
--- /dev/null
+++ b/public/images/p/create-a-mini-router-for-react/迷你路由器.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="916px" height="514px" viewBox="-0.5 -0.5 916 514" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2021-08-23T08:53:00.564Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.9.6 Chrome/89.0.4389.128 Electron/12.0.16 Safari/537.36&quot; etag=&quot;NWeSvmIaUItdqBT2HuAJ&quot; version=&quot;14.9.6&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;XTkkDmfpvXEnlI4-h4sE&quot; name=&quot;第 1 页&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><path d="M 469.71 101.33 L 815.81 103.97 L 837.06 105.68 L 846.19 110.58 L 852.65 118.99 L 861.39 125.23 L 864.48 135.71 L 869.7 150.28 L 869.21 163.62 L 868.86 456.75 L 865.22 479.12 L 861.41 488.27 L 856.54 494.93 L 845.92 504.57 L 836.94 509.76 L 821.74 511.49 L 809.82 512.63 L 464.54 511.94 L 442.99 509.89 L 434.4 505.24 L 424.95 497.18 L 417.65 481.31 L 413.49 469.47 L 409.36 459.74 L 412.81 149.63 L 415.34 130.61 L 422.76 121.03 L 429.94 112.16 L 444.9 105.9 L 457.55 103.33 L 470.54 102.21" fill="#ffffff" stroke="none" pointer-events="none"/><path d="M 471.5 102 M 471.5 102 C 586.81 103.43 701.77 104.23 808.5 102 M 471.5 102 C 555.01 102.75 637.45 102.88 808.5 102 M 808.5 102 C 849.46 101.7 869.36 123.91 870 163.5 M 808.5 102 C 848.83 103.53 868.45 121.34 870 163.5 M 870 163.5 C 868.59 266.52 870.61 368.17 870 450.5 M 870 163.5 C 872.26 272.31 871.19 382.42 870 450.5 M 870 450.5 C 871.75 489.95 850.88 512.92 808.5 512 M 870 450.5 C 870.74 489.46 847.3 510.75 808.5 512 M 808.5 512 C 695.99 512.72 582.5 511.75 471.5 512 M 808.5 512 C 706.97 510.11 607.07 510.22 471.5 512 M 471.5 512 C 430.75 512.27 411.14 489.92 410 450.5 M 471.5 512 C 429.54 511.07 410.59 489.82 410 450.5 M 410 450.5 C 410.71 382.88 410.67 315.67 410 163.5 M 410 450.5 C 409.65 370.56 409.21 289.56 410 163.5 M 410 163.5 C 409.16 122.21 431.86 100 471.5 102 M 410 163.5 C 410.65 122.51 428.49 101.37 471.5 102" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 152px; margin-left: 585px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; "><font style="font-size: 18px">Router 组件</font></div></div></div></foreignObject><text x="649" y="156" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Router 组件</text></switch></g><path d="M 491.94 212.34 C 491.94 212.34 491.94 212.34 491.94 212.34 M 491.94 212.34 C 491.94 212.34 491.94 212.34 491.94 212.34 M 485.77 225.53 C 488.73 221.61 493.85 216.15 503.49 205.15 M 485.77 225.53 C 493.37 217.6 499.4 210.99 503.49 205.15 M 483.54 234.19 C 488.37 226.94 493.15 221.64 507.16 207.02 M 483.54 234.19 C 489.21 228.72 492.49 222.53 507.16 207.02 M 483.94 239.83 C 496.35 228.1 506.15 215.46 513.46 205.87 M 483.94 239.83 C 495 227.18 506.82 213.26 513.46 205.87 M 483.68 246.23 C 493.89 235.8 503.76 220.45 519.76 204.72 M 483.68 246.23 C 493.58 235.71 503.14 223.64 519.76 204.72 M 483.41 252.63 C 495.03 240.6 503.63 229.58 525.4 204.33 M 483.41 252.63 C 498.81 235.56 512.96 216.72 525.4 204.33 M 483.81 258.27 C 497.1 245.48 506.65 232.08 530.39 204.69 M 483.81 258.27 C 497.42 242.92 509.26 228.88 530.39 204.69 M 483.55 264.67 C 495.21 252.44 509.02 238.49 536.03 204.29 M 483.55 264.67 C 499.3 246.36 513.94 229.49 536.03 204.29 M 483.94 270.31 C 505.19 247.08 526.82 220.7 541.02 204.65 M 483.94 270.31 C 503.1 247.66 522.67 224.91 541.02 204.65 M 483.68 276.71 C 504.53 252.48 523.41 229.93 546.66 204.26 M 483.68 276.71 C 505.35 249.87 529.17 223.21 546.66 204.26 M 483.42 283.11 C 509.95 253.13 535.2 222.46 551.65 204.62 M 483.42 283.11 C 502.64 261 521.84 239.77 551.65 204.62 M 483.81 288.75 C 503.38 264.77 522.88 243.16 557.29 204.23 M 483.81 288.75 C 506.88 262.57 527.67 237.38 557.29 204.23 M 483.55 295.15 C 512.39 263.91 538.27 232.58 562.28 204.59 M 483.55 295.15 C 500.74 274.79 517.95 255.33 562.28 204.59 M 483.29 301.55 C 513.7 265.97 544.78 233.41 567.92 204.19 M 483.29 301.55 C 502.26 278.26 522.84 255.38 567.92 204.19 M 483.69 307.19 C 501.67 286.26 524.85 260.03 572.91 204.55 M 483.69 307.19 C 501.85 286.19 520.31 264.98 572.91 204.55 M 483.42 313.59 C 507.76 287.13 530.06 259.88 578.55 204.16 M 483.42 313.59 C 521.89 270.66 559.19 226.93 578.55 204.16 M 483.16 319.99 C 511.77 288.24 540.12 254.55 583.54 204.52 M 483.16 319.99 C 508.69 292.71 533.24 264.01 583.54 204.52 M 483.56 325.63 C 517.75 285.11 551.84 250.15 589.18 204.12 M 483.56 325.63 C 513.9 290.72 544.25 256.33 589.18 204.12 M 483.3 332.03 C 513.2 299.2 544.22 264.02 594.17 204.48 M 483.3 332.03 C 528.98 282.24 571.99 231.03 594.17 204.48 M 483.69 337.67 C 526.62 289.56 567.56 243.05 599.81 204.09 M 483.69 337.67 C 515.43 300.77 549.71 261.5 599.81 204.09 M 483.43 344.07 C 516.62 304.61 553.07 263.93 604.8 204.45 M 483.43 344.07 C 522.56 300.53 559.67 258.11 604.8 204.45 M 483.17 350.47 C 513.08 316.17 545.59 279.65 609.79 204.81 M 483.17 350.47 C 510.84 320.61 538.06 288.72 609.79 204.81 M 483.56 356.11 C 521.69 314.37 559.41 268.89 615.43 204.41 M 483.56 356.11 C 524.1 309.67 563.87 264.89 615.43 204.41 M 483.3 362.51 C 521.91 317.37 562.01 272.37 620.42 204.77 M 483.3 362.51 C 538.91 298.42 592.36 236.96 620.42 204.77 M 483.04 368.9 C 536.36 309.66 587.8 245.91 626.06 204.38 M 483.04 368.9 C 517.12 330.19 551.71 290.42 626.06 204.38 M 483.43 374.55 C 523.96 329.54 561.9 281.06 631.05 204.74 M 483.43 374.55 C 542.87 308.49 601.17 241.48 631.05 204.74 M 483.17 380.95 C 528.51 324.88 575.64 268.86 636.69 204.34 M 483.17 380.95 C 526.35 330.91 569.99 281.37 636.69 204.34 M 483.57 386.59 C 545.6 315.77 610.13 243.53 641.68 204.7 M 483.57 386.59 C 529.36 336.68 573.37 284.84 641.68 204.7 M 483.31 392.99 C 519.89 352.46 551.98 311.05 647.32 204.31 M 483.31 392.99 C 540.24 325.4 598.83 258.89 647.32 204.31 M 483.04 399.38 C 543.9 324.87 609.61 252.84 652.31 204.67 M 483.04 399.38 C 544.39 327.74 605.06 257.69 652.31 204.67 M 483.44 405.03 C 526.35 353.85 573.3 302.65 657.95 204.27 M 483.44 405.03 C 526.63 354.14 570.41 302.62 657.95 204.27 M 483.18 411.43 C 542.1 343.59 598.58 279.56 662.94 204.63 M 483.18 411.43 C 524.79 363.99 566.75 314.63 662.94 204.63 M 482.92 417.82 C 550.07 341.99 617.75 263.39 668.58 204.24 M 482.92 417.82 C 545.77 346.14 608.31 274.95 668.58 204.24 M 483.31 423.47 C 529.39 370.26 576.87 314.99 673.57 204.6 M 483.31 423.47 C 550 348.32 615.77 272 673.57 204.6 M 483.05 429.86 C 546.06 361.72 605.91 289.12 679.21 204.21 M 483.05 429.86 C 530.1 376.96 575.94 323.91 679.21 204.21 M 484.76 434 C 556.07 348.77 630.08 264.69 684.2 204.57 M 484.76 434 C 534.97 376.16 584.91 317.86 684.2 204.57 M 485.81 438.89 C 533.49 381.83 584.89 323.44 689.84 204.17 M 485.81 438.89 C 558.26 353.58 632.6 268.5 689.84 204.17 M 486.2 444.53 C 532.59 392.57 576.43 342.89 694.83 204.53 M 486.2 444.53 C 555.06 364.37 624.26 284.52 694.83 204.53 M 485.94 450.93 C 558.18 366.82 635.08 278.87 700.47 204.14 M 485.94 450.93 C 569.29 355.07 650.74 260.51 700.47 204.14 M 488.3 454.31 C 556.1 376.52 623.5 298.46 705.46 204.5 M 488.3 454.31 C 548.02 386.06 609.07 316.51 705.46 204.5 M 490.67 457.68 C 571.85 366.65 652.15 273.21 711.1 204.1 M 490.67 457.68 C 569.08 369.86 645.05 281.48 711.1 204.1 M 492.37 461.82 C 561.28 384.09 628.9 306.73 716.09 204.46 M 492.37 461.82 C 537.71 409.05 582.83 355.69 716.09 204.46 M 496.05 463.69 C 564.86 388.66 631.52 309.36 721.73 204.07 M 496.05 463.69 C 578.67 367.87 661.83 271.74 721.73 204.07 M 499.07 466.31 C 548.44 407.94 600.85 349.13 726.72 204.43 M 499.07 466.31 C 579.7 372.55 660.4 278.96 726.72 204.43 M 502.74 468.18 C 569.84 390.23 639.23 311.9 731.71 204.79 M 502.74 468.18 C 577.64 381.3 653.94 293.88 731.71 204.79 M 505.76 470.81 C 557.04 414.31 607.51 356.13 737.35 204.39 M 505.76 470.81 C 596.9 365.75 687.53 261.11 737.35 204.39 M 510.75 471.17 C 599.5 370.88 687.54 267.71 742.34 204.75 M 510.75 471.17 C 601.11 365.67 693.42 260.83 742.34 204.75 M 515.73 471.53 C 569.9 409.7 624.9 345.94 747.98 204.36 M 515.73 471.53 C 579.86 394.73 643.88 320.04 747.98 204.36 M 520.06 472.64 C 590.82 392.45 659.43 311.83 752.97 204.72 M 520.06 472.64 C 584.11 398.71 649.14 324.53 752.97 204.72 M 524.4 473.76 C 599.31 387.1 675.85 299.36 759.26 203.57 M 524.4 473.76 C 578.84 412.15 631.93 350.09 759.26 203.57 M 530.04 473.36 C 596.41 396.66 661.22 322.46 764.25 203.93 M 530.04 473.36 C 619.04 369.4 710.14 265.72 764.25 203.93 M 535.03 473.72 C 616.54 380.66 695.45 289.91 768.58 205.04 M 535.03 473.72 C 616.57 378.06 699.42 283.32 768.58 205.04 M 540.67 473.33 C 609.71 396.3 679.06 316.1 773.57 205.4 M 540.67 473.33 C 606.52 397.79 670.56 323.47 773.57 205.4 M 545.66 473.69 C 605.16 402.7 668.05 333.3 777.9 206.52 M 545.66 473.69 C 635.5 369.74 726.19 265.89 777.9 206.52 M 550.64 474.05 C 635.63 375.16 720.85 278.16 780.92 209.14 M 550.64 474.05 C 640.34 370.03 731.16 266.5 780.92 209.14 M 556.29 473.65 C 613.65 408.48 670.24 343.64 784.59 211.01 M 556.29 473.65 C 601.82 420.67 648.8 368.16 784.59 211.01 M 561.27 474.01 C 625.79 398.41 691.87 323 788.27 212.88 M 561.27 474.01 C 637.49 385.44 714.1 295.89 788.27 212.88 M 566.92 473.62 C 648.77 380.41 729.32 288.64 790.63 216.26 M 566.92 473.62 C 627.25 404.94 686.84 335.44 790.63 216.26 M 571.9 473.98 C 633.94 404.15 694.88 331.96 792.99 219.64 M 571.9 473.98 C 659.15 374.52 746.31 273.19 792.99 219.64 M 577.55 473.58 C 640.81 399.92 706.5 327.79 794.7 223.77 M 577.55 473.58 C 663.08 377.13 747.53 279.92 794.7 223.77 M 582.53 473.94 C 659.47 386.3 734.66 299.82 797.72 226.4 M 582.53 473.94 C 625.53 421.54 670.67 371.44 797.72 226.4 M 588.18 473.55 C 633.36 423.07 680.18 368.19 798.11 232.04 M 588.18 473.55 C 668.09 380.97 749.73 288.26 798.11 232.04 M 593.16 473.91 C 663.89 396.48 731.72 316.72 799.17 236.93 M 593.16 473.91 C 651.37 405.14 711.94 335.33 799.17 236.93 M 598.81 473.51 C 662.06 398.1 728.72 324.19 798.9 243.33 M 598.81 473.51 C 680.73 382.86 759.91 291.14 798.9 243.33 M 603.79 473.87 C 649.77 421.12 695.33 368.07 798.64 249.73 M 603.79 473.87 C 669.99 396.94 736.49 321.76 798.64 249.73 M 609.44 473.48 C 663.35 406.81 721.4 343.69 799.04 255.37 M 609.44 473.48 C 683.62 389.31 757.25 304.99 799.04 255.37 M 614.42 473.84 C 672.2 406.94 728.57 342.78 798.78 261.77 M 614.42 473.84 C 669.06 409.01 726.59 344.56 798.78 261.77 M 620.07 473.45 C 661.5 422.86 705.13 374.79 799.17 267.41 M 620.07 473.45 C 661.27 425.44 704.4 376.72 799.17 267.41 M 625.05 473.81 C 690.17 398.55 754.34 321.7 798.91 273.81 M 625.05 473.81 C 682.11 410.03 738.1 344.35 798.91 273.81 M 630.7 473.41 C 689.84 408.04 745.31 342.33 798.65 280.21 M 630.7 473.41 C 671.37 426.5 711.16 379.21 798.65 280.21 M 635.68 473.77 C 681.95 417.9 731.47 365.88 799.04 285.85 M 635.68 473.77 C 700.12 401.34 764.55 326.1 799.04 285.85 M 641.33 473.38 C 675.99 433.31 712.02 392.01 798.78 292.25 M 641.33 473.38 C 677.69 432.32 713.69 389.24 798.78 292.25 M 646.31 473.74 C 688.21 425.49 730.34 378.42 799.18 297.89 M 646.31 473.74 C 689.53 423.46 732.38 374.16 799.18 297.89 M 651.96 473.34 C 708.43 407.45 765.11 343.21 798.91 304.29 M 651.96 473.34 C 689.25 431.76 725.48 390.11 798.91 304.29 M 656.94 473.7 C 712.4 408.18 769.37 343.56 798.65 310.68 M 656.94 473.7 C 689.45 437.03 722.43 401.22 798.65 310.68 M 661.93 474.06 C 711.21 419.1 755.07 366.45 799.05 316.33 M 661.93 474.06 C 693.39 435.63 727.87 397.54 799.05 316.33 M 667.57 473.67 C 705.81 430 743.04 383.81 798.79 322.73 M 667.57 473.67 C 697.75 436.83 729.68 399.35 798.79 322.73 M 672.56 474.03 C 711.7 425.81 750.67 380.43 799.18 328.37 M 672.56 474.03 C 700.75 442.08 727.76 411.6 799.18 328.37 M 678.2 473.63 C 708.19 437.36 742.01 404.1 798.92 334.77 M 678.2 473.63 C 701.99 444.65 727.96 417.06 798.92 334.77 M 683.19 473.99 C 718.85 432.45 756.29 387.83 798.66 341.16 M 683.19 473.99 C 711.23 439.11 740.28 406.17 798.66 341.16 M 688.83 473.6 C 723.26 435.72 758.53 394.88 799.05 346.81 M 688.83 473.6 C 730.01 425.94 772.35 378.35 799.05 346.81 M 693.82 473.96 C 727.83 438.93 757.32 400.14 798.79 353.2 M 693.82 473.96 C 723.04 439.83 754.91 404.44 798.79 353.2 M 699.46 473.56 C 734.66 435.08 766.82 394.03 799.18 358.85 M 699.46 473.56 C 724.79 443.67 752.2 413.5 799.18 358.85 M 704.45 473.92 C 742.03 432.7 776.46 392.2 798.92 365.25 M 704.45 473.92 C 740.78 433.76 775.99 393.15 798.92 365.25 M 710.09 473.53 C 729.9 450.3 748.42 429.13 798.66 371.64 M 710.09 473.53 C 741.53 436.76 773.97 399.89 798.66 371.64 M 715.08 473.89 C 746.89 434.2 779.31 399.57 799.06 377.29 M 715.08 473.89 C 744.64 439.85 775.24 405.3 799.06 377.29 M 720.72 473.49 C 739.96 449.33 758.01 428.81 798.8 383.68 M 720.72 473.49 C 740 452.71 758.2 430.03 798.8 383.68 M 725.71 473.86 C 754.88 442 783.34 407.81 799.19 389.33 M 725.71 473.86 C 742.85 455.53 759.39 435.13 799.19 389.33 M 731.35 473.46 C 748.74 451.09 766.62 431.74 798.93 395.73 M 731.35 473.46 C 746.91 456.77 762.84 439.11 798.93 395.73 M 736.34 473.82 C 757.18 452.6 775.77 430.57 798.67 402.12 M 736.34 473.82 C 762.16 445.61 785.11 416.85 798.67 402.12 M 741.98 473.43 C 764.33 446.59 785.26 421.78 799.06 407.77 M 741.98 473.43 C 760.53 452.62 779.34 431.75 799.06 407.77 M 746.97 473.79 C 764.58 457.09 779.95 437.52 798.8 414.16 M 746.97 473.79 C 766.92 450.45 786.74 429.5 798.8 414.16 M 752.61 473.39 C 767.99 457.1 779.65 443.33 799.19 419.81 M 752.61 473.39 C 766.72 456.87 780.42 441.46 799.19 419.81 M 758.26 473 C 768.69 461.94 779.59 449.11 798.93 426.2 M 758.26 473 C 772.67 457.35 785.36 442.78 798.93 426.2 M 764.56 471.85 C 773.69 462.34 784.32 449.6 798.67 432.6 M 764.56 471.85 C 772.26 463.56 779.09 454.91 798.67 432.6 M 770.86 470.7 C 781.51 458.49 791.7 447.07 797.75 439.76 M 770.86 470.7 C 778.7 461.96 787.49 452.34 797.75 439.76 M 776.5 470.3 C 782.57 466.19 787.95 458.56 796.84 446.91 M 776.5 470.3 C 781.99 465.06 785.83 459.31 796.84 446.91" fill="none" stroke="#fff2cc" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 522.5 202 M 522.5 202 C 584.85 201.14 647.95 199.06 757.5 202 M 522.5 202 C 569.96 203.37 618.59 202.9 757.5 202 M 757.5 202 C 784.88 200.79 798.58 216.45 798 242.5 M 757.5 202 C 783.42 203.76 798.75 215.88 798 242.5 M 798 242.5 C 799.96 289.28 799.92 338.7 798 431.5 M 798 242.5 C 797.23 296.65 797.94 351.37 798 431.5 M 798 431.5 C 796.95 459.92 782.53 473.81 757.5 472 M 798 431.5 C 795.91 459.08 786.36 472.25 757.5 472 M 757.5 472 C 694.31 472.24 630.61 474.2 522.5 472 M 757.5 472 C 703.71 471.3 651.05 470.81 522.5 472 M 522.5 472 C 496.7 472.31 481.27 457.27 482 431.5 M 522.5 472 C 494.23 474.07 483.14 457.02 482 431.5 M 482 431.5 C 484.11 364.61 483.39 293.67 482 242.5 M 482 431.5 C 483.14 359.32 483.52 288.05 482 242.5 M 482 242.5 C 480.77 216.76 496.41 202.66 522.5 202 M 482 242.5 C 481.13 215.33 496.31 202.5 522.5 202" fill="none" stroke="#d6b656" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 314px; height: 1px; padding-top: 337px; margin-left: 483px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; "><font style="font-size: 14px">根据路由渲染的子组件</font></div></div></div></foreignObject><text x="640" y="341" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">根据路由渲染的子组件</text></switch></g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 218px; height: 1px; padding-top: 372px; margin-left: 542px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; "><font style="font-size: 15px">React.createElement(element)</font></div></div></div></foreignObject><text x="651" y="376" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">React.createElement(element)</text></switch></g><path d="M 736.3 135.91 C 736.3 135.91 736.3 135.91 736.3 135.91 M 736.3 135.91 C 736.3 135.91 736.3 135.91 736.3 135.91 M 734.73 143.82 C 738.92 139.17 743.83 133.01 753.1 122.68 M 734.73 143.82 C 740.95 137.05 746.59 130.42 753.1 122.68 M 733.16 151.72 C 742.4 141.86 753.64 128.5 759.4 121.53 M 733.16 151.72 C 738.48 144.71 743.9 139.08 759.4 121.53 M 732.89 158.12 C 742.06 148.29 748.6 140.22 769.63 115.86 M 732.89 158.12 C 746.19 144.05 758.8 128.91 769.63 115.86 M 735.26 161.5 C 749.08 143.78 763.23 127.09 775.28 115.46 M 735.26 161.5 C 747.15 148.08 757.85 134.33 775.28 115.46 M 737.62 164.88 C 750.19 150.73 759.17 141.61 780.92 115.07 M 737.62 164.88 C 752.59 147.67 767.17 132.57 780.92 115.07 M 739.33 169.01 C 751.48 156.72 762.14 142.76 787.22 113.92 M 739.33 169.01 C 752.8 154.5 765.78 139.44 787.22 113.92 M 741.69 172.39 C 761.65 152.25 777.28 132.49 792.86 113.52 M 741.69 172.39 C 757.55 152.52 774.03 135.32 792.86 113.52 M 744.05 175.77 C 765.53 153.53 782.87 130.66 798.5 113.13 M 744.05 175.77 C 758.07 161.06 770.62 146.2 798.5 113.13 M 746.41 179.15 C 761.42 161.7 771.23 146.77 803.49 113.49 M 746.41 179.15 C 765.91 156.78 784.02 136.66 803.49 113.49 M 750.09 181.02 C 767.25 160.36 784.18 139.21 807.82 114.6 M 750.09 181.02 C 772.73 154.63 794.95 129.86 807.82 114.6 M 753.76 182.89 C 773.29 158.9 791.36 140.1 812.15 115.72 M 753.76 182.89 C 767.52 168.11 781.76 151.71 812.15 115.72 M 758.1 184 C 778.62 161.6 798.89 137.39 816.48 116.83 M 758.1 184 C 776.15 163.59 793.43 142.4 816.48 116.83 M 761.77 185.87 C 780.76 164.87 800.36 142.4 820.16 118.7 M 761.77 185.87 C 779.81 164.13 798.82 144.73 820.16 118.7 M 765.45 187.74 C 778.11 174.66 791.11 161.3 824.49 119.82 M 765.45 187.74 C 784.76 164.69 805.22 141.68 824.49 119.82 M 769.12 189.61 C 784.55 168.61 801.31 149.45 828.82 120.93 M 769.12 189.61 C 785.05 173.13 798.59 156.42 828.82 120.93 M 773.45 190.73 C 791.3 173.53 807.73 153.74 833.15 122.05 M 773.45 190.73 C 795.05 165.77 817.39 141.1 833.15 122.05 M 778.44 191.09 C 799.35 168.13 815.77 145.21 836.17 124.67 M 778.44 191.09 C 797.74 168.85 816.16 146.83 836.17 124.67 M 783.42 191.45 C 803.32 167.79 821.9 147.92 838.53 128.05 M 783.42 191.45 C 799.69 172.04 816.65 152.16 838.53 128.05 M 788.41 191.81 C 809.07 170.29 828.76 146.26 841.55 130.68 M 788.41 191.81 C 804.23 173.95 818.96 156.92 841.55 130.68 M 793.4 192.17 C 812.17 172.14 832.26 148.07 843.92 134.05 M 793.4 192.17 C 810.51 171.73 828.95 151.99 843.92 134.05 M 798.39 192.53 C 814.63 172.01 830.57 154.1 846.93 136.68 M 798.39 192.53 C 811.25 178.35 821.66 164.69 846.93 136.68 M 803.37 192.89 C 817.14 178.04 830.47 163.33 849.3 140.06 M 803.37 192.89 C 818.61 174.82 832.68 157.88 849.3 140.06 M 807.7 194 C 818.97 179.56 835.26 164.88 849.69 145.7 M 807.7 194 C 822.11 176.4 837.57 158.59 849.69 145.7 M 816.63 189.83 C 826.78 176.13 840.01 165.77 850.74 150.59 M 816.63 189.83 C 828.66 173.98 841.79 159.74 850.74 150.59 M 824.89 186.42 C 831.16 177.51 841.16 168.2 851.14 156.23 M 824.89 186.42 C 833.83 176.27 843.99 163.91 851.14 156.23" fill="none" stroke="#dae8fc" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 768.41 114.95 C 777.3 111.8 790.78 110.77 801.42 111.73 C 812.07 112.69 824.32 116.01 832.28 120.71 C 840.24 125.4 845.92 133.21 849.19 139.91 C 852.45 146.61 854.26 154.19 851.88 160.92 C 849.5 167.65 842.47 175.07 834.89 180.29 C 827.31 185.5 816.79 190.59 806.39 192.23 C 795.98 193.87 782.64 192.47 772.45 190.12 C 762.26 187.78 752.02 183.67 745.24 178.17 C 738.46 172.67 733.26 164.15 731.77 157.11 C 730.28 150.07 732.12 142.14 736.29 135.92 C 740.47 129.69 750.9 123.57 756.79 119.76 C 762.69 115.95 768.38 113.96 771.68 113.06 C 774.97 112.17 776.22 113.76 776.57 114.41 M 766.49 114.29 C 775.16 110.69 785.94 110.55 796.42 111.55 C 806.91 112.54 820.77 116.07 829.41 120.24 C 838.05 124.41 844.48 130.15 848.26 136.56 C 852.05 142.96 854.01 151.37 852.12 158.67 C 850.22 165.97 844.12 175.22 836.9 180.36 C 829.68 185.51 818.84 187.6 808.78 189.55 C 798.73 191.5 786.79 193.78 776.57 192.08 C 766.34 190.38 754.74 184.8 747.41 179.37 C 740.09 173.94 734.81 166.43 732.61 159.5 C 730.42 152.58 730.43 144.52 734.23 137.82 C 738.04 131.12 750.42 122.92 755.46 119.28 C 760.5 115.64 762.8 116.45 764.49 116 C 766.18 115.55 765.05 116.02 765.59 116.58" fill="none" stroke="#6c8ebf" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 118px; height: 1px; padding-top: 152px; margin-left: 734px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; "><ul><li>状态</li><li>自定义事件</li></ul></div></div></div></foreignObject><text x="734" y="156" fill="#000000" font-family="Helvetica" font-size="12px">状态自定义事件</text></switch></g><path d="M 830 182.96 M 830 182.96 C 830.27 198.21 832.07 216.39 830 232 M 830 182.96 C 829.59 195.86 830.01 209.82 830 232 M 830 232 C 828.44 240.11 825.64 241.6 820 242 M 830 232 C 831.56 240.1 826.83 240.28 820 242 M 820 242 C 813.53 241.77 810.44 243.47 804.37 242 M 820 242 C 817.38 242.65 813.64 242.76 804.37 242" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 799.03 242.11 C 799.03 242.11 799.03 242.11 799.03 242.11 M 799.03 242.11 C 799.03 242.11 799.03 242.11 799.03 242.11 M 802.7 243.98 C 803.06 243.69 803.74 243 804.67 241.71 M 802.7 243.98 C 803.14 243.36 803.55 243.06 804.67 241.71" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 799.12 242 M 799.12 242 C 802.38 241.42 805.21 239.68 806.12 238.5 M 799.12 242 C 802.18 240.97 804.43 239.37 806.12 238.5 M 806.12 238.5 C 805.76 239.26 805.33 240.54 804.37 242 M 806.12 238.5 C 805.46 239.82 805.09 240.77 804.37 242 M 804.37 242 C 804.86 243.16 805.15 244.19 806.12 245.5 M 804.37 242 C 805.03 242.99 805.63 244.24 806.12 245.5 M 806.12 245.5 C 805.04 244.95 802.41 244.48 799.12 242 M 806.12 245.5 C 804.51 244.73 801.96 243.15 799.12 242" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 212px; margin-left: 832px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; background-color: #ffffff; white-space: nowrap; "><font style="font-size: 12px">重新渲染</font></div></div></div></foreignObject><text x="832" y="215" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">重新渲染</text></switch></g><path d="M 185.71 112.35 L 314.86 110.77 L 316.67 114.75 L 321.71 119.75 L 318.37 159.01 L 317.34 160.62 L 311.45 161.71 L 182.99 162.31 L 181.72 159.13 L 181.62 152.77 L 181.58 119.73 L 182.98 113.4 L 188.79 112.92" fill="#ffffff" stroke="none" pointer-events="none"/><path d="M 187.5 112 M 187.5 112 C 230.3 112.39 269.78 113.2 312.5 112 M 187.5 112 C 228.68 112.32 271.59 112.22 312.5 112 M 312.5 112 C 318.67 110.72 318.08 112.99 320 119.5 M 312.5 112 C 315.51 113.88 318.92 113.29 320 119.5 M 320 119.5 C 320.78 129.39 319.37 139 320 154.5 M 320 119.5 C 320.56 132.4 320.41 143.68 320 154.5 M 320 154.5 C 319.64 160.33 319.25 163.8 312.5 162 M 320 154.5 C 320.18 160.58 319.53 160.58 312.5 162 M 312.5 162 C 270.83 159.52 227.68 159.62 187.5 162 M 312.5 162 C 264.83 162.27 218.43 162.14 187.5 162 M 187.5 162 C 184.05 162.08 181.94 158.3 180 154.5 M 187.5 162 C 184.17 164.08 179.81 160.7 180 154.5 M 180 154.5 C 181.51 144.25 180.13 134.56 180 119.5 M 180 154.5 C 179.9 140.87 179.46 127.13 180 119.5 M 180 119.5 C 178.96 114.24 180.92 112.12 187.5 112 M 180 119.5 C 180 113.13 184.4 110.64 187.5 112" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 137px; margin-left: 181px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; "><font style="font-size: 15px">Home</font></div></div></div></foreignObject><text x="250" y="141" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Home</text></switch></g><path d="M 180 217.03 M 180 217.03 C 168.47 215.87 161.05 217.17 150.03 217.03 M 180 217.03 C 167.55 216.53 155.62 217.68 150.03 217.03 M 150.03 217.03 C 149.66 205.3 149.37 194.91 150.03 182 M 150.03 217.03 C 149.92 209.19 149.38 200.69 150.03 182 M 150.03 182 C 143.88 182.41 136.56 180.04 126.37 182 M 150.03 182 C 142.47 181.81 135.1 181.48 126.37 182" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 121.37 181.71 C 121.37 181.71 121.37 181.71 121.37 181.71 M 121.37 181.71 C 121.37 181.71 121.37 181.71 121.37 181.71 M 125.05 183.58 C 125.46 183.08 125.88 182.72 126.36 182.07 M 125.05 183.58 C 125.36 183.25 125.61 182.86 126.36 182.07" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 121.12 182 M 121.12 182 C 123.51 181.16 125.45 179.2 128.12 178.5 M 121.12 182 C 123.43 180.68 125.84 179.41 128.12 178.5 M 128.12 178.5 C 127.67 179.76 127.45 180.93 126.37 182 M 128.12 178.5 C 127.7 179.51 127.26 180.35 126.37 182 M 126.37 182 C 127.12 182.8 127.29 184.18 128.12 185.5 M 126.37 182 C 126.85 182.77 127.27 183.97 128.12 185.5 M 128.12 185.5 C 125.63 184.14 124.02 182.88 121.12 182 M 128.12 185.5 C 126.33 184.98 125.11 184.1 121.12 182" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 185.71 192.69 L 317.26 193.63 L 319.63 192.43 L 320.87 201.19 L 318.64 236.22 L 319.74 241.04 L 313 240.57 L 183.69 240.84 L 180.6 238.75 L 179.79 235.26 L 178.42 199.24 L 183.33 194.48 L 187.24 192.45" fill="#ffffff" stroke="none" pointer-events="none"/><path d="M 187.5 192 M 187.5 192 C 231.66 193.23 272.3 194.81 312.5 192 M 187.5 192 C 213.53 192.01 237.93 191.84 312.5 192 M 312.5 192 C 319.2 192.78 320.9 195.7 320 199.5 M 312.5 192 C 315.87 192.18 318.89 192.2 320 199.5 M 320 199.5 C 320.92 209.78 319.04 222.85 320 234.5 M 320 199.5 C 320.18 210.41 318.89 221.26 320 234.5 M 320 234.5 C 319.23 238.32 319.12 241.88 312.5 242 M 320 234.5 C 322.18 239.95 317.09 242.05 312.5 242 M 312.5 242 C 282.62 242 254.79 240.71 187.5 242 M 312.5 242 C 270.58 242.68 227.72 242.9 187.5 242 M 187.5 242 C 181.51 242.28 180.83 238.27 180 234.5 M 187.5 242 C 184.63 241.12 178.71 240.48 180 234.5 M 180 234.5 C 181 227.8 178.33 220.65 180 199.5 M 180 234.5 C 180.28 222.55 179.45 212.04 180 199.5 M 180 199.5 C 179.7 194.08 184.15 193 187.5 192 M 180 199.5 C 178.51 196.68 181.04 193.25 187.5 192" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 217px; margin-left: 181px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; "><font style="font-size: 15px">About</font></div></div></div></foreignObject><text x="250" y="221" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">About</text></switch></g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 182px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; "><font style="font-size: 16px">RouterLink组件</font></div></div></div></foreignObject><text x="60" y="186" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">RouterLink组件</text></switch></g><path d="M 180 137.03 M 180 137.03 C 169.61 136.55 159.37 137.65 150.03 137.03 M 180 137.03 C 170.51 136.14 161.16 136.07 150.03 137.03 M 150.03 137.03 C 149.88 152.62 150.73 165.06 150.03 182 M 150.03 137.03 C 149.4 149.08 149.97 160.45 150.03 182 M 150.03 182 C 143.57 181.24 133.37 181.37 126.37 182 M 150.03 182 C 144.2 181.62 136.77 182.4 126.37 182" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 121.37 181.71 C 121.37 181.71 121.37 181.71 121.37 181.71 M 121.37 181.71 C 121.37 181.71 121.37 181.71 121.37 181.71 M 125.05 183.58 C 125.47 183.31 125.96 182.73 126.36 182.07 M 125.05 183.58 C 125.27 183.24 125.66 182.84 126.36 182.07" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 121.12 182 M 121.12 182 C 124.02 180.59 125.45 179.48 128.12 178.5 M 121.12 182 C 123.48 180.78 125.2 180.09 128.12 178.5 M 128.12 178.5 C 127.88 179.97 126.66 181 126.37 182 M 128.12 178.5 C 127.53 179.7 126.98 180.74 126.37 182 M 126.37 182 C 126.61 182.96 127.27 183.73 128.12 185.5 M 126.37 182 C 126.86 183.16 127.83 184.53 128.12 185.5 M 128.12 185.5 C 125.78 184.44 122.96 183.32 121.12 182 M 128.12 185.5 C 126.37 184.83 124.5 183.69 121.12 182" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 250 242 M 250 242 C 251.7 277.64 251.88 311.74 250 349.89 M 250 242 C 250.03 272.45 249.73 303.8 250 349.89 M 250 349.89 C 251.15 354.95 252.67 360.9 260 359.89 M 250 349.89 C 249.01 356.18 255.55 360.23 260 359.89 M 260 359.89 C 303.27 358.77 349.96 361.69 404.09 359.89 M 260 359.89 C 317.3 360.58 372.53 360.62 404.09 359.89" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 402.67 356.01 C 402.67 356.01 402.67 356.01 402.67 356.01 M 402.67 356.01 C 402.67 356.01 402.67 356.01 402.67 356.01 M 404.37 360.15 C 405.25 359.22 405.75 358.83 406.34 357.88 M 404.37 360.15 C 404.97 359.36 405.51 358.84 406.34 357.88" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 409.34 359.89 M 409.34 359.89 C 406.39 361.64 404.13 361.83 402.34 363.39 M 409.34 359.89 C 407.24 360.9 405.06 361.76 402.34 363.39 M 402.34 363.39 C 403.33 362.15 403.39 361.03 404.09 359.89 M 402.34 363.39 C 402.96 362.43 403.25 361.61 404.09 359.89 M 404.09 359.89 C 403.13 358.48 402.81 357.33 402.34 356.39 M 404.09 359.89 C 403.36 358.49 402.7 357.62 402.34 356.39 M 402.34 356.39 C 404.28 356.9 406.55 359.29 409.34 359.89 M 402.34 356.39 C 405.34 357.99 407.32 359.3 409.34 359.89" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 287px; margin-left: 251px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; background-color: #ffffff; white-space: nowrap; "><font style="font-size: 12px">点击导航时</font></div></div></div></foreignObject><text x="251" y="290" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">点击导航时</text></switch></g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 359px; margin-left: 332px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; background-color: #ffffff; white-space: nowrap; "><font style="font-size: 12px">通知变化</font></div></div></div></foreignObject><text x="332" y="363" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">通知变化</text></switch></g><path d="M 288.49 18.57 L 762.52 20.48 L 765.29 21.64 L 765.36 38.48 L 765.06 39.81 L 763.92 40.87 L 289.92 39.57 L 285.71 39.76 L 283.85 36.52 L 285.02 23.31 L 289.29 18.32" fill="#ffffff" stroke="none" pointer-events="none"/><path d="M 288 20 M 288 20 C 466.97 18.25 643.95 17.73 762 20 M 288 20 C 454.98 19.61 621.37 19.14 762 20 M 762 20 C 763.49 18.52 763.27 21.55 765 23 M 762 20 C 762.26 18.23 765.96 22.51 765 23 M 765 23 C 764.02 27.75 764.66 30.95 765 37 M 765 23 C 765.58 27.5 764.57 32.05 765 37 M 765 37 C 765.79 40.24 762.31 41.98 762 40 M 765 37 C 766.98 40.04 762.58 39.88 762 40 M 762 40 C 580.92 41.68 400.7 41.09 288 40 M 762 40 C 601.21 40.23 440.11 40.1 288 40 M 288 40 C 285.6 41.27 285.09 38.92 285 37 M 288 40 C 286.31 40.37 284.65 39.5 285 37 M 285 37 C 286.22 33.42 285.4 27.78 285 23 M 285 37 C 285.73 31.8 285.75 26.58 285 23 M 285 23 C 285.48 21.04 286.27 20.54 288 20 M 285 23 C 284.03 20.31 287.44 22.18 288 20" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 478px; height: 1px; padding-top: 30px; margin-left: 286px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">https://demo.rua.plus/about</div></div></div></foreignObject><text x="525" y="34" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">https://demo.rua.plus/about</text></switch></g><path d="M 250.03 112 M 250.03 112 C 249.57 99.76 251.86 88.15 250.03 76 M 250.03 112 C 249.99 103.79 249.57 93.5 250.03 76 M 250.03 76 C 340.92 72.61 433.22 72.7 525 76 M 250.03 76 C 357.64 74.3 465.23 74.43 525 76 M 525 76 C 524.99 63.44 523.89 52.58 525 46.37 M 525 76 C 525.66 67.03 524.79 57.49 525 46.37" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 525.06 41.05 C 525.06 41.05 525.06 41.05 525.06 41.05 M 525.06 41.05 C 525.06 41.05 525.06 41.05 525.06 41.05 M 525.45 46.7 C 525.81 45.98 526.35 45.49 526.77 45.19 M 525.45 46.7 C 525.95 46.13 526.46 45.56 526.77 45.19" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 525 41.12 M 525 41.12 C 526.42 43.4 527.35 46.34 528.5 48.12 M 525 41.12 C 526.19 43.52 526.96 45.67 528.5 48.12 M 528.5 48.12 C 527.15 47.69 526.85 46.83 525 46.37 M 528.5 48.12 C 527.66 47.64 526.84 47.22 525 46.37 M 525 46.37 C 523.65 46.99 522.8 47.8 521.5 48.12 M 525 46.37 C 524.07 46.78 523.23 47.28 521.5 48.12 M 521.5 48.12 C 522.22 45.87 523.87 43.17 525 41.12 M 521.5 48.12 C 521.87 46.99 523.06 45.46 525 41.12" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 78px; margin-left: 365px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; background-color: #ffffff; white-space: nowrap; "><font style="font-size: 12px">修改地址栏</font></div></div></div></foreignObject><text x="365" y="82" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">修改地址栏</text></switch></g><path d="M 765 32 M 765 32 C 779.62 32.76 793.09 33.43 810.31 32 M 765 32 C 776.62 30.98 788.8 31.2 810.31 32 M 810.31 32 C 815.74 30.63 818.68 33.36 820.31 42 M 810.31 32 C 817.57 31.51 821.05 35.73 820.31 42 M 820.31 42 C 820.02 55.38 819.06 66.84 820.32 93.58 M 820.31 42 C 819.7 57.52 820.25 73.33 820.32 93.58" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 816.76 91.9 C 816.76 91.9 816.76 91.9 816.76 91.9 M 816.76 91.9 C 816.76 91.9 816.76 91.9 816.76 91.9 M 818.47 96.03 C 818.66 95.59 819.36 95.07 820.44 93.77 M 818.47 96.03 C 819.06 95.26 819.78 94.47 820.44 93.77" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><path d="M 820.32 98.83 M 820.32 98.83 C 818.69 96.28 818.07 94.81 816.82 91.83 M 820.32 98.83 C 819.46 97.48 818.7 95.22 816.82 91.83 M 816.82 91.83 C 818.22 92.38 818.73 92.82 820.32 93.58 M 816.82 91.83 C 817.75 92.22 818.83 92.99 820.32 93.58 M 820.32 93.58 C 821.6 93.25 822.85 92.32 823.82 91.83 M 820.32 93.58 C 821.59 93.16 822.84 92.38 823.82 91.83 M 823.82 91.83 C 822.57 93.39 821.7 95.03 820.32 98.83 M 823.82 91.83 C 823.07 94.13 822.15 95.67 820.32 98.83" fill="none" stroke="#000000" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 59px; margin-left: 819px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; background-color: #ffffff; white-space: nowrap; "><font style="font-size: 12px">监听变化，根据地址重新渲染子组件</font></div></div></div></foreignObject><text x="819" y="62" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">监听变化，根据地址重新渲染子组件</text></switch></g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 10px; margin-left: 286px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">地址栏</div></div></div></foreignObject><text x="315" y="14" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">地址栏</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/styles/rua.css b/styles/rua.css
index 2b45049..90fda2c 100644
--- a/styles/rua.css
+++ b/styles/rua.css
@@ -1,118 +1,118 @@
 #article {
-    --color-prettylights-syntax-comment: #6e7781;
-    --color-prettylights-syntax-constant: #0550ae;
-    --color-prettylights-syntax-entity: #8250df;
-    --color-prettylights-syntax-storage-modifier-import: #24292f;
-    --color-prettylights-syntax-entity-tag: #116329;
-    --color-prettylights-syntax-keyword: #cf222e;
-    --color-prettylights-syntax-string: #0a3069;
-    --color-prettylights-syntax-variable: #953800;
-    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
-    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
-    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
-    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
-    --color-prettylights-syntax-carriage-return-bg: #cf222e;
-    --color-prettylights-syntax-string-regexp: #116329;
-    --color-prettylights-syntax-markup-list: #3b2300;
-    --color-prettylights-syntax-markup-heading: #0550ae;
-    --color-prettylights-syntax-markup-italic: #24292f;
-    --color-prettylights-syntax-markup-bold: #24292f;
-    --color-prettylights-syntax-markup-deleted-text: #82071e;
-    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
-    --color-prettylights-syntax-markup-inserted-text: #116329;
-    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
-    --color-prettylights-syntax-markup-changed-text: #953800;
-    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
-    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
-    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
-    --color-prettylights-syntax-meta-diff-range: #8250df;
-    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
-    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
-    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
-    --color-fg-default: #24292f;
-    --color-fg-muted: #57606a;
-    --color-fg-subtle: #6e7781;
-    --color-canvas-default: #ffffff;
-    --color-canvas-subtle: #f6f8fa;
-    --color-border-default: #d0d7de;
-    --color-border-muted: hsla(210, 18%, 87%, 1);
-    --color-neutral-muted: rgba(175, 184, 193, 0.2);
-    --color-accent-fg: #0969da;
-    --color-accent-emphasis: #0969da;
-    --color-attention-subtle: #fff8c5;
-    --color-danger-fg: #cf222e;
+  --color-prettylights-syntax-comment: #6e7781;
+  --color-prettylights-syntax-constant: #0550ae;
+  --color-prettylights-syntax-entity: #8250df;
+  --color-prettylights-syntax-storage-modifier-import: #24292f;
+  --color-prettylights-syntax-entity-tag: #116329;
+  --color-prettylights-syntax-keyword: #cf222e;
+  --color-prettylights-syntax-string: #0a3069;
+  --color-prettylights-syntax-variable: #953800;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+  --color-prettylights-syntax-carriage-return-bg: #cf222e;
+  --color-prettylights-syntax-string-regexp: #116329;
+  --color-prettylights-syntax-markup-list: #3b2300;
+  --color-prettylights-syntax-markup-heading: #0550ae;
+  --color-prettylights-syntax-markup-italic: #24292f;
+  --color-prettylights-syntax-markup-bold: #24292f;
+  --color-prettylights-syntax-markup-deleted-text: #82071e;
+  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+  --color-prettylights-syntax-markup-inserted-text: #116329;
+  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+  --color-prettylights-syntax-markup-changed-text: #953800;
+  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
+  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+  --color-prettylights-syntax-meta-diff-range: #8250df;
+  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+  --color-fg-default: #24292f;
+  --color-fg-muted: #57606a;
+  --color-fg-subtle: #6e7781;
+  --color-canvas-default: #ffffff;
+  --color-canvas-subtle: #f6f8fa;
+  --color-border-default: #d0d7de;
+  --color-border-muted: hsla(210, 18%, 87%, 1);
+  --color-neutral-muted: rgba(175, 184, 193, 0.2);
+  --color-accent-fg: #0969da;
+  --color-accent-emphasis: #0969da;
+  --color-attention-subtle: #fff8c5;
+  --color-danger-fg: #cf222e;
 }
 
 .dark #article {
-    --color-prettylights-syntax-comment: #8b949e;
-    --color-prettylights-syntax-constant: #79c0ff;
-    --color-prettylights-syntax-entity: #d2a8ff;
-    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
-    --color-prettylights-syntax-entity-tag: #7ee787;
-    --color-prettylights-syntax-keyword: #ff7b72;
-    --color-prettylights-syntax-string: #a5d6ff;
-    --color-prettylights-syntax-variable: #ffa657;
-    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
-    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
-    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
-    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
-    --color-prettylights-syntax-carriage-return-bg: #b62324;
-    --color-prettylights-syntax-string-regexp: #7ee787;
-    --color-prettylights-syntax-markup-list: #f2cc60;
-    --color-prettylights-syntax-markup-heading: #1f6feb;
-    --color-prettylights-syntax-markup-italic: #c9d1d9;
-    --color-prettylights-syntax-markup-bold: #c9d1d9;
-    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
-    --color-prettylights-syntax-markup-deleted-bg: #67060c;
-    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
-    --color-prettylights-syntax-markup-inserted-bg: #033a16;
-    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
-    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
-    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
-    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
-    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
-    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
-    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
-    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
-    --color-fg-default: #c9d1d9;
-    --color-fg-muted: #8b949e;
-    --color-fg-subtle: #484f58;
-    --color-canvas-default: #0d1117;
-    --color-canvas-subtle: #161b22;
-    --color-border-default: #30363d;
-    --color-border-muted: #21262d;
-    --color-neutral-muted: rgba(110, 118, 129, 0.4);
-    --color-accent-fg: #58a6ff;
-    --color-accent-emphasis: #1f6feb;
-    --color-attention-subtle: rgba(187, 128, 9, 0.15);
-    --color-danger-fg: #f85149;
+  --color-prettylights-syntax-comment: #8b949e;
+  --color-prettylights-syntax-constant: #79c0ff;
+  --color-prettylights-syntax-entity: #d2a8ff;
+  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+  --color-prettylights-syntax-entity-tag: #7ee787;
+  --color-prettylights-syntax-keyword: #ff7b72;
+  --color-prettylights-syntax-string: #a5d6ff;
+  --color-prettylights-syntax-variable: #ffa657;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+  --color-prettylights-syntax-carriage-return-bg: #b62324;
+  --color-prettylights-syntax-string-regexp: #7ee787;
+  --color-prettylights-syntax-markup-list: #f2cc60;
+  --color-prettylights-syntax-markup-heading: #1f6feb;
+  --color-prettylights-syntax-markup-italic: #c9d1d9;
+  --color-prettylights-syntax-markup-bold: #c9d1d9;
+  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+  --color-prettylights-syntax-markup-deleted-bg: #67060c;
+  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+  --color-prettylights-syntax-markup-inserted-bg: #033a16;
+  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+  --color-fg-default: #c9d1d9;
+  --color-fg-muted: #8b949e;
+  --color-fg-subtle: #484f58;
+  --color-canvas-default: #0d1117;
+  --color-canvas-subtle: #161b22;
+  --color-border-default: #30363d;
+  --color-border-muted: #21262d;
+  --color-neutral-muted: rgba(110, 118, 129, 0.4);
+  --color-accent-fg: #58a6ff;
+  --color-accent-emphasis: #1f6feb;
+  --color-attention-subtle: rgba(187, 128, 9, 0.15);
+  --color-danger-fg: #f85149;
 }
 
 #article {
-    @apply text-lg leading-10;
+  @apply text-lg leading-10;
 }
 
 #article .toc {
-    padding-left: 0.8em;
-    @apply my-4;
+  padding-left: 0.8em;
+  @apply my-4;
 }
 
 #article .toc li {
-    list-style-type: none;
+  list-style-type: none;
 }
 
 #article h1 {
-    font-weight: bold;
-    text-align: center;
-    @apply text-gray-800 dark:text-gray-200;
-    @apply mt-8 text-5xl font-Barlow;
+  font-weight: bold;
+  text-align: center;
+  @apply text-gray-800 dark:text-gray-200;
+  @apply mt-8 text-5xl font-Barlow;
 }
 
 #article time {
-    display: block;
-    text-align: center;
-    @apply text-gray-400 dark:text-gray-600;
-    @apply mt-8 mb-20;
+  display: block;
+  text-align: center;
+  @apply text-gray-400 dark:text-gray-600;
+  @apply mt-8 mb-20;
 }
 
 #article h2,
@@ -120,7 +120,7 @@ h3,
 h4,
 h5,
 h6 {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 #article h2:hover::before,
@@ -128,243 +128,243 @@ h3:hover::before,
 h4:hover::before,
 h5:hover::before,
 h6:hover::before {
-    content: '#';
-    left: -1.7rem;
-    @apply absolute text-gray-400;
+  content: '#';
+  left: -1.7rem;
+  @apply absolute text-gray-400;
 }
 
 #article h2 {
-    @apply relative text-3xl;
-    @apply text-gray-700 dark:text-gray-200;
-    @apply mt-8 mb-2;
+  @apply relative text-3xl;
+  @apply text-gray-700 dark:text-gray-200;
+  @apply mt-8 mb-2;
 }
 
 #article h3 {
-    @apply relative text-2xl;
-    @apply mt-6 mb-2;
+  @apply relative text-2xl;
+  @apply mt-6 mb-2;
 }
 
 #article h4 {
-    @apply relative text-xl;
-    @apply mt-6 mb-2;
+  @apply relative text-xl;
+  @apply mt-6 mb-2;
 }
 
 #article h5 {
-    @apply relative;
-    @apply mt-4 mb-2;
+  @apply relative;
+  @apply mt-4 mb-2;
 }
 
 #article h6 {
-    @apply relative;
-    @apply mt-2 mb-2;
+  @apply relative;
+  @apply mt-2 mb-2;
 }
 
 #article table {
-    border-spacing: 0;
-    border-collapse: collapse;
-    display: block;
-    width: max-content;
-    max-width: 100%;
-    overflow: auto;
-    margin-top: 0;
-    margin-bottom: 16px;
+  border-spacing: 0;
+  border-collapse: collapse;
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+  margin-top: 0;
+  margin-bottom: 16px;
 }
 
 #article td,
 #article th {
-    padding: 0;
+  padding: 0;
 }
 
 #article details summary {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 #article table th {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 #article table th,
 #article table td {
-    padding: 6px 13px;
+  padding: 6px 13px;
 }
 
 #article thead tr:first-child {
-    @apply border-t-0;
+  @apply border-t-0;
 }
 
 #article table tr {
-    background-color: var(--color-canvas-default);
-    border-top: 1px solid var(--color-border-muted);
+  background-color: var(--color-canvas-default);
+  border-top: 1px solid var(--color-border-muted);
 }
 
 #article table tr:nth-child(2n) {
-    background-color: var(--color-canvas-subtle);
+  background-color: var(--color-canvas-subtle);
 }
 
 #article table img {
-    background-color: transparent;
+  background-color: transparent;
 }
 
 #article blockquote {
-    margin: 0;
-    padding: 0 1em;
-    color: var(--color-fg-muted);
-    border-left: 0.25em solid var(--color-border-default);
+  margin: 0;
+  padding: 0 1em;
+  color: var(--color-fg-muted);
+  border-left: 0.25em solid var(--color-border-default);
 }
 
 #article kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
     Liberation Mono, monospace;
-    line-height: 10px;
-    color: var(--color-fg-default);
-    vertical-align: middle;
-    background-color: var(--color-canvas-subtle);
-    border: solid 1px var(--color-neutral-muted);
-    border-bottom-color: var(--color-neutral-muted);
-    border-radius: 6px;
-    box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
+  line-height: 10px;
+  color: var(--color-fg-default);
+  vertical-align: middle;
+  background-color: var(--color-canvas-subtle);
+  border: solid 1px var(--color-neutral-muted);
+  border-bottom-color: var(--color-neutral-muted);
+  border-radius: 6px;
+  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
 }
 
 #article hr {
-    box-sizing: content-box;
-    overflow: hidden;
-    background: transparent;
-    border-bottom: 1px solid var(--color-border-muted);
-    height: 0.25em;
-    padding: 0;
-    margin: 24px 0;
-    background-color: var(--color-border-default);
-    border: 0;
+  box-sizing: content-box;
+  overflow: hidden;
+  background: transparent;
+  border-bottom: 1px solid var(--color-border-muted);
+  height: 0.25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: var(--color-border-default);
+  border: 0;
 }
 
 #article hr::before {
-    display: table;
-    content: '';
+  display: table;
+  content: '';
 }
 
 #article hr::after {
-    display: table;
-    clear: both;
-    content: '';
+  display: table;
+  clear: both;
+  content: '';
 }
 
 #article code,
 #article tt {
-    padding: 0.2em 0.4em;
-    margin: 0;
-    font-size: 85%;
-    background-color: var(--color-neutral-muted);
-    border-radius: 6px;
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: var(--color-neutral-muted);
+  border-radius: 6px;
 }
 
 #article pre > code {
-    padding: 0;
-    margin: 0;
-    word-break: normal;
-    white-space: pre;
-    background: transparent;
-    border: 0;
+  padding: 0;
+  margin: 0;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
 }
 
 #article code,
 #article kbd,
 #article pre,
 #article samp {
-    /* font-family: monospace, monospace; */
-    font-size: 16px;
+  /* font-family: monospace, monospace; */
+  font-size: 16px;
 }
 
 #article mark {
-    background-color: var(--color-attention-subtle);
-    color: var(--color-text-primary);
+  background-color: var(--color-attention-subtle);
+  color: var(--color-text-primary);
 }
 
 #article sub,
 #article sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
 }
 
 #article sub {
-    bottom: -0.25em;
+  bottom: -0.25em;
 }
 
 #article sup {
-    top: -0.5em;
+  top: -0.5em;
 }
 
 #article ol li {
-    list-style-type: auto;
+  list-style-type: auto;
 }
 
 #article ul li {
-    list-style-type: initial;
+  list-style-type: initial;
 }
 
 #article ul.no-list,
 #article ol.no-list {
-    padding: 0;
-    list-style-type: none;
+  padding: 0;
+  list-style-type: none;
 }
 
 #article ol[type='1'] {
-    list-style-type: decimal;
+  list-style-type: decimal;
 }
 
 #article ol[type='a'] {
-    list-style-type: lower-alpha;
+  list-style-type: lower-alpha;
 }
 
 #article ol[type='i'] {
-    list-style-type: lower-roman;
+  list-style-type: lower-roman;
 }
 
 #article div > ol:not([type]) {
-    list-style-type: decimal;
+  list-style-type: decimal;
 }
 
 #article ul,
 #article ol {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-left: 2em;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 2em;
 }
 
 #article ol ol,
 #article ul ol {
-    list-style-type: lower-roman;
+  list-style-type: lower-roman;
 }
 
 #article ul ul ol,
 #article ul ol ol,
 #article ol ul ol,
 #article ol ol ol {
-    list-style-type: lower-alpha;
+  list-style-type: lower-alpha;
 }
 
 #article dd {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 #article .sp-layout > .sp-stack {
-    height: 400px;
+  height: 400px;
 }
 
 @media screen and (max-width: 768px) {
-    #article .sp-layout > .sp-stack {
-        height: auto;
-    }
+  #article .sp-layout > .sp-stack {
+    height: auto;
+  }
 }
 
 #article img {
-    border-radius: 6px;
+  border-radius: 6px;
 }
 
 #article .cm-editor .cm-line {
-    font-size: 15px;
-    font-family: 'JetBrains Mono', -apple-system, monospace;
+  font-size: 15px;
+  font-family: 'JetBrains Mono', -apple-system, monospace;
 }