docs: 介绍页改为 Markdown 式排版并精简文案，配置要求改为最低 / 推荐对照表

docs/css/style.css

@@ -1529,6 +1529,10 @@ html.has-toc { scroll-padding-top: calc(var(--pg-header-h) + 3.5rem); }
     margin-top: 0;
   }
   .table-wrap td:has(> .badge:only-child)::before { display: none; }
+  /* 最低 / 推荐对照表：卡片里两栏并排，一眼对比 */
+  .table-wrap table[data-keep-labels] tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .table-wrap table[data-keep-labels] tbody tr > th { grid-column: 1 / -1; }
+  .table-wrap table[data-keep-labels] tbody tr > td { grid-column: auto; grid-row: 2; margin-top: var(--pg-space-2); }
   /* 数字列（行数等）同样放到标题右边，条形图缩短后跟在数字上方 */
   .table-wrap tbody tr > td.num {
     grid-column: 2;
@@ -1544,6 +1548,167 @@ html.has-toc { scroll-padding-top: calc(var(--pg-header-h) + 3.5rem); }
   .table-wrap td.num { text-align: left; }
 }
 
+/* ---------- 文档式正文（介绍页）：排版像渲染后的 Markdown ----------
+   左边吸顶目录，右边单栏文章。只用标题、段落、列表、表格和提示块，不用卡片网格。 */
+.doc-section { padding-block: var(--pg-space-8) var(--pg-space-9); }
+.doc {
+  display: grid;
+  grid-template-columns: 12.5rem minmax(0, 46rem);
+  gap: var(--pg-space-8);
+  justify-content: center;
+  align-items: start;
+}
+.doc-toc-title { display: none; }
+
+.prose {
+  min-width: 0;
+  font-size: 1.03125rem;
+  line-height: 1.85;
+  color: var(--pg-fg-2);
+}
+.prose > * + * { margin-top: var(--pg-space-4); }
+.prose > :first-child { margin-top: 0; }
+.prose h2 {
+  margin-top: var(--pg-space-8);
+  padding-bottom: var(--pg-space-3);
+  font-size: var(--pg-text-xl);
+  line-height: var(--pg-leading-tight);
+  letter-spacing: -0.02em;
+  border-bottom: var(--pg-hairline) solid var(--pg-line-2);
+}
+.prose h3 {
+  margin-top: var(--pg-space-6);
+  font-size: var(--pg-text-lg);
+  letter-spacing: -0.01em;
+}
+/* 标题前的 # / ## 只是装饰，读屏时忽略（content 的 / "" 是替代文本） */
+.prose h2::before,
+.prose h3::before {
+  content: "#";
+  content: "#" / "";
+  margin-right: 0.45em;
+  font-family: var(--pg-font-mono);
+  font-weight: 500;
+  color: var(--pg-brand);
+}
+.prose h3::before { content: "##"; content: "##" / ""; color: var(--pg-fg-3); }
+.prose h2 + *,
+.prose h3 + * { margin-top: var(--pg-space-3); }
+.prose strong { font-weight: 650; color: var(--pg-fg-1); }
+.prose a { text-decoration-color: var(--pg-line-strong); }
+.prose a:hover { text-decoration-color: currentColor; }
+
+.prose ul,
+.prose ol { padding-left: 1.5rem; list-style: none; }
+.prose li { position: relative; }
+.prose li + li { margin-top: var(--pg-space-2); }
+.prose ul > li::before {
+  content: "-";
+  content: "-" / "";
+  position: absolute;
+  left: -1.25rem;
+  font-family: var(--pg-font-mono);
+  font-weight: 700;
+  color: var(--pg-brand);
+}
+.prose ol { counter-reset: md; }
+.prose ol > li { counter-increment: md; }
+.prose ol > li::before {
+  content: counter(md) ".";
+  position: absolute;
+  left: -1.5rem;
+  font-family: var(--pg-font-mono);
+  font-size: var(--pg-text-sm);
+  font-weight: 700;
+  color: var(--pg-brand);
+}
+
+/* 提示块：GitHub 风格，左侧一条色条 */
+.prose .notice {
+  padding: var(--pg-space-3) var(--pg-space-4);
+  background: var(--pg-accent-soft);
+  border: 0;
+  border-left: 0.25rem solid var(--pg-brand);
+  border-radius: var(--pg-radius);
+  box-shadow: none;
+}
+.prose .notice-warn { background: var(--pg-warn-bg); border-left-color: var(--pg-warn-fg); }
+.prose .notice p { font-size: var(--pg-text-sm); }
+
+/* 表格：Markdown 表格的样子，带边框和隔行底色（手机上仍是堆叠卡片） */
+@media (min-width: 48.01rem) {
+  .prose .table-wrap {
+    padding: 0;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .prose table { font-size: var(--pg-text-sm); }
+  .prose :is(th, td),
+  .prose tbody tr:last-child > * {
+    padding: var(--pg-space-2) var(--pg-space-4);
+    border: var(--pg-hairline) solid var(--pg-line-2);
+  }
+  .prose thead th { color: var(--pg-fg-1); background: var(--pg-bg-sunken); }
+  .prose tbody tr:nth-child(even) { background: var(--pg-bg-sunken); }
+  .prose tbody tr:hover { background: var(--pg-accent-soft); }
+}
+
+/* 电脑：目录是左侧的竖排列表，当前小节左边亮一条品牌色 */
+@media (min-width: 62.01rem) {
+  .doc > .doc-toc {
+    position: sticky;
+    top: calc(var(--pg-header-h) + var(--pg-space-5));
+    background: none;
+    border: 0;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+  .site-header.is-hidden ~ main .doc > .doc-toc { top: var(--pg-space-5); }
+  .doc-toc-title {
+    display: block;
+    margin-bottom: var(--pg-space-3);
+    font-family: var(--pg-font-mono);
+    font-size: var(--pg-text-2xs);
+    letter-spacing: var(--pg-tracking-label);
+    text-transform: uppercase;
+    color: var(--pg-fg-3);
+  }
+  .doc-toc ul {
+    flex-direction: column;
+    gap: 0;
+    padding: 0;
+    overflow: visible;
+    border-left: var(--pg-hairline) solid var(--pg-line-2);
+  }
+  .doc-toc a,
+  .doc-toc a:hover,
+  .doc-toc a[aria-current] {
+    margin-left: -1px;
+    padding: 0.375rem 0 0.375rem var(--pg-space-4);
+    font-size: var(--pg-text-sm);
+    white-space: normal;
+    background: none;
+    border: 0;
+    border-left: var(--pg-stroke) solid transparent;
+    border-radius: 0;
+  }
+  .doc-toc a:hover { color: var(--pg-fg-1); border-left-color: var(--pg-line-strong); }
+  .doc-toc a[aria-current] { color: var(--pg-fg-1); border-left-color: var(--pg-brand); }
+}
+/* 平板和手机：单栏，目录变成顶部横向的目录条 */
+@media (max-width: 62rem) {
+  .doc { grid-template-columns: minmax(0, 1fr); gap: var(--pg-space-6); }
+  .doc > .doc-toc { margin-inline: calc(var(--pg-space-5) * -1); }
+}
+@media (max-width: 56rem) {
+  .doc > .doc-toc { margin-inline: calc(var(--pg-space-4) * -1); }
+  .doc-section { padding-block: var(--pg-space-6) var(--pg-space-8); }
+  .prose { font-size: var(--pg-text-md); }
+  .prose h2 { margin-top: var(--pg-space-7); }
+}
+
 /* 用户要求减少动态效果时，关掉所有装饰性动画与过渡 */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {

docs/index.html

@@ -7,7 +7,7 @@
   <title>GoutouStdio</title>
   <!-- head:start -->
   <link rel="stylesheet" href="css/tokens.css?v=87f53e71">
-  <link rel="stylesheet" href="css/style.css?v=a25c6458">
+  <link rel="stylesheet" href="css/style.css?v=28bae9f1">
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23d97757'/%3E%3Ctext x='32' y='44' font-size='34' font-weight='700' text-anchor='middle' fill='%23faf9f5' font-family='Georgia,serif'%3EG%3C/text%3E%3C/svg%3E">
   <!-- head:end -->
 </head>
@@ -239,7 +239,7 @@ <h2 class="footer-title">存档</h2>
       </div>
     </div>
   </footer>
-  <script src="js/main.js?v=182b2eeb"></script>
+  <script src="js/main.js?v=1fc349d9"></script>
   <script src="js/vendor/gsap.min.js?v=b2cff385"></script>
   <script src="js/vendor/ScrollTrigger.min.js?v=c07f2876"></script>
   <script src="js/vendor/SplitText.min.js?v=ac0878d9"></script>

docs/js/main.js

@@ -145,7 +145,7 @@
           totals[i] = (totals[i] || 0) + cell.textContent.trim().length;
         });
       });
