zhangdocs 1.1.14 → 1.1.16

package/.bin/zhangdocs.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 var commander = require('commander');
 var appInfo = require('../package');

package/lib/build.js

@@ -56,6 +56,67 @@ marked.setOptions({
 
 var template = '';
 
+// 生成目录页面HTML
+function generateIndexPage(zhangdocsmd, pathArr, currentPath, relativePath) {
+    var html = '<div class="index-page">';
+    html += '<h1>文档目录</h1>';
+    html += '<div class="index-list">';
+    
+    // 计算URL - 所有md文件都生成到html目录
+    function pathto(urlarr, basename, current) {
+        var url = '', temp = '';
+        for (var i = 0; i < urlarr.length; i++) {
+            if (urlarr[i].indexOf('md/' + basename) > -1) url = urlarr[i];
+        }
+        // 传进来的 url 处理 - 所有文件都生成到html目录
+        url = url.replace(process.cwd() + '/md', process.cwd() + '/html').replace(/\.md/, '.html');
+        url = url.replace(process.cwd() + '/', '');
+        
+        // 获取相对路径（从index.html到目标文件）
+        temp = file.relativePath(current, process.cwd());
+        temp += url;
+        return temp;
+    }
+    
+    function generateList(arr, _sub, level) {
+        level = level || 0;
+        var indent = level * 20;
+        var listHtml = '<ul style="margin-left: ' + indent + 'px;">';
+        
+        for (var i = 0; i < arr.length; i++) {
+            var s = _sub ? _sub + '/' + arr[i] : arr[i];
+            
+            if (typeof arr[i] === 'object') {
+                // 这是一个目录
+                for (var a in arr[i]) {
+                    listHtml += '<li class="index-category">';
+                    listHtml += '<span class="category-title">' + a + '</span>';
+                    listHtml += generateList(arr[i][a], (_sub ? _sub + '/' + a : a), level + 1);
+                    listHtml += '</li>';
+                }
+            } else {
+                // 这是一个文件
+                // 计算URL - 所有文件都生成到html目录
+                var url = pathto(pathArr, s, currentPath);
+                
+                var displayName = arr[i].replace(/\.md/, '');
+                listHtml += '<li class="index-item">';
+                listHtml += '<a href="' + url + '">' + displayName + '</a>';
+                listHtml += '</li>';
+            }
+        }
+        
+        listHtml += '</ul>';
+        return listHtml;
+    }
+    
+    html += generateList(zhangdocsmd, '', 0);
+    html += '</div>';
+    html += '</div>';
+    
+    return html;
+}
+
 function build(commander, changeFile) {
 
     require('./menu_update')();
@@ -86,14 +147,23 @@ function build(commander, changeFile) {
 
     if (changeFile) pathArr = [changeFile];
 
+    // 先处理所有md文件，包括第一个md文件
     pathArr.forEach(function (item, idx) {
         //菜单层级
         var isIndex = false
         var len = item.replace(process.cwd() + '/md/', '').split('/').length;
 
         if (path.basename(item) === zhangdocsmd[0]) len = 0;
-        //导航菜单生成
-        var navHTML = nav(zhangdocsmd, item, pathArr, len);
+        
+        // 获取 md 的相对目录（提前获取，用于计算HTML路径）
+        var itemRel = path.normalize(item);
+        itemRel = itemRel.replace(path.normalize(process.cwd() + '/md/'), '');
+        
+        // 指定HTML路径 - 所有md文件都生成到html目录
+        var _path = path.normalize(process.cwd() + '/html/' + itemRel).replace('.md', ".html");
+        
+        //导航菜单生成 - 传入HTML路径作为当前页面
+        var navHTML = nav(zhangdocsmd, _path, pathArr, len);
 
         let mdContent = file.read(item);
         // 自动把 \[ ... \] 替换为 $$ ... $$
@@ -110,18 +180,9 @@ function build(commander, changeFile) {
         markedstr = toc(markedstr, function (_html) {
             tocHTML = _html.toc
         });
-        item = path.normalize(item)
-
-        // 获取 md 的相对目录
-        item = item.replace(path.normalize(process.cwd() + '/md/'), '');
 
-        // 是否为首页判断
-        zhangdocsmd[0] === item ? isIndex = true : isIndex = false;
-
-        // 指定HTML路径
-        _path = zhangdocsmd[0] === item ?
-            (path.normalize(process.cwd() + '/' + item)).replace(item, "index.html") :
-            (path.normalize(process.cwd() + '/html/' + item)).replace('.md', ".html");
+        // 第一个md文件不再作为首页，所有md文件都生成到html目录
+        isIndex = false;
 
         // 图片引用路径处理
         markedstr = imgPath(markedstr, _path);
@@ -142,6 +203,23 @@ function build(commander, changeFile) {
         if (!changeFile) log(color.blue('Generates') + ' "' + item.replace('.html', ".md") + '"' + color.blue(" Success ! ") + new Date());
     })
 
+    // 单独生成index.html作为目录页面
+    var indexPath = path.normalize(process.cwd() + '/index.html');
+    var indexNavHTML = nav(zhangdocsmd, indexPath, pathArr, 0);
+    var indexMarkedstr = generateIndexPage(zhangdocsmd, pathArr, indexPath, file.relativePath(indexPath, process.cwd()));
+    
+    html = file.ejs(template + '/layout.ejs', {
+        title: pkg.name,//项目工程名字
+        index: true,//是否为首页
+        pkg: pkg,
+        relative_path: file.relativePath(indexPath, process.cwd()),//相对路径
+        menu_html: indexNavHTML,//页面之间的超链接导航
+        toc_html: '',// markdown 导航
+        markdown_html: indexMarkedstr // markdown 生成字符串
+    });
+    file.write(indexPath, html);
+    if (!changeFile) log(color.blue('Generates') + ' "index.html (目录页面)"' + color.blue(" Success ! ") + new Date());
+
     // 复制复制所有静态资源到生产目录里面
     copy(template + '/source/', todir + 'static', {
         filter: function (_file) {

package/lib/nav.js

@@ -63,28 +63,23 @@ function pathto(urlarr,basename,current,index,floor){
     for (var i = 0; i < urlarr.length; i++) {
         if(urlarr[i].indexOf('md/'+basename) > -1) url = urlarr[i];
     };
-    // 传进来的 url 处理
+    // 传进来的 url 处理 - 所有md文件都生成到html目录
     url = url.replace(process.cwd()+'/md',process.cwd() + '/html').replace(/\.md/,'.html');
+    url = url.replace(process.cwd()+'/','');
 
-    // 当前md 的 url 处理
-    current = current.replace(process.cwd()+'/md',process.cwd() + '/html').replace(/\.md/,'.html');
-
-    // 跳转首页相对地址 特殊处理
-    var _index = index;
-
-    index = index.replace(/\.md/,'.html');
-    if(url==='') url = 'index.html'
-    if(_index === basename){
-        url = url.replace(process.cwd()+'/html/','').replace(index,'index.html')
-    }else{
-        url = url.replace(process.cwd()+'/','')
+    // 当前页面的 url 处理
+    // 如果是index.html，保持原样；否则转换为html目录下的路径
+    if(current.indexOf('index.html') === -1) {
+        current = current.replace(process.cwd()+'/md',process.cwd() + '/html').replace(/\.md/,'.html');
     }
 
     // 获取相对路径
     temp = file.relativePath(current ,process.cwd());
     
-    // 首页跳转到其他页面的特殊处理
-    if(floor === 0) temp = "";
+    // 从index.html跳转到其他页面的特殊处理
+    if(floor === 0 && current.indexOf('index.html') > -1) {
+        temp = "";
+    }
 
     temp += url;
     return temp;

package/package.json

@@ -1,47 +1,47 @@
-{
-    "name": "zhangdocs",
-    "version": "1.1.14",
-    "description": "Simple document generation tool. Dependence Node.js run.",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/jaywcjlove/zhangdocs.git"
-    },
-    "main": "index.js",
-    "bin": {
-        "doc": ".bin/zhangdocs.js"
-    },
-    "keywords": [
-        "zhangdocs",
-        "markdown",
-        "api",
-        "document",
-        "tool"
-    ],
-    "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "author": "kenny wang <wowohoo@qq.com>",
-    "license": "MIT",
-    "dependencies": {
-        "autoprefixer-stylus": "^0.13.0",
-        "cheerio": "^0.22.0",
-        "chokidar": "^1.6.1",
-        "colors-cli": "^1.0.7",
-        "commander": "^2.9.0",
-        "ejs": "^2.5.6",
-        "highlight.js": "^11.11.1",
-        "inquirer": "^3.0.5",
-        "marked": "^0.3.6",
-        "semver": "^5.3.0",
-        "shelljs": "0.6.0",
-        "ssr": "^1.0.15",
-        "stylus": "^0.54.5",
-        "underscore": "^1.8.3"
-    },
-    "zhangdocs": {
-        "theme": "default",
-        "md": [
-            "README.md"
-        ]
-    }
+{
+    "name": "zhangdocs",
+    "version": "1.1.16",
+    "description": "Simple document generation tool. Dependence Node.js run.",
+    "repository": {
+        "type": "git",
+        "url": "https://github飁.com/jaywcjlove/zhangdocs.git"
+    },
+    "main": "index.js",
+    "bin": {
+        "doc": ".bin/zhangdocs.js"
+    },
+    "keywords": [
+        "zhangdocs",
+        "markdown",
+        "api",
+        "document",
+        "tool"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "kenny wang <wowohoo@qq.com>",
+    "license": "MIT",
+    "dependencies": {
+        "autoprefixer-stylus": "^0.13.0",
+        "cheerio": "^0.22.0",
+        "chokidar": "^1.6.1",
+        "colors-cli": "^1.0.7",
+        "commander": "^2.9.0",
+        "ejs": "^2.5.6",
+        "highlight.js": "^11.11.1",
+        "inquirer": "^3.0.5",
+        "marked": "^0.3.6",
+        "semver": "^5.3.0",
+        "shelljs": "0.6.0",
+        "ssr": "^1.0.15",
+        "stylus": "^0.54.5",
+        "underscore": "^1.8.3"
+    },
+    "zhangdocs": {
+        "theme": "default",
+        "md": [
+            "README.md"
+        ]
+    }
 }

package/theme/handbook/footer.ejs

@@ -13,35 +13,6 @@
     $('.nav').css('display', 'none');
     $('.warpper').css('padding', '0px');
   })
-  $('#toc-toggle').on('click', function () {
-    let width = $('.page-toc').width();
-    if (width > 100) {
-      $('.page-toc').width(0);
-      $('.page-toc').css({
-        'width': '0',
-        'min-width': '0',
-        'padding': '0',
-        'border': 'none'
-      });
-      $('.content').css('margin-left', '0px');
-      $(this).css({
-        'left': '0px'
-      });
-    } else {
-      $('.page-toc').width(200);
-      $('.page-toc').css({
-        'width': '200px',
-        'min-width': '0',
-        'padding': '0',
-        'border': 'none'
-      });
-      $('.content').css('margin-left', '200px');
-      $(this).css({
-        'left': '200px'
-      });
-    }
-  });
-
   // 高亮当前页面菜单
   var pathname = window.location.pathname;
   var hash = window.location.hash;

package/theme/handbook/header.ejs

@@ -1,15 +1,18 @@
-<div class="nav">
-    <div class="nav-header">
-        <div class="logo">
-            <%= title %>
-        </div>
-        <button class="nav-toggle" id="nav-toggle" aria-label="切换导航菜单">
-            <span></span>
-            <span></span>
-            <span></span>
-        </button>
+<!-- 右上角菜单图标 -->
+<button class="menu-icon" id="menu-icon" aria-label="打开菜单">
+    <span></span>
+    <span></span>
+    <span></span>
+</button>
+
+<!-- 弹出菜单 -->
+<div class="menu-overlay" id="menu-overlay"></div>
+<div class="menu-popup" id="menu-popup">
+    <div class="menu-popup-header">
+        <h3>导航菜单</h3>
+        <button class="menu-close" id="menu-close" aria-label="关闭菜单">×</button>
     </div>
-    <div class="nav-menu" id="nav-menu">
+    <div class="menu-popup-content">
         <%- menu_html -%>
     </div>
 </div>

package/theme/handbook/layout.ejs

@@ -1,14 +1,11 @@
 <% include head.ejs %>
   <div class="warpper" id="main-container" style="display: none;">
+    <% if (!index) { %>
     <div class="page-toc">
       <%- toc_html %>
     </div>
-    <div class="content markdown-body">
-      <svg id="toc-toggle" class="toc-toggle" stroke="black" fill="none" stroke-width="2" viewBox="0 0 24 24"
-        stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-black" xmlns="http://www.w3.org/2000/svg">
-        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-        <line x1="9" y1="3" x2="9" y2="21" />
-      </svg>
+    <% } %>
+    <div class="content markdown-body <%= index ? 'index-page-content' : '' %>">
 
       <%- markdown_html %>
     </div>
@@ -35,23 +32,107 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
   </div>
 
   <script>
-    // 立即执行，避免闪烁
-    (function() {
-      const expectedToken = '83687401';
-      const existingToken = localStorage.getItem('token');
-      if (existingToken === expectedToken) {
-        // Token正确，立即显示内容
-        const mainContainer = document.getElementById('main-container');
-        const navElement = document.querySelector('.nav');
-        if (mainContainer) mainContainer.style.display = 'block';
-        if (navElement) navElement.style.display = 'block';
-      }
-    })();
+      // 菜单弹出功能 - 提前定义，确保可以在任何地方调用
+      var initMenuPopup = (function() {
+        var isInitialized = false;
+        
+        return function() {
+          // 如果已经初始化过，跳过
+          if (isInitialized) {
+            return;
+          }
+          
+          var menuIcon = document.getElementById('menu-icon');
+          var menuPopup = document.getElementById('menu-popup');
+          var menuOverlay = document.getElementById('menu-overlay');
+          var menuClose = document.getElementById('menu-close');
+          
+          if (!menuIcon || !menuPopup || !menuOverlay || !menuClose) {
+            return;
+          }
+          
+          // 标记为已初始化
+          isInitialized = true;
+          
+          // 打开菜单
+          function openMenu() {
+            menuIcon.classList.add('menu-icon-active');
+            menuPopup.classList.add('menu-popup-show');
+            menuOverlay.classList.add('menu-overlay-show');
+            document.body.style.overflow = 'hidden'; // 防止背景滚动
+          }
+          
+          // 关闭菜单
+          function closeMenu() {
+            menuIcon.classList.remove('menu-icon-active');
+            menuPopup.classList.remove('menu-popup-show');
+            menuOverlay.classList.remove('menu-overlay-show');
+            document.body.style.overflow = ''; // 恢复滚动
+          }
+          
+          // 绑定事件
+          menuIcon.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (menuPopup.classList.contains('menu-popup-show')) {
+              closeMenu();
+            } else {
+              openMenu();
+            }
+          });
+          
+          menuClose.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            closeMenu();
+          });
+          
+          menuOverlay.addEventListener('click', function(e) {
+            if (e.target === menuOverlay) {
+              closeMenu();
+            }
+          });
+          
+          // 点击菜单项后关闭菜单
+          setTimeout(function() {
+            var menuLinks = menuPopup.querySelectorAll('a');
+            menuLinks.forEach(function(link) {
+              link.addEventListener('click', function() {
+                closeMenu();
+              });
+            });
+          }, 200);
+          
+          // ESC键关闭菜单
+          document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape' && menuPopup.classList.contains('menu-popup-show')) {
+              closeMenu();
+            }
+          });
+        };
+      })();
+      
+      // 立即执行，避免闪烁
+      (function() {
+        const expectedToken = '83687401';
+        const existingToken = localStorage.getItem('token');
+        if (existingToken === expectedToken) {
+          // Token正确，立即显示内容
+          const mainContainer = document.getElementById('main-container');
+          const menuIcon = document.getElementById('menu-icon');
+          if (mainContainer) mainContainer.style.display = 'block';
+          if (menuIcon) {
+            menuIcon.style.display = 'flex';
+            // 菜单图标显示后，初始化菜单功能
+            setTimeout(initMenuPopup, 50);
+          }
+        }
+      })();
 
     document.addEventListener('DOMContentLoaded', function () {
       const expectedToken = '83687401';
       const mainContainer = document.getElementById('main-container');
-      const navElement = document.querySelector('.nav');
+      const menuIcon = document.getElementById('menu-icon');
       const tokenModal = document.getElementById('token-modal');
       const tokenInput = document.getElementById('token-input');
       const tokenSubmit = document.getElementById('token-submit');
@@ -86,13 +167,17 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
       // 显示内容
       function showContent() {
         mainContainer.style.display = 'block';
-        if (navElement) navElement.style.display = 'block';
+        if (menuIcon) {
+          menuIcon.style.display = 'flex';
+          // 菜单图标显示后，初始化菜单功能
+          setTimeout(initMenuPopup, 50);
+        }
       }
 
       // 隐藏内容
       function hideContent() {
         mainContainer.style.display = 'none';
-        if (navElement) navElement.style.display = 'none';
+        if (menuIcon) menuIcon.style.display = 'none';
       }
 
       // 事件监听
@@ -194,49 +279,18 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
       }
     });
     
-    // 移动端导航菜单折叠/展开功能
-    (function() {
-      function initNavToggle() {
-        var navToggle = document.getElementById('nav-toggle');
-        var navMenu = document.getElementById('nav-menu');
-        
-        if (navToggle && navMenu) {
-          // 绑定点击事件
-          navToggle.onclick = function(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            navToggle.classList.toggle('nav-toggle-active');
-            navMenu.classList.toggle('nav-menu-open');
-          };
-          
-          // 点击菜单项后自动收起菜单（移动端）
-          if (window.innerWidth <= 768) {
-            setTimeout(function() {
-              var menuLinks = navMenu.querySelectorAll('a');
-              menuLinks.forEach(function(link) {
-                link.onclick = function() {
-                  navToggle.classList.remove('nav-toggle-active');
-                  navMenu.classList.remove('nav-menu-open');
-                };
-              });
-            }, 200);
-          }
-        }
-      }
-      
-      // 立即尝试初始化
-      initNavToggle();
-      
-      // DOM 加载完成后再次初始化
-      if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initNavToggle);
-      } else {
-        setTimeout(initNavToggle, 100);
-      }
-      
-      // 延迟初始化（处理动态显示的情况）
-      setTimeout(initNavToggle, 500);
-      setTimeout(initNavToggle, 1000);
-    })();
+    // 立即尝试初始化菜单功能
+    initMenuPopup();
+    
+    // DOM 加载完成后再次初始化
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initMenuPopup);
+    } else {
+      setTimeout(initMenuPopup, 100);
+    }
+    
+    // 延迟初始化（处理动态显示的情况）
+    setTimeout(initMenuPopup, 500);
+    setTimeout(initMenuPopup, 1000);
   </script>
   <% include footer.ejs %>

