✨ feat: 添加文档功能和页面模板

web/template/syzoj/docs.php

@@ -0,0 +1,208 @@
+<?php include('template/' . $OJ_TEMPLATE . '/header.php'); ?>
+<script src="include/vditor-adapter.js"></script>
+
+<style>
+  .docs-shell {
+    display: flex;
+    gap: 18px;
+    min-height: calc(100vh - 180px);
+    align-items: stretch;
+  }
+
+  .docs-sidebar,
+  .docs-content {
+    background: rgba(255, 255, 255, 0.88);
+    border-radius: 18px;
+    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
+    backdrop-filter: blur(8px);
+  }
+
+  .docs-sidebar {
+    width: 300px;
+    padding: 18px 0;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  .docs-sidebar-header {
+    padding: 0 20px 14px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+  }
+
+  .docs-sidebar-header h2 {
+    margin: 0;
+    font-size: 1.2rem;
+  }
+
+  .docs-sidebar-header p {
+    margin: 8px 0 0;
+    color: #6b7280;
+    font-size: 0.92rem;
+  }
+
+  .docs-nav {
+    padding: 12px;
+    max-height: calc(100vh - 260px);
+    overflow-y: auto;
+  }
+
+  .docs-nav a {
+    display: block;
+    padding: 12px 14px;
+    border-radius: 12px;
+    color: #1f2937;
+    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
+  }
+
+  .docs-nav a:hover,
+  .docs-nav a:focus {
+    background: rgba(37, 99, 235, 0.1);
+    color: #1d4ed8;
+    transform: translateX(2px);
+  }
+
+  .docs-nav a.active {
+    background: linear-gradient(135deg, #1d4ed8, #2563eb);
+    color: #fff;
+    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.24);
+  }
+
+  .docs-empty {
+    padding: 14px 20px;
+    color: #6b7280;
+  }
+
+  .docs-content {
+    flex: 1;
+    padding: 22px 28px 28px;
+    overflow: hidden;
+  }
+
+  .docs-content-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 18px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+  }
+
+  .docs-content-header h1 {
+    margin: 0;
+    font-size: 1.6rem;
+    line-height: 1.3;
+  }
+
+  .docs-content-header span {
+    color: #6b7280;
+    font-size: 0.92rem;
+    white-space: nowrap;
+  }
+
+  .docs-render {
+    min-height: 320px;
+    color: #111827;
+    overflow-wrap: anywhere;
+  }
+
+  .docs-render .vditor-reset {
+    font-size: 16px;
+    line-height: 1.8;
+  }
+
+  .docs-render table tr td {
+    border: 1px solid #d1d5db;
+    text-align: center;
+    min-width: 120px;
+    height: 30px;
+  }
+
+  .docs-render table th {
+    border: 1px solid #d1d5db;
+    min-width: 120px;
+    height: 30px;
+    background-color: #eff6ff;
+    text-align: center;
+  }
+
+  @media (max-width: 991px) {
+    .docs-shell {
+      flex-direction: column;
+      min-height: auto;
+    }
+
+    .docs-sidebar {
+      width: 100%;
+    }
+
+    .docs-nav {
+      max-height: 260px;
+    }
+
+    .docs-content {
+      padding: 18px 18px 22px;
+    }
+
+    .docs-content-header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .docs-content-header span {
+      white-space: normal;
+    }
+  }
+</style>
+
+<div class="docs-shell">
+  <aside class="docs-sidebar">
+    <div class="docs-sidebar-header">
+      <h2>文档目录</h2>
+      <p>左侧选择 Markdown 文档，右侧查看渲染结果。</p>
+    </div>
+    <div class="docs-nav">
+      <?php if (empty($doc_entries)) { ?>
+        <div class="docs-empty">当前 doc 目录下还没有 Markdown 文档。</div>
+      <?php } else { ?>
+        <?php foreach ($doc_entries as $doc_entry) { ?>
+          <a
+            href="docs.php?file=<?php echo rawurlencode($doc_entry['file']); ?>"
+            class="<?php if ($doc_entry['file'] === $selected_file) echo 'active'; ?>"
+          >
+            <?php echo htmlspecialchars($doc_entry['title'], ENT_QUOTES, 'UTF-8'); ?>
+          </a>
+        <?php } ?>
+      <?php } ?>
+    </div>
+  </aside>
+
+  <section class="docs-content">
+    <div class="docs-content-header">
+      <h1><?php echo htmlspecialchars($selected_title, ENT_QUOTES, 'UTF-8'); ?></h1>
+      <span><?php echo empty($selected_file) ? '未选择文档' : htmlspecialchars($selected_file, ENT_QUOTES, 'UTF-8'); ?></span>
+    </div>
+
+    <?php if (!empty($selected_markdown)) { ?>
+      <div id="doc-render" class="docs-render md"><?php echo htmlspecialchars($selected_markdown, ENT_NOQUOTES, 'UTF-8'); ?></div>
+    <?php } else { ?>
+      <div class="ui info message">没有可显示的文档内容。</div>
+    <?php } ?>
+  </section>
+</div>
+
+<script>
+  $(document).ready(function () {
+    if (!$('#doc-render').length) {
+      return;
+    }
+
+    HustOJVditor.renderMarkdownBlocks('#doc-render', {
+      useTextContent: true
+    }).catch(function (error) {
+      console.error('Failed to render docs markdown.', error);
+    });
+  });
+</script>
+
+<?php include('template/' . $OJ_TEMPLATE . '/footer.php'); ?>

web/template/syzoj/header.php

@@ -22,7 +22,7 @@
             }
             return $result;
         }
-        $url=basename($_SERVER['REQUEST_URI']);
+        $url=basename(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH));
         $dir=basename(getcwd());
         if($dir=="discuss3") $path_fix="../";
         else $path_fix="";
@@ -154,6 +154,8 @@
                 href="cppreference.php">
                 <i class="help icon"></i><?php echo $MSG_CPPREFRENCE?>
             </a>
+            <a class="item <?php if ($url=="docs.php") echo "active";?>"
+                href="<?php echo $path_fix?>docs.php"><i class="book icon"></i> 文档</a>
             <!-- 排名 -->
             <a class="desktop-only item <?php if ($url=="ranklist.php") echo "active";?> "
                 href="<?php echo $path_fix?>ranklist.php"><i class="signal icon"></i> <?php echo $MSG_RANKLIST?></a>