feat: implement UI styling, back-to-top functionality, and PyTorch development environment configuration

Author: luffydod

assets/css/style.css

@@ -553,4 +553,61 @@ a:hover {
         margin-top: 1.5rem;
         order: -1;
     }
+}
+
+/* Back to Top Button */
+.back-to-top {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    background-color: var(--accent-color);
+    color: white;
+    border: none;
+    box-shadow: var(--shadow-md);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(20px);
+    transition: all 0.3s ease;
+    z-index: 100;
+}
+
+.back-to-top.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.back-to-top:hover {
+    background-color: var(--accent-hover);
+    transform: translateY(-5px);
+}
+
+/* TOC Active State */
+#toc-list a.active {
+    color: var(--accent-color);
+    font-weight: 600;
+}
+
+#toc-list li {
+    position: relative;
+    margin-bottom: 0.5rem;
+}
+
+#toc-list a.active::before {
+    content: '';
+    position: absolute;
+    left: -12px;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 1.2em;
+    width: 3px;
+    background-color: var(--accent-color);
+    border-radius: 2px;
 }

assets/js/app.js

@@ -8,6 +8,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const moonIcon = document.getElementById('moon-icon');
     const sunIcon = document.getElementById('sun-icon');
     const githubEditLink = document.getElementById('github-edit-link');
+    const backToTopBtn = document.getElementById('back-to-top');
 
     const GITHUB_REPO_URL = 'https://github.com/luffydod/ConfigNote/edit/main/';
     const APP_BASE_URL = new URL('./', document.baseURI);
@@ -264,6 +265,11 @@ document.addEventListener('DOMContentLoaded', () => {
             buildTableOfContents();
             addCopyButtons();
 
+            const h1 = markdownContent.querySelector('h1');
+            const fileTitle = typeof notesConfig !== 'undefined' ? notesConfig.find(n => n.path === normalizedNotePath)?.title : undefined;
+            const noteTitle = h1 ? h1.textContent : (fileTitle || '笔记');
+            document.title = `${noteTitle} - ConfigNote`;
+
             if (window.location.hash) {
                 scrollToHeading(window.location.hash.substring(1));
             }
@@ -311,6 +317,7 @@ document.addEventListener('DOMContentLoaded', () => {
         });
 
         tocList.innerHTML = tocHTML;
+        setupScrollspy();
     }
 
     const tocListDom = document.getElementById('toc-list');
@@ -392,6 +399,61 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
+    // --- Scrollspy & Back to Top ---
+    let currentScrollListener = null;
+
+    function setupScrollspy() {
+        const headings = Array.from(markdownContent.querySelectorAll('h1, h2, h3, h4'));
+        const tocLinks = document.querySelectorAll('#toc-list a');
+        
+        if (headings.length === 0) return;
+
+        if (currentScrollListener) {
+            window.removeEventListener('scroll', currentScrollListener);
+        }
+
+        currentScrollListener = () => {
+            let activeId = '';
+            const scrollPos = window.scrollY + 120; 
+
+            for (const h of headings) {
+                if (h.offsetTop <= scrollPos) {
+                    activeId = h.id;
+                } else {
+                    break;
+                }
+            }
+
+            if (!activeId && headings.length > 0) {
+                activeId = headings[0].id;
+            }
+
+            tocLinks.forEach(a => {
+                a.classList.remove('active');
+                if (activeId && a.getAttribute('href') === `#${activeId}`) {
+                    a.classList.add('active');
+                }
+            });
+        };
+
+        window.addEventListener('scroll', currentScrollListener);
+        currentScrollListener();
+    }
+
+    if (backToTopBtn) {
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                backToTopBtn.classList.add('show');
+            } else {
+                backToTopBtn.classList.remove('show');
+            }
+        });
+
+        backToTopBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+    }
+
     // --- Router ---
     function handleRoute() {
         const urlParams = new URLSearchParams(window.location.search);
@@ -400,6 +462,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (notePath) {
             fetchAndRenderNote(notePath);
         } else {
+            document.title = "ConfigNote - 📝 我的开发工具配置备忘录";
             noteView.classList.replace('section-active', 'section-hidden');
             homeView.classList.replace('section-hidden', 'section-active');
             window.scrollTo(0, 0);

docker/pytorch_dev/Dockerfile

@@ -69,5 +69,11 @@ WORKDIR /home/${YOUR_NAME}/workspace
 # 暴露 22 端口
 EXPOSE 22
 
+# 将用户的 .local/bin 加入环境变量，解决 pip 用户安装报 PATH 警告的问题
+ENV PATH="/home/${YOUR_NAME}/.local/bin:${PATH}"
+
+# 允许 pip 全局安装，突破 PEP 668 限制
+ENV PIP_BREAK_SYSTEM_PACKAGES=1
+
 # 启动 sshd 服务，并以前台模式 (-D) 运行，这能保持容器一直处于运行状态
 CMD ["/usr/sbin/sshd", "-D"]

index.html

@@ -101,6 +101,15 @@ <h1 class="hero-title">📝 ConfigNote</h1>
         <p>ConfigNote &copy; 2026</p>
     </footer>
 
+    <!-- Back to Top Button -->
+    <button id="back-to-top" class="back-to-top" aria-label="回到顶部">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="12" y1="19" x2="12" y2="5"></line>
+            <polyline points="5 12 12 5 19 12"></polyline>
+        </svg>
+    </button>
+
     <!-- Scripts -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>