package/theme/handbook/source/css/main.styl

@@ -37,185 +37,152 @@ $link-color = #3498DB          // 链接色
 $border-color = #E5E9F2        // 边框色
 $hover-color = #1ABC9C         // 悬停绿色
 
-.nav
-    background: $secondary-color
-    z-index: 2
-    height: 80px
-    line-height: 61px
-    border-bottom: 1px solid $border-color
-    padding: 0 0 0 20px
+// 右上角菜单图标
+.menu-icon
     position: fixed
+    top: 12px
+    right: 20px
+    width: 32px
+    height: 32px
+    background: rgba(0, 0, 0, 0.05)
+    border: 1px solid rgba(0, 0, 0, 0.1)
+    border-radius: 4px
+    cursor: pointer
+    z-index: 1000
+    display: none
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    padding: 0
+    box-shadow: 0 1px 3px rgba(0,0,0,0.08)
+    transition: all 0.3s ease
+    pointer-events: auto
+    -webkit-tap-highlight-color: transparent
+    &:hover
+        background: rgba(0, 0, 0, 0.08)
+        border-color: rgba(0, 0, 0, 0.15)
+        box-shadow: 0 2px 6px rgba(0,0,0,0.12)
+    &:active
+        transform: scale(0.95)
+    span
+        width: 18px
+        height: 2px
+        background: #666
+        border-radius: 1px
+        margin: 2.5px 0
+        transition: all 0.3s ease
+        transform-origin: center
+    &.menu-icon-active
+        span:nth-child(1)
+            transform: rotate(45deg) translate(7px, 7px)
+        span:nth-child(2)
+            opacity: 0
+        span:nth-child(3)
+            transform: rotate(-45deg) translate(7px, -7px)
+
+// 菜单遮罩层
+.menu-overlay
+    position: fixed
+    top: 0
+    left: 0
     width: 100%
