完善sidenote

api-v13/resources/css/base/_typography.css

@@ -1,13 +1,33 @@
 /* resources/css/base/_typography.css
-   全站基础排版。
-   Noto Serif 已在 library.css 入口处 @import，此处只设置使用规则。
+   全站基础排版。无副作用，不覆盖组件样式。
+   Noto Serif 字体已在 library.css 入口 @import，此处只声明使用规则。
 */
 
-/* 正文衬线字体作用域由各 module 自行声明（如 .wiki-content-body）。
-   全站默认保持 Tabler 的 sans-serif 体系，不在此全局覆盖。 */
-
-/* 标题基础 */
-h1, h2, h3, h4, h5, h6 {
+/* ── 标题 ── */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     line-height: 1.3;
     font-weight: 600;
 }
+
+/* ── 链接基础 ── */
+a {
+    text-underline-offset: 0.15em;
+    text-decoration-thickness: 0.05em;
+}
+
+/* ── 行内代码 ── */
+code {
+    font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    font-size: 0.875em;
+}
+
+/* ── 图片 ── */
+img {
+    max-width: 100%;
+    height: auto;
+}

api-v13/resources/css/modules/_reader.css

@@ -9,8 +9,10 @@
    ══════════════════════════════════════════ */
 
 body {
-    font-family: "Inter", sans-serif;
-    transition: background-color 0.3s, color 0.3s;
+    font-family: 'Inter', sans-serif;
+    transition:
+        background-color 0.3s,
+        color 0.3s;
 }
 
 /* ══════════════════════════════════════════
@@ -46,13 +48,13 @@ body {
 
 /* ── 正文区（中）── */
 .content-area {
-    flex: 1;            /* 替代原 flex-grow:1，配合 min-width 防止收缩 */
-    min-width: 0;       /* 修复：内容较窄时列不收缩 */
+    flex: 1; /* 替代原 flex-grow:1，配合 min-width 防止收缩 */
+    min-width: 0; /* 修复：内容较窄时列不收缩 */
 }
 
 /* ── 右侧边栏 ── */
 .right-sidebar {
-    width: 220px;       /* 收窄，原 300px 偏宽 */
+    width: 220px; /* 收窄，原 300px 偏宽 */
     flex-shrink: 0;
     display: none;
 }
@@ -158,18 +160,30 @@ body {
     text-decoration: none;
 }
 
-.toc-sidebar ul li a:hover      { text-decoration: none; }
-.offcanvas-body ul li a:hover   { text-decoration: underline; }
+.toc-sidebar ul li a:hover {
+    text-decoration: none;
+}
+.offcanvas-body ul li a:hover {
+    text-decoration: underline;
+}
 
 .dark-mode .toc-sidebar ul li a,
 .dark-mode .offcanvas-body ul li a {
     color: #4dabf7;
 }
 
