diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 8e964a4f..69d58fe5 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -26,16 +26,13 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
-        with:
-          version: 10
 
       - name: Setup Node
         uses: actions/setup-node@v6
         with:
           node-version-file: package.json
           check-latest: true
-          cache: 'pnpm'
-          package-manager-cache: false
+          cache: pnpm
 
       - name: Setup Pages
         uses: actions/configure-pages@v5
@@ -45,6 +42,7 @@ jobs:
 
       - name: Build with VitePress
         run: pnpm run docs:build
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v4
         with:
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 5192ac0a..cb970309 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -26,38 +26,18 @@ jobs:
           git config --global user.name 'github-actions[bot]'
           git config --global user.email 'github-actions[bot]@users.noreply.github.com'
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Setup Node
         uses: actions/setup-node@v6
         with:
           node-version-file: package.json
           check-latest: true
-          #cache: yarn
-          package-manager-cache: false
-
-      - name: Setup yarn
-        run: |
-          corepack enable
-          yarn set version stable
+          cache: pnpm
 
-      - name: Get yarn cachedir
-        id: yarn-cachedir
-        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-      - name: Cache yarn
-        uses: actions/cache@v5
-        with:
-          path: ${{ steps.yarn-cachedir.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies (yarn)
-        run: yarn install
-
-      - name: Cache apt
-        uses: awalsh128/cache-apt-pkgs-action@latest
-        with:
-          packages: clang-format-19 clang-tidy-19
-          execute_install_scripts: true
+      - name: Install dependencies (pnpm)
+        run: pnpm install
 
       - name: Cpp Lint (clang-format & clang-tidy)
         uses: cpp-linter/cpp-linter-action@v2
@@ -66,16 +46,16 @@ jobs:
         with:
           style: file
           thread-comments: update
-          version: 19
+          # version: 19
           files-changed-only: false
         continue-on-error: true
 
       - name: ESLint (+vue +prettier +ts)
-        run: yarn run eslint --fix --ignore-pattern .gitignore
+        run: pnpm exec eslint --fix --ignore-pattern .gitignore
         continue-on-error: true
 
       - name: Prettier
-        run: yarn run prettier --write .
+        run: pnpm exec prettier --write .
         continue-on-error: true
 
       - name: Markdown Lint
@@ -89,7 +69,6 @@ jobs:
       - name: Autocorrect Fix
         uses: huacnlee/autocorrect-action@v2
         with:
-          use_npm: true
           args: --fix
         continue-on-error: true
 
diff --git a/docs/.vitepress/nscfg.mts b/docs/.vitepress/nscfg.mts
index 8d6d0497..bf643fb0 100644
--- a/docs/.vitepress/nscfg.mts
+++ b/docs/.vitepress/nscfg.mts
@@ -15,7 +15,7 @@ export const Nav: DefaultTheme.NavItem[] = [
   {
     text: "组件展示",
     link: "/杂项/组件展示",
-  }
+  },
 ];
 export const Sidebar: DefaultTheme.Sidebar = {
   "/教程/正文/": [
diff --git a/docs/.vitepress/theme/components/CodeCompare.vue b/docs/.vitepress/theme/components/CodeCompare.vue
index ea297b4c..5bfa9737 100644
--- a/docs/.vitepress/theme/components/CodeCompare.vue
+++ b/docs/.vitepress/theme/components/CodeCompare.vue
@@ -4,19 +4,19 @@ defineProps({
   // 左侧标题，默认 "Bad"
   leftTitle: {
     type: String,
-    default: '错误写法 (Bad)'
+    default: "错误写法 (Bad)",
   },
   // 右侧标题，默认 "Good"
   rightTitle: {
     type: String,
-    default: '正确写法 (Good)'
+    default: "正确写法 (Good)",
   },
   // 是否为垂直布局（可选强制垂直）
   vertical: {
     type: Boolean,
-    default: false
-  }
-})
+    default: false,
+  },
+});
 </script>
 
 <template>
@@ -94,15 +94,15 @@ defineProps({
   color: #349d6e;
 }
 
-.pane-content{
+.pane-content {
   flex: 100%;
   display: flex;
 }
 /* 调整插槽内代码块的 margin，使其贴合容器 */
-.pane-content :deep(div[class*='language-']) {
+.pane-content :deep(div[class*="language-"]) {
   margin: 0 !important;
   border-radius: 0 !important;
   display: flex;
   flex: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vitepress/theme/components/Quiz.vue b/docs/.vitepress/theme/components/Quiz.vue
index 91caf09c..946c6c96 100644
--- a/docs/.vitepress/theme/components/Quiz.vue
+++ b/docs/.vitepress/theme/components/Quiz.vue
@@ -1,113 +1,120 @@
 <!-- .vitepress/theme/components/Quiz.vue -->
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed } from "vue";
 
 const props = defineProps({
   // 问题类型：'single' | 'multi'
   type: {
     type: String,
-    default: 'single'
+    default: "single",
   },
   // 选项列表，格式可以是简单的字符串数组，或者对象数组
   // 推荐对象格式: [{ label: '描述', value: 'A' }]
   options: {
     type: Array,
-    required: true
+    required: true,
   },
   // 正确答案
   // 单选传入值 (如 'A')
   // 多选传入数组 (如 ['A', 'C'])
   answer: {
     type: [String, Array],
-    required: true
-  }
-})
+    required: true,
+  },
+});
 
 // 用户选中的值
 // 单选是 null 或 value
 // 多选是 []
-const selected = ref(props.type === 'multi' ? [] : null)
-const isSubmitted = ref(false)
+const selected = ref(props.type === "multi" ? [] : null);
+const isSubmitted = ref(false);
 
 // 判断是否回答正确
 const isCorrect = computed(() => {
-  if (!isSubmitted.value) return false
-  
-  if (props.type === 'single') {
-    return selected.value === props.answer
+  if (!isSubmitted.value) return false;
+
+  if (props.type === "single") {
+    return selected.value === props.answer;
   } else {
     // 多选比较：先排序再转字符串比较，确保顺序不影响结果
-    const userAns = JSON.stringify([...selected.value].sort())
-    const correctAns = JSON.stringify([...props.answer].sort())
-    return userAns === correctAns
+    const userAns = JSON.stringify([...selected.value].sort());
+    const correctAns = JSON.stringify([...props.answer].sort());
+    return userAns === correctAns;
   }
-})
+});
 
 // 处理选项点击
 const handleOptionClick = (optionValue) => {
-  if (isSubmitted.value && props.type === 'single') return // 单选提交后不能改
-  
-  if (props.type === 'single') {
-    selected.value = optionValue
+  if (isSubmitted.value && props.type === "single") return; // 单选提交后不能改
+
+  if (props.type === "single") {
+    selected.value = optionValue;
     // 单选模式：选中即提交
-    isSubmitted.value = true
+    isSubmitted.value = true;
   } else {
     // 多选模式：如果不包含则添加，包含则移除（提交后依然允许查看，但通常提交后会禁用修改，这里为了体验设为提交后不可改）
-    if (isSubmitted.value) return 
+    if (isSubmitted.value) return;
 
-    const index = selected.value.indexOf(optionValue)
+    const index = selected.value.indexOf(optionValue);
     if (index === -1) {
-      selected.value.push(optionValue)
+      selected.value.push(optionValue);
     } else {
-      selected.value.splice(index, 1)
+      selected.value.splice(index, 1);
     }
   }
-}
+};
 
 // 多选提交按钮
 const submitMulti = () => {
-  if (selected.value.length === 0) return // 没选不能交
-  isSubmitted.value = true
-}
+  if (selected.value.length === 0) return; // 没选不能交
+  isSubmitted.value = true;
+};
 
 // 辅助函数：判断某个选项现在的状态样式
 const getOptionClass = (optionValue) => {
-  const isSelected = props.type === 'single' 
-    ? selected.value === optionValue 
-    : selected.value.includes(optionValue)
+  const isSelected =
+    props.type === "single"
+      ? selected.value === optionValue
+      : selected.value.includes(optionValue);
 
   if (!isSubmitted.value) {
-    return isSelected ? 'selected' : ''
+    return isSelected ? "selected" : "";
   }
 
   // 提交后的状态判定
   // 1. 如果是单选
-  if (props.type === 'single') {
-    if (optionValue === props.answer) return 'correct' // 正确答案总是绿色
-    if (isSelected && optionValue !== props.answer) return 'wrong' // 选错的项目变红
+  if (props.type === "single") {
+    if (optionValue === props.answer) return "correct"; // 正确答案总是绿色
+    if (isSelected && optionValue !== props.answer) return "wrong"; // 选错的项目变红
   }
-  
+
   // 2. 如果是多选
-  if (props.type === 'multi') {
-    const isAns = props.answer.includes(optionValue)
-    if (isAns) return 'correct' // 是答案的一部分
-    if (isSelected && !isAns) return 'wrong' // 选了不该选的
+  if (props.type === "multi") {
+    const isAns = props.answer.includes(optionValue);
+    if (isAns) return "correct"; // 是答案的一部分
+    if (isSelected && !isAns) return "wrong"; // 选了不该选的
   }
 
-  return ''
-}
+  return "";
+};
 </script>
 
 <template>
-  <div class="quiz-container" :class="{ 'quiz-passed': isSubmitted && isCorrect, 'quiz-failed': isSubmitted && !isCorrect }">
+  <div
+    class="quiz-container"
+    :class="{
+      'quiz-passed': isSubmitted && isCorrect,
+      'quiz-failed': isSubmitted && !isCorrect,
+    }"
+  >
     <div class="quiz-header">
-      <span class="quiz-badge">{{ type === 'single' ? '单选' : '多选' }}</span>
+      <span class="quiz-badge">{{ type === "single" ? "单选" : "多选" }}</span>
       <span class="quiz-question"><slot name="question">题目内容</slot></span>
     </div>
 
     <div class="quiz-options">
-      <div 
-        v-for="(opt, idx) in options" 
+      <div
+        v-for="(opt, idx) in options"
         :key="idx"
         class="quiz-option"
         :class="getOptionClass(opt.value)"
@@ -124,7 +131,11 @@ const getOptionClass = (optionValue) => {
 
     <!-- 多选的提交按钮 -->
     <div v-if="type === 'multi' && !isSubmitted" class="quiz-footer">
-      <button class="submit-btn" @click="submitMulti" :disabled="selected.length === 0">
+      <button
+        class="submit-btn"
+        @click="submitMulti"
+        :disabled="selected.length === 0"
+      >
         确认答案
       </button>
     </div>
@@ -132,7 +143,7 @@ const getOptionClass = (optionValue) => {
     <!-- 结果解析区域 (利用 Slot) -->
     <div v-if="isSubmitted" class="quiz-result">
       <div class="result-title" :class="isCorrect ? 'text-green' : 'text-red'">
-        {{ isCorrect ? '回答正确！🎉' : '回答错误 😅' }}
+        {{ isCorrect ? "回答正确！🎉" : "回答错误 😅" }}
       </div>
       <div class="result-explanation">
         <p class="explanation-title">解析：</p>
@@ -147,7 +158,7 @@ const getOptionClass = (optionValue) => {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background-color: var(--vp-c-bg-soft);
-  padding: .5rem 1.5rem 1.5rem 1.5rem;
+  padding: 0.5rem 1.5rem 1.5rem 1.5rem;
   margin: 1.5rem 0;
   transition: border-color 0.3s;
 }
@@ -265,8 +276,12 @@ const getOptionClass = (optionValue) => {
   margin-bottom: 0.5rem;
 }
 
-.text-green { color: var(--vp-c-green); }
-.text-red { color: var(--vp-c-red); }
+.text-green {
+  color: var(--vp-c-green);
+}
+.text-red {
+  color: var(--vp-c-red);
+}
 
 .explanation-title {
   font-size: 0.9rem;
@@ -276,7 +291,13 @@ const getOptionClass = (optionValue) => {
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(-5px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vitepress/theme/components/Term.vue b/docs/.vitepress/theme/components/Term.vue
index 270f13a0..dce27d20 100644
--- a/docs/.vitepress/theme/components/Term.vue
+++ b/docs/.vitepress/theme/components/Term.vue
@@ -1,59 +1,60 @@
-<template>
-  <span class="term-with-tooltip">
-    <!-- 术语部分 -->
-    <span class="term-block" 
-    @mouseenter="isHovered = true"
-    @mouseleave="isHovered = false">
-      <slot></slot>
-    </span>
-    
-    <!-- 提示内容部分 -->
-    <div
-      v-if="isHovered"
-      class="content-block"
-      @mouseenter="isHovered = true"
-      @mouseleave="isHovered = false"
-    >
-      <slot name="tip" ></slot>
-    </div>
-  </span>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const isHovered = ref(false)
-</script>
-
-<style scoped>
-.term-with-tooltip {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-}
-
-.term-block {
-  /* 术语样式 */
-  color: var(--vp-c-brand);
-  cursor: pointer;
-  display: inline-block;
-}
-
-.content-block {
-
-  position: absolute !important;
-  width: max-content !important;
-
-  bottom: 75%;
-  border: 1px solid var(--vp-c-divider);
-  background-color: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  padding: 3px 20px 3px 20px;
-  color: var(--vp-c-text-2);
-  max-width: 90vw;
-  font-size: 14px;
-  z-index: var(--vp-z-index-layout-top);
-  box-shadow: 0 4px 4px rgba(63, 53, 70, 0.32);
-  margin-bottom: 8px;
-}
-</style>
\ No newline at end of file
+<template>
+  <span class="term-with-tooltip">
+    <!-- 术语部分 -->
+    <span
+      class="term-block"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
+    >
+      <slot></slot>
+    </span>
+
+    <!-- 提示内容部分 -->
+    <div
+      v-if="isHovered"
+      class="content-block"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
+    >
+      <slot name="tip"></slot>
+    </div>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const isHovered = ref(false);
+</script>
+
+<style scoped>
+.term-with-tooltip {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.term-block {
+  /* 术语样式 */
+  color: var(--vp-c-brand);
+  cursor: pointer;
+  display: inline-block;
+}
+
+.content-block {
+  position: absolute !important;
+  width: max-content !important;
+
+  bottom: 75%;
+  border: 1px solid var(--vp-c-divider);
+  background-color: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 3px 20px 3px 20px;
+  color: var(--vp-c-text-2);
+  max-width: 90vw;
+  font-size: 14px;
+  z-index: var(--vp-z-index-layout-top);
+  box-shadow: 0 4px 4px rgba(63, 53, 70, 0.32);
+  margin-bottom: 8px;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/TerminalWindow.vue b/docs/.vitepress/theme/components/TerminalWindow.vue
index 489a0119..0b5edc44 100644
--- a/docs/.vitepress/theme/components/TerminalWindow.vue
+++ b/docs/.vitepress/theme/components/TerminalWindow.vue
@@ -3,9 +3,9 @@
 defineProps({
   title: {
     type: String,
-    default: 'bash'
-  }
-})
+    default: "bash",
+  },
+});
 </script>
 
 <template>
@@ -31,7 +31,7 @@ defineProps({
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   margin: 1rem 0;
   overflow: hidden;
-  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+  font-family: "Menlo", "Monaco", "Courier New", monospace;
 }
 
 .terminal-header {
@@ -52,9 +52,15 @@ defineProps({
   height: 12px;
   border-radius: 50%;
 }
-.red { background: #ff5f56; }
-.yellow { background: #ffbd2e; }
-.green { background: #27c93f; }
+.red {
+  background: #ff5f56;
+}
+.yellow {
+  background: #ffbd2e;
+}
+.green {
+  background: #27c93f;
+}
 
 .title {
   position: absolute;
@@ -84,5 +90,4 @@ defineProps({
   margin-right: 8px;
   user-select: none;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 7c14265a..14ef8520 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -5,7 +5,7 @@ import RegisterSW from "./components/RegisterSW.vue";
 import CodeCompare from "./components/CodeCompare.vue";
 import Quiz from "./components/Quiz.vue";
 import TerminalWindow from "./components/TerminalWindow.vue";
-import Term from './components/Term.vue'
+import Term from "./components/Term.vue";
 
 export default {
   ...Theme,
diff --git a/docs/.vitepress/theme/style/var.css b/docs/.vitepress/theme/style/var.css
index 7369a35e..a38e1d09 100644
--- a/docs/.vitepress/theme/style/var.css
+++ b/docs/.vitepress/theme/style/var.css
@@ -8,7 +8,6 @@
 
   --vp-c-neutral: var(--vp-c-black);
   --vp-c-neutral-inverse: var(--vp-c-white);
-
 }
 
 .dark {
@@ -543,8 +542,16 @@
   --vp-home-hero-image-filter: none;
 
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #7b34fe 30%, #900095);
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #9934fe 50%, #a10091 50%);
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #7b34fe 30%,
+    #900095
+  );
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #9934fe 50%,
+    #a10091 50%
+  );
 }
 
 /**
@@ -597,4 +604,4 @@
 
 .terminal-body p {
   margin: 0;
-}
\ No newline at end of file
+}
diff --git a/docs/public/maps/Frontend.html b/docs/public/maps/Frontend.html
index 254c324d..1caaab3b 100644
--- a/docs/public/maps/Frontend.html
+++ b/docs/public/maps/Frontend.html
@@ -1,55 +1,5975 @@
 <!doctype html>
 <html>
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<meta http-equiv="X-UA-Compatible" content="ie=edge" />
-<title>Markmap</title>
-<style>
-* {
-  margin: 0;
-  padding: 0;
-}
-html {
-  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
-#mindmap {
-  display: block;
-  width: 100vw;
-  height: 100vh;
-}
-.markmap-dark {
-  background: #27272a;
-  color: white;
-}
-</style>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.12/dist/style.css">
-</head>
-<body>
-<svg id="mindmap"></svg>
-<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-view@0.18.12/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.12/dist/index.js"></script><script>(r => {
-              setTimeout(r);
-            })(function renderToolbar() {
-  const {
-    markmap,
-    mm
-  } = window;
-  const {
-    el
-  } = markmap.Toolbar.create(mm);
-  el.setAttribute('style', 'position:absolute;bottom:20px;right:20px');
-  document.body.append(el);
-})</script><script>((getMarkmap, getOptions, root2, jsonOptions) => {
-              const markmap = getMarkmap();
-              window.mm = markmap.Markmap.create(
-                "svg#mindmap",
-                (getOptions || markmap.deriveOptions)(jsonOptions),
-                root2
-              );
-              if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-                document.documentElement.classList.add("markmap-dark");
-              }
-            })(() => window.markmap,null,{"content":"<strong>&#x73b0;&#x4ee3; Web &#x524d;&#x7aef;&#x5f00;&#x53d1;&#x6307;&#x5357;&#xff1a;2026</strong>","children":[{"content":"<strong>&#x5f15;&#x8a00;</strong>","children":[{"content":"\n<p data-lines=\"12,14\"><strong>&#x5bf9;&#x4e8e;&#x521d;&#x7ea7;&#x5f00;&#x53d1;&#x8005;&#xff1a;</strong><br>\n&#x8bf7;&#x9996;&#x5148;&#x4e13;&#x6ce8;&#x4e8e; <strong>&#x7b2c;&#x4e8c;&#x7ae0;&#x201c;&#x57fa;&#x7840; Web &#x6280;&#x672f;&#x201d;</strong> &#x7684;&#x5185;&#x5bb9;&#x3002;HTML&#x3001;CSS &#x548c; JavaScript &#x662f;&#x6240;&#x6709;&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x7684;&#x6838;&#x5fc3;&#x57fa;&#x7840;&#x3002;&#x5728;&#x7262;&#x56fa;&#x638c;&#x63e1;&#x8fd9;&#x4e9b;&#x57fa;&#x7840;&#xff0c;&#x5e76;&#x80fd;&#x591f;&#x72ec;&#x7acb;&#x5b8c;&#x6210;&#x7b80;&#x5355;&#x9879;&#x76ee;&#x4e4b;&#x524d;&#xff0c;&#x8bf7;&#x5c06;&#x5176;&#x4ed6;&#x7ae0;&#x8282;&#x89c6;&#x4e3a;&#x540e;&#x7eed;&#x5b66;&#x4e60;&#x7684;&#x53c2;&#x8003;&#x8d44;&#x6599;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"12,15"}},{"content":"\n<p data-lines=\"15,17\"><strong>&#x5bf9;&#x4e8e;&#x4e2d;&#x7ea7;&#x5f00;&#x53d1;&#x8005;&#xff1a;</strong><br>\n&#x60a8;&#x53ef;&#x4ee5;&#x5c06;&#x672c;&#x6307;&#x5357;&#x4f5c;&#x4e3a;&#x4e00;&#x4efd;&#x77e5;&#x8bc6;&#x56fe;&#x8c31;&#xff0c;&#x7528;&#x4e8e;&#x68c0;&#x9a8c;&#x548c;&#x5de9;&#x56fa;&#x81ea;&#x5df1;&#x7684;&#x6280;&#x672f;&#x6808;&#x3002;&#x6df1;&#x5165;&#x9605;&#x8bfb;&#x60a8;&#x611f;&#x5174;&#x8da3;&#x7684;&#x90e8;&#x5206;&#xff0c;&#x7279;&#x522b;&#x662f;&#x5173;&#x4e8e;&#x4e0d;&#x540c;&#x6280;&#x672f;&#x65b9;&#x6848;&#x7684;&#x5bf9;&#x6bd4;&#x548c;&#x5206;&#x6790;&#xff0c;&#x8fd9;&#x5c06;&#x6709;&#x52a9;&#x4e8e;&#x60a8;&#x5728;&#x5b9e;&#x9645;&#x5de5;&#x4f5c;&#x4e2d;&#x505a;&#x51fa;&#x66f4;&#x5408;&#x7406;&#x7684;&#x6280;&#x672f;&#x9009;&#x578b;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"15,18"}},{"content":"\n<p data-lines=\"18,20\"><strong>&#x5bf9;&#x4e8e;&#x9ad8;&#x7ea7;&#x5f00;&#x53d1;&#x8005;&#x548c;&#x67b6;&#x6784;&#x5e08;&#xff1a;</strong><br>\n&#x672c;&#x6307;&#x5357;&#x4e2d;&#x5173;&#x4e8e;&#x9ad8;&#x7ea7;&#x5de5;&#x7a0b;&#x5316;&#x5de5;&#x4f5c;&#x6d41;&#x3001;&#x5fae;&#x524d;&#x7aef;&#x67b6;&#x6784;&#x3001;&#x6027;&#x80fd;&#x76d1;&#x63a7;&#x4ee5;&#x53ca;&#x65b0;&#x5174;&#x6280;&#x672f;&#x8d8b;&#x52bf;&#x7684;&#x63a2;&#x8ba8;&#xff0c;&#x53ef;&#x80fd;&#x4e3a;&#x60a8;&#x5728;&#x6280;&#x672f;&#x89c4;&#x5212;&#x548c;&#x67b6;&#x6784;&#x8bbe;&#x8ba1;&#x4e0a;&#x63d0;&#x4f9b;&#x6709;&#x4ef7;&#x503c;&#x7684;&#x53c2;&#x8003;&#x548c;&#x6d1e;&#x5bdf;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"18,21"}}],"payload":{"tag":"h2","lines":"6,7"}},{"content":"<strong>I. &#x524d;&#x7aef;&#x5f00;&#x53d1;&#x7b80;&#x4ecb;</strong>","children":[{"content":"","children":[{"content":"<strong>WASM + WebGPU</strong> &#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x5b9e;&#x73b0;&#x8fd1;&#x539f;&#x751f;&#x7684;&#x5bc6;&#x96c6;&#x8ba1;&#x7b97;&#x4e0e;&#x9ad8;&#x5f3a;&#x5ea6; 3D &#x6e32;&#x67d3;&#x80fd;&#x529b;&#xff1b;","children":[],"payload":{"tag":"li","lines":"29,30"}},{"content":"<strong>TensorFlow.js / ONNX Runtime Web</strong> &#x628a; AI &#x6a21;&#x578b;&#x76f4;&#x63a5;&#x8dd1;&#x5728;&#x7528;&#x6237;&#x8bbe;&#x5907;&#x4e0a;&#xff1b;","children":[],"payload":{"tag":"li","lines":"30,31"}},{"content":"<strong>viem</strong> &#x7b49;&#x73b0;&#x4ee3;&#x5e93;&#x5df2;&#x6210;&#x4e3a;&#x53bb;&#x4e2d;&#x5fc3;&#x5316;&#x5e94;&#x7528;&#xff08;dApp&#xff09;&#x7684;&#x5e38;&#x89c1;&#x9009;&#x62e9;&#x3002;","children":[],"payload":{"tag":"li","lines":"31,32"}},{"content":"<strong>AI-Native &#x5de5;&#x5177;&#x94fe;</strong>&#xff08;Cursor Composer&#x3001;v0.dev&#x3001;Claude Code&#x3001;Lovart&#x3001;Builder.io AI &#x7b49;&#xff09;&#x5df2;&#x80fd;&#x628a;&#x4e00;&#x53e5;&#x9700;&#x6c42;&#x76f4;&#x63a5;&#x751f;&#x6210;&#x5b8c;&#x6574;&#x53ef;&#x90e8;&#x7f72;&#x7684; RSC &#x5e94;&#x7528;&#x3001;&#x6d4b;&#x8bd5;&#x4e0e;&#x6587;&#x6863;&#x3002;","children":[],"payload":{"tag":"li","lines":"32,34"}}],"payload":{"tag":"ul","lines":"29,34"}},{"content":"","children":[{"content":"1. &#x5148;&#x6253;&#x7262;<strong>&#x8ba1;&#x7b97;&#x673a;&#x57fa;&#x7840;</strong>&#xff08;&#x6d4f;&#x89c8;&#x5668;&#x539f;&#x7406;&#x3001;HTTP/3&#x3001;DNS&#x3001;Cookie&#x3001;CORS&#x3001;&#x57fa;&#x672c;&#x6570;&#x636e;&#x7ed3;&#x6784;&#x4e0e;&#x7b97;&#x6cd5;&#xff09;&#xff1b;","children":[],"payload":{"tag":"li","lines":"40,41","listIndex":1}},{"content":"2. &#x624e;&#x5b9e;&#x638c;&#x63e1;<strong>&#x524d;&#x7aef;&#x4e09;&#x5251;&#x5ba2;</strong>&#x2014;&#x2014;HTML&#xff08;&#x8bed;&#x4e49;&#x5316;&#x4e0e;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#xff09;&#x3001;CSS&#xff08;&#x73b0;&#x4ee3;&#x5e03;&#x5c40; + &#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff09;&#x3001;JavaScript&#xff08;&#x8fd0;&#x884c;&#x65f6;&#x539f;&#x7406; + &#x73b0;&#x4ee3;&#x6807;&#x51c6;&#xff09;&#xff0c;&#x8fd9;&#x662f;&#x540e;&#x9762;&#x6240;&#x6709;&#x5185;&#x5bb9;&#x4e0d;&#x53ef;&#x6216;&#x7f3a;&#x7684;&#x6839;&#x57fa;&#xff1b;","children":[],"payload":{"tag":"li","lines":"41,42","listIndex":2}},{"content":"3. &#x5b66;&#x4e60;&#x73b0;&#x4ee3;&#x6846;&#x67b6;&#x4e0e;<strong>&#x5143;&#x6846;&#x67b6;&#x3001;&#x4e0b;&#x4e00;&#x4ee3;&#x6e32;&#x67d3;&#x67b6;&#x6784;</strong>&#xff08;React + RSC&#x3001;Next.js App Router&#x3001;SolidStart&#x3001;Qwik Resumability&#x3001;SvelteKit &#x7b49;&#xff09;&#xff1b;","children":[],"payload":{"tag":"li","lines":"42,43","listIndex":3}},{"content":"4. &#x6700;&#x540e;&#x6df1;&#x5165;&#x9ad8;&#x7ea7;&#x4e3b;&#x9898;&#xff1a;WebGPU&#x3001;WASM &#x7f16;&#x8bd1;&#x94fe;&#x3001;&#x8fb9;&#x7f18;&#x8ba1;&#x7b97;&#x3001;Privacy Sandbox &#x4e0e;&#x5408;&#x89c4;&#x3001;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#xff08;a11y&#xff09;&#x3001;&#x56fd;&#x9645;&#x5316;&#xff08;i18n&#xff09;&#x3001;&#x6d4b;&#x8bd5;&#x7b56;&#x7565;&#xff08;Vitest + Playwright + Testing Library&#xff09;&#x3001;&#x76d1;&#x63a7;&#x4e0e;&#x9519;&#x8bef;&#x8ffd;&#x8e2a;&#xff08;Sentry&#x3001;Highlight.io&#xff09;&#x3001;AI &#x9a71;&#x52a8;&#x5f00;&#x53d1;&#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"43,45","listIndex":4}}],"payload":{"tag":"ol","lines":"40,45"}},{"content":"","children":[{"content":"&#x5bf9;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#x4e0e;&#x4eba;&#x673a;&#x4ea4;&#x4e92;&#x7684;&#x6df1;&#x5ea6;&#x6d1e;&#x5bdf;&#x4e0e;&#x540c;&#x7406;&#x5fc3;","children":[],"payload":{"tag":"li","lines":"49,50"}},{"content":"&#x5bf9;&#x590d;&#x6742;&#x4e1a;&#x52a1;&#x903b;&#x8f91;&#x7684;&#x62bd;&#x8c61;&#x4e0e;&#x5927;&#x578b;&#x7cfb;&#x7edf;&#x7684;&#x67b6;&#x6784;&#x80fd;&#x529b;","children":[],"payload":{"tag":"li","lines":"50,51"}},{"content":"&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#xff08;a11y&#xff09;&#x3001;&#x6027;&#x80fd;&#x4f18;&#x5316;&#x3001;&#x56fd;&#x9645;&#x5316;&#x7b49;&#x4e13;&#x4e1a;&#x9886;&#x57df;&#x77e5;&#x8bc6;","children":[],"payload":{"tag":"li","lines":"51,52"}},{"content":"&#x8de8;&#x56e2;&#x961f;&#x534f;&#x4f5c;&#x3001;&#x4ea7;&#x54c1;&#x601d;&#x7ef4;&#x3001;&#x6c9f;&#x901a;&#x4e0e;&#x6587;&#x6863;&#x80fd;&#x529b;","children":[],"payload":{"tag":"li","lines":"52,53"}},{"content":"&#x6301;&#x7eed;&#x4ea4;&#x4ed8;&#x3001;&#x6d4b;&#x8bd5;&#x7b56;&#x7565;&#x3001;&#x76d1;&#x63a7;&#x4f53;&#x7cfb;&#x7b49;&#x5de5;&#x7a0b;&#x5316;&#x5b9e;&#x8df5;","children":[],"payload":{"tag":"li","lines":"53,55"}}],"payload":{"tag":"ul","lines":"49,55"}},{"content":"","children":[{"content":"&#x57fa;&#x7840; Web &#x6280;&#x672f;&#xff1a;<strong>MDN</strong> &#x6c38;&#x8fdc;&#x662f;&#x6700;&#x6743;&#x5a01;&#x7684;&#x5b9d;&#x5178;&#xff1b;","children":[],"payload":{"tag":"li","lines":"59,60"}},{"content":"&#x6846;&#x67b6;&#x4e0e;&#x5de5;&#x5177;&#xff1a;&#x4f18;&#x5148;&#x770b;<strong>&#x5b98;&#x65b9;&#x6559;&#x7a0b;&#x4e0e;&#x6587;&#x6863;</strong>&#xff08;Next.js Docs&#x3001;Solid Docs&#x3001;Qwik Docs &#x7b49;&#xff09;&#xff1b;","children":[],"payload":{"tag":"li","lines":"60,61"}},{"content":"&#x7406;&#x89e3;&#x539f;&#x7406;&#xff1a;&#x76f4;&#x63a5;&#x8bfb; <strong>Vite&#x3001;esbuild&#x3001;Million.js&#x3001;Preact&#x3001;TanStack&#x3001;Zustand</strong> &#x7b49;&#x660e;&#x661f;&#x5f00;&#x6e90;&#x5e93;&#x6e90;&#x7801;&#xff1b;","children":[],"payload":{"tag":"li","lines":"61,62"}},{"content":"&#x5b66;&#x4e60; AI &#x9a71;&#x52a8;&#x5f00;&#x53d1;&#xff1a;<strong>Cursor&#x3001;v0.dev&#x3001;Claude Projects&#x3001;Lovart</strong> &#x7684;&#x5b98;&#x65b9;&#x793a;&#x4f8b;&#x4e0e;&#x63d0;&#x793a;&#x8bcd;&#x5de5;&#x7a0b;&#x6848;&#x4f8b;&#x662f;&#x6700;&#x4f73;&#x8d77;&#x70b9;&#xff1b;","children":[],"payload":{"tag":"li","lines":"62,63"}},{"content":"&#x793e;&#x533a;&#x4e0e;&#x7cfb;&#x7edf;&#x8bfe;&#x7a0b;&#xff1a;Frontend Masters&#x3001;egghead.io&#x3001;ByteDance FE &#x57f9;&#x8bad;&#x8425;&#x3001;freeCodeCamp &#x7b49;&#xff1b;","children":[],"payload":{"tag":"li","lines":"63,65"}}],"payload":{"tag":"ul","lines":"59,65"}}],"payload":{"tag":"h2","lines":"23,24"}},{"content":"<strong>II. &#x57fa;&#x7840; Web &#x6280;&#x672f;&#xff1a;&#x6838;&#x5fc3;&#x652f;&#x67f1;</strong>","children":[{"content":"<strong>&#x5173;&#x4e8e;&#x4e92;&#x8054;&#x7f51; (Internet) &#x7684;&#x57fa;&#x7840;&#x77e5;&#x8bc6;</strong>","children":[{"content":"1. \n<p data-lines=\"73,74\"><strong>&#x4e92;&#x8054;&#x7f51;&#x5982;&#x4f55;&#x8fd0;&#x4f5c;&#xff1f;</strong></p>\n<p data-lines=\"75,76\">&#x4e92;&#x8054;&#x7f51;&#x662f;&#x4e00;&#x4e2a;&#x8fde;&#x63a5;&#x5168;&#x7403;&#x65e0;&#x6570;&#x8ba1;&#x7b97;&#x673a;&#x8bbe;&#x5907;&#x7684;&#x5de8;&#x5927;&#x7f51;&#x7edc;&#xff0c;&#x5e38;&#x88ab;&#x79f0;&#x4e3a;&#x201c;&#x7f51;&#x7edc;&#x7684;&#x7f51;&#x7edc;&#x201d;&#x3002;&#x5b83;&#x7684;&#x57fa;&#x672c;&#x5de5;&#x4f5c;&#x539f;&#x7406;&#x5982;&#x4e0b;&#xff1a;</p>","children":[{"content":"&#x6570;&#x636e;&#x5305;&#x4ea4;&#x6362;&#xff1a;&#x5728;&#x4e92;&#x8054;&#x7f51;&#x4e0a;&#x53d1;&#x9001;&#x6216;&#x63a5;&#x6536;&#x4fe1;&#x606f;&#xff08;&#x5982;&#x7f51;&#x9875;&#x6216;&#x7535;&#x5b50;&#x90ae;&#x4ef6;&#xff09;&#x65f6;&#xff0c;&#x8fd9;&#x4e9b;&#x6570;&#x636e;&#x4f1a;&#x88ab;&#x5206;&#x89e3;&#x6210;&#x8bb8;&#x591a;&#x5c0f;&#x7684;&#x6570;&#x636e;&#x5305;&#x3002;","children":[],"payload":{"tag":"li","lines":"76,77"}},{"content":"&#x534f;&#x8bae; (<a href=\"https://www.ietf.org/rfc/rfc793.txt\">TCP/IP</a>)&#xff1a;&#x6bcf;&#x4e2a;&#x6570;&#x636e;&#x5305;&#x90fd;&#x9075;&#x5faa;&#x4e00;&#x5957;&#x79f0;&#x4e3a;&#x201c;&#x4f20;&#x8f93;&#x63a7;&#x5236;&#x534f;&#x8bae;/&#x7f51;&#x9645;&#x534f;&#x8bae;&#x201d;(TCP/IP) &#x7684;&#x89c4;&#x5219;&#x3002;TCP &#x8d1f;&#x8d23;&#x786e;&#x4fdd;&#x6240;&#x6709;&#x6570;&#x636e;&#x5305;&#x90fd;&#x80fd;&#x51c6;&#x786e;&#x65e0;&#x8bef;&#x5730;&#x5230;&#x8fbe;&#x76ee;&#x7684;&#x5730;&#x5e76;&#x6309;&#x6b63;&#x786e;&#x987a;&#x5e8f;&#x91cd;&#x65b0;&#x7ec4;&#x88c5;&#xff0c;&#x800c; IP &#x8d1f;&#x8d23;&#x4e3a;&#x6bcf;&#x4e2a;&#x6570;&#x636e;&#x5305;&#x8d34;&#x4e0a;&#x5730;&#x5740;&#x6807;&#x7b7e;&#xff0c;&#x6307;&#x660e;&#x5176;&#x76ee;&#x7684;&#x5730;&#x3002;","children":[],"payload":{"tag":"li","lines":"77,78"}},{"content":"&#x8def;&#x7531;&#x548c;&#x4f20;&#x8f93;&#xff1a;&#x8fd9;&#x4e9b;&#x6570;&#x636e;&#x5305;&#x901a;&#x8fc7;&#x7531;&#x8def;&#x7531;&#x5668;&#x3001;&#x4ea4;&#x6362;&#x673a;&#x3001;&#x5149;&#x7ea4;&#x7535;&#x7f06;&#x3001;&#x65e0;&#x7ebf;&#x7535;&#x6ce2;&#x7b49;&#x7ec4;&#x6210;&#x7684;&#x590d;&#x6742;&#x7269;&#x7406;&#x7f51;&#x7edc;&#x8fdb;&#x884c;&#x4f20;&#x8f93;&#x3002;&#x8def;&#x7531;&#x5668;&#x5c31;&#x50cf;&#x4ea4;&#x901a;&#x8b66;&#x5bdf;&#xff0c;&#x8bfb;&#x53d6;&#x6bcf;&#x4e2a;&#x6570;&#x636e;&#x5305;&#x7684; IP &#x5730;&#x5740;&#xff0c;&#x5e76;&#x4e3a;&#x5176;&#x89c4;&#x5212;&#x51fa;&#x5230;&#x8fbe;&#x6700;&#x7ec8;&#x76ee;&#x7684;&#x5730;&#x7684;&#x6700;&#x4f73;&#x8def;&#x5f84;&#x3002;","children":[],"payload":{"tag":"li","lines":"78,79"}},{"content":"&#x5ba2;&#x6237;&#x7aef;&#x4e0e;&#x670d;&#x52a1;&#x5668;&#xff1a;&#x5728;&#x8fd9;&#x4e2a;&#x6a21;&#x578b;&#x4e2d;&#xff0c;&#x4f60;&#x7684;&#x8bbe;&#x5907;&#xff08;&#x5982;&#x7535;&#x8111;&#x6216;&#x624b;&#x673a;&#xff09;&#x901a;&#x5e38;&#x662f;&#x201c;&#x5ba2;&#x6237;&#x7aef;&#x201d;&#xff0c;&#x5b83;&#x5411;&#x5b58;&#x50a8;&#x7f51;&#x7ad9;&#x4fe1;&#x606f;&#x6216;&#x670d;&#x52a1;&#x7684;&#x201c;&#x670d;&#x52a1;&#x5668;&#x201d;&#x53d1;&#x51fa;&#x8bf7;&#x6c42;&#x3002;&#x670d;&#x52a1;&#x5668;&#x63a5;&#x6536;&#x8bf7;&#x6c42;&#x540e;&#xff0c;&#x4f1a;&#x5c06;&#x76f8;&#x5e94;&#x7684;&#x6570;&#x636e;&#x5305;&#x53d1;&#x56de;&#x7ed9;&#x5ba2;&#x6237;&#x7aef;&#x3002;","children":[],"payload":{"tag":"li","lines":"79,81"}}],"payload":{"tag":"li","lines":"73,83","listIndex":1}},{"content":"2. \n<p data-lines=\"83,84\"><strong>&#x4ec0;&#x4e48;&#x662f; <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a>&#xff1f;</strong></p>\n<p data-lines=\"85,86\">HTTP &#x6307;&#x7684;&#x662f;&#x8d85;&#x6587;&#x672c;&#x4f20;&#x8f93;&#x534f;&#x8bae; (Hypertext Transfer Protocol)&#x3002;&#x5b83;&#x662f;&#x7528;&#x4e8e;&#x5728;&#x4e07;&#x7ef4;&#x7f51; (World Wide Web) &#x4e0a;&#x4f20;&#x8f93;&#x6570;&#x636e;&#x7684;&#x6838;&#x5fc3;&#x534f;&#x8bae;&#xff0c;&#x89c4;&#x5b9a;&#x4e86;&#x6d4f;&#x89c8;&#x5668;&#xff08;&#x5ba2;&#x6237;&#x7aef;&#xff09;&#x548c;&#x670d;&#x52a1;&#x5668;&#x4e4b;&#x95f4;&#x8bf7;&#x6c42;&#x548c;&#x54cd;&#x5e94;&#x7684;&#x683c;&#x5f0f;&#x4e0e;&#x89c4;&#x5219;&#x3002;</p>\n<p data-lines=\"87,88\">&#x5f53;&#x4f60;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x8f93;&#x5165;&#x7f51;&#x5740;&#x65f6;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x4f1a;&#x5411;&#x8be5;&#x7f51;&#x5740;&#x6240;&#x5728;&#x7684;&#x670d;&#x52a1;&#x5668;&#x53d1;&#x9001;&#x4e00;&#x4e2a; HTTP &#x8bf7;&#x6c42;&#x3002;&#x670d;&#x52a1;&#x5668;&#x6536;&#x5230;&#x8bf7;&#x6c42;&#x540e;&#xff0c;&#x4f1a;&#x5904;&#x7406;&#x5b83;&#x5e76;&#x8fd4;&#x56de;&#x4e00;&#x4e2a; HTTP &#x54cd;&#x5e94;&#xff0c;&#x8fd9;&#x4e2a;&#x54cd;&#x5e94;&#x901a;&#x5e38;&#x5305;&#x542b;&#x4e86;&#x4f60;&#x8bf7;&#x6c42;&#x7684;&#x7f51;&#x9875;&#x5185;&#x5bb9;&#xff0c;&#x5982; HTML &#x6587;&#x4ef6;&#x3001;&#x56fe;&#x7247;&#x3001;CSS &#x6837;&#x5f0f;&#x8868;&#x7b49;&#x3002;HTTP &#x672c;&#x8eab;&#x662f;&#x4e00;&#x4e2a;&#x201c;&#x65e0;&#x72b6;&#x6001;&#x201d;&#x534f;&#x8bae;&#xff0c;&#x610f;&#x5473;&#x7740;&#x670d;&#x52a1;&#x5668;&#x4e0d;&#x4f1a;&#x8bb0;&#x5f55;&#x4e4b;&#x524d;&#x6765;&#x81ea;&#x540c;&#x4e00;&#x5ba2;&#x6237;&#x7aef;&#x7684;&#x8bf7;&#x6c42;&#x5386;&#x53f2;&#x3002;&#x4e3a;&#x4e86;&#x5b9e;&#x73b0;&#x8de8;&#x9875;&#x9762;&#x7684;&#x72b6;&#x6001;&#x4fdd;&#x6301;&#xff08;&#x5982;&#x7528;&#x6237;&#x767b;&#x5f55;&#x72b6;&#x6001;&#xff09;&#xff0c;&#x901a;&#x5e38;&#x4f1a;&#x4f7f;&#x7528; Cookies &#x7b49;&#x6280;&#x672f;&#x3002;</p>\n<p data-lines=\"89,90\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS\">HTTPS</a> &#x662f; HTTP &#x7684;&#x5b89;&#x5168;&#x7248;&#x672c; (Hypertext Transfer Protocol Secure)&#xff0c;&#x5b83;&#x901a;&#x8fc7;&#x52a0;&#x5bc6;&#x6765;&#x4fdd;&#x62a4;&#x6570;&#x636e;&#x4f20;&#x8f93;&#x8fc7;&#x7a0b;&#x4e2d;&#x7684;&#x5b89;&#x5168;&#xff0c;&#x9632;&#x6b62;&#x4fe1;&#x606f;&#x88ab;&#x7a83;&#x53d6;&#x6216;&#x7be1;&#x6539;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"83,91","listIndex":2}},{"content":"3. \n<p data-lines=\"91,92\"><strong>&#x4ec0;&#x4e48;&#x662f;&#x57df;&#x540d;&#xff1f;</strong></p>\n<p data-lines=\"93,94\">&#x57df;&#x540d; (Domain Name) &#x662f;&#x4e92;&#x8054;&#x7f51;&#x4e0a;&#x7f51;&#x7ad9;&#x7684;&#x6613;&#x4e8e;&#x8bb0;&#x5fc6;&#x7684;&#x5730;&#x5740;&#xff0c;&#x76f8;&#x5f53;&#x4e8e;&#x7f51;&#x7ad9;&#x7684;&#x201c;&#x95e8;&#x724c;&#x53f7;&#x201d;&#x3002;&#x4f8b;&#x5982; google.com &#x6216; wikipedia.org &#x5c31;&#x662f;&#x57df;&#x540d;&#x3002;</p>\n<p data-lines=\"95,96\">&#x8ba1;&#x7b97;&#x673a;&#x5728;&#x7f51;&#x7edc;&#x4e0a;&#x76f8;&#x4e92;&#x901a;&#x4fe1;&#x65f6;&#xff0c;&#x4f7f;&#x7528;&#x7684;&#x662f;&#x4e00;&#x957f;&#x4e32;&#x6570;&#x5b57;&#x7ec4;&#x6210;&#x7684; IP &#x5730;&#x5740;&#xff08;&#x4f8b;&#x5982; 172.217.160.78&#xff09;&#x3002;&#x4f46;&#x8fd9;&#x79cd;&#x6570;&#x5b57;&#x5730;&#x5740;&#x5bf9;&#x4eba;&#x7c7b;&#x6765;&#x8bf4;&#x96be;&#x4ee5;&#x8bb0;&#x5fc6;&#x3002;&#x57df;&#x540d;&#x7684;&#x4f5c;&#x7528;&#x5c31;&#x662f;&#x5c06;&#x8fd9;&#x4e9b;&#x590d;&#x6742;&#x7684; IP &#x5730;&#x5740;&#x8f6c;&#x6362;&#x6210;&#x6709;&#x610f;&#x4e49;&#x4e14;&#x6613;&#x4e8e;&#x8bb0;&#x5fc6;&#x7684;&#x5b57;&#x7b26;&#x7ec4;&#x5408;&#x3002;&#x5f53;&#x4f60;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x8f93;&#x5165;&#x57df;&#x540d;&#x65f6;&#xff0c;&#x4e00;&#x4e2a;&#x540d;&#x4e3a; DNS&#xff08;&#x57df;&#x540d;&#x7cfb;&#x7edf;&#xff09;&#x7684;&#x7cfb;&#x7edf;&#x4f1a;&#x81ea;&#x52a8;&#x5c06;&#x8fd9;&#x4e2a;&#x57df;&#x540d;&#x201c;&#x7ffb;&#x8bd1;&#x201d;&#x6210;&#x5bf9;&#x5e94;&#x7684; IP &#x5730;&#x5740;&#xff0c;&#x4ece;&#x800c;&#x8ba9;&#x6d4f;&#x89c8;&#x5668;&#x80fd;&#x591f;&#x627e;&#x5230;&#x5e76;&#x8fde;&#x63a5;&#x5230;&#x6b63;&#x786e;&#x7684;&#x670d;&#x52a1;&#x5668;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"91,97","listIndex":3}},{"content":"4. \n<p data-lines=\"97,98\"><strong>&#x4ec0;&#x4e48;&#x662f;&#x6258;&#x7ba1;&#xff1f;</strong></p>\n<p data-lines=\"99,100\">&#x7f51;&#x7ad9;&#x6258;&#x7ba1;&#xff08;Web Hosting&#xff09;&#xff0c;&#x4e5f;&#x5e38;&#x88ab;&#x79f0;&#x4e3a;&#x201c;&#x4e3b;&#x673a;&#x201d;&#x6216;&#x201c;&#x7a7a;&#x95f4;&#x201d;&#xff0c;&#x662f;&#x4e00;&#x79cd;&#x5141;&#x8bb8;&#x4e2a;&#x4eba;&#x6216;&#x7ec4;&#x7ec7;&#x5c06;&#x5176;&#x7f51;&#x7ad9;&#x53d1;&#x5e03;&#x5230;&#x4e92;&#x8054;&#x7f51;&#x4e0a;&#x7684;&#x670d;&#x52a1;&#x3002;</p>\n<p data-lines=\"101,102\">&#x53ef;&#x4ee5;&#x8fd9;&#x6837;&#x7406;&#x89e3;&#xff1a;&#x5982;&#x679c;&#x57df;&#x540d;&#x662f;&#x4f60;&#x7f51;&#x7ad9;&#x7684;&#x201c;&#x95e8;&#x724c;&#x53f7;&#x201d;&#xff0c;&#x90a3;&#x4e48;&#x7f51;&#x7ad9;&#x6258;&#x7ba1;&#x5c31;&#x662f;&#x4f60;&#x5b58;&#x653e;&#x7f51;&#x7ad9;&#x5185;&#x5bb9;&#x7684;&#x201c;&#x623f;&#x5b50;&#x201d;&#x3002;&#x8fd9;&#x4e2a;&#x201c;&#x623f;&#x5b50;&#x201d;&#x5176;&#x5b9e;&#x662f;&#x4e00;&#x53f0;&#x6216;&#x4e00;&#x7ec4;&#x4e00;&#x76f4;&#x4fdd;&#x6301;&#x5f00;&#x673a;&#x5e76;&#x8fde;&#x63a5;&#x5230;&#x4e92;&#x8054;&#x7f51;&#x7684;&#x5f3a;&#x5927;&#x8ba1;&#x7b97;&#x673a;&#xff0c;&#x5373;&#x670d;&#x52a1;&#x5668;&#x3002;</p>\n<p data-lines=\"103,104\">&#x5f53;&#x4f60;&#x521b;&#x5efa;&#x4e86;&#x4e00;&#x4e2a;&#x7f51;&#x7ad9;&#xff0c;&#x6240;&#x6709;&#x6784;&#x6210;&#x8fd9;&#x4e2a;&#x7f51;&#x7ad9;&#x7684;&#x6587;&#x4ef6;&#xff08;&#x5982; HTML &#x4ee3;&#x7801;&#x3001;CSS &#x6837;&#x5f0f;&#x8868;&#x3001;&#x56fe;&#x7247;&#x3001;&#x89c6;&#x9891;&#x3001;&#x6570;&#x636e;&#x5e93;&#x7b49;&#xff09;&#x90fd;&#x9700;&#x8981;&#x4e00;&#x4e2a;&#x5730;&#x65b9;&#x5b58;&#x653e;&#xff0c;&#x4ee5;&#x4fbf;&#x5168;&#x4e16;&#x754c;&#x7684;&#x7528;&#x6237;&#x90fd;&#x80fd;&#x968f;&#x65f6;&#x8bbf;&#x95ee;&#x3002;&#x6258;&#x7ba1;&#x670d;&#x52a1;&#x5546;&#x5c31;&#x63d0;&#x4f9b;&#x4e86;&#x8fd9;&#x6837;&#x7684;&#x670d;&#x52a1;&#x5668;&#x7a7a;&#x95f4;&#x3001;&#x7f51;&#x7edc;&#x8fde;&#x63a5;&#x4ee5;&#x53ca;&#x76f8;&#x5173;&#x7684;&#x7ef4;&#x62a4;&#x670d;&#x52a1;&#x3002;&#x5f53;&#x6709;&#x4eba;&#x901a;&#x8fc7;&#x57df;&#x540d;&#x8bbf;&#x95ee;&#x4f60;&#x7684;&#x7f51;&#x7ad9;&#x65f6;&#xff0c;&#x4ed6;&#x4eec;&#x7684;&#x6d4f;&#x89c8;&#x5668;&#x5b9e;&#x9645;&#x4e0a;&#x5c31;&#x662f;&#x8fde;&#x63a5;&#x5230;&#x4e86;&#x6258;&#x7ba1;&#x4f60;&#x7f51;&#x7ad9;&#x6587;&#x4ef6;&#x7684;&#x8fd9;&#x53f0;&#x670d;&#x52a1;&#x5668;&#x4e0a;&#xff0c;&#x5e76;&#x4e0b;&#x8f7d;&#x6587;&#x4ef6;&#x8fdb;&#x884c;&#x663e;&#x793a;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"97,105","listIndex":4}},{"content":"5. \n<p data-lines=\"105,106\"><strong>DNS &#x53ca;&#x5176;&#x5de5;&#x4f5c;&#x539f;&#x7406;&#xff1f;</strong></p>\n<p data-lines=\"107,108\">DNS &#x6307;&#x7684;&#x662f;&#x57df;&#x540d;&#x7cfb;&#x7edf; (Domain Name System)&#x3002;&#x5b83;&#x5e38;&#x88ab;&#x79f0;&#x4e3a;&#x201c;&#x4e92;&#x8054;&#x7f51;&#x7684;&#x7535;&#x8bdd;&#x7c3f;&#x201d;&#xff0c;&#x5176;&#x6838;&#x5fc3;&#x529f;&#x80fd;&#x662f;&#x8d1f;&#x8d23;&#x5c06;&#x4eba;&#x7c7b;&#x6613;&#x4e8e;&#x8bb0;&#x5fc6;&#x7684;&#x57df;&#x540d;&#xff08;&#x5982; google.com&#xff09;&#x89e3;&#x6790;&#xff08;&#x6216;&#x7ffb;&#x8bd1;&#xff09;&#x6210;&#x8ba1;&#x7b97;&#x673a;&#x80fd;&#x591f;&#x7406;&#x89e3;&#x7684; IP &#x5730;&#x5740;&#xff08;&#x5982; 172.217.160.78&#xff09;&#x3002;</p>\n<p data-lines=\"109,110\">DNS &#x7684;&#x5de5;&#x4f5c;&#x6d41;&#x7a0b;&#x5927;&#x81f4;&#x5982;&#x4e0b;&#xff1a;</p>","children":[{"content":"&#x7528;&#x6237;&#x8bf7;&#x6c42;&#xff1a;&#x5f53;&#x4f60;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x8f93;&#x5165;&#x7f51;&#x5740;&#x65f6;&#xff0c;&#x4f60;&#x7684;&#x8ba1;&#x7b97;&#x673a;&#x4f1a;&#x5411;&#x672c;&#x5730;&#x7f51;&#x7edc;&#x4e2d;&#x7684; DNS &#x670d;&#x52a1;&#x5668;&#xff08;&#x901a;&#x5e38;&#x7531;&#x4f60;&#x7684;&#x4e92;&#x8054;&#x7f51;&#x670d;&#x52a1;&#x63d0;&#x4f9b;&#x5546; ISP &#x63d0;&#x4f9b;&#xff09;&#x53d1;&#x51fa;&#x67e5;&#x8be2;&#x8bf7;&#x6c42;&#xff1a;&#x201c;google.com &#x5bf9;&#x5e94;&#x7684; IP &#x5730;&#x5740;&#x662f;&#x4ec0;&#x4e48;&#xff1f;&#x201d;","children":[],"payload":{"tag":"li","lines":"110,111"}},{"content":"&#x9012;&#x5f52;&#x67e5;&#x8be2;&#xff1a;&#x5982;&#x679c;&#x672c;&#x5730; DNS &#x670d;&#x52a1;&#x5668;&#x7684;&#x7f13;&#x5b58;&#x4e2d;&#x6ca1;&#x6709;&#x8bb0;&#x5f55;&#xff0c;&#x5b83;&#x5c31;&#x4f1a;&#x5411;&#x4e92;&#x8054;&#x7f51;&#x4e0a;&#x7684;&#x5176;&#x4ed6; DNS &#x670d;&#x52a1;&#x5668;&#x9010;&#x7ea7;&#x67e5;&#x8be2;&#xff0c;&#x8fd9;&#x4e2a;&#x8fc7;&#x7a0b;&#x4ece;&#x6839;&#x57df;&#x540d;&#x670d;&#x52a1;&#x5668;&#x5f00;&#x59cb;&#xff0c;&#x5230;&#x9876;&#x7ea7;&#x57df;&#x540d;&#xff08;.com&#xff09;&#x670d;&#x52a1;&#x5668;&#xff0c;&#x6700;&#x540e;&#x5230;&#x8d1f;&#x8d23;&#x8be5;&#x57df;&#x540d;&#x7684;&#x6743;&#x5a01;&#x57df;&#x540d;&#x670d;&#x52a1;&#x5668;&#x3002;","children":[],"payload":{"tag":"li","lines":"111,112"}},{"content":"&#x83b7;&#x53d6; IP &#x5730;&#x5740;&#xff1a;&#x6743;&#x5a01;&#x57df;&#x540d;&#x670d;&#x52a1;&#x5668;&#x5b58;&#x6709;&#x8be5;&#x57df;&#x540d;&#x4e0e; IP &#x5730;&#x5740;&#x7684;&#x6700;&#x7ec8;&#x5bf9;&#x5e94;&#x5173;&#x7cfb;&#xff0c;&#x5b83;&#x4f1a;&#x5c06;&#x8fd9;&#x4e2a; IP &#x5730;&#x5740;&#x8fd4;&#x56de;&#x7ed9;&#x672c;&#x5730; DNS &#x670d;&#x52a1;&#x5668;&#x3002;","children":[],"payload":{"tag":"li","lines":"112,113"}},{"content":"&#x8fd4;&#x56de;&#x7ed9;&#x7528;&#x6237;&#xff1a;&#x672c;&#x5730; DNS &#x670d;&#x52a1;&#x5668;&#x5728;&#x6536;&#x5230; IP &#x5730;&#x5740;&#x540e;&#xff0c;&#x4f1a;&#x5c06;&#x5176;&#x8fd4;&#x56de;&#x7ed9;&#x4f60;&#x7684;&#x8ba1;&#x7b97;&#x673a;&#xff0c;&#x5e76;&#x901a;&#x5e38;&#x4f1a;&#x5c06;&#x5176;&#x7f13;&#x5b58;&#x4e00;&#x6bb5;&#x65f6;&#x95f4;&#xff0c;&#x4ee5;&#x4fbf;&#x4e0b;&#x6b21;&#x67e5;&#x8be2;&#x65f6;&#x80fd;&#x66f4;&#x5feb;&#x54cd;&#x5e94;&#x3002;","children":[],"payload":{"tag":"li","lines":"113,114"}},{"content":"&#x5efa;&#x7acb;&#x8fde;&#x63a5;&#xff1a;&#x4f60;&#x7684;&#x6d4f;&#x89c8;&#x5668;&#x5728;&#x83b7;&#x5f97;&#x8fd9;&#x4e2a; IP &#x5730;&#x5740;&#x540e;&#xff0c;&#x5c31;&#x80fd;&#x51c6;&#x786e;&#x5730;&#x627e;&#x5230;&#x5b58;&#x653e;&#x7f51;&#x7ad9;&#x5185;&#x5bb9;&#x7684;&#x670d;&#x52a1;&#x5668;&#xff0c;&#x5e76;&#x4e0e;&#x5176;&#x5efa;&#x7acb;&#x8fde;&#x63a5;&#xff0c;&#x5f00;&#x59cb;&#x8bf7;&#x6c42;&#x7f51;&#x9875;&#x6570;&#x636e;&#x3002;","children":[],"payload":{"tag":"li","lines":"114,116"}}],"payload":{"tag":"li","lines":"105,118","listIndex":5}},{"content":"6. \n<p data-lines=\"118,119\"><strong>&#x6d4f;&#x89c8;&#x5668;&#x53ca;&#x5176;&#x5de5;&#x4f5c;&#x539f;&#x7406;&#xff1f;</strong></p>\n<p data-lines=\"120,121\">&#x6d4f;&#x89c8;&#x5668;&#xff08;Browser&#xff09;&#x662f;&#x4e00;&#x4e2a;&#x5b89;&#x88c5;&#x5728;&#x4f60;&#x7535;&#x8111;&#x6216;&#x624b;&#x673a;&#x4e0a;&#x7684;&#x8f6f;&#x4ef6;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#xff0c;&#x5b83;&#x7684;&#x4e3b;&#x8981;&#x5de5;&#x4f5c;&#x662f;&#x5411;&#x670d;&#x52a1;&#x5668;&#x8bf7;&#x6c42;&#x3001;&#x83b7;&#x53d6;&#x3001;&#x89e3;&#x6790;&#x5e76;&#x6700;&#x7ec8;&#x5728;&#x5c4f;&#x5e55;&#x4e0a;&#x663e;&#x793a;&#x7f51;&#x9875;&#x5185;&#x5bb9;&#x3002;&#x5b83;&#x662f;&#x4e00;&#x4e2a;&#x529f;&#x80fd;&#x5f3a;&#x5927;&#x7684;&#x201c;&#x5ba2;&#x6237;&#x7aef;&#x201d;&#x3002;</p>\n<p data-lines=\"122,123\">&#x6d4f;&#x89c8;&#x5668;&#x7684;&#x5de5;&#x4f5c;&#x539f;&#x7406;&#x53ef;&#x4ee5;&#x5206;&#x4e3a;&#x4ee5;&#x4e0b;&#x51e0;&#x4e2a;&#x4e3b;&#x8981;&#x6b65;&#x9aa4;&#xff1a;</p>","children":[{"content":"&#x5904;&#x7406;&#x7528;&#x6237;&#x8f93;&#x5165;&#xff1a;&#x4f60;&#x5728;&#x5730;&#x5740;&#x680f;&#x8f93;&#x5165; URL&#xff08;&#x7f51;&#x5740;&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"123,124"}},{"content":"DNS &#x67e5;&#x8be2;&#xff1a;&#x6d4f;&#x89c8;&#x5668;&#x9996;&#x5148;&#x4f1a;&#x901a;&#x8fc7; DNS &#x7cfb;&#x7edf;&#x67e5;&#x8be2;&#x8be5; URL &#x4e2d;&#x57df;&#x540d;&#x7684; IP &#x5730;&#x5740;&#xff08;&#x5982;&#x4e0a;&#x6240;&#x8ff0;&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"124,125"}},{"content":"&#x53d1;&#x9001; HTTP &#x8bf7;&#x6c42;&#xff1a;&#x6d4f;&#x89c8;&#x5668;&#x4f7f;&#x7528;&#x83b7;&#x53d6;&#x5230;&#x7684; IP &#x5730;&#x5740;&#xff0c;&#x5411;&#x76ee;&#x6807;&#x670d;&#x52a1;&#x5668;&#x53d1;&#x9001;&#x4e00;&#x4e2a; <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a> &#x8bf7;&#x6c42;&#xff0c;&#x8bf7;&#x6c42;&#x83b7;&#x53d6;&#x8be5;&#x9875;&#x9762;&#x7684;&#x5185;&#x5bb9;&#xff08;&#x901a;&#x5e38;&#x662f;&#x4e00;&#x4e2a; HTML &#x6587;&#x4ef6;&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"125,126"}},{"content":"&#x63a5;&#x6536;&#x670d;&#x52a1;&#x5668;&#x54cd;&#x5e94;&#xff1a;&#x670d;&#x52a1;&#x5668;&#x63a5;&#x6536;&#x5230;&#x8bf7;&#x6c42;&#x540e;&#xff0c;&#x4f1a;&#x5c06;&#x5305;&#x542b; HTML&#x3001;CSS&#x3001;JavaScript &#x7b49;&#x5185;&#x5bb9;&#x7684;&#x6570;&#x636e;&#x5305;&#x6253;&#x5305;&#x5728;&#x4e00;&#x4e2a; HTTP &#x54cd;&#x5e94;&#x4e2d;&#x53d1;&#x9001;&#x56de;&#x6d4f;&#x89c8;&#x5668;&#x3002;","children":[],"payload":{"tag":"li","lines":"126,127"}},{"content":"&#x6e32;&#x67d3;&#x9875;&#x9762;&#xff1a;&#x8fd9;&#x662f;&#x6700;&#x6838;&#x5fc3;&#x7684;&#x4e00;&#x6b65;&#x3002;","children":[{"content":"&#x6d4f;&#x89c8;&#x5668;&#x9996;&#x5148;&#x4f1a;&#x89e3;&#x6790; HTML &#x6587;&#x4ef6;&#xff0c;&#x6784;&#x5efa;&#x201c;&#x6587;&#x6863;&#x5bf9;&#x8c61;&#x6a21;&#x578b;&#x201d;(<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">DOM</a> &#x6811;)&#xff0c;&#x8fd9;&#x4ee3;&#x8868;&#x4e86;&#x9875;&#x9762;&#x7684;&#x7ed3;&#x6784;&#x3002;","children":[],"payload":{"tag":"li","lines":"128,129"}},{"content":"&#x63a5;&#x7740;&#xff0c;&#x5b83;&#x4f1a;&#x89e3;&#x6790; CSS &#x6587;&#x4ef6;&#xff0c;&#x6784;&#x5efa;&#x201c;CSS &#x5bf9;&#x8c61;&#x6a21;&#x578b;&#x201d;(CSSOM &#x6811;)&#xff0c;&#x8fd9;&#x4ee3;&#x8868;&#x4e86;&#x9875;&#x9762;&#x7684;&#x6837;&#x5f0f;&#x3002;","children":[],"payload":{"tag":"li","lines":"129,130"}},{"content":"&#x7136;&#x540e;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x5c06; DOM &#x6811;&#x548c; CSSOM &#x6811;&#x7ed3;&#x5408;&#x8d77;&#x6765;&#xff0c;&#x751f;&#x6210;&#x201c;&#x6e32;&#x67d3;&#x6811;&#x201d;(Render Tree)&#xff0c;&#x786e;&#x5b9a;&#x9875;&#x9762;&#x4e0a;&#x6bcf;&#x4e2a;&#x5143;&#x7d20;&#x7684;&#x5177;&#x4f53;&#x6837;&#x5f0f;&#x548c;&#x4f4d;&#x7f6e;&#x3002;","children":[],"payload":{"tag":"li","lines":"130,131"}},{"content":"&#x6700;&#x540e;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x6839;&#x636e;&#x6e32;&#x67d3;&#x6811;&#x5c06;&#x9875;&#x9762;&#x5185;&#x5bb9;&#x201c;&#x7ed8;&#x5236;&#x201d;&#x5230;&#x5c4f;&#x5e55;&#x4e0a;&#xff0c;&#x5448;&#x73b0;&#x51fa;&#x4f60;&#x6240;&#x770b;&#x5230;&#x7684;&#x89c6;&#x89c9;&#x6548;&#x679c;&#x3002;","children":[],"payload":{"tag":"li","lines":"131,132"}}],"payload":{"tag":"li","lines":"127,132"}},{"content":"&#x6267;&#x884c; JavaScript&#xff1a;&#x5728;&#x6e32;&#x67d3;&#x8fc7;&#x7a0b;&#x4e2d;&#x6216;&#x6e32;&#x67d3;&#x5b8c;&#x6210;&#x540e;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x4f1a;&#x6267;&#x884c;&#x9875;&#x9762;&#x4e2d;&#x5305;&#x542b;&#x7684; JavaScript &#x4ee3;&#x7801;&#x3002;&#x8fd9;&#x4e9b;&#x4ee3;&#x7801;&#x53ef;&#x4ee5;&#x52a8;&#x6001;&#x5730;&#x4fee;&#x6539;&#x9875;&#x9762;&#x7684;&#x5185;&#x5bb9;&#x548c;&#x6837;&#x5f0f;&#xff0c;&#x6216;&#x54cd;&#x5e94;&#x7528;&#x6237;&#x7684;&#x4ea4;&#x4e92;&#x64cd;&#x4f5c;&#xff08;&#x5982;&#x70b9;&#x51fb;&#x3001;&#x6eda;&#x52a8;&#x7b49;&#xff09;&#xff0c;&#x4f7f;&#x7f51;&#x9875;&#x5177;&#x6709;&#x4ea4;&#x4e92;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"132,134"}}],"payload":{"tag":"li","lines":"118,134","listIndex":6}}],"payload":{"tag":"h3","lines":"71,72"}},{"content":"<strong>HTML&#xff1a;&#x6784;&#x5efa;&#x7f51;&#x9875;&#x7ed3;&#x6784;</strong>","children":[{"content":"<strong>&#x8bed;&#x4e49;&#x5316; HTML&#xff1a;&#x8d4b;&#x4e88;&#x610f;&#x4e49;&#x548c;&#x63d0;&#x5347;&#x53ef;&#x8bbf;&#x95ee;&#x6027;</strong>","children":[],"payload":{"tag":"h4","lines":"140,141"}},{"content":"<strong>&#x8868;&#x5355;&#xff1a;&#x7528;&#x6237;&#x8f93;&#x5165;&#x548c;&#x4ea4;&#x4e92;</strong>","children":[],"payload":{"tag":"h4","lines":"146,147"}}],"payload":{"tag":"h3","lines":"134,135"}},{"content":"<strong>CSS&#xff1a;&#x6837;&#x5f0f;&#x548c;&#x5e03;&#x5c40;</strong>","children":[{"content":"<strong>&#x57fa;&#x7840;&#xff1a;&#x9009;&#x62e9;&#x5668;&#x3001;&#x5c42;&#x53e0;&#x3001;&#x7279;&#x5f02;&#x6027;&#x3001;&#x7ee7;&#x627f;</strong>","children":[{"content":"<strong>&#x5c42;&#x53e0;</strong>&#x51b3;&#x5b9a;&#x4e86;&#x5f53;&#x591a;&#x4e2a;&#x89c4;&#x5219;&#x9488;&#x5bf9;&#x540c;&#x4e00;&#x5143;&#x7d20;&#x65f6;&#xff0c;&#x6837;&#x5f0f;&#x5982;&#x4f55;&#x6839;&#x636e;&#x6765;&#x6e90;&#x3001;&#x91cd;&#x8981;&#x6027;&#x548c;&#x987a;&#x5e8f;&#x5e94;&#x7528;&#x3002;","children":[],"payload":{"tag":"li","lines":"158,159"}},{"content":"<strong>&#x7279;&#x5f02;&#x6027;</strong>&#x662f;&#x5206;&#x914d;&#x7ed9; CSS &#x58f0;&#x660e;&#x7684;&#x6743;&#x91cd;&#xff0c;&#x51b3;&#x5b9a;&#x4e86;&#x5f53;&#x591a;&#x4e2a;&#x9009;&#x62e9;&#x5668;&#x9488;&#x5bf9;&#x540c;&#x4e00;&#x5143;&#x7d20;&#x65f6;&#x54ea;&#x4e2a;&#x89c4;&#x5219;&#x9002;&#x7528;&#x3002;","children":[],"payload":{"tag":"li","lines":"159,160"}},{"content":"<strong>&#x7ee7;&#x627f;</strong>&#x662f;&#x6307;&#x5c5e;&#x6027;&#x53ef;&#x4ee5;&#x4ece;&#x7236;&#x5143;&#x7d20;&#x7ee7;&#x627f;&#x5230;&#x5176;&#x5b50;&#x5143;&#x7d20;&#x3002;","children":[],"payload":{"tag":"li","lines":"160,162"}}],"payload":{"tag":"h4","lines":"154,155"}},{"content":"<strong>&#x76d2;&#x6a21;&#x578b;&#xff1a;&#x7406;&#x89e3;&#x5143;&#x7d20;&#x5c3a;&#x5bf8;</strong>","children":[],"payload":{"tag":"h4","lines":"164,165"}},{"content":"<strong>&#x73b0;&#x4ee3;&#x5e03;&#x5c40;&#x6280;&#x672f;&#xff1a;Flexbox &#x548c; CSS Grid</strong>","children":[],"payload":{"tag":"h4","lines":"168,169"}},{"content":"<strong>&#x54cd;&#x5e94;&#x5f0f;&#x8bbe;&#x8ba1;&#xff1a;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x548c;&#x79fb;&#x52a8;&#x4f18;&#x5148;&#x539f;&#x5219;</strong>","children":[{"content":"<strong>&#x5a92;&#x4f53;&#x67e5;&#x8be2;</strong>&#x662f; CSS &#x6280;&#x672f;&#xff0c;&#x7528;&#x4e8e;&#x6839;&#x636e;&#x8bbe;&#x5907;&#x7279;&#x6027;&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x5c4f;&#x5e55;&#x5bbd;&#x5ea6;&#x3001;&#x9ad8;&#x5ea6;&#x3001;&#x65b9;&#x5411;&#xff09;&#x5e94;&#x7528;&#x4e0d;&#x540c;&#x7684;&#x6837;&#x5f0f;&#x3002;","children":[],"payload":{"tag":"li","lines":"180,181"}},{"content":"<strong>&#x5bb9;&#x5668;&#x67e5;&#x8be2; (Container Queries)</strong>&#xff1a;&#x57fa;&#x4e8e;<strong>&#x7236;&#x5bb9;&#x5668; (Container)</strong> &#x5c3a;&#x5bf8;&#x7684;&#x5fae;&#x89c2;&#x5e03;&#x5c40;&#x8c03;&#x6574;&#x3002;","children":[{"content":"&#x4f20;&#x7edf;&#x7684;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x65e0;&#x6cd5;&#x611f;&#x77e5;&#x7ec4;&#x4ef6;<strong>&#x6240;&#x5728;&#x7684;&#x4e0a;&#x4e0b;&#x6587;</strong>&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x540c;&#x4e00;&#x4e2a;&#x201c;&#x5361;&#x7247;&#x7ec4;&#x4ef6;&#x201d;&#x65e2;&#x53ef;&#x80fd;&#x51fa;&#x73b0;&#x5728;&#x5bbd;&#x655e;&#x7684;&#x4e3b;&#x5185;&#x5bb9;&#x533a;&#xff0c;&#x4e5f;&#x53ef;&#x80fd;&#x51fa;&#x73b0;&#x5728;&#x72ed;&#x7a84;&#x7684;&#x4fa7;&#x8fb9;&#x680f;&#x3002;","children":[],"payload":{"tag":"li","lines":"182,183"}},{"content":"&#x4f7f;&#x7528; <code>@container</code>&#xff0c;&#x7ec4;&#x4ef6;&#x53ef;&#x4ee5;&#x6839;&#x636e;&#x5176;&#x6240;&#x5728;&#x7236;&#x5bb9;&#x5668;&#x7684;&#x5bbd;&#x5ea6;&#x81ea;&#x52a8;&#x8c03;&#x6574;&#x6837;&#x5f0f;&#xff0c;&#x5b9e;&#x73b0;&#x4e86;&#x771f;&#x6b63;&#x7684;<strong>&#x7ec4;&#x4ef6;&#x7ea7;&#x54cd;&#x5e94;&#x5f0f;</strong>&#x3002;&#x8fd9;&#x4f7f;&#x5f97;&#x7ec4;&#x4ef6;&#x80fd;&#x591f;&#x5b8c;&#x5168;&#x72ec;&#x7acb;&#x4e8e;&#x9875;&#x9762;&#x5e03;&#x5c40;&#xff0c;&#x5b9e;&#x73b0;&#x201c;&#x7f16;&#x5199;&#x4e00;&#x6b21;&#xff0c;&#x5230;&#x5904;&#x8fd0;&#x884c;&#x201d;&#x3002;","children":[],"payload":{"tag":"li","lines":"183,184"}}],"payload":{"tag":"li","lines":"181,184"}},{"content":"<strong>&#x79fb;&#x52a8;&#x4f18;&#x5148;</strong>&#x662f;&#x4e00;&#x79cd;&#x8bbe;&#x8ba1;&#x7b56;&#x7565;&#xff0c;&#x4ece;&#x6700;&#x5c0f;&#x7684;&#x5c4f;&#x5e55;&#x5f00;&#x59cb;&#x8bbe;&#x8ba1;&#xff0c;&#x7136;&#x540e;&#x5411;&#x4e0a;&#x6269;&#x5c55;&#xff0c;&#x8fd9;&#x901a;&#x8fc7;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x5f97;&#x5230;&#x9690;&#x5f0f;&#x652f;&#x6301;&#x3002;","children":[],"payload":{"tag":"li","lines":"184,186"}}],"payload":{"tag":"h4","lines":"176,177"}},{"content":"<strong>&#x73b0;&#x4ee3; CSS &#x903b;&#x8f91;&#x3001;&#x4ea4;&#x4e92;&#x4e0e;&#x52a8;&#x753b;</strong>","children":[{"content":"\n<p data-lines=\"192,193\"><strong>&#x903b;&#x8f91;&#x9009;&#x62e9;&#x5668;&#x4e0e;&#x539f;&#x751f;&#x5d4c;&#x5957;</strong>&#xff1a;</p>","children":[{"content":"<strong><code>:has()</code> (&#x7236;&#x7c7b;&#x9009;&#x62e9;&#x5668;)</strong>&#xff1a;&#x5b83;&#x5141;&#x8bb8;&#x6839;&#x636e;<strong>&#x5b50;&#x5143;&#x7d20;&#x7684;&#x72b6;&#x6001;</strong>&#x6765;&#x63a7;&#x5236;&#x7236;&#x5143;&#x7d20;&#x6216;&#x5144;&#x5f1f;&#x5143;&#x7d20;&#x7684;&#x6837;&#x5f0f;&#x3002;&#x4f8b;&#x5982;&#xff0c;<code>form:has(input:invalid)</code> &#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x5728; CSS &#x4e2d;&#x5b9e;&#x73b0;&#x5f53;&#x8f93;&#x5165;&#x6846;&#x975e;&#x6cd5;&#x65f6;&#x6539;&#x53d8;&#x8868;&#x5355;&#x80cc;&#x666f;&#x7684;&#x903b;&#x8f91;&#xff0c;&#x800c;&#x65e0;&#x9700; JS &#x4ecb;&#x5165;&#x3002;","children":[],"payload":{"tag":"li","lines":"193,194"}},{"content":"<strong>&#x539f;&#x751f;&#x5d4c;&#x5957; (CSS Nesting)</strong>&#xff1a;&#x6d4f;&#x89c8;&#x5668;&#x73b0;&#x5df2;&#x539f;&#x751f;&#x652f;&#x6301;&#x7c7b;&#x4f3c; Sass/Less &#x7684;&#x5d4c;&#x5957;&#x8bed;&#x6cd5;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x76f4;&#x63a5;&#x5728; CSS &#x4e2d;&#x7f16;&#x5199;&#x5c42;&#x7ea7;&#x6e05;&#x6670;&#x7684;&#x4ee3;&#x7801;&#xff0c;&#x51cf;&#x5c11;&#x4e86;&#x5bf9;&#x6784;&#x5efa;&#x5de5;&#x5177;&#x7684;&#x5f3a;&#x4f9d;&#x8d56;&#x3002;","children":[],"payload":{"tag":"li","lines":"194,196"}}],"payload":{"tag":"li","lines":"192,196"}},{"content":"\n<p data-lines=\"196,197\"><strong>&#x89c6;&#x56fe;&#x8fc7;&#x6e21; (View Transitions API)</strong>&#xff1a;</p>","children":[{"content":"&#x63d0;&#x4f9b;&#x4e86;&#x4e00;&#x79cd;&#x539f;&#x751f;&#x673a;&#x5236;&#x6765;&#x521b;&#x5efa;&#x5e73;&#x6ed1;&#x7684; DOM &#x72b6;&#x6001;&#x5207;&#x6362;&#x52a8;&#x753b;&#x3002;&#x65e0;&#x8bba;&#x662f;&#x5355;&#x9875;&#x5e94;&#x7528; (SPA) &#x7684;&#x8def;&#x7531;&#x8df3;&#x8f6c;&#xff0c;&#x8fd8;&#x662f;&#x591a;&#x9875;&#x5e94;&#x7528; (MPA) &#x7684;&#x9875;&#x9762;&#x52a0;&#x8f7d;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x90fd;&#x80fd;&#x81ea;&#x52a8;&#x5bf9;&#x65b0;&#x65e7;&#x72b6;&#x6001;&#x8fdb;&#x884c;&#x622a;&#x56fe;&#x5e76;&#x751f;&#x6210;&#x8fc7;&#x6e21;&#x6548;&#x679c;&#xff08;&#x5982;&#x5143;&#x7d20;&#x5f62;&#x53d8;&#x3001;&#x6de1;&#x5165;&#x6de1;&#x51fa;&#xff09;&#xff0c;&#x65e0;&#x9700;&#x590d;&#x6742;&#x7684; JS &#x52a8;&#x753b;&#x5e93;&#x3002;","children":[],"payload":{"tag":"li","lines":"197,199"}}],"payload":{"tag":"li","lines":"196,199"}},{"content":"\n<p data-lines=\"199,200\"><strong>&#x6eda;&#x52a8;&#x9a71;&#x52a8;&#x52a8;&#x753b; (Scroll-driven Animations)</strong>&#xff1a;</p>","children":[{"content":"&#x5141;&#x8bb8;&#x5c06;&#x52a8;&#x753b;&#x8fdb;&#x5ea6;&#x76f4;&#x63a5;&#x7ed1;&#x5b9a;&#x5230;<strong>&#x6eda;&#x52a8;&#x5bb9;&#x5668;&#x7684;&#x6eda;&#x52a8;&#x4f4d;&#x7f6e;</strong>&#xff0c;&#x800c;&#x975e;&#x65f6;&#x95f4;&#x7ebf;&#x3002;","children":[],"payload":{"tag":"li","lines":"200,201"}},{"content":"<strong>&#x6027;&#x80fd;&#x4f18;&#x52bf;</strong>&#xff1a;&#x6b64;&#x7c7b;&#x52a8;&#x753b;&#x8fd0;&#x884c;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x7684;<strong>&#x5408;&#x6210;&#x7ebf;&#x7a0b; (Compositor Thread)</strong> &#x4e0a;&#xff0c;&#x5b8c;&#x5168;&#x4e0d;&#x963b;&#x585e;&#x4e3b;&#x7ebf;&#x7a0b;&#x3002;&#x5373;&#x4f7f; JavaScript &#x5fd9;&#x4e8e;&#x5904;&#x7406;&#x7e41;&#x91cd;&#x7684;&#x4e1a;&#x52a1;&#x903b;&#x8f91;&#x5bfc;&#x81f4;&#x9875;&#x9762;&#x5361;&#x987f;&#xff0c;&#x6eda;&#x52a8;&#x52a8;&#x753b;&#xff08;&#x5982;&#x89c6;&#x5dee;&#x6eda;&#x52a8;&#x3001;&#x9605;&#x8bfb;&#x8fdb;&#x5ea6;&#x6761;&#xff09;&#x4f9d;&#x7136;&#x80fd;&#x4fdd;&#x6301;&#x4e1d;&#x6ed1;&#x6d41;&#x7545;&#x3002;","children":[],"payload":{"tag":"li","lines":"201,203"}}],"payload":{"tag":"li","lines":"199,203"}}],"payload":{"tag":"h4","lines":"188,189"}},{"content":"<strong>&#x9ad8;&#x7ea7;&#x6837;&#x5f0f;&#xff1a;&#x5355;&#x4f4d;&#xff08;rem&#x3001;em&#x3001;vw/vh&#xff09;&#x3001;&#x51fd;&#x6570;&#xff08;clamp()&#x3001;calc()&#xff09;</strong>","children":[{"content":"\n<p data-lines=\"207,208\"><strong>rem</strong>&#xff08;&#x6839; em&#xff09;&#x548c; <strong>em</strong> &#x76f8;&#x5bf9;&#x4e8e;&#x5b57;&#x4f53;&#x5927;&#x5c0f;&#xff0c;&#x800c; <strong>vw</strong>&#xff08;&#x89c6;&#x53e3;&#x5bbd;&#x5ea6;&#xff09;&#x548c; <strong>vh</strong>&#xff08;&#x89c6;&#x53e3;&#x9ad8;&#x5ea6;&#xff09;&#x76f8;&#x5bf9;&#x4e8e;&#x89c6;&#x53e3;&#x5c3a;&#x5bf8;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"207,209"}},{"content":"\n<p data-lines=\"209,210\"><strong>calc()</strong> &#x5141;&#x8bb8;&#x6570;&#x5b66;&#x8868;&#x8fbe;&#x5f0f;&#xff0c;&#x800c; <strong>clamp()</strong> &#x5c06;&#x503c;&#x9650;&#x5236;&#x5728;&#x4e0a;&#x9650;&#x548c;&#x4e0b;&#x9650;&#x4e4b;&#x95f4;&#x3002;&#x8fd9;&#x4e9b;&#x9ad8;&#x7ea7;&#x5355;&#x4f4d;&#x548c;&#x51fd;&#x6570;&#x4f7f;&#x5f00;&#x53d1;&#x8005;&#x80fd;&#x591f;&#x521b;&#x5efa;&#x9ad8;&#x5ea6;&#x52a8;&#x6001;&#x548c;&#x9002;&#x5e94;&#x6027;&#x5f3a;&#x7684;&#x8bbe;&#x8ba1;&#xff0c;&#x800c;&#x65e0;&#x9700;&#x8fc7;&#x5ea6;&#x4f9d;&#x8d56; JavaScript &#x8fdb;&#x884c;&#x5e03;&#x5c40;&#xff0c;&#x4ece;&#x800c;&#x63d0;&#x9ad8;&#x6027;&#x80fd;&#x548c;&#x53ef;&#x7ef4;&#x62a4;&#x6027;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"209,211"}}],"payload":{"tag":"h4","lines":"203,204"}},{"content":"<strong>BEM (Block, Element, Modifier) &#x547d;&#x540d;&#x89c4;&#x8303;&#xff1a;&#x544a;&#x522b; CSS &#x6df7;&#x4e71;</strong>","children":[{"content":"<strong>&#x6838;&#x5fc3;&#x6784;&#x6210;</strong>","children":[{"content":"\n<p data-lines=\"219,220\"><strong>Block - &#x5757; ( <code>block</code> )</strong></p>","children":[{"content":"<strong>&#x5b9a;&#x4e49;&#xff1a;</strong> &#x4e00;&#x4e2a;&#x72ec;&#x7acb;&#x7684;&#x3001;&#x53ef;&#x5728;&#x9879;&#x76ee;&#x4e2d;&#x4efb;&#x610f;&#x4f4d;&#x7f6e;&#x590d;&#x7528;&#x7684;&#x9875;&#x9762;&#x7ec4;&#x4ef6;&#x3002;&#x53ef;&#x4ee5;&#x628a;&#x5b83;&#x60f3;&#x8c61;&#x6210;&#x4e00;&#x5757;&#x4e50;&#x9ad8;&#x79ef;&#x6728;&#xff0c;&#x6bd4;&#x5982;&#x4e00;&#x4e2a;&#x201c;&#x641c;&#x7d22;&#x8868;&#x5355;&#x201d;&#x3001;&#x4e00;&#x4e2a;&#x201c;&#x4ea7;&#x54c1;&#x5361;&#x7247;&#x201d;&#x6216;&#x4e00;&#x4e2a;&#x201c;&#x5bfc;&#x822a;&#x83dc;&#x5355;&#x201d;&#x3002;&#x5b83;&#x81ea;&#x8eab;&#x662f;&#x5b8c;&#x6574;&#x4e14;&#x6709;&#x610f;&#x4e49;&#x7684;&#x3002;","children":[],"payload":{"tag":"li","lines":"220,222"}}],"payload":{"tag":"li","lines":"219,222"}},{"content":"\n<p data-lines=\"222,223\"><strong>Element - &#x5143;&#x7d20; ( <code>__element</code> )</strong></p>","children":[{"content":"<strong>&#x5b9a;&#x4e49;&#xff1a;</strong> &#x5757;&#x7684;&#x7ec4;&#x6210;&#x90e8;&#x5206;&#xff0c;&#x5b83;&#x5728;&#x8bed;&#x4e49;&#x4e0a;&#x5b8c;&#x5168;&#x4ece;&#x5c5e;&#x4e8e;&#x8fd9;&#x4e2a;&#x5757;&#xff0c;&#x4e0d;&#x80fd;&#x8131;&#x79bb;&#x5757;&#x800c;&#x72ec;&#x7acb;&#x5b58;&#x5728;&#x3002;&#x5982;&#x679c;&#x201c;&#x4ea7;&#x54c1;&#x5361;&#x7247;&#x201d;&#x662f;&#x5757;&#xff0c;&#x90a3;&#x4e48;&#x201c;&#x5361;&#x7247;&#x6807;&#x9898;&#x201d;&#x3001;&#x201c;&#x5361;&#x7247;&#x56fe;&#x7247;&#x201d;&#x548c;&#x201c;&#x8d2d;&#x4e70;&#x6309;&#x94ae;&#x201d;&#x5c31;&#x662f;&#x5143;&#x7d20;&#x3002;","children":[],"payload":{"tag":"li","lines":"223,224"}},{"content":"<strong>&#x547d;&#x540d;&#x89c4;&#x5219;&#xff1a;</strong> &#x5143;&#x7d20;&#x7684;&#x540d;&#x79f0;&#x901a;&#x8fc7;<strong>&#x53cc;&#x4e0b;&#x5212;&#x7ebf; (<code>__</code>)</strong> &#x4e0e;&#x5176;&#x6240;&#x5c5e;&#x7684;&#x5757;&#x8fde;&#x63a5;&#x3002;&#x4f8b;&#x5982; <code>card__title</code>&#x3002;","children":[],"payload":{"tag":"li","lines":"224,226"}}],"payload":{"tag":"li","lines":"222,226"}},{"content":"\n<p data-lines=\"226,227\"><strong>Modifier - &#x4fee;&#x9970;&#x7b26; ( <code>--modifier</code> )</strong></p>","children":[{"content":"<strong>&#x5b9a;&#x4e49;&#xff1a;</strong> &#x4e00;&#x4e2a;&#x7528;&#x6765;&#x63cf;&#x8ff0;&#x5757;&#x6216;&#x5143;&#x7d20;&#x7684;&#x5916;&#x89c2;&#x3001;&#x72b6;&#x6001;&#x6216;&#x884c;&#x4e3a;&#x7684;&#x201c;&#x6807;&#x5fd7;&#x201d;&#x6216;&#x201c;&#x5f62;&#x5bb9;&#x8bcd;&#x201d;&#x3002;&#x5b83;&#x5b9a;&#x4e49;&#x4e86;&#x7ec4;&#x4ef6;&#x7684;&#x53d8;&#x4f53;&#x3002;","children":[],"payload":{"tag":"li","lines":"227,228"}},{"content":"<strong>&#x547d;&#x540d;&#x89c4;&#x5219;&#xff1a;</strong> &#x4fee;&#x9970;&#x7b26;&#x7684;&#x540d;&#x79f0;&#x901a;&#x8fc7;<strong>&#x53cc;&#x4e2d;&#x5212;&#x7ebf; (<code>--</code>)</strong> &#x4e0e;&#x5b83;&#x6240;&#x4fee;&#x9970;&#x7684;&#x5757;&#x6216;&#x5143;&#x7d20;&#x8fde;&#x63a5;&#x3002;","children":[],"payload":{"tag":"li","lines":"228,229"}},{"content":"<strong>&#x793a;&#x4f8b;&#xff1a;</strong>","children":[{"content":"&#x4fee;&#x9970;&#x4e00;&#x4e2a;&#x5757;&#xff1a;&#x6bd4;&#x5982;&#x666e;&#x901a;&#x7684; <code>card</code> &#x7ec4;&#x4ef6;&#x53ef;&#x4ee5;&#x6709;&#x4e00;&#x4e2a;&#x201c;&#x7279;&#x522b;&#x63a8;&#x8350;&#x201d;&#x7684;&#x7248;&#x672c;&#xff0c;&#x6211;&#x4eec;&#x79f0;&#x4e4b;&#x4e3a; <code>card--featured</code>&#x3002;","children":[],"payload":{"tag":"li","lines":"230,231"}},{"content":"&#x4fee;&#x9970;&#x4e00;&#x4e2a;&#x5143;&#x7d20;&#xff1a;&#x6bd4;&#x5982; <code>card__button</code> &#x9ed8;&#x8ba4;&#x662f;&#x7070;&#x8272;&#xff0c;&#x4f46;&#x53ef;&#x4ee5;&#x6709;&#x4e00;&#x4e2a;&#x201c;&#x4e3b;&#x8981;&#x201d;&#x72b6;&#x6001;&#xff0c;&#x6211;&#x4eec;&#x79f0;&#x4e4b;&#x4e3a; <code>card__button--primary</code>&#x3002;&#x6216;&#x8005;&#x83dc;&#x5355;&#x9879; <code>menu__item</code> &#x53ef;&#x4ee5;&#x6709;&#x4e00;&#x4e2a;&#x201c;&#x5f53;&#x524d;&#x6fc0;&#x6d3b;&#x201d;&#x7684;&#x72b6;&#x6001;&#xff0c;&#x5373; <code>menu__item--active</code>&#x3002;","children":[],"payload":{"tag":"li","lines":"231,233"}}],"payload":{"tag":"li","lines":"229,233"}}],"payload":{"tag":"li","lines":"226,233"}}],"payload":{"tag":"h5","lines":"217,218"}},{"content":"<strong>&#x6838;&#x5fc3;&#x4f18;&#x52bf;</strong>","children":[{"content":"<strong>&#x7ed3;&#x6784;&#x6e05;&#x6670;&#xff1a;</strong> &#x4ec5;&#x901a;&#x8fc7;&#x9605;&#x8bfb;&#x7c7b;&#x540d;&#xff0c;&#x5c31;&#x80fd;&#x76f4;&#x89c2;&#x5730;&#x7406;&#x89e3; UI &#x5143;&#x7d20;&#x7684;&#x7ed3;&#x6784;&#x548c;&#x7ec4;&#x4ef6;&#x95f4;&#x7684;&#x4ece;&#x5c5e;&#x5173;&#x7cfb;&#x3002;","children":[],"payload":{"tag":"li","lines":"235,236"}},{"content":"<strong>&#x9ad8;&#x53ef;&#x8bfb;&#x6027;&#xff1a;</strong> &#x7c7b;&#x540d;&#x672c;&#x8eab;&#x5c31;&#x6210;&#x4e3a;&#x4e86;&#x4e00;&#x79cd;&#x6587;&#x6863;&#xff0c;&#x6e05;&#x6670;&#x5730;&#x4f20;&#x8fbe;&#x4e86;&#x5176;&#x529f;&#x80fd;&#x548c;&#x72b6;&#x6001;&#x3002;","children":[],"payload":{"tag":"li","lines":"236,237"}},{"content":"<strong>&#x6613;&#x4e8e;&#x7ef4;&#x62a4;&#xff1a;</strong> &#x6240;&#x6709;&#x6837;&#x5f0f;&#x90fd;&#x57fa;&#x4e8e;&#x5355;&#x4e00;&#x7684;&#x7c7b;&#x9009;&#x62e9;&#x5668;&#xff0c;&#x907f;&#x514d;&#x4e86;&#x590d;&#x6742;&#x7684;&#x5d4c;&#x5957;&#x548c;&#x7279;&#x5f02;&#x6027;&#x95ee;&#x9898;&#xff0c;&#x4f7f;&#x5f97;&#x6837;&#x5f0f;&#x8986;&#x76d6;&#x548c;&#x4fee;&#x6539;&#x53d8;&#x5f97;&#x7b80;&#x5355;&#x800c;&#x5b89;&#x5168;&#x3002;","children":[],"payload":{"tag":"li","lines":"237,239"}}],"payload":{"tag":"h5","lines":"233,234"}}],"payload":{"tag":"h4","lines":"211,212"}}],"payload":{"tag":"h3","lines":"152,153"}},{"content":"<strong>&#x73b0;&#x4ee3; CSS &#x67b6;&#x6784;&#x4e0e;&#x7b56;&#x7565;</strong>","children":[{"content":"<strong>CSS &#x9884;&#x5904;&#x7406;&#x5668; (CSS Preprocessors)</strong>","children":[{"content":"<strong>1. Sass / SCSS</strong>","children":[{"content":"1. <a href=\"https://sass-lang.com/\">Sass</a> (&#x65e7;&#x8bed;&#x6cd5;)&#xff1a;&#x4f7f;&#x7528;&#x7f29;&#x8fdb;&#x800c;&#x4e0d;&#x662f;&#x82b1;&#x62ec;&#x53f7;&#xff0c;&#x5e76;&#x4e14;&#x7701;&#x7565;&#x4e86;&#x5206;&#x53f7;&#x3002;&#x8fd9;&#x79cd;&#x8bed;&#x6cd5;&#x66f4;&#x7b80;&#x6d01;&#xff0c;&#x4f46;&#x4e0e;&#x539f;&#x751f; CSS &#x5dee;&#x5f02;&#x8f83;&#x5927;&#x3002;&#x6587;&#x4ef6;&#x6269;&#x5c55;&#x540d;&#x4e3a; .sass&#x3002;","children":[],"payload":{"tag":"li","lines":"251,252","listIndex":1}},{"content":"2. <a href=\"https://sass-lang.com/documentation/syntax#scss\">SCSS</a> (&#x65b0;&#x8bed;&#x6cd5;)&#xff1a;&#x5168;&#x79f0;&#x662f; &quot;Sassy CSS&quot;&#xff0c;&#x5b83;&#x7684;&#x8bed;&#x6cd5;&#x4e0e;&#x539f;&#x751f; CSS &#x5b8c;&#x5168;&#x517c;&#x5bb9;&#x3002;&#x4efb;&#x4f55;&#x6709;&#x6548;&#x7684; CSS &#x6587;&#x4ef6;&#x4e5f;&#x662f;&#x6709;&#x6548;&#x7684; SCSS &#x6587;&#x4ef6;&#x3002;&#x8fd9;&#x662f;&#x76ee;&#x524d;&#x66f4;&#x4e3a;&#x4e3b;&#x6d41;&#x548c;&#x63a8;&#x8350;&#x7684;&#x8bed;&#x6cd5;&#x3002;&#x6587;&#x4ef6;&#x6269;&#x5c55;&#x540d;&#x4e3a; .scss&#x3002;","children":[],"payload":{"tag":"li","lines":"252,254","listIndex":2}}],"payload":{"tag":"h5","lines":"247,248"}},{"content":"<strong>2. Less</strong>","children":[],"payload":{"tag":"h5","lines":"256,257"}}],"payload":{"tag":"h4","lines":"243,244"}},{"content":"<strong>PostCSS&#xff1a;&#x7528; JavaScript &#x63d2;&#x4ef6;&#x6765;&#x8f6c;&#x6362; CSS &#x7684;&#x5de5;&#x5177;&#x5e73;&#x53f0;</strong>","children":[{"content":"&#x5b9e;&#x73b0;&#x7c7b;&#x4f3c;&#x9884;&#x5904;&#x7406;&#x5668;&#x7684;&#x529f;&#x80fd;&#xff1a;&#x901a;&#x8fc7;&#x63d2;&#x4ef6;&#xff08;&#x5982; <a href=\"https://github.com/postcss/postcss-nested\">postcss-nested</a>, <a href=\"https://github.com/postcss/postcss-simple-vars\">postcss-simple-vars</a>&#xff09;&#xff0c;&#x4f60;&#x53ef;&#x4ee5;&#x5b9e;&#x73b0;&#x5d4c;&#x5957;&#x548c;&#x53d8;&#x91cf;&#x7b49;&#x529f;&#x80fd;&#x3002;","children":[],"payload":{"tag":"li","lines":"264,265"}},{"content":"&#x81ea;&#x52a8;&#x6dfb;&#x52a0;&#x6d4f;&#x89c8;&#x5668;&#x524d;&#x7f00; (<a href=\"https://github.com/postcss/autoprefixer\">Autoprefixer</a>)&#xff1a;&#x8fd9;&#x662f; PostCSS &#x6700;&#x8457;&#x540d;&#x3001;&#x6700;&#x5f3a;&#x5927;&#x7684;&#x63d2;&#x4ef6;&#x3002;&#x5b83;&#x53ef;&#x4ee5;&#x81ea;&#x52a8;&#x4e3a;&#x4f60;&#x5206;&#x6790;&#x4ee3;&#x7801;&#xff0c;&#x5e76;&#x4e3a;&#x9700;&#x8981;&#x517c;&#x5bb9;&#x7684; CSS &#x89c4;&#x5219;&#xff08;&#x5982; -webkit-, -moz-&#xff09;&#x6dfb;&#x52a0;&#x5382;&#x5546;&#x524d;&#x7f00;&#x3002;","children":[],"payload":{"tag":"li","lines":"265,266"}},{"content":"&#x4f7f;&#x7528;&#x672a;&#x6765;&#x7684; CSS &#x8bed;&#x6cd5;&#xff1a;&#x901a;&#x8fc7;&#x50cf; <a href=\"https://preset-env.cssdb.org/\">postcss-preset-env</a> &#x8fd9;&#x6837;&#x7684;&#x63d2;&#x4ef6;&#xff0c;&#x4f60;&#x53ef;&#x4ee5;&#x73b0;&#x5728;&#x5c31;&#x4f7f;&#x7528;&#x5c1a;&#x672a;&#x88ab;&#x6240;&#x6709;&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#x7684;&#x6700;&#x65b0; CSS &#x89c4;&#x8303;&#xff0c;&#x5b83;&#x4f1a;&#x81ea;&#x52a8;&#x5c06;&#x5176;&#x8f6c;&#x6362;&#x4e3a;&#x5f53;&#x524d;&#x6d4f;&#x89c8;&#x5668;&#x517c;&#x5bb9;&#x7684;&#x7b49;&#x6548;&#x4ee3;&#x7801;&#x3002;","children":[],"payload":{"tag":"li","lines":"266,267"}},{"content":"&#x4ee3;&#x7801;&#x4f18;&#x5316;&#x548c;&#x538b;&#x7f29;&#xff1a;&#x901a;&#x8fc7;&#x63d2;&#x4ef6;&#x53ef;&#x4ee5;&#x81ea;&#x52a8;&#x538b;&#x7f29; CSS &#x4ee3;&#x7801;&#xff0c;&#x79fb;&#x9664;&#x6ce8;&#x91ca;&#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"267,269"}}],"payload":{"tag":"h4","lines":"260,261"}},{"content":"<strong>&#x539f;&#x5b50;&#x5316; CSS (Utility-First CSS)</strong>","children":[{"content":"<strong>&#x8bbe;&#x8ba1;&#x4e00;&#x81f4;&#x6027;</strong>&#xff1a;&#x901a;&#x8fc7;&#x9650;&#x5236;&#x53ef;&#x7528;&#x7684;&#x6837;&#x5f0f;&#x9009;&#x9879;&#xff0c;&#x539f;&#x5b50;&#x7c7b;&#x51cf;&#x5c11;&#x4e86;&#x6837;&#x5f0f;&#x51b2;&#x7a81;&#x7684;&#x98ce;&#x9669;&#xff0c;&#x786e;&#x4fdd;&#x4e86;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x4e2d;&#x7684;&#x89c6;&#x89c9;&#x7edf;&#x4e00;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"275,276"}},{"content":"<strong>&#x6548;&#x7387;&#x63d0;&#x5347;</strong>&#xff1a;&#x907f;&#x514d;&#x4e86;&#x4e3a;&#x6bcf;&#x4e2a; UI &#x7ec4;&#x4ef6;&#x7f16;&#x5199;&#x548c;&#x7ef4;&#x62a4;&#x5927;&#x91cf;&#x81ea;&#x5b9a;&#x4e49; CSS &#x7684;&#x9700;&#x8981;&#xff0c;&#x663e;&#x8457;&#x51cf;&#x5c11;&#x4e86; CSS &#x4ee3;&#x7801;&#x91cf;&#x3002;","children":[],"payload":{"tag":"li","lines":"276,277"}},{"content":"<strong>&#x54cd;&#x5e94;&#x5f0f;&#x8bbe;&#x8ba1;</strong>&#xff1a;&#x5185;&#x7f6e;&#x7684;&#x54cd;&#x5e94;&#x5f0f;&#x65ad;&#x70b9;&#x652f;&#x6301;&#x7b80;&#x5316;&#x4e86;&#x591a;&#x8bbe;&#x5907;&#x5e03;&#x5c40;&#x7684;&#x521b;&#x5efa;&#xff0c;&#x65e0;&#x9700;&#x624b;&#x52a8;&#x7f16;&#x5199;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x3002;","children":[],"payload":{"tag":"li","lines":"277,278"}},{"content":"<strong>&#x6027;&#x80fd;&#x4f18;&#x5316;</strong>&#xff1a;&#x901a;&#x8fc7; <a href=\"https://purgecss.com/\">PurgeCSS</a> &#x7b49;&#x5de5;&#x5177;&#xff0c;&#x6700;&#x7ec8;&#x751f;&#x6210;&#x7684; CSS &#x6587;&#x4ef6;&#x53ea;&#x5305;&#x542b;&#x5b9e;&#x9645;&#x4f7f;&#x7528;&#x7684;&#x6837;&#x5f0f;&#xff0c;&#x6587;&#x4ef6;&#x4f53;&#x79ef;&#x5c0f;&#xff0c;&#x52a0;&#x8f7d;&#x901f;&#x5ea6;&#x5feb;&#xff0c;&#x6709;&#x52a9;&#x4e8e;&#x63d0;&#x5347;&#x7f51;&#x7ad9;&#x6027;&#x80fd;&#x3002;","children":[],"payload":{"tag":"li","lines":"278,279"}},{"content":"<strong>&#x7075;&#x6d3b;&#x6027;&#x4e0e;&#x53ef;&#x5b9a;&#x5236;&#x6027;</strong>&#xff1a;&#x5c3d;&#x7ba1;&#x662f;&#x9884;&#x5b9a;&#x4e49;&#x7c7b;&#xff0c;&#x4f46;&#x901a;&#x8fc7;&#x7ec4;&#x5408;&#x4e0d;&#x540c;&#x7684;&#x539f;&#x5b50;&#x7c7b;&#xff0c;&#x53ef;&#x4ee5;&#x521b;&#x5efa;&#x51fa;&#x72ec;&#x7279;&#x7684;&#x6837;&#x5f0f;&#x3002;&#x540c;&#x65f6;&#xff0c;&#x901a;&#x8fc7;&#x914d;&#x7f6e;&#x6587;&#x4ef6;&#x53ef;&#x4ee5;&#x6df1;&#x5ea6;&#x5b9a;&#x5236;&#x6846;&#x67b6;&#xff0c;&#x6ee1;&#x8db3;&#x9879;&#x76ee;&#x7279;&#x5b9a;&#x7684;&#x8bbe;&#x8ba1;&#x9700;&#x6c42;&#xff0c;&#x751a;&#x81f3;&#x53ef;&#x4ee5;&#x96c6;&#x6210;&#x81ea;&#x5b9a;&#x4e49; CSS&#x3002;","children":[],"payload":{"tag":"li","lines":"279,281"}}],"payload":{"tag":"h4","lines":"269,270"}},{"content":"<strong>CSS-in-JS</strong>","children":[],"payload":{"tag":"h4","lines":"285,286"}},{"content":"<strong>CSS Modules</strong>","children":[],"payload":{"tag":"h4","lines":"293,294"}},{"content":"<strong>&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x4e0e;&#x7ec4;&#x4ef6;&#x5e93;&#x4e2d;&#x7684; CSS</strong>","children":[],"payload":{"tag":"h4","lines":"301,302"}},{"content":"<strong>&#x8868;&#xff1a;&#x73b0;&#x4ee3; CSS &#x67b6;&#x6784;&#x5bf9;&#x6bd4; (Utility-First CSS vs. CSS-in-JS vs. CSS Modules)</strong>","children":[{"content":"<table data-lines=\"307,317\">\n<thead data-lines=\"307,308\">\n<tr data-lines=\"307,308\">\n<th style=\"text-align:left\">&#x7279;&#x6027;/&#x67b6;&#x6784;</th>\n<th style=\"text-align:left\">&#x539f;&#x5b50;&#x5316; CSS (e.g., <a href=\"https://tailwindcss.com/\">Tailwind CSS</a>, <a href=\"https://unocss.dev/\">UnoCSS</a>)</th>\n<th style=\"text-align:left\">CSS-in-JS (e.g., <a href=\"https://styled-components.com/\">styled-components</a>, <a href=\"https://emotion.sh/\">Emotion</a>)</th>\n<th style=\"text-align:left\"><a href=\"https://github.com/css-modules/css-modules\">CSS Modules</a></th>\n</tr>\n</thead>\n<tbody data-lines=\"309,317\">\n<tr data-lines=\"309,310\">\n<td style=\"text-align:left\"><strong>&#x54f2;&#x5b66;</strong></td>\n<td style=\"text-align:left\">&#x5b9e;&#x7528;&#x81f3;&#x4e0a;&#xff0c;&#x76f4;&#x63a5;&#x5728; HTML &#x4e2d;&#x7ec4;&#x5408;&#x539f;&#x5b50;&#x7c7b;</td>\n<td style=\"text-align:left\">JavaScript &#x9a71;&#x52a8;&#x7684;&#x6837;&#x5f0f;&#xff0c;&#x6837;&#x5f0f;&#x4e0e;&#x7ec4;&#x4ef6;&#x7d27;&#x5bc6;&#x8026;&#x5408;</td>\n<td style=\"text-align:left\">CSS &#x7c7b;&#x540d;&#x5c40;&#x90e8;&#x4f5c;&#x7528;&#x57df;&#x5316;&#xff0c;&#x907f;&#x514d;&#x5168;&#x5c40;&#x51b2;&#x7a81;</td>\n</tr>\n<tr data-lines=\"310,311\">\n<td style=\"text-align:left\"><strong>&#x4f5c;&#x7528;&#x57df;</strong></td>\n<td style=\"text-align:left\">&#x901a;&#x8fc7;&#x7ec4;&#x5408;&#x539f;&#x5b50;&#x7c7b;&#x5b9e;&#x73b0;&#x6837;&#x5f0f;&#x9694;&#x79bb;</td>\n<td style=\"text-align:left\">&#x81ea;&#x52a8;&#x751f;&#x6210;&#x552f;&#x4e00;&#x7c7b;&#x540d;&#xff0c;&#x786e;&#x4fdd;&#x6837;&#x5f0f;&#x5c40;&#x90e8;&#x4f5c;&#x7528;&#x57df;</td>\n<td style=\"text-align:left\">&#x6784;&#x5efa;&#x65f6;&#x91cd;&#x547d;&#x540d;&#x7c7b;&#x540d;&#xff0c;&#x5b9e;&#x73b0;&#x5c40;&#x90e8;&#x4f5c;&#x7528;&#x57df;</td>\n</tr>\n<tr data-lines=\"311,312\">\n<td style=\"text-align:left\"><strong>&#x6027;&#x80fd;&#x5f71;&#x54cd;</strong></td>\n<td style=\"text-align:left\">&#x6784;&#x5efa;&#x65f6;&#x751f;&#x6210;&#x6700;&#x5c0f;&#x5316; CSS&#xff0c;&#x96f6;&#x8fd0;&#x884c;&#x65f6;&#x5f00;&#x9500;</td>\n<td style=\"text-align:left\">&#x589e;&#x52a0; JS &#x6253;&#x5305;&#x4f53;&#x79ef;&#xff0c;&#x8fd0;&#x884c;&#x65f6;&#x6837;&#x5f0f;&#x8ba1;&#x7b97;&#x5f00;&#x9500;&#xff08;<a href=\"https://emotion.sh/\">Emotion</a> &#x901a;&#x8fc7;&#x9759;&#x6001;&#x63d0;&#x53d6;&#x53ef;&#x4f18;&#x5316;&#xff09;</td>\n<td style=\"text-align:left\">&#x6784;&#x5efa;&#x65f6;&#x5904;&#x7406;&#xff0c;&#x96f6;&#x8fd0;&#x884c;&#x65f6;&#x5f00;&#x9500;</td>\n</tr>\n<tr data-lines=\"312,313\">\n<td style=\"text-align:left\"><strong>&#x5f00;&#x53d1;&#x4f53;&#x9a8c;</strong></td>\n<td style=\"text-align:left\">&#x5feb;&#x901f;&#x539f;&#x578b;&#x5f00;&#x53d1;&#xff0c;&#x65e0;&#x9700;&#x5207;&#x6362;&#x6587;&#x4ef6;&#xff0c;HTML &#x53ef;&#x80fd;&#x5197;&#x957f;</td>\n<td style=\"text-align:left\">&#x5f3a;&#x5927;&#x52a8;&#x6001;&#x6837;&#x5f0f;&#x80fd;&#x529b;&#xff0c;&#x4e3b;&#x9898;&#x5316;&#x6613;&#x5b9e;&#x73b0;&#xff0c;JS &#x4e2d;&#x5199; CSS</td>\n<td style=\"text-align:left\">&#x719f;&#x6089;&#x539f;&#x751f; CSS &#x8bed;&#x6cd5;&#xff0c;&#x6837;&#x5f0f;&#x9694;&#x79bb;&#x5f7b;&#x5e95;&#xff0c;&#x6613;&#x4e8e;&#x7ef4;&#x62a4;</td>\n</tr>\n<tr data-lines=\"313,314\">\n<td style=\"text-align:left\"><strong>&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</strong></td>\n<td style=\"text-align:left\">&#x5bf9;&#x4e8e;&#x4f20;&#x7edf; CSS &#x4f7f;&#x7528;&#x8005;&#x8f83;&#x9661;&#x5ced;</td>\n<td style=\"text-align:left\">&#x5bf9;&#x4e8e; JS &#x5f00;&#x53d1;&#x8005;&#x53cb;&#x597d;&#xff0c;&#x4f46;&#x6982;&#x5ff5;&#x53ef;&#x80fd;&#x9700;&#x9002;&#x5e94;</td>\n<td style=\"text-align:left\">&#x4f4e;&#xff0c;&#x63a5;&#x8fd1;&#x539f;&#x751f; CSS</td>\n</tr>\n<tr data-lines=\"314,315\">\n<td style=\"text-align:left\"><strong>&#x52a8;&#x6001;&#x6837;&#x5f0f;</strong></td>\n<td style=\"text-align:left\">&#x9700;&#x7ed3;&#x5408; JS &#x903b;&#x8f91;&#x6216;&#x914d;&#x7f6e;&#x5b9e;&#x73b0;</td>\n<td style=\"text-align:left\">&#x539f;&#x751f;&#x652f;&#x6301;&#xff0c;&#x57fa;&#x4e8e; props &#x6216; state &#x8f7b;&#x677e;&#x5b9e;&#x73b0;</td>\n<td style=\"text-align:left\">&#x6709;&#x9650;&#xff0c;&#x9700;&#x989d;&#x5916;&#x5e93;&#x8f85;&#x52a9;</td>\n</tr>\n<tr data-lines=\"315,316\">\n<td style=\"text-align:left\"><strong>&#x4e3b;&#x9898;&#x5316;</strong></td>\n<td style=\"text-align:left\">&#x901a;&#x8fc7;&#x914d;&#x7f6e;&#x6587;&#x4ef6;&#x548c; CSS &#x53d8;&#x91cf;&#x5b9e;&#x73b0;</td>\n<td style=\"text-align:left\">&#x5185;&#x7f6e;&#x6216;&#x6613;&#x4e8e;&#x5b9e;&#x73b0;</td>\n<td style=\"text-align:left\">&#x9700;&#x989d;&#x5916;&#x5de5;&#x5177;&#x6216;&#x624b;&#x52a8;&#x5b9e;&#x73b0;</td>\n</tr>\n<tr data-lines=\"316,317\">\n<td style=\"text-align:left\"><strong>&#x9002;&#x7528;&#x573a;&#x666f;</strong></td>\n<td style=\"text-align:left\">&#x5feb;&#x901f;&#x5f00;&#x53d1;&#xff0c;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff0c;&#x9700;&#x8981;&#x9ad8;&#x5ea6;&#x5b9a;&#x5236;&#x548c;&#x6027;&#x80fd;&#x4f18;&#x5316;&#x7684;&#x9879;&#x76ee;</td>\n<td style=\"text-align:left\">&#x7ec4;&#x4ef6;&#x5316;&#x5f00;&#x53d1;&#xff0c;&#x590d;&#x6742;&#x52a8;&#x6001; UI&#xff0c;&#x9700;&#x8981;&#x5f3a;&#x5c01;&#x88c5;&#x6027;&#x7684;&#x7ec4;&#x4ef6;</td>\n<td style=\"text-align:left\">&#x4e2d;&#x5927;&#x578b;&#x9879;&#x76ee;&#xff0c;&#x8ffd;&#x6c42;&#x539f;&#x751f; CSS &#x4f53;&#x9a8c;&#x548c;&#x4e25;&#x683c;&#x6837;&#x5f0f;&#x9694;&#x79bb;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"307,317"}}],"payload":{"tag":"h4","lines":"305,306"}}],"payload":{"tag":"h3","lines":"239,240"}},{"content":"<strong>JavaScript&#xff1a;&#x8d4b;&#x4e88;&#x4ea4;&#x4e92;&#x6027;&#x751f;&#x547d;</strong>","children":[{"content":"<strong>&#x6838;&#x5fc3;&#x8bed;&#x8a00;&#x6982;&#x5ff5;&#xff08;ES6+&#xff09;</strong>","children":[{"content":"<strong>&#x53d8;&#x91cf;&#xff08;let/const&#xff09;</strong>&#xff1a;<a href=\"https://www.ecma-international.org/publications-and-standards/standards/ecma-262/6th-edition/\">ES6</a> &#x5f15;&#x5165;&#x7684;&#x5757;&#x7ea7;&#x4f5c;&#x7528;&#x57df;&#x53d8;&#x91cf;&#x58f0;&#x660e;&#xff0c;&#x6bd4; var &#x63d0;&#x4f9b;&#x4e86;&#x66f4;&#x597d;&#x7684;&#x4f5c;&#x7528;&#x57df;&#x63a7;&#x5236;&#x3002;<br>\nconst &#x521b;&#x5efa;&#x4e00;&#x4e2a;&#x4e0d;&#x53ef;&#x53d8;&#x5f15;&#x7528;&#xff0c;&#x800c; let &#x5141;&#x8bb8;&#x91cd;&#x65b0;&#x8d4b;&#x503c;&#x3002;","children":[],"payload":{"tag":"li","lines":"330,332"}},{"content":"<strong>&#x7bad;&#x5934;&#x51fd;&#x6570;</strong>&#xff1a;&#x7b80;&#x6d01;&#x7684;&#x51fd;&#x6570;&#x8bed;&#x6cd5;&#xff0c;&#x5177;&#x6709;&#x8bcd;&#x6cd5; this &#x7ed1;&#x5b9a;&#x3002;","children":[],"payload":{"tag":"li","lines":"332,333"}},{"content":"<strong>&#x6570;&#x636e;&#x7ed3;&#x6784;&#xff08;Array&#x3001;Object&#x3001;Map&#x3001;Set&#xff09;</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x7ec4;&#x7ec7;&#x548c;&#x64cd;&#x4f5c;&#x6570;&#x636e;&#x81f3;&#x5173;&#x91cd;&#x8981;&#x3002;<br>\nMap &#x548c; Set &#x5728;&#x96c6;&#x5408;&#x65b9;&#x9762;&#x6bd4;&#x666e;&#x901a;&#x5bf9;&#x8c61;&#x63d0;&#x4f9b;&#x4e86;&#x66f4;&#x597d;&#x7684;&#x6027;&#x80fd;&#x548c;&#x952e;&#x7684;&#x7075;&#x6d3b;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"333,335"}},{"content":"<strong>&#x63a7;&#x5236;&#x6d41;</strong>&#xff1a;if-else&#x3001;switch&#x3001;&#x5faa;&#x73af;&#xff08;for&#x3001;while&#x3001;do-while&#x3001;for-in&#x3001;for-of&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"335,336"}},{"content":"<strong>&#x4f5c;&#x7528;&#x57df;</strong>&#xff1a;&#x51b3;&#x5b9a;&#x4e86;&#x53d8;&#x91cf;&#x548c;&#x51fd;&#x6570;&#x5728;&#x4ee3;&#x7801;&#x4e0d;&#x540c;&#x90e8;&#x5206;&#x7684;&#x8bbf;&#x95ee;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"336,337"}},{"content":"<strong>&#x95ed;&#x5305;</strong>&#xff1a;&#x4e0e;&#x8bcd;&#x6cd5;&#x73af;&#x5883;&#x6346;&#x7ed1;&#x5728;&#x4e00;&#x8d77;&#x7684;&#x51fd;&#x6570;&#xff0c;&#x5373;&#x4f7f;&#x5916;&#x90e8;&#x51fd;&#x6570;&#x6267;&#x884c;&#x5b8c;&#x6bd5;&#xff0c;&#x4e5f;&#x5141;&#x8bb8;&#x8bbf;&#x95ee;&#x5916;&#x90e8;&#x4f5c;&#x7528;&#x57df;&#x53d8;&#x91cf;&#x3002;","children":[],"payload":{"tag":"li","lines":"337,338"}},{"content":"<strong>this &#x5173;&#x952e;&#x5b57;</strong>&#xff1a;&#x6307;&#x51fd;&#x6570;&#x6267;&#x884c;&#x7684;&#x4e0a;&#x4e0b;&#x6587;&#xff0c;&#x5176;&#x503c;&#x7531;&#x51fd;&#x6570;&#x7684;&#x8c03;&#x7528;&#x65b9;&#x5f0f;&#x51b3;&#x5b9a;&#x3002;","children":[],"payload":{"tag":"li","lines":"338,339"}},{"content":"<strong>&#x539f;&#x578b;&#x94fe;</strong>&#xff1a;JavaScript &#x7684;&#x7ee7;&#x627f;&#x673a;&#x5236;&#xff0c;&#x5176;&#x4e2d;&#x5bf9;&#x8c61;&#x4ece;&#x5176;&#x539f;&#x578b;&#x5bf9;&#x8c61;&#x7ee7;&#x627f;&#x5c5e;&#x6027;&#x548c;&#x65b9;&#x6cd5;&#x3002;","children":[],"payload":{"tag":"li","lines":"339,341"}}],"payload":{"tag":"h4","lines":"326,327"}},{"content":"<strong>&#x5f02;&#x6b65; JavaScript&#xff1a;Promises&#x3001;async/await&#x3001;&#x4e8b;&#x4ef6;&#x5faa;&#x73af;&#xff08;&#x5b8f;&#x4efb;&#x52a1;/&#x5fae;&#x4efb;&#x52a1;&#xff09;</strong>","children":[{"content":"<strong>Promises</strong>&#xff1a;&#x8868;&#x793a;&#x5f02;&#x6b65;&#x64cd;&#x4f5c;&#x6700;&#x7ec8;&#x5b8c;&#x6210;&#x6216;&#x5931;&#x8d25;&#x7684;&#x5bf9;&#x8c61;&#xff0c;&#x7b80;&#x5316;&#x4e86;&#x5f02;&#x6b65;&#x4ee3;&#x7801;&#x5e76;&#x907f;&#x514d;&#x4e86;&#x201c;&#x56de;&#x8c03;&#x5730;&#x72f1;&#x201d;&#x3002;","children":[],"payload":{"tag":"li","lines":"345,346"}},{"content":"<strong>async/await</strong>&#xff1a;&#x57fa;&#x4e8e; Promises &#x7684;&#x8bed;&#x6cd5;&#x7cd6;&#xff0c;&#x5141;&#x8bb8;&#x4ee5;&#x66f4;&#x540c;&#x6b65;&#x3001;&#x53ef;&#x8bfb;&#x7684;&#x65b9;&#x5f0f;&#x7f16;&#x5199;&#x5f02;&#x6b65;&#x4ee3;&#x7801;&#x3002;","children":[],"payload":{"tag":"li","lines":"346,347"}},{"content":"<strong>&#x4e8b;&#x4ef6;&#x5faa;&#x73af;</strong>&#xff1a;JavaScript &#x7684;&#x5355;&#x7ebf;&#x7a0b;&#x5e76;&#x53d1;&#x6a21;&#x578b;&#xff0c;&#x4f7f;&#x7528;&#x4f5c;&#x4e1a;&#x961f;&#x5217;&#x5904;&#x7406;&#x5f02;&#x6b65;&#x64cd;&#x4f5c;&#x3002;","children":[],"payload":{"tag":"li","lines":"347,348"}},{"content":"<strong>&#x5b8f;&#x4efb;&#x52a1;/&#x5fae;&#x4efb;&#x52a1;</strong>&#xff1a;&#x4e8b;&#x4ef6;&#x5faa;&#x73af;&#x4e2d;&#x7528;&#x4e8e;&#x8c03;&#x5ea6;&#x5f02;&#x6b65;&#x64cd;&#x4f5c;&#x7684;&#x4e0d;&#x540c;&#x961f;&#x5217;&#xff0c;&#x5176;&#x4e2d;&#x5fae;&#x4efb;&#x52a1;&#x5177;&#x6709;&#x66f4;&#x9ad8;&#x7684;&#x4f18;&#x5148;&#x7ea7;&#x3002;","children":[],"payload":{"tag":"li","lines":"348,350"}}],"payload":{"tag":"h4","lines":"343,344"}},{"content":"<strong>DOM &#x64cd;&#x4f5c;&#xff1a;&#x4e0e;&#x7f51;&#x9875;&#x4ea4;&#x4e92;</strong>","children":[],"payload":{"tag":"h4","lines":"352,353"}},{"content":"<strong>&#x6a21;&#x5757;&#x7cfb;&#x7edf;&#xff1a;import/export</strong>","children":[],"payload":{"tag":"h4","lines":"356,357"}}],"payload":{"tag":"h3","lines":"324,325"}},{"content":"<strong>TypeScript&#xff1a;&#x4e3a; JavaScript &#x6ce8;&#x5165;&#x7c7b;&#x578b;&#x5b89;&#x5168;&#x4e0e;&#x5de5;&#x7a0b;&#x5316;&#x80fd;&#x529b;</strong>","children":[{"content":"<strong>&#x6838;&#x5fc3;&#x4ef7;&#x503c;&#x4e0e;&#x5de5;&#x7a0b;&#x4f18;&#x52bf;</strong>","children":[{"content":"1. \n<p data-lines=\"374,376\"><strong>&#x4ee3;&#x7801;&#x8d28;&#x91cf;&#x4e0e;&#x53ef;&#x9760;&#x6027;&#x7684;&#x8dc3;&#x5347; (Enhanced Quality &amp; Reliability)</strong><br>\n&#x9759;&#x6001;&#x7c7b;&#x578b;&#x7cfb;&#x7edf;&#x5f3a;&#x5236;&#x5f00;&#x53d1;&#x8005;&#x4e3a;&#x53d8;&#x91cf;&#x3001;&#x51fd;&#x6570;&#x548c;&#x6570;&#x636e;&#x7ed3;&#x6784;&#x5b9a;&#x4e49;&#x6e05;&#x6670;&#x7684;&#x201c;&#x5951;&#x7ea6;&#x201d;&#x3002;&#x8fd9;&#x79cd;&#x5951;&#x7ea6;&#x786e;&#x4fdd;&#x4e86;&#x6570;&#x636e;&#x5728;&#x5e94;&#x7528;&#x4e2d;&#x7684;&#x6d41;&#x52a8;&#x662f;&#x53ef;&#x9884;&#x6d4b;&#x548c;&#x5b89;&#x5168;&#x7684;&#x3002;&#x5b83;&#x4ece;&#x6839;&#x672c;&#x4e0a;&#x6d88;&#x9664;&#x4e86;&#x52a8;&#x6001;&#x8bed;&#x8a00;&#x4e2d;&#x4e00;&#x6574;&#x7c7b;&#x7684;&#x5e38;&#x89c1;&#x9519;&#x8bef;&#xff0c;&#x4f7f;&#x5f97;&#x4ee3;&#x7801;&#x5e93;&#x66f4;&#x52a0;&#x5065;&#x58ee;&#xff0c;&#x5c24;&#x5176;&#x662f;&#x5728;&#x590d;&#x6742;&#x7684;&#x4e1a;&#x52a1;&#x903b;&#x8f91;&#x548c;&#x9891;&#x7e41;&#x7684;&#x8fed;&#x4ee3;&#x4e2d;&#xff0c;&#x5176;&#x4ef7;&#x503c;&#x6108;&#x53d1;&#x51f8;&#x663e;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"374,377","listIndex":1}},{"content":"2. \n<p data-lines=\"377,379\"><strong>&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;&#x7684;&#x9769;&#x547d; (Superior Developer Experience)</strong><br>\n&#x5f53;&#x4ee3;&#x7801;&#x5e93;&#x6709;&#x4e86;&#x7c7b;&#x578b;&#x4fe1;&#x606f;&#x540e;&#xff0c;&#x5f00;&#x53d1;&#x5de5;&#x5177;&#xff08;&#x5982; <a href=\"https://code.visualstudio.com/\">VS Code</a>&#xff09;&#x7684;&#x80fd;&#x529b;&#x88ab;&#x6781;&#x5927;&#x5730;&#x91ca;&#x653e;&#x3002;&#x5f00;&#x53d1;&#x8005;&#x53ef;&#x4ee5;&#x83b7;&#x5f97;&#x65e0;&#x4e0e;&#x4f26;&#x6bd4;&#x7684;<strong>&#x667a;&#x80fd;&#x4ee3;&#x7801;&#x8865;&#x5168;&#x3001;&#x7cbe;&#x51c6;&#x7684; API &#x63d0;&#x793a;&#x548c;&#x5b89;&#x5168;&#x7684;&#x81ea;&#x52a8;&#x91cd;&#x6784;</strong>&#x3002;&#x5728;&#x6210;&#x5343;&#x4e0a;&#x4e07;&#x884c;&#x4ee3;&#x7801;&#x7684;&#x5e9e;&#x5927;&#x9879;&#x76ee;&#x4e2d;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x65e0;&#x9700;&#x8bb0;&#x5fc6;&#x7e41;&#x6742;&#x7684; API &#x548c;&#x6570;&#x636e;&#x7ed3;&#x6784;&#xff0c;IDE &#x4f1a;&#x6210;&#x4e3a;&#x4e00;&#x4e2a;&#x667a;&#x80fd;&#x7684;&#x3001;&#x6c38;&#x4e0d;&#x51fa;&#x9519;&#x7684;&#x5411;&#x5bfc;&#x3002;&#x8fd9;&#x79cd;&#x5f00;&#x53d1;&#x4f53;&#x9a8c;&#x7684;&#x63d0;&#x5347;&#xff0c;&#x76f4;&#x63a5;&#x8f6c;&#x5316;&#x4e3a;&#x751f;&#x4ea7;&#x529b;&#x7684;&#x5927;&#x5e45;&#x63d0;&#x9ad8;&#x548c;&#x5f00;&#x53d1;&#x632b;&#x8d25;&#x611f;&#x7684;&#x964d;&#x4f4e;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"377,380","listIndex":2}},{"content":"3. \n<p data-lines=\"380,382\"><strong>&#x4ee3;&#x7801;&#x5373;&#x6587;&#x6863;&#x4e0e;&#x77e5;&#x8bc6;&#x4f20;&#x627f; (Self-Documenting Code)</strong><br>\n&#x6e05;&#x6670;&#x7684;&#x7c7b;&#x578b;&#x5b9a;&#x4e49;&#x672c;&#x8eab;&#x5c31;&#x662f;&#x6700;&#x7cbe;&#x51c6;&#x3001;&#x6700;&#x4e0d;&#x4f1a;&#x8fc7;&#x65f6;&#x7684;&#x6587;&#x6863;&#x3002;&#x6bcf;&#x4e2a;&#x7ec4;&#x4ef6;&#x7684; props &#x7c7b;&#x578b;&#x3001;&#x6bcf;&#x4e2a;&#x51fd;&#x6570;&#x7684;&#x53c2;&#x6570;&#x4e0e;&#x8fd4;&#x56de;&#x503c;&#x7c7b;&#x578b;&#xff0c;&#x90fd;&#x6e05;&#x6670;&#x5730;&#x63ed;&#x793a;&#x4e86;&#x5b83;&#x7684;&#x7528;&#x9014;&#x548c;&#x4f7f;&#x7528;&#x65b9;&#x5f0f;&#x3002;&#x8fd9;&#x6781;&#x5927;&#x5730;&#x964d;&#x4f4e;&#x4e86;&#x65b0;&#x6210;&#x5458;&#x7406;&#x89e3;&#x4ee3;&#x7801;&#x5e93;&#x7684;&#x95e8;&#x69db;&#xff0c;&#x4e5f;&#x4f7f;&#x5f97;&#x56e2;&#x961f;&#x534f;&#x4f5c;&#x4e2d;&#x7684;&#x6c9f;&#x901a;&#x6210;&#x672c;&#x663e;&#x8457;&#x4e0b;&#x964d;&#xff0c;&#x56e0;&#x4e3a;&#x201c;&#x4ee3;&#x7801;&#x7684;&#x610f;&#x56fe;&#x201d;&#x5df2;&#x7ecf;&#x88ab;&#x7c7b;&#x578b;&#x6e05;&#x6670;&#x5730;&#x8868;&#x8fbe;&#x51fa;&#x6765;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"380,383","listIndex":3}},{"content":"4. \n<p data-lines=\"383,385\"><strong>&#x8d4b;&#x80fd;&#x5927;&#x578b;&#x9879;&#x76ee;&#x4e0e;&#x56e2;&#x961f;&#x534f;&#x4f5c; (Enabling Large-Scale Collaboration)</strong><br>\n&#x5728;&#x5927;&#x578b;&#x9879;&#x76ee;&#x4e2d;&#xff0c;&#x4e0d;&#x540c;&#x7684;&#x6a21;&#x5757;&#x548c;&#x529f;&#x80fd;&#x5f80;&#x5f80;&#x7531;&#x4e0d;&#x540c;&#x7684;&#x5f00;&#x53d1;&#x8005;&#x6216;&#x56e2;&#x961f;&#x8d1f;&#x8d23;&#x3002;TypeScript &#x63d0;&#x4f9b;&#x7684;&#x7c7b;&#x578b;&#x63a5;&#x53e3;&#xff08;Interfaces&#xff09;&#x5c31;&#x50cf;&#x56e2;&#x961f;&#x4e4b;&#x95f4;&#x7b7e;&#x8ba2;&#x7684;&#x201c;&#x6280;&#x672f;&#x5408;&#x540c;&#x201d;&#xff0c;&#x786e;&#x4fdd;&#x4e86;&#x4e0d;&#x540c;&#x90e8;&#x5206;&#x5728;&#x96c6;&#x6210;&#x65f6;&#x80fd;&#x591f;&#x5b8c;&#x7f8e;&#x8854;&#x63a5;&#x3002;&#x5b83;&#x63d0;&#x4f9b;&#x4e86;&#x4e00;&#x4e2a;&#x5171;&#x540c;&#x7684;&#x8bed;&#x8a00;&#x6765;&#x8ba8;&#x8bba;&#x6570;&#x636e;&#x7ed3;&#x6784;&#x548c;&#x7cfb;&#x7edf;&#x884c;&#x4e3a;&#xff0c;&#x907f;&#x514d;&#x4e86;&#x56e0;&#x8bef;&#x89e3;&#x6216;&#x5047;&#x8bbe;&#x800c;&#x5bfc;&#x81f4;&#x7684;&#x96c6;&#x6210;&#x95ee;&#x9898;&#xff0c;&#x662f;&#x4fdd;&#x969c;&#x5927;&#x578b;&#x5e94;&#x7528;&#x67b6;&#x6784;&#x7a33;&#x5b9a;&#x6027;&#x548c;&#x53ef;&#x6269;&#x5c55;&#x6027;&#x7684;&#x6838;&#x5fc3;&#x673a;&#x5236;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"383,386","listIndex":4}}],"payload":{"tag":"h4","lines":"370,371"}},{"content":"<strong>&#x5728;&#x524d;&#x7aef;&#x751f;&#x6001;&#x4e2d;&#x7684;&#x89d2;&#x8272;</strong>","children":[{"content":"<strong><code>tsconfig.json</code></strong>&#xff1a;&#x8fd9;&#x662f;&#x6bcf;&#x4e2a; TypeScript &#x9879;&#x76ee;&#x7684;&#x201c;&#x63a7;&#x5236;&#x4e2d;&#x5fc3;&#x201d;&#xff0c;&#x4e00;&#x4e2a;&#x914d;&#x7f6e;&#x6587;&#x4ef6;&#xff0c;&#x7528;&#x4e8e;&#x7cbe;&#x786e;&#x5730;&#x6307;&#x5bfc;&#x7f16;&#x8bd1;&#x5668;&#x5982;&#x4f55;&#x68c0;&#x67e5;&#x548c;&#x8f6c;&#x8bd1;&#x4ee3;&#x7801;&#x3002;&#x901a;&#x8fc7;&#x5b83;&#xff0c;&#x56e2;&#x961f;&#x53ef;&#x4ee5;&#x7edf;&#x4e00;&#x9879;&#x76ee;&#x7684;&#x4e25;&#x683c;&#x6027;&#x6807;&#x51c6;&#x3001;&#x6a21;&#x5757;&#x7cfb;&#x7edf;&#x548c;&#x76ee;&#x6807; JavaScript &#x7248;&#x672c;&#x3002;","children":[],"payload":{"tag":"li","lines":"390,391"}},{"content":"<strong>&#x4e0e;&#x6846;&#x67b6;&#x7684;&#x65e0;&#x7f1d;&#x96c6;&#x6210;</strong>&#xff1a;&#x6240;&#x6709;&#x73b0;&#x4ee3;&#x524d;&#x7aef;&#x6846;&#x67b6;&#xff08;&#x5982; <a href=\"https://react.dev/\">React</a>, <a href=\"https://vuejs.org/\">Vue</a>, <a href=\"https://angular.dev/\">Angular</a>, <a href=\"https://svelte.dev/\">Svelte</a>&#xff09;&#x90fd;&#x5df2;&#x5c06; TypeScript &#x89c6;&#x4e3a;&#x201c;&#x4e00;&#x7b49;&#x516c;&#x6c11;&#x201d;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x5f00;&#x7bb1;&#x5373;&#x7528;&#x7684;&#x5b98;&#x65b9;&#x652f;&#x6301;&#x3002;&#x4f7f;&#x7528; TypeScript &#x5f00;&#x53d1;&#x5df2;&#x6210;&#x4e3a;&#x793e;&#x533a;&#x7684;&#x6700;&#x4f73;&#x5b9e;&#x8df5;&#x548c;&#x9ed8;&#x8ba4;&#x9009;&#x62e9;&#x3002;","children":[],"payload":{"tag":"li","lines":"391,392"}},{"content":"<strong>&#x8fde;&#x63a5;&#x5e9e;&#x5927;&#x7684; JavaScript &#x751f;&#x6001;</strong>&#xff1a;&#x4e3a;&#x4e86;&#x8ba9; TypeScript &#x80fd;&#x591f;&#x7406;&#x89e3;&#x90a3;&#x4e9b;&#x7528;&#x7eaf; JavaScript &#x7f16;&#x5199;&#x7684;&#x5e93;&#xff0c;&#x793e;&#x533a;&#x521b;&#x5efa;&#x4e86; <a href=\"https://definitelytyped.org/\"><strong>DefinitelyTyped</strong></a> &#x8fd9;&#x4e2a;&#x4f1f;&#x5927;&#x7684;&#x9879;&#x76ee;&#x3002;&#x5b83;&#x4e3a;&#x6570;&#x4ee5;&#x4e07;&#x8ba1;&#x7684; JavaScript &#x5e93;&#x63d0;&#x4f9b;&#x4e86;&#x9ad8;&#x8d28;&#x91cf;&#x7684;&#x7c7b;&#x578b;&#x58f0;&#x660e;&#x6587;&#x4ef6;&#xff08;<code>.d.ts</code>&#xff09;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x53ea;&#x9700;&#x901a;&#x8fc7;&#x7b80;&#x5355;&#x7684;&#x5b89;&#x88c5;&#xff0c;&#x5c31;&#x80fd;&#x5728; TypeScript &#x9879;&#x76ee;&#x4e2d;&#x5b89;&#x5168;&#x3001;&#x667a;&#x80fd;&#x5730;&#x4f7f;&#x7528;&#x51e0;&#x4e4e;&#x6240;&#x6709;&#x7684;&#x5b58;&#x91cf; JavaScript &#x8f6e;&#x5b50;&#x3002;","children":[],"payload":{"tag":"li","lines":"392,394"}}],"payload":{"tag":"h4","lines":"386,387"}},{"content":"&#x5982;&#x4f55;&#x5f00;&#x59cb;&#x5b66;&#x4e60; TypeScript","children":[{"content":"<strong>&#x6cdb;&#x578b;&#xff08;Generics&#xff09;</strong>&#xff1a;&#x8ba9;&#x51fd;&#x6570;&#x3001;&#x7c7b;&#x3001;&#x63a5;&#x53e3;&#x5177;&#x5907;&#x201c;&#x53c2;&#x6570;&#x5316;&#x7c7b;&#x578b;&#x201d;&#x7684;&#x80fd;&#x529b;&#xff0c;&#x5b9e;&#x73b0;&#x771f;&#x6b63;&#x7684;&#x53ef;&#x590d;&#x7528;&#x3002;&#x4f8b;&#x5982; <code>Promise&lt;T&gt;</code>&#x3001;<code>Array&lt;T&gt;</code> &#x7684;&#x5e95;&#x5c42;&#x539f;&#x7406;&#xff0c;&#x4ee5;&#x53ca;&#x81ea;&#x5b9a;&#x4e49;&#x5de5;&#x5177;&#x51fd;&#x6570;&#x5982; <code>identity&lt;T&gt;(arg: T): T</code>&#x3002;","children":[],"payload":{"tag":"li","lines":"398,399"}},{"content":"<strong>&#x8054;&#x5408;&#x7c7b;&#x578b;&#xff08;Unions&#xff09;&#x4e0e;&#x4ea4;&#x53c9;&#x7c7b;&#x578b;&#xff08;Intersections&#xff09;</strong>&#xff1a;&#x8054;&#x5408;&#x8868;&#x8fbe;&#x201c;&#x6216;&#x201d;&#xff08;&#x5982; <code>string | number</code>&#xff09;&#xff0c;&#x4ea4;&#x53c9;&#x8868;&#x8fbe;&#x201c;&#x4e14;&#x201d;&#xff08;&#x5982; <code>Partial&lt;T&gt; &amp; Record&lt;K, V&gt;</code>&#xff09;&#x3002;&#x7ed3;&#x5408;&#x8fa8;&#x8bc6;&#x8054;&#x5408;&#xff08;Discriminated Unions&#xff09;&#x5b9e;&#x73b0;&#x7cbe;&#x51c6;&#x7684;&#x7c7b;&#x578b;&#x5206;&#x652f;&#x3002;","children":[],"payload":{"tag":"li","lines":"399,400"}},{"content":"<strong>&#x7c7b;&#x578b;&#x6536;&#x7a84;&#xff08;Type Narrowing&#xff09;</strong>&#xff1a;&#x901a;&#x8fc7; <code>typeof</code>&#x3001;<code>in</code>&#x3001;<code>instanceof</code>&#x3001;&#x5b57;&#x9762;&#x91cf;&#x8fa8;&#x8bc6;&#x6216;&#x81ea;&#x5b9a;&#x4e49;&#x7c7b;&#x578b;&#x5b88;&#x536b;&#xff0c;&#x5c06;&#x5bbd;&#x6cdb;&#x7684;&#x8054;&#x5408;&#x7c7b;&#x578b;&#x9010;&#x6b65;&#x6536;&#x7a84;&#x4e3a;&#x7cbe;&#x786e;&#x7c7b;&#x578b;&#xff0c;&#x907f;&#x514d; any &#x7684;&#x6ee5;&#x7528;&#x3002;","children":[],"payload":{"tag":"li","lines":"400,401"}},{"content":"<strong>&#x58f0;&#x660e;&#x6587;&#x4ef6;&#xff08;Declaration Files, .d.ts&#xff09;</strong>&#xff1a;&#x7406;&#x89e3;&#x5982;&#x4f55;&#x4e3a;&#x7eaf; JS &#x5e93;&#x7f16;&#x5199;&#x7c7b;&#x578b;&#x58f0;&#x660e;&#xff0c;&#x6216;&#x4f7f;&#x7528; <code>@types/*</code> &#x5305;&#x3002;&#x638c;&#x63e1;&#x7c7b;&#x578b;&#x4e0e;&#x8fd0;&#x884c;&#x65f6;&#x7684;&#x8fb9;&#x754c;&#x2014;&#x2014;&#x7c7b;&#x578b;&#x53ea;&#x5b58;&#x5728;&#x4e8e;&#x7f16;&#x8bd1;&#x65f6;&#xff0c;&#x8fd0;&#x884c;&#x65f6;&#x9700;&#x7528;&#x5982; zod&#x3001;io-ts &#x7b49;&#x5e93;&#x6865;&#x63a5;&#x3002;","children":[],"payload":{"tag":"li","lines":"401,402"}},{"content":"<strong>&#x7c7b;&#x578b;&#x4e0e;&#x8fd0;&#x884c;&#x65f6;&#x8fb9;&#x754c;</strong>&#xff1a;&#x660e;&#x786e;&#x7c7b;&#x578b;&#x64e6;&#x9664;&#x7684;&#x73b0;&#x5b9e;&#xff0c;&#x5b66;&#x4f1a;&#x5728;&#x9700;&#x8981;&#x65f6;&#x5f15;&#x5165;&#x8fd0;&#x884c;&#x65f6;&#x6821;&#x9a8c;&#xff08;&#x5982; zod&#xff09;&#x6765;&#x8865;&#x8db3;&#x7c7b;&#x578b;&#x7cfb;&#x7edf;&#x7684;&#x76f2;&#x533a;&#x3002;","children":[],"payload":{"tag":"li","lines":"402,404"}}],"payload":{"tag":"h4","lines":"394,395"}},{"content":"<strong>TypeScript &#x7684;&#x5ef6;&#x4f38;&#xff1a;&#x4e0e; JSDoc &#x7684;&#x534f;&#x540c;&#x827a;&#x672f;</strong>","children":[{"content":"<strong>1. &#x6e10;&#x8fdb;&#x5f0f;&#x8fc1;&#x79fb;&#x7684;&#x6865;&#x6881;&#xff1a;&#x4e3a;&#x5386;&#x53f2;&#x4ee3;&#x7801;&#x6ce8;&#x5165;&#x73b0;&#x4ee3;&#x6d3b;&#x529b;</strong>","children":[],"payload":{"tag":"h5","lines":"414,415"}},{"content":"<strong>2. &#x8f7b;&#x91cf;&#x7ea7;&#x7c7b;&#x578b;&#x68c0;&#x67e5;&#x7684;&#x5229;&#x5668;&#xff1a;&#x96f6;&#x6210;&#x672c;&#x4eab;&#x53d7;&#x667a;&#x80fd;&#x63d0;&#x793a;</strong>","children":[],"payload":{"tag":"h5","lines":"420,421"}},{"content":"<strong>3. &#x8d85;&#x8d8a;&#x7c7b;&#x578b;&#xff1a;&#x7f16;&#x5199;&#x201c;&#x4f1a;&#x8bf4;&#x8bdd;&#x201d;&#x7684;&#x6587;&#x6863;</strong>","children":[],"payload":{"tag":"h5","lines":"426,427"}}],"payload":{"tag":"h4","lines":"404,405"}},{"content":"<strong>&#x7ed3;&#x8bba;&#xff1a;&#x4e00;&#x79cd;&#x601d;&#x7ef4;&#xff0c;&#x4e24;&#x79cd;&#x5de5;&#x5177;</strong>","children":[{"content":"<strong>TypeScript</strong> &#x662f;&#x6784;&#x5efa;&#x65b0;&#x9879;&#x76ee;&#x7684;**&#x201c;&#x4e3b;&#x529b;&#x5f15;&#x64ce;&#x201d;**&#xff0c;&#x63d0;&#x4f9b;&#x6700;&#x5168;&#x9762;&#x3001;&#x6700;&#x5f3a;&#x5927;&#x7684;&#x7c7b;&#x578b;&#x7cfb;&#x7edf;&#x548c;&#x5de5;&#x7a0b;&#x80fd;&#x529b;&#x3002;","children":[],"payload":{"tag":"li","lines":"436,437"}},{"content":"<strong>JSDoc</strong> &#x5219;&#x662f;&#x529f;&#x80fd;&#x5f3a;&#x5927;&#x7684;**&#x201c;&#x901a;&#x7528;&#x9002;&#x914d;&#x5668;&#x201d;**&#xff0c;&#x5b83;&#x5c06; TypeScript &#x7684;&#x7c7b;&#x578b;&#x5b89;&#x5168;&#x7406;&#x5ff5;&#x5ef6;&#x4f38;&#x5230;&#x6bcf;&#x4e2a; JavaScript &#x5b58;&#x5728;&#x7684;&#x89d2;&#x843d;&#xff0c;&#x65e0;&#x8bba;&#x662f;&#x5386;&#x53f2;&#x4ee3;&#x7801;&#x3001;&#x8f7b;&#x91cf;&#x811a;&#x672c;&#x8fd8;&#x662f;&#x6587;&#x6863;&#x7f16;&#x5199;&#x3002;","children":[],"payload":{"tag":"li","lines":"437,439"}}],"payload":{"tag":"h4","lines":"432,433"}}],"payload":{"tag":"h3","lines":"362,363"}}],"payload":{"tag":"h2","lines":"69,70"}},{"content":"<strong>III. &#x57fa;&#x672c;&#x5f00;&#x53d1;&#x73af;&#x5883;&#x548c;&#x5de5;&#x5177;</strong>","children":[{"content":"<strong>&#x7248;&#x672c;&#x63a7;&#x5236;&#x7cfb;&#x7edf;&#xff1a;Git &#x548c; GitHub &#x534f;&#x4f5c;&#x5f00;&#x53d1;</strong>","children":[{"content":"<strong>&#x4ed3;&#x5e93;</strong>&#xff1a;&#x6587;&#x4ef6;&#x3001;&#x6587;&#x4ef6;&#x5939;&#x53ca;&#x5176;&#x4fee;&#x8ba2;&#x5386;&#x53f2;&#x7684;&#x5b8c;&#x6574;&#x96c6;&#x5408;&#x3002;","children":[],"payload":{"tag":"li","lines":"451,452"}},{"content":"<strong>&#x63d0;&#x4ea4;</strong>&#xff1a;&#x9879;&#x76ee;&#x5386;&#x53f2;&#x4e2d;&#x7684;&#x65f6;&#x95f4;&#x5feb;&#x7167;&#x3002;","children":[],"payload":{"tag":"li","lines":"452,453"}},{"content":"<strong>&#x5206;&#x652f;</strong>&#xff1a;&#x72ec;&#x7acb;&#x7684;&#x5f00;&#x53d1;&#x7ebf;&#xff0c;&#x5b9e;&#x73b0;&#x9694;&#x79bb;&#x5f00;&#x53d1;&#x6d4b;&#x8bd5;&#x548c;&#x5e76;&#x884c;&#x5de5;&#x4f5c;&#x3002;","children":[],"payload":{"tag":"li","lines":"453,455"}}],"payload":{"tag":"h3","lines":"445,446"}},{"content":"<strong>Git &#x5de5;&#x4f5c;&#x6d41;&#x4e0e;&#x56e2;&#x961f;&#x534f;&#x4f5c;</strong>","children":[{"content":"<strong>&#x4e3b;&#x6d41; Git &#x5de5;&#x4f5c;&#x6d41;&#x6a21;&#x5f0f;</strong>","children":[],"payload":{"tag":"h4","lines":"467,468"}},{"content":"<strong>&#x4ee3;&#x7801;&#x5ba1;&#x67e5; (Code Review) &#x7684;&#x91cd;&#x8981;&#x6027;&#x548c;&#x6d41;&#x7a0b;</strong>","children":[],"payload":{"tag":"h4","lines":"479,480"}},{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x4e3b;&#x6d41; Git &#x5de5;&#x4f5c;&#x6d41;&#x5bf9;&#x6bd4; (GitFlow vs. GitHub Flow)</strong>","children":[{"content":"<table data-lines=\"487,499\">\n<thead data-lines=\"487,488\">\n<tr data-lines=\"487,488\">\n<th style=\"text-align:left\">&#x7279;&#x6027;/&#x5de5;&#x4f5c;&#x6d41;</th>\n<th style=\"text-align:left\"><a href=\"https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow\">GitFlow</a></th>\n<th style=\"text-align:left\"><a href=\"https://docs.github.com/en/get-started/quickstart/github-flow\">GitHub Flow</a></th>\n</tr>\n</thead>\n<tbody data-lines=\"489,499\">\n<tr data-lines=\"489,490\">\n<td style=\"text-align:left\"><strong>&#x5206;&#x652f;&#x6a21;&#x578b;</strong></td>\n<td style=\"text-align:left\">&#x591a;&#x5206;&#x652f;&#xff08;master, develop, feature, release, hotfix&#xff09;</td>\n<td style=\"text-align:left\">&#x6781;&#x7b80;&#xff08;main + &#x77ed;&#x751f;&#x547d;&#x5468;&#x671f;&#x7279;&#x6027;&#x5206;&#x652f;&#xff09;</td>\n</tr>\n<tr data-lines=\"490,491\">\n<td style=\"text-align:left\"><strong>&#x53d1;&#x5e03;&#x6a21;&#x5f0f;</strong></td>\n<td style=\"text-align:left\">&#x7ed3;&#x6784;&#x5316;&#xff0c;&#x6709;&#x4e13;&#x95e8;&#x7684; release &#x5206;&#x652f;&#x548c; QA &#x9636;&#x6bb5;</td>\n<td style=\"text-align:left\">&#x6301;&#x7eed;&#x96c6;&#x6210;/&#x90e8;&#x7f72;&#xff0c;&#x5408;&#x5e76;&#x540e;&#x5373;&#x53ef;&#x90e8;&#x7f72;</td>\n</tr>\n<tr data-lines=\"491,492\">\n<td style=\"text-align:left\"><strong>&#x590d;&#x6742;&#x6027;</strong></td>\n<td style=\"text-align:left\">&#x9ad8;&#xff0c;&#x5206;&#x652f;&#x548c;&#x5408;&#x5e76;&#x64cd;&#x4f5c;&#x591a;&#xff0c;&#x9700;&#x8981;&#x4e25;&#x683c;&#x89c4;&#x8303;</td>\n<td style=\"text-align:left\">&#x4f4e;&#xff0c;&#x7b80;&#x5355;&#x5206;&#x652f;&#x548c;&#x5408;&#x5e76;&#xff0c;&#x6613;&#x4e8e;&#x7406;&#x89e3;&#x548c;&#x5b9e;&#x65bd;</td>\n</tr>\n<tr data-lines=\"492,493\">\n<td style=\"text-align:left\"><strong>&#x56e2;&#x961f;&#x89c4;&#x6a21;</strong></td>\n<td style=\"text-align:left\">&#x9002;&#x5408;&#x5927;&#x578b;&#x56e2;&#x961f;&#xff0c;&#x9700;&#x8981;&#x4e25;&#x683c;&#x63a7;&#x5236;&#x548c;&#x7248;&#x672c;&#x5316;&#x53d1;&#x5e03;</td>\n<td style=\"text-align:left\">&#x9002;&#x5408;&#x5c0f;&#x578b;&#x654f;&#x6377;&#x56e2;&#x961f;&#xff0c;&#x8ffd;&#x6c42;&#x5feb;&#x901f;&#x8fed;&#x4ee3;&#x548c;&#x90e8;&#x7f72;</td>\n</tr>\n<tr data-lines=\"493,494\">\n<td style=\"text-align:left\"><strong>CI/CD &#x517c;&#x5bb9;&#x6027;</strong></td>\n<td style=\"text-align:left\">&#x8f83;&#x5dee;&#xff0c;&#x591a;&#x6b65;&#x9aa4;&#x6d41;&#x7a0b;&#x53ef;&#x80fd;&#x963b;&#x788d;&#x6301;&#x7eed;&#x4ea4;&#x4ed8;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;&#xff0c;&#x4e0e;&#x81ea;&#x52a8;&#x5316;&#x6d4b;&#x8bd5;&#x548c;&#x90e8;&#x7f72;&#x65e0;&#x7f1d;&#x96c6;&#x6210;</td>\n</tr>\n<tr data-lines=\"494,495\">\n<td style=\"text-align:left\"><strong>&#x5408;&#x5e76;&#x9891;&#x7387;</strong></td>\n<td style=\"text-align:left\">&#x9891;&#x7e41;&#xff08;&#x8de8;&#x591a;&#x4e2a;&#x5206;&#x652f;&#xff09;</td>\n<td style=\"text-align:left\">&#x4e3b;&#x8981;&#x5408;&#x5e76;&#x5230; main&#xff0c;&#x51cf;&#x5c11;&#x5408;&#x5e76;&#x51b2;&#x7a81;</td>\n</tr>\n<tr data-lines=\"495,496\">\n<td style=\"text-align:left\"><strong>&#x6d4b;&#x8bd5;&#x65b9;&#x6cd5;</strong></td>\n<td style=\"text-align:left\">&#x4e3b;&#x8981;&#x5728; release &#x5206;&#x652f;&#x8fdb;&#x884c;&#x4e25;&#x683c;&#x6d4b;&#x8bd5;</td>\n<td style=\"text-align:left\">&#x81ea;&#x52a8;&#x5316; CI &#x6d4b;&#x8bd5;&#x5728;&#x7279;&#x6027;&#x5206;&#x652f;&#x548c; PR &#x4e0a;&#x81f3;&#x5173;&#x91cd;&#x8981;</td>\n</tr>\n<tr data-lines=\"496,497\">\n<td style=\"text-align:left\"><strong>&#x70ed;&#x4fee;&#x590d;</strong></td>\n<td style=\"text-align:left\">&#x4e13;&#x95e8;&#x7684; hotfix &#x5206;&#x652f;&#xff0c;&#x4e0d;&#x5f71;&#x54cd;&#x4e3b;&#x5f00;&#x53d1;</td>\n<td style=\"text-align:left\">&#x901a;&#x8fc7;&#x7279;&#x6027;&#x5206;&#x652f;&#x76f4;&#x63a5;&#x4ece; main &#x521b;&#x5efa;&#x548c;&#x5408;&#x5e76;</td>\n</tr>\n<tr data-lines=\"497,498\">\n<td style=\"text-align:left\"><strong>&#x751f;&#x4ea7;&#x7a33;&#x5b9a;&#x6027;&#x98ce;&#x9669;</strong></td>\n<td style=\"text-align:left\">&#x8f83;&#x4f4e;&#xff0c;&#x56e0;&#x6709; release &#x5206;&#x652f;&#x8fdb;&#x884c;&#x9636;&#x6bb5;&#x6027;&#x6d4b;&#x8bd5;</td>\n<td style=\"text-align:left\">&#x8f83;&#x9ad8;&#xff0c;&#x82e5; PR &#x5ba1;&#x67e5;&#x548c;&#x6d4b;&#x8bd5;&#x4e0d;&#x4e25;&#x683c;</td>\n</tr>\n<tr data-lines=\"498,499\">\n<td style=\"text-align:left\"><strong>&#x5de5;&#x5177;&#x652f;&#x6301;</strong></td>\n<td style=\"text-align:left\">&#x8bb8;&#x591a; <a href=\"https://git-scm.com/\">Git</a> &#x5de5;&#x5177;&#x548c; GUI &#x652f;&#x6301;</td>\n<td style=\"text-align:left\">&#x4e0e; <a href=\"https://github.com/\">GitHub</a> PR &#x7cfb;&#x7edf;&#x539f;&#x751f;&#x96c6;&#x6210;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"487,499"}}],"payload":{"tag":"h4","lines":"485,486"}}],"payload":{"tag":"h3","lines":"463,464"}},{"content":"<strong>&#x9ad8;&#x7ea7;&#x5de5;&#x7a0b;&#x5316;&#x5de5;&#x4f5c;&#x6d41;</strong>","children":[{"content":"<strong>Monorepo &#x7ba1;&#x7406;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;Monorepo &#x7ba1;&#x7406;&#x5de5;&#x5177;&#x5bf9;&#x6bd4; (Nx vs. Lerna)</strong>","children":[{"content":"<table data-lines=\"520,531\">\n<thead data-lines=\"520,521\">\n<tr data-lines=\"520,521\">\n<th style=\"text-align:left\">&#x7279;&#x6027;/&#x5de5;&#x5177;</th>\n<th style=\"text-align:left\"><a href=\"https://lerna.js.org/\">Lerna</a> (v6+ &#x96c6;&#x6210; <a href=\"https://nx.dev/\">Nx</a>)</th>\n<th style=\"text-align:left\"><a href=\"https://nx.dev/\">Nx</a></th>\n</tr>\n</thead>\n<tbody data-lines=\"522,531\">\n<tr data-lines=\"522,523\">\n<td style=\"text-align:left\"><strong>&#x6838;&#x5fc3;&#x529f;&#x80fd;</strong></td>\n<td style=\"text-align:left\">&#x591a;&#x5305;&#x53d1;&#x5e03;&#x7ba1;&#x7406;&#x3001;&#x7248;&#x672c;&#x63a7;&#x5236;&#x3001;&#x547d;&#x4ee4;&#x6267;&#x884c;</td>\n<td style=\"text-align:left\">&#x6574;&#x4e2a;&#x5f00;&#x53d1;&#x751f;&#x547d;&#x5468;&#x671f;&#x7ba1;&#x7406;&#x3001;&#x6784;&#x5efa;&#x4f18;&#x5316;&#x3001;&#x4f9d;&#x8d56;&#x5206;&#x6790;&#x3001;&#x4ee3;&#x7801;&#x751f;&#x6210;</td>\n</tr>\n<tr data-lines=\"523,524\">\n<td style=\"text-align:left\"><strong>&#x4efb;&#x52a1;&#x6267;&#x884c;</strong></td>\n<td style=\"text-align:left\">&#x59d4;&#x6258;&#x7ed9; <a href=\"https://nx.dev/\">Nx</a>&#xff0c;&#x83b7;&#x5f97;&#x7f13;&#x5b58;&#x548c;&#x5206;&#x5e03;&#x5f0f;&#x6267;&#x884c;&#x80fd;&#x529b;</td>\n<td style=\"text-align:left\">&#x5185;&#x7f6e;&#x5f3a;&#x5927;&#x4efb;&#x52a1;&#x8fd0;&#x884c;&#x5668;&#xff0c;&#x652f;&#x6301;&#x667a;&#x80fd;&#x7f13;&#x5b58;&#x548c;&#x5206;&#x5e03;&#x5f0f;&#x6267;&#x884c;</td>\n</tr>\n<tr data-lines=\"524,525\">\n<td style=\"text-align:left\"><strong>&#x6027;&#x80fd;&#x4f18;&#x5316;</strong></td>\n<td style=\"text-align:left\">&#x901a;&#x8fc7; <a href=\"https://nx.dev/\">Nx</a> &#x5b9e;&#x73b0;&#x8ba1;&#x7b97;&#x7f13;&#x5b58;&#x3001;&#x5206;&#x5e03;&#x5f0f;&#x4efb;&#x52a1;&#x6267;&#x884c;</td>\n<td style=\"text-align:left\">&#x6781;&#x81f4;&#x7684;&#x6784;&#x5efa;&#x548c;&#x6d4b;&#x8bd5;&#x65f6;&#x95f4;&#x4f18;&#x5316;&#xff0c;&#x667a;&#x80fd;&#x7f13;&#x5b58;&#x3001;affected &#x547d;&#x4ee4;</td>\n</tr>\n<tr data-lines=\"525,526\">\n<td style=\"text-align:left\"><strong>&#x4f9d;&#x8d56;&#x5206;&#x6790;</strong></td>\n<td style=\"text-align:left\">&#x57fa;&#x7840;&#x7684;&#x5305;&#x95f4;&#x4f9d;&#x8d56;&#x7ba1;&#x7406;</td>\n<td style=\"text-align:left\">&#x9ad8;&#x7ea7;&#x9879;&#x76ee;&#x56fe;&#x8c31;&#x5206;&#x6790;&#xff0c;&#x53ef;&#x89c6;&#x5316;&#x4f9d;&#x8d56;&#x5173;&#x7cfb;</td>\n</tr>\n<tr data-lines=\"526,527\">\n<td style=\"text-align:left\"><strong>&#x4ee3;&#x7801;&#x751f;&#x6210;</strong></td>\n<td style=\"text-align:left\">&#x4e0d;&#x76f4;&#x63a5;&#x63d0;&#x4f9b;&#xff0c;&#x4f46;&#x53ef;&#x4e0e;&#x5176;&#x4ed6;&#x5de5;&#x5177;&#x7ed3;&#x5408;</td>\n<td style=\"text-align:left\">&#x5185;&#x7f6e;&#x5f3a;&#x5927;&#x7684;&#x4ee3;&#x7801;&#x751f;&#x6210;&#x5668;</td>\n</tr>\n<tr data-lines=\"527,528\">\n<td style=\"text-align:left\"><strong>&#x6846;&#x67b6;&#x652f;&#x6301;</strong></td>\n<td style=\"text-align:left\">&#x6846;&#x67b6;&#x65e0;&#x5173;&#xff0c;&#x4e3b;&#x8981;&#x7528;&#x4e8e; JS/TS &#x5305;</td>\n<td style=\"text-align:left\">&#x6846;&#x67b6;&#x65e0;&#x5173;&#xff0c;&#x5bf9; <a href=\"https://react.dev/\">React</a>, <a href=\"https://vuejs.org/\">Vue</a>, <a href=\"https://angular.dev/\">Angular</a>, <a href=\"https://nodejs.org/\">Node.js</a> &#x7b49;&#x63d0;&#x4f9b;&#x4e00;&#x6d41;&#x652f;&#x6301;</td>\n</tr>\n<tr data-lines=\"528,529\">\n<td style=\"text-align:left\"><strong>&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</strong></td>\n<td style=\"text-align:left\">&#x76f8;&#x5bf9;&#x8f83;&#x4f4e;&#xff0c;&#x5c24;&#x5176;&#x662f;&#x57fa;&#x7840;&#x53d1;&#x5e03;&#x529f;&#x80fd;</td>\n<td style=\"text-align:left\">&#x8f83;&#x9ad8;&#xff0c;&#x529f;&#x80fd;&#x4e30;&#x5bcc;&#xff0c;&#x9700;&#x7406;&#x89e3;&#x5176;&#x6838;&#x5fc3;&#x6982;&#x5ff5;</td>\n</tr>\n<tr data-lines=\"529,530\">\n<td style=\"text-align:left\"><strong>&#x793e;&#x533a;&#x4e0e;&#x751f;&#x6001;</strong></td>\n<td style=\"text-align:left\">&#x5386;&#x53f2;&#x60a0;&#x4e45;&#xff0c;&#x793e;&#x533a;&#x6d3b;&#x8dc3;&#xff0c;&#x88ab; <a href=\"https://nx.dev/\">Nx</a> &#x63a5;&#x7ba1;&#x540e;&#x7115;&#x53d1;&#x65b0;&#x751f;</td>\n<td style=\"text-align:left\">&#x6d3b;&#x8dc3;&#x793e;&#x533a;&#xff0c;&#x6587;&#x6863;&#x4e30;&#x5bcc;&#xff0c;Nrwl &#x516c;&#x53f8;&#x652f;&#x6301;</td>\n</tr>\n<tr data-lines=\"530,531\">\n<td style=\"text-align:left\"><strong>&#x7406;&#x60f3;&#x573a;&#x666f;</strong></td>\n<td style=\"text-align:left\">&#x4e13;&#x6ce8;&#x4e8e;&#x591a;&#x5305;&#x53d1;&#x5e03;&#x3001;&#x7248;&#x672c;&#x63a7;&#x5236;&#x7684;&#x9879;&#x76ee;</td>\n<td style=\"text-align:left\">&#x5927;&#x578b;&#x590d;&#x6742;&#x9879;&#x76ee;&#xff0c;&#x591a;&#x56e2;&#x961f;&#x534f;&#x4f5c;&#xff0c;&#x8ffd;&#x6c42;&#x6781;&#x81f4;&#x6784;&#x5efa;&#x6027;&#x80fd;&#x548c;&#x4e00;&#x81f4;&#x6027;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"520,531"}}],"payload":{"tag":"h5","lines":"518,519"}}],"payload":{"tag":"h4","lines":"508,509"}},{"content":"<strong>Polyrepo&#xff1a;&#x4f20;&#x7edf;&#x7684;&#x591a;&#x4ee3;&#x7801;&#x5e93;&#x6a21;&#x5f0f;</strong>","children":[{"content":"","children":[{"content":"<strong>&#x6e05;&#x6670;&#x7684;&#x9694;&#x79bb;&#x6027; (Strong Isolation):</strong> &#x6bcf;&#x4e2a;&#x9879;&#x76ee;&#x90fd;&#x662f;&#x5b8c;&#x5168;&#x72ec;&#x7acb;&#x7684;&#xff0c;&#x62e5;&#x6709;&#x81ea;&#x5df1;&#x7684;&#x6784;&#x5efa;&#x3001;&#x6d4b;&#x8bd5;&#x548c;&#x90e8;&#x7f72;&#x6d41;&#x6c34;&#x7ebf;&#x3002;&#x4e00;&#x4e2a;&#x9879;&#x76ee;&#x7684;&#x53d8;&#x66f4;&#x6216;&#x6545;&#x969c;&#x4e0d;&#x4f1a;&#x76f4;&#x63a5;&#x5f71;&#x54cd;&#x5230;&#x5176;&#x4ed6;&#x9879;&#x76ee;&#x3002;","children":[],"payload":{"tag":"li","lines":"544,545"}},{"content":"<strong>&#x56e2;&#x961f;&#x81ea;&#x6cbb;&#x6027; (Team Autonomy):</strong> &#x5404;&#x4e2a;&#x56e2;&#x961f;&#x53ef;&#x4ee5;&#x5b8c;&#x5168;&#x63a7;&#x5236;&#x81ea;&#x5df1;&#x7684;&#x4ee3;&#x7801;&#x5e93;&#xff0c;&#x81ea;&#x7531;&#x9009;&#x62e9;&#x9002;&#x5408;&#x8be5;&#x9879;&#x76ee;&#x7684;&#x6280;&#x672f;&#x6808;&#x3001;&#x4f9d;&#x8d56;&#x7248;&#x672c;&#x548c;&#x5f00;&#x53d1;&#x6d41;&#x7a0b;&#xff0c;&#x800c;&#x65e0;&#x9700;&#x4e0e;&#x5176;&#x4ed6;&#x56e2;&#x961f;&#x534f;&#x8c03;&#x3002;","children":[],"payload":{"tag":"li","lines":"545,546"}},{"content":"<strong>&#x7b80;&#x5316;&#x7684;&#x8bbf;&#x95ee;&#x63a7;&#x5236; (Simplified Access Control):</strong> &#x53ef;&#x4ee5;&#x975e;&#x5e38;&#x7cbe;&#x7ec6;&#x5730;&#x63a7;&#x5236;&#x6bcf;&#x4e2a;&#x4ed3;&#x5e93;&#x7684;&#x8bfb;&#x5199;&#x6743;&#x9650;&#xff0c;&#x53ea;&#x5bf9;&#x76f8;&#x5173;&#x4eba;&#x5458;&#x5f00;&#x653e;&#xff0c;&#x5b89;&#x5168;&#x6027;&#x7ba1;&#x7406;&#x76f4;&#x89c2;&#x660e;&#x4e86;&#x3002;","children":[],"payload":{"tag":"li","lines":"546,547"}},{"content":"<strong>&#x6027;&#x80fd;&#x4f18;&#x5f02; (Performance):</strong> &#x5355;&#x4e2a;&#x4ed3;&#x5e93;&#x4f53;&#x79ef;&#x5c0f;&#xff0c;<a href=\"https://git-scm.com/\">git</a> clone&#x3001;fetch &#x7b49;&#x64cd;&#x4f5c;&#x901f;&#x5ea6;&#x5feb;&#xff0c;&#x5386;&#x53f2;&#x8bb0;&#x5f55;&#x6e05;&#x6670;&#x4e14;&#x53ea;&#x4e0e;&#x5f53;&#x524d;&#x9879;&#x76ee;&#x76f8;&#x5173;&#x3002;","children":[],"payload":{"tag":"li","lines":"547,549"}}],"payload":{"tag":"ul","lines":"544,549"}},{"content":"","children":[{"content":"<strong>&#x4ee3;&#x7801;&#x5171;&#x4eab;&#x56f0;&#x96be; (Difficult Code Sharing):</strong> &#x8fd9;&#x662f; Polyrepo &#x6700;&#x5927;&#x7684;&#x75db;&#x70b9;&#x3002;&#x5f53;&#x591a;&#x4e2a;&#x9879;&#x76ee;&#x9700;&#x8981;&#x590d;&#x7528;&#x540c;&#x4e00;&#x4e2a;&#x7ec4;&#x4ef6;&#x5e93;&#x6216;&#x5de5;&#x5177;&#x51fd;&#x6570;&#x65f6;&#xff0c;&#x5fc5;&#x987b;&#x5c06;&#x5176;&#x53d1;&#x5e03;&#x4e3a;&#x72ec;&#x7acb;&#x7684;&#x5305;&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x53d1;&#x5e03;&#x5230; <a href=\"https://www.npmjs.com/\">npm</a>&#xff09;&#xff0c;&#x7136;&#x540e;&#x5728;&#x6bcf;&#x4e2a;&#x6d88;&#x8d39;&#x5b83;&#x7684;&#x9879;&#x76ee;&#x4e2d;&#x5b89;&#x88c5;&#x548c;&#x66f4;&#x65b0;&#x3002;&#x8fd9;&#x4e2a;&#x8fc7;&#x7a0b;&#x7e41;&#x7410;&#x3001;&#x8017;&#x65f6;&#xff0c;&#x4e14;&#x5bb9;&#x6613;&#x5bfc;&#x81f4;&#x7248;&#x672c;&#x4e0d;&#x4e00;&#x81f4;&#x548c;&#x201c;&#x4f9d;&#x8d56;&#x5730;&#x72f1;&#x201d;&#x3002;","children":[],"payload":{"tag":"li","lines":"553,554"}},{"content":"<strong>&#x914d;&#x7f6e;&#x4e0e;&#x5de5;&#x5177;&#x94fe;&#x4e0d;&#x4e00;&#x81f4; (Inconsistent Tooling and Configuration):</strong> &#x4e0d;&#x540c;&#x7684;&#x9879;&#x76ee;&#x53ef;&#x80fd;&#x4f1a;&#x4f7f;&#x7528;&#x4e0d;&#x540c;&#x7248;&#x672c;&#x7684;&#x6784;&#x5efa;&#x5de5;&#x5177;&#x3001;Linter &#x89c4;&#x5219;&#x6216;&#x6d4b;&#x8bd5;&#x6846;&#x67b6;&#xff0c;&#x5bfc;&#x81f4;&#x201c;&#x4f9d;&#x8d56;&#x6f02;&#x79fb;&#x201d;&#xff08;Dependency Drift&#xff09;&#x3002;&#x8fd9;&#x4e0d;&#x4ec5;&#x589e;&#x52a0;&#x4e86;&#x7ef4;&#x62a4;&#x6210;&#x672c;&#xff0c;&#x4e5f;&#x8ba9;&#x5f00;&#x53d1;&#x8005;&#x5728;&#x4e0d;&#x540c;&#x9879;&#x76ee;&#x95f4;&#x5207;&#x6362;&#x65f6;&#x9700;&#x8981;&#x9002;&#x5e94;&#x4e0d;&#x540c;&#x7684;&#x73af;&#x5883;&#x3002;","children":[],"payload":{"tag":"li","lines":"554,555"}},{"content":"<strong>&#x8de8;&#x9879;&#x76ee;&#x91cd;&#x6784;&#x7684;&#x5669;&#x68a6; (Nightmare of Cross-Project Refactoring):</strong> &#x5982;&#x679c;&#x9700;&#x8981;&#x5bf9;&#x4e00;&#x4e2a;&#x88ab;&#x591a;&#x4e2a;&#x9879;&#x76ee;&#x4f9d;&#x8d56;&#x7684;&#x5171;&#x4eab;&#x5e93;&#x8fdb;&#x884c;&#x7834;&#x574f;&#x6027;&#xff08;Breaking Change&#xff09;&#x7684; API &#x53d8;&#x66f4;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x5fc5;&#x987b;&#x5728;&#x6240;&#x6709;&#x6d88;&#x8d39;&#x8be5;&#x5e93;&#x7684;&#x9879;&#x76ee;&#x4e2d;&#x9010;&#x4e00;&#x521b;&#x5efa; Pull Request &#x8fdb;&#x884c;&#x4fee;&#x6539;&#x3002;&#x8fd9;&#x79cd;&#x64cd;&#x4f5c;&#x6781;&#x5176;&#x8017;&#x65f6;&#x4e14;&#x96be;&#x4ee5;&#x534f;&#x8c03;&#xff0c;&#x65e0;&#x6cd5;&#x5b9e;&#x73b0;&#x201c;&#x539f;&#x5b50;&#x6027;&#x53d8;&#x66f4;&#x201d;&#x3002;","children":[],"payload":{"tag":"li","lines":"555,556"}},{"content":"<strong>&#x534f;&#x4f5c;&#x4e0e;&#x4ee3;&#x7801;&#x53d1;&#x73b0;&#x6210;&#x672c;&#x9ad8; (High Cost of Collaboration and Code Discovery):</strong> &#x56e2;&#x961f;&#x6210;&#x5458;&#x5f88;&#x96be;&#x53d1;&#x73b0;&#x548c;&#x5b66;&#x4e60;&#x5176;&#x4ed6;&#x56e2;&#x961f;&#x7684;&#x4f18;&#x79c0;&#x5b9e;&#x8df5;&#x6216;&#x53ef;&#x590d;&#x7528;&#x4ee3;&#x7801;&#xff0c;&#x5f62;&#x6210;&#x4e86;&#x201c;&#x4ee3;&#x7801;&#x5b64;&#x5c9b;&#x201d;&#x3002;&#x65b0;&#x6210;&#x5458;&#x5165;&#x804c;&#x65f6;&#xff0c;&#x9700;&#x8981;&#x514b;&#x9686;&#x548c;&#x914d;&#x7f6e;&#x591a;&#x4e2a;&#x4ed3;&#x5e93;&#x624d;&#x80fd;&#x642d;&#x5efa;&#x8d77;&#x5b8c;&#x6574;&#x7684;&#x5f00;&#x53d1;&#x73af;&#x5883;&#x3002;","children":[],"payload":{"tag":"li","lines":"556,558"}}],"payload":{"tag":"ul","lines":"553,558"}},{"content":"","children":[{"content":"&#x4ece;&#x201c;&#x53d1;&#x5e03; - &#x6d88;&#x8d39;&#x201d;&#x5230;&#x201c;&#x76f4;&#x63a5;&#x5bfc;&#x5165;&#x201d;&#x7684;&#x8303;&#x5f0f;&#x8f6c;&#x53d8;&#xff1a;&#x8fd9;&#x662f;&#x6700;&#x6838;&#x5fc3;&#x7684;&#x533a;&#x522b;&#x3002;&#x5728; Polyrepo &#x4e2d;&#xff0c;&#x4ee3;&#x7801;&#x590d;&#x7528;&#x4f9d;&#x8d56;&#x4e8e;&#x5305;&#x7ba1;&#x7406;&#x5668;&#x7684;&#x201c;&#x53d1;&#x5e03; - &#x6d88;&#x8d39;&#x201d;&#x6a21;&#x578b;&#xff0c;&#x8fd9;&#x4e2a;&#x8fc7;&#x7a0b;&#x662f;&#x5f02;&#x6b65;&#x4e14;&#x6ede;&#x540e;&#x7684;&#x3002;&#x800c;&#x5728; Monorepo &#x4e2d;&#xff0c;&#x4ee3;&#x7801;&#x590d;&#x7528;&#x53d8;&#x6210;&#x4e86;&#x7b80;&#x5355;&#x7684;&#x672c;&#x5730;&#x201c;&#x76f4;&#x63a5;&#x5bfc;&#x5165;&#x201d;&#x3002;&#x5f53;&#x4fee;&#x590d;&#x4e00;&#x4e2a;&#x5171;&#x4eab;&#x7ec4;&#x4ef6;&#x7684; bug &#x65f6;&#xff0c;&#x6240;&#x6709;&#x4f9d;&#x8d56;&#x5b83;&#x7684;&#x5e94;&#x7528;&#x80fd;&#x7acb;&#x5373;&#x5728;&#x672c;&#x5730;&#x770b;&#x5230;&#x53d8;&#x66f4;&#xff0c;&#x53cd;&#x9988;&#x56de;&#x8def;&#x88ab;&#x6781;&#x5927;&#x7f29;&#x77ed;&#xff0c;&#x5f00;&#x53d1;&#x4f53;&#x9a8c;&#x548c;&#x6548;&#x7387;&#x5b9e;&#x73b0;&#x4e86;&#x8d28;&#x7684;&#x98de;&#x8dc3;&#x3002;","children":[],"payload":{"tag":"li","lines":"564,565"}},{"content":"&#x4ece;&#x201c;&#x5206;&#x6563;&#x6cbb;&#x7406;&#x201d;&#x5230;&#x201c;&#x96c6;&#x4e2d;&#x6cbb;&#x7406;&#x201d;&#x7684;&#x8303;&#x5f0f;&#x8f6c;&#x53d8;&#xff1a;&#x968f;&#x7740;&#x56e2;&#x961f;&#x89c4;&#x6a21;&#x6269;&#x5927;&#xff0c;&#x4fdd;&#x6301;&#x6280;&#x672f;&#x6808;&#x3001;&#x4f9d;&#x8d56;&#x7248;&#x672c;&#x548c;&#x7f16;&#x7801;&#x89c4;&#x8303;&#x7684;&#x4e00;&#x81f4;&#x6027;&#x53d8;&#x5f97;&#x81f3;&#x5173;&#x91cd;&#x8981;&#x3002;Polyrepo &#x7684;&#x201c;&#x5206;&#x6563;&#x6cbb;&#x7406;&#x201d;&#x6a21;&#x5f0f;&#x653e;&#x5927;&#x4e86;&#x8fd9;&#x79cd;&#x6df7;&#x4e71;&#x3002;Monorepo &#x5219;&#x901a;&#x8fc7;&#x5728;&#x6839;&#x76ee;&#x5f55;&#x63d0;&#x4f9b;&#x4e00;&#x4e2a;&#x5355;&#x4e00;&#x4e8b;&#x5b9e;&#x6765;&#x6e90; (Single Source of Truth)&#xff0c;&#x5f3a;&#x5236;&#x6240;&#x6709;&#x9879;&#x76ee;&#x5171;&#x4eab;&#x4e00;&#x5957;&#x6784;&#x5efa;&#x5de5;&#x5177;&#x3001;Linter &#x89c4;&#x5219;&#x548c;&#x6838;&#x5fc3;&#x4f9d;&#x8d56;&#x7248;&#x672c;&#xff0c;&#x4ece;&#x6839;&#x672c;&#x4e0a;&#x89e3;&#x51b3;&#x4e86;&#x201c;&#x4f9d;&#x8d56;&#x6f02;&#x79fb;&#x201d;&#x548c;&#x201c;&#x914d;&#x7f6e;&#x4e0d;&#x4e00;&#x81f4;&#x201d;&#x7684;&#x95ee;&#x9898;&#xff0c;&#x6781;&#x5927;&#x5730;&#x964d;&#x4f4e;&#x4e86;&#x6cbb;&#x7406;&#x6210;&#x672c;&#x3002;","children":[],"payload":{"tag":"li","lines":"565,566"}},{"content":"&#x4ece;&#x201c;&#x5b64;&#x7acb;&#x53d8;&#x66f4;&#x201d;&#x5230;&#x201c;&#x539f;&#x5b50;&#x6027;&#x53d8;&#x66f4;&#x201d;&#x7684;&#x8303;&#x5f0f;&#x8f6c;&#x53d8;&#xff1a;&#x73b0;&#x4ee3;&#x5e94;&#x7528;&#x67b6;&#x6784;&#x4e2d;&#xff0c;&#x4e00;&#x4e2a;&#x529f;&#x80fd;&#x7684;&#x53d8;&#x66f4;&#x53ef;&#x80fd;&#x9700;&#x8981;&#x540c;&#x65f6;&#x4fee;&#x6539;&#x524d;&#x7aef;&#x3001;&#x540e;&#x7aef;&#x548c;&#x5171;&#x4eab;&#x5e93;&#x3002;&#x5728; Polyrepo &#x4e2d;&#xff0c;&#x8fd9;&#x9700;&#x8981;&#x591a;&#x4e2a; PR &#x548c;&#x590d;&#x6742;&#x7684;&#x90e8;&#x7f72;&#x534f;&#x8c03;&#x3002;Monorepo &#x5219;&#x5141;&#x8bb8;&#x901a;&#x8fc7;&#x4e00;&#x4e2a;&#x5355;&#x4e00;&#x7684;&#x3001;&#x539f;&#x5b50;&#x6027;&#x7684;&#x63d0;&#x4ea4; (Commit) &#x6765;&#x5b8c;&#x6210;&#x8de8;&#x9879;&#x76ee;&#x7684;&#x6240;&#x6709;&#x53d8;&#x66f4;&#x3002;&#x8fd9;&#x4e0d;&#x4ec5;&#x7b80;&#x5316;&#x4e86;&#x4ee3;&#x7801;&#x5ba1;&#x67e5;&#xff0c;&#x66f4;&#x91cd;&#x8981;&#x7684;&#x662f;&#x4fdd;&#x8bc1;&#x4e86;&#x7cfb;&#x7edf;&#x5728;&#x4efb;&#x4f55;&#x4e00;&#x4e2a;&#x5386;&#x53f2;&#x8282;&#x70b9;&#x4e0a;&#x90fd;&#x662f;&#x4e00;&#x81f4;&#x548c;&#x5b8c;&#x6574;&#x7684;&#xff0c;&#x8fd9;&#x5bf9;&#x4e8e;&#x5927;&#x578b;&#x91cd;&#x6784;&#x548c;&#x7248;&#x672c;&#x53d1;&#x5e03;&#x81f3;&#x5173;&#x91cd;&#x8981;&#x3002;","children":[],"payload":{"tag":"li","lines":"566,568"}}],"payload":{"tag":"ul","lines":"564,568"}}],"payload":{"tag":"h4","lines":"536,537"}},{"content":"<strong>&#x4ee3;&#x7801;&#x751f;&#x6210;</strong>","children":[],"payload":{"tag":"h4","lines":"570,571"}}],"payload":{"tag":"h3","lines":"504,505"}},{"content":"<strong>&#x5305;&#x7ba1;&#x7406;&#x5668;&#xff1a;npm&#x3001;Yarn &#x548c; pnpm &#x4f9d;&#x8d56;&#x7ba1;&#x7406;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x6d41;&#x884c; JavaScript &#x5305;&#x7ba1;&#x7406;&#x5668;&#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"588,595\">\n<thead data-lines=\"588,589\">\n<tr data-lines=\"588,589\">\n<th style=\"text-align:left\">&#x7279;&#x6027;</th>\n<th style=\"text-align:left\"><a href=\"https://www.npmjs.com/\">npm</a></th>\n<th style=\"text-align:left\"><a href=\"https://yarnpkg.com/\">Yarn</a></th>\n<th style=\"text-align:left\"><a href=\"https://pnpm.io/\">pnpm</a></th>\n</tr>\n</thead>\n<tbody data-lines=\"590,595\">\n<tr data-lines=\"590,591\">\n<td style=\"text-align:left\"><strong>&#x5b89;&#x88c5;</strong></td>\n<td style=\"text-align:left\">&#x968f; <a href=\"https://nodejs.org/\">Node.js</a> &#x6346;&#x7ed1;</td>\n<td style=\"text-align:left\">&#x5168;&#x5c40;&#x5b89;&#x88c5;&#x6216;&#x9879;&#x76ee;&#x5185;&#x5b89;&#x88c5;</td>\n<td style=\"text-align:left\">&#x5168;&#x5c40;&#x5b89;&#x88c5;&#x6216;&#x9879;&#x76ee;&#x5185;&#x5b89;&#x88c5;</td>\n</tr>\n<tr data-lines=\"591,592\">\n<td style=\"text-align:left\"><strong>&#x6838;&#x5fc3;&#x7406;&#x5ff5;</strong></td>\n<td style=\"text-align:left\">&#x7b80;&#x5355;&#x6613;&#x7528;&#x3001;&#x5e7f;&#x6cdb;&#x517c;&#x5bb9;</td>\n<td style=\"text-align:left\">&#x901f;&#x5ea6;&#x3001;&#x53ef;&#x9760;&#x6027;&#x3001;&#x5b89;&#x5168;&#x6027;&#x3001;&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;</td>\n<td style=\"text-align:left\">&#x78c1;&#x76d8;&#x7a7a;&#x95f4;&#x4f18;&#x5316;&#x3001;&#x4e25;&#x683c;&#x4f9d;&#x8d56;&#x68c0;&#x67e5;</td>\n</tr>\n<tr data-lines=\"592,593\">\n<td style=\"text-align:left\"><strong>&#x72ec;&#x7279;&#x529f;&#x80fd;</strong></td>\n<td style=\"text-align:left\">&#x9ed8;&#x8ba4;&#x5305;&#x7ba1;&#x7406;&#x5668;</td>\n<td style=\"text-align:left\">&#x79bb;&#x7ebf;&#x7f13;&#x5b58;&#x3001;&#x5e76;&#x884c;&#x5b89;&#x88c5;&#x3001;&#x5de5;&#x4f5c;&#x533a;</td>\n<td style=\"text-align:left\">&#x7b26;&#x53f7;&#x94fe;&#x63a5;&#x3001;&#x5185;&#x5bb9;&#x5bfb;&#x5740;&#x5b58;&#x50a8;&#x3001;&#x9632;&#x6b62;&#x5e7d;&#x7075;&#x4f9d;&#x8d56;</td>\n</tr>\n<tr data-lines=\"593,594\">\n<td style=\"text-align:left\"><strong>&#x6027;&#x80fd;</strong></td>\n<td style=\"text-align:left\">&#x8f83;&#x5feb;&#xff0c;&#x4f46;&#x53ef;&#x80fd;&#x5b58;&#x5728;&#x91cd;&#x590d;&#x4f9d;&#x8d56;&#x5bfc;&#x81f4;&#x78c1;&#x76d8;&#x5360;&#x7528;</td>\n<td style=\"text-align:left\">&#x5feb;&#x901f;&#x5b89;&#x88c5;&#x3001;&#x9ad8;&#x6548;&#x5229;&#x7528;&#x8d44;&#x6e90;</td>\n<td style=\"text-align:left\">&#x6781;&#x901f;&#x5b89;&#x88c5;&#x3001;&#x5927;&#x5e45;&#x51cf;&#x5c11;&#x78c1;&#x76d8;&#x5360;&#x7528;</td>\n</tr>\n<tr data-lines=\"594,595\">\n<td style=\"text-align:left\"><strong>&#x517c;&#x5bb9;&#x6027;</strong></td>\n<td style=\"text-align:left\"><a href=\"https://www.npmjs.com/\">npm</a> &#x6ce8;&#x518c;&#x8868;</td>\n<td style=\"text-align:left\"><a href=\"https://www.npmjs.com/\">npm</a> &#x6ce8;&#x518c;&#x8868;&#x3001;&#x5de5;&#x4f5c;&#x533a;</td>\n<td style=\"text-align:left\"><a href=\"https://www.npmjs.com/\">npm</a> &#x6ce8;&#x518c;&#x8868;&#x3001;&#x5de5;&#x4f5c;&#x533a;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"588,595"}}],"payload":{"tag":"h4","lines":"586,587"}}],"payload":{"tag":"h3","lines":"576,577"}},{"content":"<strong>&#x6784;&#x5efa;&#x5de5;&#x5177;&#x548c;&#x6253;&#x5305;&#x5668;&#xff1a;&#x4f18;&#x5316;&#x751f;&#x4ea7;&#x4ee3;&#x7801;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x9886;&#x5148;&#x6784;&#x5efa;&#x5de5;&#x5177;/&#x6253;&#x5305;&#x5668;&#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"613,621\">\n<thead data-lines=\"613,614\">\n<tr data-lines=\"613,614\">\n<th style=\"text-align:left\">&#x5de5;&#x5177;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x6838;&#x5fc3;&#x6280;&#x672f;</th>\n<th style=\"text-align:left\">&#x4e3b;&#x8981;&#x7528;&#x4f8b;</th>\n<th style=\"text-align:left\">&#x5173;&#x952e;&#x7279;&#x6027;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x6027;&#x80fd;&#x7279;&#x70b9;</th>\n</tr>\n</thead>\n<tbody data-lines=\"615,621\">\n<tr data-lines=\"615,616\">\n<td style=\"text-align:left\"><a href=\"https://webpack.js.org/\"><strong>Webpack</strong></a></td>\n<td style=\"text-align:left\">JavaScript</td>\n<td style=\"text-align:left\">&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x6253;&#x5305;</td>\n<td style=\"text-align:left\">Loaders, Plugins, Code Splitting</td>\n<td style=\"text-align:left\">&#x7a33;&#x5b9a;&#xff0c;&#x529f;&#x80fd;&#x5168;&#x9762;</td>\n</tr>\n<tr data-lines=\"616,617\">\n<td style=\"text-align:left\"><a href=\"https://vitejs.dev/\"><strong>Vite</strong></a></td>\n<td style=\"text-align:left\">JavaScript/<a href=\"https://rollupjs.org/\">Rollup</a></td>\n<td style=\"text-align:left\">&#x5f00;&#x53d1;&#x670d;&#x52a1;&#x5668;&#xff0c;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x6253;&#x5305;</td>\n<td style=\"text-align:left\">&#x5feb;&#x901f; HMR, &#x539f;&#x751f; ESM, <a href=\"https://rollupjs.org/\">Rollup</a> &#x6253;&#x5305;</td>\n<td style=\"text-align:left\">&#x5f00;&#x53d1;&#x901f;&#x5ea6;&#x5feb;&#xff0c;&#x751f;&#x4ea7;&#x4f18;&#x5316;</td>\n</tr>\n<tr data-lines=\"617,618\">\n<td style=\"text-align:left\"><a href=\"https://esbuild.github.io/\"><strong>esbuild</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://go.dev/\">Go</a></td>\n<td style=\"text-align:left\">&#x6253;&#x5305;&#x3001;&#x8f6c;&#x6362;&#x3001;&#x538b;&#x7f29;</td>\n<td style=\"text-align:left\">&#x539f;&#x751f;&#x7f16;&#x8bd1;&#x3001;&#x9ad8;&#x5ea6;&#x5e76;&#x884c;&#x3001;&#x6781;&#x901f;</td>\n<td style=\"text-align:left\">&#x6781;&#x901f;</td>\n</tr>\n<tr data-lines=\"618,619\">\n<td style=\"text-align:left\"><a href=\"https://rollupjs.org/\"><strong>Rollup</strong></a></td>\n<td style=\"text-align:left\">JavaScript</td>\n<td style=\"text-align:left\">&#x5e93;&#x6253;&#x5305;</td>\n<td style=\"text-align:left\">Tree-shaking, ES &#x6a21;&#x5757;&#x4f18;&#x5148;</td>\n<td style=\"text-align:left\">&#x5305;&#x4f53;&#x79ef;&#x5c0f;&#xff0c;&#x6548;&#x7387;&#x9ad8;</td>\n</tr>\n<tr data-lines=\"619,620\">\n<td style=\"text-align:left\"><a href=\"https://turbo.build/pack\"><strong>Turbopack</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://www.rust-lang.org/\">Rust</a></td>\n<td style=\"text-align:left\"><a href=\"https://nextjs.org/\">Next.js</a> &#x5f00;&#x53d1;/&#x6784;&#x5efa;</td>\n<td style=\"text-align:left\">&#x7edf;&#x4e00;&#x56fe;&#x3001;&#x589e;&#x91cf;&#x8ba1;&#x7b97;&#x3001;&#x60f0;&#x6027;&#x6253;&#x5305;</td>\n<td style=\"text-align:left\">&#x6781;&#x901f;&#xff0c;<a href=\"https://nextjs.org/\">Next.js</a> &#x4e13;&#x7528;</td>\n</tr>\n<tr data-lines=\"620,621\">\n<td style=\"text-align:left\"><a href=\"https://swc.rs/\"><strong>SWC</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://www.rust-lang.org/\">Rust</a></td>\n<td style=\"text-align:left\">&#x7f16;&#x8bd1;&#x3001;&#x538b;&#x7f29;</td>\n<td style=\"text-align:left\">&#x8d85;&#x5feb;&#x7f16;&#x8bd1;&#x3001;<a href=\"https://www.typescriptlang.org/\">TypeScript</a>/<a href=\"https://react.dev/learn/writing-markup-with-jsx\">JSX</a> &#x652f;&#x6301;</td>\n<td style=\"text-align:left\">&#x6781;&#x901f;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"613,621"}}],"payload":{"tag":"h4","lines":"611,612"}}],"payload":{"tag":"h3","lines":"598,599"}},{"content":"<strong>&#x4ee3;&#x7801;&#x8d28;&#x91cf;&#x548c;&#x4e00;&#x81f4;&#x6027;&#xff1a;Linter (ESLint) &#x548c; Formatter (Prettier)</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;ESLint &#x548c; Prettier &#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"633,637\">\n<thead data-lines=\"633,634\">\n<tr data-lines=\"633,634\">\n<th style=\"text-align:left\">&#x5de5;&#x5177;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x4e3b;&#x8981;&#x76ee;&#x7684;</th>\n<th style=\"text-align:left\">&#x914d;&#x7f6e;&#x65b9;&#x5f0f;</th>\n<th style=\"text-align:left\">&#x96c6;&#x6210;&#x65b9;&#x5f0f;</th>\n<th style=\"text-align:left\">&#x8bed;&#x8a00;&#x652f;&#x6301;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x4f18;&#x70b9;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"635,637\">\n<tr data-lines=\"635,636\">\n<td style=\"text-align:left\"><a href=\"https://eslint.org/\"><strong>ESLint</strong></a></td>\n<td style=\"text-align:left\">&#x4ee3;&#x7801;&#x8d28;&#x91cf;&#x3001;&#x6700;&#x4f73;&#x5b9e;&#x8df5;</td>\n<td style=\"text-align:left\">&#x7075;&#x6d3b;&#xff0c;&#x9ad8;&#x5ea6;&#x53ef;&#x914d;&#x7f6e;</td>\n<td style=\"text-align:left\">&#x7f16;&#x8f91;&#x5668;&#x3001;&#x6784;&#x5efa;&#x5de5;&#x5177;</td>\n<td style=\"text-align:left\">JavaScript, <a href=\"https://www.typescriptlang.org/\">TypeScript</a></td>\n<td style=\"text-align:left\">&#x6355;&#x83b7;&#x9519;&#x8bef;&#xff0c;&#x5f3a;&#x5236;&#x89c4;&#x8303;</td>\n</tr>\n<tr data-lines=\"636,637\">\n<td style=\"text-align:left\"><a href=\"https://prettier.io/\"><strong>Prettier</strong></a></td>\n<td style=\"text-align:left\">&#x4ee3;&#x7801;&#x683c;&#x5f0f;&#x5316;</td>\n<td style=\"text-align:left\">&#x9884;&#x8bbe;&#x98ce;&#x683c;&#xff0c;&#x5c11;&#x91cf;&#x9009;&#x9879;</td>\n<td style=\"text-align:left\">&#x7f16;&#x8f91;&#x5668;&#x3001;CLI</td>\n<td style=\"text-align:left\">JavaScript, <a href=\"https://www.typescriptlang.org/\">TypeScript</a>, HTML, CSS</td>\n<td style=\"text-align:left\">&#x6837;&#x5f0f;&#x4e00;&#x81f4;&#x6027;&#xff0c;&#x8282;&#x7701;&#x7cbe;&#x529b;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"633,637"}}],"payload":{"tag":"h4","lines":"631,632"}}],"payload":{"tag":"h3","lines":"624,625"}},{"content":"<strong>&#x96c6;&#x6210;&#x5f00;&#x53d1;&#x73af;&#x5883; (IDE) &#x548c;&#x7f16;&#x8f91;&#x5668;</strong>","children":[{"content":"<strong>VS Code &#x548c; WebStorm</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x6d41;&#x884c;&#x524d;&#x7aef; IDE/&#x7f16;&#x8f91;&#x5668;&#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"653,657\">\n<thead data-lines=\"653,654\">\n<tr data-lines=\"653,654\">\n<th style=\"text-align:left\">&#x5de5;&#x5177;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x6210;&#x672c;</th>\n<th style=\"text-align:left\">&#x7c7b;&#x578b;</th>\n<th style=\"text-align:left\">&#x6838;&#x5fc3;&#x7406;&#x5ff5;</th>\n<th style=\"text-align:left\">&#x6027;&#x80fd;&#x611f;&#x77e5;</th>\n<th style=\"text-align:left\">&#x5173;&#x952e;&#x7279;&#x6027;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x751f;&#x6001;&#x7cfb;&#x7edf;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"655,657\">\n<tr data-lines=\"655,656\">\n<td style=\"text-align:left\"><a href=\"https://code.visualstudio.com/\"><strong>VS Code</strong></a></td>\n<td style=\"text-align:left\">&#x514d;&#x8d39;</td>\n<td style=\"text-align:left\">&#x6587;&#x672c;&#x7f16;&#x8f91;&#x5668;</td>\n<td style=\"text-align:left\">&#x6781;&#x5ea6;&#x53ef;&#x6269;&#x5c55;</td>\n<td style=\"text-align:left\">&#x5feb;&#x901f;&#x3001;&#x8f7b;&#x91cf;&#x7ea7;</td>\n<td style=\"text-align:left\">&#x8c03;&#x8bd5;&#x3001;&#x4ee3;&#x7801;&#x8f85;&#x52a9;&#x3001;&#x591a;&#x8bed;&#x8a00;&#x652f;&#x6301;</td>\n<td style=\"text-align:left\">&#x5e9e;&#x5927;&#x7684;&#x6269;&#x5c55;&#x5e02;&#x573a;</td>\n</tr>\n<tr data-lines=\"656,657\">\n<td style=\"text-align:left\"><a href=\"https://www.jetbrains.com/webstorm/\"><strong>WebStorm</strong></a></td>\n<td style=\"text-align:left\">&#x4ed8;&#x8d39;</td>\n<td style=\"text-align:left\">&#x7efc;&#x5408; IDE</td>\n<td style=\"text-align:left\">&#x529f;&#x80fd;&#x96c6;&#x6210;&#x3001;&#x667a;&#x80fd;&#x5206;&#x6790;</td>\n<td style=\"text-align:left\">&#x7a33;&#x5b9a;&#xff0c;&#x529f;&#x80fd;&#x5168;&#x9762;</td>\n<td style=\"text-align:left\">&#x6df1;&#x5ea6;&#x8c03;&#x8bd5;&#x3001;&#x667a;&#x80fd;&#x91cd;&#x6784;&#x3001;&#x5185;&#x7f6e; <a href=\"https://git-scm.com/\">Git</a> &#x5de5;&#x5177;</td>\n<td style=\"text-align:left\">&#x4e30;&#x5bcc;&#x7684;&#x5185;&#x7f6e;&#x529f;&#x80fd;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"653,657"}}],"payload":{"tag":"h5","lines":"651,652"}}],"payload":{"tag":"h4","lines":"642,643"}},{"content":"<strong>&#x5176;&#x4ed6;&#x4f20;&#x7edf;&#x7f16;&#x8f91;&#x5668;&#x548c; IDE</strong>","children":[{"content":"<a href=\"https://www.dcloud.io/hbuilderx.html\"><strong>HBuilderX</strong></a>&#xff1a;DCloud&#xff08;&#x6570;&#x5b57;&#x5929;&#x5802;&#xff09;&#x63a8;&#x51fa;&#x7684;&#x4e00;&#x6b3e;&#x4e3a;&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x670d;&#x52a1;&#x7684;&#x901a;&#x7528; IDE&#x3002;&#x5b83;&#x9488;&#x5bf9; Vue &#x5f00;&#x53d1;&#x8fdb;&#x884c;&#x4e86;&#x7279;&#x522b;&#x4f18;&#x5316;&#xff0c;&#x5e76;&#x5728; uniapp &#x8de8;&#x5e73;&#x53f0;&#x5e94;&#x7528;&#x7684;&#x5f00;&#x53d1;&#x4e0a;&#x63d0;&#x4f9b;&#x4e86;&#x6781;&#x9ad8;&#x7684;&#x6548;&#x7387;&#x548c;&#x5f3a;&#x5927;&#x7684;&#x652f;&#x6301;&#x3002;","children":[],"payload":{"tag":"li","lines":"662,663"}},{"content":"<a href=\"https://www.sublimetext.com/\"><strong>Sublime Text</strong></a>&#xff1a;&#x4e00;&#x6b3e;&#x7ecf;&#x5178;&#x7684;&#x3001;&#x5907;&#x53d7;&#x8d5e;&#x8a89;&#x7684;&#x4ee3;&#x7801;&#x7f16;&#x8f91;&#x5668;&#xff0c;&#x4ee5;&#x5176;&#x6781;&#x81f4;&#x7684;&#x8f7b;&#x91cf;&#x3001;&#x95ea;&#x7535;&#x822c;&#x7684;&#x542f;&#x52a8;&#x901f;&#x5ea6;&#x548c;&#x5f3a;&#x5927;&#x7684;&#x6027;&#x80fd;&#x800c;&#x8457;&#x79f0;&#x3002;&#x5b83;&#x62e5;&#x6709;&#x4e00;&#x4e2a;&#x6210;&#x719f;&#x7684;&#x63d2;&#x4ef6;&#x751f;&#x6001;&#x7cfb;&#x7edf;&#xff08;Package Control&#xff09;&#xff0c;&#x5e76;&#x901a;&#x8fc7;&#x201c;&#x65e0;&#x5e72;&#x6270;&#x6a21;&#x5f0f;&#x201d;&#x548c;&#x591a;&#x5149;&#x6807;&#x7f16;&#x8f91;&#x7b49;&#x529f;&#x80fd;&#xff0c;&#x4e3a;&#x8ffd;&#x6c42;&#x9ad8;&#x6548;&#x7f16;&#x7801;&#x7684;&#x5f00;&#x53d1;&#x8005;&#x63d0;&#x4f9b;&#x4e86;&#x4f18;&#x96c5;&#x7684;&#x4f53;&#x9a8c;&#x3002;","children":[],"payload":{"tag":"li","lines":"663,665"}}],"payload":{"tag":"h4","lines":"660,661"}},{"content":"<strong>&#x65b0;&#x5174;&#x5f00;&#x53d1;&#x73af;&#x5883;&#x4e0e; AI &#x9a71;&#x52a8;&#x7684;&#x5de5;&#x5177;</strong>","children":[{"content":"<strong>&#x4e91;&#x7aef;/&#x5728;&#x7ebf; IDE&#xff1a;&#x968f;&#x65f6;&#x968f;&#x5730;&#x5f00;&#x53d1;</strong>","children":[{"content":"<a href=\"https://codesandbox.io/\"><strong>CodeSandbox</strong></a>&#xff1a;&#x4e00;&#x6b3e;&#x4e13;&#x4e3a;&#x73b0;&#x4ee3; Web &#x5f00;&#x53d1;&#x8bbe;&#x8ba1;&#x7684;&#x4e91;&#x7aef;&#x4ee3;&#x7801;&#x7f16;&#x8f91;&#x5668;&#x3002;&#x5b83;&#x652f;&#x6301; React&#x3001;Vue&#x3001;Angular &#x7b49;&#x591a;&#x79cd;&#x4e3b;&#x6d41;&#x6846;&#x67b6;&#xff0c;&#x63d0;&#x4f9b;&#x4e30;&#x5bcc;&#x7684;&#x9879;&#x76ee;&#x6a21;&#x677f;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x65e0;&#x7f1d;&#x5730;&#x7f16;&#x5199;&#x3001;&#x6d4b;&#x8bd5;&#x548c;&#x5206;&#x4eab;&#x4ee3;&#x7801;&#x3002;&#x5176;&#x6838;&#x5fc3;&#x4f18;&#x52bf;&#x5728;&#x4e8e;&#x5f3a;&#x5927;&#x7684;&#x5b9e;&#x65f6;&#x534f;&#x4f5c;&#x529f;&#x80fd;&#xff0c;&#x5141;&#x8bb8;&#x591a;&#x4e2a;&#x7528;&#x6237;&#x540c;&#x65f6;&#x7f16;&#x8f91;&#x540c;&#x4e00;&#x4e2a;&#x9879;&#x76ee;&#xff0c;&#x5149;&#x6807;&#x548c;&#x4ee3;&#x7801;&#x53d8;&#x66f4;&#x5b9e;&#x65f6;&#x540c;&#x6b65;&#xff0c;&#x975e;&#x5e38;&#x9002;&#x5408;&#x56e2;&#x961f;&#x534f;&#x4f5c;&#x548c;&#x9879;&#x76ee;&#x6f14;&#x793a;&#x3002;","children":[],"payload":{"tag":"li","lines":"673,674"}},{"content":"<a href=\"https://stackblitz.com/\"><strong>StackBlitz</strong></a>&#xff1a;&#x53e6;&#x4e00;&#x6b3e;&#x5f3a;&#x5927;&#x7684;&#x5728;&#x7ebf; IDE&#xff0c;&#x5176;&#x754c;&#x9762;&#x98ce;&#x683c;&#x548c;&#x5feb;&#x6377;&#x952e;&#x4e0e; VS Code &#x9ad8;&#x5ea6;&#x76f8;&#x4f3c;&#xff0c;&#x8ba9; VS Code &#x7528;&#x6237;&#x53ef;&#x4ee5;&#x65e0;&#x7f1d;&#x5207;&#x6362;&#x3002;&#x5b83;&#x5229;&#x7528; Progressive Web App &#x6280;&#x672f;&#xff0c;&#x751a;&#x81f3;&#x53ef;&#x4ee5;&#x5728;&#x79bb;&#x7ebf;&#x6761;&#x4ef6;&#x4e0b;&#x5de5;&#x4f5c;&#x3002;StackBlitz &#x7684;&#x4e00;&#x4e2a;&#x9769;&#x547d;&#x6027;&#x7279;&#x6027;&#x662f;&#x5176; WebContainer &#x6280;&#x672f;&#xff0c;&#x5b83;&#x5141;&#x8bb8;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x5185;&#x90e8;&#x8fd0;&#x884c;&#x5b8c;&#x6574;&#x7684; Node.js &#x73af;&#x5883;&#xff0c;&#x4ece;&#x800c;&#x5b9e;&#x73b0;&#x4e86;&#x66f4;&#x5feb;&#x7684;&#x4f9d;&#x8d56;&#x5b89;&#x88c5;&#x548c;&#x9879;&#x76ee;&#x542f;&#x52a8;&#x901f;&#x5ea6;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x4e0e;&#x672c;&#x5730;&#x5f00;&#x53d1;&#x51e0;&#x4e4e;&#x4e00;&#x81f4;&#x7684;&#x4f53;&#x9a8c;&#x3002;","children":[],"payload":{"tag":"li","lines":"674,676"}}],"payload":{"tag":"h5","lines":"669,670"}},{"content":"<strong>AI &#x539f;&#x751f; IDE&#xff1a;&#x4ece;&#x201c;&#x8f85;&#x52a9;&#x201d;&#x5230;&#x201c;&#x534f;&#x4f5c;&#x201d;&#x7684;&#x8303;&#x5f0f;&#x8f6c;&#x53d8;</strong>","children":[{"content":"<a href=\"https://cursor.sh/\"><strong>Cursor</strong></a>&#xff1a;&#x57fa;&#x4e8e; VS Code &#x5f00;&#x6e90;&#x4ee3;&#x7801;&#x6784;&#x5efa;&#x7684; AI &#x4f18;&#x5148; IDE&#x3002;&#x5b83;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x901a;&#x8fc7;&#x804a;&#x5929;&#x754c;&#x9762;&#x76f4;&#x63a5;&#x5bf9;&#x4ee3;&#x7801;&#x5e93;&#x8fdb;&#x884c;&#x4fee;&#x6539;&#x3001;&#x91cd;&#x6784;&#x548c;&#x8c03;&#x8bd5;&#x3002;&#x5176;&#x6838;&#x5fc3;&#x4eae;&#x70b9;&#x5728;&#x4e8e;&#x5f3a;&#x5927;&#x7684;&#x4ee3;&#x7801;&#x5e93;&#x7d22;&#x5f15;&#xff08;Codebase Indexing&#xff09;&#x548c; RAG&#xff08;&#x68c0;&#x7d22;&#x589e;&#x5f3a;&#x751f;&#x6210;&#xff09;&#x80fd;&#x529b;&#xff0c;&#x80fd;&#x7406;&#x89e3;&#x6574;&#x4e2a;&#x9879;&#x76ee;&#x7684;&#x4e0a;&#x4e0b;&#x6587;&#xff0c;&#x56de;&#x7b54;&#x8bf8;&#x5982;&#x201c;&#x9879;&#x76ee;&#x4e2d;&#x54ea;&#x91cc;&#x7528;&#x5230;&#x4e86;&#x7c7b;&#x4f3c; websocket &#x7684;&#x673a;&#x5236;&#xff1f;&#x201d;&#x8fd9;&#x7c7b;&#x590d;&#x6742;&#x95ee;&#x9898;&#xff0c;&#x5e76;&#x76f4;&#x63a5;&#x7ed9;&#x51fa;&#x76f8;&#x5173;&#x6587;&#x4ef6;&#x548c;&#x4ee3;&#x7801;&#xff0c;&#x8fd9;&#x662f;&#x4f20;&#x7edf;&#x4ee3;&#x7801;&#x8865;&#x5168;&#x5de5;&#x5177;&#x96be;&#x4ee5;&#x4f01;&#x53ca;&#x7684;&#x3002;","children":[],"payload":{"tag":"li","lines":"682,683"}},{"content":"<a href=\"https://wind.surf/\"><strong>Wind.Surf</strong></a>&#xff1a;&#x81ea;&#x79f0;&#x4e3a;&#x4e16;&#x754c;&#x4e0a;&#x6700;&#x5148;&#x8fdb;&#x7684; AI &#x7f16;&#x7a0b;&#x52a9;&#x624b;&#xff0c;&#x5b83;&#x540c;&#x6837;&#x63d0;&#x4f9b; AI &#x539f;&#x751f;&#x7684; IDE&#x3002;Wind.Surf &#x5f3a;&#x8c03;&#x5176;&#x5bf9;&#x4ee3;&#x7801;&#x5e93;&#x7684;&#x6df1;&#x5ea6;&#x4e0a;&#x4e0b;&#x6587;&#x611f;&#x77e5;&#x80fd;&#x529b;&#x548c;&#x5f3a;&#x5927;&#x7684;&#x201c;Cascade&#x201d;&#x5de5;&#x4f5c;&#x6d41;&#xff0c;&#x65e8;&#x5728;&#x8ba9;&#x5f00;&#x53d1;&#x8005;&#x4fdd;&#x6301;&#x5fc3;&#x6d41;&#x72b6;&#x6001;&#xff0c;&#x901a;&#x8fc7;&#x7b80;&#x5355;&#x7684;&#x6309;&#x952e;&#xff08;&#x5982; Tab&#xff09;&#x5373;&#x53ef;&#x5b8c;&#x6210;&#x4f9d;&#x8d56;&#x5bfc;&#x5165;&#x3001;&#x4ee3;&#x7801;&#x751f;&#x6210;&#x7b49;&#x590d;&#x6742;&#x64cd;&#x4f5c;&#x3002;","children":[],"payload":{"tag":"li","lines":"683,684"}},{"content":"<a href=\"https://trae.js.org/\"><strong>Trae</strong></a>&#xff1a;&#x7531;&#x5b57;&#x8282;&#x8df3;&#x52a8;&#x5f00;&#x53d1;&#x7684; AI &#x539f;&#x751f; IDE&#xff0c;&#x540c;&#x6837;&#x6df1;&#x5ea6;&#x96c6;&#x6210;&#x4e86; AI &#x6280;&#x672f;&#xff0c;&#x5e76;&#x4ee5;&#x201c;&#x4eba;&#x673a;&#x534f;&#x4f5c;&#x3001;&#x4e92;&#x76f8;&#x589e;&#x5f3a;&#x201d;&#x4e3a;&#x6838;&#x5fc3;&#x7406;&#x5ff5;&#x3002;&#x5b83;&#x652f;&#x6301;&#x901a;&#x8fc7; Agent &#x5b9e;&#x73b0;&#x81ea;&#x4e3b;&#x62c6;&#x89e3;&#x9700;&#x6c42;&#x548c;&#x591a;&#x6b65;&#x9aa4;&#x7684;&#x81ea;&#x52a8;&#x5316;&#x7f16;&#x7a0b;&#x4efb;&#x52a1;&#x3002;","children":[],"payload":{"tag":"li","lines":"684,685"}},{"content":"<a href=\"https://codebuddy.ca/\"><strong>CodeBuddy</strong></a>&#xff1a;&#x817e;&#x8baf;&#x63a8;&#x51fa;&#x7684; AI &#x7f16;&#x7a0b;&#x52a9;&#x624b;&#xff0c;&#x5176;&#x521b;&#x65b0;&#x7684;&#x201c;Craft&#x201d;&#x6a21;&#x5f0f;&#x80fd;&#x591f;&#x81ea;&#x4e3b;&#x7406;&#x89e3;&#x7528;&#x6237;&#x9700;&#x6c42;&#xff0c;&#x5b8c;&#x6210;&#x591a;&#x6587;&#x4ef6;&#x751a;&#x81f3;&#x6574;&#x4e2a;&#x5e94;&#x7528;&#x9879;&#x76ee;&#x7684;&#x751f;&#x6210;&#x548c;&#x6539;&#x5199;&#x3002;","children":[],"payload":{"tag":"li","lines":"685,687"}}],"payload":{"tag":"h5","lines":"678,679"}},{"content":"<strong>&#x6df1;&#x5ea6;&#x5de5;&#x4f5c;&#x6d41;&#x96c6;&#x6210;</strong>","children":[{"content":"1. &#x521b;&#x5efa; <code>app/product/page.tsx</code> (RSC &#x7ec4;&#x4ef6;)","children":[],"payload":{"tag":"li","lines":"691,692","listIndex":1}},{"content":"2. &#x751f;&#x6210; <code>sql/schema.sql</code> (&#x8fb9;&#x7f18;&#x6570;&#x636e;&#x5e93;&#x8868;&#x7ed3;&#x6784;)","children":[],"payload":{"tag":"li","lines":"692,693","listIndex":2}},{"content":"3. &#x7f16;&#x5199; <code>e2e/product.spec.ts</code> (Playwright AI &#x751f;&#x6210;&#x7684;&#x7aef;&#x5230;&#x7aef;&#x6d4b;&#x8bd5;)","children":[],"payload":{"tag":"li","lines":"693,694","listIndex":3}},{"content":"4. &#x63d0;&#x4ea4; PR &#x5e76;&#x9644;&#x4e0a;&#x6027;&#x80fd;&#x9884;&#x7b97;&#x62a5;&#x544a; (LCP &lt; 1.2s, &#x96f6; JS &#x4e0b;&#x53d1;)","children":[],"payload":{"tag":"li","lines":"694,696","listIndex":4}}],"payload":{"tag":"h5","lines":"687,688"}},{"content":"<strong>&#x547d;&#x4ee4;&#x884c; AI &#x5de5;&#x5177;&#xff1a;&#x7ec8;&#x7aef;&#x91cc;&#x7684;&#x667a;&#x80fd;&#x4f19;&#x4f34;</strong>","children":[{"content":"<a href=\"https://openai.com/codex\"><strong>Codex</strong></a>&#xff1a;&#x7531; OpenAI &#x63a8;&#x51fa;&#x7684;&#x547d;&#x4ee4;&#x884c;&#x7f16;&#x7a0b;&#x52a9;&#x624b;&#xff0c;&#x662f;&#x4ee3;&#x7801;&#x751f;&#x6210;&#x6a21;&#x578b;&#x7684;&#x96c6;&#x5927;&#x6210;&#x8005;&#x3002;&#x73b0;&#x4ee3; Codex &#x5df2;&#x8fdb;&#x5316;&#x4e3a;&#x201c;&#x81ea;&#x52a8;&#x5316;&#x8f6f;&#x4ef6;&#x5de5;&#x7a0b;&#x5e08;&#x201d;&#xff0c;&#x80fd;&#x591f;&#x7406;&#x89e3;&#x6574;&#x4e2a;&#x4ee3;&#x7801;&#x5e93;&#x7684;&#x67b6;&#x6784;&#x4e0a;&#x4e0b;&#x6587;&#xff0c;&#x6267;&#x884c;&#x591a;&#x6b65;&#x9aa4;&#x4efb;&#x52a1;&#x3002;&#x5b83;&#x4e0d;&#x4ec5;&#x652f;&#x6301;&#x81ea;&#x7136;&#x8bed;&#x8a00;&#x751f;&#x6210;&#x4ee3;&#x7801;&#xff0c;&#x66f4;&#x80fd;&#x81ea;&#x4e3b;&#x8fd0;&#x884c;&#x6d4b;&#x8bd5;&#x3001;&#x4fee;&#x590d;&#x9519;&#x8bef;&#x3001;&#x4f18;&#x5316;&#x6027;&#x80fd;&#xff0c;&#x5e76;&#x901a;&#x8fc7;&#x6a21;&#x578b;&#x4e0a;&#x4e0b;&#x6587;&#x534f;&#x8bae; (MCP) &#x4e0e; Git&#x3001;Docker&#x3001;&#x76d1;&#x63a7;&#x7cfb;&#x7edf;&#x7b49;&#x5916;&#x90e8;&#x5de5;&#x5177;&#x6df1;&#x5ea6;&#x96c6;&#x6210;&#x3002;Codex &#x64c5;&#x957f;&#x5904;&#x7406;&#x590d;&#x6742;&#x91cd;&#x6784;&#x3001;&#x8de8;&#x6a21;&#x5757;&#x529f;&#x80fd;&#x5f00;&#x53d1;&#x7b49;&#x9700;&#x8981;&#x5168;&#x5c40;&#x7406;&#x89e3;&#x7684;&#x573a;&#x666f;&#xff0c;&#x6210;&#x4e3a;&#x4f01;&#x4e1a;&#x5728;&#x5927;&#x578b;&#x9879;&#x76ee;&#x4e2d;&#x90e8;&#x7f72; AI &#x52a9;&#x624b;&#x7684;&#x9996;&#x9009;&#x65b9;&#x6848;&#x4e4b;&#x4e00;&#x3002;","children":[],"payload":{"tag":"li","lines":"704,705"}},{"content":"<a href=\"https://ai.google.dev/docs/gemini_cli\"><strong>Gemini CLI</strong></a>&#xff1a;Google &#x63a8;&#x51fa;&#x7684;&#x5b98;&#x65b9;&#x5f00;&#x6e90;&#x547d;&#x4ee4;&#x884c;&#x5de5;&#x5177;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x76f4;&#x63a5;&#x5728;&#x7ec8;&#x7aef;&#x4e2d;&#x4e0e; <a href=\"https://gemini.google.com/\">Gemini</a> &#x6a21;&#x578b;&#x4ea4;&#x4e92;&#x3002;&#x5b83;&#x652f;&#x6301;&#x591a;&#x8f6e;&#x5bf9;&#x8bdd;&#x3001;&#x4ee3;&#x7801;&#x751f;&#x6210;&#x4e0e;&#x89e3;&#x91ca;&#x3001;&#x6587;&#x4ef6;&#x5185;&#x5bb9;&#x5904;&#x7406;&#xff0c;&#x751a;&#x81f3;&#x53ef;&#x4ee5;&#x751f;&#x6210;&#x6216;&#x89e3;&#x91ca;&#x7cfb;&#x7edf;&#x547d;&#x4ee4;&#x3002;&#x8be5;&#x5de5;&#x5177;&#x63d0;&#x4f9b;&#x4e86;&#x975e;&#x5e38;&#x6177;&#x6168;&#x7684;&#x514d;&#x8d39;&#x914d;&#x989d;&#xff0c;&#x5e76;&#x652f;&#x6301;&#x901a;&#x8fc7;&#x914d;&#x7f6e; API &#x5bc6;&#x94a5;&#x6216;&#x8d2d;&#x4e70;&#x4e13;&#x4e1a;&#x7248;&#x4ee5;&#x83b7;&#x53d6;&#x66f4;&#x9ad8;&#x7528;&#x91cf;&#x3002;","children":[],"payload":{"tag":"li","lines":"705,706"}},{"content":"<a href=\"https://www.claude.com/product/claude-code\"><strong>Claude Code</strong></a>&#xff1a;&#x7531; Anthropic &#x516c;&#x53f8;&#x63a8;&#x51fa;&#x7684; CLI &#x5de5;&#x5177;&#xff0c;&#x540c;&#x6837;&#x8ba9;&#x5f00;&#x53d1;&#x8005;&#x80fd;&#x5728;&#x7ec8;&#x7aef;&#x4e2d;&#x76f4;&#x63a5;&#x4e0e; Claude &#x6a21;&#x578b;&#x8fdb;&#x884c;&#x4ea4;&#x4e92;&#x3002;&#x5b83;&#x5b9a;&#x4f4d;&#x4e3a;&#x201c;&#x81ea;&#x52a8;&#x5316; Agent&#x201d;&#xff0c;&#x4e0d;&#x4ec5;&#x80fd;&#x56de;&#x7b54;&#x4ee3;&#x7801;&#x95ee;&#x9898;&#xff0c;&#x8fd8;&#x80fd;&#x5904;&#x7406; <a href=\"https://git-scm.com/\">Git</a> &#x5de5;&#x4f5c;&#x6d41;&#xff08;&#x5982;&#x89e3;&#x51b3;&#x5408;&#x5e76;&#x51b2;&#x7a81;&#xff09;&#x3001;&#x6267;&#x884c;&#x548c;&#x4fee;&#x590d;&#x6d4b;&#x8bd5;&#x7b49;&#x3002;&#x5b83;&#x901a;&#x8fc7;&#x6a21;&#x578b;&#x4e0a;&#x4e0b;&#x6587;&#x534f;&#x8bae; (MCP) &#x652f;&#x6301;&#x63a5;&#x5165;&#x5916;&#x90e8;&#x5de5;&#x5177;&#xff0c;&#x6269;&#x5c55;&#x4e86;&#x5176;&#x80fd;&#x529b;&#x8fb9;&#x754c;&#x3002;Claude Code &#x8fd8;&#x64c5;&#x957f;&#x8c03;&#x7528; Codex&#x3002;","children":[],"payload":{"tag":"li","lines":"706,707"}},{"content":"<a href=\"https://qwen.aliyun.com/code\"><strong>Qwen Code</strong></a> (&#x901a;&#x4e49;&#x5343;&#x95ee;)&#xff1a;&#x963f;&#x91cc;&#x5df4;&#x5df4;&#x901a;&#x4e49;&#x5343;&#x95ee;&#x5927;&#x6a21;&#x578b;&#x4e5f;&#x63d0;&#x4f9b;&#x4e86;&#x76f8;&#x5e94;&#x7684;&#x547d;&#x4ee4;&#x884c;&#x5de5;&#x5177;&#xff0c;&#x65b9;&#x4fbf;&#x5f00;&#x53d1;&#x8005;&#x5728;&#x7ec8;&#x7aef;&#x73af;&#x5883;&#x4e2d;&#x5feb;&#x901f;&#x8c03;&#x7528;&#x5176;&#x80fd;&#x529b;&#x3002;","children":[],"payload":{"tag":"li","lines":"707,709"}}],"payload":{"tag":"h5","lines":"700,701"}},{"content":"<strong>AI &#x9a71;&#x52a8;&#x7684;&#x8d28;&#x91cf;&#x4fdd;&#x969c;</strong>","children":[{"content":"<strong>&#x81ea;&#x52a8;&#x5316;&#x6d4b;&#x8bd5;&#x751f;&#x6210;</strong>","children":[],"payload":{"tag":"h6","lines":"715,716"}},{"content":"<strong>&#x89c6;&#x89c9;&#x56de;&#x5f52;&#x4e0e;&#x6027;&#x80fd;&#x95e8;&#x7981;</strong>","children":[],"payload":{"tag":"h6","lines":"719,720"}}],"payload":{"tag":"h5","lines":"713,714"}},{"content":"<strong>AI &#x5728;&#x67b6;&#x6784;&#x4e0e;&#x5408;&#x89c4;&#x4e2d;&#x7684;&#x89d2;&#x8272;</strong>","children":[{"content":"<strong>&#x67b6;&#x6784;&#x51b3;&#x7b56;&#x5ba1;&#x67e5;</strong>","children":[{"content":"&#x5728; RSC &#x7ec4;&#x4ef6;&#x4e2d;&#x8bef;&#x7528; <code>useState</code> &#x6216; <code>onClick</code>&#xff0c;&#x7acb;&#x5373;&#x63d0;&#x793a;&#x9700;&#x6807;&#x8bb0; <code>&apos;use client&apos;</code>","children":[],"payload":{"tag":"li","lines":"729,730"}},{"content":"&#x68c0;&#x6d4b;&#x5230;&#x672a;&#x52a0; <code>partitioned: true</code> &#x7684;&#x8de8;&#x7ad9; Cookie&#xff0c;&#x81ea;&#x52a8;&#x6807;&#x6ce8; GDPR &#x98ce;&#x9669;","children":[],"payload":{"tag":"li","lines":"730,731"}},{"content":"&#x53d1;&#x73b0;&#x786c;&#x7f16;&#x7801; API &#x5bc6;&#x94a5;&#xff0c;&#x5efa;&#x8bae;&#x6539;&#x7528;&#x8fb9;&#x7f18;&#x73af;&#x5883;&#x53d8;&#x91cf;","children":[],"payload":{"tag":"li","lines":"731,733"}}],"payload":{"tag":"h6","lines":"725,726"}},{"content":"<strong>&#x9690;&#x79c1;&#x5408;&#x89c4;&#x8f85;&#x52a9;</strong>","children":[],"payload":{"tag":"h6","lines":"733,734"}}],"payload":{"tag":"h5","lines":"723,724"}}],"payload":{"tag":"h4","lines":"665,666"}}],"payload":{"tag":"h3","lines":"640,641"}},{"content":"<strong>&#x6d4f;&#x89c8;&#x5668;&#x5f00;&#x53d1;&#x8005;&#x5de5;&#x5177;&#xff1a;&#x8c03;&#x8bd5;&#x548c;&#x68c0;&#x67e5;</strong>","children":[],"payload":{"tag":"h3","lines":"739,740"}},{"content":"<strong>&#x4ece;&#x8bbe;&#x8ba1;&#x5230;&#x4ee3;&#x7801;&#x7684;&#x6865;&#x6881;&#xff1a;&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x7684;&#x8bbe;&#x8ba1;&#x534f;&#x4f5c;&#x5b9e;&#x8df5;</strong>","children":[{"content":"<strong>UI/UX &#x8bbe;&#x8ba1;&#x5de5;&#x5177;&#xff1a;Figma &amp; Sketch</strong> - &#x8bbe;&#x8ba1;&#x7684;&#x201c;&#x6e90;&#x7801;&#x201d;","children":[{"content":"<strong>&#x5ba1;&#x67e5;&#x6a21;&#x5f0f; (Inspect Mode)</strong>&#xff1a;&#x8fd9;&#x662f;&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x6700;&#x91cd;&#x8981;&#x7684;&#x529f;&#x80fd;&#x3002;&#x5728; Figma &#x7684;&#x201c;Dev Mode&#x201d;&#x6216; Sketch &#x7684;&#x201c;Inspect&#x201d;&#x6807;&#x7b7e;&#x9875;&#x4e2d;&#xff0c;&#x4f60;&#x53ef;&#x4ee5;&#x70b9;&#x51fb;&#x4efb;&#x4f55;&#x8bbe;&#x8ba1;&#x5143;&#x7d20;&#xff08;&#x6309;&#x94ae;&#x3001;&#x6587;&#x672c;&#x3001;&#x56fe;&#x6807;&#xff09;&#xff0c;&#x5e76;&#x7acb;&#x5373;&#x83b7;&#x5f97;&#x5176;&#x8be6;&#x7ec6;&#x7684; CSS &#x5c5e;&#x6027;&#xff1a;","children":[],"payload":{"tag":"li","lines":"755,756"}},{"content":"<strong>&#x5c3a;&#x5bf8;&#x4e0e;&#x95f4;&#x8ddd;</strong>&#xff1a;width, height, padding, margin &#x4ee5;&#x53ca;&#x5143;&#x7d20;&#x95f4;&#x7684;&#x8ddd;&#x79bb;&#x3002;","children":[],"payload":{"tag":"li","lines":"756,757"}},{"content":"<strong>&#x6392;&#x7248;</strong>&#xff1a;font-family, font-size, font-weight, line-height, color&#x3002;","children":[],"payload":{"tag":"li","lines":"757,758"}},{"content":"<strong>&#x6837;&#x5f0f;</strong>&#xff1a;background-color, border-radius, box-shadow&#x3002;","children":[],"payload":{"tag":"li","lines":"758,759"}},{"content":"<strong>&#x5e03;&#x5c40;</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x4f7f;&#x7528; Auto Layout&#xff08;Figma&#xff09;&#x6216; Smart Layout&#xff08;Sketch&#xff09;&#x7684;&#x5143;&#x7d20;&#xff0c;&#x53ef;&#x4ee5;&#x6e05;&#x6670;&#x5730;&#x770b;&#x5230;&#x5176;&#x5e03;&#x5c40;&#x6a21;&#x5f0f;&#xff0c;&#x8fd9;&#x901a;&#x5e38;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x6620;&#x5c04;&#x5230; CSS Flexbox &#x6216; Grid &#x7684;&#x5c5e;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"759,760"}},{"content":"<strong>&#x7ec4;&#x4ef6; (Components) &#x4e0e;&#x53d8;&#x91cf; (Variables)</strong>&#xff1a;&#x8fd9;&#x662f;&#x5b9e;&#x73b0;<strong>&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff08;Design System&#xff09;</strong> &#x7684;&#x5173;&#x952e;&#x3002;&#x5f53;&#x8bbe;&#x8ba1;&#x5e08;&#x5c06;&#x4e00;&#x4e2a;&#x6309;&#x94ae;&#x521b;&#x5efa;&#x4e3a;&#x201c;&#x7ec4;&#x4ef6;&#x201d;&#x65f6;&#xff0c;&#x4f60;&#x5728;&#x4ee3;&#x7801;&#x4e2d;&#x4e5f;&#x5e94;&#x8be5;&#x521b;&#x5efa;&#x4e00;&#x4e2a;&#x5bf9;&#x5e94;&#x7684; React/Vue &#x7ec4;&#x4ef6;&#x3002;Figma &#x7684;&#x201c;Variables&#x201d;&#xff08;&#x53d8;&#x91cf;&#xff09;&#x529f;&#x80fd;&#x66f4;&#x662f;&#x524d;&#x7aef;&#x7684;&#x798f;&#x97f3;&#xff0c;&#x5b83;&#x5b9a;&#x4e49;&#x4e86;&#x8bbe;&#x8ba1;&#x4e2d;&#x7684;&#x201c;&#x4ee4;&#x724c;&#xff08;Tokens&#xff09;&#x201d;&#xff0c;&#x5982; color-primary-500 &#x6216; spacing-md&#x3002;&#x8fd9;&#x4e9b;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x6620;&#x5c04;&#x4e3a;&#x4f60;&#x4ee3;&#x7801;&#x4e2d;&#x7684; CSS &#x53d8;&#x91cf;&#xff08;--color-primary-500&#xff09;&#x6216; Tailwind/Styled-Components &#x4e3b;&#x9898;&#x5bf9;&#x8c61;&#x4e2d;&#x7684;&#x503c;&#xff0c;&#x786e;&#x4fdd;&#x8bbe;&#x8ba1;&#x4e0e;&#x4ee3;&#x7801;&#x7684;&#x9ad8;&#x5ea6;&#x4e00;&#x81f4;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"760,761"}},{"content":"<strong>&#x539f;&#x578b; (Prototyping)</strong>&#xff1a;&#x4e0d;&#x8981;&#x5ffd;&#x89c6;&#x539f;&#x578b;&#x529f;&#x80fd;&#x3002;&#x901a;&#x8fc7;&#x70b9;&#x51fb;&#x539f;&#x578b;&#xff0c;&#x4f60;&#x53ef;&#x4ee5;&#x4eb2;&#x8eab;&#x4f53;&#x9a8c;&#x8bbe;&#x8ba1;&#x5e08;&#x6784;&#x60f3;&#x7684;&#x7528;&#x6237;&#x6d41;&#x7a0b;&#x3001;&#x9875;&#x9762;&#x8df3;&#x8f6c;&#x3001;&#x6a21;&#x6001;&#x6846;&#x5f39;&#x51fa;&#x65b9;&#x5f0f;&#x548c;&#x5fae;&#x4ea4;&#x4e92;&#x52a8;&#x753b;&#x3002;&#x8fd9;&#x6bd4;&#x9605;&#x8bfb;&#x9759;&#x6001;&#x6587;&#x6863;&#x80fd;&#x66f4;&#x76f4;&#x89c2;&#x5730;&#x7406;&#x89e3;&#x529f;&#x80fd;&#x9700;&#x6c42;&#x548c;&#x8fc7;&#x6e21;&#x6548;&#x679c;&#x3002;","children":[],"payload":{"tag":"li","lines":"761,762"}},{"content":"<strong>&#x8d44;&#x6e90;&#x5bfc;&#x51fa; (Asset Export)</strong>&#xff1a;&#x4f60;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x4ece;&#x8bbe;&#x8ba1;&#x7a3f;&#x4e2d;&#x4ee5;&#x591a;&#x79cd;&#x683c;&#x5f0f;&#xff08;SVG, PNG, JPG&#xff09;&#x548c;&#x5206;&#x8fa8;&#x7387;&#xff08;@1x, @2x, @3x&#xff09;&#x5bfc;&#x51fa;&#x6240;&#x9700;&#x7684;&#x4efb;&#x4f55;&#x8d44;&#x6e90;&#xff08;&#x56fe;&#x6807;&#x3001;&#x56fe;&#x7247;&#xff09;&#x3002;&#x5bf9;&#x4e8e;&#x56fe;&#x6807;&#xff0c;&#x59cb;&#x7ec8;&#x4f18;&#x5148;&#x9009;&#x62e9;&#x5bfc;&#x51fa;&#x4e3a; SVG&#xff0c;&#x4ee5;&#x4fdd;&#x8bc1;&#x53ef;&#x4f38;&#x7f29;&#x6027;&#x548c;&#x6e05;&#x6670;&#x5ea6;&#x3002;","children":[],"payload":{"tag":"li","lines":"762,764"}}],"payload":{"tag":"h4","lines":"747,748"}},{"content":"<strong>&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x5fc5;&#x77e5;&#x5fc5;&#x4f1a;&#x7684; Figma &#x6280;&#x5de7;</strong>","children":[{"content":"<strong>&#x4e00;&#x3001;&#x6838;&#x5fc3;&#x5ba1;&#x67e5;&#x4e0e;&#x4fe1;&#x606f;&#x63d0;&#x53d6; (Dev Mode)</strong>","children":[{"content":"<strong>&#x5207;&#x6362;&#x5230;&#x5f00;&#x53d1;&#x6a21;&#x5f0f; (Dev Mode):</strong> &#x6c38;&#x8fdc;&#x4f18;&#x5148;&#x4f7f;&#x7528;&#x4e3a;&#x5f00;&#x53d1;&#x8005;&#x8bbe;&#x8ba1;&#x7684;&#x201c;&#x5f00;&#x53d1;&#x6a21;&#x5f0f;&#x201d;&#xff0c;&#x5b83;&#x63d0;&#x4f9b;&#x4e86;&#x66f4;&#x805a;&#x7126;&#x3001;&#x66f4;&#x9ad8;&#x6548;&#x7684;&#x4fe1;&#x606f;&#x83b7;&#x53d6;&#x4f53;&#x9a8c;&#x3002;","children":[],"payload":{"tag":"li","lines":"768,769"}},{"content":"<strong>&#x5c3a;&#x5bf8;&#x4e0e;&#x95f4;&#x8ddd;&#x6d4b;&#x91cf;&#xff1a;</strong>","children":[{"content":"&#x9009;&#x4e2d;&#x5143;&#x7d20;&#x76f4;&#x63a5;&#x67e5;&#x770b;&#x5176; <code>width</code> &#x548c; <code>height</code>&#x3002;","children":[],"payload":{"tag":"li","lines":"770,771"}},{"content":"&#x9009;&#x4e2d;&#x4e00;&#x4e2a;&#x5143;&#x7d20;&#xff0c;&#x6309;&#x4f4f; <code>Alt</code> (Windows) / <code>Option</code> (Mac)&#xff0c;&#x518d;&#x5c06;&#x9f20;&#x6807;&#x60ac;&#x505c;&#x5728;&#x53e6;&#x4e00;&#x5143;&#x7d20;&#x4e0a;&#xff0c;&#x53ef;&#x5feb;&#x901f;&#x6d4b;&#x91cf;&#x4e24;&#x8005;&#x95f4;&#x8ddd;&#x3002;","children":[],"payload":{"tag":"li","lines":"771,772"}}],"payload":{"tag":"li","lines":"769,772"}},{"content":"<strong>&#x6837;&#x5f0f;&#x5c5e;&#x6027;&#x83b7;&#x53d6;&#xff1a;</strong>","children":[{"content":"&#x5728;&#x5f00;&#x53d1;&#x6a21;&#x5f0f;&#x53f3;&#x4fa7;&#x9762;&#x677f;&#xff0c;&#x76f4;&#x63a5;&#x67e5;&#x770b;&#x5e76;&#x590d;&#x5236;&#x5143;&#x7d20;&#x7684; CSS &#x5c5e;&#x6027;&#xff0c;&#x5982; <code>color</code>, <code>background</code>, <code>border</code>, <code>border-radius</code>, <code>box-shadow</code> &#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"773,774"}}],"payload":{"tag":"li","lines":"772,774"}},{"content":"<strong>&#x6392;&#x7248;&#x4fe1;&#x606f;&#x63d0;&#x53d6;&#xff1a;</strong>","children":[{"content":"&#x83b7;&#x53d6;&#x7cbe;&#x786e;&#x7684;&#x6392;&#x7248;&#x4fe1;&#x606f;&#xff0c;&#x5305;&#x62ec; <code>font-family</code>, <code>font-size</code>, <code>font-weight</code>, <code>line-height</code>, <code>letter-spacing</code>&#x3002;","children":[],"payload":{"tag":"li","lines":"775,776"}}],"payload":{"tag":"li","lines":"774,776"}},{"content":"<strong>&#x7406;&#x89e3;&#x81ea;&#x52a8;&#x5e03;&#x5c40; (Auto Layout):</strong>","children":[{"content":"&#x8bc6;&#x522b;&#x4f7f;&#x7528;&#x4e86;&#x201c;&#x81ea;&#x52a8;&#x5e03;&#x5c40;&#x201d;&#x7684;&#x5bb9;&#x5668;&#xff0c;&#x5176;&#x5e03;&#x5c40;&#x65b9;&#x5f0f;&#xff08;&#x65b9;&#x5411;&#x3001;&#x95f4;&#x8ddd;&#x3001;&#x5bf9;&#x9f50;&#x65b9;&#x5f0f;&#xff09;&#x901a;&#x5e38;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x6620;&#x5c04;&#x4e3a; <strong>CSS Flexbox</strong> &#x5c5e;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"777,778"}}],"payload":{"tag":"li","lines":"776,778"}},{"content":"<strong>&#x4ee3;&#x7801;&#x7247;&#x6bb5;&#x53c2;&#x8003;&#xff1a;</strong>","children":[{"content":"&#x76f4;&#x63a5;&#x590d;&#x5236;&#x5f00;&#x53d1;&#x6a21;&#x5f0f;&#x751f;&#x6210;&#x7684; CSS&#x3001;iOS &#x6216; Android &#x4ee3;&#x7801;&#x7247;&#x6bb5;&#xff0c;&#x4f46;&#x5207;&#x8bb0;&#xff1a;<strong>&#x4ec5;&#x4f5c;&#x4e3a;&#x53c2;&#x8003;&#xff0c;&#x4e0d;&#x53ef;&#x76f4;&#x63a5;&#x7528;&#x4e8e;&#x751f;&#x4ea7;</strong>&#x3002;&#x9700;&#x81ea;&#x884c;&#x5224;&#x65ad;&#x5e76;&#x6e05;&#x7406;&#xff0c;&#x4ee5;&#x7b26;&#x5408;&#x9879;&#x76ee;&#x4ee3;&#x7801;&#x89c4;&#x8303;&#x3002;","children":[],"payload":{"tag":"li","lines":"779,781"}}],"payload":{"tag":"li","lines":"778,781"}}],"payload":{"tag":"h5","lines":"766,767"}},{"content":"<strong>&#x4e8c;&#x3001;&#x8d44;&#x6e90;&#x5bfc;&#x51fa; (Asset Exporting)</strong>","children":[{"content":"<strong>&#x9009;&#x62e9;&#x6b63;&#x786e;&#x7684;&#x5bfc;&#x51fa;&#x683c;&#x5f0f;&#xff1a;</strong>","children":[{"content":"<strong>&#x56fe;&#x6807; (Icons):</strong> &#x59cb;&#x7ec8;&#x4f18;&#x5148;&#x9009;&#x62e9;&#x5bfc;&#x51fa;&#x4e3a; <strong>SVG</strong> &#x683c;&#x5f0f;&#xff0c;&#x4ee5;&#x4fdd;&#x8bc1;&#x53ef;&#x4f38;&#x7f29;&#x6027;&#x548c;&#x6e05;&#x6670;&#x5ea6;&#x3002;","children":[],"payload":{"tag":"li","lines":"784,785"}},{"content":"<strong>&#x56fe;&#x7247; (Images):</strong> &#x6839;&#x636e;&#x9700;&#x6c42;&#x9009;&#x62e9; <code>PNG</code> (&#x9700;&#x8981;&#x900f;&#x660e;&#x80cc;&#x666f;) &#x6216; <code>JPG</code> (&#x65e0;&#x9700;&#x900f;&#x660e;&#x80cc;&#x666f;)&#x3002;","children":[],"payload":{"tag":"li","lines":"785,786"}}],"payload":{"tag":"li","lines":"783,786"}},{"content":"<strong>&#x5904;&#x7406;&#x4e0d;&#x540c;&#x5c4f;&#x5e55;&#x5bc6;&#x5ea6;&#xff1a;</strong>","children":[{"content":"&#x5229;&#x7528;&#x5bfc;&#x51fa;&#x9009;&#x9879;&#x4e2d;&#x7684; <code>@2x</code>, <code>@3x</code> &#x8bbe;&#x7f6e;&#xff0c;&#x4e00;&#x952e;&#x5bfc;&#x51fa;&#x9002;&#x7528;&#x4e8e;&#x9ad8;&#x5206;&#x5c4f;&#x7684;&#x591a;&#x79cd;&#x5206;&#x8fa8;&#x7387;&#x8d44;&#x6e90;&#x3002;","children":[],"payload":{"tag":"li","lines":"787,788"}}],"payload":{"tag":"li","lines":"786,788"}},{"content":"<strong>&#x6279;&#x91cf;&#x5bfc;&#x51fa;&#xff1a;</strong>","children":[{"content":"&#x5728;&#x5bfc;&#x51fa;&#x9762;&#x677f;&#x4e2d;&#x4e00;&#x6b21;&#x6027;&#x9009;&#x62e9;&#x5e76;&#x5bfc;&#x51fa;&#x591a;&#x4e2a;&#x8d44;&#x6e90;&#xff0c;&#x63d0;&#x9ad8;&#x6548;&#x7387;&#x3002;","children":[],"payload":{"tag":"li","lines":"789,791"}}],"payload":{"tag":"li","lines":"788,791"}}],"payload":{"tag":"h5","lines":"781,782"}},{"content":"<strong>&#x4e09;&#x3001;&#x7ec4;&#x4ef6;&#x4e0e;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x601d;&#x7ef4; (Components &amp; Design System)</strong>","children":[{"content":"<strong>&#x8bc6;&#x522b;&#x4e3b;&#x7ec4;&#x4ef6;&#x4e0e;&#x5b9e;&#x4f8b;&#xff1a;</strong>","children":[{"content":"&#x5b66;&#x4f1a;&#x533a;&#x5206;&#x201c;&#x4e3b;&#x7ec4;&#x4ef6;&#x201d;&#xff08;Master Component&#xff09;&#x548c;&#x5b83;&#x7684;&#x201c;&#x5b9e;&#x4f8b;&#x201d;&#xff08;Instance&#xff09;&#x3002;&#x7406;&#x89e3;&#x4e3b;&#x7ec4;&#x4ef6;&#x662f;&#x201c;&#x6a21;&#x677f;&#x201d;&#xff0c;&#x5b9e;&#x4f8b;&#x662f;&#x201c;&#x5f15;&#x7528;&#x201d;&#xff0c;&#x8fd9;&#x6709;&#x52a9;&#x4e8e;&#x4f60;&#x5728;&#x4ee3;&#x7801;&#x4e2d;&#x521b;&#x5efa;&#x5bf9;&#x5e94;&#x7684; React/Vue &#x7ec4;&#x4ef6;&#x3002;","children":[],"payload":{"tag":"li","lines":"794,795"}}],"payload":{"tag":"li","lines":"793,795"}},{"content":"<strong>&#x8ffd;&#x8e2a;&#x8bbe;&#x8ba1;&#x4ee4;&#x724c; (Design Tokens):</strong>","children":[{"content":"&#x5173;&#x6ce8;&#x53f3;&#x4fa7;&#x9762;&#x677f;&#x7684;&#x201c;Variables&#x201d;&#xff08;&#x53d8;&#x91cf;&#xff09;&#x6216;&#x201c;Styles&#x201d;&#xff08;&#x6837;&#x5f0f;&#xff09;&#x90e8;&#x5206;&#x3002;&#x8bbe;&#x8ba1;&#x5e08;&#x5b9a;&#x4e49;&#x7684;&#x989c;&#x8272;&#x3001;&#x5b57;&#x4f53;&#x3001;&#x95f4;&#x8ddd;&#x7b49;&#x53d8;&#x91cf;&#xff0c;&#x5c31;&#x662f;&#x4f60;&#x9700;&#x8981;&#x5bf9;&#x63a5;&#x5230;&#x4ee3;&#x7801;&#x4e2d; <strong>CSS &#x53d8;&#x91cf;</strong> &#x6216; <strong>&#x4e3b;&#x9898; (Theme) &#x5bf9;&#x8c61;</strong> &#x7684;&#x201c;&#x8bbe;&#x8ba1;&#x4ee4;&#x724c;&#x201d;&#x3002;","children":[],"payload":{"tag":"li","lines":"796,797"}}],"payload":{"tag":"li","lines":"795,797"}},{"content":"<strong>&#x67e5;&#x770b;&#x7ec4;&#x4ef6;&#x5c5e;&#x6027; (Component Properties):</strong>","children":[{"content":"&#x68c0;&#x67e5;&#x7ec4;&#x4ef6;&#x7684;&#x53d8;&#x4f53;&#xff08;Variants&#xff09;&#x3001;&#x5e03;&#x5c14;&#x503c;&#xff08;Boolean&#xff09;&#x3001;&#x6587;&#x672c;&#xff08;Text&#xff09;&#x7b49;&#x5c5e;&#x6027;&#xff0c;&#x7406;&#x89e3;&#x5176;&#x4e0d;&#x540c;&#x72b6;&#x6001;&#xff0c;&#x8fd9;&#x5bf9;&#x5e94;&#x4f60;&#x4ee3;&#x7801;&#x4e2d;&#x7ec4;&#x4ef6;&#x7684; <code>props</code>&#x3002;","children":[],"payload":{"tag":"li","lines":"798,800"}}],"payload":{"tag":"li","lines":"797,800"}}],"payload":{"tag":"h5","lines":"791,792"}},{"content":"<strong>&#x56db;&#x3001;&#x539f;&#x578b;&#x4e0e;&#x4ea4;&#x4e92;&#x7406;&#x89e3; (Prototyping &amp; Interaction)</strong>","children":[{"content":"<strong>&#x64ad;&#x653e;&#x539f;&#x578b;&#xff1a;</strong>","children":[{"content":"&#x70b9;&#x51fb;&#x201c;&#x6f14;&#x793a;&#x201d;&#xff08;Present/Play&#xff09;&#x6309;&#x94ae;&#xff0c;&#x4eb2;&#x8eab;&#x4f53;&#x9a8c;&#x8bbe;&#x8ba1;&#x5e08;&#x6784;&#x60f3;&#x7684;&#x7528;&#x6237;&#x6d41;&#x7a0b;&#x3001;&#x9875;&#x9762;&#x8df3;&#x8f6c;&#x548c;&#x5fae;&#x4ea4;&#x4e92;&#xff0c;&#x8fd9;&#x6bd4;&#x770b;&#x9759;&#x6001;&#x9875;&#x9762;&#x66f4;&#x76f4;&#x89c2;&#x3002;","children":[],"payload":{"tag":"li","lines":"803,804"}}],"payload":{"tag":"li","lines":"802,804"}},{"content":"<strong>&#x67e5;&#x770b;&#x4ea4;&#x4e92;&#x8fde;&#x7ebf;&#xff1a;</strong>","children":[{"content":"&#x5728;&#x201c;&#x539f;&#x578b;&#x201d;&#xff08;Prototype&#xff09;&#x6807;&#x7b7e;&#x9875;&#x4e0b;&#xff0c;&#x53ef;&#x4ee5;&#x6e05;&#x6670;&#x5730;&#x770b;&#x5230;&#x5143;&#x7d20;&#x4e4b;&#x95f4;&#x7684;&#x4ea4;&#x4e92;&#x201c;&#x8fde;&#x7ebf;&#x201d;&#xff0c;&#x4e86;&#x89e3;&#x70b9;&#x51fb;&#x3001;&#x60ac;&#x505c;&#x7b49;&#x64cd;&#x4f5c;&#x4f1a;&#x89e6;&#x53d1;&#x4ec0;&#x4e48;&#x6548;&#x679c;&#xff08;&#x5982;&#x9875;&#x9762;&#x8df3;&#x8f6c;&#x3001;&#x5f39;&#x7a97;&#x7b49;&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"805,807"}}],"payload":{"tag":"li","lines":"804,807"}}],"payload":{"tag":"h5","lines":"800,801"}},{"content":"<strong>&#x4e94;&#x3001;&#x534f;&#x4f5c;&#x4e0e;&#x6c9f;&#x901a; (Collaboration)</strong>","children":[{"content":"<strong>&#x4f7f;&#x7528;&#x8bc4;&#x8bba;&#x529f;&#x80fd;&#xff1a;</strong>","children":[{"content":"&#x76f4;&#x63a5;&#x5728;&#x8bbe;&#x8ba1;&#x7a3f;&#x7684;&#x5177;&#x4f53;&#x4f4d;&#x7f6e;&#x201c;&#x9489;&#x201d;&#x4e0a;&#x4e00;&#x4e2a;&#x8bc4;&#x8bba;&#xff0c;&#x5411;&#x8bbe;&#x8ba1;&#x5e08;&#x6216;&#x4ea7;&#x54c1;&#x7ecf;&#x7406;&#x63d0;&#x51fa;&#x7cbe;&#x786e;&#x7684;&#x95ee;&#x9898;&#xff08;&#x4f8b;&#x5982;&#xff1a;&#x201c;&#x8fd9;&#x4e2a;&#x6309;&#x94ae;&#x7684; hover &#x6548;&#x679c;&#x662f;&#x4ec0;&#x4e48;&#xff1f;&#x201d;&#xff09;&#xff0c;&#x907f;&#x514d;&#x5728;&#x901a;&#x8baf;&#x8f6f;&#x4ef6;&#x4e2d;&#x4f4e;&#x6548;&#x6c9f;&#x901a;&#x3002;","children":[],"payload":{"tag":"li","lines":"810,812"}}],"payload":{"tag":"li","lines":"809,812"}}],"payload":{"tag":"h5","lines":"807,808"}}],"payload":{"tag":"h4","lines":"764,765"}},{"content":"<strong>&#x8bbe;&#x8ba1;&#x7a3f;&#x4ea4;&#x63a5;&#xff1a;Zeplin</strong> - &#x7ecf;&#x201c;&#x7f16;&#x8bd1;&#x201d;&#x7684;&#x4ea4;&#x4ed8;&#x4ea7;&#x7269;","children":[{"content":"<strong>&#x660e;&#x786e;&#x7684;&#x7248;&#x672c;&#x63a7;&#x5236;&#x548c;&#x5355;&#x4e00;&#x4e8b;&#x5b9e;&#x6765;&#x6e90; (Single Source of Truth)</strong>&#xff1a;Zeplin &#x7684;&#x6838;&#x5fc3;&#x4ef7;&#x503c;&#x5728;&#x4e8e;&#xff0c;&#x5b83;&#x786e;&#x4fdd;&#x5f00;&#x53d1;&#x8005;&#x770b;&#x5230;&#x7684;&#x6c38;&#x8fdc;&#x662f;&#x7ecf;&#x8fc7;&#x786e;&#x8ba4;&#x7684;&#x6700;&#x7ec8;&#x7248;&#x672c;&#x3002;&#x8bbe;&#x8ba1;&#x5e08;&#x53ef;&#x4ee5;&#x81ea;&#x7531;&#x5730;&#x5728; Figma &#x4e2d;&#x8fdb;&#x884c;&#x5b9e;&#x9a8c;&#xff0c;&#x800c;&#x4e0d;&#x4f1a;&#x5f71;&#x54cd;&#x5230;&#x5df2;&#x7ecf;&#x53d1;&#x5e03;&#x5230; Zeplin &#x7684;&#x5f00;&#x53d1;&#x4efb;&#x52a1;&#x3002;&#x6bcf;&#x4e2a;&#x753b;&#x677f;&#x90fd;&#x6709;&#x6e05;&#x6670;&#x7684;&#x7248;&#x672c;&#x5386;&#x53f2;&#xff0c;&#x907f;&#x514d;&#x4e86;&#x57fa;&#x4e8e;&#x9519;&#x8bef;&#x7248;&#x672c;&#x8fdb;&#x884c;&#x5f00;&#x53d1;&#x7684;&#x98ce;&#x9669;&#x3002;","children":[],"payload":{"tag":"li","lines":"820,821"}},{"content":"<strong>&#x5168;&#x5c40;&#x6837;&#x5f0f;&#x6307;&#x5357; (Global Styleguide)</strong>&#xff1a;Zeplin &#x4f1a;&#x81ea;&#x52a8;&#x4ece;&#x8bbe;&#x8ba1;&#x7a3f;&#x4e2d;&#x63d0;&#x53d6;&#x6240;&#x6709;&#x989c;&#x8272;&#x3001;&#x5b57;&#x4f53;&#x6837;&#x5f0f;&#x548c;&#x95f4;&#x8ddd;&#x4ee4;&#x724c;&#xff0c;&#x5e76;&#x751f;&#x6210;&#x4e00;&#x4e2a;&#x5168;&#x5c40;&#x6837;&#x5f0f;&#x6307;&#x5357;&#x9875;&#x9762;&#x3002;&#x5b83;&#x4f1a;&#x5c06;&#x8bbe;&#x8ba1;&#x7a3f;&#x4e2d;&#x7684;&#x6bcf;&#x4e2a;&#x5143;&#x7d20;&#x94fe;&#x63a5;&#x5230;&#x8fd9;&#x4e9b;&#x5168;&#x5c40;&#x6837;&#x5f0f;&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x5f53;&#x4f60;&#x70b9;&#x51fb;&#x6309;&#x94ae;&#x65f6;&#xff0c;&#x5b83;&#x4e0d;&#x4f1a;&#x53ea;&#x663e;&#x793a;&#x8272;&#x503c; <code>#007AFF</code>&#xff0c;&#x800c;&#x662f;&#x4f1a;&#x544a;&#x8bc9;&#x4f60;&#x5b83;&#x4f7f;&#x7528;&#x7684;&#x662f;&#x5168;&#x5c40;&#x989c;&#x8272; Primary Blue&#xff0c;&#x8fd9;&#x6781;&#x5927;&#x5730;&#x4fc3;&#x8fdb;&#x4e86;&#x4ee3;&#x7801;&#x7684;&#x89c4;&#x8303;&#x6027;&#x548c;&#x53ef;&#x7ef4;&#x62a4;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"821,822"}},{"content":"<strong>&#x7ec4;&#x4ef6;&#x9a71;&#x52a8;&#x5f00;&#x53d1;</strong>&#xff1a;Zeplin &#x540c;&#x6837;&#x4f1a;&#x5c55;&#x793a;&#x7ec4;&#x4ef6;&#x4fe1;&#x606f;&#xff0c;&#x5e76;&#x663e;&#x793a;&#x8be5;&#x7ec4;&#x4ef6;&#x5728;&#x9879;&#x76ee;&#x4e2d;&#x6240;&#x6709;&#x88ab;&#x4f7f;&#x7528;&#x5230;&#x7684;&#x5730;&#x65b9;&#x3002;&#x5b83;&#x8fd8;&#x53ef;&#x4ee5;&#x4e0e; Storybook &#x96c6;&#x6210;&#xff0c;&#x5c06;&#x8bbe;&#x8ba1;&#x7ec4;&#x4ef6;&#x76f4;&#x63a5;&#x94fe;&#x63a5;&#x5230;&#x4ee3;&#x7801;&#x4e2d;&#x5b9e;&#x73b0;&#x7684;&#x7ec4;&#x4ef6;&#x6587;&#x6863;&#xff0c;&#x5f62;&#x6210;&#x5b8c;&#x7f8e;&#x95ed;&#x73af;&#x3002;","children":[],"payload":{"tag":"li","lines":"822,823"}},{"content":"<strong>&#x4ee3;&#x7801;&#x7247;&#x6bb5;&#x4e0e;&#x96c6;&#x6210;</strong>&#xff1a;Zeplin &#x751f;&#x6210;&#x7684;&#x4ee3;&#x7801;&#x7247;&#x6bb5;&#x901a;&#x5e38;&#x66f4;&#x4e30;&#x5bcc;&#xff0c;&#x5e76;&#x652f;&#x6301;&#x4e3a;&#x4e0d;&#x540c;&#x6846;&#x67b6;&#xff08;&#x5982; <a href=\"https://reactnative.dev/\">React Native</a>&#xff09;&#x5b9a;&#x5236;&#x7684;&#x6269;&#x5c55;&#x3002;&#x5176;&#x5f3a;&#x5927;&#x7684; API &#x548c;&#x4e0e; Jira&#x3001;Slack&#x3001;VS Code &#x7684;&#x6df1;&#x5ea6;&#x96c6;&#x6210;&#xff0c;&#x53ef;&#x4ee5;&#x5c06;&#x8bbe;&#x8ba1;&#x89c4;&#x8303;&#x65e0;&#x7f1d;&#x5d4c;&#x5165;&#x5230;&#x5f00;&#x53d1;&#x8005;&#x7684;&#x65e5;&#x5e38;&#x5de5;&#x4f5c;&#x6d41;&#x4e2d;&#x3002;","children":[],"payload":{"tag":"li","lines":"823,824"}},{"content":"<strong>&#x7cbe;&#x51c6;&#x7684;&#x6ce8;&#x91ca;&#x4e0e;&#x6c9f;&#x901a;</strong>&#xff1a;&#x5728; Zeplin &#x4e2d;&#x7684;&#x6ce8;&#x91ca;&#x901a;&#x5e38;&#x66f4;&#x5177;&#x9488;&#x5bf9;&#x6027;&#xff0c;&#x4e13;&#x6ce8;&#x4e8e;&#x89e3;&#x51b3;&#x5f00;&#x53d1;&#x5b9e;&#x73b0;&#x4e2d;&#x7684;&#x5177;&#x4f53;&#x95ee;&#x9898;&#xff08;&#x201c;&#x8fd9;&#x4e2a;&#x8fb9;&#x8ddd;&#x5728;&#x79fb;&#x52a8;&#x7aef;&#x5e94;&#x8be5;&#x662f;&#x591a;&#x5c11;&#xff1f;&#x201d;&#xff09;&#xff0c;&#x5c06;&#x6280;&#x672f;&#x95ee;&#x9898;&#x4e0e; Figma &#x4e2d;&#x53ef;&#x80fd;&#x5b58;&#x5728;&#x7684;&#x65e9;&#x671f;&#x8bbe;&#x8ba1;&#x8ba8;&#x8bba;&#x5206;&#x79bb;&#x5f00;&#x3002;","children":[],"payload":{"tag":"li","lines":"824,826"}}],"payload":{"tag":"h4","lines":"812,813"}}],"payload":{"tag":"h3","lines":"743,744"}}],"payload":{"tag":"h2","lines":"443,444"}},{"content":"<strong>IV. &#x524d;&#x7aef;&#x6846;&#x67b6;&#x548c;&#x5e93;&#xff1a;&#x6784;&#x5efa;&#x73b0;&#x4ee3; UI</strong>","children":[{"content":"<strong>UI &#x6846;&#x67b6;&#x6982;&#x8ff0;&#xff1a;React&#x3001;Vue&#x3001;Angular&#x3001;Svelte&#x3001;SolidJS&#x3001;Lit</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x6d41;&#x884c; UI &#x6846;&#x67b6;&#x6bd4;&#x8f83; (React, Vue, Svelte, SolidJS)</strong>","children":[{"content":"<table data-lines=\"843,849\">\n<thead data-lines=\"843,844\">\n<tr data-lines=\"843,844\">\n<th style=\"text-align:left\">&#x6846;&#x67b6;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x8bbe;&#x8ba1;&#x54f2;&#x5b66;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</th>\n<th style=\"text-align:left\">&#x6027;&#x80fd;&#xff08;&#x8fd0;&#x884c;&#x65f6;/&#x5305;&#x5927;&#x5c0f;&#xff09;</th>\n<th style=\"text-align:left\">&#x751f;&#x6001;&#x7cfb;&#x7edf;&#x5927;&#x5c0f;</th>\n<th style=\"text-align:left\">&#x793e;&#x533a;&#x652f;&#x6301;</th>\n<th style=\"text-align:left\">&#x7406;&#x60f3;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"845,849\">\n<tr data-lines=\"845,846\">\n<td style=\"text-align:left\"><a href=\"https://react.dev/\"><strong>React</strong></a></td>\n<td style=\"text-align:left\">&#x865a;&#x62df; <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">DOM</a>&#xff0c;&#x7ec4;&#x4ef6;&#x5316;&#xff0c;&#x58f0;&#x660e;&#x5f0f;</td>\n<td style=\"text-align:left\">&#x8f83;&#x9661;&#x5ced;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;&#xff0c;&#x4f46;&#x53ef;&#x80fd;&#x8f83;&#x5927;&#x5305;&#x4f53;&#x79ef;</td>\n<td style=\"text-align:left\">&#x5e9e;&#x5927;</td>\n<td style=\"text-align:left\">&#x6d3b;&#x8dc3;&#x3001;&#x8d44;&#x6e90;&#x4e30;&#x5bcc;</td>\n<td style=\"text-align:left\">&#x5927;&#x578b;&#x590d;&#x6742;&#x5e94;&#x7528;&#xff0c;&#x4f01;&#x4e1a;&#x7ea7;&#x9879;&#x76ee;</td>\n</tr>\n<tr data-lines=\"846,847\">\n<td style=\"text-align:left\"><a href=\"https://vuejs.org/\"><strong>Vue</strong></a></td>\n<td style=\"text-align:left\">&#x6e10;&#x8fdb;&#x5f0f;&#xff0c;&#x6a21;&#x677f;&#x9a71;&#x52a8;&#xff0c;&#x53cc;&#x5411;&#x7ed1;&#x5b9a;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5e73;&#x7f13;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;&#xff0c;&#x521d;&#x59cb;&#x8bbe;&#x7f6e;&#x8f7b;&#x91cf;</td>\n<td style=\"text-align:left\">&#x6b63;&#x5728;&#x589e;&#x957f;</td>\n<td style=\"text-align:left\">&#x6d3b;&#x8dc3;&#x3001;&#x6587;&#x6863;&#x5168;&#x9762;</td>\n<td style=\"text-align:left\">&#x4e2d;&#x5c0f;&#x578b;&#x9879;&#x76ee;&#xff0c;&#x5feb;&#x901f;&#x539f;&#x578b;&#x5f00;&#x53d1;</td>\n</tr>\n<tr data-lines=\"847,848\">\n<td style=\"text-align:left\"><a href=\"https://svelte.dev/\"><strong>Svelte</strong></a></td>\n<td style=\"text-align:left\">&#x7f16;&#x8bd1;&#x65f6;&#xff0c;&#x65e0;&#x865a;&#x62df; <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">DOM</a>&#xff0c;&#x7ec6;&#x7c92;&#x5ea6;&#x54cd;&#x5e94;</td>\n<td style=\"text-align:left\">&#x6781;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x6781;&#x901f;&#xff0c;&#x5305;&#x4f53;&#x79ef;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x70ed;&#x60c5;&#x3001;&#x6b63;&#x5728;&#x589e;&#x957f;</td>\n<td style=\"text-align:left\">&#x6027;&#x80fd;&#x5173;&#x952e;&#x578b;&#x5e94;&#x7528;&#xff0c;&#x8f7b;&#x91cf;&#x7ea7;&#xff0c;&#x4fa7;&#x9879;&#x76ee;</td>\n</tr>\n<tr data-lines=\"848,849\">\n<td style=\"text-align:left\"><a href=\"https://www.solidjs.com/\"><strong>SolidJS</strong></a></td>\n<td style=\"text-align:left\">&#x7ec6;&#x7c92;&#x5ea6;&#x54cd;&#x5e94;&#xff0c;&#x65e0;&#x865a;&#x62df; <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">DOM</a></td>\n<td style=\"text-align:left\">&#x8f83;&#x5e73;&#x7f13;</td>\n<td style=\"text-align:left\">&#x6781;&#x901f;&#xff0c;&#x5305;&#x4f53;&#x79ef;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x6b63;&#x5728;&#x589e;&#x957f;</td>\n<td style=\"text-align:left\">&#x6027;&#x80fd;&#x5173;&#x952e;&#x578b;&#x5e94;&#x7528;&#xff0c;&#x590d;&#x6742; UI &#x66f4;&#x65b0;&#x9891;&#x7e41;&#x573a;&#x666f;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"843,849"}}],"payload":{"tag":"h4","lines":"841,842"}},{"content":"<strong>Web Components&#xff1a;&#x539f;&#x751f;&#x3001;&#x8de8;&#x6846;&#x67b6;&#x7684;&#x7ec4;&#x4ef6;&#x5316;&#x672a;&#x6765;</strong>","children":[{"content":"","children":[{"content":"1. \n<p data-lines=\"858,859\"><strong>Custom Elements (&#x81ea;&#x5b9a;&#x4e49;&#x5143;&#x7d20;)</strong>&#xff1a;&#x5b83;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x5b9a;&#x4e49;&#x81ea;&#x5df1;&#x7684; HTML &#x6807;&#x7b7e;&#x3002;&#x4f60;&#x53ef;&#x4ee5;&#x521b;&#x5efa;&#x4e00;&#x4e2a;&#x540d;&#x4e3a; <code>&lt;my-button&gt;</code> &#x7684;&#x6807;&#x7b7e;&#xff0c;&#x5e76;&#x4e3a;&#x5176;&#x8d4b;&#x4e88;&#x7279;&#x5b9a;&#x7684;&#x6837;&#x5f0f;&#x548c;&#x884c;&#x4e3a;&#x3002;&#x8fd9;&#x4f7f;&#x5f97; HTML &#x7684;&#x8bed;&#x4e49;&#x53ef;&#x4ee5;&#x88ab;&#x65e0;&#x9650;&#x6269;&#x5c55;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"858,860","listIndex":1}},{"content":"2. \n<p data-lines=\"860,861\"><strong>Shadow <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">DOM</a> (&#x5f71;&#x5b50; <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">DOM</a>)</strong>&#xff1a;&#x8fd9;&#x662f; Web Components &#x6700;&#x5177;&#x9769;&#x547d;&#x6027;&#x7684;&#x7279;&#x6027;&#x3002;&#x5b83;&#x63d0;&#x4f9b;&#x4e86;&#x4e00;&#x79cd;&#x5c06;&#x4e00;&#x4e2a;&#x72ec;&#x7acb;&#x7684;&#x3001;&#x201c;&#x9690;&#x85cf;&#x201d;&#x7684; DOM &#x6811;&#x9644;&#x52a0;&#x5230;&#x5143;&#x7d20;&#x4e0a;&#x7684;&#x80fd;&#x529b;&#x3002;&#x8fd9;&#x4e2a; Shadow DOM &#x5185;&#x90e8;&#x7684;<strong>&#x6837;&#x5f0f;&#x548c;&#x811a;&#x672c;&#x662f;&#x5b8c;&#x5168;&#x5c01;&#x88c5;&#x548c;&#x9694;&#x79bb;&#x7684;</strong>&#xff0c;&#x4e0d;&#x4f1a;&#x5f71;&#x54cd;&#x5230;&#x5916;&#x90e8;&#x9875;&#x9762;&#xff0c;&#x5916;&#x90e8;&#x9875;&#x9762;&#x7684;&#x6837;&#x5f0f;&#x4e5f;&#x4e0d;&#x4f1a;&#x610f;&#x5916;&#x5730;&#x6cc4;&#x9732;&#x8fdb;&#x6765;&#x3002;&#x5b83;&#x4ece;&#x6839;&#x672c;&#x4e0a;&#x89e3;&#x51b3;&#x4e86; CSS &#x5168;&#x5c40;&#x4f5c;&#x7528;&#x57df;&#x6c61;&#x67d3;&#x8fd9;&#x4e00;&#x56f0;&#x6270;&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x591a;&#x5e74;&#x7684;&#x987d;&#x75be;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x6d4f;&#x89c8;&#x5668;&#x539f;&#x751f;&#x7684;&#x6837;&#x5f0f;&#x5c01;&#x88c5;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"860,862","listIndex":2}},{"content":"3. \n<p data-lines=\"862,863\"><strong>HTML Templates (<code>&lt;template&gt;</code> &#x548c; <code>&lt;slot&gt;</code>)</strong>&#xff1a;<code>&lt;template&gt;</code> &#x6807;&#x7b7e;&#x5141;&#x8bb8;&#x6211;&#x4eec;&#x58f0;&#x660e;&#x4e00;&#x6bb5;&#x60f0;&#x6027;&#x7684;&#x3001;&#x76f4;&#x5230;&#x88ab;&#x6fc0;&#x6d3b;&#x65f6;&#x624d;&#x4f1a;&#x88ab;&#x6e32;&#x67d3;&#x7684; DOM &#x7247;&#x6bb5;&#x3002;<code>&lt;slot&gt;</code> &#x5143;&#x7d20;&#x5219;&#x662f;&#x4e00;&#x4e2a;&#x5360;&#x4f4d;&#x7b26;&#xff0c;&#x5141;&#x8bb8;&#x6211;&#x4eec;&#x5c06;&#x5916;&#x90e8;&#x7684; HTML &#x5185;&#x5bb9;&#x201c;&#x6295;&#x5f71;&#x201d;&#x5230;&#x7ec4;&#x4ef6;&#x7684; Shadow DOM &#x5185;&#x90e8;&#xff0c;&#x6781;&#x5927;&#x5730;&#x589e;&#x5f3a;&#x4e86;&#x7ec4;&#x4ef6;&#x7684;&#x7075;&#x6d3b;&#x6027;&#x548c;&#x53ef;&#x7ec4;&#x5408;&#x6027;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"862,864","listIndex":3}}],"payload":{"tag":"ol","lines":"858,864"}},{"content":"","children":[{"content":"\n<p data-lines=\"864,865\"><strong>&#x6838;&#x5fc3;&#x4f18;&#x52bf;&#xff1a;&#x771f;&#x6b63;&#x7684;&#x8de8;&#x6846;&#x67b6;&#x590d;&#x7528;&#x4e0e;&#x6280;&#x672f;&#x65e0;&#x5173;&#x6027;</strong>&#xff1a;&#x7531;&#x4e8e; Web Components &#x662f;&#x6d4f;&#x89c8;&#x5668;&#x539f;&#x751f;&#x6807;&#x51c6;&#xff0c;&#x7528;&#x5b83;&#x521b;&#x5efa;&#x7684;&#x7ec4;&#x4ef6;&#x4e0d;&#x4f9d;&#x8d56;&#x4e8e;&#x4efb;&#x4f55;&#x7279;&#x5b9a;&#x7684;&#x6846;&#x67b6;&#x3002;&#x4e00;&#x4e2a;&#x7528; Web Components &#x7f16;&#x5199;&#x7684;&#x7ec4;&#x4ef6;&#x5e93;&#xff0c;&#x53ef;&#x4ee5;&#x540c;&#x65f6;&#x5728; React&#x3001;Vue&#x3001;Angular &#x6216;&#x539f;&#x751f; JavaScript &#x9879;&#x76ee;&#x4e2d;&#x4f7f;&#x7528;&#xff0c;&#x800c;&#x65e0;&#x9700;&#x4efb;&#x4f55;&#x4fee;&#x6539;&#x3002;&#x8fd9;&#x5bf9;&#x4e8e;&#x6784;&#x5efa;&#x4f01;&#x4e1a;&#x7ea7;&#x7684;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x3001;&#x6216;&#x5e0c;&#x671b;&#x5728;&#x591a;&#x4e2a;&#x4e0d;&#x540c;&#x6280;&#x672f;&#x6808;&#x56e2;&#x961f;&#x95f4;&#x5171;&#x4eab; UI &#x7ec4;&#x4ef6;&#x7684;&#x573a;&#x666f;&#xff0c;&#x5177;&#x6709;&#x65e0;&#x4e0e;&#x4f26; - &#x4f26;&#x6bd4;&#x7684;&#x4f18;&#x52bf;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"864,866"}},{"content":"\n<p data-lines=\"866,867\"><strong>&#x751f;&#x6001;&#x4e0e;&#x672a;&#x6765;</strong>&#xff1a;&#x50cf; Google &#x7684; <strong>Lit</strong> &#x548c;&#x5fae;&#x8f6f;&#x7684; FAST &#x8fd9;&#x6837;&#x7684;&#x8f7b;&#x91cf;&#x7ea7;&#x5e93;&#xff0c;&#x8fdb;&#x4e00;&#x6b65;&#x7b80;&#x5316;&#x4e86;&#x7f16;&#x5199; Web Components &#x7684;&#x4f53;&#x9a8c;&#x3002;&#x968f;&#x7740;&#x6d4f;&#x89c8;&#x5668;&#x517c;&#x5bb9;&#x6027;&#x7684;&#x65e5;&#x76ca;&#x5b8c;&#x5584;&#x548c;&#x524d;&#x7aef;&#x751f;&#x6001;&#x5bf9;&#x201c;&#x6280;&#x672f;&#x6808;&#x65e0;&#x5173;&#x6027;&#x201d;&#x7684;&#x8ffd;&#x6c42;&#xff0c;Web Components &#x6b63;&#x4f5c;&#x4e3a;&#x4e00;&#x79cd;&#x9762;&#x5411;&#x672a;&#x6765;&#x7684;&#x3001;&#x53ef;&#x6301;&#x7eed;&#x7684;&#x7ec4;&#x4ef6;&#x5316;&#x65b9;&#x6848;&#xff0c;&#x53d7;&#x5230;&#x8d8a;&#x6765;&#x8d8a;&#x591a;&#x7684;&#x5173;&#x6ce8;&#x3002;&#x5b83;&#x4ee3;&#x8868;&#x4e86;&#x5c06;&#x7ec4;&#x4ef6;&#x5316;&#x80fd;&#x529b;&#x56de;&#x5f52;&#x5230; Web &#x5e73;&#x53f0;&#x672c;&#x8eab;&#x7684;&#x8d8b;&#x52bf;&#xff0c;&#x9884;&#x793a;&#x7740;&#x4e00;&#x4e2a;&#x66f4;&#x52a0;&#x6807;&#x51c6;&#x5316;&#x548c;&#x4e92;&#x64cd;&#x4f5c;&#x6027;&#x66f4;&#x5f3a;&#x7684;&#x524d;&#x7aef;&#x672a;&#x6765;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"866,868"}}],"payload":{"tag":"ul","lines":"864,868"}}],"payload":{"tag":"h4","lines":"852,853"}}],"payload":{"tag":"h3","lines":"828,829"}},{"content":"<strong>UI &#x7ec4;&#x4ef6;&#x5e93;&#xff1a;&#x52a0;&#x901f;&#x5f00;&#x53d1;&#x7684;&#x5229;&#x5668;</strong>","children":[{"content":"<strong>&#x91cd;&#x6784; UI &#x7ec4;&#x4ef6;&#x7684;&#x5f00;&#x53d1;&#x8303;&#x5f0f;</strong>","children":[{"content":"<strong>1.1 UI &#x7ec4;&#x4ef6;&#x5e93;&#x7684;&#x6f14;&#x8fdb;&#xff1a;&#x4ece; Bootstrap &#x65f6;&#x4ee3;&#x5230;&#x73b0;&#x4ee3;&#x6846;&#x67b6;&#x751f;&#x6001;</strong>","children":[],"payload":{"tag":"h5","lines":"874,875"}},{"content":"<strong>1.2 &#x73b0;&#x4ee3;&#x7ec4;&#x4ef6;&#x5e93;&#x7684;&#x6838;&#x5fc3;&#x5206;&#x7c7b;&#x4e0e;&#x8bc4;&#x4f30;&#x7ef4;&#x5ea6;</strong>","children":[{"content":"<strong>&#x8bbe;&#x8ba1;&#x4e00;&#x81f4;&#x6027;&#x4e0e;&#x7f8e;&#x5b66;&#xff1a;</strong> &#x8bc4;&#x4f30;&#x5e93;&#x662f;&#x5426;&#x9075;&#x5faa;&#x4e00;&#x5957;&#x6210;&#x719f;&#x3001;&#x4e13;&#x4e1a;&#x7684; UI/UX &#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff0c;&#x4ee5;&#x786e;&#x4fdd;&#x5176;&#x7ec4;&#x4ef6;&#x5728;&#x89c6;&#x89c9;&#x4e0a;&#x7684;&#x548c;&#x8c10;&#x7edf;&#x4e00;&#x3002;","children":[],"payload":{"tag":"li","lines":"886,887"}},{"content":"<strong>&#x53ef;&#x5b9a;&#x5236;&#x6027;&#xff1a;</strong> &#x8861;&#x91cf;&#x5f00;&#x53d1;&#x8005;&#x4fee;&#x6539;&#x7ec4;&#x4ef6;&#x5916;&#x89c2;&#x548c;&#x884c;&#x4e3a;&#x7684;&#x4fbf;&#x5229;&#x7a0b;&#x5ea6;&#x3002;&#x9ad8;&#x5ea6;&#x53ef;&#x5b9a;&#x5236;&#x7684;&#x5e93;&#x901a;&#x5e38;&#x63d0;&#x4f9b;&#x5f3a;&#x5927;&#x7684;&#x4e3b;&#x9898;&#x7cfb;&#x7edf;&#x3001;CSS &#x53d8;&#x91cf;&#x6216;&#x6837;&#x5f0f;&#x5c5e;&#x6027;&#xff08;style props&#xff09;&#x652f;&#x6301;&#x3002;","children":[],"payload":{"tag":"li","lines":"887,888"}},{"content":"<strong>&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;&#xff08;DX&#xff09;&#xff1a;</strong> &#x8003;&#x5bdf; API &#x8bbe;&#x8ba1;&#x7684;&#x76f4;&#x89c2;&#x6027;&#x3001;&#x6587;&#x6863;&#x7684;&#x8be6;&#x5c3d;&#x7a0b;&#x5ea6;&#x4ee5;&#x53ca;&#x793e;&#x533a;&#x652f;&#x6301;&#x7684;&#x6d3b;&#x8dc3;&#x5ea6;&#x3002;&#x4f18;&#x79c0;&#x7684;&#x5e93;&#x901a;&#x5e38;&#x62e5;&#x6709;&#x6e05;&#x6670;&#x7684;&#x6587;&#x6863;&#x548c;&#x6d3b;&#x8dc3;&#x7684;&#x793e;&#x533a;&#xff0c;&#x4f8b;&#x5982; MUI &#x7684;&#x6587;&#x6863;&#x7531;&#x8d85;&#x8fc7; 2,000 &#x540d;&#x8d21;&#x732e;&#x8005;&#x5171;&#x540c;&#x7ef4;&#x62a4;&#xff0c;&#x88ab;&#x5f00;&#x53d1;&#x8005;&#x8d5e;&#x8a89;&#x4e3a;&#x201c;&#x65e0;&#x9700;&#x53bb; Stack Overflow &#x5bfb;&#x627e;&#x7b54;&#x6848;&#x201d;&#x3002;","children":[],"payload":{"tag":"li","lines":"888,889"}},{"content":"<strong>&#x6027;&#x80fd;&#x4e0e;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#xff08;Accessibility&#xff09;&#xff1a;</strong> &#x8bc4;&#x4f30;&#x5e93;&#x7684;&#x8f7b;&#x91cf;&#x7ea7;&#x548c;&#x6e32;&#x67d3;&#x6548;&#x7387;&#xff0c;&#x4ee5;&#x53ca;&#x5176;&#x5bf9; Web &#x5185;&#x5bb9;&#x65e0;&#x969c;&#x788d;&#x6307;&#x5357;&#xff08;<a href=\"https://www.w3.org/WAI/standards-guidelines/wcag/\">WCAG</a>&#xff09;&#x6807;&#x51c6;&#x7684;&#x9075;&#x5faa;&#x60c5;&#x51b5;&#x3002;&#x4f8b;&#x5982;&#xff0c;<a href=\"https://chakra-ui.com/\">Chakra UI</a> &#x660e;&#x786e;&#x5c06;&#x65e0;&#x969c;&#x788d;&#x8bbe;&#x8ba1;&#x4f5c;&#x4e3a;&#x5176;&#x6838;&#x5fc3;&#x6307;&#x5bfc;&#x539f;&#x5219;&#x3002;","children":[],"payload":{"tag":"li","lines":"889,890"}},{"content":"<strong>&#x793e;&#x533a;&#x4e0e;&#x751f;&#x6001;&#x7cfb;&#x7edf;&#xff1a;</strong> &#x8003;&#x5bdf;&#x5e93;&#x5728; GitHub &#x4e0a;&#x7684;&#x661f;&#x6807;&#x6570;&#x3001;npm &#x5468;&#x4e0b;&#x8f7d;&#x91cf;&#x3001;&#x4ee5;&#x53ca;&#x793e;&#x533a;&#xff08;&#x5982; Discord&#xff09;&#x7684;&#x6d3b;&#x8dc3;&#x5ea6;&#xff0c;&#x8fd9;&#x4e9b;&#x6307;&#x6807;&#x53cd;&#x6620;&#x4e86;&#x5176;&#x53d7;&#x6b22;&#x8fce;&#x7a0b;&#x5ea6;&#x4e0e;&#x53ef;&#x6301;&#x7eed;&#x53d1;&#x5c55;&#x6f5c;&#x529b;&#x3002;","children":[],"payload":{"tag":"li","lines":"890,892"}}],"payload":{"tag":"h5","lines":"880,881"}}],"payload":{"tag":"h4","lines":"872,873"}},{"content":"<strong>&#x4e3b;&#x6d41;&#x524d;&#x7aef;&#x6846;&#x67b6;&#x4e0b;&#x7684;&#x7ec4;&#x4ef6;&#x5e93;&#x6df1;&#x5ea6;&#x5256;&#x6790;</strong>","children":[{"content":"<strong>2.1 React &#x751f;&#x6001;&#xff1a;&#x591a;&#x5143;&#x5316;&#x4e0e;&#x521b;&#x65b0;&#x524d;&#x6cbf;</strong>","children":[{"content":"<strong>MUI (Material UI)&#xff1a;&#x6210;&#x719f;&#x7684; Material Design &#x5b9e;&#x73b0;</strong>","children":[{"content":"<strong>&#x5168;&#x65b9;&#x4f4d;&#x5de5;&#x5177;&#x96c6;&#xff1a;</strong> &#x9664;&#x4e86;&#x63d0;&#x4f9b;&#x57fa;&#x7840;&#x7ec4;&#x4ef6;&#x7684; Material UI &#x5e93;&#xff0c;MUI &#x751f;&#x6001;&#x8fd8;&#x5305;&#x542b;&#x7528;&#x4e8e;&#x5904;&#x7406;&#x590d;&#x6742;&#x6570;&#x636e;&#x7528;&#x4f8b;&#x7684; <a href=\"https://mui.com/x/\">MUI X</a>&#xff0c;&#x4ee5;&#x53ca;&#x7528;&#x4e8e;&#x5feb;&#x901f;&#x6784;&#x5efa;&#x4eea;&#x8868;&#x76d8;&#x548c;&#x5185;&#x90e8;&#x5e94;&#x7528;&#x7684; <a href=\"https://mui.com/toolpad/\">Toolpad</a>&#x3002;&#x8fd9;&#x79cd;&#x6a21;&#x5757;&#x5316;&#x7684;&#x4ea7;&#x54c1;&#x7ebf;&#x6ee1;&#x8db3;&#x4e86;&#x4e0d;&#x540c;&#x573a;&#x666f;&#x7684;&#x9700;&#x6c42;&#x3002;","children":[],"payload":{"tag":"li","lines":"902,903"}},{"content":"<strong>&#x9ad8;&#x5ea6;&#x53ef;&#x5b9a;&#x5236;&#x6027;&#xff1a;</strong> MUI &#x7684;&#x7ec4;&#x4ef6;&#x975e;&#x5e38;&#x7075;&#x6d3b;&#x4e14;&#x5f3a;&#x5927;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x5b8c;&#x5168;&#x638c;&#x63a7;&#x5176;&#x5916;&#x89c2;&#x548c;&#x884c;&#x4e3a;&#x3002;&#x901a;&#x8fc7;&#x5f3a;&#x5927;&#x7684;&#x5b9a;&#x5236;&#x7cfb;&#x7edf;&#xff0c;&#x56e2;&#x961f;&#x751a;&#x81f3;&#x53ef;&#x4ee5;&#x57fa;&#x4e8e; MUI &#x5b9e;&#x73b0;&#x81ea;&#x5df1;&#x7684;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff0c;&#x540c;&#x65f6;&#x964d;&#x4f4e;&#x7ef4;&#x62a4;&#x6210;&#x672c;&#x3002;","children":[],"payload":{"tag":"li","lines":"903,904"}},{"content":"<strong>&#x5353;&#x8d8a;&#x7684;&#x6587;&#x6863;&#x4e0e;&#x793e;&#x533a;&#xff1a;</strong> MUI &#x7684;&#x6587;&#x6863;&#x56e0;&#x5176;&#x8be6;&#x5c3d;&#x548c;&#x6613;&#x7528;&#x800c;&#x5907;&#x53d7;&#x8d5e;&#x8a89;&#xff0c;&#x80cc;&#x540e;&#x6709;&#x8d85;&#x8fc7; 2,000 &#x540d;&#x8d21;&#x732e;&#x8005;&#x5171;&#x540c;&#x7ef4;&#x62a4;&#x3002;&#x8fd9;&#x4f7f;&#x5f97;&#x5f00;&#x53d1;&#x8005;&#x80fd;&#x591f;&#x8fc5;&#x901f;&#x627e;&#x5230;&#x95ee;&#x9898;&#x7684;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#xff0c;&#x6781;&#x5927;&#x5730;&#x63d0;&#x5347;&#x4e86;&#x5f00;&#x53d1;&#x6548;&#x7387;&#x3002;","children":[],"payload":{"tag":"li","lines":"904,906"}}],"payload":{"tag":"h6","lines":"898,899"}},{"content":"<strong>Ant Design&#xff1a;&#x4f01;&#x4e1a;&#x7ea7;&#x4e2d;&#x540e;&#x53f0;&#x7684;&#x9996;&#x9009;</strong>","children":[{"content":"<strong>&#x7ec4;&#x4ef6;&#x4e30;&#x5bcc;&#x5ea6;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x4e00;&#x5957;&#x5b8c;&#x6574;&#x7684;&#x7ec4;&#x4ef6;&#xff0c;&#x6db5;&#x76d6;&#x4e86;&#x901a;&#x7528;&#x3001;&#x5e03;&#x5c40;&#x3001;&#x5bfc;&#x822a;&#x3001;&#x6570;&#x636e;&#x5f55;&#x5165;&#x3001;&#x6570;&#x636e;&#x663e;&#x793a;&#x548c;&#x53cd;&#x9988;&#x7b49;&#x591a;&#x79cd;&#x7c7b;&#x522b;&#xff0c;&#x603b;&#x8ba1;&#x591a;&#x8fbe;&#x6570;&#x5341;&#x79cd;&#x7ec4;&#x4ef6;&#x3002;","children":[],"payload":{"tag":"li","lines":"910,911"}},{"content":"<strong>&#x56fd;&#x9645;&#x5316;&#x4e0e;&#x4e3b;&#x9898;&#x5b9a;&#x5236;&#xff1a;</strong> &#x5185;&#x7f6e;&#x4e86;&#x5f3a;&#x5927;&#x7684;&#x56fd;&#x9645;&#x5316;&#x652f;&#x6301;&#xff0c;&#x5e76;&#x63d0;&#x4f9b;&#x4e86;&#x7075;&#x6d3b;&#x7684;&#x4e3b;&#x9898;&#x5b9a;&#x5236;&#x80fd;&#x529b;&#xff0c;&#x4f7f;&#x5176;&#x80fd;&#x591f;&#x8f7b;&#x677e;&#x9002;&#x5e94;&#x4e0d;&#x540c;&#x5730;&#x533a;&#x548c;&#x54c1;&#x724c;&#x7684;&#x9700;&#x6c42;&#x3002;","children":[],"payload":{"tag":"li","lines":"911,912"}},{"content":"<strong>&#x8bbe;&#x8ba1;&#x8d44;&#x6e90;&#xff1a;</strong> Ant Design &#x4e0d;&#x4ec5;&#x662f;&#x4e00;&#x4e2a;&#x4ee3;&#x7801;&#x5e93;&#xff0c;&#x5b83;&#x8fd8;&#x63d0;&#x4f9b; Sketch&#x3001;Figma&#x3001;Adobe XD &#x7b49;&#x4e3b;&#x6d41;&#x8bbe;&#x8ba1;&#x5de5;&#x5177;&#x7684;&#x8d44;&#x6e90;&#x6587;&#x4ef6;&#xff0c;&#x786e;&#x4fdd;&#x8bbe;&#x8ba1;&#x56e2;&#x961f;&#x548c;&#x5f00;&#x53d1;&#x56e2;&#x961f;&#x80fd;&#x591f;&#x4f7f;&#x7528;&#x540c;&#x4e00;&#x5957;&#x8bbe;&#x8ba1;&#x8bed;&#x8a00;&#xff0c;&#x5b9e;&#x73b0;&#x8bbe;&#x8ba1;&#x4e0e;&#x4ee3;&#x7801;&#x7684;&#x9ad8;&#x5ea6;&#x540c;&#x6b65;&#x3002;","children":[],"payload":{"tag":"li","lines":"912,914"}}],"payload":{"tag":"h6","lines":"906,907"}},{"content":"<strong>Chakra UI&#xff1a;&#x4ee5;&#x65e0;&#x969c;&#x788d;&#x4e0e;&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;&#x4e3a;&#x6838;&#x5fc3;</strong>","children":[{"content":"<strong>&#x65e0;&#x969c;&#x788d;&#x4f18;&#x5148;&#xff1a;</strong> &#x660e;&#x786e;&#x5c06;&#x65e0;&#x969c;&#x788d;&#x8bbe;&#x8ba1;&#x4f5c;&#x4e3a;&#x5176;&#x6307;&#x5bfc;&#x539f;&#x5219;&#xff0c;&#x6240;&#x6709;&#x7ec4;&#x4ef6;&#x90fd;&#x9075;&#x5faa; WCAG&#xff08;Web Content Accessibility Guidelines&#xff09;&#x6807;&#x51c6;&#xff0c;&#x786e;&#x4fdd;&#x4e86;&#x4ea7;&#x54c1;&#x7684;&#x5305;&#x5bb9;&#x6027;&#x3002;&#x8fd9;&#x4e00;&#x7279;&#x70b9;&#x83b7;&#x5f97;&#x4e86;&#x5982; <a href=\"https://vercel.com/\">Vercel</a> CEO &#x5728;&#x5185;&#x77e5;&#x540d;&#x5f00;&#x53d1;&#x8005;&#x7684;&#x63a8;&#x5d07;&#x3002;","children":[],"payload":{"tag":"li","lines":"918,919"}},{"content":"<strong>&#x9ad8;&#x5ea6;&#x6a21;&#x5757;&#x5316;&#x4e0e;&#x53ef;&#x7ec4;&#x5408;&#x6027;&#xff1a;</strong> &#x91c7;&#x7528;&#x6a21;&#x5757;&#x5316;&#x67b6;&#x6784;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x6839;&#x636e;&#x9700;&#x8981;&#x8f7b;&#x677e;&#x5f15;&#x5165;&#x548c;&#x7ec4;&#x5408;&#x7ec4;&#x4ef6;&#x3002;&#x5176;&#x5f3a;&#x5927;&#x7684; style props &#x548c;&#x57fa;&#x4e8e; <a href=\"https://panda-css.com/\">Panda CSS</a> &#x7684;&#x4e3b;&#x9898;&#x7cfb;&#x7edf;&#xff0c;&#x8ba9;&#x5f00;&#x53d1;&#x8005;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x5728;&#x7ec4;&#x4ef6;&#x4e0a;&#x5b9a;&#x4e49;&#x6837;&#x5f0f;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x6781;&#x9ad8;&#x7684;&#x7075;&#x6d3b;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"919,920"}},{"content":"<strong>&#x793e;&#x533a;&#x6d3b;&#x8dc3;&#xff1a;</strong> &#x62e5;&#x6709;&#x8d85;&#x8fc7; 8,500 &#x540d;&#x6210;&#x5458;&#x7684; Discord &#x793e;&#x533a;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x5f3a;&#x5927;&#x7684;&#x793e;&#x533a;&#x652f;&#x6301;&#xff0c;&#x786e;&#x4fdd;&#x5f00;&#x53d1;&#x8005;&#x5728;&#x9047;&#x5230;&#x95ee;&#x9898;&#x65f6;&#x80fd;&#x83b7;&#x5f97;&#x53ca;&#x65f6;&#x5e2e;&#x52a9;&#x3002;","children":[],"payload":{"tag":"li","lines":"920,921"}},{"content":"","children":[],"payload":{"tag":"li","lines":"921,923"}}],"payload":{"tag":"h6","lines":"914,915"}},{"content":"<strong>Fluent UI&#xff1a;&#x5fae;&#x8f6f;&#x5b98;&#x65b9;&#x7684;&#x4f01;&#x4e1a;&#x7ea7;&#x751f;&#x4ea7;&#x529b;&#x5f15;&#x64ce;</strong>","children":[{"content":"<strong>&#x4f01;&#x4e1a;&#x7ea7;&#x6574;&#x5408;&#x4e0e;&#x751f;&#x4ea7;&#x529b;&#xff1a;</strong> &#x5176;&#x8bbe;&#x8ba1;&#x7406;&#x5ff5;&#x548c;&#x7ec4;&#x4ef6;&#x5b8c;&#x5168;&#x4e3a;&#x4fe1;&#x606f;&#x5bc6;&#x5ea6;&#x9ad8;&#x3001;&#x4ea4;&#x4e92;&#x590d;&#x6742;&#x7684;&#x4f01;&#x4e1a;&#x573a;&#x666f;&#x670d;&#x52a1;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x5927;&#x91cf;&#x6210;&#x719f;&#x7684;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#xff0c;&#x5982;&#x56fe;&#x8868;&#x3001;&#x6570;&#x636e;&#x7f51;&#x683c;&#x548c;&#x590d;&#x6742;&#x7684;&#x8868;&#x5355;&#x63a7;&#x4ef6;&#x3002;","children":[],"payload":{"tag":"li","lines":"927,928"}},{"content":"<strong>&#x9876;&#x7ea7;&#x7684;&#x53ef;&#x8bbf;&#x95ee;&#x6027; (A11y)&#xff1a;</strong> &#x4f5c;&#x4e3a;&#x5fae;&#x8f6f;&#x4ea7;&#x54c1;&#x7684;&#x57fa;&#x77f3;&#xff0c;Fluent UI &#x5728;&#x65e0;&#x969c;&#x788d;&#x8bbe;&#x8ba1;&#x4e0a;&#x6295;&#x5165;&#x5de8;&#x5927;&#xff0c;&#x4e25;&#x683c;&#x9075;&#x5faa; WCAG &#x6807;&#x51c6;&#xff0c;&#x786e;&#x4fdd;&#x5e94;&#x7528;&#x80fd;&#x6ee1;&#x8db3;&#x6700;&#x4e25;&#x82db;&#x7684;&#x4f01;&#x4e1a;&#x548c;&#x653f;&#x5e9c;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#x8981;&#x6c42;&#x3002;","children":[],"payload":{"tag":"li","lines":"928,929"}},{"content":"<strong>&#x4e0e;&#x5fae;&#x8f6f;&#x751f;&#x6001;&#x7684;&#x65e0;&#x7f1d;&#x8854;&#x63a5;&#xff1a;</strong> &#x5bf9;&#x4e8e;&#x4f7f;&#x7528; <a href=\"https://developer.microsoft.com/en-us/graph\">Microsoft Graph</a>&#x3001;<a href=\"https://www.microsoft.com/en-us/microsoft-teams/group-chat-software\">Teams</a> &#x6216; <a href=\"https://www.microsoft.com/en-us/microsoft-365/sharepoint/collaboration\">SharePoint</a> &#x7b49;&#x670d;&#x52a1;&#x7684;&#x5f00;&#x53d1;&#x8005;&#x800c;&#x8a00;&#xff0c;&#x91c7;&#x7528; Fluent UI &#x80fd;&#x591f;&#x786e;&#x4fdd;&#x89c6;&#x89c9;&#x548c;&#x4ea4;&#x4e92;&#x4f53;&#x9a8c;&#x7684;&#x65e0;&#x7f1d;&#x7edf;&#x4e00;&#xff0c;&#x63d0;&#x4f9b;&#x5b98;&#x65b9;&#x652f;&#x6301;&#x7684;&#x6700;&#x4f73;&#x5b9e;&#x8df5;&#x3002;","children":[],"payload":{"tag":"li","lines":"929,931"}}],"payload":{"tag":"h6","lines":"923,924"}},{"content":"<strong>&#x6df1;&#x5ea6;&#x6d1e;&#x5bdf;&#xff1a;&#x65e0;&#x5934;&#x7ec4;&#x4ef6;&#x4e0e;&#x5b9e;&#x7528;&#x81f3;&#x4e0a; CSS &#x7684;&#x5d1b;&#x8d77;</strong>","children":[],"payload":{"tag":"h6","lines":"931,932"}},{"content":"<strong>&#x5176;&#x4ed6;&#x503c;&#x5f97;&#x5173;&#x6ce8;&#x7684; React &#x5e93;</strong>","children":[{"content":"<strong>PrimeReact&#xff1a;</strong> &#x4f5c;&#x4e3a; <a href=\"https://primeng.org/\">PrimeNG</a> &#x5728; React &#x751f;&#x6001;&#x4e2d;&#x7684;&#x5bf9;&#x5e94;&#x7248;&#x672c;&#xff0c;&#x662f;&#x529f;&#x80fd;&#x4e30;&#x5bcc;&#x3001;&#x7ec4;&#x4ef6;&#x6570;&#x91cf;&#x5e9e;&#x5927;&#x7684;&#x5e93;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x8d85;&#x8fc7; 90 &#x4e2a;&#x7ec4;&#x4ef6;&#x548c; 280 &#x4e2a; UI &#x5757;&#x3002;","children":[],"payload":{"tag":"li","lines":"941,942"}},{"content":"<strong>Mantine&#xff1a;</strong> &#x529f;&#x80fd;&#x5168;&#x9762;&#x7684;&#x5e93;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x8d85;&#x8fc7; 100 &#x4e2a;&#x53ef;&#x5b9a;&#x5236;&#x7ec4;&#x4ef6;&#x548c; React Hooks &#x5e93;&#xff0c;&#x5e76;&#x5185;&#x7f6e;&#x4e86;&#x9ed1;&#x6697;&#x6a21;&#x5f0f;&#x652f;&#x6301;&#xff0c;&#x57fa;&#x4e8e; TypeScript &#x6784;&#x5efa;&#x3002;","children":[],"payload":{"tag":"li","lines":"942,943"}},{"content":"<strong>Flowbite React&#xff1a;</strong> &#x57fa;&#x4e8e; Tailwind CSS &#x7684;&#x5f00;&#x6e90; React UI &#x5e93;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x8d85;&#x8fc7; 100 &#x4e2a;&#x4ea4;&#x4e92;&#x5f0f; UI &#x5143;&#x7d20;&#xff0c;&#x80fd;&#x591f;&#x8f7b;&#x677e;&#x878d;&#x5165;&#x590d;&#x6742;&#x7684;&#x9879;&#x76ee;&#x3002;","children":[],"payload":{"tag":"li","lines":"943,945"}}],"payload":{"tag":"h6","lines":"939,940"}}],"payload":{"tag":"h5","lines":"894,895"}},{"content":"<strong>2.2 Vue &#x751f;&#x6001;&#xff1a;&#x7edf;&#x4e00;&#x4e0e;&#x8de8;&#x5e73;&#x53f0;</strong>","children":[{"content":"<strong>Vuetify&#xff1a;Vue &#x7684; Material Design &#x65d7;&#x8230;</strong>","children":[{"content":"<strong>&#x7ec4;&#x4ef6;&#x4e30;&#x5bcc;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x8d85;&#x8fc7; 80 &#x4e2a;&#x7ec4;&#x4ef6;&#xff0c;&#x80fd;&#x591f;&#x6ee1;&#x8db3;&#x5927;&#x90e8;&#x5206;&#x5e94;&#x7528;&#x5f00;&#x53d1;&#x9700;&#x6c42;&#x3002;","children":[],"payload":{"tag":"li","lines":"953,954"}},{"content":"<strong>&#x5f3a;&#x5927;&#x793e;&#x533a;&#x652f;&#x6301;&#xff1a;</strong> &#x62e5;&#x6709;&#x5e9e;&#x5927;&#x7684;&#x793e;&#x533a;&#xff0c;&#x901a;&#x8fc7; Discord &#x7b49;&#x6e20;&#x9053;&#x4e3a;&#x5f00;&#x53d1;&#x8005;&#x63d0;&#x4f9b;&#x53ca;&#x65f6;&#x7684;&#x5e2e;&#x52a9;&#x3002;","children":[],"payload":{"tag":"li","lines":"954,955"}},{"content":"<strong>&#x5feb;&#x901f;&#x6784;&#x5efa;&#xff1a;</strong> &#x652f;&#x6301;&#x4f7f;&#x7528; Vite &#x8fdb;&#x884c;&#x9879;&#x76ee;&#x811a;&#x624b;&#x67b6;&#x642d;&#x5efa;&#xff0c;&#x80fd;&#x591f;&#x5feb;&#x901f;&#x542f;&#x52a8;&#x65b0;&#x9879;&#x76ee;&#x3002;","children":[],"payload":{"tag":"li","lines":"955,957"}}],"payload":{"tag":"h6","lines":"949,950"}},{"content":"<strong>Element Plus&#xff1a;&#x4ece; Vue 2 &#x5230; Vue 3 &#x7684;&#x5e73;&#x6ed1;&#x8fc7;&#x6e21;</strong>","children":[{"content":"<strong>&#x590d;&#x6742;&#x7ec4;&#x4ef6;&#x652f;&#x6301;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x4e00;&#x7cfb;&#x5217;&#x590d;&#x6742;&#x7684; UI &#x7ec4;&#x4ef6;&#xff0c;&#x5982;&#x65f6;&#x95f4;&#x7ebf;&#x3001;&#x65e5;&#x5386;&#x3001;&#x6570;&#x636e;&#x9009;&#x62e9;&#x5668;&#x548c;&#x6811;&#x5f62;&#x7ed3;&#x6784;&#x7b49;&#xff0c;&#x6781;&#x5927;&#x5730;&#x7b80;&#x5316;&#x4e86;&#x5f00;&#x53d1;&#x5de5;&#x4f5c;&#x3002;","children":[],"payload":{"tag":"li","lines":"961,962"}},{"content":"<strong>&#x4e3b;&#x9898;&#x5b9a;&#x5236;&#xff1a;</strong> &#x91c7;&#x7528; BEM &#x98ce;&#x683c;&#x7684; CSS&#xff0c;&#x5e76;&#x652f;&#x6301; Sass &#x53d8;&#x91cf;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x53ef;&#x4ee5;&#x8f7b;&#x677e;&#x5730;&#x8fdb;&#x884c;&#x5927;&#x89c4;&#x6a21;&#x7684;&#x4e3b;&#x9898;&#x4fee;&#x6539;&#xff0c;&#x4f8b;&#x5982;&#x5c06;&#x4e3b;&#x9898;&#x8272;&#x4ece;&#x84dd;&#x8272;&#x66f4;&#x6539;&#x4e3a;&#x5176;&#x4ed6;&#x989c;&#x8272;&#x3002;","children":[],"payload":{"tag":"li","lines":"962,964"}}],"payload":{"tag":"h6","lines":"957,958"}},{"content":"<strong>Quasar Framework&#xff1a;&#x4e00;&#x5957;&#x4ee3;&#x7801;&#xff0c;&#x591a;&#x7aef;&#x90e8;&#x7f72;&#x7684;&#x7ec8;&#x6781;&#x65b9;&#x6848;</strong>","children":[{"content":"<strong>&#x5168;&#x65b9;&#x4f4d;&#x8de8;&#x5e73;&#x53f0;&#x80fd;&#x529b;&#xff1a;</strong> Quasar &#x80fd;&#x591f;&#x5c06;&#x540c;&#x4e00;&#x4efd;&#x4ee3;&#x7801;&#x5e93;&#x6784;&#x5efa;&#x4e3a;&#x5355;&#x9875;&#x5e94;&#x7528;&#xff08;SPA&#xff09;&#x3001;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x6e32;&#x67d3;&#x5e94;&#x7528;&#xff08;SSR&#xff09;&#x3001;&#x6e10;&#x8fdb;&#x5f0f; Web &#x5e94;&#x7528;&#xff08;<a href=\"https://web.dev/progressive-web-apps/\">PWA</a>&#xff09;&#x3001;&#x79fb;&#x52a8;&#x5e94;&#x7528;&#xff08;&#x901a;&#x8fc7; <a href=\"https://cordova.apache.org/\">Cordova</a> &#x6216; <a href=\"https://capacitorjs.com/\">Capacitor</a>&#xff09;&#x4ee5;&#x53ca;&#x684c;&#x9762;&#x5e94;&#x7528;&#xff08;&#x901a;&#x8fc7; <a href=\"https://www.electronjs.org/\">Electron</a>&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"968,969"}},{"content":"<strong>&#x5168;&#x6808;&#x96c6;&#x6210;&#xff1a;</strong> &#x5185;&#x7f6e;&#x4e86;&#x8bb8;&#x591a;&#x529f;&#x80fd;&#xff0c;&#x51cf;&#x5c11;&#x4e86;&#x5bf9; <a href=\"https://hammerjs.github.io/\">Hammer.js</a>&#x3001;<a href=\"https://momentjs.com/\">Moment.js</a> &#x7b49;&#x7b2c;&#x4e09;&#x65b9;&#x5e93;&#x7684;&#x4f9d;&#x8d56;&#xff0c;&#x5b9e;&#x73b0;&#x4e86;&#x5c0f;&#x4f53;&#x79ef;&#x7684;&#x5168;&#x529f;&#x80fd;&#x8986;&#x76d6;&#x3002;","children":[],"payload":{"tag":"li","lines":"969,971"}}],"payload":{"tag":"h6","lines":"964,965"}},{"content":"<strong>Ant Design Vue&#xff1a;&#x4f01;&#x4e1a;&#x7ea7;&#x8bbe;&#x8ba1;&#x4f53;&#x7cfb;&#x7684; Vue &#x5b9e;&#x73b0;</strong>","children":[{"content":"<strong>&#x8bbe;&#x8ba1;&#x4f53;&#x7cfb;&#x7684;&#x65e0;&#x7f1d;&#x8fc1;&#x79fb;&#xff1a;</strong> &#x6700;&#x5927;&#x7684;&#x4ef7;&#x503c;&#x5728;&#x4e8e;&#x5b83;&#x5b8c;&#x6574;&#x7ee7;&#x627f;&#x4e86; Ant Design &#x6210;&#x719f;&#x3001;&#x4e13;&#x4e1a;&#x7684;&#x8bbe;&#x8ba1;&#x8bed;&#x8a00;&#x548c;&#x4ea4;&#x4e92;&#x89c4;&#x8303;&#x3002;&#x8fd9;&#x610f;&#x5473;&#x7740;&#x4f7f;&#x7528; Vue &#x7684;&#x56e2;&#x961f;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x5229;&#x7528; Ant Design &#x4e30;&#x5bcc;&#x7684; Figma&#x3001;Sketch &#x7b49;&#x8bbe;&#x8ba1;&#x8d44;&#x6e90;&#xff0c;&#x786e;&#x4fdd;&#x8bbe;&#x8ba1;&#x4e0e;&#x5f00;&#x53d1;&#x4e4b;&#x95f4;&#x7684;&#x9ad8;&#x5ea6;&#x534f;&#x540c;&#xff0c;&#x8fd9;&#x5bf9;&#x4e8e;&#x8de8;&#x6280;&#x672f;&#x6808;&#xff08;React &amp; Vue&#xff09;&#x7684;&#x56e2;&#x961f;&#x5c24;&#x5176;&#x5b9d;&#x8d35;&#x3002;","children":[],"payload":{"tag":"li","lines":"975,976"}},{"content":"<strong>&#x9762;&#x5411; Vue 3 &#x7684;&#x73b0;&#x4ee3;&#x5316;&#x91cd;&#x6784;&#xff1a;</strong> &#x65b0;&#x7248;&#x672c;&#x5b8c;&#x5168;&#x62e5;&#x62b1; Vue 3&#xff0c;&#x5168;&#x9762;&#x91c7;&#x7528; Composition API &#x548c; TypeScript &#x8fdb;&#x884c;&#x91cd;&#x6784;&#x3002;&#x8fd9;&#x4e0d;&#x4ec5;&#x5e26;&#x6765;&#x4e86;&#x66f4;&#x4f18;&#x7684;&#x6027;&#x80fd;&#x548c;&#x66f4;&#x5c0f;&#x7684;&#x6253;&#x5305;&#x4f53;&#x79ef;&#xff0c;&#x4e5f;&#x4e3a;&#x5f00;&#x53d1;&#x8005;&#x63d0;&#x4f9b;&#x4e86;&#x6781;&#x4f73;&#x7684;&#x7c7b;&#x578b;&#x63a8;&#x65ad;&#x548c;&#x66f4;&#x73b0;&#x4ee3;&#x3001;&#x66f4;&#x7b26;&#x5408; Vue 3 &#x6838;&#x5fc3;&#x601d;&#x60f3;&#x7684;&#x5f00;&#x53d1;&#x4f53;&#x9a8c;&#x3002;","children":[],"payload":{"tag":"li","lines":"976,977"}},{"content":"<strong>&#x5b8c;&#x6574;&#x7684;&#x4f01;&#x4e1a;&#x7ea7;&#x7ec4;&#x4ef6;&#x96c6;&#xff1a;</strong> &#x4e0e; React &#x7248;&#x672c;&#x4e00;&#x6837;&#xff0c;&#x5b83;&#x63d0;&#x4f9b;&#x4e86;&#x6570;&#x5341;&#x4e2a;&#x9ad8;&#x8d28;&#x91cf;&#x7ec4;&#x4ef6;&#xff0c;&#x8986;&#x76d6;&#x4e86;&#x4ece;&#x6570;&#x636e;&#x5f55;&#x5165;&#x3001;&#x6570;&#x636e;&#x663e;&#x793a;&#x5230;&#x53cd;&#x9988;&#x548c;&#x5e03;&#x5c40;&#x7684;&#x5404;&#x79cd;&#x590d;&#x6742;&#x4e2d;&#x540e;&#x53f0;&#x573a;&#x666f;&#xff0c;&#x786e;&#x4fdd;&#x5f00;&#x53d1;&#x8005;&#x80fd;&#x627e;&#x5230;&#x6240;&#x9700;&#x7684;&#x4e00;&#x5207;&#xff0c;&#x65e0;&#x9700;&#x5bfb;&#x627e;&#x7b2c;&#x4e09;&#x65b9;&#x8865;&#x5145;&#x3002;","children":[],"payload":{"tag":"li","lines":"977,979"}}],"payload":{"tag":"h6","lines":"971,972"}},{"content":"<strong>Naive UI&#xff1a;&#x4e3a;&#x6781;&#x81f4;&#x6027;&#x80fd;&#x4e0e;&#x7075;&#x6d3b;&#x4e3b;&#x9898;&#x800c;&#x751f;</strong>","children":[{"content":"<strong>&#x6027;&#x80fd;&#x4f18;&#x5148;&#x7684;&#x67b6;&#x6784;&#x8bbe;&#x8ba1;&#xff1a;</strong> Naive UI &#x5728;&#x8bbe;&#x8ba1;&#x4e4b;&#x521d;&#x5c31;&#x5c06;&#x6027;&#x80fd;&#x653e;&#x5728;&#x9996;&#x4f4d;&#x3002;&#x5b83;&#x901a;&#x8fc7;&#x907f;&#x514d;&#x5728;&#x8fd0;&#x884c;&#x65f6;&#x4f7f;&#x7528; CSS-in-JS &#x7b49;&#x53ef;&#x80fd;&#x5f71;&#x54cd;&#x6027;&#x80fd;&#x7684;&#x65b9;&#x6848;&#xff0c;&#x5e76;&#x786e;&#x4fdd;&#x6240;&#x6709;&#x7ec4;&#x4ef6;&#x90fd;&#x53ef;&#x88ab;&#x5b8c;&#x7f8e;&#x5730;&#x201c;&#x6447;&#x6811;&#x4f18;&#x5316;&#x201d;&#xff08;Tree-shaking&#xff09;&#xff0c;&#x4ece;&#x800c;&#x5b9e;&#x73b0;&#x4e86;&#x66f4;&#x5feb;&#x7684;&#x6e32;&#x67d3;&#x901f;&#x5ea6;&#x548c;&#x66f4;&#x5c0f;&#x7684;&#x6700;&#x7ec8;&#x4ea7;&#x7269;&#x3002;","children":[],"payload":{"tag":"li","lines":"983,984"}},{"content":"<strong>&#x6781;&#x81f4;&#x7075;&#x6d3b;&#x7684;&#x4e3b;&#x9898;&#x5b9a;&#x5236;&#xff1a;</strong> &#x5b83;&#x63d0;&#x4f9b;&#x4e86;&#x975e;&#x5e38;&#x8be6;&#x5c3d;&#x7684;&#x4e3b;&#x9898;&#x53d8;&#x91cf;&#xff08;Design Tokens&#xff09;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x901a;&#x8fc7;&#x7b80;&#x5355;&#x7684;&#x914d;&#x7f6e;&#x5bf9;&#x8c61;&#xff0c;&#x5bf9;&#x7ec4;&#x4ef6;&#x7684;&#x989c;&#x8272;&#x3001;&#x5b57;&#x4f53;&#x3001;&#x5c3a;&#x5bf8;&#x3001;&#x5706;&#x89d2;&#x7b49;&#x51e0;&#x4e4e;&#x6240;&#x6709;&#x89c6;&#x89c9;&#x7ec6;&#x8282;&#x8fdb;&#x884c;&#x6df1;&#x5ea6;&#x5b9a;&#x5236;&#x3002;&#x8fd9;&#x79cd;&#x80fd;&#x529b;&#x4f7f;&#x5176;&#x65e2;&#x80fd;&#x5feb;&#x901f;&#x5f00;&#x53d1;&#xff0c;&#x53c8;&#x80fd;&#x5b8c;&#x7f8e;&#x5339;&#x914d;&#x4efb;&#x4f55;&#x54c1;&#x724c;&#x7684;&#x8bbe;&#x8ba1;&#x89c4;&#x8303;&#x3002;","children":[],"payload":{"tag":"li","lines":"984,985"}},{"content":"<strong>&#x5168;&#x9762;&#x4e14;&#x53ef;&#x9760;&#x7684; TypeScript &#x652f;&#x6301;&#xff1a;</strong> Naive UI &#x6574;&#x4e2a;&#x5e93;&#x4f7f;&#x7528; TypeScript &#x7f16;&#x5199;&#xff0c;&#x5e76;&#x4ee5;&#x6b64;&#x4e3a;&#x50b2;&#x3002;&#x8fd9;&#x610f;&#x5473;&#x7740;&#x5b83;&#x80fd;&#x63d0;&#x4f9b;&#x65e0;&#x4e0e;&#x4f26;&#x6bd4;&#x7684;&#x7c7b;&#x578b;&#x5b89;&#x5168;&#x548c;&#x667a;&#x80fd;&#x63d0;&#x793a;&#xff0c;&#x6781;&#x5927;&#x5730;&#x63d0;&#x5347;&#x4e86;&#x5728;&#x5927;&#x578b;&#x3001;&#x590d;&#x6742;&#x9879;&#x76ee;&#x4e2d;&#x4f7f;&#x7528; TypeScript &#x65f6;&#x7684;&#x5f00;&#x53d1;&#x6548;&#x7387;&#x548c;&#x4ee3;&#x7801;&#x5065;&#x58ee;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"985,987"}}],"payload":{"tag":"h6","lines":"979,980"}},{"content":"<strong>PrimeVue&#xff1a;&#x529f;&#x80fd;&#x8d85;&#x5168;&#x7684;&#x201c;&#x7ec8;&#x6781;&#x201d;UI &#x5957;&#x4ef6;</strong>","children":[{"content":"<strong>&#x65e0;&#x4e0e;&#x4f26;&#x6bd4;&#x7684;&#x7ec4;&#x4ef6;&#x5e7f;&#x5ea6;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x8d85;&#x8fc7; 90 &#x4e2a;&#x5f00;&#x7bb1;&#x5373;&#x7528;&#x7684;&#x7ec4;&#x4ef6;&#xff0c;&#x8fdc;&#x8d85;&#x5927;&#x591a;&#x6570;&#x7ade;&#x4e89;&#x5bf9;&#x624b;&#x3002;&#x9664;&#x4e86;&#x6807;&#x51c6;&#x7ec4;&#x4ef6;&#xff0c;&#x5b83;&#x8fd8;&#x5305;&#x542b;&#x4e86;&#x7ec4;&#x7ec7;&#x7ed3;&#x6784;&#x56fe;&#x3001;&#x7ec8;&#x7aef;&#x3001;&#x65f6;&#x95f4;&#x8f74;&#x7b49;&#x8bb8;&#x591a;&#x5176;&#x4ed6;&#x5e93;&#x4e2d;&#x7f55;&#x89c1;&#x7684;&#x590d;&#x6742;&#x7ec4;&#x4ef6;&#x3002;","children":[],"payload":{"tag":"li","lines":"991,992"}},{"content":"<strong>&#x6781;&#x81f4;&#x7075;&#x6d3b;&#x7684;&#x4e3b;&#x9898;&#x7cfb;&#x7edf;&#xff1a;</strong> &#x5185;&#x7f6e;&#x4e86;&#x5f3a;&#x5927;&#x7684;&#x4e3b;&#x9898;&#x8bbe;&#x8ba1;&#x5668;&#xff0c;&#x4e0d;&#x4ec5;&#x63d0;&#x4f9b;&#x591a;&#x79cd;&#x9884;&#x8bbe;&#x4e3b;&#x9898;&#xff08;&#x5305;&#x62ec; Material&#x3001;Bootstrap &#x98ce;&#x683c;&#xff09;&#xff0c;&#x8fd8;&#x652f;&#x6301;&#x5f00;&#x53d1;&#x8005;&#x4ece;&#x96f6;&#x521b;&#x5efa;&#x81ea;&#x5df1;&#x7684;&#x4e3b;&#x9898;&#x3002;&#x5176;&#x201c;&#x65e0;&#x6837;&#x5f0f; (unstyled)&#x201d;&#x6a21;&#x5f0f;&#x66f4;&#x662f;&#x5c06;&#x63a7;&#x5236;&#x6743;&#x5b8c;&#x5168;&#x4ea4;&#x8fd8;&#x7ed9;&#x5f00;&#x53d1;&#x8005;&#xff0c;&#x5b9e;&#x73b0;&#x4e86;&#x7c7b;&#x4f3c;&#x201c;&#x65e0;&#x5934;&#x201d;&#x7ec4;&#x4ef6;&#x7684;&#x6781;&#x81f4;&#x7075;&#x6d3b;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"992,993"}},{"content":"<strong>&#x4f01;&#x4e1a;&#x7ea7;&#x6570;&#x636e;&#x529f;&#x80fd;&#xff1a;</strong> &#x5176;&#x6570;&#x636e;&#x8868;&#x683c;&#xff08;DataTable&#xff09;&#x7ec4;&#x4ef6;&#x529f;&#x80fd;&#x6781;&#x5176;&#x5f3a;&#x5927;&#xff0c;&#x5185;&#x7f6e;&#x4e86;&#x6392;&#x5e8f;&#x3001;&#x8fc7;&#x6ee4;&#x3001;&#x5206;&#x9875;&#x3001;&#x61d2;&#x52a0;&#x8f7d;&#x3001;&#x884c;&#x7f16;&#x8f91;&#x7b49;&#x9ad8;&#x7ea7;&#x529f;&#x80fd;&#xff0c;&#x662f;&#x5904;&#x7406;&#x590d;&#x6742;&#x6570;&#x636e;&#x5bc6;&#x96c6;&#x578b;&#x5e94;&#x7528;&#x7684;&#x4e00;&#x5927;&#x5229;&#x5668;&#x3002;","children":[],"payload":{"tag":"li","lines":"993,995"}}],"payload":{"tag":"h6","lines":"987,988"}}],"payload":{"tag":"h5","lines":"945,946"}},{"content":"<strong>2.3 Angular &#x751f;&#x6001;&#xff1a;&#x5b98;&#x65b9;&#x4e0e;&#x4f01;&#x4e1a;&#x7ea7;&#x5e76;&#x91cd;</strong>","children":[{"content":"<strong>Angular Material&#xff1a;Google &#x5b98;&#x65b9;&#x652f;&#x6301;&#x7684;&#x7a33;&#x5b9a;&#x57fa;&#x77f3;</strong>","children":[{"content":"<strong>&#x5b98;&#x65b9;&#x5730;&#x4f4d;&#xff1a;</strong> &#x7531; Google &#x56e2;&#x961f;&#x7ef4;&#x62a4;&#xff0c;&#x786e;&#x4fdd;&#x4e86;&#x5176;&#x7a33;&#x5b9a;&#x6027;&#x548c;&#x4e0e; Angular &#x6846;&#x67b6;&#x7684;&#x65e0;&#x7f1d;&#x96c6;&#x6210;&#x3002;&#x6bcf;&#x4e00;&#x4e2a;&#x4ee3;&#x7801;&#x63d0;&#x4ea4;&#x90fd;&#x7ecf;&#x8fc7;&#x4e25;&#x683c;&#x6d4b;&#x8bd5;&#xff0c;&#x4ee3;&#x8868;&#x4e86;&#x6846;&#x67b6;&#x7684;&#x6700;&#x9ad8;&#x8d28;&#x91cf;&#x6807;&#x51c6;&#x3002;","children":[],"payload":{"tag":"li","lines":"1003,1004"}},{"content":"<strong>&#x7ec4;&#x4ef6;&#x4e0e;&#x5de5;&#x5177;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x4e00;&#x5957;&#x5168;&#x9762;&#x7684; UI &#x7ec4;&#x4ef6;&#xff0c;&#x5e76;&#x9644;&#x5e26; <a href=\"https://material.angular.io/cdk\">Angular CDK</a>&#xff08;Component Dev Kit&#xff09;&#xff0c;&#x4e00;&#x4e2a;&#x7528;&#x4e8e;&#x6784;&#x5efa;&#x81ea;&#x5b9a;&#x4e49;&#x53ef;&#x8bbf;&#x95ee;&#x7ec4;&#x4ef6;&#x7684;&#x9ad8;&#x7ea7;&#x5de5;&#x5177;&#x7bb1;&#x3002;","children":[],"payload":{"tag":"li","lines":"1004,1006"}}],"payload":{"tag":"h6","lines":"999,1000"}},{"content":"<strong>PrimeNG&#xff1a;&#x7ec4;&#x4ef6;&#x6570;&#x91cf;&#x4e0e;&#x5546;&#x4e1a;&#x652f;&#x6301;&#x7684;&#x9886;&#x8dd1;&#x8005;</strong>","children":[{"content":"<strong>&#x7ec4;&#x4ef6;&#x5e7f;&#x5ea6;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x4ece;&#x57fa;&#x7840;&#x8868;&#x5355;&#x5143;&#x7d20;&#x5230;&#x590d;&#x6742;&#x7684;&#x6570;&#x636e;&#x8868;&#x683c;&#x3001;&#x56fe;&#x8868;&#x548c;&#x6587;&#x4ef6;&#x4e0a;&#x4f20;&#x5668;&#x7b49;&#x5168;&#x5957;&#x7ec4;&#x4ef6;&#xff0c;&#x51e0;&#x4e4e;&#x6db5;&#x76d6;&#x4e86;&#x6240;&#x6709;&#x4f01;&#x4e1a;&#x7ea7;&#x5e94;&#x7528;&#x7684;&#x9700;&#x6c42;&#x3002;","children":[],"payload":{"tag":"li","lines":"1010,1011"}},{"content":"<strong>&#x4e3b;&#x9898;&#x4e0e;&#x6a21;&#x677f;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86; Material &#x548c; Bootstrap &#x7b49;&#x591a;&#x79cd;&#x5185;&#x7f6e;&#x4e3b;&#x9898;&#xff0c;&#x4ee5;&#x53ca;&#x4e30;&#x5bcc;&#x7684;&#x4e13;&#x4e1a; UI &#x5757;&#xff08;UI blocks&#xff09;&#x548c;&#x5e94;&#x7528;&#x6a21;&#x677f;&#xff0c;&#x5e2e;&#x52a9;&#x5f00;&#x53d1;&#x8005;&#x5feb;&#x901f;&#x542f;&#x52a8;&#x9879;&#x76ee;&#x3002;","children":[],"payload":{"tag":"li","lines":"1011,1012"}},{"content":"<strong>&#x5546;&#x4e1a;&#x652f;&#x6301;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4f01;&#x4e1a;&#x7ea7;&#x652f;&#x6301;&#x670d;&#x52a1;&#xff0c;&#x5305;&#x62ec;&#x4e00;&#x5de5;&#x4f5c;&#x65e5;&#x5185;&#x54cd;&#x5e94;&#x548c;&#x65b0;&#x529f;&#x80fd;&#x8bf7;&#x6c42;&#xff0c;&#x4f7f;&#x5176;&#x6210;&#x4e3a;&#x5173;&#x952e;&#x4efb;&#x52a1;&#x5e94;&#x7528;&#x7684;&#x53ef;&#x9760;&#x9009;&#x62e9;&#x3002;","children":[],"payload":{"tag":"li","lines":"1012,1014"}}],"payload":{"tag":"h6","lines":"1006,1007"}},{"content":"<strong>NG-ZORRO&#xff1a;Ant Design &#x5728; Angular &#x4e0a;&#x7684;&#x4e13;&#x4e1a;&#x5b9e;&#x73b0;</strong>","children":[{"content":"<strong>&#x8bbe;&#x8ba1;&#x4e00;&#x81f4;&#x6027;&#xff1a;</strong> &#x7ee7;&#x627f;&#x4e86; Ant Design &#x7684;&#x4e13;&#x4e1a;&#x548c;&#x4e00;&#x81f4; UI&#xff0c;&#x63d0;&#x4f9b;&#x4ece;&#x57fa;&#x7840;&#x5143;&#x7d20;&#x5230;&#x590d;&#x6742;&#x8868;&#x683c;&#x3001;&#x6a21;&#x6001;&#x6846;&#x7b49;&#x5168;&#x5957;&#x7ec4;&#x4ef6;&#x3002;","children":[],"payload":{"tag":"li","lines":"1018,1019"}},{"content":"<strong>&#x56fd;&#x9645;&#x5316;&#x4e0e;&#x6027;&#x80fd;&#xff1a;</strong> &#x5185;&#x7f6e;&#x56fd;&#x9645;&#x5316;&#x652f;&#x6301;&#xff0c;&#x5e76;&#x91c7;&#x7528;&#x4e86; OnPush change detection &#x548c; tree-shaking &#x7b49;&#x6280;&#x672f;&#x8fdb;&#x884c;&#x6027;&#x80fd;&#x4f18;&#x5316;&#xff0c;&#x786e;&#x4fdd;&#x4e86;&#x5e94;&#x7528;&#x7684;&#x6027;&#x80fd;&#x548c;&#x53ef;&#x7ef4;&#x62a4;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"1019,1021"}}],"payload":{"tag":"h6","lines":"1014,1015"}}],"payload":{"tag":"h5","lines":"995,996"}}],"payload":{"tag":"h4","lines":"892,893"}},{"content":"<strong>&#x7279;&#x6b8a;&#x7528;&#x9014;&#x7ec4;&#x4ef6;&#x5e93;&#xff1a;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x7684;&#x5229;&#x5668;</strong>","children":[{"content":"<strong>3.1 &#x6df1;&#x5ea6;&#x6d1e;&#x5bdf;&#xff1a;&#x901a;&#x7528;&#x4e0e;&#x4e13;&#x7528;&#x7684;&#x5206;&#x91ce;&#x2014;&#x2014;&#x4e3a;&#x4ec0;&#x4e48;&#x9700;&#x8981;&#x4e13;&#x95e8;&#x7684;&#x56fe;&#x8868;&#x5e93;&#xff1f;</strong>","children":[],"payload":{"tag":"h5","lines":"1023,1024"}},{"content":"<strong>3.2 &#x7cbe;&#x9009;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x5e93;&#x5206;&#x6790;</strong>","children":[{"content":"<strong>Highcharts&#xff1a;&#x8001;&#x724c;&#x3001;&#x8de8;&#x5e73;&#x53f0;&#x3001;&#x4f01;&#x4e1a;&#x7ea7;</strong>","children":[{"content":"<strong>&#x6280;&#x672f;&#x6808;&#x65e0;&#x5173;&#xff1a;</strong> Highcharts &#x63d0;&#x4f9b;&#x9002;&#x7528;&#x4e8e; JavaScript&#x3001;Angular&#x3001;React&#x3001;Vue.js &#x7b49;&#x591a;&#x79cd;&#x4e3b;&#x6d41;&#x6846;&#x67b6;&#x7684; Wrapper&#xff0c;&#x5b9e;&#x73b0;&#x4e86;&#x771f;&#x6b63;&#x7684;&#x6280;&#x672f;&#x6808;&#x65e0;&#x5173;&#x6027;&#xff0c;&#x4f7f;&#x5176;&#x80fd;&#x591f;&#x88ab;&#x96c6;&#x6210;&#x5230;&#x4efb;&#x4f55;&#x524d;&#x7aef;&#x9879;&#x76ee;&#x4e2d;&#x3002;","children":[],"payload":{"tag":"li","lines":"1035,1036"}},{"content":"<strong>&#x4e30;&#x5bcc;&#x529f;&#x80fd;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x6838;&#x5fc3;&#x56fe;&#x8868;&#x7c7b;&#x578b;&#xff0c;&#x5982;&#x7ebf;&#x56fe;&#x3001;&#x67f1;&#x72b6;&#x56fe;&#x3001;&#x997c;&#x56fe;&#x7b49;&#xff0c;&#x5e76;&#x6709;&#x4e13;&#x95e8;&#x7684;&#x4eea;&#x8868;&#x76d8;&#x548c;&#x6570;&#x636e;&#x8868;&#x683c;&#x5de5;&#x5177;&#xff0c;&#x53ef;&#x4ee5;&#x9ad8;&#x6548;&#x5730;&#x6784;&#x5efa;&#x590d;&#x6742;&#x7684;&#x6570;&#x636e;&#x9a71;&#x52a8;&#x578b;&#x5e94;&#x7528;&#x3002;","children":[],"payload":{"tag":"li","lines":"1036,1037"}},{"content":"<strong>&#x4f01;&#x4e1a;&#x7ea7;&#x4fe1;&#x8d56;&#xff1a;</strong> &#x5176;&#x53ef;&#x9760;&#x6027;&#x4e0e;&#x7a33;&#x5b9a;&#x6027;&#x4f7f;&#x5176;&#x8d62;&#x5f97;&#x4e86;&#x5168;&#x7403;&#x4f17;&#x591a;&#x5927;&#x578b;&#x4f01;&#x4e1a;&#x7684;&#x4fe1;&#x8d56;&#xff0c;&#x524d; 100 &#x5927;&#x516c;&#x53f8;&#x4e2d;&#x6709; 80 &#x5bb6;&#x5728;&#x4f7f;&#x7528;&#x5176;&#x56fe;&#x8868;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x3002;","children":[],"payload":{"tag":"li","lines":"1037,1039"}}],"payload":{"tag":"h6","lines":"1031,1032"}},{"content":"<strong>Nivo &amp; Recharts&#xff1a;&#x57fa;&#x4e8e; React &#x4e0e; D3 &#x7684;&#x58f0;&#x660e;&#x5f0f;&#x56fe;&#x8868;</strong>","children":[{"content":"<strong>&#x53ef;&#x7ec4;&#x5408;&#x6027;&#xff1a;</strong> &#x8fd9;&#x4e9b;&#x5e93;&#x7684;&#x8bbe;&#x8ba1;&#x7406;&#x5ff5;&#x5728;&#x4e8e;&#x201c;&#x58f0;&#x660e;&#x5f0f;&#x201d;&#x548c;&#x201c;&#x53ef;&#x7ec4;&#x5408;&#x201d;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x901a;&#x8fc7;&#x7ec4;&#x5408;&#x4e0d;&#x540c;&#x7684;&#x7ec4;&#x4ef6;&#xff08;&#x5982;&#x8f74;&#x3001;&#x56fe;&#x4f8b;&#x3001;&#x5de5;&#x5177;&#x63d0;&#x793a;&#x7b49;&#xff09;&#x6765;&#x6784;&#x5efa;&#x81ea;&#x5b9a;&#x4e49;&#x56fe;&#x8868;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x6781;&#x9ad8;&#x7684;&#x7075;&#x6d3b;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"1043,1044"}},{"content":"<strong>&#x9ad8;&#x6027;&#x80fd;&#x6e32;&#x67d3;&#xff1a;</strong> Nivo &#x63d0;&#x4f9b; SVG&#x3001;HTML &#x548c; Canvas &#x4e09;&#x79cd;&#x6e32;&#x67d3;&#x6a21;&#x5f0f;&#xff0c;&#x5e76;&#x652f;&#x6301;&#x670d;&#x52a1;&#x7aef;&#x6e32;&#x67d3;&#xff0c;&#x4ee5;&#x786e;&#x4fdd;&#x5728;&#x4e0d;&#x540c;&#x573a;&#x666f;&#x4e0b;&#x90fd;&#x80fd;&#x83b7;&#x5f97;&#x51fa;&#x8272;&#x7684;&#x6027;&#x80fd;&#x8868;&#x73b0;&#x3002;","children":[],"payload":{"tag":"li","lines":"1044,1046"}}],"payload":{"tag":"h6","lines":"1039,1040"}},{"content":"<strong>Tremor&#xff1a;&#x4e13;&#x6ce8;&#x4e8e;&#x4eea;&#x8868;&#x76d8;&#x7684; React &#x7ec4;&#x4ef6;&#x96c6;</strong>","children":[{"content":"<strong>&#x4eea;&#x8868;&#x76d8;&#x4f18;&#x5148;&#xff1a;</strong> Tremor &#x4e0d;&#x4ec5;&#x63d0;&#x4f9b;&#x57fa;&#x7840;&#x56fe;&#x8868;&#xff08;&#x5982;&#x9762;&#x79ef;&#x56fe;&#x3001;&#x6761;&#x5f62;&#x56fe;&#xff09;&#xff0c;&#x66f4;&#x63d0;&#x4f9b;&#x4e86; KPI Cards&#x3001;Data Bars&#x3001;Tracker &#x7b49;&#x4eea;&#x8868;&#x76d8;&#x4e13;&#x5c5e; UI&#xff0c;&#x6781;&#x5927;&#x5730;&#x7b80;&#x5316;&#x4e86;&#x6570;&#x636e;&#x5e94;&#x7528;&#x7684;&#x5f00;&#x53d1;&#x3002;","children":[],"payload":{"tag":"li","lines":"1050,1051"}},{"content":"<strong>&#x73b0;&#x4ee3;&#x5316;&#x6280;&#x672f;&#x6808;&#xff1a;</strong> &#x57fa;&#x4e8e; React&#x3001;Tailwind CSS &#x548c; Radix UI &#x6784;&#x5efa;&#xff0c;&#x62e5;&#x6709;&#x9ad8;&#x5ea6;&#x53ef;&#x5b9a;&#x5236;&#x6027;&#xff0c;&#x5e76;&#x81ea;&#x5e26; light/dark mode&#xff0c;&#x4f7f;&#x5176;&#x5728;&#x89c6;&#x89c9;&#x4e0a;&#x975e;&#x5e38;&#x73b0;&#x4ee3;&#x5316;&#x3002;","children":[],"payload":{"tag":"li","lines":"1051,1052"}},{"content":"<strong>&#x4e30;&#x5bcc;&#x7684;&#x6a21;&#x677f;&#x4e0e; UI Block&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x8d85;&#x8fc7; 300 &#x4e2a;&#x9884;&#x6784;&#x5efa;&#x7684; UI blocks &#x548c;&#x591a;&#x4e2a;&#x751f;&#x4ea7;&#x7ea7;&#x6a21;&#x677f;&#xff0c;&#x8986;&#x76d6;&#x4e86;&#x4ece;&#x4eea;&#x8868;&#x76d8;&#x5230;&#x8425;&#x9500;&#x7f51;&#x7ad9;&#x7b49;&#x591a;&#x79cd;&#x5e94;&#x7528;&#x573a;&#x666f;&#xff0c;&#x52a0;&#x901f;&#x4e86;&#x5f00;&#x53d1;&#x6d41;&#x7a0b;&#x3002;","children":[],"payload":{"tag":"li","lines":"1052,1054"}}],"payload":{"tag":"h6","lines":"1046,1047"}}],"payload":{"tag":"h5","lines":"1029,1030"}}],"payload":{"tag":"h4","lines":"1021,1022"}},{"content":"<strong>&#x8de8;&#x7ef4;&#x5ea6;&#x6bd4;&#x8f83;&#x4e0e;&#x7efc;&#x5408;&#x8bc4;&#x4f30;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#x4e00;&#xff1a;&#x4e3b;&#x6d41;&#x6846;&#x67b6; UI &#x7ec4;&#x4ef6;&#x5e93;&#x529f;&#x80fd;&#x4e0e;&#x7279;&#x6027;&#x5bf9;&#x6bd4;</strong>","children":[{"content":"<table data-lines=\"1062,1073\">\n<thead data-lines=\"1062,1063\">\n<tr data-lines=\"1062,1063\">\n<th style=\"text-align:left\">&#x5e93;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x6240;&#x5c5e;&#x6846;&#x67b6;</th>\n<th style=\"text-align:left\">&#x8bbe;&#x8ba1;&#x98ce;&#x683c;/&#x7406;&#x5ff5;</th>\n<th style=\"text-align:left\">&#x65e0;&#x969c;&#x788d;&#x652f;&#x6301;</th>\n<th style=\"text-align:left\">&#x5b9a;&#x5236;&#x5316;&#x6a21;&#x5f0f;</th>\n<th style=\"text-align:left\">&#x4e3b;&#x8981;&#x9002;&#x7528;&#x573a;&#x666f;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1064,1073\">\n<tr data-lines=\"1064,1065\">\n<td style=\"text-align:left\"><a href=\"https://mui.com/\">MUI</a></td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a></td>\n<td style=\"text-align:left\"><a href=\"https://m3.material.io/\">Material Design</a></td>\n<td style=\"text-align:left\">&#x4f18;&#x79c0;</td>\n<td style=\"text-align:left\">CSS-in-JS, &#x5f3a;&#x5927;&#x4e3b;&#x9898;&#x7cfb;&#x7edf;</td>\n<td style=\"text-align:left\">&#x901a;&#x7528; Web &#x5e94;&#x7528;&#xff0c;&#x5185;&#x90e8;&#x5de5;&#x5177;</td>\n</tr>\n<tr data-lines=\"1065,1066\">\n<td style=\"text-align:left\"><a href=\"https://ant.design/\">Ant Design</a></td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a></td>\n<td style=\"text-align:left\"><a href=\"https://ant.design/\">Ant Design</a></td>\n<td style=\"text-align:left\">&#x4f18;&#x79c0;</td>\n<td style=\"text-align:left\"><a href=\"https://lesscss.org/\">Less</a>/CSS &#x53d8;&#x91cf;&#xff0c;&#x4e3b;&#x9898;&#x5b9a;&#x5236;</td>\n<td style=\"text-align:left\">&#x4f01;&#x4e1a;&#x7ea7;&#x4e2d;&#x540e;&#x53f0;&#xff0c;&#x7ba1;&#x7406;&#x7cfb;&#x7edf;</td>\n</tr>\n<tr data-lines=\"1066,1067\">\n<td style=\"text-align:left\"><a href=\"https://chakra-ui.com/\">Chakra UI</a></td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a></td>\n<td style=\"text-align:left\">&#x5b9e;&#x7528;&#x81f3;&#x4e0a;/&#x65e0;&#x969c;&#x788d;</td>\n<td style=\"text-align:left\">&#x6838;&#x5fc3;&#x8bbe;&#x8ba1;&#x539f;&#x5219;</td>\n<td style=\"text-align:left\">Style Props, &#x4e3b;&#x9898;&#x7cfb;&#x7edf;</td>\n<td style=\"text-align:left\">&#x901a;&#x7528; Web &#x5e94;&#x7528;&#xff0c;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;</td>\n</tr>\n<tr data-lines=\"1067,1068\">\n<td style=\"text-align:left\"><a href=\"https://vuetifyjs.com/\">Vuetify</a></td>\n<td style=\"text-align:left\"><a href=\"https://vuejs.org/\">Vue</a></td>\n<td style=\"text-align:left\"><a href=\"https://m3.material.io/\">Material Design</a></td>\n<td style=\"text-align:left\">&#x4f18;&#x79c0;</td>\n<td style=\"text-align:left\"><a href=\"https://sass-lang.com/\">Sass</a>/CSS &#x53d8;&#x91cf;&#xff0c;&#x9884;&#x8bbe;&#x4e3b;&#x9898;</td>\n<td style=\"text-align:left\">&#x901a;&#x7528; Web &#x5e94;&#x7528;&#xff0c;Web &#x5e94;&#x7528;</td>\n</tr>\n<tr data-lines=\"1068,1069\">\n<td style=\"text-align:left\"><a href=\"https://element-plus.org/\">Element Plus</a></td>\n<td style=\"text-align:left\"><a href=\"https://vuejs.org/\">Vue</a></td>\n<td style=\"text-align:left\">Element Design</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\"><a href=\"https://getbem.com/\">BEM</a>-styled CSS, Sass &#x53d8;&#x91cf;</td>\n<td style=\"text-align:left\">&#x4f01;&#x4e1a;&#x7ea7;&#x4e2d;&#x540e;&#x53f0;&#xff0c;&#x7ba1;&#x7406;&#x7cfb;&#x7edf;</td>\n</tr>\n<tr data-lines=\"1069,1070\">\n<td style=\"text-align:left\"><a href=\"https://quasar.dev/\">Quasar</a></td>\n<td style=\"text-align:left\"><a href=\"https://vuejs.org/\">Vue</a></td>\n<td style=\"text-align:left\"><a href=\"https://m3.material.io/\">Material Design</a></td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\"><a href=\"https://sass-lang.com/\">Sass</a>/CSS &#x53d8;&#x91cf;&#xff0c;&#x4e3b;&#x9898;&#x5b9a;&#x5236;</td>\n<td style=\"text-align:left\">&#x591a;&#x7aef;&#xff08;Web, Mobile, Desktop&#xff09;</td>\n</tr>\n<tr data-lines=\"1070,1071\">\n<td style=\"text-align:left\"><a href=\"https://material.angular.io/\">Angular Material</a></td>\n<td style=\"text-align:left\"><a href=\"https://angular.dev/\">Angular</a></td>\n<td style=\"text-align:left\"><a href=\"https://m3.material.io/\">Material Design</a></td>\n<td style=\"text-align:left\">&#x4f18;&#x79c0;</td>\n<td style=\"text-align:left\"><a href=\"https://sass-lang.com/\">Sass</a> &#x53d8;&#x91cf;&#xff0c;&#x4e3b;&#x9898;&#x5b9a;&#x5236;</td>\n<td style=\"text-align:left\">&#x901a;&#x7528; Web &#x5e94;&#x7528;&#xff0c;Google &#x5b98;&#x65b9;</td>\n</tr>\n<tr data-lines=\"1071,1072\">\n<td style=\"text-align:left\"><a href=\"https://primeng.org/\">PrimeNG</a></td>\n<td style=\"text-align:left\"><a href=\"https://angular.dev/\">Angular</a></td>\n<td style=\"text-align:left\">&#x8bbe;&#x8ba1;&#x65e0;&#x5173;</td>\n<td style=\"text-align:left\">&#x4f18;&#x79c0;</td>\n<td style=\"text-align:left\">&#x4e3b;&#x9898;&#x8bbe;&#x8ba1;&#x5e08;&#xff0c;CSS &#x53d8;&#x91cf;</td>\n<td style=\"text-align:left\">&#x4f01;&#x4e1a;&#x7ea7;&#x5e94;&#x7528;&#xff0c;&#x590d;&#x6742;&#x754c;&#x9762;</td>\n</tr>\n<tr data-lines=\"1072,1073\">\n<td style=\"text-align:left\"><a href=\"https://ng.ant.design/\">NG-ZORRO</a></td>\n<td style=\"text-align:left\"><a href=\"https://angular.dev/\">Angular</a></td>\n<td style=\"text-align:left\"><a href=\"https://ant.design/\">Ant Design</a></td>\n<td style=\"text-align:left\">&#x4f18;&#x79c0;</td>\n<td style=\"text-align:left\">CSS &#x53d8;&#x91cf;&#xff0c;&#x4e3b;&#x9898;&#x5b9a;&#x5236;</td>\n<td style=\"text-align:left\">&#x4f01;&#x4e1a;&#x7ea7;&#x4e2d;&#x540e;&#x53f0;&#xff0c;&#x7ba1;&#x7406;&#x7cfb;&#x7edf;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1062,1073"}}],"payload":{"tag":"h5","lines":"1058,1059"}},{"content":"<strong>&#x8868;&#x683c;&#x4e8c;&#xff1a;&#x7ec4;&#x4ef6;&#x5e93;&#x7684;&#x6280;&#x672f;&#x7279;&#x70b9;&#x4e0e;&#x65b0;&#x5174;&#x8d8b;&#x52bf;&#x5bf9;&#x6bd4;</strong>","children":[{"content":"<table data-lines=\"1078,1086\">\n<thead data-lines=\"1078,1079\">\n<tr data-lines=\"1078,1079\">\n<th style=\"text-align:left\">&#x5e93;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x7ec4;&#x4ef6;&#x6a21;&#x5f0f;</th>\n<th style=\"text-align:left\">&#x6838;&#x5fc3;&#x6280;&#x672f;&#x6808;</th>\n<th style=\"text-align:left\">&#x4ee3;&#x7801;&#x6240;&#x6709;&#x6743;</th>\n<th style=\"text-align:left\">&#x5b9a;&#x5236;&#x5316;&#x7a0b;&#x5ea6;</th>\n<th style=\"text-align:left\">&#x4f9d;&#x8d56;&#x7ba1;&#x7406;</th>\n<th style=\"text-align:left\">&#x4e3b;&#x8981;&#x4f18;&#x52bf;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1080,1086\">\n<tr data-lines=\"1080,1081\">\n<td style=\"text-align:left\"><a href=\"https://ui.shadcn.com/\">shadcn/ui</a></td>\n<td style=\"text-align:left\">&#x975e;&#x5e93;&#x6a21;&#x5f0f;</td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a>, <a href=\"https://tailwindcss.com/\">Tailwind CSS</a>, <a href=\"https://www.radix-ui.com/\">Radix UI</a></td>\n<td style=\"text-align:left\">&#x5f00;&#x53d1;&#x8005;&#x5b8c;&#x5168;&#x62e5;&#x6709;</td>\n<td style=\"text-align:left\">&#x6781;&#x9ad8;</td>\n<td style=\"text-align:left\">&#x65e0;&#xff08;&#x4ee3;&#x7801;&#x76f4;&#x63a5;&#x590d;&#x5236;&#xff09;</td>\n<td style=\"text-align:left\">&#x6781;&#x81f4;&#x7075;&#x6d3b;&#x6027;&#xff0c;&#x65e0;&#x4f9d;&#x8d56;&#x9501;&#x5b9a;</td>\n</tr>\n<tr data-lines=\"1081,1082\">\n<td style=\"text-align:left\"><a href=\"https://www.radix-ui.com/\">Radix UI</a></td>\n<td style=\"text-align:left\">&#x65e0;&#x5934;&#x5e93;</td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a></td>\n<td style=\"text-align:left\">&#x5f00;&#x53d1;&#x8005;&#x62e5;&#x6709;&#xff08;&#x4f46;&#x9700;&#x5b89;&#x88c5;&#x5e93;&#xff09;</td>\n<td style=\"text-align:left\">&#x6781;&#x9ad8;&#xff08;&#x9700;&#x81ea;&#x884c;&#x5b9e;&#x73b0;&#x6837;&#x5f0f;&#xff09;</td>\n<td style=\"text-align:left\">&#x6709;</td>\n<td style=\"text-align:left\">&#x4e13;&#x6ce8;&#x4e8e;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#x548c;&#x903b;&#x8f91;</td>\n</tr>\n<tr data-lines=\"1082,1083\">\n<td style=\"text-align:left\"><a href=\"https://headlessui.com/\">Headless UI</a></td>\n<td style=\"text-align:left\">&#x65e0;&#x5934;&#x5e93;</td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a>, <a href=\"https://vuejs.org/\">Vue</a></td>\n<td style=\"text-align:left\">&#x5f00;&#x53d1;&#x8005;&#x62e5;&#x6709;&#xff08;&#x4f46;&#x9700;&#x5b89;&#x88c5;&#x5e93;&#xff09;</td>\n<td style=\"text-align:left\">&#x6781;&#x9ad8;&#xff08;&#x9700;&#x81ea;&#x884c;&#x5b9e;&#x73b0;&#x6837;&#x5f0f;&#xff09;</td>\n<td style=\"text-align:left\">&#x6709;</td>\n<td style=\"text-align:left\">&#x4e0e; <a href=\"https://tailwindcss.com/\">Tailwind CSS</a> &#x5b8c;&#x7f8e;&#x96c6;&#x6210;</td>\n</tr>\n<tr data-lines=\"1083,1084\">\n<td style=\"text-align:left\"><a href=\"https://www.tremor.so/\">Tremor</a></td>\n<td style=\"text-align:left\">&#x4e13;&#x7528;&#x7ec4;&#x4ef6;&#x5e93;</td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a>, <a href=\"https://tailwindcss.com/\">Tailwind CSS</a>, <a href=\"https://www.radix-ui.com/\">Radix UI</a></td>\n<td style=\"text-align:left\">&#x5f00;&#x53d1;&#x8005;&#x90e8;&#x5206;&#x62e5;&#x6709;</td>\n<td style=\"text-align:left\">&#x9ad8;</td>\n<td style=\"text-align:left\">&#x6709;</td>\n<td style=\"text-align:left\">&#x4e13;&#x4e3a;&#x6570;&#x636e;&#x4eea;&#x8868;&#x76d8;&#xff0c;&#x73b0;&#x4ee3;&#x5316;&#x6280;&#x672f;&#x6808;</td>\n</tr>\n<tr data-lines=\"1084,1085\">\n<td style=\"text-align:left\"><a href=\"https://mui.com/\">MUI</a></td>\n<td style=\"text-align:left\">&#x4f20;&#x7edf;&#x5e93;</td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a>, <a href=\"https://emotion.sh/\">Emotion</a>/<a href=\"https://styled-components.com/\">styled-components</a></td>\n<td style=\"text-align:left\">&#x65e0;&#xff08;&#x4f5c;&#x4e3a; <a href=\"https://www.npmjs.com/\">npm</a> &#x4f9d;&#x8d56;&#xff09;</td>\n<td style=\"text-align:left\">&#x4e2d;&#x9ad8;&#xff08;&#x901a;&#x8fc7;&#x4e3b;&#x9898;&#x548c;&#x6837;&#x5f0f;&#x91cd;&#x5199;&#xff09;</td>\n<td style=\"text-align:left\">&#x6709;</td>\n<td style=\"text-align:left\">&#x5f00;&#x7bb1;&#x5373;&#x7528;&#xff0c;&#x751f;&#x6001;&#x5b8c;&#x6574;&#xff0c;&#x6587;&#x6863;&#x5b8c;&#x5584;</td>\n</tr>\n<tr data-lines=\"1085,1086\">\n<td style=\"text-align:left\"><a href=\"https://ant.design/\">Ant Design</a></td>\n<td style=\"text-align:left\">&#x4f20;&#x7edf;&#x5e93;</td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a>, <a href=\"https://lesscss.org/\">Less</a></td>\n<td style=\"text-align:left\">&#x65e0;&#xff08;&#x4f5c;&#x4e3a; <a href=\"https://www.npmjs.com/\">npm</a> &#x4f9d;&#x8d56;&#xff09;</td>\n<td style=\"text-align:left\">&#x4e2d;&#x9ad8;&#xff08;&#x901a;&#x8fc7;&#x4e3b;&#x9898;&#x548c; CSS &#x53d8;&#x91cf;&#xff09;</td>\n<td style=\"text-align:left\">&#x6709;</td>\n<td style=\"text-align:left\">&#x4f01;&#x4e1a;&#x7ea7;&#x7ec4;&#x4ef6;&#x4e30;&#x5bcc;&#xff0c;&#x8bbe;&#x8ba1;&#x89c4;&#x8303;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1078,1086"}}],"payload":{"tag":"h5","lines":"1074,1075"}}],"payload":{"tag":"h4","lines":"1054,1055"}},{"content":"<strong>&#x7ec4;&#x4ef6;&#x5e93;&#x9009;&#x578b;&#x5efa;&#x8bae;</strong>","children":[{"content":"<strong>5.1 &#x603b;&#x7ed3;&#xff1a;&#x4ece;&#x5927;&#x4e00;&#x7edf;&#x5230;&#x767e;&#x82b1;&#x9f50;&#x653e;&#x7684;&#x7ec4;&#x4ef6;&#x5e93;&#x751f;&#x6001;</strong>","children":[],"payload":{"tag":"h5","lines":"1091,1092"}},{"content":"<strong>5.2 &#x9488;&#x5bf9;&#x4e0d;&#x540c;&#x9879;&#x76ee;&#x4e0e;&#x56e2;&#x961f;&#x7684;&#x9009;&#x578b;&#x5efa;&#x8bae;</strong>","children":[{"content":"<strong>&#x5feb;&#x901f;&#x539f;&#x578b;&#x5f00;&#x53d1;&#x6216;&#x5c0f;&#x578b;&#x9879;&#x76ee;&#xff1a;</strong> &#x63a8;&#x8350;&#x4f7f;&#x7528;<strong>&#x5f00;&#x7bb1;&#x5373;&#x7528;</strong>&#x3001;<strong>&#x8bbe;&#x8ba1;&#x7f8e;&#x89c2;</strong>&#x4e14;<strong>&#x6587;&#x6863;&#x5b8c;&#x5584;</strong>&#x7684;&#x201c;&#x6709;&#x89c2;&#x70b9;&#x201d;&#x7ec4;&#x4ef6;&#x5e93;&#xff0c;&#x5982; <a href=\"https://mui.com/\">MUI</a>&#x3001;<a href=\"https://vuetifyjs.com/\">Vuetify</a> &#x6216; <a href=\"https://element-plus.org/\">Element Plus</a>&#x3002;&#x8fd9;&#x4e9b;&#x5e93;&#x80fd;&#x6700;&#x5927;&#x5316;&#x5f00;&#x53d1;&#x6548;&#x7387;&#xff0c;&#x8ba9;&#x56e2;&#x961f;&#x5feb;&#x901f;&#x5c06;&#x60f3;&#x6cd5;&#x53d8;&#x4e3a;&#x73b0;&#x5b9e;&#xff0c;&#x800c;&#x65e0;&#x9700;&#x6295;&#x5165;&#x8fc7;&#x591a;&#x65f6;&#x95f4;&#x5728;&#x6837;&#x5f0f;&#x8bbe;&#x8ba1;&#x548c;&#x5b9a;&#x5236;&#x4e0a;&#x3002;","children":[],"payload":{"tag":"li","lines":"1099,1100"}},{"content":"<strong>&#x4f01;&#x4e1a;&#x7ea7;&#x4e2d;&#x540e;&#x53f0;&#x5e94;&#x7528;&#xff1a;</strong> &#x5efa;&#x8bae;&#x4f18;&#x5148;&#x8003;&#x8651; <a href=\"https://ant.design/\">Ant Design</a>&#x3001;<a href=\"https://ng.ant.design/\">NG-ZORRO</a> &#x6216; <a href=\"https://primeng.org/\">PrimeNG</a>&#x3002;&#x8fd9;&#x4e9b;&#x5e93;&#x63d0;&#x4f9b;&#x4e86;&#x5168;&#x9762;&#x7684;&#x4f01;&#x4e1a;&#x7ea7;&#x7ec4;&#x4ef6;&#xff0c;&#x5c24;&#x5176;&#x5728;&#x6570;&#x636e;&#x5904;&#x7406;&#x3001;&#x8868;&#x5355;&#x3001;&#x8868;&#x683c;&#x548c;&#x56fd;&#x9645;&#x5316;&#x65b9;&#x9762;&#x529f;&#x80fd;&#x5f3a;&#x5927;&#xff0c;&#x5e76;&#x901a;&#x5e38;&#x63d0;&#x4f9b;&#x5546;&#x4e1a;&#x652f;&#x6301;&#xff0c;&#x4e3a;&#x5173;&#x952e;&#x4e1a;&#x52a1;&#x5e94;&#x7528;&#x63d0;&#x4f9b;&#x4e86;&#x53ef;&#x9760;&#x4fdd;&#x969c;&#x3002;","children":[],"payload":{"tag":"li","lines":"1100,1101"}},{"content":"<strong>&#x9ad8;&#x5ea6;&#x5b9a;&#x5236;&#x5316;&#x54c1;&#x724c;&#x5b98;&#x7f51;&#x6216;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff1a;</strong> <strong>shadcn/ui</strong>&#x3001;<strong>Radix UI</strong>&#x4e0e; Tailwind CSS &#x7684;&#x7ec4;&#x5408;&#x662f;&#x7406;&#x60f3;&#x9009;&#x62e9;&#x3002;&#x8fd9;&#x79cd;&#x6a21;&#x5f0f;&#x63d0;&#x4f9b;&#x4e86;&#x6781;&#x81f4;&#x7684;&#x7075;&#x6d3b;&#x6027;&#x548c;&#x4ee3;&#x7801;&#x6240;&#x6709;&#x6743;&#xff0c;&#x5141;&#x8bb8;&#x56e2;&#x961f;&#x5b8c;&#x5168;&#x638c;&#x63a7;&#x7ec4;&#x4ef6;&#x7684;&#x5916;&#x89c2;&#x4e0e;&#x884c;&#x4e3a;&#xff0c;&#x4ece;&#x96f6;&#x5f00;&#x59cb;&#x6784;&#x5efa;&#x7b26;&#x5408;&#x54c1;&#x724c;&#x8c03;&#x6027;&#x7684;&#x72ec;&#x7279;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff0c;&#x800c;&#x4e0d;&#x4f1a;&#x53d7;&#x5230;&#x5e93;&#x7684;&#x4f9d;&#x8d56;&#x675f;&#x7f1a;&#x3002;","children":[],"payload":{"tag":"li","lines":"1101,1102"}},{"content":"<strong>&#x6570;&#x636e;&#x9a71;&#x52a8;&#x578b;&#x5e94;&#x7528;&#x6216;&#x4eea;&#x8868;&#x76d8;&#xff1a;</strong> &#x63a8;&#x8350;&#x91c7;&#x7528;<strong>&#x901a;&#x7528;&#x7ec4;&#x4ef6;&#x5e93; + &#x4e13;&#x4e1a;&#x56fe;&#x8868;&#x5e93;</strong>&#x7684;&#x6df7;&#x5408;&#x6a21;&#x5f0f;&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x4f7f;&#x7528; Chakra UI &#x6784;&#x5efa;&#x57fa;&#x7840;&#x754c;&#x9762;&#xff0c;&#x540c;&#x65f6;&#x96c6;&#x6210; Tremor &#x6216; Highcharts &#x6765;&#x5904;&#x7406;&#x590d;&#x6742;&#x7684;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x90e8;&#x5206;&#x3002;&#x8fd9;&#x79cd;&#x7ec4;&#x5408;&#x65e2;&#x80fd;&#x4eab;&#x53d7;&#x901a;&#x7528;&#x5e93;&#x7684;&#x9ad8;&#x6548;&#xff0c;&#x53c8;&#x80fd;&#x5229;&#x7528;&#x4e13;&#x7528;&#x5e93;&#x5728;&#x4e13;&#x4e1a;&#x9886;&#x57df;&#x7684;&#x5f3a;&#x5927;&#x529f;&#x80fd;&#x3002;","children":[],"payload":{"tag":"li","lines":"1102,1103"}},{"content":"<strong>&#x591a;&#x7aef;&#x90e8;&#x7f72;&#x9700;&#x6c42;&#xff1a;</strong> Quasar Framework &#x4ee5;&#x5176;<strong>&#x4e00;&#x5957;&#x4ee3;&#x7801;&#xff0c;&#x591a;&#x7aef;&#x90e8;&#x7f72;</strong>&#x7684;&#x72ec;&#x7279;&#x5b9a;&#x4f4d;&#xff0c;&#x6210;&#x4e3a;&#x9700;&#x8981;&#x540c;&#x65f6;&#x6784;&#x5efa; Web&#x3001;&#x79fb;&#x52a8;&#x548c;&#x684c;&#x9762;&#x5e94;&#x7528;&#x7684;&#x56e2;&#x961f;&#x7684;&#x5f3a;&#x5927;&#x9009;&#x62e9;&#x3002;&#x5b83;&#x80fd;&#x663e;&#x8457;&#x964d;&#x4f4e;&#x8de8;&#x5e73;&#x53f0;&#x5f00;&#x53d1;&#x7684;&#x590d;&#x6742;&#x6027;&#xff0c;&#x5e76;&#x7edf;&#x4e00;&#x6280;&#x672f;&#x6808;&#xff0c;&#x5b9e;&#x73b0;&#x8d44;&#x6e90;&#x7684;&#x6700;&#x5927;&#x5316;&#x5229;&#x7528;&#x3002;","children":[],"payload":{"tag":"li","lines":"1103,1105"}}],"payload":{"tag":"h5","lines":"1095,1096"}}],"payload":{"tag":"h4","lines":"1089,1090"}}],"payload":{"tag":"h3","lines":"868,869"}},{"content":"<strong>&#x5143;&#x6846;&#x67b6;&#xff1a;&#x589e;&#x5f3a;&#x5f00;&#x53d1;&#x4f53;&#x9a8c;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x9886;&#x5148;&#x5143;&#x6846;&#x67b6;&#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"1119,1125\">\n<thead data-lines=\"1119,1120\">\n<tr data-lines=\"1119,1120\">\n<th style=\"text-align:left\">&#x6846;&#x67b6;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x5e95;&#x5c42; UI &#x6846;&#x67b6;</th>\n<th style=\"text-align:left\">&#x4e3b;&#x8981;&#x6e32;&#x67d3;&#x7b56;&#x7565;</th>\n<th style=\"text-align:left\">&#x6570;&#x636e;&#x83b7;&#x53d6;&#x6a21;&#x578b;</th>\n<th style=\"text-align:left\">&#x6027;&#x80fd;&#x5173;&#x6ce8;&#x70b9;</th>\n<th style=\"text-align:left\">&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;</th>\n<th style=\"text-align:left\">&#x7406;&#x60f3;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1121,1125\">\n<tr data-lines=\"1121,1122\">\n<td style=\"text-align:left\"><a href=\"https://nextjs.org/\"><strong>Next.js</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a></td>\n<td style=\"text-align:left\">SSR, SSG, ISR, &#x6df7;&#x5408;</td>\n<td style=\"text-align:left\">&#x591a;&#x79cd;&#x7b56;&#x7565;&#xff0c;&#x7075;&#x6d3b;</td>\n<td style=\"text-align:left\">&#x521d;&#x59cb;&#x52a0;&#x8f7d;&#xff0c;&#x6e10;&#x8fdb;&#x5f0f;&#x6d41;</td>\n<td style=\"text-align:left\">&#x7075;&#x6d3b;&#xff0c;&#x53ef;&#x5b9a;&#x5236;</td>\n<td style=\"text-align:left\">&#x5168;&#x6808;&#x5e94;&#x7528;&#xff0c;SEO &#x53cb;&#x597d;&#x578b;&#x7f51;&#x7ad9;&#xff0c;&#x5185;&#x5bb9;&#x7ba1;&#x7406;&#x7cfb;&#x7edf;</td>\n</tr>\n<tr data-lines=\"1122,1123\">\n<td style=\"text-align:left\"><a href=\"https://remix.run/\"><strong>Remix</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a></td>\n<td style=\"text-align:left\">SSR, &#x6e10;&#x8fdb;&#x5f0f;&#x589e;&#x5f3a;</td>\n<td style=\"text-align:left\">&#x5355;&#x4e00; Loader &#x51fd;&#x6570;&#xff0c;&#x670d;&#x52a1;&#x5668;&#x4f18;&#x5148;</td>\n<td style=\"text-align:left\">&#x521d;&#x59cb;&#x52a0;&#x8f7d;&#xff0c;&#x6570;&#x636e;&#x9a71;&#x52a8;</td>\n<td style=\"text-align:left\">&#x4e00;&#x81f4;&#x6027;&#xff0c;</td>\n<td style=\"text-align:left\">&#x52a8;&#x6001;&#x6570;&#x636e;&#x5bc6;&#x96c6;&#x578b;&#x5e94;&#x7528;&#xff0c;&#x590d;&#x6742;&#x8def;&#x7531;</td>\n</tr>\n<tr data-lines=\"1123,1124\">\n<td style=\"text-align:left\"><a href=\"https://astro.build/\"><strong>Astro</strong></a></td>\n<td style=\"text-align:left\">&#x6846;&#x67b6;&#x65e0;&#x5173;</td>\n<td style=\"text-align:left\">Islands &#x67b6;&#x6784;&#xff0c;SSG</td>\n<td style=\"text-align:left\">&#x4ec5;&#x52a0;&#x8f7d;&#x4ea4;&#x4e92;&#x7ec4;&#x4ef6;&#x7684; JS</td>\n<td style=\"text-align:left\">&#x6781;&#x4f4e; JS &#x8d1f;&#x8f7d;&#xff0c;&#x5feb;&#x901f; <a href=\"https://web.dev/lcp/\">LCP</a></td>\n<td style=\"text-align:left\">&#x591a;&#x6846;&#x67b6;&#x652f;&#x6301;&#xff0c;&#x5185;&#x5bb9;&#x4f18;&#x5148;</td>\n<td style=\"text-align:left\">&#x5185;&#x5bb9;&#x9a71;&#x52a8;&#x578b;&#x7f51;&#x7ad9;&#xff0c;&#x535a;&#x5ba2;&#xff0c;&#x8425;&#x9500;&#x7ad9;</td>\n</tr>\n<tr data-lines=\"1124,1125\">\n<td style=\"text-align:left\"><a href=\"https://qwik.builder.io/\"><strong>Qwik</strong></a></td>\n<td style=\"text-align:left\">&#x6846;&#x67b6;&#x65e0;&#x5173;</td>\n<td style=\"text-align:left\">&#x53ef;&#x6062;&#x590d;&#x6027;&#xff0c;SSG/SSR</td>\n<td style=\"text-align:left\">&#x60f0;&#x6027;&#x52a0;&#x8f7d;&#xff0c;&#x65e0;&#x9700;&#x6c34;&#x5408;</td>\n<td style=\"text-align:left\">&#x5373;&#x65f6;&#x542f;&#x52a8;&#xff0c;&#x6781;&#x4f4e; JS &#x8d1f;&#x8f7d;</td>\n<td style=\"text-align:left\">&#x521b;&#x65b0;&#xff0c;&#x6027;&#x80fd;&#x4f18;&#x5148;</td>\n<td style=\"text-align:left\">&#x6027;&#x80fd;&#x5173;&#x952e;&#x578b;&#x5e94;&#x7528;&#xff0c;&#x79fb;&#x52a8;&#x7aef;&#x4f18;&#x5316;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1119,1125"}}],"payload":{"tag":"h4","lines":"1117,1118"}}],"payload":{"tag":"h3","lines":"1105,1106"}},{"content":"<strong>&#x66ff;&#x4ee3;&#x65b9;&#x6cd5;&#xff1a;htmx &#x7684;&#x8d85;&#x5a92;&#x4f53;&#x9a71;&#x52a8;&#x5f00;&#x53d1;</strong>","children":[],"payload":{"tag":"h3","lines":"1128,1129"}},{"content":"<strong>&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#xff1a;&#x96c6;&#x4e2d;&#x5316;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x6570;&#x636e;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x4e3b;&#x8981;&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x5e93;&#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"1151,1159\">\n<thead data-lines=\"1151,1152\">\n<tr data-lines=\"1151,1152\">\n<th style=\"text-align:left\">&#x5e93;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x6846;&#x67b6;&#x517c;&#x5bb9;&#x6027;</th>\n<th style=\"text-align:left\">&#x8bbe;&#x8ba1;&#x54f2;&#x5b66;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</th>\n<th style=\"text-align:left\">&#x6837;&#x677f;&#x4ee3;&#x7801;</th>\n<th style=\"text-align:left\"><a href=\"https://www.typescriptlang.org/\">TypeScript</a> &#x652f;&#x6301;</th>\n<th style=\"text-align:left\">&#x6027;&#x80fd;/&#x5305;&#x5927;&#x5c0f;</th>\n<th style=\"text-align:left\">&#x7406;&#x60f3;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1153,1159\">\n<tr data-lines=\"1153,1154\">\n<td style=\"text-align:left\"><a href=\"https://redux-toolkit.js.org/\"><strong>Redux Toolkit</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a></td>\n<td style=\"text-align:left\">&#x96c6;&#x4e2d;&#x5f0f;&#x5b58;&#x50a8;&#xff0c;&#x53ef;&#x9884;&#x6d4b;&#x72b6;&#x6001;</td>\n<td style=\"text-align:left\">&#x8f83;&#x9661;&#x5ced;</td>\n<td style=\"text-align:left\">&#x8f83;&#x591a;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5927;</td>\n<td style=\"text-align:left\">&#x5927;&#x578b;&#x590d;&#x6742;&#x5e94;&#x7528;&#xff0c;&#x9700;&#x8981;&#x53ef;&#x9884;&#x6d4b;&#x72b6;&#x6001;&#x6d41;</td>\n</tr>\n<tr data-lines=\"1154,1155\">\n<td style=\"text-align:left\"><a href=\"https://zustand-demo.pmnd.rs/\"><strong>Zustand</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a></td>\n<td style=\"text-align:left\">&#x6781;&#x7b80;&#xff0c;&#x5355;&#x4e00;&#x5b58;&#x50a8;</td>\n<td style=\"text-align:left\">&#x8f83;&#x4f4e;</td>\n<td style=\"text-align:left\">&#x6781;&#x5c11;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x4e2d;&#x5c0f;&#x578b;&#x5e94;&#x7528;&#xff0c;&#x6ce8;&#x91cd;&#x7b80;&#x5355;&#x548c;&#x6027;&#x80fd;</td>\n</tr>\n<tr data-lines=\"1155,1156\">\n<td style=\"text-align:left\"><a href=\"https://recoiljs.org/\"><strong>Recoil</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a></td>\n<td style=\"text-align:left\">&#x539f;&#x5b50;&#xff0c;&#x6d3e;&#x751f;&#x72b6;&#x6001;</td>\n<td style=\"text-align:left\">&#x4e2d;&#x7b49;</td>\n<td style=\"text-align:left\">&#x4e2d;&#x7b49;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x590d;&#x6742;&#x72b6;&#x6001;&#x4f9d;&#x8d56;&#xff0c;&#x5e76;&#x53d1;&#x7279;&#x6027;&#x96c6;&#x6210;</td>\n</tr>\n<tr data-lines=\"1156,1157\">\n<td style=\"text-align:left\"><a href=\"https://jotai.org/\"><strong>Jotai</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a></td>\n<td style=\"text-align:left\">&#x539f;&#x5b50;&#xff0c;&#x81ea;&#x4e0b;&#x800c;&#x4e0a;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5e73;&#x7f13;</td>\n<td style=\"text-align:left\">&#x6781;&#x5c11;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\">&#x6781;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x7ec6;&#x7c92;&#x5ea6;&#x72b6;&#x6001;&#x63a7;&#x5236;&#xff0c;&#x4ee3;&#x7801;&#x5206;&#x5272;&#xff0c;Suspense</td>\n</tr>\n<tr data-lines=\"1157,1158\">\n<td style=\"text-align:left\"><a href=\"https://pinia.vuejs.org/\"><strong>Pinia</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://vuejs.org/\">Vue</a></td>\n<td style=\"text-align:left\">&#x6a21;&#x5757;&#x5316;&#xff0c;&#x65e0; Mutations</td>\n<td style=\"text-align:left\">&#x8f83;&#x4f4e;</td>\n<td style=\"text-align:left\">&#x6781;&#x5c11;</td>\n<td style=\"text-align:left\">&#x4f18;&#x79c0;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x65b0;&#x7684; <a href=\"https://vuejs.org/\">Vue</a> 3 &#x9879;&#x76ee;&#xff0c;&#x6ce8;&#x91cd;&#x7b80;&#x5355;&#x548c; <a href=\"https://www.typescriptlang.org/\">TypeScript</a></td>\n</tr>\n<tr data-lines=\"1158,1159\">\n<td style=\"text-align:left\"><a href=\"https://vuex.vuejs.org/\"><strong>Vuex</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://vuejs.org/\">Vue</a></td>\n<td style=\"text-align:left\">&#x96c6;&#x4e2d;&#x5f0f;&#x5b58;&#x50a8;&#xff0c;&#x4e25;&#x683c;&#x7ed3;&#x6784;</td>\n<td style=\"text-align:left\">&#x4e2d;&#x7b49;</td>\n<td style=\"text-align:left\">&#x8f83;&#x591a;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5f31;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5927;</td>\n<td style=\"text-align:left\">&#x9057;&#x7559; <a href=\"https://vuejs.org/\">Vue</a> 2 &#x9879;&#x76ee;&#xff0c;&#x9700;&#x8981;&#x4e25;&#x683c;&#x67b6;&#x6784;&#x7684;&#x5927;&#x578b;&#x5e94;&#x7528;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1151,1159"}}],"payload":{"tag":"h4","lines":"1149,1150"}}],"payload":{"tag":"h3","lines":"1136,1137"}},{"content":"<strong>&#x6570;&#x636e;&#x83b7;&#x53d6;&#x548c;&#x7f13;&#x5b58;&#x5e93;&#xff1a;SWR&#x3001;TanStack Query&#x3001;Axios&#x3001;Fetch API</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x6570;&#x636e;&#x83b7;&#x53d6;&#x548c;&#x7f13;&#x5b58;&#x5e93;&#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"1175,1181\">\n<thead data-lines=\"1175,1176\">\n<tr data-lines=\"1175,1176\">\n<th style=\"text-align:left\">&#x5e93;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x7c7b;&#x578b;</th>\n<th style=\"text-align:left\">&#x6838;&#x5fc3;&#x7b56;&#x7565;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x7f13;&#x5b58;&#x63a7;&#x5236;</th>\n<th style=\"text-align:left\">API &#x7b80;&#x6d01;&#x6027;</th>\n<th style=\"text-align:left\">DevTools</th>\n<th style=\"text-align:left\">&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1177,1181\">\n<tr data-lines=\"1177,1178\">\n<td style=\"text-align:left\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\"><strong>Fetch API</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a> &#x5ba2;&#x6237;&#x7aef;</td>\n<td style=\"text-align:left\">&#x539f;&#x751f;&#x6d4f;&#x89c8;&#x5668; API&#xff0c;Promise-based</td>\n<td style=\"text-align:left\">&#x65e0;&#x5185;&#x7f6e;&#x7f13;&#x5b58;</td>\n<td style=\"text-align:left\">&#x7b80;&#x6d01;</td>\n<td style=\"text-align:left\">&#x6d4f;&#x89c8;&#x5668;&#x5185;&#x7f6e;</td>\n<td style=\"text-align:left\">&#x57fa;&#x672c; <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a> &#x8bf7;&#x6c42;&#xff0c;&#x8f7b;&#x91cf;&#x7ea7;&#x6570;&#x636e;&#x4ea4;&#x4e92;</td>\n</tr>\n<tr data-lines=\"1178,1179\">\n<td style=\"text-align:left\"><a href=\"https://axios-http.com/\"><strong>Axios</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a> &#x5ba2;&#x6237;&#x7aef;</td>\n<td style=\"text-align:left\">Promise-based&#xff0c;&#x62e6;&#x622a;&#x5668;</td>\n<td style=\"text-align:left\">&#x65e0;&#x5185;&#x7f6e;&#x7f13;&#x5b58;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\">&#x6d4f;&#x89c8;&#x5668;&#x5185;&#x7f6e;</td>\n<td style=\"text-align:left\">&#x590d;&#x6742; <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a> &#x8bf7;&#x6c42;&#xff0c;<a href=\"https://nodejs.org/\">Node.js</a> &#x548c;&#x6d4f;&#x89c8;&#x5668;&#x901a;&#x7528;</td>\n</tr>\n<tr data-lines=\"1179,1180\">\n<td style=\"text-align:left\"><a href=\"https://swr.vercel.app/\"><strong>SWR</strong></a></td>\n<td style=\"text-align:left\">&#x670d;&#x52a1;&#x5668;&#x72b6;&#x6001;&#x7ba1;&#x7406;</td>\n<td style=\"text-align:left\">Stale-while-revalidate</td>\n<td style=\"text-align:left\">&#x81ea;&#x52a8;&#x7f13;&#x5b58;&#xff0c;&#x540e;&#x53f0;&#x91cd;&#x65b0;&#x9a8c;&#x8bc1;</td>\n<td style=\"text-align:left\">&#x6781;&#x7b80;</td>\n<td style=\"text-align:left\">&#x65e0;&#x5185;&#x7f6e;</td>\n<td style=\"text-align:left\">&#x7b80;&#x5355;&#x6570;&#x636e;&#x83b7;&#x53d6;&#x548c;&#x7f13;&#x5b58;&#xff0c;&#x5feb;&#x901f;&#x66f4;&#x65b0;&#x611f;&#x77e5;</td>\n</tr>\n<tr data-lines=\"1180,1181\">\n<td style=\"text-align:left\"><a href=\"https://tanstack.com/query/latest\"><strong>TanStack Query</strong></a></td>\n<td style=\"text-align:left\">&#x670d;&#x52a1;&#x5668;&#x72b6;&#x6001;&#x7ba1;&#x7406;</td>\n<td style=\"text-align:left\">&#x7efc;&#x5408;&#x6570;&#x636e;&#x7ba1;&#x7406;</td>\n<td style=\"text-align:left\">&#x7ec6;&#x7c92;&#x5ea6;&#x63a7;&#x5236;&#xff0c;&#x5783;&#x573e;&#x56de;&#x6536;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\">&#x5185;&#x7f6e;</td>\n<td style=\"text-align:left\">&#x590d;&#x6742;&#x6570;&#x636e;&#x7ba1;&#x7406;&#xff0c;&#x9ad8;&#x7ea7;&#x7f13;&#x5b58;&#xff0c;&#x4e50;&#x89c2;&#x66f4;&#x65b0;&#xff0c;&#x6027;&#x80fd;&#x4f18;&#x5316;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1175,1181"}}],"payload":{"tag":"h4","lines":"1173,1174"}}],"payload":{"tag":"h3","lines":"1162,1163"}},{"content":"<strong>&#x7406;&#x89e3;&#x670d;&#x52a1;&#x5668;&#x72b6;&#x6001;&#x4e0e;&#x5ba2;&#x6237;&#x7aef;&#x72b6;&#x6001;</strong>","children":[{"content":"<strong>&#x5ba2;&#x6237;&#x7aef;&#x72b6;&#x6001;</strong>&#xff1a;&#x4ec5;&#x5b58;&#x5728;&#x5e76;&#x7ba1;&#x7406;&#x4e8e;&#x5ba2;&#x6237;&#x7aef;&#xff08;&#x6d4f;&#x89c8;&#x5668;&#xff09;&#x7684;&#x6570;&#x636e;&#xff0c;&#x901a;&#x5e38;&#x4e0e; UI &#x4ea4;&#x4e92;&#x76f8;&#x5173;&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x6a21;&#x6001;&#x6846;&#x6253;&#x5f00;/&#x5173;&#x95ed;&#x3001;&#x8868;&#x5355;&#x8f93;&#x5165;&#x503c;&#x3001;&#x4e3b;&#x9898;&#x504f;&#x597d;&#xff09;&#x3002;&#x7531; React &#x7684; useState&#x3001;Context &#x6216;&#x5ba2;&#x6237;&#x7aef;&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x5e93;&#x7ba1;&#x7406;&#x3002;","children":[],"payload":{"tag":"li","lines":"1186,1187"}},{"content":"<strong>&#x670d;&#x52a1;&#x5668;&#x72b6;&#x6001;</strong>&#xff1a;&#x6e90;&#x81ea;&#x8fdc;&#x7a0b;&#x7cfb;&#x7edf;&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x6570;&#x636e;&#x5e93;&#x3001;API&#xff09;&#x7684;&#x6570;&#x636e;&#xff0c;&#x9700;&#x8981;&#x83b7;&#x53d6;&#x3001;&#x7f13;&#x5b58;&#x5e76;&#x4e0e;&#x5ba2;&#x6237;&#x7aef;&#x540c;&#x6b65;&#x3002;&#x7531; SWR &#x6216; TanStack Query &#x7b49;&#x6570;&#x636e;&#x83b7;&#x53d6;&#x5e93;&#x7ba1;&#x7406;&#xff0c;&#x6216;&#x7531;&#x5143;&#x6846;&#x67b6;&#x4e2d;&#x7684;&#x670d;&#x52a1;&#x5668;&#x7ec4;&#x4ef6;&#x7ba1;&#x7406;&#x3002;","children":[],"payload":{"tag":"li","lines":"1187,1189"}}],"payload":{"tag":"h3","lines":"1184,1185"}},{"content":"<strong>&#x73b0;&#x4ee3;&#x540e;&#x7aef;&#x96c6;&#x6210;&#x6a21;&#x5f0f;</strong>","children":[{"content":"<strong>GraphQL</strong>","children":[],"payload":{"tag":"h4","lines":"1195,1196"}},{"content":"<strong>gRPC-Web</strong>","children":[],"payload":{"tag":"h4","lines":"1203,1204"}},{"content":"<strong>tRPC&#xff1a;&#x7c7b;&#x578b;&#x5b89;&#x5168;</strong>","children":[{"content":"\n<p data-lines=\"1213,1214\"><strong>&#x6838;&#x5fc3;&#x7406;&#x5ff5;</strong>&#xff1a;tRPC &#x7684;&#x9b54;&#x6cd5;&#x5728;&#x4e8e;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x5728;&#x540e;&#x7aef;&#x5b9a;&#x4e49; API &#x8def;&#x7531;&#x548c;&#x903b;&#x8f91;&#xff0c;&#x524d;&#x7aef;&#x4fbf;&#x80fd;&#x901a;&#x8fc7;&#x7c7b;&#x578b;&#x5bfc;&#x5165;&#x76f4;&#x63a5;&#x63a8;&#x65ad;&#x51fa; API &#x7684;&#x5b8c;&#x6574;&#x7c7b;&#x578b;&#x7b7e;&#x540d;&#x3002;&#x8fd9;&#x610f;&#x5473;&#x7740;&#xff0c;&#x5f53;&#x4f60;&#x5728;&#x524d;&#x7aef;&#x8c03;&#x7528;&#x67d0;&#x4e2a;&#x540e;&#x7aef;&#x51fd;&#x6570;&#x65f6;&#xff0c;&#x5176;&#x53c2;&#x6570;&#x7c7b;&#x578b;&#x3001;&#x8fd4;&#x56de;&#x503c;&#x7c7b;&#x578b;&#x90fd;&#x4f1a;&#x88ab;&#x81ea;&#x52a8;&#x8bc6;&#x522b;&#x3002;&#x6574;&#x4e2a;&#x8fc7;&#x7a0b;<strong>&#x6ca1;&#x6709;&#x4e2d;&#x95f4;&#x7684; Schema &#x5b9a;&#x4e49;&#x8bed;&#x8a00;&#xff08;&#x5982; GraphQL &#x7684; SDL&#xff09;&#x6216;&#x4ee3;&#x7801;&#x751f;&#x6210;&#x6b65;&#x9aa4;</strong>&#xff0c;&#x5b9e;&#x73b0;&#x4e86;&#x771f;&#x6b63;&#x7684;&#x201c;&#x5355;&#x4e00;&#x4e8b;&#x5b9e;&#x6765;&#x6e90;&#x201d;&#xff08;Single Source of Truth&#xff09;&#xff0c;&#x5373;&#x540e;&#x7aef;&#x7684; TypeScript &#x4ee3;&#x7801;&#x672c;&#x8eab;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1213,1215"}},{"content":"\n<p data-lines=\"1215,1216\"><strong>&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;&#x7684;&#x9769;&#x547d;</strong>&#xff1a;&#x8fd9;&#x79cd;&#x6a21;&#x5f0f;&#x6781;&#x5927;&#x5730;&#x7b80;&#x5316;&#x4e86;&#x5168;&#x6808;&#x5f00;&#x53d1;&#x6d41;&#x7a0b;&#x3002;&#x5f53;&#x524d;&#x540e;&#x7aef; API &#x53d1;&#x751f;&#x53d8;&#x66f4;&#x65f6;&#xff08;&#x4f8b;&#x5982;&#x4fee;&#x6539;&#x67d0;&#x4e2a;&#x51fd;&#x6570;&#x53c2;&#x6570;&#xff09;&#xff0c;TypeScript &#x7f16;&#x8bd1;&#x5668;&#x4f1a;&#x7acb;&#x523b;&#x5728;&#x524d;&#x7aef;&#x4ee3;&#x7801;&#x4e2d;&#x6807;&#x8bb0;&#x51fa;&#x6240;&#x6709;&#x9700;&#x8981;&#x4fee;&#x6539;&#x7684;&#x5730;&#x65b9;&#xff0c;&#x4ece;&#x6839;&#x672c;&#x4e0a;&#x6d88;&#x9664;&#x4e86;&#x524d;&#x540e;&#x7aef;&#x6570;&#x636e;&#x5951;&#x7ea6;&#x4e0d;&#x4e00;&#x81f4;&#x7684;&#x98ce;&#x9669;&#x3002;&#x5b83;&#x5e26;&#x6765;&#x4e86;&#x65e0;&#x4e0e;&#x4f26;&#x6bd4;&#x7684;&#x5f00;&#x53d1;&#x901f;&#x5ea6;&#x548c;&#x91cd;&#x6784;&#x4fe1;&#x5fc3;&#xff0c;&#x4f7f;&#x5f97;&#x5168;&#x6808; TypeScript &#x5e94;&#x7528;&#x7684;&#x5f00;&#x53d1;&#x4f53;&#x9a8c;&#x5982;&#x4e1d;&#x822c;&#x987a;&#x6ed1;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1215,1217"}},{"content":"\n<p data-lines=\"1217,1218\"><strong>&#x4e0e; GraphQL &#x548c; REST &#x7684;&#x5bf9;&#x6bd4;</strong>&#xff1a;</p>","children":[{"content":"&#x76f8;&#x8f83;&#x4e8e; REST&#xff0c;tRPC &#x63d0;&#x4f9b;&#x4e86;&#x7aef;&#x5230;&#x7aef;&#x7684;&#x7c7b;&#x578b;&#x5b89;&#x5168;&#xff0c;&#x907f;&#x514d;&#x4e86;&#x624b;&#x52a8;&#x7ef4;&#x62a4; API &#x6587;&#x6863;&#x548c;&#x7c7b;&#x578b;&#x5b9a;&#x4e49;&#x7684;&#x7e41;&#x7410;&#x5de5;&#x4f5c;&#x3002;","children":[],"payload":{"tag":"li","lines":"1218,1219"}},{"content":"&#x76f8;&#x8f83;&#x4e8e; GraphQL&#xff0c;tRPC &#x5728;&#x5b9e;&#x73b0;&#x7c7b;&#x578b;&#x5b89;&#x5168;&#x7684;&#x540c;&#x65f6;&#xff0c;&#x907f;&#x514d;&#x4e86;&#x7f16;&#x5199; Schema &#x548c;&#x89e3;&#x6790;&#x590d;&#x6742;&#x67e5;&#x8be2;&#x7684;&#x5f00;&#x9500;&#xff0c;&#x5176;&#x5fc3;&#x667a;&#x6a21;&#x578b;&#x66f4;&#x63a5;&#x8fd1;&#x4e8e;&#x4f20;&#x7edf;&#x7684;&#x51fd;&#x6570;&#x8c03;&#x7528;&#xff0c;&#x66f4;&#x4e3a;&#x8f7b;&#x91cf;&#x548c;&#x76f4;&#x63a5;&#x3002;","children":[],"payload":{"tag":"li","lines":"1219,1221"}}],"payload":{"tag":"li","lines":"1217,1221"}}],"payload":{"tag":"h4","lines":"1209,1210"}},{"content":"<strong>&#x5b9e;&#x65f6;&#x901a;&#x4fe1;&#x65b9;&#x6848;</strong>","children":[],"payload":{"tag":"h4","lines":"1223,1224"}},{"content":"<strong>Headless CMS &#x96c6;&#x6210;</strong>","children":[],"payload":{"tag":"h4","lines":"1231,1232"}},{"content":"<strong>&#x8868;&#xff1a;API &#x901a;&#x4fe1;&#x6a21;&#x5f0f;&#x5bf9;&#x6bd4; (GraphQL vs. REST)</strong>","children":[{"content":"<table data-lines=\"1241,1251\">\n<thead data-lines=\"1241,1242\">\n<tr data-lines=\"1241,1242\">\n<th style=\"text-align:left\">&#x7279;&#x6027;/&#x6a21;&#x5f0f;</th>\n<th style=\"text-align:left\">REST (Representational State Transfer)</th>\n<th style=\"text-align:left\"><a href=\"https://graphql.org/\">GraphQL</a> (Graph Query Language)</th>\n</tr>\n</thead>\n<tbody data-lines=\"1243,1251\">\n<tr data-lines=\"1243,1244\">\n<td style=\"text-align:left\"><strong>&#x8bf7;&#x6c42;&#x65b9;&#x5f0f;</strong></td>\n<td style=\"text-align:left\">&#x57fa;&#x4e8e; <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a> &#x52a8;&#x8bcd;&#xff08;GET, POST, PUT, DELETE&#xff09;&#xff0c;&#x901a;&#x8fc7; URL &#x6807;&#x8bc6;&#x8d44;&#x6e90;</td>\n<td style=\"text-align:left\">&#x901a;&#x5e38;&#x901a;&#x8fc7; <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a> POST&#xff0c;&#x4f7f;&#x7528; query, mutation, subscription &#x5b9a;&#x4e49;&#x64cd;&#x4f5c;</td>\n</tr>\n<tr data-lines=\"1244,1245\">\n<td style=\"text-align:left\"><strong>&#x6570;&#x636e;&#x8fd4;&#x56de;</strong></td>\n<td style=\"text-align:left\">&#x670d;&#x52a1;&#x5668;&#x5b9a;&#x4e49;&#x7684;&#x6574;&#x4e2a;&#x8d44;&#x6e90;&#x7ed3;&#x6784;&#xff0c;&#x53ef;&#x80fd;&#x5b58;&#x5728;&#x8fc7;&#x5ea6;&#x6216;&#x4e0d;&#x8db3;&#x83b7;&#x53d6;</td>\n<td style=\"text-align:left\">&#x5ba2;&#x6237;&#x7aef;&#x7cbe;&#x786e;&#x6307;&#x5b9a;&#x6240;&#x9700;&#x6570;&#x636e;&#xff0c;&#x53ea;&#x8fd4;&#x56de;&#x6240;&#x9700;&#x5b57;&#x6bb5;</td>\n</tr>\n<tr data-lines=\"1245,1246\">\n<td style=\"text-align:left\"><strong>&#x7aef;&#x70b9;&#x6570;&#x91cf;</strong></td>\n<td style=\"text-align:left\">&#x901a;&#x5e38;&#x4e3a;&#x6bcf;&#x4e2a;&#x8d44;&#x6e90;&#x6216;&#x8d44;&#x6e90;&#x96c6;&#x5408;&#x5b9a;&#x4e49;&#x591a;&#x4e2a;&#x7aef;&#x70b9;</td>\n<td style=\"text-align:left\">&#x5355;&#x4e00;&#x7aef;&#x70b9;&#xff08;&#x901a;&#x5e38;&#x4e3a;/<a href=\"https://graphql.org/\">graphql</a>&#xff09;&#x5904;&#x7406;&#x6240;&#x6709;&#x67e5;&#x8be2;</td>\n</tr>\n<tr data-lines=\"1246,1247\">\n<td style=\"text-align:left\"><strong>&#x670d;&#x52a1;&#x5668;&#x7aef; Schema</strong></td>\n<td style=\"text-align:left\">&#x53ef;&#x9009;&#xff0c;&#x901a;&#x5e38;&#x901a;&#x8fc7;&#x6587;&#x6863;&#x6216;&#x7ea6;&#x5b9a;&#x5b9a;&#x4e49;</td>\n<td style=\"text-align:left\">&#x5f3a;&#x5236;&#x8981;&#x6c42;&#xff0c;&#x4f7f;&#x7528; SDL &#x5b9a;&#x4e49;&#x5f3a;&#x7c7b;&#x578b;&#x7cfb;&#x7edf;&#xff0c;&#x81ea;&#x6587;&#x6863;&#x5316;</td>\n</tr>\n<tr data-lines=\"1247,1248\">\n<td style=\"text-align:left\"><strong>&#x7248;&#x672c;&#x5316;</strong></td>\n<td style=\"text-align:left\">&#x901a;&#x5e38;&#x901a;&#x8fc7; URL &#x7248;&#x672c;&#x5316;&#xff08;&#x5982;/v1/&#xff09;&#xff0c;&#x53ef;&#x80fd;&#x5bfc;&#x81f4;&#x517c;&#x5bb9;&#x6027;&#x95ee;&#x9898;</td>\n<td style=\"text-align:left\">&#x901a;&#x8fc7;&#x5e9f;&#x5f03;&#x5b57;&#x6bb5;&#x5b9e;&#x73b0;&#x5411;&#x540e;&#x517c;&#x5bb9;&#xff0c;&#x901a;&#x5e38;&#x65e0;&#x9700;&#x7248;&#x672c;&#x5316;</td>\n</tr>\n<tr data-lines=\"1248,1249\">\n<td style=\"text-align:left\"><strong>&#x7f13;&#x5b58;</strong></td>\n<td style=\"text-align:left\">&#x57fa;&#x4e8e; <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a> &#x7f13;&#x5b58;&#x673a;&#x5236;&#xff0c;&#x6613;&#x4e8e;&#x5b9e;&#x73b0;</td>\n<td style=\"text-align:left\">&#x590d;&#x6742;&#xff0c;&#x56e0;&#x67e5;&#x8be2;&#x52a8;&#x6001;&#x6027;&#xff0c;&#x96be;&#x4ee5;&#x8fdb;&#x884c;&#x901a;&#x7528;&#x7f13;&#x5b58;</td>\n</tr>\n<tr data-lines=\"1249,1250\">\n<td style=\"text-align:left\"><strong>&#x590d;&#x6742;&#x6027;</strong></td>\n<td style=\"text-align:left\">&#x7b80;&#x5355;&#x76f4;&#x89c2;&#xff0c;&#x6613;&#x4e8e;&#x4e0a;&#x624b;</td>\n<td style=\"text-align:left\">&#x5b66;&#x4e60;&#x66f2;&#x7ebf;&#x8f83;&#x9661;&#x5ced;&#xff0c;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x5b9e;&#x73b0;&#x590d;&#x6742;</td>\n</tr>\n<tr data-lines=\"1250,1251\">\n<td style=\"text-align:left\"><strong>&#x9002;&#x7528;&#x573a;&#x666f;</strong></td>\n<td style=\"text-align:left\">&#x8d44;&#x6e90;&#x660e;&#x786e;&#x3001;&#x6570;&#x636e;&#x7ed3;&#x6784;&#x56fa;&#x5b9a;&#x3001;&#x7b80;&#x5355; CRUD &#x64cd;&#x4f5c;</td>\n<td style=\"text-align:left\">&#x5ba2;&#x6237;&#x7aef;&#x6570;&#x636e;&#x9700;&#x6c42;&#x591a;&#x53d8;&#x3001;&#x9700;&#x8981;&#x805a;&#x5408;&#x591a;&#x6570;&#x636e;&#x6e90;&#x3001;&#x51cf;&#x5c11;&#x8bf7;&#x6c42;&#x6b21;&#x6570;&#x3001;&#x79fb;&#x52a8;&#x7aef;&#x4f18;&#x5316;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1241,1251"}}],"payload":{"tag":"h4","lines":"1239,1240"}},{"content":"<strong>&#x8868;&#xff1a;&#x5b9e;&#x65f6;&#x901a;&#x4fe1;&#x65b9;&#x6848;&#x5bf9;&#x6bd4; (WebSocket vs. Server-Sent Events)</strong>","children":[{"content":"<table data-lines=\"1254,1265\">\n<thead data-lines=\"1254,1255\">\n<tr data-lines=\"1254,1255\">\n<th style=\"text-align:left\">&#x7279;&#x6027;/&#x65b9;&#x6848;</th>\n<th style=\"text-align:left\">WebSocket</th>\n<th style=\"text-align:left\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events\">Server-Sent Events</a> (SSE)</th>\n</tr>\n</thead>\n<tbody data-lines=\"1256,1265\">\n<tr data-lines=\"1256,1257\">\n<td style=\"text-align:left\"><strong>&#x901a;&#x4fe1;&#x65b9;&#x5411;</strong></td>\n<td style=\"text-align:left\">&#x5168;&#x53cc;&#x5de5;&#xff08;&#x53cc;&#x5411;&#xff1a;&#x5ba2;&#x6237;&#x7aef;&#x21c4;&#x670d;&#x52a1;&#x5668;&#xff09;</td>\n<td style=\"text-align:left\">&#x5355;&#x5411;&#xff08;&#x670d;&#x52a1;&#x5668;&#x2192;&#x5ba2;&#x6237;&#x7aef;&#xff09;</td>\n</tr>\n<tr data-lines=\"1257,1258\">\n<td style=\"text-align:left\"><strong>&#x534f;&#x8bae;</strong></td>\n<td style=\"text-align:left\">WebSocket &#x534f;&#x8bae; (ws://, wss://)</td>\n<td style=\"text-align:left\">&#x6807;&#x51c6; <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a>/<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS\">HTTPS</a></td>\n</tr>\n<tr data-lines=\"1258,1259\">\n<td style=\"text-align:left\"><strong>&#x8fde;&#x63a5;&#x7ef4;&#x62a4;</strong></td>\n<td style=\"text-align:left\">&#x4fdd;&#x6301;&#x6301;&#x4e45;&#x8fde;&#x63a5;&#xff0c;&#x5f00;&#x9500;&#x76f8;&#x5bf9;&#x8f83;&#x5927;</td>\n<td style=\"text-align:left\">&#x89c6;&#x4e3a;&#x5e38;&#x89c4; <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a> &#x6d41;&#x91cf;&#xff0c;&#x5185;&#x7f6e;&#x81ea;&#x52a8;&#x91cd;&#x8fde;</td>\n</tr>\n<tr data-lines=\"1259,1260\">\n<td style=\"text-align:left\"><strong>&#x6570;&#x636e;&#x683c;&#x5f0f;</strong></td>\n<td style=\"text-align:left\">&#x652f;&#x6301;&#x4efb;&#x610f;&#x4e8c;&#x8fdb;&#x5236;&#x6570;&#x636e;&#x548c;&#x6587;&#x672c;&#x6570;&#x636e;</td>\n<td style=\"text-align:left\">&#x4ec5;&#x652f;&#x6301; UTF-8 &#x6587;&#x672c;&#x6570;&#x636e;</td>\n</tr>\n<tr data-lines=\"1260,1261\">\n<td style=\"text-align:left\"><strong>&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;</strong></td>\n<td style=\"text-align:left\">&#x6240;&#x6709;&#x4e3b;&#x6d41;&#x6d4f;&#x89c8;&#x5668;&#x5e7f;&#x6cdb;&#x652f;&#x6301;</td>\n<td style=\"text-align:left\">&#x4e3b;&#x6d41;&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#xff0c;IE &#x7b49;&#x65e7;&#x7248;&#x6d4f;&#x89c8;&#x5668;&#x4e0d;&#x652f;&#x6301;</td>\n</tr>\n<tr data-lines=\"1261,1262\">\n<td style=\"text-align:left\"><strong>&#x5b9e;&#x73b0;&#x590d;&#x6742;&#x6027;</strong></td>\n<td style=\"text-align:left\">&#x534f;&#x8bae;&#x76f8;&#x5bf9;&#x5e95;&#x5c42;&#xff0c;&#x9700;&#x624b;&#x52a8;&#x5904;&#x7406;&#x91cd;&#x8fde;&#x7b49;&#xff0c;&#x7565;&#x590d;&#x6742;</td>\n<td style=\"text-align:left\">&#x57fa;&#x4e8e; <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a>&#xff0c;&#x5ba2;&#x6237;&#x7aef;&#x5b9e;&#x73b0;&#x76f8;&#x5bf9;&#x7b80;&#x5355;</td>\n</tr>\n<tr data-lines=\"1262,1263\">\n<td style=\"text-align:left\"><strong>&#x5e76;&#x53d1;&#x8fde;&#x63a5;&#x9650;&#x5236;</strong></td>\n<td style=\"text-align:left\">&#x65e0;&#x660e;&#x663e;&#x9650;&#x5236;&#xff08;&#x53d7;&#x9650;&#x4e8e;&#x670d;&#x52a1;&#x5668;&#x8d44;&#x6e90;&#xff09;</td>\n<td style=\"text-align:left\">&#x6bcf;&#x4e2a;&#x6d4f;&#x89c8;&#x5668;&#x901a;&#x5e38;&#x6709; 6 &#x4e2a;&#x5e76;&#x53d1;&#x8fde;&#x63a5;&#x9650;&#x5236;</td>\n</tr>\n<tr data-lines=\"1263,1264\">\n<td style=\"text-align:left\"><strong>&#x9632;&#x706b;&#x5899;&#x517c;&#x5bb9;&#x6027;</strong></td>\n<td style=\"text-align:left\">&#x53ef;&#x80fd;&#x53d7;&#x4f01;&#x4e1a;&#x9632;&#x706b;&#x5899;&#x5f71;&#x54cd;</td>\n<td style=\"text-align:left\">&#x57fa;&#x4e8e; <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a>&#xff0c;&#x901a;&#x5e38;&#x65e0;&#x9632;&#x706b;&#x5899;&#x95ee;&#x9898;</td>\n</tr>\n<tr data-lines=\"1264,1265\">\n<td style=\"text-align:left\"><strong>&#x5178;&#x578b;&#x7528;&#x4f8b;</strong></td>\n<td style=\"text-align:left\">&#x804a;&#x5929;&#x3001;&#x5728;&#x7ebf;&#x6e38;&#x620f;&#x3001;&#x5b9e;&#x65f6;&#x534f;&#x4f5c;&#x3001;&#x9ad8;&#x9891;&#x6570;&#x636e;&#x66f4;&#x65b0;</td>\n<td style=\"text-align:left\">&#x65b0;&#x95fb;&#x8ba2;&#x9605;&#x3001;&#x80a1;&#x7968;&#x884c;&#x60c5;&#x3001;&#x76f4;&#x64ad;&#x8bc4;&#x8bba;&#x3001;&#x8fdb;&#x5ea6;&#x6761;&#x3001;&#x901a;&#x77e5;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1254,1265"}}],"payload":{"tag":"h4","lines":"1252,1253"}}],"payload":{"tag":"h3","lines":"1191,1192"}}],"payload":{"tag":"h2","lines":"826,827"}},{"content":"<strong>V. &#x9ad8;&#x7ea7;&#x4e3b;&#x9898;&#x548c;&#x4e13;&#x4e1a;&#x5f00;&#x53d1;&#x6700;&#x4f73;&#x5b9e;&#x8df5;</strong>","children":[{"content":"<strong>&#x6027;&#x80fd;&#x4f18;&#x5316;&#xff1a;&#x63d0;&#x4f9b;&#x5feb;&#x901f;&#x7528;&#x6237;&#x4f53;&#x9a8c;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;Core Web Vitals &#x4f18;&#x5316;&#x6280;&#x672f;</strong>","children":[{"content":"<table data-lines=\"1294,1299\">\n<thead data-lines=\"1294,1295\">\n<tr data-lines=\"1294,1295\">\n<th style=\"text-align:left\">Core Web Vital</th>\n<th style=\"text-align:left\">&#x89e3;&#x51b3;&#x7684;&#x95ee;&#x9898;</th>\n<th style=\"text-align:left\">&#x5173;&#x952e;&#x6280;&#x672f;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x5de5;&#x5177;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1296,1299\">\n<tr data-lines=\"1296,1297\">\n<td style=\"text-align:left\"><a href=\"https://web.dev/lcp/\"><strong>LCP</strong></a></td>\n<td style=\"text-align:left\">&#x611f;&#x77e5;&#x52a0;&#x8f7d;&#x901f;&#x5ea6;&#x6162;</td>\n<td style=\"text-align:left\">&#x4f18;&#x5316;&#x56fe;&#x50cf;&#xff0c;&#x5173;&#x952e; CSS&#xff0c;&#x670d;&#x52a1;&#x5668;&#x54cd;&#x5e94;&#x65f6;&#x95f4;&#xff0c;&#x9884;&#x52a0;&#x8f7d;&#x82f1;&#x96c4;&#x56fe;&#x50cf;</td>\n<td style=\"text-align:left\"><a href=\"https://developer.chrome.com/docs/lighthouse/overview/\">Lighthouse</a></td>\n</tr>\n<tr data-lines=\"1297,1298\">\n<td style=\"text-align:left\"><a href=\"https://web.dev/inp/\"><strong>INP</strong></a></td>\n<td style=\"text-align:left\">&#x4ea4;&#x4e92;&#x54cd;&#x5e94;&#x6162;</td>\n<td style=\"text-align:left\">&#x907f;&#x514d;&#x963b;&#x585e;&#x4e3b;&#x7ebf;&#x7a0b;&#x7684;&#x957f;&#x65f6;&#x95f4;&#x4efb;&#x52a1;&#xff0c;&#x4f18;&#x5316;&#x4e8b;&#x4ef6;&#x56de;&#x8c03;&#xff0c;&#x51cf;&#x5c11; <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\">DOM</a> &#x5927;&#x5c0f;</td>\n<td style=\"text-align:left\"><a href=\"https://developer.chrome.com/docs/lighthouse/overview/\">Lighthouse</a></td>\n</tr>\n<tr data-lines=\"1298,1299\">\n<td style=\"text-align:left\"><strong>CLS</strong></td>\n<td style=\"text-align:left\">&#x89c6;&#x89c9;&#x7a33;&#x5b9a;&#x6027;&#x5dee;</td>\n<td style=\"text-align:left\">&#x4e3a;&#x56fe;&#x50cf;/&#x89c6;&#x9891;&#x8bbe;&#x7f6e;&#x5c3a;&#x5bf8;&#xff0c;&#x4e3a;&#x5e7f;&#x544a;/&#x52a8;&#x6001;&#x5185;&#x5bb9;&#x4fdd;&#x7559;&#x7a7a;&#x95f4;&#xff0c;&#x4f18;&#x5316;&#x5b57;&#x4f53;&#x4f20;&#x8f93;</td>\n<td style=\"text-align:left\"><a href=\"https://developer.chrome.com/docs/lighthouse/overview/\">Lighthouse</a></td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1294,1299"}}],"payload":{"tag":"h4","lines":"1292,1293"}}],"payload":{"tag":"h3","lines":"1272,1273"}},{"content":"<strong>&#x7ebf;&#x4e0a;&#x6027;&#x80fd;&#x76d1;&#x63a7;&#x4e0e;&#x5206;&#x6790; (Performance Monitoring)</strong>","children":[{"content":"<strong>&#x771f;&#x5b9e;&#x7528;&#x6237;&#x76d1;&#x63a7; (RUM)</strong>","children":[],"payload":{"tag":"h4","lines":"1306,1307"}},{"content":"<strong>&#x9519;&#x8bef;&#x76d1;&#x63a7;&#x5de5;&#x5177;</strong>","children":[],"payload":{"tag":"h4","lines":"1314,1315"}},{"content":"<strong>&#x6253;&#x5305;&#x5206;&#x6790;&#x5de5;&#x5177;</strong>","children":[],"payload":{"tag":"h4","lines":"1322,1323"}}],"payload":{"tag":"h3","lines":"1302,1303"}},{"content":"<strong>Web &#x53ef;&#x8bbf;&#x95ee;&#x6027; (A11y)&#xff1a;&#x4e3a;&#x6240;&#x6709;&#x7528;&#x6237;&#x63d0;&#x4f9b;&#x5305;&#x5bb9;&#x6027;&#x8bbe;&#x8ba1;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;WCAG 2.2 &#x7126;&#x70b9;&#x5173;&#x952e;&#x6210;&#x529f;&#x6807;&#x51c6;</strong>","children":[{"content":"<table data-lines=\"1346,1351\">\n<thead data-lines=\"1346,1347\">\n<tr data-lines=\"1346,1347\">\n<th style=\"text-align:left\">&#x6210;&#x529f;&#x6807;&#x51c6;</th>\n<th style=\"text-align:left\">&#x7b49;&#x7ea7;</th>\n<th style=\"text-align:left\">&#x505a;&#x6cd5;</th>\n<th style=\"text-align:left\">&#x91cd;&#x8981;&#x6027;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1348,1351\">\n<tr data-lines=\"1348,1349\">\n<td style=\"text-align:left\"><strong>&#x7126;&#x70b9;&#x4e0d;&#x88ab;&#x906e;&#x6321;&#xff08;&#x6700;&#x5c0f;&#xff09;</strong></td>\n<td style=\"text-align:left\">AA</td>\n<td style=\"text-align:left\">&#x786e;&#x4fdd;&#x952e;&#x76d8;&#x7126;&#x70b9;&#x5143;&#x7d20;&#x81f3;&#x5c11;&#x90e8;&#x5206;&#x53ef;&#x89c1;</td>\n<td style=\"text-align:left\">&#x952e;&#x76d8;&#x7528;&#x6237;&#x9700;&#x8981;&#x770b;&#x5230;&#x7126;&#x70b9;&#x6240;&#x5728;</td>\n</tr>\n<tr data-lines=\"1349,1350\">\n<td style=\"text-align:left\"><strong>&#x7126;&#x70b9;&#x4e0d;&#x88ab;&#x906e;&#x6321;&#xff08;&#x589e;&#x5f3a;&#xff09;</strong></td>\n<td style=\"text-align:left\">AAA</td>\n<td style=\"text-align:left\">&#x786e;&#x4fdd;&#x952e;&#x76d8;&#x7126;&#x70b9;&#x5143;&#x7d20;&#x5b8c;&#x5168;&#x53ef;&#x89c1;</td>\n<td style=\"text-align:left\">&#x952e;&#x76d8;&#x7528;&#x6237;&#x9700;&#x8981;&#x6e05;&#x6670;&#x5730;&#x770b;&#x5230;&#x7126;&#x70b9;&#x6240;&#x5728;</td>\n</tr>\n<tr data-lines=\"1350,1351\">\n<td style=\"text-align:left\"><strong>&#x7126;&#x70b9;&#x5916;&#x89c2;</strong></td>\n<td style=\"text-align:left\">AAA</td>\n<td style=\"text-align:left\">&#x4f7f;&#x7528;&#x8db3;&#x591f;&#x5927;&#x5c0f;&#x548c;&#x5bf9;&#x6bd4;&#x5ea6;&#x7684;&#x7126;&#x70b9;&#x6307;&#x793a;&#x5668;</td>\n<td style=\"text-align:left\">&#x8bb8;&#x591a;&#x4eba;&#x96be;&#x4ee5;&#x611f;&#x77e5;&#x7ec6;&#x5fae;&#x89c6;&#x89c9;&#x53d8;&#x5316;&#xff0c;&#x9700;&#x8981;&#x6e05;&#x6670;&#x7684;&#x6307;&#x793a;&#x5668;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1346,1351"}}],"payload":{"tag":"h4","lines":"1344,1345"}},{"content":"<strong>ARIA &#x5c5e;&#x6027;&#x7684;&#x6df1;&#x5ea6;&#x4f7f;&#x7528;</strong>","children":[],"payload":{"tag":"h4","lines":"1354,1355"}},{"content":"<strong>&#x8f85;&#x52a9;&#x6280;&#x672f;&#x6d4b;&#x8bd5;&#x65b9;&#x6cd5;</strong>","children":[],"payload":{"tag":"h4","lines":"1362,1363"}}],"payload":{"tag":"h3","lines":"1332,1333"}},{"content":"<strong>&#x641c;&#x7d22;&#x5f15;&#x64ce;&#x4f18;&#x5316; (SEO)&#xff1a;&#x786e;&#x4fdd;&#x53ef;&#x53d1;&#x73b0;&#x6027;</strong>","children":[{"content":"<strong>&#x6e32;&#x67d3;&#x7b56;&#x7565;</strong>&#xff1a;","children":[{"content":"<strong>&#x5ba2;&#x6237;&#x7aef;&#x6e32;&#x67d3; (CSR)</strong>&#xff1a;React SPA &#x7684;&#x9ed8;&#x8ba4;&#x65b9;&#x5f0f;&#xff1b;&#x6d4f;&#x89c8;&#x5668;&#x4e0b;&#x8f7d; JS&#xff0c;&#x7136;&#x540e;&#x83b7;&#x53d6;/&#x6e32;&#x67d3;&#x5185;&#x5bb9;&#x3002;&#x7531;&#x4e8e;&#x5185;&#x5bb9;&#x4e0d;&#x80fd;&#x7acb;&#x5373;&#x63d0;&#x4f9b;&#x7ed9;&#x722c;&#x866b;&#xff0c;&#x53ef;&#x80fd;&#x5b58;&#x5728; SEO &#x6311;&#x6218;&#x3002;","children":[],"payload":{"tag":"li","lines":"1379,1380"}},{"content":"<strong>&#x670d;&#x52a1;&#x5668;&#x7aef;&#x6e32;&#x67d3; (SSR) / &#x9759;&#x6001;&#x7ad9;&#x70b9;&#x751f;&#x6210; (SSG)</strong>&#xff1a;&#x63a8;&#x8350;&#x7528;&#x4e8e; SEO&#xff1b;&#x5c06;&#x5b8c;&#x5168;&#x6e32;&#x67d3;&#x7684; HTML &#x53d1;&#x9001;&#x5230;&#x6d4f;&#x89c8;&#x5668;&#xff0c;&#x4f7f;&#x641c;&#x7d22;&#x5f15;&#x64ce;&#x66f4;&#x5bb9;&#x6613;&#x6293;&#x53d6;&#x548c;&#x7d22;&#x5f15;&#x3002;Next.js (SSR/SSG) &#x548c; <a href=\"https://www.gatsbyjs.com/\">Gatsby</a> (SSG) &#x7b49;&#x6846;&#x67b6;&#x4e3a;&#x6b64;&#x800c;&#x6784;&#x5efa;&#x3002;","children":[],"payload":{"tag":"li","lines":"1380,1381"}},{"content":"<strong>&#x52a8;&#x6001;&#x6e32;&#x67d3;</strong>&#xff1a;JavaScript &#x751f;&#x6210;&#x7684;&#x5185;&#x5bb9;&#x65e0;&#x6cd5;&#x88ab;&#x641c;&#x7d22;&#x5f15;&#x64ce;&#x83b7;&#x53d6;&#x65f6;&#x7684;&#x53d8;&#x901a;&#x65b9;&#x6848;&#xff1b;&#x670d;&#x52a1;&#x5668;&#x68c0;&#x6d4b;&#x673a;&#x5668;&#x4eba;&#x5e76;&#x63d0;&#x4f9b;&#x670d;&#x52a1;&#x5668;&#x6e32;&#x67d3;&#x7248;&#x672c;&#x3002;&#x4e0d;&#x5efa;&#x8bae;&#x4f5c;&#x4e3a;&#x957f;&#x671f;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x3002;","children":[],"payload":{"tag":"li","lines":"1381,1382"}}],"payload":{"tag":"li","lines":"1378,1382"}},{"content":"<strong>&#x7ed3;&#x6784;&#x5316;&#x6570;&#x636e; (<a href=\"https://json-ld.org/\">JSON-LD</a>)</strong>&#xff1a;&#x5411;&#x9875;&#x9762;&#x6dfb;&#x52a0;&#x673a;&#x5668;&#x53ef;&#x8bfb;&#x6570;&#x636e;&#xff0c;&#x4ee5;&#x5e2e;&#x52a9;&#x641c;&#x7d22;&#x5f15;&#x64ce;&#x66f4;&#x597d;&#x5730;&#x7406;&#x89e3;&#x5185;&#x5bb9;&#x5e76;&#x589e;&#x5f3a;&#x641c;&#x7d22;&#x7ed3;&#x679c;&#x4e2d;&#x7684;&#x5bcc;&#x6458;&#x8981;&#x3002;","children":[],"payload":{"tag":"li","lines":"1382,1383"}},{"content":"<strong>&#x7ad9;&#x70b9;&#x5730;&#x56fe;</strong>&#xff1a;sitemap.xml &#x5217;&#x51fa;&#x6240;&#x6709;&#x91cd;&#x8981;&#x9875;&#x9762;&#xff0c;&#x5e2e;&#x52a9;&#x641c;&#x7d22;&#x5f15;&#x64ce;&#x53d1;&#x73b0;&#x548c;&#x7d22;&#x5f15;&#x5b83;&#x4eec;&#x3002;","children":[],"payload":{"tag":"li","lines":"1383,1384"}},{"content":"<strong>URL &#x4f18;&#x5316;</strong>&#xff1a;&#x521b;&#x5efa;&#x6e05;&#x6670;&#x3001;&#x63cf;&#x8ff0;&#x6027;&#x7684; URL&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x4f7f;&#x7528; <a href=\"https://reactrouter.com/\">React Router</a>&#xff09;&#xff0c;&#x5305;&#x542b;&#x5173;&#x952e;&#x5b57;&#x4e14;&#x6613;&#x4e8e;&#x9605;&#x8bfb;&#x3002;","children":[],"payload":{"tag":"li","lines":"1384,1386"}}],"payload":{"tag":"h3","lines":"1374,1375"}},{"content":"<strong>&#x5b89;&#x5168;&#x57fa;&#x7840;&#xff1a;&#x4fdd;&#x62a4;&#x524d;&#x7aef;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x5e38;&#x89c1;&#x524d;&#x7aef;&#x5b89;&#x5168;&#x98ce;&#x9669;&#x53ca;&#x7f13;&#x89e3;&#x7b56;&#x7565;</strong>","children":[{"content":"<table data-lines=\"1406,1416\">\n<thead data-lines=\"1406,1407\">\n<tr data-lines=\"1406,1407\">\n<th style=\"text-align:left\">&#x98ce;&#x9669;&#x7c7b;&#x578b;</th>\n<th style=\"text-align:left\">&#x63cf;&#x8ff0;</th>\n<th style=\"text-align:left\">&#x7f13;&#x89e3;&#x7b56;&#x7565;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1408,1416\">\n<tr data-lines=\"1408,1409\">\n<td style=\"text-align:left\"><strong>&#x8de8;&#x7ad9;&#x811a;&#x672c; (XSS)</strong></td>\n<td style=\"text-align:left\">&#x6ce8;&#x5165;&#x6076;&#x610f;&#x811a;&#x672c;&#xff0c;&#x5728;&#x7528;&#x6237;&#x6d4f;&#x89c8;&#x5668;&#x6267;&#x884c;</td>\n<td style=\"text-align:left\">&#x8f93;&#x5165;&#x51c0;&#x5316;&#xff0c;&#x8f93;&#x51fa;&#x8fc7;&#x6ee4;&#xff0c;&#x5185;&#x5bb9;&#x5b89;&#x5168;&#x7b56;&#x7565; (CSP)</td>\n</tr>\n<tr data-lines=\"1409,1410\">\n<td style=\"text-align:left\"><strong>&#x8de8;&#x7ad9;&#x8bf7;&#x6c42;&#x4f2a;&#x9020; (CSRF)</strong></td>\n<td style=\"text-align:left\">&#x6b3a;&#x9a97;&#x7528;&#x6237;&#x6267;&#x884c;&#x975e;&#x9884;&#x671f;&#x64cd;&#x4f5c;</td>\n<td style=\"text-align:left\">&#x53cd; CSRF &#x4ee4;&#x724c;&#xff0c;&#x9a8c;&#x8bc1; <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a> Referer &#x5934;</td>\n</tr>\n<tr data-lines=\"1410,1411\">\n<td style=\"text-align:left\"><strong>&#x8fc7;&#x65f6;&#x6846;&#x67b6;/&#x5e93;</strong></td>\n<td style=\"text-align:left\">&#x4f7f;&#x7528;&#x5df2;&#x77e5;&#x6f0f;&#x6d1e;&#x7684;&#x65e7;&#x7ec4;&#x4ef6;</td>\n<td style=\"text-align:left\">&#x5b9a;&#x671f;&#x66f4;&#x65b0;&#xff0c;&#x4f7f;&#x7528; SCA &#x5de5;&#x5177;&#x626b;&#x63cf;&#x6f0f;&#x6d1e;&#xff0c;&#x4ec5;&#x4f7f;&#x7528;&#x5b98;&#x65b9;&#x6765;&#x6e90;&#x7ec4;&#x4ef6;</td>\n</tr>\n<tr data-lines=\"1411,1412\">\n<td style=\"text-align:left\"><strong>&#x4e0d;&#x5b89;&#x5168;&#x7b2c;&#x4e09;&#x65b9;&#x5e93;</strong></td>\n<td style=\"text-align:left\">&#x5f15;&#x5165;&#x6f0f;&#x6d1e;&#x6216;&#x6076;&#x610f;&#x4ee3;&#x7801;</td>\n<td style=\"text-align:left\">&#x5ba1;&#x8ba1;&#x548c;&#x626b;&#x63cf;&#x7b2c;&#x4e09;&#x65b9;&#x5e93;&#xff0c;&#x4f7f;&#x7528; <a href=\"https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity\">SRI</a> &#x6821;&#x9a8c; CDN &#x8d44;&#x6e90;</td>\n</tr>\n<tr data-lines=\"1412,1413\">\n<td style=\"text-align:left\"><strong>&#x62d2;&#x7edd;&#x670d;&#x52a1; (DoS)</strong></td>\n<td style=\"text-align:left\">&#x901a;&#x8fc7;&#x5927;&#x91cf;&#x8bf7;&#x6c42;&#x4f7f;&#x670d;&#x52a1;&#x4e0d;&#x53ef;&#x7528;</td>\n<td style=\"text-align:left\">&#x901f;&#x7387;&#x9650;&#x5236;&#xff0c;&#x4f7f;&#x7528; CDN/WAF &#x8fc7;&#x6ee4;&#x6076;&#x610f;&#x6d41;&#x91cf;</td>\n</tr>\n<tr data-lines=\"1413,1414\">\n<td style=\"text-align:left\"><strong>&#x4e0d;&#x53d7;&#x9650;&#x5236;&#x7684;&#x529f;&#x80fd;&#x7b56;&#x7565;</strong></td>\n<td style=\"text-align:left\">&#x6076;&#x610f;&#x7f51;&#x7ad9;&#x6ee5;&#x7528;&#x6d4f;&#x89c8;&#x5668; API&#xff08;&#x5982;&#x6444;&#x50cf;&#x5934;&#x3001;&#x9ea6;&#x514b;&#x98ce;&#xff09;</td>\n<td style=\"text-align:left\">&#x4f7f;&#x7528; Feature-Policy <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP\">HTTP</a> &#x5934;&#x9650;&#x5236;&#x529f;&#x80fd;&#x8bbf;&#x95ee;</td>\n</tr>\n<tr data-lines=\"1414,1415\">\n<td style=\"text-align:left\"><strong>&#x7f3a;&#x4e4f;&#x5b50;&#x8d44;&#x6e90;&#x5b8c;&#x6574;&#x6027; (<a href=\"https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity\">SRI</a>)</strong></td>\n<td style=\"text-align:left\">CDN &#x8d44;&#x6e90;&#x88ab;&#x7be1;&#x6539;&#xff0c;&#x52a0;&#x8f7d;&#x6076;&#x610f;&#x4ee3;&#x7801;</td>\n<td style=\"text-align:left\">&#x5bf9; CDN &#x8d44;&#x6e90;&#x4f7f;&#x7528; integrity &#x5c5e;&#x6027;&#x548c;&#x52a0;&#x5bc6;&#x54c8;&#x5e0c;</td>\n</tr>\n<tr data-lines=\"1415,1416\">\n<td style=\"text-align:left\"><strong>&#x5ba2;&#x6237;&#x7aef;&#x6570;&#x636e;&#x9a8c;&#x8bc1;&#x4e0d;&#x8db3;</strong></td>\n<td style=\"text-align:left\">&#x6076;&#x610f;&#x7528;&#x6237;&#x7ed5;&#x8fc7;&#x5ba2;&#x6237;&#x7aef;&#x9a8c;&#x8bc1;&#x53d1;&#x9001;&#x65e0;&#x6548;&#x6570;&#x636e;</td>\n<td style=\"text-align:left\">&#x59cb;&#x7ec8;&#x5728;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x8fdb;&#x884c;&#x6570;&#x636e;&#x9a8c;&#x8bc1;&#xff0c;&#x5ba2;&#x6237;&#x7aef;&#x9a8c;&#x8bc1;&#x4ec5;&#x7528;&#x4e8e; UX &#x63d0;&#x5347;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1406,1416"}}],"payload":{"tag":"h4","lines":"1404,1405"}}],"payload":{"tag":"h3","lines":"1388,1389"}},{"content":"<strong>&#x5b89;&#x5168;&#x57fa;&#x7840;&#xff1a;&#x7528;&#x6237;&#x8ba4;&#x8bc1;&#x4e0e;&#x6388;&#x6743;</strong>","children":[{"content":"<strong>&#x4e3b;&#x6d41;&#x8ba4;&#x8bc1;&#x6a21;&#x5f0f;&#x7684;&#x6f14;&#x8fdb;</strong>","children":[{"content":"<strong>1. &#x57fa;&#x4e8e;&#x4f1a;&#x8bdd;&#x7684;&#x8ba4;&#x8bc1; (Session-Based Authentication)</strong>","children":[{"content":"<strong>&#x5de5;&#x4f5c;&#x6d41;&#x7a0b;</strong>&#xff1a;&#x7528;&#x6237;&#x63d0;&#x4ea4;&#x7528;&#x6237;&#x540d;&#x548c;&#x5bc6;&#x7801;&#x540e;&#xff0c;&#x670d;&#x52a1;&#x5668;&#x9a8c;&#x8bc1;&#x5176;&#x8eab;&#x4efd;&#xff0c;&#x7136;&#x540e;&#x521b;&#x5efa;&#x4e00;&#x4e2a;&#x201c;&#x4f1a;&#x8bdd; (Session)&#x201d;&#x5e76;&#x5c06;&#x5176;&#x4fe1;&#x606f;&#x5b58;&#x50a8;&#x5728;&#x670d;&#x52a1;&#x5668;&#x7684;&#x5185;&#x5b58;&#x6216;&#x6570;&#x636e;&#x5e93;&#x4e2d;&#x3002;&#x670d;&#x52a1;&#x5668;&#x968f;&#x540e;&#x5411;&#x7528;&#x6237;&#x7684;&#x6d4f;&#x89c8;&#x5668;&#x8fd4;&#x56de;&#x4e00;&#x4e2a;&#x5305;&#x542b;&#x552f;&#x4e00; Session ID &#x7684; Cookie&#x3002;&#x5728;&#x540e;&#x7eed;&#x7684;&#x6bcf;&#x6b21;&#x8bf7;&#x6c42;&#x4e2d;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x90fd;&#x4f1a;&#x81ea;&#x52a8;&#x643a;&#x5e26;&#x8fd9;&#x4e2a; Cookie&#xff0c;&#x670d;&#x52a1;&#x5668;&#x901a;&#x8fc7;&#x67e5;&#x8be2; Session ID &#x6765;&#x8bc6;&#x522b;&#x7528;&#x6237;&#x8eab;&#x4efd;&#x3002;","children":[],"payload":{"tag":"li","lines":"1437,1438"}},{"content":"<strong>&#x4f18;&#x52bf;</strong>&#xff1a;&#x539f;&#x7406;&#x7b80;&#x5355;&#xff0c;&#x6613;&#x4e8e;&#x5b9e;&#x73b0;&#x548c;&#x7ba1;&#x7406;&#x3002;&#x670d;&#x52a1;&#x5668;&#x53ef;&#x4ee5;&#x65b9;&#x4fbf;&#x5730;&#x63a7;&#x5236;&#x548c;&#x64a4;&#x9500;&#x7528;&#x6237;&#x4f1a;&#x8bdd;&#x3002;","children":[],"payload":{"tag":"li","lines":"1438,1439"}},{"content":"<strong>&#x52a3;&#x52bf;</strong>&#xff1a;","children":[{"content":"<strong>&#x6709;&#x72b6;&#x6001;&#x4e0e;&#x6269;&#x5c55;&#x6027;&#x95ee;&#x9898;</strong>&#xff1a;&#x670d;&#x52a1;&#x5668;&#x9700;&#x8981;&#x5b58;&#x50a8;&#x6240;&#x6709;&#x7528;&#x6237;&#x7684;&#x4f1a;&#x8bdd;&#x4fe1;&#x606f;&#xff0c;&#x8fd9;&#x5728;&#x5927;&#x91cf;&#x7528;&#x6237;&#x8bbf;&#x95ee;&#x65f6;&#x4f1a;&#x6d88;&#x8017;&#x5927;&#x91cf;&#x670d;&#x52a1;&#x5668;&#x8d44;&#x6e90;&#x3002;&#x5bf9;&#x4e8e;&#x9700;&#x8981;&#x6c34;&#x5e73;&#x6269;&#x5c55;&#x7684;&#x5206;&#x5e03;&#x5f0f;&#x7cfb;&#x7edf;&#xff0c;&#x9700;&#x8981;&#x5728;&#x591a;&#x4e2a;&#x670d;&#x52a1;&#x5668;&#x4e4b;&#x95f4;&#x540c;&#x6b65;&#x4f1a;&#x8bdd;&#x6570;&#x636e;&#xff0c;&#x8fd9;&#x975e;&#x5e38;&#x590d;&#x6742;&#x4e14;&#x4f4e;&#x6548;&#x3002;","children":[],"payload":{"tag":"li","lines":"1440,1441"}},{"content":"<strong>CSRF &#x98ce;&#x9669;</strong>&#xff1a;&#x7531;&#x4e8e;&#x8ba4;&#x8bc1;&#x4f9d;&#x8d56;&#x4e8e;&#x6d4f;&#x89c8;&#x5668;&#x81ea;&#x52a8;&#x53d1;&#x9001;&#x7684; Cookie&#xff0c;&#x8fd9;&#x79cd;&#x6a21;&#x5f0f;&#x5929;&#x7136;&#x5730;&#x9762;&#x4e34;&#x8de8;&#x7ad9;&#x8bf7;&#x6c42;&#x4f2a;&#x9020; (CSRF) &#x7684;&#x653b;&#x51fb;&#x98ce;&#x9669;&#xff0c;&#x9700;&#x8981;&#x989d;&#x5916;&#x7684;&#x5b89;&#x5168;&#x63aa;&#x65bd;&#x6765;&#x9632;&#x8303;&#x3002;","children":[],"payload":{"tag":"li","lines":"1441,1442"}},{"content":"<strong>&#x8de8;&#x57df;&#x4e0d;&#x53cb;&#x597d;</strong>&#xff1a;&#x5728;&#x524d;&#x540e;&#x7aef;&#x5206;&#x79bb;&#x548c;&#x8de8;&#x57df;&#x8bf7;&#x6c42;&#x6210;&#x4e3a;&#x5e38;&#x6001;&#x7684;&#x4eca;&#x5929;&#xff0c;&#x57fa;&#x4e8e; Cookie &#x7684;&#x4f1a;&#x8bdd;&#x7ba1;&#x7406;&#x4f1a;&#x9047;&#x5230;&#x8bf8;&#x591a;&#x8de8;&#x57df;&#x7b56;&#x7565;&#x7684;&#x9650;&#x5236;&#x3002;","children":[],"payload":{"tag":"li","lines":"1442,1444"}}],"payload":{"tag":"li","lines":"1439,1444"}}],"payload":{"tag":"h5","lines":"1433,1434"}},{"content":"<strong>2. &#x57fa;&#x4e8e; Token &#x7684;&#x8ba4;&#x8bc1; (Token-Based Authentication)</strong>","children":[{"content":"<strong>&#x5de5;&#x4f5c;&#x6d41;&#x7a0b;</strong>&#xff1a;&#x7528;&#x6237;&#x767b;&#x5f55;&#x540e;&#xff0c;&#x670d;&#x52a1;&#x5668;&#x4e0d;&#x518d;&#x521b;&#x5efa;&#x4f1a;&#x8bdd;&#xff0c;&#x800c;&#x662f;&#x751f;&#x6210;&#x4e00;&#x4e2a;&#x52a0;&#x5bc6;&#x7684;&#x3001;&#x5305;&#x542b;&#x7528;&#x6237;&#x8eab;&#x4efd;&#x4fe1;&#x606f;&#x7684; Token (&#x4ee4;&#x724c;) &#x5e76;&#x8fd4;&#x56de;&#x7ed9;&#x5ba2;&#x6237;&#x7aef;&#x3002;&#x524d;&#x7aef;&#x901a;&#x5e38;&#x5c06;&#x8fd9;&#x4e2a; Token &#x5b58;&#x50a8;&#x5728;&#x672c;&#x5730;&#xff08;&#x5982; Local Storage &#x6216; HttpOnly Cookie&#xff09;&#x3002;&#x5728;&#x540e;&#x7eed;&#x8bf7;&#x6c42;&#x4e2d;&#xff0c;&#x524d;&#x7aef;&#x9700;&#x8981;&#x624b;&#x52a8;&#x5c06; Token &#x653e;&#x5165; HTTP &#x8bf7;&#x6c42;&#x7684; <code>Authorization</code> &#x5934;&#x4e2d;&#xff08;&#x901a;&#x5e38;&#x4f7f;&#x7528; <code>Bearer</code> &#x6a21;&#x5f0f;&#xff09;&#x53d1;&#x9001;&#x7ed9;&#x670d;&#x52a1;&#x5668;&#x3002;&#x670d;&#x52a1;&#x5668;&#x6536;&#x5230;&#x8bf7;&#x6c42;&#x540e;&#xff0c;&#x53ea;&#x9700;&#x9a8c;&#x8bc1; Token &#x7684;&#x7b7e;&#x540d;&#x662f;&#x5426;&#x6709;&#x6548;&#xff0c;&#x5373;&#x53ef;&#x786e;&#x8ba4;&#x7528;&#x6237;&#x8eab;&#x4efd;&#xff0c;&#x65e0;&#x9700;&#x67e5;&#x8be2;&#x4efb;&#x4f55;&#x5b58;&#x50a8;&#x3002;","children":[],"payload":{"tag":"li","lines":"1448,1449"}},{"content":"<strong>&#x4f18;&#x52bf;</strong>&#xff1a;","children":[{"content":"<strong>&#x65e0;&#x72b6;&#x6001;&#x4e0e;&#x9ad8;&#x6269;&#x5c55;&#x6027;</strong>&#xff1a;&#x670d;&#x52a1;&#x5668;&#x65e0;&#x9700;&#x5b58;&#x50a8;&#x4efb;&#x4f55;&#x4f1a;&#x8bdd;&#x4fe1;&#x606f;&#xff0c;&#x6bcf;&#x6b21;&#x8bf7;&#x6c42;&#x90fd;&#x662f;&#x81ea;&#x5305;&#x542b;&#x7684;&#x3002;&#x8fd9;&#x4f7f;&#x5f97;&#x540e;&#x7aef;&#x670d;&#x52a1;&#x53ef;&#x4ee5;&#x8f7b;&#x677e;&#x5730;&#x8fdb;&#x884c;&#x6c34;&#x5e73;&#x6269;&#x5c55;&#xff0c;&#x6781;&#x5927;&#x5730;&#x63d0;&#x5347;&#x4e86;&#x7cfb;&#x7edf;&#x7684;&#x53ef;&#x4f38;&#x7f29;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"1450,1451"}},{"content":"<strong>&#x8de8;&#x57df;&#x53cb;&#x597d;&#x4e0e;&#x89e3;&#x8026;</strong>&#xff1a;Token &#x53ef;&#x4ee5;&#x8f7b;&#x677e;&#x5730;&#x5728;&#x4e0d;&#x540c;&#x57df;&#x4e4b;&#x95f4;&#x4f20;&#x9012;&#xff0c;&#x975e;&#x5e38;&#x9002;&#x5408;&#x524d;&#x540e;&#x7aef;&#x5206;&#x79bb;&#x7684;&#x67b6;&#x6784;&#x548c;&#x5fae;&#x670d;&#x52a1;&#x4f53;&#x7cfb;&#x3002;","children":[],"payload":{"tag":"li","lines":"1451,1452"}},{"content":"<strong>&#x9632;&#x8303; CSRF</strong>&#xff1a;&#x7531;&#x4e8e; Token &#x901a;&#x5e38;&#x4e0d;&#x5b58;&#x50a8;&#x5728; Cookie &#x4e2d;&#xff08;&#x6216;&#x8005;&#x5373;&#x4f7f;&#x5b58;&#x50a8;&#x5728; Cookie &#x4e2d;&#xff0c;&#x4e5f;&#x9700;&#x8981;&#x524d;&#x7aef; JS &#x4e3b;&#x52a8;&#x8bfb;&#x53d6;&#x5e76;&#x653e;&#x5165;&#x8bf7;&#x6c42;&#x5934;&#xff09;&#xff0c;&#x8fd9;&#x4f7f;&#x5f97;&#x5229;&#x7528;&#x6d4f;&#x89c8;&#x5668;&#x81ea;&#x52a8;&#x884c;&#x4e3a;&#x7684; CSRF &#x653b;&#x51fb;&#x53d8;&#x5f97;&#x56f0;&#x96be;&#x3002;","children":[],"payload":{"tag":"li","lines":"1452,1453"}}],"payload":{"tag":"li","lines":"1449,1453"}},{"content":"<strong>&#x52a3;&#x52bf;</strong>&#xff1a;","children":[{"content":"<strong>Token &#x65e0;&#x6cd5;&#x4e3b;&#x52a8;&#x64a4;&#x9500;</strong>&#xff1a;&#x4e00;&#x65e6;&#x7b7e;&#x53d1;&#xff0c;Token &#x5728;&#x5176;&#x8fc7;&#x671f;&#x4e4b;&#x524d;&#x90fd;&#x662f;&#x6709;&#x6548;&#x7684;&#x3002;&#x5982;&#x679c; Token &#x6cc4;&#x9732;&#xff0c;&#x670d;&#x52a1;&#x5668;&#x65e0;&#x6cd5;&#x50cf;&#x64a4;&#x9500; Session &#x4e00;&#x6837;&#x4f7f;&#x5176;&#x7acb;&#x5373;&#x5931;&#x6548;&#x3002;&#x901a;&#x5e38;&#x9700;&#x8981;&#x5f15;&#x5165;&#x9ed1;&#x540d;&#x5355;&#x673a;&#x5236;&#x6216;&#x7f29;&#x77ed; Token &#x6709;&#x6548;&#x671f;&#x6765;&#x7f13;&#x89e3;&#x8fd9;&#x4e00;&#x95ee;&#x9898;&#x3002;","children":[],"payload":{"tag":"li","lines":"1454,1455"}},{"content":"<strong>&#x5b89;&#x5168;&#x6027;</strong>&#xff1a;&#x5c06; Token &#x5b58;&#x50a8;&#x5728; Local Storage &#x4e2d;&#x5b58;&#x5728;&#x88ab; XSS &#x653b;&#x51fb;&#x7a83;&#x53d6;&#x7684;&#x98ce;&#x9669;&#x3002;","children":[],"payload":{"tag":"li","lines":"1455,1457"}}],"payload":{"tag":"li","lines":"1453,1457"}}],"payload":{"tag":"h5","lines":"1444,1445"}},{"content":"<strong>3. OAuth &amp; OpenID Connect (OIDC)</strong>","children":[{"content":"<strong>OAuth (&#x5f00;&#x653e;&#x6388;&#x6743;)</strong>&#xff1a;&#x5b83;&#x662f;&#x4e00;&#x4e2a;<strong>&#x6388;&#x6743;</strong>&#x6846;&#x67b6;&#xff0c;&#x800c;&#x975e;&#x8ba4;&#x8bc1;&#x534f;&#x8bae;&#x3002;&#x5176;&#x6838;&#x5fc3;&#x76ee;&#x7684;&#x662f;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x6388;&#x6743;&#x4e00;&#x4e2a;&#x5e94;&#x7528;&#xff08;&#x5ba2;&#x6237;&#x7aef;&#xff09;&#x53bb;&#x8bbf;&#x95ee;&#x5176;&#x5728;&#x53e6;&#x4e00;&#x4e2a;&#x670d;&#x52a1;&#xff08;&#x8d44;&#x6e90;&#x670d;&#x52a1;&#x5668;&#xff09;&#x4e0a;&#x7684;&#x53d7;&#x4fdd;&#x62a4;&#x8d44;&#x6e90;&#xff0c;&#x800c;&#x65e0;&#x9700;&#x5c06;&#x81ea;&#x5df1;&#x7684;&#x7528;&#x6237;&#x540d;&#x548c;&#x5bc6;&#x7801;&#x76f4;&#x63a5;&#x66b4;&#x9732;&#x7ed9;&#x8be5;&#x5e94;&#x7528;&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x4f60;&#x6388;&#x6743;&#x4e00;&#x4e2a;&#x56fe;&#x7247;&#x6253;&#x5370;&#x7f51;&#x7ad9;&#x8bbf;&#x95ee;&#x4f60; Google Photos &#x91cc;&#x7684;&#x7167;&#x7247;&#x3002;","children":[],"payload":{"tag":"li","lines":"1461,1462"}},{"content":"<strong>OpenID Connect (<a href=\"https://openid.net/connect/\">OIDC</a>)</strong>&#xff1a;&#x5b83;&#x662f;&#x5728; OAuth 2.0 &#x4e4b;&#x4e0a;&#x6784;&#x5efa;&#x7684;&#x7b80;&#x5355;&#x7684;<strong>&#x8eab;&#x4efd;&#x8ba4;&#x8bc1;&#x5c42;</strong>&#x3002;&#x5f53; OAuth &#x53ea;&#x5173;&#x5fc3;&#x201c;&#x6388;&#x6743;&#x201d;&#x65f6;&#xff0c;OIDC &#x589e;&#x52a0;&#x4e86;&#x201c;&#x8ba4;&#x8bc1;&#x201d;&#x7684;&#x529f;&#x80fd;&#x3002;&#x5b83;&#x5141;&#x8bb8;&#x5ba2;&#x6237;&#x7aef;&#x4e0d;&#x4ec5;&#x80fd;&#x83b7;&#x5f97;&#x8bbf;&#x95ee;&#x8d44;&#x6e90;&#x7684;&#x6388;&#x6743;&#xff0c;&#x8fd8;&#x80fd;&#x9a8c;&#x8bc1;&#x7528;&#x6237;&#x7684;&#x8eab;&#x4efd;&#x5e76;&#x83b7;&#x53d6;&#x57fa;&#x672c;&#x7684;&#x7528;&#x6237;&#x4fe1;&#x606f;&#x3002;&#x6211;&#x4eec;&#x65e5;&#x5e38;&#x4f7f;&#x7528;&#x7684;&#x201c;&#x901a;&#x8fc7; Google/GitHub &#x767b;&#x5f55;&#x201d;&#x529f;&#x80fd;&#xff0c;&#x5b9e;&#x9645;&#x4e0a;&#x5c31;&#x662f; OIDC &#x7684;&#x5e94;&#x7528;&#x3002;","children":[],"payload":{"tag":"li","lines":"1462,1464"}}],"payload":{"tag":"h5","lines":"1457,1458"}},{"content":"<strong>4. &#x5355;&#x70b9;&#x767b;&#x5f55; (Single Sign-On / SSO)</strong>","children":[],"payload":{"tag":"h5","lines":"1464,1465"}}],"payload":{"tag":"h4","lines":"1429,1430"}},{"content":"<strong>&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x7684;&#x804c;&#x8d23;&#x4e0e;&#x8003;&#x91cf;</strong>","children":[{"content":"<strong>&#x5b89;&#x5168;&#x5730;&#x5b58;&#x50a8;&#x51ed;&#x636e;</strong>&#xff1a;&#x7406;&#x89e3;&#x4e0d;&#x540c;&#x5b58;&#x50a8;&#x65b9;&#x5f0f;&#x7684;&#x4f18;&#x52a3;&#x3002;&#x5c06; Token &#x5b58;&#x50a8;&#x5728; <code>HttpOnly</code> &#x7c7b;&#x578b;&#x7684; Cookie &#x4e2d;&#x53ef;&#x4ee5;&#x6709;&#x6548;&#x9632;&#x6b62; XSS &#x653b;&#x51fb;&#xff0c;&#x4f46;&#x53ef;&#x80fd;&#x9762;&#x4e34; CSRF &#x98ce;&#x9669;&#xff08;&#x9700;&#x914d;&#x5408; SameSite &#x7b49;&#x7b56;&#x7565;&#xff09;&#xff1b;&#x5b58;&#x50a8;&#x5728; Local Storage &#x4e2d;&#x5219;&#x53cd;&#x4e4b;&#x3002;","children":[],"payload":{"tag":"li","lines":"1470,1471"}},{"content":"<strong>&#x7ba1;&#x7406;&#x8ba4;&#x8bc1;&#x72b6;&#x6001;</strong>&#xff1a;&#x5728;&#x524d;&#x7aef;&#x5e94;&#x7528;&#x4e2d;&#xff08;&#x5982;&#x4f7f;&#x7528; React Context &#x6216; Redux/Pinia&#xff09;&#xff0c;&#x9700;&#x8981;&#x5168;&#x5c40;&#x7ba1;&#x7406;&#x7528;&#x6237;&#x7684;&#x767b;&#x5f55;&#x72b6;&#x6001;&#x3001;&#x7528;&#x6237;&#x4fe1;&#x606f;&#x548c; Token&#x3002;","children":[],"payload":{"tag":"li","lines":"1471,1472"}},{"content":"<strong>&#x5b9e;&#x73b0;&#x8def;&#x7531;&#x4fdd;&#x62a4;</strong>&#xff1a;&#x901a;&#x8fc7;&#x8def;&#x7531;&#x5b88;&#x536b;&#x6216;&#x9ad8;&#x9636;&#x7ec4;&#x4ef6;&#xff0c;&#x5b9e;&#x73b0;&#x9700;&#x8981;&#x767b;&#x5f55;&#x624d;&#x80fd;&#x8bbf;&#x95ee;&#x7684;&#x79c1;&#x6709;&#x8def;&#x7531;&#xff0c;&#x4ee5;&#x53ca;&#x5728;&#x7528;&#x6237;&#x672a;&#x767b;&#x5f55;&#x65f6;&#x81ea;&#x52a8;&#x91cd;&#x5b9a;&#x5411;&#x5230;&#x767b;&#x5f55;&#x9875;&#x9762;&#x3002;","children":[],"payload":{"tag":"li","lines":"1472,1473"}},{"content":"<strong>&#x5904;&#x7406; Token &#x5237;&#x65b0;</strong>&#xff1a;&#x4e3a;&#x4e86;&#x5b89;&#x5168;&#xff0c;&#x8bbf;&#x95ee; Token (Access Token) &#x7684;&#x6709;&#x6548;&#x671f;&#x901a;&#x5e38;&#x8f83;&#x77ed;&#x3002;&#x524d;&#x7aef;&#x9700;&#x8981;&#x5b9e;&#x73b0;&#x4e00;&#x5957;&#x65e0;&#x611f;&#x77e5;&#x7684; Token &#x5237;&#x65b0;&#x673a;&#x5236;&#xff08;&#x4f7f;&#x7528;&#x5237;&#x65b0; Token - Refresh Token&#xff09;&#xff0c;&#x5728;&#x8bbf;&#x95ee; Token &#x8fc7;&#x671f;&#x65f6;&#x81ea;&#x52a8;&#x83b7;&#x53d6;&#x65b0;&#x7684; Token&#xff0c;&#x907f;&#x514d;&#x4e2d;&#x65ad;&#x7528;&#x6237;&#x64cd;&#x4f5c;&#x3002;","children":[],"payload":{"tag":"li","lines":"1473,1474"}},{"content":"<strong>&#x4f18;&#x96c5;&#x5730;&#x5904;&#x7406;&#x8ba4;&#x8bc1;&#x9519;&#x8bef;</strong>&#xff1a;&#x5f53; API &#x8fd4;&#x56de;&#x8ba4;&#x8bc1;&#x5931;&#x8d25;&#xff08;&#x5982; 401 Unauthorized&#xff09;&#x65f6;&#xff0c;&#x524d;&#x7aef;&#x5e94;&#x80fd;&#x4f18;&#x96c5;&#x5730;&#x5904;&#x7406;&#xff0c;&#x4f8b;&#x5982;&#x6e05;&#x9664;&#x672c;&#x5730;&#x51ed;&#x636e;&#x3001;&#x91cd;&#x5b9a;&#x5411;&#x5230;&#x767b;&#x5f55;&#x9875;&#x5e76;&#x63d0;&#x793a;&#x7528;&#x6237;&#x3002;","children":[],"payload":{"tag":"li","lines":"1474,1476"}}],"payload":{"tag":"h4","lines":"1468,1469"}}],"payload":{"tag":"h3","lines":"1419,1420"}},{"content":"<strong>&#x7ec4;&#x4ef6;&#x9a71;&#x52a8;&#x5f00;&#x53d1;&#x4e0e; Storybook</strong>","children":[{"content":"<strong>&#x6838;&#x5fc3;&#x4ef7;&#x503c;&#xff1a;&#x4ece;&#x201c;&#x4e0a;&#x4e0b;&#x6587;&#x5f00;&#x53d1;&#x201d;&#x5230;&#x201c;&#x9694;&#x79bb;&#x5f00;&#x53d1;&#x201d;</strong>","children":[{"content":"<strong>&#x4e13;&#x6ce8;&#x4e14;&#x9ad8;&#x6548;&#x7684;&#x5f00;&#x53d1;&#x6d41;&#x7a0b;</strong>&#xff1a;&#x5f00;&#x53d1;&#x8005;&#x4e0d;&#x518d;&#x9700;&#x8981;&#x5728;&#x5e94;&#x7528;&#x4e2d;&#x901a;&#x8fc7;&#x4e00;&#x7cfb;&#x5217;&#x590d;&#x6742;&#x64cd;&#x4f5c;&#x624d;&#x80fd;&#x770b;&#x5230;&#x67d0;&#x4e2a;&#x7279;&#x5b9a; UI&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x67d0;&#x4e2a;&#x590d;&#x6742;&#x8868;&#x5355;&#x5728;&#x7b2c;&#x4e09;&#x6b65;&#x624d;&#x4f1a;&#x51fa;&#x73b0;&#x7684;&#x9519;&#x8bef;&#x63d0;&#x793a;&#xff09;&#x3002;&#x5728; Storybook &#x91cc;&#xff0c;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x4e3a;&#x8fd9;&#x4e2a;&#x9519;&#x8bef;&#x63d0;&#x793a;&#x7ec4;&#x4ef6;&#x7f16;&#x5199;&#x6545;&#x4e8b;&#xff0c;&#x5e76;&#x5728;&#x5e72;&#x51c0;&#x3001;&#x65e0;&#x5e72;&#x6270;&#x7684;&#x73af;&#x5883;&#x4e2d;&#x8fdb;&#x884c;&#x5f00;&#x53d1;&#x548c;&#x8c03;&#x8bd5;&#xff0c;&#x5f00;&#x53d1;&#x6548;&#x7387;&#x5f97;&#x5230;&#x6307;&#x6570;&#x7ea7;&#x63d0;&#x5347;&#x3002;","children":[],"payload":{"tag":"li","lines":"1488,1489"}},{"content":"<strong>&#x7cfb;&#x7edf;&#x6027;&#x7684;&#x8fb9;&#x754c;&#x60c5;&#x51b5;&#x8986;&#x76d6;</strong>&#xff1a;&#x901a;&#x8fc7;&#x4e3a;&#x7ec4;&#x4ef6;&#x7f16;&#x5199;&#x4e00;&#x7cfb;&#x5217;&#x6545;&#x4e8b;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x53ef;&#x4ee5;&#x7cfb;&#x7edf;&#x6027;&#x5730;&#x8986;&#x76d6;&#x5176;&#x6240;&#x6709;&#x53ef;&#x80fd;&#x7684;&#x72b6;&#x6001;&#x548c;&#x7528;&#x4f8b;&#xff0c;&#x5305;&#x62ec;&#x90a3;&#x4e9b;&#x5728;&#x771f;&#x5b9e;&#x5e94;&#x7528;&#x4e2d;&#x96be;&#x4ee5;&#x590d;&#x73b0;&#x7684;&#x6781;&#x7aef;&#x60c5;&#x51b5;&#xff08;&#x5982;&#x6587;&#x672c;&#x8fc7;&#x957f;&#x3001;&#x52a0;&#x8f7d;&#x5931;&#x8d25;&#x3001;&#x7f51;&#x7edc;&#x5ef6;&#x8fdf;&#x7b49;&#xff09;&#x3002;&#x8fd9;&#x4f7f;&#x5f97;&#x7ec4;&#x4ef6;&#x7684;&#x5065;&#x58ee;&#x6027;&#x548c;&#x53ef;&#x9760;&#x6027;&#x5728;&#x5f00;&#x53d1;&#x9636;&#x6bb5;&#x5c31;&#x5f97;&#x5230;&#x4e86;&#x5145;&#x5206;&#x7684;&#x4fdd;&#x969c;&#x3002;","children":[],"payload":{"tag":"li","lines":"1489,1491"}}],"payload":{"tag":"h4","lines":"1484,1485"}},{"content":"<strong>&#x8d85;&#x8d8a;&#x6587;&#x6863;&#xff1a;&#x201c;&#x6d3b;&#x7684;&#x201d;&#x534f;&#x4f5c;&#x4e0e;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x5e73;&#x53f0;</strong>","children":[{"content":"<strong>&#x4ea4;&#x4e92;&#x5f0f;&#x7684;&#x201c;&#x6d3b;&#x6587;&#x6863;&#x201d;</strong>&#xff1a;Storybook &#x80fd;&#x81ea;&#x52a8;&#x89e3;&#x6790;&#x7ec4;&#x4ef6;&#x4ee3;&#x7801;&#xff0c;&#x751f;&#x6210;&#x5305;&#x542b; props&#x3001;&#x4e8b;&#x4ef6;&#x548c;&#x6e90;&#x7801;&#x7684;&#x4ea4;&#x4e92;&#x5f0f;&#x6587;&#x6863;&#x3002;&#x56e2;&#x961f;&#x6210;&#x5458;&#xff08;&#x5305;&#x62ec;&#x8bbe;&#x8ba1;&#x5e08;&#x3001;&#x4ea7;&#x54c1;&#x7ecf;&#x7406;&#x3001;&#x6d4b;&#x8bd5;&#x5de5;&#x7a0b;&#x5e08;&#xff09;&#x65e0;&#x9700;&#x7406;&#x89e3;&#x4ee3;&#x7801;&#x6216;&#x8fd0;&#x884c;&#x6574;&#x4e2a;&#x9879;&#x76ee;&#xff0c;&#x5c31;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x4e0e;&#x6240;&#x6709; UI &#x7ec4;&#x4ef6;&#x8fdb;&#x884c;&#x4ea4;&#x4e92;&#xff0c;&#x67e5;&#x770b;&#x5176;&#x4e0d;&#x540c;&#x53d8;&#x4f53;&#x548c;&#x54cd;&#x5e94;&#x5f0f;&#x884c;&#x4e3a;&#x3002;&#x8fd9;&#x6781;&#x5927;&#x5730;&#x964d;&#x4f4e;&#x4e86;&#x6c9f;&#x901a;&#x6210;&#x672c;&#xff0c;&#x786e;&#x4fdd;&#x4e86;&#x6240;&#x6709;&#x4eba;&#x5bf9; UI &#x7684;&#x7406;&#x89e3;&#x4fdd;&#x6301;&#x4e00;&#x81f4;&#x3002;","children":[],"payload":{"tag":"li","lines":"1495,1496"}},{"content":"<strong>&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x7684;&#x4e00;&#x81f4;&#x6027;&#x4fdd;&#x969c;</strong>&#xff1a;&#x5f53;&#x4e0e; Figma &#x7b49;&#x8bbe;&#x8ba1;&#x5de5;&#x5177;&#x7ed3;&#x5408;&#x65f6;&#xff0c;Storybook &#x6210;&#x4e3a;&#x4e86;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x7684;&#x201c;&#x5355;&#x4e00;&#x4e8b;&#x5b9e;&#x6765;&#x6e90; (Single Source of Truth)&#x201d;&#x3002;&#x8bbe;&#x8ba1;&#x7a3f;&#x4e2d;&#x5b9a;&#x4e49;&#x7684;&#x7ec4;&#x4ef6;&#x89c4;&#x8303;&#xff0c;&#x5728; Storybook &#x4e2d;&#x4ee5;&#x4ee3;&#x7801;&#x7684;&#x5f62;&#x5f0f;&#x88ab;&#x7cbe;&#x786e;&#x5b9e;&#x73b0;&#x548c;&#x9a8c;&#x8bc1;&#x3002;&#x4efb;&#x4f55;&#x5bf9;&#x7ec4;&#x4ef6;&#x7684;&#x4fee;&#x6539;&#x90fd;&#x4f1a;&#x7acb;&#x523b;&#x53cd;&#x6620;&#x5728; Storybook &#x4e2d;&#xff0c;&#x786e;&#x4fdd;&#x8bbe;&#x8ba1;&#x4e0e;&#x5b9e;&#x73b0;&#x6c38;&#x4e0d;&#x8131;&#x8282;&#x3002;","children":[],"payload":{"tag":"li","lines":"1496,1498"}}],"payload":{"tag":"h4","lines":"1491,1492"}},{"content":"<strong>UI &#x6d4b;&#x8bd5;&#x7684;&#x6307;&#x6325;&#x4e2d;&#x5fc3;</strong>","children":[{"content":"<strong>&#x89c6;&#x89c9;&#x56de;&#x5f52;&#x6d4b;&#x8bd5; (Visual Regression Testing)</strong>&#xff1a;&#x8fd9;&#x662f; Storybook &#x6700;&#x5177;&#x6740;&#x4f24;&#x529b;&#x7684;&#x5e94;&#x7528;&#x4e4b;&#x4e00;&#x3002;&#x50cf; <a href=\"https://www.chromatic.com/\">Chromatic</a>&#x3001;<a href=\"https://percy.io/\">Percy</a> &#x8fd9;&#x6837;&#x7684;&#x81ea;&#x52a8;&#x5316;&#x5de5;&#x5177;&#x53ef;&#x4ee5;&#x4e0e; Storybook &#x65e0;&#x7f1d;&#x96c6;&#x6210;&#x3002;&#x5b83;&#x4eec;&#x4e3a;&#x6bcf;&#x4e2a;&#x6545;&#x4e8b;&#x62cd;&#x6444; UI &#x5feb;&#x7167;&#x4f5c;&#x4e3a;&#x201c;&#x89c6;&#x89c9;&#x57fa;&#x7ebf;&#x201d;&#x3002;&#x5f53;&#x4ee3;&#x7801;&#x53d1;&#x751f;&#x53d8;&#x66f4;&#x540e;&#xff0c;&#x4f1a;&#x81ea;&#x52a8;&#x751f;&#x6210;&#x65b0;&#x7684;&#x5feb;&#x7167;&#x5e76;&#x4e0e;&#x57fa;&#x7ebf;&#x8fdb;&#x884c;&#x50cf;&#x7d20;&#x7ea7;&#x5bf9;&#x6bd4;&#xff0c;&#x7cbe;&#x51c6;&#x5730;&#x6355;&#x83b7;&#x4efb;&#x4f55;&#x610f;&#x6599;&#x4e4b;&#x5916;&#x7684;&#x89c6;&#x89c9;&#x53d8;&#x5316;&#x3002;&#x8fd9;&#x79cd;&#x81ea;&#x52a8;&#x5316;&#x6d41;&#x7a0b;&#xff0c;&#x5c06; UI &#x4e00;&#x81f4;&#x6027;&#x4ece;&#x201c;&#x4eba;&#x5de5;&#x50cf;&#x7d20;&#x773c;&#x201d;&#x7684;&#x7e41;&#x91cd;&#x4efb;&#x52a1;&#x4e2d;&#x89e3;&#x653e;&#x51fa;&#x6765;&#xff0c;&#x53d8;&#x6210;&#x4e86;&#x53ef;&#x9760;&#x7684;&#x3001;&#x53ef;&#x91cd;&#x590d;&#x7684;&#x5de5;&#x7a0b;&#x5b9e;&#x8df5;&#x3002;","children":[],"payload":{"tag":"li","lines":"1502,1503"}},{"content":"<strong>&#x4ea4;&#x4e92;&#x4e0e;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#x6d4b;&#x8bd5; (Interaction &amp; Accessibility Testing)</strong>&#xff1a;Storybook &#x5f3a;&#x5927;&#x7684;&#x63d2;&#x4ef6;&#x751f;&#x6001;&#x7cfb;&#x7edf;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x5728;&#x6545;&#x4e8b;&#x4e2d;&#x76f4;&#x63a5;&#x96c6;&#x6210;&#x81ea;&#x52a8;&#x5316;&#x6d4b;&#x8bd5;&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x53ef;&#x4ee5;&#x7f16;&#x5199;&#x811a;&#x672c;&#x6a21;&#x62df;&#x7528;&#x6237;&#x7684;&#x70b9;&#x51fb;&#x3001;&#x8f93;&#x5165;&#x7b49;&#x4ea4;&#x4e92;&#x884c;&#x4e3a;&#xff0c;&#x5e76;&#x65ad;&#x8a00;&#x5176;&#x7ed3;&#x679c;&#x662f;&#x5426;&#x7b26;&#x5408;&#x9884;&#x671f;&#xff1b;&#x4e5f;&#x53ef;&#x4ee5;&#x8fd0;&#x884c;&#x81ea;&#x52a8;&#x5316;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#x68c0;&#x67e5; (A11y)&#xff0c;&#x786e;&#x4fdd;&#x6bcf;&#x4e2a;&#x7ec4;&#x4ef6;&#x90fd;&#x7b26;&#x5408; WCAG &#x7b49;&#x65e0;&#x969c;&#x788d;&#x6807;&#x51c6;&#xff0c;&#x8ba9;&#x5305;&#x5bb9;&#x6027;&#x8bbe;&#x8ba1;&#x5185;&#x5efa;&#x4e8e;&#x5f00;&#x53d1;&#x6d41;&#x7a0b;&#x4e4b;&#x4e2d;&#x3002;","children":[],"payload":{"tag":"li","lines":"1503,1505"}}],"payload":{"tag":"h4","lines":"1498,1499"}}],"payload":{"tag":"h3","lines":"1478,1479"}},{"content":"<strong>&#x6d4b;&#x8bd5;&#x7b56;&#x7565;&#xff1a;&#x786e;&#x4fdd;&#x4ee3;&#x7801;&#x8d28;&#x91cf;&#x548c;&#x53ef;&#x9760;&#x6027;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x6d41;&#x884c;&#x6d4b;&#x8bd5;&#x6846;&#x67b6;&#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"1527,1533\">\n<thead data-lines=\"1527,1528\">\n<tr data-lines=\"1527,1528\">\n<th style=\"text-align:left\">&#x6846;&#x67b6;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x7c7b;&#x578b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x901f;&#x5ea6;</th>\n<th style=\"text-align:left\">&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x8bed;&#x8a00;&#x652f;&#x6301;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x6a21;&#x62df;&#x80fd;&#x529b;</th>\n<th style=\"text-align:left\">&#x8c03;&#x8bd5;&#x5de5;&#x5177;</th>\n<th style=\"text-align:left\">&#x793e;&#x533a;/&#x751f;&#x6001;&#x7cfb;&#x7edf;</th>\n<th style=\"text-align:left\">&#x7406;&#x60f3;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1529,1533\">\n<tr data-lines=\"1529,1530\">\n<td style=\"text-align:left\"><a href=\"https://jestjs.io/\"><strong>Jest</strong></a></td>\n<td style=\"text-align:left\">&#x5355;&#x5143;&#x3001;&#x96c6;&#x6210;&#x3001;E2E</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;&#xff0c;&#x53ef;&#x9760;</td>\n<td style=\"text-align:left\">Chrome, <a href=\"https://www.mozilla.org/en-US/firefox/new/\">Firefox</a>, <a href=\"https://www.microsoft.com/en-us/edge\">Edge</a></td>\n<td style=\"text-align:left\">JavaScript, <a href=\"https://www.typescriptlang.org/\">TypeScript</a></td>\n<td style=\"text-align:left\">&#x5f3a;&#x5927;&#xff0c;&#x5185;&#x7f6e;</td>\n<td style=\"text-align:left\">&#x62a5;&#x544a;&#xff0c;&#x5feb;&#x7167;&#xff0c;&#x8c03;&#x8bd5;&#x5668;</td>\n<td style=\"text-align:left\">&#x5e9e;&#x5927;&#xff0c;&#x6210;&#x719f;</td>\n<td style=\"text-align:left\">&#x4efb;&#x4f55; JavaScript &#x9879;&#x76ee;&#xff0c;&#x5927;&#x578b;&#x5e94;&#x7528;</td>\n</tr>\n<tr data-lines=\"1530,1531\">\n<td style=\"text-align:left\"><a href=\"https://vitest.dev/\"><strong>Vitest</strong></a></td>\n<td style=\"text-align:left\">&#x5355;&#x5143;&#x3001;&#x96c6;&#x6210;</td>\n<td style=\"text-align:left\">&#x6781;&#x901f;</td>\n<td style=\"text-align:left\">Chrome, <a href=\"https://www.mozilla.org/en-US/firefox/new/\">Firefox</a>, <a href=\"https://www.microsoft.com/en-us/edge\">Edge</a></td>\n<td style=\"text-align:left\">JavaScript, <a href=\"https://www.typescriptlang.org/\">TypeScript</a></td>\n<td style=\"text-align:left\">&#x7c7b;&#x4f3c; <a href=\"https://jestjs.io/\">Jest</a>&#xff0c;&#x66f4;&#x73b0;&#x4ee3;</td>\n<td style=\"text-align:left\">&#x6d4f;&#x89c8;&#x5668; GUI&#xff0c;&#x9519;&#x8bef;&#x62a5;&#x544a;</td>\n<td style=\"text-align:left\">&#x6b63;&#x5728;&#x589e;&#x957f;</td>\n<td style=\"text-align:left\"><a href=\"https://vitejs.dev/\">Vite</a> &#x9879;&#x76ee;&#xff0c;&#x6ce8;&#x91cd;&#x901f;&#x5ea6;&#x548c;&#x73b0;&#x4ee3; JS &#x7279;&#x6027;</td>\n</tr>\n<tr data-lines=\"1531,1532\">\n<td style=\"text-align:left\"><a href=\"https://www.cypress.io/\"><strong>Cypress</strong></a></td>\n<td style=\"text-align:left\">E2E</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\">Chrome, <a href=\"https://www.mozilla.org/en-US/firefox/new/\">Firefox</a>, <a href=\"https://www.microsoft.com/en-us/edge\">Edge</a></td>\n<td style=\"text-align:left\">JavaScript</td>\n<td style=\"text-align:left\">&#x5b9e;&#x65f6;&#xff0c;&#x5185;&#x7f6e;</td>\n<td style=\"text-align:left\">GUI&#xff0c;&#x65f6;&#x95f4;&#x65c5;&#x884c;&#x8c03;&#x8bd5;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5927;&#xff0c;&#x6210;&#x719f;</td>\n<td style=\"text-align:left\">JavaScript &#x5bc6;&#x96c6;&#x578b;&#x524d;&#x7aef;&#x5e94;&#x7528;&#xff0c;&#x5b9e;&#x65f6;&#x53cd;&#x9988;</td>\n</tr>\n<tr data-lines=\"1532,1533\">\n<td style=\"text-align:left\"><a href=\"https://playwright.dev/\"><strong>Playwright</strong></a></td>\n<td style=\"text-align:left\">E2E</td>\n<td style=\"text-align:left\">&#x6781;&#x901f;</td>\n<td style=\"text-align:left\">Chrome, <a href=\"https://www.mozilla.org/en-US/firefox/new/\">Firefox</a>, <a href=\"https://www.apple.com/safari/\">Safari</a>, <a href=\"https://www.microsoft.com/en-us/edge\">Edge</a></td>\n<td style=\"text-align:left\">JS/TS, Python, C#, Java</td>\n<td style=\"text-align:left\">&#x5f3a;&#x5927;&#xff0c;&#x5e76;&#x884c;</td>\n<td style=\"text-align:left\">&#x5f3a;&#x5927;&#xff0c;&#x9700;&#x9ad8;&#x7ea7;&#x6280;&#x80fd;</td>\n<td style=\"text-align:left\">&#x6b63;&#x5728;&#x589e;&#x957f;</td>\n<td style=\"text-align:left\">&#x590d;&#x6742;&#x96c6;&#x6210;&#x573a;&#x666f;&#xff0c;&#x8de8;&#x6d4f;&#x89c8;&#x5668;/&#x8bbe;&#x5907;&#x6d4b;&#x8bd5;&#xff0c;&#x5e76;&#x884c;&#x6267;&#x884c;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1527,1533"}}],"payload":{"tag":"h4","lines":"1525,1526"}}],"payload":{"tag":"h3","lines":"1507,1508"}},{"content":"<strong>&#x56fd;&#x9645;&#x5316; (i18n) &#x548c;&#x672c;&#x5730;&#x5316; (l10n)&#xff1a;&#x5168;&#x7403;&#x5316;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x6d41;&#x884c;&#x56fd;&#x9645;&#x5316;&#x5e93;&#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"1557,1562\">\n<thead data-lines=\"1557,1558\">\n<tr data-lines=\"1557,1558\">\n<th style=\"text-align:left\">&#x5e93;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x6846;&#x67b6;&#x517c;&#x5bb9;&#x6027;</th>\n<th style=\"text-align:left\">&#x529f;&#x80fd;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x7075;&#x6d3b;&#x6027;</th>\n<th style=\"text-align:left\">&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</th>\n<th style=\"text-align:left\">&#x6027;&#x80fd;/&#x5305;&#x5927;&#x5c0f;</th>\n<th style=\"text-align:left\">&#x6807;&#x51c6;&#x9075;&#x5faa;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1559,1562\">\n<tr data-lines=\"1559,1560\">\n<td style=\"text-align:left\"><a href=\"https://react.i18next.com/\"><strong>react-i18next</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a></td>\n<td style=\"text-align:left\">&#x5d4c;&#x5957;&#x7ffb;&#x8bd1;&#xff0c;&#x590d;&#x6570;&#xff0c;&#x8bed;&#x8a00;&#x68c0;&#x6d4b;&#xff0c;&#x65e5;&#x671f;/&#x6570;&#x5b57;&#x683c;&#x5f0f;&#x5316;</td>\n<td style=\"text-align:left\">&#x9ad8;</td>\n<td style=\"text-align:left\">&#x4e2d;&#x7b49;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5927;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n</tr>\n<tr data-lines=\"1560,1561\">\n<td style=\"text-align:left\"><a href=\"https://vue-i18n.intlify.dev/\"><strong>vue-i18n</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://vuejs.org/\">Vue</a></td>\n<td style=\"text-align:left\">&#x6d88;&#x606f;&#x683c;&#x5f0f;&#x5316;&#xff0c;&#x590d;&#x6570;&#xff0c;&#x65e5;&#x671f;/&#x65f6;&#x95f4;&#x672c;&#x5730;&#x5316;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\">&#x8f83;&#x4f4e;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n</tr>\n<tr data-lines=\"1561,1562\">\n<td style=\"text-align:left\"><a href=\"https://formatjs.io/\"><strong>FormatJS</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://react.dev/\">React</a></td>\n<td style=\"text-align:left\"><a href=\"https://icu.unicode.org/\">ICU</a> &#x6d88;&#x606f;&#x8bed;&#x6cd5;&#xff0c;<a href=\"https://cldr.unicode.org/\">Unicode CLDR</a>&#xff0c;&#x65e5;&#x671f;/&#x6570;&#x5b57;&#x683c;&#x5f0f;&#x5316;</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\">&#x4e2d;&#x7b49;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x4f18;&#x79c0;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1557,1562"}}],"payload":{"tag":"h4","lines":"1555,1556"}}],"payload":{"tag":"h3","lines":"1536,1537"}},{"content":"<strong>&#x9519;&#x8bef;&#x5904;&#x7406;&#x548c;&#x9632;&#x5fa1;&#x6027;&#x7f16;&#x7a0b;&#xff1a;&#x6784;&#x5efa;&#x5065;&#x58ee;&#x7684;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;</strong>","children":[{"content":"<strong>&#x4f18;&#x96c5;&#x9519;&#x8bef;&#x5904;&#x7406;</strong>&#xff1a;&#x7ba1;&#x7406;&#x9519;&#x8bef;&#xff0c;&#x4f7f;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x80fd;&#x591f;&#x7ee7;&#x7eed;&#x8fd0;&#x884c;&#xff0c;&#x63d0;&#x4f9b;&#x4fe1;&#x606f;&#x6027;&#x6d88;&#x606f;&#x3001;&#x56de;&#x9000;&#x673a;&#x5236;&#x5e76;&#x505a;&#x5230;&#x4f18;&#x96c5;&#x964d;&#x7ea7;&#xff08;Graceful Degradation&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"1569,1570"}},{"content":"<strong>&#x9519;&#x8bef;&#x8fb9;&#x754c; (React)</strong>&#xff1a;&#x6355;&#x83b7;&#x5176;&#x5b50;&#x7ec4;&#x4ef6;&#x6811;&#x4e2d;&#x7684; JavaScript &#x9519;&#x8bef;&#x3001;&#x8bb0;&#x5f55;&#x8fd9;&#x4e9b;&#x9519;&#x8bef;&#x5e76;&#x663e;&#x793a;&#x5907;&#x7528; UI &#x800c;&#x4e0d;&#x662f;&#x5bfc;&#x81f4;&#x6574;&#x4e2a;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x5d29;&#x6e83;&#x7684; React &#x7ec4;&#x4ef6;&#x3002;","children":[],"payload":{"tag":"li","lines":"1570,1571"}},{"content":"<strong>API &#x6570;&#x636e;&#x9a8c;&#x8bc1;&#xff08;&#x524d;&#x7aef;&#xff09;</strong>&#xff1a;","children":[{"content":"<strong>&#x5ba2;&#x6237;&#x7aef;&#x9a8c;&#x8bc1;</strong>&#xff1a;&#x7528;&#x6237;&#x8f93;&#x5165;&#x7684;&#x521d;&#x59cb;&#x68c0;&#x67e5;&#xff08;&#x4f8b;&#x5982;&#xff0c;HTML &#x8868;&#x5355;&#x9a8c;&#x8bc1;&#x3001;JavaScript &#x9a8c;&#x8bc1;&#xff09;&#x901a;&#x8fc7;&#x53ca;&#x65e9;&#x6355;&#x83b7;&#x65e0;&#x6548;&#x6570;&#x636e;&#x6765;&#x6539;&#x5584;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#x3002;","children":[],"payload":{"tag":"li","lines":"1572,1573"}},{"content":"<strong>&#x91cd;&#x8981;&#x63d0;&#x793a;</strong>&#xff1a;&#x5ba2;&#x6237;&#x7aef;&#x9a8c;&#x8bc1;<strong>&#x4e0d;&#x662f;&#x5b89;&#x5168;&#x63aa;&#x65bd;</strong>&#xff0c;&#x53ef;&#x4ee5;&#x7ed5;&#x8fc7;&#xff1b;<strong>&#x670d;&#x52a1;&#x5668;&#x7aef;&#x9a8c;&#x8bc1;&#x59cb;&#x7ec8;&#x662f;&#x5b89;&#x5168;&#x548c;&#x6570;&#x636e;&#x5b8c;&#x6574;&#x6027;&#x6240;&#x5fc5;&#x9700;&#x7684;</strong>&#x3002;","children":[],"payload":{"tag":"li","lines":"1573,1574"}},{"content":"<strong>&#x6700;&#x4f73;&#x5b9e;&#x8df5;</strong>&#xff1a;&#x5b9a;&#x4e49;&#x6e05;&#x6670;&#x7684;&#x9a8c;&#x8bc1;&#x89c4;&#x5219;&#xff08;&#x6570;&#x636e;&#x7c7b;&#x578b;&#x3001;&#x5fc5;&#x586b;&#x5b57;&#x6bb5;&#xff09;&#x3001;&#x53ca;&#x65e9;&#x9a8c;&#x8bc1;&#x8f93;&#x5165;&#x3001;&#x4f7f;&#x7528;&#x6807;&#x51c6;&#x5316;&#x9519;&#x8bef;&#x6d88;&#x606f;&#x3002;","children":[],"payload":{"tag":"li","lines":"1574,1575"}}],"payload":{"tag":"li","lines":"1571,1575"}},{"content":"<strong>&#x9632;&#x5fa1;&#x6027;&#x7f16;&#x7a0b;</strong>&#xff1a;&#x7f16;&#x5199;&#x4e0d;&#x6613;&#x53d7;&#x610f;&#x5916;&#x8f93;&#x5165;&#x6216;&#x64cd;&#x4f5c;&#x5bfc;&#x81f4;&#x9519;&#x8bef;&#x7684;&#x4ee3;&#x7801;&#x7684;&#x65b9;&#x6cd5;&#xff0c;&#x5305;&#x62ec;&#x4f7f;&#x7528; try-catch &#x5757;&#x3001;&#x9a8c;&#x8bc1;&#x53c2;&#x6570;/&#x8fd4;&#x56de;&#x503c;&#x4ee5;&#x53ca;&#x5b89;&#x5168; Web &#x5b58;&#x50a8;/&#x6d88;&#x606f;&#x4f20;&#x9012;&#x3002;","children":[],"payload":{"tag":"li","lines":"1575,1577"}}],"payload":{"tag":"h3","lines":"1565,1566"}},{"content":"<strong>UX &#x5de5;&#x7a0b;&#x539f;&#x5219;&#xff1a;&#x589e;&#x5f3a;&#x7528;&#x6237;&#x4f53;&#x9a8c;</strong>","children":[{"content":"<strong>&#x5173;&#x952e;&#x539f;&#x5219;</strong>&#xff1a;","children":[{"content":"<strong>&#x4e00;&#x81f4;&#x6027;</strong>&#xff1a;&#x719f;&#x6089;&#x7684;&#x6a21;&#x5f0f;&#x51cf;&#x5c11;&#x4e86;&#x6df7;&#x6dc6;&#x5e76;&#x5efa;&#x7acb;&#x4e86;&#x4fe1;&#x4efb;&#x3002;","children":[],"payload":{"tag":"li","lines":"1584,1585"}},{"content":"<strong>&#x53ef;&#x5b66;&#x4e60;&#x6027;</strong>&#xff1a;&#x754c;&#x9762;&#x5e94;&#x9700;&#x8981;&#x6700;&#x5c11;&#x7684;&#x89e3;&#x91ca;&#x3002;","children":[],"payload":{"tag":"li","lines":"1585,1586"}},{"content":"<strong>&#x53cd;&#x9988;&#x5faa;&#x73af;</strong>&#xff1a;&#x7528;&#x6237;&#x7684;&#x6bcf;&#x4e2a;&#x64cd;&#x4f5c;&#x90fd;&#x5e94;&#x4ea7;&#x751f;&#x53ef;&#x89c1;&#x6216;&#x89e6;&#x89c9;&#x54cd;&#x5e94;&#x3002;","children":[],"payload":{"tag":"li","lines":"1586,1587"}},{"content":"<strong>&#x89c6;&#x89c9;&#x8bbe;&#x8ba1;</strong>&#xff1a;&#x6e05;&#x6670;&#x7684;&#x6392;&#x7248;&#x3001;&#x989c;&#x8272;&#x3001;&#x95f4;&#x8ddd;&#x548c;&#x5c42;&#x6b21;&#x7ed3;&#x6784;&#x3002;","children":[],"payload":{"tag":"li","lines":"1587,1588"}},{"content":"<strong>&#x4ea4;&#x4e92;&#x7cfb;&#x7edf;</strong>&#xff1a;&#x4e00;&#x81f4;&#x4e14;&#x76f4;&#x89c2;&#x7684;&#x4ea4;&#x4e92;&#x5143;&#x7d20;&#x3002;","children":[],"payload":{"tag":"li","lines":"1588,1589"}},{"content":"<strong>&#x7528;&#x6237;&#x6d41;&#x7a0b;</strong>&#xff1a;&#x5b8c;&#x6210;&#x4efb;&#x52a1;&#x7684;&#x81ea;&#x7136;&#x548c;&#x5f15;&#x5bfc;&#x8def;&#x5f84;&#x3002;","children":[],"payload":{"tag":"li","lines":"1589,1590"}},{"content":"<strong>&#x79fb;&#x52a8;&#x54cd;&#x5e94;&#x6027;</strong>&#xff1a;&#x5e03;&#x5c40;&#x9002;&#x5e94;&#x5404;&#x79cd;&#x8bbe;&#x5907;&#x3002;","children":[],"payload":{"tag":"li","lines":"1590,1591"}},{"content":"<strong>&#x52a0;&#x8f7d;&#x901f;&#x5ea6;&#x548c;&#x6027;&#x80fd;</strong>&#xff1a;&#x4f18;&#x5316;&#x8d44;&#x4ea7;&#x548c;&#x4ee3;&#x7801;&#x4ee5;&#x5b9e;&#x73b0;&#x5feb;&#x901f;&#x54cd;&#x5e94;&#x3002;","children":[],"payload":{"tag":"li","lines":"1591,1592"}},{"content":"<strong>&#x53ef;&#x8bbf;&#x95ee;&#x6027;</strong>&#xff1a;&#x5305;&#x5bb9;&#x6027;&#x8bbe;&#x8ba1;&#x3002;","children":[],"payload":{"tag":"li","lines":"1592,1593"}}],"payload":{"tag":"li","lines":"1583,1593"}},{"content":"<strong>&#x4ea4;&#x4e92;&#x53cd;&#x9988;</strong>&#xff1a;&#x5bf9;&#x7528;&#x6237;&#x64cd;&#x4f5c;&#x63d0;&#x4f9b;&#x5373;&#x65f6;&#x89c6;&#x89c9;&#x6216;&#x89e6;&#x89c9;&#x54cd;&#x5e94;&#x3002;","children":[],"payload":{"tag":"li","lines":"1593,1594"}},{"content":"<strong>&#x54cd;&#x5e94;&#x5f0f;&#x4ea4;&#x4e92;</strong>&#xff1a;&#x786e;&#x4fdd; UI &#x5728;&#x4e0d;&#x540c;&#x5c4f;&#x5e55;&#x5c3a;&#x5bf8;&#x548c;&#x8f93;&#x5165;&#x65b9;&#x6cd5;&#x4e0b;&#x90fd;&#x80fd;&#x826f;&#x597d;&#x9002;&#x5e94;&#x548c;&#x6267;&#x884c;&#x3002;","children":[],"payload":{"tag":"li","lines":"1594,1595"}},{"content":"<strong>&#x6027;&#x80fd;&#x611f;&#x77e5;</strong>&#xff1a;&#x7528;&#x6237;&#x5bf9;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x901f;&#x5ea6;&#x7684;&#x611f;&#x77e5;&#xff0c;&#x53d7;&#x52a0;&#x8f7d;&#x901f;&#x5ea6;&#x3001;&#x54cd;&#x5e94;&#x6027;&#x548c;&#x6d41;&#x7545;&#x8fc7;&#x6e21;&#x7684;&#x5f71;&#x54cd;&#x3002;","children":[],"payload":{"tag":"li","lines":"1595,1597"}}],"payload":{"tag":"h3","lines":"1579,1580"}},{"content":"<strong>&#x524d;&#x7aef;&#x67b6;&#x6784;&#x6a21;&#x5f0f;&#xff1a;&#x6269;&#x5c55;&#x590d;&#x6742;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;</strong>","children":[{"content":"<strong>&#x5355;&#x4f53;&#x67b6;&#x6784;</strong>&#xff1a;&#x4f20;&#x7edf;&#x65b9;&#x6cd5;&#xff0c;HTML&#x3001;CSS &#x548c; JavaScript &#x6346;&#x7ed1;&#x5728;&#x4e00;&#x4e2a;&#x4ed3;&#x5e93;&#x4e2d;&#x5e76;&#x4f5c;&#x4e3a;&#x5355;&#x4e2a;&#x5b9e;&#x4f53;&#x90e8;&#x7f72;&#x3002;&#x9002;&#x7528;&#x4e8e;&#x4e2d;&#x5c0f;&#x578b;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#xff0c;&#x4f46;&#x96be;&#x4ee5;&#x6269;&#x5c55;&#x3002;","children":[],"payload":{"tag":"li","lines":"1603,1604"}},{"content":"<strong>&#x5fae;&#x524d;&#x7aef;</strong>&#xff1a;&#x5c06;&#x5355;&#x4f53;&#x524d;&#x7aef;&#x5206;&#x89e3;&#x4e3a;&#x66f4;&#x5c0f;&#x3001;&#x81ea;&#x5305;&#x542b;&#x7684;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#xff0c;&#x53ef;&#x4ee5;&#x72ec;&#x7acb;&#x5f00;&#x53d1;&#x3001;&#x90e8;&#x7f72;&#x548c;&#x7ef4;&#x62a4;&#x3002;&#x6bcf;&#x4e2a;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x4ee3;&#x8868; UI &#x7684;&#x4e00;&#x4e2a;&#x529f;&#x80fd;/&#x90e8;&#x5206;&#xff0c;&#x5e76;&#x4e14;&#x53ef;&#x4ee5;&#x4f7f;&#x7528;&#x4e0d;&#x540c;&#x7684;&#x6846;&#x67b6;&#x3002;&#x901a;&#x5e38;&#x7531; <a href=\"https://webpack.js.org/concepts/module-federation/\">Module Federation</a> (<a href=\"https://webpack.js.org/\">Webpack</a> 5) &#x542f;&#x7528;&#x3002;","children":[],"payload":{"tag":"li","lines":"1604,1605"}},{"content":"<strong>JAMstack (JavaScript, APIs, Markup)</strong>&#xff1a;&#x901a;&#x8fc7; API &#x9884;&#x6784;&#x5efa;&#x524d;&#x7aef;&#xff0c;&#x5177;&#x6709;&#x52a8;&#x6001;&#x529f;&#x80fd;&#x3002;&#x975e;&#x5e38;&#x9002;&#x5408;&#x9759;&#x6001;&#x7f51;&#x7ad9;&#x3001;&#x535a;&#x5ba2;&#x3001;&#x7535;&#x5b50;&#x5546;&#x52a1;&#xff0c;&#x4e13;&#x6ce8;&#x4e8e;&#x5feb;&#x901f;&#x9875;&#x9762;&#x52a0;&#x8f7d;&#x548c;&#x7b80;&#x5316;&#x7684; CI/CD&#x3002;","children":[],"payload":{"tag":"li","lines":"1605,1607"}}],"payload":{"tag":"h3","lines":"1599,1600"}},{"content":"<strong>&#x79fb;&#x52a8;&#x7aef; Web &#x5f00;&#x53d1;&#x6df1;&#x5ea6;&#x5b9e;&#x8df5;</strong>","children":[{"content":"<strong>&#x54cd;&#x5e94;&#x5f0f;&#x8bbe;&#x8ba1;&#x8fdb;&#x9636;&#x6280;&#x5de7;</strong>","children":[{"content":"\n<p data-lines=\"1617,1618\">&#x6d41;&#x5f0f;&#x7f51;&#x683c; (Fluid Grids)&#xff0c;&#x4f7f;&#x7528;&#x76f8;&#x5bf9;&#x5355;&#x4f4d;&#xff08;&#x5982;&#x767e;&#x5206;&#x6bd4;&#x3001;em&#x3001;rem&#x3001;vw/vh&#xff09;&#x5b9a;&#x4e49;&#x5e03;&#x5c40;&#x5143;&#x7d20;&#xff08;&#x5982;&#x5217;&#x5bbd;&#xff09;&#xff0c;&#x800c;&#x975e;&#x56fa;&#x5b9a;&#x50cf;&#x7d20;&#xff0c;&#x4f7f;&#x5e03;&#x5c40;&#x80fd;&#x6839;&#x636e;&#x89c6;&#x53e3;&#x5927;&#x5c0f;&#x81ea;&#x9002;&#x5e94;&#x7f29;&#x653e;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1617,1618"}},{"content":"\n<p data-lines=\"1618,1619\">&#x5f39;&#x6027;&#x56fe;&#x7247; (Flexible Images)&#xff0c;&#x786e;&#x4fdd;&#x56fe;&#x7247;&#x80fd;&#x6839;&#x636e;&#x5c4f;&#x5e55;&#x5c3a;&#x5bf8;&#x9002;&#x5f53;&#x7f29;&#x653e;&#xff0c;&#x907f;&#x514d;&#x6ea2;&#x51fa;&#x6216;&#x5931;&#x771f;&#x3002;&#x53ef;&#x4ee5;&#x4f7f;&#x7528; max-width: 100%&#x3001;object-fit &#x6216; srcset/<code>&lt;picture&gt;</code>&#x5143;&#x7d20;&#x6765;&#x63d0;&#x4f9b;&#x4e0d;&#x540c;&#x5206;&#x8fa8;&#x7387;&#x7684;&#x56fe;&#x7247;&#xff0c;&#x4f18;&#x5316;&#x52a0;&#x8f7d;&#x6027;&#x80fd;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1618,1619"}},{"content":"\n<p data-lines=\"1619,1620\">CSS &#x5a92;&#x4f53;&#x67e5;&#x8be2; (Media Queries)&#xff0c;&#x6839;&#x636e;&#x5c4f;&#x5e55;&#x5c3a;&#x5bf8;&#x3001;&#x5206;&#x8fa8;&#x7387;&#x3001;&#x8bbe;&#x5907;&#x65b9;&#x5411;&#x7b49;&#x6761;&#x4ef6;&#x5e94;&#x7528;&#x4e0d;&#x540c;&#x7684;&#x6837;&#x5f0f;&#x3002;</p>\n<p data-lines=\"1621,1622\">&#x8fdb;&#x9636;&#x4f7f;&#x7528;&#x5305;&#x62ec;&#x57fa;&#x4e8e;&#x529f;&#x80fd;&#x800c;&#x975e;&#x8bbe;&#x5907;&#xff08;&#x907f;&#x514d;&#x9488;&#x5bf9;&#x7279;&#x5b9a;&#x8bbe;&#x5907;&#x7f16;&#x5199;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#xff0c;&#x800c;&#x662f;&#x6839;&#x636e;&#x5185;&#x5bb9;&#x7684;&#x9700;&#x6c42;&#x548c;&#x5e03;&#x5c40;&#x7684;&#x65ad;&#x70b9;&#x6765;&#x5b9a;&#x4e49;&#x67e5;&#x8be2;&#xff09;&#x3001;min-width &#x4f18;&#x5148;&#xff08;&#x79fb;&#x52a8;&#x4f18;&#x5148;&#xff0c;&#x4ece;&#x6700;&#x5c0f;&#x5c4f;&#x5e55;&#x5f00;&#x59cb;&#x8bbe;&#x8ba1;&#xff0c;&#x9010;&#x6b65;&#x4e3a;&#x66f4;&#x5927;&#x5c4f;&#x5e55;&#x6dfb;&#x52a0;&#x6837;&#x5f0f;&#xff0c;&#x7b80;&#x5316; CSS &#x7ed3;&#x6784;&#xff09;&#x3001;&#x590d;&#x6742;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#xff08;&#x7ed3;&#x5408; and&#x3001;or &#x64cd;&#x4f5c;&#x7b26;&#xff0c;&#x4ee5;&#x53ca; prefers-color-scheme&#xff08;&#x6697;&#x6a21;&#x5f0f;&#xff09;&#x3001;hover&#xff08;&#x89e6;&#x63a7;/&#x9f20;&#x6807;&#xff09;&#x3001;orientation&#xff08;&#x6a2a;&#x5c4f;/&#x7ad6;&#x5c4f;&#xff09;&#x7b49;&#x7279;&#x6027;&#x8fdb;&#x884c;&#x66f4;&#x7cbe;&#x7ec6;&#x7684;&#x63a7;&#x5236;&#xff09;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1619,1623"}},{"content":"\n<p data-lines=\"1623,1624\">Flexbox &#x548c; Grid &#x5e03;&#x5c40;&#xff0c;Flexbox &#x64c5;&#x957f;&#x4e00;&#x7ef4;&#x5e03;&#x5c40;&#xff0c;&#x5982;&#x5bfc;&#x822a;&#x83dc;&#x5355;&#x3001;&#x5361;&#x7247;&#x5217;&#x8868;&#x7b49;&#xff0c;&#x901a;&#x8fc7; flex-grow&#x3001;flex-shrink &#x548c; flex-basis &#x7b49;&#x5c5e;&#x6027;&#xff0c;&#x7075;&#x6d3b;&#x63a7;&#x5236;&#x9879;&#x76ee;&#x5728;&#x5bb9;&#x5668;&#x4e2d;&#x7684;&#x4f38;&#x7f29;&#x548c;&#x7a7a;&#x95f4;&#x5206;&#x914d;&#xff1b;CSS Grid &#x64c5;&#x957f;&#x4e8c;&#x7ef4;&#x5e03;&#x5c40;&#xff0c;&#x7528;&#x4e8e;&#x521b;&#x5efa;&#x590d;&#x6742;&#x7684;&#x9875;&#x9762;&#x7f51;&#x683c;&#x7ed3;&#x6784;&#xff0c;&#x53ef;&#x4ee5;&#x8f7b;&#x677e;&#x5b9a;&#x4e49;&#x884c;&#x548c;&#x5217;&#xff0c;&#x5b9e;&#x73b0;&#x66f4;&#x5f3a;&#x5927;&#x7684;&#x5e03;&#x5c40;&#x63a7;&#x5236;&#x3002;&#x89c6;&#x53e3;&#x5355;&#x4f4d; (Viewport Units)&#xff0c;vw (viewport width), vh (viewport height), vmin, vmax &#x53ef;&#x4ee5;&#x7528;&#x4e8e;&#x521b;&#x5efa;&#x4e0e;&#x89c6;&#x53e3;&#x5927;&#x5c0f;&#x76f4;&#x63a5;&#x76f8;&#x5173;&#x7684;&#x5b57;&#x4f53;&#x5927;&#x5c0f;&#x3001;&#x5143;&#x7d20;&#x5c3a;&#x5bf8;&#x7b49;&#xff0c;&#x5b9e;&#x73b0;&#x66f4;&#x7ec6;&#x81f4;&#x7684;&#x54cd;&#x5e94;&#x5f0f;&#x6548;&#x679c;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1623,1624"}},{"content":"\n<p data-lines=\"1624,1625\">&#x81ea;&#x5b9a;&#x4e49;&#x5c5e;&#x6027; (CSS Variables)&#xff0c;&#x7ed3;&#x5408;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#xff0c;&#x53ef;&#x4ee5;&#x52a8;&#x6001;&#x6539;&#x53d8; CSS &#x53d8;&#x91cf;&#x7684;&#x503c;&#xff0c;&#x4ece;&#x800c;&#x5b9e;&#x73b0;&#x66f4;&#x7075;&#x6d3b;&#x7684;&#x4e3b;&#x9898;&#x548c;&#x54cd;&#x5e94;&#x5f0f;&#x8c03;&#x6574;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1624,1626"}}],"payload":{"tag":"h4","lines":"1613,1614"}},{"content":"<strong>Touch &#x4e8b;&#x4ef6;&#x3001;&#x624b;&#x52bf;&#x5e93;&#x7684;&#x4f7f;&#x7528;</strong>","children":[],"payload":{"tag":"h4","lines":"1626,1627"}},{"content":"<strong>&#x79fb;&#x52a8;&#x7aef;&#x7279;&#x6709;&#x7684;&#x6027;&#x80fd;&#x4f18;&#x5316;&#x7b56;&#x7565;</strong>","children":[],"payload":{"tag":"h4","lines":"1640,1641"}}],"payload":{"tag":"h3","lines":"1609,1610"}},{"content":"<strong>&#x5fae;&#x524d;&#x7aef;&#x67b6;&#x6784;&#x6df1;&#x5ea6;&#x5b9e;&#x8df5;</strong>","children":[{"content":"<strong>&#x5177;&#x4f53;&#x5b9e;&#x73b0;&#x65b9;&#x6848;&#x5bf9;&#x6bd4;</strong>","children":[],"payload":{"tag":"h4","lines":"1652,1653"}},{"content":"<strong>&#x6838;&#x5fc3;&#x6311;&#x6218;&#x4e0e;&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>","children":[{"content":"","children":[{"content":"CSS Modules&#xff1a;&#x901a;&#x8fc7;&#x6784;&#x5efa;&#x65f6;&#x54c8;&#x5e0c;&#x5316;&#x7c7b;&#x540d;&#xff0c;&#x786e;&#x4fdd;&#x6837;&#x5f0f;&#x5c40;&#x90e8;&#x4f5c;&#x7528;&#x57df;&#x3002;CSS-in-JS&#xff0c;&#x81ea;&#x52a8;&#x751f;&#x6210;&#x552f;&#x4e00;&#x7c7b;&#x540d;&#xff0c;&#x5b9e;&#x73b0;&#x6837;&#x5f0f;&#x5c01;&#x88c5;&#x3002;","children":[],"payload":{"tag":"li","lines":"1668,1669"}},{"content":"Shadow DOM&#xff1a;Web Components &#x4e2d;&#x7684; Shadow DOM &#x63d0;&#x4f9b;&#x4e86;&#x539f;&#x751f;&#x7684;&#x6837;&#x5f0f;&#x9694;&#x79bb;&#x80fd;&#x529b;&#xff0c;&#x4f46;&#x517c;&#x5bb9;&#x6027;&#x53ef;&#x80fd;&#x5b58;&#x5728;&#x95ee;&#x9898;&#x3002;","children":[],"payload":{"tag":"li","lines":"1669,1670"}},{"content":"BEM/&#x547d;&#x540d;&#x7ea6;&#x5b9a;&#xff1a;&#x4e25;&#x683c;&#x9075;&#x5faa;&#x547d;&#x540d;&#x89c4;&#x8303;&#xff0c;&#x867d;&#x7136;&#x4e0d;&#x80fd;&#x5b8c;&#x5168;&#x907f;&#x514d;&#x51b2;&#x7a81;&#xff0c;&#x4f46;&#x80fd;&#x964d;&#x4f4e;&#x98ce;&#x9669;&#x3002;","children":[],"payload":{"tag":"li","lines":"1670,1671"}},{"content":"Qiankun &#x7684;&#x6837;&#x5f0f;&#x6c99;&#x7bb1;&#xff1a;Qiankun &#x5185;&#x7f6e;&#x4e86;&#x6837;&#x5f0f;&#x6c99;&#x7bb1;&#xff0c;&#x901a;&#x8fc7;&#x52a8;&#x6001;&#x6dfb;&#x52a0;/&#x79fb;&#x9664;&#x6837;&#x5f0f;&#x8868;&#x6216;&#x4fee;&#x6539; CSS &#x9009;&#x62e9;&#x5668;&#x6765;&#x9694;&#x79bb;&#x6837;&#x5f0f;&#xff0c;&#x6709;&#x6548;&#x9632;&#x6b62;&#x6837;&#x5f0f;&#x6c61;&#x67d3;&#x3002;","children":[],"payload":{"tag":"li","lines":"1671,1673"}}],"payload":{"tag":"ul","lines":"1668,1673"}},{"content":"","children":[{"content":"Qiankun &#x7684; JS &#x6c99;&#x7bb1;&#xff1a;Qiankun &#x5185;&#x7f6e;&#x4e86; JS &#x6c99;&#x7bb1;&#xff0c;&#x901a;&#x8fc7;&#x4ee3;&#x7406; window &#x5bf9;&#x8c61;&#x548c; document &#x5bf9;&#x8c61;&#xff0c;&#x9694;&#x79bb;&#x6bcf;&#x4e2a;&#x5fae;&#x5e94;&#x7528;&#x7684; JavaScript &#x6267;&#x884c;&#x73af;&#x5883;&#xff0c;&#x9632;&#x6b62;&#x5168;&#x5c40;&#x53d8;&#x91cf;&#x6c61;&#x67d3;&#x548c;&#x526f;&#x4f5c;&#x7528;&#x3002;","children":[],"payload":{"tag":"li","lines":"1675,1676"}},{"content":"Webpack Module Federation &#x7684;&#x5171;&#x4eab;&#x4f9d;&#x8d56;&#xff1a;&#x901a;&#x8fc7;&#x914d;&#x7f6e;&#x5171;&#x4eab;&#x4f9d;&#x8d56;&#xff0c;&#x786e;&#x4fdd;&#x6240;&#x6709;&#x5fae;&#x5e94;&#x7528;&#x4f7f;&#x7528;&#x76f8;&#x540c;&#x7248;&#x672c;&#x7684;&#x5171;&#x4eab;&#x5e93;&#x3002;","children":[],"payload":{"tag":"li","lines":"1676,1677"}},{"content":"&#x4e25;&#x683c;&#x7684;&#x6a21;&#x5757;&#x5316;&#xff1a;&#x9f13;&#x52b1;&#x5fae;&#x5e94;&#x7528;&#x5185;&#x90e8;&#x4f7f;&#x7528; ES Modules&#xff0c;&#x907f;&#x514d;&#x5168;&#x5c40;&#x53d8;&#x91cf;&#x3002;","children":[],"payload":{"tag":"li","lines":"1677,1678"}},{"content":"Web Components&#xff1a;&#x5229;&#x7528; Web Components &#x7684;&#x5c01;&#x88c5;&#x6027;&#xff0c;&#x5c06;&#x7ec4;&#x4ef6;&#x9694;&#x79bb;&#x5728;&#x72ec;&#x7acb;&#x7684;&#x81ea;&#x5b9a;&#x4e49;&#x5143;&#x7d20;&#x4e2d;&#x3002;","children":[],"payload":{"tag":"li","lines":"1678,1680"}}],"payload":{"tag":"ul","lines":"1675,1680"}}],"payload":{"tag":"h4","lines":"1660,1661"}},{"content":"<strong>&#x8868;&#xff1a;&#x5fae;&#x524d;&#x7aef;&#x5b9e;&#x73b0;&#x65b9;&#x6848;&#x5bf9;&#x6bd4; (Module Federation vs. Single-SPA vs. Qiankun)</strong>","children":[{"content":"<table data-lines=\"1682,1694\">\n<thead data-lines=\"1682,1683\">\n<tr data-lines=\"1682,1683\">\n<th style=\"text-align:left\">&#x7279;&#x6027;/&#x65b9;&#x6848;</th>\n<th style=\"text-align:left\"><a href=\"https://webpack.js.org/concepts/module-federation/\">Module Federation</a> (<a href=\"https://webpack.js.org/\">Webpack</a> 5)</th>\n<th style=\"text-align:left\"><a href=\"https://single-spa.js.org/\">Single-SPA</a></th>\n<th style=\"text-align:left\">Qiankun (&#x57fa;&#x4e8e; <a href=\"https://single-spa.js.org/\">Single-SPA</a>)</th>\n</tr>\n</thead>\n<tbody data-lines=\"1684,1694\">\n<tr data-lines=\"1684,1685\">\n<td style=\"text-align:left\"><strong>&#x52a0;&#x8f7d;&#x673a;&#x5236;</strong></td>\n<td style=\"text-align:left\">&#x6784;&#x5efa;&#x65f6;&#x5171;&#x4eab;&#x6a21;&#x5757;&#xff0c;&#x8fd0;&#x884c;&#x65f6;&#x52a8;&#x6001;&#x52a0;&#x8f7d;</td>\n<td style=\"text-align:left\">&#x663e;&#x5f0f;&#x58f0;&#x660e;&#x5fae;&#x5e94;&#x7528;&#x751f;&#x547d;&#x5468;&#x671f;&#xff0c;&#x901a;&#x8fc7;&#x8def;&#x7531;&#x7ba1;&#x7406;&#x52a0;&#x8f7d;/&#x5378;&#x8f7d;</td>\n<td style=\"text-align:left\">&#x52a8;&#x6001;&#x52a0;&#x8f7d;&#x5fae;&#x5e94;&#x7528;&#xff0c;&#x5355;&#x4e00;&#x5165;&#x53e3;&#x7ba1;&#x7406;&#xff0c;&#x6309;&#x9700;&#x52a0;&#x8f7d;</td>\n</tr>\n<tr data-lines=\"1685,1686\">\n<td style=\"text-align:left\"><strong>&#x6846;&#x67b6;&#x65e0;&#x5173;&#x6027;</strong></td>\n<td style=\"text-align:left\">&#x7406;&#x8bba;&#x4e0a;&#x53ef;&#x5171;&#x4eab;&#x4efb;&#x4f55; JS &#x6a21;&#x5757;&#xff0c;&#x4f46;&#x5f3a;&#x4f9d;&#x8d56; <a href=\"https://webpack.js.org/\">Webpack</a></td>\n<td style=\"text-align:left\">&#x6838;&#x5fc3;&#x4f18;&#x52bf;&#xff0c;&#x652f;&#x6301;&#x591a;&#x79cd;&#x524d;&#x7aef;&#x6846;&#x67b6;&#x6df7;&#x5408;</td>\n<td style=\"text-align:left\">&#x652f;&#x6301;&#x591a;&#x79cd;&#x524d;&#x7aef;&#x6846;&#x67b6;&#x6df7;&#x5408;</td>\n</tr>\n<tr data-lines=\"1686,1687\">\n<td style=\"text-align:left\"><strong>&#x72b6;&#x6001;&#x7ba1;&#x7406;</strong></td>\n<td style=\"text-align:left\">&#x4e0d;&#x63d0;&#x4f9b;&#x5185;&#x7f6e;&#x65b9;&#x6848;&#xff0c;&#x9700;&#x81ea;&#x884c;&#x5b9e;&#x73b0;</td>\n<td style=\"text-align:left\">&#x4e0d;&#x63d0;&#x4f9b;&#x5185;&#x7f6e;&#x65b9;&#x6848;&#xff0c;&#x9700;&#x81ea;&#x884c;&#x5b9e;&#x73b0;</td>\n<td style=\"text-align:left\">&#x63d0;&#x4f9b;&#x7b80;&#x5355;&#x5168;&#x5c40;&#x4e8b;&#x4ef6;&#x603b;&#x7ebf;&#xff0c;&#x65b9;&#x4fbf;&#x5171;&#x4eab;&#x72b6;&#x6001;</td>\n</tr>\n<tr data-lines=\"1687,1688\">\n<td style=\"text-align:left\"><strong>&#x5171;&#x4eab;&#x4f9d;&#x8d56;</strong></td>\n<td style=\"text-align:left\">&#x539f;&#x751f;&#x652f;&#x6301;&#xff0c;&#x53ef;&#x914d;&#x7f6e;&#x53bb;&#x91cd;</td>\n<td style=\"text-align:left\">&#x9700;&#x901a;&#x8fc7; SystemJS + Import Maps &#x7b49;&#x5916;&#x90e8;&#x673a;&#x5236;</td>\n<td style=\"text-align:left\">&#x53ef;&#x901a;&#x8fc7; <a href=\"https://single-spa.js.org/\">Single-SPA</a> &#x673a;&#x5236;&#x6216; Qiankun &#x7684;&#x4f18;&#x5316;&#x5b9e;&#x73b0;</td>\n</tr>\n<tr data-lines=\"1688,1689\">\n<td style=\"text-align:left\"><strong>&#x6837;&#x5f0f;&#x9694;&#x79bb;</strong></td>\n<td style=\"text-align:left\">&#x4e0d;&#x63d0;&#x4f9b;&#x5185;&#x7f6e;&#x65b9;&#x6848;&#xff0c;&#x9700;&#x7ed3;&#x5408; <a href=\"https://github.com/css-modules/css-modules\">CSS Modules</a> &#x7b49;</td>\n<td style=\"text-align:left\">&#x4e0d;&#x63d0;&#x4f9b;&#x5185;&#x7f6e;&#x65b9;&#x6848;&#xff0c;&#x9700;&#x7ed3;&#x5408; <a href=\"https://github.com/css-modules/css-modules\">CSS Modules</a> &#x7b49;</td>\n<td style=\"text-align:left\">&#x5185;&#x7f6e;&#x6837;&#x5f0f;&#x6c99;&#x7bb1;&#xff0c;&#x6709;&#x6548;&#x9694;&#x79bb;&#x6837;&#x5f0f;&#x51b2;&#x7a81;</td>\n</tr>\n<tr data-lines=\"1689,1690\">\n<td style=\"text-align:left\"><strong>JS &#x9694;&#x79bb;</strong></td>\n<td style=\"text-align:left\">&#x4e0d;&#x63d0;&#x4f9b;&#x5185;&#x7f6e;&#x65b9;&#x6848;&#xff0c;&#x9700;&#x4e25;&#x683c;&#x6a21;&#x5757;&#x5316;&#x6216;&#x624b;&#x52a8;&#x5904;&#x7406;</td>\n<td style=\"text-align:left\">&#x4e0d;&#x63d0;&#x4f9b;&#x5185;&#x7f6e;&#x65b9;&#x6848;&#xff0c;&#x9700;&#x4e25;&#x683c;&#x6a21;&#x5757;&#x5316;&#x6216;&#x624b;&#x52a8;&#x5904;&#x7406;</td>\n<td style=\"text-align:left\">&#x5185;&#x7f6e; JS &#x6c99;&#x7bb1;&#xff0c;&#x9694;&#x79bb;&#x5168;&#x5c40;&#x53d8;&#x91cf;&#x548c;&#x526f;&#x4f5c;&#x7528;</td>\n</tr>\n<tr data-lines=\"1690,1691\">\n<td style=\"text-align:left\"><strong>&#x6253;&#x5305;&#x5de5;&#x5177;&#x8981;&#x6c42;</strong></td>\n<td style=\"text-align:left\">&#x5f3a;&#x4f9d;&#x8d56; <a href=\"https://webpack.js.org/\">Webpack</a> 5 &#x53ca;&#x4ee5;&#x4e0a;</td>\n<td style=\"text-align:left\">&#x4efb;&#x4f55;&#x6253;&#x5305;&#x5de5;&#x5177;&#xff0c;&#x4f46;&#x9700;&#x914d;&#x5408;&#x6a21;&#x5757;&#x52a0;&#x8f7d;&#x5668;</td>\n<td style=\"text-align:left\">&#x4efb;&#x4f55;&#x6253;&#x5305;&#x5de5;&#x5177;&#xff0c;&#x4f46;&#x9700;&#x914d;&#x5408;&#x6a21;&#x5757;&#x52a0;&#x8f7d;&#x5668;</td>\n</tr>\n<tr data-lines=\"1691,1692\">\n<td style=\"text-align:left\"><strong>&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</strong></td>\n<td style=\"text-align:left\">&#x8f83;&#x9ad8;&#xff0c;&#x9700;&#x6df1;&#x5165;&#x7406;&#x89e3; <a href=\"https://webpack.js.org/\">Webpack</a> &#x914d;&#x7f6e;</td>\n<td style=\"text-align:left\">&#x8f83;&#x9ad8;&#xff0c;&#x9700;&#x7406;&#x89e3;&#x5fae;&#x524d;&#x7aef;&#x751f;&#x547d;&#x5468;&#x671f;&#x548c;&#x6982;&#x5ff5;</td>\n<td style=\"text-align:left\">&#x76f8;&#x5bf9;&#x8f83;&#x4f4e;&#xff0c;&#x63d0;&#x4f9b;&#x66f4;&#x591a;&#x5f00;&#x7bb1;&#x5373;&#x7528;&#x529f;&#x80fd;</td>\n</tr>\n<tr data-lines=\"1692,1693\">\n<td style=\"text-align:left\"><strong>&#x793e;&#x533a;&#x4e0e;&#x751f;&#x6001;</strong></td>\n<td style=\"text-align:left\">&#x6d3b;&#x8dc3;&#xff0c;&#x4f5c;&#x4e3a; <a href=\"https://webpack.js.org/\">Webpack</a> &#x5185;&#x7f6e;&#x529f;&#x80fd;&#x6301;&#x7eed;&#x53d1;&#x5c55;</td>\n<td style=\"text-align:left\">&#x6d3b;&#x8dc3;&#xff0c;&#x6709;&#x5927;&#x91cf;&#x6587;&#x6863;&#x548c;&#x793e;&#x533a;&#x8d44;&#x6e90;</td>\n<td style=\"text-align:left\">&#x6d3b;&#x8dc3;&#xff0c;&#x5c24;&#x5176;&#x5728;&#x56fd;&#x5185;&#xff0c;&#x529f;&#x80fd;&#x66f4;&#x5b8c;&#x5584;</td>\n</tr>\n<tr data-lines=\"1693,1694\">\n<td style=\"text-align:left\"><strong>&#x7406;&#x60f3;&#x573a;&#x666f;</strong></td>\n<td style=\"text-align:left\">&#x5927;&#x578b; <a href=\"https://webpack.js.org/\">Webpack</a> &#x9879;&#x76ee;&#xff0c;&#x9700;&#x8981;&#x7ec6;&#x7c92;&#x5ea6;&#x6a21;&#x5757;&#x5171;&#x4eab;&#x548c;&#x4f9d;&#x8d56;&#x4f18;&#x5316;</td>\n<td style=\"text-align:left\">&#x9700;&#x8981;&#x96c6;&#x6210;&#x591a;&#x79cd;&#x6846;&#x67b6;&#x3001;&#x9010;&#x6b65;&#x62c6;&#x5206;&#x5355;&#x4f53;&#x5e94;&#x7528;&#x3001;&#x4e25;&#x683c;&#x63a7;&#x5236;&#x751f;&#x547d;&#x5468;&#x671f;</td>\n<td style=\"text-align:left\">&#x8ffd;&#x6c42;&#x5feb;&#x901f;&#x5b9e;&#x73b0;&#x5fae;&#x524d;&#x7aef;&#x3001;&#x9700;&#x8981;&#x5f3a;&#x9694;&#x79bb;&#x80fd;&#x529b;&#x3001;&#x5bf9;&#x6027;&#x80fd;&#x548c;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#x6709;&#x8f83;&#x9ad8;&#x8981;&#x6c42;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1682,1694"}}],"payload":{"tag":"h4","lines":"1680,1681"}}],"payload":{"tag":"h3","lines":"1648,1649"}},{"content":"<strong>&#x90e8;&#x7f72;&#x4e0e; DevOps for Frontend</strong>","children":[{"content":"<strong>CI/CD &#x6d41;&#x6c34;&#x7ebf;</strong>","children":[],"payload":{"tag":"h4","lines":"1703,1704"}},{"content":"<strong>&#x5bb9;&#x5668;&#x5316;</strong>","children":[],"payload":{"tag":"h4","lines":"1707,1708"}},{"content":"<strong>&#x9759;&#x6001;&#x8d44;&#x6e90;&#x4e0e; CDN &#x7b56;&#x7565;</strong>","children":[],"payload":{"tag":"h4","lines":"1713,1714"}},{"content":"<strong>&#x6df1;&#x5165;&#x63a2;&#x8ba8;&#x7f13;&#x5b58;&#x548c; CDN &#x914d;&#x7f6e;</strong>","children":[{"content":"<strong>&#x5f3a;&#x7f13;&#x5b58;&#x4e0e;&#x534f;&#x5546;&#x7f13;&#x5b58;</strong>&#xff1a;&#x7406;&#x89e3; Cache-Control&#xff08;max-age&#x3001;no-cache&#x3001;no-store &#x7b49;&#xff09;&#x548c; Expires &#x5b9e;&#x73b0;&#x5f3a;&#x7f13;&#x5b58;&#xff0c;&#x4ee5;&#x53ca; Last-Modified/If-Modified-Since &#x548c; ETag/If-None-Match &#x5b9e;&#x73b0;&#x534f;&#x5546;&#x7f13;&#x5b58;&#x3002;","children":[],"payload":{"tag":"li","lines":"1721,1722"}},{"content":"<strong>CDN &#x914d;&#x7f6e;</strong>&#xff1a;&#x914d;&#x7f6e; CDN &#x65f6;&#xff0c;&#x9700;&#x8981;&#x6ce8;&#x610f;&#x7f13;&#x5b58;&#x89c4;&#x5219;&#x3001;&#x56de;&#x6e90;&#x7b56;&#x7565;&#x3001;HTTPS &#x914d;&#x7f6e;&#x3001;Gzip/Brotli &#x538b;&#x7f29;&#x3001;&#x8de8;&#x57df;&#x8d44;&#x6e90;&#x5171;&#x4eab;&#xff08;CORS&#xff09;&#x5934;&#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"1722,1723"}},{"content":"<strong>&#x7248;&#x672c;&#x63a7;&#x5236;&#x4e0e;&#x7f13;&#x5b58;&#x5931;&#x6548;</strong>&#xff1a;&#x5bf9;&#x4e8e; JS/CSS &#x6587;&#x4ef6;&#xff0c;&#x901a;&#x5e38;&#x5728;&#x6587;&#x4ef6;&#x540d;&#x4e2d;&#x52a0;&#x5165;&#x5185;&#x5bb9;&#x54c8;&#x5e0c;&#xff08;&#x5982; bundle.123abc.js&#xff09;&#xff0c;&#x5f53;&#x6587;&#x4ef6;&#x5185;&#x5bb9;&#x53d8;&#x5316;&#x65f6;&#xff0c;&#x6587;&#x4ef6;&#x540d;&#x4e5f;&#x968f;&#x4e4b;&#x53d8;&#x5316;&#xff0c;&#x4ece;&#x800c;&#x5f3a;&#x5236;&#x6d4f;&#x89c8;&#x5668;&#x52a0;&#x8f7d;&#x65b0;&#x6587;&#x4ef6;&#xff0c;&#x5b9e;&#x73b0;&#x7f13;&#x5b58;&#x5931;&#x6548;&#x3002;&#x5bf9;&#x4e8e;&#x56fe;&#x7247;&#x7b49;&#x8d44;&#x6e90;&#xff0c;&#x53ef;&#x4ee5;&#x91c7;&#x7528;&#x7c7b;&#x4f3c;&#x7b56;&#x7565;&#x6216;&#x5b9a;&#x671f;&#x66f4;&#x65b0; URL&#x3002;","children":[],"payload":{"tag":"li","lines":"1723,1725"}}],"payload":{"tag":"h4","lines":"1719,1720"}}],"payload":{"tag":"h3","lines":"1699,1700"}},{"content":"<strong>&#x6cd5;&#x5f8b;&#x3001;&#x5408;&#x89c4;&#x4e0e;&#x9690;&#x79c1;</strong>","children":[{"content":"<strong>GDPR, CCPA &#x7b49;&#x9690;&#x79c1;&#x6cd5;&#x89c4;&#x5bf9;&#x524d;&#x7aef;&#x7684;&#x8981;&#x6c42;</strong>","children":[{"content":"<strong>&#x7528;&#x6237;&#x540c;&#x610f; (Consent)</strong>&#xff1a;&#x5728;&#x6536;&#x96c6;&#x3001;&#x5904;&#x7406;&#x7528;&#x6237;&#x4e2a;&#x4eba;&#x6570;&#x636e;&#xff08;&#x5305;&#x62ec;&#x901a;&#x8fc7; Cookie&#x3001;&#x8ddf;&#x8e2a;&#x5668;&#x3001;&#x5206;&#x6790;&#x5de5;&#x5177;&#x6536;&#x96c6;&#x7684;&#x6570;&#x636e;&#xff09;&#x4e4b;&#x524d;&#xff0c;&#x5fc5;&#x987b;&#x83b7;&#x5f97;&#x7528;&#x6237;&#x7684;&#x660e;&#x786e;&#x3001;&#x77e5;&#x60c5;&#x540c;&#x610f;&#x3002;&#x524d;&#x7aef;&#x9700;&#x8981;&#x5b9e;&#x73b0;&#x540c;&#x610f;&#x7ba1;&#x7406;&#x5e73;&#x53f0;&#xff08;Consent Management Platform, CMP&#xff09;&#xff0c;&#x5411;&#x7528;&#x6237;&#x6e05;&#x6670;&#x5c55;&#x793a;&#x6570;&#x636e;&#x6536;&#x96c6;&#x76ee;&#x7684;&#xff0c;&#x5e76;&#x63d0;&#x4f9b;&#x6613;&#x4e8e;&#x64cd;&#x4f5c;&#x7684;&#x540c;&#x610f;/&#x62d2;&#x7edd;&#x9009;&#x9879;&#x3002;","children":[],"payload":{"tag":"li","lines":"1735,1736"}},{"content":"<strong>&#x6570;&#x636e;&#x6700;&#x5c0f;&#x5316;</strong>&#xff1a;&#x53ea;&#x6536;&#x96c6;&#x5fc5;&#x8981;&#x7684;&#x4e2a;&#x4eba;&#x6570;&#x636e;&#x3002;&#x524d;&#x7aef;&#x5e94;&#x907f;&#x514d;&#x8fc7;&#x5ea6;&#x6536;&#x96c6;&#x7528;&#x6237;&#x6570;&#x636e;&#xff0c;&#x5e76;&#x786e;&#x4fdd;&#x6570;&#x636e;&#x5728;&#x4f20;&#x8f93;&#x548c;&#x5b58;&#x50a8;&#x8fc7;&#x7a0b;&#x4e2d;&#x7684;&#x5b89;&#x5168;&#x3002;","children":[],"payload":{"tag":"li","lines":"1736,1737"}},{"content":"<strong>&#x7528;&#x6237;&#x6743;&#x5229;</strong>&#xff1a;&#x7528;&#x6237;&#x6709;&#x6743;&#x8bbf;&#x95ee;&#x3001;&#x66f4;&#x6b63;&#x3001;&#x5220;&#x9664;&#x5176;&#x4e2a;&#x4eba;&#x6570;&#x636e;&#xff0c;&#x5e76;&#x53cd;&#x5bf9;&#x6570;&#x636e;&#x5904;&#x7406;&#x3002;&#x524d;&#x7aef;&#x53ef;&#x80fd;&#x9700;&#x8981;&#x63d0;&#x4f9b;&#x754c;&#x9762;&#x6216;&#x529f;&#x80fd;&#xff0c;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x884c;&#x4f7f;&#x5176;&#x6743;&#x5229;&#x3002;","children":[],"payload":{"tag":"li","lines":"1737,1738"}},{"content":"<strong>&#x900f;&#x660e;&#x5ea6;</strong>&#xff1a;&#x524d;&#x7aef;&#x5e94;&#x7528;&#x5e94;&#x6e05;&#x6670;&#x544a;&#x77e5;&#x7528;&#x6237;&#x6570;&#x636e;&#x6536;&#x96c6;&#x7684;&#x7c7b;&#x578b;&#x3001;&#x76ee;&#x7684;&#x548c;&#x5904;&#x7406;&#x65b9;&#x5f0f;&#xff0c;&#x901a;&#x5e38;&#x901a;&#x8fc7;&#x9690;&#x79c1;&#x653f;&#x7b56;&#x548c; Cookie &#x653f;&#x7b56;&#x8fdb;&#x884c;&#x8bf4;&#x660e;&#x3002;","children":[],"payload":{"tag":"li","lines":"1738,1739"}},{"content":"<strong>&#x5b89;&#x5168;&#x63aa;&#x65bd;</strong>&#xff1a;&#x524d;&#x7aef;&#x5728;&#x6570;&#x636e;&#x4f20;&#x8f93;&#x8fc7;&#x7a0b;&#x4e2d;&#x5e94;&#x5f3a;&#x5236;&#x4f7f;&#x7528; HTTPS&#xff0c;&#x5e76;&#x786e;&#x4fdd;&#x654f;&#x611f;&#x6570;&#x636e;&#x5728;&#x5ba2;&#x6237;&#x7aef;&#x4e0d;&#x88ab;&#x6cc4;&#x9732;&#x3002;","children":[],"payload":{"tag":"li","lines":"1739,1741"}}],"payload":{"tag":"h4","lines":"1731,1732"}},{"content":"<strong>Cookie &#x7ba1;&#x7406;&#x4e0e;&#x7528;&#x6237;&#x540c;&#x610f;&#xff08;Consent Management&#xff09;&#x7684;&#x6700;&#x4f73;&#x5b9e;&#x8df5;</strong>","children":[{"content":"<strong>&#x660e;&#x786e;&#x533a;&#x5206; Cookie &#x7c7b;&#x578b;</strong>&#xff1a;","children":[{"content":"<strong>&#x5fc5;&#x8981; Cookie</strong>&#xff1a;&#x7ef4;&#x6301;&#x7f51;&#x7ad9;&#x57fa;&#x672c;&#x529f;&#x80fd;&#xff08;&#x5982;&#x4f1a;&#x8bdd;&#x7ba1;&#x7406;&#x3001;&#x8d2d;&#x7269;&#x8f66;&#xff09;&#x6240;&#x9700;&#xff0c;&#x901a;&#x5e38;&#x65e0;&#x9700;&#x7528;&#x6237;&#x540c;&#x610f;&#x3002;","children":[],"payload":{"tag":"li","lines":"1746,1747"}},{"content":"<strong>&#x529f;&#x80fd;&#x6027; Cookie</strong>&#xff1a;&#x589e;&#x5f3a;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#xff08;&#x5982;&#x8bb0;&#x4f4f;&#x504f;&#x597d;&#x8bbe;&#x7f6e;&#xff09;&#xff0c;&#x53ef;&#x80fd;&#x9700;&#x8981;&#x540c;&#x610f;&#x3002;","children":[],"payload":{"tag":"li","lines":"1747,1748"}},{"content":"<strong>&#x5206;&#x6790;/&#x6027;&#x80fd; Cookie</strong>&#xff1a;&#x7528;&#x4e8e;&#x7f51;&#x7ad9;&#x5206;&#x6790;&#x548c;&#x6027;&#x80fd;&#x4f18;&#x5316;&#xff0c;&#x901a;&#x5e38;&#x9700;&#x8981;&#x540c;&#x610f;&#x3002;","children":[],"payload":{"tag":"li","lines":"1748,1749"}},{"content":"<strong>&#x8425;&#x9500;/&#x8ffd;&#x8e2a; Cookie</strong>&#xff1a;&#x7528;&#x4e8e;&#x4e2a;&#x6027;&#x5316;&#x5e7f;&#x544a;&#x548c;&#x7528;&#x6237;&#x8ffd;&#x8e2a;&#xff0c;&#x5fc5;&#x987b;&#x83b7;&#x5f97;&#x660e;&#x786e;&#x540c;&#x610f;&#x3002;","children":[],"payload":{"tag":"li","lines":"1749,1750"}}],"payload":{"tag":"li","lines":"1745,1750"}},{"content":"<strong>&#x5b9e;&#x65bd;&#x540c;&#x610f;&#x7ba1;&#x7406;&#x5e73;&#x53f0; (CMP)</strong>&#xff1a;","children":[{"content":"&#x5728;&#x7528;&#x6237;&#x9996;&#x6b21;&#x8bbf;&#x95ee;&#x7f51;&#x7ad9;&#x65f6;&#xff0c;&#x901a;&#x8fc7;&#x5f39;&#x7a97;&#x6216;&#x6a2a;&#x5e45;&#x6e05;&#x6670;&#x544a;&#x77e5;&#x7528;&#x6237; Cookie &#x7684;&#x4f7f;&#x7528;&#x60c5;&#x51b5;&#xff0c;&#x5e76;&#x63d0;&#x4f9b;&#x8be6;&#x7ec6;&#x7684;&#x540c;&#x610f;&#x9009;&#x9879;&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x9009;&#x62e9;&#x63a5;&#x53d7;&#x54ea;&#x4e9b;&#x7c7b;&#x578b;&#x7684; Cookie&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"1751,1752"}},{"content":"&#x5728;&#x7528;&#x6237;&#x672a;&#x660e;&#x786e;&#x540c;&#x610f;&#x4e4b;&#x524d;&#xff0c;&#x963b;&#x6b62;&#x975e;&#x5fc5;&#x8981;&#x7684; Cookie &#x548c;&#x8ffd;&#x8e2a;&#x811a;&#x672c;&#x7684;&#x52a0;&#x8f7d;&#x3002;","children":[],"payload":{"tag":"li","lines":"1752,1753"}},{"content":"&#x63d0;&#x4f9b;&#x65b9;&#x4fbf;&#x7684;&#x754c;&#x9762;&#xff0c;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x968f;&#x65f6;&#x4fee;&#x6539;&#x5176;&#x540c;&#x610f;&#x504f;&#x597d;&#x3002;","children":[],"payload":{"tag":"li","lines":"1753,1754"}}],"payload":{"tag":"li","lines":"1750,1754"}},{"content":"<strong>&#x524d;&#x7aef;&#x6280;&#x672f;&#x5b9e;&#x73b0;</strong>&#xff1a;","children":[{"content":"<strong>&#x811a;&#x672c;&#x963b;&#x585e;</strong>&#xff1a;&#x5728;&#x83b7;&#x5f97;&#x7528;&#x6237;&#x540c;&#x610f;&#x4e4b;&#x524d;&#xff0c;&#x4f7f;&#x7528; JavaScript &#x52a8;&#x6001;&#x52a0;&#x8f7d;&#x6216;&#x963b;&#x585e;&#x975e;&#x5fc5;&#x8981;&#x7684;&#x7b2c;&#x4e09;&#x65b9;&#x811a;&#x672c;&#xff08;&#x5982; Google Analytics&#x3001;&#x5e7f;&#x544a;&#x811a;&#x672c;&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"1755,1756"}},{"content":"<strong>Cookie &#x8bbe;&#x7f6e;&#x63a7;&#x5236;</strong>&#xff1a;&#x5728;&#x8bbe;&#x7f6e; Cookie &#x65f6;&#xff0c;&#x786e;&#x4fdd;&#x5176; SameSite &#x5c5e;&#x6027;&#x3001;Secure &#x5c5e;&#x6027;&#x548c; HttpOnly &#x5c5e;&#x6027;&#xff08;&#x5bf9;&#x4e8e;&#x540e;&#x7aef;&#x8bbe;&#x7f6e;&#x7684; Cookie&#xff09;&#x5f97;&#x5230;&#x6b63;&#x786e;&#x914d;&#x7f6e;&#xff0c;&#x4ee5;&#x589e;&#x5f3a;&#x5b89;&#x5168;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"1756,1757"}},{"content":"<strong>&#x7528;&#x6237;&#x6570;&#x636e;&#x5220;&#x9664;</strong>&#xff1a;&#x5f53;&#x7528;&#x6237;&#x8bf7;&#x6c42;&#x5220;&#x9664;&#x5176;&#x6570;&#x636e;&#x65f6;&#xff0c;&#x524d;&#x7aef;&#x9700;&#x8981;&#x786e;&#x4fdd;&#x6e05;&#x9664;&#x672c;&#x5730;&#x5b58;&#x50a8;&#xff08;LocalStorage&#x3001;SessionStorage&#x3001;IndexedDB&#xff09;&#x4e2d;&#x7684;&#x76f8;&#x5173;&#x4fe1;&#x606f;&#xff0c;&#x5e76;&#x901a;&#x77e5;&#x540e;&#x7aef;&#x8fdb;&#x884c;&#x6570;&#x636e;&#x5220;&#x9664;&#x3002;","children":[],"payload":{"tag":"li","lines":"1757,1759"}}],"payload":{"tag":"li","lines":"1754,1759"}}],"payload":{"tag":"h4","lines":"1741,1742"}}],"payload":{"tag":"h3","lines":"1727,1728"}}],"payload":{"tag":"h2","lines":"1270,1271"}},{"content":"<strong>VI. &#x65b0;&#x5174;&#x6280;&#x672f;&#x548c;&#x4e13;&#x4e1a;&#x9886;&#x57df;</strong>","children":[{"content":"<strong>&#x6e10;&#x8fdb;&#x5f0f; Web &#x5e94;&#x7528;&#x7a0b;&#x5e8f; (PWA)&#xff1a;&#x539f;&#x751f;&#x822c;&#x7684; Web &#x4f53;&#x9a8c;</strong>","children":[{"content":"A. <strong>&#x8861;&#x91cf;&#x4e0e;&#x63d0;&#x5347;&#x6027;&#x80fd;</strong>","children":[{"content":"<strong>PRPL Pattern (PRPL &#x6a21;&#x5f0f;):</strong> &#x7531; Google &#x63d0;&#x51fa;&#x7684;&#x3001;&#x7528;&#x4e8e;&#x63d0;&#x5347; Web &#x5e94;&#x7528;&#x52a0;&#x8f7d;&#x901f;&#x5ea6;&#x548c;&#x4ea4;&#x4e92;&#x54cd;&#x5e94;&#x901f;&#x5ea6;&#x7684;&#x6027;&#x80fd;&#x6a21;&#x5f0f;&#x3002;&#x5b83;&#x4ee3;&#x8868;&#xff1a;","children":[{"content":"<strong>Push (&#x63a8;&#x9001;)&#xff1a;</strong> &#x4e3a;&#x521d;&#x59cb;&#x8def;&#x7531;&#x63a8;&#x9001;&#x5173;&#x952e;&#x8d44;&#x6e90;&#x3002;","children":[],"payload":{"tag":"li","lines":"1776,1777"}},{"content":"<strong>Render (&#x6e32;&#x67d3;)&#xff1a;</strong> &#x6e32;&#x67d3;&#x521d;&#x59cb;&#x8def;&#x7531;&#xff0c;&#x5c3d;&#x5feb;&#x8ba9;&#x7528;&#x6237;&#x770b;&#x5230;&#x5185;&#x5bb9;&#x3002;","children":[],"payload":{"tag":"li","lines":"1777,1778"}},{"content":"<strong>Pre-cache (&#x9884;&#x7f13;&#x5b58;)&#xff1a;</strong> &#x4f7f;&#x7528; Service Worker &#x9884;&#x7f13;&#x5b58;&#x5269;&#x4f59;&#x7684;&#x8def;&#x7531;&#x8d44;&#x6e90;&#x3002;","children":[],"payload":{"tag":"li","lines":"1778,1779"}},{"content":"<strong>Lazy-load (&#x61d2;&#x52a0;&#x8f7d;)&#xff1a;</strong> &#x6309;&#x9700;&#x61d2;&#x52a0;&#x8f7d;&#x548c;&#x521b;&#x5efa;&#x5269;&#x4f59;&#x7684;&#x8def;&#x7531;&#x3002;","children":[],"payload":{"tag":"li","lines":"1779,1781"}}],"payload":{"tag":"li","lines":"1775,1781"}},{"content":"<strong>RAIL Model (RAIL &#x6a21;&#x578b;):</strong> &#x4ee5;&#x7528;&#x6237;&#x4e3a;&#x4e2d;&#x5fc3;&#x7684;&#x6027;&#x80fd;&#x6a21;&#x578b;&#xff0c;&#x7528;&#x4e8e;&#x8861;&#x91cf;&#x5e94;&#x7528;&#x7684;&#x6027;&#x80fd;&#x8868;&#x73b0;&#x3002;RAIL &#x4ee3;&#x8868;&#xff1a;","children":[{"content":"<strong>Response (&#x54cd;&#x5e94;)&#xff1a;</strong> &#x5728; 100 &#x6beb;&#x79d2;&#x5185;&#x54cd;&#x5e94;&#x7528;&#x6237;&#x8f93;&#x5165;&#x3002;","children":[],"payload":{"tag":"li","lines":"1784,1785"}},{"content":"<strong>Animation (&#x52a8;&#x753b;)&#xff1a;</strong> &#x52a8;&#x753b;&#x7684;&#x6bcf;&#x4e00;&#x5e27;&#x5728; 16 &#x6beb;&#x79d2;&#x5185;&#x5b8c;&#x6210;&#xff08;&#x5373; 60fps&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"1785,1786"}},{"content":"<strong>Idle (&#x7a7a;&#x95f2;)&#xff1a;</strong> &#x5229;&#x7528;&#x4e3b;&#x7ebf;&#x7a0b;&#x7684;&#x7a7a;&#x95f2;&#x65f6;&#x95f4;&#x6765;&#x5b8c;&#x6210;&#x5ef6;&#x8fdf;&#x4efb;&#x52a1;&#x3002;","children":[],"payload":{"tag":"li","lines":"1786,1787"}},{"content":"<strong>Load (&#x52a0;&#x8f7d;)&#xff1a;</strong> &#x5728; 1 &#x79d2;&#x5185;&#x52a0;&#x8f7d;&#x5b8c;&#x9996;&#x5c4f;&#x5185;&#x5bb9;&#x3002;","children":[],"payload":{"tag":"li","lines":"1787,1789"}}],"payload":{"tag":"li","lines":"1783,1789"}},{"content":"","children":[{"content":"<strong>Performance Metrics (&#x6027;&#x80fd;&#x6307;&#x6807;):</strong> &#x6307;&#x7684;&#x662f;&#x50cf; LCP (&#x6700;&#x5927;&#x5185;&#x5bb9;&#x7ed8;&#x5236;)&#x3001;FID (&#x9996;&#x6b21;&#x8f93;&#x5165;&#x5ef6;&#x8fdf;)&#x3001;CLS (&#x7d2f;&#x79ef;&#x5e03;&#x5c40;&#x504f;&#x79fb;) &#x8fd9;&#x7c7b;&#x6838;&#x5fc3; Web &#x6307;&#x6807; (Core Web Vitals)&#x3002;&#x5b83;&#x4eec;&#x662f;&#x7528;&#x6765;&#x91cf;&#x5316; RAIL &#x6a21;&#x578b;&#x76ee;&#x6807;&#x7684;&#x5177;&#x4f53;&#x5de5;&#x5177;&#xff0c;&#x5e2e;&#x52a9;&#x4f60;&#x5224;&#x65ad;&#x4f60;&#x7684;&#x5e94;&#x7528;&#x5230;&#x5e95;&#x5feb;&#x4e0d;&#x5feb;&#x3002;","children":[],"payload":{"tag":"li","lines":"1791,1792"}},{"content":"<strong>&#x4f7f;&#x7528; Lighthouse / DevTools&#xff1a;</strong> &#x8fd9;&#x4e24;&#x8005;&#x662f;&#x5b9e;&#x8df5;&#x5de5;&#x5177;&#x3002;Lighthouse &#x662f;&#x81ea;&#x52a8;&#x5316;&#x7684;&#x7f51;&#x7ad9;&#x8d28;&#x91cf;&#x8bc4;&#x4f30;&#x5de5;&#x5177;&#xff0c;&#x5b83;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x4e3a;&#x4f60;&#x5206;&#x6790; <a href=\"https://web.dev/progressive-web-apps/\">PWA</a> &#x7684;&#x5404;&#x9879;&#x6307;&#x6807;&#x5e76;&#x7ed9;&#x51fa;&#x4f18;&#x5316;&#x5efa;&#x8bae;&#x3002;Chrome DevTools (&#x5f00;&#x53d1;&#x8005;&#x5de5;&#x5177;) &#x63d0;&#x4f9b;&#x4e86;&#x66f4;&#x6df1;&#x5165;&#x7684;&#x6027;&#x80fd;&#x5206;&#x6790;&#x9762;&#x677f;&#xff0c;&#x8ba9;&#x4f60;&#x80fd;&#x50cf;&#x4fa6;&#x63a2;&#x4e00;&#x6837;&#x627e;&#x5230;&#x6027;&#x80fd;&#x74f6;&#x9888;&#x3002;","children":[],"payload":{"tag":"li","lines":"1792,1794"}}],"payload":{"tag":"ul","lines":"1791,1794"}}],"payload":{"tag":"h4","lines":"1773,1774"}},{"content":"B. <strong>&#x6d4f;&#x89c8;&#x5668; API</strong>","children":[{"content":"<strong>Service Workers:</strong> &#x8fd9;&#x662f; PWA &#x6280;&#x672f;&#x6808;&#x7684;&#x57fa;&#x77f3;&#x548c;&#x7075;&#x9b42;&#x3002;&#x5b83;&#x662f;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x80cc;&#x666f;&#x4e2d;&#x72ec;&#x7acb;&#x4e8e;&#x9875;&#x9762;&#x7684;&#x811a;&#x672c;&#xff0c;&#x80fd;&#x591f;&#x62e6;&#x622a;&#x548c;&#x5904;&#x7406;&#x7f51;&#x7edc;&#x8bf7;&#x6c42;&#x3002;&#x5b83;&#x8d4b;&#x4e88;&#x4e86; PWA &#x4e24;&#x5927;&#x8d85;&#x80fd;&#x529b;&#xff1a;","children":[],"payload":{"tag":"li","lines":"1798,1799"}},{"content":"<strong>&#x79bb;&#x7ebf;&#x8bbf;&#x95ee;</strong>&#xff1a;&#x5373;&#x4f7f;&#x8bbe;&#x5907;&#x6ca1;&#x6709;&#x7f51;&#x7edc;&#x8fde;&#x63a5;&#xff0c;Service Worker &#x4e5f;&#x80fd;&#x4ece;&#x7f13;&#x5b58;&#x4e2d;&#x8fd4;&#x56de;&#x5185;&#x5bb9;&#xff0c;&#x8ba9;&#x5e94;&#x7528;&#x53ef;&#x4ee5;&#x79bb;&#x7ebf;&#x4f7f;&#x7528;&#x3002;&#x8fd9;&#x662f;&#x5b9e;&#x73b0;&#x201c;&#x53ef;&#x9760;&#x201d;&#x7684;&#x5173;&#x952e;&#x3002;","children":[],"payload":{"tag":"li","lines":"1799,1800"}},{"content":"<strong>&#x6d88;&#x606f;&#x63a8;&#x9001;</strong>&#xff1a;&#x5373;&#x4f7f;&#x7528;&#x6237;&#x5173;&#x95ed;&#x4e86;&#x6d4f;&#x89c8;&#x5668;&#x9875;&#x9762;&#xff0c;Service Worker &#x4e5f;&#x80fd;&#x63a5;&#x6536;&#x4ece;&#x670d;&#x52a1;&#x5668;&#x53d1;&#x6765;&#x7684;&#x63a8;&#x9001;&#x901a;&#x77e5;&#xff0c;&#x4ece;&#x800c;&#x53ef;&#x4ee5;&#x91cd;&#x65b0;&#x5438;&#x5f15;&#x7528;&#x6237;&#x56de;&#x6765;&#x3002;","children":[],"payload":{"tag":"li","lines":"1800,1801"}},{"content":"<strong>Storage (&#x5b58;&#x50a8;):</strong> &#x5305;&#x62ec; Web Storage (LocalStorage, SessionStorage) &#x548c; IndexedDB &#x7b49;&#x3002;&#x4e3a;&#x4e86;&#x5b9e;&#x73b0;&#x79bb;&#x7ebf;&#x4f53;&#x9a8c;&#xff0c;&#x4f60;&#x5fc5;&#x987b;&#x80fd;&#x628a;&#x5e94;&#x7528;&#x6570;&#x636e;&#xff08;&#x5982;&#x6587;&#x7ae0;&#x5185;&#x5bb9;&#x3001;&#x7528;&#x6237;&#x4fe1;&#x606f;&#xff09;&#x5b58;&#x50a8;&#x5728;&#x7528;&#x6237;&#x7684;&#x8bbe;&#x5907;&#x4e0a;&#x3002;Service Worker &#x7ecf;&#x5e38;&#x4e0e;&#x8fd9;&#x4e9b;&#x5b58;&#x50a8; API &#x914d;&#x5408;&#x4f7f;&#x7528;&#x3002;","children":[],"payload":{"tag":"li","lines":"1801,1802"}},{"content":"<strong>Web Sockets / Server Sent Events (SSE):</strong> &#x8fd9;&#x4e9b;&#x662f;&#x5b9e;&#x73b0;&#x5ba2;&#x6237;&#x7aef;&#x4e0e;&#x670d;&#x52a1;&#x5668;&#x4e4b;&#x95f4;&#x5b9e;&#x65f6;&#x53cc;&#x5411;&#x6216;&#x5355;&#x5411;&#x901a;&#x4fe1;&#x7684;&#x6280;&#x672f;&#x3002;&#x5b83;&#x4eec;&#x53ef;&#x4ee5;&#x8ba9; PWA &#x62e5;&#x6709;&#x5b9e;&#x65f6;&#x804a;&#x5929;&#x3001;&#x5b9e;&#x65f6;&#x6570;&#x636e;&#x66f4;&#x65b0;&#x7b49;&#x529f;&#x80fd;&#xff0c;&#x4f7f;&#x5176;&#x66f4;&#x5177;&#x52a8;&#x6001;&#x6027;&#x548c;&#x5438;&#x5f15;&#x529b;&#x3002;","children":[],"payload":{"tag":"li","lines":"1802,1803"}},{"content":"<strong>Location (&#x5730;&#x7406;&#x4f4d;&#x7f6e;), Device Orientation (&#x8bbe;&#x5907;&#x65b9;&#x5411;), Payments (&#x652f;&#x4ed8;), Credentials (&#x51ed;&#x8bc1;&#x7ba1;&#x7406;):</strong> &#x8fd9;&#x4e9b; API &#x5141;&#x8bb8; Web &#x5e94;&#x7528;&#x8bbf;&#x95ee;&#x901a;&#x5e38;&#x53ea;&#x6709;&#x539f;&#x751f;&#x5e94;&#x7528;&#x624d;&#x80fd;&#x8bbf;&#x95ee;&#x7684;&#x8bbe;&#x5907;&#x786c;&#x4ef6;&#x548c;&#x7cfb;&#x7edf;&#x529f;&#x80fd;&#x3002;&#x80fd;&#x591f;&#x83b7;&#x53d6;&#x7528;&#x6237;&#x4f4d;&#x7f6e;&#x3001;&#x611f;&#x77e5;&#x8bbe;&#x5907;&#x65cb;&#x8f6c;&#x3001;&#x8c03;&#x7528;&#x539f;&#x751f;&#x652f;&#x4ed8;&#x754c;&#x9762;&#x7b49;&#xff0c;&#x6781;&#x5927;&#x5730;&#x6a21;&#x7cca;&#x4e86; Web &#x5e94;&#x7528;&#x548c;&#x539f;&#x751f;&#x5e94;&#x7528;&#x4e4b;&#x95f4;&#x7684;&#x754c;&#x9650;&#x3002;","children":[],"payload":{"tag":"li","lines":"1803,1804"}},{"content":"<strong>Notifications (&#x901a;&#x77e5;):</strong> &#x901a;&#x5e38;&#x4e0e; Service Worker &#x914d;&#x5408;&#x4f7f;&#x7528;&#xff0c;&#x662f;&#x5b9e;&#x73b0;&#x6d88;&#x606f;&#x63a8;&#x9001;&#x7684;&#x5177;&#x4f53; API&#x3002;&#x8fd9;&#x662f; PWA &#x80fd;&#x591f;&#x50cf;&#x539f;&#x751f; App &#x4e00;&#x6837;&#xff0c;&#x5728;&#x7528;&#x6237;&#x4e0d;&#x6d3b;&#x8dc3;&#x65f6;&#x91cd;&#x65b0;&#x5438;&#x5f15;&#x5176;&#x6ce8;&#x610f;&#x529b;&#x7684;&#x6838;&#x5fc3;&#x529f;&#x80fd;&#xff0c;&#x662f;&#x201c;&#x6709;&#x5438;&#x5f15;&#x529b;&#x201d;&#x7684;&#x91cd;&#x8981;&#x4f53;&#x73b0;&#x3002;","children":[],"payload":{"tag":"li","lines":"1804,1806"}}],"payload":{"tag":"h4","lines":"1794,1795"}}],"payload":{"tag":"h3","lines":"1763,1764"}},{"content":"<strong>WebAssembly (WASM)&#xff1a;&#x91ca;&#x653e; Web &#x5e73;&#x53f0;&#x7684;&#x539f;&#x751f;&#x6027;&#x80fd;</strong>","children":[{"content":"<strong>WASM &#x7684;&#x6838;&#x5fc3;&#x4ef7;&#x503c;&#x4e0e;&#x9769;&#x547d;&#x6027;&#x5f71;&#x54cd;</strong>","children":[{"content":"1. \n<p data-lines=\"1822,1824\"><strong>&#x6781;&#x81f4;&#x7684;&#x6027;&#x80fd; (Near-Native Performance)</strong><br>\nWASM &#x7684;&#x6838;&#x5fc3;&#x5438;&#x5f15;&#x529b;&#x5728;&#x4e8e;&#x5176;&#x5353;&#x8d8a;&#x7684;&#x6027;&#x80fd;&#x3002;&#x7531;&#x4e8e;&#x5b83;&#x662f;&#x4e00;&#x79cd;&#x9884;&#x7f16;&#x8bd1;&#x7684;&#x3001;&#x9759;&#x6001;&#x7c7b;&#x578b;&#x7684;&#x4f4e;&#x7ea7;&#x4e8c;&#x8fdb;&#x5236;&#x683c;&#x5f0f;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x53ef;&#x4ee5;&#x6781;&#x5feb;&#x5730;&#x5bf9;&#x5176;&#x8fdb;&#x884c;&#x9a8c;&#x8bc1;&#x548c;&#x7f16;&#x8bd1;&#x6210;&#x673a;&#x5668;&#x7801;&#xff0c;&#x8df3;&#x8fc7;&#x4e86; JavaScript &#x6240;&#x9700;&#x7684;&#x590d;&#x6742;&#x52a8;&#x6001;&#x89e3;&#x6790;&#x548c;&#x4f18;&#x5316;&#x8fc7;&#x7a0b;&#x3002;&#x8fd9;&#x4f7f;&#x5f97; WASM &#x5728;&#x5904;&#x7406; CPU &#x5bc6;&#x96c6;&#x578b;&#x4efb;&#x52a1;&#x65f6;&#xff0c;&#x80fd;&#x591f;&#x53d1;&#x6325;&#x51fa;&#x63a5;&#x8fd1;&#x539f;&#x751f;&#x4ee3;&#x7801;&#x7684;&#x6267;&#x884c;&#x6548;&#x7387;&#xff0c;&#x4e3a;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x8fd0;&#x884c;&#x91cd;&#x5ea6;&#x5e94;&#x7528;&#xff08;&#x5982;&#x4e13;&#x4e1a;&#x7ea7;&#x56fe;&#x50cf;/&#x89c6;&#x9891;&#x7f16;&#x8f91;&#x5668;&#x3001;&#x5927;&#x578b;&#x6e38;&#x620f;&#x3001;CAD &#x8f6f;&#x4ef6;&#xff09;&#x6253;&#x5f00;&#x4e86;&#x5927;&#x95e8;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1822,1825","listIndex":1}},{"content":"2. \n<p data-lines=\"1825,1827\"><strong>&#x8bed;&#x8a00;&#x751f;&#x6001;&#x7684;&#x878d;&#x5408; (Bringing New Ecosystems to the Web)</strong><br>\nWASM &#x6700;&#x6df1;&#x8fdc;&#x7684;&#x5f71;&#x54cd;&#x4e4b;&#x4e00;&#xff0c;&#x662f;&#x5b83;&#x6253;&#x7834;&#x4e86; Web &#x5f00;&#x53d1;&#x957f;&#x671f;&#x4ee5;&#x6765;&#x7531; JavaScript &#x4e3b;&#x5bfc;&#x7684;&#x8bed;&#x8a00;&#x58c1;&#x5792;&#x3002;&#x5b83;&#x5145;&#x5f53;&#x4e86;&#x4e00;&#x5ea7;&#x6865;&#x6881;&#xff0c;&#x4f7f;&#x5f97;&#x6570;&#x5341;&#x5e74;&#x6765;&#x5728; C++&#x3001;Rust &#x7b49;&#x8bed;&#x8a00;&#x4e2d;&#x79ef;&#x7d2f;&#x7684;&#x3001;&#x6d77;&#x91cf;&#x7684;&#x3001;&#x7ecf;&#x8fc7;&#x5145;&#x5206;&#x9a8c;&#x8bc1;&#x7684;&#x9ad8;&#x6027;&#x80fd;&#x5e93;&#x548c;&#x5e94;&#x7528;&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x56fe;&#x50cf;&#x5904;&#x7406;&#x5e93;&#x3001;&#x7269;&#x7406;&#x5f15;&#x64ce;&#x3001;&#x538b;&#x7f29;&#x7b97;&#x6cd5;&#xff09;&#x53ef;&#x4ee5;&#x88ab;&#x8f7b;&#x677e;&#x5730;&#x79fb;&#x690d;&#x5230; Web &#x5e73;&#x53f0;&#x4e0a;&#x3002;&#x5f00;&#x53d1;&#x8005;&#x65e0;&#x9700;&#x7528; JavaScript &#x91cd;&#x5199;&#x8fd9;&#x4e9b;&#x590d;&#x6742;&#x7684;&#x8f6e;&#x5b50;&#xff0c;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x590d;&#x7528;&#x6574;&#x4e2a;&#x539f;&#x751f;&#x751f;&#x6001;&#x7cfb;&#x7edf;&#x7684;&#x5f3a;&#x5927;&#x80fd;&#x529b;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1825,1828","listIndex":2}},{"content":"3. \n<p data-lines=\"1828,1830\"><strong>&#x53ef;&#x9884;&#x6d4b;&#x7684;&#x6027;&#x80fd;&#x4e0e;&#x5b89;&#x5168;&#x6027; (Predictable Performance &amp; Security)</strong><br>\n&#x4e0e; JavaScript &#x4e0d;&#x540c;&#xff0c;WASM &#x7684;&#x6267;&#x884c;&#x6027;&#x80fd;&#x66f4;&#x52a0;&#x7a33;&#x5b9a;&#x548c;&#x53ef;&#x9884;&#x6d4b;&#xff0c;&#x56e0;&#x4e3a;&#x5b83;&#x907f;&#x514d;&#x4e86; JIT &#x7f16;&#x8bd1;&#x4e2d;&#x53ef;&#x80fd;&#x51fa;&#x73b0;&#x7684;&#x201c;&#x4f18;&#x5316; - &#x53bb;&#x4f18;&#x5316;&#x201d;&#x5faa;&#x73af;&#x3002;&#x540c;&#x65f6;&#xff0c;WASM &#x8fd0;&#x884c;&#x5728;&#x4e00;&#x4e2a;&#x4e0e; JavaScript &#x73af;&#x5883;&#x9694;&#x79bb;&#x7684;&#x3001;&#x5185;&#x5b58;&#x5b89;&#x5168;&#x7684;<strong>&#x6c99;&#x7bb1; (Sandbox)</strong> &#x4e2d;&#x3002;&#x5b83;&#x9ed8;&#x8ba4;&#x65e0;&#x6cd5;&#x76f4;&#x63a5;&#x8bbf;&#x95ee; DOM &#x6216;&#x4efb;&#x610f; Web API&#xff0c;&#x6240;&#x6709;&#x4e0e;&#x5916;&#x90e8;&#x4e16;&#x754c;&#x7684;&#x4ea4;&#x4e92;&#x90fd;&#x5fc5;&#x987b;&#x901a;&#x8fc7;&#x660e;&#x786e;&#x7684; JavaScript API &#x4f5c;&#x4e3a;&#x4e2d;&#x4ecb;&#x3002;&#x8fd9;&#x79cd;&#x8bbe;&#x8ba1;&#x786e;&#x4fdd;&#x4e86; WASM &#x6a21;&#x5757;&#x7684;&#x6267;&#x884c;&#x662f;&#x9ad8;&#x5ea6;&#x5b89;&#x5168;&#x7684;&#xff0c;&#x4e0d;&#x4f1a;&#x5bf9;&#x7528;&#x6237;&#x7cfb;&#x7edf;&#x9020;&#x6210;&#x5a01;&#x80c1;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1828,1831","listIndex":3}}],"payload":{"tag":"h4","lines":"1820,1821"}},{"content":"<strong>&#x5e94;&#x7528;&#x573a;&#x666f;&#x4e0e;&#x672a;&#x6765;&#x5c55;&#x671b;</strong>","children":[{"content":"<strong>&#x91cd;&#x5ea6;&#x8ba1;&#x7b97;&#x578b; Web &#x5e94;&#x7528;</strong>&#xff1a;&#x4ece;&#x56fe;&#x50cf;&#x5904;&#x7406;&#xff08;&#x5982; Figma&#xff09;&#x3001;&#x89c6;&#x9891;&#x7f16;&#x8f91;&#x5230;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#xff0c;&#x4efb;&#x4f55;&#x9700;&#x8981;&#x5f3a;&#x5927;&#x8ba1;&#x7b97;&#x80fd;&#x529b;&#x7684;&#x5e94;&#x7528;&#x90fd;&#x53ef;&#x4ee5;&#x5c06;&#x6838;&#x5fc3;&#x7b97;&#x6cd5;&#x7528; Rust/C++ &#x7f16;&#x5199;&#x5e76;&#x7f16;&#x8bd1;&#x4e3a; WASM&#xff0c;&#x800c; UI &#x5c42;&#x5219;&#x7ee7;&#x7eed;&#x4f7f;&#x7528; React/Vue &#x7b49;&#x6846;&#x67b6;&#x3002;","children":[],"payload":{"tag":"li","lines":"1835,1836"}},{"content":"<strong>&#x4ee3;&#x7801;&#x5e93;&#x4e0e;&#x7b97;&#x6cd5;&#x7684;&#x590d;&#x7528;</strong>&#xff1a;&#x5c06;&#x4e00;&#x4e2a;&#x5728;&#x670d;&#x52a1;&#x5668;&#x7aef;&#xff08;&#x5982; Node.js&#xff09;&#x548c;&#x5ba2;&#x6237;&#x7aef;&#x90fd;&#x9700;&#x8981;&#x4f7f;&#x7528;&#x7684;&#x590d;&#x6742;&#x7b97;&#x6cd5;&#xff08;&#x5982;&#x6570;&#x636e;&#x52a0;&#x89e3;&#x5bc6;&#x3001;&#x538b;&#x7f29;&#xff09;&#x7528;&#x652f;&#x6301;&#x7f16;&#x8bd1;&#x5230; WASM &#x7684;&#x8bed;&#x8a00;&#x7f16;&#x5199;&#xff0c;&#x53ef;&#x4ee5;&#x5b9e;&#x73b0;&#x4e00;&#x5957;&#x4ee3;&#x7801;&#xff0c;&#x4e24;&#x7aef;&#x590d;&#x7528;&#xff0c;&#x4fdd;&#x8bc1;&#x903b;&#x8f91;&#x7684;&#x4e00;&#x81f4;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"1836,1837"}},{"content":"<strong>&#x63d2;&#x4ef6;&#x5316;&#x7cfb;&#x7edf;</strong>&#xff1a;&#x5141;&#x8bb8;&#x7b2c;&#x4e09;&#x65b9;&#x5f00;&#x53d1;&#x8005;&#x4ee5;&#x5b89;&#x5168;&#x3001;&#x9ad8;&#x6027;&#x80fd;&#x7684;&#x65b9;&#x5f0f;&#x4e3a; Web &#x5e94;&#x7528;&#x63d0;&#x4f9b;&#x63d2;&#x4ef6;&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x4e00;&#x4e2a;&#x5728;&#x7ebf;&#x97f3;&#x9891;&#x5de5;&#x4f5c;&#x7ad9;&#x53ef;&#x4ee5;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x52a0;&#x8f7d;&#x7528; C++ &#x7f16;&#x5199;&#x7684;&#x3001;&#x7f16;&#x8bd1;&#x6210; WASM &#x7684;&#x7b2c;&#x4e09;&#x65b9;&#x97f3;&#x9891;&#x6548;&#x679c;&#x5668;&#x3002;","children":[],"payload":{"tag":"li","lines":"1837,1838"}},{"content":"<strong>&#x65e0;&#x670d;&#x52a1;&#x5668;&#x4e0e;&#x8fb9;&#x7f18;&#x8ba1;&#x7b97;</strong>&#xff1a;WASM &#x7684;&#x8f7b;&#x91cf;&#x3001;&#x9ad8;&#x6548;&#x548c;&#x5b89;&#x5168;&#x7684;&#x7279;&#x6027;&#xff0c;&#x4f7f;&#x5176;&#x6210;&#x4e3a;&#x5728; <a href=\"https://workers.cloudflare.com/\">Cloudflare Workers</a> &#x7b49;&#x8fb9;&#x7f18;&#x8ba1;&#x7b97;&#x73af;&#x5883;&#x4e2d;&#x8fd0;&#x884c;&#x4ee3;&#x7801;&#x7684;&#x7406;&#x60f3;&#x9009;&#x62e9;&#xff0c;&#x5b9e;&#x73b0;&#x4e86;&#x771f;&#x6b63;&#x7684;&#x5e73;&#x53f0;&#x65e0;&#x5173;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"1838,1840"}}],"payload":{"tag":"h4","lines":"1831,1832"}}],"payload":{"tag":"h3","lines":"1812,1813"}},{"content":"<strong>&#x8de8;&#x5e73;&#x53f0;&#x5f00;&#x53d1;&#xff1a;&#x79fb;&#x52a8;&#x7aef; (React Native, Capacitor)&#xff0c;&#x684c;&#x9762;&#x7aef; (Electron, Tauri)</strong>","children":[{"content":"<strong>&#x79fb;&#x52a8;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x5f00;&#x53d1;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x79fb;&#x52a8;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x5f00;&#x53d1;&#x6846;&#x67b6;&#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"1855,1859\">\n<thead data-lines=\"1855,1856\">\n<tr data-lines=\"1855,1856\">\n<th style=\"text-align:left\">&#x6846;&#x67b6;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x6838;&#x5fc3;&#x6280;&#x672f;</th>\n<th style=\"text-align:left\">&#x6e32;&#x67d3;&#xff08;&#x539f;&#x751f; UI/WebView&#xff09;</th>\n<th style=\"text-align:left\">&#x539f;&#x751f;&#x529f;&#x80fd;&#x8bbf;&#x95ee;</th>\n<th style=\"text-align:left\">&#x6027;&#x80fd;</th>\n<th style=\"text-align:left\">&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</th>\n<th style=\"text-align:left\"><a href=\"https://web.dev/progressive-web-apps/\">PWA</a> &#x652f;&#x6301;</th>\n<th style=\"text-align:left\">&#x7406;&#x60f3;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1857,1859\">\n<tr data-lines=\"1857,1858\">\n<td style=\"text-align:left\"><a href=\"https://reactnative.dev/\"><strong>React Native</strong></a></td>\n<td style=\"text-align:left\">JavaScript/Native</td>\n<td style=\"text-align:left\">&#x539f;&#x751f; UI</td>\n<td style=\"text-align:left\">&#x76f4;&#x63a5;&#x8bbf;&#x95ee;&#x539f;&#x751f; API</td>\n<td style=\"text-align:left\">&#x8f83;&#x9ad8;</td>\n<td style=\"text-align:left\">&#x8f83;&#x9661;&#x5ced;</td>\n<td style=\"text-align:left\">&#x5426;</td>\n<td style=\"text-align:left\">&#x8ffd;&#x6c42;&#x539f;&#x751f;&#x6027;&#x80fd;&#x548c;&#x4f53;&#x9a8c;&#xff0c;&#x590d;&#x6742;&#x5e94;&#x7528;</td>\n</tr>\n<tr data-lines=\"1858,1859\">\n<td style=\"text-align:left\"><a href=\"https://capacitorjs.com/\"><strong>Capacitor</strong></a></td>\n<td style=\"text-align:left\">JavaScript/WebView</td>\n<td style=\"text-align:left\">WebView</td>\n<td style=\"text-align:left\">&#x901a;&#x8fc7;&#x63d2;&#x4ef6;&#x8bbf;&#x95ee;&#x539f;&#x751f; API</td>\n<td style=\"text-align:left\">&#x4e2d;&#x7b49;</td>\n<td style=\"text-align:left\">&#x8f83;&#x4f4e;</td>\n<td style=\"text-align:left\">&#x662f;</td>\n<td style=\"text-align:left\">&#x5c06;&#x73b0;&#x6709; Web &#x5e94;&#x7528;&#x8f6c;&#x6362;&#x4e3a;&#x79fb;&#x52a8;&#x5e94;&#x7528;&#xff0c;<a href=\"https://web.dev/progressive-web-apps/\">PWA</a> &#x4f18;&#x5148;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1855,1859"}}],"payload":{"tag":"h5","lines":"1853,1854"}}],"payload":{"tag":"h4","lines":"1846,1847"}},{"content":"<strong>&#x684c;&#x9762;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x5f00;&#x53d1;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x684c;&#x9762;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x5f00;&#x53d1;&#x6846;&#x67b6;&#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"1871,1875\">\n<thead data-lines=\"1871,1872\">\n<tr data-lines=\"1871,1872\">\n<th style=\"text-align:left\">&#x6846;&#x67b6;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x6838;&#x5fc3;&#x6280;&#x672f;</th>\n<th style=\"text-align:left\">&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x5927;&#x5c0f;</th>\n<th style=\"text-align:left\">&#x8d44;&#x6e90;&#x4f7f;&#x7528;&#xff08;CPU/RAM&#xff09;</th>\n<th style=\"text-align:left\">&#x542f;&#x52a8;&#x65f6;&#x95f4;</th>\n<th style=\"text-align:left\">&#x5b89;&#x5168;&#x6a21;&#x578b;</th>\n<th style=\"text-align:left\">&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1873,1875\">\n<tr data-lines=\"1873,1874\">\n<td style=\"text-align:left\"><a href=\"https://www.electronjs.org/\"><strong>Electron</strong></a></td>\n<td style=\"text-align:left\">&#x6346;&#x7ed1; Chromium + <a href=\"https://nodejs.org/\">Node.js</a></td>\n<td style=\"text-align:left\">&#x8f83;&#x5927;</td>\n<td style=\"text-align:left\">&#x8f83;&#x9ad8;</td>\n<td style=\"text-align:left\">&#x8f83;&#x6162;</td>\n<td style=\"text-align:left\">&#x8f83;&#x9ad8;&#x66b4;&#x9732;&#x98ce;&#x9669;</td>\n<td style=\"text-align:left\">&#x719f;&#x6089; Web &#x6280;&#x672f;</td>\n</tr>\n<tr data-lines=\"1874,1875\">\n<td style=\"text-align:left\"><a href=\"https://tauri.app/\"><strong>Tauri</strong></a></td>\n<td style=\"text-align:left\">&#x539f;&#x751f; WebView + <a href=\"https://www.rust-lang.org/\">Rust</a></td>\n<td style=\"text-align:left\">&#x6781;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x8f83;&#x4f4e;</td>\n<td style=\"text-align:left\">&#x6781;&#x5feb;</td>\n<td style=\"text-align:left\">&#x7ec6;&#x7c92;&#x5ea6;&#x6743;&#x9650;&#xff0c;&#x6c99;&#x76d2;&#x5316;</td>\n<td style=\"text-align:left\">&#x6027;&#x80fd;&#x4f18;&#x5148;&#xff0c;<a href=\"https://www.rust-lang.org/\">Rust</a> &#x540e;&#x7aef;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1871,1875"}}],"payload":{"tag":"h5","lines":"1869,1870"}}],"payload":{"tag":"h4","lines":"1862,1863"}}],"payload":{"tag":"h3","lines":"1842,1843"}},{"content":"<strong>Web &#x56fe;&#x5f62;&#xff0c;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x548c;&#x6c89;&#x6d78;&#x5f0f;&#x4f53;&#x9a8c;</strong>","children":[{"content":"<strong>&#x6838;&#x5fc3;&#x56fe;&#x5f62;&#x6280;&#x672f; (Core Graphics Technologies)</strong>","children":[{"content":"<strong>2D &#x56fe;&#x5f62;</strong>","children":[{"content":"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D\"><strong>Canvas 2D Context</strong></a>&#xff1a;&#x4e00;&#x4e2a; JavaScript API&#xff0c;&#x7528;&#x4e8e;&#x5728; <code>&lt;canvas&gt;</code> HTML &#x5143;&#x7d20;&#x4e0a;&#x7ed8;&#x5236; 2D &#x56fe;&#x5f62;&#xff08;&#x5f62;&#x72b6;&#x3001;&#x6587;&#x672c;&#x3001;&#x56fe;&#x50cf;&#xff09;&#x3002;&#x63d0;&#x4f9b;&#x50cf;&#x7d20;&#x7ea7;&#x63a7;&#x5236;&#x3002;","children":[],"payload":{"tag":"li","lines":"1886,1887"}},{"content":"<strong>SVG (Scalable Vector Graphics)</strong>&#xff1a;&#x4e00;&#x79cd;&#x57fa;&#x4e8e; XML &#x7684;&#x8bed;&#x8a00;&#xff0c;&#x7528;&#x4e8e;&#x63cf;&#x8ff0;&#x77e2;&#x91cf;&#x56fe;&#x50cf;&#x3002;&#x53ef;&#x4f38;&#x7f29;&#x3001;&#x53ef;&#x8bbf;&#x95ee;&#xff0c;&#x5e76;&#x4e14;&#x6613;&#x4e8e;&#x4f7f;&#x7528; CSS/JS &#x8fdb;&#x884c;&#x6837;&#x5f0f;&#x5316;/&#x811a;&#x672c;&#x5316;&#x3002;","children":[],"payload":{"tag":"li","lines":"1887,1888"}},{"content":"<strong>D3.js (Data-Driven Documents)</strong>&#xff1a;&#x4e00;&#x4e2a; JavaScript &#x5e93;&#xff0c;&#x901a;&#x8fc7;&#x5c06;&#x6570;&#x636e;&#x7ed1;&#x5b9a;&#x5230; DOM &#x6765;&#x521b;&#x5efa;&#x52a8;&#x6001;&#x3001;&#x4ea4;&#x4e92;&#x5f0f;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x3002;&#x63d0;&#x4f9b;&#x4f4e;&#x7ea7;&#x63a7;&#x5236;&#x4ee5;&#x5b9e;&#x73b0;&#x72ec;&#x7279;&#x8bbe;&#x8ba1;&#x3002;","children":[],"payload":{"tag":"li","lines":"1888,1889"}},{"content":"<strong>&#x56fe;&#x8868;&#x5e93; (<a href=\"https://www.chartjs.org/\">Chart.js</a>, <a href=\"https://echarts.apache.org/\">ECharts</a>, <a href=\"https://antv.vision/\">AntV</a>)</strong>&#xff1a;&#x7528;&#x4e8e;&#x521b;&#x5efa;&#x5e38;&#x89c1;&#x56fe;&#x8868;&#x7c7b;&#x578b;&#x7684;&#x9ad8;&#x7ea7;&#x5e93;&#xff0c;&#x901a;&#x5e38;&#x57fa;&#x4e8e; Canvas &#x6216; SVG&#x3002;","children":[],"payload":{"tag":"li","lines":"1889,1890"}},{"content":"<strong>&#x57fa;&#x4e8e;&#x8282;&#x70b9;&#x7684;&#x7f16;&#x8f91;&#x5668; (<a href=\"https://reactflow.dev/\">React Flow</a>, <a href=\"https://vueflow.dev/\">Vue Flow</a>, <a href=\"https://svelteflow.dev/\">Svelte Flow</a>)</strong>&#xff1a;&#x7528;&#x4e8e;&#x6784;&#x5efa;&#x4ea4;&#x4e92;&#x5f0f;&#x57fa;&#x4e8e;&#x8282;&#x70b9;&#x7684;&#x7f16;&#x8f91;&#x5668;&#x548c;&#x56fe;&#x8868;&#x7684;&#x5e93;&#x3002;","children":[],"payload":{"tag":"li","lines":"1890,1892"}}],"payload":{"tag":"h5","lines":"1884,1885"}},{"content":"<strong>3D &#x56fe;&#x5f62;</strong>","children":[{"content":"<a href=\"https://www.khronos.org/webgl/\"><strong>WebGL</strong></a>&#xff1a;&#x4e00;&#x4e2a; JavaScript API&#xff0c;&#x7528;&#x4e8e;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x6e32;&#x67d3;&#x4ea4;&#x4e92;&#x5f0f; 2D &#x548c; 3D &#x56fe;&#x5f62;&#xff0c;&#x5229;&#x7528; GPU&#x3002;&#x590d;&#x6742;&#xff0c;&#x4f4e;&#x7ea7;&#x3002;","children":[],"payload":{"tag":"li","lines":"1894,1895"}},{"content":"<a href=\"https://www.w3.org/TR/webgpu/\"><strong>WebGPU</strong></a>&#xff1a;WebGL &#x7684;&#x7ee7;&#x4efb;&#x8005;&#xff0c;&#x63d0;&#x4f9b;&#x4e0e;&#x73b0;&#x4ee3; GPU &#x66f4;&#x597d;&#x7684;&#x517c;&#x5bb9;&#x6027;&#x3001;GPGPU &#x8ba1;&#x7b97;&#x652f;&#x6301;&#x3001;&#x66f4;&#x5feb;&#x7684;&#x64cd;&#x4f5c;&#x548c;&#x5bf9;&#x66f4;&#x9ad8;&#x7ea7; GPU &#x529f;&#x80fd;&#x7684;&#x8bbf;&#x95ee;&#x3002;","children":[],"payload":{"tag":"li","lines":"1895,1896"}},{"content":"<a href=\"https://threejs.org/\"><strong>Three.js</strong></a>&#xff1a;&#x57fa;&#x4e8e; JavaScript &#x7684; WebGL &#x5f15;&#x64ce;&#xff0c;&#x7b80;&#x5316;&#x4e86; 3D &#x573a;&#x666f;&#x521b;&#x5efa;&#xff0c;&#x9002;&#x7528;&#x4e8e;&#x901a;&#x7528; Web &#x52a8;&#x753b;&#x3002;","children":[],"payload":{"tag":"li","lines":"1896,1897"}},{"content":"<a href=\"https://www.babylonjs.com/\"><strong>Babylon.js</strong></a>&#xff1a;&#x5f3a;&#x5927;&#x7684; WebGL &#x6846;&#x67b6;&#xff0c;&#x4e13;&#x6ce8;&#x4e8e;&#x57fa;&#x4e8e; Web &#x7684;&#x6e38;&#x620f;&#x5f00;&#x53d1;&#xff0c;&#x5177;&#x6709;&#x78b0;&#x649e;&#x68c0;&#x6d4b;&#x7b49;&#x9ad8;&#x7ea7;&#x529f;&#x80fd;&#x3002;","children":[],"payload":{"tag":"li","lines":"1897,1898"}},{"content":"<a href=\"https://tresjs.org/\"><strong>TresJS</strong></a>&#xff1a;&#x7528;&#x4e8e; Three.js &#x7684; Vue &#x81ea;&#x5b9a;&#x4e49;&#x6e32;&#x67d3;&#x5668;&#xff0c;&#x652f;&#x6301;&#x5728; Vue &#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x4e2d;&#x58f0;&#x660e;&#x5f0f;&#x5730;&#x6784;&#x5efa; 3D &#x573a;&#x666f;&#x3002;","children":[],"payload":{"tag":"li","lines":"1898,1899"}},{"content":"<a href=\"https://pixijs.com/\"><strong>PixiJS</strong></a>&#xff1a;&#x9ad8;&#x6027;&#x80fd; 2D &#x6e32;&#x67d3;&#x5668;&#xff0c;&#x4f7f;&#x7528; WebGL/WebGPU &#x8fdb;&#x884c; GPU &#x52a0;&#x901f;&#x6e32;&#x67d3;&#xff0c;&#x5e38;&#x7528;&#x4e8e;&#x6e38;&#x620f;&#x548c;&#x4ea4;&#x4e92;&#x5f0f;&#x4f53;&#x9a8c;&#x3002;","children":[],"payload":{"tag":"li","lines":"1899,1900"}},{"content":"<strong>&#x6e38;&#x620f;&#x5f15;&#x64ce; (<a href=\"https://phaser.io/\">Phaser</a>, <a href=\"https://playcanvas.com/\">PlayCanvas</a>)</strong>&#xff1a;&#x7528;&#x4e8e;&#x6784;&#x5efa; Web &#x6e38;&#x620f;&#xff08;2D/3D&#xff09;&#x7684;&#x9ad8;&#x7ea7;&#x6846;&#x67b6;&#xff0c;&#x62bd;&#x8c61;&#x4e86;&#x56fe;&#x5f62;&#x548c;&#x7269;&#x7406;&#x3002;","children":[],"payload":{"tag":"li","lines":"1900,1902"}}],"payload":{"tag":"h5","lines":"1892,1893"}},{"content":"<strong>Web Animations API &#x548c; Framer Motion</strong>","children":[{"content":"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API\"><strong>Web Animations API</strong></a>&#xff1a;&#x4e00;&#x4e2a; JavaScript API&#xff0c;&#x63d0;&#x4f9b;&#x52a8;&#x753b;&#x7684;&#x64ad;&#x653e;&#x63a7;&#x5236;&#x548c;&#x65f6;&#x95f4;&#x7ebf;&#xff0c;&#x5bf9; Web &#x52a8;&#x753b;&#x63d0;&#x4f9b;&#x7ec6;&#x7c92;&#x5ea6;&#x63a7;&#x5236;&#x3002;","children":[],"payload":{"tag":"li","lines":"1906,1907"}},{"content":"<a href=\"https://www.framer.com/motion/\"><strong>Framer Motion</strong></a>&#xff1a;&#x7528;&#x4e8e; React &#x7684;&#x52a8;&#x753b;&#x5e93;&#xff0c;&#x5177;&#x6709;&#x6df7;&#x5408;&#x5f15;&#x64ce;&#xff08;&#x539f;&#x751f;&#x6d4f;&#x89c8;&#x5668; + JavaScript &#x52a8;&#x753b;&#xff09;&#xff0c;&#x652f;&#x6301;&#x624b;&#x52bf;&#x548c;&#x5e03;&#x5c40;&#x52a8;&#x753b;&#x3002;","children":[],"payload":{"tag":"li","lines":"1907,1909"}}],"payload":{"tag":"h5","lines":"1904,1905"}},{"content":"<strong>&#x8868;&#x683c;&#xff1a;3D &#x56fe;&#x5f62;/&#x6e38;&#x620f;&#x5f15;&#x64ce;&#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"1911,1921\">\n<thead data-lines=\"1911,1912\">\n<tr data-lines=\"1911,1912\">\n<th style=\"text-align:left\">&#x5f15;&#x64ce;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x62bd;&#x8c61;&#x7ea7;&#x522b;</th>\n<th style=\"text-align:left\">&#x4e3b;&#x8981;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x6838;&#x5fc3;&#x6280;&#x672f;</th>\n<th style=\"text-align:left\">&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</th>\n<th style=\"text-align:left\">&#x5173;&#x952e;&#x7279;&#x6027;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x6846;&#x67b6;&#x96c6;&#x6210;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"1913,1921\">\n<tr data-lines=\"1913,1914\">\n<td style=\"text-align:left\"><a href=\"https://www.khronos.org/webgl/\"><strong>WebGL</strong></a></td>\n<td style=\"text-align:left\">&#x4f4e;&#x7ea7; API</td>\n<td style=\"text-align:left\">&#x590d;&#x6742; 3D &#x6e32;&#x67d3;&#xff0c;&#x9ad8;&#x6027;&#x80fd;&#x9700;&#x6c42;</td>\n<td style=\"text-align:left\"><a href=\"https://www.khronos.org/webgl/\">WebGL</a></td>\n<td style=\"text-align:left\">&#x9661;&#x5ced;</td>\n<td style=\"text-align:left\">&#x76f4;&#x63a5; GPU &#x8bbf;&#x95ee;&#xff0c;&#x50cf;&#x7d20;&#x7ea7;&#x63a7;&#x5236;</td>\n<td style=\"text-align:left\">&#x65e0;</td>\n</tr>\n<tr data-lines=\"1914,1915\">\n<td style=\"text-align:left\"><a href=\"https://www.w3.org/TR/webgpu/\"><strong>WebGPU</strong></a></td>\n<td style=\"text-align:left\">&#x4f4e;&#x7ea7; API</td>\n<td style=\"text-align:left\">&#x9ad8;&#x6027;&#x80fd;&#x8ba1;&#x7b97;&#xff0c;&#x73b0;&#x4ee3; 3D &#x56fe;&#x5f62;&#xff0c;GPGPU</td>\n<td style=\"text-align:left\"><a href=\"https://www.w3.org/TR/webgpu/\">WebGPU</a></td>\n<td style=\"text-align:left\">&#x9661;&#x5ced;</td>\n<td style=\"text-align:left\">&#x73b0;&#x4ee3; GPU &#x517c;&#x5bb9;&#xff0c;&#x5e76;&#x884c;&#x8ba1;&#x7b97;</td>\n<td style=\"text-align:left\">&#x65e0;</td>\n</tr>\n<tr data-lines=\"1915,1916\">\n<td style=\"text-align:left\"><a href=\"https://threejs.org/\"><strong>Three.js</strong></a></td>\n<td style=\"text-align:left\">3D &#x6846;&#x67b6;</td>\n<td style=\"text-align:left\">&#x901a;&#x7528; Web &#x52a8;&#x753b;&#xff0c;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;</td>\n<td style=\"text-align:left\"><a href=\"https://www.khronos.org/webgl/\">WebGL</a></td>\n<td style=\"text-align:left\">&#x8f83;&#x5e73;&#x7f13;</td>\n<td style=\"text-align:left\">&#x573a;&#x666f;&#x56fe;&#xff0c;&#x6750;&#x8d28;&#xff0c;&#x51e0;&#x4f55;&#x4f53;&#xff0c;&#x52a8;&#x753b;</td>\n<td style=\"text-align:left\">&#x7075;&#x6d3b;</td>\n</tr>\n<tr data-lines=\"1916,1917\">\n<td style=\"text-align:left\"><a href=\"https://www.babylonjs.com/\"><strong>Babylon.js</strong></a></td>\n<td style=\"text-align:left\">3D &#x6846;&#x67b6;/&#x6e38;&#x620f;&#x5f15;&#x64ce;</td>\n<td style=\"text-align:left\">Web &#x6e38;&#x620f;&#x5f00;&#x53d1;&#xff0c;&#x590d;&#x6742; 3D &#x573a;&#x666f;</td>\n<td style=\"text-align:left\"><a href=\"https://www.khronos.org/webgl/\">WebGL</a></td>\n<td style=\"text-align:left\">&#x4e2d;&#x7b49;</td>\n<td style=\"text-align:left\">&#x7269;&#x7406;&#x5f15;&#x64ce;&#xff0c;&#x78b0;&#x649e;&#x68c0;&#x6d4b;&#xff0c;&#x7c92;&#x5b50;&#x7cfb;&#x7edf;</td>\n<td style=\"text-align:left\">&#x7075;&#x6d3b;</td>\n</tr>\n<tr data-lines=\"1917,1918\">\n<td style=\"text-align:left\"><a href=\"https://tresjs.org/\"><strong>TresJS</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://vuejs.org/\">Vue</a> 3D &#x6e32;&#x67d3;&#x5668;</td>\n<td style=\"text-align:left\"><a href=\"https://vuejs.org/\">Vue</a> &#x5e94;&#x7528;&#x4e2d;&#x7684;&#x58f0;&#x660e;&#x5f0f; 3D &#x573a;&#x666f;</td>\n<td style=\"text-align:left\"><a href=\"https://threejs.org/\">Three.js</a></td>\n<td style=\"text-align:left\">&#x8f83;&#x5e73;&#x7f13;</td>\n<td style=\"text-align:left\"><a href=\"https://vuejs.org/\">Vue</a> &#x7ec4;&#x4ef6;&#x5316;&#xff0c;&#x7c7b;&#x578b;&#x5b89;&#x5168;&#xff0c;<a href=\"https://vitejs.dev/\">Vite</a> &#x96c6;&#x6210;</td>\n<td style=\"text-align:left\"><a href=\"https://vuejs.org/\">Vue</a></td>\n</tr>\n<tr data-lines=\"1918,1919\">\n<td style=\"text-align:left\"><a href=\"https://pixijs.com/\"><strong>PixiJS</strong></a></td>\n<td style=\"text-align:left\">2D &#x6e32;&#x67d3;&#x5668;</td>\n<td style=\"text-align:left\">2D &#x6e38;&#x620f;&#xff0c;&#x4ea4;&#x4e92;&#x5f0f;&#x52a8;&#x753b;</td>\n<td style=\"text-align:left\"><a href=\"https://www.khronos.org/webgl/\">WebGL</a>/<a href=\"https://www.w3.org/TR/webgpu/\">WebGPU</a></td>\n<td style=\"text-align:left\">&#x8f83;&#x5e73;&#x7f13;</td>\n<td style=\"text-align:left\">GPU &#x52a0;&#x901f;&#xff0c;&#x573a;&#x666f;&#x7ba1;&#x7406;&#xff0c;&#x4e8b;&#x4ef6;&#x5904;&#x7406;</td>\n<td style=\"text-align:left\">&#x7075;&#x6d3b;</td>\n</tr>\n<tr data-lines=\"1919,1920\">\n<td style=\"text-align:left\"><a href=\"https://phaser.io/\"><strong>Phaser</strong></a></td>\n<td style=\"text-align:left\">2D &#x6e38;&#x620f;&#x5f15;&#x64ce;</td>\n<td style=\"text-align:left\">2D Web &#x6e38;&#x620f;&#xff0c;HTML5 &#x6e38;&#x620f;</td>\n<td style=\"text-align:left\">Canvas/<a href=\"https://www.khronos.org/webgl/\">WebGL</a></td>\n<td style=\"text-align:left\">&#x8f83;&#x4f4e;</td>\n<td style=\"text-align:left\">&#x7269;&#x7406;&#xff0c;&#x52a8;&#x753b;&#xff0c;&#x8f93;&#x5165;&#x7ba1;&#x7406;&#xff0c;&#x9884;&#x5236;&#x4ef6;</td>\n<td style=\"text-align:left\">&#x65e0;</td>\n</tr>\n<tr data-lines=\"1920,1921\">\n<td style=\"text-align:left\"><a href=\"https://playcanvas.com/\"><strong>PlayCanvas</strong></a></td>\n<td style=\"text-align:left\">3D &#x6e38;&#x620f;&#x5f15;&#x64ce;</td>\n<td style=\"text-align:left\">3D Web &#x6e38;&#x620f;&#xff0c;&#x5b9e;&#x65f6;&#x534f;&#x4f5c;&#x7f16;&#x8f91;&#x5668;</td>\n<td style=\"text-align:left\"><a href=\"https://www.khronos.org/webgl/\">WebGL</a></td>\n<td style=\"text-align:left\">&#x4e2d;&#x7b49;</td>\n<td style=\"text-align:left\">&#x5b9e;&#x65f6;&#x534f;&#x4f5c;&#xff0c;&#x7269;&#x7406;&#xff0c;&#x52a8;&#x753b;&#xff0c;&#x6750;&#x8d28;&#x7cfb;&#x7edf;</td>\n<td style=\"text-align:left\">&#x65e0;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"1911,1921"}}],"payload":{"tag":"h5","lines":"1909,1910"}}],"payload":{"tag":"h4","lines":"1882,1883"}},{"content":"<strong>&#x6c89;&#x6d78;&#x5f0f; Web (Immersive Web): WebXR&#xff1a;AR/VR&#xff0c;A-Frame</strong>","children":[{"content":"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API\"><strong>WebXR Device API</strong></a>&#xff1a;&#x5728; Web &#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x4e2d;&#x542f;&#x7528;&#x589e;&#x5f3a;&#x73b0;&#x5b9e; (AR) &#x548c;&#x865a;&#x62df;&#x73b0;&#x5b9e; (VR) &#x4f53;&#x9a8c;&#xff0c;&#x4e0e;&#x6df7;&#x5408;&#x73b0;&#x5b9e;&#x786c;&#x4ef6;&#x63a5;&#x53e3;&#x3002;","children":[],"payload":{"tag":"li","lines":"1926,1927"}},{"content":"<a href=\"https://aframe.io/\"><strong>A-Frame</strong></a>&#xff1a;&#x57fa;&#x4e8e; WebGL &#x7684; Web &#x6846;&#x67b6;&#xff0c;&#x7528;&#x4e8e;&#x4f7f;&#x7528;&#x719f;&#x6089;&#x7684; HTML &#x6807;&#x8bb0;&#x8bed;&#x8a00;&#x6784;&#x5efa; VR &#x4f53;&#x9a8c;&#x3002;","children":[],"payload":{"tag":"li","lines":"1927,1929"}}],"payload":{"tag":"h4","lines":"1924,1925"}},{"content":"<strong>&#x53ef;&#x89c6;&#x5316;&#x4e0e;&#x79d1;&#x5b66;&#x5185;&#x5bb9;&#x6e32;&#x67d3;</strong>","children":[{"content":"<strong>&#x5927;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x7684;&#x6027;&#x80fd;&#x7b56;&#x7565;</strong>","children":[{"content":"<strong>&#x6570;&#x636e;&#x62bd;&#x6837;&#x4e0e;&#x805a;&#x5408;</strong>&#xff1a;&#x5728;&#x6570;&#x636e;&#x91cf;&#x8fc7;&#x5927;&#x65f6;&#xff0c;&#x4e0d;&#x76f4;&#x63a5;&#x6e32;&#x67d3;&#x6240;&#x6709;&#x6570;&#x636e;&#x70b9;&#xff0c;&#x800c;&#x662f;&#x8fdb;&#x884c;&#x62bd;&#x6837;&#xff08;&#x5982;&#x968f;&#x673a;&#x62bd;&#x6837;&#x3001;&#x5747;&#x5300;&#x62bd;&#x6837;&#xff09;&#x6216;&#x805a;&#x5408;&#xff08;&#x5982;&#x5c06;&#x65f6;&#x95f4;&#x5e8f;&#x5217;&#x6570;&#x636e;&#x6309;&#x5c0f;&#x65f6;/&#x5929;&#x805a;&#x5408;&#xff09;&#xff0c;&#x53ea;&#x5728;&#x66f4;&#x9ad8;&#x5c42;&#x7ea7;&#x5c55;&#x793a;&#x6c47;&#x603b;&#x4fe1;&#x606f;&#x3002;&#x7528;&#x6237;&#x53ef;&#x4ee5;&#x94bb;&#x53d6;&#xff08;drill-down&#xff09;&#x67e5;&#x770b;&#x66f4;&#x8be6;&#x7ec6;&#x7684;&#x6570;&#x636e;&#x3002;","children":[],"payload":{"tag":"li","lines":"1938,1939"}},{"content":"<strong>&#x5206;&#x5c42;&#x6e32;&#x67d3;&#x4e0e;&#x6309;&#x9700;&#x52a0;&#x8f7d;</strong>&#xff1a;","children":[{"content":"<strong>&#x89c6;&#x53e3;&#x5185;&#x6e32;&#x67d3;</strong>&#xff1a;&#x53ea;&#x6e32;&#x67d3;&#x5f53;&#x524d;&#x7528;&#x6237;&#x89c6;&#x53e3;&#x5185;&#x7684;&#x6570;&#x636e;&#x70b9;&#x6216;&#x56fe;&#x5f62;&#x5143;&#x7d20;&#xff0c;&#x89c6;&#x53e3;&#x5916;&#x5143;&#x7d20;&#x5ef6;&#x8fdf;&#x52a0;&#x8f7d;&#x6216;&#x4e0d;&#x6e32;&#x67d3;&#x3002;","children":[],"payload":{"tag":"li","lines":"1940,1941"}},{"content":"<strong>&#x6e10;&#x8fdb;&#x5f0f;&#x6e32;&#x67d3;</strong>&#xff1a;&#x5148;&#x5feb;&#x901f;&#x6e32;&#x67d3;&#x4f4e;&#x7cbe;&#x5ea6;&#x7684;&#x56fe;&#x5f62;&#xff0c;&#x7136;&#x540e;&#x9010;&#x6b65;&#x52a0;&#x8f7d;&#x548c;&#x6e32;&#x67d3;&#x66f4;&#x9ad8;&#x7cbe;&#x5ea6;&#x7684;&#x7ec6;&#x8282;&#x3002;","children":[],"payload":{"tag":"li","lines":"1941,1942"}},{"content":"<strong>Web Workers</strong>&#xff1a;&#x5c06;&#x590d;&#x6742;&#x7684;&#x6570;&#x636e;&#x5904;&#x7406;&#x548c;&#x8ba1;&#x7b97;&#xff08;&#x5982;&#x6570;&#x636e;&#x8fc7;&#x6ee4;&#x3001;&#x805a;&#x5408;&#x3001;&#x683c;&#x5f0f;&#x5316;&#xff09;&#x653e;&#x5230; Web Workers &#x4e2d;&#xff0c;&#x907f;&#x514d;&#x963b;&#x585e;&#x4e3b;&#x7ebf;&#x7a0b;&#xff0c;&#x4fdd;&#x6301; UI &#x54cd;&#x5e94;&#x6d41;&#x7545;&#x3002;","children":[],"payload":{"tag":"li","lines":"1942,1943"}}],"payload":{"tag":"li","lines":"1939,1943"}},{"content":"<strong>WebAssembly &#x4e0e; WebGL/Canvas</strong>&#xff1a;","children":[{"content":"<strong>WASM</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x8ba1;&#x7b97;&#x5bc6;&#x96c6;&#x578b;&#x7684;&#x6570;&#x636e;&#x5904;&#x7406;&#x6216;&#x6e32;&#x67d3;&#x903b;&#x8f91;&#xff0c;&#x53ef;&#x4ee5;&#x4f7f;&#x7528; C++/Rust &#x7b49;&#x8bed;&#x8a00;&#x7f16;&#x5199;&#xff0c;&#x7f16;&#x8bd1;&#x6210; WASM&#xff0c;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x4ee5;&#x63a5;&#x8fd1;&#x539f;&#x751f;&#x7684;&#x901f;&#x5ea6;&#x8fd0;&#x884c;&#xff0c;&#x4ece;&#x800c;&#x63d0;&#x5347;&#x6027;&#x80fd;&#x3002;","children":[],"payload":{"tag":"li","lines":"1944,1945"}},{"content":"<strong>WebGL/Canvas</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x9700;&#x8981;&#x6e32;&#x67d3;&#x6210;&#x5343;&#x4e0a;&#x4e07;&#x4e2a;&#x6570;&#x636e;&#x70b9;&#x6216;&#x590d;&#x6742; 3D &#x56fe;&#x5f62;&#x7684;&#x573a;&#x666f;&#xff0c;&#x76f4;&#x63a5;&#x4f7f;&#x7528; WebGL&#xff08;&#x57fa;&#x4e8e; GPU &#x52a0;&#x901f;&#xff09;&#x6216; Canvas&#xff08;2D &#x7ed8;&#x56fe; API&#xff09;&#x8fdb;&#x884c;&#x5e95;&#x5c42;&#x6e32;&#x67d3;&#xff0c;&#x800c;&#x4e0d;&#x662f;&#x4f9d;&#x8d56; DOM &#x64cd;&#x4f5c;&#xff0c;&#x53ef;&#x4ee5;&#x83b7;&#x5f97;&#x66f4;&#x597d;&#x7684;&#x6027;&#x80fd;&#x3002;D3.js &#x7b49;&#x5e93;&#x4e5f;&#x652f;&#x6301;&#x6e32;&#x67d3;&#x5230; Canvas&#x3002;","children":[],"payload":{"tag":"li","lines":"1945,1946"}}],"payload":{"tag":"li","lines":"1943,1946"}},{"content":"<strong>&#x6570;&#x636e;&#x6d41;&#x4f18;&#x5316;</strong>&#xff1a;","children":[{"content":"<strong>&#x589e;&#x91cf;&#x66f4;&#x65b0;</strong>&#xff1a;&#x5f53;&#x6570;&#x636e;&#x6e90;&#x53d1;&#x751f;&#x53d8;&#x5316;&#x65f6;&#xff0c;&#x53ea;&#x66f4;&#x65b0;&#x53d7;&#x5f71;&#x54cd;&#x7684;&#x56fe;&#x5f62;&#x5143;&#x7d20;&#xff0c;&#x800c;&#x4e0d;&#x662f;&#x91cd;&#x65b0;&#x6e32;&#x67d3;&#x6574;&#x4e2a;&#x56fe;&#x8868;&#x3002;","children":[],"payload":{"tag":"li","lines":"1947,1948"}},{"content":"<strong>&#x865a;&#x62df;&#x5316;</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x957f;&#x5217;&#x8868;&#x6216;&#x5927;&#x91cf;&#x56fe;&#x5f62;&#x5143;&#x7d20;&#xff0c;&#x53ea;&#x5728; DOM &#x4e2d;&#x6e32;&#x67d3;&#x53ef;&#x89c1;&#x90e8;&#x5206;&#xff0c;&#x6eda;&#x52a8;&#x65f6;&#x52a8;&#x6001;&#x52a0;&#x8f7d;&#x548c;&#x5378;&#x8f7d;&#x5143;&#x7d20;&#x3002;","children":[],"payload":{"tag":"li","lines":"1948,1950"}}],"payload":{"tag":"li","lines":"1946,1950"}}],"payload":{"tag":"h5","lines":"1934,1935"}},{"content":"<strong>&#x5b9e;&#x65f6;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x7684;&#x6280;&#x672f;&#x9009;&#x578b;</strong>","children":[{"content":"\n<p data-lines=\"1954,1955\"><strong>&#x5b9e;&#x65f6;&#x901a;&#x4fe1;&#x534f;&#x8bae;</strong>&#xff1a;</p>","children":[{"content":"<strong>WebSocket</strong>&#xff1a;&#x5982;&#x524d;&#x6240;&#x8ff0;&#xff0c;WebSocket &#x63d0;&#x4f9b;&#x5168;&#x53cc;&#x5de5;&#x901a;&#x4fe1;&#xff0c;&#x662f;&#x5b9e;&#x65f6;&#x6570;&#x636e;&#x63a8;&#x9001;&#x7684;&#x9996;&#x9009;&#xff0c;&#x9002;&#x7528;&#x4e8e;&#x9700;&#x8981;&#x9891;&#x7e41;&#x53cc;&#x5411;&#x4ea4;&#x4e92;&#x7684;&#x573a;&#x666f;&#xff08;&#x5982;&#x5b9e;&#x65f6;&#x4eea;&#x8868;&#x76d8;&#x3001;&#x5728;&#x7ebf;&#x4ea4;&#x6613;&#x56fe;&#x8868;&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"1955,1956"}},{"content":"<strong>Server-Sent Events (SSE)</strong>&#xff1a;&#x5982;&#x679c;&#x53ea;&#x9700;&#x8981;&#x670d;&#x52a1;&#x5668;&#x5411;&#x5ba2;&#x6237;&#x7aef;&#x5355;&#x5411;&#x63a8;&#x9001;&#x6570;&#x636e;&#xff0c;SSE &#x662f;&#x66f4;&#x8f7b;&#x91cf;&#x3001;&#x6613;&#x4e8e;&#x5b9e;&#x73b0;&#x7684;&#x9009;&#x9879;&#xff0c;&#x4e14;&#x5185;&#x7f6e;&#x91cd;&#x8fde;&#x673a;&#x5236;&#x3002;","children":[],"payload":{"tag":"li","lines":"1956,1957"}}],"payload":{"tag":"li","lines":"1954,1957"}},{"content":"\n<p data-lines=\"1957,1958\"><strong>&#x6570;&#x636e;&#x5904;&#x7406;&#x4e0e;&#x6e32;&#x67d3;&#x5e93;</strong>&#xff1a;</p>","children":[{"content":"<a href=\"https://d3js.org/\"><strong>D3.js</strong></a>&#xff1a;&#x529f;&#x80fd;&#x5f3a;&#x5927;&#x7684; JavaScript &#x5e93;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x7075;&#x6d3b;&#x7684;&#x6570;&#x636e;&#x7ed1;&#x5b9a;&#x548c;&#x8f6c;&#x6362;&#x80fd;&#x529b;&#xff0c;&#x53ef;&#x4ee5;&#x81ea;&#x5b9a;&#x4e49;&#x5404;&#x79cd;&#x56fe;&#x8868;&#x7c7b;&#x578b;&#xff0c;&#x4f46;&#x5b66;&#x4e60;&#x66f2;&#x7ebf;&#x8f83;&#x9661;&#x5ced;&#x3002;","children":[],"payload":{"tag":"li","lines":"1958,1959"}},{"content":"<strong>ECharts/<a href=\"https://antv.vision/\">AntV</a>/Chart.js</strong>&#xff1a;&#x5f00;&#x7bb1;&#x5373;&#x7528;&#x7684;&#x56fe;&#x8868;&#x5e93;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x4e30;&#x5bcc;&#x7684;&#x56fe;&#x8868;&#x7ec4;&#x4ef6;&#x548c;&#x914d;&#x7f6e;&#x9009;&#x9879;&#xff0c;&#x6613;&#x4e8e;&#x4e0a;&#x624b;&#xff0c;&#x9002;&#x5408;&#x5feb;&#x901f;&#x6784;&#x5efa;&#x5e38;&#x89c1;&#x7684;&#x5b9e;&#x65f6;&#x56fe;&#x8868;&#x3002;","children":[],"payload":{"tag":"li","lines":"1959,1961"}}],"payload":{"tag":"li","lines":"1957,1961"}},{"content":"\n<p data-lines=\"1961,1962\"><strong>&#x6027;&#x80fd;&#x8003;&#x91cf;</strong>&#xff1a;</p>","children":[{"content":"\n<p data-lines=\"1963,1964\"><strong>&#x8282;&#x6d41;&#x4e0e;&#x9632;&#x6296;</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x9ad8;&#x9891;&#x66f4;&#x65b0;&#x7684;&#x6570;&#x636e;&#xff0c;&#x4f7f;&#x7528;&#x8282;&#x6d41;&#xff08;throttle&#xff09;&#x6216;&#x9632;&#x6296;&#xff08;debounce&#xff09;&#x6280;&#x672f;&#x9650;&#x5236;&#x6e32;&#x67d3;&#x9891;&#x7387;&#xff0c;&#x907f;&#x514d;&#x4e0d;&#x5fc5;&#x8981;&#x7684; UI &#x66f4;&#x65b0;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1963,1965"}},{"content":"\n<p data-lines=\"1965,1966\"><strong>&#x52a8;&#x753b;&#x4f18;&#x5316;</strong>&#xff1a;&#x4f7f;&#x7528; CSS transform &#x548c; opacity &#x7b49;&#x5c5e;&#x6027;&#x8fdb;&#x884c;&#x52a8;&#x753b;&#xff0c;&#x5229;&#x7528; GPU &#x52a0;&#x901f;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1965,1967"}},{"content":"\n<p data-lines=\"1967,1968\"><strong>&#x589e;&#x91cf;&#x6e32;&#x67d3;</strong>&#xff1a;&#x53ea;&#x66f4;&#x65b0;&#x56fe;&#x8868;&#x4e2d;&#x53d1;&#x751f;&#x53d8;&#x5316;&#x7684;&#x90e8;&#x5206;&#xff0c;&#x800c;&#x4e0d;&#x662f;&#x6bcf;&#x6b21;&#x90fd;&#x91cd;&#x7ed8;&#x6574;&#x4e2a;&#x56fe;&#x8868;&#x3002;</p>","children":[],"payload":{"tag":"li","lines":"1967,1969"}}],"payload":{"tag":"li","lines":"1961,1969"}}],"payload":{"tag":"h5","lines":"1950,1951"}},{"content":"<strong>Web GIS &#x7b80;&#x4ecb;</strong>","children":[{"content":"<strong>&#x6838;&#x5fc3;&#x529f;&#x80fd;</strong>&#xff1a;&#x5730;&#x56fe;&#x663e;&#x793a;&#x3001;&#x5730;&#x7406;&#x6570;&#x636e;&#x67e5;&#x8be2;&#x3001;&#x7a7a;&#x95f4;&#x5206;&#x6790;&#x3001;&#x8def;&#x5f84;&#x89c4;&#x5212;&#x3001;&#x5730;&#x7406;&#x7f16;&#x7801;/&#x9006;&#x5730;&#x7406;&#x7f16;&#x7801;&#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"1973,1974"}},{"content":"<strong>&#x524d;&#x7aef;&#x6280;&#x672f;&#x6808;</strong>&#xff1a;","children":[{"content":"<strong>&#x5730;&#x56fe;&#x5e93;</strong>&#xff1a;<a href=\"https://leafletjs.com/\">Leaflet.js</a>&#xff08;&#x8f7b;&#x91cf;&#x7ea7;&#x3001;&#x7075;&#x6d3b;&#xff09;&#x3001;<a href=\"https://openlayers.org/\">OpenLayers</a>&#xff08;&#x529f;&#x80fd;&#x5168;&#x9762;&#x3001;&#x590d;&#x6742;&#xff09;&#x3001;<a href=\"https://docs.mapbox.com/mapbox-gl-js/api/\">Mapbox GL JS</a>&#xff08;&#x57fa;&#x4e8e; WebGL&#xff0c;&#x9ad8;&#x6027;&#x80fd;&#x3001;&#x5b9a;&#x5236;&#x6027;&#x5f3a;&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"1975,1976"}},{"content":"<strong>&#x6570;&#x636e;&#x683c;&#x5f0f;</strong>&#xff1a;<a href=\"https://geojson.org/\">GeoJSON</a>&#x3001;<a href=\"https://github.com/topojson/topojson\">TopoJSON</a>&#x3001;<a href=\"https://www.ogc.org/standard/kml/\">KML</a>&#x3001;<a href=\"https://www.ogc.org/standard/wkt-crs/\">WKT</a> &#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"1976,1977"}},{"content":"<strong>&#x53ef;&#x89c6;&#x5316;</strong>&#xff1a;&#x7ed3;&#x5408; D3.js&#x3001;ECharts GL &#x7b49;&#x5e93;&#xff0c;&#x5728;&#x5730;&#x56fe;&#x4e0a;&#x53e0;&#x52a0;&#x70ed;&#x529b;&#x56fe;&#x3001;&#x6563;&#x70b9;&#x56fe;&#x3001;&#x8f68;&#x8ff9;&#x56fe;&#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"1977,1978"}}],"payload":{"tag":"li","lines":"1974,1978"}},{"content":"<strong>&#x5e94;&#x7528;&#x573a;&#x666f;</strong>&#xff1a;&#x4f4d;&#x7f6e;&#x670d;&#x52a1;&#x3001;&#x667a;&#x6167;&#x57ce;&#x5e02;&#x3001;&#x7269;&#x6d41;&#x8ffd;&#x8e2a;&#x3001;&#x73af;&#x5883;&#x76d1;&#x6d4b;&#x3001;&#x707e;&#x5bb3;&#x9884;&#x8b66;&#x3001;&#x623f;&#x5730;&#x4ea7;&#x5206;&#x6790;&#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"1978,1980"}}],"payload":{"tag":"h5","lines":"1969,1970"}}],"payload":{"tag":"h4","lines":"1929,1930"}}],"payload":{"tag":"h3","lines":"1878,1879"}},{"content":"<strong>Web &#x97f3;&#x9891;&#x548c;&#x5a92;&#x4f53;&#x6d41;&#xff1a;&#x5b9e;&#x65f6;&#x97f3;&#x9891;/&#x89c6;&#x9891;&#x5904;&#x7406;</strong>","children":[{"content":"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API\"><strong>Web Audio API</strong></a>&#xff1a;&#x5f3a;&#x5927;&#x7684;&#x97f3;&#x9891;&#x63a7;&#x5236;&#x7cfb;&#x7edf;&#xff0c;&#x5141;&#x8bb8;&#x6a21;&#x5757;&#x5316;&#x8def;&#x7531;&#x3001;&#x6dfb;&#x52a0;&#x6548;&#x679c;&#x3001;&#x521b;&#x5efa;&#x53ef;&#x89c6;&#x5316;&#x548c;&#x7a7a;&#x95f4;&#x6548;&#x679c;&#x3002;&#x8865;&#x5145; <code>&lt;audio&gt;</code> &#x5143;&#x7d20;&#x4ee5;&#x8fdb;&#x884c;&#x590d;&#x6742;&#x5904;&#x7406;&#x3002;","children":[],"payload":{"tag":"li","lines":"1986,1987"}},{"content":"<strong>Media Streams API (Media Capture and Streams API)</strong>&#xff1a;&#x652f;&#x6301;&#x6d41;&#x5f0f;&#x4f20;&#x8f93;&#x97f3;&#x9891;&#x548c;&#x89c6;&#x9891;&#x6570;&#x636e;&#xff0c;&#x5141;&#x8bb8;&#x8bbf;&#x95ee;&#x7528;&#x6237;&#x6444;&#x50cf;&#x5934;/&#x9ea6;&#x514b;&#x98ce; (getUserMedia()) &#x548c;&#x5a92;&#x4f53;&#x8f68;&#x9053;&#x64cd;&#x4f5c;&#x3002;","children":[],"payload":{"tag":"li","lines":"1987,1988"}},{"content":"<strong>Media Source Extensions (MSE)</strong>&#xff1a;&#x652f;&#x6301;&#x65e0;&#x63d2;&#x4ef6;&#x7684;&#x57fa;&#x4e8e; Web &#x7684;&#x6d41;&#x5a92;&#x4f53;&#xff0c;&#x5141;&#x8bb8;&#x901a;&#x8fc7; JavaScript &#x4e3a; <code>&lt;audio&gt;</code> &#x548c; <code>&lt;video&gt;</code> &#x5143;&#x7d20;&#x521b;&#x5efa;&#x5a92;&#x4f53;&#x6d41;&#xff0c;&#x5e76;&#x5bf9;&#x83b7;&#x53d6;&#x8fdb;&#x884c;&#x7ec6;&#x7c92;&#x5ea6;&#x63a7;&#x5236;&#x3002;","children":[],"payload":{"tag":"li","lines":"1988,1989"}},{"content":"<strong><a href=\"https://webrtc.org/\">WebRTC</a> (Web Real-Time Communication)</strong>&#xff1a;&#x4f7f; Web &#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x80fd;&#x591f;&#x6355;&#x83b7;&#x548c;&#x6d41;&#x5f0f;&#x4f20;&#x8f93;&#x97f3;&#x9891;/&#x89c6;&#x9891;&#xff0c;&#x5e76;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e4b;&#x95f4;&#x70b9;&#x5bf9;&#x70b9;&#x4ea4;&#x6362;&#x4efb;&#x610f;&#x6570;&#x636e;&#x800c;&#x65e0;&#x9700;&#x7ecf;&#x8fc7;&#x4e2d;&#x5fc3;&#x670d;&#x52a1;&#x5668;&#x4e2d;&#x8f6c;&#xff0c;&#x4ece;&#x800c;&#x4fc3;&#x8fdb;&#x7535;&#x8bdd;&#x4f1a;&#x8bae;&#x548c;&#x5b9e;&#x65f6;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x3002;","children":[],"payload":{"tag":"li","lines":"1989,1991"}}],"payload":{"tag":"h3","lines":"1982,1983"}},{"content":"<strong>&#x533a;&#x5757;&#x94fe;&#x548c; Web3 &#x96c6;&#x6210;</strong>","children":[{"content":"<strong>&#x94b1;&#x5305;&#x8fde;&#x63a5;</strong>","children":[{"content":"<a href=\"https://metamask.io/\"><strong>MetaMask</strong></a>&#xff1a;&#x6d41;&#x884c;&#x7684;&#x6d4f;&#x89c8;&#x5668;&#x6269;&#x5c55;&#x94b1;&#x5305;&#x3002;","children":[],"payload":{"tag":"li","lines":"1999,2000"}},{"content":"<a href=\"https://walletconnect.com/\"><strong>WalletConnect</strong></a>&#xff1a;&#x5f00;&#x653e;&#x534f;&#x8bae;&#xff0c;&#x7528;&#x4e8e;&#x901a;&#x8fc7;&#x4e8c;&#x7ef4;&#x7801;&#x6216;&#x6df1;&#x5ea6;&#x94fe;&#x63a5;&#x5c06;&#x79fb;&#x52a8;&#x94b1;&#x5305;&#x8fde;&#x63a5;&#x5230; dApp&#x3002;","children":[],"payload":{"tag":"li","lines":"2000,2001"}},{"content":"<a href=\"https://web3modal.com/\"><strong>Web3Modal</strong></a>&#xff1a;&#x5e2e;&#x52a9;&#x5f00;&#x53d1;&#x8005;&#x901a;&#x8fc7;&#x7b80;&#x5355;&#x7684;&#x914d;&#x7f6e;&#x5728;&#x4ed6;&#x4eec;&#x7684; dApp &#x4e2d;&#x6dfb;&#x52a0;&#x5bf9;&#x591a;&#x4e2a;&#x63d0;&#x4f9b;&#x5546;&#xff08;<a href=\"https://metamask.io/\">MetaMask</a>&#x3001;<a href=\"https://walletconnect.com/\">WalletConnect</a> &#x7b49;&#xff09;&#x7684;&#x652f;&#x6301;&#x7684;&#x5e93;&#x3002;","children":[],"payload":{"tag":"li","lines":"2001,2002"}},{"content":"<a href=\"https://wagmi.sh/\"><strong>wagmi</strong></a>&#xff1a;&#x4e00;&#x4e2a;&#x7b80;&#x5316; Web3 &#x4ea4;&#x4e92;&#x7684; React Hooks &#x5e93;&#x3002;","children":[],"payload":{"tag":"li","lines":"2002,2003"}},{"content":"<a href=\"https://www.rainbowkit.com/\"><strong>RainbowKit</strong></a>&#xff1a;&#x7528;&#x4e8e;&#x8f7b;&#x677e;&#x8fde;&#x63a5;&#x94b1;&#x5305;&#x7684; React &#x5e93;&#xff0c;&#x6784;&#x5efa;&#x5728; wagmi &#x548c; <a href=\"https://viem.sh/\">viem</a> &#x4e4b;&#x4e0a;&#x3002;","children":[],"payload":{"tag":"li","lines":"2003,2005"}}],"payload":{"tag":"h4","lines":"1997,1998"}},{"content":"<strong>&#x533a;&#x5757;&#x94fe;&#x4ea4;&#x4e92;&#x5e93;</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;Web3 &#x533a;&#x5757;&#x94fe;&#x4ea4;&#x4e92;&#x5e93;&#x6bd4;&#x8f83; (ethers.js, web3.js, viem)</strong>","children":[{"content":"<table data-lines=\"2015,2020\">\n<thead data-lines=\"2015,2016\">\n<tr data-lines=\"2015,2016\">\n<th style=\"text-align:left\">&#x5e93;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x6838;&#x5fc3;&#x54f2;&#x5b66;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">API &#x8bbe;&#x8ba1;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\"><a href=\"https://www.typescriptlang.org/\">TypeScript</a> &#x652f;&#x6301;</th>\n<th style=\"text-align:left\">&#x5305;&#x5927;&#x5c0f;</th>\n<th style=\"text-align:left\">&#x6210;&#x719f;&#x5ea6;</th>\n<th style=\"text-align:left\">&#x94b1;&#x5305;/&#x63d0;&#x4f9b;&#x5546;&#x5206;&#x79bb;</th>\n<th style=\"text-align:left\">&#x7406;&#x60f3;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"2017,2020\">\n<tr data-lines=\"2017,2018\">\n<td style=\"text-align:left\"><a href=\"https://ethers.io/\"><strong>ethers.js</strong></a></td>\n<td style=\"text-align:left\">&#x9ad8;&#x7ea7;&#x62bd;&#x8c61;&#xff0c;&#x9762;&#x5411;&#x5bf9;&#x8c61;</td>\n<td style=\"text-align:left\">Promise-based</td>\n<td style=\"text-align:left\">&#x4f18;&#x79c0;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x6210;&#x719f;</td>\n<td style=\"text-align:left\">&#x662f;</td>\n<td style=\"text-align:left\">&#x590d;&#x6742; dApp&#xff0c;&#x65b0;&#x9879;&#x76ee;&#xff0c;&#x6ce8;&#x91cd;&#x4ee3;&#x7801;&#x6e05;&#x6670;&#x5ea6;</td>\n</tr>\n<tr data-lines=\"2018,2019\">\n<td style=\"text-align:left\"><a href=\"https://web3js.org/\"><strong>web3.js</strong></a></td>\n<td style=\"text-align:left\">&#x539f;&#x59cb;&#xff0c;&#x4f4e;&#x7ea7;&#x62bd;&#x8c61;</td>\n<td style=\"text-align:left\">Callback-based</td>\n<td style=\"text-align:left\">&#x8f83;&#x5f31;</td>\n<td style=\"text-align:left\">&#x8f83;&#x5927;</td>\n<td style=\"text-align:left\">&#x6210;&#x719f;</td>\n<td style=\"text-align:left\">&#x5426;</td>\n<td style=\"text-align:left\">&#x9057;&#x7559;&#x9879;&#x76ee;&#xff0c;&#x521d;&#x5b66;&#x8005;&#xff0c;&#x5e7f;&#x6cdb;&#x793e;&#x533a;&#x652f;&#x6301;</td>\n</tr>\n<tr data-lines=\"2019,2020\">\n<td style=\"text-align:left\"><a href=\"https://viem.sh/\"><strong>viem</strong></a></td>\n<td style=\"text-align:left\">&#x4f4e;&#x7ea7;&#x539f;&#x8bed;&#xff0c;&#x65e0;&#x72b6;&#x6001;</td>\n<td style=\"text-align:left\">&#x7b80;&#x6d01;&#xff0c;&#x53ef;&#x7ec4;&#x5408;</td>\n<td style=\"text-align:left\">&#x4f18;&#x79c0;</td>\n<td style=\"text-align:left\">&#x6781;&#x5c0f;</td>\n<td style=\"text-align:left\">&#x8f83;&#x65b0;</td>\n<td style=\"text-align:left\">&#x662f;</td>\n<td style=\"text-align:left\">&#x6027;&#x80fd;&#x5173;&#x952e;&#x578b; dApp&#xff0c;&#x6ce8;&#x91cd;&#x6548;&#x7387;&#x548c;&#x7c7b;&#x578b;&#x5b89;&#x5168;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"2015,2020"}}],"payload":{"tag":"h5","lines":"2013,2014"}}],"payload":{"tag":"h4","lines":"2005,2006"}},{"content":"<strong>A. Web2 &#x4e0e; Web3 &#x524d;&#x7aef;&#x8303;&#x5f0f;&#x5bf9;&#x6bd4;</strong>","children":[{"content":"<strong>&#x53bb;&#x4e2d;&#x5fc3;&#x5316;&#x4e0e;&#x7528;&#x6237;&#x6240;&#x6709;&#x6743;</strong>&#xff1a;Web2 &#x7684;&#x5b9a;&#x4e49;&#x7279;&#x5f81;&#x662f;&#x4e2d;&#x5fc3;&#x5316;&#xff0c;&#x5927;&#x591a;&#x6570;&#x670d;&#x52a1;&#x7531;&#x63a7;&#x5236;&#x5e73;&#x53f0;&#x548c;&#x670d;&#x52a1;&#x5668;&#x7684;&#x516c;&#x53f8;&#x8fd0;&#x8425;&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x5f53;&#x7528;&#x6237;&#x5728; Instagram &#x6216; YouTube &#x4e0a;&#x53d1;&#x5e03;&#x5185;&#x5bb9;&#x65f6;&#xff0c;&#x5176;&#x6570;&#x636e;&#x5b58;&#x50a8;&#x5728;&#x8fd9;&#x4e9b;&#x516c;&#x53f8;&#x62e5;&#x6709;&#x7684;&#x4e2d;&#x5fc3;&#x5316;&#x670d;&#x52a1;&#x5668;&#x4e2d;&#x3002;&#x76f8;&#x6bd4;&#x4e4b;&#x4e0b;&#xff0c;Web3 &#x62e5;&#x62b1;&#x53bb;&#x4e2d;&#x5fc3;&#x5316;&#xff0c;&#x7f51;&#x7edc;&#x7531;&#x72ec;&#x7acb;&#x8282;&#x70b9;&#x534f;&#x540c;&#x5de5;&#x4f5c;&#xff0c;&#x800c;&#x975e;&#x4e2d;&#x5fc3;&#x67a2;&#x7ebd;&#x3002;Web3 &#x4e2d;&#x7684;&#x793e;&#x4ea4;&#x7f51;&#x7edc;&#x53ef;&#x80fd;&#x7531;&#x4e0d;&#x540c;&#x4eba;&#x8fd0;&#x884c;&#x7684;&#x591a;&#x4e2a;&#x670d;&#x52a1;&#x5668;&#x7ec4;&#x6210;&#xff0c;&#x6216;&#x5b8c;&#x5168;&#x5728;&#x533a;&#x5757;&#x94fe;&#x4e0a;&#x8fd0;&#x884c;&#x3002;&#x5728; Web3 &#x4e2d;&#xff0c;&#x7528;&#x6237;&#x62e5;&#x6709;&#x81ea;&#x5df1;&#x7684;&#x6570;&#x636e;&#xff0c;&#x5e76;&#x5c06;&#x5176;&#x5b58;&#x50a8;&#x5728;&#x53bb;&#x4e2d;&#x5fc3;&#x5316;&#x7f51;&#x7edc;&#x6216;&#x52a0;&#x5bc6;&#x94b1;&#x5305;&#x4e2d;&#xff0c;&#x8fd9;&#x4e9b;&#x94b1;&#x5305;&#x4f5c;&#x4e3a;&#x533a;&#x5757;&#x94fe;&#x4e0a;&#x7684;&#x6240;&#x6709;&#x6743;&#x8bc1;&#x660e;&#x3002;&#x4e0e; Web2 &#x4e2d;&#x516c;&#x53f8;&#x5728;&#x4e0d;&#x5206;&#x4eab;&#x4ef7;&#x503c;&#x7684;&#x60c5;&#x51b5;&#x4e0b;&#x4ece;&#x7528;&#x6237;&#x6570;&#x636e;&#x4e2d;&#x83b7;&#x5229;&#x4e0d;&#x540c;&#xff0c;Web3 &#x5141;&#x8bb8;&#x7528;&#x6237;&#x76f4;&#x63a5;&#x5c06;&#x5176;&#x5185;&#x5bb9;&#x8d27;&#x5e01;&#x5316;&#x3002;","children":[],"payload":{"tag":"li","lines":"2027,2028"}},{"content":"<strong>&#x6570;&#x636e;&#x7ba1;&#x7406;&#x4e0e;&#x9690;&#x79c1;</strong>&#xff1a;Web3 &#x901a;&#x8fc7;&#x52a0;&#x5bc6;&#x65b9;&#x6cd5;&#x548c;&#x53bb;&#x4e2d;&#x5fc3;&#x5316;&#x5b58;&#x50a8;&#x5b9e;&#x73b0;&#x66f4;&#x5f3a;&#x7684;&#x9690;&#x79c1;&#x4fdd;&#x62a4;&#x3002;&#x533a;&#x5757;&#x94fe;&#x4e0a;&#x7684;&#x4ea4;&#x6613;&#x662f;&#x53ef;&#x67e5;&#x770b;&#x7684;&#xff0c;&#x4f46;&#x4e2a;&#x4eba;&#x8be6;&#x7ec6;&#x4fe1;&#x606f;&#x4fdd;&#x6301;&#x79c1;&#x5bc6;&#xff0c;&#x9664;&#x975e;&#x7528;&#x6237;&#x9009;&#x62e9;&#x62ab;&#x9732;&#x3002;&#x7136;&#x800c;&#xff0c;&#x7528;&#x6237;&#x5b89;&#x5168;&#x53d6;&#x51b3;&#x4e8e;&#x8d1f;&#x8d23;&#x4efb;&#x5730;&#x7ba1;&#x7406;&#x79c1;&#x94a5;&#x3002;","children":[],"payload":{"tag":"li","lines":"2028,2029"}},{"content":"<strong>&#x8d27;&#x5e01;&#x5316;&#x6a21;&#x5f0f;</strong>&#xff1a;Web2 &#x4e3b;&#x8981;&#x4f9d;&#x8d56;&#x5e7f;&#x544a;&#x548c;&#x5e73;&#x53f0;&#x3002;&#x514d;&#x8d39;&#x670d;&#x52a1;&#x901a;&#x8fc7;&#x5c55;&#x793a;&#x5e7f;&#x544a;&#x6216;&#x51fa;&#x552e;&#x805a;&#x5408;&#x6570;&#x636e;&#x6765;&#x76c8;&#x5229;&#x3002;&#x521b;&#x4f5c;&#x8005;&#x4f9d;&#x8d56; YouTube &#x548c; Twitch &#x7b49;&#x5e73;&#x53f0;&#xff0c;&#x8fd9;&#x4e9b;&#x5e73;&#x53f0;&#x4f1a;&#x62bd;&#x53d6;&#x5927;&#x90e8;&#x5206;&#x5229;&#x6da6;&#xff0c;&#x95f4;&#x63a5;&#x901a;&#x8fc7;&#x7528;&#x6237;&#x6570;&#x636e;&#x548c;&#x6ce8;&#x610f;&#x529b;&#x6765;&#x8865;&#x507f;&#x7528;&#x6237;&#x3002;Web3 &#x5219;&#x8f6c;&#x5411;&#x4ee3;&#x5e01;&#x5316;&#x3001;&#x4ee5;&#x521b;&#x4f5c;&#x8005;&#x4e3a;&#x4e2d;&#x5fc3;&#x7684;&#x6a21;&#x5f0f;&#x3002;&#x4ef7;&#x503c;&#x901a;&#x8fc7;&#x4ee3;&#x5e01;&#x5206;&#x914d;&#xff0c;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x5728;&#x5e73;&#x53f0;&#x4e2d;&#x62e5;&#x6709;&#x6743;&#x76ca;&#x3002;&#x521b;&#x4f5c;&#x8005;&#x53ef;&#x4ee5;&#x901a;&#x8fc7; Play-to-Earn &#x6e38;&#x620f;&#x548c; NFT &#x76f4;&#x63a5;&#x4ece;&#x793e;&#x533a;&#x4e2d;&#x83b7;&#x5229;&#x3002;","children":[],"payload":{"tag":"li","lines":"2029,2030"}},{"content":"<strong>&#x4e92;&#x64cd;&#x4f5c;&#x6027;</strong>&#xff1a;Web3 &#x65e8;&#x5728;&#x5b9e;&#x73b0;&#x66f4;&#x5e7f;&#x6cdb;&#x7684;&#x4e92;&#x64cd;&#x4f5c;&#x6027;&#x3002;&#x8bb8;&#x591a;&#x53bb;&#x4e2d;&#x5fc3;&#x5316;&#x5e94;&#x7528;&#x4f7f;&#x7528;&#x5f00;&#x6e90;&#x6807;&#x51c6;&#xff0c;&#x8fd9;&#x610f;&#x5473;&#x7740;&#x4e00;&#x4e2a;&#x94b1;&#x5305;&#x53ef;&#x4ee5;&#x4e0e;&#x591a;&#x4e2a; dApp &#x4ea4;&#x4e92;&#x3002;","children":[],"payload":{"tag":"li","lines":"2030,2032"}}],"payload":{"tag":"h4","lines":"2023,2024"}},{"content":"<strong>B. dApp &#x5f00;&#x53d1;&#x4e2d;&#x7684;&#x524d;&#x7aef;&#x6311;&#x6218;&#x4e0e;&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>","children":[],"payload":{"tag":"h4","lines":"2032,2033"}},{"content":"<strong>&#x94b1;&#x5305;&#x96c6;&#x6210;&#x4e0e;&#x7528;&#x6237;&#x4f53;&#x9a8c; (UX)</strong>","children":[{"content":"<strong>&#x94b1;&#x5305;&#x8fde;&#x63a5;</strong>&#xff1a;&#x4e3a;&#x4e86;&#x7b80;&#x5316;&#x591a;&#x94b1;&#x5305;&#x652f;&#x6301;&#xff0c;Web3Modal &#x548c; RainbowKit &#x7b49;&#x5e93;&#x63d0;&#x4f9b;&#x4e86;&#x76f4;&#x89c2;&#x3001;&#x54cd;&#x5e94;&#x8fc5;&#x901f;&#x4e14;&#x53ef;&#x5b9a;&#x5236;&#x7684; UI &#x7ec4;&#x4ef6;&#x3002;&#x8fd9;&#x4e9b;&#x5de5;&#x5177;&#x8d1f;&#x8d23;&#x5904;&#x7406;&#x94b1;&#x5305;&#x7684;&#x8fde;&#x63a5;&#x548c;&#x65ad;&#x5f00;&#xff0c;&#x652f;&#x6301;&#x591a;&#x79cd;&#x94b1;&#x5305;&#xff0c;&#x4ea4;&#x6362;&#x8fde;&#x63a5;&#x94fe;&#xff0c;&#x89e3;&#x6790;&#x5730;&#x5740;&#x5230; ENS&#xff0c;&#x5e76;&#x663e;&#x793a;&#x4f59;&#x989d;&#x7b49;&#x3002;&#x5b83;&#x4eec;&#x901a;&#x8fc7;&#x8fd4;&#x56de;&#x6807;&#x51c6;&#x5316; EIP-1193 &#x63d0;&#x4f9b;&#x7a0b;&#x5e8f;&#x6765;&#x5de5;&#x4f5c;&#xff0c;&#x8be5;&#x63d0;&#x4f9b;&#x7a0b;&#x5e8f;&#x53ef;&#x4e0e; ethers.js&#x3001;viem &#x6216; wagmi &#x7b49;&#x5de5;&#x5177;&#x4e00;&#x8d77;&#x4f7f;&#x7528;&#x3002;","children":[],"payload":{"tag":"li","lines":"2050,2051"}},{"content":"<strong>&#x79c1;&#x94a5;&#x7ba1;&#x7406;</strong>&#xff1a;Web3 &#x5c06;&#x63a7;&#x5236;&#x6743;&#x8f6c;&#x79fb;&#x7ed9;&#x7528;&#x6237;&#xff0c;&#x8fd9;&#x610f;&#x5473;&#x7740;&#x7528;&#x6237;&#x9700;&#x8981;&#x8d1f;&#x8d23;&#x79c1;&#x94a5;&#x7ba1;&#x7406;&#x3002;<a href=\"https://www.binance.com/en/web3wallet\">Binance Web3 Wallet</a> &#x7b49;&#x81ea;&#x6258;&#x7ba1;&#x94b1;&#x5305;&#x5229;&#x7528;<strong>&#x591a;&#x65b9;&#x8ba1;&#x7b97;&#xff08;MPC&#xff09;&#x6280;&#x672f;</strong>&#x5c06;&#x79c1;&#x94a5;&#x5206;&#x6210;&#x4e09;&#x4e2a;&#x72ec;&#x7acb;&#x90e8;&#x5206;&#xff0c;&#x5206;&#x522b;&#x5b58;&#x50a8;&#x5728;&#x4e0d;&#x540c;&#x4f4d;&#x7f6e;&#xff08;&#x4e00;&#x4e2a;&#x5728; Binance &#x5904;&#xff0c;&#x4e00;&#x4e2a;&#x5728;&#x7528;&#x6237;&#x8bbe;&#x5907;&#x4e0a;&#xff0c;&#x7b2c;&#x4e09;&#x4e2a;&#x7531;&#x6062;&#x590d;&#x5bc6;&#x7801;&#x52a0;&#x5bc6;&#x5e76;&#x4fdd;&#x5b58;&#x5230;&#x4e2a;&#x4eba;&#x4e91;&#x5b58;&#x50a8;&#x4e2d;&#xff09;&#x3002;&#x8fd9;&#x79cd;&#x8bbe;&#x8ba1;&#x6d88;&#x9664;&#x4e86;&#x5bf9;&#x4f20;&#x7edf;&#x52a9;&#x8bb0;&#x8bcd;&#x7684;&#x9700;&#x6c42;&#xff0c;&#x7b80;&#x5316;&#x4e86;&#x6d41;&#x7a0b;&#x5e76;&#x964d;&#x4f4e;&#x4e86;&#x4eba;&#x4e3a;&#x9519;&#x8bef;&#x7684;&#x98ce;&#x9669;&#x3002;&#x8fd9;&#x79cd;&#x65b9;&#x6cd5;&#x65e8;&#x5728;&#x7b80;&#x5316;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#xff0c;&#x56e0;&#x4e3a;&#x4f20;&#x7edf;&#x7684;&#x79c1;&#x94a5;&#x548c;&#x52a9;&#x8bb0;&#x8bcd;&#x7ba1;&#x7406;&#x5bf9;&#x65b0;&#x7528;&#x6237;&#x6765;&#x8bf4;&#x662f;&#x4e3b;&#x8981;&#x969c;&#x788d;&#x3002;","children":[],"payload":{"tag":"li","lines":"2051,2052"}},{"content":"<strong>&#x7f51;&#x7edc;&#x5207;&#x6362;</strong>&#xff1a;Web3 &#x94b1;&#x5305;&#x901a;&#x5e38;&#x652f;&#x6301;&#x591a;&#x94fe;&#xff0c;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x5728;&#x4e00;&#x4e2a;&#x94b1;&#x5305;&#x5185;&#x7ba1;&#x7406;&#x6765;&#x81ea; 60 &#x591a;&#x4e2a;&#x516c;&#x5171;&#x533a;&#x5757;&#x94fe;&#x7684;&#x52a0;&#x5bc6;&#x8d27;&#x5e01;&#xff08;&#x4f8b;&#x5982; Binance Web3 Wallet&#xff09;&#x3002;&#x5185;&#x7f6e;&#x7684;&#x4ea4;&#x6362;&#x548c;&#x8de8;&#x94fe;&#x6865;&#x63a5;&#x529f;&#x80fd;&#x53ef;&#x4ee5;&#x4f18;&#x5316;&#x4ee3;&#x5e01;&#x4ef7;&#x683c;&#x548c; Gas &#x8d39;&#x7528;&#xff0c;&#x4fc3;&#x8fdb;&#x65e0;&#x7f1d;&#x7684;&#x8de8;&#x94fe;&#x64cd;&#x4f5c;&#x3002;dApp &#x5e94;&#x652f;&#x6301;&#x591a;&#x79cd;&#x94b1;&#x5305;&#x9009;&#x9879;&#xff0c;&#x5e76;&#x63d0;&#x4f9b;&#x6e05;&#x6670;&#x7684;&#x7528;&#x6237;&#x6307;&#x5bfc;&#x6765;&#x4f18;&#x96c5;&#x5730;&#x5904;&#x7406;&#x7f51;&#x7edc;&#x5207;&#x6362;&#x3002;","children":[],"payload":{"tag":"li","lines":"2052,2053"}},{"content":"<strong>&#x4ea4;&#x6613;&#x72b6;&#x6001;&#x5904;&#x7406;</strong>&#xff1a;&#x4ea4;&#x6613;&#x7684;&#x4e0d;&#x786e;&#x5b9a;&#x6027;&#x4f1a;&#x5f15;&#x53d1;&#x7528;&#x6237;&#x7126;&#x8651;&#xff0c;&#x56e0;&#x6b64;&#x5efa;&#x7acb;&#x5065;&#x58ee;&#x7684;&#x52a0;&#x8f7d;&#x548c;&#x53cd;&#x9988;&#x7cfb;&#x7edf;&#x81f3;&#x5173;&#x91cd;&#x8981;&#x3002;&#x8fd9;&#x5305;&#x62ec;<strong>&#x4e50;&#x89c2; UI &#x66f4;&#x65b0;</strong>&#xff08;&#x5bf9;&#x4e8e;&#x4f4e;&#x98ce;&#x9669;&#x64cd;&#x4f5c;&#x7acb;&#x5373;&#x66f4;&#x65b0; UI&#xff0c;&#x82e5;&#x4ea4;&#x6613;&#x5931;&#x8d25;&#x518d;&#x56de;&#x6eda;&#xff09;&#x3001;<strong>&#x5f85;&#x5b9a;&#x72b6;&#x6001;&#x52a8;&#x753b;</strong>&#xff08;&#x4f7f;&#x7528;&#x8fdb;&#x5ea6;&#x6761;&#x548c;&#x4eba;&#x6027;&#x5316;&#x6d88;&#x606f;&#xff0c;&#x5982;&#x201c;&#x6b63;&#x5728;&#x5904;&#x7406;&#x2026;&#x53ef;&#x80fd;&#x9700;&#x8981; 30 &#x79d2;&#x201d;&#xff09;&#x548c;<strong>&#x5b9e;&#x65f6;&#x901a;&#x77e5;</strong>&#xff08;&#x901a;&#x8fc7; WebSockets &#x6216;&#x63a8;&#x9001;&#x901a;&#x77e5;&#x63d0;&#x9192;&#x7528;&#x6237;&#x4ea4;&#x6613;&#x6210;&#x529f;&#x6216;&#x5931;&#x8d25;&#xff0c;&#x5373;&#x4f7f;&#x4ed6;&#x4eec;&#x5df2;&#x79bb;&#x5f00;&#x9875;&#x9762;&#xff09;&#x3002;&#x5f53;&#x4ea4;&#x6613;&#x5931;&#x8d25;&#x65f6;&#xff0c;&#x5e94;&#x63d0;&#x4f9b;&#x6e05;&#x6670;&#x7684;&#x9519;&#x8bef;&#x5904;&#x7406;&#x548c;&#x6307;&#x5bfc;&#xff0c;&#x4f8b;&#x5982;&#x201c;&#x4f60;&#x7684; Gas &#x4ef7;&#x683c;&#x4f3c;&#x4e4e;&#x592a;&#x4f4e;&#x4e86;&#x3002;&#x8bf7;&#x91cd;&#x8bd5;&#x6216;&#x8054;&#x7cfb;&#x652f;&#x6301;&#x201d;&#x3002;&#x4e3a;&#x4e86;&#x63d0;&#x9ad8;&#x4fe1;&#x4efb;&#xff0c;&#x5e94;&#x907f;&#x514d;&#x5c06;&#x4ea4;&#x6613;&#x72b6;&#x6001;&#x7684;&#x4e3b;&#x8981;&#x663e;&#x793a;&#x76f4;&#x63a5;&#x94fe;&#x63a5;&#x5230;&#x533a;&#x5757;&#x94fe;&#x6d4f;&#x89c8;&#x5668;&#xff0c;&#x800c;&#x662f;&#x5c06;&#x5176;&#x4f5c;&#x4e3a;&#x9644;&#x52a0;&#x4fe1;&#x606f;&#x63d0;&#x4f9b;&#x3002;","children":[],"payload":{"tag":"li","lines":"2053,2054"}},{"content":"<strong>&#x7b80;&#x5316;&#x533a;&#x5757;&#x94fe;&#x672f;&#x8bed;</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x666e;&#x901a;&#x7528;&#x6237;&#x800c;&#x8a00;&#xff0c;Web3 &#x7684;&#x4e13;&#x4e1a;&#x672f;&#x8bed;&#x53ef;&#x80fd;&#x4ee4;&#x4eba;&#x671b;&#x800c;&#x5374;&#x6b65;&#x3002;&#x524d;&#x7aef;&#x5e94;&#x62bd;&#x8c61;&#x6280;&#x672f;&#x590d;&#x6742;&#x6027;&#xff0c;&#x7528;&#x901a;&#x4fd7;&#x6613;&#x61c2;&#x7684;&#x8bed;&#x8a00;&#x89e3;&#x91ca;&#x533a;&#x5757;&#x94fe;&#x6982;&#x5ff5;&#xff0c;&#x5e76;&#x5bf9;&#x9ad8;&#x7ea7;&#x529f;&#x80fd;&#x8fdb;&#x884c;<strong>&#x6e10;&#x8fdb;&#x5f0f;&#x62ab;&#x9732;</strong>&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x5bf9;&#x4e8e;&#x65e5;&#x5e38;&#x64cd;&#x4f5c;&#xff0c;&#x5982;&#x4ee3;&#x5e01;&#x4ea4;&#x6362;&#x6216;&#x94fe;&#x4e0a;&#x8d44;&#x4ea7;&#x8f6c;&#x79fb;&#xff0c;&#x5e94;&#x7b80;&#x5316;&#x5176;&#x590d;&#x6742;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"2054,2055"}},{"content":"<strong>&#x524d;&#x7aef;&#x5b89;&#x5168;&#x6700;&#x4f73;&#x5b9e;&#x8df5;</strong>&#xff1a;Web3 &#x524d;&#x7aef;&#x7684;&#x5b89;&#x5168;&#x81f3;&#x5173;&#x91cd;&#x8981;&#xff0c;&#x56e0;&#x4e3a;&#x6f0f;&#x6d1e;&#x53ef;&#x80fd;&#x5bfc;&#x81f4;&#x4e0d;&#x53ef;&#x9006;&#x7684;&#x8d44;&#x4ea7;&#x635f;&#x5931;&#x3002;&#x4e3a;&#x4e86;&#x4fdd;&#x62a4;&#x7aef;&#x70b9;&#xff08;API &#x5bc6;&#x94a5;&#xff09;&#xff0c;&#x5e94;&#x5b9a;&#x671f;&#x8f6e;&#x6362;&#x5bc6;&#x94a5;&#x3002;&#x654f;&#x611f;&#x53d8;&#x91cf;&#x5e94;&#x5b58;&#x50a8;&#x5728;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x7684; .env &#x6587;&#x4ef6;&#x4e2d;&#xff0c;&#x800c;&#x4e0d;&#x662f;&#x5ba2;&#x6237;&#x7aef;&#x4ee3;&#x7801;&#x4e2d;&#xff0c;&#x5e76;&#x4e14;.env &#x6587;&#x4ef6;&#x4e0d;&#x5e94;&#x63d0;&#x4ea4;&#x5230;&#x516c;&#x5171;&#x4ed3;&#x5e93;&#x3002;&#x5e94;&#x4f7f;&#x7528;&#x540e;&#x7aef;&#x4ee3;&#x7406;&#x5904;&#x7406;&#x9700;&#x8981;&#x654f;&#x611f;&#x6570;&#x636e;&#x7684;&#x8bf7;&#x6c42;&#xff0c;&#x786e;&#x4fdd;&#x6570;&#x636e;&#x4e0d;&#x5728;&#x5ba2;&#x6237;&#x7aef;&#x5e94;&#x7528;&#x4e2d;&#x66b4;&#x9732;&#x3002;&#x5176;&#x4ed6;&#x5b89;&#x5168;&#x63aa;&#x65bd;&#x5305;&#x62ec;&#x65b9;&#x6cd5;&#x767d;&#x540d;&#x5355;&#x3001;JWT &#x6388;&#x6743;&#x3001;&#x591a;&#x4ee4;&#x724c;&#x8ba4;&#x8bc1;&#x3001;&#x57df;&#x540d;&#x63a9;&#x7801;&#x548c;&#x5f15;&#x7528;&#x8005;&#x767d;&#x540d;&#x5355;&#x3002;&#x524d;&#x7aef;&#x8fd8;&#x5e94;&#x9a8c;&#x8bc1;&#x6240;&#x6709;&#x7528;&#x6237;&#x8f93;&#x5165;&#xff0c;&#x4f7f;&#x7528;&#x4fe1;&#x8a89;&#x826f;&#x597d;&#x7684;&#x5e93;&#x548c;&#x6846;&#x67b6;&#xff0c;&#x63d0;&#x4f9b;&#x6307;&#x5411;&#x533a;&#x5757;&#x6d4f;&#x89c8;&#x5668;&#xff08;&#x5982; <a href=\"https://etherscan.io/\">Etherscan</a>&#xff09;&#x7684;&#x94fe;&#x63a5;&#x8fdb;&#x884c;&#x9a8c;&#x8bc1;&#xff0c;&#x5e76;&#x8fdb;&#x884c;&#x7528;&#x6237;&#x6559;&#x80b2;&#xff0c;&#x5305;&#x62ec;&#x89e3;&#x91ca;&#x4ea4;&#x6613;&#x7b7e;&#x540d;&#x539f;&#x56e0;&#x3001;&#x63d0;&#x9192;&#x68c0;&#x67e5; URL &#x9632;&#x9493;&#x9c7c;&#x4ee5;&#x53ca;&#x6f84;&#x6e05;&#x5408;&#x7ea6;&#x4ea4;&#x4e92;&#x7684;&#x542b;&#x4e49;&#x3002;","children":[],"payload":{"tag":"li","lines":"2055,2057"}}],"payload":{"tag":"h4","lines":"2046,2047"}}],"payload":{"tag":"h3","lines":"1993,1994"}},{"content":"<strong>&#x524d;&#x7aef; AI/ML &#x96c6;&#x6210;&#xff1a;&#x6d4f;&#x89c8;&#x5668;&#x5185;&#x673a;&#x5668;&#x5b66;&#x4e60;</strong>","children":[{"content":"<strong>A. &#x6d4f;&#x89c8;&#x5668;&#x7aef;&#x4e0e;&#x670d;&#x52a1;&#x5668;&#x7aef; ML &#x5bf9;&#x6bd4;</strong>","children":[{"content":"","children":[{"content":"<strong>&#x4f18;&#x70b9;</strong>&#xff1a;","children":[{"content":"<strong>&#x589e;&#x5f3a;&#x9690;&#x79c1;</strong>&#xff1a;&#x8f93;&#x5165;&#x6570;&#x636e;&#xff08;&#x5982;&#x672c;&#x5730;&#x56fe;&#x50cf;&#x6216;&#x89c6;&#x9891;&#x6d41;&#xff09;&#x4fdd;&#x7559;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x6c99;&#x7bb1;&#x5185;&#xff0c;&#x65e0;&#x9700;&#x53d1;&#x9001;&#x5230;&#x8fdc;&#x7a0b;&#x670d;&#x52a1;&#x5668;&#xff0c;&#x4ece;&#x800c;&#x589e;&#x5f3a;&#x4e86;&#x9690;&#x79c1;&#x4fdd;&#x62a4;&#x3002;","children":[],"payload":{"tag":"li","lines":"2080,2081"}},{"content":"<strong>&#x4f4e;&#x5ef6;&#x8fdf;</strong>&#xff1a;&#x672c;&#x5730;&#x5904;&#x7406;&#x4f7f;&#x5f97;&#x5bf9;&#x4f4e;&#x5ef6;&#x8fdf;&#x6709;&#x8981;&#x6c42;&#x7684; ML &#x7528;&#x4f8b;&#x6210;&#x4e3a;&#x53ef;&#x80fd;&#xff0c;&#x4f8b;&#x5982;&#x6c89;&#x6d78;&#x5f0f; Web &#x4f53;&#x9a8c;&#x4e2d;&#x7684;&#x5b9e;&#x65f6;&#x5bf9;&#x8c61;&#x68c0;&#x6d4b;&#x3002;","children":[],"payload":{"tag":"li","lines":"2081,2082"}},{"content":"<strong>&#x53bb;&#x4e2d;&#x5fc3;&#x5316;</strong>&#xff1a;&#x65e0;&#x9700;&#x4e91;&#x57fa;&#x7840;&#x8bbe;&#x65bd;&#x6295;&#x8d44;&#x5373;&#x53ef;&#x5927;&#x89c4;&#x6a21;&#x90e8;&#x7f72; ML &#x7cfb;&#x7edf;&#xff0c;&#x7b26;&#x5408;&#x53bb;&#x4e2d;&#x5fc3;&#x5316; Web &#x67b6;&#x6784;&#x7684;&#x7406;&#x5ff5;&#xff0c;&#x51cf;&#x5c11;&#x4e86;&#x5355;&#x70b9;&#x6545;&#x969c;&#x548c;&#x63a7;&#x5236;&#x3002;","children":[],"payload":{"tag":"li","lines":"2082,2083"}},{"content":"<strong>&#x6e10;&#x8fdb;&#x5f0f;&#x589e;&#x5f3a;</strong>&#xff1a;&#x901a;&#x8fc7;&#x5c06;&#x8ba1;&#x7b97;&#x5bc6;&#x96c6;&#x578b; ML &#x4efb;&#x52a1;&#x5378;&#x8f7d;&#x5230;&#x8bbe;&#x5907;&#x786c;&#x4ef6;&#x4e0a;&#xff0c;&#x4efb;&#x4f55; Web &#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x90fd;&#x53ef;&#x4ee5;&#x901a;&#x8fc7; ML &#x529f;&#x80fd;&#x5f97;&#x5230;&#x4e30;&#x5bcc;&#xff0c;&#x73b0;&#x6709; Web &#x5185;&#x5bb9;&#x4e5f;&#x53ef;&#x4ee5;&#x9010;&#x6b65;&#x589e;&#x5f3a;&#x3002;","children":[],"payload":{"tag":"li","lines":"2083,2084"}}],"payload":{"tag":"li","lines":"2079,2084"}},{"content":"<strong>&#x7f3a;&#x70b9;</strong>&#xff1a;","children":[{"content":"<strong>&#x786c;&#x4ef6;&#x52a0;&#x901f;&#x53d7;&#x9650;</strong>&#xff1a;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x7684; ML &#x63a8;&#x7406;&#x76ee;&#x524d;&#x4f7f;&#x7528; WebGL &#x56fe;&#x5f62; API&#xff0c;&#x4f46;&#x7f3a;&#x4e4f;&#x5bf9; ML &#x4e13;&#x7528;&#x786c;&#x4ef6;&#x52a0;&#x901f;&#x5668;&#x7684;&#x8bbf;&#x95ee;&#xff0c;&#x8fd9;&#x9650;&#x5236;&#x4e86;&#x4f53;&#x9a8c;&#x8303;&#x56f4;&#x5e76;&#x5bfc;&#x81f4;&#x5728;&#x73b0;&#x4ee3;&#x786c;&#x4ef6;&#x4e0a;&#x6548;&#x7387;&#x4f4e;&#x4e0b;&#x3002;","children":[],"payload":{"tag":"li","lines":"2085,2086"}},{"content":"<strong>&#x6027;&#x80fd;&#x4e0d;&#x5747;</strong>&#xff1a;&#x4e0d;&#x540c;&#x5730;&#x533a;&#x4e92;&#x8054;&#x7f51;&#x8fde;&#x63a5;&#x901f;&#x5ea6;&#x7684;&#x5dee;&#x5f02;&#x4ee5;&#x53ca;&#x751f;&#x4ea7;&#x7ea7;&#x6a21;&#x578b;&#x7684;&#x5927;&#x5c3a;&#x5bf8;&#xff0c;&#x610f;&#x5473;&#x7740;&#x8bbe;&#x5907;&#x7aef;&#x63a8;&#x7406;&#x7684;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#x53ef;&#x80fd;&#x4e0d;&#x5747;&#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"2086,2087"}},{"content":"<strong>&#x529f;&#x8017;&#x4e0e;&#x73af;&#x5883;&#x6210;&#x672c;</strong>&#xff1a;Web ML &#x5e94;&#x7528;&#x8ba1;&#x7b97;&#x548c;&#x80fd;&#x6e90;&#x5bc6;&#x96c6;&#xff0c;&#x5e7f;&#x6cdb;&#x91c7;&#x7528;&#x4f1a;&#x52a0;&#x5267;&#x73af;&#x5883;&#x95ee;&#x9898;&#x3002;&#x5c06;&#x5927;&#x578b; ML &#x6a21;&#x578b;&#x5206;&#x53d1;&#x5230;&#x6bcf;&#x4e2a;&#x5ba2;&#x6237;&#x7aef;&#x4f1a;&#x589e;&#x52a0;&#x73af;&#x5883;&#x6210;&#x672c;&#x3002;","children":[],"payload":{"tag":"li","lines":"2087,2088"}},{"content":"<strong>&#x6a21;&#x578b;&#x5927;&#x5c0f;&#x4e0e;&#x590d;&#x6742;&#x6027;</strong>&#xff1a;&#x5927;&#x578b;&#x6216;&#x590d;&#x6742;&#x6a21;&#x578b;&#x53ef;&#x80fd;&#x96be;&#x4ee5;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x9ad8;&#x6548;&#x8fd0;&#x884c;&#xff0c;&#x53ef;&#x80fd;&#x5bfc;&#x81f4;&#x6d4f;&#x89c8;&#x5668;&#x54cd;&#x5e94;&#x7f13;&#x6162;&#x751a;&#x81f3;&#x65e0;&#x54cd;&#x5e94;&#x3002;","children":[],"payload":{"tag":"li","lines":"2088,2089"}},{"content":"<strong>&#x6570;&#x636e;&#x4e22;&#x5931;&#x4e0e;&#x4e0d;&#x51c6;&#x786e;</strong>&#xff1a;&#x5ba2;&#x6237;&#x7aef;&#x8ddf;&#x8e2a;&#x5bb9;&#x6613;&#x53d7;&#x5230;&#x5e7f;&#x544a;&#x62e6;&#x622a;&#x5668;&#x3001;&#x6d4f;&#x89c8;&#x5668;&#x8bbe;&#x7f6e;&#x548c;&#x7f51;&#x7edc;&#x8fde;&#x63a5;&#x95ee;&#x9898;&#x7684;&#x5f71;&#x54cd;&#xff0c;&#x5bfc;&#x81f4;&#x6570;&#x636e;&#x4e22;&#x5931;&#x6216;&#x4e0d;&#x51c6;&#x786e;&#x3002;","children":[],"payload":{"tag":"li","lines":"2089,2091"}}],"payload":{"tag":"li","lines":"2084,2091"}}],"payload":{"tag":"ul","lines":"2079,2091"}},{"content":"","children":[{"content":"<strong>&#x4f18;&#x70b9;</strong>&#xff1a;","children":[{"content":"<strong>&#x6570;&#x636e;&#x51c6;&#x786e;&#x6027;&#x63d0;&#x9ad8;</strong>&#xff1a;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x8ddf;&#x8e2a;&#x4e0d;&#x53d7;&#x5ba2;&#x6237;&#x7aef;&#x95ee;&#x9898;&#xff08;&#x5982;&#x6d4f;&#x89c8;&#x5668;&#x7279;&#x5b9a;&#x95ee;&#x9898;&#x3001;&#x5e7f;&#x544a;&#x62e6;&#x622a;&#x5668;&#x548c; JavaScript &#x9519;&#x8bef;&#xff09;&#x7684;&#x5f71;&#x54cd;&#xff0c;&#x6570;&#x636e;&#x6536;&#x96c6;&#x66f4;&#x53ef;&#x9760;&#x3002;","children":[],"payload":{"tag":"li","lines":"2094,2095"}},{"content":"<strong>&#x5e7f;&#x544a;&#x62e6;&#x622a;&#x5668;&#x5f71;&#x54cd;&#x964d;&#x4f4e;</strong>&#xff1a;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x8ddf;&#x8e2a;&#x7ed5;&#x8fc7;&#x4e86;&#x5e7f;&#x544a;&#x62e6;&#x622a;&#x5668;&#x548c;&#x9690;&#x79c1;&#x6269;&#x5c55;&#x7684;&#x9650;&#x5236;&#x3002;","children":[],"payload":{"tag":"li","lines":"2095,2096"}},{"content":"<strong>&#x6570;&#x636e;&#x5b89;&#x5168;&#x6027;&#x589e;&#x5f3a;</strong>&#xff1a;&#x654f;&#x611f;&#x6570;&#x636e;&#x53ef;&#x4ee5;&#x5728;&#x4f20;&#x8f93;&#x5230;&#x5206;&#x6790;&#x5e73;&#x53f0;&#x4e4b;&#x524d;&#x8fdb;&#x884c;&#x5904;&#x7406;&#x548c;&#x533f;&#x540d;&#x5316;&#xff0c;&#x6709;&#x52a9;&#x4e8e;&#x907f;&#x514d;&#x4e2a;&#x4eba;&#x8eab;&#x4efd;&#x4fe1;&#x606f;&#xff08;PII&#xff09;&#x6cc4;&#x9732;&#x5e76;&#x7b26;&#x5408;&#x6570;&#x636e;&#x4fdd;&#x62a4;&#x6cd5;&#x5f8b;&#x3002;","children":[],"payload":{"tag":"li","lines":"2096,2097"}},{"content":"<strong>&#x66f4;&#x53ef;&#x9760;&#x7684;&#x8ddf;&#x8e2a;</strong>&#xff1a;&#x65e0;&#x8bba;&#x4e92;&#x8054;&#x7f51;&#x8fde;&#x63a5;&#x72b6;&#x6001;&#x5982;&#x4f55;&#x6216;&#x7528;&#x6237;&#x662f;&#x5426;&#x5173;&#x95ed;&#x6d4f;&#x89c8;&#x5668;&#xff0c;&#x670d;&#x52a1;&#x5668;&#x90fd;&#x80fd;&#x6b63;&#x786e;&#x8ddf;&#x8e2a;&#x6570;&#x636e;&#x3002;","children":[],"payload":{"tag":"li","lines":"2097,2098"}},{"content":"<strong>&#x66f4;&#x597d;&#x7684;&#x6027;&#x80fd;&#x548c;&#x901f;&#x5ea6;</strong>&#xff1a;&#x51cf;&#x5c11;&#x4e86;&#x5ba2;&#x6237;&#x7aef;&#x7684;&#x8d1f;&#x8f7d;&#xff0c;&#x4f7f;&#x9875;&#x9762;&#x52a0;&#x8f7d;&#x66f4;&#x5feb;&#xff0c;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#x66f4;&#x6d41;&#x7545;&#x3002;","children":[],"payload":{"tag":"li","lines":"2098,2099"}},{"content":"<strong>&#x66f4;&#x5168;&#x9762;&#x7684;&#x6570;&#x636e;&#x6536;&#x96c6;</strong>&#xff1a;&#x53ef;&#x4ee5;&#x6355;&#x83b7;&#x5ba2;&#x6237;&#x7aef;&#x8ddf;&#x8e2a;&#x53ef;&#x80fd;&#x9057;&#x6f0f;&#x7684;&#x5e55;&#x540e;&#x4ea4;&#x4e92;&#x3002;","children":[],"payload":{"tag":"li","lines":"2099,2100"}}],"payload":{"tag":"li","lines":"2093,2100"}},{"content":"<strong>&#x7f3a;&#x70b9;</strong>&#xff1a;","children":[{"content":"<strong>&#x5b9e;&#x73b0;&#x590d;&#x6742;</strong>&#xff1a;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x8ddf;&#x8e2a;&#x7684;&#x5b9e;&#x73b0;&#x901a;&#x5e38;&#x6bd4;&#x5ba2;&#x6237;&#x7aef;&#x8ddf;&#x8e2a;&#x66f4;&#x590d;&#x6742;&#x3002;","children":[],"payload":{"tag":"li","lines":"2101,2102"}},{"content":"<strong>&#x7528;&#x6237;&#x4ea4;&#x4e92;&#x7ec6;&#x8282;&#x4e0d;&#x8db3;</strong>&#xff1a;&#x96be;&#x4ee5;&#x6355;&#x83b7;&#x8be6;&#x7ec6;&#x7684;&#x5ba2;&#x6237;&#x7aef;&#x4ea4;&#x4e92;&#xff0c;&#x5982;&#x70b9;&#x51fb;&#x6216;&#x9f20;&#x6807;&#x79fb;&#x52a8;&#xff0c;&#x901a;&#x5e38;&#x9700;&#x8981;&#x989d;&#x5916;&#x7684;&#x5ba2;&#x6237;&#x7aef;&#x5de5;&#x5177;&#x6765;&#x5f25;&#x8865;&#x3002;","children":[],"payload":{"tag":"li","lines":"2102,2103"}},{"content":"<strong>&#x9690;&#x79c1;&#x98ce;&#x9669;</strong>&#xff1a;&#x5982;&#x679c;&#x6570;&#x636e;&#x5728;&#x79bb;&#x5f00;&#x8bbe;&#x5907;&#x540e;&#x672a;&#x5f97;&#x5230;&#x59a5;&#x5584;&#x5904;&#x7406;&#xff0c;&#x53ef;&#x80fd;&#x5b58;&#x5728;&#x9690;&#x79c1;&#x95ee;&#x9898;&#x3002;","children":[],"payload":{"tag":"li","lines":"2103,2105"}}],"payload":{"tag":"li","lines":"2100,2105"}}],"payload":{"tag":"ul","lines":"2093,2105"}}],"payload":{"tag":"h4","lines":"2075,2076"}},{"content":"<strong>B. &#x5e94;&#x7528;&#x793a;&#x4f8b;&#x4e0e;&#x6846;&#x67b6;</strong>","children":[{"content":"<strong>MediaPipe Solutions</strong>&#xff1a;&#x8fd9;&#x662f;&#x4e00;&#x5957;&#x5e93;&#x548c;&#x5de5;&#x5177;&#xff0c;&#x4f7f;&#x7528;&#x6237;&#x80fd;&#x591f;&#x5feb;&#x901f;&#x5728;&#x5176;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x4e2d;&#x5e94;&#x7528;&#x4eba;&#x5de5;&#x667a;&#x80fd;&#x548c;&#x673a;&#x5668;&#x5b66;&#x4e60;&#x6280;&#x672f;&#x3002;&#x8fd9;&#x4e9b;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x53ef;&#x4ee5;&#x7acb;&#x5373;&#x96c6;&#x6210;&#x5230;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x4e2d;&#xff0c;&#x6839;&#x636e;&#x9700;&#x8981;&#x8fdb;&#x884c;&#x5b9a;&#x5236;&#xff0c;&#x5e76;&#x8de8;&#x591a;&#x4e2a;&#x5f00;&#x53d1;&#x5e73;&#x53f0;&#x4f7f;&#x7528;&#x3002;MediaPipe Solutions &#x5305;&#x62ec;&#xff1a;","children":[{"content":"<strong>MediaPipe Tasks</strong>&#xff1a;&#x7528;&#x4e8e;&#x90e8;&#x7f72;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x7684;&#x8de8;&#x5e73;&#x53f0; API &#x548c;&#x5e93;&#x3002;","children":[],"payload":{"tag":"li","lines":"2112,2113"}},{"content":"<strong>MediaPipe Models</strong>&#xff1a;&#x9884;&#x8bad;&#x7ec3;&#x7684;&#x3001;&#x53ef;&#x76f4;&#x63a5;&#x7528;&#x4e8e;&#x6bcf;&#x4e2a;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x7684;&#x6a21;&#x578b;&#x3002;","children":[],"payload":{"tag":"li","lines":"2113,2114"}},{"content":"<strong>MediaPipe Model Maker</strong>&#xff1a;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x4f7f;&#x7528;&#x81ea;&#x5df1;&#x7684;&#x6570;&#x636e;&#x5b9a;&#x5236;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x6a21;&#x578b;&#x3002;","children":[],"payload":{"tag":"li","lines":"2114,2115"}},{"content":"<strong>MediaPipe Studio</strong>&#xff1a;&#x7528;&#x4e8e;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x53ef;&#x89c6;&#x5316;&#x3001;&#x8bc4;&#x4f30;&#x548c;&#x57fa;&#x51c6;&#x6d4b;&#x8bd5;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x3002;","children":[],"payload":{"tag":"li","lines":"2115,2117"}}],"payload":{"tag":"li","lines":"2111,2117"}},{"content":"<a href=\"https://www.tensorflow.org/js\"><strong>TensorFlow.js</strong></a>&#xff1a;&#x7528;&#x4e8e;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x548c; Node.js &#x4e2d;&#x8fdb;&#x884c;&#x673a;&#x5668;&#x5b66;&#x4e60;&#x7684; JavaScript &#x5e93;&#x3002;","children":[{"content":"<strong>&#x5b9e;&#x9645;&#x5e94;&#x7528;&#x793a;&#x4f8b;</strong>&#xff1a;TensorFlow.js &#x5728;&#x73b0;&#x5b9e;&#x4e16;&#x754c;&#x4e2d;&#x6709;&#x5e7f;&#x6cdb;&#x5e94;&#x7528;&#xff0c;&#x5305;&#x62ec;&#x5728;&#x7ebf;&#x804a;&#x5929;&#x4e2d;&#x7684;&#x5b9e;&#x65f6;&#x6bd2;&#x6027;&#x8fc7;&#x6ee4;&#x5668;&#xff08;InSpace &#x901a;&#x8fc7;&#x5728;&#x5ba2;&#x6237;&#x7aef;&#x6267;&#x884c;&#x6240;&#x6709;&#x63a8;&#x7406;&#x6765;&#x68c0;&#x6d4b;&#x6709;&#x6bd2;&#x8bc4;&#x8bba;&#xff0c;&#x65e0;&#x9700;&#x5c06;&#x6587;&#x672c;&#x53d1;&#x9001;&#x5230;&#x7b2c;&#x4e09;&#x65b9;&#x670d;&#x52a1;&#x5668;&#x8fdb;&#x884c;&#x5206;&#x7c7b;&#xff09;&#x3002;&#x5176;&#x4ed6;&#x793a;&#x4f8b;&#x5305;&#x62ec; YouTube &#x7684;&#x53e3;&#x578b;&#x540c;&#x6b65;&#x8bc4;&#x5206;&#xff08;&#x4f7f;&#x7528; FaceMesh &#x6a21;&#x578b;&#x4f30;&#x8ba1;&#x5507;&#x90e8;&#x5173;&#x952e;&#x70b9;&#xff09;&#x3001;&#x8868;&#x60c5;&#x7b26;&#x53f7;&#x5bfb;&#x5b9d;&#x3001;&#x7f51;&#x7edc;&#x6444;&#x50cf;&#x5934;&#x63a7;&#x5236;&#x5668;&#x3001;&#x53ef;&#x6559;&#x5b66;&#x673a;&#x5668;&#xff08;&#x65e0;&#x9700;&#x7f16;&#x7801;&#x5373;&#x53ef;&#x8bc6;&#x522b;&#x56fe;&#x50cf;&#x548c;&#x64ad;&#x653e;&#x58f0;&#x97f3;&#xff09;&#x3001;&#x52a8;&#x4f5c;&#x955c;&#x50cf;&#x3001;&#x5b9e;&#x65f6;&#x94a2;&#x7434;&#x6f14;&#x594f;&#xff08;&#x7531;&#x795e;&#x7ecf;&#x7f51;&#x7edc;&#x751f;&#x6210;&#xff09;&#x3001;Node.js &#x4e2d;&#x7684;&#x68d2;&#x7403;&#x6295;&#x7403;&#x7c7b;&#x578b;&#x9884;&#x6d4b;&#xff0c;&#x4ee5;&#x53ca;&#x8bad;&#x7ec3;&#x53ef;&#x89c6;&#x5316;&#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"2120,2122"}}],"payload":{"tag":"li","lines":"2119,2122"}}],"payload":{"tag":"h4","lines":"2107,2108"}}],"payload":{"tag":"h3","lines":"2061,2062"}},{"content":"<strong>&#x8fb9;&#x7f18;&#x8ba1;&#x7b97;&#xff1a;Cloudflare Workers&#x3001;Vercel Edge Functions&#x3001;Deno Deploy</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;&#x8fb9;&#x7f18;&#x8ba1;&#x7b97;&#x5e73;&#x53f0;&#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"2138,2143\">\n<thead data-lines=\"2138,2139\">\n<tr data-lines=\"2138,2139\">\n<th style=\"text-align:left\">&#x5e73;&#x53f0;&#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x63d0;&#x4f9b;&#x5546;</th>\n<th style=\"text-align:left\">&#x6838;&#x5fc3;&#x6280;&#x672f;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x6027;&#x80fd;&#xff08;&#x5ef6;&#x8fdf;&#xff0c;TTFB&#xff09;</th>\n<th style=\"text-align:left\">&#x57fa;&#x7840;&#x8bbe;&#x65bd;&#xff08;CDN&#xff0c;&#x591a;&#x4e91;&#xff09;</th>\n<th style=\"text-align:left\">&#x529f;&#x80fd;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"2140,2143\">\n<tr data-lines=\"2140,2141\">\n<td style=\"text-align:left\"><a href=\"https://workers.cloudflare.com/\"><strong>Cloudflare Workers</strong></a></td>\n<td style=\"text-align:left\">Cloudflare</td>\n<td style=\"text-align:left\">Workers</td>\n<td style=\"text-align:left\">&#x6781;&#x4f4e;&#x5ef6;&#x8fdf;</td>\n<td style=\"text-align:left\">&#x5168;&#x7403; CDN</td>\n<td style=\"text-align:left\">&#x65e0;&#x670d;&#x52a1;&#x5668;&#x51fd;&#x6570;&#xff0c;&#x80cc;&#x666f;&#x51fd;&#x6570;&#xff0c;D1 &#x6570;&#x636e;&#x5e93;&#xff0c;R2 &#x5b58;&#x50a8;</td>\n</tr>\n<tr data-lines=\"2141,2142\">\n<td style=\"text-align:left\"><a href=\"https://vercel.com/docs/functions/edge-functions\"><strong>Vercel Edge Functions</strong></a></td>\n<td style=\"text-align:left\"><a href=\"https://vercel.com/\">Vercel</a></td>\n<td style=\"text-align:left\"><a href=\"https://www.microsoft.com/en-us/edge\">Edge</a> Functions</td>\n<td style=\"text-align:left\">&#x8f83;&#x9ad8;&#x5ef6;&#x8fdf;</td>\n<td style=\"text-align:left\">&#x591a;&#x4e91; (GCP, AWS)&#xff0c;&#x5229;&#x7528; <a href=\"https://workers.cloudflare.com/\">Cloudflare Workers</a></td>\n<td style=\"text-align:left\">&#x65e0;&#x670d;&#x52a1;&#x5668;&#x51fd;&#x6570;&#xff0c;&#x80cc;&#x666f;&#x51fd;&#x6570;&#xff0c;Postgres &#x6570;&#x636e;&#x5e93;&#xff0c;&#x5b9e;&#x65f6;&#x5206;&#x6790;</td>\n</tr>\n<tr data-lines=\"2142,2143\">\n<td style=\"text-align:left\"><a href=\"https://deno.com/deploy\"><strong>Deno Deploy</strong></a></td>\n<td style=\"text-align:left\">Deno</td>\n<td style=\"text-align:left\">Deno Runtime</td>\n<td style=\"text-align:left\">&#x826f;&#x597d;</td>\n<td style=\"text-align:left\">Deno &#x8fb9;&#x7f18;&#x57fa;&#x7840;&#x8bbe;&#x65bd;</td>\n<td style=\"text-align:left\">&#x65e0;&#x670d;&#x52a1;&#x5668;&#x51fd;&#x6570;&#xff0c;&#x80cc;&#x666f;&#x51fd;&#x6570;&#xff0c;&#x5185;&#x7f6e; KV &#x5b58;&#x50a8;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"2138,2143"}}],"payload":{"tag":"h4","lines":"2136,2137"}}],"payload":{"tag":"h3","lines":"2126,2127"}},{"content":"<strong>&#x8bbe;&#x5907;&#x96c6;&#x6210;&#xff1a;Web Bluetooth&#x3001;Web USB&#x3001;WebHID&#x3001;Generic Sensor API</strong>","children":[{"content":"<strong>&#x8868;&#x683c;&#xff1a;Web &#x8bbe;&#x5907;&#x96c6;&#x6210; API &#x6bd4;&#x8f83;</strong>","children":[{"content":"<table data-lines=\"2160,2166\">\n<thead data-lines=\"2160,2161\">\n<tr data-lines=\"2160,2161\">\n<th style=\"text-align:left\">API &#x540d;&#x79f0;</th>\n<th style=\"text-align:left\">&#x76ee;&#x7684;&#xff08;&#x8bbe;&#x5907;&#x7c7b;&#x578b;&#xff09;</th>\n<th style=\"text-align:left\">&#x5173;&#x952e;&#x529f;&#x80fd;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style=\"text-align:left\">&#x5b89;&#x5168;&#x8981;&#x6c42;&#xff08;<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS\">HTTPS</a>&#xff0c;&#x7528;&#x6237;&#x6743;&#x9650;&#xff09;</th>\n<th style=\"text-align:left\">&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#xff08;&#x5b9e;&#x9a8c;&#x6027;/&#x57fa;&#x7ebf;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines=\"2162,2166\">\n<tr data-lines=\"2162,2163\">\n<td style=\"text-align:left\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Generic_Sensor_API\"><strong>Generic Sensor API</strong></a></td>\n<td style=\"text-align:left\">&#x8bbe;&#x5907;&#x4f20;&#x611f;&#x5668;&#xff08;&#x52a0;&#x901f;&#x5ea6;&#x8ba1;&#x3001;&#x9640;&#x87ba;&#x4eea;&#xff09;</td>\n<td style=\"text-align:left\">&#x8bfb;&#x53d6;&#x4f20;&#x611f;&#x5668;&#x6570;&#x636e;&#xff0c;&#x4e8b;&#x4ef6;&#x76d1;&#x542c;</td>\n<td style=\"text-align:left\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS\">HTTPS</a>&#xff0c;&#x7528;&#x6237;&#x6743;&#x9650;</td>\n<td style=\"text-align:left\">&#x57fa;&#x7ebf;</td>\n</tr>\n<tr data-lines=\"2163,2164\">\n<td style=\"text-align:left\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API\"><strong>Web Bluetooth API</strong></a></td>\n<td style=\"text-align:left\">&#x4f4e;&#x529f;&#x8017;&#x84dd;&#x7259;&#x8bbe;&#x5907;</td>\n<td style=\"text-align:left\">&#x8fde;&#x63a5; BLE &#x8bbe;&#x5907;&#xff0c;&#x8bfb;&#x5199; GATT &#x7279;&#x6027;</td>\n<td style=\"text-align:left\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS\">HTTPS</a>&#xff0c;&#x7528;&#x6237;&#x6743;&#x9650;</td>\n<td style=\"text-align:left\">&#x5b9e;&#x9a8c;&#x6027;</td>\n</tr>\n<tr data-lines=\"2164,2165\">\n<td style=\"text-align:left\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebUSB_API\"><strong>Web USB API</strong></a></td>\n<td style=\"text-align:left\">&#x975e;&#x6807;&#x51c6; USB &#x8bbe;&#x5907;</td>\n<td style=\"text-align:left\">&#x8fde;&#x63a5; USB &#x8bbe;&#x5907;&#xff0c;&#x8bfb;&#x5199;&#x6570;&#x636e;&#xff0c;&#x7b80;&#x5316;&#x9a71;&#x52a8;&#x5b89;&#x88c5;</td>\n<td style=\"text-align:left\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS\">HTTPS</a>&#xff0c;&#x7528;&#x6237;&#x6743;&#x9650;</td>\n<td style=\"text-align:left\">&#x5b9e;&#x9a8c;&#x6027;</td>\n</tr>\n<tr data-lines=\"2165,2166\">\n<td style=\"text-align:left\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/API/WebHID_API\"><strong>WebHID API</strong></a></td>\n<td style=\"text-align:left\">&#x4eba;&#x673a;&#x63a5;&#x53e3;&#x8bbe;&#x5907;&#xff08;&#x6e38;&#x620f;&#x624b;&#x67c4;&#xff09;</td>\n<td style=\"text-align:left\">&#x8fde;&#x63a5; HID &#x8bbe;&#x5907;&#xff0c;&#x53d1;&#x9001;/&#x63a5;&#x6536;&#x62a5;&#x544a;</td>\n<td style=\"text-align:left\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS\">HTTPS</a>&#xff0c;&#x7528;&#x6237;&#x6743;&#x9650;</td>\n<td style=\"text-align:left\">&#x5b9e;&#x9a8c;&#x6027;</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"2160,2166"}}],"payload":{"tag":"h4","lines":"2158,2159"}},{"content":"<strong>A. Web Bluetooth API</strong>","children":[{"content":"<strong>&#x7528;&#x4f8b;</strong>&#xff1a;&#x8be5; API &#x4f7f;&#x5f97; Web &#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x80fd;&#x591f;&#x4e0e;&#x9644;&#x8fd1;&#x7684;&#x4f4e;&#x529f;&#x8017;&#x84dd;&#x7259;&#xff08;BLE&#xff09;&#x8bbe;&#x5907;&#xff08;&#x84dd;&#x7259; 4.0 &#x6216;&#x66f4;&#x9ad8;&#x7248;&#x672c;&#xff09;&#x8fdb;&#x884c;&#x4ea4;&#x4e92;&#xff0c;&#x4f8b;&#x5982;&#x5fc3;&#x7387;&#x76d1;&#x6d4b;&#x5668;&#x3001;&#x667a;&#x80fd;&#x706f;&#x6ce1;&#x3001;&#x96f6;&#x552e;&#x4ead;&#x548c;&#x73a9;&#x5177;&#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"2173,2174"}},{"content":"<strong>&#x529f;&#x80fd;</strong>&#xff1a;&#x5f00;&#x53d1;&#x8005;&#x53ef;&#x4ee5;&#x8bf7;&#x6c42;&#x84dd;&#x7259;&#x8bbe;&#x5907;&#xff08;<code>navigator.bluetooth.requestDevice</code>&#xff09;&#xff0c;&#x8fde;&#x63a5;&#x5230;&#x5176;&#x901a;&#x7528;&#x5c5e;&#x6027;&#x914d;&#x7f6e;&#x6587;&#x4ef6;&#xff08;GATT&#xff09;&#x670d;&#x52a1;&#x5668;&#xff0c;&#x8bfb;&#x53d6;&#x548c;&#x5199;&#x5165;&#x84dd;&#x7259;&#x7279;&#x6027;&#xff0c;&#x63a5;&#x6536; GATT &#x901a;&#x77e5;&#xff0c;&#x4ee5;&#x53ca;&#x65ad;&#x5f00;&#x8fde;&#x63a5;&#x3002;&#x5b83;&#x8fd8;&#x652f;&#x6301;&#x8bfb;&#x53d6;&#x548c;&#x5199;&#x5165;&#x84dd;&#x7259;&#x63cf;&#x8ff0;&#x7b26;&#xff0c;&#x8fd9;&#x4e9b;&#x63cf;&#x8ff0;&#x7b26;&#x63d0;&#x4f9b;&#x6709;&#x5173;&#x7279;&#x6027;&#x503c;&#x7684;&#x9644;&#x52a0;&#x4fe1;&#x606f;&#x3002;","children":[],"payload":{"tag":"li","lines":"2174,2175"}},{"content":"<strong>&#x5b89;&#x5168;&#x4e0e;&#x9690;&#x79c1;</strong>&#xff1a;Web Bluetooth API &#x8981;&#x6c42;&#x5728;&#x5b89;&#x5168;&#x4e0a;&#x4e0b;&#x6587;&#xff08;HTTPS&#xff09;&#x4e2d;&#x8fd0;&#x884c;&#x3002;<code>requestDevice()</code> &#x65b9;&#x6cd5;&#x5fc5;&#x987b;&#x7531;&#x7528;&#x6237;&#x624b;&#x52bf;&#xff08;&#x4f8b;&#x5982;&#x70b9;&#x51fb;&#xff09;&#x89e6;&#x53d1;&#xff0c;&#x4ee5;&#x4f5c;&#x4e3a;&#x5b89;&#x5168;&#x9884;&#x9632;&#x63aa;&#x65bd;&#x3002;&#x8be5; API &#x65e8;&#x5728;&#x901a;&#x8fc7;&#x9650;&#x5236;&#x5bf9;&#x67d0;&#x4e9b;&#x96be;&#x4ee5;&#x5b89;&#x5168;&#x5b9e;&#x73b0;&#x7684;&#x84dd;&#x7259;&#x529f;&#x80fd;&#x7684;&#x8bbf;&#x95ee;&#xff0c;&#x6700;&#x5927;&#x9650;&#x5ea6;&#x5730;&#x51cf;&#x5c11;&#x6076;&#x610f;&#x7f51;&#x7ad9;&#x66b4;&#x9732;&#x7684;&#x8bbe;&#x5907;&#x653b;&#x51fb;&#x9762;&#x3002;","children":[],"payload":{"tag":"li","lines":"2175,2176"}},{"content":"<strong>&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#x4e0e;&#x6210;&#x719f;&#x5ea6;</strong>&#xff1a;Web Bluetooth API &#x7684;&#x53ef;&#x7528;&#x6027;&#x6709;&#x9650;&#xff0c;&#x88ab;&#x8ba4;&#x4e3a;&#x662f;&#x5b9e;&#x9a8c;&#x6027;&#x6280;&#x672f;&#xff0c;&#x5e76;&#x975e;&#x6240;&#x6709;&#x4e3b;&#x6d41;&#x6d4f;&#x89c8;&#x5668;&#x90fd;&#x652f;&#x6301;&#x3002;&#x4f8b;&#x5982;&#xff0c;Chrome&#x3001;Edge &#x548c; Opera&#xff08;&#x684c;&#x9762;&#x548c; Android&#xff09;&#x63d0;&#x4f9b;&#x90e8;&#x5206;&#x652f;&#x6301;&#xff0c;&#x800c; Firefox &#x548c; Safari &#x5219;&#x4e0d;&#x652f;&#x6301;&#x3002;&#x5c3d;&#x7ba1;&#x5982;&#x6b64;&#xff0c;&#x8be5;&#x6807;&#x51c6;&#x6b63;&#x5728;&#x6210;&#x719f;&#xff0c;&#x5de5;&#x5177;&#x96c6;&#x548c; API &#x6b63;&#x5728;&#x6d8c;&#x73b0;&#xff0c;Chrome 53 &#x5df2;&#x901a;&#x8fc7; Origin Trial&#xff08;&#x6e90;&#x8bd5;&#x7528;&#xff09;&#x652f;&#x6301;&#x84dd;&#x7259;&#x529f;&#x80fd;&#x3002;","children":[],"payload":{"tag":"li","lines":"2176,2177"}},{"content":"<strong>Electron &#x73af;&#x5883;</strong>&#xff1a;&#x5728; Electron &#x4e2d;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x53ef;&#x4ee5;&#x901a;&#x8fc7; webContents &#x4e0a;&#x7684; <code>select-bluetooth-device</code> &#x4e8b;&#x4ef6;&#x6765;&#x9009;&#x62e9;&#x84dd;&#x7259;&#x8bbe;&#x5907;&#xff0c;&#x5e76;&#x901a;&#x8fc7; ses.<code>setDevicePermissionHandler</code> &#x63d0;&#x4f9b;&#x9ed8;&#x8ba4;&#x6743;&#x9650;&#xff0c;&#x4ece;&#x800c;&#x5b9e;&#x73b0;&#x66f4;&#x7075;&#x6d3b;&#x7684;&#x8bbe;&#x5907;&#x7ba1;&#x7406;&#x3002;","children":[],"payload":{"tag":"li","lines":"2177,2179"}}],"payload":{"tag":"h4","lines":"2169,2170"}},{"content":"<strong>B. WebUSB API</strong>","children":[{"content":"<strong>&#x7528;&#x4f8b;</strong>&#xff1a;&#x8be5; API &#x4e3b;&#x8981;&#x7528;&#x4e8e;&#x8bbf;&#x95ee;&#x975e;&#x6807;&#x51c6; USB &#x8bbe;&#x5907;&#xff0c;&#x5982;&#x79d1;&#x5b66;&#x548c;&#x5de5;&#x4e1a;&#x8bbe;&#x5907;&#xff0c;&#x4ee5;&#x53ca;&#x56fa;&#x4ef6;&#x5237;&#x5199;&#xff08;&#x6697;&#x793a;&#x6027;&#x5730;&#x63d0;&#x53ca;&#xff09;&#x3002;&#x503c;&#x5f97;&#x6ce8;&#x610f;&#x7684;&#x662f;&#xff0c;&#x5b83;&#x4e0d;&#x652f;&#x6301;&#x5e38;&#x89c1;&#x7684;&#x8bbe;&#x5907;&#xff0c;&#x5982;&#x7f51;&#x7edc;&#x6444;&#x50cf;&#x5934;&#x3001;HID &#x8bbe;&#x5907;&#x6216;&#x5927;&#x5bb9;&#x91cf;&#x5b58;&#x50a8;&#x8bbe;&#x5907;&#x3002;","children":[],"payload":{"tag":"li","lines":"2183,2184"}},{"content":"<strong>&#x5b89;&#x5168;&#x4e0e;&#x9690;&#x79c1;</strong>&#xff1a;&#x4e0e; Web Bluetooth &#x7c7b;&#x4f3c;&#xff0c;WebUSB API &#x4e5f;&#x4ec5;&#x5728;&#x5b89;&#x5168;&#x4e0a;&#x4e0b;&#x6587;&#xff08;HTTPS&#xff09;&#x4e2d;&#x8fd0;&#x884c;&#x3002;<code>requestDevice()</code> &#x65b9;&#x6cd5;&#x540c;&#x6837;&#x9700;&#x8981;&#x7528;&#x6237;&#x624b;&#x52bf;&#x89e6;&#x53d1;&#x3002;&#x6743;&#x9650;&#x7b56;&#x7565;&#xff08;Permissions Policy&#xff09;&#x673a;&#x5236;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x9009;&#x62e9;&#x6027;&#x5730;&#x542f;&#x7528;&#x6216;&#x7981;&#x7528; WebUSB &#x7b49;&#x6d4f;&#x89c8;&#x5668;&#x529f;&#x80fd;&#x548c; API&#x3002;&#x7136;&#x800c;&#xff0c;WebUSB &#x4e5f;&#x5e26;&#x6765;&#x6f5c;&#x5728;&#x7684;&#x5b89;&#x5168;&#x9690;&#x60a3;&#xff0c;&#x4f8b;&#x5982;&#x7f51;&#x7ad9;&#x53ef;&#x80fd;&#x5229;&#x7528;&#x5b83;&#x5efa;&#x7acb; ADB &#x8fde;&#x63a5;&#x5e76;&#x5165;&#x4fb5;&#x8fde;&#x63a5;&#x7684; Android &#x624b;&#x673a;&#x3002;","children":[],"payload":{"tag":"li","lines":"2184,2185"}},{"content":"<strong>&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#x4e0e;&#x6210;&#x719f;&#x5ea6;</strong>&#xff1a;WebUSB API &#x7684;&#x53ef;&#x7528;&#x6027;&#x6709;&#x9650;&#xff0c;&#x540c;&#x6837;&#x88ab;&#x89c6;&#x4e3a;&#x5b9e;&#x9a8c;&#x6027;&#x6280;&#x672f;&#x3002;Chrome&#x3001;Edge &#x548c; Opera&#xff08;&#x684c;&#x9762;&#x548c; Android&#xff09;&#x4ece;&#x65e9;&#x671f;&#x7248;&#x672c;&#x5f00;&#x59cb;&#x63d0;&#x4f9b;&#x5168;&#x9762;&#x652f;&#x6301;&#xff0c;&#x4f46; Firefox &#x548c; Safari &#x4ecd;&#x4e0d;&#x652f;&#x6301;&#x3002;&#x8be5; API &#x5df2;&#x5728; Chrome 61 &#x4e2d;&#x9ed8;&#x8ba4;&#x542f;&#x7528;&#x3002;","children":[],"payload":{"tag":"li","lines":"2185,2186"}},{"content":"<strong>Electron &#x73af;&#x5883;</strong>&#xff1a;&#x5728; Electron &#x4e2d;&#xff0c;WebUSB API &#x63d0;&#x4f9b;&#x4e86; <code>select-usb-device</code> &#x4e8b;&#x4ef6;&#xff0c;&#x4ee5;&#x53ca; <code>usb-device-added</code>&#x3001;<code>usb-device-removed</code> &#x548c; <code>usb-device-revoked</code> &#x4e8b;&#x4ef6;&#x6765;&#x5904;&#x7406;&#x8bbe;&#x5907;&#x7684;&#x63d2;&#x62d4;&#x548c;&#x64a4;&#x9500;&#x3002;ses.<code>setDevicePermissionHandler</code> &#x53ef;&#x7528;&#x4e8e;&#x8bbe;&#x7f6e;&#x9ed8;&#x8ba4;&#x6743;&#x9650;&#xff0c;ses.<code>setUSBProtectedClassesHandler</code> &#x5219;&#x5141;&#x8bb8;&#x4f7f;&#x7528;&#x9ed8;&#x8ba4;&#x4e0d;&#x53ef;&#x7528;&#x7684;&#x53d7;&#x4fdd;&#x62a4; USB &#x7c7b;&#x3002;","children":[],"payload":{"tag":"li","lines":"2186,2188"}}],"payload":{"tag":"h4","lines":"2179,2180"}},{"content":"<strong>C. WebHID API</strong>","children":[{"content":"<strong>&#x7528;&#x4f8b;</strong>&#xff1a;WebHID API &#x53ef;&#x7528;&#x4e8e;&#x8bbf;&#x95ee;&#x5404;&#x79cd; HID &#x8bbe;&#x5907;&#xff0c;&#x5305;&#x62ec; Elgato StreamDeck &#x548c; blink(1) &#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"2192,2193"}},{"content":"<strong>&#x5b89;&#x5168;&#x4e0e;&#x9690;&#x79c1;</strong>&#xff1a;&#x8bbe;&#x5907;&#x8bbf;&#x95ee;&#x5fc5;&#x987b;&#x901a;&#x8fc7;&#x6d4f;&#x89c8;&#x5668;&#x63d0;&#x4f9b;&#x7684;&#x9009;&#x62e9;&#x5668;&#x5bf9;&#x8bdd;&#x6846;&#x7531;&#x7528;&#x6237;&#x6388;&#x4e88;&#xff0c;&#x7c7b;&#x4f3c;&#x4e8e; WebUSB &#x548c; Web Bluetooth&#x3002;&#x503c;&#x5f97;&#x6ce8;&#x610f;&#x7684;&#x662f;&#xff0c;&#x751f;&#x6210;&#x53d7;&#x4fe1;&#x4efb;&#x8f93;&#x5165;&#xff08;&#x4f8b;&#x5982;&#x952e;&#x76d8;&#x3001;&#x9f20;&#x6807;&#x3001;&#x5b89;&#x5168;&#x5bc6;&#x94a5;&#xff09;&#x7684;&#x8bbe;&#x5907;&#x901a;&#x5e38;&#x4e0d;&#x4f1a;&#x88ab;&#x8bbf;&#x95ee;&#xff0c;&#x56e0;&#x4e3a;&#x5b83;&#x4eec;&#x5728;&#x9876;&#x5c42; HID &#x96c6;&#x5408;&#x4e2d;&#x88ab;&#x89c6;&#x4e3a;&#x53d7;&#x4fdd;&#x62a4;&#x7528;&#x9014;&#x3002;","children":[],"payload":{"tag":"li","lines":"2193,2194"}},{"content":"<strong>&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#x4e0e;&#x6210;&#x719f;&#x5ea6;</strong>&#xff1a;WebHID API &#x4e5f;&#x662f;&#x4e00;&#x9879;&#x5b9e;&#x9a8c;&#x6027;&#x6280;&#x672f;&#xff0c;&#x53ef;&#x7528;&#x6027;&#x6709;&#x9650;&#x3002;&#x5b83;&#x5728; Chrome&#x3001;Edge &#x548c; Opera &#x7684;&#x684c;&#x9762;&#x7248;&#x672c;&#x4e2d;&#x4ece;&#x8f83;&#x65b0;&#x7248;&#x672c;&#xff08;&#x4f8b;&#x5982; Chrome 89&#x3001;Opera 75&#xff09;&#x5f00;&#x59cb;&#x63d0;&#x4f9b;&#x5168;&#x9762;&#x652f;&#x6301;&#xff0c;&#x4f46;&#x5728;&#x79fb;&#x52a8;&#x8bbe;&#x5907;&#x3001;Firefox &#x548c; Safari &#x4e2d;&#x4ecd;&#x4e0d;&#x53d7;&#x652f;&#x6301;&#x3002;&#x5c3d;&#x7ba1;&#x5b83;&#x4e0d;&#x662f; W3C &#x6807;&#x51c6;&#xff0c;&#x4f46;&#x81ea; Chrome 89&#xff08;2021 &#x5e74; 3 &#x6708;&#xff09;&#x8d77;&#x5df2;&#x9ed8;&#x8ba4;&#x542f;&#x7528;&#x3002;","children":[],"payload":{"tag":"li","lines":"2194,2195"}},{"content":"<strong>Electron &#x73af;&#x5883;</strong>&#xff1a;&#x5728; Electron &#x4e2d;&#xff0c;WebHID API &#x63d0;&#x4f9b;&#x4e86; <code>select-hid-device</code> &#x4e8b;&#x4ef6;&#x6765;&#x9009;&#x62e9; HID &#x8bbe;&#x5907;&#xff0c;&#x4ee5;&#x53ca; <code>hid-device-added</code> &#x548c; <code>hid-device-removed</code> &#x4e8b;&#x4ef6;&#x6765;&#x5904;&#x7406;&#x8bbe;&#x5907;&#x63d2;&#x62d4;&#x3002;<code>ses.setDevicePermissionHandler</code> &#x53ef;&#x7528;&#x4e8e;&#x63d0;&#x4f9b;&#x9ed8;&#x8ba4;&#x6743;&#x9650;&#xff0c;&#x800c; <code>ses.setPermissionCheckHandler</code> &#x5219;&#x53ef;&#x7528;&#x4e8e;&#x7981;&#x7528;&#x7279;&#x5b9a;&#x6765;&#x6e90;&#x7684; HID &#x8bbf;&#x95ee;&#x3002;Electron &#x9ed8;&#x8ba4;&#x4f7f;&#x7528;&#x4e0e; Chromium &#x76f8;&#x540c;&#x7684;&#x9ed1;&#x540d;&#x5355;&#xff0c;&#x4f46;&#x53ef;&#x4ee5;&#x901a;&#x8fc7; <code>disable-hid-blocklist</code> &#x6807;&#x5fd7;&#x8986;&#x76d6;&#x3002;","children":[],"payload":{"tag":"li","lines":"2195,2197"}}],"payload":{"tag":"h4","lines":"2188,2189"}}],"payload":{"tag":"h3","lines":"2146,2147"}}],"payload":{"tag":"h2","lines":"1761,1762"}},{"content":"<strong>VII. &#x6301;&#x7eed;&#x5b66;&#x4e60;&#x548c;&#x804c;&#x4e1a;&#x53d1;&#x5c55;</strong>","children":[{"content":"<strong>A. &#x56e2;&#x961f;&#x534f;&#x4f5c;&#x4e0e;&#x6c9f;&#x901a; (Soft Skills)</strong>","children":[{"content":"<strong>&#x4ee3;&#x7801;&#x89c4;&#x8303;</strong>","children":[{"content":"<a href=\"https://www.conventionalcommits.org/\"><strong>Conventional Commits</strong></a>&#xff1a;&#x4e00;&#x79cd;&#x8f7b;&#x91cf;&#x7ea7;&#x7684;&#x63d0;&#x4ea4;&#x6d88;&#x606f;&#x7ea6;&#x5b9a;&#xff0c;&#x4e3a;&#x63d0;&#x4ea4;&#x5386;&#x53f2;&#x63d0;&#x4f9b;&#x660e;&#x786e;&#x7684;&#x7ed3;&#x6784;&#x5316;&#x4fe1;&#x606f;&#xff0c;&#x4fbf;&#x4e8e;&#x81ea;&#x52a8;&#x5316;&#x5de5;&#x5177;&#xff08;&#x5982;&#x751f;&#x6210;&#x66f4;&#x65b0;&#x65e5;&#x5fd7;&#x3001;&#x81ea;&#x52a8;&#x7248;&#x672c;&#x53d1;&#x5e03;&#xff09;&#x5904;&#x7406;&#x3002;&#x4f8b;&#x5982;&#xff1a;feat: add user login functionality&#x3001;fix: correct typo in button text&#x3002;","children":[],"payload":{"tag":"li","lines":"2213,2214"}},{"content":"<strong>&#x4ee3;&#x7801;&#x98ce;&#x683c;&#x6307;&#x5357;</strong>&#xff1a;&#x56e2;&#x961f;&#x5e94;&#x5236;&#x5b9a;&#x5e76;&#x9075;&#x5faa;&#x7edf;&#x4e00;&#x7684;&#x4ee3;&#x7801;&#x98ce;&#x683c;&#x6307;&#x5357;&#xff08;&#x5982; Airbnb JavaScript Style Guide&#x3001;Google Style Guide&#xff09;&#xff0c;&#x6db5;&#x76d6;&#x547d;&#x540d;&#x7ea6;&#x5b9a;&#x3001;&#x7f29;&#x8fdb;&#x3001;&#x62ec;&#x53f7;&#x4f7f;&#x7528;&#x3001;&#x6ce8;&#x91ca;&#x89c4;&#x8303;&#x7b49;&#x3002;&#x901a;&#x8fc7; Prettier&#x3001;ESLint &#x7b49;&#x5de5;&#x5177;&#x8fdb;&#x884c;&#x81ea;&#x52a8;&#x5316;&#x68c0;&#x67e5;&#x548c;&#x683c;&#x5f0f;&#x5316;&#xff0c;&#x5f3a;&#x5236;&#x6267;&#x884c;&#x8fd9;&#x4e9b;&#x89c4;&#x8303;&#x3002;","children":[],"payload":{"tag":"li","lines":"2214,2216"}}],"payload":{"tag":"h4","lines":"2209,2210"}},{"content":"<strong>&#x6587;&#x6863;&#x6587;&#x5316;</strong>","children":[{"content":"<strong>&#x5982;&#x4f55;&#x7f16;&#x5199;&#x6e05;&#x6670;&#x7684;&#x6280;&#x672f;&#x3001;API &#x548c;&#x7ec4;&#x4ef6;&#x6587;&#x6863;</strong>&#xff1a;","children":[{"content":"<strong>&#x6280;&#x672f;&#x6587;&#x6863;</strong>&#xff1a;&#x89e3;&#x91ca;&#x7cfb;&#x7edf;&#x67b6;&#x6784;&#x3001;&#x8bbe;&#x8ba1;&#x51b3;&#x7b56;&#x3001;&#x6280;&#x672f;&#x9009;&#x578b;&#x7406;&#x7531;&#x3001;&#x90e8;&#x7f72;&#x6d41;&#x7a0b;&#x7b49;&#xff0c;&#x5e2e;&#x52a9;&#x65b0;&#x6210;&#x5458;&#x5feb;&#x901f;&#x4e0a;&#x624b;&#xff0c;&#x8001;&#x6210;&#x5458;&#x7406;&#x89e3;&#x7cfb;&#x7edf;&#x5168;&#x8c8c;&#x3002;","children":[],"payload":{"tag":"li","lines":"2221,2222"}},{"content":"<strong>API &#x6587;&#x6863;</strong>&#xff1a;&#x6e05;&#x6670;&#x63cf;&#x8ff0;&#x6bcf;&#x4e2a; API &#x7684;&#x8bf7;&#x6c42;/&#x54cd;&#x5e94;&#x683c;&#x5f0f;&#x3001;&#x53c2;&#x6570;&#x3001;&#x9519;&#x8bef;&#x7801;&#x3001;&#x8ba4;&#x8bc1;&#x65b9;&#x5f0f;&#x7b49;&#x3002;&#x4f7f;&#x7528; <a href=\"https://swagger.io/\">Swagger</a>/<a href=\"https://www.openapis.org/\">OpenAPI</a> &#x7b49;&#x5de5;&#x5177;&#x53ef;&#x4ee5;&#x81ea;&#x52a8;&#x5316;&#x751f;&#x6210;&#x548c;&#x7ef4;&#x62a4;&#x3002;","children":[],"payload":{"tag":"li","lines":"2222,2223"}},{"content":"<strong>&#x7ec4;&#x4ef6;&#x6587;&#x6863;</strong>&#xff1a;&#x5bf9;&#x4e8e; UI &#x7ec4;&#x4ef6;&#x5e93;&#xff0c;&#x6bcf;&#x4e2a;&#x7ec4;&#x4ef6;&#x5e94;&#x6709;&#x8be6;&#x7ec6;&#x7684; Props&#x3001;Events&#x3001;Slots &#x8bf4;&#x660e;&#xff0c;&#x4ee5;&#x53ca;&#x4f7f;&#x7528;&#x793a;&#x4f8b;&#x3001;&#x8bbe;&#x8ba1;&#x89c4;&#x8303;&#x548c;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#x6307;&#x5357;&#x3002;Storybook &#x662f;&#x6d41;&#x884c;&#x7684;&#x7ec4;&#x4ef6;&#x6587;&#x6863;&#x5de5;&#x5177;&#x3002;","children":[],"payload":{"tag":"li","lines":"2223,2224"}}],"payload":{"tag":"li","lines":"2220,2224"}},{"content":"<strong>&#x6587;&#x6863;&#x5373;&#x4ee3;&#x7801; (Docs as Code)</strong>&#xff1a;&#x5c06;&#x6587;&#x6863;&#x4e0e;&#x4ee3;&#x7801;&#x4e00;&#x8d77;&#x5b58;&#x50a8;&#x5728;&#x7248;&#x672c;&#x63a7;&#x5236;&#x7cfb;&#x7edf;&#x4e2d;&#xff0c;&#x901a;&#x8fc7; Markdown&#x3001;reStructuredText &#x7b49;&#x8f7b;&#x91cf;&#x7ea7;&#x6807;&#x8bb0;&#x8bed;&#x8a00;&#x7f16;&#x5199;&#xff0c;&#x5e76;&#x96c6;&#x6210;&#x5230; CI/CD &#x6d41;&#x7a0b;&#x4e2d;&#xff0c;&#x786e;&#x4fdd;&#x6587;&#x6863;&#x4e0e;&#x4ee3;&#x7801;&#x540c;&#x6b65;&#x66f4;&#x65b0;&#x3002;","children":[],"payload":{"tag":"li","lines":"2224,2226"}}],"payload":{"tag":"h4","lines":"2216,2217"}},{"content":"<strong>Code Review &#x7684;&#x827a;&#x672f;</strong>","children":[{"content":"<strong>&#x5982;&#x4f55;&#x7ed9;&#x4e88;&#x548c;&#x63a5;&#x53d7;&#x6709;&#x5efa;&#x8bbe;&#x6027;&#x7684;&#x53cd;&#x9988;</strong>&#xff1a;","children":[{"content":"<strong>&#x7ed9;&#x4e88;&#x53cd;&#x9988;</strong>&#xff1a;","children":[{"content":"<strong>&#x5177;&#x4f53;&#x4e14;&#x5ba2;&#x89c2;</strong>&#xff1a;&#x6307;&#x51fa;&#x5177;&#x4f53;&#x4ee3;&#x7801;&#x884c;&#x548c;&#x95ee;&#x9898;&#xff0c;&#x907f;&#x514d;&#x6a21;&#x7cca;&#x8bc4;&#x4ef7;&#x3002;","children":[],"payload":{"tag":"li","lines":"2232,2233"}},{"content":"<strong>&#x4ee5;&#x95ee;&#x9898;&#x4e3a;&#x5bfc;&#x5411;</strong>&#xff1a;&#x63d0;&#x51fa;&#x95ee;&#x9898;&#x800c;&#x975e;&#x76f4;&#x63a5;&#x7ed9;&#x51fa;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#xff0c;&#x9f13;&#x52b1;&#x4f5c;&#x8005;&#x601d;&#x8003;&#x3002;","children":[],"payload":{"tag":"li","lines":"2233,2234"}},{"content":"<strong>&#x5173;&#x6ce8;&#x70b9;&#x5206;&#x79bb;</strong>&#xff1a;&#x533a;&#x5206;&#x5f3a;&#x5236;&#x4fee;&#x6539;&#xff08;bug&#x3001;&#x5b89;&#x5168;&#xff09;&#x548c;&#x5efa;&#x8bae;&#xff08;&#x98ce;&#x683c;&#x3001;&#x4f18;&#x5316;&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"2234,2235"}},{"content":"<strong>&#x79ef;&#x6781;&#x8bed;&#x6c14;</strong>&#xff1a;&#x4fdd;&#x6301;&#x4e13;&#x4e1a;&#x548c;&#x5c0a;&#x91cd;&#x7684;&#x6001;&#x5ea6;&#xff0c;&#x907f;&#x514d;&#x4eba;&#x8eab;&#x653b;&#x51fb;&#x3002;","children":[],"payload":{"tag":"li","lines":"2235,2236"}},{"content":"<strong>&#x89e3;&#x91ca;&#x539f;&#x56e0;</strong>&#xff1a;&#x8bf4;&#x660e;&#x4e3a;&#x4ec0;&#x4e48;&#x67d0;&#x4e2a;&#x6539;&#x52a8;&#x662f;&#x5fc5;&#x8981;&#x7684;&#xff0c;&#x63d0;&#x4f9b;&#x80cc;&#x666f;&#x4fe1;&#x606f;&#x3002;","children":[],"payload":{"tag":"li","lines":"2236,2237"}}],"payload":{"tag":"li","lines":"2231,2237"}},{"content":"<strong>&#x63a5;&#x53d7;&#x53cd;&#x9988;</strong>&#xff1a;","children":[{"content":"<strong>&#x5f00;&#x653e;&#x5fc3;&#x6001;</strong>&#xff1a;&#x5c06;&#x53cd;&#x9988;&#x89c6;&#x4e3a;&#x5b66;&#x4e60;&#x548c;&#x6539;&#x8fdb;&#x7684;&#x673a;&#x4f1a;&#x3002;","children":[],"payload":{"tag":"li","lines":"2238,2239"}},{"content":"<strong>&#x63d0;&#x95ee;&#x6f84;&#x6e05;</strong>&#xff1a;&#x4e0d;&#x7406;&#x89e3;&#x65f6;&#x53ca;&#x65f6;&#x63d0;&#x95ee;&#xff0c;&#x786e;&#x4fdd;&#x7406;&#x89e3;&#x53cd;&#x9988;&#x610f;&#x56fe;&#x3002;","children":[],"payload":{"tag":"li","lines":"2239,2240"}},{"content":"<strong>&#x8ba8;&#x8bba;&#x800c;&#x975e;&#x4e89;&#x8fa9;</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x4e0d;&#x540c;&#x610f;&#x89c1;&#xff0c;&#x8fdb;&#x884c;&#x6280;&#x672f;&#x8ba8;&#x8bba;&#xff0c;&#x5bfb;&#x6c42;&#x6700;&#x4f73;&#x65b9;&#x6848;&#x3002;","children":[],"payload":{"tag":"li","lines":"2240,2241"}},{"content":"<strong>&#x53ca;&#x65f6;&#x54cd;&#x5e94;</strong>&#xff1a;&#x5c3d;&#x5feb;&#x5904;&#x7406;&#x53cd;&#x9988;&#x6216;&#x7ed9;&#x51fa;&#x5904;&#x7406;&#x8ba1;&#x5212;&#x3002;","children":[],"payload":{"tag":"li","lines":"2241,2242"}}],"payload":{"tag":"li","lines":"2237,2242"}}],"payload":{"tag":"li","lines":"2230,2242"}},{"content":"<strong>Code Review &#x6d41;&#x7a0b;&#x4f18;&#x5316;</strong>&#xff1a;","children":[{"content":"<strong>&#x5c0f;&#x800c;&#x9891;&#x7e41;&#x7684; PR</strong>&#xff1a;&#x6bcf;&#x6b21;&#x63d0;&#x4ea4;&#x7684; PR &#x5e94;&#x5c3d;&#x53ef;&#x80fd;&#x5c0f;&#xff0c;&#x805a;&#x7126;&#x5355;&#x4e00;&#x529f;&#x80fd;&#x6216;&#x4fee;&#x590d;&#xff0c;&#x4fbf;&#x4e8e;&#x5feb;&#x901f;&#x5ba1;&#x67e5;&#x3002;","children":[],"payload":{"tag":"li","lines":"2243,2244"}},{"content":"<strong>&#x81ea;&#x52a8;&#x5316;&#x8f85;&#x52a9;</strong>&#xff1a;&#x5229;&#x7528; Linting&#x3001;&#x683c;&#x5f0f;&#x5316;&#x3001;&#x5355;&#x5143;&#x6d4b;&#x8bd5;&#x7b49;&#x81ea;&#x52a8;&#x5316;&#x5de5;&#x5177;&#x51cf;&#x8f7b;&#x4eba;&#x5de5;&#x5ba1;&#x67e5;&#x8d1f;&#x62c5;&#x3002;","children":[],"payload":{"tag":"li","lines":"2244,2245"}},{"content":"<strong>&#x660e;&#x786e;&#x5ba1;&#x67e5;&#x76ee;&#x6807;</strong>&#xff1a;&#x8ba9;&#x5ba1;&#x67e5;&#x8005;&#x77e5;&#x9053;&#x5e94;&#x8be5;&#x5173;&#x6ce8;&#x54ea;&#x4e9b;&#x65b9;&#x9762;&#x3002;","children":[],"payload":{"tag":"li","lines":"2245,2247"}}],"payload":{"tag":"li","lines":"2242,2247"}}],"payload":{"tag":"h4","lines":"2226,2227"}},{"content":"<strong>&#x9879;&#x76ee;&#x7ba1;&#x7406;&#x4e0e;&#x8de8;&#x56e2;&#x961f;&#x6c9f;&#x901a;</strong>","children":[{"content":"<strong>&#x9879;&#x76ee;&#x7ba1;&#x7406;</strong>&#xff1a;&#x719f;&#x6089;&#x654f;&#x6377;&#x5f00;&#x53d1;&#x65b9;&#x6cd5;&#xff08;<a href=\"https://www.scrum.org/\">Scrum</a>&#x3001;<a href=\"https://www.atlassian.com/agile/kanban\">Kanban</a>&#xff09;&#xff0c;&#x53c2;&#x4e0e;&#x9700;&#x6c42;&#x5206;&#x6790;&#x3001;&#x4efb;&#x52a1;&#x62c6;&#x89e3;&#x3001;&#x8fdb;&#x5ea6;&#x8ddf;&#x8e2a;&#x548c;&#x98ce;&#x9669;&#x7ba1;&#x7406;&#x3002;","children":[],"payload":{"tag":"li","lines":"2251,2252"}},{"content":"<strong>&#x8de8;&#x56e2;&#x961f;&#x6c9f;&#x901a;</strong>&#xff1a;","children":[{"content":"<strong>&#x6e05;&#x6670;&#x8868;&#x8fbe;</strong>&#xff1a;&#x5c06;&#x590d;&#x6742;&#x6280;&#x672f;&#x95ee;&#x9898;&#x8f6c;&#x5316;&#x4e3a;&#x975e;&#x6280;&#x672f;&#x4eba;&#x5458;&#x80fd;&#x7406;&#x89e3;&#x7684;&#x8bed;&#x8a00;&#x3002;","children":[],"payload":{"tag":"li","lines":"2253,2254"}},{"content":"<strong>&#x79ef;&#x6781;&#x503e;&#x542c;</strong>&#xff1a;&#x7406;&#x89e3;&#x5176;&#x4ed6;&#x56e2;&#x961f;&#x7684;&#x9700;&#x6c42;&#x548c;&#x7ea6;&#x675f;&#x3002;","children":[],"payload":{"tag":"li","lines":"2254,2255"}},{"content":"<strong>&#x4e3b;&#x52a8;&#x540c;&#x6b65;</strong>&#xff1a;&#x5b9a;&#x671f;&#x4e0e;&#x76f8;&#x5173;&#x56e2;&#x961f;&#x540c;&#x6b65;&#x8fdb;&#x5c55;&#x3001;&#x8ba8;&#x8bba;&#x63a5;&#x53e3;&#x53d8;&#x66f4;&#x3001;&#x534f;&#x8c03;&#x53d1;&#x5e03;&#x8ba1;&#x5212;&#x3002;","children":[],"payload":{"tag":"li","lines":"2255,2256"}},{"content":"<strong>&#x8bc6;&#x522b;&#x4f9d;&#x8d56;</strong>&#xff1a;&#x660e;&#x786e;&#x9879;&#x76ee;&#x95f4;&#x7684;&#x4f9d;&#x8d56;&#x5173;&#x7cfb;&#xff0c;&#x63d0;&#x524d;&#x6c9f;&#x901a;&#xff0c;&#x907f;&#x514d;&#x963b;&#x585e;&#x3002;","children":[],"payload":{"tag":"li","lines":"2256,2258"}}],"payload":{"tag":"li","lines":"2252,2258"}}],"payload":{"tag":"h4","lines":"2247,2248"}}],"payload":{"tag":"h3","lines":"2205,2206"}},{"content":"<strong>B. &#x9879;&#x76ee;&#x5b9e;&#x6218;&#x4e0e;&#x6210;&#x957f;</strong>","children":[{"content":"<strong>&#x4ece;&#x96f6;&#x5230;&#x4e00;&#x7684;&#x5b8c;&#x6574;&#x9879;&#x76ee;&#x5f00;&#x53d1;&#x6d41;&#x7a0b;&#x793a;&#x4f8b;</strong>","children":[{"content":"<strong>&#x9700;&#x6c42;&#x5206;&#x6790;&#x4e0e;&#x4ea7;&#x54c1;&#x8bbe;&#x8ba1;</strong>&#xff1a;&#x4e0e;&#x4ea7;&#x54c1;&#x7ecf;&#x7406;&#x3001;&#x8bbe;&#x8ba1;&#x5e08;&#x6c9f;&#x901a;&#xff0c;&#x7406;&#x89e3;&#x4e1a;&#x52a1;&#x9700;&#x6c42;&#xff0c;&#x53c2;&#x4e0e; UI/UX &#x8bbe;&#x8ba1;&#x8bc4;&#x5ba1;&#x3002;","children":[],"payload":{"tag":"li","lines":"2268,2269"}},{"content":"<strong>&#x6280;&#x672f;&#x9009;&#x578b;&#x4e0e;&#x67b6;&#x6784;&#x8bbe;&#x8ba1;</strong>&#xff1a;&#x6839;&#x636e;&#x9879;&#x76ee;&#x9700;&#x6c42;&#x3001;&#x56e2;&#x961f;&#x7ecf;&#x9a8c;&#x548c;&#x672a;&#x6765;&#x6269;&#x5c55;&#x6027;&#xff0c;&#x9009;&#x62e9;&#x5408;&#x9002;&#x7684;&#x524d;&#x7aef;&#x6846;&#x67b6;&#x3001;&#x5e93;&#x3001;&#x6784;&#x5efa;&#x5de5;&#x5177;&#x3001;&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x65b9;&#x6848;&#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"2269,2270"}},{"content":"<strong>&#x5f00;&#x53d1;&#x73af;&#x5883;&#x642d;&#x5efa;</strong>&#xff1a;&#x914d;&#x7f6e;&#x4ee3;&#x7801;&#x7f16;&#x8f91;&#x5668;&#x3001;&#x7248;&#x672c;&#x63a7;&#x5236;&#xff08;Git&#xff09;&#x3001;&#x5305;&#x7ba1;&#x7406;&#x5668;&#xff08;npm/yarn&#xff09;&#x3001;&#x6784;&#x5efa;&#x5de5;&#x5177;&#xff08;Webpack/Vite&#xff09;&#x3001;&#x672c;&#x5730;&#x5f00;&#x53d1;&#x670d;&#x52a1;&#x5668;&#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"2270,2271"}},{"content":"<strong>&#x7ec4;&#x4ef6;&#x5316;&#x5f00;&#x53d1;</strong>&#xff1a;&#x6839;&#x636e;&#x8bbe;&#x8ba1;&#x7a3f;&#x62c6;&#x5206; UI &#x7ec4;&#x4ef6;&#xff0c;&#x5b9e;&#x73b0;&#x53ef;&#x590d;&#x7528;&#x3001;&#x53ef;&#x7ef4;&#x62a4;&#x7684;&#x7ec4;&#x4ef6;&#x3002;","children":[],"payload":{"tag":"li","lines":"2271,2272"}},{"content":"<strong>&#x6570;&#x636e;&#x4ea4;&#x4e92;</strong>&#xff1a;&#x4e0e;&#x540e;&#x7aef;&#x5b9a;&#x4e49; API &#x63a5;&#x53e3;&#xff0c;&#x5b9e;&#x73b0;&#x6570;&#x636e;&#x8bf7;&#x6c42;&#x3001;&#x54cd;&#x5e94;&#x5904;&#x7406;&#x3001;&#x9519;&#x8bef;&#x5904;&#x7406;&#x548c;&#x6570;&#x636e;&#x7f13;&#x5b58;&#x3002;","children":[],"payload":{"tag":"li","lines":"2272,2273"}},{"content":"<strong>&#x72b6;&#x6001;&#x7ba1;&#x7406;</strong>&#xff1a;&#x9009;&#x62e9;&#x5408;&#x9002;&#x7684;&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x65b9;&#x6848;&#xff08;&#x5982; Redux&#x3001;Vuex&#x3001;Zustand&#xff09;&#xff0c;&#x7ba1;&#x7406;&#x5e94;&#x7528;&#x5168;&#x5c40;&#x72b6;&#x6001;&#x3002;","children":[],"payload":{"tag":"li","lines":"2273,2274"}},{"content":"<strong>&#x8def;&#x7531;&#x7ba1;&#x7406;</strong>&#xff1a;&#x914d;&#x7f6e;&#x524d;&#x7aef;&#x8def;&#x7531;&#xff0c;&#x5b9e;&#x73b0;&#x9875;&#x9762;&#x95f4;&#x7684;&#x5bfc;&#x822a;&#x548c; URL &#x540c;&#x6b65;&#x3002;","children":[],"payload":{"tag":"li","lines":"2274,2275"}},{"content":"<strong>&#x6027;&#x80fd;&#x4f18;&#x5316;</strong>&#xff1a;&#x5728;&#x5f00;&#x53d1;&#x8fc7;&#x7a0b;&#x4e2d;&#x5173;&#x6ce8;&#x4ee3;&#x7801;&#x5206;&#x5272;&#x3001;&#x61d2;&#x52a0;&#x8f7d;&#x3001;&#x56fe;&#x7247;&#x4f18;&#x5316;&#x3001;&#x8bf7;&#x6c42;&#x4f18;&#x5316;&#x7b49;&#x3002;","children":[],"payload":{"tag":"li","lines":"2275,2276"}},{"content":"<strong>&#x6d4b;&#x8bd5;</strong>&#xff1a;&#x7f16;&#x5199;&#x5355;&#x5143;&#x6d4b;&#x8bd5;&#x3001;&#x96c6;&#x6210;&#x6d4b;&#x8bd5;&#x3001;&#x7aef;&#x5230;&#x7aef;&#x6d4b;&#x8bd5;&#xff0c;&#x786e;&#x4fdd;&#x4ee3;&#x7801;&#x8d28;&#x91cf;&#x548c;&#x529f;&#x80fd;&#x6b63;&#x786e;&#x6027;&#x3002;","children":[],"payload":{"tag":"li","lines":"2276,2277"}},{"content":"<strong>&#x90e8;&#x7f72;&#x4e0e;&#x8fd0;&#x7ef4;</strong>&#xff1a;&#x914d;&#x7f6e; CI/CD &#x6d41;&#x6c34;&#x7ebf;&#xff0c;&#x5b9e;&#x73b0;&#x81ea;&#x52a8;&#x5316;&#x6784;&#x5efa;&#x3001;&#x6d4b;&#x8bd5;&#x548c;&#x90e8;&#x7f72;&#xff0c;&#x5e76;&#x96c6;&#x6210;&#x7ebf;&#x4e0a;&#x76d1;&#x63a7;&#x3002;","children":[],"payload":{"tag":"li","lines":"2277,2278"}},{"content":"<strong>&#x8fed;&#x4ee3;&#x4e0e;&#x7ef4;&#x62a4;</strong>&#xff1a;&#x6839;&#x636e;&#x7528;&#x6237;&#x53cd;&#x9988;&#x548c;&#x4e1a;&#x52a1;&#x9700;&#x6c42;&#xff0c;&#x6301;&#x7eed;&#x8fed;&#x4ee3;&#x65b0;&#x529f;&#x80fd;&#xff0c;&#x4fee;&#x590d; bug&#xff0c;&#x4f18;&#x5316;&#x6027;&#x80fd;&#x3002;","children":[],"payload":{"tag":"li","lines":"2278,2280"}}],"payload":{"tag":"h4","lines":"2264,2265"}},{"content":"<strong>&#x5e38;&#x89c1;&#x95ee;&#x9898;&#xff08;&#x8e29;&#x5751;&#xff09;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x96c6;</strong>","children":[{"content":"<strong>&#x6027;&#x80fd;&#x95ee;&#x9898;</strong>&#xff1a;&#x9875;&#x9762;&#x52a0;&#x8f7d;&#x6162;&#x3001;&#x5361;&#x987f;&#x3001;&#x5185;&#x5b58;&#x6cc4;&#x6f0f;&#x3002;","children":[{"content":"<strong>&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>&#xff1a;&#x4f7f;&#x7528;&#x6027;&#x80fd;&#x5206;&#x6790;&#x5de5;&#x5177;&#xff08;Lighthouse&#x3001;Webpack Bundle Analyzer&#xff09;&#x5b9a;&#x4f4d;&#x74f6;&#x9888;&#xff1b;&#x4f18;&#x5316;&#x56fe;&#x7247;&#x548c;&#x5b57;&#x4f53;&#xff1b;&#x5b9e;&#x65bd;&#x4ee3;&#x7801;&#x5206;&#x5272;&#x548c;&#x61d2;&#x52a0;&#x8f7d;&#xff1b;&#x51cf;&#x5c11; DOM &#x64cd;&#x4f5c;&#xff1b;&#x5229;&#x7528;&#x865a;&#x62df;&#x5217;&#x8868;&#xff1b;&#x4f18;&#x5316;&#x7f51;&#x7edc;&#x8bf7;&#x6c42;&#x3002;","children":[],"payload":{"tag":"li","lines":"2285,2286"}}],"payload":{"tag":"li","lines":"2284,2286"}},{"content":"<strong>&#x517c;&#x5bb9;&#x6027;&#x95ee;&#x9898;</strong>&#xff1a;&#x4e0d;&#x540c;&#x6d4f;&#x89c8;&#x5668;&#x3001;&#x8bbe;&#x5907;&#x3001;&#x64cd;&#x4f5c;&#x7cfb;&#x7edf;&#x4e0a;&#x7684;&#x8868;&#x73b0;&#x4e0d;&#x4e00;&#x81f4;&#x3002;","children":[{"content":"<strong>&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>&#xff1a;&#x4f7f;&#x7528; Babel &#x8fdb;&#x884c; JS &#x517c;&#x5bb9;&#x6027;&#x8f6c;&#x6362;&#xff1b;&#x4f7f;&#x7528; Autoprefixer &#x5904;&#x7406; CSS &#x524d;&#x7f00;&#xff1b;&#x8fdb;&#x884c;&#x591a;&#x6d4f;&#x89c8;&#x5668;&#x6d4b;&#x8bd5;&#xff1b;&#x9075;&#x5faa; Web &#x6807;&#x51c6;&#x3002;","children":[],"payload":{"tag":"li","lines":"2287,2288"}}],"payload":{"tag":"li","lines":"2286,2288"}},{"content":"<strong>&#x6784;&#x5efa;/&#x90e8;&#x7f72;&#x95ee;&#x9898;</strong>&#xff1a;&#x6784;&#x5efa;&#x5931;&#x8d25;&#x3001;&#x90e8;&#x7f72;&#x73af;&#x5883;&#x5dee;&#x5f02;&#x3001;CI/CD &#x6d41;&#x6c34;&#x7ebf;&#x6545;&#x969c;&#x3002;","children":[{"content":"<strong>&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>&#xff1a;&#x719f;&#x6089;&#x6784;&#x5efa;&#x5de5;&#x5177;&#x914d;&#x7f6e;&#xff1b;&#x4f7f;&#x7528;&#x5bb9;&#x5668;&#x5316;&#x6280;&#x672f;&#xff08;Docker&#xff09;&#x7edf;&#x4e00;&#x73af;&#x5883;&#xff1b;&#x68c0;&#x67e5; CI/CD &#x65e5;&#x5fd7;&#xff1b;&#x914d;&#x7f6e;&#x73af;&#x5883;&#x53d8;&#x91cf;&#x3002;","children":[],"payload":{"tag":"li","lines":"2289,2290"}}],"payload":{"tag":"li","lines":"2288,2290"}},{"content":"<strong>&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x6df7;&#x4e71;</strong>&#xff1a;&#x6570;&#x636e;&#x6d41;&#x590d;&#x6742;&#x3001;&#x72b6;&#x6001;&#x4e0d;&#x540c;&#x6b65;&#x3001;&#x7ec4;&#x4ef6;&#x95f4;&#x901a;&#x4fe1;&#x56f0;&#x96be;&#x3002;","children":[{"content":"<strong>&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>&#xff1a;&#x9009;&#x62e9;&#x5408;&#x9002;&#x7684;&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x6a21;&#x5f0f;&#xff1b;&#x4e25;&#x683c;&#x9075;&#x5faa;&#x5355;&#x5411;&#x6570;&#x636e;&#x6d41;&#xff1b;&#x5229;&#x7528;&#x4e8b;&#x4ef6;&#x603b;&#x7ebf;&#x6216;&#x5171;&#x4eab;&#x670d;&#x52a1;&#x8fdb;&#x884c;&#x8de8;&#x7ec4;&#x4ef6;&#x901a;&#x4fe1;&#x3002;","children":[],"payload":{"tag":"li","lines":"2291,2292"}}],"payload":{"tag":"li","lines":"2290,2292"}},{"content":"<strong>&#x5b89;&#x5168;&#x95ee;&#x9898;</strong>&#xff1a;XSS&#x3001;CSRF&#x3001;&#x6570;&#x636e;&#x6cc4;&#x9732;&#x3002;","children":[{"content":"<strong>&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>&#xff1a;&#x5bf9;&#x7528;&#x6237;&#x8f93;&#x5165;&#x8fdb;&#x884c;&#x4e25;&#x683c;&#x9a8c;&#x8bc1;&#x548c;&#x6e05;&#x7406;&#xff1b;&#x4f7f;&#x7528; HTTPS&#xff1b;&#x914d;&#x7f6e; CORS&#xff1b;&#x9632;&#x6b62; CSRF &#x653b;&#x51fb;&#xff08;Token&#xff09;&#xff1b;&#x6ce8;&#x610f;&#x654f;&#x611f;&#x4fe1;&#x606f;&#x5b58;&#x50a8;&#x3002;","children":[],"payload":{"tag":"li","lines":"2293,2295"}}],"payload":{"tag":"li","lines":"2292,2295"}}],"payload":{"tag":"h4","lines":"2280,2281"}},{"content":"<strong>&#x5f00;&#x6e90;&#x8d21;&#x732e;&#x6307;&#x5357;</strong>","children":[{"content":"<strong>&#x5982;&#x4f55;&#x53c2;&#x4e0e;&#x5230;&#x5f00;&#x6e90;&#x793e;&#x533a;&#x4e2d;</strong>&#xff1a;","children":[{"content":"<strong>&#x9009;&#x62e9;&#x9879;&#x76ee;</strong>&#xff1a;&#x4ece;&#x81ea;&#x5df1;&#x4f7f;&#x7528;&#x6216;&#x611f;&#x5174;&#x8da3;&#x7684;&#x9879;&#x76ee;&#x5165;&#x624b;&#xff0c;&#x4ece;&#x5c0f;&#x5904;&#x7740;&#x624b;&#xff08;&#x5982;&#x6587;&#x6863;&#x4fee;&#x6b63;&#x3001;bug &#x4fee;&#x590d;&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"2300,2301"}},{"content":"<strong>&#x9605;&#x8bfb;&#x8d21;&#x732e;&#x6307;&#x5357;</strong>&#xff1a;&#x4e86;&#x89e3;&#x9879;&#x76ee;&#x7684;&#x8d21;&#x732e;&#x6d41;&#x7a0b;&#x3001;&#x4ee3;&#x7801;&#x89c4;&#x8303;&#x548c;&#x6d4b;&#x8bd5;&#x8981;&#x6c42;&#x3002;","children":[],"payload":{"tag":"li","lines":"2301,2302"}},{"content":"<strong>&#x63d0;&#x4ea4; Issue</strong>&#xff1a;&#x53d1;&#x73b0; bug &#x6216;&#x6709;&#x65b0;&#x529f;&#x80fd;&#x5efa;&#x8bae;&#x65f6;&#xff0c;&#x5148;&#x63d0;&#x4ea4; Issue&#xff0c;&#x4e0e;&#x7ef4;&#x62a4;&#x8005;&#x6c9f;&#x901a;&#x3002;","children":[],"payload":{"tag":"li","lines":"2302,2303"}},{"content":"<strong>&#x63d0;&#x4ea4; Pull Request (PR)</strong>&#xff1a;","children":[{"content":"Fork &#x9879;&#x76ee;&#xff0c;&#x521b;&#x5efa;&#x65b0;&#x5206;&#x652f;&#x3002;","children":[],"payload":{"tag":"li","lines":"2304,2305"}},{"content":"&#x8fdb;&#x884c;&#x4fee;&#x6539;&#xff0c;&#x5e76;&#x7f16;&#x5199;&#x6e05;&#x6670;&#x7684;&#x63d0;&#x4ea4;&#x4fe1;&#x606f;&#x3002;","children":[],"payload":{"tag":"li","lines":"2305,2306"}},{"content":"&#x7f16;&#x5199;&#x6216;&#x66f4;&#x65b0;&#x6d4b;&#x8bd5;&#x7528;&#x4f8b;&#x3002;","children":[],"payload":{"tag":"li","lines":"2306,2307"}},{"content":"&#x63d0;&#x4ea4; PR&#xff0c;&#x5e76;&#x8be6;&#x7ec6;&#x63cf;&#x8ff0;&#x53d8;&#x66f4;&#x5185;&#x5bb9;&#x3001;&#x89e3;&#x51b3;&#x4e86;&#x4ec0;&#x4e48;&#x95ee;&#x9898;&#x3002;","children":[],"payload":{"tag":"li","lines":"2307,2308"}}],"payload":{"tag":"li","lines":"2303,2308"}},{"content":"<strong>&#x79ef;&#x6781;&#x6c9f;&#x901a;</strong>&#xff1a;&#x5bf9; PR &#x7684;&#x53cd;&#x9988;&#x4fdd;&#x6301;&#x5f00;&#x653e;&#x5fc3;&#x6001;&#xff0c;&#x53ca;&#x65f6;&#x54cd;&#x5e94;&#x7ef4;&#x62a4;&#x8005;&#x7684;&#x8bc4;&#x8bba;&#x3002;","children":[],"payload":{"tag":"li","lines":"2308,2309"}},{"content":"<strong>&#x6301;&#x7eed;&#x5b66;&#x4e60;</strong>&#xff1a;&#x901a;&#x8fc7;&#x9605;&#x8bfb;&#x9ad8;&#x8d28;&#x91cf;&#x7684;&#x5f00;&#x6e90;&#x4ee3;&#x7801;&#xff0c;&#x5b66;&#x4e60;&#x6700;&#x4f73;&#x5b9e;&#x8df5;&#x548c;&#x8bbe;&#x8ba1;&#x6a21;&#x5f0f;&#x3002;","children":[],"payload":{"tag":"li","lines":"2309,2311"}}],"payload":{"tag":"li","lines":"2299,2311"}}],"payload":{"tag":"h4","lines":"2295,2296"}}],"payload":{"tag":"h3","lines":"2260,2261"}},{"content":"<strong>C. &#x804c;&#x4e1a;&#x53d1;&#x5c55;&#x8def;&#x5f84;</strong>","children":[{"content":"<strong>&#x6280;&#x672f;&#x4e13;&#x5bb6; vs. &#x6280;&#x672f;&#x7ba1;&#x7406;</strong>","children":[{"content":"<strong>&#x6280;&#x672f;&#x4e13;&#x5bb6; (Individual Contributor, IC)</strong>&#xff1a;","children":[{"content":"<strong>&#x804c;&#x8d23;</strong>&#xff1a;&#x4e13;&#x6ce8;&#x4e8e;&#x6280;&#x672f;&#x6df1;&#x5ea6;&#xff0c;&#x89e3;&#x51b3;&#x590d;&#x6742;&#x7684;&#x6280;&#x672f;&#x96be;&#x9898;&#xff0c;&#x63a8;&#x52a8;&#x6280;&#x672f;&#x521b;&#x65b0;&#x548c;&#x6700;&#x4f73;&#x5b9e;&#x8df5;&#x3002;","children":[],"payload":{"tag":"li","lines":"2320,2321"}},{"content":"<strong>&#x53d1;&#x5c55;&#x65b9;&#x5411;</strong>&#xff1a;&#x9ad8;&#x7ea7;&#x524d;&#x7aef;&#x5de5;&#x7a0b;&#x5e08; -&gt; &#x8d44;&#x6df1;&#x524d;&#x7aef;&#x5de5;&#x7a0b;&#x5e08; -&gt; &#x9996;&#x5e2d;&#x524d;&#x7aef;&#x5de5;&#x7a0b;&#x5e08;/&#x524d;&#x7aef;&#x67b6;&#x6784;&#x5e08;&#x3002;","children":[],"payload":{"tag":"li","lines":"2321,2322"}},{"content":"<strong>&#x6838;&#x5fc3;&#x80fd;&#x529b;</strong>&#xff1a;&#x6df1;&#x5165;&#x638c;&#x63e1;&#x524d;&#x7aef;&#x6280;&#x672f;&#x6808;&#x3001;&#x7cfb;&#x7edf;&#x8bbe;&#x8ba1;&#x80fd;&#x529b;&#x3001;&#x6027;&#x80fd;&#x4f18;&#x5316;&#x3001;&#x4ee3;&#x7801;&#x8d28;&#x91cf;&#x3001;&#x89e3;&#x51b3;&#x590d;&#x6742;&#x95ee;&#x9898;&#x3001;&#x6280;&#x672f;&#x9884;&#x7814;&#x3002;","children":[],"payload":{"tag":"li","lines":"2322,2323"}}],"payload":{"tag":"li","lines":"2319,2323"}},{"content":"<strong>&#x6280;&#x672f;&#x7ba1;&#x7406; (Manager)</strong>&#xff1a;","children":[{"content":"<strong>&#x804c;&#x8d23;</strong>&#xff1a;&#x7ba1;&#x7406;&#x56e2;&#x961f;&#x3001;&#x534f;&#x8c03;&#x8d44;&#x6e90;&#x3001;&#x5236;&#x5b9a;&#x9879;&#x76ee;&#x8ba1;&#x5212;&#x3001;&#x57f9;&#x517b;&#x56e2;&#x961f;&#x6210;&#x5458;&#x3001;&#x5173;&#x6ce8;&#x56e2;&#x961f;&#x6548;&#x7387;&#x548c;&#x58eb;&#x6c14;&#x3002;","children":[],"payload":{"tag":"li","lines":"2324,2325"}},{"content":"<strong>&#x53d1;&#x5c55;&#x65b9;&#x5411;</strong>&#xff1a;&#x6280;&#x672f;&#x7ec4;&#x957f; -&gt; &#x6280;&#x672f;&#x7ecf;&#x7406; -&gt; &#x6280;&#x672f;&#x603b;&#x76d1;/&#x5de5;&#x7a0b;&#x526f;&#x603b;&#x88c1;&#x3002;","children":[],"payload":{"tag":"li","lines":"2325,2326"}},{"content":"<strong>&#x6838;&#x5fc3;&#x80fd;&#x529b;</strong>&#xff1a;&#x56e2;&#x961f;&#x9886;&#x5bfc;&#x529b;&#x3001;&#x9879;&#x76ee;&#x7ba1;&#x7406;&#x3001;&#x6c9f;&#x901a;&#x534f;&#x8c03;&#x3001;&#x4eba;&#x5458;&#x57f9;&#x517b;&#x3001;&#x6218;&#x7565;&#x89c4;&#x5212;&#x3001;&#x8de8;&#x90e8;&#x95e8;&#x534f;&#x4f5c;&#x3002;","children":[],"payload":{"tag":"li","lines":"2326,2327"}}],"payload":{"tag":"li","lines":"2323,2327"}},{"content":"<strong>&#x9009;&#x62e9;&#x8003;&#x91cf;</strong>&#xff1a;","children":[{"content":"<strong>&#x5174;&#x8da3;</strong>&#xff1a;&#x662f;&#x66f4;&#x559c;&#x6b22;&#x6df1;&#x5165;&#x6280;&#x672f;&#x7ec6;&#x8282;&#x8fd8;&#x662f;&#x66f4;&#x559c;&#x6b22;&#x4e0e;&#x4eba;&#x6253;&#x4ea4;&#x9053;&#x3001;&#x89e3;&#x51b3;&#x7ec4;&#x7ec7;&#x95ee;&#x9898;&#xff1f;","children":[],"payload":{"tag":"li","lines":"2328,2329"}},{"content":"<strong>&#x80fd;&#x529b;</strong>&#xff1a;&#x662f;&#x5426;&#x5177;&#x5907;&#x7ba1;&#x7406;&#x548c;&#x9886;&#x5bfc;&#x56e2;&#x961f;&#x7684;&#x6f5c;&#x8d28;&#xff1f;","children":[],"payload":{"tag":"li","lines":"2329,2330"}},{"content":"<strong>&#x804c;&#x4e1a;&#x89c4;&#x5212;</strong>&#xff1a;&#x957f;&#x671f;&#x76ee;&#x6807;&#x662f;&#x4ec0;&#x4e48;&#xff1f;","children":[],"payload":{"tag":"li","lines":"2330,2332"}}],"payload":{"tag":"li","lines":"2327,2332"}}],"payload":{"tag":"h4","lines":"2317,2318"}},{"content":"<strong>&#x6280;&#x672f;&#x9886;&#x5bfc;&#x529b;&#x7684;&#x57f9;&#x517b;</strong>","children":[{"content":"<strong>&#x6280;&#x672f;&#x89c6;&#x91ce;&#x4e0e;&#x524d;&#x77bb;&#x6027;</strong>&#xff1a;","children":[{"content":"&#x6301;&#x7eed;&#x5173;&#x6ce8;&#x884c;&#x4e1a;&#x6700;&#x65b0;&#x6280;&#x672f;&#x8d8b;&#x52bf;&#x3001;&#x65b0;&#x5174;&#x6846;&#x67b6;&#x548c;&#x5de5;&#x5177;&#xff0c;&#x7406;&#x89e3;&#x5176;&#x4f18;&#x52a3;&#x548c;&#x9002;&#x7528;&#x573a;&#x666f;&#x3002;","children":[],"payload":{"tag":"li","lines":"2337,2338"}},{"content":"&#x80fd;&#x591f;&#x9884;&#x89c1;&#x6280;&#x672f;&#x53d1;&#x5c55;&#x5bf9;&#x4e1a;&#x52a1;&#x7684;&#x5f71;&#x54cd;&#xff0c;&#x5e76;&#x63d0;&#x524d;&#x8fdb;&#x884c;&#x6280;&#x672f;&#x50a8;&#x5907;&#x548c;&#x89c4;&#x5212;&#x3002;","children":[],"payload":{"tag":"li","lines":"2338,2339"}}],"payload":{"tag":"li","lines":"2336,2339"}},{"content":"<strong>&#x89e3;&#x51b3;&#x590d;&#x6742;&#x95ee;&#x9898;&#x7684;&#x80fd;&#x529b;</strong>&#xff1a;","children":[{"content":"&#x4e0d;&#x4ec5;&#x4ec5;&#x662f;&#x89e3;&#x51b3;&#x5df2;&#x77e5;&#x95ee;&#x9898;&#xff0c;&#x66f4;&#x662f;&#x80fd;&#x591f;&#x8bc6;&#x522b;&#x3001;&#x5b9a;&#x4e49;&#x548c;&#x89e3;&#x51b3;&#x672a;&#x66fe;&#x9047;&#x5230;&#x7684;&#x590d;&#x6742;&#x6280;&#x672f;&#x6311;&#x6218;&#x3002;","children":[],"payload":{"tag":"li","lines":"2340,2341"}},{"content":"&#x5177;&#x5907;&#x7cfb;&#x7edf;&#x6027;&#x601d;&#x7ef4;&#xff0c;&#x80fd;&#x591f;&#x4ece;&#x5b8f;&#x89c2;&#x5c42;&#x9762;&#x5206;&#x6790;&#x95ee;&#x9898;&#xff0c;&#x5e76;&#x8bbe;&#x8ba1;&#x51fa;&#x53ef;&#x6269;&#x5c55;&#x3001;&#x53ef;&#x7ef4;&#x62a4;&#x7684;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x3002;","children":[],"payload":{"tag":"li","lines":"2341,2342"}}],"payload":{"tag":"li","lines":"2339,2342"}},{"content":"<strong>&#x5f71;&#x54cd;&#x529b;&#x4e0e;&#x6c9f;&#x901a;&#x80fd;&#x529b;</strong>&#xff1a;","children":[{"content":"&#x80fd;&#x591f;&#x6e05;&#x6670;&#x5730;&#x8868;&#x8fbe;&#x6280;&#x672f;&#x7406;&#x5ff5;&#x548c;&#x8bbe;&#x8ba1;&#x65b9;&#x6848;&#xff0c;&#x8bf4;&#x670d;&#x56e2;&#x961f;&#x548c;&#x5229;&#x76ca;&#x76f8;&#x5173;&#x8005;&#x3002;","children":[],"payload":{"tag":"li","lines":"2343,2344"}},{"content":"&#x901a;&#x8fc7;&#x5206;&#x4eab;&#x3001;&#x6388;&#x8bfe;&#x3001;&#x64b0;&#x5199;&#x6587;&#x7ae0;&#x7b49;&#x65b9;&#x5f0f;&#xff0c;&#x5728;&#x56e2;&#x961f;&#x5185;&#x5916;&#x5efa;&#x7acb;&#x6280;&#x672f;&#x5f71;&#x54cd;&#x529b;&#x3002;","children":[],"payload":{"tag":"li","lines":"2344,2345"}},{"content":"&#x79ef;&#x6781;&#x53c2;&#x4e0e;&#x6280;&#x672f;&#x793e;&#x533a;&#xff0c;&#x8d21;&#x732e;&#x77e5;&#x8bc6;&#x548c;&#x7ecf;&#x9a8c;&#x3002;","children":[],"payload":{"tag":"li","lines":"2345,2346"}}],"payload":{"tag":"li","lines":"2342,2346"}},{"content":"<strong>&#x56e2;&#x961f;&#x8d4b;&#x80fd;&#x4e0e;&#x6307;&#x5bfc;</strong>&#xff1a;","children":[{"content":"&#x4e50;&#x4e8e;&#x5206;&#x4eab;&#x77e5;&#x8bc6;&#xff0c;&#x6307;&#x5bfc;&#x521d;&#x7ea7;&#x5de5;&#x7a0b;&#x5e08;&#x6210;&#x957f;&#x3002;","children":[],"payload":{"tag":"li","lines":"2347,2348"}},{"content":"&#x901a;&#x8fc7;&#x4ee3;&#x7801;&#x5ba1;&#x67e5;&#x3001;&#x6280;&#x672f;&#x5206;&#x4eab;&#x3001;&#x7ed3;&#x5bf9;&#x7f16;&#x7a0b;&#x7b49;&#x65b9;&#x5f0f;&#xff0c;&#x63d0;&#x5347;&#x56e2;&#x961f;&#x6574;&#x4f53;&#x6280;&#x672f;&#x6c34;&#x5e73;&#x3002;","children":[],"payload":{"tag":"li","lines":"2348,2349"}},{"content":"&#x9f13;&#x52b1;&#x56e2;&#x961f;&#x6210;&#x5458;&#x521b;&#x65b0;&#x548c;&#x5c1d;&#x8bd5;&#x65b0;&#x4e8b;&#x7269;&#xff0c;&#x8425;&#x9020;&#x79ef;&#x6781;&#x7684;&#x6280;&#x672f;&#x6c1b;&#x56f4;&#x3002;","children":[],"payload":{"tag":"li","lines":"2349,2350"}}],"payload":{"tag":"li","lines":"2346,2350"}},{"content":"<strong>&#x4e1a;&#x52a1;&#x7406;&#x89e3;</strong>&#xff1a;","children":[{"content":"&#x6df1;&#x5165;&#x7406;&#x89e3;&#x4e1a;&#x52a1;&#x9700;&#x6c42;&#x548c;&#x76ee;&#x6807;&#xff0c;&#x5c06;&#x6280;&#x672f;&#x4e0e;&#x4e1a;&#x52a1;&#x7d27;&#x5bc6;&#x7ed3;&#x5408;&#x3002;","children":[],"payload":{"tag":"li","lines":"2351,2352"}},{"content":"&#x80fd;&#x591f;&#x4ece;&#x4e1a;&#x52a1;&#x89d2;&#x5ea6;&#x8bc4;&#x4f30;&#x6280;&#x672f;&#x65b9;&#x6848;&#x7684;&#x4ef7;&#x503c;&#x548c;&#x98ce;&#x9669;&#x3002;","children":[],"payload":{"tag":"li","lines":"2352,2354"}}],"payload":{"tag":"li","lines":"2350,2354"}}],"payload":{"tag":"h4","lines":"2332,2333"}}],"payload":{"tag":"h3","lines":"2313,2314"}}],"payload":{"tag":"h2","lines":"2203,2204"}},{"content":"<strong>VIII. &#x7ed3;&#x8bba;&#xff1a;&#x524d;&#x7aef;&#x7cbe;&#x901a;&#x4e4b;&#x8def;</strong>","children":[],"payload":{"tag":"h2","lines":"2356,2357"}},{"content":"&#x9644;&#x5f55; A&#xff1a;&#x524d;&#x7aef;&#x5b66;&#x4e60;&#x8d44;&#x6599;&#x6c47;&#x603b;","children":[{"content":"<strong>0. &#x5b66;&#x4e60;&#x8def;&#x7ebf;&#x56fe; (The Map)</strong>","children":[{"content":"<strong><a href=\"https://roadmap.sh/\">roadmap.sh</a></strong>","children":[{"content":"<strong>&#x5730;&#x4f4d;</strong>&#xff1a;&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x804c;&#x4e1a;&#x751f;&#x6daf;&#x7684;<strong>&#x5730;&#x56fe;</strong>&#x3002;","children":[],"payload":{"tag":"li","lines":"2373,2374"}},{"content":"<strong>&#x5982;&#x4f55;&#x4f7f;&#x7528;</strong>&#xff1a;","children":[{"content":"<strong>&#x67e5;&#x6f0f;&#x8865;&#x7f3a;</strong>&#xff1a;&#x6253;&#x5f00; <a href=\"https://roadmap.sh/frontend\">Frontend Roadmap</a>&#xff0c;&#x5bf9;&#x7167;&#x672c;&#x6587;&#xff0c;&#x52fe;&#x9009;&#x4f60;&#x5df2;&#x7ecf;&#x638c;&#x63e1;&#x7684;&#x6280;&#x80fd;&#x70b9;&#x3002;","children":[],"payload":{"tag":"li","lines":"2375,2376"}},{"content":"<strong>&#x6df1;&#x5ea6;&#x8ffd;&#x8e2a;</strong>&#xff1a;&#x5b83;&#x4e0d;&#x4ec5;&#x6709;&#x524d;&#x7aef;&#xff08;Frontend&#xff09;&#xff0c;&#x8fd8;&#x6709;<strong>&#x5168;&#x6808;&#xff08;Full Stack&#xff09;</strong>&#x3001;<strong>React</strong>&#x3001;<strong>Vue</strong> &#x751a;&#x81f3; <strong>AI Engineer</strong> &#x7684;&#x4e13;&#x5c5e;&#x8def;&#x7ebf;&#x56fe;&#x3002;","children":[],"payload":{"tag":"li","lines":"2376,2377"}},{"content":"<strong>&#x56e2;&#x961f;&#x6807;&#x51c6;</strong>&#xff1a;&#x8bb8;&#x591a;&#x5927;&#x5382;&#x548c;&#x5f00;&#x6e90;&#x56e2;&#x961f;&#x76f4;&#x63a5;&#x4f7f;&#x7528;&#x5b83;&#x6765;&#x5236;&#x5b9a;&#x5185;&#x90e8;&#x664b;&#x5347;&#x548c;&#x62db;&#x8058;&#x6807;&#x51c6;&#x3002;","children":[],"payload":{"tag":"li","lines":"2377,2379"}}],"payload":{"tag":"li","lines":"2374,2379"}}],"payload":{"tag":"li","lines":"2372,2379"}}],"payload":{"tag":"h3","lines":"2368,2369"}},{"content":"<strong>1. &#x6743;&#x5a01;&#x767e;&#x79d1;&#x4e0e;&#x6807;&#x51c6; (The Holy Grail)</strong>","children":[{"content":"<strong><a href=\"https://developer.mozilla.org/zh-CN/\">MDN Web Docs</a></strong>","children":[{"content":"<strong>&#x5730;&#x4f4d;</strong>&#xff1a;Web &#x5f00;&#x53d1;&#x8005;&#x7684;&#x5723;&#x7ecf;&#x3002;HTML/CSS/JS &#x7684;&#x6807;&#x51c6;&#x6587;&#x6863;&#xff0c;&#x65e0;&#x53ef;&#x66ff;&#x4ee3;&#x3002;","children":[],"payload":{"tag":"li","lines":"2384,2385"}}],"payload":{"tag":"li","lines":"2383,2385"}},{"content":"<strong><a href=\"https://web.dev/\">web.dev</a></strong>","children":[{"content":"<strong>&#x5730;&#x4f4d;</strong>&#xff1a;Google &#x51fa;&#x54c1;&#x7684;&#x6700;&#x4f73;&#x5b9e;&#x8df5;&#x6307;&#x5357;&#x3002;&#x6db5;&#x76d6;&#x6027;&#x80fd; (Core Web Vitals)&#x3001;PWA&#x3001;&#x65e0;&#x969c;&#x788d;&#x7b49;&#x6df1;&#x5ea6;&#x5185;&#x5bb9;&#x3002;","children":[],"payload":{"tag":"li","lines":"2386,2387"}}],"payload":{"tag":"li","lines":"2385,2387"}},{"content":"<strong><a href=\"https://caniuse.com/\">Can I Use</a></strong>","children":[{"content":"<strong>&#x7528;&#x9014;</strong>&#xff1a;&#x67e5;&#x8be2; CSS/JS &#x65b0;&#x7279;&#x6027;&#x7684;&#x6d4f;&#x89c8;&#x5668;&#x517c;&#x5bb9;&#x6027;&#xff08;&#x5982; <code>:has()</code>, Container Queries&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"2388,2389"}}],"payload":{"tag":"li","lines":"2387,2389"}},{"content":"<strong><a href=\"https://www.patterns.dev/\">Patterns.dev</a></strong>","children":[{"content":"<strong>&#x7528;&#x9014;</strong>&#xff1a;&#x514d;&#x8d39;&#x4e14;&#x6df1;&#x5ea6;&#x7684;&#x7535;&#x5b50;&#x4e66;&#xff0c;&#x8bb2;&#x89e3;&#x73b0;&#x4ee3; Web &#x5e94;&#x7528;&#x7684;&#x6e32;&#x67d3;&#x6a21;&#x5f0f;&#xff08;SSR/RSC/Islands&#xff09;&#x548c;&#x6027;&#x80fd;&#x4f18;&#x5316;&#x6a21;&#x5f0f;&#x3002;","children":[],"payload":{"tag":"li","lines":"2390,2392"}}],"payload":{"tag":"li","lines":"2389,2392"}}],"payload":{"tag":"h3","lines":"2379,2380"}},{"content":"<strong>2. &#x6838;&#x5fc3;&#x6280;&#x672f;&#x6808;&#x6df1;&#x5ea6;&#x5b66;&#x4e60; (Deep Dives)</strong>","children":[{"content":"\n<p data-lines=\"2396,2397\"><strong>JavaScript</strong></p>","children":[{"content":"\n<p data-lines=\"2397,2398\"><strong><a href=\"https://javascript.info/\">JavaScript.info</a></strong></p>","children":[{"content":"<strong>&#x5730;&#x4f4d;</strong>&#xff1a;&#x88ab;&#x516c;&#x8ba4;&#x4e3a;&#x73b0;&#x4ee3;&#x6700;&#x597d;&#x7684; JavaScript &#x5728;&#x7ebf;&#x6559;&#x7a0b;&#x3002;","children":[],"payload":{"tag":"li","lines":"2398,2399"}},{"content":"<strong>&#x7279;&#x70b9;</strong>&#xff1a;&#x5185;&#x5bb9;&#x6781;&#x65b0;&#xff0c;&#x4e0d;&#x4ec5;&#x8bb2;&#x8bed;&#x6cd5;&#xff0c;&#x8fd8;&#x6df1;&#x5165;&#x8bb2;&#x89e3; DOM&#x3001;&#x4e8b;&#x4ef6;&#x5faa;&#x73af;&#x548c;&#x7f51;&#x7edc;&#x8bf7;&#x6c42;&#x3002;&#x5b83;&#x662f;&#x4ece;&#x201c;&#x4f1a;&#x5199;&#x4ee3;&#x7801;&#x201d;&#x5230;&#x201c;&#x7406;&#x89e3;&#x539f;&#x7406;&#x201d;&#x7684;&#x6700;&#x4f73;&#x6865;&#x6881;&#x3002;","children":[],"payload":{"tag":"li","lines":"2399,2400"}}],"payload":{"tag":"li","lines":"2397,2400"}},{"content":"\n<p data-lines=\"2400,2401\"><strong><a href=\"https://github.com/getify/You-Dont-Know-JS\">You Don&apos;t Know JS Yet (GitHub)</a></strong></p>","children":[{"content":"<strong>&#x5730;&#x4f4d;</strong>&#xff1a;Kyle Simpson &#x7684;&#x795e;&#x4f5c;&#x3002;","children":[{"content":"<strong>&#x7528;&#x9014;</strong>&#xff1a;&#x5982;&#x679c;&#x4f60;&#x60f3;&#x5f7b;&#x5e95;&#x641e;&#x61c2; <strong>&#x4f5c;&#x7528;&#x57df; (Scope)</strong>&#x3001;<strong>&#x95ed;&#x5305; (Closures)</strong>&#x3001;<strong>&#x539f;&#x578b;&#x94fe; (Prototypes)</strong> &#x548c; <strong>&#x5f02;&#x6b65; (Async)</strong>&#xff0c;&#x8fd9;&#x662f;&#x5fc5;&#x8bfb;&#x7684;&#x3002;&#x8fd9;&#x662f;&#x533a;&#x5206;&#x521d;&#x7ea7;&#x548c;&#x9ad8;&#x7ea7;&#x5de5;&#x7a0b;&#x5e08;&#x7684;&#x5206;&#x6c34;&#x5cad;&#x3002;","children":[],"payload":{"tag":"li","lines":"2402,2404"}}],"payload":{"tag":"li","lines":"2401,2404"}}],"payload":{"tag":"li","lines":"2400,2404"}},{"content":"\n<p data-lines=\"2404,2405\"><strong><a href=\"https://justjavascript.com/\">Just JavaScript</a></strong></p>","children":[{"content":"<strong>&#x5730;&#x4f4d;</strong>&#xff1a;Dan Abramov (React &#x6838;&#x5fc3;&#x6210;&#x5458;) &#x51fa;&#x54c1;&#x3002;","children":[],"payload":{"tag":"li","lines":"2405,2406"}},{"content":"<strong>&#x7528;&#x9014;</strong>&#xff1a;&#x91cd;&#x5efa;&#x4f60;&#x5bf9;&#x201c;&#x503c;&#x4e0e;&#x5f15;&#x7528;&#x201d;&#x7684;&#x5fc3;&#x667a;&#x6a21;&#x578b;&#x3002;&#x975e;&#x5e38;&#x9002;&#x5408;&#x90a3;&#x4e9b;&#x201c;&#x611f;&#x89c9;&#x61c2;&#x4e86;&#x4f46;&#x7ecf;&#x5e38;&#x5199;&#x51fa; Bug&#x201d;&#x7684;&#x5f00;&#x53d1;&#x8005;&#x3002;","children":[],"payload":{"tag":"li","lines":"2406,2408"}}],"payload":{"tag":"li","lines":"2404,2408"}}],"payload":{"tag":"li","lines":"2396,2408"}},{"content":"\n<p data-lines=\"2408,2409\"><strong>TypeScript</strong></p>","children":[{"content":"<strong><a href=\"https://www.totaltypescript.com/\">Total TypeScript</a></strong>: Matt Pocock &#x51fa;&#x54c1;&#x7684;&#x6559;&#x7a0b;&#xff0c;&#x88ab;&#x516c;&#x8ba4;&#x4e3a;&#x76ee;&#x524d;&#x6700;&#x597d;&#x7684; TS &#x8fdb;&#x9636;&#x8d44;&#x6e90;&#xff08;&#x4ece;&#x6cdb;&#x578b;&#x5230;&#x7c7b;&#x578b;&#x4f53;&#x64cd;&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"2409,2410"}},{"content":"<strong><a href=\"https://www.typescriptlang.org/docs/\">TypeScript Handbook</a></strong>: &#x5b98;&#x65b9;&#x624b;&#x518c;&#xff0c;&#x5fc5;&#x8bfb;&#x3002;","children":[],"payload":{"tag":"li","lines":"2410,2411"}}],"payload":{"tag":"li","lines":"2408,2411"}},{"content":"\n<p data-lines=\"2411,2412\"><strong>React &#x751f;&#x6001;</strong></p>","children":[{"content":"<strong><a href=\"https://react.dev/\">React.dev</a></strong>: &#x91cd;&#x5199;&#x540e;&#x7684;&#x5b98;&#x65b9;&#x6587;&#x6863;&#xff0c;&#x4ea4;&#x4e92;&#x5f0f;&#x6559;&#x5b66;&#x975e;&#x5e38;&#x597d;&#x3002;","children":[],"payload":{"tag":"li","lines":"2412,2413"}},{"content":"<strong><a href=\"https://www.joshwcomeau.com/\">Josh W Comeau&apos;s Blog</a></strong>: &#x8bb2;&#x89e3; React &#x539f;&#x7406;&#x548c; CSS &#x4ea4;&#x4e92;&#x6700;&#x900f;&#x5f7b;&#x7684;&#x535a;&#x5ba2;&#x4e4b;&#x4e00;&#x3002;","children":[],"payload":{"tag":"li","lines":"2413,2414"}}],"payload":{"tag":"li","lines":"2411,2414"}},{"content":"\n<p data-lines=\"2414,2415\"><strong>Vue &#x751f;&#x6001;</strong></p>","children":[{"content":"<strong><a href=\"https://vuejs.org/\">Vue.js &#x5b98;&#x65b9;&#x6587;&#x6863;</a></strong>: &#x4ee5;&#x6e05;&#x6670;&#x8457;&#x79f0;&#xff0c;&#x5305;&#x542b; Options API &#x548c; Composition API &#x7684;&#x5bf9;&#x6bd4;&#x3002;","children":[],"payload":{"tag":"li","lines":"2415,2416"}},{"content":"<strong><a href=\"https://antfu.me/\">Anthony Fu (antfu)</a></strong>: Vue/Vite &#x6838;&#x5fc3;&#x56e2;&#x961f;&#x6210;&#x5458;&#x7684;&#x535a;&#x5ba2;&#xff0c;&#x4e86;&#x89e3;&#x5f00;&#x6e90;&#x5de5;&#x5177;&#x94fe;&#x7684;&#x524d;&#x6cbf;&#x601d;&#x60f3;&#x3002;","children":[],"payload":{"tag":"li","lines":"2416,2418"}}],"payload":{"tag":"li","lines":"2414,2418"}}],"payload":{"tag":"h3","lines":"2392,2393"}},{"content":"<strong>3. &#x6837;&#x5f0f;&#x4e0e; UI &#x8bbe;&#x8ba1; (CSS &amp; Design)</strong>","children":[{"content":"<strong>CSS &#x8fdb;&#x9636;</strong>","children":[{"content":"<strong><a href=\"https://moderncss.dev/\">Modern CSS</a></strong>: &#x4e13;&#x6ce8;&#x4e8e;&#x73b0;&#x4ee3; CSS &#x89e3;&#x51b3;&#x65b9;&#x6848;&#x7684;&#x6559;&#x7a0b;&#x3002;","children":[],"payload":{"tag":"li","lines":"2423,2424"}},{"content":"<strong><a href=\"https://smolcss.dev/\">SmolCSS</a></strong>: &#x6781;&#x7b80;&#x7684;&#x73b0;&#x4ee3; CSS &#x5e03;&#x5c40;&#x7247;&#x6bb5;&#x3002;","children":[],"payload":{"tag":"li","lines":"2424,2425"}}],"payload":{"tag":"li","lines":"2422,2425"}},{"content":"<strong>&#x56fe;&#x6807;&#x5e93;</strong>","children":[{"content":"<strong><a href=\"https://lucide.dev/\">Lucide</a></strong>: &#x8fd1;&#x51e0;&#x5e74;&#x6700;&#x6d41;&#x884c;&#x7684;&#x56fe;&#x6807;&#x5e93;&#xff0c;&#x98ce;&#x683c;&#x7edf;&#x4e00;&#xff0c;&#x8f7b;&#x91cf;&#x3002;","children":[],"payload":{"tag":"li","lines":"2426,2427"}},{"content":"<strong><a href=\"https://react-icons.github.io/react-icons/\">React Icons</a></strong>: &#x805a;&#x5408;&#x4e86;&#x6240;&#x6709;&#x4e3b;&#x6d41;&#x56fe;&#x6807;&#x5e93;&#x7684; NPM &#x5305;&#x3002;","children":[],"payload":{"tag":"li","lines":"2427,2428"}}],"payload":{"tag":"li","lines":"2425,2428"}},{"content":"<strong>&#x65e0;&#x5934;&#x7ec4;&#x4ef6; (Headless UI)</strong>","children":[{"content":"<strong><a href=\"https://www.radix-ui.com/\">Radix UI</a></strong> / <strong><a href=\"https://headlessui.com/\">Headless UI</a></strong>: &#x63d0;&#x4f9b;&#x903b;&#x8f91;&#x548c;&#x65e0;&#x969c;&#x788d;&#x80fd;&#x529b;&#xff0c;&#x4e0d;&#x5e26;&#x6837;&#x5f0f;&#x7684;&#x7ec4;&#x4ef6;&#x5e93;&#x5e95;&#x5ea7;&#x3002;","children":[],"payload":{"tag":"li","lines":"2429,2430"}},{"content":"<strong><a href=\"https://ui.shadcn.com/\">shadcn/ui</a></strong>: &#x590d;&#x5236;&#x7c98;&#x8d34;&#x5f0f;&#x7684;&#x7ec4;&#x4ef6;&#x5e93;&#xff0c;&#x5f53;&#x4e0b;&#x6700;&#x706b;&#x7684; UI &#x6784;&#x5efa;&#x6a21;&#x5f0f;&#x3002;","children":[],"payload":{"tag":"li","lines":"2430,2432"}}],"payload":{"tag":"li","lines":"2428,2432"}}],"payload":{"tag":"h3","lines":"2418,2419"}},{"content":"<strong>4. &#x5de5;&#x7a0b;&#x5316;&#x4e0e;&#x5de5;&#x5177;&#x94fe; (Engineering)</strong>","children":[{"content":"<strong>&#x6784;&#x5efa;&#x4e0e;&#x7f16;&#x8bd1;</strong>","children":[{"content":"<strong><a href=\"https://astexplorer.net/\">AST Explorer</a></strong>: &#x5728;&#x7ebf;&#x67e5;&#x770b;&#x4ee3;&#x7801;&#x7684;&#x62bd;&#x8c61;&#x8bed;&#x6cd5;&#x6811; (AST)&#xff0c;&#x5b66;&#x4e60;&#x5199; Babel/ESLint/Vite &#x63d2;&#x4ef6;&#x7684;&#x795e;&#x5668;&#x3002;","children":[],"payload":{"tag":"li","lines":"2437,2438"}},{"content":"<strong><a href=\"https://bundlephobia.com/\">Bundlephobia</a></strong>: &#x68c0;&#x67e5; npm &#x5305;&#x7684;&#x4f53;&#x79ef;&#x5927;&#x5c0f;&#x548c;&#x4e0b;&#x8f7d;&#x65f6;&#x95f4;&#x3002;","children":[],"payload":{"tag":"li","lines":"2438,2439"}}],"payload":{"tag":"li","lines":"2436,2439"}},{"content":"<strong>&#x8c03;&#x8bd5;&#x4e0e;&#x6b63;&#x5219;</strong>","children":[{"content":"<strong><a href=\"https://regex101.com/\">Regex101</a></strong>: &#x53ef;&#x89c6;&#x5316;&#x8c03;&#x8bd5;&#x6b63;&#x5219;&#x8868;&#x8fbe;&#x5f0f;&#xff0c;&#x5e26;&#x89e3;&#x91ca;&#x529f;&#x80fd;&#x3002;","children":[],"payload":{"tag":"li","lines":"2440,2441"}},{"content":"<strong><a href=\"https://jsoncrack.com/\">JSON Crack</a></strong>: &#x5c06;&#x590d;&#x6742;&#x7684; JSON &#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x4e3a;&#x601d;&#x7ef4;&#x5bfc;&#x56fe;&#xff0c;&#x8c03;&#x8bd5;&#x63a5;&#x53e3;&#x6570;&#x636e;&#x5fc5;&#x5907;&#x3002;","children":[],"payload":{"tag":"li","lines":"2441,2443"}}],"payload":{"tag":"li","lines":"2439,2443"}}],"payload":{"tag":"h3","lines":"2432,2433"}},{"content":"<strong>5. AI &#x9a71;&#x52a8;&#x5f00;&#x53d1; (AI-Native)</strong>","children":[{"content":"<strong>&#x8f85;&#x52a9;&#x7f16;&#x7a0b;</strong>","children":[{"content":"<strong><a href=\"https://v0.dev/\">v0.dev</a></strong>: Vercel &#x51fa;&#x54c1;&#xff0c;&#x7528;&#x81ea;&#x7136;&#x8bed;&#x8a00;&#x751f;&#x6210; React/Tailwind &#x754c;&#x9762;&#x4ee3;&#x7801;&#x3002;","children":[],"payload":{"tag":"li","lines":"2448,2449"}},{"content":"<strong><a href=\"https://cursor.sh/\">Cursor</a></strong>: AI &#x539f;&#x751f;&#x4ee3;&#x7801;&#x7f16;&#x8f91;&#x5668;&#xff0c;&#x5b66;&#x4e60;&#x5982;&#x4f55;&#x5229;&#x7528; AI &#x8fdb;&#x884c;&#x5168;&#x5e93;&#x641c;&#x7d22;&#x548c;&#x91cd;&#x6784;&#x3002;","children":[],"payload":{"tag":"li","lines":"2449,2450"}}],"payload":{"tag":"li","lines":"2447,2450"}},{"content":"<strong>AI &#x96c6;&#x6210;</strong>","children":[{"content":"<strong><a href=\"https://js.langchain.com/\">LangChain JS</a></strong>: &#x5728;&#x524d;&#x7aef;/Node.js &#x5e94;&#x7528;&#x4e2d;&#x96c6;&#x6210; LLM &#x7684;&#x6807;&#x51c6;&#x5e93;&#x3002;","children":[],"payload":{"tag":"li","lines":"2451,2452"}},{"content":"<strong><a href=\"https://sdk.vercel.ai/\">Vercel SDK</a></strong>: &#x5feb;&#x901f;&#x6784;&#x5efa;&#x6d41;&#x5f0f; (Streaming) AI &#x804a;&#x5929;&#x754c;&#x9762;&#x7684;&#x5de5;&#x5177;&#x5e93;&#x3002;","children":[],"payload":{"tag":"li","lines":"2452,2454"}}],"payload":{"tag":"li","lines":"2450,2454"}}],"payload":{"tag":"h3","lines":"2443,2444"}},{"content":"<strong>6. &#x5b9e;&#x6218;&#x4e0e;&#x7ec3;&#x4e60;&#x5e73;&#x53f0; (Practice)</strong>","children":[{"content":"<strong><a href=\"https://www.frontendmentor.io/\">Frontend Mentor</a></strong>","children":[{"content":"&#x63d0;&#x4f9b;&#x8bbe;&#x8ba1;&#x56fe;&#xff08;Figma&#xff09;&#x548c;&#x8d44;&#x6e90;&#xff0c;&#x8ba9;&#x4f60;&#x4ece;&#x96f6;&#x5b9e;&#x73b0;&#x9875;&#x9762;&#xff0c;&#x975e;&#x5e38;&#x63a5;&#x8fd1;&#x771f;&#x5b9e;&#x5de5;&#x4f5c;&#x6d41;&#x3002;","children":[],"payload":{"tag":"li","lines":"2459,2460"}}],"payload":{"tag":"li","lines":"2458,2460"}},{"content":"<strong><a href=\"https://www.greatfrontend.com/\">GreatFrontEnd</a></strong>","children":[{"content":"&#x4e13;&#x95e8;&#x9488;&#x5bf9;&#x524d;&#x7aef;&#x5927;&#x5382;&#x9762;&#x8bd5;&#x7684;&#x51c6;&#x5907;&#x5e73;&#x53f0;&#xff08;&#x7cfb;&#x7edf;&#x8bbe;&#x8ba1;&#x3001;&#x7b97;&#x6cd5;&#x3001;UI &#x6311;&#x6218;&#xff09;&#x3002;","children":[],"payload":{"tag":"li","lines":"2461,2462"}}],"payload":{"tag":"li","lines":"2460,2462"}},{"content":"<strong><a href=\"https://codesandbox.io/\">CodeSandbox</a></strong> / <strong><a href=\"https://stackblitz.com/\">StackBlitz</a></strong>","children":[{"content":"&#x4e91;&#x7aef; IDE&#xff0c;&#x5feb;&#x901f;&#x9a8c;&#x8bc1;&#x60f3;&#x6cd5;&#xff0c;&#x65e0;&#x9700;&#x672c;&#x5730;&#x914d;&#x73af;&#x5883;&#x3002;","children":[],"payload":{"tag":"li","lines":"2463,2465"}}],"payload":{"tag":"li","lines":"2462,2465"}}],"payload":{"tag":"h3","lines":"2454,2455"}},{"content":"<strong>7. &#x8d44;&#x8baf;&#x4e0e;&#x793e;&#x533a; (Stay Updated)</strong>","children":[{"content":"<strong><a href=\"https://bytes.dev/\">Bytes</a></strong>: &#x5e7d;&#x9ed8;&#x98ce;&#x8da3;&#x7684; JavaScript &#x6bcf;&#x5468;&#x7b80;&#x62a5;&#x3002;","children":[],"payload":{"tag":"li","lines":"2469,2470"}},{"content":"<strong><a href=\"https://thisweekinreact.com/\">This Week In React</a></strong>: React &#x751f;&#x6001;&#x6700;&#x597d;&#x7684;&#x5468;&#x520a;&#x3002;","children":[],"payload":{"tag":"li","lines":"2470,2471"}},{"content":"<strong><a href=\"https://bestofjs.org/\">Best of JS</a></strong>: &#x5b9e;&#x65f6;&#x67e5;&#x770b; GitHub &#x4e0a;&#x6700;&#x70ed;&#x95e8;&#x7684;&#x524d;&#x7aef;&#x9879;&#x76ee;&#x8d8b;&#x52bf;&#x3002;","children":[],"payload":{"tag":"li","lines":"2471,2472"}}],"payload":{"tag":"h3","lines":"2465,2466"}}],"payload":{"tag":"h2","lines":"2366,2367"}}],"payload":{"tag":"h1","lines":"0,1"}},{})</script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Markmap</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      html {
+        font-family:
+          ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+          "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+      }
+      #mindmap {
+        display: block;
+        width: 100vw;
+        height: 100vh;
+      }
+      .markmap-dark {
+        background: #27272a;
+        color: white;
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.12/dist/style.css"
+    />
+  </head>
+  <body>
+    <svg id="mindmap"></svg>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/markmap-view@0.18.12/dist/browser/index.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.12/dist/index.js"></script>
+    <script>
+      ((r) => {
+        setTimeout(r);
+      })(function renderToolbar() {
+        const { markmap, mm } = window;
+        const { el } = markmap.Toolbar.create(mm);
+        el.setAttribute("style", "position:absolute;bottom:20px;right:20px");
+        document.body.append(el);
+      });
+    </script>
+    <script>
+      ((getMarkmap, getOptions, root2, jsonOptions) => {
+        const markmap = getMarkmap();
+        window.mm = markmap.Markmap.create(
+          "svg#mindmap",
+          (getOptions || markmap.deriveOptions)(jsonOptions),
+          root2,
+        );
+        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+          document.documentElement.classList.add("markmap-dark");
+        }
+      })(
+        () => window.markmap,
+        null,
+        {
+          content:
+            "<strong>&#x73b0;&#x4ee3; Web &#x524d;&#x7aef;&#x5f00;&#x53d1;&#x6307;&#x5357;&#xff1a;2026</strong>",
+          children: [
+            {
+              content: "<strong>&#x5f15;&#x8a00;</strong>",
+              children: [
+                {
+                  content:
+                    '\n<p data-lines="12,14"><strong>&#x5bf9;&#x4e8e;&#x521d;&#x7ea7;&#x5f00;&#x53d1;&#x8005;&#xff1a;</strong><br>\n&#x8bf7;&#x9996;&#x5148;&#x4e13;&#x6ce8;&#x4e8e; <strong>&#x7b2c;&#x4e8c;&#x7ae0;&#x201c;&#x57fa;&#x7840; Web &#x6280;&#x672f;&#x201d;</strong> &#x7684;&#x5185;&#x5bb9;&#x3002;HTML&#x3001;CSS &#x548c; JavaScript &#x662f;&#x6240;&#x6709;&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x7684;&#x6838;&#x5fc3;&#x57fa;&#x7840;&#x3002;&#x5728;&#x7262;&#x56fa;&#x638c;&#x63e1;&#x8fd9;&#x4e9b;&#x57fa;&#x7840;&#xff0c;&#x5e76;&#x80fd;&#x591f;&#x72ec;&#x7acb;&#x5b8c;&#x6210;&#x7b80;&#x5355;&#x9879;&#x76ee;&#x4e4b;&#x524d;&#xff0c;&#x8bf7;&#x5c06;&#x5176;&#x4ed6;&#x7ae0;&#x8282;&#x89c6;&#x4e3a;&#x540e;&#x7eed;&#x5b66;&#x4e60;&#x7684;&#x53c2;&#x8003;&#x8d44;&#x6599;&#x3002;</p>',
+                  children: [],
+                  payload: { tag: "li", lines: "12,15" },
+                },
+                {
+                  content:
+                    '\n<p data-lines="15,17"><strong>&#x5bf9;&#x4e8e;&#x4e2d;&#x7ea7;&#x5f00;&#x53d1;&#x8005;&#xff1a;</strong><br>\n&#x60a8;&#x53ef;&#x4ee5;&#x5c06;&#x672c;&#x6307;&#x5357;&#x4f5c;&#x4e3a;&#x4e00;&#x4efd;&#x77e5;&#x8bc6;&#x56fe;&#x8c31;&#xff0c;&#x7528;&#x4e8e;&#x68c0;&#x9a8c;&#x548c;&#x5de9;&#x56fa;&#x81ea;&#x5df1;&#x7684;&#x6280;&#x672f;&#x6808;&#x3002;&#x6df1;&#x5165;&#x9605;&#x8bfb;&#x60a8;&#x611f;&#x5174;&#x8da3;&#x7684;&#x90e8;&#x5206;&#xff0c;&#x7279;&#x522b;&#x662f;&#x5173;&#x4e8e;&#x4e0d;&#x540c;&#x6280;&#x672f;&#x65b9;&#x6848;&#x7684;&#x5bf9;&#x6bd4;&#x548c;&#x5206;&#x6790;&#xff0c;&#x8fd9;&#x5c06;&#x6709;&#x52a9;&#x4e8e;&#x60a8;&#x5728;&#x5b9e;&#x9645;&#x5de5;&#x4f5c;&#x4e2d;&#x505a;&#x51fa;&#x66f4;&#x5408;&#x7406;&#x7684;&#x6280;&#x672f;&#x9009;&#x578b;&#x3002;</p>',
+                  children: [],
+                  payload: { tag: "li", lines: "15,18" },
+                },
+                {
+                  content:
+                    '\n<p data-lines="18,20"><strong>&#x5bf9;&#x4e8e;&#x9ad8;&#x7ea7;&#x5f00;&#x53d1;&#x8005;&#x548c;&#x67b6;&#x6784;&#x5e08;&#xff1a;</strong><br>\n&#x672c;&#x6307;&#x5357;&#x4e2d;&#x5173;&#x4e8e;&#x9ad8;&#x7ea7;&#x5de5;&#x7a0b;&#x5316;&#x5de5;&#x4f5c;&#x6d41;&#x3001;&#x5fae;&#x524d;&#x7aef;&#x67b6;&#x6784;&#x3001;&#x6027;&#x80fd;&#x76d1;&#x63a7;&#x4ee5;&#x53ca;&#x65b0;&#x5174;&#x6280;&#x672f;&#x8d8b;&#x52bf;&#x7684;&#x63a2;&#x8ba8;&#xff0c;&#x53ef;&#x80fd;&#x4e3a;&#x60a8;&#x5728;&#x6280;&#x672f;&#x89c4;&#x5212;&#x548c;&#x67b6;&#x6784;&#x8bbe;&#x8ba1;&#x4e0a;&#x63d0;&#x4f9b;&#x6709;&#x4ef7;&#x503c;&#x7684;&#x53c2;&#x8003;&#x548c;&#x6d1e;&#x5bdf;&#x3002;</p>',
+                  children: [],
+                  payload: { tag: "li", lines: "18,21" },
+                },
+              ],
+              payload: { tag: "h2", lines: "6,7" },
+            },
+            {
+              content:
+                "<strong>I. &#x524d;&#x7aef;&#x5f00;&#x53d1;&#x7b80;&#x4ecb;</strong>",
+              children: [
+                {
+                  content: "",
+                  children: [
+                    {
+                      content:
+                        "<strong>WASM + WebGPU</strong> &#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x5b9e;&#x73b0;&#x8fd1;&#x539f;&#x751f;&#x7684;&#x5bc6;&#x96c6;&#x8ba1;&#x7b97;&#x4e0e;&#x9ad8;&#x5f3a;&#x5ea6; 3D &#x6e32;&#x67d3;&#x80fd;&#x529b;&#xff1b;",
+                      children: [],
+                      payload: { tag: "li", lines: "29,30" },
+                    },
+                    {
+                      content:
+                        "<strong>TensorFlow.js / ONNX Runtime Web</strong> &#x628a; AI &#x6a21;&#x578b;&#x76f4;&#x63a5;&#x8dd1;&#x5728;&#x7528;&#x6237;&#x8bbe;&#x5907;&#x4e0a;&#xff1b;",
+                      children: [],
+                      payload: { tag: "li", lines: "30,31" },
+                    },
+                    {
+                      content:
+                        "<strong>viem</strong> &#x7b49;&#x73b0;&#x4ee3;&#x5e93;&#x5df2;&#x6210;&#x4e3a;&#x53bb;&#x4e2d;&#x5fc3;&#x5316;&#x5e94;&#x7528;&#xff08;dApp&#xff09;&#x7684;&#x5e38;&#x89c1;&#x9009;&#x62e9;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "31,32" },
+                    },
+                    {
+                      content:
+                        "<strong>AI-Native &#x5de5;&#x5177;&#x94fe;</strong>&#xff08;Cursor Composer&#x3001;v0.dev&#x3001;Claude Code&#x3001;Lovart&#x3001;Builder.io AI &#x7b49;&#xff09;&#x5df2;&#x80fd;&#x628a;&#x4e00;&#x53e5;&#x9700;&#x6c42;&#x76f4;&#x63a5;&#x751f;&#x6210;&#x5b8c;&#x6574;&#x53ef;&#x90e8;&#x7f72;&#x7684; RSC &#x5e94;&#x7528;&#x3001;&#x6d4b;&#x8bd5;&#x4e0e;&#x6587;&#x6863;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "32,34" },
+                    },
+                  ],
+                  payload: { tag: "ul", lines: "29,34" },
+                },
+                {
+                  content: "",
+                  children: [
+                    {
+                      content:
+                        "1. &#x5148;&#x6253;&#x7262;<strong>&#x8ba1;&#x7b97;&#x673a;&#x57fa;&#x7840;</strong>&#xff08;&#x6d4f;&#x89c8;&#x5668;&#x539f;&#x7406;&#x3001;HTTP/3&#x3001;DNS&#x3001;Cookie&#x3001;CORS&#x3001;&#x57fa;&#x672c;&#x6570;&#x636e;&#x7ed3;&#x6784;&#x4e0e;&#x7b97;&#x6cd5;&#xff09;&#xff1b;",
+                      children: [],
+                      payload: { tag: "li", lines: "40,41", listIndex: 1 },
+                    },
+                    {
+                      content:
+                        "2. &#x624e;&#x5b9e;&#x638c;&#x63e1;<strong>&#x524d;&#x7aef;&#x4e09;&#x5251;&#x5ba2;</strong>&#x2014;&#x2014;HTML&#xff08;&#x8bed;&#x4e49;&#x5316;&#x4e0e;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#xff09;&#x3001;CSS&#xff08;&#x73b0;&#x4ee3;&#x5e03;&#x5c40; + &#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff09;&#x3001;JavaScript&#xff08;&#x8fd0;&#x884c;&#x65f6;&#x539f;&#x7406; + &#x73b0;&#x4ee3;&#x6807;&#x51c6;&#xff09;&#xff0c;&#x8fd9;&#x662f;&#x540e;&#x9762;&#x6240;&#x6709;&#x5185;&#x5bb9;&#x4e0d;&#x53ef;&#x6216;&#x7f3a;&#x7684;&#x6839;&#x57fa;&#xff1b;",
+                      children: [],
+                      payload: { tag: "li", lines: "41,42", listIndex: 2 },
+                    },
+                    {
+                      content:
+                        "3. &#x5b66;&#x4e60;&#x73b0;&#x4ee3;&#x6846;&#x67b6;&#x4e0e;<strong>&#x5143;&#x6846;&#x67b6;&#x3001;&#x4e0b;&#x4e00;&#x4ee3;&#x6e32;&#x67d3;&#x67b6;&#x6784;</strong>&#xff08;React + RSC&#x3001;Next.js App Router&#x3001;SolidStart&#x3001;Qwik Resumability&#x3001;SvelteKit &#x7b49;&#xff09;&#xff1b;",
+                      children: [],
+                      payload: { tag: "li", lines: "42,43", listIndex: 3 },
+                    },
+                    {
+                      content:
+                        "4. &#x6700;&#x540e;&#x6df1;&#x5165;&#x9ad8;&#x7ea7;&#x4e3b;&#x9898;&#xff1a;WebGPU&#x3001;WASM &#x7f16;&#x8bd1;&#x94fe;&#x3001;&#x8fb9;&#x7f18;&#x8ba1;&#x7b97;&#x3001;Privacy Sandbox &#x4e0e;&#x5408;&#x89c4;&#x3001;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#xff08;a11y&#xff09;&#x3001;&#x56fd;&#x9645;&#x5316;&#xff08;i18n&#xff09;&#x3001;&#x6d4b;&#x8bd5;&#x7b56;&#x7565;&#xff08;Vitest + Playwright + Testing Library&#xff09;&#x3001;&#x76d1;&#x63a7;&#x4e0e;&#x9519;&#x8bef;&#x8ffd;&#x8e2a;&#xff08;Sentry&#x3001;Highlight.io&#xff09;&#x3001;AI &#x9a71;&#x52a8;&#x5f00;&#x53d1;&#x7b49;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "43,45", listIndex: 4 },
+                    },
+                  ],
+                  payload: { tag: "ol", lines: "40,45" },
+                },
+                {
+                  content: "",
+                  children: [
+                    {
+                      content:
+                        "&#x5bf9;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#x4e0e;&#x4eba;&#x673a;&#x4ea4;&#x4e92;&#x7684;&#x6df1;&#x5ea6;&#x6d1e;&#x5bdf;&#x4e0e;&#x540c;&#x7406;&#x5fc3;",
+                      children: [],
+                      payload: { tag: "li", lines: "49,50" },
+                    },
+                    {
+                      content:
+                        "&#x5bf9;&#x590d;&#x6742;&#x4e1a;&#x52a1;&#x903b;&#x8f91;&#x7684;&#x62bd;&#x8c61;&#x4e0e;&#x5927;&#x578b;&#x7cfb;&#x7edf;&#x7684;&#x67b6;&#x6784;&#x80fd;&#x529b;",
+                      children: [],
+                      payload: { tag: "li", lines: "50,51" },
+                    },
+                    {
+                      content:
+                        "&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#xff08;a11y&#xff09;&#x3001;&#x6027;&#x80fd;&#x4f18;&#x5316;&#x3001;&#x56fd;&#x9645;&#x5316;&#x7b49;&#x4e13;&#x4e1a;&#x9886;&#x57df;&#x77e5;&#x8bc6;",
+                      children: [],
+                      payload: { tag: "li", lines: "51,52" },
+                    },
+                    {
+                      content:
+                        "&#x8de8;&#x56e2;&#x961f;&#x534f;&#x4f5c;&#x3001;&#x4ea7;&#x54c1;&#x601d;&#x7ef4;&#x3001;&#x6c9f;&#x901a;&#x4e0e;&#x6587;&#x6863;&#x80fd;&#x529b;",
+                      children: [],
+                      payload: { tag: "li", lines: "52,53" },
+                    },
+                    {
+                      content:
+                        "&#x6301;&#x7eed;&#x4ea4;&#x4ed8;&#x3001;&#x6d4b;&#x8bd5;&#x7b56;&#x7565;&#x3001;&#x76d1;&#x63a7;&#x4f53;&#x7cfb;&#x7b49;&#x5de5;&#x7a0b;&#x5316;&#x5b9e;&#x8df5;",
+                      children: [],
+                      payload: { tag: "li", lines: "53,55" },
+                    },
+                  ],
+                  payload: { tag: "ul", lines: "49,55" },
+                },
+                {
+                  content: "",
+                  children: [
+                    {
+                      content:
+                        "&#x57fa;&#x7840; Web &#x6280;&#x672f;&#xff1a;<strong>MDN</strong> &#x6c38;&#x8fdc;&#x662f;&#x6700;&#x6743;&#x5a01;&#x7684;&#x5b9d;&#x5178;&#xff1b;",
+                      children: [],
+                      payload: { tag: "li", lines: "59,60" },
+                    },
+                    {
+                      content:
+                        "&#x6846;&#x67b6;&#x4e0e;&#x5de5;&#x5177;&#xff1a;&#x4f18;&#x5148;&#x770b;<strong>&#x5b98;&#x65b9;&#x6559;&#x7a0b;&#x4e0e;&#x6587;&#x6863;</strong>&#xff08;Next.js Docs&#x3001;Solid Docs&#x3001;Qwik Docs &#x7b49;&#xff09;&#xff1b;",
+                      children: [],
+                      payload: { tag: "li", lines: "60,61" },
+                    },
+                    {
+                      content:
+                        "&#x7406;&#x89e3;&#x539f;&#x7406;&#xff1a;&#x76f4;&#x63a5;&#x8bfb; <strong>Vite&#x3001;esbuild&#x3001;Million.js&#x3001;Preact&#x3001;TanStack&#x3001;Zustand</strong> &#x7b49;&#x660e;&#x661f;&#x5f00;&#x6e90;&#x5e93;&#x6e90;&#x7801;&#xff1b;",
+                      children: [],
+                      payload: { tag: "li", lines: "61,62" },
+                    },
+                    {
+                      content:
+                        "&#x5b66;&#x4e60; AI &#x9a71;&#x52a8;&#x5f00;&#x53d1;&#xff1a;<strong>Cursor&#x3001;v0.dev&#x3001;Claude Projects&#x3001;Lovart</strong> &#x7684;&#x5b98;&#x65b9;&#x793a;&#x4f8b;&#x4e0e;&#x63d0;&#x793a;&#x8bcd;&#x5de5;&#x7a0b;&#x6848;&#x4f8b;&#x662f;&#x6700;&#x4f73;&#x8d77;&#x70b9;&#xff1b;",
+                      children: [],
+                      payload: { tag: "li", lines: "62,63" },
+                    },
+                    {
+                      content:
+                        "&#x793e;&#x533a;&#x4e0e;&#x7cfb;&#x7edf;&#x8bfe;&#x7a0b;&#xff1a;Frontend Masters&#x3001;egghead.io&#x3001;ByteDance FE &#x57f9;&#x8bad;&#x8425;&#x3001;freeCodeCamp &#x7b49;&#xff1b;",
+                      children: [],
+                      payload: { tag: "li", lines: "63,65" },
+                    },
+                  ],
+                  payload: { tag: "ul", lines: "59,65" },
+                },
+              ],
+              payload: { tag: "h2", lines: "23,24" },
+            },
+            {
+              content:
+                "<strong>II. &#x57fa;&#x7840; Web &#x6280;&#x672f;&#xff1a;&#x6838;&#x5fc3;&#x652f;&#x67f1;</strong>",
+              children: [
+                {
+                  content:
+                    "<strong>&#x5173;&#x4e8e;&#x4e92;&#x8054;&#x7f51; (Internet) &#x7684;&#x57fa;&#x7840;&#x77e5;&#x8bc6;</strong>",
+                  children: [
+                    {
+                      content:
+                        '1. \n<p data-lines="73,74"><strong>&#x4e92;&#x8054;&#x7f51;&#x5982;&#x4f55;&#x8fd0;&#x4f5c;&#xff1f;</strong></p>\n<p data-lines="75,76">&#x4e92;&#x8054;&#x7f51;&#x662f;&#x4e00;&#x4e2a;&#x8fde;&#x63a5;&#x5168;&#x7403;&#x65e0;&#x6570;&#x8ba1;&#x7b97;&#x673a;&#x8bbe;&#x5907;&#x7684;&#x5de8;&#x5927;&#x7f51;&#x7edc;&#xff0c;&#x5e38;&#x88ab;&#x79f0;&#x4e3a;&#x201c;&#x7f51;&#x7edc;&#x7684;&#x7f51;&#x7edc;&#x201d;&#x3002;&#x5b83;&#x7684;&#x57fa;&#x672c;&#x5de5;&#x4f5c;&#x539f;&#x7406;&#x5982;&#x4e0b;&#xff1a;</p>',
+                      children: [
+                        {
+                          content:
+                            "&#x6570;&#x636e;&#x5305;&#x4ea4;&#x6362;&#xff1a;&#x5728;&#x4e92;&#x8054;&#x7f51;&#x4e0a;&#x53d1;&#x9001;&#x6216;&#x63a5;&#x6536;&#x4fe1;&#x606f;&#xff08;&#x5982;&#x7f51;&#x9875;&#x6216;&#x7535;&#x5b50;&#x90ae;&#x4ef6;&#xff09;&#x65f6;&#xff0c;&#x8fd9;&#x4e9b;&#x6570;&#x636e;&#x4f1a;&#x88ab;&#x5206;&#x89e3;&#x6210;&#x8bb8;&#x591a;&#x5c0f;&#x7684;&#x6570;&#x636e;&#x5305;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "76,77" },
+                        },
+                        {
+                          content:
+                            '&#x534f;&#x8bae; (<a href="https://www.ietf.org/rfc/rfc793.txt">TCP/IP</a>)&#xff1a;&#x6bcf;&#x4e2a;&#x6570;&#x636e;&#x5305;&#x90fd;&#x9075;&#x5faa;&#x4e00;&#x5957;&#x79f0;&#x4e3a;&#x201c;&#x4f20;&#x8f93;&#x63a7;&#x5236;&#x534f;&#x8bae;/&#x7f51;&#x9645;&#x534f;&#x8bae;&#x201d;(TCP/IP) &#x7684;&#x89c4;&#x5219;&#x3002;TCP &#x8d1f;&#x8d23;&#x786e;&#x4fdd;&#x6240;&#x6709;&#x6570;&#x636e;&#x5305;&#x90fd;&#x80fd;&#x51c6;&#x786e;&#x65e0;&#x8bef;&#x5730;&#x5230;&#x8fbe;&#x76ee;&#x7684;&#x5730;&#x5e76;&#x6309;&#x6b63;&#x786e;&#x987a;&#x5e8f;&#x91cd;&#x65b0;&#x7ec4;&#x88c5;&#xff0c;&#x800c; IP &#x8d1f;&#x8d23;&#x4e3a;&#x6bcf;&#x4e2a;&#x6570;&#x636e;&#x5305;&#x8d34;&#x4e0a;&#x5730;&#x5740;&#x6807;&#x7b7e;&#xff0c;&#x6307;&#x660e;&#x5176;&#x76ee;&#x7684;&#x5730;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "77,78" },
+                        },
+                        {
+                          content:
+                            "&#x8def;&#x7531;&#x548c;&#x4f20;&#x8f93;&#xff1a;&#x8fd9;&#x4e9b;&#x6570;&#x636e;&#x5305;&#x901a;&#x8fc7;&#x7531;&#x8def;&#x7531;&#x5668;&#x3001;&#x4ea4;&#x6362;&#x673a;&#x3001;&#x5149;&#x7ea4;&#x7535;&#x7f06;&#x3001;&#x65e0;&#x7ebf;&#x7535;&#x6ce2;&#x7b49;&#x7ec4;&#x6210;&#x7684;&#x590d;&#x6742;&#x7269;&#x7406;&#x7f51;&#x7edc;&#x8fdb;&#x884c;&#x4f20;&#x8f93;&#x3002;&#x8def;&#x7531;&#x5668;&#x5c31;&#x50cf;&#x4ea4;&#x901a;&#x8b66;&#x5bdf;&#xff0c;&#x8bfb;&#x53d6;&#x6bcf;&#x4e2a;&#x6570;&#x636e;&#x5305;&#x7684; IP &#x5730;&#x5740;&#xff0c;&#x5e76;&#x4e3a;&#x5176;&#x89c4;&#x5212;&#x51fa;&#x5230;&#x8fbe;&#x6700;&#x7ec8;&#x76ee;&#x7684;&#x5730;&#x7684;&#x6700;&#x4f73;&#x8def;&#x5f84;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "78,79" },
+                        },
+                        {
+                          content:
+                            "&#x5ba2;&#x6237;&#x7aef;&#x4e0e;&#x670d;&#x52a1;&#x5668;&#xff1a;&#x5728;&#x8fd9;&#x4e2a;&#x6a21;&#x578b;&#x4e2d;&#xff0c;&#x4f60;&#x7684;&#x8bbe;&#x5907;&#xff08;&#x5982;&#x7535;&#x8111;&#x6216;&#x624b;&#x673a;&#xff09;&#x901a;&#x5e38;&#x662f;&#x201c;&#x5ba2;&#x6237;&#x7aef;&#x201d;&#xff0c;&#x5b83;&#x5411;&#x5b58;&#x50a8;&#x7f51;&#x7ad9;&#x4fe1;&#x606f;&#x6216;&#x670d;&#x52a1;&#x7684;&#x201c;&#x670d;&#x52a1;&#x5668;&#x201d;&#x53d1;&#x51fa;&#x8bf7;&#x6c42;&#x3002;&#x670d;&#x52a1;&#x5668;&#x63a5;&#x6536;&#x8bf7;&#x6c42;&#x540e;&#xff0c;&#x4f1a;&#x5c06;&#x76f8;&#x5e94;&#x7684;&#x6570;&#x636e;&#x5305;&#x53d1;&#x56de;&#x7ed9;&#x5ba2;&#x6237;&#x7aef;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "79,81" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "73,83", listIndex: 1 },
+                    },
+                    {
+                      content:
+                        '2. \n<p data-lines="83,84"><strong>&#x4ec0;&#x4e48;&#x662f; <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a>&#xff1f;</strong></p>\n<p data-lines="85,86">HTTP &#x6307;&#x7684;&#x662f;&#x8d85;&#x6587;&#x672c;&#x4f20;&#x8f93;&#x534f;&#x8bae; (Hypertext Transfer Protocol)&#x3002;&#x5b83;&#x662f;&#x7528;&#x4e8e;&#x5728;&#x4e07;&#x7ef4;&#x7f51; (World Wide Web) &#x4e0a;&#x4f20;&#x8f93;&#x6570;&#x636e;&#x7684;&#x6838;&#x5fc3;&#x534f;&#x8bae;&#xff0c;&#x89c4;&#x5b9a;&#x4e86;&#x6d4f;&#x89c8;&#x5668;&#xff08;&#x5ba2;&#x6237;&#x7aef;&#xff09;&#x548c;&#x670d;&#x52a1;&#x5668;&#x4e4b;&#x95f4;&#x8bf7;&#x6c42;&#x548c;&#x54cd;&#x5e94;&#x7684;&#x683c;&#x5f0f;&#x4e0e;&#x89c4;&#x5219;&#x3002;</p>\n<p data-lines="87,88">&#x5f53;&#x4f60;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x8f93;&#x5165;&#x7f51;&#x5740;&#x65f6;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x4f1a;&#x5411;&#x8be5;&#x7f51;&#x5740;&#x6240;&#x5728;&#x7684;&#x670d;&#x52a1;&#x5668;&#x53d1;&#x9001;&#x4e00;&#x4e2a; HTTP &#x8bf7;&#x6c42;&#x3002;&#x670d;&#x52a1;&#x5668;&#x6536;&#x5230;&#x8bf7;&#x6c42;&#x540e;&#xff0c;&#x4f1a;&#x5904;&#x7406;&#x5b83;&#x5e76;&#x8fd4;&#x56de;&#x4e00;&#x4e2a; HTTP &#x54cd;&#x5e94;&#xff0c;&#x8fd9;&#x4e2a;&#x54cd;&#x5e94;&#x901a;&#x5e38;&#x5305;&#x542b;&#x4e86;&#x4f60;&#x8bf7;&#x6c42;&#x7684;&#x7f51;&#x9875;&#x5185;&#x5bb9;&#xff0c;&#x5982; HTML &#x6587;&#x4ef6;&#x3001;&#x56fe;&#x7247;&#x3001;CSS &#x6837;&#x5f0f;&#x8868;&#x7b49;&#x3002;HTTP &#x672c;&#x8eab;&#x662f;&#x4e00;&#x4e2a;&#x201c;&#x65e0;&#x72b6;&#x6001;&#x201d;&#x534f;&#x8bae;&#xff0c;&#x610f;&#x5473;&#x7740;&#x670d;&#x52a1;&#x5668;&#x4e0d;&#x4f1a;&#x8bb0;&#x5f55;&#x4e4b;&#x524d;&#x6765;&#x81ea;&#x540c;&#x4e00;&#x5ba2;&#x6237;&#x7aef;&#x7684;&#x8bf7;&#x6c42;&#x5386;&#x53f2;&#x3002;&#x4e3a;&#x4e86;&#x5b9e;&#x73b0;&#x8de8;&#x9875;&#x9762;&#x7684;&#x72b6;&#x6001;&#x4fdd;&#x6301;&#xff08;&#x5982;&#x7528;&#x6237;&#x767b;&#x5f55;&#x72b6;&#x6001;&#xff09;&#xff0c;&#x901a;&#x5e38;&#x4f1a;&#x4f7f;&#x7528; Cookies &#x7b49;&#x6280;&#x672f;&#x3002;</p>\n<p data-lines="89,90"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS">HTTPS</a> &#x662f; HTTP &#x7684;&#x5b89;&#x5168;&#x7248;&#x672c; (Hypertext Transfer Protocol Secure)&#xff0c;&#x5b83;&#x901a;&#x8fc7;&#x52a0;&#x5bc6;&#x6765;&#x4fdd;&#x62a4;&#x6570;&#x636e;&#x4f20;&#x8f93;&#x8fc7;&#x7a0b;&#x4e2d;&#x7684;&#x5b89;&#x5168;&#xff0c;&#x9632;&#x6b62;&#x4fe1;&#x606f;&#x88ab;&#x7a83;&#x53d6;&#x6216;&#x7be1;&#x6539;&#x3002;</p>',
+                      children: [],
+                      payload: { tag: "li", lines: "83,91", listIndex: 2 },
+                    },
+                    {
+                      content:
+                        '3. \n<p data-lines="91,92"><strong>&#x4ec0;&#x4e48;&#x662f;&#x57df;&#x540d;&#xff1f;</strong></p>\n<p data-lines="93,94">&#x57df;&#x540d; (Domain Name) &#x662f;&#x4e92;&#x8054;&#x7f51;&#x4e0a;&#x7f51;&#x7ad9;&#x7684;&#x6613;&#x4e8e;&#x8bb0;&#x5fc6;&#x7684;&#x5730;&#x5740;&#xff0c;&#x76f8;&#x5f53;&#x4e8e;&#x7f51;&#x7ad9;&#x7684;&#x201c;&#x95e8;&#x724c;&#x53f7;&#x201d;&#x3002;&#x4f8b;&#x5982; google.com &#x6216; wikipedia.org &#x5c31;&#x662f;&#x57df;&#x540d;&#x3002;</p>\n<p data-lines="95,96">&#x8ba1;&#x7b97;&#x673a;&#x5728;&#x7f51;&#x7edc;&#x4e0a;&#x76f8;&#x4e92;&#x901a;&#x4fe1;&#x65f6;&#xff0c;&#x4f7f;&#x7528;&#x7684;&#x662f;&#x4e00;&#x957f;&#x4e32;&#x6570;&#x5b57;&#x7ec4;&#x6210;&#x7684; IP &#x5730;&#x5740;&#xff08;&#x4f8b;&#x5982; 172.217.160.78&#xff09;&#x3002;&#x4f46;&#x8fd9;&#x79cd;&#x6570;&#x5b57;&#x5730;&#x5740;&#x5bf9;&#x4eba;&#x7c7b;&#x6765;&#x8bf4;&#x96be;&#x4ee5;&#x8bb0;&#x5fc6;&#x3002;&#x57df;&#x540d;&#x7684;&#x4f5c;&#x7528;&#x5c31;&#x662f;&#x5c06;&#x8fd9;&#x4e9b;&#x590d;&#x6742;&#x7684; IP &#x5730;&#x5740;&#x8f6c;&#x6362;&#x6210;&#x6709;&#x610f;&#x4e49;&#x4e14;&#x6613;&#x4e8e;&#x8bb0;&#x5fc6;&#x7684;&#x5b57;&#x7b26;&#x7ec4;&#x5408;&#x3002;&#x5f53;&#x4f60;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x8f93;&#x5165;&#x57df;&#x540d;&#x65f6;&#xff0c;&#x4e00;&#x4e2a;&#x540d;&#x4e3a; DNS&#xff08;&#x57df;&#x540d;&#x7cfb;&#x7edf;&#xff09;&#x7684;&#x7cfb;&#x7edf;&#x4f1a;&#x81ea;&#x52a8;&#x5c06;&#x8fd9;&#x4e2a;&#x57df;&#x540d;&#x201c;&#x7ffb;&#x8bd1;&#x201d;&#x6210;&#x5bf9;&#x5e94;&#x7684; IP &#x5730;&#x5740;&#xff0c;&#x4ece;&#x800c;&#x8ba9;&#x6d4f;&#x89c8;&#x5668;&#x80fd;&#x591f;&#x627e;&#x5230;&#x5e76;&#x8fde;&#x63a5;&#x5230;&#x6b63;&#x786e;&#x7684;&#x670d;&#x52a1;&#x5668;&#x3002;</p>',
+                      children: [],
+                      payload: { tag: "li", lines: "91,97", listIndex: 3 },
+                    },
+                    {
+                      content:
+                        '4. \n<p data-lines="97,98"><strong>&#x4ec0;&#x4e48;&#x662f;&#x6258;&#x7ba1;&#xff1f;</strong></p>\n<p data-lines="99,100">&#x7f51;&#x7ad9;&#x6258;&#x7ba1;&#xff08;Web Hosting&#xff09;&#xff0c;&#x4e5f;&#x5e38;&#x88ab;&#x79f0;&#x4e3a;&#x201c;&#x4e3b;&#x673a;&#x201d;&#x6216;&#x201c;&#x7a7a;&#x95f4;&#x201d;&#xff0c;&#x662f;&#x4e00;&#x79cd;&#x5141;&#x8bb8;&#x4e2a;&#x4eba;&#x6216;&#x7ec4;&#x7ec7;&#x5c06;&#x5176;&#x7f51;&#x7ad9;&#x53d1;&#x5e03;&#x5230;&#x4e92;&#x8054;&#x7f51;&#x4e0a;&#x7684;&#x670d;&#x52a1;&#x3002;</p>\n<p data-lines="101,102">&#x53ef;&#x4ee5;&#x8fd9;&#x6837;&#x7406;&#x89e3;&#xff1a;&#x5982;&#x679c;&#x57df;&#x540d;&#x662f;&#x4f60;&#x7f51;&#x7ad9;&#x7684;&#x201c;&#x95e8;&#x724c;&#x53f7;&#x201d;&#xff0c;&#x90a3;&#x4e48;&#x7f51;&#x7ad9;&#x6258;&#x7ba1;&#x5c31;&#x662f;&#x4f60;&#x5b58;&#x653e;&#x7f51;&#x7ad9;&#x5185;&#x5bb9;&#x7684;&#x201c;&#x623f;&#x5b50;&#x201d;&#x3002;&#x8fd9;&#x4e2a;&#x201c;&#x623f;&#x5b50;&#x201d;&#x5176;&#x5b9e;&#x662f;&#x4e00;&#x53f0;&#x6216;&#x4e00;&#x7ec4;&#x4e00;&#x76f4;&#x4fdd;&#x6301;&#x5f00;&#x673a;&#x5e76;&#x8fde;&#x63a5;&#x5230;&#x4e92;&#x8054;&#x7f51;&#x7684;&#x5f3a;&#x5927;&#x8ba1;&#x7b97;&#x673a;&#xff0c;&#x5373;&#x670d;&#x52a1;&#x5668;&#x3002;</p>\n<p data-lines="103,104">&#x5f53;&#x4f60;&#x521b;&#x5efa;&#x4e86;&#x4e00;&#x4e2a;&#x7f51;&#x7ad9;&#xff0c;&#x6240;&#x6709;&#x6784;&#x6210;&#x8fd9;&#x4e2a;&#x7f51;&#x7ad9;&#x7684;&#x6587;&#x4ef6;&#xff08;&#x5982; HTML &#x4ee3;&#x7801;&#x3001;CSS &#x6837;&#x5f0f;&#x8868;&#x3001;&#x56fe;&#x7247;&#x3001;&#x89c6;&#x9891;&#x3001;&#x6570;&#x636e;&#x5e93;&#x7b49;&#xff09;&#x90fd;&#x9700;&#x8981;&#x4e00;&#x4e2a;&#x5730;&#x65b9;&#x5b58;&#x653e;&#xff0c;&#x4ee5;&#x4fbf;&#x5168;&#x4e16;&#x754c;&#x7684;&#x7528;&#x6237;&#x90fd;&#x80fd;&#x968f;&#x65f6;&#x8bbf;&#x95ee;&#x3002;&#x6258;&#x7ba1;&#x670d;&#x52a1;&#x5546;&#x5c31;&#x63d0;&#x4f9b;&#x4e86;&#x8fd9;&#x6837;&#x7684;&#x670d;&#x52a1;&#x5668;&#x7a7a;&#x95f4;&#x3001;&#x7f51;&#x7edc;&#x8fde;&#x63a5;&#x4ee5;&#x53ca;&#x76f8;&#x5173;&#x7684;&#x7ef4;&#x62a4;&#x670d;&#x52a1;&#x3002;&#x5f53;&#x6709;&#x4eba;&#x901a;&#x8fc7;&#x57df;&#x540d;&#x8bbf;&#x95ee;&#x4f60;&#x7684;&#x7f51;&#x7ad9;&#x65f6;&#xff0c;&#x4ed6;&#x4eec;&#x7684;&#x6d4f;&#x89c8;&#x5668;&#x5b9e;&#x9645;&#x4e0a;&#x5c31;&#x662f;&#x8fde;&#x63a5;&#x5230;&#x4e86;&#x6258;&#x7ba1;&#x4f60;&#x7f51;&#x7ad9;&#x6587;&#x4ef6;&#x7684;&#x8fd9;&#x53f0;&#x670d;&#x52a1;&#x5668;&#x4e0a;&#xff0c;&#x5e76;&#x4e0b;&#x8f7d;&#x6587;&#x4ef6;&#x8fdb;&#x884c;&#x663e;&#x793a;&#x3002;</p>',
+                      children: [],
+                      payload: { tag: "li", lines: "97,105", listIndex: 4 },
+                    },
+                    {
+                      content:
+                        '5. \n<p data-lines="105,106"><strong>DNS &#x53ca;&#x5176;&#x5de5;&#x4f5c;&#x539f;&#x7406;&#xff1f;</strong></p>\n<p data-lines="107,108">DNS &#x6307;&#x7684;&#x662f;&#x57df;&#x540d;&#x7cfb;&#x7edf; (Domain Name System)&#x3002;&#x5b83;&#x5e38;&#x88ab;&#x79f0;&#x4e3a;&#x201c;&#x4e92;&#x8054;&#x7f51;&#x7684;&#x7535;&#x8bdd;&#x7c3f;&#x201d;&#xff0c;&#x5176;&#x6838;&#x5fc3;&#x529f;&#x80fd;&#x662f;&#x8d1f;&#x8d23;&#x5c06;&#x4eba;&#x7c7b;&#x6613;&#x4e8e;&#x8bb0;&#x5fc6;&#x7684;&#x57df;&#x540d;&#xff08;&#x5982; google.com&#xff09;&#x89e3;&#x6790;&#xff08;&#x6216;&#x7ffb;&#x8bd1;&#xff09;&#x6210;&#x8ba1;&#x7b97;&#x673a;&#x80fd;&#x591f;&#x7406;&#x89e3;&#x7684; IP &#x5730;&#x5740;&#xff08;&#x5982; 172.217.160.78&#xff09;&#x3002;</p>\n<p data-lines="109,110">DNS &#x7684;&#x5de5;&#x4f5c;&#x6d41;&#x7a0b;&#x5927;&#x81f4;&#x5982;&#x4e0b;&#xff1a;</p>',
+                      children: [
+                        {
+                          content:
+                            "&#x7528;&#x6237;&#x8bf7;&#x6c42;&#xff1a;&#x5f53;&#x4f60;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x8f93;&#x5165;&#x7f51;&#x5740;&#x65f6;&#xff0c;&#x4f60;&#x7684;&#x8ba1;&#x7b97;&#x673a;&#x4f1a;&#x5411;&#x672c;&#x5730;&#x7f51;&#x7edc;&#x4e2d;&#x7684; DNS &#x670d;&#x52a1;&#x5668;&#xff08;&#x901a;&#x5e38;&#x7531;&#x4f60;&#x7684;&#x4e92;&#x8054;&#x7f51;&#x670d;&#x52a1;&#x63d0;&#x4f9b;&#x5546; ISP &#x63d0;&#x4f9b;&#xff09;&#x53d1;&#x51fa;&#x67e5;&#x8be2;&#x8bf7;&#x6c42;&#xff1a;&#x201c;google.com &#x5bf9;&#x5e94;&#x7684; IP &#x5730;&#x5740;&#x662f;&#x4ec0;&#x4e48;&#xff1f;&#x201d;",
+                          children: [],
+                          payload: { tag: "li", lines: "110,111" },
+                        },
+                        {
+                          content:
+                            "&#x9012;&#x5f52;&#x67e5;&#x8be2;&#xff1a;&#x5982;&#x679c;&#x672c;&#x5730; DNS &#x670d;&#x52a1;&#x5668;&#x7684;&#x7f13;&#x5b58;&#x4e2d;&#x6ca1;&#x6709;&#x8bb0;&#x5f55;&#xff0c;&#x5b83;&#x5c31;&#x4f1a;&#x5411;&#x4e92;&#x8054;&#x7f51;&#x4e0a;&#x7684;&#x5176;&#x4ed6; DNS &#x670d;&#x52a1;&#x5668;&#x9010;&#x7ea7;&#x67e5;&#x8be2;&#xff0c;&#x8fd9;&#x4e2a;&#x8fc7;&#x7a0b;&#x4ece;&#x6839;&#x57df;&#x540d;&#x670d;&#x52a1;&#x5668;&#x5f00;&#x59cb;&#xff0c;&#x5230;&#x9876;&#x7ea7;&#x57df;&#x540d;&#xff08;.com&#xff09;&#x670d;&#x52a1;&#x5668;&#xff0c;&#x6700;&#x540e;&#x5230;&#x8d1f;&#x8d23;&#x8be5;&#x57df;&#x540d;&#x7684;&#x6743;&#x5a01;&#x57df;&#x540d;&#x670d;&#x52a1;&#x5668;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "111,112" },
+                        },
+                        {
+                          content:
+                            "&#x83b7;&#x53d6; IP &#x5730;&#x5740;&#xff1a;&#x6743;&#x5a01;&#x57df;&#x540d;&#x670d;&#x52a1;&#x5668;&#x5b58;&#x6709;&#x8be5;&#x57df;&#x540d;&#x4e0e; IP &#x5730;&#x5740;&#x7684;&#x6700;&#x7ec8;&#x5bf9;&#x5e94;&#x5173;&#x7cfb;&#xff0c;&#x5b83;&#x4f1a;&#x5c06;&#x8fd9;&#x4e2a; IP &#x5730;&#x5740;&#x8fd4;&#x56de;&#x7ed9;&#x672c;&#x5730; DNS &#x670d;&#x52a1;&#x5668;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "112,113" },
+                        },
+                        {
+                          content:
+                            "&#x8fd4;&#x56de;&#x7ed9;&#x7528;&#x6237;&#xff1a;&#x672c;&#x5730; DNS &#x670d;&#x52a1;&#x5668;&#x5728;&#x6536;&#x5230; IP &#x5730;&#x5740;&#x540e;&#xff0c;&#x4f1a;&#x5c06;&#x5176;&#x8fd4;&#x56de;&#x7ed9;&#x4f60;&#x7684;&#x8ba1;&#x7b97;&#x673a;&#xff0c;&#x5e76;&#x901a;&#x5e38;&#x4f1a;&#x5c06;&#x5176;&#x7f13;&#x5b58;&#x4e00;&#x6bb5;&#x65f6;&#x95f4;&#xff0c;&#x4ee5;&#x4fbf;&#x4e0b;&#x6b21;&#x67e5;&#x8be2;&#x65f6;&#x80fd;&#x66f4;&#x5feb;&#x54cd;&#x5e94;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "113,114" },
+                        },
+                        {
+                          content:
+                            "&#x5efa;&#x7acb;&#x8fde;&#x63a5;&#xff1a;&#x4f60;&#x7684;&#x6d4f;&#x89c8;&#x5668;&#x5728;&#x83b7;&#x5f97;&#x8fd9;&#x4e2a; IP &#x5730;&#x5740;&#x540e;&#xff0c;&#x5c31;&#x80fd;&#x51c6;&#x786e;&#x5730;&#x627e;&#x5230;&#x5b58;&#x653e;&#x7f51;&#x7ad9;&#x5185;&#x5bb9;&#x7684;&#x670d;&#x52a1;&#x5668;&#xff0c;&#x5e76;&#x4e0e;&#x5176;&#x5efa;&#x7acb;&#x8fde;&#x63a5;&#xff0c;&#x5f00;&#x59cb;&#x8bf7;&#x6c42;&#x7f51;&#x9875;&#x6570;&#x636e;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "114,116" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "105,118", listIndex: 5 },
+                    },
+                    {
+                      content:
+                        '6. \n<p data-lines="118,119"><strong>&#x6d4f;&#x89c8;&#x5668;&#x53ca;&#x5176;&#x5de5;&#x4f5c;&#x539f;&#x7406;&#xff1f;</strong></p>\n<p data-lines="120,121">&#x6d4f;&#x89c8;&#x5668;&#xff08;Browser&#xff09;&#x662f;&#x4e00;&#x4e2a;&#x5b89;&#x88c5;&#x5728;&#x4f60;&#x7535;&#x8111;&#x6216;&#x624b;&#x673a;&#x4e0a;&#x7684;&#x8f6f;&#x4ef6;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#xff0c;&#x5b83;&#x7684;&#x4e3b;&#x8981;&#x5de5;&#x4f5c;&#x662f;&#x5411;&#x670d;&#x52a1;&#x5668;&#x8bf7;&#x6c42;&#x3001;&#x83b7;&#x53d6;&#x3001;&#x89e3;&#x6790;&#x5e76;&#x6700;&#x7ec8;&#x5728;&#x5c4f;&#x5e55;&#x4e0a;&#x663e;&#x793a;&#x7f51;&#x9875;&#x5185;&#x5bb9;&#x3002;&#x5b83;&#x662f;&#x4e00;&#x4e2a;&#x529f;&#x80fd;&#x5f3a;&#x5927;&#x7684;&#x201c;&#x5ba2;&#x6237;&#x7aef;&#x201d;&#x3002;</p>\n<p data-lines="122,123">&#x6d4f;&#x89c8;&#x5668;&#x7684;&#x5de5;&#x4f5c;&#x539f;&#x7406;&#x53ef;&#x4ee5;&#x5206;&#x4e3a;&#x4ee5;&#x4e0b;&#x51e0;&#x4e2a;&#x4e3b;&#x8981;&#x6b65;&#x9aa4;&#xff1a;</p>',
+                      children: [
+                        {
+                          content:
+                            "&#x5904;&#x7406;&#x7528;&#x6237;&#x8f93;&#x5165;&#xff1a;&#x4f60;&#x5728;&#x5730;&#x5740;&#x680f;&#x8f93;&#x5165; URL&#xff08;&#x7f51;&#x5740;&#xff09;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "123,124" },
+                        },
+                        {
+                          content:
+                            "DNS &#x67e5;&#x8be2;&#xff1a;&#x6d4f;&#x89c8;&#x5668;&#x9996;&#x5148;&#x4f1a;&#x901a;&#x8fc7; DNS &#x7cfb;&#x7edf;&#x67e5;&#x8be2;&#x8be5; URL &#x4e2d;&#x57df;&#x540d;&#x7684; IP &#x5730;&#x5740;&#xff08;&#x5982;&#x4e0a;&#x6240;&#x8ff0;&#xff09;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "124,125" },
+                        },
+                        {
+                          content:
+                            '&#x53d1;&#x9001; HTTP &#x8bf7;&#x6c42;&#xff1a;&#x6d4f;&#x89c8;&#x5668;&#x4f7f;&#x7528;&#x83b7;&#x53d6;&#x5230;&#x7684; IP &#x5730;&#x5740;&#xff0c;&#x5411;&#x76ee;&#x6807;&#x670d;&#x52a1;&#x5668;&#x53d1;&#x9001;&#x4e00;&#x4e2a; <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> &#x8bf7;&#x6c42;&#xff0c;&#x8bf7;&#x6c42;&#x83b7;&#x53d6;&#x8be5;&#x9875;&#x9762;&#x7684;&#x5185;&#x5bb9;&#xff08;&#x901a;&#x5e38;&#x662f;&#x4e00;&#x4e2a; HTML &#x6587;&#x4ef6;&#xff09;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "125,126" },
+                        },
+                        {
+                          content:
+                            "&#x63a5;&#x6536;&#x670d;&#x52a1;&#x5668;&#x54cd;&#x5e94;&#xff1a;&#x670d;&#x52a1;&#x5668;&#x63a5;&#x6536;&#x5230;&#x8bf7;&#x6c42;&#x540e;&#xff0c;&#x4f1a;&#x5c06;&#x5305;&#x542b; HTML&#x3001;CSS&#x3001;JavaScript &#x7b49;&#x5185;&#x5bb9;&#x7684;&#x6570;&#x636e;&#x5305;&#x6253;&#x5305;&#x5728;&#x4e00;&#x4e2a; HTTP &#x54cd;&#x5e94;&#x4e2d;&#x53d1;&#x9001;&#x56de;&#x6d4f;&#x89c8;&#x5668;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "126,127" },
+                        },
+                        {
+                          content:
+                            "&#x6e32;&#x67d3;&#x9875;&#x9762;&#xff1a;&#x8fd9;&#x662f;&#x6700;&#x6838;&#x5fc3;&#x7684;&#x4e00;&#x6b65;&#x3002;",
+                          children: [
+                            {
+                              content:
+                                '&#x6d4f;&#x89c8;&#x5668;&#x9996;&#x5148;&#x4f1a;&#x89e3;&#x6790; HTML &#x6587;&#x4ef6;&#xff0c;&#x6784;&#x5efa;&#x201c;&#x6587;&#x6863;&#x5bf9;&#x8c61;&#x6a21;&#x578b;&#x201d;(<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a> &#x6811;)&#xff0c;&#x8fd9;&#x4ee3;&#x8868;&#x4e86;&#x9875;&#x9762;&#x7684;&#x7ed3;&#x6784;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "128,129" },
+                            },
+                            {
+                              content:
+                                "&#x63a5;&#x7740;&#xff0c;&#x5b83;&#x4f1a;&#x89e3;&#x6790; CSS &#x6587;&#x4ef6;&#xff0c;&#x6784;&#x5efa;&#x201c;CSS &#x5bf9;&#x8c61;&#x6a21;&#x578b;&#x201d;(CSSOM &#x6811;)&#xff0c;&#x8fd9;&#x4ee3;&#x8868;&#x4e86;&#x9875;&#x9762;&#x7684;&#x6837;&#x5f0f;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "129,130" },
+                            },
+                            {
+                              content:
+                                "&#x7136;&#x540e;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x5c06; DOM &#x6811;&#x548c; CSSOM &#x6811;&#x7ed3;&#x5408;&#x8d77;&#x6765;&#xff0c;&#x751f;&#x6210;&#x201c;&#x6e32;&#x67d3;&#x6811;&#x201d;(Render Tree)&#xff0c;&#x786e;&#x5b9a;&#x9875;&#x9762;&#x4e0a;&#x6bcf;&#x4e2a;&#x5143;&#x7d20;&#x7684;&#x5177;&#x4f53;&#x6837;&#x5f0f;&#x548c;&#x4f4d;&#x7f6e;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "130,131" },
+                            },
+                            {
+                              content:
+                                "&#x6700;&#x540e;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x6839;&#x636e;&#x6e32;&#x67d3;&#x6811;&#x5c06;&#x9875;&#x9762;&#x5185;&#x5bb9;&#x201c;&#x7ed8;&#x5236;&#x201d;&#x5230;&#x5c4f;&#x5e55;&#x4e0a;&#xff0c;&#x5448;&#x73b0;&#x51fa;&#x4f60;&#x6240;&#x770b;&#x5230;&#x7684;&#x89c6;&#x89c9;&#x6548;&#x679c;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "131,132" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "127,132" },
+                        },
+                        {
+                          content:
+                            "&#x6267;&#x884c; JavaScript&#xff1a;&#x5728;&#x6e32;&#x67d3;&#x8fc7;&#x7a0b;&#x4e2d;&#x6216;&#x6e32;&#x67d3;&#x5b8c;&#x6210;&#x540e;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x4f1a;&#x6267;&#x884c;&#x9875;&#x9762;&#x4e2d;&#x5305;&#x542b;&#x7684; JavaScript &#x4ee3;&#x7801;&#x3002;&#x8fd9;&#x4e9b;&#x4ee3;&#x7801;&#x53ef;&#x4ee5;&#x52a8;&#x6001;&#x5730;&#x4fee;&#x6539;&#x9875;&#x9762;&#x7684;&#x5185;&#x5bb9;&#x548c;&#x6837;&#x5f0f;&#xff0c;&#x6216;&#x54cd;&#x5e94;&#x7528;&#x6237;&#x7684;&#x4ea4;&#x4e92;&#x64cd;&#x4f5c;&#xff08;&#x5982;&#x70b9;&#x51fb;&#x3001;&#x6eda;&#x52a8;&#x7b49;&#xff09;&#xff0c;&#x4f7f;&#x7f51;&#x9875;&#x5177;&#x6709;&#x4ea4;&#x4e92;&#x6027;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "132,134" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "118,134", listIndex: 6 },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "71,72" },
+                },
+                {
+                  content:
+                    "<strong>HTML&#xff1a;&#x6784;&#x5efa;&#x7f51;&#x9875;&#x7ed3;&#x6784;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8bed;&#x4e49;&#x5316; HTML&#xff1a;&#x8d4b;&#x4e88;&#x610f;&#x4e49;&#x548c;&#x63d0;&#x5347;&#x53ef;&#x8bbf;&#x95ee;&#x6027;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "140,141" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x8868;&#x5355;&#xff1a;&#x7528;&#x6237;&#x8f93;&#x5165;&#x548c;&#x4ea4;&#x4e92;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "146,147" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "134,135" },
+                },
+                {
+                  content:
+                    "<strong>CSS&#xff1a;&#x6837;&#x5f0f;&#x548c;&#x5e03;&#x5c40;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x57fa;&#x7840;&#xff1a;&#x9009;&#x62e9;&#x5668;&#x3001;&#x5c42;&#x53e0;&#x3001;&#x7279;&#x5f02;&#x6027;&#x3001;&#x7ee7;&#x627f;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5c42;&#x53e0;</strong>&#x51b3;&#x5b9a;&#x4e86;&#x5f53;&#x591a;&#x4e2a;&#x89c4;&#x5219;&#x9488;&#x5bf9;&#x540c;&#x4e00;&#x5143;&#x7d20;&#x65f6;&#xff0c;&#x6837;&#x5f0f;&#x5982;&#x4f55;&#x6839;&#x636e;&#x6765;&#x6e90;&#x3001;&#x91cd;&#x8981;&#x6027;&#x548c;&#x987a;&#x5e8f;&#x5e94;&#x7528;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "158,159" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7279;&#x5f02;&#x6027;</strong>&#x662f;&#x5206;&#x914d;&#x7ed9; CSS &#x58f0;&#x660e;&#x7684;&#x6743;&#x91cd;&#xff0c;&#x51b3;&#x5b9a;&#x4e86;&#x5f53;&#x591a;&#x4e2a;&#x9009;&#x62e9;&#x5668;&#x9488;&#x5bf9;&#x540c;&#x4e00;&#x5143;&#x7d20;&#x65f6;&#x54ea;&#x4e2a;&#x89c4;&#x5219;&#x9002;&#x7528;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "159,160" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7ee7;&#x627f;</strong>&#x662f;&#x6307;&#x5c5e;&#x6027;&#x53ef;&#x4ee5;&#x4ece;&#x7236;&#x5143;&#x7d20;&#x7ee7;&#x627f;&#x5230;&#x5176;&#x5b50;&#x5143;&#x7d20;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "160,162" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "154,155" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x76d2;&#x6a21;&#x578b;&#xff1a;&#x7406;&#x89e3;&#x5143;&#x7d20;&#x5c3a;&#x5bf8;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "164,165" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x73b0;&#x4ee3;&#x5e03;&#x5c40;&#x6280;&#x672f;&#xff1a;Flexbox &#x548c; CSS Grid</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "168,169" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x54cd;&#x5e94;&#x5f0f;&#x8bbe;&#x8ba1;&#xff1a;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x548c;&#x79fb;&#x52a8;&#x4f18;&#x5148;&#x539f;&#x5219;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5a92;&#x4f53;&#x67e5;&#x8be2;</strong>&#x662f; CSS &#x6280;&#x672f;&#xff0c;&#x7528;&#x4e8e;&#x6839;&#x636e;&#x8bbe;&#x5907;&#x7279;&#x6027;&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x5c4f;&#x5e55;&#x5bbd;&#x5ea6;&#x3001;&#x9ad8;&#x5ea6;&#x3001;&#x65b9;&#x5411;&#xff09;&#x5e94;&#x7528;&#x4e0d;&#x540c;&#x7684;&#x6837;&#x5f0f;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "180,181" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5bb9;&#x5668;&#x67e5;&#x8be2; (Container Queries)</strong>&#xff1a;&#x57fa;&#x4e8e;<strong>&#x7236;&#x5bb9;&#x5668; (Container)</strong> &#x5c3a;&#x5bf8;&#x7684;&#x5fae;&#x89c2;&#x5e03;&#x5c40;&#x8c03;&#x6574;&#x3002;",
+                          children: [
+                            {
+                              content:
+                                "&#x4f20;&#x7edf;&#x7684;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x65e0;&#x6cd5;&#x611f;&#x77e5;&#x7ec4;&#x4ef6;<strong>&#x6240;&#x5728;&#x7684;&#x4e0a;&#x4e0b;&#x6587;</strong>&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x540c;&#x4e00;&#x4e2a;&#x201c;&#x5361;&#x7247;&#x7ec4;&#x4ef6;&#x201d;&#x65e2;&#x53ef;&#x80fd;&#x51fa;&#x73b0;&#x5728;&#x5bbd;&#x655e;&#x7684;&#x4e3b;&#x5185;&#x5bb9;&#x533a;&#xff0c;&#x4e5f;&#x53ef;&#x80fd;&#x51fa;&#x73b0;&#x5728;&#x72ed;&#x7a84;&#x7684;&#x4fa7;&#x8fb9;&#x680f;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "182,183" },
+                            },
+                            {
+                              content:
+                                "&#x4f7f;&#x7528; <code>@container</code>&#xff0c;&#x7ec4;&#x4ef6;&#x53ef;&#x4ee5;&#x6839;&#x636e;&#x5176;&#x6240;&#x5728;&#x7236;&#x5bb9;&#x5668;&#x7684;&#x5bbd;&#x5ea6;&#x81ea;&#x52a8;&#x8c03;&#x6574;&#x6837;&#x5f0f;&#xff0c;&#x5b9e;&#x73b0;&#x4e86;&#x771f;&#x6b63;&#x7684;<strong>&#x7ec4;&#x4ef6;&#x7ea7;&#x54cd;&#x5e94;&#x5f0f;</strong>&#x3002;&#x8fd9;&#x4f7f;&#x5f97;&#x7ec4;&#x4ef6;&#x80fd;&#x591f;&#x5b8c;&#x5168;&#x72ec;&#x7acb;&#x4e8e;&#x9875;&#x9762;&#x5e03;&#x5c40;&#xff0c;&#x5b9e;&#x73b0;&#x201c;&#x7f16;&#x5199;&#x4e00;&#x6b21;&#xff0c;&#x5230;&#x5904;&#x8fd0;&#x884c;&#x201d;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "183,184" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "181,184" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x79fb;&#x52a8;&#x4f18;&#x5148;</strong>&#x662f;&#x4e00;&#x79cd;&#x8bbe;&#x8ba1;&#x7b56;&#x7565;&#xff0c;&#x4ece;&#x6700;&#x5c0f;&#x7684;&#x5c4f;&#x5e55;&#x5f00;&#x59cb;&#x8bbe;&#x8ba1;&#xff0c;&#x7136;&#x540e;&#x5411;&#x4e0a;&#x6269;&#x5c55;&#xff0c;&#x8fd9;&#x901a;&#x8fc7;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x5f97;&#x5230;&#x9690;&#x5f0f;&#x652f;&#x6301;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "184,186" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "176,177" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x73b0;&#x4ee3; CSS &#x903b;&#x8f91;&#x3001;&#x4ea4;&#x4e92;&#x4e0e;&#x52a8;&#x753b;</strong>",
+                      children: [
+                        {
+                          content:
+                            '\n<p data-lines="192,193"><strong>&#x903b;&#x8f91;&#x9009;&#x62e9;&#x5668;&#x4e0e;&#x539f;&#x751f;&#x5d4c;&#x5957;</strong>&#xff1a;</p>',
+                          children: [
+                            {
+                              content:
+                                "<strong><code>:has()</code> (&#x7236;&#x7c7b;&#x9009;&#x62e9;&#x5668;)</strong>&#xff1a;&#x5b83;&#x5141;&#x8bb8;&#x6839;&#x636e;<strong>&#x5b50;&#x5143;&#x7d20;&#x7684;&#x72b6;&#x6001;</strong>&#x6765;&#x63a7;&#x5236;&#x7236;&#x5143;&#x7d20;&#x6216;&#x5144;&#x5f1f;&#x5143;&#x7d20;&#x7684;&#x6837;&#x5f0f;&#x3002;&#x4f8b;&#x5982;&#xff0c;<code>form:has(input:invalid)</code> &#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x5728; CSS &#x4e2d;&#x5b9e;&#x73b0;&#x5f53;&#x8f93;&#x5165;&#x6846;&#x975e;&#x6cd5;&#x65f6;&#x6539;&#x53d8;&#x8868;&#x5355;&#x80cc;&#x666f;&#x7684;&#x903b;&#x8f91;&#xff0c;&#x800c;&#x65e0;&#x9700; JS &#x4ecb;&#x5165;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "193,194" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x539f;&#x751f;&#x5d4c;&#x5957; (CSS Nesting)</strong>&#xff1a;&#x6d4f;&#x89c8;&#x5668;&#x73b0;&#x5df2;&#x539f;&#x751f;&#x652f;&#x6301;&#x7c7b;&#x4f3c; Sass/Less &#x7684;&#x5d4c;&#x5957;&#x8bed;&#x6cd5;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x76f4;&#x63a5;&#x5728; CSS &#x4e2d;&#x7f16;&#x5199;&#x5c42;&#x7ea7;&#x6e05;&#x6670;&#x7684;&#x4ee3;&#x7801;&#xff0c;&#x51cf;&#x5c11;&#x4e86;&#x5bf9;&#x6784;&#x5efa;&#x5de5;&#x5177;&#x7684;&#x5f3a;&#x4f9d;&#x8d56;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "194,196" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "192,196" },
+                        },
+                        {
+                          content:
+                            '\n<p data-lines="196,197"><strong>&#x89c6;&#x56fe;&#x8fc7;&#x6e21; (View Transitions API)</strong>&#xff1a;</p>',
+                          children: [
+                            {
+                              content:
+                                "&#x63d0;&#x4f9b;&#x4e86;&#x4e00;&#x79cd;&#x539f;&#x751f;&#x673a;&#x5236;&#x6765;&#x521b;&#x5efa;&#x5e73;&#x6ed1;&#x7684; DOM &#x72b6;&#x6001;&#x5207;&#x6362;&#x52a8;&#x753b;&#x3002;&#x65e0;&#x8bba;&#x662f;&#x5355;&#x9875;&#x5e94;&#x7528; (SPA) &#x7684;&#x8def;&#x7531;&#x8df3;&#x8f6c;&#xff0c;&#x8fd8;&#x662f;&#x591a;&#x9875;&#x5e94;&#x7528; (MPA) &#x7684;&#x9875;&#x9762;&#x52a0;&#x8f7d;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x90fd;&#x80fd;&#x81ea;&#x52a8;&#x5bf9;&#x65b0;&#x65e7;&#x72b6;&#x6001;&#x8fdb;&#x884c;&#x622a;&#x56fe;&#x5e76;&#x751f;&#x6210;&#x8fc7;&#x6e21;&#x6548;&#x679c;&#xff08;&#x5982;&#x5143;&#x7d20;&#x5f62;&#x53d8;&#x3001;&#x6de1;&#x5165;&#x6de1;&#x51fa;&#xff09;&#xff0c;&#x65e0;&#x9700;&#x590d;&#x6742;&#x7684; JS &#x52a8;&#x753b;&#x5e93;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "197,199" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "196,199" },
+                        },
+                        {
+                          content:
+                            '\n<p data-lines="199,200"><strong>&#x6eda;&#x52a8;&#x9a71;&#x52a8;&#x52a8;&#x753b; (Scroll-driven Animations)</strong>&#xff1a;</p>',
+                          children: [
+                            {
+                              content:
+                                "&#x5141;&#x8bb8;&#x5c06;&#x52a8;&#x753b;&#x8fdb;&#x5ea6;&#x76f4;&#x63a5;&#x7ed1;&#x5b9a;&#x5230;<strong>&#x6eda;&#x52a8;&#x5bb9;&#x5668;&#x7684;&#x6eda;&#x52a8;&#x4f4d;&#x7f6e;</strong>&#xff0c;&#x800c;&#x975e;&#x65f6;&#x95f4;&#x7ebf;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "200,201" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x6027;&#x80fd;&#x4f18;&#x52bf;</strong>&#xff1a;&#x6b64;&#x7c7b;&#x52a8;&#x753b;&#x8fd0;&#x884c;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x7684;<strong>&#x5408;&#x6210;&#x7ebf;&#x7a0b; (Compositor Thread)</strong> &#x4e0a;&#xff0c;&#x5b8c;&#x5168;&#x4e0d;&#x963b;&#x585e;&#x4e3b;&#x7ebf;&#x7a0b;&#x3002;&#x5373;&#x4f7f; JavaScript &#x5fd9;&#x4e8e;&#x5904;&#x7406;&#x7e41;&#x91cd;&#x7684;&#x4e1a;&#x52a1;&#x903b;&#x8f91;&#x5bfc;&#x81f4;&#x9875;&#x9762;&#x5361;&#x987f;&#xff0c;&#x6eda;&#x52a8;&#x52a8;&#x753b;&#xff08;&#x5982;&#x89c6;&#x5dee;&#x6eda;&#x52a8;&#x3001;&#x9605;&#x8bfb;&#x8fdb;&#x5ea6;&#x6761;&#xff09;&#x4f9d;&#x7136;&#x80fd;&#x4fdd;&#x6301;&#x4e1d;&#x6ed1;&#x6d41;&#x7545;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "201,203" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "199,203" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "188,189" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x9ad8;&#x7ea7;&#x6837;&#x5f0f;&#xff1a;&#x5355;&#x4f4d;&#xff08;rem&#x3001;em&#x3001;vw/vh&#xff09;&#x3001;&#x51fd;&#x6570;&#xff08;clamp()&#x3001;calc()&#xff09;</strong>",
+                      children: [
+                        {
+                          content:
+                            '\n<p data-lines="207,208"><strong>rem</strong>&#xff08;&#x6839; em&#xff09;&#x548c; <strong>em</strong> &#x76f8;&#x5bf9;&#x4e8e;&#x5b57;&#x4f53;&#x5927;&#x5c0f;&#xff0c;&#x800c; <strong>vw</strong>&#xff08;&#x89c6;&#x53e3;&#x5bbd;&#x5ea6;&#xff09;&#x548c; <strong>vh</strong>&#xff08;&#x89c6;&#x53e3;&#x9ad8;&#x5ea6;&#xff09;&#x76f8;&#x5bf9;&#x4e8e;&#x89c6;&#x53e3;&#x5c3a;&#x5bf8;&#x3002;</p>',
+                          children: [],
+                          payload: { tag: "li", lines: "207,209" },
+                        },
+                        {
+                          content:
+                            '\n<p data-lines="209,210"><strong>calc()</strong> &#x5141;&#x8bb8;&#x6570;&#x5b66;&#x8868;&#x8fbe;&#x5f0f;&#xff0c;&#x800c; <strong>clamp()</strong> &#x5c06;&#x503c;&#x9650;&#x5236;&#x5728;&#x4e0a;&#x9650;&#x548c;&#x4e0b;&#x9650;&#x4e4b;&#x95f4;&#x3002;&#x8fd9;&#x4e9b;&#x9ad8;&#x7ea7;&#x5355;&#x4f4d;&#x548c;&#x51fd;&#x6570;&#x4f7f;&#x5f00;&#x53d1;&#x8005;&#x80fd;&#x591f;&#x521b;&#x5efa;&#x9ad8;&#x5ea6;&#x52a8;&#x6001;&#x548c;&#x9002;&#x5e94;&#x6027;&#x5f3a;&#x7684;&#x8bbe;&#x8ba1;&#xff0c;&#x800c;&#x65e0;&#x9700;&#x8fc7;&#x5ea6;&#x4f9d;&#x8d56; JavaScript &#x8fdb;&#x884c;&#x5e03;&#x5c40;&#xff0c;&#x4ece;&#x800c;&#x63d0;&#x9ad8;&#x6027;&#x80fd;&#x548c;&#x53ef;&#x7ef4;&#x62a4;&#x6027;&#x3002;</p>',
+                          children: [],
+                          payload: { tag: "li", lines: "209,211" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "203,204" },
+                    },
+                    {
+                      content:
+                        "<strong>BEM (Block, Element, Modifier) &#x547d;&#x540d;&#x89c4;&#x8303;&#xff1a;&#x544a;&#x522b; CSS &#x6df7;&#x4e71;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x6838;&#x5fc3;&#x6784;&#x6210;</strong>",
+                          children: [
+                            {
+                              content:
+                                '\n<p data-lines="219,220"><strong>Block - &#x5757; ( <code>block</code> )</strong></p>',
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x5b9a;&#x4e49;&#xff1a;</strong> &#x4e00;&#x4e2a;&#x72ec;&#x7acb;&#x7684;&#x3001;&#x53ef;&#x5728;&#x9879;&#x76ee;&#x4e2d;&#x4efb;&#x610f;&#x4f4d;&#x7f6e;&#x590d;&#x7528;&#x7684;&#x9875;&#x9762;&#x7ec4;&#x4ef6;&#x3002;&#x53ef;&#x4ee5;&#x628a;&#x5b83;&#x60f3;&#x8c61;&#x6210;&#x4e00;&#x5757;&#x4e50;&#x9ad8;&#x79ef;&#x6728;&#xff0c;&#x6bd4;&#x5982;&#x4e00;&#x4e2a;&#x201c;&#x641c;&#x7d22;&#x8868;&#x5355;&#x201d;&#x3001;&#x4e00;&#x4e2a;&#x201c;&#x4ea7;&#x54c1;&#x5361;&#x7247;&#x201d;&#x6216;&#x4e00;&#x4e2a;&#x201c;&#x5bfc;&#x822a;&#x83dc;&#x5355;&#x201d;&#x3002;&#x5b83;&#x81ea;&#x8eab;&#x662f;&#x5b8c;&#x6574;&#x4e14;&#x6709;&#x610f;&#x4e49;&#x7684;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "220,222" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "219,222" },
+                            },
+                            {
+                              content:
+                                '\n<p data-lines="222,223"><strong>Element - &#x5143;&#x7d20; ( <code>__element</code> )</strong></p>',
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x5b9a;&#x4e49;&#xff1a;</strong> &#x5757;&#x7684;&#x7ec4;&#x6210;&#x90e8;&#x5206;&#xff0c;&#x5b83;&#x5728;&#x8bed;&#x4e49;&#x4e0a;&#x5b8c;&#x5168;&#x4ece;&#x5c5e;&#x4e8e;&#x8fd9;&#x4e2a;&#x5757;&#xff0c;&#x4e0d;&#x80fd;&#x8131;&#x79bb;&#x5757;&#x800c;&#x72ec;&#x7acb;&#x5b58;&#x5728;&#x3002;&#x5982;&#x679c;&#x201c;&#x4ea7;&#x54c1;&#x5361;&#x7247;&#x201d;&#x662f;&#x5757;&#xff0c;&#x90a3;&#x4e48;&#x201c;&#x5361;&#x7247;&#x6807;&#x9898;&#x201d;&#x3001;&#x201c;&#x5361;&#x7247;&#x56fe;&#x7247;&#x201d;&#x548c;&#x201c;&#x8d2d;&#x4e70;&#x6309;&#x94ae;&#x201d;&#x5c31;&#x662f;&#x5143;&#x7d20;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "223,224" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x547d;&#x540d;&#x89c4;&#x5219;&#xff1a;</strong> &#x5143;&#x7d20;&#x7684;&#x540d;&#x79f0;&#x901a;&#x8fc7;<strong>&#x53cc;&#x4e0b;&#x5212;&#x7ebf; (<code>__</code>)</strong> &#x4e0e;&#x5176;&#x6240;&#x5c5e;&#x7684;&#x5757;&#x8fde;&#x63a5;&#x3002;&#x4f8b;&#x5982; <code>card__title</code>&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "224,226" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "222,226" },
+                            },
+                            {
+                              content:
+                                '\n<p data-lines="226,227"><strong>Modifier - &#x4fee;&#x9970;&#x7b26; ( <code>--modifier</code> )</strong></p>',
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x5b9a;&#x4e49;&#xff1a;</strong> &#x4e00;&#x4e2a;&#x7528;&#x6765;&#x63cf;&#x8ff0;&#x5757;&#x6216;&#x5143;&#x7d20;&#x7684;&#x5916;&#x89c2;&#x3001;&#x72b6;&#x6001;&#x6216;&#x884c;&#x4e3a;&#x7684;&#x201c;&#x6807;&#x5fd7;&#x201d;&#x6216;&#x201c;&#x5f62;&#x5bb9;&#x8bcd;&#x201d;&#x3002;&#x5b83;&#x5b9a;&#x4e49;&#x4e86;&#x7ec4;&#x4ef6;&#x7684;&#x53d8;&#x4f53;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "227,228" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x547d;&#x540d;&#x89c4;&#x5219;&#xff1a;</strong> &#x4fee;&#x9970;&#x7b26;&#x7684;&#x540d;&#x79f0;&#x901a;&#x8fc7;<strong>&#x53cc;&#x4e2d;&#x5212;&#x7ebf; (<code>--</code>)</strong> &#x4e0e;&#x5b83;&#x6240;&#x4fee;&#x9970;&#x7684;&#x5757;&#x6216;&#x5143;&#x7d20;&#x8fde;&#x63a5;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "228,229" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x793a;&#x4f8b;&#xff1a;</strong>",
+                                  children: [
+                                    {
+                                      content:
+                                        "&#x4fee;&#x9970;&#x4e00;&#x4e2a;&#x5757;&#xff1a;&#x6bd4;&#x5982;&#x666e;&#x901a;&#x7684; <code>card</code> &#x7ec4;&#x4ef6;&#x53ef;&#x4ee5;&#x6709;&#x4e00;&#x4e2a;&#x201c;&#x7279;&#x522b;&#x63a8;&#x8350;&#x201d;&#x7684;&#x7248;&#x672c;&#xff0c;&#x6211;&#x4eec;&#x79f0;&#x4e4b;&#x4e3a; <code>card--featured</code>&#x3002;",
+                                      children: [],
+                                      payload: { tag: "li", lines: "230,231" },
+                                    },
+                                    {
+                                      content:
+                                        "&#x4fee;&#x9970;&#x4e00;&#x4e2a;&#x5143;&#x7d20;&#xff1a;&#x6bd4;&#x5982; <code>card__button</code> &#x9ed8;&#x8ba4;&#x662f;&#x7070;&#x8272;&#xff0c;&#x4f46;&#x53ef;&#x4ee5;&#x6709;&#x4e00;&#x4e2a;&#x201c;&#x4e3b;&#x8981;&#x201d;&#x72b6;&#x6001;&#xff0c;&#x6211;&#x4eec;&#x79f0;&#x4e4b;&#x4e3a; <code>card__button--primary</code>&#x3002;&#x6216;&#x8005;&#x83dc;&#x5355;&#x9879; <code>menu__item</code> &#x53ef;&#x4ee5;&#x6709;&#x4e00;&#x4e2a;&#x201c;&#x5f53;&#x524d;&#x6fc0;&#x6d3b;&#x201d;&#x7684;&#x72b6;&#x6001;&#xff0c;&#x5373; <code>menu__item--active</code>&#x3002;",
+                                      children: [],
+                                      payload: { tag: "li", lines: "231,233" },
+                                    },
+                                  ],
+                                  payload: { tag: "li", lines: "229,233" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "226,233" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "217,218" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6838;&#x5fc3;&#x4f18;&#x52bf;</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x7ed3;&#x6784;&#x6e05;&#x6670;&#xff1a;</strong> &#x4ec5;&#x901a;&#x8fc7;&#x9605;&#x8bfb;&#x7c7b;&#x540d;&#xff0c;&#x5c31;&#x80fd;&#x76f4;&#x89c2;&#x5730;&#x7406;&#x89e3; UI &#x5143;&#x7d20;&#x7684;&#x7ed3;&#x6784;&#x548c;&#x7ec4;&#x4ef6;&#x95f4;&#x7684;&#x4ece;&#x5c5e;&#x5173;&#x7cfb;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "235,236" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x9ad8;&#x53ef;&#x8bfb;&#x6027;&#xff1a;</strong> &#x7c7b;&#x540d;&#x672c;&#x8eab;&#x5c31;&#x6210;&#x4e3a;&#x4e86;&#x4e00;&#x79cd;&#x6587;&#x6863;&#xff0c;&#x6e05;&#x6670;&#x5730;&#x4f20;&#x8fbe;&#x4e86;&#x5176;&#x529f;&#x80fd;&#x548c;&#x72b6;&#x6001;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "236,237" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x6613;&#x4e8e;&#x7ef4;&#x62a4;&#xff1a;</strong> &#x6240;&#x6709;&#x6837;&#x5f0f;&#x90fd;&#x57fa;&#x4e8e;&#x5355;&#x4e00;&#x7684;&#x7c7b;&#x9009;&#x62e9;&#x5668;&#xff0c;&#x907f;&#x514d;&#x4e86;&#x590d;&#x6742;&#x7684;&#x5d4c;&#x5957;&#x548c;&#x7279;&#x5f02;&#x6027;&#x95ee;&#x9898;&#xff0c;&#x4f7f;&#x5f97;&#x6837;&#x5f0f;&#x8986;&#x76d6;&#x548c;&#x4fee;&#x6539;&#x53d8;&#x5f97;&#x7b80;&#x5355;&#x800c;&#x5b89;&#x5168;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "237,239" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "233,234" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "211,212" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "152,153" },
+                },
+                {
+                  content:
+                    "<strong>&#x73b0;&#x4ee3; CSS &#x67b6;&#x6784;&#x4e0e;&#x7b56;&#x7565;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>CSS &#x9884;&#x5904;&#x7406;&#x5668; (CSS Preprocessors)</strong>",
+                      children: [
+                        {
+                          content: "<strong>1. Sass / SCSS</strong>",
+                          children: [
+                            {
+                              content:
+                                '1. <a href="https://sass-lang.com/">Sass</a> (&#x65e7;&#x8bed;&#x6cd5;)&#xff1a;&#x4f7f;&#x7528;&#x7f29;&#x8fdb;&#x800c;&#x4e0d;&#x662f;&#x82b1;&#x62ec;&#x53f7;&#xff0c;&#x5e76;&#x4e14;&#x7701;&#x7565;&#x4e86;&#x5206;&#x53f7;&#x3002;&#x8fd9;&#x79cd;&#x8bed;&#x6cd5;&#x66f4;&#x7b80;&#x6d01;&#xff0c;&#x4f46;&#x4e0e;&#x539f;&#x751f; CSS &#x5dee;&#x5f02;&#x8f83;&#x5927;&#x3002;&#x6587;&#x4ef6;&#x6269;&#x5c55;&#x540d;&#x4e3a; .sass&#x3002;',
+                              children: [],
+                              payload: {
+                                tag: "li",
+                                lines: "251,252",
+                                listIndex: 1,
+                              },
+                            },
+                            {
+                              content:
+                                '2. <a href="https://sass-lang.com/documentation/syntax#scss">SCSS</a> (&#x65b0;&#x8bed;&#x6cd5;)&#xff1a;&#x5168;&#x79f0;&#x662f; &quot;Sassy CSS&quot;&#xff0c;&#x5b83;&#x7684;&#x8bed;&#x6cd5;&#x4e0e;&#x539f;&#x751f; CSS &#x5b8c;&#x5168;&#x517c;&#x5bb9;&#x3002;&#x4efb;&#x4f55;&#x6709;&#x6548;&#x7684; CSS &#x6587;&#x4ef6;&#x4e5f;&#x662f;&#x6709;&#x6548;&#x7684; SCSS &#x6587;&#x4ef6;&#x3002;&#x8fd9;&#x662f;&#x76ee;&#x524d;&#x66f4;&#x4e3a;&#x4e3b;&#x6d41;&#x548c;&#x63a8;&#x8350;&#x7684;&#x8bed;&#x6cd5;&#x3002;&#x6587;&#x4ef6;&#x6269;&#x5c55;&#x540d;&#x4e3a; .scss&#x3002;',
+                              children: [],
+                              payload: {
+                                tag: "li",
+                                lines: "252,254",
+                                listIndex: 2,
+                              },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "247,248" },
+                        },
+                        {
+                          content: "<strong>2. Less</strong>",
+                          children: [],
+                          payload: { tag: "h5", lines: "256,257" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "243,244" },
+                    },
+                    {
+                      content:
+                        "<strong>PostCSS&#xff1a;&#x7528; JavaScript &#x63d2;&#x4ef6;&#x6765;&#x8f6c;&#x6362; CSS &#x7684;&#x5de5;&#x5177;&#x5e73;&#x53f0;</strong>",
+                      children: [
+                        {
+                          content:
+                            '&#x5b9e;&#x73b0;&#x7c7b;&#x4f3c;&#x9884;&#x5904;&#x7406;&#x5668;&#x7684;&#x529f;&#x80fd;&#xff1a;&#x901a;&#x8fc7;&#x63d2;&#x4ef6;&#xff08;&#x5982; <a href="https://github.com/postcss/postcss-nested">postcss-nested</a>, <a href="https://github.com/postcss/postcss-simple-vars">postcss-simple-vars</a>&#xff09;&#xff0c;&#x4f60;&#x53ef;&#x4ee5;&#x5b9e;&#x73b0;&#x5d4c;&#x5957;&#x548c;&#x53d8;&#x91cf;&#x7b49;&#x529f;&#x80fd;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "264,265" },
+                        },
+                        {
+                          content:
+                            '&#x81ea;&#x52a8;&#x6dfb;&#x52a0;&#x6d4f;&#x89c8;&#x5668;&#x524d;&#x7f00; (<a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>)&#xff1a;&#x8fd9;&#x662f; PostCSS &#x6700;&#x8457;&#x540d;&#x3001;&#x6700;&#x5f3a;&#x5927;&#x7684;&#x63d2;&#x4ef6;&#x3002;&#x5b83;&#x53ef;&#x4ee5;&#x81ea;&#x52a8;&#x4e3a;&#x4f60;&#x5206;&#x6790;&#x4ee3;&#x7801;&#xff0c;&#x5e76;&#x4e3a;&#x9700;&#x8981;&#x517c;&#x5bb9;&#x7684; CSS &#x89c4;&#x5219;&#xff08;&#x5982; -webkit-, -moz-&#xff09;&#x6dfb;&#x52a0;&#x5382;&#x5546;&#x524d;&#x7f00;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "265,266" },
+                        },
+                        {
+                          content:
+                            '&#x4f7f;&#x7528;&#x672a;&#x6765;&#x7684; CSS &#x8bed;&#x6cd5;&#xff1a;&#x901a;&#x8fc7;&#x50cf; <a href="https://preset-env.cssdb.org/">postcss-preset-env</a> &#x8fd9;&#x6837;&#x7684;&#x63d2;&#x4ef6;&#xff0c;&#x4f60;&#x53ef;&#x4ee5;&#x73b0;&#x5728;&#x5c31;&#x4f7f;&#x7528;&#x5c1a;&#x672a;&#x88ab;&#x6240;&#x6709;&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#x7684;&#x6700;&#x65b0; CSS &#x89c4;&#x8303;&#xff0c;&#x5b83;&#x4f1a;&#x81ea;&#x52a8;&#x5c06;&#x5176;&#x8f6c;&#x6362;&#x4e3a;&#x5f53;&#x524d;&#x6d4f;&#x89c8;&#x5668;&#x517c;&#x5bb9;&#x7684;&#x7b49;&#x6548;&#x4ee3;&#x7801;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "266,267" },
+                        },
+                        {
+                          content:
+                            "&#x4ee3;&#x7801;&#x4f18;&#x5316;&#x548c;&#x538b;&#x7f29;&#xff1a;&#x901a;&#x8fc7;&#x63d2;&#x4ef6;&#x53ef;&#x4ee5;&#x81ea;&#x52a8;&#x538b;&#x7f29; CSS &#x4ee3;&#x7801;&#xff0c;&#x79fb;&#x9664;&#x6ce8;&#x91ca;&#x7b49;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "267,269" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "260,261" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x539f;&#x5b50;&#x5316; CSS (Utility-First CSS)</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x8bbe;&#x8ba1;&#x4e00;&#x81f4;&#x6027;</strong>&#xff1a;&#x901a;&#x8fc7;&#x9650;&#x5236;&#x53ef;&#x7528;&#x7684;&#x6837;&#x5f0f;&#x9009;&#x9879;&#xff0c;&#x539f;&#x5b50;&#x7c7b;&#x51cf;&#x5c11;&#x4e86;&#x6837;&#x5f0f;&#x51b2;&#x7a81;&#x7684;&#x98ce;&#x9669;&#xff0c;&#x786e;&#x4fdd;&#x4e86;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x4e2d;&#x7684;&#x89c6;&#x89c9;&#x7edf;&#x4e00;&#x6027;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "275,276" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6548;&#x7387;&#x63d0;&#x5347;</strong>&#xff1a;&#x907f;&#x514d;&#x4e86;&#x4e3a;&#x6bcf;&#x4e2a; UI &#x7ec4;&#x4ef6;&#x7f16;&#x5199;&#x548c;&#x7ef4;&#x62a4;&#x5927;&#x91cf;&#x81ea;&#x5b9a;&#x4e49; CSS &#x7684;&#x9700;&#x8981;&#xff0c;&#x663e;&#x8457;&#x51cf;&#x5c11;&#x4e86; CSS &#x4ee3;&#x7801;&#x91cf;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "276,277" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x54cd;&#x5e94;&#x5f0f;&#x8bbe;&#x8ba1;</strong>&#xff1a;&#x5185;&#x7f6e;&#x7684;&#x54cd;&#x5e94;&#x5f0f;&#x65ad;&#x70b9;&#x652f;&#x6301;&#x7b80;&#x5316;&#x4e86;&#x591a;&#x8bbe;&#x5907;&#x5e03;&#x5c40;&#x7684;&#x521b;&#x5efa;&#xff0c;&#x65e0;&#x9700;&#x624b;&#x52a8;&#x7f16;&#x5199;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "277,278" },
+                        },
+                        {
+                          content:
+                            '<strong>&#x6027;&#x80fd;&#x4f18;&#x5316;</strong>&#xff1a;&#x901a;&#x8fc7; <a href="https://purgecss.com/">PurgeCSS</a> &#x7b49;&#x5de5;&#x5177;&#xff0c;&#x6700;&#x7ec8;&#x751f;&#x6210;&#x7684; CSS &#x6587;&#x4ef6;&#x53ea;&#x5305;&#x542b;&#x5b9e;&#x9645;&#x4f7f;&#x7528;&#x7684;&#x6837;&#x5f0f;&#xff0c;&#x6587;&#x4ef6;&#x4f53;&#x79ef;&#x5c0f;&#xff0c;&#x52a0;&#x8f7d;&#x901f;&#x5ea6;&#x5feb;&#xff0c;&#x6709;&#x52a9;&#x4e8e;&#x63d0;&#x5347;&#x7f51;&#x7ad9;&#x6027;&#x80fd;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "278,279" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7075;&#x6d3b;&#x6027;&#x4e0e;&#x53ef;&#x5b9a;&#x5236;&#x6027;</strong>&#xff1a;&#x5c3d;&#x7ba1;&#x662f;&#x9884;&#x5b9a;&#x4e49;&#x7c7b;&#xff0c;&#x4f46;&#x901a;&#x8fc7;&#x7ec4;&#x5408;&#x4e0d;&#x540c;&#x7684;&#x539f;&#x5b50;&#x7c7b;&#xff0c;&#x53ef;&#x4ee5;&#x521b;&#x5efa;&#x51fa;&#x72ec;&#x7279;&#x7684;&#x6837;&#x5f0f;&#x3002;&#x540c;&#x65f6;&#xff0c;&#x901a;&#x8fc7;&#x914d;&#x7f6e;&#x6587;&#x4ef6;&#x53ef;&#x4ee5;&#x6df1;&#x5ea6;&#x5b9a;&#x5236;&#x6846;&#x67b6;&#xff0c;&#x6ee1;&#x8db3;&#x9879;&#x76ee;&#x7279;&#x5b9a;&#x7684;&#x8bbe;&#x8ba1;&#x9700;&#x6c42;&#xff0c;&#x751a;&#x81f3;&#x53ef;&#x4ee5;&#x96c6;&#x6210;&#x81ea;&#x5b9a;&#x4e49; CSS&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "279,281" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "269,270" },
+                    },
+                    {
+                      content: "<strong>CSS-in-JS</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "285,286" },
+                    },
+                    {
+                      content: "<strong>CSS Modules</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "293,294" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x4e0e;&#x7ec4;&#x4ef6;&#x5e93;&#x4e2d;&#x7684; CSS</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "301,302" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x8868;&#xff1a;&#x73b0;&#x4ee3; CSS &#x67b6;&#x6784;&#x5bf9;&#x6bd4; (Utility-First CSS vs. CSS-in-JS vs. CSS Modules)</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="307,317">\n<thead data-lines="307,308">\n<tr data-lines="307,308">\n<th style="text-align:left">&#x7279;&#x6027;/&#x67b6;&#x6784;</th>\n<th style="text-align:left">&#x539f;&#x5b50;&#x5316; CSS (e.g., <a href="https://tailwindcss.com/">Tailwind CSS</a>, <a href="https://unocss.dev/">UnoCSS</a>)</th>\n<th style="text-align:left">CSS-in-JS (e.g., <a href="https://styled-components.com/">styled-components</a>, <a href="https://emotion.sh/">Emotion</a>)</th>\n<th style="text-align:left"><a href="https://github.com/css-modules/css-modules">CSS Modules</a></th>\n</tr>\n</thead>\n<tbody data-lines="309,317">\n<tr data-lines="309,310">\n<td style="text-align:left"><strong>&#x54f2;&#x5b66;</strong></td>\n<td style="text-align:left">&#x5b9e;&#x7528;&#x81f3;&#x4e0a;&#xff0c;&#x76f4;&#x63a5;&#x5728; HTML &#x4e2d;&#x7ec4;&#x5408;&#x539f;&#x5b50;&#x7c7b;</td>\n<td style="text-align:left">JavaScript &#x9a71;&#x52a8;&#x7684;&#x6837;&#x5f0f;&#xff0c;&#x6837;&#x5f0f;&#x4e0e;&#x7ec4;&#x4ef6;&#x7d27;&#x5bc6;&#x8026;&#x5408;</td>\n<td style="text-align:left">CSS &#x7c7b;&#x540d;&#x5c40;&#x90e8;&#x4f5c;&#x7528;&#x57df;&#x5316;&#xff0c;&#x907f;&#x514d;&#x5168;&#x5c40;&#x51b2;&#x7a81;</td>\n</tr>\n<tr data-lines="310,311">\n<td style="text-align:left"><strong>&#x4f5c;&#x7528;&#x57df;</strong></td>\n<td style="text-align:left">&#x901a;&#x8fc7;&#x7ec4;&#x5408;&#x539f;&#x5b50;&#x7c7b;&#x5b9e;&#x73b0;&#x6837;&#x5f0f;&#x9694;&#x79bb;</td>\n<td style="text-align:left">&#x81ea;&#x52a8;&#x751f;&#x6210;&#x552f;&#x4e00;&#x7c7b;&#x540d;&#xff0c;&#x786e;&#x4fdd;&#x6837;&#x5f0f;&#x5c40;&#x90e8;&#x4f5c;&#x7528;&#x57df;</td>\n<td style="text-align:left">&#x6784;&#x5efa;&#x65f6;&#x91cd;&#x547d;&#x540d;&#x7c7b;&#x540d;&#xff0c;&#x5b9e;&#x73b0;&#x5c40;&#x90e8;&#x4f5c;&#x7528;&#x57df;</td>\n</tr>\n<tr data-lines="311,312">\n<td style="text-align:left"><strong>&#x6027;&#x80fd;&#x5f71;&#x54cd;</strong></td>\n<td style="text-align:left">&#x6784;&#x5efa;&#x65f6;&#x751f;&#x6210;&#x6700;&#x5c0f;&#x5316; CSS&#xff0c;&#x96f6;&#x8fd0;&#x884c;&#x65f6;&#x5f00;&#x9500;</td>\n<td style="text-align:left">&#x589e;&#x52a0; JS &#x6253;&#x5305;&#x4f53;&#x79ef;&#xff0c;&#x8fd0;&#x884c;&#x65f6;&#x6837;&#x5f0f;&#x8ba1;&#x7b97;&#x5f00;&#x9500;&#xff08;<a href="https://emotion.sh/">Emotion</a> &#x901a;&#x8fc7;&#x9759;&#x6001;&#x63d0;&#x53d6;&#x53ef;&#x4f18;&#x5316;&#xff09;</td>\n<td style="text-align:left">&#x6784;&#x5efa;&#x65f6;&#x5904;&#x7406;&#xff0c;&#x96f6;&#x8fd0;&#x884c;&#x65f6;&#x5f00;&#x9500;</td>\n</tr>\n<tr data-lines="312,313">\n<td style="text-align:left"><strong>&#x5f00;&#x53d1;&#x4f53;&#x9a8c;</strong></td>\n<td style="text-align:left">&#x5feb;&#x901f;&#x539f;&#x578b;&#x5f00;&#x53d1;&#xff0c;&#x65e0;&#x9700;&#x5207;&#x6362;&#x6587;&#x4ef6;&#xff0c;HTML &#x53ef;&#x80fd;&#x5197;&#x957f;</td>\n<td style="text-align:left">&#x5f3a;&#x5927;&#x52a8;&#x6001;&#x6837;&#x5f0f;&#x80fd;&#x529b;&#xff0c;&#x4e3b;&#x9898;&#x5316;&#x6613;&#x5b9e;&#x73b0;&#xff0c;JS &#x4e2d;&#x5199; CSS</td>\n<td style="text-align:left">&#x719f;&#x6089;&#x539f;&#x751f; CSS &#x8bed;&#x6cd5;&#xff0c;&#x6837;&#x5f0f;&#x9694;&#x79bb;&#x5f7b;&#x5e95;&#xff0c;&#x6613;&#x4e8e;&#x7ef4;&#x62a4;</td>\n</tr>\n<tr data-lines="313,314">\n<td style="text-align:left"><strong>&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</strong></td>\n<td style="text-align:left">&#x5bf9;&#x4e8e;&#x4f20;&#x7edf; CSS &#x4f7f;&#x7528;&#x8005;&#x8f83;&#x9661;&#x5ced;</td>\n<td style="text-align:left">&#x5bf9;&#x4e8e; JS &#x5f00;&#x53d1;&#x8005;&#x53cb;&#x597d;&#xff0c;&#x4f46;&#x6982;&#x5ff5;&#x53ef;&#x80fd;&#x9700;&#x9002;&#x5e94;</td>\n<td style="text-align:left">&#x4f4e;&#xff0c;&#x63a5;&#x8fd1;&#x539f;&#x751f; CSS</td>\n</tr>\n<tr data-lines="314,315">\n<td style="text-align:left"><strong>&#x52a8;&#x6001;&#x6837;&#x5f0f;</strong></td>\n<td style="text-align:left">&#x9700;&#x7ed3;&#x5408; JS &#x903b;&#x8f91;&#x6216;&#x914d;&#x7f6e;&#x5b9e;&#x73b0;</td>\n<td style="text-align:left">&#x539f;&#x751f;&#x652f;&#x6301;&#xff0c;&#x57fa;&#x4e8e; props &#x6216; state &#x8f7b;&#x677e;&#x5b9e;&#x73b0;</td>\n<td style="text-align:left">&#x6709;&#x9650;&#xff0c;&#x9700;&#x989d;&#x5916;&#x5e93;&#x8f85;&#x52a9;</td>\n</tr>\n<tr data-lines="315,316">\n<td style="text-align:left"><strong>&#x4e3b;&#x9898;&#x5316;</strong></td>\n<td style="text-align:left">&#x901a;&#x8fc7;&#x914d;&#x7f6e;&#x6587;&#x4ef6;&#x548c; CSS &#x53d8;&#x91cf;&#x5b9e;&#x73b0;</td>\n<td style="text-align:left">&#x5185;&#x7f6e;&#x6216;&#x6613;&#x4e8e;&#x5b9e;&#x73b0;</td>\n<td style="text-align:left">&#x9700;&#x989d;&#x5916;&#x5de5;&#x5177;&#x6216;&#x624b;&#x52a8;&#x5b9e;&#x73b0;</td>\n</tr>\n<tr data-lines="316,317">\n<td style="text-align:left"><strong>&#x9002;&#x7528;&#x573a;&#x666f;</strong></td>\n<td style="text-align:left">&#x5feb;&#x901f;&#x5f00;&#x53d1;&#xff0c;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff0c;&#x9700;&#x8981;&#x9ad8;&#x5ea6;&#x5b9a;&#x5236;&#x548c;&#x6027;&#x80fd;&#x4f18;&#x5316;&#x7684;&#x9879;&#x76ee;</td>\n<td style="text-align:left">&#x7ec4;&#x4ef6;&#x5316;&#x5f00;&#x53d1;&#xff0c;&#x590d;&#x6742;&#x52a8;&#x6001; UI&#xff0c;&#x9700;&#x8981;&#x5f3a;&#x5c01;&#x88c5;&#x6027;&#x7684;&#x7ec4;&#x4ef6;</td>\n<td style="text-align:left">&#x4e2d;&#x5927;&#x578b;&#x9879;&#x76ee;&#xff0c;&#x8ffd;&#x6c42;&#x539f;&#x751f; CSS &#x4f53;&#x9a8c;&#x548c;&#x4e25;&#x683c;&#x6837;&#x5f0f;&#x9694;&#x79bb;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "307,317" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "305,306" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "239,240" },
+                },
+                {
+                  content:
+                    "<strong>JavaScript&#xff1a;&#x8d4b;&#x4e88;&#x4ea4;&#x4e92;&#x6027;&#x751f;&#x547d;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x6838;&#x5fc3;&#x8bed;&#x8a00;&#x6982;&#x5ff5;&#xff08;ES6+&#xff09;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<strong>&#x53d8;&#x91cf;&#xff08;let/const&#xff09;</strong>&#xff1a;<a href="https://www.ecma-international.org/publications-and-standards/standards/ecma-262/6th-edition/">ES6</a> &#x5f15;&#x5165;&#x7684;&#x5757;&#x7ea7;&#x4f5c;&#x7528;&#x57df;&#x53d8;&#x91cf;&#x58f0;&#x660e;&#xff0c;&#x6bd4; var &#x63d0;&#x4f9b;&#x4e86;&#x66f4;&#x597d;&#x7684;&#x4f5c;&#x7528;&#x57df;&#x63a7;&#x5236;&#x3002;<br>\nconst &#x521b;&#x5efa;&#x4e00;&#x4e2a;&#x4e0d;&#x53ef;&#x53d8;&#x5f15;&#x7528;&#xff0c;&#x800c; let &#x5141;&#x8bb8;&#x91cd;&#x65b0;&#x8d4b;&#x503c;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "330,332" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7bad;&#x5934;&#x51fd;&#x6570;</strong>&#xff1a;&#x7b80;&#x6d01;&#x7684;&#x51fd;&#x6570;&#x8bed;&#x6cd5;&#xff0c;&#x5177;&#x6709;&#x8bcd;&#x6cd5; this &#x7ed1;&#x5b9a;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "332,333" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6570;&#x636e;&#x7ed3;&#x6784;&#xff08;Array&#x3001;Object&#x3001;Map&#x3001;Set&#xff09;</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x7ec4;&#x7ec7;&#x548c;&#x64cd;&#x4f5c;&#x6570;&#x636e;&#x81f3;&#x5173;&#x91cd;&#x8981;&#x3002;<br>\nMap &#x548c; Set &#x5728;&#x96c6;&#x5408;&#x65b9;&#x9762;&#x6bd4;&#x666e;&#x901a;&#x5bf9;&#x8c61;&#x63d0;&#x4f9b;&#x4e86;&#x66f4;&#x597d;&#x7684;&#x6027;&#x80fd;&#x548c;&#x952e;&#x7684;&#x7075;&#x6d3b;&#x6027;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "333,335" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x63a7;&#x5236;&#x6d41;</strong>&#xff1a;if-else&#x3001;switch&#x3001;&#x5faa;&#x73af;&#xff08;for&#x3001;while&#x3001;do-while&#x3001;for-in&#x3001;for-of&#xff09;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "335,336" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4f5c;&#x7528;&#x57df;</strong>&#xff1a;&#x51b3;&#x5b9a;&#x4e86;&#x53d8;&#x91cf;&#x548c;&#x51fd;&#x6570;&#x5728;&#x4ee3;&#x7801;&#x4e0d;&#x540c;&#x90e8;&#x5206;&#x7684;&#x8bbf;&#x95ee;&#x6027;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "336,337" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x95ed;&#x5305;</strong>&#xff1a;&#x4e0e;&#x8bcd;&#x6cd5;&#x73af;&#x5883;&#x6346;&#x7ed1;&#x5728;&#x4e00;&#x8d77;&#x7684;&#x51fd;&#x6570;&#xff0c;&#x5373;&#x4f7f;&#x5916;&#x90e8;&#x51fd;&#x6570;&#x6267;&#x884c;&#x5b8c;&#x6bd5;&#xff0c;&#x4e5f;&#x5141;&#x8bb8;&#x8bbf;&#x95ee;&#x5916;&#x90e8;&#x4f5c;&#x7528;&#x57df;&#x53d8;&#x91cf;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "337,338" },
+                        },
+                        {
+                          content:
+                            "<strong>this &#x5173;&#x952e;&#x5b57;</strong>&#xff1a;&#x6307;&#x51fd;&#x6570;&#x6267;&#x884c;&#x7684;&#x4e0a;&#x4e0b;&#x6587;&#xff0c;&#x5176;&#x503c;&#x7531;&#x51fd;&#x6570;&#x7684;&#x8c03;&#x7528;&#x65b9;&#x5f0f;&#x51b3;&#x5b9a;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "338,339" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x539f;&#x578b;&#x94fe;</strong>&#xff1a;JavaScript &#x7684;&#x7ee7;&#x627f;&#x673a;&#x5236;&#xff0c;&#x5176;&#x4e2d;&#x5bf9;&#x8c61;&#x4ece;&#x5176;&#x539f;&#x578b;&#x5bf9;&#x8c61;&#x7ee7;&#x627f;&#x5c5e;&#x6027;&#x548c;&#x65b9;&#x6cd5;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "339,341" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "326,327" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x5f02;&#x6b65; JavaScript&#xff1a;Promises&#x3001;async/await&#x3001;&#x4e8b;&#x4ef6;&#x5faa;&#x73af;&#xff08;&#x5b8f;&#x4efb;&#x52a1;/&#x5fae;&#x4efb;&#x52a1;&#xff09;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>Promises</strong>&#xff1a;&#x8868;&#x793a;&#x5f02;&#x6b65;&#x64cd;&#x4f5c;&#x6700;&#x7ec8;&#x5b8c;&#x6210;&#x6216;&#x5931;&#x8d25;&#x7684;&#x5bf9;&#x8c61;&#xff0c;&#x7b80;&#x5316;&#x4e86;&#x5f02;&#x6b65;&#x4ee3;&#x7801;&#x5e76;&#x907f;&#x514d;&#x4e86;&#x201c;&#x56de;&#x8c03;&#x5730;&#x72f1;&#x201d;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "345,346" },
+                        },
+                        {
+                          content:
+                            "<strong>async/await</strong>&#xff1a;&#x57fa;&#x4e8e; Promises &#x7684;&#x8bed;&#x6cd5;&#x7cd6;&#xff0c;&#x5141;&#x8bb8;&#x4ee5;&#x66f4;&#x540c;&#x6b65;&#x3001;&#x53ef;&#x8bfb;&#x7684;&#x65b9;&#x5f0f;&#x7f16;&#x5199;&#x5f02;&#x6b65;&#x4ee3;&#x7801;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "346,347" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4e8b;&#x4ef6;&#x5faa;&#x73af;</strong>&#xff1a;JavaScript &#x7684;&#x5355;&#x7ebf;&#x7a0b;&#x5e76;&#x53d1;&#x6a21;&#x578b;&#xff0c;&#x4f7f;&#x7528;&#x4f5c;&#x4e1a;&#x961f;&#x5217;&#x5904;&#x7406;&#x5f02;&#x6b65;&#x64cd;&#x4f5c;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "347,348" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5b8f;&#x4efb;&#x52a1;/&#x5fae;&#x4efb;&#x52a1;</strong>&#xff1a;&#x4e8b;&#x4ef6;&#x5faa;&#x73af;&#x4e2d;&#x7528;&#x4e8e;&#x8c03;&#x5ea6;&#x5f02;&#x6b65;&#x64cd;&#x4f5c;&#x7684;&#x4e0d;&#x540c;&#x961f;&#x5217;&#xff0c;&#x5176;&#x4e2d;&#x5fae;&#x4efb;&#x52a1;&#x5177;&#x6709;&#x66f4;&#x9ad8;&#x7684;&#x4f18;&#x5148;&#x7ea7;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "348,350" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "343,344" },
+                    },
+                    {
+                      content:
+                        "<strong>DOM &#x64cd;&#x4f5c;&#xff1a;&#x4e0e;&#x7f51;&#x9875;&#x4ea4;&#x4e92;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "352,353" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x6a21;&#x5757;&#x7cfb;&#x7edf;&#xff1a;import/export</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "356,357" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "324,325" },
+                },
+                {
+                  content:
+                    "<strong>TypeScript&#xff1a;&#x4e3a; JavaScript &#x6ce8;&#x5165;&#x7c7b;&#x578b;&#x5b89;&#x5168;&#x4e0e;&#x5de5;&#x7a0b;&#x5316;&#x80fd;&#x529b;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x6838;&#x5fc3;&#x4ef7;&#x503c;&#x4e0e;&#x5de5;&#x7a0b;&#x4f18;&#x52bf;</strong>",
+                      children: [
+                        {
+                          content:
+                            '1. \n<p data-lines="374,376"><strong>&#x4ee3;&#x7801;&#x8d28;&#x91cf;&#x4e0e;&#x53ef;&#x9760;&#x6027;&#x7684;&#x8dc3;&#x5347; (Enhanced Quality &amp; Reliability)</strong><br>\n&#x9759;&#x6001;&#x7c7b;&#x578b;&#x7cfb;&#x7edf;&#x5f3a;&#x5236;&#x5f00;&#x53d1;&#x8005;&#x4e3a;&#x53d8;&#x91cf;&#x3001;&#x51fd;&#x6570;&#x548c;&#x6570;&#x636e;&#x7ed3;&#x6784;&#x5b9a;&#x4e49;&#x6e05;&#x6670;&#x7684;&#x201c;&#x5951;&#x7ea6;&#x201d;&#x3002;&#x8fd9;&#x79cd;&#x5951;&#x7ea6;&#x786e;&#x4fdd;&#x4e86;&#x6570;&#x636e;&#x5728;&#x5e94;&#x7528;&#x4e2d;&#x7684;&#x6d41;&#x52a8;&#x662f;&#x53ef;&#x9884;&#x6d4b;&#x548c;&#x5b89;&#x5168;&#x7684;&#x3002;&#x5b83;&#x4ece;&#x6839;&#x672c;&#x4e0a;&#x6d88;&#x9664;&#x4e86;&#x52a8;&#x6001;&#x8bed;&#x8a00;&#x4e2d;&#x4e00;&#x6574;&#x7c7b;&#x7684;&#x5e38;&#x89c1;&#x9519;&#x8bef;&#xff0c;&#x4f7f;&#x5f97;&#x4ee3;&#x7801;&#x5e93;&#x66f4;&#x52a0;&#x5065;&#x58ee;&#xff0c;&#x5c24;&#x5176;&#x662f;&#x5728;&#x590d;&#x6742;&#x7684;&#x4e1a;&#x52a1;&#x903b;&#x8f91;&#x548c;&#x9891;&#x7e41;&#x7684;&#x8fed;&#x4ee3;&#x4e2d;&#xff0c;&#x5176;&#x4ef7;&#x503c;&#x6108;&#x53d1;&#x51f8;&#x663e;&#x3002;</p>',
+                          children: [],
+                          payload: {
+                            tag: "li",
+                            lines: "374,377",
+                            listIndex: 1,
+                          },
+                        },
+                        {
+                          content:
+                            '2. \n<p data-lines="377,379"><strong>&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;&#x7684;&#x9769;&#x547d; (Superior Developer Experience)</strong><br>\n&#x5f53;&#x4ee3;&#x7801;&#x5e93;&#x6709;&#x4e86;&#x7c7b;&#x578b;&#x4fe1;&#x606f;&#x540e;&#xff0c;&#x5f00;&#x53d1;&#x5de5;&#x5177;&#xff08;&#x5982; <a href="https://code.visualstudio.com/">VS Code</a>&#xff09;&#x7684;&#x80fd;&#x529b;&#x88ab;&#x6781;&#x5927;&#x5730;&#x91ca;&#x653e;&#x3002;&#x5f00;&#x53d1;&#x8005;&#x53ef;&#x4ee5;&#x83b7;&#x5f97;&#x65e0;&#x4e0e;&#x4f26;&#x6bd4;&#x7684;<strong>&#x667a;&#x80fd;&#x4ee3;&#x7801;&#x8865;&#x5168;&#x3001;&#x7cbe;&#x51c6;&#x7684; API &#x63d0;&#x793a;&#x548c;&#x5b89;&#x5168;&#x7684;&#x81ea;&#x52a8;&#x91cd;&#x6784;</strong>&#x3002;&#x5728;&#x6210;&#x5343;&#x4e0a;&#x4e07;&#x884c;&#x4ee3;&#x7801;&#x7684;&#x5e9e;&#x5927;&#x9879;&#x76ee;&#x4e2d;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x65e0;&#x9700;&#x8bb0;&#x5fc6;&#x7e41;&#x6742;&#x7684; API &#x548c;&#x6570;&#x636e;&#x7ed3;&#x6784;&#xff0c;IDE &#x4f1a;&#x6210;&#x4e3a;&#x4e00;&#x4e2a;&#x667a;&#x80fd;&#x7684;&#x3001;&#x6c38;&#x4e0d;&#x51fa;&#x9519;&#x7684;&#x5411;&#x5bfc;&#x3002;&#x8fd9;&#x79cd;&#x5f00;&#x53d1;&#x4f53;&#x9a8c;&#x7684;&#x63d0;&#x5347;&#xff0c;&#x76f4;&#x63a5;&#x8f6c;&#x5316;&#x4e3a;&#x751f;&#x4ea7;&#x529b;&#x7684;&#x5927;&#x5e45;&#x63d0;&#x9ad8;&#x548c;&#x5f00;&#x53d1;&#x632b;&#x8d25;&#x611f;&#x7684;&#x964d;&#x4f4e;&#x3002;</p>',
+                          children: [],
+                          payload: {
+                            tag: "li",
+                            lines: "377,380",
+                            listIndex: 2,
+                          },
+                        },
+                        {
+                          content:
+                            '3. \n<p data-lines="380,382"><strong>&#x4ee3;&#x7801;&#x5373;&#x6587;&#x6863;&#x4e0e;&#x77e5;&#x8bc6;&#x4f20;&#x627f; (Self-Documenting Code)</strong><br>\n&#x6e05;&#x6670;&#x7684;&#x7c7b;&#x578b;&#x5b9a;&#x4e49;&#x672c;&#x8eab;&#x5c31;&#x662f;&#x6700;&#x7cbe;&#x51c6;&#x3001;&#x6700;&#x4e0d;&#x4f1a;&#x8fc7;&#x65f6;&#x7684;&#x6587;&#x6863;&#x3002;&#x6bcf;&#x4e2a;&#x7ec4;&#x4ef6;&#x7684; props &#x7c7b;&#x578b;&#x3001;&#x6bcf;&#x4e2a;&#x51fd;&#x6570;&#x7684;&#x53c2;&#x6570;&#x4e0e;&#x8fd4;&#x56de;&#x503c;&#x7c7b;&#x578b;&#xff0c;&#x90fd;&#x6e05;&#x6670;&#x5730;&#x63ed;&#x793a;&#x4e86;&#x5b83;&#x7684;&#x7528;&#x9014;&#x548c;&#x4f7f;&#x7528;&#x65b9;&#x5f0f;&#x3002;&#x8fd9;&#x6781;&#x5927;&#x5730;&#x964d;&#x4f4e;&#x4e86;&#x65b0;&#x6210;&#x5458;&#x7406;&#x89e3;&#x4ee3;&#x7801;&#x5e93;&#x7684;&#x95e8;&#x69db;&#xff0c;&#x4e5f;&#x4f7f;&#x5f97;&#x56e2;&#x961f;&#x534f;&#x4f5c;&#x4e2d;&#x7684;&#x6c9f;&#x901a;&#x6210;&#x672c;&#x663e;&#x8457;&#x4e0b;&#x964d;&#xff0c;&#x56e0;&#x4e3a;&#x201c;&#x4ee3;&#x7801;&#x7684;&#x610f;&#x56fe;&#x201d;&#x5df2;&#x7ecf;&#x88ab;&#x7c7b;&#x578b;&#x6e05;&#x6670;&#x5730;&#x8868;&#x8fbe;&#x51fa;&#x6765;&#x3002;</p>',
+                          children: [],
+                          payload: {
+                            tag: "li",
+                            lines: "380,383",
+                            listIndex: 3,
+                          },
+                        },
+                        {
+                          content:
+                            '4. \n<p data-lines="383,385"><strong>&#x8d4b;&#x80fd;&#x5927;&#x578b;&#x9879;&#x76ee;&#x4e0e;&#x56e2;&#x961f;&#x534f;&#x4f5c; (Enabling Large-Scale Collaboration)</strong><br>\n&#x5728;&#x5927;&#x578b;&#x9879;&#x76ee;&#x4e2d;&#xff0c;&#x4e0d;&#x540c;&#x7684;&#x6a21;&#x5757;&#x548c;&#x529f;&#x80fd;&#x5f80;&#x5f80;&#x7531;&#x4e0d;&#x540c;&#x7684;&#x5f00;&#x53d1;&#x8005;&#x6216;&#x56e2;&#x961f;&#x8d1f;&#x8d23;&#x3002;TypeScript &#x63d0;&#x4f9b;&#x7684;&#x7c7b;&#x578b;&#x63a5;&#x53e3;&#xff08;Interfaces&#xff09;&#x5c31;&#x50cf;&#x56e2;&#x961f;&#x4e4b;&#x95f4;&#x7b7e;&#x8ba2;&#x7684;&#x201c;&#x6280;&#x672f;&#x5408;&#x540c;&#x201d;&#xff0c;&#x786e;&#x4fdd;&#x4e86;&#x4e0d;&#x540c;&#x90e8;&#x5206;&#x5728;&#x96c6;&#x6210;&#x65f6;&#x80fd;&#x591f;&#x5b8c;&#x7f8e;&#x8854;&#x63a5;&#x3002;&#x5b83;&#x63d0;&#x4f9b;&#x4e86;&#x4e00;&#x4e2a;&#x5171;&#x540c;&#x7684;&#x8bed;&#x8a00;&#x6765;&#x8ba8;&#x8bba;&#x6570;&#x636e;&#x7ed3;&#x6784;&#x548c;&#x7cfb;&#x7edf;&#x884c;&#x4e3a;&#xff0c;&#x907f;&#x514d;&#x4e86;&#x56e0;&#x8bef;&#x89e3;&#x6216;&#x5047;&#x8bbe;&#x800c;&#x5bfc;&#x81f4;&#x7684;&#x96c6;&#x6210;&#x95ee;&#x9898;&#xff0c;&#x662f;&#x4fdd;&#x969c;&#x5927;&#x578b;&#x5e94;&#x7528;&#x67b6;&#x6784;&#x7a33;&#x5b9a;&#x6027;&#x548c;&#x53ef;&#x6269;&#x5c55;&#x6027;&#x7684;&#x6838;&#x5fc3;&#x673a;&#x5236;&#x3002;</p>',
+                          children: [],
+                          payload: {
+                            tag: "li",
+                            lines: "383,386",
+                            listIndex: 4,
+                          },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "370,371" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x5728;&#x524d;&#x7aef;&#x751f;&#x6001;&#x4e2d;&#x7684;&#x89d2;&#x8272;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong><code>tsconfig.json</code></strong>&#xff1a;&#x8fd9;&#x662f;&#x6bcf;&#x4e2a; TypeScript &#x9879;&#x76ee;&#x7684;&#x201c;&#x63a7;&#x5236;&#x4e2d;&#x5fc3;&#x201d;&#xff0c;&#x4e00;&#x4e2a;&#x914d;&#x7f6e;&#x6587;&#x4ef6;&#xff0c;&#x7528;&#x4e8e;&#x7cbe;&#x786e;&#x5730;&#x6307;&#x5bfc;&#x7f16;&#x8bd1;&#x5668;&#x5982;&#x4f55;&#x68c0;&#x67e5;&#x548c;&#x8f6c;&#x8bd1;&#x4ee3;&#x7801;&#x3002;&#x901a;&#x8fc7;&#x5b83;&#xff0c;&#x56e2;&#x961f;&#x53ef;&#x4ee5;&#x7edf;&#x4e00;&#x9879;&#x76ee;&#x7684;&#x4e25;&#x683c;&#x6027;&#x6807;&#x51c6;&#x3001;&#x6a21;&#x5757;&#x7cfb;&#x7edf;&#x548c;&#x76ee;&#x6807; JavaScript &#x7248;&#x672c;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "390,391" },
+                        },
+                        {
+                          content:
+                            '<strong>&#x4e0e;&#x6846;&#x67b6;&#x7684;&#x65e0;&#x7f1d;&#x96c6;&#x6210;</strong>&#xff1a;&#x6240;&#x6709;&#x73b0;&#x4ee3;&#x524d;&#x7aef;&#x6846;&#x67b6;&#xff08;&#x5982; <a href="https://react.dev/">React</a>, <a href="https://vuejs.org/">Vue</a>, <a href="https://angular.dev/">Angular</a>, <a href="https://svelte.dev/">Svelte</a>&#xff09;&#x90fd;&#x5df2;&#x5c06; TypeScript &#x89c6;&#x4e3a;&#x201c;&#x4e00;&#x7b49;&#x516c;&#x6c11;&#x201d;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x5f00;&#x7bb1;&#x5373;&#x7528;&#x7684;&#x5b98;&#x65b9;&#x652f;&#x6301;&#x3002;&#x4f7f;&#x7528; TypeScript &#x5f00;&#x53d1;&#x5df2;&#x6210;&#x4e3a;&#x793e;&#x533a;&#x7684;&#x6700;&#x4f73;&#x5b9e;&#x8df5;&#x548c;&#x9ed8;&#x8ba4;&#x9009;&#x62e9;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "391,392" },
+                        },
+                        {
+                          content:
+                            '<strong>&#x8fde;&#x63a5;&#x5e9e;&#x5927;&#x7684; JavaScript &#x751f;&#x6001;</strong>&#xff1a;&#x4e3a;&#x4e86;&#x8ba9; TypeScript &#x80fd;&#x591f;&#x7406;&#x89e3;&#x90a3;&#x4e9b;&#x7528;&#x7eaf; JavaScript &#x7f16;&#x5199;&#x7684;&#x5e93;&#xff0c;&#x793e;&#x533a;&#x521b;&#x5efa;&#x4e86; <a href="https://definitelytyped.org/"><strong>DefinitelyTyped</strong></a> &#x8fd9;&#x4e2a;&#x4f1f;&#x5927;&#x7684;&#x9879;&#x76ee;&#x3002;&#x5b83;&#x4e3a;&#x6570;&#x4ee5;&#x4e07;&#x8ba1;&#x7684; JavaScript &#x5e93;&#x63d0;&#x4f9b;&#x4e86;&#x9ad8;&#x8d28;&#x91cf;&#x7684;&#x7c7b;&#x578b;&#x58f0;&#x660e;&#x6587;&#x4ef6;&#xff08;<code>.d.ts</code>&#xff09;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x53ea;&#x9700;&#x901a;&#x8fc7;&#x7b80;&#x5355;&#x7684;&#x5b89;&#x88c5;&#xff0c;&#x5c31;&#x80fd;&#x5728; TypeScript &#x9879;&#x76ee;&#x4e2d;&#x5b89;&#x5168;&#x3001;&#x667a;&#x80fd;&#x5730;&#x4f7f;&#x7528;&#x51e0;&#x4e4e;&#x6240;&#x6709;&#x7684;&#x5b58;&#x91cf; JavaScript &#x8f6e;&#x5b50;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "392,394" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "386,387" },
+                    },
+                    {
+                      content:
+                        "&#x5982;&#x4f55;&#x5f00;&#x59cb;&#x5b66;&#x4e60; TypeScript",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x6cdb;&#x578b;&#xff08;Generics&#xff09;</strong>&#xff1a;&#x8ba9;&#x51fd;&#x6570;&#x3001;&#x7c7b;&#x3001;&#x63a5;&#x53e3;&#x5177;&#x5907;&#x201c;&#x53c2;&#x6570;&#x5316;&#x7c7b;&#x578b;&#x201d;&#x7684;&#x80fd;&#x529b;&#xff0c;&#x5b9e;&#x73b0;&#x771f;&#x6b63;&#x7684;&#x53ef;&#x590d;&#x7528;&#x3002;&#x4f8b;&#x5982; <code>Promise&lt;T&gt;</code>&#x3001;<code>Array&lt;T&gt;</code> &#x7684;&#x5e95;&#x5c42;&#x539f;&#x7406;&#xff0c;&#x4ee5;&#x53ca;&#x81ea;&#x5b9a;&#x4e49;&#x5de5;&#x5177;&#x51fd;&#x6570;&#x5982; <code>identity&lt;T&gt;(arg: T): T</code>&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "398,399" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x8054;&#x5408;&#x7c7b;&#x578b;&#xff08;Unions&#xff09;&#x4e0e;&#x4ea4;&#x53c9;&#x7c7b;&#x578b;&#xff08;Intersections&#xff09;</strong>&#xff1a;&#x8054;&#x5408;&#x8868;&#x8fbe;&#x201c;&#x6216;&#x201d;&#xff08;&#x5982; <code>string | number</code>&#xff09;&#xff0c;&#x4ea4;&#x53c9;&#x8868;&#x8fbe;&#x201c;&#x4e14;&#x201d;&#xff08;&#x5982; <code>Partial&lt;T&gt; &amp; Record&lt;K, V&gt;</code>&#xff09;&#x3002;&#x7ed3;&#x5408;&#x8fa8;&#x8bc6;&#x8054;&#x5408;&#xff08;Discriminated Unions&#xff09;&#x5b9e;&#x73b0;&#x7cbe;&#x51c6;&#x7684;&#x7c7b;&#x578b;&#x5206;&#x652f;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "399,400" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7c7b;&#x578b;&#x6536;&#x7a84;&#xff08;Type Narrowing&#xff09;</strong>&#xff1a;&#x901a;&#x8fc7; <code>typeof</code>&#x3001;<code>in</code>&#x3001;<code>instanceof</code>&#x3001;&#x5b57;&#x9762;&#x91cf;&#x8fa8;&#x8bc6;&#x6216;&#x81ea;&#x5b9a;&#x4e49;&#x7c7b;&#x578b;&#x5b88;&#x536b;&#xff0c;&#x5c06;&#x5bbd;&#x6cdb;&#x7684;&#x8054;&#x5408;&#x7c7b;&#x578b;&#x9010;&#x6b65;&#x6536;&#x7a84;&#x4e3a;&#x7cbe;&#x786e;&#x7c7b;&#x578b;&#xff0c;&#x907f;&#x514d; any &#x7684;&#x6ee5;&#x7528;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "400,401" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x58f0;&#x660e;&#x6587;&#x4ef6;&#xff08;Declaration Files, .d.ts&#xff09;</strong>&#xff1a;&#x7406;&#x89e3;&#x5982;&#x4f55;&#x4e3a;&#x7eaf; JS &#x5e93;&#x7f16;&#x5199;&#x7c7b;&#x578b;&#x58f0;&#x660e;&#xff0c;&#x6216;&#x4f7f;&#x7528; <code>@types/*</code> &#x5305;&#x3002;&#x638c;&#x63e1;&#x7c7b;&#x578b;&#x4e0e;&#x8fd0;&#x884c;&#x65f6;&#x7684;&#x8fb9;&#x754c;&#x2014;&#x2014;&#x7c7b;&#x578b;&#x53ea;&#x5b58;&#x5728;&#x4e8e;&#x7f16;&#x8bd1;&#x65f6;&#xff0c;&#x8fd0;&#x884c;&#x65f6;&#x9700;&#x7528;&#x5982; zod&#x3001;io-ts &#x7b49;&#x5e93;&#x6865;&#x63a5;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "401,402" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7c7b;&#x578b;&#x4e0e;&#x8fd0;&#x884c;&#x65f6;&#x8fb9;&#x754c;</strong>&#xff1a;&#x660e;&#x786e;&#x7c7b;&#x578b;&#x64e6;&#x9664;&#x7684;&#x73b0;&#x5b9e;&#xff0c;&#x5b66;&#x4f1a;&#x5728;&#x9700;&#x8981;&#x65f6;&#x5f15;&#x5165;&#x8fd0;&#x884c;&#x65f6;&#x6821;&#x9a8c;&#xff08;&#x5982; zod&#xff09;&#x6765;&#x8865;&#x8db3;&#x7c7b;&#x578b;&#x7cfb;&#x7edf;&#x7684;&#x76f2;&#x533a;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "402,404" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "394,395" },
+                    },
+                    {
+                      content:
+                        "<strong>TypeScript &#x7684;&#x5ef6;&#x4f38;&#xff1a;&#x4e0e; JSDoc &#x7684;&#x534f;&#x540c;&#x827a;&#x672f;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>1. &#x6e10;&#x8fdb;&#x5f0f;&#x8fc1;&#x79fb;&#x7684;&#x6865;&#x6881;&#xff1a;&#x4e3a;&#x5386;&#x53f2;&#x4ee3;&#x7801;&#x6ce8;&#x5165;&#x73b0;&#x4ee3;&#x6d3b;&#x529b;</strong>",
+                          children: [],
+                          payload: { tag: "h5", lines: "414,415" },
+                        },
+                        {
+                          content:
+                            "<strong>2. &#x8f7b;&#x91cf;&#x7ea7;&#x7c7b;&#x578b;&#x68c0;&#x67e5;&#x7684;&#x5229;&#x5668;&#xff1a;&#x96f6;&#x6210;&#x672c;&#x4eab;&#x53d7;&#x667a;&#x80fd;&#x63d0;&#x793a;</strong>",
+                          children: [],
+                          payload: { tag: "h5", lines: "420,421" },
+                        },
+                        {
+                          content:
+                            "<strong>3. &#x8d85;&#x8d8a;&#x7c7b;&#x578b;&#xff1a;&#x7f16;&#x5199;&#x201c;&#x4f1a;&#x8bf4;&#x8bdd;&#x201d;&#x7684;&#x6587;&#x6863;</strong>",
+                          children: [],
+                          payload: { tag: "h5", lines: "426,427" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "404,405" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x7ed3;&#x8bba;&#xff1a;&#x4e00;&#x79cd;&#x601d;&#x7ef4;&#xff0c;&#x4e24;&#x79cd;&#x5de5;&#x5177;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>TypeScript</strong> &#x662f;&#x6784;&#x5efa;&#x65b0;&#x9879;&#x76ee;&#x7684;**&#x201c;&#x4e3b;&#x529b;&#x5f15;&#x64ce;&#x201d;**&#xff0c;&#x63d0;&#x4f9b;&#x6700;&#x5168;&#x9762;&#x3001;&#x6700;&#x5f3a;&#x5927;&#x7684;&#x7c7b;&#x578b;&#x7cfb;&#x7edf;&#x548c;&#x5de5;&#x7a0b;&#x80fd;&#x529b;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "436,437" },
+                        },
+                        {
+                          content:
+                            "<strong>JSDoc</strong> &#x5219;&#x662f;&#x529f;&#x80fd;&#x5f3a;&#x5927;&#x7684;**&#x201c;&#x901a;&#x7528;&#x9002;&#x914d;&#x5668;&#x201d;**&#xff0c;&#x5b83;&#x5c06; TypeScript &#x7684;&#x7c7b;&#x578b;&#x5b89;&#x5168;&#x7406;&#x5ff5;&#x5ef6;&#x4f38;&#x5230;&#x6bcf;&#x4e2a; JavaScript &#x5b58;&#x5728;&#x7684;&#x89d2;&#x843d;&#xff0c;&#x65e0;&#x8bba;&#x662f;&#x5386;&#x53f2;&#x4ee3;&#x7801;&#x3001;&#x8f7b;&#x91cf;&#x811a;&#x672c;&#x8fd8;&#x662f;&#x6587;&#x6863;&#x7f16;&#x5199;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "437,439" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "432,433" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "362,363" },
+                },
+              ],
+              payload: { tag: "h2", lines: "69,70" },
+            },
+            {
+              content:
+                "<strong>III. &#x57fa;&#x672c;&#x5f00;&#x53d1;&#x73af;&#x5883;&#x548c;&#x5de5;&#x5177;</strong>",
+              children: [
+                {
+                  content:
+                    "<strong>&#x7248;&#x672c;&#x63a7;&#x5236;&#x7cfb;&#x7edf;&#xff1a;Git &#x548c; GitHub &#x534f;&#x4f5c;&#x5f00;&#x53d1;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x4ed3;&#x5e93;</strong>&#xff1a;&#x6587;&#x4ef6;&#x3001;&#x6587;&#x4ef6;&#x5939;&#x53ca;&#x5176;&#x4fee;&#x8ba2;&#x5386;&#x53f2;&#x7684;&#x5b8c;&#x6574;&#x96c6;&#x5408;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "451,452" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x63d0;&#x4ea4;</strong>&#xff1a;&#x9879;&#x76ee;&#x5386;&#x53f2;&#x4e2d;&#x7684;&#x65f6;&#x95f4;&#x5feb;&#x7167;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "452,453" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x5206;&#x652f;</strong>&#xff1a;&#x72ec;&#x7acb;&#x7684;&#x5f00;&#x53d1;&#x7ebf;&#xff0c;&#x5b9e;&#x73b0;&#x9694;&#x79bb;&#x5f00;&#x53d1;&#x6d4b;&#x8bd5;&#x548c;&#x5e76;&#x884c;&#x5de5;&#x4f5c;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "453,455" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "445,446" },
+                },
+                {
+                  content:
+                    "<strong>Git &#x5de5;&#x4f5c;&#x6d41;&#x4e0e;&#x56e2;&#x961f;&#x534f;&#x4f5c;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x4e3b;&#x6d41; Git &#x5de5;&#x4f5c;&#x6d41;&#x6a21;&#x5f0f;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "467,468" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x4ee3;&#x7801;&#x5ba1;&#x67e5; (Code Review) &#x7684;&#x91cd;&#x8981;&#x6027;&#x548c;&#x6d41;&#x7a0b;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "479,480" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;&#x4e3b;&#x6d41; Git &#x5de5;&#x4f5c;&#x6d41;&#x5bf9;&#x6bd4; (GitFlow vs. GitHub Flow)</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="487,499">\n<thead data-lines="487,488">\n<tr data-lines="487,488">\n<th style="text-align:left">&#x7279;&#x6027;/&#x5de5;&#x4f5c;&#x6d41;</th>\n<th style="text-align:left"><a href="https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow">GitFlow</a></th>\n<th style="text-align:left"><a href="https://docs.github.com/en/get-started/quickstart/github-flow">GitHub Flow</a></th>\n</tr>\n</thead>\n<tbody data-lines="489,499">\n<tr data-lines="489,490">\n<td style="text-align:left"><strong>&#x5206;&#x652f;&#x6a21;&#x578b;</strong></td>\n<td style="text-align:left">&#x591a;&#x5206;&#x652f;&#xff08;master, develop, feature, release, hotfix&#xff09;</td>\n<td style="text-align:left">&#x6781;&#x7b80;&#xff08;main + &#x77ed;&#x751f;&#x547d;&#x5468;&#x671f;&#x7279;&#x6027;&#x5206;&#x652f;&#xff09;</td>\n</tr>\n<tr data-lines="490,491">\n<td style="text-align:left"><strong>&#x53d1;&#x5e03;&#x6a21;&#x5f0f;</strong></td>\n<td style="text-align:left">&#x7ed3;&#x6784;&#x5316;&#xff0c;&#x6709;&#x4e13;&#x95e8;&#x7684; release &#x5206;&#x652f;&#x548c; QA &#x9636;&#x6bb5;</td>\n<td style="text-align:left">&#x6301;&#x7eed;&#x96c6;&#x6210;/&#x90e8;&#x7f72;&#xff0c;&#x5408;&#x5e76;&#x540e;&#x5373;&#x53ef;&#x90e8;&#x7f72;</td>\n</tr>\n<tr data-lines="491,492">\n<td style="text-align:left"><strong>&#x590d;&#x6742;&#x6027;</strong></td>\n<td style="text-align:left">&#x9ad8;&#xff0c;&#x5206;&#x652f;&#x548c;&#x5408;&#x5e76;&#x64cd;&#x4f5c;&#x591a;&#xff0c;&#x9700;&#x8981;&#x4e25;&#x683c;&#x89c4;&#x8303;</td>\n<td style="text-align:left">&#x4f4e;&#xff0c;&#x7b80;&#x5355;&#x5206;&#x652f;&#x548c;&#x5408;&#x5e76;&#xff0c;&#x6613;&#x4e8e;&#x7406;&#x89e3;&#x548c;&#x5b9e;&#x65bd;</td>\n</tr>\n<tr data-lines="492,493">\n<td style="text-align:left"><strong>&#x56e2;&#x961f;&#x89c4;&#x6a21;</strong></td>\n<td style="text-align:left">&#x9002;&#x5408;&#x5927;&#x578b;&#x56e2;&#x961f;&#xff0c;&#x9700;&#x8981;&#x4e25;&#x683c;&#x63a7;&#x5236;&#x548c;&#x7248;&#x672c;&#x5316;&#x53d1;&#x5e03;</td>\n<td style="text-align:left">&#x9002;&#x5408;&#x5c0f;&#x578b;&#x654f;&#x6377;&#x56e2;&#x961f;&#xff0c;&#x8ffd;&#x6c42;&#x5feb;&#x901f;&#x8fed;&#x4ee3;&#x548c;&#x90e8;&#x7f72;</td>\n</tr>\n<tr data-lines="493,494">\n<td style="text-align:left"><strong>CI/CD &#x517c;&#x5bb9;&#x6027;</strong></td>\n<td style="text-align:left">&#x8f83;&#x5dee;&#xff0c;&#x591a;&#x6b65;&#x9aa4;&#x6d41;&#x7a0b;&#x53ef;&#x80fd;&#x963b;&#x788d;&#x6301;&#x7eed;&#x4ea4;&#x4ed8;</td>\n<td style="text-align:left">&#x826f;&#x597d;&#xff0c;&#x4e0e;&#x81ea;&#x52a8;&#x5316;&#x6d4b;&#x8bd5;&#x548c;&#x90e8;&#x7f72;&#x65e0;&#x7f1d;&#x96c6;&#x6210;</td>\n</tr>\n<tr data-lines="494,495">\n<td style="text-align:left"><strong>&#x5408;&#x5e76;&#x9891;&#x7387;</strong></td>\n<td style="text-align:left">&#x9891;&#x7e41;&#xff08;&#x8de8;&#x591a;&#x4e2a;&#x5206;&#x652f;&#xff09;</td>\n<td style="text-align:left">&#x4e3b;&#x8981;&#x5408;&#x5e76;&#x5230; main&#xff0c;&#x51cf;&#x5c11;&#x5408;&#x5e76;&#x51b2;&#x7a81;</td>\n</tr>\n<tr data-lines="495,496">\n<td style="text-align:left"><strong>&#x6d4b;&#x8bd5;&#x65b9;&#x6cd5;</strong></td>\n<td style="text-align:left">&#x4e3b;&#x8981;&#x5728; release &#x5206;&#x652f;&#x8fdb;&#x884c;&#x4e25;&#x683c;&#x6d4b;&#x8bd5;</td>\n<td style="text-align:left">&#x81ea;&#x52a8;&#x5316; CI &#x6d4b;&#x8bd5;&#x5728;&#x7279;&#x6027;&#x5206;&#x652f;&#x548c; PR &#x4e0a;&#x81f3;&#x5173;&#x91cd;&#x8981;</td>\n</tr>\n<tr data-lines="496,497">\n<td style="text-align:left"><strong>&#x70ed;&#x4fee;&#x590d;</strong></td>\n<td style="text-align:left">&#x4e13;&#x95e8;&#x7684; hotfix &#x5206;&#x652f;&#xff0c;&#x4e0d;&#x5f71;&#x54cd;&#x4e3b;&#x5f00;&#x53d1;</td>\n<td style="text-align:left">&#x901a;&#x8fc7;&#x7279;&#x6027;&#x5206;&#x652f;&#x76f4;&#x63a5;&#x4ece; main &#x521b;&#x5efa;&#x548c;&#x5408;&#x5e76;</td>\n</tr>\n<tr data-lines="497,498">\n<td style="text-align:left"><strong>&#x751f;&#x4ea7;&#x7a33;&#x5b9a;&#x6027;&#x98ce;&#x9669;</strong></td>\n<td style="text-align:left">&#x8f83;&#x4f4e;&#xff0c;&#x56e0;&#x6709; release &#x5206;&#x652f;&#x8fdb;&#x884c;&#x9636;&#x6bb5;&#x6027;&#x6d4b;&#x8bd5;</td>\n<td style="text-align:left">&#x8f83;&#x9ad8;&#xff0c;&#x82e5; PR &#x5ba1;&#x67e5;&#x548c;&#x6d4b;&#x8bd5;&#x4e0d;&#x4e25;&#x683c;</td>\n</tr>\n<tr data-lines="498,499">\n<td style="text-align:left"><strong>&#x5de5;&#x5177;&#x652f;&#x6301;</strong></td>\n<td style="text-align:left">&#x8bb8;&#x591a; <a href="https://git-scm.com/">Git</a> &#x5de5;&#x5177;&#x548c; GUI &#x652f;&#x6301;</td>\n<td style="text-align:left">&#x4e0e; <a href="https://github.com/">GitHub</a> PR &#x7cfb;&#x7edf;&#x539f;&#x751f;&#x96c6;&#x6210;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "487,499" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "485,486" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "463,464" },
+                },
+                {
+                  content:
+                    "<strong>&#x9ad8;&#x7ea7;&#x5de5;&#x7a0b;&#x5316;&#x5de5;&#x4f5c;&#x6d41;</strong>",
+                  children: [
+                    {
+                      content: "<strong>Monorepo &#x7ba1;&#x7406;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x8868;&#x683c;&#xff1a;Monorepo &#x7ba1;&#x7406;&#x5de5;&#x5177;&#x5bf9;&#x6bd4; (Nx vs. Lerna)</strong>",
+                          children: [
+                            {
+                              content:
+                                '<table data-lines="520,531">\n<thead data-lines="520,521">\n<tr data-lines="520,521">\n<th style="text-align:left">&#x7279;&#x6027;/&#x5de5;&#x5177;</th>\n<th style="text-align:left"><a href="https://lerna.js.org/">Lerna</a> (v6+ &#x96c6;&#x6210; <a href="https://nx.dev/">Nx</a>)</th>\n<th style="text-align:left"><a href="https://nx.dev/">Nx</a></th>\n</tr>\n</thead>\n<tbody data-lines="522,531">\n<tr data-lines="522,523">\n<td style="text-align:left"><strong>&#x6838;&#x5fc3;&#x529f;&#x80fd;</strong></td>\n<td style="text-align:left">&#x591a;&#x5305;&#x53d1;&#x5e03;&#x7ba1;&#x7406;&#x3001;&#x7248;&#x672c;&#x63a7;&#x5236;&#x3001;&#x547d;&#x4ee4;&#x6267;&#x884c;</td>\n<td style="text-align:left">&#x6574;&#x4e2a;&#x5f00;&#x53d1;&#x751f;&#x547d;&#x5468;&#x671f;&#x7ba1;&#x7406;&#x3001;&#x6784;&#x5efa;&#x4f18;&#x5316;&#x3001;&#x4f9d;&#x8d56;&#x5206;&#x6790;&#x3001;&#x4ee3;&#x7801;&#x751f;&#x6210;</td>\n</tr>\n<tr data-lines="523,524">\n<td style="text-align:left"><strong>&#x4efb;&#x52a1;&#x6267;&#x884c;</strong></td>\n<td style="text-align:left">&#x59d4;&#x6258;&#x7ed9; <a href="https://nx.dev/">Nx</a>&#xff0c;&#x83b7;&#x5f97;&#x7f13;&#x5b58;&#x548c;&#x5206;&#x5e03;&#x5f0f;&#x6267;&#x884c;&#x80fd;&#x529b;</td>\n<td style="text-align:left">&#x5185;&#x7f6e;&#x5f3a;&#x5927;&#x4efb;&#x52a1;&#x8fd0;&#x884c;&#x5668;&#xff0c;&#x652f;&#x6301;&#x667a;&#x80fd;&#x7f13;&#x5b58;&#x548c;&#x5206;&#x5e03;&#x5f0f;&#x6267;&#x884c;</td>\n</tr>\n<tr data-lines="524,525">\n<td style="text-align:left"><strong>&#x6027;&#x80fd;&#x4f18;&#x5316;</strong></td>\n<td style="text-align:left">&#x901a;&#x8fc7; <a href="https://nx.dev/">Nx</a> &#x5b9e;&#x73b0;&#x8ba1;&#x7b97;&#x7f13;&#x5b58;&#x3001;&#x5206;&#x5e03;&#x5f0f;&#x4efb;&#x52a1;&#x6267;&#x884c;</td>\n<td style="text-align:left">&#x6781;&#x81f4;&#x7684;&#x6784;&#x5efa;&#x548c;&#x6d4b;&#x8bd5;&#x65f6;&#x95f4;&#x4f18;&#x5316;&#xff0c;&#x667a;&#x80fd;&#x7f13;&#x5b58;&#x3001;affected &#x547d;&#x4ee4;</td>\n</tr>\n<tr data-lines="525,526">\n<td style="text-align:left"><strong>&#x4f9d;&#x8d56;&#x5206;&#x6790;</strong></td>\n<td style="text-align:left">&#x57fa;&#x7840;&#x7684;&#x5305;&#x95f4;&#x4f9d;&#x8d56;&#x7ba1;&#x7406;</td>\n<td style="text-align:left">&#x9ad8;&#x7ea7;&#x9879;&#x76ee;&#x56fe;&#x8c31;&#x5206;&#x6790;&#xff0c;&#x53ef;&#x89c6;&#x5316;&#x4f9d;&#x8d56;&#x5173;&#x7cfb;</td>\n</tr>\n<tr data-lines="526,527">\n<td style="text-align:left"><strong>&#x4ee3;&#x7801;&#x751f;&#x6210;</strong></td>\n<td style="text-align:left">&#x4e0d;&#x76f4;&#x63a5;&#x63d0;&#x4f9b;&#xff0c;&#x4f46;&#x53ef;&#x4e0e;&#x5176;&#x4ed6;&#x5de5;&#x5177;&#x7ed3;&#x5408;</td>\n<td style="text-align:left">&#x5185;&#x7f6e;&#x5f3a;&#x5927;&#x7684;&#x4ee3;&#x7801;&#x751f;&#x6210;&#x5668;</td>\n</tr>\n<tr data-lines="527,528">\n<td style="text-align:left"><strong>&#x6846;&#x67b6;&#x652f;&#x6301;</strong></td>\n<td style="text-align:left">&#x6846;&#x67b6;&#x65e0;&#x5173;&#xff0c;&#x4e3b;&#x8981;&#x7528;&#x4e8e; JS/TS &#x5305;</td>\n<td style="text-align:left">&#x6846;&#x67b6;&#x65e0;&#x5173;&#xff0c;&#x5bf9; <a href="https://react.dev/">React</a>, <a href="https://vuejs.org/">Vue</a>, <a href="https://angular.dev/">Angular</a>, <a href="https://nodejs.org/">Node.js</a> &#x7b49;&#x63d0;&#x4f9b;&#x4e00;&#x6d41;&#x652f;&#x6301;</td>\n</tr>\n<tr data-lines="528,529">\n<td style="text-align:left"><strong>&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</strong></td>\n<td style="text-align:left">&#x76f8;&#x5bf9;&#x8f83;&#x4f4e;&#xff0c;&#x5c24;&#x5176;&#x662f;&#x57fa;&#x7840;&#x53d1;&#x5e03;&#x529f;&#x80fd;</td>\n<td style="text-align:left">&#x8f83;&#x9ad8;&#xff0c;&#x529f;&#x80fd;&#x4e30;&#x5bcc;&#xff0c;&#x9700;&#x7406;&#x89e3;&#x5176;&#x6838;&#x5fc3;&#x6982;&#x5ff5;</td>\n</tr>\n<tr data-lines="529,530">\n<td style="text-align:left"><strong>&#x793e;&#x533a;&#x4e0e;&#x751f;&#x6001;</strong></td>\n<td style="text-align:left">&#x5386;&#x53f2;&#x60a0;&#x4e45;&#xff0c;&#x793e;&#x533a;&#x6d3b;&#x8dc3;&#xff0c;&#x88ab; <a href="https://nx.dev/">Nx</a> &#x63a5;&#x7ba1;&#x540e;&#x7115;&#x53d1;&#x65b0;&#x751f;</td>\n<td style="text-align:left">&#x6d3b;&#x8dc3;&#x793e;&#x533a;&#xff0c;&#x6587;&#x6863;&#x4e30;&#x5bcc;&#xff0c;Nrwl &#x516c;&#x53f8;&#x652f;&#x6301;</td>\n</tr>\n<tr data-lines="530,531">\n<td style="text-align:left"><strong>&#x7406;&#x60f3;&#x573a;&#x666f;</strong></td>\n<td style="text-align:left">&#x4e13;&#x6ce8;&#x4e8e;&#x591a;&#x5305;&#x53d1;&#x5e03;&#x3001;&#x7248;&#x672c;&#x63a7;&#x5236;&#x7684;&#x9879;&#x76ee;</td>\n<td style="text-align:left">&#x5927;&#x578b;&#x590d;&#x6742;&#x9879;&#x76ee;&#xff0c;&#x591a;&#x56e2;&#x961f;&#x534f;&#x4f5c;&#xff0c;&#x8ffd;&#x6c42;&#x6781;&#x81f4;&#x6784;&#x5efa;&#x6027;&#x80fd;&#x548c;&#x4e00;&#x81f4;&#x6027;</td>\n</tr>\n</tbody>\n</table>',
+                              children: [],
+                              payload: { tag: "table", lines: "520,531" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "518,519" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "508,509" },
+                    },
+                    {
+                      content:
+                        "<strong>Polyrepo&#xff1a;&#x4f20;&#x7edf;&#x7684;&#x591a;&#x4ee3;&#x7801;&#x5e93;&#x6a21;&#x5f0f;</strong>",
+                      children: [
+                        {
+                          content: "",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x6e05;&#x6670;&#x7684;&#x9694;&#x79bb;&#x6027; (Strong Isolation):</strong> &#x6bcf;&#x4e2a;&#x9879;&#x76ee;&#x90fd;&#x662f;&#x5b8c;&#x5168;&#x72ec;&#x7acb;&#x7684;&#xff0c;&#x62e5;&#x6709;&#x81ea;&#x5df1;&#x7684;&#x6784;&#x5efa;&#x3001;&#x6d4b;&#x8bd5;&#x548c;&#x90e8;&#x7f72;&#x6d41;&#x6c34;&#x7ebf;&#x3002;&#x4e00;&#x4e2a;&#x9879;&#x76ee;&#x7684;&#x53d8;&#x66f4;&#x6216;&#x6545;&#x969c;&#x4e0d;&#x4f1a;&#x76f4;&#x63a5;&#x5f71;&#x54cd;&#x5230;&#x5176;&#x4ed6;&#x9879;&#x76ee;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "544,545" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x56e2;&#x961f;&#x81ea;&#x6cbb;&#x6027; (Team Autonomy):</strong> &#x5404;&#x4e2a;&#x56e2;&#x961f;&#x53ef;&#x4ee5;&#x5b8c;&#x5168;&#x63a7;&#x5236;&#x81ea;&#x5df1;&#x7684;&#x4ee3;&#x7801;&#x5e93;&#xff0c;&#x81ea;&#x7531;&#x9009;&#x62e9;&#x9002;&#x5408;&#x8be5;&#x9879;&#x76ee;&#x7684;&#x6280;&#x672f;&#x6808;&#x3001;&#x4f9d;&#x8d56;&#x7248;&#x672c;&#x548c;&#x5f00;&#x53d1;&#x6d41;&#x7a0b;&#xff0c;&#x800c;&#x65e0;&#x9700;&#x4e0e;&#x5176;&#x4ed6;&#x56e2;&#x961f;&#x534f;&#x8c03;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "545,546" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x7b80;&#x5316;&#x7684;&#x8bbf;&#x95ee;&#x63a7;&#x5236; (Simplified Access Control):</strong> &#x53ef;&#x4ee5;&#x975e;&#x5e38;&#x7cbe;&#x7ec6;&#x5730;&#x63a7;&#x5236;&#x6bcf;&#x4e2a;&#x4ed3;&#x5e93;&#x7684;&#x8bfb;&#x5199;&#x6743;&#x9650;&#xff0c;&#x53ea;&#x5bf9;&#x76f8;&#x5173;&#x4eba;&#x5458;&#x5f00;&#x653e;&#xff0c;&#x5b89;&#x5168;&#x6027;&#x7ba1;&#x7406;&#x76f4;&#x89c2;&#x660e;&#x4e86;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "546,547" },
+                            },
+                            {
+                              content:
+                                '<strong>&#x6027;&#x80fd;&#x4f18;&#x5f02; (Performance):</strong> &#x5355;&#x4e2a;&#x4ed3;&#x5e93;&#x4f53;&#x79ef;&#x5c0f;&#xff0c;<a href="https://git-scm.com/">git</a> clone&#x3001;fetch &#x7b49;&#x64cd;&#x4f5c;&#x901f;&#x5ea6;&#x5feb;&#xff0c;&#x5386;&#x53f2;&#x8bb0;&#x5f55;&#x6e05;&#x6670;&#x4e14;&#x53ea;&#x4e0e;&#x5f53;&#x524d;&#x9879;&#x76ee;&#x76f8;&#x5173;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "547,549" },
+                            },
+                          ],
+                          payload: { tag: "ul", lines: "544,549" },
+                        },
+                        {
+                          content: "",
+                          children: [
+                            {
+                              content:
+                                '<strong>&#x4ee3;&#x7801;&#x5171;&#x4eab;&#x56f0;&#x96be; (Difficult Code Sharing):</strong> &#x8fd9;&#x662f; Polyrepo &#x6700;&#x5927;&#x7684;&#x75db;&#x70b9;&#x3002;&#x5f53;&#x591a;&#x4e2a;&#x9879;&#x76ee;&#x9700;&#x8981;&#x590d;&#x7528;&#x540c;&#x4e00;&#x4e2a;&#x7ec4;&#x4ef6;&#x5e93;&#x6216;&#x5de5;&#x5177;&#x51fd;&#x6570;&#x65f6;&#xff0c;&#x5fc5;&#x987b;&#x5c06;&#x5176;&#x53d1;&#x5e03;&#x4e3a;&#x72ec;&#x7acb;&#x7684;&#x5305;&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x53d1;&#x5e03;&#x5230; <a href="https://www.npmjs.com/">npm</a>&#xff09;&#xff0c;&#x7136;&#x540e;&#x5728;&#x6bcf;&#x4e2a;&#x6d88;&#x8d39;&#x5b83;&#x7684;&#x9879;&#x76ee;&#x4e2d;&#x5b89;&#x88c5;&#x548c;&#x66f4;&#x65b0;&#x3002;&#x8fd9;&#x4e2a;&#x8fc7;&#x7a0b;&#x7e41;&#x7410;&#x3001;&#x8017;&#x65f6;&#xff0c;&#x4e14;&#x5bb9;&#x6613;&#x5bfc;&#x81f4;&#x7248;&#x672c;&#x4e0d;&#x4e00;&#x81f4;&#x548c;&#x201c;&#x4f9d;&#x8d56;&#x5730;&#x72f1;&#x201d;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "553,554" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x914d;&#x7f6e;&#x4e0e;&#x5de5;&#x5177;&#x94fe;&#x4e0d;&#x4e00;&#x81f4; (Inconsistent Tooling and Configuration):</strong> &#x4e0d;&#x540c;&#x7684;&#x9879;&#x76ee;&#x53ef;&#x80fd;&#x4f1a;&#x4f7f;&#x7528;&#x4e0d;&#x540c;&#x7248;&#x672c;&#x7684;&#x6784;&#x5efa;&#x5de5;&#x5177;&#x3001;Linter &#x89c4;&#x5219;&#x6216;&#x6d4b;&#x8bd5;&#x6846;&#x67b6;&#xff0c;&#x5bfc;&#x81f4;&#x201c;&#x4f9d;&#x8d56;&#x6f02;&#x79fb;&#x201d;&#xff08;Dependency Drift&#xff09;&#x3002;&#x8fd9;&#x4e0d;&#x4ec5;&#x589e;&#x52a0;&#x4e86;&#x7ef4;&#x62a4;&#x6210;&#x672c;&#xff0c;&#x4e5f;&#x8ba9;&#x5f00;&#x53d1;&#x8005;&#x5728;&#x4e0d;&#x540c;&#x9879;&#x76ee;&#x95f4;&#x5207;&#x6362;&#x65f6;&#x9700;&#x8981;&#x9002;&#x5e94;&#x4e0d;&#x540c;&#x7684;&#x73af;&#x5883;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "554,555" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x8de8;&#x9879;&#x76ee;&#x91cd;&#x6784;&#x7684;&#x5669;&#x68a6; (Nightmare of Cross-Project Refactoring):</strong> &#x5982;&#x679c;&#x9700;&#x8981;&#x5bf9;&#x4e00;&#x4e2a;&#x88ab;&#x591a;&#x4e2a;&#x9879;&#x76ee;&#x4f9d;&#x8d56;&#x7684;&#x5171;&#x4eab;&#x5e93;&#x8fdb;&#x884c;&#x7834;&#x574f;&#x6027;&#xff08;Breaking Change&#xff09;&#x7684; API &#x53d8;&#x66f4;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x5fc5;&#x987b;&#x5728;&#x6240;&#x6709;&#x6d88;&#x8d39;&#x8be5;&#x5e93;&#x7684;&#x9879;&#x76ee;&#x4e2d;&#x9010;&#x4e00;&#x521b;&#x5efa; Pull Request &#x8fdb;&#x884c;&#x4fee;&#x6539;&#x3002;&#x8fd9;&#x79cd;&#x64cd;&#x4f5c;&#x6781;&#x5176;&#x8017;&#x65f6;&#x4e14;&#x96be;&#x4ee5;&#x534f;&#x8c03;&#xff0c;&#x65e0;&#x6cd5;&#x5b9e;&#x73b0;&#x201c;&#x539f;&#x5b50;&#x6027;&#x53d8;&#x66f4;&#x201d;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "555,556" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x534f;&#x4f5c;&#x4e0e;&#x4ee3;&#x7801;&#x53d1;&#x73b0;&#x6210;&#x672c;&#x9ad8; (High Cost of Collaboration and Code Discovery):</strong> &#x56e2;&#x961f;&#x6210;&#x5458;&#x5f88;&#x96be;&#x53d1;&#x73b0;&#x548c;&#x5b66;&#x4e60;&#x5176;&#x4ed6;&#x56e2;&#x961f;&#x7684;&#x4f18;&#x79c0;&#x5b9e;&#x8df5;&#x6216;&#x53ef;&#x590d;&#x7528;&#x4ee3;&#x7801;&#xff0c;&#x5f62;&#x6210;&#x4e86;&#x201c;&#x4ee3;&#x7801;&#x5b64;&#x5c9b;&#x201d;&#x3002;&#x65b0;&#x6210;&#x5458;&#x5165;&#x804c;&#x65f6;&#xff0c;&#x9700;&#x8981;&#x514b;&#x9686;&#x548c;&#x914d;&#x7f6e;&#x591a;&#x4e2a;&#x4ed3;&#x5e93;&#x624d;&#x80fd;&#x642d;&#x5efa;&#x8d77;&#x5b8c;&#x6574;&#x7684;&#x5f00;&#x53d1;&#x73af;&#x5883;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "556,558" },
+                            },
+                          ],
+                          payload: { tag: "ul", lines: "553,558" },
+                        },
+                        {
+                          content: "",
+                          children: [
+                            {
+                              content:
+                                "&#x4ece;&#x201c;&#x53d1;&#x5e03; - &#x6d88;&#x8d39;&#x201d;&#x5230;&#x201c;&#x76f4;&#x63a5;&#x5bfc;&#x5165;&#x201d;&#x7684;&#x8303;&#x5f0f;&#x8f6c;&#x53d8;&#xff1a;&#x8fd9;&#x662f;&#x6700;&#x6838;&#x5fc3;&#x7684;&#x533a;&#x522b;&#x3002;&#x5728; Polyrepo &#x4e2d;&#xff0c;&#x4ee3;&#x7801;&#x590d;&#x7528;&#x4f9d;&#x8d56;&#x4e8e;&#x5305;&#x7ba1;&#x7406;&#x5668;&#x7684;&#x201c;&#x53d1;&#x5e03; - &#x6d88;&#x8d39;&#x201d;&#x6a21;&#x578b;&#xff0c;&#x8fd9;&#x4e2a;&#x8fc7;&#x7a0b;&#x662f;&#x5f02;&#x6b65;&#x4e14;&#x6ede;&#x540e;&#x7684;&#x3002;&#x800c;&#x5728; Monorepo &#x4e2d;&#xff0c;&#x4ee3;&#x7801;&#x590d;&#x7528;&#x53d8;&#x6210;&#x4e86;&#x7b80;&#x5355;&#x7684;&#x672c;&#x5730;&#x201c;&#x76f4;&#x63a5;&#x5bfc;&#x5165;&#x201d;&#x3002;&#x5f53;&#x4fee;&#x590d;&#x4e00;&#x4e2a;&#x5171;&#x4eab;&#x7ec4;&#x4ef6;&#x7684; bug &#x65f6;&#xff0c;&#x6240;&#x6709;&#x4f9d;&#x8d56;&#x5b83;&#x7684;&#x5e94;&#x7528;&#x80fd;&#x7acb;&#x5373;&#x5728;&#x672c;&#x5730;&#x770b;&#x5230;&#x53d8;&#x66f4;&#xff0c;&#x53cd;&#x9988;&#x56de;&#x8def;&#x88ab;&#x6781;&#x5927;&#x7f29;&#x77ed;&#xff0c;&#x5f00;&#x53d1;&#x4f53;&#x9a8c;&#x548c;&#x6548;&#x7387;&#x5b9e;&#x73b0;&#x4e86;&#x8d28;&#x7684;&#x98de;&#x8dc3;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "564,565" },
+                            },
+                            {
+                              content:
+                                "&#x4ece;&#x201c;&#x5206;&#x6563;&#x6cbb;&#x7406;&#x201d;&#x5230;&#x201c;&#x96c6;&#x4e2d;&#x6cbb;&#x7406;&#x201d;&#x7684;&#x8303;&#x5f0f;&#x8f6c;&#x53d8;&#xff1a;&#x968f;&#x7740;&#x56e2;&#x961f;&#x89c4;&#x6a21;&#x6269;&#x5927;&#xff0c;&#x4fdd;&#x6301;&#x6280;&#x672f;&#x6808;&#x3001;&#x4f9d;&#x8d56;&#x7248;&#x672c;&#x548c;&#x7f16;&#x7801;&#x89c4;&#x8303;&#x7684;&#x4e00;&#x81f4;&#x6027;&#x53d8;&#x5f97;&#x81f3;&#x5173;&#x91cd;&#x8981;&#x3002;Polyrepo &#x7684;&#x201c;&#x5206;&#x6563;&#x6cbb;&#x7406;&#x201d;&#x6a21;&#x5f0f;&#x653e;&#x5927;&#x4e86;&#x8fd9;&#x79cd;&#x6df7;&#x4e71;&#x3002;Monorepo &#x5219;&#x901a;&#x8fc7;&#x5728;&#x6839;&#x76ee;&#x5f55;&#x63d0;&#x4f9b;&#x4e00;&#x4e2a;&#x5355;&#x4e00;&#x4e8b;&#x5b9e;&#x6765;&#x6e90; (Single Source of Truth)&#xff0c;&#x5f3a;&#x5236;&#x6240;&#x6709;&#x9879;&#x76ee;&#x5171;&#x4eab;&#x4e00;&#x5957;&#x6784;&#x5efa;&#x5de5;&#x5177;&#x3001;Linter &#x89c4;&#x5219;&#x548c;&#x6838;&#x5fc3;&#x4f9d;&#x8d56;&#x7248;&#x672c;&#xff0c;&#x4ece;&#x6839;&#x672c;&#x4e0a;&#x89e3;&#x51b3;&#x4e86;&#x201c;&#x4f9d;&#x8d56;&#x6f02;&#x79fb;&#x201d;&#x548c;&#x201c;&#x914d;&#x7f6e;&#x4e0d;&#x4e00;&#x81f4;&#x201d;&#x7684;&#x95ee;&#x9898;&#xff0c;&#x6781;&#x5927;&#x5730;&#x964d;&#x4f4e;&#x4e86;&#x6cbb;&#x7406;&#x6210;&#x672c;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "565,566" },
+                            },
+                            {
+                              content:
+                                "&#x4ece;&#x201c;&#x5b64;&#x7acb;&#x53d8;&#x66f4;&#x201d;&#x5230;&#x201c;&#x539f;&#x5b50;&#x6027;&#x53d8;&#x66f4;&#x201d;&#x7684;&#x8303;&#x5f0f;&#x8f6c;&#x53d8;&#xff1a;&#x73b0;&#x4ee3;&#x5e94;&#x7528;&#x67b6;&#x6784;&#x4e2d;&#xff0c;&#x4e00;&#x4e2a;&#x529f;&#x80fd;&#x7684;&#x53d8;&#x66f4;&#x53ef;&#x80fd;&#x9700;&#x8981;&#x540c;&#x65f6;&#x4fee;&#x6539;&#x524d;&#x7aef;&#x3001;&#x540e;&#x7aef;&#x548c;&#x5171;&#x4eab;&#x5e93;&#x3002;&#x5728; Polyrepo &#x4e2d;&#xff0c;&#x8fd9;&#x9700;&#x8981;&#x591a;&#x4e2a; PR &#x548c;&#x590d;&#x6742;&#x7684;&#x90e8;&#x7f72;&#x534f;&#x8c03;&#x3002;Monorepo &#x5219;&#x5141;&#x8bb8;&#x901a;&#x8fc7;&#x4e00;&#x4e2a;&#x5355;&#x4e00;&#x7684;&#x3001;&#x539f;&#x5b50;&#x6027;&#x7684;&#x63d0;&#x4ea4; (Commit) &#x6765;&#x5b8c;&#x6210;&#x8de8;&#x9879;&#x76ee;&#x7684;&#x6240;&#x6709;&#x53d8;&#x66f4;&#x3002;&#x8fd9;&#x4e0d;&#x4ec5;&#x7b80;&#x5316;&#x4e86;&#x4ee3;&#x7801;&#x5ba1;&#x67e5;&#xff0c;&#x66f4;&#x91cd;&#x8981;&#x7684;&#x662f;&#x4fdd;&#x8bc1;&#x4e86;&#x7cfb;&#x7edf;&#x5728;&#x4efb;&#x4f55;&#x4e00;&#x4e2a;&#x5386;&#x53f2;&#x8282;&#x70b9;&#x4e0a;&#x90fd;&#x662f;&#x4e00;&#x81f4;&#x548c;&#x5b8c;&#x6574;&#x7684;&#xff0c;&#x8fd9;&#x5bf9;&#x4e8e;&#x5927;&#x578b;&#x91cd;&#x6784;&#x548c;&#x7248;&#x672c;&#x53d1;&#x5e03;&#x81f3;&#x5173;&#x91cd;&#x8981;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "566,568" },
+                            },
+                          ],
+                          payload: { tag: "ul", lines: "564,568" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "536,537" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x4ee3;&#x7801;&#x751f;&#x6210;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "570,571" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "504,505" },
+                },
+                {
+                  content:
+                    "<strong>&#x5305;&#x7ba1;&#x7406;&#x5668;&#xff1a;npm&#x3001;Yarn &#x548c; pnpm &#x4f9d;&#x8d56;&#x7ba1;&#x7406;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;&#x6d41;&#x884c; JavaScript &#x5305;&#x7ba1;&#x7406;&#x5668;&#x6bd4;&#x8f83;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="588,595">\n<thead data-lines="588,589">\n<tr data-lines="588,589">\n<th style="text-align:left">&#x7279;&#x6027;</th>\n<th style="text-align:left"><a href="https://www.npmjs.com/">npm</a></th>\n<th style="text-align:left"><a href="https://yarnpkg.com/">Yarn</a></th>\n<th style="text-align:left"><a href="https://pnpm.io/">pnpm</a></th>\n</tr>\n</thead>\n<tbody data-lines="590,595">\n<tr data-lines="590,591">\n<td style="text-align:left"><strong>&#x5b89;&#x88c5;</strong></td>\n<td style="text-align:left">&#x968f; <a href="https://nodejs.org/">Node.js</a> &#x6346;&#x7ed1;</td>\n<td style="text-align:left">&#x5168;&#x5c40;&#x5b89;&#x88c5;&#x6216;&#x9879;&#x76ee;&#x5185;&#x5b89;&#x88c5;</td>\n<td style="text-align:left">&#x5168;&#x5c40;&#x5b89;&#x88c5;&#x6216;&#x9879;&#x76ee;&#x5185;&#x5b89;&#x88c5;</td>\n</tr>\n<tr data-lines="591,592">\n<td style="text-align:left"><strong>&#x6838;&#x5fc3;&#x7406;&#x5ff5;</strong></td>\n<td style="text-align:left">&#x7b80;&#x5355;&#x6613;&#x7528;&#x3001;&#x5e7f;&#x6cdb;&#x517c;&#x5bb9;</td>\n<td style="text-align:left">&#x901f;&#x5ea6;&#x3001;&#x53ef;&#x9760;&#x6027;&#x3001;&#x5b89;&#x5168;&#x6027;&#x3001;&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;</td>\n<td style="text-align:left">&#x78c1;&#x76d8;&#x7a7a;&#x95f4;&#x4f18;&#x5316;&#x3001;&#x4e25;&#x683c;&#x4f9d;&#x8d56;&#x68c0;&#x67e5;</td>\n</tr>\n<tr data-lines="592,593">\n<td style="text-align:left"><strong>&#x72ec;&#x7279;&#x529f;&#x80fd;</strong></td>\n<td style="text-align:left">&#x9ed8;&#x8ba4;&#x5305;&#x7ba1;&#x7406;&#x5668;</td>\n<td style="text-align:left">&#x79bb;&#x7ebf;&#x7f13;&#x5b58;&#x3001;&#x5e76;&#x884c;&#x5b89;&#x88c5;&#x3001;&#x5de5;&#x4f5c;&#x533a;</td>\n<td style="text-align:left">&#x7b26;&#x53f7;&#x94fe;&#x63a5;&#x3001;&#x5185;&#x5bb9;&#x5bfb;&#x5740;&#x5b58;&#x50a8;&#x3001;&#x9632;&#x6b62;&#x5e7d;&#x7075;&#x4f9d;&#x8d56;</td>\n</tr>\n<tr data-lines="593,594">\n<td style="text-align:left"><strong>&#x6027;&#x80fd;</strong></td>\n<td style="text-align:left">&#x8f83;&#x5feb;&#xff0c;&#x4f46;&#x53ef;&#x80fd;&#x5b58;&#x5728;&#x91cd;&#x590d;&#x4f9d;&#x8d56;&#x5bfc;&#x81f4;&#x78c1;&#x76d8;&#x5360;&#x7528;</td>\n<td style="text-align:left">&#x5feb;&#x901f;&#x5b89;&#x88c5;&#x3001;&#x9ad8;&#x6548;&#x5229;&#x7528;&#x8d44;&#x6e90;</td>\n<td style="text-align:left">&#x6781;&#x901f;&#x5b89;&#x88c5;&#x3001;&#x5927;&#x5e45;&#x51cf;&#x5c11;&#x78c1;&#x76d8;&#x5360;&#x7528;</td>\n</tr>\n<tr data-lines="594,595">\n<td style="text-align:left"><strong>&#x517c;&#x5bb9;&#x6027;</strong></td>\n<td style="text-align:left"><a href="https://www.npmjs.com/">npm</a> &#x6ce8;&#x518c;&#x8868;</td>\n<td style="text-align:left"><a href="https://www.npmjs.com/">npm</a> &#x6ce8;&#x518c;&#x8868;&#x3001;&#x5de5;&#x4f5c;&#x533a;</td>\n<td style="text-align:left"><a href="https://www.npmjs.com/">npm</a> &#x6ce8;&#x518c;&#x8868;&#x3001;&#x5de5;&#x4f5c;&#x533a;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "588,595" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "586,587" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "576,577" },
+                },
+                {
+                  content:
+                    "<strong>&#x6784;&#x5efa;&#x5de5;&#x5177;&#x548c;&#x6253;&#x5305;&#x5668;&#xff1a;&#x4f18;&#x5316;&#x751f;&#x4ea7;&#x4ee3;&#x7801;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;&#x9886;&#x5148;&#x6784;&#x5efa;&#x5de5;&#x5177;/&#x6253;&#x5305;&#x5668;&#x6bd4;&#x8f83;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="613,621">\n<thead data-lines="613,614">\n<tr data-lines="613,614">\n<th style="text-align:left">&#x5de5;&#x5177;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x6838;&#x5fc3;&#x6280;&#x672f;</th>\n<th style="text-align:left">&#x4e3b;&#x8981;&#x7528;&#x4f8b;</th>\n<th style="text-align:left">&#x5173;&#x952e;&#x7279;&#x6027;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x6027;&#x80fd;&#x7279;&#x70b9;</th>\n</tr>\n</thead>\n<tbody data-lines="615,621">\n<tr data-lines="615,616">\n<td style="text-align:left"><a href="https://webpack.js.org/"><strong>Webpack</strong></a></td>\n<td style="text-align:left">JavaScript</td>\n<td style="text-align:left">&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x6253;&#x5305;</td>\n<td style="text-align:left">Loaders, Plugins, Code Splitting</td>\n<td style="text-align:left">&#x7a33;&#x5b9a;&#xff0c;&#x529f;&#x80fd;&#x5168;&#x9762;</td>\n</tr>\n<tr data-lines="616,617">\n<td style="text-align:left"><a href="https://vitejs.dev/"><strong>Vite</strong></a></td>\n<td style="text-align:left">JavaScript/<a href="https://rollupjs.org/">Rollup</a></td>\n<td style="text-align:left">&#x5f00;&#x53d1;&#x670d;&#x52a1;&#x5668;&#xff0c;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x6253;&#x5305;</td>\n<td style="text-align:left">&#x5feb;&#x901f; HMR, &#x539f;&#x751f; ESM, <a href="https://rollupjs.org/">Rollup</a> &#x6253;&#x5305;</td>\n<td style="text-align:left">&#x5f00;&#x53d1;&#x901f;&#x5ea6;&#x5feb;&#xff0c;&#x751f;&#x4ea7;&#x4f18;&#x5316;</td>\n</tr>\n<tr data-lines="617,618">\n<td style="text-align:left"><a href="https://esbuild.github.io/"><strong>esbuild</strong></a></td>\n<td style="text-align:left"><a href="https://go.dev/">Go</a></td>\n<td style="text-align:left">&#x6253;&#x5305;&#x3001;&#x8f6c;&#x6362;&#x3001;&#x538b;&#x7f29;</td>\n<td style="text-align:left">&#x539f;&#x751f;&#x7f16;&#x8bd1;&#x3001;&#x9ad8;&#x5ea6;&#x5e76;&#x884c;&#x3001;&#x6781;&#x901f;</td>\n<td style="text-align:left">&#x6781;&#x901f;</td>\n</tr>\n<tr data-lines="618,619">\n<td style="text-align:left"><a href="https://rollupjs.org/"><strong>Rollup</strong></a></td>\n<td style="text-align:left">JavaScript</td>\n<td style="text-align:left">&#x5e93;&#x6253;&#x5305;</td>\n<td style="text-align:left">Tree-shaking, ES &#x6a21;&#x5757;&#x4f18;&#x5148;</td>\n<td style="text-align:left">&#x5305;&#x4f53;&#x79ef;&#x5c0f;&#xff0c;&#x6548;&#x7387;&#x9ad8;</td>\n</tr>\n<tr data-lines="619,620">\n<td style="text-align:left"><a href="https://turbo.build/pack"><strong>Turbopack</strong></a></td>\n<td style="text-align:left"><a href="https://www.rust-lang.org/">Rust</a></td>\n<td style="text-align:left"><a href="https://nextjs.org/">Next.js</a> &#x5f00;&#x53d1;/&#x6784;&#x5efa;</td>\n<td style="text-align:left">&#x7edf;&#x4e00;&#x56fe;&#x3001;&#x589e;&#x91cf;&#x8ba1;&#x7b97;&#x3001;&#x60f0;&#x6027;&#x6253;&#x5305;</td>\n<td style="text-align:left">&#x6781;&#x901f;&#xff0c;<a href="https://nextjs.org/">Next.js</a> &#x4e13;&#x7528;</td>\n</tr>\n<tr data-lines="620,621">\n<td style="text-align:left"><a href="https://swc.rs/"><strong>SWC</strong></a></td>\n<td style="text-align:left"><a href="https://www.rust-lang.org/">Rust</a></td>\n<td style="text-align:left">&#x7f16;&#x8bd1;&#x3001;&#x538b;&#x7f29;</td>\n<td style="text-align:left">&#x8d85;&#x5feb;&#x7f16;&#x8bd1;&#x3001;<a href="https://www.typescriptlang.org/">TypeScript</a>/<a href="https://react.dev/learn/writing-markup-with-jsx">JSX</a> &#x652f;&#x6301;</td>\n<td style="text-align:left">&#x6781;&#x901f;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "613,621" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "611,612" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "598,599" },
+                },
+                {
+                  content:
+                    "<strong>&#x4ee3;&#x7801;&#x8d28;&#x91cf;&#x548c;&#x4e00;&#x81f4;&#x6027;&#xff1a;Linter (ESLint) &#x548c; Formatter (Prettier)</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;ESLint &#x548c; Prettier &#x6bd4;&#x8f83;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="633,637">\n<thead data-lines="633,634">\n<tr data-lines="633,634">\n<th style="text-align:left">&#x5de5;&#x5177;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x4e3b;&#x8981;&#x76ee;&#x7684;</th>\n<th style="text-align:left">&#x914d;&#x7f6e;&#x65b9;&#x5f0f;</th>\n<th style="text-align:left">&#x96c6;&#x6210;&#x65b9;&#x5f0f;</th>\n<th style="text-align:left">&#x8bed;&#x8a00;&#x652f;&#x6301;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x4f18;&#x70b9;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="635,637">\n<tr data-lines="635,636">\n<td style="text-align:left"><a href="https://eslint.org/"><strong>ESLint</strong></a></td>\n<td style="text-align:left">&#x4ee3;&#x7801;&#x8d28;&#x91cf;&#x3001;&#x6700;&#x4f73;&#x5b9e;&#x8df5;</td>\n<td style="text-align:left">&#x7075;&#x6d3b;&#xff0c;&#x9ad8;&#x5ea6;&#x53ef;&#x914d;&#x7f6e;</td>\n<td style="text-align:left">&#x7f16;&#x8f91;&#x5668;&#x3001;&#x6784;&#x5efa;&#x5de5;&#x5177;</td>\n<td style="text-align:left">JavaScript, <a href="https://www.typescriptlang.org/">TypeScript</a></td>\n<td style="text-align:left">&#x6355;&#x83b7;&#x9519;&#x8bef;&#xff0c;&#x5f3a;&#x5236;&#x89c4;&#x8303;</td>\n</tr>\n<tr data-lines="636,637">\n<td style="text-align:left"><a href="https://prettier.io/"><strong>Prettier</strong></a></td>\n<td style="text-align:left">&#x4ee3;&#x7801;&#x683c;&#x5f0f;&#x5316;</td>\n<td style="text-align:left">&#x9884;&#x8bbe;&#x98ce;&#x683c;&#xff0c;&#x5c11;&#x91cf;&#x9009;&#x9879;</td>\n<td style="text-align:left">&#x7f16;&#x8f91;&#x5668;&#x3001;CLI</td>\n<td style="text-align:left">JavaScript, <a href="https://www.typescriptlang.org/">TypeScript</a>, HTML, CSS</td>\n<td style="text-align:left">&#x6837;&#x5f0f;&#x4e00;&#x81f4;&#x6027;&#xff0c;&#x8282;&#x7701;&#x7cbe;&#x529b;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "633,637" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "631,632" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "624,625" },
+                },
+                {
+                  content:
+                    "<strong>&#x96c6;&#x6210;&#x5f00;&#x53d1;&#x73af;&#x5883; (IDE) &#x548c;&#x7f16;&#x8f91;&#x5668;</strong>",
+                  children: [
+                    {
+                      content: "<strong>VS Code &#x548c; WebStorm</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x8868;&#x683c;&#xff1a;&#x6d41;&#x884c;&#x524d;&#x7aef; IDE/&#x7f16;&#x8f91;&#x5668;&#x6bd4;&#x8f83;</strong>",
+                          children: [
+                            {
+                              content:
+                                '<table data-lines="653,657">\n<thead data-lines="653,654">\n<tr data-lines="653,654">\n<th style="text-align:left">&#x5de5;&#x5177;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x6210;&#x672c;</th>\n<th style="text-align:left">&#x7c7b;&#x578b;</th>\n<th style="text-align:left">&#x6838;&#x5fc3;&#x7406;&#x5ff5;</th>\n<th style="text-align:left">&#x6027;&#x80fd;&#x611f;&#x77e5;</th>\n<th style="text-align:left">&#x5173;&#x952e;&#x7279;&#x6027;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x751f;&#x6001;&#x7cfb;&#x7edf;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="655,657">\n<tr data-lines="655,656">\n<td style="text-align:left"><a href="https://code.visualstudio.com/"><strong>VS Code</strong></a></td>\n<td style="text-align:left">&#x514d;&#x8d39;</td>\n<td style="text-align:left">&#x6587;&#x672c;&#x7f16;&#x8f91;&#x5668;</td>\n<td style="text-align:left">&#x6781;&#x5ea6;&#x53ef;&#x6269;&#x5c55;</td>\n<td style="text-align:left">&#x5feb;&#x901f;&#x3001;&#x8f7b;&#x91cf;&#x7ea7;</td>\n<td style="text-align:left">&#x8c03;&#x8bd5;&#x3001;&#x4ee3;&#x7801;&#x8f85;&#x52a9;&#x3001;&#x591a;&#x8bed;&#x8a00;&#x652f;&#x6301;</td>\n<td style="text-align:left">&#x5e9e;&#x5927;&#x7684;&#x6269;&#x5c55;&#x5e02;&#x573a;</td>\n</tr>\n<tr data-lines="656,657">\n<td style="text-align:left"><a href="https://www.jetbrains.com/webstorm/"><strong>WebStorm</strong></a></td>\n<td style="text-align:left">&#x4ed8;&#x8d39;</td>\n<td style="text-align:left">&#x7efc;&#x5408; IDE</td>\n<td style="text-align:left">&#x529f;&#x80fd;&#x96c6;&#x6210;&#x3001;&#x667a;&#x80fd;&#x5206;&#x6790;</td>\n<td style="text-align:left">&#x7a33;&#x5b9a;&#xff0c;&#x529f;&#x80fd;&#x5168;&#x9762;</td>\n<td style="text-align:left">&#x6df1;&#x5ea6;&#x8c03;&#x8bd5;&#x3001;&#x667a;&#x80fd;&#x91cd;&#x6784;&#x3001;&#x5185;&#x7f6e; <a href="https://git-scm.com/">Git</a> &#x5de5;&#x5177;</td>\n<td style="text-align:left">&#x4e30;&#x5bcc;&#x7684;&#x5185;&#x7f6e;&#x529f;&#x80fd;</td>\n</tr>\n</tbody>\n</table>',
+                              children: [],
+                              payload: { tag: "table", lines: "653,657" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "651,652" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "642,643" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x5176;&#x4ed6;&#x4f20;&#x7edf;&#x7f16;&#x8f91;&#x5668;&#x548c; IDE</strong>",
+                      children: [
+                        {
+                          content:
+                            '<a href="https://www.dcloud.io/hbuilderx.html"><strong>HBuilderX</strong></a>&#xff1a;DCloud&#xff08;&#x6570;&#x5b57;&#x5929;&#x5802;&#xff09;&#x63a8;&#x51fa;&#x7684;&#x4e00;&#x6b3e;&#x4e3a;&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x670d;&#x52a1;&#x7684;&#x901a;&#x7528; IDE&#x3002;&#x5b83;&#x9488;&#x5bf9; Vue &#x5f00;&#x53d1;&#x8fdb;&#x884c;&#x4e86;&#x7279;&#x522b;&#x4f18;&#x5316;&#xff0c;&#x5e76;&#x5728; uniapp &#x8de8;&#x5e73;&#x53f0;&#x5e94;&#x7528;&#x7684;&#x5f00;&#x53d1;&#x4e0a;&#x63d0;&#x4f9b;&#x4e86;&#x6781;&#x9ad8;&#x7684;&#x6548;&#x7387;&#x548c;&#x5f3a;&#x5927;&#x7684;&#x652f;&#x6301;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "662,663" },
+                        },
+                        {
+                          content:
+                            '<a href="https://www.sublimetext.com/"><strong>Sublime Text</strong></a>&#xff1a;&#x4e00;&#x6b3e;&#x7ecf;&#x5178;&#x7684;&#x3001;&#x5907;&#x53d7;&#x8d5e;&#x8a89;&#x7684;&#x4ee3;&#x7801;&#x7f16;&#x8f91;&#x5668;&#xff0c;&#x4ee5;&#x5176;&#x6781;&#x81f4;&#x7684;&#x8f7b;&#x91cf;&#x3001;&#x95ea;&#x7535;&#x822c;&#x7684;&#x542f;&#x52a8;&#x901f;&#x5ea6;&#x548c;&#x5f3a;&#x5927;&#x7684;&#x6027;&#x80fd;&#x800c;&#x8457;&#x79f0;&#x3002;&#x5b83;&#x62e5;&#x6709;&#x4e00;&#x4e2a;&#x6210;&#x719f;&#x7684;&#x63d2;&#x4ef6;&#x751f;&#x6001;&#x7cfb;&#x7edf;&#xff08;Package Control&#xff09;&#xff0c;&#x5e76;&#x901a;&#x8fc7;&#x201c;&#x65e0;&#x5e72;&#x6270;&#x6a21;&#x5f0f;&#x201d;&#x548c;&#x591a;&#x5149;&#x6807;&#x7f16;&#x8f91;&#x7b49;&#x529f;&#x80fd;&#xff0c;&#x4e3a;&#x8ffd;&#x6c42;&#x9ad8;&#x6548;&#x7f16;&#x7801;&#x7684;&#x5f00;&#x53d1;&#x8005;&#x63d0;&#x4f9b;&#x4e86;&#x4f18;&#x96c5;&#x7684;&#x4f53;&#x9a8c;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "663,665" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "660,661" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x65b0;&#x5174;&#x5f00;&#x53d1;&#x73af;&#x5883;&#x4e0e; AI &#x9a71;&#x52a8;&#x7684;&#x5de5;&#x5177;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x4e91;&#x7aef;/&#x5728;&#x7ebf; IDE&#xff1a;&#x968f;&#x65f6;&#x968f;&#x5730;&#x5f00;&#x53d1;</strong>",
+                          children: [
+                            {
+                              content:
+                                '<a href="https://codesandbox.io/"><strong>CodeSandbox</strong></a>&#xff1a;&#x4e00;&#x6b3e;&#x4e13;&#x4e3a;&#x73b0;&#x4ee3; Web &#x5f00;&#x53d1;&#x8bbe;&#x8ba1;&#x7684;&#x4e91;&#x7aef;&#x4ee3;&#x7801;&#x7f16;&#x8f91;&#x5668;&#x3002;&#x5b83;&#x652f;&#x6301; React&#x3001;Vue&#x3001;Angular &#x7b49;&#x591a;&#x79cd;&#x4e3b;&#x6d41;&#x6846;&#x67b6;&#xff0c;&#x63d0;&#x4f9b;&#x4e30;&#x5bcc;&#x7684;&#x9879;&#x76ee;&#x6a21;&#x677f;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x65e0;&#x7f1d;&#x5730;&#x7f16;&#x5199;&#x3001;&#x6d4b;&#x8bd5;&#x548c;&#x5206;&#x4eab;&#x4ee3;&#x7801;&#x3002;&#x5176;&#x6838;&#x5fc3;&#x4f18;&#x52bf;&#x5728;&#x4e8e;&#x5f3a;&#x5927;&#x7684;&#x5b9e;&#x65f6;&#x534f;&#x4f5c;&#x529f;&#x80fd;&#xff0c;&#x5141;&#x8bb8;&#x591a;&#x4e2a;&#x7528;&#x6237;&#x540c;&#x65f6;&#x7f16;&#x8f91;&#x540c;&#x4e00;&#x4e2a;&#x9879;&#x76ee;&#xff0c;&#x5149;&#x6807;&#x548c;&#x4ee3;&#x7801;&#x53d8;&#x66f4;&#x5b9e;&#x65f6;&#x540c;&#x6b65;&#xff0c;&#x975e;&#x5e38;&#x9002;&#x5408;&#x56e2;&#x961f;&#x534f;&#x4f5c;&#x548c;&#x9879;&#x76ee;&#x6f14;&#x793a;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "673,674" },
+                            },
+                            {
+                              content:
+                                '<a href="https://stackblitz.com/"><strong>StackBlitz</strong></a>&#xff1a;&#x53e6;&#x4e00;&#x6b3e;&#x5f3a;&#x5927;&#x7684;&#x5728;&#x7ebf; IDE&#xff0c;&#x5176;&#x754c;&#x9762;&#x98ce;&#x683c;&#x548c;&#x5feb;&#x6377;&#x952e;&#x4e0e; VS Code &#x9ad8;&#x5ea6;&#x76f8;&#x4f3c;&#xff0c;&#x8ba9; VS Code &#x7528;&#x6237;&#x53ef;&#x4ee5;&#x65e0;&#x7f1d;&#x5207;&#x6362;&#x3002;&#x5b83;&#x5229;&#x7528; Progressive Web App &#x6280;&#x672f;&#xff0c;&#x751a;&#x81f3;&#x53ef;&#x4ee5;&#x5728;&#x79bb;&#x7ebf;&#x6761;&#x4ef6;&#x4e0b;&#x5de5;&#x4f5c;&#x3002;StackBlitz &#x7684;&#x4e00;&#x4e2a;&#x9769;&#x547d;&#x6027;&#x7279;&#x6027;&#x662f;&#x5176; WebContainer &#x6280;&#x672f;&#xff0c;&#x5b83;&#x5141;&#x8bb8;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x5185;&#x90e8;&#x8fd0;&#x884c;&#x5b8c;&#x6574;&#x7684; Node.js &#x73af;&#x5883;&#xff0c;&#x4ece;&#x800c;&#x5b9e;&#x73b0;&#x4e86;&#x66f4;&#x5feb;&#x7684;&#x4f9d;&#x8d56;&#x5b89;&#x88c5;&#x548c;&#x9879;&#x76ee;&#x542f;&#x52a8;&#x901f;&#x5ea6;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x4e0e;&#x672c;&#x5730;&#x5f00;&#x53d1;&#x51e0;&#x4e4e;&#x4e00;&#x81f4;&#x7684;&#x4f53;&#x9a8c;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "674,676" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "669,670" },
+                        },
+                        {
+                          content:
+                            "<strong>AI &#x539f;&#x751f; IDE&#xff1a;&#x4ece;&#x201c;&#x8f85;&#x52a9;&#x201d;&#x5230;&#x201c;&#x534f;&#x4f5c;&#x201d;&#x7684;&#x8303;&#x5f0f;&#x8f6c;&#x53d8;</strong>",
+                          children: [
+                            {
+                              content:
+                                '<a href="https://cursor.sh/"><strong>Cursor</strong></a>&#xff1a;&#x57fa;&#x4e8e; VS Code &#x5f00;&#x6e90;&#x4ee3;&#x7801;&#x6784;&#x5efa;&#x7684; AI &#x4f18;&#x5148; IDE&#x3002;&#x5b83;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x901a;&#x8fc7;&#x804a;&#x5929;&#x754c;&#x9762;&#x76f4;&#x63a5;&#x5bf9;&#x4ee3;&#x7801;&#x5e93;&#x8fdb;&#x884c;&#x4fee;&#x6539;&#x3001;&#x91cd;&#x6784;&#x548c;&#x8c03;&#x8bd5;&#x3002;&#x5176;&#x6838;&#x5fc3;&#x4eae;&#x70b9;&#x5728;&#x4e8e;&#x5f3a;&#x5927;&#x7684;&#x4ee3;&#x7801;&#x5e93;&#x7d22;&#x5f15;&#xff08;Codebase Indexing&#xff09;&#x548c; RAG&#xff08;&#x68c0;&#x7d22;&#x589e;&#x5f3a;&#x751f;&#x6210;&#xff09;&#x80fd;&#x529b;&#xff0c;&#x80fd;&#x7406;&#x89e3;&#x6574;&#x4e2a;&#x9879;&#x76ee;&#x7684;&#x4e0a;&#x4e0b;&#x6587;&#xff0c;&#x56de;&#x7b54;&#x8bf8;&#x5982;&#x201c;&#x9879;&#x76ee;&#x4e2d;&#x54ea;&#x91cc;&#x7528;&#x5230;&#x4e86;&#x7c7b;&#x4f3c; websocket &#x7684;&#x673a;&#x5236;&#xff1f;&#x201d;&#x8fd9;&#x7c7b;&#x590d;&#x6742;&#x95ee;&#x9898;&#xff0c;&#x5e76;&#x76f4;&#x63a5;&#x7ed9;&#x51fa;&#x76f8;&#x5173;&#x6587;&#x4ef6;&#x548c;&#x4ee3;&#x7801;&#xff0c;&#x8fd9;&#x662f;&#x4f20;&#x7edf;&#x4ee3;&#x7801;&#x8865;&#x5168;&#x5de5;&#x5177;&#x96be;&#x4ee5;&#x4f01;&#x53ca;&#x7684;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "682,683" },
+                            },
+                            {
+                              content:
+                                '<a href="https://wind.surf/"><strong>Wind.Surf</strong></a>&#xff1a;&#x81ea;&#x79f0;&#x4e3a;&#x4e16;&#x754c;&#x4e0a;&#x6700;&#x5148;&#x8fdb;&#x7684; AI &#x7f16;&#x7a0b;&#x52a9;&#x624b;&#xff0c;&#x5b83;&#x540c;&#x6837;&#x63d0;&#x4f9b; AI &#x539f;&#x751f;&#x7684; IDE&#x3002;Wind.Surf &#x5f3a;&#x8c03;&#x5176;&#x5bf9;&#x4ee3;&#x7801;&#x5e93;&#x7684;&#x6df1;&#x5ea6;&#x4e0a;&#x4e0b;&#x6587;&#x611f;&#x77e5;&#x80fd;&#x529b;&#x548c;&#x5f3a;&#x5927;&#x7684;&#x201c;Cascade&#x201d;&#x5de5;&#x4f5c;&#x6d41;&#xff0c;&#x65e8;&#x5728;&#x8ba9;&#x5f00;&#x53d1;&#x8005;&#x4fdd;&#x6301;&#x5fc3;&#x6d41;&#x72b6;&#x6001;&#xff0c;&#x901a;&#x8fc7;&#x7b80;&#x5355;&#x7684;&#x6309;&#x952e;&#xff08;&#x5982; Tab&#xff09;&#x5373;&#x53ef;&#x5b8c;&#x6210;&#x4f9d;&#x8d56;&#x5bfc;&#x5165;&#x3001;&#x4ee3;&#x7801;&#x751f;&#x6210;&#x7b49;&#x590d;&#x6742;&#x64cd;&#x4f5c;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "683,684" },
+                            },
+                            {
+                              content:
+                                '<a href="https://trae.js.org/"><strong>Trae</strong></a>&#xff1a;&#x7531;&#x5b57;&#x8282;&#x8df3;&#x52a8;&#x5f00;&#x53d1;&#x7684; AI &#x539f;&#x751f; IDE&#xff0c;&#x540c;&#x6837;&#x6df1;&#x5ea6;&#x96c6;&#x6210;&#x4e86; AI &#x6280;&#x672f;&#xff0c;&#x5e76;&#x4ee5;&#x201c;&#x4eba;&#x673a;&#x534f;&#x4f5c;&#x3001;&#x4e92;&#x76f8;&#x589e;&#x5f3a;&#x201d;&#x4e3a;&#x6838;&#x5fc3;&#x7406;&#x5ff5;&#x3002;&#x5b83;&#x652f;&#x6301;&#x901a;&#x8fc7; Agent &#x5b9e;&#x73b0;&#x81ea;&#x4e3b;&#x62c6;&#x89e3;&#x9700;&#x6c42;&#x548c;&#x591a;&#x6b65;&#x9aa4;&#x7684;&#x81ea;&#x52a8;&#x5316;&#x7f16;&#x7a0b;&#x4efb;&#x52a1;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "684,685" },
+                            },
+                            {
+                              content:
+                                '<a href="https://codebuddy.ca/"><strong>CodeBuddy</strong></a>&#xff1a;&#x817e;&#x8baf;&#x63a8;&#x51fa;&#x7684; AI &#x7f16;&#x7a0b;&#x52a9;&#x624b;&#xff0c;&#x5176;&#x521b;&#x65b0;&#x7684;&#x201c;Craft&#x201d;&#x6a21;&#x5f0f;&#x80fd;&#x591f;&#x81ea;&#x4e3b;&#x7406;&#x89e3;&#x7528;&#x6237;&#x9700;&#x6c42;&#xff0c;&#x5b8c;&#x6210;&#x591a;&#x6587;&#x4ef6;&#x751a;&#x81f3;&#x6574;&#x4e2a;&#x5e94;&#x7528;&#x9879;&#x76ee;&#x7684;&#x751f;&#x6210;&#x548c;&#x6539;&#x5199;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "685,687" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "678,679" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6df1;&#x5ea6;&#x5de5;&#x4f5c;&#x6d41;&#x96c6;&#x6210;</strong>",
+                          children: [
+                            {
+                              content:
+                                "1. &#x521b;&#x5efa; <code>app/product/page.tsx</code> (RSC &#x7ec4;&#x4ef6;)",
+                              children: [],
+                              payload: {
+                                tag: "li",
+                                lines: "691,692",
+                                listIndex: 1,
+                              },
+                            },
+                            {
+                              content:
+                                "2. &#x751f;&#x6210; <code>sql/schema.sql</code> (&#x8fb9;&#x7f18;&#x6570;&#x636e;&#x5e93;&#x8868;&#x7ed3;&#x6784;)",
+                              children: [],
+                              payload: {
+                                tag: "li",
+                                lines: "692,693",
+                                listIndex: 2,
+                              },
+                            },
+                            {
+                              content:
+                                "3. &#x7f16;&#x5199; <code>e2e/product.spec.ts</code> (Playwright AI &#x751f;&#x6210;&#x7684;&#x7aef;&#x5230;&#x7aef;&#x6d4b;&#x8bd5;)",
+                              children: [],
+                              payload: {
+                                tag: "li",
+                                lines: "693,694",
+                                listIndex: 3,
+                              },
+                            },
+                            {
+                              content:
+                                "4. &#x63d0;&#x4ea4; PR &#x5e76;&#x9644;&#x4e0a;&#x6027;&#x80fd;&#x9884;&#x7b97;&#x62a5;&#x544a; (LCP &lt; 1.2s, &#x96f6; JS &#x4e0b;&#x53d1;)",
+                              children: [],
+                              payload: {
+                                tag: "li",
+                                lines: "694,696",
+                                listIndex: 4,
+                              },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "687,688" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x547d;&#x4ee4;&#x884c; AI &#x5de5;&#x5177;&#xff1a;&#x7ec8;&#x7aef;&#x91cc;&#x7684;&#x667a;&#x80fd;&#x4f19;&#x4f34;</strong>",
+                          children: [
+                            {
+                              content:
+                                '<a href="https://openai.com/codex"><strong>Codex</strong></a>&#xff1a;&#x7531; OpenAI &#x63a8;&#x51fa;&#x7684;&#x547d;&#x4ee4;&#x884c;&#x7f16;&#x7a0b;&#x52a9;&#x624b;&#xff0c;&#x662f;&#x4ee3;&#x7801;&#x751f;&#x6210;&#x6a21;&#x578b;&#x7684;&#x96c6;&#x5927;&#x6210;&#x8005;&#x3002;&#x73b0;&#x4ee3; Codex &#x5df2;&#x8fdb;&#x5316;&#x4e3a;&#x201c;&#x81ea;&#x52a8;&#x5316;&#x8f6f;&#x4ef6;&#x5de5;&#x7a0b;&#x5e08;&#x201d;&#xff0c;&#x80fd;&#x591f;&#x7406;&#x89e3;&#x6574;&#x4e2a;&#x4ee3;&#x7801;&#x5e93;&#x7684;&#x67b6;&#x6784;&#x4e0a;&#x4e0b;&#x6587;&#xff0c;&#x6267;&#x884c;&#x591a;&#x6b65;&#x9aa4;&#x4efb;&#x52a1;&#x3002;&#x5b83;&#x4e0d;&#x4ec5;&#x652f;&#x6301;&#x81ea;&#x7136;&#x8bed;&#x8a00;&#x751f;&#x6210;&#x4ee3;&#x7801;&#xff0c;&#x66f4;&#x80fd;&#x81ea;&#x4e3b;&#x8fd0;&#x884c;&#x6d4b;&#x8bd5;&#x3001;&#x4fee;&#x590d;&#x9519;&#x8bef;&#x3001;&#x4f18;&#x5316;&#x6027;&#x80fd;&#xff0c;&#x5e76;&#x901a;&#x8fc7;&#x6a21;&#x578b;&#x4e0a;&#x4e0b;&#x6587;&#x534f;&#x8bae; (MCP) &#x4e0e; Git&#x3001;Docker&#x3001;&#x76d1;&#x63a7;&#x7cfb;&#x7edf;&#x7b49;&#x5916;&#x90e8;&#x5de5;&#x5177;&#x6df1;&#x5ea6;&#x96c6;&#x6210;&#x3002;Codex &#x64c5;&#x957f;&#x5904;&#x7406;&#x590d;&#x6742;&#x91cd;&#x6784;&#x3001;&#x8de8;&#x6a21;&#x5757;&#x529f;&#x80fd;&#x5f00;&#x53d1;&#x7b49;&#x9700;&#x8981;&#x5168;&#x5c40;&#x7406;&#x89e3;&#x7684;&#x573a;&#x666f;&#xff0c;&#x6210;&#x4e3a;&#x4f01;&#x4e1a;&#x5728;&#x5927;&#x578b;&#x9879;&#x76ee;&#x4e2d;&#x90e8;&#x7f72; AI &#x52a9;&#x624b;&#x7684;&#x9996;&#x9009;&#x65b9;&#x6848;&#x4e4b;&#x4e00;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "704,705" },
+                            },
+                            {
+                              content:
+                                '<a href="https://ai.google.dev/docs/gemini_cli"><strong>Gemini CLI</strong></a>&#xff1a;Google &#x63a8;&#x51fa;&#x7684;&#x5b98;&#x65b9;&#x5f00;&#x6e90;&#x547d;&#x4ee4;&#x884c;&#x5de5;&#x5177;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x76f4;&#x63a5;&#x5728;&#x7ec8;&#x7aef;&#x4e2d;&#x4e0e; <a href="https://gemini.google.com/">Gemini</a> &#x6a21;&#x578b;&#x4ea4;&#x4e92;&#x3002;&#x5b83;&#x652f;&#x6301;&#x591a;&#x8f6e;&#x5bf9;&#x8bdd;&#x3001;&#x4ee3;&#x7801;&#x751f;&#x6210;&#x4e0e;&#x89e3;&#x91ca;&#x3001;&#x6587;&#x4ef6;&#x5185;&#x5bb9;&#x5904;&#x7406;&#xff0c;&#x751a;&#x81f3;&#x53ef;&#x4ee5;&#x751f;&#x6210;&#x6216;&#x89e3;&#x91ca;&#x7cfb;&#x7edf;&#x547d;&#x4ee4;&#x3002;&#x8be5;&#x5de5;&#x5177;&#x63d0;&#x4f9b;&#x4e86;&#x975e;&#x5e38;&#x6177;&#x6168;&#x7684;&#x514d;&#x8d39;&#x914d;&#x989d;&#xff0c;&#x5e76;&#x652f;&#x6301;&#x901a;&#x8fc7;&#x914d;&#x7f6e; API &#x5bc6;&#x94a5;&#x6216;&#x8d2d;&#x4e70;&#x4e13;&#x4e1a;&#x7248;&#x4ee5;&#x83b7;&#x53d6;&#x66f4;&#x9ad8;&#x7528;&#x91cf;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "705,706" },
+                            },
+                            {
+                              content:
+                                '<a href="https://www.claude.com/product/claude-code"><strong>Claude Code</strong></a>&#xff1a;&#x7531; Anthropic &#x516c;&#x53f8;&#x63a8;&#x51fa;&#x7684; CLI &#x5de5;&#x5177;&#xff0c;&#x540c;&#x6837;&#x8ba9;&#x5f00;&#x53d1;&#x8005;&#x80fd;&#x5728;&#x7ec8;&#x7aef;&#x4e2d;&#x76f4;&#x63a5;&#x4e0e; Claude &#x6a21;&#x578b;&#x8fdb;&#x884c;&#x4ea4;&#x4e92;&#x3002;&#x5b83;&#x5b9a;&#x4f4d;&#x4e3a;&#x201c;&#x81ea;&#x52a8;&#x5316; Agent&#x201d;&#xff0c;&#x4e0d;&#x4ec5;&#x80fd;&#x56de;&#x7b54;&#x4ee3;&#x7801;&#x95ee;&#x9898;&#xff0c;&#x8fd8;&#x80fd;&#x5904;&#x7406; <a href="https://git-scm.com/">Git</a> &#x5de5;&#x4f5c;&#x6d41;&#xff08;&#x5982;&#x89e3;&#x51b3;&#x5408;&#x5e76;&#x51b2;&#x7a81;&#xff09;&#x3001;&#x6267;&#x884c;&#x548c;&#x4fee;&#x590d;&#x6d4b;&#x8bd5;&#x7b49;&#x3002;&#x5b83;&#x901a;&#x8fc7;&#x6a21;&#x578b;&#x4e0a;&#x4e0b;&#x6587;&#x534f;&#x8bae; (MCP) &#x652f;&#x6301;&#x63a5;&#x5165;&#x5916;&#x90e8;&#x5de5;&#x5177;&#xff0c;&#x6269;&#x5c55;&#x4e86;&#x5176;&#x80fd;&#x529b;&#x8fb9;&#x754c;&#x3002;Claude Code &#x8fd8;&#x64c5;&#x957f;&#x8c03;&#x7528; Codex&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "706,707" },
+                            },
+                            {
+                              content:
+                                '<a href="https://qwen.aliyun.com/code"><strong>Qwen Code</strong></a> (&#x901a;&#x4e49;&#x5343;&#x95ee;)&#xff1a;&#x963f;&#x91cc;&#x5df4;&#x5df4;&#x901a;&#x4e49;&#x5343;&#x95ee;&#x5927;&#x6a21;&#x578b;&#x4e5f;&#x63d0;&#x4f9b;&#x4e86;&#x76f8;&#x5e94;&#x7684;&#x547d;&#x4ee4;&#x884c;&#x5de5;&#x5177;&#xff0c;&#x65b9;&#x4fbf;&#x5f00;&#x53d1;&#x8005;&#x5728;&#x7ec8;&#x7aef;&#x73af;&#x5883;&#x4e2d;&#x5feb;&#x901f;&#x8c03;&#x7528;&#x5176;&#x80fd;&#x529b;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "707,709" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "700,701" },
+                        },
+                        {
+                          content:
+                            "<strong>AI &#x9a71;&#x52a8;&#x7684;&#x8d28;&#x91cf;&#x4fdd;&#x969c;</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x81ea;&#x52a8;&#x5316;&#x6d4b;&#x8bd5;&#x751f;&#x6210;</strong>",
+                              children: [],
+                              payload: { tag: "h6", lines: "715,716" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x89c6;&#x89c9;&#x56de;&#x5f52;&#x4e0e;&#x6027;&#x80fd;&#x95e8;&#x7981;</strong>",
+                              children: [],
+                              payload: { tag: "h6", lines: "719,720" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "713,714" },
+                        },
+                        {
+                          content:
+                            "<strong>AI &#x5728;&#x67b6;&#x6784;&#x4e0e;&#x5408;&#x89c4;&#x4e2d;&#x7684;&#x89d2;&#x8272;</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x67b6;&#x6784;&#x51b3;&#x7b56;&#x5ba1;&#x67e5;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x5728; RSC &#x7ec4;&#x4ef6;&#x4e2d;&#x8bef;&#x7528; <code>useState</code> &#x6216; <code>onClick</code>&#xff0c;&#x7acb;&#x5373;&#x63d0;&#x793a;&#x9700;&#x6807;&#x8bb0; <code>&apos;use client&apos;</code>",
+                                  children: [],
+                                  payload: { tag: "li", lines: "729,730" },
+                                },
+                                {
+                                  content:
+                                    "&#x68c0;&#x6d4b;&#x5230;&#x672a;&#x52a0; <code>partitioned: true</code> &#x7684;&#x8de8;&#x7ad9; Cookie&#xff0c;&#x81ea;&#x52a8;&#x6807;&#x6ce8; GDPR &#x98ce;&#x9669;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "730,731" },
+                                },
+                                {
+                                  content:
+                                    "&#x53d1;&#x73b0;&#x786c;&#x7f16;&#x7801; API &#x5bc6;&#x94a5;&#xff0c;&#x5efa;&#x8bae;&#x6539;&#x7528;&#x8fb9;&#x7f18;&#x73af;&#x5883;&#x53d8;&#x91cf;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "731,733" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "725,726" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x9690;&#x79c1;&#x5408;&#x89c4;&#x8f85;&#x52a9;</strong>",
+                              children: [],
+                              payload: { tag: "h6", lines: "733,734" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "723,724" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "665,666" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "640,641" },
+                },
+                {
+                  content:
+                    "<strong>&#x6d4f;&#x89c8;&#x5668;&#x5f00;&#x53d1;&#x8005;&#x5de5;&#x5177;&#xff1a;&#x8c03;&#x8bd5;&#x548c;&#x68c0;&#x67e5;</strong>",
+                  children: [],
+                  payload: { tag: "h3", lines: "739,740" },
+                },
+                {
+                  content:
+                    "<strong>&#x4ece;&#x8bbe;&#x8ba1;&#x5230;&#x4ee3;&#x7801;&#x7684;&#x6865;&#x6881;&#xff1a;&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x7684;&#x8bbe;&#x8ba1;&#x534f;&#x4f5c;&#x5b9e;&#x8df5;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>UI/UX &#x8bbe;&#x8ba1;&#x5de5;&#x5177;&#xff1a;Figma &amp; Sketch</strong> - &#x8bbe;&#x8ba1;&#x7684;&#x201c;&#x6e90;&#x7801;&#x201d;",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5ba1;&#x67e5;&#x6a21;&#x5f0f; (Inspect Mode)</strong>&#xff1a;&#x8fd9;&#x662f;&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x6700;&#x91cd;&#x8981;&#x7684;&#x529f;&#x80fd;&#x3002;&#x5728; Figma &#x7684;&#x201c;Dev Mode&#x201d;&#x6216; Sketch &#x7684;&#x201c;Inspect&#x201d;&#x6807;&#x7b7e;&#x9875;&#x4e2d;&#xff0c;&#x4f60;&#x53ef;&#x4ee5;&#x70b9;&#x51fb;&#x4efb;&#x4f55;&#x8bbe;&#x8ba1;&#x5143;&#x7d20;&#xff08;&#x6309;&#x94ae;&#x3001;&#x6587;&#x672c;&#x3001;&#x56fe;&#x6807;&#xff09;&#xff0c;&#x5e76;&#x7acb;&#x5373;&#x83b7;&#x5f97;&#x5176;&#x8be6;&#x7ec6;&#x7684; CSS &#x5c5e;&#x6027;&#xff1a;",
+                          children: [],
+                          payload: { tag: "li", lines: "755,756" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5c3a;&#x5bf8;&#x4e0e;&#x95f4;&#x8ddd;</strong>&#xff1a;width, height, padding, margin &#x4ee5;&#x53ca;&#x5143;&#x7d20;&#x95f4;&#x7684;&#x8ddd;&#x79bb;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "756,757" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6392;&#x7248;</strong>&#xff1a;font-family, font-size, font-weight, line-height, color&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "757,758" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6837;&#x5f0f;</strong>&#xff1a;background-color, border-radius, box-shadow&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "758,759" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5e03;&#x5c40;</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x4f7f;&#x7528; Auto Layout&#xff08;Figma&#xff09;&#x6216; Smart Layout&#xff08;Sketch&#xff09;&#x7684;&#x5143;&#x7d20;&#xff0c;&#x53ef;&#x4ee5;&#x6e05;&#x6670;&#x5730;&#x770b;&#x5230;&#x5176;&#x5e03;&#x5c40;&#x6a21;&#x5f0f;&#xff0c;&#x8fd9;&#x901a;&#x5e38;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x6620;&#x5c04;&#x5230; CSS Flexbox &#x6216; Grid &#x7684;&#x5c5e;&#x6027;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "759,760" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7ec4;&#x4ef6; (Components) &#x4e0e;&#x53d8;&#x91cf; (Variables)</strong>&#xff1a;&#x8fd9;&#x662f;&#x5b9e;&#x73b0;<strong>&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff08;Design System&#xff09;</strong> &#x7684;&#x5173;&#x952e;&#x3002;&#x5f53;&#x8bbe;&#x8ba1;&#x5e08;&#x5c06;&#x4e00;&#x4e2a;&#x6309;&#x94ae;&#x521b;&#x5efa;&#x4e3a;&#x201c;&#x7ec4;&#x4ef6;&#x201d;&#x65f6;&#xff0c;&#x4f60;&#x5728;&#x4ee3;&#x7801;&#x4e2d;&#x4e5f;&#x5e94;&#x8be5;&#x521b;&#x5efa;&#x4e00;&#x4e2a;&#x5bf9;&#x5e94;&#x7684; React/Vue &#x7ec4;&#x4ef6;&#x3002;Figma &#x7684;&#x201c;Variables&#x201d;&#xff08;&#x53d8;&#x91cf;&#xff09;&#x529f;&#x80fd;&#x66f4;&#x662f;&#x524d;&#x7aef;&#x7684;&#x798f;&#x97f3;&#xff0c;&#x5b83;&#x5b9a;&#x4e49;&#x4e86;&#x8bbe;&#x8ba1;&#x4e2d;&#x7684;&#x201c;&#x4ee4;&#x724c;&#xff08;Tokens&#xff09;&#x201d;&#xff0c;&#x5982; color-primary-500 &#x6216; spacing-md&#x3002;&#x8fd9;&#x4e9b;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x6620;&#x5c04;&#x4e3a;&#x4f60;&#x4ee3;&#x7801;&#x4e2d;&#x7684; CSS &#x53d8;&#x91cf;&#xff08;--color-primary-500&#xff09;&#x6216; Tailwind/Styled-Components &#x4e3b;&#x9898;&#x5bf9;&#x8c61;&#x4e2d;&#x7684;&#x503c;&#xff0c;&#x786e;&#x4fdd;&#x8bbe;&#x8ba1;&#x4e0e;&#x4ee3;&#x7801;&#x7684;&#x9ad8;&#x5ea6;&#x4e00;&#x81f4;&#x6027;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "760,761" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x539f;&#x578b; (Prototyping)</strong>&#xff1a;&#x4e0d;&#x8981;&#x5ffd;&#x89c6;&#x539f;&#x578b;&#x529f;&#x80fd;&#x3002;&#x901a;&#x8fc7;&#x70b9;&#x51fb;&#x539f;&#x578b;&#xff0c;&#x4f60;&#x53ef;&#x4ee5;&#x4eb2;&#x8eab;&#x4f53;&#x9a8c;&#x8bbe;&#x8ba1;&#x5e08;&#x6784;&#x60f3;&#x7684;&#x7528;&#x6237;&#x6d41;&#x7a0b;&#x3001;&#x9875;&#x9762;&#x8df3;&#x8f6c;&#x3001;&#x6a21;&#x6001;&#x6846;&#x5f39;&#x51fa;&#x65b9;&#x5f0f;&#x548c;&#x5fae;&#x4ea4;&#x4e92;&#x52a8;&#x753b;&#x3002;&#x8fd9;&#x6bd4;&#x9605;&#x8bfb;&#x9759;&#x6001;&#x6587;&#x6863;&#x80fd;&#x66f4;&#x76f4;&#x89c2;&#x5730;&#x7406;&#x89e3;&#x529f;&#x80fd;&#x9700;&#x6c42;&#x548c;&#x8fc7;&#x6e21;&#x6548;&#x679c;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "761,762" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x8d44;&#x6e90;&#x5bfc;&#x51fa; (Asset Export)</strong>&#xff1a;&#x4f60;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x4ece;&#x8bbe;&#x8ba1;&#x7a3f;&#x4e2d;&#x4ee5;&#x591a;&#x79cd;&#x683c;&#x5f0f;&#xff08;SVG, PNG, JPG&#xff09;&#x548c;&#x5206;&#x8fa8;&#x7387;&#xff08;@1x, @2x, @3x&#xff09;&#x5bfc;&#x51fa;&#x6240;&#x9700;&#x7684;&#x4efb;&#x4f55;&#x8d44;&#x6e90;&#xff08;&#x56fe;&#x6807;&#x3001;&#x56fe;&#x7247;&#xff09;&#x3002;&#x5bf9;&#x4e8e;&#x56fe;&#x6807;&#xff0c;&#x59cb;&#x7ec8;&#x4f18;&#x5148;&#x9009;&#x62e9;&#x5bfc;&#x51fa;&#x4e3a; SVG&#xff0c;&#x4ee5;&#x4fdd;&#x8bc1;&#x53ef;&#x4f38;&#x7f29;&#x6027;&#x548c;&#x6e05;&#x6670;&#x5ea6;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "762,764" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "747,748" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x5fc5;&#x77e5;&#x5fc5;&#x4f1a;&#x7684; Figma &#x6280;&#x5de7;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x4e00;&#x3001;&#x6838;&#x5fc3;&#x5ba1;&#x67e5;&#x4e0e;&#x4fe1;&#x606f;&#x63d0;&#x53d6; (Dev Mode)</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x5207;&#x6362;&#x5230;&#x5f00;&#x53d1;&#x6a21;&#x5f0f; (Dev Mode):</strong> &#x6c38;&#x8fdc;&#x4f18;&#x5148;&#x4f7f;&#x7528;&#x4e3a;&#x5f00;&#x53d1;&#x8005;&#x8bbe;&#x8ba1;&#x7684;&#x201c;&#x5f00;&#x53d1;&#x6a21;&#x5f0f;&#x201d;&#xff0c;&#x5b83;&#x63d0;&#x4f9b;&#x4e86;&#x66f4;&#x805a;&#x7126;&#x3001;&#x66f4;&#x9ad8;&#x6548;&#x7684;&#x4fe1;&#x606f;&#x83b7;&#x53d6;&#x4f53;&#x9a8c;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "768,769" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x5c3a;&#x5bf8;&#x4e0e;&#x95f4;&#x8ddd;&#x6d4b;&#x91cf;&#xff1a;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x9009;&#x4e2d;&#x5143;&#x7d20;&#x76f4;&#x63a5;&#x67e5;&#x770b;&#x5176; <code>width</code> &#x548c; <code>height</code>&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "770,771" },
+                                },
+                                {
+                                  content:
+                                    "&#x9009;&#x4e2d;&#x4e00;&#x4e2a;&#x5143;&#x7d20;&#xff0c;&#x6309;&#x4f4f; <code>Alt</code> (Windows) / <code>Option</code> (Mac)&#xff0c;&#x518d;&#x5c06;&#x9f20;&#x6807;&#x60ac;&#x505c;&#x5728;&#x53e6;&#x4e00;&#x5143;&#x7d20;&#x4e0a;&#xff0c;&#x53ef;&#x5feb;&#x901f;&#x6d4b;&#x91cf;&#x4e24;&#x8005;&#x95f4;&#x8ddd;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "771,772" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "769,772" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x6837;&#x5f0f;&#x5c5e;&#x6027;&#x83b7;&#x53d6;&#xff1a;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x5728;&#x5f00;&#x53d1;&#x6a21;&#x5f0f;&#x53f3;&#x4fa7;&#x9762;&#x677f;&#xff0c;&#x76f4;&#x63a5;&#x67e5;&#x770b;&#x5e76;&#x590d;&#x5236;&#x5143;&#x7d20;&#x7684; CSS &#x5c5e;&#x6027;&#xff0c;&#x5982; <code>color</code>, <code>background</code>, <code>border</code>, <code>border-radius</code>, <code>box-shadow</code> &#x7b49;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "773,774" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "772,774" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x6392;&#x7248;&#x4fe1;&#x606f;&#x63d0;&#x53d6;&#xff1a;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x83b7;&#x53d6;&#x7cbe;&#x786e;&#x7684;&#x6392;&#x7248;&#x4fe1;&#x606f;&#xff0c;&#x5305;&#x62ec; <code>font-family</code>, <code>font-size</code>, <code>font-weight</code>, <code>line-height</code>, <code>letter-spacing</code>&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "775,776" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "774,776" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x7406;&#x89e3;&#x81ea;&#x52a8;&#x5e03;&#x5c40; (Auto Layout):</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x8bc6;&#x522b;&#x4f7f;&#x7528;&#x4e86;&#x201c;&#x81ea;&#x52a8;&#x5e03;&#x5c40;&#x201d;&#x7684;&#x5bb9;&#x5668;&#xff0c;&#x5176;&#x5e03;&#x5c40;&#x65b9;&#x5f0f;&#xff08;&#x65b9;&#x5411;&#x3001;&#x95f4;&#x8ddd;&#x3001;&#x5bf9;&#x9f50;&#x65b9;&#x5f0f;&#xff09;&#x901a;&#x5e38;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x6620;&#x5c04;&#x4e3a; <strong>CSS Flexbox</strong> &#x5c5e;&#x6027;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "777,778" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "776,778" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x4ee3;&#x7801;&#x7247;&#x6bb5;&#x53c2;&#x8003;&#xff1a;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x76f4;&#x63a5;&#x590d;&#x5236;&#x5f00;&#x53d1;&#x6a21;&#x5f0f;&#x751f;&#x6210;&#x7684; CSS&#x3001;iOS &#x6216; Android &#x4ee3;&#x7801;&#x7247;&#x6bb5;&#xff0c;&#x4f46;&#x5207;&#x8bb0;&#xff1a;<strong>&#x4ec5;&#x4f5c;&#x4e3a;&#x53c2;&#x8003;&#xff0c;&#x4e0d;&#x53ef;&#x76f4;&#x63a5;&#x7528;&#x4e8e;&#x751f;&#x4ea7;</strong>&#x3002;&#x9700;&#x81ea;&#x884c;&#x5224;&#x65ad;&#x5e76;&#x6e05;&#x7406;&#xff0c;&#x4ee5;&#x7b26;&#x5408;&#x9879;&#x76ee;&#x4ee3;&#x7801;&#x89c4;&#x8303;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "779,781" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "778,781" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "766,767" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4e8c;&#x3001;&#x8d44;&#x6e90;&#x5bfc;&#x51fa; (Asset Exporting)</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x9009;&#x62e9;&#x6b63;&#x786e;&#x7684;&#x5bfc;&#x51fa;&#x683c;&#x5f0f;&#xff1a;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x56fe;&#x6807; (Icons):</strong> &#x59cb;&#x7ec8;&#x4f18;&#x5148;&#x9009;&#x62e9;&#x5bfc;&#x51fa;&#x4e3a; <strong>SVG</strong> &#x683c;&#x5f0f;&#xff0c;&#x4ee5;&#x4fdd;&#x8bc1;&#x53ef;&#x4f38;&#x7f29;&#x6027;&#x548c;&#x6e05;&#x6670;&#x5ea6;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "784,785" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x56fe;&#x7247; (Images):</strong> &#x6839;&#x636e;&#x9700;&#x6c42;&#x9009;&#x62e9; <code>PNG</code> (&#x9700;&#x8981;&#x900f;&#x660e;&#x80cc;&#x666f;) &#x6216; <code>JPG</code> (&#x65e0;&#x9700;&#x900f;&#x660e;&#x80cc;&#x666f;)&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "785,786" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "783,786" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x5904;&#x7406;&#x4e0d;&#x540c;&#x5c4f;&#x5e55;&#x5bc6;&#x5ea6;&#xff1a;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x5229;&#x7528;&#x5bfc;&#x51fa;&#x9009;&#x9879;&#x4e2d;&#x7684; <code>@2x</code>, <code>@3x</code> &#x8bbe;&#x7f6e;&#xff0c;&#x4e00;&#x952e;&#x5bfc;&#x51fa;&#x9002;&#x7528;&#x4e8e;&#x9ad8;&#x5206;&#x5c4f;&#x7684;&#x591a;&#x79cd;&#x5206;&#x8fa8;&#x7387;&#x8d44;&#x6e90;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "787,788" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "786,788" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x6279;&#x91cf;&#x5bfc;&#x51fa;&#xff1a;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x5728;&#x5bfc;&#x51fa;&#x9762;&#x677f;&#x4e2d;&#x4e00;&#x6b21;&#x6027;&#x9009;&#x62e9;&#x5e76;&#x5bfc;&#x51fa;&#x591a;&#x4e2a;&#x8d44;&#x6e90;&#xff0c;&#x63d0;&#x9ad8;&#x6548;&#x7387;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "789,791" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "788,791" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "781,782" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4e09;&#x3001;&#x7ec4;&#x4ef6;&#x4e0e;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x601d;&#x7ef4; (Components &amp; Design System)</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x8bc6;&#x522b;&#x4e3b;&#x7ec4;&#x4ef6;&#x4e0e;&#x5b9e;&#x4f8b;&#xff1a;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x5b66;&#x4f1a;&#x533a;&#x5206;&#x201c;&#x4e3b;&#x7ec4;&#x4ef6;&#x201d;&#xff08;Master Component&#xff09;&#x548c;&#x5b83;&#x7684;&#x201c;&#x5b9e;&#x4f8b;&#x201d;&#xff08;Instance&#xff09;&#x3002;&#x7406;&#x89e3;&#x4e3b;&#x7ec4;&#x4ef6;&#x662f;&#x201c;&#x6a21;&#x677f;&#x201d;&#xff0c;&#x5b9e;&#x4f8b;&#x662f;&#x201c;&#x5f15;&#x7528;&#x201d;&#xff0c;&#x8fd9;&#x6709;&#x52a9;&#x4e8e;&#x4f60;&#x5728;&#x4ee3;&#x7801;&#x4e2d;&#x521b;&#x5efa;&#x5bf9;&#x5e94;&#x7684; React/Vue &#x7ec4;&#x4ef6;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "794,795" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "793,795" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x8ffd;&#x8e2a;&#x8bbe;&#x8ba1;&#x4ee4;&#x724c; (Design Tokens):</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x5173;&#x6ce8;&#x53f3;&#x4fa7;&#x9762;&#x677f;&#x7684;&#x201c;Variables&#x201d;&#xff08;&#x53d8;&#x91cf;&#xff09;&#x6216;&#x201c;Styles&#x201d;&#xff08;&#x6837;&#x5f0f;&#xff09;&#x90e8;&#x5206;&#x3002;&#x8bbe;&#x8ba1;&#x5e08;&#x5b9a;&#x4e49;&#x7684;&#x989c;&#x8272;&#x3001;&#x5b57;&#x4f53;&#x3001;&#x95f4;&#x8ddd;&#x7b49;&#x53d8;&#x91cf;&#xff0c;&#x5c31;&#x662f;&#x4f60;&#x9700;&#x8981;&#x5bf9;&#x63a5;&#x5230;&#x4ee3;&#x7801;&#x4e2d; <strong>CSS &#x53d8;&#x91cf;</strong> &#x6216; <strong>&#x4e3b;&#x9898; (Theme) &#x5bf9;&#x8c61;</strong> &#x7684;&#x201c;&#x8bbe;&#x8ba1;&#x4ee4;&#x724c;&#x201d;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "796,797" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "795,797" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x67e5;&#x770b;&#x7ec4;&#x4ef6;&#x5c5e;&#x6027; (Component Properties):</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x68c0;&#x67e5;&#x7ec4;&#x4ef6;&#x7684;&#x53d8;&#x4f53;&#xff08;Variants&#xff09;&#x3001;&#x5e03;&#x5c14;&#x503c;&#xff08;Boolean&#xff09;&#x3001;&#x6587;&#x672c;&#xff08;Text&#xff09;&#x7b49;&#x5c5e;&#x6027;&#xff0c;&#x7406;&#x89e3;&#x5176;&#x4e0d;&#x540c;&#x72b6;&#x6001;&#xff0c;&#x8fd9;&#x5bf9;&#x5e94;&#x4f60;&#x4ee3;&#x7801;&#x4e2d;&#x7ec4;&#x4ef6;&#x7684; <code>props</code>&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "798,800" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "797,800" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "791,792" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x56db;&#x3001;&#x539f;&#x578b;&#x4e0e;&#x4ea4;&#x4e92;&#x7406;&#x89e3; (Prototyping &amp; Interaction)</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x64ad;&#x653e;&#x539f;&#x578b;&#xff1a;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x70b9;&#x51fb;&#x201c;&#x6f14;&#x793a;&#x201d;&#xff08;Present/Play&#xff09;&#x6309;&#x94ae;&#xff0c;&#x4eb2;&#x8eab;&#x4f53;&#x9a8c;&#x8bbe;&#x8ba1;&#x5e08;&#x6784;&#x60f3;&#x7684;&#x7528;&#x6237;&#x6d41;&#x7a0b;&#x3001;&#x9875;&#x9762;&#x8df3;&#x8f6c;&#x548c;&#x5fae;&#x4ea4;&#x4e92;&#xff0c;&#x8fd9;&#x6bd4;&#x770b;&#x9759;&#x6001;&#x9875;&#x9762;&#x66f4;&#x76f4;&#x89c2;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "803,804" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "802,804" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x67e5;&#x770b;&#x4ea4;&#x4e92;&#x8fde;&#x7ebf;&#xff1a;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x5728;&#x201c;&#x539f;&#x578b;&#x201d;&#xff08;Prototype&#xff09;&#x6807;&#x7b7e;&#x9875;&#x4e0b;&#xff0c;&#x53ef;&#x4ee5;&#x6e05;&#x6670;&#x5730;&#x770b;&#x5230;&#x5143;&#x7d20;&#x4e4b;&#x95f4;&#x7684;&#x4ea4;&#x4e92;&#x201c;&#x8fde;&#x7ebf;&#x201d;&#xff0c;&#x4e86;&#x89e3;&#x70b9;&#x51fb;&#x3001;&#x60ac;&#x505c;&#x7b49;&#x64cd;&#x4f5c;&#x4f1a;&#x89e6;&#x53d1;&#x4ec0;&#x4e48;&#x6548;&#x679c;&#xff08;&#x5982;&#x9875;&#x9762;&#x8df3;&#x8f6c;&#x3001;&#x5f39;&#x7a97;&#x7b49;&#xff09;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "805,807" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "804,807" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "800,801" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4e94;&#x3001;&#x534f;&#x4f5c;&#x4e0e;&#x6c9f;&#x901a; (Collaboration)</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x4f7f;&#x7528;&#x8bc4;&#x8bba;&#x529f;&#x80fd;&#xff1a;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "&#x76f4;&#x63a5;&#x5728;&#x8bbe;&#x8ba1;&#x7a3f;&#x7684;&#x5177;&#x4f53;&#x4f4d;&#x7f6e;&#x201c;&#x9489;&#x201d;&#x4e0a;&#x4e00;&#x4e2a;&#x8bc4;&#x8bba;&#xff0c;&#x5411;&#x8bbe;&#x8ba1;&#x5e08;&#x6216;&#x4ea7;&#x54c1;&#x7ecf;&#x7406;&#x63d0;&#x51fa;&#x7cbe;&#x786e;&#x7684;&#x95ee;&#x9898;&#xff08;&#x4f8b;&#x5982;&#xff1a;&#x201c;&#x8fd9;&#x4e2a;&#x6309;&#x94ae;&#x7684; hover &#x6548;&#x679c;&#x662f;&#x4ec0;&#x4e48;&#xff1f;&#x201d;&#xff09;&#xff0c;&#x907f;&#x514d;&#x5728;&#x901a;&#x8baf;&#x8f6f;&#x4ef6;&#x4e2d;&#x4f4e;&#x6548;&#x6c9f;&#x901a;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "810,812" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "809,812" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "807,808" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "764,765" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x8bbe;&#x8ba1;&#x7a3f;&#x4ea4;&#x63a5;&#xff1a;Zeplin</strong> - &#x7ecf;&#x201c;&#x7f16;&#x8bd1;&#x201d;&#x7684;&#x4ea4;&#x4ed8;&#x4ea7;&#x7269;",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x660e;&#x786e;&#x7684;&#x7248;&#x672c;&#x63a7;&#x5236;&#x548c;&#x5355;&#x4e00;&#x4e8b;&#x5b9e;&#x6765;&#x6e90; (Single Source of Truth)</strong>&#xff1a;Zeplin &#x7684;&#x6838;&#x5fc3;&#x4ef7;&#x503c;&#x5728;&#x4e8e;&#xff0c;&#x5b83;&#x786e;&#x4fdd;&#x5f00;&#x53d1;&#x8005;&#x770b;&#x5230;&#x7684;&#x6c38;&#x8fdc;&#x662f;&#x7ecf;&#x8fc7;&#x786e;&#x8ba4;&#x7684;&#x6700;&#x7ec8;&#x7248;&#x672c;&#x3002;&#x8bbe;&#x8ba1;&#x5e08;&#x53ef;&#x4ee5;&#x81ea;&#x7531;&#x5730;&#x5728; Figma &#x4e2d;&#x8fdb;&#x884c;&#x5b9e;&#x9a8c;&#xff0c;&#x800c;&#x4e0d;&#x4f1a;&#x5f71;&#x54cd;&#x5230;&#x5df2;&#x7ecf;&#x53d1;&#x5e03;&#x5230; Zeplin &#x7684;&#x5f00;&#x53d1;&#x4efb;&#x52a1;&#x3002;&#x6bcf;&#x4e2a;&#x753b;&#x677f;&#x90fd;&#x6709;&#x6e05;&#x6670;&#x7684;&#x7248;&#x672c;&#x5386;&#x53f2;&#xff0c;&#x907f;&#x514d;&#x4e86;&#x57fa;&#x4e8e;&#x9519;&#x8bef;&#x7248;&#x672c;&#x8fdb;&#x884c;&#x5f00;&#x53d1;&#x7684;&#x98ce;&#x9669;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "820,821" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5168;&#x5c40;&#x6837;&#x5f0f;&#x6307;&#x5357; (Global Styleguide)</strong>&#xff1a;Zeplin &#x4f1a;&#x81ea;&#x52a8;&#x4ece;&#x8bbe;&#x8ba1;&#x7a3f;&#x4e2d;&#x63d0;&#x53d6;&#x6240;&#x6709;&#x989c;&#x8272;&#x3001;&#x5b57;&#x4f53;&#x6837;&#x5f0f;&#x548c;&#x95f4;&#x8ddd;&#x4ee4;&#x724c;&#xff0c;&#x5e76;&#x751f;&#x6210;&#x4e00;&#x4e2a;&#x5168;&#x5c40;&#x6837;&#x5f0f;&#x6307;&#x5357;&#x9875;&#x9762;&#x3002;&#x5b83;&#x4f1a;&#x5c06;&#x8bbe;&#x8ba1;&#x7a3f;&#x4e2d;&#x7684;&#x6bcf;&#x4e2a;&#x5143;&#x7d20;&#x94fe;&#x63a5;&#x5230;&#x8fd9;&#x4e9b;&#x5168;&#x5c40;&#x6837;&#x5f0f;&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x5f53;&#x4f60;&#x70b9;&#x51fb;&#x6309;&#x94ae;&#x65f6;&#xff0c;&#x5b83;&#x4e0d;&#x4f1a;&#x53ea;&#x663e;&#x793a;&#x8272;&#x503c; <code>#007AFF</code>&#xff0c;&#x800c;&#x662f;&#x4f1a;&#x544a;&#x8bc9;&#x4f60;&#x5b83;&#x4f7f;&#x7528;&#x7684;&#x662f;&#x5168;&#x5c40;&#x989c;&#x8272; Primary Blue&#xff0c;&#x8fd9;&#x6781;&#x5927;&#x5730;&#x4fc3;&#x8fdb;&#x4e86;&#x4ee3;&#x7801;&#x7684;&#x89c4;&#x8303;&#x6027;&#x548c;&#x53ef;&#x7ef4;&#x62a4;&#x6027;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "821,822" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7ec4;&#x4ef6;&#x9a71;&#x52a8;&#x5f00;&#x53d1;</strong>&#xff1a;Zeplin &#x540c;&#x6837;&#x4f1a;&#x5c55;&#x793a;&#x7ec4;&#x4ef6;&#x4fe1;&#x606f;&#xff0c;&#x5e76;&#x663e;&#x793a;&#x8be5;&#x7ec4;&#x4ef6;&#x5728;&#x9879;&#x76ee;&#x4e2d;&#x6240;&#x6709;&#x88ab;&#x4f7f;&#x7528;&#x5230;&#x7684;&#x5730;&#x65b9;&#x3002;&#x5b83;&#x8fd8;&#x53ef;&#x4ee5;&#x4e0e; Storybook &#x96c6;&#x6210;&#xff0c;&#x5c06;&#x8bbe;&#x8ba1;&#x7ec4;&#x4ef6;&#x76f4;&#x63a5;&#x94fe;&#x63a5;&#x5230;&#x4ee3;&#x7801;&#x4e2d;&#x5b9e;&#x73b0;&#x7684;&#x7ec4;&#x4ef6;&#x6587;&#x6863;&#xff0c;&#x5f62;&#x6210;&#x5b8c;&#x7f8e;&#x95ed;&#x73af;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "822,823" },
+                        },
+                        {
+                          content:
+                            '<strong>&#x4ee3;&#x7801;&#x7247;&#x6bb5;&#x4e0e;&#x96c6;&#x6210;</strong>&#xff1a;Zeplin &#x751f;&#x6210;&#x7684;&#x4ee3;&#x7801;&#x7247;&#x6bb5;&#x901a;&#x5e38;&#x66f4;&#x4e30;&#x5bcc;&#xff0c;&#x5e76;&#x652f;&#x6301;&#x4e3a;&#x4e0d;&#x540c;&#x6846;&#x67b6;&#xff08;&#x5982; <a href="https://reactnative.dev/">React Native</a>&#xff09;&#x5b9a;&#x5236;&#x7684;&#x6269;&#x5c55;&#x3002;&#x5176;&#x5f3a;&#x5927;&#x7684; API &#x548c;&#x4e0e; Jira&#x3001;Slack&#x3001;VS Code &#x7684;&#x6df1;&#x5ea6;&#x96c6;&#x6210;&#xff0c;&#x53ef;&#x4ee5;&#x5c06;&#x8bbe;&#x8ba1;&#x89c4;&#x8303;&#x65e0;&#x7f1d;&#x5d4c;&#x5165;&#x5230;&#x5f00;&#x53d1;&#x8005;&#x7684;&#x65e5;&#x5e38;&#x5de5;&#x4f5c;&#x6d41;&#x4e2d;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "823,824" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7cbe;&#x51c6;&#x7684;&#x6ce8;&#x91ca;&#x4e0e;&#x6c9f;&#x901a;</strong>&#xff1a;&#x5728; Zeplin &#x4e2d;&#x7684;&#x6ce8;&#x91ca;&#x901a;&#x5e38;&#x66f4;&#x5177;&#x9488;&#x5bf9;&#x6027;&#xff0c;&#x4e13;&#x6ce8;&#x4e8e;&#x89e3;&#x51b3;&#x5f00;&#x53d1;&#x5b9e;&#x73b0;&#x4e2d;&#x7684;&#x5177;&#x4f53;&#x95ee;&#x9898;&#xff08;&#x201c;&#x8fd9;&#x4e2a;&#x8fb9;&#x8ddd;&#x5728;&#x79fb;&#x52a8;&#x7aef;&#x5e94;&#x8be5;&#x662f;&#x591a;&#x5c11;&#xff1f;&#x201d;&#xff09;&#xff0c;&#x5c06;&#x6280;&#x672f;&#x95ee;&#x9898;&#x4e0e; Figma &#x4e2d;&#x53ef;&#x80fd;&#x5b58;&#x5728;&#x7684;&#x65e9;&#x671f;&#x8bbe;&#x8ba1;&#x8ba8;&#x8bba;&#x5206;&#x79bb;&#x5f00;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "824,826" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "812,813" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "743,744" },
+                },
+              ],
+              payload: { tag: "h2", lines: "443,444" },
+            },
+            {
+              content:
+                "<strong>IV. &#x524d;&#x7aef;&#x6846;&#x67b6;&#x548c;&#x5e93;&#xff1a;&#x6784;&#x5efa;&#x73b0;&#x4ee3; UI</strong>",
+              children: [
+                {
+                  content:
+                    "<strong>UI &#x6846;&#x67b6;&#x6982;&#x8ff0;&#xff1a;React&#x3001;Vue&#x3001;Angular&#x3001;Svelte&#x3001;SolidJS&#x3001;Lit</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;&#x6d41;&#x884c; UI &#x6846;&#x67b6;&#x6bd4;&#x8f83; (React, Vue, Svelte, SolidJS)</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="843,849">\n<thead data-lines="843,844">\n<tr data-lines="843,844">\n<th style="text-align:left">&#x6846;&#x67b6;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x8bbe;&#x8ba1;&#x54f2;&#x5b66;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</th>\n<th style="text-align:left">&#x6027;&#x80fd;&#xff08;&#x8fd0;&#x884c;&#x65f6;/&#x5305;&#x5927;&#x5c0f;&#xff09;</th>\n<th style="text-align:left">&#x751f;&#x6001;&#x7cfb;&#x7edf;&#x5927;&#x5c0f;</th>\n<th style="text-align:left">&#x793e;&#x533a;&#x652f;&#x6301;</th>\n<th style="text-align:left">&#x7406;&#x60f3;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="845,849">\n<tr data-lines="845,846">\n<td style="text-align:left"><a href="https://react.dev/"><strong>React</strong></a></td>\n<td style="text-align:left">&#x865a;&#x62df; <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a>&#xff0c;&#x7ec4;&#x4ef6;&#x5316;&#xff0c;&#x58f0;&#x660e;&#x5f0f;</td>\n<td style="text-align:left">&#x8f83;&#x9661;&#x5ced;</td>\n<td style="text-align:left">&#x826f;&#x597d;&#xff0c;&#x4f46;&#x53ef;&#x80fd;&#x8f83;&#x5927;&#x5305;&#x4f53;&#x79ef;</td>\n<td style="text-align:left">&#x5e9e;&#x5927;</td>\n<td style="text-align:left">&#x6d3b;&#x8dc3;&#x3001;&#x8d44;&#x6e90;&#x4e30;&#x5bcc;</td>\n<td style="text-align:left">&#x5927;&#x578b;&#x590d;&#x6742;&#x5e94;&#x7528;&#xff0c;&#x4f01;&#x4e1a;&#x7ea7;&#x9879;&#x76ee;</td>\n</tr>\n<tr data-lines="846,847">\n<td style="text-align:left"><a href="https://vuejs.org/"><strong>Vue</strong></a></td>\n<td style="text-align:left">&#x6e10;&#x8fdb;&#x5f0f;&#xff0c;&#x6a21;&#x677f;&#x9a71;&#x52a8;&#xff0c;&#x53cc;&#x5411;&#x7ed1;&#x5b9a;</td>\n<td style="text-align:left">&#x8f83;&#x5e73;&#x7f13;</td>\n<td style="text-align:left">&#x826f;&#x597d;&#xff0c;&#x521d;&#x59cb;&#x8bbe;&#x7f6e;&#x8f7b;&#x91cf;</td>\n<td style="text-align:left">&#x6b63;&#x5728;&#x589e;&#x957f;</td>\n<td style="text-align:left">&#x6d3b;&#x8dc3;&#x3001;&#x6587;&#x6863;&#x5168;&#x9762;</td>\n<td style="text-align:left">&#x4e2d;&#x5c0f;&#x578b;&#x9879;&#x76ee;&#xff0c;&#x5feb;&#x901f;&#x539f;&#x578b;&#x5f00;&#x53d1;</td>\n</tr>\n<tr data-lines="847,848">\n<td style="text-align:left"><a href="https://svelte.dev/"><strong>Svelte</strong></a></td>\n<td style="text-align:left">&#x7f16;&#x8bd1;&#x65f6;&#xff0c;&#x65e0;&#x865a;&#x62df; <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a>&#xff0c;&#x7ec6;&#x7c92;&#x5ea6;&#x54cd;&#x5e94;</td>\n<td style="text-align:left">&#x6781;&#x5c0f;</td>\n<td style="text-align:left">&#x6781;&#x901f;&#xff0c;&#x5305;&#x4f53;&#x79ef;&#x5c0f;</td>\n<td style="text-align:left">&#x8f83;&#x5c0f;</td>\n<td style="text-align:left">&#x70ed;&#x60c5;&#x3001;&#x6b63;&#x5728;&#x589e;&#x957f;</td>\n<td style="text-align:left">&#x6027;&#x80fd;&#x5173;&#x952e;&#x578b;&#x5e94;&#x7528;&#xff0c;&#x8f7b;&#x91cf;&#x7ea7;&#xff0c;&#x4fa7;&#x9879;&#x76ee;</td>\n</tr>\n<tr data-lines="848,849">\n<td style="text-align:left"><a href="https://www.solidjs.com/"><strong>SolidJS</strong></a></td>\n<td style="text-align:left">&#x7ec6;&#x7c92;&#x5ea6;&#x54cd;&#x5e94;&#xff0c;&#x65e0;&#x865a;&#x62df; <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a></td>\n<td style="text-align:left">&#x8f83;&#x5e73;&#x7f13;</td>\n<td style="text-align:left">&#x6781;&#x901f;&#xff0c;&#x5305;&#x4f53;&#x79ef;&#x5c0f;</td>\n<td style="text-align:left">&#x8f83;&#x5c0f;</td>\n<td style="text-align:left">&#x6b63;&#x5728;&#x589e;&#x957f;</td>\n<td style="text-align:left">&#x6027;&#x80fd;&#x5173;&#x952e;&#x578b;&#x5e94;&#x7528;&#xff0c;&#x590d;&#x6742; UI &#x66f4;&#x65b0;&#x9891;&#x7e41;&#x573a;&#x666f;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "843,849" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "841,842" },
+                    },
+                    {
+                      content:
+                        "<strong>Web Components&#xff1a;&#x539f;&#x751f;&#x3001;&#x8de8;&#x6846;&#x67b6;&#x7684;&#x7ec4;&#x4ef6;&#x5316;&#x672a;&#x6765;</strong>",
+                      children: [
+                        {
+                          content: "",
+                          children: [
+                            {
+                              content:
+                                '1. \n<p data-lines="858,859"><strong>Custom Elements (&#x81ea;&#x5b9a;&#x4e49;&#x5143;&#x7d20;)</strong>&#xff1a;&#x5b83;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x5b9a;&#x4e49;&#x81ea;&#x5df1;&#x7684; HTML &#x6807;&#x7b7e;&#x3002;&#x4f60;&#x53ef;&#x4ee5;&#x521b;&#x5efa;&#x4e00;&#x4e2a;&#x540d;&#x4e3a; <code>&lt;my-button&gt;</code> &#x7684;&#x6807;&#x7b7e;&#xff0c;&#x5e76;&#x4e3a;&#x5176;&#x8d4b;&#x4e88;&#x7279;&#x5b9a;&#x7684;&#x6837;&#x5f0f;&#x548c;&#x884c;&#x4e3a;&#x3002;&#x8fd9;&#x4f7f;&#x5f97; HTML &#x7684;&#x8bed;&#x4e49;&#x53ef;&#x4ee5;&#x88ab;&#x65e0;&#x9650;&#x6269;&#x5c55;&#x3002;</p>',
+                              children: [],
+                              payload: {
+                                tag: "li",
+                                lines: "858,860",
+                                listIndex: 1,
+                              },
+                            },
+                            {
+                              content:
+                                '2. \n<p data-lines="860,861"><strong>Shadow <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a> (&#x5f71;&#x5b50; <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a>)</strong>&#xff1a;&#x8fd9;&#x662f; Web Components &#x6700;&#x5177;&#x9769;&#x547d;&#x6027;&#x7684;&#x7279;&#x6027;&#x3002;&#x5b83;&#x63d0;&#x4f9b;&#x4e86;&#x4e00;&#x79cd;&#x5c06;&#x4e00;&#x4e2a;&#x72ec;&#x7acb;&#x7684;&#x3001;&#x201c;&#x9690;&#x85cf;&#x201d;&#x7684; DOM &#x6811;&#x9644;&#x52a0;&#x5230;&#x5143;&#x7d20;&#x4e0a;&#x7684;&#x80fd;&#x529b;&#x3002;&#x8fd9;&#x4e2a; Shadow DOM &#x5185;&#x90e8;&#x7684;<strong>&#x6837;&#x5f0f;&#x548c;&#x811a;&#x672c;&#x662f;&#x5b8c;&#x5168;&#x5c01;&#x88c5;&#x548c;&#x9694;&#x79bb;&#x7684;</strong>&#xff0c;&#x4e0d;&#x4f1a;&#x5f71;&#x54cd;&#x5230;&#x5916;&#x90e8;&#x9875;&#x9762;&#xff0c;&#x5916;&#x90e8;&#x9875;&#x9762;&#x7684;&#x6837;&#x5f0f;&#x4e5f;&#x4e0d;&#x4f1a;&#x610f;&#x5916;&#x5730;&#x6cc4;&#x9732;&#x8fdb;&#x6765;&#x3002;&#x5b83;&#x4ece;&#x6839;&#x672c;&#x4e0a;&#x89e3;&#x51b3;&#x4e86; CSS &#x5168;&#x5c40;&#x4f5c;&#x7528;&#x57df;&#x6c61;&#x67d3;&#x8fd9;&#x4e00;&#x56f0;&#x6270;&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x591a;&#x5e74;&#x7684;&#x987d;&#x75be;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x6d4f;&#x89c8;&#x5668;&#x539f;&#x751f;&#x7684;&#x6837;&#x5f0f;&#x5c01;&#x88c5;&#x3002;</p>',
+                              children: [],
+                              payload: {
+                                tag: "li",
+                                lines: "860,862",
+                                listIndex: 2,
+                              },
+                            },
+                            {
+                              content:
+                                '3. \n<p data-lines="862,863"><strong>HTML Templates (<code>&lt;template&gt;</code> &#x548c; <code>&lt;slot&gt;</code>)</strong>&#xff1a;<code>&lt;template&gt;</code> &#x6807;&#x7b7e;&#x5141;&#x8bb8;&#x6211;&#x4eec;&#x58f0;&#x660e;&#x4e00;&#x6bb5;&#x60f0;&#x6027;&#x7684;&#x3001;&#x76f4;&#x5230;&#x88ab;&#x6fc0;&#x6d3b;&#x65f6;&#x624d;&#x4f1a;&#x88ab;&#x6e32;&#x67d3;&#x7684; DOM &#x7247;&#x6bb5;&#x3002;<code>&lt;slot&gt;</code> &#x5143;&#x7d20;&#x5219;&#x662f;&#x4e00;&#x4e2a;&#x5360;&#x4f4d;&#x7b26;&#xff0c;&#x5141;&#x8bb8;&#x6211;&#x4eec;&#x5c06;&#x5916;&#x90e8;&#x7684; HTML &#x5185;&#x5bb9;&#x201c;&#x6295;&#x5f71;&#x201d;&#x5230;&#x7ec4;&#x4ef6;&#x7684; Shadow DOM &#x5185;&#x90e8;&#xff0c;&#x6781;&#x5927;&#x5730;&#x589e;&#x5f3a;&#x4e86;&#x7ec4;&#x4ef6;&#x7684;&#x7075;&#x6d3b;&#x6027;&#x548c;&#x53ef;&#x7ec4;&#x5408;&#x6027;&#x3002;</p>',
+                              children: [],
+                              payload: {
+                                tag: "li",
+                                lines: "862,864",
+                                listIndex: 3,
+                              },
+                            },
+                          ],
+                          payload: { tag: "ol", lines: "858,864" },
+                        },
+                        {
+                          content: "",
+                          children: [
+                            {
+                              content:
+                                '\n<p data-lines="864,865"><strong>&#x6838;&#x5fc3;&#x4f18;&#x52bf;&#xff1a;&#x771f;&#x6b63;&#x7684;&#x8de8;&#x6846;&#x67b6;&#x590d;&#x7528;&#x4e0e;&#x6280;&#x672f;&#x65e0;&#x5173;&#x6027;</strong>&#xff1a;&#x7531;&#x4e8e; Web Components &#x662f;&#x6d4f;&#x89c8;&#x5668;&#x539f;&#x751f;&#x6807;&#x51c6;&#xff0c;&#x7528;&#x5b83;&#x521b;&#x5efa;&#x7684;&#x7ec4;&#x4ef6;&#x4e0d;&#x4f9d;&#x8d56;&#x4e8e;&#x4efb;&#x4f55;&#x7279;&#x5b9a;&#x7684;&#x6846;&#x67b6;&#x3002;&#x4e00;&#x4e2a;&#x7528; Web Components &#x7f16;&#x5199;&#x7684;&#x7ec4;&#x4ef6;&#x5e93;&#xff0c;&#x53ef;&#x4ee5;&#x540c;&#x65f6;&#x5728; React&#x3001;Vue&#x3001;Angular &#x6216;&#x539f;&#x751f; JavaScript &#x9879;&#x76ee;&#x4e2d;&#x4f7f;&#x7528;&#xff0c;&#x800c;&#x65e0;&#x9700;&#x4efb;&#x4f55;&#x4fee;&#x6539;&#x3002;&#x8fd9;&#x5bf9;&#x4e8e;&#x6784;&#x5efa;&#x4f01;&#x4e1a;&#x7ea7;&#x7684;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x3001;&#x6216;&#x5e0c;&#x671b;&#x5728;&#x591a;&#x4e2a;&#x4e0d;&#x540c;&#x6280;&#x672f;&#x6808;&#x56e2;&#x961f;&#x95f4;&#x5171;&#x4eab; UI &#x7ec4;&#x4ef6;&#x7684;&#x573a;&#x666f;&#xff0c;&#x5177;&#x6709;&#x65e0;&#x4e0e;&#x4f26; - &#x4f26;&#x6bd4;&#x7684;&#x4f18;&#x52bf;&#x3002;</p>',
+                              children: [],
+                              payload: { tag: "li", lines: "864,866" },
+                            },
+                            {
+                              content:
+                                '\n<p data-lines="866,867"><strong>&#x751f;&#x6001;&#x4e0e;&#x672a;&#x6765;</strong>&#xff1a;&#x50cf; Google &#x7684; <strong>Lit</strong> &#x548c;&#x5fae;&#x8f6f;&#x7684; FAST &#x8fd9;&#x6837;&#x7684;&#x8f7b;&#x91cf;&#x7ea7;&#x5e93;&#xff0c;&#x8fdb;&#x4e00;&#x6b65;&#x7b80;&#x5316;&#x4e86;&#x7f16;&#x5199; Web Components &#x7684;&#x4f53;&#x9a8c;&#x3002;&#x968f;&#x7740;&#x6d4f;&#x89c8;&#x5668;&#x517c;&#x5bb9;&#x6027;&#x7684;&#x65e5;&#x76ca;&#x5b8c;&#x5584;&#x548c;&#x524d;&#x7aef;&#x751f;&#x6001;&#x5bf9;&#x201c;&#x6280;&#x672f;&#x6808;&#x65e0;&#x5173;&#x6027;&#x201d;&#x7684;&#x8ffd;&#x6c42;&#xff0c;Web Components &#x6b63;&#x4f5c;&#x4e3a;&#x4e00;&#x79cd;&#x9762;&#x5411;&#x672a;&#x6765;&#x7684;&#x3001;&#x53ef;&#x6301;&#x7eed;&#x7684;&#x7ec4;&#x4ef6;&#x5316;&#x65b9;&#x6848;&#xff0c;&#x53d7;&#x5230;&#x8d8a;&#x6765;&#x8d8a;&#x591a;&#x7684;&#x5173;&#x6ce8;&#x3002;&#x5b83;&#x4ee3;&#x8868;&#x4e86;&#x5c06;&#x7ec4;&#x4ef6;&#x5316;&#x80fd;&#x529b;&#x56de;&#x5f52;&#x5230; Web &#x5e73;&#x53f0;&#x672c;&#x8eab;&#x7684;&#x8d8b;&#x52bf;&#xff0c;&#x9884;&#x793a;&#x7740;&#x4e00;&#x4e2a;&#x66f4;&#x52a0;&#x6807;&#x51c6;&#x5316;&#x548c;&#x4e92;&#x64cd;&#x4f5c;&#x6027;&#x66f4;&#x5f3a;&#x7684;&#x524d;&#x7aef;&#x672a;&#x6765;&#x3002;</p>',
+                              children: [],
+                              payload: { tag: "li", lines: "866,868" },
+                            },
+                          ],
+                          payload: { tag: "ul", lines: "864,868" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "852,853" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "828,829" },
+                },
+                {
+                  content:
+                    "<strong>UI &#x7ec4;&#x4ef6;&#x5e93;&#xff1a;&#x52a0;&#x901f;&#x5f00;&#x53d1;&#x7684;&#x5229;&#x5668;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x91cd;&#x6784; UI &#x7ec4;&#x4ef6;&#x7684;&#x5f00;&#x53d1;&#x8303;&#x5f0f;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>1.1 UI &#x7ec4;&#x4ef6;&#x5e93;&#x7684;&#x6f14;&#x8fdb;&#xff1a;&#x4ece; Bootstrap &#x65f6;&#x4ee3;&#x5230;&#x73b0;&#x4ee3;&#x6846;&#x67b6;&#x751f;&#x6001;</strong>",
+                          children: [],
+                          payload: { tag: "h5", lines: "874,875" },
+                        },
+                        {
+                          content:
+                            "<strong>1.2 &#x73b0;&#x4ee3;&#x7ec4;&#x4ef6;&#x5e93;&#x7684;&#x6838;&#x5fc3;&#x5206;&#x7c7b;&#x4e0e;&#x8bc4;&#x4f30;&#x7ef4;&#x5ea6;</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x8bbe;&#x8ba1;&#x4e00;&#x81f4;&#x6027;&#x4e0e;&#x7f8e;&#x5b66;&#xff1a;</strong> &#x8bc4;&#x4f30;&#x5e93;&#x662f;&#x5426;&#x9075;&#x5faa;&#x4e00;&#x5957;&#x6210;&#x719f;&#x3001;&#x4e13;&#x4e1a;&#x7684; UI/UX &#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff0c;&#x4ee5;&#x786e;&#x4fdd;&#x5176;&#x7ec4;&#x4ef6;&#x5728;&#x89c6;&#x89c9;&#x4e0a;&#x7684;&#x548c;&#x8c10;&#x7edf;&#x4e00;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "886,887" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x53ef;&#x5b9a;&#x5236;&#x6027;&#xff1a;</strong> &#x8861;&#x91cf;&#x5f00;&#x53d1;&#x8005;&#x4fee;&#x6539;&#x7ec4;&#x4ef6;&#x5916;&#x89c2;&#x548c;&#x884c;&#x4e3a;&#x7684;&#x4fbf;&#x5229;&#x7a0b;&#x5ea6;&#x3002;&#x9ad8;&#x5ea6;&#x53ef;&#x5b9a;&#x5236;&#x7684;&#x5e93;&#x901a;&#x5e38;&#x63d0;&#x4f9b;&#x5f3a;&#x5927;&#x7684;&#x4e3b;&#x9898;&#x7cfb;&#x7edf;&#x3001;CSS &#x53d8;&#x91cf;&#x6216;&#x6837;&#x5f0f;&#x5c5e;&#x6027;&#xff08;style props&#xff09;&#x652f;&#x6301;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "887,888" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;&#xff08;DX&#xff09;&#xff1a;</strong> &#x8003;&#x5bdf; API &#x8bbe;&#x8ba1;&#x7684;&#x76f4;&#x89c2;&#x6027;&#x3001;&#x6587;&#x6863;&#x7684;&#x8be6;&#x5c3d;&#x7a0b;&#x5ea6;&#x4ee5;&#x53ca;&#x793e;&#x533a;&#x652f;&#x6301;&#x7684;&#x6d3b;&#x8dc3;&#x5ea6;&#x3002;&#x4f18;&#x79c0;&#x7684;&#x5e93;&#x901a;&#x5e38;&#x62e5;&#x6709;&#x6e05;&#x6670;&#x7684;&#x6587;&#x6863;&#x548c;&#x6d3b;&#x8dc3;&#x7684;&#x793e;&#x533a;&#xff0c;&#x4f8b;&#x5982; MUI &#x7684;&#x6587;&#x6863;&#x7531;&#x8d85;&#x8fc7; 2,000 &#x540d;&#x8d21;&#x732e;&#x8005;&#x5171;&#x540c;&#x7ef4;&#x62a4;&#xff0c;&#x88ab;&#x5f00;&#x53d1;&#x8005;&#x8d5e;&#x8a89;&#x4e3a;&#x201c;&#x65e0;&#x9700;&#x53bb; Stack Overflow &#x5bfb;&#x627e;&#x7b54;&#x6848;&#x201d;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "888,889" },
+                            },
+                            {
+                              content:
+                                '<strong>&#x6027;&#x80fd;&#x4e0e;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#xff08;Accessibility&#xff09;&#xff1a;</strong> &#x8bc4;&#x4f30;&#x5e93;&#x7684;&#x8f7b;&#x91cf;&#x7ea7;&#x548c;&#x6e32;&#x67d3;&#x6548;&#x7387;&#xff0c;&#x4ee5;&#x53ca;&#x5176;&#x5bf9; Web &#x5185;&#x5bb9;&#x65e0;&#x969c;&#x788d;&#x6307;&#x5357;&#xff08;<a href="https://www.w3.org/WAI/standards-guidelines/wcag/">WCAG</a>&#xff09;&#x6807;&#x51c6;&#x7684;&#x9075;&#x5faa;&#x60c5;&#x51b5;&#x3002;&#x4f8b;&#x5982;&#xff0c;<a href="https://chakra-ui.com/">Chakra UI</a> &#x660e;&#x786e;&#x5c06;&#x65e0;&#x969c;&#x788d;&#x8bbe;&#x8ba1;&#x4f5c;&#x4e3a;&#x5176;&#x6838;&#x5fc3;&#x6307;&#x5bfc;&#x539f;&#x5219;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "889,890" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x793e;&#x533a;&#x4e0e;&#x751f;&#x6001;&#x7cfb;&#x7edf;&#xff1a;</strong> &#x8003;&#x5bdf;&#x5e93;&#x5728; GitHub &#x4e0a;&#x7684;&#x661f;&#x6807;&#x6570;&#x3001;npm &#x5468;&#x4e0b;&#x8f7d;&#x91cf;&#x3001;&#x4ee5;&#x53ca;&#x793e;&#x533a;&#xff08;&#x5982; Discord&#xff09;&#x7684;&#x6d3b;&#x8dc3;&#x5ea6;&#xff0c;&#x8fd9;&#x4e9b;&#x6307;&#x6807;&#x53cd;&#x6620;&#x4e86;&#x5176;&#x53d7;&#x6b22;&#x8fce;&#x7a0b;&#x5ea6;&#x4e0e;&#x53ef;&#x6301;&#x7eed;&#x53d1;&#x5c55;&#x6f5c;&#x529b;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "890,892" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "880,881" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "872,873" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x4e3b;&#x6d41;&#x524d;&#x7aef;&#x6846;&#x67b6;&#x4e0b;&#x7684;&#x7ec4;&#x4ef6;&#x5e93;&#x6df1;&#x5ea6;&#x5256;&#x6790;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>2.1 React &#x751f;&#x6001;&#xff1a;&#x591a;&#x5143;&#x5316;&#x4e0e;&#x521b;&#x65b0;&#x524d;&#x6cbf;</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>MUI (Material UI)&#xff1a;&#x6210;&#x719f;&#x7684; Material Design &#x5b9e;&#x73b0;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    '<strong>&#x5168;&#x65b9;&#x4f4d;&#x5de5;&#x5177;&#x96c6;&#xff1a;</strong> &#x9664;&#x4e86;&#x63d0;&#x4f9b;&#x57fa;&#x7840;&#x7ec4;&#x4ef6;&#x7684; Material UI &#x5e93;&#xff0c;MUI &#x751f;&#x6001;&#x8fd8;&#x5305;&#x542b;&#x7528;&#x4e8e;&#x5904;&#x7406;&#x590d;&#x6742;&#x6570;&#x636e;&#x7528;&#x4f8b;&#x7684; <a href="https://mui.com/x/">MUI X</a>&#xff0c;&#x4ee5;&#x53ca;&#x7528;&#x4e8e;&#x5feb;&#x901f;&#x6784;&#x5efa;&#x4eea;&#x8868;&#x76d8;&#x548c;&#x5185;&#x90e8;&#x5e94;&#x7528;&#x7684; <a href="https://mui.com/toolpad/">Toolpad</a>&#x3002;&#x8fd9;&#x79cd;&#x6a21;&#x5757;&#x5316;&#x7684;&#x4ea7;&#x54c1;&#x7ebf;&#x6ee1;&#x8db3;&#x4e86;&#x4e0d;&#x540c;&#x573a;&#x666f;&#x7684;&#x9700;&#x6c42;&#x3002;',
+                                  children: [],
+                                  payload: { tag: "li", lines: "902,903" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x9ad8;&#x5ea6;&#x53ef;&#x5b9a;&#x5236;&#x6027;&#xff1a;</strong> MUI &#x7684;&#x7ec4;&#x4ef6;&#x975e;&#x5e38;&#x7075;&#x6d3b;&#x4e14;&#x5f3a;&#x5927;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x5b8c;&#x5168;&#x638c;&#x63a7;&#x5176;&#x5916;&#x89c2;&#x548c;&#x884c;&#x4e3a;&#x3002;&#x901a;&#x8fc7;&#x5f3a;&#x5927;&#x7684;&#x5b9a;&#x5236;&#x7cfb;&#x7edf;&#xff0c;&#x56e2;&#x961f;&#x751a;&#x81f3;&#x53ef;&#x4ee5;&#x57fa;&#x4e8e; MUI &#x5b9e;&#x73b0;&#x81ea;&#x5df1;&#x7684;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff0c;&#x540c;&#x65f6;&#x964d;&#x4f4e;&#x7ef4;&#x62a4;&#x6210;&#x672c;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "903,904" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x5353;&#x8d8a;&#x7684;&#x6587;&#x6863;&#x4e0e;&#x793e;&#x533a;&#xff1a;</strong> MUI &#x7684;&#x6587;&#x6863;&#x56e0;&#x5176;&#x8be6;&#x5c3d;&#x548c;&#x6613;&#x7528;&#x800c;&#x5907;&#x53d7;&#x8d5e;&#x8a89;&#xff0c;&#x80cc;&#x540e;&#x6709;&#x8d85;&#x8fc7; 2,000 &#x540d;&#x8d21;&#x732e;&#x8005;&#x5171;&#x540c;&#x7ef4;&#x62a4;&#x3002;&#x8fd9;&#x4f7f;&#x5f97;&#x5f00;&#x53d1;&#x8005;&#x80fd;&#x591f;&#x8fc5;&#x901f;&#x627e;&#x5230;&#x95ee;&#x9898;&#x7684;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#xff0c;&#x6781;&#x5927;&#x5730;&#x63d0;&#x5347;&#x4e86;&#x5f00;&#x53d1;&#x6548;&#x7387;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "904,906" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "898,899" },
+                            },
+                            {
+                              content:
+                                "<strong>Ant Design&#xff1a;&#x4f01;&#x4e1a;&#x7ea7;&#x4e2d;&#x540e;&#x53f0;&#x7684;&#x9996;&#x9009;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x7ec4;&#x4ef6;&#x4e30;&#x5bcc;&#x5ea6;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x4e00;&#x5957;&#x5b8c;&#x6574;&#x7684;&#x7ec4;&#x4ef6;&#xff0c;&#x6db5;&#x76d6;&#x4e86;&#x901a;&#x7528;&#x3001;&#x5e03;&#x5c40;&#x3001;&#x5bfc;&#x822a;&#x3001;&#x6570;&#x636e;&#x5f55;&#x5165;&#x3001;&#x6570;&#x636e;&#x663e;&#x793a;&#x548c;&#x53cd;&#x9988;&#x7b49;&#x591a;&#x79cd;&#x7c7b;&#x522b;&#xff0c;&#x603b;&#x8ba1;&#x591a;&#x8fbe;&#x6570;&#x5341;&#x79cd;&#x7ec4;&#x4ef6;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "910,911" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x56fd;&#x9645;&#x5316;&#x4e0e;&#x4e3b;&#x9898;&#x5b9a;&#x5236;&#xff1a;</strong> &#x5185;&#x7f6e;&#x4e86;&#x5f3a;&#x5927;&#x7684;&#x56fd;&#x9645;&#x5316;&#x652f;&#x6301;&#xff0c;&#x5e76;&#x63d0;&#x4f9b;&#x4e86;&#x7075;&#x6d3b;&#x7684;&#x4e3b;&#x9898;&#x5b9a;&#x5236;&#x80fd;&#x529b;&#xff0c;&#x4f7f;&#x5176;&#x80fd;&#x591f;&#x8f7b;&#x677e;&#x9002;&#x5e94;&#x4e0d;&#x540c;&#x5730;&#x533a;&#x548c;&#x54c1;&#x724c;&#x7684;&#x9700;&#x6c42;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "911,912" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x8bbe;&#x8ba1;&#x8d44;&#x6e90;&#xff1a;</strong> Ant Design &#x4e0d;&#x4ec5;&#x662f;&#x4e00;&#x4e2a;&#x4ee3;&#x7801;&#x5e93;&#xff0c;&#x5b83;&#x8fd8;&#x63d0;&#x4f9b; Sketch&#x3001;Figma&#x3001;Adobe XD &#x7b49;&#x4e3b;&#x6d41;&#x8bbe;&#x8ba1;&#x5de5;&#x5177;&#x7684;&#x8d44;&#x6e90;&#x6587;&#x4ef6;&#xff0c;&#x786e;&#x4fdd;&#x8bbe;&#x8ba1;&#x56e2;&#x961f;&#x548c;&#x5f00;&#x53d1;&#x56e2;&#x961f;&#x80fd;&#x591f;&#x4f7f;&#x7528;&#x540c;&#x4e00;&#x5957;&#x8bbe;&#x8ba1;&#x8bed;&#x8a00;&#xff0c;&#x5b9e;&#x73b0;&#x8bbe;&#x8ba1;&#x4e0e;&#x4ee3;&#x7801;&#x7684;&#x9ad8;&#x5ea6;&#x540c;&#x6b65;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "912,914" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "906,907" },
+                            },
+                            {
+                              content:
+                                "<strong>Chakra UI&#xff1a;&#x4ee5;&#x65e0;&#x969c;&#x788d;&#x4e0e;&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;&#x4e3a;&#x6838;&#x5fc3;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    '<strong>&#x65e0;&#x969c;&#x788d;&#x4f18;&#x5148;&#xff1a;</strong> &#x660e;&#x786e;&#x5c06;&#x65e0;&#x969c;&#x788d;&#x8bbe;&#x8ba1;&#x4f5c;&#x4e3a;&#x5176;&#x6307;&#x5bfc;&#x539f;&#x5219;&#xff0c;&#x6240;&#x6709;&#x7ec4;&#x4ef6;&#x90fd;&#x9075;&#x5faa; WCAG&#xff08;Web Content Accessibility Guidelines&#xff09;&#x6807;&#x51c6;&#xff0c;&#x786e;&#x4fdd;&#x4e86;&#x4ea7;&#x54c1;&#x7684;&#x5305;&#x5bb9;&#x6027;&#x3002;&#x8fd9;&#x4e00;&#x7279;&#x70b9;&#x83b7;&#x5f97;&#x4e86;&#x5982; <a href="https://vercel.com/">Vercel</a> CEO &#x5728;&#x5185;&#x77e5;&#x540d;&#x5f00;&#x53d1;&#x8005;&#x7684;&#x63a8;&#x5d07;&#x3002;',
+                                  children: [],
+                                  payload: { tag: "li", lines: "918,919" },
+                                },
+                                {
+                                  content:
+                                    '<strong>&#x9ad8;&#x5ea6;&#x6a21;&#x5757;&#x5316;&#x4e0e;&#x53ef;&#x7ec4;&#x5408;&#x6027;&#xff1a;</strong> &#x91c7;&#x7528;&#x6a21;&#x5757;&#x5316;&#x67b6;&#x6784;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x6839;&#x636e;&#x9700;&#x8981;&#x8f7b;&#x677e;&#x5f15;&#x5165;&#x548c;&#x7ec4;&#x5408;&#x7ec4;&#x4ef6;&#x3002;&#x5176;&#x5f3a;&#x5927;&#x7684; style props &#x548c;&#x57fa;&#x4e8e; <a href="https://panda-css.com/">Panda CSS</a> &#x7684;&#x4e3b;&#x9898;&#x7cfb;&#x7edf;&#xff0c;&#x8ba9;&#x5f00;&#x53d1;&#x8005;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x5728;&#x7ec4;&#x4ef6;&#x4e0a;&#x5b9a;&#x4e49;&#x6837;&#x5f0f;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x6781;&#x9ad8;&#x7684;&#x7075;&#x6d3b;&#x6027;&#x3002;',
+                                  children: [],
+                                  payload: { tag: "li", lines: "919,920" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x793e;&#x533a;&#x6d3b;&#x8dc3;&#xff1a;</strong> &#x62e5;&#x6709;&#x8d85;&#x8fc7; 8,500 &#x540d;&#x6210;&#x5458;&#x7684; Discord &#x793e;&#x533a;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x5f3a;&#x5927;&#x7684;&#x793e;&#x533a;&#x652f;&#x6301;&#xff0c;&#x786e;&#x4fdd;&#x5f00;&#x53d1;&#x8005;&#x5728;&#x9047;&#x5230;&#x95ee;&#x9898;&#x65f6;&#x80fd;&#x83b7;&#x5f97;&#x53ca;&#x65f6;&#x5e2e;&#x52a9;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "920,921" },
+                                },
+                                {
+                                  content: "",
+                                  children: [],
+                                  payload: { tag: "li", lines: "921,923" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "914,915" },
+                            },
+                            {
+                              content:
+                                "<strong>Fluent UI&#xff1a;&#x5fae;&#x8f6f;&#x5b98;&#x65b9;&#x7684;&#x4f01;&#x4e1a;&#x7ea7;&#x751f;&#x4ea7;&#x529b;&#x5f15;&#x64ce;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x4f01;&#x4e1a;&#x7ea7;&#x6574;&#x5408;&#x4e0e;&#x751f;&#x4ea7;&#x529b;&#xff1a;</strong> &#x5176;&#x8bbe;&#x8ba1;&#x7406;&#x5ff5;&#x548c;&#x7ec4;&#x4ef6;&#x5b8c;&#x5168;&#x4e3a;&#x4fe1;&#x606f;&#x5bc6;&#x5ea6;&#x9ad8;&#x3001;&#x4ea4;&#x4e92;&#x590d;&#x6742;&#x7684;&#x4f01;&#x4e1a;&#x573a;&#x666f;&#x670d;&#x52a1;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x5927;&#x91cf;&#x6210;&#x719f;&#x7684;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#xff0c;&#x5982;&#x56fe;&#x8868;&#x3001;&#x6570;&#x636e;&#x7f51;&#x683c;&#x548c;&#x590d;&#x6742;&#x7684;&#x8868;&#x5355;&#x63a7;&#x4ef6;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "927,928" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x9876;&#x7ea7;&#x7684;&#x53ef;&#x8bbf;&#x95ee;&#x6027; (A11y)&#xff1a;</strong> &#x4f5c;&#x4e3a;&#x5fae;&#x8f6f;&#x4ea7;&#x54c1;&#x7684;&#x57fa;&#x77f3;&#xff0c;Fluent UI &#x5728;&#x65e0;&#x969c;&#x788d;&#x8bbe;&#x8ba1;&#x4e0a;&#x6295;&#x5165;&#x5de8;&#x5927;&#xff0c;&#x4e25;&#x683c;&#x9075;&#x5faa; WCAG &#x6807;&#x51c6;&#xff0c;&#x786e;&#x4fdd;&#x5e94;&#x7528;&#x80fd;&#x6ee1;&#x8db3;&#x6700;&#x4e25;&#x82db;&#x7684;&#x4f01;&#x4e1a;&#x548c;&#x653f;&#x5e9c;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#x8981;&#x6c42;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "928,929" },
+                                },
+                                {
+                                  content:
+                                    '<strong>&#x4e0e;&#x5fae;&#x8f6f;&#x751f;&#x6001;&#x7684;&#x65e0;&#x7f1d;&#x8854;&#x63a5;&#xff1a;</strong> &#x5bf9;&#x4e8e;&#x4f7f;&#x7528; <a href="https://developer.microsoft.com/en-us/graph">Microsoft Graph</a>&#x3001;<a href="https://www.microsoft.com/en-us/microsoft-teams/group-chat-software">Teams</a> &#x6216; <a href="https://www.microsoft.com/en-us/microsoft-365/sharepoint/collaboration">SharePoint</a> &#x7b49;&#x670d;&#x52a1;&#x7684;&#x5f00;&#x53d1;&#x8005;&#x800c;&#x8a00;&#xff0c;&#x91c7;&#x7528; Fluent UI &#x80fd;&#x591f;&#x786e;&#x4fdd;&#x89c6;&#x89c9;&#x548c;&#x4ea4;&#x4e92;&#x4f53;&#x9a8c;&#x7684;&#x65e0;&#x7f1d;&#x7edf;&#x4e00;&#xff0c;&#x63d0;&#x4f9b;&#x5b98;&#x65b9;&#x652f;&#x6301;&#x7684;&#x6700;&#x4f73;&#x5b9e;&#x8df5;&#x3002;',
+                                  children: [],
+                                  payload: { tag: "li", lines: "929,931" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "923,924" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x6df1;&#x5ea6;&#x6d1e;&#x5bdf;&#xff1a;&#x65e0;&#x5934;&#x7ec4;&#x4ef6;&#x4e0e;&#x5b9e;&#x7528;&#x81f3;&#x4e0a; CSS &#x7684;&#x5d1b;&#x8d77;</strong>",
+                              children: [],
+                              payload: { tag: "h6", lines: "931,932" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x5176;&#x4ed6;&#x503c;&#x5f97;&#x5173;&#x6ce8;&#x7684; React &#x5e93;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    '<strong>PrimeReact&#xff1a;</strong> &#x4f5c;&#x4e3a; <a href="https://primeng.org/">PrimeNG</a> &#x5728; React &#x751f;&#x6001;&#x4e2d;&#x7684;&#x5bf9;&#x5e94;&#x7248;&#x672c;&#xff0c;&#x662f;&#x529f;&#x80fd;&#x4e30;&#x5bcc;&#x3001;&#x7ec4;&#x4ef6;&#x6570;&#x91cf;&#x5e9e;&#x5927;&#x7684;&#x5e93;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x8d85;&#x8fc7; 90 &#x4e2a;&#x7ec4;&#x4ef6;&#x548c; 280 &#x4e2a; UI &#x5757;&#x3002;',
+                                  children: [],
+                                  payload: { tag: "li", lines: "941,942" },
+                                },
+                                {
+                                  content:
+                                    "<strong>Mantine&#xff1a;</strong> &#x529f;&#x80fd;&#x5168;&#x9762;&#x7684;&#x5e93;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x8d85;&#x8fc7; 100 &#x4e2a;&#x53ef;&#x5b9a;&#x5236;&#x7ec4;&#x4ef6;&#x548c; React Hooks &#x5e93;&#xff0c;&#x5e76;&#x5185;&#x7f6e;&#x4e86;&#x9ed1;&#x6697;&#x6a21;&#x5f0f;&#x652f;&#x6301;&#xff0c;&#x57fa;&#x4e8e; TypeScript &#x6784;&#x5efa;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "942,943" },
+                                },
+                                {
+                                  content:
+                                    "<strong>Flowbite React&#xff1a;</strong> &#x57fa;&#x4e8e; Tailwind CSS &#x7684;&#x5f00;&#x6e90; React UI &#x5e93;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x8d85;&#x8fc7; 100 &#x4e2a;&#x4ea4;&#x4e92;&#x5f0f; UI &#x5143;&#x7d20;&#xff0c;&#x80fd;&#x591f;&#x8f7b;&#x677e;&#x878d;&#x5165;&#x590d;&#x6742;&#x7684;&#x9879;&#x76ee;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "943,945" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "939,940" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "894,895" },
+                        },
+                        {
+                          content:
+                            "<strong>2.2 Vue &#x751f;&#x6001;&#xff1a;&#x7edf;&#x4e00;&#x4e0e;&#x8de8;&#x5e73;&#x53f0;</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>Vuetify&#xff1a;Vue &#x7684; Material Design &#x65d7;&#x8230;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x7ec4;&#x4ef6;&#x4e30;&#x5bcc;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x8d85;&#x8fc7; 80 &#x4e2a;&#x7ec4;&#x4ef6;&#xff0c;&#x80fd;&#x591f;&#x6ee1;&#x8db3;&#x5927;&#x90e8;&#x5206;&#x5e94;&#x7528;&#x5f00;&#x53d1;&#x9700;&#x6c42;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "953,954" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x5f3a;&#x5927;&#x793e;&#x533a;&#x652f;&#x6301;&#xff1a;</strong> &#x62e5;&#x6709;&#x5e9e;&#x5927;&#x7684;&#x793e;&#x533a;&#xff0c;&#x901a;&#x8fc7; Discord &#x7b49;&#x6e20;&#x9053;&#x4e3a;&#x5f00;&#x53d1;&#x8005;&#x63d0;&#x4f9b;&#x53ca;&#x65f6;&#x7684;&#x5e2e;&#x52a9;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "954,955" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x5feb;&#x901f;&#x6784;&#x5efa;&#xff1a;</strong> &#x652f;&#x6301;&#x4f7f;&#x7528; Vite &#x8fdb;&#x884c;&#x9879;&#x76ee;&#x811a;&#x624b;&#x67b6;&#x642d;&#x5efa;&#xff0c;&#x80fd;&#x591f;&#x5feb;&#x901f;&#x542f;&#x52a8;&#x65b0;&#x9879;&#x76ee;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "955,957" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "949,950" },
+                            },
+                            {
+                              content:
+                                "<strong>Element Plus&#xff1a;&#x4ece; Vue 2 &#x5230; Vue 3 &#x7684;&#x5e73;&#x6ed1;&#x8fc7;&#x6e21;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x590d;&#x6742;&#x7ec4;&#x4ef6;&#x652f;&#x6301;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x4e00;&#x7cfb;&#x5217;&#x590d;&#x6742;&#x7684; UI &#x7ec4;&#x4ef6;&#xff0c;&#x5982;&#x65f6;&#x95f4;&#x7ebf;&#x3001;&#x65e5;&#x5386;&#x3001;&#x6570;&#x636e;&#x9009;&#x62e9;&#x5668;&#x548c;&#x6811;&#x5f62;&#x7ed3;&#x6784;&#x7b49;&#xff0c;&#x6781;&#x5927;&#x5730;&#x7b80;&#x5316;&#x4e86;&#x5f00;&#x53d1;&#x5de5;&#x4f5c;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "961,962" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x4e3b;&#x9898;&#x5b9a;&#x5236;&#xff1a;</strong> &#x91c7;&#x7528; BEM &#x98ce;&#x683c;&#x7684; CSS&#xff0c;&#x5e76;&#x652f;&#x6301; Sass &#x53d8;&#x91cf;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x53ef;&#x4ee5;&#x8f7b;&#x677e;&#x5730;&#x8fdb;&#x884c;&#x5927;&#x89c4;&#x6a21;&#x7684;&#x4e3b;&#x9898;&#x4fee;&#x6539;&#xff0c;&#x4f8b;&#x5982;&#x5c06;&#x4e3b;&#x9898;&#x8272;&#x4ece;&#x84dd;&#x8272;&#x66f4;&#x6539;&#x4e3a;&#x5176;&#x4ed6;&#x989c;&#x8272;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "962,964" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "957,958" },
+                            },
+                            {
+                              content:
+                                "<strong>Quasar Framework&#xff1a;&#x4e00;&#x5957;&#x4ee3;&#x7801;&#xff0c;&#x591a;&#x7aef;&#x90e8;&#x7f72;&#x7684;&#x7ec8;&#x6781;&#x65b9;&#x6848;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    '<strong>&#x5168;&#x65b9;&#x4f4d;&#x8de8;&#x5e73;&#x53f0;&#x80fd;&#x529b;&#xff1a;</strong> Quasar &#x80fd;&#x591f;&#x5c06;&#x540c;&#x4e00;&#x4efd;&#x4ee3;&#x7801;&#x5e93;&#x6784;&#x5efa;&#x4e3a;&#x5355;&#x9875;&#x5e94;&#x7528;&#xff08;SPA&#xff09;&#x3001;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x6e32;&#x67d3;&#x5e94;&#x7528;&#xff08;SSR&#xff09;&#x3001;&#x6e10;&#x8fdb;&#x5f0f; Web &#x5e94;&#x7528;&#xff08;<a href="https://web.dev/progressive-web-apps/">PWA</a>&#xff09;&#x3001;&#x79fb;&#x52a8;&#x5e94;&#x7528;&#xff08;&#x901a;&#x8fc7; <a href="https://cordova.apache.org/">Cordova</a> &#x6216; <a href="https://capacitorjs.com/">Capacitor</a>&#xff09;&#x4ee5;&#x53ca;&#x684c;&#x9762;&#x5e94;&#x7528;&#xff08;&#x901a;&#x8fc7; <a href="https://www.electronjs.org/">Electron</a>&#xff09;&#x3002;',
+                                  children: [],
+                                  payload: { tag: "li", lines: "968,969" },
+                                },
+                                {
+                                  content:
+                                    '<strong>&#x5168;&#x6808;&#x96c6;&#x6210;&#xff1a;</strong> &#x5185;&#x7f6e;&#x4e86;&#x8bb8;&#x591a;&#x529f;&#x80fd;&#xff0c;&#x51cf;&#x5c11;&#x4e86;&#x5bf9; <a href="https://hammerjs.github.io/">Hammer.js</a>&#x3001;<a href="https://momentjs.com/">Moment.js</a> &#x7b49;&#x7b2c;&#x4e09;&#x65b9;&#x5e93;&#x7684;&#x4f9d;&#x8d56;&#xff0c;&#x5b9e;&#x73b0;&#x4e86;&#x5c0f;&#x4f53;&#x79ef;&#x7684;&#x5168;&#x529f;&#x80fd;&#x8986;&#x76d6;&#x3002;',
+                                  children: [],
+                                  payload: { tag: "li", lines: "969,971" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "964,965" },
+                            },
+                            {
+                              content:
+                                "<strong>Ant Design Vue&#xff1a;&#x4f01;&#x4e1a;&#x7ea7;&#x8bbe;&#x8ba1;&#x4f53;&#x7cfb;&#x7684; Vue &#x5b9e;&#x73b0;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x8bbe;&#x8ba1;&#x4f53;&#x7cfb;&#x7684;&#x65e0;&#x7f1d;&#x8fc1;&#x79fb;&#xff1a;</strong> &#x6700;&#x5927;&#x7684;&#x4ef7;&#x503c;&#x5728;&#x4e8e;&#x5b83;&#x5b8c;&#x6574;&#x7ee7;&#x627f;&#x4e86; Ant Design &#x6210;&#x719f;&#x3001;&#x4e13;&#x4e1a;&#x7684;&#x8bbe;&#x8ba1;&#x8bed;&#x8a00;&#x548c;&#x4ea4;&#x4e92;&#x89c4;&#x8303;&#x3002;&#x8fd9;&#x610f;&#x5473;&#x7740;&#x4f7f;&#x7528; Vue &#x7684;&#x56e2;&#x961f;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x5229;&#x7528; Ant Design &#x4e30;&#x5bcc;&#x7684; Figma&#x3001;Sketch &#x7b49;&#x8bbe;&#x8ba1;&#x8d44;&#x6e90;&#xff0c;&#x786e;&#x4fdd;&#x8bbe;&#x8ba1;&#x4e0e;&#x5f00;&#x53d1;&#x4e4b;&#x95f4;&#x7684;&#x9ad8;&#x5ea6;&#x534f;&#x540c;&#xff0c;&#x8fd9;&#x5bf9;&#x4e8e;&#x8de8;&#x6280;&#x672f;&#x6808;&#xff08;React &amp; Vue&#xff09;&#x7684;&#x56e2;&#x961f;&#x5c24;&#x5176;&#x5b9d;&#x8d35;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "975,976" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x9762;&#x5411; Vue 3 &#x7684;&#x73b0;&#x4ee3;&#x5316;&#x91cd;&#x6784;&#xff1a;</strong> &#x65b0;&#x7248;&#x672c;&#x5b8c;&#x5168;&#x62e5;&#x62b1; Vue 3&#xff0c;&#x5168;&#x9762;&#x91c7;&#x7528; Composition API &#x548c; TypeScript &#x8fdb;&#x884c;&#x91cd;&#x6784;&#x3002;&#x8fd9;&#x4e0d;&#x4ec5;&#x5e26;&#x6765;&#x4e86;&#x66f4;&#x4f18;&#x7684;&#x6027;&#x80fd;&#x548c;&#x66f4;&#x5c0f;&#x7684;&#x6253;&#x5305;&#x4f53;&#x79ef;&#xff0c;&#x4e5f;&#x4e3a;&#x5f00;&#x53d1;&#x8005;&#x63d0;&#x4f9b;&#x4e86;&#x6781;&#x4f73;&#x7684;&#x7c7b;&#x578b;&#x63a8;&#x65ad;&#x548c;&#x66f4;&#x73b0;&#x4ee3;&#x3001;&#x66f4;&#x7b26;&#x5408; Vue 3 &#x6838;&#x5fc3;&#x601d;&#x60f3;&#x7684;&#x5f00;&#x53d1;&#x4f53;&#x9a8c;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "976,977" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x5b8c;&#x6574;&#x7684;&#x4f01;&#x4e1a;&#x7ea7;&#x7ec4;&#x4ef6;&#x96c6;&#xff1a;</strong> &#x4e0e; React &#x7248;&#x672c;&#x4e00;&#x6837;&#xff0c;&#x5b83;&#x63d0;&#x4f9b;&#x4e86;&#x6570;&#x5341;&#x4e2a;&#x9ad8;&#x8d28;&#x91cf;&#x7ec4;&#x4ef6;&#xff0c;&#x8986;&#x76d6;&#x4e86;&#x4ece;&#x6570;&#x636e;&#x5f55;&#x5165;&#x3001;&#x6570;&#x636e;&#x663e;&#x793a;&#x5230;&#x53cd;&#x9988;&#x548c;&#x5e03;&#x5c40;&#x7684;&#x5404;&#x79cd;&#x590d;&#x6742;&#x4e2d;&#x540e;&#x53f0;&#x573a;&#x666f;&#xff0c;&#x786e;&#x4fdd;&#x5f00;&#x53d1;&#x8005;&#x80fd;&#x627e;&#x5230;&#x6240;&#x9700;&#x7684;&#x4e00;&#x5207;&#xff0c;&#x65e0;&#x9700;&#x5bfb;&#x627e;&#x7b2c;&#x4e09;&#x65b9;&#x8865;&#x5145;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "977,979" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "971,972" },
+                            },
+                            {
+                              content:
+                                "<strong>Naive UI&#xff1a;&#x4e3a;&#x6781;&#x81f4;&#x6027;&#x80fd;&#x4e0e;&#x7075;&#x6d3b;&#x4e3b;&#x9898;&#x800c;&#x751f;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x6027;&#x80fd;&#x4f18;&#x5148;&#x7684;&#x67b6;&#x6784;&#x8bbe;&#x8ba1;&#xff1a;</strong> Naive UI &#x5728;&#x8bbe;&#x8ba1;&#x4e4b;&#x521d;&#x5c31;&#x5c06;&#x6027;&#x80fd;&#x653e;&#x5728;&#x9996;&#x4f4d;&#x3002;&#x5b83;&#x901a;&#x8fc7;&#x907f;&#x514d;&#x5728;&#x8fd0;&#x884c;&#x65f6;&#x4f7f;&#x7528; CSS-in-JS &#x7b49;&#x53ef;&#x80fd;&#x5f71;&#x54cd;&#x6027;&#x80fd;&#x7684;&#x65b9;&#x6848;&#xff0c;&#x5e76;&#x786e;&#x4fdd;&#x6240;&#x6709;&#x7ec4;&#x4ef6;&#x90fd;&#x53ef;&#x88ab;&#x5b8c;&#x7f8e;&#x5730;&#x201c;&#x6447;&#x6811;&#x4f18;&#x5316;&#x201d;&#xff08;Tree-shaking&#xff09;&#xff0c;&#x4ece;&#x800c;&#x5b9e;&#x73b0;&#x4e86;&#x66f4;&#x5feb;&#x7684;&#x6e32;&#x67d3;&#x901f;&#x5ea6;&#x548c;&#x66f4;&#x5c0f;&#x7684;&#x6700;&#x7ec8;&#x4ea7;&#x7269;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "983,984" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x6781;&#x81f4;&#x7075;&#x6d3b;&#x7684;&#x4e3b;&#x9898;&#x5b9a;&#x5236;&#xff1a;</strong> &#x5b83;&#x63d0;&#x4f9b;&#x4e86;&#x975e;&#x5e38;&#x8be6;&#x5c3d;&#x7684;&#x4e3b;&#x9898;&#x53d8;&#x91cf;&#xff08;Design Tokens&#xff09;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x901a;&#x8fc7;&#x7b80;&#x5355;&#x7684;&#x914d;&#x7f6e;&#x5bf9;&#x8c61;&#xff0c;&#x5bf9;&#x7ec4;&#x4ef6;&#x7684;&#x989c;&#x8272;&#x3001;&#x5b57;&#x4f53;&#x3001;&#x5c3a;&#x5bf8;&#x3001;&#x5706;&#x89d2;&#x7b49;&#x51e0;&#x4e4e;&#x6240;&#x6709;&#x89c6;&#x89c9;&#x7ec6;&#x8282;&#x8fdb;&#x884c;&#x6df1;&#x5ea6;&#x5b9a;&#x5236;&#x3002;&#x8fd9;&#x79cd;&#x80fd;&#x529b;&#x4f7f;&#x5176;&#x65e2;&#x80fd;&#x5feb;&#x901f;&#x5f00;&#x53d1;&#xff0c;&#x53c8;&#x80fd;&#x5b8c;&#x7f8e;&#x5339;&#x914d;&#x4efb;&#x4f55;&#x54c1;&#x724c;&#x7684;&#x8bbe;&#x8ba1;&#x89c4;&#x8303;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "984,985" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x5168;&#x9762;&#x4e14;&#x53ef;&#x9760;&#x7684; TypeScript &#x652f;&#x6301;&#xff1a;</strong> Naive UI &#x6574;&#x4e2a;&#x5e93;&#x4f7f;&#x7528; TypeScript &#x7f16;&#x5199;&#xff0c;&#x5e76;&#x4ee5;&#x6b64;&#x4e3a;&#x50b2;&#x3002;&#x8fd9;&#x610f;&#x5473;&#x7740;&#x5b83;&#x80fd;&#x63d0;&#x4f9b;&#x65e0;&#x4e0e;&#x4f26;&#x6bd4;&#x7684;&#x7c7b;&#x578b;&#x5b89;&#x5168;&#x548c;&#x667a;&#x80fd;&#x63d0;&#x793a;&#xff0c;&#x6781;&#x5927;&#x5730;&#x63d0;&#x5347;&#x4e86;&#x5728;&#x5927;&#x578b;&#x3001;&#x590d;&#x6742;&#x9879;&#x76ee;&#x4e2d;&#x4f7f;&#x7528; TypeScript &#x65f6;&#x7684;&#x5f00;&#x53d1;&#x6548;&#x7387;&#x548c;&#x4ee3;&#x7801;&#x5065;&#x58ee;&#x6027;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "985,987" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "979,980" },
+                            },
+                            {
+                              content:
+                                "<strong>PrimeVue&#xff1a;&#x529f;&#x80fd;&#x8d85;&#x5168;&#x7684;&#x201c;&#x7ec8;&#x6781;&#x201d;UI &#x5957;&#x4ef6;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x65e0;&#x4e0e;&#x4f26;&#x6bd4;&#x7684;&#x7ec4;&#x4ef6;&#x5e7f;&#x5ea6;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x8d85;&#x8fc7; 90 &#x4e2a;&#x5f00;&#x7bb1;&#x5373;&#x7528;&#x7684;&#x7ec4;&#x4ef6;&#xff0c;&#x8fdc;&#x8d85;&#x5927;&#x591a;&#x6570;&#x7ade;&#x4e89;&#x5bf9;&#x624b;&#x3002;&#x9664;&#x4e86;&#x6807;&#x51c6;&#x7ec4;&#x4ef6;&#xff0c;&#x5b83;&#x8fd8;&#x5305;&#x542b;&#x4e86;&#x7ec4;&#x7ec7;&#x7ed3;&#x6784;&#x56fe;&#x3001;&#x7ec8;&#x7aef;&#x3001;&#x65f6;&#x95f4;&#x8f74;&#x7b49;&#x8bb8;&#x591a;&#x5176;&#x4ed6;&#x5e93;&#x4e2d;&#x7f55;&#x89c1;&#x7684;&#x590d;&#x6742;&#x7ec4;&#x4ef6;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "991,992" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x6781;&#x81f4;&#x7075;&#x6d3b;&#x7684;&#x4e3b;&#x9898;&#x7cfb;&#x7edf;&#xff1a;</strong> &#x5185;&#x7f6e;&#x4e86;&#x5f3a;&#x5927;&#x7684;&#x4e3b;&#x9898;&#x8bbe;&#x8ba1;&#x5668;&#xff0c;&#x4e0d;&#x4ec5;&#x63d0;&#x4f9b;&#x591a;&#x79cd;&#x9884;&#x8bbe;&#x4e3b;&#x9898;&#xff08;&#x5305;&#x62ec; Material&#x3001;Bootstrap &#x98ce;&#x683c;&#xff09;&#xff0c;&#x8fd8;&#x652f;&#x6301;&#x5f00;&#x53d1;&#x8005;&#x4ece;&#x96f6;&#x521b;&#x5efa;&#x81ea;&#x5df1;&#x7684;&#x4e3b;&#x9898;&#x3002;&#x5176;&#x201c;&#x65e0;&#x6837;&#x5f0f; (unstyled)&#x201d;&#x6a21;&#x5f0f;&#x66f4;&#x662f;&#x5c06;&#x63a7;&#x5236;&#x6743;&#x5b8c;&#x5168;&#x4ea4;&#x8fd8;&#x7ed9;&#x5f00;&#x53d1;&#x8005;&#xff0c;&#x5b9e;&#x73b0;&#x4e86;&#x7c7b;&#x4f3c;&#x201c;&#x65e0;&#x5934;&#x201d;&#x7ec4;&#x4ef6;&#x7684;&#x6781;&#x81f4;&#x7075;&#x6d3b;&#x6027;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "992,993" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x4f01;&#x4e1a;&#x7ea7;&#x6570;&#x636e;&#x529f;&#x80fd;&#xff1a;</strong> &#x5176;&#x6570;&#x636e;&#x8868;&#x683c;&#xff08;DataTable&#xff09;&#x7ec4;&#x4ef6;&#x529f;&#x80fd;&#x6781;&#x5176;&#x5f3a;&#x5927;&#xff0c;&#x5185;&#x7f6e;&#x4e86;&#x6392;&#x5e8f;&#x3001;&#x8fc7;&#x6ee4;&#x3001;&#x5206;&#x9875;&#x3001;&#x61d2;&#x52a0;&#x8f7d;&#x3001;&#x884c;&#x7f16;&#x8f91;&#x7b49;&#x9ad8;&#x7ea7;&#x529f;&#x80fd;&#xff0c;&#x662f;&#x5904;&#x7406;&#x590d;&#x6742;&#x6570;&#x636e;&#x5bc6;&#x96c6;&#x578b;&#x5e94;&#x7528;&#x7684;&#x4e00;&#x5927;&#x5229;&#x5668;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "993,995" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "987,988" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "945,946" },
+                        },
+                        {
+                          content:
+                            "<strong>2.3 Angular &#x751f;&#x6001;&#xff1a;&#x5b98;&#x65b9;&#x4e0e;&#x4f01;&#x4e1a;&#x7ea7;&#x5e76;&#x91cd;</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>Angular Material&#xff1a;Google &#x5b98;&#x65b9;&#x652f;&#x6301;&#x7684;&#x7a33;&#x5b9a;&#x57fa;&#x77f3;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x5b98;&#x65b9;&#x5730;&#x4f4d;&#xff1a;</strong> &#x7531; Google &#x56e2;&#x961f;&#x7ef4;&#x62a4;&#xff0c;&#x786e;&#x4fdd;&#x4e86;&#x5176;&#x7a33;&#x5b9a;&#x6027;&#x548c;&#x4e0e; Angular &#x6846;&#x67b6;&#x7684;&#x65e0;&#x7f1d;&#x96c6;&#x6210;&#x3002;&#x6bcf;&#x4e00;&#x4e2a;&#x4ee3;&#x7801;&#x63d0;&#x4ea4;&#x90fd;&#x7ecf;&#x8fc7;&#x4e25;&#x683c;&#x6d4b;&#x8bd5;&#xff0c;&#x4ee3;&#x8868;&#x4e86;&#x6846;&#x67b6;&#x7684;&#x6700;&#x9ad8;&#x8d28;&#x91cf;&#x6807;&#x51c6;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1003,1004" },
+                                },
+                                {
+                                  content:
+                                    '<strong>&#x7ec4;&#x4ef6;&#x4e0e;&#x5de5;&#x5177;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x4e00;&#x5957;&#x5168;&#x9762;&#x7684; UI &#x7ec4;&#x4ef6;&#xff0c;&#x5e76;&#x9644;&#x5e26; <a href="https://material.angular.io/cdk">Angular CDK</a>&#xff08;Component Dev Kit&#xff09;&#xff0c;&#x4e00;&#x4e2a;&#x7528;&#x4e8e;&#x6784;&#x5efa;&#x81ea;&#x5b9a;&#x4e49;&#x53ef;&#x8bbf;&#x95ee;&#x7ec4;&#x4ef6;&#x7684;&#x9ad8;&#x7ea7;&#x5de5;&#x5177;&#x7bb1;&#x3002;',
+                                  children: [],
+                                  payload: { tag: "li", lines: "1004,1006" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "999,1000" },
+                            },
+                            {
+                              content:
+                                "<strong>PrimeNG&#xff1a;&#x7ec4;&#x4ef6;&#x6570;&#x91cf;&#x4e0e;&#x5546;&#x4e1a;&#x652f;&#x6301;&#x7684;&#x9886;&#x8dd1;&#x8005;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x7ec4;&#x4ef6;&#x5e7f;&#x5ea6;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x4ece;&#x57fa;&#x7840;&#x8868;&#x5355;&#x5143;&#x7d20;&#x5230;&#x590d;&#x6742;&#x7684;&#x6570;&#x636e;&#x8868;&#x683c;&#x3001;&#x56fe;&#x8868;&#x548c;&#x6587;&#x4ef6;&#x4e0a;&#x4f20;&#x5668;&#x7b49;&#x5168;&#x5957;&#x7ec4;&#x4ef6;&#xff0c;&#x51e0;&#x4e4e;&#x6db5;&#x76d6;&#x4e86;&#x6240;&#x6709;&#x4f01;&#x4e1a;&#x7ea7;&#x5e94;&#x7528;&#x7684;&#x9700;&#x6c42;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1010,1011" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x4e3b;&#x9898;&#x4e0e;&#x6a21;&#x677f;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86; Material &#x548c; Bootstrap &#x7b49;&#x591a;&#x79cd;&#x5185;&#x7f6e;&#x4e3b;&#x9898;&#xff0c;&#x4ee5;&#x53ca;&#x4e30;&#x5bcc;&#x7684;&#x4e13;&#x4e1a; UI &#x5757;&#xff08;UI blocks&#xff09;&#x548c;&#x5e94;&#x7528;&#x6a21;&#x677f;&#xff0c;&#x5e2e;&#x52a9;&#x5f00;&#x53d1;&#x8005;&#x5feb;&#x901f;&#x542f;&#x52a8;&#x9879;&#x76ee;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1011,1012" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x5546;&#x4e1a;&#x652f;&#x6301;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4f01;&#x4e1a;&#x7ea7;&#x652f;&#x6301;&#x670d;&#x52a1;&#xff0c;&#x5305;&#x62ec;&#x4e00;&#x5de5;&#x4f5c;&#x65e5;&#x5185;&#x54cd;&#x5e94;&#x548c;&#x65b0;&#x529f;&#x80fd;&#x8bf7;&#x6c42;&#xff0c;&#x4f7f;&#x5176;&#x6210;&#x4e3a;&#x5173;&#x952e;&#x4efb;&#x52a1;&#x5e94;&#x7528;&#x7684;&#x53ef;&#x9760;&#x9009;&#x62e9;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1012,1014" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "1006,1007" },
+                            },
+                            {
+                              content:
+                                "<strong>NG-ZORRO&#xff1a;Ant Design &#x5728; Angular &#x4e0a;&#x7684;&#x4e13;&#x4e1a;&#x5b9e;&#x73b0;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x8bbe;&#x8ba1;&#x4e00;&#x81f4;&#x6027;&#xff1a;</strong> &#x7ee7;&#x627f;&#x4e86; Ant Design &#x7684;&#x4e13;&#x4e1a;&#x548c;&#x4e00;&#x81f4; UI&#xff0c;&#x63d0;&#x4f9b;&#x4ece;&#x57fa;&#x7840;&#x5143;&#x7d20;&#x5230;&#x590d;&#x6742;&#x8868;&#x683c;&#x3001;&#x6a21;&#x6001;&#x6846;&#x7b49;&#x5168;&#x5957;&#x7ec4;&#x4ef6;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1018,1019" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x56fd;&#x9645;&#x5316;&#x4e0e;&#x6027;&#x80fd;&#xff1a;</strong> &#x5185;&#x7f6e;&#x56fd;&#x9645;&#x5316;&#x652f;&#x6301;&#xff0c;&#x5e76;&#x91c7;&#x7528;&#x4e86; OnPush change detection &#x548c; tree-shaking &#x7b49;&#x6280;&#x672f;&#x8fdb;&#x884c;&#x6027;&#x80fd;&#x4f18;&#x5316;&#xff0c;&#x786e;&#x4fdd;&#x4e86;&#x5e94;&#x7528;&#x7684;&#x6027;&#x80fd;&#x548c;&#x53ef;&#x7ef4;&#x62a4;&#x6027;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1019,1021" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "1014,1015" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "995,996" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "892,893" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x7279;&#x6b8a;&#x7528;&#x9014;&#x7ec4;&#x4ef6;&#x5e93;&#xff1a;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x7684;&#x5229;&#x5668;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>3.1 &#x6df1;&#x5ea6;&#x6d1e;&#x5bdf;&#xff1a;&#x901a;&#x7528;&#x4e0e;&#x4e13;&#x7528;&#x7684;&#x5206;&#x91ce;&#x2014;&#x2014;&#x4e3a;&#x4ec0;&#x4e48;&#x9700;&#x8981;&#x4e13;&#x95e8;&#x7684;&#x56fe;&#x8868;&#x5e93;&#xff1f;</strong>",
+                          children: [],
+                          payload: { tag: "h5", lines: "1023,1024" },
+                        },
+                        {
+                          content:
+                            "<strong>3.2 &#x7cbe;&#x9009;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x5e93;&#x5206;&#x6790;</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>Highcharts&#xff1a;&#x8001;&#x724c;&#x3001;&#x8de8;&#x5e73;&#x53f0;&#x3001;&#x4f01;&#x4e1a;&#x7ea7;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x6280;&#x672f;&#x6808;&#x65e0;&#x5173;&#xff1a;</strong> Highcharts &#x63d0;&#x4f9b;&#x9002;&#x7528;&#x4e8e; JavaScript&#x3001;Angular&#x3001;React&#x3001;Vue.js &#x7b49;&#x591a;&#x79cd;&#x4e3b;&#x6d41;&#x6846;&#x67b6;&#x7684; Wrapper&#xff0c;&#x5b9e;&#x73b0;&#x4e86;&#x771f;&#x6b63;&#x7684;&#x6280;&#x672f;&#x6808;&#x65e0;&#x5173;&#x6027;&#xff0c;&#x4f7f;&#x5176;&#x80fd;&#x591f;&#x88ab;&#x96c6;&#x6210;&#x5230;&#x4efb;&#x4f55;&#x524d;&#x7aef;&#x9879;&#x76ee;&#x4e2d;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1035,1036" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x4e30;&#x5bcc;&#x529f;&#x80fd;&#xff1a;</strong> &#x63d0;&#x4f9b;&#x6838;&#x5fc3;&#x56fe;&#x8868;&#x7c7b;&#x578b;&#xff0c;&#x5982;&#x7ebf;&#x56fe;&#x3001;&#x67f1;&#x72b6;&#x56fe;&#x3001;&#x997c;&#x56fe;&#x7b49;&#xff0c;&#x5e76;&#x6709;&#x4e13;&#x95e8;&#x7684;&#x4eea;&#x8868;&#x76d8;&#x548c;&#x6570;&#x636e;&#x8868;&#x683c;&#x5de5;&#x5177;&#xff0c;&#x53ef;&#x4ee5;&#x9ad8;&#x6548;&#x5730;&#x6784;&#x5efa;&#x590d;&#x6742;&#x7684;&#x6570;&#x636e;&#x9a71;&#x52a8;&#x578b;&#x5e94;&#x7528;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1036,1037" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x4f01;&#x4e1a;&#x7ea7;&#x4fe1;&#x8d56;&#xff1a;</strong> &#x5176;&#x53ef;&#x9760;&#x6027;&#x4e0e;&#x7a33;&#x5b9a;&#x6027;&#x4f7f;&#x5176;&#x8d62;&#x5f97;&#x4e86;&#x5168;&#x7403;&#x4f17;&#x591a;&#x5927;&#x578b;&#x4f01;&#x4e1a;&#x7684;&#x4fe1;&#x8d56;&#xff0c;&#x524d; 100 &#x5927;&#x516c;&#x53f8;&#x4e2d;&#x6709; 80 &#x5bb6;&#x5728;&#x4f7f;&#x7528;&#x5176;&#x56fe;&#x8868;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1037,1039" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "1031,1032" },
+                            },
+                            {
+                              content:
+                                "<strong>Nivo &amp; Recharts&#xff1a;&#x57fa;&#x4e8e; React &#x4e0e; D3 &#x7684;&#x58f0;&#x660e;&#x5f0f;&#x56fe;&#x8868;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x53ef;&#x7ec4;&#x5408;&#x6027;&#xff1a;</strong> &#x8fd9;&#x4e9b;&#x5e93;&#x7684;&#x8bbe;&#x8ba1;&#x7406;&#x5ff5;&#x5728;&#x4e8e;&#x201c;&#x58f0;&#x660e;&#x5f0f;&#x201d;&#x548c;&#x201c;&#x53ef;&#x7ec4;&#x5408;&#x201d;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x901a;&#x8fc7;&#x7ec4;&#x5408;&#x4e0d;&#x540c;&#x7684;&#x7ec4;&#x4ef6;&#xff08;&#x5982;&#x8f74;&#x3001;&#x56fe;&#x4f8b;&#x3001;&#x5de5;&#x5177;&#x63d0;&#x793a;&#x7b49;&#xff09;&#x6765;&#x6784;&#x5efa;&#x81ea;&#x5b9a;&#x4e49;&#x56fe;&#x8868;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x6781;&#x9ad8;&#x7684;&#x7075;&#x6d3b;&#x6027;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1043,1044" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x9ad8;&#x6027;&#x80fd;&#x6e32;&#x67d3;&#xff1a;</strong> Nivo &#x63d0;&#x4f9b; SVG&#x3001;HTML &#x548c; Canvas &#x4e09;&#x79cd;&#x6e32;&#x67d3;&#x6a21;&#x5f0f;&#xff0c;&#x5e76;&#x652f;&#x6301;&#x670d;&#x52a1;&#x7aef;&#x6e32;&#x67d3;&#xff0c;&#x4ee5;&#x786e;&#x4fdd;&#x5728;&#x4e0d;&#x540c;&#x573a;&#x666f;&#x4e0b;&#x90fd;&#x80fd;&#x83b7;&#x5f97;&#x51fa;&#x8272;&#x7684;&#x6027;&#x80fd;&#x8868;&#x73b0;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1044,1046" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "1039,1040" },
+                            },
+                            {
+                              content:
+                                "<strong>Tremor&#xff1a;&#x4e13;&#x6ce8;&#x4e8e;&#x4eea;&#x8868;&#x76d8;&#x7684; React &#x7ec4;&#x4ef6;&#x96c6;</strong>",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x4eea;&#x8868;&#x76d8;&#x4f18;&#x5148;&#xff1a;</strong> Tremor &#x4e0d;&#x4ec5;&#x63d0;&#x4f9b;&#x57fa;&#x7840;&#x56fe;&#x8868;&#xff08;&#x5982;&#x9762;&#x79ef;&#x56fe;&#x3001;&#x6761;&#x5f62;&#x56fe;&#xff09;&#xff0c;&#x66f4;&#x63d0;&#x4f9b;&#x4e86; KPI Cards&#x3001;Data Bars&#x3001;Tracker &#x7b49;&#x4eea;&#x8868;&#x76d8;&#x4e13;&#x5c5e; UI&#xff0c;&#x6781;&#x5927;&#x5730;&#x7b80;&#x5316;&#x4e86;&#x6570;&#x636e;&#x5e94;&#x7528;&#x7684;&#x5f00;&#x53d1;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1050,1051" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x73b0;&#x4ee3;&#x5316;&#x6280;&#x672f;&#x6808;&#xff1a;</strong> &#x57fa;&#x4e8e; React&#x3001;Tailwind CSS &#x548c; Radix UI &#x6784;&#x5efa;&#xff0c;&#x62e5;&#x6709;&#x9ad8;&#x5ea6;&#x53ef;&#x5b9a;&#x5236;&#x6027;&#xff0c;&#x5e76;&#x81ea;&#x5e26; light/dark mode&#xff0c;&#x4f7f;&#x5176;&#x5728;&#x89c6;&#x89c9;&#x4e0a;&#x975e;&#x5e38;&#x73b0;&#x4ee3;&#x5316;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1051,1052" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x4e30;&#x5bcc;&#x7684;&#x6a21;&#x677f;&#x4e0e; UI Block&#xff1a;</strong> &#x63d0;&#x4f9b;&#x4e86;&#x8d85;&#x8fc7; 300 &#x4e2a;&#x9884;&#x6784;&#x5efa;&#x7684; UI blocks &#x548c;&#x591a;&#x4e2a;&#x751f;&#x4ea7;&#x7ea7;&#x6a21;&#x677f;&#xff0c;&#x8986;&#x76d6;&#x4e86;&#x4ece;&#x4eea;&#x8868;&#x76d8;&#x5230;&#x8425;&#x9500;&#x7f51;&#x7ad9;&#x7b49;&#x591a;&#x79cd;&#x5e94;&#x7528;&#x573a;&#x666f;&#xff0c;&#x52a0;&#x901f;&#x4e86;&#x5f00;&#x53d1;&#x6d41;&#x7a0b;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1052,1054" },
+                                },
+                              ],
+                              payload: { tag: "h6", lines: "1046,1047" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1029,1030" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1021,1022" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x8de8;&#x7ef4;&#x5ea6;&#x6bd4;&#x8f83;&#x4e0e;&#x7efc;&#x5408;&#x8bc4;&#x4f30;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x8868;&#x683c;&#x4e00;&#xff1a;&#x4e3b;&#x6d41;&#x6846;&#x67b6; UI &#x7ec4;&#x4ef6;&#x5e93;&#x529f;&#x80fd;&#x4e0e;&#x7279;&#x6027;&#x5bf9;&#x6bd4;</strong>",
+                          children: [
+                            {
+                              content:
+                                '<table data-lines="1062,1073">\n<thead data-lines="1062,1063">\n<tr data-lines="1062,1063">\n<th style="text-align:left">&#x5e93;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x6240;&#x5c5e;&#x6846;&#x67b6;</th>\n<th style="text-align:left">&#x8bbe;&#x8ba1;&#x98ce;&#x683c;/&#x7406;&#x5ff5;</th>\n<th style="text-align:left">&#x65e0;&#x969c;&#x788d;&#x652f;&#x6301;</th>\n<th style="text-align:left">&#x5b9a;&#x5236;&#x5316;&#x6a21;&#x5f0f;</th>\n<th style="text-align:left">&#x4e3b;&#x8981;&#x9002;&#x7528;&#x573a;&#x666f;</th>\n</tr>\n</thead>\n<tbody data-lines="1064,1073">\n<tr data-lines="1064,1065">\n<td style="text-align:left"><a href="https://mui.com/">MUI</a></td>\n<td style="text-align:left"><a href="https://react.dev/">React</a></td>\n<td style="text-align:left"><a href="https://m3.material.io/">Material Design</a></td>\n<td style="text-align:left">&#x4f18;&#x79c0;</td>\n<td style="text-align:left">CSS-in-JS, &#x5f3a;&#x5927;&#x4e3b;&#x9898;&#x7cfb;&#x7edf;</td>\n<td style="text-align:left">&#x901a;&#x7528; Web &#x5e94;&#x7528;&#xff0c;&#x5185;&#x90e8;&#x5de5;&#x5177;</td>\n</tr>\n<tr data-lines="1065,1066">\n<td style="text-align:left"><a href="https://ant.design/">Ant Design</a></td>\n<td style="text-align:left"><a href="https://react.dev/">React</a></td>\n<td style="text-align:left"><a href="https://ant.design/">Ant Design</a></td>\n<td style="text-align:left">&#x4f18;&#x79c0;</td>\n<td style="text-align:left"><a href="https://lesscss.org/">Less</a>/CSS &#x53d8;&#x91cf;&#xff0c;&#x4e3b;&#x9898;&#x5b9a;&#x5236;</td>\n<td style="text-align:left">&#x4f01;&#x4e1a;&#x7ea7;&#x4e2d;&#x540e;&#x53f0;&#xff0c;&#x7ba1;&#x7406;&#x7cfb;&#x7edf;</td>\n</tr>\n<tr data-lines="1066,1067">\n<td style="text-align:left"><a href="https://chakra-ui.com/">Chakra UI</a></td>\n<td style="text-align:left"><a href="https://react.dev/">React</a></td>\n<td style="text-align:left">&#x5b9e;&#x7528;&#x81f3;&#x4e0a;/&#x65e0;&#x969c;&#x788d;</td>\n<td style="text-align:left">&#x6838;&#x5fc3;&#x8bbe;&#x8ba1;&#x539f;&#x5219;</td>\n<td style="text-align:left">Style Props, &#x4e3b;&#x9898;&#x7cfb;&#x7edf;</td>\n<td style="text-align:left">&#x901a;&#x7528; Web &#x5e94;&#x7528;&#xff0c;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;</td>\n</tr>\n<tr data-lines="1067,1068">\n<td style="text-align:left"><a href="https://vuetifyjs.com/">Vuetify</a></td>\n<td style="text-align:left"><a href="https://vuejs.org/">Vue</a></td>\n<td style="text-align:left"><a href="https://m3.material.io/">Material Design</a></td>\n<td style="text-align:left">&#x4f18;&#x79c0;</td>\n<td style="text-align:left"><a href="https://sass-lang.com/">Sass</a>/CSS &#x53d8;&#x91cf;&#xff0c;&#x9884;&#x8bbe;&#x4e3b;&#x9898;</td>\n<td style="text-align:left">&#x901a;&#x7528; Web &#x5e94;&#x7528;&#xff0c;Web &#x5e94;&#x7528;</td>\n</tr>\n<tr data-lines="1068,1069">\n<td style="text-align:left"><a href="https://element-plus.org/">Element Plus</a></td>\n<td style="text-align:left"><a href="https://vuejs.org/">Vue</a></td>\n<td style="text-align:left">Element Design</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left"><a href="https://getbem.com/">BEM</a>-styled CSS, Sass &#x53d8;&#x91cf;</td>\n<td style="text-align:left">&#x4f01;&#x4e1a;&#x7ea7;&#x4e2d;&#x540e;&#x53f0;&#xff0c;&#x7ba1;&#x7406;&#x7cfb;&#x7edf;</td>\n</tr>\n<tr data-lines="1069,1070">\n<td style="text-align:left"><a href="https://quasar.dev/">Quasar</a></td>\n<td style="text-align:left"><a href="https://vuejs.org/">Vue</a></td>\n<td style="text-align:left"><a href="https://m3.material.io/">Material Design</a></td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left"><a href="https://sass-lang.com/">Sass</a>/CSS &#x53d8;&#x91cf;&#xff0c;&#x4e3b;&#x9898;&#x5b9a;&#x5236;</td>\n<td style="text-align:left">&#x591a;&#x7aef;&#xff08;Web, Mobile, Desktop&#xff09;</td>\n</tr>\n<tr data-lines="1070,1071">\n<td style="text-align:left"><a href="https://material.angular.io/">Angular Material</a></td>\n<td style="text-align:left"><a href="https://angular.dev/">Angular</a></td>\n<td style="text-align:left"><a href="https://m3.material.io/">Material Design</a></td>\n<td style="text-align:left">&#x4f18;&#x79c0;</td>\n<td style="text-align:left"><a href="https://sass-lang.com/">Sass</a> &#x53d8;&#x91cf;&#xff0c;&#x4e3b;&#x9898;&#x5b9a;&#x5236;</td>\n<td style="text-align:left">&#x901a;&#x7528; Web &#x5e94;&#x7528;&#xff0c;Google &#x5b98;&#x65b9;</td>\n</tr>\n<tr data-lines="1071,1072">\n<td style="text-align:left"><a href="https://primeng.org/">PrimeNG</a></td>\n<td style="text-align:left"><a href="https://angular.dev/">Angular</a></td>\n<td style="text-align:left">&#x8bbe;&#x8ba1;&#x65e0;&#x5173;</td>\n<td style="text-align:left">&#x4f18;&#x79c0;</td>\n<td style="text-align:left">&#x4e3b;&#x9898;&#x8bbe;&#x8ba1;&#x5e08;&#xff0c;CSS &#x53d8;&#x91cf;</td>\n<td style="text-align:left">&#x4f01;&#x4e1a;&#x7ea7;&#x5e94;&#x7528;&#xff0c;&#x590d;&#x6742;&#x754c;&#x9762;</td>\n</tr>\n<tr data-lines="1072,1073">\n<td style="text-align:left"><a href="https://ng.ant.design/">NG-ZORRO</a></td>\n<td style="text-align:left"><a href="https://angular.dev/">Angular</a></td>\n<td style="text-align:left"><a href="https://ant.design/">Ant Design</a></td>\n<td style="text-align:left">&#x4f18;&#x79c0;</td>\n<td style="text-align:left">CSS &#x53d8;&#x91cf;&#xff0c;&#x4e3b;&#x9898;&#x5b9a;&#x5236;</td>\n<td style="text-align:left">&#x4f01;&#x4e1a;&#x7ea7;&#x4e2d;&#x540e;&#x53f0;&#xff0c;&#x7ba1;&#x7406;&#x7cfb;&#x7edf;</td>\n</tr>\n</tbody>\n</table>',
+                              children: [],
+                              payload: { tag: "table", lines: "1062,1073" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1058,1059" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x8868;&#x683c;&#x4e8c;&#xff1a;&#x7ec4;&#x4ef6;&#x5e93;&#x7684;&#x6280;&#x672f;&#x7279;&#x70b9;&#x4e0e;&#x65b0;&#x5174;&#x8d8b;&#x52bf;&#x5bf9;&#x6bd4;</strong>",
+                          children: [
+                            {
+                              content:
+                                '<table data-lines="1078,1086">\n<thead data-lines="1078,1079">\n<tr data-lines="1078,1079">\n<th style="text-align:left">&#x5e93;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x7ec4;&#x4ef6;&#x6a21;&#x5f0f;</th>\n<th style="text-align:left">&#x6838;&#x5fc3;&#x6280;&#x672f;&#x6808;</th>\n<th style="text-align:left">&#x4ee3;&#x7801;&#x6240;&#x6709;&#x6743;</th>\n<th style="text-align:left">&#x5b9a;&#x5236;&#x5316;&#x7a0b;&#x5ea6;</th>\n<th style="text-align:left">&#x4f9d;&#x8d56;&#x7ba1;&#x7406;</th>\n<th style="text-align:left">&#x4e3b;&#x8981;&#x4f18;&#x52bf;</th>\n</tr>\n</thead>\n<tbody data-lines="1080,1086">\n<tr data-lines="1080,1081">\n<td style="text-align:left"><a href="https://ui.shadcn.com/">shadcn/ui</a></td>\n<td style="text-align:left">&#x975e;&#x5e93;&#x6a21;&#x5f0f;</td>\n<td style="text-align:left"><a href="https://react.dev/">React</a>, <a href="https://tailwindcss.com/">Tailwind CSS</a>, <a href="https://www.radix-ui.com/">Radix UI</a></td>\n<td style="text-align:left">&#x5f00;&#x53d1;&#x8005;&#x5b8c;&#x5168;&#x62e5;&#x6709;</td>\n<td style="text-align:left">&#x6781;&#x9ad8;</td>\n<td style="text-align:left">&#x65e0;&#xff08;&#x4ee3;&#x7801;&#x76f4;&#x63a5;&#x590d;&#x5236;&#xff09;</td>\n<td style="text-align:left">&#x6781;&#x81f4;&#x7075;&#x6d3b;&#x6027;&#xff0c;&#x65e0;&#x4f9d;&#x8d56;&#x9501;&#x5b9a;</td>\n</tr>\n<tr data-lines="1081,1082">\n<td style="text-align:left"><a href="https://www.radix-ui.com/">Radix UI</a></td>\n<td style="text-align:left">&#x65e0;&#x5934;&#x5e93;</td>\n<td style="text-align:left"><a href="https://react.dev/">React</a></td>\n<td style="text-align:left">&#x5f00;&#x53d1;&#x8005;&#x62e5;&#x6709;&#xff08;&#x4f46;&#x9700;&#x5b89;&#x88c5;&#x5e93;&#xff09;</td>\n<td style="text-align:left">&#x6781;&#x9ad8;&#xff08;&#x9700;&#x81ea;&#x884c;&#x5b9e;&#x73b0;&#x6837;&#x5f0f;&#xff09;</td>\n<td style="text-align:left">&#x6709;</td>\n<td style="text-align:left">&#x4e13;&#x6ce8;&#x4e8e;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#x548c;&#x903b;&#x8f91;</td>\n</tr>\n<tr data-lines="1082,1083">\n<td style="text-align:left"><a href="https://headlessui.com/">Headless UI</a></td>\n<td style="text-align:left">&#x65e0;&#x5934;&#x5e93;</td>\n<td style="text-align:left"><a href="https://react.dev/">React</a>, <a href="https://vuejs.org/">Vue</a></td>\n<td style="text-align:left">&#x5f00;&#x53d1;&#x8005;&#x62e5;&#x6709;&#xff08;&#x4f46;&#x9700;&#x5b89;&#x88c5;&#x5e93;&#xff09;</td>\n<td style="text-align:left">&#x6781;&#x9ad8;&#xff08;&#x9700;&#x81ea;&#x884c;&#x5b9e;&#x73b0;&#x6837;&#x5f0f;&#xff09;</td>\n<td style="text-align:left">&#x6709;</td>\n<td style="text-align:left">&#x4e0e; <a href="https://tailwindcss.com/">Tailwind CSS</a> &#x5b8c;&#x7f8e;&#x96c6;&#x6210;</td>\n</tr>\n<tr data-lines="1083,1084">\n<td style="text-align:left"><a href="https://www.tremor.so/">Tremor</a></td>\n<td style="text-align:left">&#x4e13;&#x7528;&#x7ec4;&#x4ef6;&#x5e93;</td>\n<td style="text-align:left"><a href="https://react.dev/">React</a>, <a href="https://tailwindcss.com/">Tailwind CSS</a>, <a href="https://www.radix-ui.com/">Radix UI</a></td>\n<td style="text-align:left">&#x5f00;&#x53d1;&#x8005;&#x90e8;&#x5206;&#x62e5;&#x6709;</td>\n<td style="text-align:left">&#x9ad8;</td>\n<td style="text-align:left">&#x6709;</td>\n<td style="text-align:left">&#x4e13;&#x4e3a;&#x6570;&#x636e;&#x4eea;&#x8868;&#x76d8;&#xff0c;&#x73b0;&#x4ee3;&#x5316;&#x6280;&#x672f;&#x6808;</td>\n</tr>\n<tr data-lines="1084,1085">\n<td style="text-align:left"><a href="https://mui.com/">MUI</a></td>\n<td style="text-align:left">&#x4f20;&#x7edf;&#x5e93;</td>\n<td style="text-align:left"><a href="https://react.dev/">React</a>, <a href="https://emotion.sh/">Emotion</a>/<a href="https://styled-components.com/">styled-components</a></td>\n<td style="text-align:left">&#x65e0;&#xff08;&#x4f5c;&#x4e3a; <a href="https://www.npmjs.com/">npm</a> &#x4f9d;&#x8d56;&#xff09;</td>\n<td style="text-align:left">&#x4e2d;&#x9ad8;&#xff08;&#x901a;&#x8fc7;&#x4e3b;&#x9898;&#x548c;&#x6837;&#x5f0f;&#x91cd;&#x5199;&#xff09;</td>\n<td style="text-align:left">&#x6709;</td>\n<td style="text-align:left">&#x5f00;&#x7bb1;&#x5373;&#x7528;&#xff0c;&#x751f;&#x6001;&#x5b8c;&#x6574;&#xff0c;&#x6587;&#x6863;&#x5b8c;&#x5584;</td>\n</tr>\n<tr data-lines="1085,1086">\n<td style="text-align:left"><a href="https://ant.design/">Ant Design</a></td>\n<td style="text-align:left">&#x4f20;&#x7edf;&#x5e93;</td>\n<td style="text-align:left"><a href="https://react.dev/">React</a>, <a href="https://lesscss.org/">Less</a></td>\n<td style="text-align:left">&#x65e0;&#xff08;&#x4f5c;&#x4e3a; <a href="https://www.npmjs.com/">npm</a> &#x4f9d;&#x8d56;&#xff09;</td>\n<td style="text-align:left">&#x4e2d;&#x9ad8;&#xff08;&#x901a;&#x8fc7;&#x4e3b;&#x9898;&#x548c; CSS &#x53d8;&#x91cf;&#xff09;</td>\n<td style="text-align:left">&#x6709;</td>\n<td style="text-align:left">&#x4f01;&#x4e1a;&#x7ea7;&#x7ec4;&#x4ef6;&#x4e30;&#x5bcc;&#xff0c;&#x8bbe;&#x8ba1;&#x89c4;&#x8303;</td>\n</tr>\n</tbody>\n</table>',
+                              children: [],
+                              payload: { tag: "table", lines: "1078,1086" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1074,1075" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1054,1055" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x7ec4;&#x4ef6;&#x5e93;&#x9009;&#x578b;&#x5efa;&#x8bae;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>5.1 &#x603b;&#x7ed3;&#xff1a;&#x4ece;&#x5927;&#x4e00;&#x7edf;&#x5230;&#x767e;&#x82b1;&#x9f50;&#x653e;&#x7684;&#x7ec4;&#x4ef6;&#x5e93;&#x751f;&#x6001;</strong>",
+                          children: [],
+                          payload: { tag: "h5", lines: "1091,1092" },
+                        },
+                        {
+                          content:
+                            "<strong>5.2 &#x9488;&#x5bf9;&#x4e0d;&#x540c;&#x9879;&#x76ee;&#x4e0e;&#x56e2;&#x961f;&#x7684;&#x9009;&#x578b;&#x5efa;&#x8bae;</strong>",
+                          children: [
+                            {
+                              content:
+                                '<strong>&#x5feb;&#x901f;&#x539f;&#x578b;&#x5f00;&#x53d1;&#x6216;&#x5c0f;&#x578b;&#x9879;&#x76ee;&#xff1a;</strong> &#x63a8;&#x8350;&#x4f7f;&#x7528;<strong>&#x5f00;&#x7bb1;&#x5373;&#x7528;</strong>&#x3001;<strong>&#x8bbe;&#x8ba1;&#x7f8e;&#x89c2;</strong>&#x4e14;<strong>&#x6587;&#x6863;&#x5b8c;&#x5584;</strong>&#x7684;&#x201c;&#x6709;&#x89c2;&#x70b9;&#x201d;&#x7ec4;&#x4ef6;&#x5e93;&#xff0c;&#x5982; <a href="https://mui.com/">MUI</a>&#x3001;<a href="https://vuetifyjs.com/">Vuetify</a> &#x6216; <a href="https://element-plus.org/">Element Plus</a>&#x3002;&#x8fd9;&#x4e9b;&#x5e93;&#x80fd;&#x6700;&#x5927;&#x5316;&#x5f00;&#x53d1;&#x6548;&#x7387;&#xff0c;&#x8ba9;&#x56e2;&#x961f;&#x5feb;&#x901f;&#x5c06;&#x60f3;&#x6cd5;&#x53d8;&#x4e3a;&#x73b0;&#x5b9e;&#xff0c;&#x800c;&#x65e0;&#x9700;&#x6295;&#x5165;&#x8fc7;&#x591a;&#x65f6;&#x95f4;&#x5728;&#x6837;&#x5f0f;&#x8bbe;&#x8ba1;&#x548c;&#x5b9a;&#x5236;&#x4e0a;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1099,1100" },
+                            },
+                            {
+                              content:
+                                '<strong>&#x4f01;&#x4e1a;&#x7ea7;&#x4e2d;&#x540e;&#x53f0;&#x5e94;&#x7528;&#xff1a;</strong> &#x5efa;&#x8bae;&#x4f18;&#x5148;&#x8003;&#x8651; <a href="https://ant.design/">Ant Design</a>&#x3001;<a href="https://ng.ant.design/">NG-ZORRO</a> &#x6216; <a href="https://primeng.org/">PrimeNG</a>&#x3002;&#x8fd9;&#x4e9b;&#x5e93;&#x63d0;&#x4f9b;&#x4e86;&#x5168;&#x9762;&#x7684;&#x4f01;&#x4e1a;&#x7ea7;&#x7ec4;&#x4ef6;&#xff0c;&#x5c24;&#x5176;&#x5728;&#x6570;&#x636e;&#x5904;&#x7406;&#x3001;&#x8868;&#x5355;&#x3001;&#x8868;&#x683c;&#x548c;&#x56fd;&#x9645;&#x5316;&#x65b9;&#x9762;&#x529f;&#x80fd;&#x5f3a;&#x5927;&#xff0c;&#x5e76;&#x901a;&#x5e38;&#x63d0;&#x4f9b;&#x5546;&#x4e1a;&#x652f;&#x6301;&#xff0c;&#x4e3a;&#x5173;&#x952e;&#x4e1a;&#x52a1;&#x5e94;&#x7528;&#x63d0;&#x4f9b;&#x4e86;&#x53ef;&#x9760;&#x4fdd;&#x969c;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1100,1101" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x9ad8;&#x5ea6;&#x5b9a;&#x5236;&#x5316;&#x54c1;&#x724c;&#x5b98;&#x7f51;&#x6216;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff1a;</strong> <strong>shadcn/ui</strong>&#x3001;<strong>Radix UI</strong>&#x4e0e; Tailwind CSS &#x7684;&#x7ec4;&#x5408;&#x662f;&#x7406;&#x60f3;&#x9009;&#x62e9;&#x3002;&#x8fd9;&#x79cd;&#x6a21;&#x5f0f;&#x63d0;&#x4f9b;&#x4e86;&#x6781;&#x81f4;&#x7684;&#x7075;&#x6d3b;&#x6027;&#x548c;&#x4ee3;&#x7801;&#x6240;&#x6709;&#x6743;&#xff0c;&#x5141;&#x8bb8;&#x56e2;&#x961f;&#x5b8c;&#x5168;&#x638c;&#x63a7;&#x7ec4;&#x4ef6;&#x7684;&#x5916;&#x89c2;&#x4e0e;&#x884c;&#x4e3a;&#xff0c;&#x4ece;&#x96f6;&#x5f00;&#x59cb;&#x6784;&#x5efa;&#x7b26;&#x5408;&#x54c1;&#x724c;&#x8c03;&#x6027;&#x7684;&#x72ec;&#x7279;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#xff0c;&#x800c;&#x4e0d;&#x4f1a;&#x53d7;&#x5230;&#x5e93;&#x7684;&#x4f9d;&#x8d56;&#x675f;&#x7f1a;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1101,1102" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x6570;&#x636e;&#x9a71;&#x52a8;&#x578b;&#x5e94;&#x7528;&#x6216;&#x4eea;&#x8868;&#x76d8;&#xff1a;</strong> &#x63a8;&#x8350;&#x91c7;&#x7528;<strong>&#x901a;&#x7528;&#x7ec4;&#x4ef6;&#x5e93; + &#x4e13;&#x4e1a;&#x56fe;&#x8868;&#x5e93;</strong>&#x7684;&#x6df7;&#x5408;&#x6a21;&#x5f0f;&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x4f7f;&#x7528; Chakra UI &#x6784;&#x5efa;&#x57fa;&#x7840;&#x754c;&#x9762;&#xff0c;&#x540c;&#x65f6;&#x96c6;&#x6210; Tremor &#x6216; Highcharts &#x6765;&#x5904;&#x7406;&#x590d;&#x6742;&#x7684;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x90e8;&#x5206;&#x3002;&#x8fd9;&#x79cd;&#x7ec4;&#x5408;&#x65e2;&#x80fd;&#x4eab;&#x53d7;&#x901a;&#x7528;&#x5e93;&#x7684;&#x9ad8;&#x6548;&#xff0c;&#x53c8;&#x80fd;&#x5229;&#x7528;&#x4e13;&#x7528;&#x5e93;&#x5728;&#x4e13;&#x4e1a;&#x9886;&#x57df;&#x7684;&#x5f3a;&#x5927;&#x529f;&#x80fd;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1102,1103" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x591a;&#x7aef;&#x90e8;&#x7f72;&#x9700;&#x6c42;&#xff1a;</strong> Quasar Framework &#x4ee5;&#x5176;<strong>&#x4e00;&#x5957;&#x4ee3;&#x7801;&#xff0c;&#x591a;&#x7aef;&#x90e8;&#x7f72;</strong>&#x7684;&#x72ec;&#x7279;&#x5b9a;&#x4f4d;&#xff0c;&#x6210;&#x4e3a;&#x9700;&#x8981;&#x540c;&#x65f6;&#x6784;&#x5efa; Web&#x3001;&#x79fb;&#x52a8;&#x548c;&#x684c;&#x9762;&#x5e94;&#x7528;&#x7684;&#x56e2;&#x961f;&#x7684;&#x5f3a;&#x5927;&#x9009;&#x62e9;&#x3002;&#x5b83;&#x80fd;&#x663e;&#x8457;&#x964d;&#x4f4e;&#x8de8;&#x5e73;&#x53f0;&#x5f00;&#x53d1;&#x7684;&#x590d;&#x6742;&#x6027;&#xff0c;&#x5e76;&#x7edf;&#x4e00;&#x6280;&#x672f;&#x6808;&#xff0c;&#x5b9e;&#x73b0;&#x8d44;&#x6e90;&#x7684;&#x6700;&#x5927;&#x5316;&#x5229;&#x7528;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1103,1105" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1095,1096" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1089,1090" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "868,869" },
+                },
+                {
+                  content:
+                    "<strong>&#x5143;&#x6846;&#x67b6;&#xff1a;&#x589e;&#x5f3a;&#x5f00;&#x53d1;&#x4f53;&#x9a8c;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;&#x9886;&#x5148;&#x5143;&#x6846;&#x67b6;&#x6bd4;&#x8f83;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="1119,1125">\n<thead data-lines="1119,1120">\n<tr data-lines="1119,1120">\n<th style="text-align:left">&#x6846;&#x67b6;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x5e95;&#x5c42; UI &#x6846;&#x67b6;</th>\n<th style="text-align:left">&#x4e3b;&#x8981;&#x6e32;&#x67d3;&#x7b56;&#x7565;</th>\n<th style="text-align:left">&#x6570;&#x636e;&#x83b7;&#x53d6;&#x6a21;&#x578b;</th>\n<th style="text-align:left">&#x6027;&#x80fd;&#x5173;&#x6ce8;&#x70b9;</th>\n<th style="text-align:left">&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;</th>\n<th style="text-align:left">&#x7406;&#x60f3;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="1121,1125">\n<tr data-lines="1121,1122">\n<td style="text-align:left"><a href="https://nextjs.org/"><strong>Next.js</strong></a></td>\n<td style="text-align:left"><a href="https://react.dev/">React</a></td>\n<td style="text-align:left">SSR, SSG, ISR, &#x6df7;&#x5408;</td>\n<td style="text-align:left">&#x591a;&#x79cd;&#x7b56;&#x7565;&#xff0c;&#x7075;&#x6d3b;</td>\n<td style="text-align:left">&#x521d;&#x59cb;&#x52a0;&#x8f7d;&#xff0c;&#x6e10;&#x8fdb;&#x5f0f;&#x6d41;</td>\n<td style="text-align:left">&#x7075;&#x6d3b;&#xff0c;&#x53ef;&#x5b9a;&#x5236;</td>\n<td style="text-align:left">&#x5168;&#x6808;&#x5e94;&#x7528;&#xff0c;SEO &#x53cb;&#x597d;&#x578b;&#x7f51;&#x7ad9;&#xff0c;&#x5185;&#x5bb9;&#x7ba1;&#x7406;&#x7cfb;&#x7edf;</td>\n</tr>\n<tr data-lines="1122,1123">\n<td style="text-align:left"><a href="https://remix.run/"><strong>Remix</strong></a></td>\n<td style="text-align:left"><a href="https://react.dev/">React</a></td>\n<td style="text-align:left">SSR, &#x6e10;&#x8fdb;&#x5f0f;&#x589e;&#x5f3a;</td>\n<td style="text-align:left">&#x5355;&#x4e00; Loader &#x51fd;&#x6570;&#xff0c;&#x670d;&#x52a1;&#x5668;&#x4f18;&#x5148;</td>\n<td style="text-align:left">&#x521d;&#x59cb;&#x52a0;&#x8f7d;&#xff0c;&#x6570;&#x636e;&#x9a71;&#x52a8;</td>\n<td style="text-align:left">&#x4e00;&#x81f4;&#x6027;&#xff0c;</td>\n<td style="text-align:left">&#x52a8;&#x6001;&#x6570;&#x636e;&#x5bc6;&#x96c6;&#x578b;&#x5e94;&#x7528;&#xff0c;&#x590d;&#x6742;&#x8def;&#x7531;</td>\n</tr>\n<tr data-lines="1123,1124">\n<td style="text-align:left"><a href="https://astro.build/"><strong>Astro</strong></a></td>\n<td style="text-align:left">&#x6846;&#x67b6;&#x65e0;&#x5173;</td>\n<td style="text-align:left">Islands &#x67b6;&#x6784;&#xff0c;SSG</td>\n<td style="text-align:left">&#x4ec5;&#x52a0;&#x8f7d;&#x4ea4;&#x4e92;&#x7ec4;&#x4ef6;&#x7684; JS</td>\n<td style="text-align:left">&#x6781;&#x4f4e; JS &#x8d1f;&#x8f7d;&#xff0c;&#x5feb;&#x901f; <a href="https://web.dev/lcp/">LCP</a></td>\n<td style="text-align:left">&#x591a;&#x6846;&#x67b6;&#x652f;&#x6301;&#xff0c;&#x5185;&#x5bb9;&#x4f18;&#x5148;</td>\n<td style="text-align:left">&#x5185;&#x5bb9;&#x9a71;&#x52a8;&#x578b;&#x7f51;&#x7ad9;&#xff0c;&#x535a;&#x5ba2;&#xff0c;&#x8425;&#x9500;&#x7ad9;</td>\n</tr>\n<tr data-lines="1124,1125">\n<td style="text-align:left"><a href="https://qwik.builder.io/"><strong>Qwik</strong></a></td>\n<td style="text-align:left">&#x6846;&#x67b6;&#x65e0;&#x5173;</td>\n<td style="text-align:left">&#x53ef;&#x6062;&#x590d;&#x6027;&#xff0c;SSG/SSR</td>\n<td style="text-align:left">&#x60f0;&#x6027;&#x52a0;&#x8f7d;&#xff0c;&#x65e0;&#x9700;&#x6c34;&#x5408;</td>\n<td style="text-align:left">&#x5373;&#x65f6;&#x542f;&#x52a8;&#xff0c;&#x6781;&#x4f4e; JS &#x8d1f;&#x8f7d;</td>\n<td style="text-align:left">&#x521b;&#x65b0;&#xff0c;&#x6027;&#x80fd;&#x4f18;&#x5148;</td>\n<td style="text-align:left">&#x6027;&#x80fd;&#x5173;&#x952e;&#x578b;&#x5e94;&#x7528;&#xff0c;&#x79fb;&#x52a8;&#x7aef;&#x4f18;&#x5316;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "1119,1125" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1117,1118" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1105,1106" },
+                },
+                {
+                  content:
+                    "<strong>&#x66ff;&#x4ee3;&#x65b9;&#x6cd5;&#xff1a;htmx &#x7684;&#x8d85;&#x5a92;&#x4f53;&#x9a71;&#x52a8;&#x5f00;&#x53d1;</strong>",
+                  children: [],
+                  payload: { tag: "h3", lines: "1128,1129" },
+                },
+                {
+                  content:
+                    "<strong>&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#xff1a;&#x96c6;&#x4e2d;&#x5316;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x6570;&#x636e;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;&#x4e3b;&#x8981;&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x5e93;&#x6bd4;&#x8f83;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="1151,1159">\n<thead data-lines="1151,1152">\n<tr data-lines="1151,1152">\n<th style="text-align:left">&#x5e93;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x6846;&#x67b6;&#x517c;&#x5bb9;&#x6027;</th>\n<th style="text-align:left">&#x8bbe;&#x8ba1;&#x54f2;&#x5b66;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</th>\n<th style="text-align:left">&#x6837;&#x677f;&#x4ee3;&#x7801;</th>\n<th style="text-align:left"><a href="https://www.typescriptlang.org/">TypeScript</a> &#x652f;&#x6301;</th>\n<th style="text-align:left">&#x6027;&#x80fd;/&#x5305;&#x5927;&#x5c0f;</th>\n<th style="text-align:left">&#x7406;&#x60f3;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="1153,1159">\n<tr data-lines="1153,1154">\n<td style="text-align:left"><a href="https://redux-toolkit.js.org/"><strong>Redux Toolkit</strong></a></td>\n<td style="text-align:left"><a href="https://react.dev/">React</a></td>\n<td style="text-align:left">&#x96c6;&#x4e2d;&#x5f0f;&#x5b58;&#x50a8;&#xff0c;&#x53ef;&#x9884;&#x6d4b;&#x72b6;&#x6001;</td>\n<td style="text-align:left">&#x8f83;&#x9661;&#x5ced;</td>\n<td style="text-align:left">&#x8f83;&#x591a;</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left">&#x8f83;&#x5927;</td>\n<td style="text-align:left">&#x5927;&#x578b;&#x590d;&#x6742;&#x5e94;&#x7528;&#xff0c;&#x9700;&#x8981;&#x53ef;&#x9884;&#x6d4b;&#x72b6;&#x6001;&#x6d41;</td>\n</tr>\n<tr data-lines="1154,1155">\n<td style="text-align:left"><a href="https://zustand-demo.pmnd.rs/"><strong>Zustand</strong></a></td>\n<td style="text-align:left"><a href="https://react.dev/">React</a></td>\n<td style="text-align:left">&#x6781;&#x7b80;&#xff0c;&#x5355;&#x4e00;&#x5b58;&#x50a8;</td>\n<td style="text-align:left">&#x8f83;&#x4f4e;</td>\n<td style="text-align:left">&#x6781;&#x5c11;</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left">&#x8f83;&#x5c0f;</td>\n<td style="text-align:left">&#x4e2d;&#x5c0f;&#x578b;&#x5e94;&#x7528;&#xff0c;&#x6ce8;&#x91cd;&#x7b80;&#x5355;&#x548c;&#x6027;&#x80fd;</td>\n</tr>\n<tr data-lines="1155,1156">\n<td style="text-align:left"><a href="https://recoiljs.org/"><strong>Recoil</strong></a></td>\n<td style="text-align:left"><a href="https://react.dev/">React</a></td>\n<td style="text-align:left">&#x539f;&#x5b50;&#xff0c;&#x6d3e;&#x751f;&#x72b6;&#x6001;</td>\n<td style="text-align:left">&#x4e2d;&#x7b49;</td>\n<td style="text-align:left">&#x4e2d;&#x7b49;</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left">&#x8f83;&#x5c0f;</td>\n<td style="text-align:left">&#x590d;&#x6742;&#x72b6;&#x6001;&#x4f9d;&#x8d56;&#xff0c;&#x5e76;&#x53d1;&#x7279;&#x6027;&#x96c6;&#x6210;</td>\n</tr>\n<tr data-lines="1156,1157">\n<td style="text-align:left"><a href="https://jotai.org/"><strong>Jotai</strong></a></td>\n<td style="text-align:left"><a href="https://react.dev/">React</a></td>\n<td style="text-align:left">&#x539f;&#x5b50;&#xff0c;&#x81ea;&#x4e0b;&#x800c;&#x4e0a;</td>\n<td style="text-align:left">&#x8f83;&#x5e73;&#x7f13;</td>\n<td style="text-align:left">&#x6781;&#x5c11;</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left">&#x6781;&#x5c0f;</td>\n<td style="text-align:left">&#x7ec6;&#x7c92;&#x5ea6;&#x72b6;&#x6001;&#x63a7;&#x5236;&#xff0c;&#x4ee3;&#x7801;&#x5206;&#x5272;&#xff0c;Suspense</td>\n</tr>\n<tr data-lines="1157,1158">\n<td style="text-align:left"><a href="https://pinia.vuejs.org/"><strong>Pinia</strong></a></td>\n<td style="text-align:left"><a href="https://vuejs.org/">Vue</a></td>\n<td style="text-align:left">&#x6a21;&#x5757;&#x5316;&#xff0c;&#x65e0; Mutations</td>\n<td style="text-align:left">&#x8f83;&#x4f4e;</td>\n<td style="text-align:left">&#x6781;&#x5c11;</td>\n<td style="text-align:left">&#x4f18;&#x79c0;</td>\n<td style="text-align:left">&#x8f83;&#x5c0f;</td>\n<td style="text-align:left">&#x65b0;&#x7684; <a href="https://vuejs.org/">Vue</a> 3 &#x9879;&#x76ee;&#xff0c;&#x6ce8;&#x91cd;&#x7b80;&#x5355;&#x548c; <a href="https://www.typescriptlang.org/">TypeScript</a></td>\n</tr>\n<tr data-lines="1158,1159">\n<td style="text-align:left"><a href="https://vuex.vuejs.org/"><strong>Vuex</strong></a></td>\n<td style="text-align:left"><a href="https://vuejs.org/">Vue</a></td>\n<td style="text-align:left">&#x96c6;&#x4e2d;&#x5f0f;&#x5b58;&#x50a8;&#xff0c;&#x4e25;&#x683c;&#x7ed3;&#x6784;</td>\n<td style="text-align:left">&#x4e2d;&#x7b49;</td>\n<td style="text-align:left">&#x8f83;&#x591a;</td>\n<td style="text-align:left">&#x8f83;&#x5f31;</td>\n<td style="text-align:left">&#x8f83;&#x5927;</td>\n<td style="text-align:left">&#x9057;&#x7559; <a href="https://vuejs.org/">Vue</a> 2 &#x9879;&#x76ee;&#xff0c;&#x9700;&#x8981;&#x4e25;&#x683c;&#x67b6;&#x6784;&#x7684;&#x5927;&#x578b;&#x5e94;&#x7528;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "1151,1159" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1149,1150" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1136,1137" },
+                },
+                {
+                  content:
+                    "<strong>&#x6570;&#x636e;&#x83b7;&#x53d6;&#x548c;&#x7f13;&#x5b58;&#x5e93;&#xff1a;SWR&#x3001;TanStack Query&#x3001;Axios&#x3001;Fetch API</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;&#x6570;&#x636e;&#x83b7;&#x53d6;&#x548c;&#x7f13;&#x5b58;&#x5e93;&#x6bd4;&#x8f83;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="1175,1181">\n<thead data-lines="1175,1176">\n<tr data-lines="1175,1176">\n<th style="text-align:left">&#x5e93;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x7c7b;&#x578b;</th>\n<th style="text-align:left">&#x6838;&#x5fc3;&#x7b56;&#x7565;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x7f13;&#x5b58;&#x63a7;&#x5236;</th>\n<th style="text-align:left">API &#x7b80;&#x6d01;&#x6027;</th>\n<th style="text-align:left">DevTools</th>\n<th style="text-align:left">&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="1177,1181">\n<tr data-lines="1177,1178">\n<td style="text-align:left"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API"><strong>Fetch API</strong></a></td>\n<td style="text-align:left"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> &#x5ba2;&#x6237;&#x7aef;</td>\n<td style="text-align:left">&#x539f;&#x751f;&#x6d4f;&#x89c8;&#x5668; API&#xff0c;Promise-based</td>\n<td style="text-align:left">&#x65e0;&#x5185;&#x7f6e;&#x7f13;&#x5b58;</td>\n<td style="text-align:left">&#x7b80;&#x6d01;</td>\n<td style="text-align:left">&#x6d4f;&#x89c8;&#x5668;&#x5185;&#x7f6e;</td>\n<td style="text-align:left">&#x57fa;&#x672c; <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> &#x8bf7;&#x6c42;&#xff0c;&#x8f7b;&#x91cf;&#x7ea7;&#x6570;&#x636e;&#x4ea4;&#x4e92;</td>\n</tr>\n<tr data-lines="1178,1179">\n<td style="text-align:left"><a href="https://axios-http.com/"><strong>Axios</strong></a></td>\n<td style="text-align:left"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> &#x5ba2;&#x6237;&#x7aef;</td>\n<td style="text-align:left">Promise-based&#xff0c;&#x62e6;&#x622a;&#x5668;</td>\n<td style="text-align:left">&#x65e0;&#x5185;&#x7f6e;&#x7f13;&#x5b58;</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left">&#x6d4f;&#x89c8;&#x5668;&#x5185;&#x7f6e;</td>\n<td style="text-align:left">&#x590d;&#x6742; <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> &#x8bf7;&#x6c42;&#xff0c;<a href="https://nodejs.org/">Node.js</a> &#x548c;&#x6d4f;&#x89c8;&#x5668;&#x901a;&#x7528;</td>\n</tr>\n<tr data-lines="1179,1180">\n<td style="text-align:left"><a href="https://swr.vercel.app/"><strong>SWR</strong></a></td>\n<td style="text-align:left">&#x670d;&#x52a1;&#x5668;&#x72b6;&#x6001;&#x7ba1;&#x7406;</td>\n<td style="text-align:left">Stale-while-revalidate</td>\n<td style="text-align:left">&#x81ea;&#x52a8;&#x7f13;&#x5b58;&#xff0c;&#x540e;&#x53f0;&#x91cd;&#x65b0;&#x9a8c;&#x8bc1;</td>\n<td style="text-align:left">&#x6781;&#x7b80;</td>\n<td style="text-align:left">&#x65e0;&#x5185;&#x7f6e;</td>\n<td style="text-align:left">&#x7b80;&#x5355;&#x6570;&#x636e;&#x83b7;&#x53d6;&#x548c;&#x7f13;&#x5b58;&#xff0c;&#x5feb;&#x901f;&#x66f4;&#x65b0;&#x611f;&#x77e5;</td>\n</tr>\n<tr data-lines="1180,1181">\n<td style="text-align:left"><a href="https://tanstack.com/query/latest"><strong>TanStack Query</strong></a></td>\n<td style="text-align:left">&#x670d;&#x52a1;&#x5668;&#x72b6;&#x6001;&#x7ba1;&#x7406;</td>\n<td style="text-align:left">&#x7efc;&#x5408;&#x6570;&#x636e;&#x7ba1;&#x7406;</td>\n<td style="text-align:left">&#x7ec6;&#x7c92;&#x5ea6;&#x63a7;&#x5236;&#xff0c;&#x5783;&#x573e;&#x56de;&#x6536;</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left">&#x5185;&#x7f6e;</td>\n<td style="text-align:left">&#x590d;&#x6742;&#x6570;&#x636e;&#x7ba1;&#x7406;&#xff0c;&#x9ad8;&#x7ea7;&#x7f13;&#x5b58;&#xff0c;&#x4e50;&#x89c2;&#x66f4;&#x65b0;&#xff0c;&#x6027;&#x80fd;&#x4f18;&#x5316;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "1175,1181" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1173,1174" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1162,1163" },
+                },
+                {
+                  content:
+                    "<strong>&#x7406;&#x89e3;&#x670d;&#x52a1;&#x5668;&#x72b6;&#x6001;&#x4e0e;&#x5ba2;&#x6237;&#x7aef;&#x72b6;&#x6001;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x5ba2;&#x6237;&#x7aef;&#x72b6;&#x6001;</strong>&#xff1a;&#x4ec5;&#x5b58;&#x5728;&#x5e76;&#x7ba1;&#x7406;&#x4e8e;&#x5ba2;&#x6237;&#x7aef;&#xff08;&#x6d4f;&#x89c8;&#x5668;&#xff09;&#x7684;&#x6570;&#x636e;&#xff0c;&#x901a;&#x5e38;&#x4e0e; UI &#x4ea4;&#x4e92;&#x76f8;&#x5173;&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x6a21;&#x6001;&#x6846;&#x6253;&#x5f00;/&#x5173;&#x95ed;&#x3001;&#x8868;&#x5355;&#x8f93;&#x5165;&#x503c;&#x3001;&#x4e3b;&#x9898;&#x504f;&#x597d;&#xff09;&#x3002;&#x7531; React &#x7684; useState&#x3001;Context &#x6216;&#x5ba2;&#x6237;&#x7aef;&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x5e93;&#x7ba1;&#x7406;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1186,1187" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x670d;&#x52a1;&#x5668;&#x72b6;&#x6001;</strong>&#xff1a;&#x6e90;&#x81ea;&#x8fdc;&#x7a0b;&#x7cfb;&#x7edf;&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x6570;&#x636e;&#x5e93;&#x3001;API&#xff09;&#x7684;&#x6570;&#x636e;&#xff0c;&#x9700;&#x8981;&#x83b7;&#x53d6;&#x3001;&#x7f13;&#x5b58;&#x5e76;&#x4e0e;&#x5ba2;&#x6237;&#x7aef;&#x540c;&#x6b65;&#x3002;&#x7531; SWR &#x6216; TanStack Query &#x7b49;&#x6570;&#x636e;&#x83b7;&#x53d6;&#x5e93;&#x7ba1;&#x7406;&#xff0c;&#x6216;&#x7531;&#x5143;&#x6846;&#x67b6;&#x4e2d;&#x7684;&#x670d;&#x52a1;&#x5668;&#x7ec4;&#x4ef6;&#x7ba1;&#x7406;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1187,1189" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1184,1185" },
+                },
+                {
+                  content:
+                    "<strong>&#x73b0;&#x4ee3;&#x540e;&#x7aef;&#x96c6;&#x6210;&#x6a21;&#x5f0f;</strong>",
+                  children: [
+                    {
+                      content: "<strong>GraphQL</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1195,1196" },
+                    },
+                    {
+                      content: "<strong>gRPC-Web</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1203,1204" },
+                    },
+                    {
+                      content:
+                        "<strong>tRPC&#xff1a;&#x7c7b;&#x578b;&#x5b89;&#x5168;</strong>",
+                      children: [
+                        {
+                          content:
+                            '\n<p data-lines="1213,1214"><strong>&#x6838;&#x5fc3;&#x7406;&#x5ff5;</strong>&#xff1a;tRPC &#x7684;&#x9b54;&#x6cd5;&#x5728;&#x4e8e;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x5728;&#x540e;&#x7aef;&#x5b9a;&#x4e49; API &#x8def;&#x7531;&#x548c;&#x903b;&#x8f91;&#xff0c;&#x524d;&#x7aef;&#x4fbf;&#x80fd;&#x901a;&#x8fc7;&#x7c7b;&#x578b;&#x5bfc;&#x5165;&#x76f4;&#x63a5;&#x63a8;&#x65ad;&#x51fa; API &#x7684;&#x5b8c;&#x6574;&#x7c7b;&#x578b;&#x7b7e;&#x540d;&#x3002;&#x8fd9;&#x610f;&#x5473;&#x7740;&#xff0c;&#x5f53;&#x4f60;&#x5728;&#x524d;&#x7aef;&#x8c03;&#x7528;&#x67d0;&#x4e2a;&#x540e;&#x7aef;&#x51fd;&#x6570;&#x65f6;&#xff0c;&#x5176;&#x53c2;&#x6570;&#x7c7b;&#x578b;&#x3001;&#x8fd4;&#x56de;&#x503c;&#x7c7b;&#x578b;&#x90fd;&#x4f1a;&#x88ab;&#x81ea;&#x52a8;&#x8bc6;&#x522b;&#x3002;&#x6574;&#x4e2a;&#x8fc7;&#x7a0b;<strong>&#x6ca1;&#x6709;&#x4e2d;&#x95f4;&#x7684; Schema &#x5b9a;&#x4e49;&#x8bed;&#x8a00;&#xff08;&#x5982; GraphQL &#x7684; SDL&#xff09;&#x6216;&#x4ee3;&#x7801;&#x751f;&#x6210;&#x6b65;&#x9aa4;</strong>&#xff0c;&#x5b9e;&#x73b0;&#x4e86;&#x771f;&#x6b63;&#x7684;&#x201c;&#x5355;&#x4e00;&#x4e8b;&#x5b9e;&#x6765;&#x6e90;&#x201d;&#xff08;Single Source of Truth&#xff09;&#xff0c;&#x5373;&#x540e;&#x7aef;&#x7684; TypeScript &#x4ee3;&#x7801;&#x672c;&#x8eab;&#x3002;</p>',
+                          children: [],
+                          payload: { tag: "li", lines: "1213,1215" },
+                        },
+                        {
+                          content:
+                            '\n<p data-lines="1215,1216"><strong>&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;&#x7684;&#x9769;&#x547d;</strong>&#xff1a;&#x8fd9;&#x79cd;&#x6a21;&#x5f0f;&#x6781;&#x5927;&#x5730;&#x7b80;&#x5316;&#x4e86;&#x5168;&#x6808;&#x5f00;&#x53d1;&#x6d41;&#x7a0b;&#x3002;&#x5f53;&#x524d;&#x540e;&#x7aef; API &#x53d1;&#x751f;&#x53d8;&#x66f4;&#x65f6;&#xff08;&#x4f8b;&#x5982;&#x4fee;&#x6539;&#x67d0;&#x4e2a;&#x51fd;&#x6570;&#x53c2;&#x6570;&#xff09;&#xff0c;TypeScript &#x7f16;&#x8bd1;&#x5668;&#x4f1a;&#x7acb;&#x523b;&#x5728;&#x524d;&#x7aef;&#x4ee3;&#x7801;&#x4e2d;&#x6807;&#x8bb0;&#x51fa;&#x6240;&#x6709;&#x9700;&#x8981;&#x4fee;&#x6539;&#x7684;&#x5730;&#x65b9;&#xff0c;&#x4ece;&#x6839;&#x672c;&#x4e0a;&#x6d88;&#x9664;&#x4e86;&#x524d;&#x540e;&#x7aef;&#x6570;&#x636e;&#x5951;&#x7ea6;&#x4e0d;&#x4e00;&#x81f4;&#x7684;&#x98ce;&#x9669;&#x3002;&#x5b83;&#x5e26;&#x6765;&#x4e86;&#x65e0;&#x4e0e;&#x4f26;&#x6bd4;&#x7684;&#x5f00;&#x53d1;&#x901f;&#x5ea6;&#x548c;&#x91cd;&#x6784;&#x4fe1;&#x5fc3;&#xff0c;&#x4f7f;&#x5f97;&#x5168;&#x6808; TypeScript &#x5e94;&#x7528;&#x7684;&#x5f00;&#x53d1;&#x4f53;&#x9a8c;&#x5982;&#x4e1d;&#x822c;&#x987a;&#x6ed1;&#x3002;</p>',
+                          children: [],
+                          payload: { tag: "li", lines: "1215,1217" },
+                        },
+                        {
+                          content:
+                            '\n<p data-lines="1217,1218"><strong>&#x4e0e; GraphQL &#x548c; REST &#x7684;&#x5bf9;&#x6bd4;</strong>&#xff1a;</p>',
+                          children: [
+                            {
+                              content:
+                                "&#x76f8;&#x8f83;&#x4e8e; REST&#xff0c;tRPC &#x63d0;&#x4f9b;&#x4e86;&#x7aef;&#x5230;&#x7aef;&#x7684;&#x7c7b;&#x578b;&#x5b89;&#x5168;&#xff0c;&#x907f;&#x514d;&#x4e86;&#x624b;&#x52a8;&#x7ef4;&#x62a4; API &#x6587;&#x6863;&#x548c;&#x7c7b;&#x578b;&#x5b9a;&#x4e49;&#x7684;&#x7e41;&#x7410;&#x5de5;&#x4f5c;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1218,1219" },
+                            },
+                            {
+                              content:
+                                "&#x76f8;&#x8f83;&#x4e8e; GraphQL&#xff0c;tRPC &#x5728;&#x5b9e;&#x73b0;&#x7c7b;&#x578b;&#x5b89;&#x5168;&#x7684;&#x540c;&#x65f6;&#xff0c;&#x907f;&#x514d;&#x4e86;&#x7f16;&#x5199; Schema &#x548c;&#x89e3;&#x6790;&#x590d;&#x6742;&#x67e5;&#x8be2;&#x7684;&#x5f00;&#x9500;&#xff0c;&#x5176;&#x5fc3;&#x667a;&#x6a21;&#x578b;&#x66f4;&#x63a5;&#x8fd1;&#x4e8e;&#x4f20;&#x7edf;&#x7684;&#x51fd;&#x6570;&#x8c03;&#x7528;&#xff0c;&#x66f4;&#x4e3a;&#x8f7b;&#x91cf;&#x548c;&#x76f4;&#x63a5;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1219,1221" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "1217,1221" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1209,1210" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x5b9e;&#x65f6;&#x901a;&#x4fe1;&#x65b9;&#x6848;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1223,1224" },
+                    },
+                    {
+                      content: "<strong>Headless CMS &#x96c6;&#x6210;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1231,1232" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x8868;&#xff1a;API &#x901a;&#x4fe1;&#x6a21;&#x5f0f;&#x5bf9;&#x6bd4; (GraphQL vs. REST)</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="1241,1251">\n<thead data-lines="1241,1242">\n<tr data-lines="1241,1242">\n<th style="text-align:left">&#x7279;&#x6027;/&#x6a21;&#x5f0f;</th>\n<th style="text-align:left">REST (Representational State Transfer)</th>\n<th style="text-align:left"><a href="https://graphql.org/">GraphQL</a> (Graph Query Language)</th>\n</tr>\n</thead>\n<tbody data-lines="1243,1251">\n<tr data-lines="1243,1244">\n<td style="text-align:left"><strong>&#x8bf7;&#x6c42;&#x65b9;&#x5f0f;</strong></td>\n<td style="text-align:left">&#x57fa;&#x4e8e; <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> &#x52a8;&#x8bcd;&#xff08;GET, POST, PUT, DELETE&#xff09;&#xff0c;&#x901a;&#x8fc7; URL &#x6807;&#x8bc6;&#x8d44;&#x6e90;</td>\n<td style="text-align:left">&#x901a;&#x5e38;&#x901a;&#x8fc7; <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> POST&#xff0c;&#x4f7f;&#x7528; query, mutation, subscription &#x5b9a;&#x4e49;&#x64cd;&#x4f5c;</td>\n</tr>\n<tr data-lines="1244,1245">\n<td style="text-align:left"><strong>&#x6570;&#x636e;&#x8fd4;&#x56de;</strong></td>\n<td style="text-align:left">&#x670d;&#x52a1;&#x5668;&#x5b9a;&#x4e49;&#x7684;&#x6574;&#x4e2a;&#x8d44;&#x6e90;&#x7ed3;&#x6784;&#xff0c;&#x53ef;&#x80fd;&#x5b58;&#x5728;&#x8fc7;&#x5ea6;&#x6216;&#x4e0d;&#x8db3;&#x83b7;&#x53d6;</td>\n<td style="text-align:left">&#x5ba2;&#x6237;&#x7aef;&#x7cbe;&#x786e;&#x6307;&#x5b9a;&#x6240;&#x9700;&#x6570;&#x636e;&#xff0c;&#x53ea;&#x8fd4;&#x56de;&#x6240;&#x9700;&#x5b57;&#x6bb5;</td>\n</tr>\n<tr data-lines="1245,1246">\n<td style="text-align:left"><strong>&#x7aef;&#x70b9;&#x6570;&#x91cf;</strong></td>\n<td style="text-align:left">&#x901a;&#x5e38;&#x4e3a;&#x6bcf;&#x4e2a;&#x8d44;&#x6e90;&#x6216;&#x8d44;&#x6e90;&#x96c6;&#x5408;&#x5b9a;&#x4e49;&#x591a;&#x4e2a;&#x7aef;&#x70b9;</td>\n<td style="text-align:left">&#x5355;&#x4e00;&#x7aef;&#x70b9;&#xff08;&#x901a;&#x5e38;&#x4e3a;/<a href="https://graphql.org/">graphql</a>&#xff09;&#x5904;&#x7406;&#x6240;&#x6709;&#x67e5;&#x8be2;</td>\n</tr>\n<tr data-lines="1246,1247">\n<td style="text-align:left"><strong>&#x670d;&#x52a1;&#x5668;&#x7aef; Schema</strong></td>\n<td style="text-align:left">&#x53ef;&#x9009;&#xff0c;&#x901a;&#x5e38;&#x901a;&#x8fc7;&#x6587;&#x6863;&#x6216;&#x7ea6;&#x5b9a;&#x5b9a;&#x4e49;</td>\n<td style="text-align:left">&#x5f3a;&#x5236;&#x8981;&#x6c42;&#xff0c;&#x4f7f;&#x7528; SDL &#x5b9a;&#x4e49;&#x5f3a;&#x7c7b;&#x578b;&#x7cfb;&#x7edf;&#xff0c;&#x81ea;&#x6587;&#x6863;&#x5316;</td>\n</tr>\n<tr data-lines="1247,1248">\n<td style="text-align:left"><strong>&#x7248;&#x672c;&#x5316;</strong></td>\n<td style="text-align:left">&#x901a;&#x5e38;&#x901a;&#x8fc7; URL &#x7248;&#x672c;&#x5316;&#xff08;&#x5982;/v1/&#xff09;&#xff0c;&#x53ef;&#x80fd;&#x5bfc;&#x81f4;&#x517c;&#x5bb9;&#x6027;&#x95ee;&#x9898;</td>\n<td style="text-align:left">&#x901a;&#x8fc7;&#x5e9f;&#x5f03;&#x5b57;&#x6bb5;&#x5b9e;&#x73b0;&#x5411;&#x540e;&#x517c;&#x5bb9;&#xff0c;&#x901a;&#x5e38;&#x65e0;&#x9700;&#x7248;&#x672c;&#x5316;</td>\n</tr>\n<tr data-lines="1248,1249">\n<td style="text-align:left"><strong>&#x7f13;&#x5b58;</strong></td>\n<td style="text-align:left">&#x57fa;&#x4e8e; <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> &#x7f13;&#x5b58;&#x673a;&#x5236;&#xff0c;&#x6613;&#x4e8e;&#x5b9e;&#x73b0;</td>\n<td style="text-align:left">&#x590d;&#x6742;&#xff0c;&#x56e0;&#x67e5;&#x8be2;&#x52a8;&#x6001;&#x6027;&#xff0c;&#x96be;&#x4ee5;&#x8fdb;&#x884c;&#x901a;&#x7528;&#x7f13;&#x5b58;</td>\n</tr>\n<tr data-lines="1249,1250">\n<td style="text-align:left"><strong>&#x590d;&#x6742;&#x6027;</strong></td>\n<td style="text-align:left">&#x7b80;&#x5355;&#x76f4;&#x89c2;&#xff0c;&#x6613;&#x4e8e;&#x4e0a;&#x624b;</td>\n<td style="text-align:left">&#x5b66;&#x4e60;&#x66f2;&#x7ebf;&#x8f83;&#x9661;&#x5ced;&#xff0c;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x5b9e;&#x73b0;&#x590d;&#x6742;</td>\n</tr>\n<tr data-lines="1250,1251">\n<td style="text-align:left"><strong>&#x9002;&#x7528;&#x573a;&#x666f;</strong></td>\n<td style="text-align:left">&#x8d44;&#x6e90;&#x660e;&#x786e;&#x3001;&#x6570;&#x636e;&#x7ed3;&#x6784;&#x56fa;&#x5b9a;&#x3001;&#x7b80;&#x5355; CRUD &#x64cd;&#x4f5c;</td>\n<td style="text-align:left">&#x5ba2;&#x6237;&#x7aef;&#x6570;&#x636e;&#x9700;&#x6c42;&#x591a;&#x53d8;&#x3001;&#x9700;&#x8981;&#x805a;&#x5408;&#x591a;&#x6570;&#x636e;&#x6e90;&#x3001;&#x51cf;&#x5c11;&#x8bf7;&#x6c42;&#x6b21;&#x6570;&#x3001;&#x79fb;&#x52a8;&#x7aef;&#x4f18;&#x5316;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "1241,1251" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1239,1240" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x8868;&#xff1a;&#x5b9e;&#x65f6;&#x901a;&#x4fe1;&#x65b9;&#x6848;&#x5bf9;&#x6bd4; (WebSocket vs. Server-Sent Events)</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="1254,1265">\n<thead data-lines="1254,1255">\n<tr data-lines="1254,1255">\n<th style="text-align:left">&#x7279;&#x6027;/&#x65b9;&#x6848;</th>\n<th style="text-align:left">WebSocket</th>\n<th style="text-align:left"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a> (SSE)</th>\n</tr>\n</thead>\n<tbody data-lines="1256,1265">\n<tr data-lines="1256,1257">\n<td style="text-align:left"><strong>&#x901a;&#x4fe1;&#x65b9;&#x5411;</strong></td>\n<td style="text-align:left">&#x5168;&#x53cc;&#x5de5;&#xff08;&#x53cc;&#x5411;&#xff1a;&#x5ba2;&#x6237;&#x7aef;&#x21c4;&#x670d;&#x52a1;&#x5668;&#xff09;</td>\n<td style="text-align:left">&#x5355;&#x5411;&#xff08;&#x670d;&#x52a1;&#x5668;&#x2192;&#x5ba2;&#x6237;&#x7aef;&#xff09;</td>\n</tr>\n<tr data-lines="1257,1258">\n<td style="text-align:left"><strong>&#x534f;&#x8bae;</strong></td>\n<td style="text-align:left">WebSocket &#x534f;&#x8bae; (ws://, wss://)</td>\n<td style="text-align:left">&#x6807;&#x51c6; <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a>/<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS">HTTPS</a></td>\n</tr>\n<tr data-lines="1258,1259">\n<td style="text-align:left"><strong>&#x8fde;&#x63a5;&#x7ef4;&#x62a4;</strong></td>\n<td style="text-align:left">&#x4fdd;&#x6301;&#x6301;&#x4e45;&#x8fde;&#x63a5;&#xff0c;&#x5f00;&#x9500;&#x76f8;&#x5bf9;&#x8f83;&#x5927;</td>\n<td style="text-align:left">&#x89c6;&#x4e3a;&#x5e38;&#x89c4; <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> &#x6d41;&#x91cf;&#xff0c;&#x5185;&#x7f6e;&#x81ea;&#x52a8;&#x91cd;&#x8fde;</td>\n</tr>\n<tr data-lines="1259,1260">\n<td style="text-align:left"><strong>&#x6570;&#x636e;&#x683c;&#x5f0f;</strong></td>\n<td style="text-align:left">&#x652f;&#x6301;&#x4efb;&#x610f;&#x4e8c;&#x8fdb;&#x5236;&#x6570;&#x636e;&#x548c;&#x6587;&#x672c;&#x6570;&#x636e;</td>\n<td style="text-align:left">&#x4ec5;&#x652f;&#x6301; UTF-8 &#x6587;&#x672c;&#x6570;&#x636e;</td>\n</tr>\n<tr data-lines="1260,1261">\n<td style="text-align:left"><strong>&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;</strong></td>\n<td style="text-align:left">&#x6240;&#x6709;&#x4e3b;&#x6d41;&#x6d4f;&#x89c8;&#x5668;&#x5e7f;&#x6cdb;&#x652f;&#x6301;</td>\n<td style="text-align:left">&#x4e3b;&#x6d41;&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#xff0c;IE &#x7b49;&#x65e7;&#x7248;&#x6d4f;&#x89c8;&#x5668;&#x4e0d;&#x652f;&#x6301;</td>\n</tr>\n<tr data-lines="1261,1262">\n<td style="text-align:left"><strong>&#x5b9e;&#x73b0;&#x590d;&#x6742;&#x6027;</strong></td>\n<td style="text-align:left">&#x534f;&#x8bae;&#x76f8;&#x5bf9;&#x5e95;&#x5c42;&#xff0c;&#x9700;&#x624b;&#x52a8;&#x5904;&#x7406;&#x91cd;&#x8fde;&#x7b49;&#xff0c;&#x7565;&#x590d;&#x6742;</td>\n<td style="text-align:left">&#x57fa;&#x4e8e; <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a>&#xff0c;&#x5ba2;&#x6237;&#x7aef;&#x5b9e;&#x73b0;&#x76f8;&#x5bf9;&#x7b80;&#x5355;</td>\n</tr>\n<tr data-lines="1262,1263">\n<td style="text-align:left"><strong>&#x5e76;&#x53d1;&#x8fde;&#x63a5;&#x9650;&#x5236;</strong></td>\n<td style="text-align:left">&#x65e0;&#x660e;&#x663e;&#x9650;&#x5236;&#xff08;&#x53d7;&#x9650;&#x4e8e;&#x670d;&#x52a1;&#x5668;&#x8d44;&#x6e90;&#xff09;</td>\n<td style="text-align:left">&#x6bcf;&#x4e2a;&#x6d4f;&#x89c8;&#x5668;&#x901a;&#x5e38;&#x6709; 6 &#x4e2a;&#x5e76;&#x53d1;&#x8fde;&#x63a5;&#x9650;&#x5236;</td>\n</tr>\n<tr data-lines="1263,1264">\n<td style="text-align:left"><strong>&#x9632;&#x706b;&#x5899;&#x517c;&#x5bb9;&#x6027;</strong></td>\n<td style="text-align:left">&#x53ef;&#x80fd;&#x53d7;&#x4f01;&#x4e1a;&#x9632;&#x706b;&#x5899;&#x5f71;&#x54cd;</td>\n<td style="text-align:left">&#x57fa;&#x4e8e; <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a>&#xff0c;&#x901a;&#x5e38;&#x65e0;&#x9632;&#x706b;&#x5899;&#x95ee;&#x9898;</td>\n</tr>\n<tr data-lines="1264,1265">\n<td style="text-align:left"><strong>&#x5178;&#x578b;&#x7528;&#x4f8b;</strong></td>\n<td style="text-align:left">&#x804a;&#x5929;&#x3001;&#x5728;&#x7ebf;&#x6e38;&#x620f;&#x3001;&#x5b9e;&#x65f6;&#x534f;&#x4f5c;&#x3001;&#x9ad8;&#x9891;&#x6570;&#x636e;&#x66f4;&#x65b0;</td>\n<td style="text-align:left">&#x65b0;&#x95fb;&#x8ba2;&#x9605;&#x3001;&#x80a1;&#x7968;&#x884c;&#x60c5;&#x3001;&#x76f4;&#x64ad;&#x8bc4;&#x8bba;&#x3001;&#x8fdb;&#x5ea6;&#x6761;&#x3001;&#x901a;&#x77e5;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "1254,1265" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1252,1253" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1191,1192" },
+                },
+              ],
+              payload: { tag: "h2", lines: "826,827" },
+            },
+            {
+              content:
+                "<strong>V. &#x9ad8;&#x7ea7;&#x4e3b;&#x9898;&#x548c;&#x4e13;&#x4e1a;&#x5f00;&#x53d1;&#x6700;&#x4f73;&#x5b9e;&#x8df5;</strong>",
+              children: [
+                {
+                  content:
+                    "<strong>&#x6027;&#x80fd;&#x4f18;&#x5316;&#xff1a;&#x63d0;&#x4f9b;&#x5feb;&#x901f;&#x7528;&#x6237;&#x4f53;&#x9a8c;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;Core Web Vitals &#x4f18;&#x5316;&#x6280;&#x672f;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="1294,1299">\n<thead data-lines="1294,1295">\n<tr data-lines="1294,1295">\n<th style="text-align:left">Core Web Vital</th>\n<th style="text-align:left">&#x89e3;&#x51b3;&#x7684;&#x95ee;&#x9898;</th>\n<th style="text-align:left">&#x5173;&#x952e;&#x6280;&#x672f;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x5de5;&#x5177;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="1296,1299">\n<tr data-lines="1296,1297">\n<td style="text-align:left"><a href="https://web.dev/lcp/"><strong>LCP</strong></a></td>\n<td style="text-align:left">&#x611f;&#x77e5;&#x52a0;&#x8f7d;&#x901f;&#x5ea6;&#x6162;</td>\n<td style="text-align:left">&#x4f18;&#x5316;&#x56fe;&#x50cf;&#xff0c;&#x5173;&#x952e; CSS&#xff0c;&#x670d;&#x52a1;&#x5668;&#x54cd;&#x5e94;&#x65f6;&#x95f4;&#xff0c;&#x9884;&#x52a0;&#x8f7d;&#x82f1;&#x96c4;&#x56fe;&#x50cf;</td>\n<td style="text-align:left"><a href="https://developer.chrome.com/docs/lighthouse/overview/">Lighthouse</a></td>\n</tr>\n<tr data-lines="1297,1298">\n<td style="text-align:left"><a href="https://web.dev/inp/"><strong>INP</strong></a></td>\n<td style="text-align:left">&#x4ea4;&#x4e92;&#x54cd;&#x5e94;&#x6162;</td>\n<td style="text-align:left">&#x907f;&#x514d;&#x963b;&#x585e;&#x4e3b;&#x7ebf;&#x7a0b;&#x7684;&#x957f;&#x65f6;&#x95f4;&#x4efb;&#x52a1;&#xff0c;&#x4f18;&#x5316;&#x4e8b;&#x4ef6;&#x56de;&#x8c03;&#xff0c;&#x51cf;&#x5c11; <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a> &#x5927;&#x5c0f;</td>\n<td style="text-align:left"><a href="https://developer.chrome.com/docs/lighthouse/overview/">Lighthouse</a></td>\n</tr>\n<tr data-lines="1298,1299">\n<td style="text-align:left"><strong>CLS</strong></td>\n<td style="text-align:left">&#x89c6;&#x89c9;&#x7a33;&#x5b9a;&#x6027;&#x5dee;</td>\n<td style="text-align:left">&#x4e3a;&#x56fe;&#x50cf;/&#x89c6;&#x9891;&#x8bbe;&#x7f6e;&#x5c3a;&#x5bf8;&#xff0c;&#x4e3a;&#x5e7f;&#x544a;/&#x52a8;&#x6001;&#x5185;&#x5bb9;&#x4fdd;&#x7559;&#x7a7a;&#x95f4;&#xff0c;&#x4f18;&#x5316;&#x5b57;&#x4f53;&#x4f20;&#x8f93;</td>\n<td style="text-align:left"><a href="https://developer.chrome.com/docs/lighthouse/overview/">Lighthouse</a></td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "1294,1299" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1292,1293" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1272,1273" },
+                },
+                {
+                  content:
+                    "<strong>&#x7ebf;&#x4e0a;&#x6027;&#x80fd;&#x76d1;&#x63a7;&#x4e0e;&#x5206;&#x6790; (Performance Monitoring)</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x771f;&#x5b9e;&#x7528;&#x6237;&#x76d1;&#x63a7; (RUM)</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1306,1307" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x9519;&#x8bef;&#x76d1;&#x63a7;&#x5de5;&#x5177;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1314,1315" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x6253;&#x5305;&#x5206;&#x6790;&#x5de5;&#x5177;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1322,1323" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1302,1303" },
+                },
+                {
+                  content:
+                    "<strong>Web &#x53ef;&#x8bbf;&#x95ee;&#x6027; (A11y)&#xff1a;&#x4e3a;&#x6240;&#x6709;&#x7528;&#x6237;&#x63d0;&#x4f9b;&#x5305;&#x5bb9;&#x6027;&#x8bbe;&#x8ba1;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;WCAG 2.2 &#x7126;&#x70b9;&#x5173;&#x952e;&#x6210;&#x529f;&#x6807;&#x51c6;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="1346,1351">\n<thead data-lines="1346,1347">\n<tr data-lines="1346,1347">\n<th style="text-align:left">&#x6210;&#x529f;&#x6807;&#x51c6;</th>\n<th style="text-align:left">&#x7b49;&#x7ea7;</th>\n<th style="text-align:left">&#x505a;&#x6cd5;</th>\n<th style="text-align:left">&#x91cd;&#x8981;&#x6027;</th>\n</tr>\n</thead>\n<tbody data-lines="1348,1351">\n<tr data-lines="1348,1349">\n<td style="text-align:left"><strong>&#x7126;&#x70b9;&#x4e0d;&#x88ab;&#x906e;&#x6321;&#xff08;&#x6700;&#x5c0f;&#xff09;</strong></td>\n<td style="text-align:left">AA</td>\n<td style="text-align:left">&#x786e;&#x4fdd;&#x952e;&#x76d8;&#x7126;&#x70b9;&#x5143;&#x7d20;&#x81f3;&#x5c11;&#x90e8;&#x5206;&#x53ef;&#x89c1;</td>\n<td style="text-align:left">&#x952e;&#x76d8;&#x7528;&#x6237;&#x9700;&#x8981;&#x770b;&#x5230;&#x7126;&#x70b9;&#x6240;&#x5728;</td>\n</tr>\n<tr data-lines="1349,1350">\n<td style="text-align:left"><strong>&#x7126;&#x70b9;&#x4e0d;&#x88ab;&#x906e;&#x6321;&#xff08;&#x589e;&#x5f3a;&#xff09;</strong></td>\n<td style="text-align:left">AAA</td>\n<td style="text-align:left">&#x786e;&#x4fdd;&#x952e;&#x76d8;&#x7126;&#x70b9;&#x5143;&#x7d20;&#x5b8c;&#x5168;&#x53ef;&#x89c1;</td>\n<td style="text-align:left">&#x952e;&#x76d8;&#x7528;&#x6237;&#x9700;&#x8981;&#x6e05;&#x6670;&#x5730;&#x770b;&#x5230;&#x7126;&#x70b9;&#x6240;&#x5728;</td>\n</tr>\n<tr data-lines="1350,1351">\n<td style="text-align:left"><strong>&#x7126;&#x70b9;&#x5916;&#x89c2;</strong></td>\n<td style="text-align:left">AAA</td>\n<td style="text-align:left">&#x4f7f;&#x7528;&#x8db3;&#x591f;&#x5927;&#x5c0f;&#x548c;&#x5bf9;&#x6bd4;&#x5ea6;&#x7684;&#x7126;&#x70b9;&#x6307;&#x793a;&#x5668;</td>\n<td style="text-align:left">&#x8bb8;&#x591a;&#x4eba;&#x96be;&#x4ee5;&#x611f;&#x77e5;&#x7ec6;&#x5fae;&#x89c6;&#x89c9;&#x53d8;&#x5316;&#xff0c;&#x9700;&#x8981;&#x6e05;&#x6670;&#x7684;&#x6307;&#x793a;&#x5668;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "1346,1351" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1344,1345" },
+                    },
+                    {
+                      content:
+                        "<strong>ARIA &#x5c5e;&#x6027;&#x7684;&#x6df1;&#x5ea6;&#x4f7f;&#x7528;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1354,1355" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x8f85;&#x52a9;&#x6280;&#x672f;&#x6d4b;&#x8bd5;&#x65b9;&#x6cd5;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1362,1363" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1332,1333" },
+                },
+                {
+                  content:
+                    "<strong>&#x641c;&#x7d22;&#x5f15;&#x64ce;&#x4f18;&#x5316; (SEO)&#xff1a;&#x786e;&#x4fdd;&#x53ef;&#x53d1;&#x73b0;&#x6027;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x6e32;&#x67d3;&#x7b56;&#x7565;</strong>&#xff1a;",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5ba2;&#x6237;&#x7aef;&#x6e32;&#x67d3; (CSR)</strong>&#xff1a;React SPA &#x7684;&#x9ed8;&#x8ba4;&#x65b9;&#x5f0f;&#xff1b;&#x6d4f;&#x89c8;&#x5668;&#x4e0b;&#x8f7d; JS&#xff0c;&#x7136;&#x540e;&#x83b7;&#x53d6;/&#x6e32;&#x67d3;&#x5185;&#x5bb9;&#x3002;&#x7531;&#x4e8e;&#x5185;&#x5bb9;&#x4e0d;&#x80fd;&#x7acb;&#x5373;&#x63d0;&#x4f9b;&#x7ed9;&#x722c;&#x866b;&#xff0c;&#x53ef;&#x80fd;&#x5b58;&#x5728; SEO &#x6311;&#x6218;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1379,1380" },
+                        },
+                        {
+                          content:
+                            '<strong>&#x670d;&#x52a1;&#x5668;&#x7aef;&#x6e32;&#x67d3; (SSR) / &#x9759;&#x6001;&#x7ad9;&#x70b9;&#x751f;&#x6210; (SSG)</strong>&#xff1a;&#x63a8;&#x8350;&#x7528;&#x4e8e; SEO&#xff1b;&#x5c06;&#x5b8c;&#x5168;&#x6e32;&#x67d3;&#x7684; HTML &#x53d1;&#x9001;&#x5230;&#x6d4f;&#x89c8;&#x5668;&#xff0c;&#x4f7f;&#x641c;&#x7d22;&#x5f15;&#x64ce;&#x66f4;&#x5bb9;&#x6613;&#x6293;&#x53d6;&#x548c;&#x7d22;&#x5f15;&#x3002;Next.js (SSR/SSG) &#x548c; <a href="https://www.gatsbyjs.com/">Gatsby</a> (SSG) &#x7b49;&#x6846;&#x67b6;&#x4e3a;&#x6b64;&#x800c;&#x6784;&#x5efa;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "1380,1381" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x52a8;&#x6001;&#x6e32;&#x67d3;</strong>&#xff1a;JavaScript &#x751f;&#x6210;&#x7684;&#x5185;&#x5bb9;&#x65e0;&#x6cd5;&#x88ab;&#x641c;&#x7d22;&#x5f15;&#x64ce;&#x83b7;&#x53d6;&#x65f6;&#x7684;&#x53d8;&#x901a;&#x65b9;&#x6848;&#xff1b;&#x670d;&#x52a1;&#x5668;&#x68c0;&#x6d4b;&#x673a;&#x5668;&#x4eba;&#x5e76;&#x63d0;&#x4f9b;&#x670d;&#x52a1;&#x5668;&#x6e32;&#x67d3;&#x7248;&#x672c;&#x3002;&#x4e0d;&#x5efa;&#x8bae;&#x4f5c;&#x4e3a;&#x957f;&#x671f;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1381,1382" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "1378,1382" },
+                    },
+                    {
+                      content:
+                        '<strong>&#x7ed3;&#x6784;&#x5316;&#x6570;&#x636e; (<a href="https://json-ld.org/">JSON-LD</a>)</strong>&#xff1a;&#x5411;&#x9875;&#x9762;&#x6dfb;&#x52a0;&#x673a;&#x5668;&#x53ef;&#x8bfb;&#x6570;&#x636e;&#xff0c;&#x4ee5;&#x5e2e;&#x52a9;&#x641c;&#x7d22;&#x5f15;&#x64ce;&#x66f4;&#x597d;&#x5730;&#x7406;&#x89e3;&#x5185;&#x5bb9;&#x5e76;&#x589e;&#x5f3a;&#x641c;&#x7d22;&#x7ed3;&#x679c;&#x4e2d;&#x7684;&#x5bcc;&#x6458;&#x8981;&#x3002;',
+                      children: [],
+                      payload: { tag: "li", lines: "1382,1383" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x7ad9;&#x70b9;&#x5730;&#x56fe;</strong>&#xff1a;sitemap.xml &#x5217;&#x51fa;&#x6240;&#x6709;&#x91cd;&#x8981;&#x9875;&#x9762;&#xff0c;&#x5e2e;&#x52a9;&#x641c;&#x7d22;&#x5f15;&#x64ce;&#x53d1;&#x73b0;&#x548c;&#x7d22;&#x5f15;&#x5b83;&#x4eec;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1383,1384" },
+                    },
+                    {
+                      content:
+                        '<strong>URL &#x4f18;&#x5316;</strong>&#xff1a;&#x521b;&#x5efa;&#x6e05;&#x6670;&#x3001;&#x63cf;&#x8ff0;&#x6027;&#x7684; URL&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x4f7f;&#x7528; <a href="https://reactrouter.com/">React Router</a>&#xff09;&#xff0c;&#x5305;&#x542b;&#x5173;&#x952e;&#x5b57;&#x4e14;&#x6613;&#x4e8e;&#x9605;&#x8bfb;&#x3002;',
+                      children: [],
+                      payload: { tag: "li", lines: "1384,1386" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1374,1375" },
+                },
+                {
+                  content:
+                    "<strong>&#x5b89;&#x5168;&#x57fa;&#x7840;&#xff1a;&#x4fdd;&#x62a4;&#x524d;&#x7aef;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;&#x5e38;&#x89c1;&#x524d;&#x7aef;&#x5b89;&#x5168;&#x98ce;&#x9669;&#x53ca;&#x7f13;&#x89e3;&#x7b56;&#x7565;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="1406,1416">\n<thead data-lines="1406,1407">\n<tr data-lines="1406,1407">\n<th style="text-align:left">&#x98ce;&#x9669;&#x7c7b;&#x578b;</th>\n<th style="text-align:left">&#x63cf;&#x8ff0;</th>\n<th style="text-align:left">&#x7f13;&#x89e3;&#x7b56;&#x7565;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="1408,1416">\n<tr data-lines="1408,1409">\n<td style="text-align:left"><strong>&#x8de8;&#x7ad9;&#x811a;&#x672c; (XSS)</strong></td>\n<td style="text-align:left">&#x6ce8;&#x5165;&#x6076;&#x610f;&#x811a;&#x672c;&#xff0c;&#x5728;&#x7528;&#x6237;&#x6d4f;&#x89c8;&#x5668;&#x6267;&#x884c;</td>\n<td style="text-align:left">&#x8f93;&#x5165;&#x51c0;&#x5316;&#xff0c;&#x8f93;&#x51fa;&#x8fc7;&#x6ee4;&#xff0c;&#x5185;&#x5bb9;&#x5b89;&#x5168;&#x7b56;&#x7565; (CSP)</td>\n</tr>\n<tr data-lines="1409,1410">\n<td style="text-align:left"><strong>&#x8de8;&#x7ad9;&#x8bf7;&#x6c42;&#x4f2a;&#x9020; (CSRF)</strong></td>\n<td style="text-align:left">&#x6b3a;&#x9a97;&#x7528;&#x6237;&#x6267;&#x884c;&#x975e;&#x9884;&#x671f;&#x64cd;&#x4f5c;</td>\n<td style="text-align:left">&#x53cd; CSRF &#x4ee4;&#x724c;&#xff0c;&#x9a8c;&#x8bc1; <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> Referer &#x5934;</td>\n</tr>\n<tr data-lines="1410,1411">\n<td style="text-align:left"><strong>&#x8fc7;&#x65f6;&#x6846;&#x67b6;/&#x5e93;</strong></td>\n<td style="text-align:left">&#x4f7f;&#x7528;&#x5df2;&#x77e5;&#x6f0f;&#x6d1e;&#x7684;&#x65e7;&#x7ec4;&#x4ef6;</td>\n<td style="text-align:left">&#x5b9a;&#x671f;&#x66f4;&#x65b0;&#xff0c;&#x4f7f;&#x7528; SCA &#x5de5;&#x5177;&#x626b;&#x63cf;&#x6f0f;&#x6d1e;&#xff0c;&#x4ec5;&#x4f7f;&#x7528;&#x5b98;&#x65b9;&#x6765;&#x6e90;&#x7ec4;&#x4ef6;</td>\n</tr>\n<tr data-lines="1411,1412">\n<td style="text-align:left"><strong>&#x4e0d;&#x5b89;&#x5168;&#x7b2c;&#x4e09;&#x65b9;&#x5e93;</strong></td>\n<td style="text-align:left">&#x5f15;&#x5165;&#x6f0f;&#x6d1e;&#x6216;&#x6076;&#x610f;&#x4ee3;&#x7801;</td>\n<td style="text-align:left">&#x5ba1;&#x8ba1;&#x548c;&#x626b;&#x63cf;&#x7b2c;&#x4e09;&#x65b9;&#x5e93;&#xff0c;&#x4f7f;&#x7528; <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">SRI</a> &#x6821;&#x9a8c; CDN &#x8d44;&#x6e90;</td>\n</tr>\n<tr data-lines="1412,1413">\n<td style="text-align:left"><strong>&#x62d2;&#x7edd;&#x670d;&#x52a1; (DoS)</strong></td>\n<td style="text-align:left">&#x901a;&#x8fc7;&#x5927;&#x91cf;&#x8bf7;&#x6c42;&#x4f7f;&#x670d;&#x52a1;&#x4e0d;&#x53ef;&#x7528;</td>\n<td style="text-align:left">&#x901f;&#x7387;&#x9650;&#x5236;&#xff0c;&#x4f7f;&#x7528; CDN/WAF &#x8fc7;&#x6ee4;&#x6076;&#x610f;&#x6d41;&#x91cf;</td>\n</tr>\n<tr data-lines="1413,1414">\n<td style="text-align:left"><strong>&#x4e0d;&#x53d7;&#x9650;&#x5236;&#x7684;&#x529f;&#x80fd;&#x7b56;&#x7565;</strong></td>\n<td style="text-align:left">&#x6076;&#x610f;&#x7f51;&#x7ad9;&#x6ee5;&#x7528;&#x6d4f;&#x89c8;&#x5668; API&#xff08;&#x5982;&#x6444;&#x50cf;&#x5934;&#x3001;&#x9ea6;&#x514b;&#x98ce;&#xff09;</td>\n<td style="text-align:left">&#x4f7f;&#x7528; Feature-Policy <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> &#x5934;&#x9650;&#x5236;&#x529f;&#x80fd;&#x8bbf;&#x95ee;</td>\n</tr>\n<tr data-lines="1414,1415">\n<td style="text-align:left"><strong>&#x7f3a;&#x4e4f;&#x5b50;&#x8d44;&#x6e90;&#x5b8c;&#x6574;&#x6027; (<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">SRI</a>)</strong></td>\n<td style="text-align:left">CDN &#x8d44;&#x6e90;&#x88ab;&#x7be1;&#x6539;&#xff0c;&#x52a0;&#x8f7d;&#x6076;&#x610f;&#x4ee3;&#x7801;</td>\n<td style="text-align:left">&#x5bf9; CDN &#x8d44;&#x6e90;&#x4f7f;&#x7528; integrity &#x5c5e;&#x6027;&#x548c;&#x52a0;&#x5bc6;&#x54c8;&#x5e0c;</td>\n</tr>\n<tr data-lines="1415,1416">\n<td style="text-align:left"><strong>&#x5ba2;&#x6237;&#x7aef;&#x6570;&#x636e;&#x9a8c;&#x8bc1;&#x4e0d;&#x8db3;</strong></td>\n<td style="text-align:left">&#x6076;&#x610f;&#x7528;&#x6237;&#x7ed5;&#x8fc7;&#x5ba2;&#x6237;&#x7aef;&#x9a8c;&#x8bc1;&#x53d1;&#x9001;&#x65e0;&#x6548;&#x6570;&#x636e;</td>\n<td style="text-align:left">&#x59cb;&#x7ec8;&#x5728;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x8fdb;&#x884c;&#x6570;&#x636e;&#x9a8c;&#x8bc1;&#xff0c;&#x5ba2;&#x6237;&#x7aef;&#x9a8c;&#x8bc1;&#x4ec5;&#x7528;&#x4e8e; UX &#x63d0;&#x5347;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "1406,1416" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1404,1405" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1388,1389" },
+                },
+                {
+                  content:
+                    "<strong>&#x5b89;&#x5168;&#x57fa;&#x7840;&#xff1a;&#x7528;&#x6237;&#x8ba4;&#x8bc1;&#x4e0e;&#x6388;&#x6743;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x4e3b;&#x6d41;&#x8ba4;&#x8bc1;&#x6a21;&#x5f0f;&#x7684;&#x6f14;&#x8fdb;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>1. &#x57fa;&#x4e8e;&#x4f1a;&#x8bdd;&#x7684;&#x8ba4;&#x8bc1; (Session-Based Authentication)</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x5de5;&#x4f5c;&#x6d41;&#x7a0b;</strong>&#xff1a;&#x7528;&#x6237;&#x63d0;&#x4ea4;&#x7528;&#x6237;&#x540d;&#x548c;&#x5bc6;&#x7801;&#x540e;&#xff0c;&#x670d;&#x52a1;&#x5668;&#x9a8c;&#x8bc1;&#x5176;&#x8eab;&#x4efd;&#xff0c;&#x7136;&#x540e;&#x521b;&#x5efa;&#x4e00;&#x4e2a;&#x201c;&#x4f1a;&#x8bdd; (Session)&#x201d;&#x5e76;&#x5c06;&#x5176;&#x4fe1;&#x606f;&#x5b58;&#x50a8;&#x5728;&#x670d;&#x52a1;&#x5668;&#x7684;&#x5185;&#x5b58;&#x6216;&#x6570;&#x636e;&#x5e93;&#x4e2d;&#x3002;&#x670d;&#x52a1;&#x5668;&#x968f;&#x540e;&#x5411;&#x7528;&#x6237;&#x7684;&#x6d4f;&#x89c8;&#x5668;&#x8fd4;&#x56de;&#x4e00;&#x4e2a;&#x5305;&#x542b;&#x552f;&#x4e00; Session ID &#x7684; Cookie&#x3002;&#x5728;&#x540e;&#x7eed;&#x7684;&#x6bcf;&#x6b21;&#x8bf7;&#x6c42;&#x4e2d;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x90fd;&#x4f1a;&#x81ea;&#x52a8;&#x643a;&#x5e26;&#x8fd9;&#x4e2a; Cookie&#xff0c;&#x670d;&#x52a1;&#x5668;&#x901a;&#x8fc7;&#x67e5;&#x8be2; Session ID &#x6765;&#x8bc6;&#x522b;&#x7528;&#x6237;&#x8eab;&#x4efd;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1437,1438" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x4f18;&#x52bf;</strong>&#xff1a;&#x539f;&#x7406;&#x7b80;&#x5355;&#xff0c;&#x6613;&#x4e8e;&#x5b9e;&#x73b0;&#x548c;&#x7ba1;&#x7406;&#x3002;&#x670d;&#x52a1;&#x5668;&#x53ef;&#x4ee5;&#x65b9;&#x4fbf;&#x5730;&#x63a7;&#x5236;&#x548c;&#x64a4;&#x9500;&#x7528;&#x6237;&#x4f1a;&#x8bdd;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1438,1439" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x52a3;&#x52bf;</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x6709;&#x72b6;&#x6001;&#x4e0e;&#x6269;&#x5c55;&#x6027;&#x95ee;&#x9898;</strong>&#xff1a;&#x670d;&#x52a1;&#x5668;&#x9700;&#x8981;&#x5b58;&#x50a8;&#x6240;&#x6709;&#x7528;&#x6237;&#x7684;&#x4f1a;&#x8bdd;&#x4fe1;&#x606f;&#xff0c;&#x8fd9;&#x5728;&#x5927;&#x91cf;&#x7528;&#x6237;&#x8bbf;&#x95ee;&#x65f6;&#x4f1a;&#x6d88;&#x8017;&#x5927;&#x91cf;&#x670d;&#x52a1;&#x5668;&#x8d44;&#x6e90;&#x3002;&#x5bf9;&#x4e8e;&#x9700;&#x8981;&#x6c34;&#x5e73;&#x6269;&#x5c55;&#x7684;&#x5206;&#x5e03;&#x5f0f;&#x7cfb;&#x7edf;&#xff0c;&#x9700;&#x8981;&#x5728;&#x591a;&#x4e2a;&#x670d;&#x52a1;&#x5668;&#x4e4b;&#x95f4;&#x540c;&#x6b65;&#x4f1a;&#x8bdd;&#x6570;&#x636e;&#xff0c;&#x8fd9;&#x975e;&#x5e38;&#x590d;&#x6742;&#x4e14;&#x4f4e;&#x6548;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1440,1441" },
+                                },
+                                {
+                                  content:
+                                    "<strong>CSRF &#x98ce;&#x9669;</strong>&#xff1a;&#x7531;&#x4e8e;&#x8ba4;&#x8bc1;&#x4f9d;&#x8d56;&#x4e8e;&#x6d4f;&#x89c8;&#x5668;&#x81ea;&#x52a8;&#x53d1;&#x9001;&#x7684; Cookie&#xff0c;&#x8fd9;&#x79cd;&#x6a21;&#x5f0f;&#x5929;&#x7136;&#x5730;&#x9762;&#x4e34;&#x8de8;&#x7ad9;&#x8bf7;&#x6c42;&#x4f2a;&#x9020; (CSRF) &#x7684;&#x653b;&#x51fb;&#x98ce;&#x9669;&#xff0c;&#x9700;&#x8981;&#x989d;&#x5916;&#x7684;&#x5b89;&#x5168;&#x63aa;&#x65bd;&#x6765;&#x9632;&#x8303;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1441,1442" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x8de8;&#x57df;&#x4e0d;&#x53cb;&#x597d;</strong>&#xff1a;&#x5728;&#x524d;&#x540e;&#x7aef;&#x5206;&#x79bb;&#x548c;&#x8de8;&#x57df;&#x8bf7;&#x6c42;&#x6210;&#x4e3a;&#x5e38;&#x6001;&#x7684;&#x4eca;&#x5929;&#xff0c;&#x57fa;&#x4e8e; Cookie &#x7684;&#x4f1a;&#x8bdd;&#x7ba1;&#x7406;&#x4f1a;&#x9047;&#x5230;&#x8bf8;&#x591a;&#x8de8;&#x57df;&#x7b56;&#x7565;&#x7684;&#x9650;&#x5236;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1442,1444" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "1439,1444" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1433,1434" },
+                        },
+                        {
+                          content:
+                            "<strong>2. &#x57fa;&#x4e8e; Token &#x7684;&#x8ba4;&#x8bc1; (Token-Based Authentication)</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x5de5;&#x4f5c;&#x6d41;&#x7a0b;</strong>&#xff1a;&#x7528;&#x6237;&#x767b;&#x5f55;&#x540e;&#xff0c;&#x670d;&#x52a1;&#x5668;&#x4e0d;&#x518d;&#x521b;&#x5efa;&#x4f1a;&#x8bdd;&#xff0c;&#x800c;&#x662f;&#x751f;&#x6210;&#x4e00;&#x4e2a;&#x52a0;&#x5bc6;&#x7684;&#x3001;&#x5305;&#x542b;&#x7528;&#x6237;&#x8eab;&#x4efd;&#x4fe1;&#x606f;&#x7684; Token (&#x4ee4;&#x724c;) &#x5e76;&#x8fd4;&#x56de;&#x7ed9;&#x5ba2;&#x6237;&#x7aef;&#x3002;&#x524d;&#x7aef;&#x901a;&#x5e38;&#x5c06;&#x8fd9;&#x4e2a; Token &#x5b58;&#x50a8;&#x5728;&#x672c;&#x5730;&#xff08;&#x5982; Local Storage &#x6216; HttpOnly Cookie&#xff09;&#x3002;&#x5728;&#x540e;&#x7eed;&#x8bf7;&#x6c42;&#x4e2d;&#xff0c;&#x524d;&#x7aef;&#x9700;&#x8981;&#x624b;&#x52a8;&#x5c06; Token &#x653e;&#x5165; HTTP &#x8bf7;&#x6c42;&#x7684; <code>Authorization</code> &#x5934;&#x4e2d;&#xff08;&#x901a;&#x5e38;&#x4f7f;&#x7528; <code>Bearer</code> &#x6a21;&#x5f0f;&#xff09;&#x53d1;&#x9001;&#x7ed9;&#x670d;&#x52a1;&#x5668;&#x3002;&#x670d;&#x52a1;&#x5668;&#x6536;&#x5230;&#x8bf7;&#x6c42;&#x540e;&#xff0c;&#x53ea;&#x9700;&#x9a8c;&#x8bc1; Token &#x7684;&#x7b7e;&#x540d;&#x662f;&#x5426;&#x6709;&#x6548;&#xff0c;&#x5373;&#x53ef;&#x786e;&#x8ba4;&#x7528;&#x6237;&#x8eab;&#x4efd;&#xff0c;&#x65e0;&#x9700;&#x67e5;&#x8be2;&#x4efb;&#x4f55;&#x5b58;&#x50a8;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1448,1449" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x4f18;&#x52bf;</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x65e0;&#x72b6;&#x6001;&#x4e0e;&#x9ad8;&#x6269;&#x5c55;&#x6027;</strong>&#xff1a;&#x670d;&#x52a1;&#x5668;&#x65e0;&#x9700;&#x5b58;&#x50a8;&#x4efb;&#x4f55;&#x4f1a;&#x8bdd;&#x4fe1;&#x606f;&#xff0c;&#x6bcf;&#x6b21;&#x8bf7;&#x6c42;&#x90fd;&#x662f;&#x81ea;&#x5305;&#x542b;&#x7684;&#x3002;&#x8fd9;&#x4f7f;&#x5f97;&#x540e;&#x7aef;&#x670d;&#x52a1;&#x53ef;&#x4ee5;&#x8f7b;&#x677e;&#x5730;&#x8fdb;&#x884c;&#x6c34;&#x5e73;&#x6269;&#x5c55;&#xff0c;&#x6781;&#x5927;&#x5730;&#x63d0;&#x5347;&#x4e86;&#x7cfb;&#x7edf;&#x7684;&#x53ef;&#x4f38;&#x7f29;&#x6027;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1450,1451" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x8de8;&#x57df;&#x53cb;&#x597d;&#x4e0e;&#x89e3;&#x8026;</strong>&#xff1a;Token &#x53ef;&#x4ee5;&#x8f7b;&#x677e;&#x5730;&#x5728;&#x4e0d;&#x540c;&#x57df;&#x4e4b;&#x95f4;&#x4f20;&#x9012;&#xff0c;&#x975e;&#x5e38;&#x9002;&#x5408;&#x524d;&#x540e;&#x7aef;&#x5206;&#x79bb;&#x7684;&#x67b6;&#x6784;&#x548c;&#x5fae;&#x670d;&#x52a1;&#x4f53;&#x7cfb;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1451,1452" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x9632;&#x8303; CSRF</strong>&#xff1a;&#x7531;&#x4e8e; Token &#x901a;&#x5e38;&#x4e0d;&#x5b58;&#x50a8;&#x5728; Cookie &#x4e2d;&#xff08;&#x6216;&#x8005;&#x5373;&#x4f7f;&#x5b58;&#x50a8;&#x5728; Cookie &#x4e2d;&#xff0c;&#x4e5f;&#x9700;&#x8981;&#x524d;&#x7aef; JS &#x4e3b;&#x52a8;&#x8bfb;&#x53d6;&#x5e76;&#x653e;&#x5165;&#x8bf7;&#x6c42;&#x5934;&#xff09;&#xff0c;&#x8fd9;&#x4f7f;&#x5f97;&#x5229;&#x7528;&#x6d4f;&#x89c8;&#x5668;&#x81ea;&#x52a8;&#x884c;&#x4e3a;&#x7684; CSRF &#x653b;&#x51fb;&#x53d8;&#x5f97;&#x56f0;&#x96be;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1452,1453" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "1449,1453" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x52a3;&#x52bf;</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>Token &#x65e0;&#x6cd5;&#x4e3b;&#x52a8;&#x64a4;&#x9500;</strong>&#xff1a;&#x4e00;&#x65e6;&#x7b7e;&#x53d1;&#xff0c;Token &#x5728;&#x5176;&#x8fc7;&#x671f;&#x4e4b;&#x524d;&#x90fd;&#x662f;&#x6709;&#x6548;&#x7684;&#x3002;&#x5982;&#x679c; Token &#x6cc4;&#x9732;&#xff0c;&#x670d;&#x52a1;&#x5668;&#x65e0;&#x6cd5;&#x50cf;&#x64a4;&#x9500; Session &#x4e00;&#x6837;&#x4f7f;&#x5176;&#x7acb;&#x5373;&#x5931;&#x6548;&#x3002;&#x901a;&#x5e38;&#x9700;&#x8981;&#x5f15;&#x5165;&#x9ed1;&#x540d;&#x5355;&#x673a;&#x5236;&#x6216;&#x7f29;&#x77ed; Token &#x6709;&#x6548;&#x671f;&#x6765;&#x7f13;&#x89e3;&#x8fd9;&#x4e00;&#x95ee;&#x9898;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1454,1455" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x5b89;&#x5168;&#x6027;</strong>&#xff1a;&#x5c06; Token &#x5b58;&#x50a8;&#x5728; Local Storage &#x4e2d;&#x5b58;&#x5728;&#x88ab; XSS &#x653b;&#x51fb;&#x7a83;&#x53d6;&#x7684;&#x98ce;&#x9669;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1455,1457" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "1453,1457" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1444,1445" },
+                        },
+                        {
+                          content:
+                            "<strong>3. OAuth &amp; OpenID Connect (OIDC)</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>OAuth (&#x5f00;&#x653e;&#x6388;&#x6743;)</strong>&#xff1a;&#x5b83;&#x662f;&#x4e00;&#x4e2a;<strong>&#x6388;&#x6743;</strong>&#x6846;&#x67b6;&#xff0c;&#x800c;&#x975e;&#x8ba4;&#x8bc1;&#x534f;&#x8bae;&#x3002;&#x5176;&#x6838;&#x5fc3;&#x76ee;&#x7684;&#x662f;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x6388;&#x6743;&#x4e00;&#x4e2a;&#x5e94;&#x7528;&#xff08;&#x5ba2;&#x6237;&#x7aef;&#xff09;&#x53bb;&#x8bbf;&#x95ee;&#x5176;&#x5728;&#x53e6;&#x4e00;&#x4e2a;&#x670d;&#x52a1;&#xff08;&#x8d44;&#x6e90;&#x670d;&#x52a1;&#x5668;&#xff09;&#x4e0a;&#x7684;&#x53d7;&#x4fdd;&#x62a4;&#x8d44;&#x6e90;&#xff0c;&#x800c;&#x65e0;&#x9700;&#x5c06;&#x81ea;&#x5df1;&#x7684;&#x7528;&#x6237;&#x540d;&#x548c;&#x5bc6;&#x7801;&#x76f4;&#x63a5;&#x66b4;&#x9732;&#x7ed9;&#x8be5;&#x5e94;&#x7528;&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x4f60;&#x6388;&#x6743;&#x4e00;&#x4e2a;&#x56fe;&#x7247;&#x6253;&#x5370;&#x7f51;&#x7ad9;&#x8bbf;&#x95ee;&#x4f60; Google Photos &#x91cc;&#x7684;&#x7167;&#x7247;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1461,1462" },
+                            },
+                            {
+                              content:
+                                '<strong>OpenID Connect (<a href="https://openid.net/connect/">OIDC</a>)</strong>&#xff1a;&#x5b83;&#x662f;&#x5728; OAuth 2.0 &#x4e4b;&#x4e0a;&#x6784;&#x5efa;&#x7684;&#x7b80;&#x5355;&#x7684;<strong>&#x8eab;&#x4efd;&#x8ba4;&#x8bc1;&#x5c42;</strong>&#x3002;&#x5f53; OAuth &#x53ea;&#x5173;&#x5fc3;&#x201c;&#x6388;&#x6743;&#x201d;&#x65f6;&#xff0c;OIDC &#x589e;&#x52a0;&#x4e86;&#x201c;&#x8ba4;&#x8bc1;&#x201d;&#x7684;&#x529f;&#x80fd;&#x3002;&#x5b83;&#x5141;&#x8bb8;&#x5ba2;&#x6237;&#x7aef;&#x4e0d;&#x4ec5;&#x80fd;&#x83b7;&#x5f97;&#x8bbf;&#x95ee;&#x8d44;&#x6e90;&#x7684;&#x6388;&#x6743;&#xff0c;&#x8fd8;&#x80fd;&#x9a8c;&#x8bc1;&#x7528;&#x6237;&#x7684;&#x8eab;&#x4efd;&#x5e76;&#x83b7;&#x53d6;&#x57fa;&#x672c;&#x7684;&#x7528;&#x6237;&#x4fe1;&#x606f;&#x3002;&#x6211;&#x4eec;&#x65e5;&#x5e38;&#x4f7f;&#x7528;&#x7684;&#x201c;&#x901a;&#x8fc7; Google/GitHub &#x767b;&#x5f55;&#x201d;&#x529f;&#x80fd;&#xff0c;&#x5b9e;&#x9645;&#x4e0a;&#x5c31;&#x662f; OIDC &#x7684;&#x5e94;&#x7528;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1462,1464" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1457,1458" },
+                        },
+                        {
+                          content:
+                            "<strong>4. &#x5355;&#x70b9;&#x767b;&#x5f55; (Single Sign-On / SSO)</strong>",
+                          children: [],
+                          payload: { tag: "h5", lines: "1464,1465" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1429,1430" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x7684;&#x804c;&#x8d23;&#x4e0e;&#x8003;&#x91cf;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5b89;&#x5168;&#x5730;&#x5b58;&#x50a8;&#x51ed;&#x636e;</strong>&#xff1a;&#x7406;&#x89e3;&#x4e0d;&#x540c;&#x5b58;&#x50a8;&#x65b9;&#x5f0f;&#x7684;&#x4f18;&#x52a3;&#x3002;&#x5c06; Token &#x5b58;&#x50a8;&#x5728; <code>HttpOnly</code> &#x7c7b;&#x578b;&#x7684; Cookie &#x4e2d;&#x53ef;&#x4ee5;&#x6709;&#x6548;&#x9632;&#x6b62; XSS &#x653b;&#x51fb;&#xff0c;&#x4f46;&#x53ef;&#x80fd;&#x9762;&#x4e34; CSRF &#x98ce;&#x9669;&#xff08;&#x9700;&#x914d;&#x5408; SameSite &#x7b49;&#x7b56;&#x7565;&#xff09;&#xff1b;&#x5b58;&#x50a8;&#x5728; Local Storage &#x4e2d;&#x5219;&#x53cd;&#x4e4b;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1470,1471" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7ba1;&#x7406;&#x8ba4;&#x8bc1;&#x72b6;&#x6001;</strong>&#xff1a;&#x5728;&#x524d;&#x7aef;&#x5e94;&#x7528;&#x4e2d;&#xff08;&#x5982;&#x4f7f;&#x7528; React Context &#x6216; Redux/Pinia&#xff09;&#xff0c;&#x9700;&#x8981;&#x5168;&#x5c40;&#x7ba1;&#x7406;&#x7528;&#x6237;&#x7684;&#x767b;&#x5f55;&#x72b6;&#x6001;&#x3001;&#x7528;&#x6237;&#x4fe1;&#x606f;&#x548c; Token&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1471,1472" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5b9e;&#x73b0;&#x8def;&#x7531;&#x4fdd;&#x62a4;</strong>&#xff1a;&#x901a;&#x8fc7;&#x8def;&#x7531;&#x5b88;&#x536b;&#x6216;&#x9ad8;&#x9636;&#x7ec4;&#x4ef6;&#xff0c;&#x5b9e;&#x73b0;&#x9700;&#x8981;&#x767b;&#x5f55;&#x624d;&#x80fd;&#x8bbf;&#x95ee;&#x7684;&#x79c1;&#x6709;&#x8def;&#x7531;&#xff0c;&#x4ee5;&#x53ca;&#x5728;&#x7528;&#x6237;&#x672a;&#x767b;&#x5f55;&#x65f6;&#x81ea;&#x52a8;&#x91cd;&#x5b9a;&#x5411;&#x5230;&#x767b;&#x5f55;&#x9875;&#x9762;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1472,1473" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5904;&#x7406; Token &#x5237;&#x65b0;</strong>&#xff1a;&#x4e3a;&#x4e86;&#x5b89;&#x5168;&#xff0c;&#x8bbf;&#x95ee; Token (Access Token) &#x7684;&#x6709;&#x6548;&#x671f;&#x901a;&#x5e38;&#x8f83;&#x77ed;&#x3002;&#x524d;&#x7aef;&#x9700;&#x8981;&#x5b9e;&#x73b0;&#x4e00;&#x5957;&#x65e0;&#x611f;&#x77e5;&#x7684; Token &#x5237;&#x65b0;&#x673a;&#x5236;&#xff08;&#x4f7f;&#x7528;&#x5237;&#x65b0; Token - Refresh Token&#xff09;&#xff0c;&#x5728;&#x8bbf;&#x95ee; Token &#x8fc7;&#x671f;&#x65f6;&#x81ea;&#x52a8;&#x83b7;&#x53d6;&#x65b0;&#x7684; Token&#xff0c;&#x907f;&#x514d;&#x4e2d;&#x65ad;&#x7528;&#x6237;&#x64cd;&#x4f5c;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1473,1474" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4f18;&#x96c5;&#x5730;&#x5904;&#x7406;&#x8ba4;&#x8bc1;&#x9519;&#x8bef;</strong>&#xff1a;&#x5f53; API &#x8fd4;&#x56de;&#x8ba4;&#x8bc1;&#x5931;&#x8d25;&#xff08;&#x5982; 401 Unauthorized&#xff09;&#x65f6;&#xff0c;&#x524d;&#x7aef;&#x5e94;&#x80fd;&#x4f18;&#x96c5;&#x5730;&#x5904;&#x7406;&#xff0c;&#x4f8b;&#x5982;&#x6e05;&#x9664;&#x672c;&#x5730;&#x51ed;&#x636e;&#x3001;&#x91cd;&#x5b9a;&#x5411;&#x5230;&#x767b;&#x5f55;&#x9875;&#x5e76;&#x63d0;&#x793a;&#x7528;&#x6237;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1474,1476" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1468,1469" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1419,1420" },
+                },
+                {
+                  content:
+                    "<strong>&#x7ec4;&#x4ef6;&#x9a71;&#x52a8;&#x5f00;&#x53d1;&#x4e0e; Storybook</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x6838;&#x5fc3;&#x4ef7;&#x503c;&#xff1a;&#x4ece;&#x201c;&#x4e0a;&#x4e0b;&#x6587;&#x5f00;&#x53d1;&#x201d;&#x5230;&#x201c;&#x9694;&#x79bb;&#x5f00;&#x53d1;&#x201d;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x4e13;&#x6ce8;&#x4e14;&#x9ad8;&#x6548;&#x7684;&#x5f00;&#x53d1;&#x6d41;&#x7a0b;</strong>&#xff1a;&#x5f00;&#x53d1;&#x8005;&#x4e0d;&#x518d;&#x9700;&#x8981;&#x5728;&#x5e94;&#x7528;&#x4e2d;&#x901a;&#x8fc7;&#x4e00;&#x7cfb;&#x5217;&#x590d;&#x6742;&#x64cd;&#x4f5c;&#x624d;&#x80fd;&#x770b;&#x5230;&#x67d0;&#x4e2a;&#x7279;&#x5b9a; UI&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x67d0;&#x4e2a;&#x590d;&#x6742;&#x8868;&#x5355;&#x5728;&#x7b2c;&#x4e09;&#x6b65;&#x624d;&#x4f1a;&#x51fa;&#x73b0;&#x7684;&#x9519;&#x8bef;&#x63d0;&#x793a;&#xff09;&#x3002;&#x5728; Storybook &#x91cc;&#xff0c;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x4e3a;&#x8fd9;&#x4e2a;&#x9519;&#x8bef;&#x63d0;&#x793a;&#x7ec4;&#x4ef6;&#x7f16;&#x5199;&#x6545;&#x4e8b;&#xff0c;&#x5e76;&#x5728;&#x5e72;&#x51c0;&#x3001;&#x65e0;&#x5e72;&#x6270;&#x7684;&#x73af;&#x5883;&#x4e2d;&#x8fdb;&#x884c;&#x5f00;&#x53d1;&#x548c;&#x8c03;&#x8bd5;&#xff0c;&#x5f00;&#x53d1;&#x6548;&#x7387;&#x5f97;&#x5230;&#x6307;&#x6570;&#x7ea7;&#x63d0;&#x5347;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1488,1489" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7cfb;&#x7edf;&#x6027;&#x7684;&#x8fb9;&#x754c;&#x60c5;&#x51b5;&#x8986;&#x76d6;</strong>&#xff1a;&#x901a;&#x8fc7;&#x4e3a;&#x7ec4;&#x4ef6;&#x7f16;&#x5199;&#x4e00;&#x7cfb;&#x5217;&#x6545;&#x4e8b;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x53ef;&#x4ee5;&#x7cfb;&#x7edf;&#x6027;&#x5730;&#x8986;&#x76d6;&#x5176;&#x6240;&#x6709;&#x53ef;&#x80fd;&#x7684;&#x72b6;&#x6001;&#x548c;&#x7528;&#x4f8b;&#xff0c;&#x5305;&#x62ec;&#x90a3;&#x4e9b;&#x5728;&#x771f;&#x5b9e;&#x5e94;&#x7528;&#x4e2d;&#x96be;&#x4ee5;&#x590d;&#x73b0;&#x7684;&#x6781;&#x7aef;&#x60c5;&#x51b5;&#xff08;&#x5982;&#x6587;&#x672c;&#x8fc7;&#x957f;&#x3001;&#x52a0;&#x8f7d;&#x5931;&#x8d25;&#x3001;&#x7f51;&#x7edc;&#x5ef6;&#x8fdf;&#x7b49;&#xff09;&#x3002;&#x8fd9;&#x4f7f;&#x5f97;&#x7ec4;&#x4ef6;&#x7684;&#x5065;&#x58ee;&#x6027;&#x548c;&#x53ef;&#x9760;&#x6027;&#x5728;&#x5f00;&#x53d1;&#x9636;&#x6bb5;&#x5c31;&#x5f97;&#x5230;&#x4e86;&#x5145;&#x5206;&#x7684;&#x4fdd;&#x969c;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1489,1491" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1484,1485" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x8d85;&#x8d8a;&#x6587;&#x6863;&#xff1a;&#x201c;&#x6d3b;&#x7684;&#x201d;&#x534f;&#x4f5c;&#x4e0e;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x5e73;&#x53f0;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x4ea4;&#x4e92;&#x5f0f;&#x7684;&#x201c;&#x6d3b;&#x6587;&#x6863;&#x201d;</strong>&#xff1a;Storybook &#x80fd;&#x81ea;&#x52a8;&#x89e3;&#x6790;&#x7ec4;&#x4ef6;&#x4ee3;&#x7801;&#xff0c;&#x751f;&#x6210;&#x5305;&#x542b; props&#x3001;&#x4e8b;&#x4ef6;&#x548c;&#x6e90;&#x7801;&#x7684;&#x4ea4;&#x4e92;&#x5f0f;&#x6587;&#x6863;&#x3002;&#x56e2;&#x961f;&#x6210;&#x5458;&#xff08;&#x5305;&#x62ec;&#x8bbe;&#x8ba1;&#x5e08;&#x3001;&#x4ea7;&#x54c1;&#x7ecf;&#x7406;&#x3001;&#x6d4b;&#x8bd5;&#x5de5;&#x7a0b;&#x5e08;&#xff09;&#x65e0;&#x9700;&#x7406;&#x89e3;&#x4ee3;&#x7801;&#x6216;&#x8fd0;&#x884c;&#x6574;&#x4e2a;&#x9879;&#x76ee;&#xff0c;&#x5c31;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x4e0e;&#x6240;&#x6709; UI &#x7ec4;&#x4ef6;&#x8fdb;&#x884c;&#x4ea4;&#x4e92;&#xff0c;&#x67e5;&#x770b;&#x5176;&#x4e0d;&#x540c;&#x53d8;&#x4f53;&#x548c;&#x54cd;&#x5e94;&#x5f0f;&#x884c;&#x4e3a;&#x3002;&#x8fd9;&#x6781;&#x5927;&#x5730;&#x964d;&#x4f4e;&#x4e86;&#x6c9f;&#x901a;&#x6210;&#x672c;&#xff0c;&#x786e;&#x4fdd;&#x4e86;&#x6240;&#x6709;&#x4eba;&#x5bf9; UI &#x7684;&#x7406;&#x89e3;&#x4fdd;&#x6301;&#x4e00;&#x81f4;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1495,1496" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x7684;&#x4e00;&#x81f4;&#x6027;&#x4fdd;&#x969c;</strong>&#xff1a;&#x5f53;&#x4e0e; Figma &#x7b49;&#x8bbe;&#x8ba1;&#x5de5;&#x5177;&#x7ed3;&#x5408;&#x65f6;&#xff0c;Storybook &#x6210;&#x4e3a;&#x4e86;&#x8bbe;&#x8ba1;&#x7cfb;&#x7edf;&#x7684;&#x201c;&#x5355;&#x4e00;&#x4e8b;&#x5b9e;&#x6765;&#x6e90; (Single Source of Truth)&#x201d;&#x3002;&#x8bbe;&#x8ba1;&#x7a3f;&#x4e2d;&#x5b9a;&#x4e49;&#x7684;&#x7ec4;&#x4ef6;&#x89c4;&#x8303;&#xff0c;&#x5728; Storybook &#x4e2d;&#x4ee5;&#x4ee3;&#x7801;&#x7684;&#x5f62;&#x5f0f;&#x88ab;&#x7cbe;&#x786e;&#x5b9e;&#x73b0;&#x548c;&#x9a8c;&#x8bc1;&#x3002;&#x4efb;&#x4f55;&#x5bf9;&#x7ec4;&#x4ef6;&#x7684;&#x4fee;&#x6539;&#x90fd;&#x4f1a;&#x7acb;&#x523b;&#x53cd;&#x6620;&#x5728; Storybook &#x4e2d;&#xff0c;&#x786e;&#x4fdd;&#x8bbe;&#x8ba1;&#x4e0e;&#x5b9e;&#x73b0;&#x6c38;&#x4e0d;&#x8131;&#x8282;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1496,1498" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1491,1492" },
+                    },
+                    {
+                      content:
+                        "<strong>UI &#x6d4b;&#x8bd5;&#x7684;&#x6307;&#x6325;&#x4e2d;&#x5fc3;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<strong>&#x89c6;&#x89c9;&#x56de;&#x5f52;&#x6d4b;&#x8bd5; (Visual Regression Testing)</strong>&#xff1a;&#x8fd9;&#x662f; Storybook &#x6700;&#x5177;&#x6740;&#x4f24;&#x529b;&#x7684;&#x5e94;&#x7528;&#x4e4b;&#x4e00;&#x3002;&#x50cf; <a href="https://www.chromatic.com/">Chromatic</a>&#x3001;<a href="https://percy.io/">Percy</a> &#x8fd9;&#x6837;&#x7684;&#x81ea;&#x52a8;&#x5316;&#x5de5;&#x5177;&#x53ef;&#x4ee5;&#x4e0e; Storybook &#x65e0;&#x7f1d;&#x96c6;&#x6210;&#x3002;&#x5b83;&#x4eec;&#x4e3a;&#x6bcf;&#x4e2a;&#x6545;&#x4e8b;&#x62cd;&#x6444; UI &#x5feb;&#x7167;&#x4f5c;&#x4e3a;&#x201c;&#x89c6;&#x89c9;&#x57fa;&#x7ebf;&#x201d;&#x3002;&#x5f53;&#x4ee3;&#x7801;&#x53d1;&#x751f;&#x53d8;&#x66f4;&#x540e;&#xff0c;&#x4f1a;&#x81ea;&#x52a8;&#x751f;&#x6210;&#x65b0;&#x7684;&#x5feb;&#x7167;&#x5e76;&#x4e0e;&#x57fa;&#x7ebf;&#x8fdb;&#x884c;&#x50cf;&#x7d20;&#x7ea7;&#x5bf9;&#x6bd4;&#xff0c;&#x7cbe;&#x51c6;&#x5730;&#x6355;&#x83b7;&#x4efb;&#x4f55;&#x610f;&#x6599;&#x4e4b;&#x5916;&#x7684;&#x89c6;&#x89c9;&#x53d8;&#x5316;&#x3002;&#x8fd9;&#x79cd;&#x81ea;&#x52a8;&#x5316;&#x6d41;&#x7a0b;&#xff0c;&#x5c06; UI &#x4e00;&#x81f4;&#x6027;&#x4ece;&#x201c;&#x4eba;&#x5de5;&#x50cf;&#x7d20;&#x773c;&#x201d;&#x7684;&#x7e41;&#x91cd;&#x4efb;&#x52a1;&#x4e2d;&#x89e3;&#x653e;&#x51fa;&#x6765;&#xff0c;&#x53d8;&#x6210;&#x4e86;&#x53ef;&#x9760;&#x7684;&#x3001;&#x53ef;&#x91cd;&#x590d;&#x7684;&#x5de5;&#x7a0b;&#x5b9e;&#x8df5;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "1502,1503" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4ea4;&#x4e92;&#x4e0e;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#x6d4b;&#x8bd5; (Interaction &amp; Accessibility Testing)</strong>&#xff1a;Storybook &#x5f3a;&#x5927;&#x7684;&#x63d2;&#x4ef6;&#x751f;&#x6001;&#x7cfb;&#x7edf;&#xff0c;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x5728;&#x6545;&#x4e8b;&#x4e2d;&#x76f4;&#x63a5;&#x96c6;&#x6210;&#x81ea;&#x52a8;&#x5316;&#x6d4b;&#x8bd5;&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x53ef;&#x4ee5;&#x7f16;&#x5199;&#x811a;&#x672c;&#x6a21;&#x62df;&#x7528;&#x6237;&#x7684;&#x70b9;&#x51fb;&#x3001;&#x8f93;&#x5165;&#x7b49;&#x4ea4;&#x4e92;&#x884c;&#x4e3a;&#xff0c;&#x5e76;&#x65ad;&#x8a00;&#x5176;&#x7ed3;&#x679c;&#x662f;&#x5426;&#x7b26;&#x5408;&#x9884;&#x671f;&#xff1b;&#x4e5f;&#x53ef;&#x4ee5;&#x8fd0;&#x884c;&#x81ea;&#x52a8;&#x5316;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#x68c0;&#x67e5; (A11y)&#xff0c;&#x786e;&#x4fdd;&#x6bcf;&#x4e2a;&#x7ec4;&#x4ef6;&#x90fd;&#x7b26;&#x5408; WCAG &#x7b49;&#x65e0;&#x969c;&#x788d;&#x6807;&#x51c6;&#xff0c;&#x8ba9;&#x5305;&#x5bb9;&#x6027;&#x8bbe;&#x8ba1;&#x5185;&#x5efa;&#x4e8e;&#x5f00;&#x53d1;&#x6d41;&#x7a0b;&#x4e4b;&#x4e2d;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1503,1505" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1498,1499" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1478,1479" },
+                },
+                {
+                  content:
+                    "<strong>&#x6d4b;&#x8bd5;&#x7b56;&#x7565;&#xff1a;&#x786e;&#x4fdd;&#x4ee3;&#x7801;&#x8d28;&#x91cf;&#x548c;&#x53ef;&#x9760;&#x6027;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;&#x6d41;&#x884c;&#x6d4b;&#x8bd5;&#x6846;&#x67b6;&#x6bd4;&#x8f83;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="1527,1533">\n<thead data-lines="1527,1528">\n<tr data-lines="1527,1528">\n<th style="text-align:left">&#x6846;&#x67b6;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x7c7b;&#x578b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x901f;&#x5ea6;</th>\n<th style="text-align:left">&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x8bed;&#x8a00;&#x652f;&#x6301;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x6a21;&#x62df;&#x80fd;&#x529b;</th>\n<th style="text-align:left">&#x8c03;&#x8bd5;&#x5de5;&#x5177;</th>\n<th style="text-align:left">&#x793e;&#x533a;/&#x751f;&#x6001;&#x7cfb;&#x7edf;</th>\n<th style="text-align:left">&#x7406;&#x60f3;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="1529,1533">\n<tr data-lines="1529,1530">\n<td style="text-align:left"><a href="https://jestjs.io/"><strong>Jest</strong></a></td>\n<td style="text-align:left">&#x5355;&#x5143;&#x3001;&#x96c6;&#x6210;&#x3001;E2E</td>\n<td style="text-align:left">&#x826f;&#x597d;&#xff0c;&#x53ef;&#x9760;</td>\n<td style="text-align:left">Chrome, <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.microsoft.com/en-us/edge">Edge</a></td>\n<td style="text-align:left">JavaScript, <a href="https://www.typescriptlang.org/">TypeScript</a></td>\n<td style="text-align:left">&#x5f3a;&#x5927;&#xff0c;&#x5185;&#x7f6e;</td>\n<td style="text-align:left">&#x62a5;&#x544a;&#xff0c;&#x5feb;&#x7167;&#xff0c;&#x8c03;&#x8bd5;&#x5668;</td>\n<td style="text-align:left">&#x5e9e;&#x5927;&#xff0c;&#x6210;&#x719f;</td>\n<td style="text-align:left">&#x4efb;&#x4f55; JavaScript &#x9879;&#x76ee;&#xff0c;&#x5927;&#x578b;&#x5e94;&#x7528;</td>\n</tr>\n<tr data-lines="1530,1531">\n<td style="text-align:left"><a href="https://vitest.dev/"><strong>Vitest</strong></a></td>\n<td style="text-align:left">&#x5355;&#x5143;&#x3001;&#x96c6;&#x6210;</td>\n<td style="text-align:left">&#x6781;&#x901f;</td>\n<td style="text-align:left">Chrome, <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.microsoft.com/en-us/edge">Edge</a></td>\n<td style="text-align:left">JavaScript, <a href="https://www.typescriptlang.org/">TypeScript</a></td>\n<td style="text-align:left">&#x7c7b;&#x4f3c; <a href="https://jestjs.io/">Jest</a>&#xff0c;&#x66f4;&#x73b0;&#x4ee3;</td>\n<td style="text-align:left">&#x6d4f;&#x89c8;&#x5668; GUI&#xff0c;&#x9519;&#x8bef;&#x62a5;&#x544a;</td>\n<td style="text-align:left">&#x6b63;&#x5728;&#x589e;&#x957f;</td>\n<td style="text-align:left"><a href="https://vitejs.dev/">Vite</a> &#x9879;&#x76ee;&#xff0c;&#x6ce8;&#x91cd;&#x901f;&#x5ea6;&#x548c;&#x73b0;&#x4ee3; JS &#x7279;&#x6027;</td>\n</tr>\n<tr data-lines="1531,1532">\n<td style="text-align:left"><a href="https://www.cypress.io/"><strong>Cypress</strong></a></td>\n<td style="text-align:left">E2E</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left">Chrome, <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.microsoft.com/en-us/edge">Edge</a></td>\n<td style="text-align:left">JavaScript</td>\n<td style="text-align:left">&#x5b9e;&#x65f6;&#xff0c;&#x5185;&#x7f6e;</td>\n<td style="text-align:left">GUI&#xff0c;&#x65f6;&#x95f4;&#x65c5;&#x884c;&#x8c03;&#x8bd5;</td>\n<td style="text-align:left">&#x8f83;&#x5927;&#xff0c;&#x6210;&#x719f;</td>\n<td style="text-align:left">JavaScript &#x5bc6;&#x96c6;&#x578b;&#x524d;&#x7aef;&#x5e94;&#x7528;&#xff0c;&#x5b9e;&#x65f6;&#x53cd;&#x9988;</td>\n</tr>\n<tr data-lines="1532,1533">\n<td style="text-align:left"><a href="https://playwright.dev/"><strong>Playwright</strong></a></td>\n<td style="text-align:left">E2E</td>\n<td style="text-align:left">&#x6781;&#x901f;</td>\n<td style="text-align:left">Chrome, <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://www.microsoft.com/en-us/edge">Edge</a></td>\n<td style="text-align:left">JS/TS, Python, C#, Java</td>\n<td style="text-align:left">&#x5f3a;&#x5927;&#xff0c;&#x5e76;&#x884c;</td>\n<td style="text-align:left">&#x5f3a;&#x5927;&#xff0c;&#x9700;&#x9ad8;&#x7ea7;&#x6280;&#x80fd;</td>\n<td style="text-align:left">&#x6b63;&#x5728;&#x589e;&#x957f;</td>\n<td style="text-align:left">&#x590d;&#x6742;&#x96c6;&#x6210;&#x573a;&#x666f;&#xff0c;&#x8de8;&#x6d4f;&#x89c8;&#x5668;/&#x8bbe;&#x5907;&#x6d4b;&#x8bd5;&#xff0c;&#x5e76;&#x884c;&#x6267;&#x884c;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "1527,1533" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1525,1526" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1507,1508" },
+                },
+                {
+                  content:
+                    "<strong>&#x56fd;&#x9645;&#x5316; (i18n) &#x548c;&#x672c;&#x5730;&#x5316; (l10n)&#xff1a;&#x5168;&#x7403;&#x5316;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;&#x6d41;&#x884c;&#x56fd;&#x9645;&#x5316;&#x5e93;&#x6bd4;&#x8f83;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="1557,1562">\n<thead data-lines="1557,1558">\n<tr data-lines="1557,1558">\n<th style="text-align:left">&#x5e93;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x6846;&#x67b6;&#x517c;&#x5bb9;&#x6027;</th>\n<th style="text-align:left">&#x529f;&#x80fd;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x7075;&#x6d3b;&#x6027;</th>\n<th style="text-align:left">&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</th>\n<th style="text-align:left">&#x6027;&#x80fd;/&#x5305;&#x5927;&#x5c0f;</th>\n<th style="text-align:left">&#x6807;&#x51c6;&#x9075;&#x5faa;</th>\n</tr>\n</thead>\n<tbody data-lines="1559,1562">\n<tr data-lines="1559,1560">\n<td style="text-align:left"><a href="https://react.i18next.com/"><strong>react-i18next</strong></a></td>\n<td style="text-align:left"><a href="https://react.dev/">React</a></td>\n<td style="text-align:left">&#x5d4c;&#x5957;&#x7ffb;&#x8bd1;&#xff0c;&#x590d;&#x6570;&#xff0c;&#x8bed;&#x8a00;&#x68c0;&#x6d4b;&#xff0c;&#x65e5;&#x671f;/&#x6570;&#x5b57;&#x683c;&#x5f0f;&#x5316;</td>\n<td style="text-align:left">&#x9ad8;</td>\n<td style="text-align:left">&#x4e2d;&#x7b49;</td>\n<td style="text-align:left">&#x8f83;&#x5927;</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n</tr>\n<tr data-lines="1560,1561">\n<td style="text-align:left"><a href="https://vue-i18n.intlify.dev/"><strong>vue-i18n</strong></a></td>\n<td style="text-align:left"><a href="https://vuejs.org/">Vue</a></td>\n<td style="text-align:left">&#x6d88;&#x606f;&#x683c;&#x5f0f;&#x5316;&#xff0c;&#x590d;&#x6570;&#xff0c;&#x65e5;&#x671f;/&#x65f6;&#x95f4;&#x672c;&#x5730;&#x5316;</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left">&#x8f83;&#x4f4e;</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n</tr>\n<tr data-lines="1561,1562">\n<td style="text-align:left"><a href="https://formatjs.io/"><strong>FormatJS</strong></a></td>\n<td style="text-align:left"><a href="https://react.dev/">React</a></td>\n<td style="text-align:left"><a href="https://icu.unicode.org/">ICU</a> &#x6d88;&#x606f;&#x8bed;&#x6cd5;&#xff0c;<a href="https://cldr.unicode.org/">Unicode CLDR</a>&#xff0c;&#x65e5;&#x671f;/&#x6570;&#x5b57;&#x683c;&#x5f0f;&#x5316;</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left">&#x4e2d;&#x7b49;</td>\n<td style="text-align:left">&#x8f83;&#x5c0f;</td>\n<td style="text-align:left">&#x4f18;&#x79c0;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "1557,1562" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1555,1556" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1536,1537" },
+                },
+                {
+                  content:
+                    "<strong>&#x9519;&#x8bef;&#x5904;&#x7406;&#x548c;&#x9632;&#x5fa1;&#x6027;&#x7f16;&#x7a0b;&#xff1a;&#x6784;&#x5efa;&#x5065;&#x58ee;&#x7684;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x4f18;&#x96c5;&#x9519;&#x8bef;&#x5904;&#x7406;</strong>&#xff1a;&#x7ba1;&#x7406;&#x9519;&#x8bef;&#xff0c;&#x4f7f;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x80fd;&#x591f;&#x7ee7;&#x7eed;&#x8fd0;&#x884c;&#xff0c;&#x63d0;&#x4f9b;&#x4fe1;&#x606f;&#x6027;&#x6d88;&#x606f;&#x3001;&#x56de;&#x9000;&#x673a;&#x5236;&#x5e76;&#x505a;&#x5230;&#x4f18;&#x96c5;&#x964d;&#x7ea7;&#xff08;Graceful Degradation&#xff09;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1569,1570" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x9519;&#x8bef;&#x8fb9;&#x754c; (React)</strong>&#xff1a;&#x6355;&#x83b7;&#x5176;&#x5b50;&#x7ec4;&#x4ef6;&#x6811;&#x4e2d;&#x7684; JavaScript &#x9519;&#x8bef;&#x3001;&#x8bb0;&#x5f55;&#x8fd9;&#x4e9b;&#x9519;&#x8bef;&#x5e76;&#x663e;&#x793a;&#x5907;&#x7528; UI &#x800c;&#x4e0d;&#x662f;&#x5bfc;&#x81f4;&#x6574;&#x4e2a;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x5d29;&#x6e83;&#x7684; React &#x7ec4;&#x4ef6;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1570,1571" },
+                    },
+                    {
+                      content:
+                        "<strong>API &#x6570;&#x636e;&#x9a8c;&#x8bc1;&#xff08;&#x524d;&#x7aef;&#xff09;</strong>&#xff1a;",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5ba2;&#x6237;&#x7aef;&#x9a8c;&#x8bc1;</strong>&#xff1a;&#x7528;&#x6237;&#x8f93;&#x5165;&#x7684;&#x521d;&#x59cb;&#x68c0;&#x67e5;&#xff08;&#x4f8b;&#x5982;&#xff0c;HTML &#x8868;&#x5355;&#x9a8c;&#x8bc1;&#x3001;JavaScript &#x9a8c;&#x8bc1;&#xff09;&#x901a;&#x8fc7;&#x53ca;&#x65e9;&#x6355;&#x83b7;&#x65e0;&#x6548;&#x6570;&#x636e;&#x6765;&#x6539;&#x5584;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1572,1573" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x91cd;&#x8981;&#x63d0;&#x793a;</strong>&#xff1a;&#x5ba2;&#x6237;&#x7aef;&#x9a8c;&#x8bc1;<strong>&#x4e0d;&#x662f;&#x5b89;&#x5168;&#x63aa;&#x65bd;</strong>&#xff0c;&#x53ef;&#x4ee5;&#x7ed5;&#x8fc7;&#xff1b;<strong>&#x670d;&#x52a1;&#x5668;&#x7aef;&#x9a8c;&#x8bc1;&#x59cb;&#x7ec8;&#x662f;&#x5b89;&#x5168;&#x548c;&#x6570;&#x636e;&#x5b8c;&#x6574;&#x6027;&#x6240;&#x5fc5;&#x9700;&#x7684;</strong>&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1573,1574" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6700;&#x4f73;&#x5b9e;&#x8df5;</strong>&#xff1a;&#x5b9a;&#x4e49;&#x6e05;&#x6670;&#x7684;&#x9a8c;&#x8bc1;&#x89c4;&#x5219;&#xff08;&#x6570;&#x636e;&#x7c7b;&#x578b;&#x3001;&#x5fc5;&#x586b;&#x5b57;&#x6bb5;&#xff09;&#x3001;&#x53ca;&#x65e9;&#x9a8c;&#x8bc1;&#x8f93;&#x5165;&#x3001;&#x4f7f;&#x7528;&#x6807;&#x51c6;&#x5316;&#x9519;&#x8bef;&#x6d88;&#x606f;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1574,1575" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "1571,1575" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x9632;&#x5fa1;&#x6027;&#x7f16;&#x7a0b;</strong>&#xff1a;&#x7f16;&#x5199;&#x4e0d;&#x6613;&#x53d7;&#x610f;&#x5916;&#x8f93;&#x5165;&#x6216;&#x64cd;&#x4f5c;&#x5bfc;&#x81f4;&#x9519;&#x8bef;&#x7684;&#x4ee3;&#x7801;&#x7684;&#x65b9;&#x6cd5;&#xff0c;&#x5305;&#x62ec;&#x4f7f;&#x7528; try-catch &#x5757;&#x3001;&#x9a8c;&#x8bc1;&#x53c2;&#x6570;/&#x8fd4;&#x56de;&#x503c;&#x4ee5;&#x53ca;&#x5b89;&#x5168; Web &#x5b58;&#x50a8;/&#x6d88;&#x606f;&#x4f20;&#x9012;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1575,1577" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1565,1566" },
+                },
+                {
+                  content:
+                    "<strong>UX &#x5de5;&#x7a0b;&#x539f;&#x5219;&#xff1a;&#x589e;&#x5f3a;&#x7528;&#x6237;&#x4f53;&#x9a8c;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x5173;&#x952e;&#x539f;&#x5219;</strong>&#xff1a;",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x4e00;&#x81f4;&#x6027;</strong>&#xff1a;&#x719f;&#x6089;&#x7684;&#x6a21;&#x5f0f;&#x51cf;&#x5c11;&#x4e86;&#x6df7;&#x6dc6;&#x5e76;&#x5efa;&#x7acb;&#x4e86;&#x4fe1;&#x4efb;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1584,1585" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x53ef;&#x5b66;&#x4e60;&#x6027;</strong>&#xff1a;&#x754c;&#x9762;&#x5e94;&#x9700;&#x8981;&#x6700;&#x5c11;&#x7684;&#x89e3;&#x91ca;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1585,1586" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x53cd;&#x9988;&#x5faa;&#x73af;</strong>&#xff1a;&#x7528;&#x6237;&#x7684;&#x6bcf;&#x4e2a;&#x64cd;&#x4f5c;&#x90fd;&#x5e94;&#x4ea7;&#x751f;&#x53ef;&#x89c1;&#x6216;&#x89e6;&#x89c9;&#x54cd;&#x5e94;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1586,1587" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x89c6;&#x89c9;&#x8bbe;&#x8ba1;</strong>&#xff1a;&#x6e05;&#x6670;&#x7684;&#x6392;&#x7248;&#x3001;&#x989c;&#x8272;&#x3001;&#x95f4;&#x8ddd;&#x548c;&#x5c42;&#x6b21;&#x7ed3;&#x6784;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1587,1588" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4ea4;&#x4e92;&#x7cfb;&#x7edf;</strong>&#xff1a;&#x4e00;&#x81f4;&#x4e14;&#x76f4;&#x89c2;&#x7684;&#x4ea4;&#x4e92;&#x5143;&#x7d20;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1588,1589" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7528;&#x6237;&#x6d41;&#x7a0b;</strong>&#xff1a;&#x5b8c;&#x6210;&#x4efb;&#x52a1;&#x7684;&#x81ea;&#x7136;&#x548c;&#x5f15;&#x5bfc;&#x8def;&#x5f84;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1589,1590" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x79fb;&#x52a8;&#x54cd;&#x5e94;&#x6027;</strong>&#xff1a;&#x5e03;&#x5c40;&#x9002;&#x5e94;&#x5404;&#x79cd;&#x8bbe;&#x5907;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1590,1591" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x52a0;&#x8f7d;&#x901f;&#x5ea6;&#x548c;&#x6027;&#x80fd;</strong>&#xff1a;&#x4f18;&#x5316;&#x8d44;&#x4ea7;&#x548c;&#x4ee3;&#x7801;&#x4ee5;&#x5b9e;&#x73b0;&#x5feb;&#x901f;&#x54cd;&#x5e94;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1591,1592" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x53ef;&#x8bbf;&#x95ee;&#x6027;</strong>&#xff1a;&#x5305;&#x5bb9;&#x6027;&#x8bbe;&#x8ba1;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1592,1593" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "1583,1593" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x4ea4;&#x4e92;&#x53cd;&#x9988;</strong>&#xff1a;&#x5bf9;&#x7528;&#x6237;&#x64cd;&#x4f5c;&#x63d0;&#x4f9b;&#x5373;&#x65f6;&#x89c6;&#x89c9;&#x6216;&#x89e6;&#x89c9;&#x54cd;&#x5e94;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1593,1594" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x54cd;&#x5e94;&#x5f0f;&#x4ea4;&#x4e92;</strong>&#xff1a;&#x786e;&#x4fdd; UI &#x5728;&#x4e0d;&#x540c;&#x5c4f;&#x5e55;&#x5c3a;&#x5bf8;&#x548c;&#x8f93;&#x5165;&#x65b9;&#x6cd5;&#x4e0b;&#x90fd;&#x80fd;&#x826f;&#x597d;&#x9002;&#x5e94;&#x548c;&#x6267;&#x884c;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1594,1595" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x6027;&#x80fd;&#x611f;&#x77e5;</strong>&#xff1a;&#x7528;&#x6237;&#x5bf9;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x901f;&#x5ea6;&#x7684;&#x611f;&#x77e5;&#xff0c;&#x53d7;&#x52a0;&#x8f7d;&#x901f;&#x5ea6;&#x3001;&#x54cd;&#x5e94;&#x6027;&#x548c;&#x6d41;&#x7545;&#x8fc7;&#x6e21;&#x7684;&#x5f71;&#x54cd;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1595,1597" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1579,1580" },
+                },
+                {
+                  content:
+                    "<strong>&#x524d;&#x7aef;&#x67b6;&#x6784;&#x6a21;&#x5f0f;&#xff1a;&#x6269;&#x5c55;&#x590d;&#x6742;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x5355;&#x4f53;&#x67b6;&#x6784;</strong>&#xff1a;&#x4f20;&#x7edf;&#x65b9;&#x6cd5;&#xff0c;HTML&#x3001;CSS &#x548c; JavaScript &#x6346;&#x7ed1;&#x5728;&#x4e00;&#x4e2a;&#x4ed3;&#x5e93;&#x4e2d;&#x5e76;&#x4f5c;&#x4e3a;&#x5355;&#x4e2a;&#x5b9e;&#x4f53;&#x90e8;&#x7f72;&#x3002;&#x9002;&#x7528;&#x4e8e;&#x4e2d;&#x5c0f;&#x578b;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#xff0c;&#x4f46;&#x96be;&#x4ee5;&#x6269;&#x5c55;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1603,1604" },
+                    },
+                    {
+                      content:
+                        '<strong>&#x5fae;&#x524d;&#x7aef;</strong>&#xff1a;&#x5c06;&#x5355;&#x4f53;&#x524d;&#x7aef;&#x5206;&#x89e3;&#x4e3a;&#x66f4;&#x5c0f;&#x3001;&#x81ea;&#x5305;&#x542b;&#x7684;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#xff0c;&#x53ef;&#x4ee5;&#x72ec;&#x7acb;&#x5f00;&#x53d1;&#x3001;&#x90e8;&#x7f72;&#x548c;&#x7ef4;&#x62a4;&#x3002;&#x6bcf;&#x4e2a;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x4ee3;&#x8868; UI &#x7684;&#x4e00;&#x4e2a;&#x529f;&#x80fd;/&#x90e8;&#x5206;&#xff0c;&#x5e76;&#x4e14;&#x53ef;&#x4ee5;&#x4f7f;&#x7528;&#x4e0d;&#x540c;&#x7684;&#x6846;&#x67b6;&#x3002;&#x901a;&#x5e38;&#x7531; <a href="https://webpack.js.org/concepts/module-federation/">Module Federation</a> (<a href="https://webpack.js.org/">Webpack</a> 5) &#x542f;&#x7528;&#x3002;',
+                      children: [],
+                      payload: { tag: "li", lines: "1604,1605" },
+                    },
+                    {
+                      content:
+                        "<strong>JAMstack (JavaScript, APIs, Markup)</strong>&#xff1a;&#x901a;&#x8fc7; API &#x9884;&#x6784;&#x5efa;&#x524d;&#x7aef;&#xff0c;&#x5177;&#x6709;&#x52a8;&#x6001;&#x529f;&#x80fd;&#x3002;&#x975e;&#x5e38;&#x9002;&#x5408;&#x9759;&#x6001;&#x7f51;&#x7ad9;&#x3001;&#x535a;&#x5ba2;&#x3001;&#x7535;&#x5b50;&#x5546;&#x52a1;&#xff0c;&#x4e13;&#x6ce8;&#x4e8e;&#x5feb;&#x901f;&#x9875;&#x9762;&#x52a0;&#x8f7d;&#x548c;&#x7b80;&#x5316;&#x7684; CI/CD&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1605,1607" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1599,1600" },
+                },
+                {
+                  content:
+                    "<strong>&#x79fb;&#x52a8;&#x7aef; Web &#x5f00;&#x53d1;&#x6df1;&#x5ea6;&#x5b9e;&#x8df5;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x54cd;&#x5e94;&#x5f0f;&#x8bbe;&#x8ba1;&#x8fdb;&#x9636;&#x6280;&#x5de7;</strong>",
+                      children: [
+                        {
+                          content:
+                            '\n<p data-lines="1617,1618">&#x6d41;&#x5f0f;&#x7f51;&#x683c; (Fluid Grids)&#xff0c;&#x4f7f;&#x7528;&#x76f8;&#x5bf9;&#x5355;&#x4f4d;&#xff08;&#x5982;&#x767e;&#x5206;&#x6bd4;&#x3001;em&#x3001;rem&#x3001;vw/vh&#xff09;&#x5b9a;&#x4e49;&#x5e03;&#x5c40;&#x5143;&#x7d20;&#xff08;&#x5982;&#x5217;&#x5bbd;&#xff09;&#xff0c;&#x800c;&#x975e;&#x56fa;&#x5b9a;&#x50cf;&#x7d20;&#xff0c;&#x4f7f;&#x5e03;&#x5c40;&#x80fd;&#x6839;&#x636e;&#x89c6;&#x53e3;&#x5927;&#x5c0f;&#x81ea;&#x9002;&#x5e94;&#x7f29;&#x653e;&#x3002;</p>',
+                          children: [],
+                          payload: { tag: "li", lines: "1617,1618" },
+                        },
+                        {
+                          content:
+                            '\n<p data-lines="1618,1619">&#x5f39;&#x6027;&#x56fe;&#x7247; (Flexible Images)&#xff0c;&#x786e;&#x4fdd;&#x56fe;&#x7247;&#x80fd;&#x6839;&#x636e;&#x5c4f;&#x5e55;&#x5c3a;&#x5bf8;&#x9002;&#x5f53;&#x7f29;&#x653e;&#xff0c;&#x907f;&#x514d;&#x6ea2;&#x51fa;&#x6216;&#x5931;&#x771f;&#x3002;&#x53ef;&#x4ee5;&#x4f7f;&#x7528; max-width: 100%&#x3001;object-fit &#x6216; srcset/<code>&lt;picture&gt;</code>&#x5143;&#x7d20;&#x6765;&#x63d0;&#x4f9b;&#x4e0d;&#x540c;&#x5206;&#x8fa8;&#x7387;&#x7684;&#x56fe;&#x7247;&#xff0c;&#x4f18;&#x5316;&#x52a0;&#x8f7d;&#x6027;&#x80fd;&#x3002;</p>',
+                          children: [],
+                          payload: { tag: "li", lines: "1618,1619" },
+                        },
+                        {
+                          content:
+                            '\n<p data-lines="1619,1620">CSS &#x5a92;&#x4f53;&#x67e5;&#x8be2; (Media Queries)&#xff0c;&#x6839;&#x636e;&#x5c4f;&#x5e55;&#x5c3a;&#x5bf8;&#x3001;&#x5206;&#x8fa8;&#x7387;&#x3001;&#x8bbe;&#x5907;&#x65b9;&#x5411;&#x7b49;&#x6761;&#x4ef6;&#x5e94;&#x7528;&#x4e0d;&#x540c;&#x7684;&#x6837;&#x5f0f;&#x3002;</p>\n<p data-lines="1621,1622">&#x8fdb;&#x9636;&#x4f7f;&#x7528;&#x5305;&#x62ec;&#x57fa;&#x4e8e;&#x529f;&#x80fd;&#x800c;&#x975e;&#x8bbe;&#x5907;&#xff08;&#x907f;&#x514d;&#x9488;&#x5bf9;&#x7279;&#x5b9a;&#x8bbe;&#x5907;&#x7f16;&#x5199;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#xff0c;&#x800c;&#x662f;&#x6839;&#x636e;&#x5185;&#x5bb9;&#x7684;&#x9700;&#x6c42;&#x548c;&#x5e03;&#x5c40;&#x7684;&#x65ad;&#x70b9;&#x6765;&#x5b9a;&#x4e49;&#x67e5;&#x8be2;&#xff09;&#x3001;min-width &#x4f18;&#x5148;&#xff08;&#x79fb;&#x52a8;&#x4f18;&#x5148;&#xff0c;&#x4ece;&#x6700;&#x5c0f;&#x5c4f;&#x5e55;&#x5f00;&#x59cb;&#x8bbe;&#x8ba1;&#xff0c;&#x9010;&#x6b65;&#x4e3a;&#x66f4;&#x5927;&#x5c4f;&#x5e55;&#x6dfb;&#x52a0;&#x6837;&#x5f0f;&#xff0c;&#x7b80;&#x5316; CSS &#x7ed3;&#x6784;&#xff09;&#x3001;&#x590d;&#x6742;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#xff08;&#x7ed3;&#x5408; and&#x3001;or &#x64cd;&#x4f5c;&#x7b26;&#xff0c;&#x4ee5;&#x53ca; prefers-color-scheme&#xff08;&#x6697;&#x6a21;&#x5f0f;&#xff09;&#x3001;hover&#xff08;&#x89e6;&#x63a7;/&#x9f20;&#x6807;&#xff09;&#x3001;orientation&#xff08;&#x6a2a;&#x5c4f;/&#x7ad6;&#x5c4f;&#xff09;&#x7b49;&#x7279;&#x6027;&#x8fdb;&#x884c;&#x66f4;&#x7cbe;&#x7ec6;&#x7684;&#x63a7;&#x5236;&#xff09;&#x3002;</p>',
+                          children: [],
+                          payload: { tag: "li", lines: "1619,1623" },
+                        },
+                        {
+                          content:
+                            '\n<p data-lines="1623,1624">Flexbox &#x548c; Grid &#x5e03;&#x5c40;&#xff0c;Flexbox &#x64c5;&#x957f;&#x4e00;&#x7ef4;&#x5e03;&#x5c40;&#xff0c;&#x5982;&#x5bfc;&#x822a;&#x83dc;&#x5355;&#x3001;&#x5361;&#x7247;&#x5217;&#x8868;&#x7b49;&#xff0c;&#x901a;&#x8fc7; flex-grow&#x3001;flex-shrink &#x548c; flex-basis &#x7b49;&#x5c5e;&#x6027;&#xff0c;&#x7075;&#x6d3b;&#x63a7;&#x5236;&#x9879;&#x76ee;&#x5728;&#x5bb9;&#x5668;&#x4e2d;&#x7684;&#x4f38;&#x7f29;&#x548c;&#x7a7a;&#x95f4;&#x5206;&#x914d;&#xff1b;CSS Grid &#x64c5;&#x957f;&#x4e8c;&#x7ef4;&#x5e03;&#x5c40;&#xff0c;&#x7528;&#x4e8e;&#x521b;&#x5efa;&#x590d;&#x6742;&#x7684;&#x9875;&#x9762;&#x7f51;&#x683c;&#x7ed3;&#x6784;&#xff0c;&#x53ef;&#x4ee5;&#x8f7b;&#x677e;&#x5b9a;&#x4e49;&#x884c;&#x548c;&#x5217;&#xff0c;&#x5b9e;&#x73b0;&#x66f4;&#x5f3a;&#x5927;&#x7684;&#x5e03;&#x5c40;&#x63a7;&#x5236;&#x3002;&#x89c6;&#x53e3;&#x5355;&#x4f4d; (Viewport Units)&#xff0c;vw (viewport width), vh (viewport height), vmin, vmax &#x53ef;&#x4ee5;&#x7528;&#x4e8e;&#x521b;&#x5efa;&#x4e0e;&#x89c6;&#x53e3;&#x5927;&#x5c0f;&#x76f4;&#x63a5;&#x76f8;&#x5173;&#x7684;&#x5b57;&#x4f53;&#x5927;&#x5c0f;&#x3001;&#x5143;&#x7d20;&#x5c3a;&#x5bf8;&#x7b49;&#xff0c;&#x5b9e;&#x73b0;&#x66f4;&#x7ec6;&#x81f4;&#x7684;&#x54cd;&#x5e94;&#x5f0f;&#x6548;&#x679c;&#x3002;</p>',
+                          children: [],
+                          payload: { tag: "li", lines: "1623,1624" },
+                        },
+                        {
+                          content:
+                            '\n<p data-lines="1624,1625">&#x81ea;&#x5b9a;&#x4e49;&#x5c5e;&#x6027; (CSS Variables)&#xff0c;&#x7ed3;&#x5408;&#x5a92;&#x4f53;&#x67e5;&#x8be2;&#xff0c;&#x53ef;&#x4ee5;&#x52a8;&#x6001;&#x6539;&#x53d8; CSS &#x53d8;&#x91cf;&#x7684;&#x503c;&#xff0c;&#x4ece;&#x800c;&#x5b9e;&#x73b0;&#x66f4;&#x7075;&#x6d3b;&#x7684;&#x4e3b;&#x9898;&#x548c;&#x54cd;&#x5e94;&#x5f0f;&#x8c03;&#x6574;&#x3002;</p>',
+                          children: [],
+                          payload: { tag: "li", lines: "1624,1626" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1613,1614" },
+                    },
+                    {
+                      content:
+                        "<strong>Touch &#x4e8b;&#x4ef6;&#x3001;&#x624b;&#x52bf;&#x5e93;&#x7684;&#x4f7f;&#x7528;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1626,1627" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x79fb;&#x52a8;&#x7aef;&#x7279;&#x6709;&#x7684;&#x6027;&#x80fd;&#x4f18;&#x5316;&#x7b56;&#x7565;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1640,1641" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1609,1610" },
+                },
+                {
+                  content:
+                    "<strong>&#x5fae;&#x524d;&#x7aef;&#x67b6;&#x6784;&#x6df1;&#x5ea6;&#x5b9e;&#x8df5;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x5177;&#x4f53;&#x5b9e;&#x73b0;&#x65b9;&#x6848;&#x5bf9;&#x6bd4;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1652,1653" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x6838;&#x5fc3;&#x6311;&#x6218;&#x4e0e;&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>",
+                      children: [
+                        {
+                          content: "",
+                          children: [
+                            {
+                              content:
+                                "CSS Modules&#xff1a;&#x901a;&#x8fc7;&#x6784;&#x5efa;&#x65f6;&#x54c8;&#x5e0c;&#x5316;&#x7c7b;&#x540d;&#xff0c;&#x786e;&#x4fdd;&#x6837;&#x5f0f;&#x5c40;&#x90e8;&#x4f5c;&#x7528;&#x57df;&#x3002;CSS-in-JS&#xff0c;&#x81ea;&#x52a8;&#x751f;&#x6210;&#x552f;&#x4e00;&#x7c7b;&#x540d;&#xff0c;&#x5b9e;&#x73b0;&#x6837;&#x5f0f;&#x5c01;&#x88c5;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1668,1669" },
+                            },
+                            {
+                              content:
+                                "Shadow DOM&#xff1a;Web Components &#x4e2d;&#x7684; Shadow DOM &#x63d0;&#x4f9b;&#x4e86;&#x539f;&#x751f;&#x7684;&#x6837;&#x5f0f;&#x9694;&#x79bb;&#x80fd;&#x529b;&#xff0c;&#x4f46;&#x517c;&#x5bb9;&#x6027;&#x53ef;&#x80fd;&#x5b58;&#x5728;&#x95ee;&#x9898;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1669,1670" },
+                            },
+                            {
+                              content:
+                                "BEM/&#x547d;&#x540d;&#x7ea6;&#x5b9a;&#xff1a;&#x4e25;&#x683c;&#x9075;&#x5faa;&#x547d;&#x540d;&#x89c4;&#x8303;&#xff0c;&#x867d;&#x7136;&#x4e0d;&#x80fd;&#x5b8c;&#x5168;&#x907f;&#x514d;&#x51b2;&#x7a81;&#xff0c;&#x4f46;&#x80fd;&#x964d;&#x4f4e;&#x98ce;&#x9669;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1670,1671" },
+                            },
+                            {
+                              content:
+                                "Qiankun &#x7684;&#x6837;&#x5f0f;&#x6c99;&#x7bb1;&#xff1a;Qiankun &#x5185;&#x7f6e;&#x4e86;&#x6837;&#x5f0f;&#x6c99;&#x7bb1;&#xff0c;&#x901a;&#x8fc7;&#x52a8;&#x6001;&#x6dfb;&#x52a0;/&#x79fb;&#x9664;&#x6837;&#x5f0f;&#x8868;&#x6216;&#x4fee;&#x6539; CSS &#x9009;&#x62e9;&#x5668;&#x6765;&#x9694;&#x79bb;&#x6837;&#x5f0f;&#xff0c;&#x6709;&#x6548;&#x9632;&#x6b62;&#x6837;&#x5f0f;&#x6c61;&#x67d3;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1671,1673" },
+                            },
+                          ],
+                          payload: { tag: "ul", lines: "1668,1673" },
+                        },
+                        {
+                          content: "",
+                          children: [
+                            {
+                              content:
+                                "Qiankun &#x7684; JS &#x6c99;&#x7bb1;&#xff1a;Qiankun &#x5185;&#x7f6e;&#x4e86; JS &#x6c99;&#x7bb1;&#xff0c;&#x901a;&#x8fc7;&#x4ee3;&#x7406; window &#x5bf9;&#x8c61;&#x548c; document &#x5bf9;&#x8c61;&#xff0c;&#x9694;&#x79bb;&#x6bcf;&#x4e2a;&#x5fae;&#x5e94;&#x7528;&#x7684; JavaScript &#x6267;&#x884c;&#x73af;&#x5883;&#xff0c;&#x9632;&#x6b62;&#x5168;&#x5c40;&#x53d8;&#x91cf;&#x6c61;&#x67d3;&#x548c;&#x526f;&#x4f5c;&#x7528;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1675,1676" },
+                            },
+                            {
+                              content:
+                                "Webpack Module Federation &#x7684;&#x5171;&#x4eab;&#x4f9d;&#x8d56;&#xff1a;&#x901a;&#x8fc7;&#x914d;&#x7f6e;&#x5171;&#x4eab;&#x4f9d;&#x8d56;&#xff0c;&#x786e;&#x4fdd;&#x6240;&#x6709;&#x5fae;&#x5e94;&#x7528;&#x4f7f;&#x7528;&#x76f8;&#x540c;&#x7248;&#x672c;&#x7684;&#x5171;&#x4eab;&#x5e93;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1676,1677" },
+                            },
+                            {
+                              content:
+                                "&#x4e25;&#x683c;&#x7684;&#x6a21;&#x5757;&#x5316;&#xff1a;&#x9f13;&#x52b1;&#x5fae;&#x5e94;&#x7528;&#x5185;&#x90e8;&#x4f7f;&#x7528; ES Modules&#xff0c;&#x907f;&#x514d;&#x5168;&#x5c40;&#x53d8;&#x91cf;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1677,1678" },
+                            },
+                            {
+                              content:
+                                "Web Components&#xff1a;&#x5229;&#x7528; Web Components &#x7684;&#x5c01;&#x88c5;&#x6027;&#xff0c;&#x5c06;&#x7ec4;&#x4ef6;&#x9694;&#x79bb;&#x5728;&#x72ec;&#x7acb;&#x7684;&#x81ea;&#x5b9a;&#x4e49;&#x5143;&#x7d20;&#x4e2d;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1678,1680" },
+                            },
+                          ],
+                          payload: { tag: "ul", lines: "1675,1680" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1660,1661" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x8868;&#xff1a;&#x5fae;&#x524d;&#x7aef;&#x5b9e;&#x73b0;&#x65b9;&#x6848;&#x5bf9;&#x6bd4; (Module Federation vs. Single-SPA vs. Qiankun)</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="1682,1694">\n<thead data-lines="1682,1683">\n<tr data-lines="1682,1683">\n<th style="text-align:left">&#x7279;&#x6027;/&#x65b9;&#x6848;</th>\n<th style="text-align:left"><a href="https://webpack.js.org/concepts/module-federation/">Module Federation</a> (<a href="https://webpack.js.org/">Webpack</a> 5)</th>\n<th style="text-align:left"><a href="https://single-spa.js.org/">Single-SPA</a></th>\n<th style="text-align:left">Qiankun (&#x57fa;&#x4e8e; <a href="https://single-spa.js.org/">Single-SPA</a>)</th>\n</tr>\n</thead>\n<tbody data-lines="1684,1694">\n<tr data-lines="1684,1685">\n<td style="text-align:left"><strong>&#x52a0;&#x8f7d;&#x673a;&#x5236;</strong></td>\n<td style="text-align:left">&#x6784;&#x5efa;&#x65f6;&#x5171;&#x4eab;&#x6a21;&#x5757;&#xff0c;&#x8fd0;&#x884c;&#x65f6;&#x52a8;&#x6001;&#x52a0;&#x8f7d;</td>\n<td style="text-align:left">&#x663e;&#x5f0f;&#x58f0;&#x660e;&#x5fae;&#x5e94;&#x7528;&#x751f;&#x547d;&#x5468;&#x671f;&#xff0c;&#x901a;&#x8fc7;&#x8def;&#x7531;&#x7ba1;&#x7406;&#x52a0;&#x8f7d;/&#x5378;&#x8f7d;</td>\n<td style="text-align:left">&#x52a8;&#x6001;&#x52a0;&#x8f7d;&#x5fae;&#x5e94;&#x7528;&#xff0c;&#x5355;&#x4e00;&#x5165;&#x53e3;&#x7ba1;&#x7406;&#xff0c;&#x6309;&#x9700;&#x52a0;&#x8f7d;</td>\n</tr>\n<tr data-lines="1685,1686">\n<td style="text-align:left"><strong>&#x6846;&#x67b6;&#x65e0;&#x5173;&#x6027;</strong></td>\n<td style="text-align:left">&#x7406;&#x8bba;&#x4e0a;&#x53ef;&#x5171;&#x4eab;&#x4efb;&#x4f55; JS &#x6a21;&#x5757;&#xff0c;&#x4f46;&#x5f3a;&#x4f9d;&#x8d56; <a href="https://webpack.js.org/">Webpack</a></td>\n<td style="text-align:left">&#x6838;&#x5fc3;&#x4f18;&#x52bf;&#xff0c;&#x652f;&#x6301;&#x591a;&#x79cd;&#x524d;&#x7aef;&#x6846;&#x67b6;&#x6df7;&#x5408;</td>\n<td style="text-align:left">&#x652f;&#x6301;&#x591a;&#x79cd;&#x524d;&#x7aef;&#x6846;&#x67b6;&#x6df7;&#x5408;</td>\n</tr>\n<tr data-lines="1686,1687">\n<td style="text-align:left"><strong>&#x72b6;&#x6001;&#x7ba1;&#x7406;</strong></td>\n<td style="text-align:left">&#x4e0d;&#x63d0;&#x4f9b;&#x5185;&#x7f6e;&#x65b9;&#x6848;&#xff0c;&#x9700;&#x81ea;&#x884c;&#x5b9e;&#x73b0;</td>\n<td style="text-align:left">&#x4e0d;&#x63d0;&#x4f9b;&#x5185;&#x7f6e;&#x65b9;&#x6848;&#xff0c;&#x9700;&#x81ea;&#x884c;&#x5b9e;&#x73b0;</td>\n<td style="text-align:left">&#x63d0;&#x4f9b;&#x7b80;&#x5355;&#x5168;&#x5c40;&#x4e8b;&#x4ef6;&#x603b;&#x7ebf;&#xff0c;&#x65b9;&#x4fbf;&#x5171;&#x4eab;&#x72b6;&#x6001;</td>\n</tr>\n<tr data-lines="1687,1688">\n<td style="text-align:left"><strong>&#x5171;&#x4eab;&#x4f9d;&#x8d56;</strong></td>\n<td style="text-align:left">&#x539f;&#x751f;&#x652f;&#x6301;&#xff0c;&#x53ef;&#x914d;&#x7f6e;&#x53bb;&#x91cd;</td>\n<td style="text-align:left">&#x9700;&#x901a;&#x8fc7; SystemJS + Import Maps &#x7b49;&#x5916;&#x90e8;&#x673a;&#x5236;</td>\n<td style="text-align:left">&#x53ef;&#x901a;&#x8fc7; <a href="https://single-spa.js.org/">Single-SPA</a> &#x673a;&#x5236;&#x6216; Qiankun &#x7684;&#x4f18;&#x5316;&#x5b9e;&#x73b0;</td>\n</tr>\n<tr data-lines="1688,1689">\n<td style="text-align:left"><strong>&#x6837;&#x5f0f;&#x9694;&#x79bb;</strong></td>\n<td style="text-align:left">&#x4e0d;&#x63d0;&#x4f9b;&#x5185;&#x7f6e;&#x65b9;&#x6848;&#xff0c;&#x9700;&#x7ed3;&#x5408; <a href="https://github.com/css-modules/css-modules">CSS Modules</a> &#x7b49;</td>\n<td style="text-align:left">&#x4e0d;&#x63d0;&#x4f9b;&#x5185;&#x7f6e;&#x65b9;&#x6848;&#xff0c;&#x9700;&#x7ed3;&#x5408; <a href="https://github.com/css-modules/css-modules">CSS Modules</a> &#x7b49;</td>\n<td style="text-align:left">&#x5185;&#x7f6e;&#x6837;&#x5f0f;&#x6c99;&#x7bb1;&#xff0c;&#x6709;&#x6548;&#x9694;&#x79bb;&#x6837;&#x5f0f;&#x51b2;&#x7a81;</td>\n</tr>\n<tr data-lines="1689,1690">\n<td style="text-align:left"><strong>JS &#x9694;&#x79bb;</strong></td>\n<td style="text-align:left">&#x4e0d;&#x63d0;&#x4f9b;&#x5185;&#x7f6e;&#x65b9;&#x6848;&#xff0c;&#x9700;&#x4e25;&#x683c;&#x6a21;&#x5757;&#x5316;&#x6216;&#x624b;&#x52a8;&#x5904;&#x7406;</td>\n<td style="text-align:left">&#x4e0d;&#x63d0;&#x4f9b;&#x5185;&#x7f6e;&#x65b9;&#x6848;&#xff0c;&#x9700;&#x4e25;&#x683c;&#x6a21;&#x5757;&#x5316;&#x6216;&#x624b;&#x52a8;&#x5904;&#x7406;</td>\n<td style="text-align:left">&#x5185;&#x7f6e; JS &#x6c99;&#x7bb1;&#xff0c;&#x9694;&#x79bb;&#x5168;&#x5c40;&#x53d8;&#x91cf;&#x548c;&#x526f;&#x4f5c;&#x7528;</td>\n</tr>\n<tr data-lines="1690,1691">\n<td style="text-align:left"><strong>&#x6253;&#x5305;&#x5de5;&#x5177;&#x8981;&#x6c42;</strong></td>\n<td style="text-align:left">&#x5f3a;&#x4f9d;&#x8d56; <a href="https://webpack.js.org/">Webpack</a> 5 &#x53ca;&#x4ee5;&#x4e0a;</td>\n<td style="text-align:left">&#x4efb;&#x4f55;&#x6253;&#x5305;&#x5de5;&#x5177;&#xff0c;&#x4f46;&#x9700;&#x914d;&#x5408;&#x6a21;&#x5757;&#x52a0;&#x8f7d;&#x5668;</td>\n<td style="text-align:left">&#x4efb;&#x4f55;&#x6253;&#x5305;&#x5de5;&#x5177;&#xff0c;&#x4f46;&#x9700;&#x914d;&#x5408;&#x6a21;&#x5757;&#x52a0;&#x8f7d;&#x5668;</td>\n</tr>\n<tr data-lines="1691,1692">\n<td style="text-align:left"><strong>&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</strong></td>\n<td style="text-align:left">&#x8f83;&#x9ad8;&#xff0c;&#x9700;&#x6df1;&#x5165;&#x7406;&#x89e3; <a href="https://webpack.js.org/">Webpack</a> &#x914d;&#x7f6e;</td>\n<td style="text-align:left">&#x8f83;&#x9ad8;&#xff0c;&#x9700;&#x7406;&#x89e3;&#x5fae;&#x524d;&#x7aef;&#x751f;&#x547d;&#x5468;&#x671f;&#x548c;&#x6982;&#x5ff5;</td>\n<td style="text-align:left">&#x76f8;&#x5bf9;&#x8f83;&#x4f4e;&#xff0c;&#x63d0;&#x4f9b;&#x66f4;&#x591a;&#x5f00;&#x7bb1;&#x5373;&#x7528;&#x529f;&#x80fd;</td>\n</tr>\n<tr data-lines="1692,1693">\n<td style="text-align:left"><strong>&#x793e;&#x533a;&#x4e0e;&#x751f;&#x6001;</strong></td>\n<td style="text-align:left">&#x6d3b;&#x8dc3;&#xff0c;&#x4f5c;&#x4e3a; <a href="https://webpack.js.org/">Webpack</a> &#x5185;&#x7f6e;&#x529f;&#x80fd;&#x6301;&#x7eed;&#x53d1;&#x5c55;</td>\n<td style="text-align:left">&#x6d3b;&#x8dc3;&#xff0c;&#x6709;&#x5927;&#x91cf;&#x6587;&#x6863;&#x548c;&#x793e;&#x533a;&#x8d44;&#x6e90;</td>\n<td style="text-align:left">&#x6d3b;&#x8dc3;&#xff0c;&#x5c24;&#x5176;&#x5728;&#x56fd;&#x5185;&#xff0c;&#x529f;&#x80fd;&#x66f4;&#x5b8c;&#x5584;</td>\n</tr>\n<tr data-lines="1693,1694">\n<td style="text-align:left"><strong>&#x7406;&#x60f3;&#x573a;&#x666f;</strong></td>\n<td style="text-align:left">&#x5927;&#x578b; <a href="https://webpack.js.org/">Webpack</a> &#x9879;&#x76ee;&#xff0c;&#x9700;&#x8981;&#x7ec6;&#x7c92;&#x5ea6;&#x6a21;&#x5757;&#x5171;&#x4eab;&#x548c;&#x4f9d;&#x8d56;&#x4f18;&#x5316;</td>\n<td style="text-align:left">&#x9700;&#x8981;&#x96c6;&#x6210;&#x591a;&#x79cd;&#x6846;&#x67b6;&#x3001;&#x9010;&#x6b65;&#x62c6;&#x5206;&#x5355;&#x4f53;&#x5e94;&#x7528;&#x3001;&#x4e25;&#x683c;&#x63a7;&#x5236;&#x751f;&#x547d;&#x5468;&#x671f;</td>\n<td style="text-align:left">&#x8ffd;&#x6c42;&#x5feb;&#x901f;&#x5b9e;&#x73b0;&#x5fae;&#x524d;&#x7aef;&#x3001;&#x9700;&#x8981;&#x5f3a;&#x9694;&#x79bb;&#x80fd;&#x529b;&#x3001;&#x5bf9;&#x6027;&#x80fd;&#x548c;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#x6709;&#x8f83;&#x9ad8;&#x8981;&#x6c42;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "1682,1694" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1680,1681" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1648,1649" },
+                },
+                {
+                  content:
+                    "<strong>&#x90e8;&#x7f72;&#x4e0e; DevOps for Frontend</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>CI/CD &#x6d41;&#x6c34;&#x7ebf;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1703,1704" },
+                    },
+                    {
+                      content: "<strong>&#x5bb9;&#x5668;&#x5316;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1707,1708" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x9759;&#x6001;&#x8d44;&#x6e90;&#x4e0e; CDN &#x7b56;&#x7565;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "1713,1714" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x6df1;&#x5165;&#x63a2;&#x8ba8;&#x7f13;&#x5b58;&#x548c; CDN &#x914d;&#x7f6e;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5f3a;&#x7f13;&#x5b58;&#x4e0e;&#x534f;&#x5546;&#x7f13;&#x5b58;</strong>&#xff1a;&#x7406;&#x89e3; Cache-Control&#xff08;max-age&#x3001;no-cache&#x3001;no-store &#x7b49;&#xff09;&#x548c; Expires &#x5b9e;&#x73b0;&#x5f3a;&#x7f13;&#x5b58;&#xff0c;&#x4ee5;&#x53ca; Last-Modified/If-Modified-Since &#x548c; ETag/If-None-Match &#x5b9e;&#x73b0;&#x534f;&#x5546;&#x7f13;&#x5b58;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1721,1722" },
+                        },
+                        {
+                          content:
+                            "<strong>CDN &#x914d;&#x7f6e;</strong>&#xff1a;&#x914d;&#x7f6e; CDN &#x65f6;&#xff0c;&#x9700;&#x8981;&#x6ce8;&#x610f;&#x7f13;&#x5b58;&#x89c4;&#x5219;&#x3001;&#x56de;&#x6e90;&#x7b56;&#x7565;&#x3001;HTTPS &#x914d;&#x7f6e;&#x3001;Gzip/Brotli &#x538b;&#x7f29;&#x3001;&#x8de8;&#x57df;&#x8d44;&#x6e90;&#x5171;&#x4eab;&#xff08;CORS&#xff09;&#x5934;&#x7b49;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1722,1723" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7248;&#x672c;&#x63a7;&#x5236;&#x4e0e;&#x7f13;&#x5b58;&#x5931;&#x6548;</strong>&#xff1a;&#x5bf9;&#x4e8e; JS/CSS &#x6587;&#x4ef6;&#xff0c;&#x901a;&#x5e38;&#x5728;&#x6587;&#x4ef6;&#x540d;&#x4e2d;&#x52a0;&#x5165;&#x5185;&#x5bb9;&#x54c8;&#x5e0c;&#xff08;&#x5982; bundle.123abc.js&#xff09;&#xff0c;&#x5f53;&#x6587;&#x4ef6;&#x5185;&#x5bb9;&#x53d8;&#x5316;&#x65f6;&#xff0c;&#x6587;&#x4ef6;&#x540d;&#x4e5f;&#x968f;&#x4e4b;&#x53d8;&#x5316;&#xff0c;&#x4ece;&#x800c;&#x5f3a;&#x5236;&#x6d4f;&#x89c8;&#x5668;&#x52a0;&#x8f7d;&#x65b0;&#x6587;&#x4ef6;&#xff0c;&#x5b9e;&#x73b0;&#x7f13;&#x5b58;&#x5931;&#x6548;&#x3002;&#x5bf9;&#x4e8e;&#x56fe;&#x7247;&#x7b49;&#x8d44;&#x6e90;&#xff0c;&#x53ef;&#x4ee5;&#x91c7;&#x7528;&#x7c7b;&#x4f3c;&#x7b56;&#x7565;&#x6216;&#x5b9a;&#x671f;&#x66f4;&#x65b0; URL&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1723,1725" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1719,1720" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1699,1700" },
+                },
+                {
+                  content:
+                    "<strong>&#x6cd5;&#x5f8b;&#x3001;&#x5408;&#x89c4;&#x4e0e;&#x9690;&#x79c1;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>GDPR, CCPA &#x7b49;&#x9690;&#x79c1;&#x6cd5;&#x89c4;&#x5bf9;&#x524d;&#x7aef;&#x7684;&#x8981;&#x6c42;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x7528;&#x6237;&#x540c;&#x610f; (Consent)</strong>&#xff1a;&#x5728;&#x6536;&#x96c6;&#x3001;&#x5904;&#x7406;&#x7528;&#x6237;&#x4e2a;&#x4eba;&#x6570;&#x636e;&#xff08;&#x5305;&#x62ec;&#x901a;&#x8fc7; Cookie&#x3001;&#x8ddf;&#x8e2a;&#x5668;&#x3001;&#x5206;&#x6790;&#x5de5;&#x5177;&#x6536;&#x96c6;&#x7684;&#x6570;&#x636e;&#xff09;&#x4e4b;&#x524d;&#xff0c;&#x5fc5;&#x987b;&#x83b7;&#x5f97;&#x7528;&#x6237;&#x7684;&#x660e;&#x786e;&#x3001;&#x77e5;&#x60c5;&#x540c;&#x610f;&#x3002;&#x524d;&#x7aef;&#x9700;&#x8981;&#x5b9e;&#x73b0;&#x540c;&#x610f;&#x7ba1;&#x7406;&#x5e73;&#x53f0;&#xff08;Consent Management Platform, CMP&#xff09;&#xff0c;&#x5411;&#x7528;&#x6237;&#x6e05;&#x6670;&#x5c55;&#x793a;&#x6570;&#x636e;&#x6536;&#x96c6;&#x76ee;&#x7684;&#xff0c;&#x5e76;&#x63d0;&#x4f9b;&#x6613;&#x4e8e;&#x64cd;&#x4f5c;&#x7684;&#x540c;&#x610f;/&#x62d2;&#x7edd;&#x9009;&#x9879;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1735,1736" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6570;&#x636e;&#x6700;&#x5c0f;&#x5316;</strong>&#xff1a;&#x53ea;&#x6536;&#x96c6;&#x5fc5;&#x8981;&#x7684;&#x4e2a;&#x4eba;&#x6570;&#x636e;&#x3002;&#x524d;&#x7aef;&#x5e94;&#x907f;&#x514d;&#x8fc7;&#x5ea6;&#x6536;&#x96c6;&#x7528;&#x6237;&#x6570;&#x636e;&#xff0c;&#x5e76;&#x786e;&#x4fdd;&#x6570;&#x636e;&#x5728;&#x4f20;&#x8f93;&#x548c;&#x5b58;&#x50a8;&#x8fc7;&#x7a0b;&#x4e2d;&#x7684;&#x5b89;&#x5168;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1736,1737" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7528;&#x6237;&#x6743;&#x5229;</strong>&#xff1a;&#x7528;&#x6237;&#x6709;&#x6743;&#x8bbf;&#x95ee;&#x3001;&#x66f4;&#x6b63;&#x3001;&#x5220;&#x9664;&#x5176;&#x4e2a;&#x4eba;&#x6570;&#x636e;&#xff0c;&#x5e76;&#x53cd;&#x5bf9;&#x6570;&#x636e;&#x5904;&#x7406;&#x3002;&#x524d;&#x7aef;&#x53ef;&#x80fd;&#x9700;&#x8981;&#x63d0;&#x4f9b;&#x754c;&#x9762;&#x6216;&#x529f;&#x80fd;&#xff0c;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x884c;&#x4f7f;&#x5176;&#x6743;&#x5229;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1737,1738" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x900f;&#x660e;&#x5ea6;</strong>&#xff1a;&#x524d;&#x7aef;&#x5e94;&#x7528;&#x5e94;&#x6e05;&#x6670;&#x544a;&#x77e5;&#x7528;&#x6237;&#x6570;&#x636e;&#x6536;&#x96c6;&#x7684;&#x7c7b;&#x578b;&#x3001;&#x76ee;&#x7684;&#x548c;&#x5904;&#x7406;&#x65b9;&#x5f0f;&#xff0c;&#x901a;&#x5e38;&#x901a;&#x8fc7;&#x9690;&#x79c1;&#x653f;&#x7b56;&#x548c; Cookie &#x653f;&#x7b56;&#x8fdb;&#x884c;&#x8bf4;&#x660e;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1738,1739" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5b89;&#x5168;&#x63aa;&#x65bd;</strong>&#xff1a;&#x524d;&#x7aef;&#x5728;&#x6570;&#x636e;&#x4f20;&#x8f93;&#x8fc7;&#x7a0b;&#x4e2d;&#x5e94;&#x5f3a;&#x5236;&#x4f7f;&#x7528; HTTPS&#xff0c;&#x5e76;&#x786e;&#x4fdd;&#x654f;&#x611f;&#x6570;&#x636e;&#x5728;&#x5ba2;&#x6237;&#x7aef;&#x4e0d;&#x88ab;&#x6cc4;&#x9732;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1739,1741" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1731,1732" },
+                    },
+                    {
+                      content:
+                        "<strong>Cookie &#x7ba1;&#x7406;&#x4e0e;&#x7528;&#x6237;&#x540c;&#x610f;&#xff08;Consent Management&#xff09;&#x7684;&#x6700;&#x4f73;&#x5b9e;&#x8df5;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x660e;&#x786e;&#x533a;&#x5206; Cookie &#x7c7b;&#x578b;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x5fc5;&#x8981; Cookie</strong>&#xff1a;&#x7ef4;&#x6301;&#x7f51;&#x7ad9;&#x57fa;&#x672c;&#x529f;&#x80fd;&#xff08;&#x5982;&#x4f1a;&#x8bdd;&#x7ba1;&#x7406;&#x3001;&#x8d2d;&#x7269;&#x8f66;&#xff09;&#x6240;&#x9700;&#xff0c;&#x901a;&#x5e38;&#x65e0;&#x9700;&#x7528;&#x6237;&#x540c;&#x610f;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1746,1747" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x529f;&#x80fd;&#x6027; Cookie</strong>&#xff1a;&#x589e;&#x5f3a;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#xff08;&#x5982;&#x8bb0;&#x4f4f;&#x504f;&#x597d;&#x8bbe;&#x7f6e;&#xff09;&#xff0c;&#x53ef;&#x80fd;&#x9700;&#x8981;&#x540c;&#x610f;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1747,1748" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x5206;&#x6790;/&#x6027;&#x80fd; Cookie</strong>&#xff1a;&#x7528;&#x4e8e;&#x7f51;&#x7ad9;&#x5206;&#x6790;&#x548c;&#x6027;&#x80fd;&#x4f18;&#x5316;&#xff0c;&#x901a;&#x5e38;&#x9700;&#x8981;&#x540c;&#x610f;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1748,1749" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x8425;&#x9500;/&#x8ffd;&#x8e2a; Cookie</strong>&#xff1a;&#x7528;&#x4e8e;&#x4e2a;&#x6027;&#x5316;&#x5e7f;&#x544a;&#x548c;&#x7528;&#x6237;&#x8ffd;&#x8e2a;&#xff0c;&#x5fc5;&#x987b;&#x83b7;&#x5f97;&#x660e;&#x786e;&#x540c;&#x610f;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1749,1750" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "1745,1750" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5b9e;&#x65bd;&#x540c;&#x610f;&#x7ba1;&#x7406;&#x5e73;&#x53f0; (CMP)</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "&#x5728;&#x7528;&#x6237;&#x9996;&#x6b21;&#x8bbf;&#x95ee;&#x7f51;&#x7ad9;&#x65f6;&#xff0c;&#x901a;&#x8fc7;&#x5f39;&#x7a97;&#x6216;&#x6a2a;&#x5e45;&#x6e05;&#x6670;&#x544a;&#x77e5;&#x7528;&#x6237; Cookie &#x7684;&#x4f7f;&#x7528;&#x60c5;&#x51b5;&#xff0c;&#x5e76;&#x63d0;&#x4f9b;&#x8be6;&#x7ec6;&#x7684;&#x540c;&#x610f;&#x9009;&#x9879;&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x9009;&#x62e9;&#x63a5;&#x53d7;&#x54ea;&#x4e9b;&#x7c7b;&#x578b;&#x7684; Cookie&#xff09;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1751,1752" },
+                            },
+                            {
+                              content:
+                                "&#x5728;&#x7528;&#x6237;&#x672a;&#x660e;&#x786e;&#x540c;&#x610f;&#x4e4b;&#x524d;&#xff0c;&#x963b;&#x6b62;&#x975e;&#x5fc5;&#x8981;&#x7684; Cookie &#x548c;&#x8ffd;&#x8e2a;&#x811a;&#x672c;&#x7684;&#x52a0;&#x8f7d;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1752,1753" },
+                            },
+                            {
+                              content:
+                                "&#x63d0;&#x4f9b;&#x65b9;&#x4fbf;&#x7684;&#x754c;&#x9762;&#xff0c;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x968f;&#x65f6;&#x4fee;&#x6539;&#x5176;&#x540c;&#x610f;&#x504f;&#x597d;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1753,1754" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "1750,1754" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x524d;&#x7aef;&#x6280;&#x672f;&#x5b9e;&#x73b0;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x811a;&#x672c;&#x963b;&#x585e;</strong>&#xff1a;&#x5728;&#x83b7;&#x5f97;&#x7528;&#x6237;&#x540c;&#x610f;&#x4e4b;&#x524d;&#xff0c;&#x4f7f;&#x7528; JavaScript &#x52a8;&#x6001;&#x52a0;&#x8f7d;&#x6216;&#x963b;&#x585e;&#x975e;&#x5fc5;&#x8981;&#x7684;&#x7b2c;&#x4e09;&#x65b9;&#x811a;&#x672c;&#xff08;&#x5982; Google Analytics&#x3001;&#x5e7f;&#x544a;&#x811a;&#x672c;&#xff09;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1755,1756" },
+                            },
+                            {
+                              content:
+                                "<strong>Cookie &#x8bbe;&#x7f6e;&#x63a7;&#x5236;</strong>&#xff1a;&#x5728;&#x8bbe;&#x7f6e; Cookie &#x65f6;&#xff0c;&#x786e;&#x4fdd;&#x5176; SameSite &#x5c5e;&#x6027;&#x3001;Secure &#x5c5e;&#x6027;&#x548c; HttpOnly &#x5c5e;&#x6027;&#xff08;&#x5bf9;&#x4e8e;&#x540e;&#x7aef;&#x8bbe;&#x7f6e;&#x7684; Cookie&#xff09;&#x5f97;&#x5230;&#x6b63;&#x786e;&#x914d;&#x7f6e;&#xff0c;&#x4ee5;&#x589e;&#x5f3a;&#x5b89;&#x5168;&#x6027;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1756,1757" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x7528;&#x6237;&#x6570;&#x636e;&#x5220;&#x9664;</strong>&#xff1a;&#x5f53;&#x7528;&#x6237;&#x8bf7;&#x6c42;&#x5220;&#x9664;&#x5176;&#x6570;&#x636e;&#x65f6;&#xff0c;&#x524d;&#x7aef;&#x9700;&#x8981;&#x786e;&#x4fdd;&#x6e05;&#x9664;&#x672c;&#x5730;&#x5b58;&#x50a8;&#xff08;LocalStorage&#x3001;SessionStorage&#x3001;IndexedDB&#xff09;&#x4e2d;&#x7684;&#x76f8;&#x5173;&#x4fe1;&#x606f;&#xff0c;&#x5e76;&#x901a;&#x77e5;&#x540e;&#x7aef;&#x8fdb;&#x884c;&#x6570;&#x636e;&#x5220;&#x9664;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1757,1759" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "1754,1759" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1741,1742" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1727,1728" },
+                },
+              ],
+              payload: { tag: "h2", lines: "1270,1271" },
+            },
+            {
+              content:
+                "<strong>VI. &#x65b0;&#x5174;&#x6280;&#x672f;&#x548c;&#x4e13;&#x4e1a;&#x9886;&#x57df;</strong>",
+              children: [
+                {
+                  content:
+                    "<strong>&#x6e10;&#x8fdb;&#x5f0f; Web &#x5e94;&#x7528;&#x7a0b;&#x5e8f; (PWA)&#xff1a;&#x539f;&#x751f;&#x822c;&#x7684; Web &#x4f53;&#x9a8c;</strong>",
+                  children: [
+                    {
+                      content:
+                        "A. <strong>&#x8861;&#x91cf;&#x4e0e;&#x63d0;&#x5347;&#x6027;&#x80fd;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>PRPL Pattern (PRPL &#x6a21;&#x5f0f;):</strong> &#x7531; Google &#x63d0;&#x51fa;&#x7684;&#x3001;&#x7528;&#x4e8e;&#x63d0;&#x5347; Web &#x5e94;&#x7528;&#x52a0;&#x8f7d;&#x901f;&#x5ea6;&#x548c;&#x4ea4;&#x4e92;&#x54cd;&#x5e94;&#x901f;&#x5ea6;&#x7684;&#x6027;&#x80fd;&#x6a21;&#x5f0f;&#x3002;&#x5b83;&#x4ee3;&#x8868;&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>Push (&#x63a8;&#x9001;)&#xff1a;</strong> &#x4e3a;&#x521d;&#x59cb;&#x8def;&#x7531;&#x63a8;&#x9001;&#x5173;&#x952e;&#x8d44;&#x6e90;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1776,1777" },
+                            },
+                            {
+                              content:
+                                "<strong>Render (&#x6e32;&#x67d3;)&#xff1a;</strong> &#x6e32;&#x67d3;&#x521d;&#x59cb;&#x8def;&#x7531;&#xff0c;&#x5c3d;&#x5feb;&#x8ba9;&#x7528;&#x6237;&#x770b;&#x5230;&#x5185;&#x5bb9;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1777,1778" },
+                            },
+                            {
+                              content:
+                                "<strong>Pre-cache (&#x9884;&#x7f13;&#x5b58;)&#xff1a;</strong> &#x4f7f;&#x7528; Service Worker &#x9884;&#x7f13;&#x5b58;&#x5269;&#x4f59;&#x7684;&#x8def;&#x7531;&#x8d44;&#x6e90;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1778,1779" },
+                            },
+                            {
+                              content:
+                                "<strong>Lazy-load (&#x61d2;&#x52a0;&#x8f7d;)&#xff1a;</strong> &#x6309;&#x9700;&#x61d2;&#x52a0;&#x8f7d;&#x548c;&#x521b;&#x5efa;&#x5269;&#x4f59;&#x7684;&#x8def;&#x7531;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1779,1781" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "1775,1781" },
+                        },
+                        {
+                          content:
+                            "<strong>RAIL Model (RAIL &#x6a21;&#x578b;):</strong> &#x4ee5;&#x7528;&#x6237;&#x4e3a;&#x4e2d;&#x5fc3;&#x7684;&#x6027;&#x80fd;&#x6a21;&#x578b;&#xff0c;&#x7528;&#x4e8e;&#x8861;&#x91cf;&#x5e94;&#x7528;&#x7684;&#x6027;&#x80fd;&#x8868;&#x73b0;&#x3002;RAIL &#x4ee3;&#x8868;&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>Response (&#x54cd;&#x5e94;)&#xff1a;</strong> &#x5728; 100 &#x6beb;&#x79d2;&#x5185;&#x54cd;&#x5e94;&#x7528;&#x6237;&#x8f93;&#x5165;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1784,1785" },
+                            },
+                            {
+                              content:
+                                "<strong>Animation (&#x52a8;&#x753b;)&#xff1a;</strong> &#x52a8;&#x753b;&#x7684;&#x6bcf;&#x4e00;&#x5e27;&#x5728; 16 &#x6beb;&#x79d2;&#x5185;&#x5b8c;&#x6210;&#xff08;&#x5373; 60fps&#xff09;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1785,1786" },
+                            },
+                            {
+                              content:
+                                "<strong>Idle (&#x7a7a;&#x95f2;)&#xff1a;</strong> &#x5229;&#x7528;&#x4e3b;&#x7ebf;&#x7a0b;&#x7684;&#x7a7a;&#x95f2;&#x65f6;&#x95f4;&#x6765;&#x5b8c;&#x6210;&#x5ef6;&#x8fdf;&#x4efb;&#x52a1;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1786,1787" },
+                            },
+                            {
+                              content:
+                                "<strong>Load (&#x52a0;&#x8f7d;)&#xff1a;</strong> &#x5728; 1 &#x79d2;&#x5185;&#x52a0;&#x8f7d;&#x5b8c;&#x9996;&#x5c4f;&#x5185;&#x5bb9;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1787,1789" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "1783,1789" },
+                        },
+                        {
+                          content: "",
+                          children: [
+                            {
+                              content:
+                                "<strong>Performance Metrics (&#x6027;&#x80fd;&#x6307;&#x6807;):</strong> &#x6307;&#x7684;&#x662f;&#x50cf; LCP (&#x6700;&#x5927;&#x5185;&#x5bb9;&#x7ed8;&#x5236;)&#x3001;FID (&#x9996;&#x6b21;&#x8f93;&#x5165;&#x5ef6;&#x8fdf;)&#x3001;CLS (&#x7d2f;&#x79ef;&#x5e03;&#x5c40;&#x504f;&#x79fb;) &#x8fd9;&#x7c7b;&#x6838;&#x5fc3; Web &#x6307;&#x6807; (Core Web Vitals)&#x3002;&#x5b83;&#x4eec;&#x662f;&#x7528;&#x6765;&#x91cf;&#x5316; RAIL &#x6a21;&#x578b;&#x76ee;&#x6807;&#x7684;&#x5177;&#x4f53;&#x5de5;&#x5177;&#xff0c;&#x5e2e;&#x52a9;&#x4f60;&#x5224;&#x65ad;&#x4f60;&#x7684;&#x5e94;&#x7528;&#x5230;&#x5e95;&#x5feb;&#x4e0d;&#x5feb;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1791,1792" },
+                            },
+                            {
+                              content:
+                                '<strong>&#x4f7f;&#x7528; Lighthouse / DevTools&#xff1a;</strong> &#x8fd9;&#x4e24;&#x8005;&#x662f;&#x5b9e;&#x8df5;&#x5de5;&#x5177;&#x3002;Lighthouse &#x662f;&#x81ea;&#x52a8;&#x5316;&#x7684;&#x7f51;&#x7ad9;&#x8d28;&#x91cf;&#x8bc4;&#x4f30;&#x5de5;&#x5177;&#xff0c;&#x5b83;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x4e3a;&#x4f60;&#x5206;&#x6790; <a href="https://web.dev/progressive-web-apps/">PWA</a> &#x7684;&#x5404;&#x9879;&#x6307;&#x6807;&#x5e76;&#x7ed9;&#x51fa;&#x4f18;&#x5316;&#x5efa;&#x8bae;&#x3002;Chrome DevTools (&#x5f00;&#x53d1;&#x8005;&#x5de5;&#x5177;) &#x63d0;&#x4f9b;&#x4e86;&#x66f4;&#x6df1;&#x5165;&#x7684;&#x6027;&#x80fd;&#x5206;&#x6790;&#x9762;&#x677f;&#xff0c;&#x8ba9;&#x4f60;&#x80fd;&#x50cf;&#x4fa6;&#x63a2;&#x4e00;&#x6837;&#x627e;&#x5230;&#x6027;&#x80fd;&#x74f6;&#x9888;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1792,1794" },
+                            },
+                          ],
+                          payload: { tag: "ul", lines: "1791,1794" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1773,1774" },
+                    },
+                    {
+                      content:
+                        "B. <strong>&#x6d4f;&#x89c8;&#x5668; API</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>Service Workers:</strong> &#x8fd9;&#x662f; PWA &#x6280;&#x672f;&#x6808;&#x7684;&#x57fa;&#x77f3;&#x548c;&#x7075;&#x9b42;&#x3002;&#x5b83;&#x662f;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x80cc;&#x666f;&#x4e2d;&#x72ec;&#x7acb;&#x4e8e;&#x9875;&#x9762;&#x7684;&#x811a;&#x672c;&#xff0c;&#x80fd;&#x591f;&#x62e6;&#x622a;&#x548c;&#x5904;&#x7406;&#x7f51;&#x7edc;&#x8bf7;&#x6c42;&#x3002;&#x5b83;&#x8d4b;&#x4e88;&#x4e86; PWA &#x4e24;&#x5927;&#x8d85;&#x80fd;&#x529b;&#xff1a;",
+                          children: [],
+                          payload: { tag: "li", lines: "1798,1799" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x79bb;&#x7ebf;&#x8bbf;&#x95ee;</strong>&#xff1a;&#x5373;&#x4f7f;&#x8bbe;&#x5907;&#x6ca1;&#x6709;&#x7f51;&#x7edc;&#x8fde;&#x63a5;&#xff0c;Service Worker &#x4e5f;&#x80fd;&#x4ece;&#x7f13;&#x5b58;&#x4e2d;&#x8fd4;&#x56de;&#x5185;&#x5bb9;&#xff0c;&#x8ba9;&#x5e94;&#x7528;&#x53ef;&#x4ee5;&#x79bb;&#x7ebf;&#x4f7f;&#x7528;&#x3002;&#x8fd9;&#x662f;&#x5b9e;&#x73b0;&#x201c;&#x53ef;&#x9760;&#x201d;&#x7684;&#x5173;&#x952e;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1799,1800" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6d88;&#x606f;&#x63a8;&#x9001;</strong>&#xff1a;&#x5373;&#x4f7f;&#x7528;&#x6237;&#x5173;&#x95ed;&#x4e86;&#x6d4f;&#x89c8;&#x5668;&#x9875;&#x9762;&#xff0c;Service Worker &#x4e5f;&#x80fd;&#x63a5;&#x6536;&#x4ece;&#x670d;&#x52a1;&#x5668;&#x53d1;&#x6765;&#x7684;&#x63a8;&#x9001;&#x901a;&#x77e5;&#xff0c;&#x4ece;&#x800c;&#x53ef;&#x4ee5;&#x91cd;&#x65b0;&#x5438;&#x5f15;&#x7528;&#x6237;&#x56de;&#x6765;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1800,1801" },
+                        },
+                        {
+                          content:
+                            "<strong>Storage (&#x5b58;&#x50a8;):</strong> &#x5305;&#x62ec; Web Storage (LocalStorage, SessionStorage) &#x548c; IndexedDB &#x7b49;&#x3002;&#x4e3a;&#x4e86;&#x5b9e;&#x73b0;&#x79bb;&#x7ebf;&#x4f53;&#x9a8c;&#xff0c;&#x4f60;&#x5fc5;&#x987b;&#x80fd;&#x628a;&#x5e94;&#x7528;&#x6570;&#x636e;&#xff08;&#x5982;&#x6587;&#x7ae0;&#x5185;&#x5bb9;&#x3001;&#x7528;&#x6237;&#x4fe1;&#x606f;&#xff09;&#x5b58;&#x50a8;&#x5728;&#x7528;&#x6237;&#x7684;&#x8bbe;&#x5907;&#x4e0a;&#x3002;Service Worker &#x7ecf;&#x5e38;&#x4e0e;&#x8fd9;&#x4e9b;&#x5b58;&#x50a8; API &#x914d;&#x5408;&#x4f7f;&#x7528;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1801,1802" },
+                        },
+                        {
+                          content:
+                            "<strong>Web Sockets / Server Sent Events (SSE):</strong> &#x8fd9;&#x4e9b;&#x662f;&#x5b9e;&#x73b0;&#x5ba2;&#x6237;&#x7aef;&#x4e0e;&#x670d;&#x52a1;&#x5668;&#x4e4b;&#x95f4;&#x5b9e;&#x65f6;&#x53cc;&#x5411;&#x6216;&#x5355;&#x5411;&#x901a;&#x4fe1;&#x7684;&#x6280;&#x672f;&#x3002;&#x5b83;&#x4eec;&#x53ef;&#x4ee5;&#x8ba9; PWA &#x62e5;&#x6709;&#x5b9e;&#x65f6;&#x804a;&#x5929;&#x3001;&#x5b9e;&#x65f6;&#x6570;&#x636e;&#x66f4;&#x65b0;&#x7b49;&#x529f;&#x80fd;&#xff0c;&#x4f7f;&#x5176;&#x66f4;&#x5177;&#x52a8;&#x6001;&#x6027;&#x548c;&#x5438;&#x5f15;&#x529b;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1802,1803" },
+                        },
+                        {
+                          content:
+                            "<strong>Location (&#x5730;&#x7406;&#x4f4d;&#x7f6e;), Device Orientation (&#x8bbe;&#x5907;&#x65b9;&#x5411;), Payments (&#x652f;&#x4ed8;), Credentials (&#x51ed;&#x8bc1;&#x7ba1;&#x7406;):</strong> &#x8fd9;&#x4e9b; API &#x5141;&#x8bb8; Web &#x5e94;&#x7528;&#x8bbf;&#x95ee;&#x901a;&#x5e38;&#x53ea;&#x6709;&#x539f;&#x751f;&#x5e94;&#x7528;&#x624d;&#x80fd;&#x8bbf;&#x95ee;&#x7684;&#x8bbe;&#x5907;&#x786c;&#x4ef6;&#x548c;&#x7cfb;&#x7edf;&#x529f;&#x80fd;&#x3002;&#x80fd;&#x591f;&#x83b7;&#x53d6;&#x7528;&#x6237;&#x4f4d;&#x7f6e;&#x3001;&#x611f;&#x77e5;&#x8bbe;&#x5907;&#x65cb;&#x8f6c;&#x3001;&#x8c03;&#x7528;&#x539f;&#x751f;&#x652f;&#x4ed8;&#x754c;&#x9762;&#x7b49;&#xff0c;&#x6781;&#x5927;&#x5730;&#x6a21;&#x7cca;&#x4e86; Web &#x5e94;&#x7528;&#x548c;&#x539f;&#x751f;&#x5e94;&#x7528;&#x4e4b;&#x95f4;&#x7684;&#x754c;&#x9650;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1803,1804" },
+                        },
+                        {
+                          content:
+                            "<strong>Notifications (&#x901a;&#x77e5;):</strong> &#x901a;&#x5e38;&#x4e0e; Service Worker &#x914d;&#x5408;&#x4f7f;&#x7528;&#xff0c;&#x662f;&#x5b9e;&#x73b0;&#x6d88;&#x606f;&#x63a8;&#x9001;&#x7684;&#x5177;&#x4f53; API&#x3002;&#x8fd9;&#x662f; PWA &#x80fd;&#x591f;&#x50cf;&#x539f;&#x751f; App &#x4e00;&#x6837;&#xff0c;&#x5728;&#x7528;&#x6237;&#x4e0d;&#x6d3b;&#x8dc3;&#x65f6;&#x91cd;&#x65b0;&#x5438;&#x5f15;&#x5176;&#x6ce8;&#x610f;&#x529b;&#x7684;&#x6838;&#x5fc3;&#x529f;&#x80fd;&#xff0c;&#x662f;&#x201c;&#x6709;&#x5438;&#x5f15;&#x529b;&#x201d;&#x7684;&#x91cd;&#x8981;&#x4f53;&#x73b0;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1804,1806" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1794,1795" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1763,1764" },
+                },
+                {
+                  content:
+                    "<strong>WebAssembly (WASM)&#xff1a;&#x91ca;&#x653e; Web &#x5e73;&#x53f0;&#x7684;&#x539f;&#x751f;&#x6027;&#x80fd;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>WASM &#x7684;&#x6838;&#x5fc3;&#x4ef7;&#x503c;&#x4e0e;&#x9769;&#x547d;&#x6027;&#x5f71;&#x54cd;</strong>",
+                      children: [
+                        {
+                          content:
+                            '1. \n<p data-lines="1822,1824"><strong>&#x6781;&#x81f4;&#x7684;&#x6027;&#x80fd; (Near-Native Performance)</strong><br>\nWASM &#x7684;&#x6838;&#x5fc3;&#x5438;&#x5f15;&#x529b;&#x5728;&#x4e8e;&#x5176;&#x5353;&#x8d8a;&#x7684;&#x6027;&#x80fd;&#x3002;&#x7531;&#x4e8e;&#x5b83;&#x662f;&#x4e00;&#x79cd;&#x9884;&#x7f16;&#x8bd1;&#x7684;&#x3001;&#x9759;&#x6001;&#x7c7b;&#x578b;&#x7684;&#x4f4e;&#x7ea7;&#x4e8c;&#x8fdb;&#x5236;&#x683c;&#x5f0f;&#xff0c;&#x6d4f;&#x89c8;&#x5668;&#x53ef;&#x4ee5;&#x6781;&#x5feb;&#x5730;&#x5bf9;&#x5176;&#x8fdb;&#x884c;&#x9a8c;&#x8bc1;&#x548c;&#x7f16;&#x8bd1;&#x6210;&#x673a;&#x5668;&#x7801;&#xff0c;&#x8df3;&#x8fc7;&#x4e86; JavaScript &#x6240;&#x9700;&#x7684;&#x590d;&#x6742;&#x52a8;&#x6001;&#x89e3;&#x6790;&#x548c;&#x4f18;&#x5316;&#x8fc7;&#x7a0b;&#x3002;&#x8fd9;&#x4f7f;&#x5f97; WASM &#x5728;&#x5904;&#x7406; CPU &#x5bc6;&#x96c6;&#x578b;&#x4efb;&#x52a1;&#x65f6;&#xff0c;&#x80fd;&#x591f;&#x53d1;&#x6325;&#x51fa;&#x63a5;&#x8fd1;&#x539f;&#x751f;&#x4ee3;&#x7801;&#x7684;&#x6267;&#x884c;&#x6548;&#x7387;&#xff0c;&#x4e3a;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x8fd0;&#x884c;&#x91cd;&#x5ea6;&#x5e94;&#x7528;&#xff08;&#x5982;&#x4e13;&#x4e1a;&#x7ea7;&#x56fe;&#x50cf;/&#x89c6;&#x9891;&#x7f16;&#x8f91;&#x5668;&#x3001;&#x5927;&#x578b;&#x6e38;&#x620f;&#x3001;CAD &#x8f6f;&#x4ef6;&#xff09;&#x6253;&#x5f00;&#x4e86;&#x5927;&#x95e8;&#x3002;</p>',
+                          children: [],
+                          payload: {
+                            tag: "li",
+                            lines: "1822,1825",
+                            listIndex: 1,
+                          },
+                        },
+                        {
+                          content:
+                            '2. \n<p data-lines="1825,1827"><strong>&#x8bed;&#x8a00;&#x751f;&#x6001;&#x7684;&#x878d;&#x5408; (Bringing New Ecosystems to the Web)</strong><br>\nWASM &#x6700;&#x6df1;&#x8fdc;&#x7684;&#x5f71;&#x54cd;&#x4e4b;&#x4e00;&#xff0c;&#x662f;&#x5b83;&#x6253;&#x7834;&#x4e86; Web &#x5f00;&#x53d1;&#x957f;&#x671f;&#x4ee5;&#x6765;&#x7531; JavaScript &#x4e3b;&#x5bfc;&#x7684;&#x8bed;&#x8a00;&#x58c1;&#x5792;&#x3002;&#x5b83;&#x5145;&#x5f53;&#x4e86;&#x4e00;&#x5ea7;&#x6865;&#x6881;&#xff0c;&#x4f7f;&#x5f97;&#x6570;&#x5341;&#x5e74;&#x6765;&#x5728; C++&#x3001;Rust &#x7b49;&#x8bed;&#x8a00;&#x4e2d;&#x79ef;&#x7d2f;&#x7684;&#x3001;&#x6d77;&#x91cf;&#x7684;&#x3001;&#x7ecf;&#x8fc7;&#x5145;&#x5206;&#x9a8c;&#x8bc1;&#x7684;&#x9ad8;&#x6027;&#x80fd;&#x5e93;&#x548c;&#x5e94;&#x7528;&#xff08;&#x4f8b;&#x5982;&#xff0c;&#x56fe;&#x50cf;&#x5904;&#x7406;&#x5e93;&#x3001;&#x7269;&#x7406;&#x5f15;&#x64ce;&#x3001;&#x538b;&#x7f29;&#x7b97;&#x6cd5;&#xff09;&#x53ef;&#x4ee5;&#x88ab;&#x8f7b;&#x677e;&#x5730;&#x79fb;&#x690d;&#x5230; Web &#x5e73;&#x53f0;&#x4e0a;&#x3002;&#x5f00;&#x53d1;&#x8005;&#x65e0;&#x9700;&#x7528; JavaScript &#x91cd;&#x5199;&#x8fd9;&#x4e9b;&#x590d;&#x6742;&#x7684;&#x8f6e;&#x5b50;&#xff0c;&#x53ef;&#x4ee5;&#x76f4;&#x63a5;&#x590d;&#x7528;&#x6574;&#x4e2a;&#x539f;&#x751f;&#x751f;&#x6001;&#x7cfb;&#x7edf;&#x7684;&#x5f3a;&#x5927;&#x80fd;&#x529b;&#x3002;</p>',
+                          children: [],
+                          payload: {
+                            tag: "li",
+                            lines: "1825,1828",
+                            listIndex: 2,
+                          },
+                        },
+                        {
+                          content:
+                            '3. \n<p data-lines="1828,1830"><strong>&#x53ef;&#x9884;&#x6d4b;&#x7684;&#x6027;&#x80fd;&#x4e0e;&#x5b89;&#x5168;&#x6027; (Predictable Performance &amp; Security)</strong><br>\n&#x4e0e; JavaScript &#x4e0d;&#x540c;&#xff0c;WASM &#x7684;&#x6267;&#x884c;&#x6027;&#x80fd;&#x66f4;&#x52a0;&#x7a33;&#x5b9a;&#x548c;&#x53ef;&#x9884;&#x6d4b;&#xff0c;&#x56e0;&#x4e3a;&#x5b83;&#x907f;&#x514d;&#x4e86; JIT &#x7f16;&#x8bd1;&#x4e2d;&#x53ef;&#x80fd;&#x51fa;&#x73b0;&#x7684;&#x201c;&#x4f18;&#x5316; - &#x53bb;&#x4f18;&#x5316;&#x201d;&#x5faa;&#x73af;&#x3002;&#x540c;&#x65f6;&#xff0c;WASM &#x8fd0;&#x884c;&#x5728;&#x4e00;&#x4e2a;&#x4e0e; JavaScript &#x73af;&#x5883;&#x9694;&#x79bb;&#x7684;&#x3001;&#x5185;&#x5b58;&#x5b89;&#x5168;&#x7684;<strong>&#x6c99;&#x7bb1; (Sandbox)</strong> &#x4e2d;&#x3002;&#x5b83;&#x9ed8;&#x8ba4;&#x65e0;&#x6cd5;&#x76f4;&#x63a5;&#x8bbf;&#x95ee; DOM &#x6216;&#x4efb;&#x610f; Web API&#xff0c;&#x6240;&#x6709;&#x4e0e;&#x5916;&#x90e8;&#x4e16;&#x754c;&#x7684;&#x4ea4;&#x4e92;&#x90fd;&#x5fc5;&#x987b;&#x901a;&#x8fc7;&#x660e;&#x786e;&#x7684; JavaScript API &#x4f5c;&#x4e3a;&#x4e2d;&#x4ecb;&#x3002;&#x8fd9;&#x79cd;&#x8bbe;&#x8ba1;&#x786e;&#x4fdd;&#x4e86; WASM &#x6a21;&#x5757;&#x7684;&#x6267;&#x884c;&#x662f;&#x9ad8;&#x5ea6;&#x5b89;&#x5168;&#x7684;&#xff0c;&#x4e0d;&#x4f1a;&#x5bf9;&#x7528;&#x6237;&#x7cfb;&#x7edf;&#x9020;&#x6210;&#x5a01;&#x80c1;&#x3002;</p>',
+                          children: [],
+                          payload: {
+                            tag: "li",
+                            lines: "1828,1831",
+                            listIndex: 3,
+                          },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1820,1821" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x5e94;&#x7528;&#x573a;&#x666f;&#x4e0e;&#x672a;&#x6765;&#x5c55;&#x671b;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x91cd;&#x5ea6;&#x8ba1;&#x7b97;&#x578b; Web &#x5e94;&#x7528;</strong>&#xff1a;&#x4ece;&#x56fe;&#x50cf;&#x5904;&#x7406;&#xff08;&#x5982; Figma&#xff09;&#x3001;&#x89c6;&#x9891;&#x7f16;&#x8f91;&#x5230;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#xff0c;&#x4efb;&#x4f55;&#x9700;&#x8981;&#x5f3a;&#x5927;&#x8ba1;&#x7b97;&#x80fd;&#x529b;&#x7684;&#x5e94;&#x7528;&#x90fd;&#x53ef;&#x4ee5;&#x5c06;&#x6838;&#x5fc3;&#x7b97;&#x6cd5;&#x7528; Rust/C++ &#x7f16;&#x5199;&#x5e76;&#x7f16;&#x8bd1;&#x4e3a; WASM&#xff0c;&#x800c; UI &#x5c42;&#x5219;&#x7ee7;&#x7eed;&#x4f7f;&#x7528; React/Vue &#x7b49;&#x6846;&#x67b6;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1835,1836" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4ee3;&#x7801;&#x5e93;&#x4e0e;&#x7b97;&#x6cd5;&#x7684;&#x590d;&#x7528;</strong>&#xff1a;&#x5c06;&#x4e00;&#x4e2a;&#x5728;&#x670d;&#x52a1;&#x5668;&#x7aef;&#xff08;&#x5982; Node.js&#xff09;&#x548c;&#x5ba2;&#x6237;&#x7aef;&#x90fd;&#x9700;&#x8981;&#x4f7f;&#x7528;&#x7684;&#x590d;&#x6742;&#x7b97;&#x6cd5;&#xff08;&#x5982;&#x6570;&#x636e;&#x52a0;&#x89e3;&#x5bc6;&#x3001;&#x538b;&#x7f29;&#xff09;&#x7528;&#x652f;&#x6301;&#x7f16;&#x8bd1;&#x5230; WASM &#x7684;&#x8bed;&#x8a00;&#x7f16;&#x5199;&#xff0c;&#x53ef;&#x4ee5;&#x5b9e;&#x73b0;&#x4e00;&#x5957;&#x4ee3;&#x7801;&#xff0c;&#x4e24;&#x7aef;&#x590d;&#x7528;&#xff0c;&#x4fdd;&#x8bc1;&#x903b;&#x8f91;&#x7684;&#x4e00;&#x81f4;&#x6027;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1836,1837" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x63d2;&#x4ef6;&#x5316;&#x7cfb;&#x7edf;</strong>&#xff1a;&#x5141;&#x8bb8;&#x7b2c;&#x4e09;&#x65b9;&#x5f00;&#x53d1;&#x8005;&#x4ee5;&#x5b89;&#x5168;&#x3001;&#x9ad8;&#x6027;&#x80fd;&#x7684;&#x65b9;&#x5f0f;&#x4e3a; Web &#x5e94;&#x7528;&#x63d0;&#x4f9b;&#x63d2;&#x4ef6;&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x4e00;&#x4e2a;&#x5728;&#x7ebf;&#x97f3;&#x9891;&#x5de5;&#x4f5c;&#x7ad9;&#x53ef;&#x4ee5;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x52a0;&#x8f7d;&#x7528; C++ &#x7f16;&#x5199;&#x7684;&#x3001;&#x7f16;&#x8bd1;&#x6210; WASM &#x7684;&#x7b2c;&#x4e09;&#x65b9;&#x97f3;&#x9891;&#x6548;&#x679c;&#x5668;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "1837,1838" },
+                        },
+                        {
+                          content:
+                            '<strong>&#x65e0;&#x670d;&#x52a1;&#x5668;&#x4e0e;&#x8fb9;&#x7f18;&#x8ba1;&#x7b97;</strong>&#xff1a;WASM &#x7684;&#x8f7b;&#x91cf;&#x3001;&#x9ad8;&#x6548;&#x548c;&#x5b89;&#x5168;&#x7684;&#x7279;&#x6027;&#xff0c;&#x4f7f;&#x5176;&#x6210;&#x4e3a;&#x5728; <a href="https://workers.cloudflare.com/">Cloudflare Workers</a> &#x7b49;&#x8fb9;&#x7f18;&#x8ba1;&#x7b97;&#x73af;&#x5883;&#x4e2d;&#x8fd0;&#x884c;&#x4ee3;&#x7801;&#x7684;&#x7406;&#x60f3;&#x9009;&#x62e9;&#xff0c;&#x5b9e;&#x73b0;&#x4e86;&#x771f;&#x6b63;&#x7684;&#x5e73;&#x53f0;&#x65e0;&#x5173;&#x6027;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "1838,1840" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1831,1832" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1812,1813" },
+                },
+                {
+                  content:
+                    "<strong>&#x8de8;&#x5e73;&#x53f0;&#x5f00;&#x53d1;&#xff1a;&#x79fb;&#x52a8;&#x7aef; (React Native, Capacitor)&#xff0c;&#x684c;&#x9762;&#x7aef; (Electron, Tauri)</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x79fb;&#x52a8;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x5f00;&#x53d1;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x8868;&#x683c;&#xff1a;&#x79fb;&#x52a8;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x5f00;&#x53d1;&#x6846;&#x67b6;&#x6bd4;&#x8f83;</strong>",
+                          children: [
+                            {
+                              content:
+                                '<table data-lines="1855,1859">\n<thead data-lines="1855,1856">\n<tr data-lines="1855,1856">\n<th style="text-align:left">&#x6846;&#x67b6;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x6838;&#x5fc3;&#x6280;&#x672f;</th>\n<th style="text-align:left">&#x6e32;&#x67d3;&#xff08;&#x539f;&#x751f; UI/WebView&#xff09;</th>\n<th style="text-align:left">&#x539f;&#x751f;&#x529f;&#x80fd;&#x8bbf;&#x95ee;</th>\n<th style="text-align:left">&#x6027;&#x80fd;</th>\n<th style="text-align:left">&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</th>\n<th style="text-align:left"><a href="https://web.dev/progressive-web-apps/">PWA</a> &#x652f;&#x6301;</th>\n<th style="text-align:left">&#x7406;&#x60f3;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="1857,1859">\n<tr data-lines="1857,1858">\n<td style="text-align:left"><a href="https://reactnative.dev/"><strong>React Native</strong></a></td>\n<td style="text-align:left">JavaScript/Native</td>\n<td style="text-align:left">&#x539f;&#x751f; UI</td>\n<td style="text-align:left">&#x76f4;&#x63a5;&#x8bbf;&#x95ee;&#x539f;&#x751f; API</td>\n<td style="text-align:left">&#x8f83;&#x9ad8;</td>\n<td style="text-align:left">&#x8f83;&#x9661;&#x5ced;</td>\n<td style="text-align:left">&#x5426;</td>\n<td style="text-align:left">&#x8ffd;&#x6c42;&#x539f;&#x751f;&#x6027;&#x80fd;&#x548c;&#x4f53;&#x9a8c;&#xff0c;&#x590d;&#x6742;&#x5e94;&#x7528;</td>\n</tr>\n<tr data-lines="1858,1859">\n<td style="text-align:left"><a href="https://capacitorjs.com/"><strong>Capacitor</strong></a></td>\n<td style="text-align:left">JavaScript/WebView</td>\n<td style="text-align:left">WebView</td>\n<td style="text-align:left">&#x901a;&#x8fc7;&#x63d2;&#x4ef6;&#x8bbf;&#x95ee;&#x539f;&#x751f; API</td>\n<td style="text-align:left">&#x4e2d;&#x7b49;</td>\n<td style="text-align:left">&#x8f83;&#x4f4e;</td>\n<td style="text-align:left">&#x662f;</td>\n<td style="text-align:left">&#x5c06;&#x73b0;&#x6709; Web &#x5e94;&#x7528;&#x8f6c;&#x6362;&#x4e3a;&#x79fb;&#x52a8;&#x5e94;&#x7528;&#xff0c;<a href="https://web.dev/progressive-web-apps/">PWA</a> &#x4f18;&#x5148;</td>\n</tr>\n</tbody>\n</table>',
+                              children: [],
+                              payload: { tag: "table", lines: "1855,1859" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1853,1854" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1846,1847" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x684c;&#x9762;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x5f00;&#x53d1;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x8868;&#x683c;&#xff1a;&#x684c;&#x9762;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x5f00;&#x53d1;&#x6846;&#x67b6;&#x6bd4;&#x8f83;</strong>",
+                          children: [
+                            {
+                              content:
+                                '<table data-lines="1871,1875">\n<thead data-lines="1871,1872">\n<tr data-lines="1871,1872">\n<th style="text-align:left">&#x6846;&#x67b6;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x6838;&#x5fc3;&#x6280;&#x672f;</th>\n<th style="text-align:left">&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x5927;&#x5c0f;</th>\n<th style="text-align:left">&#x8d44;&#x6e90;&#x4f7f;&#x7528;&#xff08;CPU/RAM&#xff09;</th>\n<th style="text-align:left">&#x542f;&#x52a8;&#x65f6;&#x95f4;</th>\n<th style="text-align:left">&#x5b89;&#x5168;&#x6a21;&#x578b;</th>\n<th style="text-align:left">&#x5f00;&#x53d1;&#x8005;&#x4f53;&#x9a8c;</th>\n</tr>\n</thead>\n<tbody data-lines="1873,1875">\n<tr data-lines="1873,1874">\n<td style="text-align:left"><a href="https://www.electronjs.org/"><strong>Electron</strong></a></td>\n<td style="text-align:left">&#x6346;&#x7ed1; Chromium + <a href="https://nodejs.org/">Node.js</a></td>\n<td style="text-align:left">&#x8f83;&#x5927;</td>\n<td style="text-align:left">&#x8f83;&#x9ad8;</td>\n<td style="text-align:left">&#x8f83;&#x6162;</td>\n<td style="text-align:left">&#x8f83;&#x9ad8;&#x66b4;&#x9732;&#x98ce;&#x9669;</td>\n<td style="text-align:left">&#x719f;&#x6089; Web &#x6280;&#x672f;</td>\n</tr>\n<tr data-lines="1874,1875">\n<td style="text-align:left"><a href="https://tauri.app/"><strong>Tauri</strong></a></td>\n<td style="text-align:left">&#x539f;&#x751f; WebView + <a href="https://www.rust-lang.org/">Rust</a></td>\n<td style="text-align:left">&#x6781;&#x5c0f;</td>\n<td style="text-align:left">&#x8f83;&#x4f4e;</td>\n<td style="text-align:left">&#x6781;&#x5feb;</td>\n<td style="text-align:left">&#x7ec6;&#x7c92;&#x5ea6;&#x6743;&#x9650;&#xff0c;&#x6c99;&#x76d2;&#x5316;</td>\n<td style="text-align:left">&#x6027;&#x80fd;&#x4f18;&#x5148;&#xff0c;<a href="https://www.rust-lang.org/">Rust</a> &#x540e;&#x7aef;</td>\n</tr>\n</tbody>\n</table>',
+                              children: [],
+                              payload: { tag: "table", lines: "1871,1875" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1869,1870" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1862,1863" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1842,1843" },
+                },
+                {
+                  content:
+                    "<strong>Web &#x56fe;&#x5f62;&#xff0c;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x548c;&#x6c89;&#x6d78;&#x5f0f;&#x4f53;&#x9a8c;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x6838;&#x5fc3;&#x56fe;&#x5f62;&#x6280;&#x672f; (Core Graphics Technologies)</strong>",
+                      children: [
+                        {
+                          content: "<strong>2D &#x56fe;&#x5f62;</strong>",
+                          children: [
+                            {
+                              content:
+                                '<a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D"><strong>Canvas 2D Context</strong></a>&#xff1a;&#x4e00;&#x4e2a; JavaScript API&#xff0c;&#x7528;&#x4e8e;&#x5728; <code>&lt;canvas&gt;</code> HTML &#x5143;&#x7d20;&#x4e0a;&#x7ed8;&#x5236; 2D &#x56fe;&#x5f62;&#xff08;&#x5f62;&#x72b6;&#x3001;&#x6587;&#x672c;&#x3001;&#x56fe;&#x50cf;&#xff09;&#x3002;&#x63d0;&#x4f9b;&#x50cf;&#x7d20;&#x7ea7;&#x63a7;&#x5236;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1886,1887" },
+                            },
+                            {
+                              content:
+                                "<strong>SVG (Scalable Vector Graphics)</strong>&#xff1a;&#x4e00;&#x79cd;&#x57fa;&#x4e8e; XML &#x7684;&#x8bed;&#x8a00;&#xff0c;&#x7528;&#x4e8e;&#x63cf;&#x8ff0;&#x77e2;&#x91cf;&#x56fe;&#x50cf;&#x3002;&#x53ef;&#x4f38;&#x7f29;&#x3001;&#x53ef;&#x8bbf;&#x95ee;&#xff0c;&#x5e76;&#x4e14;&#x6613;&#x4e8e;&#x4f7f;&#x7528; CSS/JS &#x8fdb;&#x884c;&#x6837;&#x5f0f;&#x5316;/&#x811a;&#x672c;&#x5316;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1887,1888" },
+                            },
+                            {
+                              content:
+                                "<strong>D3.js (Data-Driven Documents)</strong>&#xff1a;&#x4e00;&#x4e2a; JavaScript &#x5e93;&#xff0c;&#x901a;&#x8fc7;&#x5c06;&#x6570;&#x636e;&#x7ed1;&#x5b9a;&#x5230; DOM &#x6765;&#x521b;&#x5efa;&#x52a8;&#x6001;&#x3001;&#x4ea4;&#x4e92;&#x5f0f;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x3002;&#x63d0;&#x4f9b;&#x4f4e;&#x7ea7;&#x63a7;&#x5236;&#x4ee5;&#x5b9e;&#x73b0;&#x72ec;&#x7279;&#x8bbe;&#x8ba1;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1888,1889" },
+                            },
+                            {
+                              content:
+                                '<strong>&#x56fe;&#x8868;&#x5e93; (<a href="https://www.chartjs.org/">Chart.js</a>, <a href="https://echarts.apache.org/">ECharts</a>, <a href="https://antv.vision/">AntV</a>)</strong>&#xff1a;&#x7528;&#x4e8e;&#x521b;&#x5efa;&#x5e38;&#x89c1;&#x56fe;&#x8868;&#x7c7b;&#x578b;&#x7684;&#x9ad8;&#x7ea7;&#x5e93;&#xff0c;&#x901a;&#x5e38;&#x57fa;&#x4e8e; Canvas &#x6216; SVG&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1889,1890" },
+                            },
+                            {
+                              content:
+                                '<strong>&#x57fa;&#x4e8e;&#x8282;&#x70b9;&#x7684;&#x7f16;&#x8f91;&#x5668; (<a href="https://reactflow.dev/">React Flow</a>, <a href="https://vueflow.dev/">Vue Flow</a>, <a href="https://svelteflow.dev/">Svelte Flow</a>)</strong>&#xff1a;&#x7528;&#x4e8e;&#x6784;&#x5efa;&#x4ea4;&#x4e92;&#x5f0f;&#x57fa;&#x4e8e;&#x8282;&#x70b9;&#x7684;&#x7f16;&#x8f91;&#x5668;&#x548c;&#x56fe;&#x8868;&#x7684;&#x5e93;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1890,1892" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1884,1885" },
+                        },
+                        {
+                          content: "<strong>3D &#x56fe;&#x5f62;</strong>",
+                          children: [
+                            {
+                              content:
+                                '<a href="https://www.khronos.org/webgl/"><strong>WebGL</strong></a>&#xff1a;&#x4e00;&#x4e2a; JavaScript API&#xff0c;&#x7528;&#x4e8e;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x6e32;&#x67d3;&#x4ea4;&#x4e92;&#x5f0f; 2D &#x548c; 3D &#x56fe;&#x5f62;&#xff0c;&#x5229;&#x7528; GPU&#x3002;&#x590d;&#x6742;&#xff0c;&#x4f4e;&#x7ea7;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1894,1895" },
+                            },
+                            {
+                              content:
+                                '<a href="https://www.w3.org/TR/webgpu/"><strong>WebGPU</strong></a>&#xff1a;WebGL &#x7684;&#x7ee7;&#x4efb;&#x8005;&#xff0c;&#x63d0;&#x4f9b;&#x4e0e;&#x73b0;&#x4ee3; GPU &#x66f4;&#x597d;&#x7684;&#x517c;&#x5bb9;&#x6027;&#x3001;GPGPU &#x8ba1;&#x7b97;&#x652f;&#x6301;&#x3001;&#x66f4;&#x5feb;&#x7684;&#x64cd;&#x4f5c;&#x548c;&#x5bf9;&#x66f4;&#x9ad8;&#x7ea7; GPU &#x529f;&#x80fd;&#x7684;&#x8bbf;&#x95ee;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1895,1896" },
+                            },
+                            {
+                              content:
+                                '<a href="https://threejs.org/"><strong>Three.js</strong></a>&#xff1a;&#x57fa;&#x4e8e; JavaScript &#x7684; WebGL &#x5f15;&#x64ce;&#xff0c;&#x7b80;&#x5316;&#x4e86; 3D &#x573a;&#x666f;&#x521b;&#x5efa;&#xff0c;&#x9002;&#x7528;&#x4e8e;&#x901a;&#x7528; Web &#x52a8;&#x753b;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1896,1897" },
+                            },
+                            {
+                              content:
+                                '<a href="https://www.babylonjs.com/"><strong>Babylon.js</strong></a>&#xff1a;&#x5f3a;&#x5927;&#x7684; WebGL &#x6846;&#x67b6;&#xff0c;&#x4e13;&#x6ce8;&#x4e8e;&#x57fa;&#x4e8e; Web &#x7684;&#x6e38;&#x620f;&#x5f00;&#x53d1;&#xff0c;&#x5177;&#x6709;&#x78b0;&#x649e;&#x68c0;&#x6d4b;&#x7b49;&#x9ad8;&#x7ea7;&#x529f;&#x80fd;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1897,1898" },
+                            },
+                            {
+                              content:
+                                '<a href="https://tresjs.org/"><strong>TresJS</strong></a>&#xff1a;&#x7528;&#x4e8e; Three.js &#x7684; Vue &#x81ea;&#x5b9a;&#x4e49;&#x6e32;&#x67d3;&#x5668;&#xff0c;&#x652f;&#x6301;&#x5728; Vue &#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x4e2d;&#x58f0;&#x660e;&#x5f0f;&#x5730;&#x6784;&#x5efa; 3D &#x573a;&#x666f;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1898,1899" },
+                            },
+                            {
+                              content:
+                                '<a href="https://pixijs.com/"><strong>PixiJS</strong></a>&#xff1a;&#x9ad8;&#x6027;&#x80fd; 2D &#x6e32;&#x67d3;&#x5668;&#xff0c;&#x4f7f;&#x7528; WebGL/WebGPU &#x8fdb;&#x884c; GPU &#x52a0;&#x901f;&#x6e32;&#x67d3;&#xff0c;&#x5e38;&#x7528;&#x4e8e;&#x6e38;&#x620f;&#x548c;&#x4ea4;&#x4e92;&#x5f0f;&#x4f53;&#x9a8c;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1899,1900" },
+                            },
+                            {
+                              content:
+                                '<strong>&#x6e38;&#x620f;&#x5f15;&#x64ce; (<a href="https://phaser.io/">Phaser</a>, <a href="https://playcanvas.com/">PlayCanvas</a>)</strong>&#xff1a;&#x7528;&#x4e8e;&#x6784;&#x5efa; Web &#x6e38;&#x620f;&#xff08;2D/3D&#xff09;&#x7684;&#x9ad8;&#x7ea7;&#x6846;&#x67b6;&#xff0c;&#x62bd;&#x8c61;&#x4e86;&#x56fe;&#x5f62;&#x548c;&#x7269;&#x7406;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1900,1902" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1892,1893" },
+                        },
+                        {
+                          content:
+                            "<strong>Web Animations API &#x548c; Framer Motion</strong>",
+                          children: [
+                            {
+                              content:
+                                '<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API"><strong>Web Animations API</strong></a>&#xff1a;&#x4e00;&#x4e2a; JavaScript API&#xff0c;&#x63d0;&#x4f9b;&#x52a8;&#x753b;&#x7684;&#x64ad;&#x653e;&#x63a7;&#x5236;&#x548c;&#x65f6;&#x95f4;&#x7ebf;&#xff0c;&#x5bf9; Web &#x52a8;&#x753b;&#x63d0;&#x4f9b;&#x7ec6;&#x7c92;&#x5ea6;&#x63a7;&#x5236;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1906,1907" },
+                            },
+                            {
+                              content:
+                                '<a href="https://www.framer.com/motion/"><strong>Framer Motion</strong></a>&#xff1a;&#x7528;&#x4e8e; React &#x7684;&#x52a8;&#x753b;&#x5e93;&#xff0c;&#x5177;&#x6709;&#x6df7;&#x5408;&#x5f15;&#x64ce;&#xff08;&#x539f;&#x751f;&#x6d4f;&#x89c8;&#x5668; + JavaScript &#x52a8;&#x753b;&#xff09;&#xff0c;&#x652f;&#x6301;&#x624b;&#x52bf;&#x548c;&#x5e03;&#x5c40;&#x52a8;&#x753b;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "1907,1909" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1904,1905" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x8868;&#x683c;&#xff1a;3D &#x56fe;&#x5f62;/&#x6e38;&#x620f;&#x5f15;&#x64ce;&#x6bd4;&#x8f83;</strong>",
+                          children: [
+                            {
+                              content:
+                                '<table data-lines="1911,1921">\n<thead data-lines="1911,1912">\n<tr data-lines="1911,1912">\n<th style="text-align:left">&#x5f15;&#x64ce;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x62bd;&#x8c61;&#x7ea7;&#x522b;</th>\n<th style="text-align:left">&#x4e3b;&#x8981;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x6838;&#x5fc3;&#x6280;&#x672f;</th>\n<th style="text-align:left">&#x5b66;&#x4e60;&#x66f2;&#x7ebf;</th>\n<th style="text-align:left">&#x5173;&#x952e;&#x7279;&#x6027;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x6846;&#x67b6;&#x96c6;&#x6210;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="1913,1921">\n<tr data-lines="1913,1914">\n<td style="text-align:left"><a href="https://www.khronos.org/webgl/"><strong>WebGL</strong></a></td>\n<td style="text-align:left">&#x4f4e;&#x7ea7; API</td>\n<td style="text-align:left">&#x590d;&#x6742; 3D &#x6e32;&#x67d3;&#xff0c;&#x9ad8;&#x6027;&#x80fd;&#x9700;&#x6c42;</td>\n<td style="text-align:left"><a href="https://www.khronos.org/webgl/">WebGL</a></td>\n<td style="text-align:left">&#x9661;&#x5ced;</td>\n<td style="text-align:left">&#x76f4;&#x63a5; GPU &#x8bbf;&#x95ee;&#xff0c;&#x50cf;&#x7d20;&#x7ea7;&#x63a7;&#x5236;</td>\n<td style="text-align:left">&#x65e0;</td>\n</tr>\n<tr data-lines="1914,1915">\n<td style="text-align:left"><a href="https://www.w3.org/TR/webgpu/"><strong>WebGPU</strong></a></td>\n<td style="text-align:left">&#x4f4e;&#x7ea7; API</td>\n<td style="text-align:left">&#x9ad8;&#x6027;&#x80fd;&#x8ba1;&#x7b97;&#xff0c;&#x73b0;&#x4ee3; 3D &#x56fe;&#x5f62;&#xff0c;GPGPU</td>\n<td style="text-align:left"><a href="https://www.w3.org/TR/webgpu/">WebGPU</a></td>\n<td style="text-align:left">&#x9661;&#x5ced;</td>\n<td style="text-align:left">&#x73b0;&#x4ee3; GPU &#x517c;&#x5bb9;&#xff0c;&#x5e76;&#x884c;&#x8ba1;&#x7b97;</td>\n<td style="text-align:left">&#x65e0;</td>\n</tr>\n<tr data-lines="1915,1916">\n<td style="text-align:left"><a href="https://threejs.org/"><strong>Three.js</strong></a></td>\n<td style="text-align:left">3D &#x6846;&#x67b6;</td>\n<td style="text-align:left">&#x901a;&#x7528; Web &#x52a8;&#x753b;&#xff0c;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;</td>\n<td style="text-align:left"><a href="https://www.khronos.org/webgl/">WebGL</a></td>\n<td style="text-align:left">&#x8f83;&#x5e73;&#x7f13;</td>\n<td style="text-align:left">&#x573a;&#x666f;&#x56fe;&#xff0c;&#x6750;&#x8d28;&#xff0c;&#x51e0;&#x4f55;&#x4f53;&#xff0c;&#x52a8;&#x753b;</td>\n<td style="text-align:left">&#x7075;&#x6d3b;</td>\n</tr>\n<tr data-lines="1916,1917">\n<td style="text-align:left"><a href="https://www.babylonjs.com/"><strong>Babylon.js</strong></a></td>\n<td style="text-align:left">3D &#x6846;&#x67b6;/&#x6e38;&#x620f;&#x5f15;&#x64ce;</td>\n<td style="text-align:left">Web &#x6e38;&#x620f;&#x5f00;&#x53d1;&#xff0c;&#x590d;&#x6742; 3D &#x573a;&#x666f;</td>\n<td style="text-align:left"><a href="https://www.khronos.org/webgl/">WebGL</a></td>\n<td style="text-align:left">&#x4e2d;&#x7b49;</td>\n<td style="text-align:left">&#x7269;&#x7406;&#x5f15;&#x64ce;&#xff0c;&#x78b0;&#x649e;&#x68c0;&#x6d4b;&#xff0c;&#x7c92;&#x5b50;&#x7cfb;&#x7edf;</td>\n<td style="text-align:left">&#x7075;&#x6d3b;</td>\n</tr>\n<tr data-lines="1917,1918">\n<td style="text-align:left"><a href="https://tresjs.org/"><strong>TresJS</strong></a></td>\n<td style="text-align:left"><a href="https://vuejs.org/">Vue</a> 3D &#x6e32;&#x67d3;&#x5668;</td>\n<td style="text-align:left"><a href="https://vuejs.org/">Vue</a> &#x5e94;&#x7528;&#x4e2d;&#x7684;&#x58f0;&#x660e;&#x5f0f; 3D &#x573a;&#x666f;</td>\n<td style="text-align:left"><a href="https://threejs.org/">Three.js</a></td>\n<td style="text-align:left">&#x8f83;&#x5e73;&#x7f13;</td>\n<td style="text-align:left"><a href="https://vuejs.org/">Vue</a> &#x7ec4;&#x4ef6;&#x5316;&#xff0c;&#x7c7b;&#x578b;&#x5b89;&#x5168;&#xff0c;<a href="https://vitejs.dev/">Vite</a> &#x96c6;&#x6210;</td>\n<td style="text-align:left"><a href="https://vuejs.org/">Vue</a></td>\n</tr>\n<tr data-lines="1918,1919">\n<td style="text-align:left"><a href="https://pixijs.com/"><strong>PixiJS</strong></a></td>\n<td style="text-align:left">2D &#x6e32;&#x67d3;&#x5668;</td>\n<td style="text-align:left">2D &#x6e38;&#x620f;&#xff0c;&#x4ea4;&#x4e92;&#x5f0f;&#x52a8;&#x753b;</td>\n<td style="text-align:left"><a href="https://www.khronos.org/webgl/">WebGL</a>/<a href="https://www.w3.org/TR/webgpu/">WebGPU</a></td>\n<td style="text-align:left">&#x8f83;&#x5e73;&#x7f13;</td>\n<td style="text-align:left">GPU &#x52a0;&#x901f;&#xff0c;&#x573a;&#x666f;&#x7ba1;&#x7406;&#xff0c;&#x4e8b;&#x4ef6;&#x5904;&#x7406;</td>\n<td style="text-align:left">&#x7075;&#x6d3b;</td>\n</tr>\n<tr data-lines="1919,1920">\n<td style="text-align:left"><a href="https://phaser.io/"><strong>Phaser</strong></a></td>\n<td style="text-align:left">2D &#x6e38;&#x620f;&#x5f15;&#x64ce;</td>\n<td style="text-align:left">2D Web &#x6e38;&#x620f;&#xff0c;HTML5 &#x6e38;&#x620f;</td>\n<td style="text-align:left">Canvas/<a href="https://www.khronos.org/webgl/">WebGL</a></td>\n<td style="text-align:left">&#x8f83;&#x4f4e;</td>\n<td style="text-align:left">&#x7269;&#x7406;&#xff0c;&#x52a8;&#x753b;&#xff0c;&#x8f93;&#x5165;&#x7ba1;&#x7406;&#xff0c;&#x9884;&#x5236;&#x4ef6;</td>\n<td style="text-align:left">&#x65e0;</td>\n</tr>\n<tr data-lines="1920,1921">\n<td style="text-align:left"><a href="https://playcanvas.com/"><strong>PlayCanvas</strong></a></td>\n<td style="text-align:left">3D &#x6e38;&#x620f;&#x5f15;&#x64ce;</td>\n<td style="text-align:left">3D Web &#x6e38;&#x620f;&#xff0c;&#x5b9e;&#x65f6;&#x534f;&#x4f5c;&#x7f16;&#x8f91;&#x5668;</td>\n<td style="text-align:left"><a href="https://www.khronos.org/webgl/">WebGL</a></td>\n<td style="text-align:left">&#x4e2d;&#x7b49;</td>\n<td style="text-align:left">&#x5b9e;&#x65f6;&#x534f;&#x4f5c;&#xff0c;&#x7269;&#x7406;&#xff0c;&#x52a8;&#x753b;&#xff0c;&#x6750;&#x8d28;&#x7cfb;&#x7edf;</td>\n<td style="text-align:left">&#x65e0;</td>\n</tr>\n</tbody>\n</table>',
+                              children: [],
+                              payload: { tag: "table", lines: "1911,1921" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1909,1910" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1882,1883" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x6c89;&#x6d78;&#x5f0f; Web (Immersive Web): WebXR&#xff1a;AR/VR&#xff0c;A-Frame</strong>",
+                      children: [
+                        {
+                          content:
+                            '<a href="https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API"><strong>WebXR Device API</strong></a>&#xff1a;&#x5728; Web &#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x4e2d;&#x542f;&#x7528;&#x589e;&#x5f3a;&#x73b0;&#x5b9e; (AR) &#x548c;&#x865a;&#x62df;&#x73b0;&#x5b9e; (VR) &#x4f53;&#x9a8c;&#xff0c;&#x4e0e;&#x6df7;&#x5408;&#x73b0;&#x5b9e;&#x786c;&#x4ef6;&#x63a5;&#x53e3;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "1926,1927" },
+                        },
+                        {
+                          content:
+                            '<a href="https://aframe.io/"><strong>A-Frame</strong></a>&#xff1a;&#x57fa;&#x4e8e; WebGL &#x7684; Web &#x6846;&#x67b6;&#xff0c;&#x7528;&#x4e8e;&#x4f7f;&#x7528;&#x719f;&#x6089;&#x7684; HTML &#x6807;&#x8bb0;&#x8bed;&#x8a00;&#x6784;&#x5efa; VR &#x4f53;&#x9a8c;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "1927,1929" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1924,1925" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x53ef;&#x89c6;&#x5316;&#x4e0e;&#x79d1;&#x5b66;&#x5185;&#x5bb9;&#x6e32;&#x67d3;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5927;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x7684;&#x6027;&#x80fd;&#x7b56;&#x7565;</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x6570;&#x636e;&#x62bd;&#x6837;&#x4e0e;&#x805a;&#x5408;</strong>&#xff1a;&#x5728;&#x6570;&#x636e;&#x91cf;&#x8fc7;&#x5927;&#x65f6;&#xff0c;&#x4e0d;&#x76f4;&#x63a5;&#x6e32;&#x67d3;&#x6240;&#x6709;&#x6570;&#x636e;&#x70b9;&#xff0c;&#x800c;&#x662f;&#x8fdb;&#x884c;&#x62bd;&#x6837;&#xff08;&#x5982;&#x968f;&#x673a;&#x62bd;&#x6837;&#x3001;&#x5747;&#x5300;&#x62bd;&#x6837;&#xff09;&#x6216;&#x805a;&#x5408;&#xff08;&#x5982;&#x5c06;&#x65f6;&#x95f4;&#x5e8f;&#x5217;&#x6570;&#x636e;&#x6309;&#x5c0f;&#x65f6;/&#x5929;&#x805a;&#x5408;&#xff09;&#xff0c;&#x53ea;&#x5728;&#x66f4;&#x9ad8;&#x5c42;&#x7ea7;&#x5c55;&#x793a;&#x6c47;&#x603b;&#x4fe1;&#x606f;&#x3002;&#x7528;&#x6237;&#x53ef;&#x4ee5;&#x94bb;&#x53d6;&#xff08;drill-down&#xff09;&#x67e5;&#x770b;&#x66f4;&#x8be6;&#x7ec6;&#x7684;&#x6570;&#x636e;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1938,1939" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x5206;&#x5c42;&#x6e32;&#x67d3;&#x4e0e;&#x6309;&#x9700;&#x52a0;&#x8f7d;</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x89c6;&#x53e3;&#x5185;&#x6e32;&#x67d3;</strong>&#xff1a;&#x53ea;&#x6e32;&#x67d3;&#x5f53;&#x524d;&#x7528;&#x6237;&#x89c6;&#x53e3;&#x5185;&#x7684;&#x6570;&#x636e;&#x70b9;&#x6216;&#x56fe;&#x5f62;&#x5143;&#x7d20;&#xff0c;&#x89c6;&#x53e3;&#x5916;&#x5143;&#x7d20;&#x5ef6;&#x8fdf;&#x52a0;&#x8f7d;&#x6216;&#x4e0d;&#x6e32;&#x67d3;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1940,1941" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x6e10;&#x8fdb;&#x5f0f;&#x6e32;&#x67d3;</strong>&#xff1a;&#x5148;&#x5feb;&#x901f;&#x6e32;&#x67d3;&#x4f4e;&#x7cbe;&#x5ea6;&#x7684;&#x56fe;&#x5f62;&#xff0c;&#x7136;&#x540e;&#x9010;&#x6b65;&#x52a0;&#x8f7d;&#x548c;&#x6e32;&#x67d3;&#x66f4;&#x9ad8;&#x7cbe;&#x5ea6;&#x7684;&#x7ec6;&#x8282;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1941,1942" },
+                                },
+                                {
+                                  content:
+                                    "<strong>Web Workers</strong>&#xff1a;&#x5c06;&#x590d;&#x6742;&#x7684;&#x6570;&#x636e;&#x5904;&#x7406;&#x548c;&#x8ba1;&#x7b97;&#xff08;&#x5982;&#x6570;&#x636e;&#x8fc7;&#x6ee4;&#x3001;&#x805a;&#x5408;&#x3001;&#x683c;&#x5f0f;&#x5316;&#xff09;&#x653e;&#x5230; Web Workers &#x4e2d;&#xff0c;&#x907f;&#x514d;&#x963b;&#x585e;&#x4e3b;&#x7ebf;&#x7a0b;&#xff0c;&#x4fdd;&#x6301; UI &#x54cd;&#x5e94;&#x6d41;&#x7545;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1942,1943" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "1939,1943" },
+                            },
+                            {
+                              content:
+                                "<strong>WebAssembly &#x4e0e; WebGL/Canvas</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>WASM</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x8ba1;&#x7b97;&#x5bc6;&#x96c6;&#x578b;&#x7684;&#x6570;&#x636e;&#x5904;&#x7406;&#x6216;&#x6e32;&#x67d3;&#x903b;&#x8f91;&#xff0c;&#x53ef;&#x4ee5;&#x4f7f;&#x7528; C++/Rust &#x7b49;&#x8bed;&#x8a00;&#x7f16;&#x5199;&#xff0c;&#x7f16;&#x8bd1;&#x6210; WASM&#xff0c;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x4ee5;&#x63a5;&#x8fd1;&#x539f;&#x751f;&#x7684;&#x901f;&#x5ea6;&#x8fd0;&#x884c;&#xff0c;&#x4ece;&#x800c;&#x63d0;&#x5347;&#x6027;&#x80fd;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1944,1945" },
+                                },
+                                {
+                                  content:
+                                    "<strong>WebGL/Canvas</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x9700;&#x8981;&#x6e32;&#x67d3;&#x6210;&#x5343;&#x4e0a;&#x4e07;&#x4e2a;&#x6570;&#x636e;&#x70b9;&#x6216;&#x590d;&#x6742; 3D &#x56fe;&#x5f62;&#x7684;&#x573a;&#x666f;&#xff0c;&#x76f4;&#x63a5;&#x4f7f;&#x7528; WebGL&#xff08;&#x57fa;&#x4e8e; GPU &#x52a0;&#x901f;&#xff09;&#x6216; Canvas&#xff08;2D &#x7ed8;&#x56fe; API&#xff09;&#x8fdb;&#x884c;&#x5e95;&#x5c42;&#x6e32;&#x67d3;&#xff0c;&#x800c;&#x4e0d;&#x662f;&#x4f9d;&#x8d56; DOM &#x64cd;&#x4f5c;&#xff0c;&#x53ef;&#x4ee5;&#x83b7;&#x5f97;&#x66f4;&#x597d;&#x7684;&#x6027;&#x80fd;&#x3002;D3.js &#x7b49;&#x5e93;&#x4e5f;&#x652f;&#x6301;&#x6e32;&#x67d3;&#x5230; Canvas&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1945,1946" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "1943,1946" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x6570;&#x636e;&#x6d41;&#x4f18;&#x5316;</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x589e;&#x91cf;&#x66f4;&#x65b0;</strong>&#xff1a;&#x5f53;&#x6570;&#x636e;&#x6e90;&#x53d1;&#x751f;&#x53d8;&#x5316;&#x65f6;&#xff0c;&#x53ea;&#x66f4;&#x65b0;&#x53d7;&#x5f71;&#x54cd;&#x7684;&#x56fe;&#x5f62;&#x5143;&#x7d20;&#xff0c;&#x800c;&#x4e0d;&#x662f;&#x91cd;&#x65b0;&#x6e32;&#x67d3;&#x6574;&#x4e2a;&#x56fe;&#x8868;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1947,1948" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x865a;&#x62df;&#x5316;</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x957f;&#x5217;&#x8868;&#x6216;&#x5927;&#x91cf;&#x56fe;&#x5f62;&#x5143;&#x7d20;&#xff0c;&#x53ea;&#x5728; DOM &#x4e2d;&#x6e32;&#x67d3;&#x53ef;&#x89c1;&#x90e8;&#x5206;&#xff0c;&#x6eda;&#x52a8;&#x65f6;&#x52a8;&#x6001;&#x52a0;&#x8f7d;&#x548c;&#x5378;&#x8f7d;&#x5143;&#x7d20;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1948,1950" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "1946,1950" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1934,1935" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5b9e;&#x65f6;&#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x7684;&#x6280;&#x672f;&#x9009;&#x578b;</strong>",
+                          children: [
+                            {
+                              content:
+                                '\n<p data-lines="1954,1955"><strong>&#x5b9e;&#x65f6;&#x901a;&#x4fe1;&#x534f;&#x8bae;</strong>&#xff1a;</p>',
+                              children: [
+                                {
+                                  content:
+                                    "<strong>WebSocket</strong>&#xff1a;&#x5982;&#x524d;&#x6240;&#x8ff0;&#xff0c;WebSocket &#x63d0;&#x4f9b;&#x5168;&#x53cc;&#x5de5;&#x901a;&#x4fe1;&#xff0c;&#x662f;&#x5b9e;&#x65f6;&#x6570;&#x636e;&#x63a8;&#x9001;&#x7684;&#x9996;&#x9009;&#xff0c;&#x9002;&#x7528;&#x4e8e;&#x9700;&#x8981;&#x9891;&#x7e41;&#x53cc;&#x5411;&#x4ea4;&#x4e92;&#x7684;&#x573a;&#x666f;&#xff08;&#x5982;&#x5b9e;&#x65f6;&#x4eea;&#x8868;&#x76d8;&#x3001;&#x5728;&#x7ebf;&#x4ea4;&#x6613;&#x56fe;&#x8868;&#xff09;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1955,1956" },
+                                },
+                                {
+                                  content:
+                                    "<strong>Server-Sent Events (SSE)</strong>&#xff1a;&#x5982;&#x679c;&#x53ea;&#x9700;&#x8981;&#x670d;&#x52a1;&#x5668;&#x5411;&#x5ba2;&#x6237;&#x7aef;&#x5355;&#x5411;&#x63a8;&#x9001;&#x6570;&#x636e;&#xff0c;SSE &#x662f;&#x66f4;&#x8f7b;&#x91cf;&#x3001;&#x6613;&#x4e8e;&#x5b9e;&#x73b0;&#x7684;&#x9009;&#x9879;&#xff0c;&#x4e14;&#x5185;&#x7f6e;&#x91cd;&#x8fde;&#x673a;&#x5236;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1956,1957" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "1954,1957" },
+                            },
+                            {
+                              content:
+                                '\n<p data-lines="1957,1958"><strong>&#x6570;&#x636e;&#x5904;&#x7406;&#x4e0e;&#x6e32;&#x67d3;&#x5e93;</strong>&#xff1a;</p>',
+                              children: [
+                                {
+                                  content:
+                                    '<a href="https://d3js.org/"><strong>D3.js</strong></a>&#xff1a;&#x529f;&#x80fd;&#x5f3a;&#x5927;&#x7684; JavaScript &#x5e93;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x7075;&#x6d3b;&#x7684;&#x6570;&#x636e;&#x7ed1;&#x5b9a;&#x548c;&#x8f6c;&#x6362;&#x80fd;&#x529b;&#xff0c;&#x53ef;&#x4ee5;&#x81ea;&#x5b9a;&#x4e49;&#x5404;&#x79cd;&#x56fe;&#x8868;&#x7c7b;&#x578b;&#xff0c;&#x4f46;&#x5b66;&#x4e60;&#x66f2;&#x7ebf;&#x8f83;&#x9661;&#x5ced;&#x3002;',
+                                  children: [],
+                                  payload: { tag: "li", lines: "1958,1959" },
+                                },
+                                {
+                                  content:
+                                    '<strong>ECharts/<a href="https://antv.vision/">AntV</a>/Chart.js</strong>&#xff1a;&#x5f00;&#x7bb1;&#x5373;&#x7528;&#x7684;&#x56fe;&#x8868;&#x5e93;&#xff0c;&#x63d0;&#x4f9b;&#x4e86;&#x4e30;&#x5bcc;&#x7684;&#x56fe;&#x8868;&#x7ec4;&#x4ef6;&#x548c;&#x914d;&#x7f6e;&#x9009;&#x9879;&#xff0c;&#x6613;&#x4e8e;&#x4e0a;&#x624b;&#xff0c;&#x9002;&#x5408;&#x5feb;&#x901f;&#x6784;&#x5efa;&#x5e38;&#x89c1;&#x7684;&#x5b9e;&#x65f6;&#x56fe;&#x8868;&#x3002;',
+                                  children: [],
+                                  payload: { tag: "li", lines: "1959,1961" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "1957,1961" },
+                            },
+                            {
+                              content:
+                                '\n<p data-lines="1961,1962"><strong>&#x6027;&#x80fd;&#x8003;&#x91cf;</strong>&#xff1a;</p>',
+                              children: [
+                                {
+                                  content:
+                                    '\n<p data-lines="1963,1964"><strong>&#x8282;&#x6d41;&#x4e0e;&#x9632;&#x6296;</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x9ad8;&#x9891;&#x66f4;&#x65b0;&#x7684;&#x6570;&#x636e;&#xff0c;&#x4f7f;&#x7528;&#x8282;&#x6d41;&#xff08;throttle&#xff09;&#x6216;&#x9632;&#x6296;&#xff08;debounce&#xff09;&#x6280;&#x672f;&#x9650;&#x5236;&#x6e32;&#x67d3;&#x9891;&#x7387;&#xff0c;&#x907f;&#x514d;&#x4e0d;&#x5fc5;&#x8981;&#x7684; UI &#x66f4;&#x65b0;&#x3002;</p>',
+                                  children: [],
+                                  payload: { tag: "li", lines: "1963,1965" },
+                                },
+                                {
+                                  content:
+                                    '\n<p data-lines="1965,1966"><strong>&#x52a8;&#x753b;&#x4f18;&#x5316;</strong>&#xff1a;&#x4f7f;&#x7528; CSS transform &#x548c; opacity &#x7b49;&#x5c5e;&#x6027;&#x8fdb;&#x884c;&#x52a8;&#x753b;&#xff0c;&#x5229;&#x7528; GPU &#x52a0;&#x901f;&#x3002;</p>',
+                                  children: [],
+                                  payload: { tag: "li", lines: "1965,1967" },
+                                },
+                                {
+                                  content:
+                                    '\n<p data-lines="1967,1968"><strong>&#x589e;&#x91cf;&#x6e32;&#x67d3;</strong>&#xff1a;&#x53ea;&#x66f4;&#x65b0;&#x56fe;&#x8868;&#x4e2d;&#x53d1;&#x751f;&#x53d8;&#x5316;&#x7684;&#x90e8;&#x5206;&#xff0c;&#x800c;&#x4e0d;&#x662f;&#x6bcf;&#x6b21;&#x90fd;&#x91cd;&#x7ed8;&#x6574;&#x4e2a;&#x56fe;&#x8868;&#x3002;</p>',
+                                  children: [],
+                                  payload: { tag: "li", lines: "1967,1969" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "1961,1969" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1950,1951" },
+                        },
+                        {
+                          content: "<strong>Web GIS &#x7b80;&#x4ecb;</strong>",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x6838;&#x5fc3;&#x529f;&#x80fd;</strong>&#xff1a;&#x5730;&#x56fe;&#x663e;&#x793a;&#x3001;&#x5730;&#x7406;&#x6570;&#x636e;&#x67e5;&#x8be2;&#x3001;&#x7a7a;&#x95f4;&#x5206;&#x6790;&#x3001;&#x8def;&#x5f84;&#x89c4;&#x5212;&#x3001;&#x5730;&#x7406;&#x7f16;&#x7801;/&#x9006;&#x5730;&#x7406;&#x7f16;&#x7801;&#x7b49;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1973,1974" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x524d;&#x7aef;&#x6280;&#x672f;&#x6808;</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    '<strong>&#x5730;&#x56fe;&#x5e93;</strong>&#xff1a;<a href="https://leafletjs.com/">Leaflet.js</a>&#xff08;&#x8f7b;&#x91cf;&#x7ea7;&#x3001;&#x7075;&#x6d3b;&#xff09;&#x3001;<a href="https://openlayers.org/">OpenLayers</a>&#xff08;&#x529f;&#x80fd;&#x5168;&#x9762;&#x3001;&#x590d;&#x6742;&#xff09;&#x3001;<a href="https://docs.mapbox.com/mapbox-gl-js/api/">Mapbox GL JS</a>&#xff08;&#x57fa;&#x4e8e; WebGL&#xff0c;&#x9ad8;&#x6027;&#x80fd;&#x3001;&#x5b9a;&#x5236;&#x6027;&#x5f3a;&#xff09;&#x3002;',
+                                  children: [],
+                                  payload: { tag: "li", lines: "1975,1976" },
+                                },
+                                {
+                                  content:
+                                    '<strong>&#x6570;&#x636e;&#x683c;&#x5f0f;</strong>&#xff1a;<a href="https://geojson.org/">GeoJSON</a>&#x3001;<a href="https://github.com/topojson/topojson">TopoJSON</a>&#x3001;<a href="https://www.ogc.org/standard/kml/">KML</a>&#x3001;<a href="https://www.ogc.org/standard/wkt-crs/">WKT</a> &#x7b49;&#x3002;',
+                                  children: [],
+                                  payload: { tag: "li", lines: "1976,1977" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x53ef;&#x89c6;&#x5316;</strong>&#xff1a;&#x7ed3;&#x5408; D3.js&#x3001;ECharts GL &#x7b49;&#x5e93;&#xff0c;&#x5728;&#x5730;&#x56fe;&#x4e0a;&#x53e0;&#x52a0;&#x70ed;&#x529b;&#x56fe;&#x3001;&#x6563;&#x70b9;&#x56fe;&#x3001;&#x8f68;&#x8ff9;&#x56fe;&#x7b49;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "1977,1978" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "1974,1978" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x5e94;&#x7528;&#x573a;&#x666f;</strong>&#xff1a;&#x4f4d;&#x7f6e;&#x670d;&#x52a1;&#x3001;&#x667a;&#x6167;&#x57ce;&#x5e02;&#x3001;&#x7269;&#x6d41;&#x8ffd;&#x8e2a;&#x3001;&#x73af;&#x5883;&#x76d1;&#x6d4b;&#x3001;&#x707e;&#x5bb3;&#x9884;&#x8b66;&#x3001;&#x623f;&#x5730;&#x4ea7;&#x5206;&#x6790;&#x7b49;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "1978,1980" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "1969,1970" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1929,1930" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1878,1879" },
+                },
+                {
+                  content:
+                    "<strong>Web &#x97f3;&#x9891;&#x548c;&#x5a92;&#x4f53;&#x6d41;&#xff1a;&#x5b9e;&#x65f6;&#x97f3;&#x9891;/&#x89c6;&#x9891;&#x5904;&#x7406;</strong>",
+                  children: [
+                    {
+                      content:
+                        '<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API"><strong>Web Audio API</strong></a>&#xff1a;&#x5f3a;&#x5927;&#x7684;&#x97f3;&#x9891;&#x63a7;&#x5236;&#x7cfb;&#x7edf;&#xff0c;&#x5141;&#x8bb8;&#x6a21;&#x5757;&#x5316;&#x8def;&#x7531;&#x3001;&#x6dfb;&#x52a0;&#x6548;&#x679c;&#x3001;&#x521b;&#x5efa;&#x53ef;&#x89c6;&#x5316;&#x548c;&#x7a7a;&#x95f4;&#x6548;&#x679c;&#x3002;&#x8865;&#x5145; <code>&lt;audio&gt;</code> &#x5143;&#x7d20;&#x4ee5;&#x8fdb;&#x884c;&#x590d;&#x6742;&#x5904;&#x7406;&#x3002;',
+                      children: [],
+                      payload: { tag: "li", lines: "1986,1987" },
+                    },
+                    {
+                      content:
+                        "<strong>Media Streams API (Media Capture and Streams API)</strong>&#xff1a;&#x652f;&#x6301;&#x6d41;&#x5f0f;&#x4f20;&#x8f93;&#x97f3;&#x9891;&#x548c;&#x89c6;&#x9891;&#x6570;&#x636e;&#xff0c;&#x5141;&#x8bb8;&#x8bbf;&#x95ee;&#x7528;&#x6237;&#x6444;&#x50cf;&#x5934;/&#x9ea6;&#x514b;&#x98ce; (getUserMedia()) &#x548c;&#x5a92;&#x4f53;&#x8f68;&#x9053;&#x64cd;&#x4f5c;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1987,1988" },
+                    },
+                    {
+                      content:
+                        "<strong>Media Source Extensions (MSE)</strong>&#xff1a;&#x652f;&#x6301;&#x65e0;&#x63d2;&#x4ef6;&#x7684;&#x57fa;&#x4e8e; Web &#x7684;&#x6d41;&#x5a92;&#x4f53;&#xff0c;&#x5141;&#x8bb8;&#x901a;&#x8fc7; JavaScript &#x4e3a; <code>&lt;audio&gt;</code> &#x548c; <code>&lt;video&gt;</code> &#x5143;&#x7d20;&#x521b;&#x5efa;&#x5a92;&#x4f53;&#x6d41;&#xff0c;&#x5e76;&#x5bf9;&#x83b7;&#x53d6;&#x8fdb;&#x884c;&#x7ec6;&#x7c92;&#x5ea6;&#x63a7;&#x5236;&#x3002;",
+                      children: [],
+                      payload: { tag: "li", lines: "1988,1989" },
+                    },
+                    {
+                      content:
+                        '<strong><a href="https://webrtc.org/">WebRTC</a> (Web Real-Time Communication)</strong>&#xff1a;&#x4f7f; Web &#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x80fd;&#x591f;&#x6355;&#x83b7;&#x548c;&#x6d41;&#x5f0f;&#x4f20;&#x8f93;&#x97f3;&#x9891;/&#x89c6;&#x9891;&#xff0c;&#x5e76;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e4b;&#x95f4;&#x70b9;&#x5bf9;&#x70b9;&#x4ea4;&#x6362;&#x4efb;&#x610f;&#x6570;&#x636e;&#x800c;&#x65e0;&#x9700;&#x7ecf;&#x8fc7;&#x4e2d;&#x5fc3;&#x670d;&#x52a1;&#x5668;&#x4e2d;&#x8f6c;&#xff0c;&#x4ece;&#x800c;&#x4fc3;&#x8fdb;&#x7535;&#x8bdd;&#x4f1a;&#x8bae;&#x548c;&#x5b9e;&#x65f6;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x3002;',
+                      children: [],
+                      payload: { tag: "li", lines: "1989,1991" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1982,1983" },
+                },
+                {
+                  content:
+                    "<strong>&#x533a;&#x5757;&#x94fe;&#x548c; Web3 &#x96c6;&#x6210;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x94b1;&#x5305;&#x8fde;&#x63a5;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<a href="https://metamask.io/"><strong>MetaMask</strong></a>&#xff1a;&#x6d41;&#x884c;&#x7684;&#x6d4f;&#x89c8;&#x5668;&#x6269;&#x5c55;&#x94b1;&#x5305;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "1999,2000" },
+                        },
+                        {
+                          content:
+                            '<a href="https://walletconnect.com/"><strong>WalletConnect</strong></a>&#xff1a;&#x5f00;&#x653e;&#x534f;&#x8bae;&#xff0c;&#x7528;&#x4e8e;&#x901a;&#x8fc7;&#x4e8c;&#x7ef4;&#x7801;&#x6216;&#x6df1;&#x5ea6;&#x94fe;&#x63a5;&#x5c06;&#x79fb;&#x52a8;&#x94b1;&#x5305;&#x8fde;&#x63a5;&#x5230; dApp&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2000,2001" },
+                        },
+                        {
+                          content:
+                            '<a href="https://web3modal.com/"><strong>Web3Modal</strong></a>&#xff1a;&#x5e2e;&#x52a9;&#x5f00;&#x53d1;&#x8005;&#x901a;&#x8fc7;&#x7b80;&#x5355;&#x7684;&#x914d;&#x7f6e;&#x5728;&#x4ed6;&#x4eec;&#x7684; dApp &#x4e2d;&#x6dfb;&#x52a0;&#x5bf9;&#x591a;&#x4e2a;&#x63d0;&#x4f9b;&#x5546;&#xff08;<a href="https://metamask.io/">MetaMask</a>&#x3001;<a href="https://walletconnect.com/">WalletConnect</a> &#x7b49;&#xff09;&#x7684;&#x652f;&#x6301;&#x7684;&#x5e93;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2001,2002" },
+                        },
+                        {
+                          content:
+                            '<a href="https://wagmi.sh/"><strong>wagmi</strong></a>&#xff1a;&#x4e00;&#x4e2a;&#x7b80;&#x5316; Web3 &#x4ea4;&#x4e92;&#x7684; React Hooks &#x5e93;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2002,2003" },
+                        },
+                        {
+                          content:
+                            '<a href="https://www.rainbowkit.com/"><strong>RainbowKit</strong></a>&#xff1a;&#x7528;&#x4e8e;&#x8f7b;&#x677e;&#x8fde;&#x63a5;&#x94b1;&#x5305;&#x7684; React &#x5e93;&#xff0c;&#x6784;&#x5efa;&#x5728; wagmi &#x548c; <a href="https://viem.sh/">viem</a> &#x4e4b;&#x4e0a;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2003,2005" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "1997,1998" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x533a;&#x5757;&#x94fe;&#x4ea4;&#x4e92;&#x5e93;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x8868;&#x683c;&#xff1a;Web3 &#x533a;&#x5757;&#x94fe;&#x4ea4;&#x4e92;&#x5e93;&#x6bd4;&#x8f83; (ethers.js, web3.js, viem)</strong>",
+                          children: [
+                            {
+                              content:
+                                '<table data-lines="2015,2020">\n<thead data-lines="2015,2016">\n<tr data-lines="2015,2016">\n<th style="text-align:left">&#x5e93;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x6838;&#x5fc3;&#x54f2;&#x5b66;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">API &#x8bbe;&#x8ba1;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left"><a href="https://www.typescriptlang.org/">TypeScript</a> &#x652f;&#x6301;</th>\n<th style="text-align:left">&#x5305;&#x5927;&#x5c0f;</th>\n<th style="text-align:left">&#x6210;&#x719f;&#x5ea6;</th>\n<th style="text-align:left">&#x94b1;&#x5305;/&#x63d0;&#x4f9b;&#x5546;&#x5206;&#x79bb;</th>\n<th style="text-align:left">&#x7406;&#x60f3;&#x7528;&#x4f8b;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="2017,2020">\n<tr data-lines="2017,2018">\n<td style="text-align:left"><a href="https://ethers.io/"><strong>ethers.js</strong></a></td>\n<td style="text-align:left">&#x9ad8;&#x7ea7;&#x62bd;&#x8c61;&#xff0c;&#x9762;&#x5411;&#x5bf9;&#x8c61;</td>\n<td style="text-align:left">Promise-based</td>\n<td style="text-align:left">&#x4f18;&#x79c0;</td>\n<td style="text-align:left">&#x8f83;&#x5c0f;</td>\n<td style="text-align:left">&#x6210;&#x719f;</td>\n<td style="text-align:left">&#x662f;</td>\n<td style="text-align:left">&#x590d;&#x6742; dApp&#xff0c;&#x65b0;&#x9879;&#x76ee;&#xff0c;&#x6ce8;&#x91cd;&#x4ee3;&#x7801;&#x6e05;&#x6670;&#x5ea6;</td>\n</tr>\n<tr data-lines="2018,2019">\n<td style="text-align:left"><a href="https://web3js.org/"><strong>web3.js</strong></a></td>\n<td style="text-align:left">&#x539f;&#x59cb;&#xff0c;&#x4f4e;&#x7ea7;&#x62bd;&#x8c61;</td>\n<td style="text-align:left">Callback-based</td>\n<td style="text-align:left">&#x8f83;&#x5f31;</td>\n<td style="text-align:left">&#x8f83;&#x5927;</td>\n<td style="text-align:left">&#x6210;&#x719f;</td>\n<td style="text-align:left">&#x5426;</td>\n<td style="text-align:left">&#x9057;&#x7559;&#x9879;&#x76ee;&#xff0c;&#x521d;&#x5b66;&#x8005;&#xff0c;&#x5e7f;&#x6cdb;&#x793e;&#x533a;&#x652f;&#x6301;</td>\n</tr>\n<tr data-lines="2019,2020">\n<td style="text-align:left"><a href="https://viem.sh/"><strong>viem</strong></a></td>\n<td style="text-align:left">&#x4f4e;&#x7ea7;&#x539f;&#x8bed;&#xff0c;&#x65e0;&#x72b6;&#x6001;</td>\n<td style="text-align:left">&#x7b80;&#x6d01;&#xff0c;&#x53ef;&#x7ec4;&#x5408;</td>\n<td style="text-align:left">&#x4f18;&#x79c0;</td>\n<td style="text-align:left">&#x6781;&#x5c0f;</td>\n<td style="text-align:left">&#x8f83;&#x65b0;</td>\n<td style="text-align:left">&#x662f;</td>\n<td style="text-align:left">&#x6027;&#x80fd;&#x5173;&#x952e;&#x578b; dApp&#xff0c;&#x6ce8;&#x91cd;&#x6548;&#x7387;&#x548c;&#x7c7b;&#x578b;&#x5b89;&#x5168;</td>\n</tr>\n</tbody>\n</table>',
+                              children: [],
+                              payload: { tag: "table", lines: "2015,2020" },
+                            },
+                          ],
+                          payload: { tag: "h5", lines: "2013,2014" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2005,2006" },
+                    },
+                    {
+                      content:
+                        "<strong>A. Web2 &#x4e0e; Web3 &#x524d;&#x7aef;&#x8303;&#x5f0f;&#x5bf9;&#x6bd4;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x53bb;&#x4e2d;&#x5fc3;&#x5316;&#x4e0e;&#x7528;&#x6237;&#x6240;&#x6709;&#x6743;</strong>&#xff1a;Web2 &#x7684;&#x5b9a;&#x4e49;&#x7279;&#x5f81;&#x662f;&#x4e2d;&#x5fc3;&#x5316;&#xff0c;&#x5927;&#x591a;&#x6570;&#x670d;&#x52a1;&#x7531;&#x63a7;&#x5236;&#x5e73;&#x53f0;&#x548c;&#x670d;&#x52a1;&#x5668;&#x7684;&#x516c;&#x53f8;&#x8fd0;&#x8425;&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x5f53;&#x7528;&#x6237;&#x5728; Instagram &#x6216; YouTube &#x4e0a;&#x53d1;&#x5e03;&#x5185;&#x5bb9;&#x65f6;&#xff0c;&#x5176;&#x6570;&#x636e;&#x5b58;&#x50a8;&#x5728;&#x8fd9;&#x4e9b;&#x516c;&#x53f8;&#x62e5;&#x6709;&#x7684;&#x4e2d;&#x5fc3;&#x5316;&#x670d;&#x52a1;&#x5668;&#x4e2d;&#x3002;&#x76f8;&#x6bd4;&#x4e4b;&#x4e0b;&#xff0c;Web3 &#x62e5;&#x62b1;&#x53bb;&#x4e2d;&#x5fc3;&#x5316;&#xff0c;&#x7f51;&#x7edc;&#x7531;&#x72ec;&#x7acb;&#x8282;&#x70b9;&#x534f;&#x540c;&#x5de5;&#x4f5c;&#xff0c;&#x800c;&#x975e;&#x4e2d;&#x5fc3;&#x67a2;&#x7ebd;&#x3002;Web3 &#x4e2d;&#x7684;&#x793e;&#x4ea4;&#x7f51;&#x7edc;&#x53ef;&#x80fd;&#x7531;&#x4e0d;&#x540c;&#x4eba;&#x8fd0;&#x884c;&#x7684;&#x591a;&#x4e2a;&#x670d;&#x52a1;&#x5668;&#x7ec4;&#x6210;&#xff0c;&#x6216;&#x5b8c;&#x5168;&#x5728;&#x533a;&#x5757;&#x94fe;&#x4e0a;&#x8fd0;&#x884c;&#x3002;&#x5728; Web3 &#x4e2d;&#xff0c;&#x7528;&#x6237;&#x62e5;&#x6709;&#x81ea;&#x5df1;&#x7684;&#x6570;&#x636e;&#xff0c;&#x5e76;&#x5c06;&#x5176;&#x5b58;&#x50a8;&#x5728;&#x53bb;&#x4e2d;&#x5fc3;&#x5316;&#x7f51;&#x7edc;&#x6216;&#x52a0;&#x5bc6;&#x94b1;&#x5305;&#x4e2d;&#xff0c;&#x8fd9;&#x4e9b;&#x94b1;&#x5305;&#x4f5c;&#x4e3a;&#x533a;&#x5757;&#x94fe;&#x4e0a;&#x7684;&#x6240;&#x6709;&#x6743;&#x8bc1;&#x660e;&#x3002;&#x4e0e; Web2 &#x4e2d;&#x516c;&#x53f8;&#x5728;&#x4e0d;&#x5206;&#x4eab;&#x4ef7;&#x503c;&#x7684;&#x60c5;&#x51b5;&#x4e0b;&#x4ece;&#x7528;&#x6237;&#x6570;&#x636e;&#x4e2d;&#x83b7;&#x5229;&#x4e0d;&#x540c;&#xff0c;Web3 &#x5141;&#x8bb8;&#x7528;&#x6237;&#x76f4;&#x63a5;&#x5c06;&#x5176;&#x5185;&#x5bb9;&#x8d27;&#x5e01;&#x5316;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2027,2028" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6570;&#x636e;&#x7ba1;&#x7406;&#x4e0e;&#x9690;&#x79c1;</strong>&#xff1a;Web3 &#x901a;&#x8fc7;&#x52a0;&#x5bc6;&#x65b9;&#x6cd5;&#x548c;&#x53bb;&#x4e2d;&#x5fc3;&#x5316;&#x5b58;&#x50a8;&#x5b9e;&#x73b0;&#x66f4;&#x5f3a;&#x7684;&#x9690;&#x79c1;&#x4fdd;&#x62a4;&#x3002;&#x533a;&#x5757;&#x94fe;&#x4e0a;&#x7684;&#x4ea4;&#x6613;&#x662f;&#x53ef;&#x67e5;&#x770b;&#x7684;&#xff0c;&#x4f46;&#x4e2a;&#x4eba;&#x8be6;&#x7ec6;&#x4fe1;&#x606f;&#x4fdd;&#x6301;&#x79c1;&#x5bc6;&#xff0c;&#x9664;&#x975e;&#x7528;&#x6237;&#x9009;&#x62e9;&#x62ab;&#x9732;&#x3002;&#x7136;&#x800c;&#xff0c;&#x7528;&#x6237;&#x5b89;&#x5168;&#x53d6;&#x51b3;&#x4e8e;&#x8d1f;&#x8d23;&#x4efb;&#x5730;&#x7ba1;&#x7406;&#x79c1;&#x94a5;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2028,2029" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x8d27;&#x5e01;&#x5316;&#x6a21;&#x5f0f;</strong>&#xff1a;Web2 &#x4e3b;&#x8981;&#x4f9d;&#x8d56;&#x5e7f;&#x544a;&#x548c;&#x5e73;&#x53f0;&#x3002;&#x514d;&#x8d39;&#x670d;&#x52a1;&#x901a;&#x8fc7;&#x5c55;&#x793a;&#x5e7f;&#x544a;&#x6216;&#x51fa;&#x552e;&#x805a;&#x5408;&#x6570;&#x636e;&#x6765;&#x76c8;&#x5229;&#x3002;&#x521b;&#x4f5c;&#x8005;&#x4f9d;&#x8d56; YouTube &#x548c; Twitch &#x7b49;&#x5e73;&#x53f0;&#xff0c;&#x8fd9;&#x4e9b;&#x5e73;&#x53f0;&#x4f1a;&#x62bd;&#x53d6;&#x5927;&#x90e8;&#x5206;&#x5229;&#x6da6;&#xff0c;&#x95f4;&#x63a5;&#x901a;&#x8fc7;&#x7528;&#x6237;&#x6570;&#x636e;&#x548c;&#x6ce8;&#x610f;&#x529b;&#x6765;&#x8865;&#x507f;&#x7528;&#x6237;&#x3002;Web3 &#x5219;&#x8f6c;&#x5411;&#x4ee3;&#x5e01;&#x5316;&#x3001;&#x4ee5;&#x521b;&#x4f5c;&#x8005;&#x4e3a;&#x4e2d;&#x5fc3;&#x7684;&#x6a21;&#x5f0f;&#x3002;&#x4ef7;&#x503c;&#x901a;&#x8fc7;&#x4ee3;&#x5e01;&#x5206;&#x914d;&#xff0c;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x5728;&#x5e73;&#x53f0;&#x4e2d;&#x62e5;&#x6709;&#x6743;&#x76ca;&#x3002;&#x521b;&#x4f5c;&#x8005;&#x53ef;&#x4ee5;&#x901a;&#x8fc7; Play-to-Earn &#x6e38;&#x620f;&#x548c; NFT &#x76f4;&#x63a5;&#x4ece;&#x793e;&#x533a;&#x4e2d;&#x83b7;&#x5229;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2029,2030" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4e92;&#x64cd;&#x4f5c;&#x6027;</strong>&#xff1a;Web3 &#x65e8;&#x5728;&#x5b9e;&#x73b0;&#x66f4;&#x5e7f;&#x6cdb;&#x7684;&#x4e92;&#x64cd;&#x4f5c;&#x6027;&#x3002;&#x8bb8;&#x591a;&#x53bb;&#x4e2d;&#x5fc3;&#x5316;&#x5e94;&#x7528;&#x4f7f;&#x7528;&#x5f00;&#x6e90;&#x6807;&#x51c6;&#xff0c;&#x8fd9;&#x610f;&#x5473;&#x7740;&#x4e00;&#x4e2a;&#x94b1;&#x5305;&#x53ef;&#x4ee5;&#x4e0e;&#x591a;&#x4e2a; dApp &#x4ea4;&#x4e92;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2030,2032" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2023,2024" },
+                    },
+                    {
+                      content:
+                        "<strong>B. dApp &#x5f00;&#x53d1;&#x4e2d;&#x7684;&#x524d;&#x7aef;&#x6311;&#x6218;&#x4e0e;&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>",
+                      children: [],
+                      payload: { tag: "h4", lines: "2032,2033" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x94b1;&#x5305;&#x96c6;&#x6210;&#x4e0e;&#x7528;&#x6237;&#x4f53;&#x9a8c; (UX)</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x94b1;&#x5305;&#x8fde;&#x63a5;</strong>&#xff1a;&#x4e3a;&#x4e86;&#x7b80;&#x5316;&#x591a;&#x94b1;&#x5305;&#x652f;&#x6301;&#xff0c;Web3Modal &#x548c; RainbowKit &#x7b49;&#x5e93;&#x63d0;&#x4f9b;&#x4e86;&#x76f4;&#x89c2;&#x3001;&#x54cd;&#x5e94;&#x8fc5;&#x901f;&#x4e14;&#x53ef;&#x5b9a;&#x5236;&#x7684; UI &#x7ec4;&#x4ef6;&#x3002;&#x8fd9;&#x4e9b;&#x5de5;&#x5177;&#x8d1f;&#x8d23;&#x5904;&#x7406;&#x94b1;&#x5305;&#x7684;&#x8fde;&#x63a5;&#x548c;&#x65ad;&#x5f00;&#xff0c;&#x652f;&#x6301;&#x591a;&#x79cd;&#x94b1;&#x5305;&#xff0c;&#x4ea4;&#x6362;&#x8fde;&#x63a5;&#x94fe;&#xff0c;&#x89e3;&#x6790;&#x5730;&#x5740;&#x5230; ENS&#xff0c;&#x5e76;&#x663e;&#x793a;&#x4f59;&#x989d;&#x7b49;&#x3002;&#x5b83;&#x4eec;&#x901a;&#x8fc7;&#x8fd4;&#x56de;&#x6807;&#x51c6;&#x5316; EIP-1193 &#x63d0;&#x4f9b;&#x7a0b;&#x5e8f;&#x6765;&#x5de5;&#x4f5c;&#xff0c;&#x8be5;&#x63d0;&#x4f9b;&#x7a0b;&#x5e8f;&#x53ef;&#x4e0e; ethers.js&#x3001;viem &#x6216; wagmi &#x7b49;&#x5de5;&#x5177;&#x4e00;&#x8d77;&#x4f7f;&#x7528;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2050,2051" },
+                        },
+                        {
+                          content:
+                            '<strong>&#x79c1;&#x94a5;&#x7ba1;&#x7406;</strong>&#xff1a;Web3 &#x5c06;&#x63a7;&#x5236;&#x6743;&#x8f6c;&#x79fb;&#x7ed9;&#x7528;&#x6237;&#xff0c;&#x8fd9;&#x610f;&#x5473;&#x7740;&#x7528;&#x6237;&#x9700;&#x8981;&#x8d1f;&#x8d23;&#x79c1;&#x94a5;&#x7ba1;&#x7406;&#x3002;<a href="https://www.binance.com/en/web3wallet">Binance Web3 Wallet</a> &#x7b49;&#x81ea;&#x6258;&#x7ba1;&#x94b1;&#x5305;&#x5229;&#x7528;<strong>&#x591a;&#x65b9;&#x8ba1;&#x7b97;&#xff08;MPC&#xff09;&#x6280;&#x672f;</strong>&#x5c06;&#x79c1;&#x94a5;&#x5206;&#x6210;&#x4e09;&#x4e2a;&#x72ec;&#x7acb;&#x90e8;&#x5206;&#xff0c;&#x5206;&#x522b;&#x5b58;&#x50a8;&#x5728;&#x4e0d;&#x540c;&#x4f4d;&#x7f6e;&#xff08;&#x4e00;&#x4e2a;&#x5728; Binance &#x5904;&#xff0c;&#x4e00;&#x4e2a;&#x5728;&#x7528;&#x6237;&#x8bbe;&#x5907;&#x4e0a;&#xff0c;&#x7b2c;&#x4e09;&#x4e2a;&#x7531;&#x6062;&#x590d;&#x5bc6;&#x7801;&#x52a0;&#x5bc6;&#x5e76;&#x4fdd;&#x5b58;&#x5230;&#x4e2a;&#x4eba;&#x4e91;&#x5b58;&#x50a8;&#x4e2d;&#xff09;&#x3002;&#x8fd9;&#x79cd;&#x8bbe;&#x8ba1;&#x6d88;&#x9664;&#x4e86;&#x5bf9;&#x4f20;&#x7edf;&#x52a9;&#x8bb0;&#x8bcd;&#x7684;&#x9700;&#x6c42;&#xff0c;&#x7b80;&#x5316;&#x4e86;&#x6d41;&#x7a0b;&#x5e76;&#x964d;&#x4f4e;&#x4e86;&#x4eba;&#x4e3a;&#x9519;&#x8bef;&#x7684;&#x98ce;&#x9669;&#x3002;&#x8fd9;&#x79cd;&#x65b9;&#x6cd5;&#x65e8;&#x5728;&#x7b80;&#x5316;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#xff0c;&#x56e0;&#x4e3a;&#x4f20;&#x7edf;&#x7684;&#x79c1;&#x94a5;&#x548c;&#x52a9;&#x8bb0;&#x8bcd;&#x7ba1;&#x7406;&#x5bf9;&#x65b0;&#x7528;&#x6237;&#x6765;&#x8bf4;&#x662f;&#x4e3b;&#x8981;&#x969c;&#x788d;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2051,2052" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7f51;&#x7edc;&#x5207;&#x6362;</strong>&#xff1a;Web3 &#x94b1;&#x5305;&#x901a;&#x5e38;&#x652f;&#x6301;&#x591a;&#x94fe;&#xff0c;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x5728;&#x4e00;&#x4e2a;&#x94b1;&#x5305;&#x5185;&#x7ba1;&#x7406;&#x6765;&#x81ea; 60 &#x591a;&#x4e2a;&#x516c;&#x5171;&#x533a;&#x5757;&#x94fe;&#x7684;&#x52a0;&#x5bc6;&#x8d27;&#x5e01;&#xff08;&#x4f8b;&#x5982; Binance Web3 Wallet&#xff09;&#x3002;&#x5185;&#x7f6e;&#x7684;&#x4ea4;&#x6362;&#x548c;&#x8de8;&#x94fe;&#x6865;&#x63a5;&#x529f;&#x80fd;&#x53ef;&#x4ee5;&#x4f18;&#x5316;&#x4ee3;&#x5e01;&#x4ef7;&#x683c;&#x548c; Gas &#x8d39;&#x7528;&#xff0c;&#x4fc3;&#x8fdb;&#x65e0;&#x7f1d;&#x7684;&#x8de8;&#x94fe;&#x64cd;&#x4f5c;&#x3002;dApp &#x5e94;&#x652f;&#x6301;&#x591a;&#x79cd;&#x94b1;&#x5305;&#x9009;&#x9879;&#xff0c;&#x5e76;&#x63d0;&#x4f9b;&#x6e05;&#x6670;&#x7684;&#x7528;&#x6237;&#x6307;&#x5bfc;&#x6765;&#x4f18;&#x96c5;&#x5730;&#x5904;&#x7406;&#x7f51;&#x7edc;&#x5207;&#x6362;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2052,2053" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4ea4;&#x6613;&#x72b6;&#x6001;&#x5904;&#x7406;</strong>&#xff1a;&#x4ea4;&#x6613;&#x7684;&#x4e0d;&#x786e;&#x5b9a;&#x6027;&#x4f1a;&#x5f15;&#x53d1;&#x7528;&#x6237;&#x7126;&#x8651;&#xff0c;&#x56e0;&#x6b64;&#x5efa;&#x7acb;&#x5065;&#x58ee;&#x7684;&#x52a0;&#x8f7d;&#x548c;&#x53cd;&#x9988;&#x7cfb;&#x7edf;&#x81f3;&#x5173;&#x91cd;&#x8981;&#x3002;&#x8fd9;&#x5305;&#x62ec;<strong>&#x4e50;&#x89c2; UI &#x66f4;&#x65b0;</strong>&#xff08;&#x5bf9;&#x4e8e;&#x4f4e;&#x98ce;&#x9669;&#x64cd;&#x4f5c;&#x7acb;&#x5373;&#x66f4;&#x65b0; UI&#xff0c;&#x82e5;&#x4ea4;&#x6613;&#x5931;&#x8d25;&#x518d;&#x56de;&#x6eda;&#xff09;&#x3001;<strong>&#x5f85;&#x5b9a;&#x72b6;&#x6001;&#x52a8;&#x753b;</strong>&#xff08;&#x4f7f;&#x7528;&#x8fdb;&#x5ea6;&#x6761;&#x548c;&#x4eba;&#x6027;&#x5316;&#x6d88;&#x606f;&#xff0c;&#x5982;&#x201c;&#x6b63;&#x5728;&#x5904;&#x7406;&#x2026;&#x53ef;&#x80fd;&#x9700;&#x8981; 30 &#x79d2;&#x201d;&#xff09;&#x548c;<strong>&#x5b9e;&#x65f6;&#x901a;&#x77e5;</strong>&#xff08;&#x901a;&#x8fc7; WebSockets &#x6216;&#x63a8;&#x9001;&#x901a;&#x77e5;&#x63d0;&#x9192;&#x7528;&#x6237;&#x4ea4;&#x6613;&#x6210;&#x529f;&#x6216;&#x5931;&#x8d25;&#xff0c;&#x5373;&#x4f7f;&#x4ed6;&#x4eec;&#x5df2;&#x79bb;&#x5f00;&#x9875;&#x9762;&#xff09;&#x3002;&#x5f53;&#x4ea4;&#x6613;&#x5931;&#x8d25;&#x65f6;&#xff0c;&#x5e94;&#x63d0;&#x4f9b;&#x6e05;&#x6670;&#x7684;&#x9519;&#x8bef;&#x5904;&#x7406;&#x548c;&#x6307;&#x5bfc;&#xff0c;&#x4f8b;&#x5982;&#x201c;&#x4f60;&#x7684; Gas &#x4ef7;&#x683c;&#x4f3c;&#x4e4e;&#x592a;&#x4f4e;&#x4e86;&#x3002;&#x8bf7;&#x91cd;&#x8bd5;&#x6216;&#x8054;&#x7cfb;&#x652f;&#x6301;&#x201d;&#x3002;&#x4e3a;&#x4e86;&#x63d0;&#x9ad8;&#x4fe1;&#x4efb;&#xff0c;&#x5e94;&#x907f;&#x514d;&#x5c06;&#x4ea4;&#x6613;&#x72b6;&#x6001;&#x7684;&#x4e3b;&#x8981;&#x663e;&#x793a;&#x76f4;&#x63a5;&#x94fe;&#x63a5;&#x5230;&#x533a;&#x5757;&#x94fe;&#x6d4f;&#x89c8;&#x5668;&#xff0c;&#x800c;&#x662f;&#x5c06;&#x5176;&#x4f5c;&#x4e3a;&#x9644;&#x52a0;&#x4fe1;&#x606f;&#x63d0;&#x4f9b;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2053,2054" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7b80;&#x5316;&#x533a;&#x5757;&#x94fe;&#x672f;&#x8bed;</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x666e;&#x901a;&#x7528;&#x6237;&#x800c;&#x8a00;&#xff0c;Web3 &#x7684;&#x4e13;&#x4e1a;&#x672f;&#x8bed;&#x53ef;&#x80fd;&#x4ee4;&#x4eba;&#x671b;&#x800c;&#x5374;&#x6b65;&#x3002;&#x524d;&#x7aef;&#x5e94;&#x62bd;&#x8c61;&#x6280;&#x672f;&#x590d;&#x6742;&#x6027;&#xff0c;&#x7528;&#x901a;&#x4fd7;&#x6613;&#x61c2;&#x7684;&#x8bed;&#x8a00;&#x89e3;&#x91ca;&#x533a;&#x5757;&#x94fe;&#x6982;&#x5ff5;&#xff0c;&#x5e76;&#x5bf9;&#x9ad8;&#x7ea7;&#x529f;&#x80fd;&#x8fdb;&#x884c;<strong>&#x6e10;&#x8fdb;&#x5f0f;&#x62ab;&#x9732;</strong>&#x3002;&#x4f8b;&#x5982;&#xff0c;&#x5bf9;&#x4e8e;&#x65e5;&#x5e38;&#x64cd;&#x4f5c;&#xff0c;&#x5982;&#x4ee3;&#x5e01;&#x4ea4;&#x6362;&#x6216;&#x94fe;&#x4e0a;&#x8d44;&#x4ea7;&#x8f6c;&#x79fb;&#xff0c;&#x5e94;&#x7b80;&#x5316;&#x5176;&#x590d;&#x6742;&#x6027;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2054,2055" },
+                        },
+                        {
+                          content:
+                            '<strong>&#x524d;&#x7aef;&#x5b89;&#x5168;&#x6700;&#x4f73;&#x5b9e;&#x8df5;</strong>&#xff1a;Web3 &#x524d;&#x7aef;&#x7684;&#x5b89;&#x5168;&#x81f3;&#x5173;&#x91cd;&#x8981;&#xff0c;&#x56e0;&#x4e3a;&#x6f0f;&#x6d1e;&#x53ef;&#x80fd;&#x5bfc;&#x81f4;&#x4e0d;&#x53ef;&#x9006;&#x7684;&#x8d44;&#x4ea7;&#x635f;&#x5931;&#x3002;&#x4e3a;&#x4e86;&#x4fdd;&#x62a4;&#x7aef;&#x70b9;&#xff08;API &#x5bc6;&#x94a5;&#xff09;&#xff0c;&#x5e94;&#x5b9a;&#x671f;&#x8f6e;&#x6362;&#x5bc6;&#x94a5;&#x3002;&#x654f;&#x611f;&#x53d8;&#x91cf;&#x5e94;&#x5b58;&#x50a8;&#x5728;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x7684; .env &#x6587;&#x4ef6;&#x4e2d;&#xff0c;&#x800c;&#x4e0d;&#x662f;&#x5ba2;&#x6237;&#x7aef;&#x4ee3;&#x7801;&#x4e2d;&#xff0c;&#x5e76;&#x4e14;.env &#x6587;&#x4ef6;&#x4e0d;&#x5e94;&#x63d0;&#x4ea4;&#x5230;&#x516c;&#x5171;&#x4ed3;&#x5e93;&#x3002;&#x5e94;&#x4f7f;&#x7528;&#x540e;&#x7aef;&#x4ee3;&#x7406;&#x5904;&#x7406;&#x9700;&#x8981;&#x654f;&#x611f;&#x6570;&#x636e;&#x7684;&#x8bf7;&#x6c42;&#xff0c;&#x786e;&#x4fdd;&#x6570;&#x636e;&#x4e0d;&#x5728;&#x5ba2;&#x6237;&#x7aef;&#x5e94;&#x7528;&#x4e2d;&#x66b4;&#x9732;&#x3002;&#x5176;&#x4ed6;&#x5b89;&#x5168;&#x63aa;&#x65bd;&#x5305;&#x62ec;&#x65b9;&#x6cd5;&#x767d;&#x540d;&#x5355;&#x3001;JWT &#x6388;&#x6743;&#x3001;&#x591a;&#x4ee4;&#x724c;&#x8ba4;&#x8bc1;&#x3001;&#x57df;&#x540d;&#x63a9;&#x7801;&#x548c;&#x5f15;&#x7528;&#x8005;&#x767d;&#x540d;&#x5355;&#x3002;&#x524d;&#x7aef;&#x8fd8;&#x5e94;&#x9a8c;&#x8bc1;&#x6240;&#x6709;&#x7528;&#x6237;&#x8f93;&#x5165;&#xff0c;&#x4f7f;&#x7528;&#x4fe1;&#x8a89;&#x826f;&#x597d;&#x7684;&#x5e93;&#x548c;&#x6846;&#x67b6;&#xff0c;&#x63d0;&#x4f9b;&#x6307;&#x5411;&#x533a;&#x5757;&#x6d4f;&#x89c8;&#x5668;&#xff08;&#x5982; <a href="https://etherscan.io/">Etherscan</a>&#xff09;&#x7684;&#x94fe;&#x63a5;&#x8fdb;&#x884c;&#x9a8c;&#x8bc1;&#xff0c;&#x5e76;&#x8fdb;&#x884c;&#x7528;&#x6237;&#x6559;&#x80b2;&#xff0c;&#x5305;&#x62ec;&#x89e3;&#x91ca;&#x4ea4;&#x6613;&#x7b7e;&#x540d;&#x539f;&#x56e0;&#x3001;&#x63d0;&#x9192;&#x68c0;&#x67e5; URL &#x9632;&#x9493;&#x9c7c;&#x4ee5;&#x53ca;&#x6f84;&#x6e05;&#x5408;&#x7ea6;&#x4ea4;&#x4e92;&#x7684;&#x542b;&#x4e49;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2055,2057" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2046,2047" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "1993,1994" },
+                },
+                {
+                  content:
+                    "<strong>&#x524d;&#x7aef; AI/ML &#x96c6;&#x6210;&#xff1a;&#x6d4f;&#x89c8;&#x5668;&#x5185;&#x673a;&#x5668;&#x5b66;&#x4e60;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>A. &#x6d4f;&#x89c8;&#x5668;&#x7aef;&#x4e0e;&#x670d;&#x52a1;&#x5668;&#x7aef; ML &#x5bf9;&#x6bd4;</strong>",
+                      children: [
+                        {
+                          content: "",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x4f18;&#x70b9;</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x589e;&#x5f3a;&#x9690;&#x79c1;</strong>&#xff1a;&#x8f93;&#x5165;&#x6570;&#x636e;&#xff08;&#x5982;&#x672c;&#x5730;&#x56fe;&#x50cf;&#x6216;&#x89c6;&#x9891;&#x6d41;&#xff09;&#x4fdd;&#x7559;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x6c99;&#x7bb1;&#x5185;&#xff0c;&#x65e0;&#x9700;&#x53d1;&#x9001;&#x5230;&#x8fdc;&#x7a0b;&#x670d;&#x52a1;&#x5668;&#xff0c;&#x4ece;&#x800c;&#x589e;&#x5f3a;&#x4e86;&#x9690;&#x79c1;&#x4fdd;&#x62a4;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2080,2081" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x4f4e;&#x5ef6;&#x8fdf;</strong>&#xff1a;&#x672c;&#x5730;&#x5904;&#x7406;&#x4f7f;&#x5f97;&#x5bf9;&#x4f4e;&#x5ef6;&#x8fdf;&#x6709;&#x8981;&#x6c42;&#x7684; ML &#x7528;&#x4f8b;&#x6210;&#x4e3a;&#x53ef;&#x80fd;&#xff0c;&#x4f8b;&#x5982;&#x6c89;&#x6d78;&#x5f0f; Web &#x4f53;&#x9a8c;&#x4e2d;&#x7684;&#x5b9e;&#x65f6;&#x5bf9;&#x8c61;&#x68c0;&#x6d4b;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2081,2082" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x53bb;&#x4e2d;&#x5fc3;&#x5316;</strong>&#xff1a;&#x65e0;&#x9700;&#x4e91;&#x57fa;&#x7840;&#x8bbe;&#x65bd;&#x6295;&#x8d44;&#x5373;&#x53ef;&#x5927;&#x89c4;&#x6a21;&#x90e8;&#x7f72; ML &#x7cfb;&#x7edf;&#xff0c;&#x7b26;&#x5408;&#x53bb;&#x4e2d;&#x5fc3;&#x5316; Web &#x67b6;&#x6784;&#x7684;&#x7406;&#x5ff5;&#xff0c;&#x51cf;&#x5c11;&#x4e86;&#x5355;&#x70b9;&#x6545;&#x969c;&#x548c;&#x63a7;&#x5236;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2082,2083" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x6e10;&#x8fdb;&#x5f0f;&#x589e;&#x5f3a;</strong>&#xff1a;&#x901a;&#x8fc7;&#x5c06;&#x8ba1;&#x7b97;&#x5bc6;&#x96c6;&#x578b; ML &#x4efb;&#x52a1;&#x5378;&#x8f7d;&#x5230;&#x8bbe;&#x5907;&#x786c;&#x4ef6;&#x4e0a;&#xff0c;&#x4efb;&#x4f55; Web &#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x90fd;&#x53ef;&#x4ee5;&#x901a;&#x8fc7; ML &#x529f;&#x80fd;&#x5f97;&#x5230;&#x4e30;&#x5bcc;&#xff0c;&#x73b0;&#x6709; Web &#x5185;&#x5bb9;&#x4e5f;&#x53ef;&#x4ee5;&#x9010;&#x6b65;&#x589e;&#x5f3a;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2083,2084" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "2079,2084" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x7f3a;&#x70b9;</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x786c;&#x4ef6;&#x52a0;&#x901f;&#x53d7;&#x9650;</strong>&#xff1a;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x7684; ML &#x63a8;&#x7406;&#x76ee;&#x524d;&#x4f7f;&#x7528; WebGL &#x56fe;&#x5f62; API&#xff0c;&#x4f46;&#x7f3a;&#x4e4f;&#x5bf9; ML &#x4e13;&#x7528;&#x786c;&#x4ef6;&#x52a0;&#x901f;&#x5668;&#x7684;&#x8bbf;&#x95ee;&#xff0c;&#x8fd9;&#x9650;&#x5236;&#x4e86;&#x4f53;&#x9a8c;&#x8303;&#x56f4;&#x5e76;&#x5bfc;&#x81f4;&#x5728;&#x73b0;&#x4ee3;&#x786c;&#x4ef6;&#x4e0a;&#x6548;&#x7387;&#x4f4e;&#x4e0b;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2085,2086" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x6027;&#x80fd;&#x4e0d;&#x5747;</strong>&#xff1a;&#x4e0d;&#x540c;&#x5730;&#x533a;&#x4e92;&#x8054;&#x7f51;&#x8fde;&#x63a5;&#x901f;&#x5ea6;&#x7684;&#x5dee;&#x5f02;&#x4ee5;&#x53ca;&#x751f;&#x4ea7;&#x7ea7;&#x6a21;&#x578b;&#x7684;&#x5927;&#x5c3a;&#x5bf8;&#xff0c;&#x610f;&#x5473;&#x7740;&#x8bbe;&#x5907;&#x7aef;&#x63a8;&#x7406;&#x7684;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#x53ef;&#x80fd;&#x4e0d;&#x5747;&#x7b49;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2086,2087" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x529f;&#x8017;&#x4e0e;&#x73af;&#x5883;&#x6210;&#x672c;</strong>&#xff1a;Web ML &#x5e94;&#x7528;&#x8ba1;&#x7b97;&#x548c;&#x80fd;&#x6e90;&#x5bc6;&#x96c6;&#xff0c;&#x5e7f;&#x6cdb;&#x91c7;&#x7528;&#x4f1a;&#x52a0;&#x5267;&#x73af;&#x5883;&#x95ee;&#x9898;&#x3002;&#x5c06;&#x5927;&#x578b; ML &#x6a21;&#x578b;&#x5206;&#x53d1;&#x5230;&#x6bcf;&#x4e2a;&#x5ba2;&#x6237;&#x7aef;&#x4f1a;&#x589e;&#x52a0;&#x73af;&#x5883;&#x6210;&#x672c;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2087,2088" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x6a21;&#x578b;&#x5927;&#x5c0f;&#x4e0e;&#x590d;&#x6742;&#x6027;</strong>&#xff1a;&#x5927;&#x578b;&#x6216;&#x590d;&#x6742;&#x6a21;&#x578b;&#x53ef;&#x80fd;&#x96be;&#x4ee5;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x9ad8;&#x6548;&#x8fd0;&#x884c;&#xff0c;&#x53ef;&#x80fd;&#x5bfc;&#x81f4;&#x6d4f;&#x89c8;&#x5668;&#x54cd;&#x5e94;&#x7f13;&#x6162;&#x751a;&#x81f3;&#x65e0;&#x54cd;&#x5e94;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2088,2089" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x6570;&#x636e;&#x4e22;&#x5931;&#x4e0e;&#x4e0d;&#x51c6;&#x786e;</strong>&#xff1a;&#x5ba2;&#x6237;&#x7aef;&#x8ddf;&#x8e2a;&#x5bb9;&#x6613;&#x53d7;&#x5230;&#x5e7f;&#x544a;&#x62e6;&#x622a;&#x5668;&#x3001;&#x6d4f;&#x89c8;&#x5668;&#x8bbe;&#x7f6e;&#x548c;&#x7f51;&#x7edc;&#x8fde;&#x63a5;&#x95ee;&#x9898;&#x7684;&#x5f71;&#x54cd;&#xff0c;&#x5bfc;&#x81f4;&#x6570;&#x636e;&#x4e22;&#x5931;&#x6216;&#x4e0d;&#x51c6;&#x786e;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2089,2091" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "2084,2091" },
+                            },
+                          ],
+                          payload: { tag: "ul", lines: "2079,2091" },
+                        },
+                        {
+                          content: "",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x4f18;&#x70b9;</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x6570;&#x636e;&#x51c6;&#x786e;&#x6027;&#x63d0;&#x9ad8;</strong>&#xff1a;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x8ddf;&#x8e2a;&#x4e0d;&#x53d7;&#x5ba2;&#x6237;&#x7aef;&#x95ee;&#x9898;&#xff08;&#x5982;&#x6d4f;&#x89c8;&#x5668;&#x7279;&#x5b9a;&#x95ee;&#x9898;&#x3001;&#x5e7f;&#x544a;&#x62e6;&#x622a;&#x5668;&#x548c; JavaScript &#x9519;&#x8bef;&#xff09;&#x7684;&#x5f71;&#x54cd;&#xff0c;&#x6570;&#x636e;&#x6536;&#x96c6;&#x66f4;&#x53ef;&#x9760;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2094,2095" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x5e7f;&#x544a;&#x62e6;&#x622a;&#x5668;&#x5f71;&#x54cd;&#x964d;&#x4f4e;</strong>&#xff1a;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x8ddf;&#x8e2a;&#x7ed5;&#x8fc7;&#x4e86;&#x5e7f;&#x544a;&#x62e6;&#x622a;&#x5668;&#x548c;&#x9690;&#x79c1;&#x6269;&#x5c55;&#x7684;&#x9650;&#x5236;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2095,2096" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x6570;&#x636e;&#x5b89;&#x5168;&#x6027;&#x589e;&#x5f3a;</strong>&#xff1a;&#x654f;&#x611f;&#x6570;&#x636e;&#x53ef;&#x4ee5;&#x5728;&#x4f20;&#x8f93;&#x5230;&#x5206;&#x6790;&#x5e73;&#x53f0;&#x4e4b;&#x524d;&#x8fdb;&#x884c;&#x5904;&#x7406;&#x548c;&#x533f;&#x540d;&#x5316;&#xff0c;&#x6709;&#x52a9;&#x4e8e;&#x907f;&#x514d;&#x4e2a;&#x4eba;&#x8eab;&#x4efd;&#x4fe1;&#x606f;&#xff08;PII&#xff09;&#x6cc4;&#x9732;&#x5e76;&#x7b26;&#x5408;&#x6570;&#x636e;&#x4fdd;&#x62a4;&#x6cd5;&#x5f8b;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2096,2097" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x66f4;&#x53ef;&#x9760;&#x7684;&#x8ddf;&#x8e2a;</strong>&#xff1a;&#x65e0;&#x8bba;&#x4e92;&#x8054;&#x7f51;&#x8fde;&#x63a5;&#x72b6;&#x6001;&#x5982;&#x4f55;&#x6216;&#x7528;&#x6237;&#x662f;&#x5426;&#x5173;&#x95ed;&#x6d4f;&#x89c8;&#x5668;&#xff0c;&#x670d;&#x52a1;&#x5668;&#x90fd;&#x80fd;&#x6b63;&#x786e;&#x8ddf;&#x8e2a;&#x6570;&#x636e;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2097,2098" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x66f4;&#x597d;&#x7684;&#x6027;&#x80fd;&#x548c;&#x901f;&#x5ea6;</strong>&#xff1a;&#x51cf;&#x5c11;&#x4e86;&#x5ba2;&#x6237;&#x7aef;&#x7684;&#x8d1f;&#x8f7d;&#xff0c;&#x4f7f;&#x9875;&#x9762;&#x52a0;&#x8f7d;&#x66f4;&#x5feb;&#xff0c;&#x7528;&#x6237;&#x4f53;&#x9a8c;&#x66f4;&#x6d41;&#x7545;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2098,2099" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x66f4;&#x5168;&#x9762;&#x7684;&#x6570;&#x636e;&#x6536;&#x96c6;</strong>&#xff1a;&#x53ef;&#x4ee5;&#x6355;&#x83b7;&#x5ba2;&#x6237;&#x7aef;&#x8ddf;&#x8e2a;&#x53ef;&#x80fd;&#x9057;&#x6f0f;&#x7684;&#x5e55;&#x540e;&#x4ea4;&#x4e92;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2099,2100" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "2093,2100" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x7f3a;&#x70b9;</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x5b9e;&#x73b0;&#x590d;&#x6742;</strong>&#xff1a;&#x670d;&#x52a1;&#x5668;&#x7aef;&#x8ddf;&#x8e2a;&#x7684;&#x5b9e;&#x73b0;&#x901a;&#x5e38;&#x6bd4;&#x5ba2;&#x6237;&#x7aef;&#x8ddf;&#x8e2a;&#x66f4;&#x590d;&#x6742;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2101,2102" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x7528;&#x6237;&#x4ea4;&#x4e92;&#x7ec6;&#x8282;&#x4e0d;&#x8db3;</strong>&#xff1a;&#x96be;&#x4ee5;&#x6355;&#x83b7;&#x8be6;&#x7ec6;&#x7684;&#x5ba2;&#x6237;&#x7aef;&#x4ea4;&#x4e92;&#xff0c;&#x5982;&#x70b9;&#x51fb;&#x6216;&#x9f20;&#x6807;&#x79fb;&#x52a8;&#xff0c;&#x901a;&#x5e38;&#x9700;&#x8981;&#x989d;&#x5916;&#x7684;&#x5ba2;&#x6237;&#x7aef;&#x5de5;&#x5177;&#x6765;&#x5f25;&#x8865;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2102,2103" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x9690;&#x79c1;&#x98ce;&#x9669;</strong>&#xff1a;&#x5982;&#x679c;&#x6570;&#x636e;&#x5728;&#x79bb;&#x5f00;&#x8bbe;&#x5907;&#x540e;&#x672a;&#x5f97;&#x5230;&#x59a5;&#x5584;&#x5904;&#x7406;&#xff0c;&#x53ef;&#x80fd;&#x5b58;&#x5728;&#x9690;&#x79c1;&#x95ee;&#x9898;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2103,2105" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "2100,2105" },
+                            },
+                          ],
+                          payload: { tag: "ul", lines: "2093,2105" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2075,2076" },
+                    },
+                    {
+                      content:
+                        "<strong>B. &#x5e94;&#x7528;&#x793a;&#x4f8b;&#x4e0e;&#x6846;&#x67b6;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>MediaPipe Solutions</strong>&#xff1a;&#x8fd9;&#x662f;&#x4e00;&#x5957;&#x5e93;&#x548c;&#x5de5;&#x5177;&#xff0c;&#x4f7f;&#x7528;&#x6237;&#x80fd;&#x591f;&#x5feb;&#x901f;&#x5728;&#x5176;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x4e2d;&#x5e94;&#x7528;&#x4eba;&#x5de5;&#x667a;&#x80fd;&#x548c;&#x673a;&#x5668;&#x5b66;&#x4e60;&#x6280;&#x672f;&#x3002;&#x8fd9;&#x4e9b;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x53ef;&#x4ee5;&#x7acb;&#x5373;&#x96c6;&#x6210;&#x5230;&#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x4e2d;&#xff0c;&#x6839;&#x636e;&#x9700;&#x8981;&#x8fdb;&#x884c;&#x5b9a;&#x5236;&#xff0c;&#x5e76;&#x8de8;&#x591a;&#x4e2a;&#x5f00;&#x53d1;&#x5e73;&#x53f0;&#x4f7f;&#x7528;&#x3002;MediaPipe Solutions &#x5305;&#x62ec;&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>MediaPipe Tasks</strong>&#xff1a;&#x7528;&#x4e8e;&#x90e8;&#x7f72;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x7684;&#x8de8;&#x5e73;&#x53f0; API &#x548c;&#x5e93;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2112,2113" },
+                            },
+                            {
+                              content:
+                                "<strong>MediaPipe Models</strong>&#xff1a;&#x9884;&#x8bad;&#x7ec3;&#x7684;&#x3001;&#x53ef;&#x76f4;&#x63a5;&#x7528;&#x4e8e;&#x6bcf;&#x4e2a;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x7684;&#x6a21;&#x578b;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2113,2114" },
+                            },
+                            {
+                              content:
+                                "<strong>MediaPipe Model Maker</strong>&#xff1a;&#x5141;&#x8bb8;&#x7528;&#x6237;&#x4f7f;&#x7528;&#x81ea;&#x5df1;&#x7684;&#x6570;&#x636e;&#x5b9a;&#x5236;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x6a21;&#x578b;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2114,2115" },
+                            },
+                            {
+                              content:
+                                "<strong>MediaPipe Studio</strong>&#xff1a;&#x7528;&#x4e8e;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x4e2d;&#x53ef;&#x89c6;&#x5316;&#x3001;&#x8bc4;&#x4f30;&#x548c;&#x57fa;&#x51c6;&#x6d4b;&#x8bd5;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2115,2117" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2111,2117" },
+                        },
+                        {
+                          content:
+                            '<a href="https://www.tensorflow.org/js"><strong>TensorFlow.js</strong></a>&#xff1a;&#x7528;&#x4e8e;&#x5728;&#x6d4f;&#x89c8;&#x5668;&#x548c; Node.js &#x4e2d;&#x8fdb;&#x884c;&#x673a;&#x5668;&#x5b66;&#x4e60;&#x7684; JavaScript &#x5e93;&#x3002;',
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x5b9e;&#x9645;&#x5e94;&#x7528;&#x793a;&#x4f8b;</strong>&#xff1a;TensorFlow.js &#x5728;&#x73b0;&#x5b9e;&#x4e16;&#x754c;&#x4e2d;&#x6709;&#x5e7f;&#x6cdb;&#x5e94;&#x7528;&#xff0c;&#x5305;&#x62ec;&#x5728;&#x7ebf;&#x804a;&#x5929;&#x4e2d;&#x7684;&#x5b9e;&#x65f6;&#x6bd2;&#x6027;&#x8fc7;&#x6ee4;&#x5668;&#xff08;InSpace &#x901a;&#x8fc7;&#x5728;&#x5ba2;&#x6237;&#x7aef;&#x6267;&#x884c;&#x6240;&#x6709;&#x63a8;&#x7406;&#x6765;&#x68c0;&#x6d4b;&#x6709;&#x6bd2;&#x8bc4;&#x8bba;&#xff0c;&#x65e0;&#x9700;&#x5c06;&#x6587;&#x672c;&#x53d1;&#x9001;&#x5230;&#x7b2c;&#x4e09;&#x65b9;&#x670d;&#x52a1;&#x5668;&#x8fdb;&#x884c;&#x5206;&#x7c7b;&#xff09;&#x3002;&#x5176;&#x4ed6;&#x793a;&#x4f8b;&#x5305;&#x62ec; YouTube &#x7684;&#x53e3;&#x578b;&#x540c;&#x6b65;&#x8bc4;&#x5206;&#xff08;&#x4f7f;&#x7528; FaceMesh &#x6a21;&#x578b;&#x4f30;&#x8ba1;&#x5507;&#x90e8;&#x5173;&#x952e;&#x70b9;&#xff09;&#x3001;&#x8868;&#x60c5;&#x7b26;&#x53f7;&#x5bfb;&#x5b9d;&#x3001;&#x7f51;&#x7edc;&#x6444;&#x50cf;&#x5934;&#x63a7;&#x5236;&#x5668;&#x3001;&#x53ef;&#x6559;&#x5b66;&#x673a;&#x5668;&#xff08;&#x65e0;&#x9700;&#x7f16;&#x7801;&#x5373;&#x53ef;&#x8bc6;&#x522b;&#x56fe;&#x50cf;&#x548c;&#x64ad;&#x653e;&#x58f0;&#x97f3;&#xff09;&#x3001;&#x52a8;&#x4f5c;&#x955c;&#x50cf;&#x3001;&#x5b9e;&#x65f6;&#x94a2;&#x7434;&#x6f14;&#x594f;&#xff08;&#x7531;&#x795e;&#x7ecf;&#x7f51;&#x7edc;&#x751f;&#x6210;&#xff09;&#x3001;Node.js &#x4e2d;&#x7684;&#x68d2;&#x7403;&#x6295;&#x7403;&#x7c7b;&#x578b;&#x9884;&#x6d4b;&#xff0c;&#x4ee5;&#x53ca;&#x8bad;&#x7ec3;&#x53ef;&#x89c6;&#x5316;&#x7b49;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2120,2122" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2119,2122" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2107,2108" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2061,2062" },
+                },
+                {
+                  content:
+                    "<strong>&#x8fb9;&#x7f18;&#x8ba1;&#x7b97;&#xff1a;Cloudflare Workers&#x3001;Vercel Edge Functions&#x3001;Deno Deploy</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;&#x8fb9;&#x7f18;&#x8ba1;&#x7b97;&#x5e73;&#x53f0;&#x6bd4;&#x8f83;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="2138,2143">\n<thead data-lines="2138,2139">\n<tr data-lines="2138,2139">\n<th style="text-align:left">&#x5e73;&#x53f0;&#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x63d0;&#x4f9b;&#x5546;</th>\n<th style="text-align:left">&#x6838;&#x5fc3;&#x6280;&#x672f;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x6027;&#x80fd;&#xff08;&#x5ef6;&#x8fdf;&#xff0c;TTFB&#xff09;</th>\n<th style="text-align:left">&#x57fa;&#x7840;&#x8bbe;&#x65bd;&#xff08;CDN&#xff0c;&#x591a;&#x4e91;&#xff09;</th>\n<th style="text-align:left">&#x529f;&#x80fd;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="2140,2143">\n<tr data-lines="2140,2141">\n<td style="text-align:left"><a href="https://workers.cloudflare.com/"><strong>Cloudflare Workers</strong></a></td>\n<td style="text-align:left">Cloudflare</td>\n<td style="text-align:left">Workers</td>\n<td style="text-align:left">&#x6781;&#x4f4e;&#x5ef6;&#x8fdf;</td>\n<td style="text-align:left">&#x5168;&#x7403; CDN</td>\n<td style="text-align:left">&#x65e0;&#x670d;&#x52a1;&#x5668;&#x51fd;&#x6570;&#xff0c;&#x80cc;&#x666f;&#x51fd;&#x6570;&#xff0c;D1 &#x6570;&#x636e;&#x5e93;&#xff0c;R2 &#x5b58;&#x50a8;</td>\n</tr>\n<tr data-lines="2141,2142">\n<td style="text-align:left"><a href="https://vercel.com/docs/functions/edge-functions"><strong>Vercel Edge Functions</strong></a></td>\n<td style="text-align:left"><a href="https://vercel.com/">Vercel</a></td>\n<td style="text-align:left"><a href="https://www.microsoft.com/en-us/edge">Edge</a> Functions</td>\n<td style="text-align:left">&#x8f83;&#x9ad8;&#x5ef6;&#x8fdf;</td>\n<td style="text-align:left">&#x591a;&#x4e91; (GCP, AWS)&#xff0c;&#x5229;&#x7528; <a href="https://workers.cloudflare.com/">Cloudflare Workers</a></td>\n<td style="text-align:left">&#x65e0;&#x670d;&#x52a1;&#x5668;&#x51fd;&#x6570;&#xff0c;&#x80cc;&#x666f;&#x51fd;&#x6570;&#xff0c;Postgres &#x6570;&#x636e;&#x5e93;&#xff0c;&#x5b9e;&#x65f6;&#x5206;&#x6790;</td>\n</tr>\n<tr data-lines="2142,2143">\n<td style="text-align:left"><a href="https://deno.com/deploy"><strong>Deno Deploy</strong></a></td>\n<td style="text-align:left">Deno</td>\n<td style="text-align:left">Deno Runtime</td>\n<td style="text-align:left">&#x826f;&#x597d;</td>\n<td style="text-align:left">Deno &#x8fb9;&#x7f18;&#x57fa;&#x7840;&#x8bbe;&#x65bd;</td>\n<td style="text-align:left">&#x65e0;&#x670d;&#x52a1;&#x5668;&#x51fd;&#x6570;&#xff0c;&#x80cc;&#x666f;&#x51fd;&#x6570;&#xff0c;&#x5185;&#x7f6e; KV &#x5b58;&#x50a8;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "2138,2143" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2136,2137" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2126,2127" },
+                },
+                {
+                  content:
+                    "<strong>&#x8bbe;&#x5907;&#x96c6;&#x6210;&#xff1a;Web Bluetooth&#x3001;Web USB&#x3001;WebHID&#x3001;Generic Sensor API</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8868;&#x683c;&#xff1a;Web &#x8bbe;&#x5907;&#x96c6;&#x6210; API &#x6bd4;&#x8f83;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<table data-lines="2160,2166">\n<thead data-lines="2160,2161">\n<tr data-lines="2160,2161">\n<th style="text-align:left">API &#x540d;&#x79f0;</th>\n<th style="text-align:left">&#x76ee;&#x7684;&#xff08;&#x8bbe;&#x5907;&#x7c7b;&#x578b;&#xff09;</th>\n<th style="text-align:left">&#x5173;&#x952e;&#x529f;&#x80fd;&#xff08;&#x793a;&#x4f8b;&#xff09;</th>\n<th style="text-align:left">&#x5b89;&#x5168;&#x8981;&#x6c42;&#xff08;<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS">HTTPS</a>&#xff0c;&#x7528;&#x6237;&#x6743;&#x9650;&#xff09;</th>\n<th style="text-align:left">&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#xff08;&#x5b9e;&#x9a8c;&#x6027;/&#x57fa;&#x7ebf;&#xff09;</th>\n</tr>\n</thead>\n<tbody data-lines="2162,2166">\n<tr data-lines="2162,2163">\n<td style="text-align:left"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Generic_Sensor_API"><strong>Generic Sensor API</strong></a></td>\n<td style="text-align:left">&#x8bbe;&#x5907;&#x4f20;&#x611f;&#x5668;&#xff08;&#x52a0;&#x901f;&#x5ea6;&#x8ba1;&#x3001;&#x9640;&#x87ba;&#x4eea;&#xff09;</td>\n<td style="text-align:left">&#x8bfb;&#x53d6;&#x4f20;&#x611f;&#x5668;&#x6570;&#x636e;&#xff0c;&#x4e8b;&#x4ef6;&#x76d1;&#x542c;</td>\n<td style="text-align:left"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS">HTTPS</a>&#xff0c;&#x7528;&#x6237;&#x6743;&#x9650;</td>\n<td style="text-align:left">&#x57fa;&#x7ebf;</td>\n</tr>\n<tr data-lines="2163,2164">\n<td style="text-align:left"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API"><strong>Web Bluetooth API</strong></a></td>\n<td style="text-align:left">&#x4f4e;&#x529f;&#x8017;&#x84dd;&#x7259;&#x8bbe;&#x5907;</td>\n<td style="text-align:left">&#x8fde;&#x63a5; BLE &#x8bbe;&#x5907;&#xff0c;&#x8bfb;&#x5199; GATT &#x7279;&#x6027;</td>\n<td style="text-align:left"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS">HTTPS</a>&#xff0c;&#x7528;&#x6237;&#x6743;&#x9650;</td>\n<td style="text-align:left">&#x5b9e;&#x9a8c;&#x6027;</td>\n</tr>\n<tr data-lines="2164,2165">\n<td style="text-align:left"><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebUSB_API"><strong>Web USB API</strong></a></td>\n<td style="text-align:left">&#x975e;&#x6807;&#x51c6; USB &#x8bbe;&#x5907;</td>\n<td style="text-align:left">&#x8fde;&#x63a5; USB &#x8bbe;&#x5907;&#xff0c;&#x8bfb;&#x5199;&#x6570;&#x636e;&#xff0c;&#x7b80;&#x5316;&#x9a71;&#x52a8;&#x5b89;&#x88c5;</td>\n<td style="text-align:left"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS">HTTPS</a>&#xff0c;&#x7528;&#x6237;&#x6743;&#x9650;</td>\n<td style="text-align:left">&#x5b9e;&#x9a8c;&#x6027;</td>\n</tr>\n<tr data-lines="2165,2166">\n<td style="text-align:left"><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebHID_API"><strong>WebHID API</strong></a></td>\n<td style="text-align:left">&#x4eba;&#x673a;&#x63a5;&#x53e3;&#x8bbe;&#x5907;&#xff08;&#x6e38;&#x620f;&#x624b;&#x67c4;&#xff09;</td>\n<td style="text-align:left">&#x8fde;&#x63a5; HID &#x8bbe;&#x5907;&#xff0c;&#x53d1;&#x9001;/&#x63a5;&#x6536;&#x62a5;&#x544a;</td>\n<td style="text-align:left"><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/HTTPS">HTTPS</a>&#xff0c;&#x7528;&#x6237;&#x6743;&#x9650;</td>\n<td style="text-align:left">&#x5b9e;&#x9a8c;&#x6027;</td>\n</tr>\n</tbody>\n</table>',
+                          children: [],
+                          payload: { tag: "table", lines: "2160,2166" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2158,2159" },
+                    },
+                    {
+                      content: "<strong>A. Web Bluetooth API</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x7528;&#x4f8b;</strong>&#xff1a;&#x8be5; API &#x4f7f;&#x5f97; Web &#x5e94;&#x7528;&#x7a0b;&#x5e8f;&#x80fd;&#x591f;&#x4e0e;&#x9644;&#x8fd1;&#x7684;&#x4f4e;&#x529f;&#x8017;&#x84dd;&#x7259;&#xff08;BLE&#xff09;&#x8bbe;&#x5907;&#xff08;&#x84dd;&#x7259; 4.0 &#x6216;&#x66f4;&#x9ad8;&#x7248;&#x672c;&#xff09;&#x8fdb;&#x884c;&#x4ea4;&#x4e92;&#xff0c;&#x4f8b;&#x5982;&#x5fc3;&#x7387;&#x76d1;&#x6d4b;&#x5668;&#x3001;&#x667a;&#x80fd;&#x706f;&#x6ce1;&#x3001;&#x96f6;&#x552e;&#x4ead;&#x548c;&#x73a9;&#x5177;&#x7b49;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2173,2174" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x529f;&#x80fd;</strong>&#xff1a;&#x5f00;&#x53d1;&#x8005;&#x53ef;&#x4ee5;&#x8bf7;&#x6c42;&#x84dd;&#x7259;&#x8bbe;&#x5907;&#xff08;<code>navigator.bluetooth.requestDevice</code>&#xff09;&#xff0c;&#x8fde;&#x63a5;&#x5230;&#x5176;&#x901a;&#x7528;&#x5c5e;&#x6027;&#x914d;&#x7f6e;&#x6587;&#x4ef6;&#xff08;GATT&#xff09;&#x670d;&#x52a1;&#x5668;&#xff0c;&#x8bfb;&#x53d6;&#x548c;&#x5199;&#x5165;&#x84dd;&#x7259;&#x7279;&#x6027;&#xff0c;&#x63a5;&#x6536; GATT &#x901a;&#x77e5;&#xff0c;&#x4ee5;&#x53ca;&#x65ad;&#x5f00;&#x8fde;&#x63a5;&#x3002;&#x5b83;&#x8fd8;&#x652f;&#x6301;&#x8bfb;&#x53d6;&#x548c;&#x5199;&#x5165;&#x84dd;&#x7259;&#x63cf;&#x8ff0;&#x7b26;&#xff0c;&#x8fd9;&#x4e9b;&#x63cf;&#x8ff0;&#x7b26;&#x63d0;&#x4f9b;&#x6709;&#x5173;&#x7279;&#x6027;&#x503c;&#x7684;&#x9644;&#x52a0;&#x4fe1;&#x606f;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2174,2175" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5b89;&#x5168;&#x4e0e;&#x9690;&#x79c1;</strong>&#xff1a;Web Bluetooth API &#x8981;&#x6c42;&#x5728;&#x5b89;&#x5168;&#x4e0a;&#x4e0b;&#x6587;&#xff08;HTTPS&#xff09;&#x4e2d;&#x8fd0;&#x884c;&#x3002;<code>requestDevice()</code> &#x65b9;&#x6cd5;&#x5fc5;&#x987b;&#x7531;&#x7528;&#x6237;&#x624b;&#x52bf;&#xff08;&#x4f8b;&#x5982;&#x70b9;&#x51fb;&#xff09;&#x89e6;&#x53d1;&#xff0c;&#x4ee5;&#x4f5c;&#x4e3a;&#x5b89;&#x5168;&#x9884;&#x9632;&#x63aa;&#x65bd;&#x3002;&#x8be5; API &#x65e8;&#x5728;&#x901a;&#x8fc7;&#x9650;&#x5236;&#x5bf9;&#x67d0;&#x4e9b;&#x96be;&#x4ee5;&#x5b89;&#x5168;&#x5b9e;&#x73b0;&#x7684;&#x84dd;&#x7259;&#x529f;&#x80fd;&#x7684;&#x8bbf;&#x95ee;&#xff0c;&#x6700;&#x5927;&#x9650;&#x5ea6;&#x5730;&#x51cf;&#x5c11;&#x6076;&#x610f;&#x7f51;&#x7ad9;&#x66b4;&#x9732;&#x7684;&#x8bbe;&#x5907;&#x653b;&#x51fb;&#x9762;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2175,2176" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#x4e0e;&#x6210;&#x719f;&#x5ea6;</strong>&#xff1a;Web Bluetooth API &#x7684;&#x53ef;&#x7528;&#x6027;&#x6709;&#x9650;&#xff0c;&#x88ab;&#x8ba4;&#x4e3a;&#x662f;&#x5b9e;&#x9a8c;&#x6027;&#x6280;&#x672f;&#xff0c;&#x5e76;&#x975e;&#x6240;&#x6709;&#x4e3b;&#x6d41;&#x6d4f;&#x89c8;&#x5668;&#x90fd;&#x652f;&#x6301;&#x3002;&#x4f8b;&#x5982;&#xff0c;Chrome&#x3001;Edge &#x548c; Opera&#xff08;&#x684c;&#x9762;&#x548c; Android&#xff09;&#x63d0;&#x4f9b;&#x90e8;&#x5206;&#x652f;&#x6301;&#xff0c;&#x800c; Firefox &#x548c; Safari &#x5219;&#x4e0d;&#x652f;&#x6301;&#x3002;&#x5c3d;&#x7ba1;&#x5982;&#x6b64;&#xff0c;&#x8be5;&#x6807;&#x51c6;&#x6b63;&#x5728;&#x6210;&#x719f;&#xff0c;&#x5de5;&#x5177;&#x96c6;&#x548c; API &#x6b63;&#x5728;&#x6d8c;&#x73b0;&#xff0c;Chrome 53 &#x5df2;&#x901a;&#x8fc7; Origin Trial&#xff08;&#x6e90;&#x8bd5;&#x7528;&#xff09;&#x652f;&#x6301;&#x84dd;&#x7259;&#x529f;&#x80fd;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2176,2177" },
+                        },
+                        {
+                          content:
+                            "<strong>Electron &#x73af;&#x5883;</strong>&#xff1a;&#x5728; Electron &#x4e2d;&#xff0c;&#x5f00;&#x53d1;&#x8005;&#x53ef;&#x4ee5;&#x901a;&#x8fc7; webContents &#x4e0a;&#x7684; <code>select-bluetooth-device</code> &#x4e8b;&#x4ef6;&#x6765;&#x9009;&#x62e9;&#x84dd;&#x7259;&#x8bbe;&#x5907;&#xff0c;&#x5e76;&#x901a;&#x8fc7; ses.<code>setDevicePermissionHandler</code> &#x63d0;&#x4f9b;&#x9ed8;&#x8ba4;&#x6743;&#x9650;&#xff0c;&#x4ece;&#x800c;&#x5b9e;&#x73b0;&#x66f4;&#x7075;&#x6d3b;&#x7684;&#x8bbe;&#x5907;&#x7ba1;&#x7406;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2177,2179" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2169,2170" },
+                    },
+                    {
+                      content: "<strong>B. WebUSB API</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x7528;&#x4f8b;</strong>&#xff1a;&#x8be5; API &#x4e3b;&#x8981;&#x7528;&#x4e8e;&#x8bbf;&#x95ee;&#x975e;&#x6807;&#x51c6; USB &#x8bbe;&#x5907;&#xff0c;&#x5982;&#x79d1;&#x5b66;&#x548c;&#x5de5;&#x4e1a;&#x8bbe;&#x5907;&#xff0c;&#x4ee5;&#x53ca;&#x56fa;&#x4ef6;&#x5237;&#x5199;&#xff08;&#x6697;&#x793a;&#x6027;&#x5730;&#x63d0;&#x53ca;&#xff09;&#x3002;&#x503c;&#x5f97;&#x6ce8;&#x610f;&#x7684;&#x662f;&#xff0c;&#x5b83;&#x4e0d;&#x652f;&#x6301;&#x5e38;&#x89c1;&#x7684;&#x8bbe;&#x5907;&#xff0c;&#x5982;&#x7f51;&#x7edc;&#x6444;&#x50cf;&#x5934;&#x3001;HID &#x8bbe;&#x5907;&#x6216;&#x5927;&#x5bb9;&#x91cf;&#x5b58;&#x50a8;&#x8bbe;&#x5907;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2183,2184" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5b89;&#x5168;&#x4e0e;&#x9690;&#x79c1;</strong>&#xff1a;&#x4e0e; Web Bluetooth &#x7c7b;&#x4f3c;&#xff0c;WebUSB API &#x4e5f;&#x4ec5;&#x5728;&#x5b89;&#x5168;&#x4e0a;&#x4e0b;&#x6587;&#xff08;HTTPS&#xff09;&#x4e2d;&#x8fd0;&#x884c;&#x3002;<code>requestDevice()</code> &#x65b9;&#x6cd5;&#x540c;&#x6837;&#x9700;&#x8981;&#x7528;&#x6237;&#x624b;&#x52bf;&#x89e6;&#x53d1;&#x3002;&#x6743;&#x9650;&#x7b56;&#x7565;&#xff08;Permissions Policy&#xff09;&#x673a;&#x5236;&#x5141;&#x8bb8;&#x5f00;&#x53d1;&#x8005;&#x9009;&#x62e9;&#x6027;&#x5730;&#x542f;&#x7528;&#x6216;&#x7981;&#x7528; WebUSB &#x7b49;&#x6d4f;&#x89c8;&#x5668;&#x529f;&#x80fd;&#x548c; API&#x3002;&#x7136;&#x800c;&#xff0c;WebUSB &#x4e5f;&#x5e26;&#x6765;&#x6f5c;&#x5728;&#x7684;&#x5b89;&#x5168;&#x9690;&#x60a3;&#xff0c;&#x4f8b;&#x5982;&#x7f51;&#x7ad9;&#x53ef;&#x80fd;&#x5229;&#x7528;&#x5b83;&#x5efa;&#x7acb; ADB &#x8fde;&#x63a5;&#x5e76;&#x5165;&#x4fb5;&#x8fde;&#x63a5;&#x7684; Android &#x624b;&#x673a;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2184,2185" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#x4e0e;&#x6210;&#x719f;&#x5ea6;</strong>&#xff1a;WebUSB API &#x7684;&#x53ef;&#x7528;&#x6027;&#x6709;&#x9650;&#xff0c;&#x540c;&#x6837;&#x88ab;&#x89c6;&#x4e3a;&#x5b9e;&#x9a8c;&#x6027;&#x6280;&#x672f;&#x3002;Chrome&#x3001;Edge &#x548c; Opera&#xff08;&#x684c;&#x9762;&#x548c; Android&#xff09;&#x4ece;&#x65e9;&#x671f;&#x7248;&#x672c;&#x5f00;&#x59cb;&#x63d0;&#x4f9b;&#x5168;&#x9762;&#x652f;&#x6301;&#xff0c;&#x4f46; Firefox &#x548c; Safari &#x4ecd;&#x4e0d;&#x652f;&#x6301;&#x3002;&#x8be5; API &#x5df2;&#x5728; Chrome 61 &#x4e2d;&#x9ed8;&#x8ba4;&#x542f;&#x7528;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2185,2186" },
+                        },
+                        {
+                          content:
+                            "<strong>Electron &#x73af;&#x5883;</strong>&#xff1a;&#x5728; Electron &#x4e2d;&#xff0c;WebUSB API &#x63d0;&#x4f9b;&#x4e86; <code>select-usb-device</code> &#x4e8b;&#x4ef6;&#xff0c;&#x4ee5;&#x53ca; <code>usb-device-added</code>&#x3001;<code>usb-device-removed</code> &#x548c; <code>usb-device-revoked</code> &#x4e8b;&#x4ef6;&#x6765;&#x5904;&#x7406;&#x8bbe;&#x5907;&#x7684;&#x63d2;&#x62d4;&#x548c;&#x64a4;&#x9500;&#x3002;ses.<code>setDevicePermissionHandler</code> &#x53ef;&#x7528;&#x4e8e;&#x8bbe;&#x7f6e;&#x9ed8;&#x8ba4;&#x6743;&#x9650;&#xff0c;ses.<code>setUSBProtectedClassesHandler</code> &#x5219;&#x5141;&#x8bb8;&#x4f7f;&#x7528;&#x9ed8;&#x8ba4;&#x4e0d;&#x53ef;&#x7528;&#x7684;&#x53d7;&#x4fdd;&#x62a4; USB &#x7c7b;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2186,2188" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2179,2180" },
+                    },
+                    {
+                      content: "<strong>C. WebHID API</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x7528;&#x4f8b;</strong>&#xff1a;WebHID API &#x53ef;&#x7528;&#x4e8e;&#x8bbf;&#x95ee;&#x5404;&#x79cd; HID &#x8bbe;&#x5907;&#xff0c;&#x5305;&#x62ec; Elgato StreamDeck &#x548c; blink(1) &#x7b49;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2192,2193" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5b89;&#x5168;&#x4e0e;&#x9690;&#x79c1;</strong>&#xff1a;&#x8bbe;&#x5907;&#x8bbf;&#x95ee;&#x5fc5;&#x987b;&#x901a;&#x8fc7;&#x6d4f;&#x89c8;&#x5668;&#x63d0;&#x4f9b;&#x7684;&#x9009;&#x62e9;&#x5668;&#x5bf9;&#x8bdd;&#x6846;&#x7531;&#x7528;&#x6237;&#x6388;&#x4e88;&#xff0c;&#x7c7b;&#x4f3c;&#x4e8e; WebUSB &#x548c; Web Bluetooth&#x3002;&#x503c;&#x5f97;&#x6ce8;&#x610f;&#x7684;&#x662f;&#xff0c;&#x751f;&#x6210;&#x53d7;&#x4fe1;&#x4efb;&#x8f93;&#x5165;&#xff08;&#x4f8b;&#x5982;&#x952e;&#x76d8;&#x3001;&#x9f20;&#x6807;&#x3001;&#x5b89;&#x5168;&#x5bc6;&#x94a5;&#xff09;&#x7684;&#x8bbe;&#x5907;&#x901a;&#x5e38;&#x4e0d;&#x4f1a;&#x88ab;&#x8bbf;&#x95ee;&#xff0c;&#x56e0;&#x4e3a;&#x5b83;&#x4eec;&#x5728;&#x9876;&#x5c42; HID &#x96c6;&#x5408;&#x4e2d;&#x88ab;&#x89c6;&#x4e3a;&#x53d7;&#x4fdd;&#x62a4;&#x7528;&#x9014;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2193,2194" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6d4f;&#x89c8;&#x5668;&#x652f;&#x6301;&#x4e0e;&#x6210;&#x719f;&#x5ea6;</strong>&#xff1a;WebHID API &#x4e5f;&#x662f;&#x4e00;&#x9879;&#x5b9e;&#x9a8c;&#x6027;&#x6280;&#x672f;&#xff0c;&#x53ef;&#x7528;&#x6027;&#x6709;&#x9650;&#x3002;&#x5b83;&#x5728; Chrome&#x3001;Edge &#x548c; Opera &#x7684;&#x684c;&#x9762;&#x7248;&#x672c;&#x4e2d;&#x4ece;&#x8f83;&#x65b0;&#x7248;&#x672c;&#xff08;&#x4f8b;&#x5982; Chrome 89&#x3001;Opera 75&#xff09;&#x5f00;&#x59cb;&#x63d0;&#x4f9b;&#x5168;&#x9762;&#x652f;&#x6301;&#xff0c;&#x4f46;&#x5728;&#x79fb;&#x52a8;&#x8bbe;&#x5907;&#x3001;Firefox &#x548c; Safari &#x4e2d;&#x4ecd;&#x4e0d;&#x53d7;&#x652f;&#x6301;&#x3002;&#x5c3d;&#x7ba1;&#x5b83;&#x4e0d;&#x662f; W3C &#x6807;&#x51c6;&#xff0c;&#x4f46;&#x81ea; Chrome 89&#xff08;2021 &#x5e74; 3 &#x6708;&#xff09;&#x8d77;&#x5df2;&#x9ed8;&#x8ba4;&#x542f;&#x7528;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2194,2195" },
+                        },
+                        {
+                          content:
+                            "<strong>Electron &#x73af;&#x5883;</strong>&#xff1a;&#x5728; Electron &#x4e2d;&#xff0c;WebHID API &#x63d0;&#x4f9b;&#x4e86; <code>select-hid-device</code> &#x4e8b;&#x4ef6;&#x6765;&#x9009;&#x62e9; HID &#x8bbe;&#x5907;&#xff0c;&#x4ee5;&#x53ca; <code>hid-device-added</code> &#x548c; <code>hid-device-removed</code> &#x4e8b;&#x4ef6;&#x6765;&#x5904;&#x7406;&#x8bbe;&#x5907;&#x63d2;&#x62d4;&#x3002;<code>ses.setDevicePermissionHandler</code> &#x53ef;&#x7528;&#x4e8e;&#x63d0;&#x4f9b;&#x9ed8;&#x8ba4;&#x6743;&#x9650;&#xff0c;&#x800c; <code>ses.setPermissionCheckHandler</code> &#x5219;&#x53ef;&#x7528;&#x4e8e;&#x7981;&#x7528;&#x7279;&#x5b9a;&#x6765;&#x6e90;&#x7684; HID &#x8bbf;&#x95ee;&#x3002;Electron &#x9ed8;&#x8ba4;&#x4f7f;&#x7528;&#x4e0e; Chromium &#x76f8;&#x540c;&#x7684;&#x9ed1;&#x540d;&#x5355;&#xff0c;&#x4f46;&#x53ef;&#x4ee5;&#x901a;&#x8fc7; <code>disable-hid-blocklist</code> &#x6807;&#x5fd7;&#x8986;&#x76d6;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2195,2197" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2188,2189" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2146,2147" },
+                },
+              ],
+              payload: { tag: "h2", lines: "1761,1762" },
+            },
+            {
+              content:
+                "<strong>VII. &#x6301;&#x7eed;&#x5b66;&#x4e60;&#x548c;&#x804c;&#x4e1a;&#x53d1;&#x5c55;</strong>",
+              children: [
+                {
+                  content:
+                    "<strong>A. &#x56e2;&#x961f;&#x534f;&#x4f5c;&#x4e0e;&#x6c9f;&#x901a; (Soft Skills)</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x4ee3;&#x7801;&#x89c4;&#x8303;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<a href="https://www.conventionalcommits.org/"><strong>Conventional Commits</strong></a>&#xff1a;&#x4e00;&#x79cd;&#x8f7b;&#x91cf;&#x7ea7;&#x7684;&#x63d0;&#x4ea4;&#x6d88;&#x606f;&#x7ea6;&#x5b9a;&#xff0c;&#x4e3a;&#x63d0;&#x4ea4;&#x5386;&#x53f2;&#x63d0;&#x4f9b;&#x660e;&#x786e;&#x7684;&#x7ed3;&#x6784;&#x5316;&#x4fe1;&#x606f;&#xff0c;&#x4fbf;&#x4e8e;&#x81ea;&#x52a8;&#x5316;&#x5de5;&#x5177;&#xff08;&#x5982;&#x751f;&#x6210;&#x66f4;&#x65b0;&#x65e5;&#x5fd7;&#x3001;&#x81ea;&#x52a8;&#x7248;&#x672c;&#x53d1;&#x5e03;&#xff09;&#x5904;&#x7406;&#x3002;&#x4f8b;&#x5982;&#xff1a;feat: add user login functionality&#x3001;fix: correct typo in button text&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2213,2214" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4ee3;&#x7801;&#x98ce;&#x683c;&#x6307;&#x5357;</strong>&#xff1a;&#x56e2;&#x961f;&#x5e94;&#x5236;&#x5b9a;&#x5e76;&#x9075;&#x5faa;&#x7edf;&#x4e00;&#x7684;&#x4ee3;&#x7801;&#x98ce;&#x683c;&#x6307;&#x5357;&#xff08;&#x5982; Airbnb JavaScript Style Guide&#x3001;Google Style Guide&#xff09;&#xff0c;&#x6db5;&#x76d6;&#x547d;&#x540d;&#x7ea6;&#x5b9a;&#x3001;&#x7f29;&#x8fdb;&#x3001;&#x62ec;&#x53f7;&#x4f7f;&#x7528;&#x3001;&#x6ce8;&#x91ca;&#x89c4;&#x8303;&#x7b49;&#x3002;&#x901a;&#x8fc7; Prettier&#x3001;ESLint &#x7b49;&#x5de5;&#x5177;&#x8fdb;&#x884c;&#x81ea;&#x52a8;&#x5316;&#x68c0;&#x67e5;&#x548c;&#x683c;&#x5f0f;&#x5316;&#xff0c;&#x5f3a;&#x5236;&#x6267;&#x884c;&#x8fd9;&#x4e9b;&#x89c4;&#x8303;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2214,2216" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2209,2210" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x6587;&#x6863;&#x6587;&#x5316;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5982;&#x4f55;&#x7f16;&#x5199;&#x6e05;&#x6670;&#x7684;&#x6280;&#x672f;&#x3001;API &#x548c;&#x7ec4;&#x4ef6;&#x6587;&#x6863;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x6280;&#x672f;&#x6587;&#x6863;</strong>&#xff1a;&#x89e3;&#x91ca;&#x7cfb;&#x7edf;&#x67b6;&#x6784;&#x3001;&#x8bbe;&#x8ba1;&#x51b3;&#x7b56;&#x3001;&#x6280;&#x672f;&#x9009;&#x578b;&#x7406;&#x7531;&#x3001;&#x90e8;&#x7f72;&#x6d41;&#x7a0b;&#x7b49;&#xff0c;&#x5e2e;&#x52a9;&#x65b0;&#x6210;&#x5458;&#x5feb;&#x901f;&#x4e0a;&#x624b;&#xff0c;&#x8001;&#x6210;&#x5458;&#x7406;&#x89e3;&#x7cfb;&#x7edf;&#x5168;&#x8c8c;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2221,2222" },
+                            },
+                            {
+                              content:
+                                '<strong>API &#x6587;&#x6863;</strong>&#xff1a;&#x6e05;&#x6670;&#x63cf;&#x8ff0;&#x6bcf;&#x4e2a; API &#x7684;&#x8bf7;&#x6c42;/&#x54cd;&#x5e94;&#x683c;&#x5f0f;&#x3001;&#x53c2;&#x6570;&#x3001;&#x9519;&#x8bef;&#x7801;&#x3001;&#x8ba4;&#x8bc1;&#x65b9;&#x5f0f;&#x7b49;&#x3002;&#x4f7f;&#x7528; <a href="https://swagger.io/">Swagger</a>/<a href="https://www.openapis.org/">OpenAPI</a> &#x7b49;&#x5de5;&#x5177;&#x53ef;&#x4ee5;&#x81ea;&#x52a8;&#x5316;&#x751f;&#x6210;&#x548c;&#x7ef4;&#x62a4;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "2222,2223" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x7ec4;&#x4ef6;&#x6587;&#x6863;</strong>&#xff1a;&#x5bf9;&#x4e8e; UI &#x7ec4;&#x4ef6;&#x5e93;&#xff0c;&#x6bcf;&#x4e2a;&#x7ec4;&#x4ef6;&#x5e94;&#x6709;&#x8be6;&#x7ec6;&#x7684; Props&#x3001;Events&#x3001;Slots &#x8bf4;&#x660e;&#xff0c;&#x4ee5;&#x53ca;&#x4f7f;&#x7528;&#x793a;&#x4f8b;&#x3001;&#x8bbe;&#x8ba1;&#x89c4;&#x8303;&#x548c;&#x53ef;&#x8bbf;&#x95ee;&#x6027;&#x6307;&#x5357;&#x3002;Storybook &#x662f;&#x6d41;&#x884c;&#x7684;&#x7ec4;&#x4ef6;&#x6587;&#x6863;&#x5de5;&#x5177;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2223,2224" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2220,2224" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6587;&#x6863;&#x5373;&#x4ee3;&#x7801; (Docs as Code)</strong>&#xff1a;&#x5c06;&#x6587;&#x6863;&#x4e0e;&#x4ee3;&#x7801;&#x4e00;&#x8d77;&#x5b58;&#x50a8;&#x5728;&#x7248;&#x672c;&#x63a7;&#x5236;&#x7cfb;&#x7edf;&#x4e2d;&#xff0c;&#x901a;&#x8fc7; Markdown&#x3001;reStructuredText &#x7b49;&#x8f7b;&#x91cf;&#x7ea7;&#x6807;&#x8bb0;&#x8bed;&#x8a00;&#x7f16;&#x5199;&#xff0c;&#x5e76;&#x96c6;&#x6210;&#x5230; CI/CD &#x6d41;&#x7a0b;&#x4e2d;&#xff0c;&#x786e;&#x4fdd;&#x6587;&#x6863;&#x4e0e;&#x4ee3;&#x7801;&#x540c;&#x6b65;&#x66f4;&#x65b0;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2224,2226" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2216,2217" },
+                    },
+                    {
+                      content:
+                        "<strong>Code Review &#x7684;&#x827a;&#x672f;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5982;&#x4f55;&#x7ed9;&#x4e88;&#x548c;&#x63a5;&#x53d7;&#x6709;&#x5efa;&#x8bbe;&#x6027;&#x7684;&#x53cd;&#x9988;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x7ed9;&#x4e88;&#x53cd;&#x9988;</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x5177;&#x4f53;&#x4e14;&#x5ba2;&#x89c2;</strong>&#xff1a;&#x6307;&#x51fa;&#x5177;&#x4f53;&#x4ee3;&#x7801;&#x884c;&#x548c;&#x95ee;&#x9898;&#xff0c;&#x907f;&#x514d;&#x6a21;&#x7cca;&#x8bc4;&#x4ef7;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2232,2233" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x4ee5;&#x95ee;&#x9898;&#x4e3a;&#x5bfc;&#x5411;</strong>&#xff1a;&#x63d0;&#x51fa;&#x95ee;&#x9898;&#x800c;&#x975e;&#x76f4;&#x63a5;&#x7ed9;&#x51fa;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#xff0c;&#x9f13;&#x52b1;&#x4f5c;&#x8005;&#x601d;&#x8003;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2233,2234" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x5173;&#x6ce8;&#x70b9;&#x5206;&#x79bb;</strong>&#xff1a;&#x533a;&#x5206;&#x5f3a;&#x5236;&#x4fee;&#x6539;&#xff08;bug&#x3001;&#x5b89;&#x5168;&#xff09;&#x548c;&#x5efa;&#x8bae;&#xff08;&#x98ce;&#x683c;&#x3001;&#x4f18;&#x5316;&#xff09;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2234,2235" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x79ef;&#x6781;&#x8bed;&#x6c14;</strong>&#xff1a;&#x4fdd;&#x6301;&#x4e13;&#x4e1a;&#x548c;&#x5c0a;&#x91cd;&#x7684;&#x6001;&#x5ea6;&#xff0c;&#x907f;&#x514d;&#x4eba;&#x8eab;&#x653b;&#x51fb;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2235,2236" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x89e3;&#x91ca;&#x539f;&#x56e0;</strong>&#xff1a;&#x8bf4;&#x660e;&#x4e3a;&#x4ec0;&#x4e48;&#x67d0;&#x4e2a;&#x6539;&#x52a8;&#x662f;&#x5fc5;&#x8981;&#x7684;&#xff0c;&#x63d0;&#x4f9b;&#x80cc;&#x666f;&#x4fe1;&#x606f;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2236,2237" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "2231,2237" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x63a5;&#x53d7;&#x53cd;&#x9988;</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x5f00;&#x653e;&#x5fc3;&#x6001;</strong>&#xff1a;&#x5c06;&#x53cd;&#x9988;&#x89c6;&#x4e3a;&#x5b66;&#x4e60;&#x548c;&#x6539;&#x8fdb;&#x7684;&#x673a;&#x4f1a;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2238,2239" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x63d0;&#x95ee;&#x6f84;&#x6e05;</strong>&#xff1a;&#x4e0d;&#x7406;&#x89e3;&#x65f6;&#x53ca;&#x65f6;&#x63d0;&#x95ee;&#xff0c;&#x786e;&#x4fdd;&#x7406;&#x89e3;&#x53cd;&#x9988;&#x610f;&#x56fe;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2239,2240" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x8ba8;&#x8bba;&#x800c;&#x975e;&#x4e89;&#x8fa9;</strong>&#xff1a;&#x5bf9;&#x4e8e;&#x4e0d;&#x540c;&#x610f;&#x89c1;&#xff0c;&#x8fdb;&#x884c;&#x6280;&#x672f;&#x8ba8;&#x8bba;&#xff0c;&#x5bfb;&#x6c42;&#x6700;&#x4f73;&#x65b9;&#x6848;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2240,2241" },
+                                },
+                                {
+                                  content:
+                                    "<strong>&#x53ca;&#x65f6;&#x54cd;&#x5e94;</strong>&#xff1a;&#x5c3d;&#x5feb;&#x5904;&#x7406;&#x53cd;&#x9988;&#x6216;&#x7ed9;&#x51fa;&#x5904;&#x7406;&#x8ba1;&#x5212;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2241,2242" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "2237,2242" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2230,2242" },
+                        },
+                        {
+                          content:
+                            "<strong>Code Review &#x6d41;&#x7a0b;&#x4f18;&#x5316;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x5c0f;&#x800c;&#x9891;&#x7e41;&#x7684; PR</strong>&#xff1a;&#x6bcf;&#x6b21;&#x63d0;&#x4ea4;&#x7684; PR &#x5e94;&#x5c3d;&#x53ef;&#x80fd;&#x5c0f;&#xff0c;&#x805a;&#x7126;&#x5355;&#x4e00;&#x529f;&#x80fd;&#x6216;&#x4fee;&#x590d;&#xff0c;&#x4fbf;&#x4e8e;&#x5feb;&#x901f;&#x5ba1;&#x67e5;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2243,2244" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x81ea;&#x52a8;&#x5316;&#x8f85;&#x52a9;</strong>&#xff1a;&#x5229;&#x7528; Linting&#x3001;&#x683c;&#x5f0f;&#x5316;&#x3001;&#x5355;&#x5143;&#x6d4b;&#x8bd5;&#x7b49;&#x81ea;&#x52a8;&#x5316;&#x5de5;&#x5177;&#x51cf;&#x8f7b;&#x4eba;&#x5de5;&#x5ba1;&#x67e5;&#x8d1f;&#x62c5;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2244,2245" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x660e;&#x786e;&#x5ba1;&#x67e5;&#x76ee;&#x6807;</strong>&#xff1a;&#x8ba9;&#x5ba1;&#x67e5;&#x8005;&#x77e5;&#x9053;&#x5e94;&#x8be5;&#x5173;&#x6ce8;&#x54ea;&#x4e9b;&#x65b9;&#x9762;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2245,2247" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2242,2247" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2226,2227" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x9879;&#x76ee;&#x7ba1;&#x7406;&#x4e0e;&#x8de8;&#x56e2;&#x961f;&#x6c9f;&#x901a;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<strong>&#x9879;&#x76ee;&#x7ba1;&#x7406;</strong>&#xff1a;&#x719f;&#x6089;&#x654f;&#x6377;&#x5f00;&#x53d1;&#x65b9;&#x6cd5;&#xff08;<a href="https://www.scrum.org/">Scrum</a>&#x3001;<a href="https://www.atlassian.com/agile/kanban">Kanban</a>&#xff09;&#xff0c;&#x53c2;&#x4e0e;&#x9700;&#x6c42;&#x5206;&#x6790;&#x3001;&#x4efb;&#x52a1;&#x62c6;&#x89e3;&#x3001;&#x8fdb;&#x5ea6;&#x8ddf;&#x8e2a;&#x548c;&#x98ce;&#x9669;&#x7ba1;&#x7406;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2251,2252" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x8de8;&#x56e2;&#x961f;&#x6c9f;&#x901a;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x6e05;&#x6670;&#x8868;&#x8fbe;</strong>&#xff1a;&#x5c06;&#x590d;&#x6742;&#x6280;&#x672f;&#x95ee;&#x9898;&#x8f6c;&#x5316;&#x4e3a;&#x975e;&#x6280;&#x672f;&#x4eba;&#x5458;&#x80fd;&#x7406;&#x89e3;&#x7684;&#x8bed;&#x8a00;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2253,2254" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x79ef;&#x6781;&#x503e;&#x542c;</strong>&#xff1a;&#x7406;&#x89e3;&#x5176;&#x4ed6;&#x56e2;&#x961f;&#x7684;&#x9700;&#x6c42;&#x548c;&#x7ea6;&#x675f;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2254,2255" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x4e3b;&#x52a8;&#x540c;&#x6b65;</strong>&#xff1a;&#x5b9a;&#x671f;&#x4e0e;&#x76f8;&#x5173;&#x56e2;&#x961f;&#x540c;&#x6b65;&#x8fdb;&#x5c55;&#x3001;&#x8ba8;&#x8bba;&#x63a5;&#x53e3;&#x53d8;&#x66f4;&#x3001;&#x534f;&#x8c03;&#x53d1;&#x5e03;&#x8ba1;&#x5212;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2255,2256" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x8bc6;&#x522b;&#x4f9d;&#x8d56;</strong>&#xff1a;&#x660e;&#x786e;&#x9879;&#x76ee;&#x95f4;&#x7684;&#x4f9d;&#x8d56;&#x5173;&#x7cfb;&#xff0c;&#x63d0;&#x524d;&#x6c9f;&#x901a;&#xff0c;&#x907f;&#x514d;&#x963b;&#x585e;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2256,2258" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2252,2258" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2247,2248" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2205,2206" },
+                },
+                {
+                  content:
+                    "<strong>B. &#x9879;&#x76ee;&#x5b9e;&#x6218;&#x4e0e;&#x6210;&#x957f;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x4ece;&#x96f6;&#x5230;&#x4e00;&#x7684;&#x5b8c;&#x6574;&#x9879;&#x76ee;&#x5f00;&#x53d1;&#x6d41;&#x7a0b;&#x793a;&#x4f8b;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x9700;&#x6c42;&#x5206;&#x6790;&#x4e0e;&#x4ea7;&#x54c1;&#x8bbe;&#x8ba1;</strong>&#xff1a;&#x4e0e;&#x4ea7;&#x54c1;&#x7ecf;&#x7406;&#x3001;&#x8bbe;&#x8ba1;&#x5e08;&#x6c9f;&#x901a;&#xff0c;&#x7406;&#x89e3;&#x4e1a;&#x52a1;&#x9700;&#x6c42;&#xff0c;&#x53c2;&#x4e0e; UI/UX &#x8bbe;&#x8ba1;&#x8bc4;&#x5ba1;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2268,2269" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6280;&#x672f;&#x9009;&#x578b;&#x4e0e;&#x67b6;&#x6784;&#x8bbe;&#x8ba1;</strong>&#xff1a;&#x6839;&#x636e;&#x9879;&#x76ee;&#x9700;&#x6c42;&#x3001;&#x56e2;&#x961f;&#x7ecf;&#x9a8c;&#x548c;&#x672a;&#x6765;&#x6269;&#x5c55;&#x6027;&#xff0c;&#x9009;&#x62e9;&#x5408;&#x9002;&#x7684;&#x524d;&#x7aef;&#x6846;&#x67b6;&#x3001;&#x5e93;&#x3001;&#x6784;&#x5efa;&#x5de5;&#x5177;&#x3001;&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x65b9;&#x6848;&#x7b49;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2269,2270" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5f00;&#x53d1;&#x73af;&#x5883;&#x642d;&#x5efa;</strong>&#xff1a;&#x914d;&#x7f6e;&#x4ee3;&#x7801;&#x7f16;&#x8f91;&#x5668;&#x3001;&#x7248;&#x672c;&#x63a7;&#x5236;&#xff08;Git&#xff09;&#x3001;&#x5305;&#x7ba1;&#x7406;&#x5668;&#xff08;npm/yarn&#xff09;&#x3001;&#x6784;&#x5efa;&#x5de5;&#x5177;&#xff08;Webpack/Vite&#xff09;&#x3001;&#x672c;&#x5730;&#x5f00;&#x53d1;&#x670d;&#x52a1;&#x5668;&#x7b49;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2270,2271" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x7ec4;&#x4ef6;&#x5316;&#x5f00;&#x53d1;</strong>&#xff1a;&#x6839;&#x636e;&#x8bbe;&#x8ba1;&#x7a3f;&#x62c6;&#x5206; UI &#x7ec4;&#x4ef6;&#xff0c;&#x5b9e;&#x73b0;&#x53ef;&#x590d;&#x7528;&#x3001;&#x53ef;&#x7ef4;&#x62a4;&#x7684;&#x7ec4;&#x4ef6;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2271,2272" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6570;&#x636e;&#x4ea4;&#x4e92;</strong>&#xff1a;&#x4e0e;&#x540e;&#x7aef;&#x5b9a;&#x4e49; API &#x63a5;&#x53e3;&#xff0c;&#x5b9e;&#x73b0;&#x6570;&#x636e;&#x8bf7;&#x6c42;&#x3001;&#x54cd;&#x5e94;&#x5904;&#x7406;&#x3001;&#x9519;&#x8bef;&#x5904;&#x7406;&#x548c;&#x6570;&#x636e;&#x7f13;&#x5b58;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2272,2273" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x72b6;&#x6001;&#x7ba1;&#x7406;</strong>&#xff1a;&#x9009;&#x62e9;&#x5408;&#x9002;&#x7684;&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x65b9;&#x6848;&#xff08;&#x5982; Redux&#x3001;Vuex&#x3001;Zustand&#xff09;&#xff0c;&#x7ba1;&#x7406;&#x5e94;&#x7528;&#x5168;&#x5c40;&#x72b6;&#x6001;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2273,2274" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x8def;&#x7531;&#x7ba1;&#x7406;</strong>&#xff1a;&#x914d;&#x7f6e;&#x524d;&#x7aef;&#x8def;&#x7531;&#xff0c;&#x5b9e;&#x73b0;&#x9875;&#x9762;&#x95f4;&#x7684;&#x5bfc;&#x822a;&#x548c; URL &#x540c;&#x6b65;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2274,2275" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6027;&#x80fd;&#x4f18;&#x5316;</strong>&#xff1a;&#x5728;&#x5f00;&#x53d1;&#x8fc7;&#x7a0b;&#x4e2d;&#x5173;&#x6ce8;&#x4ee3;&#x7801;&#x5206;&#x5272;&#x3001;&#x61d2;&#x52a0;&#x8f7d;&#x3001;&#x56fe;&#x7247;&#x4f18;&#x5316;&#x3001;&#x8bf7;&#x6c42;&#x4f18;&#x5316;&#x7b49;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2275,2276" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6d4b;&#x8bd5;</strong>&#xff1a;&#x7f16;&#x5199;&#x5355;&#x5143;&#x6d4b;&#x8bd5;&#x3001;&#x96c6;&#x6210;&#x6d4b;&#x8bd5;&#x3001;&#x7aef;&#x5230;&#x7aef;&#x6d4b;&#x8bd5;&#xff0c;&#x786e;&#x4fdd;&#x4ee3;&#x7801;&#x8d28;&#x91cf;&#x548c;&#x529f;&#x80fd;&#x6b63;&#x786e;&#x6027;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2276,2277" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x90e8;&#x7f72;&#x4e0e;&#x8fd0;&#x7ef4;</strong>&#xff1a;&#x914d;&#x7f6e; CI/CD &#x6d41;&#x6c34;&#x7ebf;&#xff0c;&#x5b9e;&#x73b0;&#x81ea;&#x52a8;&#x5316;&#x6784;&#x5efa;&#x3001;&#x6d4b;&#x8bd5;&#x548c;&#x90e8;&#x7f72;&#xff0c;&#x5e76;&#x96c6;&#x6210;&#x7ebf;&#x4e0a;&#x76d1;&#x63a7;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2277,2278" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x8fed;&#x4ee3;&#x4e0e;&#x7ef4;&#x62a4;</strong>&#xff1a;&#x6839;&#x636e;&#x7528;&#x6237;&#x53cd;&#x9988;&#x548c;&#x4e1a;&#x52a1;&#x9700;&#x6c42;&#xff0c;&#x6301;&#x7eed;&#x8fed;&#x4ee3;&#x65b0;&#x529f;&#x80fd;&#xff0c;&#x4fee;&#x590d; bug&#xff0c;&#x4f18;&#x5316;&#x6027;&#x80fd;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2278,2280" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2264,2265" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x5e38;&#x89c1;&#x95ee;&#x9898;&#xff08;&#x8e29;&#x5751;&#xff09;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x96c6;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x6027;&#x80fd;&#x95ee;&#x9898;</strong>&#xff1a;&#x9875;&#x9762;&#x52a0;&#x8f7d;&#x6162;&#x3001;&#x5361;&#x987f;&#x3001;&#x5185;&#x5b58;&#x6cc4;&#x6f0f;&#x3002;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>&#xff1a;&#x4f7f;&#x7528;&#x6027;&#x80fd;&#x5206;&#x6790;&#x5de5;&#x5177;&#xff08;Lighthouse&#x3001;Webpack Bundle Analyzer&#xff09;&#x5b9a;&#x4f4d;&#x74f6;&#x9888;&#xff1b;&#x4f18;&#x5316;&#x56fe;&#x7247;&#x548c;&#x5b57;&#x4f53;&#xff1b;&#x5b9e;&#x65bd;&#x4ee3;&#x7801;&#x5206;&#x5272;&#x548c;&#x61d2;&#x52a0;&#x8f7d;&#xff1b;&#x51cf;&#x5c11; DOM &#x64cd;&#x4f5c;&#xff1b;&#x5229;&#x7528;&#x865a;&#x62df;&#x5217;&#x8868;&#xff1b;&#x4f18;&#x5316;&#x7f51;&#x7edc;&#x8bf7;&#x6c42;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2285,2286" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2284,2286" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x517c;&#x5bb9;&#x6027;&#x95ee;&#x9898;</strong>&#xff1a;&#x4e0d;&#x540c;&#x6d4f;&#x89c8;&#x5668;&#x3001;&#x8bbe;&#x5907;&#x3001;&#x64cd;&#x4f5c;&#x7cfb;&#x7edf;&#x4e0a;&#x7684;&#x8868;&#x73b0;&#x4e0d;&#x4e00;&#x81f4;&#x3002;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>&#xff1a;&#x4f7f;&#x7528; Babel &#x8fdb;&#x884c; JS &#x517c;&#x5bb9;&#x6027;&#x8f6c;&#x6362;&#xff1b;&#x4f7f;&#x7528; Autoprefixer &#x5904;&#x7406; CSS &#x524d;&#x7f00;&#xff1b;&#x8fdb;&#x884c;&#x591a;&#x6d4f;&#x89c8;&#x5668;&#x6d4b;&#x8bd5;&#xff1b;&#x9075;&#x5faa; Web &#x6807;&#x51c6;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2287,2288" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2286,2288" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6784;&#x5efa;/&#x90e8;&#x7f72;&#x95ee;&#x9898;</strong>&#xff1a;&#x6784;&#x5efa;&#x5931;&#x8d25;&#x3001;&#x90e8;&#x7f72;&#x73af;&#x5883;&#x5dee;&#x5f02;&#x3001;CI/CD &#x6d41;&#x6c34;&#x7ebf;&#x6545;&#x969c;&#x3002;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>&#xff1a;&#x719f;&#x6089;&#x6784;&#x5efa;&#x5de5;&#x5177;&#x914d;&#x7f6e;&#xff1b;&#x4f7f;&#x7528;&#x5bb9;&#x5668;&#x5316;&#x6280;&#x672f;&#xff08;Docker&#xff09;&#x7edf;&#x4e00;&#x73af;&#x5883;&#xff1b;&#x68c0;&#x67e5; CI/CD &#x65e5;&#x5fd7;&#xff1b;&#x914d;&#x7f6e;&#x73af;&#x5883;&#x53d8;&#x91cf;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2289,2290" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2288,2290" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x6df7;&#x4e71;</strong>&#xff1a;&#x6570;&#x636e;&#x6d41;&#x590d;&#x6742;&#x3001;&#x72b6;&#x6001;&#x4e0d;&#x540c;&#x6b65;&#x3001;&#x7ec4;&#x4ef6;&#x95f4;&#x901a;&#x4fe1;&#x56f0;&#x96be;&#x3002;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>&#xff1a;&#x9009;&#x62e9;&#x5408;&#x9002;&#x7684;&#x72b6;&#x6001;&#x7ba1;&#x7406;&#x6a21;&#x5f0f;&#xff1b;&#x4e25;&#x683c;&#x9075;&#x5faa;&#x5355;&#x5411;&#x6570;&#x636e;&#x6d41;&#xff1b;&#x5229;&#x7528;&#x4e8b;&#x4ef6;&#x603b;&#x7ebf;&#x6216;&#x5171;&#x4eab;&#x670d;&#x52a1;&#x8fdb;&#x884c;&#x8de8;&#x7ec4;&#x4ef6;&#x901a;&#x4fe1;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2291,2292" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2290,2292" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5b89;&#x5168;&#x95ee;&#x9898;</strong>&#xff1a;XSS&#x3001;CSRF&#x3001;&#x6570;&#x636e;&#x6cc4;&#x9732;&#x3002;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x89e3;&#x51b3;&#x65b9;&#x6848;</strong>&#xff1a;&#x5bf9;&#x7528;&#x6237;&#x8f93;&#x5165;&#x8fdb;&#x884c;&#x4e25;&#x683c;&#x9a8c;&#x8bc1;&#x548c;&#x6e05;&#x7406;&#xff1b;&#x4f7f;&#x7528; HTTPS&#xff1b;&#x914d;&#x7f6e; CORS&#xff1b;&#x9632;&#x6b62; CSRF &#x653b;&#x51fb;&#xff08;Token&#xff09;&#xff1b;&#x6ce8;&#x610f;&#x654f;&#x611f;&#x4fe1;&#x606f;&#x5b58;&#x50a8;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2293,2295" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2292,2295" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2280,2281" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x5f00;&#x6e90;&#x8d21;&#x732e;&#x6307;&#x5357;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5982;&#x4f55;&#x53c2;&#x4e0e;&#x5230;&#x5f00;&#x6e90;&#x793e;&#x533a;&#x4e2d;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x9009;&#x62e9;&#x9879;&#x76ee;</strong>&#xff1a;&#x4ece;&#x81ea;&#x5df1;&#x4f7f;&#x7528;&#x6216;&#x611f;&#x5174;&#x8da3;&#x7684;&#x9879;&#x76ee;&#x5165;&#x624b;&#xff0c;&#x4ece;&#x5c0f;&#x5904;&#x7740;&#x624b;&#xff08;&#x5982;&#x6587;&#x6863;&#x4fee;&#x6b63;&#x3001;bug &#x4fee;&#x590d;&#xff09;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2300,2301" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x9605;&#x8bfb;&#x8d21;&#x732e;&#x6307;&#x5357;</strong>&#xff1a;&#x4e86;&#x89e3;&#x9879;&#x76ee;&#x7684;&#x8d21;&#x732e;&#x6d41;&#x7a0b;&#x3001;&#x4ee3;&#x7801;&#x89c4;&#x8303;&#x548c;&#x6d4b;&#x8bd5;&#x8981;&#x6c42;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2301,2302" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x63d0;&#x4ea4; Issue</strong>&#xff1a;&#x53d1;&#x73b0; bug &#x6216;&#x6709;&#x65b0;&#x529f;&#x80fd;&#x5efa;&#x8bae;&#x65f6;&#xff0c;&#x5148;&#x63d0;&#x4ea4; Issue&#xff0c;&#x4e0e;&#x7ef4;&#x62a4;&#x8005;&#x6c9f;&#x901a;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2302,2303" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x63d0;&#x4ea4; Pull Request (PR)</strong>&#xff1a;",
+                              children: [
+                                {
+                                  content:
+                                    "Fork &#x9879;&#x76ee;&#xff0c;&#x521b;&#x5efa;&#x65b0;&#x5206;&#x652f;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2304,2305" },
+                                },
+                                {
+                                  content:
+                                    "&#x8fdb;&#x884c;&#x4fee;&#x6539;&#xff0c;&#x5e76;&#x7f16;&#x5199;&#x6e05;&#x6670;&#x7684;&#x63d0;&#x4ea4;&#x4fe1;&#x606f;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2305,2306" },
+                                },
+                                {
+                                  content:
+                                    "&#x7f16;&#x5199;&#x6216;&#x66f4;&#x65b0;&#x6d4b;&#x8bd5;&#x7528;&#x4f8b;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2306,2307" },
+                                },
+                                {
+                                  content:
+                                    "&#x63d0;&#x4ea4; PR&#xff0c;&#x5e76;&#x8be6;&#x7ec6;&#x63cf;&#x8ff0;&#x53d8;&#x66f4;&#x5185;&#x5bb9;&#x3001;&#x89e3;&#x51b3;&#x4e86;&#x4ec0;&#x4e48;&#x95ee;&#x9898;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2307,2308" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "2303,2308" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x79ef;&#x6781;&#x6c9f;&#x901a;</strong>&#xff1a;&#x5bf9; PR &#x7684;&#x53cd;&#x9988;&#x4fdd;&#x6301;&#x5f00;&#x653e;&#x5fc3;&#x6001;&#xff0c;&#x53ca;&#x65f6;&#x54cd;&#x5e94;&#x7ef4;&#x62a4;&#x8005;&#x7684;&#x8bc4;&#x8bba;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2308,2309" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x6301;&#x7eed;&#x5b66;&#x4e60;</strong>&#xff1a;&#x901a;&#x8fc7;&#x9605;&#x8bfb;&#x9ad8;&#x8d28;&#x91cf;&#x7684;&#x5f00;&#x6e90;&#x4ee3;&#x7801;&#xff0c;&#x5b66;&#x4e60;&#x6700;&#x4f73;&#x5b9e;&#x8df5;&#x548c;&#x8bbe;&#x8ba1;&#x6a21;&#x5f0f;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2309,2311" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2299,2311" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2295,2296" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2260,2261" },
+                },
+                {
+                  content:
+                    "<strong>C. &#x804c;&#x4e1a;&#x53d1;&#x5c55;&#x8def;&#x5f84;</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x6280;&#x672f;&#x4e13;&#x5bb6; vs. &#x6280;&#x672f;&#x7ba1;&#x7406;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x6280;&#x672f;&#x4e13;&#x5bb6; (Individual Contributor, IC)</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x804c;&#x8d23;</strong>&#xff1a;&#x4e13;&#x6ce8;&#x4e8e;&#x6280;&#x672f;&#x6df1;&#x5ea6;&#xff0c;&#x89e3;&#x51b3;&#x590d;&#x6742;&#x7684;&#x6280;&#x672f;&#x96be;&#x9898;&#xff0c;&#x63a8;&#x52a8;&#x6280;&#x672f;&#x521b;&#x65b0;&#x548c;&#x6700;&#x4f73;&#x5b9e;&#x8df5;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2320,2321" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x53d1;&#x5c55;&#x65b9;&#x5411;</strong>&#xff1a;&#x9ad8;&#x7ea7;&#x524d;&#x7aef;&#x5de5;&#x7a0b;&#x5e08; -&gt; &#x8d44;&#x6df1;&#x524d;&#x7aef;&#x5de5;&#x7a0b;&#x5e08; -&gt; &#x9996;&#x5e2d;&#x524d;&#x7aef;&#x5de5;&#x7a0b;&#x5e08;/&#x524d;&#x7aef;&#x67b6;&#x6784;&#x5e08;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2321,2322" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x6838;&#x5fc3;&#x80fd;&#x529b;</strong>&#xff1a;&#x6df1;&#x5165;&#x638c;&#x63e1;&#x524d;&#x7aef;&#x6280;&#x672f;&#x6808;&#x3001;&#x7cfb;&#x7edf;&#x8bbe;&#x8ba1;&#x80fd;&#x529b;&#x3001;&#x6027;&#x80fd;&#x4f18;&#x5316;&#x3001;&#x4ee3;&#x7801;&#x8d28;&#x91cf;&#x3001;&#x89e3;&#x51b3;&#x590d;&#x6742;&#x95ee;&#x9898;&#x3001;&#x6280;&#x672f;&#x9884;&#x7814;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2322,2323" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2319,2323" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x6280;&#x672f;&#x7ba1;&#x7406; (Manager)</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x804c;&#x8d23;</strong>&#xff1a;&#x7ba1;&#x7406;&#x56e2;&#x961f;&#x3001;&#x534f;&#x8c03;&#x8d44;&#x6e90;&#x3001;&#x5236;&#x5b9a;&#x9879;&#x76ee;&#x8ba1;&#x5212;&#x3001;&#x57f9;&#x517b;&#x56e2;&#x961f;&#x6210;&#x5458;&#x3001;&#x5173;&#x6ce8;&#x56e2;&#x961f;&#x6548;&#x7387;&#x548c;&#x58eb;&#x6c14;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2324,2325" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x53d1;&#x5c55;&#x65b9;&#x5411;</strong>&#xff1a;&#x6280;&#x672f;&#x7ec4;&#x957f; -&gt; &#x6280;&#x672f;&#x7ecf;&#x7406; -&gt; &#x6280;&#x672f;&#x603b;&#x76d1;/&#x5de5;&#x7a0b;&#x526f;&#x603b;&#x88c1;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2325,2326" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x6838;&#x5fc3;&#x80fd;&#x529b;</strong>&#xff1a;&#x56e2;&#x961f;&#x9886;&#x5bfc;&#x529b;&#x3001;&#x9879;&#x76ee;&#x7ba1;&#x7406;&#x3001;&#x6c9f;&#x901a;&#x534f;&#x8c03;&#x3001;&#x4eba;&#x5458;&#x57f9;&#x517b;&#x3001;&#x6218;&#x7565;&#x89c4;&#x5212;&#x3001;&#x8de8;&#x90e8;&#x95e8;&#x534f;&#x4f5c;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2326,2327" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2323,2327" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x9009;&#x62e9;&#x8003;&#x91cf;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x5174;&#x8da3;</strong>&#xff1a;&#x662f;&#x66f4;&#x559c;&#x6b22;&#x6df1;&#x5165;&#x6280;&#x672f;&#x7ec6;&#x8282;&#x8fd8;&#x662f;&#x66f4;&#x559c;&#x6b22;&#x4e0e;&#x4eba;&#x6253;&#x4ea4;&#x9053;&#x3001;&#x89e3;&#x51b3;&#x7ec4;&#x7ec7;&#x95ee;&#x9898;&#xff1f;",
+                              children: [],
+                              payload: { tag: "li", lines: "2328,2329" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x80fd;&#x529b;</strong>&#xff1a;&#x662f;&#x5426;&#x5177;&#x5907;&#x7ba1;&#x7406;&#x548c;&#x9886;&#x5bfc;&#x56e2;&#x961f;&#x7684;&#x6f5c;&#x8d28;&#xff1f;",
+                              children: [],
+                              payload: { tag: "li", lines: "2329,2330" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x804c;&#x4e1a;&#x89c4;&#x5212;</strong>&#xff1a;&#x957f;&#x671f;&#x76ee;&#x6807;&#x662f;&#x4ec0;&#x4e48;&#xff1f;",
+                              children: [],
+                              payload: { tag: "li", lines: "2330,2332" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2327,2332" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2317,2318" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x6280;&#x672f;&#x9886;&#x5bfc;&#x529b;&#x7684;&#x57f9;&#x517b;</strong>",
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x6280;&#x672f;&#x89c6;&#x91ce;&#x4e0e;&#x524d;&#x77bb;&#x6027;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "&#x6301;&#x7eed;&#x5173;&#x6ce8;&#x884c;&#x4e1a;&#x6700;&#x65b0;&#x6280;&#x672f;&#x8d8b;&#x52bf;&#x3001;&#x65b0;&#x5174;&#x6846;&#x67b6;&#x548c;&#x5de5;&#x5177;&#xff0c;&#x7406;&#x89e3;&#x5176;&#x4f18;&#x52a3;&#x548c;&#x9002;&#x7528;&#x573a;&#x666f;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2337,2338" },
+                            },
+                            {
+                              content:
+                                "&#x80fd;&#x591f;&#x9884;&#x89c1;&#x6280;&#x672f;&#x53d1;&#x5c55;&#x5bf9;&#x4e1a;&#x52a1;&#x7684;&#x5f71;&#x54cd;&#xff0c;&#x5e76;&#x63d0;&#x524d;&#x8fdb;&#x884c;&#x6280;&#x672f;&#x50a8;&#x5907;&#x548c;&#x89c4;&#x5212;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2338,2339" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2336,2339" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x89e3;&#x51b3;&#x590d;&#x6742;&#x95ee;&#x9898;&#x7684;&#x80fd;&#x529b;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "&#x4e0d;&#x4ec5;&#x4ec5;&#x662f;&#x89e3;&#x51b3;&#x5df2;&#x77e5;&#x95ee;&#x9898;&#xff0c;&#x66f4;&#x662f;&#x80fd;&#x591f;&#x8bc6;&#x522b;&#x3001;&#x5b9a;&#x4e49;&#x548c;&#x89e3;&#x51b3;&#x672a;&#x66fe;&#x9047;&#x5230;&#x7684;&#x590d;&#x6742;&#x6280;&#x672f;&#x6311;&#x6218;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2340,2341" },
+                            },
+                            {
+                              content:
+                                "&#x5177;&#x5907;&#x7cfb;&#x7edf;&#x6027;&#x601d;&#x7ef4;&#xff0c;&#x80fd;&#x591f;&#x4ece;&#x5b8f;&#x89c2;&#x5c42;&#x9762;&#x5206;&#x6790;&#x95ee;&#x9898;&#xff0c;&#x5e76;&#x8bbe;&#x8ba1;&#x51fa;&#x53ef;&#x6269;&#x5c55;&#x3001;&#x53ef;&#x7ef4;&#x62a4;&#x7684;&#x89e3;&#x51b3;&#x65b9;&#x6848;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2341,2342" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2339,2342" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5f71;&#x54cd;&#x529b;&#x4e0e;&#x6c9f;&#x901a;&#x80fd;&#x529b;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "&#x80fd;&#x591f;&#x6e05;&#x6670;&#x5730;&#x8868;&#x8fbe;&#x6280;&#x672f;&#x7406;&#x5ff5;&#x548c;&#x8bbe;&#x8ba1;&#x65b9;&#x6848;&#xff0c;&#x8bf4;&#x670d;&#x56e2;&#x961f;&#x548c;&#x5229;&#x76ca;&#x76f8;&#x5173;&#x8005;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2343,2344" },
+                            },
+                            {
+                              content:
+                                "&#x901a;&#x8fc7;&#x5206;&#x4eab;&#x3001;&#x6388;&#x8bfe;&#x3001;&#x64b0;&#x5199;&#x6587;&#x7ae0;&#x7b49;&#x65b9;&#x5f0f;&#xff0c;&#x5728;&#x56e2;&#x961f;&#x5185;&#x5916;&#x5efa;&#x7acb;&#x6280;&#x672f;&#x5f71;&#x54cd;&#x529b;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2344,2345" },
+                            },
+                            {
+                              content:
+                                "&#x79ef;&#x6781;&#x53c2;&#x4e0e;&#x6280;&#x672f;&#x793e;&#x533a;&#xff0c;&#x8d21;&#x732e;&#x77e5;&#x8bc6;&#x548c;&#x7ecf;&#x9a8c;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2345,2346" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2342,2346" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x56e2;&#x961f;&#x8d4b;&#x80fd;&#x4e0e;&#x6307;&#x5bfc;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "&#x4e50;&#x4e8e;&#x5206;&#x4eab;&#x77e5;&#x8bc6;&#xff0c;&#x6307;&#x5bfc;&#x521d;&#x7ea7;&#x5de5;&#x7a0b;&#x5e08;&#x6210;&#x957f;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2347,2348" },
+                            },
+                            {
+                              content:
+                                "&#x901a;&#x8fc7;&#x4ee3;&#x7801;&#x5ba1;&#x67e5;&#x3001;&#x6280;&#x672f;&#x5206;&#x4eab;&#x3001;&#x7ed3;&#x5bf9;&#x7f16;&#x7a0b;&#x7b49;&#x65b9;&#x5f0f;&#xff0c;&#x63d0;&#x5347;&#x56e2;&#x961f;&#x6574;&#x4f53;&#x6280;&#x672f;&#x6c34;&#x5e73;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2348,2349" },
+                            },
+                            {
+                              content:
+                                "&#x9f13;&#x52b1;&#x56e2;&#x961f;&#x6210;&#x5458;&#x521b;&#x65b0;&#x548c;&#x5c1d;&#x8bd5;&#x65b0;&#x4e8b;&#x7269;&#xff0c;&#x8425;&#x9020;&#x79ef;&#x6781;&#x7684;&#x6280;&#x672f;&#x6c1b;&#x56f4;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2349,2350" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2346,2350" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x4e1a;&#x52a1;&#x7406;&#x89e3;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                "&#x6df1;&#x5165;&#x7406;&#x89e3;&#x4e1a;&#x52a1;&#x9700;&#x6c42;&#x548c;&#x76ee;&#x6807;&#xff0c;&#x5c06;&#x6280;&#x672f;&#x4e0e;&#x4e1a;&#x52a1;&#x7d27;&#x5bc6;&#x7ed3;&#x5408;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2351,2352" },
+                            },
+                            {
+                              content:
+                                "&#x80fd;&#x591f;&#x4ece;&#x4e1a;&#x52a1;&#x89d2;&#x5ea6;&#x8bc4;&#x4f30;&#x6280;&#x672f;&#x65b9;&#x6848;&#x7684;&#x4ef7;&#x503c;&#x548c;&#x98ce;&#x9669;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2352,2354" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2350,2354" },
+                        },
+                      ],
+                      payload: { tag: "h4", lines: "2332,2333" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2313,2314" },
+                },
+              ],
+              payload: { tag: "h2", lines: "2203,2204" },
+            },
+            {
+              content:
+                "<strong>VIII. &#x7ed3;&#x8bba;&#xff1a;&#x524d;&#x7aef;&#x7cbe;&#x901a;&#x4e4b;&#x8def;</strong>",
+              children: [],
+              payload: { tag: "h2", lines: "2356,2357" },
+            },
+            {
+              content:
+                "&#x9644;&#x5f55; A&#xff1a;&#x524d;&#x7aef;&#x5b66;&#x4e60;&#x8d44;&#x6599;&#x6c47;&#x603b;",
+              children: [
+                {
+                  content:
+                    "<strong>0. &#x5b66;&#x4e60;&#x8def;&#x7ebf;&#x56fe; (The Map)</strong>",
+                  children: [
+                    {
+                      content:
+                        '<strong><a href="https://roadmap.sh/">roadmap.sh</a></strong>',
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5730;&#x4f4d;</strong>&#xff1a;&#x524d;&#x7aef;&#x5f00;&#x53d1;&#x8005;&#x804c;&#x4e1a;&#x751f;&#x6daf;&#x7684;<strong>&#x5730;&#x56fe;</strong>&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2373,2374" },
+                        },
+                        {
+                          content:
+                            "<strong>&#x5982;&#x4f55;&#x4f7f;&#x7528;</strong>&#xff1a;",
+                          children: [
+                            {
+                              content:
+                                '<strong>&#x67e5;&#x6f0f;&#x8865;&#x7f3a;</strong>&#xff1a;&#x6253;&#x5f00; <a href="https://roadmap.sh/frontend">Frontend Roadmap</a>&#xff0c;&#x5bf9;&#x7167;&#x672c;&#x6587;&#xff0c;&#x52fe;&#x9009;&#x4f60;&#x5df2;&#x7ecf;&#x638c;&#x63e1;&#x7684;&#x6280;&#x80fd;&#x70b9;&#x3002;',
+                              children: [],
+                              payload: { tag: "li", lines: "2375,2376" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x6df1;&#x5ea6;&#x8ffd;&#x8e2a;</strong>&#xff1a;&#x5b83;&#x4e0d;&#x4ec5;&#x6709;&#x524d;&#x7aef;&#xff08;Frontend&#xff09;&#xff0c;&#x8fd8;&#x6709;<strong>&#x5168;&#x6808;&#xff08;Full Stack&#xff09;</strong>&#x3001;<strong>React</strong>&#x3001;<strong>Vue</strong> &#x751a;&#x81f3; <strong>AI Engineer</strong> &#x7684;&#x4e13;&#x5c5e;&#x8def;&#x7ebf;&#x56fe;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2376,2377" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x56e2;&#x961f;&#x6807;&#x51c6;</strong>&#xff1a;&#x8bb8;&#x591a;&#x5927;&#x5382;&#x548c;&#x5f00;&#x6e90;&#x56e2;&#x961f;&#x76f4;&#x63a5;&#x4f7f;&#x7528;&#x5b83;&#x6765;&#x5236;&#x5b9a;&#x5185;&#x90e8;&#x664b;&#x5347;&#x548c;&#x62db;&#x8058;&#x6807;&#x51c6;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2377,2379" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2374,2379" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2372,2379" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2368,2369" },
+                },
+                {
+                  content:
+                    "<strong>1. &#x6743;&#x5a01;&#x767e;&#x79d1;&#x4e0e;&#x6807;&#x51c6; (The Holy Grail)</strong>",
+                  children: [
+                    {
+                      content:
+                        '<strong><a href="https://developer.mozilla.org/zh-CN/">MDN Web Docs</a></strong>',
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5730;&#x4f4d;</strong>&#xff1a;Web &#x5f00;&#x53d1;&#x8005;&#x7684;&#x5723;&#x7ecf;&#x3002;HTML/CSS/JS &#x7684;&#x6807;&#x51c6;&#x6587;&#x6863;&#xff0c;&#x65e0;&#x53ef;&#x66ff;&#x4ee3;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2384,2385" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2383,2385" },
+                    },
+                    {
+                      content:
+                        '<strong><a href="https://web.dev/">web.dev</a></strong>',
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x5730;&#x4f4d;</strong>&#xff1a;Google &#x51fa;&#x54c1;&#x7684;&#x6700;&#x4f73;&#x5b9e;&#x8df5;&#x6307;&#x5357;&#x3002;&#x6db5;&#x76d6;&#x6027;&#x80fd; (Core Web Vitals)&#x3001;PWA&#x3001;&#x65e0;&#x969c;&#x788d;&#x7b49;&#x6df1;&#x5ea6;&#x5185;&#x5bb9;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2386,2387" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2385,2387" },
+                    },
+                    {
+                      content:
+                        '<strong><a href="https://caniuse.com/">Can I Use</a></strong>',
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x7528;&#x9014;</strong>&#xff1a;&#x67e5;&#x8be2; CSS/JS &#x65b0;&#x7279;&#x6027;&#x7684;&#x6d4f;&#x89c8;&#x5668;&#x517c;&#x5bb9;&#x6027;&#xff08;&#x5982; <code>:has()</code>, Container Queries&#xff09;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2388,2389" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2387,2389" },
+                    },
+                    {
+                      content:
+                        '<strong><a href="https://www.patterns.dev/">Patterns.dev</a></strong>',
+                      children: [
+                        {
+                          content:
+                            "<strong>&#x7528;&#x9014;</strong>&#xff1a;&#x514d;&#x8d39;&#x4e14;&#x6df1;&#x5ea6;&#x7684;&#x7535;&#x5b50;&#x4e66;&#xff0c;&#x8bb2;&#x89e3;&#x73b0;&#x4ee3; Web &#x5e94;&#x7528;&#x7684;&#x6e32;&#x67d3;&#x6a21;&#x5f0f;&#xff08;SSR/RSC/Islands&#xff09;&#x548c;&#x6027;&#x80fd;&#x4f18;&#x5316;&#x6a21;&#x5f0f;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2390,2392" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2389,2392" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2379,2380" },
+                },
+                {
+                  content:
+                    "<strong>2. &#x6838;&#x5fc3;&#x6280;&#x672f;&#x6808;&#x6df1;&#x5ea6;&#x5b66;&#x4e60; (Deep Dives)</strong>",
+                  children: [
+                    {
+                      content:
+                        '\n<p data-lines="2396,2397"><strong>JavaScript</strong></p>',
+                      children: [
+                        {
+                          content:
+                            '\n<p data-lines="2397,2398"><strong><a href="https://javascript.info/">JavaScript.info</a></strong></p>',
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x5730;&#x4f4d;</strong>&#xff1a;&#x88ab;&#x516c;&#x8ba4;&#x4e3a;&#x73b0;&#x4ee3;&#x6700;&#x597d;&#x7684; JavaScript &#x5728;&#x7ebf;&#x6559;&#x7a0b;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2398,2399" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x7279;&#x70b9;</strong>&#xff1a;&#x5185;&#x5bb9;&#x6781;&#x65b0;&#xff0c;&#x4e0d;&#x4ec5;&#x8bb2;&#x8bed;&#x6cd5;&#xff0c;&#x8fd8;&#x6df1;&#x5165;&#x8bb2;&#x89e3; DOM&#x3001;&#x4e8b;&#x4ef6;&#x5faa;&#x73af;&#x548c;&#x7f51;&#x7edc;&#x8bf7;&#x6c42;&#x3002;&#x5b83;&#x662f;&#x4ece;&#x201c;&#x4f1a;&#x5199;&#x4ee3;&#x7801;&#x201d;&#x5230;&#x201c;&#x7406;&#x89e3;&#x539f;&#x7406;&#x201d;&#x7684;&#x6700;&#x4f73;&#x6865;&#x6881;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2399,2400" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2397,2400" },
+                        },
+                        {
+                          content:
+                            '\n<p data-lines="2400,2401"><strong><a href="https://github.com/getify/You-Dont-Know-JS">You Don&apos;t Know JS Yet (GitHub)</a></strong></p>',
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x5730;&#x4f4d;</strong>&#xff1a;Kyle Simpson &#x7684;&#x795e;&#x4f5c;&#x3002;",
+                              children: [
+                                {
+                                  content:
+                                    "<strong>&#x7528;&#x9014;</strong>&#xff1a;&#x5982;&#x679c;&#x4f60;&#x60f3;&#x5f7b;&#x5e95;&#x641e;&#x61c2; <strong>&#x4f5c;&#x7528;&#x57df; (Scope)</strong>&#x3001;<strong>&#x95ed;&#x5305; (Closures)</strong>&#x3001;<strong>&#x539f;&#x578b;&#x94fe; (Prototypes)</strong> &#x548c; <strong>&#x5f02;&#x6b65; (Async)</strong>&#xff0c;&#x8fd9;&#x662f;&#x5fc5;&#x8bfb;&#x7684;&#x3002;&#x8fd9;&#x662f;&#x533a;&#x5206;&#x521d;&#x7ea7;&#x548c;&#x9ad8;&#x7ea7;&#x5de5;&#x7a0b;&#x5e08;&#x7684;&#x5206;&#x6c34;&#x5cad;&#x3002;",
+                                  children: [],
+                                  payload: { tag: "li", lines: "2402,2404" },
+                                },
+                              ],
+                              payload: { tag: "li", lines: "2401,2404" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2400,2404" },
+                        },
+                        {
+                          content:
+                            '\n<p data-lines="2404,2405"><strong><a href="https://justjavascript.com/">Just JavaScript</a></strong></p>',
+                          children: [
+                            {
+                              content:
+                                "<strong>&#x5730;&#x4f4d;</strong>&#xff1a;Dan Abramov (React &#x6838;&#x5fc3;&#x6210;&#x5458;) &#x51fa;&#x54c1;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2405,2406" },
+                            },
+                            {
+                              content:
+                                "<strong>&#x7528;&#x9014;</strong>&#xff1a;&#x91cd;&#x5efa;&#x4f60;&#x5bf9;&#x201c;&#x503c;&#x4e0e;&#x5f15;&#x7528;&#x201d;&#x7684;&#x5fc3;&#x667a;&#x6a21;&#x578b;&#x3002;&#x975e;&#x5e38;&#x9002;&#x5408;&#x90a3;&#x4e9b;&#x201c;&#x611f;&#x89c9;&#x61c2;&#x4e86;&#x4f46;&#x7ecf;&#x5e38;&#x5199;&#x51fa; Bug&#x201d;&#x7684;&#x5f00;&#x53d1;&#x8005;&#x3002;",
+                              children: [],
+                              payload: { tag: "li", lines: "2406,2408" },
+                            },
+                          ],
+                          payload: { tag: "li", lines: "2404,2408" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2396,2408" },
+                    },
+                    {
+                      content:
+                        '\n<p data-lines="2408,2409"><strong>TypeScript</strong></p>',
+                      children: [
+                        {
+                          content:
+                            '<strong><a href="https://www.totaltypescript.com/">Total TypeScript</a></strong>: Matt Pocock &#x51fa;&#x54c1;&#x7684;&#x6559;&#x7a0b;&#xff0c;&#x88ab;&#x516c;&#x8ba4;&#x4e3a;&#x76ee;&#x524d;&#x6700;&#x597d;&#x7684; TS &#x8fdb;&#x9636;&#x8d44;&#x6e90;&#xff08;&#x4ece;&#x6cdb;&#x578b;&#x5230;&#x7c7b;&#x578b;&#x4f53;&#x64cd;&#xff09;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2409,2410" },
+                        },
+                        {
+                          content:
+                            '<strong><a href="https://www.typescriptlang.org/docs/">TypeScript Handbook</a></strong>: &#x5b98;&#x65b9;&#x624b;&#x518c;&#xff0c;&#x5fc5;&#x8bfb;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2410,2411" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2408,2411" },
+                    },
+                    {
+                      content:
+                        '\n<p data-lines="2411,2412"><strong>React &#x751f;&#x6001;</strong></p>',
+                      children: [
+                        {
+                          content:
+                            '<strong><a href="https://react.dev/">React.dev</a></strong>: &#x91cd;&#x5199;&#x540e;&#x7684;&#x5b98;&#x65b9;&#x6587;&#x6863;&#xff0c;&#x4ea4;&#x4e92;&#x5f0f;&#x6559;&#x5b66;&#x975e;&#x5e38;&#x597d;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2412,2413" },
+                        },
+                        {
+                          content:
+                            '<strong><a href="https://www.joshwcomeau.com/">Josh W Comeau&apos;s Blog</a></strong>: &#x8bb2;&#x89e3; React &#x539f;&#x7406;&#x548c; CSS &#x4ea4;&#x4e92;&#x6700;&#x900f;&#x5f7b;&#x7684;&#x535a;&#x5ba2;&#x4e4b;&#x4e00;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2413,2414" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2411,2414" },
+                    },
+                    {
+                      content:
+                        '\n<p data-lines="2414,2415"><strong>Vue &#x751f;&#x6001;</strong></p>',
+                      children: [
+                        {
+                          content:
+                            '<strong><a href="https://vuejs.org/">Vue.js &#x5b98;&#x65b9;&#x6587;&#x6863;</a></strong>: &#x4ee5;&#x6e05;&#x6670;&#x8457;&#x79f0;&#xff0c;&#x5305;&#x542b; Options API &#x548c; Composition API &#x7684;&#x5bf9;&#x6bd4;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2415,2416" },
+                        },
+                        {
+                          content:
+                            '<strong><a href="https://antfu.me/">Anthony Fu (antfu)</a></strong>: Vue/Vite &#x6838;&#x5fc3;&#x56e2;&#x961f;&#x6210;&#x5458;&#x7684;&#x535a;&#x5ba2;&#xff0c;&#x4e86;&#x89e3;&#x5f00;&#x6e90;&#x5de5;&#x5177;&#x94fe;&#x7684;&#x524d;&#x6cbf;&#x601d;&#x60f3;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2416,2418" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2414,2418" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2392,2393" },
+                },
+                {
+                  content:
+                    "<strong>3. &#x6837;&#x5f0f;&#x4e0e; UI &#x8bbe;&#x8ba1; (CSS &amp; Design)</strong>",
+                  children: [
+                    {
+                      content: "<strong>CSS &#x8fdb;&#x9636;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<strong><a href="https://moderncss.dev/">Modern CSS</a></strong>: &#x4e13;&#x6ce8;&#x4e8e;&#x73b0;&#x4ee3; CSS &#x89e3;&#x51b3;&#x65b9;&#x6848;&#x7684;&#x6559;&#x7a0b;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2423,2424" },
+                        },
+                        {
+                          content:
+                            '<strong><a href="https://smolcss.dev/">SmolCSS</a></strong>: &#x6781;&#x7b80;&#x7684;&#x73b0;&#x4ee3; CSS &#x5e03;&#x5c40;&#x7247;&#x6bb5;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2424,2425" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2422,2425" },
+                    },
+                    {
+                      content: "<strong>&#x56fe;&#x6807;&#x5e93;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<strong><a href="https://lucide.dev/">Lucide</a></strong>: &#x8fd1;&#x51e0;&#x5e74;&#x6700;&#x6d41;&#x884c;&#x7684;&#x56fe;&#x6807;&#x5e93;&#xff0c;&#x98ce;&#x683c;&#x7edf;&#x4e00;&#xff0c;&#x8f7b;&#x91cf;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2426,2427" },
+                        },
+                        {
+                          content:
+                            '<strong><a href="https://react-icons.github.io/react-icons/">React Icons</a></strong>: &#x805a;&#x5408;&#x4e86;&#x6240;&#x6709;&#x4e3b;&#x6d41;&#x56fe;&#x6807;&#x5e93;&#x7684; NPM &#x5305;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2427,2428" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2425,2428" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x65e0;&#x5934;&#x7ec4;&#x4ef6; (Headless UI)</strong>",
+                      children: [
+                        {
+                          content:
+                            '<strong><a href="https://www.radix-ui.com/">Radix UI</a></strong> / <strong><a href="https://headlessui.com/">Headless UI</a></strong>: &#x63d0;&#x4f9b;&#x903b;&#x8f91;&#x548c;&#x65e0;&#x969c;&#x788d;&#x80fd;&#x529b;&#xff0c;&#x4e0d;&#x5e26;&#x6837;&#x5f0f;&#x7684;&#x7ec4;&#x4ef6;&#x5e93;&#x5e95;&#x5ea7;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2429,2430" },
+                        },
+                        {
+                          content:
+                            '<strong><a href="https://ui.shadcn.com/">shadcn/ui</a></strong>: &#x590d;&#x5236;&#x7c98;&#x8d34;&#x5f0f;&#x7684;&#x7ec4;&#x4ef6;&#x5e93;&#xff0c;&#x5f53;&#x4e0b;&#x6700;&#x706b;&#x7684; UI &#x6784;&#x5efa;&#x6a21;&#x5f0f;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2430,2432" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2428,2432" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2418,2419" },
+                },
+                {
+                  content:
+                    "<strong>4. &#x5de5;&#x7a0b;&#x5316;&#x4e0e;&#x5de5;&#x5177;&#x94fe; (Engineering)</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x6784;&#x5efa;&#x4e0e;&#x7f16;&#x8bd1;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<strong><a href="https://astexplorer.net/">AST Explorer</a></strong>: &#x5728;&#x7ebf;&#x67e5;&#x770b;&#x4ee3;&#x7801;&#x7684;&#x62bd;&#x8c61;&#x8bed;&#x6cd5;&#x6811; (AST)&#xff0c;&#x5b66;&#x4e60;&#x5199; Babel/ESLint/Vite &#x63d2;&#x4ef6;&#x7684;&#x795e;&#x5668;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2437,2438" },
+                        },
+                        {
+                          content:
+                            '<strong><a href="https://bundlephobia.com/">Bundlephobia</a></strong>: &#x68c0;&#x67e5; npm &#x5305;&#x7684;&#x4f53;&#x79ef;&#x5927;&#x5c0f;&#x548c;&#x4e0b;&#x8f7d;&#x65f6;&#x95f4;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2438,2439" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2436,2439" },
+                    },
+                    {
+                      content:
+                        "<strong>&#x8c03;&#x8bd5;&#x4e0e;&#x6b63;&#x5219;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<strong><a href="https://regex101.com/">Regex101</a></strong>: &#x53ef;&#x89c6;&#x5316;&#x8c03;&#x8bd5;&#x6b63;&#x5219;&#x8868;&#x8fbe;&#x5f0f;&#xff0c;&#x5e26;&#x89e3;&#x91ca;&#x529f;&#x80fd;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2440,2441" },
+                        },
+                        {
+                          content:
+                            '<strong><a href="https://jsoncrack.com/">JSON Crack</a></strong>: &#x5c06;&#x590d;&#x6742;&#x7684; JSON &#x6570;&#x636e;&#x53ef;&#x89c6;&#x5316;&#x4e3a;&#x601d;&#x7ef4;&#x5bfc;&#x56fe;&#xff0c;&#x8c03;&#x8bd5;&#x63a5;&#x53e3;&#x6570;&#x636e;&#x5fc5;&#x5907;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2441,2443" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2439,2443" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2432,2433" },
+                },
+                {
+                  content:
+                    "<strong>5. AI &#x9a71;&#x52a8;&#x5f00;&#x53d1; (AI-Native)</strong>",
+                  children: [
+                    {
+                      content:
+                        "<strong>&#x8f85;&#x52a9;&#x7f16;&#x7a0b;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<strong><a href="https://v0.dev/">v0.dev</a></strong>: Vercel &#x51fa;&#x54c1;&#xff0c;&#x7528;&#x81ea;&#x7136;&#x8bed;&#x8a00;&#x751f;&#x6210; React/Tailwind &#x754c;&#x9762;&#x4ee3;&#x7801;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2448,2449" },
+                        },
+                        {
+                          content:
+                            '<strong><a href="https://cursor.sh/">Cursor</a></strong>: AI &#x539f;&#x751f;&#x4ee3;&#x7801;&#x7f16;&#x8f91;&#x5668;&#xff0c;&#x5b66;&#x4e60;&#x5982;&#x4f55;&#x5229;&#x7528; AI &#x8fdb;&#x884c;&#x5168;&#x5e93;&#x641c;&#x7d22;&#x548c;&#x91cd;&#x6784;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2449,2450" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2447,2450" },
+                    },
+                    {
+                      content: "<strong>AI &#x96c6;&#x6210;</strong>",
+                      children: [
+                        {
+                          content:
+                            '<strong><a href="https://js.langchain.com/">LangChain JS</a></strong>: &#x5728;&#x524d;&#x7aef;/Node.js &#x5e94;&#x7528;&#x4e2d;&#x96c6;&#x6210; LLM &#x7684;&#x6807;&#x51c6;&#x5e93;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2451,2452" },
+                        },
+                        {
+                          content:
+                            '<strong><a href="https://sdk.vercel.ai/">Vercel SDK</a></strong>: &#x5feb;&#x901f;&#x6784;&#x5efa;&#x6d41;&#x5f0f; (Streaming) AI &#x804a;&#x5929;&#x754c;&#x9762;&#x7684;&#x5de5;&#x5177;&#x5e93;&#x3002;',
+                          children: [],
+                          payload: { tag: "li", lines: "2452,2454" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2450,2454" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2443,2444" },
+                },
+                {
+                  content:
+                    "<strong>6. &#x5b9e;&#x6218;&#x4e0e;&#x7ec3;&#x4e60;&#x5e73;&#x53f0; (Practice)</strong>",
+                  children: [
+                    {
+                      content:
+                        '<strong><a href="https://www.frontendmentor.io/">Frontend Mentor</a></strong>',
+                      children: [
+                        {
+                          content:
+                            "&#x63d0;&#x4f9b;&#x8bbe;&#x8ba1;&#x56fe;&#xff08;Figma&#xff09;&#x548c;&#x8d44;&#x6e90;&#xff0c;&#x8ba9;&#x4f60;&#x4ece;&#x96f6;&#x5b9e;&#x73b0;&#x9875;&#x9762;&#xff0c;&#x975e;&#x5e38;&#x63a5;&#x8fd1;&#x771f;&#x5b9e;&#x5de5;&#x4f5c;&#x6d41;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2459,2460" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2458,2460" },
+                    },
+                    {
+                      content:
+                        '<strong><a href="https://www.greatfrontend.com/">GreatFrontEnd</a></strong>',
+                      children: [
+                        {
+                          content:
+                            "&#x4e13;&#x95e8;&#x9488;&#x5bf9;&#x524d;&#x7aef;&#x5927;&#x5382;&#x9762;&#x8bd5;&#x7684;&#x51c6;&#x5907;&#x5e73;&#x53f0;&#xff08;&#x7cfb;&#x7edf;&#x8bbe;&#x8ba1;&#x3001;&#x7b97;&#x6cd5;&#x3001;UI &#x6311;&#x6218;&#xff09;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2461,2462" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2460,2462" },
+                    },
+                    {
+                      content:
+                        '<strong><a href="https://codesandbox.io/">CodeSandbox</a></strong> / <strong><a href="https://stackblitz.com/">StackBlitz</a></strong>',
+                      children: [
+                        {
+                          content:
+                            "&#x4e91;&#x7aef; IDE&#xff0c;&#x5feb;&#x901f;&#x9a8c;&#x8bc1;&#x60f3;&#x6cd5;&#xff0c;&#x65e0;&#x9700;&#x672c;&#x5730;&#x914d;&#x73af;&#x5883;&#x3002;",
+                          children: [],
+                          payload: { tag: "li", lines: "2463,2465" },
+                        },
+                      ],
+                      payload: { tag: "li", lines: "2462,2465" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2454,2455" },
+                },
+                {
+                  content:
+                    "<strong>7. &#x8d44;&#x8baf;&#x4e0e;&#x793e;&#x533a; (Stay Updated)</strong>",
+                  children: [
+                    {
+                      content:
+                        '<strong><a href="https://bytes.dev/">Bytes</a></strong>: &#x5e7d;&#x9ed8;&#x98ce;&#x8da3;&#x7684; JavaScript &#x6bcf;&#x5468;&#x7b80;&#x62a5;&#x3002;',
+                      children: [],
+                      payload: { tag: "li", lines: "2469,2470" },
+                    },
+                    {
+                      content:
+                        '<strong><a href="https://thisweekinreact.com/">This Week In React</a></strong>: React &#x751f;&#x6001;&#x6700;&#x597d;&#x7684;&#x5468;&#x520a;&#x3002;',
+                      children: [],
+                      payload: { tag: "li", lines: "2470,2471" },
+                    },
+                    {
+                      content:
+                        '<strong><a href="https://bestofjs.org/">Best of JS</a></strong>: &#x5b9e;&#x65f6;&#x67e5;&#x770b; GitHub &#x4e0a;&#x6700;&#x70ed;&#x95e8;&#x7684;&#x524d;&#x7aef;&#x9879;&#x76ee;&#x8d8b;&#x52bf;&#x3002;',
+                      children: [],
+                      payload: { tag: "li", lines: "2471,2472" },
+                    },
+                  ],
+                  payload: { tag: "h3", lines: "2465,2466" },
+                },
+              ],
+              payload: { tag: "h2", lines: "2366,2367" },
+            },
+          ],
+          payload: { tag: "h1", lines: "0,1" },
+        },
+        {},
+      );
+    </script>
+  </body>
 </html>
diff --git "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\346\225\260\346\215\256\347\273\223\346\236\204\344\270\216\347\256\227\346\263\225/\347\256\227\346\263\225/2_\345\210\206\346\236\220\347\256\227\346\263\225.md" "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\346\225\260\346\215\256\347\273\223\346\236\204\344\270\216\347\256\227\346\263\225/\347\256\227\346\263\225/2_\345\210\206\346\236\220\347\256\227\346\263\225.md"
index 2354f523..c41bc4ce 100644
--- "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\346\225\260\346\215\256\347\273\223\346\236\204\344\270\216\347\256\227\346\263\225/\347\256\227\346\263\225/2_\345\210\206\346\236\220\347\256\227\346\263\225.md"
+++ "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\346\225\260\346\215\256\347\273\223\346\236\204\344\270\216\347\256\227\346\263\225/\347\256\227\346\263\225/2_\345\210\206\346\236\220\347\256\227\346\263\225.md"
@@ -7,13 +7,14 @@
 为了证明算法的正确性，我们需要验证关于循环不变式的三个性质：
 
 1. **初始化 (Initialization)**：
-    在循环的第一次迭代开始之前，循环不变式为真。这通常可以被视为数学归纳法的基本情况（Base case）。
+   在循环的第一次迭代开始之前，循环不变式为真。这通常可以被视为数学归纳法的基本情况（Base case）。
 2. **保持 (Maintenance)**：
-    如果在某次迭代开始之前循环不变式为真，那么在下一次迭代开始之前，它依然为真。这对应于数学归纳法的归纳步骤。
+   如果在某次迭代开始之前循环不变式为真，那么在下一次迭代开始之前，它依然为真。这对应于数学归纳法的归纳步骤。
 3. **终止 (Termination)**：
-    当循环结束时，不变式提供了一个有用的性质，该性质有助于证明算法是正确的。
+   当循环结束时，不变式提供了一个有用的性质，该性质有助于证明算法是正确的。
 
 **示例**（插入排序）：
+
 > 在 `for j = 2 to A.length` 的循环开始前，子数组 `A[1..j-1]` 包含了原数组中前 `j-1` 个元素，且已按序排列。
 
 ## 伪代码 (Pseudocode)
@@ -22,13 +23,13 @@
 
 **通用约定**：
 
-* **缩进**：表示块结构（Block structure），代替了 `{}` 或 `begin/end`。
-* **控制流**：使用 `if`、`else`、`while`、`for`、`repeat-until` 等常见关键字。
-* **赋值**：通常使用 `←` 或 `=` 表示赋值操作（例如 `x ← y`）。
-* **变量**：通常是局部变量，除非显式声明为全局。
-* **数组访问**：使用 `A[i]` 表示数组 $A$ 的第 $i$ 个元素。
-* **对象属性**：使用 `attribute[x]` 或 `x.attribute`（例如 `length[A]` 或 `A.length`）。
-* **注释**：通常用 `//` 或 `▷` 表示。
+- **缩进**：表示块结构（Block structure），代替了 `{}` 或 `begin/end`。
+- **控制流**：使用 `if`、`else`、`while`、`for`、`repeat-until` 等常见关键字。
+- **赋值**：通常使用 `←` 或 `=` 表示赋值操作（例如 `x ← y`）。
+- **变量**：通常是局部变量，除非显式声明为全局。
+- **数组访问**：使用 `A[i]` 表示数组 $A$ 的第 $i$ 个元素。
+- **对象属性**：使用 `attribute[x]` 或 `x.attribute`（例如 `length[A]` 或 `A.length`）。
+- **注释**：通常用 `//` 或 `▷` 表示。
 
 **示例片段**：
 
@@ -49,20 +50,20 @@ INSERTION-SORT(A)
 执行时间是指算法解决问题所需的时间，通常表示为输入规模 $n$ 的函数。
 
 1. **输入规模 ($n$)**：
-    * 对于排序问题，$n$ 是数组中的元素个数。
-    * 对于图算法，$n$ 可能是顶点数或边数。
-    * 对于整数运算，$n$ 可能是二进制表示的位数。
+   - 对于排序问题，$n$ 是数组中的元素个数。
+   - 对于图算法，$n$ 可能是顶点数或边数。
+   - 对于整数运算，$n$ 可能是二进制表示的位数。
 2. **计算模型 (RAM 模型)**：
-    * 假设指令（加、减、乘、除、数据移动、控制流）按顺序执行。
-    * 每条简单指令执行需常量时间 $c$。
+   - 假设指令（加、减、乘、除、数据移动、控制流）按顺序执行。
+   - 每条简单指令执行需常量时间 $c$。
 3. **分析类型**：
-    * **最坏情况 (Worst-case)**：对任意规模 $n$ 的输入，算法运行时间的最长可能时间。这是最常用的分析指标，因为它提供了时间的上界保证。
-    * **平均情况 (Average-case)**：期望的运行时间，通常基于输入数据的概率分布假设。
-    * **最好情况 (Best-case)**：通常用处不大，但在特定场景下（如快速排序的最好情况分析）有参考价值。
+   - **最坏情况 (Worst-case)**：对任意规模 $n$ 的输入，算法运行时间的最长可能时间。这是最常用的分析指标，因为它提供了时间的上界保证。
+   - **平均情况 (Average-case)**：期望的运行时间，通常基于输入数据的概率分布假设。
+   - **最好情况 (Best-case)**：通常用处不大，但在特定场景下（如快速排序的最好情况分析）有参考价值。
 4. **渐进符号**：
-    * $\Theta(n)$：紧确界（既是上界又是下界）。
-    * $O(n)$：渐进上界（关注最坏情况）。
-    * $\Omega(n)$：渐进下界。
+   - $\Theta(n)$：紧确界（既是上界又是下界）。
+   - $O(n)$：渐进上界（关注最坏情况）。
+   - $\Omega(n)$：渐进下界。
 
 ## 习题
 
@@ -71,11 +72,11 @@ INSERTION-SORT(A)
 **背景设定**：
 假设我们要计算 $A \div B$。
 
-* $A$ 是被除数，由数字序列 $A[n-1 \dots 0]$ 组成（或者 $A[1 \dots n]$，视索引习惯而定，这里假设从高位到低位处理）。
-* $B$ 是除数（整数）。
-* $Q$ 是最终的商。
-* $R$ 是最终的余数。
-* 在算法过程中，$q$ 是当前生成的商，$r$ 是当前的**部分余数**。
+- $A$ 是被除数，由数字序列 $A[n-1 \dots 0]$ 组成（或者 $A[1 \dots n]$，视索引习惯而定，这里假设从高位到低位处理）。
+- $B$ 是除数（整数）。
+- $Q$ 是最终的商。
+- $R$ 是最终的余数。
+- 在算法过程中，$q$ 是当前生成的商，$r$ 是当前的**部分余数**。
 
 **竖式除法过程回顾**：
 我们在每一轮循环中，从被除数 $A$ 的高位拉下一位数字（Drop down），拼接到当前余数 $r$ 的末尾，然后尝试除以 $B$，更新商的当前位和新的余数。
@@ -86,50 +87,50 @@ INSERTION-SORT(A)
 
 > **在处理第 $i$ 位数字之前，当前累积的商 $q$ 和当前余数 $r$ 满足以下关系：**
 >
-> $$ A_{prefix} = q \times B + r $$
+> $$ A\_{prefix} = q \times B + r $$
 >
 > 其中：
 >
-> * $A_{prefix}$ 是被除数 $A$ 已经被处理过的前缀部分（即从最高位到第 $i-1$ 位组成的整数）。
-> * $0 \le r < B$ （余数必须始终小于除数）。
+> - $A_{prefix}$ 是被除数 $A$ 已经被处理过的前缀部分（即从最高位到第 $i-1$ 位组成的整数）。
+> - $0 \le r < B$ （余数必须始终小于除数）。
 
 #### 证明（验证三要素）
 
 为了更清晰地说明，假设被除数 $A$ 的十进制表示为 $d_k d_{k-1} \dots d_0$。我们从高位 $k$ 开始循环到 $0$。
 
 1. **初始化 (Initialization)**：
-    * 在循环开始前，我们还没有处理任何数字。
-    * $A_{prefix}$ 是空的，数值为 0。
-    * 我们初始化 $q = 0$, $r = 0$。
-    * 代入公式：$0 = 0 \times B + 0$，且 $0 \le 0 < B$。
-    * **成立。**
+   - 在循环开始前，我们还没有处理任何数字。
+   - $A_{prefix}$ 是空的，数值为 0。
+   - 我们初始化 $q = 0$, $r = 0$。
+   - 代入公式：$0 = 0 \times B + 0$，且 $0 \le 0 < B$。
+   - **成立。**
 
 2. **保持 (Maintenance)**：
-    * 假设在某次迭代开始前，性质 $A_{old\_prefix} = q_{old} \times B + r_{old}$ 成立。
-    * **循环操作**：
-        1. 落下下一位数字 $d$。新的被除数前缀值变为了 $A_{new\_prefix} = A_{old\_prefix} \times 10 + d$。
-        2. 构造新的被除部分：$temp = r_{old} \times 10 + d$。
-        3. 计算商的当前位：$digit = \lfloor temp / B \rfloor$。
-        4. 更新余数：$r_{new} = temp \mod B$。
-        5. 更新总商：$q_{new} = q_{old} \times 10 + digit$。
-    * **验证**：
-        我们需要证明 $A_{new\_prefix} = q_{new} \times B + r_{new}$。
-        $$
-        \begin{aligned}
-        q_{new} \times B + r_{new} &= (q_{old} \times 10 + digit) \times B + (temp - digit \times B) \\
-        &= 10 \cdot q_{old} \cdot B + digit \cdot B + temp - digit \cdot B \\
-        &= 10 \cdot q_{old} \cdot B + temp \\
-        &= 10 \cdot q_{old} \cdot B + (r_{old} \times 10 + d) \\
-        &= 10 \cdot (q_{old} \cdot B + r_{old}) + d \\
-        \end{aligned}
-        $$
-        根据归纳假设，$q_{old} \cdot B + r_{old} = A_{old\_prefix}$。
-        所以上式 $= 10 \cdot A_{old\_prefix} + d$，这正是 $A_{new\_prefix}$。
-    * **成立。**
+   - 假设在某次迭代开始前，性质 $A_{old\_prefix} = q_{old} \times B + r_{old}$ 成立。
+   - **循环操作**：
+     1. 落下下一位数字 $d$。新的被除数前缀值变为了 $A_{new\_prefix} = A_{old\_prefix} \times 10 + d$。
+     2. 构造新的被除部分：$temp = r_{old} \times 10 + d$。
+     3. 计算商的当前位：$digit = \lfloor temp / B \rfloor$。
+     4. 更新余数：$r_{new} = temp \mod B$。
+     5. 更新总商：$q_{new} = q_{old} \times 10 + digit$。
+   - **验证**：
+     我们需要证明 $A_{new\_prefix} = q_{new} \times B + r_{new}$。
+     $$
+     \begin{aligned}
+     q_{new} \times B + r_{new} &= (q_{old} \times 10 + digit) \times B + (temp - digit \times B) \\
+     &= 10 \cdot q_{old} \cdot B + digit \cdot B + temp - digit \cdot B \\
+     &= 10 \cdot q_{old} \cdot B + temp \\
+     &= 10 \cdot q_{old} \cdot B + (r_{old} \times 10 + d) \\
+     &= 10 \cdot (q_{old} \cdot B + r_{old}) + d \\
+     \end{aligned}
+     $$
+     根据归纳假设，$q_{old} \cdot B + r_{old} = A_{old\_prefix}$。
+     所以上式 $= 10 \cdot A_{old\_prefix} + d$，这正是 $A_{new\_prefix}$。
+   - **成立。**
 
 3. **终止 (Termination)**：
-    * 当循环结束时，所有的位数都已处理完毕，$A_{prefix}$ 等于完整的被除数 $A$。
-    * 此时，$q$ 变成了最终的商 $Q$，$r$ 变成了最终的余数 $R$。
-    * 根据不变式：$A = Q \times B + R$，且 $0 \le R < B$。
-    * 这正是除法算法正确性的定义。
-    * **成立。**
+   - 当循环结束时，所有的位数都已处理完毕，$A_{prefix}$ 等于完整的被除数 $A$。
+   - 此时，$q$ 变成了最终的商 $Q$，$r$ 变成了最终的余数 $R$。
+   - 根据不变式：$A = Q \times B + R$，且 $0 \le R < B$。
+   - 这正是除法算法正确性的定义。
+   - **成立。**
diff --git "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\346\225\260\346\215\256\347\273\223\346\236\204\344\270\216\347\256\227\346\263\225/\347\256\227\346\263\225/5_\346\216\222\345\272\217\347\256\227\346\263\225.md" "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\346\225\260\346\215\256\347\273\223\346\236\204\344\270\216\347\256\227\346\263\225/\347\256\227\346\263\225/5_\346\216\222\345\272\217\347\256\227\346\263\225.md"
index 609170af..28c4c7bc 100644
--- "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\346\225\260\346\215\256\347\273\223\346\236\204\344\270\216\347\256\227\346\263\225/\347\256\227\346\263\225/5_\346\216\222\345\272\217\347\256\227\346\263\225.md"
+++ "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\346\225\260\346\215\256\347\273\223\346\236\204\344\270\216\347\256\227\346\263\225/\347\256\227\346\263\225/5_\346\216\222\345\272\217\347\256\227\346\263\225.md"
@@ -6,24 +6,24 @@
 
 排序（Sorting）是将一组数据元素按照特定顺序（通常是数字顺序或字典顺序）重新排列的过程。
 
-* **输入**：$n$ 个数的序列 $\langle a_1, a_2, \dots, a_n \rangle$。
-* **输出**：原序列的一个重排 $\langle a'_1, a'_2, \dots, a'_n \rangle$，满足 $a'_1 \leq a'_2 \leq \dots \leq a'_n$。
-排序是计算机科学中最基本的操作之一，广泛用于数据库优化、二分查找预处理、数据压缩和图形渲染等领域。
+- **输入**：$n$ 个数的序列 $\langle a_1, a_2, \dots, a_n \rangle$。
+- **输出**：原序列的一个重排 $\langle a'_1, a'_2, \dots, a'_n \rangle$，满足 $a'_1 \leq a'_2 \leq \dots \leq a'_n$。
+  排序是计算机科学中最基本的操作之一，广泛用于数据库优化、二分查找预处理、数据压缩和图形渲染等领域。
 
 ### 1.2 排序算法的分类
 
-* **比较排序 vs 非比较排序**：前者通过元素间的比较决定顺序，后者利用数据本身的特性（如计数值）。
-* **内部排序 vs 外部排序**：前者数据全部加载到内存，后者数据量过大需借助外部存储（磁盘）。
-* **递归排序 vs 非递归排序**。
+- **比较排序 vs 非比较排序**：前者通过元素间的比较决定顺序，后者利用数据本身的特性（如计数值）。
+- **内部排序 vs 外部排序**：前者数据全部加载到内存，后者数据量过大需借助外部存储（磁盘）。
+- **递归排序 vs 非递归排序**。
 
 ### 1.3 评价标准
 
 #### 1.3.1 时间复杂度
 
-* **最好情况**：数据已经有序时。
-* **最坏情况**：数据完全逆序或特定排列时。
-* **平均情况**：随机数据的期望运行时间。
-* 通常关注渐进上界 $O(n^2)$ 或 $O(n \log n)$。
+- **最好情况**：数据已经有序时。
+- **最坏情况**：数据完全逆序或特定排列时。
+- **平均情况**：随机数据的期望运行时间。
+- 通常关注渐进上界 $O(n^2)$ 或 $O(n \log n)$。
 
 #### 1.3.2 空间复杂度
 
@@ -65,9 +65,9 @@ void bubbleSort(int nums[], int size) {
 
 #### 2.1.3 复杂度分析
 
-* 时间：平均 $O(n^2)$，最坏 $O(n^2)$，最好 $O(n)$。
-* 空间：$O(1)$。
-* 稳定性：稳定。
+- 时间：平均 $O(n^2)$，最坏 $O(n^2)$，最好 $O(n)$。
+- 空间：$O(1)$。
+- 稳定性：稳定。
 
 #### 2.1.4 优化方案
 
@@ -101,9 +101,9 @@ void selectionSort(int nums[], int n) {
 
 #### 2.2.3 复杂度分析
 
-* 时间：无论数据状况如何，均为 $O(n^2)$。
-* 空间：$O(1)$。
-* 稳定性：**不稳定**（例如序列 `[5, 5, 2]`，交换第一个 5 和 2 会破坏两个 5 的相对顺序）。
+- 时间：无论数据状况如何，均为 $O(n^2)$。
+- 空间：$O(1)$。
+- 稳定性：**不稳定**（例如序列 `[5, 5, 2]`，交换第一个 5 和 2 会破坏两个 5 的相对顺序）。
 
 ### 2.3 插入排序（Insertion Sort）
 
@@ -133,9 +133,9 @@ void insertionSort(int nums[], int size) {
 
 #### 2.3.3 复杂度分析
 
-* 时间：平均 $O(n^2)$，最坏 $O(n^2)$，最好 $O(n)$（接近有序时效率极高）。
-* 空间：$O(1)$。
-* 稳定性：稳定。
+- 时间：平均 $O(n^2)$，最坏 $O(n^2)$，最好 $O(n)$（接近有序时效率极高）。
+- 空间：$O(1)$。
+- 稳定性：稳定。
 
 #### 2.3.4 二分插入排序
 
@@ -153,8 +153,8 @@ void insertionSort(int nums[], int size) {
 
 #### 2.4.3 复杂度分析
 
-* 时间：取决于增量序列，平均可达 $O(n^{1.3})$ 或 $O(n \log^2 n)$。突破了 $O(n^2)$ 的限制。
-* 稳定性：**不稳定**。
+- 时间：取决于增量序列，平均可达 $O(n^{1.3})$ 或 $O(n \log^2 n)$。突破了 $O(n^2)$ 的限制。
+- 稳定性：**不稳定**。
 
 ## 3. 高效排序算法
 
@@ -166,9 +166,9 @@ void insertionSort(int nums[], int size) {
 
 #### 3.1.2 算法实现
 
-* **分解**：$O(1)$。
-* **解决**：递归调用。
-* **合并**：$O(n)$。
+- **分解**：$O(1)$。
+- **解决**：递归调用。
+- **合并**：$O(n)$。
 
 ```c
 /* 合并左子数组和右子数组 */
@@ -218,9 +218,9 @@ void mergeSort(int *nums, int left, int right) {
 
 #### 3.1.3 复杂度分析
 
-* 时间：严格的 $O(n \log n)$。
-* 空间：$O(n)$（需要辅助数组），这是其主要缺点。
-* 稳定性：稳定。
+- 时间：严格的 $O(n \log n)$。
+- 空间：$O(n)$（需要辅助数组），这是其主要缺点。
+- 稳定性：稳定。
 
 #### 3.1.4 空间优化
 
@@ -234,8 +234,8 @@ void mergeSort(int *nums, int left, int right) {
 
 #### 3.2.2 分区操作 (Partition)
 
-* **Lomuto 分区**：单向扫描，实现简单。
-* **Hoare 分区**：双向扫描，效率略高，交换次数少。
+- **Lomuto 分区**：单向扫描，实现简单。
+- **Hoare 分区**：双向扫描，效率略高，交换次数少。
 
 #### 3.2.3 算法实现
 
@@ -270,9 +270,9 @@ int partition(int nums[], int left, int right) {
 
 #### 3.2.4 复杂度分析
 
-* 时间：平均 $O(n \log n)$，最坏 $O(n^2)$（当数据有序且每次选第一个为基准时）。
-* 空间：$O(\log n)$（递归栈空间）。
-* 稳定性：**不稳定**。
+- 时间：平均 $O(n \log n)$，最坏 $O(n^2)$（当数据有序且每次选第一个为基准时）。
+- 空间：$O(\log n)$（递归栈空间）。
+- 稳定性：**不稳定**。
 
 #### 3.2.5 随机化快排
 
@@ -290,8 +290,8 @@ int partition(int nums[], int left, int right) {
 
 #### 3.3.2 堆的构建
 
-* `Heapify`：调整节点使其满足堆性质。
-* `Build-Heap`：从最后一个非叶子节点开始向上调整，时间 $O(n)$。
+- `Heapify`：调整节点使其满足堆性质。
+- `Build-Heap`：从最后一个非叶子节点开始向上调整，时间 $O(n)$。
 
 #### 3.3.3 算法实现
 
@@ -345,9 +345,9 @@ void heapSort(int nums[], int n) {
 
 #### 3.3.4 复杂度分析
 
-* 时间：严格的 $O(n \log n)$。
-* 空间：$O(1)$。
-* 稳定性：**不稳定**。
+- 时间：严格的 $O(n \log n)$。
+- 空间：$O(1)$。
+- 稳定性：**不稳定**。
 
 ## 4. 特殊排序算法（线性时间排序）
 
@@ -396,9 +396,9 @@ void countingSortNaive(int nums[], int size) {
 
 #### 4.1.4 复杂度分析
 
-* 时间：$O(n + k)$。
-* 空间：$O(k)$。
-* 稳定性：稳定。
+- 时间：$O(n + k)$。
+- 空间：$O(k)$。
+- 稳定性：稳定。
 
 ### 4.2 基数排序（Radix Sort）
 
@@ -408,8 +408,8 @@ void countingSortNaive(int nums[], int size) {
 
 #### 4.2.2 LSD 与 MSD
 
-* **LSD (Least Significant Digit)**：从低位到高位排序。
-* **MSD (Most Significant Digit)**：从高位到低位排序（需递归）。
+- **LSD (Least Significant Digit)**：从低位到高位排序。
+- **MSD (Most Significant Digit)**：从高位到低位排序（需递归）。
 
 #### 4.2.3 算法实现
 
@@ -476,8 +476,8 @@ void radixSort(int nums[], int size) {
 
 #### 4.2.4 复杂度分析
 
-* 时间：$O(d(n+k))$，其中 $d$ 是最大值的位数。
-* 稳定性：稳定。
+- 时间：$O(d(n+k))$，其中 $d$ 是最大值的位数。
+- 稳定性：稳定。
 
 ### 4.3 桶排序（Bucket Sort）
 
@@ -523,8 +523,8 @@ void bucketSort(float nums[], int n) {
 
 #### 4.3.3 复杂度分析
 
-* 时间：如果数据均匀分布，平均 $O(n)$。最坏情况（所有数据进一个桶）退化为桶内排序算法的复杂度。
-* 空间：$O(n+k)$。
+- 时间：如果数据均匀分布，平均 $O(n)$。最坏情况（所有数据进一个桶）退化为桶内排序算法的复杂度。
+- 空间：$O(n+k)$。
 
 #### 4.3.4 与其他排序的结合
 
@@ -604,20 +604,20 @@ void bucketSort(float nums[], int n) {
 
 #### 7.1.1 Introsort (内省排序)
 
-* 开始使用快速排序。
-* 如果递归深度超过阈值（通常 $2 \log n$），切换为堆排序（防止最坏情况）。
-* 如果子数组很小，切换为插入排序。
+- 开始使用快速排序。
+- 如果递归深度超过阈值（通常 $2 \log n$），切换为堆排序（防止最坏情况）。
+- 如果子数组很小，切换为插入排序。
 
 #### 7.1.2 Timsort
 
-* 结合了归并排序和插入排序。
-* 利用数据中天然存在的有序片段（Runs）。
-* 极其适合现实世界的非随机数据，最坏 $O(n \log n)$，最好 $O(n)$，且稳定。
+- 结合了归并排序和插入排序。
+- 利用数据中天然存在的有序片段（Runs）。
+- 极其适合现实世界的非随机数据，最坏 $O(n \log n)$，最好 $O(n)$，且稳定。
 
 ### 7.2 并行排序
 
-* **双调排序 (Bitonic Sort)**：一种排序网络，非常适合在 GPU 或并行硬件上实现。
-* **并行归并**：将合并过程并行化。
+- **双调排序 (Bitonic Sort)**：一种排序网络，非常适合在 GPU 或并行硬件上实现。
+- **并行归并**：将合并过程并行化。
 
 ## 8. 总结
 
@@ -637,10 +637,10 @@ void bucketSort(float nums[], int n) {
 
 > **参数说明：**
 >
-> * $n$：数据量大小
-> * $k$：桶排序中为桶数量；基数排序中为最大位数
-> * $m$：计数排序中为数据范围
-> * $b$：基数排序中为数据进制（数据为 $b$ 进制）
+> - $n$：数据量大小
+> - $k$：桶排序中为桶数量；基数排序中为最大位数
+> - $m$：计数排序中为数据范围
+> - $b$：基数排序中为数据进制（数据为 $b$ 进制）
 
 ## 习题
 
diff --git "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/12_\346\240\207\345\207\206\345\272\223\344\270\255\347\232\204\345\256\217.md" "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/12_\346\240\207\345\207\206\345\272\223\344\270\255\347\232\204\345\256\217.md"
index 929878e1..cba3e80e 100644
--- "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/12_\346\240\207\345\207\206\345\272\223\344\270\255\347\232\204\345\256\217.md"
+++ "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/12_\346\240\207\345\207\206\345\272\223\344\270\255\347\232\204\345\256\217.md"
@@ -4,12 +4,12 @@
 
 本教程将重点介绍C标准库中几组关键宏：
 
-- **`<stddef.h>`**：基础宏，如 ` NULL `、` offsetof `，以及类型 ` size_t `、`ptrdiff_t`（常以宏形式间接使用）。
-- **`<stdint.h>`**：固定宽度整数类型（如 ` int32_t `）及其极限宏（如 ` INT32_MAX `、` UINT64_MAX `）。
-- **`<inttypes.h>`**：格式化宏（如 ` PRId32 `、` PRIu64 `、` SCNxPTR `），用于`printf`/`scanf`家族的安全跨平台I/O。
-- **`<limits.h>`**：基本整数类型的数值极限（如 ` INT_MIN `、` INT_MAX `、` CHAR_BIT `、` LLONG_MAX `）。
-- **`<float.h>`**：浮点类型的特性与极限（如 ` FLT_MAX `、` DBL_EPSILON `、` FLT_DIG `）。
-- **特征测试宏**：预定义宏如 ` __STDC_VERSION__ `、` __STDC_HOSTED__ `，用于条件编译以适配不同C标准版本（C99、C11、C17、C23）和实现特性。
+- **`<stddef.h>`**：基础宏，如 `NULL`、`offsetof`，以及类型 `size_t`、`ptrdiff_t`（常以宏形式间接使用）。
+- **`<stdint.h>`**：固定宽度整数类型（如 `int32_t`）及其极限宏（如 `INT32_MAX`、`UINT64_MAX`）。
+- **`<inttypes.h>`**：格式化宏（如 `PRId32`、`PRIu64`、`SCNxPTR`），用于`printf`/`scanf`家族的安全跨平台I/O。
+- **`<limits.h>`**：基本整数类型的数值极限（如 `INT_MIN`、`INT_MAX`、`CHAR_BIT`、`LLONG_MAX`）。
+- **`<float.h>`**：浮点类型的特性与极限（如 `FLT_MAX`、`DBL_EPSILON`、`FLT_DIG`）。
+- **特征测试宏**：预定义宏如 `__STDC_VERSION__`、`__STDC_HOSTED__`，用于条件编译以适配不同C标准版本（C99、C11、C17、C23）和实现特性。
 
 这些宏大多是**常量表达式**，可在预处理阶段、`#if` 指令或静态断言中使用。掌握它们，不仅能写出更健壮的代码，还能深入理解C语言的底层实现差异。
 
diff --git "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/12_\346\240\207\345\207\206\345\272\223\344\270\255\347\232\204\345\256\217/12_6_\345\212\237\350\203\275\347\211\271\346\200\247\346\265\213\350\257\225\345\256\217.md" "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/12_\346\240\207\345\207\206\345\272\223\344\270\255\347\232\204\345\256\217/12_6_\345\212\237\350\203\275\347\211\271\346\200\247\346\265\213\350\257\225\345\256\217.md"
index bacd2e82..306d08a3 100644
--- "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/12_\346\240\207\345\207\206\345\272\223\344\270\255\347\232\204\345\256\217/12_6_\345\212\237\350\203\275\347\211\271\346\200\247\346\265\213\350\257\225\345\256\217.md"
+++ "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/12_\346\240\207\345\207\206\345\272\223\344\270\255\347\232\204\345\256\217/12_6_\345\212\237\350\203\275\347\211\271\346\200\247\346\265\213\350\257\225\345\256\217.md"
@@ -10,13 +10,13 @@ C标准定义了一系列预定义宏，用于指示实现支持的C语言版本
   值：通常 1（表示实现意图符合ISO C标准，可能包含扩展）。
 
 - `__STDC_VERSION__`  
-  值（长整型常量）：  
-  - C90/C95：未定义或 199409L  
-  - C99：199901L  
-  - C11：201112L  
-  - C17：201710L  
+  值（长整型常量）：
+  - C90/C95：未定义或 199409L
+  - C99：199901L
+  - C11：201112L
+  - C17：201710L
   - C23：202311L（实现支持C23时至少此值）  
-  用于检查支持的C标准版本。
+    用于检查支持的C标准版本。
 
 - `__STDC_HOSTED__`  
   值：1（托管环境，提供完整标准库，如操作系统）；0（自由站立环境，如裸机嵌入式，无标准库或部分库）。
@@ -26,27 +26,27 @@ C标准定义了一系列预定义宏，用于指示实现支持的C语言版本
 
 ## 2. 可选特性宏（C11及以后）
 
-如果实现不支持相应可选特性，则定义这些宏为 1：  
+如果实现不支持相应可选特性，则定义这些宏为 1：
 
-- `__STDC_NO_ATOMICS__`：不支持原子操作（`<stdatomic.h>`）  
-- `__STDC_NO_COMPLEX__`：不支持复数类型（`_Complex`）  
-- `__STDC_NO_THREADS__`：不支持线程（`<threads.h>`）  
+- `__STDC_NO_ATOMICS__`：不支持原子操作（`<stdatomic.h>`）
+- `__STDC_NO_COMPLEX__`：不支持复数类型（`_Complex`）
+- `__STDC_NO_THREADS__`：不支持线程（`<threads.h>`）
 - `__STDC_NO_VLA__`：不支持可变长度数组（VLA，C23已移除此特性，故现代实现通常定义此宏）
 
 ## 3. 其他相关宏
 
-- `__STDC_ISO_10646__`：表示`wchar_t`值遵循ISO/IEC 10646（Unicode）特定版本（如 201112L 表示2011年12月版）。  
+- `__STDC_ISO_10646__`：表示`wchar_t`值遵循ISO/IEC 10646（Unicode）特定版本（如 201112L 表示2011年12月版）。
 - `__STDC_ANALYZABLE__`、`__STDC_LIB_EXT1__` 等（较少用，涉及界限检查函数等扩展）。
 
 实现还可能定义编译器特定宏（如 `__GNUC__`、`__clang__`、`__MSC_VER__`），但这些非标准。
 
 ## 4. 用户定义特征测试宏
 
-用户可在编译命令行（`-D`）或代码中定义某些宏，以请求特定扩展行为（非强制，但标准认可）：  
+用户可在编译命令行（`-D`）或代码中定义某些宏，以请求特定扩展行为（非强制，但标准认可）：
 
-- `_POSIX_C_SOURCE`：请求POSIX特性（值如 200809L）。  
-- `_XOPEN_SOURCE`：请求X/Open或UNIX特性。  
-- `_GNU_SOURCE`：请求GNU扩展。  
+- `_POSIX_C_SOURCE`：请求POSIX特性（值如 200809L）。
+- `_XOPEN_SOURCE`：请求X/Open或UNIX特性。
+- `_GNU_SOURCE`：请求GNU扩展。
 - `_ISOC11_SOURCE` 等（较少用）。
 
 推荐优先检查 `__STDC_VERSION__` 来适配标准特性。
diff --git "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/16_\345\255\227\347\254\246\345\255\227\347\254\246\344\270\262\345\272\223/16_1_ctype.md" "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/16_\345\255\227\347\254\246\345\255\227\347\254\246\344\270\262\345\272\223/16_1_ctype.md"
index b3c5ad73..6b5914d3 100644
--- "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/16_\345\255\227\347\254\246\345\255\227\347\254\246\344\270\262\345\272\223/16_1_ctype.md"
+++ "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/16_\345\255\227\347\254\246\345\255\227\347\254\246\344\270\262\345\272\223/16_1_ctype.md"
@@ -91,42 +91,43 @@ int main() {
 
 <TerminalWindow>
 
-Character   isalnum   isalpha   islower   isupper   isdigit   isxdigit  isspace   iscntrl   ispunct   isblank   isgraph
-----------  --------  --------  --------  --------  --------  --------  --------  --------  --------  --------  ---------
-  A              8      1024         0       256         0      4096         0         0         0         0     32768
-  a              8      1024       512         0         0      4096         0         0         0         0     32768
-  Z              8      1024         0       256         0         0         0         0         0         0     32768
-  z              8      1024       512         0         0         0         0         0         0         0     32768
-  0              8         0         0         0      2048      4096         0         0         0         0     32768
-  9              8         0         0         0      2048      4096         0         0         0         0     32768
-  !              0         0         0         0         0         0         0         0         4         0     32768
-  ?              0         0         0         0         0         0         0         0         4         0     32768
-  \#              0         0         0         0         0         0         0         0         4         0     32768
-  $              0         0         0         0         0         0         0         0         4         0     32768
- [SPACE]         0         0         0         0         0         0      8192         0         0         1         0
-  \t             0         0         0         0         0         0      8192         2         0         1         0
-  \n             0         0         0         0         0         0      8192         2         0         0         0
-  \r             0         0         0         0         0         0      8192         2         0         0         0
-  \v             0         0         0         0         0         0      8192         2         0         0         0
-  \f             0         0         0         0         0         0      8192         2         0         0         0
-  \0             0         0         0         0         0         0         0         2         0         0         0
- [DEL]           0         0         0         0         0         0         0         2         0         0         0
-  \*              0         0         0         0         0         0         0         0         4         0     32768
-  /              0         0         0         0         0         0         0         0         4         0     32768
-  [              0         0         0         0         0         0         0         0         4         0     32768
-  ^              0         0         0         0         0         0         0         0         4         0     32768
-  {              0         0         0         0         0         0         0         0         4         0     32768
-  ~              0         0         0         0         0         0         0         0         4         0     32768
-  :              0         0         0         0         0         0         0         0         4         0     32768
-  ;              0         0         0         0         0         0         0         0         4         0     32768
-  <              0         0         0         0         0         0         0         0         4         0     32768
-  =              0         0         0         0         0         0         0         0         4         0     32768
-  \>              0         0         0         0         0         0         0         0         4         0     32768
-  @              0         0         0         0         0         0         0         0         4         0     32768
-  \              0         0         0         0         0         0         0         0         4         0     32768
-  `              0         0         0         0         0         0         0         0         4         0     32768
-  |              0         0         0         0         0         0         0         0         4         0     32768
-  %              0         0         0         0         0         0         0         0         4         0     32768
+Character isalnum isalpha islower isupper isdigit isxdigit isspace iscntrl ispunct isblank isgraph
+
+---
+
+A 8 1024 0 256 0 4096 0 0 0 0 32768
+a 8 1024 512 0 0 4096 0 0 0 0 32768
+Z 8 1024 0 256 0 0 0 0 0 0 32768
+z 8 1024 512 0 0 0 0 0 0 0 32768
+0 8 0 0 0 2048 4096 0 0 0 0 32768
+9 8 0 0 0 2048 4096 0 0 0 0 32768
+! 0 0 0 0 0 0 0 0 4 0 32768
+? 0 0 0 0 0 0 0 0 4 0 32768
+\# 0 0 0 0 0 0 0 0 4 0 32768
+$ 0 0 0 0 0 0 0 0 4 0 32768
+[SPACE] 0 0 0 0 0 0 8192 0 0 1 0
+\t 0 0 0 0 0 0 8192 2 0 1 0
+\n 0 0 0 0 0 0 8192 2 0 0 0
+\r 0 0 0 0 0 0 8192 2 0 0 0
+\v 0 0 0 0 0 0 8192 2 0 0 0
+\f 0 0 0 0 0 0 8192 2 0 0 0
+\0 0 0 0 0 0 0 0 2 0 0 0
+[DEL] 0 0 0 0 0 0 0 2 0 0 0 \* 0 0 0 0 0 0 0 0 4 0 32768
+/ 0 0 0 0 0 0 0 0 4 0 32768
+[ 0 0 0 0 0 0 0 0 4 0 32768
+^ 0 0 0 0 0 0 0 0 4 0 32768
+{ 0 0 0 0 0 0 0 0 4 0 32768
+~ 0 0 0 0 0 0 0 0 4 0 32768
+: 0 0 0 0 0 0 0 0 4 0 32768
+; 0 0 0 0 0 0 0 0 4 0 32768
+< 0 0 0 0 0 0 0 0 4 0 32768
+= 0 0 0 0 0 0 0 0 4 0 32768
+\> 0 0 0 0 0 0 0 0 4 0 32768
+@ 0 0 0 0 0 0 0 0 4 0 32768
+\ 0 0 0 0 0 0 0 0 4 0 32768
+` 0 0 0 0 0 0 0 0 4 0 32768
+| 0 0 0 0 0 0 0 0 4 0 32768
+% 0 0 0 0 0 0 0 0 4 0 32768
 
 </TerminalWindow>
 
diff --git "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/1_\345\234\250\345\274\200\345\247\213\347\274\226\347\250\213\344\271\213\345\211\215.md" "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/1_\345\234\250\345\274\200\345\247\213\347\274\226\347\250\213\344\271\213\345\211\215.md"
index 77b3d0b2..f18f3018 100644
--- "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/1_\345\234\250\345\274\200\345\247\213\347\274\226\347\250\213\344\271\213\345\211\215.md"
+++ "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/1_\345\234\250\345\274\200\345\247\213\347\274\226\347\250\213\344\271\213\345\211\215.md"
@@ -21,9 +21,9 @@ OK，我们开始。这一章的内容很轻松（不理解的概念性内容跳
 这个过程包含两个核心步骤：
 
 1. **思维的形式化（Formalization）**：
-    你首先要把脑海中模糊的想法（比如“帮我算一下全班平均分”），拆解成逻辑严密、毫无歧义的步骤（“读取所有分数” -> “累加” -> “除以总人数”）。
+   你首先要把脑海中模糊的想法（比如“帮我算一下全班平均分”），拆解成逻辑严密、毫无歧义的步骤（“读取所有分数” -> “累加” -> “除以总人数”）。
 2. **逻辑的翻译（Translation）**：
-    使用一种人能读懂、计算机也能通过工具（编译器）理解的语言——**编程语言**，将上述步骤记录下来。
+   使用一种人能读懂、计算机也能通过工具（编译器）理解的语言——**编程语言**，将上述步骤记录下来。
 
 所以，编程不是单纯的“敲代码”，那是打字员的工作。
 
@@ -327,14 +327,15 @@ Code is cheap, show me the proof.
 ## 自测题
 
 <Quiz
-  type="multi"
-  :options="[
-    { label: '操作系统 (OS) 和编译器', value: 'A' },
-    { label: '嵌入式开发和物联网 (IoT)', value: 'B' },
-    { label: '现代网页前端界面开发', value: 'C' },
-    { label: '数据库系统 (DB)', value: 'D' }
-  ]"
-  :answer="['A', 'B', 'D']"
+type="multi"
+:options="[
+{ label: '操作系统 (OS) 和编译器', value: 'A' },
+{ label: '嵌入式开发和物联网 (IoT)', value: 'B' },
+{ label: '现代网页前端界面开发', value: 'C' },
+{ label: '数据库系统 (DB)', value: 'D' }
+]"
+:answer="['A', 'B', 'D']"
+
 >
 
 <template #question>
@@ -344,53 +345,55 @@ Code is cheap, show me the proof.
 </template>
 
 C 语言的核心优势在于系统级编程和对硬件的直接控制。
-  
+
 - **A, B, D** 都是 C 语言的传统优势领域，如操作系统、编译器、数据库、嵌入式设备等。
 - **C** 选项的网页前端开发主要使用 JavaScript, HTML, CSS 技术栈，不属于 C 语言的主要应用范畴。
 
 </Quiz>
 
 <Quiz
-  type="single"
-  :options="[
-    { label: 'for 用于未知次数的循环，while 用于已知次数的循环。', value: 'A' },
-    { label: 'for 的“套路”是处理已知次数的迭代，如遍历数组。', value: 'B' },
-    { label: 'while 的“套路”是处理固定次数的迭代。', value: 'C' },
-    { label: '两者完全可以互换，没有各自擅长的场景。', value: 'D' }
-  ]"
-  answer="B"
+type="single"
+:options="[
+{ label: 'for 用于未知次数的循环，while 用于已知次数的循环。', value: 'A' },
+{ label: 'for 的“套路”是处理已知次数的迭代，如遍历数组。', value: 'B' },
+{ label: 'while 的“套路”是处理固定次数的迭代。', value: 'C' },
+{ label: '两者完全可以互换，没有各自擅长的场景。', value: 'D' }
+]"
+answer="B"
+
 >
 
 <template #question>
 
 关于 `for` 和 `while` 的“套路”（Idioms），哪个描述是正确的？
-  
+
 </template>
 
 文章明确指出了两者的惯用法区别：
 
 - **`for` 的套路**：用于**已知次数**的迭代，例如 `for (int i = 0; i < n; i++)`。
 - **`while` 的套路**：用于**未知次数**、依赖某个条件才能结束的迭代，例如 `while (condition)`。
-  
+
 因此，选项 B 是对 `for` 循环“套路”的正确描述。
 
 </Quiz>
 
 <Quiz
-  type="single"
-  :options="[
-    { label: 'VS Code', value: 'A' },
-    { label: 'MSVC', value: 'B' },
-    { label: 'Clang', value: 'C' },
-    { label: 'MSVC', value: 'D' }
-  ]"
-  answer="A"
+type="single"
+:options="[
+{ label: 'VS Code', value: 'A' },
+{ label: 'MSVC', value: 'B' },
+{ label: 'Clang', value: 'C' },
+{ label: 'MSVC', value: 'D' }
+]"
+answer="A"
+
 >
 
 <template #question>
 
 以下哪个工具**不**是编译器？
-  
+
 </template>
 
 GCC，Clang，MSVC 是常见编译器，VS Code 是代码编辑器。
diff --git "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/2_\344\270\200\344\270\252\347\256\200\345\215\225\347\232\204C\347\250\213\345\272\217.md" "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/2_\344\270\200\344\270\252\347\256\200\345\215\225\347\232\204C\347\250\213\345\272\217.md"
index 8ed33e41..bde3896c 100644
--- "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/2_\344\270\200\344\270\252\347\256\200\345\215\225\347\232\204C\347\250\213\345\272\217.md"
+++ "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/2_\344\270\200\344\270\252\347\256\200\345\215\225\347\232\204C\347\250\213\345\272\217.md"
@@ -243,41 +243,43 @@ Program terminated with signal: SIGSEGV
 ## 自测题
 
 <Quiz
-  type="single"
-  :options="[
-    { label: '5 / 2 = 2.5', value: 'A' },
-    { label: '5 / 2 = 2', value: 'B' },
-    { label: '-5 / 2 = -3', value: 'C' },
-    { label: '5.0 / 2 = 2', value: 'D' }
-  ]"
-  answer="B"
+type="single"
+:options="[
+{ label: '5 / 2 = 2.5', value: 'A' },
+{ label: '5 / 2 = 2', value: 'B' },
+{ label: '-5 / 2 = -3', value: 'C' },
+{ label: '5.0 / 2 = 2', value: 'D' }
+]"
+answer="B"
+
 >
 
 <template #question>
 
 根据 C 语言的规则，如果不使用强制类型转换，表达式 `5 / 2` 的结果是多少？
-  
+
 </template>
 
 正确答案是 **B**。
-  
+
 在 C 语言中，对两个整数应用除法运算符 `/`，结果会向零取整。
 
-* `5` 和 `2` 都是整数，所以结果截断小数部分，得到 `2`。
-* `-5 / 2` 同样向零取整，得到 `-2`（而不是 -3）。
-* 若要得到 `2.5`，至少有一个操作数必须是浮点数（如 `5.0 / 2` 或 `(double)5 / 2`）。
+- `5` 和 `2` 都是整数，所以结果截断小数部分，得到 `2`。
+- `-5 / 2` 同样向零取整，得到 `-2`（而不是 -3）。
+- 若要得到 `2.5`，至少有一个操作数必须是浮点数（如 `5.0 / 2` 或 `(double)5 / 2`）。
 
 </Quiz>
 
 <Quiz
-  type="multi"
-  :options="[
-    { label: '用于确保程序运行时满足特定条件。', value: 'A' },
-    { label: '当条件为假（false）时，程序会终止运行。', value: 'B' },
-    { label: 'assert(b != 0) 意味着如果 b 不等于 0，程序就会报错。', value: 'C' },
-    { label: '通常用于调试和开发阶段，进行防御性编程。', value: 'D' }
-  ]"
-  :answer="['A', 'B', 'D']"
+type="multi"
+:options="[
+{ label: '用于确保程序运行时满足特定条件。', value: 'A' },
+{ label: '当条件为假（false）时，程序会终止运行。', value: 'B' },
+{ label: 'assert(b != 0) 意味着如果 b 不等于 0，程序就会报错。', value: 'C' },
+{ label: '通常用于调试和开发阶段，进行防御性编程。', value: 'D' }
+]"
+:answer="['A', 'B', 'D']"
+
 >
 
 <template #question>
@@ -286,8 +288,8 @@ Program terminated with signal: SIGSEGV
 
 </template>
 
-* **A, B, D** 正确：断言用于检查程序运行时的前提条件。如果条件不满足（即为假），程序会终止并报告错误，这有助于在开发阶段发现 bug。
-* **C** 错误：`assert(condition)` 的逻辑是“**我断定**这个条件是真的”。如果 `b != 0` 成立（真），程序**继续执行**；如果 `b != 0` 不成立（即 b 等于 0），程序才会报错终止。
+- **A, B, D** 正确：断言用于检查程序运行时的前提条件。如果条件不满足（即为假），程序会终止并报告错误，这有助于在开发阶段发现 bug。
+- **C** 错误：`assert(condition)` 的逻辑是“**我断定**这个条件是真的”。如果 `b != 0` 成立（真），程序**继续执行**；如果 `b != 0` 不成立（即 b 等于 0），程序才会报错终止。
 
 </Quiz>
 
@@ -299,7 +301,7 @@ Program terminated with signal: SIGSEGV
 // 编译报错！
 // 编译器不知道 puts 是什么
 int main(void) {
-    puts("Hello"); 
+    puts("Hello");
     return 0;
 }
 ```
@@ -324,14 +326,15 @@ int main(void) {
 </CodeCompare>
 
 <Quiz
-  type="single"
-  :options="[
-    { label: '它是一条预处理器指令，以 # 开头。', value: 'A' },
-    { label: '它的作用是将目标文件的内容“复制粘贴”到当前文件。', value: 'B' },
-    { label: '它必须放在 main 函数内部才能生效。', value: 'C' },
-    { label: '<stdio.h> 是标准库提供的头文件，包含了输入输出函数的声明。', value: 'D' }
-  ]"
-  answer="C"
+type="single"
+:options="[
+{ label: '它是一条预处理器指令，以 # 开头。', value: 'A' },
+{ label: '它的作用是将目标文件的内容“复制粘贴”到当前文件。', value: 'B' },
+{ label: '它必须放在 main 函数内部才能生效。', value: 'C' },
+{ label: '<stdio.h> 是标准库提供的头文件，包含了输入输出函数的声明。', value: 'D' }
+]"
+answer="C"
+
 >
 
 <template #question>
@@ -341,8 +344,8 @@ int main(void) {
 </template>
 
 正确答案是 **C**（即描述错误的选项）。
-  
-* `#include` 是一条预处理指令，通常写在文件的最开头，**不需要**也不应该放在 `main` 函数内部（虽然语法上允许放在函数内，但这是一种极不推荐的写法，且通常不符合包含头文件的惯例）。
-* A, B, D 的描述都是正确的。
+
+- `#include` 是一条预处理指令，通常写在文件的最开头，**不需要**也不应该放在 `main` 函数内部（虽然语法上允许放在函数内，但这是一种极不推荐的写法，且通常不符合包含头文件的惯例）。
+- A, B, D 的描述都是正确的。
 
 </Quiz>
diff --git "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/4_\350\241\250\350\276\276\345\274\217/4_2_\345\270\270\351\207\217\345\222\214\345\255\227\351\235\242\351\207\217/4_2_3_\345\255\227\347\254\246\344\270\262\345\255\227\351\235\242\351\207\217.md" "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/4_\350\241\250\350\276\276\345\274\217/4_2_\345\270\270\351\207\217\345\222\214\345\255\227\351\235\242\351\207\217/4_2_3_\345\255\227\347\254\246\344\270\262\345\255\227\351\235\242\351\207\217.md"
index 59980a55..afe5fda7 100644
--- "a/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/4_\350\241\250\350\276\276\345\274\217/4_2_\345\270\270\351\207\217\345\222\214\345\255\227\351\235\242\351\207\217/4_2_3_\345\255\227\347\254\246\344\270\262\345\255\227\351\235\242\351\207\217.md"
+++ "b/docs/\346\225\231\347\250\213/\346\255\243\346\226\207/\350\257\255\346\263\225\345\222\214\346\240\207\345\207\206\345\272\223/4_\350\241\250\350\276\276\345\274\217/4_2_\345\270\270\351\207\217\345\222\214\345\255\227\351\235\242\351\207\217/4_2_3_\345\255\227\347\254\246\344\270\262\345\255\227\351\235\242\351\207\217.md"
@@ -28,6 +28,7 @@
    4. `L" "`：宽字符：在内存中用 Unicode 进行保存，输出的时候转化成多字节编码
 
    如果不带编码前缀，那么字符串字面量使用的字符集是实现定义的。
+
 8. 字符串字面量的拼接：
 
    ```c
diff --git "a/docs/\346\235\202\351\241\271/\345\211\215\347\253\257.md" "b/docs/\346\235\202\351\241\271/\345\211\215\347\253\257.md"
index cb9fd370..c2e0fb2e 100644
--- "a/docs/\346\235\202\351\241\271/\345\211\215\347\253\257.md"
+++ "b/docs/\346\235\202\351\241\271/\345\211\215\347\253\257.md"
@@ -2,7 +2,7 @@
 
 感谢 [Gemini](https://gemini.google.com/) 帮我搜索资料，完善文章细节；感谢 Roadmap ( <https://www.roadmap.sh/> ) 提供了结构化的学习路线。笔者能力有限，如有错误或疏漏之处，恳请广大读者不吝赐教。
 
-_本文约  8 万字，预计阅读时间  350~400 分钟。_
+_本文约 8 万字，预计阅读时间 350~400 分钟。_
 
 思维导图：
 
@@ -36,8 +36,8 @@ _本文约  8 万字，预计阅读时间  350~400 分钟。_
 
 当下的 Web 前端开发者，除了传统的原生应用或单页应用之外，已越来越多地涉及**渐进式 Web 应用 (PWA)** 和**跨平台应用**的开发，甚至深入新兴领域，打造更加丰富多彩的软件世界：
 
-- **WASM + WebGPU** 在浏览器中实现近原生的密集计算与高强度 3D 渲染能力；  
-- **TensorFlow.js / ONNX Runtime Web** 把 AI 模型直接跑在用户设备上；  
+- **WASM + WebGPU** 在浏览器中实现近原生的密集计算与高强度 3D 渲染能力；
+- **TensorFlow.js / ONNX Runtime Web** 把 AI 模型直接跑在用户设备上；
 - **viem** 等现代库已成为去中心化应用（dApp）的常见选择。
 - **AI-Native 工具链**（Cursor Composer、v0.dev、Claude Code、Lovart、Builder.io AI 等）已能把一句需求直接生成完整可部署的 RSC 应用、测试与文档。
 
@@ -47,19 +47,19 @@ _本文约  8 万字，预计阅读时间  350~400 分钟。_
 
 和其他任何领域的学习一样，前端开发的学习也是个结构化的、循序渐进的过程：
 
-1. 先打牢**计算机基础**（浏览器原理、HTTP/3、DNS、Cookie、CORS、基本数据结构与算法）；  
-2. 扎实掌握**前端三剑客**——HTML（语义化与可访问性）、CSS（现代布局 + 设计系统）、JavaScript（运行时原理 + 现代标准），这是后面所有内容不可或缺的根基；  
-3. 学习现代框架与**元框架、下一代渲染架构**（React + RSC、Next.js App Router、SolidStart、Qwik Resumability、SvelteKit 等）；  
+1. 先打牢**计算机基础**（浏览器原理、HTTP/3、DNS、Cookie、CORS、基本数据结构与算法）；
+2. 扎实掌握**前端三剑客**——HTML（语义化与可访问性）、CSS（现代布局 + 设计系统）、JavaScript（运行时原理 + 现代标准），这是后面所有内容不可或缺的根基；
+3. 学习现代框架与**元框架、下一代渲染架构**（React + RSC、Next.js App Router、SolidStart、Qwik Resumability、SvelteKit 等）；
 4. 最后深入高级主题：WebGPU、WASM 编译链、边缘计算、Privacy Sandbox 与合规、可访问性（a11y）、国际化（i18n）、测试策略（Vitest + Playwright + Testing Library）、监控与错误追踪（Sentry、Highlight.io）、AI 驱动开发等。
 
 无论何时，**多读官方文档、多写项目、多看顶级开源库源码**，仍是前端能力提升的不二法门。
 
 随着生成式人工智能的迅猛发展，前端行业确实在发生深刻变革。低复杂度、重复性的页面和组件的编写工作会被 AI 大幅提速，但以下核心价值短期内难以被完全替代：
 
-- 对用户体验与人机交互的深度洞察与同理心  
-- 对复杂业务逻辑的抽象与大型系统的架构能力  
-- 可访问性（a11y）、性能优化、国际化等专业领域知识  
-- 跨团队协作、产品思维、沟通与文档能力  
+- 对用户体验与人机交互的深度洞察与同理心
+- 对复杂业务逻辑的抽象与大型系统的架构能力
+- 可访问性（a11y）、性能优化、国际化等专业领域知识
+- 跨团队协作、产品思维、沟通与文档能力
 - 持续交付、测试策略、监控体系等工程化实践
 
 只有把 AI 当作“超级加速器”，而非“替代者”，并继续在上述维度深耕的开发者，才会在未来 5～10 年站得更高、更稳。
@@ -67,8 +67,8 @@ _本文约  8 万字，预计阅读时间  350~400 分钟。_
 当今互联网上有丰富且多元的前端学习资源：
 
 - 基础 Web 技术：**MDN** 永远是最权威的宝典；
-- 框架与工具：优先看**官方教程与文档**（Next.js Docs、Solid Docs、Qwik Docs 等）；  
-- 理解原理：直接读 **Vite、esbuild、Million.js、Preact、TanStack、Zustand** 等明星开源库源码；  
+- 框架与工具：优先看**官方教程与文档**（Next.js Docs、Solid Docs、Qwik Docs 等）；
+- 理解原理：直接读 **Vite、esbuild、Million.js、Preact、TanStack、Zustand** 等明星开源库源码；
 - 学习 AI 驱动开发：**Cursor、v0.dev、Claude Projects、Lovart** 的官方示例与提示词工程案例是最佳起点；
 - 社区与系统课程：Frontend Masters、egghead.io、ByteDance FE 培训营、freeCodeCamp 等；
 
@@ -717,13 +717,13 @@ VS Code 和 WebStorm 之间的选择通常反映了可扩展性与开箱即用
 - [**Trae**](https://trae.js.org/)：由字节跳动开发的 AI 原生 IDE，同样深度集成了 AI 技术，并以“人机协作、互相增强”为核心理念。它支持通过 Agent 实现自主拆解需求和多步骤的自动化编程任务。
 - [**CodeBuddy**](https://codebuddy.ca/)：腾讯推出的 AI 编程助手，其创新的“Craft”模式能够自主理解用户需求，完成多文件甚至整个应用项目的生成和改写。
 
-#### **III.8.4 深度工作流集成**  
+#### **III.8.4 深度工作流集成**
 
 现代 AI IDE 已不再局限于代码补全，而是将**需求拆解 → 代码生成 → 测试验证 → 文档同步**整合为自动化流水线。例如，在 Cursor 中输入“实现 RSC 商品列表页，支持边缘缓存”，Agent 将自动：
 
-1. 创建 `app/product/page.tsx` (RSC 组件)  
-2. 生成 `sql/schema.sql` (边缘数据库表结构)  
-3. 编写 `e2e/product.spec.ts` (Playwright AI 生成的端到端测试)  
+1. 创建 `app/product/page.tsx` (RSC 组件)
+2. 生成 `sql/schema.sql` (边缘数据库表结构)
+3. 编写 `e2e/product.spec.ts` (Playwright AI 生成的端到端测试)
 4. 提交 PR 并附上性能预算报告 (LCP < 1.2s, 零 JS 下发)
 
 开发者角色从“逐行编码”转变为“**设定目标、审查边界、验收结果**”。
@@ -763,7 +763,7 @@ AI 可识别代码库中的反模式，例如：
 - 检测到未加 `partitioned: true` 的跨站 Cookie，自动标注 GDPR 风险
 - 发现硬编码 API 密钥，建议改用边缘环境变量
 
-##### **隐私合规辅助**  
+##### **隐私合规辅助**
 
 面对 Cookie-less 时代，AI 工具能自动扫描 `document.cookie` 使用情况，生成 CHIPS/Topics API 迁移方案，并生成符合 CCPA 的用户同意管理界面（CMP）代码模板。
 
@@ -1994,7 +1994,6 @@ Web 图形日益复杂，从 SVG 到 WebGL/WebGPU，反映了对更丰富、更
   - **ECharts/[AntV](https://antv.vision/)/Chart.js**：开箱即用的图表库，提供了丰富的图表组件和配置选项，易于上手，适合快速构建常见的实时图表。
 
 - **性能考量**：
-
   - **节流与防抖**：对于高频更新的数据，使用节流（throttle）或防抖（debounce）技术限制渲染频率，避免不必要的 UI 更新。
 
   - **动画优化**：使用 CSS transform 和 opacity 等属性进行动画，利用 GPU 加速。
diff --git "a/docs/\346\235\202\351\241\271/\347\273\204\344\273\266\345\261\225\347\244\272.md" "b/docs/\346\235\202\351\241\271/\347\273\204\344\273\266\345\261\225\347\244\272.md"
index 91eb21da..30b610dc 100644
--- "a/docs/\346\235\202\351\241\271/\347\273\204\344\273\266\345\261\225\347\244\272.md"
+++ "b/docs/\346\235\202\351\241\271/\347\273\204\344\273\266\345\261\225\347\244\272.md"
@@ -47,61 +47,63 @@ if (grade >= 90) {
 分为单选和多选；单选选择之后直接给出答案，多选点击“确认答案”之后给出答案。
 
 <Quiz
-  type="single"
-  :options="[
-    { label: 'int p = &a;', value: 'A' },
-    { label: 'int *p = a;', value: 'B' },
-    { label: 'int *p = &a;', value: 'C' },
-    { label: '*int p = &a;', value: 'D' }
-  ]"
-  answer="C"
+type="single"
+:options="[
+{ label: 'int p = &a;', value: 'A' },
+{ label: 'int *p = a;', value: 'B' },
+{ label: 'int *p = &a;', value: 'C' },
+{ label: '*int p = &a;', value: 'D' }
+]"
+answer="C"
+
 >
 
-  <template #question>
+<template #question>
 
 若有 `int a = 10;`，如何定义指向 `a` 的指针？
 
   </template>
 
   <!-- 这里是默认插槽，用于写解析 -->
-  正确答案是 **C**。
-  
-* **A**: `int p` 只是定义一个整数，不能存地址。
-* **B**: `int *p` 需要地址，但 `a` 是值。
-* **C**: 正确，`&a` 取出了 `a` 的地址赋值给指针 `p`。
+
+正确答案是 **C**。
+
+- **A**: `int p` 只是定义一个整数，不能存地址。
+- **B**: `int *p` 需要地址，但 `a` 是值。
+- **C**: 正确，`&a` 取出了 `a` 的地址赋值给指针 `p`。
 
 </Quiz>
 
 <Quiz
-  type="multi"
-  :options="[
-    { label: 'int 2number;', value: 'A' },
-    { label: 'int _count;', value: 'B' },
-    { label: 'int total-sum;', value: 'C' },
-    { label: 'int number2;', value: 'D' },
-    { label: 'int void;', value: 'E' }
-  ]"
-  :answer="['B', 'D']"
->
-  <template #question>
+type="multi"
+:options="[
+{ label: 'int 2number;', value: 'A' },
+{ label: 'int _count;', value: 'B' },
+{ label: 'int total-sum;', value: 'C' },
+{ label: 'int number2;', value: 'D' },
+{ label: 'int void;', value: 'E' }
+]"
+:answer="['B', 'D']"
+
+> <template #question>
 
 以下哪些是 C 语言中**合法**的标识符？（多选）
 
   </template>
 
-  C 语言标识符规则：
+C 语言标识符规则：
+
+1. 不能以数字开头（排除 A）。
+2. 不能包含减号等特殊符号（排除 C）。
+3. 不能是关键字（排除 E，`void` 是关键字）。
 
-  1. 不能以数字开头（排除 A）。
-  2. 不能包含减号等特殊符号（排除 C）。
-  3. 不能是关键字（排除 E，`void` 是关键字）。
-  
-  所以正确的是 `_count` 和 `number2`。
+所以正确的是 `_count` 和 `number2`。
 
 </Quiz>
 
 ## TerminalWindow 程序输出直观展示
 
-可以加标题。MCT 中所有 TerminalWindow 的标题均为 "zsh - ***"。
+可以加标题。MCT 中所有 TerminalWindow 的标题均为 "zsh - \*\*\*"。
 
 <TerminalWindow title="zsh - my_program">
 
@@ -125,24 +127,25 @@ if (grade >= 90) {
 <Term>空指针
   <template #tip>
 
-  + 指针没有指向任何变量
-  + NULL
-  
-  <Quiz
-  type="multi"
-  :options="[
-    { label: 'NULL;', value: 'A' },
-    { label: '0x00;', value: 'B' },
-    { label: '0', value: 'C' },
-    { label: '350234;', value: 'D' },
-    { label: '2^31;', value: 'E' }
-  ]"
-  :answer="['B', 'C','A']"
-  >
-
-  <template #question>
-
-   以下哪个是 `空指针` ？
+- 指针没有指向任何变量
+- NULL
+
+<Quiz
+type="multi"
+:options="[
+{ label: 'NULL;', value: 'A' },
+{ label: '0x00;', value: 'B' },
+{ label: '0', value: 'C' },
+{ label: '350234;', value: 'D' },
+{ label: '2^31;', value: 'E' }
+]"
+:answer="['B', 'C','A']"
+
+>
+
+<template #question>
+
+以下哪个是 `空指针` ？
 
   </template>
 
diff --git a/package.json b/package.json
index 3ab2f6b8..1a7b50e1 100644
--- a/package.json
+++ b/package.json
@@ -1,21 +1,21 @@
 {
-  "name": "vitepress",
-  "version": "1.0.0",
-  "main": "index.js",
-  "license": "MIT",
+  "name": "@Mdr-C-Tutorial/C",
+  "type": "module",
+  "version": "0.1.0",
+  "license": "CC-BY-NC-SA-4.0",
   "engines": {
     "node": ">=22"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
-    "@types/node": "^25.0.3",
+    "@types/node": "^25.0.6",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-vue": "^10.6.2",
-    "globals": "^16.5.0",
+    "globals": "^17.0.0",
     "prettier": "^3.7.4",
-    "typescript-eslint": "^8.51.0",
+    "typescript-eslint": "^8.52.0",
     "vue-eslint-parser": "^10.2.0",
     "workbox-window": "^7.4.0"
   },
@@ -35,10 +35,11 @@
     "markdown-it-mathjax3": "^4.3.2",
     "mermaid": "^11.12.2",
     "typescript": "^5.9.3",
-    "vite": "^7.3.0",
+    "vite": "^7.3.1",
     "vite-plugin-pwa": "^1.2.0",
     "vitepress": "^1.6.4",
     "vitepress-plugin-mermaid": "^2.0.17",
     "vue": "^3.5.26"
-  }
-}
\ No newline at end of file
+  },
+  "packageManager": "pnpm@10.28.0+sha512.05df71d1421f21399e053fde567cea34d446fa02c76571441bfc1c7956e98e363088982d940465fd34480d4d90a0668bc12362f8aa88000a64e83d0b0e47be48"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6fc5b62c..05482dd6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +16,7 @@ importers:
         version: 1.0.2
       '@vite-pwa/vitepress':
         specifier: ^1.1.0
-        version: 1.1.0(@vite-pwa/assets-generator@1.0.2)(vite-plugin-pwa@1.2.0(@vite-pwa/assets-generator@1.0.2)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0))
+        version: 1.1.0(@vite-pwa/assets-generator@1.0.2)(vite-plugin-pwa@1.2.0(@vite-pwa/assets-generator@1.0.2)(vite@7.3.1(@types/node@25.0.6)(jiti@2.6.1)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0))
       cytoscape:
         specifier: ^3.33.1
         version: 3.33.1
@@ -39,17 +39,17 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
       vite:
-        specifier: ^7.3.0
-        version: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(terser@5.44.1)
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@25.0.6)(jiti@2.6.1)(terser@5.44.1)
       vite-plugin-pwa:
         specifier: ^1.2.0
-        version: 1.2.0(@vite-pwa/assets-generator@1.0.2)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0)
+        version: 1.2.0(@vite-pwa/assets-generator@1.0.2)(vite@7.3.1(@types/node@25.0.6)(jiti@2.6.1)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0)
       vitepress:
         specifier: ^1.6.4
-        version: 1.6.4(@algolia/client-search@5.46.2)(@types/node@25.0.3)(markdown-it-mathjax3@4.3.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3)
+        version: 1.6.4(@algolia/client-search@5.46.2)(@types/node@25.0.6)(markdown-it-mathjax3@4.3.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3)
       vitepress-plugin-mermaid:
         specifier: ^2.0.17
-        version: 2.0.17(mermaid@11.12.2)(vitepress@1.6.4(@algolia/client-search@5.46.2)(@types/node@25.0.3)(markdown-it-mathjax3@4.3.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3))
+        version: 2.0.17(mermaid@11.12.2)(vitepress@1.6.4(@algolia/client-search@5.46.2)(@types/node@25.0.6)(markdown-it-mathjax3@4.3.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3))
       vue:
         specifier: ^3.5.26
         version: 3.5.26(typescript@5.9.3)
@@ -58,8 +58,8 @@ importers:
         specifier: ^9.39.2
         version: 9.39.2
       '@types/node':
-        specifier: ^25.0.3
-        version: 25.0.3
+        specifier: ^25.0.6
+        version: 25.0.6
       eslint:
         specifier: ^9.39.2
         version: 9.39.2(jiti@2.6.1)
@@ -71,16 +71,16 @@ importers:
         version: 5.5.4(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))(prettier@3.7.4)
       eslint-plugin-vue:
         specifier: ^10.6.2
-        version: 10.6.2(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.39.2(jiti@2.6.1)))
+        version: 10.6.2(@typescript-eslint/parser@8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.39.2(jiti@2.6.1)))
       globals:
-        specifier: ^16.5.0
-        version: 16.5.0
+        specifier: ^17.0.0
+        version: 17.0.0
       prettier:
         specifier: ^3.7.4
         version: 3.7.4
       typescript-eslint:
-        specifier: ^8.51.0
-        version: 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        specifier: ^8.52.0
+        version: 8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       vue-eslint-parser:
         specifier: ^10.2.0
         version: 10.2.0(eslint@9.39.2(jiti@2.6.1))
@@ -717,8 +717,8 @@ packages:
       search-insights:
         optional: true
 
-  '@emnapi/runtime@1.7.1':
-    resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
+  '@emnapi/runtime@1.8.1':
+    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
 
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
@@ -1014,12 +1014,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.9.0':
-    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
   '@eslint-community/eslint-utils@4.9.1':
     resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1074,8 +1068,8 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@iconify-json/simple-icons@1.2.63':
-    resolution: {integrity: sha512-xZl2UWCwE58VlqZ+pDPmaUhE2tq8MVSTJRr4/9nzzHlDdjJ0Ud1VxNXPrwTSgESKY29iCQw3S0r2nJTSNNngHw==}
+  '@iconify-json/simple-icons@1.2.65':
+    resolution: {integrity: sha512-v/O0UeqrDz6ASuRVE5g2Puo5aWyej4M/CxX6WYDBARgswwxK0mp3VQbGgPFEAAUU9QN02IjTgjMuO021gpWf2w==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@@ -1281,113 +1275,128 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.54.0':
-    resolution: {integrity: sha512-OywsdRHrFvCdvsewAInDKCNyR3laPA2mc9bRYJ6LBp5IyvF3fvXbbNR0bSzHlZVFtn6E0xw2oZlyjg4rKCVcng==}
+  '@rollup/rollup-android-arm-eabi@4.55.1':
+    resolution: {integrity: sha512-9R0DM/ykwfGIlNu6+2U09ga0WXeZ9MRC2Ter8jnz8415VbuIykVuc6bhdrbORFZANDmTDvq26mJrEVTl8TdnDg==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.54.0':
-    resolution: {integrity: sha512-Skx39Uv+u7H224Af+bDgNinitlmHyQX1K/atIA32JP3JQw6hVODX5tkbi2zof/E69M1qH2UoN3Xdxgs90mmNYw==}
+  '@rollup/rollup-android-arm64@4.55.1':
+    resolution: {integrity: sha512-eFZCb1YUqhTysgW3sj/55du5cG57S7UTNtdMjCW7LwVcj3dTTcowCsC8p7uBdzKsZYa8J7IDE8lhMI+HX1vQvg==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.54.0':
-    resolution: {integrity: sha512-k43D4qta/+6Fq+nCDhhv9yP2HdeKeP56QrUUTW7E6PhZP1US6NDqpJj4MY0jBHlJivVJD5P8NxrjuobZBJTCRw==}
+  '@rollup/rollup-darwin-arm64@4.55.1':
+    resolution: {integrity: sha512-p3grE2PHcQm2e8PSGZdzIhCKbMCw/xi9XvMPErPhwO17vxtvCN5FEA2mSLgmKlCjHGMQTP6phuQTYWUnKewwGg==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.54.0':
-    resolution: {integrity: sha512-cOo7biqwkpawslEfox5Vs8/qj83M/aZCSSNIWpVzfU2CYHa2G3P1UN5WF01RdTHSgCkri7XOlTdtk17BezlV3A==}
+  '@rollup/rollup-darwin-x64@4.55.1':
+    resolution: {integrity: sha512-rDUjG25C9qoTm+e02Esi+aqTKSBYwVTaoS1wxcN47/Luqef57Vgp96xNANwt5npq9GDxsH7kXxNkJVEsWEOEaQ==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.54.0':
-    resolution: {integrity: sha512-miSvuFkmvFbgJ1BevMa4CPCFt5MPGw094knM64W9I0giUIMMmRYcGW/JWZDriaw/k1kOBtsWh1z6nIFV1vPNtA==}
+  '@rollup/rollup-freebsd-arm64@4.55.1':
+    resolution: {integrity: sha512-+JiU7Jbp5cdxekIgdte0jfcu5oqw4GCKr6i3PJTlXTCU5H5Fvtkpbs4XJHRmWNXF+hKmn4v7ogI5OQPaupJgOg==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.54.0':
-    resolution: {integrity: sha512-KGXIs55+b/ZfZsq9aR026tmr/+7tq6VG6MsnrvF4H8VhwflTIuYh+LFUlIsRdQSgrgmtM3fVATzEAj4hBQlaqQ==}
+  '@rollup/rollup-freebsd-x64@4.55.1':
+    resolution: {integrity: sha512-V5xC1tOVWtLLmr3YUk2f6EJK4qksksOYiz/TCsFHu/R+woubcLWdC9nZQmwjOAbmExBIVKsm1/wKmEy4z4u4Bw==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.54.0':
-    resolution: {integrity: sha512-EHMUcDwhtdRGlXZsGSIuXSYwD5kOT9NVnx9sqzYiwAc91wfYOE1g1djOEDseZJKKqtHAHGwnGPQu3kytmfaXLQ==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.55.1':
+    resolution: {integrity: sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.54.0':
-    resolution: {integrity: sha512-+pBrqEjaakN2ySv5RVrj/qLytYhPKEUwk+e3SFU5jTLHIcAtqh2rLrd/OkbNuHJpsBgxsD8ccJt5ga/SeG0JmA==}
+  '@rollup/rollup-linux-arm-musleabihf@4.55.1':
+    resolution: {integrity: sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.54.0':
-    resolution: {integrity: sha512-NSqc7rE9wuUaRBsBp5ckQ5CVz5aIRKCwsoa6WMF7G01sX3/qHUw/z4pv+D+ahL1EIKy6Enpcnz1RY8pf7bjwng==}
+  '@rollup/rollup-linux-arm64-gnu@4.55.1':
+    resolution: {integrity: sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.54.0':
-    resolution: {integrity: sha512-gr5vDbg3Bakga5kbdpqx81m2n9IX8M6gIMlQQIXiLTNeQW6CucvuInJ91EuCJ/JYvc+rcLLsDFcfAD1K7fMofg==}
+  '@rollup/rollup-linux-arm64-musl@4.55.1':
+    resolution: {integrity: sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-loong64-gnu@4.54.0':
-    resolution: {integrity: sha512-gsrtB1NA3ZYj2vq0Rzkylo9ylCtW/PhpLEivlgWe0bpgtX5+9j9EZa0wtZiCjgu6zmSeZWyI/e2YRX1URozpIw==}
+  '@rollup/rollup-linux-loong64-gnu@4.55.1':
+    resolution: {integrity: sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.55.1':
+    resolution: {integrity: sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw==}
     cpu: [loong64]
     os: [linux]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.54.0':
-    resolution: {integrity: sha512-y3qNOfTBStmFNq+t4s7Tmc9hW2ENtPg8FeUD/VShI7rKxNW7O4fFeaYbMsd3tpFlIg1Q8IapFgy7Q9i2BqeBvA==}
+  '@rollup/rollup-linux-ppc64-gnu@4.55.1':
+    resolution: {integrity: sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.54.0':
-    resolution: {integrity: sha512-89sepv7h2lIVPsFma8iwmccN7Yjjtgz0Rj/Ou6fEqg3HDhpCa+Et+YSufy27i6b0Wav69Qv4WBNl3Rs6pwhebQ==}
+  '@rollup/rollup-linux-ppc64-musl@4.55.1':
+    resolution: {integrity: sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.55.1':
+    resolution: {integrity: sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-musl@4.54.0':
-    resolution: {integrity: sha512-ZcU77ieh0M2Q8Ur7D5X7KvK+UxbXeDHwiOt/CPSBTI1fBmeDMivW0dPkdqkT4rOgDjrDDBUed9x4EgraIKoR2A==}
+  '@rollup/rollup-linux-riscv64-musl@4.55.1':
+    resolution: {integrity: sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.54.0':
-    resolution: {integrity: sha512-2AdWy5RdDF5+4YfG/YesGDDtbyJlC9LHmL6rZw6FurBJ5n4vFGupsOBGfwMRjBYH7qRQowT8D/U4LoSvVwOhSQ==}
+  '@rollup/rollup-linux-s390x-gnu@4.55.1':
+    resolution: {integrity: sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.54.0':
-    resolution: {integrity: sha512-WGt5J8Ij/rvyqpFexxk3ffKqqbLf9AqrTBbWDk7ApGUzaIs6V+s2s84kAxklFwmMF/vBNGrVdYgbblCOFFezMQ==}
+  '@rollup/rollup-linux-x64-gnu@4.55.1':
+    resolution: {integrity: sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.54.0':
-    resolution: {integrity: sha512-JzQmb38ATzHjxlPHuTH6tE7ojnMKM2kYNzt44LO/jJi8BpceEC8QuXYA908n8r3CNuG/B3BV8VR3Hi1rYtmPiw==}
+  '@rollup/rollup-linux-x64-musl@4.55.1':
+    resolution: {integrity: sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-openharmony-arm64@4.54.0':
-    resolution: {integrity: sha512-huT3fd0iC7jigGh7n3q/+lfPcXxBi+om/Rs3yiFxjvSxbSB6aohDFXbWvlspaqjeOh+hx7DDHS+5Es5qRkWkZg==}
+  '@rollup/rollup-openbsd-x64@4.55.1':
+    resolution: {integrity: sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.55.1':
+    resolution: {integrity: sha512-xzm44KgEP11te3S2HCSyYf5zIzWmx3n8HDCc7EE59+lTcswEWNpvMLfd9uJvVX8LCg9QWG67Xt75AuHn4vgsXw==}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rollup/rollup-win32-arm64-msvc@4.54.0':
-    resolution: {integrity: sha512-c2V0W1bsKIKfbLMBu/WGBz6Yci8nJ/ZJdheE0EwB73N3MvHYKiKGs3mVilX4Gs70eGeDaMqEob25Tw2Gb9Nqyw==}
+  '@rollup/rollup-win32-arm64-msvc@4.55.1':
+    resolution: {integrity: sha512-yR6Bl3tMC/gBok5cz/Qi0xYnVbIxGx5Fcf/ca0eB6/6JwOY+SRUcJfI0OpeTpPls7f194as62thCt/2BjxYN8g==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.54.0':
-    resolution: {integrity: sha512-woEHgqQqDCkAzrDhvDipnSirm5vxUXtSKDYTVpZG3nUdW/VVB5VdCYA2iReSj/u3yCZzXID4kuKG7OynPnB3WQ==}
+  '@rollup/rollup-win32-ia32-msvc@4.55.1':
+    resolution: {integrity: sha512-3fZBidchE0eY0oFZBnekYCfg+5wAB0mbpCBuofh5mZuzIU/4jIVkbESmd2dOsFNS78b53CYv3OAtwqkZZmU5nA==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-gnu@4.54.0':
-    resolution: {integrity: sha512-dzAc53LOuFvHwbCEOS0rPbXp6SIhAf2txMP5p6mGyOXXw5mWY8NGGbPMPrs4P1WItkfApDathBj/NzMLUZ9rtQ==}
+  '@rollup/rollup-win32-x64-gnu@4.55.1':
+    resolution: {integrity: sha512-xGGY5pXj69IxKb4yv/POoocPy/qmEGhimy/FoTpTSVju3FYXUQQMFCaZZXJVidsmGxRioZAwpThl/4zX41gRKg==}
     cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.54.0':
-    resolution: {integrity: sha512-hYT5d3YNdSh3mbCU1gwQyPgQd3T2ne0A3KG8KSBdav5TiBg6eInVmV+TeR5uHufiIgSFg0XsOWGW5/RhNcSvPg==}
+  '@rollup/rollup-win32-x64-msvc@4.55.1':
+    resolution: {integrity: sha512-SPEpaL6DX4rmcXtnhdrQYgzQ5W2uW3SCJch88lB2zImhJRhIIK44fkUrgIV/Q8yUNfw5oyZ5vkeQsZLhCb06lw==}
     cpu: [x64]
     os: [win32]
 
@@ -1538,8 +1547,8 @@ packages:
   '@types/mdurl@2.0.0':
     resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
 
-  '@types/node@25.0.3':
-    resolution: {integrity: sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==}
+  '@types/node@25.0.6':
+    resolution: {integrity: sha512-NNu0sjyNxpoiW3YuVFfNz7mxSQ+S4X2G28uqg2s+CzoqoQjLPsWSbsFFyztIAqt2vb8kfEAsJNepMGPTxFDx3Q==}
 
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
@@ -1553,63 +1562,63 @@ packages:
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
-  '@typescript-eslint/eslint-plugin@8.51.0':
-    resolution: {integrity: sha512-XtssGWJvypyM2ytBnSnKtHYOGT+4ZwTnBVl36TA4nRO2f4PRNGz5/1OszHzcZCvcBMh+qb7I06uoCmLTRdR9og==}
+  '@typescript-eslint/eslint-plugin@8.52.0':
+    resolution: {integrity: sha512-okqtOgqu2qmZJ5iN4TWlgfF171dZmx2FzdOv2K/ixL2LZWDStL8+JgQerI2sa8eAEfoydG9+0V96m7V+P8yE1Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.51.0
+      '@typescript-eslint/parser': ^8.52.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.51.0':
-    resolution: {integrity: sha512-3xP4XzzDNQOIqBMWogftkwxhg5oMKApqY0BAflmLZiFYHqyhSOxv/cd/zPQLTcCXr4AkaKb25joocY0BD1WC6A==}
+  '@typescript-eslint/parser@8.52.0':
+    resolution: {integrity: sha512-iIACsx8pxRnguSYhHiMn2PvhvfpopO9FXHyn1mG5txZIsAaB6F0KwbFnUQN3KCiG3Jcuad/Cao2FAs1Wp7vAyg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.51.0':
-    resolution: {integrity: sha512-Luv/GafO07Z7HpiI7qeEW5NW8HUtZI/fo/kE0YbtQEFpJRUuR0ajcWfCE5bnMvL7QQFrmT/odMe8QZww8X2nfQ==}
+  '@typescript-eslint/project-service@8.52.0':
+    resolution: {integrity: sha512-xD0MfdSdEmeFa3OmVqonHi+Cciab96ls1UhIF/qX/O/gPu5KXD0bY9lu33jj04fjzrXHcuvjBcBC+D3SNSadaw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.51.0':
-    resolution: {integrity: sha512-JhhJDVwsSx4hiOEQPeajGhCWgBMBwVkxC/Pet53EpBVs7zHHtayKefw1jtPaNRXpI9RA2uocdmpdfE7T+NrizA==}
+  '@typescript-eslint/scope-manager@8.52.0':
+    resolution: {integrity: sha512-ixxqmmCcc1Nf8S0mS0TkJ/3LKcC8mruYJPOU6Ia2F/zUUR4pApW7LzrpU3JmtePbRUTes9bEqRc1Gg4iyRnDzA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.51.0':
-    resolution: {integrity: sha512-Qi5bSy/vuHeWyir2C8u/uqGMIlIDu8fuiYWv48ZGlZ/k+PRPHtaAu7erpc7p5bzw2WNNSniuxoMSO4Ar6V9OXw==}
+  '@typescript-eslint/tsconfig-utils@8.52.0':
+    resolution: {integrity: sha512-jl+8fzr/SdzdxWJznq5nvoI7qn2tNYV/ZBAEcaFMVXf+K6jmXvAFrgo/+5rxgnL152f//pDEAYAhhBAZGrVfwg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.51.0':
-    resolution: {integrity: sha512-0XVtYzxnobc9K0VU7wRWg1yiUrw4oQzexCG2V2IDxxCxhqBMSMbjB+6o91A+Uc0GWtgjCa3Y8bi7hwI0Tu4n5Q==}
+  '@typescript-eslint/type-utils@8.52.0':
+    resolution: {integrity: sha512-JD3wKBRWglYRQkAtsyGz1AewDu3mTc7NtRjR/ceTyGoPqmdS5oCdx/oZMWD5Zuqmo6/MpsYs0wp6axNt88/2EQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.51.0':
-    resolution: {integrity: sha512-TizAvWYFM6sSscmEakjY3sPqGwxZRSywSsPEiuZF6d5GmGD9Gvlsv0f6N8FvAAA0CD06l3rIcWNbsN1e5F/9Ag==}
+  '@typescript-eslint/types@8.52.0':
+    resolution: {integrity: sha512-LWQV1V4q9V4cT4H5JCIx3481iIFxH1UkVk+ZkGGAV1ZGcjGI9IoFOfg3O6ywz8QqCDEp7Inlg6kovMofsNRaGg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.51.0':
-    resolution: {integrity: sha512-1qNjGqFRmlq0VW5iVlcyHBbCjPB7y6SxpBkrbhNWMy/65ZoncXCEPJxkRZL8McrseNH6lFhaxCIaX+vBuFnRng==}
+  '@typescript-eslint/typescript-estree@8.52.0':
+    resolution: {integrity: sha512-XP3LClsCc0FsTK5/frGjolyADTh3QmsLp6nKd476xNI9CsSsLnmn4f0jrzNoAulmxlmNIpeXuHYeEQv61Q6qeQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.51.0':
-    resolution: {integrity: sha512-11rZYxSe0zabiKaCP2QAwRf/dnmgFgvTmeDTtZvUvXG3UuAdg/GU02NExmmIXzz3vLGgMdtrIosI84jITQOxUA==}
+  '@typescript-eslint/utils@8.52.0':
+    resolution: {integrity: sha512-wYndVMWkweqHpEpwPhwqE2lnD2DxC6WVLupU/DOt/0/v+/+iQbbzO3jOHjmBMnhu0DgLULvOaU4h4pwHYi2oRQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.51.0':
-    resolution: {integrity: sha512-mM/JRQOzhVN1ykejrvwnBRV3+7yTKK8tVANVN3o1O0t0v7o+jqdVu9crPy5Y9dov15TJk/FTIgoUGHrTOVL3Zg==}
+  '@typescript-eslint/visitor-keys@8.52.0':
+    resolution: {integrity: sha512-ink3/Zofus34nmBsPjow63FP5M7IGff0RKAgqR6+CFpdk22M7aLwC9gOcLGYqr7MczLPzZVERW9hRog3O4n1sQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/structured-clone@1.3.0':
@@ -1812,8 +1821,8 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  baseline-browser-mapping@2.9.11:
-    resolution: {integrity: sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==}
+  baseline-browser-mapping@2.9.14:
+    resolution: {integrity: sha512-B0xUquLkiGLgHhpPBqvl7GWegWBUNuujQ6kXd/r1U38ElPT6Ok8KZ8e+FpUGEc2ZoRQUzq/aUnaKFc/svWUGSg==}
     hasBin: true
 
   birpc@2.9.0:
@@ -1856,8 +1865,8 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  caniuse-lite@1.0.30001762:
-    resolution: {integrity: sha512-PxZwGNvH7Ak8WX5iXzoK1KPZttBXNPuaOvI2ZYU7NrlM+d9Ov+TUvlLOBNGzVXAntMSMMlJPd+jY6ovrVjSmUw==}
+  caniuse-lite@1.0.30001763:
+    resolution: {integrity: sha512-mh/dGtq56uN98LlNX9qdbKnzINhX0QzhiWBFEkFfsFO4QyCvL8YegrJAazCwXIeqkIob8BlZPGM3xdnY+sgmvQ==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -2360,8 +2369,8 @@ packages:
     resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  esquery@1.6.0:
-    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
 
   esrecurse@4.3.0:
@@ -2424,8 +2433,8 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
-  focus-trap@7.7.0:
-    resolution: {integrity: sha512-DJJDHpEgoSbP8ZE1MNeU2IzCpfFyFdNZZRilqmfH2XiQsPK6PtD8AfJqWzEBudUQB2yHwZc5iq54rjTaGQ+ljw==}
+  focus-trap@7.7.1:
+    resolution: {integrity: sha512-Pkp8m55GjxBLnhBoT6OXdMvfRr4TjMAKLvFM566zlIryq5plbhaTmLAJWTGR0EkRwLjEte1lCOG9MxF1ipJrOg==}
 
   for-each@0.3.5:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
@@ -2490,8 +2499,8 @@ packages:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
 
-  globals@16.5.0:
-    resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
+  globals@17.0.0:
+    resolution: {integrity: sha512-gv5BeD2EssA793rlFWVPMMCqefTlpusw6/2TbAVMy0FzcG8wKJn4O+NqJ4+XWmmwrayJgw5TzrmWjFgmz1XPqw==}
     engines: {node: '>=18'}
 
   globalthis@1.0.4:
@@ -3052,15 +3061,15 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  preact@10.28.1:
-    resolution: {integrity: sha512-u1/ixq/lVQI0CakKNvLDEcW5zfCjUQfZdK9qqWuIJtsezuyG6pk9TWj75GMuI/EzRSZB/VAE43sNWWZfiy8psw==}
+  preact@10.28.2:
+    resolution: {integrity: sha512-lbteaWGzGHdlIuiJ0l2Jq454m6kcpI1zNje6d8MlGAFlYvP2GO4ibnat7P74Esfz4sPTdM6UxtTwh/d3pwM9JA==}
 
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier-linter-helpers@1.0.0:
-    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+  prettier-linter-helpers@1.0.1:
+    resolution: {integrity: sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==}
     engines: {node: '>=6.0.0'}
 
   prettier@3.7.4:
@@ -3148,8 +3157,8 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
 
-  rollup@4.54.0:
-    resolution: {integrity: sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==}
+  rollup@4.55.1:
+    resolution: {integrity: sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -3352,8 +3361,8 @@ packages:
     resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  tabbable@6.3.0:
-    resolution: {integrity: sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==}
+  tabbable@6.4.0:
+    resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
 
   temp-dir@2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
@@ -3425,8 +3434,8 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
-  typescript-eslint@8.51.0:
-    resolution: {integrity: sha512-jh8ZuM5oEh2PSdyQG9YAEM1TCGuWenLSuSUhf/irbVUNW9O5FhbFVONviN2TgMTBnUmyHv7E56rYnfLZK6TkiA==}
+  typescript-eslint@8.52.0:
+    resolution: {integrity: sha512-atlQQJ2YkO4pfTVQmQ+wvYQwexPDOIgo+RaVcD7gHgzy/IQA+XTyuxNM9M9TVXvttkF7koBHmcwisKdOAf2EcA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -3437,8 +3446,8 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  ufo@1.6.1:
-    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+  ufo@1.6.2:
+    resolution: {integrity: sha512-heMioaxBcG9+Znsda5Q8sQbWnLJSl98AFDXTO80wELWEzX3hordXsTdxrIfMQoO9IY1MEnoGoPjpoKpMj+Yx0Q==}
 
   unbox-primitive@1.1.0:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
@@ -3565,8 +3574,8 @@ packages:
       terser:
         optional: true
 
-  vite@7.3.0:
-    resolution: {integrity: sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==}
+  vite@7.3.1:
+    resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -4581,7 +4590,7 @@ snapshots:
   '@docsearch/js@3.8.2(@algolia/client-search@5.46.2)(search-insights@2.17.3)':
     dependencies:
       '@docsearch/react': 3.8.2(@algolia/client-search@5.46.2)(search-insights@2.17.3)
-      preact: 10.28.1
+      preact: 10.28.2
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/react'
@@ -4600,7 +4609,7 @@ snapshots:
     transitivePeerDependencies:
       - '@algolia/client-search'
 
-  '@emnapi/runtime@1.7.1':
+  '@emnapi/runtime@1.8.1':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -4752,11 +4761,6 @@ snapshots:
   '@esbuild/win32-x64@0.27.2':
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.2(jiti@2.6.1))':
-    dependencies:
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-visitor-keys: 3.4.3
-
   '@eslint-community/eslint-utils@4.9.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
@@ -4814,7 +4818,7 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@iconify-json/simple-icons@1.2.63':
+  '@iconify-json/simple-icons@1.2.65':
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -4892,7 +4896,7 @@ snapshots:
 
   '@img/sharp-wasm32@0.33.5':
     dependencies:
-      '@emnapi/runtime': 1.7.1
+      '@emnapi/runtime': 1.8.1
     optional: true
 
   '@img/sharp-win32-ia32@0.33.5':
@@ -5009,70 +5013,79 @@ snapshots:
     optionalDependencies:
       rollup: 2.79.2
 
-  '@rollup/rollup-android-arm-eabi@4.54.0':
+  '@rollup/rollup-android-arm-eabi@4.55.1':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.55.1':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.54.0':
+  '@rollup/rollup-darwin-arm64@4.55.1':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.54.0':
+  '@rollup/rollup-darwin-x64@4.55.1':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.54.0':
+  '@rollup/rollup-freebsd-arm64@4.55.1':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.54.0':
+  '@rollup/rollup-freebsd-x64@4.55.1':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.54.0':
+  '@rollup/rollup-linux-arm-gnueabihf@4.55.1':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.54.0':
+  '@rollup/rollup-linux-arm-musleabihf@4.55.1':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.54.0':
+  '@rollup/rollup-linux-arm64-gnu@4.55.1':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.54.0':
+  '@rollup/rollup-linux-arm64-musl@4.55.1':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.54.0':
+  '@rollup/rollup-linux-loong64-gnu@4.55.1':
     optional: true
 
-  '@rollup/rollup-linux-loong64-gnu@4.54.0':
+  '@rollup/rollup-linux-loong64-musl@4.55.1':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.54.0':
+  '@rollup/rollup-linux-ppc64-gnu@4.55.1':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.54.0':
+  '@rollup/rollup-linux-ppc64-musl@4.55.1':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.54.0':
+  '@rollup/rollup-linux-riscv64-gnu@4.55.1':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.54.0':
+  '@rollup/rollup-linux-riscv64-musl@4.55.1':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.54.0':
+  '@rollup/rollup-linux-s390x-gnu@4.55.1':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.54.0':
+  '@rollup/rollup-linux-x64-gnu@4.55.1':
     optional: true
 
-  '@rollup/rollup-openharmony-arm64@4.54.0':
+  '@rollup/rollup-linux-x64-musl@4.55.1':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.54.0':
+  '@rollup/rollup-openbsd-x64@4.55.1':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.54.0':
+  '@rollup/rollup-openharmony-arm64@4.55.1':
     optional: true
 
-  '@rollup/rollup-win32-x64-gnu@4.54.0':
+  '@rollup/rollup-win32-arm64-msvc@4.55.1':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.54.0':
+  '@rollup/rollup-win32-ia32-msvc@4.55.1':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.55.1':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.55.1':
     optional: true
 
   '@shikijs/core@2.5.0':
@@ -5264,7 +5277,7 @@ snapshots:
 
   '@types/mdurl@2.0.0': {}
 
-  '@types/node@25.0.3':
+  '@types/node@25.0.6':
     dependencies:
       undici-types: 7.16.0
 
@@ -5276,14 +5289,14 @@ snapshots:
 
   '@types/web-bluetooth@0.0.21': {}
 
-  '@typescript-eslint/eslint-plugin@8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.52.0(@typescript-eslint/parser@8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.51.0
-      '@typescript-eslint/type-utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.51.0
+      '@typescript-eslint/parser': 8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.52.0
+      '@typescript-eslint/type-utils': 8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.52.0
       eslint: 9.39.2(jiti@2.6.1)
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -5292,41 +5305,41 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.51.0
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.51.0
+      '@typescript-eslint/scope-manager': 8.52.0
+      '@typescript-eslint/types': 8.52.0
+      '@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.52.0
       debug: 4.4.3
       eslint: 9.39.2(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.51.0(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.52.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/tsconfig-utils': 8.52.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.52.0
       debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.51.0':
+  '@typescript-eslint/scope-manager@8.52.0':
     dependencies:
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/visitor-keys': 8.51.0
+      '@typescript-eslint/types': 8.52.0
+      '@typescript-eslint/visitor-keys': 8.52.0
 
-  '@typescript-eslint/tsconfig-utils@8.51.0(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.52.0(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.52.0
+      '@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       debug: 4.4.3
       eslint: 9.39.2(jiti@2.6.1)
       ts-api-utils: 2.4.0(typescript@5.9.3)
@@ -5334,14 +5347,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.51.0': {}
+  '@typescript-eslint/types@8.52.0': {}
 
-  '@typescript-eslint/typescript-estree@8.51.0(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.52.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/visitor-keys': 8.51.0
+      '@typescript-eslint/project-service': 8.52.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.52.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.52.0
+      '@typescript-eslint/visitor-keys': 8.52.0
       debug: 4.4.3
       minimatch: 9.0.5
       semver: 7.7.3
@@ -5351,20 +5364,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.51.0
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.52.0
+      '@typescript-eslint/types': 8.52.0
+      '@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
       eslint: 9.39.2(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.51.0':
+  '@typescript-eslint/visitor-keys@8.52.0':
     dependencies:
-      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/types': 8.52.0
       eslint-visitor-keys: 4.2.1
 
   '@ungap/structured-clone@1.3.0': {}
@@ -5378,15 +5391,15 @@ snapshots:
       sharp-ico: 0.1.5
       unconfig: 7.4.2
 
-  '@vite-pwa/vitepress@1.1.0(@vite-pwa/assets-generator@1.0.2)(vite-plugin-pwa@1.2.0(@vite-pwa/assets-generator@1.0.2)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0))':
+  '@vite-pwa/vitepress@1.1.0(@vite-pwa/assets-generator@1.0.2)(vite-plugin-pwa@1.2.0(@vite-pwa/assets-generator@1.0.2)(vite@7.3.1(@types/node@25.0.6)(jiti@2.6.1)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0))':
     dependencies:
-      vite-plugin-pwa: 1.2.0(@vite-pwa/assets-generator@1.0.2)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0)
+      vite-plugin-pwa: 1.2.0(@vite-pwa/assets-generator@1.0.2)(vite@7.3.1(@types/node@25.0.6)(jiti@2.6.1)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0)
     optionalDependencies:
       '@vite-pwa/assets-generator': 1.0.2
 
-  '@vitejs/plugin-vue@5.2.4(vite@5.4.21(@types/node@25.0.3)(terser@5.44.1))(vue@3.5.26(typescript@5.9.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@5.4.21(@types/node@25.0.6)(terser@5.44.1))(vue@3.5.26(typescript@5.9.3))':
     dependencies:
-      vite: 5.4.21(@types/node@25.0.3)(terser@5.44.1)
+      vite: 5.4.21(@types/node@25.0.6)(terser@5.44.1)
       vue: 3.5.26(typescript@5.9.3)
 
   '@vue/compiler-core@3.5.26':
@@ -5470,13 +5483,13 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/integrations@12.8.2(focus-trap@7.7.0)(typescript@5.9.3)':
+  '@vueuse/integrations@12.8.2(focus-trap@7.7.1)(typescript@5.9.3)':
     dependencies:
       '@vueuse/core': 12.8.2(typescript@5.9.3)
       '@vueuse/shared': 12.8.2(typescript@5.9.3)
       vue: 3.5.26(typescript@5.9.3)
     optionalDependencies:
-      focus-trap: 7.7.0
+      focus-trap: 7.7.1
     transitivePeerDependencies:
       - typescript
 
@@ -5592,7 +5605,7 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
-  baseline-browser-mapping@2.9.11: {}
+  baseline-browser-mapping@2.9.14: {}
 
   birpc@2.9.0: {}
 
@@ -5609,8 +5622,8 @@ snapshots:
 
   browserslist@4.28.1:
     dependencies:
-      baseline-browser-mapping: 2.9.11
-      caniuse-lite: 1.0.30001762
+      baseline-browser-mapping: 2.9.14
+      caniuse-lite: 1.0.30001763
       electron-to-chromium: 1.5.267
       node-releases: 2.0.27
       update-browserslist-db: 1.2.3(browserslist@4.28.1)
@@ -5638,7 +5651,7 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  caniuse-lite@1.0.30001762: {}
+  caniuse-lite@1.0.30001763: {}
 
   ccount@2.0.1: {}
 
@@ -6207,14 +6220,14 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
       prettier: 3.7.4
-      prettier-linter-helpers: 1.0.0
+      prettier-linter-helpers: 1.0.1
       synckit: 0.11.11
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1))
 
-  eslint-plugin-vue@10.6.2(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.39.2(jiti@2.6.1))):
+  eslint-plugin-vue@10.6.2(@typescript-eslint/parser@8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.39.2(jiti@2.6.1))):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
       eslint: 9.39.2(jiti@2.6.1)
       natural-compare: 1.4.0
       nth-check: 2.1.1
@@ -6223,7 +6236,7 @@ snapshots:
       vue-eslint-parser: 10.2.0(eslint@9.39.2(jiti@2.6.1))
       xml-name-validator: 4.0.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
   eslint-scope@8.4.0:
     dependencies:
@@ -6236,7 +6249,7 @@ snapshots:
 
   eslint@9.39.2(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.2
       '@eslint/config-array': 0.21.1
       '@eslint/config-helpers': 0.4.2
@@ -6256,7 +6269,7 @@ snapshots:
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
-      esquery: 1.6.0
+      esquery: 1.7.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 8.0.0
@@ -6283,7 +6296,7 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.15.0)
       eslint-visitor-keys: 4.2.1
 
-  esquery@1.6.0:
+  esquery@1.7.0:
     dependencies:
       estraverse: 5.3.0
 
@@ -6333,9 +6346,9 @@ snapshots:
 
   flatted@3.3.3: {}
 
-  focus-trap@7.7.0:
+  focus-trap@7.7.1:
     dependencies:
-      tabbable: 6.3.0
+      tabbable: 6.4.0
 
   for-each@0.3.5:
     dependencies:
@@ -6414,7 +6427,7 @@ snapshots:
 
   globals@14.0.0: {}
 
-  globals@16.5.0: {}
+  globals@17.0.0: {}
 
   globalthis@1.0.4:
     dependencies:
@@ -6854,7 +6867,7 @@ snapshots:
       acorn: 8.15.0
       pathe: 2.0.3
       pkg-types: 1.3.1
-      ufo: 1.6.1
+      ufo: 1.6.2
 
   ms@2.1.3: {}
 
@@ -6980,11 +6993,11 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  preact@10.28.1: {}
+  preact@10.28.2: {}
 
   prelude-ls@1.2.1: {}
 
-  prettier-linter-helpers@1.0.0:
+  prettier-linter-helpers@1.0.1:
     dependencies:
       fast-diff: 1.3.0
 
@@ -7073,32 +7086,35 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  rollup@4.54.0:
+  rollup@4.55.1:
     dependencies:
       '@types/estree': 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.54.0
-      '@rollup/rollup-android-arm64': 4.54.0
-      '@rollup/rollup-darwin-arm64': 4.54.0
-      '@rollup/rollup-darwin-x64': 4.54.0
-      '@rollup/rollup-freebsd-arm64': 4.54.0
-      '@rollup/rollup-freebsd-x64': 4.54.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.54.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.54.0
-      '@rollup/rollup-linux-arm64-gnu': 4.54.0
-      '@rollup/rollup-linux-arm64-musl': 4.54.0
-      '@rollup/rollup-linux-loong64-gnu': 4.54.0
-      '@rollup/rollup-linux-ppc64-gnu': 4.54.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.54.0
-      '@rollup/rollup-linux-riscv64-musl': 4.54.0
-      '@rollup/rollup-linux-s390x-gnu': 4.54.0
-      '@rollup/rollup-linux-x64-gnu': 4.54.0
-      '@rollup/rollup-linux-x64-musl': 4.54.0
-      '@rollup/rollup-openharmony-arm64': 4.54.0
-      '@rollup/rollup-win32-arm64-msvc': 4.54.0
-      '@rollup/rollup-win32-ia32-msvc': 4.54.0
-      '@rollup/rollup-win32-x64-gnu': 4.54.0
-      '@rollup/rollup-win32-x64-msvc': 4.54.0
+      '@rollup/rollup-android-arm-eabi': 4.55.1
+      '@rollup/rollup-android-arm64': 4.55.1
+      '@rollup/rollup-darwin-arm64': 4.55.1
+      '@rollup/rollup-darwin-x64': 4.55.1
+      '@rollup/rollup-freebsd-arm64': 4.55.1
+      '@rollup/rollup-freebsd-x64': 4.55.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.55.1
+      '@rollup/rollup-linux-arm-musleabihf': 4.55.1
+      '@rollup/rollup-linux-arm64-gnu': 4.55.1
+      '@rollup/rollup-linux-arm64-musl': 4.55.1
+      '@rollup/rollup-linux-loong64-gnu': 4.55.1
+      '@rollup/rollup-linux-loong64-musl': 4.55.1
+      '@rollup/rollup-linux-ppc64-gnu': 4.55.1
+      '@rollup/rollup-linux-ppc64-musl': 4.55.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.55.1
+      '@rollup/rollup-linux-riscv64-musl': 4.55.1
+      '@rollup/rollup-linux-s390x-gnu': 4.55.1
+      '@rollup/rollup-linux-x64-gnu': 4.55.1
+      '@rollup/rollup-linux-x64-musl': 4.55.1
+      '@rollup/rollup-openbsd-x64': 4.55.1
+      '@rollup/rollup-openharmony-arm64': 4.55.1
+      '@rollup/rollup-win32-arm64-msvc': 4.55.1
+      '@rollup/rollup-win32-ia32-msvc': 4.55.1
+      '@rollup/rollup-win32-x64-gnu': 4.55.1
+      '@rollup/rollup-win32-x64-msvc': 4.55.1
       fsevents: 2.3.3
 
   roughjs@4.6.6:
@@ -7372,7 +7388,7 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.2.9
 
-  tabbable@6.3.0: {}
+  tabbable@6.4.0: {}
 
   temp-dir@2.0.0: {}
 
@@ -7454,12 +7470,12 @@ snapshots:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
-  typescript-eslint@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
+  typescript-eslint@8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.52.0(@typescript-eslint/parser@8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.52.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.39.2(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -7467,7 +7483,7 @@ snapshots:
 
   typescript@5.9.3: {}
 
-  ufo@1.6.1: {}
+  ufo@1.6.2: {}
 
   unbox-primitive@1.1.0:
     dependencies:
@@ -7559,12 +7575,12 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite-plugin-pwa@1.2.0(@vite-pwa/assets-generator@1.0.2)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0):
+  vite-plugin-pwa@1.2.0(@vite-pwa/assets-generator@1.0.2)(vite@7.3.1(@types/node@25.0.6)(jiti@2.6.1)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0):
     dependencies:
       debug: 4.4.3
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.15
-      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(terser@5.44.1)
+      vite: 7.3.1(@types/node@25.0.6)(jiti@2.6.1)(terser@5.44.1)
       workbox-build: 7.4.0
       workbox-window: 7.4.0
     optionalDependencies:
@@ -7572,56 +7588,56 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.4.21(@types/node@25.0.3)(terser@5.44.1):
+  vite@5.4.21(@types/node@25.0.6)(terser@5.44.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.6
-      rollup: 4.54.0
+      rollup: 4.55.1
     optionalDependencies:
-      '@types/node': 25.0.3
+      '@types/node': 25.0.6
       fsevents: 2.3.3
       terser: 5.44.1
 
-  vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(terser@5.44.1):
+  vite@7.3.1(@types/node@25.0.6)(jiti@2.6.1)(terser@5.44.1):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
       postcss: 8.5.6
-      rollup: 4.54.0
+      rollup: 4.55.1
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 25.0.3
+      '@types/node': 25.0.6
       fsevents: 2.3.3
       jiti: 2.6.1
       terser: 5.44.1
 
-  vitepress-plugin-mermaid@2.0.17(mermaid@11.12.2)(vitepress@1.6.4(@algolia/client-search@5.46.2)(@types/node@25.0.3)(markdown-it-mathjax3@4.3.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3)):
+  vitepress-plugin-mermaid@2.0.17(mermaid@11.12.2)(vitepress@1.6.4(@algolia/client-search@5.46.2)(@types/node@25.0.6)(markdown-it-mathjax3@4.3.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3)):
     dependencies:
       mermaid: 11.12.2
-      vitepress: 1.6.4(@algolia/client-search@5.46.2)(@types/node@25.0.3)(markdown-it-mathjax3@4.3.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3)
+      vitepress: 1.6.4(@algolia/client-search@5.46.2)(@types/node@25.0.6)(markdown-it-mathjax3@4.3.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3)
     optionalDependencies:
       '@mermaid-js/mermaid-mindmap': 9.3.0
 
-  vitepress@1.6.4(@algolia/client-search@5.46.2)(@types/node@25.0.3)(markdown-it-mathjax3@4.3.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3):
+  vitepress@1.6.4(@algolia/client-search@5.46.2)(@types/node@25.0.6)(markdown-it-mathjax3@4.3.2)(postcss@8.5.6)(search-insights@2.17.3)(terser@5.44.1)(typescript@5.9.3):
     dependencies:
       '@docsearch/css': 3.8.2
       '@docsearch/js': 3.8.2(@algolia/client-search@5.46.2)(search-insights@2.17.3)
-      '@iconify-json/simple-icons': 1.2.63
+      '@iconify-json/simple-icons': 1.2.65
       '@shikijs/core': 2.5.0
       '@shikijs/transformers': 2.5.0
       '@shikijs/types': 2.5.0
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.2.4(vite@5.4.21(@types/node@25.0.3)(terser@5.44.1))(vue@3.5.26(typescript@5.9.3))
+      '@vitejs/plugin-vue': 5.2.4(vite@5.4.21(@types/node@25.0.6)(terser@5.44.1))(vue@3.5.26(typescript@5.9.3))
       '@vue/devtools-api': 7.7.9
       '@vue/shared': 3.5.26
       '@vueuse/core': 12.8.2(typescript@5.9.3)
-      '@vueuse/integrations': 12.8.2(focus-trap@7.7.0)(typescript@5.9.3)
-      focus-trap: 7.7.0
+      '@vueuse/integrations': 12.8.2(focus-trap@7.7.1)(typescript@5.9.3)
+      focus-trap: 7.7.1
       mark.js: 8.11.1
       minisearch: 7.2.0
       shiki: 2.5.0
-      vite: 5.4.21(@types/node@25.0.3)(terser@5.44.1)
+      vite: 5.4.21(@types/node@25.0.6)(terser@5.44.1)
       vue: 3.5.26(typescript@5.9.3)
     optionalDependencies:
       markdown-it-mathjax3: 4.3.2
@@ -7677,7 +7693,7 @@ snapshots:
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
-      esquery: 1.6.0
+      esquery: 1.7.0
       semver: 7.7.3
     transitivePeerDependencies:
       - supports-color
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 00000000..dbb26c82
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+allowBuilds:
+  esbuild: true
+  sharp: true