+    height: 100%
+    background: rgba(0,0,0,0.5)
+    z-index: 1001
+    opacity: 0
+    visibility: hidden
+    transition: all 0.3s ease
+    &.menu-overlay-show
+        opacity: 1
+        visibility: visible
+
+// 弹出菜单
+.menu-popup
+    position: fixed
+    top: 0
+    right: -400px
+    width: 400px
+    height: 100%
+    background: white
+    z-index: 1002
+    box-shadow: -2px 0 10px rgba(0,0,0,0.1)
+    transition: right 0.3s ease
+    display: flex
+    flex-direction: column
     @media mq-mobile
-        height: auto
-        min-height: auto
-        position: relative
-        padding: 0
-        line-height: 1.5
+        width: 80%
+        right: -80%
+    &.menu-popup-show
+        right: 0
+    .menu-popup-header
+        display: flex
+        justify-content: space-between
+        align-items: center
+        padding: 10px 20px
         border-bottom: 1px solid $border-color
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1)
-    .nav-header
-        @media mq-mobile
-            display: flex
-            justify-content: space-between
-            align-items: center
-            padding: 12px
-            border-bottom: 1px solid rgba(0,0,0,0.1)
-        @media (min-width: 769px)
-            display: block
-            padding: 0
-            border-bottom: none
-            .logo
-                float: left
-                padding: 10px 20px 0 0
-                font-size: 24px
-                color: #61dafb
-    .nav-menu
-        @media (min-width: 769px)
-            display: block
-            height: 100%
-        @media mq-mobile
-            overflow-y: hidden
-            transition: max-height 0.3s ease-out
-            max-height: 0
-            &.nav-menu-open
-                max-height: 70vh
-                overflow-y: auto
-                -webkit-overflow-scrolling: touch
-                transition: max-height 0.5s ease-in
-        ul
-            @media mq-mobile
-                display: block
-    .nav-toggle
-        @media mq-mobile
-            display: flex
-            flex-direction: column
-            justify-content: space-around
-            width: 28px
-            height: 28px
+        background: $secondary-color
+        h3
+            margin: 0
+            font-size: 16px
+            color: $text-color
+            font-weight: 600
+        .menu-close
+            width: 24px
+            height: 24px
             background: transparent
             border: none