-.toc-level-1 { padding-left: 0 !important; }
-.toc-level-2 { padding-left: 16px !important; }
-.toc-level-3 { padding-left: 24px !important; }
-.toc-level-4 { padding-left: 36px !important; }
+.toc-level-1 {
+    padding-left: 0 !important;
+}
+.toc-level-2 {
+    padding-left: 16px !important;
+}
+.toc-level-3 {
+    padding-left: 24px !important;
+}
+.toc-level-4 {
+    padding-left: 36px !important;
+}
 
 .toc-disabled {
     color: #6c757d;
@@ -177,7 +191,9 @@ body {
     pointer-events: none;
 }
 
-.dark-mode .toc-disabled { color: #adb5bd; }
+.dark-mode .toc-disabled {
+    color: #adb5bd;
+}
 
 .toc_item {
     white-space: nowrap;
@@ -221,10 +237,6 @@ body {
    六、正文内容
    ══════════════════════════════════════════ */
 
-.origin {
-    color: darkred;
-}
-
 /* 术语引用 */
 .term-ref {
     cursor: pointer;

api-v13/resources/css/reader.css

@@ -3,4 +3,5 @@
    只做 @import，不写任何样式规则。
 */
 
-@import "./modules/_reader.css";
+@import './modules/_reader.css';
+@import './modules/_reader-content.css';

api-v13/resources/css/tufte.css

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 
-/* Import ET Book styles
+/* api-v13/resources/css/tufte.css
+Import ET Book styles
    adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */
 
 /* Tufte CSS styles */
@@ -165,6 +166,10 @@ img {
     line-height: 1.3;
     vertical-align: baseline;
     position: relative;
+    border: 1px solid wheat;
+    padding: 6px;
+    border-radius: 8px;
+    background-color: #f5deb330;
 }
 
 .sidenote-number {
@@ -186,7 +191,7 @@ img {
 }
 
 .sidenote:before {
-    content: counter(sidenote-counter) " ";
+    content: counter(sidenote-counter) ' ';
     font-size: 100%;
     top: -0.5rem;
 }
@@ -205,17 +210,17 @@ table.fullwidth {
 
 div.table-wrapper {
     overflow-x: auto;
-    font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif;
+    font-family: 'Trebuchet MS', 'Gill Sans', 'Gill Sans MT', sans-serif;
 }
 
 .sans {
-    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
     letter-spacing: 0.03em;
 }
 
 code,
 pre > code {
-    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
     font-size: 1rem;
     line-height: 1.42;
     -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */

api-v13/resources/views/library/book/read.blade.php

@@ -10,7 +10,7 @@
 
 {{-- 术语抽屉（所有阅读页统一使用 wiki.term-drawer） --}}
 @push('scripts')
-@vite(['resources/css/tufte.css', 'resources/js/modules/term-tooltip.js'])
+@vite(['resources/js/modules/term-tooltip.js'])
 @endpush
 
 @section('reader-content')
@@ -65,13 +65,15 @@
                 </a>
             </div>
 
-            {{-- 版本切换：desktop 版本在右侧边栏展示，mobile 触发 offcanvas --}}
+            {{-- 版本切换：所有设备统一触发 offcanvas，放在设置右边 --}}
             @if(!empty($channels))
-            <div class="nav-item d-md-none me-2">
+            <div class="nav-item me-2">
                 <a href="#" class="nav-link"
                     data-bs-toggle="offcanvas"
                     data-bs-target="#channelDrawer">
-                    <i class="ti ti-layers"></i>
+                    <i class="ti ti-stack-2 me-1 d-none d-md-inline"></i>
+                    <span class="d-none d-md-inline">版本</span>
+                    <i class="ti ti-stack-2 d-md-none"></i>
                 </a>
             </div>
             @endif
@@ -111,11 +113,19 @@
     <div class="offcanvas-body">
         <div class="list-group list-group-flush">
             @foreach($channels as $channel)
+            @php $isActive = request('channel') == $channel['id']; @endphp
+            @if($isActive)
+            <div class="list-group-item active pe-none">
+                <div class="fw-bold">{{ $channel['name'] }}</div>
+                <small class="opacity-75">{{ __('language.' . $channel['lang']) }}</small>
+            </div>
+            @else
             <a href="{{ request()->fullUrlWithQuery(['channel' => $channel['id']]) }}"
                 class="list-group-item list-group-item-action">
                 <div class="fw-bold">{{ $channel['name'] }}</div>
                 <small class="text-muted">{{ __('language.' . $channel['lang']) }}</small>
             </a>
+            @endif
             @endforeach
         </div>
     </div>
@@ -134,7 +144,7 @@
 </div>
 
 {{-- 主内容区 --}}
-<div class="container-xl">
+<div class="container-fluid px-0">
     <div class="main-container">
 
         {{-- TOC 侧边栏（tablet+） --}}
@@ -160,13 +170,14 @@
                     @endif
                 </p>
 
-                <div class="content">
+                {{-- ↓ 正文内容用 article 包裹，隔离排版作用域 ── --}}
+                <article class="reader-body">
                     @if(isset($book['content']))
-                    {{!! $book['content'] !!}}
+                    {!! $book['content'] !!}
                     @else
                     <div>没有内容</div>
                     @endif
-                </div>
+                </article>
 
                 {{-- 上下翻页 --}}
                 <div class="mt-6 pt-6">
@@ -218,23 +229,7 @@
         {{-- 右侧边栏 --}}
         <div class="right-sidebar">
 
-            {{-- 版本卡片（desktop，wiki 侧边栏同款） --}}
-            @if(!empty($channels))
-            <div class="reader-channel-card">
-                <div class="reader-channel-title">版本</div>
-                <ul class="reader-channel-list">
-                    @foreach($channels as $channel)
-                    <li>
-                        <a href="{{ request()->fullUrlWithQuery(['channel' => $channel['id']]) }}"
-                            class="{{ request('channel') == $channel['id'] ? 'active' : '' }}">
-                            {{ $channel['name'] }}
-                            <span class="reader-channel-lang">{{ __('language.' . $channel['lang']) }}</span>
-                        </a>
-                    </li>
-                    @endforeach
-                </ul>
-            </div>
-            @endif
+
 
             {{-- 下载 --}}
             @if(!empty($book['downloads']))