-      var main = totals.indexOf(Math.max.apply(null, totals));
+      var main = table.hasAttribute("data-keep-labels") ? -1 : totals.indexOf(Math.max.apply(null, totals));
       rows.forEach(function (tr) {
         Array.prototype.forEach.call(tr.children, function (cell, i) {
           var label = heads[i] && heads[i].textContent.trim();
@@ -196,6 +196,7 @@
 
   function initFold() {
     document.querySelectorAll("main .table-wrap:not([data-nofold]) table").forEach(function (table) {
+      if (table.closest(".prose")) return;  // 文档式正文已经精简过，表格全部展开
       var rows = Array.prototype.slice.call(table.querySelectorAll("tbody > tr"));
       makeFold(table, rows, FOLD_ROWS);
     });
@@ -240,6 +241,15 @@
   function initToc() {
     var main = document.querySelector("main");
     if (!main) return;
+    // 文档式页面自带静态目录（没有脚本也能用），这里只负责高亮当前小节
+    var docToc = main.querySelector(".doc-toc");
+    if (docToc) {
+      var docLinks = Array.prototype.slice.call(docToc.querySelectorAll("a[href^='#']"));
+      var targets = docLinks.map(function (a) { return document.getElementById(a.getAttribute("href").slice(1)); });
+      document.documentElement.classList.add("has-toc");
+      spy(docToc.querySelector("ul"), docLinks, targets);
+      return;
+    }
     var sections = Array.prototype.slice.call(main.querySelectorAll(":scope > section.section[id]")).filter(function (s) {
       return s.querySelector("h2");
     });
@@ -263,6 +273,11 @@
     else main.prepend(nav);
     document.documentElement.classList.add("has-toc");
 
+    spy(ul, links, sections);
+  }
+
+  // 滚动时高亮当前小节：目标越过视口上方 40% 的位置就算进入
+  function spy(ul, links, targets) {
     if (!("IntersectionObserver" in window)) return;
     var current = null;
     function activate(a) {
@@ -277,10 +292,10 @@
     }
     var io = new IntersectionObserver(function (entries) {
       entries.forEach(function (e) {
-        if (e.isIntersecting) activate(links[sections.indexOf(e.target)]);
+        if (e.isIntersecting) activate(links[targets.indexOf(e.target)]);
       });
     }, { rootMargin: "-40% 0px -55% 0px" });
-    sections.forEach(function (s) { io.observe(s); });
+    targets.forEach(function (t) { if (t) io.observe(t); });
   }
 
   function init() {

docs/ota/index.html

@@ -7,7 +7,7 @@
   <title>PySpOS 更新包 | GoutouStdio</title>
   <!-- head:start -->
   <link rel="stylesheet" href="../css/tokens.css?v=87f53e71">
-  <link rel="stylesheet" href="../css/style.css?v=a25c6458">
+  <link rel="stylesheet" href="../css/style.css?v=28bae9f1">
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23d97757'/%3E%3Ctext x='32' y='44' font-size='34' font-weight='700' text-anchor='middle' fill='%23faf9f5' font-family='Georgia,serif'%3EG%3C/text%3E%3C/svg%3E">
   <!-- head:end -->
 </head>
@@ -224,7 +224,7 @@ <h2 class="footer-title">存档</h2>
       </div>
     </div>
   </footer>
-  <script src="../js/main.js?v=182b2eeb"></script>
+  <script src="../js/main.js?v=1fc349d9"></script>
   <script src="../js/vendor/gsap.min.js?v=b2cff385"></script>
   <script src="../js/vendor/ScrollTrigger.min.js?v=c07f2876"></script>
   <script src="../js/vendor/SplitText.min.js?v=ac0878d9"></script>

docs/ota/releases.html

@@ -7,7 +7,7 @@
   <title>PySpOS 版本历史 | GoutouStdio</title>
   <!-- head:start -->
   <link rel="stylesheet" href="../css/tokens.css?v=87f53e71">
-  <link rel="stylesheet" href="../css/style.css?v=a25c6458">
+  <link rel="stylesheet" href="../css/style.css?v=28bae9f1">
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23d97757'/%3E%3Ctext x='32' y='44' font-size='34' font-weight='700' text-anchor='middle' fill='%23faf9f5' font-family='Georgia,serif'%3EG%3C/text%3E%3C/svg%3E">
   <!-- head:end -->
 </head>
@@ -154,7 +154,7 @@ <h2 class="footer-title">存档</h2>
       </div>
     </div>
   </footer>
-  <script src="../js/main.js?v=182b2eeb"></script>
+  <script src="../js/main.js?v=1fc349d9"></script>
   <script src="../js/vendor/gsap.min.js?v=b2cff385"></script>
   <script src="../js/vendor/ScrollTrigger.min.js?v=c07f2876"></script>
   <script src="../js/vendor/SplitText.min.js?v=ac0878d9"></script>