+            font-size: 20px
+            color: $text-color
             cursor: pointer
+            line-height: 1
             padding: 0
-            z-index: 100
-            span
-                width: 100%
-                height: 3px
-                background: $text-color
-                border-radius: 3px
-                transition: all 0.3s ease
-                transform-origin: center
-            &.nav-toggle-active
-                span:nth-child(1)
-                    transform: rotate(45deg) translate(7px, 7px)
-                span:nth-child(2)
-                    opacity: 0
-                span:nth-child(3)
-                    transform: rotate(-45deg) translate(7px, -7px)
-        @media (min-width: 769px)
-            display: none
-    ul  
-        list-style: none
-        position: relative
-        display: inline-table
-        display: block
-        overflow-x:auto
-        height:100%
-        @media mq-mobile
-            flex-direction: column
-            width: 100%
-            overflow: visible
-            height: auto
-            padding: 0
+            transition: all 0.2s ease
+            &:hover
+                color: $primary-color
+                transform: scale(1.1)
+    .menu-popup-content
+        flex: 1
+        overflow-y: auto
+        padding: 20px
         ul
-            display: none
-            background: #D1D1D1
-            border-radius: 0px
+            list-style: none
+            margin: 0
             padding: 0
-            position: absolute
-            top: 100%
-            z-index 9
-            @media mq-mobile
-                position: static
-                background: rgba(0,0,0,0.02)
-                border-left: 3px solid $primary-color
-                margin-left: 15px
-                display: none
-            li.active
+            li
+                margin: 0
+                padding: 0
                 a
-                    color:$primary-color
-                    line-height:29px
-                    height:29px
-            li 
-                float: none
-                border-bottom: 1px solid #C8C8C8
-                position: relative
-                @media mq-mobile
-                    border-bottom: 1px solid rgba(0,0,0,0.05)
-                a:hover 
-                    background: #4b545f
-                    color:$hover-color
-                    @media mq-mobile
-                        background: rgba(0,0,0,0.03)
-                        color: $text-color
-            a
-                color: $text-color
-                line-height: 29px
-                white-space:nowrap
-                word-break:keep-all
-                @media mq-mobile
-                    padding: 8px 15px
-                    line-height: 1.5
-                    font-size: 14px
-            ul
-                position: absolute
-                left: 100%
-                top:0
-        li
-            float: left
-            line-height: 40px
-            @media mq-mobile
-                float: none
-                line-height: 1.5
-                width: 100%
-                border-bottom: 1px solid rgba(0,0,0,0.05)
-            a
-                color: $text-color
-                text-decoration: none
-                padding: 0 15px
-                display: block
-                @media mq-mobile
+                    display: block
                     padding: 12px 15px
-                    width: 100%
+                    color: $text-color
+                    text-decoration: none
+                    border-radius: 4px
+                    transition: all 0.2s ease
                     font-size: 15px
-            &:hover
-                @media mq-mobile
-                    background-color: rgba(0,0,0,0.02)
-                a
-                    color: $hover-color
-        li.active
-            @media mq-mobile
-                background-color: rgba(74, 144, 226, 0.1)
-            a
-                color:$primary-color
-                height: 40px
-                @media mq-mobile
-                    height: auto
-                    color: $primary-color
-                    font-weight: 600
-    ul li:hover > ul
-        display: block
-    ul:after
-        content: ""
-        clear: both
-        display: block
+                    &:hover
+                        background: $secondary-color
+                        color: $primary-color
+                &.active
+                    a
+                        background: rgba($primary-color, 0.1)
+                        color: $primary-color
+                        font-weight: 600
+                ul
+                    margin-left: 20px
+                    margin-top: 5px
+                    li
+                        a
+                            padding: 8px 15px
+                            font-size: 14px
+                            color: lighten($text-color, 20%)
+                        &.active
+                            a
+                                color: $primary-color
 .warpper
     width: 100%
-    padding: 80px 0 0 0
+    padding: 0
     height: 100%
     overflow: auto
-    @media mq-mobile
-        padding-top: 0
     .page-toc,.markdown-body
         height:100%
     .markdown-body
@@ -223,8 +190,10 @@ $hover-color = #1ABC9C         // 悬停绿色
         overflow: auto
         @media mq-mobile
             margin-left:0
+        &.index-page-content
+            margin-left: 0
     .page-toc
-        height:calc(100% - 80px)
+        height: 100%
         position: fixed
         width:tocwidth
         border-right: 1px solid #bbb
@@ -233,11 +202,14 @@ $hover-color = #1ABC9C         // 悬停绿色
         overflow-y: auto
         overflow-x: hidden
         font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif !important;
+        padding-top: 20px
         @media mq-mobile
             display none
         ul
             list-style-type: none
             margin: 0
+            padding: 0
+            padding-right: 5px
 
             a 
                 display: block
@@ -250,12 +222,13 @@ $hover-color = #1ABC9C         // 悬停绿色
                 &:hover
                     text-decoration: underline
             li 
-                padding-left:3px
+                padding-left: 3px
                 line-height:25px
                 text-align:left
             ul
-                margin:0 0 0 10px
-                padding: 0 0 0 9px
+                margin: 0
+                padding-left: 12px
+                padding-right: 5px
                 li 
                     a 
                         font-size:90%
@@ -396,28 +369,8 @@ table
     &:hover
         background: darken($primary-color, 10%)
 
-.toc-toggle
-    transition: all 0.3s ease
-    position: fixed
-    left: 200px
-    top: 80px
-    width: 24px
-    height: 24px
-    cursor: pointer
-    z-index: 0
-    @media mq-mobile
-        display: none
-    
-.page-toc
-    transition: all 0.3s ease
-    &.toc-collapsed
-        transform: translateX(-100%)
-
 .content
-    transition: all 0.3s ease
     position: relative
-    &.content-expanded
-        margin-left: 12px
 
 // 数学公式样式
 .katex-display
@@ -430,4 +383,61 @@ table
     font-size: 1.1em
 
 .katex-error
-    color: #f00
+    color: #f00
+
+// 首页目录页面样式
+.index-page
+    padding: 40px 20px
+    max-width: 1200px
+    margin: 0 auto
+    
+    h1
+        font-size: 32px
+        color: $text-color
+        margin-bottom: 30px
+        font-weight: 600
+        border-bottom: 2px solid $primary-color
+        padding-bottom: 15px
+    
+    .index-list
+        ul
+            list-style: none
+            margin: 0
+            padding: 0
+            
+        .index-category
+            margin: 15px 0
+            
+            .category-title
+                display: block
+                font-size: 18px
+                font-weight: 600
+                color: $primary-color
+                margin-bottom: 10px
+                padding: 8px 12px
+                background: rgba($primary-color, 0.1)
+                border-left: 4px solid $primary-color
+                border-radius: 4px
+            
+            ul
+                margin-left: 20px !important
+                margin-top: 10px
+        
+        .index-item
+            margin: 8px 0
+            
+            a
+                display: inline-block
+                padding: 10px 15px
+                color: $text-color
+                text-decoration: none
+                border-radius: 4px
+                transition: all 0.2s ease
+                font-size: 16px
+                border-left: 3px solid transparent
+                
+                &:hover
+                    background: $secondary-color
+                    color: $primary-color
+                    border-left-color: $primary-color
+                    transform: translateX(5px)